/* Layout: same pages and grid as v1 (.site frame, container queries at 640 / 820 / 1024). Style "Liquid Glass": a warm paper ground lit from the top left with a diagonal shadow at the top right, frosted glass surfaces with a bright rim and inner sheen, coloured glass pills, and an iridescent glow (coral, pink, lilac, cyan) behind the few cards that matter.
   Palette: the logo gradient, Carmine #B0122C → Signal #E0242B → Coral #F2463A (#202, symbol E "Objectif qui parle"), with pastel coral, pink, lilac and cyan for the glows. System font (SF on Apple devices), as in the app.
   Fallbacks: prefers-reduced-transparency (or the preview toggle) → opaque surfaces, no blur, no glows. No backdrop-filter support → denser glass. Phones → lighter blur. */
:root{
  --bg:#F1EAE4; --bg-hi:rgba(255,251,246,.95); --bg-shade:rgba(46,56,78,.20);
  --text:#1C1416; --text-2:#4A3D41; --muted:#695A5F;
  --accent:#E0242B; --accent-deep:#B0122C; --accent-hi:#F2463A; --accent-ink:#A8112B;
  --btn-a:rgba(255,178,162,.95); --btn-b:rgba(242,118,146,.95); --btn-ink:#541125; --btn-shadow:rgba(226,60,80,.45);
  --glass:rgba(255,251,249,.60); --glass-2:rgba(255,251,249,.36); --glass-strong:rgba(255,252,250,.80);
  --glass-line:rgba(255,255,255,.80); --glass-edge:rgba(110,70,80,.12); --sheen:rgba(255,255,255,.95); --sheen-low:rgba(255,255,255,.30);
  --shadow:rgba(90,46,56,.20); --shadow-2:rgba(90,46,56,.07);
  --well:rgba(120,90,98,.08);
  --field:rgba(255,255,255,.72); --field-line:#8E7E83;
  --tint:rgba(224,36,43,.08); --tint-2:rgba(224,36,43,.14);
  --glow-1:rgba(255,150,128,.55); --glow-2:rgba(246,150,206,.50); --glow-3:rgba(176,154,255,.50); --glow-4:rgba(120,220,236,.50);
  --iris:linear-gradient(118deg,rgba(255,206,190,.80),rgba(250,190,222,.74) 38%,rgba(206,190,255,.72) 68%,rgba(176,236,242,.76));
  --danger:#B91C1C; --danger-bg:rgba(254,226,226,.75); --danger-border:#F3A9A9;
  --success:#15803D; --success-bg:rgba(220,252,231,.75);
  --warning:#9A4A07; --warning-bg:rgba(255,247,222,.80); --warning-border:#F0CF7A;
  --inverse:#1C1416; --on-inv:#FFFFFF;
  --asb-bg:#000000; --asb-fg:#FFFFFF; --asb-line:#A6A6A6;
  --pr-bg:#000000; --pr-fg:#FFFFFF;
  --blur:blur(18px) saturate(170%); --blur-hdr:blur(22px) saturate(180%);
  --glow-on:1; --glow-a:.55; --phone-ring:rgba(255,255,255,.5);
  --font:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-card:28px; --r-panel:24px; --r-row:22px; --r-box:16px; --r-ctl:12px; --r-pill:9999px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141015; --bg-hi:rgba(255,236,226,.06); --bg-shade:rgba(0,0,0,.45);
  --text:#F6EEF0; --text-2:#D3C6CB; --muted:#AA9BA1;
  --accent-ink:#FF8E86; --glow-a:.30; --phone-ring:rgba(255,255,255,.09);
  --btn-a:rgba(255,150,135,.92); --btn-b:rgba(232,100,135,.92); --btn-ink:#3E0A18; --btn-shadow:rgba(240,70,90,.38);
  --glass:rgba(255,255,255,.075); --glass-2:rgba(255,255,255,.04); --glass-strong:rgba(28,22,28,.78);
  --glass-line:rgba(255,255,255,.16); --glass-edge:rgba(0,0,0,.40); --sheen:rgba(255,255,255,.24); --sheen-low:rgba(255,255,255,.05);
  --shadow:rgba(0,0,0,.55); --shadow-2:rgba(0,0,0,.25);
  --well:rgba(255,255,255,.06);
  --field:rgba(255,255,255,.06); --field-line:#85767C;
  --tint:rgba(255,110,100,.10); --tint-2:rgba(255,110,100,.18);
  --glow-1:rgba(255,90,70,.30); --glow-2:rgba(236,90,170,.26); --glow-3:rgba(130,100,255,.30); --glow-4:rgba(60,190,215,.24);
  --iris:linear-gradient(118deg,rgba(255,110,90,.20),rgba(236,100,180,.17) 38%,rgba(140,110,255,.20) 68%,rgba(70,190,215,.17));
  --danger:#FF8A8A; --danger-bg:rgba(220,38,38,.16); --danger-border:rgba(255,138,138,.45);
  --success:#5EE08F; --success-bg:rgba(34,197,94,.15);
  --warning:#FBC94A; --warning-bg:rgba(251,191,36,.12); --warning-border:rgba(251,201,74,.40);
  --inverse:#F6EEF0; --on-inv:#1C1416;
  --asb-line:#7A7A7A;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#141015; --bg-hi:rgba(255,236,226,.06); --bg-shade:rgba(0,0,0,.45);
  --text:#F6EEF0; --text-2:#D3C6CB; --muted:#AA9BA1;
  --accent-ink:#FF8E86; --glow-a:.30; --phone-ring:rgba(255,255,255,.09);
  --btn-a:rgba(255,150,135,.92); --btn-b:rgba(232,100,135,.92); --btn-ink:#3E0A18; --btn-shadow:rgba(240,70,90,.38);
  --glass:rgba(255,255,255,.075); --glass-2:rgba(255,255,255,.04); --glass-strong:rgba(28,22,28,.78);
  --glass-line:rgba(255,255,255,.16); --glass-edge:rgba(0,0,0,.40); --sheen:rgba(255,255,255,.24); --sheen-low:rgba(255,255,255,.05);
  --shadow:rgba(0,0,0,.55); --shadow-2:rgba(0,0,0,.25);
  --well:rgba(255,255,255,.06);
  --field:rgba(255,255,255,.06); --field-line:#85767C;
  --tint:rgba(255,110,100,.10); --tint-2:rgba(255,110,100,.18);
  --glow-1:rgba(255,90,70,.30); --glow-2:rgba(236,90,170,.26); --glow-3:rgba(130,100,255,.30); --glow-4:rgba(60,190,215,.24);
  --iris:linear-gradient(118deg,rgba(255,110,90,.20),rgba(236,100,180,.17) 38%,rgba(140,110,255,.20) 68%,rgba(70,190,215,.17));
  --danger:#FF8A8A; --danger-bg:rgba(220,38,38,.16); --danger-border:rgba(255,138,138,.45);
  --success:#5EE08F; --success-bg:rgba(34,197,94,.15);
  --warning:#FBC94A; --warning-bg:rgba(251,191,36,.12); --warning-border:rgba(251,201,74,.40);
  --inverse:#F6EEF0; --on-inv:#1C1416;
  --asb-line:#7A7A7A;
  color-scheme:dark;
}
/* Phones: a lighter blur keeps scrolling smooth */
@media (max-width:640px){:root{--blur:blur(12px) saturate(160%);--blur-hdr:blur(16px) saturate(170%)}}
@container site (max-width:640px){.wrap,.hdr,.ftr{--blur:blur(12px) saturate(160%);--blur-hdr:blur(16px) saturate(170%)}}
/* No backdrop-filter: denser glass so text keeps its contrast */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:rgba(255,251,249,.86);--glass-2:rgba(255,251,249,.72);--glass-strong:rgba(255,252,250,.94)}
  :root[data-theme="dark"]{--glass:rgba(34,28,34,.96);--glass-2:rgba(29,24,29,.94);--glass-strong:#1F1A1F}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass:rgba(34,28,34,.96);--glass-2:rgba(29,24,29,.94);--glass-strong:#1F1A1F}}
}
/* Reduced transparency (system setting, or the preview toggle): opaque surfaces, no blur, no glows */
@media (prefers-reduced-transparency:reduce){:root{
  --glass:#FBF7F5; --glass-2:#F7F1EE; --glass-strong:#FFFFFF; --field:#FFFFFF; --blur:none; --blur-hdr:none; --glow-on:0;
  --iris:linear-gradient(118deg,#FBE3DC,#F8DDEA 38%,#E8E1FB 68%,#DDF2F5);
}}
@media (prefers-reduced-transparency:reduce) and (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --glass:#221C22; --glass-2:#1D181D; --glass-strong:#1F1A1F; --field:#2A232A;
  --iris:linear-gradient(118deg,#3A2222,#36202F 38%,#29233F 68%,#1C3138);
}}
@media (prefers-reduced-transparency:reduce){:root[data-theme="dark"]{--glass:#221C22; --glass-2:#1D181D; --glass-strong:#1F1A1F; --field:#2A232A;
  --iris:linear-gradient(118deg,#3A2222,#36202F 38%,#29233F 68%,#1C3138)}}
:root.rt{--glass:#FBF7F5; --glass-2:#F7F1EE; --glass-strong:#FFFFFF; --field:#FFFFFF; --blur:none; --blur-hdr:none; --glow-on:0;
  --iris:linear-gradient(118deg,#FBE3DC,#F8DDEA 38%,#E8E1FB 68%,#DDF2F5)}
@media (prefers-color-scheme:dark){:root.rt:not([data-theme="light"]){--glass:#221C22; --glass-2:#1D181D; --glass-strong:#1F1A1F; --field:#2A232A;
  --iris:linear-gradient(118deg,#3A2222,#36202F 38%,#29233F 68%,#1C3138)}}
:root.rt[data-theme="dark"]{--glass:#221C22; --glass-2:#1D181D; --glass-strong:#1F1A1F; --field:#2A232A;
  --iris:linear-gradient(118deg,#3A2222,#36202F 38%,#29233F 68%,#1C3138)}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:15px;line-height:22px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic.s16{width:16px;height:16px}.ic.s24{width:24px;height:24px}.ic.s32{width:32px;height:32px}
h1,h2,h3{text-wrap:balance}

/* ===== Stage and site frame: the lit ground ===== */
.site{container:site/inline-size;margin:0 auto;width:100%;min-height:70vh;position:relative;overflow:clip;
  background-color:var(--bg);
  background-image:
    radial-gradient(70% 520px at 8% -80px,var(--bg-hi),transparent 70%),
    radial-gradient(62% 1150px at 100% 0,var(--bg-shade),var(--bg-shade) 25%,transparent 72%),
    radial-gradient(520px 420px at 88% 340px,var(--glow-1),transparent 70%),
    radial-gradient(460px 380px at 6% 980px,var(--glow-4),transparent 70%),
    radial-gradient(520px 460px at 96% 1700px,var(--glow-3),transparent 70%),
    radial-gradient(480px 420px at 4% 2500px,var(--glow-2),transparent 70%),
    radial-gradient(520px 460px at 92% 3400px,var(--glow-1),transparent 70%);
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
  background-repeat:no-repeat}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}
main{display:block}
.sec{padding-block:40px}
@container site (min-width:640px){.sec{padding-block:56px}.wrap{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}}
@container site (min-width:1024px){.sec{padding-block:72px}}

/* Type scale: same steps as v1 (app typography) */
.eyebrow{font-size:11px;line-height:14px;letter-spacing:.9px;text-transform:uppercase;color:var(--accent-ink);font-weight:700}
.h1{font-size:34px;line-height:38px;font-weight:800;letter-spacing:-1.2px}
.h2{font-size:21px;line-height:26px;font-weight:800;letter-spacing:-.5px}
.h3{font-size:16px;line-height:22px;font-weight:700;letter-spacing:-.2px}
.lead{font-size:17px;line-height:26px;color:var(--text-2);max-width:56ch}
.muted{color:var(--muted)} .t2{color:var(--text-2)}
.small{font-size:12px;line-height:16px}
.cap{font-size:13px;line-height:18px}
@container site (min-width:640px){.h1{font-size:44px;line-height:48px;letter-spacing:-1.75px}.h2{font-size:28px;line-height:34px;letter-spacing:-.8px}}
@container site (min-width:1024px){.h1{font-size:56px;line-height:58px;letter-spacing:-2.2px}.h2{font-size:32px;line-height:38px;letter-spacing:-1px}}
.sec-h{display:grid;gap:10px;margin-bottom:24px;max-width:62ch}
.sec-h p{color:var(--text-2)}
@container site (min-width:640px){.sec-h{margin-bottom:32px}}

/* ===== Glass recipe: translucent fill, bright rim, top sheen, soft lift ===== */
.card,.faq details,.tbl-box,.notice,.doc .short,.chip,.btn.secondary,.mnav,.ftr{
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.card,.faq details,.tbl-box,.notice,.doc .short{
  background:linear-gradient(180deg,var(--glass),var(--glass-2));
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--sheen),inset 0 -1px 0 var(--sheen-low),0 0 0 .5px var(--glass-edge),0 18px 40px -22px var(--shadow),0 2px 8px var(--shadow-2)}
.card,.faq details,.tbl-box,.notice,.doc .short,.hero-card::after,.plan.pro::after,.ret .card::after,.hdr-in::before,.ftr{border-top-color:var(--sheen);border-left-color:var(--sheen-low)}

/* Buttons: coloured glass pill (primary), clear glass pill (secondary) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-pill);font-weight:600;font-size:14px;white-space:nowrap;transition:transform .15s,box-shadow .2s,filter .2s;border:1px solid transparent;text-decoration:none;position:relative}
.btn:active{transform:scale(.97)}
.btn.primary,.chip[aria-pressed="true"]{color:var(--btn-ink);border-color:rgba(255,255,255,.42);
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 42%),linear-gradient(135deg,var(--btn-a),var(--btn-b));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(160,20,60,.18),0 12px 24px -10px var(--btn-shadow),0 2px 4px var(--shadow-2)}
.btn.primary:hover{filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(160,20,60,.18),0 16px 28px -10px var(--btn-shadow),0 2px 4px var(--shadow-2)}
.btn.secondary,.btn.inv{color:var(--text);background:linear-gradient(180deg,var(--glass-strong),var(--glass));border-color:var(--glass-line);box-shadow:inset 0 1px 0 var(--sheen),0 0 0 .5px var(--glass-edge),0 10px 22px -12px var(--shadow)}
.btn.secondary:hover,.btn.inv:hover{box-shadow:inset 0 1px 0 var(--sheen),0 0 0 .5px var(--glass-edge),0 14px 26px -12px var(--shadow)}
.btn.ghost{color:var(--text-2)} .btn.ghost:hover{background:var(--well);color:var(--text)}
.btn.lg{min-height:52px;font-size:16px;padding:0 26px}
.btn.block{width:100%}
.btn:disabled{opacity:.6;cursor:not-allowed}
.link{color:var(--accent-ink);font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}
.ib{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-pill);color:var(--text-2)}
.ib:hover{background:var(--well);color:var(--text)}
.badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:700;letter-spacing:.25px;white-space:nowrap}
.badge.brand{background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:var(--btn-ink)}
.badge.soft{background:var(--tint-2);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--tint-2)}
.badge.ok{background:var(--success-bg);color:var(--success)}
.badge.warn{background:var(--warning-bg);color:var(--warning);border:1px solid var(--warning-border)}

/* App Store badge: Apple's black badge is kept as is (Apple marketing rules). Production uses the official artwork. */
.asb{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 14px;border-radius:12px;background:var(--asb-bg);color:var(--asb-fg);text-decoration:none;border:1px solid var(--asb-line);transition:transform .15s;box-shadow:0 12px 24px -12px rgba(0,0,0,.45)}
.asb:active{transform:scale(.97)}
.asb .glyph{width:24px;height:24px;border-radius:6px;background:var(--asb-fg);color:var(--asb-bg);display:flex;align-items:center;justify-content:center}
.asb .t{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.asb .t small{font-size:11px;font-weight:500;letter-spacing:.1px}
.asb .t b{font-size:19px;font-weight:600;letter-spacing:-.3px}
.asb.sm{height:40px;padding:0 12px 0 10px;border-radius:9px;gap:8px}
.asb.sm .t small{font-size:9px}.asb.sm .t b{font-size:15px}.asb.sm .glyph{width:20px;height:20px}

/* Logo (#202, symbol E "Objectif qui parle"): one SVG constant LOGO_SVG on the red gradient tile */
.logo-mark{width:32px;height:32px;border-radius:9px;color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%),linear-gradient(45deg,#B0122C,#E0242B 55%,#F2463A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px -5px rgba(224,36,43,.55)}
.logo-mark svg{width:100%;height:100%}
.logo-mark.lg{width:56px;height:56px;border-radius:15px}


/* Header: a floating glass bar */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-top:10px}
.hdr-in{display:flex;align-items:center;gap:12px;height:60px;position:relative}
.hdr-in::before{content:"";position:absolute;inset:0 8px;border-radius:var(--r-pill);z-index:-1;
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur-hdr);backdrop-filter:var(--blur-hdr);
  box-shadow:inset 0 1px 0 var(--sheen),0 0 0 .5px var(--glass-edge),0 14px 30px -18px var(--shadow)}
.hdr-in{isolation:isolate}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:-.4px;font-size:16px;min-width:0;min-height:44px}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:none;align-items:center;gap:2px;margin-left:12px}
.nav a{font-size:14px;font-weight:500;color:var(--text-2);text-decoration:none;padding:0 12px;min-height:40px;display:inline-flex;align-items:center;border-radius:var(--r-pill)}
.nav a:hover{background:var(--well);color:var(--text)}
.nav a[aria-current="page"]{color:var(--text);font-weight:600;background:var(--glass-strong);box-shadow:inset 0 1px 0 var(--sheen),0 0 0 .5px var(--glass-edge)}
.hdr .sp{flex:1}
.lang{display:inline-flex;background:var(--well);border-radius:var(--r-pill);padding:3px;gap:2px;box-shadow:inset 0 1px 2px var(--shadow-2)}
.lang a{height:32px;min-width:38px;padding:0 10px;border-radius:var(--r-pill);font-weight:500;color:var(--text-2);font-size:13px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;position:relative}
.lang a::after{content:"";position:absolute;inset:-6px -2px}
.lang a[aria-current="true"]{background:var(--glass-strong);color:var(--text);font-weight:700;box-shadow:inset 0 1px 0 var(--sheen),0 0 0 .5px var(--glass-edge),0 4px 10px -4px var(--shadow)}
.hdr .get{display:none}
.menu-btn{display:inline-flex}
.mnav{margin:8px max(8px,env(safe-area-inset-left,0px)) 0;border-radius:var(--r-panel);background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--sheen),0 20px 40px -20px var(--shadow);padding-block:8px 16px}
.mnav a{display:flex;align-items:center;min-height:48px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--glass-edge)}
.mnav .asb{margin-top:16px}
@container site (min-width:640px){.hdr .get{display:inline-flex}}
@container site (min-width:1024px){.nav{display:flex}.menu-btn{display:none}.mnav{display:none}}
@container site (max-width:380px){.brand span{display:none}}

/* Cards */
.card{border-radius:var(--r-card);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
@container site (min-width:640px){.card{padding:26px}}

/* Glow cards: the glass sits on ::after, the iridescent glow on ::before, so the glass frosts the glow */
.hero-card,.plan.pro,.ret .card{position:relative;isolation:isolate;background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero-card::before,.plan.pro::before,.ret .card::before{content:"";position:absolute;z-index:-2;inset:12% 5% -7% 5%;border-radius:44px;
  background:linear-gradient(100deg,#FF8A70,#F472B6 30%,#A78BFA 62%,#5CD6E8);filter:blur(34px);opacity:calc(var(--glow-a) * var(--glow-on));pointer-events:none}
.hero-card::after,.plan.pro::after,.ret .card::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--glass),var(--glass-2));border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--sheen),inset 0 -1px 0 var(--sheen-low),0 0 0 .5px var(--glass-edge),0 24px 50px -26px var(--shadow)}
.hero-card::after{background:var(--iris)}
.plan.pro::after{box-shadow:inset 0 1px 0 var(--sheen),0 0 0 1.5px var(--accent),0 24px 50px -24px var(--btn-shadow)}
.hero-card{color:var(--text);border-radius:var(--r-card);padding:28px 22px;display:grid;gap:16px}
.hero-card p{color:var(--text-2)}
.hero-card .eyebrow{color:var(--accent-ink)!important}
@container site (min-width:640px){.hero-card{padding:44px}}
.ic-tile{width:44px;height:44px;border-radius:14px;color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex:none;
  background:linear-gradient(160deg,var(--glass-strong),var(--glass));border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--sheen),0 0 0 .5px var(--glass-edge),0 8px 16px -8px var(--shadow)}
.grid{display:grid;gap:12px}
@container site (min-width:640px){.grid.c2,.grid.c3{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@container site (min-width:1024px){.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Home hero */
.hero{padding-block:32px 40px}
.hero-g{display:grid;gap:32px;align-items:center}
.hero-txt{display:grid;gap:18px;min-width:0}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.trust{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--text-2);font-size:13px;line-height:18px}
.trust span{display:inline-flex;align-items:center;gap:6px}
.trust .ic{color:var(--success)}
@container site (min-width:640px){.hero{padding-block:48px 56px}}
@container site (min-width:1024px){.hero-g{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px}.hero{padding-block:64px 72px}}

/* Phone demo: black prompter screen in a glass bezel, with the iridescent glow behind */
.demo{display:grid;justify-items:center;gap:16px;position:relative;isolation:isolate}
.demo::before{content:"";position:absolute;z-index:-1;left:50%;top:8%;width:min(340px,92%);height:70%;transform:translateX(-50%);border-radius:50%;
  background:conic-gradient(from 200deg,#FF8A70,#F472B6,#A78BFA,#5CD6E8,#FF8A70);filter:blur(48px);opacity:calc(.5 * var(--glow-on));pointer-events:none}
.phone{width:min(300px,100%);aspect-ratio:9/18.5;max-width:100%;border-radius:46px;background:#0B0B0F;padding:10px;
  box-shadow:0 0 0 6px var(--phone-ring),0 0 0 7px var(--glass-edge),inset 0 1px 0 rgba(255,255,255,.25),0 40px 70px -28px rgba(120,20,40,.45)}
.screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:var(--pr-bg);color:var(--pr-fg)}
.screen.cam{background:radial-gradient(120% 70% at 50% 85%,#3b3442 0%,#1d1a22 45%,#0c0b0f 100%)}
.screen .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:14px;background:#000;z-index:4}
.scr-top{position:absolute;top:40px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;z-index:3;font-size:11px;font-weight:600}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);background:rgba(40,36,44,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.12)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:#34D399}
.pill.wait .dot{background:#FBBF24}
.pill.rec .dot{background:#F87171}
.pr-view{position:absolute;inset:0;overflow:hidden}
.pr-text{position:absolute;left:8%;right:8%;top:0;font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.01em;transition:transform .45s cubic-bezier(.3,.7,.3,1)}
.pr-text p{margin:0 0 .55em}
.w{border-radius:.12em;transition:opacity .25s}
.w.done{opacity:.6}
.w.cur{text-decoration:underline;text-decoration-color:#FF6B5E;text-decoration-thickness:.08em;text-underline-offset:.16em}
.rl{position:absolute;left:0;right:0;top:36%;height:2px;background:rgba(255,107,94,.6);z-index:2}
.rl::before{content:"";position:absolute;left:0;top:-6px;border:7px solid transparent;border-left:10px solid #FF6B5E;border-right:0}
.rl::after{content:"";position:absolute;right:0;top:-6px;border:7px solid transparent;border-right:10px solid #FF6B5E;border-left:0}
.scr-bot{position:absolute;bottom:0;left:0;right:0;height:96px;background:linear-gradient(transparent,var(--pr-bg) 55%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;z-index:3}
.screen.cam .scr-bot{background:linear-gradient(transparent,rgba(12,11,15,.9) 55%)}
.recbtn{width:52px;height:52px;border-radius:50%;border:3px solid #fff;display:flex;align-items:center;justify-content:center}
.recbtn i{width:38px;height:38px;border-radius:50%;background:#EF4444;display:block}
.recbtn.on i{width:20px;height:20px;border-radius:5px}
.demo-ctl{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--text);text-decoration:none;
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--sheen),0 0 0 .5px var(--glass-edge),0 8px 18px -10px var(--shadow);transition:transform .15s}
.chip:active{transform:scale(.97)}
.demo-note{font-size:12px;line-height:16px;color:var(--muted);text-align:center;max-width:36ch}

/* Feature list */
.feat .card{flex-direction:row;align-items:flex-start;gap:14px}
.feat h3{margin-bottom:4px}
.feat p{color:var(--text-2);font-size:14px;line-height:20px}

/* Differentiators: the iridescent band (one per page) */
.diff{display:grid;gap:22px}
.diff-list{display:grid;gap:18px}
@container site (min-width:640px){.diff-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}}
@container site (min-width:1024px){.diff-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.diff-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.diff-item h3{color:var(--text);margin-bottom:4px}
.diff-item p{font-size:14px;line-height:20px}

/* Pricing */
.price-g{display:grid;gap:12px}
@container site (min-width:820px){.price-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}}
.plan{gap:16px}
.plan-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.amount{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.amount b{font-size:44px;line-height:44px;font-weight:800;letter-spacing:-1.75px;font-variant-numeric:tabular-nums}
.amount span{color:var(--text-2)}
.checks{list-style:none;display:grid;gap:10px;font-size:14px;line-height:20px}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks .ic{color:var(--accent-ink);margin-top:0}
.seg{display:inline-flex;background:var(--well);border-radius:var(--r-pill);padding:4px;gap:2px;box-shadow:inset 0 1px 3px var(--shadow-2)}
.seg button{min-height:40px;padding:0 16px;border-radius:var(--r-pill);font-weight:500;color:var(--text-2);font-size:13px;position:relative}
.seg button::after{content:"";position:absolute;inset:-2px 0}
.seg button[aria-pressed="true"]{background:var(--glass-strong);color:var(--text);font-weight:700;box-shadow:inset 0 1px 0 var(--sheen),0 0 0 .5px var(--glass-edge),0 6px 12px -6px var(--shadow)}
.fine{font-size:12px;line-height:17px;color:var(--muted);max-width:80ch}
.plan .grow{flex:1}
.plan.pro .fine,.plan.pro .muted{color:var(--text-2)}

/* Reviews placeholder */
.rev-note{display:flex;gap:10px;align-items:flex-start;background:var(--warning-bg);border:1px solid var(--warning-border);color:var(--warning);border-radius:var(--r-box);padding:12px 14px;font-size:13px;line-height:18px;margin-bottom:16px}
.card.rev{border:1.5px dashed var(--field-line);background:var(--glass-2);box-shadow:none}
.rev .stars{display:flex;gap:2px;color:var(--well)}
.rev .stars svg{fill:currentColor;stroke:none;width:16px;height:16px}
.skel{height:10px;border-radius:6px;background:var(--well)}

/* FAQ (details/summary) */
.faq{display:grid;gap:10px}
.faq details{border-radius:var(--r-row);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;min-height:56px;font-weight:600;font-size:15px;line-height:21px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:transform .2s;color:var(--muted)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq .a{padding:0 20px 18px;color:var(--text-2);font-size:14px;line-height:21px;max-width:72ch}

/* Steps (a real sequence: numbering is information) */
.steps{list-style:none;display:grid;gap:12px;counter-reset:s}
@container site (min-width:820px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.steps li{counter-increment:s}
.steps .n{width:34px;height:34px;border-radius:var(--r-pill);color:var(--btn-ink);font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 45%),linear-gradient(135deg,var(--btn-a),var(--btn-b));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 16px -8px var(--btn-shadow)}
.steps .n::before{content:counter(s)}
.steps p{color:var(--text-2);font-size:14px;line-height:20px}

/* Table (scrolls in its own box on phones) */
.tbl-box{overflow-x:auto;border-radius:var(--r-card)}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:14px;line-height:20px}
th,td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--glass-edge);vertical-align:top}
th{font-size:11px;letter-spacing:.66px;text-transform:uppercase;color:var(--muted);font-weight:600}
tr:last-child td{border-bottom:0}
td b{white-space:nowrap}
tr.hl td{background:var(--tint)}

/* Breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);padding-top:20px}
.crumbs a{color:var(--text-2);text-decoration:none}.crumbs a:hover{text-decoration:underline}

/* Related links */
.related{display:flex;flex-wrap:wrap;gap:8px}

/* Legal pages */
.doc{display:grid;gap:14px}
.doc h2{font-size:18px;line-height:24px;font-weight:800;letter-spacing:-.3px;margin-top:14px}
.doc p,.doc li{color:var(--text-2);font-size:15px;line-height:24px;max-width:70ch}
.doc ul{padding-left:20px;display:grid;gap:6px}
.doc .short{border-radius:var(--r-panel);padding:20px 22px;background:var(--iris)}
.doc .short h2{margin-top:0}
.var{background:var(--warning-bg);color:var(--warning);border:1px dashed var(--warning-border);border-radius:4px;padding:0 4px;font-family:var(--mono);font-size:.86em}
.toc{display:flex;flex-wrap:wrap;gap:8px}
.notice{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-box);padding:12px 14px;font-size:13px;line-height:19px;color:var(--text-2)}

/* Support */
.sup-g{display:grid;gap:16px;align-items:start}
@container site (min-width:1024px){.sup-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.mailbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--well);border:1px solid var(--glass-line);border-radius:var(--r-box);padding:10px 12px}
.mailbox code{font-family:var(--mono);font-size:14px;user-select:all;overflow-wrap:anywhere;flex:1;min-width:0}
.fld{display:grid;gap:6px}
.fld label{font-size:13px;font-weight:600;color:var(--text-2);padding-left:4px}
.inp,.ta,.sel{width:100%;font-size:16px;min-height:48px;padding:12px 18px;border:1px solid var(--field-line);border-radius:var(--r-pill);background:var(--field);
  box-shadow:inset 0 1px 3px var(--shadow-2),0 1px 0 var(--sheen-low);transition:box-shadow .2s,border-color .2s}
.ta{min-height:140px;resize:vertical;line-height:20px;border-radius:var(--r-row)}
.sel{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.inp:focus,.ta:focus,.sel:focus{outline:0;border-color:var(--accent);box-shadow:inset 0 1px 3px var(--shadow-2),0 0 0 4px var(--tint-2)}
.inp[aria-invalid="true"],.ta[aria-invalid="true"]{border-color:var(--danger)}
.err{color:var(--danger);font-size:13px;line-height:18px;padding-left:4px}
.form{display:grid;gap:14px}
.inp::placeholder,.ta::placeholder{color:var(--muted);opacity:1}
.done-box{display:grid;justify-items:center;gap:10px;text-align:center;padding:16px 0}
.okc{width:64px;height:64px;border-radius:22px;background:var(--success-bg);color:var(--success);display:flex;align-items:center;justify-content:center;border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--sheen),0 12px 24px -12px var(--shadow)}
.okc.neutral{background:var(--well);color:var(--muted)}
.okc.warn{background:var(--warning-bg);color:var(--warning)}
.okc.err{background:var(--danger-bg);color:var(--danger)}

/* Premium return (composition of the "You're Premium" sheet) */
.ret{min-height:72vh;display:grid;place-items:center;padding-block:32px}
.ret .card{width:min(460px,100%);align-items:stretch;gap:18px}
.ret .done-box h1{font-size:24px;line-height:30px;font-weight:800;letter-spacing:-.5px}
.ret .done-box p{color:var(--text-2);max-width:36ch}
.rcpt{display:grid;gap:8px;background:var(--well);border:1px solid var(--glass-line);border-radius:var(--r-row);padding:14px 16px;font-size:14px;line-height:20px}
.rcpt div{display:flex;justify-content:space-between;gap:12px}
.rcpt span{color:var(--muted)}
.rcpt b{font-variant-numeric:tabular-nums;text-align:right}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.opening{font-size:13px;line-height:19px;color:var(--text-2);text-align:center;display:grid;gap:10px;justify-items:center}

/* Footer: one wide glass sheet */
.ftr{margin:24px max(8px,env(safe-area-inset-left,0px)) 8px;border-radius:var(--r-card);background:linear-gradient(180deg,var(--glass),var(--glass-2));border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--sheen),0 0 0 .5px var(--glass-edge);padding-block:32px;font-size:14px;line-height:20px}
@container site (min-width:640px){.ftr{margin-inline:12px}}
.ftr-g{display:grid;gap:24px}
@container site (min-width:640px){.ftr-g{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
.ftr h4{font-size:11px;letter-spacing:.66px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:8px}
.ftr ul{list-style:none;display:grid;gap:2px}
.ftr ul a{text-decoration:none;color:var(--text-2);min-height:36px;display:inline-flex;align-items:center}
.ftr ul a:hover{color:var(--text);text-decoration:underline}
.ftr .legal{margin-top:24px;padding-top:16px;border-top:1px solid var(--glass-edge);color:var(--muted);font-size:12px;line-height:17px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between}

.skip{position:absolute;left:16px;top:8px;z-index:60;background:var(--inverse);color:var(--on-inv);padding:10px 16px;border-radius:var(--r-pill);font-weight:600;text-decoration:none}
.skip:not(:focus){clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;white-space:nowrap}
.h1:focus{outline:0}
section[id]{scroll-margin-top:84px}

/* Reduced transparency: also drop the blur from components that set it directly, the page glows and the translucent wells */
:root.rt .site{background-image:radial-gradient(70% 520px at 8% -80px,var(--bg-hi),transparent 70%),radial-gradient(62% 1150px at 100% 0,var(--bg-shade),var(--bg-shade) 25%,transparent 72%)}
:root.rt .demo::before,:root.rt .hero-card::before,:root.rt .plan.pro::before,:root.rt .ret .card::before{display:none}
:root.rt .lang,:root.rt .seg,:root.rt .mailbox,:root.rt .rcpt,:root.rt .okc.neutral{background:var(--glass-2)}
@media (prefers-reduced-transparency:reduce){
  .site{background-image:radial-gradient(70% 520px at 8% -80px,var(--bg-hi),transparent 70%),radial-gradient(62% 1150px at 100% 0,var(--bg-shade),var(--bg-shade) 25%,transparent 72%)}
  .demo::before,.hero-card::before,.plan.pro::before,.ret .card::before{display:none}
  .lang,.seg,.mailbox,.rcpt,.okc.neutral{background:var(--glass-2)}
}
:root.rt .pill{-webkit-backdrop-filter:none;backdrop-filter:none;background:#28242C}
@media (prefers-reduced-transparency:reduce){.pill{-webkit-backdrop-filter:none;backdrop-filter:none;background:#28242C}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ===== v3: one idea per section (hero → 3 product stories → the rest → pricing → FAQ → final) ===== */
.c{text-align:center;justify-items:center;margin-left:auto;margin-right:auto}
.sec-h.c{max-width:40ch}
.cta-row.c{justify-content:center}
.h1.xl{max-width:15ch}
.h2.big{font-size:30px;line-height:34px;letter-spacing:-.9px}
@container site (min-width:640px){.h1.xl{font-size:56px;line-height:58px;letter-spacing:-2.4px}.h2.big{font-size:40px;line-height:44px;letter-spacing:-1.4px}}
@container site (min-width:1024px){.h1.xl{font-size:72px;line-height:72px;letter-spacing:-3.2px}.h2.big{font-size:48px;line-height:52px;letter-spacing:-1.8px}}
.hero-c{padding-block:40px 24px}
@container site (min-width:640px){.hero-c{padding-block:64px 32px}}
@container site (min-width:1024px){.hero-c{padding-block:88px 40px}}
.hero-c .lead{text-align:center;max-width:52ch}
.trust1{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;color:var(--text-2);font-size:13px;line-height:18px;font-weight:500}
.trust1 i{font-style:normal;color:var(--muted)}
.hero-demo{margin-top:36px}
@container site (min-width:1024px){.hero-demo{margin-top:48px}}
.hero-demo .phone{width:min(330px,100%)}
.ftag{display:none}
@container site (min-width:820px){
  .ftag{display:inline-flex;align-items:center;gap:8px;position:absolute;z-index:2;height:44px;padding:0 18px;border-radius:var(--r-pill);font-size:14px;font-weight:600;white-space:nowrap;color:var(--text);
    background:linear-gradient(180deg,var(--glass-strong),var(--glass));border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    box-shadow:inset 0 1px 0 var(--sheen),0 0 0 .5px var(--glass-edge),0 18px 34px -16px var(--shadow)}
  .ftag .ic{color:var(--accent-ink)}
  .ftag.l{right:calc(50% + 150px);top:22%}
  .ftag.r{left:calc(50% + 150px);top:58%}
}

/* Camera layer: the illustration video (fictional creator) behind the script, with a slow breathing motion */
.cam-layer{position:absolute;inset:0;opacity:0;transition:opacity .45s;overflow:hidden;background:#1d1a22}
.screen.cam .cam-layer{opacity:1}
.cam-img,.cam-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;max-width:none}
.cam-img{animation:breathe 6s ease-in-out infinite;transform-origin:50% 40%}
.cam-vid{opacity:0;transition:opacity .5s}
.screen.live .cam-vid{opacity:1}
@keyframes breathe{0%,100%{transform:scale(1.03) translateY(0)}50%{transform:scale(1.055) translateY(-.6%)}}
.cam-layer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,10,.6) 0%,rgba(8,6,10,.42) 40%,rgba(8,6,10,.08) 58%,transparent 70%)}
.pr-view{-webkit-mask-image:linear-gradient(transparent 0,#000 13%);mask-image:linear-gradient(transparent 0,#000 13%)}
.screen.cam .pr-view{-webkit-mask-image:linear-gradient(transparent 0,#000 13%,#000 44%,transparent 56%);mask-image:linear-gradient(transparent 0,#000 13%,#000 44%,transparent 56%)}
.screen.cam .pr-text{font-size:19px;text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.35)}
.screen.cam .w.done{opacity:.62}
.screen.cam .rl{top:27%}
.screen.cam .scr-bot{background:linear-gradient(transparent,rgba(12,11,15,.55) 70%)}

/* Stories: text + one big product visual, alternating sides on wide screens */
.story{padding-block:56px}
@container site (min-width:640px){.story{padding-block:80px}}
@container site (min-width:1024px){.story{padding-block:104px}}
.story-g{display:grid;gap:36px;align-items:center}
.story-txt{display:grid;gap:16px;min-width:0;max-width:30rem}
.story-txt p:not(.eyebrow){font-size:17px;line-height:26px;color:var(--text-2)}
.more{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:44px;padding:0 18px;border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--text);text-decoration:none;
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--sheen),0 0 0 .5px var(--glass-edge),0 8px 18px -10px var(--shadow)}
.more .ic{color:var(--accent-ink);transition:transform .2s}
.more:hover .ic{transform:translateX(3px)}
.story-vis{display:grid;justify-items:center;position:relative;isolation:isolate;min-width:0}
.story-vis::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(420px,90%);height:72%;transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(from 120deg,#FF8A70,#F472B6,#A78BFA,#5CD6E8,#FF8A70);filter:blur(56px);opacity:calc(.42 * var(--glow-on));pointer-events:none}
@container site (min-width:820px){
  .story-g{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}
  .story.alt .story-txt{order:2}
}

/* Story 1 visual: the reading line, close up */
.vpanel{width:min(520px,100%);aspect-ratio:5/4;border-radius:32px;padding:10px;background:#0B0B0F;
  box-shadow:0 0 0 6px var(--phone-ring),0 0 0 7px var(--glass-edge),inset 0 1px 0 rgba(255,255,255,.25),0 40px 70px -28px rgba(120,20,40,.45)}
.vp-screen{position:relative;height:100%;border-radius:24px;overflow:hidden;background:var(--pr-bg);color:var(--pr-fg)}
.vp-top{position:absolute;top:16px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;z-index:3;font-size:12px;font-weight:600}
.vp-screen .pr-text{font-size:clamp(22px,6.4cqi,34px);line-height:1.28;left:9%;right:9%}
.vpanel{container-type:inline-size}
.vp-screen .rl{top:50%}
.vp-screen .pr-view{-webkit-mask-image:linear-gradient(transparent 0,#000 24%,#000 78%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 24%,#000 78%,transparent 100%)}
.meter{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 10px;border-radius:var(--r-pill);background:rgba(40,36,44,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.meter i{display:block;width:3px;height:4px;border-radius:2px;background:#34D399;transition:height .2s}
.speaking .meter i{animation:lvl .9s ease-in-out infinite}
.speaking .meter i:nth-child(2){animation-delay:-.2s}.speaking .meter i:nth-child(3){animation-delay:-.45s}.speaking .meter i:nth-child(4){animation-delay:-.1s}.speaking .meter i:nth-child(5){animation-delay:-.6s}
@keyframes lvl{0%,100%{height:4px}50%{height:14px}}

/* Story 2 visual: the takes screen */
.phone.takes{width:min(300px,100%)}
.screen.tk{background:#111014;display:flex;flex-direction:column;gap:10px;padding:44px 12px 14px;font-size:12px;line-height:16px}
.tk-hd{display:grid;gap:2px;padding:0 4px}
.tk-hd b{font-size:20px;line-height:24px;letter-spacing:-.4px}
.tk-hd span,.tk-list span{color:#A7A0AE}
.tk-prev{position:relative;border-radius:18px;overflow:hidden;flex:1 1 auto;min-height:0}
.tk-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;max-width:none}
.tk-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(20,18,24,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.tk-play .ic{fill:#fff;margin-left:2px}
.tk-dur{position:absolute;right:10px;bottom:10px;padding:2px 8px;border-radius:var(--r-pill);background:rgba(20,18,24,.6);color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.tk-list{list-style:none;display:grid;gap:6px;flex:none}
.tk-list li{display:flex;align-items:center;gap:10px;padding:6px;border-radius:14px;background:rgba(255,255,255,.05)}
.tk-list li.on{background:rgba(255,107,94,.16);box-shadow:inset 0 0 0 1px rgba(255,107,94,.45)}
.tk-list img{width:34px;height:34px;border-radius:9px;object-fit:cover;flex:none}
.tk-list div{display:grid;flex:1;min-width:0}
.tk-list b{font-size:13px}
.tk-list span{font-variant-numeric:tabular-nums}
.tk-best{display:inline-flex;align-items:center;gap:4px;color:#FFB4A8!important;font-weight:700}
.tk-best .ic{fill:currentColor;width:12px;height:12px}
.tk-btn{display:flex;align-items:center;justify-content:center;height:42px;padding:0 14px;white-space:nowrap;border-radius:var(--r-pill);background:#fff;color:#111014;font-weight:700;font-size:13px}

/* Story 3 visual: the privacy sheet */
.card.priv{width:min(440px,100%);gap:18px;padding:22px}
.priv-top{display:flex;align-items:center;gap:14px}
.priv-top div{display:grid;gap:2px}
.priv-top b{font-size:18px;line-height:22px;letter-spacing:-.3px}
.priv-top span{color:var(--muted);font-size:13px;line-height:18px}
.priv-lock{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%),linear-gradient(45deg,#B0122C,#E0242B 55%,#F2463A);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 20px -8px rgba(224,36,43,.55)}
.priv-rows{display:grid;background:var(--well);border-radius:var(--r-row);padding:2px 16px}
.priv-rows div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:50px;border-bottom:1px solid var(--glass-edge);font-size:14px;line-height:19px}
.priv-rows div:last-child{border-bottom:0}
.priv-rows dt{color:var(--text-2)}
.priv-rows dd{font-weight:600;text-align:right;display:inline-flex;align-items:center;gap:6px}
.priv-rows dd.ok{color:var(--success)}

/* Everything else: one glass sheet, six short items */
.more-g{display:grid;gap:22px;padding:24px}
@container site (min-width:640px){.more-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px;padding:36px}}
@container site (min-width:1024px){.more-g{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mg-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.mg-item h3{margin-bottom:4px}
/* Pricing page: everything included, by block */
.feat-g{display:grid;gap:12px;margin-top:20px}
@container site (min-width:820px){.feat-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.feat-g .card{gap:14px;padding:24px}
.feat-g .fh{display:flex;align-items:center;gap:12px}
.mg-item p{color:var(--text-2);font-size:14px;line-height:20px}

/* Final call to action */
.final{padding-bottom:56px}
.final-card{justify-items:center;text-align:center;gap:18px}
@container site (min-width:1024px){.final-card{padding:72px 44px}}
.final-card p{max-width:44ch}
@media (prefers-reduced-motion:reduce){.cam-img{transform:scale(1.03)}}
:root.rt .story-vis::before{display:none}
@media (prefers-reduced-transparency:reduce){.story-vis::before{display:none}}
.plan > .asb{align-self:flex-start}
.still .cam-img{animation-play-state:paused}
.demo-tag{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--r-pill);font-size:12px;font-weight:600;color:var(--text-2);background:var(--well);box-shadow:inset 0 0 0 1px var(--glass-edge)}
.story-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
@container site (max-width:420px){.hero-demo .phone{width:min(280px,100%)}.hero-demo{margin-top:28px}}
@container site (min-width:1024px){.story{padding-block:80px}}
@container site (max-width:380px){.brand span{display:inline-flex}.brand>span:not(.logo-mark){display:none}}
.priv-top .priv-lock{color:#fff}
/* Sound toggle: muted by default (autoplay rule), sits over the camera view, bottom right */
.phone-wrap{position:relative;display:grid;justify-items:center;width:100%}
.snd{position:absolute;z-index:5;bottom:32px;left:calc(50% + min(150px,50%) - 66px);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(40,36,44,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.14)}
.snd[aria-pressed="true"]{background:rgba(224,36,43,.78)}
.snd:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero-demo .snd{left:calc(50% + min(165px,50%) - 66px)}
@container site (max-width:420px){.hero-demo .snd{left:calc(50% + min(140px,50%) - 64px)}}
:root.rt .snd{-webkit-backdrop-filter:none;backdrop-filter:none;background:#28242C}
/* Voice motion behind the demo phone: glass rings and bars that move with the creator's voice */
.demo:has(.vfx)::before{display:none}
.vfx{position:absolute;z-index:-1;left:50%;top:50%;width:min(680px,100cqi);height:80%;transform:translate(-50%,-50%);pointer-events:none;--lv:0;
  -webkit-mask-image:radial-gradient(closest-side,#000 68%,rgba(0,0,0,.65) 86%,transparent 100%);mask-image:radial-gradient(closest-side,#000 68%,rgba(0,0,0,.65) 86%,transparent 100%)}
.vbars{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.vglow{position:absolute;inset:16% 20%;border-radius:50%;background:conic-gradient(from 200deg,#FF8A70,#F472B6,#A78BFA,#5CD6E8,#FF8A70);filter:blur(50px);
  opacity:calc((.25 + var(--lv) * .35) * var(--glow-on));transform:scale(calc(.88 + var(--lv) * .3))}
.vring{position:absolute;left:50%;top:50%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;
  background:radial-gradient(circle at 32% 18%,rgba(255,255,255,.62),rgba(255,255,255,.1) 34%,rgba(255,255,255,0) 66%),linear-gradient(135deg,rgba(255,138,112,.16),rgba(244,114,182,.1) 35%,rgba(167,139,250,.14) 65%,rgba(92,214,232,.16));
  border:1.5px solid rgba(255,255,255,.85);box-shadow:inset 0 2px 2px rgba(255,255,255,.9),inset 0 -22px 40px -24px rgba(167,139,250,.7),0 30px 80px -34px rgba(140,60,140,.5);
  -webkit-backdrop-filter:blur(8px) saturate(150%);backdrop-filter:blur(8px) saturate(150%);
  transform:scale(calc(1 + var(--lv) * var(--amp)));opacity:calc(var(--o) + var(--lv) * .25)}
.vring.r1{width:min(390px,60cqi);--amp:.07;--o:.4}
.vring.r2{width:min(510px,78cqi);--amp:.11;--o:.3}
.vring.r3{width:min(640px,97cqi);--amp:.15;--o:.22}
.vbars{position:absolute;left:0;right:0;top:50%;height:44%;translate:0 -50%;display:flex;align-items:center;justify-content:space-between;padding:0 3%}
.vbars i{width:clamp(3px,.75cqi,6px);height:100%;border-radius:99px;transform:scaleY(.05);opacity:.5;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.15) 50%,rgba(255,255,255,.7)),linear-gradient(180deg,#FF8A70,#F472B6 35%,#A78BFA 65%,#5CD6E8);
  background-blend-mode:soft-light;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.75),0 6px 16px -6px rgba(167,139,250,.65)}
:root.rt .vring{-webkit-backdrop-filter:none;backdrop-filter:none;background:none}
@media (prefers-reduced-transparency:reduce){.vring{-webkit-backdrop-filter:none;backdrop-filter:none;background:none}}
[hidden]{display:none!important}
/* Honeypot du formulaire d’assistance : hors écran, jamais rempli par une personne. */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* Hors maquette : la page remplit l’écran, sans bande nue sous une page courte. */
.site{min-height:100vh;min-height:100dvh}