/* CFAD — component stylesheet.
   Hand-written from cfad-ai/website styles.css @ c209667 ("direction A, Paper"), with every
   value taken from tokens.css. Fallbacks mirror the Paper theme so the sheet also works alone.
   Changes from the source, all noted in the component READMEs:
   - literals replaced by tokens (spacing, radii, shadows, the gap tint, the header glass);
   - .state, .id, .tag and .who hoisted from their nested selectors so chips work standalone;
   - .section.alt .label .num takes accent-dark (accent on panel measured 4.45:1). */

/* fonts — the same files tokens.css declares; harmless if declared twice */
@font-face{font-family:"Newsreader";src:url(../fonts/newsreader-latin-opsz-normal.woff2) format("woff2-variations");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(../fonts/newsreader-latin-opsz-italic.woff2) format("woff2-variations");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");font-weight:100 800;font-style:normal;font-display:swap}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper,#faf8f5);color:var(--ink,#14110e);font:17px/1.5 var(--font-sans,"Inter",system-ui,-apple-system,"Segoe UI",sans-serif);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,pre{margin:0}
ul,ol{padding:0;list-style:none}
code,pre{font-family:var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace)}
q{quotes:"\201C" "\201D"}
.wrap{width:100%;max-width:var(--measure,1120px);margin:0 auto;padding:0 var(--gutter,20px)}
@media(min-width:720px){.wrap{padding:0 32px}}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:8px;top:8px;z-index:10;background:var(--ink,#14110e);color:var(--paper,#faf8f5);padding:8px}

/* header */
.top{position:sticky;top:0;z-index:5;border-bottom:1px solid var(--rule,#ded7ce);background:rgba(250,248,245,.92);background:color-mix(in srgb,var(--paper,#faf8f5) 92%,transparent);backdrop-filter:blur(8px)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header-height,64px)}
.wordmark{display:inline-flex;align-items:center;line-height:0}
.logo{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:22px}
.nav a{font-size:15px;color:var(--mute,#6b625a);text-decoration:none}
.nav a:hover{color:var(--ink,#14110e)}
@media(max-width:820px){.nav a:not(.btn){display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;font:inherit;font-size:15px;line-height:1.5;color:inherit;background:transparent;cursor:pointer;padding:var(--button-pad-y,12px) var(--button-pad-x,20px);border-radius:var(--radius-pill,999px);border:1px solid var(--ink,#14110e);transition:background .2s,border-color .2s,color .2s}
.btn.primary{background:var(--ink,#14110e);color:var(--paper,#faf8f5)}
.btn.primary:hover{background:var(--accent-dark,#9a3412);border-color:var(--accent-dark,#9a3412)}
.btn.ghost{border-color:var(--rule,#ded7ce)}
.btn.ghost:hover{border-color:var(--ink,#14110e)}
.btn.small{padding:8px 14px;font-size:14px}
.actions{display:flex;flex-wrap:wrap;gap:var(--action-gap,12px)}

/* type */
.eyebrow{font:12.5px/1.4 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--accent,#c2410c);margin-bottom:22px}
h1{font:400 clamp(38px,5.6vw,68px)/1.04 var(--font-serif,"Newsreader",Georgia,serif);letter-spacing:-.015em;max-width:15em;margin-bottom:var(--heading-gap,26px)}
h2{font:400 clamp(28px,3.4vw,42px)/1.12 var(--font-serif,"Newsreader",Georgia,serif);letter-spacing:-.01em;max-width:22em;margin-bottom:18px}
h3{font:500 22px/1.25 var(--font-serif,"Newsreader",Georgia,serif);margin-bottom:8px}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--body,#3c3631);max-width:40em;margin-bottom:var(--lede-gap,32px)}
.sub{color:var(--mute,#6b625a);font-size:18px;max-width:40em;margin-bottom:40px}
.label{font:12.5px/1.4 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--mute,#6b625a);margin-bottom:var(--label-gap,20px)}
.label .num{color:var(--accent,#c2410c);margin-right:10px}
.section.alt .label .num{color:var(--accent-dark,#9a3412)}
.note{color:var(--body,#3c3631);max-width:46em}
.note.center{text-align:center;margin:40px auto 0;font-family:var(--font-serif,"Newsreader",Georgia,serif);font-size:20px;font-style:italic}
.facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px;font:12.5px/1.5 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);color:var(--mute,#6b625a)}
.facts li::before{content:"\2014";margin-right:8px;color:var(--accent,#c2410c)}

/* sections */
.hero{padding:var(--hero-pad-top,72px) 0 var(--hero-pad-bottom,64px)}
@media(min-width:960px){.hero{padding:104px 0 88px}}
.section{padding:var(--section-pad,88px) 0;border-top:1px solid var(--rule,#ded7ce)}
.section.alt{background:var(--panel,#f2ede6)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--col-gap,48px)}
@media(min-width:860px){.two-col{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}}

/* reveal on scroll; svg paths that draw themselves when in view */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.draw{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.in .draw,.draw.in{stroke-dashoffset:0}

/* chips — hoisted from .rlines .state, .cites .id, .paper .tag, .line .who */
.state{font:11px/1.6 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);letter-spacing:.04em;text-transform:uppercase;color:var(--mute,#6b625a);border:1px solid var(--rule,#ded7ce);border-radius:var(--radius-pill,999px);padding:1px 9px;white-space:nowrap;justify-self:start;transition:color .4s,border-color .4s,background .4s}
.state.kept{color:var(--verified,#0f766e);border-color:currentColor}
.state.changed{color:var(--accent,#c2410c);border-color:currentColor}
.state.dropped{color:var(--mute,#6b625a);border-color:currentColor;text-decoration:line-through}
.id{font:11.5px/1.6 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);color:var(--verified,#0f766e);border:1px solid currentColor;border-radius:var(--radius-pill,999px);padding:0 7px;white-space:nowrap}
.tag{font:11px/1.6 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--accent,#c2410c);border:1px solid currentColor;border-radius:var(--radius-pill,999px);padding:0 8px;white-space:nowrap}
.who{font:11px/1.6 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mute,#6b625a)}

/* hero chain */
.chain{margin-top:var(--figure-gap,64px);color:var(--ink,#14110e)}
.chain-svg{width:100%;height:auto;max-width:900px;overflow:visible}
.chain .node rect{fill:var(--white,#fff);stroke:var(--rule,#ded7ce)}
.chain .node text{font:13px var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);fill:var(--ink,#14110e);text-anchor:middle}
.chain .node{opacity:0;transform:translateY(6px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.chain.in .node{opacity:1;transform:none}
.chain.in .n1{transition-delay:.1s}.chain.in .n2{transition-delay:.3s}.chain.in .n3{transition-delay:.5s}.chain.in .n4{transition-delay:.7s}.chain.in .n5{transition-delay:.9s}
.chain.in .chain-links .draw:nth-child(1){transition-delay:.25s}.chain.in .chain-links .draw:nth-child(2){transition-delay:.45s}.chain.in .chain-links .draw:nth-child(3){transition-delay:.65s}.chain.in .chain-links .draw:nth-child(4){transition-delay:.85s}
.chain .token.forward circle{fill:var(--accent,#c2410c)}
.chain .token.back circle{fill:var(--verified,#0f766e)}
.chain .token-label{font:12px var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace)}
.chain .token-label.forward{fill:var(--accent,#c2410c)}
.chain .token-label.back{fill:var(--verified,#0f766e)}
.chain figcaption{margin-top:14px;font:12.5px/1.5 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);color:var(--mute,#6b625a)}
.chain-svg.mobile{display:none;max-width:340px;margin:0 auto}
@media(max-width:600px){.chain-svg.desktop{display:none}.chain-svg.mobile{display:block}.chain{margin-top:40px}}

/* problem */
.timeline{margin:0 0 56px;color:var(--ink,#14110e)}
.timeline svg{width:100%;height:auto;max-width:900px;overflow:visible}
.timeline .axis{stroke:var(--rule,#ded7ce);stroke-width:1.5}
.timeline .curve{fill:none;stroke:var(--accent,#c2410c);stroke-width:2.5;stroke-linecap:round}
.timeline .tick circle{fill:var(--paper,#faf8f5);stroke:var(--ink,#14110e);stroke-width:1.5}
.timeline .tick text{font:500 13px var(--font-sans,"Inter",system-ui,sans-serif);fill:var(--ink,#14110e);text-anchor:middle}
.timeline .tick .small{font:12px var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);fill:var(--mute,#6b625a)}
.timeline .t3 text{text-anchor:end}
.timeline .curve-label{font:italic 15px var(--font-serif,"Newsreader",Georgia,serif);fill:var(--accent,#c2410c)}
.timeline-svg.mobile{display:none;max-width:340px;margin:0 auto}
.timeline-svg.mobile .tick .small{font-size:10px}
.timeline .t1 text{text-anchor:middle}
@media(max-width:600px){.timeline-svg.desktop{display:none}.timeline-svg.mobile{display:block}.timeline{margin-bottom:40px}}
.problems{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--row-gap,36px) var(--col-gap,48px)}
@media(min-width:720px){.problems{grid-template-columns:repeat(2,minmax(0,1fr))}}
.problems .n{display:block;font:46px/1 var(--font-serif,"Newsreader",Georgia,serif);color:var(--accent,#c2410c);margin-bottom:12px}
.problems p,.how-grid p,.plain li,.about p,.use p{color:var(--body,#3c3631);max-width:34em}

/* two moments */
.moments{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media(min-width:900px){.moments{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
.moment{min-width:0;background:var(--white,#fff);border:1px solid var(--rule,#ded7ce);padding:var(--card-pad,28px);box-shadow:var(--shadow-card,0 24px 48px -40px rgba(20,17,14,.45))}
.when{font:12.5px/1.4 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--accent,#c2410c);margin-bottom:18px}
.exchange{display:grid;gap:14px;margin-bottom:22px}
.line{position:relative;padding:14px 16px 14px 64px;border-radius:var(--radius-lg,12px);line-height:1.5}
.line .who{position:absolute;left:14px;top:15px}
.line.you{background:var(--panel,#f2ede6)}
.line.cfad{background:var(--paper,#faf8f5);border:1px solid var(--rule,#ded7ce);font-family:var(--font-serif,"Newsreader",Georgia,serif);font-size:18px}
.line.cfad .who{color:var(--accent,#c2410c)}
.line b{font-family:var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);font-weight:500;font-size:.85em;color:var(--ink,#14110e)}
.cites{display:grid;gap:var(--inline-gap,8px);border-top:1px dashed var(--rule,#ded7ce);padding-top:16px}
.cites li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;font-size:13.5px;color:var(--body,#3c3631)}

/* how it works */
.flow{margin:8px 0 48px;color:var(--ink,#14110e)}
.flow svg{width:100%;height:auto;overflow:visible}
.flow .box rect{fill:var(--white,#fff);stroke:var(--rule,#ded7ce)}
.flow .box.product rect{stroke:var(--ink,#14110e);stroke-width:1.5}
.flow .box text{font:500 14px var(--font-sans,"Inter",system-ui,sans-serif);fill:var(--ink,#14110e);text-anchor:middle}
.flow .box text.small{font:11.5px var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);fill:var(--mute,#6b625a)}
.flow .box{opacity:0;transition:opacity .6s cubic-bezier(.2,.7,.2,1)}
.flow.in .box{opacity:1}
.flow.in .b1{transition-delay:.1s}.flow.in .b2{transition-delay:.35s}.flow.in .b3{transition-delay:.6s}.flow.in .b4{transition-delay:.85s}.flow.in .b5{transition-delay:1.1s}
.flow.in .arrows .draw:nth-child(1){transition-delay:.25s}.flow.in .arrows .draw:nth-child(2){transition-delay:.5s}.flow.in .arrows .draw:nth-child(3){transition-delay:.75s}.flow.in .arrows .draw:nth-child(4){transition-delay:1s}
.flow .back{color:var(--accent,#c2410c)}
.flow .back text{font:12px var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);fill:var(--accent,#c2410c);stroke:none}
.flow.in .back .draw{transition-delay:1.4s}
.flow .record rect{fill:var(--panel,#f2ede6);stroke:var(--rule,#ded7ce)}
.flow .record text{font:500 15px var(--font-serif,"Newsreader",Georgia,serif);fill:var(--ink,#14110e)}
.flow .record text.small{font:11.5px var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);fill:var(--mute,#6b625a)}
.flow .record{opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.2,1) 1.2s}
.flow.in .record{opacity:1}
.flow.in .drops .draw{transition-delay:1.6s}
.flow-svg.mobile{display:none;max-width:340px;margin:0 auto}
@media(max-width:700px){.flow-svg.desktop{display:none}.flow-svg.mobile{display:block}}
.how-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--row-gap,36px) var(--col-gap,48px)}
@media(min-width:860px){.how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.how-grid h3{font-size:24px}
.how-grid code{font-size:.9em;background:var(--panel,#f2ede6);padding:1px 6px;border-radius:var(--radius-xs,4px)}
.status{margin-top:12px;font:12.5px/1.5 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);color:var(--verified,#0f766e)}

/* code you already have */
.journey{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;counter-reset:j}
@media(min-width:860px){.journey{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap,24px)}}
.journey li{position:relative;background:var(--white,#fff);border:1px solid var(--rule,#ded7ce);padding:var(--card-pad-sm,24px) var(--card-pad-sm,24px) 22px;box-shadow:var(--shadow-journey,0 18px 40px -32px rgba(20,17,14,.3))}
.journey .n{display:block;font:46px/1 var(--font-serif,"Newsreader",Georgia,serif);color:var(--accent,#c2410c);margin-bottom:14px}
.journey h3{font-size:21px}
.journey p{color:var(--body,#3c3631);font-size:15.5px}
@media(min-width:860px){.journey li:not(:last-child)::after{content:"\2192";position:absolute;right:-20px;top:50%;transform:translateY(-50%);font:24px/1 var(--font-serif,"Newsreader",Georgia,serif);color:var(--mute,#6b625a);width:16px;text-align:center}}
.existing-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--card-gap,24px)}
@media(min-width:900px){.existing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
.recover,.walk{min-width:0;background:var(--white,#fff);border:1px solid var(--rule,#ded7ce);box-shadow:var(--shadow-card,0 24px 48px -40px rgba(20,17,14,.45));padding:0 0 18px}
.recover figcaption,.walk figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px var(--cell-pad-x,18px);border-bottom:1px solid var(--rule,#ded7ce);background:var(--paper,#faf8f5);font:12px/1.5 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);color:var(--mute,#6b625a)}
.recover figcaption code{color:var(--ink,#14110e)}
.recover .st{color:var(--verified,#0f766e)}
.rlines li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:start;padding:var(--cell-pad-y,14px) var(--cell-pad-x,18px);border-bottom:1px dashed var(--rule,#ded7ce);font-size:15px}
@media(max-width:520px){.rlines li{grid-template-columns:minmax(0,1fr)}}
.rlines .txt{color:var(--ink,#14110e)}
.rnote{padding:14px var(--cell-pad-x,18px) 0;font-size:13.5px;color:var(--body,#3c3631)}
.wsteps li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:6px 12px;align-items:baseline;padding:12px var(--cell-pad-x,18px);border-bottom:1px dashed var(--rule,#ded7ce);font-size:15px}
@media(max-width:520px){.wsteps li{grid-template-columns:28px minmax(0,1fr)}.wsteps .by{grid-column:2}}
.wsteps .n{font:500 18px/1 var(--font-serif,"Newsreader",Georgia,serif);color:var(--accent,#c2410c)}
.wsteps .by{font:11.5px/1.6 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);color:var(--verified,#0f766e);white-space:nowrap}
.wsteps li.gap{background:var(--gap-tint,#fdf6f1)}
.wsteps li.gap .by{color:var(--accent,#c2410c);border:1px solid currentColor;border-radius:var(--radius-pill,999px);padding:0 8px}
.wsteps li.gap .txt{color:var(--accent-dark,#9a3412)}

/* examples */
.papers{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:40px}
@media(min-width:720px){.papers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.paper{min-width:0;background:var(--white,#fff);border:1px solid var(--rule,#ded7ce);box-shadow:var(--shadow-paper,0 18px 40px -32px rgba(20,17,14,.35));display:flex;flex-direction:column}
.paper header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 10px;padding:12px var(--cell-pad-x,18px);border-bottom:1px solid var(--rule,#ded7ce);background:var(--paper,#faf8f5)}
.paper .file{font:12px var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);color:var(--mute,#6b625a)}
.paper .caption{padding:14px var(--cell-pad-x,18px) 0;color:var(--body,#3c3631);font-size:15px}
.paper pre{min-width:0;padding:14px var(--cell-pad-x,18px) 18px;overflow-x:auto;font-size:13px;line-height:1.55;color:var(--ink,#14110e)}
@media(max-width:719px){.paper pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.5px}}
.use{max-width:46em}
.use h3{font-size:22px}

/* where it stands */
.plain{display:grid;gap:16px}
.plain strong{color:var(--ink,#14110e)}

/* access, about, footer */
.access{text-align:center}
.access h2,.access .lede{margin-left:auto;margin-right:auto}
.access .actions{justify-content:center}
.about a{color:var(--accent,#c2410c)}
.foot{border-top:1px solid var(--rule,#ded7ce);padding:28px 0;font:12.5px/1.5 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);color:var(--mute,#6b625a)}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot-brand{display:inline-flex;align-items:center;gap:10px}
.logo-sm{height:18px;width:auto}

/* reduced motion: show everything, animate nothing */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.chain .node,.flow .box,.flow .record{opacity:1;transform:none;transition:none}
  .draw{stroke-dashoffset:0;transition:none}
  .token{display:none}
}

/* pages — added 2026-10-17 for the multi-page site: page header, page status, doors, the Next link,
   the phone menu, the active nav link, the six-step list, the three-point list, compact problems,
   the "more" link, and a wider speaker gutter so "CFAD Core" and "CFAD Intent" fit in an exchange. */
.nav-links{display:flex;align-items:center;gap:22px}
.nav a[aria-current="page"]{color:var(--ink,#14110e)}
.menu{display:none}
@media(max-width:820px){
  .nav-links{display:none}
  .menu{display:block}
  .menu summary{list-style:none;cursor:pointer;font-size:14px;line-height:1.5;color:var(--mute,#6b625a);padding:8px 14px;border:1px solid var(--rule,#ded7ce);border-radius:var(--radius-pill,999px)}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] summary{color:var(--ink,#14110e);border-color:var(--ink,#14110e)}
  .menu-list{position:absolute;left:0;right:0;top:100%;background:var(--paper,#faf8f5);border-bottom:1px solid var(--rule,#ded7ce);padding:8px var(--gutter,20px) 20px;display:grid}
  .nav .menu-list a{display:block;padding:12px 0;border-bottom:1px dashed var(--rule,#ded7ce);font-size:17px;color:var(--ink,#14110e);text-decoration:none}
  .nav .menu-list a[aria-current="page"]{color:var(--accent,#c2410c)}
}
.page-head{padding:var(--hero-pad-top,72px) 0 24px}
@media(min-width:960px){.page-head{padding:88px 0 32px}}
.page-head .lede{margin-bottom:0}
.page-status{margin-top:22px;font:12.5px/1.5 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);color:var(--verified,#0f766e)}
.doors{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--card-gap,24px)}
@media(min-width:720px){.doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.doors.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.door{display:block;min-width:0;background:var(--white,#fff);border:1px solid var(--rule,#ded7ce);padding:var(--card-pad-sm,24px);text-decoration:none;color:inherit;box-shadow:var(--shadow-paper,0 18px 40px -32px rgba(20,17,14,.35));transition:border-color .2s}
.door:hover{border-color:var(--ink,#14110e)}
.door .label{display:block;margin-bottom:12px}
.door h3{font-size:21px;margin-bottom:6px}
.door p{color:var(--body,#3c3631);font-size:15px;max-width:30em}
.door .go{display:block;margin-top:14px;font:12.5px/1.5 var(--font-mono,"JetBrains Mono",Consolas,Menlo,monospace);color:var(--accent,#c2410c)}
.more{display:inline-block;margin-top:28px;font:400 18px/1.3 var(--font-serif,"Newsreader",Georgia,serif);color:var(--ink,#14110e);text-decoration:none;border-bottom:1px solid var(--rule,#ded7ce);transition:color .2s,border-color .2s}
.more:hover{color:var(--accent-dark,#9a3412);border-color:currentColor}
.how-grid article .more{margin-top:14px;font-size:17px}
.next{border-top:1px solid var(--rule,#ded7ce);padding:40px 0}
.next .label{margin-bottom:6px}
.next a{font:400 clamp(24px,3vw,32px)/1.2 var(--font-serif,"Newsreader",Georgia,serif);letter-spacing:-.01em;text-decoration:none;color:var(--ink,#14110e)}
.next a:hover{color:var(--accent-dark,#9a3412)}
.steps{border-top:1px solid var(--rule,#ded7ce);margin-top:8px}
.steps li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 20px;padding:24px 0;border-bottom:1px solid var(--rule,#ded7ce)}
.steps .n{font:26px/1.2 var(--font-serif,"Newsreader",Georgia,serif);color:var(--accent,#c2410c);grid-row:span 2}
.steps h3{font-size:20px}
.steps p{color:var(--body,#3c3631);max-width:34em}
.points{display:grid;gap:24px}
.points li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px}
.points .n{font:500 20px/1.4 var(--font-serif,"Newsreader",Georgia,serif);color:var(--accent,#c2410c)}
.points h3{font-size:21px}
.points p{color:var(--body,#3c3631);max-width:34em}
.problems.compact{gap:24px 48px}
.problems.compact .n{font-size:32px;margin-bottom:8px}
.problems.compact h3{font-size:20px}
.problems.compact p{font-size:15.5px}
.how-grid.three{grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.how-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px}}
.how-grid.three h3{font-size:22px}
.moments.one{grid-template-columns:minmax(0,1fr);max-width:640px}
.line{padding-left:104px}
@media(max-width:520px){.line{padding:38px 16px 14px 16px}.line .who{left:16px;top:14px}}