/* Gushwork Design System, ad-page template (skills/gushwork-web/templates/ad-page), vendored 2026-10-07 for Scout by Delfin pages. Tokens + page styles, unchanged except font paths. */

/* ============================================================================
   Gushwork design tokens
   ----------------------------------------------------------------------------
   Generated from the BOUND FIGMA VARIABLES of Gush Design System v2.0
   (file key VKcb4fgVyOHKfQonMgN772), unioned across component nodes on all
   six documented pages.

   Do not take token values from the swatch labels on the Figma canvas. They
   have drifted: all 12 Neutral hex labels and 7 of 12 Primary hex labels are
   from a superseded palette, and 10 of 31 typography spec rows contradict
   their own variables. The variables are authoritative. This file is the
   only place a value should be written down.

   Never hardcode a hex, size, radius, or shadow in generated output. Use the
   custom properties below. If a value you need has no token, that is a
   finding to report, not a number to invent.
   ============================================================================ */

/* ============================================================================
   FONT FACES
   ----------------------------------------------------------------------------
   Both brand faces are variable fonts, committed under fonts/. Paths are
   relative to this file.

   Axis ranges below were read out of the fvar table, not guessed:

     Vert Grotesk Display   wght 300..700   default 300
     Inter                  wght 100..900   default 400 · opsz 14..32

   Two things follow from that:

   1. The display face TOPS OUT AT 700. There is no 800 or 900. A heading asking
      for either silently clamps to 700 — the type ramp never does, but custom
      CSS might.
   2. Its DEFAULT IS 300 (Light). Any display text rendered without an explicit
      weight comes out Light, which reads as a wrong weight rather than a
      missing font. Always go through a --gw-text-* token; each one sets weight
      explicitly.

   Without these declarations both faces fall back to system-ui, which has
   different metrics and different weight rendering — the usual cause of "the
   font weight looks off".
   ============================================================================ */

