@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-400.9b8dd1ec.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-400-italic.bc891bdd.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-400.77bc0267.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-500.f7016cd4.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-600.196e3cbc.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.79936b18.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.b1c8a895.woff2) format("woff2")}

:root{
 /* new colour tokens, verbatim from _design/tokens.css */
 --bg-page:#FFFFFF; --bg-surface:#FAFAF9;
 --border-subtle:#E7E8EA; --border-default:#D3D5D8; --border-control:#8B9198;
 --text-primary:#10161D; --text-secondary:#58626D; --text-tertiary:#5B6571;
 --accent:#C2512C; --accent-hover:#A8431F; --accent-decorative:#D97757; --accent-wash:#FBE9E2;
 --link:#24485E; --link-hover:#173142;
 --success:#1D6304; --warning:#845610; --error:#93301F; --info:#014DD7;
 --success-wash:#E7F3E4; --warning-wash:#FBEFD8; --error-wash:#F7E4E0; --info-wash:#DFE9FA;
 --chart-1:#1461A8; --chart-2:#6A0CB9; --chart-3:#990B3D; --chart-4:#12ADB4;
 --chart-5:#9C2D8B; --chart-6:#CCB50C; --chart-7:#FC23A0; --chart-8:#A87EEB;
 --chart-9:#5E95FC; --chart-10:#417A1A; --chart-11:#2C6049; --chart-12:#A15A00;
 /* v5 site colour variables, now aliases to the tokens above (Phase 1 bridge) */
 --page:var(--border-subtle); --paper:var(--bg-page); --surface:var(--bg-page);
 --ink:var(--text-primary); --deep:var(--text-primary); --footer:var(--text-primary);
 --plumb:var(--link); --steel-deep:var(--text-tertiary); --steel:var(--border-default);
 --mist:var(--bg-page); --mist-blue:var(--border-subtle);
 --line:var(--border-default); --line-soft:var(--border-subtle); --rule:var(--border-default);
 --muted:var(--text-secondary); --slate:var(--text-secondary); --rust:var(--accent);
 --light:var(--border-default); --pale:var(--border-subtle);
 --c1:var(--chart-1); --c2:var(--chart-12); --c3:var(--chart-4); --c4:var(--chart-5);
 /* site spacing, radius and shadow scale (kept); font stacks per _design/tokens.css */
 --sp-2xs:4px; --sp-xs:8px; --sp-sm:14px; --sp-md:22px; --sp-lg:26px;
 --sp-xl:40px; --sp-2xl:52px; --sp-3xl:62px;
 --r-field:7px; --r-card:8px; --r-band:14px; --r-header:26px;
 --sh-header:0 6px 22px rgba(16,22,29,0.07);
 --sh-header-sc:0 10px 30px rgba(16,22,29,0.10);
 --sh-hover:0 22px 52px rgba(16,22,29,0.18);
 --fd:"Instrument Serif", Georgia, serif;
 --fb:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
 --fm:"IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
}
*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
body{background:var(--page); color:var(--ink); font-family:var(--fb);
 font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased}
img,video{max-width:100%}
a{color:inherit; text-decoration:none}
.shell{max-width:1280px; margin:0 auto; background:var(--paper);
 border-left:1px solid var(--line); border-right:1px solid var(--line)}

/* floating pill header */
header.top{position:fixed; top:var(--sp-sm); left:50%; transform:translateX(-50%);
 width:calc(100% - 28px); max-width:1252px; z-index:80; background:var(--paper);
 border:1px solid var(--line); border-radius:var(--r-header); overflow:hidden;
 box-shadow:var(--sh-header)}
.hwrap{display:flex; align-items:center; justify-content:space-between; gap:24px;
 padding:16px 30px 14px; transition:padding 250ms ease}
.lock{display:inline-flex; flex-direction:column; color:var(--ink)}
.lock svg{display:block; width:128px; height:auto}
nav.main{display:flex; flex-wrap:wrap; align-items:center; gap:18px}
nav.main a{font-family:var(--fb); font-weight:500; font-size:16px;
 letter-spacing:0.005em; color:var(--ink)}
