/* ==========================================================================
   ParentTravelPal — standalone site  ·  CANON v2.0
   Navy text · Travel Blue actions · Cloud bg · Coral/Mint/Gold accents ·
   Poppins display + Inter body. Calm, warm, reassuring, nonjudgmental.
   The public web is child-data-free (see coach.js) — marketing + a coach that
   stores nothing about an identifiable child.
   ========================================================================== */
:root {
  /* --- Brand board v3 (source of truth): warm cream · deep navy · ocean teal · coral · gold · seafoam --- */
  --ptp-navy:#0D2845; --ptp-teal:#16B5A6; --ptp-coral:#FF6868; --ptp-gold:#FFC857;
  --ptp-seafoam:#A8E6CF; --ptp-mist:#E7F6F2; --ptp-cream:#FFF7E8; --ptp-charcoal:#333333;
  --ptp-teal-deep:#0E9488; --ptp-teal-ink:#0C7C72; --ptp-navy-2:#16406B;

  /* --- legacy aliases → remapped to the new board so coach/games/legal restyle automatically --- */
  --navy:var(--ptp-navy); --blue:var(--ptp-teal); --gold:var(--ptp-gold); --coral:var(--ptp-coral); --mint:var(--ptp-teal);
  --cloud:#FFFFFF; --paper:var(--ptp-cream); --line:#EAE1CE;
  --ink:var(--ptp-navy); --ink2:#5A6B78; --ink3:#93A0A6;
  --blue-soft:var(--ptp-mist); --mint-soft:#DBF3E9; --coral-soft:#FFE8E8; --gold-soft:#FFF2D2;
  --d:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif; --b:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:24px; --radius-sm:16px; --shadow:0 10px 30px rgba(13,40,69,.08);
  --shadow-lg:0 24px 55px -16px rgba(13,40,69,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--b); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
h1,h2,h3,.d{font-family:var(--d); color:var(--navy); letter-spacing:-.01em; line-height:1.12}
img{max-width:100%; display:block}
a{color:var(--ptp-teal-ink); text-underline-offset:.15em}
.wrap{max-width:1080px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem)}
.eyebrow{font-family:var(--b); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; color:var(--ptp-teal-ink)}
.script{font-family:var(--d); font-weight:600; font-style:italic; color:var(--coral)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--b); font-weight:800; font-size:1rem;
  border-radius:999px; padding:.85rem 1.5rem; border:2px solid transparent; cursor:pointer; text-decoration:none; transition:transform .12s ease, box-shadow .2s ease, background .2s ease}
