/* JumpInPitt homepage — Paper Tiger design language.
   Source of truth: docs/superpowers/specs/2026-07-01-landing-page-redesign-design.md
   + .superpowers/mockups/full-page-v1.html (locked visual).
   This file is homepage-only; legacy pages keep css/style.css. */

/* ---------- Self-hosted fonts (no Google Fonts request) ---------- */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/anton-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/space-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-mono-latin-700-normal.woff2') format('woff2');}

/* ---------- Tokens ---------- */
:root{
  --ink:#0B0B0E; --ink-2:#111116; --ink-3:#1E1E1E;
  --cream:#F4ECDC; --cream-2:#DDD5C5; --cream-3:#9C9480;
  --gold:#FFB81C; --gold-hot:#FFD23B; --ember:#6B2214;
  --edge:rgba(244,236,220,0.10); --edge-gold:rgba(255,184,28,0.28);
  --ease:cubic-bezier(0.19,1,0.22,1);
  --disp:'Anton',sans-serif; --mono:'Space Mono',monospace; --body:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;scrollbar-width:none;scroll-behavior:smooth;}
html::-webkit-scrollbar{display:none;}
body{background:var(--ink);color:var(--cream);font-family:var(--body);overflow-x:hidden;}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-hot);outline-offset:2px;border-radius:4px;}
.bg{position:fixed;inset:0;z-index:0;background:radial-gradient(120% 60% at 50% -20%, rgba(255,184,28,0.045), transparent 55%),var(--ink);}
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.wrap{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:0 40px;}
.banner{position:sticky;top:0;z-index:10000;display:block;background:var(--gold);color:#1a1203;text-align:center;font-weight:700;font-family:var(--mono);font-size:12px;letter-spacing:.02em;padding:9px;text-decoration:none;}
.banner:hover{background:var(--gold-hot);}
.micro{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3);}
.micro.gold{color:var(--gold);}
h2.sec{font-family:var(--disp);font-weight:400;font-size:clamp(2.2rem,5vw,4.2rem);letter-spacing:.005em;text-transform:uppercase;line-height:.92;color:var(--cream);}
h2.sec em{color:var(--gold);font-style:normal;}
.section{padding:96px 0;position:relative;z-index:2;}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px;}
.link{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;}
.link:hover{color:var(--gold-hot);}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.pulse{animation:pulse 1.8s ease-in-out infinite}

