/* ============================================================================
   Public surface — the landing page and the sign-in screens

   Ported from the React build's public-surface.css. Its own design language:
   a light lilac ground, glass panels over a live colour field, Space Grotesk
   over Instrument Serif. Namespaced to [data-surface="public"] so none of it
   reaches the app shell behind the login.
   ========================================================================== */

:root {
  /*
   * White base, a lavender that only just registers, and one purple doing all
   * the accent work. The page has to read as enterprise software people will
   * hand their Aadhaar to — restraint is the whole brief. Nothing here is
   * saturated except the primary, and the primary is used sparingly.
   */
  --color-ink: #fafaff; /* page ground */
  --color-band: #f5f3ff; /* alternating section band */
  --color-panel: #ffffff; /* cards */
  --color-raise: #f5f3ff; /* hover / inset */
  --color-line: #e7e3f6; /* hairlines */
  --color-fg: #10152f; /* body text */
  --color-mute: #667085; /* secondary text */
  --color-brand: #6d3df5; /* primary */
  --color-brand2: #8b5cf6; /* primary, lighter */
  --color-deep: #151a3a; /* headings on tinted ground */
  --color-cyan: #7c4dff; /* the far end of the accent ramp */
  --color-good: #16a34a; /* live / success only */
}


/* ---------------------------------------------------------------- typefaces */

/*
 * `@theme inline` compiles a font token into a literal stack inside the
 * utility, so redefining the custom property on an ancestor would do nothing.
 * These target the utility class itself, and the descendant selector
 * out-specifies the bare utility without needing `!important` — the same
 * mechanism the app already uses to re-point its display face.
 */
[data-surface="public"] .font-display {
  font-family: var(--font-space), "Space Grotesk", system-ui, sans-serif;
}

[data-surface="public"] .font-serif,
[data-surface="public"] .accent {
  font-family: var(--font-instrument), "Instrument Serif", Georgia, serif;
}

[data-surface="public"] .font-label {
  font-family: var(--font-space), "Space Grotesk", var(--font-inter), sans-serif;
}

[data-surface="public"] {
  color: var(--color-fg);
  -webkit-font-smoothing: antialiased;
}

[data-surface="public"] ::selection {
  background: color-mix(in oklab, var(--color-brand) 22%, transparent);
}

[data-surface="public"] :focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------- accent words */

/* Serif italic against the geometric sans, on a moving gradient. Used sparingly. */
[data-surface="public"] .accent {
  --accent-ramp: linear-gradient(
    100deg,
    var(--color-brand),
    var(--color-brand2) 52%,
    var(--color-cyan)
  );
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: var(--accent-ramp);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: nk-gradient-shift 8s ease infinite;
}

/*
 * Split to characters, each carrying its own slice of the same ramp — see
 * SplitText. The phrase-level background is dropped so it cannot show through
 * between the letters.
 */

[data-surface="public"] .accent-split {
  background: none;
  animation: none;
}

[data-surface="public"] .accent-split .char {
  background-image: var(--accent-ramp);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------------ reveals */

/*
 * Elements revealed on scroll start hidden. The blur half of the reveal is
 * applied by useReveal, never here — a class-level filter would come back the
 * moment the tween cleared its inline value.
 */
[data-surface="public"] .reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(8px);
}

[data-surface="public"] .reveal-x {
  opacity: 0;
  transform: translateX(-22px);
  filter: blur(8px);
}

/* Panels and cards settle *toward* the reader rather than up from below. */
[data-surface="public"] .reveal-scale {
  opacity: 0;
  transform: scale(0.955) translateY(14px);
  filter: blur(6px);
}

/* Resolves in place. For type that is already where it belongs — moving a
   heading as well as focusing it reads as two effects rather than one. */
[data-surface="public"] .reveal-soft {
  opacity: 0;
  filter: blur(10px);
}

/* Wipes up behind its own edge, so the line is uncovered rather than flown in. */
[data-surface="public"] .reveal-mask {
  opacity: 0;
  clip-path: inset(105% 0 0 0);
  transform: translateY(12px);
}

/* A rule that draws itself out from the middle as its section arrives. */
[data-surface="public"] .reveal-rule {
  transform: scaleX(0);
  transform-origin: center;
}

/* One word of a heading. Set by SplitWords, animated by useReveal. */
[data-surface="public"] .word {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* ----------------------------------------------------------------- surfaces */

/*
 * Translucent white over the backdrop, with the bright top edge and soft outer
 * shadow that make a pane read as lifted rather than merely faded. Only worth
 * using where an element genuinely floats over the washes — a blurred pane over
 * flat ground is just an expensive opaque box.
 */
[data-surface="public"] .glass {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.64) 60%,
    rgba(255, 255, 255, 0.58) 100%
  );
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(99, 82, 180, 0.12);
  box-shadow:
    0 1px 2px color-mix(in oklab, var(--color-fg) 4%, transparent),
    0 22px 48px -26px rgba(24, 20, 60, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* The same material dialled down, so pills do not out-shine the panels beside them. */
[data-surface="public"] .glass-pill {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border: 1px solid rgba(99, 82, 180, 0.11);
  box-shadow:
    0 1px 2px color-mix(in oklab, var(--color-fg) 4%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-surface="public"] .card {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.66) 55%,
    rgba(255, 255, 255, 0.58) 100%
  );
  
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  /*
   * A hairline of the page's own line colour rather than plain white: on a
   * light ground a white border on a white panel is invisible, and the card
   * loses its edge entirely.
   */
  border: 1px solid rgba(99, 82, 180, 0.13);
  box-shadow:
    0 1px 2px color-mix(in oklab, var(--color-fg) 4%, transparent),
    0 18px 40px -24px rgba(24, 20, 60, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition:
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s ease;
}

/* A brand-tinted light along the top edge, lit only on hover. */
[data-surface="public"] .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--color-brand) 55%, transparent),
    color-mix(in oklab, var(--color-brand2) 45%, transparent),
    transparent
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

