/* ============================================================
   Feedwrk — LANDING (real). Components extracted from the live
   preview.feedwrk.com: the editorial/technical aesthetic — light
   node-mesh, big ink headlines with one voltage accent, the mono
   "equation" device, signal-tinted evidence cards, 16:9 product
   shots, and the v2 "cold palette" module pictograms.
   Handbook layer; proposed (LEARNINGS L-055) for the toolkit.
   Load after landing-ui.css.
   ============================================================ */

/* (v2 cold-palette pictogram component removed 2026-07-08 — the set is
   retired from UI (L-077) and archived in Pictogram Guidelines v2.html.
   UI icons = the single-stroke utility set, .fw-l-picto in landing-ui.css.
   The module↔hue mapping lives on as the L-076 doses via --mh.) */

/* ---- big editorial headline: mostly ink, ONE voltage phrase -------------- */
.fw-l-head{font-family:var(--l-font-display);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  color:var(--ink-1);font-size:clamp(2.2rem,5.2vw,4rem);margin:0}
.fw-l-head .v{color:var(--voltage)}

/* ---- mono "equation" device: KEY = VALUE --------------------------------- */
.fw-l-eq{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.fw-l-eq b{color:var(--ink-1);font-weight:600}

/* ---- retailer / brand mono toggle ---------------------------------------- */
.fw-l-seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--surface-sunken)}
.fw-l-seg button{border:0;background:transparent;border-radius:var(--r-pill);height:30px;padding:0 16px;cursor:pointer;
  font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.fw-l-seg button[aria-selected="true"]{background:var(--ink-1);color:#fff}
/* Narrow phones: an inline-flex track can't hold 3+ options on one row, so it
   overflows the viewport. Let it become a wrapping block instead. */
@media (max-width:560px){
  .fw-l-seg{display:flex;flex-wrap:wrap;width:100%;box-sizing:border-box;gap:6px}
  .fw-l-seg button{flex:1 1 28%}
}

/* ---- feature card: picto + title + body + dashed rule + equation --------- */
.fw-l-fcard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-3);padding:24px;box-shadow:var(--shadow-xs)}
.fw-l-fcard h3{font:600 20px/1.2 var(--l-font-display);letter-spacing:var(--track-tight);margin:16px 0 8px;color:var(--ink-1)}
.fw-l-fcard p{margin:0;color:var(--ink-3);font-size:14px;line-height:1.55}
.fw-l-fcard hr{border:0;border-top:1px dashed var(--rule-strong);margin:18px 0 12px}

/* ---- flat card ----------------------------------------------------------
   The frameless register of .fw-l-fcard, for pages that read as flat bands.
   A white card with a 1px --rule on a WHITE band is a drawn box around
   nothing: the border is the only thing separating card from band, so the
   eye reads the LINE, not the card. Same conclusion as the frameless quote
   (L-132/L-086) — separation comes from the surface step, not from an
   outline.

   The border stays in the box model at `transparent`, it is not removed:
   `border:0` would (a) reflow every card by 2px and (b) delete the hover
   hairline, since the card choreography in direction.css §5 animates
   border-COLOR (L-068). Transparent → hue-mix on hover keeps that reveal
   intact and makes it the only frame the card ever draws.

   The surface step is band-relative, which is why the fill is not a single
   value: on a white band the card steps DOWN to the sunken tint; inside
   .fw-l-band (canvas) it steps UP to white, because sunken on canvas is
   barely a value apart. One component, flipped by context — the same shape
   as the .fw-l-dark overrides, not a per-page patch (L-078).

   Opt-IN, unlike the L-068 choreography: the shipped landing's cards keep
   their frames until the owner rules on flat-by-default site-wide. ---- */
.fw-l-fcard--flat{background:var(--surface-sunken);border-color:transparent;box-shadow:none}
.fw-l-band .fw-l-fcard--flat{background:var(--surface)}

/* ---- evidence card: signal-tinted (risk / loss / pipeline) ---------------- */
.fw-l-ev{border-radius:var(--r-3);padding:20px 22px;border:1px solid transparent}
.fw-l-ev .ey{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.fw-l-ev .n{font:700 30px/1 var(--l-font-display);letter-spacing:-.01em;color:var(--ink-1);margin:9px 0 6px;font-variant-numeric:tabular-nums}
.fw-l-ev p{margin:0;font-size:13px;color:var(--ink-3);line-height:1.5}
.fw-l-ev--risk{background:var(--signal-red-tint)} .fw-l-ev--risk .ey{color:var(--signal-red-ink)}
.fw-l-ev--loss{background:var(--signal-amber-tint)} .fw-l-ev--loss .ey{color:var(--signal-amber-ink)}
.fw-l-ev--pipe{background:var(--voltage-tint)} .fw-l-ev--pipe .ey{color:var(--voltage-press)}

/* ---- 16:9 product shot (browser chrome around a live workbench) ---------- */
.fw-l-shot{border:1px solid var(--rule);border-radius:var(--l-r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--l-shadow-float)}
.fw-l-shot .bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;background:var(--surface-sunken);border-bottom:1px solid var(--rule)}
.fw-l-shot .bar i{width:10px;height:10px;border-radius:50%;background:var(--rule-strong)}
.fw-l-shot .bar .url{margin-left:10px;font-family:var(--font-mono);font-size:11px;color:var(--ink-4)}
.fw-l-shot .frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--canvas)}
.fw-l-shot .frame > .fw-app{position:absolute;inset:0;min-height:0;height:100%;overflow:hidden}
.fw-l-shot .frame .fw-content{overflow:hidden}

