/* SOVRA landing page — implemented from Figma node 476:796 */

:root {
  --blue: #1E78CC;          /* Light Mode/Blues/1E78CC */
  --purple: #9D4EDA;
  --orange: #D85E18;
  --red: #CF2023;
  --green: #338348;
  --ink: #000;
  --ink-soft: #333;
  --ink-muted: #666;
  --ink-faint: #999;
  --card-bg: rgba(255, 253, 251, 0.5);
  --card-border: #BDB3AB;
  --content-width: 1144px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--ink);
  background: #fff;
}

img { display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

.container {
  max-width: calc(var(--content-width) + 48px); /* content 1144 + side paddings */
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- shared type ---------- */

.eyebrow {
  font-size: 24px;
  font-weight: 600;
  background: linear-gradient(to left, var(--blue) 39.423%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: 699px;      /* gradient spans this fixed box in the design */
  max-width: 100%;
}

.eyebrow--center { width: 100%; text-align: center; }

.heading {
  font-size: 54px;
  font-weight: 600;
  line-height: normal;
  color: var(--ink);
}

.section__title {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section__title--center { text-align: center; }

.prose {
  font-size: 18px;
  font-weight: 300;
  line-height: 36px;
}

.prose p + p { margin-top: 36px; }

.thin-pipe { font-weight: 100; }

/* ---------- buttons / forms ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
}

.btn--primary {
  background: var(--blue);
  color: #fff;
  font-size: 20px;
  padding: 8px 24px;
}

.btn--primary:not(.hero__cta):hover { background: #1a69b4; }

/* ---------- navigation ---------- */

.nav {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Retracting the nav on scroll-down buys back 84px of reading height, so it is
   functional rather than decorative and still happens under reduced motion.
   Only the slide is dropped there, which is why the transition sits inside the
   media query and the transform does not. */
.nav--hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: no-preference) {
  .nav { transition: transform .3s ease; }
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 150px;
  height: 84px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__lockup {
  height: 40px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav__link {
  font-size: 16px;
  font-weight: 600;
  padding: 8px 24px;
  border-radius: 12px;
}

.nav__link:hover { background: #f2f7fc; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  height: 734px;
  overflow: hidden;
  background: #000;
}

.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero__image.is-active { opacity: 1; }

.hero__image--flip { transform: scaleX(-1); }

/* soft bottom fade keeping the hero copy legible over bright photo areas */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 24%, rgba(0, 0, 0, 0) 58%);
}

.hero__inner {
  position: relative;
  max-width: 1544px;
  margin: 0 auto;
  height: 100%;
}

.hero__content {
  position: absolute;
  left: clamp(32px, 13vw, 200px);
  bottom: clamp(24px, 8vh, 60px);
  /* The design frame is 689px because its two text boxes hug their own copy,
     which makes their centring a no-op and leaves both reading as left aligned
     from x=0. Pinning that width here instead wraps the subtitle, since it
     renders a little wider than the design's, and centring a wrapped line puts
     the two out of alignment. Sizing to the copy keeps the single line and the
     shared left edge the design actually shows. */
  width: max-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
}

.hero__titles {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;
  text-transform: uppercase;
}

.hero__title {
  font-size: 105px;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.06em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.hero__subtitle {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

/* Design specs the hero CTA label at medium. .btn sets 600 for both copies of
   this button and the hero node does not govern the one in the nav. */
.hero__cta { font-weight: 500; }

.hero__scroll {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 11px;
  width: 94px;
  height: 94px;
  transition: transform 0.2s ease;
}

.hero__scroll:hover { transform: translateX(-50%) translateY(4px); }

/* ---------- page body w/ gradients ---------- */

.page-body {
  position: relative;
  overflow: hidden;
}

.page-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/gradient-body.svg');
  background-size: 100% 100%;
  z-index: 0;
  pointer-events: none;
}

.page-body::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3178px;
  background-image: url('assets/gradient-footer.svg');
  background-size: 100% 100%;
  z-index: 0;
  pointer-events: none;
}

.page-body > * { position: relative; z-index: 1; }

/* ---------- sections ---------- */

.section { padding: 120px 0; }

.section .container {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

#challenge .container { gap: 48px; }
#challenge .container > .prose:last-child { margin-top: 16px; }

.section--how .container { gap: 48px; }

/* ---------- mission cards ---------- */

.mission-cards {
  display: flex;
  gap: 37px;
  margin-top: 32px;
}

.mission-card {
  position: relative;
  width: 360px;
  height: 186px;
  border: 0.5px solid var(--card-border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--card-border);
}

.mission-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

.mission-card__shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 115px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 49.296%, rgba(102, 102, 102, 0));
}

.mission-card__label {
  position: absolute;
  left: 20px;
  top: 80px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}

.mission-card__caption {
  position: absolute;
  left: 20px;
  bottom: 14px;
  width: 328px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

/* ---------- stat cards ---------- */

.stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats__row {
  display: flex;
  justify-content: space-between;
  gap: 17px;
}

.stat-card {
  width: 370px;
  height: 228px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--card-bg);
  border: 0.5px solid var(--card-border);
  border-radius: 20px;
}

.stat-card__number {
  font-size: 48px;
  font-weight: 600;
}

.stat-card__caption {
  font-size: 16px;
  font-weight: 300;
}

/* ---------- feature cards ---------- */

.feature {
  display: flex;
  align-items: flex-end;
  background: var(--card-bg);
  border: 0.5px solid var(--card-border);
  border-radius: 20px;
  width: 100%;
  min-height: 391px;
}

/* text block packs against the mockup; leftover space sits at the outer edge */
.feature--mock-right { padding: 36px 1px 1px 36px; justify-content: flex-end; }
.feature--mock-left  { padding: 36px 36px 1px 1px; justify-content: flex-start; }

.feature__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 535px;
  align-self: stretch;
  justify-content: flex-start;
  padding-top: 35px;
}

.feature__text--right { text-align: right; align-items: flex-end; }

.feature__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 60px;
  display: flex;
  align-items: flex-end;
}

.feature__text--right .feature__title { justify-content: flex-end; }

.feature__caption {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.2;
  max-width: 437px; /* caption box is narrower than the 535px title box in the design */
}

.feature__mock--img { padding-bottom: 4px; } /* mock sits nearly flush with the card bottom in the design */

/* clipped UI mockups */

.mock-clip { position: relative; overflow: hidden; flex-shrink: 0; }

.mock-clip--br {
  width: 531px;
  height: 306px;
  border-bottom-right-radius: 36px;
}

.mock-clip--bl {
  width: 498px;
  height: 322px;
  border-bottom-left-radius: 20px;
}

.mock-clip--tr {
  width: 543px;
  height: 323px;
  border-top: 0.5px solid var(--card-border);
  border-right: 0.5px solid var(--card-border);
  border-top-right-radius: 36px;
  border-bottom-left-radius: 36px;
}

/* report card mockup (features 1 & 4) */

.report-card {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 1214px;
  background: #fff;
  border: 0.5px solid var(--card-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mock-clip--tr .report-card { border: none; padding-top: 12px; gap: 12px; left: 0; top: 0; }

.report-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 36px 24px 24px;
}

.report-card__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.report-card__heading {
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 24px;
  padding: 4px 18px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.status-chip__icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.report-card__confidence {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.records-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 24px 24px;
}

.records-block__title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 12px 12px;
  border-bottom: 0.5px solid #e4e4e4;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.records-block__cards {
  display: flex;
  gap: 10px;
  padding: 4px 12px;
  align-items: flex-start;
}

.record-card {
  flex-shrink: 0;
  background: #fff;
  border: 0.5px solid #999;
  border-radius: 12px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.record-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 8px;
}

.record-card__name {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  white-space: nowrap;
}

.record-card__date {
  margin-left: auto;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 30px;
  white-space: nowrap;
}

.record-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 18px;
}

.record-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 30px;
}

