:root {
  --ink: #10161c;
  --muted: #61656b;
  --paper: #f1eadf;
  --paper-2: #e5dacb;
  --navy: #0b1c2b;
  --navy-2: #132f46;
  --sky: #7ea2bd;
  --gold: #c89a57;
  --brass: #c89a63;
  --brass-hi: #e5bd83;
  --ivory: #fff7ea;
  --line: rgba(16, 22, 28, 0.16);
  --line-light: rgba(255, 247, 234, 0.24);
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --shadow: 0 28px 80px rgba(15, 18, 22, 0.18);
  --shell: min(1280px, calc(100vw - 64px));
  /* Type. Manrope carries body and display; Playfair appears only as the italic
     accent inside headings. Swap these with the faces in fonts.css. */
  --sans: Manrope, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: var(--sans);
  --italic: "Playfair Display", "Iowan Old Style", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
canvas { display: block; max-width: 100%; }
::selection { background: var(--gold); color: var(--navy); }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--ivory);
  color: var(--navy);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

.shell { width: var(--shell); margin-inline: auto; }
.section { position: relative; }
.kicker, .eyebrow {
  margin: 0 0 18px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}
.kicker { color: #76674f; }
.kicker--light { color: rgba(255, 247, 234, 0.72); }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(32px, calc((100vw - 1280px) / 2));
  color: white;
  transition: background 220ms ease, color 220ms ease, height 220ms ease, border-color 220ms ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  height: 68px;
  color: var(--ink);
  background: rgba(241, 234, 223, 0.9);
  border-color: rgba(16, 22, 28, 0.1);
  backdrop-filter: blur(18px);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  text-decoration: none;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.045em;
}
.brand-number { font-family: var(--display); font-size: 1.12em; font-style: italic; color: var(--gold); }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 0.88rem; font-weight: 650; }
.site-nav > a { text-decoration: none; opacity: 0.84; transition: opacity 180ms ease; }
.site-nav > a:hover, .site-nav > a:focus-visible { opacity: 1; }
.nav-cta {
  padding: 10px 15px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
}
.menu-toggle { display: none; }

/* Extra scroll length the hero holds the viewport for. The parallax runs across
   this distance at full hero visibility; raise it for a longer, slower reveal. */
.hero-pin {
  --hero-pin-extra: 110svh;
  position: relative;
  height: calc(100svh + var(--hero-pin-extra));
}
.hero {
  position: sticky;
  top: 0;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  color: white;
  background: var(--navy);
}
/* The copy drifts and fades as the pin plays out, so the held screen still
   responds to scrolling instead of sitting inert. Applied to the containers,
   not to [data-reveal] elements themselves: their .is-visible rule is more
   specific and would override this while also cancelling the reveal. */
/* The copy drifts but no longer fades: there is no reason to take the headline
   and the call to action away while the hero is still on screen. The scroll cue
   still fades, since it is a prompt that has served its purpose once you move. */
.hero-inner {
  transform: translate3d(0, calc(var(--hero-progress, 0) * -34px), 0);
  will-change: transform;
}

.scroll-cue {
  opacity: calc(1 - var(--hero-progress, 0) * 2.2);
  transform: translate3d(0, calc(var(--hero-progress, 0) * -34px), 0);
  will-change: opacity, transform;
}
.hero-media, .hero-scrim, .grain { position: absolute; inset: 0; }
.hero-media { z-index: -4; overflow: hidden; }
/* The stage reproduces what object-fit:cover would do for the 2912x2032 source,
   as a real box. Every layer is then placed inside it by fraction of that canvas,
   which lets each cut-out ship cropped to its own bounds instead of as a full
   transparent sheet - 12Mpx to decode across all eight rather than 47Mpx.
   height takes whichever is larger: enough to cover the hero vertically (plus
   --hero-slack of painted canvas hanging below), or enough that the derived
   width still spans a very wide, short viewport. */
.hero-stage {
  --hero-slack: 0.27;
  position: absolute;
  top: -6%;
  left: 50%;
  transform: translateX(-50%);
  height: max(calc(112% + var(--hero-slack, 0) * 100%), calc(100vw * 2032 / 2912));
  aspect-ratio: 2912 / 2032;
}
.hero-layer {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: calc(var(--w) * 100%);
  height: calc(var(--h) * 100%);
  max-width: none;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}
.hero-scrim {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(7, 17, 27, 0.83) 0%, rgba(7, 17, 27, 0.54) 35%, rgba(7, 17, 27, 0.06) 76%),
    linear-gradient(0deg, rgba(7, 17, 27, 0.56) 0%, rgba(7, 17, 27, 0.02) 42%);
}
.grain {
  z-index: -1;
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.21'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.hero-inner {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 120px 0 120px;
}
.hero-copy { width: min(720px, 62vw); margin-top: -2vh; }
.hero h1 {
  margin: 0;
  max-width: 9.4ch;
  font-family: var(--display);
  font-size: clamp(4.4rem, 8.4vw, 9rem);
  font-weight: 560;
  line-height: 0.82;
  letter-spacing: -0.066em;
  text-wrap: balance;
}
.hero h1 em { font-weight: 400; color: var(--ivory); }
.eyebrow { color: rgba(255, 247, 234, 0.78); }
.hero-lede {
  width: min(620px, 100%);
  margin: 30px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  text-wrap: pretty;
}
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; flex-wrap: wrap; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .text-link:focus-visible, .site-nav a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.button--primary { background: var(--ivory); color: var(--navy); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18); }
.button--primary:hover { box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24); }
.text-link { color: white; text-underline-offset: 5px; text-decoration-color: rgba(255,255,255,.4); font-weight: 700; }


