/* ============================================================
   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}

/* ---- 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}

/* ---- 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 — match the live site: Inter 800, very tight.
   (preview.feedwrk.com headlines are Inter 800 @ ~-0.035em, NOT
   Space Grotesk.) Re-point the display token to Inter and bump the
   display classes to 800/tight.
   ============================================================ */
:root{ --l-font-display:"Inter", 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}

/* ---- 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}
.fw-l-footer2 .top{display:grid;grid-template-columns:1.7fr 1fr 1fr 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}
.fw-l-footer2 .legal a{font-size:12px;color:var(--ink-3)}
@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 ------------------------------------------- */
.fw-l-quote{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-3);padding:24px;box-shadow:var(--shadow-xs);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)}

/* ---- 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.) */

/* ---- 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}}