/*
 * DayFlo public marketing/legal pages — standalone stylesheet.
 *
 * Deliberately NOT generated from src/styles.ts: these pages ship zero JS on
 * the critical path (no Lit, no build step), so the token *names and values*
 * are hand-mirrored here from src/styles.ts instead of imported. Duplication
 * is intentional — see docs/exec-plans/active/
 * react_elimination_lit_rebuild_immutable_plan_2026_08_06.md's F2 checkpoint.
 *
 * Breakpoints match the Tailwind scale these routes were originally authored
 * against in apps/frontend (sm 640 / md 768 / lg 1024 / xl 1280) rather than
 * MUI's 600/900/1200/1536 scale used by the authenticated app shell.
 *
 * Cache busting: every page links this file as `/site/site.css?v=N`. The
 * filename cannot carry a content hash because these pages have no build step,
 * and without the token a browser holding an older copy keeps applying it to
 * newer markup — which is how a shipped header once rendered as a bare link and
 * an unstyled image. The response is now served with a 300s must-revalidate
 * policy (see public/_headers and nginx.conf), so this token should not need
 * touching again. Bump N on every page together if a cached copy ever has to be
 * abandoned immediately rather than within the revalidation window.
 */

@layer reset, fonts, tokens, base, layout;

/* Self-hosted brand face — mirrors the @font-face block in src/styles.ts for
 * the same reason the tokens below are mirrored: these pages ship no JS and no
 * build step, so they cannot import it. The previous stack led with
 * "Avenir Next", which exists only on Apple platforms, so the marketing site
 * rendered in a different typeface from the one it was designed in for most
 * visitors. Keep the two blocks in step. */
