/* Helioflux Agrivoltaic Studio — marketing site design system. Layers: v3 instrument, v6 journal, v7 observatory, v9 Helioflux brand.
   Near-black, monochrome, hairline structure. Colour is reserved for signal (--sunleaf) and for data
   (the studio's fixed data palette: energy, crop, water, money, cost, PAR ramp). No gradient text,
   no glow tiles, no tilted mockups. Every page loads this file; page rules live in the page. */

:root{
  color-scheme: dark;
  --page:#050608; --panel:#090b0f; --card:rgba(255,255,255,.015); --card-hover:rgba(255,255,255,.03);
  --raised:#0d1015; --inset:#07090c; --glass:rgba(4,5,6,.72);
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.12); --line-3:rgba(255,255,255,.2);
  --fill:rgba(255,255,255,.03); --fill-2:rgba(255,255,255,.06);
  --hi:none;
  --text:#eceef1; --text-2:#959ba6; --text-3:#626874; --text-4:#3c414a;
  --sunleaf:#3DBB7E; --sunleaf-hover:#c4ea6a; --sunleaf-dim:#6f9127; --sunleaf-glow:rgba(61,187,126,.18); --sunleaf-wash:rgba(61,187,126,.06); --on-sunleaf:#0b1206;
  --energy:#f5b83d; --crop:#6cc47c; --water:#4a9eda; --money:#a78bfa; --cost:#f07a7a;
  --par-0:#00224e; --par-1:#2a3f6e; --par-2:#555b6e; --par-3:#7c7b78; --par-4:#a59c74; --par-5:#d2c060; --par-6:#fee838;
  --fits:#35b87d; --conditional:#d99a33; --fails:#d9455e; --warn:#e0a84a; --info:#7aa7d9; --ok:#35b87d;
  --f-display:'Geist','Inter',system-ui,sans-serif;
  --f-body:'Geist','Inter',system-ui,sans-serif;
  --f-mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  --r-card:6px; --r-ctl:6px; --r-sm:4px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1); --dur:260ms;
  --max:1320px; --gut:clamp(18px,4vw,48px); --nav-h:60px;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="light"]){ color-scheme:dark } }
:root[data-theme="dark"]{ color-scheme:dark }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0; background:var(--page); color:var(--text); font:400 16px/1.6 var(--f-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; font-feature-settings:"ss01","cv11"}
img,svg,canvas,video{max-width:100%; display:block}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0; font-family:var(--f-display); font-weight:500; letter-spacing:-.035em; line-height:1.02; color:var(--text); text-wrap:balance}
:focus-visible{outline:1px solid var(--sunleaf); outline-offset:3px; border-radius:2px}
::selection{background:var(--sunleaf); color:var(--on-sunleaf)}
[hidden]{display:none!important}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--text); color:var(--page); padding:10px 14px; border-radius:4px; font-weight:600}
.skip:focus{left:12px}

/* film grain + top vignette, fixed — the only ambience */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.035), transparent 60%), var(--page)}
body::after{content:""; position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── layout ── */
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
.wrap > *, .split > *, .grid > *{min-width:0}
.section{padding:clamp(88px,12vw,168px) 0; position:relative}
.section--tight{padding:clamp(56px,7vw,96px) 0}
.section + .section{border-top:1px solid var(--line)}
.grid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.grid > *{background:var(--page)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(40px,6vw,96px); align-items:center}
.split--rev{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@media (max-width:980px){.split,.split--rev{grid-template-columns:minmax(0,1fr)}}

/* ── type ── */
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:500 11px/1.3 var(--f-mono); letter-spacing:.02em; text-transform:none; color:var(--text-3)}
.eyebrow::before{content:""; width:6px; height:6px; background:var(--sunleaf); box-shadow:0 0 10px var(--sunleaf-glow)}
.eyebrow--plain::before{display:none}
.display{font-size:clamp(48px,8.4vw,128px); line-height:.92; letter-spacing:-.055em; font-weight:500}
.h1{font-size:clamp(42px,6vw,88px); line-height:.96; letter-spacing:-.05em}
.h2{font-size:clamp(32px,4.2vw,60px); line-height:1; letter-spacing:-.045em}
.h3{font-size:clamp(20px,2vw,26px); letter-spacing:-.025em; line-height:1.2}
.lede{font-size:clamp(17px,1.35vw,19px); line-height:1.6; color:var(--text-2); max-width:58ch; letter-spacing:-.005em}
.muted{color:var(--text-2)} .faint{color:var(--text-3)}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.grad{color:var(--text-3)}          /* two-tone headlines: the second clause recedes */
.head{display:flex; flex-direction:column; gap:20px; margin-bottom:clamp(44px,6vw,72px); max-width:880px}
.head--center{align-items:flex-start; text-align:left}
.head--center .lede{margin-inline:0}

/* ── nav ── */
.nav{position:sticky; top:0; z-index:60; height:var(--nav-h); background:rgba(4,5,6,.6); backdrop-filter:saturate(140%) blur(18px); -webkit-backdrop-filter:saturate(140%) blur(18px); border-bottom:1px solid transparent; transition:border-color var(--dur), background var(--dur)}
.nav.is-stuck{border-bottom-color:var(--line); background:rgba(4,5,6,.82)}
.nav__in{max-width:var(--max); height:100%; margin:0 auto; padding:0 var(--gut); display:flex; align-items:center; gap:32px}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font:500 15px/1 var(--f-display); letter-spacing:-.02em; white-space:nowrap}
.brand__mark{width:22px; height:22px; display:grid; place-items:center}
.brand__mark svg{width:22px; height:22px}
.brand small{font:500 10px var(--f-mono); color:var(--text-3); letter-spacing:.08em; margin-left:2px}
.nav__links{display:flex; gap:2px}
.nav__links a{position:relative; padding:8px 12px; font:400 13.5px var(--f-body); color:var(--text-2); text-decoration:none; transition:color var(--dur)}
.nav__links a:hover{color:var(--text)}
.nav__links a[aria-current="page"]{color:var(--text)}
.nav__links a[aria-current="page"]::after{content:""; position:absolute; left:50%; bottom:-11px; width:4px; height:4px; margin-left:-2px; background:var(--sunleaf)}
.nav__cta{margin-left:auto; display:flex; gap:8px; align-items:center}
.nav__burger{display:none; width:44px; height:44px; border-radius:6px; border:1px solid var(--line-2); background:transparent; color:var(--text); cursor:pointer; place-items:center}
.drawer{display:none}
@media (max-width:1060px){
  .nav__links{display:none} .nav__burger{display:grid} .nav__cta .btn--ghost{display:none}
  .drawer{position:fixed; inset:var(--nav-h) 0 auto 0; z-index:59; background:rgba(4,5,6,.97); border-bottom:1px solid var(--line); padding:8px var(--gut) 24px; backdrop-filter:blur(18px)}
  .drawer.is-open{display:block}
  .drawer a{display:flex; justify-content:space-between; padding:16px 2px; border-bottom:1px solid var(--line); text-decoration:none; font:500 18px var(--f-display); letter-spacing:-.02em}
  .drawer a[aria-current="page"]{color:var(--sunleaf)}
}
@media (max-width:440px){ .nav__in{gap:12px} .nav__cta .btn--primary{padding:0 12px; font-size:13px; height:38px} }
@media (max-width:380px){ .nav__cta .btn--primary{display:none} }