@font-face {
  font-family: 'Vert Grotesk Display';
  src: url('/assets/scout/fonts/Vert_Grotesk_Display_VF.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/scout/fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}



:root {

  /* ==========================================================================
     COLOR
     Figma collection: Colors
     ========================================================================== */

  /* --- Primary (brand blue) -------------------------------------------------
     Figma path Colors/Primary/*. Note the 500 step is named `500-main` in
     Figma — the only ramp step in the file with a suffix. */
  --gw-color-primary-25:  #f2f8ff;
  --gw-color-primary-50:  #e5f1ff;
  --gw-color-primary-100: #cce2ff;
  --gw-color-primary-200: #99c6ff;
  --gw-color-primary-300: #66a9ff;
  --gw-color-primary-400: #338cff;
  --gw-color-primary-500: #0070ff;  /* Colors/Primary/500-main — the brand blue */
  --gw-color-primary-600: #0061e0;
  --gw-color-primary-700: #004ebf;
  --gw-color-primary-800: #003a8c;
  --gw-color-primary-900: #002559;

  --gw-color-primary-alpha-10: #0070ff1a;
  --gw-color-primary-alpha-40: #0070ff66;

  /* --- Secondary -----------------------------------------------------------
     Figma path Colors/Secondary/500-main. A single step, no ramp. Used as the
     dark surface on page-build, navbar, footer and the comparison table. */

  /* --- Neutral -------------------------------------------------------------
     Figma path Colors/Neutral/*. Cool-tinted, not pure gray. The 35/250/850
     steps are real variables but have no swatch on the canvas. */
  --gw-color-neutral-25:  #f7f8f9;
  --gw-color-neutral-35:  #f5f5f5;
  --gw-color-neutral-50:  #f1f2f3;
  --gw-color-neutral-100: #e7e8e9;
  --gw-color-neutral-200: #cfd1d4;
  --gw-color-neutral-250: #bcbec2;
  --gw-color-neutral-300: #bbbec4;
  --gw-color-neutral-400: #959ba4;
  --gw-color-neutral-500: #878b94;
  --gw-color-neutral-600: #6a7077;
  --gw-color-neutral-700: #535a61;
  --gw-color-neutral-800: #4d545c;
  --gw-color-neutral-850: #2e3338;
  --gw-color-neutral-900: #262a2e;
  --gw-color-white: #ffffff;
  --gw-color-black: #0d0d0d;

  --gw-color-neutral-alpha-10-white: #ffffff1a;
  --gw-color-neutral-alpha-20-white: #ffffff33;
  --gw-color-neutral-alpha-30-white: #ffffff4d;
  --gw-color-neutral-alpha-50-white: #ffffff80;
  --gw-color-neutral-alpha-60-white: #ffffff99;
  --gw-color-neutral-alpha-80-white: #ffffffcc;
  --gw-color-neutral-alpha-10-black: #0101091a;
  --gw-color-neutral-alpha-20-black: #01010933;
  --gw-color-neutral-alpha-50-black: #01010980;

  /* --- Categorical chart series — RULED, DECISIONS.md R11 -------------------
     `Graph Type=Grouped Bar` (2143:683) binds three raw hexes. Two sit within a few
     units of an existing ramp step across 765 — differences nobody can see — and are
     treated as those tokens, unbound:
         #a1cdfe -> --gw-color-primary-200      #fed14a -> --gw-color-yellow-200
     The third is a violet and the system has NO violet ramp, so it is added here as a
     single named colour rather than nine steps nobody drew.
     THREE SERIES IS THE CEILING. A fourth category is a finding to report, not a
     colour to pick. Single-series charts (`Bar`, `Line`) use --gw-color-primary-500
     and do not touch this palette.
     Not a Figma variable — added by ruling, 8 Aug 2026. */
  --gw-color-chart-violet: #9784ff;
  --gw-color-chart-1: var(--gw-color-primary-200);
  --gw-color-chart-2: var(--gw-color-chart-violet);
  --gw-color-chart-3: var(--gw-color-yellow-200);

  /* --- Red (negative / error) ---------------------------------------------- */
  --gw-color-red-25:  #fff1f2;
  --gw-color-red-50:  #ffe4e6;
  --gw-color-red-100: #fecdd3;
  --gw-color-red-200: #fda4af;
  --gw-color-red-300: #fb7185;
  --gw-color-red-400: #f43f5e;
  --gw-color-red-500: #e11d48;
  --gw-color-red-600: #be123c;
  --gw-color-red-700: #9f1239;
  --gw-color-red-800: #881337;
  --gw-color-red-900: #4c0519;
  --gw-color-red-alpha-10: #f43f5e1a;
  --gw-color-red-alpha-20: #f43f5e33;

  /* --- Yellow (warning / in-between) --------------------------------------- */
  --gw-color-yellow-25:  #fffbeb;
  --gw-color-yellow-50:  #fef3c7;
  --gw-color-yellow-100: #fde68a;
  --gw-color-yellow-200: #fcd34d;
  --gw-color-yellow-300: #fbbf24;
  --gw-color-yellow-400: #f59e0b;
  --gw-color-yellow-500: #d97706;
  --gw-color-yellow-600: #b45309;
  --gw-color-yellow-700: #92400e;
  --gw-color-yellow-800: #78350f;
  --gw-color-yellow-900: #451a03;
  --gw-color-yellow-alpha-10: #f59e0b1a;
  --gw-color-yellow-alpha-20: #f59e0b33;

  /* --- Orange -------------------------------------------------------------
     The color rule text calls this group "Accent". The Figma group and the
     variable collection both name it Orange. Orange has no alpha steps. */
  --gw-color-orange-25:  #fff7ed;
  --gw-color-orange-50:  #ffedd5;
  --gw-color-orange-100: #fed7aa;
  --gw-color-orange-200: #fdba74;
  --gw-color-orange-300: #fb923c;
  --gw-color-orange-400: #f97316;
  --gw-color-orange-500: #ea580c;
  --gw-color-orange-600: #c2410c;
  --gw-color-orange-700: #9a3412;
  --gw-color-orange-800: #7c2d12;
  --gw-color-orange-900: #431407;

  /* --- Green (positive / success) ------------------------------------------ */
  --gw-color-green-25:  #f0fdf4;
  --gw-color-green-50:  #dcfce7;
  --gw-color-green-100: #bbf7d0;
  --gw-color-green-200: #86efac;
  --gw-color-green-300: #4ade80;
  --gw-color-green-400: #22c55e;
  --gw-color-green-500: #16a34a;
  --gw-color-green-600: #15803d;
  --gw-color-green-700: #166534;
  --gw-color-green-800: #14532d;
  --gw-color-green-900: #052e16;
  --gw-color-green-alpha-10: #22c55e1a;


  /* ==========================================================================
     SPACING
     Figma collection: Spacing. Values are px.
     The scale is not a clean progression — 28/36/44/52 and 64-76 do not exist,
     and 60 is the only non-multiple-of-8 above 32. Do not interpolate.
     ========================================================================== */
  --gw-space-2:   2px;
  --gw-space-4:   4px;
  --gw-space-8:   8px;
  --gw-space-12:  12px;
  --gw-space-16:  16px;
  --gw-space-20:  20px;
  --gw-space-24:  24px;
  --gw-space-32:  32px;
  --gw-space-40:  40px;
  --gw-space-48:  48px;
  --gw-space-56:  56px;
  --gw-space-60:  60px;
  --gw-space-80:  80px;
  --gw-space-100: 100px;
  --gw-space-120: 120px;
  --gw-space-160: 160px;


  /* ==========================================================================
     RADIUS
     Figma collection: Radius.
     Only the steps below are recoverable as bound variables. The canvas shows
     23 swatches (2, 24, 28, 32, 36, 40, 44, 48, 52, 56, 64, 68, 72, 76, 80),
     but those are unbound in the showcase frame — they render with literal
     corner values. Use a token below; if a design needs another step, report
     it rather than inventing a variable name.
     Note Radius/10 is a real variable with no swatch on the canvas.
     ========================================================================== */
  --gw-radius-none: 0;
  --gw-radius-4:    4px;
  --gw-radius-8:    8px;
  --gw-radius-10:   10px;
  --gw-radius-12:   12px;
  --gw-radius-16:   16px;
  --gw-radius-20:   20px;
  --gw-radius-60:   60px;
  --gw-radius-full: 999px;


  /* ==========================================================================
     ELEVATION
     Figma collection: Shadows.
     S1 is fully transparent — it is the "no shadow" level, not a subtle one.
     `Shadows/Card` is a real variable with no swatch and no mention in the
     elevation rule text. `shadows/button` lives in a separate lowercase
     collection and is two stacked layers.
     ========================================================================== */
  --gw-shadow-s1: 0 0 0 0 #1b1c1d00;
  --gw-shadow-s2: 0 2px 4px 0 #1b1c1d0a;
  --gw-shadow-s3: 0 16px 32px -12px #585c5f1a;
  --gw-shadow-s4: 0 16px 40px -8px #585c5f29;
  --gw-shadow-card: 0 3px 50px 0 #00000012;
  --gw-shadow-button: 0 1px 12px -8px #00000066, 0 1px 2px 0 #ffffff99;


  /* ==========================================================================
     TYPE
     Two families only. Vert Grotesk Display for headings and display, Inter
     for everything else. Never substitute a third face.

     Each style is emitted as a `font` shorthand plus a matching tracking
     token, so a rule reads:
         font: var(--gw-text-h1); letter-spacing: var(--gw-text-h1-tracking);

     Line-height units are preserved exactly as authored in Figma, which mixes
     them: styles at 18px and above carry unitless ratios, styles at 16px and
     below carry absolute px. Converting the px ones to ratios would introduce
     rounding (20/14 = 1.4286), so they are left as authored.

     Letter-spacing is emitted in EM, because Figma's magnitude is a PERCENT
     of the font size — not px. Measured against the rendered output on
     ↳ web/ pattern-library, three independent confirmations:
         body-18-med  letterSpacing -0.2 -> renders -0.036px at 18px
         body-16-med  letterSpacing -0.2 -> renders -0.032px at 16px
         body-18-sem  letterSpacing -0.6 -> renders -0.108px at 18px
     -0.2% is -0.002em, and 18 x -0.002 = -0.036. An earlier revision of this
     file read the magnitude as px, which made every tracking value 5-6x too
     wide. Do not reintroduce that reading.
     ========================================================================== */

  --gw-font-display: 'Vert Grotesk Display', ui-sans-serif, system-ui, sans-serif;
  --gw-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* --- Headings — Vert Grotesk Display ------------------------------------
     h1-h4 are Bold 700. h5 and h6 are Semibold 600. h7 is Medium 500.
     Each of h5, h6, h7 has a `-bold` sibling at weight 700 — that is half the
     ramp, and the heading rule text does not mention it.
     The heading rule claims headings are "bold or semi-bold"; h7 is Medium. */
  --gw-text-h1: 700 60px/1.2 var(--gw-font-display);
  --gw-text-h1-tracking: 0;
  --gw-text-h2: 700 56px/1.2 var(--gw-font-display);
  --gw-text-h2-tracking: 0;
  --gw-text-h3: 700 44px/1.2 var(--gw-font-display);
  --gw-text-h3-tracking: 0;
  --gw-text-h4: 700 38px/1.2 var(--gw-font-display);
  --gw-text-h4-tracking: 0;
  --gw-text-h5: 600 32px/1.2 var(--gw-font-display);
  --gw-text-h5-tracking: 0;
  --gw-text-h5-bold: 700 32px/1.2 var(--gw-font-display);
  --gw-text-h5-bold-tracking: 0;
  --gw-text-h6: 600 26px/1.2 var(--gw-font-display);
  --gw-text-h6-tracking: 0;
  --gw-text-h6-bold: 700 26px/1.2 var(--gw-font-display);
  --gw-text-h6-bold-tracking: 0;
  --gw-text-h7: 500 22px/1.4 var(--gw-font-display);
  --gw-text-h7-tracking: 0;
  --gw-text-h7-bold: 700 22px/1.4 var(--gw-font-display);
  --gw-text-h7-bold-tracking: 0;
  /* ADDED 18 Sep 2026 — the 600 rung of h7. Figma GW-Meta/Google-Ads
     O6g05YAT980r85VaDQha4h/1890:42744 sets the step-card title in Vert Grotesk
     Display Semibold 22/1.4 and the ramp had only 500 and 700 at 22.
     Pending addition to foundation/tokens.css — see notice. */
  --gw-text-h7-sem: 600 22px/1.4 var(--gw-font-display);
  --gw-text-h7-sem-tracking: 0;
  /* ADDED 17 Sep 2026 — next rung below h7 (22/1.4). Figma GW-Meta/Google-Ads
     O6g05YAT980r85VaDQha4h/1868:23510 sets the agent-card title in Vert Grotesk
     Display Bold 18/1.4 and the ramp had no 18. Pending addition to
     foundation/tokens.css — see notice. */
  --gw-text-h8: 500 18px/1.4 var(--gw-font-display);
  --gw-text-h8-tracking: 0;
  --gw-text-h8-bold: 700 18px/1.4 var(--gw-font-display);
  --gw-text-h8-bold-tracking: 0;

  /* --- Body — Inter -------------------------------------------------------
     Full ramp: 22, 20, 18, 16, 14, 12, 10 px, each in reg / med / sem. */
  --gw-text-body-22-reg: 400 22px/1.4 var(--gw-font-body);
  --gw-text-body-22-reg-tracking: -0.006em;
  --gw-text-body-22-med: 500 22px/1.4 var(--gw-font-body);
  --gw-text-body-22-med-tracking: -0.006em;
  --gw-text-body-22-sem: 600 22px/1.4 var(--gw-font-body);
  --gw-text-body-22-sem-tracking: -0.006em;

  --gw-text-body-20-reg: 400 20px/1.4 var(--gw-font-body);
  --gw-text-body-20-reg-tracking: -0.006em;
  --gw-text-body-20-med: 500 20px/1.4 var(--gw-font-body);
  --gw-text-body-20-med-tracking: -0.016em;  /* outlier — every sibling is -0.6px */
  --gw-text-body-20-sem: 600 20px/1.4 var(--gw-font-body);
  --gw-text-body-20-sem-tracking: -0.006em;

  --gw-text-body-18-reg: 400 18px/1.6 var(--gw-font-body);
  --gw-text-body-18-reg-tracking: -0.002em;
  --gw-text-body-18-med: 500 18px/1.6 var(--gw-font-body);
  --gw-text-body-18-med-tracking: -0.002em;
  --gw-text-body-18-sem: 600 18px/1.6 var(--gw-font-body);
  --gw-text-body-18-sem-tracking: -0.006em;

  --gw-text-body-16-reg: 400 16px/24px var(--gw-font-body);
  --gw-text-body-16-reg-tracking: -0.002em;
  --gw-text-body-16-med: 500 16px/24px var(--gw-font-body);
  --gw-text-body-16-med-tracking: -0.002em;
  --gw-text-body-16-sem: 600 16px/24px var(--gw-font-body);
  --gw-text-body-16-sem-tracking: -0.002em;

  --gw-text-body-14-reg: 400 14px/20px var(--gw-font-body);
  --gw-text-body-14-reg-tracking: -0.002em;
  --gw-text-body-14-med: 500 14px/20px var(--gw-font-body);
  --gw-text-body-14-med-tracking: -0.002em;
  --gw-text-body-14-sem: 600 14px/21px var(--gw-font-body);  /* 21px, not 20px */
  --gw-text-body-14-sem-tracking: -0.002em;

  --gw-text-body-12-reg: 400 12px/16px var(--gw-font-body);
  --gw-text-body-12-reg-tracking: -0.006em;
  --gw-text-body-12-med: 500 12px/16px var(--gw-font-body);
  --gw-text-body-12-med-tracking: -0.006em;
  --gw-text-body-12-sem: 600 12px/16px var(--gw-font-body);
  --gw-text-body-12-sem-tracking: -0.006em;

  --gw-text-body-10-reg: 400 10px/15px var(--gw-font-body);
  --gw-text-body-10-reg-tracking: 0;
  --gw-text-body-10-med: 500 10px/15px var(--gw-font-body);
  --gw-text-body-10-med-tracking: 0;
  --gw-text-body-10-sem: 600 10px/15px var(--gw-font-body);
  --gw-text-body-10-sem-tracking: 0;

  /* --- Button labels — Inter Medium ---------------------------------------
     Figma collection: Button. Line-height is 1 and tracking 0 on every step,
     because button labels are single-line and optically centred by padding.
     Use these for button and CTA text, not the body ramp. */
  --gw-text-button-10: 500 10px/1 var(--gw-font-body);
  --gw-text-button-12: 500 12px/1 var(--gw-font-body);
  --gw-text-button-14: 500 14px/1 var(--gw-font-body);
  --gw-text-button-16: 500 16px/1 var(--gw-font-body);
  --gw-text-button-18: 500 18px/1 var(--gw-font-body);
}

/* ============================================================================
   KNOWN GAPS AND CONFLICTS IN THE SOURCE

   Carried here so a generator knows what it cannot rely on. All of these are
   reported to the design owner and are not to be worked around silently.

   1. Radius steps 2, 24, 28, 32, 36, 40, 44, 48, 52, 56, 64-80 are documented
      on the canvas but have no bound variable. Not emitted above.

   2. The Spacing showcase swatches labelled 60px and 160px are both bound to
      Spacing/56. The variables Spacing/60, /80, /100, /120, /160 do all exist
      and are emitted above; only the showcase bindings are wrong.

   3. Two heading collections coexist: `Heading/*` (h1-h7 plus -bold siblings)
      and `Headings/*` (h1, h6, h7-bold observed). They hold identical values.
      Tokens above come from `Heading/*`. The duplicate should be retired.

   4. Two shadow collections coexist: `Shadows/*` (S1-S4, Card) and
      `shadows/button`. Both are emitted; the casing split should be resolved.

   5. `Body/body-16-reg` resolves with letter-spacing -0.2 on most nodes but
      -0.6 on fold/Comparison Table (1824:6836), which suggests a duplicate
      variable of the same path in a second collection. -0.2 is emitted.

   6. Legacy Tailwind-style variables are still bound inside real components
      and must not be used: `gray/200 /300 /500 /700 /900`, `green/100 /500
      /800`, `blue/50`, bare `white`. They appear in fold/ Hero (1731:55983)
      and on two stray Cloud icon instances. Note `gray/900` (#111827) is the
      same value as Colors/Secondary/500-main — use the token, not the legacy.

   7. `_Helper/Purple` (#8427DE) is a working/debug variable bound inside the
      badge set (1582:628) and fold/Comparison Table. Never render it.

   8. `paragraph-01/P1Regular` (Inter Regular 24/36) is a legacy type variable
      bound on all 20 icon category labels. Superseded by the Body ramp.

   9. There is a bare top-level `White` variable (#ffffff) alongside
      `Colors/Neutral/white`. Prefer --gw-color-white.

  11. THIS FILE IS NOT SAFE TO FLATTEN. Some names are declared TWICE — the base value in
      :root and an override inside a media query:

        :root                                  --gw-motion-fast: 120ms ease
        @media (prefers-reduced-motion:reduce) --gw-motion-fast: 0ms
        @media (max-width:767px)               every --gw-bp-*, and --gw-content-width

      A generator that builds a lookup with "last match wins" — the obvious
      `dict(re.findall(...))` — therefore emits --gw-motion-fast: 0ms UNCONDITIONALLY. Every
      transition is dead for every user and the reduced-motion guard is silently discarded. It
      renders plausibly and is completely wrong. Take the FIRST occurrence of each name and
      re-emit the guards you need. Found 26 Aug 2026 in two separate builders, including the
      reference one in preview/.

  10. No motion tokens exist in FIGMA. They now exist here — RULED, not
      harvested. See the RULED section at the end of this file. Never write a
      raw duration into a component; use --gw-motion-fast.

      An earlier revision of this file also claimed no breakpoint tokens
      existed. That was wrong — there is a whole second collection. See the
      BREAKPOINT section below.
   ============================================================================ */

/* ============================================================================
   BREAKPOINT
   Figma collection: Breakpoint · 34 variables · modes Desktop (default), Phone
   ----------------------------------------------------------------------------
   The second variable collection. Unlike Brand, which is single-mode, every
   variable here has a Desktop and a Phone value — this is the file's
   responsive system, and it is why components carry a `Breakpoint` variant
   rather than hard-coded sizes.

   Consume these through the media query, not by picking a side by hand.

   SOURCE NOTE: transcribed from the Gushwork Figma master specification
   (6 Aug 2026), not read back through the MCP variable API. Values are
   internally consistent with the components measured in exports/, with one
   open conflict flagged on --gw-bp-content-width below.
   ============================================================================ */

:root {

  /* --- Sizing ------------------------------------------------------------- */
  --gw-bp-page-width:     1440px;
  --gw-bp-content-width:  1400px;  /* see conflict note */
  --gw-bp-heading-lg:     1000px;
  --gw-bp-heading-def:     800px;
  --gw-bp-heading-sm:      620px;
  --gw-bp-cta-image-w:     600px;
  --gw-bp-cta-image-h:     440px;
  --gw-bp-navbar-h:         60px;

  /* --- Padding ------------------------------------------------------------ */
  --gw-bp-pad-navbar-h:    100px;
  --gw-bp-pad-page-h:       20px;
  --gw-bp-pad-cta-h:        60px;
  --gw-bp-pad-section-v-lg: 120px;
  --gw-bp-pad-section-v:   100px;
  --gw-bp-pad-footer-v:     20px;
  --gw-bp-pad-card-h:       60px;
  --gw-bp-pad-card-v:       40px;

  /* --- Spacing ------------------------------------------------------------ */
  --gw-bp-section-gap-lg:  180px;
  --gw-bp-section-gap:     160px;
  --gw-bp-content-gap:      40px;
  --gw-bp-element-gap:      20px;
  --gw-bp-heading-gap:      20px;
  --gw-bp-content-spacing:   0px;

  /* --- Type scale ---------------------------------------------------------
     A responsive scale separate from the Heading/* text styles. The two do
     not agree — Heading/h1 is 60px while this h1 is 44px — because these
     drive fold-level layout while the text styles drive the type ramp. Use
     the Heading tokens for type; use these only where a component binds
     them. */
  --gw-bp-type-display:    112px;
  --gw-bp-type-hero:        60px;
  --gw-bp-type-h1:          44px;
  --gw-bp-type-h2:          26px;
  --gw-bp-type-subtitle:    18px;
  --gw-bp-type-body:        16px;
  --gw-bp-type-button:      14px;
  --gw-bp-type-caption:     12px;

  /* --- Radius ------------------------------------------------------------- */
  --gw-bp-radius-large:     20px;
  --gw-bp-radius-medium:    16px;
  --gw-bp-radius-small:      8px;
}

@media (max-width: 767px) {
  :root {
    /* Phone mode */
    --gw-bp-page-width:     375px;
    --gw-bp-content-width:  343px;
    --gw-bp-heading-lg:     343px;
    --gw-bp-heading-def:    343px;
    --gw-bp-heading-sm:     343px;
    --gw-bp-cta-image-w:    343px;
    --gw-bp-cta-image-h:    393px;
    --gw-bp-navbar-h:        56px;

    --gw-bp-pad-navbar-h:    16px;
    --gw-bp-pad-page-h:      16px;
    --gw-bp-pad-cta-h:       16px;
    --gw-bp-pad-section-v-lg: 60px;
    --gw-bp-pad-section-v:   60px;
    --gw-bp-pad-footer-v:    16px;
    --gw-bp-pad-card-h:      16px;
    --gw-bp-pad-card-v:      24px;

    --gw-bp-section-gap-lg:  80px;
    --gw-bp-section-gap:     60px;
    --gw-bp-content-gap:     20px;
    --gw-bp-element-gap:     12px;
    --gw-bp-heading-gap:     12px;
    --gw-bp-content-spacing: 40px;

    --gw-bp-type-display:    48px;
    --gw-bp-type-hero:       44px;
    --gw-bp-type-h1:         38px;
    --gw-bp-type-h2:         20px;
    --gw-bp-type-subtitle:   16px;
    --gw-bp-type-body:       16px;
    --gw-bp-type-button:     14px;
    --gw-bp-type-caption:    12px;

    --gw-bp-radius-large:    16px;
    --gw-bp-radius-medium:   12px;
    --gw-bp-radius-small:     8px;
  }
}

/* ============================================================================
   RESOLVED — the content column is 1240, not --gw-bp-content-width
   ----------------------------------------------------------------------------
   Three values competed: this collection's 1400, a measured 1240 from both
   worked page-build instances on `↳ web/ template-library`, and ~1280 from the
   master spec's prose.

   Ruled 1240 (Utsav, 6 Aug 2026) — the only value measured off a real
   composition. Use --gw-content-width below for the marketing content column.
   --gw-bp-content-width is kept because the Figma variable genuinely holds
   1400, but it is NOT the content column. Don't reach for it by name.
   ============================================================================ */

:root {
  /* The marketing content column. 1240 centred in a 1440 page, 100px margins. */
  --gw-content-width: 1240px;
  --gw-content-margin: 100px;
}

@media (max-width: 767px) {
  :root {
    --gw-content-width: 343px;
    --gw-content-margin: 16px;
  }
}

/* ============================================================================
   TYPE — Links
   Figma path Body/link-{size} · Inter Medium, matched to the Body ramp
   ----------------------------------------------------------------------------
   Always pair link-{N} with body-{N} of the same size. Links are Medium
   weight so they read as distinct from Regular body copy.

   SOURCE NOTE: from the master specification, same caveat as BREAKPOINT.
   ============================================================================ */

:root {
  --gw-text-link-10: 500 10px/15px  var(--gw-font-body);
  --gw-text-link-12: 500 12px/16px  var(--gw-font-body);
  --gw-text-link-14: 500 14px/20px  var(--gw-font-body);
  --gw-text-link-16: 500 16px/24px  var(--gw-font-body);
  --gw-text-link-18: 500 18px/1.6   var(--gw-font-body);
  --gw-text-link-20: 500 20px/1.4   var(--gw-font-body);
  --gw-text-link-22: 500 22px/1.4   var(--gw-font-body);

  --gw-text-link-10-tracking:  0;
  --gw-text-link-12-tracking: -0.6%;
  --gw-text-link-14-tracking: -0.2%;
  --gw-text-link-16-tracking: -0.2%;
  --gw-text-link-18-tracking: -0.2%;
  --gw-text-link-20-tracking: -1.6%;
  --gw-text-link-22-tracking: -0.6%;

  /* Button ramp — the master spec adds a 20px step the earlier harvest missed */
  --gw-text-button-20: 500 20px/1 var(--gw-font-body);

  /* Alpha steps the earlier harvest missed */
  --gw-color-primary-alpha-20:      #0070ff33;
  --gw-color-primary-alpha-30:      #0070ff4d;
  --gw-color-orange-alpha-10:       #ea580c1a;
  --gw-color-orange-alpha-20:       #ea580c33;
  --gw-color-neutral-alpha-90-white: #ffffffe6;

  /* Radius — the ramp continues in linear 4px steps from 24 to 80 */
  --gw-radius-2:  2px;
  --gw-radius-24: 24px;
  --gw-radius-28: 28px;
  --gw-radius-32: 32px;
  --gw-radius-36: 36px;
  --gw-radius-40: 40px;
  --gw-radius-44: 44px;
  --gw-radius-48: 48px;
  --gw-radius-52: 52px;
  --gw-radius-56: 56px;
  --gw-radius-64: 64px;
  --gw-radius-68: 68px;
  --gw-radius-72: 72px;
  --gw-radius-76: 76px;
  --gw-radius-80: 80px;
}

/* ============================================================================
   RULED — values decided by the design owner, NOT harvested from Figma
   ----------------------------------------------------------------------------
   Everything above this line came out of the Figma variables. Everything below
   was ruled because the file had no answer and every build was inventing one.

   Same standing as the --gw-content-width ruling further up: authoritative, and
   to be mirrored into Figma when someone next opens the file. Use these tokens;
   do not re-decide them.
   ============================================================================ */

:root {

  /* --- Motion -------------------------------------------------------------
     Ruled by Utsav, 7 Aug 2026. Figma has no motion variables and note 10 above
     used to say "document per component" — which in practice meant every build
     picked its own duration.

     ONE duration for dashboard state changes: hover, open/close, selection,
     toggle. It is deliberately short; a product surface should feel immediate,
     not animated. Anything that needs a different duration is a finding.

     Always pair with a prefers-reduced-motion guard. */
  --gw-motion-fast: 120ms ease;

  /* --- Focus ---------------------------------------------------------------
     Ruled by Utsav, 7 Aug 2026. NO component in the Figma file defines a focus
     state — not Button, not controls, not list-item, not table-row — so every
     keyboard user got whatever the browser did.

     Composed from existing tokens; introduces no new colour. Applies to every
     focusable element on both surfaces. */
  --gw-focus-ring: 2px solid var(--gw-color-primary-alpha-40);
  --gw-focus-offset: 2px;

  /* --- Timing --------------------------------------------------------------
     Toast auto-dismiss. Ruled by Utsav, 7 Aug 2026 — see exports/dashboard/feedback.md,
     which previously recorded this as undefined. */
  --gw-toast-dismiss: 4000ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --gw-motion-fast: 0ms; }
}



/* Fonts: declared in assets/tokens.css, served from ../fonts (= /fonts). */
:root{
  --nav-h:60px;
  /* CHOSEN: side gutter scales from the phone margin up to the 100px desktop margin. */
  --gutter:clamp(16px,7vw,var(--gw-content-margin));
  --lattice:40px;   /* OFF-TOKEN, measured: cta-image lattice pitch */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--gw-color-white);color:var(--gw-color-neutral-800);
  font:var(--gw-text-body-16-reg);letter-spacing:var(--gw-text-body-16-reg-tracking);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
button,input{font:inherit;color:inherit}
svg{display:block;flex:none}
:focus-visible{outline:var(--gw-focus-ring);outline-offset:2px}

.wrap{width:100%;max-width:calc(var(--gw-content-width) + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--gw-space-120)}
.section--flush{padding-top:0}

/* ---------- Button (web) — Type=Ads so primary is Blue, Size=Medium ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--gw-space-8);
  height:44px;padding:var(--gw-space-16) var(--gw-space-20);border-radius:var(--gw-radius-8);
  font:var(--gw-text-button-16);box-shadow:var(--gw-shadow-s2);border:0;cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease}
.btn svg{width:18px;height:18px}
.btn--blue{background:var(--gw-color-primary-500);color:var(--gw-color-white)}
.btn--blue:hover{background:var(--gw-color-primary-600)}
.btn--white{background:var(--gw-color-white);color:var(--gw-color-black);
  border-radius:var(--gw-radius-10);padding:var(--gw-space-12) var(--gw-space-12) var(--gw-space-12) var(--gw-space-16)}
.btn--white:hover{background:var(--gw-color-neutral-50)}
.btn--sm{height:36px;padding:var(--gw-space-8) var(--gw-space-12);font:var(--gw-text-button-14)}
.btn--sm svg{width:16px;height:16px}
.btn--block{width:100%}
/* Figma 1868:32439 — the form's submit carries a white lift + blue glow */
.btn--glow{height:48px;box-shadow:0 2px 8px rgba(255,255,255,.6),0 6px 25px rgba(0,112,255,.48)}
/* Figma 1868:34529 — the marquee's closing CTA: 52 tall, radius/12, pl-20 pr-16 */
.btn--lg{height:52px;border-radius:var(--gw-radius-12);padding:var(--gw-space-16) var(--gw-space-16) var(--gw-space-16) var(--gw-space-20)}

/* Figma 1971:62868 — white, 0.5px neutral/100, 8px padding all round, gap 4,
   radius 100, icon 14, label Inter Medium 14 / leading-none / tracking 0.
   That makes it 30 tall, not the 24 it was. */
.eyebrow{display:inline-flex;align-items:center;gap:var(--gw-space-4);padding:var(--gw-space-8);
  background:var(--gw-color-white);border:.5px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-full);
  font:500 14px/1 var(--gw-font-body);letter-spacing:0;color:var(--gw-color-neutral-900);
  box-shadow:var(--gw-shadow-s2)}