[data-surface="public"] .card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--color-brand) 26%, rgba(99, 82, 180, 0.13));
  box-shadow:
    0 1px 2px color-mix(in oklab, var(--color-fg) 5%, transparent),
    0 34px 62px -28px rgba(24, 20, 60, 0.22),
    0 0 0 1px color-mix(in oklab, var(--color-brand) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

[data-surface="public"] .card:hover::before {
  opacity: 1;
}

/* The icon tile rises a touch further than the card it sits on. */
[data-surface="public"] .card .tile {
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}

[data-surface="public"] .card:hover .tile {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 26px -10px color-mix(in oklab, var(--color-brand) 40%, transparent);
}

/* Without backdrop-filter the translucency just looks washed out, so fall back
   to the solid surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-surface="public"] .glass,
  [data-surface="public"] .glass-pill,
  [data-surface="public"] .card {
    background: var(--color-panel);
    border-color: var(--color-line);
  }
}

/* Accent tile behind a card's icon. */
[data-surface="public"] .tile {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(150deg, var(--color-brand2), var(--color-brand));
  box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--color-brand) 35%, transparent);
}

[data-surface="public"] .rule {
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--color-line),
    color-mix(in oklab, var(--color-line) 35%, transparent)
  );
}

/* Paper grain, dialled right down — on a light ground it reads as texture at a
   fraction of the opacity a dark page needs. */
[data-surface="public"].grain::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- animations */

/* Half, not all: the strip holds the same run of cards twice over, so sliding
   it by exactly half lands the second run where the first one started and the
   loop closes on itself. Translating the whole width would run the strip clean
   off the track and snap back through an empty gap. */
@keyframes nk-marquee {
  to {
    transform: translateX(-50%);
  }
}

