/* MATRiQ — editorial/industrial direction. Hairline rules, mono micro-labels, no cards, no radii. */
*{box-sizing:border-box;margin:0}
:root{
--ink:#e8e9ea;--ink2:#9a9da2;--ink3:#5f636a;
--bg:#0b0c0d;--bg2:#111214;
--hair:#22252a;--hair2:#33373d;
/* SITE-PALETTE-1: the app's own accent (globals.css .mqx, dark) — the blue of the logo's dot — and its red for errors */
--acc:#118DFF;--bad:#e0564a;
--d:'Archivo',system-ui,sans-serif;--m:'IBM Plex Mono',ui-monospace,monospace;
--pad:clamp(20px,4vw,64px);--max:1560px;
}
html{-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--ink);font-family:var(--d);font-size:16px;line-height:1.5;letter-spacing:-0.005em}
a{color:inherit;text-decoration:none}
a:hover{color:var(--acc)}
.num{font-family:var(--m);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.rule{height:1px;background:var(--hair)}

.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,34px);max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.c1-3{grid-column:1/4}.c4-12{grid-column:4/13}.c4-8{grid-column:4/9}.c10-12{grid-column:10/13}
.c4-11{grid-column:4/12}.c1-7{grid-column:1/8}.c9-12{grid-column:9/13}
.c5-6{grid-column:5/7}.c7-8{grid-column:7/9}.c9-10{grid-column:9/11}.c11-12{grid-column:11/13}

.lbl{font-family:var(--m);font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--ink3)}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--max);margin:0 auto;padding:14px var(--pad)}
.mark{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:600;letter-spacing:.02em}
.mark img{display:block;height:22px;width:auto}
.foot .mark img{height:20px}
.mark-g{color:var(--acc)}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);font-size:14px;color:var(--ink2)}
.nav a.on{color:var(--ink)}
.nav-cta{font-family:var(--m);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);border:1px solid var(--hair2);padding:8px 13px}
.nav-cta:hover{border-color:var(--acc)}
.nav-login{color:var(--ink);padding-left:clamp(14px,2vw,30px);border-left:1px solid var(--hair2)}

/* film hero */
.film{position:relative;height:100svh;min-height:520px;margin-top:-57px;display:grid}
.film-media{position:absolute;inset:0;overflow:hidden;background:#08090a}
.film-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.film.is-empty .film-v{display:none}
.film-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .25s;background:linear-gradient(180deg,rgba(8,9,10,.78) 0%,rgba(8,9,10,.34) 34%,rgba(8,9,10,.46) 72%,rgba(11,12,13,.96) 100%)}
.film-in{pointer-events:none;position:relative;z-index:3;display:grid;align-content:center;justify-items:center;gap:0;padding:96px var(--pad) 44px;text-align:center}
.film-h{font-size:clamp(32px,6.4vw,96px);line-height:1;font-weight:500;letter-spacing:-0.04em;max-width:17ch;text-wrap:balance;color:#fff}
.film-h,.film-cue{pointer-events:auto}
/* Until the film loads (or while there is none yet) the hero is the dark panel with the headline on it. */
.film.is-empty .film-scrim{opacity:.28}
.film.is-empty .film-h{text-shadow:0 2px 24px rgba(0,0,0,.85)}
.film-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:9px;color:var(--ink2)}
.film-cue:hover{color:#fff}
.film-arrow{font-family:var(--m);font-size:15px;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(6px);opacity:1}}
.top--over{background:transparent;backdrop-filter:none;border:0}
.top--over .rule{background:transparent}
.top--over.is-stuck{background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
.top--over.is-stuck .rule{background:var(--hair)}

/* page head + chain + reference tables */
.phead{padding:clamp(44px,9vh,112px) 0 clamp(28px,5vh,56px)}
.phead-in{row-gap:clamp(20px,3vh,38px);align-items:start}
.chain{padding:clamp(44px,8vh,96px) 0}
.chain-in{row-gap:26px;align-items:start}
.steps{border-top:1px solid var(--hair);counter-reset:s}
.step{display:grid;grid-template-columns:46px minmax(120px,1.1fr) minmax(0,2fr) minmax(0,1.4fr);gap:clamp(12px,2vw,28px);padding:19px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.step-n{font-family:var(--m);font-size:11px;color:var(--ink3);letter-spacing:.08em}
.step-t{font-size:16px;font-weight:500;letter-spacing:-0.015em}
.step-d{font-size:13.5px;color:var(--ink2);line-height:1.55}
.step-g{font-size:12.5px;color:var(--ink3);line-height:1.5;font-family:var(--m);letter-spacing:-0.01em}
.step-g b{color:var(--acc);font-weight:400}
.tbl{width:100%;border-collapse:collapse;margin-top:16px;font-size:13px}
.tbl th,.tbl td{text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl th{font-family:var(--m);font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--ink3);font-weight:400;border-bottom-color:var(--hair2)}
.tbl td{color:var(--ink2);line-height:1.5}
.tbl td:first-child{color:var(--ink);white-space:nowrap}
.tbl code,.mono{font-family:var(--m);font-size:12px;color:var(--ink)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.note{border-left:1px solid var(--acc);padding:2px 0 2px 16px;margin-top:22px;font-size:13.5px;color:var(--ink2);line-height:1.55;max-width:70ch}
@media(max-width:880px){.step{grid-template-columns:32px minmax(0,1fr)}.step-d,.step-g{grid-column:2}.two{grid-template-columns:1fr}}

/* hero */
.hero{padding:clamp(56px,11vh,150px) 0 clamp(40px,7vh,86px)}
.hero-in{row-gap:clamp(24px,4vh,54px);align-items:start}
h1,.h1{grid-column:4/13;font-size:clamp(34px,6.1vw,88px);line-height:.98;font-weight:500;letter-spacing:-0.035em;text-wrap:balance}
.hero-body{display:flex;flex-direction:column;gap:14px;font-size:clamp(15px,1.15vw,19px);line-height:1.55;max-width:62ch}
.dim{color:var(--ink2)}
.acts{display:flex;flex-wrap:wrap;gap:26px;margin-top:10px}
.lnk{font-family:var(--m);font-size:12px;text-transform:uppercase;letter-spacing:.11em;border-bottom:1px solid var(--hair2);padding-bottom:5px;display:inline-flex;gap:9px;align-items:center}
.lnk:hover{border-color:var(--acc)}
.lnk span{transition:transform .18s}
.lnk:hover span{transform:translateX(4px)}
.lnk--lg{font-size:14px;letter-spacing:.09em}
.spec{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hair)}
.spec>div{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--hair)}
.spec dt{font-family:var(--m);font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--ink3)}
.spec dd{font-size:14px;color:var(--ink)}

