/* Marketing and content pages (layout: site). Tool pages use th.css only. */

.nf{padding-block:clamp(4rem,12vw,9rem) 2rem; display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.5rem,5vw,4rem); align-items:center}
.nf-plate{margin:0; width:clamp(8rem,22vw,15rem); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 42%, var(--panel), var(--bg-2) 72%); border:1px solid var(--line-2); display:grid; place-items:center; overflow:hidden}
.nf-plate .plate-svg{width:112%; height:112%}
@media (max-width:40rem){ .nf{grid-template-columns:minmax(0,1fr)} .nf-plate{width:7rem} }
.nf .lede{margin-top:1rem}

/* every section shares one rhythm */
.sec{padding-block:clamp(4.5rem,10vw,8rem) 0}
.sec-head{display:flex; flex-direction:column; gap:.9rem; max-width:44rem; margin-bottom:clamp(2rem,4.5vw,3.4rem)}
.sec-head .lede{margin-top:.1rem}

/* ── hero ──────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-20% -10% auto auto; width:60rem; height:60rem; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); pointer-events:none}
.hero-in{position:relative; max-width:80rem; margin-inline:auto; padding:clamp(3rem,7vw,6.5rem) var(--gut) clamp(3rem,6vw,5rem); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2.5rem,6vw,5.5rem); align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:1.35rem; min-width:0}
.hero-h1{font:300 clamp(3.6rem,8.4vw,7.4rem)/.94 var(--f-head); letter-spacing:-.03em; margin:0}
.hero-h1 .hold{font-style:italic; font-weight:var(--w,420); transition:font-weight .5s ease; color:var(--ink)}
.hero-lede{font:400 clamp(1.12rem,1.5vw,1.32rem)/1.55 var(--f-serif); color:var(--ink-2); max-width:38ch; text-wrap:pretty}
.hero-cta{margin-top:.4rem}
.hero-note{font:italic 400 1rem/1.4 var(--f-serif); color:var(--ink-3)}

/* the bench: a specimen slide and a notebook page */
.bench{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-pop); overflow:hidden; min-width:0; transform:rotate(.6deg)}
.bench-slide{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,10.5rem); gap:1.2rem; align-items:center; padding:1.4rem 1.4rem 1.2rem; background:linear-gradient(180deg, var(--bg-2), var(--panel)); border-bottom:1px solid var(--line-2)}
.scope{position:relative; width:100%; max-width:19rem; aspect-ratio:1; border-radius:50%; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; justify-self:center; background:var(--stage); box-shadow:0 0 0 6px var(--panel), 0 0 0 7px var(--line), 0 24px 40px -22px rgba(0,0,0,.6)}
.scope:active{cursor:grabbing}
.scope:focus-visible{outline:2px solid var(--accent); outline-offset:8px}
.gonio{position:absolute; inset:0; width:100%; height:100%}
.gonio text{font:500 5.6px var(--f-mono); fill:var(--stage-dim); text-anchor:middle; dominant-baseline:central}
.gonio line{stroke:var(--stage-dim); stroke-width:.35}
.gonio line.maj{stroke:var(--stage-ink); stroke-width:.5}
.scope-index{position:absolute; left:50%; top:.4%; transform:translateX(-50%); border-left:.4rem solid transparent; border-right:.4rem solid transparent; border-top:.66rem solid var(--hi-strong)}
.scope-gl{position:absolute; left:12%; top:12%; width:76%; height:76%; border-radius:50%; background:#111}
.scope-reticle{position:absolute; left:12%; top:12%; width:76%; height:76%; pointer-events:none}
.scope-reticle line{stroke:var(--stage-ink); stroke-width:.3; opacity:.5}
/* a museum label beside the slide */
.specimen-label{display:flex; flex-direction:column; gap:.3rem; padding:.85rem .9rem; background:var(--field); border:1px solid var(--line); border-radius:6px; box-shadow:0 1px 0 var(--line-2); transform:rotate(-1.4deg)}
.sl-no{font:600 .8rem/1.3 var(--f-ui); color:var(--ink-3)}
.sl-name{display:flex; align-items:baseline; gap:.45rem; font:400 1.35rem/1.1 var(--f-head); color:var(--ink)}
.sl-name b{font:300 3rem/.9 var(--f-head); font-variant-numeric:lining-nums; letter-spacing:-.03em}
.sl-cap{font:italic 400 .85rem/1.3 var(--f-serif); color:var(--ink-3); border-top:1px solid var(--line-2); padding-top:.4rem; margin-top:.15rem}
.bench-body{padding:1.15rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.75rem}
.bench-lab{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font:600 .88rem/1.3 var(--f-ui); color:var(--ink-2)}
.bench-body .textarea{min-height:5.6rem; font-size:.84rem}
.pips{display:flex; flex-wrap:wrap; gap:.4rem 1rem}   /* the plain check names vary in length: let each take its own width */
.pips li{display:flex; align-items:center; gap:.4rem; font:500 .78rem/1.2 var(--f-ui); color:var(--ink-3); min-width:0; white-space:nowrap}
.pips li i{width:.55rem; height:.55rem; transform:rotate(45deg); border:1.5px solid var(--bad); flex:none; transition:background .2s, border-color .2s}
.pips li.ok{color:var(--ink)}
.pips li.ok i{background:var(--good); border-color:var(--good)}
.bench-fix{font:400 1rem/1.45 var(--f-serif); color:var(--ink-2); min-height:2.9em}
.bench-fix b{color:var(--ink); font-weight:600}
.bench-go{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem}
.bench-note{display:flex; align-items:center; gap:.4rem; margin:0}
.drawn-arrow{width:2.6rem; height:1.3rem; color:var(--ink-3); flex:none}
@media (max-width:64rem){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .bench{max-width:38rem; transform:none}
}
@media (max-width:30rem){
  .bench-slide{grid-template-columns:minmax(0,1fr) minmax(0,7.8rem); padding:1rem; gap:.8rem}
  .sl-name b{font-size:2.3rem}
  .sl-name{font-size:1.05rem}
  .pips{gap:.35rem .8rem}
  .hero-cta .btn{flex:1 1 auto}
}

/* ── returning visitors: pick up where you left off ─────────────────── */
.start{border-block:1px solid var(--line); background:var(--panel)}
.start-in{padding-block:1.3rem}
.resume{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.6rem 2rem; align-items:center}
.resume-title{font:italic 400 1.15rem/1.25 var(--f-head); color:var(--ink)}
.resume-list{display:flex; flex-wrap:wrap; gap:.5rem; min-width:0}
.resume-list li{display:flex; min-width:0; max-width:100%}
.resume-list a{display:inline-flex; align-items:baseline; gap:.55rem; padding:.55rem .85rem; border:1px solid var(--line); border-radius:999px; background:var(--field); color:var(--ink); text-decoration:none; max-width:min(24rem,100%); min-width:0}
.resume-list a:hover{border-color:var(--ink-3)}
.resume-list b{font:600 .9rem/1.3 var(--f-ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.resume-kind,.resume-at{font:500 .76rem/1.3 var(--f-ui); color:var(--ink-3); white-space:nowrap}
@media (max-width:64rem){ .resume{grid-template-columns:minmax(0,1fr)} }

/* ── the specimen spread: before and after ─────────────────────────── */
.specimens{display:grid; grid-template-columns:minmax(0,.85fr) auto minmax(0,1.15fr); gap:1rem; align-items:center}
.specimen{margin:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.1rem 1.2rem 1rem; display:flex; flex-direction:column; gap:.85rem; box-shadow:var(--shadow); min-width:0}
.specimen:first-child{transform:rotate(-1deg)}
.specimen.after{border-color:color-mix(in srgb, var(--good) 35%, var(--line))}
.specimen-head{display:flex; align-items:center; gap:.85rem}
.specimen-n{font:300 3.2rem/.85 var(--f-head); color:var(--ink); min-width:2.2rem}
.specimen.after .specimen-n{color:var(--good)}
.specimen-head b{display:block; font:400 1.35rem/1.1 var(--f-head)}
.specimen-head small{display:block; font:500 .78rem/1.3 var(--f-ui); color:var(--ink-3); margin-top:.15rem}
.specimen-text{font:400 .8rem/1.6 var(--f-mono); white-space:pre-wrap; overflow-wrap:anywhere; background:var(--bg); border:1px solid var(--line-2); border-radius:10px; padding:.85rem .95rem; color:var(--ink); margin:0}
.specimen-text mark{background:var(--hi-wash); box-shadow:inset 0 -1.5px 0 var(--hi); color:var(--ink)}
.specimen figcaption{display:flex; gap:.6rem; align-items:baseline; font:400 .95rem/1.4 var(--f-serif); color:var(--ink-2)}
.specimen-arrow{display:flex; flex-direction:column; align-items:center; gap:.2rem; color:var(--ink-3)}
.specimen-arrow svg{width:4.5rem; height:2.4rem}
.specimen-arrow span{font:italic 400 .9rem/1 var(--f-serif)}
.spread-more{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; margin-top:1.8rem}
@media (max-width:60rem){ .specimens{grid-template-columns:minmax(0,1fr)} .specimen-arrow{transform:rotate(90deg); margin:.2rem 0} .specimen:first-child{transform:none} }

/* ── one job priced on six models ── */
.costband-in{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
.costband-in .sec-head{margin-bottom:0}
.costband-in .spread-more{margin-top:.6rem}
.costband-in .viz{margin:0}
@media (max-width:60rem){ .costband-in{grid-template-columns:minmax(0,1fr)} }

/* ── the instruments: a museum catalogue, one ruled entry per tool ── */
.catalog{border-top:1px solid var(--ink); counter-reset:none}
.catalog li{border-bottom:1px solid var(--line)}
.cat{display:grid; grid-template-columns:7.5rem 3.4rem minmax(0,1fr) minmax(0,15rem); gap:0 1.6rem; align-items:center; padding:1.1rem .4rem 1.1rem 0; color:var(--ink); text-decoration:none; position:relative; transition:background .25s ease}
.cat:hover{background:var(--panel)}
.cat-art{display:block; width:7.5rem; aspect-ratio:1; margin:-.4rem 0}
.cat-art .plate-svg{width:100%; height:100%; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cat:hover .cat-art .plate-svg{transform:rotate(-6deg) scale(1.06)}
.cat-no{font:italic 400 1.05rem/1 var(--f-head); color:var(--ink-3); align-self:start; padding-top:1.35rem}
.cat-main{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.cat-name{font:400 1.7rem/1.1 var(--f-head); letter-spacing:-.012em}
.cat:hover .cat-name{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em}
.cat-q{font:600 .98rem/1.35 var(--f-ui); color:var(--ink-2)}
.cat-text{font:400 1.02rem/1.5 var(--f-serif); color:var(--ink-2); max-width:62ch}
.cat-cap{font:italic 400 .98rem/1.4 var(--f-serif); color:var(--ink-3); padding-left:1.2rem; border-left:1px solid var(--line-2)}
.shelf{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; margin-top:1.6rem}
.shelf-item{display:grid; grid-template-columns:5.2rem minmax(0,1fr); gap:1.1rem; align-items:center; padding:1rem 1.2rem; border:1px dashed var(--line); border-radius:var(--r-lg); color:var(--ink); text-decoration:none; transition:border-color .2s, background .2s}
.shelf-item:hover{border-style:solid; border-color:var(--ink-4); background:var(--panel)}
.shelf-art{display:block; width:5.2rem; aspect-ratio:1}
.shelf-art .plate-svg{width:100%; height:100%}
.shelf-item b{display:block; font:400 1.35rem/1.15 var(--f-head)}
.shelf-item small{display:block; font:400 .98rem/1.45 var(--f-serif); color:var(--ink-2); margin-top:.25rem}
@media (max-width:64rem){ .cat{grid-template-columns:6rem 2.6rem minmax(0,1fr)} .cat-art{width:6rem} .cat-cap{grid-column:3; padding:.5rem 0 0; border:0} }
@media (max-width:40rem){
  .cat{grid-template-columns:4.6rem minmax(0,1fr); gap:0 1rem; padding-block:1rem}
  .cat-art{width:4.6rem; grid-row:span 3; align-self:start; margin:0}
  .cat-no{padding-top:0; font-size:.95rem}
  .cat-main,.cat-cap{grid-column:2}
  .cat-name{font-size:1.45rem}
  .shelf{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){ .cat-art .plate-svg{transition:none} .cat:hover .cat-art .plate-svg{transform:none} }

/* ── a note from the bench ─────────────────────────────────────────── */
.letter-in{max-width:46rem}
.letter-in .h2{margin-top:.9rem}
.letter-body{margin-top:1.6rem; padding:clamp(1.6rem,4vw,2.6rem) clamp(1.4rem,3.5vw,2.4rem); background:var(--panel); border:1px solid var(--line); border-radius:4px; box-shadow:var(--shadow); position:relative; transform:rotate(-.35deg)}
.letter-body::before{content:""; position:absolute; top:0; bottom:0; left:clamp(.9rem,2.4vw,1.6rem); width:1px; background:color-mix(in srgb, var(--bad) 30%, transparent)}
.letter-body p{font:400 1.14rem/1.7 var(--f-serif); color:var(--ink); padding-left:clamp(.6rem,2vw,1.4rem)}
.letter-body p + p{margin-top:1.1rem}
.letter-sign{display:flex; align-items:center; gap:.6rem; font-style:italic !important; color:var(--ink-2) !important}
.letter-sign .brand-mark{width:1.7rem}

/* ── private by design ─────────────────────────────────────────────── */
.private-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:1rem 3.5rem; align-items:center}
.private-in .sec-head{margin-bottom:0}
/* where your words go: a typical AI app beside thinkhard.si, same three columns, different middle */
.paths{--nw:8.4rem; margin:0; display:grid; gap:.7rem; min-width:0}
.pv{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:.9rem 1.1rem 1.15rem}
.pv-k{font:italic 400 1.02rem/1.2 var(--f-head); color:var(--ink-3); margin-bottom:.35rem}
.pv-ours{border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow:var(--shadow)}
.pv-ours .pv-k{color:var(--ink)}
.pv-row{display:grid; grid-template-columns:var(--nw) minmax(.5rem,1fr) var(--nw) minmax(.5rem,1fr) var(--nw); align-items:start}
.pv-node{grid-row:2; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.15rem; min-width:0; color:var(--ink-2)}
.pv-node svg{width:2.3rem; height:2.3rem; padding:.42rem; border-radius:50%; background:var(--field); border:1px solid var(--line); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.2rem}
.pv-node b{font:600 .86rem/1.2 var(--f-ui); color:var(--ink)}
.pv-node small{font:400 .74rem/1.3 var(--f-ui); color:var(--ink-3); text-wrap:balance}
.pv-wire{grid-row:2; position:relative; height:2px; margin:calc(1.15rem - 1px) calc(var(--nw) / 2) 0; background:var(--line); border-radius:2px}
.pv-wire i{position:absolute; top:50%; left:0; width:.5rem; height:.5rem; margin:-.25rem 0 0 -.25rem; border-radius:50%; background:var(--ink-3); opacity:0}
.pv-usual .pv-hub{color:var(--bad)}
.pv-usual .pv-hub svg{border-color:color-mix(in srgb, var(--bad) 45%, var(--line)); background:var(--bad-wash)}
.pv-usual .pv-w1{grid-column:1 / 4}
.pv-usual .pv-w2{grid-column:3 / 6}
.pv-usual .pv-node:first-child{grid-column:1}
.pv-ai{grid-column:5}
.pv-usual .pv-hub{grid-column:3}
.pv-usual .pv-row{grid-template-rows:0 auto}
/* ours: one unbroken line, and thinkhard.si above it, off the path */
.pv-ours .pv-row{grid-template-rows:auto auto}
.pv-ours .pv-aside{grid-row:1; grid-column:2 / 5; justify-self:center; display:flex; align-items:center; gap:.5rem; padding:.35rem .7rem .35rem .45rem; margin:0 0 .6rem; border:1px dashed var(--line); border-radius:999px; background:var(--bg); position:relative}
.pv-ours .pv-aside .brand-mark{width:1.45rem}
.pv-ours .pv-aside b{display:block; font:600 .8rem/1.15 var(--f-ui); color:var(--ink)}
.pv-ours .pv-aside small{display:block; font:400 .72rem/1.25 var(--f-ui); color:var(--ink-3)}
.pv-ours .pv-you{grid-column:1; color:var(--good)}
.pv-ours .pv-you svg{border-color:color-mix(in srgb, var(--good) 50%, var(--line)); background:var(--good-wash)}
.pv-direct{grid-column:1 / 6; background:var(--accent)}
.pv-direct i{background:var(--accent); box-shadow:0 0 0 4px var(--accent-wash)}
.pv-direct i.pv-ret{background:var(--hi-strong); box-shadow:0 0 0 4px var(--hi-wash)}
.pv-note{grid-row:2; grid-column:2 / 5; justify-self:center; align-self:start; margin-top:1.7rem; padding:0 .5rem; text-align:center; font:italic 400 .86rem/1.25 var(--f-serif); color:var(--ink-2)}
@media (prefers-reduced-motion: no-preference){
  .pv-usual .pv-w1 i{animation:pv-a 5s linear infinite}
  .pv-usual .pv-w2 i{animation:pv-b 5s linear infinite}
  .pv-usual .pv-hub svg{animation:pv-read 5s ease infinite}
  .pv-direct i{animation:pv-go 5s linear infinite}
  .pv-direct i.pv-ret{animation:pv-back 5s linear infinite}
}
@keyframes pv-a{0%{left:0; opacity:0} 4%{opacity:1} 34%{left:100%; opacity:1} 38%,100%{left:100%; opacity:0}}
@keyframes pv-b{0%,48%{left:0; opacity:0} 52%{opacity:1} 82%{left:100%; opacity:1} 86%,100%{left:100%; opacity:0}}
@keyframes pv-read{0%,34%,56%,100%{box-shadow:0 0 0 0 transparent} 40%,48%{box-shadow:0 0 0 5px var(--bad-wash)}}
@keyframes pv-go{0%{left:0; opacity:0} 4%{opacity:1} 40%{left:100%; opacity:1} 44%,100%{left:100%; opacity:0}}
@keyframes pv-back{0%,50%{left:100%; opacity:0} 54%{opacity:1} 90%{left:0; opacity:1} 94%,100%{left:0; opacity:0}}
@media (max-width:30rem){ .paths{--nw:5.9rem} .pv{padding:.8rem .6rem 1rem} .pv-node small{font-size:.7rem} .pv-ours .pv-aside{grid-column:1 / 6; border-radius:var(--r-lg)} }
.ledger{grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem 3rem; margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid var(--ink)}
.ledger-h{font:italic 400 1.35rem/1.2 var(--f-head); color:var(--ink); margin-bottom:.8rem}
.ledger ul{display:flex; flex-direction:column}
.ledger li{font:400 1.04rem/1.5 var(--f-serif); color:var(--ink-2); padding:.6rem 0; border-bottom:1px dotted var(--line)}
.ledger-foot{grid-column:1 / -1; font:400 1.04rem/1.5 var(--f-serif); color:var(--ink-2)}
@media (max-width:56rem){ .private-in{grid-template-columns:minmax(0,1fr)} .ledger{grid-template-columns:minmax(0,1fr)} }

/* ── comparison ────────────────────────────────────────────────────── */
.ctable th[scope=row]{font:600 .86rem/1.35 var(--f-ui); color:var(--ink-2); background:none; border-bottom:1px solid var(--line-2); white-space:normal; width:22%}
.ctable thead th{font:400 1.1rem/1.25 var(--f-head); color:var(--ink); white-space:normal}
.ctable thead th .muted{font:400 .82rem/1.3 var(--f-ui)}
.ctable td{font:400 1.02rem/1.45 var(--f-serif); color:var(--ink-2)}
.ctable td:nth-child(2){color:var(--ink); background:color-mix(in srgb, var(--good-wash) 70%, transparent)}

/* ── pro waitlist ──────────────────────────────────────────────────── */
.pro-in{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:2rem 4rem; align-items:start}
.pro-copy{display:flex; flex-direction:column; gap:1rem}
.pro-list{display:flex; flex-direction:column; gap:.9rem; margin:.4rem 0}
.pro-list li{font:400 1.06rem/1.5 var(--f-serif); color:var(--ink-2); padding-left:1.4rem; position:relative}
.pro-list li::before{content:""; position:absolute; left:.1rem; top:.52em; width:.5rem; height:.5rem; transform:rotate(45deg); border:1.5px solid var(--accent)}
.pro-list b{color:var(--ink); font-weight:600}
.waitform .panel-body{gap:.95rem; padding:1.5rem}
.waitform-title{font:400 1.6rem/1.15 var(--f-head)}
.waitform .btn{align-self:flex-start}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:56rem){ .pro-in{grid-template-columns:minmax(0,1fr)} }

/* ── faq ───────────────────────────────────────────────────────────── */
.faq-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:1rem 3.5rem}
.faq-list{border-top:1px solid var(--ink)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer; list-style:none; padding:1.15rem 2.4rem 1.15rem 0; font:400 1.25rem/1.3 var(--f-head); position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+"; position:absolute; right:.3rem; top:1rem; font:300 1.6rem/1 var(--f-head); color:var(--ink-3); transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{font:400 1.05rem/1.6 var(--f-serif); color:var(--ink-2); padding:0 0 1.2rem; max-width:62ch}
@media (max-width:56rem){ .faq-in{grid-template-columns:minmax(0,1fr)} }

/* ── a path of steps (guides hub) ──────────────────────────────────── */
.path{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); counter-reset:st}
.path li{position:relative; padding:1.8rem 1.1rem 0 0; display:flex; flex-direction:column; gap:.4rem; min-width:0}
.path li::before{content:""; position:absolute; left:0; right:0; top:.55rem; height:1px; background:var(--line)}
.path li:last-child::before{right:auto; width:1rem}
.path li::after{content:""; position:absolute; left:0; top:.55rem; width:.75rem; height:.75rem; background:var(--panel); border:1.5px solid var(--ink-2); transform:translateY(-50%) rotate(45deg)}
.path li:last-child::after{background:var(--hi-strong); border-color:var(--hi-strong)}
.path b{font:400 1.3rem/1.15 var(--f-head)}
.path p{font:400 1rem/1.45 var(--f-serif); color:var(--ink-2)}
.path a{font:600 .86rem/1.4 var(--f-ui); color:var(--accent); text-decoration:none; margin-right:.5rem}
.path a:hover{text-decoration:underline}
@media (max-width:56rem){
  .path{grid-template-columns:minmax(0,1fr)}
  .path li{padding:0 0 1.4rem 1.7rem}
  .path li::before{left:.36rem; right:auto; top:.6rem; bottom:0; width:1px; height:auto}
  .path li:last-child::before{display:none}
  .path li::after{top:.6rem}
}

/* ── plain content pages (pricing, about, contact, privacy, terms, changelog) ── */
.page-head{max-width:80rem; margin-inline:auto; padding:clamp(3rem,7vw,5.5rem) var(--gut) 1.4rem}
.page-head .h1{font-size:clamp(2.7rem,6vw,4.8rem); max-width:18ch}
.page-head .lede{margin-top:1.1rem}
.page-head .eyebrow{margin-bottom:1rem}
.page-body{max-width:80rem; margin-inline:auto; padding:1.2rem var(--gut) 0}
.doc{display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:2rem 3.5rem}
.doc-toc{position:sticky; top:calc(var(--bar-h) + 1.5rem); align-self:start; display:flex; flex-direction:column; gap:.2rem; padding-left:.9rem; border-left:1px solid var(--line)}
.doc-toc a{font:500 .9rem/1.4 var(--f-ui); color:var(--ink-3); text-decoration:none; padding:.25rem 0}
.doc-toc a:hover{color:var(--ink)}
.doc .prose{max-width:68ch}
.doc .prose h2{scroll-margin-top:calc(var(--bar-h) + 1rem)}
.updated{font:italic 400 .98rem/1.4 var(--f-serif); color:var(--ink-3)}
@media (max-width:56rem){ .doc{grid-template-columns:minmax(0,1fr)} .doc-toc{position:static; flex-direction:row; flex-wrap:wrap; gap:.2rem 1.1rem; border-left:0; padding-left:0} }

/* pricing */
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; align-items:stretch}
.plan{display:flex; flex-direction:column; gap:.95rem; padding:1.6rem 1.6rem 1.7rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); min-width:0}
.plan.now{border-color:var(--ink-3); box-shadow:var(--shadow-pop)}
.plan h2{font:600 .9rem/1 var(--f-ui); color:var(--ink-2); display:flex; align-items:center; gap:.5rem}
.plan .price{font:300 3.2rem/1 var(--f-head); letter-spacing:-.025em}
.plan .price small{font:400 .86rem/1 var(--f-ui); color:var(--ink-3); letter-spacing:0; margin-left:.35rem}
.plan p.for{font:400 1.05rem/1.45 var(--f-serif); color:var(--ink-2)}
.plan ul{display:flex; flex-direction:column; gap:.55rem; flex:1}
.plan li{font:400 .95rem/1.45 var(--f-ui); color:var(--ink-2); padding-left:1.3rem; position:relative}
.plan li::before{content:""; position:absolute; left:.1rem; top:.45em; width:.5rem; height:.5rem; transform:rotate(45deg); background:var(--good)}
.plan li.soon::before{background:transparent; border:1.5px solid var(--accent)}
.plan .btn{align-self:flex-start}
@media (max-width:64rem){ .plans{grid-template-columns:minmax(0,1fr)} }

.about-form{grid-column:2; max-width:36rem}
@media (max-width:56rem){ .about-form{grid-column:1} }

/* ── contact ───────────────────────────────────────────────────────── */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:2.5rem clamp(2.5rem,6vw,5rem); align-items:start}
.contact-side{display:flex; flex-direction:column; gap:1.4rem; min-width:0}
.contact-mail{display:flex; flex-direction:column; gap:.35rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line)}
.contact-addr{font:400 clamp(1.5rem,3vw,2.1rem)/1.15 var(--f-head); color:var(--ink); text-decoration:none; overflow-wrap:anywhere; letter-spacing:-.01em}
.contact-addr:hover{color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em}
.contact-h{font:italic 400 1.3rem/1.2 var(--f-head); color:var(--ink)}
.contact-topics{display:flex; flex-direction:column; gap:1rem}
.contact-topics dt{font:650 .96rem/1.3 var(--f-ui); color:var(--ink)}
.contact-topics dd{font:400 1.02rem/1.5 var(--f-serif); color:var(--ink-2); margin-top:.2rem}
.contact-warn{font:400 .98rem/1.45 var(--f-serif); color:var(--ink-2); padding:.8rem 1rem; border-left:2px solid var(--bad); background:color-mix(in srgb, var(--bad) 6%, transparent); border-radius:0 8px 8px 0}
.contact-warn b{color:var(--ink); font-weight:600}
.contact-form{position:sticky; top:calc(var(--bar-h) + 1.5rem)}
@media (max-width:56rem){ .contact{grid-template-columns:minmax(0,1fr)} .contact-form{position:static} }