.eyebrow svg{width:14px;height:14px}
.eyebrow--blue{background:var(--gw-color-primary-25);border:0;box-shadow:none;color:var(--gw-color-primary-500)}

/* Figma 1890:42129 — heading block 880, subtext 840 */
.heading{max-width:880px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--gw-space-20);text-align:center}
.h3{font:var(--gw-text-h3);letter-spacing:var(--gw-text-h3-tracking);color:var(--gw-color-black);text-wrap:balance}
/* Figma 1890:42134 — a 127.59deg gradient clipped to the glyphs, not a flat
   primary/500. The far stop #94c3ff sits between primary/200 and /300 and has
   no token; using the literal and reporting it. */
.h3 em{font-style:normal;background-image:linear-gradient(var(--h3-grad-angle,127.59deg),#0070ff 11.58%,#94c3ff 152.27%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font:var(--gw-text-body-18-med);letter-spacing:var(--gw-text-body-18-med-tracking);color:var(--gw-color-neutral-600);max-width:840px}

.badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:var(--gw-radius-4);white-space:nowrap;
  font:var(--gw-text-body-10-sem);letter-spacing:var(--gw-text-body-10-sem-tracking)}
.badge svg{width:12px;height:12px}
.badge--blue{background:var(--gw-color-primary-50);color:var(--gw-color-primary-600)}
.badge--green{background:var(--gw-color-green-50);color:var(--gw-color-green-700)}
.badge--orange{background:var(--gw-color-orange-50);color:var(--gw-color-orange-700)}
.badge--red{background:var(--gw-color-red-50);color:var(--gw-color-red-600)}

/* ==========================================================================
   NAVBAR — Type=Ads
   ========================================================================== */
/* Figma 1890:42047 — the navbar is OPAQUE neutral/25 with a 1px neutral/100
   bottom stroke, at rest and scrolled alike. This departs from the standing
   case-study rule (transparent over a light hero, alpha-80-white once scrolled,
   no border) on the design-owner's "Figma is the source of truth" ruling; the
   translucent version let the hero's tick list read through the logo. */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);
  background:var(--gw-color-neutral-25);border-bottom:1px solid var(--gw-color-neutral-100);
  padding-top:env(safe-area-inset-top,0px);box-sizing:content-box}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.nav-logo img{height:24px;width:auto}

