/* ✈️ PlaneHopper — standalone travel product page. Boarding-pass / departure-board theme,
   deliberately distinct from the cream/indigo study app. */
:root{
  --ph-navy:#12233f; --ph-navy2:#1d3a63; --ph-ink:#1f2733; --ph-muted:#5b6472; --ph-hint:#8a93a2;
  --ph-sky:#eef6ff; --ph-sky2:#dcecff; --ph-amber:#f5a524; --ph-amber-d:#c9800f;
  --ph-blue:#2f6fe0; --ph-blue-d:#2456b8; --ph-teal:#12a18a; --ph-red:#e0463c;
  --ph-line:#e4e9f1; --ph-line2:#d3dae6; --ph-card:#fff;
  --ph-ok:#e6f4e4; --ph-okink:#2c6d18; --ph-bad:#fbe9e9; --ph-badink:#a32d2d; --ph-info:#e9eefb; --ph-infoink:#3742a3;
  --ph-r:16px; --ph-r-sm:12px; --ph-pill:999px;
  --ph-sh:0 1px 2px rgba(20,30,60,.05),0 12px 30px -18px rgba(20,30,60,.34);
  --ph-sans:-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:linear-gradient(180deg,var(--ph-sky),var(--ph-sky2) 240px,#f4f7fb 620px);min-height:100vh;color:var(--ph-ink);font-family:var(--ph-sans);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
.ph-rj{font-weight:700;color:var(--ph-ink);letter-spacing:-.005em}
.ph-kn{color:var(--ph-muted);font-size:.82em;font-weight:500}
.ph-spk{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;border:1px solid var(--ph-line2);background:#fff;border-radius:50%;font-size:12px;cursor:pointer;color:var(--ph-muted);vertical-align:middle}
.ph-spk:hover{border-color:var(--ph-blue);color:var(--ph-blue)}
.ph-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:700;font-size:14px;padding:10px 16px;border-radius:var(--ph-pill);border:1px solid var(--ph-line2);background:#fff;color:var(--ph-ink);cursor:pointer;box-shadow:var(--ph-sh);transition:.15s}
.ph-btn:hover{transform:translateY(-1px)}
.ph-btn.primary{background:linear-gradient(160deg,var(--ph-blue),var(--ph-blue-d));border-color:transparent;color:#fff}
.ph-btn.ghost{box-shadow:none;background:transparent;border-color:transparent;color:var(--ph-muted)}
.ph-btn.sm{padding:8px 13px;font-size:13px}

/* departure-board top bar */
.ph-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:linear-gradient(90deg,var(--ph-navy),var(--ph-navy2));color:#fff;position:sticky;top:0;z-index:30;box-shadow:0 2px 16px rgba(10,20,40,.28)}
.ph-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:19px}
.ph-logo{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;background:var(--ph-amber);color:var(--ph-navy);border-radius:9px;font-size:17px;transform:rotate(-8deg)}
.ph-wordmark{font-weight:600;letter-spacing:.01em}
.ph-wordmark b{font-weight:800;color:var(--ph-amber)}
.ph-top-r{display:flex;gap:8px}
.ph-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:var(--ph-pill);padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.ph-offbadge{cursor:default;background:rgba(23,138,83,.9);border-color:transparent}
.ph-chip:hover{background:rgba(255,255,255,.22)}

/* hero + boarding pass */
.ph-hero{display:flex;gap:34px;align-items:center;max-width:1200px;margin:0 auto;padding:30px 26px 8px;flex-wrap:wrap}
.ph-hero-txt{flex:1;min-width:300px}
.ph-hero-txt h1{font-size:34px;margin:6px 0 12px;color:var(--ph-navy);letter-spacing:-.02em;line-height:1.12}
.ph-hero-txt p{margin:0;color:var(--ph-muted);font-size:16.5px;max-width:60ch}
.ph-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ph-amber-d)}
.ph-boarding{background:#fff;border:1px solid var(--ph-line);border-radius:18px;box-shadow:var(--ph-sh);padding:20px 24px;width:400px;max-width:100%;position:relative;overflow:hidden;animation:ph-float 5.5s ease-in-out infinite;will-change:transform}
@keyframes ph-float{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-9px) rotate(.6deg)}}
@media(prefers-reduced-motion:reduce){.ph-boarding{animation:none}}
.ph-boarding::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(var(--ph-amber),var(--ph-red))}
.ph-bp-top{display:flex;justify-content:space-between;align-items:center}
.ph-bp-tag{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--ph-amber-d);background:#fff6e6;padding:3px 9px;border-radius:6px}
.ph-bp-flight{font-weight:800;color:var(--ph-navy);letter-spacing:.06em}
.ph-bp-route{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 12px;padding:13px 0;border-top:2px dashed var(--ph-line2);border-bottom:2px dashed var(--ph-line2)}
.ph-bp-city{text-align:center}
.ph-bp-code{font-size:30px;font-weight:800;color:var(--ph-navy);letter-spacing:.02em;line-height:1}
.ph-bp-sub{font-size:11px;color:var(--ph-muted);margin-top:3px}
.ph-bp-plane{flex:1;max-width:118px;padding:0 8px}
.ph-bp-path{display:block;width:100%;height:auto;overflow:visible}
.ph-bp-path path{animation:ph-dash 2.6s linear infinite}
.ph-bp-jet{transform-box:fill-box;transform-origin:center;animation:ph-jet 3.2s ease-in-out infinite}
@keyframes ph-dash{to{stroke-dashoffset:-26}}
@keyframes ph-jet{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@media(prefers-reduced-motion:reduce){.ph-bp-path path,.ph-bp-jet{animation:none}}
.ph-bp-foot{display:flex;justify-content:space-between;font-size:12px;color:var(--ph-muted)}
.ph-bp-foot b{color:var(--ph-ink)}

.ph-body{max-width:1200px;margin:0 auto;padding:12px 26px 44px}

/* segmented control */
.ph-seg{display:flex;width:fit-content;margin:0 auto 22px;background:#fff;border:1px solid var(--ph-line);border-radius:var(--ph-pill);padding:4px;box-shadow:var(--ph-sh);gap:4px}
.ph-seg-b{border:none;background:transparent;padding:9px 20px;border-radius:var(--ph-pill);font:inherit;font-weight:700;color:var(--ph-muted);cursor:pointer;transition:.15s}
.ph-seg-b.on{background:var(--ph-navy);color:#fff}

/* scenario category grid */
.ph-cat{margin:0 0 22px}
.ph-cat-h{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.ph-cat-em{font-size:26px;flex:none}
.ph-cat-l{font-weight:800;font-size:18px;color:var(--ph-navy);letter-spacing:-.01em}
.ph-cat-b{font-size:13px;color:var(--ph-muted)}
.ph-cat-n{margin-left:auto;flex:none;font-size:12px;font-weight:800;color:var(--ph-muted);background:#fff;border:1px solid var(--ph-line2);border-radius:var(--ph-pill);min-width:24px;text-align:center;padding:2px 8px}
.ph-scard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.ph-scard{display:flex;align-items:center;gap:11px;text-align:left;font:inherit;background:#fff;border:1px solid var(--ph-line);border-radius:var(--ph-r-sm);padding:13px 14px;cursor:pointer;box-shadow:var(--ph-sh);transition:.15s}
.ph-scard:hover{transform:translateY(-2px);border-color:var(--ph-blue)}
.ph-scard-em{font-size:23px;flex:none}
.ph-scard-t{font-weight:700;font-size:15px;flex:1;letter-spacing:-.01em}
.ph-scard-go{color:var(--ph-blue);font-weight:800;flex:none}

/* scenario page */
.ph-scenario{max-width:920px}
.ph-crumb{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.ph-back{border:none;background:#fff;border:1px solid var(--ph-line2);border-radius:var(--ph-pill);padding:7px 14px;font:inherit;font-weight:600;color:var(--ph-muted);cursor:pointer;box-shadow:var(--ph-sh)}
.ph-crumb-t{font-weight:800;color:var(--ph-navy);font-size:16px}
.ph-sec{background:#fff;border:1px solid var(--ph-line);border-radius:var(--ph-r);padding:18px;box-shadow:var(--ph-sh);margin:0 0 16px}
.ph-sec-h{display:flex;align-items:baseline;gap:9px;margin:0 0 14px;flex-wrap:wrap}
.ph-sec-ic{font-size:20px}
.ph-sec-h h2{margin:0;font-size:18px;color:var(--ph-navy);letter-spacing:-.01em}
.ph-sec-sub{font-size:12.5px;color:var(--ph-hint);font-weight:600}
.ph-golden{display:flex;gap:13px;align-items:flex-start;background:linear-gradient(150deg,#fff6e6,#ffeecb);border:1px solid #f0d79a;border-radius:var(--ph-r);padding:15px 17px;box-shadow:var(--ph-sh);margin:0 0 16px}
.ph-golden-ic{font-size:24px;flex:none}
.ph-golden-l{font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ph-amber-d);margin-bottom:3px}
.ph-golden p{margin:0;font-size:15.5px;line-height:1.55}

/* say-this rows (romaji lead, kana small) */
.ph-hacks{display:flex;flex-direction:column;gap:8px}
.ph-prow{background:#f8faff;border:1px solid var(--ph-line);border-radius:var(--ph-r-sm);padding:11px 14px}
.ph-prow-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ph-prow-main .ph-rj{font-size:19px}
.ph-prow-en{color:var(--ph-ink);font-size:15px;font-weight:500;margin-top:3px}
.ph-prow .ph-kn{color:var(--ph-hint);font-size:13px;margin-top:1px;display:block}

/* keigo wall */
.ph-wall{display:flex;flex-direction:column;gap:12px}
.ph-wcard{background:#f7f9fc;border:1px solid var(--ph-line);border-radius:var(--ph-r-sm);padding:13px 15px}
.ph-wtag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;padding:2px 9px;border-radius:var(--ph-pill);margin-bottom:6px}
.ph-wtag.hear{background:var(--ph-info);color:var(--ph-infoink)}
.ph-wtag.say{background:var(--ph-ok);color:var(--ph-okink)}
.ph-wline{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ph-wline .ph-rj{font-size:18px}
.ph-wcard .ph-kn{font-size:13px;margin-top:2px;display:block;color:var(--ph-hint)}
.ph-wen{color:var(--ph-ink);font-size:15px;font-weight:500;margin-top:2px}
.ph-warrow{color:var(--ph-teal);font-size:16px;font-weight:800;margin:7px 0 5px}
.ph-wreply{border-top:1px dashed var(--ph-line2);padding-top:9px}

/* quick-fire */
.ph-qf{display:flex;flex-direction:column;gap:14px}
.ph-qcard{background:#f8faff;border:1px solid var(--ph-line);border-radius:var(--ph-r-sm);padding:14px 15px}
.ph-qnpc{display:flex;gap:11px;align-items:flex-start}
.ph-avatar{width:54px;height:54px;flex:none;border-radius:50%;background:#eaf1fb;border:1px solid var(--ph-line2)}
.ph-qbub{position:relative;background:#fff;border:1px solid var(--ph-line2);border-radius:12px;padding:10px 12px;flex:1}
.ph-qbub::before{content:"";position:absolute;left:-7px;top:16px;width:12px;height:12px;background:#fff;border-left:1px solid var(--ph-line2);border-bottom:1px solid var(--ph-line2);transform:rotate(45deg)}
.ph-qbub .ph-rj{font-size:17px}
.ph-qbub .ph-en{color:var(--ph-ink);font-size:14.5px;font-weight:500;margin-top:2px}
.ph-qbub .ph-kn{font-size:12.5px;display:block;margin-top:1px;color:var(--ph-hint)}
.ph-qen{color:var(--ph-ink);font-size:14.5px;font-weight:500;margin-top:2px}
.ph-qhint{margin:11px 0 9px;font-size:13.5px;color:#2c6d18;background:#eef7e8;border-radius:9px;padding:7px 11px}
.ph-qacts{display:flex;gap:8px;flex-wrap:wrap}
.ph-qout{margin-top:10px}
.ph-qout:not(.show){display:none}
.ph-qreveal{font-size:17px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ph-qfb{border-radius:9px;padding:9px 12px;font-size:14px}
.ph-qfb.ok{background:var(--ph-ok);color:var(--ph-okink)}
.ph-qfb.bad{background:var(--ph-bad);color:var(--ph-badink)}
.ph-qfb.info{background:var(--ph-info);color:var(--ph-infoink)}

/* animated scene stage */
.ph-stage{position:relative;max-width:540px;margin:0 auto}
.ph-svg{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--ph-line2);box-shadow:var(--ph-sh);background:#faf7f1}
.ph-bubble{position:absolute;top:5%;max-width:46%;background:#fff;border:1.5px solid var(--ph-navy);border-radius:14px;padding:7px 11px;opacity:0;transform:translateY(8px) scale(.95);transition:opacity .18s,transform .18s;pointer-events:none;box-shadow:0 4px 12px rgba(20,30,60,.2)}
.ph-bubble .ph-rj{display:block;font-size:15px;line-height:1.2}
.ph-bubble .ph-en{display:block;font-size:11.5px;color:var(--ph-muted);font-weight:500;margin-top:2px;line-height:1.25}
.ph-bubble.left{left:3%}
.ph-bubble.right{right:3%;text-align:right}
.ph-bubble.show{opacity:1;transform:none}
.ph-bubble::after{content:"";position:absolute;bottom:-8px;width:14px;height:14px;background:#fff;border-right:1.5px solid var(--ph-navy);border-bottom:1.5px solid var(--ph-navy);transform:rotate(45deg)}
.ph-bubble.left::after{left:22px}
.ph-bubble.right::after{right:22px}
.ph-nametag{position:absolute;bottom:5%;font-size:11px;font-weight:800;background:rgba(255,255,255,.92);border:1px solid var(--ph-line2);padding:2px 9px;border-radius:var(--ph-pill);color:var(--ph-ink)}
.ph-nametag.left{left:3%}
.ph-nametag.right{right:3%}
.ph-scene-cap{margin:12px 0 0;min-height:40px;font-size:14px;color:var(--ph-muted);text-align:center;line-height:1.5}
.ph-cap-who{display:inline-block;font-weight:800;color:var(--ph-ink);margin-right:8px}
.ph-cap-en{display:inline-block;color:var(--ph-hint)}
.ph-cap-kn{display:inline-block;color:var(--ph-muted);font-size:15px;font-weight:600}
.ph-scene-ctrl{display:flex;gap:8px;justify-content:center;margin-top:10px}
/* mouth (smile ⇄ open) + blink — inner-element transforms only */
.ph-mouth{transform-box:fill-box;transform-origin:center;transform:scaleY(0)}
.ph-fig.ph-talk .ph-smile{opacity:0}
.ph-fig.ph-talk .ph-mouth{animation:ph-talk .26s steps(2,jump-none) infinite alternate}
@keyframes ph-talk{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.ph-eyes{transform-box:fill-box;transform-origin:center}
.ph-fig .ph-eyes{animation:ph-blink 5.4s infinite}
.ph-fig.ph-left .ph-eyes{animation-delay:2s}
@keyframes ph-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@media(prefers-reduced-motion:reduce){.ph-fig.ph-talk .ph-mouth{animation:none;transform:scaleY(.6)}.ph-fig.ph-talk .ph-smile{opacity:0}.ph-fig .ph-eyes{animation:none}}

/* survival kit */
.ph-kit-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 18px}
.ph-kit-tab{border:1px solid var(--ph-line2);background:#fff;border-radius:var(--ph-pill);padding:8px 15px;font:inherit;font-weight:700;color:var(--ph-muted);cursor:pointer;box-shadow:var(--ph-sh)}
.ph-kit-tab.on{background:var(--ph-navy);color:#fff;border-color:transparent}
.ph-kit-h{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.ph-kit-em{font-size:26px}
.ph-kit-l{font-weight:800;font-size:20px;color:var(--ph-navy)}
.ph-kit-b{font-size:13.5px;color:var(--ph-muted)}
.ph-chart{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.ph-wchip{background:#fff;border:1px solid var(--ph-line);border-radius:var(--ph-r-sm);padding:12px 13px;box-shadow:var(--ph-sh)}
.ph-wchip-top{display:flex;align-items:center;gap:7px}
.ph-wchip-em{font-size:17px}
.ph-wchip-top .ph-rj{font-size:18px;flex:1}
.ph-wchip-en{color:var(--ph-ink);font-weight:600;font-size:13.5px;margin-top:3px}
.ph-wchip .ph-kn{font-size:15px;display:block;margin-top:1px}
.ph-w-note{font-size:11.5px;color:var(--ph-hint);margin-top:5px;line-height:1.4}
/* colours */
.ph-colours{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.ph-swatch{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--ph-line);border-radius:var(--ph-r-sm);padding:10px 12px;box-shadow:var(--ph-sh)}
.ph-dot{width:30px;height:30px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.ph-sw-top{display:flex;align-items:center;gap:6px}
.ph-sw-top .ph-rj{font-size:16px}
.ph-sw-en{color:var(--ph-muted);font-size:12.5px}
.ph-swatch .ph-kn{font-size:14px;display:block}
.ph-colour-note{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;background:#eef6ff;border:1px solid #cfe2fb;border-radius:var(--ph-r-sm);padding:13px 15px;font-size:14px;line-height:1.5}
.ph-cn-ic{font-size:22px;flex:none}
/* hacks — category tiles (drill-down) */
.ph-kit-lead{text-align:center;color:var(--ph-muted);font-size:14px;margin:0 0 16px}
.ph-htiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.ph-htile{display:flex;align-items:center;gap:12px;text-align:left;font:inherit;background:#fff;border:1px solid var(--ph-line);border-radius:var(--ph-r);padding:16px 16px;cursor:pointer;box-shadow:var(--ph-sh);transition:.15s}
.ph-htile:hover{transform:translateY(-2px);border-color:var(--ph-amber);box-shadow:0 10px 26px -14px rgba(30,40,70,.34)}
.ph-htile-em{font-size:28px;flex:none}
.ph-htile-tx{flex:1;display:flex;flex-direction:column}
.ph-htile-t{font-weight:800;font-size:15.5px;color:var(--ph-navy);letter-spacing:-.01em}
.ph-htile-n{font-size:12.5px;color:var(--ph-muted);margin-top:2px}
.ph-htile-go{color:var(--ph-blue);font-weight:800;flex:none}
/* hacks (a single opened section) */
.ph-hsection{margin:0 0 22px}
.ph-hsection-h{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ph-navy);font-size:16px;margin:0 0 11px;padding-bottom:7px;border-bottom:2px solid var(--ph-line)}
.ph-hsection-em{font-size:20px}
.ph-hacklist{display:flex;flex-direction:column;gap:12px}
.ph-hackcard{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--ph-line);border-radius:var(--ph-r-sm);padding:15px 16px;box-shadow:var(--ph-sh)}
.ph-hack-ic{font-size:26px;flex:none;line-height:1;margin-top:2px}
.ph-hack-t{font-weight:800;color:var(--ph-navy);font-size:16px;margin-bottom:3px}
.ph-hackcard p{margin:0;color:var(--ph-muted);font-size:14.5px;line-height:1.55}
.ph-hack-phrase{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;background:#f5f8ff;border:1px solid var(--ph-line);border-radius:9px;padding:7px 11px}
.ph-hack-phrase .ph-rj{font-size:15.5px}
.ph-hack-phrase .ph-kn{font-size:13px}
.ph-empty{text-align:center;color:var(--ph-muted);padding:40px}

/* animated etiquette demos */
.ph-demo{background:linear-gradient(160deg,#f2f7ff,#eef2fb);border:1px solid #d9e3f3;border-radius:var(--ph-r);padding:14px 15px;margin:0 0 16px}
.ph-demo-h{font-weight:800;color:var(--ph-navy);font-size:15px;margin-bottom:10px}
.ph-demo-stage{max-width:420px;margin:0 auto}
.ph-demo-svg{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--ph-line2);background:#f3f7ff;box-shadow:var(--ph-sh)}
.ph-demo-cap{margin:10px 0 0;min-height:34px;text-align:center;font-size:14px;color:var(--ph-ink);line-height:1.5}
.ph-demo-ctrl{display:flex;justify-content:center;margin-top:8px}
/* onsen 4-step strip (auto-highlights in sequence) */
.ph-osteps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ph-ostep{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--ph-line);border-radius:var(--ph-r-sm);padding:11px 12px;animation:ph-ostep 6.4s ease-in-out infinite}
.ph-ostep-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--ph-navy);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.ph-ostep-em{font-size:22px;flex:none}
.ph-ostep-t{font-size:13.5px;color:var(--ph-ink);line-height:1.35}
@keyframes ph-ostep{0%,100%{background:#fff;border-color:var(--ph-line)}8%,20%{background:#fff7e9;border-color:var(--ph-amber);transform:translateY(-2px)}28%{background:#fff;border-color:var(--ph-line)}}
@media(prefers-reduced-motion:reduce){.ph-ostep{animation:none}}

.ph-foot{max-width:1200px;margin:10px auto 0;padding:22px 26px 30px;border-top:1px solid var(--ph-line);color:var(--ph-muted);font-size:13.5px;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}
.ph-foot a{color:var(--ph-blue);font-weight:600;text-decoration:none}

@media(max-width:640px){
  .ph-hero{padding:20px 16px 6px;gap:18px}
  .ph-hero-txt h1{font-size:24px}
  .ph-boarding{width:100%}
  .ph-body{padding:8px 16px 36px}
  .ph-scard-grid{grid-template-columns:1fr 1fr}
  .ph-scard-t{font-size:13.5px}
  .ph-bubble{font-size:13px;max-width:47%;padding:6px 8px}
  .ph-bubble .ph-rj{font-size:13px}
  .ph-bubble .ph-en{font-size:10.5px}
  .ph-chart{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){.ph-scard-grid,.ph-chart{grid-template-columns:1fr}}

/* ===== Sneak-peek freemium: free scenarios, padlocked rest, launch popup, "Back soon" screen ===== */
.ph-peek{display:flex;align-items:center;gap:12px;background:linear-gradient(100deg,#fff,#f2f7ff);border:1px solid var(--ph-line);border-left:4px solid var(--ph-amber);border-radius:var(--ph-r-sm);padding:12px 16px;margin:0 0 18px;box-shadow:var(--ph-sh)}
.ph-peek-ic{font-size:22px;flex:none}
.ph-peek-t{font-weight:800;color:var(--ph-navy);font-size:14.5px;letter-spacing:-.01em}
.ph-peek-b{font-size:13px;color:var(--ph-muted)}
/* LOCKED scenarios stay COLOURFUL + tappable (curiosity → the friendly "get notified" popup) — NOT greyed
   out, so people aren't discouraged from tapping. Identified only by a small amber lock chip. */
.ph-scard.ph-locked{background:#fff;border-color:var(--ph-line)}
.ph-scard.ph-locked .ph-scard-t{color:var(--ph-ink)}
.ph-scard.ph-locked:hover{transform:translateY(-2px);border-color:var(--ph-amber)}
.ph-scard-lock{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:11px;border-radius:50%;background:rgba(245,165,36,.16);color:var(--ph-amber-d)}
/* FREE (allowed) scenarios POP: solid green "play" badge + green highlight border, soft glow, accent stripe */
.ph-scard-free{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.03em;color:#fff;background:#178a53;border-radius:var(--ph-pill);padding:4px 11px;line-height:1;white-space:nowrap;box-shadow:0 2px 7px -2px rgba(23,138,83,.55)}
.ph-scard.ph-scard-free-card{position:relative;padding-left:17px;background:linear-gradient(180deg,#fff,#f1faf3);border-color:rgba(23,138,83,.5);box-shadow:var(--ph-sh),0 0 0 1px rgba(23,138,83,.16),0 10px 24px -14px rgba(23,138,83,.6)}
.ph-scard.ph-scard-free-card::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:#178a53}
.ph-scard.ph-scard-free-card .ph-scard-go{color:#178a53}
.ph-scard.ph-scard-free-card:hover{transform:translateY(-2px);border-color:#178a53;box-shadow:var(--ph-sh),0 0 0 1px rgba(23,138,83,.28),0 14px 28px -12px rgba(23,138,83,.65)}
@media(prefers-reduced-motion:no-preference){
  .ph-scard.ph-scard-free-card{animation:ph-free-glow 3.4s ease-in-out infinite}
  @keyframes ph-free-glow{0%,100%{box-shadow:var(--ph-sh),0 0 0 1px rgba(23,138,83,.14),0 8px 22px -14px rgba(23,138,83,.48)}50%{box-shadow:var(--ph-sh),0 0 0 1px rgba(23,138,83,.28),0 12px 26px -12px rgba(23,138,83,.56)}}
}
/* Survival Kit tabs: locked ones still clickable (open the notify popup), marked with a small lock */
.ph-kit-tab.locked{opacity:.92}
.ph-kit-lock{font-size:10px;opacity:.85;margin-left:1px}
/* feature-globally-off screen (styles were formerly injected inline) */
.ph-gate{max-width:560px;margin:0 auto;padding:24px 18px 44px}
.ph-gate-card{background:var(--ph-navy);color:#fff;border-radius:20px;padding:30px 26px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);text-align:center}
.ph-gate-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ph-amber);font-weight:700}
.ph-gate h1{font-size:25px;margin:10px 0 6px;line-height:1.2}
.ph-gate p{color:#c9d4e6;font-size:15px;line-height:1.6;margin:8px 0}
.ph-gate-lock{font-size:44px;margin:2px 0 4px}
.ph-gate-links{margin-top:16px;font-size:14px}.ph-gate-links a{color:var(--ph-amber);text-decoration:none;margin:0 9px}
/* locked-scenario launch popup */
.ph-modal-back{position:fixed;inset:0;z-index:9999;background:rgba(10,20,40,.62);display:flex;align-items:center;justify-content:center;padding:20px;animation:ph-fade .18s ease}
@keyframes ph-fade{from{opacity:0}to{opacity:1}}
.ph-modal-card{position:relative;max-width:420px;width:100%;background:var(--ph-navy);color:#fff;border-radius:20px;padding:32px 28px 26px;text-align:center;box-shadow:0 30px 70px -20px rgba(0,0,0,.7);animation:ph-pop .2s ease}
@keyframes ph-pop{from{transform:translateY(10px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.ph-modal-x{position:absolute;top:12px;right:14px;width:30px;height:30px;border:none;background:rgba(255,255,255,.12);color:#fff;border-radius:50%;font-size:18px;line-height:1;cursor:pointer}
.ph-modal-x:hover{background:rgba(255,255,255,.22)}
.ph-modal-lock{font-size:42px;margin:2px 0 8px}
.ph-modal-eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ph-amber);font-weight:700;margin-bottom:2px}
.ph-modal-card h2{font-size:22px;margin:6px 0 12px;line-height:1.22}
.ph-modal-sub{color:#c9d4e6;font-size:15px;line-height:1.6;margin:0 0 20px}
.ph-modal-sub b{color:#fff}
.ph-modal-btn{display:inline-block;font:inherit;font-size:15px;font-weight:700;padding:13px 26px;border-radius:var(--ph-pill);border:none;background:var(--ph-amber);color:var(--ph-navy);cursor:pointer;text-decoration:none}
.ph-modal-btn:hover{filter:brightness(1.05)}
.ph-modal-links{margin-top:14px;font-size:13.5px}.ph-modal-links a{color:var(--ph-amber);text-decoration:none;margin:0 8px}