/* ============================================================
   Potpourri Apps — Design System
   A warm, credible, playful brand for a kids' learning studio.
   ============================================================ */

:root {
  /* Brand */
  --violet-900:#2b1a52;
  --violet-700:#4c2ea0;
  --violet-600:#5b3bc4;
  --violet-500:#6d4ae0;
  --violet-100:#efe9ff;
  --coral-600:#f0562e;
  --coral-500:#ff6b3d;
  --coral-100:#ffe6dc;
  --gold-500:#ffc24b;
  --teal-500:#0e7c6b;

  /* Neutrals */
  --ink:#1c1830;
  --ink-soft:#4a4560;
  --muted:#726d85;
  --line:#eae6f2;
  --bg:#ffffff;
  --bg-soft:#faf8ff;
  --bg-warm:#fff8f3;

  /* System */
  --radius:18px;
  --radius-lg:28px;
  --radius-sm:12px;
  --shadow-sm:0 2px 8px rgba(43,26,82,.06);
  --shadow:0 14px 40px rgba(43,26,82,.10);
  --shadow-lg:0 30px 70px rgba(43,26,82,.16);
  --maxw:1160px;
  --gutter:clamp(20px,5vw,40px);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Baloo 2','Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

/* Accessibility: keyboard focus + skip link */
:focus-visible{outline:3px solid var(--violet-500);outline-offset:2px;border-radius:4px}
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:200;background:var(--violet-600);color:#fff;
  padding:11px 20px;border-radius:0 0 12px 12px;font-weight:600;transition:top .2s ease;
}
.skip-link:focus{top:0;color:#fff}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
/* overflow-x:hidden on body alone still lets iOS Safari pan sideways when
   transformed elements (e.g. the fanned dashboard phones) spill past the
   viewport. clip forbids the scrolling without creating a scroll container
   (so the sticky header keeps working); browsers without clip support
   ignore this and keep the hidden fallback above. */
html,body{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet-600);text-decoration:none}
a:hover{color:var(--violet-700)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;color:var(--ink);margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5.4vw,4rem);letter-spacing:-.5px}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);letter-spacing:-.4px}
h3{font-size:clamp(1.25rem,2vw,1.55rem)}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(64px,9vw,120px) 0}
.eyebrow{
  font-family:var(--font);font-weight:700;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet-600);margin:0 0 14px;display:inline-block;
}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--ink-soft);max-width:60ch}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;justify-content:center;
  font-family:var(--font);font-weight:600;font-size:1rem;line-height:1;
  padding:15px 28px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--violet-600);color:#fff;box-shadow:0 10px 24px rgba(109,74,224,.32)}
