/* Skywritten — dark luxury-observatory design system. One theme, one gold accent. */
:root {
  --bg:        #070a14;
  --bg-2:      #0b1020;
  --surface:   #111726;
  --surface-2: #161d30;
  --line:      rgba(232, 194, 122, 0.14);
  --hair:      rgba(255, 255, 255, 0.08);
  --ink:       #f2ede1;
  --ink-2:     #aeb4c6;
  --ink-3:     #858ca1;
  --gold:      #e8c27a;
  --gold-2:    #d9ad5c;
  --gold-soft: rgba(232, 194, 122, 0.12);
  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1200px;
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --serif:     'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:      'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.02; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.muted { color: var(--ink-2); }
.serif { font-family: var(--serif); }

/* ---- starfield backdrop (rendered by engine, ambient) ---- */
#starfield {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.3;
}
#starfield svg { width: 140vw; height: 140vh; position: absolute; top: -20vh; left: -20vw; }
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, header, footer { position: relative; z-index: 1; }

/* ---- nav ---- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(7,10,20,0.86), rgba(7,10,20,0.55));
  border-bottom: 1px solid var(--hair);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--serif);
  font-size: 25px; font-weight: 600; letter-spacing: 0.01em; }
.brand .mark { width: 26px; height: 26px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 14.5px; color: var(--ink-2); transition: color .25s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-links a.btn-gold, .nav-links a.btn-gold:hover { color: #201704; }
.btn {
  font-family: var(--sans); font-size: 15px; font-weight: 500; cursor: pointer;
  border: none; border-radius: 999px; padding: 12px 26px; transition: transform .18s var(--ease), box-shadow .25s var(--ease);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.btn-gold { background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #201704;
  box-shadow: 0 8px 30px rgba(232,194,122,0.22); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(232,194,122,0.32); }
.btn-gold:active { transform: translateY(0) scale(0.98); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--gold-soft); border-color: var(--gold); }
.btn-lg { padding: 16px 34px; font-size: 16.5px; }
.nav-links .btn { padding: 10px 22px; }

/* ---- hero ---- */
.hero { min-height: calc(100dvh - 70px); display: grid; grid-template-columns: 1.05fr 0.95fr;
  align-items: center; gap: 48px; padding-top: 24px; padding-bottom: 56px; } /* sides come from .wrap */
.hero-copy { max-width: 560px; }
.hero h1 { font-size: clamp(46px, 5.4vw, 78px); letter-spacing: -0.01em; margin: 20px 0 22px; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero p.lede { font-size: 20px; color: var(--ink-2); max-width: 33ch; line-height: 1.5; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust { margin-top: 26px; font-size: 14px; color: var(--ink-3); display: flex;
  gap: 20px; flex-wrap: wrap; align-items: center; }
.hero-trust b { color: var(--ink-2); font-weight: 500; }

.hero-poster { justify-self: center; position: relative; }
.poster-frame {
  width: min(400px, 82vw); aspect-ratio: 3/4; border-radius: 6px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px var(--hair), 0 0 0 12px #0d1220, 0 0 0 13px var(--line);
  background: var(--bg-2);
}
.poster-frame svg { width: 100%; height: 100%; }
.poster-float { animation: floatyStraight 7s var(--ease) infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-14px) rotate(-1.2deg); } }
@keyframes floatyStraight { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---- sections ---- */
section { padding: 96px 0; }
/* Most sections carry BOTH `section` and `.wrap`, and `.wrap`'s `padding: 0 24px`
   outranks the element selector above — so the intended vertical rhythm was
   being silently zeroed and sections butted straight into each other (a CTA
   ended up flush against the next section's image on mobile). Restore it with
   matching specificity. `.hero` sets its own padding and is excluded. */
section.wrap:not(.hero) { padding-top: 96px; padding-bottom: 96px; }
.section-head { max-width: 620px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(38px, 4.6vw, 58px); margin: 14px 0 16px; }
.section-head p { font-size: 18px; color: var(--ink-2); }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* how it works — vertical stepped, not 3 equal cards */
.steps { display: grid; gap: 2px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--hair); }
.step { display: grid; grid-template-columns: 88px 1fr; gap: 24px; align-items: center;
  padding: 34px 32px; background: var(--surface); transition: background .3s var(--ease); }