/* ── changelog ─────────────────────────────────────────────────────── */
.log{display:flex; flex-direction:column; max-width:58rem; border-top:1px solid var(--ink)}
.log-entry{display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); gap:.6rem 2.5rem; padding:1.8rem 0 2rem; border-bottom:1px solid var(--line); scroll-margin-top:calc(var(--bar-h) + 1rem)}
.log-date{font:italic 400 1.05rem/1.4 var(--f-serif); color:var(--ink-3); padding-top:.3rem}
.log-title{font:400 1.75rem/1.15 var(--f-head); letter-spacing:-.012em; color:var(--ink)}
.log-body ul{display:flex; flex-direction:column; gap:.55rem; margin-top:.9rem}
.log-body li{font:400 1.06rem/1.55 var(--f-serif); color:var(--ink-2); padding-left:1.15rem; position:relative}
.log-body li::before{content:""; position:absolute; left:.1rem; top:.66em; width:.34rem; height:.34rem; background:var(--accent); opacity:.75; transform:rotate(45deg)}
.log-next{max-width:58rem; margin-top:2.4rem; display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; padding:1.5rem 1.6rem; border:1px dashed var(--line); border-radius:var(--r-lg)}
.log-next p{font:400 1.06rem/1.55 var(--f-serif); color:var(--ink-2); max-width:60ch}
@media (max-width:44rem){ .log-entry{grid-template-columns:minmax(0,1fr)} .log-date{padding-top:0} }