/* ---------- Poster card (mirrors src/components/ui/CompactVenueCard.js) ---------- */
.poster{position:relative;display:block;border-radius:16px;overflow:hidden;background:var(--ink-3);box-shadow:0 6px 16px rgba(0,0,0,0.35);cursor:pointer;transition:transform .2s var(--ease);text-decoration:none;}
.poster:hover{transform:translateY(-4px);}
.poster .img{position:absolute;inset:0;background-size:cover;background-position:center;}
.poster .img::after{content:'';position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='np'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23np)'/%3E%3C/svg%3E");}
.poster .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.38) 42%,transparent 62%);}
.poster .chip{position:absolute;top:11px;right:11px;display:inline-flex;align-items:center;gap:4px;background:var(--gold);color:#121212;font-weight:800;font-size:10px;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:4px 9px;}
.poster .tagL{position:absolute;top:11px;left:11px;color:#fff;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.05em;padding:4px 8px;border-radius:6px;}
.poster .ov{position:absolute;left:0;right:0;bottom:0;padding:14px 15px 15px;}
.poster .ov .eb{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:5px;}
.poster .ov b{color:#fff;font-weight:800;font-size:18px;letter-spacing:-.01em;display:block;text-shadow:0 1px 3px rgba(0,0,0,0.6);line-height:1.1;}
.poster .ov .h{color:rgba(255,255,255,0.8);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;margin-top:5px;display:block;text-shadow:0 1px 2px rgba(0,0,0,0.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.poster .more{position:absolute;top:40px;right:11px;background:rgba(10,10,15,.85);border:1px solid var(--edge-gold);color:var(--gold);font-weight:800;font-size:11px;border-radius:6px;padding:4px 7px;}

/* ---------- Nav ---------- */
nav{height:94px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5;}
.brand{font-family:var(--body);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--cream);text-decoration:none;}
.brand b{color:var(--gold);}
.nlinks{display:flex;align-items:center;gap:32px;}
.nlinks a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-2);text-decoration:none;transition:color .2s;}
.nlinks a:hover{color:var(--cream);}
.bizlink{border:1px solid var(--edge);color:var(--cream);padding:9px 15px;border-radius:8px;transition:border-color .2s,color .2s;}
.bizlink:hover{border-color:var(--gold-hot);color:var(--gold-hot);}

/* ---------- Hero ---------- */
.hero{padding:40px 0 26px;}
.hero-top{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--edge);padding-top:18px;margin-bottom:30px;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:52px;align-items:start;}
h1{font-family:var(--disp);font-weight:400;font-size:clamp(3.2rem,8.4vw,8.4rem);line-height:0.9;letter-spacing:.008em;color:var(--cream);text-transform:uppercase;}
h1 .gold{color:var(--gold);}
.lead{color:var(--cream-2);font-size:19px;line-height:1.42;max-width:430px;letter-spacing:.01em;margin-top:26px;}
.cta-row{display:flex;gap:14px;align-items:center;margin-top:26px;}
.cta{display:inline-block;background:var(--gold);color:#1a1203;font-weight:800;font-family:var(--body);border-radius:10px;padding:16px 30px;font-size:15px;cursor:pointer;transition:transform .2s var(--ease),background .2s;border:none;text-decoration:none;}
.cta:hover{transform:translateY(-2px);background:var(--gold-hot);}
.cta-note{margin-top:14px;}
.live-col{display:flex;flex-direction:column;gap:12px;padding-top:6px;}
.live-head{display:flex;justify-content:space-between;align-items:center;}
.lpost{height:148px;}
.lpost .ov b{font-size:16px;}

/* (Cream hero experiments removed 2026-07-03 — founder call: original dark hero.) */
.live-link{color:var(--gold);text-decoration:none;}
.brand{display:inline-flex;align-items:center;gap:11px;}
.brand-mark{height:40px;width:auto;display:block;}

/* ---------- Partner ticker ---------- */
.marq.partners{margin-top:0;}
.marq.partners .marq-t{animation-duration:60s;font-size:27px;}

/* (Old static passport-card styles removed — the original interactive
   flip-book passport is ported at the bottom of this file.) */

/* ---------- Logo strip ---------- */
.logos{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);padding:26px 0;}
.logos .lab{text-align:center;margin-bottom:16px;}
.logo-row{display:flex;justify-content:center;flex-wrap:wrap;gap:44px;}
.logo-row span{font-family:var(--disp);font-size:22px;text-transform:uppercase;letter-spacing:.02em;color:var(--cream-3);opacity:.6;transition:opacity .2s,color .2s;}
.logo-row span:hover{opacity:1;color:var(--cream);}

/* ---------- Stats + marquee ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:6px;border-top:1px solid var(--edge);}
.stat{padding:34px 24px 30px;border-right:1px solid var(--edge);}
.stat:last-child{border-right:none;}
.stat .n{font-family:var(--disp);font-weight:400;font-size:clamp(2.8rem,5.4vw,4.4rem);line-height:.9;color:var(--cream);letter-spacing:.005em;text-transform:uppercase;}
.stat .n em{color:var(--gold);font-style:normal;}
.stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-3);margin-top:12px;}
.marq{overflow:hidden;margin-top:26px;padding:22px 0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marq-t{display:inline-flex;white-space:nowrap;animation:scroll 34s linear infinite;font-family:var(--disp);font-weight:400;font-size:34px;color:var(--cream-3);letter-spacing:.01em;text-transform:uppercase;}
.marq-t span{padding:0 24px;}
.marq-t span em{color:var(--gold);font-style:normal;}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- How it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:16px;overflow:hidden;}
.step{background:var(--ink);padding:34px 28px 40px;}
.step .num{font-family:var(--disp);font-size:56px;color:var(--gold);line-height:1;}
.step h3{font-family:var(--body);font-weight:800;font-size:22px;margin:16px 0 8px;letter-spacing:-.01em;}
.step p{color:var(--cream-2);font-size:15px;line-height:1.5;}

/* ---------- What's On ---------- */
.tabs{display:none;gap:10px;margin-bottom:22px;flex-wrap:wrap;}
.tabs.live{display:flex;}
.tab{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--cream-2);border:1px solid var(--edge);border-radius:20px;padding:7px 15px;cursor:pointer;background:none;}
.tab.on{background:var(--gold);color:#1a1203;border-color:var(--gold);font-weight:700;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.grid4 .poster{height:230px;}

/* ---------- Neighborhoods ---------- */
.hoods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.hood{position:relative;display:block;height:190px;border-radius:16px;overflow:hidden;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.35);transition:transform .2s var(--ease);text-decoration:none;}
.hood:hover{transform:translateY(-4px);}
.hood .img{position:absolute;inset:0;background-size:cover;background-position:center;}
.hood .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.85),rgba(0,0,0,0.15));}
.hood .ov{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;}
.hood .ov b{font-family:var(--disp);font-weight:400;font-size:30px;text-transform:uppercase;color:#fff;letter-spacing:.01em;line-height:.95;}
.hood .ov .c{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.06em;margin-top:8px;text-transform:uppercase;}

/* ---------- Rewards ---------- */
.rewards-grid{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center;}
.rw ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px;}
.rw li{display:flex;gap:12px;align-items:flex-start;color:var(--cream-2);font-size:16px;line-height:1.4;}
.rw li .k{color:var(--gold);font-weight:800;font-family:var(--mono);font-size:12px;padding-top:3px;}
.demo-note{margin-top:14px;font-size:10px;letter-spacing:.08em;}

