/* ============================================================
   Feedwrk — DIRECTION layer: the "in-between" (Stripe polish ×
   Semrush energy) on the voltage + cool-slate base.
   LANDING ONLY — the app stays calm (no gradients/pastels there).
   Load last, after landing-real.css. Proposed (LEARNINGS L-056).

   The moves:
   1. Headlines dial 800 → 600, two-tone (dark key + muted cont.).  [Stripe]
   2. A tasteful fluid gradient wash behind the hero mesh.          [Stripe]
   3. Soft tinted metrics band + soft data cards.                   [Semrush]
   Voltage stays the anchor; signals still mean status only.
   ============================================================ */

/* 1 — headline weight + two-tone continuation
   .mut = --ink-3 (Stripe's neutral-500 role): AA-safe on white and still
   clearly muted next to the ink-1 lead. ink-4 was borderline at h2 sizes. */
.fw-l-head,.fw-l-display,.fw-l-h2{font-weight:600}
.fw-l-head .mut,.fw-l-display .mut,.fw-l-h2 .mut{color:var(--ink-3)}

/* 2 — the hero MELT (Semrush-style vertical melt, retold in brand tints).
   The page's ONE gradient moment (L-057): voltage-tinted air at the top
   melts through an icy azure into pure white just before the first band;
   one azure breath top-right, one voltage breath top-left. STATIC — the
   node mesh above it provides the life. Sits at z-2, under the canvas. */
.fw-l-gradhero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(46% 42% at 86% 10%, color-mix(in oklab, var(--l-azure) 17%, transparent), transparent 70%),
    radial-gradient(38% 34% at 6% 4%, color-mix(in oklab, var(--voltage) 10%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--voltage) 8%, var(--canvas)) 0%,
      color-mix(in oklab, var(--l-azure) 6%, #fff) 64%,
      #fff 100%)}

/* 3 — soft tinted metrics band + data cards (Semrush energy, cool + restrained) */
.fw-l-band{background:linear-gradient(180deg, color-mix(in oklab, var(--voltage) 5%, var(--canvas)), var(--canvas));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fw-l-band .wrap{max-width:var(--l-maxw);margin:0 auto;padding:var(--l-sec-y) 24px}
.fw-l-dgrid{display:grid;grid-template-columns:1.1fr 1.4fr;gap:20px;align-items:stretch;margin-top:26px}
@media (max-width:820px){.fw-l-dgrid{grid-template-columns:1fr}}
.fw-l-dcard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--l-r-lg);box-shadow:var(--shadow-sm);padding:26px}
/* grey grading (Semrush watch-out): small labels take ink-3 — ink-4 only ≥14px */
.fw-l-dcard .lab{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fw-l-dkpi .n{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--ink-1);font-variant-numeric:tabular-nums}
.fw-l-dkpi .k{font-size:12px;color:var(--ink-3);margin-top:2px}
/* multi-series line (Semrush): 3 series in the chart palette */
.fw-l-mline{width:100%;height:auto;display:block}
.fw-l-mline .grid{stroke:var(--rule);vector-effect:non-scaling-stroke}
.fw-l-mline .s1{stroke:var(--chart-1)} .fw-l-mline .s2{stroke:var(--chart-2)} .fw-l-mline .s3{stroke:var(--chart-3)}
.fw-l-mline path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* ============================================================
   4 — DARK ACCENTS: deliberate dark bands for rhythm + contrast.
   The light body carries the work; a dark band lands the big
   moments (impact stats, waiting-list, final CTA). COLOUR IS
   BUDGETED here (L-076): one bright accent per band; module hue
   in one small dose per element (dot, whisper rule, value);
   chips neutral; glows are 1px rings, not halos. Landing only;
   the app never goes dark. Proposed (LEARNINGS L-059 + L-076).
   ============================================================ */

/* two-tone headline continuation must flip light on dark (was ink-4 → invisible) */
.fw-l-dark .fw-l-head .mut,.fw-l-dark .fw-l-h2 .mut,.fw-l-dark .mut{color:var(--l-on-dark-3)}

/* accent word — voltage on light, bright citrus on dark */
.fw-l-accent{color:var(--voltage)}
.fw-l-dark .fw-l-accent{color:var(--l-citrus-bright)}