/* a short row of plain promises under a page lede */
.hero-proof{display:flex; flex-wrap:wrap; gap:.5rem 1.4rem}
.hero-proof li{position:relative; padding-left:1.05rem; font:500 .9rem/1.4 var(--f-ui); color:var(--ink-2)}
.hero-proof li::before{content:""; position:absolute; left:.05rem; top:.45em; width:.45rem; height:.45rem; transform:rotate(45deg); background:var(--good)}

/* ── start here: a field key, couplet by couplet ───────────────────── */
.fkey{max-width:60rem; border-top:1px solid var(--ink); counter-reset:none}
.fkey-step{display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:0 1.2rem; padding:1.4rem 0; border-bottom:1px solid var(--line); scroll-margin-top:calc(var(--bar-h) + 1rem)}
.fkey-step:target{background:linear-gradient(90deg, var(--accent-wash), transparent 70%)}
.fkey-n{font:300 2.6rem/1 var(--f-head); color:var(--ink-3); font-variant-numeric:lining-nums}
.fkey-pair{display:flex; flex-direction:column; gap:.9rem}
.fkey-q{font:400 1.12rem/1.55 var(--f-serif); color:var(--ink); padding-left:1.6rem; position:relative}
.fkey-q > b{position:absolute; left:0; top:0; font:italic 400 1.12rem/1.55 var(--f-head); color:var(--ink-3)}
.fkey-go,.fkey-end{display:inline-flex; align-items:center; gap:.3rem; margin-left:.4rem; font:600 .92rem/1.4 var(--f-ui); text-decoration:none; white-space:nowrap}
.fkey-go::after{content:"↓"}
.fkey-end{padding:.2rem .7rem; border-radius:999px; background:var(--ink); color:var(--bg)}
.fkey-end:hover{background:var(--accent); color:#fff}
.fkey-end::after{content:"→"}
.fkey-why{display:block; margin-top:.35rem; font:400 1rem/1.5 var(--f-serif); color:var(--ink-2)}
.fkey-also{max-width:60rem; margin-top:clamp(2.6rem,5vw,3.6rem)}
.fkey-also .h2{margin-bottom:1rem}
.fkey-extra{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.fkey-extra div{display:grid; grid-template-columns:minmax(0,12rem) minmax(0,1fr); gap:.3rem 1.4rem; padding:.9rem 0; border-bottom:1px solid var(--line-2)}
.fkey-extra dt{font:400 1.25rem/1.3 var(--f-head)}
.fkey-extra dt a{text-decoration:none}
.fkey-extra dd{font:400 1.04rem/1.5 var(--f-serif); color:var(--ink-2)}
.fkey-p{font:400 1.08rem/1.6 var(--f-serif); color:var(--ink-2); max-width:66ch}
.fkey-p + .fkey-p{margin-top:1rem; display:flex; flex-wrap:wrap; gap:.6rem}
@media (max-width:40rem){ .fkey-step{grid-template-columns:2.2rem minmax(0,1fr); gap:0 .6rem} .fkey-n{font-size:2rem} .fkey-extra div{grid-template-columns:minmax(0,1fr)} .fkey-go,.fkey-end{margin:.4rem 0 0; } }

/* ── glossary ───────────────────────────────────────────────────────── */
.gloss-index{display:flex; flex-wrap:wrap; gap:.35rem .5rem; max-width:60rem; margin-bottom:1.8rem}
.gloss-index a{font:500 .88rem/1.3 var(--f-ui); padding:.3rem .65rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--ink-2); background:var(--field)}
.gloss-index a:hover{color:var(--ink); border-color:var(--ink-3)}
.gloss{max-width:60rem; border-top:1px solid var(--ink)}
.gloss div{display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:.3rem 2rem; padding:1rem 0; border-bottom:1px solid var(--line); scroll-margin-top:calc(var(--bar-h) + 1rem)}
.gloss div:target{background:var(--accent-wash)}
.gloss dt{font:400 1.35rem/1.25 var(--f-head); color:var(--ink)}
.gloss dd{font:400 1.06rem/1.55 var(--f-serif); color:var(--ink-2)}
.gloss dd a{font:600 .88rem/1.4 var(--f-ui); margin-left:.3rem}
@media (max-width:40rem){ .gloss div{grid-template-columns:minmax(0,1fr)} }
.log-title a{color:var(--ink); text-decoration:none}
.log-title a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em}

