/* HTMLoop website — direction B "Loop" (2026-10-05). System fonts only, no external requests.
   Rhythm: dark opening band (header + hero) → paper (why HTML, workflow, scenarios) → sage (recipient) → paper (essentials) → dark signup band. */
:root{
  --ink:#17221f;--ink-deep:#0f1714;--pane:#1f2d27;--pane-2:#263831;--pane-line:#3b4d44;
  --paper:#f5f2ea;--paper-2:#ebe7db;--white:#fffefb;--sage:#e6eadf;
  --fg:#17221f;--muted:#5b675f;--line:#d8dbcf;
  --on-dark:#f5f2ea;--on-dark-soft:#cfd8cd;--on-dark-muted:#a9b8ab;
  --amber:#f2a449;--amber-hover:#ffbb63;--amber-ink:#8f5412;--amber-wash:rgba(242,164,73,.22);
  --sans:'Avenir Next','Helvetica Neue','Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --ko:'Apple SD Gothic Neo','Malgun Gothic','Avenir Next','Helvetica Neue','Segoe UI',sans-serif;
  --mono:'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--fg);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
html[lang=ko] body{font-family:var(--ko)}
a{color:inherit;text-underline-offset:5px}
a:hover{color:var(--amber-ink)}
button,input,textarea,select{font:inherit}
:focus-visible{outline:3px solid var(--amber-ink);outline-offset:4px}
.top :focus-visible,.band-wl :focus-visible{outline-color:var(--amber)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p{margin-top:0}
h1{font:700 clamp(44px,5.2vw,76px)/1.02 var(--sans);letter-spacing:-.045em;margin-bottom:26px}
h2{font:700 clamp(30px,3.3vw,44px)/1.1 var(--sans);letter-spacing:-.035em;margin-bottom:20px}
h3{font-size:19px;line-height:1.35;font-weight:600;margin-bottom:10px}
html[lang=ko] h1,html[lang=ko] h2,html[lang=ko] h3{font-family:var(--ko);word-break:keep-all}
html[lang=ko] h1,html[lang=ko] h2{font-weight:800;letter-spacing:-.05em;line-height:1.16}
html[lang=ko] h1{font-size:clamp(38px,4.5vw,64px)}
html[lang=ko] h2{font-size:clamp(28px,3vw,40px)}
html[lang=ko] p{word-break:keep-all;overflow-wrap:break-word}
p{max-width:62ch}
.eyebrow{font:600 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.wrap{max-width:1240px;margin:auto;padding:0 44px}
.wrap.narrow{max-width:900px}
.skip{position:absolute;left:16px;top:-90px;background:var(--paper);color:var(--fg);padding:12px;z-index:10}
.skip:focus{top:8px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Dark bands: header, hero, sub-page intro */
.top{background:var(--ink);color:var(--on-dark)}
.top .eyebrow{color:var(--on-dark-muted)}
.top a:hover{color:var(--amber)}
header{display:flex;align-items:center;justify-content:space-between;padding:24px 0;gap:24px}
header img{width:140px;height:auto}
nav{display:flex;gap:26px;align-items:center;font-size:14px}
nav a{text-decoration:none;padding:8px 0;color:var(--on-dark-soft)}
nav a[aria-current=page]{text-decoration:underline;color:var(--on-dark)}
.hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:56px;align-items:center;padding:40px 0 72px}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero h1{font-size:clamp(40px,4.1vw,56px);line-height:1.04}
html[lang=ko] .hero h1{font-size:clamp(34px,3.6vw,50px);line-height:1.2}
.hero .eyebrow{display:flex;align-items:center;gap:9px}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);display:inline-block}
.hero-lead{font-size:17px;line-height:1.8;color:var(--on-dark-soft);max-width:44ch}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin:30px 0 20px}
.button{display:inline-flex;gap:14px;align-items:center;justify-content:center;background:var(--amber);color:var(--ink);border:1px solid var(--amber);padding:14px 24px;border-radius:6px;text-decoration:none;cursor:pointer;min-height:50px;font-size:15px;font-weight:700;transition:background .18s}
.button:hover{background:var(--amber-hover);color:var(--ink)}
.button.secondary{background:transparent;color:var(--fg);border-color:var(--fg)}
.button.secondary:hover{background:var(--paper-2)}
.button:disabled{opacity:.6;cursor:default}
.text-link{font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid #87958b;padding:8px 0;display:inline-block}
.top .text-link{color:var(--on-dark);border-color:#6f8274}
.availability{font:11.5px/1.8 var(--mono);color:var(--on-dark-muted);max-width:none}

/* Illustrative workspace (reconstruction for explanation; labeled in both languages) */
.ws{position:relative;min-width:0}
.ws-frame{background:var(--pane);border:1px solid var(--pane-line);border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.45);overflow:hidden;position:relative}
.ws-title{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--pane-line);font:10px/1.4 var(--mono);color:var(--on-dark-muted);letter-spacing:.06em}
.ws-title i{width:9px;height:9px;border-radius:50%;background:#48594f;display:inline-block;flex:none}
.ws-file{margin-left:4px}
.ws-illus{margin-left:auto;text-align:right}
.panes{display:grid;grid-template-columns:150px minmax(0,1fr) 170px;min-height:330px}
.pane{padding:14px;border-right:1px solid var(--pane-line);font-size:11px;min-width:0}
.pane:last-child{border-right:0}
.pane .ph{font:600 9px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:12px;display:flex;justify-content:space-between}
.files{display:grid;gap:8px}
.files div{display:flex;gap:8px;align-items:center;color:var(--on-dark-soft);font:10.5px/1.3 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.files div::before{content:'✓';color:var(--amber);font-weight:700;flex:none}
.files div.draft::before{content:'↳'}
.docpane{background:var(--white);color:var(--ink);padding:18px 20px}
.docpane .t{height:9px;width:62%;background:#1f2a26;border-radius:2px;margin-bottom:12px}
.docpane .ln{height:4px;background:#d9dcd3;border-radius:2px;margin:7px 0}
.docpane .ln.s{width:78%}.docpane .ln.m{width:90%}
.docpane .sel{position:relative;background:var(--amber-wash);border-left:3px solid var(--amber);padding:6px 8px;margin:10px -8px}
.docpane .sel .ln{background:#c9b48f}
.docpane .sel::after{content:attr(data-label);position:absolute;right:6px;top:-9px;background:var(--ink);color:var(--paper);font:600 8px/1.3 var(--mono);padding:3px 6px;border-radius:3px;letter-spacing:.08em}
.docpane table{width:100%;border-collapse:collapse;margin-top:10px}
.docpane td{border-top:1px solid #e3e5dc;padding:5px 0}
.docpane td i{display:block;height:4px;background:#d9dcd3;border-radius:2px}
.docpane td:first-child i{width:70%}
.cand{background:var(--pane-2);border:1px solid var(--pane-line);border-radius:6px;padding:10px;color:var(--on-dark-soft)}
.cand .ev{font:9px/1.5 var(--mono);color:var(--on-dark-muted);margin-bottom:8px}
.cand .ev b{color:var(--amber);font-weight:600}
.cand .d{font:10.5px/1.5 var(--mono);padding:3px 6px;border-radius:3px;margin:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cand .d.del{color:#8e9c91;text-decoration:line-through}
.cand .d.add{background:rgba(242,164,73,.16);color:#fbd9ad}
.cand .btns{display:flex;gap:6px;margin-top:10px}
.cand .btns span{flex:1;text-align:center;font:600 10px/1.3 var(--sans);padding:7px 4px;border-radius:4px;border:1px solid var(--pane-line);color:var(--on-dark-soft)}
.cand .btns span.apply{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.pane .note{font:9.5px/1.5 var(--sans);color:var(--on-dark-muted);margin:12px 0 0}
html[lang=ko] .pane .note,html[lang=ko] .cand .btns span{font-family:var(--ko)}
.ws-bottom{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--pane-line);font:10px/1.4 var(--mono);color:var(--on-dark-muted);letter-spacing:.04em}
.ws-bottom b{color:var(--amber);font-weight:600}
.ws-bottom .r{margin-left:auto}
.ws .thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ws-caption{font:10.5px/1.6 var(--mono);color:var(--on-dark-muted);margin:16px 0 0;letter-spacing:.02em;max-width:none}
.ws-caption b{color:var(--amber);font-weight:600}
.principles{display:flex;justify-content:space-between;gap:22px;padding:18px 0 26px;font:11.5px/1.5 var(--mono);color:var(--on-dark-muted);letter-spacing:.04em}
.principles span::before{content:'↳';color:var(--amber);margin-right:10px;font-family:Georgia,serif;font-weight:700}

/* Paper sections */
main>.wrap>section{padding:88px 0;border-bottom:1px solid var(--line)}
.flow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px}
.flow-head p{color:var(--muted);font-size:16px;max-width:34ch}
.loop-note{margin-top:30px;padding:16px 18px;border:1px solid var(--line);border-radius:6px;font-size:13px;line-height:1.6;color:var(--muted);display:flex;gap:12px;align-items:center;max-width:52ch}
.loop-note b{font:700 22px/1 Georgia,serif;color:var(--amber)}
.timeline{list-style:none;margin:0;position:relative;display:grid;gap:34px;padding:0 0 0 44px}
.timeline::before{content:'';position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--amber)}
.step{position:relative}
.step::before{content:'';position:absolute;left:-40px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:3px solid var(--amber)}
.step .tag{font:600 10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink);display:block;margin-bottom:6px}
.step h3{font-size:21px;font-weight:700;letter-spacing:-.02em}
.step p{font-size:15px;color:var(--muted);margin:0;max-width:52ch}
.step.last::after{content:'↳';position:absolute;left:-52px;bottom:-40px;font:700 34px/1 Georgia,serif;color:var(--amber);transform:scaleX(-1)}
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:10px}
.sc{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:28px;position:relative;min-width:0}
.sc .badge{position:absolute;right:16px;top:16px;font:600 9px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:4px 7px;border-radius:3px}
.sc h3{font-size:20px;font-weight:700;letter-spacing:-.02em;max-width:22ch;padding-right:70px}
.sc .row{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.sc .row span{font:600 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.sc .row.after span{color:var(--amber-ink)}
.sc .row p{font-size:14px;color:var(--fg);margin:0}
.sc .row.after{background:linear-gradient(90deg,var(--amber-wash),transparent 60%);margin:0 -28px -28px;padding:14px 28px 24px;border-radius:0 0 8px 8px}
.plan{margin-top:30px;padding:22px 26px;border-left:3px solid #a9b2a7;background:var(--paper-2);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.plan .badge{font:600 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-top:3px}
.plan h3{font-size:16px;margin-bottom:6px}
.plan p{font-size:14px;color:var(--muted);margin:0;max-width:80ch}
/* Why HTML: Markdown ← HTML → PPT/Word spectrum */
.why{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px 80px}
.why-head p{color:var(--muted);font-size:16px;max-width:36ch}
.why-grid{position:relative;display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:14px;align-items:stretch;padding-top:30px}
.why-grid::before{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:linear-gradient(90deg,#a9b2a7,var(--amber) 50%,#a9b2a7)}
.why-axis{position:absolute;top:16px;font:600 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.why-axis.l{left:0}.why-axis.r{right:0}
.why-col{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:22px 20px;margin-top:16px;min-width:0}
.why-col h3{font:600 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.why-col p{font-size:13.5px;color:var(--muted);margin:0}
.why-col .why-good{font-size:15px;font-weight:600;color:var(--fg);margin-bottom:8px;line-height:1.45}
.why-col.mid{background:var(--ink);border-color:var(--ink);color:var(--on-dark);margin-top:0;padding:26px 22px;box-shadow:0 18px 40px rgba(23,34,31,.18)}
.why-col.mid h3{color:var(--amber);font-size:14px}
.why-col.mid .why-good{color:var(--on-dark);font-size:17px}
.why-col.mid p{color:var(--on-dark-soft)}
.why-shift{grid-column:2;display:grid;gap:12px}
.why-shift p{font-size:15px;color:var(--fg);margin:0;max-width:62ch}
.why-shift .belief{padding:14px 18px;border-left:3px solid var(--amber);background:var(--amber-wash);font-weight:600}
.why-shift .badge{display:block;font:600 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:4px}
main>.wrap>section.recipient{padding:0;border:0;margin:88px 0}
.rc{background:var(--sage);border-radius:10px;padding:64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
.rc p{color:var(--muted);font-size:16px}
.rc .hint{font-size:12px;margin-top:18px}
.browser{margin:0;background:var(--white);border:1px solid #c9cfc3;border-radius:8px;overflow:hidden;box-shadow:0 24px 50px rgba(23,34,31,.14);max-width:420px;justify-self:center;width:100%}
.browser .bar{display:flex;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid #e3e6dd;background:#f3f4ee}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:#cfd4ca;display:inline-block;flex:none}
.browser .bar span{margin-left:8px;font:10px/1.4 var(--mono);color:var(--muted);background:var(--white);border:1px solid #e3e6dd;border-radius:4px;padding:3px 10px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paper-preview{display:block}
.paper-preview img{width:100%}
.browser figcaption{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;font:10px/1.5 var(--mono);color:var(--muted);border-top:1px solid #e3e6dd;letter-spacing:.04em}
.browser figcaption a{font-weight:600;color:var(--amber-ink);text-decoration:none;border-bottom:1px solid currentColor;white-space:nowrap}
main>.wrap>section.essentials{padding:64px 0;border-bottom:0}
.essentials h2{font-size:22px;letter-spacing:-.02em;margin-bottom:30px}
html[lang=ko] .essentials h2{font-size:21px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.grid h3{font-size:16px}
.grid p{font-size:13.5px;color:var(--muted);margin:0}
.essentials .text-link{margin-top:28px;font-size:13px}

/* Signup band */
.band-wl{background:var(--ink);color:var(--on-dark)}
.waitlist{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;padding:72px 0 64px;scroll-margin-top:24px}
.waitlist .eyebrow{color:var(--on-dark-muted)}
.waitlist>div>p{font-size:16px;color:var(--on-dark-soft)}
.waitlist .hint{font-size:12.5px;line-height:1.7;color:var(--on-dark-muted)}
.waitlist .hint a{color:var(--on-dark-soft)}
.policy-draft{padding:10px 12px;background:#3a3122;border:1px solid #8d6a3a;border-radius:4px;font-size:12px;max-width:40ch;color:#f3d9b0}
.waitlist form{display:grid;gap:14px;background:var(--pane);padding:30px;border:1px solid var(--pane-line);border-radius:8px}
.waitlist fieldset{display:grid;gap:12px;border:0;margin:0;padding:0;min-width:0}
.waitlist label{display:block;font-weight:500;font-size:14px;color:#e5eae3;margin-bottom:-4px}
.waitlist input,.waitlist select{width:100%;padding:12px;background:var(--white);color:var(--ink);border:1px solid #87958b;border-radius:5px}
.consent{display:flex!important;gap:12px;align-items:flex-start;font-size:13px!important;line-height:1.6;font-weight:400!important;color:var(--on-dark-soft)!important;margin:10px 0 0!important}
.consent input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--amber)}
.waitlist [hidden]{display:none}
.waitlist .button{width:100%;margin-top:6px}
#waitlist-status{overflow-wrap:anywhere;margin:16px 0 0;font-size:14px;color:var(--on-dark-soft)}
#waitlist-status[data-state=error]{color:#f3b8ad}
#waitlist-status[data-state=success]{color:#d6e7cf}

/* Footer */
.site-footer{padding:30px 0;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
.home-page .site-footer{background:var(--ink);color:var(--on-dark-muted);border-top-color:var(--pane-line)}
.home-page .site-footer a{color:var(--on-dark-soft)}
.home-page .site-footer a:hover{color:var(--amber)}

/* Sub-pages: dark intro band, paper reading column */
.band-intro .intro{padding:34px 0 52px;display:grid;gap:14px}
.band-intro h1{font-size:clamp(34px,4.2vw,56px);margin:0}
html[lang=ko] .band-intro h1{font-size:clamp(30px,3.6vw,46px)}
.band-intro .lead{font-size:17px;color:var(--on-dark-soft);margin:0}
.band-intro .lead a{color:var(--on-dark)}
.band-intro .version{font:11px/1.5 var(--mono);color:var(--on-dark-muted);margin:0;letter-spacing:.04em}
.band-intro .eyebrow{margin-bottom:0}
.faq-list{padding-top:16px}
details{border-bottom:1px solid var(--line);padding:22px 0}
summary{font-size:19px;font-weight:600;cursor:pointer;padding-right:20px;letter-spacing:-.01em}
summary:hover{color:var(--amber-ink)}
details p{margin:16px 0 0;color:var(--muted);max-width:70ch}
.faq-note{background:var(--paper-2);padding:28px 30px;margin:40px 0 70px;border-radius:8px;border-left:3px solid var(--amber)}
.faq-note h3{font-size:18px}
.faq-note a{font-weight:600}
.hint{font-size:14px;color:var(--muted)}
.support-page .wrap.narrow>.hint{margin:36px 0 26px;padding:14px 16px;border:1px dashed #a9b2a7;border-radius:6px;max-width:none}
#feedback{display:grid;gap:22px;padding-bottom:40px;max-width:720px}
#feedback label{display:grid;gap:8px;font-weight:500}
#feedback input,#feedback select,#feedback textarea{width:100%;padding:12px;background:var(--white);color:var(--ink);border:1px solid #87958b;border-radius:5px}
#feedback textarea{min-height:120px;resize:vertical}
#feedback .button{justify-self:start}
pre{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.6 var(--mono);background:var(--white);border:1px solid var(--line);padding:22px;margin:0;border-radius:6px}
#preview{scroll-margin-top:30px;margin:22px 0 55px;display:grid;gap:16px;max-width:720px}
#preview[hidden]{display:none}
#preview h2{font-size:24px;margin:0}
#preview .actions{margin:0}
#status{margin:0;font-size:14px;color:var(--muted)}
.privacy-page .wrap.narrow{padding-top:34px;padding-bottom:60px}
.privacy-page .policy-draft{background:#f7e5c7;border-color:#bd935d;color:var(--fg);max-width:none;margin:0 0 28px}
.privacy-facts{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:14px 24px;padding:22px 26px;background:var(--white);border:1px solid var(--line);border-radius:8px;margin:0 0 20px}
.privacy-facts dt{font-weight:600;font-size:14px}
.privacy-facts dd{margin:0;overflow-wrap:anywhere;font-size:14px;color:var(--muted)}
.privacy-page .wrap.narrow>section{padding:26px 0;border-bottom:1px solid var(--line)}
.privacy-page .wrap.narrow>section h2{font-size:24px;margin-bottom:12px}
.privacy-page .wrap.narrow>section p{color:var(--muted);font-size:15px;max-width:70ch}
.privacy-page .wrap.narrow>p{margin-top:22px}

@media(max-width:1000px){
  .wrap{padding:0 30px}
  .hero{grid-template-columns:1fr;gap:40px;padding-bottom:56px}
  .panes{grid-template-columns:130px minmax(0,1fr) 150px}
  .flow{grid-template-columns:1fr;gap:36px}
  .why{grid-template-columns:1fr;gap:28px}.why-shift{grid-column:1}
  .sc-grid{grid-template-columns:1fr}
  .rc{padding:48px 36px;grid-template-columns:1fr;gap:40px}
  .waitlist{grid-template-columns:1fr;gap:36px;padding:52px 0}
}
@media(max-width:700px){
  .wrap{padding:0 20px}
  header{padding:18px 0}header img{width:116px}nav{gap:14px;font-size:13px}
  .hero{padding:20px 0 40px}
  .hero h1{font-size:clamp(38px,9vw,52px)}
  html[lang=ko] .hero h1{font-size:clamp(31px,7.6vw,44px)}
  .hero .actions{gap:14px;margin:24px 0 18px}
  .panes{grid-template-columns:1fr;min-height:0}
  .pane{border-right:0;border-bottom:1px solid var(--pane-line)}
  .pane:last-child{border-bottom:0}
  .files{grid-template-columns:1fr 1fr}
  .ws .thread{display:none}
  .ws-illus{font-size:9px}
  .principles{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:10.5px}
  main>.wrap>section{padding:56px 0}
  main>.wrap>section.recipient{margin:56px 0}
  .timeline{padding-left:34px;gap:26px}.timeline::before{left:7px}.step::before{left:-31px;width:10px;height:10px}
  .step.last::after{left:-40px;bottom:-34px;font-size:28px}
  .sc{padding:22px}.sc .row{grid-template-columns:1fr;gap:6px}.sc .row.after{margin:0 -22px -22px;padding:14px 22px 20px}
  .sc h3{padding-right:0;margin-top:26px}
  .plan{grid-template-columns:1fr;gap:10px}
  .why-grid{grid-template-columns:1fr;gap:10px;padding-top:0}.why-grid::before,.why-axis{display:none}.why-col,.why-col.mid{margin-top:0}.why-col.mid{order:-1}
  .rc{padding:36px 22px;border-radius:8px}
  .grid{grid-template-columns:1fr;gap:22px}
  main>.wrap>section.essentials{padding:40px 0}
  .waitlist{padding:40px 0 44px}
  .waitlist form{padding:22px}
  .site-footer .wrap{display:grid;gap:10px}
  .band-intro .intro{padding:22px 0 40px}
  .privacy-facts{grid-template-columns:1fr;gap:4px;padding:18px}
  .privacy-facts dd{margin-bottom:12px}
}
@media(max-width:360px){
  .wrap{padding:0 16px}
  header img{width:104px}nav{gap:11px}
  .hero .actions .button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
}