/* Nightsky Posters — calm, premium, restrained. Self-hosted fonts (fonts.css,
 * same-origin — still zero external network calls); the system stacks remain
 * as fallbacks for the moment before the webfonts arrive. */
:root {
  --serif: 'NS Serif','Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
  --sans: 'NS Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ink: #14181f;
  --ink-soft: #5b6675;
  --line: #e7e3da;
  --paper: #faf8f3;
  --paper-2: #f2eee5;
  --night: #0b1524;
  --night-2: #0a1120;
  --gold: #b0894e;
  --gold-soft: #c9a86a;
  --radius: 16px;
  --shadow: 0 24px 60px -20px rgba(12, 20, 36, .45);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }

/* ---------------- Marketing site ---------------- */
.site { background: var(--paper); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1120px; margin: 0 auto; padding: 26px 28px;
}
.brand { font-family: var(--serif); font-size: 22px; letter-spacing: .5px; text-decoration: none; }
.brand .mark { color: var(--gold); }
.nav-cta {
  font-size: 14px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); padding: 9px 18px; border-radius: 999px;
  transition: background .2s, border-color .2s;
}
.nav-cta:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.hero {
  max-width: 1120px; margin: 0 auto; padding: 40px 28px 20px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.hero-copy h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(38px, 5vw, 62px); line-height: 1.04; letter-spacing: -.5px;
  margin: 0 0 22px;
}
.hero-copy .lede {
  font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 30em; margin: 0 0 30px;
}
.hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn-cta {
  display: inline-block; background: var(--ink); color: #fff; text-decoration: none;
  font-size: 16px; padding: 15px 30px; border-radius: 999px; letter-spacing: .2px;
  transition: transform .15s ease, box-shadow .2s;
  box-shadow: 0 10px 30px -12px rgba(20,24,31,.6);
}
.btn-cta:hover { transform: translateY(-1px); }
.price-note { font-size: 14px; color: var(--ink-soft); }
.price-note b { color: var(--ink); font-weight: 600; }

.hero-art {
  background: linear-gradient(160deg, var(--paper-2), #ece7dc);
  border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow);
  display: flex; justify-content: center;
}
.hero-art .frame {
  background: #fff; padding: 18px; border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0,0,0,.04), var(--shadow);
  width: 300px;
}
.hero-art .frame svg, .hero-art .frame img { width: 100%; height: auto; display: block; border-radius: 3px; }
/* Reserve the hero poster's footprint before hero.js injects it (CLS). */
.hero-art .frame:empty { aspect-ratio: 3 / 4; max-height: 460px; }

.trust {
  max-width: 1120px; margin: 30px auto 0; padding: 20px 28px;
  display: flex; gap: 34px; flex-wrap: wrap; justify-content: center;
  color: var(--ink-soft); font-size: 14px; border-top: 1px solid var(--line);
}
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust .dot { color: var(--gold); }