/* ---- light node mesh (hero backdrop; blue lines on light) ---------------- */
.fw-l-mesh-light{position:relative;isolation:isolate;overflow:clip}
.fw-l-mesh-light > canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}

/* ============================================================
   HEADLINE FACE — Source Sans, heavy and tight (L-128, 2026-07-26).
   One typeface across the landing layer: the headline face is the SAME
   family as body and labels, and hierarchy comes from weight + tracking.
   (Was Inter 800; before that Space Grotesk.)

   This file loads AFTER landing-tokens.css, so THIS declaration is the
   effective --l-font-display. landing-tokens.css carries a matching value —
   keep the two in sync or the later layer silently wins.
   ============================================================ */
:root{ --l-font-display:"Source Sans 3","Source Sans Pro", ui-sans-serif, system-ui, -apple-system, sans-serif; }
.fw-l-head{font-family:var(--font-sans);font-weight:800;letter-spacing:-.035em}
.fw-l-display,.fw-l-h2,.fw-l-feat h3,.fw-l-fcard h3{font-weight:800;letter-spacing:-.03em}

/* ============================================================
   TOP NAV — brand + centered numbered pill + theme toggle + CTAs
   (real preview.feedwrk.com structure: mono links, data-num on
   hover/active, glassy rounded pill).
   ============================================================ */
.fw-l-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;position:relative;z-index:2}
.fw-l-nav .brand{font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--ink-1);text-decoration:none}
.fw-l-navpill{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:var(--r-pill);
  background:color-mix(in oklab,var(--surface) 62%,transparent);
  border:1px solid color-mix(in oklab,var(--rule-strong) 55%,transparent);backdrop-filter:blur(8px)}
.fw-l-navlink{position:relative;display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:12.5px;
  color:var(--ink-3);text-decoration:none;padding:7px 12px;border-radius:var(--r-pill);transition:color var(--motion-fast),background var(--motion-fast)}
.fw-l-navlink[data-num]::before{content:attr(data-num);color:var(--voltage);font-size:9px;letter-spacing:.06em;margin-right:6px;opacity:0;transition:opacity var(--motion-fast)}
.fw-l-navlink:hover,.fw-l-navlink.is-active,.fw-l-navlink.is-open{color:var(--ink-1);background:var(--surface)}
.fw-l-navlink[data-num]:hover::before,.fw-l-navlink[data-num].is-active::before{opacity:1}
.fw-l-navlink .car{width:11px;height:11px;margin-left:5px;color:var(--ink-4);transition:transform var(--motion-fast)}
.fw-l-navlink.is-open .car{transform:rotate(180deg)}
/* a nav item recast as a <button> keeps the SAME typography — the reset lives
   here in the component, never as an inline font patch on the element (L-078) */
button.fw-l-navlink{border:0;background:transparent;cursor:pointer;font-family:var(--font-mono);font-size:12.5px}
button.fw-l-navlink:hover,button.fw-l-navlink.is-open{background:var(--surface)}
.fw-l-navsep{width:1px;height:20px;background:var(--rule-strong);margin:0 4px;opacity:.6}
.fw-l-toggle{width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.fw-l-toggle:hover{background:var(--state-hover);color:var(--ink-1)}
.fw-l-toggle svg{width:17px;height:17px}

/* ============================================================
   TOP NAV v2 — grouped chrome. Accepted 2026-07-26 (L-134).
   Logo + plain links grouped LEFT, actions RIGHT; no pill, one solid
   voltage CTA, text "Sign in", burger below 860px.

   Added as two ORTHOGONAL modifiers rather than by redefining .fw-l-nav:
   all eight shipped pages (index, auditor, dev/*, legal/*) still use the
   centred pill above, and restyling .fw-l-navlink bare would have silently
   rewritten every one of them. Pages opt in; the skeleton opts in.
     .fw-l-nav--grouped   logo + links left, actions right, no pill
     .fw-l-nav--sticky    solid white bar pinned to top on scroll
   This SUPERSEDES L-080 (nav centred via a 3-column grid): the prototype
   carried that grid rule all session with #hdr-v2 overriding it to flex
   immediately after, so the centred layout was dead code, never rendered.
   ============================================================ */
.fw-l-nav--grouped{display:flex;align-items:center;gap:4px;justify-content:flex-start}
.fw-l-nav--grouped>.brand{margin-right:22px;flex:none}
.fw-l-nav--grouped>.nav-actions{margin-left:auto;display:flex;align-items:center;gap:16px;flex:none}
.fw-l-navlinks{display:inline-flex;align-items:center;gap:2px;flex-wrap:nowrap}
/* inside the grouped nav the links are prose, not mono chips (one face — L-128) */
.fw-l-nav--grouped .fw-l-navlink{font-family:var(--font-sans);font-size:15px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink-2);padding:8px 12px;
  border-radius:var(--r-2);background:transparent;transition:color var(--motion-fast)}