/* ── buttons ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:44px; padding:0 18px; border-radius:var(--r-ctl); border:1px solid transparent; font:500 14px/1 var(--f-body); letter-spacing:-.005em; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background var(--dur), border-color var(--dur), color var(--dur), transform var(--dur) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--text); color:var(--page)}
.btn--primary:hover{background:#fff}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--line-3); background:var(--fill)}
.btn--lg{height:50px; padding:0 22px; font-size:15px}
.btn .arr{font-family:var(--f-mono); transition:transform var(--dur) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.link{display:inline-flex; align-items:center; gap:8px; color:var(--text); font:500 14px var(--f-body); text-decoration:none; border-bottom:1px solid var(--line-3); padding-bottom:2px; transition:border-color var(--dur)}
.link:hover{border-color:var(--sunleaf)}

/* ── tags ── */
.pill{display:inline-flex; align-items:center; gap:7px; height:22px; padding:0 8px; border-radius:3px; font:500 10.5px/1 var(--f-mono); letter-spacing:.02em; text-transform:none; border:1px solid var(--line-2); background:transparent; color:var(--text-2); white-space:nowrap}
.pill::before{content:""; width:5px; height:5px; background:var(--text-3)}
.pill--live::before{background:var(--sunleaf); box-shadow:0 0 8px var(--sunleaf-glow)}
.pill--build::before{background:var(--warn)}
.pill--low::before{background:var(--cost)}
.pill--info::before{background:var(--info)}
.pill--plain::before{display:none}
.chip{display:inline-flex; align-items:center; height:26px; padding:0 9px; border-radius:3px; border:1px solid var(--line); background:transparent; font:500 12px var(--f-mono); color:var(--text-2)}

/* ── panels (the old .card) ── */
.card{position:relative; display:flex; flex-direction:column; gap:12px; min-width:0; padding:28px; background:var(--page); border:1px solid var(--line); border-radius:var(--r-card); transition:background var(--dur), border-color var(--dur)}
.grid > .card{border:0; border-radius:0}
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity var(--dur);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.045), transparent 60%)}
.card:hover::after{opacity:1}
a.card{text-decoration:none}
a.card:hover{background:var(--card-hover)}
.card__icon{width:28px; height:28px; display:grid; place-items:center; color:var(--tone,var(--text-2)); border:1px solid var(--line-2); border-radius:4px; background:transparent}
.card__icon svg{width:15px; height:15px}
.card h3{font-size:19px; letter-spacing:-.025em; line-height:1.25; font-weight:500}
.card p{margin:0; color:var(--text-2); font-size:15px; line-height:1.6}
.card--glow{background:var(--page)}
[data-tone="energy"]{--tone:var(--energy)} [data-tone="crop"]{--tone:var(--crop)} [data-tone="water"]{--tone:var(--water)}
[data-tone="money"]{--tone:var(--money)} [data-tone="cost"]{--tone:var(--cost)} [data-tone="light"]{--tone:var(--par-5)}
[data-tone="compliance"]{--tone:var(--fits)} [data-tone="sunleaf"]{--tone:var(--sunleaf)} [data-tone="info"]{--tone:var(--info)}

/* metrics */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0; border-top:1px solid var(--line)}
.kpi{display:flex; flex-direction:column; gap:6px; padding:22px 20px 20px 0; border-bottom:1px solid var(--line)}
.kpi__label{font:500 10.5px/1.3 var(--f-mono); letter-spacing:.02em; text-transform:none; color:var(--text-3)}
.kpi__val{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.kpi__val b{font:400 clamp(30px,3.4vw,44px)/1 var(--f-display); letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.kpi__val span{font:500 12px var(--f-mono); color:var(--text-3)}
.kpi__sub{font-size:13px; color:var(--text-3)}

/* ── figures (real screenshots) ── */
.frame{position:relative; border:1px solid var(--line-2); border-radius:6px; overflow:hidden; background:var(--panel)}
.frame__in{overflow:hidden; background:var(--panel)}
.frame__bar{display:flex; align-items:center; gap:10px; height:32px; padding:0 14px; border-bottom:1px solid var(--line); font:500 10.5px var(--f-mono); letter-spacing:.08em; text-transform:none; color:var(--text-3)}
.frame__bar i{display:none}
.frame__bar span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.frame__bar::before{content:""; width:5px; height:5px; background:var(--sunleaf); flex:none}
.frame img{width:100%; height:auto; aspect-ratio:var(--ar,16/10); object-fit:cover; object-position:top left; background:var(--panel)}
.frame--tilt{transform:none}
.frame__glow{display:none}
.zoomable{cursor:zoom-in}
figcaption, .figcap{font:500 11px/1.5 var(--f-mono); letter-spacing:.06em; text-transform:none; color:var(--text-3)}

.lightbox{position:fixed; inset:0; z-index:90; display:none; place-items:center; padding:clamp(12px,4vw,48px); background:rgba(3,4,6,.94); backdrop-filter:blur(8px); cursor:zoom-out}
.lightbox.is-open{display:grid}
.lightbox img{max-width:min(1700px,100%); max-height:100%; border:1px solid var(--line-2); border-radius:4px}
.lightbox button{position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:6px; border:1px solid var(--line-2); background:var(--page); color:var(--text); font:400 20px var(--f-mono); cursor:pointer}

/* ── tabs ── */
.tabs{display:flex; gap:0; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none; height:44px; padding:0 16px; border:0; background:transparent; color:var(--text-3); font:500 12px var(--f-mono); letter-spacing:.08em; text-transform:none; cursor:pointer; position:relative; transition:color var(--dur)}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text)}
.tabs button[aria-selected="true"]::after{content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:1px; background:var(--sunleaf)}

