/* Home page only (loaded after site.css). */

.btn-lg{font-size:18px;padding:14px 22px}

/* ---------- hero: centred text and two actions on pink, then the demo as one big media block ---------- */
.stage{--m:300px;position:relative;overflow:hidden;color:#fff;padding-bottom:var(--m);
  background-color:var(--pink);background-image:radial-gradient(rgba(255,255,255,.28) 1.6px,transparent 1.8px);background-size:18px 18px}
.stage .site-header{position:relative;max-width:1120px;width:100%;padding:18px 24px}
.stage .brand,.stage .nav a{color:#fff}
.stage .nav a:hover,.stage .nav a[aria-current="page"]{background:rgba(255,255,255,.18);box-shadow:none}
.nav a.nav-cta{background:#fff;color:var(--ink);margin-left:6px}
.stage .nav a.nav-cta:hover{background:#fff}

.hero{display:block;position:relative;text-align:center;max-width:1100px;margin:0 auto;padding:40px 24px 56px}
.hero h1{font-size:clamp(40px,6.2vw,80px);line-height:1.02}
.hero .amp{color:var(--yellow)}

.hero .lede{font-size:clamp(17px,1.6vw,19px);opacity:.92;margin:16px auto 32px;max-width:520px}
.hero-ctas{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap}
.hero-btn{display:inline-flex;background:#fff;color:var(--ink);box-shadow:3px 4px 0 var(--ink)}

/* popup: mirrors extension/popup.css */
.d-pop{position:absolute;top:6px;right:12px;width:340px;padding:18px 18px 14px;display:flex;flex-direction:column;gap:8px;border:1.5px solid var(--ink);border-radius:20px;
  background-color:var(--paper);background-image:radial-gradient(var(--dot) 1.3px,transparent 1.4px);background-size:16px 16px;box-shadow:0 22px 44px -18px rgba(80,0,40,.45);
  opacity:0;transform:scale(.96) translateY(-6px);transform-origin:top right;transition:opacity .2s,transform .2s;pointer-events:none}

.pp-head{display:flex;align-items:center;gap:8px}
.pp-head img{width:34px}
.pp-head b{flex:1;font-family:var(--display);font-weight:600;font-size:23px;line-height:1}
.pp-cr{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--yellow);border:1.5px solid var(--ink)}
.pp-big{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px solid var(--ink);border-radius:22px;padding:16px;background:var(--pink);color:#fff;box-shadow:3px 4px 0 var(--ink)}
.pp-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#fff;border:1.5px solid var(--ink)}
.pp-ico svg,.pp-ri svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pp-ri .fill{fill:var(--ink)}
.pp-big b{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.1}
.pp-big small{font-size:12.5px;font-weight:600}
.pp-row{display:flex;align-items:center;gap:12px;border-top:1.5px dashed var(--line);padding:10px 4px;border-radius:12px;transition:background .12s,transform .12s}
.pp-ri{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#fff;border:1.5px solid var(--ink);flex:none;transition:background .12s}
.pp-ri svg{width:20px;height:20px}
.pp-t{display:flex;flex-direction:column;flex:1}
.pp-t b{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.15}
.pp-t small{font-size:12.5px;font-weight:600;color:var(--muted)}
.pp-pill{font-style:normal;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--pink-soft);border:1.5px solid var(--ink)}

.pp-opt{display:flex;align-items:center;gap:5px;padding:0 0 4px 54px}
.pp-opt span{min-width:34px;font-size:12px;font-weight:700;color:var(--muted)}
.pp-opt i{font-style:normal;font-size:12px;font-weight:700;padding:4px 8px;white-space:nowrap;border-radius:999px;border:1.5px solid var(--line);background:#fff}
.pp-opt i.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pp-foot{margin-top:4px;font-size:11.5px;font-weight:600;color:var(--muted);text-align:center}

/* countdown: mirrors the overlay the extension draws on the page */

.dc-msg{font-size:20px;font-weight:700}
.dc-num{width:120px;height:120px;border-radius:36px;display:grid;place-items:center;background:var(--pink);color:#fff;font-size:64px;font-weight:800;border:2px solid var(--ink);box-shadow:4px 5px 0 var(--ink)}

.dc-sub{font-size:14px;font-weight:600;color:var(--muted)}

/* result tab: mirrors extension/video.html */

.dr-bar{display:flex;gap:14px;align-items:center;padding:12px 22px;background:rgba(255,248,236,.9);border-bottom:1.5px dashed var(--line)}
.dr-bar img{width:40px}
.dr-meta{display:flex;flex-direction:column;flex:1;min-width:0}
.dr-meta strong{font-family:var(--display);font-size:18px;font-weight:600}
.dr-meta span{color:var(--muted);font-size:12.5px;font-weight:600}
.dr-btn{padding:9px 16px;border-radius:999px;border:1.5px solid var(--ink);background:var(--pink);color:#fff;font-family:var(--display);font-weight:600;font-size:14px;box-shadow:2px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}

/* small pause / play control on the window's corner */

@media (max-width:860px){
  .stage{--m:200px}

}

@media (max-width:520px){
  .stage .nav a:not(.nav-cta){display:none}
  .hero{padding:24px 16px 40px}
  .stage{--m:110px}
}

/* the Premium column: a yellow card that breaks out above and below the panel */

.soon{font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;border:1.5px dashed currentColor;opacity:.7}

/* ---------- three across, right under the demo ---------- */
.trio{max-width:1168px;margin:0 auto;padding:16px 24px 112px}
.trio h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1;margin-bottom:32px}
.trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tcard{background:#fff;border:1.5px solid var(--ink);border-radius:20px;box-shadow:4px 5px 0 var(--ink);overflow:hidden;display:flex;flex-direction:column}

.ttxt{padding:20px 24px 24px}
.ttxt h3{font-size:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ttxt p{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}
.tag{display:inline-block;font-family:var(--body);font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:999px;border:1.5px solid var(--ink)}
.tag.free{background:var(--butter)}.tag.paid{background:var(--pink-soft)}.tag.soon{background:#fff;border-style:dashed}
/* "coming soon" on the same pink sash the extension stamps across free videos (extension/offscreen.js) */
.tcard-soon{position:relative;overflow:visible}

/* shifty eyes while he's in: look one way, then the other (each copy delayed to its turn) */

@media (max-width:900px){.trio-grid{grid-template-columns:1fr;max-width:520px}}
@media (max-width:520px){.trio{padding:8px 16px 80px}}

/* ---------- one background for the whole page: the hero's pink polka dots ---------- */
body.home{background-color:var(--pink);background-image:radial-gradient(rgba(255,255,255,.28) 1.6px,transparent 1.8px);background-size:18px 18px;color:#fff}
.home .stage{background:none}
.tcard{color:var(--ink)}
.trio h2{color:#fff}

/* ---------- big screens: one shared content width so every section lines up on the same edges ---------- */
@media (min-width:1200px){
  .home{--w:min(1360px,calc(100vw - 2 * clamp(48px,6vw,120px)))}
  .stage .site-header{max-width:none;width:var(--w);padding-left:0;padding-right:0}
  .hero{max-width:var(--w)}

  .trio{max-width:none;width:var(--w);padding-left:0;padding-right:0}

  

  

}

/* ---------- section rhythm: the same, generous gap after every section (much bigger than any gap inside one) ---------- */
.home{--gap:clamp(96px,10vw,176px)}

.trio{padding-top:0;padding-bottom:var(--gap)}
.trio h2{margin-bottom:40px}

@media (max-width:520px){.home{--gap:80px}}

/* ---------- a little flavour: brand cursors (pink arrow; yellow with a sparkle on anything clickable) ---------- */
body.home{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 3 L4 24 L9.5 18.6 L13.6 27.2 L17.6 25.4 L13.6 17 L21 17 Z' transform='translate%282.2 2.2%29' fill='%231a1a1a'/%3E%3Cpath d='M4 3 L4 24 L9.5 18.6 L13.6 27.2 L17.6 25.4 L13.6 17 L21 17 Z' fill='%23ef65a5' stroke='%231a1a1a' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3,auto}
.home a,.home button,.home [role="button"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 3 L4 24 L9.5 18.6 L13.6 27.2 L17.6 25.4 L13.6 17 L21 17 Z' transform='translate%282.2 2.2%29' fill='%231a1a1a'/%3E%3Cpath d='M4 3 L4 24 L9.5 18.6 L13.6 27.2 L17.6 25.4 L13.6 17 L21 17 Z' fill='%23ffdd3a' stroke='%231a1a1a' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M25 2.5 L26.3 6.2 L30 7.5 L26.3 8.8 L25 12.5 L23.7 8.8 L20 7.5 L23.7 6.2 Z' fill='%23fff' stroke='%231a1a1a' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3,pointer}

/* ---------- a little flavour: brand scrollbar ----------
   Plain pink track; a white handle with an ink outline, a chunky "offset" edge and three grip dots. */
html:has(body.home)::-webkit-scrollbar{width:18px}
html:has(body.home)::-webkit-scrollbar-track{border-left:2px solid var(--ink);background-color:var(--pink)}
html:has(body.home)::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;min-height:64px;
  background-color:#fff;background-clip:padding-box;
  background-image:radial-gradient(circle,var(--ink) 1.6px,transparent 2px),radial-gradient(circle,var(--ink) 1.6px,transparent 2px),radial-gradient(circle,var(--ink) 1.6px,transparent 2px);
  background-size:100% 8px;background-repeat:no-repeat;background-position:center calc(50% - 7px),center 50%,center calc(50% + 7px);
  box-shadow:inset 0 0 0 2px var(--ink),inset -3px -4px 0 0 var(--ink)}
html:has(body.home)::-webkit-scrollbar-thumb:hover{background-color:var(--yellow)}
html:has(body.home)::-webkit-scrollbar-thumb:active{background-color:var(--pink-soft)}
html:has(body.home)::-webkit-scrollbar-corner{background:var(--pink)}
/* Firefox only takes colours; Chrome ignores the rules above if this is set, so keep it to browsers without them */
@supports not selector(::-webkit-scrollbar){html:has(body.home){scrollbar-color:#fff var(--pink-deep)}}

/* ---------- section bands: alternate sections sit on a full-width colour band ---------- */
.home{--band-pad:calc(var(--gap) * .6)}

.trio{padding-top:var(--band-pad);padding-bottom:var(--band-pad)}

/* full-bleed colour even though the section itself is content-width */
.trio{box-shadow:0 0 0 100vmax var(--band,transparent);clip-path:inset(0 -100vmax);background:var(--band,transparent)}
[data-bands="deep"]{--band:var(--pink-deep)}

/* ---------- tucked demo: the hero fills the screen, the demo peeks out, and the next section's scalloped
   edge covers its bottom half. "See the whole demo" lifts it up over the hero text. ---------- */
.home{--dw:min(1000px,calc(100vw - 48px));--dh:calc(var(--dw) * .625);--peek:.5;--sc:84px;--sw:155.4px}
@media (min-width:1200px){.home{--dw:min(1160px,var(--w))}}
.stage{padding-bottom:0}
.home .stage{min-height:calc(100svh - var(--dh) * var(--peek));display:flex;flex-direction:column}
.home .hero{margin-block:auto;width:100%;padding-top:24px;padding-bottom:64px}

/* the section after the demo covers its lower half, with a scalloped top edge */
.home .trio{position:relative;z-index:4;clip-path:inset(calc(-2 * var(--sc)) -100vmax 0);box-shadow:none;background:none;border-image:linear-gradient(var(--band) 0 0) fill 0//0 100vmax}
/* scalloped edge: radius 84px every 155.4px (from the user's pasted mask); half size on phones */
.home .trio::before{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);bottom:calc(100% - 1px);height:var(--sc);pointer-events:none;
  background:var(--band);
  /* the pasted scallop, flipped: the band's own round bumps (radius --sc, every --sw) rise up into the hero/demo */
  --M:radial-gradient(var(--sc) at 50% 100%,#000 calc(100% - 1px),#0000) 50% 0/var(--sw) 100% repeat-x;
  -webkit-mask:var(--M);mask:var(--M)}
@media (max-width:520px){.home{--sc:42px;--sw:77.7px}}

.home .trio{padding-top:calc(var(--band-pad) * .6)}
html:has(body.home){overflow-x:clip}

/* dots off for now while we explore colour */
body.home,.stage{background-image:none}

/* Meadow: soft mint page, cream (#fff8ec, the extension popup) bands, ink text, one pink */
body.home{--bg:#cfe6df;--on-bg:#2f5049;--hi:#ef65a5;--band:#fff8ec;--on-band:#2f5049;--accent:#ffd1e6;--soft:#d9efe8;
  background-color:var(--bg);color:var(--on-bg)}
.home .stage,.stage .brand,.stage .nav a{color:var(--on-bg)}
.hero .amp{color:var(--hi)}
.stage .nav a.nav-cta{color:var(--ink)}
.stage .nav a:hover,.stage .nav a[aria-current="page"]{background:color-mix(in srgb,var(--on-bg) 16%,transparent)}

.trio h2{color:var(--on-band)}

.tag.paid{background:var(--soft)}
html:has(body.home)::-webkit-scrollbar-track,html:has(body.home)::-webkit-scrollbar-corner{background-color:var(--bg)}

/* the cream bands carry the extension popup's tan dots (same 16px grid, #e4cfb0), wave included */

body.home .trio::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;pointer-events:none;
  background:radial-gradient(var(--band-dots) 1.3px,transparent 1.4px) 0 0/16px 16px}
body.home .trio::before{background:radial-gradient(var(--band-dots) 1.3px,transparent 1.4px) 0 calc(var(--sc) - 1px)/16px 16px,var(--band)}

body.home{--on-bg:#1a1a1a;--on-band:#1a1a1a;--hi:#ef65a5;--band-dots:#e4cfb0}

/* ---------- calm pass: only mint, cream, ink and ONE pink (headings + main buttons). No yellow, no pale pinks. ---------- */
body.home{--accent:#cfe6df;--soft:#fff}

.tag.free,.tag.paid,.tag.soon{background:#fff}

/* ---------- flipped Meadow: the dotted popup cream is the page (hero too); the wave sections are mint ---------- */
body.home{--bg:#fff8ec;--band:#cfe6df;--accent:#fff8ec;--band-dots:transparent;
  background-image:radial-gradient(#e4cfb0 1.3px,transparent 1.4px);background-size:16px 16px}

/* ---------- headings ----------
   mint sections: solid ink with a cream offset shadow (Refactoring UI pass; reads best on the mint)
   cream page: outlined in ink with a chunky ink offset — mint for the hero + chart, pink for the closing line */
.home :is(.trio h2,.faq-side h2){color:var(--ink);-webkit-text-stroke:0;text-shadow:3px 4px 0 #fff8ec}
.home :is(.hero h1,.cmp-side h2,.final h2),.home .hero .amp{color:#cfe6df;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--ink)}
.home .hero h1{-webkit-text-stroke-width:3px;text-shadow:4px 5px 0 var(--ink)}

/* ---------- all mint: the page is mint (no dots); sections are a deeper shade of the same mint (hue 162, lightness 86% -> 80%)
   so the wave still shows. Headings are solid ink with a cream offset shadow everywhere; the closing line stays pink. ---------- */
body.home{--bg:#cfe6df;--band:#bcdcd2;--accent:#cfe6df;background-image:none}

.home :is(.hero h1,.cmp-side h2,.trio h2,.faq-side h2),.home .hero .amp{color:var(--ink);-webkit-text-stroke:0;text-shadow:3px 4px 0 #fff8ec}
.home .hero h1{text-shadow:4px 5px 0 #fff8ec}

/* ---------- per-section looks (?looks): each section can go cream and/or dotted ----------
   .sec-cream: the popup's cream #fff8ec (tan #e4cfb0 dots). Otherwise mint, with deeper-mint dots #94bfb1. */

.home :is(.stage,.demo-sec,.compare,.final,.foot){position:relative;background-color:var(--sec,transparent);background-image:var(--secdots,none);background-size:16px 16px}
/* the cards span exactly the demo's width, centred under it (same --dw), still in their own wave section */
.home .trio{width:var(--dw);max-width:none;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
/* cards section now the same mint as the hero */
body.home{--band:#cfe6df}

/* ---------- cream hero (behind the demo's top half too): ink copy, mint headline with the ink outline + offset, pink subtitle ---------- */
.home :is(.stage,.demo-sec){--sec:#fff8ec}
.home .stage{--on-bg:#1a1a1a;--hi:#ef65a5}
.home .stage .hero h1,.home .stage .hero .amp{color:#cfe6df;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:4px 5px 0 var(--ink)}

.home :is(.stage,.demo-sec){--secdots:radial-gradient(#e4cfb0 1.3px,transparent 1.4px)}
/* hero headline: white letters, ink outline + ink offset (the black-and-white look) */
.home .stage .hero h1,.home .stage .hero .amp{color:#fff}
/* ---------- ?looks "Luna" page look: pink is the one strong colour (like Luna's blue), mint + cream are the pale tints,
   flat shapes (no ink outlines), floating mint clouds + cream sparkles, cream scallops rising over the demo ---------- */
body.home.luna :is(.stage,.demo-sec){--sec:#ef65a5;--secdots:radial-gradient(rgba(255,255,255,.3) 1.8px,transparent 2px)}
body.home.luna .stage{--on-bg:#fff8ec;--hi:#cfe6df}
body.home.luna .stage .hero h1{color:#fff8ec;-webkit-text-stroke:0;text-shadow:none;font-size:clamp(44px,7vw,96px);line-height:.98;letter-spacing:-.01em}
body.home.luna .stage .hero .amp{color:#cfe6df;-webkit-text-stroke:0;text-shadow:none}
body.home.luna .stage .hero .lede{color:#fff8ec;opacity:1}
body.home.luna .stage .brand,body.home.luna .stage .nav a{color:#fff8ec}
body.home.luna .stage .nav a.nav-cta{background:#cfe6df;color:var(--ink);border-color:transparent;box-shadow:none}
body.home.luna .hero-btn{background:#cfe6df;color:var(--ink);border-color:transparent;box-shadow:none;padding-inline:32px}
body.home.luna .hero-btn:hover{background:#fff8ec}
/* decorations (added by home-demo.js) */
.home .hero{z-index:1}


.lu-s1{width:clamp(28px,3vw,44px);left:16%;top:22%;animation:lu-twinkle 4s ease-in-out infinite}
.lu-s2{width:clamp(24px,2.4vw,36px);left:30%;bottom:22%;animation:lu-twinkle 5s ease-in-out -2s infinite}
.lu-s3{width:clamp(20px,2vw,30px);right:20%;top:40%;animation:lu-twinkle 4.5s ease-in-out -1s infinite}
@media (max-width:700px){.lu-s2{display:none}}
/* the cards section goes plain cream (scallops follow); flat cards: no outlines, big soft corners, mint text panel */
body.home.luna{--band:#fff8ec}
body.home.luna .trio{--band-dots:transparent}
body.home.luna .trio h2{color:#ef65a5;text-shadow:none;font-size:clamp(34px,4.4vw,56px)}
body.home.luna .tcard{border:0;box-shadow:none;border-radius:28px;background:#cfe6df}

body.home.luna .ttxt{padding:24px 28px 28px}
body.home.luna .ttxt p{color:#2c3b37}
body.home.luna .tag{border:0;background:#fff8ec}

/* ---------- script wordmark logo, top left ---------- */
body.home.luna .brand.brand-logo img{content:url(/assets/logo-wordmark-cream.png?v=2)}

/* ---------- Simple cards (chosen) ---------- */
.ticon{display:none}
.ticon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Simple: no pictures — a pink coin with a cream icon, title, one line; flat mint cards */

.home .trio.cl-simple .tcard{text-align:center;padding:40px 28px 36px}
.home .trio.cl-simple .ttxt{padding:0}
.home .trio.cl-simple .ttxt h3{justify-content:center;font-size:26px}
.home .trio.cl-simple .ttxt p{max-width:30ch;margin-inline:auto}
.home .trio.cl-simple .ticon{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 20px;border-radius:50%;background:#ef65a5;color:#fff8ec}

/* ---------- ?looks layout "Demo last": the popup peeks out under the scallops; the demo closes the page ---------- */

body.lay-last .stage{min-height:calc(100svh - var(--pph,210px))}
.hero-pop.d-pop{position:relative;top:auto;right:auto;margin:0 auto;width:min(380px,100%);opacity:1;transform:none;pointer-events:none;
  box-shadow:6px 8px 0 var(--ink);border-width:2px;border-radius:24px}

@media (max-width:520px){body.lay-last{--pph:150px}}
.hero-pop.d-pop{transform:scale(1.3);transform-origin:50% 0}
body.lay-last{--pph:250px}
@media (max-width:520px){.hero-pop.d-pop{transform:none}body.lay-last{--pph:150px}}
.pop-wrap{position:relative;width:min(380px,100%);margin:0 auto;transition:transform .7s cubic-bezier(.3,1.3,.5,1)}
.pop-wrap .hero-pop.d-pop{width:100%}

@media (prefers-reduced-motion:reduce){.pop-wrap{transition:none}}

/* ---------- "Try it!" popup in the hero ---------- */
.hero-pop.d-pop{pointer-events:auto}
.hero-pop .try-act{cursor:pointer}
.hero-pop .pp-row.try-act:hover,.hero-pop .pp-row.try-act:focus-visible{background:#fff;outline:none}
.hero-pop .pp-row.try-act:hover .pp-ri{background:#ffd1e6}
.hero-pop .pp-big.try-act{transition:transform .12s,box-shadow .12s}
.hero-pop .pp-big.try-act:hover,.hero-pop .pp-big.try-act:focus-visible{transform:translate(-1px,-2px);box-shadow:4px 6px 0 var(--ink);outline:none}
.hero-pop .pp-big.try-act:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--ink)}
.hero-pop .pp-opt i{cursor:pointer}
.try-flash{position:fixed;inset:0;z-index:200;background:#fff;opacity:0;pointer-events:none}
.try-flash.go{animation:try-flash .45s ease-out}
@keyframes try-flash{0%{opacity:0}15%{opacity:.9}100%{opacity:0}}
.try-count{position:fixed;left:50%;top:50%;z-index:200;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 40px;border-radius:28px;background:#fff8ec;border:2px solid var(--ink);box-shadow:6px 8px 0 var(--ink);color:var(--ink);text-align:center}
.try-count.on{opacity:1;transform:translate(-50%,-50%)}
.try-count .dc-msg{font-family:var(--display);font-weight:600;font-size:22px}
.try-count .dc-num{display:grid;place-items:center;width:96px;height:96px;border-radius:24px;background:#ef65a5;color:#fff;border:2px solid var(--ink);box-shadow:4px 5px 0 var(--ink);font-family:var(--display);font-weight:600;font-size:56px}
.try-count .dc-sub{font-size:14px;color:#6b6459}
.try-rec{position:fixed;top:16px;left:50%;z-index:200;transform:translate(-50%,-150%);transition:transform .25s;display:flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;background:var(--ink);color:#fff8ec;font-family:var(--display);font-weight:600;font-size:15px;pointer-events:none}
.try-rec.on{transform:translate(-50%,0)}
.try-rec i{width:10px;height:10px;border-radius:50%;background:#ef65a5;animation:try-blink 1s steps(2) infinite}
@keyframes try-blink{50%{opacity:.2}}
.try-done{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:16px;background:rgba(26,26,26,.45)}
.try-done[hidden]{display:none}
.td-card{position:relative;width:min(440px,100%);padding:28px 28px 32px;border-radius:28px;background:#fff8ec;border:2px solid var(--ink);box-shadow:6px 8px 0 var(--ink);text-align:center;color:var(--ink);animation:td-in .3s cubic-bezier(.3,1.3,.5,1)}
@keyframes td-in{from{transform:scale(.9);opacity:0}}
.td-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink)}
.td-pic{height:200px;margin:8px auto 20px;width:150px;border-radius:14px;overflow:hidden;border:2px solid var(--ink);background:#fff}
.td-pic img{width:100%;display:block}
.td-pic.td-short{width:240px;height:150px}
.td-card h3{font-size:28px;color:#ef65a5}
.td-card p{margin:8px auto 22px;max-width:32ch;color:#4a4a4a}
.td-cta{display:flex;justify-content:center}
.td-cta .hero-btn{background:#ef65a5;color:#fff8ec;box-shadow:none}
@media (prefers-reduced-motion:reduce){.try-flash.go{animation:none}.td-card{animation:none}}
body.home .try-done .td-cta .hero-btn{background:#ef65a5;color:#fff8ec;box-shadow:none}

/* ---------- landing page after a "Try it!" capture: a window like the extension's result tab ---------- */
.try-res{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:16px;background:rgba(26,26,26,.45)}
.try-res[hidden]{display:none}
.tr-win{width:min(960px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:2px solid var(--ink);box-shadow:8px 10px 0 var(--ink);
  background-color:#fff8ec;background-image:radial-gradient(#e4cfb0 1.3px,transparent 1.4px);background-size:16px 16px;color:var(--ink);animation:td-in .3s cubic-bezier(.3,1.3,.5,1)}
.tr-tabs{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 8px 0 12px;background:#efe6d6;border-bottom:1.5px solid var(--ink)}
.tr-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:12px 12px 0 0;background:#fff8ec;border:1.5px solid var(--ink);border-bottom:0;margin-bottom:-1.5px;font-size:13px}
.tr-tab img{width:18px}
.tr-tab b{font-weight:700}
.tr-x{position:static;margin-bottom:4px}
.try-res .dr-bar{text-decoration:none}
.try-res .dr-btn{text-decoration:none;white-space:nowrap}
.tr-main{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 24px 28px;overflow:hidden}
.tr-frame{position:relative;overflow:hidden;border-radius:16px;border:1.5px solid var(--ink);box-shadow:4px 5px 0 var(--ink);background:#fff;flex:none}
.tr-frame iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;display:block;background:#fff}
.tr-full .tr-frame{overflow-y:auto;overflow-x:hidden}
.tr-full .tr-frame iframe{pointer-events:none}
.tr-tall{width:1px}
.tr-bar{display:none;width:min(420px,80%);height:8px;border-radius:999px;background:#efe6d6;border:1.5px solid var(--ink);overflow:hidden}
.tr-video .tr-bar{display:block}
.tr-bar i{display:block;height:100%;width:0;background:#ef65a5}
@media (max-width:640px){.try-res .dr-bar{flex-wrap:wrap}.try-res .dr-btn{font-size:13px}}
@media (prefers-reduced-motion:reduce){.tr-win{animation:none}}


/* ---------- proof + privacy, inside the cream cards section (no new bands): words left, two mini pages right ---------- */
.ba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(72px,9vw,120px)}
.ba h2{font-size:clamp(34px,4.4vw,56px);color:#ef65a5;margin:0 0 20px;text-shadow:none}
.ba-txt p{margin:0 0 14px;font-size:18px;line-height:1.6;color:#2c3b37;max-width:40ch}
.ba-figs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ba-fig{margin:0;padding:18px 18px 16px;border-radius:28px;background:#cfe6df;display:flex;flex-direction:column;gap:14px}
.ba-fig figcaption{text-align:center;font-family:var(--display);font-weight:600;font-size:17px;color:#2c3b37}
.ba-good figcaption{color:#ef65a5}
.ba-good figcaption::before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border-radius:50%;background:#ef65a5;color:#fff8ec;font-size:13px;vertical-align:2px}
/* the mini page: a white page with a pink header bar and soft grey blocks */
.mp{display:flex;flex-direction:column;gap:7px;height:clamp(300px,30vw,380px);overflow:hidden;padding:0 0 10px;border-radius:14px;background:#fff}
.mp i{display:block;flex:none;border-radius:5px;background:#e9e5dd;margin:0 12px}
.mp .mp-hd{position:relative;height:20px;margin:0;border-radius:0;background:#ef65a5;
  background-image:radial-gradient(circle at 14px 50%,#fff8ec 4px,transparent 4.5px),linear-gradient(90deg,transparent calc(100% - 52px),rgba(255,248,236,.7) calc(100% - 52px) calc(100% - 12px),transparent calc(100% - 12px));
  background-size:100% 100%,100% 6px;background-position:0 0,0 50%;background-repeat:no-repeat}
.mp .mp-hd:first-child{border-radius:14px 14px 0 0}
.mp .mp-hero{height:44px;margin-top:6px;background:#f6d3e3}
.mp .mp-l{height:8px;width:72%}
.mp .mp-l.s{width:48%}
.mp .mp-tiles{height:54px;background:linear-gradient(90deg,#e9e5dd 31%,transparent 31% 34.5%,#e9e5dd 34.5% 65.5%,transparent 65.5% 69%,#e9e5dd 69%);border-radius:0}
.mp .mp-btn{height:16px;width:34%;align-self:center;border-radius:999px;background:#f6d3e3}

.ba-bad .mp-hd:not(:first-child){outline:2px solid #1a1a1a;outline-offset:-2px}

/* privacy: one quiet mint panel, three short promises */
.priv{list-style:none;margin:clamp(56px,7vw,88px) 0 0;padding:clamp(24px,3vw,36px);border-radius:28px;background:#cfe6df;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.priv li{display:flex;gap:14px;align-items:flex-start}
.pv-ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff8ec;color:#ef65a5}
.pv-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.priv h3{font-size:19px;margin:2px 0 4px}
.priv p{margin:0;font-size:15px;line-height:1.55;color:#2c3b37}
.priv a{color:#c2387a;font-weight:700;white-space:nowrap}
@media (max-width:900px){
  .ba{grid-template-columns:1fr}
  .priv{grid-template-columns:1fr}
}
@media (max-width:520px){.ba-figs{gap:12px}.ba-fig{padding:12px 12px 12px;border-radius:22px}}

/* ---------- wavy banner under the hero (chosen): a mint ribbon in a wave, straddling the pink hero and the cream section ---------- */
.mqw{position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:0;transform:translateY(-50%);height:clamp(150px,15.3vw,240px);pointer-events:none;z-index:6}
.mqw svg{display:block;width:100%;height:100%;overflow:visible}
.mqw-band{fill:none;stroke:#cfe6df;stroke-width:84}
.mqw-t{font-family:var(--display);font-weight:600;font-size:46px;letter-spacing:.01em;fill:var(--ink)}
body.mq-wavy .trio::before{display:none}
body.mq-wavy .trio{padding-top:calc(clamp(150px,15.3vw,240px) / 2 + clamp(48px,6vw,80px))}

/* ---------- one set of edges: the nav, the hero and the cream content all share the same left/right margins ---------- */
.home .stage .site-header,.home .hero,.home .trio{width:min(1072px,calc(100% - 48px));max-width:none;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
@media (min-width:1200px){.home .stage .site-header,.home .hero,.home .trio{width:var(--w)}}

/* ---------- "Most tools stop at a picture.": a still mini page vs one that scrolls like a video ---------- */
.ba-txt b{font-family:var(--display);font-weight:600;color:var(--ink)}
.ba-soon{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:22px!important;font-size:16px!important}
.ba-soon span{display:inline-block;padding:3px 12px;border-radius:999px;background:#cfe6df;font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink)}
.mp{position:relative}
.mp-badge{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:5px 12px;border-radius:999px;background:#1a1a1a;color:#fff8ec;font:700 12.5px/1.2 var(--body)}
.mp-badge svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ba-good .mp-badge{background:#ef65a5;bottom:24px}
.mp-vid{display:block;padding:0}
.mp-roll{display:flex;flex-direction:column;gap:7px;padding-bottom:10px;animation:mp-roll 7s ease-in-out infinite}
.mp-roll .mp-hd{border-radius:14px 14px 0 0}
@keyframes mp-roll{0%,12%{transform:translateY(0)}78%,100%{transform:translateY(-52%)}}
.mp-rec{position:absolute;top:30px;right:10px;display:flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:#1a1a1a;color:#fff8ec;font:700 10.5px/1.4 var(--body)}
.mp-rec em{width:7px;height:7px;border-radius:50%;background:#ef65a5;animation:try-blink 1s steps(2) infinite}
.mp-prog{position:absolute;left:12px;right:12px;bottom:10px;height:5px;border-radius:999px;background:#efe6d6;overflow:hidden}
.mp-prog i{display:block;height:100%;width:100%;background:#ef65a5;transform-origin:0 50%;animation:mp-prog 7s ease-in-out infinite}
@keyframes mp-prog{0%,12%{transform:scaleX(0)}78%,100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.mp-roll,.mp-prog i,.mp-rec em{animation:none}}

/* ---------- tucked, but most of the popup peeks out above the wave ---------- */
body.lay-last{--pph:400px}
body.lay-last .hero-pop.d-pop{transform:scale(1.15)}
body.lay-last:not(.pop-shown) .hero{padding-bottom:84px}
@media (max-width:520px){body.lay-last{--pph:260px}body.lay-last .hero-pop.d-pop{transform:none}}

/* the first screen: hero + popup take whatever is left after the wave (--pph set by home-demo.js) */
body.lay-last:not(.pop-shown) .stage{min-height:0}
body.lay-last:not(.pop-shown) .hero{padding-top:8px;padding-bottom:64px}

/* ---------- ?looks Popup: Button — a clean hero with two buttons; the popup pops open over the page ---------- */

body.pop-btn.lay-last .stage{min-height:calc(100svh - clamp(150px,15.3vw,240px) * .3)}
body.pop-btn.lay-last .hero{padding-bottom:clamp(110px,11vw,160px)}
.hero-ctas .hero-demo{background:transparent;color:#fff8ec;border:2px solid #fff8ec;box-shadow:none;cursor:pointer}
.hero-ctas .hero-demo:hover{background:#fff8ec;color:var(--ink)}
.pop-float{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:16px;background:rgba(26,26,26,.4);opacity:0;transition:opacity .2s}
.pop-float[hidden]{display:none}
.pop-float.on{opacity:1}
.pf-in{position:relative;width:min(420px,100%);transform:scale(.85) translateY(16px);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.pop-float.on .pf-in{transform:none}
.pf-in .pop-wrap{width:100%;margin:0;transform:none!important}
.pf-in .hero-pop.d-pop{transform:none;width:100%}

.pf-x{position:absolute;z-index:3;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:#fff8ec;color:var(--ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:2px 3px 0 var(--ink)}
@media (prefers-reduced-motion:reduce){.pop-float,.pf-in{transition:none}}