nav.main a:hover,nav.main a.on{color:var(--plumb)}
.langs{display:flex; gap:10px; align-items:center}
.langs a{font-family:var(--fm); font-weight:500; font-size:10px;
 letter-spacing:0.12em; color:var(--steel-deep); padding:3px 5px;
 border:1px solid transparent; border-radius:var(--r-field)}
.langs a.on{color:var(--plumb); border-color:var(--line)}
.langs a:hover{color:var(--plumb)}
.cta{display:inline-block; font-family:var(--fm); font-weight:500; font-size:12px;
 letter-spacing:0.13em; text-transform:uppercase; padding:14px 22px;
 background:var(--ink); color:var(--paper); border-radius:var(--r-card);
 transition:transform 160ms ease; white-space:nowrap}
.cta:hover{transform:translateY(-2px)}
.cta.blue{background:var(--ink)}
header.top .cta{padding:12px 18px; font-size:11px}
.track{height:2px; background:color-mix(in srgb, var(--plumb) 20%, transparent)}
.fill{height:2px; width:0; background:var(--plumb)}
.tlink{font-family:var(--fm); font-weight:500; font-size:12px;
 letter-spacing:0.13em; text-transform:uppercase; color:var(--plumb)}
.win .tlink{color:var(--mist-blue)}
.win .cta{background:var(--paper); color:var(--ink)}

/* screens */
section.screen{min-height:100svh; scroll-snap-align:start; display:flex;
 align-items:center; padding:110px var(--sp-2xl) var(--sp-3xl);
 background:var(--paper)}
section.screen.mist{background:var(--bg-surface);border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default)}
.inner{width:100%; max-width:1180px; margin:0 auto}
.snapon{scroll-snap-type:y proximity}

/* banner screens: the design-system layer stack, video as the photo layer */
section.screen.win{background:var(--paper); padding:96px var(--sp-sm) var(--sp-sm)}
.banner{position:relative; overflow:hidden; background:var(--ink);
 border-radius:var(--r-band); width:100%; min-height:calc(100svh - 120px);
 display:flex; align-items:flex-end; padding:64px 48px 48px; color:var(--paper)}
.banner .bv{position:absolute; inset:0; width:100%; height:100%;
 object-fit:cover; opacity:0.42}
.banner .stripe{position:absolute; inset:0; pointer-events:none; opacity:0.45;
 background:repeating-linear-gradient(103deg, rgba(16,22,29,0.92) 0 2px,
 rgba(16,22,29,0) 2px 10px)}
.banner .tintl{position:absolute; inset:0; pointer-events:none;
 background:linear-gradient(135deg, rgba(36,72,94,0.5) 0%,
 rgba(36,72,94,0) 58%, rgba(36,72,94,0.3) 100%)}
.banner .leg{position:absolute; inset:0; pointer-events:none;
 background:linear-gradient(180deg, rgba(16,22,29,0) 0%,
 rgba(16,22,29,0.5) 55%, rgba(16,22,29,0.96) 100%)}
.banner .glow{position:absolute; top:0; left:0; width:620px; height:620px;
 margin:-310px 0 0 -310px; pointer-events:none; opacity:0;
 transition:opacity 420ms ease;
 background:radial-gradient(circle, rgba(211,213,216,0.26) 0%,
 rgba(211,213,216,0) 66%)}
.bin{position:relative; z-index:2; width:100%; max-width:1084px; margin:0 auto}

/* deep band screens */
section.screen.deep{background:var(--paper); padding:96px var(--sp-sm) var(--sp-sm)}
.band{background:var(--deep); border-radius:var(--r-band); width:100%;
 min-height:calc(100svh - 120px); display:flex; align-items:center;
 padding:56px 48px; color:var(--paper)}

/* type */
.kick{font-family:var(--fm); font-weight:500; font-size:11px;
 letter-spacing:0.18em; text-transform:uppercase; color:var(--steel-deep);
 margin-bottom:14px}
.win .kick,.deep .kick{color:var(--mist-blue)}
h1{font-family:var(--fd); font-weight:400; font-size:clamp(40px,5.4vw,64px);
 line-height:1.0; letter-spacing:-0.024em; max-width:760px}
