/* ScaleIO landing pages: shared styles (the home page carries its own inline copy of the base rules).
   Brand: paper, ink, one green move per screen, Archivo at three widths, the -15deg wedge.
   Tokens come from /assets/tokens.css. */
:root{--pad:48px;--max:1280px;--ink-bg:#111111;--ink-surface:#1C1B19;
  --go-poster:#0B7A4E;--go-deep:#0B3D2C;--mint:#CFEBDD;--mint-wash:#E3F2EA;--mint-deep:#A8DCC3;--dur-rv:600ms}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink-bg:#1C1B19;--ink-surface:#242320}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative}
@media (max-width:860px){:root{--pad:20px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:999px;z-index:50}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.glyph{width:100%;height:100%;display:block}
.lbl{font-stretch:118%;text-transform:uppercase;font-weight:500;letter-spacing:.12em;font-size:12px;line-height:1.3;color:var(--text-3);display:block}
.cond{font-stretch:62%;font-weight:800;text-transform:uppercase;letter-spacing:-.005em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;font:600 15px/1 var(--font);border:1px solid transparent;text-decoration:none;white-space:nowrap;transition:opacity var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.btn-ink{background:var(--text);color:var(--bg)}
.btn-ink:hover{opacity:.86}
.btn-line{background:transparent;color:var(--text);border-color:var(--text)}
.btn-line:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.btn-go{background:var(--go-button);color:var(--on-go)}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.nav .brand img{height:30px;width:auto}
.nav nav{margin-left:auto}
.nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;font-size:14px;color:var(--text-2)}
.nav ul a{text-decoration:none}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--text)}
.nav ul a[aria-current="page"]{font-weight:600}
@media (max-width:1060px){.nav nav{display:none}.nav .btn{margin-left:auto}}

/* breadcrumb */
.crumbs{padding:22px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:13px;color:var(--text-3)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* hero */
.lp-hero{position:relative;overflow:hidden;padding:56px 0 88px;border-bottom:1px solid var(--line)}
.lp-hero .cw{position:absolute;background:var(--go);clip-path:polygon(0 0,100% 50%,0 100%);transform:rotate(var(--angle));pointer-events:none;width:clamp(200px,28vw,420px);height:clamp(230px,32vw,480px);right:clamp(-220px,-12vw,-80px);top:-60px;z-index:0}
.lp-hero .grid{display:grid;grid-template-columns:1.3fr .7fr;gap:56px;align-items:end;position:relative;z-index:1}
.lp-hero h1{font-weight:500;font-size:clamp(44px,6.4vw,96px);line-height:.92;letter-spacing:-.06em;margin:22px 0 0;max-width:15ch}
.lp-hero h1 .w{width:.32em;height:.36em;margin-left:.06em;background:var(--text)}
.lp-hero .lede{font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--text-2);margin:26px 0 0;max-width:40ch}
.lp-hero .row{margin-top:34px}
.lp-hero .glyphbox{justify-self:end;width:min(240px,100%);aspect-ratio:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-tile);padding:36px;color:var(--text)}
@media (max-width:900px){.lp-hero .grid{grid-template-columns:1fr}.lp-hero .glyphbox{justify-self:start;width:132px;padding:22px}.lp-hero .cw{width:150px;height:170px;right:-90px;top:-40px}}

/* readings strip */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--text);margin-top:64px;position:relative;z-index:1}
.facts div{padding:22px 24px 8px 0}
.facts div+div{padding-left:24px;border-left:1px solid var(--line)}
.facts .read{display:block;font-weight:500;letter-spacing:-.05em;line-height:.95;font-size:clamp(34px,3.8vw,54px)}
.facts .cap{display:block;font-size:14px;color:var(--text-3);margin-top:10px}
@media (max-width:700px){.facts{grid-template-columns:1fr}.facts div,.facts div+div{padding:16px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* body sections */
.lp-sec{padding:88px 0;border-bottom:1px solid var(--line)}
.lp-sec .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.lp-sec h2{font-weight:600;font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-.045em;margin:16px 0 0}
.prose{max-width:66ch}
.prose p{margin:0 0 18px;color:var(--text-2)}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--text);font-weight:600}
.prose a{text-underline-offset:3px}
.prose ul{margin:0 0 18px;padding:0;list-style:none;border-top:1px solid var(--line)}
.prose ul li{padding:14px 0 14px 28px;border-bottom:1px solid var(--line);position:relative;color:var(--text-2)}
.prose ul li::before{content:"";position:absolute;left:2px;top:22px;width:10px;height:11px;background:var(--text);clip-path:polygon(0 0,100% 50%,0 100%);transform:rotate(-15deg)}
.prose ol.steps{counter-reset:s;list-style:none;margin:0 0 18px;padding:0;border-top:2px solid var(--text)}
.prose ol.steps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:8px;padding:18px 0;border-bottom:1px solid var(--line);color:var(--text-2)}
.prose ol.steps li::before{content:counter(s,decimal-leading-zero);font-stretch:118%;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--text-3);padding-top:4px}
.prose ol.steps b{display:block;color:var(--text)}
@media (max-width:900px){.lp-sec{padding:64px 0}.lp-sec .grid{grid-template-columns:1fr;gap:24px}}