.step:hover { background: var(--surface-2); }
.step .num { font-family: var(--serif); font-size: 54px; color: var(--gold);
  font-style: italic; line-height: 1; }
.step h3 { font-size: 26px; margin-bottom: 7px; }
.step p { color: var(--ink-2); font-size: 16px; max-width: 62ch; }

/* styles gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.style-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 16px; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.style-card:hover { transform: translateY(-6px); border-color: var(--line); }
.style-card .thumb { aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; background: var(--bg-2); }
.style-card .thumb svg { width: 100%; height: 100%; }
.style-card .label { display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding: 0 4px; }
.style-card .label span { font-family: var(--serif); font-size: 21px; }
.style-card .label small { color: var(--ink-3); font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; }

/* ---- generator studio ---- */
.studio { background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair); }
.studio-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 48px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 26px; }
/* app.js adds .pinned only while the whole panel fits on screen (else it would trap its lower fields) */
.panel.pinned { position: sticky; top: 92px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-2);
  margin-bottom: 7px; font-weight: 500; }
.field input, .field select {
  width: 100%; min-width: 0; background: var(--bg); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  color: var(--ink); font-family: var(--sans); font-size: 15px; padding: 12px 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field input:focus, .field select:focus { outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft); }
.field input::placeholder { color: var(--ink-3); }
/* iOS renders native date/time controls at their own intrinsic width, ignoring
   width:100% — the box spills to the screen edge. Neutralise the native appearance
   so they size exactly like the text fields (tapping still opens the iOS picker). */
.field input[type="date"], .field input[type="time"] {
  -webkit-appearance: none; appearance: none; max-width: 100%; }
/* iOS Safari right-aligns the value inside date/time inputs by default — force it
   left so it matches every other field */
.field input[type="date"]::-webkit-date-and-time-value,
.field input[type="time"]::-webkit-date-and-time-value { text-align: left; }
/* Date + time are always stacked full-width — side-by-side native pickers overflow
   and merge on iOS at every screen size, not just phones */
.field .row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.hint { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.geo-results { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--hair);
  border-radius: var(--radius-sm); overflow: hidden; display: none; }
.geo-results.show { display: block; }
.geo-results li { padding: 10px 14px; font-size: 14px; cursor: pointer; color: var(--ink-2);
  border-top: 1px solid var(--hair); }
.geo-results li:first-child { border-top: none; }
.geo-results li:hover { background: var(--surface-2); color: var(--ink); }
.style-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.style-pill { flex: 1; min-width: 70px; text-align: center; padding: 9px 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--hair); background: var(--bg); font-size: 13.5px; cursor: pointer;
  color: var(--ink-2); transition: all .2s var(--ease); }
.style-pill.active { border-color: var(--gold); color: var(--ink); background: var(--gold-soft); }

/* watermarked preview bitmap (locked state) */
.preview-img { width: 100%; height: 100%; object-fit: contain; display: block;
  user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }

/* ---- room gallery ---- */
.gal { position: relative; max-width: 980px; margin: 0 auto; }
.gal-viewport { overflow: hidden; border-radius: var(--radius); background: var(--bg-2);
  border: 1px solid var(--hair); box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.gal-track { display: flex; will-change: transform;
  transition: transform .62s var(--ease); touch-action: pan-y; cursor: grab; }
.gal-track.dragging { transition: none; cursor: grabbing; }
.gal-slide { flex: 0 0 100%; position: relative; aspect-ratio: 1 / 1; background: var(--bg-2); }
.gal-slide img { width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .45s var(--ease); -webkit-user-drag: none; user-select: none; }
.gal-slide img.loaded { opacity: 1; }

.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(7,10,20,.62); color: var(--ink); border: 1px solid var(--line);
  backdrop-filter: blur(8px); cursor: pointer; transition: background .25s var(--ease); }
.gal-nav:hover { background: rgba(7,10,20,.86); border-color: var(--gold); }
.gal-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gal-nav.prev { left: 14px; }
.gal-nav.next { right: 14px; }

.gal-caption { text-align: center; margin-top: 20px; min-height: 52px; }
.gal-caption b { display: block; font-family: var(--serif); font-size: 22px;
  font-weight: 600; color: var(--ink); }
.gal-caption span { font-size: 14.5px; color: var(--ink-3); }