h1 em{font-style:italic; color:var(--mist)}
h2.t{font-family:var(--fd); font-weight:400; font-size:clamp(26px,2.9vw,31px);
 line-height:1.08; letter-spacing:-0.02em; max-width:30ch; margin-bottom:20px}
.lead{font-size:17px; line-height:1.55; color:var(--muted); max-width:62ch;
 margin-bottom:24px}
.win .lead,.deep .lead{color:var(--mist)}
.win .lead strong{color:var(--paper)}
.mono{font-family:var(--fm)}

/* cards */
.grid{display:grid; gap:var(--sp-md)}
.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))}
.card{background:var(--paper); border:1px solid var(--line);
 border-radius:var(--r-card); padding:var(--sp-lg);
 transition:box-shadow 300ms ease, transform 300ms ease}
.card:hover{box-shadow:var(--sh-hover); transform:translateY(-3px)}
.card h3{font-family:var(--fb); font-weight:400; font-size:20px; line-height:1.15;
 letter-spacing:-0.015em; margin:8px 0 6px}
.card p{font-size:14px; line-height:1.55; color:var(--muted)}
.num{font-family:var(--fm); font-weight:500; font-size:10px;
 letter-spacing:0.15em; text-transform:uppercase; color:var(--steel-deep)}
.key{display:inline-block; width:10px; height:10px; border-radius:2px;
 margin-right:8px}

/* flip cards: CSS hover per the design system, JS adds tap and focus */
.flip{position:relative; min-height:206px; perspective:1200px}
.fin{position:absolute; inset:0; transform-style:preserve-3d;
 transition:transform 520ms cubic-bezier(.3,.8,.3,1)}
.slowflip .fin{transition-duration:1050ms}
.flip:hover .fin,.flip:focus-within .fin,.flip.tapped .fin{transform:rotateY(180deg)}
.ff,.fb{position:absolute; inset:0; backface-visibility:hidden;
 -webkit-backface-visibility:hidden; border-radius:var(--r-card);
 display:flex; flex-direction:column; gap:9px; padding:var(--sp-lg)}
.ff{background:var(--surface); border:1px solid var(--line)}
.fb{background:var(--deep); transform:rotateY(180deg); overflow:auto}
.ff h3{font-family:var(--fb); font-weight:400; font-size:20px; line-height:1.12;
 letter-spacing:-0.015em; color:var(--ink)}
.ff p{font-size:13.5px; line-height:1.5; color:var(--muted)}
.fb p{font-size:14px; line-height:1.55; color:var(--mist)}
.fb .num{color:var(--steel)}
.hint{margin-top:auto; font-family:var(--fm); font-size:10px;
 letter-spacing:0.14em; text-transform:uppercase; color:var(--steel-deep)}

/* stats */
.stats{display:flex; flex-wrap:wrap; gap:36px}
.stat .v{font-family:var(--fm); font-weight:400; font-size:clamp(38px,4.4vw,58px);
 line-height:1}
.stat .u{font-family:var(--fm); font-weight:500; font-size:10px;
 letter-spacing:0.16em; text-transform:uppercase; color:var(--mist-blue);
 margin-bottom:6px}
.stat p{font-size:13.5px; line-height:1.5; color:var(--mist); max-width:250px;
 margin-top:6px}
.srcnote{font-size:11.5px; line-height:1.6; color:var(--border-control); max-width:900px;
 margin-top:22px}

/* steps */
.steps{display:flex; flex-direction:column; gap:10px}
.step{display:flex; gap:12px; align-items:flex-start}
.step b{font-family:var(--fm); font-weight:500; font-size:10.5px;
 color:var(--paper); background:var(--plumb); border-radius:50%;
 width:22px; height:22px; flex:none; display:inline-flex; align-items:center;
 justify-content:center}
.step .st{font-weight:600; font-size:14px}
.step .sd{font-size:12.5px; color:var(--muted); line-height:1.45}

/* FAQ */
.acc{background:var(--surface); border:1px solid var(--line);
 border-radius:var(--r-card)}
.acc+.acc{margin-top:8px}
.accb{all:unset; display:flex; justify-content:space-between; align-items:center;
 gap:16px; width:100%; box-sizing:border-box; padding:14px 20px; cursor:pointer}