/* ---------- For Business (cream block) ---------- */
.biz{background:var(--cream);color:#141014;position:relative;z-index:2;}
.biz .in{max-width:1400px;margin:0 auto;padding:78px 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.biz .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8a6a10;}
.biz h2{font-family:var(--disp);font-weight:400;font-size:clamp(2.4rem,5vw,4.4rem);text-transform:uppercase;line-height:.9;color:#141014;margin:14px 0 0;}
.biz p{font-size:18px;line-height:1.5;color:#3a352e;margin-top:18px;max-width:440px;}
.biz .bwrap{display:flex;justify-content:flex-end;}
.biz .bbtn{background:#141014;color:var(--cream);font-family:var(--body);font-weight:800;font-size:15px;padding:16px 30px;border-radius:10px;text-decoration:none;transition:transform .2s var(--ease);}
.biz .bbtn:hover{transform:translateY(-2px);}

/* ---------- Download ---------- */
.download{text-align:center;padding:110px 0;position:relative;z-index:2;}
.download h2{font-family:var(--disp);font-weight:400;font-size:clamp(3rem,9vw,8rem);text-transform:uppercase;line-height:.88;color:var(--cream);letter-spacing:.008em;}
.download h2 em{color:var(--gold);font-style:normal;}
.badges{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap;}
.sbadge{display:flex;align-items:center;gap:9px;background:#000;border:1px solid rgba(255,255,255,0.2);border-radius:12px;padding:12px 22px;color:#fff;font-size:14px;text-decoration:none;transition:transform .2s var(--ease),border-color .2s;}
a.sbadge:hover{transform:translateY(-2px);border-color:var(--gold);}
.sbadge.soon{opacity:.55;cursor:default;}
.sbadge small{display:block;font-size:9px;color:var(--cream-3);font-family:var(--mono);}

/* ---------- Android waitlist (download section) ---------- */
.android-form{margin:34px auto 0;max-width:420px;position:relative;}
.android-row{display:flex;gap:10px;}
.android-row input{flex:1;background:var(--ink-2);border:1px solid var(--edge);border-radius:10px;color:var(--cream);font-family:var(--body);font-size:15px;padding:13px 14px;min-width:0;}
input::placeholder,textarea::placeholder{color:rgba(244,236,220,.55);}
.android-row input:focus{outline:none;border-color:var(--edge-gold);}
.android-row .cta{padding:13px 22px;white-space:nowrap;}
.form-message{font-family:var(--mono);font-size:11px;letter-spacing:.04em;margin-top:12px;min-height:14px;}
.form-message.success{color:#7dc98f;}
.form-message.error{color:#e07a6a;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--edge);position:relative;z-index:2;}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding:60px 0 30px;}
.foot .brand{margin-bottom:14px;display:inline-block;}
.foot p{color:var(--cream-3);font-size:13px;line-height:1.6;max-width:280px;}
.fcol h5{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-3);margin-bottom:14px;}
.fcol a{display:block;color:var(--cream-2);font-size:14px;text-decoration:none;margin-bottom:10px;transition:color .2s;}
.fcol a:hover{color:var(--gold);}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding:24px 0 44px;border-top:1px solid var(--edge);flex-wrap:wrap;gap:14px;}
.foot-bot .micro{color:var(--cream-3);}

/* ---------- Page shell (vendors / blog / legal — shared Paper Tiger chrome) ---------- */
.pg-hero{padding:72px 0 40px;}
.pg-hero .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:14px;}
.pg-hero h1{font-size:clamp(2.6rem,6.4vw,5.6rem);}
.pg-hero .lead{max-width:560px;}
.pg-body{position:relative;z-index:2;}
.article{max-width:760px;margin:0 auto;padding:24px 0 96px;}
.article h2{font-family:var(--disp);font-weight:400;font-size:clamp(1.6rem,3.2vw,2.4rem);text-transform:uppercase;line-height:.95;color:var(--cream);margin:44px 0 14px;}
.article h3{font-family:var(--body);font-weight:800;font-size:19px;color:var(--cream);margin:28px 0 10px;}
.article p,.article li{color:var(--cream-2);font-size:16px;line-height:1.65;}
.article p{margin:0 0 16px;}
.article ul,.article ol{margin:0 0 16px 22px;}
.article a{color:var(--gold);text-decoration:none;}
.article a:hover{color:var(--gold-hot);}
.article .meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-3);margin-bottom:26px;display:block;}
.article hr{border:none;border-top:1px solid var(--edge);margin:36px 0;}
.pg-form{max-width:640px;}
.pg-form label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-3);display:block;margin:18px 0 7px;}
.pg-form input,.pg-form select,.pg-form textarea{width:100%;background:var(--ink-2);border:1px solid var(--edge);border-radius:10px;color:var(--cream);font-family:var(--body);font-size:15px;padding:13px 14px;}
.pg-form input:focus,.pg-form select:focus,.pg-form textarea:focus{outline:none;border-color:var(--edge-gold);}
.pg-form .cta{margin-top:24px;}
.form-note{font-family:var(--mono);font-size:11px;color:var(--cream-3);margin-top:12px;letter-spacing:.04em;}
.feature-rows{display:flex;flex-direction:column;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:16px;overflow:hidden;}
.feature-row{background:var(--ink);padding:30px 28px;display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start;}
.feature-row .num{font-family:var(--disp);font-size:34px;color:var(--gold);line-height:1;}
.feature-row h3{font-family:var(--body);font-weight:800;font-size:19px;color:var(--cream);margin:0 0 6px;}
.feature-row p{color:var(--cream-2);font-size:15px;line-height:1.55;margin:0;}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.compare .col{border:1px solid var(--edge);border-radius:16px;padding:26px;background:var(--ink-2);}
.compare .col.us{border-color:var(--edge-gold);}
.compare h4{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-3);margin:0 0 16px;}
.compare .col.us h4{color:var(--gold);}
.compare li{color:var(--cream-2);font-size:15px;line-height:1.5;margin-bottom:11px;list-style:none;padding-left:18px;position:relative;}
.compare li::before{content:'—';position:absolute;left:0;color:var(--cream-3);}
.compare .col.us li::before{content:'✓';color:var(--gold);}
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.blog-grid .poster{height:230px;}
@media(max-width:920px){.compare,.blog-grid{grid-template-columns:1fr}}