/* ── who it is for: two paths ─────────────────────────────────────── */
.who-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem clamp(1.6rem,4vw,3.5rem); border-top:1px solid var(--ink); padding-top:1.6rem}
.who-col{display:flex; flex-direction:column; gap:.8rem}
.who-h{font:400 1.7rem/1.15 var(--f-head); letter-spacing:-.012em}
.who-col > p{font:400 1.06rem/1.6 var(--f-serif); color:var(--ink-2); max-width:52ch}
.who-links{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.who-links li{border-bottom:1px solid var(--line-2)}
.who-links a{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; font:600 .98rem/1.35 var(--f-ui); text-decoration:none; color:var(--ink)}
.who-links a::after{content:"→"; color:var(--accent)}
.who-links a:hover{color:var(--accent)}
.who-col > p.who-note{font:italic 400 .98rem/1.45 var(--f-serif); color:var(--ink-3)}
@media (max-width:52rem){ .who-cols{grid-template-columns:minmax(0,1fr)} }

/* ── blog lists, the next post, and the weekly email ───────────────── */
.log-topic{font:600 .78rem/1.3 var(--f-ui); color:var(--accent); font-style:normal}
.post-mini{display:flex; flex-direction:column; border-top:1px solid var(--ink)}
.post-mini li{border-bottom:1px solid var(--line)}
.post-mini a{display:flex; flex-direction:column; gap:.2rem; padding:.85rem 0; text-decoration:none; color:var(--ink)}
.post-mini b{font:400 1.2rem/1.3 var(--f-head)}
.post-mini a:hover b{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em}
.post-mini span{font:400 .98rem/1.45 var(--f-serif); color:var(--ink-2)}
.post-mini small{font:500 .8rem/1.3 var(--f-ui); color:var(--ink-3)}
.news-form{max-width:58rem; margin-top:2.4rem}
.news-copy{font:400 1.02rem/1.5 var(--f-serif); color:var(--ink-2)}
.news-row{display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem}
.news-row .field{flex:1 1 16rem}

/* ── use cases ──────────────────────────────────────────────────────── */
.uc-group{max-width:64rem; margin-top:clamp(2.2rem,4vw,3rem)}
.uc-group-h{font:italic 400 1.4rem/1.2 var(--f-head); color:var(--ink-2); margin-bottom:.8rem}
.uc-list{border-top:1px solid var(--ink)}
.uc-list li{border-bottom:1px solid var(--line)}
.uc-item{display:grid; grid-template-columns:4.4rem minmax(0,1fr); gap:1.2rem; align-items:center; padding:.9rem .4rem .9rem 0; text-decoration:none; color:var(--ink)}
.uc-item:hover{background:var(--panel)}
.uc-art{display:block; width:4.4rem; aspect-ratio:1}
.uc-art .plate-svg{width:100%; height:100%}
.uc-main{display:flex; flex-direction:column; gap:.2rem}
.uc-main b{font:400 1.45rem/1.2 var(--f-head); letter-spacing:-.01em}
.uc-item:hover .uc-main b{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em}
.uc-main span{font:400 1.02rem/1.45 var(--f-serif); color:var(--ink-2)}
.uc-mini{display:flex; flex-wrap:wrap; gap:.4rem .5rem}
.uc-mini a{display:inline-block; font:500 .9rem/1.3 var(--f-ui); padding:.38rem .75rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--ink-2); background:var(--field)}
.uc-mini a:hover{color:var(--ink); border-color:var(--ink-3)}
/* home: what is in season and new, as a sentence; then the use cases under a smaller head */
.uc-band .season{max-width:46rem; margin:1.1rem 0 0; font:400 1.02rem/1.6 var(--f-serif); color:var(--ink-2)}
.uc-band .season a{color:var(--ink); text-underline-offset:.16em; text-decoration-thickness:1px}
.uc-season{max-width:46rem; margin:.9rem 0 0; padding-left:.9rem; border-left:2px solid var(--line); font:400 1rem/1.55 var(--f-serif); color:var(--ink-2)}
.uc-sub{margin:2.2rem 0 .3rem; font:400 1.35rem/1.25 var(--f-head); letter-spacing:-.01em}
.uc-sub-lede{max-width:46rem; margin:0 0 .9rem; font:400 1rem/1.5 var(--f-serif); color:var(--ink-2)}
/* on a use-case page: the jobs, each with the tools that do it */
.uc-flows{border-top:1px solid var(--ink); margin:1rem 0 1.6rem}
.uc-flow{padding:1.1rem 0 1.15rem; border-bottom:1px solid var(--line)}
.prose .uc-flow h3{margin:0 0 .35rem; font:400 1.3rem/1.25 var(--f-head); color:var(--ink)}
.prose .uc-flow p{margin-top:.35rem}
.uc-tools{display:flex; flex-wrap:wrap; gap:.35rem .45rem; margin-top:.6rem}
.prose .uc-tools{margin-top:.6rem}
.uc-tool{display:inline-flex; align-items:center; gap:.35rem; font:600 .82rem/1.3 var(--f-ui); padding:.3rem .65rem; border-radius:999px; background:var(--bg-2); color:var(--ink); text-decoration:none}
.uc-tool:hover{background:var(--accent-wash); color:var(--accent)}
.uc-tool.tpl{background:color-mix(in srgb, var(--viz-5) 16%, var(--panel))}
.uc-head .tp-crumbs{margin-bottom:1rem}
@media (max-width:40rem){ .uc-item{grid-template-columns:3.4rem minmax(0,1fr); gap:.9rem} .uc-art{width:3.4rem} .uc-main b{font-size:1.25rem} }