/* ==========================================================================
   HERO — fold/ Hero, Layout=Form. Text left, demo form right, logos below.
   ========================================================================== */
.hero{background:var(--gw-color-neutral-25);
  padding:calc(var(--nav-h) + var(--gw-space-80)) 0 var(--gw-space-48);overflow:clip;position:relative}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--gw-color-neutral-50) 1px,transparent 1px),linear-gradient(90deg,var(--gw-color-neutral-50) 1px,transparent 1px);
  background-size:var(--lattice) var(--lattice);-webkit-mask-image:linear-gradient(#000,transparent 90%);mask-image:linear-gradient(#000,transparent 90%)}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:var(--gw-space-80);align-items:center}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gw-space-20)}
.hero h1{font:var(--gw-text-h2);letter-spacing:var(--gw-text-h2-tracking);color:var(--gw-color-black);text-wrap:balance}
.hero-sub{font:var(--gw-text-body-18-med);letter-spacing:var(--gw-text-body-18-med-tracking);color:var(--gw-color-neutral-700);max-width:580px}
/* Figma 1890:42060 — 620x84, three stacked rows, CheckCircle 16 */
.checks-strip{display:contents}
.checks li[data-dup]{display:none}
.checks{display:flex;flex-direction:column;gap:var(--gw-space-4);margin-top:var(--gw-space-16)}
.checks li{display:flex;align-items:center;gap:var(--gw-space-8);height:28px;font:var(--gw-text-body-16-med);letter-spacing:var(--gw-text-body-16-med-tracking);color:var(--gw-color-neutral-800)}
.checks svg{width:16px;height:16px;color:var(--gw-color-primary-500)}

/* fold/fold-element/form — mirrors the live /start + /ai-demo step 1.
   In Webflow, drop in the existing form component instead of this markup. */
.form{background:var(--gw-color-white);border:0;border-radius:24px;
  padding:var(--gw-space-40);filter:drop-shadow(0 16px 16px rgba(88,92,95,.1));display:flex;flex-direction:column}
/* Figma 1890:42084 spacing: header 40, field 24, choices 32 */
.form-head{margin-bottom:var(--gw-space-40)}
.form .field{margin-bottom:var(--gw-space-24)}
.form fieldset{margin-bottom:var(--gw-space-32)}
.form-head{display:flex;align-items:center;justify-content:space-between;gap:var(--gw-space-16)}
.form-head h2{font:var(--gw-text-h6);letter-spacing:var(--gw-text-h6-tracking);color:var(--gw-color-black)}
.form-head p{margin-top:var(--gw-space-8);font:var(--gw-text-body-14-med);letter-spacing:var(--gw-text-body-14-med-tracking);color:var(--gw-color-neutral-600)}
/* Figma 1971:69384 — 52px portrait, 20px Meet badge on primary/900 with a white ring */
.expert{position:relative;flex:none;width:52px;height:52px}
.expert video{width:52px;height:52px;border-radius:var(--gw-radius-full);object-fit:cover;
  background:var(--gw-color-neutral-100);border:2px solid var(--gw-color-white);display:block}
.expert-badge{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:var(--gw-radius-full);
  background:var(--gw-color-primary-900);border:1.75px solid var(--gw-color-white);display:grid;place-items:center}
.expert-badge svg{width:11px;height:9px}
/* input-fields — label inside the field, as on the live form */
.field{display:flex;align-items:center;height:56px;padding:var(--gw-space-8) var(--gw-space-16);background:var(--gw-color-neutral-50);
  border:1px solid transparent;border-radius:var(--gw-radius-8)}
.field:focus-within{border-color:var(--gw-color-primary-500);background:var(--gw-color-white)}
.field label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.field input{width:100%;border:0;background:none;outline:none;padding:0;font:var(--gw-text-body-14-med);color:var(--gw-color-black)}
.field input::placeholder{color:var(--gw-color-neutral-500)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;margin-bottom:var(--gw-space-8);font:var(--gw-text-body-14-med);letter-spacing:var(--gw-text-body-14-med-tracking);color:var(--gw-color-black)}
.radios{display:grid;grid-template-columns:repeat(3,132px);gap:var(--gw-space-12)}
.radio{position:relative;height:102px;display:flex;flex-direction:column;gap:var(--gw-space-12);padding:var(--gw-space-12);cursor:pointer;
  background:var(--gw-color-neutral-50);border:1px solid transparent;border-radius:var(--gw-radius-8)}
.radio > svg{align-self:flex-end;width:20px;height:20px;color:var(--gw-color-neutral-800)}
.radio em{display:flex;flex-direction:column;gap:var(--gw-space-4);font-style:normal}
.radio input{position:absolute;opacity:0;pointer-events:none}
.radio b{font:var(--gw-text-body-12-med);color:var(--gw-color-black)}
.radio span{font:var(--gw-text-body-10-reg);color:var(--gw-color-neutral-900)}
.radio:has(input:checked){background:var(--gw-color-primary-25);border-color:var(--gw-color-primary-500)}
.radio:has(input:focus-visible){outline:var(--gw-focus-ring)}

.trusted{margin-top:var(--gw-space-120);text-align:center}   /* Figma: 582 -> 702 */
.trusted p{display:flex;align-items:center;justify-content:center;gap:var(--gw-space-12);
  font:var(--gw-text-body-12-sem);letter-spacing:var(--gw-text-body-12-sem-tracking);text-transform:uppercase;color:var(--gw-color-neutral-600)}
.stars{display:inline-flex;gap:2px;color:var(--gw-color-yellow-400)}
.stars svg{width:12px;height:12px}
.logos{margin-top:var(--gw-space-20);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
/* 10 logos, duplicated once, so translateX(-50%) loops seamlessly. Don't cap the
   width or hide children here — that is what stopped the marquee before. */
.logos-track{display:flex;align-items:center;width:max-content;
  animation:marquee 40s linear infinite}
/* Client logos are gushwork.ai's own set. Heights are per-logo, not flat: a flat
   height makes a compact badge read half the size of a long wordmark. Each one is
   scaled so its ink bounding box has the same geometric mean, i.e. equal optical area. */
.logos img{height:var(--lh);width:auto;margin-right:var(--gw-space-60);filter:grayscale(1);opacity:.7}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ==========================================================================
   QUOTE — fold/ Testimonial, Style=Single (moved to the top)
   ========================================================================== */
/* Figma 1890:42119 — 1240x388 card, 3px dots on a 22px pitch, quote capped at 782 */
.quote{position:relative;margin:var(--gw-space-60) auto 0;min-height:388px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--gw-space-32);text-align:center;
  border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-20);
  padding:var(--gw-space-40);background:var(--gw-color-white);overflow:hidden}