/* ── tables ── */
.table-wrap{overflow-x:auto; border-top:1px solid var(--line-2)}
table.t{width:100%; border-collapse:collapse; min-width:720px; font-size:14px}
.t th,.t td{padding:16px 18px 16px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.t thead th{font:500 10.5px/1.3 var(--f-mono); letter-spacing:.02em; text-transform:none; color:var(--text-3)}
.t tbody tr:last-child td{border-bottom:0}
.t tr.is-us td{color:var(--text)}
.t tr.is-us td:first-child{box-shadow:inset 2px 0 0 var(--sunleaf); padding-left:14px}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; border:1px solid var(--text-4)}
.dot--yes{background:var(--text); border-color:var(--text)}
.dot--part{background:linear-gradient(90deg, var(--text) 50%, transparent 50%); border-color:var(--text)}
tr.is-us .dot--yes{background:var(--sunleaf); border-color:var(--sunleaf)}

/* ── lists ── */
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.ticks li{position:relative; display:block; padding-left:22px; color:var(--text-2); font-size:15px; line-height:1.55}
.ticks li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--sunleaf)}
.ticks b{color:var(--text); font-weight:500}

/* ── closing band ── */
.cta{position:relative; padding:clamp(56px,8vw,112px) 0 0; border-top:1px solid var(--line-2); text-align:left}
.cta h2{font-size:clamp(40px,6.4vw,96px); line-height:.95; letter-spacing:-.055em; max-width:14ch; margin:18px 0 22px}
.cta .lede{margin:0 0 32px}
.cta__btns{display:flex; gap:10px; flex-wrap:wrap}

/* ── footer ── */
.foot{border-top:1px solid var(--line); padding:64px 0 40px; margin-top:24px; color:var(--text-2); font-size:14px}
.foot__grid{display:grid; grid-template-columns:1.6fr repeat(3,minmax(0,1fr)); gap:32px}
@media (max-width:820px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot h4{font:500 10.5px var(--f-mono); letter-spacing:.02em; text-transform:none; color:var(--text-3); margin-bottom:14px}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.foot a{text-decoration:none; color:var(--text-2)} .foot a:hover{color:var(--text)}
.foot__base{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:20px; border-top:1px solid var(--line); font:500 11px var(--f-mono); letter-spacing:.04em; color:var(--text-3)}
details.sources summary{cursor:pointer; color:var(--text-2)}
details.sources ul{margin-top:10px; font-size:12px; color:var(--text-3); list-style:none; padding:0; display:grid; gap:4px}

/* ── forms ── */
.field{display:flex; flex-direction:column; gap:8px}
.field label{font:500 10.5px var(--f-mono); letter-spacing:.02em; text-transform:none; color:var(--text-3)}
.field input,.field select,.field textarea{min-height:46px; padding:11px 14px; border-radius:4px; border:1px solid var(--line-2); background:var(--inset); color:var(--text); font:400 15px var(--f-body); transition:border-color var(--dur)}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--sunleaf)}
.form-msg{display:none; padding:14px 16px; border-radius:4px; border:1px solid var(--line-2); border-left:2px solid var(--sunleaf); color:var(--text)}
.form-msg.is-on{display:block}

/* ── motion ── */
.rv{opacity:0; transform:translateY(24px); filter:blur(6px); transition:opacity 1100ms var(--ease), transform 1100ms var(--ease), filter 1100ms var(--ease)}
.rv.is-in{opacity:1; transform:none; filter:none}
.rv-d1{transition-delay:90ms} .rv-d2{transition-delay:180ms} .rv-d3{transition-delay:270ms}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none; filter:none; transition:none}
  *{animation-duration:.001ms!important; animation-iteration-count:1!important}
}

/* ── crops of real screens: --x --y --w --h are fractions of the source image ── */
.crop{position:relative; overflow:hidden; border:1px solid var(--line-2); border-radius:6px; background:var(--panel)}
.crop img{position:absolute; max-width:none; width:calc(100% / var(--w)); height:auto; left:calc(-100% * var(--x) / var(--w)); top:calc(-100% * var(--y) / var(--h)); aspect-ratio:auto}
.crop::after{content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), inset 0 -60px 80px -60px rgba(4,5,6,.55)}

/* ═══ shared figure system (from the home page) ═══ */
  /* ── section index (left rail) ── */
.rail{display:grid; grid-template-columns:minmax(150px,.26fr) minmax(0,1fr); gap:clamp(24px,4vw,64px)}
@media (max-width:860px){.rail{grid-template-columns:minmax(0,1fr)}}
.rail__idx{font:500 10.5px/1.7 var(--f-mono); letter-spacing:.02em; text-transform:none; color:var(--text-3)}
.rail__idx b{display:block; color:var(--text); font-weight:500}
.rail__idx .sq{display:inline-block; width:6px; height:6px; background:var(--sunleaf); margin-right:8px; vertical-align:1px}

