/* Shared base for the design studies. Each study defines its own tokens and style. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.shell{width:min(100% - 48px,1320px);margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;left:16px;top:-80px;z-index:60;background:var(--ink);color:var(--bg);padding:12px 16px}
.skip-link:focus{top:12px}

.study-banner{position:relative;z-index:40;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 18px;padding:9px 16px;background:#0b0d12;color:#e9ecf2;font:500 13px/1.4 system-ui,sans-serif;text-align:center}
.study-banner a{color:#9fb8ff;text-decoration:none;display:inline-flex;gap:6px;padding-block:4px}
.study-banner a:hover{text-decoration:underline}

.site-header{position:sticky;top:0;z-index:30;transition:background .3s,box-shadow .3s}
.site-header.is-scrolled{background:var(--header-bg,var(--bg));box-shadow:0 1px 0 var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px}
.site-header nav{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500}
.site-header nav a{text-decoration:none;padding-block:10px}
.site-header nav a[aria-current="page"]{box-shadow:inset 0 -2px var(--accent)}
.site-header nav a:not(.nav-cta):hover{color:var(--accent)}
.nav-cta{background:var(--accent);color:var(--on-accent,#fff);padding:12px 20px!important;border-radius:var(--radius)}
.menu-toggle{border:1px solid var(--line);background:transparent;color:inherit;font:600 15px var(--font-body);min-height:44px;padding:0 18px;border-radius:var(--radius);cursor:pointer}

.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border:0;border-radius:var(--radius);background:var(--accent);color:var(--on-accent,#fff);font:600 16px var(--font-body);text-decoration:none;cursor:pointer;transition:transform .25s,filter .25s}
.button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.button.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}

.demo-form fieldset{border:0;margin:0;padding:0;min-width:0}
.demo-form legend{font:var(--legend-font,600 22px/1.2 var(--font-head));margin-bottom:8px}
.form-intro{color:var(--muted);margin-bottom:20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin:20px 0 24px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:15px;font-weight:600}
.field label span{font-weight:400;color:var(--muted);font-size:13px}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--field-line,var(--line));border-radius:calc(var(--radius) * .6);background:var(--field-bg,transparent);color:inherit;font:inherit;font-size:16px}
.field textarea{min-height:120px;resize:vertical}
.field [aria-invalid="true"]{border-color:#d9534f}
.field-help{font-size:14px;color:var(--muted)}
.field-error{font-size:14px;color:#d9534f;min-height:0}
.field-error:empty{display:none}
.form-status{margin-top:16px;font-weight:600}
.form-status:empty{display:none}
.form-note{margin-top:14px;font-size:13px;color:var(--muted)}

.study-footer{background:#0b0d12;color:#e9ecf2;padding:56px 0}
.study-footer .shell{display:grid;grid-template-columns:1fr 1.4fr auto;gap:24px 48px;align-items:center}
.study-footer-k{font:600 13px system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9fb8ff}
.study-footer p:not(.study-footer-k){color:#b9c1d0;font:400 15px/1.6 system-ui,sans-serif}
.study-footer .button{background:#3b6fff;color:#fff;border-radius:99px;font-family:system-ui,sans-serif}

.reveal-ready [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal-ready [data-reveal].is-in{opacity:1;transform:none}

@media(max-width:900px){
 .site-header nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 24px;background:var(--header-bg,var(--bg));box-shadow:0 12px 24px rgba(0,0,0,.12);display:none}
 .site-header nav.is-open{display:flex}
 .site-header nav a{padding:14px 0;font-size:18px;border-bottom:1px solid var(--line)}
 .nav-cta{margin-top:16px;text-align:center;border-bottom:0!important}
 html:not(:has(.menu-toggle:not([hidden]))) .site-header nav{position:static;display:flex;flex-direction:row;flex-wrap:wrap;box-shadow:none;padding:0}
 .study-footer .shell{grid-template-columns:1fr}
}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}.shell{width:calc(100% - 40px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media(min-width:901px){.menu-toggle{display:none!important}}
h1+.lead,h2+.lead{margin-top:22px}

/* Scroll-linked values default to the finished state: without JS or with reduced motion nothing is tilted or hidden. */
[data-scroll]{--enter:1;--exit:0}
.split-ready [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .14em;margin:0 -.08em -.14em}
.split-ready [data-split] .w>span{display:inline-block;transform:translateY(112%) rotate(5deg);transform-origin:0 100%;transition:transform 1.05s cubic-bezier(.16,1,.3,1) calc(var(--wi) * 55ms)}
.split-ready [data-split].is-split .w>span{transform:none}
/* [data-light]: words start dim and light up with scroll (study-kit.js); colour comes from the study. */
[data-light].light-ready .lw{opacity:.22;transition:opacity .45s,color .45s}
[data-light].light-ready .lw.is-lit{opacity:1}
/* [data-hscroll]: the inner block pins while the track slides sideways (wide screens only). */
[data-hscroll].is-pinned{padding:0}
[data-hscroll].is-pinned .h-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
[data-hscroll].is-pinned [data-track]{overflow:visible;scroll-snap-type:none;will-change:transform}
[data-hscroll].is-pinned [data-dir]{display:none}
/* Filtered-out items must leave the layout, whatever display a study gives them. */
[hidden]{display:none!important}