/* ---------- Motion / responsive ---------- */
[fade]{opacity:0;transform:translateY(2.5em);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);}
[fade].in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){[fade]{opacity:1;transform:none;}.marq-t,.pulse{animation:none;}}
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(2,1fr)}.hoods{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}.rewards-grid,.biz .in{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:none}.foot{grid-template-columns:1fr 1fr}.nlinks a:not(.bizlink){display:none}
  .biz .bwrap{justify-content:flex-start}
}

/* ===================================================================
   ORIGINAL INTERACTIVE PASSPORT (ported from css/style.css 827-1184;
   flip/open logic lives in js/main.js). var(--border-gold) mapped to
   var(--edge-gold). */
.pp-callout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255,184,28,0.1);
  border: 1px solid var(--edge-gold);
  border-radius: 10px;
  margin-bottom: 16px;
  animation: calloutBounce 2.5s ease-in-out infinite;
  cursor: pointer;
  transition: opacity 0.4s;
}
.pp-callout.pp-callout-hidden { opacity: 0; pointer-events: none; }
.pp-callout-icon { font-size: 18px; }
.pp-callout-text {
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
@keyframes calloutBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* -- Interactive Passport (Book) -- */
.passport-3d {
  position: relative;
  width: 280px;
  height: 380px;
  margin: 0 auto;
  perspective: 1200px;
  cursor: pointer;
}
/* The book wrapper holds cover+pages side by side */
.pp-book {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
/* Cover — front of book, flips from left spine */
.pp-cover {
  position: absolute;
  inset: 0;
  background: #3B2314;
  border-radius: 4px 12px 12px 4px;
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s ease;
  backface-visibility: hidden;
  border: 1px solid rgba(196,152,85,0.3);
  box-shadow: 4px 0 20px rgba(0,0,0,0.4), inset -2px 0 8px rgba(0,0,0,0.2);
}
.passport-3d.pp-open .pp-cover {
  transform: rotateY(-165deg);
  box-shadow: -2px 0 12px rgba(0,0,0,0.3);
}
/* Left spine edge highlight on cover */
.pp-cover::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 12px;
  background: linear-gradient(to right, rgba(255,255,255,0.06), transparent);
  border-radius: 4px 0 0 4px;
}
.pp-cover-stitch {
  position: absolute;
  inset: 14px;
  border: 2px dashed #C49855;
  border-radius: 6px;
  opacity: 0.45;
  pointer-events: none;
}
.pp-cover-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.pp-cover-logo {
  font-size: 20px;
  font-weight: 800;
  text-shadow: 1px 2px 3px rgba(0,0,0,0.7);
}
.pp-cover-sub {
  color: #D4AF37;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 5px;
  margin-top: 8px;
  text-shadow: 1px 2px 2px rgba(0,0,0,0.7);
}
.pp-cover-title {
  color: #D4AF37;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 1px 3px 3px rgba(0,0,0,0.7);
}
.pp-cover-divider {
  width: 55%;
  height: 2px;
  background: #D4AF37;
  opacity: 0.5;
  margin: 16px 0;
}
.pp-cover-user {
  color: #D4AF37;
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 2px;
  opacity: 0.85;
  text-shadow: 1px 2px 2px rgba(0,0,0,0.7);
}
.pp-cover-valid {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: #6B0000;
  border: 2px solid #8B1A1A;
  border-radius: 50%;
  transform: rotate(-12deg);
  margin-top: 16px;
}
.pp-cv-t { color: #fff; font-size: 8px; font-weight: 900; letter-spacing: 1.5px; line-height: 1; }
.pp-cv-y { color: #fff; font-size: 16px; font-weight: 900; line-height: 1.2; }
.pp-cover-tap {
  position: absolute;
  bottom: 18px;
  color: #D4AF37;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 3px;
  opacity: 0.7;
  transition: opacity 0.4s;
  animation: tapPulse 2s ease-in-out infinite;
}
@keyframes tapPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.passport-3d.pp-open .pp-cover-tap { opacity: 0; }

/* Pages — sits behind cover */
.pp-pages {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 4px 12px 12px 4px;
  overflow: hidden;
  border-left: 3px solid #D5CCBE;
  box-shadow: inset 3px 0 6px rgba(0,0,0,0.06);
  perspective: 1200px;
}
.pp-page {
  position: absolute;
  inset: 0;
  background: #F5F0E8;
  padding: 12px 14px 8px 20px;
  flex-direction: column;
  display: flex;
  /* Pages flip from the LEFT spine, just like the cover */
  transform-origin: left center;
  transform: rotateY(0);
  backface-visibility: hidden;
  /* Hidden by default — stacked behind */
  z-index: 0;
  pointer-events: none;
}
.pp-page-active {
  z-index: 2;
  pointer-events: auto;
}
/* Flipped page — turned to the left like the cover */
.pp-page-flipped {
  transform: rotateY(-165deg);
  z-index: 1;
}
/* Transition only when animating (JS adds this class) */
.pp-page-animating {
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.pp-spine {
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
  border-radius: 4px 0 0 4px;
  pointer-events: none;
}
.pp-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.pp-page-hl { color: #AAA; font-size: 6px; font-weight: 900; letter-spacing: 1.5px; }
.pp-page-hr { color: #4A3728; font-size: 7px; font-weight: 800; letter-spacing: 1px; }
.pp-hr {
  border: none;
  height: 1px;
  background: #E0DAD0;
  margin: 3px 0;
}
.pp-hood-title {
  color: #4A3728;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 3px;
  text-align: center;
  padding: 3px 0;
}

/* Stamp Grid — constrained sizes */
.pp-stamp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  flex: 1;
  align-content: center;
  justify-items: center;
  padding: 4px 2px;
}
.pp-stamp {
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  border-width: 2px;
  border-style: solid;
}

/* Shapes — all same base size for consistency */
.pp-shape-circle { border-radius: 50%; }
.pp-shape-oval { border-radius: 50% / 38%; width: 100px; height: 82px; }
.pp-shape-roundrect { border-radius: 6px; width: 95px; height: 85px; }
.pp-shape-diamond {
  border-radius: 3px;
  width: 58px; height: 58px;
  transform: rotate(45deg) !important;
  margin: 10px;
}
.pp-shape-diamond > * { transform: rotate(-45deg); display: block; }

/* Filled stamps */
.pp-stamp-filled { border-style: solid; }
.pp-stamp-eat { border-color: #B82E2E; color: #B82E2E; }
.pp-stamp-drink { border-color: #1A4A76; color: #1A4A76; }
.pp-stamp-do { border-color: #1E7A49; color: #1E7A49; }
.pp-st-cat { font-size: 7px; font-weight: 900; letter-spacing: 1.5px; }
.pp-st-name { font-size: 9px; font-weight: 900; line-height: 1.15; }
.pp-st-div { border: none; width: 22px; height: 1.5px; opacity: 0.5; margin: 2px 0; }
.pp-stamp-eat .pp-st-div { background: #B82E2E; }
.pp-stamp-drink .pp-st-div { background: #1A4A76; }
.pp-stamp-do .pp-st-div { background: #1E7A49; }
.pp-st-yr { font-size: 6px; font-weight: 700; letter-spacing: 0.5px; opacity: 0.7; }

/* Empty stamps */
.pp-stamp-empty { border-style: dashed; border-color: #CCC; color: #CCC; }
.pp-st-q { font-size: 16px; font-weight: 900; margin-bottom: 1px; }
.pp-st-name-empty { font-size: 6px; font-weight: 700; line-height: 1.1; }

/* Smaller text in diamond */
.pp-shape-diamond .pp-st-cat { font-size: 6px; letter-spacing: 1px; }
.pp-shape-diamond .pp-st-name { font-size: 7px; }
.pp-shape-diamond .pp-st-q { font-size: 14px; }
.pp-shape-diamond .pp-st-name-empty { font-size: 5px; }
.pp-shape-diamond .pp-st-yr { font-size: 5px; }

/* Page footer & nav */
.pp-page-footer {
  color: #AAA;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  margin: 4px 0 2px;
}
.pp-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2px;
}
.pp-nav-btn {
  background: none;
  border: 1px solid #C49855;
  border-radius: 4px;
  color: #4A3728;
  font-size: 8px;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.2s;
}
.pp-nav-btn:hover { background: rgba(196,152,85,0.15); }
.pp-nav-disabled { opacity: 0.3; pointer-events: none; }
.pp-nav-close {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.2s;
  color: #4A3728;
}
.pp-nav-close:hover { background: rgba(0,0,0,0.05); }

/* Page edge lines (decorative) */
.pp-pages::before {
  content: '';
  position: absolute;
  right: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: repeating-linear-gradient(
    to bottom,
    #E0DAD0 0px,
    #E0DAD0 1px,
    #F5F0E8 1px,
    #F5F0E8 3px
  );
  z-index: 2;
  border-radius: 0 2px 2px 0;
}

/* Responsive passport */
@media (max-width: 560px) {
  .passport-3d { width: 240px; height: 330px; }
  .pp-stamp { width: 76px; height: 76px; }
  .pp-shape-oval { width: 84px; height: 68px; }
  .pp-shape-roundrect { width: 80px; height: 72px; }
  .pp-shape-diamond { width: 48px; height: 48px; margin: 8px; }
  .pp-cover-title { font-size: 22px; }
  .pp-cover-logo { font-size: 17px; }
  .pp-st-cat { font-size: 6px; }
  .pp-st-name { font-size: 7px; }
}