@layer fonts {
  @font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("/fonts/nunito-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 200 1000;
    font-display: swap;
    src: url("/fonts/nunito-sans-latin-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd {
    margin: 0;
  }
  img, picture, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  button { cursor: pointer; }
  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
}

@layer tokens {
  :root {
    /* Mirrored from src/styles.ts --nf-* (same names/values, separate cascade) */
    --nf-font: "Nunito Sans", "Avenir Next", Avenir, ui-sans-serif, system-ui, -apple-system,
      BlinkMacSystemFont, "Segoe UI", sans-serif;
    --nf-primary: #2563eb;
    --nf-primary-light: #dbeafe;
    --nf-primary-dark: #1d4ed8;
    --nf-on-primary: #ffffff;
    --nf-surface: #f6f8fb;
    --nf-surface-raised: #ffffff;
    --nf-text: #111823;
    --nf-heading: #171a22;
    --nf-muted: #475569;
    --nf-attention: #a43346;
    --nf-focus: var(--nf-primary);
    --nf-focus-ring: color-mix(in srgb, var(--nf-focus) 38%, transparent);
    --nf-error: var(--nf-attention);
    --nf-error-bg: color-mix(in srgb, var(--nf-error) 8%, white);
    --nf-error-border: color-mix(in srgb, var(--nf-error) 24%, white);
    --nf-radius-sm: 6px;
    --nf-radius-md: 8px;
    --nf-radius-lg: 12px;
    --nf-radius-pill: 999px;
    --nf-w-medium: 500;
    --nf-w-semibold: 600;
    --nf-w-bold: 650;
    --nf-w-bolder: 700;
    --nf-w-heavy: 750;
    --nf-w-heavier: 800;
    --nf-w-black: 850;
    --nf-w-blacker: 900;
    --nf-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --nf-transition-fast: 0.18s ease;
    --nf-gradient-62: linear-gradient(180deg, #fbfcff 0%, #f6f8fb 62%, #eef3ff 100%);

    /* Marketing-page-only accents (Tailwind arbitrary values in the React
       source, never promoted to app-wide --nf-* tokens because they don't
       recur in the authenticated app). Kept as literals with a Tailwind-name
       comment for maintainability, same convention Theme.js used. */
    --mkt-ink: #020617; /* slate-950 */
    --mkt-ink-hover: #1e293b; /* slate-800 */
    --mkt-ink-active: #334155; /* slate-700 */
    --mkt-text-700: #334155; /* slate-700 */
    --mkt-text-600: #475569; /* slate-600 */
    --mkt-text-500: #64748b; /* slate-500 */
    --mkt-text-400: #94a3b8; /* slate-400 */
    --mkt-text-300: #cbd5e1; /* slate-300 */
    --mkt-border-200: #e2e8f0; /* slate-200 */
    --mkt-border-100: #f1f5f9; /* slate-100 */
    --mkt-surface-50: #f8fafc; /* slate-50 */
    --mkt-emerald-700: #047857;
    --mkt-emerald-50: #ecfdf5;
    --mkt-blue-50: #eff6ff;
    --mkt-blue-100: #dbeafe;
    --mkt-blue-300: #93c5fd;
    --mkt-amber-50: #fffbeb;
    --mkt-amber-500: #f59e0b;
    --mkt-amber-700: #b45309;
    --mkt-gray-200: #e5e7eb;
    --mkt-gray-600: #4b5563;
    --mkt-gray-800: #1f2937;
    --mkt-gray-900: #111827;
  }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; }
  body {
    background: var(--nf-gradient-62);
    background-color: var(--nf-surface);
    color: var(--mkt-ink);
    font-family: var(--nf-font);
    line-height: 1.5;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: var(--nf-primary); }
  :focus-visible { outline: 2px solid var(--nf-focus); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
  @keyframes nf-spin { to { transform: rotate(360deg); } }
}

@layer layout {
  /* ---------- Buttons (shared across Landing/Start/404) ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: var(--nf-radius-md);
    padding: 12px 18px;
    font-size: 0.875rem;
    font-weight: var(--nf-w-bolder);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color var(--nf-transition-fast), color var(--nf-transition-fast);
  }
  .btn--dark { background: var(--mkt-ink); border-color: var(--mkt-ink); color: #fff; }
  .btn--dark:hover { background: var(--mkt-ink-hover); }
  .btn--dark:active { background: var(--mkt-ink-active); }
  .btn--light { background: #fff; border-color: #fff; color: var(--mkt-ink); }
  .btn--light:hover { background: var(--mkt-blue-50); }
  .btn--light:active { background: var(--nf-primary-light); }
  .btn--primary { background: var(--nf-primary); border-color: var(--nf-primary); color: #fff; }
  .btn--primary:hover { background: var(--nf-primary-dark); }
  .btn--outline { background: transparent; border-color: var(--mkt-border-200); color: var(--mkt-ink); }
  .btn--outline:hover { background: var(--mkt-surface-50); }
  @media (max-width: 639.98px) { .btn--full-mobile { width: 100%; } }

  /* ---------- Site header (shared by every public page) ---------- */
  /* The public pages carried no header, nav, or brand mark at all: a visitor
   * arriving from a link met a headline in an empty gradient, with the product
   * name appearing for the first time in the footer.
   *
   * A brand plus a CTA is not enough on its own: at the top of the landing page
   * that CTA duplicates the one in the hero directly beneath it, so the bar
   * earns its space only once the hero has scrolled away. The section links are
   * what make it useful before then — they let someone who is deciding jump to
   * the part they came to check, and they give the legal and setup pages a way
   * back into the story. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-block-end: 1px solid color-mix(in srgb, var(--mkt-border-200) 70%, transparent);
    background: color-mix(in srgb, #ffffff 82%, transparent);
    backdrop-filter: saturate(1.8) blur(12px);
  }
  .site-header-inner {
    width: min(1180px, calc(100% - 36px));
    margin-inline: auto;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .site-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: inherit;
    flex: none;
    margin-inline-end: auto;
  }
  /* The mark is raster artwork with soft gradients, so it does not hold a crisp
   * edge at this size. The ring and the slight inset let it read as a deliberate
   * badge rather than as a small blurry picture. A vector mark would remove the
   * need for both. */
  .site-brand img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgb(2 6 23 / 8%), 0 1px 2px rgb(2 6 23 / 8%);
  }
  .site-brand-name {
    font-size: 1.0625rem;
    font-weight: var(--nf-w-medium);
    letter-spacing: -0.015em;
    color: var(--nf-heading);
    line-height: 1;
  }
  /* "Day" carries the weight and "Flo" lightens — the wordmark states the
   * product's own promise, that the day resolves into something calmer. */
  .site-brand-name b { font-weight: var(--nf-w-heavier); }

  .site-nav { display: none; }
  @media (min-width: 900px) {
    .site-nav {
      display: flex;
      align-items: center;
      gap: 26px;
      margin-inline-end: 26px;
    }
  }
  .site-nav a {
    font-size: 0.875rem;
    font-weight: var(--nf-w-semibold);
    color: var(--mkt-text-600);
    text-decoration: none;
    padding-block: 6px;
    border-block-end: 2px solid transparent;
    transition: color var(--nf-transition-fast), border-color var(--nf-transition-fast);
  }
  .site-nav a:hover { color: var(--mkt-ink); border-block-end-color: var(--nf-primary); }

  .site-header .btn { min-height: 38px; padding: 8px 15px; font-size: 0.8125rem; flex: none; }
  /* Only the very narrowest phones drop the CTA. With a short label the bar
     holds brand plus button comfortably at 360px, and a persistent way in is
     most of what this header is for once the hero has scrolled away. */
  @media (max-width: 339.98px) {
    .site-header .btn { display: none; }
  }

  /* ---------- Landing: hero ---------- */
  .hero { }
  @media (min-width: 1024px) {
    .hero {
      border-bottom: 1px solid #dfe8f4;
      background: linear-gradient(135deg, #ecf7f2 0%, #f7fbff 48%, #fff6df 100%);
    }
  }
  .hero-inner {
    width: min(1180px, calc(100% - 36px));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 24px;
    padding-block: 32px;
  }
  @media (min-width: 640px) { .hero-inner { gap: 32px; padding-block: 56px; } }
  @media (min-width: 1024px) {
    .hero-inner {
      grid-template-columns: minmax(0, 0.88fr) minmax(500px, 0.96fr);
      gap: 48px;
      padding-block: 72px;
    }
  }
  /* One eyebrow colour across every public page. These read as one device but
     were set in three: emerald here and on the story markers, a different teal
     on /start, and a pale blue in the closing band — none of them the brand.
     Emerald is kept for the reassurance checkmarks on /start, where "safe" is
     the actual meaning rather than decoration. */
  .hero-eyebrow { font-size: 0.75rem; font-weight: var(--nf-w-blacker); text-transform: uppercase; color: var(--nf-primary); }
  @media (min-width: 640px) { .hero-eyebrow { font-size: 0.875rem; } }
  /* The ceiling is set by line count, not by how large the type can get. At
     5.125rem this headline broke across five lines in its column and split
     "late-night" across a hyphen — the best sentence on the site was also the
     worst-set one. hyphens:manual forbids the automatic break outright, so a
     future size change degrades into a wrap rather than back into a hyphen. */
  .hero-title {
    margin-block-start: 12px;
    max-width: 730px;
    font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
    font-weight: var(--nf-w-blacker);
    line-height: 1.02;
    letter-spacing: -0.02em;
    hyphens: manual;
    color: var(--mkt-ink);
  }
  @media (min-width: 640px) { .hero-title { margin-block-start: 16px; } }
  .hero-lede { margin-block-start: 20px; max-width: 620px; font-size: 1.125rem; line-height: 1.75; color: var(--mkt-text-700); }
  @media (min-width: 640px) { .hero-lede { font-size: 1.1875rem; } }
  .hero-lede2 { margin-block-start: 12px; max-width: 36rem; font-size: 1rem; line-height: 1.75; color: var(--mkt-text-600); }
  .hero-actions { margin-block-start: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  @media (min-width: 640px) { .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; } }
  .hero-note { font-size: 0.875rem; font-weight: var(--nf-w-semibold); line-height: 1.5; color: var(--mkt-text-600); }
  .hero-visual { position: relative; }
  /* The rightward push may only use gutter that actually exists. A flat 96px
     put the hero image past the viewport edge on every width from 1024px up to
     about 1370px — the common laptop range — giving the whole page a horizontal
     scrollbar. The clamp spends the offset only once the container has stopped
     growing and real margin has appeared beside it.

     Boundary: any transform or negative margin on a full-bleed hero child has
     to be expressed against available gutter, never as a constant. */
  /* The hero sizes to its content at every viewport height.
   *
   * It previously carried min-height: calc(100svh - 96px) while the overlay card
   * was absolutely positioned, so the card reserved no space of its own and the
   * min-height stood in for it. That works at one window height and nowhere
   * else: on a tall display the hero kept growing while its content did not,
   * leaving a band of empty gradient between the CTA and the next section that
   * read as an unfinished page. The overlay is now in flow (see below), so the
   * space it needs is the space it takes.
   *
   * The vertical lift went with it — it was offsetting that same min-height. */
  @media (min-width: 1024px) {
    .hero-visual {
      min-height: 0;
      transform: translateX(clamp(0px, (100vw - 1216px) / 2, 96px));
    }
  }
  .hero-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--mkt-border-200);
    background: #eef3f1;
    box-shadow: 0 18px 50px rgb(28 42 38 / 10%), 0 2px 8px rgb(28 42 38 / 6%);
  }
  @media (min-width: 640px) {
    .hero-image { position: absolute; inset: 0 10px 68px 0; aspect-ratio: auto; }
  }
  @media (min-width: 1024px) {
    .hero-image {
      position: relative;
      inset: auto;
      aspect-ratio: 16 / 10;
      border-radius: 22px;
      border-color: #d3deec;
      box-shadow: 0 28px 70px rgb(28 42 38 / 16%), 0 2px 10px rgb(28 42 38 / 7%);
    }
  }
  .hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
  @media (min-width: 640px) { .hero-image img { object-position: 42% center; } }
  @media (min-width: 1024px) { .hero-image img { object-position: 50% center; } }

  .hero-overlay {
    position: relative;
    z-index: 2;
    margin-block-start: -16px;
    margin-inline-start: auto;
    width: min(430px, 94%);
    border-radius: 14px;
    border: 1px solid var(--mkt-border-200);
    background: rgb(255 255 255 / 0.95);
    padding: 14px;
    box-shadow: 0 18px 50px rgb(28 42 38 / 10%), 0 2px 8px rgb(28 42 38 / 6%);
  }
  @media (min-width: 640px) {
    .hero-overlay { position: absolute; inset-block-end: 0; inset-inline-end: 0; margin-block-start: 0; width: min(430px, 88%); padding: 18px; }
  }
  @media (min-width: 1024px) {
    /* In flow, overlapping upward, rather than absolute and hanging 16rem below
       the photo. Absolute meant the card contributed no height, so the section
       had to reserve room for it by guessing; a negative top margin gives the
       same overlap while the card still occupies the space it needs. */
    .hero-overlay {
      position: relative; inset: auto;
      margin-block-start: -3.5rem; margin-inline-start: auto; margin-inline-end: 24px;
      width: min(316px, 58%); border-color: #d8e2ef; background: rgb(255 255 255 / 0.96); padding: 14px;
    }
  }
  .hero-overlay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--mkt-border-100); padding-block-end: 12px; }
  .hero-overlay-head h2 { font-size: 1rem; font-weight: var(--nf-w-blacker); color: var(--mkt-ink); }
  @media (min-width: 640px) { .hero-overlay-head h2 { font-size: 1.125rem; } }
  .hero-overlay-head p { margin-block-start: 4px; font-size: 0.75rem; font-weight: var(--nf-w-bolder); color: var(--mkt-text-500); }
  .hero-overlay-badge {
    display: inline-flex; align-items: center; min-height: 26px; white-space: nowrap;
    border-radius: var(--nf-radius-pill); border: 1px solid var(--mkt-border-200); background: #fbfcff;
    padding: 4px 10px; font-size: 0.75rem; font-weight: var(--nf-w-bolder); color: var(--mkt-text-700);
  }
  .hero-overlay-list { margin-block-start: 12px; display: grid; gap: 8px; }
  @media (min-width: 640px) { .hero-overlay-list { gap: 10px; } }
  .hero-overlay-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; border-radius: var(--nf-radius-lg); border: 1px solid var(--mkt-border-100); background: #fff; padding: 10px; }
  @media (min-width: 640px) { .hero-overlay-item { padding: 12px; } }
  .hero-overlay-dot { margin-block-start: 6px; height: 10px; width: 10px; border-radius: 999px; background: var(--nf-primary); }
  .hero-overlay-dot--amber { background: var(--mkt-amber-500); }
  .hero-overlay-item strong { display: block; font-size: 0.875rem; line-height: 1.35; color: var(--mkt-ink); }
  .hero-overlay-item span { margin-block-start: 4px; display: block; font-size: 0.75rem; line-height: 1.35; color: var(--mkt-text-500); }

  /* ---------- Story marker (Problem / Way section eyebrow) ---------- */
  .story-marker { display: flex; align-items: center; gap: 12px; }
  .story-marker-bar { height: 11px; width: 40px; border-radius: 999px; background: var(--nf-primary-dark); box-shadow: 14px 0 0 #def4ef; }
  .story-marker-label { font-size: 0.75rem; font-weight: var(--nf-w-blacker); text-transform: uppercase; color: var(--nf-primary); }
  @media (min-width: 640px) { .story-marker-label { font-size: 0.875rem; } }

  /* ---------- Shared "band" sections ---------- */
  .band { padding: 40px 16px; }
  @media (min-width: 640px) { .band { padding: 56px 24px; } }
  @media (min-width: 1024px) { .band { padding: 72px 64px; } }
  .band--problem { border-block: 1px solid var(--mkt-border-200); background: #fff; }
  .band-inner { max-width: 1180px; margin-inline: auto; }
  .band-head { margin-block-end: 28px; display: grid; gap: 32px; align-items: end; grid-template-columns: 1fr; }
  @media (min-width: 1024px) { .band-head { grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.78fr); } }
  .band-head h2 { margin-block-start: 12px; font-size: clamp(1.875rem, 1.5rem + 2vw, 3rem); font-weight: var(--nf-w-blacker); line-height: 1.15; color: var(--mkt-ink); }
  .band-head p { font-size: 1rem; line-height: 1.75; color: var(--mkt-text-600); }

  /* ---------- Problem stage: noise cards | stream cue | board panel ---------- */
  .problem-stage { position: relative; display: grid; grid-template-columns: 1fr; align-items: center; gap: 20px; }
  @media (min-width: 1024px) {
    .problem-stage { grid-template-columns: minmax(340px, 1fr) minmax(220px, 0.66fr) minmax(330px, 0.86fr); gap: clamp(12px, 2.2vw, 28px); }
  }
  /* The stack depicts inbox noise, so the cards are deliberately scattered —
   * but the depiction must never cost the reader the words. Below 1024px the
   * cards were absolutely positioned at fixed offsets inside a clipped
   * 236px box; at phone widths they covered each other and four of six titles
   * truncated mid-word, which reads as a rendering failure rather than as
   * chaos. Overlap is now reserved for widths that can actually hold it.
   *
   * Boundary: any future variant of this section may re-stagger the cards, but
   * every card's label and title must remain fully readable at 320px. */
  .noise-stack {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    border-radius: 16px;
    border: 1px solid var(--mkt-border-200);
    background: #fff;
    padding: 10px;
    box-shadow: 0 18px 40px rgb(15 23 42 / 7%);
  }
  @media (min-width: 480px) {
    .noise-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .noise-stack { min-height: 0; overflow: visible; border: 0; background: transparent; padding: 0; box-shadow: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  }
  .noise-card {
    border-radius: var(--nf-radius-lg);
    border: 1px solid var(--mkt-border-200);
    background: #fff;
    padding: 12px;
    box-shadow: 0 12px 26px rgb(28 42 38 / 8%);
  }
  .noise-card p:first-child { font-size: 0.75rem; font-weight: var(--nf-w-bolder); color: var(--mkt-text-500); }
  .noise-card strong { margin-block-start: 14px; display: block; font-size: 0.9375rem; line-height: 1.3; color: var(--mkt-ink); }
  .noise-card .copy { margin-block-start: 12px; display: block; font-size: 0.75rem; line-height: 1.4; color: var(--mkt-text-500); }
  @media (max-width: 1023.98px) {
    .noise-card {
      position: relative; min-height: 0;
      box-shadow: 0 12px 26px rgb(28 42 38 / 10%);
    }
    /* Keep the scatter as a cue, at an amplitude that cannot occlude a
     * neighbour now that the cards are in flow rather than absolutely placed. */
    .noise-card:nth-child(odd) { rotate: -1deg; }
    .noise-card:nth-child(even) { rotate: 1.2deg; }
    .noise-card strong { margin-block-start: 8px; }
  }
  @media (max-width: 639.98px) {
    /* One column has no room for the supporting line without pushing the
     * DayFlo board below three screens of noise. */
    .noise-card .copy { display: none; }
  }
  @media (min-width: 1024px) {
    .noise-card:nth-child(1) { transform: translate(-4px, 4px) rotate(-2deg); }
    .noise-card:nth-child(2) { transform: translate(2px, 16px) rotate(1.5deg); }
    .noise-card:nth-child(3) { transform: translate(4px, -4px) rotate(-1deg); }
    .noise-card:nth-child(4) { transform: translate(8px, 12px) rotate(1.8deg); }
    .noise-card:nth-child(5) { transform: translate(-4px, 28px) rotate(-1.4deg); }
    .noise-card:nth-child(6) { transform: translate(6px, 8px) rotate(2deg); }
  }

  /* The cue stays inside its own grid column. It used to be pulled outward with
     negative inline margins and sized past its track (max-width:none), so the
     strands ran across the noise cards on its left and clipped their text —
     the graphic that depicts messages resolving was obscuring the messages. */
  .stream-cue {
    position: relative; z-index: 1; display: flex; flex-direction: column;
    min-height: 104px; align-items: center; justify-content: center; gap: 14px;
  }
  @media (min-width: 1024px) { .stream-cue { min-height: 300px; } }
  .stream-cue-image { display: none; }
  @media (min-width: 1024px) {
    /* The artwork is a rectangular raster whose strands simply stop at its left
       edge, so the "many become one" gesture began on a hard vertical cut in
       mid-air. The mask dissolves that edge into the cards it is meant to be
       flowing out of. */
    .stream-cue-image {
      display: block; width: 100%; max-width: 100%;
      transform: scaleY(0.82); opacity: 0.94;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
    }
    .stream-cue-image img { width: 100%; object-fit: contain; }
  }
  .stream-cue-mobile { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(320px, 100%); }
  @media (min-width: 1024px) { .stream-cue-mobile { display: none; } }
  .stream-cue-tick { height: 40px; width: 1px; background: linear-gradient(180deg, rgb(20 107 255 / 0), rgb(20 107 255 / 0.42), rgb(20 107 255 / 0)); }
  .stream-cue-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 36px; border-radius: 999px; border: 1px solid #c7d8ff; background: #e7efff;
    padding: 6px 12px; font-size: 0.75rem; font-weight: var(--nf-w-heavier); line-height: 1.2; color: #0f459e;
    box-shadow: 0 10px 22px rgb(20 107 255 / 10%);
  }
  .stream-cue-label {
    /* In flow directly beneath the artwork, not absolutely pinned to the bottom
       of the cue — pinned, it floated well clear of the ribbon with nothing
       connecting the two, and read as an unrelated stray pill. */
    display: none; width: 100%; max-width: 240px; text-align: center;
    align-items: center; justify-content: center; min-height: 28px; border-radius: 999px;
    border: 1px solid #c7d8ff; background: #e7efff; padding: 6px 10px;
    font-size: 0.75rem; font-weight: var(--nf-w-heavier); line-height: 1.2; color: #0f459e;
    box-shadow: 0 10px 22px rgb(20 107 255 / 10%);
  }
  @media (min-width: 1024px) { .stream-cue-label { display: inline-flex; } }

  .board-panel {
    position: relative; z-index: 2; min-height: 0; border-radius: 16px;
    border: 1px solid #cbd8eb; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 16px; box-shadow: 0 18px 50px rgb(28 42 38 / 10%), 0 2px 8px rgb(28 42 38 / 6%);
  }
  @media (min-width: 1024px) { .board-panel { min-height: 360px; } }
  @media (min-width: 640px) { .board-panel { padding: 20px; } }
  .board-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--mkt-border-100); padding-block-end: 14px; }
  .board-panel-head h3 { font-size: 1.125rem; font-weight: var(--nf-w-blacker); color: var(--mkt-ink); }
  .board-panel-head p { margin-block-start: 4px; font-size: 0.75rem; font-weight: var(--nf-w-bolder); color: var(--mkt-text-500); }
  .board-panel-list { margin-block-start: 16px; display: grid; gap: 10px; }
  .board-item { border-radius: var(--nf-radius-lg); border: 1px solid var(--mkt-border-100); background: #fbfcff; padding: 12px; }
  .board-item strong { display: flex; align-items: center; font-size: 0.8125rem; color: var(--mkt-ink); }
  .board-item .dot { margin-inline-end: 8px; display: inline-block; height: 8px; width: 8px; border-radius: 999px; background: var(--nf-primary-dark); }
  .board-item.is-quiet .dot { background: var(--mkt-emerald-700); }
  .board-item .copy { margin-block-start: 4px; display: block; font-size: 0.6875rem; line-height: 1.4; color: var(--mkt-text-500); }

  /* ---------- Way section ---------- */
  .way-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 1024px) { .way-grid { grid-template-columns: repeat(3, 1fr); } }
  .way-card { border-radius: var(--nf-radius-lg); border: 1px solid var(--mkt-border-200); background: #fff; padding: 20px; box-shadow: 0 12px 30px rgb(28 42 38 / 7%); }
  @media (min-width: 640px) { .way-card { padding: 24px; } }
  .way-card-badge { display: inline-flex; height: 32px; width: 32px; align-items: center; justify-content: center; border-radius: 999px; font-size: 0.875rem; font-weight: var(--nf-w-blacker); }
  .way-card-badge--blue { background: var(--mkt-blue-50); color: var(--nf-primary-dark); }
  .way-card-badge--emerald { background: var(--mkt-emerald-50); color: var(--mkt-emerald-700); }
  .way-card-badge--amber { background: var(--mkt-amber-50); color: var(--mkt-amber-700); }
  .way-card h3 { margin-block-start: 16px; font-size: 1.25rem; font-weight: var(--nf-w-blacker); line-height: 1.3; color: var(--mkt-ink); }
  @media (min-width: 640px) { .way-card h3 { font-size: 1.375rem; } }
  .way-card p { margin-block-start: 10px; font-size: 0.875rem; line-height: 1.6; color: var(--mkt-text-600); }
  @media (min-width: 640px) { .way-card p { font-size: 0.9375rem; } }

  /* ---------- CTA band (dark) ---------- */
  .cta-band { background: var(--mkt-ink); color: #fff; padding: 40px 16px; }
  @media (min-width: 640px) { .cta-band { padding: 48px 24px; } }
  @media (min-width: 1024px) { .cta-band { padding: 48px 64px; } }
  .cta-band-inner { margin-inline: auto; max-width: 1180px; display: flex; flex-direction: column; gap: 28px; }
  @media (min-width: 1024px) { .cta-band-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
  /* On the ink band the same brand hue has to arrive light enough to read; this
     is the one eyebrow that is not --nf-primary, and it is a tint of it. */
  .cta-band-eyebrow { font-size: 0.875rem; font-weight: var(--nf-w-bolder); text-transform: uppercase; color: color-mix(in srgb, var(--nf-primary) 45%, white); }
  .cta-band h2 { margin-block-start: 12px; font-size: clamp(1.875rem, 1.6rem + 1vw, 2.25rem); font-weight: var(--nf-w-blacker); }
  .cta-band p { margin-block-start: 12px; max-width: 42rem; font-size: 0.875rem; line-height: 1.6; color: rgb(255 255 255 / 0.7); }

  /* ---------- Footer ---------- */
  .site-footer { background: var(--mkt-ink); color: var(--mkt-text-300); }
  .site-footer-inner { margin-inline: auto; max-width: 72rem; display: flex; flex-direction: column; gap: 24px; padding: 32px 16px; }
  @media (min-width: 640px) { .site-footer-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
  .site-footer-brand { font-size: 1.125rem; font-weight: var(--nf-w-bolder); color: #fff; }
  .site-footer-tag { margin-block-start: 4px; max-width: 28rem; font-size: 0.875rem; color: var(--mkt-text-400); }
  .site-footer-legal { margin-block-start: 12px; font-size: 0.75rem; color: var(--mkt-text-500); }
  .site-footer-nav { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 8px; font-size: 0.875rem; font-weight: var(--nf-w-medium); }
  .site-footer-nav a { color: var(--mkt-text-300); text-decoration: none; }
  .site-footer-nav a:hover { color: #fff; }

  /* ---------- Start route ---------- */
  .start-main { padding-block: 40px; }
  @media (min-width: 768px) { .start-main { padding-block: 64px; } }
  .start-container { margin-inline: auto; max-width: 1200px; padding-inline: 16px; }
  @media (min-width: 640px) { .start-container { padding-inline: 24px; } }
  .start-grid { display: grid; grid-template-columns: 1fr; align-items: start; gap: 24px; }
  @media (min-width: 768px) { .start-grid { grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.58fr); gap: 40px; } }
  .start-eyebrow { font-size: 0.8125rem; font-weight: var(--nf-w-blacker); text-transform: uppercase; color: var(--nf-primary); }
  .start-title { margin-block-start: 12px; max-width: 47.5rem; font-size: clamp(2.625rem, 1.8rem + 3vw, 4.25rem); font-weight: var(--nf-w-blacker); line-height: 0.98; color: var(--nf-heading); }
  .start-lede { margin-block-start: 20px; max-width: 40.625rem; font-size: 1.0625rem; line-height: 1.6; color: #344052; }
  @media (min-width: 768px) { .start-lede { font-size: 1.1875rem; } }
  .start-actions { margin-block-start: 32px; display: flex; flex-direction: column; gap: 12px; }
  @media (min-width: 640px) { .start-actions { flex-direction: row; } }
  .start-alert {
    margin-block-start: 24px; max-width: 620px; border-radius: var(--nf-radius-sm);
    border: 1px solid var(--nf-error-border); background: var(--nf-error-bg); color: var(--nf-error);
    padding: 12px 16px; font-size: 0.875rem; line-height: 1.5; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  }
  /* `display` set in an author layer outranks the UA's `[hidden] {display:none}`,
   * so the markup's own `hidden` attribute stopped hiding this box and every
   * visitor to /start saw an empty error alert under the primary CTA.
   *
   * Boundary: any rule in this stylesheet that sets `display` on an element the
   * markup can hide needs the same guard — `hidden` is not self-enforcing once
   * a layer has an opinion about display. */
  .start-alert[hidden] { display: none; }
  .start-alert button { color: inherit; font-weight: var(--nf-w-bolder); text-decoration: underline; flex-shrink: 0; }
  .start-assurances { margin-block-start: 32px; max-width: 700px; display: grid; gap: 10px; }
  .start-assurance-item { display: flex; gap: 10px; align-items: flex-start; color: var(--nf-muted); line-height: 1.55; }
  .start-assurance-item svg { flex-shrink: 0; margin-block-start: 2px; color: #0b7c72; }
  .start-panel {
    padding: 20px; border: 1px solid rgb(20 107 255 / 0.18); border-radius: var(--nf-radius-md);
    background: #fff; box-shadow: 0 18px 48px rgb(15 23 42 / 8%);
  }
  @media (min-width: 768px) { .start-panel { padding: 24px; } }
  .start-panel-head { display: flex; align-items: center; gap: 10px; }
  .start-panel-head svg { color: #0b4fc4; flex-shrink: 0; }
  .start-panel-head h2 { font-size: 1.25rem; font-weight: var(--nf-w-blacker); color: var(--nf-heading); }
  .start-steps { margin-block-start: 20px; display: grid; gap: 16px; list-style: none; padding: 0; }
  .start-step {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px;
    border: 1px solid rgb(226 232 240 / 0.96); border-radius: var(--nf-radius-md); background: #fff;
  }
  .start-step.is-first { background: rgb(20 107 255 / 0.06); }
  .start-step-icon { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: #0b4fc4; background: rgb(20 107 255 / 0.10); }
  .start-step strong { font-weight: var(--nf-w-bolder); color: var(--nf-text); }
  .start-step p { margin-block-start: 3px; color: #667080; font-size: 0.875rem; line-height: 1.5; }
  /* Hidden while the inline session-check script decides whether to redirect. */
  .nf-checking .start-content { display: none; }
  .nf-checking-note { display: none; padding-block: 64px; text-align: center; color: var(--nf-muted); font-size: 0.9375rem; }
  .nf-checking .nf-checking-note { display: block; }

  /* ---------- Setup guide ---------- */
  .guide-main { background: #fff; min-height: 100dvh; padding: 48px 16px; }
  @media (min-width: 640px) { .guide-main { padding-inline: 24px; } }
  @media (min-width: 1024px) { .guide-main { padding-inline: 32px; } }
  .guide-inner { max-width: 48rem; margin-inline: auto; color: var(--mkt-gray-900); }
  .guide-eyebrow { font-size: 0.875rem; font-weight: var(--nf-w-blacker); text-transform: uppercase; color: var(--nf-primary-dark); }
  .guide-inner h1 { margin-block-start: 8px; margin-block-end: 16px; font-size: 1.875rem; font-weight: var(--nf-w-bolder); }
  .guide-inner > p { margin-block-end: 16px; font-size: 1.125rem; }
  .guide-steps { margin-block-start: 32px; display: grid; gap: 12px; grid-template-columns: 1fr; }
  @media (min-width: 640px) { .guide-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .guide-step { border-radius: var(--nf-radius-lg); border: 1px solid var(--mkt-border-200); background: #fff; padding: 16px; box-shadow: 0 1px 2px rgb(0 0 0 / 5%); }
  .guide-step-num { display: inline-flex; height: 32px; width: 32px; align-items: center; justify-content: center; border-radius: 999px; background: var(--mkt-blue-50); font-size: 0.875rem; font-weight: var(--nf-w-blacker); color: var(--nf-primary-dark); }
  .guide-step h2 { margin-block-start: 12px; font-size: 1rem; font-weight: var(--nf-w-blacker); }
  .guide-step p { margin-block-start: 8px; font-size: 0.875rem; line-height: 1.6; color: var(--mkt-text-600); }
  .guide-tip { margin-block-start: 32px; border-inline-start: 4px solid #3b82f6; background: var(--mkt-blue-50); padding: 16px; color: #1e3a8a; font-size: 0.875rem; border-radius: 4px; }
  .guide-inner h2.guide-subhead { margin-block-start: 32px; margin-block-end: 12px; font-size: 1.25rem; font-weight: var(--nf-w-semibold); }
  .guide-inner ol { padding-inline-start: 24px; margin-block-end: 16px; }
  .guide-inner ol > li { margin-block-end: 16px; line-height: 1.7; }
  .guide-inner ul { list-style: disc; padding-inline-start: 20px; margin-block-start: 8px; }
  .guide-inner ul > li { margin-block-end: 4px; }
  .guide-kbd { padding: 2px 8px; background: var(--mkt-gray-200); border-radius: 4px; font-family: inherit; font-size: 0.9em; }
  .guide-figure { margin-block-start: 40px; text-align: center; }
  .guide-figure a { display: inline-block; border-radius: 4px; transition: transform var(--nf-transition-fast); }
  .guide-figure a:hover img, .guide-figure a:focus-visible img { transform: scale(1.03); }
  .guide-figure img { width: 100%; max-width: 36rem; margin-inline: auto; border-radius: 4px; box-shadow: 0 1px 4px rgb(0 0 0 / 15%); transition: transform var(--nf-transition-fast); }
  .guide-figure figcaption { margin-block-start: 8px; font-size: 0.875rem; color: var(--mkt-gray-600); }
  .guide-back { margin-block-start: 40px; text-align: center; }
  .guide-back a { font-size: 0.875rem; text-decoration: underline; color: var(--nf-primary); }
  .guide-back a:hover { color: var(--nf-primary-dark); }

  /* ---------- Legal (Privacy / Terms) ---------- */
  .legal-main { background: #fff; }
  .legal-inner { max-width: 48rem; margin-inline: auto; padding: 64px 16px; color: var(--mkt-gray-800); }
  .legal-inner h1 { font-size: 1.875rem; font-weight: var(--nf-w-bolder); margin-block-end: 24px; }
  .legal-inner h2 { font-size: 1.25rem; font-weight: var(--nf-w-semibold); margin-block: 32px 8px; }
  .legal-inner p { margin-block-end: 16px; line-height: 1.7; }
  .legal-inner ul { list-style: disc; padding-inline-start: 24px; margin-block-end: 16px; line-height: 1.7; }
  .legal-inner a { text-decoration: underline; color: var(--nf-primary); }

  /* ---------- 404 ---------- */
  .notfound-page { min-height: 100dvh; background: #f7f9fb; color: var(--mkt-ink); }
  .notfound-header { margin-inline: auto; max-width: 80rem; display: flex; align-items: center; justify-content: space-between; padding: 20px 16px; }
  @media (min-width: 640px) { .notfound-header { padding-inline: 24px; } }
  .notfound-brand { font-size: 1.25rem; font-weight: var(--nf-w-blacker); color: var(--mkt-ink); text-decoration: none; }
  .notfound-badge { border-radius: 999px; border: 1px solid var(--mkt-border-200); background: #fff; padding: 4px 12px; font-size: 0.75rem; font-weight: var(--nf-w-blacker); text-transform: uppercase; color: var(--mkt-text-500); }
  .notfound-main { padding: 32px 16px 64px; }
  @media (min-width: 640px) { .notfound-main { padding-inline: 24px; padding-block-start: 56px; } }
  .notfound-grid { margin-inline: auto; max-width: 80rem; display: grid; gap: 32px; align-items: center; grid-template-columns: 1fr; }
  @media (min-width: 1024px) { .notfound-grid { grid-template-columns: 0.86fr 1fr; } }
  .notfound-eyebrow { font-size: 0.875rem; font-weight: var(--nf-w-bolder); text-transform: uppercase; color: var(--nf-primary-dark); }
  .notfound-title { margin-block-start: 16px; max-width: 42rem; font-size: 2.25rem; font-weight: var(--nf-w-blacker); line-height: 1.2; color: var(--mkt-ink); }
  @media (min-width: 640px) { .notfound-title { font-size: 3rem; } }
  @media (min-width: 1024px) { .notfound-title { font-size: 3.75rem; } }
  .notfound-lede { margin-block-start: 20px; max-width: 36rem; font-size: 1.125rem; line-height: 1.75; color: var(--mkt-text-700); }
  .notfound-actions { margin-block-start: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
  .notfound-aside { border-radius: var(--nf-radius-lg); border: 1px solid var(--mkt-border-200); background: #fff; padding: 20px; box-shadow: 0 1px 2px rgb(0 0 0 / 5%); }
  .notfound-aside-inner { border-radius: var(--nf-radius-lg); background: #f7f9fb; padding: 16px; }
  .notfound-aside-eyebrow { font-size: 0.75rem; font-weight: var(--nf-w-blacker); text-transform: uppercase; color: var(--nf-primary-dark); }
  .notfound-aside-title { margin-block-start: 12px; font-size: 1.5rem; font-weight: var(--nf-w-blacker); color: var(--mkt-ink); }
  .notfound-aside-copy { margin-block-start: 12px; font-size: 0.875rem; line-height: 1.6; color: var(--mkt-text-600); }

  /* ---------- Small utility: session-check / oauth spinner ---------- */
  .nf-spinner {
    display: inline-block; width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid var(--mkt-border-200); border-top-color: var(--nf-primary);
    animation: nf-spin 0.8s linear infinite;
  }
}