.quote::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;
  background-image:radial-gradient(var(--gw-color-neutral-200) 1.5px,transparent 1.5px);
  background-size:22px 22px}
.quote > *{position:relative}
.quote blockquote{max-width:782px}   /* let it break where Figma does, after "money" */
.quote blockquote em{font-style:normal;color:var(--gw-color-primary-500)}
.quote blockquote{font:var(--gw-text-h3);letter-spacing:var(--gw-text-h3-tracking);line-height:1.3;
  color:var(--gw-color-black)}
/* Figma 1868:33957 is 824x126 over three lines (~42 line-height); no token is an exact
   fit, h5 (32/1.2) is the nearest. Inferred from the bounding box, not measured type. */
.byline{display:flex;align-items:center;justify-content:center;gap:6px;text-align:left}
.avatar{flex:none;width:40px;height:32px;border-radius:var(--gw-radius-full);overflow:hidden;background:var(--gw-color-neutral-200)}
.quote .byline > span:last-child{display:flex;align-items:center;gap:9px}
.quote .byline > span:last-child::before{content:"";flex:none;width:3px;height:3px;border-radius:var(--gw-radius-full);background:var(--gw-color-neutral-400);order:1}
.quote .byline b{order:0}
.quote .byline > span:last-child > span{order:2}
.avatar img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.byline b{display:block;font:var(--gw-text-body-14-sem);letter-spacing:var(--gw-text-body-14-sem-tracking);color:var(--gw-color-neutral-900);white-space:nowrap}
.byline span{font:var(--gw-text-body-12-med);color:var(--gw-color-neutral-500)}

/* ---------- fold-shell ------------------------------------------------------
   ONE white frame wrapping every fold from "Sound familiar?" through the FAQs,
   the way homepage-neo does it. Measured off Figma 1890:42127: the frame is
   1400 wide inside a 1440 page (a 20px inset each side), 120px top and bottom
   padding, and the folds inside sit 180px apart. It needs a neutral-25 ground
   to read as a card, so the band carries that and the hero's grey runs on. */
.section--shell{position:relative;background:var(--gw-color-neutral-25);padding:20px;
  border-radius:0 0 var(--gw-radius-20) var(--gw-radius-20)}
/* the band's rounded bottom needs something behind it to round against; the footer
   is black, so a black strip sits under the last 20px of the band */
.section--shell::after{content:"";position:absolute;inset:auto 0 0;height:var(--gw-radius-20);
  background:var(--gw-color-black);z-index:-1}
.fold-shell{background:var(--gw-color-white);
  border-radius:var(--gw-radius-20);
  /* inset ring rather than a border: Figma's 1400 frame holds a 1240 column at
     x=80, so the stroke must not eat 2px out of the content box */
  box-shadow:var(--gw-shadow-s4),inset 0 0 0 1px var(--gw-color-neutral-100);
  padding:var(--gw-space-120) 0;overflow:hidden;
  display:flex;flex-direction:column;gap:180px}
.fold-shell > .section{padding:0}
/* Figma 1890:42127 — folds sit at x=80 inside the 1400 frame, i.e. the same
   page x=100 as the full-width sections above it. The frame already eats 20. */
.fold-shell .wrap{--gutter:max(16px,calc(clamp(16px,7vw,var(--gw-content-margin)) - 20px))}
@media (max-width:767px){
  /* Figma 1890:43786, measured off the 1:1 frame: the band is 8, the white frame
     pads 40 top and bottom (not 60), the folds sit 12 in from its edge (content
     lands at page x=20), and the ground is neutral-50 on phone, not neutral-25. */
  .section--shell{padding:8px;background:var(--gw-color-neutral-50)}
  .fold-shell{padding:var(--gw-space-40) 0;gap:var(--gw-space-80)}
  .fold-shell .wrap{--gutter:12px}
  .nav,.hero{background:var(--gw-color-neutral-50)}
  .hero::before{display:none}
}

/* ==========================================================================
   MESS → AI CRM — fold/ other with an animated illustration.
   Figma's video well is 1240x380, but that height is drawn around a 120x120 play
   button, not this illustration: the CRM panel is 394 tall and clips at 380. Kept at
   540 (the height it was built for) per "do as in html" for this fold.
   NEW ELEMENT, pending library review. Tokens only.
   ========================================================================== */
/* fold/ Video — the rendered HyperFrames composition replaces the hand-built
   illustration. 16:9 rather than Figma's 1240x380, which was drawn around a play
   button; the video is 1920x1080 and letterboxing it would waste the fold. */
/* Figma 1890:42138 draws the well at 1240x480. The video is 16:9, so it is
   covered and centre-cropped rather than letterboxed. */
.stage{position:relative;margin-top:var(--gw-space-60);aspect-ratio:1240/480;border-radius:var(--gw-radius-20);
  background:var(--gw-color-neutral-25);overflow:hidden}
.stage video{width:100%;height:100%;object-fit:cover;display:block}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.wires .tangle{fill:none;stroke:var(--gw-color-neutral-250);stroke-width:1.5;stroke-dasharray:4 5;animation:dash 6s linear infinite}
.wires .flow{fill:none;stroke:var(--gw-color-primary-400);stroke-width:1.5;stroke-dasharray:6 10;opacity:.75;animation:flow 1.1s linear infinite}
.wires .beam{fill:none;stroke:var(--gw-color-primary-500);stroke-width:3;stroke-dasharray:10 8;animation:flow .8s linear infinite}
@keyframes dash{to{stroke-dashoffset:-90}}
@keyframes flow{to{stroke-dashoffset:-32}}

.zone-tag{position:absolute;top:var(--gw-space-16);z-index:2;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:var(--gw-radius-full);font:var(--gw-text-body-12-sem);white-space:nowrap}
.zone-tag svg{width:14px;height:14px}
.zone-tag--before{left:var(--gw-space-16);background:var(--gw-color-red-50);color:var(--gw-color-red-600)}
.zone-tag--after{right:var(--gw-space-16);background:var(--gw-color-green-50);color:var(--gw-color-green-700)}

.mess{position:absolute;left:var(--gw-space-16);top:56px;bottom:var(--gw-space-16);width:40%;z-index:1}
.chip{position:absolute;left:var(--x);top:var(--y);display:inline-flex;align-items:center;gap:var(--gw-space-8);
  padding:6px 10px;background:var(--gw-color-white);border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-10);
  box-shadow:var(--gw-shadow-s2);white-space:nowrap;font:var(--gw-text-body-12-med);color:var(--gw-color-neutral-800);
  transform:rotate(var(--r,0deg));animation:bob 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.chip > svg{width:16px;height:16px;color:var(--gw-color-neutral-500)}
.chip .badge{margin-left:2px}
@keyframes bob{50%{transform:translate(2px,-5px) rotate(calc(var(--r,0deg) * -1))}}

.orb-wrap{position:absolute;left:52%;top:52%;transform:translate(-50%,-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--gw-space-12)}
.orb{position:relative;width:112px;height:112px;border-radius:var(--gw-radius-full);display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,var(--gw-color-primary-400),var(--gw-color-primary-600));
  box-shadow:0 0 0 8px var(--gw-color-primary-alpha-10),0 16px 40px var(--gw-color-primary-alpha-40)}
