:root{
  /* Light is the default. Contrast-checked: body text >=7:1, accents >=5.6:1. */
  --bg:#ffffff; --bg-2:#f5f8fc; --raised:#eef3f9;
  --text:#0d1826; --muted:#4a5a70; --dim:#5f6f85;
  --accent:#0b62d6; --accent-2:#0a58c2; --on-accent:#ffffff;
  --line:rgba(13,24,38,.14); --line-2:rgba(13,24,38,.09);
  --header:rgba(255,255,255,.88);
  --glow-1:rgba(11,98,214,.10); --glow-2:rgba(11,98,214,.06);
  --grid:rgba(13,24,38,.055); --dash:rgba(13,24,38,.20);
  --shadow:0 1.25rem 2.5rem rgba(13,24,38,.13);
  --ph-input:#7a8798;
  --radius:.7rem;
}
/* Retained but inert: nothing sets data-theme now that the toggle is gone.
   Re-enabling dark means restoring the button and its handler only. */
html[data-theme="dark"]{
  --bg:#0b1220; --bg-2:#0e1626; --raised:#111a2e;
  --text:#e6edf6; --muted:#9aa8bd; --dim:#8b9ab0;
  --accent:#409fff; --accent-2:#6fb6ff; --on-accent:#06101f;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --header:rgba(11,18,32,.86);
  --glow-1:rgba(64,159,255,.18); --glow-2:rgba(64,159,255,.10);
  --grid:rgba(255,255,255,.032); --dash:rgba(255,255,255,.17);
  --shadow:0 1.5rem 3rem rgba(0,0,0,.35);
  --ph-input:#6b7a90;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.15; letter-spacing:-.02em; margin:0; text-wrap:balance}
p{margin:0; text-wrap:pretty}
a{color:var(--accent-2)}
.wrap{width:min(72rem,100% - 2.5rem); margin-inline:auto}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:99; background:var(--accent); color:var(--on-accent); padding:.6rem 1rem; border-radius:.4rem}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}

header{position:sticky; top:0; z-index:20; background:var(--header); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-2)}
.bar{display:flex; align-items:center; gap:1.25rem; padding:.85rem 0}
.logo{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none}
.logo span{display:block; background-color:var(--text);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain}
.logo .m{width:2.56rem; height:2.40rem; -webkit-mask-image:url(/logo-mark.svg); mask-image:url(/logo-mark.svg)}
/* Box includes the 'g' descender, so nudge down to sit the cap-height block
   optically level with the mark rather than centring the raw boxes. */
.logo .t{width:6.39rem; height:1.59rem; margin-top:.16rem;
         -webkit-mask-image:url(/logo-text.svg); mask-image:url(/logo-text.svg)}
/* Narrow screens keep the smaller lockup: at full size the logo, toggle and
   CTA together overflow a 375px viewport. */
nav{margin-left:auto; display:flex; align-items:center; gap:1.5rem}
nav a{color:var(--muted); text-decoration:none; font-size:.9375rem; white-space:nowrap}
nav a:hover{color:var(--text)}
/* Six links need ~910px. Between 832px and 992px, drop the three content
   links (all also in the footer) and keep Roadmap / Early access / Pricing. */
@media (max-width:62rem){ nav .hide-md{display:none} }
@media (max-width:52rem){ nav .hide-sm{display:none} }

.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.2rem; border-radius:var(--radius);
     font-weight:600; text-decoration:none; border:1px solid transparent; font-size:.9375rem; cursor:pointer;
     white-space:nowrap;
     transition:background-color .18s,border-color .18s,color .18s,transform .18s}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-2); transform:translateY(-1px)}
.btn-ghost{border-color:var(--line); color:var(--text)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent-2)}

/* screenshot slots */
.frame{border:1px solid var(--line); border-radius:.8rem; overflow:hidden; background:var(--bg-2);
       box-shadow:var(--shadow)}