/* ── thesis ── */
.thesis{font:400 clamp(28px,3.4vw,50px)/1.12 var(--f-display); letter-spacing:-.04em; color:var(--text); max-width:24ch; text-wrap:balance}
.thesis em{font-style:normal; color:var(--text-3)}
.stitch{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:56px; font:500 12px var(--f-mono); letter-spacing:.02em; text-transform:none; color:var(--text-3)}
.stitch s{text-decoration:none; position:relative}
.stitch s::after{content:""; position:absolute; left:-2px; right:-2px; top:50%; height:1px; background:var(--text-2); transform:scaleX(0); transform-origin:left; transition:transform 900ms var(--ease)}
.stitch.is-in s::after{transform:scaleX(1)}
.stitch.is-in s:nth-child(2)::after{transition-delay:120ms} .stitch.is-in s:nth-child(3)::after{transition-delay:240ms} .stitch.is-in s:nth-child(4)::after{transition-delay:360ms} .stitch.is-in s:nth-child(5)::after{transition-delay:480ms}
.stitch b{color:var(--text); font-weight:500; display:inline-flex; align-items:center; gap:10px}
.stitch b::before{content:"→"; color:var(--sunleaf)}
.metrics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:72px; border-top:1px solid var(--line)}
@media (max-width:700px){.metrics{grid-template-columns:minmax(0,1fr)}}
.metric{padding:28px 24px 8px 0; border-right:1px solid var(--line)}
.metric:last-child{border-right:0}
@media (max-width:700px){.metric{border-right:0; border-bottom:1px solid var(--line); padding-bottom:24px}}
.metric b{display:block; font:300 clamp(54px,6.4vw,96px)/.9 var(--f-display); letter-spacing:-.06em; font-variant-numeric:tabular-nums}
.metric span{display:block; margin-top:14px; font:500 10.5px/1.6 var(--f-mono); letter-spacing:.02em; text-transform:none; color:var(--text-3)}
.metric:not(:first-child){padding-left:24px}
@media (max-width:700px){.metric:not(:first-child){padding-left:0}}

/* ── annotated figure ── */
.fig{position:relative}
.fig__head{display:flex; justify-content:space-between; gap:16px; align-items:baseline; margin-bottom:14px; font:500 10.5px var(--f-mono); letter-spacing:.02em; text-transform:none; color:var(--text-3)}
.fig__head b{color:var(--text); font-weight:500}
.spot{position:absolute; z-index:2; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; display:grid; place-items:center; font:500 11px var(--f-mono); color:var(--page); background:var(--sunleaf); box-shadow:0 0 0 6px rgba(61,187,126,.14), 0 0 24px rgba(61,187,126,.35)}
.spot::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(61,187,126,.5); animation:ping 2.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6); opacity:1} 100%{transform:scale(1.9); opacity:0}}
@media (max-width:640px){.spot{width:16px; height:16px; margin:-8px 0 0 -8px; font-size:8.5px; box-shadow:0 0 0 3px rgba(61,187,126,.14)} .spot::after{display:none} .hero__top{display:none}}
.legend{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin-top:28px; border-top:1px solid var(--line)}
@media (max-width:980px){.legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.legend{grid-template-columns:minmax(0,1fr)}}
.legend div{padding:18px 18px 0 0}
.legend i{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--sunleaf); color:var(--page); font:500 10.5px var(--f-mono); font-style:normal; margin-bottom:12px}
.legend b{display:block; font:500 15px var(--f-display); letter-spacing:-.02em; margin-bottom:6px}
.legend p{margin:0; font-size:14px; color:var(--text-2); line-height:1.55}

/* ── specimens ── */
.spec{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr); gap:clamp(32px,5vw,80px); align-items:center; padding:clamp(56px,7vw,96px) 0; border-top:1px solid var(--line)}
.spec:first-of-type{border-top:0; padding-top:0}
.spec--flip{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr)}
.spec--flip > .spec__text{order:2}
@media (max-width:980px){.spec,.spec--flip{grid-template-columns:minmax(0,1fr)} .spec--flip > .spec__text{order:0}}
.spec__idx{font:500 10.5px var(--f-mono); letter-spacing:.02em; text-transform:none; color:var(--text-3)}
.spec__idx b{color:var(--tone,var(--sunleaf)); font-weight:500}
.spec h3{font:500 clamp(26px,2.8vw,40px)/1.05 var(--f-display); letter-spacing:-.04em; margin:16px 0 16px}
.spec__text p{color:var(--text-2); font-size:16px; line-height:1.65; max-width:46ch}
.kv{margin:26px 0 0; border-top:1px solid var(--line)}
.kv div{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px}
.kv dt{color:var(--text-2)}
.kv dd{margin:0; font:500 12.5px var(--f-mono); color:var(--text); text-align:right}
.spec .link{margin-top:24px}
.quote{margin:14px 0 0; padding:14px 16px; border-left:1px solid var(--sunleaf); font:400 15px/1.5 var(--f-display); letter-spacing:-.01em; color:var(--text)}
.quote small{display:block; margin-top:6px; font:500 10.5px var(--f-mono); letter-spacing:.02em; text-transform:none; color:var(--text-3)}

/* ── proof ── */
.proof{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(32px,5vw,80px); align-items:start}
@media (max-width:980px){.proof{grid-template-columns:minmax(0,1fr)}}
.rules{list-style:none; margin:40px 0 0; padding:0; counter-reset:r; border-top:1px solid var(--line)}
.rules li{counter-increment:r; display:grid; grid-template-columns:56px minmax(0,1fr); padding:22px 0; border-bottom:1px solid var(--line)}
.rules li::before{content:counter(r,decimal-leading-zero); font:500 12px var(--f-mono); color:var(--sunleaf); padding-top:4px}
.rules b{display:block; font:500 19px var(--f-display); letter-spacing:-.025em; margin-bottom:6px}
.rules span{color:var(--text-2); font-size:15px}


.foot__mark{margin-top:56px; font:500 clamp(44px,10.4vw,168px)/.8 var(--f-display); letter-spacing:-.065em; white-space:nowrap; overflow:hidden;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.09); user-select:none}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   v6 "journal" layer. Quieter type, sentence-case captions, no glow, no pulse, status as text.
   The page should read like an instrument maker's technical note, not a launch page.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --page:#040506; --panel:#08090c; --inset:#060709;
  --text:#e4e6ea; --text-2:#8b919b; --text-3:#5a606a; --text-4:#353a42;
  --line:rgba(255,255,255,.065); --line-2:rgba(255,255,255,.11); --line-3:rgba(255,255,255,.18);
  --f-math:"Cambria Math","STIX Two Math","Latin Modern Math","Times New Roman",serif;
}
body{font-size:15.5px; line-height:1.65; letter-spacing:-.003em}
h1,h2,h3,h4{font-weight:400}
.display{font-size:clamp(46px,6.6vw,104px); font-weight:300; letter-spacing:-.05em; line-height:.95}
.h1{font-size:clamp(38px,5vw,74px); font-weight:300; letter-spacing:-.045em; line-height:1}
.h2{font-size:clamp(28px,3vw,44px); font-weight:300; letter-spacing:-.035em; line-height:1.08; max-width:22ch}
.h3{font-size:clamp(19px,1.6vw,22px); font-weight:400}
.lede{font-size:clamp(16px,1.2vw,17.5px); color:var(--text-2); max-width:60ch}
.grad{color:inherit}
.thesis{font-weight:300; font-size:clamp(26px,2.8vw,40px); line-height:1.18; max-width:28ch}
.thesis em{color:inherit}