.btn-primary:hover{background:var(--violet-700);color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px rgba(109,74,224,.4)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--violet-500);color:var(--violet-700);transform:translateY(-2px)}
.btn-coral{background:var(--coral-500);color:#fff;box-shadow:0 10px 24px rgba(255,107,61,.32)}
.btn-coral:hover{background:var(--coral-600);color:#fff;transform:translateY(-2px)}
.btn-lg{padding:18px 34px;font-size:1.06rem}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;font-size:1.22rem;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand img{width:38px;height:38px;border-radius:10px}
.brand span b{color:var(--violet-600)}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nav-links a:not(.btn){color:var(--ink-soft);font-weight:500;font-size:.98rem;padding:9px 14px;border-radius:10px;transition:background .15s,color .15s}
.nav-links a:not(.btn):hover{background:var(--violet-100);color:var(--violet-700)}
.nav-cta{margin-left:8px}
.nav-links .btn{padding:11px 20px;font-size:.94rem;flex-shrink:0}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;width:44px;height:44px}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;margin:5px auto;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,110px);overflow:hidden;text-align:center}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(1200px 620px at 78% -12%,var(--violet-100),transparent 62%),
    radial-gradient(900px 560px at 12% 118%,var(--coral-100),transparent 58%),
    var(--bg-soft);
}
/* floating gradient blobs */
.blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(46px);opacity:.55;pointer-events:none}
.blob.b1{width:340px;height:340px;top:-60px;left:-40px;background:radial-gradient(circle,#c9b6ff,transparent 70%);animation:float1 14s ease-in-out infinite}
.blob.b2{width:300px;height:300px;top:120px;right:-50px;background:radial-gradient(circle,#ffc7ad,transparent 70%);animation:float2 17s ease-in-out infinite}
.blob.b3{width:260px;height:260px;bottom:-40px;left:38%;background:radial-gradient(circle,#b9ecdf,transparent 70%);animation:float1 20s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-30px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,26px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.hero-center{max-width:860px;margin:0 auto}
.hero h1{margin-bottom:.35em}
.hero .lead{margin:0 auto 2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px;justify-content:center}
.hero-note{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:.94rem}
.hero-note svg{flex:none}
.badge-pill{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  padding:7px 16px 7px 10px;border-radius:999px;font-size:.85rem;font-weight:600;color:var(--ink-soft);
  box-shadow:var(--shadow-sm);margin-bottom:26px;
}
.badge-pill i{width:9px;height:9px;border-radius:50%;background:var(--teal-500);display:block;box-shadow:0 0 0 0 rgba(14,124,107,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(14,124,107,.45)}70%{box-shadow:0 0 0 9px rgba(14,124,107,0)}100%{box-shadow:0 0 0 0 rgba(14,124,107,0)}}

/* animated gradient headline accent */
.grad{
  background:linear-gradient(100deg,var(--violet-600),var(--coral-500),var(--violet-600));
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hue 6s ease-in-out infinite;
}
@keyframes hue{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* big framed hero showcase */
.hero-stage{margin-top:clamp(40px,6vw,64px);position:relative}
.hero-frame{
  position:relative;max-width:940px;margin:0 auto;border-radius:26px;overflow:visible;
  animation:bob 7s ease-in-out infinite;
}
.hero-frame img{
  width:100%;border-radius:24px;box-shadow:var(--shadow-lg);border:6px solid #fff;
}
.hero-frame::after{
  content:"";position:absolute;inset:-8% -4% -14%;z-index:-1;border-radius:40px;
  background:radial-gradient(closest-side,rgba(109,74,224,.30),transparent 75%);filter:blur(10px);
}
.chip{
  position:absolute;background:#fff;border-radius:16px;padding:12px 18px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:.95rem;
}
.chip b{font-family:var(--display);font-size:1.15rem;line-height:1}
.chip small{color:var(--muted);font-weight:600;font-size:.72rem;display:block}
.chip .dot{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.chip-tl{top:-24px;left:-14px;animation:bob 6s ease-in-out infinite}
.chip-br{bottom:-22px;right:-10px;animation:bob 8s ease-in-out .5s infinite}
.chip-ml{top:44%;right:-30px;animation:bob 7s ease-in-out .8s infinite}

/* ---------- Trust strip ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.trust .wrap{display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,64px);justify-content:center;padding-top:34px;padding-bottom:34px}
.trust-item{display:flex;align-items:center;gap:11px;font-weight:600;color:var(--ink-soft);font-size:.97rem}
.trust-item svg{color:var(--violet-600);flex:none}

/* ---------- Section head ---------- */
.sec-head{max-width:660px;margin:0 auto clamp(40px,6vw,64px)}

/* ---------- Cards / grid ---------- */
.grid{display:grid;gap:26px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#e0d8f5}
.card .ic{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--violet-100);color:var(--violet-600);
}
.card h3{margin-bottom:.4em}
.card p{color:var(--muted);margin:0;font-size:.98rem}

/* ---------- Product showcase ---------- */
.product{scroll-margin-top:88px;padding:clamp(60px,8vw,100px) 0}
.product + .product{border-top:1px solid var(--line)}
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,72px);align-items:center}
.product.rev .product-grid{direction:rtl}
.product.rev .product-grid > *{direction:ltr}
.product-media{position:relative}
.media-frame{position:relative;border-radius:24px}
.media-frame img.shot{width:100%;border-radius:22px;box-shadow:var(--shadow-lg);border:6px solid #fff}
.media-frame::after{
  content:"";position:absolute;inset:-6% -4% -12%;z-index:-1;border-radius:36px;
  background:radial-gradient(closest-side,rgba(109,74,224,.26),transparent 74%);filter:blur(8px);
}
.product.rev .media-frame::after{background:radial-gradient(closest-side,rgba(14,124,107,.24),transparent 74%)}
.media-frame .float-mascot{
  position:absolute;bottom:-26px;left:-26px;width:112px;height:auto;
  filter:drop-shadow(0 12px 22px rgba(43,26,82,.25));animation:bob 6s ease-in-out infinite;
}
.product.rev .media-frame .float-mascot{left:auto;right:-26px}
.media-frame .badge-float{
  position:absolute;top:-18px;right:-12px;background:#fff;border-radius:14px;padding:9px 15px;
  box-shadow:var(--shadow);font-weight:700;font-size:.86rem;display:flex;align-items:center;gap:8px;
  animation:bob 7s ease-in-out .4s infinite;
}
.product.rev .media-frame .badge-float{right:auto;left:-12px}
.product-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.product-head img{width:66px;height:66px;border-radius:16px;box-shadow:var(--shadow-sm)}
.product-head .ver{font-size:.82rem;color:var(--muted);font-weight:600}
.product-head h2{margin:0;font-size:clamp(1.6rem,3vw,2.2rem)}
.age-tag{display:inline-block;background:var(--coral-100);color:var(--coral-600);font-weight:700;font-size:.8rem;padding:5px 12px;border-radius:999px;letter-spacing:.02em;margin-bottom:16px}
.age-tag.ska{background:#d7f0ea;color:var(--teal-500)}
.age-tag.ft{background:#f6ecd4;color:#8a6d1f}
.age-tag.nr{background:#fde3de;color:#b34a4a}
.age-tag.vm{background:#e4defa;color:#5b45a8}
.age-tag.la{background:#dcefe0;color:#1e7a3a}
.age-tag.ja{background:#dcecf9;color:#2b6ea8}
.age-tag.ma{background:#d9eef5;color:#176a94}
.age-tag.pp{background:#e4e4f9;color:#5e60ce}
.age-tag.sb{background:#ede5f9;color:#7a5fbe}
.age-tag.md{background:#e2f0e3;color:#2c6e49}
.feat-list{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:12px}
.feat-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft);font-size:1rem}
.feat-list svg{flex:none;margin-top:3px;color:var(--violet-600)}
.product.rev .feat-list svg{color:var(--teal-500)}
.product.ft .feat-list svg{color:#b78a2e}
.product.ft .media-frame::after{background:radial-gradient(closest-side,rgba(232,180,79,.26),transparent 74%)}
.product.nr .feat-list svg{color:#d25858}
.product.nr .media-frame::after{background:radial-gradient(closest-side,rgba(229,115,115,.24),transparent 74%)}
.product.vm .feat-list svg{color:#6b52c4}
.product.vm .media-frame::after{background:radial-gradient(closest-side,rgba(107,82,196,.24),transparent 74%)}
.product.la .feat-list svg{color:#1e7a3a}
.product.la .media-frame::after{background:radial-gradient(closest-side,rgba(52,168,83,.24),transparent 74%)}
.product.ja .feat-list svg{color:#2e86c1}
.product.ja .media-frame::after{background:radial-gradient(closest-side,rgba(62,144,208,.24),transparent 74%)}
.product.ma .feat-list svg{color:#1f6fb2}
.product.ma .media-frame::after{background:radial-gradient(closest-side,rgba(255,127,80,.22),transparent 74%)}
.product.pp .feat-list svg{color:#5e60ce}
.product.pp .media-frame::after{background:radial-gradient(closest-side,rgba(94,96,206,.24),transparent 74%)}
.product.sb .feat-list svg{color:#7a5fbe}
.product.sb .media-frame::after{background:radial-gradient(closest-side,rgba(240,183,90,.26),transparent 74%)}
.product.md .feat-list svg{color:#4e9b5e}
.product.md .media-frame::after{background:radial-gradient(closest-side,rgba(217,113,78,.24),transparent 74%)}
.stat-row{display:flex;flex-wrap:wrap;gap:26px;margin:6px 0 26px}
.stat b{font-family:var(--display);font-size:1.7rem;color:var(--ink);display:block;line-height:1}
.stat span{font-size:.85rem;color:var(--muted);font-weight:600}

/* ---------- Worlds gallery (auto-scroll reel) ---------- */
.reels{padding:clamp(56px,8vw,104px) 0;background:var(--bg-warm);overflow:hidden}
.reel{position:relative;margin-top:26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reel-track{display:flex;gap:20px;width:max-content;will-change:transform}
.reel.r1 .reel-track{animation:scrollL 52s linear infinite}
.reel.r2 .reel-track{animation:scrollR 104s linear infinite;margin-top:20px}
.reel:hover .reel-track{animation-play-state:paused}
@keyframes scrollL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scrollR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.reel figure{margin:0;width:clamp(300px,34vw,440px);flex:none;position:relative}
.reel figure img{width:100%;border-radius:18px;box-shadow:var(--shadow);border:5px solid #fff}
.reel figcaption{
  position:absolute;left:14px;bottom:14px;background:rgba(28,24,48,.72);color:#fff;
  font-weight:600;font-size:.82rem;padding:6px 13px;border-radius:999px;backdrop-filter:blur(6px);
}

/* ---------- Stats band ---------- */
.stats{background:var(--bg);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-big{padding:14px 10px}
.stat-big .num{
  font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;
  background:linear-gradient(120deg,var(--violet-600),var(--coral-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-big .lbl{display:block;margin-top:10px;color:var(--ink-soft);font-weight:600;font-size:.98rem}
.stat-big .sub{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}

/* ---------- Every device ---------- */
.devices{position:relative;overflow:hidden}
.devices::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(900px 420px at 50% 0%,var(--violet-100),transparent 60%),var(--bg-soft)}
.tablet-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,44px);align-items:start;max-width:1080px;margin:0 auto}
.tablet{
  position:relative;max-width:820px;margin:0 auto;border-radius:30px;background:#14101f;padding:16px;
  box-shadow:var(--shadow-lg);animation:bob 8s ease-in-out infinite;
}
.tablet-duo .tablet:last-child{animation-delay:.9s}
.tablet img{width:100%;border-radius:16px;display:block}
.tablet::after{content:"";position:absolute;inset:-6% -3% -12%;z-index:-1;border-radius:44px;background:radial-gradient(closest-side,rgba(109,74,224,.24),transparent 74%);filter:blur(10px)}
.tablet .badge-float{
  position:absolute;bottom:-18px;right:22px;background:#fff;border-radius:14px;padding:10px 16px;
  box-shadow:var(--shadow);font-weight:700;font-size:.88rem;display:flex;align-items:center;gap:8px;animation:bob 7s ease-in-out .4s infinite;
}
.plat-pills{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:44px}
.plat-pill{
  display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:11px 20px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-sm);
}
.plat-pill svg{flex:none;color:var(--ink)}
.plat-note{text-align:center;color:var(--muted);font-size:.94rem;margin-top:20px}
.plat-note svg{vertical-align:-3px;color:var(--teal-500)}

/* ---------- Parents in control ---------- */
/* overflow-x:clip: the rotated/translated phones spill past the viewport on
   narrow screens and were the source of the page's sideways wiggle. */
.parents{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:clip}
.parents-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,72px);align-items:center}
.parents .in-both{
  display:inline-flex;align-items:center;gap:8px;background:#d7f0ea;color:var(--teal-500);
  font-weight:700;font-size:.8rem;padding:6px 14px;border-radius:999px;margin-bottom:16px;
}
.parents .feat-list svg{color:var(--violet-600)}
.phones{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:0;min-height:520px}
.phone{
  position:relative;width:clamp(210px,26vw,260px);border-radius:34px;background:#14101f;padding:10px;
  box-shadow:var(--shadow-lg);flex:none;
}
.phone img{width:100%;border-radius:26px;display:block}
.phone::before{
  content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:38%;height:17px;background:#14101f;border-radius:0 0 13px 13px;z-index:2;
}
.phone.back{transform:rotate(-6deg) translateX(28%) scale(.9);opacity:.96;z-index:1}
.phone.front{transform:rotate(4deg) translateX(-22%);z-index:3;position:relative}
.phones::after{
  content:"";position:absolute;inset:6% 4% 0;z-index:0;border-radius:40px;
  background:radial-gradient(closest-side,rgba(109,74,224,.22),transparent 72%);filter:blur(10px);
}

/* ---------- Category grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cat-tile{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 14px;text-align:center;
  box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s;
}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#e0d8f5}
.cat-tile .ci{
  width:46px;height:46px;margin:0 auto 12px;border-radius:13px;display:grid;place-items:center;
  background:var(--violet-100);color:var(--violet-600);
}
.cat-tile:nth-child(3n+2) .ci{background:var(--coral-100);color:var(--coral-600)}
.cat-tile:nth-child(3n) .ci{background:#d7f0ea;color:var(--teal-500)}
.cat-tile b{display:block;font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--ink);line-height:1.2}
.cat-tile span{display:block;color:var(--muted);font-size:.8rem;margin-top:3px}

/* ---------- Comparison ---------- */
.compare{max-width:840px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.compare-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:center}
.compare-row > div{padding:18px 22px}
.compare-head{background:var(--bg-soft);border-bottom:1px solid var(--line);font-weight:700}
.compare-head .us{color:var(--violet-700)}
.compare-head .them{color:var(--muted)}
.compare-row:not(.compare-head){border-bottom:1px solid var(--line)}
.compare-row:last-child{border-bottom:0}
.compare-row .feat{font-weight:600;color:var(--ink)}
.compare .col-us{text-align:center;background:linear-gradient(180deg,rgba(109,74,224,.05),rgba(109,74,224,.02))}
.compare .col-them{text-align:center}
.compare .yes{color:var(--teal-500);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.compare .no{color:#c25a5a;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.compare .muted-x{color:var(--muted)}

/* ---------- Values band ---------- */
.band{background:linear-gradient(160deg,var(--violet-700),var(--violet-900));color:#fff}
.band h2{color:#fff}
.band .lead{color:#d9cffb}
.band .eyebrow{color:var(--gold-500)}
.band .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none;backdrop-filter:blur(4px)}
.band .card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.band .card h3{color:#fff}
.band .card p{color:#cfc4ee}
.band .card .ic{background:rgba(255,255,255,.14);color:#fff}

/* ---------- Pricing ---------- */
.pricing{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.price-card{
  position:relative;max-width:470px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:42px 38px 34px;text-align:center;overflow:hidden;
}
.price-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--coral-500),var(--violet-600))}
.price-badge{
  display:inline-flex;align-items:center;gap:7px;background:var(--coral-100);color:var(--coral-600);
  font-weight:700;font-size:.82rem;letter-spacing:.01em;padding:7px 16px;border-radius:999px;margin-bottom:20px;
}
.price-trial{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.4vw,2.7rem);line-height:1;color:var(--ink)}
.price-amt{margin:14px 0 2px;color:var(--ink-soft);font-size:1.02rem}
.price-amt b{font-size:1.5rem;font-family:var(--display);color:var(--ink)}
.price-amt s{color:var(--muted);font-weight:500;margin-right:6px}
.price-sub{color:var(--muted);font-size:.9rem;margin-bottom:26px}
.price-feats{list-style:none;padding:0;margin:0 auto 28px;text-align:left;display:grid;gap:12px;max-width:310px}
.price-feats li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-soft);font-size:.98rem}
.price-feats svg{flex:none;margin-top:3px;color:var(--teal-500)}
.price-card .btn{width:100%}
.price-fine{color:var(--muted);font-size:.8rem;margin:16px 0 0;line-height:1.5}

/* ---------- CTA ---------- */
.cta{background:var(--bg-warm)}
.cta-box{
  background:linear-gradient(135deg,var(--coral-500),var(--violet-600));
  border-radius:var(--radius-lg);padding:clamp(40px,6vw,72px);text-align:center;color:#fff;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.cta-box h2{color:#fff;margin-bottom:.3em}
.cta-box p{color:rgba(255,255,255,.92);max-width:52ch;margin:0 auto 28px}
.cta-box .btn-ghost{background:#fff;border-color:#fff}
.cta-box .badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* store badge */
.store-badge{
  display:inline-flex;align-items:center;gap:11px;background:#111;color:#fff;
  padding:11px 20px;border-radius:14px;font-weight:600;transition:transform .18s,opacity .18s;
}
.store-badge:hover{transform:translateY(-2px);color:#fff;opacity:.9}
.store-badge small{display:block;font-size:.66rem;opacity:.75;font-weight:500;line-height:1.2}
.store-badge strong{font-size:1.02rem;line-height:1.2}
.store-badge.soon{background:#eee;color:var(--muted);cursor:default;border:1px solid var(--line)}
.store-badge.soon:hover{transform:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--violet-900);color:#cfc4ee;padding:64px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.foot-brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:14px}
.foot-brand img{width:36px;height:36px;border-radius:9px}
.site-footer p{color:#b3a6e0;font-size:.95rem;max-width:34ch}
.foot-col h4{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-col a{color:#c4b8ea;font-size:.96rem}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.88rem;color:#9d8fca}
.site-footer .foot-note{max-width:none;text-align:center;color:#8579b8;font-size:.82rem;margin:18px auto 0}
.foot-note svg{vertical-align:-2px;margin-right:6px;opacity:.8}

/* ---------- Legal / prose pages ---------- */
.page-head{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:clamp(50px,7vw,84px) 0 clamp(40px,5vw,56px)}
.page-head .eyebrow{margin-bottom:10px}
.prose{max-width:760px;margin:0 auto;padding:clamp(48px,6vw,72px) 0}
.prose h2{font-size:1.5rem;margin-top:2.2em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;margin-top:1.6em}
.prose p,.prose li{color:var(--ink-soft)}
.prose ul{padding-left:1.2em;margin:0 0 1.2rem}
.prose li{margin-bottom:.5em}
.prose .updated{color:var(--muted);font-size:.92rem;margin-bottom:2.4em}
.callout{background:var(--violet-100);border:1px solid #ddd2f7;border-radius:var(--radius);padding:22px 26px;margin:1.6em 0}
.callout p{margin:0;color:var(--violet-900)}
.toc{background:var(--bg-warm);border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;margin-bottom:2.4em}
.toc h4{margin:0 0 12px;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.toc ul{list-style:none;padding:0;margin:0;columns:2;gap:20px}
.toc li{margin-bottom:8px}

/* contact grid */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;text-align:center}
.contact-card .ic{margin:0 auto 16px}
.contact-card a{font-weight:600}

/* faq */
.faq{max-width:780px;margin:0 auto}
details.qa{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;background:#fff;overflow:hidden}
details.qa summary{cursor:pointer;padding:22px 26px;font-weight:600;font-family:var(--display);font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";font-size:1.5rem;color:var(--violet-600);font-weight:400;transition:transform .2s}
details.qa[open] summary::after{transform:rotate(45deg)}
details.qa .qa-body{padding:0 26px 24px;color:var(--ink-soft)}
details.qa .qa-body p{margin:0}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .product-grid,.foot-grid{grid-template-columns:1fr}
  .tablet-duo{grid-template-columns:1fr;gap:44px}
  .product.rev .product-grid{direction:ltr}
  .product.rev .product-media{order:-1}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{gap:30px}
  .foot-brand{grid-column:1/-1}
  .contact-grid{grid-template-columns:1fr}
  .toc ul{columns:1}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .parents-grid{grid-template-columns:1fr}
  .parents .phones{order:-1;min-height:440px;margin-bottom:10px}
  .chip-tl{top:-16px;left:6px}
  .chip-br{bottom:-16px;right:6px}
  .chip-ml{display:none}
}
@media (max-width:960px){
  .nav-links{
    position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--line);padding:14px var(--gutter) 24px;gap:2px;
    box-shadow:var(--shadow);transform:translateY(-140%);transition:transform .3s ease;
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:14px}
  .nav-cta{margin:10px 0 0}
  .nav-toggle{display:block}
}
@media (max-width:720px){
  .chip{padding:9px 13px;font-size:.82rem}
  .chip b{font-size:1rem}
  .media-frame .float-mascot{width:82px;bottom:-18px;left:-10px}
  .product.rev .media-frame .float-mascot{right:-10px}
  .reel figure{width:78vw}
  .g-2,.g-3{grid-template-columns:1fr}
  .trust .wrap{gap:16px}
  .trust-item{font-size:.9rem}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .compare-row{grid-template-columns:1.4fr .8fr .8fr}
  .compare-row > div{padding:14px 12px;font-size:.9rem}
  /* keep the fanned pair inside a narrow viewport: slightly smaller phones,
     gentler spread (they used to poke past the screen edges) */
  .phone{width:clamp(170px,40vw,220px)}
  .phone.back{transform:rotate(-6deg) translateX(14%) scale(.88)}
  .phone.front{transform:rotate(4deg) translateX(-12%)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .reel-track{transform:none!important}
}

/* ---------- App film (click-to-load YouTube) ----------
   The film IS the hero image: it sits in the media slot using the app's own
   artwork as its poster, so a section shows one picture, not two. The
   branded poster with the app name still goes to YouTube, where there is
   no surrounding page to say what you are looking at; here the name and
   description are right beside it.

   The poster stays a plain <img> until it is clicked; the JS in index.html
   then swaps in a youtube-nocookie iframe. Nothing here may depend on the
   iframe existing, and nothing may leak a request before the click. */
/* BASE rule — a film player anywhere that is not a product hero.
   The two rules below scope themselves to .media-frame / .hero-frame, so a
   standalone player (the setup guide on the support page) inherited no
   position, no aspect ratio and no clipping — and its play button, being
   absolutely positioned, escaped upwards out of the poster entirely. */
.film-frame{
  position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  cursor:pointer;border-radius:22px;border:6px solid #fff;
  background:var(--violet-900);box-shadow:var(--shadow-lg);
}
.film-frame > img{width:100%;height:100%;object-fit:cover;display:block}
.film-frame > iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.media-frame .film-frame{
  position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  cursor:pointer;border-radius:22px;border:6px solid #fff;background:var(--violet-900);
  box-shadow:var(--shadow-lg);
}
/* The frame carries the border and radius now, so the image inside must not
   repeat them; it also has to fill the frame rather than keep its own height. */
.media-frame .film-frame img.shot{
  width:100%;height:100%;object-fit:cover;display:block;
  border:0;border-radius:0;box-shadow:none;
}
.media-frame .film-frame > iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* No lift on hover here: the age badge and the mascot are pinned to the
   media frame, not to the film, so moving the film alone breaks their
   alignment. The disc growing is feedback enough. */
.film-play{
  position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;
  background:linear-gradient(to bottom,rgba(27,20,50,.06),rgba(27,20,50,.30));
  display:grid;place-items:center;cursor:pointer;padding:0;
}
.film-play span{
  width:88px;height:88px;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:0 12px 30px rgba(27,20,50,.32);
  transition:transform .2s,box-shadow .2s;
}
.film-frame:hover .film-play span{transform:scale(1.07);box-shadow:0 16px 38px rgba(27,20,50,.42)}
/* The glyph is drawn from the stylesheet so the eleven copies of the markup
   need not be touched: sized to fill the disc, and in a brand colour rather
   than the navy the markup hard-codes. The path itself is centred (6..18 in
   a 24 viewBox) — do NOT add a nudge on top of it. */
.film-play svg{width:36px;height:36px;margin:0}
.film-play svg path{fill:var(--violet-600)}
.film-frame:focus-visible,.film-play:focus-visible{outline:3px solid var(--violet-500);outline-offset:3px}
.film-cap{
  margin:34px 0 0;font-size:.86rem;font-weight:500;color:var(--muted);text-align:center;
}
@media (max-width:900px){
  .film-play span{width:74px;height:74px}
  .film-play svg{width:31px;height:31px}
  .film-cap{margin-top:30px}
}

/* ---------- The studio film, as the hero ----------
   The hero already framed one big picture with chips floating around it;
   the film takes that slot and keeps the frame, the glow and the chips.
   Overflow must stay visible on the frame itself or the chips get clipped,
   so the rounding and clipping live on an inner element instead. */
.hero-frame .film-frame{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;cursor:pointer;
  border-radius:24px;border:6px solid #fff;box-shadow:var(--shadow-lg);
  background:var(--violet-900);
}
.hero-frame .film-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  border:0;border-radius:0;box-shadow:none;
}
.hero-frame .film-frame > iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* The hero frame bobs gently; freeze it once the player is in, or the video
   drifts up and down while it plays. */
.hero-frame:has(iframe){animation:none}
/* Dead centre here, and bigger. The lift applied to the app posters exists
   only because their artwork carries a title lockup in the lower third;
   this poster has none, so a true centre is correct. */
.hero-frame .film-play{padding:0}
.hero-frame .film-play span{width:104px;height:104px}
.hero-frame .film-play svg{width:44px;height:44px}
@media (max-width:900px){
  .hero-frame .film-play span{width:78px;height:78px}
  .hero-frame .film-play svg{width:33px;height:33px}
}
.hero-cap{margin-top:22px;text-align:center}