/* self-hosted Neulis Sans (Typekit doesn't serve to localhost) */
@font-face{font-family:"neulis-sans";src:url("fonts/NeulisSans-Thin.woff2") format("woff2"),url("fonts/NeulisSans-Thin.otf") format("opentype");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"neulis-sans";src:url("fonts/NeulisSans-Light.woff2") format("woff2"),url("fonts/NeulisSans-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"neulis-sans";src:url("fonts/NeulisSans-Regular.woff2") format("woff2"),url("fonts/NeulisSans-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"neulis-sans";src:url("fonts/NeulisSans-Medium.woff2") format("woff2"),url("fonts/NeulisSans-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"neulis-sans";src:url("fonts/NeulisSans-Bold.woff2") format("woff2"),url("fonts/NeulisSans-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* exact tokens from Figma "Benchmark Report 2026" (node 150:698) */
  --bg:#0a2828; --bg2:#0e2f2b; --tile:#0f332f; --tile-b:#265a51;
  --ink:#ffffff; --soft:#EAF6F1; --muted:#8FB6AD; --faint:#5f817a; --line:#1d413a;
  --evergreen:#135050; --pill-border:#4e7c7c;
  --emerald:#07C799; --emerald-2:#3DDCA9; --emerald-deep:#0FA97F;
  --crimson:#FF3B6B; --crimson-2:#FF7C9C; --crimson-deep:#8A0B30;
  --lilac:#E1BBFF; --gold:#FFB963;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-anchor:none}
body{margin:0;font-family:"neulis-sans",Poppins,system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:"neulis-sans",Poppins,sans-serif;margin:0}
button{font-family:inherit;cursor:pointer}
.mono{font-variant-numeric:tabular-nums}

.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:50}
.progress i{display:block;height:100%;width:0;background:var(--emerald)}

/* sticky header */
.stickyhead{position:sticky;top:0;z-index:30;background:rgba(10,30,25,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:nowrap;max-width:1200px;margin:0 auto;padding:13px 6vw 11px}
/* an overlay, not a row: positioned against .stickyhead (the nearest positioned
   ancestor) so it never adds to the sticky header's own flow height. It matches
   the header's background and blur so it reads as the bar simply growing by one
   row, rather than a separate floating card, and it lays over whatever is
   directly beneath (the hero) instead of pushing it down. */
.lockhint{position:absolute;left:0;right:0;top:100%;background:#095643;backdrop-filter:blur(10px)}
.lockhint[hidden]{display:none}
/* soft tint: same colors as a plain hint, everything turned down so it reads
   quiet rather than as a banner */
.lockhint-in{display:flex;gap:7px;align-items:center;font-size:12px;line-height:1.45;color:rgba(61,220,169,.68);
  max-width:1200px;margin:0 auto;padding:6px 6vw 7px}
.lockhint-in svg{flex:none;width:12px;height:12px}
.lockhint-in b{color:rgba(255,255,255,.82);font-weight:600}
/* the box that sizes into the row stays small (16px) so the bar's own height
   never changes; the glyph itself renders larger and overflows that box
   visibly, centered, rather than growing it */
.lockdismiss{border:none;background:transparent;color:var(--emerald-2);
  width:16px;height:16px;padding:0;flex:none;margin-left:auto;overflow:visible;
  display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1}
.lockdismiss:hover{color:var(--emerald)}
.tb-left{display:flex;align-items:center;gap:12px;position:relative;z-index:26;flex-shrink:0}.tb-left a{display:flex;align-items:center;flex:none}.logo{height:24px;display:block}
.controls{display:flex;gap:16px;flex-wrap:nowrap;flex-shrink:0}
.ctl{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.seg{display:inline-flex;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.seg button{border:none;background:transparent;font-size:12.5px;font-weight:700;color:var(--muted);padding:6px 11px;border-radius:6px;transition:.15s}
.seg button.on{background:var(--emerald-deep);color:#04140f}
.seg button[disabled]{opacity:.32;cursor:not-allowed;pointer-events:none}
.gate-pill[disabled]{opacity:.3;cursor:not-allowed;pointer-events:none}
.menu-hint{display:none}
.menu-divider{display:none}
.controls .menu-only{display:none}
.hamburger{display:none;height:36px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.04);align-items:center;justify-content:center;gap:7px;padding:0 13px;flex:none;position:relative;z-index:26}
.hamburger svg{width:17px;height:17px;stroke:var(--soft);flex:none}
.hamburger-label{font-size:12.5px;font-weight:700;color:var(--soft)}
.hamburger .icon-close{display:none}
body.menu-open .hamburger .icon-open{display:none}
body.menu-open .hamburger .icon-close{display:block}
/* .compact-nav is set by JS (checkNavFit in app.js) whenever the full row would overflow —
   not a fixed breakpoint, so it kicks in at whatever width the title/controls actually wrap at */
body.compact-nav .hamburger{display:flex}
body.compact-nav .controls{display:none}
body.compact-nav.menu-open .controls{display:flex;position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:25;background:var(--bg);flex-direction:column;align-items:stretch;gap:16px;padding:84px 24px 32px;overflow-y:auto}
body.compact-nav.menu-open .controls > *{width:100%}
body.compact-nav.menu-open .ctl{gap:8px}
body.compact-nav.menu-open .seg{height:auto;padding:4px;width:100%}
body.compact-nav.menu-open .seg button{flex:1;padding:12px 4px;display:flex;align-items:center;justify-content:center}
body.compact-nav.menu-open .cta-nav{padding:13px 18px;font-size:14px;justify-content:center}
body.compact-nav.menu-open .cta-arrow{display:none}
body.compact-nav.menu-open .menu-hint{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;color:var(--faint);text-align:center}
body.compact-nav.menu-open .menu-hint svg{width:11px;height:11px;flex:none}
body.compact-nav.menu-open .menu-divider{display:block;height:1px;background:var(--line);margin:2px 0;width:100%}
body.compact-nav.menu-open .menu-only{display:inline-block}
body.compact-nav.menu-open #openScheduleBtn{background:transparent;color:#fff;border:1px solid var(--pill-border)}
.indtabs{display:flex;gap:2px;padding:0 6vw;overflow-x:auto;border-top:1px solid var(--line)}
.indtabs button{border:none;background:transparent;font-family:inherit;font-weight:700;font-size:13px;color:var(--faint);padding:12px 14px;white-space:nowrap;border-bottom:2px solid transparent;transition:.15s}
.indtabs button:hover{color:var(--ink)}
.indtabs button.on{color:var(--ink);border-color:var(--emerald)}
.indtabs.flash{animation:tabflash .9s}
@keyframes tabflash{0%,100%{background:transparent}30%{background:rgba(53,223,166,.14)}}

/* layout */
main{max-width:1200px;margin:0 auto;padding:0 6vw 110px}
.sec{padding:78px 0}
.eyebrow{font-family:"neulis-sans",Poppins,sans-serif;font-size:22px;font-weight:500;letter-spacing:0;line-height:2;color:#fff;margin:0 0 6px}
.sec-title{font-family:"neulis-sans",Poppins,sans-serif;font-size:clamp(40px,5.8vw,68px);font-weight:100;letter-spacing:-.02em;line-height:1;color:#fff;margin:0 0 30px}
.sec-title:has(+ .sec-narr){margin-bottom:0}            /* body below → 30px moves to the body */
.sec-head .sec-title{margin-bottom:0}                   /* §1: .sec-head owns the spacing */
.sec-narr{font-size:15px;color:#fff;max-width:none;line-height:1.6;margin:12px 0 30px}
/* one-frame guard used when a control change swaps content in: kills transitions only.
   Suppressing animation here would restart keyframe intros (the hero gate-bg-in) the
   moment the class comes off. */
.no-anim,.no-anim *{transition:none!important}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* hero */
.hero{padding:70px 0 20px;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:start}
.hero h1{font-size:clamp(46px,7vw,86px);font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--soft)}
.hero .h-narr{font-size:15px;color:var(--muted);max-width:520px;line-height:1.6;margin:18px 0 0}
.hero .h-narr b{color:var(--ink)}
.hero-art{height:150px;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(120deg,#12332c,#0d241f)}
.hero-art i{position:absolute;bottom:0;border-radius:6px 6px 0 0;opacity:.92}
@media(max-width:820px){.hero{grid-template-columns:1fr}.hero-art{display:none}}

/* ===== gate hero — exact Figma tokens (node 150:698) ===== */
.gate{position:relative;overflow:hidden;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;padding:84px 0;min-height:min(960px,92vh);display:flex;flex-direction:column;justify-content:center}
.gate-inner{width:100%;max-width:1200px;margin:0 auto;padding:0 6vw;position:relative;z-index:2;display:flex;flex-direction:column}
.gate-eyebrow{font-family:"neulis-sans",Poppins,sans-serif;font-weight:500;font-size:clamp(18px,1.9vw,28px);line-height:1.2;color:#fff;margin:0;position:relative;z-index:2}
.gate-eyebrow em{font-style:normal;color:var(--emerald)}
.gate-eyebrow h1{display:inline;font:inherit;color:inherit;margin:0}
.gate-h1{font-family:"neulis-sans",Poppins,sans-serif;font-weight:100;font-size:clamp(46px,6vw,96px);line-height:1.02;letter-spacing:-.02em;color:#fff;margin:24px 0 0;max-width:min(935px,100%);position:relative;z-index:2}
.gate-sub{font-family:"neulis-sans",Poppins,sans-serif;font-weight:400;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:#fff;max-width:min(935px,100%);margin:30px 0 0;position:relative;z-index:2}
.gate-pills{display:flex;gap:12px;flex-wrap:wrap;margin-top:42px;position:relative;z-index:2}
.gate-pill{font-family:"neulis-sans",Poppins,sans-serif;font-weight:700;font-size:15px;color:#fff;border:1px solid var(--pill-border);background:#0e3330;border-radius:100px;padding:14px 28px;transition:.15s}
.gate-pill:hover{border-color:#fff}
.gate-pill.on{background:var(--emerald);border-color:var(--emerald);color:#04140f}
.gate-art{position:absolute;pointer-events:none;z-index:1}
.gate-art.tr{top:-14px;right:0;width:min(58%,838px)}
.gate-art.bl{bottom:-6px;left:0;width:min(88%,1120px);opacity:.95}
.gate-art img{width:100%;display:block}
.gate-glow{position:absolute;z-index:0;top:120px;left:18%;width:70%;height:16px;filter:blur(33px);mix-blend-mode:plus-lighter;
  background:linear-gradient(90deg,#fff9fa 0%,#e1bbff 43.75%,rgba(158,54,241,0) 98.6%)}
@media(max-width:820px){.gate{min-height:auto;padding:10vw 0}.gate-art.tr{opacity:.45;width:78%}}

/* mobile: seven industries wrap to three rows, so the pills scroll sideways in one row instead.
   The row runs full bleed and the mask fades whichever edge still has pills behind it. */
@media(max-width:820px){
  .gate-pills{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding-left:6vw;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;padding:2px 6vw 6px;
    -webkit-mask-image:var(--pill-mask,none);mask-image:var(--pill-mask,none)}
  .gate-pills::-webkit-scrollbar{display:none}
  .gate-pill{flex:0 0 auto;scroll-snap-align:start}
  .gate-pills.sc-more{--pill-mask:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
  .gate-pills.sc-both{--pill-mask:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 56px),transparent)}
  .gate-pills.sc-prev{--pill-mask:linear-gradient(90deg,transparent,#000 40px)}
}

/* section head row */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.compare-lbl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* the year in percentages — tile grid */
.tilegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.tilegrid{grid-template-columns:repeat(2,1fr)}}
/* two-up holds on a phone now that the row height comes from the back copy instead of a fixed
   pixel height: a long back makes the whole row taller rather than overflowing into a scroll. */
/* ===== card tone tokens — single source of truth for all metric cards ===== */
.tile.bad,.dg-card.neg,.ws-card.neg{--card-bg:#3B2632;--ink:#FF6F94;--edge:rgba(255,111,148,.18)}
.tile:not(.bad),.dg-card.pos,.ws-card.pos{--card-bg:#09483F;--ink:#83E3CC;--edge:rgba(131,227,204,.12)}
.ws-card.susp,.tile.neu{--card-bg:#26392C;--ink:#FFB02D;--edge:rgba(255,176,45,.22)}
.tile,.dg-card,.ws-card{background:var(--card-bg)}
/* all card text is the card ink; sub-lines / captions (explainer) use the ink de-emphasized */
.tile .t-name,.tile .t-pct,.tile .t-sub,.dg-cname,.dg-cpct,.dg-cval,.ws-cname,.ws-cpct,.ws-cnow,.ws-ccap{color:var(--ink)}
.tile .t-sub,.ws-ccap{opacity:.72}

.tile{border:1px solid var(--edge);border-radius:18px;padding:24px 20px 20px;min-height:156px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.tile .t-name{font-family:"neulis-sans",Poppins,sans-serif;font-weight:500;font-size:18px;line-height:1.15}
.tile .t-pct{font-family:"neulis-sans",Poppins,sans-serif;font-weight:700;font-size:clamp(43px,5vw,72px);line-height:1;letter-spacing:-.02em;margin-top:14px}
.tile .t-sub{font-family:"neulis-sans",Poppins,sans-serif;font-weight:500;font-size:15px;line-height:1.1;margin-top:auto;padding-top:18px;font-variant-numeric:tabular-nums}
/* unit label under the card name, so the sub-line stays two bare values */
.tile .t-unit{display:block;font-weight:500;font-size:12px;line-height:1.2;letter-spacing:.04em;opacity:.6;margin-top:3px}

/* flip metric cards — front shows the number, back tells the story (all-industries overview test) */
.tile.flip{padding:0;border:0;background:transparent;min-height:240px;perspective:1200px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.tile.flip:hover{transform:translateY(-4px)}
.tile.flip:hover .tile-face{box-shadow:0 16px 38px rgba(0,0,0,.34)}
.tile.flip:hover .flip-ico{opacity:.95;transform:rotate(-40deg)}
.tile.flip:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:18px}
.tile.flip .tile-inner{position:relative;width:100%;min-height:240px;height:100%;transition:transform .55s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.tile.flip.flipped .tile-inner{transform:rotateY(180deg)}
.tile.flip .tile-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:1px solid var(--edge);border-radius:18px;background:var(--card-bg);padding:22px 20px 18px;display:flex;flex-direction:column;overflow:hidden}
.tile.flip .tile-front{align-items:center;justify-content:space-evenly;text-align:center}
.tile.flip .tile-front .t-pct{margin-top:0}
.tile.flip .tile-front .t-sub{margin-top:0;padding-top:0}
.tile.flip .tile-back{transform:rotateY(180deg);text-align:left;overflow-y:auto}
.tile.flip .flip-ico{position:absolute;top:13px;right:14px;width:16px;height:16px;background:var(--ink);
  -webkit-mask:url("flip-icon.svg") center/contain no-repeat;mask:url("flip-icon.svg") center/contain no-repeat;
  opacity:.5;transition:opacity .2s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.tile.flip .tile-face{transition:box-shadow .25s ease}
.tile.flip .tb-name{font-family:"neulis-sans",Poppins,sans-serif;font-weight:600;font-size:16px;line-height:1.2;color:var(--ink);margin:0 0 9px;padding-right:22px}
.tile.flip .tb-name span{opacity:.75;font-weight:700}
.tile.flip .tb-copy{font-family:"neulis-sans",Poppins,sans-serif;font-weight:400;font-size:12.5px;line-height:1.5;color:var(--ink);opacity:.85;margin:0}
@media(prefers-reduced-motion:reduce){.tile.flip .tile-inner{transition:none}}

/* Phones: the overview grid stays two-up, with the front stacked and centred (name, stat,
   range) so a 174px-wide card never has to fit a name and a value on the same line. Every
   card is the same height flipped or not, and every row matches, because the height comes
   from the longest back copy in the set rather than a fixed pixel value. Tiles with no back
   copy are plain .tile, so they take the same layout or they would stand out. */
@media(max-width:520px){
  /* grid-auto-rows:1fr makes every row the height of the tallest one, and the back face sits
     in the flow at all times, so a card is the same height flipped or not and the whole
     stack lines up. No magic pixel height: the set sizes itself to its longest back copy. */
  .tilegrid{gap:10px;grid-auto-rows:1fr}
  .tilegrid .tile,.tilegrid .tile.flip,.tilegrid .tile.flip .tile-inner{min-height:104px}
  .tilegrid .tile.flip,.tilegrid .tile.flip .tile-inner{height:100%}
  .tilegrid .tile.flip .tile-inner{transition:transform .55s cubic-bezier(.2,.8,.2,1)}

  /* front stacks and centres: name, stat, range, all in the middle of the card */
  .tilegrid .tile.flip .tile-front,
  .tilegrid .tile:not(.flip){display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;
    align-content:center;justify-items:center;row-gap:6px;padding:0 14px;text-align:center}
  .tilegrid .tile.flip .tile-front .t-name,
  .tilegrid .tile:not(.flip) .t-name{grid-row:1;margin:0;padding:0;font-size:15px;line-height:1.2;text-align:center}
  .tilegrid .tile.flip .tile-front .t-pct,
  .tilegrid .tile:not(.flip) .t-pct{grid-row:2;margin:0;font-size:38px;line-height:1;
    text-align:center;white-space:nowrap}
  .tilegrid .tile.flip .tile-front .t-sub,
  .tilegrid .tile:not(.flip) .t-sub{grid-row:3;margin:0;padding:0;font-size:12px;line-height:1.4;
    text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  /* icon sits in the top right corner on both faces, same as desktop */
  .tilegrid .tile.flip .tile-front .flip-ico{position:absolute;top:11px;right:12px;
    grid-column:auto;grid-row:auto;width:16px;height:16px}

  /* back is the face that sets the height, so it stays in the flow and fills the row */
  .tilegrid .tile.flip .tile-back{position:static;min-height:100%;box-sizing:border-box;
    padding:16px 16px 14px;overflow:hidden}
  .tilegrid .tile.flip .tb-name{font-size:15px}
  .tilegrid .tile.flip .tb-copy{font-size:12px;line-height:1.45}
  .tilegrid .tile.flip .tile-front{position:absolute;inset:0}
}

/* year-in-percentages — tone key for the single eight-tile grid */
.tlegend{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin:22px 0 20px;
  font-family:"neulis-sans",Poppins,sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.tlegend span{display:inline-flex;align-items:center;gap:8px}
.tlegend span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot);flex:0 0 auto}
.tlegend .lg-good{--dot:#83E3CC}
.tlegend .lg-bad{--dot:#FF6F94}
.tlegend .lg-neu{--dot:#FFB02D}
.tsplit{margin-top:0}

/* TL;DR callout — lightbulb + text, full width, no box */
.tldr{background:var(--emerald-deep);border-radius:14px;padding:22px 26px;margin:30px 0 0;max-width:none}
.tldr-label{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin:0 0 10px}
.tldr-label svg{width:16px;height:16px;flex:none;stroke:#fff}
.tldr-body{margin:0;font-size:16px;line-height:1.6;color:#fff;font-weight:500;max-width:none}
.tldr-link{color:#fff;font-weight:800;text-decoration:underline;white-space:nowrap}
.tldr-link:hover{text-decoration:none}

.tldr-icon-wrap{position:relative;display:inline-flex}
.tldr-icon-wrap svg{position:relative;z-index:1}
.tldr-icon-wrap::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.85) 0deg 3deg,transparent 3deg 45deg);-webkit-mask-image:radial-gradient(circle,transparent 45%,#000 60%,#000 80%,transparent 100%);mask-image:radial-gradient(circle,transparent 45%,#000 60%,#000 80%,transparent 100%);opacity:0;transform:scale(1);pointer-events:none;z-index:0}
@media (hover:hover) and (pointer:fine){
  .tldr-label:hover .tldr-icon-wrap svg{animation:tldr-bulb-flash .6s ease}
  .tldr-label:hover .tldr-icon-wrap::after{animation:tldr-burst .6s ease-out}
}
@keyframes tldr-bulb-flash{
  0%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  35%{transform:scale(1.22);filter:drop-shadow(0 0 5px rgba(255,255,255,.85))}
  60%{transform:scale(.94)}
  80%{transform:scale(1.05)}
  100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
}
@keyframes tldr-burst{
  0%{opacity:0;transform:scale(1)}
  35%{opacity:.75;transform:scale(1.12)}
  100%{opacity:0;transform:scale(1.35)}
}

/* decoupling line chart */
.decoup-wrap{position:relative;margin-top:10px}
#lineChart{width:100%;height:auto;display:block;overflow:visible}
.lc-axis text{font:600 12px Poppins,sans-serif;fill:var(--faint)}
.lc-ax{stroke:rgba(255,255,255,.18);stroke-width:1.5}
.lc-base{stroke:rgba(255,255,255,.24);stroke-width:1.5;stroke-dasharray:5 6}
.lc-baselab{font:600 12px Poppins,sans-serif;fill:var(--muted)}
.lc-rage{fill:none;stroke:#ff6f94;stroke-width:4;stroke-linecap:round}
.lc-error{fill:none;stroke:#83e3cc;stroke-width:4;stroke-linecap:round}
.lc-lab{font-family:"neulis-sans",Poppins,sans-serif;font-weight:700;font-size:42px}
.lc-lab.rage{fill:#ff6f94} .lc-lab.error{fill:#83e3cc}
.lc-sub{font:600 13px Poppins,sans-serif;fill:var(--muted)}
.lc-leader{stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:3 3}

/* engagement */
.eng-bar{position:relative;min-height:210px;border-radius:18px;overflow:hidden;background:#0e3c3c;margin-top:40px}
.eng-fill{position:absolute;left:0;top:0;bottom:0;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(90deg,#0b433e 0%,#17413f 15%,#283d40 30%,#413a43 50%,#5b3847 70%,#6d364a 85%,#7e344c 100%)}
.eng-marker{position:absolute;top:0;bottom:0;width:3px;background:#ff6f94;transform:translateX(-1.5px);z-index:1}
.eng-left{position:absolute;left:32px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;z-index:2}
.eng-left .lbl{font-family:"neulis-sans",Poppins,sans-serif;font-size:clamp(15px,1.5vw,20px);font-weight:500;color:#83e3cc}
.eng-left .big{font-family:"neulis-sans",Poppins,sans-serif;font-size:clamp(72px,12vw,156px);font-weight:700;letter-spacing:-.04em;line-height:.85;color:#83e3cc;margin-top:4px}
.eng-right{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;z-index:2}
.eng-right .big{font-family:"neulis-sans",Poppins,sans-serif;font-size:clamp(56px,8vw,90px);font-weight:300;letter-spacing:-.02em;line-height:.95;color:#ff6f94}
.eng-right .lbl{font-family:"neulis-sans",Poppins,sans-serif;font-size:15px;font-weight:500;color:#ff6f94;margin-top:4px}
@media(max-width:640px){.eng-bar{min-height:150px}.eng-left{left:18px}.eng-right{right:16px!important}}
.eng-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
@media(max-width:640px){.eng-tiles{grid-template-columns:1fr}}

/* vs the field */
.field-controls{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.signal-wrap{display:flex;flex-direction:column;gap:6px}
.signal-wrap .compare-lbl{align-self:flex-start}
.signal-sel{font-family:"neulis-sans",Poppins,sans-serif;background:#0e3c3c;border:1px solid var(--pill-border);color:#fff;border-radius:9px;padding:8px 40px 8px 15px;font-size:14px;font-weight:700;min-width:190px;height:40px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2383e3cc' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.fieldwrap{position:relative;display:flex;flex-direction:column;gap:12px;width:100%;padding:18px 0;border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13)}
.field-vline{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.16);transform:translateX(-.5px)}
.frow{position:relative;height:38px;z-index:1}
.frow .fl{position:absolute;left:0;top:0;height:100%;width:130px;display:flex;align-items:center;justify-content:flex-start;text-align:left;font-size:14px;font-weight:600;color:var(--soft)}
.frow.sel .fl{color:#fff;font-weight:800}
.ftrack{position:absolute;left:0;right:0;top:0;height:100%}
.fbar{position:absolute;top:50%;transform:translateY(-50%);height:24px;width:0;transition:width .7s cubic-bezier(.2,.8,.2,1);background:#135050}
.fbar.neg{background:#FF6F94}
.fbar.pos{background:#83E3CC}
.frow:not(.sel) .fbar{opacity:.62}
.fval{position:absolute;top:50%;transform:translateY(-50%);font-size:13px;font-weight:800;color:#89A8A8;padding:0 8px}
.fval.left{transform:translate(-100%,-50%)}

.field-bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
@media(max-width:820px){.field-bottom{grid-template-columns:1fr}}
.panel{background:#0E3C3C;border:1px solid rgba(131,227,204,.10);border-radius:18px;padding:26px 28px;min-width:0}
.panel h5{font-size:18px;font-weight:500;color:var(--soft);margin:0 0 22px}
/* total friction vertical bars */
.tfchart{position:relative;height:200px}
.tfbars{display:flex;align-items:flex-end;gap:12px;height:100%}
.tfcol{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center}
.tfbar{width:100%;max-width:46px;border-radius:8px 8px 0 0;background:#4e7c7c;min-height:4px;transition:height .7s cubic-bezier(.2,.8,.2,1)}
.tfcol.sel .tfbar{background:#83E3CC}
.tfavgline{position:absolute;left:0;right:0;border-top:1px dashed rgba(131,227,204,.55);z-index:2}
.tfavgline span{position:absolute;right:0;top:-16px;font-size:11px;font-weight:700;color:#83e3cc}
.tflabels{display:flex;gap:12px;margin-top:8px}
.tflab{flex:1;min-width:0;text-align:center;font-size:10.5px;color:var(--faint);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tflab.sel{color:#83e3cc}
.tfnote{margin-top:16px;font-size:13px;color:var(--emerald-2);font-weight:700}
/* mix donut */
.mixrow{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:6px}
.donut-wrap{position:relative;flex:none;margin:0 auto}
.donut-seg{transition:opacity .15s}
.donut-wrap:hover .donut-seg{opacity:.55}
.donut-wrap .donut-seg:hover{opacity:1}
.donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-c b{font-family:"neulis-sans",Poppins,sans-serif;font-size:38px;font-weight:700;color:#83e3cc}
.donut-c span{font-size:12px;color:var(--muted);font-weight:600}
.mixleg{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.mixleg .li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--soft)}
.mixleg .li i{width:13px;height:13px;border-radius:4px}
.mixleg .li b{margin-left:6px;color:#fff}

/* the device gap — web vs mobile stat cards (Figma node 173:404) */
.dg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.dg-card{border-radius:16px;padding:22px 20px 20px;display:flex;flex-direction:column}
.dg-cname{text-align:center;font-family:"neulis-sans",Poppins,sans-serif;font-size:18px;font-weight:500;line-height:1.15;margin-bottom:8px}
.dg-cpct{text-align:center;font-family:"neulis-sans",Poppins,sans-serif;font-size:clamp(38px,5vw,64px);font-weight:800;line-height:1;margin-bottom:18px}
.dg-cbars{display:flex;flex-direction:column;gap:8px;margin-top:auto;margin-left:-20px}
.dg-crow{display:flex;align-items:center;gap:10px}
.dg-cbar{height:24px;border-radius:0 8px 8px 0;display:flex;align-items:center;padding:0 10px;font-size:10px;font-weight:800;letter-spacing:.06em;white-space:nowrap;flex:none}
.dg-cval{font-size:15px;font-weight:700;white-space:nowrap}
/* two-tone bars — bright bar = card ink (dark label for contrast), dim bar = dark variant (ink label) */
.dg-card.neg .dg-cbar.bright{background:#FF6F94;color:#3B2632}
.dg-card.neg .dg-cbar.dim{background:#72243D;color:#FF6F94}
.dg-card.pos .dg-cbar.bright{background:#83E3CC;color:#06342D}
.dg-card.pos .dg-cbar.dim{background:#06342D;color:#83E3CC}
@media(max-width:900px){.dg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dg-grid{grid-template-columns:1fr}}

/* web signals — a new kind of noise stat cards (Figma node 173:479) */
.ws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.ws-card{border-radius:16px;padding:30px 26px 24px;text-align:center;display:flex;flex-direction:column}
.ws-cname{font-family:"neulis-sans",Poppins,sans-serif;font-size:18px;font-weight:500;margin-bottom:10px}
.ws-cpct{font-family:"neulis-sans",Poppins,sans-serif;font-size:clamp(40px,5.4vw,70px);font-weight:800;line-height:1;overflow-wrap:anywhere}
.ws-cnow{font-family:"neulis-sans",Poppins,sans-serif;font-size:clamp(17px,1.7vw,22px);font-weight:500;margin-top:8px}
.ws-ccap{font-size:12px;line-height:1.5;margin-top:auto;padding-top:20px}
@media(max-width:760px){.ws-grid{grid-template-columns:1fr}}
.ws-sec.ws-off .eyebrow,.ws-sec.ws-off .sec-title{opacity:.5}
.ws-msg{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:15px;line-height:1.55;
  margin-top:18px;padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.2)}
.ws-msg svg{flex:none;stroke:var(--faint)}

/* footer */
.foot{position:fixed;left:0;right:0;bottom:22px;z-index:45;display:flex;justify-content:center;padding:0;pointer-events:none}
@media(max-width:820px){.foot{display:none}}
.footchip{pointer-events:none;display:flex;align-items:center;gap:8px;background:rgba(6,26,23,.58);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 18px 44px rgba(0,0,0,.44), inset 0 1px 0 #00000000;border-radius:999px;padding:10px 11px;opacity:0;transform:translateY(28px);transition:opacity .35s ease,transform .35s ease}
.foot.show .footchip{pointer-events:auto;opacity:1;transform:translateY(0)}
.footchip a,.footchip button{background:var(--emerald);color:#04140f;border:none;border-radius:999px;font-weight:800;font-size:13px;padding:9px 18px;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:9px;transition:background-color .2s ease-in-out}
.footchip .js-schedule{background:#00000000;color:#fff}
@media(hover:hover){
  .footchip .js-compare:hover{background:var(--emerald-deep)}
  .footchip .js-compare:hover .cta-arrow{transform:translateX(4px)}
  .footchip .js-schedule:hover{background:#000000}
}


/* ===== immersive layer (aurora, tooltip, trail, spine) ===== */
.gate-aura-wrap{position:absolute;inset:-12% -6%;z-index:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
.gate-aura{position:absolute;display:block;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;will-change:transform}
.gate-aura.a1{width:46%;height:62%;left:4%;top:6%;background:radial-gradient(circle,#0FA97F,transparent 70%);opacity:.3;animation:aura1 22s ease-in-out infinite}
.gate-aura.a2{width:42%;height:56%;right:3%;top:0;background:radial-gradient(circle,#3DDCA9,transparent 70%);opacity:.24;animation:aura2 27s ease-in-out infinite}
.gate-aura.a3{width:40%;height:52%;left:32%;bottom:-4%;background:radial-gradient(circle,#9E86FF,transparent 70%);opacity:.16;animation:aura3 33s ease-in-out infinite}
/* full-bleed hero artwork — sits above the aurora, below the content */
/* .gate-bg = parallax translate layer; .gate-bg-img = the artwork + on-load zoom */
.gate-bg{position:absolute;inset:-6%;z-index:1;pointer-events:none;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
.gate-bg-img{position:absolute;inset:0;
  background:linear-gradient(90deg,#0a2828 8%,rgba(10,40,40,.86) 48%,rgba(10,40,40,.4) 66%,transparent 82%),url("hero-benchmark.svg") center center / cover no-repeat;
  transform-origin:center center;will-change:transform,filter,opacity;
  animation:gate-bg-in 1.5s cubic-bezier(.2,.8,.2,1) both}
.gate.bg-done .gate-bg-img{animation:none}   /* intro plays once per page load, never again */
@keyframes gate-bg-in{from{transform:scale(1.18);filter:blur(9px);opacity:0}to{transform:scale(1);filter:blur(0);opacity:1}}
@keyframes aura1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-4%) scale(1.12)}}
@keyframes aura2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7%,5%) scale(1.14)}}
@keyframes aura3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-6%) scale(1.1)}}
.gate-h1{transition:transform .35s cubic-bezier(.2,.8,.2,1)}

.tiptip{position:fixed;z-index:60;pointer-events:none;background:#153a34;border:1px solid var(--pill-border);color:var(--soft);font-size:12.5px;font-weight:500;line-height:1.45;padding:9px 13px;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.32);transform:translate(-50%,-115%);opacity:0;transition:opacity .12s;max-width:260px;white-space:normal;text-align:left}
.tiptip.on{opacity:1}
.lc-dot{cursor:pointer;transition:r .15s}
.lc-dot:hover{r:9}
.frow[data-tip]{cursor:default}


#spine{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:46;display:flex;flex-direction:column;gap:14px}
.spine-dot{width:10px;height:10px;padding:0;border:none;border-radius:50%;background:rgba(131,227,204,.28);cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
.spine-dot:hover{background:rgba(131,227,204,.72);transform:scale(1.2)}
.spine-dot.on{background:var(--emerald);box-shadow:0 0 0 4px rgba(7,199,153,.18);transform:scale(1.25)}
@media(max-width:1100px){#spine{display:none}}

/* ===== editorial notes, glossary tooltips, product plug ===== */
.readnote{margin:30px 0 0;font-size:15px;line-height:1.6;color:#fff;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:14px 18px}
.readnote b{color:#fff}
.sec-note{font-size:15px;line-height:1.6;color:#fff;margin:16px 0 0;max-width:720px}
.gloss{cursor:help}
.glossary .gloss-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 40px;margin-top:8px}
.gloss-item{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid rgba(255,255,255,.08)}
.gloss-item b{font-size:15px;font-weight:700;color:var(--soft)}
.gloss-item span{font-size:13px;line-height:1.5;color:var(--muted)}
@media(max-width:700px){.glossary .gloss-grid{grid-template-columns:1fr}}

/* mobile gets the same treatment as prefers-reduced-motion — the scroll-linked zoom/fade/grow effects read as "a bit much" on a phone */
@media(prefers-reduced-motion:reduce),(max-width:820px){.reveal{opacity:1;transform:none}*{transition-duration:.001ms!important}.gate-aura{animation:none}.gate-bg-img{animation:none;transform:none;filter:none;opacity:1}.sec{transform:none!important;opacity:1!important;filter:none!important}}
/* mobile: nudge the hero artwork right so its focal point clears the headline.
   Transform only, so nothing else in the hero moves. Must follow the rule above,
   which resets .gate-bg-img's transform to none at this breakpoint. */
/* mobile: bias the hero artwork right so its focal point clears the headline.
   Done with background-size/position, not a transform: translating the layer moved it
   past its own overhang and left bare ground down the left edge of the screen. */
@media(max-width:820px){.gate-bg-img{background-size:auto 112%;background-position:0% center}}
/* mobile: the blanket transition kill above also flattens the card flip, so put that one back */
@media(max-width:820px) and (prefers-reduced-motion:no-preference){
  .tile.flip .tile-inner{transition-duration:.55s!important}
}

.cta{font-weight:700;font-size:15.5px;color:#04140f;background:var(--emerald);border:none;border-radius:100px;padding:16px 30px;transition:background-color .2s ease-in-out;box-shadow:0 8px 24px rgba(7,199,153,.28);text-align:center}
.cta:focus-visible{outline:2px solid var(--emerald-2);outline-offset:3px}
.cta-nav{padding:14px 20px;font-size:13px;box-shadow:none;text-decoration:none;display:inline-flex;align-items:center;gap:12px;align-self:center}
.cta-arrow{display:inline-block;transition:transform .2s ease}
@media(hover:hover){
  .cta:hover{background:var(--emerald-deep)}
  .cta-nav:hover .cta-arrow{transform:translateX(4px)}
}
/* the mobile menu can be reached from a mouse (narrow desktop window), where (hover:hover)
   still matches — kill the hover look there regardless, since it's a tap target, not a pointer one */
body.compact-nav .cta:hover{background:var(--emerald)}
body.compact-nav .cta-nav:hover .cta-arrow{transform:none}
.cta-tertiary{background:transparent;color:var(--muted);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.cta-tertiary:hover{background:rgba(255,255,255,.04)}
.cta-tertiary svg{width:15px;height:15px;flex:none}

.overlay{position:fixed;inset:0;background:rgba(4,16,13,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100;opacity:0;pointer-events:none;transition:opacity .18s}
.overlay.on{opacity:1;pointer-events:auto}
.overlay .modal{width:100%;max-width:980px;max-height:88vh;overflow-y:auto;background:var(--bg2);border:1px solid rgba(131,227,204,.14);border-radius:20px;padding:36px 38px 32px;transform:translateY(14px) scale(.98);transition:transform .2s cubic-bezier(.2,.8,.2,1);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.overlay.on .modal{transform:translateY(0) scale(1)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.modal-head p.byod{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--emerald-2);margin:0;max-width:none}
.modal-head h2{font-size:24px;font-weight:600;letter-spacing:-.01em;margin-top:7px}
.modal-head p{margin:8px 0 0;font-size:14px;color:var(--muted);line-height:1.5;max-width:520px}
.modal .x{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--pill-border);background:transparent;color:var(--soft);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.modal .x:hover{border-color:var(--emerald-2);color:var(--emerald-2)}

.modal .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:28px}
.modal .step{display:flex;flex-direction:column;padding:0 22px;border-left:1px solid var(--line)}
.modal .step:first-child{border-left:none;padding-left:0}
.modal .step:last-child{padding-right:0}
.modal .stepnum{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--emerald);color:var(--emerald-2);display:flex;align-items:center;justify-content:center}
.modal .stepnum svg{width:15px;height:15px}
.modal .stepbody{margin-top:14px;min-width:0}
.modal .stepbody h3{font-size:15.5px;font-weight:600}
.modal .stepbody p{margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.modal .copybtn{margin-top:14px;display:inline-flex;align-items:center;gap:9px;background:var(--emerald);color:#04140f;font-weight:700;font-size:13.5px;border:none;border-radius:100px;padding:11px 20px;transition:background .15s;min-width:156px;justify-content:center;cursor:pointer}
.modal .copybtn:hover{background:var(--emerald-2)}
.modal .copybtn.done{background:var(--emerald-deep)}
.modal .copybtn:focus-visible{outline:2px solid var(--emerald-2);outline-offset:3px}
.modal .copybtn svg{width:15px;height:15px;flex:none}

.preview-head{display:flex;align-items:center;justify-content:flex-start;gap:16px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.preview-head .copybtn{margin-top:0;flex:none}
.preview-toggle{display:flex;align-items:center;gap:9px;background:none;border:none;padding:0;text-align:left;min-width:0;cursor:pointer}
.preview-toggle .chevron{width:15px;height:15px;flex:none;color:var(--emerald-2);transition:transform .2s}
.preview-toggle[aria-expanded="true"] .chevron{transform:rotate(90deg)}
.preview-toggle .lbl{font-size:12.5px;font-weight:600;color:var(--soft)}
.preview-toggle:hover .lbl{color:var(--emerald-2)}
.preview-toggle:focus-visible{outline:2px solid var(--emerald-2);outline-offset:3px}
.previewbox{max-height:0;overflow:hidden;background:#08201d;border-radius:12px;transition:max-height .25s ease}
.previewbox.open{max-height:360px;overflow-y:auto;margin-top:12px}
.previewbox .doc{padding:18px 20px;font-size:12.5px;line-height:1.6;color:var(--soft)}
.previewbox .doc .lead{font-weight:700;color:var(--ink);letter-spacing:.01em}
.previewbox .doc h2{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--emerald-2);margin:20px 0 4px}
.previewbox .doc h2:first-of-type{margin-top:16px}
.previewbox .doc h4{font-size:12.5px;font-weight:600;color:var(--ink);margin:16px 0 6px}
.previewbox .doc p{margin:10px 0}
.previewbox .doc ol{margin:8px 0;padding-left:20px}
.previewbox .doc ol+ol{margin-top:-2px}
.previewbox .doc ul{margin:6px 0;padding-left:20px}
.previewbox .doc ol+ul{padding-left:40px}
.previewbox .doc li{margin:6px 0}
.previewbox .doc li ul{margin:4px 0}
.previewbox .doc .tblwrap{overflow-x:auto;margin:8px 0 4px;border-radius:8px;border:1px solid var(--line)}
.previewbox .doc table{border-collapse:collapse;width:100%;font-size:11.5px}
.previewbox .doc th,.previewbox .doc td{padding:6px 10px;text-align:left;white-space:nowrap;font-variant-numeric:tabular-nums}
.previewbox .doc th{background:rgba(131,227,204,.08);color:var(--ink);font-weight:600;border-bottom:1px solid var(--line)}
.previewbox .doc td{border-bottom:1px solid var(--line);color:var(--soft)}
.previewbox .doc tr:last-child td{border-bottom:none}
.previewbox .doc .src{color:var(--muted)}
.previewbox .doc .src a{color:var(--emerald-2)}

.logic-note{margin:22px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}

#compareCopyIcon.pop{animation:iconPop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes iconPop{0%{transform:scale(.5) rotate(-10deg)}55%{transform:scale(1.25) rotate(8deg)}80%{transform:scale(.92) rotate(-4deg)}100%{transform:scale(1) rotate(0)}}

/* ===== schedule form modal (Marketo 2790) ===== */
.overlay .modal.form-modal{position:relative;max-width:600px;padding:40px 44px}
.form-modal .fm-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.form-modal .fm-copy h2{font-size:28px;font-weight:300;letter-spacing:-.015em;line-height:1.18;color:var(--ink);margin:0;padding-right:44px}
.form-modal .fm-copy p{margin:10px 0 0;font-size:14px;color:var(--muted);line-height:1.6;padding-right:44px}
.form-modal .x{position:absolute;top:16px;right:16px}
.form-modal .fm-spinner{display:block;height:340px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.form-modal .fm-thanks{display:none;text-align:left}
.form-modal.done .fm-thanks{display:block}
.form-modal.done .fm-formwrap,
.form-modal.done .fm-copy{display:none}
.form-modal .fm-thanks h3{font-size:20px;font-weight:600;color:var(--ink);margin:0}
.form-modal .fm-thanks p{margin:10px 0 0;font-size:14px;color:var(--muted);line-height:1.6}
.form-modal .fm-error{text-align:left;padding:24px 0}
.form-modal .fm-error p{margin:0 0 14px;font-size:14px;color:var(--muted);line-height:1.6}

/* Marketo base grid neutralizing (mirrors mktgdev static/mktoOverrides.css) */
.form-modal .mktoLabel,
.form-modal label[for^='mktoRadio'],
.form-modal label[for^='mktoCheckbox']{display:grid;grid-template-columns:auto auto;column-gap:4px;justify-content:start;align-content:center;font-size:.75rem;text-transform:uppercase;font-weight:700;letter-spacing:.04em;padding-bottom:0;height:1rem}
.form-modal .mktoLabel.mktoAsterix{order:2}
.form-modal .mktoLabel .mktoAsterix{order:2}
.form-modal .mktoFormRow{position:relative;grid-column:1/-1;height:fit-content}
.form-modal .mktoFormRow:has(input[type='hidden']){display:none}
.form-modal .mktoFieldWrap{margin-bottom:8px}
.form-modal .mktoFieldWrap .mktoHtmlText,
.form-modal .mktoFieldWrap label#LblOpt_In_Explicit__c{font-size:.75rem;padding-left:.5rem}
.form-modal .mktoFieldWrap label#LblOpt_In_Explicit__c{display:block;text-transform:none;font-weight:300;line-height:1.4;margin-bottom:0;padding-bottom:0;padding-right:0;height:fit-content}
.form-modal .mktoFieldWrap label#LblOpt_In_Explicit__c .mktoAsterix{display:none}
.form-modal input[type='checkbox'].mktoField{appearance:none;width:16px!important;height:16px!important;transform:scale(1)!important;margin:0!important;padding:0!important;border:1px solid var(--pill-border);border-radius:4px;position:relative}
.form-modal input[type='checkbox'].mktoField:checked{background-color:var(--emerald);border-color:var(--emerald)}
.form-modal input[type='checkbox'].mktoField:checked::after{content:'';position:absolute;left:5px;top:2px;width:2px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(34deg)}
.form-modal input[type='radio'],.form-modal input[type='checkbox']{height:unset;display:inline-block;width:16px!important;float:left;clear:left}
.form-modal .mktoField{position:relative;font-size:15px;width:100%;min-width:0;padding:.5rem .7rem;border-radius:6px;box-sizing:border-box;height:2.6rem}
.form-modal .indicates-required{display:none}
.form-modal .mktoButtonRow{grid-column:1/-1}
.form-modal .mktoButton{font-family:"neulis-sans",Poppins,sans-serif;font-weight:700;color:#fff;font-size:15px;text-align:center;text-transform:uppercase;letter-spacing:.03em;line-height:20px;cursor:pointer;width:100%;height:54px;border:0;border-radius:6px}
.form-modal .mktoFormRow:has(div[class*='mktoPlaceholderProduct_of_Interest__c']){display:none}
.form-modal .mktoFormRow:has(input[id='Opt_In_Explicit__c']) .mktoFieldWrap{display:grid;grid-template-columns:1.1rem 0 minmax(200px,auto) 0 0;justify-items:start;align-items:start}
.form-modal .mktoFormRow:has(input[id='Opt_In_Explicit__c']) .mktoFieldWrap label[for='Opt_In_Explicit__c']{grid-row:1;grid-column:3;margin-top:-3px}
.form-modal .mktoFormRow:has(input[id='Opt_In_Explicit__c']) .mktoFieldWrap .mktoCheckboxList{grid-row:1;grid-column:1}
@media(min-width:768px){
  .form-modal [id^='mktoForm_']{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:.6rem;grid-row-gap:0;width:100%}
}

/* The shared events module strips Marketo's CSS at whenRendered and stamps
   data-styles-ready on the form. Until that lands the form would flash in
   Marketo's styles, so hold it hidden — but only under .destyling, which
   app.js adds solely when the loaded build can actually strip styles. If the
   module never loads the class is never added and the form still shows. */
.form-modal .fm-formwrap.destyling #mktoForm_2790:not([data-styles-ready]){visibility:hidden}

/* report recolor + width fixes, scoped so they beat the base rules above */
/* Marketo ships the form element with an inline width:1px, which starves the grid tracks. */
#mktoForm_2790.schedule-form{width:100%!important;font-family:"neulis-sans",Poppins,sans-serif;font-size:15px;color:var(--soft)}
#mktoForm_2790.schedule-form .mktoField{width:100%!important;background:var(--tile);border:1px solid var(--pill-border);color:#fff}
#mktoForm_2790.schedule-form input[type='checkbox'].mktoField{width:16px!important}
#mktoForm_2790.schedule-form .mktoField::placeholder{color:var(--faint)}
#mktoForm_2790.schedule-form .mktoField:focus{outline:none;border-color:var(--emerald-2)}
#mktoForm_2790.schedule-form .mktoField.mktoInvalid{border-color:var(--crimson)}
#mktoForm_2790.schedule-form select.mktoField{color:#fff}
#mktoForm_2790.schedule-form .mktoLabel,
#mktoForm_2790.schedule-form label[for^="mktoCheckbox"]{color:var(--muted)}
#mktoForm_2790.schedule-form .mktoFieldWrap label#LblOpt_In_Explicit__c{color:var(--muted)}
#mktoForm_2790.schedule-form .mktoFieldWrap label#LblOpt_In_Explicit__c a{color:var(--emerald-2)!important;text-decoration:underline}

/* Marketo's inline-sized .mktoFormCol/.mktoGutter/.mktoOffset floats fight the grid.
   First/Last render as two separate rows, so JS tags both with .sched-name-row. */
#mktoForm_2790.schedule-form .mktoFormRow{grid-column:1/-1;width:100%!important;float:none!important;clear:both!important;padding-bottom:20px}
#mktoForm_2790.schedule-form .mktoFormRow:has(input[type='hidden']){padding-bottom:0}
#mktoForm_2790.schedule-form .mktoFormRow.sched-name-row{grid-column:span 1}
/* Marketo makes .mktoFormCol position:relative, which would anchor the absolute error to the
   input instead of the row's reserved strip. */
#mktoForm_2790.schedule-form .mktoFormCol{position:static!important;width:100%!important;float:none!important;min-height:0!important;margin-bottom:0!important}
#mktoForm_2790.schedule-form .mktoFieldWrap{width:100%!important;float:none!important;margin-bottom:0!important}
#mktoForm_2790.schedule-form .mktoGutter,
#mktoForm_2790.schedule-form .mktoOffset{display:none!important;width:0!important}
#mktoForm_2790.schedule-form .mktoLabel{width:100%!important}
#mktoForm_2790.schedule-form .mktoButtonRow{grid-column:1/-1;width:100%!important;margin-top:6px;padding-bottom:0}
#mktoForm_2790.schedule-form .mktoButtonWrap{width:100%!important;margin:0!important}
#mktoForm_2790.schedule-form .mktoButton{width:100%!important;display:block!important;background:var(--emerald)!important}
#mktoForm_2790.schedule-form .mktoButton:hover{background:var(--emerald-2)!important}

/* Marketo's error bubble is an absolutely-positioned red-bordered tooltip. Flatten it. */
#mktoForm_2790.schedule-form .mktoError{position:absolute!important;display:block!important;width:100%!important;top:auto!important;left:0!important;right:auto!important;bottom:2px!important;border:0!important;background:none!important;box-shadow:none!important}
#mktoForm_2790.schedule-form .mktoErrorArrowWrap{display:none!important}
#mktoForm_2790.schedule-form .mktoErrorArrow{display:none!important}
#mktoForm_2790.schedule-form .mktoErrorDetail{display:inline;border:0!important;background:none!important;color:inherit;font-size:inherit}
#mktoForm_2790.schedule-form .mktoErrorMsg{position:static!important;display:block!important;width:100%!important;max-width:none!important;bottom:auto!important;left:auto!important;right:auto!important;top:auto!important;margin:0!important;border:0!important;font-size:12px;font-weight:400;color:var(--crimson-2);background:transparent!important;padding:0!important;border-radius:0!important;box-shadow:none!important;text-shadow:none!important}

@media(max-width:820px){
  .overlay .modal.form-modal{padding:30px 22px 26px}
  .form-modal .fm-copy h2{font-size:23px}
  /* iOS Safari zooms the whole page on focus for any input under 16px. */
  .form-modal .mktoField,
  #mktoForm_2790.schedule-form .mktoField{font-size:16px}
}

/* Mobile modals. vh on iOS measures the chrome-hidden viewport, so an 88vh modal runs under
   the browser's bottom bar and buries the submit button. dvh tracks the visible area, and the
   safe-area inset keeps the last control clear of the home indicator. */
@media(max-width:820px){
  .overlay{padding:12px;align-items:flex-start}
  .overlay .modal{max-height:calc(100dvh - 24px);overflow-x:hidden;border-radius:16px;
    padding:26px 18px calc(22px + env(safe-area-inset-bottom))}
  .overlay .modal.form-modal{padding:34px 18px calc(26px + env(safe-area-inset-bottom))}
  /* three step columns don't fit a phone: stack them and swap the dividers to horizontal */
  .modal .steps{grid-template-columns:1fr;margin-top:20px}
  /* icon rides on the title's line rather than sitting on a row of its own, and the
     description spans the full width beneath both. display:contents lifts the h3 and p
     out of .stepbody so they can be placed on the same grid. */
  .modal .step{border-left:0;padding:0;display:grid;grid-template-columns:auto 1fr;column-gap:11px;align-items:center}
  .modal .step + .step{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
  .modal .stepnum{grid-column:1;grid-row:1;width:26px;height:26px}
  .modal .stepnum svg{width:13px;height:13px}
  .modal .stepbody{display:contents}
  .modal .stepbody h3{grid-column:2;grid-row:1}
  .modal .stepbody p{grid-column:1/-1;grid-row:2;margin-top:7px}
  .modal .copybtn{grid-column:1/-1}
  .previewbox.open{max-height:min(300px,42dvh)}
}