/* labels: mono, small, not shouted */
.eyebrow{font:400 11.5px/1.3 var(--f-mono); letter-spacing:.02em; text-transform:none; color:var(--text-3); gap:12px}
.eyebrow::before{width:18px; height:1px; background:var(--text-3); box-shadow:none}
.rail__idx{font:400 11.5px/1.7 var(--f-mono); letter-spacing:.02em; text-transform:none; color:var(--text-3)}
.rail__idx b{color:var(--text-2); font-weight:400}
.rail__idx .sq{width:auto; height:auto; background:none; margin:0; vertical-align:0}
.rail__idx .sq::before{content:"§"; color:var(--text-3); margin-right:6px}
figcaption,.figcap{font:400 11.5px/1.55 var(--f-mono); letter-spacing:.01em; text-transform:none; color:var(--text-3)}
.fig__head{font:400 11.5px var(--f-mono); letter-spacing:.01em; text-transform:none; color:var(--text-3); border-bottom:1px solid var(--line); padding-bottom:10px}
.fig__head b{color:var(--text-2); font-weight:400}
.metric b{font-weight:200}
.metric span,.kpi__label,.spec__idx,.chapter__n,.tabs button,.foot h4,.field label,.table-wrap th,.t thead th{text-transform:none!important; letter-spacing:.01em!important; font-family:var(--f-mono); font-weight:400!important; font-size:11.5px!important}
.spec__idx b{color:var(--text-2)}
.spec h3{font-weight:300}
.kv dd{font-weight:400; color:var(--text)}
.rules li::before{color:var(--text-3); font-weight:400}
.rules b{font-weight:400}

/* status as text: ● live  ◐ in build  ○ planned */
.pill{height:auto; padding:0; border:0; border-radius:0; background:none; font:400 11.5px/1.4 var(--f-mono); letter-spacing:.01em; text-transform:none; color:var(--text-2); gap:8px}
.pill::before{width:7px; height:7px; border-radius:50%; background:transparent; border:1px solid var(--text-3); box-shadow:none}
.pill--live::before{background:var(--sunleaf); border-color:var(--sunleaf); box-shadow:none}
.pill--build::before{background:linear-gradient(90deg,var(--warn) 50%,transparent 50%); border-color:var(--warn)}
.pill--low::before{background:var(--cost); border-color:var(--cost)}
.pill--info::before{border-color:var(--info)}

/* markers on figures: small, still */
.spot{width:20px; height:20px; margin:-10px 0 0 -10px; background:rgba(4,5,6,.85); color:var(--text); border:1px solid rgba(255,255,255,.7); box-shadow:none; font:400 10.5px var(--f-mono)}
.spot::after{display:none}
.legend i{background:transparent; border:1px solid var(--text-2); color:var(--text); font-weight:400}
.legend b{font-weight:400}

/* buttons */
.btn{height:42px; border-radius:2px; font-weight:400; font-size:14px}
.btn--lg{height:46px; padding:0 20px; font-size:14.5px}
.btn--primary{background:#e4e6ea}
.card::after{display:none}
.cta h2{font-weight:300; letter-spacing:-.05em}

/* registration marks between sections, like a printed plate */
.section + .section{border-top:0}
.section + .section::before{content:""; position:absolute; top:0; height:9px; margin-top:-4px;
  left:max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))); right:max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%23596069' stroke-width='1'/%3E%3C/svg%3E") left center/9px 9px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%23596069' stroke-width='1'/%3E%3C/svg%3E") right center/9px 9px no-repeat,
    linear-gradient(var(--line),var(--line)) center/calc(100% - 26px) 1px no-repeat}

/* mathematics */
math{font-family:var(--f-math); font-size:1.18em}
.eq{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; margin:22px 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow-x:auto}
.eq math{display:block; text-align:left; font-size:1.32em; color:var(--text)}
.eq__n{font:400 12px var(--f-mono); color:var(--text-3)}
.where{margin:0 0 8px; padding:0; list-style:none; font-size:14px; color:var(--text-2); display:grid; gap:4px}
.where li{display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px}
.where li > :first-child{font-family:var(--f-math); font-style:italic; color:var(--text); font-size:15.5px}
.ref{font:400 .78em var(--f-mono); color:var(--text-3); text-decoration:none; vertical-align:.35em; margin-left:1px}
.ref:hover{color:var(--sunleaf)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   v7 "observatory" layer. Smooth scroll, motion that follows the reader, figure plates with
   measuring marks, contour fields behind page headers. Motion is transform and opacity only.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root{ --ease-out:cubic-bezier(.19,1,.22,1); --ease-io:cubic-bezier(.65,0,.35,1); --plate:#06070a; --tick:rgba(255,255,255,.22) }
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
body{transition:opacity 220ms var(--ease-io)}
body.is-leaving{opacity:0}
@keyframes pagein{from{opacity:0} to{opacity:1}}
main{animation:pagein 700ms var(--ease-io) both}

/* nav: glass, a hairline that fills with reading progress */
.nav{background:rgba(4,5,6,.38); backdrop-filter:saturate(160%) blur(20px); -webkit-backdrop-filter:saturate(160%) blur(20px)}
.nav.is-stuck{background:rgba(4,5,6,.72)}
.nav__prog{position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg, rgba(61,187,126,0), rgba(61,187,126,.85)); transform-origin:left; transform:scaleX(0); pointer-events:none}
.nav__links a{font-size:13.5px; color:var(--text-2); padding:8px 13px}
.nav__links a[aria-current="page"]::after{bottom:-10px; width:14px; height:1px; margin-left:-7px}
.nav__state{font:400 11px var(--f-mono); color:var(--text-3); display:inline-flex; align-items:center; gap:8px; margin-right:10px; white-space:nowrap}
.nav__state::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--sunleaf)}
@media (max-width:1200px){.nav__state{display:none}}

