/* The home page (plan M6): mock-up A, "Bold and playful" (design/mockups/site-a-bold.html). No fonts, images or imports from anywhere else. M6A: the hero's sign-up form. */
:root{
  --sun:#f7b41b; --sun-hi:#fcba2a; --sun-deep:#ec991e; --sun-pale:#fff1c9;
  --red:#df2e3b; --red-ink:#b81f2b;
  --navy:#202038; --navy-soft:#3a3a5c;
  --cream:#fff8e8; --paper:#ffffff; --mint:#dff5e6; --mint-ink:#16653a;
  --line:4px solid var(--navy);
  --pop:8px 8px 0 var(--navy);
  --pop-sm:5px 5px 0 var(--navy);
  --round:"SF Pro Rounded", ui-rounded, "Arial Rounded MT Bold", "Varela Round", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; background:var(--cream); color:var(--navy);
  font:21px/1.55 var(--round);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--navy); text-decoration-thickness:3px; text-underline-offset:4px}
a:hover{color:var(--red-ink)}
/* The focus ring: navy with a white halo, so it reads at 3:1 or more on every background the page uses (WCAG 1.4.11). */
:focus-visible{outline:4px solid var(--navy); outline-offset:4px; border-radius:6px; box-shadow:0 0 0 8px #fff}
h1,h2,h3{font-family:var(--round); font-weight:900; line-height:1.02; margin:0 0 .4em; letter-spacing:-.01em}
p{margin:0 0 .8em}
.wrap{max-width:1180px; margin:0 auto; padding:0 16px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* The skip link shows itself when it takes focus (WCAG 2.4.7). */
a.sr-only:focus,a.sr-only:focus-visible{position:fixed; top:10px; inset-inline-start:10px; z-index:60; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal; padding:.5em 1em; background:#fff; color:var(--navy); border:var(--line); border-radius:12px; font-weight:900}

/* The mascot: <picture> (AVIF, WebP, PNG) whose <img> carries .m; the picture itself takes no box. */
picture{display:contents}
.m{display:inline-block; flex:none; object-fit:contain; vertical-align:middle}

/* ---------- Halftone & burst textures ---------- */
.dots{background-image:radial-gradient(rgba(32,32,56,.13) 2.2px, transparent 2.6px); background-size:18px 18px}
.dots-sun{background-color:var(--sun); background-image:radial-gradient(rgba(236,153,30,.55) 3px, transparent 3.4px); background-size:20px 20px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font:900 28px/1 var(--round); color:#fff; text-decoration:none;
  background:var(--red); border:var(--line); border-radius:999px;
  padding:.62em 1.15em .62em .7em; box-shadow:var(--pop);
  transition:transform .12s, box-shadow .12s;
}
.btn .m{width:1.45em; height:1.45em; margin:-.2em 0}
.btn:hover{color:#fff; transform:translate(-2px,-2px); box-shadow:10px 10px 0 var(--navy)}
.btn:active{transform:translate(4px,4px); box-shadow:3px 3px 0 var(--navy)}
.btn.small{font-size:20px; padding:.5em .95em .5em .55em; box-shadow:var(--pop-sm); white-space:nowrap}

/* ---------- Top bar ---------- */
.top{position:sticky; top:0; z-index:30; background:var(--sun); border-bottom:var(--line)}
.top .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; min-height:76px; padding-block:6px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font:900 30px/1 var(--round); letter-spacing:.04em}
.logo .m{width:54px; height:54px; transform:rotate(-8deg)}
/* The section links only: the language menu is a <nav> in the header too (.lang-menu), so never `.top nav`. */
.top .sections{display:flex; gap:22px; font-weight:800}
.top .sections a{text-decoration:none}
.top .sections a:hover{text-decoration:underline}
@media (max-width:900px){.top .sections{display:none}}
@media (max-width:420px){.logo{font-size:22px; gap:6px}.logo .m{width:40px;height:40px}.top .btn.small{padding:.45em .85em}.top .btn.small .m{display:none}}

/* ---------- Headband ribbon divider ---------- */
.ribbon-wrap{overflow:hidden; padding:26px 0}
.ribbon{position:relative; background:var(--red); color:#fff; border-block:var(--line); transform:rotate(-1.6deg); margin:0 -2px; overflow:hidden; box-shadow:0 8px 0 var(--navy)}
.ribbon__track{display:flex; width:max-content; animation:slide 38s linear infinite}
.ribbon span{font:900 30px/1 var(--round); letter-spacing:.12em; padding:16px 22px; white-space:nowrap}
.ribbon span::after{content:"\2605"; margin-left:44px; color:var(--sun)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:var(--line)}
.hero::before{ /* comic starburst behind the mascot */
  content:""; position:absolute; inset:-40%; z-index:0;
  background:repeating-conic-gradient(from 0deg at 72% 46%, rgba(255,255,255,.55) 0 7deg, transparent 7deg 18deg);
}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:24px; padding-top:56px; padding-bottom:72px}
.kicker{display:inline-flex; align-items:center; gap:10px; background:var(--navy); color:#fff; font:800 20px/1.2 var(--round); padding:10px 18px; border-radius:999px; transform:rotate(-2deg); box-shadow:5px 5px 0 var(--red)}
.ai{display:inline-grid; place-items:center; font:900 16px/1 var(--round); letter-spacing:.04em; background:var(--red); color:#fff; border:3px solid #fff; border-radius:50%; width:2.2em; height:2.2em}
.hero h1{font-size:clamp(50px, 8.6vw, 104px); margin:22px 0 18px; text-shadow:4px 4px 0 #fff}
.hero h1 em{font-style:normal; color:var(--red); -webkit-text-stroke:2px var(--navy); paint-order:stroke fill}
.hero .lead{font-size:clamp(23px, 2.6vw, 29px); font-weight:700; max-width:30ch}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; margin:30px 0 18px}
.price-tag{display:inline-block; background:#fff; border:var(--line); border-radius:18px; padding:10px 18px; box-shadow:var(--pop-sm); transform:rotate(2deg); font-weight:800; line-height:1.2}
.price-tag b{display:block; font-size:34px; font-weight:900}
.hero .fine{font-size:20px; font-weight:700}
.hero-art{position:relative; display:grid; place-items:center; min-height:560px; padding-top:120px}
.hero-art .m.big{width:min(88vw, 460px); height:min(88vw, 460px); filter:drop-shadow(12px 14px 0 var(--navy)); transform:rotate(-7deg); animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-16px)}}
.hero-art .bubble{position:absolute; top:0; left:-2%; max-width:340px; transform:rotate(-4deg)}
.hero-art .sticker{position:absolute; right:2%; bottom:10%; transform:rotate(12deg)}
.sticker{display:grid; place-items:center; text-align:center; width:150px; height:150px; border-radius:50%; background:var(--red); color:#fff; border:var(--line); box-shadow:var(--pop-sm); font:900 22px/1.05 var(--round)}
.sticker small{display:block; font-size:17px; font-weight:800}
.speedlines{position:absolute; left:2%; bottom:16%; width:110px; height:90px; background:repeating-linear-gradient(-20deg, var(--navy) 0 6px, transparent 6px 22px); clip-path:polygon(0 30%,100% 0,100% 100%,0 70%); opacity:.85}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; padding-top:36px; padding-bottom:48px}
  .hero-art{min-height:auto; padding:150px 0 20px; order:-1}
  .hero-art .m.big{width:min(74vw, 380px); height:min(74vw, 380px)}
  .hero-art .bubble{top:0; left:0; max-width:240px}
  .hero-art .sticker{width:118px; height:118px; font-size:18px; right:0; bottom:4%}
  .sticker small{font-size:15px}
  .hero::before{background:repeating-conic-gradient(from 0deg at 50% 22%, rgba(255,255,255,.55) 0 7deg, transparent 7deg 18deg)}
}
/* Phones (owner, 2026-11-08): the headline and the email box first, Spambo and its bubble under them. Tablets and
   desktops keep the art where it was (above the words on a tablet, beside them on a desktop). */
@media (max-width:600px){
  .hero-art{order:0}
  /* The starburst follows Spambo down to the bottom of the hero. */
  .hero::before{background:repeating-conic-gradient(from 0deg at 50% 70%, rgba(255,255,255,.55) 0 7deg, transparent 7deg 18deg)}
}

/* ---------- The sign-up form (plan M6A decision 4): one big email box and one button, in the hero ---------- */
/* The header's "Get Spambo" jumps here: clear of the sticky header (80 to 127px tall as it wraps) with room to spare. */
.signup{margin:30px 0 18px; max-width:640px; scroll-margin-top:150px}
.signup [hidden]{display:none !important}
.signup-h{display:block; font:900 clamp(25px, 2.9vw, 33px)/1.15 var(--round); margin:0 0 14px; text-shadow:2px 2px 0 #fff}
.signup-row{display:flex; flex-wrap:wrap; align-items:stretch; gap:14px}
.signup-input{
  flex:1 1 280px; min-width:0; width:100%;
  font:800 24px/1.2 var(--round); color:var(--navy); background:#fff;
  border:var(--line); border-radius:999px; padding:.6em .95em; box-shadow:var(--pop-sm);
}
.signup-input::placeholder{color:#5f5f7d; opacity:1}
.signup-input[aria-invalid="true"]{border-color:var(--red-ink); box-shadow:5px 5px 0 var(--red-ink)}
.signup-btn{flex:0 0 auto; justify-content:center; cursor:pointer; overflow-wrap:anywhere; text-align:center}
.signup-btn:disabled{opacity:.75; cursor:progress; transform:none; box-shadow:var(--pop-sm)}
/* The bot trap: out of sight and out of reach, without pushing anything off the side in either direction. */
.hp{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.signup-msg{margin:0; font-weight:800}
.signup-msg:not(:empty){margin-top:14px; background:#fff; border:3px solid var(--red); border-radius:16px; padding:10px 14px; box-shadow:4px 4px 0 var(--navy); overflow-wrap:anywhere}
.signup-alt{margin:16px 0 0; font-size:19px; font-weight:700; overflow-wrap:anywhere}
.signup-done{background:#fff; border:var(--line); border-radius:24px; box-shadow:var(--pop); padding:22px 24px; transform:rotate(-1deg)}
.signup-done:focus{outline:none}
.signup-done:focus-visible{outline:4px solid var(--navy); outline-offset:4px}
.signup-done h2{font-size:clamp(32px, 3.6vw, 44px); color:var(--red); -webkit-text-stroke:1.5px var(--navy); paint-order:stroke fill}
.signup-addr{overflow-wrap:anywhere}
.signup-narr{display:flex; align-items:center; gap:16px; margin:16px 0}
.signup-narr .m{width:80px; height:80px; flex:none}
.signup-narr .bubble{font-size:20px; padding:12px 16px}
.signup-help{margin:0; font-size:17px; font-weight:700; color:var(--navy-soft)}
@media (max-width:600px){
  .signup-row{flex-direction:column}
  .signup-input{flex:none; font-size:21px}
  .signup-btn{width:100%}
  .signup-done{padding:18px 16px}
}
@media (max-width:420px){.signup-btn .m{display:none}.signup-narr .m{width:60px; height:60px}.signup-narr .bubble{font-size:18px}}

/* ---------- Speech bubbles ---------- */
.bubble{position:relative; background:#fff; border:var(--line); border-radius:28px; padding:16px 20px; font:800 22px/1.3 var(--round); box-shadow:var(--pop-sm); z-index:2}
.bubble::after{ /* the tail */
  content:""; position:absolute; width:30px; height:30px; background:#fff; border-right:var(--line); border-bottom:var(--line);
  bottom:-17px; left:44px; transform:rotate(45deg) skew(12deg,12deg);
}
.bubble.tail-right::after{left:auto; right:44px}
.bubble.tail-left::after{left:-17px; bottom:28px; transform:rotate(135deg) skew(12deg,12deg)}
.bubble.shout{background:var(--sun-pale)}
.bubble.shout::after{background:var(--sun-pale)}

/* ---------- Section heads ---------- */
section{position:relative}
.sec{padding:84px 0}
.sec-head{max-width:820px; margin:0 0 44px}
.sec-head.center{margin-inline:auto; text-align:center}
.label{display:inline-block; font:900 20px/1 var(--round); letter-spacing:.08em; text-transform:uppercase; background:var(--red); color:#fff; padding:10px 16px; border:var(--line); transform:rotate(-2deg); box-shadow:var(--pop-sm); margin-bottom:22px}
h2{font-size:clamp(42px, 6.4vw, 76px)}
.sec-head p{font-size:clamp(22px, 2.4vw, 27px); font-weight:700}

/* ---------- Comic panels ---------- */
.panels{display:grid; grid-template-columns:minmax(0,1fr); gap:56px}
.panel > *{min-width:0}
.panel{
  position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:28px; align-items:center;
  background:var(--paper); border:5px solid var(--navy); border-radius:10px; box-shadow:12px 12px 0 var(--navy);
  padding:58px 30px 30px;
}
.panel:nth-child(even){grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); transform:rotate(.5deg)}
.panel:nth-child(odd){transform:rotate(-.5deg)}
.panel:nth-child(even) .scene{order:2}
.panel .cap{ /* the comic caption box */
  position:absolute; top:-5px; left:-5px; background:var(--sun); border:5px solid var(--navy); padding:8px 16px;
  font:900 20px/1.1 var(--round); letter-spacing:.06em; text-transform:uppercase; border-radius:10px 0 10px 0;
  max-width:calc(100% + 10px); overflow-wrap:anywhere;
}
.panel .cap b{color:var(--red-ink)}
.panel h3{font-size:clamp(32px, 4vw, 46px)}
.narr{display:flex; align-items:flex-end; gap:12px; margin-top:22px}
.narr .m{width:96px; height:96px; transform:rotate(-10deg)}
.narr .bubble{flex:1; font-size:21px}
.panel:nth-child(even) .narr .m{transform:rotate(10deg)}
.ai-chip{display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:#fff; border-radius:999px; padding:6px 14px 6px 6px; font:800 18px/1 var(--round); margin-bottom:14px}
.ai-chip .ai{width:30px; height:30px; font-size:13px; border-width:2px}
.pow{position:absolute; z-index:4; display:grid; place-items:center; width:118px; height:118px; font:900 26px/1 var(--round); color:var(--navy); background:var(--sun);
  clip-path:polygon(50% 0,61% 22%,85% 9%,78% 35%,100% 42%,80% 58%,93% 82%,66% 76%,55% 100%,43% 78%,17% 92%,22% 66%,0 55%,20% 41%,8% 16%,34% 24%);
}
.pow::before{content:""; position:absolute; inset:7px; background:#fff; clip-path:inherit; z-index:-1}
@media (max-width:900px){
  .panel,.panel:nth-child(even){grid-template-columns:1fr; padding:64px 18px 24px; transform:none}
  .panel:nth-child(even) .scene{order:0}
  .narr .m{width:72px; height:72px}
}

/* ---------- The generic mail client illustration ---------- */
.scene{min-width:0}
.mc{
  font:15px/1.3 var(--text); color:#1f2433; background:#fff; border:4px solid var(--navy); border-radius:16px; overflow:hidden;
  box-shadow:var(--pop-sm); position:relative;
}
.mc-bar{display:flex; align-items:center; gap:10px; padding:9px 12px; background:#eef0f6; border-bottom:2px solid #d5d8e3}
.mc-bar i{width:11px; height:11px; border-radius:50%; background:#c9ccd8; display:inline-block}
.mc-search{flex:1; min-width:0; background:#fff; border-radius:999px; padding:5px 12px; color:#6a7084; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mc-body{display:grid; grid-template-columns:34% 66%; position:relative; height:300px}
.mc-side{background:#f6f7fb; border-right:2px solid #e3e5ee; padding:10px 6px; font-size:13.5px}
.mc-side div{height:26px; display:flex; align-items:center; gap:6px; padding:0 8px; border-radius:0 13px 13px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mc-side .on{background:#dfe4f4; font-weight:700}
.mc-side .grp{font-weight:700; color:var(--navy)}
.mc-side .sub{padding-left:22px}
.mc-side .ct{margin-left:auto; font-size:12px; font-weight:700}
.fold{width:11px; height:9px; border-radius:2px; background:#9aa0b4; flex:none; position:relative}
.fold.sp{background:var(--sun-deep)}
.mc-list{min-width:0}
.row{height:52px; display:grid; grid-template-columns:1fr auto; align-content:center; padding:0 12px; border-bottom:1px solid #eceef4; gap:0 8px; background:#fff}
.row b{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row span{grid-column:1 / -1; font-size:13px; color:#5a6075; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row time{font-size:12px; color:#6a7084}
.row.unread b{color:#000}
.row.spam b{color:#7a3b00}
.tag{display:inline-block; font:700 11px/1 var(--text); padding:3px 6px; border-radius:4px; margin-right:4px; vertical-align:1px}
.tag.red{background:#fde2e4; color:#9b1824}
.tag.sun{background:#fff0c7; color:#7a4b00}
.tag.mint{background:var(--mint); color:var(--mint-ink)}

/* Scene 1: the drag */
.drag .r-target{animation:fadeRow 7s infinite}
@keyframes fadeRow{0%,14%{opacity:1; background:#fff}18%,92%{opacity:.35; background:repeating-linear-gradient(45deg,#fff 0 6px,#f1f2f7 6px 12px)}100%{opacity:1}}
.ghost{
  position:absolute; z-index:3; top:172px; left:20%; width:42%;
  background:#fff; border:3px solid var(--navy); border-radius:10px; padding:6px 10px; font:700 13px/1.25 var(--text);
  box-shadow:4px 4px 0 var(--navy); transform:rotate(-3deg) scale(.88); opacity:1; white-space:nowrap; overflow:visible;
  animation:drag 7s infinite;
}
.ghost small{display:block; font-weight:400; color:#5a6075; overflow:hidden; text-overflow:ellipsis}
.ghost svg{position:absolute; right:-14px; bottom:-22px; width:28px; height:34px}
@keyframes drag{
  0%,14%{top:54px; left:36%; width:60%; transform:rotate(0) scale(1); opacity:0}
  16%{opacity:1; top:50px; left:37%; width:60%; transform:rotate(2deg) scale(1.03)}
  55%{top:172px; left:20%; width:42%; transform:rotate(-3deg) scale(.88); opacity:1}
  66%,100%{top:166px; left:6%; width:42%; transform:rotate(-3deg) scale(.2); opacity:0}
}
.drag .f-mkt{animation:flash 7s infinite}
@keyframes flash{0%,54%{background:transparent}58%,90%{background:var(--sun); color:var(--navy)}100%{background:transparent}}
.drop-pow{right:6px; top:-40px; width:96px; height:96px; font-size:19px; animation:popIn 7s infinite}
@keyframes popIn{0%,58%{transform:scale(0) rotate(-20deg)}64%{transform:scale(1.15) rotate(8deg)}70%,92%{transform:scale(1) rotate(6deg)}100%{transform:scale(0)}}

/* Stage 2, split (owner, 2026-11-08): two ways to teach Spambo, drag it OR tell it. The scene takes the panel's width,
   its two halves side by side with the OR badge between; on phones they stack and the badge becomes a divider. */
.panels .panel.split{grid-template-columns:minmax(0,1fr); gap:30px}
.panels .panel.split .scene{order:0}
.split-words{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:12px 36px; align-items:end}
.split-words .narr{margin-top:0}
.teach{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:0 22px; align-items:start}
.teach-col{min-width:0; display:grid; gap:14px; align-content:start}
.teach-h{justify-self:start; max-width:100%; margin:0; font:900 20px/1.1 var(--round); text-transform:uppercase; letter-spacing:.06em; padding:6px 14px; border:var(--line); border-radius:8px; background:var(--sun-pale); box-shadow:4px 4px 0 var(--navy); overflow-wrap:anywhere}
.tell .teach-h{background:var(--mint); color:var(--mint-ink)}
.teach-or{align-self:stretch; display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:6px}
.teach-or::before,.teach-or::after{content:""; flex:1; border-left:4px dashed var(--navy); opacity:.45}
.teach-or span{display:grid; place-items:center; width:80px; height:80px; border-radius:50%; background:var(--red); color:#fff; border:var(--line); box-shadow:var(--pop-sm); font:900 28px/1 var(--round); text-transform:uppercase; transform:rotate(-8deg); animation:orPulse 3.5s ease-in-out infinite}
@keyframes orPulse{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-3deg) scale(1.08)}}
.tell .thread{min-height:300px; align-content:start}
.msg blockquote{margin:8px 0 0; padding:6px 10px; border-left:3px solid #c9ccd8; background:#f6f7fb; border-radius:0 8px 8px 0; font-size:13px; line-height:1.35; color:#5a6075}
.msg blockquote b{color:#1f2433}
.tell .msg em{font-style:normal; font-size:13px; color:#5a6075}
@media (max-width:900px){.split-words{grid-template-columns:minmax(0,1fr)}.split-words .narr{margin-top:6px}}
@media (max-width:760px){
  .teach{grid-template-columns:minmax(0,1fr); gap:18px}
  .teach-or{flex-direction:row; padding:0}
  .teach-or::before,.teach-or::after{border-left:0; border-top:4px dashed var(--navy)}
  .teach-or span{width:64px; height:64px; font-size:23px}
  .tell .thread{min-height:0}
}

/* Threads (scenes 2, 3, 4) */
.thread{padding:14px; display:grid; gap:10px; background:#fff}
.t-subj{font:700 17px/1.25 var(--text); color:#111; margin:0 0 2px}
.msg{border:1.5px solid #e1e4ee; border-radius:12px; padding:10px 12px; background:#fff}
.msg .who{display:flex; align-items:center; gap:8px; font-size:13.5px; margin-bottom:4px; flex-wrap:wrap}
.msg .who b{font-size:14px}
.msg .who em{font-style:normal; color:#6a7084; font-size:12.5px}
.av{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font:700 13px/1 var(--text); color:#fff; flex:none}
.msg p{margin:0; font-size:14.5px; line-height:1.4}
.msg .fakebtn{display:inline-block; margin-top:8px; padding:6px 12px; border-radius:6px; background:#2c4fa6; color:#fff; font-weight:700; font-size:13px}
.msg.you{background:#eef3ff; border-color:#cdd9f7; margin-left:14%}
.msg.sp{border:3px solid var(--navy); background:var(--sun-pale); box-shadow:3px 3px 0 var(--navy)}
.av.me{background:none; width:34px; height:34px}
.av.me .m{width:34px; height:34px}
.av.blue{background:#2c4fa6}
.av.green{background:#4a7a3d}
.av.purple{background:#8a4fbf}
.msg.aside{border-style:dashed; text-align:center; color:#5a6075}
.msg p + p{margin-top:6px}
.msg.warn{border:3px solid var(--red); background:#fff5f5; box-shadow:3px 3px 0 var(--red)}
.msg.warn .title{font:800 15.5px/1.2 var(--text); color:#9b1824; margin-bottom:4px}
.msg.warn ul{margin:4px 0 6px; padding-left:18px; font-size:14px}
.seq > *{animation:appear 9s infinite both}
.seq > .t-subj{animation:none}
@keyframes appear{0%{opacity:0; transform:translateY(10px)}6%,92%{opacity:1; transform:none}100%{opacity:0}}
.seq.s3 > *:nth-child(3){animation-name:appear3}
.seq.s3 > *:nth-child(4){animation-name:appear4}
.seq.s4 > *:nth-child(3){animation-name:appear3}
.seq.s4 > *:nth-child(4){animation-name:appear4}
.seq.s4 > *:nth-child(5){animation-name:appear5}
@keyframes appear3{0%,25%{opacity:0; transform:translateY(10px)}31%,92%{opacity:1; transform:none}100%{opacity:0}}
@keyframes appear4{0%,50%{opacity:0; transform:translateY(10px)}56%,92%{opacity:1; transform:none}100%{opacity:0}}
@keyframes appear5{0%,70%{opacity:0; transform:translateY(10px)}76%,92%{opacity:1; transform:none}100%{opacity:0}}
.typing{display:inline-flex; gap:4px}

/* Scene 5: before and after */
.ba{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center}
.ba .mc-body{height:auto; grid-template-columns:1fr}
.ba .mc-side{display:none}
.ba .row{height:46px}
.ba-col .ba-h{font:900 22px/1 var(--round); text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px; display:inline-block; padding:6px 14px; border:var(--line); border-radius:8px; background:#fff; box-shadow:4px 4px 0 var(--navy)}
.ba-col{min-width:0}
.ba-col.after .ba-h{background:var(--mint); color:var(--mint-ink)}
.ba .arrow{font:900 64px/1 var(--round); color:var(--red); text-shadow:4px 4px 0 var(--navy)}
.messy .row{animation:jitter .5s steps(2) infinite}
.messy .row:nth-child(even){animation-delay:.25s}
@keyframes jitter{50%{transform:translateX(2px)}}
.folders-mini{display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px; background:#f6f7fb; border-top:2px solid #e3e5ee; font-size:12.5px}
.folders-mini span{background:#fff; border:1.5px solid #dcdfe9; border-radius:999px; padding:3px 9px}
.clean-note{padding:14px 12px 18px; text-align:center; color:var(--mint-ink); font-weight:700; font-size:14px}
@media (max-width:900px){
  .ba{grid-template-columns:minmax(0,1fr)}
  .ba .arrow{transform:rotate(90deg); justify-self:center}
}

/* ---------- Talk to Spambo ---------- */
.talk{background:var(--navy); color:#fff; border-block:var(--line)}
.talk .label{background:var(--sun); color:var(--navy)}
.talk h2{color:var(--sun)}
.talk .sec-head p{color:#fff}
.chat{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,260px), 1fr)); gap:30px 26px; align-items:start}
.say{position:relative; background:#fff; color:var(--navy); border:4px solid #fff; outline:4px solid var(--navy); border-radius:26px; padding:16px 20px 16px; box-shadow:7px 7px 0 var(--sun)}
.say q{display:block; font:900 clamp(25px,2.6vw,31px)/1.15 var(--round); quotes:"\201C" "\201D"}
.say small{display:block; margin-top:8px; font:700 20px/1.35 var(--round); color:var(--navy-soft)}
.say:nth-child(3n+1){transform:rotate(-1.5deg)}
.say:nth-child(3n+2){transform:rotate(1deg)}
.say.lang q{color:var(--red-ink)}
.talk-reply{display:flex; gap:20px; align-items:center; margin-top:56px; max-width:900px}
.talk-reply .m{width:150px; height:150px; animation:wiggle 2.6s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.talk-reply .bubble{color:var(--navy); font-size:24px}
@media (max-width:600px){.talk-reply{flex-direction:column; align-items:flex-start}.talk-reply .bubble.tail-left::after{left:44px; bottom:auto; top:-17px; transform:rotate(225deg) skew(12deg,12deg)}}

/* ---------- Signup steps ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,250px),1fr)); gap:26px; counter-reset:s}
.step{background:#fff; border:var(--line); border-radius:22px; padding:26px 22px 22px; box-shadow:var(--pop); position:relative}
.step::before{counter-increment:s; content:counter(s); position:absolute; top:-26px; left:18px; width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--red); color:#fff; border:var(--line); font:900 28px/1 var(--round)}
.step h3{font-size:28px; margin-top:12px}
.step p{margin:0; font-size:21px}

/* ---------- Privacy, simply ---------- */
.promises{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,340px),1fr)); gap:28px}
.promise{background:#fff; border:var(--line); border-radius:20px; padding:24px 22px; box-shadow:var(--pop); display:grid; grid-template-columns:72px 1fr; gap:18px; align-items:start}
.promise h3{font-size:28px; margin-bottom:8px}
.promise p{margin:0}
.badge{width:72px; height:72px; border-radius:50%; border:var(--line); display:grid; place-items:center; background:var(--sun)}
.badge svg{width:40px; height:40px}
.promise:nth-child(2) .badge,.promise:nth-child(5) .badge{background:var(--red)}
.promise:nth-child(3) .badge,.promise:nth-child(6) .badge{background:var(--mint)}
.privacy-guard{display:flex; align-items:center; gap:20px; margin:52px 0 0; flex-wrap:wrap}
.privacy-guard .m{width:130px; height:130px; transform:rotate(8deg)}
.privacy-guard .bubble{max-width:620px; font-size:24px}

/* ---------- Family ---------- */
.family{border-block:var(--line)}
.fam-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start}
.fam-grid > *{min-width:0}
.who-cards{display:grid; gap:20px; margin-bottom:26px}
.who-card{background:#fff; border:var(--line); border-radius:20px; padding:20px 22px; box-shadow:var(--pop-sm)}
.who-card h3{font-size:30px; margin-bottom:6px}
.who-card p{margin:0}
.fam-steps{margin:0; padding:0 0 0 1.2em; font-weight:700}
.fam-steps li{margin-bottom:10px; padding-left:6px}
.fam-steps li::marker{font-weight:900; color:var(--red-ink)}
.sees{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px}
.sees > div{background:#fff; border:var(--line); border-radius:18px; padding:16px 18px; font-size:20px}
.sees h4{font:900 22px/1.1 var(--round); margin:0 0 8px}
.sees ul{margin:0; padding-left:1.1em}
.sees .yes h4{color:var(--mint-ink)}
.sees .no h4{color:var(--red-ink)}
.fam-art{position:relative}
.fam-art .faces{display:flex; align-items:flex-end; justify-content:center; gap:4px; margin-bottom:-14px; position:relative; z-index:2}
.fam-art .faces .m.f1{width:96px; height:96px; transform:rotate(-14deg)}
.fam-art .faces .m.f2{width:170px; height:170px}
.fam-art .faces .m.f3{width:96px; height:96px; transform:rotate(14deg)}
.agerule{margin-top:22px; background:var(--sun-pale); border:3px dashed var(--navy); border-radius:16px; padding:16px 18px; font-size:20px}
@media (max-width:900px){.fam-grid{grid-template-columns:minmax(0,1fr)}.sees{grid-template-columns:1fr}}
@media (max-width:600px){.fam-art .faces .m.f1,.fam-art .faces .m.f3{width:76px;height:76px}.fam-art .faces .m.f2{width:132px;height:132px}}

/* ---------- Price ---------- */
.price-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:center}
.ticket{position:relative; background:var(--sun); border:5px solid var(--navy); border-radius:28px; padding:34px 30px; box-shadow:14px 14px 0 var(--navy); transform:rotate(-2deg); text-align:center}
.ticket .m.tk{width:150px; height:150px; position:absolute; top:-70px; right:-26px; transform:rotate(14deg)}
.ticket .amt{font:900 clamp(66px, 10vw, 112px)/.95 var(--round); letter-spacing:-.03em}
.ticket .per{font:900 30px/1.1 var(--round)}
.ticket .monthly{display:inline-block; margin:16px 0 22px; background:#fff; border:var(--line); border-radius:999px; padding:8px 18px; font-weight:800}
.ticket .fx{font-size:20px; font-weight:700; margin:18px 0 0}
.terms-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; min-width:0}
.price-wrap > *{min-width:0}
.terms-list li{background:#fff; border:var(--line); border-radius:18px; padding:16px 20px; box-shadow:var(--pop-sm)}
.terms-list b{display:block; font:900 24px/1.2 var(--round); margin-bottom:4px}
.beta-note{margin-top:28px; font-weight:700; background:#fff; border:3px dashed var(--navy); border-radius:16px; padding:14px 18px}
@media (max-width:900px){.price-wrap{grid-template-columns:minmax(0,1fr); gap:80px}.ticket{margin-top:50px}.ticket .m.tk{right:8px; width:120px; height:120px}}

/* ---------- FAQ ---------- */
.faq{display:grid; grid-template-columns:minmax(0,1fr); gap:18px; max-width:980px; min-width:0}
.faq details{background:#fff; border:var(--line); border-radius:18px; box-shadow:var(--pop-sm)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:18px; align-items:center; padding:20px 22px; font:900 clamp(22px,2.4vw,26px)/1.25 var(--round)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--sun); border:3px solid var(--navy); font:900 30px/1 var(--round); transition:transform .2s}
.faq details[open] summary::after{content:"\2212"; background:var(--red); color:#fff}
.faq details[open] summary{border-bottom:3px dashed var(--navy)}
.faq .ans{padding:18px 22px 22px; font:20px/1.6 var(--text)}
.faq .ans ul{padding-left:1.2em; margin:.4em 0 .8em}
.faq .ans li{margin-bottom:.45em}
.faq .ans blockquote{margin:.4em 0 .8em; padding:12px 16px; border-left:6px solid var(--sun); background:var(--sun-pale); border-radius:0 12px 12px 0}
.faq-wrap{display:grid; grid-template-columns:1fr 240px; gap:30px; align-items:start}
.faq-side{position:sticky; top:110px; text-align:center}
.faq-side .m{width:200px; height:200px; transform:rotate(-12deg)}
.faq-side .bubble{font-size:20px}
@media (max-width:900px){.faq-wrap{grid-template-columns:minmax(0,1fr)}.faq-side{display:none}}

/* ---------- Final CTA & footer ---------- */
.final{text-align:center; border-top:var(--line)}
.final .m.fin{width:min(60vw, 260px); height:min(60vw, 260px); filter:drop-shadow(10px 10px 0 var(--navy)); animation:jump 2.4s ease-in-out infinite}
@keyframes jump{0%,60%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-26px) rotate(-6deg)}}
.final h2{margin-top:20px}
footer{background:var(--navy); color:#fff; padding:44px 0 36px; font-size:20px}
footer a{color:#fff}
footer a:hover{color:var(--sun)}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:center}
.foot .logo{color:#fff}
.foot-links{display:flex; flex-wrap:wrap; gap:14px 26px; font-weight:800}
.refer{margin-top:22px; color:#d9d9ea}

@media (max-width:600px){
  body{font-size:20px}
  .sec{padding:64px 0}
  .btn{font-size:24px}
  .say{padding:14px 16px}
  .promise{grid-template-columns:1fr; gap:12px}
}

/* The smallest screens (320 CSS px, a phone or 400% zoom; WCAG 1.4.10): nothing runs off the side. */
@media (max-width:360px){
  .panel,.panel:nth-child(even){padding:60px 12px 20px; box-shadow:8px 8px 0 var(--navy)}
  .panel .cap{font-size:17px; padding:7px 12px; letter-spacing:.03em}
  .panel p,.panel h3,.narr .bubble,.faq summary,.faq .ans,.terms-list li,.ticket{overflow-wrap:anywhere}
  .faq summary{padding:16px 14px; gap:10px}.faq .ans{padding:14px 14px 18px}
  .ticket{padding:30px 16px; box-shadow:8px 8px 0 var(--navy)}.terms-list li{padding:14px 14px}
  .fam-art .faces .m.f1,.fam-art .faces .m.f3{width:62px;height:62px}.fam-art .faces .m.f2{width:110px;height:110px}
}

/* Respect people who ask for less motion: everything shows in its final, still state. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .drag .r-target{opacity:.35}
  .drag .f-mkt{background:var(--sun)}
}

/* ---------- What the mock-up set inline (the static CSP allows no inline style) ---------- */
.scene figure,.fam-art figure{margin:0}
.mc.drag{overflow:visible}
.ribbon.alt{transform:rotate(1.4deg)}
.fam-how{font-size:32px}
.fam-art .mc-body{height:220px}
.mc-side .sub2{padding-left:34px}
.faq-sec{border-top:var(--line)}
.final-text{font-size:26px; font-weight:800}
.made{margin-top:22px}
.lang-nav{display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:18px; font-weight:800}

/* ---------- Languages (plan M6, Q13) ---------- */
/* The header's switcher: a <details> menu, so it opens with no script. */
.top-end{display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-width:0}
.lang-pick{position:relative}
.lang-pick summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; background:#fff; border:3px solid var(--navy); border-radius:999px; padding:6px 10px; font:900 16px/1 var(--round); box-shadow:3px 3px 0 var(--navy)}
.lang-pick summary::-webkit-details-marker{display:none}
.lang-pick summary svg{width:22px; height:22px; flex:none}
.lang-pick[open] summary{background:var(--sun-pale)}
/* Opens from the button's start edge: on phones and some widths the button sits at the start of its row, and an end-anchored menu ran off the screen. */
.lang-menu{position:absolute; top:calc(100% + 10px); inset-inline-start:0; z-index:40; display:grid; min-width:180px; max-width:calc(100vw - 32px); background:#fff; border:var(--line); border-radius:16px; box-shadow:var(--pop-sm); padding:8px; font-weight:800}
.lang-menu a,.lang-menu span{display:block; padding:8px 12px; border-radius:10px; text-decoration:none; white-space:nowrap}
.lang-menu a:hover{background:var(--sun-pale)}
.lang-menu [aria-current]{background:var(--sun); color:var(--navy)}
.lang-nav [aria-current]{color:var(--sun)}
@media (max-width:420px){.top-end{gap:6px}.lang-pick summary{padding:5px 7px; font-size:14px}.lang-pick summary svg{width:20px; height:20px}.lang-pick summary span{display:none}.top .btn.small{font-size:16px; padding:.45em .7em}html:not(:lang(en)) .top .logo .m{display:none}}

/* Long words in every language wrap instead of overflowing a phone's width. */
h1,h2,h3,h4,.bubble,.say q{overflow-wrap:break-word; hyphens:auto}
/* Scripts with tall marks need more room between lines, and letter-spacing breaks Arabic's joined letters. */
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(hi) h1,:lang(hi) h2,:lang(hi) h3{line-height:1.3}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3{line-height:1.2}
:lang(ar) body,:lang(hi) body{line-height:1.7}
:lang(ar) .label,:lang(ar) .ribbon,:lang(ar) .panel .cap,:lang(ar) .ba-col .ba-h,:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,
:lang(hi) .label,:lang(hi) .ribbon,:lang(hi) .panel .cap,:lang(hi) .ba-col .ba-h,:lang(ar) .teach-h,:lang(hi) .teach-h{letter-spacing:0}

/* ---------- Right to left (Arabic): mirror what the direction doesn't mirror on its own ---------- */
/* Grids and flex rows follow dir="rtl" by themselves; positioned things, one-sided borders and paddings don't. */
[dir="rtl"] .bubble::after{left:auto; right:44px; transform:scaleX(-1) rotate(45deg) skew(12deg,12deg)}
[dir="rtl"] .bubble.tail-right::after{right:auto; left:44px}
[dir="rtl"] .bubble.tail-left::after{left:auto; right:-17px; transform:scaleX(-1) rotate(135deg) skew(12deg,12deg)}
/* An address reads left to right, kept to the right edge of the box on a right-to-left page. */
[dir="rtl"] .signup-input{direction:ltr; text-align:right}
[dir="rtl"] .signup-done{transform:rotate(1deg)}
@media (max-width:600px){[dir="rtl"] .talk-reply .bubble.tail-left::after{right:44px; top:-17px; transform:scaleX(-1) rotate(225deg) skew(12deg,12deg)}}
[dir="rtl"] .hero-art .bubble{left:auto; right:-2%; transform:rotate(4deg)}
[dir="rtl"] .hero-art .sticker{right:auto; left:2%; transform:rotate(-12deg)}
[dir="rtl"] .speedlines{left:auto; right:2%; transform:scaleX(-1)}
@media (max-width:900px){[dir="rtl"] .hero-art .bubble{right:0}[dir="rtl"] .hero-art .sticker{left:0}}
[dir="rtl"] .panel .cap{left:auto; right:-5px; border-radius:0 10px 0 10px}
[dir="rtl"] .ai-chip{padding:6px 6px 6px 14px}
[dir="rtl"] .btn{padding:.62em .7em .62em 1.15em}
[dir="rtl"] .btn.small{padding:.5em .55em .5em .95em}
[dir="rtl"] .mc-side{border-right:0; border-left:2px solid #e3e5ee}
[dir="rtl"] .mc-side div{border-radius:13px 0 0 13px}
[dir="rtl"] .mc-side .sub{padding-left:8px; padding-right:22px}
[dir="rtl"] .mc-side .sub2{padding-left:8px; padding-right:34px}
[dir="rtl"] .mc-side .ct{margin-left:0; margin-right:auto}
[dir="rtl"] .tag{margin-right:0; margin-left:4px}
[dir="rtl"] .msg.you{margin-left:0; margin-right:14%}
[dir="rtl"] .msg.warn ul{padding-left:0; padding-right:18px}
[dir="rtl"] .msg blockquote{border-left:0; border-right:3px solid #c9ccd8; border-radius:8px 0 0 8px}
[dir="rtl"] .ba .arrow{transform:scaleX(-1)}
@media (max-width:900px){[dir="rtl"] .ba .arrow{transform:rotate(90deg)}}
[dir="rtl"] .ghost{left:auto; right:20%; animation-name:dragRtl}
[dir="rtl"] .ghost svg{right:auto; left:-14px; transform:scaleX(-1)}
@keyframes dragRtl{
  0%,14%{top:54px; right:36%; width:60%; transform:rotate(0) scale(1); opacity:0}
  16%{opacity:1; top:50px; right:37%; width:60%; transform:rotate(-2deg) scale(1.03)}
  55%{top:172px; right:20%; width:42%; transform:rotate(3deg) scale(.88); opacity:1}
  66%,100%{top:166px; right:6%; width:42%; transform:rotate(3deg) scale(.2); opacity:0}
}
[dir="rtl"] .drop-pow{right:auto; left:6px}
[dir="rtl"] .step::before{left:auto; right:18px}
[dir="rtl"] .fam-steps{padding:0 1.2em 0 0}
[dir="rtl"] .fam-steps li{padding-left:0; padding-right:6px}
[dir="rtl"] .sees ul,[dir="rtl"] .faq .ans ul{padding-left:0; padding-right:1.1em}
[dir="rtl"] .faq .ans blockquote{border-left:0; border-right:6px solid var(--sun); border-radius:12px 0 0 12px; text-align:left}
[dir="rtl"] .ticket .m.tk{right:auto; left:-26px; transform:rotate(-14deg)}
@media (max-width:900px){[dir="rtl"] .ticket .m.tk{left:8px}}
/* The ribbons scroll the same way in every direction (their two copies of the words make the loop). */
[dir="rtl"] .ribbon__track{direction:ltr}
[dir="rtl"] .ribbon span{direction:rtl; unicode-bidi:isolate}
[dir="rtl"] .ribbon span::after{margin-left:0; margin-right:44px}
/* An English command on a right-to-left page reads left to right, its quotes and full stop where English puts them. */
[dir="rtl"] q:lang(en),[dir="rtl"] span:lang(en){direction:ltr; unicode-bidi:isolate}
[dir="rtl"] .say q:lang(en){text-align:right}