.frame img{display:block; width:100%; height:auto}
.ph{
  border:1px dashed var(--dash); border-radius:.8rem; color:var(--dim);
  display:grid; place-content:center; justify-items:center; gap:.45rem; padding:1.5rem; text-align:center;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/2rem 2rem,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/2rem 2rem,
    var(--bg-2);
}
.ph svg{width:1.9rem; height:1.9rem; opacity:.65}
.ph-label{font-size:.9375rem; color:var(--muted); max-width:26ch}
.ph-file{font-size:.75rem; opacity:.55; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.hero{position:relative; overflow:hidden; padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(3rem,7vw,5rem)}
.hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(55rem 34rem at 12% -15%, var(--glow-1), transparent 62%),
             radial-gradient(40rem 30rem at 105% 15%, var(--glow-2), transparent 60%)}
.hero .wrap{position:relative; z-index:1; display:grid; gap:clamp(2.5rem,5vw,3.5rem); align-items:center}
@media (min-width:64rem){ .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)} }
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; padding:.35rem .85rem; border:1px solid var(--line);
         border-radius:999px; background:var(--raised); color:var(--muted);
         font-size:.78125rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase}
.dot{width:.45rem; height:.45rem; border-radius:50%; background:var(--accent); flex:none}
h1{font-size:clamp(2.1rem,1.2rem + 3.2vw,3.35rem); font-weight:600; margin:1.1rem 0 0; max-width:19ch}
h1 .accent{color:var(--accent-2)}
.lede{margin-top:1.15rem; max-width:46ch; color:var(--muted); font-size:clamp(1.05rem,1rem + .3vw,1.175rem)}
.cta-row{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem}
.note{margin-top:.9rem; color:var(--dim); font-size:.875rem}

section{padding:clamp(3rem,7vw,5.5rem) 0; border-top:1px solid var(--line-2)}
.kicker{color:var(--accent-2); font-size:.8125rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase}
h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.35rem); font-weight:600; margin:.7rem 0 0; max-width:24ch}
.sub{margin-top:.9rem; color:var(--muted); max-width:58ch}

.split{display:grid; gap:clamp(2rem,4vw,3rem); align-items:center; margin-top:2.6rem}
@media (min-width:64rem){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .split.flip > *:first-child{order:2}
}

.grid{display:grid; gap:1rem; margin-top:2.4rem}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.card{background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius); padding:1.5rem}
.card h3{font-size:1.0625rem; font-weight:600}
.card p{margin-top:.55rem; color:var(--muted); font-size:.9375rem}

.callout{margin-top:1.9rem; padding:1.15rem 1.35rem; border:1px solid var(--line);
    border-left:3px solid var(--accent); border-radius:.6rem; background:var(--raised)}
.callout p{color:var(--muted); font-size:.9375rem}
.callout strong{color:var(--text)}

ul.ticks{margin:1.4rem 0 0; padding:0; list-style:none; display:grid; gap:.7rem}
ul.ticks li{padding-left:1.7rem; position:relative; color:var(--muted); font-size:.9375rem}
/* Proper check: short arm + long arm, rotated. The previous equal-armed box
   rotated -45deg read as a chevron rather than a tick. */
ul.ticks li::before{content:""; position:absolute; left:.1rem; top:.42em; width:.38rem; height:.72rem;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg)}
ul.ticks strong{color:var(--text); font-weight:600}

.std{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem}
.std span{border:1px solid var(--line); border-radius:.4rem; padding:.35rem .7rem;
          font-size:.8125rem; color:var(--muted); background:var(--raised)}

