/* =====================================================================
   VESTIGE — HOW IT WORKS
   01 Tokens · 02 Header · 03 Intro · 04 Features · 05 CTA · 06 FAQ
   07 Footer · 08 Reveal motion · 09 Desktop
   ===================================================================== */
:root {
  --ink: #24211f; --soft: rgba(36,33,31,.78); --paper: #fbf8f1; --ivory: #f4eee4; --gold: #9c7a45; --night: #1b1917;
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --pad: clamp(16px, 5vw, 40px);
}
* { box-sizing: border-box; }
html { background: var(--ivory); }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--ivory); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* 02 HEADER */
.header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: max(14px, env(safe-area-inset-top)) var(--pad) 0; }
.brand { display: grid; gap: 3px; text-decoration: none; }
.brand__word { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: .16em; line-height: 1; }
.brand__id { white-space: nowrap; font-size: 10px; font-weight: 500; letter-spacing: .02em; color: var(--soft); }
.pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; white-space: nowrap; font-size: 12px; font-weight: 600; }
.pill svg { width: 14px; height: 14px; margin-top: -2px; }

/* 03 INTRO */
.intro { padding: 44px var(--pad) 12px; }
.eyebrow { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
h1 { margin: 0; max-width: 13ch; font-family: var(--display); font-weight: 600; font-size: clamp(38px, 10.5vw, 72px); line-height: .96; letter-spacing: -.02em; text-wrap: balance; }
.lead { margin: 16px 0 0; max-width: 40ch; font-size: 16.5px; line-height: 1.55; color: var(--soft); }
.back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 14px; font-weight: 600; text-underline-offset: 4px; }

/* 04 FEATURES — one screen, one idea */
.features { list-style: none; margin: 0; padding: 12px var(--pad) 8px; display: grid; gap: 56px; }
.feature { display: grid; gap: 20px; }
.feature__screen { order: 2; justify-self: center; margin: 0; width: min(64vw, 250px); aspect-ratio: 640 / 1391; border-radius: 30px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 6px var(--ink), 0 26px 44px rgba(80,60,30,.2); }
.feature__screen img { width: 100%; height: 100%; object-fit: cover; }
.feature__num { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.feature h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 8vw, 44px); line-height: 1; letter-spacing: -.015em; }
.feature__text p:last-child { margin: 0; max-width: 38ch; font-size: 16px; line-height: 1.55; color: var(--soft); }

/* 05 CTA */
.cta { margin: 56px var(--pad) 0; padding: 36px 24px; border-radius: 28px; background: var(--night); color: var(--paper); }
.cta h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 600; font-size: clamp(32px, 8.4vw, 48px); line-height: 1; }
.cta p { margin: 0 0 20px; color: rgba(251,248,241,.78); font-size: 15.5px; }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; }
.qr { display: none; }
.cta__starter { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-size: 14px; text-underline-offset: 4px; color: rgba(251,248,241,.88); }

/* 06 FAQ */
.faq { padding: 56px var(--pad) 56px; }
.faq h2 { margin: 0 0 12px; font-family: var(--display); font-size: 36px; font-weight: 600; }
.faq details { border-top: 1px solid rgba(36,33,31,.14); }
.faq details:last-of-type { border-bottom: 1px solid rgba(36,33,31,.14); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font-weight: 600; font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--gold); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 18px; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--soft); }

/* 07 FOOTER */
.footer { padding: 36px var(--pad) 34px; background: var(--night); color: rgba(246,241,232,.84); font-size: 13px; }
.footer__brand { margin: 0 0 6px; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: .16em; color: var(--paper); }
.footer__line { margin: 0 0 16px; line-height: 1.5; color: rgba(246,241,232,.66); }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.footer__links a { display: inline-flex; align-items: center; min-height: 40px; text-underline-offset: 4px; }
.footer__social { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(246,241,232,.12); }
.footer__copy { margin: 14px 0 0; font-size: 12px; color: rgba(246,241,232,.45); }

/* 08 REVEAL — screens rise gently into place (only when JS + motion allowed) */
.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js-reveal .reveal .feature__screen { transform: translateY(18px) rotate(-1.5deg); transition: transform 1.3s var(--ease) .1s; }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
.js-reveal .reveal.is-in .feature__screen { transform: none; }

@media (max-width: 390px) {
  .pill { font-size: 11.5px; gap: 4px; padding: 0 10px; }
  .brand__id { font-size: 9.5px; }
  .brand__word { font-size: 19px; }
}

/* 09 DESKTOP — alternating two-column rows */
@media (min-width: 900px) {
  .header, .intro, .features, .faq { padding-left: max(var(--pad), calc((100vw - 1080px) / 2)); padding-right: max(var(--pad), calc((100vw - 1080px) / 2)); }
  .header { padding-top: 26px; }
  .brand__word { font-size: 24px; } .brand__id { font-size: 11.5px; }
  .intro { padding-top: 88px; padding-bottom: 40px; }
  .lead { font-size: 18px; }
  .features { gap: 96px; }
  .feature { grid-template-columns: 320px 1fr; align-items: center; gap: 72px; }
  .feature .feature__screen { order: 0; justify-self: start; }
  .feature:nth-child(even) { grid-template-columns: 1fr 320px; }
  .feature:nth-child(even) .feature__screen { order: 2; justify-self: end; }
  .feature__screen { width: 300px; }
  .cta { margin: 96px auto 0; max-width: 1080px; padding: 56px; }
  .qr { display: flex; align-items: center; gap: 12px; max-width: 240px; font-size: 13px; line-height: 1.35; color: rgba(251,248,241,.78); }
  .qr img { width: 96px; height: 96px; border-radius: 12px; }
  .faq { padding-top: 88px; padding-bottom: 88px; }
}