/* passvak's own identity on top of the family design system (styles.css).
   The idea is literal: a pass. A dark warm pass card with a tear-off stub is the hero
   object; apps appear as the places the pass is valid; the account page is "your pass
   in your hand". Headings use Sora so passvak reads as its own product, the body stays Inter. */
h1, h2, .hero h1, .cta-band h2 { font-family: "Sora", Inter, system-ui, sans-serif; letter-spacing: -.03em; }
#heroForm:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,119,6,.12), 0 20px 44px -24px rgba(180,83,9,.5); }
.btn-hero { background: var(--grad-cta); box-shadow: 0 10px 28px -8px rgba(180,83,9,.55); }
.btn-hero:hover { box-shadow: 0 16px 38px -10px rgba(180,83,9,.62); }

/* ---------- hero: text left, the pass right ---------- */
.hero::before { background: radial-gradient(60% 55% at 72% 40%, rgba(217,119,6,.16), transparent 70%); }
.pv-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; text-align: left; max-width: 1120px; margin: 0 auto; }
.pv-hero .hero-kicker { text-align: left; }
.pv-hero h1 { text-align: left; max-width: 11ch; }
.pv-hero #heroForm { margin-top: 26px; max-width: none; margin-left: 0; }
.pv-hero .hero-note { text-align: left; }
.pv-hero .lede { margin-top: 18px; text-align: left; }
@media (max-width: 900px) { .pv-hero { grid-template-columns: 1fr; gap: 34px; text-align: center; } .pv-hero .hero-kicker, .pv-hero h1, .pv-hero .hero-note, .pv-hero .lede { text-align: center; } .pv-hero h1 { max-width: none; } .pv-hero #heroForm, .pv-hero .lede { margin-left: auto; margin-right: auto; } }

/* the pass itself */
.pv-pass-wrap { display: grid; place-items: center; perspective: 1200px; }
.pv-pass { width: 100%; max-width: 400px; color: #fde9cf; background: linear-gradient(160deg, #2a221a, #1c1613 55%, #171210); border-radius: 22px;
  box-shadow: 0 30px 70px -28px rgba(28,22,19,.75), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 90px -30px rgba(217,119,6,.55);
  transform: rotate(-3deg); transition: transform .5s ease; font-family: Inter, system-ui, sans-serif; position: relative; overflow: hidden; }
.pv-pass:hover { transform: rotate(-1deg) translateY(-2px); }
.pv-pass::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 60% at 100% 0%, rgba(217,119,6,.22), transparent 60%); pointer-events: none; }
.pv-pass .top { padding: 22px 24px 18px; }
.pv-pass .eyebrow { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #d9a66a; }
.pv-pass .eyebrow b { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; letter-spacing: .02em; text-transform: none; font-size: 14px; color: #fff; }
.pv-pass .eyebrow b i { width: 18px; height: 18px; border-radius: 5px; background: var(--grad-cta); display: grid; place-items: center; }
.pv-pass .eyebrow b i svg { width: 11px; height: 11px; color: #fff; }
.pv-pass .holder { margin-top: 20px; }
.pv-pass .holder .lbl { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #a8907a; }
.pv-pass .holder .name { font-family: "Sora", Inter, sans-serif; font-size: 24px; font-weight: 700; color: #fff; margin-top: 3px; letter-spacing: -.02em; }
.pv-pass .holder .sub { font-size: 13px; color: #c9b39b; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pv-pass .valid { margin-top: 18px; }
.pv-pass .valid .lbl { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #a8907a; margin-bottom: 8px; }
.pv-pass .stamps { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-pass .stamp { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #fde9cf; padding: 6px 10px 6px 7px; border-radius: 999px;
  border: 1px solid rgba(253,233,207,.18); background: rgba(255,255,255,.04); opacity: .35; transform: scale(.96); transition: opacity .35s, transform .35s, border-color .35s; }
.pv-pass .stamp.on { opacity: 1; transform: none; border-color: rgba(217,119,6,.55); background: rgba(217,119,6,.12); }
.pv-pass .stamp i { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; color: #fff; }
.pv-pass .stamp i.cd { background: #10b981; } .pv-pass .stamp i.un { background: #7c3aed; } .pv-pass .stamp i.mv { background: #059669; } .pv-pass .stamp i.pt { background: #0891b2; }
.pv-pass .stamp svg { width: 12px; height: 12px; color: #f5b86a; opacity: 0; transition: opacity .3s; }
.pv-pass .stamp.on svg { opacity: 1; }
/* the tear line */
.pv-pass .tear { position: relative; height: 0; border-top: 2px dashed rgba(253,233,207,.22); margin: 0 10px; }
.pv-pass .tear::before, .pv-pass .tear::after { content: ""; position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg, #fff); }
.pv-pass .tear::before { left: -21px; } .pv-pass .tear::after { right: -21px; }
.pv-pass .stub { padding: 16px 24px 20px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; }
.pv-pass .stub .lbl { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #a8907a; margin-bottom: 7px; }
.pv-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; max-width: 220px; }
.pv-otp span { aspect-ratio: 1 / 1.2; display: grid; place-items: center; border-radius: 7px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: transparent;
  border: 1.5px solid rgba(253,233,207,.18); background: rgba(255,255,255,.03); transition: color .25s, border-color .25s, background .25s; }
.pv-otp span.on { color: #fff; border-color: #f5b86a; background: rgba(217,119,6,.18); }
.pv-pass .ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #86efac; opacity: 0; transition: opacity .35s; white-space: nowrap; }
.pv-pass .ok.show { opacity: 1; }
.pv-pass .ok svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .pv-pass { transition: none; } }

/* ---------- valid-at strip ---------- */
.pv-strip { padding: 34px 0 6px; }
.pv-strip .lbl { text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px; }
.pv-strip .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pv-strip .app { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-xs); font-weight: 600; color: var(--text); }
.pv-strip .app i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; color: #fff; }
.pv-strip .app i.cd { background: #10b981; } .pv-strip .app i.un { background: #7c3aed; } .pv-strip .app i.mv { background: #059669; } .pv-strip .app i.pt { background: #0891b2; }
.pv-strip .app.next { border-style: dashed; color: var(--text-mid); font-weight: 500; }
.pv-strip .app.next i { background: var(--accent-soft); color: var(--accent-ink); font-size: 18px; }

/* ---------- "your pass in your hand": the account page framed ---------- */
.pv-frame { margin: 44px auto 0; max-width: 960px; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
.pv-frame .bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.pv-frame .bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
.pv-frame .bar .url { margin-left: 10px; font: 12.5px "JetBrains Mono", monospace; color: var(--text-dim); background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; }
.pv-frame .panes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.pv-pane { padding: 20px 20px 22px; border-right: 1px solid var(--border); min-width: 0; }
.pv-pane:last-child { border-right: 0; }
.pv-pane h4 { font-size: 13px; font-weight: 700; margin: 0 0 12px; display: flex; justify-content: space-between; align-items: center; }
.pv-pane h4 .pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
.pv-pane ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pv-pane li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; }
.pv-pane li b { display: block; font-size: 13px; font-weight: 600; } .pv-pane li small { display: block; font-size: 11.5px; color: var(--text-dim); }
.pv-pane li .act { flex: none; font-size: 11.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); padding: 4px 9px; border-radius: 7px; }
.pv-pane li .act.danger { color: #9f1239; background: #fff1f2; }
.pv-pane li .role { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg-soft); color: var(--text-mid); border: 1px solid var(--border); }
.pv-pane li .cur { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #ecfdf3; color: #16a34a; }
.pv-pane .wide { margin-top: 10px; display: block; text-align: center; font-size: 12.5px; font-weight: 700; color: #9f1239; background: #fff1f2; border-radius: 9px; padding: 8px; }
.pv-pane code { font: 11.5px "JetBrains Mono", monospace; color: var(--text-dim); }
@media (max-width: 820px) { .pv-frame .panes { grid-template-columns: 1fr; } .pv-pane { border-right: 0; border-bottom: 1px solid var(--border); } .pv-pane:last-child { border-bottom: 0; } }

/* ---------- how it works: a stepper, not cards ---------- */
.pv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; position: relative; }
.pv-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 22px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent); opacity: .35; }
.pv-step { text-align: center; }
.pv-step .n { width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-family: "Sora", Inter, sans-serif; font-weight: 700; font-size: 17px; color: #fff; background: var(--grad-cta); box-shadow: 0 10px 24px -10px rgba(180,83,9,.7); position: relative; }
.pv-step h3 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 8px; }
.pv-step p { color: var(--text-mid); font-size: 15px; max-width: 30ch; margin: 0 auto; }
@media (max-width: 760px) { .pv-steps { grid-template-columns: 1fr; gap: 26px; } .pv-steps::before { display: none; } }

/* ---------- guarantees: a ledger, not cards ---------- */
.pv-ledger { max-width: 760px; margin: 36px auto 0; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden; }
.pv-ledger > div { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.pv-ledger > div:last-child { border-bottom: 0; }
.pv-ledger > div > div { min-width: 0; }
.pv-ledger .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.pv-ledger .ico svg { width: 20px; height: 20px; }
.pv-ledger h3 { font-size: 16px; font-weight: 700; margin: 2px 0 4px; letter-spacing: -.01em; }
.pv-ledger p { font-size: 14.5px; color: var(--text-mid); margin: 0; }

/* ---------- developers: one dark card ---------- */
.pv-code { max-width: 820px; margin: 36px auto 0; }
.mux-call { overflow-x: auto; }