/* ── price index ────────────────────────────────────────────────────── */
.pi-sec{max-width:62rem; margin-top:clamp(2.4rem,5vw,3.4rem)}
.pi-sec .h2{margin-bottom:.7rem}
.pi-p{font:400 1.06rem/1.6 var(--f-serif); color:var(--ink-2); max-width:66ch}
.pi-list{display:flex; flex-direction:column; gap:.8rem; max-width:66ch}
.pi-list li{font:400 1.04rem/1.55 var(--f-serif); color:var(--ink-2); padding-left:1.15rem; position:relative}
.pi-list li::before{content:""; position:absolute; left:.1rem; top:.66em; width:.34rem; height:.34rem; background:var(--accent); opacity:.75; transform:rotate(45deg)}
.pi-list b{color:var(--ink)}
.pi-pro{margin-top:1.2rem; padding:.8rem 1rem; border-left:2px solid var(--accent); background:var(--accent-wash); border-radius:0 8px 8px 0}
.price-table th[scope="row"] small{display:block; font:400 .78rem/1.35 var(--f-ui); color:var(--ink-3); white-space:normal; margin-top:.15rem}
.price-table th[scope="row"]{font:600 .9rem/1.3 var(--f-ui); color:var(--ink); white-space:normal; min-width:11rem}
.viz-table .table-wrap{margin:0}