.record-card__desc {
  font-size: 16px;
  line-height: 22px;
  color: var(--ink-soft);
}

.more-link { color: var(--blue); }

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 24px;
  padding: 1px 18px;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  white-space: nowrap;
}

.pill--red { background: var(--red); font-weight: 500; }
.pill--dark { background: var(--ink-soft); font-weight: 400; }

/* feature 4 records title */

.records-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 0 24px;
}

.records-title__text {
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  margin-right: 12px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  background: #E8F2FC;
  border: 1px solid var(--blue);
  border-radius: 1000px;
  padding: 6px 18px;
  font-size: 14px;
  line-height: 14px;
}

.records-block--log { padding-top: 12px; }

/* chat mockup (feature 2) */

.chat-card {
  position: absolute;
  left: -24px;
  top: 8px;
  width: 510px;
  height: 1080px;
  background: #fff;
  border: 0.5px solid var(--card-border);
  border-radius: 0 24px 24px 24px;
  display: flex;
  flex-direction: column;
}

.chat-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #ccc;
}

.chat-card__spacer { width: 36px; }

.chat-card__messages {
  position: relative;
  flex: 1;
}

.chat-msg { position: absolute; display: flex; }

.chat-msg--user { justify-content: flex-end; }

.chat-bubble {
  background: #F4FAFF;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  text-align: right;
  max-width: 392px;
}