.hero-proof {
  position: absolute;
  left: 0px;
  bottom: 100px;
  width: 300px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.38);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
}
.hero-proof__number { font-family: var(--display); font-size: 2.1rem; line-height: 1; }
.hero-proof__text { font-size: .75rem; line-height: 1.45; color: rgba(255,255,255,.76); }
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 9px;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .62rem;
  font-weight: 800;
}
.scroll-cue i { width: 1px; height: 28px; background: currentColor; transform-origin: top; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100%{transform:scaleY(.45);opacity:.45} 50%{transform:scaleY(1);opacity:1} }
@keyframes generatorPulse{50%{opacity:.38;box-shadow:0 0 0 8px rgba(227,189,135,.04)}}
@keyframes productionHeroInput {
  0%, 12%, 100% { border-color: color-mix(in oklab, var(--glass-border-strong) 54%, transparent); box-shadow: inset 0 1px 0 color-mix(in oklab, white 10%, transparent); }
  20%, 84% { border-color: color-mix(in oklab, var(--accent) 58%, var(--glass-border-strong)); box-shadow: 0 0 24px color-mix(in oklab, var(--accent) 18%, transparent), inset 0 1px 0 color-mix(in oklab, white 12%, transparent); }
}
@keyframes productionHeroChip {
  0%, 12% { opacity: 0; transform: translateY(7px) scale(.96); }
  20%, 84% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-5px) scale(.98); }
}
@keyframes productionHeroProgress {
  0%, 12% { transform: scaleX(0); opacity: 0; }
  20%, 84% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes productionHeroRowGenerate { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes productionHeroRowsScroll {
  0%, 8% { transform: translateY(0); }
  85% { transform: translateY(calc(var(--hero-demo-scroll-distance, 0px) * -1)); }
  100% { transform: translateY(0); }
}



.results { padding: clamp(44px, 7svh, 120px) 0 clamp(40px, 6.3svh, 108px); background: var(--paper); }
.section-heading { max-width: 920px; }
.section-heading h2, .demo-copy h2, .cutoff-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 5vw, 5.8rem);
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.results-heading h2 { max-width: 15ch; }
.results-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 78px;
}
.metric { min-height: 310px; padding: 38px 34px 38px 0; display: flex; flex-direction: column; justify-content: space-between; }
.metric + .metric { border-left: 1px solid var(--line); padding-left: 34px; }
.metric strong {
  font-family: var(--display);
  font-size: clamp(4.2rem, 7.6vw, 8.6rem);
  line-height: .84;
  font-weight: 560;
  letter-spacing: -0.065em;
}
.metric:nth-child(2) strong { font-size: clamp(3.7rem, 6.3vw, 7rem); }
.metric p { margin: 34px 0 0; max-width: 34ch; color: var(--muted); line-height: 1.55; }
.results-note { max-width: 92ch; margin: 24px 0 0; color: #777067; font-size: .76rem; line-height: 1.55; }



/* Product-inside section adapted from the selected variation. */
.product-section{position:relative;padding:clamp(44px, 7.4svh, 128px) 0;background:#0b1219;color:#fff;overflow:hidden;isolation:isolate}
.product-section::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.product-section::after{content:"";position:absolute;z-index:-1;width:720px;aspect-ratio:1;border:1px solid rgba(229,189,131,.12);border-radius:50%;right:-330px;top:50px;box-shadow:0 0 0 110px rgba(229,189,131,.025),0 0 0 220px rgba(229,189,131,.015)}
.product-heading{display:grid;grid-template-columns:1.35fr .65fr;gap:80px;align-items:end;margin-bottom:54px}.product-heading h2{font-family:var(--display);font-size:clamp(50px,5.4vw,78px);font-weight: 560;line-height:.96;letter-spacing:-.05em;margin:0;max-width:850px}.product-heading h2 em{font-weight:400;font-style:italic;color:var(--brass-hi)}.product-heading p{font-size:15px;line-height:1.75;color:rgba(255,255,255,.57);margin:0 0 5px;max-width:470px}.product-heading .kicker{color:#d7b98f}
.product-demo-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.58fr);gap:18px;align-items:stretch}.app-window{min-width:0;border:1px solid rgba(255,255,255,.13);border-radius:24px;overflow:hidden;background:#f4efe7;box-shadow:0 40px 110px rgba(0,0,0,.24)}
.app-window-bar{height:42px;background:#121b24;color:rgba(255,255,255,.45);display:grid;grid-template-columns:80px 1fr auto;align-items:center;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:9px;letter-spacing:.06em}.app-window-bar>span{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-window-bar>b{font-size:8px;letter-spacing:.12em;color:#d7b98f;border:1px solid rgba(215,185,143,.25);padding:4px 6px;border-radius:5px}.window-dots{display:flex;gap:5px}.window-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}.window-dots i:nth-child(2){background:rgba(229,189,131,.35)}
.app-ui{display:grid;grid-template-columns:178px minmax(0,1fr);min-height:592px;color:var(--ink)}.app-sidebar{background:#111a23;color:#fff;padding:22px 16px;display:flex;flex-direction:column;min-width:0}.app-mini-brand{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:800;letter-spacing:-.04em;margin:1px 3px 28px;text-decoration:none}.app-mini-brand img{width:24px;height:24px;filter:brightness(0) invert(1)}.app-mini-brand>span>span{color:var(--brass-hi)}.app-sidebar nav{display:grid;gap:5px}.app-sidebar nav span{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:9px;font-weight:700;color:rgba(255,255,255,.43)}.app-sidebar nav span i{font-style:normal;width:14px;text-align:center;font-size:12px;color:rgba(255,255,255,.3)}.app-sidebar nav span.active{background:rgba(229,189,131,.11);color:#f1ddc0}.app-sidebar nav span.active i{color:var(--brass-hi)}.app-profile{margin-top:auto;border-top:1px solid rgba(255,255,255,.09);padding:18px 10px 4px;display:flex;flex-direction:column}.app-profile span{font-size:8px;letter-spacing:.13em;color:rgba(255,255,255,.34)}.app-profile b{font-family:var(--display);font-size:28px;font-weight: 560;margin-top:4px;color:#fff}.app-profile small{font-size:8px;color:rgba(255,255,255,.3)}
.app-workspace{min-width:0;padding:24px;background:linear-gradient(180deg,#f8f3eb,#f2eadf)}.app-workspace-head{display:flex;justify-content:space-between;gap:20px;align-items:end;padding-bottom:18px;border-bottom:1px solid rgba(10,17,24,.1)}.app-workspace-head small{font-size:8px;font-weight:800;letter-spacing:.14em;color:#877763}.app-workspace-head h3{font-family:var(--display);font-size:29px;font-weight: 560;letter-spacing:-.03em;margin:3px 0 0}.app-screen-actions{display:flex;align-items:center;gap:8px}.app-screen-actions span,.app-screen-actions button{font:700 8px var(--sans);border:1px solid rgba(10,17,24,.1);background:rgba(255,255,255,.36);padding:7px 9px;border-radius:7px;color:#6c645c}.app-screen-actions button{background:var(--ink);color:#fff;border-color:var(--ink);pointer-events:none}
.app-summary-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.app-summary-row>div{min-width:0;min-height:88px;background:rgba(255,255,255,.58);border:1px solid rgba(10,17,24,.08);border-radius:11px;padding:12px;display:flex;flex-direction:column}.app-summary-row span{font-size:7px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8b8174}.app-summary-row strong{font-family:var(--display);font-size:25px;font-weight: 560;line-height:1.1;margin-top:7px;white-space:nowrap}.app-summary-row strong small{font:8px var(--sans);color:#8b8174}.app-summary-row>div>small{font-size:7px;color:#8b8174;margin-top:4px;line-height:1.35}.app-summary-row>div>i{display:block;height:3px;background:#e1d8ca;border-radius:999px;position:relative;margin-top:auto;overflow:hidden}.app-summary-row>div>i::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--score);background:var(--brass)}
.app-list-head,.app-list-row{display:grid;grid-template-columns:30px minmax(180px,1.5fr) minmax(64px,.65fr) 60px 40px;gap:8px;align-items:center}.app-list-head{height:25px;padding:0 10px;font-size:7px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#978c7f}.app-list-table{border:1px solid rgba(10,17,24,.09);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.5)}.app-list-row{min-height:54px;padding:8px 10px;border-bottom:1px solid rgba(10,17,24,.07);font-size:8px}.app-list-row:last-child{border-bottom:0}.app-list-row.top{background:rgba(200,154,99,.1)}.app-list-row>span:first-child{font-family:var(--display);font-size:12px;color:#9a8e7f}.app-list-row>div{min-width:0;display:flex;flex-direction:column}.app-list-row b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-list-row small{font-size:7px;color:#93887b;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-list-row>span:nth-child(3){color:#6d6963}.app-list-row i{font-style:normal;font-size:7px;border:1px solid rgba(10,17,24,.1);border-radius:999px;padding:4px 6px;text-align:center;color:#6b6259}.app-list-row em{font-family:var(--display);font-size:15px;font-style:normal;text-align:right;color:#765f45}
.app-explain-card{margin-top:12px;background:#101922;color:#fff;border-radius:12px;padding:13px 14px;display:grid;grid-template-columns:105px 1fr;gap:10px 14px;align-items:start}.app-explain-card>span{font-size:7px;letter-spacing:.1em;font-weight:800;color:var(--brass-hi)}.app-explain-card p{font-size:8px;line-height:1.45;color:rgba(255,255,255,.55);margin:0}.app-explain-card>div{grid-column:2;display:flex;gap:5px;flex-wrap:wrap}.app-explain-card b{font-size:7px;font-weight:650;color:rgba(255,255,255,.47);padding:4px 6px;border:1px solid rgba(255,255,255,.09);border-radius:5px}.app-window-caption{height:42px;background:#e7ded1;border-top:1px solid rgba(10,17,24,.08);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;color:#72695f;font-size:8px}.app-window-caption span{text-transform:uppercase;letter-spacing:.1em}.app-window-caption b{font-weight:650}
.live-dot{width:6px;height:6px;border-radius:50%;background:#e3bd87;box-shadow:0 0 0 5px rgba(227,189,135,.12)}
.live-generator{min-width:0;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:linear-gradient(155deg,rgba(24,36,48,.98),rgba(10,17,24,.98));padding:20px;color:#fff;box-shadow:0 40px 100px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden;position:relative}.live-generator::after{content:"";position:absolute;width:280px;aspect-ratio:1;border:1px solid rgba(229,189,131,.1);border-radius:50%;right:-120px;top:-120px;box-shadow:0 0 0 45px rgba(229,189,131,.025),0 0 0 90px rgba(229,189,131,.015);pointer-events:none}.generator-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:14px}.generator-head>div{display:flex;align-items:center;gap:9px}.generator-head b{font-size:8px;letter-spacing:.12em;color:rgba(255,255,255,.62)}.generator-head>span{font-size:8px;text-transform:uppercase;letter-spacing:.1em;color:#d7b98f}.generator-head .live-dot{width:5px;height:5px;animation:generatorPulse 1.5s ease-in-out infinite}.generator-core{position:relative;z-index:1;display:grid;grid-template-columns:86px 1fr;gap:18px;align-items:center;padding:28px 0 23px}.number-window{height:174px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(255,255,255,.025)}.number-window::after{content:"";position:absolute;left:8px;right:8px;top:58px;height:58px;border-top:1px solid rgba(229,189,131,.22);border-bottom:1px solid rgba(229,189,131,.22);background:rgba(229,189,131,.045);pointer-events:none}.number-track{transform:translateY(var(--number-offset,58px));transition:transform .36s cubic-bezier(.2,.72,.2,1);will-change:transform}.number-track span{height:58px;display:grid;place-items:center;font-family:var(--display);font-size:26px;color:rgba(255,255,255,.18);transition:color .25s,transform .25s}.number-track span.current{color:var(--brass-hi);transform:scale(1.08)}.number-fade{position:absolute;z-index:2;left:0;right:0;height:54px;pointer-events:none}.number-fade-top{top:0;background:linear-gradient(#121d27,rgba(18,29,39,.25))}.number-fade-bottom{bottom:0;background:linear-gradient(rgba(18,29,39,.2),#121d27)}.generator-choice{min-width:0;display:flex;flex-direction:column}.generator-choice>small{font-size:7px;letter-spacing:.14em;font-weight:800;color:rgba(255,255,255,.35)}.generator-choice>strong{font-family:var(--display);font-size:25px;line-height:1.03;font-weight: 560;margin:10px 0 7px;letter-spacing:-.025em;min-height:52px}.generator-choice>span{font-size:9px;color:rgba(255,255,255,.43)}.choice-score{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;margin-top:19px}.choice-score>i{height:3px;background:rgba(255,255,255,.08);border-radius:99px;position:relative;overflow:hidden}.choice-score>i::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--choice-score,94%);background:var(--brass-hi);transition:width .36s ease}.choice-score b{font-family:var(--display);font-size:18px;font-weight: 560;color:var(--brass-hi)}.choice-score small{font-size:7px;color:rgba(255,255,255,.35)}
.generator-list{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.08);padding:13px 0 6px;display:grid;gap:3px}.generator-list>div{display:grid;grid-template-columns:30px 1fr 28px;gap:8px;align-items:center;min-height:38px;padding:0 8px;border-radius:8px;color:rgba(255,255,255,.34);transition:.3s ease}.generator-list>div.fresh{background:rgba(229,189,131,.08);color:#fff;transform:translateX(3px)}.generator-list span{font-family:var(--display);font-size:10px;color:rgba(255,255,255,.28)}.generator-list b{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.generator-list i{font:normal 13px var(--display);text-align:right;color:#c7a57a}.generator-progress{position:relative;z-index:1;margin-top:auto;padding-top:16px}.generator-progress>div{height:3px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}.generator-progress>div i{display:block;width:var(--generator-progress,4.166%);height:100%;background:linear-gradient(90deg,#826342,var(--brass-hi));transition:width .36s ease}.generator-progress>span{display:block;margin-top:8px;text-align:right;font-size:8px;color:rgba(255,255,255,.36)}.generator-progress b{font-family:var(--display);font-size:13px;font-weight: 560;color:#d7b98f}.generator-foot{position:relative;z-index:1;display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid rgba(255,255,255,.08);margin-top:14px;padding-top:14px}.generator-foot>span{font-size:8px;color:rgba(255,255,255,.38)}.generator-foot>div{display:flex;gap:5px}.generator-foot button{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.025);color:rgba(255,255,255,.58);font-size:8px;padding:6px 7px;border-radius:6px;cursor:pointer}.generator-foot button:hover,.generator-foot button:focus-visible{color:#fff;border-color:rgba(229,189,131,.4);outline:none}.generator-foot button:focus-visible{box-shadow:0 0 0 2px rgba(229,189,131,.18)}


.demo { padding: 132px 0; background: #d9e2e5; }
.demo-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(560px, 1.2fr); gap: 72px; align-items: center; }
.demo-copy h2 { max-width: 11ch; }
.demo-copy > p:not(.kicker) { max-width: 56ch; color: #47535a; line-height: 1.7; font-size: 1.03rem; }
.demo-note { display: grid; grid-template-columns: 26px 1fr; gap: 12px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(11,28,43,.17); color: #59666d; }
.demo-note span { font-family: var(--display); font-size: 1.6rem; color: var(--navy-2); }
.demo-note p { margin: 0; font-size: .82rem; line-height: 1.55; }

.product-shell {
  position: relative;
  color: #ecf3f4;
  background: #0d202f;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.product-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.055), transparent 42%);
}
.product-topbar, .profile-row, .strategy-control, .list-heading, .product-footer { position: relative; z-index: 1; }
.product-topbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px solid rgba(255,255,255,.09); }
.product-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 10px; border-radius: 10px; background: var(--ivory); color: var(--navy); font-weight: 900; letter-spacing: -.04em; }
.product-title { font-weight: 750; }
.product-status { display: inline-flex; align-items: center; gap: 8px; font-size: .7rem; color: rgba(236,243,244,.68); }
.product-status i { width: 7px; height: 7px; border-radius: 50%; background: #79c79c; box-shadow: 0 0 0 4px rgba(121,199,156,.12); }
.profile-row { display: flex; justify-content: space-between; gap: 20px; padding: 26px 28px 20px; }
.profile-row > div { display: grid; gap: 7px; }
.profile-row strong { font-family: var(--display); font-size: 1.65rem; font-weight: 560; }
.fit-score { text-align: right; }
.ui-label { display: block; color: rgba(236,243,244,.48); font-size: .67rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; }
.strategy-control { padding: 10px 28px 26px; }
.strategy-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 9px; padding: 5px; border-radius: 15px; background: rgba(255,255,255,.055); }
.strategy-buttons button { min-height: 40px; border: 0; border-radius: 11px; background: transparent; color: rgba(236,243,244,.58); font-size: .76rem; font-weight: 750; cursor: pointer; transition: background 180ms ease, color 180ms ease, transform 180ms ease; }
.strategy-buttons button:hover { color: white; }
.strategy-buttons button.is-active { background: var(--ivory); color: var(--navy); }
.list-heading { display: flex; justify-content: space-between; align-items: end; padding: 0 28px 12px; }
.list-heading strong { display: block; margin-top: 5px; font-size: .92rem; }
.list-hint { font-size: .66rem; color: rgba(236,243,244,.35); }
.preference-list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0 18px 4px; }
.preference-row {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 92px;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 10px;
  border-top: 1px solid rgba(255,255,255,.075);
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}
.preference-row:first-child { border-top: 0; }
.preference-row:hover, .preference-row:focus-within { background: rgba(255,255,255,.035); border-radius: 14px; }
.row-index { font-family: var(--display); font-size: 1.45rem; color: rgba(236,243,244,.33); }
.row-copy { min-width: 0; }
.row-copy strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; }
.row-copy span { display: block; margin-top: 5px; color: rgba(236,243,244,.47); font-size: .7rem; }
.row-fit { display: grid; gap: 6px; }
.row-fit span { justify-self: end; font-size: .69rem; color: rgba(236,243,244,.6); }
.row-fit i { display: block; width: 100%; height: 5px; border-radius: 6px; background: rgba(255,255,255,.09); overflow: hidden; }
.row-fit i::after { content:""; display:block; height:100%; width:var(--fit); background: #d7b780; border-radius:inherit; }
.product-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 28px 22px; border-top: 1px solid rgba(255,255,255,.09); color: rgba(236,243,244,.52); font-size: .68rem; }
.product-footer button { border: 0; background: transparent; color: var(--ivory); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.explain-panel { margin: 0 18px 18px; padding: 18px 20px; border-radius: 18px; color: #24333d; background: var(--ivory); }
.explain-panel strong { font-family: var(--display); font-size: 1.2rem; }
.explain-panel p { margin: 7px 0 0; font-size: .78rem; line-height: 1.55; color: #56616a; }

.proof-scene { min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: white; background: #070e15; }
.proof-scene__image, .proof-scene__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.proof-scene__image { object-fit: cover; object-position: center 55%; }
.proof-scene__veil { background: linear-gradient(0deg, rgba(4,10,15,.93) 0%, rgba(4,10,15,.3) 62%, rgba(4,10,15,.12) 100%); }
.proof-scene__content { position: relative; z-index: 1; padding-bottom: 90px; }
.proof-scene h2 { margin: 0; max-width: 12ch; font-family: var(--display); font-size: clamp(3.7rem, 7vw, 8rem); font-weight: 560; line-height: .9; letter-spacing: -.06em; text-wrap: balance; }
.proof-scene__content > p:last-child { max-width: 56ch; margin: 24px 0 0; color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.65; }

.method { padding: clamp(44px, 7.5svh, 130px) 0; background: var(--paper); }
.method-layout { display: grid; grid-template-columns: .94fr 1.06fr; gap: 88px; align-items: start; }
.method-visual { position: sticky; top: 96px; margin: 0;
  /* Must subtract the section's real padding, which is now fluid; the old
     hardcoded 132px made this taller than the space available. */
  height: calc(100svh - 2 * clamp(44px, 7.5svh, 130px)); min-height: 460px; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy); box-shadow: 0 18px 50px rgba(18,30,37,.14); }
.method-visual img { width: 100%; height: 100%; object-fit: cover; }
.method-visual::after { content:""; position:absolute; inset:auto 0 0; height:34%; background:linear-gradient(0deg,rgba(7,17,27,.8),transparent); pointer-events:none; }
.method-visual figcaption { position:absolute; z-index:1; left:24px; right:24px; bottom:22px; color:rgba(255,255,255,.78); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.method-copy { padding: 0 0 clamp(24px, 4svh, 80px); }
.method-copy .section-heading h2 { max-width: 12ch; }
.steps { list-style: none; margin: 90px 0 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: 28px; padding: 36px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps > li > span { font-family: var(--display); font-size: 1.7rem; color: #8e7655; }
.steps h3 { margin: 0; font-family: var(--display); font-size: 2rem; font-weight: 560; letter-spacing: -.025em; }
.steps p { max-width: 48ch; margin: 10px 0 0; color: var(--muted); line-height: 1.65; }

.cutoff { padding: clamp(44px, 7svh, 120px) 0 clamp(48px, 7.8svh, 135px); background: #152633; color: white; overflow: hidden; }
.cutoff-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.cutoff .kicker { color: #c6b18e; }
.cutoff-copy h2 { max-width: 12ch; }
.cutoff-copy p:last-child { max-width: 56ch; color: rgba(255,255,255,.62); line-height: 1.7; }

.final-cta { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; color:white; background:var(--navy); }
.final-cta > img, .final-cta__veil { position:absolute; inset:0; width:100%; height:100%; }
.final-cta > img { object-fit:cover; object-position:center center; }
.final-cta__veil { background:linear-gradient(90deg,rgba(5,14,22,.87) 0%,rgba(5,14,22,.44) 48%,rgba(5,14,22,.08) 80%); }
.final-cta__content { position:relative; z-index:1; }
.final-cta h2 { margin:0 0 30px; max-width:11ch; font-family:var(--display); font-size:clamp(4rem,7.5vw,8rem); line-height:.88; letter-spacing:-.06em; font-weight: 560; text-wrap:balance; }

.site-footer { padding: 34px 0; background:#0a151e; color:rgba(255,255,255,.55); }
.footer-inner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px; }
.brand--footer { color:white; }
.footer-inner p { margin:0; font-size:.75rem; }
.footer-inner > span { font-size:.72rem; }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 700ms cubic-bezier(.2,.75,.2,1), transform 700ms cubic-bezier(.2,.75,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }@media (max-width: 1050px) {

  :root { --shell: min(100% - 44px, 920px); }
  .site-header { padding-inline: 22px; }
  .product-heading { grid-template-columns: 1fr; gap: 22px; }
  .product-heading p { max-width: 650px; }
  .product-demo-grid { grid-template-columns: 1fr; }
  .live-generator { max-width: 560px; min-height: 560px; }
  .demo-layout, .cutoff-layout { grid-template-columns: 1fr; gap: 56px; }
  .demo-copy h2, .cutoff-copy h2 { max-width: 14ch; }
  .method-layout { grid-template-columns: .85fr 1.15fr; gap: 48px; }
  .results-grid { grid-template-columns: 1fr 1fr; }
  .metric:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding-left: 0; min-height: 250px; }
}
@media (max-width: 780px) {

  :root { --shell: calc(100vw - 32px); }
  .site-header { height: 68px; padding-inline: 16px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; color: currentColor; cursor: pointer; font-size: .78rem; font-weight: 750; }
  .menu-toggle__lines { width: 24px; height: 18px; display:grid; align-content:center; gap:5px; }
  .menu-toggle__lines i { height: 1px; width:100%; background: currentColor; transition: transform 180ms ease; }
  .site-nav { position: fixed; inset: 68px 0 auto; height: calc(100svh - 68px); display:flex; flex-direction:column; align-items:stretch; gap:0; padding: 28px 18px 40px; background: rgba(241,234,223,.98); color:var(--ink); transform:translateY(-110%); opacity:0; pointer-events:none; transition:transform 280ms cubic-bezier(.2,.75,.2,1),opacity 180ms ease; }
  .site-nav.is-open { transform:translateY(0); opacity:1; pointer-events:auto; }
  .site-nav > a { padding: 18px 6px; border-bottom:1px solid var(--line); font-family:var(--display); font-size:1.7rem; font-weight: 560; }
  .site-nav .nav-cta { margin-top:22px; padding:15px 16px; border:0; border-radius:14px; background:var(--navy); color:white; font-family:var(--sans); font-size:.9rem; text-align:center; }
  .menu-open .menu-toggle__lines i:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-open .menu-toggle__lines i:last-child { transform: translateY(-3px) rotate(-45deg); }

  .hero-inner { align-items:flex-start; padding-top: 23svh; padding-bottom: 120px; }
  /* Only re-aim the framing here; the overscan must stay in step with the
     base rule or the opaque layer's bottom edge enters frame at the end
     of the pin. */
  .hero-stage { left: 57%; }
  .hero-scrim { background:linear-gradient(0deg,rgba(6,15,23,.74) 0%,rgba(6,15,23,.34) 58%,rgba(6,15,23,.12) 100%); }
  .hero-copy { width:100%; margin:0; }
  .hero h1 { max-width:9ch; font-size:clamp(3.9rem,17vw,6.6rem); }
  .hero-lede { max-width: 36ch; font-size:.98rem; line-height:1.58; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }
  .hero-proof { right:16px; left:16px; width:auto; bottom:32px; grid-template-columns:auto 1fr; }
  .scroll-cue { display:none; }

  .results { padding: 88px 0 78px; }
  .section-heading h2, .demo-copy h2, .cutoff-copy h2 { font-size:clamp(2.9rem,12vw,4.8rem); }
  .results-grid { grid-template-columns:1fr; margin-top:52px; }
  .metric, .metric + .metric, .metric:last-child { grid-column:auto; min-height:230px; padding:28px 0; border-left:0; border-top:1px solid var(--line); }
  .metric:first-child { border-top:0; }
  .metric strong, .metric:nth-child(2) strong { font-size:clamp(4.8rem,22vw,7.2rem); }



  .product-section { padding: 90px 0; }
  .product-heading { margin-bottom: 36px; }
  .product-heading h2 { font-size: clamp(42px, 12vw, 58px); }
  .product-heading p { font-size: 13px; }
  .product-demo-grid { gap: 12px; }
  .app-window { border-radius: 18px; }
  .app-window-bar { grid-template-columns: 56px 1fr auto; padding-inline: 10px; }
  .app-window-bar > span { font-size: 7px; }
  .app-ui { grid-template-columns: 1fr; min-height: auto; }
  .app-sidebar { display: none; }
  .app-workspace { padding: 15px; }
  .app-workspace-head { align-items: start; }
  .app-screen-actions span { display: none; }
  .app-summary-row { grid-template-columns: 1fr 1fr; }
  .app-summary-row > div:last-child { grid-column: 1 / -1; min-height: 70px; }
  .app-list-head, .app-list-row { grid-template-columns: 26px minmax(140px,1fr) 42px; }
  .app-list-head span:nth-child(3), .app-list-head span:nth-child(4), .app-list-row > span:nth-child(3), .app-list-row > i { display: none; }
  .app-list-row { min-height: 52px; }
  .app-explain-card { grid-template-columns: 1fr; }
  .app-explain-card > div { grid-column: 1; }
  .app-window-caption { height: auto; min-height: 44px; align-items: flex-start; flex-direction: column; padding: 10px 12px; gap: 2px; }
  .live-generator { max-width: none; min-height: 540px; border-radius: 18px; padding: 16px; }
  .generator-core { grid-template-columns: 78px 1fr; gap: 14px; }
  .number-window { height: 156px; }
  .number-window::after { top: 52px; height: 52px; }
  .number-track { transform: translateY(var(--number-offset-mobile,52px)); }
  .number-track span { height: 52px; font-size: 24px; }
  .generator-choice > strong { font-size: 23px; }
  .generator-list > div { min-height: 36px; }

  .demo { padding:90px 0; }
  .demo-layout { gap:40px; }
  .product-shell { border-radius:24px; }
  .product-topbar { padding:16px; }
  .profile-row { padding:22px 18px 16px; }
  .strategy-control { padding:8px 18px 20px; overflow-x:auto; }
  .strategy-buttons { min-width: 430px; }
  .list-heading { padding-inline:18px; }
  .preference-list { padding-inline:10px; }
  .preference-row { grid-template-columns:30px minmax(0,1fr) 70px; min-height:68px; gap:8px; padding-inline:8px; }
  .row-copy strong { font-size:.78rem; }
  .product-footer { padding:0 0 0; }

  .proof-scene { min-height: 100svh; }
  .proof-scene__image { object-position: 61% center; }
  .proof-scene__content { padding-bottom:62px; }
  .proof-scene h2 { font-size:clamp(3.6rem,15vw,6rem); }

  .method { padding:90px 0; }
  .method-layout { grid-template-columns:1fr; gap:52px; }
  .method-visual { position:relative; top:auto; height: 68svh; min-height: 520px; }
  .method-copy { padding:0; }
  .steps { margin-top:54px; }
  .steps li { grid-template-columns:44px 1fr; gap:16px; }
  .steps h3 { font-size:1.7rem; }

  .cutoff { padding:90px 0; }
  .cutoff-layout { gap:48px; }

  .final-cta { min-height:100svh; }
  /* A phone sees only ~26% of a 16:9 source under cover, so this decides
     which quarter of the painting is on screen. Aimed at the figures. */
  /* A phone sees only ~26% of a 16:9 source under cover, and the height fits
     exactly, so object-position can pan horizontally but not vertically.
     Overflowing the height instead gives the crop somewhere to go, dropping
     the figure clear of the headline and the button. */
  .final-cta > img {
    height: 130%;
    top: 0;
    bottom: auto;
    object-position: 76% center;
  }
  .final-cta__veil { background:linear-gradient(0deg,rgba(5,14,22,.83),rgba(5,14,22,.22)); }
  .final-cta h2 { font-size:clamp(3.8rem,15vw,6rem); }

  .footer-inner { grid-template-columns:1fr; gap:2px; align-items:start; }
}
@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  .hero-layer { transform:none !important; }
  .hero-pin { height:auto !important; }
  .hero { position:static !important; }
  .hero-inner, .scroll-cue { opacity:1 !important; transform:none !important; }
  [data-reveal] { opacity:1; transform:none; }
}


/* =========================================================
   PRODUCTION BRAND ASSETS + PRODUCT DEMO TRANSPLANT
   ========================================================= */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.brand--mark { align-items: center; }
.brand-logo { display: block; }
.brand-logo--mark { width: 38px; height: auto; filter: brightness(0) invert(1); transition: filter 220ms ease; }
.site-header.is-scrolled .brand-logo--mark { filter: none; }
.brand-logo--wordmark { width: 118px; height: auto; filter: brightness(0) invert(1); }

.product-production-demo {
  --accent: #d7b780;
  --foreground: #f4f0e9;
  --muted-foreground: rgba(236, 243, 244, 0.48);
  --glass-bg: #0d202f;
  --glass-bg-soft: #132b3d;
  --glass-bg-strong: #0a1925;
  --glass-border-strong: rgba(255,255,255,.18);
  --glass-shadow-soft: 0 36px 96px rgba(0,0,0,.3);
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 30px;
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: 0 42px 120px rgba(0,0,0,.24);
}
.product-demo-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 4px 7px 16px;
}
.product-demo-brand__lockup { display: flex; align-items: center; gap: 14px; min-width: 0; }
.product-demo-brand__lockup img { width: 128px; height: auto; filter: brightness(0) invert(1); }
.product-demo-brand__lockup span,
.product-demo-brand > p {
  margin: 0;
  color: rgba(255,255,255,.5);
  font-size: .7rem;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.product-demo-brand > p { text-align: right; }
.product-demo-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 8px 2px;
  color: rgba(255,255,255,.42);
  font: 700 .64rem/1.3 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.product-demo-caption i { width: 26px; height: 1px; background: rgba(215,183,128,.36); }

.product-production-demo .landing-hero__demo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1.28 / 1;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
}
.product-production-demo .landing-viz-card {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,18,27,.42);
}
.product-production-demo .landing-hero-demo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 1vw, 14px);
  padding: clamp(16px, 1.65vw, 24px);
  border-radius: inherit;
  background:
    radial-gradient(78% 88% at 10% 0%, color-mix(in oklab, white 12%, transparent) 0%, transparent 58%),
    radial-gradient(74% 76% at 72% 24%, color-mix(in oklab, var(--accent) 13%, transparent) 0%, transparent 66%),
    linear-gradient(145deg, color-mix(in oklab, var(--glass-bg) 88%, transparent), color-mix(in oklab, var(--glass-bg-soft) 70%, transparent));
  border: 1px solid color-mix(in oklab, var(--glass-border-strong) 58%, var(--accent) 15%);
  box-shadow: var(--glass-shadow-soft), inset 0 1px 0 color-mix(in oklab, white 13%, transparent);
}
.product-production-demo .landing-hero-demo::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(color-mix(in oklab, var(--glass-border-strong) 32%, transparent), color-mix(in oklab, var(--glass-border-strong) 32%, transparent)) 0 38% / 100% 1px no-repeat,
    radial-gradient(circle, color-mix(in oklab, var(--accent) 25%, transparent) 1px, transparent 1.7px) 28px 28px / 20px 20px;
  opacity: 0.26;
}
.product-production-demo .landing-hero-demo > * { position: relative; z-index: 1; }
.product-production-demo .landing-hero-demo__form {
  display: grid;
  grid-template-columns: minmax(118px, .42fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.product-production-demo .landing-hero-demo__field { display: grid; gap: 5px; }
.product-production-demo .landing-hero-demo__field label {
  font-family: var(--font-mono);
  font-size: clamp(.56rem, .65vw, .68rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  font-weight: 700;
}
.product-production-demo .landing-hero-demo__field input {
  width: 100%;
  min-height: 36px;
  padding: 8px 11px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--accent) 46%, var(--glass-border-strong));
  background: color-mix(in oklab, var(--glass-bg-strong) 74%, transparent);
  color: color-mix(in oklab, var(--foreground) 88%, white 5%);
  font: 700 clamp(.72rem, .88vw, .92rem) var(--font-mono);
  box-shadow: 0 0 22px color-mix(in oklab, var(--accent) 13%, transparent), inset 0 1px 0 color-mix(in oklab, white 10%, transparent);
  animation: productionHeroInput var(--hero-demo-control-cycle, 15s) ease-in-out var(--hero-demo-control-delay, .95s) infinite;
}
.product-production-demo .landing-hero-demo__chips { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.product-production-demo .landing-hero-demo__chip,
.product-production-demo .landing-hero-demo__submit {
  border: 1px solid color-mix(in oklab, var(--glass-border-strong) 54%, transparent);
  color: color-mix(in oklab, var(--foreground) 78%, var(--muted-foreground));
  background:
    radial-gradient(120% 120% at 28% 0%, color-mix(in oklab, white 12%, transparent) 0%, transparent 62%),
    color-mix(in oklab, var(--glass-bg-soft) 74%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 9%, transparent);
}
.product-production-demo .landing-hero-demo__chip {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: clamp(.64rem, .76vw, .78rem);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(7px) scale(.96);
  animation: productionHeroChip var(--hero-demo-control-cycle, 15s) cubic-bezier(.22, 1, .36, 1) infinite;
}
.product-production-demo .landing-hero-demo__chip:nth-child(1) { animation-delay: var(--hero-demo-chip-1-delay, .55s); }
.product-production-demo .landing-hero-demo__chip:nth-child(2) { animation-delay: var(--hero-demo-chip-2-delay, .95s); }
.product-production-demo .landing-hero-demo__chip:nth-child(3) { animation-delay: var(--hero-demo-chip-3-delay, 1.35s); }
.product-production-demo .landing-hero-demo__chip::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--accent) 68%, white 10%);
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 42%, transparent);
}
.product-production-demo .landing-hero-demo__submit {
  position: relative;
  min-height: 36px;
  min-width: 126px;
  overflow: hidden;
  border-radius: 12px;
  padding: 8px 14px;
  color: color-mix(in oklab, var(--foreground) 88%, white 5%);
  font-weight: 600;
  animation: productionHeroInput var(--hero-demo-control-cycle, 15s) ease-in-out var(--hero-demo-control-delay, .95s) infinite;
}
.product-production-demo .landing-hero-demo__submit span {
  position: absolute;
  inset: auto 10px 6px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 80%, white 10%);
  box-shadow: 0 0 14px color-mix(in oklab, var(--accent) 60%, transparent);
  transform-origin: left;
  animation: productionHeroProgress var(--hero-demo-control-cycle, 15s) ease-in-out var(--hero-demo-control-delay, .95s) infinite;
}
.product-production-demo .landing-hero-demo__results {
  min-width: 0;
  display: grid;
  grid-template-rows: 36px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--glass-border-strong) 48%, transparent);
  background:
    radial-gradient(70% 68% at 24% 0%, color-mix(in oklab, white 8%, transparent) 0%, transparent 65%),
    linear-gradient(155deg, color-mix(in oklab, var(--glass-bg-strong) 72%, transparent), color-mix(in oklab, var(--glass-bg-soft) 54%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 9%, transparent);
}
.product-production-demo .landing-hero-demo__head,
.product-production-demo .landing-hero-demo__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 58px 70px;
  align-items: center;
  column-gap: 10px;
  padding-inline: clamp(14px, 1.3vw, 20px);
}
.product-production-demo .landing-hero-demo__head {
  height: 36px;
  font-family: var(--font-mono);
  font-size: clamp(.52rem, .61vw, .64rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-bottom: 1px solid color-mix(in oklab, var(--glass-border-strong) 42%, transparent);
}
.product-production-demo .landing-hero-demo__viewport { min-height: 0; overflow: hidden; }
.product-production-demo .landing-hero-demo__rows {
  display: grid;
  align-content: start;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .42s ease, transform .42s ease;
  will-change: transform;
}
.product-production-demo .landing-hero-demo__rows.is-visible { opacity: 1; transform: translateY(0); }
.product-production-demo .landing-hero-demo__rows.is-scrolling { animation: productionHeroRowsScroll 15s ease-in-out infinite; }
.product-production-demo .landing-hero-demo__row {
  min-height: 46px;
  border-top: 1px solid color-mix(in oklab, var(--glass-border-strong) 32%, transparent);
  opacity: 0;
  transform: translateY(9px);
}
.product-production-demo .landing-hero-demo__rows.is-generated .landing-hero-demo__row {
  animation: productionHeroRowGenerate .46s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--row-index, 0) * .055s);
}
.product-production-demo .landing-hero-demo__rank,
.product-production-demo .landing-hero-demo__score {
  font-family: var(--font-mono);
  color: color-mix(in oklab, var(--foreground) 84%, white 5%);
}
.product-production-demo .landing-hero-demo__rank { font-size: clamp(.82rem, .95vw, 1rem); }
.product-production-demo .landing-hero-demo__program { display: grid; min-width: 0; gap: 3px; }
.product-production-demo .landing-hero-demo__program strong,
.product-production-demo .landing-hero-demo__program em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-production-demo .landing-hero-demo__program strong { font-size: clamp(.72rem, .86vw, .92rem); font-weight: 600; }
.product-production-demo .landing-hero-demo__program em { font: normal clamp(.55rem, .64vw, .68rem) var(--font-mono); color: var(--muted-foreground); }
.product-production-demo .landing-hero-demo__city,
.product-production-demo .landing-hero-demo__score { font-size: clamp(.64rem, .74vw, .78rem); color: color-mix(in oklab, var(--foreground) 72%, var(--muted-foreground)); }
.product-production-demo .landing-hero-demo__score { color: color-mix(in oklab, var(--foreground) 88%, white 5%); }

.product-production-demo:not(.is-running) .landing-hero-demo__field input,
.product-production-demo:not(.is-running) .landing-hero-demo__chip,
.product-production-demo:not(.is-running) .landing-hero-demo__submit,
.product-production-demo:not(.is-running) .landing-hero-demo__submit span,
.product-production-demo:not(.is-running) .landing-hero-demo__rows.is-scrolling { animation-play-state: paused; }

/* =========================================================
   DATA SCOPE — product scale without another simulation
   ========================================================= */
.data-scope {
  padding: clamp(44px, 7.6svh, 132px) 0;
  background: #d9e2e5;
  overflow: hidden;
}
.data-scope__layout { display: grid; gap: 64px; }
.data-scope__intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, .5fr);
  column-gap: 70px;
  align-items: end;
}
.data-scope__intro .kicker { grid-column: 1 / -1; }
.data-scope__intro h2 {
  margin: 0;
  max-width: 12ch;
  font-family: var(--display);
  font-size: clamp(3rem, 5vw, 5.8rem);
  font-weight: 560;
  line-height: .96;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.data-scope__intro h2 em { font-weight: 400; color: #7f6044; }
.data-scope__intro > p:last-child {
  max-width: 48ch;
  margin: 0 0 8px;
  color: #4e5b63;
  line-height: 1.72;
}

.data-scope__field {
  position: relative;
  padding: 26px 30px 22px;
  border-radius: 34px;
  color: #eef3f3;
  background: #0d202f;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 36px 100px rgba(24,39,49,.22);
  overflow: hidden;
}
.data-scope__field::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(85% 72% at 5% 0%, rgba(255,255,255,.07), transparent 63%),
    radial-gradient(65% 65% at 98% 100%, rgba(215,183,128,.08), transparent 68%);
}
.data-scope__field::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .26;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}
.data-scope__field > * { position: relative; z-index: 1; }
.data-scope__topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.38);
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.data-scope__brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .12em; }
.data-scope__brand img { width: 29px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
.data-scope__stat {
  display: grid;
  align-items: center;
  min-height: 185px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.data-scope__stat--universities,
.data-scope__stat--history { grid-template-columns: minmax(0, 1.35fr) minmax(180px, .65fr); }
.data-scope__stat--choices { grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); }
.data-scope__stat strong {
  display: flex;
  align-items: flex-start;
  font-family: var(--display);
  font-size: clamp(5.5rem, 10.7vw, 10.8rem);
  font-weight: 560;
  line-height: .75;
  letter-spacing: -.075em;
  color: #f4ead9;
}
.data-scope__stat strong span {
  margin: .02em 0 0 .02em;
  color: #d7b780;
  font-size: .34em;
  letter-spacing: -.03em;
}
.data-scope__stat--choices strong { justify-self: end; text-align: right; }
.data-scope__stat > div { display: flex; align-items: baseline; gap: 14px; }
.data-scope__stat--choices > div { justify-self: start; }
.data-scope__stat--universities > div,
.data-scope__stat--history > div { justify-self: end; }
.data-scope__index {
  color: rgba(255,255,255,.25);
  font: 400 1.3rem/1 var(--display);
}
.data-scope__stat p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 650;
  letter-spacing: -.02em;
}
.data-scope__footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-top: 19px;
  color: rgba(255,255,255,.3);
  font-size: .61rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}@media (max-width: 1050px) {

  .product-production-demo { max-width: 900px; }
  .data-scope__intro { grid-template-columns: 1fr; row-gap: 24px; }
  .data-scope__intro h2 { max-width: 13ch; }
  .data-scope__intro > p:last-child { max-width: 58ch; }
}
@media (max-width: 780px) {

  .brand-logo--mark { width: 32px; }
  .product-production-demo { padding: 11px; border-radius: 22px; }
  .product-demo-brand { align-items: flex-start; padding: 4px 4px 12px; }
  .product-demo-brand__lockup { display: grid; gap: 6px; }
  .product-demo-brand__lockup img { width: 105px; }
  .product-demo-brand > p { display: none; }
  .product-demo-caption { gap: 7px; font-size: .53rem; }
  .product-demo-caption i { width: 10px; }
  .product-production-demo .landing-hero__demo-wrap { aspect-ratio: .86 / 1; border-radius: 18px; }
  .product-production-demo .landing-hero-demo { padding: 14px; }
  .product-production-demo .landing-hero-demo__form { grid-template-columns: 1fr; align-items: stretch; }
  .product-production-demo .landing-hero-demo__submit { min-width: 0; }
  .product-production-demo .landing-hero-demo__head,
  .product-production-demo .landing-hero-demo__row { grid-template-columns: 30px minmax(0,1fr) 58px; }
  .product-production-demo .landing-hero-demo__head span:nth-child(3),
  .product-production-demo .landing-hero-demo__city { display: none; }

  .data-scope { padding: 90px 0; }
  .data-scope__layout { gap: 42px; }
  .data-scope__intro h2 { font-size: clamp(2.9rem, 12vw, 4.8rem); }
  .data-scope__field { padding: 18px 18px 16px; border-radius: 24px; }
  .data-scope__topline { align-items: flex-start; }
  .data-scope__topline > span { display: none; }
  .data-scope__stat { min-height: 145px; }
  .data-scope__stat--universities,
  .data-scope__stat--history,
  .data-scope__stat--choices { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .data-scope__stat--choices > div { order: 2; }
  .data-scope__stat--universities > div,
  .data-scope__stat--history > div,
  .data-scope__stat--choices > div { justify-self: start; }
  .data-scope__stat--choices strong { justify-self: start; text-align: left; }
  .data-scope__stat strong { font-size: clamp(5.2rem, 24vw, 8rem); }
  .data-scope__footer { flex-direction: column; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {

  .product-production-demo .landing-hero-demo__chip { opacity: 1; transform: none; }
  .product-production-demo .landing-hero-demo__rows { opacity: 1; transform: none; }
  .product-production-demo .landing-hero-demo__row { opacity: 1; transform: none; }
}


/* Production-inspired public banner + footer — recolored for this landing */
.landing-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 1px clamp(16px, 2vw, 24px);
  color: var(--ivory);
  background:
    linear-gradient(130deg,
      rgba(7, 20, 31, 0.74) 0%,
      rgba(11, 28, 43, 0.82) 48%,
      rgba(19, 47, 70, 0.72) 100%);
  border-bottom: 1px solid rgba(255, 247, 234, 0.16);
  box-shadow: 0 12px 34px rgba(3, 10, 16, 0.12);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  isolation: isolate;
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}


.landing-header__inner {
  width: min(1600px, 100%);
  min-height: 48px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.landing-header__logo {
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}

.landing-header__logo-img {
  display: block;
  width: auto;
  height: 30px;
  filter: brightness(0) invert(1) sepia(.08);
  transition: filter 220ms ease, opacity 180ms ease;
}

.landing-header__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  line-height: 1;
}

.landing-header__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255, 247, 234, 0.72);
  font-size: 0.875rem;
  line-height: 1;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, gap 180ms ease;
}