/* dark band — flat surface with a hairline top/bottom (no gradient glow) */
.fw-l-darkband{border-top:1px solid var(--l-rule-dark);border-bottom:1px solid var(--l-rule-dark)}

/* pictograms keep their hue on dark — tinted fill + a 1px ring (no halo glow) */
.fw-l-dark .fw-l-picto{background:color-mix(in oklab,#fff 5%,transparent);border-color:var(--l-rule-dark-strong)}
.fw-l-dark .fw-l-picto--voltage{color:color-mix(in oklab,var(--voltage) 44%,#fff);background:color-mix(in oklab,var(--voltage) 22%,transparent);border-color:transparent;box-shadow:0 0 0 1px color-mix(in oklab,var(--voltage) 32%,transparent)}
.fw-l-dark .fw-l-picto--azure{color:color-mix(in oklab,var(--l-azure) 46%,#fff);background:color-mix(in oklab,var(--l-azure) 20%,transparent);border-color:transparent;box-shadow:0 0 0 1px color-mix(in oklab,var(--l-azure) 30%,transparent)}
.fw-l-dark .fw-l-picto--emerald{color:color-mix(in oklab,var(--l-emerald) 46%,#fff);background:color-mix(in oklab,var(--l-emerald) 20%,transparent);border-color:transparent;box-shadow:0 0 0 1px color-mix(in oklab,var(--l-emerald) 28%,transparent)}
.fw-l-dark .fw-l-picto--gold{color:color-mix(in oklab,var(--l-gold) 52%,#fff);background:color-mix(in oklab,var(--l-gold) 20%,transparent);border-color:transparent;box-shadow:0 0 0 1px color-mix(in oklab,var(--l-gold) 28%,transparent)}
.fw-l-dark .fw-l-picto--violet{color:color-mix(in oklab,var(--l-violet) 48%,#fff);background:color-mix(in oklab,var(--l-violet) 22%,transparent);border-color:transparent;box-shadow:0 0 0 1px color-mix(in oklab,var(--l-violet) 32%,transparent)}
.fw-l-dark .fw-l-picto--coral{color:color-mix(in oklab,var(--l-coral) 48%,#fff);background:color-mix(in oklab,var(--l-coral) 20%,transparent);border-color:transparent;box-shadow:0 0 0 1px color-mix(in oklab,var(--l-coral) 28%,transparent)}
.fw-l-dark .fw-l-picto--fuchsia{color:color-mix(in oklab,var(--l-fuchsia) 46%,#fff);background:color-mix(in oklab,var(--l-fuchsia) 20%,transparent);border-color:transparent;box-shadow:0 0 0 1px color-mix(in oklab,var(--l-fuchsia) 30%,transparent)}

/* solid bright numbers on dark (no gradient) */
.fw-l-dark .fw-l-stat .n{background:none;-webkit-text-fill-color:var(--l-voltage-bright);color:var(--l-voltage-bright)}
.fw-l-dark .fw-l-dkpi .n{color:var(--l-on-dark-1)} .fw-l-dark .fw-l-dkpi .k{color:var(--l-on-dark-2)}

/* ---- big-number announcement (waiting list / impact) ---- */
.fw-l-bigstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:34px 24px;margin-top:8px}
.fw-l-bignum .n{font:700 clamp(2.7rem,6vw,4.6rem)/.92 var(--l-font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--l-voltage-bright)}
.fw-l-bignum.is-citrus .n{color:var(--l-citrus-bright)}
.fw-l-bignum .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--l-on-dark-2);margin-top:12px;max-width:20ch;line-height:1.5}

/* ---- accent pills + waiting-list row ---- */
.fw-l-pills{display:flex;gap:8px;flex-wrap:wrap}
.fw-l-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:7px 13px;border-radius:var(--r-pill);
  background:color-mix(in oklab,#fff 6%,transparent);border:1px solid var(--l-rule-dark-strong);color:var(--l-on-dark-2)}
.fw-l-pill.is-accent{background:color-mix(in oklab,var(--voltage) 24%,transparent);border-color:transparent;color:color-mix(in oklab,var(--voltage) 40%,#fff)}
.fw-l-waitrow{display:flex;align-items:center;gap:18px 26px;flex-wrap:wrap;margin-top:44px}
.fw-l-inputcta--dark{background:color-mix(in oklab,#fff 6%,transparent);border-color:var(--l-rule-dark-strong)}
.fw-l-inputcta--dark input{color:var(--l-on-dark-1)}
.fw-l-inputcta--dark input::placeholder{color:var(--l-on-dark-3)}

/* ---- richer dark CARDS & ELEMENTS (module hues; bright, glowing) ---- */
/* generic hue setters — set --h (base hue) + --hb (bright, for dark) */
.fw-l-h-voltage{--h:var(--voltage);--hb:var(--l-voltage-bright)}
.fw-l-h-azure{--h:var(--l-azure);--hb:var(--l-azure-bright)}
.fw-l-h-emerald{--h:var(--l-emerald);--hb:var(--l-emerald-bright)}
.fw-l-h-gold{--h:var(--l-gold);--hb:var(--l-gold-bright)}
.fw-l-h-violet{--h:var(--l-violet);--hb:var(--l-violet-bright)}
.fw-l-h-coral{--h:var(--l-coral);--hb:var(--l-coral-bright)}
.fw-l-h-fuchsia{--h:var(--l-fuchsia);--hb:var(--l-fuchsia-bright)}

/* the shared data card, on dark + accent variants */
.fw-l-dark .fw-l-dcard{background:var(--l-dark-2);border-color:var(--l-rule-dark);box-shadow:none}
.fw-l-dark .fw-l-dcard .lab{color:var(--l-on-dark-3)}
.fw-l-dcard--glow{box-shadow:0 0 0 1px color-mix(in oklab,var(--h,var(--voltage)) 26%,transparent),0 18px 44px -32px color-mix(in oklab,var(--h,var(--voltage)) 36%,transparent)}
.fw-l-dcard--ring{border-color:color-mix(in oklab,var(--h,var(--voltage)) 52%,transparent)}

/* module card — dark tile, glowing hue icon, accent top rule, bright value */
.fw-l-mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.fw-l-mcard{position:relative;background:var(--l-dark-2);border:1px solid var(--l-rule-dark);border-radius:var(--l-r-lg);padding:22px;overflow:hidden}
/* hue whisper, not a rainbow row — the module hue desaturated into the dark rule */
.fw-l-mcard::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:color-mix(in oklab,var(--mh,var(--hb,var(--l-voltage-bright))) 32%,var(--l-dark-3))}
.fw-l-mcard .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--hb,var(--l-voltage-bright));
  background:color-mix(in oklab,var(--h,var(--voltage)) 20%,transparent);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--h,var(--voltage)) 30%,transparent),0 12px 30px -14px color-mix(in oklab,var(--h,var(--voltage)) 70%,transparent)}
.fw-l-mcard .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.fw-l-mcard h4{font:600 15px/1.2 var(--l-font-display);letter-spacing:-.01em;color:var(--l-on-dark-1);margin:14px 0 5px}
.fw-l-mcard p{margin:0;font-size:12.5px;line-height:1.5;color:var(--l-on-dark-2)}
.fw-l-mcard .v{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--mh,var(--hb,var(--l-voltage-bright)));margin-top:14px}

/* module tags on dark — MUTED: neutral text + border, hue carried by the dot
   only (colour-budget rule, L-076: one small hue dose per element) */
.fw-l-tags{display:flex;flex-wrap:wrap;gap:8px}
.fw-l-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  padding:6px 12px;border-radius:var(--r-pill);color:var(--l-on-dark-2);
  background:color-mix(in oklab,#fff 5%,transparent);
  border:1px solid var(--l-rule-dark-strong)}
.fw-l-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hb,var(--l-voltage-bright));flex:none}

/* segmented hue bar — solid colour blocks, no gradient */
.fw-l-huebar{display:flex;gap:4px}
.fw-l-huebar i{flex:1;height:8px;border-radius:2px;background:var(--h,var(--voltage))}

/* ============================================================
   5 — MICRO-INTERACTIONS (Stripe-measured; STRIPE-UI-HANDOVER.md).
   The rules: one signature hover per element type; motion is slow
   & creamy (300ms micro / 700ms card); hover darkens one step —
   never lifts or scales; hover-only FX gated behind
   (hover:hover)+(pointer:fine); every hover has a :focus-visible
   twin. LANDING ONLY. Proposed (LEARNINGS L-065/L-066/L-067).
   ============================================================ */

/* buttons + text links move to the 300ms micro tier (press stays fast) */
.fw-l .fw-btn{transition:background var(--l-dur-micro) var(--l-ease-micro),
  border-color var(--l-dur-micro) var(--l-ease-micro),
  color var(--l-dur-micro) var(--l-ease-micro),
  box-shadow var(--motion-fast),transform .05s}

/* ---- the stem/head arrow: rest = chevron ">", hover = arrow "→".
   Parent carries .fw-l-arr and sets --hover-active; children respond.
   Markup: <svg class="arr" viewBox="0 0 24 24"><line class="stem"
   x1="5" y1="12" x2="19" y2="12"/><polyline class="head"
   points="12 5 19 12 12 19"/></svg> ---- */
.fw-l-arr{--hover-active:0}
.fw-l-arr:focus-visible{--hover-active:1}
@media (hover:hover) and (pointer:fine){
  .fw-l-arr:hover{--hover-active:1}
}
.fw-l-arr .arr{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.fw-l-arr .arr .stem{opacity:var(--hover-active);
  transition:opacity var(--l-dur-micro) var(--l-ease-micro)}
.fw-l-arr .arr .head{transform:translateX(calc(var(--hover-active) * 3px));
  transition:transform var(--l-dur-micro) var(--l-ease-micro)}

/* ---- quiet arrow link ("Text >") — every content block exits with one.
   Voltage text, no underline, arrow animates. One per block; replaces
   loud secondary buttons mid-page. One voltage CTA per screen stands. ---- */
.fw-l-link{display:inline-flex;align-items:center;gap:7px;font-size:var(--l-fs-sm);
  font-weight:500;color:var(--voltage);text-decoration:none;cursor:pointer;
  transition:color var(--l-dur-micro) var(--l-ease-micro)}
.fw-l-link:hover{color:var(--voltage-hover)}
.fw-l-link:focus-visible{outline:2px solid var(--voltage);outline-offset:3px;border-radius:2px}
.fw-l-dark .fw-l-link{color:var(--l-voltage-bright)}
.fw-l-dark .fw-l-link:focus-visible{outline-color:var(--l-voltage-bright)}

/* ---- card hover choreography (700ms): border reveals, title shifts.
   ON BY DEFAULT for the landing card families (fcard/dcard/mcard);
   opt any other card in with .fw-l-hover + a .ht title.
   Hue order: --mh (module) → --h (setter) → voltage. ---- */
.fw-l-hover,.fw-l-fcard,.fw-l-dcard,.fw-l-mcard{
  transition:border-color var(--l-dur-card) var(--l-ease-card),
  box-shadow var(--l-dur-card) var(--l-ease-card)}
:is(.fw-l-hover,.fw-l-fcard,.fw-l-dcard,.fw-l-mcard) :is(.ht,h3,h4){
  transition:transform var(--l-dur-card) var(--l-ease-card)}
@media (hover:hover) and (pointer:fine){
  :is(.fw-l-hover,.fw-l-fcard,.fw-l-dcard,.fw-l-mcard):hover{
    border-color:color-mix(in oklab,var(--mh,var(--h,var(--voltage))) 38%,var(--rule))}
  :is(.fw-l-hover,.fw-l-fcard,.fw-l-dcard,.fw-l-mcard):hover :is(.ht,h3,h4){
    transform:translateY(-2px)}
  .fw-l-dark :is(.fw-l-hover,.fw-l-dcard,.fw-l-mcard):hover{
    border-color:color-mix(in oklab,var(--mh,var(--h,var(--voltage))) 46%,var(--l-rule-dark))}
}

/* ---- framed content column — 1px hairlines run the column's full height.
   The Stripe precision move; content aligns to the frame. ---- */
.fw-l-frame{max-width:var(--l-maxw);margin-inline:auto;border-inline:1px solid var(--rule)}
.fw-l-dark .fw-l-frame{border-color:var(--l-rule-dark)}
@media (max-width:639px){.fw-l-frame{border-inline:0}}

/* ---- dark seam — the ONE gradient allowed on dark: a 1px hairline
   divider between dark blocks (transparent → light → transparent).
   Surfaces and numbers stay solid (the no-gradients-on-dark rule holds). ---- */
.fw-l-seam{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,#fff 82%,transparent) 50%,transparent)}

/* ---- the wordmark logo flips to light text on dark bands ---- */
.fw-l-dark .fw-logo{color:var(--l-on-dark-1)}

/* ---- logo/connector strip: muted at rest, full colour on hover.
   Only on pointer devices — touch users always see full colour. ---- */
@media (hover:hover) and (pointer:fine){
  .fw-l-connect .tile .badge img{filter:grayscale(1);opacity:.72;
    transition:filter var(--l-dur-micro) var(--l-ease-micro),opacity var(--l-dur-micro) var(--l-ease-micro)}
  .fw-l-connect .tile:hover .badge img,
  .fw-l-connect .tile:focus-visible .badge img{filter:none;opacity:1}
}

/* ---- mega menu enters on the nav tier (240ms) — replays on each open ---- */
.fw-l-mega{animation:fw-l-megain var(--l-dur-nav) var(--l-ease-nav)}
@keyframes fw-l-megain{from{opacity:0;transform:translateY(-6px)}}

/* reduced motion: kill the choreography, keep the end state */
@media (prefers-reduced-motion:reduce){
  .fw-l-hover,.fw-l-fcard,.fw-l-dcard,.fw-l-mcard,
  :is(.fw-l-hover,.fw-l-fcard,.fw-l-dcard,.fw-l-mcard) :is(.ht,h3,h4),
  .fw-l-arr .arr .stem,.fw-l-arr .arr .head,
  .fw-l-link,.fw-l .fw-btn{transition:none}
  .fw-l-mega{animation:none}
}

/* ============================================================
   6 — SEMRUSH ADDITIONS (measured; SEMRUSH-UI-HANDOVER.md).
   Adopted: size-gated display tracking; the giant cropped
   wordmark close. Dual-grade signals + z-ladder were already in
   tokens.css (codified in the handbooks). Skipped by canon:
   pills-everywhere, Lazzer, pastel palette, icon rail, 120px
   rhythm (ours stays 96/64). Landing only.
   Proposed (LEARNINGS L-070…L-074).
   ============================================================ */

/* display tracking −4%, gated to desktop where display type renders ≥~64px */
@media (min-width:940px){
  .fw-l-display{letter-spacing:var(--l-track-display)}
}

/* ---- promo line — one-line attention banner above the nav.
   Semrush's lavender banner, retold with citrus: the accent that
   carries DARK text (ink on citrus ≈ 13:1 — the dual-grade trick).
   ONE per page; citrus = attention, so this is its natural home. ---- */
.fw-l-promo{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:var(--citrus);color:var(--ink-1);font-size:13.5px;font-weight:500;
  padding:9px var(--l-gutter);text-align:center}
.fw-l-promo .fw-l-link{color:inherit;font-weight:700;font-size:inherit}
.fw-l-promo .fw-l-link:hover{color:var(--ink-2)}

/* ---- tinted product frame — a flat brand-tint mat around a workbench
   shot (Semrush's gradient frame, kept FLAT: the hero owns the page's
   one gradient). Frame 24px, shot keeps its own 20px radius. ---- */
.fw-l-prodframe{background:color-mix(in oklab, var(--voltage) 8%, var(--canvas));
  border-radius:24px;padding:clamp(14px,2.6vw,30px)}
.fw-l-prodframe--azure{background:color-mix(in oklab, var(--l-azure) 10%, var(--canvas))}

/* ---- ghost button — the quiet tier below secondary (Semrush's grey
   ghost): sunken wash, no border, ink text; hover deepens one step. ---- */
.fw-btn--l-ghost{background:var(--surface-sunken);border-color:transparent;color:var(--ink-1)}
.fw-btn--l-ghost:hover{background:var(--rule)}

/* ---- the wordmark close — a giant, bottom-cropped feedwrk wordmark
   ends the page (Semrush's memorable close, retold with our mark).
   Decorative: aria-hidden, quiet ink, never a link, no pointer. ---- */
.fw-l-wordmark-band{overflow:hidden;line-height:0;pointer-events:none;user-select:none;margin-top:34px}
.fw-l-wordmark-band .fw-logo{width:103%;height:auto;margin:0 -1.5% -7.5%;
  color:var(--ink-1);opacity:.05}
.fw-l-dark .fw-l-wordmark-band .fw-logo{color:var(--l-on-dark-1);opacity:.06}