/* Where you ARE and where you are POINTING are two different questions, so they
   get two different answers. Current/open = ink-1: the darkest ink, a resting
   fact about the page. Hover = voltage: transient, follows the pointer, and it
   is the answer the rest of this chrome already gives — "Sign in" beside these
   links, every footer column link, and the footer's own cookie button all go
   voltage under the pointer. The nav was the one row still replying ink-2 →
   ink-1, a 42,42,48 → 26,37,51 step that measures as a change and reads as
   nothing. Hovering the open megamenu trigger shows voltage: hover is the later
   rule at equal specificity, which is right — the pointer is the live fact.
   One-voltage-per-screen is a rule about RESTING state; a hover is one element
   at a time, under the pointer, and gone when it leaves. */
.fw-l-nav--grouped .fw-l-navlink.is-active,
.fw-l-nav--grouped .fw-l-navlink.is-open{color:var(--ink-1);background:transparent}
.fw-l-nav--grouped .fw-l-navlink:hover{color:var(--voltage);background:transparent}
/* a nav item recast as <button> keeps the SAME typography (L-078) */
.fw-l-nav--grouped button.fw-l-navlink{font-family:var(--font-sans);font-size:15px}
.fw-l-nav--grouped button.fw-l-navlink:hover,
.fw-l-nav--grouped button.fw-l-navlink.is-open{background:transparent}
/* The caret. It used to be `display:none` here, on the reasoning that the
   grouped nav wants plain word-links — but "Modules" is not a link, it is a
   <button> that opens a megamenu, and the caret is that button's only
   affordance. Hidden, the one interactive item in the row was the one item
   that looked like nothing would happen. It comes back sized for a 15px sans
   link (the base rule is 11px, cut for the 12.5px mono pill) and turns over
   when the panel opens. Both state hooks are matched, not one: the JS sets
   .is-open and aria-expanded together, and a rotation that reads only the
   class silently stops meaning anything the day the class is dropped. */
.fw-l-nav--grouped .fw-l-navlink .car{width:13px;height:13px;margin-left:6px;color:var(--ink-3)}
.fw-l-nav--grouped .fw-l-navlink.is-open .car,
.fw-l-nav--grouped .fw-l-navlink[aria-expanded="true"] .car{transform:rotate(180deg)}
.fw-l-signin{font-family:var(--font-sans);font-size:15px;color:var(--ink-1);text-decoration:none;
  padding:8px 4px;white-space:nowrap;transition:color var(--motion-fast)}
.fw-l-signin:hover{color:var(--voltage)}
.nav-actions .fw-btn--primary{white-space:nowrap}

/* sticky white bar — the dark promo line scrolls away above it */
.fw-l-nav--sticky{position:sticky;top:0;z-index:60;background:var(--surface);
  border-bottom:1px solid var(--rule);box-shadow:var(--shadow-xs);
  transition:transform var(--motion-base)}

/* SMART STICKY — the bar leaves on the way down and comes back on the way up
   (gritnord.com's behaviour). Reading is a downward gesture, so a bar that
   stays pinned spends the whole article covering the top of it; coming back the
   moment the reader reverses costs one gesture and returns the nav wherever
   they are, which is strictly better than scrolling to the top to reach it.

   Only `transform` animates: it is composited, so the bar cannot cause layout
   or paint on a scroll frame. translateY(-100%) is measured against the bar's
   OWN height, so this stays correct if the nav grows a row.

   The chrome JS owns when .is-hidden is set — including the rule that the bar
   is always visible near the top, and that an open megamenu or mobile sheet
   closes with it rather than sliding off-screen still open. */
.fw-l-nav--sticky.is-hidden{transform:translateY(-100%)}
/* Reduced motion opts OUT of the whole behaviour, not just the animation: a bar
   that teleports away is worse than one that never moves. The JS checks the
   same query and never sets the class, and this is the belt to that braces —
   if the class is ever set some other way, the bar still does not move. */
@media (prefers-reduced-motion:reduce){
  .fw-l-nav--sticky{transition:none}
  .fw-l-nav--sticky.is-hidden{transform:none}
}

/* ---- mobile: burger + sheet (replaces the link row below 860px) ---- */
.fw-l-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;
  flex:none;border:1px solid var(--rule-strong);background:var(--surface);
  border-radius:var(--r-2);color:var(--ink-1);cursor:pointer;padding:0}