/* ticker */
.tick-in{padding:clamp(22px,3.4vh,42px) var(--pad);align-items:end;row-gap:22px}
.tick{grid-column:span 3}
.tick-v{font-family:var(--m);font-size:clamp(26px,3.5vw,54px);line-height:1;font-weight:400;letter-spacing:-0.03em}
.tick-l{font-family:var(--m);font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--ink3);margin-top:10px}
.tick-note{grid-column:10/13;text-align:right;align-self:end}

/* product blocks */
.prod{padding:clamp(48px,8vh,104px) 0}
.prod-in{row-gap:clamp(20px,3vh,34px);align-items:start}
h2{font-size:clamp(23px,2.7vw,40px);line-height:1.08;font-weight:500;letter-spacing:-0.028em;max-width:26ch;text-wrap:balance}
.body{font-size:clamp(14.5px,1.05vw,17px);line-height:1.62;color:var(--ink2);margin-top:18px;max-width:70ch}
.list{list-style:none;margin-top:22px;border-top:1px solid var(--hair)}
.list li{padding:11px 0 11px 26px;border-bottom:1px solid var(--hair);font-size:14.5px;line-height:1.5;color:var(--ink2);position:relative}
.list li:before{content:'';position:absolute;left:0;top:19px;width:12px;height:1px;background:var(--hair2)}
.list b{color:var(--ink);font-weight:600}
.list em{color:var(--ink);font-style:italic}
.est{font-family:var(--m);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--acc);border:1px solid color-mix(in oklab,var(--acc) 45%,transparent);padding:1px 5px}
.list .lnk,.prod .lnk{margin-top:26px}
.figset{align-self:start}
.figs{margin-top:14px;border-top:1px solid var(--hair)}
.figs>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--hair)}
.figs dt{font-size:12.5px;color:var(--ink3);line-height:1.35}
.figs dd{font-size:14.5px;color:var(--ink);white-space:nowrap}
.figs dd.long{white-space:normal;text-align:right;line-height:1.45}
.figs dd a{border-bottom:1px solid var(--hair2)}

/* index list */
.idx{padding:clamp(48px,8vh,104px) 0}
.idx-in{row-gap:26px;align-items:start}
.idx-list{border-top:1px solid var(--hair)}
.idx-list a{display:grid;grid-template-columns:42px minmax(150px,2fr) minmax(0,5fr) 22px;gap:clamp(12px,2vw,28px);align-items:baseline;padding:17px 0;border-bottom:1px solid var(--hair)}
.idx-list a:hover{background:var(--bg2)}
.idx-n{font-family:var(--m);font-size:11px;color:var(--ink3);letter-spacing:.08em}
.idx-t{font-size:16px;font-weight:500;letter-spacing:-0.015em}
.idx-d{font-size:13.5px;color:var(--ink2);line-height:1.5}
.idx-a{font-family:var(--m);font-size:13px;color:var(--ink3);text-align:right}
.idx-list a:hover .idx-a{color:var(--acc)}

