/* Golden Ticket SITE V2 — SITE-SPEC-002. Mobile first. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#12161c; --ink-soft:#4a5462; --line:#e2e6ec; --bg:#fff; --bg-alt:#f6f8fa;
  --gold:#b8862b; --gold-ink:#7a5a1c; --go:#0f7a4a; --radius:14px;
  --max:44rem;
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 1.0625rem/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
h1,h2,h3{line-height:1.2; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:2.1rem; font-weight:800}
h2{font-size:1.5rem; font-weight:700}
h3{font-size:1.0625rem; font-weight:700}
p{margin:0 0 1em}
img{max-width:100%; height:auto; display:block}

/* header */
.bar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.7rem 1.1rem;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.wordmark{font-weight:800; letter-spacing:-.02em}
.wordmark::before{content:"◆ "; color:var(--gold)}
.bar-cta{
  font-size:.8125rem; font-weight:700; text-decoration:none; color:var(--gold-ink);
  border:1.5px solid var(--gold); border-radius:999px; padding:.35rem .8rem; white-space:nowrap;
}

/* sections */
section{padding:2.6rem 1.1rem}
.band{border-top:1px solid var(--line)}
.alt{background:var(--bg-alt)}
.hero,.band,.foot{max-width:var(--max); margin-inline:auto}
.hero{padding-top:2rem}
.sub{font-size:1.0625rem; color:var(--ink-soft); margin-bottom:1.6rem}
.lede{color:var(--ink-soft)}
.closer{margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); font-weight:600}
.trust{margin-top:1.4rem; text-align:center; font-size:.9375rem; color:var(--ink-soft)}

/* ── the simulation ───────────────────────────── */
.demo-wrap{margin:0 auto; max-width:22rem; text-align:center}
.demo-kicker{
  font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gold-ink); margin-bottom:.6rem;
}
.phone{
  position:relative; border:10px solid #1b1f26; border-radius:34px; background:#1b1f26;
  padding-bottom:.6rem; box-shadow:0 18px 44px rgba(16,22,30,.22);
}
.phone-notch{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:38%; height:16px; background:#1b1f26; border-radius:0 0 12px 12px; z-index:3;
}
.fiction-tag{
  position:absolute; top:26px; left:50%; transform:translateX(-50%); z-index:4;
  background:rgba(18,22,28,.86); color:#fff; font-size:.625rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:.2rem .55rem; border-radius:999px;
  white-space:nowrap; pointer-events:none;
}
.screen{
  background:#fff; border-radius:24px; min-height:23rem; overflow:hidden;
  display:flex; flex-direction:column; text-align:left;
}
.stage{display:flex; flex-direction:column; flex:1; padding:3.2rem .85rem .9rem}
.stage-mid{margin:auto; text-align:center}
.stage-title{font-weight:700; margin:.6rem 0 .2rem}
.stage-note{font-size:.875rem; color:var(--ink-soft); margin:0}
.ring{
  width:52px; height:52px; margin:0 auto; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--gold); animation:spin 1.6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ring{animation:none}}