.fw-l-burger svg{width:22px;height:22px}
.fw-l-msheet{display:none;position:absolute;top:calc(100% + 6px);left:16px;right:16px;z-index:40;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-3);
  box-shadow:var(--shadow-pop);padding:8px}
.fw-l-msheet.open{display:block}
.fw-l-msheet a{display:block;padding:12px 14px;border-radius:var(--r-2);color:var(--ink-1);
  text-decoration:none;font-size:16px;font-weight:500}
.fw-l-msheet a:hover{background:var(--state-hover)}
.fw-l-msheet .sep{height:1px;background:var(--rule);margin:6px 4px}
@media (max-width:860px){
  /* by class — canon never selects a page's ID, which is what #hdr-v2 did (L-078) */
  .fw-l-nav--grouped .fw-l-navlinks{display:none}
  .fw-l-nav--grouped .fw-l-signin{display:none}
  .fw-l-nav--grouped .fw-l-burger{display:flex}
}

/* ---- footer: wordmark + one row of dot-separated mono links ------------- */
.fw-l-footer{border-top:1px solid var(--rule);background:color-mix(in oklab,var(--surface) 80%,transparent);padding:40px 0 56px}
.fw-l-footer .frow{max-width:var(--l-maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* real footer wordmark is understated mono, not a bold logotype */
.fw-l-footer .brand{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:-.01em;color:var(--ink-3)}
.fw-l-footer .links{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fw-l-footer .links a{color:var(--ink-2);text-decoration:none}
.fw-l-footer .links a:hover{color:var(--voltage)}
.fw-l-footer .links .sep{color:var(--ink-5)}

/* ---- CTA band ------------------------------------------------------------ */
.fw-l-cta{border:1px solid var(--rule);border-radius:var(--l-r-lg);background:var(--surface);padding:44px 32px;text-align:center}
.fw-l-cta.is-dark{background:var(--l-dark-1);border-color:transparent}
.fw-l-cta.is-dark .fw-l-head,.fw-l-cta.is-dark .fw-l-lead{color:var(--l-on-dark-1)}
.fw-l-cta.is-dark .fw-l-lead{color:var(--l-on-dark-2)}

/* ---- numbered pipeline steps (how it works) ----------------------------- */
.fw-l-steps2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-3);overflow:hidden}
.fw-l-steps2 .st{background:var(--surface);padding:22px}
.fw-l-steps2 .st .n{font-family:var(--font-mono);font-size:12px;color:var(--voltage);font-weight:600}
.fw-l-steps2 .st h4{font:800 16px/1.2 var(--font-sans);letter-spacing:-.02em;margin:10px 0 6px;color:var(--ink-1)}
.fw-l-steps2 .st p{margin:0;font-size:13px;color:var(--ink-3);line-height:1.5}

/* ---- FAQ accordion ------------------------------------------------------- */
.fw-l-faq{border:1px solid var(--rule);border-radius:var(--r-3);overflow:hidden;background:var(--surface)}
.fw-l-faq details{border-bottom:1px solid var(--rule)}
.fw-l-faq details:last-child{border-bottom:0}
.fw-l-faq summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:600;font-size:14px;color:var(--ink-1);display:flex;justify-content:space-between;align-items:center;gap:12px}
.fw-l-faq summary::-webkit-details-marker{display:none}
.fw-l-faq summary::after{content:"+";color:var(--ink-4);font-size:18px;font-family:var(--font-mono)}
.fw-l-faq details[open] summary::after{content:"\2013"}
.fw-l-faq p{margin:0;padding:0 20px 18px;font-size:13.5px;color:var(--ink-3);line-height:1.6}

/* ============================================================
   MEGAMENU — full-width dropdown panel under the nav.
   Modules variant = a grid of module cards (name + status +
   tagline) + a footer row. Platform/Solutions/Resources use the
   same panel with column layouts.
   ============================================================ */