/* ── the learn hub ──────────────────────────────────────────────────── */
.learn > .viz:first-child{margin-top:0}
.learn-sec{margin-top:clamp(2.4rem,5vw,3.4rem); min-width:0}
.learn-sec .h2{margin-bottom:.8rem}
.learn-p{font:400 1.05rem/1.55 var(--f-serif); color:var(--ink-2); max-width:62ch; margin-bottom:.8rem}
.learn-three{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; counter-reset:none}
.learn-three a{display:flex; flex-direction:column; gap:.35rem; height:100%; padding:1.1rem 1.15rem 1.2rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); text-decoration:none; color:var(--ink); transition:border-color .2s, transform .2s}
.learn-three a:hover{border-color:var(--ink-3); transform:translateY(-2px)}
.learn-n{font:italic 300 2rem/1 var(--f-head); color:var(--accent)}
.learn-three b{font:400 1.25rem/1.25 var(--f-head)}
.learn-three span:last-child{font:400 .98rem/1.45 var(--f-serif); color:var(--ink-2)}
.learn-split{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0 clamp(2rem,5vw,4rem)}
.learn-more{display:flex; gap:1.2rem; margin-top:.9rem}
.learn-more a{font:600 .9rem/1.3 var(--f-ui); text-decoration:none}
.learn-more a::after{content:" →"}
.learn-h2b{margin-top:2rem}
.learn-ref{border-top:1px solid var(--ink)}
.learn-ref li{border-bottom:1px solid var(--line)}
.learn-ref a{display:flex; flex-direction:column; gap:.15rem; padding:.75rem 0; text-decoration:none; color:var(--ink)}
.learn-ref b{font:400 1.15rem/1.3 var(--f-head)}
.learn-ref span{font:400 .96rem/1.4 var(--f-serif); color:var(--ink-2)}
@media (max-width:56rem){ .learn-three,.learn-split{grid-template-columns:minmax(0,1fr)} }

/* ── where thinkhard.si fits: a lifecycle strip with two brackets, then a spec sheet ── */
.lane{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); row-gap:.55rem; margin:0 0 clamp(2rem,4vw,2.8rem)}
.lane-stages{grid-column:1 / -1; grid-row:1; display:grid; grid-template-columns:subgrid; list-style:none; margin:0 0 .5rem; padding:0}
.lane-stages li{position:relative; display:grid; gap:.15rem; padding-top:1.6rem; margin:0; min-width:0}
.lane-stages li::before{content:""; position:absolute; left:0; right:0; top:.42rem; height:1px; background:var(--line)}
.lane-stages li:first-child::before{left:.42rem}
.lane-stages li:last-child::before{right:auto; width:.42rem}
.lane-dot{position:absolute; left:0; top:0; width:.85rem; height:.85rem; border-radius:50%; background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--ink)}
.lane-stages b{font:400 clamp(1.25rem,2.2vw,1.6rem)/1.05 var(--f-head); letter-spacing:-.01em; color:var(--ink)}
.lane-stages small{font:400 .92rem/1.3 var(--f-serif); color:var(--ink-3)}
.lane-br{margin:0; display:flex; align-items:center; min-height:2.1rem; padding:0 .8rem; border-radius:999px; font:600 var(--t-sm)/1 var(--f-ui); position:relative}
.lane-br span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lane-us{grid-row:2; grid-column:1 / 5; background:var(--ink); color:var(--panel)}
.lane-them{grid-row:3; grid-column:3 / 7; background:transparent; color:var(--ink-2); box-shadow:inset 0 0 0 1.5px var(--ink-3); border:0; justify-content:flex-end}
.lane-them::before{content:""; position:absolute; inset:0; border-radius:inherit; background:repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--ink) 6%, transparent) 6px 7px); pointer-events:none}

.spec{display:grid; border-top:1px solid var(--ink)}
.spec-row{display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr) minmax(0,1fr); border-bottom:1px solid var(--line)}
.spec-row > span{padding:1rem 1.1rem 1.05rem; min-width:0; font:400 .98rem/1.42 var(--f-serif); color:var(--ink-2)}
.spec-row > span:first-child{padding-left:0; font:600 var(--t-sm)/1.35 var(--f-ui); color:var(--ink-3); align-self:start; padding-top:1.15rem}
.spec-row b{display:block; font:400 1.35rem/1.15 var(--f-head); letter-spacing:-.01em; color:var(--ink); margin-bottom:.25rem}
.spec-us{background:color-mix(in srgb, var(--good) 7%, transparent)}
.spec-head > span{padding-block:.85rem; font:600 var(--t-sm)/1.3 var(--f-ui); color:var(--ink)}
.spec-head > span small{display:block; font:400 var(--t-xs)/1.4 var(--f-ui); color:var(--ink-3); margin-top:.2rem}
.spec-head .spec-us{display:flex; align-items:center; gap:.55rem}
.spec-head .brand-mark{width:1.35rem}
@media (max-width:44rem){
  .lane{grid-template-columns:minmax(0,1fr) 2.1rem 2.1rem; column-gap:.5rem; row-gap:0}
  .lane-stages{grid-column:1; grid-row:1 / span 6; grid-template-columns:none; grid-template-rows:subgrid; margin:0}
  .lane-stages li{padding:0 0 0 1.6rem; min-height:3.6rem; align-content:start}
  .lane-stages li::before{left:.42rem; right:auto; top:0; bottom:0; width:1px; height:auto}
  .lane-stages li:first-child::before{left:.42rem; top:.42rem}
  .lane-stages li:last-child::before{top:0; bottom:auto; height:.42rem; width:1px}
  .lane-dot{top:.1rem}
  .lane-br{writing-mode:vertical-rl; min-height:0; min-width:0; padding:.8rem 0; justify-content:flex-start}
  .lane-us{grid-column:2; grid-row:1 / 5}
  .lane-them{grid-column:3; grid-row:3 / 7; justify-content:flex-end}
  .spec-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .spec-row > span:first-child{grid-column:1 / -1; padding:.9rem 0 0}
  .spec-row > span{padding:.5rem .7rem .85rem}
  .spec-head > span:first-child{display:none}
  .spec-row b{font-size:1.15rem}
}