.section { max-width: 1120px; margin: 0 auto; padding: 72px 28px; }
.section h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px);
  text-align: center; margin: 0 0 14px; letter-spacing: -.3px;
}
.section .sub { text-align: center; color: var(--ink-soft); font-size: 17px; max-width: 34em; margin: 0 auto 48px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; }
.card .ico { font-size: 22px; color: var(--gold); }
.card h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin: 14px 0 8px; }
.card p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0; }
.band .card h3 { color: #5077a9; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: s; }
.step { text-align: center; }
.step .n {
  width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  /* #8a6a39 clears 4.5:1 on #faf8f3; the brighter --gold measured 3.03:1 at 18px regular. */
  font-family: var(--serif); font-size: 18px; color: #8a6a39; margin-bottom: 14px;
}
.step h3 { font-size: 18px; margin: 0 0 6px; }
.step p { color: var(--ink-soft); font-size: 15px; margin: 0; line-height: 1.6; }

.band { background: var(--night); color: #eef2f7; }
.band .section { padding: 84px 28px; }
.band h2 { color: #fff; }
.band .sub { color: #9fb0c3; }
.compare-wrap { max-width: 760px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 15px; }
.compare th, .compare td { padding: 15px 18px; text-align: left; border-bottom: 1px solid #1e2c44; }
.compare th { color: #9fb0c3; font-weight: 500; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.compare td.us { color: #fff; }
.compare .yes { color: var(--gold-soft); }
/* #7d8ba6 clears WCAG AA (4.5:1) on the #0b1524 band; #5b6b83 did not. */
.compare .no { color: #7d8ba6; }

.final { text-align: center; padding: 90px 28px; }
.final h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4vw, 46px); margin: 0 0 18px; }
.final p { color: var(--ink-soft); font-size: 18px; margin: 0 0 30px; }

.foot { border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; }
.foot .inner { max-width: 1120px; margin: 0 auto; padding: 30px 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ---------------- Studio (generator) ---------------- */
body.app { background: #0e1420; color: #e9edf3; height: 100vh; overflow: hidden; }
.app-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px; border-bottom: 1px solid #1b2536; background: #0b111c;
}
.wordmark { font-family: var(--serif); font-size: 19px; text-decoration: none; color: #f2f5f9; letter-spacing: .5px; }
.app-bar-note { color: #6f7f95; font-size: 13px; }

.studio {
  display: grid; grid-template-columns: 1fr 388px; height: calc(100vh - 53px);
}
.stage {
  /* grid item: min-width/height 0 so a zoomed poster overflows INSIDE the
     scroller instead of blowing the 1fr column out past the viewport (which
     made horizontal scroll impossible at high zoom). */
  position: relative; min-height: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 20%, #131b2b 0%, #0b111c 70%); padding: 20px 20px 12px;
}
/* Scroll viewport for the poster. margin:auto on .stage-inner centers the
   poster while it fits and hands over to natural scrolling once zoomed
   past the viewport — no separate "centered vs scrollable" mode needed. */
.stage-scroll {
  flex: 1; align-self: stretch; min-height: 0;
  display: flex; overflow: auto; padding: 12px;
}
.stage-scroll.pannable { cursor: grab; }
.stage-scroll.panning { cursor: grabbing; }
.stage-scroll.panning .preview { pointer-events: none; }
.stage-inner {
  margin: auto; background: #fff; padding: 20px; border-radius: 6px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
}
/* --zoom (set from app.js) scales the poster proportionally around its fit size.
   The 100vw term keeps the whole poster (incl. the white frame) visible at Fit
   on narrow phones: 104px = stage padding (20+20) + scroll padding (12+12)
   + stage-inner frame padding (20+20). */
.preview { width: min(calc(46vh * var(--zoom, 1)), calc(420px * var(--zoom, 1)), calc((100vw - 104px) * var(--zoom, 1))); }
/* Reserve the poster's footprint before the SVG lands (CLS). Scoped to :empty
   so the taller ratios (2:3, A2) size from their real content after render. */
.preview:empty { aspect-ratio: 3 / 4; max-height: 62vh; }
.preview svg, .preview canvas { display: block; width: 100%; height: auto; border-radius: 2px; }
.stage-hint { color: #7e8da4; font-size: 13px; margin-top: 12px; letter-spacing: .3px; } /* ≥4.5:1 even on the lighter #131b2b gradient center */

/* Zoom pill — bottom-right of the stage, out of the poster's way. */
.zoomer {
  position: absolute; right: 20px; bottom: 16px; z-index: 10;
  display: flex; align-items: center; gap: 2px; padding: 3px;
  background: rgba(11, 17, 28, .88); border: 1px solid #24314a; border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}
.zoomer button {
  background: none; border: 0; color: #cdd6e2; cursor: pointer;
  font-family: var(--sans); border-radius: 999px;
}
.zoomer button:hover:not(:disabled) { background: #1c2942; color: #fff; }
.zoomer button:disabled { color: #5d6c85; cursor: default; } /* dimmed but readable at Fit */
#zoomOut, #zoomIn { width: 44px; height: 44px; font-size: 17px; line-height: 1; }
#zoomLevel { min-width: 52px; height: 44px; font-size: 12px; letter-spacing: .4px; color: #8fa0b8; }

.panel { background: #0b111c; border-left: 1px solid #1b2536; padding: 26px 24px 98px; overflow-y: auto; }
.panel-title { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 20px; color: #f2f5f9; }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #7e8da4; }
.field > span em { color: #8a97a8; font-style: normal; text-transform: none; letter-spacing: 0; font-size: 11px; } /* ≥4.5:1 on #0b111c */
.field input, .field select {
  width: 100%; margin-top: 7px; background: #131c2c; border: 1px solid #24314a;
  color: #eaeef4; font-size: 15px; padding: 11px 12px; border-radius: 10px; font-family: var(--sans);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--gold-soft); }
.field input::placeholder { color: #8294ab; opacity: 1; } /* Chrome default #757575 was 3.7:1 on #131c2c */
/* Without color-scheme the native calendar/clock glyphs render near-black on #131c2c */
.field input[type="date"], .field input[type="time"] { color-scheme: dark; }
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator { opacity: .72; cursor: pointer; }
.field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.field input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Location search + autocomplete */
.geo-field { position: relative; }
.combo { position: relative; }
.geo-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  background: #101827; border: 1px solid #2b3a56; border-radius: 12px;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); max-height: 264px; overflow-y: auto;
}
.geo-opt {
  padding: 9px 11px; border-radius: 8px; font-size: 14.5px; color: #cdd6e2;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.geo-opt.on { background: #1c2942; color: #fff; box-shadow: inset 3px 0 0 var(--gold-soft); } /* accent makes the state legible beyond the text brightening */

/* Advanced: exact coordinates */
.advanced { margin: -4px 0 18px; }
.advanced summary {
  color: #7e8da4; font-size: 13px; cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
}
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before { content: '⌖'; color: var(--gold-soft); font-size: 14px; }
.advanced[open] summary { margin-bottom: 12px; }
.advanced .hint { color: #8a97a8; font-size: 12px; margin: 10px 0 0; line-height: 1.5; } /* ≥4.5:1 on #0b111c */

.segmented { display: flex; gap: 8px; margin-top: 8px; }
.field-hint { color: #8a97a8; font-size: 12px; margin: 8px 0 0; line-height: 1.5; } /* ≥4.5:1 on #0b111c */
.seg { flex: 1; background: #131c2c; border: 1px solid #24314a; color: #cdd6e2; font-size: 13px; padding: 10px 0; border-radius: 10px; cursor: pointer; transition: .15s; }
.seg.on { background: #eef2f7; color: #0b111c; border-color: #eef2f7; font-weight: 600; }
.visual-segmented .seg { min-width: 0; padding: 8px 6px 7px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.seg-label { display: block; line-height: 1.15; }
/* Solid palette chips: each style's paper color, one flat swatch. The inset
   ring keeps Noir visible on the dark panel and Blanc's edge crisp on the
   selected light card. */
.palette-swatch { width: 48px; height: 30px; border-radius: 7px; background: var(--chip, #7f8ea3); box-shadow: inset 0 0 0 1px rgba(127,127,127,.35); }
.layout-glyph { width: 38px; height: 46px; color: currentColor; opacity: .9; }
.layout-glyph circle, .layout-glyph line, .layout-glyph rect { fill: none; stroke: currentColor; stroke-width: 1.4; }
.layout-glyph .solid { fill: currentColor; stroke: none; opacity: .18; }
.layout-glyph .star-dot { fill: currentColor; stroke: none; opacity: .9; }

.toggles { margin: 6px 0 22px; display: flex; flex-direction: column; gap: 12px; }
.toggle { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: #cdd6e2; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--gold-soft); }
.toggle-with-help { display: flex; flex-direction: column; gap: 4px; }
.toggle-help { color: #8a97a8; font-size: 12px; line-height: 1.45; margin-left: 29px; }
.toggle-note { color: #d9b877; font-size: 12px; line-height: 1.45; margin-left: 29px; }
.toggle-note[hidden] { display: none; }

.actions { display: flex; flex-direction: column; gap: 10px; }
#stickyBuy {
  position: fixed; z-index: 50; left: auto; right: 0; bottom: 0; width: 388px;
  display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 12px 24px;
  border-top: 1px solid #24314a; border-left: 1px solid #1b2536;
  background: rgba(11, 17, 28, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 -12px 30px -24px rgba(0,0,0,.85);
}
#stickyBuy .sticky-buy-copy { min-width: 0; flex: 1; margin: 0; font-size: 12px; line-height: 1.35; color: #8a97a8; }
#stickyBuy .sticky-buy-copy strong { display: block; overflow: hidden; color: #e9edf3; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
#stickyBuy .sticky-buy-copy span { white-space: nowrap; }
#stickyBuy .btn { flex: none; padding: 12px 14px; font-size: 13px; white-space: nowrap; }
.buy-compat { display: none; }
.btn { border: none; font-size: 15px; padding: 14px; border-radius: 12px; cursor: pointer; font-family: var(--sans); transition: .15s; }
.btn-primary { background: #eef2f7; color: #0b111c; font-weight: 600; }
.btn-primary:hover { background: #fff; }
.btn-ghost { background: transparent; color: #cdd6e2; border: 1px solid #24314a; }
.btn-ghost:hover { border-color: var(--gold-soft); color: #fff; }
.btn.busy { opacity: .5; pointer-events: none; }
.is-rendering::before {
  content: ''; display: inline-block; width: 1em; height: 1em;
  margin-right: .55em; vertical-align: -.15em; border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.fineprint { color: #8a97a8; font-size: 12px; text-align: center; margin: 14px 0 0; } /* ≥4.5:1 on #0b111c */
.render-note { margin-top: 10px; }
.fineprint.credits { margin-top: 6px; font-size: 11px; color: #7d8b9d; }
.fineprint.credits a { color: inherit; }

/* ---------------- Pay-to-unlock checkout overlay (checkout.js) --------- */
.pay-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 18, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: sheetFade .2s ease;
}
.pay-card {
  position: relative; width: min(94vw, 460px); height: min(88vh, 640px);
  background: #0e1626; border: 1px solid #22304a; border-radius: 18px;
  padding: 48px 10px 10px; box-shadow: 0 40px 90px -24px rgba(0,0,0,.75);
  animation: sheetUp .28s cubic-bezier(.2,.7,.2,1);
}
.pay-close {
  position: absolute; top: 4px; right: 4px; background: none; border: none;
  width: 44px; height: 44px;
  color: #6f7f95; font-size: 26px; line-height: 1; cursor: pointer; padding: 0;
}
.pay-close:hover { color: #eaeef4; }
.pay-note { position: absolute; top: 14px; left: 20px; margin: 0; color: #9fb0c3; font-size: 13px; }
.pay-note a { color: var(--gold-soft); }
.pay-frame {
  width: 100%; height: 100%; border: none; border-radius: 10px; background: #fff;
}
html.pay-open { overflow: hidden; }

/* ---------------- Post-download "Get it printed" sheet ---------------- */
.sheet {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(6, 10, 18, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: sheetFade .2s ease;
}
/* The `hidden` attribute must beat the display rule above, or the sheet is
   always visible (fires on load, can't be dismissed). Higher specificity wins. */
.sheet[hidden] { display: none; }
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }
.sheet-card {
  position: relative; width: 100%; max-width: 460px; margin: 0 16px 4vh;
  background: #0e1626; border: 1px solid #22304a; border-radius: 18px;
  padding: 30px 28px 24px; text-align: center;
  box-shadow: 0 40px 90px -24px rgba(0,0,0,.75);
  animation: sheetUp .28s cubic-bezier(.2,.7,.2,1);
}
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet-close {
  position: absolute; top: 4px; right: 4px; background: none; border: none;
  width: 44px; height: 44px; /* full-size touch target for the dialog's dismiss */
  color: #6f7f95; font-size: 26px; line-height: 1; cursor: pointer; padding: 0;
}
.sheet-close:hover { color: #eaeef4; }
.sheet-eyebrow { color: var(--gold-soft); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; margin: 0 0 10px; }
.sheet-title { font-family: var(--serif); font-weight: 500; font-size: 26px; color: #f2f5f9; margin: 0 0 10px; }
.sheet-sub { color: #9fb0c3; font-size: 15px; line-height: 1.55; margin: 0 auto 22px; max-width: 30em; }
.sheet-primary {
  display: block; background: #eef2f7; color: #0b111c; text-decoration: none;
  font-size: 16px; font-weight: 600; padding: 15px; border-radius: 12px;
  transition: background .15s, transform .15s;
}
.sheet-primary:hover { background: #fff; transform: translateY(-1px); }
.sheet-secondary {
  display: block; margin-top: 10px; color: #cdd6e2; text-decoration: none;
  font-size: 14.5px; padding: 13px; border-radius: 12px; border: 1px solid #24314a;
  transition: border-color .15s, color .15s;
}
.sheet-secondary:hover { border-color: var(--gold-soft); color: #fff; }
/* Same [hidden]-vs-display bug class as .sheet above: without this, a hidden
   secondary link stays visible, focusable, and dead. */
.sheet-secondary[hidden] { display: none; }
.sheet-local { color: #8494ab; font-size: 13.5px; line-height: 1.55; margin: 20px 0 0; }
.sheet-local b { color: #cdd6e2; font-weight: 600; }
.sheet-guide { margin: 12px 0 0; font-size: 13px; }
.sheet-guide a { color: #aeb9c8; text-underline-offset: 3px; }
.sheet-guide a:hover { color: #fff; }
.sheet-disclose { color: #8a97a8; font-size: 11.5px; margin: 12px 0 0; } /* ≥4.5:1 on #0e1626 */

/* ---------------- Dedicated post-checkout poster page ---------------- */
body.poster-page { min-height: 100vh; background: #0b111c; color: #eaeef4; }
.poster-main { width: min(640px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0 64px; text-align: center; }
.poster-main h1 { font-family: var(--serif); font-size: clamp(36px, 7vw, 52px); font-weight: 500; margin: 0 0 12px; }
.poster-sub { color: #9fb0c3; font-size: 16px; line-height: 1.6; margin: 0 auto 28px; }
.poster-card { width: min(420px, 100%); margin: 0 auto 14px; padding: 14px; background: #0e1626; border: 1px solid #22304a; border-radius: 18px; }
.poster-preview { width: 100%; line-height: 0; overflow: hidden; border-radius: 8px; }
.poster-preview svg, .poster-preview canvas { display: block; width: 100%; height: auto; }
.poster-caption, .poster-fresh { color: #8a97a8; font-size: 13px; line-height: 1.5; margin: 12px 0 0; }
.poster-actions { display: grid; gap: 10px; width: min(420px, 100%); margin: 24px auto 0; }
.poster-divider { border: 0; border-top: 1px solid #22304a; margin: 52px 0; }
.poster-wall .sheet-primary, .poster-wall .sheet-secondary { width: min(420px, 100%); margin-left: auto; margin-right: auto; }
.poster-wall .sheet-local { max-width: 34em; margin-left: auto; margin-right: auto; }
.poster-back { display: inline-block; color: #9fb0c3; margin-top: 48px; text-decoration: none; }
.poster-back:hover { color: #fff; }
.poster-locked .poster-actions { margin-top: 28px; }
.poster-locked .btn { text-decoration: none; display: block; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 34px; }
  /* The fixed 300px frame + 116px of padding forced a ~472px min page width
     on phones — the whole page overflowed and nothing looked centered. */
  .hero-art { padding: 28px; }
  .hero-art .frame { width: min(300px, 100%); }
  .cards, .steps { grid-template-columns: 1fr; }
  .studio { grid-template-columns: 1fr; grid-template-rows: 1fr auto; height: auto; padding-bottom: 0; }
  body.app { height: auto; overflow: auto; }
  .panel { border-left: none; border-top: 1px solid #1b2536; padding-bottom: 116px; }
  #stickyBuy {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; width: auto;
    margin: 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    opacity: 0; pointer-events: none; visibility: hidden;
    transform: translateY(100%);
    transition: transform .24s ease, opacity .2s ease, visibility 0s linear .24s;
  }
  #stickyBuy.is-revealed {
    opacity: 1; pointer-events: auto; visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .page-legal-footer { padding-bottom: calc(116px + env(safe-area-inset-bottom)); scroll-margin-bottom: 116px; }
  /* The bottom-right absolute zoom pill sat on top of the centered caption
     once the stage narrowed to phone width. In the flow, below the caption,
     both stay readable and the pill lands in thumb reach. */
  .zoomer { position: static; margin-top: 10px; }
  .stage { padding-bottom: 18px; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  #stickyBuy { transition: none; }
}

@media (max-width: 640px) {
  /* Keep the 4-column comparison legible on a phone: tighter cells inside the
     scroll wrapper so it never blows out the page width. */
  .band .section { padding: 60px 20px; }
  .compare { font-size: 13.5px; min-width: 460px; }
  .compare th, .compare td { padding: 11px 12px; }
  /* On phones the split header (brand left, pill right) squeezed the brand
     into a two-line wrap and left both CTAs hugging an edge. Stack and center
     the whole marketing header + hero block instead. */
  .nav { flex-direction: column; gap: 14px; }
  .hero-copy { text-align: center; }
  .hero-copy .lede { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
}

/* Visually hidden but still announced — the export-status live region. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Visible keyboard focus for interactive elements that otherwise lean on hover.
   Pointer users are unaffected (:focus-visible only fires for keyboard nav). */
a:focus-visible, button:focus-visible, .seg:focus-visible,
.field input:focus-visible, .field select:focus-visible,
.advanced summary:focus-visible, .stage-scroll:focus-visible,
.sheet-primary:focus-visible, .sheet-secondary:focus-visible, .nav-cta:focus-visible,
.compare-wrap:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Motion is decorative; honor the OS reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-card, .pay-overlay, .pay-card { animation: none; }
  .is-rendering::before { animation: none; display: none; }
  * { transition-duration: .01ms !important; }
}

/* Cmd+P should print the poster, not a dark clipped page of app chrome. */
@media print {
  body.app { background: #fff; height: auto; overflow: visible; }
  .app-bar, .panel, .zoomer, .stage-hint, .sheet { display: none !important; }
  .studio { display: block; height: auto; }
  .stage { background: #fff; height: auto; }
  .stage-scroll { overflow: visible; }

  /* index.html: browsers drop backgrounds by default, which left the dark
     band's white text and the CTA pills printing white-on-white. */
  .band { background: none; color: #111; }
  .band h2, .compare td.us { color: #111; }
  .band .sub, .compare th, .compare .no { color: #444; }
  .compare th, .compare td { border-bottom-color: #ccc; }
  .compare .yes { color: #111; font-weight: 600; }
  .btn-cta, .nav-cta { background: none; color: #111; border: 1px solid #111; }
}

/* ---------------- Legal and quiet site footer ---------------- */
.legal-page { background: var(--night); color: #eef1f5; min-height: 100vh; }
.legal-shell { width: min(640px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 72px; }
.legal-wordmark { display: inline-block; color: #cbd3de; font-family: var(--serif); font-size: 16px; letter-spacing: .35px; text-decoration: none; }
.legal-main { padding: 72px 0 64px; }
.legal-main h1 { margin: 0 0 10px; font-family: var(--serif); font-size: clamp(40px, 8vw, 58px); font-weight: 500; line-height: 1.1; letter-spacing: -.8px; }
.legal-updated { margin: 0 0 52px; color: #8390a2; font-size: 13px; }
.legal-section + .legal-section { margin-top: 38px; }
.legal-section h2 { margin: 0 0 13px; color: var(--gold-soft); font-size: 11px; font-weight: 400; letter-spacing: .18em; line-height: 1.4; text-transform: uppercase; }
.legal-section p { margin: 0; color: #cbd3de; font-size: 16px; line-height: 1.75; }
.legal-section p + p { margin-top: 14px; }
.legal-section a { color: #eef1f5; text-underline-offset: 3px; }
.print-guide-main { padding-bottom: 54px; }
.print-guide-main .legal-updated { max-width: 34em; font-size: 16px; line-height: 1.7; }
.print-sizes { margin: 18px 0 0; padding: 0; list-style: none; color: #cbd3de; font-size: 15px; line-height: 1.8; }
.print-sizes strong { color: #eef1f5; font-weight: 600; }
.print-steps { margin: 18px 0 0; padding-left: 22px; color: #cbd3de; font-size: 16px; line-height: 1.75; }
.print-partners { margin-top: 44px; text-align: center; }
.print-partners .sheet-primary, .print-partners .sheet-secondary { width: min(420px, 100%); margin-left: auto; margin-right: auto; box-sizing: border-box; }
.print-partners .sheet-local { max-width: 34em; margin-left: auto; margin-right: auto; }
.legal-links { color: #657285; font-size: 12px; line-height: 1.7; text-align: center; }
.legal-links a { color: inherit; text-decoration: none; }
.legal-links a:hover { color: #b8c1ce; }
.page-legal-footer { padding: 24px 20px 30px; }
.foot .legal-links { margin-top: 18px; }
@media (max-width: 640px) {
  .legal-shell { width: min(640px, calc(100% - 32px)); padding-top: 30px; }
  .legal-main { padding-top: 54px; }
}