/* ═══════════════════════════════════════════════════════════════
   Gallium — shared marketing design system
   Used by the standalone marketing pages (how-it-works, guides,
   construction, about). The landing page keeps its own inline styles.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#F6F6F7; --surface:#FFFFFF; --ink:#191A1E; --ink-soft:#50525B; --ink-faint:#6B6E7A;
  --line:#E3E4E8; --line-soft:#EEEEF1;
  --accent:#0E6B66; --accent-deep:#0A524E; --accent-tint:#E7F2F1; --accent-ink:#0C5C58;
  --sky:#8FD4CE; --sky-tint:#EAF6F4;
  --amber-ink:#92600A; --amber-tint:#FBF3DF;
  --steel:#4A5A74; --steel-tint:#EDF0F5;
  --violet-ink:#5F4F95; --violet-tint:#ECE6F5;
  --radius:6px;
  --shadow:0 1px 2px rgba(18,19,24,.05);
  --shadow-lg:0 24px 60px rgba(18,19,24,.13), 0 4px 14px rgba(18,19,24,.07);
}
*{ box-sizing:border-box; margin:0; padding:0; }
/* No scroll-behavior:smooth here. The landing runs Lenis for inertial scroll and
   CSS smooth-scroll fights it, which breaks scrolling on that page. */
