/* built by build.mjs from landing.css; edit landing.css, then run: node build.mjs */
/* ReplyBox landing · V3 (7 Oct 2026): an AI-first "Intelligent Reply System" page on the light Kreativ ground
   (Plus Jakarta Sans headings + DM Sans, devices and glass panels, soft glows; V3.2) in the ReplyBox emerald, with ONE extra colour for AI.
   Phone first. Motion is opacity/transform only and runs under html.motion (set in the head when the visitor has not asked
   for reduced motion). Fixed elements: the header, the floating WhatsApp button, the menu and the film dialog.
   This is the shared stylesheet of every page. A page's own styles go in <page>.css, loaded after it.

   THE AI COLOUR. One token pair, violet --ai1 #7c3aed -> fuchsia --ai2 #d946ef, on AI things only (every one carries
   data-ai): AI chips, the "extremely smart" words, the AI band, Toppie's draft strip, the Ask Toppie and voice-typing
   chips. Nothing else on the page uses a violet or fuchsia hue (avatars and presence dots included). Emerald --accent is
   the product colour; WhatsApp green is for WhatsApp things only.

   ONE GRID. Every section sits in .wrap (max 1152 px, 20 px gutter on a phone, 24 px from 640 px) and keeps one left
   edge for its words: chip, heading, line, button. Pictures are <figure>s and may sit anywhere inside the container.

   TWO PARTS. Everything above the line "@critical-end" is what the first screen of the home page needs; build.mjs
   writes it to landing.critical.css (loaded in the head of the home page) and the rest to landing.rest.css (loaded in
   the body, after the logo wall). Other pages load this whole file. Keep first-screen styles above the line.
   Part 1: fonts · tokens · base · header · buttons, chips · floating WhatsApp button · main + hero ground · AI tokens ·
           hero + its product picture · the cast · logo wall · first-screen motion
   Part 2: menu · sections, bands (shared with pricing) · section heads · problem · AI band + cards · Ask Toppie ·
           voice typing · team inbox + all features · numbers · watch (film + tour) · pricing teaser · questions ·
           final call · faq + cta (pricing) · footer · motion */

/* ------------------------------------------------------------------ fonts */
/* V3.2 (CY 8 Oct): every heading in Plus Jakarta Sans (one variable woff2, latin, weights 200-800, self-hosted, preloaded in
   the head of both pages). DM Sans stays the body face. zh/th fall back to the CJK / Thai stack in --f-head. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(assets/fonts/plus-jakarta-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/dm-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* fallbacks sized to the web fonts, so the swap does not re-wrap a line */
@font-face{font-family:"PJS Fallback";font-weight:600 800;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:103%;ascent-override:104%;descent-override:28%;line-gap-override:0%}
@font-face{font-family:"PJS Fallback";font-weight:200 500;src:local("Arial"),local("ArialMT");size-adjust:106%;ascent-override:104%;descent-override:28%;line-gap-override:0%}
@font-face{font-family:"DM Fallback";font-weight:400 500;src:local("Arial"),local("ArialMT");size-adjust:106%;ascent-override:93.6%;descent-override:29.2%;line-gap-override:0%}
@font-face{font-family:"DM Fallback";font-weight:600 700;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:102%;ascent-override:97.3%;descent-override:30.4%;line-gap-override:0%}