.chat-msg--sovra { gap: 8px; align-items: flex-start; }

.chat-msg__avatar { flex-shrink: 0; }

.chat-msg__content {
  padding: 4px 12px;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dive-deeper {
  align-self: center;
  background: none;
  border: 1px solid var(--blue);
  border-radius: 1000px;
  padding: 8px 18px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
}

/* ---------- beta ---------- */

.beta-card {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 62px;
}

/* gradient border ring over the translucent card */
.beta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(to right, var(--purple), var(--blue));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.beta-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 60px;
  text-align: center;
}

.beta-card__copy {
  font-size: 18px;
  font-weight: 300;
  line-height: 36px;
}

.hubspot-form {
  margin-top: 24px;
  width: 609px;
  max-width: 100%;
  text-align: left;
}

/* ---------- FAQ ---------- */

.section--faq { padding-top: 80px; }

.section--faq .container { gap: 90px; }

.faq-card {
  background: var(--card-bg);
  border: 0.5px solid var(--card-border);
  border-radius: 20px;
}

.faq-item + .faq-item { border-top: 1px solid #e4e0dc; }

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: none;
  padding: 32px 40px 0;
  font-size: 20px;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
}

.faq-item__chevron { transition: transform 0.25s ease; }

html.js .faq-item:not(.is-open) .faq-item__chevron { transform: rotate(180deg); }

.faq-item__answer a { text-decoration: underline; }

.faq-item__answer {
  padding: 16px 40px 32px;
  font-size: 18px;
  font-weight: 300;
  line-height: 25px;
  max-width: 1080px;
}

/* Collapsing is progressive enhancement: is-open is only ever set by main.js,
   so without the html.js gate this rule hides every answer for a visitor with
   no JavaScript while each trigger still reports aria-expanded="true". The
   un-enhanced page therefore reads as a plain list of questions and answers. */
html.js .faq-item:not(.is-open) .faq-item__answer { display: none; }

html.js .faq-item:not(.is-open) .faq-item__trigger { padding-bottom: 32px; }

/* ---------- legal pages (Terms & Privacy) ---------- */

.legal {
  max-width: 1544px;
  margin: 0 auto;
  padding: 40px 150px 80px;
}

.legal__title {
  font-size: 54px;
  font-weight: 600;
  text-align: center;
  margin: 24px 0 48px;
}

.legal__updated { font-weight: 600; }

.legal__body {
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
}

.legal__body h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 36px 0 8px;
}

.legal__body h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 20px 0 4px;
}

.legal__body p { margin: 12px 0; }

.legal__body ul {
  margin: 12px 0;
  padding-left: 28px;
}

.legal__body li { margin: 6px 0; }

.legal__body a { color: var(--blue); }
.legal__body a:hover { text-decoration: underline; }

.legal__footer { padding-bottom: 40px; }

/* ---------- footer ---------- */

