@import url("./components/IntroTopbar.css");
@import url("./components/MiniWindow.css");
@import url("./components/WithWithoutSection.css");
@import url("./components/WhatVeraSees.css");
@import url("./components/WorkflowFitSection.css");
@import url("./components/OriginPathsSection.css");
@import url("./components/AboutPage.css");
@import url("./components/ChatPreview.css");
@import url("./components/VeraInspecting.css");
@import url("./components/ControlBundleSection.css");
@import url("./components/RequestAccessPage.css");
@import url("./components/TryItNowPage.css");
@import url("./prototypes/SideBySideEmbed.css");
@import url("./prototypes/ClickToNavigate.css");
@import url("./prototypes/BackendPeek.css");

/* Snap each top-level section to the viewport top as the user scrolls, so
   one component is always in full view. `mandatory` (not `proximity`) makes
   the snap decisive — the page never rests split between two sections — and
   each section is paired with `scroll-snap-stop: always` so a single scroll
   gesture advances by one section instead of skipping past.
   scroll-padding-top clears the fixed intro-topbar (~78px tall); we set it
   here once instead of putting scroll-margin-top on every section, which
   would double-stack with this and push snap targets past the viewport. */
html {
  scroll-padding-top: 88px;
}

/* Mandatory snap only kicks in when the viewport is large enough that every
   section fits within `calc(100vh - 88px)`. On shorter or narrower screens
   the diagram-heavy sections are taller than the viewport, and mandatory snap
   would trap them — yanking the user to the next section before they can
   reach bottom content like "Download proof" or "RELEASE Ready". Below this
   threshold we fall back to normal scrolling so nothing is unreachable. */
@media (min-width: 1024px) and (min-height: 820px) {
  html {
    scroll-snap-type: y mandatory;
  }
}

.verification-intro {
  min-height: 100vh;
  background: var(--color-page);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
}

.verification-intro__viewport {
  flex: 1;
  padding: 0 clamp(20px, 4vw, 64px) 96px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.intro-hero {
  /* Full viewport on initial load — unlike sibling sections (which subtract
     the 88px scroll-padding so they snap cleanly *under* the fixed topbar),
     this section sits at scroll=0 where the topbar just overlays its top.
     Without the full 100vh, the next section bleeds in at the bottom. */
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  align-content: center;
  justify-items: center;
  margin: 0 0 48px;
  padding-top: 78px;
  text-align: center;
  box-sizing: border-box;
}

.intro-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}

.intro-hero__title {
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(66px, 13vw, 178px);
  font-weight: 940;
  line-height: 0.84;
  text-transform: uppercase;
  margin: 0 0 16px;
  max-width: 7.6ch;
}

.intro-hero__lede {
  font-size: clamp(15px, 1.8vw, 21px);
  line-height: 1.45;
  color: var(--color-text-secondary);
  max-width: 58ch;
  margin: 0;
}

/* A primary action in the first viewport — previously the hero had no CTA, so
   a convinced visitor couldn't act without scrolling the whole page. */
.intro-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

.intro-hero__cta-primary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-page);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.intro-hero__cta-primary:hover,
.intro-hero__cta-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--color-accent) 34%, transparent);
}

.intro-hero__cta-primary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.intro-hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  color: var(--color-text-secondary);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-secondary) 36%, transparent);
  transition:
    color 0.16s ease,
    border-color 0.16s ease;
}

.intro-hero__cta-secondary:hover,
.intro-hero__cta-secondary:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.intro-hero__cta-secondary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .intro-hero__cta-primary {
    transition: none;
  }
  .intro-hero__cta-primary:hover,
  .intro-hero__cta-primary:focus-visible {
    transform: none;
  }
}

.intro-prototype-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.intro-prototype-note strong {
  color: var(--color-text-secondary);
}

.intro-page-cta {
  min-height: calc(82vh - 88px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  grid-auto-flow: row;
  row-gap: clamp(24px, 4vh, 48px);
  padding: clamp(80px, 12vh, 140px) 0;
  border-top: 1px solid var(--color-border);
  box-sizing: border-box;
  text-align: center;
}

.intro-page-cta__secondary {
  display: inline-block;
  max-width: min(640px, 88vw);
  padding: 8px 14px;
  color: var(--color-text-secondary);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-secondary) 38%, transparent);
  transition:
    color 0.16s ease,
    border-color 0.16s ease;
}

.intro-page-cta__secondary:hover,
.intro-page-cta__secondary:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.intro-page-cta__secondary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
}

.intro-page-cta__link {
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: var(--color-text-primary);
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(66px, 12vw, 178px);
  font-weight: 940;
  line-height: 0.84;
  text-decoration: none;
  text-transform: uppercase;
  text-wrap: balance;
  transition:
    color 0.16s ease,
    text-shadow 0.16s ease,
    transform 0.2s ease;
}

.intro-page-cta__link:hover,
.intro-page-cta__link:focus-visible {
  color: color-mix(in srgb, var(--color-text-primary) 72%, var(--color-accent));
  text-shadow:
    0 0 34px color-mix(in srgb, var(--color-accent) 18%, transparent),
    0 0 2px color-mix(in srgb, var(--color-text-primary) 38%, transparent);
  transform: translateY(-3px);
}

.intro-page-cta__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 10px;
}

/* A small accent arrow + helper line so the oversized word reads as an action,
   not another headline — first-time visitors weren't sure it was clickable. */
.intro-page-cta__link::after {
  content: "\2192";
  margin-left: 0.16em;
  font-size: 0.34em;
  font-weight: 800;
  vertical-align: middle;
  color: var(--color-accent);
}

.intro-page-cta__hint {
  margin: -8px 0 0;
  color: var(--color-text-muted);
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 600;
}

@media (max-width: 640px) {
  html {
    scroll-snap-type: none;
    scroll-padding-top: 72px;
  }

  .verification-intro__viewport {
    padding: 0 clamp(14px, 4vw, 20px) 64px;
  }

  .intro-page-cta {
    min-height: calc(72vh - 88px);
    padding: 84px 0;
  }

  .intro-page-cta__link {
    font-size: clamp(54px, 16vw, 84px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-page-cta__link {
    transition: none;
  }

  .intro-page-cta__link:hover,
  .intro-page-cta__link:focus-visible {
    transform: none;
  }
}