.fw-l-mega{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-3);box-shadow:var(--shadow-pop);padding:20px}
.fw-l-mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fw-l-mega-card{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-2);text-decoration:none;transition:background var(--motion-fast)}
.fw-l-mega-card:hover{background:var(--surface-sunken)}
.fw-l-mega-card .bd{min-width:0}
.fw-l-mega-card .t{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-weight:600;font-size:14px;color:var(--ink-1);letter-spacing:-.01em}
.fw-l-mega-card .d{font-size:12.5px;color:var(--ink-3);margin-top:4px}
/* module meta tag — mono line with the module-hue dot (--mh from the card) */
.fw-l-mega-card .meta{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink-3);margin-top:7px}
.fw-l-mega-card .meta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mh,var(--voltage));flex:none}
.fw-l-mega-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--rule);margin-top:14px;padding-top:14px}
.fw-l-mega-foot .note{font-size:13px;color:var(--ink-4)}
.fw-l-mega-foot a{font-family:var(--font-mono);font-size:12.5px;color:var(--voltage);text-decoration:none;font-weight:600}
/* tiny status tag used in the megamenu (dot + word, mono) */
.fw-l-mtag{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.fw-l-mtag::before{content:"";width:5px;height:5px;border-radius:50%}
.fw-l-mtag.testing{color:var(--signal-amber-ink)} .fw-l-mtag.testing::before{background:var(--signal-amber)}
.fw-l-mtag.soon{color:var(--ink-4)} .fw-l-mtag.soon::before{background:var(--ink-5)}
/* column layout for Platform/Solutions/Resources panels */
.fw-l-mega-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.fw-l-mega-cols h5{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin:0 0 12px}
.fw-l-mega-cols a{display:block;text-decoration:none;margin-bottom:12px}
.fw-l-mega-cols a .t{font-weight:600;font-size:13.5px;color:var(--ink-1)}
.fw-l-mega-cols a .d{font-size:12px;color:var(--ink-4);margin-top:2px}
.fw-l-mega-cols a:hover .t{color:var(--voltage)}
@media(max-width:820px){.fw-l-mega-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.fw-l-mega-grid{grid-template-columns:1fr}}

/* ============================================================
   RICH FOOTER (dev) — brand blurb + mono tagline + link columns
   + legal bar. Supersedes the minimal one-line footer.
   ============================================================ */
.fw-l-footer2{border-top:1px solid var(--rule);background:var(--surface);padding:56px 0 26px}
.fw-l-footer2 .wrap{max-width:var(--l-maxw);margin:0 auto;padding:0 24px}
/* brand + FOUR link columns (Platform · Apps · Solutions · Company) as of
   JUR-531, when the footer became the site's map. It was brand + three while
   the site was one page and the footer's job was a short link list. The two
   breakpoints below are unchanged and still correct: 5 columns is only ever a
   desktop shape. */
.fw-l-footer2 .top{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:32px}
.fw-l-footer2 .brand{font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--ink-1)}
.fw-l-footer2 .blurb{font-size:13.5px;color:var(--ink-3);line-height:1.6;margin:12px 0 14px;max-width:40ch}
.fw-l-footer2 .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.fw-l-footer2 h5{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin:0 0 14px}
.fw-l-footer2 ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fw-l-footer2 a{font-size:13px;color:var(--ink-2);text-decoration:none}
.fw-l-footer2 a:hover{color:var(--voltage)}
.fw-l-footer2 .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--rule);margin-top:36px;padding-top:20px;font-size:12px;color:var(--ink-4)}
.fw-l-footer2 .legal .lx{display:flex;gap:14px;flex-wrap:wrap}
/* The legal row re-states `color` at the SAME specificity as the hover above
   (.fw-l-footer2 a:hover and .fw-l-footer2 .legal a are both 0-2-1) and later
   in the file, so it silently won in both states and the bottom four links —
   Privacy, Terms, Cookies, Imprint — were the one set in this footer with no
   hover at all. Measured: ink-3 at rest, ink-3 under the pointer. The tell was
   sitting right next to them: "Cookie settings" is a <button> styled from
   consent.css with an attribute selector, so it out-specified this rule and
   kept its voltage hover while the four anchors beside it stayed dead. Restate
   the hover for the row rather than reorder — a base rule that sets `color`
   after a `:hover` will keep doing this to whoever edits next. */
.fw-l-footer2 .legal a{font-size:12px;color:var(--ink-3)}
.fw-l-footer2 .legal a:hover{color:var(--voltage)}
@media(max-width:820px){.fw-l-footer2 .top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fw-l-footer2 .top{grid-template-columns:1fr}}

/* ---- FAQ open animation (smooth answer reveal + chevron) ---------------- */
.fw-l-faq details > *:not(summary){overflow:hidden}
.fw-l-faq details[open] p{animation:fw-l-faqin .3s var(--l-ease-out) both}
@keyframes fw-l-faqin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.fw-l-faq summary::after{transition:transform var(--motion-base)}
@media (prefers-reduced-motion:reduce){.fw-l-faq details[open] p{animation:none}}

/* ---- testimonial / quote card ------------------------------------------- */
/* Frameless by default — accepted 2026-07-26 (L-132, confirming L-086).
   A pull-quote is typography, not a card: the box made a founder line look
   like another feature tile. The attribution row below still carries it. Put
   it back in a card only where a page genuinely needs a testimonial GRID. */
.fw-l-quote{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;display:flex;flex-direction:column}
.fw-l-quote p{font-size:15px;line-height:1.55;color:var(--ink-1);margin:0 0 18px}
.fw-l-quote .by{display:flex;align-items:center;gap:12px;margin-top:auto}
.fw-l-quote .av{width:38px;height:38px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px;flex:none}
.fw-l-quote .nm{font-weight:600;font-size:13.5px;color:var(--ink-1)}
.fw-l-quote .co{font-size:12px;color:var(--ink-4)}

