/* Features page (v5). Tokens and components come from base.css. Scroll effect allowed here: the pinned, sideways day timeline. */
.feat-top{padding:clamp(2.5rem,1.5rem + 4vw,5rem) 0 var(--s7)}
.feat-top h1{max-width:18ch;font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.02;margin:0 0 var(--s4)}
.feat-top .lede{margin:0 0 var(--s5)}
.feat-top .btn-row{margin:0 0 var(--s5)}
.feat-jump{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font:500 var(--fs-sm)/1 var(--font-sans)}
.feat-jump a{color:var(--text-dim);text-decoration:none;padding:var(--s2) 0;border-bottom:1px solid var(--hairline-strong)}
.feat-jump a:hover{color:var(--text-strong);border-color:var(--amber)}

.block{padding-block:clamp(56px,9vw,112px)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 48px;align-items:end;margin-bottom:var(--s6)}
.head h2{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.05;margin:var(--s3) 0 0}
.head h2 em{color:var(--amber);font-style:normal}
.head p{margin:0;color:var(--text-dim);max-width:52ch}
@media(max-width:820px){.head{grid-template-columns:1fr}}

/* ---------- day timeline: pinned and scrubbed sideways (JS); vertical list on phones and for reduced motion ---------- */
.day{position:relative;overflow:hidden;border-block:1px solid var(--hairline);background:var(--surface);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.track{display:flex;width:max-content}
.panel,.day-intro{flex:none;padding:clamp(40px,8vh,80px) var(--gutter);border-right:1px solid var(--hairline);display:flex;flex-direction:column;gap:16px;justify-content:flex-end}
.panel{width:min(78vw,560px);min-height:62vh}
.day-intro{width:min(70vw,460px);gap:12px}
.day-intro h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;margin:0}
.day-intro p{margin:0}
.panel .clock{font:800 clamp(3rem,7vw,5.6rem)/.95 var(--font-sans);color:var(--text-strong);letter-spacing:-.045em}
.panel .clock small{display:block;font:500 .72rem/1 var(--font-mono);letter-spacing:.16em;color:var(--amber);text-transform:uppercase;margin-bottom:12px}
.panel h3{margin:0;font:700 1.15rem/1.3 var(--font-sans);letter-spacing:-.01em}
.panel p{margin:0;color:var(--text-dim);max-width:40ch}
.panel svg{width:100%;max-width:360px;height:auto;display:block}
.g-rule{stroke:var(--hairline-strong);fill:none} .g-line{fill:none;stroke:var(--text-strong);stroke-width:2}
.g-res{fill:var(--red);opacity:.35} .g-sup{fill:var(--green);opacity:.35}
.g-amber{fill:none;stroke:var(--amber);stroke-width:2} .g-ghost{fill:none;stroke:var(--text-mute);stroke-dasharray:4 4}
.g-stamp{fill:none;stroke:var(--green);stroke-width:2} .g-stamp-t{fill:var(--green);font:600 13px var(--font-mono)}
.g-box{fill:none;stroke:var(--hairline-strong)} .g-box.on{fill:var(--amber);fill-opacity:.25;stroke:var(--amber)}
.day.is-stacked .track{width:auto;flex-direction:column}
.day.is-stacked .panel,.day.is-stacked .day-intro{width:auto;min-height:0;border-right:0;border-bottom:1px solid var(--hairline)}
.day.is-stacked .panel:last-child{border-bottom:0}
@media(max-width:640px){.day .track{width:auto;flex-direction:column}.day .panel,.day .day-intro{width:auto;min-height:0;border-right:0;border-bottom:1px solid var(--hairline)}.day .panel:last-child{border-bottom:0}}
@media(prefers-reduced-motion:reduce){.day .track{width:auto;flex-direction:column}.day .panel,.day .day-intro{width:auto;min-height:0;border-right:0;border-bottom:1px solid var(--hairline)}.day .panel:last-child{border-bottom:0}}

/* ---------- reading cards ---------- */
.rd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px}
.rd{display:flex;flex-direction:column;gap:var(--s3)}
.rd h3{margin:0;font-size:1.25rem}
.rd p{margin:0;max-width:none;font-size:var(--fs-sm);color:var(--text-dim)}
.rd-n{font:500 var(--fs-xs)/1 var(--font-mono);letter-spacing:.14em;color:var(--amber)!important}
.rd .label-mono{display:block;margin-bottom:var(--s1);color:var(--text-mute)}
.rd-how{color:var(--text)!important}
.rd-how strong,.rd-what strong{color:var(--text-strong)}

/* ---------- the three stamps ---------- */
.stamp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin-bottom:var(--s5)}
.stamp-grid h3{margin:var(--s4) 0 var(--s2);font-size:1.1rem}
.stamp-grid p{margin:0;font-size:var(--fs-sm);color:var(--text-dim)}
.stamp-demo{display:inline-block;font:600 .75rem/1 var(--font-mono);letter-spacing:.12em;padding:8px 10px;border:1.5px solid var(--text-mute);color:var(--text-dim);transform:rotate(-2deg)}
.stamp-demo.held{border-color:var(--green);color:var(--green)} .stamp-demo.broke{border-color:var(--red);color:var(--red)}

/* ---------- using Live ---------- */
.use-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.use-list li{margin:0}
.use-list h3{margin:0 0 var(--s2);font-size:1.05rem}
.use-list p{margin:0;font-size:var(--fs-sm);color:var(--text-dim)}
#care p{max-width:68ch}