.gal-dots { display: flex; gap: 9px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.gal-dot { width: 8px; height: 8px; border-radius: 50%; padding: 0; cursor: pointer;
  border: none; background: rgba(255,255,255,.22); transition: all .3s var(--ease); }
.gal-dot[aria-current="true"] { background: var(--gold); width: 26px; border-radius: 4px; }
.gal-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 700px) {
  .gal-nav { width: 38px; height: 38px; }
  .gal-nav.prev { left: 8px; }
  .gal-nav.next { right: 8px; }
  .gal-caption b { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .gal-track { transition: none; }
  .gal-slide img { transition: none; }
}

/* hero secondary link to the couple's poster */
.hero-alt { margin-top: 16px; font-size: 15px; }
.hero-alt a { color: var(--gold); border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease); }
.hero-alt a:hover { border-bottom-color: var(--gold); }

/* couple's poster promo — asymmetric, copy left, sample right */
.duo-promo { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.duo-promo h2 { font-size: clamp(34px, 4vw, 50px); margin: 14px 0 16px; }
.duo-promo p { color: var(--ink-2); font-size: 17.5px; max-width: 54ch; }
.duo-promo .hero-cta { margin-top: 30px; }
.duo-promo .poster-frame { width: min(360px, 82vw); justify-self: center; }
@media (max-width: 900px) {
  .duo-promo { grid-template-columns: 1fr; gap: 36px; }
  .duo-promo .poster-frame { order: -1; }
}

/* single / couple mode switch */
.mode-pills { display: flex; gap: 8px; }
.mode-pill { flex: 1; text-align: center; padding: 11px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--hair); background: var(--bg); font-size: 13.5px; cursor: pointer;
  color: var(--ink-2); transition: all .2s var(--ease); }
.mode-pill:hover { color: var(--ink); }
.mode-pill.active { border-color: var(--gold); color: var(--ink); background: var(--gold-soft); }
/* section label separating the two skies in couple mode */
.sky-head { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
  border-top: 1px solid var(--hair); padding-top: 16px; }
.toggles { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 20px; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2);
  cursor: pointer; white-space: nowrap; }
.toggle input { width: auto; accent-color: var(--gold); }

.preview-stage { position: relative; }
.preview-poster { width: min(460px, 100%); margin: 0 auto; aspect-ratio: 3/4;
  border-radius: 6px; overflow: hidden; background: var(--bg-2);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55), 0 0 0 1px var(--hair), 0 0 0 10px #0d1220, 0 0 0 11px var(--line); }
.preview-poster svg { width: 100%; height: 100%; }
.preview-actions { max-width: min(460px, 100%); margin: 24px auto 0; text-align: center; }
.price-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.price-opt { flex: 1; min-width: 150px; border: 1px solid var(--hair); border-radius: var(--radius-sm);
  padding: 14px 16px; cursor: pointer; text-align: left; background: var(--surface);
  transition: all .2s var(--ease); }
.price-opt.active { border-color: var(--gold); background: var(--gold-soft); }
.price-opt .p { font-family: var(--serif); font-size: 27px; color: var(--gold); }
.price-opt .n { font-size: 14px; color: var(--ink); font-weight: 500; }
.price-opt .d { font-size: 12.5px; color: var(--ink-3); }
.unlock-note { font-size: 13px; color: var(--ink-3); margin-top: 12px; }

/* ---- pricing / value strip ---- */
.value { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair);
  border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.value div { background: var(--bg-2); padding: 34px 28px; }
.value h3 { font-size: 23px; margin-bottom: 8px; }
.value p { color: var(--ink-2); font-size: 15px; }
.value .big { font-family: var(--serif); color: var(--gold); font-size: 44px; font-style: italic; }

/* ---- faq ---- */
.faq { max-width: 780px; margin: 0 auto; }
.qa { border-top: 1px solid var(--hair); padding: 24px 4px; }
.qa:last-child { border-bottom: 1px solid var(--hair); }
.qa summary { font-family: var(--serif); font-size: 23px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--gold); font-size: 28px; font-family: var(--sans);
  transition: transform .3s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { color: var(--ink-2); margin-top: 14px; font-size: 16px; max-width: 68ch; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--hair); padding: 60px 0 40px; }
.foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
  flex-wrap: wrap; }