@keyframes nk-marquee-rev {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

[data-surface="public"] .marquee {
  animation: nk-marquee 80s linear infinite;
}

[data-surface="public"] .marquee-rev {
  animation: nk-marquee-rev 80s linear infinite;
}

/* The document belt pauses under the cursor so a card can actually be read. */
[data-surface="public"] .doc-track:hover .marquee,
[data-surface="public"] .doc-track:hover .marquee-rev {
  animation-play-state: paused;
}

/*
 * The belt is always in motion: blurring twenty-four translating panes is
 * expensive and shimmers along their edges, so these stay solid. They also must
 * not lift on hover — the translate would fight the marquee transform.
 */
[data-surface="public"] .doc-track .card {
  background: var(--color-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--color-line);
}

[data-surface="public"] .doc-track .card:hover {
  transform: none;
}

@keyframes nk-caret-blink {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

[data-surface="public"] .caret {
  animation: nk-caret-blink 1s steps(1, end) infinite;
}

/* The preloader name falls in and settles. The overshoot in the easing is what
   makes it read as weight rather than a plain slide. */
@keyframes nk-drop-in {
  0% {
    opacity: 0;
    transform: translateY(-34px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-surface="public"] .drop-in {
  animation: nk-drop-in 0.85s cubic-bezier(0.18, 0.9, 0.24, 1.06) both;
}

/* A 6px ambient float, carried over from the reference build. */
@keyframes nk-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

[data-surface="public"] .float {
  animation: nk-float 4s ease-in-out infinite;
}

[data-surface="public"] .float-b {
  animation-delay: -1.3s;
}

[data-surface="public"] .float-c {
  animation-delay: -2.6s;
}

/* The accent gradient slides across the text rather than sitting still. */
@keyframes nk-gradient-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Slow drifting washes behind the sign-in screen. */
@keyframes nk-aurora {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -20px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }
}

[data-surface="public"] .animate-aurora {
  animation: nk-aurora 18s ease-in-out infinite;
}

[data-surface="public"] .animate-aurora-slow {
  animation: nk-aurora 26s ease-in-out infinite;
}

@keyframes nk-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-surface="public"] .animate-fade-up {
  animation: nk-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

/*
 * The hero arrives on load, staggered in CSS rather than from a timeline.
 * `nth-child` walks the left column's own children, so adding a block to the
 * stack gets its beat for free — and because it is a plain animation it plays
 * before hydration, which a JS sequence cannot.
 */
@keyframes nk-hero-in {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

[data-surface="public"] .hero-in {
  animation: nk-hero-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/*
 * One word of the headline. Each starts soft, low and transparent and
 * sharpens into place; the delay is set per word inline, so the line reads
 * as assembling itself left to right rather than fading up as one block.
 */
@keyframes nk-blur-in {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

[data-surface="public"] .hero-word {
  display: inline-block;
  animation: nk-blur-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity, filter;
}

/*
 * Held at their first frame until the preloader's cover begins to lift
 * (`.hero-ready`, set from the preloader's hand-over). Pausing also holds the
 * per-word delays, so the stagger plays intact from the moment it is released.
 */
[data-surface="public"] .hero-in,
[data-surface="public"] .hero-word,
[data-surface="public"] .hero-stagger.relative > .hero-in {
  animation-play-state: paused;
}

[data-surface="public"] .hero-ready .hero-in,
[data-surface="public"] .hero-ready .hero-word,
[data-surface="public"] .hero-ready .hero-stagger.relative > .hero-in {
  animation-play-state: running;
}

[data-surface="public"] .hero-stagger > .hero-in:nth-child(1) { animation-delay: 0.1s; }
[data-surface="public"] .hero-stagger > .hero-in:nth-child(2) { animation-delay: 0.18s; }
[data-surface="public"] .hero-stagger > .hero-in:nth-child(3) { animation-delay: 0.26s; }
[data-surface="public"] .hero-stagger > .hero-in:nth-child(4) { animation-delay: 0.34s; }
[data-surface="public"] .hero-stagger > .hero-in:nth-child(5) { animation-delay: 0.42s; }
[data-surface="public"] .hero-stagger > .hero-in:nth-child(6) { animation-delay: 0.5s; }

/* The dashboard settles toward the reader rather than rising with the text. */
@keyframes nk-hero-rise {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-surface="public"] .hero-stagger.relative > .hero-in {
  animation: nk-hero-rise 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
  /* The shorthand above resets play-state; hold it with the words until
     the cover lifts (released by `.hero-ready`, declared earlier). */
  animation-play-state: paused;
}

/*
 * The floating cards breathe. Four seconds apart and six pixels of travel —
 * below the threshold you notice while reading, above the one that makes a
 * page feel dead.
 */
@keyframes nk-drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

[data-surface="public"] .drift {
  animation: nk-drift 6.5s ease-in-out infinite;
}

[data-surface="public"] .drift-b {
  animation-delay: -2.2s;
}

[data-surface="public"] .drift-c {
  animation-delay: -4.4s;
}

/* The nav settles down onto the page rather than being there from frame one. */
@keyframes nk-fade-down {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-surface="public"] .animate-fade-down {
  animation: nk-fade-down 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

[data-surface="public"] dialog::backdrop {
  background: color-mix(in oklab, var(--color-fg) 38%, transparent);
  backdrop-filter: blur(3px);
}

@media (prefers-reduced-motion: reduce) {
  [data-surface="public"] .reveal,
  [data-surface="public"] .reveal-x,
  [data-surface="public"] .reveal-scale,
  [data-surface="public"] .reveal-soft,
  [data-surface="public"] .reveal-mask,
  [data-surface="public"] .reveal-rule,
  [data-surface="public"] .word {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }

  [data-surface="public"] .marquee,
  [data-surface="public"] .marquee-rev,
  [data-surface="public"] .caret,
  [data-surface="public"] .drop-in,
  [data-surface="public"] .float,
  [data-surface="public"] .accent,
  [data-surface="public"] .animate-aurora,
  [data-surface="public"] .animate-aurora-slow,
  [data-surface="public"] .animate-fade-up,
  [data-surface="public"] .animate-fade-down,
  [data-surface="public"] .hero-in,
  [data-surface="public"] .hero-word,
  [data-surface="public"] .hero-stagger.relative > .hero-in,
  [data-surface="public"] .drift {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }

  [data-surface="public"] .card:hover {
    transform: none;
  }
}


/* --- Colour utilities ---------------------------------------------------- */

[data-surface="public"] .text-band { color: var(--color-band); }
[data-surface="public"] .bg-band { background-color: var(--color-band); }
[data-surface="public"] .border-band { border-color: var(--color-band); }
[data-surface="public"] .text-brand { color: var(--color-brand); }
[data-surface="public"] .bg-brand { background-color: var(--color-brand); }
[data-surface="public"] .border-brand { border-color: var(--color-brand); }
[data-surface="public"] .text-brand2 { color: var(--color-brand2); }
[data-surface="public"] .bg-brand2 { background-color: var(--color-brand2); }
[data-surface="public"] .border-brand2 { border-color: var(--color-brand2); }
[data-surface="public"] .text-cyan { color: var(--color-cyan); }
[data-surface="public"] .bg-cyan { background-color: var(--color-cyan); }
[data-surface="public"] .border-cyan { border-color: var(--color-cyan); }
[data-surface="public"] .text-deep { color: var(--color-deep); }
[data-surface="public"] .bg-deep { background-color: var(--color-deep); }
[data-surface="public"] .border-deep { border-color: var(--color-deep); }
[data-surface="public"] .text-fg { color: var(--color-fg); }
[data-surface="public"] .bg-fg { background-color: var(--color-fg); }
[data-surface="public"] .border-fg { border-color: var(--color-fg); }
[data-surface="public"] .text-good { color: var(--color-good); }
[data-surface="public"] .bg-good { background-color: var(--color-good); }
[data-surface="public"] .border-good { border-color: var(--color-good); }
[data-surface="public"] .text-ink { color: var(--color-ink); }
[data-surface="public"] .bg-ink { background-color: var(--color-ink); }
[data-surface="public"] .border-ink { border-color: var(--color-ink); }
[data-surface="public"] .text-line { color: var(--color-line); }
[data-surface="public"] .bg-line { background-color: var(--color-line); }
[data-surface="public"] .border-line { border-color: var(--color-line); }
[data-surface="public"] .text-mute { color: var(--color-mute); }
[data-surface="public"] .bg-mute { background-color: var(--color-mute); }
[data-surface="public"] .border-mute { border-color: var(--color-mute); }
[data-surface="public"] .text-panel { color: var(--color-panel); }
[data-surface="public"] .bg-panel { background-color: var(--color-panel); }
[data-surface="public"] .border-panel { border-color: var(--color-panel); }
[data-surface="public"] .text-raise { color: var(--color-raise); }
[data-surface="public"] .bg-raise { background-color: var(--color-raise); }
[data-surface="public"] .border-raise { border-color: var(--color-raise); }

/* Tailwind generated these from the tokens above; written out now that there
   is no Tailwind. Only the ones this page's markup and the rules further up
   actually use — `.hero-stagger.relative > .hero-in` needs `.relative`. */

[data-surface="public"] .relative { position: relative; }

/* ============================================================================
   The static landing page

   The reveal classes above set only the start state — GSAP animated them to
   the end. Here the end state is a class the IntersectionObserver adds, and
   the transition does the work. Same motion, no library.
   ========================================================================== */

[data-surface="public"] .reveal,
[data-surface="public"] .reveal-x,
[data-surface="public"] .reveal-scale,
[data-surface="public"] .reveal-soft,
[data-surface="public"] .reveal-mask,
[data-surface="public"] .reveal-rule {
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-surface="public"] .reveal.is-in,
[data-surface="public"] .reveal-x.is-in,
[data-surface="public"] .reveal-scale.is-in,
[data-surface="public"] .reveal-soft.is-in,
[data-surface="public"] .reveal-mask.is-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

[data-surface="public"] .reveal-rule.is-in {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-surface="public"] [class*="reveal"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   Landing layout

   Everything the marketing page needs that is not already a token or one of
   the surfaces above. Scoped to the public surface like the rest, so none of
   it can reach the app.
   ========================================================================== */

[data-surface="public"] {
  margin: 0;
  font-family: "Space Grotesk", var(--font-sans);
  color: var(--color-fg);
  background-color: var(--color-ink);
}

[data-surface="public"] a {
  color: inherit;
  text-decoration: none;
}

/* --- The colour field the page floats over -------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.aurora-a {
  top: -18%;
  left: -8%;
  width: 62vw;
  height: 62vw;
  background: radial-gradient(circle, color-mix(in oklab, var(--color-brand) 20%, transparent), transparent 68%);
}

.aurora-b {
  top: 22%;
  right: -14%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, color-mix(in oklab, var(--color-brand2) 17%, transparent), transparent 68%);
}

.aurora-c {
  bottom: -20%;
  left: 26%;
  width: 58vw;
  height: 58vw;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.12), transparent 68%);
}

/* --- Navbar --------------------------------------------------------------- */

.scroll-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: 2px;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(to right, var(--color-brand), var(--color-brand2), var(--color-cyan));
}

.nav-shell {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding: 1rem 1rem 0;
}

@media (min-width: 640px) {
  .nav-shell {
    padding-top: 1.5rem;
  }
}

/* A capsule floating clear of the page, not a bar stuck to the top of it. It
   lifts onto its glass and draws in slightly once you scroll. */
.nav-capsule {
  margin-inline: auto;
  display: flex;
  width: 100%;
  max-width: 64rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  transition: all 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-capsule.is-lifted {
  max-width: 56rem;
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--color-line);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 18px 50px -22px rgba(35, 30, 78, 0.45);
}

.nav-brand {
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color 300ms;
}

[data-surface="public"] .nav-brand:hover {
  color: var(--color-brand);
}

.nav-links-wrap {
  position: relative;
  display: none;
}

@media (min-width: 992px) {
  .nav-links-wrap {
    display: block;
  }
}

/* Slides to whichever section you are actually in. */
.nav-pill {
  position: absolute;
  inset-block: 0;
  left: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-brand) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-brand) 15%, transparent);
  opacity: 0;
  transition:
    transform 550ms cubic-bezier(0.16, 1, 0.3, 1),
    width 550ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 550ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: block;
  border-radius: 999px;
  padding: 0.5rem 0.875rem;
  font-size: 13.5px;
  color: var(--color-mute);
  transition: color 300ms;
}

.nav-links a:hover {
  color: var(--color-fg);
}

.nav-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
}

.nav-login {
  display: none;
  border-radius: 999px;
  padding: 0.5rem 0.875rem;
  font-size: 13.5px;
  color: var(--color-mute);
  transition: background-color 300ms, color 300ms;
}

@media (min-width: 640px) {
  .nav-login {
    display: block;
  }
}

.nav-login:hover {
  background-color: var(--color-raise);
  color: var(--color-fg);
}

/* --- The narrow-screen menu ----------------------------------------------- */

.nav-toggle {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  flex-shrink: 0;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-panel) 70%, transparent);
  color: var(--color-fg);
  font-size: 14px;
  transition: background-color 300ms, color 300ms;
}

.nav-toggle:hover {
  background-color: var(--color-raise);
  color: var(--color-brand);
}

/* Wide enough for the capsule to carry the links itself, both the button and
   the sheet it opens have nothing left to do. */
@media (min-width: 992px) {
  .nav-toggle,
  .nav-menu {
    display: none;
  }
}

/* Denser than the page's usual glass on purpose: this one lands over the
   hero headline, and a pane you can read the headline through is a pane you
   cannot read the menu on. */
.nav-menu {
  margin: 0.625rem auto 0;
  width: 100%;
  max-width: 56rem;
  border: 1px solid var(--color-line);
  border-radius: 1.25rem;
  background: color-mix(in oklab, var(--color-panel) 97%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  padding: 0.5rem;
  box-shadow: 0 24px 60px -28px color-mix(in oklab, var(--color-fg) 40%, transparent);
}

.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  display: block;
  border-radius: 0.875rem;
  padding: 0.75rem 1rem;
  font-size: 14.5px;
  color: var(--color-mute);
  transition: background-color 300ms, color 300ms;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  background-color: var(--color-raise);
  color: var(--color-fg);
}

.nav-menu-login {
  border-top: 1px solid var(--color-line);
  border-radius: 0 0 0.875rem 0.875rem;
  margin-top: 0.375rem;
  padding-top: 1rem;
}

@media (min-width: 640px) {
  /* At this width the capsule shows Log in again, so the sheet stops. Matched
     through `.nav-menu` because the link rule above it is a descendant
     selector and would otherwise out-specify a bare class. */
  .nav-menu .nav-menu-login {
    display: none;
  }
}

/* --- Buttons -------------------------------------------------------------- */

[data-surface="public"] .landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--color-brand), var(--color-brand2));
  padding: 0.625rem 1.25rem;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--color-brand) 75%, transparent);
  transition: box-shadow 300ms, transform 300ms;
}