/* ---- shipping log / roadmap timeline -------------------------------------
   Promoted out of index.html 2026-07-26 (L-136): it was defined inline in the
   page, so a pricing or roadmap page could not reuse the timeline without
   copying CSS. Dated rows — date · status chip · what shipped.
   The outer top/bottom rules are deliberately absent; the section heading and
   the block after it already bound the list, so only row dividers remain.
   Chips are scoped to the component, so the timeline is self-contained and
   does not depend on a page restyling .fw-l-mtag for it. ---- */
.fw-l-shiplog{margin-top:26px}
.fw-l-shiplog .row{display:grid;grid-template-columns:110px 130px 1fr;gap:16px;padding:14px 2px;
  border-bottom:1px solid var(--rule);font-size:14px;align-items:baseline}
.fw-l-shiplog .row:last-child{border-bottom:0}
.fw-l-shiplog .d{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.fw-l-shiplog .fw-l-mtag{font-size:10.5px;letter-spacing:.07em;padding:5px 11px;
  border-radius:var(--r-pill);border:1px solid var(--rule-strong);
  background:var(--surface);color:var(--ink-2)}
.fw-l-shiplog .fw-l-mtag.testing{border-color:color-mix(in oklab,var(--signal-amber) 45%,var(--rule));
  background:color-mix(in oklab,var(--signal-amber) 10%,var(--surface))}
.fw-l-shiplog .fw-l-mtag.soon{color:var(--ink-2);background:var(--surface-sunken)}
.fw-l-shiplog .fw-l-mtag.soon::before{background:var(--ink-4)}
@media (max-width:620px){
  .fw-l-shiplog .row{grid-template-columns:96px 1fr}
  .fw-l-shiplog .what{grid-column:1/-1;color:var(--ink-2)}
}

/* ---- logo / proof strip (text-based; never reproduce real logos) -------- */
.fw-l-logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.fw-l-logos span{font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--ink-4)}
/* logo line — abstract mark + wordmark, grayscale, evenly spaced (placeholder proof) */
.fw-l-logoline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px}
.fw-l-logoline .lg{display:inline-flex;align-items:center;gap:9px;color:var(--ink-4);opacity:.9}
.fw-l-logoline .lg svg{width:22px;height:22px;flex:none}
.fw-l-logoline .lg .w{font-weight:700;font-size:16px;letter-spacing:-.02em}

/* ---- connector tiles — integration strip (real brand logos) -------------
   Each tile loads the platform logo via <img>; if that asset is missing, a
   monogram shows instead. Logos are trademarks of their owners, shown for
   identification — swap the demo <img src> for each brand's OFFICIAL SVG
   (from its brand / press kit) before publishing. */