:root{
  --bg:#f3f7f5; --fg:#07130f; --fg-rgb:7,19,15;
  /* The accent. Every page-chrome colour that follows the brand is one of these, so the page is re-coloured here
     and nowhere else (README.md). Product-picture colours (--em, number tags, avatars, chat bubbles) and the
     WhatsApp green (--wa, for WhatsApp things only) are separate on purpose and do not follow it. */
  --accent:#116956;          /* ReplyBox emerald: buttons, kickers, numbers, check boxes, the focus ring */
  --accent-hi:#178a70;       /* top of the button gradient */
  --accent-lt:#3fae96;       /* light end of the small gradients: step numbers, bar fills */
  --accent-dk:#0c4f41;       /* text on a tint */
  --accent-rgb:17,105,86;    /* --accent as r,g,b for shadows and rings: rgba(var(--accent-rgb),.5) */
  --glow-rgb:108,202,182;    /* the soft glows */
  --t0:#f5fbfa; --t1:#dcf1ed; --t2:#eef9f6; --t3:#e5f5f2;   /* tints: lightest · card-art top · card-art bottom · middle */
  --mint:#e9f5f0;            /* the tinted section ground */
  --line:#a5d8cd; --dash:#96d3c6;                            /* dashed connector lines · dashed outlines */
  --wa:#25d366; --wa-dk:#1da851; --wa-rgb:37,211,102;        /* WhatsApp green */
  --f-head:"Plus Jakarta Sans","PJS Fallback","PingFang SC","Noto Sans SC","Noto Sans Thai","Thonburi",system-ui,sans-serif;
  /* V3.2: ONE visual system for every UI picture: a device (the phone, the laptop) or a designed panel with depth
     (a layered shadow, a 1 px inner highlight), on a three-step radius scale */
  --r-dev:34px; --r-panel:22px; --r-in:14px;
  --sh-panel:0 1px 2px rgba(7,19,15,.04),0 14px 34px -18px rgba(8,40,30,.3),0 0 0 1px rgba(7,19,15,.06),inset 0 1px 0 rgba(255,255,255,.9);
  --sh-float:0 36px 80px -34px rgba(8,50,38,.5),0 14px 30px -18px rgba(8,40,30,.28),0 0 0 1px rgba(7,19,15,.06),inset 0 1px 0 rgba(255,255,255,.85);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --f-body:"DM Sans","DM Fallback","PingFang SC","Noto Sans SC","Noto Sans Thai","Thonburi",ui-sans-serif,system-ui,sans-serif;
  --f-app:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Noto Sans SC",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,figure,blockquote{margin:0;padding:0}
h1,h2,h3,h4{font-family:var(--f-head)} /* V3.2 r4: every heading in Plus Jakarta Sans, also the ones a class does not size */
ul{list-style:none}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
section[id],article[id]{scroll-margin-top:88px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:12px;top:-60px;z-index:60;padding:12px 16px;border-radius:12px;background:#000;color:#fff;font-size:15px}
.skip:focus{top:12px}
.page{position:relative;min-height:100vh;overflow-x:hidden;overflow-x:clip}
.wrap{width:100%;max-width:1152px;margin-inline:auto;padding-inline:20px}
@media (min-width:640px){.wrap{padding-inline:24px}}

/* ----------------------------------------------------------- header (glass) */
/* Clear over the top of the page; once the page has moved (core.js: .is-stuck) a translucent, strongly blurred bar with a
   hairline, so the words of the page never read through it. */
.nav-sentinel{position:absolute;left:0;top:0;width:1px;height:24px;pointer-events:none}
.nav{position:fixed;top:8px;left:50%;z-index:50;width:min(1120px,calc(100% - 16px));transform:translateX(-50%)}
.nav__bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px;padding:6px 6px 6px 14px;border-radius:18px;background:rgba(255,255,255,0);box-shadow:0 0 0 1px rgba(255,255,255,0);transition:background-color .3s,box-shadow .3s}
.nav.is-stuck .nav__bar{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);box-shadow:0 12px 34px -16px rgba(8,40,30,.32),0 0 0 1px rgba(8,40,30,.09),inset 0 1px 0 rgba(255,255,255,.8)}
.nav__brand{display:flex;flex:none;align-items:center;min-height:44px}
.nav__brand img{height:24px;width:auto}
/* CY 4 Nov: the bar is logo · Features · Pricing · Sign in · one WhatsApp button · the menu icon (craft.md › Restraint
   "simplify before polishing"; "say it once"). A phone: logo · Sign in · menu icon, the floating button is its WhatsApp
   button. From 768 to 899 px the WhatsApp button is the glyph only and stays away while the page's own first WhatsApp
   button is on screen (core.js 3b). One gap (8 px) between controls, never leftover space-between (craft.md › Spacing). */