/* coloured grounds for the one or two feature sections per page */
.wash{--bg:var(--mint-wash);--surface:#FFFFFF;--text:#111111;--text-2:#2F4A3D;--text-3:#3D5A4C;--line:#C9E3D5;--line-2:#D6EBDF;background:var(--bg);color:var(--text)}
.deep{--bg:var(--go-deep);--surface:#0F4A36;--text:#F3F0EA;--text-2:var(--mint);--text-3:var(--mint-deep);--line:rgb(207 235 221 / .24);--line-2:rgb(207 235 221 / .14);--go:#1DBF84;--focus:#1DBF84;background:var(--bg);color:var(--text)}
.lime{--bg:#009966;--surface:#00A36D;--text:#111111;--text-2:#111111;--text-3:#111111;--line:rgb(17 17 17 / .28);--go:#F3F0EA;--focus:#111111;background:var(--bg);color:var(--text)}
.ink{--bg:var(--ink-bg);--surface:var(--ink-surface);--text:#EDEAE3;--text-2:#C9C5BD;--text-3:#9A968F;--line:#34322E;--line-2:#2A2926;--go:#1DBF84;--go-button:#1DBF84;--on-go:#111111;--move:#0B0B0A;--on-move:#EDEAE3;background:var(--bg);color:var(--text)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wash{--bg:#12281F;--surface:#1C1B19;--text:#EDEAE3;--text-2:#C9C5BD;--text-3:#9A968F;--line:#23473A;--line-2:#1B3A2E}}
.deep .prose ul li::before,.ink .prose ul li::before{background:var(--go)}

/* related instruments */
.related{padding:88px 0;border-bottom:1px solid var(--line)}
.related h2{font-weight:600;font-size:clamp(28px,3vw,42px);letter-spacing:-.045em;margin:16px 0 32px}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tiles li{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-tile);transition:background var(--dur-slow) var(--ease),color var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease)}
.tiles a{display:flex;flex-direction:column;min-height:210px;padding:22px;text-decoration:none;position:relative;z-index:1}
.tiles .ic{display:block;width:52px;height:52px;color:var(--text)}
.tiles h3{font-weight:600;font-size:22px;letter-spacing:-.035em;margin:auto 0 6px;line-height:1.05;padding-top:24px}
.tiles p{margin:0;font-size:14.5px;color:var(--text-2);line-height:1.35}
.tiles li::after{content:"";position:absolute;right:-34px;bottom:-40px;width:120px;height:130px;background:#1DBF84;clip-path:polygon(0 0,100% 50%,0 100%);transform:rotate(-15deg) translate(45%,25%);opacity:0;transition:transform 420ms var(--ease),opacity 260ms var(--ease);z-index:0}
.tiles li:hover{background:#111111;border-color:#111111;color:#EDEAE3}
.tiles li:hover p{color:#C9C5BD}
.tiles li:hover .ic{color:#EDEAE3}
.tiles li:hover::after{opacity:1;transform:rotate(-15deg)}
@media (max-width:980px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tiles{grid-template-columns:1fr}.tiles a{min-height:0}}

/* faq */
.lp-faq{padding:88px 0;border-bottom:1px solid var(--line)}
.lp-faq .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.lp-faq h2{font-weight:600;font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-.045em;margin:16px 0 0}
.faq{border-top:2px solid var(--text)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px 0;font-weight:600;font-size:clamp(17px,1.6vw,20px);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:14px;height:14px;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:currentColor;transition:transform var(--dur-base) var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{margin:0 0 22px;color:var(--text-2);max-width:62ch;font-size:16px}
@media (max-width:900px){.lp-faq{padding:64px 0}.lp-faq .grid{grid-template-columns:1fr;gap:28px}}

/* hub cards (instruments / industries index) */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cards li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-tile)}
.cards a{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:24px;text-decoration:none;align-items:start}
.cards .ic{width:56px;height:56px;color:var(--text)}
.cards h3{margin:2px 0 6px;font-weight:600;font-size:22px;letter-spacing:-.035em}
.cards p{margin:0;color:var(--text-2);font-size:15.5px;line-height:1.45}
.cards a:hover h3{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){.cards{grid-template-columns:1fr}}

/* final call to action: full green poster, one CTA */
.lp-final{position:relative;overflow:hidden;padding:120px 0}
.lp-final .cw{position:absolute;background:#F3F0EA;clip-path:polygon(0 0,100% 50%,0 100%);transform:rotate(var(--angle));pointer-events:none;width:clamp(240px,38vw,600px);height:clamp(280px,44vw,690px);right:clamp(-300px,-16vw,-100px);top:-110px;z-index:0}
.lp-final .wrap>*{position:relative;z-index:1}
.lp-final h2{font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(72px,12vw,196px);line-height:.82;letter-spacing:-.005em;margin:20px 0 26px}
.lp-final p{font-size:clamp(18px,1.6vw,21px);max-width:40ch;margin:0 0 32px}
.lp-final .btn-ink{background:#111111;color:#F3F0EA}
@media (max-width:620px){.lp-final{padding:80px 0}.lp-final .cw{width:170px;height:200px;right:-100px;top:auto;bottom:-60px}}

/* footer */
footer{border-top:1px solid var(--line);padding:48px 0 56px;font-size:14px;color:var(--text-2)}
footer .cols{display:grid;grid-template-columns:1.1fr repeat(3,minmax(0,1fr));gap:32px}
footer .brand img{height:26px;width:auto}
footer h2{font-stretch:118%;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600;color:var(--text-3);margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
footer .by{margin-top:36px;color:var(--text-3);font-size:13px}
@media (max-width:860px){footer .cols{grid-template-columns:1fr 1fr}footer .cols>div:first-child{grid-column:1/-1}}

/* 404 */
.nf{padding:120px 0 140px;position:relative;overflow:hidden}
.nf .big{font-stretch:62%;font-weight:800;font-size:clamp(120px,22vw,320px);line-height:.8;letter-spacing:-.01em}

/* motion (only with JS and motion allowed) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity var(--dur-rv) var(--ease),transform var(--dur-rv) var(--ease)}
.js .rv.in{opacity:1;transform:none}
@keyframes enter{0%{transform:translate(18%,-10%) rotate(-50deg);opacity:0}100%{transform:rotate(var(--angle));opacity:1}}
.js .cw.enter{animation:enter 1100ms var(--ease) 200ms both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* consent banner (built by /assets/tracking.js) */
.cc{position:fixed;z-index:60;left:24px;bottom:24px;width:min(440px,calc(100vw - 32px));background:var(--surface,#FFFFFF);color:var(--text,#111111);border:1px solid var(--line,#D9D5CD);border-radius:18px;padding:22px 22px 18px;box-shadow:0 24px 60px -24px rgb(17 17 17 / .35),0 2px 8px rgb(17 17 17 / .06);opacity:0;transform:translateY(12px);transition:opacity var(--dur-base,180ms) var(--ease),transform var(--dur-base,180ms) var(--ease)}
.cc.on{opacity:1;transform:none}
.cc[hidden]{display:none}
.cc-h{font-weight:650;font-size:20px;letter-spacing:-.03em;margin:0}
.cc-h::after{content:"";display:inline-block;width:.34em;height:.4em;margin-left:.12em;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);transform:rotate(-15deg)}
.cc-p{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--text-2,#3A3835)}
.cc-prefs{margin:14px 0 0;border-top:1px solid var(--line,#D9D5CD)}
.cc-prefs[hidden]{display:none}
.cc-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-2,#E7E3DB);cursor:pointer}
.cc-row b{display:block;font-size:14px;font-weight:600}
.cc-row small{display:block;font-size:12.5px;color:var(--text-3,#6B6863);margin-top:2px}
.cc-row input{appearance:none;flex:none;width:40px;height:24px;border-radius:999px;background:var(--line,#D9D5CD);position:relative;cursor:pointer;margin:0;transition:background var(--dur-fast,120ms) var(--ease)}
.cc-row input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgb(0 0 0 / .2);transition:transform var(--dur-fast,120ms) var(--ease)}
.cc-row input:checked{background:#0B7A4E}
.cc-row input:checked::after{transform:translateX(16px)}
.cc-row input:disabled{opacity:.55;cursor:not-allowed}
.cc-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.cc-act [hidden]{display:none}
.cc-link{background:none;border:0;padding:0 4px;font:500 14px/1 var(--font);color:var(--text-2,#3A3835);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:640px){.cc{left:16px;bottom:16px;width:calc(100vw - 32px)}.cc-act .btn{flex:1 1 auto}}