/* Interview Blueprints identity layer (loaded last on every page).
   Direction: drafting paper. Cyanotype blue sheet, white linework, a pencil-yellow for marks that matter.
   Archivo (wide, technical lettering) for headings and controls; Source Serif 4 for reading text, because these are books.
   Remove this file's <link> to return to the previous look. */
:root{
  --bg:#0E2F57; --bg2:#0B2748; --sheet:#123A69;
  --panel:rgba(214,228,255,.04); --panel2:rgba(214,228,255,.08);
  --line:rgba(214,228,255,.16); --line2:rgba(214,228,255,.30);
  --ink:#F5F8FC; --ink2:#D2DEEE; --muted:#9DB2CF;
  --pencil:#F2C14E; --chalk:#FFFFFF;
  --brand:#F5F8FC; --brand2:#F5F8FC; --teal:#8FD3C8; --green:#8FD3C8; --amber:#F2C14E;
  --radius:8px;
  --ui:'Archivo', system-ui, sans-serif; --read:'Source Serif 4', Georgia, serif;
}
body{background:var(--bg); font:400 17px/1.62 var(--read); color:var(--ink2)}
h1,h2,h3{font-family:var(--ui); font-stretch:115%; font-weight:700; letter-spacing:-.012em; line-height:1.06}
a{color:var(--ink); text-decoration:underline; text-decoration-color:rgba(245,248,252,.35); text-underline-offset:3px}
a:hover{color:#fff; text-decoration-color:var(--pencil)}
.btn,.nav,.logo,label,input,select,.chip,.tags,.pill,.stats,.eyebrow,.status-badge,.card-tag,.otable,.toolbar,.st,.upi-row,.price-tag,.pay-icons,.qr-amt,.part button,.faq summary,.bcard-track,.path,.foot-col,.marquee,.legend-row,.mini-5s,.stage-no,.stage-ticks,.case .no,.err,.fine,.small{font-family:var(--ui)}
code{font-family:'JetBrains Mono', monospace}
::selection{background:rgba(242,193,78,.35)}

/* ---- the sheet: drafting grid, no blobs ---- */
.bg-mesh{background:var(--bg)}
.blob{display:none}
.grid-lines{mask-image:none; -webkit-mask-image:none; background-image:
  linear-gradient(rgba(214,228,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(214,228,255,.10) 1px,transparent 1px),
  linear-gradient(rgba(214,228,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(214,228,255,.045) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px; background-position:-1px -1px}

/* ---- logo ---- */
.logo{gap:10px; color:var(--ink); font:700 17px var(--ui); font-stretch:112%; letter-spacing:-.01em; text-decoration:none}
.logo:hover{text-decoration:none}
.logo-mark,.logo-mark.sm{width:auto; height:auto; background:none; border-radius:0; color:var(--chalk); display:inline-flex}
.logo-mark svg{width:26px; height:26px}
.logo-mark.sm svg{width:20px; height:20px}

/* ---- nav: a plain top rule, not a floating glass pill ---- */
.nav{top:0; left:0; transform:none; width:100%; border-radius:0; border:0; border-bottom:1px solid var(--line); padding:12px max(20px, calc((100vw - var(--maxw)) / 2 + 24px)); background:rgba(14,47,87,.94); backdrop-filter:none; -webkit-backdrop-filter:none}
.nav.scrolled{background:rgba(11,39,72,.97); box-shadow:none}
.nav-links a{font-size:14.5px; border-radius:4px; text-decoration:none}
.nav-links a:hover{background:var(--panel2)}

/* ---- buttons ---- */
.btn{border-radius:6px; font:600 15px var(--ui); text-decoration:none; transition:background .2s, border-color .2s, color .2s}
.btn:active{transform:none}
.btn-primary{background:var(--chalk); color:var(--bg); box-shadow:none; border-color:var(--chalk)}
.btn-primary:hover{background:#FFF6DC; color:var(--bg); transform:none; box-shadow:none; border-color:#FFF6DC}
.btn-ghost{background:transparent; border-color:var(--line2); color:var(--ink)}
.btn-ghost:hover{background:var(--panel2); border-color:var(--ink); color:#fff}
.btn-link{text-decoration:underline}
.mrp{color:rgba(14,47,87,.55)}

/* ---- type treatments: no gradient accents, no tracked caps labels ---- */
.grad,.soon-hero h1 .grad{background:none; -webkit-background-clip:border-box; background-clip:border-box; color:inherit; animation:none; padding:0}
.eyebrow{font:600 15px var(--ui); letter-spacing:0; text-transform:none; color:var(--pencil); margin-bottom:10px}
.sec-head{text-align:left; margin-left:0; max-width:760px}
.sec-head p{font-size:18.5px}
.card-tag{font:600 13px var(--ui); letter-spacing:0; text-transform:none; border-radius:4px; padding:3px 8px; color:var(--ink); background:var(--panel2)}
.card-tag.t2,.card-tag.t3,.card-tag.t4,.card-tag.t5{color:var(--ink); background:var(--panel2)}
.stats span,.bcard-track,.path-round,.foot-col b,.otable th,.bc-ed{letter-spacing:0; text-transform:none}
.stats b{font-family:var(--ui); font-stretch:115%}
.pill{border-radius:4px; background:transparent; font-size:14px}
.dot-live,.dot-soon{animation:none; box-shadow:none; background:var(--pencil); border-radius:0; width:7px; height:7px}

/* ---- motion: one hero moment, nothing scattered ---- */
.reveal,.reveal.in{opacity:1; transform:none; transition:none}
.book,.float-chip,.shelf-book,.soon-book,.marquee-track{animation:none}
.marquee-track{width:auto; flex-wrap:wrap; justify-content:center; padding:0 20px}
.marquee-track span:nth-child(n+43){display:none}
.marquee{mask-image:none; -webkit-mask-image:none; background:transparent}
.marquee-track span{border-radius:4px; background:transparent}
.card,.case,.bcard,.path li a,.mini-book,.part,.price-card,.promo,.grow,.panel,.faq details,.modal-panel,.price-right{border-radius:var(--radius)}
.card,.case,.bcard,.mini-book{background:rgba(11,39,72,.55); transition:border-color .2s}
.card:hover,.case:hover,.bcard:hover,.mini-book:hover,.path li a:hover{transform:none; border-color:var(--line2)}
.card::before,.bcard::before{display:none}
.bcard:hover .bcard-cover .bcover{transform:none}
.bcard-cover{background:none}
.bcard,.mini-book,.path li a,.bcard-cta{text-decoration:none}
.bcard-cta{color:var(--ink); text-decoration:underline; text-decoration-color:var(--pencil); text-underline-offset:4px}
.bcard.is-live{border-color:rgba(242,193,78,.45)}

/* ---- status + badges ---- */
.status-badge{border-radius:4px; font-weight:600}
.status-badge.live{color:var(--bg); background:var(--pencil); border-color:var(--pencil)}
.status-badge.soon{color:var(--ink); background:transparent; border-color:var(--line2)}
.save{border-radius:4px; background:var(--pencil); color:var(--bg)}
.checks li::before{border-radius:3px; background:var(--pencil); color:var(--bg)}
.chip{border-radius:4px} .chip.on{background:var(--chalk); color:var(--bg); border-color:var(--chalk)}
.case .no{color:var(--pencil)}
.case .tags span,.bcard .tags span{border-radius:3px}
.chip-row li{border-radius:4px; background:transparent}

/* ---- surfaces ---- */
.price-card{background:var(--sheet); border-color:var(--line2)}
.price-card::before{display:none}
.price-right{background:var(--bg2)}
.promo{background:var(--sheet); border-color:var(--line2)}
.grow{background:rgba(11,39,72,.6)}
.grow-canvas{background-color:#0A2341; border-radius:6px}
.part{background:rgba(11,39,72,.55)} .part.open{background:var(--sheet); border-color:var(--line2)}
.part .pn{border-radius:4px; color:var(--pencil); background:transparent; border:1px solid var(--line2)}
.path::before{background:var(--line2); opacity:1}
.path li a{background:var(--bg2)}
.path-no{border-radius:3px}
.bento.three .card-tag{display:none}
.footer{border-top-color:var(--line)}
.foot-col a,.foot-links a{text-decoration:none}
.foot-col a:hover{text-decoration:underline}

/* ---- checkout + pages ---- */
.modal-backdrop{background:rgba(6,22,42,.78); backdrop-filter:none; -webkit-backdrop-filter:none}
.modal-panel{background:var(--sheet); box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.modal-x{border-radius:4px}
.step input,.waitlist input,.toolbar select,.toolbar input{border-radius:6px; background:rgba(11,39,72,.7); font-family:var(--ui)}
.step input:focus,.waitlist input:focus{border-color:var(--pencil); box-shadow:0 0 0 3px rgba(242,193,78,.25)}
.st.on{color:var(--ink); border-color:var(--pencil)}
.qr-wrap{border-radius:8px; box-shadow:none}
.qr-amt{border-radius:4px; background:var(--bg)}
.done-ic{background:var(--pencil); color:var(--bg); border-radius:6px}
.panel{background:rgba(11,39,72,.7)}
.waitlist .btn{border-radius:6px}
.waitlist.done .btn{background:var(--pencil); border-color:var(--pencil); color:var(--bg)}
.waitlist.done .wl-msg{color:var(--ink)}
.status.ok{color:var(--bg); background:var(--pencil); border-radius:4px}
.badge{border-radius:4px}
:focus-visible{outline:2px solid var(--pencil); outline-offset:2px}

/* ---- covers drawn in the same drafting language ---- */
.bcover{background:
  linear-gradient(rgba(214,228,255,.09) 1px, transparent 1px) 0 0/7cqw 7cqw,
  linear-gradient(90deg, rgba(214,228,255,.09) 1px, transparent 1px) 0 0/7cqw 7cqw,
  #0E2F57; box-shadow:0 24px 50px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(214,228,255,.18)}
.bcover::after{display:none}
.bc-series{border-radius:2px; background:transparent}
.bc-title{font-family:var(--ui); font-stretch:115%}
.bc-sub{font-family:var(--read)}
.faq{margin:0; max-width:820px}
/* phone-only payment helpers (desktop buyers scan the QR with their phone) */
.qr-save{margin-top:10px}
@media (hover:hover) and (pointer:fine){.qr-save,.pay-help{display:none}}
/* payment step (book page) */
.loader{display:flex; gap:8px; justify-content:center; margin:22px 0}
.loader[hidden]{display:none}
.loader span{width:10px; height:10px; border-radius:2px; background:var(--pencil); animation:ld 1.2s infinite ease-in-out}
.loader span:nth-child(2){animation-delay:.15s} .loader span:nth-child(3){animation-delay:.3s}
@keyframes ld{0%,80%,100%{transform:scale(.5); opacity:.4}40%{transform:scale(1); opacity:1}}
.step[data-step="5"]{text-align:center}
.secure-note{margin-top:16px}