.fw-l-connect{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.fw-l-connect .tile{display:flex;flex-direction:column;align-items:center;gap:12px;width:104px;text-decoration:none}
.fw-l-connect .badge{position:relative;width:92px;height:92px;border-radius:22px;display:grid;place-items:center;
  background:var(--surface);border:1px solid color-mix(in oklab,var(--rule) 65%,transparent);box-shadow:var(--shadow-xs);
  transition:transform .16s var(--ease-standard),box-shadow .16s var(--ease-standard)}
.fw-l-connect a.tile:hover .badge{transform:translateY(-3px);box-shadow:var(--shadow-pop)}
.fw-l-connect .badge img{width:42px;height:42px;object-fit:contain;display:block}
.fw-l-connect .badge .mono{font-family:var(--l-font-display);font-weight:600;font-size:30px;line-height:1;color:var(--ink-3)}
.fw-l-connect .lbl{font-size:13px;font-weight:500;color:var(--ink-3)}
.fw-l-connect a.tile:hover .lbl{color:var(--ink-1)}
.fw-l-connect .badge.is-slot{background:var(--surface-sunken);border-style:dashed;border-color:var(--rule-strong);box-shadow:none}
.fw-l-connect .badge.is-slot svg{width:30px;height:30px;color:var(--ink-4);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* on dark surfaces the tiles invert to the dark card treatment */
.fw-l-dark .fw-l-connect .badge{background:var(--l-dark-2);border-color:var(--l-rule-dark);box-shadow:none}
.fw-l-dark .fw-l-connect .badge.is-slot{background:transparent;border-color:var(--l-rule-dark-strong)}
.fw-l-dark .fw-l-connect .lbl{color:var(--l-on-dark-2)}

/* (flow / convergence motif removed 2026-07-08 on Kaspars' instruction —
   see LEARNINGS L-061. The pipeline story is carried by the spine + mesh.) */

/* ---- feature checklist --------------------------------------------------
   A ticked list of what a plan, tier or offer includes. Used by the plan
   card, the agency block and the enterprise panel, so it is its own
   component rather than three copies inside them (L-136). The tick is the
   single-stroke utility set in currentColor, so the list themes itself on
   dark exactly like every other icon (§4). `.dim` marks a line that is
   true but not yet earned — greyed, never struck through. ---- */
.fw-l-checks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.fw-l-checks li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.fw-l-checks li b{color:var(--ink-1);font-weight:600}
.fw-l-checks svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--signal-green-ink);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fw-l-checks li.dim{color:var(--ink-4)}
.fw-l-checks li.dim svg{color:var(--ink-4)}
.fw-l-dark .fw-l-checks li{color:var(--l-on-dark-2)}
.fw-l-dark .fw-l-checks li b{color:var(--l-on-dark-1)}
.fw-l-dark .fw-l-checks svg{color:var(--l-emerald,var(--signal-green))}
.fw-l-dark .fw-l-checks li.dim,.fw-l-dark .fw-l-checks li.dim svg{color:var(--l-on-dark-3)}

/* .fw-l-eq on a dark band. The base grade is --ink-4, which on --l-dark-1 is
   effectively invisible — and .fw-l-eq is a meta/label line that appears in
   every band, light or dark, so the light-only grade was a latent contrast
   bug wherever a dark band used one. Same family as L-140: a rule that was
   correct on the one page that owned it and missing everywhere else. */
.fw-l-dark .fw-l-eq{color:var(--l-on-dark-3)}
.fw-l-dark .fw-l-eq b{color:var(--l-on-dark-1)}

/* ---- plan card + plan grid ----------------------------------------------
   A pricing tier: name row · price · checklist · CTA. Composed ON TOP of
   .fw-l-fcard as a modifier rather than a second card definition, so it
   inherits the card's surface, hover choreography and dark treatment and
   cannot drift from them (L-134). The card is a flex column and the CTA
   foot takes margin-top:auto, so a row of tiers with unequal feature
   lists still lines its buttons up.

   `--featured` marks the recommended tier with INK weight, never voltage:
   "most popular" is status metadata, and voltage marks actions only
   (L-104). Each card keeps its own one action; the grid does not promote
   one of them into the page's primary. ---- */
.fw-l-plangrid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px;align-items:stretch}
@media(min-width:600px){.fw-l-plangrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.fw-l-plangrid{grid-template-columns:repeat(var(--cols,3),1fr)}}
.fw-l-plan{display:flex;flex-direction:column;padding:24px 22px}
.fw-l-plan .tier{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fw-l-plan .tier .nm{font:600 17px/1.2 var(--l-font-display);letter-spacing:var(--track-tight);color:var(--ink-1)}
.fw-l-plan .tier .sz{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.fw-l-plan .price{display:flex;align-items:baseline;gap:4px;margin:14px 0 18px;
  font:700 clamp(2rem,3.4vw,2.6rem)/1 var(--l-font-display);letter-spacing:-.03em;
  color:var(--ink-1);font-variant-numeric:tabular-nums}
.fw-l-plan .price small{font:500 13px/1 var(--font-sans);letter-spacing:0;color:var(--ink-3)}
.fw-l-plan .fw-l-checks{padding-bottom:22px}
.fw-l-plan .cta{margin-top:auto;display:grid}
.fw-l-plan .cta .fw-btn{justify-content:center;text-decoration:none}
.fw-l-plan--featured{border-color:var(--ink-1);box-shadow:var(--shadow-sm)}
.fw-l-plan--featured .tier .sz{color:var(--ink-1);font-weight:600}
.fw-l-dark .fw-l-plan .tier .nm,.fw-l-dark .fw-l-plan .price{color:var(--l-on-dark-1)}
.fw-l-dark .fw-l-plan .tier .sz,.fw-l-dark .fw-l-plan .price small{color:var(--l-on-dark-2)}
.fw-l-dark .fw-l-plan--featured{border-color:var(--l-rule-dark-strong)}

/* ---- lead form (waitlist / early access) ---------------------------------
   Name · work email · consent · submit, plus the hidden honeypot and one
   error line. Promoted out of index.html's `#join` block 2026-07-26, where
   every rule was scoped to that page ID and could not be reused by the
   standalone waitlist page (L-135/L-136). It is written light-first and
   flipped by `.fw-l-dark`, because the dark join band is one placement of
   it, not the definition of it.

   `.hp` is the honeypot: positioned off-screen rather than display:none,
   because a bot reading computed styles skips the hidden ones. It must stay
   in the tab order's blind spot (tabindex="-1"), never carry a label a
   human sees, and always post empty. ---- */
.fw-l-joinform{display:block}
.fw-l-joinform .fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.fw-l-joinform .fields{grid-template-columns:1fr}}
.fw-l-joinform .field{display:flex;flex-direction:column;gap:7px}
/* A field that spans the row. The store address is the input the rest of the
   lead hangs off, so it takes the full measure instead of sharing a row and
   reading as one of a matched pair. It lives here rather than on the page that
   first wanted it for the same reason `.opt` and `.hint` below do: how wide a
   field sits in the grid is a property of the form, and the second page to want
   one would copy the rule instead of finding it — L-078's exact failure mode.
   Named off `.field` the way `.inp--area` is named off `.inp`, so the family
   reads as one thing. It needs no breakpoint of its own: at ≤560px `.fields` is
   already a single column, so spanning it is a no-op there. */
.fw-l-joinform .field--wide{grid-column:1/-1}
.fw-l-joinform .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
/* An optional field says so in its own label, and says WHY underneath it. Both
   live here rather than on the page that first needed them: a hint under a form
   field is a property of the form, and the second page to want one would copy
   these two rules instead of finding them — L-078's exact failure mode.
   `.opt` sits inside `.lbl` and inherits its mono/uppercase, so it reads as part
   of the label rather than a badge stuck onto it; only the colour steps down.
   `.hint` is a sibling of `.inp` inside `.field`, so the field's 7px gap already
   spaces it — it needs no margin of its own. It carries the same colour pairing
   as `.consent span`, the form's other line of supporting prose. */
.fw-l-joinform .lbl .opt{color:var(--ink-4)}
.fw-l-joinform .hint{font-size:12px;line-height:1.5;color:var(--ink-3)}
.fw-l-joinform .inp{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:var(--r-3);
  background:var(--surface);border:1px solid var(--rule-strong);transition:border-color var(--l-dur-micro) var(--l-ease-micro)}
.fw-l-joinform .inp:focus-within{border-color:var(--voltage)}
.fw-l-joinform .inp input,.fw-l-joinform .inp textarea{flex:1;min-width:0;border:0;outline:none;background:transparent;
  font-family:var(--font-sans);font-size:15px;color:var(--ink-1)}
.fw-l-joinform .inp input::placeholder,.fw-l-joinform .inp textarea::placeholder{color:var(--ink-4)}
.fw-l-joinform .inp--area{align-items:stretch;padding:12px 14px}
.fw-l-joinform .inp--area textarea{resize:vertical;min-height:120px;line-height:1.55}
.fw-l-joinform .consent{display:flex;gap:11px;align-items:flex-start;min-height:44px;margin-top:16px;cursor:pointer}
.fw-l-joinform .consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--voltage);flex:none;cursor:pointer}
.fw-l-joinform .consent span{font-size:13px;color:var(--ink-3);line-height:1.5}
.fw-l-joinform .submitrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.fw-l-joinform .err{display:none;align-items:center;gap:8px;margin:14px 0 0;font-size:13px;color:var(--signal-red-ink)}
.fw-l-joinform .err.show{display:flex}
.fw-l-joinform .err svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fw-l-joinform .hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.fw-l-dark .fw-l-joinform .lbl{color:var(--l-on-dark-2)}
.fw-l-dark .fw-l-joinform .lbl .opt{color:var(--l-on-dark-3)}
.fw-l-dark .fw-l-joinform .hint{color:var(--l-on-dark-2)}
.fw-l-dark .fw-l-joinform .inp{background:color-mix(in oklab,#fff 6%,transparent);border-color:var(--l-rule-dark-strong)}
.fw-l-dark .fw-l-joinform .inp:focus-within{border-color:var(--l-voltage-bright)}
.fw-l-dark .fw-l-joinform .inp input,.fw-l-dark .fw-l-joinform .inp textarea{color:var(--l-on-dark-1)}
.fw-l-dark .fw-l-joinform .inp input::placeholder,.fw-l-dark .fw-l-joinform .inp textarea::placeholder{color:var(--l-on-dark-3)}
.fw-l-dark .fw-l-joinform .consent span{color:var(--l-on-dark-2)}
.fw-l-dark .fw-l-joinform .err{color:var(--l-coral,var(--signal-red))}
/* The joined/sent acknowledgement. Same box on light and dark. */
.fw-l-joinok{margin-top:16px;font-size:14px;color:var(--ink-2);border:1px solid var(--rule);
  border-radius:var(--r-3);padding:14px 16px;max-width:56ch;background:var(--surface)}
.fw-l-dark .fw-l-joinok{color:var(--l-on-dark-1);border-color:var(--l-rule-dark-strong);background:transparent}

/* ---- bento grid --------------------------------------------------------- */
.fw-l-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:118px;gap:12px}
.fw-l-bento .b{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-3);padding:16px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.fw-l-bento .b.tall{grid-row:span 2}
.fw-l-bento .b.wide{grid-column:span 2}
.fw-l-bento .b.accent{background:var(--voltage-tint);border-color:transparent}
.fw-l-bento .b .k{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4)}
.fw-l-bento .b .v{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink-1);font-variant-numeric:tabular-nums}
.fw-l-bento .b.accent .v{color:var(--voltage)}
@media(max-width:680px){.fw-l-bento{grid-template-columns:repeat(2,1fr)}.fw-l-bento .b.wide{grid-column:span 2}}