[data-surface="public"] .landing-btn:hover {
  color: #fff;
  box-shadow: 0 16px 38px -10px color-mix(in oklab, var(--color-brand) 90%, transparent);
}

.landing-btn .fa-solid {
  transition: transform 300ms;
}

.landing-btn:hover .fa-solid {
  transform: translateX(3px);
}

.landing-btn-lg {
  height: 54px;
  border-radius: 15px;
  padding-inline: 1.75rem;
  font-size: 15px;
}

[data-surface="public"] .landing-btn-ghost {
  display: inline-flex;
  height: 54px;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border: 1px solid var(--color-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  padding-inline: 1.5rem;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-fg);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--color-fg) 4%, transparent);
  transition: border-color 300ms, background-color 300ms;
}

[data-surface="public"] .landing-btn-ghost:hover {
  border-color: color-mix(in oklab, var(--color-brand) 35%, transparent);
  background: #fff;
}

.landing-btn-ghost .fa-solid {
  color: var(--color-brand);
  transition: transform 300ms;
}

.landing-btn-ghost:hover .fa-solid {
  transform: scale(1.1);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 8rem 0 5rem;
}

@media (min-width: 768px) {
  .hero {
    padding: 9rem 0 6rem;
  }
}

/*
 * One measure for the whole page, and the same box model as every band under
 * the hero.
 *
 * Two things were out. The hero's column was 1240px against the sections'
 * 72rem, so its text began further left than "The problem" below it. And
 * `.section-inner` carries its gutter INSIDE its max-width while the hero
 * carried it on the section, which left the hero's content another 48px
 * wider again. Between them the fold read as a band of dead space down the
 * right. The gutter now lives in the same place on both, so the two line up
 * exactly at every width.
 */