/* statement */
.stmt{padding:clamp(48px,9vh,112px) 0}
.pull{font-size:clamp(24px,3.4vw,48px);line-height:1.1;font-weight:400;letter-spacing:-0.03em;max-width:34ch;text-wrap:balance}
.stmt .body{margin-top:26px;max-width:76ch}

/* end */
.end{padding:clamp(48px,9vh,112px) 0}
.end-in{row-gap:30px;align-items:end}
.end-h{font-size:clamp(24px,3.4vw,48px);line-height:1.06;font-weight:500;letter-spacing:-0.03em;max-width:none}
.end-a{display:flex;flex-direction:column;align-items:flex-start;gap:20px}

/* worked example (Aggregates · Smart Select) and the bold claim under it */
.ex{margin-top:24px;border-top:1px solid var(--hair);padding-top:18px}
.ex-t{max-width:620px}
.ex-t th:not(:first-child),.ex-t td:not(:first-child){text-align:right;padding-right:0;padding-left:14px;white-space:nowrap}
.ex-t td.num{font-size:14px;color:var(--ink)}
.ex-sum td{border-bottom-color:var(--hair2);color:var(--ink);font-weight:600}
.ex-sum td.num{font-size:16px}
.ex-tons td{color:var(--ink)}
.ex-edge td{white-space:normal;padding:16px 0 4px;border-bottom:0;font-size:clamp(17px,1.5vw,22px);line-height:1.3;letter-spacing:-0.02em;color:var(--ink2)}
.ex-edge b{color:var(--acc);font-weight:700}
.ex-tag{display:inline-block;margin-right:10px;font-family:var(--m);font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);border:1px solid var(--hair2);padding:1px 6px;vertical-align:2px}
.ex-tag--win{color:var(--acc);border-color:color-mix(in oklab,var(--acc) 50%,transparent)}
.ex-out{margin-top:16px;font-size:clamp(14.5px,1.05vw,17px);line-height:1.6;color:var(--ink2);max-width:62ch}
.ex-out b{color:var(--ink);font-weight:600}
.ex-cap{margin-top:8px;font-family:var(--m);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink3)}
.edge{margin-top:24px;font-size:clamp(18px,1.7vw,24px);line-height:1.3;font-weight:600;letter-spacing:-0.02em;color:var(--ink);border-left:2px solid var(--acc);padding-left:16px;max-width:40ch;text-wrap:balance}
@media(max-width:700px){
.ex-tag{display:none}
.ex-t td:first-child{white-space:normal}
.ex-t th:not(:first-child),.ex-t td:not(:first-child){padding-left:10px}
.ex-t td.num{font-size:13px}.ex-sum td.num{font-size:14px}
}

/* screenshots of the app (SITE-SHOTS-1) — the real light screens, framed by a hairline on the dark page */
.shot{margin:26px 0 0}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--hair2)}
/* the app draws itself at 0.62 on a 1440 screen, so a shot is shown a little larger than the app would show it */
.shot--card img{width:min(100%,460px);border:0;border-radius:15px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
/* the screens sit in the right column where the stats panels were, and stay in view while the section scrolls */
.shots{align-self:start;position:sticky;top:96px;display:flex;flex-direction:column;gap:30px}
.shots .shot{margin:0}
.shots .shot--card img{width:100%}
.shot a{display:block;cursor:zoom-in}
@media(max-width:1080px){.shots{position:static}}
.shot figcaption{margin-top:10px;font-family:var(--m);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink3)}

/* Aggregates page (SITE-AGG-LAYOUT-1) — scoped by body.agg while the other pages keep the original look.
   Brighter text, the section label above its heading, content from the left edge, one rhythm for every section. */