.foot .brand { font-size: 22px; }
.foot p { color: var(--ink-3); font-size: 14px; margin-top: 12px; max-width: 42ch; }
.foot-links { display: flex; gap: 46px; flex-wrap: wrap; }
.foot-col h4 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
  margin: 0 0 14px; font-family: var(--sans); font-weight: 600; }
.foot-col a { display: block; color: var(--ink-3); font-size: 14.5px; margin-bottom: 9px;
  transition: color .2s var(--ease); }
.foot-col a:hover { color: var(--gold); }
.copyright { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hair);
  color: var(--ink-3); font-size: 13px; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }

/* ---- checkout modal ---- */
.modal-bg { position: fixed; inset: 0; z-index: 100; background: rgba(4,6,12,0.78);
  backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center;
  padding: 24px; }
.modal-bg.show { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  max-width: 460px; width: 100%; padding: 32px; max-height: 90vh; overflow-y: auto; }
.modal h3 { font-size: 30px; margin-bottom: 6px; }
.modal .sub { color: var(--ink-2); font-size: 15px; margin-bottom: 22px; }
.pay-addr { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  padding: 12px 14px; font-family: 'Outfit', monospace; font-size: 13px; word-break: break-all;
  color: var(--ink); display: flex; justify-content: space-between; gap: 10px; align-items: center;
  margin-bottom: 8px; }
.pay-addr button { background: var(--gold-soft); border: 1px solid var(--line); color: var(--gold);
  border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.net-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.net-tab { flex: 1; text-align: center; padding: 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--hair); background: var(--bg); font-size: 13.5px; cursor: pointer;
  color: var(--ink-2); }