.orb img{width:44px;height:44px}
.orb::before,.orb::after{content:"";position:absolute;inset:-8px;border-radius:inherit;border:2px solid var(--gw-color-primary-300);animation:ping 2.4s ease-out infinite}
.orb::after{animation-delay:1.2s}
@keyframes ping{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}
.ring{position:absolute;inset:-18px;border-radius:inherit;border:2px dashed var(--gw-color-primary-200);animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spark{position:absolute;color:var(--gw-color-primary-400);animation:twinkle 1.8s ease-in-out infinite}
.spark svg{width:18px;height:18px}
.spark:nth-of-type(1){left:-30px;top:-12px}
.spark:nth-of-type(2){right:-34px;top:20px;animation-delay:.6s}
.spark:nth-of-type(3){left:-18px;bottom:-22px;animation-delay:1.2s}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(45deg)}}
.orb-label{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--gw-radius-full);
  background:var(--gw-color-black);color:var(--gw-color-white);font:var(--gw-text-body-12-sem);white-space:nowrap}
.orb-label svg{width:14px;height:14px;color:var(--gw-color-primary-300)}

.crm{position:absolute;right:var(--gw-space-16);top:calc(50% + 20px);transform:translateY(-50%);width:36%;z-index:1;
  background:var(--gw-color-white);border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-16);
  box-shadow:var(--gw-shadow-s3);display:flex;flex-direction:column;overflow:hidden}
.crm-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--gw-space-8);padding:var(--gw-space-12) var(--gw-space-16);border-bottom:1px solid var(--gw-color-neutral-100)}
.crm-bar span{display:flex;align-items:center;gap:var(--gw-space-8);font:var(--gw-text-body-14-sem);color:var(--gw-color-black)}
.crm-bar img{height:18px;width:auto}
.rev{padding:var(--gw-space-16);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gw-space-12);border-bottom:1px solid var(--gw-color-neutral-100)}
.rev small{display:block;font:var(--gw-text-body-12-med);color:var(--gw-color-neutral-600)}
.rev strong{display:flex;align-items:center;gap:6px;margin-top:2px;font:var(--gw-text-h5-bold);letter-spacing:var(--gw-text-h5-bold-tracking);color:var(--gw-color-black);font-variant-numeric:tabular-nums}
.rev strong svg{width:22px;height:22px;color:var(--gw-color-green-500)}
.bars{display:flex;align-items:flex-end;gap:6px;height:56px}
.bars i{width:12px;height:var(--h);border-radius:3px 3px 0 0;background:var(--gw-color-primary-200);transform-origin:bottom;transform:scaleY(.08);transition:transform .4s ease}
.play .bars i{transform:none;transition:transform .9s cubic-bezier(.2,.8,.2,1) var(--d)}
.bars i:last-child{background:var(--gw-color-primary-500)}
.pipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:var(--gw-space-12);background:var(--gw-color-neutral-25)}
.pipe h4{font:var(--gw-text-body-10-sem);letter-spacing:var(--gw-text-body-10-sem-tracking);color:var(--gw-color-neutral-600);margin:0 0 6px 2px}
.deal{background:var(--gw-color-white);border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-8);padding:6px 8px;margin-bottom:6px}
.deal b{display:block;font:var(--gw-text-body-10-sem);color:var(--gw-color-black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal span{display:block;font:var(--gw-text-body-10-reg);color:var(--gw-color-neutral-600)}
.feed{padding:var(--gw-space-12) var(--gw-space-16);display:flex;flex-direction:column;gap:var(--gw-space-8)}
.feed li{display:flex;align-items:center;gap:var(--gw-space-8);font:var(--gw-text-body-12-med);color:var(--gw-color-neutral-800)}
.tile{flex:none;width:24px;height:24px;border-radius:6px;background:var(--gw-color-black);color:var(--gw-color-white);display:grid;place-items:center}
.tile svg{width:14px;height:14px}
/* Staggered reveal: JS toggles .play on the group each loop; items appear in
   order (--d) and all reset together. */
.pop{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.play .pop{opacity:1;transform:none;transition:opacity .45s ease var(--d,0s),transform .45s ease var(--d,0s)}


/* ==========================================================================
   FEATURES — four alternating fold/ With image rows, each with an animated mock.
   Mocks are NEW ELEMENTS, pending library review. Tokens only.
   ========================================================================== */
.feats{margin-top:var(--gw-space-100);display:flex;flex-direction:column;gap:var(--gw-space-100)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gw-space-80);align-items:center}
.split--flip .split-text{order:2}
.split-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gw-space-20)}
.split-text h3{font:var(--gw-text-h4);letter-spacing:var(--gw-text-h4-tracking);color:var(--gw-color-black);text-wrap:balance}
.split-text .sub{font:var(--gw-text-body-18-med)}
.ticks{display:flex;flex-direction:column;gap:var(--gw-space-12);margin-top:var(--gw-space-12)}
.ticks li{display:flex;gap:var(--gw-space-4);align-items:center;font:var(--gw-text-body-16-med);letter-spacing:var(--gw-text-body-16-med-tracking);color:var(--gw-color-neutral-900)}
.ticks svg{width:16px;height:16px;color:var(--gw-color-primary-500)}
.slot{background:var(--gw-color-neutral-50);border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-20);padding:var(--gw-space-60);
  min-height:480px;display:flex;align-items:center}
.mock{width:100%;background:var(--gw-color-white);border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-16);box-shadow:var(--gw-shadow-s3);
  padding:var(--gw-space-20);display:flex;flex-direction:column;gap:var(--gw-space-12)}
.mock-head{display:flex;justify-content:space-between;align-items:center;gap:var(--gw-space-8);padding-bottom:var(--gw-space-12);border-bottom:1px solid var(--gw-color-neutral-100)}
.mock-head b{font:var(--gw-text-body-14-sem);color:var(--gw-color-black)}
.mock-head span:not(.badge){font:var(--gw-text-body-12-med);color:var(--gw-color-neutral-500)}
.ev{display:flex;gap:var(--gw-space-12);align-items:flex-start}
.ev .tile{width:32px;height:32px;border-radius:var(--gw-radius-8)}
.ev .tile svg{width:16px;height:16px}
.tile--muted{background:var(--gw-color-neutral-50);color:var(--gw-color-neutral-600)}
.tile--red{background:var(--gw-color-red-50);color:var(--gw-color-red-600)}
.tile--green{background:var(--gw-color-green-50);color:var(--gw-color-green-700)}
.tile--blue{background:var(--gw-color-primary-500)}
.ev p{font:var(--gw-text-body-14-med);color:var(--gw-color-black)}
.ev small{display:block;font:var(--gw-text-body-12-reg);color:var(--gw-color-neutral-500)}
.bubble{margin-top:6px;padding:var(--gw-space-8) var(--gw-space-12);border-radius:12px 12px 12px 2px;background:var(--gw-color-neutral-25);border:1px solid var(--gw-color-neutral-100);
  font:var(--gw-text-body-14-reg);color:var(--gw-color-neutral-800)}
.bubble--blue{background:var(--gw-color-primary-25);border-color:var(--gw-color-primary-100)}
.typing{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.typing i{width:4px;height:4px;border-radius:50%;background:var(--gw-color-primary-400);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.2}}
/* Something visible that disappears partway through the loop */
.unpop{transition:opacity .3s ease}
.play .unpop{opacity:0;transition:opacity .3s ease var(--d,0s)}
.stack{display:grid;justify-items:end;align-items:center}
.stack > *{grid-area:1/1}

/* Invoice generation */
.dealrow{display:flex;align-items:center;justify-content:space-between;gap:var(--gw-space-12);padding:var(--gw-space-12);background:var(--gw-color-neutral-25);border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-12)}
.dealrow b{display:block;font:var(--gw-text-body-14-sem);color:var(--gw-color-black)}
.dealrow small{font:var(--gw-text-body-12-reg);color:var(--gw-color-neutral-600)}
.fakebtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--gw-radius-8);background:var(--gw-color-primary-500);color:var(--gw-color-white);font:var(--gw-text-button-12);white-space:nowrap}
.fakebtn svg{width:14px;height:14px}
.play .fakebtn{animation:press .5s ease .6s}
@keyframes press{50%{transform:scale(.92);background:var(--gw-color-primary-700)}}
.invoice{border:1px dashed var(--gw-color-neutral-250);border-radius:var(--gw-radius-12);padding:var(--gw-space-16);display:flex;flex-direction:column;gap:var(--gw-space-8)}
.inv-top{display:flex;justify-content:space-between;align-items:flex-start}
.inv-top b{font:var(--gw-text-body-16-sem);color:var(--gw-color-black)}
.inv-top small{display:block;font:var(--gw-text-body-12-reg);color:var(--gw-color-neutral-500)}
.line{display:flex;justify-content:space-between;gap:var(--gw-space-12);padding-block:6px;border-bottom:1px solid var(--gw-color-neutral-50);font:var(--gw-text-body-12-med);color:var(--gw-color-neutral-700)}
.line b{font:var(--gw-text-body-12-sem);color:var(--gw-color-black)}
.total{display:flex;justify-content:space-between;align-items:center;padding-top:4px;font:var(--gw-text-body-14-sem);color:var(--gw-color-black)}
.total strong{font:var(--gw-text-h7-bold);letter-spacing:var(--gw-text-h7-bold-tracking)}

/* Pipeline view */
.kb{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gw-space-8)}
.kb-col{background:var(--gw-color-neutral-25);border-radius:var(--gw-radius-10);padding:var(--gw-space-8);min-height:240px}
.kb-col h4{display:flex;justify-content:space-between;margin:0 2px var(--gw-space-8);font:var(--gw-text-body-12-sem);color:var(--gw-color-neutral-700)}
.kb-col h4 i{font-style:normal;color:var(--gw-color-neutral-500)}
.kb .deal{padding:var(--gw-space-8);border-radius:var(--gw-radius-8);margin-bottom:var(--gw-space-8)}
.kb .deal b{font:var(--gw-text-body-12-sem)}
.kb .deal span{font:var(--gw-text-body-12-reg)}
.mover{position:absolute;top:calc(28px + 2 * 62px);left:calc(100% / 3 + 8px);width:calc(100% / 3 - 21px);z-index:2;
  box-shadow:var(--gw-shadow-s3);border-color:var(--gw-color-primary-300)!important;transition:left .4s ease}
.play .mover{left:calc(200% / 3 + 11px);transition:left .9s cubic-bezier(.6,0,.2,1) 1.2s}
.mover .badge{margin-top:4px}