.agg{--ink2:#bfc3c8;--ink3:#868b92}
.agg .lbl{font-size:11.5px}
.agg .c1-4{grid-column:1/5}.agg .c5-8{grid-column:5/9}.agg .c1-8{grid-column:1/9}.agg .c1-12{grid-column:1/13}
.agg .ag-kick{display:block;margin-bottom:16px}
.agg .ag-intro{padding:clamp(64px,11vh,128px) 0 clamp(56px,9vh,104px)}
.agg .ag-intro .grid12{row-gap:30px;align-items:start}
.agg .ag-intro .ag-kick{margin-bottom:0}
.agg .ag-beat{border-top:1px solid var(--hair2);padding-top:20px}
.agg .ag-beat h3{font-size:clamp(21px,1.8vw,28px);line-height:1.15;font-weight:600;letter-spacing:-0.02em}
.agg .ag-beat p{margin-top:12px;font-size:clamp(16px,1.15vw,18px);line-height:1.55;color:var(--ink2);max-width:34ch}
.agg .ag-intro .acts{margin-top:4px}
.agg .ag-sec{padding:clamp(72px,12vh,136px) 0}
.agg .ag-in{row-gap:40px;align-items:start}
.agg .ag-sec h2{font-size:clamp(28px,3.1vw,46px);max-width:22ch}
.agg .ag-lead{margin-top:20px;font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:var(--ink2);max-width:56ch}
.agg .list{margin-top:30px;max-width:62ch;padding-left:0}
.agg .list li{font-size:16.5px;line-height:1.55;color:var(--ink2);padding:14px 0 14px 28px}
.agg .list li:before{top:26px}
.agg .ex{margin-top:34px}
.agg .ex-out{font-size:16px}
.agg .edge{margin-top:34px}
.agg .ag-next{margin-top:30px}
.agg .ag-steps{margin-top:34px}
.agg .ag-steps .step{grid-template-columns:52px minmax(150px,1fr) minmax(0,3.2fr);padding:22px 0}
.agg .ag-steps .step-n{font-size:12px}
.agg .ag-steps .step-t{font-size:18px}
.agg .ag-steps .step-d{font-size:16.5px;line-height:1.55;color:var(--ink2)}
@media(max-width:1080px){.agg .c1-4,.agg .c5-8,.agg .c1-8,.agg .c1-12{grid-column:1/13}}
@media(max-width:880px){.agg .ag-steps .step{grid-template-columns:32px minmax(0,1fr)}.agg .ag-steps .step-d{grid-column:2}}

/* walkthrough form (WALKTHROUGH-FORM-1) — hairline boxes, mono labels, the accent only on focus and the chosen side */
.bk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;margin-top:18px;scroll-margin-top:96px}
.bk-f{display:flex;flex-direction:column;gap:7px;min-width:0;border:0;padding:0}
.bk-f--w{grid-column:1/-1}
.bk-l{font-family:var(--m);font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--ink3);padding:0}
.bk-l i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.75;margin-left:6px}
.bk input,.bk textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--bg2);border:1px solid var(--hair2);border-radius:0;padding:11px 12px;outline:none;width:100%}
.bk textarea{min-height:112px;resize:vertical;line-height:1.5}
.bk textarea::placeholder{color:var(--ink3)}
.bk input:focus,.bk textarea:focus{border-color:var(--acc)}
.bk-ch{display:flex;flex-wrap:wrap;gap:8px}
.bk-ch label{position:relative;cursor:pointer}
.bk-ch input{position:absolute;opacity:0;width:1px;height:1px}
.bk-ch span{display:inline-block;font-family:var(--m);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink2);border:1px solid var(--hair2);padding:9px 14px}
.bk-ch label:hover span{color:var(--ink)}
.bk-ch input:checked+span{color:var(--ink);border-color:var(--acc)}
.bk-ch input:focus-visible+span{outline:1px solid var(--acc);outline-offset:2px}
.bk-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bk-go{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:4px}
.bk-btn{font-family:var(--m);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--bg);background:var(--ink);border:1px solid var(--ink);border-radius:0;padding:13px 20px;cursor:pointer}
.bk-btn:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.bk-btn[disabled]{opacity:.5;cursor:default}
.bk-msg{grid-column:1/-1;font-size:14px;color:var(--ink2);min-height:1px}
.bk-msg.is-err{color:var(--bad)}
.bk-done{margin-top:18px;font-size:clamp(18px,1.6vw,24px);line-height:1.35;letter-spacing:-0.02em;border-left:1px solid var(--acc);padding-left:16px}
@media(max-width:700px){.bk{grid-template-columns:1fr}}

/* footer */
.foot{margin-top:auto}
.foot-in{padding:40px var(--pad) 56px;row-gap:28px;align-items:start}
.foot-in>div{display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--ink2)}
.foot-in .lbl{margin-bottom:3px}
.foot .mark{font-size:15px;margin-bottom:4px}

@media(max-width:1080px){
.c1-3,.c4-12,.c4-8,.c10-12,.c4-11,.c1-7,.c9-12,.h1{grid-column:1/13}
.tick{grid-column:span 4}.tick-note{grid-column:1/13;text-align:left}
.c5-6,.c7-8{grid-column:span 6}.c9-10,.c11-12{grid-column:span 6}
.idx-list a{grid-template-columns:32px minmax(0,1fr) 20px}
.idx-n{grid-column:1;grid-row:1}
.idx-t{grid-column:2;grid-row:1}
.idx-a{grid-column:3;grid-row:1}
.idx-d{grid-column:2/4;grid-row:2}
}
@media(max-width:700px){
.nav a:not(.nav-cta):not(.nav-login){display:none}
.nav-login{border-left:0;padding-left:0}
.tick{grid-column:span 12}
.foot-in>div{grid-column:1/13}
}