.landing-header__link:hover {
  color: var(--ivory);
  background: rgba(255, 247, 234, 0.09);
}

.landing-header__link--arrow { color: rgba(255, 247, 234, 0.9); }
.landing-header__link--arrow:hover { gap: 10px; color: rgba(255, 247, 234, 1); }
.landing-header__link--arrow svg { width: 14px; height: 14px; }
.landing-header__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


.landing-footer {
  padding: 32px clamp(16px, 3vw, 48px);
  color: rgba(255, 247, 234, 0.58);
  background:
    linear-gradient(112deg, #081721 0%, var(--navy) 58%, #102a3d 100%);
  border-top: 1px solid rgba(255, 247, 234, 0.12);
}

.landing-footer__inner {
  width: min(1200px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.landing-footer__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 0.75rem;
}

.landing-footer__links > span {
  color: rgba(255, 247, 234, 0.38);
}

.landing-footer__link {
  color: rgba(255, 247, 234, 0.68);
  text-decoration: none;
  transition: color 150ms ease;
}

.landing-footer__link:hover { color: #e0bd86; }
.landing-footer__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}@media (max-width: 720px) {

  .landing-header__inner { min-height: 48px; }
  .landing-header__nav { gap: 10px; }
  /* The arrow link is the only route to the product; on phones it becomes the
     primary pill rather than being hidden. Its arrow glyph is dropped so the
     three nav items fit a 360px viewport. */
  .landing-header__link--arrow {
    color: var(--navy);
    background: rgba(255, 247, 234, 0.94);
    font-weight: 600;
    padding-inline: 12px;
  }
  .landing-header__link--arrow:hover,
  .landing-header__link--arrow:focus-visible {
    color: var(--navy);
    background: var(--ivory);
  }
  .landing-header__link--arrow svg { display: none; }
  .landing-header__link { padding-inline: 8px; font-size: 0.8rem; }
  .landing-footer { padding-block: 26px; }
  .landing-footer__links { gap: 14px 20px; }
  .landing-footer__links > span { flex-basis: 100%; }
}


/* =========================================================
   ITALIC ACCENT
   ========================================================= */
/* Playfair is reserved for the italic phrase inside display headings. Scoped to
   headings deliberately: the transplanted product demo also uses <em>, there for
   programme names, and those must stay in the UI face. */
/* Mixing a wider italic into a sans heading changes where lines break, so let
   the browser balance them rather than leaving a one-word last line. */
h1, h2 { text-wrap: balance; }

h1 em,
h2 em,
.brand-number {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
/* =========================================================
   SECTION HEIGHT
   ========================================================= */
/* These sections are sized by their content plus px padding, so on a tall
   display they stop well short of a screen - at 2160px tall the results
   section covered barely half of it. Hold at least one viewport and centre
   the content in it. Grid rather than flex so each .shell keeps its own
   width and margin-inline:auto instead of being shrunk as a flex item. */
.results,
.product-section,
.data-scope,
.method,
.cutoff {
  min-height: 100svh;
  display: grid;
  align-content: center;
}

/* =========================================================
   SHORT VIEWPORTS
   ========================================================= */
/* The product mockup and the data panel are fixed-size compositions, so on a
   laptop they push their sections past a screen no matter how much padding
   comes off. Scale them by display height. zoom rather than transform because
   it shrinks the space the element occupies, which is the whole point here.
   Guarded above the mobile breakpoint: phones are short too, but they already
   have their own layout and must not be scaled on top of it. */
@media (max-height: 1200px) and (min-width: 781px) {
  .product-production-demo { zoom: 0.74; }
  .data-scope__field { zoom: 0.78; }
  .steps { margin-top: clamp(24px, 4svh, 90px); }
  .method-copy .steps { zoom: 0.92; }
}
@media (max-height: 950px) and (min-width: 781px) {
  .product-production-demo { zoom: 0.575; }
  .data-scope__field { zoom: 0.64; }
  .method-copy .steps { zoom: 0.82; }
}

/* =========================================================
   CUTOFF CHART
   =========================================================
   Cumulative distribution from the 2026 backtest: what share of users landed
   within a given distance of the strongest result their own filters allowed.
   One series, so no legend - the caption names what is plotted. The mark hue is
   --gold rather than --brass-hi: it is the only brand gold that clears the
   chroma floor for a data mark, and still holds 6:1 on this surface. */
.cv-bar { fill: var(--gold); }
.cv-bar.is-key { fill: var(--brass-hi); }
.cv-bar:hover, .cv-bar.is-active { fill: var(--brass-hi); }

.cutoff-chart {
  margin: 0;
  padding: 28px 24px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
}

.cutoff-chart__label {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cutoff-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Recessive chrome: hairline, solid, one step off the surface. */
.cv-grid { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.cv-tick, .cv-axis { fill: rgba(255, 255, 255, 0.42); font-size: 11px; font-weight: 600; }
.cv-axis { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }

.cv-area { fill: var(--gold); opacity: 0.1; }
.cv-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* 2px ring in the surface colour so markers stay legible over the line. */
.cv-dot { fill: var(--gold); stroke: #152633; stroke-width: 2; }
.cv-dot.is-key { fill: var(--ivory); }

.cv-key-rule { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }

/* Values wear text tokens, never the series colour; the gold dot beside them
   carries the identity. */
/* The tooltip lands where the callout sits, so the callout steps aside. */
.cutoff-chart.is-probing .cv-callout { opacity: 0; }
.cv-callout { transition: opacity 140ms ease; }

.cv-callout__value { fill: var(--ivory); font-family: var(--display); font-size: 30px; font-weight: 560; letter-spacing: -0.03em; }
.cv-callout__note  { fill: rgba(255, 255, 255, 0.5); font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }

.cutoff-chart__source {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.68rem;
}

/* The table is the non-visual route to the same numbers. */
.cutoff-chart__table {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cutoff-chart { position: relative; }

.cv-dot { transition: r 120ms ease; cursor: pointer; }
.cv-dot.is-active { r: 6; }
.cv-dot:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }

.cv-tip {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #0d1a23;
  color: var(--ivory);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

@media (max-width: 780px) {
  .cutoff-chart { padding: 22px 16px 16px; }
  /* The tooltip lands where the callout sits, so the callout steps aside. */
.cutoff-chart.is-probing .cv-callout { opacity: 0; }
.cv-callout { transition: opacity 140ms ease; }

.cv-callout__value { font-size: 26px; }
}