/* buttons: crisp, a light rim, a sheen on hover */
.btn{position:relative; overflow:hidden; isolation:isolate}
.btn--primary{background:linear-gradient(180deg,#f3f4f6,#d9dce1); color:#06070a; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(255,255,255,.18), 0 8px 24px -12px rgba(0,0,0,.8)}
.btn--primary::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform:translateX(-120%); transition:transform 900ms var(--ease-out)}
.btn--primary:hover{background:linear-gradient(180deg,#fff,#e4e6ea)}
.btn--primary:hover::after{transform:translateX(120%)}
.btn--ghost{background:rgba(255,255,255,.02); border-color:var(--line-2); backdrop-filter:blur(8px)}

/* headlines rise out of a mask, word by word */
.sp.rv{opacity:1; transform:none; filter:none}
.sp .w{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .02em .1em; margin:0 -.02em -.1em}
.sp .w__i{display:inline-block; transform:translate3d(0,108%,0) rotate(2deg); transform-origin:0 100%; transition:transform 1100ms var(--ease-out); transition-delay:calc(var(--i, 0) * 38ms + 60ms)}
.sp.is-in .w__i{transform:none}
html:not(.js) .sp .w__i{transform:none}

/* paragraphs that light up as they are read */
[data-scrub] .sw{color:var(--text-4); transition:color 420ms var(--ease-io)}
[data-scrub] .sw.is-lit{color:var(--text)}

/* figure plates: real screens reveal from below, with corner registration marks */
html.js .crop{clip-path:inset(0 0 100% 0 round 6px); transition:clip-path 1300ms var(--ease-out)}
html.js .crop.is-shown{clip-path:inset(0 0 0 0 round 6px)}
html.js .crop img{transform:scale(1.06); transform-origin:50% 0; transition:transform 1800ms var(--ease-out)}
html.js .crop.is-shown img{transform:none}
html.js .crop .spot{opacity:0; transition:opacity 600ms var(--ease-io) 900ms}
html.js .crop.is-shown .spot{opacity:1}
.crop{box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 40px 80px -40px rgba(0,0,0,.9)}
.crop::before{content:""; position:absolute; inset:8px; z-index:3; pointer-events:none; opacity:.9;
  background:
    linear-gradient(var(--tick),var(--tick)) left top/10px 1px no-repeat, linear-gradient(var(--tick),var(--tick)) left top/1px 10px no-repeat,
    linear-gradient(var(--tick),var(--tick)) right top/10px 1px no-repeat, linear-gradient(var(--tick),var(--tick)) right top/1px 10px no-repeat,
    linear-gradient(var(--tick),var(--tick)) left bottom/10px 1px no-repeat, linear-gradient(var(--tick),var(--tick)) left bottom/1px 10px no-repeat,
    linear-gradient(var(--tick),var(--tick)) right bottom/10px 1px no-repeat, linear-gradient(var(--tick),var(--tick)) right bottom/1px 10px no-repeat}
@media (max-width:640px){.crop::before{inset:5px}}

/* measuring crosshair */
.xh{position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity 220ms}
.crop.is-measuring .xh{opacity:1}
.xh__v,.xh__h{position:absolute; background:rgba(61,187,126,.55)}
.xh__v{top:0; bottom:0; width:1px; left:var(--cx)}
.xh__h{left:0; right:0; height:1px; top:var(--cy)}
.xh__t{position:absolute; left:var(--cx); top:var(--cy); transform:translate(10px,10px); padding:3px 6px; background:rgba(4,5,6,.86); border:1px solid rgba(61,187,126,.4); font:400 10.5px/1.3 var(--f-mono); color:var(--text); white-space:pre; letter-spacing:.02em}
.xh.is-left .xh__t{transform:translate(calc(-100% - 10px),10px)}
.xh.is-up .xh__t{transform:translate(10px,calc(-100% - 10px))}
.xh.is-left.is-up .xh__t{transform:translate(calc(-100% - 10px),calc(-100% - 10px))}
.crop.is-measuring, .crop.is-measuring img.zoomable{cursor:crosshair}

/* reveals: a calmer rise, with specimen figures arriving from the side */
.rv{transform:translate3d(0,28px,0); filter:none; transition:opacity 1200ms var(--ease-out), transform 1200ms var(--ease-out)}
.spec > figure.rv{transform:translate3d(48px,0,0)}
.spec--flip > figure.rv{transform:translate3d(-48px,0,0)}
.spec > figure.rv.is-in{transform:none}

/* product shot that settles flat as it scrolls in */
[data-tilt]{--tilt:1; perspective:1800px}
[data-tilt] > .crop{transform:rotateX(calc(var(--tilt) * 22deg)) scale(calc(1 - var(--tilt) * .08)); transform-origin:50% 100%; will-change:transform}

/* page headers: contour field, a ruler along the base */
.phero{position:relative; overflow:hidden; isolation:isolate}
.phero > .wrap{position:relative; z-index:1}
.contours{position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.2) 0%, #000 60%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,.2) 0%, #000 60%);
  opacity:0; animation:fadein 1600ms var(--ease-io) 200ms forwards}
@keyframes fadein{to{opacity:1}}
.phero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:9px; z-index:1; pointer-events:none; opacity:.55;
  background:
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 16px) left bottom/100% 4px no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 160px) left bottom/100% 9px no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent)}