/* ── reading pages: topic tiles, cards, up next, glossary ─────────────── */
.ti{--tc:var(--viz-1); display:inline-grid; place-items:center; flex:none; width:2.6rem; height:2.6rem; border-radius:.7rem; background:color-mix(in srgb, var(--tc) 15%, var(--panel)); color:color-mix(in srgb, var(--tc) 78%, var(--ink)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tc) 22%, transparent)}
.ti svg{width:58%; height:58%}
.ti-sm{width:1.9rem; height:1.9rem; border-radius:.5rem}
.ti-lg{width:4.2rem; height:4.2rem; border-radius:1rem}
.ti[data-c="2"]{--tc:var(--viz-2)} .ti[data-c="3"]{--tc:var(--viz-3)} .ti[data-c="4"]{--tc:var(--viz-4)} .ti[data-c="5"]{--tc:var(--viz-5)} .ti[data-c="6"]{--tc:var(--viz-6)}

.pcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr)); gap:1rem; list-style:none; margin:0; padding:0}
.pc{margin:0; min-width:0}
.pc a{display:grid; gap:.95rem; align-content:start; height:100%; padding:1.15rem 1.2rem 1.25rem; border-radius:var(--r-lg); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); text-decoration:none; color:inherit; transition:box-shadow .15s, transform .15s}
.pc a:hover{box-shadow:inset 0 0 0 1px var(--ink-3), 0 .8rem 1.6rem -1.2rem rgba(10,14,12,.35); transform:translateY(-2px)}
.pc a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.pc-b{display:grid; gap:.45rem; min-width:0}
.pc-meta{font:500 var(--t-xs)/1.3 var(--f-ui); color:var(--ink-3)}
.pc-t{font:400 1.3rem/1.2 var(--f-head); letter-spacing:-.01em; color:var(--ink); text-wrap:pretty}
.pc-s{font:400 .97rem/1.45 var(--f-serif); color:var(--ink-2); text-wrap:pretty}
.pc-feat{grid-column:1 / -1}
.pc{--tc:var(--viz-1)} .pc[data-c="2"]{--tc:var(--viz-2)} .pc[data-c="3"]{--tc:var(--viz-3)} .pc[data-c="4"]{--tc:var(--viz-4)} .pc[data-c="5"]{--tc:var(--viz-5)} .pc[data-c="6"]{--tc:var(--viz-6)}
.pc-feat a{grid-template-columns:auto minmax(0,1fr); column-gap:1.5rem; align-items:start; padding:1.6rem 1.7rem 1.7rem; background:linear-gradient(135deg, color-mix(in srgb, var(--tc) 9%, var(--panel)), var(--panel) 62%)}
.pc-feat .pc-t{font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.12}
.pc-feat .pc-s{font-size:1.08rem; max-width:62ch}
.pcards-mini{grid-template-columns:minmax(0,1fr); gap:.6rem}
.pcards-mini .pc a{grid-template-columns:auto minmax(0,1fr); column-gap:.9rem; padding:.9rem 1rem}
.pcards-mini .pc-t{font-size:1.12rem}
.pcards-mini .pc-s{font-size:.93rem}
@media (max-width:44rem){ .pc-feat a{grid-template-columns:minmax(0,1fr); padding:1.2rem} .pc-feat .ti-lg{width:3rem; height:3rem} }

.gc-group + .gc-group{margin-top:1.4rem}
.gc-group-h{font:italic 400 1.15rem/1.2 var(--f-head); color:var(--ink-2); margin:0 0 .65rem}
.gcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr)); gap:.55rem; list-style:none; margin:0; padding:0}
.gcards li{margin:0}
.gc{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.8rem; align-items:center; height:100%; padding:.7rem .85rem; border-radius:var(--r); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line-2); text-decoration:none; color:inherit; transition:box-shadow .15s}
.gc:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.gc-b{display:grid; gap:.15rem; min-width:0}
.gc b{font:600 .96rem/1.3 var(--f-ui); color:var(--ink)}
.gc small{font:400 var(--t-xs)/1.3 var(--f-ui); color:var(--ink-3)}

.upnext{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1.1rem; align-items:center; max-width:58rem; margin:0 0 1.6rem; padding:1rem 1.15rem; border-radius:var(--r-lg); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line)}
.upnext-cal{display:grid; width:3.7rem; border-radius:var(--r); overflow:hidden; text-align:center; background:var(--bg); box-shadow:inset 0 0 0 1px var(--line)}
.upnext-cal small{display:block; padding:.32rem 0 .28rem; background:var(--hi-strong); color:#fff; font:650 .7rem/1 var(--f-ui)}
.upnext-cal b{font:400 1.75rem/1 var(--f-head); padding:.4rem 0 .5rem; color:var(--ink)}
.upnext-b{display:grid; gap:.25rem; min-width:0}
.upnext-k{font:600 var(--t-xs)/1.3 var(--f-ui); color:var(--hi-strong)}
.upnext-b b{font:400 1.25rem/1.25 var(--f-head); color:var(--ink)}
.upnext-b > span:last-child{font:400 .97rem/1.45 var(--f-serif); color:var(--ink-2)}
@media (max-width:44rem){ .upnext{grid-template-columns:auto minmax(0,1fr)} .upnext > .ti{display:none} }

/* articles: topic badge, In short, numbered sections, reading bar */
.art-topic{display:inline-flex; align-items:center; gap:.45rem; margin-right:.9rem; font:600 var(--t-xs)/1 var(--f-ui); font-style:normal; color:var(--ink-2); vertical-align:middle}
.inshort{margin:0 0 2.2rem; padding:1.1rem 1.25rem 1.2rem; border-radius:var(--r-lg); background:color-mix(in srgb, var(--hi-strong) 9%, var(--panel)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hi-strong) 25%, transparent)}
.inshort-h{font:650 var(--t-sm)/1.2 var(--f-ui) !important; color:var(--ink) !important; margin:0 0 .55rem !important}
.inshort ul{display:grid; gap:.4rem; margin:0}
.inshort li{font-size:1rem; line-height:1.48; color:var(--ink)}
.gd article.prose{counter-reset:sec}
.gd article.prose > h2:not(#related){counter-increment:sec}
.gd article.prose > h2:not(#related)::before{content:counter(sec, decimal-leading-zero); display:block; margin-bottom:.4rem; font:500 var(--t-xs)/1 var(--f-mono); color:var(--hi-strong); font-variant-numeric:tabular-nums}
.readbar{position:fixed; top:0; left:0; right:0; height:3px; z-index:70; pointer-events:none; transform-origin:0 50%; transform:scaleX(0); background:var(--hi-strong)}
@supports (animation-timeline: scroll()){ .readbar{animation:readbar linear both; animation-timeline:scroll(root)} }
@supports not (animation-timeline: scroll()){ .readbar{display:none} }
@keyframes readbar{to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){ .readbar{display:none} }

.gl-tools{display:grid; gap:.75rem; padding:.2rem 0 1rem; margin-bottom:1.6rem; border-bottom:1px solid var(--line)}
.gl-search .input{width:100%; max-width:30rem}
.gl-nav{display:flex; flex-wrap:wrap; gap:.45rem}
.gl-nav a{display:inline-flex; align-items:center; gap:.5rem; padding:.22rem .75rem .22rem .25rem; border-radius:999px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); font:500 .88rem/1.2 var(--f-ui); color:var(--ink-2); text-decoration:none}
.gl-nav a:hover{color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink-3)}
.gl-nav .ti-sm{width:1.6rem; height:1.6rem; border-radius:999px}
.gl-none{font:italic 400 1.05rem/1.4 var(--f-serif); color:var(--ink-3); margin-bottom:1.5rem}
.gl-group{margin:0 0 2.4rem; scroll-margin-top:calc(var(--bar-h) + 1rem)}
.gl-group-h{display:flex; align-items:center; gap:.75rem; font:400 1.55rem/1.2 var(--f-head); color:var(--ink); margin:0 0 1rem}
.gl-group-h small{font:500 var(--t-xs)/1 var(--f-ui); color:var(--ink-3); padding:.25rem .5rem; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line)}
.gl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr)); gap:.75rem; margin:0}
.gl-card{padding:1rem 1.1rem 1.1rem; border-radius:var(--r); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line-2); scroll-margin-top:calc(var(--bar-h) + 1rem); transition:box-shadow .2s, background .2s}
.gl-card:target{background:var(--accent-wash); box-shadow:inset 0 0 0 2px var(--accent)}
.gl-card dt{font:400 1.25rem/1.2 var(--f-head); color:var(--ink)}
.gl-card dd{margin:.4rem 0 0; font:400 .98rem/1.5 var(--f-serif); color:var(--ink-2)}
.gl-card dd a{font:600 .84rem/1.4 var(--f-ui); margin-left:.2rem; white-space:nowrap}