.net-tab.active { border-color: var(--gold); color: var(--ink); background: var(--gold-soft); }
.modal .status { font-size: 14px; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  display: none; }
.modal .status.show { display: block; }
.status.err { background: rgba(220,90,90,0.12); color: #f0a8a8; border: 1px solid rgba(220,90,90,0.3); }
.status.ok { background: rgba(120,200,150,0.12); color: #a6e6bf; border: 1px solid rgba(120,200,150,0.3); }
.status.info { background: var(--surface-2); color: var(--ink-2); }
.modal-close { float: right; background: none; border: none; color: var(--ink-3); font-size: 26px;
  cursor: pointer; line-height: 1; margin: -8px -8px 0 0; }

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---- responsive ---- */
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 20px; }
  .hero-copy { max-width: 100%; margin: 0 auto; }
  .hero p.lede { max-width: 46ch; margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-trust { justify-content: center; }
  .hero-poster { order: -1; }
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .panel.pinned { position: static; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .value { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .nav-links a:not(.btn) { display: none; }
  section { padding: 68px 0; }
  section.wrap:not(.hero) { padding-top: 68px; padding-bottom: 68px; }
  .step { grid-template-columns: 56px 1fr; gap: 16px; padding: 26px 22px; }
  .step .num { font-size: 40px; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero-cta .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===================================================================
   October 2026 release: accessible controls, studio, checkout, downloads
   =================================================================== */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.modal-open { overflow: hidden; }
.flabel { display: block; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: 7px; font-weight: 500; }
.inline-link { color: var(--gold); border-bottom: 1px solid rgba(232,194,122,.35); }
.inline-link:hover { border-bottom-color: var(--gold); }
.center-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* controls that used to be <div>s are real buttons now */
.mode-pill, .style-pill, .price-opt, .net-tab, .style-card, .file-btn, .btn-search, .linkish, .peek {
  font-family: var(--sans); -webkit-appearance: none; appearance: none; }
.mode-pill, .style-pill, .net-tab { line-height: 1.3; }
.price-opt { display: flex; flex-direction: column; color: var(--ink); font-size: inherit; }
.price-opt .p, .price-opt .n, .price-opt .d { display: block; }
.style-card { display: block; width: 100%; text-align: left; color: var(--ink); cursor: pointer; font-size: inherit; }
.style-card .label { margin: 14px 0 0; letter-spacing: 0; display: flex; }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; }
.linkish { background: none; border: none; padding: 0; color: var(--gold); cursor: pointer; font-size: inherit;
  border-bottom: 1px dashed rgba(232,194,122,.5); }
.linkish:hover { border-bottom-style: solid; }

/* place search: explicit Search, as the OpenStreetMap usage policy requires */
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1; }
.btn-search { flex: none; border: 1px solid var(--line); background: var(--gold-soft); color: var(--gold);
  border-radius: var(--radius-sm); padding: 0 16px; font-size: 14px; font-weight: 500; cursor: pointer; }
.btn-search:hover { border-color: var(--gold); }
.geo-results li { padding: 0; }
.geo-results li button { width: 100%; text-align: left; background: none; border: none; color: var(--ink-2);
  padding: 10px 14px; font: inherit; font-size: 14px; cursor: pointer; overflow-wrap: anywhere; }
.geo-results li button:hover, .geo-results li button:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
.geo-status { overflow-wrap: anywhere; }
.geo-status:empty { display: none; }
.osm { font-size: 11.5px; }
.osm a { color: var(--ink-2); border-bottom: 1px dotted var(--ink-3); }
.coord-row { margin-top: 12px; grid-template-columns: 1fr 1fr !important; }
.field-err { color: #f0a8a8; font-size: 12.5px; margin-top: 6px; }
.zone-line { line-height: 1.5; }
.date-read b { color: var(--ink-2); font-weight: 500; }
.date-read:empty { display: none; }
.pp-reset { margin: 8px 0 0; text-align: center; font-size: 13.5px; }
.zone-line b { color: var(--ink-2); font-weight: 500; }
.zone-select { margin-top: 8px; }
.sky-block { margin-bottom: 4px; }

/* preview */
.preview-poster.busy { opacity: .82; transition: opacity .2s var(--ease); }
.preview-tools { text-align: center; margin-top: 14px; font-size: 13.5px; }
.preview-tools .hint { display: block; overflow-wrap: anywhere; }
/* 16px: iOS zooms into focused fields with smaller text */
.share-url { display: block; width: 100%; max-width: 460px; margin: 6px auto 0; background: var(--bg); border: 1px solid var(--hair);
  border-radius: var(--radius-sm); color: var(--ink-2); font: inherit; font-size: 16px; padding: 8px 10px; }
.notice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 14px; color: var(--ink-2); margin-bottom: 14px; text-align: left; }
.buy-btn { width: 100%; justify-content: center; }
.unlock-note b { color: var(--ink-2); font-weight: 500; }

/* download panel */
.dl-panel { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; scroll-margin-top: 88px; }
.dl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.dl-ok { background: rgba(120,200,150,0.14); color: #a6e6bf; border: 1px solid rgba(120,200,150,0.3);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.dl-head #dlTier { font-family: var(--serif); font-size: 22px; }
.dl-receipt { font-size: 13.5px; color: var(--ink-2); margin-bottom: 16px; }
.dl-receipt code { color: var(--ink); background: var(--bg); padding: 2px 6px; border-radius: 6px; font-size: 12.5px; word-break: break-all; }
.dl-panel select { width: 100%; }
.file-list { display: grid; gap: 8px; margin: 4px 0 6px; }
.file-btn { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; width: 100%;
  text-align: left; background: var(--bg); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  padding: 12px 14px; color: var(--ink-2); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.file-btn:hover { border-color: var(--line); background: var(--surface-2); }
.file-btn.primary { border-color: var(--gold); background: var(--gold-soft); }
.file-btn .fk { font-weight: 600; color: var(--ink); font-size: 16px; display: flex; flex-direction: column; gap: 3px; }
/* "Recommended" sits in the wide description column: in the 58-74px label column it overflowed into the text */
.file-btn .fd .rec { display: block; width: fit-content; margin-bottom: 4px; padding: 1px 8px; border: 1px solid var(--gold);
  border-radius: 999px; font-style: normal; font-size: 10px; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; }
.file-btn .fd { font-size: 13px; line-height: 1.45; }
.file-btn[disabled] { opacity: .55; cursor: progress; }
.file-btn[aria-busy="true"] { opacity: 1; border-color: var(--gold); }
.dl-status { font-size: 13.5px; margin: 8px 0 4px; padding: 0; color: var(--ink-2); }
.dl-status.ok { color: #a6e6bf; } .dl-status.err { color: #f0a8a8; }
.next-steps { margin-top: 16px; border-top: 1px solid var(--hair); padding-top: 14px; }
.next-steps summary { cursor: pointer; font-family: var(--serif); font-size: 21px; list-style: none; }
.next-steps summary::-webkit-details-marker { display: none; }
.next-steps summary::after { content: " +"; color: var(--gold); font-family: var(--sans); }
.next-steps[open] summary::after { content: " \2212"; }
.next-steps ol { margin: 12px 0 14px; padding-left: 20px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.next-steps li { margin-bottom: 8px; }
.next-steps li b { color: var(--ink); font-weight: 500; }

/* restore */
.restore { margin-top: 16px; text-align: left; }
.restore summary { cursor: pointer; color: var(--ink-2); font-size: 14px; text-align: center; list-style: none; }
.restore summary::-webkit-details-marker { display: none; }
.restore[open] summary { margin-bottom: 8px; }
.restore .hint { margin-bottom: 10px; }
.status { font-size: 14px; margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); display: none;
  overflow-wrap: anywhere; }
.status.show { display: block; }
.inapp-warn { background: rgba(232,194,122,0.1); border: 1px solid var(--line); color: var(--ink-2);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin: 0 0 14px; }

/* checkout */
.modal-bg[hidden] { display: none; }
.co-price { color: var(--ink-2); font-size: 15px; margin-bottom: 16px; }
.co-price b { font-family: var(--serif); font-size: 30px; color: var(--gold); font-weight: 600; }
.pp-btns { min-height: 104px; }
.pp-fallback { display: block; text-align: center; background: #ffc439; color: #111; font-weight: 700;
  padding: 12px 22px; border-radius: 999px; font-size: 15px; }
.co-crypto { border-top: 1px solid var(--hair); margin-top: 14px; padding-top: 12px; }
.co-crypto summary { cursor: pointer; color: var(--ink-2); font-size: 14.5px; list-style: none; }
.co-crypto summary::-webkit-details-marker { display: none; }
.co-crypto summary::after { content: " +"; color: var(--gold); }
.co-crypto[open] summary::after { content: " \2212"; }
.co-crypto[open] summary { margin-bottom: 12px; }
.pay-addr code { font-family: 'Outfit', ui-monospace, monospace; font-size: 13px; word-break: break-all; }
.qr { width: 148px; margin: 6px auto 8px; background: #fff; border-radius: 8px; padding: 6px; }
.qr:empty { display: none; }
.qr svg { width: 100%; height: auto; display: block; }
.hint.warn { color: #d9b07a; }
.verify-btn { width: 100%; justify-content: center; }
.co-trust { font-size: 12.5px; color: var(--ink-3); margin-top: 16px; text-align: center; }
.co-trust b { color: var(--ink-2); font-weight: 500; }
.co-trust a { color: var(--ink-2); border-bottom: 1px dotted var(--ink-3); }

/* footer badges */
.badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.badges img { height: 40px; width: auto; }

/* phones: show the poster first, and offer a jump back to it from the form */
.peek { position: fixed; right: 10px; bottom: 14px; z-index: 40; width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #201704; border: none;
  border-radius: 50%; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.peek[hidden] { display: none; }
.peek.arming { pointer-events: none; }
@media (max-width: 940px) {
  .preview-stage { order: -1; }
  .preview-poster { width: min(360px, 100%); }
}
@media (max-width: 760px) {
  .nav-links { gap: 18px; }
}
@media (max-width: 620px) {
  .file-btn { grid-template-columns: 58px 1fr; }
  .dl-panel { padding: 18px; }
  .modal { padding: 24px 20px; }
}
/* very narrow phones (<=380px): brand + "Design yours · from $9" must fit the header */
@media (max-width: 380px) {
  .nav-in { gap: 10px; }
  header.nav .brand { font-size: 21px; gap: 8px; }
  header.nav .brand .mark { width: 22px; height: 22px; }
  .nav-links .btn { padding: 9px 14px; font-size: 13.5px; }
  .wrap { padding-left: 16px; padding-right: 16px; }
}
/* inputs that sit in a .search-row outside a .field (unlock code, restore) */
.search-row input { width: 100%; min-width: 0; background: var(--bg); border: 1px solid var(--hair);
  border-radius: var(--radius-sm); color: var(--ink); font-family: var(--sans); font-size: 15px; padding: 12px 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.search-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.search-row input::placeholder { color: var(--ink-3); }
#dlTier:focus { outline: none; }
@media (max-width: 620px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-card .label { flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
}