html{ -webkit-font-smoothing:antialiased; }
body{ font-family:"Inter",sans-serif; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.55; overflow-x:hidden; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
.serif{ font-family:"Fraunces",serif; }
.wrap{ max-width:1160px; margin:0 auto; padding:0 32px; }
.wrap.narrow{ max-width:880px; }

/* ═══ nav ═══ */
/* Racing-green bar: the header carries the brand colour rather than blending
   into the porcelain page. Everything sitting on it flips to light — links, the
   mega buttons, both CTAs and the burger — see the overrides below. */
/* Floating bar: the nav is a rounded card inset from the edges rather than a
   full-bleed band welded to the top. The outer element stays transparent and
   only provides the inset + stickiness; the .wrap inside is the visible card. */
.nav{
  position:sticky; top:14px; z-index:50; margin-top:14px; padding:0 18px;
  background:none; border-bottom:none;
}
/* hides on scroll down, returns on scroll up (see site.js). The translate
   clears the card AND its 14px top inset, so no sliver peeks while hidden. */
.nav{ transition:transform .35s cubic-bezier(.4,0,.2,1); will-change:transform; }
.nav.nav-hidden{ transform:translateY(calc(-100% - 20px)); }
.nav .wrap{
  height:62px; display:flex; align-items:center; gap:30px; position:relative;
  max-width:1380px; margin:0 auto; padding:0 14px 0 26px;
  background:var(--accent); backdrop-filter:blur(14px);
  border-radius:16px; box-shadow:0 10px 30px rgba(10,82,78,.22), 0 2px 6px rgba(10,82,78,.14);
}
.wordmark{ font-family:"Fraunces",serif; font-weight:600; font-size:21px; letter-spacing:-.01em; text-decoration:none; display:inline-flex; align-items:center; }
.wordmark img{ height:.95em; width:auto; margin-right:.24em; }
.wordmark .dot{ color:var(--sky); }
.nav .links{ display:flex; gap:30px; font-size:13.5px; font-weight:500; color:rgba(255,255,255,.78); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.nav .links a{ text-decoration:none; transition:color .12s; }
.nav .links a:hover, .nav .links a.on{ color:#fff; }
.nav .cta{ margin-left:auto; display:flex; gap:10px; align-items:center; }

/* ── on the green bar ── */
.nav .wordmark{ color:#fff; }
.nav .megabtn{ color:rgba(255,255,255,.78); }
.nav .megabtn:hover, .nav .mega.open .megabtn{ color:#fff; }
/* Sign in reads as quiet text; the trial button inverts to white-on-green so it
   still carries the most weight (a green button on green would disappear). */
.nav .cta .btn.ghost{ color:rgba(255,255,255,.80); }
.nav .cta .btn.ghost:hover{ color:#fff; }
/* oval, to echo the rounded card they sit inside */
.nav .cta .btn{ border-radius:999px; padding:9px 20px; }
.nav .cta .btn.primary{ background:#fff; border-color:#fff; color:var(--accent-deep); box-shadow:0 1px 2px rgba(8,42,40,.22); }
.nav .cta .btn.primary:hover{ background:rgba(255,255,255,.92); border-color:rgba(255,255,255,.92); color:var(--accent-deep); }
.navburger{ color:#fff; }

/* ═══ buttons ═══ */
.btn{
  display:inline-block; border-radius:999px; padding:9px 18px; font-size:13.5px; font-weight:600;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; transition:all .12s;
}
.btn:hover{ border-color:var(--ink-faint); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(18,19,24,.18); transition:all .15s cubic-bezier(.2,.7,.3,1); }
.btn.primary:hover{ background:var(--accent-deep); border-color:var(--accent-deep); transform:translateY(-1.5px); box-shadow:0 8px 22px rgba(14,107,102,.30); }
.btn.ghost{ border:none; background:none; color:var(--ink-soft); }
.btn.ghost:hover{ color:var(--ink); }
.btn.big{ padding:14px 30px; font-size:14.5px; }
.btn.ondark{ background:#fff; border-color:#fff; color:var(--accent-deep); }
.btn.ondark:hover{ background:rgba(255,255,255,.9); border-color:rgba(255,255,255,.9); }

/* ═══ page hero ═══ */
.phero{ padding:60px 0 34px; }
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.phero h1{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(30px,3.5vw,45px); line-height:1.12; letter-spacing:-.018em; margin-top:12px; max-width:20ch; }
.phero .sub{ margin-top:20px; font-size:clamp(17px,1.7vw,19px); color:var(--ink-soft); max-width:60ch; line-height:1.6; }
.phero .pcta{ margin-top:28px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.phero .pcta .btn.big{ padding:11px 22px; font-size:14px; }
.phero .pcta .btn.primary{ box-shadow:0 1px 2px rgba(18,19,24,.10); }
.phero .pnote{ margin-top:14px; font-size:12.5px; color:var(--ink-faint); }

/* ═══ generic section ═══ */
.sec{ padding:64px 0; }
.sec.tint{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec h2{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(28px,3.4vw,42px); letter-spacing:-.018em; line-height:1.1; }
.sec .lede{ margin-top:14px; color:var(--ink-soft); font-size:16.5px; max-width:60ch; line-height:1.6; }
.sechead{ max-width:760px; }
.sechead .eyebrow{ margin-bottom:12px; }

/* prose */
.prose{ max-width:66ch; }
.prose p{ color:var(--ink-soft); font-size:16.5px; line-height:1.7; margin-top:16px; }
.prose p:first-child{ margin-top:0; }
.prose em{ font-family:"Fraunces",serif; font-style:italic; color:var(--accent-ink); box-shadow:inset 0 -1.5px 0 var(--sky); }

/* ═══ feature / step grid ═══ */
.grid{ display:grid; gap:22px; margin-top:44px; }
.grid.c3{ grid-template-columns:repeat(3,1fr); }
.grid.c2{ grid-template-columns:repeat(2,1fr); }
.grid.c4{ grid-template-columns:repeat(4,1fr); }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:26px 24px; }
.card .ic{ width:38px; height:38px; border-radius:9px; background:var(--accent-tint); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:18px; }
.card h3{ font-size:16.5px; font-weight:700; margin-top:16px; letter-spacing:-.01em; }
.card p{ margin-top:8px; color:var(--ink-soft); font-size:14.5px; line-height:1.6; }

/* numbered steps */
.steps{ counter-reset:step; display:grid; gap:2px; margin-top:40px; }
.step{ display:grid; grid-template-columns:64px 1fr; gap:26px; align-items:start; padding:30px 2px; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step .n{ counter-increment:step; font-family:"Fraunces",serif; font-size:34px; font-weight:500; color:var(--sky); font-variant-numeric:tabular-nums; }
.step .n::before{ content:"0" counter(step); }
.step h3{ font-size:19px; font-weight:700; letter-spacing:-.01em; }
.step p{ margin-top:8px; color:var(--ink-soft); font-size:15.5px; line-height:1.65; max-width:60ch; }
.step .src{ margin-top:10px; font-size:12px; color:var(--ink-faint); }
.step .src b{ color:var(--ink-soft); font-weight:600; }

/* editorial 2-col rows */
.rows{ margin-top:40px; }
.row2{ display:grid; grid-template-columns:280px 1fr; gap:40px; padding:24px 2px; border-top:1px solid var(--line); }
.row2:last-child{ border-bottom:1px solid var(--line); }
.row2 .nm{ font-family:"Fraunces",serif; font-weight:500; font-size:20px; letter-spacing:-.01em; }
.row2 p{ color:var(--ink-soft); font-size:15.5px; line-height:1.65; }

/* stat strip */
.proof{ display:flex; gap:44px; flex-wrap:wrap; margin-top:36px; }
.proof .p{ }
.proof .v{ font-family:"Fraunces",serif; font-weight:600; font-size:30px; letter-spacing:-.02em; }
.proof .k{ font-size:13px; color:var(--ink-faint); margin-top:2px; }

/* callout / quote */
.callout{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(24px,3.2vw,36px); line-height:1.22; letter-spacing:-.015em; max-width:20ch; }
.callout em{ font-style:italic; color:var(--accent-ink); }

/* ═══ resource cards (guides) ═══ */
.reslist{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px; }
.res{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:box-shadow .15s, transform .15s; text-decoration:none; color:inherit; }
.res:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.res .cover{ aspect-ratio:16/9; background:linear-gradient(150deg,var(--accent-deep),var(--accent)); position:relative; padding:22px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; }
.res .cover .tag{ align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.16); border-radius:5px; padding:4px 9px; }
.res .cover .ct{ font-family:"Fraunces",serif; font-weight:600; font-size:24px; line-height:1.12; letter-spacing:-.01em; }
.res .cover .csub{ font-size:11.5px; color:rgba(255,255,255,.7); margin-top:4px; }
.res .body{ padding:20px 22px; }
.res .body h3{ font-size:16px; font-weight:700; letter-spacing:-.01em; }
.res .body p{ margin-top:6px; color:var(--ink-soft); font-size:14px; line-height:1.6; }
.res .body .go{ margin-top:14px; font-size:13px; font-weight:600; color:var(--accent); }
.res.soon{ pointer-events:none; }
.res.soon .cover{ background:linear-gradient(150deg,#5b6472,#7c8595); }
.res.soon .go{ color:var(--ink-faint); }

/* ═══ FAQ ═══ */
.faq{ max-width:800px; margin-top:40px; }
.faq details{ border-bottom:1px solid var(--line); padding:2px; }
.faq details:first-of-type{ border-top:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 2px; font-size:17px; font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:22px; color:var(--ink-faint); font-weight:400; }
.faq details[open] summary::after{ content:"–"; }
.faq details[open] summary{ color:var(--accent-ink); }
.faq .ans{ padding:0 2px 24px; color:var(--ink-soft); font-size:15.5px; line-height:1.7; max-width:70ch; }

/* ═══ CTA band ═══ */
.ctaband{ background:var(--accent-deep); color:#fff; text-align:center; padding:96px 0; }
.ctaband h2{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(30px,4vw,50px); line-height:1.12; letter-spacing:-.015em; }
.ctaband h2 em{ font-style:italic; color:var(--sky); }
.ctaband .sub{ margin-top:18px; color:rgba(255,255,255,.72); font-size:16.5px; max-width:52ch; margin-left:auto; margin-right:auto; }
.ctaband .vcta{ margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.ctaband .note{ margin-top:16px; font-size:13px; color:rgba(255,255,255,.5); }

/* ═══ footer ═══ */
footer{ background:var(--accent-deep); color:rgba(255,255,255,.6); border-top:1px solid rgba(255,255,255,.14); }
footer .wrap{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:28px; padding:56px 40px 40px; max-width:1200px; }
footer .fcol h4{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:14px; }
footer .fcol a{ display:block; text-decoration:none; font-size:14px; margin-bottom:9px; transition:color .12s; }
footer .fcol a:hover{ color:#fff; }
footer .brand .wm{ font-family:"Fraunces",serif; font-weight:600; font-size:19px; color:#fff; display:inline-flex; align-items:center; }
footer .brand .wm img{ height:.95em; margin-right:.22em; }
footer .brand .wm span{ color:var(--sky); }
footer .brand p{ margin-top:12px; font-size:13.5px; line-height:1.6; max-width:32ch; }
footer .fbot{ border-top:1px solid rgba(255,255,255,.14); }
footer .fbot .wrap{ display:flex; justify-content:space-between; padding:20px 40px; font-size:13px; grid-template-columns:none; }

/* ═══ responsive ═══ */
@media (max-width:900px){
  .nav .links{ display:none; }
  .grid.c3, .grid.c4{ grid-template-columns:1fr 1fr; }
  .reslist{ grid-template-columns:1fr; }
  .row2{ grid-template-columns:1fr; gap:8px; }
  footer .wrap{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .wrap{ padding:0 22px; }
  .nav .wrap{ padding:0 22px; }
  .grid.c3, .grid.c4, .grid.c2{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:6px; }
  .step .n{ font-size:26px; }
  .proof{ gap:26px; }
  footer .wrap{ grid-template-columns:1fr 1fr; padding:44px 22px 30px; }
  footer .brand{ grid-column:1/-1; }
}

/* ═══════════════════════════════════════════════════════════════
   MEGA MENU
   ═══════════════════════════════════════════════════════════════ */
.nav .links .mega{ position:relative; }
.megabtn{ display:inline-flex; align-items:center; gap:5px; border:none; background:none; font-family:inherit; font-size:13.5px; font-weight:500; color:var(--ink-soft); padding:0; transition:color .12s; }
.megabtn:hover, .mega.open .megabtn{ color:var(--ink); }
.megabtn .cv{ width:9px; height:9px; opacity:.6; transition:transform .18s; }
.mega.open .megabtn .cv{ transform:rotate(180deg); }
.megapanel{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:548px; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:20px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s, transform .18s;
  text-align:left; z-index:60;
}
.mega.open .megapanel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.megapanel::before{ content:""; position:absolute; top:-18px; left:0; right:0; height:18px; }
.mitem{ display:flex; gap:11px; align-items:flex-start; padding:9px 9px; border-radius:9px; text-decoration:none; transition:background .12s; }
.mitem:hover{ background:var(--accent-tint); }
.mitem .mi{ width:30px; height:30px; border-radius:8px; background:var(--accent-tint); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:14px; flex:none; }
.mitem:hover .mi{ background:var(--accent); color:#fff; }
.mitem > span:not(.mi){ display:block; min-width:0; }
.mitem .mt{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:-.005em; }
.mitem .md{ display:block; font-size:11.5px; color:var(--ink-faint); line-height:1.4; margin-top:2px; }
.mitem .mt .new{ font-size:8.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--sky-tint); color:var(--accent-deep); border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:1px; }
.megagrid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; }
.megagroup{ margin-bottom:6px; }
.megagroup h6{ font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); padding:0 9px; margin-bottom:2px; }

/* ═══════════════════════════════════════════════════════════════
   APP WINDOW (product visual, shared across feature pages)
   ═══════════════════════════════════════════════════════════════ */
.appwin{ background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 40px 84px rgba(18,19,24,.15), 0 8px 22px rgba(18,19,24,.07); overflow:hidden; max-width:1372px; margin:0 auto; }
.appmock{ display:flex; font-size:11.5px; height:688px; overflow:hidden; }
.am-side{ width:172px; flex-shrink:0; background:#FBFBFC; border-right:1px solid var(--line); padding:12px 9px; display:flex; flex-direction:column; }
.am-logo{ font-family:"Fraunces",serif; font-weight:600; font-size:13px; margin:0 0 12px 7px; display:inline-flex; align-items:center; }
.am-logo img{ height:.95em; margin-right:.22em; }
.am-logo span{ color:var(--sky); }
.am-search{ margin:0 2px 12px; display:flex; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:6px 9px; font-size:9px; color:var(--ink-faint); }
.am-search .kb{ margin-left:auto; border:1px solid var(--line); border-radius:3px; padding:0 4px; font-size:7.5px; }
.am-nav div{ display:flex; align-items:center; padding:5px 8px; border-radius:4px; color:var(--ink-soft); font-weight:500; font-size:10px; margin-bottom:1px; }
.am-nav .on{ background:var(--accent-tint); color:var(--accent-ink); font-weight:600; }
.am-nb{ margin-left:auto; font-size:7.5px; font-weight:700; background:var(--surface); color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:0 5px; line-height:13px; }
.am-nav .on .am-nb{ background:var(--accent); color:#fff; border-color:var(--accent); }
.am-sect{ font-size:7px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin:14px 8px 6px; }
.am-subnav div{ display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:4px; font-size:9px; color:var(--ink-soft); margin-bottom:1px; }
.am-subnav div.on{ background:var(--surface); color:var(--ink); font-weight:600; box-shadow:inset 0 0 0 1px var(--line-soft); }
.am-subnav div > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.am-subnav div b{ margin-left:auto; font-size:7.5px; color:var(--ink-faint); font-weight:600; }
.am-dot{ width:6px; height:6px; border-radius:2px; flex:none; }
.am-dot.g{ background:#3E9B93; } .am-dot.s{ background:#8FD4CE; } .am-dot.t{ background:#6E82A6; } .am-dot.a{ background:#D8A25A; } .am-dot.v{ background:#9A8AC9; }
.am-foot{ margin-top:auto; }
.am-user{ display:flex; gap:6px; align-items:center; padding:9px 7px 0; border-top:1px solid var(--line-soft); }
.am-user b{ width:19px; height:19px; border-radius:50%; background:var(--accent-tint); color:var(--accent-ink); font-size:7.5px; display:flex; align-items:center; justify-content:center; flex:none; }
.am-user span{ font-size:7.5px; color:var(--ink-faint); line-height:1.35; }
.am-main{ flex:1; padding:14px 16px; min-width:0; background:var(--bg); overflow:hidden; }
.am-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:12px; }
.am-crumb{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:-.01em; }
.am-crumb .mut{ color:var(--ink-faint); font-weight:500; font-size:11px; }
.am-live{ display:inline-flex; align-items:center; gap:4px; font-size:7.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.am-live i{ width:5px; height:5px; border-radius:50%; background:var(--accent); }
.am-tools{ display:flex; gap:5px; flex:none; }
.am-tool{ font-size:8.5px; font-weight:600; color:var(--ink-soft); border:1px solid var(--line); border-radius:5px; padding:4px 8px; background:var(--surface); white-space:nowrap; }
.am-tool.p{ background:var(--accent); border-color:var(--accent); color:#fff; }
.am-card{ background:var(--surface); border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.am-btn{ font-size:8.5px; font-weight:600; border:1px solid var(--line); border-radius:4px; padding:3px 8px; background:var(--surface); color:var(--ink-soft); }
.am-btn.p{ background:var(--accent); border-color:var(--accent); color:#fff; }
.am-lens{ display:flex; gap:4px; margin-bottom:11px; }
.am-lens span{ font-size:9px; font-weight:600; padding:3px 9px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink-soft); }
.am-lens .on{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent-ink); }
/* logo avatars + tags */
.lg{ width:19px; height:19px; border-radius:5px; flex:none; display:flex; align-items:center; justify-content:center; font-size:7px; font-weight:800; }
.lg.g{ background:#E1EEEC; color:#0C5C58; } .lg.s{ background:#E4F3F0; color:#0A524E; } .lg.t{ background:#E7ECF3; color:#45557A; } .lg.a{ background:#F7ECDC; color:#9A6522; } .lg.v{ background:#ECE6F5; color:#5F4F95; }
.am-tg{ flex:none; font-size:7px; font-weight:700; text-transform:uppercase; padding:2px 6px; border-radius:4px; }
.am-tg.hire{ background:#E1EEEC; color:#0C5C58; } .am-tg.win{ background:#E4F3F0; color:#0A524E; } .am-tg.plan{ background:#E7ECF3; color:#45557A; } .am-tg.new{ background:#F7ECDC; color:#9A6522; } .am-tg.grow{ background:#ECE6F5; color:#5F4F95; }
/* table */
.am-thead, .am-tr{ display:grid; grid-template-columns:1.5fr 2fr 1fr .55fr auto; gap:12px; align-items:center; padding:8px 13px; }
.am-thead{ font-size:7.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); border-bottom:1px solid var(--line); background:#FBFBFC; }
.am-tr{ border-bottom:1px solid var(--line-soft); }
.am-tr.pin{ box-shadow:inset 3px 0 0 var(--accent); }
.am-tr .fm{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:10px; min-width:0; }
.am-tr .fm .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.am-tr .sg{ display:flex; align-items:center; gap:7px; font-size:9px; color:var(--ink-soft); min-width:0; }
.am-tr .sg .txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.am-tr .sc, .am-tr .cp{ font-size:8.5px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.am-tr .ac{ display:flex; gap:4px; justify-content:flex-end; }
.am-grp{ font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); background:var(--bg); padding:5px 13px; border-bottom:1px solid var(--line-soft); }
.am-grp.prio{ color:var(--accent-ink); }
/* board */
.am-board{ display:flex; gap:7px; }
.am-col{ flex:1; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:8px 7px; min-height:380px; }
.am-ch{ font-size:8px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); display:flex; justify-content:space-between; margin-bottom:8px; }
.am-ch span{ color:var(--ink-soft); }
.am-pc{ background:var(--bg); border:1px solid var(--line-soft); border-radius:5px; padding:7px 8px; margin-bottom:6px; }
.am-pc b{ font-size:9.5px; display:block; }
.am-pc span{ font-size:8.5px; color:var(--ink-soft); display:block; margin-top:2px; }
.am-pc.mv{ box-shadow:inset 2px 0 0 var(--accent); }
.am-pc.won{ box-shadow:inset 2px 0 0 var(--accent-ink); }
.am-pc .sig{ color:var(--accent-ink); font-weight:600; }
.am-add{ border:1px dashed var(--line); border-radius:5px; padding:6px; font-size:8.5px; font-weight:600; color:var(--ink-faint); text-align:center; }
/* stats row */
.am-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:11px; }
.am-kpi{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:9px 10px; }
.am-kpi .k{ font-size:7.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.am-kpi .v{ font-family:"Fraunces",serif; font-size:16px; font-weight:600; margin-top:3px; white-space:nowrap; }
.am-kpi .v.up{ color:var(--accent); }
.am-kpi .d{ font-size:7.5px; color:var(--ink-faint); margin-top:2px; }
.am-kpi .d.up{ color:var(--accent); font-weight:600; }
/* brief screen */
.am-brief{ display:grid; grid-template-columns:1fr 190px; gap:11px; }
.am-bhead{ background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:13px 14px; margin-bottom:9px; }
.am-bhead .r1{ display:flex; align-items:center; gap:8px; }
.am-bhead .nm{ font-family:"Fraunces",serif; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.am-bhead .cls{ font-size:9px; color:var(--ink-soft); margin-top:4px; }
.am-bhead .prov{ font-size:7.5px; color:var(--ink-faint); margin-top:6px; }
.am-switch{ display:flex; gap:3px; background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:3px; margin-bottom:9px; width:max-content; }
.am-switch span{ font-size:9px; font-weight:600; padding:4px 11px; border-radius:5px; color:var(--ink-soft); }
.am-switch .on{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
.am-fact{ background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:11px 13px; margin-bottom:8px; }
.am-fact .ft{ font-size:7.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.am-fact p{ font-size:9.5px; color:var(--ink-soft); line-height:1.55; }
.am-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.am-chips span{ font-size:8px; border:1px solid var(--line); border-radius:999px; padding:2px 7px; color:var(--ink-soft); background:var(--bg); }
.am-snap{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:8px; }
.am-snap > div{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:8px 9px; }
.am-snap .v{ font-family:"Fraunces",serif; font-size:15px; font-weight:600; }
.am-snap .k{ font-size:7.5px; color:var(--ink-faint); margin-top:1px; }
.am-rail .rc{ background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:10px 11px; margin-bottom:8px; }
.am-rail .rt{ font-size:7.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.am-rail .rr{ display:flex; justify-content:space-between; font-size:8.5px; padding:3px 0; color:var(--ink-soft); }
.am-rail .rr b{ color:var(--ink); font-weight:600; }
/* forecast screen */
.am-fc{ background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:12px 13px; margin-bottom:8px; box-shadow:inset 3px 0 0 var(--accent); }
.am-fc .fh{ display:flex; align-items:center; gap:8px; }
.am-fc .fn{ font-size:11px; font-weight:700; }
.am-fc .fw{ font-size:9px; color:var(--ink-soft); margin-top:4px; line-height:1.5; }
.am-fc .fb{ display:inline-block; margin-top:7px; font-size:7.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-deep); border:1px solid var(--accent); border-radius:4px; padding:2px 7px; }
.am-fc .conf{ margin-left:auto; font-size:8px; font-weight:700; color:var(--accent); }
/* match screen */
.am-cand{ background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:11px 13px; margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.am-cand .ci{ width:30px; height:30px; border-radius:50%; background:var(--steel-tint); color:var(--steel); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; }
.am-cand .cn{ font-size:11px; font-weight:700; }
.am-cand .cd{ font-size:8.5px; color:var(--ink-faint); margin-top:1px; }
.am-mr{ display:grid; grid-template-columns:1.4fr 2fr .5fr auto; gap:11px; align-items:center; padding:8px 13px; border-bottom:1px solid var(--line-soft); }
.am-mr .sc2{ font-family:"Fraunces",serif; font-size:14px; font-weight:600; color:var(--accent); text-align:right; }
.am-mr .why{ font-size:8.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* outreach screen */
.am-out{ display:grid; grid-template-columns:200px 1fr; gap:11px; }
.am-qlist .ql{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:8px 9px; margin-bottom:6px; }
.am-qlist .ql.on{ border-color:var(--accent); box-shadow:inset 2px 0 0 var(--accent); }
.am-qlist .ql b{ font-size:9px; display:block; }
.am-qlist .ql span{ font-size:8px; color:var(--ink-faint); }
.am-draft{ background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:13px 14px; }
.am-draft .dh{ font-size:8px; color:var(--ink-faint); border-bottom:1px solid var(--line-soft); padding-bottom:7px; margin-bottom:9px; }
.am-draft .dh b{ color:var(--ink-soft); }
.am-draft .dsub{ font-size:10px; font-weight:700; margin-bottom:7px; }
.am-draft p{ font-size:9px; color:var(--ink-soft); line-height:1.65; margin-bottom:6px; }
.am-draft .hl{ background:var(--sky-tint); box-shadow:inset 0 -1px 0 var(--sky); color:var(--accent-ink); font-weight:600; }
.am-draft .dact{ display:flex; gap:5px; margin-top:10px; padding-top:9px; border-top:1px solid var(--line-soft); }
@media (max-width:900px){
  .megapanel{ display:none; }
  .appmock{ height:400px; font-size:10px; }
  .am-side{ display:none; }
  .am-brief, .am-out{ grid-template-columns:1fr; }
}

/* Mobile nav (marketing). The hamburger + .navmobile menu are injected by
   site.js; everything here is behind the 900px breakpoint, so desktop is
   byte-for-byte unchanged. */
.navburger { display: none; }
.navmobile { display: none; }
@media (max-width: 900px) {
  .navburger {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    background: none;
    border: none;
    color: #fff;
    padding: 6px;
    cursor: pointer;
  }
  /* The desktop links row and CTAs are replaced by the injected menu on mobile. */
  .nav .links,
  .nav .cta { display: none; }
  .nav.mobile-open .navmobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 74px;
    left: 18px;
    right: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 12px 20px 18px;
  }
  .navmobile a:not(.btn) {
    padding: 11px 4px;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
  }
  .navmobile .btn { margin-top: 8px; text-align: center; }
  /* Platform accordion: heading row toggles the panel of feature links. */
  .navmobile-acc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 4px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .navmobile-acc .cv {
    flex: none;
    transition: transform 0.2s ease;
  }
  .navmobile-acc[aria-expanded="true"] .cv { transform: rotate(180deg); }
  .navmobile-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
  }
  .navmobile-sub.open { grid-template-rows: 1fr; }
  .navmobile-sub-inner { min-height: 0; overflow: hidden; } /* must shrink to 0 */
  .navmobile-sub a {
    display: block;
    padding: 10px 4px 10px 16px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .navmobile-acc .cv,
  .navmobile-sub { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE-PAGE KIT (shared: reveal motion + fp feature blocks)
   Extracted from the market-intelligence template. Pages add their
   own signature styles locally; this is the common backbone.
   ═══════════════════════════════════════════════════════════════ */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.appwin .am-tr{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.appwin.in .am-tr{ opacity:1; transform:none; }

.fp{ padding:clamp(58px,8vw,94px) 0; }
.fp .sechead{ text-align:center; max-width:32ch; margin:0 auto clamp(40px,6vw,64px); }
.fp .sechead h2{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(24px,3vw,34px); line-height:1.14; letter-spacing:-.015em; margin-top:12px; }
.fp .sechead .lede{ margin:14px auto 0; font-size:15px; color:var(--ink-soft); line-height:1.6; max-width:52ch; }
.fp-feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:center; }
.fp-feature + .fp-feature{ margin-top:clamp(44px,6vw,78px); }
.fp-feature.alt .fp-txt{ order:2; }
.fp-kick{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.fp-txt h3{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(21px,2.5vw,29px); line-height:1.18; letter-spacing:-.015em; margin:12px 0 12px; color:var(--ink); }
.fp-txt p{ font-size:15px; color:var(--ink-soft); line-height:1.62; max-width:46ch; }
.fp-visual{ display:flex; justify-content:center; }
.fp-card{ width:100%; max-width:410px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; }
.fp-cardbar{ display:flex; align-items:center; justify-content:space-between; padding:11px 15px; border-bottom:1px solid var(--line-soft); background:#FBFBFC; font-size:12px; font-weight:600; color:var(--ink); }
.fp-live{ display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
.fp-live i{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
.fp-rrow{ display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; padding:13px 15px; border-bottom:1px solid var(--line-soft); }
.fp-rrow:last-child{ border-bottom:0; }
.fp-rn{ font-family:"Fraunces",serif; font-weight:600; font-size:15px; color:var(--ink-faint); }
.fp-rf{ font-size:13.5px; font-weight:600; color:var(--ink); }
.fp-score{ font-size:12px; font-weight:700; color:var(--accent-ink); background:var(--accent-tint); border-radius:6px; padding:3px 9px; }
.fp-cover{ padding:24px 20px; text-align:center; }
.fp-bignum{ font-family:"Fraunces",serif; font-weight:600; font-size:54px; line-height:1; color:var(--ink); letter-spacing:-.02em; }
.fp-bignum small{ font-size:26px; color:var(--accent); }
.fp-coverlbl{ font-size:13px; color:var(--ink-soft); margin-top:8px; }
.fp-chips{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:16px 0 12px; }
.fp-chips span{ font-size:11px; font-weight:500; color:var(--ink-soft); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:4px 10px; }
.fp-note{ font-size:12px; color:var(--ink-faint); }
.fp-sourced{ padding:18px; }
.fp-sig{ font-size:13.5px; color:var(--ink); line-height:1.5; }
.fp-tag{ font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-tint); border-radius:5px; padding:3px 7px; margin-right:6px; }
.fp-srcrow{ display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line-soft); }
.fp-srck{ font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.fp-srclink{ font-size:12.5px; font-weight:600; color:var(--accent-ink); }
.fp-srcnote{ font-size:12px; color:var(--ink-faint); margin-top:9px; }
@media (max-width:820px){
  .fp-feature{ grid-template-columns:1fr; gap:22px; }
  .fp-feature.alt .fp-txt{ order:0; }
}
@media (prefers-reduced-motion:reduce){ .reveal,.appwin .am-tr{ opacity:1!important; transform:none!important; transition:none; } }

/* ═══════════════════════════════════════════════════════════════
   THREE DESIGN LANGUAGES (shared)
   dk- = The Desk (papers, stamps, marginalia)
   bs- = The Broadsheet (editorial chapters, columns, figures)
   ld- = The Ledger (ruled register, evidence, marks)
   Two pages speak each language; base rules live here once.
   ═══════════════════════════════════════════════════════════════ */

/* ── The Desk ── */
.dk-sec{ padding:clamp(58px,8vw,92px) 0; background:radial-gradient(60% 50% at 85% 8%, rgba(143,212,206,.14), transparent 70%), var(--bg); overflow:hidden; }
.dk-kick{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.dk-h2{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(30px,4vw,46px); line-height:1.1; letter-spacing:-.02em; margin-top:12px; max-width:19ch; }
.dk-h2 em{ font-style:italic; color:var(--accent-ink); }
.dk-lede{ margin-top:16px; max-width:46ch; color:var(--ink-soft); font-size:15.5px; line-height:1.65; }
.dk-desk{ position:relative; height:440px; margin-top:26px; }
.dk-paper{ position:absolute; background:#FDFDFC; border:1px solid var(--line); border-radius:4px; box-shadow:0 18px 44px rgba(18,19,24,.13), 0 3px 10px rgba(18,19,24,.06); padding:18px 19px; width:300px; transform:rotate(var(--r,0deg)); }
.dk-paper .dl{ font-size:9px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); }
.dk-paper h5{ font-family:"Fraunces",serif; font-weight:600; font-size:18px; margin:8px 0 4px; }
.dk-paper .rf{ font-size:11.5px; color:var(--ink-soft); }
.dk-paper .bd{ font-size:12px; color:var(--ink-soft); line-height:1.55; margin-top:9px; border-top:1px dashed var(--line); padding-top:9px; }
.dk-stamp{ position:absolute; top:14px; right:14px; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-ink); border:2px solid var(--accent-ink); border-radius:4px; padding:3px 8px; transform:rotate(6deg); opacity:.85; }
.dk-stamp.amber{ color:var(--amber-ink); border-color:var(--amber-ink); }
.dk-queue{ position:absolute; width:330px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 26px 60px rgba(18,19,24,.16); overflow:hidden; transform:rotate(var(--r,0deg)); }
.dk-queue .qh{ padding:10px 14px; background:#FBFBFC; border-bottom:1px solid var(--line-soft); font-size:11.5px; font-weight:700; display:flex; justify-content:space-between; }
.dk-queue .qh i{ font-style:normal; color:var(--accent); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.dk-qr{ display:flex; gap:10px; align-items:baseline; padding:10px 14px; border-bottom:1px solid var(--line-soft); }
.dk-qr:last-child{ border-bottom:0; }
.dk-qr b{ font-family:"Fraunces",serif; font-size:14px; color:var(--ink-faint); font-weight:600; }
.dk-qr .n{ font-size:12.5px; font-weight:600; color:var(--ink); }
.dk-qr .w{ display:block; font-size:10.5px; color:var(--ink-faint); font-weight:400; margin-top:1px; }
.dk-margin{ position:absolute; font-family:"Fraunces",serif; font-style:italic; font-size:16.5px; color:var(--accent-ink); max-width:22ch; line-height:1.45; }
.dk-margin svg{ position:absolute; stroke:var(--accent-ink); fill:none; stroke-width:1.6; stroke-linecap:round; opacity:.7; }
@media (max-width:860px){
  .dk-desk{ height:auto; display:flex; flex-direction:column; gap:14px; }
  .dk-paper,.dk-queue{ position:static; width:100%; max-width:420px; transform:none; }
  .dk-margin{ position:static; margin-top:4px; } .dk-margin svg{ display:none; }
}

/* ── The Broadsheet ── */
.bs-sec{ padding:clamp(64px,8vw,96px) 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.bs-chap{ display:flex; align-items:baseline; gap:18px; border-bottom:2.5px solid var(--ink); padding-bottom:14px; }
.bs-chap .no{ font-family:"Fraunces",serif; font-weight:600; font-size:15px; color:var(--accent); }
.bs-chap .rt{ margin-left:auto; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
.bs-grid{ display:grid; grid-template-columns:1.25fr .9fr; gap:clamp(30px,5vw,70px); margin-top:34px; align-items:start; }
.bs-h2{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(32px,4.4vw,52px); line-height:1.06; letter-spacing:-.022em; }
.bs-h2 em{ font-style:italic; color:var(--accent-ink); }
.bs-body{ margin-top:26px; columns:2; column-gap:34px; column-rule:1px solid var(--line-soft); }
.bs-body p{ font-size:14px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; break-inside:avoid; }
.bs-body p:first-child::first-letter{ font-family:"Fraunces",serif; font-size:44px; line-height:.8; float:left; padding:6px 8px 0 0; color:var(--accent-ink); }
.bs-pull{ border-top:2.5px solid var(--ink); border-bottom:1px solid var(--line); padding:18px 2px; margin:6px 0 22px; font-family:"Fraunces",serif; font-style:italic; font-weight:500; font-size:21px; line-height:1.3; color:var(--ink); }
.bs-pull b{ color:var(--accent-ink); font-weight:600; }
.bs-cap{ font-size:11px; color:var(--ink-faint); margin:10px 0 22px; letter-spacing:.02em; }
.bs-figs{ display:flex; gap:26px; margin-top:24px; border-top:1px solid var(--line); padding-top:16px; }
.bs-fig b{ font-family:"Fraunces",serif; font-weight:600; font-size:30px; letter-spacing:-.01em; display:block; }
.bs-fig span{ font-size:11px; color:var(--ink-faint); }
@media (max-width:860px){ .bs-grid{ grid-template-columns:1fr; } .bs-body{ columns:1; } }

/* ── The Ledger ── */
.ld-sec{ padding:clamp(58px,8vw,92px) 0; background:var(--bg); }
.ld-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-bottom:1px solid var(--ink); padding-bottom:12px; flex-wrap:wrap; }
.ld-head h2{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.018em; }
.ld-head h2 em{ font-style:italic; color:var(--accent-ink); }
.ld-ref{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
.ld-row{ display:grid; grid-template-columns:92px 1fr 220px 110px; gap:20px; align-items:baseline; padding:20px 4px; border-bottom:1px solid var(--line); }
.ld-no{ font-family:"Fraunces",serif; font-weight:500; font-size:24px; color:var(--sky); font-variant-numeric:tabular-nums; }
.ld-what b{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.005em; color:var(--ink); }
.ld-what p{ margin-top:6px; font-size:13px; color:var(--ink-soft); line-height:1.6; max-width:52ch; }
.ld-ev{ font-size:11.5px; color:var(--ink-soft); line-height:1.6; }
.ld-ev i{ font-style:normal; display:block; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px; }
.ld-ev a{ color:var(--accent-ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--sky); }
.ld-ev b{ color:var(--ink); font-weight:600; }
.ld-mark{ justify-self:end; font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-ink); border:1.5px solid var(--accent-ink); border-radius:3px; padding:4px 8px; transform:rotate(-3deg); white-space:nowrap; }
.ld-mark.q{ color:var(--amber-ink); border-color:var(--amber-ink); }
.ld-foot{ display:flex; justify-content:space-between; gap:12px; padding-top:14px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; flex-wrap:wrap; }
@media (max-width:860px){ .ld-row{ grid-template-columns:44px 1fr; } .ld-ev{ grid-column:2; } .ld-mark{ grid-column:2; justify-self:start; } }

/* hand-drawn ink underline under an inline phrase — extends the Desk annotation
   vocabulary (draws itself when its reveal parent scrolls in). */
.dk-ul{ position:relative; white-space:nowrap; }
.dk-ul > svg{ position:absolute; left:-2px; right:-2px; bottom:-7px; width:calc(100% + 4px); height:9px; color:var(--accent); overflow:visible; pointer-events:none; }
.dk-ul > svg path{ stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.reveal.in .dk-ul > svg path{ animation:dk-uldraw 1s cubic-bezier(.2,.7,.3,1) .35s forwards; }
@keyframes dk-uldraw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){ .dk-ul > svg path{ stroke-dashoffset:0; animation:none; } }

/* ═══════════════════════════════════════════════════════════════
   FEATURE ROWS — one row per capability, alternating sides.

   Deliberately undecorated. No badge above the heading, no tick icons, no
   ornamental glyphs: those are the template signals, and they compete with
   the one graphic that should carry the row — the fragment of real product
   beside it. What is left is a tabular number, type, and a spec block that
   reads as documentation rather than marketing bullets. Rhythm varies by
   row so eighteen of these across the site do not read as generated.
   ═══════════════════════════════════════════════════════════════ */
.fr-rows{ display:flex; flex-direction:column; gap:clamp(28px,3.4vw,44px); margin-top:8px; }
.fr-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.4vw,32px); align-items:stretch; }
.fr-row.rev .fr-text{ order:2; }

/* the copy sits inside a hairline box — an outline, nothing filled. It gives
   the text a container without adding a badge, a fill or an icon. */
.fr-text{ border:1px solid var(--line); border-radius:16px; padding:clamp(30px,3.2vw,46px); background:none;
           display:flex; flex-direction:column; justify-content:center; }
.fr-text h3{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(27px,3.2vw,38px); line-height:1.1;
             letter-spacing:-.022em; margin-top:0; max-width:17ch; }
.fr-text > p{ margin-top:16px; font-size:16px; color:var(--ink-soft); line-height:1.68; max-width:50ch; }

/* spec block: label/value rows, hairline separated. Documentation, not bullets. */
.fr-spec{ margin-top:28px; border-top:1px solid var(--line); max-width:44ch; }
.fr-spec div{ display:grid; grid-template-columns:1fr auto; gap:20px; align-items:baseline;
              padding:12px 0; border-bottom:1px solid var(--line-soft); }
.fr-spec div:last-child{ border-bottom:0; }
.fr-spec dt, .fr-spec .k{ font-size:13.5px; color:var(--ink-soft); }
.fr-spec .v{ font-size:12.5px; font-weight:600; color:var(--ink); text-align:right; }

/* the art panel: quieter than before, so the product fragment is the subject */
.fr-art{ position:relative; display:flex; align-items:center; justify-content:center;
          border:1px solid var(--line); border-radius:16px; padding:clamp(26px,3vw,40px);
          background:linear-gradient(165deg, var(--sky-tint), rgba(246,246,247,.55)); overflow:hidden; min-height:300px; }
.fc{ position:relative; z-index:1; width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line);
     border-radius:12px; box-shadow:0 22px 48px rgba(18,19,24,.14), 0 2px 6px rgba(18,19,24,.05); overflow:hidden; }
.fc-h{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line-soft);
       font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep);
       background:var(--sky-tint); }
.fc-h .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; }
.fc-h .dot.pulse{ animation:frPulse 2s infinite; }
@keyframes frPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.fc-h .r{ margin-left:auto; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink-faint); }
.fc-r{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line-soft); font-size:12px; }
.fc-r:last-child{ border-bottom:0; }
.fc-r .nm{ font-weight:600; color:var(--ink); }
.fc-r .mt{ color:var(--ink-faint); font-size:10.5px; }
.fc-r .rt{ margin-left:auto; font-size:10px; color:var(--ink-faint); white-space:nowrap; }
.fc-lg{ width:22px; height:22px; border-radius:6px; flex:none; display:flex; align-items:center; justify-content:center;
        font-size:8px; font-weight:800; background:var(--bg); color:var(--ink-soft); border:1px solid var(--line); }
.fc-tag{ font-size:8px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px 6px; border-radius:4px;
         background:var(--accent-tint); color:var(--accent-deep); }
.fc-tag.am{ background:var(--amber-tint); color:var(--amber-ink); }
.fc-tag.st{ background:var(--steel-tint); color:var(--steel); }
.fc-b{ padding:16px; }
.fc-b .q{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; }
.fc-b .q mark{ background:none; color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--sky); padding:0 1px; }
.fc-arrow{ text-align:center; color:var(--ink-faint); font-size:13px; margin:10px 0; }
.fc-facts div{ display:flex; gap:9px; padding:8px 0; border-top:1px solid var(--line-soft); font-size:11px; }
.fc-facts div span:first-child{ color:var(--ink-faint); width:82px; flex:none; }
.fc-facts div span:last-child{ color:var(--ink); font-weight:600; }
.fc-bar{ height:3px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:8px; }
.fc-bar b{ display:block; height:100%; border-radius:3px; background:var(--accent); }
.fc-btn{ font-size:10px; font-weight:600; border:1px solid var(--line); border-radius:999px; padding:3px 10px; color:var(--ink-soft); }
.fc-btn.p{ background:var(--accent); border-color:var(--accent); color:#fff; }
.fc-f{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-top:1px solid var(--line-soft); font-size:10px; color:var(--ink-faint); }
@media (max-width:900px){
  .fr-row, .fr-row.rev{ grid-template-columns:1fr; gap:14px; }
  .fr-row.rev .fr-text{ order:0; }
  .fr-spec{ max-width:none; }
  .fr-art{ min-height:0; }
}

/* ═══════════════════════════════════════════════════════════════
   THREE MORE FEATURE LAYOUTS. Alternating rows (.fr-*) suit a couple of
   deep capabilities; they fight content of other shapes. Each pattern here
   is chosen for what a page actually contains, not for variety's sake.
   ═══════════════════════════════════════════════════════════════ */

/* ── NARRATIVE: a numbered spine for pages that describe a sequence ───────
   Outreach and Fit a Candidate are workflows, and a workflow forced into
   left-right rows loses its order. Steps run down one rule; the fragment
   sits beside each. */
.nr{ position:relative; margin-top:8px; padding-left:clamp(40px,5vw,72px); }
.nr::before{ content:""; position:absolute; left:11px; top:14px; bottom:14px; width:1px;
  background:linear-gradient(var(--sky), var(--line) 70%, transparent); }
.nr-step{ position:relative; display:grid; grid-template-columns:1fr 400px; gap:clamp(28px,3.4vw,56px);
  align-items:center; padding:clamp(30px,3.6vw,52px) 0; border-bottom:1px solid var(--line); }
.nr-step:last-child{ border-bottom:0; }
.nr-step::before{ content:attr(data-n); position:absolute; left:calc(-1 * clamp(40px,5vw,72px)); top:calc(clamp(30px,3.6vw,52px) + 4px);
  width:23px; height:23px; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.nr-step.on::before{ background:var(--accent); border-color:var(--accent); color:#fff; }
.nr-step h3{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(24px,2.8vw,33px);
  line-height:1.12; letter-spacing:-.02em; max-width:18ch; }
.nr-step > div > p{ margin-top:14px; font-size:15.5px; color:var(--ink-soft); line-height:1.68; max-width:50ch; }
.nr-say{ margin-top:16px; font-size:13px; color:var(--ink-faint); }
.nr-say b{ color:var(--accent-deep); font-weight:600; }
@media (max-width:900px){
  .nr{ padding-left:34px; }
  .nr::before{ left:9px; }
  .nr-step{ grid-template-columns:1fr; gap:20px; }
  .nr-step::before{ left:-34px; }
}

/* ── BENTO: tiles of unequal size, for a page of many smaller capabilities ──
   Pipeline has four stages, notes, still-watched and win rates: lots of small
   things of unequal weight, which alternating rows flatten into sameness. */
.bn{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:8px; }
.bn-t{ border:1px solid var(--line); border-radius:16px; padding:clamp(24px,2.6vw,32px);
  background:var(--surface); display:flex; flex-direction:column; gap:12px; }
.bn-t.wide{ grid-column:span 4; }
.bn-t.half{ grid-column:span 3; }
.bn-t.third{ grid-column:span 2; }
.bn-t.tint{ background:linear-gradient(165deg,var(--sky-tint),rgba(246,246,247,.6)); }
.bn-t h3{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(20px,2.2vw,27px);
  line-height:1.14; letter-spacing:-.018em; }
.bn-t p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; }
.bn-t .k{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); }
.bn-t .fc{ max-width:none; margin-top:auto; }
.bn-stat{ display:flex; align-items:baseline; gap:10px; }
.bn-stat b{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(34px,4vw,50px);
  line-height:1; letter-spacing:-.03em; color:var(--ink); }
.bn-stat span{ font-size:13px; color:var(--ink-soft); }
@media (max-width:900px){
  .bn{ grid-template-columns:1fr; }
  .bn-t.wide,.bn-t.half,.bn-t.third{ grid-column:span 1; }
}

/* ── TABS: three facets of one output, explored rather than scrolled past ──
   Forecasts' three ideas are aspects of a single thing, so switching between
   them reads better than passing each one on the way down. */
.tb{ margin-top:8px; }
.tb-bar{ display:flex; gap:4px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tb-b{ background:none; border:none; font-family:inherit; cursor:pointer; padding:14px 20px;
  font-size:14.5px; font-weight:600; color:var(--ink-faint); border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .18s, border-color .18s; }
.tb-b:hover{ color:var(--ink-soft); }
.tb-b.on{ color:var(--accent-deep); border-bottom-color:var(--accent); }
.tb-b:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px 6px 0 0; }
.tb-p{ display:none; grid-template-columns:1fr 400px; gap:clamp(30px,4vw,64px); align-items:center;
  padding:clamp(32px,4vw,54px) 0 clamp(12px,2vw,20px); }
.tb-p.on{ display:grid; animation:tbIn .4s cubic-bezier(.2,.7,.3,1) both; }
@keyframes tbIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.tb-p h3{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(25px,3vw,35px);
  line-height:1.1; letter-spacing:-.02em; max-width:17ch; }
.tb-p > div > p{ margin-top:15px; font-size:16px; color:var(--ink-soft); line-height:1.68; max-width:50ch; }
@media (max-width:900px){
  .tb-p, .tb-p.on{ grid-template-columns:1fr; gap:22px; }
  .tb-b{ padding:12px 14px; font-size:13.5px; }
  @media (prefers-reduced-motion:reduce){ .tb-p.on{ animation:none; } }
}
@media (prefers-reduced-motion:reduce){ .tb-p.on{ animation:none; } }