/* Landing-page components.
 *
 * Extracted verbatim from the delivered `network-put-to-work` page on 2026-08-17, which is
 * the page Lara designed and the one every /lp/ page is measured against. It is shared
 * rather than copied because the four campaign pages are structurally identical — same
 * hero, same "your network is your moat" section, same testimonials, same closing band —
 * and four copies of this file would drift within a month.
 *
 * The tokens it reads (--clay-*, --cream-*, --taupe-*, --font-*) are declared in
 * tokens.css, which is generated from the design system. Colour and type belong there;
 * this file is layout and component shape.
 *
 * Adding a component: put it here if a second page could plausibly want it, and in the
 * page's own <style> block if not. Both are served; neither is imported anywhere.
 */

/* ============================================================
     GOODWORD , branded landing draft
     Normalized from the Product Builder's prototype; skin swapped
     to the real Goodword design system (DESIGN.md tokens).
     The licensed brand fonts (Domaine Display/Text, Haas Grotesk)
     are loaded by shared/fonts.css, which the build links ahead
     of this file. Georgia / system-ui are fallbacks only.
     ============================================================ */

  :root {
    /* Neutrals , cream canvas & borders */
    --cream-0: oklch(1.0 0.0 0);
    --cream-100: oklch(0.9868 0.0079 73.746);
    --cream-200: oklch(0.9562 0.0176 73.076);
    --cream-300: oklch(0.9144 0.027 69.278);
    --cream-600: oklch(0.6849 0.0443 72.898);

    /* Neutrals , taupe text & elevated surfaces */
    --taupe-50:  oklch(0.986 0.002 67.8);
    --taupe-100: oklch(0.96 0.002 17.2);
    --taupe-600: oklch(0.438 0.017 39.3);
    --taupe-700: oklch(0.367 0.016 35.7);
    --taupe-800: oklch(0.268 0.011 36.5);
    --taupe-900: oklch(0.214 0.009 43.1);

    /* Clay , the only CTA color */
    --clay-100: oklch(0.9095 0.0393 74.779);
    --clay-500: oklch(0.6006 0.1138 43.755);
    --clay-700: oklch(0.4261 0.1542 33.762);
    --clay-800: oklch(0.3524 0.1190 30.115);

    /* Canopy , brand accent, icons & badges only */
    --canopy-100: oklch(0.98 0.024 119);
    --canopy-900: oklch(0.38 0.103 141);

    /* Categorical tints , low-emphasis content tagging only */
    --apricot-100: oklch(0.92 0.071 78);
    --teal-100: oklch(0.92 0.070 182);
    --wisteria-100: oklch(0.92 0.060 315);

    /* Claude integration accent , purple kept ONLY for the Claude mark */
    --claude-purple: oklch(0.55 0.20 295);

    /* Marquee band , homepage's logo-wall + press ticker background (documented
       in apps/webflow/docs/homepage-styling.md). This is the kit's inkstone-100, which
       converts to exactly #eff1ff, so the band follows the design system if inkstone
       is ever retuned. */
    --lp-logowall-band: var(--inkstone-100);

    /* Type */
    --font-head: "Domaine Display", "Domaine Text", Georgia, serif;
    --font-body: "Haas Grotesk Text Web", system-ui, -apple-system, sans-serif;

    /* Radius tokens */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-2xl: 20px;
    --r-3xl: 24px;
    --r-4xl: 44px;

    /* Floating-UI shadow vocabulary (DESIGN.md) */
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    /* The warm shadow tint, once. Every warm-toned shadow on this page mixes from
       this, so there is one shadow colour rather than three hand-picked ones. */
    --shadow-tint: var(--taupe-900);
    --shadow-float: 0 30px 60px -28px color-mix(in oklch, var(--shadow-tint) 45%, transparent);
    /* One soft resting-card shadow, shared by every card on the page so the
       card system reads as a single material. Warm-toned, low, gentle. */
    --shadow-card: 0 1px 2px color-mix(in oklch, var(--shadow-tint) 5%, transparent),
                   0 10px 24px -14px color-mix(in oklch, var(--shadow-tint) 22%, transparent);

    /* ---- Unified card spec (single source of truth) ---------------------
       radius: --r-2xl (20px) · border: 1px cream-300 · surface: cream-100
       shadow: --shadow-card. Anchored to the product ScreenFrame's calm feel
       and applied to every card: value cards, testimonial quotes, FAQ items. */
    --card-radius: var(--r-2xl);
    --card-border: 1px solid var(--cream-300);
    --card-surface: var(--cream-100);
  }

  * { box-sizing: border-box; }

  /* Only Haas Grotesk 400 and 500 are licensed; there is no bold cut. Without this, a rule
     asking for 600 or 700 makes the browser smear the 500 into a fake bold. With it, those
     rules render as clean Medium. (Before fonts.css loaded the brand files, the system sans
     supplied a real semibold, which is why this never showed.) */
  html { -webkit-text-size-adjust: 100%; font-synthesis-weight: none; }

  body {
    margin: 0;
    background: var(--cream-100);
    color: var(--taupe-800);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Backstop only , applied AFTER fixing root causes below */
    overflow-x: clip;
  }

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

  /* Media never forces overflow */
  img, svg { max-width: 100%; }

  /* Long prose wraps cleanly; headings balance (set per-token too) */
  p { text-wrap: pretty; }

  /* ---------- Layout primitives ---------- */
  .container { max-width: 1200px; margin: 0 auto; padding-inline: 28px; }
  .container--narrow { max-width: 760px; }
  .container--wide { max-width: 1140px; }
  /* Hero uses a wider container so the product visual can be larger; nav shares
     it so the logo stays aligned with the headline. */
  .hero .container { max-width: 1340px; }
  /* Consistent vertical rhythm: one padding scale for every full section
     so gaps read as calm and deliberate, not random. */
  .section { padding-block: 96px; }

  /* ---------- Type system ---------- */
  .heading-6xl {
    font-family: var(--font-head); font-weight: 400;
    font-size: clamp(38px, 4.6vw, 62px); line-height: 1.05;
    letter-spacing: -0.03em; color: var(--taupe-900);
    margin: 0; text-wrap: balance;
  }
  .heading-4xl {
    font-family: var(--font-head); font-weight: 400;
    font-size: clamp(32px, 4.4vw, 52px); line-height: 1.04;
    letter-spacing: -0.025em; color: var(--taupe-900);
    margin: 0; text-wrap: balance;
  }
  .heading-2xl {
    font-family: var(--font-head); font-weight: 400;
    font-size: 24px; line-height: 1.33; letter-spacing: -0.025em;
    color: var(--taupe-900); margin: 0;
  }
  .heading-lg {
    font-family: var(--font-head); font-weight: 400;
    font-size: 20px; line-height: 1.3; letter-spacing: -0.02em;
    color: var(--taupe-900); margin: 0;
  }
  .lede { font-size: 20px; line-height: 1.5; color: var(--taupe-700); }
  .body { font-size: 16px; line-height: 1.55; color: var(--taupe-700); }
  .body-sm { font-size: 14px; line-height: 1.45; color: var(--taupe-700); }
  .meta { font-size: 14px; color: var(--taupe-600); }

  /* Section label , a named brand kicker, used as a deliberate rhythm,
     toned to clay. (Not an all-caps tracked eyebrow on EVERY section:
     reused as one consistent system element.) */
  .kicker {
    font-family: var(--font-body); font-size: 13px; font-weight: 500;
    letter-spacing: 0.06em; color: var(--clay-700);
  }

  /* ---------- Buttons (pill, clay is the only CTA color) ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    border-radius: var(--r-4xl); font-family: var(--font-body);
    font-weight: 500; cursor: pointer; border: none;
    transition: background-color 150ms ease, color 150ms ease;
    white-space: nowrap;
  }
  .btn-primary { background: var(--clay-700); color: var(--cream-100); }
  .btn-primary:hover { background: var(--clay-800); }
  /* On-dark variant for the closing card: cream surface, clay LinkedIn icon */
  .btn-on-dark { background: var(--cream-100); color: var(--taupe-900); }
  .btn-on-dark:hover { background: var(--cream-200); }
  .btn-lg { height: 58px; padding: 0 30px; font-size: 18px; }
  .btn-md { height: 52px; padding: 0 26px; font-size: 17px; }
  .btn-sm { height: 42px; padding: 0 18px; font-size: 15px; }
  .btn-text {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--clay-700); font-weight: 500; font-size: 16px;
    transition: color 150ms ease;
  }
  .btn-text:hover { color: var(--clay-800); }
  .link-quiet { color: var(--taupe-700); font-weight: 500; transition: color 150ms ease; }
  .link-quiet:hover { color: var(--taupe-900); }

  /* ---------- Icon glyphs (inline SVG, currentColor) ---------- */
  .ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; }

  /* ---------- Logo ---------- */
  .logo { display: inline-flex; align-items: center; gap: 9px; }
  /* The lockup is a link on every page, and on /lp/get-started it is the only one above
     the fold. Same restraint the press logos get (.trust__logo below): a slight fade, not
     a colour change, because a brand mark does not get recoloured on hover.
     The ring is SOLID clay, not clay at 50%. The faded version was measured at 2.7:1
     against cream — under the 3:1 floor a focus indicator has to clear, and worse than the
     browser default it replaced, which came in at 5.3:1. Solid clay measures 7.8:1. A ring
     that only looks like the house style is not a focus indicator. */
  a.logo { transition: opacity 150ms ease; }
  a.logo:hover { opacity: 0.85; }
  a.logo:focus-visible {
    outline: 3px solid var(--clay-700);
    outline-offset: 4px;
    border-radius: 4px;
  }
  /* Real Goodword lockup (icon + wordmark), viewBox 139x21: set height, width auto */
  .logo__lockup { height: 24px; width: auto; display: block; }
  /* Placeholder tile + wordmark (footer still uses these) */
  .logo__tile {
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--canopy-900); color: var(--canopy-100);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
  }
  .logo__word {
    font-family: var(--font-head); font-weight: 400; font-size: 23px;
    letter-spacing: -0.02em; color: var(--taupe-900);
  }

  /* ---------- Nav ---------- */
  .nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding-top: 26px;
  }
  .nav__actions { display: flex; align-items: center; gap: 18px; }

  /* ---------- Hero ---------- */
  /* Luma / Granola pattern: a confident two-column above-the-fold band.
     Copy sits LEFT (left-aligned), the product video sits RIGHT, the two
     columns vertically centered on a warm cream field that eases down into
     cream-100 so it flows seamlessly into the proof band below. */
  .hero {
    position: relative;
    isolation: isolate;
    /* Full-bleed right: the hero background must match the video's OWN baked-in
       canvas (keyimage-v9.html: radial warm cream #fffaf3 -> #f7eee2 -> #eee2d3)
       so the feathered video edges dissolve into the header with no visible
       rectangle. The radial is biased toward the right where the visual sits,
       then eases down into cream-100 at the base so it flows into the proof
       band below. overflow-x: clip lets the visual bleed past the right edge
       without ever creating horizontal scroll. */
    overflow-x: clip;
    background:
      linear-gradient(180deg, var(--cream-200) 0%, var(--cream-200) 46%, var(--cream-100) 100%);
  }
  /* The two-column grid: copy LEFT (comfortably readable), the product visual
     RIGHT and given the larger share so it dominates. min-height lets the band
     roughly fill the first viewport; nav row + rhythm accounted for so it
     never overshoots. The right column is allowed to bleed to/past the viewport
     edge via the media rules below. */
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    /* Leave room for nav + the trust/press strip so the whole unit fits within
       the first screen on a typical laptop (~820 tall). */
    min-height: min(560px, calc(100vh - 300px));
    padding-block: 28px 20px;
  }
  /* Copy block: LEFT column, left-aligned (Granola/Luma). */
  .hero__copy {
    text-align: left;
    max-width: 560px;
  }
  .hero__lede { margin: 24px 0 0; max-width: 480px; }
  .hero__fine { margin-top: 20px; }
  .hero__cta-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 18px; margin-top: 34px;
  }
  /* The toned-down headline word: solid clay-700. No gradient text. */
  .hero__accent { color: var(--clay-700); }

  /* ---------- Hero media (RIGHT column) ---------- */
  /* Holds the product loop. NOT a boxed card: no surface, no border, no shadow.
     The visual is large and bleeds to / just past the right viewport edge for
     the Granola immersive feel. It escapes the wide container on the right by
     stretching its width beyond the column and pulling right with a negative
     margin; the hero's overflow-x: clip absorbs the bleed with zero scroll.
     Alignment is centered vertically, right-anchored horizontally. */
  .hero__media {
    display: flex; justify-content: flex-end; align-items: center;
    min-width: 0;
    /* Break out to the right viewport edge. The video's own right padding is
       empty canvas beyond the Claude card, so anchoring the frame's right edge
       at the viewport lets the whole composition (icons, Goodword + Claude
       cards) stay visible while the warm background bleeds to the edge. */
    margin-right: 0;
  }
  /* Both loops: frameless. Feather every edge with a soft mask so the
     rectangular video dissolves into the matching warm header background, and
     size the desktop crop LARGE so the Goodword card, Claude card and source
     icons all read clearly. */
  .hero-d, .hero-m, .hero-poster {
    width: 100%; height: auto; display: block;
    object-fit: contain;
    /* No box: frame, radius and shadow removed. */
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    /* Base modest feather (kept gentle for the centered mobile crop). */
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(to right,  transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
            mask-composite: intersect;
  }
  /* Desktop crop: bleed off the right, so feather the IN-VIEW edges (left, top,
     bottom) generously to fully dissolve the rectangle; right stays minimal
     since it runs off-screen. Left/bottom have wide empty canvas before the
     cards, so a big feather never touches the product UI. */
  .hero-d {
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0, #000 52px, #000 calc(100% - 34px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 60px), transparent 100%);
            mask-image:
      linear-gradient(to right,  transparent 0, #000 52px, #000 calc(100% - 34px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 60px), transparent 100%);
  }
  /* Desktop 16:9: much larger than the copy, allowed to run wider than its
     column so it fills the right of the header and bleeds to the viewport edge. */
  .hero-d { width: 100%; max-width: 900px; }
  .hero-m { max-width: 340px; margin-inline: auto; }
  /* Default (motion allowed): show desktop crop, hide mobile crop + posters */
  .hero-m { display: none; }
  .hero-poster { display: none; margin-inline: auto; }
  .hero-poster-d { width: 100%; max-width: 900px; }
  .hero-poster-m { max-width: 340px; }

  /* ---------- Mobile: stack (copy on top, 9:16 video below) ---------- */
  @media (max-width: 700px) {
    .hero__grid {
      grid-template-columns: 1fr;
      gap: 28px;
      min-height: 0;
      padding-block: 24px 8px;
    }
    .hero__copy { max-width: 620px; }
    /* Stacked: no right-bleed. Center the vertical video, frameless + feathered
       on the same warm background. Larger but sensible width. */
    /* Full-bleed: break out of the container padding and center on the
       viewport so the landscape crop reads large; feathered edges dissolve
       into the cream. */
    .hero__media { width: 100vw; margin-inline: calc(50% - 50vw); justify-content: center; padding-bottom: 8px; }
    /* Mobile: dynamic landscape video crop, full-bleed. */
    .hero-d { display: none; }
    .hero-m { display: block; width: min(640px, 100vw); max-width: 100%; }
    .hero-poster-d, .hero-poster-m { display: none; }
  }

  /* ---------- Hero mockup (product-UI-in-HTML, recolored to brand) ---------- */
  .stage { position: relative; width: min(100%, clamp(300px, 40vw, 540px)); aspect-ratio: 1; }
  .stage__halo {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, var(--clay-100) 0%, var(--apricot-100) 48%, var(--cream-200) 100%);
    overflow: hidden;
  }
  .phone {
    position: absolute; left: 50%; top: 8%; transform: translateX(-50%);
    width: 60%; max-width: 280px; background: var(--taupe-900);
    border-radius: 42px; padding: 9px; box-shadow: var(--shadow-float); z-index: 3;
  }
  .phone__screen { background: var(--cream-100); border-radius: 34px; overflow: hidden; }
  .phone__statusbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 18px 4px; font-size: 12px; font-weight: 500; color: var(--taupe-900);
  }
  .phone__appbar {
    display: flex; align-items: center; justify-content: space-between; padding: 8px 14px;
    font-size: 13px; color: var(--taupe-700);
  }
  .phone__appbar-left { display: flex; align-items: center; gap: 6px; color: var(--taupe-600); }
  .phone__appbar-right { display: flex; align-items: center; gap: 9px; }
  .phone__add { font-weight: 500; color: var(--clay-700); }
  .reminder {
    margin: 4px 12px 0; border-radius: var(--r-xl);
    background: var(--apricot-100); padding: 18px 16px 16px; position: relative; overflow: hidden;
  }
  .reminder__label {
    font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--clay-800);
  }
  .reminder__name {
    font-family: var(--font-head); font-weight: 400; font-size: 23px; line-height: 1.05;
    letter-spacing: -0.02em; color: var(--clay-800); margin-top: 6px;
  }
  .reminder__row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
  .reminder__avatar {
    width: 42px; height: 42px; border-radius: 50%; background: var(--cream-100);
    color: var(--clay-700); display: flex; align-items: center; justify-content: center;
    font-weight: 500; font-size: 15px; box-shadow: var(--shadow-md);
  }
  .reminder__chip {
    display: inline-flex; align-items: center; gap: 5px; background: color-mix(in oklab, var(--cream-0) 70%, transparent);
    border-radius: var(--r-4xl); padding: 4px 10px; font-size: 11px; font-weight: 500; color: var(--clay-800);
  }
  .phone__details { padding: 14px 16px 4px; }
  .phone__title {
    font-family: var(--font-head); font-weight: 400; font-size: 18px;
    letter-spacing: -0.02em; color: var(--taupe-900);
  }
  .phone__sub { font-size: 12px; color: var(--taupe-600); margin-top: 3px; }
  .phone__when { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
  .phone__date { text-align: center; color: var(--clay-700); }
  .phone__date-m { font-size: 10px; font-weight: 500; letter-spacing: 0.08em; }
  .phone__date-d { font-family: var(--font-head); font-size: 22px; line-height: 1; }
  .phone__whenText { font-size: 12.5px; color: var(--taupe-700); line-height: 1.45; }
  .phone__whenText span { color: var(--taupe-600); }
  .phone__footer {
    display: flex; align-items: center; justify-content: space-between;
    margin: 12px; padding: 10px 12px; background: var(--cream-200); border-radius: var(--r-lg);
  }
  .stack { display: flex; }
  .stack__dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--cream-100); }
  .stack__dot + .stack__dot { margin-left: -8px; }
  .phone__mutual { font-size: 11.5px; color: var(--taupe-700); text-align: right; }
  .phone__mutual strong { font-weight: 500; color: var(--taupe-900); }

  /* Floating chips , recolored to brand; motion gated below */
  .float {
    position: absolute; z-index: 4;
    transform: rotate(var(--r, 0deg)) translateY(0);
    animation: gwFloat 5.6s ease-in-out infinite;
    will-change: transform;
  }
  .float--tile {
    width: 54px; height: 54px; border-radius: var(--r-xl);
    display: flex; align-items: center; justify-content: center; font-size: 24px;
  }
  .float--round {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
  }
  .float--pill {
    background: var(--cream-100); border-radius: var(--r-4xl);
    padding: 7px 12px 7px 8px; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-lg);
  }
  .float--card {
    background: var(--cream-100); border-radius: var(--r-lg);
    padding: 9px 12px; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-lg);
  }
  .float-bell  { left: -2%;  top: 20%; --r: -8deg; background: var(--canopy-100); color: var(--canopy-900); box-shadow: var(--shadow-lg); animation-duration: 5s; }
  .float-date  { right: 0%;  top: 13%; --r: 9deg;  background: var(--clay-100); color: var(--clay-800); box-shadow: var(--shadow-lg); animation-duration: 6s; animation-delay: .6s; flex-direction: column; }
  .float-spark { right: -6%; top: 48%; --r: 6deg;  background: var(--clay-700); color: var(--cream-100); box-shadow: var(--shadow-lg); animation-duration: 5.5s; animation-delay: .3s; }
  .float-reply { left: -8%;  top: 54%; --r: -5deg; animation-duration: 6.4s; animation-delay: .9s; }
  .float-count { left: 8%;   bottom: 4%; --r: -4deg; animation-duration: 5.8s; animation-delay: .4s; }
  .float-globe { right: 4%;  bottom: 10%; --r: 7deg; width: 46px; height: 46px; border-radius: 50%; background: var(--apricot-100); color: var(--clay-800); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: var(--shadow-lg); animation-duration: 6.1s; animation-delay: .7s; }
  .float-date__m { font-size: 9px; font-weight: 500; }
  .float-date__d { font-family: var(--font-head); font-size: 20px; line-height: 1; }
  .float-mini {
    width: 26px; height: 26px; border-radius: 50%; background: var(--canopy-100); color: var(--canopy-900);
    display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 11px;
  }
  .float-reply__text { font-size: 11.5px; color: var(--taupe-900); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
  .float-count__avs { display: flex; }
  .float-count__av { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cream-100); }
  .float-count__av + .float-count__av { margin-left: -7px; }
  .float-count__text { font-size: 12px; font-weight: 500; color: var(--taupe-900); white-space: nowrap; }

  @keyframes gwFloat {
    0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); }
    50%      { transform: rotate(var(--r, 0deg)) translateY(-14px); }
  }
  @keyframes gwPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

  /* Star rating glyph , reused by the testimonial quotes */
  .stars { color: var(--clay-700); letter-spacing: 1px; font-size: 14px; }

  /* ---------- Hero social-proof strip ---------- */
  /* Compact strip at the bottom of the hero, inside the first screen: the
     moved-up founders line, then a low-key company logo row. Left-aligned to
     match the hero copy; a hairline divider sets it a beat below the grid. */
  .trust {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 20px;
    text-align: center;
  }
  .trust__line {
    margin: 0;
    font-size: 15px; font-weight: 500; line-height: 1.4;
    color: var(--taupe-600);
  }
  .trust__logos-wrap {
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; margin-top: 0;
  }
  .trust__label {
    font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--taupe-600);
    flex: none;
  }
  .trust__logos {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 16px 30px;
  }
  .trust__logos li { display: flex; align-items: center; }
  /* Uniform optical height, muted grayscale so the row reads as one calm proof
     bar. SVGs keep their aspect: height set, width auto. Matches the homepage
     logo wall: 35px tall, 0.55 opacity, sitting on the blue band below. */
  .trust__logo {
    height: 35px; width: auto; max-width: 100%; display: block;
    object-fit: contain;
    opacity: 0.55;
    transition: opacity 150ms ease;
  }
  .trust__logo:hover { opacity: 0.85; }

  /* ---------- Logo marquee (matches the goodword.com homepage treatment) ----------
     Continuous scroll: the track holds two identical <ul> lists back to back and
     translateX(-50%) walks exactly one list-width before looping, so the seam is
     invisible. Pauses on hover. The blue band (--lp-logowall-band) lives on
     .trust__marquee itself; the edge fade is two gradient overlays (band colour
     -> transparent) layered on top of the track rather than a mask on the band,
     so the corners stay solid blue and only the logos fade into them. */
  .trust__marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: var(--lp-logowall-band);
    border-radius: var(--r-md);
    padding: 24px 0;
  }
  .trust__track {
    display: flex;
    width: max-content;
    animation: trust-marquee 36s linear infinite;
  }
  .trust__marquee:hover .trust__track { animation-play-state: paused; }
  @keyframes trust-marquee { to { transform: translateX(-50%); } }
  .trust__track .trust__logos {
    flex-wrap: nowrap; width: max-content; max-width: none; margin: 0;
    gap: 16px 30px; padding-right: 30px; /* seam = internal column gap, even spacing */
  }
  .trust__track .trust__logos li { flex: 0 0 auto; }
  /* Optical bumps: these lockups sit at very different native aspect ratios than the
     rest of the row; clamp() keeps them reading at the same size as the uniform 35px
     logos while still scaling down with the viewport. Keyed on a modifier class, not
     the alt text, so correcting a company's name can never silently drop its sizing.
     OpenAI's PNG is mostly padding (about 42% of its height is ink), so it takes the
     same 1.35x bump the homepage logo wall gives it; the negative block margin hands
     the extra height back so the band stays exactly as tall as before. */
  .trust__logo--openai   { height: clamp(40px, 4vw, 47px); margin-block: -6px; }
  .trust__logo--jpmorgan { height: clamp(26px, 2.6vw, 31px); transform: translateY(2px); }
  .trust__logo--clay     { height: clamp(30px, 3vw, 35px); }
  .trust__logo--rho      { height: clamp(29px, 2.9vw, 34px); }
  /* Edge fade: two absolutely-positioned overlays, blue band colour fading to
     transparent, laid over the track so logos fade into the band instead of
     hard-cutting. Sit above the track (z-index) but never intercept clicks. */
  .trust__fade {
    position: absolute;
    top: 0; bottom: 0;
    width: 64px; max-width: 12%;
    pointer-events: none;
    z-index: 1;
  }
  .trust__fade--left {
    left: 0;
    background: linear-gradient(90deg, var(--lp-logowall-band), transparent);
  }
  .trust__fade--right {
    right: 0;
    background: linear-gradient(270deg, var(--lp-logowall-band), transparent);
  }
  @media (prefers-reduced-motion: reduce) {
    .trust__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
    .trust__track .trust__logos {
      flex-wrap: wrap; width: auto; max-width: 100%; justify-content: center;
      padding: 0 20px; /* breathing room from the band's rounded corners once wrapped */
    }
    .trust__track .trust__logos + .trust__logos { display: none; }
    /* The wrapped static row has no single "edge" to fade; the overlays would
       just fade whichever logo lands in each wrapped line's left/right column,
       so drop them and let the wrapped grid sit flush within the band's own
       padding instead. */
    .trust__fade { display: none; }
  }

  /* ---------- Centered section heads ---------- */
  .head-center { text-align: center; max-width: 740px; margin: 0 auto; }
  .head-center .heading-4xl { margin-top: 14px; }
  .head-center .lede { margin-top: 16px; }

  /* ---------- Value cards ---------- */
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 48px; }
  .card {
    background: var(--card-surface); border: var(--card-border);
    border-radius: var(--card-radius); box-shadow: var(--shadow-card);
    padding: 28px; display: flex; flex-direction: column;
  }
  .card__icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
  }
  .card__icon--clay   { background: var(--clay-100); color: var(--clay-800); }
  .card__icon--canopy { background: var(--canopy-100); color: var(--canopy-900); }
  .card__icon--teal   { background: var(--teal-100); color: var(--taupe-800); }
  .card .heading-lg { margin-top: 18px; }
  .card__body { margin-top: 9px; font-size: 14.5px; line-height: 1.58; color: var(--taupe-700); }

  /* ---------- How it works (banded, raised cream) ---------- */
  .band { background: var(--cream-200); }
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 48px; }
  .step__num {
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--clay-700); color: var(--cream-100);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 400; font-size: 20px;
  }
  .step .heading-lg { margin-top: 16px; font-size: 18px; }
  .step__body { margin-top: 8px; font-size: 14.5px; line-height: 1.58; color: var(--taupe-700); }
  .center-cta { text-align: center; margin-top: 44px; }
  .center-cta .meta { margin-top: 14px; }

  /* ---------- Testimonials (raised cream field) ---------- */
  /* The second warm tone in the page rhythm: a subtle raised cream-200 field,
     soft-faded into cream-100 at top and bottom (same seamless philosophy as
     the #why bloom) so it reads as a calm continuation, not a striped band. */
  #stories { position: relative; isolation: isolate; }
  #stories::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-color: color-mix(in oklch, var(--cream-200) 80%, var(--cream-100));
    background-image:
      radial-gradient(78% 58% at 50% 42%, color-mix(in oklch, var(--cream-300) 34%, transparent) 0%, transparent 72%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
  }

  .quote {
    background: var(--card-surface); border: var(--card-border);
    border-radius: var(--card-radius); box-shadow: var(--shadow-card);
    padding: 28px; display: flex; flex-direction: column;
  }
  .quote__text { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--taupe-800); flex: 1; }
  .quote__who { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
  .quote__avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; overflow: hidden; flex: none; }
  /* Real testimonial photos fill the circular avatar slot without distortion */
  .quote__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
  .quote__name { font-size: 14px; font-weight: 500; color: var(--taupe-900); }
  .quote__role { font-size: 13px; color: var(--taupe-600); }

  /* ---------- FAQ accordion ---------- */
  .faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
  .faq {
    background: var(--card-surface); border: var(--card-border);
    border-radius: var(--card-radius); box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px; cursor: pointer; list-style: none;
    font-size: 16.5px; font-weight: 500; color: var(--taupe-900);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq__icon { color: var(--taupe-600); font-size: 18px; transition: transform 200ms ease; flex: none; }
  .faq[open] .faq__icon { transform: rotate(45deg); }
  .faq__answer { padding: 0 22px 20px; font-size: 15px; line-height: 1.6; color: var(--taupe-700); margin: 0; }
  /* Solid clay for the same reason as a.logo above: clay at 50% measures 2.7:1 on cream,
     under the 3:1 floor for a focus indicator. Pre-existing, fixed here because it is the
     same one-line defect and leaving it while correcting the copy of it is indefensible. */
  .faq summary:focus-visible { outline: 3px solid var(--clay-700); outline-offset: -3px; }

  /* ---------- Closing CTA (dark surface , taupe-900) ---------- */
  /* The dark card is the deliberate contrast beat, but its arrival is eased:
     a faint warm bloom rises behind the card's upper edge so the dark surface
     emerges from the cream rather than being abruptly dropped onto it. */
  .closing {
    position: relative; isolation: isolate;
    padding: 40px 28px 96px;
  }
  .closing::before {
    content: ""; position: absolute; inset: -40px 0 40% 0; z-index: -1; pointer-events: none;
    background: radial-gradient(70% 100% at 50% 100%,
      color-mix(in oklch, var(--clay-100) 34%, transparent) 0%,
      color-mix(in oklch, var(--cream-200) 50%, transparent) 45%,
      transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 100%);
  }
  .closing__card {
    background: var(--taupe-900); border-radius: var(--r-3xl);
    padding: 72px 40px; text-align: center; position: relative; overflow: hidden;
  }
  .closing__glow {
    position: absolute; inset: auto -10% -60% -10%; height: 80%;
    background: radial-gradient(closest-side, color-mix(in oklch, var(--clay-700) 38%, transparent), transparent 70%);
  }
  .closing__inner { position: relative; z-index: 1; }
  .closing__stars { color: var(--clay-100); letter-spacing: 1px; font-size: 15px; }
  .closing .heading-4xl { color: var(--cream-100); margin-top: 14px; }
  .closing__lede { margin-top: 16px; font-size: 18px; color: var(--cream-300); max-width: 480px; margin-inline: auto; }
  .closing__cta { margin-top: 30px; }
  .closing__fine { margin-top: 16px; font-size: 13.5px; color: var(--cream-600); }
  /* Bottom email capture (hands off to signup with the email prefilled) */
  .capture { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; max-width: 520px; margin: 0 auto; }
  .capture__input { flex: 1 1 240px; min-width: 0; height: 52px; border-radius: 44px; border: 1px solid var(--cream-300); background: var(--cream-100); color: var(--taupe-900); padding: 0 20px; font-family: var(--font-body); font-size: 16px; outline: none; }
  .capture__input::placeholder { color: var(--taupe-600); }
  .capture__input:focus { border-color: var(--clay-700); box-shadow: 0 0 0 3px color-mix(in oklch, var(--clay-700) 25%, transparent); }
  .capture__btn { flex: 0 0 auto; white-space: nowrap; }
  .capture__alt { display: inline-block; margin-top: 14px; color: var(--cream-300); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
  .capture__alt:hover { color: var(--cream-100); }
  @media (max-width: 540px) { .capture { flex-direction: column; } .capture__input, .capture__btn { width: 100%; } }
  /* ---------- Floating capture pop-up (fixed bottom-right, follows scroll) ---------- */
  .gw-pop { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 340px; max-width: calc(100vw - 32px); background: var(--cream-100); border: 1px solid var(--cream-300); border-radius: 20px; box-shadow: 0 18px 50px -12px color-mix(in oklch, var(--shadow-tint) 28%, transparent), 0 4px 12px color-mix(in oklch, var(--shadow-tint) 10%, transparent); padding: 20px 20px 18px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
  .gw-pop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .gw-pop__x { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: var(--taupe-600); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; border-radius: 6px; }
  .gw-pop__x:hover { color: var(--taupe-900); background: var(--cream-200); }
  .gw-pop__title { margin: 0 24px 2px 0; font-family: var(--font-head); font-size: 19px; color: var(--taupe-900); letter-spacing: -.01em; }
  .gw-pop__sub { margin: 0 0 12px; font-size: 13.5px; color: var(--taupe-600); }
  .gw-pop__form { display: flex; flex-direction: column; gap: 8px; }
  .gw-pop__input { height: 46px; border-radius: 44px; border: 1px solid var(--cream-300); background: var(--cream-0); color: var(--taupe-900); padding: 0 16px; font-family: var(--font-body); font-size: 15px; outline: none; }
  .gw-pop__input:focus { border-color: var(--clay-700); box-shadow: 0 0 0 3px color-mix(in oklch, var(--clay-700) 22%, transparent); }
  .gw-pop__btn { width: 100%; justify-content: center; height: 46px; }
  .gw-pop__status { min-height: 18px; margin: 0; color: var(--taupe-700); font-size: 13px; line-height: 1.35; }
  .gw-pop__status[data-state="error"] { color: var(--clay-700); }
  .gw-pop__btn[disabled] { cursor: wait; opacity: .72; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .quote__avatar--initials { display: inline-grid; place-items: center; background: var(--cream-300); color: var(--clay-700); font-family: var(--font-head); font-size: 20px; }
  .ai-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px; }
  .ai-player { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--cream-300); border-radius: var(--r-4xl); background: var(--cream-100); color: var(--taupe-700); font-size: 11px; font-weight: 600; box-shadow: var(--shadow-card); }
  .ai-player svg { width: 12px; height: 12px; flex: none; }
  /* Mobile: slim sticky bottom bar instead of a big card (less weighted) */
  @media (max-width: 600px) {
    .gw-pop { right: 0; left: 0; bottom: 0; width: auto; max-width: none; border-radius: 16px 16px 0 0; padding: 11px 14px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px -10px color-mix(in oklch, var(--shadow-tint) 22%, transparent); }
    .gw-pop__x { top: 8px; right: 10px; }
    .gw-pop__title { font-size: 14px; margin: 0 26px 0 0; }
    .gw-pop__sub { display: none; }
    .gw-pop__form { flex-direction: row; gap: 8px; margin-top: 8px; }
    .gw-pop__input { flex: 1 1 auto; min-width: 0; height: 44px; }
    .gw-pop__btn { width: auto; flex: 0 0 auto; white-space: nowrap; padding: 0 16px; height: 44px; }
  }
  @media (prefers-reduced-motion: reduce) { .gw-pop { transition: opacity .2s ease; transform: none; } }
  .closing .btn-on-dark .ico { color: var(--clay-700); }

  /* ---------- Footer ---------- */
  .footer { border-top: 1px solid var(--cream-300); padding: 28px; }
  .footer__inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
    max-width: 1140px; margin: 0 auto;
  }
  .footer__brand { display: flex; align-items: center; gap: 9px; }
  .footer__copy { font-size: 13px; color: var(--taupe-600); margin-left: 8px; }
  .footer__links { display: flex; gap: 22px; font-size: 13.5px; color: var(--taupe-600); }
  .footer__links a { transition: color 150ms ease; }
  .footer__links a:hover { color: var(--taupe-900); }
  .logo--sm .logo__tile { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
  .logo--sm .logo__word { font-size: 18px; }

  /* ---------- Responsive ----------
     Root-cause fixes for phone/tablet, not overflow masking:
     - hero stacks; art gets its own contained band so chips never
       collide with the proof band or the following section
     - floating chips pulled inside the stage box (they use negative
       offsets that poke past the viewport on narrow screens)
     - nav condenses: "Sign in" drops, clay CTA shrinks + relabels
     - closing glow constrained so it can't create horizontal scroll
  */

  /* Tablet only (above the mobile stack): tighten the two-column gap and
     column ratio so the copy keeps room and the video does not crush the
     headline. Scoped to >700px so it never overrides the mobile stack below. */
  @media (min-width: 701px) and (max-width: 900px) {
    .hero__grid {
      gap: 36px;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      min-height: 0;
      padding-block: 28px 56px;
    }
  }

  @media (max-width: 768px) {
    .section { padding-block: 64px; }
    /* Nav: shrink CTA, hide standalone Sign in (reachable via same auth flow) */
    .nav { gap: 12px; }
    .nav__signin { display: none; }
    .nav__cta { height: 40px; padding: 0 16px; font-size: 15px; gap: 8px; }
    .closing__glow { inset: auto 0 -60% 0; }
  }

  /* Phone */
  @media (max-width: 640px) {
    .container { padding-inline: 18px; }
    .section { padding-block: 56px; }
    .nav { padding-top: 20px; }
    .nav__actions { gap: 12px; }
    .hero__cta-row { gap: 14px; margin-top: 28px; }
    .btn-lg { height: 52px; padding: 0 24px; font-size: 16px; }
    .lede { font-size: 18px; }

    /* Contain the hero art in its own band so the tall phone can't spill
       into the proof band. The square aspect-ratio stage is too short to
       hold the absolutely-positioned phone on mobile, so we let the phone
       flow in-place (it reserves its real height) and drop the halo to a
       decorative backdrop behind the phone's upper half. */
    .hero__art { padding-block: 8px 12px; overflow: visible; }
    .stage {
      width: min(100%, 300px); margin-inline: auto;
      aspect-ratio: auto; height: auto;
      display: flex; justify-content: center; padding-top: 28px;
    }
    .stage__halo {
      inset: 0 0 auto 0; height: 62%; border-radius: 40px;
    }
    .phone {
      position: relative; left: auto; top: auto; transform: none;
      width: 62%; max-width: 240px; margin-inline: auto;
    }
    /* Chips positioned against the stage box; kept inside its width */
    .float { z-index: 4; }
    .float-bell  { left: 0%;   top: 12%; }
    .float-date  { right: 0%;  top: 6%; }
    .float-spark { right: 2%;  top: 40%; }
    .float-reply { left: 0%;   top: 46%; }
    .float-count { left: 4%;   bottom: 4%; }
    .float-globe { right: 4%;  bottom: 10%; }
    /* Reply pill can be wide; let its label wrap rather than push out */
    .float-reply__text { white-space: normal; }

    .closing__card { padding: 48px 22px; }
    .closing__glow { inset: auto 0 -60% 0; }
    .closing__lede { font-size: 17px; }
    /* Logo bar: the marquee (above) runs continuously at this breakpoint too, so
       there is no separate static grid fallback here anymore. */
  }

  /* Small phones , trim the art footprint and hide the outermost chips
     that cannot sit inside the stage without overhang */
  @media (max-width: 400px) {
    .container { padding-inline: 16px; }
    .stage { width: min(100%, 276px); }
    /* Hide the two widest chips , they can't sit inside without overhang */
    .float-reply, .float-count { display: none; }
    .float-bell  { left: 0%;  top: 10%; }
    .float-date  { right: 0%; top: 4%; }
    .float-spark { right: 0%; top: 42%; }
    .float-globe { right: 2%; bottom: 12%; }
    .hero__cta-row .btn-lg { width: 100%; justify-content: center; }
    .hero__cta-row .btn-text { padding-left: 4px; }
  }

  /* ============================================================
     MOAT PRODUCT BLOB , the three onboarding "sell" screens,
     reproduced faithfully from web-app (sell-media.tsx) and
     dramatized into one warm color-bloom moment. Marketing color
     lives in the framing (bloom, shadows); the embedded product UI
     keeps real tokens, structure, labels, and brand logo colors.
     ============================================================ */
  /* The whole #why section is the bloom host now: one warm tinted
     field carrying the kicker, headline AND the three screens, so the
     block reads as a single sectioned unit rather than a headline on
     flat cream with a detached blob below it. */
  #why {
    position: relative;
    isolation: isolate;
    /* Generous breathing room inside the tint, on the same rhythm scale as the
       other sections (a touch more at the base to seat the floated screens). */
    padding-block: 104px 112px;
    overflow-x: clip; /* only ever clip horizontally, never the captions */
  }
  /* Full-section warm bloom, soft-faded into the surrounding cream at
     top and bottom so the tint reads as a seamless field, not a band. */
  .why-bloom {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(62% 42% at 26% 30%, var(--clay-100) 0%, transparent 60%),
      radial-gradient(58% 46% at 76% 66%, var(--apricot-100) 0%, transparent 58%),
      radial-gradient(120% 90% at 50% 55%, var(--cream-200) 0%, transparent 82%);
    /* Warm tint base so the whole field is clearly "on background" */
    background-color: color-mix(in oklch, var(--cream-200) 78%, var(--cream-100));
    /* Gentle fade to nothing at the very top and bottom edges → no hard band */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 88px, #000 calc(100% - 104px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 88px, #000 calc(100% - 104px), transparent 100%);
    filter: blur(4px);
  }

  .moat-blob {
    position: relative;
    margin-top: 56px;
    display: flex;
    justify-content: center;
    /* Clip only horizontally so the staggered captions are never cut */
    overflow-x: clip;
    padding-block: 8px 0;
  }
  .moat-blob__stage {
    position: relative; z-index: 1;
    display: flex; align-items: flex-start; justify-content: center;
    gap: 30px;
    width: 100%;
  }
  /* Each screen sits in a captioned column; the column reserves its own
     vertical space so a neighbour can never sit over a caption. */
  .sellfig { margin: 0; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
  .sellfig__cap {
    margin-top: 20px; text-align: center; max-width: 300px;
    font-family: var(--font-head); font-weight: 400; font-size: 17px;
    line-height: 1.3; letter-spacing: -0.02em; color: var(--taupe-800);
  }
  /* Gentle stagger + float on desktop; the trio reads as one composition.
     Stagger is small (≤16px) and every column reserves matching bottom
     padding so the lowest screen's caption clears the field, and the
     drift travel (±8px) can never re-introduce clipping at the extremes. */
  .sellfig--a { transform: translateY(14px) rotate(-1.4deg); animation: moatDrift 7.2s ease-in-out infinite; padding-bottom: 20px; }
  .sellfig--b { transform: translateY(-6px);                  animation: moatDrift 8s   ease-in-out infinite; animation-delay: .5s; z-index: 2; padding-bottom: 20px; }
  .sellfig--c { transform: translateY(16px) rotate(1.4deg);  animation: moatDrift 7.6s ease-in-out infinite; animation-delay: .9s; padding-bottom: 20px; }
  @keyframes moatDrift {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -8px; }
  }

  /* ScreenFrame , w-[340px], rounded-2xl, cream border, shadow-xl, bg-background(cream) */
  /* The ScreenFrame is the anchor of the unified card language: same radius,
     border and surface tokens as every resting card. It keeps the heavier
     --shadow-float because it is genuinely floating product UI in the blob. */
  .screen {
    width: 340px; max-width: 100%;
    display: flex; flex-direction: column; gap: 12px;
    overflow: hidden;
    border-radius: var(--card-radius);
    border: var(--card-border);
    background: var(--card-surface);
    padding: 16px;
    box-shadow: var(--shadow-float);
  }
  .screen--tall { height: 400px; }
  /* The AI figure's screen is shorter, variable-height chat content (unlike
     Search's fixed 5-row list), so a fixed 400px leaves dead space below the
     last bubble. Match the reference: let it size to its content. */
  .sellfig--c .screen--tall { height: auto; }

  /* Provider logo box , wraps inline SVG/img at a fixed size (icon-in-box rule) */
  .plogo { display: inline-flex; align-items: center; justify-content: center; }
  .plogo svg, .plogo img { display: block; width: 100%; height: 100%; }
  .plogo--20 { width: 20px; height: 20px; }
  .plogo--16 { width: 16px; height: 16px; }

  /* --- Consolidate: sources converging above the Data Hub card --- */
  .consolidate { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 340px; max-width: 100%; }
  .consolidate__sources { display: flex; align-items: center; gap: 8px; }
  .consolidate__note {
    font-family: var(--font-body); font-size: 10px; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe-600);
  }
  .consolidate__arrow { color: var(--taupe-600); width: 14px; height: 14px; display: block; }

  .datahub__head { display: flex; align-items: center; justify-content: space-between; }
  .datahub__title { font-family: var(--font-head); font-weight: 500; font-size: 16px; color: var(--taupe-900); }
  .pill-count {
    border-radius: var(--r-4xl); background: var(--cream-200);
    padding: 2px 8px; font-size: 10px; font-weight: 500; color: var(--taupe-700);
  }
  .rows { display: flex; flex-direction: column; gap: 2px; }

  /* Person row (shared shape across Consolidate + Search) */
  .prow { display: flex; align-items: center; gap: 10px; border-radius: var(--r-sm); padding: 6px 4px; }
  .prow__main { display: flex; min-width: 0; flex: 1; flex-direction: column; }
  .prow__name { font-size: 14px; font-weight: 500; color: var(--taupe-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prow__meta { font-size: 12px; color: var(--taupe-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prow__src { display: inline-flex; align-items: center; justify-content: center; flex: none; }

  /* Pills , real product tones */
  .tag { border-radius: var(--r-4xl); padding: 1px 8px; font-size: 10px; font-weight: 600; white-space: nowrap; }
  .tag--new-soft { background: var(--clay-100); color: var(--clay-700); }   /* Consolidate "New" */
  .tag--match { background: var(--clay-100); color: var(--clay-700); }
  /* clay-700, for the same reason .bubble--user is: cream on clay-500 measures 3.96:1,
     under the 4.5:1 this size needs. Fixing the bubble and leaving this one was fixing an
     instance rather than the defect — they are the same pairing, eleven lines apart. */
  .tag--new { background: var(--clay-700); color: var(--cream-100); } /* Search "New" */
  .tag--neutral { background: var(--cream-200); color: var(--taupe-700); }

  /* --- Search --- */
  .searchbar {
    display: flex; align-items: center; gap: 8px;
    border-radius: var(--r-4xl); border: 1px solid var(--cream-300);
    background: var(--cream-100); padding: 8px 12px;
  }
  .searchbar svg { width: 16px; height: 16px; flex: none; color: var(--taupe-600); }
  .searchbar span { font-size: 14px; color: var(--taupe-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .search-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 4px; }
  .search-meta__n { font-size: 12px; font-weight: 500; color: var(--taupe-700); }
  .search-meta__scope { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe-600); white-space: nowrap; }

  /* --- Claude thread --- */
  /* Goodword wordmark at the top of the answer bubble: it signals the answer came from
     Goodword. Replaces the old "Goodword MCP" title-bar pill and the Claude avatar glyph,
     since the Claude / ChatGPT / Gemini marks already sit in the .ai-players row above. */
  .bubble__brand { display: block; height: 16px; width: auto; margin-bottom: 8px; }
  .bubble { font-size: 12px; line-height: 1.5; }
  .bubble--user {
    align-self: flex-end; max-width: 82%;
    border-radius: var(--r-2xl); border-bottom-right-radius: var(--r-sm);
    /* clay-700, not clay-500. Measured 3.96:1 behind cream-100 at 12px, under the
       4.5:1 text this size needs. It is a chat bubble inside the Claude figure, so
       it is real readable copy rather than decoration — the one thing on these
       pages a person squints at. clay-700 is the site's own CTA colour, so the fix
       stays inside the palette. If Lara prefers the lighter terracotta, 14px
       semibold qualifies as large text and passes at 3:1. */
    background: var(--clay-700); color: var(--cream-100);
    padding: 8px 12px;
  }
  .bubble--claude {
    max-width: 90%;
    border-radius: var(--r-2xl); border-bottom-left-radius: var(--r-sm);
    background: var(--cream-200); color: var(--taupe-900);
    padding: 10px 12px;
  }
  .bubble--claude p { margin: 0; }
  .chips { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
  .pchip { display: flex; align-items: center; gap: 8px; border-radius: var(--r-sm); background: var(--cream-100); padding: 6px 8px; }
  .pchip__name { font-size: 12px; font-weight: 500; color: var(--taupe-900); flex: none; }
  .pchip__meta { font-size: 10px; color: var(--taupe-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bubble--claude .ask { margin-top: 8px; color: var(--taupe-700); }

  /* ---------- Moat blob responsive ----------
     Desktop trio → tablet 3-up scaled → mobile single stacked column.
     Screens are fixed 340px; below the container we scale/stack so they
     never overflow the viewport. */
  @media (max-width: 1040px) {
    .moat-blob__stage { gap: 18px; transform: scale(0.86); transform-origin: top center; }
  }
  @media (max-width: 880px) {
    /* Stack into one calm single column; drop the drift/stagger transforms.
       Each screen keeps its caption directly beneath it, fully visible. */
    #why { padding-block: 72px 84px; }
    .moat-blob__stage { flex-direction: column; align-items: center; gap: 44px; transform: none; }
    .sellfig--a, .sellfig--b, .sellfig--c { transform: none; animation: none; padding-bottom: 0; }
    .sellfig__cap { margin-top: 16px; }
  }
  @media (max-width: 640px) {
    #why { padding-block: 60px 72px; }
  }
  @media (max-width: 380px) {
    /* Very narrow: shrink the fixed 340px frame to fit the gutter */
    .moat-blob { padding-inline: 0; }
    .moat-blob__stage { transform: scale(0.92); transform-origin: top center; }
  }

  /* ---------- Reduced motion: disable ALL animation ---------- */
  @media (prefers-reduced-motion: reduce) {
    .float { animation: none !important; transform: rotate(var(--r, 0deg)) !important; }
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }

    /* Hero loop: no autoplaying motion. Hide both <video> elements and show a
       static poster image instead: the 16:9 still on wide screens, the 9:16
       still on narrow screens, matching the crop-swap breakpoint. */
    .hero-d, .hero-m { display: none !important; }
    .hero-poster-d { display: block !important; }
    .hero-poster-m { display: none !important; }
  }
  @media (prefers-reduced-motion: reduce) and (max-width: 700px) {
    .hero-poster-d { display: none !important; }
    .hero-poster-m { display: block !important; }
  }

/* ── Tap targets, 2026-08-17 ─────────────────────────────────────────────────
   Found by hands-on QA on a 390px viewport, not by a linter: the footer links
   render 20px tall and the nav button 40px.

   Scoped to the 700px breakpoint the rest of this stylesheet already uses,
   rather than `pointer: coarse`. Both are defensible, but a width query is one
   the QA pass can actually observe — a headless browser reports a fine pointer
   whatever its viewport, so a coarse-pointer fix can only be argued for, never
   demonstrated. The desktop layout Lara designed is untouched either way. */
@media (max-width: 700px) {
  /* 20px of text becomes 44px of hit area, with the text exactly where it was. */
  .footer__links a {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
  }
  .nav__cta { height: 44px; }
}

/* ── The capsule nav is gone, 2026-08-17 ─────────────────────────────────────
   /lp/get-started shipped with a pill treatment borrowed from goodword.com's
   site bar, then briefly wore the plain /lp/ nav minus its clay button. Both
   are gone: the page now carries the lockup alone, inline in its own file, and
   nothing here styles it (Chris, 2026-08-17). A frame reads as site chrome, and
   a page whose entire job is one funnel is not the site. Both treatments and
   the measured pill tokens are in git if either call is revisited. */

/* ============ $100-off offer modal (LP Email Capture: offer_popup, then offer_popup_phone) ============
   The shared .gw-pop card (above) inside a dimmed veil. Two steps, email
   then phone, and the code is revealed only after the second save answers. Closing it leaves a
   corner pill that reopens it, so the offer the retargeting ads promise is never lost. */
.gw-veil { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px; background: color-mix(in oklch, var(--taupe-900) 42%, transparent); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.gw-veil.is-visible { opacity: 1; pointer-events: auto; }
.gw-veil[hidden] { display: none; }
.gw-veil .gw-pop { position: relative; right: auto; bottom: auto; width: 440px; max-width: 100%; max-height: calc(100vh - 48px); overflow: auto; padding: 30px 30px 26px; border-radius: 24px; box-shadow: 0 30px 80px -20px color-mix(in oklch, var(--taupe-900) 55%, transparent); transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; outline: none; }
.gw-veil.is-visible .gw-pop { opacity: 1; transform: none; pointer-events: auto; }
.gw-veil .gw-pop__x { top: 14px; right: 16px; font-size: 24px; min-width: 32px; min-height: 32px; }
.gw-veil .gw-pop__title:focus { outline: none; }
.gw-veil .gw-pop__title { font-size: 28px; line-height: 1.1; letter-spacing: -.02em; margin: 0 28px 8px 0; text-wrap: balance; }
.gw-veil .gw-pop__sub { font-size: 15px; margin-bottom: 16px; }
.gw-veil .gw-pop__form { gap: 10px; }
.gw-veil .gw-pop__input { height: 50px; font-size: 16px; caret-color: var(--clay-700); }
.gw-veil .gw-pop__input::placeholder { color: var(--taupe-600); opacity: 1; }
.gw-veil .gw-pop__input[aria-invalid="true"] { border-color: var(--clay-700); }
.gw-veil .gw-pop__btn { height: 50px; font-size: 16px; }
.gw-pop__consent { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--taupe-600); }
.gw-pop__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.gw-pop__step { display: none; }
.gw-pop[data-step="email"] .gw-pop__step--email, .gw-pop[data-step="phone"] .gw-pop__step--phone, .gw-pop[data-step="code"] .gw-pop__step--code { display: block; }
.gw-pop__done { display: flex; flex-direction: column; gap: 10px; }
.gw-pop__code { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 50px; padding: 0 6px 0 18px; border-radius: 44px; border: 1px dashed var(--taupe-600); background: var(--cream-0); }
.gw-pop__code-val { font-family: var(--font-body); font-weight: 500; font-size: 17px; letter-spacing: .14em; color: var(--taupe-900); user-select: all; }
.gw-pop__copy { border: 0; background: none; cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--clay-700); height: 36px; padding: 0 14px; border-radius: 44px; }
.gw-pop__copy:hover { background: var(--cream-200); color: var(--clay-800); }
a.gw-pop__btn { text-decoration: none; }
.gw-pop__copy:focus-visible, .gw-pop__x:focus-visible, .gw-pop__btn:focus-visible, .gw-pill:focus-visible { outline: 2px solid var(--clay-700); outline-offset: 2px; }
.gw-pop ::selection { background: color-mix(in oklch, var(--clay-700) 22%, transparent); }
.gw-pill { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 14px; border-radius: 44px; border: 0; background: var(--taupe-900); color: var(--cream-100); font-family: var(--font-body); font-weight: 500; font-size: 14px; cursor: pointer; box-shadow: 0 10px 24px -10px color-mix(in oklch, var(--taupe-900) 50%, transparent); }
.gw-pill:hover { background: var(--taupe-700); }
.gw-pill b { font-weight: 500; color: var(--clay-100); }
.gw-pill[hidden] { display: none; }
@media (max-width: 600px) {
  /* Bottom sheet, overriding the shared bottom-bar rules the card carries at this width. */
  .gw-veil { align-items: flex-end; padding: 0; }
  .gw-veil .gw-pop { width: 100%; max-width: none; max-height: calc(100vh - 40px); border-radius: 20px 20px 0 0; padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px -10px color-mix(in oklch, var(--shadow-tint) 22%, transparent); }
  .gw-veil .gw-pop__x { top: 10px; right: 12px; }
  .gw-veil .gw-pop__title { font-size: 24px; margin: 0 28px 8px 0; }
  .gw-veil .gw-pop__sub { display: block; }
  .gw-veil .gw-pop__form { flex-direction: column; margin-top: 0; }
  .gw-veil .gw-pop__btn { width: 100%; padding: 0; }
  .gw-pill { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .gw-veil, .gw-veil .gw-pop { transition: opacity .2s ease; transform: none; } }