/* section ticker on wide screens */
.ticker{position:fixed; z-index:40; right:22px; top:50%; transform:translate3d(12px,-50%,0); display:grid; gap:2px; opacity:0; pointer-events:none; transition:opacity 400ms var(--ease-io), transform 400ms var(--ease-out)}
.ticker.is-shown{opacity:1; pointer-events:auto; transform:translate3d(0,-50%,0)}
.ticker a{display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:5px 0; text-decoration:none; font:400 10.5px var(--f-mono); color:var(--text-4)}
.ticker a b{font-weight:400; max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width 500ms var(--ease-out), opacity 300ms}
.ticker:hover a b, .ticker a.is-on b{max-width:180px; opacity:1}
.ticker a::after{content:""; width:14px; height:1px; background:currentColor; transition:width 400ms var(--ease-out)}
.ticker a.is-on{color:var(--text)}
.ticker a.is-on::after{width:28px; background:var(--sunleaf)}
.ticker a:hover{color:var(--text-2)}
@media (max-width:1499px){.ticker{display:none}}

/* footer spec line */
.foot__spec{margin:22px 0 0; display:grid; gap:0; max-width:300px; border-top:1px solid var(--line)}
.foot__spec div{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font:400 11.5px var(--f-mono)}
.foot__spec dt{color:var(--text-3)} .foot__spec dd{margin:0; color:var(--text-2)}
.foot__mark{will-change:transform}

/* metrics: a measured underline */
.metric{position:relative}
.metric::before{content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--sunleaf); transition:width 1400ms var(--ease-out) 200ms}
.metric.is-in::before{width:44px}

@media (prefers-reduced-motion: reduce){
  html.js .crop, html.js .crop.is-shown{clip-path:none} html.js .crop img{transform:none} html.js .crop .spot{opacity:1}
  .sp .w__i{transform:none} [data-scrub] .sw{color:var(--text)} [data-tilt] > .crop{transform:none}
  main{animation:none}
}

/* ═══ v7 stage headers: every page opens on a live figure, like the home page ═══ */
.phero.shero{min-height:calc(100svh - var(--nav-h)); display:flex; flex-direction:column; justify-content:flex-end; padding:0; background:#040506}
.shero__gl{position:absolute; inset:0; z-index:0}
.shero__gl canvas{width:100%; height:100%; display:block; opacity:0; transition:opacity 1600ms var(--ease-io)}
.shero__gl.is-on canvas{opacity:1}
.shero__veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 65% 40%, transparent 42%, rgba(4,5,6,.72) 100%),
    linear-gradient(180deg, rgba(4,5,6,.6) 0%, rgba(4,5,6,0) 20%, rgba(4,5,6,0) 50%, rgba(4,5,6,.88) 92%, #040506 100%),
    linear-gradient(90deg, rgba(4,5,6,.78) 0%, rgba(4,5,6,.2) 44%, rgba(4,5,6,0) 60%)}