.hero-inner {
  margin-inline: auto;
  max-width: 72rem;
  padding-inline: 1.5rem;
  display: grid;
  align-items: center;
  gap: 3.5rem;
}

@media (min-width: 992px) {
  /* The panel is a fixed 540px whatever the column allows, so the split only
     really decides how much room the headline gets. On the shared 72rem
     measure a 46/54 split left it 505px, which broke "Your AI agent that"
     across two lines and pushed the buttons under the fold; 52/48 gives it
     back the width it had when the hero was its own wider measure. */
  .hero-inner {
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    gap: 3rem;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--color-brand) 20%, transparent);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  padding: 0.375rem 0.875rem;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-brand);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--color-fg) 4%, transparent), 0 0 0 4px color-mix(in oklab, var(--color-brand) 5%, transparent);
}

.hero-headline {
  margin: 1.5rem 0 0;
  font-size: clamp(2.4rem, 4.6vw, 4.05rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.hero-lede {
  margin: 1.5rem 0 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.62;
}

.hero-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
}

.hero-highlights li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-highlight-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--color-brand) 9%, transparent);
  color: var(--color-brand);
  font-size: 17px;
}

.hero-highlights b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
}

.hero-highlights small {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: var(--color-mute);
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .hero-ctas {
    flex-direction: row;
    align-items: center;
  }
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2.25rem;
}

.hero-faces {
  display: flex;
}

.hero-faces span {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(to bottom right, var(--a), var(--b));
  box-shadow: 0 0 0 2px #fff;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-faces span + span {
  margin-left: -0.375rem;
}

.hero-trust-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.hero-trust-sub {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.125rem 0 0;
  font-size: 12px;
  color: var(--color-mute);
}

.hero-stars {
  color: #f5a524;
  letter-spacing: 0.05em;
}

.hero-glow {
  position: absolute;
  inset-inline: 0;
  top: -2.5rem;
  bottom: 0;
  border-radius: 40px;
  opacity: 0.7;
  filter: blur(70px);
  pointer-events: none;
  background: radial-gradient(60% 55% at 55% 40%, color-mix(in oklab, var(--color-brand2) 22%, transparent), transparent 70%);
}

.hero-panel {
  position: relative;
  margin-inline: auto;
  max-width: 540px;
  /* Room above and below for the cards that sit outside the panel's edges. */
  padding: 2.5rem 0 4.5rem;
}

/* --- The agent card ------------------------------------------------------- */

.agent-card {
  border-radius: 22px;
  padding: 1.25rem;
}

.agent-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 0.875rem;
}

.agent-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-good, #10b981);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.agent-title {
  font-size: 14px;
  font-weight: 600;
}

.agent-status {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mute);
}

.agent-steps {
  list-style: none;
  margin: 0;
  padding: 0.875rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.agent-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 13.5px;
  color: var(--color-mute);
}

.agent-steps li .fa-solid,
.agent-steps li .fa-regular {
  margin-top: 0.1875rem;
  font-size: 12px;
  color: var(--color-line);
}

.agent-steps li.is-done {
  color: var(--color-fg);
}

.agent-steps li.is-done .fa-solid {
  color: var(--color-good, #10b981);
}

.agent-steps li.is-running {
  color: var(--color-fg);
  font-weight: 500;
}

.agent-steps li.is-running .fa-solid {
  color: var(--color-brand);
}

.agent-steps small {
  display: block;
  margin-top: 0.125rem;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-mute);
}

/* The three cards that drift around the panel. */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  padding: 0.625rem 0.875rem;
  box-shadow: 0 18px 40px -24px rgba(35, 30, 78, 0.5);
  animation-delay: var(--delay, 0s);
}

.float-card .fa-solid {
  color: var(--color-brand);
  font-size: 14px;
}

.float-card b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
}

.float-card small {
  display: block;
  font-size: 11.5px;
  color: var(--color-mute);
}

/* The three sit clear of the card rather than on top of it — the card is
   the thing being shown, and a badge over its own text hides the argument. */
/* The overhang is the point of these cards — they should look pinned to the
   panel rather than laid out with it. But the panel sits against the page's
   right gutter from 992px until the layout reaches its max width and starts
   growing gutters of its own, so in that band an overhang large enough to
   read is also large enough to push a scrollbar onto the page. Between those
   widths it tucks in; from 1280 there is room for the full hang. */
