/* =========================================================
   Nightfield Optics — page layouts
   Uses only the tokens and components from style.css.
   ========================================================= */

/* ---------- Top bar + header ---------- */
.topbar {
  background: var(--grad-cta);
  color: var(--neutral-0);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 8px 16px;
}
.topbar a { color: var(--neutral-0); font-style: italic; font-weight: 600; }
.nav-x { display: flex; align-items: center; gap: 4px; }
.nav-x .nav-link {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  transition: color .15s, background .15s;
}
.nav-x .nav-link:hover { color: var(--text); background: var(--overlay-04); }
.nav-x .btn { margin-left: 4px; }

/* ---------- Hero (split) ---------- */
.hero-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 56px 0 8px; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero-copy h1 { max-width: 13ch; }
.hero-copy .lead { font-size: 19px; color: var(--neutral-90); max-width: 46ch; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row .btn-ghost.btn-lg { font-size: 18px; font-weight: 500; }
.hero-photo { min-height: 560px; }
.hero-photo::after { background: linear-gradient(180deg, rgba(2, 13, 7, 0) 50%, rgba(2, 13, 7, 0.7) 100%); }
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 20px;
  background: rgba(12, 19, 15, 0.82);
  border: 1px solid var(--overlay-16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.float-card img { width: 64px; height: auto; }
.float-card strong { display: block; font-style: italic; font-weight: 500; font-size: 15px; }
.float-card span { color: var(--text-muted); font-size: 13px; }
.float-a { left: -28px; bottom: 56px; }
.float-b { right: 20px; top: 24px; }

/* ---------- Feature rows ---------- */
.rows { display: grid; gap: 16px; }
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.row-media { position: relative; min-height: 340px; }
.row-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.row-body { padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.row-body p { color: var(--text-muted); max-width: 46ch; }
.row:nth-child(even) .row-media { order: 2; }
.row .num { font-style: italic; font-weight: 700; font-size: 48px; line-height: 1; }

/* ---------- Sky guide ---------- */
.sky { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sky-card { border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; }
.sky-card .perk-media { margin: 0; border-radius: 0; aspect-ratio: 1 / 1; }
.sky-card .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sky-card h3 { font-size: 20px; }
.sky-card p { color: var(--text-muted); font-size: 15px; }
.sky-card dl { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.sky-card dt { color: var(--text-40); }
.sky-card dd { margin: 0; text-align: right; }

/* ---------- Sticker panel ---------- */
.sticker-panel { text-align: center; align-items: center; padding: 64px 48px; }
.sticker-panel::after { background: linear-gradient(180deg, rgba(2, 13, 7, 0.85) 0%, rgba(2, 13, 7, 0.72) 50%, rgba(2, 13, 7, 0.9) 100%); }
.sticker-panel h2 { max-width: none; }
.sticker-panel .eyebrow { align-self: center; }
.sticker-panel .sub { max-width: 54ch; }
.sticker-row {
  list-style: none;
  margin: 16px 0 8px;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.sticker-row li { display: grid; place-items: center; }
.sticker-row img { width: 100%; max-width: 160px; height: auto; transition: transform .2s ease; }
.sticker-row li:nth-child(3n+1) img { transform: rotate(-4deg); }
.sticker-row li:nth-child(3n+2) img { transform: rotate(3deg) translateY(-6px); }
.sticker-row li img:hover { transform: scale(1.08); }

/* ---------- FAQ (single) ---------- */
.faq-honest details:first-child { border-color: var(--primary-50); }

/* ---------- Closing card ---------- */
.closing {
  text-align: center;
  padding: 56px 32px;
  border-radius: var(--radius-card);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(65, 249, 153, 0.16) 0%, rgba(46, 234, 255, 0.05) 50%, transparent 75%),
    var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.closing p { color: var(--text-muted); max-width: 50ch; }
.mini-stickers { display: flex; justify-content: center; }
.mini-stickers img { width: 96px; height: auto; margin: 0 -6px; }
.mini-stickers img:nth-child(odd) { transform: rotate(-7deg); }
.mini-stickers img:nth-child(even) { transform: rotate(6deg) translateY(-8px); }

/* ---------- Compact footer ---------- */
.foot-x { padding: 72px 0 40px; }
.foot-x .foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.foot-x .logo { margin: 0; }
.foot-x .logo-mark { width: 40px; height: 40px; }
.foot-x .logo-word { font-size: 18px; }
.foot-x .footer-links { margin: 0; gap: 8px 32px; }
.foot-x .foot-note { margin-top: 24px; display: grid; gap: 8px; font-size: 13px; color: var(--text-40); text-align: left; }
.foot-x .foot-note a { color: var(--text-40); }

/* ---------- Thank-you ---------- */
.ty { max-width: 860px; margin: 0 auto; padding: 64px 0 0; text-align: center; }
.ty .check { width: 80px; height: 80px; margin: 0 auto 24px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-cta); box-shadow: 0 0 60px rgba(65, 249, 153, 0.35); }
.ty h1 { text-transform: none; font-weight: 500; margin-bottom: 12px; }
.ty > p { color: var(--text-muted); max-width: 52ch; margin: 0 auto; }
.ty > p a { color: var(--primary-80); }
.ty .tiers { margin-top: 40px; text-align: left; }
.ty .tier p { color: var(--text-muted); font-size: 15px; }
.ty .tier .btn { margin-top: auto; }
.ty .mini-stickers { margin: 32px 0 0; }

/* ---------- Account ---------- */
.acc { width: 100%; max-width: 920px; margin: 0 auto; padding: 40px 24px 64px; flex: 1; }
.acc-hero { min-height: 220px; padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.acc-hero h1 { font-size: clamp(32px, 5vw, 46px); text-transform: none; }
.acc-hero p { color: var(--neutral-90); }
.acc-stack { display: grid; gap: 16px; margin-top: 16px; }
.acc-stack .account-card { margin-top: 0; }
.acc-gift { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: center; }
.acc-gift h2 { font-size: 24px; }
.acc-gift p { color: var(--text-muted); }
.acc-gift .btn-row { margin-top: 18px; }
.acc-gift .sticker-row { grid-template-columns: repeat(3, 1fr); margin: 0; }
.acc .account-loading { margin-top: 24px; }

/* ---------- 404 ---------- */
.lost { min-height: 560px; margin-top: 24px; padding: 56px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; }
.lost .code { font-size: clamp(88px, 14vw, 160px); line-height: .9; font-weight: 700; font-style: italic; letter-spacing: -0.04em; }
.lost h1 { text-transform: none; font-weight: 500; font-size: clamp(26px, 3.4vw, 40px); }
.lost p { color: var(--neutral-90); max-width: 44ch; }
.lost .lost-sticker { position: absolute; right: 6%; top: 50%; transform: translateY(-50%) rotate(8deg); width: min(32%, 300px); height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5)); }
.lost .path { display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--overlay-08); color: var(--text-64); font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Legal ---------- */
.legal-head { padding: 56px 0 8px; text-align: center; }
.legal-head h1 { text-transform: none; font-weight: 500; font-size: clamp(32px, 4vw, 48px); }
.legal-head p { color: var(--text-muted); margin-top: 8px; }
.keypoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; margin: 32px auto 0; }
.keypoints .step { padding: 24px; }
.keypoints .step::before { width: 36px; height: 36px; font-size: 16px; margin-bottom: 14px; }
.keypoints h3 { font-size: 18px; margin-bottom: 6px; }
.keypoints p { font-size: 15px; }
.doc-num { counter-reset: sec; }
.doc-num h2 { counter-increment: sec; }
.doc-num h2::before { content: counter(sec) ". "; color: var(--primary-50); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sky { grid-template-columns: repeat(2, 1fr); }
  .sticker-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .topbar { font-size: 13px; }
  .nav-x .nav-link { display: none; }
  .hero-split { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .hero-photo { min-height: 380px; }
  .float-a { left: 12px; bottom: 16px; }
  .float-b { display: none; }
  .row { grid-template-columns: 1fr; }
  .row:nth-child(even) .row-media { order: 0; }
  .row-media { min-height: 220px; }
  .row-body { padding: 28px 24px; }
  .sticker-panel { padding: 40px 16px; }
  .sticker-row { grid-template-columns: repeat(3, 1fr); }
  .closing { padding: 40px 20px; }
  .foot-x .foot-top { flex-direction: column; align-items: flex-start; }
  .foot-x .footer-links { justify-content: flex-start; }
  .acc-hero { padding: 28px 24px; min-height: 180px; }
  .acc { padding: 24px 16px 48px; }
  .acc-gift { grid-template-columns: 1fr; }
  .lost { padding: 32px 24px; min-height: 520px; justify-content: flex-start; }
  .lost .lost-sticker { position: static; transform: rotate(6deg); width: 150px; align-self: center; margin-top: 8px; }
  .keypoints { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sky { grid-template-columns: 1fr; }
  .btn-row .btn-lg { width: 100%; }
  .mini-stickers img { width: 72px; }
  .site-header .logo-word { font-size: 13px; }
}

/* sticker rows inside .tier cards: drop the tier list bullets */
.tier .sticker-row { gap: 8px; }
.tier .sticker-row li { display: grid; place-items: center; }
.tier .sticker-row li::before { content: none; display: none; }

/* ---------- Launch date ---------- */
.launch {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
  padding: 48px;
  border-radius: var(--radius-card);
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(65, 249, 153, 0.16) 0%, rgba(46, 234, 255, 0.05) 50%, transparent 75%),
    var(--surface);
  border: 1px solid var(--border);
}
.launch-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.launch-head h2 { font-size: clamp(36px, 5vw, 56px); line-height: 1.05; font-style: italic; }
.launch-head p { color: var(--text-muted); max-width: 46ch; }
.countdown { display: flex; gap: 12px; }
.countdown div {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--overlay-04);
  border: 1px solid var(--border);
}
.countdown strong { font-size: 40px; font-weight: 600; font-style: italic; line-height: 1; color: var(--primary-50); }
.countdown span { color: var(--text-muted); font-size: 15px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.timeline li {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 24px;
  border-radius: var(--radius-sm);
  background: var(--overlay-04);
  border: 1px solid var(--border);
}
.timeline li.featured {
  background:
    linear-gradient(var(--neutral-15), var(--neutral-15)) padding-box,
    var(--grad-cta) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 40px rgba(65, 249, 153, 0.12);
}
.timeline li.featured .badge { background: var(--grad-cta); color: var(--neutral-0); }
.timeline h3 { font-size: 20px; }
.timeline p { color: var(--text-muted); font-size: 15px; }
@media (max-width: 860px) {
  .launch { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px; }
}

/* Sticker button before launch day */
.btn-locked { cursor: default; opacity: .7; pointer-events: none; }