.nav__links{display:none}
.nav__right{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;border-radius:12px;font-size:15px;font-weight:600;color:rgba(var(--fg-rgb),.78);white-space:nowrap;transition:color .2s}
.nav__link:hover{color:var(--fg)}
.nav .nav__wa{width:44px;min-height:44px;padding:0;border-radius:14px;font-size:15px;transition:opacity .22s,visibility .22s}
.nav .nav__wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.js .nav__wa.is-away{opacity:0;visibility:hidden;pointer-events:none}
.nav__menu{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;font-size:22px;color:var(--fg);transition:background-color .2s}
.nav__menu:hover,.nav__menu[aria-expanded="true"]{background:rgba(var(--fg-rgb),.07)}
.nav__menu:focus-visible{outline-offset:-2px;border-radius:14px} /* round 19: the ring inside the button's own box, on the bar's edge, never past it (craft.md › Restraint "focus rings sit fully inside the content edge") */
@media (max-width:767px){.nav .nav__wa{display:none}}
@media (min-width:380px){.nav__brand img{height:26px}}
@media (min-width:600px){.nav__brand img{height:28px}}
@media (min-width:900px){
  .nav{top:14px;width:min(1120px,calc(100% - 32px))}
  .nav__bar{min-height:60px;padding:8px 8px 8px 20px}
  .nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
  .nav__right{gap:8px;margin-left:12px}
  .nav__signin{display:none}
  .nav .nav__wa{width:auto;padding:0 18px 0 15px}
  .nav .nav__wa span{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .js .nav__wa.is-away{opacity:1;visibility:visible;pointer-events:auto}
}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:14px;font-size:15px;font-weight:500;white-space:nowrap;transition:translate .2s,box-shadow .2s,background-color .2s}
.btn--lg{min-height:50px;padding:0 24px;font-size:16px}
.btn--xl{min-height:58px;padding:0 30px;border-radius:18px;font-size:18px}
.btn--primary{background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#fff;box-shadow:0 10px 25px -8px rgba(var(--accent-rgb),.6)}
.btn--white{background:#fff;color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(7,19,15,.09)}
.btn--black{background:#000;color:#fff}
.btn--navy{background:#0a2a22;color:#fff;font-weight:600;box-shadow:0 10px 30px -10px rgba(10,42,34,.5)}
.btn--glass{background:rgba(255,255,255,.75);color:#0a2a22;font-weight:600;box-shadow:0 0 0 1px rgba(10,42,34,.1)}
/* WhatsApp green, for WhatsApp buttons only, with the official glyph */
/* the fill runs #118049 to #0e7440: white text on it measures 4.99:1 to 5.85:1 (the bright #25d366 gave 1.9:1) */
.btn--wa{background:linear-gradient(180deg,#118049,#0e7440);color:#fff;font-weight:700;letter-spacing:.005em;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px -10px rgba(14,116,64,.75),0 0 0 1px rgba(10,90,48,.5)}
.btn--wa .ico--wa{font-size:1.3em;color:#fff}
.btn--wa{max-width:100%;padding-block:10px;line-height:1.2;text-align:center;white-space:normal} /* a long label (BM, Thai, any language at 320) wraps to two lines and stays inside the screen */
.ico--play{font-size:15px;color:var(--accent)}
.ico--wa{font-size:19px;color:#1fb955;stroke:none}
@media (hover:hover){
  .btn--primary:hover,.btn--white:hover,.btn--navy:hover,.btn--wa:hover{translate:0 -2px}
  .btn--wa:hover{background:linear-gradient(180deg,#0f7743,#0c6a3a)}
  .btn--black:hover{background:rgba(0,0,0,.85)}
  .btn--glass:hover{background:#fff}
}
/* small chips: "Add-on" (amber, so it is never mistaken for a feature colour), a soft name chip, a tiny count */
.addon,.softchip,.statchip{display:inline-flex;align-items:center;flex:none;height:22px;padding:0 8px;border-radius:7px;font-family:var(--f-body);font-size:12px;font-style:normal;font-weight:600;line-height:1;letter-spacing:.01em;white-space:nowrap}
.addon{background:#fff1cf;color:#7a4d00;box-shadow:0 0 0 1px rgba(122,77,0,.16)}
.softchip{background:var(--t1);color:var(--accent-dk)}
.softchip--plain{background:#fff;box-shadow:0 0 0 1px rgba(7,19,15,.1);color:rgba(var(--fg-rgb),.7)}
.statchip{background:rgba(var(--accent-rgb),.09);color:var(--accent)}

/* --------------------------------------------- floating WhatsApp button */
.wa-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(180deg,#2bd96c,#1fbf5c);color:#fff;box-shadow:0 12px 28px -8px rgba(var(--wa-rgb),.9),0 2px 6px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.3);transition:opacity .22s,visibility .22s}
.wa-fab svg{width:26px;height:26px}
.motion .wa-fab::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);opacity:0;animation:fab-ring 1.6s cubic-bezier(.25,.8,.25,1) 1s 1 both;pointer-events:none} /* one ring as the button arrives, then still: "holding a result means stop" (Benji r4; it pulsed forever) */
.wa-fab__label{position:absolute;right:60px;top:50%;padding:9px 13px;border-radius:12px;background:#0a2a22;font-size:14px;font-weight:600;color:#fff;white-space:nowrap;opacity:0;visibility:hidden;transform:translate(6px,-50%);transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none}
@media (hover:hover){.wa-fab:hover .wa-fab__label,.wa-fab:focus-visible .wa-fab__label{opacity:1;visibility:visible;transform:translate(0,-50%)}}
.wa-fab.is-ducked,.js .wa-fab.is-away,.is-modal .wa-fab{opacity:0;visibility:hidden;pointer-events:none}
html:has(dialog[open]) .wa-fab{opacity:0;visibility:hidden;pointer-events:none}
@media (min-width:900px){.wa-fab{right:24px;bottom:24px;width:56px;height:56px}.wa-fab svg{width:30px;height:30px}}

/* ----------------------------------------------- main + the hero ground (pricing uses .main, .hero-bg, .pill) */
.main{position:relative;padding-top:66px;padding-bottom:48px} /* round 20: the last section ends one section gap above the footer, not two */
/* the ground behind the hero: a soft green mesh and a dot grid that fades out. Plain CSS, nothing moves. */
.hero-bg{position:absolute;z-index:-1;left:0;right:0;top:0;height:1080px;overflow:hidden;pointer-events:none;background:radial-gradient(64% 34% at 6% 6%,rgba(var(--wa-rgb),.16),transparent 70%),radial-gradient(58% 30% at 98% 3%,rgba(var(--accent-rgb),.17),transparent 70%),radial-gradient(130% 40% at 50% 52%,rgba(var(--glow-rgb),.52),transparent 72%)}
.hero-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(var(--accent-rgb),.24) 1px,transparent 0);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 80% 46% at 50% 22%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse 80% 46% at 50% 22%,#000 20%,transparent 72%)}
.hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,rgba(243,247,245,0),var(--bg))}
.grain{position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:180px 180px;opacity:.28;mix-blend-mode:multiply;pointer-events:none}
/* the small AI mark (V3.2): a superscript chip in the AI colour beside an AI feature's name */
.aisup{display:inline-block;margin-left:.3em;padding:.12em .36em;border-radius:.4em;background:var(--ai-grad);font-family:var(--f-body);font-size:max(9px,.5em);font-weight:800;line-height:1.2;letter-spacing:.04em;vertical-align:top;color:#fff;transform:translateY(-.1em)}
.aisup--w{background:#fff;color:var(--ai-ink)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.04);font-size:13px;white-space:nowrap}
.pill__soft{color:rgba(var(--fg-rgb),.8)}
.pill__flag{width:20px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}

/* ------------------------------------------------------------- AI colour */
:root{
  --ai1:#7c3aed; --ai2:#d946ef; --ai-ink:#6d28d9; --ai-rgb:124,58,237; --ai2-rgb:217,70,239;
  --ai-grad:linear-gradient(100deg,#7c3aed 0%,#a63cec 50%,#d946ef 100%);
  --ai-tint:#f6f1ff;
  --sec:24px;              /* half the space between sections (phone): 24 px + a 1 px line + 24 px = 49 px */
}
@media (min-width:900px){:root{--sec:60px}}
/* AI words: the violet-to-fuchsia gradient set in the letters (each line keeps the whole gradient) */
.ai-words{background:var(--ai-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* V3.1: the "extremely smart" words glow: a darker run of the AI gradient in the letters (every stop 4.5:1 or more on white),
   an AI-coloured halo (drop-shadow, which a gradient-filled text keeps), and a slow shimmer that moves only the
   gradient's background-position, only while the words are on screen (data-art + is-inview). Reduced motion: the still glow. */
.ai-glow{background-image:linear-gradient(100deg,#6d28d9 0%,#8b2fd6 35%,#a21caf 65%,#6d28d9 100%);background-size:220% 100%;background-position:0% 50%;filter:drop-shadow(0 0 7px rgba(var(--ai-rgb),.42)) drop-shadow(0 1px 1px rgba(var(--ai2-rgb),.25))}
.motion .is-inview .ai-glow,.motion .is-inview.ai-glow{animation:ai-shimmer 5s ease-in-out infinite}
@keyframes ai-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* chips: one small label per section. Spans, never paragraphs, so they are not body text. */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;align-self:flex-start;gap:7px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(7,19,15,.09),0 1px 2px rgba(7,19,15,.04);font-family:var(--f-body);font-size:13.5px;font-weight:600;line-height:1;letter-spacing:.005em;color:rgba(var(--fg-rgb),.78);white-space:nowrap}
.chip .ico{flex:none;font-size:15px;color:var(--accent)}
.chip--plain{padding:0 12px;background:rgba(var(--fg-rgb),.04);box-shadow:none}
.chip--plain .ico{color:rgba(var(--fg-rgb),.6)}
.chip--ai{background:linear-gradient(#fff,#fff) padding-box,var(--ai-grad) border-box;border:1.5px solid transparent;box-shadow:0 6px 16px -10px rgba(var(--ai-rgb),.7);color:var(--ai-ink)}
.chip--ai .ico{color:var(--ai1)}
.chip--ai-soft{padding:0 12px;background:var(--ai-tint);box-shadow:inset 0 0 0 1px rgba(var(--ai-rgb),.22);color:var(--ai-ink)}
.chip--dark{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff}
.chip--dark .ico{color:#8ef0cf}

/* -------------------------------------------------------------- the cast */
/* build.mjs @cast: the cast's own web file in a box cut to the picture's ink (the transparent margin falls outside it) */
.cast{position:relative;display:block;aspect-ratio:var(--ar);overflow:hidden;pointer-events:none}
.cast picture{display:contents}
.cast img{position:absolute;max-width:none;height:auto}

/* ------------------------------------------------------------------- hero */
.hero3{position:relative;padding-top:20px}
.hero3__copy{display:flex;flex-direction:column;align-items:flex-start}
.hero3__title{font-family:var(--f-head);font-size:2.5rem;font-weight:700;line-height:1.06;letter-spacing:-.04em;text-wrap:balance;color:#05140f}
@media (max-width:379px){.hero3__title{font-size:2.25rem}}
/* V3.1: the slogan is the kicker above the outcome H1 */
.hero3__slogan{margin-bottom:12px;font-family:var(--f-head);font-size:1.2rem;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:#05140f;text-wrap:balance}
/* the struck word "hours": a red line sweeps across it (transform only); the word then dims. Without the script, or with
   reduced motion, the line is there and the word is dim: the finished frame. */
.h1x{position:relative;display:inline-block}
.h1x>span{transition:opacity .4s var(--ease)}
.h1x__line{position:absolute;left:-2%;right:-2%;top:52%;height:.085em;border-radius:3px;background:#d93025;transform:scaleX(1);transform-origin:0 50%;transition:transform .55s var(--ease)}
/* Without motion (or before the reveal timeout) this is the finished frame. With motion the FIRST paint is already the start
   frame (word whole, no line, no stopwatch), so the finished frame never shows and then rewinds (Benji round 2). */
[data-outcome] .h1x>span{opacity:.5}
.motion [data-outcome]:not(.is-done):not(.p-strike) .h1x>span{opacity:1}
.motion [data-outcome]:not(.is-done):not(.p-strike) .h1x__line{transform:scaleX(0)}
.rb-snap,.rb-snap *{transition:none!important}
/* CY 4 Nov: the feature line under the H1. One word rolls at a time in one grid cell sized to the longest word
   (motion.md › Changing text: "every change moves", "change only what changed"; travel curve, 0.45 s). Each word is a
   small opaque pill with its icon; the AI one wears the AI colour. Reduced motion: the still sentence instead. */
.hero3__rot{max-width:560px;margin-top:18px;font-size:18px;font-weight:500;line-height:1.5;color:rgba(var(--fg-rgb),.72);text-wrap:pretty}
.hero3__rot--still{display:none}
html:not(.motion) .hero3__rot--live{display:none}
html:not(.motion) .hero3__rot--still{display:block}
.rot{display:inline-grid;vertical-align:middle;margin-left:.15em}
.rot__w{grid-area:1/1;display:inline-flex;align-items:center;justify-self:start;gap:.4em;height:1.9em;padding:0 .7em 0 .55em;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(7,19,15,.08),0 6px 16px -10px rgba(7,19,15,.35);font-weight:700;color:var(--accent-dk);white-space:nowrap;opacity:0;transform:translateY(.75em);transition:opacity .28s var(--ease),transform .45s cubic-bezier(.45,0,.1,1)}
.rot__w .ico{flex:none;font-size:1em;color:var(--accent)}
.rot__w--ai{color:var(--ai-ink)}
.rot__w--ai .ico{color:var(--ai1)}
.rot__w.is-on{opacity:1;transform:none;transition-delay:.16s}
.rot__w.is-out{opacity:0;transform:translateY(-.75em);transition-duration:.16s,.3s} /* the old word is gone before the new one lands: two pills never overlap (craft.md "nothing translucent overlaps") */
/* round 14 (reviewer 8): one width rule. The two buttons stack in one column as wide as the wider one (full width on a
   phone), the green one first (craft.md › Spacing "Columns line up"; "No near-tangents": two right edges 11 px apart) */
.hero3__cta{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%;margin-top:26px}
.hero3__cta .btn{min-height:52px;padding:0 22px}
@media (min-width:640px){.hero3__cta{width:max-content;max-width:100%}}
@media (max-width:379px){.hero3__cta .btn{gap:7px;padding-inline:12px;font-size:15px}} /* a 360 phone: the label stays on one line beside its icon */
/* the tour: a video button, the green one's height and radius; a filled play disc, the label, its length */
.hero3__play{gap:10px;padding:0 18px 0 8px!important;font-weight:600}
.play__disc{display:flex;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-size:14px}
.play__disc .ico{margin-left:2px;fill:currentColor;stroke:none}
.play__len{font-size:13px;font-style:normal;font-weight:600;color:rgba(var(--fg-rgb),.5)}
.hero3__proof{margin-top:20px;font-size:16px;font-weight:700;line-height:1.45;color:var(--fg)}
.hero3__proof b{font-weight:700}
:lang(zh) .hero3__title,:lang(th) .hero3__title{line-height:1.18;letter-spacing:-.02em}

/* ------------------------------------------------- the phone (V3.2) */
/* ONE component for every chat picture: a real phone (thin bezel, island, 9:41 status bar, side keys, soft shadow, 9:19.5)
   holding a faithful WhatsApp chat: header (back, avatar, name, online, call icons), doodle wallpaper, tailed bubbles with
   time and ticks, the input bar with mic. Every size inside is in em: font-size scales the whole phone (12 px = 300 px wide).
   Toppie's drafts sit above the input bar in the AI colour; they carry no ticks until the person taps Send. */
.ph{position:relative;z-index:1;width:25em;aspect-ratio:9/19.5;padding:.7em;border-radius:3.9em;background:linear-gradient(160deg,#2b2f35,#0b0d10 42%,#15181c);font-family:var(--f-app);font-size:12px;line-height:1.35;color:#111b21;box-shadow:0 44px 90px -34px rgba(8,30,24,.6),0 18px 36px -20px rgba(8,30,24,.35),0 0 0 1px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.16)}
.ph::before{content:"";position:absolute;left:-.22em;top:9em;width:.22em;height:2.4em;border-radius:.2em 0 0 .2em;background:#1b1e23;box-shadow:0 3.6em 0 #1b1e23}
.ph::after{content:"";position:absolute;right:-.22em;top:11em;width:.22em;height:4em;border-radius:0 .2em .2em 0;background:#1b1e23}
.ph__screen{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:3.2em;background:#efeae2;box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}
.ph__status{position:relative;display:flex;flex:none;align-items:center;justify-content:space-between;height:3.7em;padding:.35em 2em 0 2.4em;background:#fff;font-size:1.1em;font-weight:600;letter-spacing:.01em;color:#111}
.ph__island{position:absolute;left:50%;top:1em;width:6em;height:2em;border-radius:1.2em;background:#0b0d10;transform:translateX(-50%)}
.ph__sys{display:inline-flex;align-items:center;gap:.45em}
.ph__sig{display:block;width:1.45em;height:.95em;background:repeating-linear-gradient(90deg,#111 0 .25em,transparent .25em .4em);clip-path:polygon(0 62%,25% 62%,25% 42%,50% 42%,50% 22%,75% 22%,75% 0,100% 0,100% 100%,0 100%)}
.ph__wifi{display:block;width:1.25em;height:.95em;background:radial-gradient(circle at 50% 100%,#111 0 .2em,transparent .2em .36em,#111 .36em .5em,transparent .5em .66em,#111 .66em .8em,transparent .8em);clip-path:polygon(50% 100%,0 20%,0 0,100% 0,100% 20%)}
.ph__bat{display:block;width:2em;height:1em;padding:.14em;border:.12em solid rgba(0,0,0,.45);border-radius:.32em;background:#111 content-box}
.wa__head{position:relative;z-index:1;display:flex;flex:none;align-items:center;gap:.55em;height:4.5em;padding:0 1em 0 .55em;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.07)}
.wa__head>.ico{font-size:1.6em;color:#111b21;stroke-width:2.2}
.wa__head .av{width:3em;height:3em}
.wa__who{display:flex;flex:1;flex-direction:column;min-width:0;line-height:1.2}
.wa__who b{font-size:1.25em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa__who small{font-size:.95em;color:#667781}
.wa__call{display:inline-flex;gap:1.2em;margin-left:auto}
.wa__call .ico{font-size:1.65em;color:#111b21}
.wa__wall{position:relative;display:flex;flex:1;flex-direction:column;gap:.55em;min-height:0;padding:1.1em .9em;overflow:hidden}
.wa__wall::before{content:"";position:absolute;inset:0;background:url(assets/brand/wa-doodle-tile-grey.webp) 0 0/20em auto repeat;mix-blend-mode:multiply;opacity:.16;pointer-events:none}
.wa__wall>*{position:relative}
.wa__day{align-self:center;padding:.35em .8em;border-radius:.6em;background:rgba(255,255,255,.9);box-shadow:0 1px .5px rgba(11,20,26,.13);font-size:.95em;color:#54656f}
.ph .bub{max-width:84%;padding:.45em .55em .4em .7em;border-radius:.8em;font-size:1.2em;line-height:1.3;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.ph .bub--in{align-self:flex-start;display:block}
.ph .bub--out{align-self:flex-end;display:block}
/* the tails (also on the loose bubbles of the AI rows and the Malaysia band) */
.ph .bub--in,.bub--tail.bub--in{border-top-left-radius:0}
.ph .bub--out,.bub--tail.bub--out{border-top-right-radius:0}
.ph .bub--in::before,.bub--tail.bub--in::before{content:"";position:absolute;left:-.55em;top:0;border-top:.75em solid #fff;border-left:.55em solid transparent}
.ph .bub--out::before,.bub--tail.bub--out::before{content:"";position:absolute;right:-.55em;top:0;border-top:.75em solid #d9fdd3;border-right:.55em solid transparent}
.bub__meta{position:relative;float:right;display:inline-flex;align-items:center;gap:.25em;margin:.6em -.15em -.15em .7em;font-size:.72em;line-height:1;color:#667781}
.bub__meta .ticks{width:1.35em;height:1em;stroke:#53bdeb}
.bub__meta .ticks--1{position:absolute;right:0;top:0;opacity:0;stroke:#8696a0}
.wa__bar{display:flex;flex:none;align-items:center;gap:.6em;padding:.6em .8em 1.3em;background:#f0f2f5}
.wa__bar>.ico{font-size:2em;color:#54656f;stroke-width:2}
.wa__input{position:relative;display:flex;flex:1;align-items:center;height:3.3em;min-width:0;padding:0 1.1em;border-radius:1.65em;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.04);font-size:1.1em;white-space:nowrap;overflow:hidden}
.wa__ph{color:#8696a0}
.wa__typed{position:absolute;left:1.1em;top:50%;max-width:calc(100% - 2.2em);overflow:hidden;text-overflow:ellipsis;transform:translateY(-50%);opacity:0}
.wa__act{position:relative;display:grid;flex:none;width:3.3em;height:3.3em}
.wa__mic,.wa__send{position:relative;grid-area:1/1;display:flex;align-items:center;justify-content:center;width:3.3em;height:3.3em;border-radius:50%;background:#1daa61;color:#fff;box-shadow:0 2px 6px -2px rgba(0,0,0,.3)}
.wa__mic .ico,.wa__send .ico{font-size:1.6em}
.wa__send{opacity:0;transform:scale(.6)}
.wa__tap{position:absolute;inset:-.35em;border-radius:50%;border:.25em solid rgba(29,170,97,.9);opacity:0;pointer-events:none}

/* ------------------------------------------- the hero picture: the phone, alive */
/* Round 14 (fresh-eye review, 5 Nov): the WHOLE phone stands on its stage with air on four sides (framing.md "whole and
   centered with air on four sides, it floats"), so the status bar and the WhatsApp header (contact, "online") are always
   in frame and the stage edge never cuts a word. The chat is full from the first paint and the loop only ever adds new
   messages at the bottom, as WhatsApp does (motion.md › Loops "A loop keeps a complete product picture", "Data never
   rewinds in view ... bring the next loop's data in as new"; "A new row carries the rows below it"). */
.hp3{position:relative;margin-top:28px;font-family:var(--f-app)}
/* the one stage every device stands on (craft.md "one figure language: one ground, one gutter, one window shadow") */
.stage{--g:18px;position:relative;overflow:hidden;border-radius:24px;background:radial-gradient(120% 80% at 50% 0%,#21927a 0%,#13705c 45%,#0c5244 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 30px 60px -36px rgba(6,40,32,.55)}
.stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.09) 1px,transparent 0);background-size:18px 18px;pointer-events:none}
.stage>.ph{position:absolute;left:50%;margin:0;font-size:1em;translate:-50% 0;box-shadow:0 30px 50px -24px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
/* the phone is 25em x 54.17em (9 : 19.5); the stage is the phone plus one gutter top and bottom and a wider gutter at
   each side, where the WhatsApp marks sit */
.hp3__stage{--gw:max(46px,calc((100% - 25em) / 2));height:calc(54.17em + 2 * var(--g));max-width:44em;margin-inline:auto;font-size:10px}
@media (min-width:400px){.hp3__stage{font-size:10.6px}}
@media (min-width:640px){.hp3__stage{font-size:11px}}
.hp3 .ph{top:var(--g)}
.hp3__toppie{position:absolute;z-index:4}
.hp3__toppie--phone{display:none}
.hp3__toppie--wide{display:none}
/* CY 4 Nov "more WhatsApp marks around the hero": four marks, ONE object (the WhatsApp app tile, its own green and glyph),
   two sizes of one family, two in each side gutter, never over the phone or a word (craft.md › Icons "One family, one
   stroke weight, one size", "Other products' logos ... in original proportions and colors"). Opaque; they land once. */
.wachip{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .27);background:linear-gradient(180deg,#2bd96c,#1aa84f);box-shadow:0 12px 24px -12px rgba(6,60,34,.8),inset 0 1px 0 rgba(255,255,255,.35);color:#fff}
.wachip svg{width:58%;height:58%;fill:currentColor}
.wachip{--s:34px;--c:calc(var(--gw) / 2 - var(--s) / 2)}
.wachip--s{--s:28px}
.wachip--a{left:var(--c);top:9%}
.wachip--b{right:var(--c);top:27%}
.wachip--c{left:var(--c);top:52%}
.wachip--d{right:var(--c);top:74%}
.motion .wachip{animation:chip-in .6s cubic-bezier(.25,.8,.25,1) both}
.motion .wachip--a{animation-delay:.35s}.motion .wachip--b{animation-delay:.45s}.motion .wachip--c{animation-delay:.55s}.motion .wachip--d{animation-delay:.65s}
@keyframes chip-in{from{opacity:0;translate:0 12px}}
@media (min-width:640px){.wachip{--s:44px}.wachip--s{--s:36px}}
/* the chat: a track at the bottom of the wall; new messages are added under it and the track rises (landing.js 6) */
.hp3 .wa__wall{justify-content:flex-end}
.hp3__track{display:flex;flex-direction:column;gap:.55em}
.hp3__track>*{flex:none}
.hp3__sent{display:flex;flex-direction:column;align-items:flex-end;gap:.3em}
.hp3__by{padding:.2em .6em;border-radius:.7em;background:#fff;font-size:.95em;color:#667781}
.ai-mark{font-weight:700;color:var(--ai1)}
.hp3 .is-pending .ticks--1{opacity:1}
.hp3 .is-pending .ticks--2{opacity:0}
.hp3 .bub__meta .ticks{transition:opacity .3s var(--ease)}
.hp3__track>.is-new{opacity:0}
/* Toppie's drafts above the input bar, in the AI colour: always two filled drafts (never grey loading bars) */
.hp3__ai{position:relative;flex:none;margin:0 .7em .55em;padding:.65em .7em .7em;border:1.5px solid transparent;border-radius:1.1em;background:linear-gradient(180deg,#fff,#fbf8ff) padding-box,var(--ai-grad) border-box;box-shadow:0 .9em 1.8em -1.2em rgba(var(--ai-rgb),.7)}
.hp3__ai-h{display:flex;align-items:center;gap:.45em;font-size:1em;color:var(--ai-ink)}
.hp3__ai-h .ico{font-size:1.25em;color:var(--ai1)}
.hp3__ai-h b{font-weight:700}
.hp3__ai-h .dots{margin-left:.2em;opacity:0;color:var(--ai1);transition:opacity .25s var(--ease)}
.hp3.t-think .hp3__ai-h .dots{opacity:1}
.dots{display:inline-flex;gap:3px}
.dots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45}
.hp3__drafts{position:relative;display:grid;gap:.45em;margin-top:.55em}
.hp3__skel{position:absolute;inset:0;display:grid;gap:.45em;opacity:0;pointer-events:none}
.hp3__skel i{border-radius:.7em;background:linear-gradient(90deg,rgba(var(--ai-rgb),.08),rgba(var(--ai-rgb),.16),rgba(var(--ai-rgb),.08))}
.hp3__draft{position:relative;padding:.55em .7em;border-radius:.7em;background:var(--ai-tint);font-size:1.15em;line-height:1.3;box-shadow:inset 0 0 0 1px rgba(var(--ai-rgb),.14)}
.hp3__d1{background:#efe6ff;box-shadow:inset 0 0 0 2px rgba(var(--ai-rgb),.75)}
.hp3__tap{position:absolute;right:1em;top:50%;width:2em;height:2em;margin-top:-1em;border-radius:50%;background:rgba(var(--ai-rgb),.28);opacity:0;pointer-events:none}
.hp3__drafts{position:relative;display:grid;gap:.45em;margin-top:.55em}
.hp3__draft{position:relative;padding:.55em .7em;border-radius:.7em;background:var(--ai-tint);font-size:1.15em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 0 0 1px rgba(var(--ai-rgb),.14);transition:opacity .22s var(--ease),transform .3s var(--ease),background-color .25s,box-shadow .25s}
.hp3__draft>[data-hp-d]{display:block;overflow:hidden;text-overflow:ellipsis} /* the text's box is the draft's width: a new draft changes words, not geometry */
.hp3__draft.is-leave{opacity:.4}
.hp3__draft.is-enter{opacity:.4;transition:none} /* round 21 (gate): opacity only; a snap down and back read as a jump */
.hp3.d-pick .hp3__d1{background:#efe6ff;box-shadow:inset 0 0 0 2px rgba(var(--ai-rgb),.75)}
.hp3__tap{position:absolute;right:1em;top:50%;width:2em;height:2em;margin-top:-1em;border-radius:50%;background:rgba(var(--ai-rgb),.28);opacity:0;pointer-events:none}
.motion .hp3.d-tap .hp3__tap{animation:tap .7s ease-out}
/* wordless stand-ins inside the pictures (a name, a message): grey bars, so the pictures carry only the words that matter */
.bars{display:inline-flex;flex-direction:column;gap:5px;min-width:0}
.bars i{display:block;height:8px;border-radius:4px;background:rgba(17,27,33,.14)}
.bars--name i{width:92px;height:9px}
.bars--row{flex:1 1 auto}
.bars--row i{width:72%}.bars--row i+i{width:46%}
.bars--badge i{width:52px;height:7px;background:rgba(255,255,255,.75)}
.bars--draft{width:100%}.bars--draft i{width:70%}
.bub{position:relative;max-width:86%;padding:7px 10px;border-radius:10px;font-size:14.5px;line-height:1.35;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.bub--in{justify-self:start;background:#fff;border-top-left-radius:3px;color:#111b21}
.bub--out{justify-self:end;display:flex;align-items:flex-end;gap:6px;background:#d9fdd3;border-top-right-radius:3px}
.ticks{flex:none;width:16px;height:12px;fill:none;stroke:#34a7e0;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* the loop (landing.js 6, only while on screen): the customer writes -> Toppie's dots -> two new drafts replace the last
   two -> Arun picks one (it fills the box, the mic becomes Send) -> he taps Send -> his bubble goes out, one grey tick,
   then two blue. Without the script, or with reduced motion, the chat as painted: full, the last reply sent. */
/* the placeholder leaves before the typed words arrive (and the other way round): never two texts over each other
   (craft.md › Color "Nothing translucent overlaps") */
.wa__ph,.wa__typed{transition:opacity .14s linear}
.wa__mic,.wa__send{transition:opacity .3s var(--ease),transform .35s var(--ease)}
.hp3:not(.c-typed) .wa__ph,.hp3.c-typed .wa__typed{transition-delay:.15s}
.hp3.c-typed .wa__typed{opacity:1}
.hp3.c-typed .wa__ph{opacity:0}
.hp3.c-typed .wa__send{opacity:1;transform:none}
.hp3.c-typed .wa__mic{opacity:0;transform:scale(.6)}
.motion .hp3.c-tap .wa__tap{animation:tap .75s ease-out}
.motion .hp3.c-tap .wa__send{animation:press .5s var(--ease)}
@keyframes press{0%,100%{transform:none}40%{transform:scale(.82)}}
.motion .hp3.t-think .hp3__ai-h .dots i{animation:dot 1.2s infinite}
.motion .hp3.t-think .hp3__ai-h .dots i:nth-child(2){animation-delay:.15s}
.motion .hp3.t-think .hp3__ai-h .dots i:nth-child(3){animation-delay:.3s}

.av{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;overflow:hidden;border-radius:50%;font-size:13px;font-weight:700;line-height:1}
.av svg{width:100%;height:100%;margin-top:22%}
.av--blue{background:#dbe7ff;color:#1e6fe0}.av--pink{background:#fbd5e3;color:#e0457b}.av--tan{background:#f1e2cc;color:#c07a1c}

/* -------------------------------------------------------------- logo wall */
/* 14 logos at equal optical weight (tools/make-assets.py), grey, no boxes. A phone shows one slow row that loops (the list
   twice, transform only, only while on screen); from 760 px the copy is hidden and the 14 sit in a calm two-row grid. */
.used3{margin-top:56px}
.used3__title{font-family:var(--f-head);font-size:15px;font-weight:600;line-height:1.4;letter-spacing:.01em;text-align:center;color:rgba(var(--fg-rgb),.55)}
.used3__wall{overflow:hidden;margin-top:18px;-webkit-mask-image:linear-gradient(90deg,transparent 10%,#000 34%,#000 66%,transparent 90%);mask-image:linear-gradient(90deg,transparent 10%,#000 34%,#000 66%,transparent 90%)}
.logos__track{display:flex;width:max-content}
.logos{--s:.72;display:flex;align-items:center;gap:0;padding-right:0}
.logos__i{display:flex;align-items:center;justify-content:center;height:44px;padding:0 18px}
.logos__i img{width:calc(var(--w) * var(--s));height:auto;filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s}
@media (hover:hover){.logos__i:hover img{filter:none;opacity:1}}
.motion .used3__wall.is-inview .logos__track{animation:logos-row 48s linear infinite}
@keyframes logos-row{to{transform:translateX(-50%)}}
@media (min-width:760px){
  .used3__wall{-webkit-mask-image:none;mask-image:none}
  .logos__track{display:block;width:auto}
  .logos__track .logos[aria-hidden]{display:none}
  .motion .used3__wall.is-inview .logos__track{animation:none}
  .logos{--s:.78;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px 8px}
  .logos__i{height:56px;padding:0 6px}
}
@media (min-width:1060px){.logos{--s:1;gap:14px 12px}.logos__i{height:64px}}

/* a short phone screen (360 x 640): tighter, so the words and the top of the picture share the first screen */
@media (max-width:899px) and (max-height:700px){
  .hero3{padding-top:10px}
  .hero3__slogan{margin-bottom:8px;font-size:1.1rem}
  .hero3__rot{margin-top:12px;font-size:16px}
  .hero3__cta{margin-top:18px}
  .hero3__proof{margin-top:14px}
  .hp3{margin-top:18px}
}

/* ------------------------------------------------------------ hero, laptop */
@media (min-width:640px){
  .hero3__title{font-size:clamp(2.7rem,6.6vw,3.6rem)}
}
@media (min-width:900px){
  .main{padding-top:84px;padding-bottom:56px}
  .hero3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px;padding-top:24px}
  .hero3__title{font-size:clamp(3rem,4.4vw,4rem);line-height:1.03}
  .hero3__slogan{margin-bottom:16px;font-size:1.45rem}
  .hero3__rot{margin-top:22px;font-size:20px}
  .hero3__cta{margin-top:28px;gap:12px}
  .hero3__proof{margin-top:22px}
  .hp3{justify-self:end;width:100%;margin-top:0;padding:0}
  /* round 14: the whole phone, a gutter above and below, the marks in the side gutters */
  .stage{--g:30px;border-radius:28px}
  .hp3__stage{width:min(100%,43em);max-width:none;margin:0 0 0 auto;font-size:10px}
  .hp3__toppie--wide{display:block;left:calc(100% - min(100%,43 * 10px) - 84px);bottom:-14px;width:150px} /* straddles the stage's lower-left corner, about half outside (framing.md rule 7), over the gutter and the phone's bezel (chrome, not content: rule 18) */
}
@media (min-width:1200px){.hp3__stage{font-size:10.6px}.hp3__toppie--wide{left:calc(100% - min(100%,43 * 10.6px) - 92px);width:166px}}

/* ------------------------------------------------------ first-screen motion */
.motion [data-enter]{animation:rise .7s var(--ease) both;animation-delay:calc(var(--e,0) * 1s)}
.motion [data-enter="solid"]{animation-name:rise-solid}
.motion [data-reveal]:not(.is-done){opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
.motion [data-reveal].is-in:not(.is-done){opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
@keyframes rise-solid{from{transform:translateY(14px)}}
@keyframes fab-ring{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
@keyframes dot{0%,60%,100%{opacity:.4;transform:none}30%{opacity:1;transform:translateY(-2px)}}
@keyframes tap{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.6)}}
@keyframes skel{from{opacity:.55}to{opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.motion .bob.is-inview{animation:bob 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}