.float-card.float {
  top: -5%;
  right: -1%;
}

@media (min-width: 1280px) {
  .float-card.float {
    right: -7%;
  }
}

.float-card.float-b {
  bottom: 4%;
  left: -9%;
}

.float-card.float-c {
  bottom: -6%;
  right: 6%;
}

@media (max-width: 767.98px) {
  .float-card {
    display: none;
  }
}

/* --- Portal strip --------------------------------------------------------- */

/* Sits under the hero and must line up with it — same measure. */
.portal-strip {
  margin: 5rem auto 0;
  max-width: 72rem;
  text-align: center;
}

.portal-strip p {
  margin: 0 0 1rem;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.portal-strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-mute);
  opacity: 0.8;
}

/* --- Sections ------------------------------------------------------------- */

[data-surface="public"] section.band {
  border-block: 1px solid var(--color-line);
}

.section-inner {
  margin-inline: auto;
  width: 100%;
  max-width: 72rem;
  padding: 6rem 1.5rem;
}

@media (min-width: 768px) {
  .section-inner {
    padding-block: 8rem;
  }
}

/*
 * For a header whose content runs full-bleed past the column and so sits
 * outside this box: the section's own bottom padding would land on top of the
 * content's top margin and open a gap three times the one every other section
 * leaves between its header and what follows.
 */
.section-inner-bleed {
  padding-bottom: 0;
}

/* The padding the header gave up, moved out to the section, so the run of
   full-bleed content below it still ends where every other section does. */
.section-bleed {
  padding-bottom: 6rem;
}

@media (min-width: 768px) {
  .section-bleed {
    padding-bottom: 8rem;
  }
}

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1.75rem;
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-mute);
}

.ping {
  position: relative;
  display: inline-flex;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--color-brand);
}

.ping::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--color-brand);
  opacity: 0.7;
  animation: nk-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes nk-ping {
  75%,
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.heading {
  margin: 0;
  font-size: clamp(2rem, 3.9vw, 3.1rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.lede {
  margin: 1.25rem auto 0;
  max-width: 42rem;
  font-size: 16px;
  line-height: 1.6;
}

/* --- Problem -------------------------------------------------------------- */

.three-up {
  display: grid;
  gap: 1.5rem;
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .three-up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.three-up .card {
  padding: 2rem;
  text-align: center;
}

.three-up .stat {
  background: linear-gradient(to bottom right, var(--color-brand), var(--color-brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.three-up h3 {
  margin: 1.25rem 0 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.three-up p {
  margin: 0.625rem auto 0;
  max-width: 280px;
  font-size: 14.5px;
  line-height: 1.6;
}

/* --- How it works --------------------------------------------------------- */

.flow-board {
  position: relative;
  margin-top: 3rem;
  border: 1px solid var(--color-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px);
  padding: 1.5rem 1rem;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--color-fg) 3%, transparent), 0 28px 60px -40px rgba(24, 20, 60, 0.26);
}

@media (min-width: 640px) {
  .flow-board {
    padding: 2rem;
  }
}

.flow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;
}

.flow-node {
  flex: 1 1 10rem;
  min-width: 9rem;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: #fff;
  padding: 1rem;
  text-align: center;
}

.flow-node.is-core {
  border-color: color-mix(in oklab, var(--color-brand) 30%, transparent);
  background: color-mix(in oklab, var(--color-brand) 4%, transparent);
}

.flow-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto 0.625rem;
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--color-brand) 9%, transparent);
  color: var(--color-brand);
}

.flow-node b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.flow-node small {
  display: block;
  margin-top: 0.25rem;
  font-size: 12px;
  color: var(--color-mute);
}

.flow-arrow {
  display: grid;
  place-items: center;
  color: var(--color-line);
  font-size: 14px;
}

/*
 * Anywhere the four nodes cannot sit on one line, the chain reads top to
 * bottom instead. Letting it wrap breaks the sequence mid-arrow: three nodes
 * on the first line, an arrow pointing at the edge of the board, and the
 * fourth node below with nothing leading into it.
 *
 * The glyph turns inside its own box and the box does not — rotating a box
 * that flex has stretched to the height of the row leaves it lying across the
 * page and hanging off both edges.
 */
@media (max-width: 991.98px) {
  .flow-row {
    flex-direction: column;
  }

  .flow-arrow {
    height: 1.25rem;
  }

  .flow-arrow .fa-solid {
    transform: rotate(90deg);
  }
}

.flow-note {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
}

.steps-row {
  display: grid;
  gap: 2.5rem;
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}

@media (min-width: 768px) {
  .steps-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

.steps-row li {
  text-align: center;
}

.step-n {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
}

.steps-row h3 {
  margin: 0.75rem 0 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.steps-row p {
  margin: 0.75rem auto 0;
  max-width: 320px;
  font-size: 14.5px;
  line-height: 1.6;
}

.step-rule {
  width: 4rem;
  height: 1px;
  margin: 1.5rem auto 0;
  background: linear-gradient(to right, transparent, var(--via), transparent);
}

/* --- Features ------------------------------------------------------------- */

.feature-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.feature-card {
  padding: 1.75rem;
}

.feature-card h3 {
  margin: 1.125rem 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.feature-card p {
  margin: 0.625rem 0 0;
  font-size: 14px;
  line-height: 1.6;
}

.feature-points {
  list-style: none;
  margin: 1.125rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.feature-points li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: var(--color-mute);
}

.feature-points .fa-solid {
  font-size: 10px;
  color: var(--color-brand);
}

/* --- Documents belt ------------------------------------------------------- */

.doc-belt {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* Each track is the window the strip travels through; without the clip the
   strip's full width would push a horizontal scrollbar onto the whole page. */
.doc-track {
  overflow: hidden;
}

.marquee,
.marquee-rev {
  display: flex;
  width: max-content;
}

/* The repeat runs are a wrapper only so they can be hidden from a screen
   reader in one go; they must not become a flex item of their own or the
   strip would no longer halve evenly. */
.doc-run {
  display: contents;
}

.doc-card {
  flex: 0 0 auto;
  width: 17rem;
  /* The gap rides on the card rather than the strip: a container `gap` leaves
     one fewer gap than cards, which does not halve evenly and the loop drifts
     by half a gap every pass. */
  margin-right: 1.25rem;
  padding: 1.125rem 1.25rem;
}

.doc-card b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.doc-card span {
  display: block;
  margin-top: 0.25rem;
  font-size: 12.5px;
  line-height: 1.5;
}

.doc-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin: 3.5rem auto 0;
  max-width: 560px;
  padding-inline: 1.5rem;
  text-align: center;
  font-size: 14px;
}

/* --- Portals -------------------------------------------------------------- */

.portal-grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: 1rem;
  margin-top: 4rem;
}

@media (min-width: 640px) {
  .portal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .portal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.portal-cell {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.45);
  padding: 1.75rem 1.5rem;
  transition: background-color 500ms;
}

.portal-cell:hover {
  background: rgba(255, 255, 255, 0.85);
}

.portal-name {
  font-size: 19px;
  letter-spacing: -0.02em;
  transition: color 500ms;
}

.portal-cell:hover .portal-name {
  color: var(--color-brand);
}

.portal-desc {
  margin-top: 0.375rem;
  font-size: 13px;
}

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

.faq-panel {
  margin: 3.5rem auto 0;
  max-width: 760px;
  border-radius: 1.5rem;
  padding: 0.5rem 1.75rem;
}

@media (min-width: 768px) {
  .faq-panel {
    padding-inline: 2.5rem;
  }
}

.faq-item + .faq-item {
  border-top: 1px solid var(--color-line);
}

.faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  background: transparent;
  padding: 1.375rem 0;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-fg);
}

.faq-q .fa-solid {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-mute);
  transition: transform 300ms;
}

.faq-item.is-open .faq-q .fa-solid {
  transform: rotate(180deg);
}

/* Grid-rows is what lets an unknown height animate at all. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

.faq-a > p {
  overflow: hidden;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
}

.faq-item.is-open .faq-a > p {
  padding-bottom: 1.375rem;
}

/* --- CTA ------------------------------------------------------------------ */

.cta-section {
  position: relative;
  padding: 6rem 1.5rem;
}

@media (min-width: 768px) {
  .cta-section {
    padding-block: 8rem;
  }
}

.cta-inner {
  margin-inline: auto;
  max-width: 64rem;
}

.cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  padding: 4rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(21, 21, 31, 0.045), 0 50px 104px -50px rgba(35, 30, 78, 0.46);
}