.btn--primary{background:var(--ptp-teal-deep); color:#fff; box-shadow:0 10px 22px -8px rgba(14,148,136,.5)}
.btn--primary:hover{transform:translateY(-1px); background:var(--ptp-teal-ink)}
.btn--ghost{background:#fff; color:var(--ptp-navy); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ptp-teal); color:var(--ptp-teal-ink)}
.btn--coral{background:var(--ptp-coral); color:#fff; box-shadow:0 10px 22px -8px rgba(255,104,104,.5)}
.btn--coral:hover{transform:translateY(-1px)}
.btn--gold{background:var(--ptp-gold); color:#6a4d05; box-shadow:0 10px 22px -8px rgba(255,200,87,.55)}
.btn--gold:hover{transform:translateY(-1px)}
.btn--light{background:#fff; color:var(--ptp-teal-ink); border-color:#fff}
.btn--light:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--ptp-teal); outline-offset:2px}
.btn--lg{font-size:1.05rem; padding:1rem 1.7rem}

/* header — app-brand lockup */
header.site{position:sticky; top:0; z-index:30; background:rgba(255,247,232,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:.7rem; padding-bottom:.7rem; gap:1rem}
.brand{display:inline-flex; align-items:center; gap:.55rem; text-decoration:none}
.brand__mark{height:38px; width:38px}
.brand__name{font-family:var(--d); font-weight:900; font-size:1.32rem; letter-spacing:-.01em; line-height:1}
.brand__p{color:var(--ptp-navy)} .brand__t{color:var(--ptp-teal)}
.brand__name .brand__t:last-child{color:var(--ptp-coral)}
.nav{display:flex; align-items:center; gap:1.4rem}
.nav a:not(.btn){color:var(--ptp-navy); text-decoration:none; font-weight:700; font-size:.95rem}
.nav a:not(.btn):hover{color:var(--ptp-teal)}
.nav .btn{padding:.58rem 1.1rem; font-size:.92rem}
@media(max-width:760px){ .nav a:not(.btn){display:none} .brand__name{font-size:1.18rem} }

/* full-page ambient background — the hero illustration behind everything */
.pagebg{position:fixed; inset:0; z-index:-2; background:url("assets/brand/hero-primary.webp") center center/cover no-repeat}
.pagebg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,247,232,.30) 0%, rgba(255,247,232,.44) 45%, rgba(255,247,232,.60) 100%)}
body{background:var(--ptp-cream)}
/* let the wash show through the main content bands (cards stay solid + readable) */
.hero,.coach,.traveler,.app,.games-band,.proof,.signup{background:transparent}

/* hero — copy over the illustration */
.hero{position:relative; overflow:hidden}
.hero__grid{position:relative; z-index:2; display:block; max-width:640px;
  padding-top:clamp(3rem,7vw,5rem); padding-bottom:clamp(4rem,11vw,7rem)}
.hero__copy .eyebrow{margin-bottom:.7rem}
.hero h1{font-size:clamp(2.05rem,5vw,3.35rem); font-weight:900; letter-spacing:-.02em; margin:.1rem 0 .3rem; max-width:15ch}
.hero h1 .hl{color:var(--ptp-teal-deep)}
.hero .lede{font-size:clamp(1.05rem,2.2vw,1.24rem); color:var(--ink2); max-width:44ch; margin:.6rem 0 1.4rem}
.hero .actions{display:flex; gap:.7rem; flex-wrap:wrap}
.promise{margin:1.3rem 0 0; font-family:var(--d); font-weight:700; color:var(--ptp-teal-ink); font-size:1rem}
.promise b{color:var(--ptp-navy)}

.hero__art{position:relative}
.hero__frame{position:relative; border-radius:28px; overflow:hidden; box-shadow:var(--shadow-lg); border:6px solid #fff; background:var(--ptp-mist); aspect-ratio:16/10}
.hero__frame img{width:100%; height:100%; object-fit:cover; object-position:60% 60%}
.hero__chip{position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:.4rem; background:#fff; color:var(--ptp-teal-ink);
  font-weight:800; font-size:.82rem; padding:.4rem .8rem; border-radius:999px; box-shadow:var(--shadow)}
.hero__chip .ic{width:1.05em; height:1.05em}
.hero__appcard{position:absolute; right:14px; bottom:14px; display:flex; align-items:center; gap:.6rem; background:#fff; border-radius:16px;
  padding:.7rem .9rem; box-shadow:var(--shadow-lg); min-width:180px}
.hero__appcard-label{font-size:.72rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--ink3)}
.hero__appcard-num{font-family:var(--d); font-weight:900; color:var(--ptp-teal); font-size:1.05rem}
.hero__appcard .pbar{flex:1}
.pbar{height:8px; border-radius:999px; background:var(--ptp-mist); overflow:hidden}
.pbar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--ptp-teal),var(--ptp-seafoam))}

/* wave divider */
.wave{position:absolute; left:0; right:0; bottom:-1px; z-index:1; line-height:0; pointer-events:none}
.wave svg{width:100%; height:clamp(50px,7vw,110px); display:block}
@media(max-width:820px){
  .hero__grid{max-width:none; padding-bottom:clamp(3rem,11vw,5rem)}
}

/* sections */
section.band{padding:clamp(2.6rem,7vw,4.5rem) 0}
.section-head{text-align:center; max-width:44ch; margin:0 auto clamp(1.5rem,4vw,2.5rem)}
.section-head h2{font-size:clamp(1.6rem,4vw,2.3rem); font-weight:700; margin:.3rem 0 .5rem}
.section-head p{color:var(--ink2); font-size:1.05rem}

/* how-it-works steps */
.steps{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.4rem; box-shadow:var(--shadow)}
.step__n{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-family:var(--d); font-weight:800; color:#fff; margin-bottom:.9rem}
.step:nth-child(1) .step__n{background:var(--blue)}
.step:nth-child(2) .step__n{background:var(--mint)}
.step:nth-child(3) .step__n{background:var(--coral)}
.step h3{font-size:1.2rem; margin:0 0 .35rem}
.step p{color:var(--ink2); margin:0}

/* approach / value cards */
.vgrid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.vcard{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow)}
.vcard h3{font-size:1.1rem; margin:0 0 .4rem}
.vcard p{color:var(--ink2); margin:0; font-size:.96rem}
.vcard .chip{display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; border-radius:999px; padding:.2rem .55rem; margin-bottom:.6rem}

