/* 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}

/* ---------- feature videos ---------- */
.rd-watch{align-self:flex-start;margin-top:auto;min-height:36px;font-size:var(--fs-sm)}
.rd-watch[hidden]{display:none}
.vstrip{padding-block:var(--s6);border-top:1px solid var(--hairline)}
.vstrip[hidden]{display:none}
.vstrip h2{margin:0 0 var(--s2);font-size:var(--fs-xl)}
.vstrip p{margin:0 0 var(--s4)}
.vstrip-row{list-style:none;margin:0;padding:0 0 var(--s3);display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x proximity}
.vstrip-row li{flex:none;width:132px;scroll-snap-align:start}
.vthumb{display:block;width:100%;padding:0;background:var(--surface);border:1px solid var(--hairline-strong);border-radius:var(--radius-card);color:var(--text);font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.vthumb:hover{border-color:var(--amber)}
.vthumb .vp{position:relative;display:block;aspect-ratio:9/16;background:var(--surface-2)}
.vthumb img{display:block;width:100%;height:100%;object-fit:cover}
.vthumb .vp svg{position:absolute;right:var(--s2);bottom:var(--s2);width:28px;height:28px;padding:6px;box-sizing:border-box;background:var(--amber);color:var(--ink-on-amber);border-radius:var(--radius-sm)}
.vthumb .vt{display:block;padding:var(--s2);font:500 var(--fs-xs)/1.3 var(--font-sans);color:var(--text-dim)}

.vmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--s3);background:rgba(var(--shade),.86)}
.vmodal[hidden]{display:none}
.vbox{display:flex;flex-direction:column;gap:var(--s2);max-width:100%;padding:var(--s3);background:var(--surface-2);border:1px solid var(--hairline-strong);border-radius:var(--radius-card);color:var(--text)}
.vbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.vbar h2{margin:0;font-size:var(--fs-md);color:var(--text-strong)}
.vclose{flex:none;min-height:36px;padding:0 var(--s3);background:transparent;color:var(--text);border:1px solid var(--hairline-strong);border-radius:var(--radius-ctl);font:500 var(--fs-sm) var(--font-sans);cursor:pointer}
.vclose:hover{border-color:var(--amber)}
.vbox video{display:block;height:min(78vh,calc(100vh - 8rem));max-width:calc(100vw - 2.5rem);aspect-ratio:9/16;background:#000}
/* "Also on" links under each video (owner 7 Oct) */
.vlinks{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0;font:500 var(--fs-sm) var(--font-sans);color:var(--text-dim)}
.vlinks[hidden]{display:none}
.vlinks a{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--s3);border:1px solid var(--hairline-strong);border-radius:var(--radius-ctl);color:var(--text);text-decoration:none}
.vlinks a:hover,.vlinks a:focus-visible{border-color:var(--amber);color:var(--text-strong)}
.vstrip-row .vlinks{padding-top:var(--s2);font-size:var(--fs-xs);gap:var(--s1)}
.vstrip-row .vlinks a{min-height:28px;padding:0 var(--s2)}