.missed{
  background:#fdecec; border:1px solid #f5c6c6; color:#8c2020; border-radius:10px;
  padding:.6rem .7rem; font-size:.875rem; font-weight:600; margin-bottom:.7rem;
}
.thread{display:flex; flex-direction:column; gap:.45rem; padding:.2rem 0}
.msg{max-width:85%; padding:.5rem .7rem; border-radius:15px; font-size:.875rem; line-height:1.4}
.msg.them{background:#eef1f5; align-self:flex-start; border-bottom-left-radius:5px}
.msg.us{background:var(--go); color:#fff; align-self:flex-end; border-bottom-right-radius:5px}
.msg .who{display:block; font-size:.625rem; opacity:.75; margin-bottom:.15rem; font-weight:700}
.stamp{font-size:.6875rem; color:var(--ink-soft); text-align:center; margin:.15rem 0 0}

/* the booking button must read as tappable — v1's did not */
.book-btn{
  display:block; width:100%; margin:.7rem 0 .25rem; padding:.8rem 1rem;
  background:var(--go); color:#fff; border:0; border-radius:11px;
  font:700 .9375rem/1 inherit; cursor:pointer; text-align:center;
  box-shadow:0 3px 0 #0b5c38; transition:transform .06s ease;
}
.book-btn:active{transform:translateY(2px); box-shadow:0 1px 0 #0b5c38}
.book-btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.book-hint{font-size:.6875rem; color:var(--ink-soft); text-align:center; margin:.1rem 0 0}

.booking{padding:.2rem 0}
.booking h4{margin:.1rem 0 .1rem; font-size:.9375rem}
.booking .shop{font-size:.75rem; color:var(--ink-soft); margin:0 0 .6rem}
.slots{display:grid; gap:.4rem; margin:0 0 .5rem}
.slot{
  padding:.6rem .7rem; border:1.5px solid var(--line); border-radius:10px; background:#fff;
  font:600 .875rem/1.2 inherit; color:var(--ink); cursor:pointer; text-align:left;
}
.slot:hover{border-color:var(--go); background:#f2fbf6}
.slot:active{transform:translateY(1px)}
.slot:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.slot .win{display:block; font-size:.6875rem; font-weight:500; color:var(--ink-soft); margin-top:.1rem}

.done{text-align:center; margin:auto; padding:1rem .4rem}
.tick{
  width:46px; height:46px; margin:0 auto .6rem; border-radius:50%; background:var(--go);
  color:#fff; font-size:1.5rem; line-height:46px; font-weight:700;
}
.done h4{margin:0 0 .3rem}
.done p{font-size:.8125rem; color:var(--ink-soft); margin:0 0 .2rem}

.tap{
  display:block; width:calc(100% - 1.2rem); margin:.55rem .6rem 0; padding:.85rem 1rem;
  background:var(--gold); color:#241a06; border:0; border-radius:12px;
  font:800 .875rem/1 inherit; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer; box-shadow:0 3px 0 #8d6620;
}
.tap:active{transform:translateY(2px); box-shadow:0 1px 0 #8d6620}
.tap:focus-visible{outline:3px solid #fff; outline-offset:2px}
.tap[disabled]{opacity:.45; cursor:default; box-shadow:none; transform:none}
.demo-caption{font-size:.8125rem; color:var(--ink-soft); margin:.9rem 0 0}
.restart{
  margin-top:.7rem; background:none; border:1.5px solid var(--line); border-radius:999px;
  padding:.4rem 1rem; font:600 .8125rem/1 inherit; color:var(--ink-soft); cursor:pointer;
}

/* ── flow ─────────────────────────────────────── */
.flow{list-style:none; margin:0; padding:0; display:grid; gap:1.5rem}
.flow li{position:relative; padding-left:2.6rem}
.step{
  position:absolute; left:0; top:0; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--gold); color:#241a06; font-weight:800; font-size:.875rem;
  display:grid; place-items:center;
}
.flow p{margin:0; color:var(--ink-soft)}

/* ── installed list ───────────────────────────── */
.installed{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.installed li{position:relative; padding-left:1.6rem}
.installed li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--go); font-weight:800;
}

/* ── ledger ───────────────────────────────────── */
.fiction-inline{
  display:inline-block; background:#fff5e0; border:1px solid #e8d093; color:#6c4f12;
  font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:.2rem .55rem; border-radius:999px; margin-bottom:.8rem;
}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius)}
.ledger{border-collapse:collapse; width:100%; min-width:38rem; font-size:.8125rem}
.ledger th,.ledger td{padding:.55rem .7rem; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
.ledger th{background:var(--bg-alt); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft)}
.ledger tr:last-child td{border-bottom:0}

/* ── calculator ───────────────────────────────── */
.calc{display:grid; gap:1rem; margin-bottom:1.2rem}
.calc label{display:grid; gap:.35rem; font-size:.9375rem; font-weight:600}
.calc input{
  font:600 1.0625rem/1 inherit; padding:.7rem .8rem; border:1.5px solid var(--line);
  border-radius:10px; background:#fff; color:var(--ink); width:100%;
}
.calc input:focus-visible{outline:3px solid var(--gold); outline-offset:1px; border-color:var(--gold)}
.calc-out{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem}
.formula{font-size:.8125rem; color:var(--ink-soft); margin:0 0 .5rem; font-variant:small-caps; letter-spacing:.03em}
.result{font-size:1.0625rem; font-weight:700; margin:0 0 .35rem}
.scenario{font-size:.75rem; color:var(--ink-soft); margin:0; text-transform:uppercase; letter-spacing:.06em; font-weight:700}

/* ── founders ─────────────────────────────────── */
.founders{display:grid; gap:1.6rem}
.founder{margin:0; display:grid; gap:.7rem}
.founder img{
  width:104px; height:104px; border-radius:50%; object-fit:cover;
  object-position:50% 18%;   /* portrait source: keep the face in the circle */
  background:var(--bg-alt); border:1px solid var(--line);
}
.founder strong{display:block; font-size:1.0625rem}
.role{display:block; font-size:.8125rem; color:var(--gold-ink); font-weight:700; margin-bottom:.4rem}
.founder p{margin:0; color:var(--ink-soft); font-size:.9375rem}
[data-f2]{background:#ffe9a8; padding:0 .25rem; border-radius:3px; font-weight:700}

/* ── status ───────────────────────────────────── */
.status p{margin:0; font-size:.9375rem; color:var(--ink-soft)}

/* ── faq ──────────────────────────────────────── */
.faq{display:grid; gap:.5rem}
.faq details{border:1px solid var(--line); border-radius:var(--radius); background:#fff}
.faq summary{padding:.85rem 1rem; font-weight:700; cursor:pointer; font-size:.9375rem; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--gold-ink); font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0; padding:0 1rem 1rem; color:var(--ink-soft); font-size:.9375rem}

/* ── cta ──────────────────────────────────────── */
.cta{text-align:center}
.cta-btn{
  display:inline-block; background:var(--gold); color:#241a06; text-decoration:none;
  font:800 1rem/1 inherit; letter-spacing:.03em; text-transform:uppercase;
  padding:1.05rem 1.6rem; border-radius:12px; box-shadow:0 4px 0 #8d6620; margin-bottom:1rem;
}
.cta-btn:active{transform:translateY(2px); box-shadow:0 2px 0 #8d6620}
.cta p{color:var(--ink-soft); font-size:.9375rem; margin:0}

/* ── footer ───────────────────────────────────── */
.foot{padding:2rem 1.1rem 2.6rem; border-top:1px solid var(--line); text-align:center}
.foot p{margin:0 0 .4rem; font-size:.8125rem; color:var(--ink-soft)}
.fiction-foot{font-weight:600}

/* ── wider screens ────────────────────────────── */
@media (min-width:38rem){
  h1{font-size:2.6rem}
  section{padding:3.2rem 1.5rem}
  .founders{grid-template-columns:1fr 1fr; gap:2rem}
  .founder{grid-template-columns:104px 1fr; align-items:start; gap:1rem}
  .founder img{grid-row:span 2}
}
@media (min-width:56rem){
  .hero{display:grid; grid-template-columns:1fr 22rem; gap:2.5rem; align-items:start; max-width:60rem}
  .hero h1{grid-column:1; margin-top:.5rem}
  .hero .sub{grid-column:1}
  .demo-wrap{grid-column:2; grid-row:1 / span 3}
  .trust{grid-column:1; text-align:left; margin-top:0}
  .band,.foot{max-width:52rem}
}


/* ── SITE-SPEC-002A + 002B ───────────────────────────────────── */
/* hero centred, body copy below stays left */
.hero h1{text-align:center}
.hero .sub{text-align:center; max-width:34rem; margin-left:auto; margin-right:auto}

/* controls */
.controls{margin-top:.7rem}
.counter{
  font-size:.6875rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft); margin-bottom:.4rem; text-align:center;
}
.ctrl-row{display:flex; gap:.5rem; align-items:stretch}
.back-btn{
  flex:0 0 auto; padding:.8rem .9rem; background:#fff; color:var(--ink-soft);
  border:1.5px solid var(--line); border-radius:11px; font:700 .8125rem/1 inherit; cursor:pointer;
}
.back-btn[disabled]{opacity:.35; cursor:default}
.next-btn{
  flex:1 1 auto; padding:.85rem 1rem; background:var(--gold); color:#241a06; border:0;
  border-radius:11px; font:800 .875rem/1.2 inherit; cursor:pointer; box-shadow:0 3px 0 #8d6620;
}
.next-btn:active{transform:translateY(2px); box-shadow:0 1px 0 #8d6620}
.next-btn[disabled]{opacity:.55; cursor:default; transform:none; box-shadow:0 3px 0 #8d6620}
.next-btn:focus-visible,.back-btn:focus-visible{outline:3px solid var(--ink); outline-offset:2px}

/* message enter animation — one chunk per tap */
.chunk.enter{animation:rise .46s cubic-bezier(.22,.9,.3,1) both}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.chunk.enter{animation:none}}
.time-label{display:flex; align-items:center; gap:.5rem; margin:.55rem 0 .1rem}
.time-label::before,.time-label::after{content:""; flex:1; height:1px; background:var(--line)}
.time-label span{
  font-size:.625rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); white-space:nowrap;
}
.optin{
  font-size:.625rem; font-weight:700; color:var(--gold-ink); background:#fff5e0;
  border:1px solid #e8d093; border-radius:8px; padding:.3rem .5rem; margin:.35rem 0 0; text-align:center;
}
.stamp.silence{color:#8c2020; font-weight:600}

/* booking page inside the frame */
.bookpage{padding:.15rem 0; display:flex; flex-direction:column; gap:.5rem}
.book-head{display:flex; align-items:center; gap:.55rem}
.logo-slot{
  width:34px; height:34px; border-radius:9px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font:800 .6875rem/1 inherit; letter-spacing:.04em; flex:0 0 auto;
}
.book-head h4{margin:0; font-size:.9375rem}
.book-head .shop{margin:0; font-size:.6875rem; color:var(--ink-soft)}
.book-step{margin:.1rem 0 0; font-size:.8125rem; font-weight:800}
.svc-list{display:grid; gap:.35rem}
.svc{
  display:flex; justify-content:space-between; align-items:center; gap:.5rem; width:100%;
  padding:.5rem .6rem; border:1.5px solid var(--line); border-radius:10px; background:#fff;
  cursor:pointer; text-align:left; font:inherit;
}
.svc:hover{border-color:var(--go); background:#f2fbf6}
.svc:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.svc-main{display:flex; flex-direction:column; min-width:0}
.svc-name{font-size:.8125rem; font-weight:700; color:var(--ink)}
.svc-note{font-size:.625rem; color:var(--ink-soft)}
.svc-meta{display:flex; flex-direction:column; align-items:flex-end; flex:0 0 auto}
.svc-price{font-size:.8125rem; font-weight:800; color:var(--go)}
.svc-dur{font-size:.625rem; color:var(--ink-soft); white-space:nowrap}
.book-note{font-size:.625rem; color:var(--ink-soft); margin:.1rem 0 0}
.chosen-svc{
  display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  background:#f2fbf6; border:1px solid #bfe6d1; border-radius:9px; padding:.4rem .55rem;
  font-size:.75rem;
}
.chosen-svc span{color:var(--ink-soft)}
.slot.taken{opacity:.45; background:var(--bg-alt); cursor:not-allowed; text-decoration:none}
.slot.taken .win{font-style:italic}

/* mini ledger inside the frame */
.mini-ledger{width:100%; padding:.2rem}
.ml-head{margin:0 0 .4rem; font-size:.8125rem; font-weight:800}
.ml-row{
  display:flex; justify-content:space-between; gap:.6rem; padding:.3rem 0;
  border-bottom:1px solid var(--line); font-size:.75rem;
}
.ml-row span:first-child{color:var(--ink-soft); font-weight:700}
.ml-row:last-of-type{border-bottom:0}
.ml-note{margin:.5rem 0 0; font-size:.6875rem; color:var(--go); font-weight:700}

/* 002B FIX 3 — one founders section, faces side by side even on mobile */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.2rem}
.face{margin:0; text-align:center}
.face img{
  width:100%; max-width:132px; aspect-ratio:1; height:auto; margin:0 auto .5rem;
  border-radius:50%; object-fit:cover; object-position:50% 18%;
  background:var(--bg-alt); border:1px solid var(--line);
}
.face strong{display:block; font-size:.9375rem}
.face .role{display:block; font-size:.75rem; color:var(--gold-ink); font-weight:700}
.lead-line{font-weight:700; font-size:1.0625rem}
.status-fold{
  margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.875rem; color:var(--ink-soft);
}

/* CTA reveal */
.cta-reveal{margin:.2rem 0 1rem; font-size:.9375rem; font-weight:700; color:var(--ink)}
.cta-reveal a{color:var(--gold-ink)}

@media (min-width:38rem){
  .pair{max-width:26rem; margin-inline:auto}
}