.shero__corners{position:absolute; z-index:2; top:22px; left:0; right:0; pointer-events:none}
.shero__corners .wrap{display:flex; justify-content:space-between; gap:16px; font:400 11px/1.7 var(--f-mono); color:var(--text-3)}
.shero__corners b{display:block; color:var(--text-2); font-weight:400}
.phero.shero > .wrap.shero__in{width:100%; position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.58fr); gap:48px; align-items:end; padding-top:clamp(120px,16vh,200px); padding-bottom:clamp(48px,7vh,80px); pointer-events:none}
.shero__in > *{min-width:0}
.shero__in a, .shero__in button, .shero__in .hud, .shero__in nav{pointer-events:auto}
.shero h1{margin:22px 0 22px; text-shadow:0 2px 30px rgba(4,5,6,.6)}
.shero .lede{color:#b3b8c1; text-shadow:0 1px 16px #040506}
.shero .eyebrow{color:var(--text-2)}
@media (max-width:980px){ .phero.shero > .wrap.shero__in{grid-template-columns:minmax(0,1fr); gap:28px; padding-top:42vh} .shero__veil{background:linear-gradient(180deg, rgba(4,5,6,.45) 0%, rgba(4,5,6,0) 20%, rgba(4,5,6,0) 34%, rgba(4,5,6,.9) 62%, #040506 100%)} }
@media (max-width:640px){ .shero__corners{display:none} }
.shero__labels{position:absolute; inset:0; z-index:2; pointer-events:none}
.shero__labels span{position:absolute; left:0; top:0; opacity:0; font:400 10.5px/1 var(--f-mono); color:var(--text); white-space:nowrap; margin-top:-9px; will-change:transform; transition:opacity 400ms}
.shero__labels span > em{display:inline-block; margin-left:16px; padding:4px 7px; font-style:normal; background:rgba(4,5,6,.72); border:1px solid var(--line-2); backdrop-filter:blur(6px)}
.shero__labels span::before{content:""; position:absolute; left:0; top:50%; width:9px; height:9px; margin:-5px 0 0 -5px; border:1px solid var(--text); border-radius:50%; background:rgba(4,5,6,.5)}
.shero__labels span::after{content:""; position:absolute; left:5px; top:50%; width:7px; height:1px; background:var(--text-3)}
@media (max-width:980px){ .shero__labels{display:none} }

/* the readout panel, shared */
.hud{border:1px solid var(--line-2); border-radius:4px; background:rgba(4,5,6,.62); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-family:var(--f-mono)}
.hud__h{display:flex; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line); font-size:11px; color:var(--text-3)}
.hud__h b{color:var(--sunleaf); font-weight:400}
.hud dl{margin:0; padding:4px 14px}
.hud dl div{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); font-size:12px}
.hud dl div:last-child{border-bottom:0}
.hud dt{color:var(--text-3); font-size:11px; padding-top:1px; display:flex; align-items:center; gap:8px}
.hud dd{margin:0; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
.hud__big{display:flex; align-items:baseline; gap:14px; padding:14px 14px 10px; border-bottom:1px solid var(--line)}
.hud__big b{font:200 54px/.9 var(--f-display); letter-spacing:-.05em; color:var(--text)}
.hud__big span{font:400 15px var(--f-display); color:var(--text); letter-spacing:-.01em}
.hud__sub{padding:10px 14px 0; border-top:1px solid var(--line); font-size:11px; color:var(--text-2)}
.hud canvas{display:block; width:calc(100% - 28px); height:70px; margin:6px 14px 10px; border:1px solid var(--line)}
.hud__eq{padding:9px 14px; border-top:1px solid var(--line); font-size:11.5px; color:var(--text-2); display:flex; justify-content:space-between; gap:10px; align-items:center}
.hud__eq b{color:var(--text); font-weight:400}
.hud p{margin:0; padding:9px 14px 11px; border-top:1px solid var(--line); font:400 11px/1.5 var(--f-body); color:var(--text-3)}
.hud__pick{display:flex; gap:0; border-top:1px solid var(--line)}
.hud__pick button{flex:1; height:36px; border:0; border-right:1px solid var(--line); background:transparent; color:var(--text-3); font:400 11.5px var(--f-mono); cursor:pointer; transition:color var(--dur), background var(--dur)}
.hud__pick button:last-child{border-right:0}
.hud__pick button:hover{color:var(--text)}
.hud__pick button[aria-pressed="true"]{color:var(--page); background:var(--text)}
.hud__steps{list-style:none; margin:0; padding:6px 14px 8px; display:grid; gap:0}
.hud__steps li{display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:8px; padding:5px 0; font-size:11.5px; color:var(--text-3); border-bottom:1px solid var(--line); transition:color 300ms}
.hud__steps li:last-child{border-bottom:0}
.hud__steps li.is-on{color:var(--text)}
.hud__steps li.is-on b{color:var(--sunleaf)}
.hud__steps li.is-done{color:var(--text-2)}
.hud__steps b{font-weight:400}
.hud__steps i{font-style:normal; color:var(--text-3)}
.hud__bar{height:1px; margin:0 14px 10px; background:var(--line-2); position:relative; overflow:hidden}
.hud__bar i{position:absolute; inset:0; background:var(--sunleaf); transform-origin:left; transform:scaleX(0)}
.k{display:inline-block; width:12px; height:2px; background:var(--sunleaf)}
.k--lit{background:var(--crop)} .k--open{background:repeating-linear-gradient(90deg,#c8ccd2 0 3px,transparent 3px 5px)} .k--slate{background:#7f8da3}

/* a strip below a stage header (the old header extras) */
.substrip{padding:clamp(28px,4vw,48px) 0 0}
.hud__steps li{display:block; padding:0}
.hud__steps button{display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:8px; width:100%; padding:5px 0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.hud__steps button:hover{color:var(--text)}
@media (max-width:980px){
  .shero__gl{bottom:auto; height:min(72svh, 640px)}
  .shero__gl::after{content:""; position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(transparent, #040506); pointer-events:none}
  .phero.shero > .wrap.shero__in{padding-top:min(48svh, 420px)}
}
html{overflow-x:clip}
@media (max-width:980px){ .spec > figure.rv, .spec--flip > figure.rv{transform:translate3d(0,28px,0)} .spec > figure.rv.is-in{transform:none} }

.chain li{grid-template-columns:40px minmax(0,1fr) minmax(0,1.15fr) minmax(0,.62fr)!important; align-items:baseline}
.chain__h span{display:block; font:400 11.5px var(--f-mono); color:var(--text-3)}
.chain__h b{display:block; font:300 clamp(22px,2.2vw,30px)/1.1 var(--f-display); font-stretch:110%; letter-spacing:-.03em; margin-top:6px; color:var(--text)}
.chain__p{margin:0; color:var(--text-2); font-size:15.5px; line-height:1.6; max-width:44ch}
.chain__out{align-self:center}
@media (max-width:1100px){ .chain li{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr)!important} .chain__out{grid-column:2 / -1} }
@media (max-width:700px){ .chain li{grid-template-columns:40px minmax(0,1fr)!important} .chain__p, .chain__out{grid-column:2} }

/* ═══ v10: black ground, Helioflux mark, calmer motion ═══
   One reveal for everything: fade and a short rise, no word splitting, wipes, tilts or sideways slides. */
:root{ --sunleaf-hover:#5fd096; --sunleaf-dim:#2a8a5c; --sunleaf-glow:rgba(61,187,126,.2); --sunleaf-wash:rgba(61,187,126,.07); --on-sunleaf:#04120b;
  --ease-rv:cubic-bezier(.2,.7,.2,1) }
.brand{gap:12px}
.brand__logo{display:block; height:15px; width:auto}
.brand__prod{font:600 14px/1 'Outfit',var(--f-body); letter-spacing:-.005em; color:var(--text); padding-left:12px; border-left:1px solid var(--line-2); white-space:nowrap}
@media (max-width:440px){ .brand__prod{display:none} }
.foot .brand__logo{height:17px}
.nav__prog{background:linear-gradient(90deg, rgba(61,187,126,0), rgba(61,187,126,.9))}

.rv{opacity:0; transform:translate3d(0,18px,0); filter:none; transition:opacity 900ms var(--ease-rv), transform 900ms var(--ease-rv)}
.rv.is-in{opacity:1; transform:none}
.rv-d1{transition-delay:70ms} .rv-d2{transition-delay:140ms} .rv-d3{transition-delay:210ms}
.spec > figure.rv, .spec--flip > figure.rv{transform:translate3d(0,18px,0)}
.spec > figure.rv.is-in, .spec--flip > figure.rv.is-in{transform:none}
html.js .crop, html.js [data-tilt] > .crop{clip-path:none; opacity:0; transform:translate3d(0,14px,0); transition:opacity 1000ms var(--ease-rv), transform 1000ms var(--ease-rv); will-change:auto}
html.js .crop.is-shown, html.js [data-tilt] > .crop.is-shown{opacity:1; transform:none}
html.js .crop img, html.js .crop.is-shown img{transform:none; transition:none}
html.js .crop .spot{transition:opacity 500ms var(--ease-rv) 500ms}
.hero + .section{padding-top:clamp(64px,7vw,104px)}
.ch{transition:none}
@media (prefers-reduced-motion: reduce){ html.js .crop{opacity:1; transform:none} }

/* sticky needs the viewport to be the only scroller: html clips sideways overflow, body must not create its own scroll box */
body{overflow-x:visible}
/* the problem rises over the end of the field instead of after a black gap */
.hero + .section{margin-top:-34svh; z-index:3; padding-top:calc(34svh + clamp(24px,3vw,48px)); background:linear-gradient(180deg, rgba(4,5,6,0) 0, rgba(4,5,6,.85) 22svh, #040506 34svh)}
@media (prefers-reduced-motion: reduce){ .hero + .section{margin-top:0; padding-top:clamp(64px,7vw,104px); background:none} }