/* CalSync landing, shared by /home/ (he, rtl) and /home/en/ (en, ltr).
   Rebuilt 2026-10-17 around Ben's reference mocks: light mint page, centered
   hero with one underlined phrase, white + deep-green audience cards carrying a
   mini digest, pricing with the Pro card lifted, FAQ as accordion cards, dark
   closing band, four-column footer. Light theme locked on purpose: the app is
   light-only and the Instagram creative is shot on the same green.
   Shape rule: buttons/inputs 12px, cards 20px, chips/pills full radius.
   Tokens mirror apps/web/tailwind.config.ts. */
:root{
  color-scheme:light;
  --bg:#f5faf7;--bg-2:#eef6f1;--fg:#13241f;--muted:#5b6b66;--line:#dfe9e3;
  --green:#11332c;--green-2:#1c5346;--accent:#1e8a5a;
  --mint:#dcf1e6;--mint-fg:#16503c;--card:#ffffff;
  --font:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --r-btn:12px;--r-card:20px;
  --shadow:0 18px 40px -28px rgba(17,51,44,.35),0 1px 2px rgba(17,51,44,.06);
  --shadow-lg:0 34px 70px -34px rgba(17,51,44,.45),0 2px 6px rgba(17,51,44,.08);
}
*{box-sizing:border-box}
/* the sticky header is 64-68px: anchor jumps and Tab focus land below it */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;position:relative;overflow-x:clip;background:var(--bg);color:var(--fg);font:16px/1.6 var(--font);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
a{color:var(--green-2)}
img{max-width:100%;height:auto}
a,button,summary,label,input{touch-action:manipulation}
[hidden]{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
h1,h2,h3{line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(32px,5.6vw,58px);font-weight:900;letter-spacing:-.015em;line-height:1.1}
h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-.012em;line-height:1.12}
h3{font-size:19px;font-weight:700}
p{margin:.6em 0}
.muted{color:var(--muted)}
.ph{font-size:1.2em;line-height:1;vertical-align:-.15em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;top:8px;inset-inline-start:8px;z-index:100;padding:10px 16px;border-radius:var(--r-btn);background:var(--green);color:#fff;font-weight:700;text-decoration:none;transform:translateY(-200%)}
.skip:focus-visible{transform:none;outline:3px solid var(--accent);outline-offset:2px}

/* ─── header ─── */
.top{position:sticky;top:0;z-index:10;background:rgba(245,250,247,.72);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
/* the edge shadow sits on a layer and fades in (opacity, not an animated box-shadow) */
.top::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:0 1px 0 rgba(17,51,44,.08),0 8px 24px -20px rgba(17,51,44,.35);opacity:0;transition:opacity .3s ease}
.top.edge::after{opacity:1}
.edge-sentinel{position:absolute;top:0;height:1px;width:1px;pointer-events:none}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--fg);text-decoration:none;letter-spacing:-.01em}
.brand img{width:34px;height:34px;border-radius:9px}
.top nav{display:flex;gap:22px;font-size:14.5px;font-weight:500}
.top nav a{color:var(--fg);text-decoration:none;opacity:.85}
.top nav a:hover{opacity:1;color:var(--green-2)}
.top .right{display:flex;align-items:center;gap:10px}
.top .login{font-size:14.5px;font-weight:600;color:var(--fg);text-decoration:none;padding:6px 10px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--card);font-size:12.5px;font-weight:700}
.seg a,.seg span{padding:3px 10px;border-radius:999px;text-decoration:none;color:var(--muted);line-height:1.4}
.seg span{background:var(--green);color:#fff}
.seg a:hover{color:var(--fg);background:var(--bg-2)}
.top .login:hover{color:var(--green-2)}
.top nav .mo{display:none}
.menu-btn{display:none}
@media(max-width:860px){
  .top .wrap{min-height:64px}
  .top .login,.top .right .btn{display:none}
  .menu-btn{display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;box-shadow:var(--shadow);-webkit-tap-highlight-color:transparent}
  .menu-btn .ph{font-size:24px}
  .menu-btn .x,.top.open .menu-btn .bars{display:none}
  .top.open .menu-btn .x{display:block}
  .top nav{display:none}
  .top.open nav{display:grid;position:absolute;inset-inline:0;top:100%;gap:0;padding:6px 20px 16px;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg)}
  .top nav a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:16px;font-weight:600;opacity:1}
  .top nav .mo{display:block}
  .top nav a.btn{margin-top:14px;border-bottom:0;padding:10px 22px;min-height:50px;font-size:16px;width:100%}
  .top nav a:nth-last-child(2){border-bottom:0}
}

/* ─── buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:var(--r-btn);font-weight:700;font-size:16px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .35s cubic-bezier(.16,1,.3,1),background .15s ease;font-family:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn.primary{background:var(--green);color:#fff;box-shadow:0 10px 24px -14px rgba(17,51,44,.7)}
.btn.primary:hover{background:var(--green-2)}
.btn.ghost{border-color:var(--line);color:var(--fg);background:var(--card)}
.btn.ghost:hover{background:var(--mint);border-color:var(--mint)}
.btn.soft{background:var(--bg-2);color:var(--green);border-color:transparent}
.btn.soft:hover{background:var(--mint)}
.btn.sm{min-height:40px;padding:6px 16px;font-size:14.5px}
.btn.wide{width:100%}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ─── hero (2026-10-17 round 4, Ben's mocks): two-line headline with a brush
   underline, pill CTAs with an arrow disc, three perks, then a scene: the
   WhatsApp chat turning into a calendar card (parents) or four vendor chats
   turning into one project calendar (producers). Phones stack it in the mock's
   order; wide screens put the text beside the scene. ─── */
/* overflow-x:clip keeps the scene's side glow (.shot::before, inset -14%) from widening the
   phone's layout viewport; body's own clip is propagated to the viewport and doesn't stop it. */