.ic{flex:none;width:40px;height:40px;border-radius:var(--gw-radius-8);background:var(--gw-color-black);color:var(--gw-color-white);display:grid;place-items:center}
.ic svg{width:20px;height:20px}

/* ==========================================================================
   AGENTS — fold/AI Agents: staggered marquee rows of Agent Cards
   ========================================================================== */
.agents{margin-top:calc(var(--gw-space-60) - 24px);margin-bottom:-24px;padding-block:24px;
  display:flex;flex-direction:column;gap:var(--gw-space-12);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lane{display:contents}
.agents-row{display:flex;width:max-content;animation:marquee 45s linear infinite;
  will-change:transform;backface-visibility:hidden}
.lane:nth-child(2) .agents-row{animation-direction:reverse;margin-left:80px}
.lane:nth-child(3) .agents-row{animation-duration:55s;margin-left:40px}
.agent{width:352px;height:92px;margin-right:var(--gw-space-12);flex:none;display:flex;align-items:center;gap:var(--gw-space-12);padding:var(--gw-space-16);
  background:var(--gw-color-white);border:1.5px solid var(--gw-color-neutral-50);border-radius:var(--gw-radius-16);
  transition:box-shadow .2s ease}
.agent:hover{box-shadow:var(--gw-shadow-s3)}
.agent .ic{flex:none;width:60px;height:60px;border-radius:var(--gw-radius-8);background:var(--gw-color-white);color:var(--gw-color-primary-300)}
.agent > div{display:flex;flex-direction:column;gap:var(--gw-space-4);min-width:0}
.agent b{font:var(--gw-text-h8-bold);letter-spacing:var(--gw-text-h8-bold-tracking);color:var(--gw-color-black)}
.agent span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--gw-text-body-14-reg);letter-spacing:var(--gw-text-body-14-reg-tracking);color:var(--gw-color-neutral-800)}
.center-cta{margin-top:var(--gw-space-60);display:flex;justify-content:center}

/* ==========================================================================
   TIMELINE — fold/Timeline
   ========================================================================== */
/* Figma 1890:42716 — four white step cards, 302.5 wide on a 10px gap, 224 tall.
   The last one is the arrival state: neutral/200 rim, S4, primary title + icon. */
.steps{margin:var(--gw-space-60) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.step{min-height:224px;padding:var(--gw-space-24);display:flex;flex-direction:column;justify-content:space-between;
  background:var(--gw-color-white);border:2px solid var(--gw-color-neutral-50);border-radius:var(--gw-radius-20);
  box-shadow:var(--gw-shadow-s2);overflow:clip}
.step-top{display:flex;align-items:center;justify-content:space-between}
.step-no{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--gw-radius-8);
  background:var(--gw-color-black);color:var(--gw-color-white);
  font:var(--gw-text-body-12-sem);letter-spacing:var(--gw-text-body-12-sem-tracking)}
.step-top svg{width:20px;height:20px;color:var(--gw-color-neutral-400)}
.step-body{display:flex;flex-direction:column;gap:var(--gw-space-8)}
.step-body h3{font:var(--gw-text-h7-sem);letter-spacing:var(--gw-text-h7-sem-tracking);color:var(--gw-color-black)}
.step-body p{font:var(--gw-text-body-16-med);letter-spacing:var(--gw-text-body-16-med-tracking);color:var(--gw-color-neutral-600)}
.step--on{border-color:var(--gw-color-neutral-200);box-shadow:var(--gw-shadow-s4)}
.step--on .step-top svg,.step--on .step-body h3{color:var(--gw-color-primary-500)}

/* ==========================================================================
   COMPARISON — fold/Comparison Table
   ========================================================================== */
.table-scroll{margin-top:var(--gw-space-60);overflow-x:auto}
table.cmp{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;
  border:1.5px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-20);overflow:hidden}
.cmp th,.cmp td{height:64px;padding:0 var(--gw-space-20);border-right:1.5px solid var(--gw-color-neutral-100);
  border-bottom:1.5px solid var(--gw-color-neutral-100);text-align:center;vertical-align:middle}
.cmp tr > :last-child{border-right:0}
.cmp tbody tr:last-child > *{border-bottom:0}
.cmp thead th{height:64px;background:var(--gw-color-white);border-bottom-color:var(--gw-color-neutral-200);
  /* OFF-TOKEN, measured 1890:42668: Inter Bold 16/24 — no bold 16 body token exists */
  font:700 16px/24px var(--gw-font-body);color:var(--gw-color-neutral-900)}
.cmp thead th img{height:20px;width:auto;display:inline-block;vertical-align:middle}
.cmp tbody th{background:var(--gw-color-neutral-25);text-align:left;font:var(--gw-text-body-16-med);color:var(--gw-color-neutral-900)}
.cmp tbody th{width:364px}
.cmp td{width:292px;background:var(--gw-color-white);font:var(--gw-text-body-14-med);color:var(--gw-color-neutral-900)}
.cmp td.gw{background:var(--gw-color-primary-25);color:var(--gw-color-primary-500)}
.cmp-mobile{display:none}

/* ==========================================================================
   FAQs
   ========================================================================== */
.faq{display:grid;grid-template-columns:minmax(0,480px) minmax(0,660px);gap:var(--gw-space-100);justify-content:space-between}
.faq-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gw-space-20)}
.faq-head .sub a{color:var(--gw-color-primary-500);text-decoration:underline;text-underline-position:from-font}
.faq-list{display:flex;flex-direction:column;gap:var(--gw-space-8)}
/* GW Ads Library t9rRxJODIVZ4N6CnrGdMhC/43:29915 — the accordion gained a
   neutral/50 rim; row height 58 (12 + 32 caret + 12 + 2 border). */
details,.ask-row{border:1px solid var(--gw-color-neutral-50);border-radius:var(--gw-radius-12);padding:var(--gw-space-12)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--gw-space-16);
  font:var(--gw-text-body-18-sem);letter-spacing:var(--gw-text-body-18-sem-tracking);color:var(--gw-color-neutral-800)}
summary::-webkit-details-marker{display:none}
/* NEW ELEMENT — 'Ask anything else'. Design ref: GW Ads Library
   t9rRxJODIVZ4N6CnrGdMhC / 43:30355 + 43:30376. A question typed here joins the list
   as its own row carrying a 'Your Question' badge. It is not a conversation: nothing
   answers, and there is no follow-up thread. Tokens only, pending library review. */
/* The 'Your Question' badge and the composer row. Design ref: GW Ads Library
   43:30355 + 43:30376. A question typed here becomes its own accordion row,
   answered once by /api/faq. Single-shot — there is no follow-up thread. */
/* An asked row is marked by a Sparkle rather than a badge, and carries a slightly
   stronger rim than the authored rows. Ref 43:35127. */
details.asked{border-color:var(--gw-color-neutral-100)}
summary .q{display:flex;align-items:center;gap:var(--gw-space-8);flex:1;min-width:0}
summary .ask-spark{flex:none;width:14px;height:14px;color:var(--gw-color-primary-500)}
/* thinking-state 65:1265 — three bars, neutral/100 at 45%, 12 tall, 8 apart.
   Figma can't show motion; the pulse is the one thing added on top. */
.thinking{margin-top:var(--gw-space-12);display:flex;flex-direction:column;gap:var(--gw-space-8)}
.thinking i{display:block;height:12px;border-radius:var(--gw-radius-full);
  background:var(--gw-color-neutral-100);opacity:.45;animation:thinking 1.4s ease-in-out infinite}
.thinking i:nth-child(1){width:66%}
.thinking i:nth-child(2){width:82%;animation-delay:.16s}
.thinking i:nth-child(3){width:57%;animation-delay:.32s}
@keyframes thinking{0%,100%{opacity:.45}50%{opacity:.18}}
.ask-row{display:flex;align-items:center;gap:var(--gw-space-16)}
.ask-row:focus-within{border-color:var(--gw-color-neutral-100)}
.ask-row input{flex:1;min-width:0;height:32px;border:0;background:none;outline:none;
  font:var(--gw-text-body-18-sem);letter-spacing:var(--gw-text-body-18-sem-tracking);color:var(--gw-color-neutral-800)}
.ask-row input::placeholder{color:var(--gw-color-neutral-500);font-weight:500}
.ask-go{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:var(--gw-radius-8);background:var(--gw-color-neutral-50);color:var(--gw-color-neutral-800)}
.ask-go svg{width:16px;height:16px}
.ask-go:disabled{color:var(--gw-color-neutral-400);cursor:default}

.caret{width:32px;height:32px;border-radius:var(--gw-radius-8);background:var(--gw-color-neutral-50);display:grid;place-items:center;flex:none}
.caret svg{width:16px;height:16px;transition:transform .2s ease}
details[open] .caret svg{transform:rotate(180deg)}
details p{margin-top:var(--gw-space-12);padding:0;font:var(--gw-text-body-16-med);letter-spacing:var(--gw-text-body-16-med-tracking);color:var(--gw-color-neutral-600)}

/* ==========================================================================
   CTA — fold/ CTA, Color=Blue
   ========================================================================== */
.cta{display:grid;grid-template-columns:minmax(0,1fr) 600px;min-height:440px;padding-inline:4px;background:var(--gw-color-primary-500);
  border-radius:var(--gw-radius-16);overflow:clip;filter:drop-shadow(0 16px 16px rgba(88,92,95,.1))}
.cta-body{padding-left:var(--gw-space-60);display:flex;flex-direction:column;justify-content:center;gap:var(--gw-space-40)}
.cta-body h2{font:var(--gw-text-h3);letter-spacing:var(--gw-text-h3-tracking);color:var(--gw-color-white)}
.cta-body p{margin-top:var(--gw-space-16);font:var(--gw-text-body-16-med);color:var(--gw-color-neutral-alpha-80-white)}
.cta-actions{display:flex;align-items:center;gap:var(--gw-space-8);flex-wrap:wrap}
.cta-actions small{font:var(--gw-text-body-14-med);letter-spacing:var(--gw-text-body-14-med-tracking);color:var(--gw-color-neutral-alpha-80-white)}
.cta-img{position:relative;display:grid;place-items:center}
/* Figma 1890:42791 draws the lattice as 143 discrete 40px cells with a scattered
   edge, not a full grid, with two cells filled. Transcribed cell for cell. */
