/* Vinyl Portfolio marketing site (scripts/build-site.mjs). The app's look: cream paper, ink, Fraunces for what is
   read, JetBrains Mono for labels, the burn red as the one accent, cards in the app's GLASS_PANEL recipe (hairline
   border, layered shadow, radius 14). The records are the art: every picture is a disc the app draws, or a real
   app screen. No JavaScript needed for anything here. Mobile first: the base rules are the phone layout. */
:root {
  --cream: #f4ede1;
  --cream-2: #e8dcc4;
  --ink: #1a1510;
  --muted: rgba(26, 21, 16, 0.68);
  --soft: rgba(26, 21, 16, 0.82);
  --hair: rgba(26, 21, 16, 0.12);
  --burn: #c94a2a;
  --text-burn: #a8381c;
  --green: #4a7a3a;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --panel-shadow: 0 1px 2px rgba(26, 21, 16, 0.05), 0 6px 18px rgba(26, 21, 16, 0.07);
  --gutter: 20px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
#get { scroll-margin-top: 60px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--display); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--text-burn); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--ink); color: var(--cream); padding: 10px 14px; z-index: 20; }
.mono { font-family: var(--mono); }
.kicker { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }

/* ---- Header: one row on every screen ---- */
.top { position: sticky; top: 0; z-index: 10; background: rgba(244, 237, 225, 0.92); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--hair); }
.top-in { display: flex; align-items: center; gap: 12px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; margin-right: auto; white-space: nowrap; }
.brand img { border-radius: 7px; width: 28px; height: 28px; }
.nav-wide { display: none; }
.nav-wide a, .menu nav a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.nav-wide a:hover, .nav-wide a[aria-current="page"] { color: var(--ink); }
.nav-wide a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--burn); }
.menu { position: relative; }
.top .nav-wide-cta { display: none; }
.menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); border-radius: 3px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::before { content: ""; width: 14px; height: 10px; background: linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1.5px no-repeat; }
.menu[open] summary { background: var(--cream-2); }
.menu nav { position: absolute; right: 0; top: calc(100% + 8px); width: min(280px, calc(100vw - 32px)); background: var(--cream); border: 0.8px solid var(--hair); border-radius: 14px; box-shadow: 0 12px 32px rgba(26, 21, 16, 0.16); padding: 8px; display: flex; flex-direction: column; }
.menu nav a { display: flex; align-items: center; min-height: 46px; padding: 0 12px; border-radius: 8px; color: var(--ink); font-size: 12px; }
.menu nav a:hover, .menu nav a[aria-current="page"] { background: var(--cream-2); }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 3px; background: var(--ink); color: var(--cream); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.btn:hover { background: var(--burn); border-color: var(--burn); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.btn-small { min-height: 40px; padding: 0 14px; font-size: 11px; letter-spacing: 0.14em; }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.stores { display: flex; flex-direction: column; gap: 10px; }
.stores .btn { width: 100%; }
.stores-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 14px 0 0; }
.stores-note a { color: var(--muted); }
.stores-note a:hover { color: var(--ink); }