.form-wrap{background:var(--bg-2); border:1px solid var(--line-2); border-radius:1rem; padding:clamp(1.5rem,4vw,2.5rem)}
form{display:grid; gap:1rem; margin-top:1.6rem}
.row{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
label{display:block; font-size:.875rem; font-weight:500; margin-bottom:.4rem}
input,textarea{width:100%; padding:.7rem .85rem; border-radius:.5rem; border:1px solid var(--line);
  background:var(--bg); color:var(--text); font:inherit; font-size:.9375rem}
input::placeholder,textarea::placeholder{color:var(--ph-input)}
textarea{min-height:6.5rem; resize:vertical}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.privacy{color:var(--dim); font-size:.8125rem}
.alert{margin-top:1.4rem; padding:.9rem 1.1rem; border-radius:.5rem; font-size:.9375rem; display:none}
.alert.ok{display:block; background:rgba(64,159,255,.12); border:1px solid rgba(64,159,255,.35); color:var(--text)}
.alert.err{display:block; background:rgba(200,40,40,.08); border:1px solid rgba(200,40,40,.30); color:#a11}

footer{border-top:1px solid var(--line-2); padding:2.5rem 0; color:var(--dim); font-size:.875rem}
.foot{display:flex; flex-wrap:wrap; gap:1rem; align-items:center}
.foot a{color:var(--muted); text-decoration:none}
.foot a:hover{color:var(--text)}
.foot .right{margin-left:auto}

/* auto-fit lands on 4 columns at desktop widths, which leaves the six-card
   sections ragged (4 + 2). Pin to three so they break evenly. */
/* Pin the column counts from tablet up. auto-fit derives a count from the
   available width, which leaves 4- and 6-card groups ragged in the 48-64rem
   band; pinning keeps every group breaking evenly at any width. */
@media (min-width:48rem){
  .cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Header responsive rules live at the end: they must come after the base
   nav/.btn declarations to win on equal specificity. */
@media (max-width:40rem){
  .logo .m{width:1.90rem; height:1.78rem}
  .logo .t{width:4.75rem; height:1.18rem; margin-top:.12rem}
  .bar{gap:.7rem}
  nav{gap:.7rem}
  .btn{padding:.6rem .9rem; font-size:.875rem}
}
/* Measured: the full lockup fits down to ~336px. Below that, drop the
   wordmark so the toggle and CTA keep their sizes. */
@media (max-width:21rem){
  .logo .t{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:1ms!important; animation-duration:1ms!important}
  .btn:hover{transform:none}
}

/* ── multi-page shell ─────────────────────────────────────────────────── */
.breadcrumb{font-size:.8125rem; color:var(--dim); margin-bottom:1.1rem}
.breadcrumb a{color:var(--muted); text-decoration:none}
.breadcrumb a:hover{color:var(--text)}

.page-head{padding:clamp(2.75rem,7vw,4.5rem) 0 clamp(2.5rem,5vw,3.5rem); position:relative; overflow:hidden}
.page-head::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(48rem 26rem at 8% -30%, var(--glow-1), transparent 62%)}
.page-head .wrap{position:relative; z-index:1}
.page-head h1{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem); font-weight:600; margin:.7rem 0 0; max-width:20ch}
.page-head .lede{margin-top:1.1rem; max-width:56ch; color:var(--muted); font-size:clamp(1.02rem,1rem + .2vw,1.14rem)}

.cta-band{border-top:1px solid var(--line-2); background:var(--bg-2)}
.cta-band h2{max-width:26ch}
.cta-band .cta-row{margin-top:1.6rem}

.foot-cols{display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  padding-bottom:2rem; margin-bottom:1.5rem; border-bottom:1px solid var(--line-2)}
.foot-cols h3{font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); margin-bottom:.85rem}
.foot-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.foot-cols a{color:var(--muted); text-decoration:none; font-size:.9375rem}
.foot-cols a:hover{color:var(--text)}

.related{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin-top:2.4rem}
.related a{display:block; padding:1.1rem 1.25rem; border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--bg-2); text-decoration:none; transition:border-color .18s}
.related a:hover{border-color:var(--accent)}
.related strong{display:block; color:var(--text); font-size:.9375rem}
.related span{display:block; color:var(--muted); font-size:.875rem; margin-top:.3rem}

/* Discipline cards on the home page link through to their own pages. */
a.card{text-decoration:none; display:block; transition:border-color .18s}
a.card:hover{border-color:var(--accent)}
a.card h3{color:var(--text)}
a.card .go{display:inline-block; margin-top:.75rem; color:var(--accent-2); font-size:.875rem; font-weight:600}