.accb span{font-family:var(--fb); font-size:18px; color:var(--ink)}
.accb .ic{font-family:var(--fm); color:var(--steel-deep); font-size:15px}
.accd{max-height:0; overflow:hidden; transition:max-height 400ms ease}
.accd p{padding:0 20px 16px; font-size:14px; line-height:1.6; color:var(--muted);
 max-width:75ch}

/* verdict card */
.vcard{background:var(--deep); color:var(--mist); border-radius:var(--r-card);
 padding:28px 30px}
.vcard .tag{font-family:var(--fm); font-weight:500; font-size:10px;
 letter-spacing:0.15em; text-transform:uppercase; background:var(--mist);
 color:var(--ink); border-radius:var(--r-field); padding:3px 9px}
.vcard h3{font-family:var(--fb); font-weight:400; color:var(--paper);
 font-size:24px; margin:10px 0 8px}
.vcard ol{padding-left:18px; display:flex; flex-direction:column; gap:5px;
 font-size:13.5px; line-height:1.5; max-width:72ch}
.vmeta{display:flex; flex-wrap:wrap; gap:26px;
 border-top:1px solid rgba(211,213,216,.35); margin-top:14px; padding-top:12px}
.vmeta .l{font-family:var(--fm); font-size:10px; letter-spacing:0.13em;
 text-transform:uppercase; color:var(--steel)}
.vmeta .v{font-family:var(--fm); font-size:17px; color:var(--paper)}

/* dots */
.dots{position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:70;
 display:flex; flex-direction:column; gap:10px}
.dots a{width:8px; height:8px; border-radius:50%; border:1px solid var(--steel-deep);
 background:transparent; display:block}
.dots a.on{background:var(--accent); border-color:var(--accent)}
footer.legal{font-family:var(--fm); font-size:11px; letter-spacing:0.06em;
 line-height:1.9; color:var(--border-control)}
footer.legal a{color:var(--mist-blue); text-decoration:underline}

@media(max-width:900px){
 .g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .snapon{scroll-snap-type:none}
 section.screen{min-height:0; padding:96px var(--sp-md) var(--sp-xl)}
 section.screen.win,section.screen.deep{padding:88px var(--sp-sm) var(--sp-sm)}
 .banner,.band{min-height:0; padding:48px 24px 32px}
 .dots{display:none}
 .hwrap{padding:11px 18px 10px; gap:8px}
 .lock{margin-right:10px}
 .lock svg{width:120px}
 nav.main{gap:6px}
 nav.main a{font-size:14px}
}
@media(max-width:700px){
 nav.main{display:none}
}
@media(max-width:600px){
 header.top{position:static; transform:none; margin:var(--sp-sm) auto 0}
 .hwrap{flex-wrap:wrap; row-gap:10px; padding:11px 18px 10px !important}
 .lock{margin:4px 10px 4px 0}
 header.top .cta{padding:8px 14px}
 #top{padding-top:var(--sp-sm)}
 .g4,.g3,.g2{grid-template-columns:1fr}
 h1{font-size:clamp(34px,10.5vw,42px)}
 .banner .bv{display:none}
 .stats{gap:24px}
}
@media(prefers-reduced-motion: reduce){
 html{scroll-behavior:auto}
 .fin{transition:none}
 .card,.cta{transition:none}
}
@media print{
 *,*::before,*::after{background:transparent !important;color:var(--text-primary) !important;box-shadow:none !important;text-shadow:none !important}
 html,body{background:var(--bg-page) !important}
 header.top,header[data-header],.dots,video{display:none !important}
 [data-reveal]{opacity:1 !important;transform:none !important}
 svg g[style*="--bg-page"]{fill:var(--text-primary) !important}
}

/* v6: send-document fallback (TECH-003) */
.cta-fallback{margin:-22px 0 34px; max-width:62ch; font-size:14px; line-height:1.6; color:var(--mist)}
.cta-fallback a,.cta-fallback button{color:var(--paper); text-decoration:underline; text-underline-offset:3px}
.cta-fallback button{background:none; border:0; padding:0; font:inherit; font-family:var(--fm); font-size:13px; letter-spacing:0.04em; cursor:pointer}
.cta-fallback button:focus-visible,.cta-fallback a:focus-visible{outline:2px solid var(--paper); outline-offset:3px}