/* ---- Hero ---- */
.hero { padding-top: 36px; padding-bottom: 48px; display: grid; gap: 28px; align-items: center; }
.crumbs { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.crumbs a { color: var(--muted); }
h1 { font-size: clamp(38px, 9.4vw, 68px); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 18px; text-wrap: balance; }
h1 em, h2 em { color: var(--burn); font-style: italic; font-weight: 600; }
.lede { font-size: clamp(18px, 2vw, 20px); line-height: 1.5; color: var(--soft); max-width: 34em; margin: 0 0 26px; }
.hero-visual { position: relative; }
.hero.solo > div { max-width: 780px; }

/* Disc clusters: the app's own renders, layered with soft shadows. Sized in % of the box so they scale. */
.discs { position: relative; width: 100%; max-width: min(520px, 88vw); margin: 0 auto; aspect-ratio: 1 / 0.86; }
.discs img { position: absolute; border-radius: 50%; filter: drop-shadow(0 16px 26px rgba(26, 21, 16, 0.28)); }
.discs .d1 { width: 64%; left: 18%; top: 4%; z-index: 3; }
.discs .d2 { width: 40%; left: 0; top: 46%; z-index: 4; }
.discs .d3 { width: 36%; right: 0; top: 0; z-index: 2; }
.discs .d4 { width: 30%; right: 4%; top: 58%; z-index: 5; }
.discs .d5 { width: 24%; left: 6%; top: 2%; z-index: 1; }
.discs.pair { aspect-ratio: 1 / 0.82; }
.discs.pair .d1 { width: 74%; left: 4%; top: 2%; }
.discs.pair .d2 { width: 40%; left: auto; right: 2%; top: 52%; }

/* ---- Sections ---- */
.band { padding-top: 56px; padding-bottom: 56px; }
.band.alt { background: var(--cream-2); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.band-head { max-width: 640px; margin-bottom: 32px; }
h2 { font-size: clamp(28px, 5.6vw, 42px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: balance; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 6px; }
.band-head p:not(.kicker) { font-size: 18px; color: var(--soft); }

/* Specimen: every variant, drawn */
.spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; margin: 0; padding: 0; list-style: none; }
.spec li { text-align: center; }
.spec img { width: 100%; filter: drop-shadow(0 8px 14px rgba(26, 21, 16, 0.22)); }
.spec span { display: block; margin-top: 10px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.spec-note { margin-top: 26px; font-size: 16px; color: var(--soft); max-width: 40em; }

/* Split: a figure and its words */
.split { display: grid; gap: 36px; align-items: center; }
/* iPhone frame (16 Pro proportions). The body is sized from --w; everything on the screen is in cqw of the screen,
   which is 402 pt wide, so 1 pt = 0.2488cqw. */
.stage { --w: min(300px, 70vw); position: relative; overflow: hidden; border-radius: 22px; background: radial-gradient(120% 80% at 50% 0%, #f3ebdd 0%, #e6d9c2 70%, #ddcdb1 100%); border: 0.8px solid var(--hair); box-shadow: var(--panel-shadow); padding: 40px 20px 0; height: calc(var(--w) * 1.6 + 40px); }
.iphone { position: relative; width: var(--w); aspect-ratio: 71.5 / 149.6; margin: 0 auto; border-radius: calc(var(--w) * 0.168); padding: calc(var(--w) * 0.04); background: linear-gradient(90deg, #22170f 0%, #5a4232 3%, #3a2a1f 6%, #2c1f16 50%, #3a2a1f 94%, #5a4232 97%, #22170f 100%); box-shadow: inset 0 0 0 calc(var(--w) * 0.0035) rgba(255, 236, 214, 0.16), 0 1px 2px rgba(26, 21, 16, 0.2), 0 30px 60px rgba(26, 21, 16, 0.3), 0 12px 24px rgba(26, 21, 16, 0.14); }
.iphone::before { content: ""; position: absolute; inset: calc(var(--w) * 0.015); border-radius: calc(var(--w) * 0.153); background: #050403; }
.iphone-screen { container-type: inline-size; position: relative; z-index: 1; height: 100%; border-radius: calc(var(--w) * 0.128); overflow: hidden; background: #dbd6ca; color: #111; }
.hw { position: absolute; width: calc(var(--w) * 0.009); border-radius: calc(var(--w) * 0.006); background: linear-gradient(90deg, #1c130d, #4a3628 60%, #2a1e15); }
.hw-action { left: calc(var(--w) * -0.007); top: 18%; height: calc(var(--w) * 0.065); }
.hw-volup { left: calc(var(--w) * -0.007); top: 25.5%; height: calc(var(--w) * 0.12); }
.hw-voldn { left: calc(var(--w) * -0.007); top: 33.5%; height: calc(var(--w) * 0.12); }
.hw-power { right: calc(var(--w) * -0.007); top: 28%; height: calc(var(--w) * 0.19); }
.hw-cam { right: calc(var(--w) * -0.005); top: 58%; width: calc(var(--w) * 0.007); height: calc(var(--w) * 0.09); }
.island { position: absolute; z-index: 3; left: 50%; top: 2.7cqw; width: 31.1cqw; height: 9.2cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }
.statusbar { position: relative; z-index: 2; height: 13.4cqw; display: flex; align-items: center; justify-content: space-between; padding-top: 0.9cqw; font-family: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif; }
.sb-time { width: 34.5cqw; text-align: center; font-size: 4.2cqw; font-weight: 600; letter-spacing: -0.01em; }
.sb-icons { width: 34.5cqw; display: flex; justify-content: center; }
.sb-icons svg { width: 19.1cqw; height: auto; }
.appbar { display: flex; align-items: center; gap: 2.4cqw; padding: 5cqw 4cqw 1.5cqw; }
.appsearch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2.2cqw; height: 10.4cqw; padding: 0 3.7cqw; border-radius: 99px; background: #e4dfd4; box-shadow: 0 0.65cqw 2.4cqw rgba(26, 21, 16, 0.1); color: rgba(26, 21, 16, 0.55); }
.appsearch svg { width: 3.9cqw; flex: 0 0 auto; }
.appsearch i { font-family: var(--display); font-size: 3.8cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appsort { flex: 0 0 auto; display: flex; align-items: center; gap: 1.3cqw; height: 7.4cqw; padding: 0 2.8cqw; border: 0.38cqw solid var(--ink); border-radius: 99px; font-family: var(--mono); font-size: 2.6cqw; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.appsort svg { width: 3.3cqw; }
.iphone-screen img { width: 100%; height: auto; }
.points { list-style: none; margin: 0; padding: 0; counter-reset: pt; }
.points li { counter-increment: pt; position: relative; padding: 18px 0 18px 52px; border-top: 1px solid var(--hair); }
.points li:last-child { border-bottom: 1px solid var(--hair); }
.points li::before { content: counter(pt, decimal-leading-zero); position: absolute; left: 0; top: 21px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--burn); }
.points p { margin: 0; color: var(--soft); font-size: 16px; }

.split > .stage, .split > .panel { order: 2; }

/* Steps: three columns with rule tops */
.steps { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.steps li { counter-increment: st; border-top: 2px solid var(--ink); padding-top: 16px; }
.steps li::before { content: "Step " counter(st); display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--burn); margin-bottom: 10px; }
.steps p { color: var(--soft); font-size: 16px; margin: 0; }

/* Panels (GLASS_PANEL recipe) */
.panel { background: var(--cream); border: 0.8px solid var(--hair); border-radius: 14px; box-shadow: var(--panel-shadow); padding: 22px; }
.band.alt .panel { background: #f7f1e7; }
.cards { display: grid; gap: 14px; }
a.card { display: block; text-decoration: none; color: var(--ink); transition: transform 0.15s ease, box-shadow 0.15s ease; }
@media (hover: hover) { a.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(26, 21, 16, 0.06), 0 14px 30px rgba(26, 21, 16, 0.12); color: var(--ink); } }
.card .kicker { margin-bottom: 8px; font-size: 10px; }
.card p { font-size: 15px; color: var(--soft); margin: 0; }
.card .go { display: none; margin-top: 12px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-burn); }
@media (prefers-reduced-motion: reduce) { a.card, .btn { transition: none; } a.card:hover { transform: none; } }

/* Grade ladder: a table, drawn as bars */
.ladder { width: 100%; border-collapse: collapse; font-size: 16px; }
.ladder caption { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; }
.ladder th, .ladder td { text-align: left; padding: 9px 0; border-top: 1px solid var(--hair); vertical-align: middle; font-weight: 400; }
.ladder thead th { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-top: 0; padding-top: 0; }
.ladder tbody th { width: 34%; padding-right: 12px; white-space: nowrap; }
.ladder tbody th b { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; display: inline-block; min-width: 3.2em; }
.ladder tbody th small { font-size: 14px; color: var(--muted); }
.bar { display: flex; align-items: center; gap: 10px; }
.bar i { display: block; height: 10px; border-radius: 2px; background: var(--ink); width: var(--w); min-width: 4px; }
.bar.base i { background: var(--burn); }
.bar span { font-family: var(--mono); font-size: 12px; white-space: nowrap; color: var(--soft); }
.ladder tbody tr:first-child th, .ladder tbody tr:first-child td { border-top-color: var(--ink); }

/* Question and answer rows (feature pages): question on the left, answer on the right */
.qa-list { padding-top: 8px; padding-bottom: 40px; }
.qa { display: grid; gap: 10px; padding: 30px 0; border-top: 1px solid var(--hair); }
.qa h2 { font-size: clamp(24px, 4.6vw, 30px); letter-spacing: -0.015em; margin: 0; }
.qa-a { font-size: 18px; line-height: 1.6; color: var(--soft); max-width: 38em; }
.qa-a .ticks, .qa-a .num { margin-top: 4px; }
.ticks { list-style: none; padding: 0; margin: 0 0 14px; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: 12px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 3px var(--cream-2); }
.num { padding-left: 0; margin: 0 0 14px; list-style: none; counter-reset: n; }
.num li { counter-increment: n; position: relative; padding-left: 40px; margin-bottom: 14px; }
.num li::before { content: counter(n); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.qa-a strong { color: var(--ink); font-weight: 600; }
.qa-fig { margin-top: 22px; }
.mini-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 22px 0 0; padding: 0; }
.mini-spec li { text-align: center; }
.mini-spec img { width: 100%; filter: drop-shadow(0 6px 12px rgba(26, 21, 16, 0.2)); }
.mini-spec span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* Figures built from type (scanner, import, wishlist) */
.ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.way { padding: 18px 16px; }
.way b { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--burn); margin-bottom: 8px; }
.way span { font-size: 15px; color: var(--soft); line-height: 1.45; display: block; }
.scanframe { position: relative; width: min(360px, 70vw); margin: 0 auto; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.scanframe img { width: 78%; filter: drop-shadow(0 16px 26px rgba(26, 21, 16, 0.28)); }
.scanframe::before, .scanframe::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.scanframe::before { background: linear-gradient(var(--ink), var(--ink)) 0 0 / 34px 3px, linear-gradient(var(--ink), var(--ink)) 0 0 / 3px 34px, linear-gradient(var(--ink), var(--ink)) 100% 0 / 34px 3px, linear-gradient(var(--ink), var(--ink)) 100% 0 / 3px 34px, linear-gradient(var(--ink), var(--ink)) 0 100% / 34px 3px, linear-gradient(var(--ink), var(--ink)) 0 100% / 3px 34px, linear-gradient(var(--ink), var(--ink)) 100% 100% / 34px 3px, linear-gradient(var(--ink), var(--ink)) 100% 100% / 3px 34px; background-repeat: no-repeat; }
.scanframe figcaption { position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.mock { max-width: 400px; margin: 0 auto; }
.mock-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hair); }
.mock-row:first-of-type { border-top: 0; }
.mock-row img { width: 56px; height: 56px; flex: 0 0 auto; filter: drop-shadow(0 4px 8px rgba(26, 21, 16, 0.2)); }
.mock-row div { flex: 1; min-width: 0; }
.mock-row strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.mock-row small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.mock-row em { font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; }
.chip { display: inline-block; padding: 4px 9px; border-radius: 999px; border: 0.8px solid var(--hair); background: var(--cream-2); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.chip.hit { background: var(--green); border-color: var(--green); color: #fff; }
.field { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border: 1px solid rgba(26, 21, 16, 0.22); border-radius: 8px; background: #fbf7f0; font-size: 17px; color: var(--ink); margin: 6px 0 12px; }
.field-label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.mock .btn { width: 100%; pointer-events: none; }
.fig-note { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center; margin-top: 14px; }

/* FAQ: question-led, collapsed so the page stays short. The answers are in the HTML for every reader. */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 19px; }
@media (hover: hover) { .faq summary:hover h3 { color: var(--text-burn); } }
.faq summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); margin: -5px 4px 0 0; transform: rotate(45deg); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 5px; }
.faq details p { color: var(--soft); padding: 0 32px 22px 0; margin: 0; max-width: 44em; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---- Dark close: the app's editorial dark sheet ---- */
.close { background: var(--ink); color: var(--cream); overflow: hidden; }
.close-in { display: grid; gap: 30px; align-items: center; padding-top: 60px; padding-bottom: 64px; }
.close h2 { color: var(--cream); font-size: clamp(34px, 7.4vw, 54px); font-weight: 900; letter-spacing: -0.025em; }
.close h2 em { color: #e2795a; }
.close p:not(.stores-note) { color: rgba(244, 237, 225, 0.8); font-size: 18px; }
.close .btn { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.close .btn:hover { background: var(--burn); border-color: var(--burn); color: #fff; }
.close .btn-ghost { background: transparent; color: var(--cream); border-color: rgba(244, 237, 225, 0.5); }
.close .btn-ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.close .stores-note, .close .stores-note a { color: rgba(244, 237, 225, 0.66); }
.close .stores-note a:hover { color: var(--cream); }
.close-disc { display: none; width: 300px; margin: 0 auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5)); }

/* ---- Footer ---- */
.foot { background: #120e0a; color: rgba(244, 237, 225, 0.8); padding: 44px 0 30px; font-size: 15px; border-top: 1px solid rgba(244, 237, 225, 0.08); }
.foot a { color: var(--cream); display: flex; align-items: center; min-height: 36px; text-decoration: none; }
.foot a:hover { text-decoration: underline; color: #fff; }
.foot-in { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.foot-in > div:first-child { grid-column: 1 / -1; }
.foot-brand { font-weight: 600; font-size: 19px; color: var(--cream); margin-bottom: 8px; }
.foot-h { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 237, 225, 0.6); margin-bottom: 4px; }
.legal { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(244, 237, 225, 0.6); margin-top: 30px; }

/* ---- Wider screens ---- */
@media (min-width: 560px) {
  .stores { flex-direction: row; flex-wrap: wrap; }
  .stores .btn { width: auto; }
  .top .nav-wide-cta { display: inline-flex; }
  .card .go { display: inline-block; }
  .spec { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mini-spec { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-in { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .foot-in > div:first-child { grid-column: auto; }
}
@media (min-width: 900px) {
  :root { --gutter: 40px; }
  body { font-size: 18px; }
  .top-in { height: 72px; gap: 28px; }
  .nav-wide { display: flex; gap: 26px; }
  .nav-wide a { padding: 8px 0; }
  .menu { display: none; }
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; padding-top: 64px; padding-bottom: 80px; }
  .hero.solo { grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }
  .band { padding-top: 88px; padding-bottom: 88px; }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; }
  .split > .stage, .split > .panel { order: 0; }
  .split.flip > .panel { order: 2; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .qa { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 48px; padding: 40px 0; }
  .faq-wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
  .close-in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; padding-top: 80px; padding-bottom: 88px; }
  .close-disc { display: block; width: 340px; }
}