/* ==========================================================================
   Tokens — mirrored from src/styles.scss so the page reads as the same product
   ========================================================================== */
:root{
  --accent:#d9534f; --accent-rgb:217,83,79; --accent-hover:#e2706c; --accent-strong:#c44440;
  --ink:#fff; --ink-2:#fff; --ink-3:#fff; --ink-4:#fff;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --surface:#0c0c10; --surface-2:#121218;
  --font-base:"Open Sans",sans-serif; --font-display:"Space Grotesk",sans-serif; --font-mono:"JetBrains Mono",monospace;
  /* Corner radii — one scale for the whole site. --r-lg is the outer panel/card
     corner, --r-md the inner wells (chart boxes, small hairline grids, chips). */
  --r-lg:14px; --r-md:8px;
  /* Chart marks — validated for dark surface #0c0c10 (OKLCH band, CVD, contrast) */
  --s1:#12a3bb; --s2:#8f72e6; --s3:#d4691f;
  --nav-h:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#000;color:var(--ink);font-family:var(--font-base);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;line-height:1.1}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}
::selection{background:rgba(var(--accent-rgb),.35)}
/* Full-bleed: the page uses the whole viewport width. Individual text
   blocks keep their own max-width so line length stays readable. */
.shell{width:100%;max-width:none;margin:0;padding:0 clamp(22px,3.4vw,72px)}

/* Shared atoms ------------------------------------------------------------ */
/* Brand mark: the "x" in "ExM" always sets smaller than the surrounding
   letters, in every context (nav, eyebrow, body copy, panel header) —
   em-sized so it scales with whatever font-size it lands in. */
.exm-x{font-size:.7em}

.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent)}
.lede{color:var(--ink-2);font-size:16px;line-height:1.7;font-weight:300}

.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;font-size:13px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--line);background:transparent;color:#fff;
  cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--accent);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.04)}

/* Glass panel — same recipe as ai-search.component.scss .ai-panel */
.glass{position:relative;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(22,23,29,.78),rgba(12,12,16,.86));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.glass::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.9),transparent)}

/* Grain field — from .ai-grid */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.12) .5px,transparent .6px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 78%);
  animation:stars 30s linear infinite}
@keyframes stars{from{background-position:0 0}to{background-position:22px 44px}}

/* Scroll reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
/* Reduced motion: everything resolves to its finished state, nothing loops. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.hl > span,.mkt tbody tr,.mkf-r,.mkm-c,.mkg-c,.fnav a{opacity:1!important;transform:none!important}
  .c-bub,.c-bar,.c-col,.pvbar i,.pvg .m i,.pvc i{transform:none!important}
  .c-line,.c-ring.seg{stroke-dashoffset:0!important}
  .c-area,.c-dot,.c-ref,.pvchart text{opacity:1!important}
  .progress{display:none}
}

/* ==========================================================================
   Header — 80px sticky, uppercase nav, accent on active (matches header.scss)
   ========================================================================== */
.nav{position:sticky;top:0;z-index:1000;height:var(--nav-h);background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);transition:border-color .3s ease,background .3s ease}
.nav.stuck{background:rgba(0,0,0,.92);border-bottom-color:var(--line)}
.nav-in{position:relative;height:100%;display:flex;align-items:center;gap:40px}
.nav-logo img{width:150px}
.nav-links{display:flex;align-items:center;gap:clamp(24px,2.1vw,34px);margin-left:auto}
.nav-links a{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  position:relative;padding:4px 0;white-space:nowrap;transition:color .3s ease}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);
  transition:right .3s cubic-bezier(.22,1,.36,1)}