.cta-lattice{position:absolute;inset:0;width:100%;height:100%}
.tcard{position:relative}
.tcard{width:360px;max-width:calc(100% - 32px);background:var(--gw-color-neutral-25);border:1px solid var(--gw-color-neutral-100);
  border-radius:20px 20px 20px 2px;padding:var(--gw-space-20);display:flex;flex-direction:column;gap:var(--gw-space-40);box-shadow:var(--gw-shadow-s2)}
.tcard p{font:var(--gw-text-body-16-med);color:var(--gw-color-neutral-700)}
.tcard .avatar{width:56px;height:40px}
/* Figma 1712:2153 — the byline is left-aligned, avatar frame 56 then a 12 gap */
.tcard .byline{justify-content:flex-start;gap:var(--gw-space-12)}

/* Figma 1868:35081 — the footer WRAPS the CTA: black ground, p-16, gap-20,
   radius/8 on the top corners only, CTA block then the copyright line. */
.footer{background:var(--gw-color-black);
  padding:var(--gw-space-16);padding-bottom:calc(var(--gw-space-16) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;gap:var(--gw-space-20)}
.footer .cta{width:100%}
/* Figma sets the copyright at neutral/600. That is ~3.9:1 on black and misses the
   4.5:1 floor R9 was written for — following Figma per the design-owner ruling. */
.footer .legal{font:var(--gw-text-body-12-med);line-height:12px;letter-spacing:var(--gw-text-body-12-med-tracking);color:var(--gw-color-neutral-600)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .logos-track,.agents-row{transform:none}
}

/* ==========================================================================
   TABLET — the stage is too tight for three zones below 1100
   ========================================================================== */
@media (max-width:1099px){
  .mess{width:42%}
  .orb-wrap{left:54%}
  .orb{width:88px;height:88px}
  .crm{width:34%}
  .chip{font-size:11px}
  .hero-grid{gap:var(--gw-space-40)}
}

/* ==========================================================================
   PHONE — Breakpoint=Phone
   ========================================================================== */
@media (max-width:767px){
  .section{padding-block:var(--gw-space-60)}
  .section--flush{padding-top:0}
  .wrap{max-width:none}
  .h3{font:var(--gw-text-h4);letter-spacing:var(--gw-text-h4-tracking)}
  /* every fold heading is left-aligned on phone */
  .heading{align-items:flex-start;text-align:left}
  .sub{font:var(--gw-text-body-16-med);letter-spacing:var(--gw-text-body-16-med-tracking)}

  .hero{padding:calc(var(--nav-h) + var(--gw-space-40)) 0 var(--gw-space-60)}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--gw-space-24)}
  .hero h1{font:var(--gw-text-h3);letter-spacing:var(--gw-text-h3-tracking)}
  .hero-sub{font:var(--gw-text-body-16-med)}
  /* Figma 1890:43786 orders the phone hero text -> form -> ticks, and centres the
     ticks. display:contents flattens hero-text so the ticks can follow the form. */
  .hero-text{display:contents}
  .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero .eyebrow{align-self:flex-start}
  .hero h1,.hero-sub{margin-top:var(--gw-space-20)}
  .lane{display:block;overflow:hidden}
  .checks-strip{display:block;margin-top:var(--gw-space-32);height:36px;overflow:hidden;
    margin-inline:calc(var(--gutter) * -1);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .checks{flex-direction:row;align-items:center;width:max-content;gap:0;margin:0;
    animation:marquee 26s linear infinite}
  .checks li{height:36px;margin-right:var(--gw-space-12)}
  .checks li[data-dup]{display:flex}
  .form{margin-top:var(--gw-space-32)}
  .form{padding:var(--gw-space-20)}
  .radios{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gw-space-8)}
  .radio{min-height:76px;padding:var(--gw-space-8)}
  .trusted{margin-top:var(--gw-space-48)}
  .trusted p{flex-direction:column;gap:var(--gw-space-12)}
  .logos{margin-top:var(--gw-space-16)}
  .logos img{height:calc(var(--lh) * .72)}
  .logos img{margin-right:var(--gw-space-40)}

  .quote{min-height:0;padding:var(--gw-space-32) var(--gw-space-20);gap:var(--gw-space-40);
    align-items:flex-start;justify-content:flex-start;text-align:left}
  .quote blockquote{font:var(--gw-text-h5);letter-spacing:var(--gw-text-h5-tracking);line-height:1.3}
  /* phone byline: avatar left, name over role, no bullet */
  .quote .byline{width:100%;justify-content:flex-start;gap:var(--gw-space-12)}
  .quote .byline > span:last-child{flex-direction:column;align-items:flex-start;gap:0}
  .quote .byline > span:last-child::before{display:none}

  .stage{margin-top:var(--gw-space-60)}
  .mess{position:relative;left:auto;top:auto;bottom:auto;width:100%;height:330px}
  .chip{left:var(--mx);top:var(--my);font-size:11px;padding:5px 8px}
  .chip--wide{display:none}
  .orb-wrap{position:relative;left:auto;top:auto;transform:none}
  .orb{width:84px;height:84px}
  .orb img{width:34px;height:34px}
  .crm{position:relative;right:auto;top:auto;transform:none;width:100%}
  .feed{padding-bottom:var(--gw-space-16)}
  .zone-tag--after{display:none}

  .feats{margin-top:var(--gw-space-60);gap:var(--gw-space-60)}
  .split{grid-template-columns:1fr;gap:var(--gw-space-24)}
  .split .slot{order:-1}
  .split--flip .split-text{order:0}
  .split-text{gap:var(--gw-space-16)}
  .split-text h3{font:var(--gw-text-h5-bold);letter-spacing:var(--gw-text-h5-bold-tracking)}
  .split-text .sub{font:var(--gw-text-body-16-med)}
  .slot{padding:var(--gw-space-12);min-height:0}
  .mock{padding:var(--gw-space-16)}
  .kb-col{min-height:260px;padding:6px}
  .kb-col h4 i{display:none}
  .mover{top:calc(28px + 2 * 58px)}
  .kb .deal{padding:6px}
  .agents{margin-top:calc(var(--gw-space-60) - 24px)}
  .agent{min-width:230px}
  .center-cta .btn{width:100%}

  .steps{grid-template-columns:1fr;gap:var(--gw-space-12)}
  .step{min-height:0;gap:var(--gw-space-20)}

  /* Figma 1890:43786 — on phone the table becomes a switcher: pick the competitor,
     then one card per feature with the Gushwork answer highlighted. */
  .table-scroll{display:none}
  .cmp-mobile{display:block;margin-top:var(--gw-space-40)}
  .cmp-switch{display:flex;flex-direction:column;gap:0;margin-bottom:var(--gw-space-12)}
  .cmp-tab{width:100%;padding:var(--gw-space-12);border:1px solid transparent;border-radius:var(--gw-radius-12);
    background:var(--gw-color-neutral-100);color:var(--gw-color-neutral-700);
    font:var(--gw-text-body-14-med);letter-spacing:var(--gw-text-body-14-med-tracking);cursor:pointer;text-align:center}
  .cmp-tab[aria-selected="true"]{background:var(--gw-color-white);border-color:var(--gw-color-neutral-100);
    color:var(--gw-color-neutral-900);box-shadow:var(--gw-shadow-s4);position:relative;z-index:1}
  .cmp-rows{display:flex;flex-direction:column;gap:var(--gw-space-12)}
  .cmp-row{border:1px solid var(--gw-color-neutral-100);border-radius:var(--gw-radius-12);overflow:hidden}
  .cmp-row-head{padding:var(--gw-space-12) var(--gw-space-16);background:var(--gw-color-neutral-25);
    border-bottom:1px solid var(--gw-color-neutral-100);
    font:var(--gw-text-body-14-sem);letter-spacing:var(--gw-text-body-14-sem-tracking);color:var(--gw-color-neutral-900)}
  .cmp-pair{display:grid;grid-template-columns:1fr 1fr;align-items:center;border-bottom:1px solid var(--gw-color-neutral-100)}
  .cmp-row > .cmp-pair:last-child{border-bottom:0}
  .cmp-pair span{padding:var(--gw-space-16) var(--gw-space-12);font:var(--gw-text-body-14-sem);
    letter-spacing:var(--gw-text-body-14-sem-tracking);color:var(--gw-color-neutral-900)}
  .cmp-pair b{padding:var(--gw-space-16) var(--gw-space-12);font:var(--gw-text-body-14-med);
    letter-spacing:var(--gw-text-body-14-med-tracking);color:var(--gw-color-neutral-900);text-align:center;
    border-left:1px solid var(--gw-color-neutral-100)}
  .cmp-pair--gw b{background:var(--gw-color-primary-25);color:var(--gw-color-primary-500)}
  .cmp-rows[data-on="a"] [data-col="b"],.cmp-rows[data-on="b"] [data-col="a"]{display:none}

  .faq{grid-template-columns:1fr;gap:var(--gw-space-40)}
  /* a long question plus the badge does not fit one phone line */
  summary,.ask-row input{font:var(--gw-text-body-16-sem);letter-spacing:var(--gw-text-body-16-sem-tracking)}
  summary{flex-wrap:nowrap;gap:var(--gw-space-12)}
  .heading br,.faq-head br,.cta-body br{display:none}
  summary{font:var(--gw-text-body-16-sem)}
  details p{padding-right:0;font:var(--gw-text-body-14-med)}

  .cta{grid-template-columns:minmax(0,1fr);min-height:0}
  .cta-body{padding:var(--gw-space-32) var(--gw-space-20)}
  .cta-body h2{font:var(--gw-text-h4);letter-spacing:var(--gw-text-h4-tracking)}
  .cta-actions{flex-direction:column;align-items:stretch;gap:var(--gw-space-12)}
  .cta-actions .btn{width:100%}
  .cta-actions small{text-align:center}

  /* last in the block on purpose: these have to outrank the per-marquee
     overflow:hidden set further up. */
  [data-drag]{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
  [data-drag]::-webkit-scrollbar{display:none}
  [data-drag]:active{cursor:grabbing}
  [data-drag] > *{animation:none!important}
  .cta-img{min-height:300px;padding:var(--gw-space-32) var(--gw-space-16)}
  .tcard{width:100%;max-width:360px}

}