.hero{overflow-x:clip;padding:34px 0 24px;text-align:center;background:radial-gradient(900px 480px at 50% -10%,#e6f3ec 0%,rgba(230,243,236,0) 70%)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:var(--mint-fg);border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:700;letter-spacing:.01em}
.pill .ph{font-size:17px}
.hgrid{display:grid;gap:26px;align-items:center}
.htext{display:contents}
.hero h1{font-size:clamp(40px,10.4vw,66px);font-weight:900;line-height:1.06;letter-spacing:-.02em;margin:0 auto;max-width:14ch}
[dir=ltr] .hero h1{font-size:clamp(36px,9vw,58px);max-width:19ch}
.u{color:inherit;text-decoration:none;display:inline-block;padding-bottom:.12em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 22' preserveAspectRatio='none'%3E%3Cpath d='M5 15c42-9 128-10 190-4' stroke='%2358c98a' stroke-width='9' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat 50% 100%/100% .32em}
.hero .sub{font-size:19px;line-height:1.5;color:var(--muted);max-width:34rem;margin:14px auto 0;text-wrap:pretty}
[dir=ltr] .hero .sub{max-width:30rem}
.hero .cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:24px}
.hero .cta.stack{flex-direction:column;gap:10px}
.hero .cta .trial{font-size:14.5px;font-weight:600;color:var(--muted);margin:-4px 0 2px}
.btn.pill{border-radius:999px;min-height:60px;padding:12px 26px;font-size:18px;font-weight:800;gap:14px;box-shadow:0 14px 30px -18px rgba(17,51,44,.7)}
.btn.pill.ghost{box-shadow:var(--shadow)}
.btn.pill.has-arr{padding-inline-end:12px}
.btn .arr{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--green);display:grid;place-items:center}
.btn .arr .ph{font-size:20px}
.btn.pill .ph.lead-ic{font-size:24px}
@media(max-width:400px){.btn.pill{font-size:17px;padding-inline:20px}.btn.pill.has-arr{padding-inline-end:10px}}

/* the three perks: tinted discs, bold label, quiet line under it */
/* width:100% so the row spans its column: with only auto margins it shrank to its content and the
   three icons bunched together (parents, home phones) */
.perks{display:flex;justify-content:center;gap:12px 22px;width:100%;margin:28px auto 0;padding:0;list-style:none}
.perk{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1 1 0;max-width:150px;text-align:center}
.perk .pi{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green-2)}
.perk .pi .ph{font-size:32px}
.perk .pi.blue{background:#e4ecfa}.perk .pi.peach{background:#fdeadc;color:#4a3320}
.perk b{font-size:17px;line-height:1.2;font-weight:800;white-space:nowrap}
.perk small{color:var(--muted);font-size:14px;line-height:1.35}
.gcal{display:inline-block;width:36px;height:36px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='6' y='6' width='36' height='36' rx='7' fill='%23fff'/%3E%3Cpath d='M6 13a7 7 0 0 1 7-7h22a7 7 0 0 1 7 7v3H6z' fill='%234285f4'/%3E%3Cpath d='M6 16h8v18H6z' fill='%234285f4'/%3E%3Cpath d='M34 16h8v18h-8z' fill='%23fbbc04'/%3E%3Cpath d='M6 34h28v8H13a7 7 0 0 1-7-7z' fill='%2334a853'/%3E%3Cpath d='M34 34h8l-8 8z' fill='%23188038'/%3E%3Cpath d='M34 34h8v1a7 7 0 0 1-7 7h-1z' fill='%23ea4335'/%3E%3Ctext x='24' y='30' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='15' fill='%231a73e8'%3E31%3C/text%3E%3C/svg%3E") no-repeat center/contain}
.chrome-logo{display:inline-block;width:40px;height:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 24L4.95 13A22 22 0 0 1 43.05 13z' fill='%23db4437'/%3E%3Cpath d='M24 24l19.05-11A22 22 0 0 1 24 46z' fill='%23f4b400'/%3E%3Cpath d='M24 24v22A22 22 0 0 1 4.95 13z' fill='%230f9d58'/%3E%3Ccircle cx='24' cy='24' r='10' fill='%23fff'/%3E%3Ccircle cx='24' cy='24' r='7.5' fill='%234285f4'/%3E%3C/svg%3E") no-repeat center/contain}

/* Scenes are laid out physically (phone left, card right) in both languages, like the mocks;
   only the text inside follows the page direction. */
/* parents scene: tilted phone with the kindergarten chat, the event card floating beside it,
   a WhatsApp disc at the start edge. Sized by its own width (container units) so the
   phone's text scales with it; the phone's bottom is clipped like in the mock. */
.shot{position:relative;margin:30px auto 0;width:100%;max-width:560px;aspect-ratio:1/.86;container-type:inline-size;isolation:isolate;clip-path:inset(-30% -14% 0 -14%);order:1}
.shot::before{content:"";position:absolute;inset:-10% -14% 0;z-index:-1;pointer-events:none;background:radial-gradient(38% 34% at 10% 22%,#dcefe4 0,rgba(220,239,228,0) 100%),radial-gradient(42% 38% at 90% 80%,#fbead9 0,rgba(251,234,217,0) 100%),radial-gradient(30% 28% at 88% 10%,#e2eefb 0,rgba(226,238,251,0) 100%)}
.phone{position:absolute;left:6%;top:7%;width:57%;aspect-ratio:9/16.5;background:#1d2825;border-radius:12cqw;padding:2.2cqw;box-shadow:var(--shadow-lg);transform:rotate(-5deg)}
[dir=rtl] .phone{transform:rotate(5deg)}
.phone::after{content:"";position:absolute;top:2.2cqw;left:50%;width:22%;height:2.6cqw;transform:translateX(-50%);background:#1d2825;border-radius:0 0 2cqw 2cqw}
.scr{position:relative;background:#f3f7f4;border-radius:10cqw;height:100%;overflow:hidden;font-size:clamp(9px,3.4cqw,12.5px);line-height:1.35;text-align:start}
.scr .sb{display:flex;justify-content:space-between;padding:2.8cqw 4.5cqw 0;font-weight:700;font-size:.92em}
.scr .sb .ph{font-size:1em;vertical-align:0}
.scr .ch{display:flex;align-items:center;gap:2.4cqw;padding:2.4cqw 3cqw 2.6cqw;background:#fff;border-bottom:1px solid var(--line);margin-top:1.4cqw}
.scr .ch .ph{color:var(--muted);font-size:1.3em}
.scr .ch .av{width:8cqw;height:8cqw;border-radius:50%;background:var(--mint);display:grid;place-items:center;font-size:1.25em;flex:none}
.scr .ch b{display:block;font-size:1.08em;line-height:1.15}
.scr .ch small{display:block;color:var(--muted);font-size:.82em}
.scr .msg{display:flex;align-items:flex-end;gap:1.6cqw;padding:3cqw 2.6cqw 0}
.scr .msg .av{width:6cqw;height:6cqw;border-radius:50%;background:#dbe4df;flex:none;display:grid;place-items:center;font-size:.9em;color:var(--muted)}
.scr .bub{background:#fff;border-radius:3.6cqw;border-start-start-radius:1cqw;padding:1.8cqw 2.6cqw 1.4cqw;box-shadow:0 1px 1px rgba(0,0,0,.06);max-width:84%}
.scr .bub .nm{display:block;color:var(--accent);font-weight:700;font-size:.95em}
.scr .bub .tm{display:block;text-align:end;color:var(--muted);font-size:.78em;margin-top:.6cqw}
.evc{position:absolute;right:2%;top:33%;width:48%;background:#fff;border-radius:6cqw;padding:3.6cqw 3.6cqw 3.2cqw;box-shadow:var(--shadow-lg);transform:rotate(-6deg);text-align:start}
[dir=ltr] .evc{transform:rotate(5deg)}
.evc .eh{display:flex;justify-content:space-between;align-items:center}
.evc .gcal{width:8cqw;height:8cqw}
.evc .tag{width:9.5cqw;height:9.5cqw;border-radius:3cqw;background:var(--mint);color:var(--green-2);display:grid;place-items:center}
.evc .tag .ph{font-size:5.5cqw;vertical-align:0}
.evc b{display:block;font-size:clamp(15px,5.8cqw,25px);font-weight:900;margin-top:2.6cqw;line-height:1.1;letter-spacing:-.01em}
.evc .tt{font-size:clamp(12px,4.4cqw,18px);font-weight:600;margin-top:1cqw;font-variant-numeric:tabular-nums}
.evc .loc{display:flex;align-items:center;gap:1.4cqw;color:var(--muted);font-size:clamp(10px,3.4cqw,14px);margin-top:1.4cqw}
.evc .loc .ph{font-size:1.2em;vertical-align:0}
.wab{position:absolute;left:0;top:31%;width:16cqw;height:16cqw;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px -10px rgba(37,211,102,.75)}
.wab .ph{font-size:10cqw;vertical-align:0}
.harrow{position:absolute;top:36%;left:56%;width:14%;color:var(--green-2)}
.spark{position:absolute;top:18%;right:8%;width:9%;color:#58c98a}
.hero .aud{margin-top:28px}
.hero .aud.solo{margin-top:22px}

/* .shot.img: the whole scene is one rendered picture (home/{parents,producers}/hero-scene.webp, 16:9).
   Phones bleed it edge to edge like the mocks; edges are masked so it melts into the page. */
.shot.img,.shot.prod.img{aspect-ratio:auto;max-width:none;clip-path:none;container-type:normal;background:none;border-radius:0;overflow:visible;width:auto;margin-inline:-20px}
.shot.img::before{content:none}
.shot.img img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 92%,transparent);mask-composite:intersect}
.shot.prod.img img{-webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent)}
/* producers hero (2026-10-17 v2, Ben's producer mocks). Phones: a backstage photo
   (home/producers/hero-bg-m.webp) rises behind the CTAs, four WhatsApp chats sit on the
   left and the project calendar card on the right, and the photo ends in a soft wave
   above the perks. Wide screens: text on the left, the laptop photo (hero-laptop.webp)
   on the right with a live Google-Calendar-like week drawn into its screen, the chats
   leaning on it, then a white four-feature card and the Chrome strip.
   Everything in the scene is placed in % of .shot so it stays glued to the photo;
   bubble/card internals are in em, so only font-size changes per breakpoint.
   Layout is physical (chats left, calendar right) in both languages, like the mocks. */
.hero.prod{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(130px 240px at 0 290px,#e1f0e7 0,rgba(225,240,231,0) 100%),radial-gradient(900px 480px at 50% -10%,#e6f3ec 0%,rgba(230,243,236,0) 70%)}
.hero.prod .htext>*{position:relative;z-index:2}
.hero.prod .eyebrow{display:none}
.hero.prod .perks{position:relative;margin-top:-6px}
.hero.prod .perks::before{content:"";position:absolute;inset:-34px -70px -26px;z-index:-1;pointer-events:none;background:radial-gradient(60px 110px at 0 45%,#e3f1e9 0,rgba(227,241,233,0) 100%),radial-gradient(70px 100px at 100% 25%,#e3f1e9 0,rgba(227,241,233,0) 100%)}
[dir=rtl] .hero.prod .perks{flex-direction:row-reverse}
.shot.prod{order:1;margin:18px -20px 0;width:auto;max-width:none;aspect-ratio:100/80;clip-path:none;overflow:visible;border-radius:0;background:none}
.shot.prod::before{content:none}
.shot.prod .pbg{position:absolute;left:0;right:0;bottom:0;height:calc(100% + 54cqw);z-index:-1;pointer-events:none}
.shot.prod .pbg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 24%,#000 46%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='.5'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' d='M-2-2H102V86C102 93 98 96.5 89 97.2C66 99 40 97 -2 99Z'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 24%,#000 46%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='.5'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' d='M-2-2H102V86C102 93 98 96.5 89 97.2C66 99 40 97 -2 99Z'/%3E%3C/svg%3E");
  mask-size:100% 100%;mask-composite:intersect}
.shot.prod .lscr,.shot.prod .flow{display:none}
/* the four chats */
.bubs{position:absolute;left:4.5%;top:.8%;width:44%;display:grid;justify-items:left;gap:.7em;font-size:max(10.5px,2.62cqw);line-height:1.3}
.bub{width:100%}.bubs .bub:nth-child(2){width:107%}.bubs .bub:nth-child(4){width:101%}
.bub{position:relative;background:#fff;border-radius:1.25em;padding:.7em .9em .5em 5.1em;box-shadow:0 14px 28px -18px rgba(17,51,44,.45),0 1px 2px rgba(17,51,44,.08);text-align:start}
.bub .wa{position:absolute;left:-.3em;top:-.3em;width:2.05em;height:2.05em;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 .16em #fff,0 3px 8px rgba(0,0,0,.18)}
.bub .wa .ph{font-size:1.35em;vertical-align:0}
.bub .av{position:absolute;left:2.15em;top:50%;transform:translateY(-50%);width:2.6em;height:2.6em;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(17,51,44,.06)}
.bub b{display:block;font-size:1.12em;font-weight:800;line-height:1.25}
.bub .tx{display:block}
.bub .tm{display:block;text-align:end;color:var(--muted);font-size:.8em;margin-top:.1em}
/* the project calendar card (phones; also the fallback picture of the result) */
.pcal{position:absolute;right:2.6%;top:1.6cqw;width:42%;background:#fff;border-radius:1.5em;padding:1.2em 1em 1em;box-shadow:var(--shadow-lg);font-size:max(9.5px,2.45cqw);line-height:1.3;direction:ltr;text-align:left}
[dir=rtl] .pcal .h b,[dir=rtl] .pcal .d,[dir=rtl] .pcal .e>span{direction:rtl;text-align:right}
.pcal .h{display:flex;align-items:center;gap:.7em}
.pcal .h .gcal{width:2.3em;height:2.3em;flex:none}
.pcal .h b{font-size:1.28em;font-weight:800;flex:1;min-width:0}
.pcal .h .sync{flex:none;width:2.3em;height:2.3em;border-radius:.7em;background:var(--mint);color:var(--green-2);display:grid;place-items:center}
.pcal .h .sync .ph{font-size:1.35em;vertical-align:0}
.pcal .d{color:var(--muted);margin:.9em 0 .5em;font-size:.95em}
.pcal .r{display:grid;grid-template-columns:2.7em 1fr;gap:.6em;align-items:center;margin-top:.6em}
.pcal .r .t{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.95em}
.pcal .e{display:flex;align-items:center;gap:.6em;border-radius:.85em;padding:.75em .8em;background:#e3f3ea;color:#1b6b47;min-width:0}
.pcal .e .ph{font-size:1.5em;flex:none;vertical-align:0}
.pcal .e>span{flex:1;min-width:0}
.pcal .e b{display:block;font-weight:800;font-size:1.05em;line-height:1.2;color:inherit}
.pcal .e small{display:block;color:var(--muted);font-size:.88em}
.pcal .r.blue .e{background:#e7eefc;color:#2357b5}.pcal .r.lav .e{background:#f0e9fb;color:#6a3fb5}.pcal .r.org .e{background:#fdeedd;color:#b4581c}
.feat4{display:none}
.hfoot{display:contents}
[dir=rtl] .hero.prod .chromebox{flex-direction:row-reverse}
.hero.prod .chromebox>div{text-align:center}
@media(max-width:960px){
  /* cards sit in flow (one shared grid cell) so the photo grows with them: on narrow phones the px font floors make
     the cards taller, and a fixed-ratio photo let them cover its curved bottom edge */
  .shot.prod{display:grid;align-items:start;padding-bottom:74px}
  .shot.prod .bubs,.shot.prod .pcal{grid-area:1/1;position:relative;left:auto;right:auto;top:auto}
  .shot.prod .bubs{justify-self:left;margin:.6cqw 0 0 4.5%}
  .shot.prod .pcal{justify-self:right;margin:1.6cqw 2.6% 0 0}
}
@media(min-width:561px) and (max-width:960px){
  .shot.prod{margin-inline:auto;width:100%;max-width:600px}
  .shot.prod .pbg{left:-20%;right:-20%}
  .shot.prod .pbg img{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 24%,#000 46%,#000 80%,transparent 100%),linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 24%,#000 46%,#000 80%,transparent 100%),linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
  .bubs{font-size:max(10.5px,2.6cqw)}
  .hero.prod .perks::before{content:none}
}
@media(min-width:961px){
  .hero.prod{--sw:clamp(600px,57vw,1000px);padding:34px 0 34px;background:radial-gradient(240px 330px at 47% 210px,rgba(214,236,223,.75) 0,rgba(214,236,223,0) 100%),radial-gradient(140px 300px at 0 420px,#e1f0e7 0,rgba(225,240,231,0) 100%),radial-gradient(900px 480px at 30% -10%,#e6f3ec 0%,rgba(230,243,236,0) 70%)}
  .hero.prod .wrap{max-width:1320px}
  .hero.prod .hgrid{display:block;min-height:calc(var(--sw) / 1.1186 * .78)}
  .hero.prod .htext{width:min(500px,36vw);margin-left:0;margin-right:auto}
  .hero.prod .eyebrow{display:inline-flex;background:#e9f1ec;color:#3f514b;font-weight:600;font-size:14.5px;padding:7px 18px;margin-bottom:18px}
  .hero.prod h1{font-size:clamp(42px,3.8vw,60px);max-width:none}
  [dir=ltr] .hero.prod .htext{width:min(540px,37vw)}
  [dir=ltr] .hero.prod h1{font-size:clamp(36px,3.4vw,52px)}
  .hero.prod .sub{font-size:clamp(17px,1.35vw,19.5px);max-width:none}
  .hero.prod .htext .cta.stack{display:flex;width:fit-content;margin-inline:auto;align-items:center;margin-top:22px}
  .hero.prod .htext .cta.stack .btn.ghost{min-width:72%}
  .hero.prod .perks{gap:10px;margin-top:22px}
  .hero.prod .perk{align-items:center;text-align:center;gap:6px}
  .hero.prod .perk .pi{width:56px;height:56px}.hero.prod .perk .pi .ph{font-size:27px}.hero.prod .perk .gcal{width:30px;height:30px}
  .hero.prod .perk b{font-size:16px}.hero.prod .perk small{font-size:13.5px}
  .hero.prod .perks::before{content:none}
  .shot.prod{position:absolute;top:0;right:calc(min(0px,(1320px - 100vw) / 2));width:var(--sw);aspect-ratio:1528/1366;margin:0;z-index:1}
  .shot.prod .pbg{inset:0;height:auto}
  .shot.prod .pbg img{object-fit:fill;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 16%,#000 72%,transparent 97%);mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 16%,#000 72%,transparent 97%)}
  .shot.prod .lscr,.shot.prod .flow{display:block}
  .shot.prod .pcal{display:none}
  .bubs{left:2%;top:27%;width:28.5%;gap:.75em;font-size:max(10.5px,1.42cqw)}
  .bubs .bub:nth-child(1){width:97%;margin-left:3%}
  .bubs .bub:nth-child(2){width:104%;transform:rotate(2.6deg);margin-left:-2%}
  .bubs .bub:nth-child(3){width:100%;transform:rotate(2deg)}
  .bubs .bub:nth-child(4){width:98%;transform:rotate(1.4deg)}
  .flow{position:absolute;left:28.5%;top:44.5%;width:11%;color:#2b9a62;z-index:1}
  /* the laptop screen: an un-tilted box clipped to the screen's quad (corners measured on the photo) */
  .lscr{position:absolute;left:28.99%;top:23.79%;width:40.97%;height:31.92%;clip-path:polygon(1.12% .1%,100% .46%,98.56% 100%,0 90.94%);background:#fbfcfb;container-type:inline-size;display:flex;flex-direction:column;font-size:2.9cqw;line-height:1.25;overflow:hidden}
  .lscr .lh{display:flex;align-items:center;gap:1.8cqw;padding:2.4cqw 3cqw;border-bottom:1px solid #e3ebe6;background:#fff}
  .lscr .lh .gcal{width:5.6cqw;height:5.6cqw;flex:none}
  .lscr .lh b{font-size:3.6cqw;font-weight:800;white-space:nowrap}
  .lscr .chip{font-size:2.5cqw;background:#eef4f0;color:var(--green-2);border-radius:99px;padding:.5cqw 1.8cqw;white-space:nowrap}
  .lscr .wk{margin-inline-start:auto;display:flex;align-items:center;gap:.8cqw;font-size:2.5cqw;color:var(--muted);border:1px solid #e3ebe6;border-radius:99px;padding:.5cqw 1.4cqw}
  .lscr .wk .ph{font-size:1em;vertical-align:0}
  .lscr .lg{flex:1;display:grid;grid-template-columns:9cqw repeat(3,1fr);grid-template-rows:auto 1fr;padding:0 1.4cqw 5cqw;min-height:0}
  .lscr .tg{grid-row:2;grid-column:1;display:grid;grid-template-rows:repeat(4,1fr);gap:1.2cqw;padding:1.2cqw 0;color:var(--muted);font-size:2.2cqw;font-variant-numeric:tabular-nums}
  .lscr .tg i{font-style:normal;padding-top:.4cqw}
  .lscr .dh{grid-row:1;text-align:center;color:var(--muted);font-size:2.3cqw;padding:1.4cqw 0 1cqw;line-height:1.1}
  .lscr .dh:nth-child(2){grid-column:2}.lscr .dh:nth-child(3){grid-column:3}.lscr .dh:nth-child(4){grid-column:4}
  .lscr .dh em{display:block;margin:.5cqw auto 0;width:5.4cqw;height:5.4cqw;line-height:5.4cqw;border-radius:50%;font-style:normal;font-size:3.2cqw;color:var(--fg);font-weight:600}
  .lscr .dh.on{color:#1a73e8}.lscr .dh.on em{background:#1a73e8;color:#fff}
  .lscr .col{grid-row:2;display:grid;grid-template-rows:repeat(4,1fr);gap:1.2cqw;padding:1.2cqw 1cqw;border-inline-start:1px solid #e8eee9;min-height:0}
  .lscr .c1{grid-column:2}.lscr .c2{grid-column:3}.lscr .c3{grid-column:4}
  .lscr .ev{grid-row:var(--row);border-radius:1.4cqw;padding:.9cqw 1.4cqw;background:#e3f3ea;color:#1b6b47;overflow:hidden;min-height:0;text-align:start}
  .lscr .ev b{display:block;font-size:2.55cqw;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lscr .ev small{display:block;font-size:2.15cqw;color:var(--muted);white-space:nowrap}
  .lscr .ev.blue{background:#e7eefc;color:#2357b5}.lscr .ev.lav{background:#f0e9fb;color:#6a3fb5}.lscr .ev.org{background:#fdeedd;color:#b4581c}
  .lscr .ph-bl{grid-row:var(--row);border-radius:1.4cqw;background:#e3f3ea;opacity:.55}
  .lscr .ph-bl.blue{background:#e7eefc}.lscr .ph-bl.lav{background:#f0e9fb}.lscr .ph-bl.org{background:#fdeedd}
  .feat4{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:2;margin:6px 0 0;padding:26px 8px 28px;list-style:none;background:#fff;border-radius:28px;box-shadow:var(--shadow-lg)}
  .feat4 li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:0 18px}
  .feat4 li+li{border-inline-start:1px solid var(--line)}
  .feat4 .fi{width:56px;height:56px;border-radius:50%;background:var(--mint);color:var(--green-2);display:grid;place-items:center;margin-bottom:6px}
  .feat4 .fi .ph{font-size:27px;vertical-align:0}
  .feat4 b{font-size:19px;font-weight:800;line-height:1.25}
  .feat4 small{color:var(--muted);font-size:15.5px;line-height:1.45;max-width:22ch}
  .hfoot{display:flex;align-items:center;gap:24px;margin:22px 0 0;background:#e6f3ee;border-radius:28px;padding:16px 18px}
  .hfoot .chromebox{flex:1;margin:0;max-width:none;background:none;padding:0}
  .hero.prod .hfoot .chromebox>div{text-align:start}
  [dir=rtl] .hero.prod .hfoot .chromebox{flex-direction:row}
  .hfoot .hcta{margin:0;flex:none;max-width:none}
  .hfoot .hcta .btn{width:auto;min-width:300px}
}

/* parents hero (2026-10-17 v2, Ben's parent mocks). Phones: perks first, then a phone
   (home/parents/phone-frame.webp, screen keyed to alpha) whose WhatsApp chat is live HTML
   drawn BEHIND the frame, the event card tilted beside it, doodles around, and the digest
   card sliding over the phone's bottom. Wide screens: text on the left, a hand holding the
   phone (hero-hand.webp, screen keyed to alpha) on the right with the same chat rotated
   into its screen and the card overlapping it. Same physical-layout rule as producers. */
.hero.par{position:relative;isolation:isolate;overflow:clip}
.hero.par .htext>*{position:relative;z-index:2}
.hero.par .perks{order:1}
.hero.par .htext .cta{flex-wrap:nowrap}
[dir=rtl] .hero.par .htext .cta{flex-direction:row-reverse}
[dir=rtl] .hero.par .perks{flex-direction:row-reverse}
.shot.par{order:2;margin:10px -20px 0;width:auto;max-width:none;aspect-ratio:100/47;clip-path:inset(-60% 0 0 0);overflow:visible;background:none}
.shot.par::before{inset:-40% 0 0;background:radial-gradient(22% 46% at 0 52%,#d9eee2 0,rgba(217,238,226,0) 100%),radial-gradient(34% 40% at 100% 34%,#fbeadb 0,rgba(251,234,219,0) 100%)}
.pdeco{position:absolute;pointer-events:none;z-index:0}
.pdeco.curl{left:0;top:-24%;width:22%;color:rgba(30,138,90,.38)}
.pdeco.plane{right:2.5%;top:-20%;width:9%;color:#eeb08a}
.pwab{position:absolute;left:6%;top:1%;width:8.8cqw;height:8.8cqw;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 .9cqw #fff,0 10px 22px -8px rgba(37,211,102,.7);z-index:3}
.pwab .ph{font-size:5.6cqw;vertical-align:0}
.pphone{position:absolute;left:19.5%;top:2.6cqw;width:45%;aspect-ratio:700/1388;container-type:inline-size;transform:rotate(-3deg);z-index:1}
.pphone picture,.pphone img{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.pphone img{filter:drop-shadow(0 22px 28px rgba(17,51,44,.26))}
/* the chat: sits under the frame; the frame's bezel/island/rounded corners mask its edges */
.pscr{position:absolute;left:5.58%;top:2.34%;width:88.84%;height:95.24%;background:#f1f3f0;overflow:hidden;container-type:inline-size;font-size:max(8px,4.8cqw);line-height:1.32;direction:ltr;text-align:left}
.pscr .sb{display:flex;justify-content:space-between;align-items:center;padding:4.4cqw 11cqw 0 13cqw;font-weight:700;font-size:.92em}
.pscr .sic{display:flex;gap:1.4cqw}.pscr .sic .ph{font-size:1em;vertical-align:0}
.pscr .ch{display:flex;align-items:center;gap:2.6cqw;margin-top:3.6cqw;padding:2.4cqw 4cqw 3cqw;background:#fff;border-bottom:1px solid #e3e9e5}
.pscr .ch>.ph{color:var(--green-2);font-size:1.45em;vertical-align:0}
.pscr .gav{width:11.5cqw;height:11.5cqw;border-radius:50%;object-fit:cover;flex:none}
.pscr .cht b{display:block;font-size:1.28em;line-height:1.15}
.pscr .cht small{display:block;color:var(--muted);font-size:.76em}
[dir=rtl] .pscr .cht,[dir=rtl] .pscr .bub .nm,[dir=rtl] .pscr .bub .tx,[dir=rtl] .pscr .inp span{direction:rtl;text-align:right}
.pscr .msg{display:flex;align-items:flex-start;gap:2.2cqw;padding:4cqw 3.4cqw 0}
.pscr .msg .av{width:8.6cqw;height:8.6cqw;border-radius:50%;object-fit:cover;flex:none;margin-top:.8cqw}
.pscr .bub{background:#fff;border-radius:4.4cqw;border-top-left-radius:1.2cqw;padding:2.4cqw 3.4cqw 1.8cqw;box-shadow:0 1px 2px rgba(0,0,0,.07);max-width:80%}
.pscr .bub .nm{display:block;font-weight:700;color:#7b3fc4;font-size:.92em}
.pscr .bub .nm.blue{color:#2c6bd6}
.pscr .bub .tx{display:block}
.pscr .bub .tm{display:block;text-align:right;color:var(--muted);font-size:.74em;margin-top:.3em}
.pscr .inp{position:absolute;left:4cqw;right:4cqw;bottom:5.5cqw;display:flex;align-items:center;gap:2cqw;background:#fff;border-radius:99px;padding:2.4cqw 4cqw;color:var(--muted);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.pscr .inp .ph{font-size:1.2em;vertical-align:0}.pscr .inp span{flex:1}
.parrow{position:absolute;left:52.5%;top:43%;width:8.5%;color:var(--green);z-index:2}
/* the event card */
.pevc{position:absolute;left:59%;top:13.5cqw;width:34%;z-index:3;background:#fff;border-radius:1.5em;padding:1.1em 1.2em 1.25em;box-shadow:var(--shadow-lg);transform:rotate(-7deg);font-size:max(8.5px,2.5cqw);line-height:1.25;direction:ltr;text-align:left}
.pevc .eh{display:flex;justify-content:space-between;align-items:flex-start}
.pevc .gcal{width:2.6em;height:2.6em}
.pevc .tag{width:3.2em;height:3.2em;border-radius:.9em;background:#e1f3e8;color:#1e8a5a;display:grid;place-items:center}
.pevc .tag .ph{font-size:1.9em;vertical-align:0}
.pevc .eb{display:grid;gap:.2em;margin-top:.5em;border-left:2px solid #e2e8e4;padding-left:.8em}
.pevc .eb b{font-size:1.75em;font-weight:900;line-height:1.1;letter-spacing:-.01em}
.pevc .tt{font-size:1.3em;color:#4d5a56;font-variant-numeric:tabular-nums}
.pevc .loc{display:flex;align-items:center;gap:.35em;color:var(--muted);font-size:1.05em}
.pevc .loc .ph{font-size:1.25em;vertical-align:0}
.pevc .spk{position:absolute;right:-2em;top:-2.2em;width:2.7em;color:#38b26e}
.hero.par .aud.solo{position:relative;z-index:3;margin-top:-22px}
.hero.par .mini .w{padding-inline-end:10px;border-inline-end:1px solid var(--line)}
@media(max-width:560px){
  .hero.par .htext .cta{gap:10px}
  .hero.par .htext .cta .btn{flex:1 1 0;min-width:0;min-height:54px;padding-inline:14px;gap:9px;font-size:16px}
  .hero.par .htext .cta .btn.has-arr{padding-inline-end:8px}
  .hero.par .htext .cta .btn .arr{width:32px;height:32px}
  /* the nowrap labels gave the row a min-content wider than the column (EN 352px in 335px, into the
     right gutter at 375px): let the row shrink to the column, and tighten the buttons on narrow phones */
  .hero.par .htext .cta{min-width:0;width:100%}
}
@media(max-width:400px){
  .hero.par .htext .cta .btn{padding-inline:11px;gap:7px;font-size:15px}
  .hero.par .htext .cta .btn.has-arr{padding-inline-end:6px}
  .hero.par .htext .cta .btn .arr{width:30px;height:30px}
}
@media(min-width:561px) and (max-width:960px){
  .shot.par{margin-inline:auto;width:100%;max-width:600px}
}
@media(min-width:961px){
  /* the photo takes the text column's height (top/bottom set, width from aspect-ratio), so the next
     block starts right under the perks like the mock */
  .hero.par{padding:70px 0 34px;background:radial-gradient(160px 320px at 0 430px,#e1f0e7 0,rgba(225,240,231,0) 100%),radial-gradient(900px 480px at 30% -10%,#e6f3ec 0%,rgba(230,243,236,0) 70%)}
  .hero.par .wrap{max-width:1320px}
  .hero.par .hgrid{display:block;position:relative}
  .hero.par .htext{width:min(560px,43vw);margin-left:0;margin-right:auto;padding:4px 0 6px;display:flex;flex-direction:column;min-height:clamp(480px,40vw,540px)}
  .hero.par h1,.hero.par .sub{max-width:none}
  .hero.par h1{font-size:clamp(46px,5vw,76px)}
  [dir=ltr] .hero.par h1{font-size:clamp(40px,4.9vw,64px)}
  .hero.par .sub{margin-top:20px}
  .hero.par .htext .cta{flex-wrap:nowrap;margin-top:30px}
  /* the two buttons split the column evenly, so the centered perks under them stay centered
     under the buttons whatever the labels' lengths (a short CTA label used to pull them apart) */
  .hero.par .htext .cta .btn{flex:1 1 0;min-width:0}
  .hero.par .perks{gap:10px;margin-top:auto;padding-top:48px}
  .hero.par .perk{align-items:center;text-align:center;gap:6px}
  .shot.par{position:absolute;top:-50px;bottom:-70px;right:calc(-1 * max(20px, (100vw - 1280px) / 2));left:auto;width:auto;height:auto;aspect-ratio:1674/1496;margin:0;clip-path:none;z-index:1;container-type:inline-size}
  .shot.par::before{content:none}
  .shot.par .pdeco,.shot.par .pwab{display:none}
  .pphone{left:0;top:0;width:100%;aspect-ratio:1674/1496;transform:none}
  .pphone img{filter:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,transparent 0,#000 6%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,transparent 0,#000 6%,#000 78%,transparent 100%);mask-composite:intersect}
  .pscr{left:62.54%;top:42.36%;width:26.88%;height:auto;aspect-ratio:450/975;transform:translate(-50%,-50%) rotate(6.6deg);font-size:max(8.5px,1.45cqw)}
  .pscr .sb{padding:3.4cqw 12cqw 0 14cqw}
  .parrow{left:69.5%;top:45%;width:5.8%}
  .pevc{left:54.5%;top:51.8%;width:40%;transform:rotate(-4deg);font-size:max(9px,1.87cqw)}
  .hero.par .aud.solo{margin-top:40px}
}
.chromebox{display:flex;align-items:center;gap:16px;margin:26px auto 0;max-width:40rem;background:#e6f3ee;border-radius:24px;padding:16px 18px;text-align:start}
.chromebox .cl{flex:none;width:66px;height:66px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow)}
.chromebox b{display:block;font-size:17px;line-height:1.25}
.chromebox p{margin:3px 0 0;color:var(--muted);font-size:15px;line-height:1.45}
.hcta{margin:22px auto 0;max-width:40rem}
.hcta .btn{width:100%;white-space:normal}
/* full-width pill: text centered, the arrow disc pinned to the end */
.hcta .btn.has-arr,.acard .btn.pill.has-arr{position:relative;padding-inline:54px}
.hcta .btn .arr,.acard .btn.pill .arr{position:absolute;inset-inline-end:11px;top:50%;transform:translateY(-50%)}
.checks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:14px 0 0;padding:0;list-style:none;font-size:14px;font-weight:600;color:var(--muted)}
.checks li{display:inline-flex;align-items:center;gap:6px}
.checks .ph{color:var(--accent);font-size:17px}

@media(min-width:961px){
  .hero{padding:52px 0 24px}
  .hgrid{grid-template-columns:1.05fr 1fr;gap:44px;text-align:start}
  .htext{display:block}
  .hero h1,.hero .sub{margin-inline:0}
  /* buttons and perks centered under the start-aligned text, like the producers/parents heroes */
  .hero .cta,.perks,.hero .cta.stack{justify-content:center;align-items:center}
  .perks{margin-top:34px}
  .perk{align-items:center;text-align:center}
  .shot{margin:0;max-width:none;order:0}
  .shot.img,.shot.prod.img{margin:0;margin-inline-end:calc(-1 * clamp(0px, (100vw - 1100px) / 2 + 20px, 60px));align-self:center}
  .shot.prod.img img{border-radius:28px;-webkit-mask-image:none;mask-image:none;box-shadow:var(--shadow-lg)}
  .hero .aud{margin-top:40px}
  .hero .aud.solo{margin-top:34px}
}
@media(max-width:960px){
  .perks{order:2;margin-top:26px}
  .shot{order:1}
}
@media(max-width:560px){
  .shot{margin-top:22px}
  .perks{gap:10px 8px}
  .perk b{font-size:15.5px}.perk small{font-size:13px}
  .chromebox{gap:12px;padding:14px 14px;border-radius:20px}
  .chromebox .cl{width:58px;height:58px}
  .chromebox b{font-size:16px}.chromebox p{font-size:14px}
}

.aud{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;text-align:start}
.acard{position:relative;transition:translate .5s cubic-bezier(.16,1,.3,1);background:var(--card);border:1px solid var(--line);border-radius:28px;padding:26px 26px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;min-width:0;scroll-margin-top:90px}
.acard .k{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-weight:700;font-size:13px;background:var(--mint);color:var(--mint-fg);border-radius:999px;padding:4px 12px}
.acard .k .ph{font-size:16px}
.acard h2{font-size:26px;line-height:1.2;font-weight:900;letter-spacing:-.01em}
.acard ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:16px;font-weight:500}
.acard li{display:flex;gap:10px;align-items:flex-start}
.acard li .ph{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;display:grid;place-items:center;margin-top:2px}
.acard .btn{margin-top:auto;white-space:normal;text-align:center}
.acard .fp{margin:-4px 0 0;text-align:center;font-size:13.5px;color:var(--muted);font-weight:500}
.acard.deep{background:var(--green);color:#fff;border-color:var(--green)}
.acard.deep .k{background:rgba(255,255,255,.12);color:#cfe7da}
.acard.deep li .ph{background:#8fd4b4;color:var(--green)}
.acard.deep .fp{color:#b9d2c8}
.acard.deep .btn.primary{background:#fff;color:var(--green);box-shadow:none}
.acard.deep .btn.primary .arr{background:var(--green);color:#fff}
.acard.deep .btn.primary:hover{background:var(--mint)}
/* mini digest: a real miniature of the app's digest list. Rows: source chip, title, when,
   a tinted icon disc at the end (LTR mirrors that order like the English mock). */
.mini{background:var(--bg-2);color:var(--fg);border:1px solid var(--line);border-radius:18px;padding:12px;font-size:13.5px;margin-top:2px}
.mini .mhead{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:0 2px 10px}
.mini .mhead span{display:inline-flex;align-items:center;gap:6px}
.mini .mhead .ph{color:var(--accent);font-size:18px}
.mini .mhead small{font-weight:500;color:var(--muted);font-size:12.5px}
.mini .mlist{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mini .mrow{display:flex;align-items:center;gap:10px;padding:9px 10px;border-top:1px solid var(--line)}
.mini .mrow:first-child{border-top:0}
.mini .src{order:0;flex:none;font-size:12px;font-weight:700;background:var(--mint);color:var(--mint-fg);border-radius:999px;padding:3px 10px;max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini .t{order:1;flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini .w{order:2;flex:none;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}
.mini .w.hot{color:#b4461f;font-weight:700}
.mini .mi{order:3;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green-2)}
.mini .mi .ph{font-size:19px;vertical-align:0}
.mini .mi.blue{background:#e4ecfa;color:#1f4fa3}.mini .mi.rose{background:#fde4e4;color:#c0392b}.mini .mi.lav{background:#efe8fb;color:#5b3fa0}.mini .mi.org{background:#fdeedc;color:#a0521a}
[dir=ltr] .mini .mi{order:0}[dir=ltr] .mini .w{order:1}[dir=ltr] .mini .t{order:2}[dir=ltr] .mini .src{order:3}
.mini .mfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 2px 0;color:var(--muted);font-size:12.5px}
.mini .mfoot span{display:inline-flex;align-items:center;gap:5px}
.mini .mfoot b{color:var(--accent);font-weight:700}
.mini .mfoot .ph{color:var(--accent)}
.acard.deep .mini{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.acard.deep .mini .mlist{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.acard.deep .mini .mrow{border-color:rgba(255,255,255,.1)}
.acard.deep .mini .src{background:rgba(255,255,255,.14);color:#dff0e7}
.acard.deep .mini .mi{background:rgba(255,255,255,.14);color:#dff0e7}
.acard.deep .mini .w{color:#b9d2c8}.acard.deep .mini .w.hot{color:#ffc9a3}
.acard.deep .mini .mhead small,.acard.deep .mini .mfoot{color:#b9d2c8}
.acard.deep .mini .mhead .ph,.acard.deep .mini .mfoot b,.acard.deep .mini .mfoot .ph{color:#8fd4b4}
.acard .more{align-self:center;display:inline-flex;align-items:center;gap:6px;margin-top:-6px;padding:6px 4px;font-weight:700;font-size:15px;color:var(--green-2);text-decoration:none}
.acard .more:hover{text-decoration:underline}
.acard.deep .more{color:#cfe7da}
/* audience landings (/parents/): one card under the hero */
.aud.solo{grid-template-columns:minmax(0,40rem);justify-content:center}
.aud.solo .acard .k{display:none}
.close .cross{margin-top:18px;font-size:15px}
.close .cross a{color:#fff;font-weight:700}

/* audience switch: phones see one card at a time (landing.js sets data-show);
   without JS both cards simply stack */
.aud-tabs{display:none}
@media(max-width:860px){
  .hero{padding:26px 0 12px}
  .hero .sub{font-size:17.5px;margin-top:12px}
  .hero .cta{margin-top:20px}
  .hero .cta:not(.stack) .btn{flex:1 1 0;padding-inline:16px}
  .hero .cta:not(.stack) .btn.has-arr{padding-inline-end:10px}
  .hero .cta.stack .btn{width:min(100%,24rem)}
  .aud{grid-template-columns:1fr;gap:16px;margin-top:26px}
  .acard{padding:22px 18px 18px;gap:12px;border-radius:24px}
  .acard h2{font-size:22px}
  .acard ul{font-size:15px;gap:7px}
  .acard li:nth-child(n+3){display:none}
  .acard .btn{width:100%}
  .mini{padding:10px}
  .mini .mhead{padding-bottom:8px}
  .mini .mrow{padding:8px 8px;gap:8px}
  .mini .mi{width:32px;height:32px}
  .mini .t{white-space:normal;line-height:1.3}
  .mini .src{max-width:30%}
  .mini .mfoot{flex-wrap:wrap;gap:2px 8px}
  html.js .aud-tabs{display:flex;position:relative;isolation:isolate;margin:0 auto;width:100%;max-width:22rem;padding:4px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
  .aud-tabs::before{content:"";position:absolute;z-index:-1;inset-block:4px;inset-inline-start:4px;width:calc(50% - 4px);border-radius:999px;background:var(--green);transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .aud[data-show=producers] .aud-tabs::before{transform:translateX(100%)}
  [dir=rtl] .aud[data-show=producers] .aud-tabs::before{transform:translateX(-100%)}
  .aud-tabs button{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:0;background:none;border-radius:999px;font:inherit;font-size:15px;font-weight:700;color:var(--muted);cursor:pointer;transition:color .3s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .aud-tabs button[aria-selected=true]{color:#fff}
  .aud-tabs button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  html.js .aud[data-show] .acard .k{display:none}
  html.js .aud[data-show=parents] #producers,html.js .aud[data-show=producers] #parents{display:none}
}
@media(max-width:860px) and (prefers-reduced-motion: no-preference){
  html.js .aud[data-show] .acard{animation:audIn .4s cubic-bezier(.16,1,.3,1) both}
  @keyframes audIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ─── sections ─── */
section{padding:72px 0}
.head{text-align:center;max-width:46rem;margin:0 auto 36px}
.eyebrow{display:block;color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.02em;margin-bottom:10px}
.lead{color:var(--muted);font-size:17.5px;margin:12px auto 0;text-wrap:pretty}
.band{background:var(--card);border-block:1px solid var(--line)}
@media(max-width:860px){section{padding:56px 0}.head{margin-bottom:26px}}
@media(max-width:560px){section{padding:48px 0}.head{margin-bottom:22px}.lead{font-size:16px}}

/* how it works: three steps in a row, then the honest note */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow);min-width:0}
.step .ic{width:46px;height:46px;border-radius:13px;background:var(--mint);color:var(--mint-fg);display:grid;place-items:center;margin-bottom:14px}
.step .ic .ph{font-size:24px}
.step h3{margin-bottom:6px}
.step p{margin:0;color:var(--muted);font-size:15px}
.note{margin:22px auto 0;max-width:52rem;display:flex;gap:12px;align-items:flex-start;background:var(--mint);color:var(--mint-fg);border-radius:14px;padding:16px 18px;font-size:15px;line-height:1.55}
.note .ph{flex:none;font-size:22px;margin-top:2px}
.note b{display:block;margin-bottom:2px}
/* phones: icon beside the text, not on top of it */
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:10px}.step{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:18px 18px 18px 16px;align-items:start}.step .ic{grid-row:span 2;width:44px;height:44px;margin:0}.step h3{font-size:17px;line-height:1.3;margin:0;align-self:center}.step p{font-size:14.5px}.note{font-size:14.5px;padding:14px 16px}}

/* how it works, safely (2026-10-17, Ben's mock): three step cards, each ending in a small product
   visual, then ONE strip with privacy + the Chrome requirement. Replaces the old .steps/.note + the
   separate #privacy block (kept as an id on .sp so old links still land). Visuals are decorative
   (aria-hidden); browser + calendar are laid out physically (dir=ltr), their text follows the page. */
.how .head{margin-bottom:30px}
.hsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.hstep{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 20px 0;box-shadow:var(--shadow);min-width:0;text-align:center}
.hstep .n{position:absolute;top:16px;inset-inline-start:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--mint);color:var(--mint-fg);font-weight:800;font-size:19px}
.hstep h3{margin:4px 34px 8px;font-size:19px;line-height:1.3;text-wrap:balance}
.hstep p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;text-wrap:pretty}
.hstep:not(:last-child)::after{content:"";position:absolute;top:50%;inset-inline-end:-26px;width:20px;height:20px;margin-top:-10px;background:#a9bcb3;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
[dir=rtl] .hstep:not(:last-child)::after{transform:scaleX(-1)}
.sv{position:relative;margin-top:auto;height:234px;padding-top:20px;text-align:start;font-size:13px;line-height:1.3}
.sv b{font-weight:700}
.sv small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}

/* 1: browser chrome with the extension icon ringed, a popover under it */
.br{margin:4px 0 0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 16px 32px -20px rgba(17,51,44,.4),0 1px 3px rgba(17,51,44,.07)}
.br .tabs{display:flex;align-items:center;gap:10px;background:#e8ecea;padding:7px 10px 0;color:#5d6b66}
.br .tabs>.ph{padding-bottom:6px}
.br .tab{display:inline-flex;align-items:center;gap:8px;background:var(--card);border-radius:10px 10px 0 0;padding:8px 12px;font-size:12.5px;color:var(--fg);white-space:nowrap}
.br .tab .chrome-logo{width:16px;height:16px}
.br .tab .ph{font-size:13px;color:var(--muted);margin-inline-start:10px}
.br .bar{display:flex;align-items:center;gap:9px;padding:9px 10px;color:#5d6b66;font-size:15px}
.br .url{flex:1;display:flex;align-items:center;gap:8px;background:#f1f4f2;border-radius:999px;padding:7px 12px;font-size:13px;color:var(--fg);min-width:0}
.br .ext{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--card);border:2px solid #b5dec8;box-shadow:0 0 0 5px rgba(201,235,216,.5)}
.br .ext img{border-radius:6px}
.sv-chrome .pop{position:absolute;right:24px;top:132px;background:var(--card);border-radius:14px;padding:11px 16px;text-align:center;box-shadow:var(--shadow-lg);border:1px solid var(--line);font-size:13.5px}
.sv-chrome .pop::before{content:"";position:absolute;top:-6px;right:28px;width:11px;height:11px;background:var(--card);border-top:1px solid var(--line);border-left:1px solid var(--line);transform:rotate(45deg)}

/* 2: WhatsApp groups picker, each group assigned to a child/project */
.gpk{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 26px -20px rgba(17,51,44,.35);overflow:hidden}
.gpkh{display:flex;align-items:center;gap:9px;padding:10px 12px;font-weight:700;font-size:13.5px;border-bottom:1px solid var(--line)}
.gpkh .wa{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#25d366;color:#fff;font-size:16px}
.gr{display:flex;align-items:center;gap:9px;padding:9px 12px;border-top:1px solid var(--line)}
.gpkh+.gr{border-top:0}
.gr .cb{flex:none;display:grid;place-items:center;width:19px;height:19px;border-radius:5px;border:1.5px solid #b9c7c0;color:transparent;font-size:13px}
.gr.on .cb{background:var(--green-2);border-color:var(--green-2);color:#fff}
.gr img{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;background:#f1f4f2;border:1px solid #e1e8e4}
.gr .gt{flex:1;min-width:0}
.gr .gt b,.gr .gt small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr .gt b{display:block;font-size:13px}
.gr:not(.on) .gt{opacity:.75}
.who{flex:none;display:inline-flex;align-items:center;gap:4px;border-radius:9px;padding:4px 8px;font-size:12px;font-weight:700}
.who .ph{font-size:11px}
.who.rose{background:#fde6e9;color:#b3324c}.who.blue{background:#e3ecfb;color:#2b5aa6}.who.green{background:var(--mint);color:var(--mint-fg)}

/* 3: the daily summary card, with the Google Calendar day peeking out at the card edge */
.sv-out{overflow:hidden;margin-inline:-20px;padding-inline:20px}
.out{display:flex;gap:10px;align-items:flex-start;margin-right:-20px}
.dg{flex:1 1 0;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 26px -20px rgba(17,51,44,.35);padding:10px 12px}
.dg .dh{display:flex;align-items:center;gap:9px;padding-bottom:8px}
.dic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--mint);color:var(--green-2);font-size:19px}
.dg .dh b{font-size:14px}
.dr{display:flex;align-items:flex-start;gap:9px;padding:7px 0 6px;border-top:1px solid var(--line)}
.dr .ph{flex:none;font-size:18px;margin-top:1px}
.dr span{min-width:0}.dr b,.dr small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dr b{display:block;font-size:12.5px}
.dr .ph.blue{color:#3b7be0}.dr .ph.green{color:var(--accent)}.dr .ph.ink{color:var(--fg)}
.gc{flex:0 0 32%;background:var(--card);border:1px solid var(--line);border-inline-end:0;border-radius:14px 0 0 14px;padding:9px 0 10px 9px;font-size:11.5px;color:#3c4a45}
.gch{display:flex;align-items:center;gap:6px;font-size:11.5px;white-space:nowrap;overflow:hidden}
.gch .gcal{flex:none;width:16px;height:16px}
.gc .day{text-align:center;padding:8px 0 6px}
.gc .day small{font-size:10px}.gc .day b{display:block;font-size:20px;font-weight:500;line-height:1.1}
.gc .ev{margin:5px 0 0;padding:6px 8px;border-radius:7px 0 0 7px;border-left:3px solid;font-size:11px;line-height:1.35}
.gc .ev b{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc .ev.rose{background:#fde3e6;border-color:#e0566a;color:#9b2a3e}.gc .ev.blue{background:#dfe9fb;border-color:#4a7fe0;color:#244f99}
[dir=rtl] .gc .ev{text-align:right}

/* the strip: privacy (mint, wider) + the honest Chrome note */
.safe{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;background:#f1f8f4;border-radius:24px;overflow:hidden}
.safe .sp,.safe .sk{display:flex;gap:18px;align-items:center;padding:24px 20px;min-width:0}
/* one surface, two halves: a short hairline splits them (horizontal once they stack) */
.safe .sk{position:relative}
.safe .sk::before{content:"";position:absolute;inset-inline-start:0;top:26px;bottom:26px;width:1px;background:#cfe2d8}
.safe .sp>div,.safe .sk>div{flex:1;min-width:0}
/* privacy half as a grid so the policy link centers across the whole half, not just the text column */
.safe .sp{display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-content:center}
.safe .sp>div{display:contents}
.safe .sp .sdisc{grid-row:1/span 4;grid-column:1}
.safe .sp>div>:not(.plink){grid-column:2}
.safe .sp .plink{grid-column:1/-1;grid-row:4}
.sdisc{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#cdeedc;color:var(--green-2);font-size:32px;box-shadow:0 0 0 7px rgba(205,238,220,.45)}
.sk .sdisc{background:var(--mint);box-shadow:0 0 0 7px rgba(220,241,230,.5)}
.safe h3{font-size:19px;margin:0 0 4px}
.safe p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55;text-wrap:pretty}
.schips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 0;font-size:13.5px;font-weight:700}
.schips li{display:inline-flex;align-items:center;gap:6px;padding-inline:11px;white-space:nowrap}
.schips li:first-child{padding-inline-start:0}
.schips li+li{border-inline-start:1px solid #bcd6c8}
.schips .ph{font-size:20px;color:var(--green-2)}
.safe .plink{display:flex;align-items:center;gap:5px;width:fit-content;margin:2px auto -11px;padding:11px 8px;border-radius:10px;font-size:14px;font-weight:600;text-underline-offset:3px;transition:text-decoration-thickness .15s ease,opacity .08s ease}
.safe .plink:hover{text-decoration-thickness:2px}
.safe .plink:active{opacity:.6}
.safe .plink:focus-visible{outline:3px solid var(--accent);outline-offset:0}

@media(max-width:1060px) and (min-width:961px){.hsteps{gap:26px}.hstep h3{font-size:17.5px}.hstep:not(:last-child)::after{inset-inline-end:-22px;width:16px}.who .ph{display:none}}
/* phones/tablets: steps become the same swipe carousel as the pain cards (landing.js builds dots) */
@media(max-width:960px){
  .hsteps{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:4px 20px 18px;margin:-4px -20px -18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hsteps::-webkit-scrollbar{display:none}
  .hstep{flex:0 0 min(86%,340px);scroll-snap-align:start;scroll-snap-stop:always;box-shadow:0 12px 28px -22px rgba(17,51,44,.4),0 1px 2px rgba(17,51,44,.06)}
  .hsteps .hstep.reveal{animation:none;opacity:1;transform:none}
  .hstep::after{display:none}
  .safe{grid-template-columns:1fr}
  .safe .sk::before{top:0;bottom:auto;inset-inline:24px;width:auto;height:1px}
}
@media(max-width:560px){
  .how .head{margin-bottom:22px}
  .hstep{padding:18px 16px 0}
  .hstep h3{font-size:17.5px;margin-inline:36px}
  .hstep p{font-size:14.5px}
  .sv{height:226px;padding-top:16px}
  .sv-out{margin-inline:-16px;padding-inline:16px}.out{margin-right:-16px}
  .safe{margin-top:20px;border-radius:20px}
  /* icon beside the title only, so the text gets the full width */
  .safe .sp,.safe .sk{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 12px;padding:18px 16px}
  .safe .sp>div,.safe .sk>div{display:contents}
  .safe .sp>div>:not(h3):not(.plink),.safe .sk>div>:not(h3){grid-column:1/-1}
  .safe .sp .sdisc{grid-row:auto}
  .safe h3{margin:0;font-size:16.5px}.safe p{margin-top:8px;font-size:14px}
  .sdisc{width:42px;height:42px;font-size:22px;box-shadow:0 0 0 4px rgba(205,238,220,.45)}
  .schips{justify-content:center}
  .schips li,.schips li:first-child{padding-inline:11px}
  .schips li+li{border-inline-start:0}
  .schips{gap:8px 0;font-size:13px}
}

/* sound familiar: three illustrated moment cards, the third one deep green */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{position:relative;transition:translate .5s cubic-bezier(.16,1,.3,1);background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0}
.pimg{position:relative;aspect-ratio:4/3;margin:12px 12px 0;border-radius:calc(var(--r-card) - 6px);overflow:hidden;background:var(--bg-2)}
.pimg img{display:block;width:100%;height:100%;object-fit:cover}
.pcards.ptop .pimg img{object-position:top}
.pimg .tag{position:absolute;top:12px;inset-inline-end:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:#9a2f1a;border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.pimg .tag .ph{font-size:15px}
.pbody{padding:20px 22px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pk{font-size:13px;font-weight:700;color:#b4461f;letter-spacing:.01em}
.pcard h3{font-size:20px;line-height:1.25}
.pcard .pbody p{margin:0;color:var(--muted);font-size:15px;flex:1}
.pfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;font-weight:700}
.pfoot b{color:var(--accent);flex:none;white-space:nowrap}
.pfoot span{display:inline-flex;align-items:center;gap:6px;color:var(--fg);font-weight:600;text-align:end}
.pfoot .ph{color:var(--accent);font-size:17px}
.pcard.deep{background:var(--green);color:#fff;border-color:var(--green)}
.pcard.deep .pimg .tag{color:var(--mint-fg)}
.pcard.deep .pk{color:#8fd4b4}
.pcard.deep .pbody p{color:#cfe3da}
.pcard.deep .pfoot{border-color:rgba(255,255,255,.16)}
.pcard.deep .pfoot b,.pcard.deep .pfoot .ph{color:#8fd4b4}
.pcard.deep .pfoot span{color:#fff}
.turn{margin:40px auto 0;max-width:48rem;text-align:center}
.turn .big{font-size:clamp(21px,2.8vw,28px);font-weight:800;line-height:1.3;margin:0;text-wrap:balance}
.turn p:not(.big){color:var(--muted);margin:12px auto 0;font-size:17px;max-width:40rem}
/* below 960px the cards become a swipe carousel: one card plus a peek of the next,
   snap per card, one dot per card under it (landing.js builds them) */
.pnav{display:none}
@media(max-width:960px){
  .pcards{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:4px 20px 18px;margin:-4px -20px -18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pcards::-webkit-scrollbar{display:none}
  .pcard{flex:0 0 min(84%,340px);scroll-snap-align:start;scroll-snap-stop:always;box-shadow:0 12px 28px -22px rgba(17,51,44,.4),0 1px 2px rgba(17,51,44,.06)}
  /* view()/IO reveals don't fit a horizontal scroller: cards are simply there */
  .pcards .pcard.reveal{animation:none;opacity:1;transform:none}
  .pnav{display:flex;justify-content:center;margin-top:14px}
  .pdots{display:flex;justify-content:center;gap:6px}
  .pdots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#c5d6cd;cursor:pointer;transition:width .35s cubic-bezier(.16,1,.3,1),background .2s ease;position:relative}
  .pdots button::after{content:"";position:absolute;inset:-10px -6px}
  .pdots button[aria-current=true]{width:22px;background:var(--green)}
  .pdots button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .pimg{margin:10px 10px 0;border-radius:calc(var(--r-card) - 8px)}
  .pimg .tag{top:10px;inset-inline-end:10px;font-size:12px;padding:4px 10px}
  .pbody{padding:16px 18px 16px;gap:5px}
  .pk{font-size:12.5px}
  .pcard h3{font-size:18.5px}
  .pcard .pbody p{font-size:14.5px;line-height:1.55}
  .pfoot{flex-wrap:wrap;justify-content:flex-start;gap:2px 8px;margin-top:12px;padding-top:10px;font-size:13.5px}
  .pfoot span{text-align:start}
  .turn{margin-top:30px}
  .turn p:not(.big){font-size:16px}
}

/* privacy: one centered mint card, the claims as chips */
.privbox{max-width:46rem;margin:0 auto;background:#e6f3ee;border-radius:28px;padding:44px 32px 36px;text-align:center}
.privbox .pic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:999px;background:#c4e8d4;color:var(--green-2);margin-bottom:16px}
.privbox .pic .ph{font-size:30px}
.privbox p{color:var(--muted);font-size:17px;max-width:36rem;margin:12px auto 0;text-wrap:pretty}
.privbox .chips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:14.5px;font-weight:700;color:var(--fg)}
.privbox .chips li{display:inline-flex;align-items:center;gap:7px}
.privbox .chips .ph{font-size:19px;color:var(--green-2)}
.privbox .plink{display:inline-block;margin-top:16px;font-size:14.5px;font-weight:600}
@media(max-width:560px){.privbox{padding:32px 20px 28px;border-radius:24px}.privbox p{font-size:16px}.privbox .chips{flex-direction:column;align-items:center;gap:10px}}

/* pricing: three plans, Pro lifted in the middle */
.plans{display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:18px;align-items:stretch}
.plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px 24px;display:flex;flex-direction:column;gap:12px;min-width:0;box-shadow:var(--shadow)}
.plan .nm{font-weight:800;font-size:20px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.plan .tag{font-size:12px;font-weight:700;background:var(--mint);color:var(--mint-fg);border-radius:999px;padding:3px 10px}
.plan .pr{font-size:36px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.01em}
.plan .pr small{display:block;font-size:13.5px;font-weight:500;color:var(--muted);margin-top:6px;letter-spacing:0}
.plan ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li .ph{flex:none;color:var(--accent);font-size:18px;margin-top:3px}
.plan .btn{margin-top:auto}
.plan.hi{background:var(--green);color:#fff;border-color:var(--green);box-shadow:var(--shadow-lg);margin-block:-14px;padding-block:34px 32px}
.plan.hi .tag{position:absolute;top:-13px;inset-inline-start:50%;transform:translateX(-50%);background:var(--accent);color:#fff}
[dir=rtl] .plan.hi .tag{transform:translateX(50%)}
.plan.hi .pr small{color:#b9d2c8}
.plan.hi li .ph{color:#8fd4b4}
.plan.hi .btn.primary{background:#fff;color:var(--green);box-shadow:none}
.plan.hi .btn.primary:hover{background:var(--mint)}
.promo{margin:34px auto 0;max-width:52rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.promo b{font-size:16.5px;display:block}
.promo span{color:var(--muted);font-size:14.5px}
.fine{font-size:13.5px;color:var(--muted);margin:14px auto 0;text-align:center}
@media(max-width:860px){.plans{grid-template-columns:1fr;gap:14px}.plan.hi{margin-block:0;padding-block:30px 26px}.plan{padding:22px 20px 20px;gap:10px}.plan .pr{font-size:32px}.promo{flex-direction:column;align-items:stretch;text-align:center}.promo .btn{width:100%}}

/* faq: accordion cards, two columns on wide screens */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 18px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;min-height:56px;-webkit-tap-highlight-color:transparent}
.faq details{transition:background .15s ease}
.faq summary:active{background:var(--bg-2)}
.faq details{overflow:hidden}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-inline-end:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-2px) rotate(45deg);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.faq details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.faq p{color:var(--muted);margin:0;padding:0 0 18px;font-size:15px;transform-origin:top center}
.faq details[open] p{animation:faqIn .32s cubic-bezier(.16,1,.3,1) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:860px){.faq{grid-template-columns:1fr}}

/* closing band */
.close{background:var(--green);color:#fff;border-radius:24px;padding:52px 28px;text-align:center}
.close .pill{background:rgba(255,255,255,.12);color:#cfe7da}
.close .cic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:999px;background:#c4e8d4;color:var(--green)}
.close .cic .ph{font-size:30px}
.close h2{color:#fff;margin-top:18px;max-width:22ch;margin-inline:auto}
.close p{color:#cfe3da;margin:12px auto 0;max-width:38rem;font-size:17px}
.close .btn.primary{background:#fff;color:var(--green);box-shadow:none;margin-top:22px}
.close .btn.primary:hover{background:var(--mint)}
/* the trial button: big white pill, arrow at the end, fine print under it */
.close .btn.go{min-height:62px;width:min(100%,27rem);padding:14px 28px;border-radius:999px;font-size:18px;font-weight:800;gap:12px;white-space:normal;box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
.close .btn.go .ph{font-size:22px;flex:none}
.close .fp{margin-top:12px;font-size:13.5px;font-weight:600;color:#b9d2c8}
.wl{margin:30px auto 0;max-width:30rem;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.wl label{display:block;font-size:14px;color:#cfe3da;margin-bottom:10px}
.wl form{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.wl input{flex:1 1 200px;min-height:46px;border-radius:var(--r-btn);border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;padding:0 14px;font:inherit;font-size:16px}
.wl input::placeholder{color:#a9c4b8}
.wl input:focus-visible{outline:3px solid #8fd4b4;outline-offset:2px}
.wl .btn.ghost{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.wl .btn.ghost:hover{background:rgba(255,255,255,.1)}
.wl .ok{margin:10px 0 0;font-size:14.5px;color:#cfe3da}
.wl .err{margin:8px 0 0;font-size:14.5px;color:#ffc9a3}
.wl .ok:empty,.wl .err:empty{margin:0}
.wl input[aria-invalid=true]{border-color:#ffc9a3}
.wl .btn[disabled]{opacity:.7;cursor:progress}
@media(max-width:860px){.close{padding:38px 20px;border-radius:20px}}

/* footer: four columns */
footer{padding:40px 0 56px;color:var(--muted);font-size:14px;background:var(--card);border-top:1px solid var(--line)}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer h2{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--fg);letter-spacing:0;line-height:1.4}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--green-2);text-decoration:underline}
footer .brand{margin-bottom:10px}
footer .blurb{margin:0;max-width:30ch;font-size:14px}
footer .legal{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:13px}
@media(max-width:860px){footer .cols{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:520px){footer{padding:32px 0 88px}footer .cols{grid-template-columns:1fr 1fr;gap:22px 16px}footer .cols>div:first-child{grid-column:1/-1}footer .blurb{max-width:none}}

/* ─── motion: hero load-in once; everything else a quiet entry reveal.
   CSS scroll-driven animations do it where supported, landing.js toggles
   .in elsewhere. Reduced motion: everything static, final state. ─── */
@media (prefers-reduced-motion: no-preference){
  .hero .wrap{animation:rise .7s cubic-bezier(.16,1,.3,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @supports (animation-timeline: view()){
    .reveal{animation:reveal both linear;animation-timeline:view();animation-range:entry 0% entry 40%}
    .reveal[style*="--i"]{animation-range:entry calc(var(--i)*5%) entry calc(40% + var(--i)*5%)}
    @keyframes reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  }
  @supports not (animation-timeline: view()){
    html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*70ms)}
    html.js .reveal.in{opacity:1;transform:none}
  }
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn,.faq summary::after,.acard,.pcard,.plan,.hstep,.safe .plink,.top::after,.aud-tabs::before,.aud-tabs button{transition:none}
  .btn:active{transform:none;opacity:.85}
  .faq details[open] p{animation:faqFade .2s ease both}
  @keyframes faqFade{from{opacity:0}to{opacity:1}}
}
@media (prefers-reduced-transparency: reduce){
  .top{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .pimg .tag{background:#fff}
}
@media (prefers-contrast: more){
  .top{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--fg)}
  .acard,.pcard,.plan,.step,.hstep,.gpk,.dg,.gc,.br,.sv-chrome .pop,.faq details,.promo,.mini .mrow{border-color:var(--fg)}
  .safe{border:1px solid var(--fg)}.schips li+li{border-color:var(--fg)}
  .muted,.lead,.step p,.hstep p,.safe p,.sv small,.privbox p,.faq p,.plan .pr small{color:var(--fg)}
}

@media (hover:hover) and (prefers-reduced-motion: no-preference){
  /* translate, not transform: the scroll reveal animation holds transform (fill both) and would cancel the lift */
  .acard:hover,.pcard:hover,.plan:not(.hi):hover,.hstep:hover{translate:0 -3px}
  .hstep,.plan{transition:translate .5s cubic-bezier(.16,1,.3,1)}
  /* the deeper hover shadow fades in on a layer: opacity stays on the compositor, an animated box-shadow repaints */
  .acard::before,.pcard::before,.plan:not(.hi)::before,.hstep::before{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .5s cubic-bezier(.16,1,.3,1);pointer-events:none}
  .acard:hover::before,.pcard:hover::before,.plan:not(.hi):hover::before,.hstep:hover::before{opacity:1}
}