/* ── start here: goal cards, then a route, then the key question ───────── */
.goals{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr)); gap:1rem; list-style:none; margin:0; padding:0}
.goals li{margin:0}
.goal{display:grid; grid-template-rows:auto auto 1fr auto; gap:.6rem; height:100%; padding:1.1rem 1.15rem 1.15rem; border-radius:var(--r-lg); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); text-decoration:none; color:inherit; transition:box-shadow .15s, transform .15s}
.goal:hover{box-shadow:inset 0 0 0 1px var(--ink-3), 0 .9rem 1.8rem -1.3rem rgba(10,14,12,.4); transform:translateY(-2px)}
.goal:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.goal-top{display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem; margin-bottom:.3rem}
.goal-art{display:block; width:3.6rem; height:3.6rem}
.goal-art svg{width:100%; height:100%; display:block}
.goal-badge{font:600 var(--t-2xs)/1 var(--f-ui); padding:.32rem .55rem; border-radius:999px; white-space:nowrap}
.goal-badge.free{background:var(--good-wash); color:var(--good)}
.goal-badge.part{background:var(--good-wash); color:var(--good)}
.goal-badge.key{background:var(--bg-2); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line)}
.goal-q{font:400 1.3rem/1.18 var(--f-head); letter-spacing:-.01em; color:var(--ink); text-wrap:pretty}
.goal-x{font:400 .96rem/1.42 var(--f-serif); color:var(--ink-2)}
.goal-tool{font:650 var(--t-sm)/1.2 var(--f-ui); color:var(--ink); padding-top:.7rem; border-top:1px solid var(--line-2)}
.goal:hover .goal-tool span{color:var(--accent)}
.start-sec{margin-top:clamp(2.5rem,6vw,4rem)}
.start-sec > .viz{margin:0}
.start-lede{font:400 1.08rem/1.5 var(--f-serif); color:var(--ink-2); margin:.5rem 0 1.4rem; max-width:52ch}
.keysplit{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:1rem; align-items:stretch}
.ks{padding:1.2rem 1.3rem 1.3rem; border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--line); display:grid; gap:.9rem; align-content:start}
.ks-free{background:color-mix(in srgb, var(--good) 6%, var(--panel))}
.ks-key{background:var(--panel)}
.ks-h{display:flex; align-items:center; gap:.6rem; font:650 1.05rem/1.2 var(--f-ui); color:var(--ink); margin:0}
.ks-list{display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; margin:0; padding:0}
.ks-list li{margin:0}
.ks-list a{display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .75rem; border-radius:999px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); font:500 .9rem/1.2 var(--f-ui); color:var(--ink); text-decoration:none}
.ks-free .ks-list a::before{content:""; width:.42rem; height:.7rem; border:solid var(--good); border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg); margin-right:.15rem}
.ks-key .ks-list a::before{content:""; width:.5rem; height:.5rem; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.ks-list a:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.ks-note{font:400 .98rem/1.48 var(--f-serif); color:var(--ink-2)}
.ks-btns{display:flex; flex-wrap:wrap; gap:.5rem}
@media (max-width:44rem){ .keysplit{grid-template-columns:minmax(0,1fr)} .goal-q{font-size:1.2rem} }
/* learn hub: tiles on the three starters and the reference list; guides hub groups */
.learn-three a{display:grid; grid-template-columns:auto minmax(0,1fr); align-content:start; gap:.45rem .8rem}
.learn-three a > .ti{grid-row:1}
.learn-three .learn-n{grid-row:1; justify-self:end; align-self:center}
.learn-three a > b,.learn-three a > span:last-child{grid-column:1 / -1}
.learn-three a > b{margin-top:.45rem}
.learn-ref a{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.85rem; row-gap:.1rem; align-items:center}
.learn-ref a > .ti{grid-row:1 / span 2}
.gd-group{margin-top:clamp(2.4rem,5vw,3.6rem)}
.gd-group-h{display:grid; gap:.45rem; margin-bottom:1.15rem; max-width:44rem}
.gd-group-h p{font:400 1.05rem/1.5 var(--f-serif); color:var(--ink-2)}
.gd-hub > .viz-steps{margin-top:0}
.pcards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pcards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pcards.c4 .pc-t{font-size:1.2rem}
@media (max-width:68rem){ .pcards.c4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:56rem){ .pcards.c3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:40rem){ .pcards.c3,.pcards.c4{grid-template-columns:minmax(0,1fr)} }
.gd-hub > .gd-group{margin-top:0}
.inshort li + li{margin-top:0}
@media (max-width:44rem){
  .goals{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem}
  .goal{padding:.85rem .85rem .9rem; gap:.45rem}
  .goal-x{display:none}
  .goal-art{width:2.5rem; height:2.5rem}
  .goal-q{font-size:1.05rem; line-height:1.2}
  .goal-tool{font-size:.78rem; padding-top:.55rem}
  .goal-badge{font-size:.68rem; padding:.28rem .5rem}
}

/* the Tuesday prompt email (build.mjs leadBlock, core/lead.js): a ruled band, the offer beside the form */
.lead{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:1rem clamp(1.4rem,4vw,3rem); align-items:center; margin:clamp(2rem,4vw,3rem) 0; padding:clamp(1.2rem,2.6vw,1.7rem) 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line)}
.lead-h{margin:0; font:420 clamp(1.25rem,2.2vw,1.55rem)/1.2 var(--f-head); letter-spacing:-.01em; color:var(--ink)}
.lead-p{margin:.45rem 0 0; font:400 1rem/1.55 var(--f-serif); color:var(--ink-2); max-width:56ch}
.lead-form{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem; align-items:start}
.lead-form .input{min-width:0}
.lead-form .btn{white-space:nowrap}
.lead-msg{grid-column:1 / -1; margin:0; min-height:1.2em; font:400 .9rem/1.45 var(--f-ui); color:var(--ink-2)}
.lead-form.done .lead-msg{color:var(--good)}
.prose .lead p{margin:0}
.prose .lead .lead-p{margin-top:.45rem}
.home-lead .lead{margin:0}
@media (max-width:44rem){ .lead{grid-template-columns:minmax(0,1fr)} .lead-form{grid-template-columns:minmax(0,1fr)} .lead-form .btn{justify-self:start} }