.footer {
  background: rgba(255, 253, 251, 0.7);
  border: 0.5px solid var(--card-border);
  border-radius: 20px;
  padding: 40px;
}

.footer__nav {
  display: flex;
  gap: 80px;
}

.footer__col { width: 206px; }

.footer__heading {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 300;
}

.footer__links a:hover { color: var(--blue); }

.footer__social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer__divider {
  border: none;
  border-top: 1px solid #ddd8d3;
  margin: 40px 0 24px;
}

.footer__notice {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: #6b6560;
  max-width: 900px;
  margin-bottom: 20px;
}

.footer__notice a { color: inherit; text-decoration: underline; }

.footer__copyright {
  font-size: 14px;
  font-weight: 300;
}

/* ---------- responsive ---------- */

@media (max-width: 1280px) {
  .nav__inner { padding: 18px 32px; }

  .legal { padding: 40px 32px 80px; }

  .mission-cards { flex-wrap: wrap; justify-content: center; }
  .stats__row { flex-wrap: wrap; justify-content: center; }

  .feature { flex-direction: column; align-items: center; gap: 32px; }
  .feature--mock-right, .feature--mock-left { padding: 36px 24px; }
  .feature__text, .feature__text--right { width: 100%; text-align: left; align-items: flex-start; padding-top: 0; }
  .feature__text .feature__title { min-height: 0; }
  .feature__mock--img img { max-width: 100%; height: auto; }

}

@media (max-width: 900px) {
  /* The scroll arrow occupies the bottom 105px of the hero, its 11px offset
     plus its own 94px, and the copy runs the full width here rather than
     sitting in a 640px column off to the left. Without clearing that band the
     CTA and the arrow overlap on a phone. */
  .hero__content { width: auto; right: 32px; bottom: 132px; }
  .hero__title { font-size: clamp(48px, 11vw, 105px); }
  .hero__subtitle { font-size: clamp(20px, 3vw, 28px); }

  .heading { font-size: clamp(34px, 6vw, 54px); }
  .legal__title { font-size: clamp(34px, 6vw, 54px); }

  .beta-card { padding: 32px 24px; }
  .beta-card__inner { padding: 0; }

  .mock-clip { max-width: 100%; }

  .footer__nav { flex-wrap: wrap; gap: 32px; }
}

@media (max-width: 640px) {
  .nav__link { display: none; }
  .mission-card { width: 100%; }
  .mission-card__caption { width: auto; right: 20px; }
  .stat-card { width: 100%; }
}

/* ---------- scroll-triggered animation system ---------- */
/* initial hidden states only apply when JS is running (html.js) and motion is allowed */

@media (prefers-reduced-motion: no-preference) {
  /* fade & rise reveal */
  html.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.7s ease,
      transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
  }

  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* left-to-right wipe reveal */
  html.js .reveal-ltr {
    clip-path: inset(-5% 100% -5% 0);
    opacity: 0;
    transition:
      clip-path 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity 0.45s ease;
    transition-delay: var(--reveal-delay, 0s);
  }

  html.js .reveal-ltr.is-visible {
    clip-path: inset(-5% -2% -5% 0);
    opacity: 1;
  }

  /* gradient backdrop shifts up into place and fades in on first view */
  html.js .page-body::before,
  html.js .page-body::after {
    opacity: 0;
    transform: translateY(80px);
    transition:
      opacity 1.4s ease,
      transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  html.js .page-body.gradients-in::before,
  html.js .page-body.gradients-in::after {
    opacity: 1;
    transform: none;
  }

  /* slot-machine stat numbers */
  .roll__stack {
    display: block;
    transition: transform 1.5s cubic-bezier(0.2, 1.15, 0.32, 1); /* slight overshoot = snap */
  }
}

[data-roll] { font-variant-numeric: tabular-nums; }

.roll-ready {
  display: flex;
  align-items: flex-start;
}

.roll__col {
  display: block;
  height: 1em;
  overflow: hidden;
}

.roll__digit,
.roll__char {
  display: block;
  height: 1em;
  line-height: 1;
}