/* the product name carries more weight than the module links */
.nav-links a.is-brand{color:#fff;font-weight:600}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{right:0}
.nav-cta{display:flex;align-items:center;gap:14px;margin-left:8px}
.nav-cta .btn{height:38px;padding:0 16px;font-size:11px}
.burger{display:none;background:none;border:0;color:#fff;font-size:22px;margin-left:auto;cursor:pointer}
/* Centre the links in the bar only where there's room for it; below that they
   sit right-aligned as before rather than colliding with the CTAs. */
@media(min-width:1420px){
  /* viewport-centred, but the CTA block is wider than the logo, so the
     right-hand clearance is the binding one — grow gently from the
     breakpoint and let wide screens take the full spread. */
  .nav-links{position:absolute;left:50%;transform:translateX(-50%);margin-left:0;
    gap:clamp(30px,2.4vw,56px)}
  .nav-cta{margin-left:auto}
}
/* Wider screens can take a lot more air between the links. Held back until
   1600px because the links are centred on the viewport while the CTA block is
   right-aligned, so the right-hand clearance runs out before the left does. */
@media(min-width:1600px){
  .nav-links{gap:clamp(40px,3.9vw,88px)}
}
@media(max-width:1080px){.nav-links,.nav-cta{display:none}.burger{display:block}}

/* ==========================================================================
   Hero — skyline held to a right-hand band, no parallax
   ========================================================================== */
/* Two numbers, deliberately separate.

   --macro-x is the "MACRO" nav link's left edge, and it sizes the prompt and
   its answer: they stop a gutter short of it. Measured across 1180-2560px
   MACRO's own left edge runs 63.2%-68.0% of the viewport, so 68.5vw clears it
   at every width with a little room in hand.

   --photo-x is where the photograph's box begins, and it sits well left of
   that. The picture is not cut at its left edge, it is faded out over a long
   ramp, so starting the box early buys a lot more visible skyline — most of
   it in the open bands above and below the answer panel — while the part that
   passes behind the panel is still too faint to fight it.

   Below 1080px the nav collapses to a burger and there is no MACRO to line up
   against, so the old full-bleed treatment comes back (see that block). */
.hero{--macro-x:68.5vw;--photo-x:52vw;
  position:relative;min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;
  padding:96px 0 110px;overflow:hidden}
.hero > .shell{position:relative;z-index:3;width:100%}
.hero-in{max-width:660px}

/* Chicago at night, shot down the loop with the Willis Tower centred in the
   frame. It is a portrait plate standing in a tall narrow band, so cover
   trims the sides rather than the height and the tower stays centred. The
   left edge is masked out rather than cut, so the picture resolves out of the
   black instead of butting against it in a hard seam. */
/* the width is stated rather than left to left/right: this is a replaced
   element, so width:auto would resolve from the file's own aspect ratio and
   ignore `right`, leaving a gap at the viewport edge once the box starts left */
.hero-photo{position:absolute;left:var(--photo-x);top:0;bottom:0;
  width:calc(100% - var(--photo-x));height:100%;object-fit:cover;
  /* Another 50% on top of the last one. Opacity had almost nothing left to
     give (.93 of 1), so it goes to full and a filter carries the rest:
     against black both are a straight multiply on the pixel, and
     1.0 x 1.4 is 1.5x the .93 it was rendering at. The trade is that the
     brightest window and street lights now clip — unavoidable when you push a
     night shot this far, and the reason contrast is eased back a touch. */
  object-position:center 50%;z-index:0;opacity:1;filter:brightness(1.4) contrast(.96);
  /* The long ramp that lets the box start early. It eases in rather than
     running straight, so the first third is a faint wash that sits behind the
     answer panel without competing with it, and the skyline only comes up to
     full past the panel's right edge. A linear ramp over the same distance
     would put a locatable edge right through the copy. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.03) 12%,
    rgba(0,0,0,.10) 22%,rgba(0,0,0,.24) 32%,rgba(0,0,0,.46) 42%,rgba(0,0,0,.72) 50%,#000 58%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.03) 12%,
    rgba(0,0,0,.10) 22%,rgba(0,0,0,.24) 32%,rgba(0,0,0,.46) 42%,rgba(0,0,0,.72) 50%,#000 58%);
  animation:heroIn 2s cubic-bezier(.22,1,.36,1) both}
@keyframes heroIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}

/* The copy column is over bare black now, so the scrim has only two jobs
   left: settle the picture into the page foot, and take the top edge down a
   little so the sky doesn't run into the nav. */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,#000 1%,rgba(0,0,0,.34) 22%,transparent 58%),
             linear-gradient(to bottom,rgba(0,0,0,.55) 0,transparent 26%)}
.hero-bloom{position:absolute;z-index:2;left:-8%;top:-15%;width:62%;height:110%;pointer-events:none;
  filter:blur(74px);
  background:radial-gradient(44% 44% at 42% 44%,rgba(var(--accent-rgb),.2),transparent 70%)}

.hero h1{font-size:clamp(34px,4.2vw,58px);line-height:1.08;font-weight:400;margin:22px 0 0;
  max-width:26ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{margin-top:22px;max-width:540px;font-size:17px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* Headline reveal — each line slides out from its own clipping box */
.hl{display:block;overflow:hidden}
.hl > span{display:block;transform:translateY(108%);
  animation:lineUp 1s cubic-bezier(.22,1,.36,1) forwards}
.hl:nth-of-type(2) > span{animation-delay:.12s}
.hl:nth-of-type(3) > span{animation-delay:.24s}
@keyframes lineUp{to{transform:none}}

@media(max-width:820px){.hero{min-height:0;padding:64px 0 76px}}

/* "Chat ExM" search bar — the real entry point on every screening page */
/* Grows vertically as the query wraps — the real ones run to a few lines. */
/* On the landing hero this runs out to meet the photograph (see --panel-w
   below); everywhere else it keeps its own column width. */
.chatbar{margin-top:34px;max-width:640px;position:relative;display:flex;align-items:flex-start;gap:12px;
  min-height:56px;padding:15px 16px;background:rgba(31,31,31,.72);border:1px solid var(--line);
  border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:text;
  transition:border-color .3s ease,box-shadow .3s ease}
.chatbar:hover{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.08)}
/* the octopus, mid-swim, in place of a magnifier: this bar is ExM answering,
   not a search box. Sized to the line it sits beside. */
/* an <object>, not an <img>, so exm-site.js can reach into the flipbook and
   run it only while the answer draws — see octoPlay() there */
.chatbar-octo{width:26px;height:26px;flex:0 0 auto;margin-top:-2px;display:block;
  border:0;background:none;object-fit:contain;pointer-events:none}
.chatbar .typed{flex:1;font-size:14.5px;line-height:1.6;color:var(--ink-2);
  white-space:normal;overflow-wrap:anywhere}
.chatbar .caret{display:inline-block;width:7px;height:16px;vertical-align:-3px;margin-left:2px;
  background:var(--accent);animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chatbar kbd{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);border:1px solid var(--line);
  padding:4px 7px;letter-spacing:.06em;flex:0 0 auto;margin-top:1px}

/* Stat strip */
.stats{position:relative;z-index:2;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.trustbar{padding:22px 0 20px;border-bottom:1px solid var(--line-2);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:30px 0 30px 30px;border-left:1px solid var(--line-2)}
.stat:first-child{padding-left:0;border-left:0}
.stat-n{font-family:var(--font-mono);font-size:clamp(26px,3vw,38px);font-weight:500;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.stat-n span{color:var(--accent)}
.stat-l{margin-top:8px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:820px){.stats-in{grid-template-columns:repeat(2,1fr)}
  .stat{padding:22px 0 22px 22px}.stat:nth-child(3){padding-left:0;border-left:0}}

/* ==========================================================================
   Section scaffold
   ========================================================================== */
section{position:relative}
.sec{padding:120px 0}
.sec-head{max-width:720px}
.sec-head h2{font-size:clamp(30px,3.6vw,46px);font-weight:400;margin:20px 0 0}
.sec-head .lede{margin-top:18px}
@media(max-width:820px){.sec{padding:80px 0}}

/* ==========================================================================
   ExM Intelligence demo
   ========================================================================== */
.demo{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;margin-top:60px}
@media(max-width:1000px){.demo{grid-template-columns:1fr;gap:40px}}
.demo-list{margin:34px 0 0;padding:0;list-style:none;display:grid;gap:2px}
.demo-list li{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line-2)}
.demo-list li:last-child{border-bottom:1px solid var(--line-2)}
.demo-list b{display:block;font-weight:600;font-size:14px;margin-bottom:5px}
.demo-list p{font-size:13.5px;color:var(--ink-3);line-height:1.6}
.demo-list .n{font-family:var(--font-mono);font-size:11px;color:var(--accent);padding-top:2px;flex:0 0 22px}

.panel{padding:0;overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.orb{position:relative;width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 32% 28%,#fff 0%,rgba(255,255,255,.6) 12%,transparent 30%),
             radial-gradient(circle at 70% 75%,var(--accent-strong),transparent 55%),
             radial-gradient(circle at 50% 50%,var(--accent),#1a1014 78%);
  box-shadow:0 0 20px rgba(var(--accent-rgb),.5);animation:float 4s ease-in-out infinite}
.orb::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.3);animation:ring 3s ease-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes ring{0%{transform:scale(.9);opacity:.7}80%,100%{transform:scale(1.5);opacity:0}}
.panel-bar b{font-family:var(--font-display);font-size:13.5px;font-weight:500}
.panel-bar .dot{width:6px;height:6px;border-radius:50%;background:#3ddc84;margin-left:auto}
.panel-bar small{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);letter-spacing:.06em}

.panel-body{padding:22px}
.msg-u{font-size:14.5px;line-height:1.6;padding:12px 16px;background:rgba(255,255,255,.05);
  border-left:2px solid var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.chip{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;padding:6px 10px;
  border:1px solid rgba(var(--accent-rgb),.35);border-radius:var(--r-md);
  color:#fff;background:rgba(var(--accent-rgb),.09);
  opacity:0;transform:translateY(6px);
  animation:chipIn .45s cubic-bezier(.22,1,.36,1) both paused}
@keyframes chipIn{to{opacity:1;transform:none}}

/* Chart — 2 series, legend + direct labels, 2px gaps, 4px rounded data-ends */
.chart{margin-top:22px;border:1px solid var(--line-2);padding:18px 18px 14px;background:rgba(0,0,0,.35)}
.chart-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:4px}
.chart-h h4{font-size:13px;font-weight:500}
.chart-h small{font-family:var(--font-mono);font-size:10px;color:var(--ink-4);letter-spacing:.06em}
.legend{display:flex;gap:16px;margin:10px 0 16px}
.legend span{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-3)}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.plot{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:end;height:150px;
  border-bottom:1px solid var(--line);padding-bottom:0}
.grp{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%;position:relative}
.bar{width:15px;border-radius:4px 4px 0 0;height:0;transition:height 1.1s cubic-bezier(.22,1,.36,1);position:relative}
.bar:hover{filter:brightness(1.25)}
.bar[data-s="1"]{background:var(--s1)}
.bar[data-s="2"]{background:var(--s2)}
.bar .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);opacity:0;
  pointer-events:none;white-space:nowrap;font-family:var(--font-mono);font-size:10px;color:#fff;
  background:rgba(18,20,26,.94);border:1px solid var(--line);padding:5px 8px;
  transition:opacity .16s ease,transform .18s cubic-bezier(.22,1,.36,1)}
.bar:hover .tip{opacity:1;transform:translate(-50%,0)}
.xaxis{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:9px}
.xaxis span{text-align:center;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3)}
.cite{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.cite a{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;
  color:var(--ink-3);border:1px solid var(--line-2);padding:5px 9px;transition:color .25s,border-color .25s}
.cite a:hover{color:#fff;border-color:rgba(var(--accent-rgb),.5)}

/* ==========================================================================
   Modules grid
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:60px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.card{position:relative;background:#000;padding:38px 30px 34px;overflow:hidden;transition:background .4s ease;
  display:flex;flex-direction:column}
.card::after{content:"";position:absolute;left:0;top:0;height:1px;width:0;background:var(--accent);transition:width .5s cubic-bezier(.22,1,.36,1)}
.card:hover{background:#0a0a0d}
.card:hover::after{width:100%}
.card .ic{width:34px;height:34px;filter:brightness(0) invert(1);opacity:.8;transition:opacity .3s ease,transform .4s ease}
.card:hover .ic{opacity:1;transform:translateY(-2px)}
.card h3{margin:24px 0 10px;font-size:19px;font-weight:500}
.card p{font-size:13.5px;line-height:1.65;color:var(--ink-3)}
.card ul{margin:auto 0 0;padding:20px 0 0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.card li{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--ink-3);
  border:1px solid var(--line-2);padding:4px 8px}

/* ==========================================================================
   Role picker — "what do you want to use Ex Machina for?"
   ========================================================================== */
.picker{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
@media(max-width:1000px){.picker{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.picker{grid-template-columns:1fr}}

/* These read as the same component as the numbered capability cards on the
   feature pages (.fdash-card / .fdash-cap): same fill, border, radius and
   shadow, same 18px padding and 10px stack, same numbered badge beside an
   uppercase title, and the preview sitting in the same bordered well rather
   than in a floating window. Changing one of the two should mean changing
   both — they are deliberately one visual language. */
.pcard{position:relative;display:flex;flex-direction:column;gap:10px;text-align:left;
  padding:18px 18px 16px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9);color:#fff;cursor:pointer;
  transition:border-color .25s ease,background .25s ease,
             transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
/* the accent border + fill is .fdash-cap's hover; the lift is this grid's own,
   since nothing clips these cards the way the feature-page scroller does */
.pcard:hover{border-color:rgba(var(--accent-rgb),.45);background:#101015;
  transform:translateY(-3px);box-shadow:0 18px 46px rgba(0,0,0,.6)}
.pcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.pcard-top{display:flex;gap:11px;align-items:flex-start}
.pcard-n{width:26px;height:26px;border-radius:6px;flex:none;display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:400;font-size:11.5px;color:var(--accent);
  background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.35)}

/* Each card previews the real feature panel it links to — the same bubble map,
   funnel, comps or credit chart, in the sub-feature card's chart well. */
/* fixed height like .fdash-cap-vis, pushed down by margin-top:auto so a card
   whose title or question wraps to an extra line collects the slack above the
   well instead of stretching it — every preview in a row is the same size */
/* the floor is set so the 340x108 figures are width-driven rather than
   height-driven — any shorter and they scale to fit the height and leave a
   gutter down both sides of the well */
.pcard-img{position:relative;margin-top:auto;flex:0 0 auto;height:clamp(168px,19vh,190px);
  overflow:hidden;border-radius:var(--r-md);
  background:rgba(255,255,255,.02);border:1px solid var(--line-2)}
/* the preview fills the well: a thin label rule on top, the chart below it
   scaled to whatever room is left */
.pv{display:flex;flex-direction:column;position:absolute;inset:0;z-index:1;
  background:none;border:0;border-radius:0;box-shadow:none}
.pv-h{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:8px 11px 7px;
  border-bottom:1px solid var(--line-2)}
.pv-h .d{width:5px;height:5px;background:var(--accent);flex:0 0 auto}
.pv-h b{font-family:var(--font-display);font-size:10px;font-weight:500;color:#fff;white-space:nowrap}
.pv-h small{margin-left:auto;font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.pv-b{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:8px 11px 9px}
/* the ownership preview is a live 3-D structure chart on canvas rather than a
   still SVG, so it takes whatever room the label rule leaves */
.pv-art{flex:1 1 auto;min-height:0;width:100%;display:block}

/* rows — the table previews */
.pvr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.05);font-size:9.5px;color:var(--ink-3);white-space:nowrap}
.pvr:last-child{border-bottom:0}
.pvr b{font-family:var(--font-mono);font-size:9.5px;font-weight:500;color:#fff;
  font-variant-numeric:tabular-nums}
.pvr b.a{color:var(--accent)}
.pvr b.g{color:#3ddc84}

/* bars — the screen funnel preview */
.pvf{display:block;margin-bottom:8px}
.pvf:last-child{margin-bottom:0}
.pvf .t{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:var(--ink-3);
  margin-bottom:4px;white-space:nowrap}
.pvf .t b{font-family:var(--font-mono);color:#fff;font-weight:500}
.pvbar{display:block;height:4px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.pvbar i{position:absolute;left:0;top:0;bottom:0;background:var(--s1);
  transform:scaleX(0);transform-origin:left center}
.pvbar.k i{background:var(--accent)}
.go .pvbar i{animation:sweepIn .85s cubic-bezier(.22,1,.36,1) forwards}
@keyframes sweepIn{to{transform:scaleX(1)}}

/* tiles — gauges and market map previews */
.pvg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);
  border:1px solid var(--line-2)}
.pvg > span{display:block;background:#0b0b10;padding:6px 8px}
.pvg .k{display:block;font-family:var(--font-mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);white-space:nowrap}
.pvg .v{display:block;font-family:var(--font-mono);font-size:12.5px;color:#fff;margin-top:3px;
  font-variant-numeric:tabular-nums}
.pvg .v.a{color:var(--accent)}
.pvg .m{display:block;margin-top:5px;height:2px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.pvg .m i{position:absolute;left:0;top:0;bottom:0;background:var(--s1);
  transform:scaleX(0);transform-origin:left center}
.go .pvg .m i{animation:sweepIn .95s cubic-bezier(.22,1,.36,1) forwards}
.pvg .s{display:block;font-size:9.5px;color:#fff;white-space:nowrap}
.pvg .n{display:block;font-family:var(--font-mono);font-size:7.5px;color:var(--ink-4);margin-top:3px}
.pvg .n b{color:var(--accent);font-weight:500}

/* ── Preview charts ───────────────────────────────────────────────
   Palette: red + teal carry series identity (validated categorical pair,
   CVD deltaE 15.6 deutan / 28.4 normal on this surface); green is the status
   colour only, never a bare series, and always sits next to a sign or label.
   Marks follow the house spec: 2px lines, 4px rounded bar ends anchored to a
   baseline, >=8px markers, recessive grid. */
.pvchart{display:block;margin-top:2px}
.pvchart svg{width:100%;height:auto;max-height:132px;display:block;overflow:visible}
/* the parallax-free hero cards are gone, but feature pages reuse these */
.hpc .pvchart svg{max-height:none}
/* in a preview card the chart takes whatever room the well leaves and scales
   to fit it — xMidYMid meet, so it letterboxes rather than distorting */
.pcard .pvchart{display:flex;flex:1 1 auto;min-height:0;margin-top:0}
.pcard .pvchart svg{height:100%;max-height:none}
.pcard .pvleg{flex:0 0 auto;margin-top:6px}
.cg{stroke:rgba(255,255,255,.07);stroke-width:1}        /* grid */
.cax{stroke:rgba(255,255,255,.16);stroke-width:1}       /* baseline */
.cl{font-family:var(--font-mono);font-size:7px;fill:var(--ink-4);letter-spacing:.06em}
.cv{font-family:var(--font-mono);font-size:8.5px;fill:#fff}
.cv.g{fill:#3ddc84}.cv.a{fill:var(--accent)}

.c-bar,.c-col{fill:var(--s1)}
.c-bar.k,.c-col.k{fill:var(--accent)}
.c-bar.ok,.c-col.ok{fill:#3ddc84}
.c-bar.v,.c-col.v{fill:var(--s2)}
.cl.a{fill:var(--accent)}
.c-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-line.t{stroke:var(--s1)}
.c-line.g{stroke:#3ddc84}
.c-area{fill:url(#cgRed)}
.c-area.t{fill:url(#cgTeal)}
.c-area.g{fill:url(#cgGreen)}
.c-dot{r:3.2;fill:var(--accent);stroke:#0b0b10;stroke-width:1.5}
.c-dot.t{fill:var(--s1)}
.c-dot.g{fill:#3ddc84}
.c-bub{fill-opacity:.55;stroke-width:1.5}
.c-bub.r{fill:var(--accent);stroke:var(--accent)}
.c-bub.t{fill:var(--s1);stroke:var(--s1)}
.c-bub.v{fill:#8f72e6;stroke:#8f72e6}
.c-ring.v{stroke:#8f72e6}
.c-ring{fill:none;stroke-width:9}
.c-ring.bg{stroke:rgba(255,255,255,.07)}
.c-ring.r{stroke:var(--accent)}
.c-ring.t{stroke:var(--s1)}
.c-ring.g{stroke:#3ddc84}
/* ── Chart entrances — each mark plays exactly once, when its panel is
   first seen. Nothing loops: repeating data marks read as noise. ───── */
.c-bub{transform:scale(0);transform-box:fill-box;transform-origin:center}
.go .c-bub{animation:cPop .65s cubic-bezier(.22,1,.36,1) forwards}
@keyframes cPop{to{transform:scale(1)}}

.c-bar{transform:scaleX(0);transform-box:fill-box;transform-origin:left center}
.go .c-bar{animation:cGrowX .8s cubic-bezier(.22,1,.36,1) forwards}
@keyframes cGrowX{to{transform:scaleX(1)}}

.c-col{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom center}
.go .c-col{animation:cGrowY .75s cubic-bezier(.22,1,.36,1) forwards}
@keyframes cGrowY{to{transform:scaleY(1)}}

/* line + area: the series draws itself, the fill follows it in */
.c-line{stroke-dasharray:640;stroke-dashoffset:640}
.go .c-line{animation:cDraw 1.25s cubic-bezier(.22,1,.36,1) forwards}
@keyframes cDraw{to{stroke-dashoffset:0}}
.c-area{opacity:0}
.go .c-area{animation:cFade .8s ease .55s forwards}
@keyframes cFade{to{opacity:1}}

/* donut arcs draw from their own segment length, held in --d */
.c-ring.seg{stroke-dashoffset:var(--d)}
.go .c-ring.seg{animation:cArc .9s cubic-bezier(.22,1,.36,1) forwards}
@keyframes cArc{to{stroke-dashoffset:0}}

.c-dot{opacity:0}
.go .c-dot{animation:cFade .4s ease .95s forwards}
.c-ref{opacity:0}
.go .c-ref{animation:cFade .5s ease .7s forwards}
.pvchart text{opacity:0}
.go .pvchart text{animation:cFade .5s ease .5s forwards}

/* legend — required whenever a preview carries two or more series */
.pvleg{display:flex;gap:12px;margin-top:7px}
.pvleg span{display:inline-flex;align-items:center;gap:5px;font-size:8px;color:var(--ink-3);
  font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.pvleg i{width:7px;height:7px;flex:0 0 auto}
.pvleg i.r{background:var(--accent)}.pvleg i.t{background:var(--s1)}
.pvleg i.v{background:#8f72e6}
/* the mock cards in the parallax hero reuse these at a larger size */
.hpc .cl{font-size:9px}.hpc .cv{font-size:11px}
.hpc .pvleg span{font-size:9.5px}

/* columns — the statement preview */
.pvc{display:flex;align-items:flex-end;gap:5px;height:44px;margin-top:2px}
.pvc i{flex:1;background:var(--s1);opacity:.65;transform-origin:bottom;transform:scaleY(0)}
.pvc i.k{background:var(--accent);opacity:1}
.go .pvc i{animation:growIn .8s cubic-bezier(.22,1,.36,1) forwards}
@keyframes growIn{to{transform:scaleY(1)}}
.go .pvc i:nth-child(2){animation-delay:.07s}
.go .pvc i:nth-child(3){animation-delay:.14s}
.go .pvc i:nth-child(4){animation-delay:.21s}
.go .pvc i:nth-child(5){animation-delay:.28s}
.go .pvc i:nth-child(6){animation-delay:.35s}

/* The copy sits above the well, and the well takes the slack in a stretched
   row, so the previews stay bottom-aligned across the three columns. */
.pcard-body{padding:0;display:flex;flex-direction:column;gap:10px;flex:0 0 auto}
/* .fdash-cap h4's treatment, one step up in size because these head the
   landing page rather than sitting inside a feature */
.pcard-body h3{font-size:17px;font-weight:500;line-height:1.25;
  letter-spacing:.03em;text-transform:uppercase;color:#fff}
.pcard-body p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-3)}


.rmain{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:46px}
@media(max-width:1000px){.rmain{grid-template-columns:1fr;gap:34px}}
.rsec--alt .rmain .rvisual{order:2}
@media(max-width:1000px){.rsec--alt .rmain .rvisual{order:0}}
.rcopy .q{font-family:var(--font-display);font-size:19px;font-weight:400;line-height:1.4;
  color:#fff;margin-bottom:16px;padding-left:14px;border-left:2px solid var(--accent)}
.rcopy .lede{font-size:16px}
.rfeats{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:1px;background:var(--line-2);
  border:1px solid var(--line-2)}
.rfeats li{background:#000;padding:14px 18px;display:flex;align-items:center;gap:13px;font-size:13.5px;
  color:var(--ink-2)}
.rfeats i{color:var(--accent);font-size:11px;flex:0 0 auto}
.rcta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* ── Feature mock, shared chrome ─────────────────────────────────── */
.mk{padding:0;overflow:hidden}
.mk-h{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line-2)}
.mk-h b{font-family:var(--font-display);font-size:12.5px;font-weight:500}
.mk-h small{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4)}
.mk-dot{width:7px;height:7px;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16)}
.mk-b{padding:16px 18px 18px}
.mk-note{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-2);font-family:var(--font-mono);
  font-size:10px;color:var(--ink-4);display:flex;align-items:center;gap:8px;line-height:1.5}
.mk-note i{color:var(--accent);flex:0 0 auto}

/* type: table */
.mkt{width:100%;border-collapse:collapse;font-size:12px}
.mkt th{text-align:left;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);font-weight:400;padding:0 8px 9px;border-bottom:1px solid var(--line-2)}
.mkt th:not(:first-child),.mkt td:not(:first-child){text-align:right}
.mkt td{padding:10px 8px;border-bottom:1px solid var(--line-2);color:var(--ink-2);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11.5px}
.mkt td:first-child{font-family:var(--font-base);font-size:12.5px;color:#fff}
.mkt td em{font-style:normal;display:block;font-size:10px;color:var(--ink-4);margin-top:2px;
  font-family:var(--font-base)}
.mkt tr:last-child td{border-bottom:0}
.mkt tr.tot td{color:#fff;border-top:1px solid var(--line)}
.mkt .pos{color:#3ddc84}.mkt .neg{color:var(--accent-hover)}

/* type: funnel */
.mkf{display:grid;gap:14px}
.mkf-r .t{display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:var(--ink-2);
  margin-bottom:7px}
.mkf-r .t b{font-family:var(--font-mono);font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.mkf-r .t span em{font-style:normal;color:var(--ink-4);font-size:11px}
.mkf-bar{height:6px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.mkf-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--s1);display:block}
.mkf-r:last-child .mkf-bar i{background:var(--accent)}

/* type: gauges */
.mkg{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2)}
.mkg-c{background:#000;padding:14px}
.mkg-c .k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);line-height:1.4}
.mkg-c .v{font-family:var(--font-mono);font-size:19px;font-weight:500;margin-top:7px;
  font-variant-numeric:tabular-nums}
.mkg-c .m{margin-top:9px;height:3px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.mkg-c .m i{position:absolute;left:0;top:0;bottom:0;background:var(--s1);display:block}
.mkg-c .d{font-family:var(--font-mono);font-size:10px;margin-top:7px;color:var(--ink-4)}

/* type: map */
.mkm{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2)}
.mkm-c{background:#000;padding:13px 14px;transition:background .3s ease}
.mkm-c:hover{background:#0b0b0f}
.mkm-c .s{font-size:12.5px;color:#fff}
.mkm-c .n{font-family:var(--font-mono);font-size:10px;color:var(--ink-4);margin-top:5px}
.mkm-c .n b{color:var(--accent);font-weight:500}

/* ── Mock animations — everything starts collapsed and plays on reveal ──
   A `.go` class is added by the observer once the panel is in view. */
.mk{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
.mk:hover{transform:translateY(-4px);box-shadow:0 38px 100px rgba(0,0,0,.72),
  inset 0 1px 0 rgba(255,255,255,.07)}

/* table rows stagger in */
.mkt tbody tr{opacity:0;transform:translateY(10px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.mk.go .mkt tbody tr{opacity:1;transform:none}
.mk.go .mkt tbody tr:nth-child(1){transition-delay:.10s}
.mk.go .mkt tbody tr:nth-child(2){transition-delay:.20s}
.mk.go .mkt tbody tr:nth-child(3){transition-delay:.30s}
.mk.go .mkt tbody tr:nth-child(4){transition-delay:.40s}
.mk.go .mkt tbody tr:nth-child(5){transition-delay:.50s}
.mk.go .mkt tr.tot{animation:totGlow 1.5s ease .75s both}
@keyframes totGlow{0%{background:rgba(var(--accent-rgb),0)}
  35%{background:rgba(var(--accent-rgb),.13)}100%{background:rgba(var(--accent-rgb),0)}}

/* funnel + gauge meters sweep out from zero */
.mkf-bar i,.mkg-c .m i{width:0;transition:width 1.15s cubic-bezier(.22,1,.36,1)}
.mkf-r{opacity:0;transform:translateX(-10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.mk.go .mkf-r{opacity:1;transform:none}
.mk.go .mkf-r:nth-child(1){transition-delay:.08s}
.mk.go .mkf-r:nth-child(2){transition-delay:.20s}
.mk.go .mkf-r:nth-child(3){transition-delay:.32s}
.mk.go .mkf-r:nth-child(4){transition-delay:.44s}

/* map + gauge tiles pop in */
.mkm-c,.mkg-c{opacity:0;transform:scale(.96);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1),background .3s ease}
.mk.go .mkm-c,.mk.go .mkg-c{opacity:1;transform:none}
.mk.go .mkm-c:nth-child(1),.mk.go .mkg-c:nth-child(1){transition-delay:.10s}
.mk.go .mkm-c:nth-child(2),.mk.go .mkg-c:nth-child(2){transition-delay:.20s}
.mk.go .mkm-c:nth-child(3),.mk.go .mkg-c:nth-child(3){transition-delay:.30s}
.mk.go .mkm-c:nth-child(4),.mk.go .mkg-c:nth-child(4){transition-delay:.40s}

/* the live dot in each mock header keeps ticking */
.mk-dot{animation:dotPulse 2.6s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16)}
  50%{box-shadow:0 0 0 6px rgba(var(--accent-rgb),.04)}}

/* ==========================================================================
   Page-wide motion
   ========================================================================== */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:1200;
  background:linear-gradient(90deg,var(--accent),var(--s1));transition:width .12s linear}
.btn i.fa-arrow-right{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.btn:hover i.fa-arrow-right{transform:translateX(4px)}
.cta-bloom{animation:ctaBreathe 9s ease-in-out infinite alternate}
@keyframes ctaBreathe{from{opacity:.6;transform:translateX(-50%) scale(.94)}
  to{opacity:1;transform:translateX(-50%) scale(1.08)}}
.stat-n{transition:color .3s ease}
.eyebrow::before{transition:width .6s cubic-bezier(.22,1,.36,1)}
.sec-head:hover .eyebrow::before{width:38px}

/* ==========================================================================
   Depth / dashboard mock
   ========================================================================== */
.depth{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;margin-top:60px}
@media(max-width:1000px){.depth{grid-template-columns:1fr;gap:40px}}
.mock{overflow:hidden}
.mock-top{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line-2)}
.mock-top .tl{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.mock-top .path{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);margin-left:8px}
.mock-grid{display:grid;grid-template-columns:186px 1fr;min-height:400px}
.side{border-right:1px solid var(--line-2);padding:14px 0}
.side-g{padding:9px 16px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.side a{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;font-size:12.5px;
  color:var(--ink-2);border-left:2px solid transparent;transition:background .2s,color .2s,border-color .2s}
.side a:hover{background:rgba(255,255,255,.035);color:#fff}
.side a.on{color:#fff;border-left-color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.side a i{font-size:9px;color:var(--ink-4)}
.main{padding:18px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden}
.kpi{background:#000;padding:14px}
.kpi .k{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4)}
.kpi .v{font-family:var(--font-mono);font-size:20px;font-weight:500;margin-top:8px;font-variant-numeric:tabular-nums}
.kpi .d{font-family:var(--font-mono);font-size:10.5px;margin-top:5px}
.up{color:#3ddc84}.down{color:var(--accent-hover)}
.spark{margin-top:18px;border:1px solid var(--line-2);padding:14px}
.spark-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.spark-h b{font-size:12.5px;font-weight:500}
.spark-h small{font-family:var(--font-mono);font-size:10px;color:var(--ink-4)}
.tbl{margin-top:18px;width:100%;border-collapse:collapse;font-size:12px}
.tbl th{text-align:left;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);font-weight:400;padding:0 10px 9px;border-bottom:1px solid var(--line-2)}
.tbl th:not(:first-child),.tbl td:not(:first-child){text-align:right}
.tbl td{padding:10px;border-bottom:1px solid var(--line-2);color:var(--ink-2);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11.5px}
.tbl td:first-child{font-family:var(--font-base);font-size:12.5px;color:#fff}
.tbl tr:hover td{background:rgba(255,255,255,.03)}

.checks{margin:32px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.checks li{display:flex;gap:13px;font-size:14px;color:var(--ink-2);line-height:1.55}
.checks i{color:var(--accent);font-size:12px;padding-top:4px}

/* ==========================================================================
   Workflow
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:60px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:#000;padding:38px 30px}
.step .n{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:.2em}
.step h3{margin:18px 0 12px;font-size:20px;font-weight:500}
.step p{font-size:13.5px;line-height:1.7;color:var(--ink-3)}

/* ==========================================================================
   CTA + footer
   ========================================================================== */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line-2)}
.cta-in{position:relative;z-index:2;padding:120px 0;text-align:center}
.cta h2{font-size:clamp(32px,4.4vw,58px);font-weight:400}
.cta .lede{margin:22px auto 0;max-width:600px}
.cta-actions{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.cta-bloom{position:absolute;z-index:1;left:50%;top:-40%;width:900px;height:900px;transform:translateX(-50%);
  pointer-events:none;filter:blur(60px);
  background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 62%)}

footer{border-top:1px solid rgba(255,255,255,.13);background:#000;padding:44px 0 30px}
.f-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.f-contact{display:flex;align-items:center;gap:14px;font-size:12px}
.f-contact b{font-weight:700}
.f-contact a{font-weight:600;transition:color .15s ease}
.f-contact a:hover{color:var(--accent)}
.f-brand{font-weight:700;font-size:14px;letter-spacing:.05em}
.f-nav{display:flex;flex-wrap:wrap;gap:26px;margin:30px 0;padding:26px 0;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.f-nav a{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;transition:color .2s}
.f-nav a:hover{color:#fff}
.f-disc{font-size:9.5px;line-height:1.5;color:#fff;max-width:1190px}
.f-copy{margin-top:10px;font-size:9.5px;color:#fff}

/* ==========================================================================
   Feature pages — each picker card opens one of these instead of scrolling
   ========================================================================== */
.fhero{position:relative;overflow:hidden;padding:78px 0 66px;border-bottom:1px solid var(--line-2)}
.fhero-in{position:relative;z-index:2;max-width:840px}
.fhero h1{font-size:clamp(29px,3.5vw,44px);font-weight:400;line-height:1.12;margin:20px 0 0}
.fhero .q{margin-top:22px;font-family:var(--font-display);font-size:19px;font-weight:400;
  line-height:1.45;color:#fff;padding-left:14px;border-left:2px solid var(--accent);max-width:640px}
.fback{display:flex;width:max-content;align-items:center;gap:9px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:24px;
  transition:color .25s ease}
.fback:hover{color:var(--accent)}
.fback i{transition:transform .3s ease}
.fback:hover i{transform:translateX(-3px)}
.fhero .eyebrow{display:flex;width:max-content}
.fhero .lede{margin-top:20px;max-width:700px}
@media(max-width:820px){.fhero{padding:52px 0 46px}}

/* ==========================================================================
   Spec block — reference content, deliberately not chip-shaped
   --------------------------------------------------------------------------
   Pills read as things you can pick. These are hairline rows: no per-item
   border, no radius, no hover state. The data column is a definition list so
   each form code carries what it actually is.
   ========================================================================== */
/* ==========================================================================
   Sub-feature grid — "excel style dashboard": hairline-bordered cells, same
   recipe as the modules grid / KPI tiles (gap:1px + background:var(--line-2)
   simulates ruled cell borders without per-cell border declarations). Each
   cell carries a number, a title, a small animated figure and a description.
   ========================================================================== */
.subfeats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:52px;
  background:var(--line-2);border:1px solid var(--line-2)}
@media(max-width:1100px){.subfeats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.subfeats{grid-template-columns:1fr}}
.subfeat{background:#000;padding:26px 24px 25px;display:flex;flex-direction:column;
  transition:background .35s ease}
.subfeat:hover{background:#0a0a0d}
.subfeat-h{display:flex;align-items:baseline;gap:11px;margin-bottom:15px}
.subfeat-n{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:.08em;
  flex:0 0 auto}
.subfeat-h h3{font-size:16px;font-weight:500;line-height:1.25;font-family:var(--font-display)}
.subfeat-viz{height:90px;border:1px solid var(--line-2);overflow:hidden;margin-bottom:15px;
  background:linear-gradient(180deg,#111117,#08080c);transition:border-color .35s ease}
.subfeat:hover .subfeat-viz{border-color:rgba(var(--accent-rgb),.4)}
.subfeat-viz svg{width:100%;height:100%;display:block}
.subfeat p{font-size:13px;line-height:1.62;color:var(--ink-3);margin:0}

/* ==========================================================================
   Tag rows — "who it serves" / "powered by". Reuses the same hairline-chip
   language as the picker's mono tags, not pill/button styling.
   ========================================================================== */
.tags{margin-top:54px;padding-top:34px;border-top:1px solid var(--line-2)}
.tags-label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:18px}
.tags-row{display:flex;flex-wrap:wrap;gap:9px}
.tag{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;
  border:1px solid var(--line-2);background:#000;font-size:12.5px;color:var(--ink-2);
  white-space:nowrap;transition:border-color .3s ease,background .3s ease,transform .3s ease}
.tag:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.03);
  transform:translateY(-1px)}
.tag i{font-size:11.5px;flex:0 0 auto;width:13px;text-align:center}
.tags--who .tag i{color:var(--accent)}
.tags--data .tag i{color:var(--s1)}
.tags--who .tag:hover{border-color:rgba(var(--accent-rgb),.4)}
.tags--data .tag:hover{border-color:rgba(18,163,187,.45)}

/* figure marks — reuse the chart keyframes, all play once on reveal */
.sv-t{fill:var(--s1)}
.sv-a{fill:var(--accent)}
.sv-v{fill:var(--s2)}
.sv-line{fill:none;stroke:var(--s1);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sv-link{stroke:rgba(255,255,255,.2);stroke-width:1}
.sv-rule{stroke:rgba(255,255,255,.12);stroke-width:1}

.sv-pop{transform:scale(0);transform-box:fill-box;transform-origin:center}
.go .sv-pop{animation:cPop .6s cubic-bezier(.22,1,.36,1) forwards}
.sv-grow{transform:scaleX(0);transform-box:fill-box;transform-origin:left center}
.go .sv-grow{animation:cGrowX .75s cubic-bezier(.22,1,.36,1) forwards}
.sv-draw{stroke-dasharray:190;stroke-dashoffset:190}
.go .sv-draw{animation:cDraw .95s cubic-bezier(.22,1,.36,1) forwards}
.sv-in{opacity:0;transform:translateX(-12px)}
.go .sv-in{animation:svIn .65s cubic-bezier(.22,1,.36,1) forwards}
@keyframes svIn{to{opacity:1;transform:none}}

/* ==========================================================================
   Feature page shell — every feature listed down the left, the open one
   marked, its content on the right
   ========================================================================== */
.fpage{padding:0 0 40px}
.fpage-grid{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:start}
@media(max-width:1100px){.fpage-grid{grid-template-columns:1fr;gap:0}}

/* Cards glide in from mid-screen to their resting spot, staggered — the same
   entrance the screening sidebar uses (screening.component.scss
   .screening-sidebar-card / @keyframes sidebar-card-fly-in).

   This must play ONCE — the moment you land here from a picker card on the
   landing page — and never again while you're clicking between features on
   this sidebar. There's no client-side router here to track that, so an
   inline script in <head> (see feature-*.html) inspects document.referrer
   before first paint: if the referrer is another feature-*.html on this
   site, it's internal sidebar navigation and the html.fnav-intro flag is
   left off, so the rules below never apply and the sidebar simply renders
   in its resting state. Otherwise (arriving from landing.html, a bookmark,
   or anywhere else) the flag is set and the entrance plays. */
.fnav{position:sticky;top:calc(var(--nav-h) + 30px);padding:56px 0 40px;perspective:900px;
  display:flex;flex-direction:column;gap:12px}
html.fnav-intro .fnav{animation:fnavIn .5s ease both}
@keyframes fnavIn{from{opacity:0}to{opacity:1}}
@media(max-width:1100px){.fnav{position:static;padding:36px 0 0}}
.fnav-label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:6px}
/* Stacked cards, matched to the in-app screening rail
   (screening.component.scss .screening-sidebar-card): square corners, flat
   #2d2d2d fill, Open Sans 12/700 uppercase, and the open one carrying a
   solid accent border with a tinted fill and accent type. */
.fnav a{display:flex;align-items:center;gap:12px;padding:14px;
  border:1px solid transparent;background:#2d2d2d;
  font-family:var(--font-base);font-size:12px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;line-height:1.2;color:#fff;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
/* Icons stay plain white in every state, same reasoning as
   .screening-sidebar-icon: they're url()-sourced <img>s, not inline SVG. */
.fnav-icon{width:22px;height:22px;flex:0 0 auto;object-fit:contain;
  filter:brightness(0) invert(1)}
html.fnav-intro .fnav a{
  opacity:0;transform:translate(50vw,0) scale(.85);transform-origin:center center;
  will-change:transform,opacity;
  animation:fnavCardFlyIn .65s cubic-bezier(.22,1,.36,1) forwards}
@keyframes fnavCardFlyIn{
  0%  {opacity:0;transform:translate(50vw,0) scale(.85)}
  100%{opacity:1;transform:translate(0,0) scale(1)}
}
html.fnav-intro .fnav a:nth-of-type(1){animation-delay:0ms}
html.fnav-intro .fnav a:nth-of-type(2){animation-delay:90ms}
html.fnav-intro .fnav a:nth-of-type(3){animation-delay:180ms}
html.fnav-intro .fnav a:nth-of-type(4){animation-delay:270ms}
html.fnav-intro .fnav a:nth-of-type(5){animation-delay:360ms}
html.fnav-intro .fnav a:nth-of-type(6){animation-delay:450ms}
.fnav a:hover{background:#3a3a3a}
/* the open feature — accent border + tinted fill + accent text */
.fnav a.on{border-color:var(--accent);background:rgba(var(--accent-rgb),.18);color:var(--accent)}
.fnav a.on:hover{background:rgba(var(--accent-rgb),.18)}

.fbody{padding:56px 0 0;min-width:0}
@media(max-width:1100px){.fbody{padding:34px 0 0}}
.fbody h1{font-size:clamp(28px,3.1vw,42px);font-weight:400;line-height:1.12;margin:0}
.fbody > .q{margin-top:20px;font-family:var(--font-display);font-size:18.5px;font-weight:400;
  line-height:1.45;color:#fff;padding-left:14px;border-left:2px solid var(--accent);max-width:640px}
.fbody > .lede{margin-top:18px;max-width:700px}
.fsec{margin-top:56px;padding-top:52px;border-top:1px solid var(--line-2)}
.fsec:first-of-type{border-top:0;padding-top:0;margin-top:40px}

/* ==========================================================================
   Feature dashboard — the single-screen layout shared by all six feature
   pages: a hero card with animated art, a horizontally scrollable row of
   six capability cards, and the who-it-serves / powered-by panels.
   ========================================================================== */
/* ==========================================================================
   Feature dashboard — scoped under .fdash so nothing here
   touches the shared site chrome. Reuses the site's own tokens (--accent,
   --surface, --surface-2, --line, --line-2, --s1 for teal), including the
   site-wide rule that all ink shades are solid white — this panel does NOT
   dim labels to grey, so --ink-2/3/4 are inherited from :root untouched.
   Sized to fit one viewport under the nav (no scroll to see the dashboard).
   ========================================================================== */
/* The page is a single screen: the dash fills the space under the nav
   (80px) less .fbody's top padding (20px) and .fpage's bottom padding (40px),
   and the hero flexes to absorb whatever is left over on taller displays.
   The two elastic dimensions — hero floor and chart-box height — are sized
   in vh (clamped) so the whole thing compresses on short laptops instead of
   forcing a scroll. */
/* One frame, six pages. Moving between features has to read as the CONTENTS
   changing inside a frame that stays put, so nothing below the nav is sized off
   the copy of the page you happen to be on:
     · the capability copy reserves whatever --cap-copy-sizer — the longest
       capability paragraph on any of the six pages — needs at the current card
       width (see .fdash-cap::before), so the row is one height everywhere
     · the figure well and the lower panels get explicit heights
     · the hero takes what is left, which is therefore also the same everywhere
   The two sizers are measured, not guessed: the reserve is a real string laid
   out in the real font at the real width, so it tracks every breakpoint and
   every re-wrap without a table of magic heights. */
.fdash{--shadow:0 24px 60px -30px rgba(0,0,0,.9);
  min-height:calc(100vh - 140px);display:flex;flex-direction:column;
  --cap-copy-fz:13px;--cap-copy-lh:1.55;
  --cap-copy-sizer:"Identify companies exhibiting triggers \2014  growth, distress, refinancing needs, ownership changes, management turnover, strategic reviews or unusual disclosure changes.";
  --cap-title-sizer:"Map the Capital Structure";
  /* the well's old height is now its FLOOR, and the ceiling is that floor plus
     whatever the lower panels gave up when they were cut down */
  --vis-min:clamp(92px,calc(12vh + 22px),152px);
  --vis-max:calc(var(--vis-min) + var(--vis-bonus));
  --vis-bonus:70px;
  /* two rows of icon tiles, sized for the longest label in the set
     ("Professional-services business development", four lines at 7 columns) */
  --lower-h:180px}
.fdash *{box-sizing:border-box}
.fdash h1,.fdash h3,.fdash h4{font-family:var(--font-display);font-weight:500;margin:0}
.fdash p{margin:0}

.fdash-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}

/* ---------- hero ---------- */
.fdash-hero{position:relative;overflow:hidden;padding:26px 34px 16px;
  min-height:clamp(200px,26vh,300px);flex:1 1 auto;
  display:flex;flex-direction:column;margin-bottom:10px}
.fdash-globe-holder{position:absolute;inset:auto -10% -26% auto;width:min(560px,88%);aspect-ratio:1/1;
  right:-7%;bottom:-26%}
.fdash-globe-holder canvas{width:100%;height:100%;display:block;cursor:grab}
.fdash-globe-holder canvas:active{cursor:grabbing}
.fdash-hero-copy{position:relative;z-index:2;max-width:600px}
.fdash-hero h1{margin:0;font-size:clamp(28px,3.1vw,42px);letter-spacing:-.02em;line-height:1.04;
  text-transform:uppercase;color:#fff}
.fdash-hero h1 .accent{color:var(--accent)}
/* weight 400, not 300: at this size a light weight on black reads as grey
   even at solid #fff, which is not the intent here. */
.fdash-hero p{color:var(--ink-3);max-width:530px;margin:14px 0 0;font-size:14.5px;line-height:1.6;font-weight:400}
.fdash-hero-foot{position:relative;z-index:2;margin-top:auto;padding-top:15px;display:flex;gap:30px;flex-wrap:wrap}
.fdash-stat{border-left:2px solid var(--line);padding-left:14px}
.fdash-stat .v{font-family:var(--font-mono);font-size:24px;color:#fff;font-variant-numeric:tabular-nums}
.fdash-stat .k{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-family:var(--font-mono)}

/* ---------- capability grid ---------- */
/* ---------- capability row: horizontal scroller ----------
   Six cards, three in view. Only this row scrolls — the page itself must stay
   a single screen, so the native scrollbar is hidden (it would add height and
   push the panels below off-screen) and the arrows + right-edge fade carry the
   affordance instead. Cards keep the exact width the old 3-up grid gave them,
   so nothing shifts at rest. */
.fdash-row{position:relative}
.fdash-grid6{display:flex;gap:12px;margin-top:0;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.fdash-grid6::-webkit-scrollbar{display:none}
.fdash-grid6 > .fdash-cap{flex:0 0 calc((100% - 24px) / 3);scroll-snap-align:start}
/* Grid rather than a column flex so the copy and its invisible sizer can share
   one cell: the row ends up as tall as the longest copy in the whole feature
   set, which is what keeps the well — and the card — at one height from page to
   page. Short copy leaves air above the well instead of shrinking the card. */
.fdash-cap{padding:18px 18px 16px;display:grid;grid-template-columns:100%;gap:10px;position:relative;
  transition:border-color .25s,background .25s}
.fdash-cap > .fdash-cap-top{grid-area:1/1}
.fdash-cap > p{grid-area:2/1;align-self:start}
.fdash-cap > .fdash-cap-vis{grid-area:3/1}
.fdash-cap::before{content:var(--cap-copy-sizer);grid-area:2/1;visibility:hidden;
  font-size:var(--cap-copy-fz);line-height:var(--cap-copy-lh)}
/* the same reserve for the heading, which turns two lines on the longest title
   once the cards get narrow. Indented past the number badge (26px) and the
   .fdash-cap-top gap (11px) so it wraps on the width a real title has. */
.fdash-cap::after{content:var(--cap-title-sizer);grid-area:1/1;visibility:hidden;margin-left:37px;
  font-family:var(--font-display);font-weight:500;font-size:15px;line-height:1.1;
  letter-spacing:.03em;text-transform:uppercase}
/* no translate on hover: overflow-y is clipped on the scroller, so a lift
   would be cut off. Border + fill carry the hover state instead. */
.fdash-cap:hover{border-color:rgba(var(--accent-rgb),.45);background:#101015}

/* more-content fade on the trailing edge, hidden once you reach the end */
.fdash-row::after{content:"";position:absolute;top:0;bottom:0;right:0;width:56px;pointer-events:none;
  background:linear-gradient(to left,#000,transparent);opacity:1;transition:opacity .3s ease}
.fdash-row.at-end::after{opacity:0}

.fdash-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(10,10,14,.9);border:1px solid var(--line);color:#fff;font-size:13px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:opacity .25s ease,border-color .25s ease,background .25s ease}
.fdash-arrow:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.18)}
.fdash-arrow.prev{left:-8px}
.fdash-arrow.next{right:-8px}
.fdash-arrow[disabled]{opacity:0;pointer-events:none}
.fdash-cap-top{display:flex;gap:11px;align-items:flex-start}
.fdash-n{width:26px;height:26px;border-radius:6px;flex:none;display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:400;font-size:11.5px;color:var(--accent);
  background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.35)}
.fdash-cap h4{font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.fdash-cap p{font-size:var(--cap-copy-fz);line-height:var(--cap-copy-lh);color:var(--ink-3)}
/* Every figure in the set is drawn on a 300×132 canvas, so the well asks for
   the height that ratio wants at the current card width, floored at what it
   used to be and capped by what the lower panels freed up. The art then FILLS
   the box rather than floating in the middle of it, and height the ratio can't
   use goes back to the hero instead of becoming padding in here. */
.fdash-cap-vis{margin-top:4px;aspect-ratio:300/132;height:auto;
  min-height:var(--vis-min);max-height:var(--vis-max);position:relative;border-radius:var(--r-md);
  background:rgba(255,255,255,.02);border:1px solid var(--line-2);overflow:hidden}
.fdash-cap-vis.bare{background:none;border:none}
.fdash-legend{position:absolute;right:9px;top:9px;display:flex;flex-direction:column;gap:4px;
  font-family:var(--font-mono);font-size:9.5px;color:var(--ink-3)}
.fdash-legend i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px}
.fdash-axis{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:space-around;
  font-family:var(--font-mono);font-size:9px;color:var(--ink-4)}
#fdash-towers{width:100%;height:100%;display:block}

.fdash-bub{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.9,.3,1.2)}
.fdash-reveal .fdash-bub{opacity:.92;transform:scale(1)}

/* Marks for the three SVG figures. Same contract as .fdash-bub: parked in their
   start state, released once the IntersectionObserver puts .fdash-reveal on the
   enclosing .fdash-cap-vis. Each plays once — nothing loops. */
.fdash-draw{stroke-dasharray:var(--len,420);stroke-dashoffset:var(--len,420);
  transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.3,1)}
.fdash-reveal .fdash-draw{stroke-dashoffset:0}
.fdash-pop{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.9,.3,1.4)}
.fdash-reveal .fdash-pop{opacity:1;transform:scale(1)}
.fdash-fade{opacity:0;transition:opacity .8s ease}
.fdash-reveal .fdash-fade{opacity:1}
.fdash-growx{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;
  transition:transform 1s cubic-bezier(.3,.8,.3,1)}
.fdash-reveal .fdash-growx{transform:scaleX(1)}
.fdash-fig text{font-family:var(--font-mono);fill:#fff}

.fdash-terms{display:flex;flex-direction:column;justify-content:center;gap:9px;height:100%;padding:6px 4px}
.fdash-term-k{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-mono);
  font-size:11px;line-height:1;color:var(--ink-3)}
.fdash-term-k b{color:#fff;font-weight:500;font-size:13px}
.fdash-meter{height:3px;background:var(--line-2);border-radius:2px;margin-top:5px;overflow:hidden}
.fdash-meter i{display:block;height:100%;width:0;background:var(--s1);transition:width 1.2s cubic-bezier(.3,.8,.3,1)}
.fdash-reveal .fdash-meter i{width:var(--w)}
.fdash-term-foot{font-family:var(--font-mono);font-size:9.5px;line-height:1;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);border-top:1px solid var(--line-2);padding-top:7px;margin-top:2px}

/* ---------- lower ---------- */
/* Fixed height, not content height: every page fills both panels with two rows
   of tiles, but the labels differ (one line of "PE" against four of
   "Professional-services business development"), and letting that set the
   height would move the whole band — and the hero above it — page to page. The
   tile rows split whatever height is here, so a page with short labels gets
   roomier tiles rather than a shorter panel. */
.fdash-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:12px;margin-top:10px;
  height:var(--lower-h)}
/* The two lower panels are trimmed 10% against their own content — tile
   padding does most of it, since it counts four times over the two rows — and
   the height that frees goes to .fdash-cap-vis above. The page is a fixed
   single screen, so the two moves have to cancel out. */
.fdash-panel-pad{padding:9px 12px;display:grid;grid-template-rows:auto minmax(0,1fr)}
.fdash-panel-pad h4{margin:0 0 6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
/* horizontal padding and column gap are cut too: wider tiles wrap the long
   labels in fewer lines, and lines are what this band's height is made of */
.fdash-icons{display:grid;row-gap:4px;column-gap:8px;grid-auto-rows:1fr;min-height:0}
.fdash-icons.serves{grid-template-columns:repeat(4,1fr)}
.fdash-icons.data{grid-template-columns:repeat(6,1fr)}
.fdash-ic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1px solid transparent;border-radius:var(--r-md);padding:3px 4px;text-align:center;
  transition:border-color .2s,background .2s;min-width:0;min-height:0}
.fdash-ic:hover{border-color:var(--line);background:rgba(255,255,255,.03)}
.fdash-ic svg,.fdash-ic i{width:18px;height:18px;flex:none;color:var(--ink-4);
  transition:color .2s,transform .2s}
.fdash-ic i{font-size:15px;display:grid;place-items:center}
.fdash-ic:hover svg,.fdash-ic:hover i{color:var(--accent);transform:translateY(-1px)}
.fdash-ic.doc svg,.fdash-ic.doc i{color:var(--ink-4)}
.fdash-ic.doc:hover svg,.fdash-ic.doc:hover i{color:var(--s1)}
.fdash-tag{font-family:var(--font-mono);font-weight:400;font-size:8.5px;line-height:1.15;color:var(--ink-3)}
.fdash-ic:hover .fdash-tag{color:#fff}

.fdash button{font:inherit;color:inherit;background:none;border:none}
.fdash :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Short viewports: the hero can't flex below its own copy, so step the
   type and rhythm down rather than letting the panels push off-screen. */
@media (max-height:920px){
  /* the copy metrics live on the variables so the sizer steps down with the
     copy it is reserving for — set them apart and the frame would drift */
  .fdash{--cap-copy-fz:12.5px;--cap-copy-lh:1.45;--lower-h:170px;--vis-bonus:52px}
  .fdash-hero{padding:24px 32px 16px;min-height:0}
  .fdash-hero h1{font-size:clamp(24px,2.5vw,32px)}
  .fdash-hero p{font-size:13.5px;line-height:1.55;margin-top:12px}
  .fdash-hero-foot{padding-top:16px}
  .fdash-stat .v{font-size:21px}
  .fdash-cap{padding:14px 14px 12px;gap:8px}
  /* the deal-terms figure is the one that doesn't fit a short well — it is
     centred, so any overflow shows as a clipped half-row at both edges */
  .fdash-terms{gap:6px;padding:3px}
  .fdash-panel-pad{padding:8px 11px}
  .fdash-panel-pad h4{margin-bottom:5px}
  .fdash-ic{padding:2px 3px}
  .fdash-ic svg,.fdash-ic i{width:17px;height:17px}
  .fdash-ic i{font-size:14px}
}
/* 768/800px laptops: reserving the worst case in every band costs height that
   these screens don't have, so the icon tiles and the hero rhythm take one more
   step down to pay for it. The figure well is deliberately left alone — it is
   already the tightest fit on this screen. */
@media (max-height:820px){
  .fdash{--lower-h:160px;--vis-bonus:48px}
  .fdash-hero{padding:20px 28px 14px}
  .fdash-hero p{margin-top:10px}
  .fdash-hero-foot{padding-top:12px}
  .fdash-ic{padding:2px 3px}
  .fdash-ic svg,.fdash-ic i{width:16px;height:16px}
  .fdash-ic i{font-size:13px}
  .fdash-tag{font-size:8px;line-height:1.1}
}
@media (max-width:1100px){
  /* below this the page stops being one screen — the panels stack and the
     dashboard scrolls — so the fixed band heights are dropped and everything
     goes back to sizing off its own content */
  .fdash{--lower-h:auto}
  .fdash-grid6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fdash-lower{grid-template-columns:1fr}
  .fdash-globe-holder{position:relative;inset:auto;width:100%;right:0;bottom:0;margin-top:14px;
    max-width:340px;align-self:center}
  .fdash-hero{min-height:0}
}
@media (max-width:640px){
  .fdash-grid6{grid-template-columns:1fr}
  .fdash-hero{padding:18px}
  .fdash-icons.serves,.fdash-icons.data{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .fdash *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Hero art for the five SVG-motif features (the Industry & Transaction hero
   uses a WebGL globe instead and keeps its own holder rule). The motif is
   drawn on an 860x560 canvas pinned to the right edge and scaled to the hero
   height; each motif masks itself out toward the left so it never fights the
   copy. */
/* The scenes are painted on canvas at the element's own pixel size, so it
   gets an explicit box rather than sizing itself off an intrinsic ratio. */
.fdash-art{position:absolute;top:0;right:0;bottom:0;height:100%;
  width:min(68%,860px);pointer-events:none;z-index:1;display:block}
@media(max-width:1100px){
  .fdash-art{opacity:.3;left:0;right:auto;width:100%;height:auto;top:50%;bottom:auto;
    transform:translateY(-50%)}
}

/* growY for columns, and dash-reveal for donut arcs — the two marks the
   sub-feature figure library needs beyond draw/pop/fade/growx. */
.fdash-growy{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom center;
  transition:transform .85s cubic-bezier(.3,.8,.3,1)}
.fdash-reveal .fdash-growy{transform:scaleY(1)}
.fdash-arc{stroke-dashoffset:var(--len);transition:stroke-dashoffset 1s cubic-bezier(.3,.8,.3,1)}
.fdash-reveal .fdash-arc{stroke-dashoffset:0}

/* ==========================================================================
   ExM Intelligence demo — a prompt and the answer streaming back in, the way
   it arrives in the product: resolved filters, then the tables row by row,
   then the chart, then the read. Each .dq-step carries a data-t offset in ms
   and exm-site.js flips them on in order once the panel is in view.
   ========================================================================== */
.dq-step{opacity:0;transform:translateY(7px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.dq-step.on{opacity:1;transform:none}

.dq-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}

.dq-h{display:flex;align-items:baseline;gap:10px;margin:20px 0 8px;
  font-family:var(--font-display);font-size:12.5px;font-weight:500}
.dq-h small{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-4);
  letter-spacing:.08em;margin-left:auto;white-space:nowrap}

/* the tables: hairline rules only, mono figures, right-aligned numbers */
.dq-tbl{border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden}
.dq-tr{display:grid;align-items:center;gap:10px;padding:8px 12px;
  border-top:1px solid var(--line-2);font-family:var(--font-mono);font-size:11px}
.dq-tbl .dq-tr:first-child{border-top:0}
.dq-tbl{--cols:1.5fr 1fr 1fr 1.1fr 1.05fr}
.dq-tbl .dq-tr{grid-template-columns:var(--cols)}
.dq-tbl.five .dq-tr{grid-template-columns:1.5fr 1fr 1fr 1.1fr 1.05fr}
.dq-tbl.four .dq-tr{grid-template-columns:1.3fr 1.1fr 1.35fr .9fr}
/* years down the side, one company per column, so every column carries the
   same kind of figure and the eye can run down a single issuer */
.dq-tbl.yrs .dq-tr{grid-template-columns:.9fr 1.1fr 1.1fr 1.05fr 1.05fr}
.dq-tr > span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
/* label columns are words, not figures — a rank column means the name is 2nd */
.dq-tr > span.l{text-align:left;font-variant-numeric:normal}
.dq-tr.dq-head{background:rgba(255,255,255,.03);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.dq-tr > span:first-child{font-family:var(--font-base);font-size:12px}
.dq-tr em{display:block;font-style:normal;font-family:var(--font-mono);font-size:9px;
  color:var(--ink-4);letter-spacing:.06em;margin-top:1px}
.dq-tr .pos{color:#3ddc84}
.dq-tr .neg{color:var(--accent)}
/* the row that answers the question */
.dq-tr.hit, .dq-tr:has(.hit){background:rgba(var(--accent-rgb),.09)}
.dq-tr .hit{color:var(--accent);font-weight:600}

/* radar */
.dq-radar{margin-top:6px;position:relative;border:1px solid var(--line-2);
  border-radius:var(--r-md);background:rgba(0,0,0,.35);padding:8px 0 2px}
/* the chart is roughly square, so let it fill the panel and it would run
   ~750px tall — cap the width and centre it instead. */
.dq-radar svg{width:100%;max-width:392px;height:auto;display:block;margin:0 auto}
.dq-radar .grid polygon{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.dq-radar .grid line,.dq-radar .ax line{stroke:rgba(255,255,255,.06);stroke-width:1}
.dq-radar .ax text{font-family:var(--font-mono);font-size:9px;fill:var(--ink-3)}
.dq-radar polygon.p15,.dq-radar polygon.p24{
  stroke-dasharray:760;stroke-dashoffset:760;transition:stroke-dashoffset 3s cubic-bezier(.3,.7,.3,1)}
.dq-radar polygon.p15{fill:rgba(18,163,187,.10);stroke:var(--s1);stroke-width:1.6}
.dq-radar polygon.p24{fill:rgba(var(--accent-rgb),.12);stroke:var(--accent);stroke-width:1.8;
  transition-delay:.9s}
.dq-step.on polygon.p15,.dq-step.on polygon.p24{stroke-dashoffset:0}
.dq-leg{position:absolute;top:10px;right:12px;display:flex;gap:12px;
  font-family:var(--font-mono);font-size:9.5px;color:var(--ink-3)}
.dq-leg i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px}
.dq-leg i.a{background:var(--s1)} .dq-leg i.b{background:var(--accent)}
.dq-leg i.c{background:#3ddc84} .dq-leg i.d{background:#8f72e6}

/* ---------- the figures ----------
   Two per prompt, side by side under the table, all authored on the same
   500x250 viewBox so the ten of them scale identically. Deliberately no bar
   charts: lines, areas, a scatter, a dumbbell and a slope chart, so each
   prompt's answer looks like its own analysis rather than the same chart
   with different numbers. Every mark plays once on .dq-step.on. */
.dq-charts{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;align-items:start;
  min-width:0;margin-top:auto}
.dq-fig-wrap{display:flex;flex-direction:column;min-width:0}
.dq-fig{margin-top:4px;position:relative;border:1px solid var(--line-2);
  border-radius:var(--r-md);background:rgba(255,255,255,.02);padding:8px 10px}
.dq-fig svg{width:100%;height:auto;display:block;overflow:visible}

.dq-fig .g{stroke:rgba(255,255,255,.06);stroke-width:1}
.dq-fig .ax{font-family:var(--font-mono);font-size:9px;fill:var(--ink-4)}
.dq-fig .axt{font-family:var(--font-mono);font-size:8px;letter-spacing:.08em;fill:var(--ink-4)}
/* threshold lines — the number the prompt is actually asking about */
.dq-fig .ref{stroke:rgba(255,255,255,.34);stroke-width:1;stroke-dasharray:3 3}
.dq-fig .reft{font-family:var(--font-mono);font-size:8.5px;fill:var(--ink-3)}
.dq-fig .dbl{stroke:rgba(255,255,255,.22);stroke-width:1.4}
.dq-fig .lg,.dq-fig .pt{font-family:var(--font-mono);font-size:9px}

/* series identity, shared by every mark type */
.dq-fig .s-a{--s:var(--s1)}   .dq-fig .s-b{--s:var(--accent)}
.dq-fig .s-c{--s:#3ddc84}     .dq-fig .s-d{--s:#8f72e6}
.dq-fig .s-e{--s:#fff}
.dq-fig .ln{fill:none;stroke:var(--s);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.5s cubic-bezier(.3,.8,.3,1)}
.dq-step.on .ln{stroke-dashoffset:0}
.dq-fig .dot{fill:#0a0a0e;stroke:var(--s);stroke-width:1.6;
  opacity:0;transition:opacity .5s ease .9s}
.dq-step.on .dot{opacity:1}
.dq-fig .bub{fill:var(--s);fill-opacity:.34;stroke:var(--s);stroke-width:1.4;
  opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
  transition:opacity .5s ease,transform .7s cubic-bezier(.2,.9,.3,1.25)}
.dq-step.on .bub{opacity:1;transform:none}
.dq-fig .pt{fill:var(--s);opacity:0;transition:opacity .5s ease .5s}
.dq-fig .lg{fill:var(--s)}
.dq-step.on .pt{opacity:1}
.dq-fig .ar{fill:url(#dqFade);opacity:0;transition:opacity 1s ease .4s}
.dq-step.on .ar{opacity:1}

.dq-ans{margin-top:16px;padding:12px 14px;font-size:13px;line-height:1.6;
  border-left:2px solid var(--accent);background:rgba(var(--accent-rgb),.06);color:var(--ink-2)}
.dq-ans b{color:var(--accent);font-weight:600}

@media(max-width:760px){
  .dq-tbl.five .dq-tr{grid-template-columns:1.4fr 1fr 1fr}
  .dq-tbl.five .dq-tr > span:nth-child(4),
  .dq-tbl.five .dq-tr > span:nth-child(5){display:none}
  .dq-tbl.four .dq-tr{grid-template-columns:1.2fr 1fr 1fr}
  .dq-tbl.four .dq-tr > span:nth-child(3){display:none}
}

/* These chips live inside a .dq-step, which owns their reveal — clear the
   paused chipIn animation the old demo panel drove from JS. */
.dq-chips .chip{opacity:1;transform:none;animation:none}

/* ==========================================================================
   Hero demo — the answer lands directly under the prompt. Two columns
   (tables | chart) so the whole exchange fits one screen, and the hero copy
   above it lifts and compacts as the output arrives to make the room.
   ========================================================================== */
/* Sits over the hero photograph, so it needs its own surface — same glass
   recipe as the chatbar above it, so prompt and answer read as one exchange. */
.dq{display:grid;grid-template-columns:1.12fr .88fr;gap:4px 26px;margin-top:14px;
  align-items:start;max-height:0;opacity:0;overflow:hidden;
  background:linear-gradient(180deg,rgba(14,14,19,.90),rgba(8,8,11,.94));
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  transition:max-height 1.6s cubic-bezier(.22,1,.36,1),opacity 1s ease,padding 1.6s ease}
/* The prompt and its answer run from the shell's left padding out to a gutter
   short of the photograph, so the exchange uses everything the picture isn't
   using. Both the bar and the panel take the same width, so they stay one
   column, and the table and the chart stack down that column. The chart is
   drawn on a 820x206 frame precisely because of this: at the old 392x206 it
   would be over 500px tall once it spans the full width, which is more than
   the single-screen hero has to give. */
.hero{--panel-w:calc(var(--macro-x) - clamp(22px,3.4vw,72px) - 44px)}
.hero .chatbar{max-width:var(--panel-w)}
.hero.demo-on .dq{max-height:900px;opacity:1;padding:14px 16px 16px;
  grid-template-columns:1fr;gap:0;max-width:var(--panel-w)}
/* one cell, five stacked panels, and a positioning context for the button */
.dq{position:relative}
.dq-col{display:flex;flex-direction:column;min-width:0}

/* ---------- five prompts, one box ----------
   All five panels live in the DOM stacked in the same grid cell, so the box
   never resizes as they swap and the tallest one sets its height once. Only
   the current panel is visible; the rest are inert to a screen reader and to
   the tab order. */
.dq-panel{grid-area:1/1;display:flex;flex-direction:column;min-width:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease}
.dq-panel.live{opacity:1;visibility:visible;pointer-events:auto}

/* play/pause for the walkthrough, top right of the box */
.dq-play{position:absolute;top:8px;right:8px;z-index:4;
  width:26px;height:26px;flex:none;display:grid;place-items:center;cursor:pointer;
  border-radius:50%;border:1px solid var(--line);background:rgba(10,10,14,.82);
  color:#fff;font-size:9.5px;line-height:1;padding:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .4s ease,border-color .2s ease,background .2s ease,color .2s ease}
.hero.demo-on .dq-play{opacity:1}
.dq-play:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.18);color:var(--accent)}
.dq-play:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the hero lifts: lead copy collapses upward, headline shrinks, padding tightens */
.hero{transition:padding .7s cubic-bezier(.22,1,.36,1)}
.hero-in{transition:max-width .7s cubic-bezier(.22,1,.36,1)}
/* No forced full height any more: side by side, the exchange is about half as
   tall as it was stacked, so stretching it to the fold left a dead black band
   under the CTAs. It sizes to its content and .hero centres it instead. */
.hero.demo-on .hero-in{display:flex;flex-direction:column;width:100%}
.hero h1,.hero .lede,.hero .eyebrow{
  transition:max-height .6s cubic-bezier(.22,1,.36,1),opacity .4s ease,
             margin .6s ease,font-size .6s ease}
.hero.demo-on{padding:30px 0 34px}
.hero.demo-on .hero-in{max-width:1440px}
.hero.demo-on .eyebrow,
.hero.demo-on .lede{max-height:0;opacity:0;margin:0;overflow:hidden;pointer-events:none}
/* the headline lifts clean off the top to buy the vertical room */
.hero.demo-on h1{max-height:0;opacity:0;margin:0;overflow:hidden;transform:translateY(-24px)}
.hero.demo-on{align-items:center}
/* CTAs ride the bottom of the hero rather than trailing the panel */
.hero.demo-on .hero-actions{margin-top:auto;padding-top:16px}
.hero.demo-on .chatbar{margin-top:16px}
.hero.demo-on .hero-actions{margin-top:16px}

/* compact the tables and chart for the hero's tighter vertical budget */
.hero .dq-chips{margin-top:8px}
.hero .dq-h{margin:9px 0 4px;font-size:11.5px}
.hero .dq-tr{padding:4px 10px;font-size:10px}
.hero .dq-tr > span:first-child{font-size:10.5px}
.hero .dq-tr em{font-size:8px}
.hero .dq-radar{padding:4px 0 0}
/* Stacked under the table, the chart gets whatever height is left after the
   prompt, chips, table and answer — which is viewport-dependent, so size it
   from that remainder (x1.48 converts the height budget to a width, the
   chart's 432:292 aspect). */
.hero .dq-radar svg{max-width:clamp(200px,calc((100vh - 672px) * 1.48),484px)}
.hero .dq-leg{top:6px;right:8px;font-size:9px}
.hero .dq-ans{margin-top:10px;padding:9px 12px;font-size:12px;line-height:1.55}

@media(max-width:1080px){
  /* the nav has collapsed to a burger, so there is no MACRO to line up
     against and no room for a side band: the photograph goes back to full
     bleed behind the copy, which needs the old left-to-right scrim again */
  .hero{--photo-x:0px;--panel-w:660px}
  .hero-photo{-webkit-mask-image:none;mask-image:none;opacity:.4}
  .hero-scrim{background:
    linear-gradient(to right,#000 0,rgba(0,0,0,.88) 32%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.6) 100%),
    linear-gradient(to top,#000 1%,rgba(0,0,0,.2) 30%,transparent 60%)}
  .dq{grid-template-columns:1fr}
  .hero.demo-on .dq{max-height:none}
}

/* Anything short of a tall desktop screen: the hero has to hold the prompt AND
   the answer, so trim the rhythm and the table rows rather than let the
   exchange run past the fold. */
@media(max-height:1010px){
  .hero.demo-on{padding:18px 0 22px}
  .hero.demo-on .chatbar{margin-top:10px}
  .hero.demo-on .hero-actions{margin-top:10px}
  .hero.demo-on .dq{margin-top:10px;padding:10px 14px 12px}
  .hero .dq-tr{padding:3px 9px}
  .hero .dq-h{margin:9px 0 4px}
  .hero .dq-ans{margin-top:8px;padding:8px 11px}
}
/* Short screens. Five panels and a wrapped 400-character prompt need more
   room than one panel did, so the hero CTAs step aside from 880px down — the
   same actions sit in the nav — and the figures give up a little height too.
   A 1440x900 display hands the page about 800px of viewport, so this is the
   common laptop case, not an edge one. */
@media(max-height:880px){
  .hero.demo-on{padding:13px 0 16px}
  .hero.demo-on .hero-actions{max-height:0;opacity:0;margin:0;overflow:hidden;pointer-events:none}
  .dq-charts{gap:4px 12px}
  .hero .dq-fig{padding:6px 8px}
  .hero .dq-ans{margin-top:7px;padding:7px 10px;line-height:1.5}
}
/* 768-tall laptops. The filter chips are the most expendable thing in the
   panel — they restate what the prompt just said — and the longest tables get
   capped at six rows. The brief allowed trimming table contents to fit. */
@media(max-height:770px){
  .hero .dq-chips{display:none}
  .hero .dq-tbl .dq-tr:nth-child(n+7){display:none}
  .hero .dq-fig{padding:4px 6px}
}

/* ==========================================================================
   Feature-card marks, lit in 3D: gradient fills so bubbles read as lit spheres
   and bars as extruded solids, plus a cast shadow to lift lines and dots off
   the plate. The depth lives in the marks, not the frame — the well around
   them is the same flat one the feature pages use. Scoped to .pcard so those
   pages keep their own flat figure language. All of it is switched off by
   prefers-reduced-motion via the global rule near the top of this file.
   ========================================================================== */
/* the well picks up the accent edge with the card on hover */
.pcard:hover .pcard-img{border-color:rgba(var(--accent-rgb),.3)}

/* volumetric marks */
.pcard .c-bub.r{fill:url(#pv3dR);fill-opacity:.92;stroke:none}
.pcard .c-bub.t{fill:url(#pv3dT);fill-opacity:.92;stroke:none}
.pcard .c-bub.v{fill:url(#pv3dV);fill-opacity:.92;stroke:none}
.pcard .c-bar{fill:url(#pv3dBarT)}
.pcard .c-bar.k{fill:url(#pv3dBarR)}
.pcard .c-bar.ok{fill:url(#pv3dBarG)}
.pcard .c-col{fill:url(#pv3dColT)}
.pcard .c-col.k{fill:url(#pv3dColR)}
.pcard .c-col.ok{fill:url(#pv3dBarG)}
/* the donut gains an inner shade so the band reads as a torus */
.pcard .c-ring{filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
/* lines and areas get a cast shadow to lift them off the plate */
.pcard .c-line{filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.pcard .c-dot{filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}

/* ==========================================================================
   Living charts. Each mark plays its usual entrance, then settles into a slow
   idle so the previews read as live readouts rather than screenshots. The idle
   is chained as a second animation on the same declaration — it starts after
   the entrance has finished, and being later in the list it wins the property.
   Scoped to .pcard: the feature pages keep their strict play-once figures.
   Donut segments carry an inline rotate() for their position, so those pulse
   on opacity rather than transform, which would clobber it.
   ========================================================================== */
@keyframes pvBubBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.075)}}
@keyframes pvBarBreathe{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.022)}}
@keyframes pvColBreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.075)}}
@keyframes pvSegPulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes pvDotPulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes pvAreaBreathe{0%,100%{opacity:1}50%{opacity:.7}}

.pcard .go .c-bub{animation:cPop .65s cubic-bezier(.22,1,.36,1) forwards,
                  pvBubBreathe 5.4s ease-in-out 1.1s infinite}
.pcard .go .c-bar{animation:cGrowX .8s cubic-bezier(.22,1,.36,1) forwards,
                  pvBarBreathe 4.6s ease-in-out 1.3s infinite}
.pcard .go .c-col{animation:cGrowY .75s cubic-bezier(.22,1,.36,1) forwards,
                  pvColBreathe 4.2s ease-in-out 1.2s infinite}
.pcard .go .c-ring.seg{animation:cArc .9s cubic-bezier(.22,1,.36,1) forwards,
                  pvSegPulse 4.8s ease-in-out 1.4s infinite}
.pcard .go .c-dot{animation:cFade .4s ease .95s forwards,
                  pvDotPulse 2.6s ease-in-out 1.6s infinite}
.pcard .go .c-area{animation:cFade .8s ease .55s forwards,
                  pvAreaBreathe 6s ease-in-out 1.6s infinite}

/* stagger so the marks breathe out of phase instead of pumping in unison */
.pcard .go .c-bub:nth-of-type(2),.pcard .go .c-col:nth-of-type(2){animation-delay:.09s,1.7s}
.pcard .go .c-bub:nth-of-type(3),.pcard .go .c-col:nth-of-type(3){animation-delay:.18s,2.3s}
.pcard .go .c-bub:nth-of-type(4),.pcard .go .c-col:nth-of-type(4){animation-delay:.27s,1.4s}
.pcard .go .c-col:nth-of-type(5){animation-delay:.36s,2.0s}
.pcard .go .c-bar:nth-of-type(2){animation-delay:.10s,2.1s}
.pcard .go .c-bar:nth-of-type(3){animation-delay:.20s,1.6s}
.pcard .go .c-bar:nth-of-type(4){animation-delay:0s,2.4s}
.pcard .go .c-ring.seg:nth-of-type(3){animation-delay:.15s,2.2s}
.pcard .go .c-ring.seg:nth-of-type(4){animation-delay:.30s,1.7s}

/* ==========================================================================
   Take a tour — landing overlay
   ========================================================================== */
.tour{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:max(28px,calc(var(--nav-h) * .35)) 24px 28px;box-sizing:border-box}
.tour[hidden]{display:none!important}
.tour-scrim{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.tour-stage{position:relative;z-index:1;width:min(920px,100%);max-height:min(88vh,900px);display:flex;flex-direction:column;
  background:#0c0c10;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55)}
.tour-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 24px 0;flex-shrink:0}
.tour-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}
.tour-top h2{font-size:26px;font-weight:500}
.tour-x{width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;cursor:pointer}
.tour-x:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.tour-dots{display:flex;gap:8px;padding:18px 24px 12px;flex-wrap:wrap;flex-shrink:0}
.tour-dot{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:transparent;color:rgba(255,255,255,.55);font-size:13px;cursor:pointer}
.tour-dot-n{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.4)}
.tour-dot.is-on,.tour-dot:hover{color:#fff;border-color:rgba(18,163,187,.55);background:rgba(18,163,187,.12)}
.tour-dot.is-on .tour-dot-n{color:var(--s1)}
.tour-body{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;padding:18px 24px 12px;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
.tour-body::-webkit-scrollbar{width:8px}
.tour-body::-webkit-scrollbar-track{background:transparent}
.tour-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.tour-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.38);border:2px solid transparent;background-clip:padding-box}
.tour-beat{display:none}
.tour-beat.is-live{display:block}
.tour-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--s1);margin-bottom:12px}
.tour-h{font-size:22px;font-weight:500;margin:0 0 6px}
.tour-h em{font-style:normal;color:rgba(255,255,255,.45);font-family:var(--font-mono);font-size:.72em;margin-left:6px}
.tour-sub{color:rgba(255,255,255,.55);font-size:14px;margin-bottom:16px;line-height:1.5}
.tour-prompt{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);background:rgba(255,255,255,.03);min-height:64px;margin-bottom:12px}
.tour-octo{width:28px;height:28px;flex:0 0 auto;margin-top:2px}
.tour-typed{font-size:15px;line-height:1.5;font-weight:300}
.tour-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;background:var(--s1);vertical-align:-2px;
  animation:tourBlink 1s steps(1) infinite}
@keyframes tourBlink{50%{opacity:0}}
.tour-hint{font-size:13px;color:rgba(255,255,255,.5);margin:4px 0 12px}
.tour-ghosts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tour-ghost{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-md);
  border:1px dashed rgba(255,255,255,.18);color:rgba(255,255,255,.55);font-size:13px}
.tour-ghost i{color:var(--s1);font-size:12px}
.tour-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.tour-chips .chip{opacity:1;transform:none;animation:none;background:rgba(18,163,187,.12);border:1px solid rgba(18,163,187,.35);color:#9fe4ef}
.tour-panel{border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:14px 16px;background:rgba(255,255,255,.02)}
.tour-tbl{display:grid;gap:0}
.tour-tr{display:grid;grid-template-columns:var(--cols);gap:10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.06);font-size:13px}
.tour-tr.tour-head{border-top:0;color:rgba(255,255,255,.4);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding-top:0}
.tour-tr em{font-style:normal;color:rgba(255,255,255,.4);font-family:var(--font-mono);font-size:11px;margin-left:6px}
.tour-tr .ok{color:#3ddc84}
.tour-tr .hit{color:#ff8f8a}
.tour-ans{margin-top:12px;padding:12px 14px;border-radius:var(--r-md);background:rgba(18,163,187,.08);border:1px solid rgba(18,163,187,.2);
  font-size:14px;line-height:1.55;color:rgba(255,255,255,.82)}
.tour-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.tour-col{border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:14px;background:rgba(255,255,255,.02)}
.tour-col.tour-exm{border-color:rgba(18,163,187,.4);background:rgba(18,163,187,.07)}
.tour-col-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px}
.tour-exm .tour-col-h{color:var(--s1)}
.tour-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid rgba(255,255,255,.06);font-size:14px}
.tour-line:first-of-type{border-top:0}
.tour-filing{border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:16px;background:rgba(255,255,255,.02);margin-bottom:12px}
.tour-filing-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:10px}
.tour-filing p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.7);font-style:italic}
.tour-hit{margin-top:10px!important;padding:8px 10px;border-left:3px solid var(--s1);background:rgba(18,163,187,.12);
  font-style:normal!important;color:#fff!important;font-size:14px!important}
.tour-ask{border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:14px 16px;margin-bottom:14px}
.tour-ask-q{font-size:14px;color:rgba(255,255,255,.55);margin-bottom:8px}
.tour-ask-q::before{content:"Q · ";font-family:var(--font-mono);color:var(--s1)}
.tour-ask-a{font-size:15px;line-height:1.5}
.tour-end{padding:18px;border-radius:var(--r-md);border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.08);text-align:center}
.tour-end p{font-size:16px;margin-bottom:14px}
.tour-end-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.tour-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px 18px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0;background:#0c0c10}
.tour-bar-mid{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.45);letter-spacing:.08em}
.tour-step{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.tour-step.on{opacity:1;transform:none}
.tour-ghost{opacity:0;transform:translateY(6px) scale(.98);transition:opacity .4s ease,transform .4s ease}
.tour-ghosts.on .tour-ghost{opacity:1;transform:none}
.tour-ghosts.on .tour-ghost:nth-child(2){transition-delay:.08s}
.tour-ghosts.on .tour-ghost:nth-child(3){transition-delay:.16s}
body.tour-open{overflow:hidden}
@media(max-width:720px){
  .tour{padding:14px 10px}
  .tour-split{grid-template-columns:1fr}
  .tour-top h2{font-size:20px}
  .tour-bar .btn span,.tour-bar .btn i + *{ }
  .tour-tr{font-size:12px;gap:6px}
}

.tour-lede{margin:8px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.55);max-width:52ch;font-weight:300}
.tour-why{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72);margin:0 0 14px;max-width:58ch}

/* Tour · screening criteria mock ----------------------------------------- */
.tour-screen{position:relative;margin:4px 0 12px;border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);background:rgba(255,255,255,.02);padding:12px 14px 14px;overflow:hidden}
.tour-screen-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.tour-screen-bar-r{color:var(--s1)}
.tour-scards{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;min-height:132px}
.tour-scard{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:122px;padding:12px 8px 40px;border-radius:6px;background:#3d3d3d;border:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.tour-scard img{width:34px;height:34px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}
.tour-scard-t{font-size:11.5px;text-align:center;line-height:1.25;color:rgba(255,255,255,.88);max-width:9.5em}
.tour-scard.is-mute{opacity:.38}
.tour-scard.is-aim{border-color:rgba(18,163,187,.55);box-shadow:0 0 0 1px rgba(18,163,187,.25);transform:translateY(-2px)}
.tour-scard.is-on{background:#2f2f2f;border-color:rgba(18,163,187,.7);box-shadow:0 0 0 1px rgba(18,163,187,.35)}
.tour-scard.is-on .tour-scard-t{color:#fff}
.tour-scard-pick{position:absolute;left:5px;right:5px;bottom:5px;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 6px;border-radius:4px;background:rgba(6,28,34,.94);border:1px solid rgba(18,163,187,.55);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;line-height:1.25;color:#fff;opacity:0;transform:translateY(4px);
  transition:opacity .3s ease,transform .3s ease;pointer-events:none;text-align:center;white-space:normal}
.tour-scard-pick i{color:#9fe4ef;flex:none}
.tour-scard.is-on .tour-scard-pick{opacity:1;transform:none}
.tour-scard-pick--stack,.tour-scard .tour-scard-pick.tour-scard-pick--stack{flex-direction:column;align-items:center;gap:2px;padding:7px 5px}
.tour-scard-pick-main{display:inline-flex;align-items:center;justify-content:center;gap:5px;color:#fff;font-size:10px;font-weight:500;line-height:1.2}
.tour-scard-pick-sub{display:block;color:#9fe4ef;font-size:9.5px;letter-spacing:.04em;line-height:1.2}
.tour-scard.is-click{transform:scale(.96)}
.tour-cursor{position:absolute;z-index:3;width:22px;height:22px;margin-left:-4px;margin-top:-2px;
  color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.65));opacity:0;pointer-events:none;
  transition:left .55s cubic-bezier(.22,1,.36,1),top .55s cubic-bezier(.22,1,.36,1),opacity .2s ease,transform .15s ease}
.tour-cursor.is-on{opacity:1}
.tour-cursor.is-press{transform:scale(.82)}
.tour-cursor i{font-size:18px}
.tour-applied{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px;min-height:28px;
  opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.tour-applied.is-on{opacity:1;transform:none}
.tour-applied-l{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-right:4px}
.tour-applied .chip{opacity:1;transform:none;animation:none;background:rgba(18,163,187,.12);border:1px solid rgba(18,163,187,.35);color:#9fe4ef}
@media(max-width:720px){
  .tour-scards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tour-scard.is-mute:nth-child(n+4){display:none}
}

/* Tour · Financial Highlights charts ------------------------------------- */
.tour-fh{margin:0 0 12px;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);
  background:rgba(255,255,255,.02);padding:12px 14px 14px}
.tour-fh-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.tour-fh-bar-r{color:var(--s1)}
.tour-fh-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tour-fh-card{border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:10px 10px 8px;background:rgba(0,0,0,.22)}
.tour-fh-h{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:6px}
.tour-fh-svg{width:100%;height:auto;display:block;overflow:visible}
.tour-fh-g{stroke:rgba(255,255,255,.08);stroke-width:1}
.tour-fh-ax{fill:rgba(255,255,255,.4);font-family:var(--font-mono);font-size:9px}
.tour-fh-val{fill:#9fe4ef;font-family:var(--font-mono);font-size:9.5px;opacity:0}
.tour-fh.on .tour-fh-val{animation:tourFhFade .4s ease .55s forwards}
.tour-fh-ref{stroke:rgba(18,163,187,.7);stroke-width:1.2;stroke-dasharray:3 3}
.tour-fh-reft{fill:var(--s1);font-family:var(--font-mono);font-size:9px}
.tour-fh-col{fill:url(#pv3dBarT);transform-box:fill-box;transform-origin:center bottom;transform:scaleY(0);
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.tour-fh.on .tour-fh-col{transform:scaleY(1)}
.tour-fh-ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:320;stroke-dashoffset:320}
.tour-fh.on .tour-fh-ln{animation:tourFhDraw .9s ease forwards}
.tour-fh-ln.a{stroke:#12a3bb}
.tour-fh-ln.b{stroke:#3ddc84}
.tour-fh-ln.c{stroke:#ff8f8a}
.tour-fh.on .tour-fh-ln.a{animation-delay:.1s}
.tour-fh.on .tour-fh-ln.b{animation-delay:.22s}
.tour-fh.on .tour-fh-ln.c{animation-delay:.34s}
.tour-fh-dot{opacity:0}
.tour-fh.on .tour-fh-dot{animation:tourFhFade .35s ease .85s forwards}
.tour-fh-dot.a{fill:#12a3bb}
.tour-fh-dot.b{fill:#3ddc84}
.tour-fh-dot.c{fill:#ff8f8a}
.tour-fh-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;
  font-family:var(--font-mono);font-size:10px;color:rgba(255,255,255,.5)}
.tour-fh-legend span{display:inline-flex;align-items:center;gap:5px}
.tour-fh-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}
.tour-fh-legend i.a{background:#12a3bb}
.tour-fh-legend i.b{background:#3ddc84}
.tour-fh-legend i.c{background:#ff8f8a}
@keyframes tourFhDraw{to{stroke-dashoffset:0}}
@keyframes tourFhFade{to{opacity:1}}
@media(max-width:720px){
  .tour-fh-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .tour-fh-col{transform:none!important}
  .tour-fh-ln{stroke-dashoffset:0!important;animation:none!important}
  .tour-fh-dot,.tour-fh-val{opacity:1!important;animation:none!important}
}