/* Translator Phone — product site. Premium speech technology: light turquoise, soft light, calm motion.
   Type: Manrope (light display, text and UI), widened em dash 'TP Dash', Noto for Arabic, Hebrew, Devanagari and Thai, system CJK; OFL, self-hosted. Lucide icons inlined at build time. */
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/mr-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/mr-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/mr-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/mr-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/mr-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}
/* Manrope's em dash is short (about .66em); 'TP Dash' is the same glyph widened to a full dash, so Russian headings keep a proper tire. */
@font-face{font-family:'TP Dash';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/tp-dash.woff2) format('woff2');unicode-range:U+2014}
/* Scripts Manrope does not cover (Noto, OFL): loaded only on pages that contain them. CJK uses the system fonts. */
@font-face{font-family:'Noto Sans Arabic';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/noto-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Noto Sans Hebrew';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/noto-hebrew.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/noto-devanagari.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/noto-thai.woff2) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@property --glare{syntax:'<number>';inherits:true;initial-value:0}

:root{
  /* Colour */
  --ink:#0b2230;--ink-2:#233f4c;--muted:#3e5c68;--faint:#7b949e;
  --paper:#fff;--bg:#f3fafb;--mist:#eaf6f8;--aqua:#e0f4f7;--aqua-2:#c4ebf1;
  --teal:#00a3b3;--teal-600:#00808c;--teal-700:#006b76;--teal-800:#005a63;--teal-900:#073840;
  --blue:#1f66e5;--coral:#ef5a4f;--green:#15965a;--amber:#8a5a00;
  --night:#05132a;--night-2:#0b2a4a;--night-ink:#c6dfe5;--night-muted:#a9c6cd;--night-line:rgba(127,227,236,.16);
  --line:rgba(11,34,48,.09);--line-2:rgba(11,34,48,.15);--frost-line:rgba(255,255,255,.6);
  --glow:rgba(0,163,179,.16);
  --shadow-sm:0 1px 2px rgba(6,40,50,.05),0 8px 20px -12px rgba(6,40,50,.18);
  --shadow:0 2px 6px rgba(6,40,50,.04),0 24px 56px -32px rgba(6,46,58,.38);
  /* Type */
  --font-cjk:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Noto Sans CJK SC','Hiragino Sans','Yu Gothic','Apple SD Gothic Neo','Malgun Gothic';
  --font-text:'TP Dash','Manrope','Noto Sans Arabic','Noto Sans Hebrew','Noto Sans Devanagari','Noto Sans Thai',var(--font-cjk),ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-display:var(--font-text);
  --fw-num:320;
  --font:var(--font-text);
  --fs-display:clamp(3.3rem,1.55rem + 5.4vw,7rem);
  --fs-h1:clamp(2.4rem,1.45rem + 3vw,4.25rem);
  --fs-h2:clamp(1.95rem,1.3rem + 1.9vw,3.1rem);
  --fs-h3:clamp(1.2rem,1.08rem + .4vw,1.4rem);
  --fs-h3x:clamp(1.6rem,1.2rem + 1.1vw,2.3rem);
  --fs-lead:clamp(1.1rem,1.03rem + .25vw,1.25rem);
  --fs-body:1.0625rem;--fs-card:1rem;--fs-small:.875rem;--fs-micro:.78rem;
  --fw-display:300;--fw-h2:300;--fw-mid:400;--fw-h3:500;--fw-lead:400;--fw-body:450;--fw-small:500;--fw-ui:500;--fw-strong:600;
  --ls-display:-.03em;--ls-h2:-.02em;--ls-h3:-.01em;--ls-label:.1em;
  --lh-display:.96;--lh-h2:1.08;--lh-h3:1.22;--lh-body:1.6;--lh-small:1.5;
  --ws-display:.03em;--measure:64ch;
  /* Space and shape */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;
  --section-y:clamp(56px,6.4vw,96px);--head-gap:clamp(28px,3.6vw,52px);
  --radius-xs:10px;--radius-sm:14px;--radius:20px;--radius-lg:28px;
  --wrap:1240px;--gutter:clamp(16px,4.2vw,40px);--header:72px;
  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);--ease-soft:cubic-bezier(.4,0,.2,1);--dur-fast:.18s;--dur:.32s;--dur-slow:.6s;
  --mint:var(--aqua);--accent:var(--teal-600);--white:#fff
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--ink-2);font-family:var(--font-text);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body);font-synthesis:none;font-kerning:normal;text-rendering:optimizeLegibility;overflow-x:clip}
:lang(en) body,body:lang(en){line-height:1.55}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
p,h1,h2,h3,h4,figure,ul,ol,dl,dd,address{margin:0}
address{font-style:normal}
ul[class],ol[class]{list-style:none;padding:0}
h1,h2,h3,h4{color:var(--ink);font-family:var(--font-display);font-weight:var(--fw-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);word-spacing:var(--ws-display);text-wrap:balance;overflow-wrap:break-word}
h3{font-size:var(--fs-h3)}
h4{font-family:var(--font-text);font-weight:var(--fw-strong)}
.h-line{display:block;text-wrap:balance}
.nobr{white-space:nowrap}
p{text-wrap:pretty}
strong,b{font-weight:var(--fw-strong)}
.facts-list span,.checks span,.sim-points span,.footer-brand p,.key-label,.keys-legend li,.eyebrow,.scenario-mode,.tile-text{text-wrap:balance}
svg.lucide{width:1.25em;height:1.25em;flex:none}
[hidden]{display:none!important}
::selection{background:var(--aqua-2);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
.night :focus-visible,.ice-dark :focus-visible,.night-band :focus-visible,.offer-android :focus-visible{outline-color:#9ff0f6}
.tile-device:focus-visible{outline-color:#9ff0f6;outline-offset:-6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;z-index:100;top:12px;left:12px;transform:translateY(-200%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:var(--fw-strong);transition:transform .2s var(--ease)}
.skip-link:focus{transform:none}
.num{font-variant-numeric:tabular-nums lining-nums}

.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.section{padding-block:var(--section-y);position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-text);font-size:var(--fs-micro);line-height:1.3;font-weight:var(--fw-strong);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--teal-700);margin-bottom:var(--sp-5)}
.eyebrow::before{content:'';width:20px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--blue));flex:none}
.h2{font-size:var(--fs-h2);font-weight:var(--fw-h2);letter-spacing:var(--ls-h2);line-height:var(--lh-h2)}
.h2:lang(ru),:lang(ru) .h2{letter-spacing:-.016em}
.h3x{font-size:var(--fs-h3x);font-weight:var(--fw-h2);letter-spacing:var(--ls-h2);line-height:1.1}
/* Light display cuts gain a touch of weight on small screens; Cyrillic body text gets slightly wider word spaces. */
@media (max-width:767px){:root{--fw-h2:340}}
@media (max-width:600px){:root{--fw-display:320}}
:lang(ru) body,body:lang(ru){word-spacing:.02em}
/* Per-language font order for Han characters, also inside fragments marked with lang (language list, greetings, demo). */
[lang]{--font-text:'TP Dash','Manrope','Noto Sans Arabic','Noto Sans Hebrew','Noto Sans Devanagari','Noto Sans Thai',var(--font-cjk),ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--font-display:var(--font-text)}
[lang]:not(html){font-family:var(--font-text)}
:lang(ja){--font-cjk:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo','Noto Sans JP','Noto Sans CJK JP'}
:lang(ko){--font-cjk:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR','Noto Sans CJK KR'}
/* Scripts outside Manrope: regular weights (light cuts do not exist or look faint), no tracking (it breaks Arabic joining
   and the Devanagari headline), more leading for stacked marks. */
:root:is(:lang(ar),:lang(fa),:lang(ur),:lang(he),:lang(hi),:lang(th),:lang(zh),:lang(ja),:lang(ko)){--fw-display:500;--fw-h2:500;--fw-mid:500;--fw-num:500;--lh-display:1.15;--lh-h2:1.25;--ws-display:normal}
:root:is(:lang(ar),:lang(fa),:lang(ur),:lang(he),:lang(hi),:lang(th),:lang(zh),:lang(ja),:lang(ko)) *,:is(:lang(ar),:lang(fa),:lang(ur),:lang(hi),:lang(th))[lang]:not(html) *{letter-spacing:0!important}
:root:is(:lang(ar),:lang(fa),:lang(ur),:lang(hi),:lang(th)){--lh-body:1.75}
:root:lang(th),:root:lang(hi){--lh-display:1.3;--lh-h2:1.35}
/* Scripts without capital letters: uppercase labels would only shout the Latin brand name inside them. */
:root:is(:lang(ar),:lang(fa),:lang(ur),:lang(he),:lang(hi),:lang(th),:lang(zh),:lang(ja),:lang(ko)) *{text-transform:none!important}
/* Line breaking: Korean breaks between words, Japanese keeps phrases and small kana with their word, Chinese keeps
   closing punctuation and small marks off the line start. */
:root:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}
:root:lang(ja) body{line-break:strict;word-break:auto-phrase}
:root:lang(zh) body{line-break:strict}
/* Headings with fixed tight leading get room for marks above and below the line in these scripts. */
:root:is(:lang(ar),:lang(fa),:lang(ur),:lang(hi),:lang(th)) :is(.page-hero h1,.h2,.h3x,.next-title,.mode h3,.sim h3,.device-real h2,.legal-main h1,.offer h3,.platform h3,.tp-modes-title,.hero-lead){line-height:1.35}
:root:is(:lang(zh),:lang(ja),:lang(ko),:lang(he)) :is(.page-hero h1,.h2,.h3x,.next-title,.mode h3,.sim h3,.device-real h2,.legal-main h1,.offer h3,.platform h3,.tp-modes-title){line-height:1.25}
.accent{background:linear-gradient(100deg,#006b76 5%,#0a7aa8 55%,#1d5fd0);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.accent-light{background:linear-gradient(100deg,#7fe3ec,#9cd0ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lead{font-size:var(--fs-lead);font-weight:var(--fw-body);line-height:1.55;color:var(--ink-2);max-width:var(--measure)}
.smallprint{font-size:var(--fs-small);font-weight:var(--fw-small);line-height:var(--lh-small);color:var(--muted)}
.section-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--sp-5) clamp(24px,6vw,96px);align-items:end;margin-bottom:var(--head-gap)}
.section-head:not(:has(>p)){grid-template-columns:1fr}
.section-head>p{max-width:500px;justify-self:end;color:var(--ink-2);font-size:var(--fs-card)}
.section-head.center{grid-template-columns:1fr;text-align:center;justify-items:center;row-gap:var(--sp-5)}
.section-head.center>p{justify-self:center;max-width:600px}

/* Backdrops: one fixed live water layer behind each page — light turquoise, or deep night blue on the device page.
   The still artwork shows without WebGL, on weak devices and while the live surface fades in. */
.backdrop{position:fixed;z-index:-2;top:0;left:0;width:100%;height:100lvh;pointer-events:none}
/* The still water (rendered from the calm scene, design/water-poster) shows without WebGL, on weak devices and while the live surface fades in. */
.backdrop-water{background:url(/assets/water-hero.webp) 50% 50%/cover no-repeat,linear-gradient(155deg,#eaf8fa 0%,#c3ebf0 38%,#95d6e0 75%,#7fcad6 100%)}
@media (max-aspect-ratio:3/4){.backdrop-water{background-image:url(/assets/water-hero-portrait.webp),linear-gradient(155deg,#eaf8fa 0%,#c3ebf0 38%,#95d6e0 75%,#7fcad6 100%)}}
.backdrop .fx-canvas{position:absolute;inset:0;width:100%;height:100%}
.water-veil{position:absolute;inset:0;background:#f2fafb;opacity:calc(var(--veil,0) * .2);pointer-events:none}
.backdrop-night .water-veil{background:#030a18;opacity:calc(var(--veil,0) * .28)}
.backdrop-night{background:radial-gradient(40% 34% at 80% 16%,rgba(170,205,255,.16),transparent 70%),radial-gradient(45% 40% at 8% 92%,rgba(0,150,170,.12),transparent 70%),linear-gradient(165deg,#040d1f 0%,#0a2643 55%,#061a32 100%)}
.fx-canvas{display:block;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none}
.fx-canvas.is-ready{opacity:1}

/* Glass panels (class .ice in markup): clear, lightly frosted, with a fine lit edge. Hover adds a little depth only. */
.ice{position:relative;isolation:isolate;border-radius:var(--radius-lg);
  background:linear-gradient(165deg,rgba(255,255,255,.68),rgba(240,250,252,.46) 52%,rgba(226,244,248,.52));
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(6,40,50,.04),0 22px 48px -34px rgba(6,46,58,.42);
  transition:box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
.ice::before,.ice-dark::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 26%),url(/assets/ice.webp) -60px -40px/420px;opacity:.28}
.ice::after,.ice-dark::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.35) 30%,rgba(150,214,226,.4) 62%,rgba(255,255,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity var(--dur) var(--ease)}
.ice-dark{position:relative;isolation:isolate;border-radius:var(--radius-lg);color:var(--night-ink);
  background:linear-gradient(160deg,rgba(22,56,96,.5),rgba(6,20,44,.46) 50%,rgba(12,40,74,.52));
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(200,248,252,.22),0 26px 56px -34px rgba(0,0,0,.7);
  transition:box-shadow var(--dur) var(--ease)}
.ice-dark::before{opacity:.1}
.ice-dark::after{background:linear-gradient(140deg,rgba(190,246,250,.45),rgba(127,227,236,.08) 35%,rgba(127,227,236,.22) 65%,rgba(190,246,250,.3))}
/* Interactive cards: a slightly deeper shadow and a brighter edge — no tilt, no jump. */
a.ice:hover,.tilt:hover{box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(6,40,50,.05),0 28px 56px -30px rgba(6,46,58,.5)}
a.ice:hover::after,.tilt:hover::after{background:linear-gradient(140deg,#fff,rgba(255,255,255,.55) 30%,rgba(0,163,179,.45) 62%,#fff)}
.ice-dark.tilt:hover{box-shadow:inset 0 1px 0 rgba(200,248,252,.3),0 30px 60px -32px rgba(0,0,0,.75)}

/* Buttons and chips */
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:999px;border:1px solid transparent;background:linear-gradient(180deg,#05808b,#006b76);color:#fff;font-family:var(--font-text);font-size:1rem;font-weight:var(--fw-strong);letter-spacing:.005em;line-height:1.2;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px -14px rgba(0,90,100,.75);transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease)}
.button:hover{background:linear-gradient(180deg,#088e9a,#007480);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 4px rgba(0,163,179,.1),0 14px 30px -14px rgba(0,90,100,.8)}
.button:active{transform:scale(.985);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 16px -12px rgba(0,90,100,.8)}
.button svg{width:1.1em;height:1.1em;transition:transform var(--dur) var(--ease)}
.button:hover svg{transform:translateX(2px)}
.button:hover .lucide-arrow-left{transform:translateX(-2px)}
.button.ghost{background:rgba(255,255,255,.78);color:var(--ink);border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.button.ghost:hover{background:#fff;border-color:rgba(0,107,118,.32);box-shadow:0 0 0 4px rgba(0,163,179,.08),var(--shadow-sm)}
.button.glass{background:linear-gradient(165deg,rgba(255,255,255,.72),rgba(236,248,250,.5));border-color:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 #fff,0 10px 24px -18px rgba(0,70,90,.55)}
.button.glass:hover{background:linear-gradient(165deg,#fff,rgba(242,251,252,.8));border-color:rgba(0,107,118,.25)}
.button.light{background:#fff;color:var(--teal-900);box-shadow:0 12px 30px -16px rgba(0,0,0,.55)}
.button.light:hover{background:#ecfafc;box-shadow:0 0 0 4px rgba(127,227,236,.16),0 12px 30px -16px rgba(0,0,0,.55)}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:var(--fw-strong);color:var(--teal-700);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.text-link:hover{text-decoration-color:currentColor}
.text-link svg{width:1.05em;height:1.05em;transition:transform var(--dur) var(--ease)}
.text-link:hover svg{transform:translateX(2px)}
.chip{display:inline-flex;align-items:center;gap:6px;padding-block:5px;padding-inline:9px 11px;border-radius:999px;font-family:var(--font-text);font-size:.8rem;font-weight:var(--fw-ui);letter-spacing:.01em;line-height:1.25;white-space:nowrap;background:var(--aqua);color:var(--teal-900)}
.chip svg{width:1.05em;height:1.05em}
.chip.ok{background:#dcf5e8;color:#0d5c37}
.chip.warn,.chip.soon{background:#fff1d8;color:var(--amber)}
.chip.dark{background:rgba(127,227,236,.14);color:#b9f1f6}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.78);color:var(--ink);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.icon-button:hover{background:#fff;border-color:rgba(0,107,118,.32)}

/* Phone frame around real screenshots — identical geometry everywhere */
.phone{position:relative;aspect-ratio:1130/2450;padding:0;border-radius:14%/6.5%;background:linear-gradient(150deg,#33464f,#0c181d 46%,#1f3038);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 1.5px 0 1px rgba(255,255,255,.2) inset,0 34px 70px -32px rgba(4,40,52,.6),0 14px 30px -18px rgba(4,40,52,.38)}
.phone img{position:absolute;left:2.2124%;top:1.0204%;width:95.575%;height:97.959%;object-fit:cover;border-radius:11.6%/5.3%;background:#eef7f9}
.phone::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.16),rgba(255,255,255,0) 30%);pointer-events:none}
/* Android phone (default frame): punch-hole camera in the status bar the screenshots leave free. */
.phone::before{content:'';position:absolute;z-index:1;left:50%;top:2.1%;width:3.4%;aspect-ratio:1;border-radius:50%;translate:-50% 0;
  background:radial-gradient(circle at 38% 36%,#34444d 0 16%,#06090b 46%);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
/* iPhone: titanium rim, thin black bezel, Dynamic Island; screenshots are 1179×2556 with the island and home-indicator insets. */
.phone.phone-iphone{aspect-ratio:1235/2620;border-radius:16.6%/7.8%;background:#07090a;
  box-shadow:0 0 0 2.5px #a9b0b4,0 0 0 3.5px #5f676b,0 1px 0 3.5px rgba(255,255,255,.35),0 34px 70px -32px rgba(4,40,52,.55)}
.phone-iphone img{left:2.267%;top:1.069%;width:95.466%;height:97.557%;border-radius:14.6%/6.8%}
.phone-iphone::before{top:2.2%;width:30.6%;aspect-ratio:auto;height:4.2%;border-radius:999px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.device-screen{border-radius:24px;padding:9px;background:linear-gradient(150deg,#f6f8f9,#cdd5d8);box-shadow:0 30px 60px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.45) inset}
.device-screen img{border-radius:16px;width:100%;aspect-ratio:3/4;object-fit:cover}

/* Header: light frosted bar */
.site-header{position:fixed;z-index:50;inset:0 0 auto;height:var(--header);background:rgba(244,251,252,.78);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 -1px 0 rgba(11,34,48,.06);transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.site-header.at-top:not(.is-solid){background:rgba(244,251,252,0);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-open .site-header{background:rgba(244,251,252,.96)!important;box-shadow:inset 0 -1px 0 rgba(11,34,48,.06)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.header-inner{height:100%;display:flex;align-items:center;gap:var(--sp-5)}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);flex:none;border-radius:12px}
.brand img{width:38px;height:38px;border-radius:10px;box-shadow:0 4px 12px -6px rgba(0,80,100,.45)}
.brand span{font-family:var(--font-display);font-size:1rem;font-weight:var(--fw-strong);line-height:1.04;letter-spacing:-.012em}
.desktop-nav{display:flex;gap:2px;margin-inline:auto}
.desktop-nav a{position:relative;padding:9px 14px;border-radius:999px;font-size:.94rem;font-weight:var(--fw-ui);color:var(--ink-2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.desktop-nav a:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.desktop-nav a[aria-current=page]{background:rgba(255,255,255,.82);color:var(--ink);font-weight:560;box-shadow:inset 0 0 0 1px rgba(11,34,48,.06)}
.header-actions{display:flex;align-items:center;gap:var(--sp-2);margin-inline-start:auto}
@media (min-width:1081px){.desktop-nav+.header-actions{margin-inline-start:0}}
.locale{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 12px;border-radius:999px;font-size:.88rem;font-weight:var(--fw-ui);letter-spacing:.02em;color:var(--ink-2);transition:background var(--dur) var(--ease)}
.locale:hover{background:rgba(255,255,255,.6)}
.locale-menu{position:relative}
.locale-menu>summary{list-style:none;cursor:pointer;user-select:none}
.locale-menu>summary::-webkit-details-marker{display:none}
.locale-menu[open]>summary{background:rgba(255,255,255,.75)}
/* Language menu: a frosted panel with every site language under the globe button; full width under the header on phones. */
.locale-panel{position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:60;width:min(540px,calc(100vw - 2 * var(--gutter)));max-height:min(72vh,560px);overflow:auto;overscroll-behavior:contain;padding:14px;border-radius:var(--radius);
  background:rgba(250,254,255,.95);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 26px 60px -24px rgba(6,46,58,.45)}
.locale-title{margin:2px 10px 10px;font-size:var(--fs-micro);font-weight:var(--fw-strong);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.locale-panel ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.locale-panel a{display:flex;align-items:center;min-height:42px;padding:8px 10px;border-radius:10px;font-size:.94rem;font-weight:var(--fw-ui);line-height:1.25;color:var(--ink-2);unicode-bidi:isolate;transition:background var(--dur-fast) var(--ease)}
.locale-panel a:hover{background:var(--aqua);color:var(--ink)}
.locale-panel a[aria-current]{background:var(--teal-800);color:#fff}
@media (max-width:560px){.locale-panel{position:fixed;inset-inline:var(--gutter);top:calc(var(--header) + 6px);width:auto;max-height:calc(100svh - var(--header) - 24px)}.locale-panel ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.night .locale-menu[open]>summary{background:rgba(127,227,236,.14)}
.night .locale-panel{background:rgba(6,20,40,.96);box-shadow:inset 0 0 0 1px rgba(127,227,236,.16),0 26px 60px -24px rgba(0,0,0,.75)}
.night .locale-title{color:var(--night-muted)}
.night .locale-panel a{color:var(--night-ink)}
.night .locale-panel a:hover{background:rgba(127,227,236,.1);color:#fff}
.night .locale-panel a[aria-current]{background:#fff;color:var(--teal-900)}
.account-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-block:9px;padding-inline:14px 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:.9rem;font-weight:var(--fw-strong);white-space:nowrap;transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.account-link:hover{background:var(--teal-900);box-shadow:0 0 0 4px rgba(0,107,118,.12)}
.account-short{display:none}
.motion-toggle{color:var(--ink-2)}
.motion-toggle .icon-play,.motion-toggle[aria-pressed="true"] .icon-pause{display:none}
.motion-toggle[aria-pressed="true"] .icon-play{display:block}
.header-actions .motion-toggle{width:40px;height:40px;border-color:transparent;background:transparent}
.header-actions .motion-toggle:hover{background:rgba(255,255,255,.6)}
.night .motion-toggle{color:var(--night-ink)}
.mobile-nav .mobile-motion{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0;border:0;border-bottom:1px solid var(--line);background:none;font-family:var(--font-display);font-size:1.15rem;font-weight:var(--fw-ui);color:var(--ink);text-align:start}
.mobile-nav .mobile-motion svg{color:var(--teal-700)}
.night .mobile-nav .mobile-motion{color:#fff;border-color:rgba(127,227,236,.14)}
@media (max-width:1080px){.header-actions .motion-toggle{display:none}}
@media (min-width:1081px){.mobile-nav .mobile-motion{display:none}}
.menu-toggle{display:none}
.menu-toggle .icon-close,.menu-toggle[aria-expanded="true"] .icon-open{display:none}
.menu-toggle[aria-expanded="true"] .icon-close{display:block}
body.menu-open{overflow:hidden}
.mobile-nav{position:fixed;z-index:49;inset:var(--header) 0 auto;max-height:calc(100svh - var(--header));overflow:auto;overscroll-behavior:contain;background:rgba(244,251,252,.97);padding:6px var(--gutter) 24px;box-shadow:0 40px 50px -30px rgba(0,40,50,.35);animation:drop var(--dur) var(--ease)}
.mobile-nav a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:1.15rem;font-weight:var(--fw-ui);color:var(--ink)}
.mobile-nav a[aria-current=page]{color:var(--teal-700);font-weight:var(--fw-strong)}
.mobile-nav a svg{color:var(--teal-700)}
.mobile-nav .mobile-account{margin-top:18px;justify-content:center;gap:10px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--font-text);font-size:1rem;font-weight:var(--fw-strong)}
.mobile-nav .mobile-account svg{color:#fff}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}

/* Night pages (device): a dark technological stage */
.night{background:#040d1f;color:var(--night-ink)}
.night h1,.night .h2,.night h3,.night .brand{color:#fff}
.night .eyebrow{color:#7fe3ec}
.night .lead{color:var(--night-ink)}
.night .section-head>p{color:var(--night-muted)}
.night .site-header{background:rgba(4,14,32,.86);box-shadow:inset 0 -1px 0 rgba(127,227,236,.12)}
.night .site-header.at-top{background:rgba(4,14,32,0);box-shadow:none}
.night.menu-open .site-header{background:rgba(4,14,32,.97)!important}
.night .desktop-nav a,.night .locale{color:var(--night-ink)}
.night .desktop-nav a:hover,.night .locale:hover{background:rgba(127,227,236,.1);color:#fff}
.night .desktop-nav a[aria-current=page]{background:rgba(127,227,236,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(127,227,236,.18)}
.night .account-link{background:#fff;color:var(--teal-900)}
.night .account-link:hover{background:#e3fafc}
.night .icon-button{background:rgba(255,255,255,.1);border-color:rgba(127,227,236,.3);color:#fff}
.night .mobile-nav{background:rgba(4,14,32,.97)}
.night .mobile-nav a{color:#fff;border-color:rgba(127,227,236,.14)}
.night .mobile-nav a svg{color:#7fe3ec}
.night .mobile-nav .mobile-account{background:#fff;color:var(--teal-900)}
.night .mobile-nav .mobile-account svg{color:var(--teal-900)}
/* Labels and links that sit straight on a light background use the deeper teal */
body:not(.night) .section-head .eyebrow,body:not(.night) .start-head .eyebrow,.faq-head .eyebrow,.faq-head .text-link,.overview-more .text-link{color:var(--teal-800)}
.night .crumbs{color:var(--night-muted)}
.night .accent{background-image:linear-gradient(100deg,#7fe3ec,#9cd0ff)}
.night .text-link{color:#7fe3ec}

/* Home hero: the water behind, product on the right */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(660px,100svh,960px);padding:calc(var(--header) + 32px) 0 72px;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(24px,3vw,56px);width:min(var(--wrap),100% - 2*var(--gutter))}
.hero-copy{position:relative;z-index:2;padding-block:12px}
.hero h1{font-size:var(--fs-display);font-weight:var(--fw-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);word-spacing:0;color:var(--ink);margin:0 0 clamp(24px,2.4vw,34px) -.03em}
.hero h1 span{display:inline-block;background:linear-gradient(100deg,#006b76 8%,#0a86a8 52%,#1d5fd0);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em;margin-bottom:-.06em}
.hero-lead{font-family:var(--font-display);font-size:clamp(1.35rem,1.05rem + .8vw,1.8rem);line-height:1.24;letter-spacing:-.01em;word-spacing:.04em;font-weight:var(--fw-lead);color:var(--ink);margin-bottom:var(--sp-4)}
.hero-text{max-width:540px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.hero-note{display:flex;align-items:flex-start;gap:8px;max-width:520px;margin-top:var(--sp-4);font-size:var(--fs-small);font-weight:var(--fw-small);line-height:var(--lh-small);color:var(--ink-2)}
.hero-note svg{flex:none;width:1.05em;height:1.05em;margin-top:.2em;color:var(--teal-700)}
.hero-points{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-5);font-size:.92rem;font-weight:var(--fw-ui);color:var(--ink-2)}
.hero-points li{display:inline-flex;align-items:center;gap:7px}
.hero-points svg{color:var(--teal-700);width:1.05em;height:1.05em}
.hero-stage{position:relative;height:clamp(500px,70vh,700px);margin:0}
.stage{position:absolute;inset:0 -4% 92px 0;perspective:2200px;--pf-l:25%;--pf-t:2%;--pf-h:92%}
.stage .phone{position:absolute;transform-origin:50% 60%}
.phone-front{height:var(--pf-h);left:var(--pf-l);top:var(--pf-t);z-index:3;transform:rotateY(-16deg) rotateX(5deg) rotateZ(1.2deg)}
.phone-back{height:73%;left:0;top:19%;z-index:2;transform:rotateY(-16deg) rotateX(5deg) rotateZ(1.2deg)}
.hero-device{position:absolute;z-index:1;height:84%;width:auto;left:67%;top:11%;filter:drop-shadow(0 40px 50px rgba(4,40,52,.26)) drop-shadow(0 10px 18px rgba(4,40,52,.14))}
.hero-stage figcaption{position:absolute;left:0;right:0;bottom:0;text-align:center}
/* Legend under the three devices, in their order on the stage (the stage keeps its geometry in every direction). */
.hero-devices{direction:ltr;display:grid;grid-template-columns:31% 37% 32%;margin:0 0 10px;padding:0;list-style:none}
.hero-devices li{display:flex;flex-direction:column;align-items:center;gap:2px;padding-inline:6px;font-size:.8rem;line-height:1.3}
.hero-devices b{font-weight:var(--fw-strong);color:var(--ink)}
.hero-devices span{font-weight:var(--fw-small);color:var(--muted)}
.hero-shots-note{display:block;font-size:.76rem;font-weight:var(--fw-small);line-height:1.45;color:var(--muted);text-wrap:balance}
/* One quiet entrance for the first screen. */
.hero-copy,.hero-stage{animation:enter var(--dur-slow) var(--ease) both}
.hero-stage{animation-delay:.12s}
@keyframes enter{from{opacity:0;translate:0 14px}}

/* Facts */
.facts{position:relative;z-index:1;margin-top:calc(-1 * var(--sp-6))}
.facts-list{display:grid;grid-template-columns:repeat(4,1fr)}
.facts-list li{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) clamp(18px,2.4vw,32px)}
.facts-list li+li{border-inline-start:1px solid var(--frost-line)}
.facts-list strong{font-family:var(--font-display);font-size:clamp(2.2rem,1.6rem + 1.3vw,3rem);line-height:1;font-weight:var(--fw-num);letter-spacing:-.03em;background:linear-gradient(140deg,#00808c,#1d5fd0);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums lining-nums}
.facts-list span{font-size:var(--fs-small);font-weight:var(--fw-small);line-height:1.4;color:var(--ink-2)}

/* Shared icon tile */
.tile-icon,.feature-icon,.scenario-icon,.limit-icon,.offer-icon,.mode-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--radius-sm);background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(226,246,250,.6));color:var(--teal-700);box-shadow:inset 0 0 0 1px rgba(11,34,48,.05),0 6px 14px -10px rgba(0,80,100,.4)}
.tile-icon svg,.feature-icon svg,.scenario-icon svg,.limit-icon svg,.offer-icon svg{width:21px;height:21px}
.overview-more{margin-top:var(--sp-6);display:flex;justify-content:center}

/* How it works: the translation demo sits in a light glass panel */
.slab{padding:clamp(24px,4vw,56px)}
.slab .section-head{margin-bottom:var(--head-gap)}
.how-note{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-6);padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-sm);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(11,34,48,.05);color:var(--ink-2);font-size:var(--fs-small);font-weight:var(--fw-small);width:fit-content;max-width:100%}
.how-note svg{color:var(--teal-700)}
.home .how{padding-bottom:24px}
.home .how+.overview{padding-top:32px}

/* Device teaser on the home page: a dark stage panel with the sound-wave scene around the device */
.night-band{position:relative;color:var(--night-ink)}
.night-glass{position:absolute;inset:0;z-index:-1;border-radius:var(--radius-lg);background:radial-gradient(45% 55% at 74% 46%,rgba(0,170,190,.2),transparent 70%),linear-gradient(160deg,#040d1f,#0a2846 55%,#071d36);box-shadow:0 30px 70px -40px rgba(4,16,40,.6)}
.night-stage{position:relative;isolation:isolate;padding:clamp(36px,5.5vw,88px) clamp(24px,5vw,80px)}
.night-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.night-band .eyebrow{color:#7fe3ec}
.night-band .h2{color:#fff}
.night-band .lead{color:var(--night-ink);margin-top:var(--sp-5);max-width:560px}
.night-points{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
.night-points li{display:flex;align-items:center;gap:var(--sp-3);color:#fff;font-weight:var(--fw-ui)}
.night-band .feature-icon,.ice-dark .feature-icon,.night .feature-icon{background:rgba(127,227,236,.1);color:#8ae9f1;box-shadow:inset 0 0 0 1px rgba(127,227,236,.16)}
.night-cta,.device-cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);margin-top:var(--sp-6)}
.night-cta p,.device-cta p{font-size:var(--fs-small);font-weight:var(--fw-small);line-height:var(--lh-small);color:var(--night-ink);max-width:540px}
.night-visual{display:grid;justify-items:center}
@media (min-width:1081px){.night-band .device-keys{width:min(100%,220px)}.night-band .tp-sonic:not(.tp-sonic-hero) .tp-sonic-anchor{width:var(--tp-w,min(100% - 2*var(--tp-bleed-x),220px))}.night-stage{padding-block:clamp(36px,4.5vw,72px)}}

/* Device keys over the concept render */
.device-figure{display:grid;gap:var(--sp-4);justify-items:center;margin:0}
.device-figure figcaption{font-size:.8rem;font-weight:var(--fw-small);color:var(--night-ink);text-align:center;max-width:380px}
.device-keys{position:relative;width:min(100%,280px)}
.device-keys img{width:100%;filter:drop-shadow(0 44px 56px rgba(0,0,0,.5))}
.keys{position:absolute;inset:0;pointer-events:none}
.key{position:absolute;display:flex;align-items:center;gap:8px;transform:translateY(-50%)}
.key-dot{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--teal);color:#032127;font-size:.72rem;font-weight:var(--fw-strong);box-shadow:0 0 0 4px rgba(0,163,179,.22)}
.key-label{font-size:.8rem;font-weight:var(--fw-ui);color:#e6f5f8;white-space:nowrap;padding:4px 10px;border-radius:999px;background:rgba(5,28,36,.78);border:1px solid rgba(127,227,236,.22)}
.key-connect{left:6.5%;top:57.6%;flex-direction:row-reverse}
.key-answer{left:6.5%;top:63.9%;flex-direction:row-reverse}
.key-back{left:92.5%;top:57.8%}
.key-end{left:92.5%;top:64.2%}
.key-connect,.key-answer{translate:-100% 0;margin-left:10px}
.key-back,.key-end{margin-left:-10px}
.keys-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.device-figure.is-hero .device-keys{width:min(100%,262px)}

@media (min-width:1081px) and (max-width:1260px){.page-device .page-hero .key-label{display:none}.page-device .page-hero .keys-legend{position:static;width:100%;height:auto;overflow:visible;clip-path:none;white-space:normal;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin-top:6px;font-size:.88rem;color:#d6eff2}.page-device .page-hero .keys-legend li{display:flex;align-items:center;gap:10px}}

/* Home: app and languages side by side */
.duo-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--sp-5)}
.duo-card{display:flex;flex-direction:column;gap:var(--sp-4);overflow:hidden;padding:clamp(24px,3.4vw,44px)}
.duo-card p:not(.eyebrow){color:var(--ink-2);max-width:460px}
.duo-copy .eyebrow{margin-bottom:var(--sp-4)}
.duo-copy .h3x{margin-bottom:var(--sp-4)}
.duo-app{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--sp-5);align-items:center}
.duo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-5)}
.duo-shot{display:flex;justify-content:center;align-items:center;min-width:0;padding:4px}
.duo-shot .phone{width:min(100%,180px);flex:none;aspect-ratio:1080/2400}
.duo-lang{justify-content:space-between}
.duo-lang .breeze{margin-inline:calc(-1 * clamp(24px,3.4vw,44px))}

/* Greetings in the languages of the app: a slow, light ribbon that stops while you read it */
.breeze{position:relative;overflow:hidden;padding-block:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.breeze-row{display:flex;white-space:nowrap}
.breeze-row+.breeze-row{margin-top:2px}
.breeze-track{display:flex;flex:none;animation:breeze 120s linear infinite}
.breeze-rtl .breeze-track{animation-duration:150s;animation-direction:reverse}
.breeze.is-paused .breeze-track,.is-still .breeze-track{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){.breeze:hover .breeze-track{animation-play-state:paused}}
.breeze-set{display:flex;flex:none;gap:clamp(28px,3.4vw,56px);padding-right:clamp(28px,3.4vw,56px)}
.breeze-word{display:inline-block;font-family:var(--font-display);font-size:clamp(1.45rem,1.1rem + 1.2vw,2.2rem);font-weight:350;letter-spacing:-.01em;line-height:1.45;color:var(--ink);transition:color var(--dur) var(--ease)}
.breeze-ltr .breeze-word:nth-child(3n+2){color:var(--teal-700);font-weight:520}
.breeze-rtl .breeze-word{font-weight:400;color:var(--muted)}
.breeze-word:hover{color:var(--teal-700)}
/* Scripts without the Wix Madefor glyphs fall back to system fonts, which run heavy; keep them at a regular weight. */
.breeze .breeze-word:is(:lang(zh),:lang(ja),:lang(ko),:lang(th),:lang(hi),:lang(he),:lang(ar),:lang(fa),:lang(ur)){font-weight:400}
.breeze-wide{margin:0 auto var(--sp-5);width:min(var(--wrap) + 2 * var(--sp-6),100% - 2 * var(--gutter));padding:var(--sp-3) 0}
.breeze-wide .breeze-word{font-size:clamp(1.6rem,1.15rem + 1.6vw,2.6rem)}
@keyframes breeze{to{transform:translateX(-50%)}}

/* Get started */
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.offer{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);padding:clamp(24px,2.6vw,32px)}
.offer-android{background:linear-gradient(150deg,rgba(5,40,48,.96),rgba(7,62,72,.94) 60%,rgba(8,74,86,.93));color:#d4f1f4}
.offer-android::before{opacity:.08}
.offer-android h3{color:#fff}
.offer.offer-android>p:not(.smallprint),.offer.offer-android>.smallprint{color:#d6eff2}
.offer-android .offer-icon{background:rgba(255,255,255,.12);color:#9ff0f6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.offer-android .offer-tag{color:#9ff0f6}
.offer-android .button{background:#fff;color:var(--teal-900)}
.offer-top{display:flex;align-items:center;gap:var(--sp-3);width:100%}
.offer-tag{font-size:var(--fs-micro);font-weight:var(--fw-strong);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--teal-700)}
.offer h3{font-size:clamp(1.5rem,1.3rem + .6vw,1.75rem);font-weight:var(--fw-mid);letter-spacing:-.02em;margin-top:var(--sp-1)}
.offer>p:not(.smallprint){color:var(--ink-2);flex:1}
.offer .button{margin-top:var(--sp-1)}
.offer .smallprint{min-height:3em;color:var(--muted)}
.contact-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-7);text-align:center}
.contact-row>p{color:var(--ink);font-weight:var(--fw-ui)}
.contact-mail{display:inline-flex;align-items:center;gap:8px;padding-block:6px;padding-inline:18px 6px;border-radius:999px}
.contact-mail a{font-weight:var(--fw-strong);color:var(--teal-700)}
.contact-mail .icon-button{width:38px;height:38px}
.copy-status{flex-basis:100%;min-height:1.5em;font-size:var(--fs-small);color:#0d5c37}

/* Inner page hero */
.page-hero{position:relative;display:flex;align-items:center;min-height:clamp(420px,58svh,680px);padding:calc(var(--header) + clamp(32px,4.5vw,72px)) 0 clamp(24px,3.5vw,48px)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center;width:min(var(--wrap),100% - 2*var(--gutter))}
.page-hero:not(.has-visual){min-height:clamp(360px,46svh,540px)}
.page-hero:not(.has-visual) .page-hero-grid{grid-template-columns:minmax(0,1fr)}
.page-hero-copy{max-width:820px;animation:enter var(--dur-slow) var(--ease) both}
.page-hero h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.026em;font-weight:var(--fw-display);margin-bottom:var(--sp-5);text-wrap:balance}
.page-hero.has-visual h1{font-size:clamp(2.3rem,1.4rem + 2.5vw,3.75rem)}
.page-hero .lead{max-width:640px}
.crumbs{color:var(--ink-2)}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:var(--sp-5);font-size:var(--fs-small);font-weight:var(--fw-ui)}
.crumbs li+li::before{content:'/';content:'/' / '';margin-inline-end:10px;opacity:.5}
.crumbs a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s}
.crumbs a:hover{text-decoration-color:currentColor}
.jump{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6)}
.jump-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 18px 9px 14px;border-radius:999px;font-size:.94rem;font-weight:var(--fw-ui);color:var(--ink)}
.jump-link svg{color:var(--teal-700);width:1.15em;height:1.15em}
.fan{position:relative;height:clamp(460px,64vh,660px)}
.fan .phone{position:absolute;top:50%;left:50%;height:88%;transform:translate(-50%,-50%)}
.fan .fan-0{transform:translate(-128%,-42%) rotate(-10deg);height:76%}
.fan .fan-1{z-index:2}
.fan .fan-2{transform:translate(28%,-42%) rotate(10deg);height:76%}
.app-stage{position:relative;height:clamp(440px,60vh,640px)}
.app-stage .phone{position:absolute;top:50%;left:50%}
.app-front{height:88%;z-index:2;transform:translate(-30%,-50%) rotate(3deg)}
.app-back{height:72%;transform:translate(-100%,-46%) rotate(-7deg)}
.page-hero .hero-actions{margin-top:var(--sp-6)}
.page-hero .device-cta p{color:var(--night-ink)}
.page-hero-visual{display:grid;justify-items:center}

/* Modes page */
.modes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);align-items:stretch}
.mode{display:flex;flex-direction:column;overflow:hidden}
.mode-shot{position:relative;display:grid;place-items:center;padding:clamp(28px,3.2vw,42px) 20px clamp(26px,3vw,38px);background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
.mode-shot .phone{width:min(62%,236px)}
.mode-body{position:relative;display:flex;flex-direction:column;gap:14px;flex:1;padding:clamp(22px,2.4vw,32px);border-top:1px solid var(--frost-line)}
.mode-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.mode-icon{width:38px;height:38px;border-radius:12px}
.mode-icon svg{width:20px;height:20px}
.mode-name{font-weight:var(--fw-strong);color:var(--ink);font-size:1rem;margin-inline-end:auto}
.mode h3{font-size:clamp(1.35rem,1.1rem + .6vw,1.65rem);font-weight:var(--fw-mid);line-height:1.15;letter-spacing:-.015em}
.mode-text{color:var(--ink-2);font-size:var(--fs-card)}
.checks{display:grid;gap:9px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--ink-2);line-height:1.45}
.checks svg{color:var(--teal-700);margin-top:.12em;width:1.05em;height:1.05em}
.mode-where{font-size:var(--fs-small);color:var(--ink-2);line-height:1.5;padding-top:14px;border-top:1px solid var(--frost-line)}
.mode-where span{display:block;font-size:.74rem;font-weight:var(--fw-strong);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.mode-note{margin-top:auto;display:flex;gap:10px;font-size:var(--fs-small);font-weight:var(--fw-small);line-height:1.5;color:#5c3f06;background:rgba(255,246,228,.78);border-radius:12px;padding:12px 14px}
.mode-note svg{flex:none;color:#a46a00;margin-top:.1em;width:1.05em;height:1.05em}
.mode-note:has(.lucide-lightbulb){background:rgba(255,255,255,.5);color:var(--ink-2)}
.mode-note .lucide-lightbulb{color:var(--teal-700)}
@media (min-width:861px){
  .modes-grid{grid-auto-rows:auto}
  .mode{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0}
  .mode-body{display:contents}
  .mode-shot{border-bottom:1px solid var(--frost-line)}
  .mode-body>*{margin-inline:clamp(22px,2.4vw,32px)}
  .mode-meta{padding-top:clamp(22px,2.4vw,30px)}
  .mode-body>h3{margin-top:14px}
  .mode-text,.checks{margin-top:14px}
  .mode-note{margin-top:18px;align-self:end}
  .mode-where{margin-top:16px;margin-bottom:clamp(22px,2.4vw,30px)}
}
.sim{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:var(--sp-5);padding:clamp(28px,4.4vw,64px);overflow:hidden}
.sim-glass{position:absolute;z-index:-2;inset:0;border-radius:inherit;overflow:hidden;background:radial-gradient(50% 70% at 18% 60%,rgba(0,190,205,.3),transparent 70%),linear-gradient(140deg,#062430,#0a3a48 55%,#08303c)}
.sim-visual{display:grid;justify-items:center;gap:14px;margin:0}
.sim-visual .device-screen{width:min(100%,340px);transform:rotate(-3deg)}
.sim-visual figcaption{font-size:.8rem;color:var(--night-muted);text-align:center}
.sim-body{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.sim .mode-icon{background:rgba(127,227,236,.14);color:#8ae9f1;box-shadow:inset 0 1px 0 rgba(200,248,252,.3)}
.sim .mode-name{color:#fff;margin-inline-end:0}
.sim-label{font-size:var(--fs-micro);font-weight:var(--fw-strong);letter-spacing:var(--ls-label);text-transform:uppercase;color:#7fe3ec}
.sim h3{color:#fff;font-size:var(--fs-h3x);font-weight:var(--fw-h2);line-height:1.1;letter-spacing:-.02em}
.sim-text{font-size:var(--fs-body);color:var(--night-ink);max-width:640px}
.sim-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;width:100%;padding-top:6px}
.sim-points li{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid rgba(127,227,236,.28);font-size:.95rem;line-height:1.4;color:#e6f5f8}
.sim-points svg{color:#7fe3ec;width:22px;height:22px}
.sim .mode-where{border-color:rgba(255,255,255,.12);color:#cfe5ea;padding-top:14px;width:100%}
.sim .mode-where span{color:var(--night-ink)}
.sim-note{display:flex;gap:10px;font-size:var(--fs-small);font-weight:var(--fw-small);line-height:1.55;color:var(--night-ink);max-width:62ch}
.sim-note svg{flex:none;color:#7fe3ec;margin-top:.15em;width:1.05em;height:1.05em}
.scenario-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.scenario{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);border-radius:var(--radius)}
.scenario-icon{margin-bottom:8px}
.scenario h3{font-size:var(--fs-h3);font-weight:var(--fw-h3)}
.scenario p{color:var(--ink-2);font-size:var(--fs-card);flex:1}
.scenario-mode{align-self:flex-start;justify-self:start;margin-top:6px;font-size:.8rem;font-weight:var(--fw-ui);color:var(--teal-900);background:rgba(255,255,255,.55);padding:5px 11px;border-radius:999px}

/* App page */
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.feature-grid li{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);border-radius:var(--radius)}
.feature-grid .feature-icon{margin-bottom:6px}
.feature-grid h3,.device-features h3,.credit-list h3,.steps h3,.limit-grid h3{font-family:var(--font-text);font-size:1.0625rem;font-weight:var(--fw-strong);letter-spacing:0;word-spacing:0;line-height:1.3}
.feature-grid p,.credit-list p{font-size:var(--fs-card);color:var(--ink-2);line-height:1.5}
.platforms-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center}
.platforms-shot{width:clamp(200px,22vw,290px);margin:0}
.platforms-grid .h2{margin-bottom:var(--sp-6)}
.platforms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.platform{display:grid;align-content:start;gap:10px;padding:clamp(22px,2.6vw,32px);border-radius:var(--radius)}
.platform-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.platform h3{font-size:1.4rem;font-weight:var(--fw-mid);letter-spacing:-.015em;color:var(--ink)}
.platform p{font-size:var(--fs-card);color:var(--ink-2);line-height:1.5}
.start-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--head-gap)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.steps li{padding:var(--sp-6) var(--sp-5);border-radius:var(--radius);overflow:hidden}
.step-num{display:block;font-family:var(--font-display);font-size:3.6rem;line-height:.9;font-weight:var(--fw-num);letter-spacing:-.04em;margin-bottom:var(--sp-4);background:linear-gradient(160deg,var(--teal),#1d5fd0);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps h3{margin-bottom:var(--sp-2)}
.steps p{font-size:var(--fs-card);color:var(--ink-2)}
.start-notice,.credits-note{display:flex;gap:12px;align-items:flex-start;margin-top:clamp(20px,2.4vw,28px);padding:16px 20px;border-radius:var(--radius-sm);background:rgba(234,253,255,.65);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(0,118,132,.16);color:var(--ink-2);font-size:var(--fs-small);font-weight:var(--fw-small);line-height:1.55;max-width:min(900px,68ch)}
.start-notice svg,.credits-note svg{flex:none;color:var(--teal-700);margin-top:.15em}
.start-notice .text-link{color:var(--teal-800)}
.pricing{padding-top:24px}
.pricing-head{display:grid;gap:12px;max-width:72ch;margin-bottom:24px}
.pricing-head p,.usage-total{color:var(--ink-2)}
.price-table{width:100%;table-layout:fixed;border-collapse:collapse;text-align:start;font-variant-numeric:tabular-nums}
.price-table caption{text-align:start;font-size:var(--fs-h3);font-weight:var(--fw-strong);padding-block:0 16px}
.price-table th,.price-table td{padding:18px 12px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
.price-table thead th{font-size:var(--fs-small);color:var(--ink-2);font-weight:var(--fw-ui)}
.price-table thead th:first-child{width:25%}
.price-table thead th:nth-child(2){width:35%}
.price-table th{overflow-wrap:anywhere;hyphens:auto}
.price-table tbody th{font-weight:var(--fw-strong)}
.price-table tbody td{white-space:nowrap}
.price-table tbody td:nth-child(2){color:var(--teal-800);font-weight:var(--fw-strong)}
.pricing .smallprint{margin-top:16px;max-width:72ch}
.usage-breakdown{padding-top:24px}
.usage-breakdown .h2{margin-bottom:28px}
.usage-total{max-width:78ch;margin-top:24px;line-height:1.65}
.page-credits .account-section{padding-top:32px}
.page-credits .credits{padding-bottom:32px}
.page-credits .pricing{padding-bottom:40px}
@media(max-width:420px){.price-table th,.price-table td{padding:16px 6px}.price-table tbody td{font-size:.875rem}}

/* Device page */
.device-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.device-features li{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);border-radius:var(--radius)}
.device-features .feature-icon{margin-bottom:6px}
.device-features p{font-size:var(--fs-card);line-height:1.5;color:var(--night-ink)}
.device-real{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin:0;padding:clamp(24px,4vw,56px)}
.device-screens{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:clamp(14px,2vw,24px)}
.device-real figcaption{display:grid;gap:var(--sp-3);font-size:var(--fs-card);line-height:1.6;color:var(--night-ink);max-width:440px}
.device-real h2{color:#fff;font-size:clamp(1.5rem,1.1rem + 1vw,2.1rem);line-height:1.12;letter-spacing:-.02em;font-weight:var(--fw-mid)}
.table-wrap{overflow:hidden}
.table-wrap table{width:100%;border-collapse:collapse;text-align:start}
.table-wrap :is(th,td){text-align:start}
.table-wrap th,.table-wrap td{padding:18px clamp(14px,2vw,28px);vertical-align:middle}
.table-wrap thead th{font-size:var(--fs-micro);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--night-muted);font-weight:var(--fw-strong);border-bottom:1px solid rgba(127,227,236,.16)}
.table-wrap thead th.col-device{color:#9ff0f6;background:rgba(127,227,236,.08)}
.table-wrap tbody th{font-weight:var(--fw-ui);color:#fff;font-size:var(--fs-card);width:36%}
.table-wrap tbody tr+tr>*{border-top:1px solid rgba(127,227,236,.1)}
.table-wrap tbody td:last-child{background:rgba(127,227,236,.06)}
.cell{font-size:.95rem;color:var(--night-ink)}
.cell-value{display:inline-flex;align-items:flex-start;gap:8px;line-height:1.4}
.cell svg{flex:none;margin-top:.15em;width:1.15em;height:1.15em}
.cell-yes svg{color:#5fe0a0}
.cell-no svg{color:#7d98a1}
.cell-no{color:var(--night-muted)}
.cell-part svg{color:#ffc95c}

/* Languages page */
.language-tools{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:24px}
.language-search{display:flex;align-items:center;gap:12px;width:min(460px,100%);min-height:56px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(11,34,48,.1);transition:box-shadow .2s,background .2s}
.language-search:focus-within{background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px var(--teal-600),0 0 0 3px var(--blue)}
.language-search svg{color:var(--muted)}
.language-search input{flex:1;min-width:0;height:54px;border:0;background:transparent;outline:0;font-size:1rem;color:var(--ink)}
.language-search input::placeholder{color:var(--muted);opacity:.9}
.language-result{font-size:var(--fs-small);font-weight:var(--fw-ui);color:var(--ink-2);font-variant-numeric:tabular-nums}
.language-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.language-list li{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 18px;border-radius:var(--radius-sm);background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.language-list li:hover{background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(0,128,140,.22)}
.language-list span{font-size:1.04rem;font-weight:var(--fw-strong);color:var(--ink)}
.language-list small{font-size:.82rem;font-weight:var(--fw-small);color:var(--muted)}
.languages-note{margin-top:22px;max-width:68ch}
.faq-answer p{max-width:64ch}

/* Credits page */
.credit-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.credit-list li{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,32px);border-radius:var(--radius)}
.credit-list .feature-icon{margin-bottom:6px}
.account-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--sp-5);align-items:stretch}
.account-copy .lead{margin:20px 0 26px}
.account-copy .smallprint{margin-top:18px;max-width:560px}
.account-help{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:22px}
.subscriptions{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vw,40px)}
.subscriptions h3{font-size:1.3rem;font-weight:var(--fw-mid);margin-bottom:var(--sp-3)}
.subscriptions p{font-size:var(--fs-card);color:var(--ink-2);margin-bottom:18px}
.subscriptions a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;border-top:1px solid var(--frost-line);font-weight:var(--fw-strong);color:var(--teal-700);transition:color var(--dur) var(--ease)}
.subscriptions a:hover{color:var(--teal-900)}

/* FAQ page */
.limit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.limit-grid li{display:grid;grid-template-columns:auto 1fr;align-content:start;gap:8px 16px;padding:clamp(20px,2.4vw,28px);border-radius:var(--radius)}
.limit-icon{grid-row:span 2;width:42px;height:42px;border-radius:13px}
.limit-grid h3{min-height:42px;display:flex;align-items:center}
.limit-grid p{grid-column:2;font-size:.95rem;color:var(--ink-2);line-height:1.55}
.faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq-head{position:sticky;top:calc(var(--header) + 32px)}
.faq-head>p{margin:20px 0 22px;color:var(--ink-2);max-width:400px}
.faq-list{padding:6px clamp(20px,3vw,36px)}
.faq-list details+details{border-top:1px solid var(--frost-line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:18px 0;cursor:pointer;list-style:none;font-size:1.06rem;font-weight:560;line-height:1.4;color:var(--ink);transition:color var(--dur) var(--ease)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--teal-700)}
.faq-list summary svg{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:rgba(255,255,255,.6);color:var(--teal-700);box-shadow:inset 0 1px 0 #fff;transition:transform .35s var(--ease),background .35s}
.faq-list details[open] summary svg{transform:rotate(45deg);background:var(--teal-700);color:#fff}
.faq-answer{padding:0 0 24px;padding-inline-end:52px}
.faq-answer p{color:var(--ink-2);font-size:var(--fs-card)}
@supports (interpolate-size:allow-keywords){
  .faq-list{interpolate-size:allow-keywords}
  .faq-list details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
  .faq-list details[open]::details-content{block-size:auto}
}

/* Next page */
.next-section{padding-top:clamp(24px,3vw,48px)}
.next-card{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,4vw,64px);padding:clamp(28px,4.4vw,64px);color:inherit}
.next-copy{display:grid;gap:var(--sp-3)}
.next-copy .eyebrow{margin:0}
.next-text{text-wrap:pretty}
.next-title{display:block;font-family:var(--font-display);font-size:clamp(1.8rem,1.2rem + 1.9vw,3rem);line-height:1.06;letter-spacing:-.022em;word-spacing:var(--ws-display);font-weight:var(--fw-h2);color:var(--ink);text-wrap:balance}
.next-text{display:block;max-width:640px;color:var(--ink-2)}
.next-arrow{display:grid;place-items:center;flex:none;width:clamp(60px,6vw,84px);aspect-ratio:1;border-radius:50%;background:linear-gradient(180deg,#05808b,#006b76);color:#fff;box-shadow:0 14px 30px -16px rgba(0,90,100,.8);transition:transform var(--dur-slow) var(--ease)}
.next-arrow svg{width:40%;height:40%}
.next-card:hover .next-arrow{transform:translateX(4px)}
body:not(.night) .next-title .accent-light{background-image:linear-gradient(100deg,#006b76 5%,#0a7aa8 55%,#1d5fd0)}
.night .next-title{color:#fff}
.night .next-text{color:var(--night-ink)}
.night .next-card{background:linear-gradient(160deg,rgba(22,56,96,.5),rgba(6,20,44,.46) 50%,rgba(12,40,74,.52));box-shadow:inset 0 1px 0 rgba(200,248,252,.22),0 26px 56px -34px rgba(0,0,0,.7)}
.night .next-card::before{opacity:.1}
.night .next-card::after{background:linear-gradient(140deg,rgba(190,246,250,.45),rgba(127,227,236,.08) 35%,rgba(127,227,236,.22) 65%,rgba(190,246,250,.3))}
.night .next-arrow{background:#fff;color:var(--teal-900)}

/* Footer: a light frosted shelf */
.site-footer{position:relative;margin-top:var(--sp-7);padding:clamp(48px,5vw,72px) 0 28px;background:rgba(246,252,252,.78);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-radius:clamp(24px,3vw,36px) clamp(24px,3vw,36px) 0 0;box-shadow:inset 0 1px 0 #fff,0 -20px 50px -44px rgba(0,60,80,.45)}
.footer-top{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(4,minmax(0,1fr));gap:var(--sp-6)}
.footer-brand p{margin-top:var(--sp-4);color:var(--ink-2);max-width:260px;font-size:.95rem}
.footer-col h2{font-family:var(--font-text);font-size:var(--fs-micro);font-weight:var(--fw-strong);letter-spacing:var(--ls-label);word-spacing:0;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-4)}
.footer-col ul{list-style:none;padding:0;display:grid;gap:10px}
.footer-col a{display:inline-block;font-size:.94rem;line-height:1.4;color:var(--ink-2);transition:color var(--dur) var(--ease)}
.footer-col a:hover{color:var(--teal-700)}
.footer-col address{font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--muted)}
.night .site-footer{background:rgba(4,14,32,.7);box-shadow:inset 0 1px 0 rgba(127,227,236,.14)}
.night .footer-brand p,.night .footer-col a{color:var(--night-ink)}
.night .footer-col a:hover{color:#7fe3ec}
.night .footer-col h2,.night .footer-col address,.night .footer-bottom{color:var(--night-muted)}
.night .footer-bottom{border-color:rgba(127,227,236,.14)}

/* Legal pages */
.legal-main{padding:calc(var(--header) + clamp(32px,5vw,72px)) 0 clamp(40px,6vw,80px)}
.legal-wrap{max-width:820px;padding:clamp(26px,5vw,64px)}
.legal-main h1{font-size:clamp(1.5rem,1rem + 2.6vw,3.2rem);font-weight:var(--fw-h2);letter-spacing:-.022em;line-height:1.08;margin-bottom:clamp(24px,4vw,40px);-webkit-hyphens:auto;hyphens:auto;text-wrap:wrap}
.legal-body section{padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.legal-body h2{font-size:1.25rem;font-weight:var(--fw-h3);margin-bottom:var(--sp-2)}
.legal-body p{color:var(--ink-2);max-width:var(--measure)}
.legal-note{display:flex;align-items:flex-start;gap:12px;margin-bottom:24px;padding:16px;border:1px solid rgba(0,118,132,.16);border-radius:var(--radius-sm);background:rgba(234,253,255,.65);font-size:var(--fs-small);color:var(--ink-2)}
.legal-note svg{flex:none;color:var(--teal-700);margin-top:2px}
.legal-related{display:flex;flex-wrap:wrap;gap:16px 24px;margin-block:24px}
.legal-related .text-link{max-width:100%;overflow-wrap:anywhere}
.legal-related svg{flex:none}
.legal-contact{margin:var(--sp-6) 0;color:var(--ink-2)}

/* Scroll reveal (progressive enhancement, see product.js): one short rise per block, never hides what was seen */
.reveal-pending{opacity:0;translate:0 16px}
.reveal-pending:focus-within{opacity:1;translate:none}
@media print{.reveal-pending{opacity:1!important;translate:none!important}.backdrop,.fx-canvas{display:none}.site-header{position:static}}
.reveal-in{opacity:1;translate:0 0;transition:opacity var(--dur-slow) var(--ease),translate var(--dur-slow) var(--ease);transition-delay:calc(var(--reveal,0) * 60ms)}

/* Responsive */
@media (max-width:1180px){
  .desktop-nav a{padding:9px 10px;font-size:.9rem}
  .hero-stage{height:clamp(480px,64vh,640px)}
  .sim-points{grid-template-columns:1fr}
  .language-list{grid-template-columns:repeat(5,minmax(0,1fr))}
  .device-features{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1080px){
  .desktop-nav{display:none}
  .menu-toggle{display:inline-flex}
  .header-actions{margin-inline-start:auto}
  .hero{min-height:0;padding-bottom:40px}
  .hero-grid{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  .hero-copy{display:contents}
  .hero-copy>*{max-width:720px}
  .hero-copy>.hero-text{max-width:600px}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero-lead{order:3}
  .hero-stage{order:5;height:auto;aspect-ratio:1/1.3;width:min(100%,520px);align-self:center;margin:18px 0 4px}
  .hero-actions{order:4;margin-top:22px}
  .hero-text{order:6;margin-top:22px}
  .hero-points{order:7}
  .hero-note{order:4}
  .facts-list{grid-template-columns:repeat(2,1fr)}
  .facts-list li:nth-child(3){border-inline-start:0}
  .facts-list li:nth-child(n+3){border-top:1px solid var(--frost-line)}
  .mode-shot .phone{width:min(74%,230px)}
  .night-grid,.faq-grid,.duo-grid{grid-template-columns:1fr}
  .page-hero-grid{grid-template-columns:1fr}
  .page-hero{min-height:0}
  .fan,.app-stage{height:min(460px,92vw);max-width:620px;width:100%;justify-self:center}
  .faq-head{position:static}
  .feature-grid,.credit-list,.limit-grid,.scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .platforms-grid{grid-template-columns:1fr}
  .platforms-shot{display:none}
  .footer-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:860px){
  .section-head{grid-template-columns:1fr;align-items:start}
  .section-head>p{justify-self:start}
  .modes-grid{grid-template-columns:1fr}
  .mode{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .mode-body{border-top:0;border-inline-start:1px solid var(--frost-line)}
  .mode-shot{padding:28px 16px}
  .mode-shot .phone{width:min(100%,220px)}
  .sim{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .device-real{grid-template-columns:1fr}
  .account-grid{grid-template-columns:1fr}
  .offers{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .duo-app{grid-template-columns:1fr}
  .duo-shot .phone{width:min(100%,160px)}
}
@media (max-width:860px){.language-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.language-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (pointer:coarse){.contact-mail .icon-button{width:44px;height:44px}}
@media (max-width:640px){
  :root{--header:64px}
  body{font-size:1rem}
  .brand img{width:36px;height:36px}
  .brand span{font-size:.95rem}
  .locale{padding:8px 10px}
  .account-link{padding:9px 14px}
  .account-full{display:none}
  .account-short{display:inline}
  .account-link svg{display:none}
  .hero{padding-top:calc(var(--header) + 20px)}
  .hero h1{font-size:clamp(3.1rem,15.5vw,4.6rem)}
  .hero-text{font-size:1rem}
  .hero-actions .button{flex:1 1 220px}
  .hero .hero-actions .button.glass{display:none}
  .hero-stage{width:min(100%,440px)}
  .section{padding-block:40px}
  .section-head.center .eyebrow{flex-direction:column;gap:12px}
  .steps li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:20px}
  .steps .step-num{grid-row:span 2;font-size:2.6rem;margin:0}
  .steps h3{margin:4px 0 0}
  .language-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .language-list li{padding:12px 14px}
  .language-list small{font-size:.78rem}
  .language-list span{font-size:1rem}
  .device-screens{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px}
  .device-screens .device-screen{flex:0 0 78%;scroll-snap-align:center}
  .hero-points{margin-top:22px;font-size:.86rem;gap:6px 16px}
  .stage{inset:0 0 104px 0;--pf-h:88%;--pf-l:27%;--pf-t:3%}
  .phone-back{height:68%;left:2%;top:20%}
  .hero-device{height:76%;left:64%;top:14%}
  .facts-list li{flex-direction:column;align-items:flex-start;gap:8px;padding:20px 18px}
  .facts-list strong{font-size:2.3rem}
  .facts-list span{font-size:.84rem}
  .mode{display:flex}
  .mode-body{border-inline-start:0;border-top:1px solid var(--frost-line)}
  .mode-shot{padding:30px 16px}
  .mode-shot .phone{width:min(56%,214px)}
  .key-label{display:none}
  .device-keys,.device-figure.is-hero .device-keys{width:min(64%,230px)}
  .keys-legend{position:static;width:100%;height:auto;overflow:visible;clip-path:none;white-space:normal;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin-top:6px;font-size:.88rem;color:#d6eff2}
  .keys-legend li{display:flex;align-items:center;gap:10px}
  .keys-legend .key-dot{width:22px;height:22px}
  .scenario{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:20px}
  .scenario-icon{grid-row:span 3;margin:0}
  .scenario-mode{margin-top:4px}
  .sim{padding:26px 20px}
  .feature-grid,.credit-list,.limit-grid,.scenario-grid,.device-features,.platforms{grid-template-columns:1fr}
  .feature-grid li,.credit-list li,.device-features li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:20px}
  .feature-grid .feature-icon,.credit-list .feature-icon,.device-features .feature-icon{grid-row:span 2;margin:0}
  .steps{grid-template-columns:1fr}
  .fan,.app-stage{height:min(380px,96vw)}
  .jump-link{min-height:42px;padding:8px 14px 8px 12px;font-size:.9rem}
  .table-wrap{border-radius:var(--radius)}
  .table-wrap :is(table,thead,tbody,tr,th,td){display:block}
  .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .table-wrap tbody tr{padding:18px 18px 16px}
  .table-wrap tbody tr+tr>*{border-top:0}
  .table-wrap tbody tr+tr{border-top:1px solid rgba(127,227,236,.12)}
  .table-wrap tbody th{width:auto;padding:0 0 10px;font-size:1.02rem}
  .table-wrap td{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:12px;padding:7px 0;overflow-wrap:break-word;hyphens:manual}
  .legal-wrap{padding-inline:20px}
  .table-wrap td::before{content:attr(data-label);font-size:.8rem;font-weight:600;color:var(--night-muted);line-height:1.4}
  .table-wrap tbody td:last-child{background:none}
  .faq-list summary{font-size:1rem;min-height:64px}
  .faq-answer{padding-inline-end:0}
  .contact-row{flex-direction:column}
  .next-card{flex-direction:column;align-items:flex-start;gap:22px}
  .next-arrow{width:52px;align-self:flex-end}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-bottom{flex-direction:column}
}
@media (max-width:420px){.header-inner{gap:8px}.header-actions{gap:4px}.locale{padding-inline:6px}}
@media (max-width:360px){.page-credits .page-hero h1{font-size:2.2rem}}
@media (max-width:380px){.table-wrap td{grid-template-columns:minmax(0,1fr);row-gap:2px}}
.footer-col a,.footer-col address,.page-hero h1,.h2,.next-title,.credit-list h3,.credit-list p{overflow-wrap:anywhere}
@media (max-width:380px){
  .brand span{font-size:.88rem}
  .brand img{width:32px;height:32px}
  .brand{gap:8px}
  .header-inner{gap:10px}
  .header-actions{gap:4px}
  .locale{padding:8px 6px}
  .locale svg{display:none}
  .account-link{padding:8px 12px;font-size:.84rem}
  .hero-actions .button{flex-basis:100%}
  .button{padding-inline:16px;gap:8px}
  .offer .button,.device-cta .button,.night-cta .button,.sim .button{align-self:stretch}
  .facts-list{grid-template-columns:1fr}
  .facts-list li{flex-direction:row;align-items:center;gap:14px}
  .facts-list li+li{border-inline-start:0;border-top:1px solid var(--frost-line)}
  .footer-top{grid-template-columns:1fr}
}
@media (hover:none){.button:hover svg,.text-link:hover svg{transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .reveal-pending{opacity:1;translate:none}
  .breeze-track{animation:none!important}
}

/* Right-to-left pages (Arabic, Persian, Urdu, Hebrew): flex and grid mirror the layout by themselves; arrows turn with the
   reading direction (the individual scale property also turns their hover nudge). Images are never mirrored; the device
   drawing with its key labels, the mode scenes and the greetings ribbon keep their geometry. */
[dir=rtl] :is(.lucide-arrow-right,.lucide-arrow-left,.lucide-arrow-up-right,.lucide-log-out,.lucide-chevron-right,.lucide-chevron-left){scale:-1 1}
[dir=rtl] :is(.breeze,.device-keys,.tp-modes-scene){direction:ltr}
[dir=rtl] .key-label{direction:rtl;unicode-bidi:isolate}
/* The demo's light pulse runs from the spoken phrase to the translation: on right-to-left pages the horizontal link is mirrored. */
@container tp-demo (min-width:860px){[dir=rtl] .tp-demo .tp-demo-link{scale:-1 1}}

/* parts/modes-show.css */
/* Four modes: one glass card with tabs and a short illustrative scene per mode (parts/modes-show.*).
   The base styles are the final, static frame of every scene: that is what readers see without JS,
   with reduced motion and after a scene has played. Motion exists only under [data-play], set by modes-show.js. */
.tp-modes{--tpm-teal:#00808c;--tpm-blue:#1f66e5;--tpm-pad:clamp(8px,.8vw,10px);--tpm-tabs-h:104px;position:relative;isolation:isolate;padding:var(--tpm-pad);border-radius:var(--radius-lg);
  background:linear-gradient(165deg,rgba(255,255,255,.9),rgba(238,248,250,.74));
  -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(11,34,48,.06),var(--shadow)}
.tp-modes.is-lite{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(165deg,#fff,#f0f9fb)}
.tp-modes svg.lucide{width:1.1em;height:1.1em}
.tp-modes-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Tabs. Every tab draws its selected look from a few variables, so the JS state ([aria-selected]) and the no-JS state
   (:target) share one set of rules. The icon tile flips at once (a cross-fade would hide the glyph mid-way);
   only the white card and the underline move. */
.tp-modes-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px;border-radius:calc(var(--radius-lg) - var(--tpm-pad) + 2px);background:rgba(214,240,245,.55);box-shadow:inset 0 1px 2px rgba(6,40,50,.07),inset 0 0 0 1px rgba(255,255,255,.5)}
.tp-modes-tab{--tpm-on:0;--tpm-glyph:var(--teal-700);--tpm-glyph-on:#fff;--tpm-fill:linear-gradient(160deg,#00a3b3,#006b76);--tpm-lift:0 6px 14px -9px rgba(0,80,100,.5);--tpm-lift-on:0 8px 16px -8px rgba(0,107,118,.7);
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon name" "icon chip";align-items:center;align-content:start;justify-items:start;gap:5px 12px;padding:13px 14px;border-radius:var(--radius-sm);color:var(--ink-2);-webkit-tap-highlight-color:transparent;transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),color var(--dur) var(--ease)}
/* SIM calls run on the device: its selected tile is dark; unselected it is as calm as the others (the dark chip marks it). */
.tp-modes-tab.is-device{--tpm-glyph-on:#8ae9f1;--tpm-fill:linear-gradient(160deg,#0f4c58,#062a33);--tpm-lift-on:0 8px 16px -9px rgba(4,30,38,.8)}
.tp-modes-tab:hover{background:rgba(255,255,255,.5);color:var(--ink)}
.tp-modes-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--radius-sm)}
.tp-modes-tab::after{content:'';position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--tpm-blue));transform:scaleX(var(--tpm-on));transform-origin:0 50%;transition:transform var(--dur-slow) var(--ease)}
.tp-modes-tab-icon{grid-area:icon;position:relative;isolation:isolate;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(225,246,250,.6));color:var(--tpm-glyph);box-shadow:inset 0 1px 0 #fff,var(--tpm-lift)}
.tp-modes-tab-icon::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--tpm-fill);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);opacity:var(--tpm-on)}
.tp-modes-tab-icon svg.lucide{width:21px;height:21px}
.tp-modes-tab-name{grid-area:name;font-family:var(--font-text);font-size:var(--fs-card);font-weight:var(--fw-strong);line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.tp-modes-tab[aria-selected="true"],
.tp-modes:not(.is-ready):has(.tp-modes-panel[data-mode="dialogue"]:target) .tp-modes-tab[data-mode="dialogue"],
.tp-modes:not(.is-ready):has(.tp-modes-panel[data-mode="lecture"]:target) .tp-modes-tab[data-mode="lecture"],
.tp-modes:not(.is-ready):has(.tp-modes-panel[data-mode="internet-calls"]:target) .tp-modes-tab[data-mode="internet-calls"],
.tp-modes:not(.is-ready):has(.tp-modes-panel[data-mode="sim-calls"]:target) .tp-modes-tab[data-mode="sim-calls"]{--tpm-on:1;--tpm-glyph:var(--tpm-glyph-on);--tpm-lift:var(--tpm-lift-on);background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(6,40,50,.06),0 12px 26px -16px rgba(6,46,58,.42)}
/* Without JS the tabs are anchors and :target picks the panel: the tab marked selected in the markup steps back. */
.tp-modes:not(.is-ready):has(.tp-modes-panel:target) .tp-modes-tab[aria-selected="true"]{--tpm-on:0;--tpm-glyph:var(--teal-700);--tpm-lift:0 6px 14px -9px rgba(0,80,100,.5);background:none;box-shadow:none;color:var(--ink-2)}

/* Status chips: ok (green), warn (amber), device (deep teal). One line where it fits; if a font runs wider, the chip
   wraps inside its own background instead of spilling over the next tab. */
.tp-modes-chip{grid-area:chip;display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 9px 3px 7px;border-radius:11px;font-family:var(--font-text);font-size:var(--fs-micro);font-weight:var(--fw-strong);line-height:1.3}
.tp-modes-chip>span{min-width:0;text-wrap:balance}
.tp-modes-chip svg.lucide{flex:none;width:1.05em;height:1.05em}
.tp-modes-chip.is-ok{background:#dcf5e8;color:#0d5c37}
.tp-modes-chip.is-warn{background:#fff1d8;color:var(--amber)}
.tp-modes-chip.is-device{background:var(--teal-900);color:#e3fafc}
.tp-modes-chip.is-device svg{color:#7fe3ec}

/* Panels share one grid cell, so the card keeps the height of the tallest panel: switching never shifts the page. */
.tp-modes-panels{display:grid}
.tp-modes-panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;gap:clamp(24px,3.4vw,52px);padding:clamp(10px,1.2vw,14px) 0 0 clamp(14px,2.6vw,36px);visibility:hidden;opacity:0;pointer-events:none}
.tp-modes-panel:first-child,.tp-modes-panels>.tp-modes-panel:target{visibility:visible;opacity:1;pointer-events:auto}
.tp-modes-panels:has(>.tp-modes-panel:target)>.tp-modes-panel:not(:target){visibility:hidden;opacity:0;pointer-events:none}
/* Without JS an anchor scrolls to its panel; the margin (the tabs block of the current layout) keeps the tabs in view. */
.tp-modes:not(.is-ready) .tp-modes-panel{scroll-margin-top:var(--tpm-tabs-h)}
/* Switching: the stage itself never fades, so its frame stays put; only the copy and the scene change. The old ones
   leave in 140ms before the new ones rise, so two scenes never overlap. */
.tp-modes.is-ready .tp-modes-panels>.tp-modes-panel{position:relative;z-index:1;opacity:1;visibility:hidden;pointer-events:none;transition:visibility 0s linear .14s}
/* The entering panel sits below the leaving one, whose identical stage covers it until the old scene has faded. */
.tp-modes.is-ready .tp-modes-panels>.tp-modes-panel.is-active{z-index:0;visibility:visible;pointer-events:auto;transition:visibility 0s}
.tp-modes.is-ready .tp-modes-panel :is(.tp-modes-copy,.tp-modes-scene){opacity:0;transition:opacity .14s var(--ease-soft),transform .5s var(--ease) .1s}
.tp-modes.is-ready .tp-modes-panel.is-active :is(.tp-modes-copy,.tp-modes-scene){opacity:1;transition:opacity .36s var(--ease) .14s,transform .5s var(--ease) .1s}
.tp-modes.is-ready .tp-modes-panel .tp-modes-copy{transform:translateY(8px)}
.tp-modes.is-ready .tp-modes-panel.is-active .tp-modes-copy{transform:none}

.tp-modes-copy{container:tpm-copy/inline-size;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding-block:clamp(16px,2.6vw,36px)}
.tp-modes-label{font-family:var(--font-text);font-size:var(--fs-micro);font-weight:var(--fw-strong);line-height:1.3;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--teal-800)}
.tp-modes-title{margin:0;font-family:var(--font-display);font-size:var(--fs-h3x);font-weight:var(--fw-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);color:var(--ink)}
.tp-modes-title-line{display:block;text-wrap:balance}
.tp-modes-text{max-width:38ch;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2)}
.tp-modes-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:4px}
.tp-modes-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:var(--fw-strong);color:var(--teal-700);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color var(--dur-fast),gap var(--dur) var(--ease)}
.tp-modes-more:hover{text-decoration-color:currentColor;gap:11px}
.tp-modes-replay{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px 8px 12px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.6);font-size:var(--fs-small);font-weight:var(--fw-ui);line-height:1.2;color:var(--ink-2);transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.tp-modes-replay:hover{background:#fff;border-color:rgba(0,107,118,.35);color:var(--ink)}
.tp-modes-replay svg.lucide{flex:none;width:1em;height:1em;color:var(--teal-700);transition:transform var(--dur-slow) var(--ease)}
.tp-modes-replay:hover svg.lucide{transform:rotate(-120deg)}
/* The button is hidden until modes-show.js shows it. Where the copy column is too narrow for link + button in one row
   (two columns at ~861–1150px), it is drawn as the circular arrow only, so showing it never wraps the row and the card
   keeps its height. 24em fits the longest pair (RU "Подробнее о режиме" + "Показать ещё раз") with ~1em to spare. */
@container tpm-copy (width < 24em){
  .tp-modes-replay{flex:none;justify-content:center;width:44px;min-height:44px;padding:0}
  .tp-modes-replay span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Stage: a lit, finely dotted surface */
.tp-modes-stage{position:relative;overflow:hidden;display:grid;min-height:clamp(320px,26vw,370px);border-radius:calc(var(--radius-lg) - var(--tpm-pad));
  background:radial-gradient(90% 70% at 16% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 62%),radial-gradient(70% 80% at 100% 100%,rgba(196,235,241,.6),rgba(196,235,241,0) 64%),linear-gradient(180deg,#f8fcfd,#e8f5f8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),inset 0 1px 3px rgba(6,40,50,.06)}
.tp-modes-stage::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(0,107,118,.14) 1px,transparent 1.5px);background-size:22px 22px;background-position:11px 11px;-webkit-mask-image:radial-gradient(75% 85% at 55% 50%,#000,transparent);mask-image:radial-gradient(75% 85% at 55% 50%,#000,transparent)}
.tp-modes-scene{--tpm-scene-pad:clamp(22px,3vw,44px);position:relative;min-width:0;padding:var(--tpm-scene-pad)}
.tp-modes .tpm-lang{display:inline-flex;align-items:center;flex:none;padding:2px 6px;border-radius:6px;font-family:var(--font-text);font-size:.75rem;font-weight:var(--fw-strong);line-height:1.3;letter-spacing:.1em;color:var(--teal-800);background:rgba(0,163,179,.08);box-shadow:inset 0 0 0 1px rgba(0,128,140,.16)}
/* Translated text: deep teal into blue; every point of the gradient keeps at least 4.5:1 on the stage. */
.tp-modes .tpm-b>span:last-child,.tp-modes .tpm-heard{background:linear-gradient(100deg,#006b76 5%,#1a58c4);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Conversation: two phrases joined by a voice ribbon */
.tp-modes .tpm-dialogue{display:grid;align-content:center;gap:clamp(6px,1vw,12px)}
.tp-modes .tpm-phrase{display:flex;align-items:baseline;gap:12px;font-family:var(--font-display);font-size:clamp(1.35rem,1rem + 1.15vw,1.95rem);font-weight:var(--fw-h2);line-height:1.15;letter-spacing:-.022em;color:var(--ink)}
.tp-modes .tpm-phrase .tpm-lang{transform:translateY(-.25em)}
.tp-modes .tpm-b{justify-self:end;flex-direction:row-reverse;text-align:right}
.tp-modes .tpm-b>span:last-child{padding-bottom:.08em;margin-bottom:-.08em}
.tp-modes .tpm-wavebox{position:relative;height:clamp(92px,9vw,124px);margin-inline:2px}
.tp-modes .tpm-wave{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tp-modes .tpm-strand{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tp-modes .tpm-s1{stroke-width:2.25;opacity:.95}
.tp-modes .tpm-s2{stroke-width:1.5;opacity:.55}
.tp-modes .tpm-s3{stroke-width:1.25;opacity:.34}
.tp-modes .tpm-s4{stroke-width:1;opacity:.22}
.tp-modes .tpm-dot{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--tpm-teal);box-shadow:0 0 0 4px rgba(0,163,179,.14)}
.tp-modes .tpm-dot-a{left:0}
.tp-modes .tpm-dot-b{left:100%;background:var(--tpm-blue);box-shadow:0 0 0 4px rgba(31,102,229,.13)}

/* Lecture: a long speech track that settles, segment by segment, into translated lines */
.tp-modes .tpm-lecture{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.6vw,20px)}
.tp-modes .tpm-source{display:flex;align-items:baseline;gap:10px;max-width:46ch;font-size:var(--fs-small);font-weight:var(--fw-small);line-height:1.45;color:var(--muted)}
.tp-modes .tpm-track{position:relative;height:56px;margin-right:calc(-1 * var(--tpm-scene-pad));-webkit-mask-image:linear-gradient(90deg,#000 72%,transparent);mask-image:linear-gradient(90deg,#000 72%,transparent)}
.tp-modes .tpm-track svg{display:block;width:100%;height:100%;overflow:hidden}
.tp-modes .tpm-track path{fill:none;stroke:rgba(62,92,104,.34);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tp-modes .tpm-done path{stroke:var(--tpm-teal);transform-box:fill-box;transform-origin:50% 50%;transform:scaleY(.6)}
.tp-modes .tpm-sweep{position:absolute;inset:-8px 0;opacity:0;pointer-events:none}
.tp-modes .tpm-sweep::before{content:'';position:absolute;left:-1px;top:0;bottom:0;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(0,163,179,0),#00a3b3 25%,var(--tpm-blue) 75%,rgba(31,102,229,0))}
.tp-modes .tpm-lines{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:8px 12px}
.tp-modes .tpm-lines .tpm-lang{grid-row:1}
.tp-modes .tpm-line{grid-column:2;font-size:clamp(1.02rem,.94rem + .35vw,1.2rem);font-weight:var(--fw-h2);line-height:1.4;letter-spacing:-.006em;color:var(--ink)}

/* Internet call: two people joined by two arcs, speech translated both ways */
.tp-modes .tpm-internet-calls{display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,1.4vw,18px)}
.tp-modes .tpm-said,.tp-modes .tpm-heard{max-width:min(100%,27ch);font-size:clamp(1.05rem,.95rem + .45vw,1.3rem);font-weight:var(--fw-h2);line-height:1.35;letter-spacing:-.008em;color:var(--ink)}
.tp-modes .tpm-heard{align-self:flex-end;text-align:right;color:transparent}
.tp-modes .tpm-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:clamp(8px,1.2vw,14px);row-gap:8px}
.tp-modes .tpm-avatar{grid-row:1;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(160deg,#fff,#eef8fa);color:var(--teal-700);box-shadow:inset 0 0 0 1px rgba(0,128,140,.2),0 12px 24px -14px rgba(0,70,90,.55)}
.tp-modes .tpm-partner{grid-column:3;color:#1d5fd0;box-shadow:inset 0 0 0 1px rgba(31,102,229,.22),0 12px 24px -14px rgba(20,60,140,.5)}
.tp-modes .tpm-avatar svg.lucide{width:25px;height:25px}
.tp-modes .tpm-who{grid-row:2;display:inline-flex;align-items:center;gap:6px;justify-self:center;font-size:var(--fs-micro);font-weight:var(--fw-strong);line-height:1.25;color:var(--ink-2);white-space:nowrap}
.tp-modes .tpm-who-you{grid-column:1;justify-self:start}
.tp-modes .tpm-who-partner{grid-column:3;justify-self:end}
.tp-modes .tpm-lens{grid-row:1;grid-column:2;position:relative;height:clamp(64px,7vw,84px)}
.tp-modes .tpm-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tp-modes .tpm-arc path{fill:none;stroke-width:2.25;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tp-modes .tpm-arc-base path{stroke:rgba(11,34,48,.2);stroke-width:1.5;stroke-dasharray:3 6}
.tp-modes .tpm-end{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%}
.tp-modes .tpm-end-out{left:100%;background:var(--tpm-blue);box-shadow:0 0 0 4px rgba(31,102,229,.13)}
.tp-modes .tpm-end-back{left:0;background:var(--tpm-teal);box-shadow:0 0 0 4px rgba(0,163,179,.14)}
.tp-modes .tpm-hub{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#fff;color:var(--teal-700);box-shadow:inset 0 0 0 1px rgba(0,128,140,.18),0 10px 20px -12px rgba(0,70,90,.55)}
.tp-modes .tpm-hub svg.lucide{width:18px;height:18px}

/* SIM call: the device concept and a regular phone at the two ends of one call line, with translation on the line.
   Captions hang under their pictures (absolute), so they never widen a column; the extra bottom padding centres
   picture + caption as one unit. A caption may hang past its picture by the scene padding minus 8px, so it wraps
   before it can touch the edge of the stage. */
.tp-modes .tpm-sim-calls{--tpm-cap-room:calc(var(--fs-micro) * 1.3 + 10px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;align-content:center;column-gap:clamp(14px,2vw,28px);padding-bottom:calc(var(--tpm-scene-pad) + var(--tpm-cap-room))}
.tp-modes .tpm-unit{position:relative;display:block}
.tp-modes .tpm-device{display:block;width:auto;height:clamp(200px,17vw,248px);filter:drop-shadow(0 22px 24px rgba(4,40,52,.2)) drop-shadow(0 6px 8px rgba(4,40,52,.1))}
.tp-modes .tpm-cap{position:absolute;top:calc(100% + 10px);left:50%;width:max-content;max-width:min(12em,100% + 2 * var(--tpm-scene-pad) - 16px);transform:translateX(-50%);font-size:var(--fs-micro);font-weight:var(--fw-strong);line-height:1.3;color:var(--muted);text-align:center}
.tp-modes .tpm-wire{position:relative;display:grid;align-items:center;height:12px}
/* The dashes have the thickness of the coloured line, so the line covers them completely once it has passed. */
.tp-modes .tpm-cable{position:relative;display:block;height:12px;overflow:hidden;background:linear-gradient(90deg,rgba(11,34,48,.2) 50%,transparent 0) 0 50%/8px 2px repeat-x}
.tp-modes .tpm-cable i{position:absolute;inset:0;background:linear-gradient(90deg,var(--tpm-teal),#0a86a8 50%,var(--tpm-blue)) 0 50%/100% 2px no-repeat}
.tp-modes .tpm-sim{position:absolute;left:0;bottom:calc(100% + 8px);padding:2px 8px;border-radius:6px;font-size:.75rem;font-weight:var(--fw-strong);line-height:1.35;letter-spacing:.12em;color:#e3fafc;background:var(--teal-900)}
.tp-modes .tpm-xlate{position:absolute;left:50%;top:50%;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:#fff;color:var(--teal-700);white-space:nowrap;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 1px rgba(0,128,140,.18),0 10px 22px -14px rgba(0,70,90,.5)}
.tp-modes .tpm-xlate svg.lucide{width:16px;height:16px}
.tp-modes .tpm-xlate svg.lucide:nth-of-type(2){width:13px;height:13px;color:var(--muted)}
.tp-modes .tpm-xlate .tpm-lang{padding:0;background:none;box-shadow:none}
.tp-modes .tpm-handset{position:relative;display:grid;place-items:center}
.tp-modes .tpm-phone,.tp-modes .tpm-ring{display:grid;place-items:center;width:62px;height:62px;border-radius:50%}
.tp-modes .tpm-phone{background:linear-gradient(160deg,#fff,#eef8fa);color:#1d5fd0;box-shadow:inset 0 0 0 1px rgba(31,102,229,.22),0 12px 24px -14px rgba(20,60,140,.5)}
.tp-modes .tpm-phone svg.lucide{width:24px;height:24px}
.tp-modes .tpm-ring{position:absolute;left:50%;top:50%;margin:-31px 0 0 -31px;border:1.5px solid rgba(31,102,229,.45);opacity:0;pointer-events:none}

/* Motion: each scene plays once when its panel is shown, then rests on the static frame above. The "actors" (people,
   device, phone, the track) stand still; only the speech, the signal along its line and the translation move. */
.tp-modes.is-paused [data-play] .tp-modes-scene *,.tp-modes.is-paused [data-play] .tp-modes-scene *::before,.tp-modes.is-paused [data-play] .tp-modes-scene *::after{animation-play-state:paused!important}
.tp-modes [data-play] .tpm-a{animation:tpm-rise .5s var(--ease) both}
.tp-modes [data-play] .tpm-wave{animation:tpm-draw 1.15s cubic-bezier(.45,.05,.3,1) .25s both}
.tp-modes [data-play] .tpm-dot-b{animation:tpm-pop .45s var(--ease) 1.25s both}
.tp-modes [data-play] .tpm-b{animation:tpm-focus .65s var(--ease) 1.2s both}
.tp-modes [data-play] .tpm-source{animation:tpm-fade .5s var(--ease) .1s both}
.tp-modes [data-play] .tpm-done path{animation:tpm-settle .32s var(--ease) var(--d,0s) both}
.tp-modes [data-play] .tpm-sweep{animation:tpm-sweep 1.55s linear .35s both}
.tp-modes [data-play] .tpm-lines .tpm-lang{animation:tpm-fade .4s var(--ease) .95s both}
.tp-modes [data-play] .tpm-l1{animation:tpm-wipe .6s var(--ease) 1s both}
.tp-modes [data-play] .tpm-l2{animation:tpm-wipe .6s var(--ease) 1.85s both}
.tp-modes [data-play] .tpm-said{animation:tpm-rise .5s var(--ease) .1s both}
.tp-modes [data-play] .tpm-arc-out{animation:tpm-draw .8s cubic-bezier(.45,.05,.3,1) .45s both}
.tp-modes [data-play] .tpm-end-out{animation:tpm-pop .4s var(--ease) 1.15s both}
.tp-modes [data-play] .tpm-heard{animation:tpm-focus .65s var(--ease) 1.15s both}
.tp-modes [data-play] .tpm-arc-back{animation:tpm-draw-back .8s cubic-bezier(.45,.05,.3,1) 1.45s both}
.tp-modes [data-play] .tpm-end-back{animation:tpm-pop .4s var(--ease) 2.15s both}
.tp-modes [data-play] .tpm-cable i{animation:tpm-fill-r .9s cubic-bezier(.5,0,.3,1) .3s both}
.tp-modes [data-play] .tpm-xlate{animation:tpm-pop-xlate .5s var(--ease) .6s both}
.tp-modes [data-play] .tpm-ring{animation:tpm-ring 1s var(--ease-soft) 1.2s both}
/* Lighter devices: no blur or masks, just opacity and movement */
.tp-modes.is-lite [data-play] .tpm-b,.tp-modes.is-lite [data-play] .tpm-heard{animation-name:tpm-rise}
.tp-modes.is-lite [data-play] .tpm-wave{animation:tpm-fade .9s var(--ease) .25s both}
.tp-modes.is-lite [data-play] :is(.tpm-l1,.tpm-l2){animation-name:tpm-rise}

@keyframes tpm-fade{from{opacity:0}}
@keyframes tpm-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes tpm-focus{from{opacity:0;filter:blur(6px);transform:translateY(4px)}}
@keyframes tpm-pop{from{opacity:0;transform:scale(.4)}}
@keyframes tpm-fill-r{from{transform:translateX(-100%)}}
@keyframes tpm-settle{from{stroke:rgba(62,92,104,.34);transform:none}}
@keyframes tpm-ring{0%{opacity:0;transform:scale(1)}8%{opacity:.75}100%{opacity:0;transform:scale(1.75)}}
@keyframes tpm-draw{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes tpm-draw-back{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:100% 0;mask-position:100% 0}}
@keyframes tpm-pop-xlate{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
@keyframes tpm-wipe{from{opacity:0;transform:translateY(4px);-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
/* Head of the lecture playhead; stops match LECTURE in modes-show.mjs (start .35s, leg 1 .7s, hold .2s, leg 2 .65s). */
@keyframes tpm-sweep{0%{transform:translateX(var(--x0));opacity:0}6%{opacity:1}45.2%{transform:translateX(var(--x1))}58.1%{transform:translateX(var(--x1))}90%{opacity:1}100%{transform:translateX(var(--x2));opacity:0}}
.tp-modes [data-play] :is(.tpm-wave,.tpm-arc-out,.tpm-l1,.tpm-l2){-webkit-mask-image:linear-gradient(90deg,#000 48%,transparent 60%);mask-image:linear-gradient(90deg,#000 48%,transparent 60%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0}
/* The return arc is revealed from the right: the mask is mirrored and slides the other way. */
.tp-modes [data-play] .tpm-arc-back{-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 52%);mask-image:linear-gradient(90deg,transparent 40%,#000 52%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.tp-modes.is-lite [data-play] :is(.tpm-wave,.tpm-arc-out,.tpm-arc-back,.tpm-l1,.tpm-l2){-webkit-mask-image:none;mask-image:none}
.tp-modes.is-lite [data-play] :is(.tpm-arc-out,.tpm-arc-back){animation:tpm-fade .6s var(--ease) .5s both}
.tp-modes.is-lite [data-play] .tpm-arc-back{animation-delay:1.45s}

/* Layout. --tpm-tabs-h is the height of the tabs block plus a little air (used only by the no-JS anchors).
   ≤1280px tabs in two rows (four columns are too narrow there for the longest status), ≤860px scene above the text,
   ≤560px compact tabs without icon tiles, ≤360px tabs as a list. */
@media (max-width:1280px){
  .tp-modes{--tpm-tabs-h:190px}
  .tp-modes-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .tp-modes-panel{grid-template-columns:minmax(0,1fr);align-content:start;gap:0;padding:var(--tpm-pad) 0 0}
  .tp-modes-stage{order:-1;min-height:clamp(300px,62vw,340px)}
  .tp-modes-copy{gap:12px;padding:22px clamp(10px,3vw,24px) 14px}
  .tp-modes-text{max-width:56ch}
}
@media (max-width:560px){
  .tp-modes{--tpm-tabs-h:178px}
  .tp-modes-tabs{gap:4px;padding:4px}
  .tp-modes-tab{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "chip";gap:6px;min-height:0;padding:10px 12px 13px}
  .tp-modes-tab::after{left:12px;right:12px;bottom:4px}
  .tp-modes-tab-icon{display:none}
  .tp-modes-tab-name{font-size:.94rem}
  .tp-modes-chip{font-size:.75rem;border-radius:8px}
  .tp-modes-stage{min-height:276px}
  .tp-modes-scene{--tpm-scene-pad:20px}
  .tp-modes-copy{gap:10px;padding:18px 12px 6px}
  .tp-modes-actions{flex-wrap:nowrap;gap:12px}
  /* The replay button is named by its aria-label (which starts with its text); on a phone only the circular arrow is drawn. */
  .tp-modes-replay{flex:none;justify-content:center;width:44px;min-height:44px;padding:0}
  .tp-modes-replay span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tp-modes .tpm-phrase{gap:9px}
  .tp-modes .tpm-avatar{width:48px;height:48px}
  .tp-modes .tpm-xlate{gap:4px;padding:5px 8px}
  .tp-modes .tpm-xlate svg.lucide:first-child{display:none}
  .tp-modes .tpm-sim{bottom:calc(100% + 14px)}
  .tp-modes .tpm-device{height:184px}
  .tp-modes .tpm-cap{max-width:7.5em}
}
/* ≤400px: the status glyph steps aside, so "Экспериментальный" fits inside its chip in two narrow columns
   and every row of the ≤360px list keeps name and status on one line. */
@media (max-width:400px){
  .tp-modes-chip{padding:3px 8px}
  .tp-modes-chip svg.lucide{display:none}
}
@media (max-width:360px){
  .tp-modes{--tpm-tabs-h:216px}
  .tp-modes-tabs{grid-template-columns:minmax(0,1fr)}
  .tp-modes-tab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;min-height:44px;padding:9px 12px 11px}
  .tp-modes-stage{min-height:288px}
  .tp-modes-actions{flex-wrap:wrap;gap:8px}
  .tp-modes-more{gap:6px;font-size:var(--fs-card);white-space:nowrap}
  .tp-modes-scene{--tpm-scene-pad:16px}
  .tp-modes .tpm-lines{grid-template-columns:minmax(0,1fr);gap:6px}
  .tp-modes .tpm-lines .tpm-lang{justify-self:start}
  .tp-modes .tpm-line{grid-column:1}
  .tp-modes .tpm-sim-calls{column-gap:10px}
  .tp-modes .tpm-device{height:150px}
  .tp-modes .tpm-phone,.tp-modes .tpm-ring{width:52px;height:52px}
  .tp-modes .tpm-ring{margin:-26px 0 0 -26px}
  .tp-modes .tpm-cap{max-width:6.5em}
  .tp-modes .tpm-avatar{width:44px;height:44px}
}
@media (hover:none){
  .tp-modes-tab:hover{background:none}
  .tp-modes-tab[aria-selected="true"]:hover{background:#fff}
  .tp-modes-replay:hover svg.lucide{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .tp-modes [data-play] .tp-modes-scene *,.tp-modes [data-play] .tp-modes-scene *::before,.tp-modes [data-play] .tp-modes-scene *::after{animation:none!important}
  .tp-modes.is-ready .tp-modes-panels>.tp-modes-panel,.tp-modes.is-ready .tp-modes-panel :is(.tp-modes-copy,.tp-modes-scene){transition:none}
  .tp-modes.is-ready .tp-modes-panel .tp-modes-copy{transform:none}
  .tp-modes-tab,.tp-modes-tab::after{transition:none}
}
@media (forced-colors:active){
  .tp-modes-tab[aria-selected="true"]{outline:2px solid Highlight;outline-offset:-2px}
  .tp-modes-chip{border:1px solid CanvasText}
  .tp-modes .tpm-b>span:last-child,.tp-modes .tpm-heard{background:none;color:CanvasText}
}
@media print{
  .tp-modes{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:1px solid #ccd}
  .tp-modes .tp-modes-panels>.tp-modes-panel{position:static;visibility:visible!important;opacity:1!important;grid-area:auto}
  .tp-modes .tp-modes-panel :is(.tp-modes-copy,.tp-modes-scene){opacity:1!important;transform:none!important}
  .tp-modes-replay{display:none!important}
}

/* parts/translate.css */
/* Translation demo (parts/translate.*): one light glass panel. Controls on top, a calm stage
   (speech -> recognition -> translation), the honesty note below. The stage adapts to its own width (container query),
   so it fits a full-width section as well as a narrow column. Static CSS is the finished state; translate.js only
   animates towards it, so without JS, with reduced motion or after any interruption everything stays readable. */
.tp-demo{--tp-pad:clamp(16px,3vw,36px);position:relative;isolation:isolate;container:tp-demo/inline-size;border-radius:var(--radius-lg);color:var(--ink-2);
  background:linear-gradient(165deg,rgba(255,255,255,.8),rgba(246,252,253,.62) 52%,rgba(232,246,249,.68));
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 1px 0 #fff,0 0 0 1px rgba(11,34,48,.05),0 1px 2px rgba(6,40,50,.04),0 26px 56px -36px rgba(6,46,58,.42)}

/* Controls: language pair (segmented) and phrase chips, all real buttons with aria-pressed */
.tp-demo .tp-demo-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-5);padding:var(--tp-pad) var(--tp-pad) 0}
.tp-demo .tp-demo-pairs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3)}
.tp-demo .tp-demo-from{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);font-weight:var(--fw-strong);color:var(--ink)}
.tp-demo .tp-demo-from svg{width:16px;height:16px;color:var(--teal-700)}
.tp-demo .tp-demo-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(11,34,48,.055);box-shadow:inset 0 0 0 1px rgba(11,34,48,.04)}
.tp-demo :is(.tp-demo-seg-btn,.tp-demo-chip,.tp-demo-replay){-webkit-appearance:none;appearance:none;margin:0;font-family:var(--font-text);font-size:var(--fs-small);font-weight:var(--fw-ui);line-height:1.25;letter-spacing:.005em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tp-demo .tp-demo-seg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:36px;padding:6px 16px;border:0;border-radius:999px;background:transparent;color:var(--ink-2)}
.tp-demo .tp-demo-seg-btn:lang(zh){font-family:'PingFang SC','Hiragino Sans GB','Noto Sans SC','Noto Sans CJK SC','Microsoft YaHei',var(--font-text);letter-spacing:.04em}
/* Chosen pair: a deep teal pill with white text (well above 3:1 against the track, so the choice reads without colour
   vision or a hover); the blue focus ring stays outside it with a gap, so focus never looks like selection. */
.tp-demo .tp-demo-seg-btn[aria-pressed="true"]{background:var(--teal-800);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(6,40,50,.14),0 6px 14px -8px rgba(0,70,80,.55)}
.tp-demo .tp-demo-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tp-demo .tp-demo-chip{min-height:36px;padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.55);color:var(--ink-2);text-align:start}
/* Chosen phrase: a 2px deep-teal edge (border plus a 1px inset ring, so nothing moves) on a faint teal tint. */
.tp-demo .tp-demo-chip[aria-pressed="true"]{background:rgba(0,163,179,.08);border-color:var(--teal-700);box-shadow:inset 0 0 0 1px var(--teal-700);color:var(--teal-900)}
@media (hover:hover){
  .tp-demo .tp-demo-seg-btn:not([aria-pressed="true"]):hover{color:var(--ink);background:rgba(255,255,255,.55)}
  .tp-demo .tp-demo-chip:not([aria-pressed="true"]):hover{background:rgba(255,255,255,.9);border-color:rgba(0,107,118,.3);color:var(--ink)}
  .tp-demo .tp-demo-replay:hover{background:#fff;border-color:rgba(0,107,118,.32)}
}
.tp-demo :is(.tp-demo-seg-btn,.tp-demo-chip,.tp-demo-replay):focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:999px}
@media (pointer:coarse){.tp-demo :is(.tp-demo-seg-btn,.tp-demo-chip){min-height:44px}}
/* Windows high contrast: box-shadows and tints are dropped there, so the chosen pair and phrase are filled with the
   system selection colours instead; focus keeps its own ring outside the button. */
@media (forced-colors:active){
  .tp-demo :is(.tp-demo-seg-btn,.tp-demo-chip)[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight;box-shadow:none;outline:2px solid Highlight;outline-offset:-2px}
  .tp-demo :is(.tp-demo-seg-btn,.tp-demo-chip,.tp-demo-replay):focus-visible{outline:2px solid CanvasText;outline-offset:2px}
}

/* Stage: a quiet, slightly whiter screen inside the panel */
.tp-demo .tp-demo-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"steps replay" "flow flow";align-items:center;column-gap:var(--sp-5);margin:var(--sp-5) var(--tp-pad) 0;
  padding:clamp(18px,2.8vw,40px);padding:clamp(18px,3.4cqi,40px);border-radius:var(--radius);
  background:radial-gradient(70% 90% at 100% 100%,rgba(196,235,241,.32),rgba(196,235,241,0) 70%),linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.52));
  box-shadow:inset 0 0 0 1px rgba(11,34,48,.06),0 1px 0 rgba(255,255,255,.9)}
.tp-demo .tp-demo-steps{grid-area:steps;display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--sp-2);margin:0;padding:0;list-style:none}
.tp-demo .tp-demo-step{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-micro);font-weight:var(--fw-strong);line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.tp-demo .tp-demo-step+.tp-demo-step::before{content:'';width:24px;width:clamp(12px,3.2cqi,36px);height:1px;margin-inline:var(--sp-3);background:var(--line-2)}
.tp-demo .tp-demo-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal-600);box-shadow:inset 0 0 0 1.5px rgba(0,128,140,0),0 0 0 0 rgba(0,163,179,0)}
.tp-demo .tp-demo-replay{grid-area:replay;justify-self:end;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:36px;padding:6px 15px 6px 12px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.7);color:var(--ink)}
@media (pointer:coarse){.tp-demo .tp-demo-replay{min-height:44px}}
.tp-demo .tp-demo-replay svg{width:16px;height:16px;color:var(--teal-700)}
.tp-demo:not(.is-live) .tp-demo-replay{visibility:hidden}
/* Reduced motion never turns is-live on, so there is no replay to reserve room for. */
@media (prefers-reduced-motion:reduce){.tp-demo:not(.is-live) .tp-demo-replay{display:none}}

/* Flow: source | link | target. --tp-fs and --tp-lh also put the link on the first line of text. Every variant of a
   phrase sits in the same grid cell (only one visible), so the stage never changes height. */
.tp-demo .tp-demo-flow{--tp-fs:clamp(1.35rem,.9rem + 2.1cqi,2.25rem);--tp-lh:1.2;--tp-lab:16px;--tp-gap:14px;grid-area:flow;display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);grid-template-columns:minmax(0,1fr) clamp(64px,max(11cqi,39cqi - 264px),220px) minmax(0,1fr);
  column-gap:24px;column-gap:clamp(16px,2.6cqi,32px);margin-top:36px;margin-top:clamp(26px,4.4cqi,48px)}
.tp-demo :is(.tp-demo-langs,.tp-demo-texts){display:grid;grid-template-columns:minmax(0,1fr)}
.tp-demo :is(.tp-demo-langs,.tp-demo-texts)>*{grid-area:1/1;align-self:start}
.tp-demo :is(.tp-demo-langs,.tp-demo-texts)>:not(.is-on){visibility:hidden}
.tp-demo .tp-demo-lang{margin:0 0 var(--tp-gap);height:var(--tp-lab);font-size:var(--fs-micro);font-weight:var(--fw-strong);line-height:var(--tp-lab);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--teal-700);white-space:nowrap}
.tp-demo .tp-demo-text{margin:0;font-family:var(--font-display);font-size:var(--tp-fs);font-weight:var(--fw-h2);line-height:var(--tp-lh);letter-spacing:-.018em;color:var(--ink);text-wrap:balance;overflow-wrap:break-word}
/* One sentence = one unbreakable unit while it fits the column; a sentence longer than the column is shrink-to-fit
   capped at the column width, so it still wraps inside instead of overflowing (320px, 400% zoom). */
.tp-demo .tp-s{display:inline-block;max-width:100%}
.tp-demo .tp-demo-dst .tp-demo-text{background:linear-gradient(100deg,#006b76 5%,#1d5ecf);background:linear-gradient(100deg,var(--teal-700) 5%,color-mix(in srgb,var(--blue) 88%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Chinese comes from system fonts: no negative tracking, a little more leading, a weight those fonts really have. */
.tp-demo .tp-demo-text:lang(zh){font-family:'PingFang SC','Hiragino Sans GB','Noto Sans SC','Noto Sans CJK SC','Source Han Sans SC','Microsoft YaHei',var(--font-display);font-weight:500;letter-spacing:.03em;line-height:1.32;padding-top:.04em}
.tp-demo .tp-demo-wave{display:block;width:100%;height:34px;margin-top:var(--sp-4);overflow:visible;translate:0 calc(var(--tp-lift,0px) * -1)}
.tp-demo .tp-demo-wave path{fill:none;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.tp-demo .tp-demo-wave stop:first-child{stop-color:var(--teal)}
.tp-demo .tp-demo-wave stop:last-child{stop-color:var(--blue)}

/* Link: a hairline between two nodes; the light pulse travels along it once and leaves it lit. */
.tp-demo .tp-demo-link{display:flex;align-items:center;height:28px;margin-top:calc(var(--tp-lab) + var(--tp-gap) + var(--tp-fs) * var(--tp-lh) / 2 - 14px)}
.tp-demo .tp-demo-node{flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal-600);box-shadow:inset 0 0 0 1.5px rgba(0,128,140,0),0 0 0 3px rgba(0,163,179,.12)}
.tp-demo .tp-demo-rail{position:relative;flex:1;align-self:stretch;margin-inline:5px;overflow:hidden}
.tp-demo .tp-demo-rail::before,.tp-demo .tp-demo-fill{content:'';position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px}
.tp-demo .tp-demo-rail::before{background:var(--line-2)}
.tp-demo .tp-demo-fill{display:block;background:linear-gradient(90deg,rgba(0,128,140,.75),rgba(31,102,229,.75));transform-origin:0 50%}
.tp-demo .tp-demo-beam{position:absolute;inset:0;display:block}
.tp-demo .tp-demo-spark{position:absolute;right:6px;top:50%;width:min(72px,70%);height:2px;margin-top:-1px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,rgba(0,163,179,0),rgba(0,163,179,.5) 50%,var(--teal) 86%,#2fd0dc);box-shadow:0 0 6px rgba(0,163,179,.35)}
.tp-demo .tp-demo-spark::after{content:'';position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:radial-gradient(circle,#f2feff 0 10%,rgba(70,216,226,.95) 30%,rgba(0,163,179,.3) 54%,rgba(0,163,179,0) 72%)}
.tp-demo.is-lite .tp-demo-spark{box-shadow:none}

/* Note and the live region */
.tp-demo .tp-demo-note{display:flex;align-items:flex-start;gap:var(--sp-2);margin:0;padding:var(--sp-4) var(--tp-pad) var(--tp-pad);font-size:var(--fs-small);font-weight:var(--fw-small);line-height:var(--lh-small);color:var(--muted)}
.tp-demo .tp-demo-note>span{max-width:var(--measure)}
.tp-demo .tp-demo-note svg{flex:none;width:16px;height:16px;margin-top:.15em;color:var(--teal-700)}
.tp-demo .tp-demo-sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Below 860px of panel: stacked (side by side the columns get too narrow); the link turns vertical and runs from the waveform down to the translation. */
@container tp-demo (max-width:859px){
  .tp-demo .tp-demo-flow{grid-template-columns:minmax(0,1fr)}
  .tp-demo .tp-demo-link{flex-direction:column;align-items:flex-start;width:28px;height:60px;margin-block:var(--sp-2);margin-inline:-11px 0}
  .tp-demo .tp-demo-link .tp-demo-node{margin-inline-start:10.5px}
  .tp-demo .tp-demo-rail{align-self:stretch;margin:5px 0;width:28px}
  .tp-demo .tp-demo-rail::before,.tp-demo .tp-demo-fill{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto;margin:0 0 0 -.5px}
  .tp-demo .tp-demo-fill{background:linear-gradient(180deg,rgba(0,128,140,.75),rgba(31,102,229,.75));transform-origin:50% 0}
  .tp-demo .tp-demo-spark{left:50%;right:auto;top:auto;bottom:6px;width:2px;height:min(40px,80%);margin:0 0 0 -1px;background:linear-gradient(180deg,rgba(0,163,179,0),rgba(0,163,179,.5) 50%,var(--teal) 86%,#2fd0dc)}
  .tp-demo .tp-demo-spark::after{right:auto;left:50%;top:auto;bottom:-5px;margin:0 0 0 -5px}
  .tp-demo .tp-demo-wave{height:30px;margin-top:var(--sp-3);translate:none}
  .tp-demo .tp-demo-src .tp-demo-texts>*{align-self:end}
}
@container tp-demo (max-width:520px){
  .tp-demo .tp-demo-bar{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .tp-demo .tp-demo-bar>*{min-width:0}
  .tp-demo .tp-demo-pairs{justify-content:space-between}
  .tp-demo .tp-demo-seg{flex:1 1 auto;max-width:100%}
  .tp-demo .tp-demo-seg-btn{flex:1 1 0;min-width:0;padding-inline:10px}
  /* Phrases: one swipeable row instead of a tall stack */
  .tp-demo .tp-demo-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--tp-pad);scrollbar-width:none;margin:-4px calc(-1 * var(--tp-pad));padding:6px var(--tp-pad);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--tp-pad),#000 calc(100% - var(--tp-pad)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--tp-pad),#000 calc(100% - var(--tp-pad)),transparent)}
  .tp-demo .tp-demo-chips::-webkit-scrollbar{display:none}
  .tp-demo .tp-demo-chip{flex:none;white-space:nowrap;scroll-snap-align:start}
  .tp-demo .tp-demo-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"steps" "flow" "replay";margin-top:var(--sp-4)}
  .tp-demo .tp-demo-step{gap:6px;font-size:.8rem;letter-spacing:.01em;text-transform:none;white-space:nowrap}
  .tp-demo .tp-demo-step+.tp-demo-step::before{width:10px;margin-inline:6px}
  .tp-demo .tp-demo-flow{margin-top:var(--sp-5)}
  .tp-demo .tp-demo-replay{justify-self:start;margin-top:var(--sp-4)}
}
/* Phones and 400% zoom: the three stages may not fit one line in longer languages, so they wrap without the links between them. */
@container tp-demo (max-width:460px){
  .tp-demo .tp-demo-steps{column-gap:var(--sp-3)}
  .tp-demo .tp-demo-step+.tp-demo-step::before{display:none}
}
/* Browsers without container queries: stack below tablet width and leave out the link. */
@supports not (container-type:inline-size){
  .tp-demo .tp-demo-flow{--tp-fs:clamp(1.35rem,.95rem + 1.6vw,2.25rem)}
  @media (max-width:860px){
    .tp-demo .tp-demo-flow{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-6)}
    .tp-demo .tp-demo-link{display:none}
  }
}