@media (min-width: 768px) {
  .cta-panel {
    padding-inline: 4rem;
  }
}

.cta-glow-a,
.cta-glow-b {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.cta-glow-a {
  left: 50%;
  top: -40%;
  height: 70%;
  width: 80%;
  translate: -50% 0;
  background: color-mix(in oklab, var(--color-brand) 13%, transparent);
  filter: blur(110px);
}

.cta-glow-b {
  bottom: -45%;
  right: -10%;
  height: 70%;
  width: 55%;
  background: color-mix(in oklab, var(--color-brand2) 11%, transparent);
  filter: blur(120px);
}

.cta-title {
  margin: 0 auto;
  max-width: 640px;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.cta-lede {
  margin: 1.5rem auto 0;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.6;
}

.cta-action {
  display: flex;
  justify-content: center;
  margin-top: 2.25rem;
}

.cta-fine {
  margin: 1.25rem 0 0;
  font-size: 13px;
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-line);
  background: var(--color-panel);
}

/*
 * A sign-off rather than another piece of content to read, so only the tops of
 * the letters clear the footer's bottom edge. The cap is what keeps it there:
 * the footer gets shorter as the columns move side by side while 22vw only
 * grows, and unchecked the wordmark climbs into the link lists. Offsetting in
 * `em` keeps the same slice showing whatever size it settles at.
 */
.footer-wordmark {
  position: absolute;
  inset-inline: 0;
  bottom: -0.22em;
  text-align: center;
  font-size: min(22vw, 12rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in oklab, var(--color-fg) 5.5%, transparent);
  user-select: none;
  pointer-events: none;
}

.footer-inner {
  position: relative;
  margin-inline: auto;
  max-width: 72rem;
  padding: 4rem 1.5rem;
}

@media (min-width: 768px) {
  .footer-inner {
    padding-block: 5rem;
  }
}

.footer-cols {
  display: grid;
  gap: 3rem;
}

@media (min-width: 768px) {
  .footer-cols {
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.footer-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: linear-gradient(to bottom right, var(--color-brand), var(--color-brand2));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.footer-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.footer-beta {
  margin-left: 0.25rem;
  border: 1px solid color-mix(in oklab, var(--color-brand) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-brand) 7%, transparent);
  padding: 0.125rem 0.5rem;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.footer-blurb {
  margin: 1.25rem 0 0;
  max-width: 300px;
  font-size: 13.5px;
  line-height: 1.6;
}

.footer-team {
  margin: 1.5rem 0 0;
  font-size: 12.5px;
}

.footer-col h3 {
  margin: 0 0 1rem;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-mute);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-col a {
  font-size: 13.5px;
  color: var(--color-mute);
  transition: color 300ms;
}

.footer-col a:hover {
  color: var(--color-fg);
}

.footer-contact {
  display: inline-block;
  margin-top: 1rem;
  font-size: 13.5px;
  color: var(--color-brand);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--color-line);
  margin-top: 3rem;
  padding-top: 1.75rem;
}

.footer-bottom p {
  margin: 0;
  font-size: 12.5px;
}

/* --- Legal and consent ---------------------------------------------------- */

/*
 * Bootstrap parts a modal header so the close button lands on the far edge.
 * The app's own `.card-title` lands on the same element and drops the rule,
 * which leaves the ✕ glued to the title, so the public modals restate it.
 */
[data-surface="public"] .modal-header {
  justify-content: space-between;
  gap: 1rem;
}

[data-surface="public"] .modal-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.contact-sent {
  text-align: center;
  padding-block: 2.5rem;
}

.contact-sent-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-good) 12%, transparent);
  color: var(--color-good);
  font-size: 18px;
}