/* photo band */
.photoband{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); min-height:300px; display:grid; align-items:end}
.photoband img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.photoband__cap{position:relative; z-index:2; padding:2rem; color:#fff; background:linear-gradient(180deg,transparent, rgba(11,29,58,.72))}
.photoband__cap h3{color:#fff; font-size:clamp(1.3rem,3vw,1.8rem); margin:0 0 .3rem}
.photoband__cap p{color:rgba(255,255,255,.9); margin:0; max-width:44ch}

/* the coach widget */
.coach{background:linear-gradient(180deg,var(--blue-soft), var(--paper))}
.coach__card{background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-lg); max-width:560px; margin:0 auto; padding:clamp(1.3rem,4vw,2rem); overflow:hidden}
.coach__boundary{font-size:.82rem; font-weight:700; color:var(--ink2); text-align:center; background:var(--blue-soft); border-radius:999px; padding:.4rem .9rem; margin:0 auto 1rem; display:inline-block}
.coach__eyebrow{font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.72rem; color:var(--ptp-teal-ink); margin:0 0 .2rem}
.coach__q{font-family:var(--d); font-weight:600; font-size:clamp(1.15rem,3vw,1.4rem); margin:.1rem 0 .3rem; color:var(--navy)}
.coach__hint{color:var(--ink3); font-size:.9rem; margin:0 0 1rem}
.coach__lead{font-size:1.1rem; font-weight:600; line-height:1.5; color:var(--navy)}
.coach__body{font-size:1rem; color:var(--ink2); margin:.5rem 0 0}
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0}
.chip-btn{font-family:var(--b); font-weight:700; font-size:.95rem; border-radius:999px; padding:.65rem 1.05rem; border:1.5px solid var(--line); background:#fff; color:var(--ink2); cursor:pointer; transition:border-color .12s, background .12s, color .12s}
.chip-btn:hover{border-color:var(--blue); color:var(--blue)}
.chip-btn.is-on{background:var(--navy); color:#fff; border-color:var(--navy)}
.coach__actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem}
.coach__try{background:var(--blue-soft); border-radius:16px; padding:1rem 1.1rem; margin:.6rem 0}
.coach__reframe{border-top:1px solid var(--line); margin-top:1rem; padding-top:1rem}
.coach__reframe b{color:var(--ink3); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; display:block; margin-bottom:.2rem}
.coach__again{background:none; border:none; color:var(--ink3); font-weight:700; cursor:pointer; padding:.6rem 0; font-size:.9rem}
.coach__safety{border-top:1px solid var(--line); margin-top:1.2rem; padding-top:1rem}
.coach__safety p{font-size:.88rem; color:var(--ink2); margin:0}
.coach__safety a,.coach__safety button{color:var(--coral); font-weight:700; background:none; border:none; cursor:pointer; padding:0; font-size:.88rem}
.coach__emergency{font-size:.82rem; color:#B33; margin-top:.5rem; line-height:1.5}
.coach__privacy{font-size:.8rem; color:var(--ink3); text-align:center; margin:1rem auto 0; max-width:52ch}

/* footer */
footer.site{background:var(--navy); color:#fff; padding:clamp(2.4rem,6vw,3.5rem) 0 2rem}
footer.site .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem}
footer.site img{height:30px}
footer.site .flinks a{color:rgba(255,255,255,.8); text-decoration:none; margin-left:1.2rem; font-size:.92rem}
footer.site .flinks a:hover{color:#fff}
footer.site .fine{width:100%; color:rgba(255,255,255,.55); font-size:.8rem; line-height:1.6; margin-top:1rem; border-top:1px solid rgba(255,255,255,.14); padding-top:1rem}

/* legal pages (privacy / terms) */
.legal-wrap{max-width:760px; margin:0 auto; padding:clamp(1.8rem,6vw,3.2rem) clamp(1rem,4vw,2rem) 4rem}
.legal .back{display:inline-block; color:var(--blue); font-weight:700; text-decoration:none; margin-bottom:1rem}
.legal-note{background:var(--gold-soft); border:1px solid #F0D48A; border-radius:12px; padding:.8rem 1rem; font-size:.9rem; color:#7a5a12; margin-bottom:1.6rem; font-weight:600}
.legal h1{font-size:clamp(1.7rem,5vw,2.4rem); margin:.2rem 0}
.legal .updated{color:var(--ink3); font-size:.9rem; margin:0 0 1.4rem}
.legal h2{font-size:1.25rem; margin:2rem 0 .5rem}
.legal h3{font-size:1.05rem; margin:1.4rem 0 .3rem}
.legal p, .legal li{color:var(--ink2); font-size:1rem; line-height:1.7}
.legal ul{padding-left:1.2rem}
.legal a{color:var(--blue)}
.legal .callout{background:var(--blue-soft); border-left:4px solid var(--blue); border-radius:0 12px 12px 0; padding:1rem 1.2rem; margin:1.3rem 0}
.legal .callout.opinion{background:var(--coral-soft); border-left-color:var(--coral)}
.legal .callout p{color:var(--navy); margin:0; font-weight:600}

/* ==========================================================================
   Game Mode (games.html) — live web library. Same palette, radii,
   and shadows as the rest of the site.
   ========================================================================== */
.gm-ic{width:1.05em; height:1.05em; flex:none; vertical-align:-.18em; display:inline-block}
.gm-hero{background:linear-gradient(180deg,var(--blue-soft), var(--paper)); padding-bottom:1.6rem}
.gm-tierbadge{display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8a6410; background:var(--gold-soft); border:1px solid #F0D48A; border-radius:999px; padding:.35rem .8rem; margin-bottom:.8rem}
.gm-draft{display:flex; gap:.7rem; align-items:flex-start; background:var(--gold-soft); border:1px solid #F0D48A; border-radius:var(--radius-sm); padding:.85rem 1rem; font-size:.9rem; color:#7a5a12; font-weight:600; max-width:620px; margin:1.4rem auto 0}
.gm-draft .gm-ic{margin-top:.15rem; color:#8a6410}
.gm-draft b{color:#6d4f0e}

/* picker */
.gm-picker-card{max-width:640px}
.gm-q{margin:0 0 1rem}
.gm-q .coach__q{font-size:1.1rem}
.gm-ephemeral{font-size:.8rem; color:var(--ink3); margin:.2rem 0 0}
.gm-results-h{font-family:var(--d); color:var(--navy); font-size:1.15rem; margin:1.4rem 0 .7rem; border-top:1px solid var(--line); padding-top:1.2rem; outline:none}
.gm-stepdown{margin:1rem 0 0; font-weight:600; color:var(--ink2); display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}

/* game cards */
.gm-grid{display:grid; gap:1rem; grid-template-columns:1fr}
.gm-grid--lib{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.gm-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem 1.2rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.45rem}
.gm-card__top{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.gm-cardtag{font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--navy); border-radius:999px; padding:.22rem .6rem}
.gm-energy{display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; border-radius:999px; padding:.22rem .6rem}
.gm-energy--burn{background:var(--coral-soft); color:#b3444a}
.gm-energy--engage{background:var(--blue-soft); color:var(--blue)}
.gm-energy--calm-down{background:var(--mint-soft); color:#1f6f5c}
.gm-tease{font-size:.7rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; border-radius:999px; padding:.22rem .6rem; background:var(--mint-soft); color:#1f6f5c; margin-left:auto}
.gm-tease--paid{background:var(--gold-soft); color:#8a6410}
.gm-card__name{font-size:1.2rem; margin:.1rem 0 0}
.gm-card__origin{font-size:.8rem; color:var(--ink3); margin:0; font-style:italic}
.gm-card__pitch{color:var(--ink2); margin:.1rem 0; font-size:.95rem}
.gm-card__meta{font-size:.8rem; color:var(--ink3); margin:0; font-weight:600}
.gm-card__actions{display:flex; align-items:center; gap:.6rem; margin-top:.3rem}
.gm-card__actions .btn{font-size:.9rem; padding:.6rem 1rem}
.gm-fav{background:#fff; border:1.5px solid var(--line); border-radius:999px; width:42px; height:42px; display:grid; place-items:center; cursor:pointer; color:#8a6410; transition:border-color .12s}
.gm-fav:hover{border-color:var(--gold)}
.gm-fav[aria-pressed="true"]{background:var(--gold-soft); border-color:#F0D48A}
.gm-fav:focus-visible, .chip-btn:focus-visible, .gm-reveal:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.gm-detail{border-top:1px solid var(--line); margin-top:.5rem; padding-top:.8rem; display:flex; flex-direction:column; gap:.7rem}
.gm-detail b{color:var(--ink3); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; display:block; margin-bottom:.25rem}
.gm-script ol{margin:0; padding-left:1.2rem; color:var(--navy); font-weight:600}
.gm-script li{margin:.25rem 0}
.gm-vars ul{margin:0; padding-left:1.1rem; color:var(--ink2); font-size:.92rem}
.gm-vars li{margin:.2rem 0}
.gm-vars em{color:var(--navy); font-style:normal; font-weight:700}
.gm-why{background:var(--blue-soft); border-radius:var(--radius-sm); padding:.8rem .9rem}
.gm-why p{margin:0; color:var(--ink2); font-size:.9rem}
.gm-tier{display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:.15rem .5rem; background:#fff; border:1px solid var(--line); color:var(--ink2)}
.gm-tier--strong,.gm-tier--moderate{color:#1f6f5c; border-color:#bfe8dc}
.gm-tier--emerging{color:var(--blue); border-color:#cddffb}
.gm-safety{font-size:.85rem; color:#7a5a12; background:var(--gold-soft); border-radius:var(--radius-sm); padding:.6rem .8rem; margin:0; font-weight:600}
.gm-driver{display:flex; align-items:flex-start; gap:.45rem; font-size:.85rem; color:#b3444a; background:var(--coral-soft); border-radius:var(--radius-sm); padding:.55rem .8rem; margin:.2rem 0 0; font-weight:700}
.gm-driver .gm-ic{margin-top:.12rem}
.gm-bail{font-size:.88rem; color:var(--ink2); margin:.4rem 0 0; border-top:1px dashed var(--line); padding-top:.6rem}
.gm-bail b{color:var(--ink3); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; display:block; margin-bottom:.15rem}
.gm-ladder-btn{align-self:flex-start; display:inline-flex; gap:.45rem}

/* library filters */
.gm-filters{margin-bottom:1rem}
.gm-filters .chips{margin:.4rem 0}
.gm-count{font-size:.85rem; font-weight:700; color:var(--ink3); margin:.2rem 0 .8rem}

/* energy ladder */
.gm-ladder{max-width:560px; margin:0 auto; display:flex; flex-direction:column; align-items:stretch}
.gm-rung{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem; box-shadow:var(--shadow)}
.gm-rung__head{display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem}
.gm-rung__head b{font-family:var(--d); color:var(--navy)}
.gm-rung h4{font-family:var(--d); color:var(--navy); font-size:1.15rem; margin:0 0 .25rem}
.gm-rung p{color:var(--ink2); margin:0 0 .7rem; font-size:.95rem}
.gm-rung .btn{font-size:.88rem; padding:.55rem .95rem}
.gm-rung__arrow{text-align:center; color:var(--ink3); font-size:1.3rem; padding:.35rem 0}
.gm-ladder + .gm-bail{max-width:560px; margin:1rem auto 0}

/* trivia */
.gm-trivia-list{margin:0; padding-left:1.2rem; color:var(--ink2); font-size:.95rem}
.gm-trivia-list li{margin:.45rem 0}
.gm-reveal{background:none; border:1.5px solid var(--line); border-radius:999px; padding:.15rem .6rem; font-size:.78rem; font-weight:700; color:var(--blue); cursor:pointer; margin-left:.35rem}
.gm-reveal:hover{border-color:var(--blue)}
.gm-answer{font-weight:700; color:var(--navy); margin-left:.4rem}

/* driver rule callout on games page */
.gm-drivernote{display:flex; gap:.8rem; align-items:flex-start; max-width:640px; margin:1.4rem auto 0; background:var(--coral-soft); border:1px solid #F3C2C5; border-radius:var(--radius-sm); padding:.9rem 1.1rem}
.gm-drivernote .gm-ic{color:#b3444a; margin-top:.2rem; width:1.3em; height:1.3em}
.gm-drivernote p{margin:0; font-size:.92rem; color:#7c3136}
.gm-drivernote b{color:#b3444a}
.gm-hero__actions{display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin:1.1rem auto .6rem}
.gm-access-note,.billing-status{max-width:680px; margin:.75rem auto 0; border-radius:var(--radius-sm); padding:.7rem .9rem; font-weight:800; text-align:center}
.gm-access-note,.billing-status[data-tone="success"]{background:#DBF3E9; color:#1f7a56; border:1px solid #bfe8dc}
.billing-status[data-tone="info"]{background:var(--ptp-mist); color:var(--ptp-teal-ink); border:1px solid #bfe8dc}
.billing-status[data-tone="error"]{background:var(--coral-soft); color:#b3444a; border:1px solid #F3C2C5}
.gm-paywall{max-width:720px; margin:0 auto 1.4rem; background:#fff; border:2px solid var(--ptp-teal); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:clamp(1.2rem,4vw,1.8rem); text-align:center}
.gm-paywall h3{font-size:1.35rem; margin:.55rem 0 .35rem}
.gm-paywall p{color:var(--ink2); margin:.2rem auto 1rem; max-width:54ch}
.gm-paywall .btn{min-width:min(100%,230px)}

/* homepage game-mode teaser */
.gm-teaser{display:grid; gap:1.4rem; grid-template-columns:1.1fr .9fr; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:clamp(1.4rem,4vw,2.2rem)}
.gm-teaser h3{font-size:clamp(1.3rem,3vw,1.7rem); margin:.2rem 0 .5rem}
.gm-teaser p{color:var(--ink2); margin:0 0 1rem}
.gm-teaser .gm-tierbadge{margin-bottom:.4rem}
.gm-teaser__art{display:grid; place-items:center}
.gm-teaser__art svg{width:100%; max-width:280px; height:auto; color:var(--blue)}
@media(max-width:720px){ .gm-teaser{grid-template-columns:1fr} .gm-teaser__art{order:-1} .gm-teaser__art svg{max-width:200px} }

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .btn--primary:hover{transform:none} }

/* ==========================================================================
   Conversion layer (Brand v3) — split-hero support, plans, phone mockups,
   Game-Mode-only strip, final CTA, signup + reward beat.
   ========================================================================== */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.cta-note{margin:.9rem 0 0; font-size:.88rem; color:var(--ink2); font-weight:600}
.cta-note b{color:var(--ptp-navy)}

/* chip colour variants (trust cards) */
.chip--teal{background:var(--ptp-mist); color:var(--ptp-teal-ink)}
.chip--seafoam{background:#DBF3E9; color:#1f7a56}
.chip--gold{background:var(--gold-soft); color:#8a6410}
.chip--coral{background:var(--coral-soft); color:#c24b4b}

/* plan ladder: Free → Game Mode $3/mo → Traveler */
.traveler{background:linear-gradient(180deg,var(--ptp-cream), var(--ptp-mist))}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:960px; margin:0 auto; align-items:stretch}
.plan{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.4rem; box-shadow:var(--shadow); display:flex; flex-direction:column}
.plan--feature{border:2px solid var(--ptp-teal); box-shadow:var(--shadow-lg)}
.plan__tag{align-self:flex-start; font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--ptp-teal); border-radius:999px; padding:.3rem .8rem; margin-bottom:.7rem}
.plan__tag--free{background:var(--ptp-mist); color:var(--ptp-teal-ink)}
.plan__tag--gold{background:var(--ptp-gold); color:#6a4d05}
.plan__name{font-size:1.25rem; margin:0 0 .1rem}
.plan__price{font-family:var(--d); font-weight:900; color:var(--ptp-navy); font-size:1.7rem; line-height:1; margin:.3rem 0 .9rem}
.plan__price span{font-family:var(--b); font-weight:700; font-size:.85rem; color:var(--ink3)}
.plan__price--free{color:var(--ptp-teal-ink)}
.plan__list{list-style:none; margin:0 0 1.2rem; padding:0; display:flex; flex-direction:column; gap:.5rem; flex:1}
.plan__list li{position:relative; padding-left:1.6rem; color:var(--ink2); font-size:.94rem}
.plan__list li::before{content:""; position:absolute; left:0; top:.25em; width:1.05rem; height:1.05rem; border-radius:50%;
  background:var(--ptp-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%2316B5A6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat}
.plan .btn{justify-content:center; width:100%; font-size:.92rem}
.plan__note{margin:.6rem 0 0; font-size:.8rem; color:var(--ink3); text-align:center}
.plans-foot{text-align:center; margin:1.3rem auto 0; max-width:60ch; color:var(--ink2); font-size:.98rem}
.plans-foot b{color:var(--ptp-navy)}
@media(max-width:820px){ .plans{grid-template-columns:1fr; max-width:420px} }

/* app-quality phone mockups */
.app{background:#fff}
.phones{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; max-width:920px; margin:0 auto}
.phone{margin:0; display:flex; flex-direction:column; align-items:center; gap:.7rem}
.phone__screen{width:100%; background:#fff; border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow-lg); padding:1.1rem 1rem 1.2rem; position:relative; overflow:hidden}
.phone__screen::before{content:""; position:absolute; top:.55rem; left:50%; transform:translateX(-50%); width:38px; height:5px; border-radius:999px; background:var(--line)}
.phone__head{display:flex; align-items:center; gap:.4rem; margin:.7rem 0 .5rem; font-family:var(--d); font-weight:800; font-size:.9rem; color:var(--ptp-navy)}
.phone__title{font-family:var(--d); font-weight:800; font-size:1.15rem; margin:.1rem 0 .7rem; color:var(--ptp-navy)}
.phone__sub{font-size:.78rem; color:var(--ink3); margin:-.5rem 0 .7rem; font-weight:700}
.prows{display:flex; flex-direction:column; gap:.55rem}
.prow{display:flex; align-items:flex-start; gap:.6rem; background:var(--ptp-mist); border-radius:14px; padding:.6rem .7rem}
.prow__dot{width:1.1rem; height:1.1rem; border-radius:50%; flex:none; margin-top:.15rem}
.dot--teal{background:var(--ptp-teal)} .dot--coral{background:var(--ptp-coral)} .dot--gold{background:var(--ptp-gold)}
.prow b{display:block; font-size:.86rem; color:var(--ptp-navy); font-weight:800; line-height:1.2}
.prow span{display:block; font-size:.76rem; color:var(--ink2)}
.phone__btn{margin-top:.8rem; text-align:center; background:var(--ptp-teal); color:#fff; font-weight:800; font-size:.85rem; border-radius:999px; padding:.6rem}
.gchips{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem}
.gchip{font-size:.72rem; font-weight:800; border-radius:999px; padding:.3rem .6rem}
.gchip--calm{background:#DBF3E9; color:#1f7a56} .gchip--engage{background:var(--ptp-mist); color:var(--ptp-teal-ink)}
.phone__progress{background:var(--ptp-cream); border:1px solid var(--line); border-radius:14px; padding:.7rem .8rem; margin-bottom:.7rem}
.phone__progress-top{display:flex; justify-content:space-between; align-items:baseline; font-size:.8rem; font-weight:800; color:var(--ptp-navy); margin-bottom:.45rem}
.phone__progress-top b{color:var(--ptp-teal); font-family:var(--d); font-size:1rem}
.phone__progress-cap{display:block; font-size:.72rem; color:var(--ink2); margin-top:.4rem}
.pbar--lg{height:11px}
.phone figcaption{font-family:var(--d); font-weight:800; color:var(--ptp-navy); font-size:.95rem}
@media(max-width:760px){ .phones{grid-template-columns:1fr; max-width:340px} }

/* game-mode teaser band */
.games-band{background:linear-gradient(180deg,var(--ptp-mist), var(--ptp-cream))}
.gm-teaser__hook{background:#fff; border:1px solid var(--line); border-left:4px solid var(--ptp-gold); border-radius:var(--radius-sm);
  padding:.7rem .9rem; color:var(--ptp-navy); font-size:.95rem; margin:0 0 1rem}
.gm-teaser__hook b{color:var(--ptp-teal-ink)}
.gm-teaser__btns{display:flex; gap:.6rem; flex-wrap:wrap}
.gm-teaser__art svg{color:var(--ptp-navy)}

/* proof */
.proof{background:linear-gradient(180deg,var(--ptp-cream), var(--ptp-mist))}
.founder-note{max-width:680px; margin:0 auto 2rem; background:#fff; border:1px solid var(--line);
  border-left:5px solid var(--ptp-coral); border-radius:0 var(--radius) var(--radius) 0; padding:1.6rem 1.8rem; box-shadow:var(--shadow)}
.founder-note p{margin:0; font-size:1.12rem; color:var(--ptp-navy); font-weight:600; line-height:1.6}
.founder-note__by{margin-top:.9rem !important; font-size:.9rem !important; color:var(--ink3) !important; font-weight:700 !important}
.proof__quotes{margin-top:0}
.quote{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.4rem; box-shadow:var(--shadow)}
.quote p{margin:0 0 .7rem; color:var(--ptp-navy); font-weight:700; font-size:1rem; line-height:1.5}
.quote cite{color:var(--ink3); font-size:.82rem; font-style:normal; font-weight:700}
.proof__advisor{text-align:center; color:var(--ink3); font-size:.85rem; margin:1.6rem auto 0; max-width:52ch}

/* final CTA — photo band */
.final{position:relative; overflow:hidden; isolation:isolate}
.final__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.final__veil{position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(13,40,69,.82) 0%, rgba(13,40,69,.62) 55%, rgba(13,40,69,.42) 100%)}
.final__inner{padding:clamp(3rem,8vw,5.5rem) 0; max-width:620px}
.final__inner h2{color:#fff; font-size:clamp(1.7rem,4vw,2.5rem); margin:0 0 .5rem}
.final__inner p{color:rgba(255,255,255,.92); font-size:1.1rem; margin:0 0 1.4rem; max-width:44ch}
.final__inner .actions{display:flex; gap:.7rem; flex-wrap:wrap}

/* update capture */
.signup{background:var(--ptp-mist)}
.reserve{max-width:840px; margin:0 auto}
.reserve__form{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:clamp(1.4rem,4vw,2rem)}
.reserve__head .gm-tierbadge{margin-bottom:.6rem}
.reserve__head h3{font-size:1.4rem; margin:0 0 .3rem}
.reserve__head p{color:var(--ink2); margin:0 0 1.2rem; font-size:.98rem}
.reserve__head b{color:var(--ptp-navy)}
.reserve__row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.reserve__row--email{grid-template-columns:1.6fr 1fr}
.reserve__row + .reserve__row{margin-top:.8rem}
.reserve__field{display:flex; flex-direction:column; gap:.3rem}
.reserve__field span{font-size:.8rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--ink3)}
.reserve__field em{font-style:normal; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ink3)}
.reserve__field input, .reserve__field select{font-family:var(--b); font-weight:600; font-size:1rem; color:var(--ptp-navy); background:var(--ptp-cream);
  border:2px solid var(--line); border-radius:var(--radius-sm); padding:.75rem .9rem; width:100%}
.reserve__field input:focus, .reserve__field select:focus{outline:none; border-color:var(--ptp-teal); background:#fff}
.reserve__submit{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.1rem}
.reserve__checks{display:flex; flex-direction:column; gap:.55rem; margin-top:1rem}
.reserve__check{display:flex; align-items:flex-start; gap:.55rem; color:var(--ink2); font-size:.88rem; font-weight:700}
.reserve__check input{margin-top:.2rem; width:1.05rem; height:1.05rem; accent-color:var(--ptp-teal)}
.reserve__submit .btn[disabled]{opacity:.7; cursor:wait; transform:none; box-shadow:none}
.reserve__fineprint{font-size:.8rem; color:var(--ink3)}
.reserve__error{color:#c0392b; font-weight:700; font-size:.9rem; margin:.8rem 0 0}
.reserve__ok{background:#fff; border:2px solid var(--ptp-seafoam); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:clamp(1.8rem,4vw,2.6rem); text-align:center}
.reserve__ok-ic{display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; background:#DBF3E9; color:var(--ptp-teal-ink); margin:0 auto .8rem}
.reserve__ok h3{font-size:1.45rem; margin:0 0 .4rem}
.reserve__ok p{color:var(--ink2); margin:0 auto; max-width:44ch}
@media(max-width:640px){ .reserve__row{grid-template-columns:1fr} }

/* footer brand lockup */
footer.site .wrap{align-items:flex-start}
.foot__brand{display:flex; flex-direction:column; gap:.4rem}
.brand--foot .brand__name{color:#fff; font-size:1.2rem}
.brand--foot .brand__name span{color:#fff}
.brand--foot .brand__t{color:var(--ptp-seafoam)}
.foot__promise{margin:0; color:rgba(255,255,255,.7); font-weight:700; font-size:.9rem}
footer.site .flinks{display:flex; flex-wrap:wrap; gap:.2rem 0}

/* in-coach conversion bridge (shown after the matched move) */
.coach__bridge{border-top:1px solid var(--line); margin-top:1rem; padding-top:1rem; display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; background:var(--ptp-mist); margin-left:-.4rem; margin-right:-.4rem; padding:1rem; border-radius:14px; border-top:0}
.coach__bridge p{margin:0; font-size:.95rem; color:var(--ink2)}
.coach__bridge b{color:var(--ptp-navy)}
.coach__bridge .btn{font-size:.92rem}

/* reward beat — confetti on signup success (honors reduced-motion) */
.ptp-burst{position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden}
.ptp-burst i{position:absolute; width:10px; height:10px; border-radius:2px; opacity:.95; animation:ptp-fall 1100ms cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ptp-fall{0%{transform:translateY(0) rotate(0); opacity:1}100%{transform:translateY(70vh) rotate(360deg); opacity:0}}
@media (prefers-reduced-motion: reduce){ .ptp-burst{display:none} }

/* ambient wash: content bands transparent so the fixed illustration shows through
   (placed last so it wins over the per-section background rules above) */
.coach, .traveler, .app, .games-band, .proof, .signup{background:transparent}
.section-head p{color:var(--ptp-navy)}
.section-head h2{text-shadow:0 1px 0 rgba(255,247,232,.6)}