.contact-sent-title {
  margin: 1.125rem 0 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.contact-sent-note {
  margin: 0.5rem auto 1.75rem;
  max-width: 26rem;
  font-size: 14px;
  line-height: 1.6;
}

.legal-body h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 15px;
  font-weight: 600;
}

.legal-body h3:first-child {
  margin-top: 0;
}

.legal-body p {
  margin: 0 0 0.75rem;
  font-size: 14.5px;
  line-height: 1.65;
}

.legal-body ul {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 14.5px;
  line-height: 1.6;
}

.legal-body a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-banner {
  position: fixed;
  inset-inline: 1rem;
  bottom: 1rem;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-inline: auto;
  max-width: 52rem;
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  padding: 1rem 1.25rem;
  box-shadow: 0 24px 60px -30px rgba(35, 30, 78, 0.5);
}

.consent-banner p {
  min-width: 0;
  flex: 1 1 20rem;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-mute);
}

.consent-banner a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-actions {
  display: flex;
  gap: 0.5rem;
}

/* ============================================================================
   Sign in
   ========================================================================== */

.login-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
}

.login-back {
  position: absolute;
  top: 1.75rem;
  left: 1.75rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13.5px;
  color: var(--color-mute);
  transition: color 300ms;
}

.login-back:hover {
  color: var(--color-fg);
}

.login-shell {
  position: relative;
  z-index: 10;
  margin-inline: auto;
  display: grid;
  width: 100%;
  max-width: 72rem;
  align-items: center;
  gap: 3.5rem;
  padding: 6rem 1.5rem 4rem;
}

@media (min-width: 992px) {
  .login-shell {
    grid-template-columns: minmax(0, 1fr) 28rem;
    gap: 4rem;
  }
}

/* Stacked, the card sits under the copy rather than beside it, and without a
   measure of its own it would run the full width while the lede and the proof
   panel above it stop at 32rem — three blocks, no shared edge. */
@media (max-width: 991.98px) {
  .login-card-wrap {
    width: 100%;
    max-width: 32rem;
  }
}

.login-copy h1 {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.login-lede {
  margin: 1.5rem 0 0;
  max-width: 32rem;
  font-size: 18px;
  line-height: 1.6;
}

.login-proof {
  margin-top: 2.25rem;
  max-width: 32rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  padding: 1.5rem;
  box-shadow: 0 18px 50px -24px rgba(91, 78, 240, 0.45);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.login-proof-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.login-proof-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 1rem;
  background: linear-gradient(to bottom right, var(--color-brand), var(--color-brand2));
  color: #fff;
  box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--color-brand) 50%, transparent);
}

.login-proof-row p:first-child {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.login-proof-row p:last-child {
  margin: 0.125rem 0 0;
  font-size: 13.5px;
  line-height: 1.55;
}

/* --- The card ------------------------------------------------------------- */

.login-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  padding: 2.75rem 2.25rem;
  box-shadow: 0 40px 120px -30px rgba(91, 78, 240, 0.55);
}

.login-card-glow {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 10rem;
  background: linear-gradient(to top, color-mix(in oklab, var(--color-brand) 15%, transparent), color-mix(in oklab, var(--color-brand2) 5%, transparent), transparent);
  pointer-events: none;
}

.login-card-inner {
  position: relative;
  text-align: center;
}

.login-mark-wrap {
  position: relative;
  margin-inline: auto;
  display: flex;
  width: 8rem;
  height: 8rem;
  align-items: center;
  justify-content: center;
}

.login-mark-halo {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-brand) 15%, transparent);
  filter: blur(28px);
}

.login-mark-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: color-mix(in oklab, var(--color-brand) 30%, transparent);
}

.login-hex {
  position: relative;
  display: flex;
  width: 62px;
  height: 62px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom right, var(--color-brand), var(--color-brand2));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  color: #fff;
  font-size: 1.875rem;
  font-weight: 700;
  box-shadow: 0 18px 40px -14px color-mix(in oklab, var(--color-brand) 60%, transparent);
}

.login-wordmark {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.login-wordmark-ai {
  background: linear-gradient(to right, var(--color-brand), var(--color-brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.login-welcome {
  margin: 1rem 0 0;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.login-sub {
  margin: 0.5rem 0 0;
  font-size: 15px;
}

.login-error {
  margin: 1.5rem 0 0;
  border: 1px solid var(--danger-200);
  border-radius: 1rem;
  background: var(--danger-50);
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 13px;
  line-height: 1.55;
  color: var(--danger-700);
}

[data-surface="public"] .google-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
  border-radius: 1rem;
  background: linear-gradient(to right, #1b1830, #211d3d, #141225);
  padding: 1rem;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 18px 40px -12px rgba(27, 24, 48, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: filter 300ms;
}

[data-surface="public"] .google-btn:hover {
  color: #fff;
  filter: brightness(1.25);
}

.google-mark {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
}

.google-mark svg {
  width: 1rem;
  height: 1rem;
}

.login-notice {
  margin: 1.5rem 0 0;
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.6);
  padding: 0.875rem 1rem;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-mute);
}

.login-fine {
  margin: 1.25rem 0 0;
  font-size: 12.5px;
}

.login-fine a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-local {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 13px;
}

.login-local a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}