/* ---------- fonts (self-hosted, SIL OFL 1.1, see fonts/OFL-*.txt) ---------- */
@font-face{font-family:"Archivo";font-style:italic;font-weight:700 900;font-stretch:100% 110%;font-display:swap;src:url(fonts/archivo-italic-latin.woff2?v=6c8801fe98) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:italic;font-weight:700 900;font-stretch:100% 110%;font-display:swap;src:url(fonts/archivo-italic-latin-ext.woff2?v=960d8a9d52) 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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cairo";font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/cairo-arabic.woff2?v=4233697bf4) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-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:"Cairo";font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/cairo-latin.woff2?v=f5513930b1) 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}
/* Cue 2.0 website. Look B "Aurora Glass", Iris and Lime. Tokens lifted from docs/design/2026-10-07-screens/system.css (.B.dk / .B.lt). */

/* ---------- tokens ---------- */
:root{
  --g:#0B0A12; --p:#15131F; --r:#1F1C2E; --t:#FFFFFF; --d:rgba(255,255,255,.70);
  --a:#C6F432; --on:#0B0A12; --at:#C6F432; --s2:#9C8FFF; --sel:#6655EE; --onsel:#FFFFFF;
  --rec:#FF4D5E; --ln:rgba(255,255,255,.10); --ln2:rgba(255,255,255,.44); --hair:rgba(255,255,255,.14); --gl:rgba(24,21,38,.62);
  --q1:#6655EE; --q2:#C6F432; --q3:#3B2FB0; --aur:.42; --aur2:.20;
  --ink:#0B0A12; --lime:#C6F432; --iris:#6655EE; --deep:#3B2FB0;
  --disp:"Archivo", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --body:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --ease:cubic-bezier(.65,0,.35,1); --eout:cubic-bezier(.22,.61,.36,1);
  --wrap:1240px; --pad:clamp(20px,5vw,56px);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --g:#F5F4F8; --p:#FFFFFF; --r:#ECEAF3; --t:#14121C; --d:rgba(20,18,28,.70);
    --at:#5040D6; --s2:#5040D6; --sel:#5B4BE0; --ln:rgba(20,18,28,.10); --ln2:rgba(20,18,28,.52); --hair:rgba(20,18,28,.16); --gl:rgba(255,255,255,.74);
    --q1:#7B6CFF; --q3:#B9B0FF; --aur:.26; --aur2:.16; color-scheme:light;
  }
}
:root[data-theme="light"]{
  --g:#F5F4F8; --p:#FFFFFF; --r:#ECEAF3; --t:#14121C; --d:rgba(20,18,28,.70);
  --at:#5040D6; --s2:#5040D6; --sel:#5B4BE0; --ln:rgba(20,18,28,.10); --ln2:rgba(20,18,28,.52); --hair:rgba(20,18,28,.16); --gl:rgba(255,255,255,.74);
  --q1:#7B6CFF; --q3:#B9B0FF; --aur:.26; --aur2:.16; color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--g);color:var(--t);font:17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:800;font-style:italic;font-stretch:108%;letter-spacing:-.012em;text-wrap:balance}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] .disp{font-family:"Cairo",var(--body);font-style:normal;font-stretch:100%;letter-spacing:0;font-weight:800}
/* Japanese: Archivo has no CJK glyphs, so headings use the system face upright (no synthetic italic), like Arabic */
[lang="ja"] h1,[lang="ja"] h2,[lang="ja"] h3,[lang="ja"] .disp{font-style:normal;font-stretch:100%;letter-spacing:0;word-break:auto-phrase}
[lang="ar"] body,[lang="ar"]{font-family:-apple-system,"SF Arabic","Geeza Pro","Cairo",system-ui,sans-serif}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--s2);outline-offset:3px;border-radius:10px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--a);color:var(--on);padding:12px 16px;border-radius:12px;font-weight:700;text-decoration:none;min-height:44px}
.skip:focus{top:12px}
section{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:650 14px/1.2 var(--body);color:var(--at);letter-spacing:.01em}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--rec);flex:none}
.lede{font-size:clamp(17px,1.35vw,20px);color:var(--d);max-width:58ch}
.h2{font-size:clamp(34px,4.8vw,68px);line-height:1.02}
.sec{padding-block:clamp(64px,7.5vw,112px)}
/* sections below the first screen are laid out and painted when they come near the screen. The sizes are estimates of the
   content box (measured at 390, 768 and 1280 wide) until a section has been seen; then the browser remembers its real height */
.sec,.foot{content-visibility:auto;contain-intrinsic-size:auto 660px}
#new{contain-intrinsic-size:auto 680px}
html.cv-off .sec,html.cv-off .foot{content-visibility:visible}
#system{contain-intrinsic-size:auto 1660px}
#pricing{contain-intrinsic-size:auto 2120px}
#faq{contain-intrinsic-size:auto 1040px}
.foot{contain-intrinsic-size:auto 430px}
@media (min-width:640px){#new{contain-intrinsic-size:auto 700px}#system{contain-intrinsic-size:auto 880px}#pricing{contain-intrinsic-size:auto 1500px}#faq{contain-intrinsic-size:auto 950px}.foot{contain-intrinsic-size:auto 270px}}
@media (min-width:1024px){#new{contain-intrinsic-size:auto 770px}#system{contain-intrinsic-size:auto 560px}#pricing{contain-intrinsic-size:auto 1300px}#faq{contain-intrinsic-size:auto 980px}.foot{contain-intrinsic-size:auto 225px}}
.bdi{unicode-bidi:isolate}

/* ---------- logo: the CUE wordmark on the slanted plate (lime plate, ink letters) ---------- */
.logo{display:inline-block;position:relative;width:var(--lw,84px);aspect-ratio:779/401;flex:none;vertical-align:middle}
.logo::before{content:"";position:absolute;inset:0;background:var(--lime);clip-path:polygon(0% 0%,89.1% 0%,100% 100%,10.9% 100%)}
.logo::after{content:"";position:absolute;left:13.5%;right:15.5%;top:25.5%;bottom:26.5%;background:var(--ink);-webkit-mask:url(img/wordmark.svg?v=3e868eb6ef) center/contain no-repeat;mask:url(img/wordmark.svg?v=3e868eb6ef) center/contain no-repeat}
.logo .edge{position:absolute;inset:-1.5px;background:var(--ink);clip-path:polygon(0% 0%,89.1% 0%,100% 100%,10.9% 100%);display:none}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .logo .edge{display:block}}
:root[data-theme="light"] .logo .edge{display:block}
.logo .edge{z-index:-1}
.logo{isolation:isolate}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:14px;font:700 16px/1 var(--body);text-decoration:none;white-space:nowrap;transition:transform .3s var(--ease),background-color .3s var(--ease)}
.btn.lime{background:var(--a);color:var(--on)}
.btn.ghost{background:var(--gl);color:var(--t);box-shadow:inset 0 0 0 1px var(--hair);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn.lime{box-shadow:inset 0 0 0 1.5px var(--ink)} :root:not([data-theme="dark"]) .btn.ghost{background:#fff;box-shadow:inset 0 0 0 1px var(--hair),0 1px 3px rgba(20,18,28,.08)}}
:root[data-theme="light"] .btn.lime{box-shadow:inset 0 0 0 1.5px var(--ink)}
:root[data-theme="light"] .btn.ghost{background:#fff;box-shadow:inset 0 0 0 1px var(--hair),0 1px 3px rgba(20,18,28,.08)}
.btn:hover{transform:translateY(-2px)}
.badge{display:inline-block;line-height:0;border-radius:12px;text-decoration:none;transition:transform .3s var(--ease)}
.badge img{height:54px;width:auto}
.badge:hover{transform:translateY(-2px)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.qr{display:flex;align-items:center;text-decoration:none;color:inherit;transition:transform .3s var(--ease);gap:12px;padding:6px;padding-inline-end:16px;border-radius:16px;background:var(--p);box-shadow:inset 0 0 0 1px var(--hair);text-align:start}
.qr img{width:60px;height:60px;padding:4px;border-radius:10px;background:#fff;display:block;flex:none}
.qr b{display:block;font:700 15px/1.2 var(--body);color:var(--t)}
.qr small{display:block;margin-top:3px;font:500 13px/1.3 var(--body);color:var(--d)}
.qr:hover{transform:translateY(-2px)}
.finale .ctas{justify-content:center}
.tlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--at);font-weight:650;text-decoration:none}
.tlink svg{transition:transform .3s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}
[dir="rtl"] .tlink svg{transform:scaleX(-1)}
[dir="rtl"] .tlink:hover svg{transform:scaleX(-1) translateX(3px)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:12px 12px auto;z-index:50;display:flex;align-items:center;gap:12px;max-width:1320px;margin-inline:auto;height:64px;padding:0 10px 0 18px;border-radius:22px;background:var(--gl);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:inset 0 0 0 1px var(--hair),0 14px 40px -24px rgba(0,0,0,.6);transition:transform .45s var(--ease)}
[dir="rtl"] .nav{padding:0 18px 0 10px}
.nav .home{display:flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none}
.nav .links{display:none;gap:4px;margin-inline:auto}
.nav .links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;text-decoration:none;font-weight:600;font-size:15px;color:var(--t)}
.nav .links a:hover{background:var(--ln)}
.nav .end{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.nav .lang{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;text-decoration:none;font-weight:600;font-size:15px}
.nav .lang:hover{background:var(--ln)}
@media (min-width:1024px){.nav .links{display:flex}.nav .links + .end{margin-inline-start:0}}
@media (max-width:380px){.nav{inset:8px 8px auto;padding-inline-start:12px}.nav .btn{padding:0 14px}}

/* ---------- aurora atmosphere ---------- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--aur);animation:aur 18s var(--ease) infinite alternate}
.aurora i:nth-child(1){width:52vw;height:52vw;max-width:820px;max-height:820px;background:var(--q1);left:-14vw;top:-18vw}
.aurora i:nth-child(2){width:30vw;height:30vw;max-width:480px;max-height:480px;background:var(--q2);right:-8vw;top:8vw;opacity:var(--aur2);animation-delay:-6s}
.aurora i:nth-child(3){width:40vw;height:40vw;max-width:640px;max-height:640px;background:var(--q3);left:30vw;top:-24vw;opacity:calc(var(--aur) * .6);animation-delay:-11s}
@keyframes aur{to{transform:translate(4vw,3vw) scale(1.08)}}

/* ---------- reveal ---------- */
.rv{transition:opacity .9s var(--eout),transform .9s var(--eout)}
/* hidden only when JS runs (html.js is set inline in <head>); without JS everything shows */
html.js .rv:not(.in){opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none}
/* the hero reveal runs in CSS from the first paint, so it never waits for site.js */
.hero .rv,.ahero .rv{animation:rv-in .9s var(--eout) both}
.hero .rv.d1,.ahero .rv.d1{animation-delay:.08s}.hero .rv.d2,.ahero .rv.d2{animation-delay:.16s}.hero .rv.d3,.ahero .rv.d3{animation-delay:.24s}
@keyframes rv-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* ---------- phone frame + prompter (camera surfaces stay dark in both themes) ---------- */
.phone{position:relative;width:var(--pw,360px);aspect-ratio:464/980;border-radius:calc(var(--pw,360px) * .15);background:#0b0b0d;padding:calc(var(--pw,360px) * .026);box-shadow:0 50px 90px -40px rgba(0,0,0,.75),inset 0 0 0 2px #2a2a2e,0 0 0 1px rgba(255,255,255,.06);flex:none}
.scr{position:relative;width:100%;height:100%;border-radius:calc(var(--pw,360px) * .125);overflow:hidden;background:#000;container-type:inline-size;isolation:isolate;color:#fff}
.scr .u{--u:calc(100cqw / 440)}
/* the hero poster is a real <img> (the LCP element); the video starts after load and fades in over it */
.scr video[data-lazy]{opacity:0;transition:opacity .4s var(--ease)}.scr video[data-lazy].on{opacity:1}
.scr video,.scr .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;background-size:cover;background-position:center 30%}
.scr .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 24%,rgba(0,0,0,0) 62%,rgba(0,0,0,.62))}
.island{position:absolute;top:2.4%;left:50%;width:28%;height:3.6%;transform:translateX(-50%);border-radius:99px;background:#000;z-index:5}
.pr{position:absolute;top:12.2%;left:5%;right:5%;border-radius:calc(100cqw * .06);padding:calc(100cqw * .036) calc(100cqw * .045) calc(100cqw * .03);background:rgba(10,8,20,.80);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.prw{position:relative;overflow:hidden;height:calc(var(--rows,3) * var(--lh))}
.pr{--fs:calc(100cqw * .05);--lh:calc(var(--fs) * 1.42)}
.prl{position:absolute;inset:0 0 auto;transition:transform .7s var(--ease)}
.prl p{position:relative;margin:0;padding-inline:calc(var(--fs) * .55);height:var(--lh);line-height:var(--lh);font:600 var(--fs)/var(--lh) var(--body);color:rgba(255,255,255,.52);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s var(--ease)}
.prl p.cur{color:#fff}
.prband{position:absolute;inset-inline:0;height:var(--lh);top:var(--lh);border-radius:calc(var(--fs) * .45);background:rgba(255,255,255,.08);pointer-events:none}
.prband::before{content:"";position:absolute;inset-inline-start:2px;top:50%;transform:translateY(-50%);border:calc(var(--fs) * .28) solid transparent;border-inline-start:calc(var(--fs) * .36) solid var(--lime);border-inline-end:0}
.prfoot{display:flex;justify-content:space-between;align-items:center;margin-top:calc(100cqw * .02);font:600 calc(100cqw * .032)/1 var(--body);color:rgba(255,255,255,.8)}
.prfoot .grab{width:calc(100cqw * .09);height:calc(100cqw * .011);border-radius:3px;background:rgba(255,255,255,.4)}
.recpill{position:absolute;left:50%;top:37%;transform:translateX(-50%);display:flex;align-items:center;gap:calc(100cqw * .018);height:calc(100cqw * .077);padding:0 calc(100cqw * .032);border-radius:99px;background:rgba(225,29,72,.92);font:600 calc(100cqw * .034)/1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr}
.recpill i{width:calc(100cqw * .02);height:calc(100cqw * .02);border-radius:50%;background:#fff;animation:blink 1.6s var(--ease) infinite}
@keyframes blink{50%{opacity:.35}}
.erail{position:absolute;top:56%;inset-inline-end:2.7%;width:10%;height:18%;border-radius:99px;background:rgba(14,14,18,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:center;padding:6% 0;gap:4%;font:600 calc(100cqw * .026)/1 var(--body)}
.erail .trk{flex:1;width:14%;border-radius:3px;background:rgba(255,255,255,.25);position:relative}
.erail .trk i{position:absolute;inset:auto 0 0;height:58%;border-radius:3px;background:var(--lime)}
.rbot{position:absolute;bottom:5%;left:4.5%;right:4.5%;height:9.5%;display:flex;align-items:center;justify-content:space-between;direction:ltr}
.tks{display:flex;gap:calc(100cqw * .014);width:25%}
.tk{width:calc(100cqw * .1);aspect-ratio:44/58;border-radius:calc(100cqw * .022);background-size:cover;background-position:center 30%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);display:flex;align-items:flex-end;justify-content:center;font:700 calc(100cqw * .027)/1.7 var(--body);text-shadow:0 1px 2px #000}
.rbig{width:calc(100cqw * .19);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 calc(100cqw * .011) #fff;display:grid;place-items:center;position:relative}
.rbig i{width:36%;height:36%;border-radius:calc(100cqw * .018);background:var(--rec)}
.rbig::before{content:"";position:absolute;inset:-10%;border-radius:50%;box-shadow:0 0 22px 4px rgba(198,244,50,.5);animation:halo 1.6s var(--ease) infinite alternate}
@keyframes halo{from{opacity:.35}to{opacity:1}}
.tkchip{width:25%;display:flex;justify-content:flex-end}
.tkchip span{height:calc(100cqw * .085);padding:0 calc(100cqw * .03);border-radius:99px;display:inline-flex;align-items:center;background:var(--lime);color:var(--ink);font:700 calc(100cqw * .032)/1 var(--body);white-space:nowrap}

/* ---------- hero ---------- */
.hero{padding-top:clamp(110px,14vh,150px);padding-bottom:clamp(64px,8vw,110px);overflow:clip}
.hero .grid{display:grid;gap:clamp(40px,6vw,72px);align-items:center}
.hero h1{font-size:clamp(40px,5.2vw,88px);line-height:.98;margin:18px 0 22px}
.hero h1 .hl{color:var(--at)}
.hero .lede{margin-bottom:30px}
.hero .fine{margin-top:18px;font-size:15px;color:var(--d)}
.stage{position:relative;display:grid;place-items:center;padding-block:10px 20px}
.ring{position:absolute;width:min(118%,640px);aspect-ratio:1;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(102,85,238,0) 62%,rgba(156,143,255,.32) 70%,rgba(255,255,255,.55) 72.5%,rgba(156,143,255,.30) 75%,rgba(102,85,238,0) 84%);filter:blur(1px);animation:ringb 7s var(--ease) infinite alternate;pointer-events:none}
@keyframes ringb{from{opacity:.55}to{opacity:1}}
.hero .phone{--pw:min(78vw,340px)}
.float{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:var(--gl);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px var(--hair),0 18px 40px -20px rgba(0,0,0,.6);font:650 14px/1.25 var(--body);color:var(--t);animation:drift 9s var(--ease) infinite alternate}
.float small{display:block;font-weight:500;color:var(--d);font-size:13px}
.float .sw{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(180deg,#A79CFF,#5040D6);color:#fff;flex:none}
@keyframes drift{to{transform:translateY(-10px)}}
.float.f1{inset-inline-start:-6%;top:56%}
.float.f2{inset-inline-end:-6%;top:36%;animation-delay:-4s}
@media (max-width:767px){.float{display:none}}
@media (min-width:1024px){
  .hero{min-height:100svh;display:flex;align-items:center}
  .hero .grid{grid-template-columns:1.08fr .92fr}
  .hero .phone{--pw:clamp(290px,22vw,400px)}
}
@media (min-width:1800px){.hero .phone{--pw:450px}}

/* ---------- film band ---------- */
.band{padding-block:0 clamp(40px,6vw,80px)}
.band .film{position:relative;border-radius:clamp(22px,2.4vw,34px);overflow:hidden;aspect-ratio:1/1;background:#130f2a;box-shadow:0 40px 80px -50px rgba(0,0,0,.8),inset 0 0 0 1px var(--hair)}
.band video,.band .film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:640px){.band .film{aspect-ratio:16/9}}
@media (min-width:1024px){.band .film{aspect-ratio:21/9}}
.band .cap{display:grid;gap:14px 40px;margin-top:28px;align-items:end}
.band .cap h2{font-size:clamp(30px,3.6vw,52px);line-height:1.04}
.band .cap .lede{max-width:52ch}
@media (min-width:900px){.band .cap{grid-template-columns:auto 1fr}}

/* ---------- takes scene (scroll driven): the recording screen shows one tool at a time ---------- */
.takes{height:720vh}
.takes .pin{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto 1fr;gap:14px;padding-top:88px;padding-bottom:18px;overflow:hidden}
.takes .copy{display:grid;gap:12px;align-content:start}
.takes h2{font-size:clamp(28px,3.3vw,52px);line-height:1.04}
.steps{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:34px 1fr;gap:2px 12px;padding:7px 0}
.steps li b{grid-column:2;display:flex;align-items:center;gap:8px;color:var(--d);font:650 17px/1.3 var(--body);transition:color .4s var(--ease)}
.steps li > span:not(.n){grid-column:2;color:var(--d);font-size:14.5px;line-height:1.42}
.steps li .n{grid-column:1;grid-row:1 / span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--body);box-shadow:inset 0 0 0 1.5px var(--hair);color:var(--d);transition:background-color .4s var(--ease),color .4s var(--ease)}
.steps li.on b{color:var(--t);font-weight:780}
.steps li.on .n{background:var(--sel);color:#fff;box-shadow:none}
.steps .pro{font:700 11.5px/1 var(--body);font-style:normal;padding:4px 7px;border-radius:7px;background:var(--sel);color:#fff}
.tstage{position:relative;min-height:0;height:100%;display:grid;place-items:center}
/* the camera view: real footage behind the app's reading card and controls (no device is drawn) */
.cam{position:relative;width:min(100%,620px);height:100%;max-height:820px;border-radius:clamp(22px,2.4vw,34px);overflow:hidden;background:#0d0b10;color:#fff;isolation:isolate;container-type:inline-size;box-shadow:0 40px 80px -50px rgba(0,0,0,.8),inset 0 0 0 1px var(--hair)}
.cam .still,.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;background-size:cover;background-position:center 30%;z-index:-2}
.cam video[data-lazy],.pbg video[data-lazy]{opacity:0;transition:opacity .4s var(--ease)}.cam video[data-lazy].on,.pbg video[data-lazy].on{opacity:1}
.cam .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.08) 40%,rgba(0,0,0,.08) 60%,rgba(0,0,0,.7))}
.recp{position:absolute;left:50%;top:2.6%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:99px;background:rgba(225,29,72,.92);font:650 14px/1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr;opacity:0;transition:opacity .25s var(--ease)}
.recp.on{opacity:1}
.recp i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.6s var(--ease) infinite}
.tcard{position:absolute;top:calc(2.6% + 40px);left:4%;right:4%;--fs:clamp(17px,4.5cqw,27px);--lh:calc(var(--fs) * 1.42);--rows:5;border-radius:clamp(16px,3.8cqw,24px);padding:calc(var(--fs) * .5) calc(var(--fs) * .6) calc(var(--fs) * .45);background:rgba(10,8,20,.80);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
@media (min-width:640px),(min-height:760px){.tcard{--rows:6}}
.tview{position:relative;height:calc(var(--rows) * var(--lh));overflow:hidden;perspective:900px;-webkit-mask:linear-gradient(#0000,#000 calc(var(--lh) * .35),#000 calc(100% - var(--lh) * .16),#0000);mask:linear-gradient(#0000,#000 calc(var(--lh) * .35),#000 calc(100% - var(--lh) * .16),#0000)}
.tband{position:absolute;inset-inline:0;top:var(--lh);height:var(--lh);border-radius:calc(var(--fs) * .4);background:rgba(255,255,255,.10)}
.tmark{position:absolute;inset-inline-start:1px;top:calc(var(--lh) * 1.5);transform:translateY(-50%);border:calc(var(--fs) * .3) solid transparent;border-inline-start:calc(var(--fs) * .38) solid var(--lime);border-inline-end:0;z-index:2}
.tflip{position:absolute;inset:0;transform-style:preserve-3d}
.ttxt{position:absolute;inset:0 0 auto;transform-origin:0 0}
[dir="rtl"] .ttxt{transform-origin:100% 0}
.ttxt p{margin:0;height:var(--lh);padding-inline:calc(var(--fs) * .8) calc(var(--fs) * .4);font:600 var(--fs)/var(--lh) var(--body);color:rgba(255,255,255,.52);white-space:nowrap;overflow:hidden;transition:color .18s var(--ease)}
.ttxt p.cur{color:#fff}
/* a take break reads "Take 2" between short lime rules beside the label, never across any text (as in the app) */
.ttxt p.tb{display:flex;align-items:center;gap:10px;color:var(--lime);font:700 max(13px,calc(var(--fs) * .55))/1 var(--body)}
.ttxt p.tb::before{content:"";width:18px;height:1px;background:rgba(198,244,50,.6);flex:none}
.ttxt p.tb::after{content:"";flex:1;height:1px;background:rgba(198,244,50,.32)}
.tfoot{display:flex;justify-content:space-between;align-items:center;margin-top:calc(var(--fs) * .3);font:600 max(12px,calc(var(--fs) * .56))/1 var(--body);color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums;direction:ltr}
.tfoot .grab{width:12%;height:4px;border-radius:3px;background:rgba(255,255,255,.4)}
.rail{position:absolute;bottom:calc(3% + clamp(64px,15cqw,88px) + 62px);height:27%;width:clamp(42px,10cqw,56px);display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;border-radius:99px;background:rgba(14,14,18,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font:650 clamp(10.5px,2.2cqw,13px)/1 var(--body);direction:ltr;opacity:.5;transition:opacity .35s var(--ease),box-shadow .35s var(--ease)}
.rail.spd{left:3%}.rail.siz{right:3%}
.rail .trk{flex:1;width:5px;border-radius:3px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.rail .trk i{position:absolute;inset:0;border-radius:3px;background:var(--lime);transform-origin:50% 100%;transform:scaleY(.26)}
.rail b{font-variant-numeric:tabular-nums;font-weight:700}
.rail.on{opacity:1;box-shadow:inset 0 0 0 1.5px var(--lime)}
.mtool{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;padding:12px 14px 12px 16px;border-radius:18px;background:rgba(20,18,30,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font:650 clamp(14px,2.8cqw,16px)/1.2 var(--body);white-space:nowrap;opacity:0;direction:ltr}
.mtool .sw{width:46px;height:28px;border-radius:99px;background:rgba(255,255,255,.24);position:relative;flex:none;transition:background-color .25s var(--ease)}
.mtool .sw i{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .25s var(--ease)}
.mtool.on .sw{background:var(--lime)}
.mtool.on .sw i{transform:translateX(18px)}
.tbot{position:absolute;left:4%;right:4%;bottom:3%;height:clamp(64px,15cqw,88px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;direction:ltr}
.strip{display:flex;gap:5px;align-items:center}
.th{position:relative;flex:none;width:clamp(28px,6.6cqw,40px);aspect-ratio:44/58;border-radius:7px;overflow:hidden;background-size:cover;background-position:center 30%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);display:flex;align-items:flex-end;justify-content:center;font:700 11px/1.6 var(--body);text-shadow:0 1px 2px #000;opacity:0}
.th .nu{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:0}
.th span{position:relative}
.th.again::after{content:attr(data-again);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);height:24px;padding:0 9px;border-radius:99px;display:flex;align-items:center;background:var(--sel);color:#fff;font:700 12px/1 var(--body);white-space:nowrap;text-shadow:none}
.th.again{overflow:visible}
.recb{width:clamp(56px,14cqw,78px);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 clamp(3px,.8cqw,5px) #fff;display:grid;place-items:center}
.recb i{width:78%;height:78%;border-radius:50%;background:var(--rec);transition:transform .3s var(--ease),border-radius .3s var(--ease)}
.recb.on i{transform:scale(.5);border-radius:22%}
.fin{justify-self:end;display:flex;align-items:center;height:38px;padding:0 15px;border-radius:99px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font:650 15px/1 var(--body);white-space:nowrap;opacity:0;transition:background-color .3s var(--ease),color .3s var(--ease)}
.fin.on{background:var(--lime);color:var(--ink)}
.tchip{position:absolute;left:50%;bottom:calc(3% + clamp(64px,15cqw,88px) + 8px);transform:translateX(-50%);display:flex;align-items:center;height:32px;padding:0 14px;border-radius:99px;background:var(--lime);color:var(--ink);font:750 14.5px/1 var(--body);white-space:nowrap;font-variant-numeric:tabular-nums}
.tip,.rr{position:absolute;left:50%;bottom:calc(3% + clamp(64px,15cqw,88px) + 50px);transform:translateX(-50%);display:flex;align-items:center;height:36px;padding:0 14px;border-radius:12px;background:rgba(20,18,30,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font:650 14px/1 var(--body);white-space:nowrap;opacity:0}
.rr{background:var(--sel);box-shadow:none}
.cmb{position:absolute;left:50%;top:12%;transform:translateX(-50%);display:flex;align-items:center;height:44px;padding:0 20px;border-radius:14px;background:var(--lime);color:var(--ink);font:750 16px/1 var(--body);white-space:nowrap;opacity:0}
.tfinal{position:absolute;left:50%;top:50%;width:clamp(124px,36cqw,220px);aspect-ratio:9/16;border-radius:clamp(14px,3.4cqw,22px);background-size:cover;background-position:center 30%;box-shadow:0 40px 80px -30px rgba(0,0,0,.85),inset 0 0 0 2px rgba(255,255,255,.4);opacity:0;transform:translate(-50%,-50%) scale(.9)}
.tfinal .len{position:absolute;inset:auto 0 6% 0;margin:auto;width:fit-content;max-width:88%;text-align:center;font:700 13px/1.25 var(--body);padding:7px 10px;border-radius:9px;background:rgba(0,0,0,.66)}
.tfinal .saved{position:absolute;left:50%;top:-52px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:99px;background:rgba(10,122,82,.96);font:650 14.5px/1 var(--body);white-space:nowrap}
@media (min-width:1024px){
  .takes .pin{grid-template-columns:.9fr 1.1fr;grid-template-rows:1fr;align-items:center;gap:clamp(28px,4vw,64px);padding-top:84px}
  .takes .copy{align-self:center}
}
@media (min-width:1024px) and (max-height:760px){.steps li:not(.on) > span:not(.n){display:none}}
@media (max-width:1023px){
  .steps li:not(.on){display:none}
  .steps{min-height:76px}
  .takes h2{font-size:clamp(26px,7vw,40px)}
}

/* ---------- feature reel ---------- */
.reel-head{display:grid;gap:16px;align-items:end;margin-bottom:28px}
@media (min-width:900px){.reel-head{grid-template-columns:1fr auto}}
.reel-ctl{display:flex;gap:10px}
.rbtn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:0;background:var(--gl);color:var(--t);box-shadow:inset 0 0 0 1px var(--hair);cursor:pointer;transition:opacity .3s var(--ease)}
.rbtn:disabled{opacity:.4;cursor:default}
[dir="rtl"] .rbtn svg{transform:scaleX(-1)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .rbtn{background:#fff;box-shadow:inset 0 0 0 1px var(--hair),0 1px 3px rgba(20,18,28,.08)}}
:root[data-theme="light"] .rbtn{background:#fff;box-shadow:inset 0 0 0 1px var(--hair),0 1px 3px rgba(20,18,28,.08)}
.segs{display:flex;gap:6px;margin-bottom:18px}
.segs i{flex:1;height:4px;border-radius:2px;background:var(--ln);overflow:hidden;position:relative}
.segs i b{position:absolute;inset:0;width:var(--f,0%);background:var(--t);border-radius:2px;transition:width .35s var(--ease)}
[dir="rtl"] .segs i b{inset:0 0 0 auto}
.reel{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding-inline:var(--pad);padding-block:6px 24px;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.reel.wheeling,.reel.driven{scroll-snap-type:none}
/* On a touch screen the reel is pinned and the page's own vertical scroll moves it, card by card, then the page carries on
   (site.js drives scrollLeft; a sideways swipe on the reel still works). Mouse and trackpad keep wheel-to-sideways.
   There is no pin on a screen too short to hold a card at its normal size: under 501px of height (a phone on its side), or when the
   page's small viewport (what is left with Safari's toolbars showing) is under 600px (html.nopin, set by site.js, which measures
   the svh so the toolbar moving never flips it). There the reel is a plain swipe with cards at their normal size. */
@media (pointer:coarse) and (prefers-reduced-motion:no-preference) and (min-height:501px){
  html.js:not(.nopin) #new{content-visibility:visible;padding-block:0;height:calc(100svh + 150vh)}
  html.js:not(.nopin) #new .rpin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:84px 18px;overflow:clip}
  html.js:not(.nopin) #new .reel-head{margin-bottom:12px;gap:10px;display:flex;align-items:flex-end;justify-content:space-between}
  html.js:not(.nopin) #new .segs{margin-bottom:12px}
  html.js:not(.nopin) #new .reel{padding-block:4px 6px}
  html.js:not(.nopin) #new .card{width:min(84vw,400px,calc((100svh - 232px) * 400 / 560))}
  html.js:not(.nopin) #new .h2{font-size:clamp(28px,8vw,34px)}
}
@media (pointer:coarse) and (prefers-reduced-motion:no-preference) and (min-height:501px) and (max-height:700px){
  html.js:not(.nopin) #new .eyebrow{display:none}
  html.js:not(.nopin) #new .card{width:min(84vw,400px,calc((100svh - 208px) * 400 / 560))}
}
.reel:focus-visible{outline-offset:-3px}
.card{flex:none;width:min(84vw,400px);aspect-ratio:400/560;scroll-snap-align:start;position:relative;border-radius:28px;overflow:hidden;isolation:isolate;color:#fff;background:#15131F;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 60px -36px rgba(0,0,0,.7);container-type:inline-size;display:flex;flex-direction:column}
@media (min-width:768px){.card{width:clamp(340px,44vw,420px)}}
.card.iris .txt p{color:#fff}
.card.iris{background:radial-gradient(90% 70% at 15% 0%,rgba(168,156,255,.7),rgba(123,108,255,0) 70%),linear-gradient(165deg,#6655EE,#3B2FB0)}
.card.ink{background:radial-gradient(80% 60% at 90% 0%,rgba(102,85,238,.45),rgba(102,85,238,0) 70%),#0F0D18}
.card .ph{position:absolute;inset:0;background-size:cover;background-position:center 25%;z-index:-2}
.card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,18,.15) 0%,rgba(11,10,18,.1) 40%,rgba(11,10,18,.88) 66%,#0B0A12 100%)}
.card .vis{position:relative;flex:1;min-height:0}
.card .txt{padding:0 clamp(18px,6cqw,26px) clamp(20px,6cqw,26px);display:grid;gap:8px;justify-items:start}
.card h3{font-size:clamp(24px,7.4cqw,30px);line-height:1.08;color:#fff}
.card .txt p{font-size:clamp(15px,4.2cqw,16.5px);line-height:1.45;color:rgba(255,255,255,.86)}
.tag{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:9px;font:700 13px/1 var(--body);background:var(--lime);color:var(--ink)}
.tag.n{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
/* glass inside cards */
.gls{background:rgba(12,10,22,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);border-radius:18px}
.chipw{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:99px;font:650 13.5px/1 var(--body);white-space:nowrap}
/* voiceover */
.v-vo .pill{position:absolute;top:7%;left:50%;transform:translateX(-50%)}
.v-vo .pill i{width:8px;height:8px;border-radius:50%;background:var(--rec)}
.v-vo .lines{position:absolute;top:20%;left:7%;right:7%;padding:12px 14px;font:650 clamp(14px,4.4cqw,17px)/1.5 var(--body)}
.v-vo .lines p{color:rgba(255,255,255,.52)}
.v-vo .lines p.cur{color:#fff}
.v-vo .wave{position:absolute;left:7%;right:7%;bottom:4%;padding:10px 12px;display:grid;gap:8px;direction:ltr}
.wv{display:flex;align-items:center;gap:8px}
.wv .mic{width:34px;height:34px;border-radius:50%;background:var(--lime);display:grid;place-items:center;color:var(--ink);flex:none}
.bars{flex:1;display:flex;align-items:center;justify-content:space-between;height:34px}
.bars i{width:3px;border-radius:2px;background:var(--lime);height:100%;transform-origin:center;animation:bar 1.1s var(--ease) infinite alternate}
@keyframes bar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.tl{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--body);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.86)}
.tl .t{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.28);position:relative}
.tl .t i{position:absolute;inset:0 auto 0 0;width:28%;background:#fff;border-radius:2px;animation:play 9s linear infinite}
.tl .t i::after{content:"";position:absolute;right:-6px;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff}
@keyframes play{from{width:6%}to{width:94%}}
/* AI */
.v-ai{padding:7% 7% 0;display:grid;align-content:start;gap:12px}
.v-ai .ask{padding:12px 14px}
.v-ai .ask small{display:block;font:600 12.5px/1 var(--body);color:rgba(255,255,255,.8);margin-bottom:8px}
.v-ai .ask b{display:block;font:650 15px/1.3 var(--body)}
.v-ai .out{padding:12px 14px;font:600 14.5px/1.5 var(--body)}
.v-ai .out p{clip-path:inset(0 100% 0 0);animation:type 7s var(--ease) infinite}
.v-ai .out p:nth-child(2){animation-delay:.6s}.v-ai .out p:nth-child(3){animation-delay:1.2s}
[dir="rtl"] .v-ai .out p{clip-path:inset(0 0 0 100%);animation-name:typer}
@keyframes type{0%{clip-path:inset(0 100% 0 0)}16%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes typer{0%{clip-path:inset(0 0 0 100%)}16%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
.v-ai .who{display:flex;flex-wrap:wrap;gap:8px}
.v-ai .who span{background:rgba(11,10,18,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.v-ai .who span.on{background:#fff;color:#2A2280;box-shadow:none}
.v-ai .note{font:600 12.5px/1.3 var(--body);color:#fff}
/* import */
.v-im{display:grid;place-items:center}
.v-im .doc{width:62%;padding:14px 16px;position:relative;z-index:2}
.v-im .doc small{display:block;font:600 12.5px/1.2 var(--body);color:rgba(255,255,255,.75);margin-top:2px}
.v-im .doc b{font:700 16px/1.2 var(--body)}
.v-im .doc p{font:600 13.5px/1.45 var(--body);color:rgba(255,255,255,.55);margin-top:8px}
.v-im .doc p.cur{color:#fff}
.v-im .src{position:absolute;display:flex;flex-direction:column;gap:10px;inset-inline-start:7%;top:12%}
.v-im .src span{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);animation:pick 6s var(--ease) infinite}
.v-im .src span:nth-child(2){animation-delay:2s}.v-im .src span:nth-child(3){animation-delay:4s}
@keyframes pick{0%,12%{background:rgba(255,255,255,.12);color:#fff}18%,30%{background:var(--lime);color:var(--ink)}36%,100%{background:rgba(255,255,255,.12);color:#fff}}
.v-im .doc{margin-top:22%;margin-inline-start:22%}
/* templates */
.v-tp{overflow:hidden;padding-top:7%}
.v-tp .row{display:flex;gap:10px;width:max-content;animation:mq 22s linear infinite}
.v-tp .row.r2{animation-direction:reverse;animation-duration:26s;margin-top:12px}
[dir="rtl"] .v-tp .row{animation-name:mqr}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes mqr{to{transform:translateX(50%)}}
.v-tp .tpl{width:112px;height:150px;border-radius:16px;background-size:cover;background-position:center 25%;position:relative;overflow:hidden;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.v-tp .tpl::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.82))}
.v-tp .tpl span{position:absolute;inset:auto 8px 8px;z-index:1;font:650 12.5px/1.25 var(--body)}
.v-tp .tpl span small{display:block;color:rgba(255,255,255,.82);font-weight:600;font-size:11.5px;margin-top:3px}
.v-tp .hook{height:40px;padding:0 14px;border-radius:12px;display:inline-flex;align-items:center;background:rgba(12,10,22,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font:650 13.5px/1 var(--body);white-space:nowrap;flex:none}
/* export sizes */
.v-ex{display:grid;place-items:center;align-content:center;gap:14px}
.v-ex .fr{width:46%;aspect-ratio:9/16;border-radius:18px;background:url(img/cam-hero.jpg?v=a3fce6357d) center 30%/cover;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4),0 24px 50px -20px rgba(0,0,0,.7);animation:morph 9s var(--ease) infinite;position:relative}
@keyframes morph{0%,27%{width:42%;aspect-ratio:9/16}33%,60%{width:62%;aspect-ratio:1/1}66%,94%{width:86%;aspect-ratio:16/9}100%{width:42%;aspect-ratio:9/16}}
.v-ex .fr span{position:absolute;inset:auto 0 8px;margin:auto;width:fit-content;font:650 12px/1 var(--body);padding:5px 8px;border-radius:8px;background:rgba(0,0,0,.6);white-space:nowrap}
.v-ex .opts{display:flex;gap:8px;direction:ltr}
.v-ex .opts span{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);animation:o1 9s var(--ease) infinite}
.v-ex .opts span:nth-child(2){animation-name:o2}.v-ex .opts span:nth-child(3){animation-name:o3}
@keyframes o1{0%,29%{background:var(--lime);color:var(--ink)}31%,98%{background:rgba(255,255,255,.14);color:#fff}100%{background:var(--lime);color:var(--ink)}}
@keyframes o2{0%,31%{background:rgba(255,255,255,.14);color:#fff}33%,62%{background:var(--lime);color:var(--ink)}64%,100%{background:rgba(255,255,255,.14);color:#fff}}
@keyframes o3{0%,64%{background:rgba(255,255,255,.14);color:#fff}66%,96%{background:var(--lime);color:var(--ink)}98%,100%{background:rgba(255,255,255,.14);color:#fff}}
/* audio only */
.v-au{display:grid;place-items:center;align-content:center;gap:18px;padding:0 7%}
.v-au .seg{display:flex;padding:4px;border-radius:99px;background:rgba(12,10,22,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.v-au .seg span{height:36px;padding:0 18px;border-radius:99px;display:flex;align-items:center;font:650 14px/1 var(--body)}
.v-au .seg span.on{background:var(--lime);color:var(--ink)}
.v-au .micb{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:rgba(12,10,22,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);position:relative}
.v-au .micb::before,.v-au .micb::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px rgba(198,244,50,.7);animation:ringp 2.4s var(--eout) infinite}
.v-au .micb::after{animation-delay:1.2s}
@keyframes ringp{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
.v-au .bars{width:100%;height:40px;flex:none;direction:ltr}
.v-au .line{font:650 16px/1.3 var(--body);text-align:center}
.v-au .tl{width:100%}

/* a narrow card (a 320px phone) has less room for the picture above the text, so the picture is drawn a little smaller instead of running into the words */
@container (max-width:300px){.card .vis{zoom:.84}}
@container (max-width:250px){.card .vis{zoom:.74}}
@container (max-width:300px){.v-ai .note,.v-au .line,.v-ai .who span:nth-child(n+3){display:none}.v-ai{gap:6px;padding-top:4%}.v-ai .ask,.v-ai .out{padding:9px 12px}.v-ai .out{font-size:13.5px}.v-ai .ask small{display:none}.v-au{gap:12px}}

/* ---------- everywhere (bento) ---------- */
.bento{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1280px){.bento{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative;border-radius:26px;overflow:hidden;background:var(--p);box-shadow:inset 0 0 0 1px var(--ln),0 24px 50px -40px rgba(0,0,0,.6);display:flex;flex-direction:column;min-height:360px}
.tile .tv{position:relative;height:210px;overflow:hidden;display:grid;place-items:center;background:#120F22}
.tile .tv .wall{position:absolute;inset:-20px;background-size:cover;background-position:center 30%;filter:blur(14px) saturate(1.2);transform:scale(1.1)}
.tile .tv .wall::after{content:"";position:absolute;inset:0;background:rgba(7,3,19,.45)}
.tile .tt{padding:18px 20px 22px;display:grid;gap:6px}
.tile h3{font-size:22px;line-height:1.1}
.tile p{color:var(--d);font-size:15.5px;line-height:1.45}
.wg{position:relative;width:170px;height:170px;border-radius:26px;padding:14px;background:#15131F;color:#fff;box-shadow:0 14px 40px -12px rgba(0,0,0,.7);overflow:hidden;display:flex;flex-direction:column}
.wg::before{content:"";position:absolute;width:140px;height:140px;border-radius:50%;filter:blur(36px);background:#6655EE;opacity:.55;left:-40px;top:-60px}
.wg small{position:relative;font:600 12px/1 var(--body);color:rgba(255,255,255,.72)}
.wg b{position:relative;font:700 15px/1.2 var(--body);margin-top:6px}
.wg .wp{position:relative;margin-top:auto;height:40px;border-radius:20px;background:#1F1C2E;display:flex;align-items:center;justify-content:center;gap:8px;font:700 14px/1 var(--body)}
.wg .wp i{width:14px;height:14px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 2px #1F1C2E,0 0 0 4px #fff}
.ctlr{position:relative;display:grid;justify-items:center;gap:10px;color:#fff;font:600 13px/1.2 var(--body);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ctlr .c{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.ctlr .c i{width:30px;height:30px;border-radius:50%;background:#FF4D5E;box-shadow:0 0 0 3px rgba(0,0,0,.25),0 0 0 6px #fff}
.siri{position:relative;display:grid;gap:10px;justify-items:center}
.siri .appicon{width:64px;height:64px;border-radius:15px;box-shadow:0 10px 28px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.12)}
@keyframes breathe{to{transform:scale(1.08)}}
.siri .say{padding:10px 16px;border-radius:18px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff;font:650 16px/1.2 var(--body)}
.spot{position:relative;width:86%;display:grid;gap:8px}
.spot .q{height:44px;border-radius:14px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);display:flex;align-items:center;gap:8px;padding:0 12px;color:#fff;font:500 15px/1 var(--body)}
.spot .q b{font-weight:500}
.spot .q b::after{content:"";display:inline-block;width:2px;height:18px;background:var(--lime);vertical-align:-3px;margin-inline-start:2px;animation:blink 1.1s steps(1) infinite}
.spot .res{border-radius:14px;background:rgba(20,18,30,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);padding:10px 12px;display:flex;gap:10px;align-items:center;color:#fff}
.spot .res .ai{width:36px;height:36px;border-radius:9px;background:url(apple-touch-icon.png?v=84a5e70a90) center/cover;flex:none}
.spot .res b{display:block;font:650 14.5px/1.2 var(--body)}
.spot .res small{color:rgba(255,255,255,.75);font-size:12.5px}

/* ---------- iPad scene (scroll driven): one iPad turns from landscape to portrait ---------- */
/* The device is Apple's own iPad Pro 13-inch (M5) bezel from Apple Design Resources (img/ipad-pro-13.webp); nothing about it
   is drawn here. The whole iPad turns; the camera picture behind the card turns back so it stays upright, as it does on a real iPad. */
.spin{height:280vh}
.spin .pin{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto 1fr;gap:clamp(10px,3vh,32px);padding-top:88px;padding-bottom:20px;overflow:hidden}
.spin .copy{display:grid;gap:14px;align-content:start}
.spin .lede{max-width:46ch}
.spin .h2{font-size:clamp(34px,3.7vw,58px)}
.orient{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.orient li{display:grid;gap:3px;padding:8px 0;padding-inline-start:16px;box-shadow:inset 3px 0 0 var(--hair);transition:box-shadow .4s var(--ease)}
[dir="rtl"] .orient li{box-shadow:inset -3px 0 0 var(--hair)}
.orient li b{font:650 18px/1.25 var(--body);color:var(--d);transition:color .4s var(--ease)}
.orient li span{color:var(--d);font-size:15.5px;line-height:1.45}
.orient li.on{box-shadow:inset 3px 0 0 var(--sel)}
.orient li.on b{color:var(--t);font-weight:780}
[dir="rtl"] .orient li.on{box-shadow:inset -3px 0 0 var(--sel)}
.pstage{position:relative;min-height:0;container-type:size}
.padbox{position:absolute;inset:0}
.pad{position:absolute;left:50%;top:50%;width:min(75cqh,77cqw);aspect-ratio:1468/1125;border-radius:6.4% / 8.35%;transform:translate(-50%,-50%) rotate(calc(var(--a,0) * 1deg));box-shadow:0 36px 60px -34px rgba(0,0,0,.6);will-change:transform}
.pad .bez{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:2;pointer-events:none}
/* the screen window measured from the bezel's alpha: 2752 x 2064 at (94, 96) in the 2936 x 2250 device; a hair larger, under the bezel */
.pscr{position:absolute;left:3.1%;top:4.13%;width:93.93%;height:92%;overflow:hidden;border-radius:3% / 4%;background:#0d0b10;color:#fff;isolation:isolate;container-type:inline-size}
.pbg{position:absolute;left:-12.5cqw;top:-25cqw;width:125cqw;height:125cqw;transform:rotate(calc(var(--a,0) * -1deg))}
.pbg .still,.pbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;background-size:cover;background-position:center 32%}
.pbg::after{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(0,0,0,0) 55%,rgba(0,0,0,.45))}
.pad .pr{--y0:11.5;--y1:26.6;--yb:7;top:0;left:50cqw;right:auto;width:48cqw;--fs:2.9cqw;--rows:3;border-radius:2.4cqw;padding:1.3cqw 1.7cqw 1.1cqw;background:rgba(10,8,20,.84);backdrop-filter:none;-webkit-backdrop-filter:none;transform:translate(-50%,-50%) translateY(calc((var(--y0) + (var(--y1) - var(--y0)) * var(--k,0) + var(--yb) * var(--b,0)) * 1cqw)) rotate(calc(var(--a,0) * -1deg))}
.pad .prw{-webkit-mask:linear-gradient(#0000,#000 calc(var(--lh) * .2),#000 calc(100% - var(--lh) * .2),#0000);mask:linear-gradient(#0000,#000 calc(var(--lh) * .2),#000 calc(100% - var(--lh) * .2),#0000)}
.pad .prfoot{font-size:1.7cqw;margin-top:1.6cqw}
.prb{position:absolute;left:94cqw;top:37.5cqw;width:7.4cqw;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 .45cqw #fff;display:grid;place-items:center;transform:translate(-50%,-50%)}
[dir="rtl"] .prb{left:6cqw}
.prb i{width:78%;height:78%;border-radius:50%;background:var(--rec)}
/* Reduce Motion: the two orientations as still frames, side by side */
.spin.two{height:auto}
.spin.two .pin{position:relative;height:auto;padding-block:96px 60px}
.spin.two .pstage{container-type:normal;display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:center}
.spin.two .padbox{position:relative;inset:auto;width:min(100%,460px);aspect-ratio:1468/1125}
.spin.two .padbox.p{width:min(62%,300px);aspect-ratio:1125/1468}
.spin.two .pad{width:100%}
.spin.two .padbox.p .pad{width:calc(100% * 1468 / 1125)}
@media (min-width:1024px){
  .spin .pin{grid-template-columns:.62fr 1.38fr;grid-template-rows:1fr;align-items:center;gap:clamp(28px,4vw,64px);padding-top:84px}
  .spin .pstage{height:100%}
}
@media (max-width:1023px){.spin .lede{display:none}.orient li:not(.on){display:none}.orient{min-height:70px}}
@media (max-width:1023px) and (max-height:720px){.orient li span{display:none}.orient{min-height:0}.spin .h2{font-size:clamp(26px,7.4vw,34px)}.spin .pin{gap:6px}}
/* phones: the iPad is the picture, so the card is bigger on it and its text stays readable */
@media (max-width:640px){
  .pad .pr{--y0:15;--y1:36.5;--yb:6;width:70cqw;--fs:4.6cqw;border-radius:3.4cqw;padding:2cqw 2.6cqw 1.6cqw}
  .pad .prfoot{font-size:2.7cqw;margin-top:2cqw}
}

/* ---------- devices scene (scroll driven): one script keeps scrolling while the camera moves along iPhone, iPad and Mac ---------- */
/* The devices are Apple's own bezels from Apple Design Resources: iPhone 18 Pro (img/iphone-18-pro.webp), iPad Pro 13-inch M5
   (img/ipad-pro-13.webp), MacBook Pro 14-inch M5 (img/macbook-pro-m5-14.webp). Nothing about them is drawn here, and they are used as
   they come: never scaled apart from each other (the three share one scale from their real sizes), faded, shadowed, overlapped or
   turned. They rest in a row; the page moves along the row like a camera, and only what is on the screens changes.
   Each screen carries its own reading card, sized in the app's points, so the card is the same size in every screen. */
.dev{height:520vh}
.dev .pin{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1.8vh,20px);padding-top:84px;padding-bottom:18px;overflow:hidden;isolation:isolate}
/* the ground: soft light behind the devices (never on them); it drifts slower than the row, so the row has depth */
.dbg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.dbg i{position:absolute;border-radius:50%;will-change:transform}
.dbg .g1{left:-12vw;top:12%;width:78vw;height:78vw;max-width:1500px;max-height:1500px;background:radial-gradient(closest-side,rgba(91,75,224,.26),rgba(91,75,224,0))}
.dbg .g2{left:46vw;top:36%;width:64vw;height:64vw;max-width:1200px;max-height:1200px;background:radial-gradient(closest-side,rgba(198,244,50,.5),rgba(198,244,50,0))}
.dbg .g3{left:104vw;top:-6%;width:70vw;height:70vw;max-width:1300px;max-height:1300px;background:radial-gradient(closest-side,rgba(123,108,255,.22),rgba(123,108,255,0))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .dbg .g1{background:radial-gradient(closest-side,rgba(102,85,238,.42),rgba(102,85,238,0))}:root:not([data-theme="light"]) .dbg .g2{background:radial-gradient(closest-side,rgba(198,244,50,.14),rgba(198,244,50,0))}:root:not([data-theme="light"]) .dbg .g3{background:radial-gradient(closest-side,rgba(102,85,238,.34),rgba(102,85,238,0))}}
:root[data-theme="dark"] .dbg .g1{background:radial-gradient(closest-side,rgba(102,85,238,.42),rgba(102,85,238,0))}
:root[data-theme="dark"] .dbg .g2{background:radial-gradient(closest-side,rgba(198,244,50,.14),rgba(198,244,50,0))}
:root[data-theme="dark"] .dbg .g3{background:radial-gradient(closest-side,rgba(102,85,238,.34),rgba(102,85,238,0))}
.dhead{display:grid;gap:8px 48px;align-items:end}
.dhead .copy{display:grid;gap:8px}
.dhead .h2{font-size:clamp(26px,3.3vw,52px);line-height:1.05;max-width:22ch}
.dhead .lede{max-width:52ch;font-size:clamp(16px,1.2vw,18px)}
@media (min-width:1024px){.dhead{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.dhead .h2{font-size:clamp(30px,2.7vw,46px);max-width:30ch}}
@media (max-width:1023px){.dhead .lede{display:none}}
@media (max-width:639px){.dhead .h2{font-size:clamp(24px,6.8vw,30px)}.dev .pin{gap:8px}}
/* the stage is as wide as the window: a device is only ever cut off by the edge of the window itself */
.dstage{position:relative;min-height:0;overflow:hidden}
.dstrip{position:absolute;left:0;top:0;width:0;height:100%;will-change:transform}
.dv{position:absolute;left:0;top:0}
.dbez{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:2;pointer-events:none}
.dscr{position:absolute;overflow:hidden;background:#0d0b10;color:#fff;container-type:inline-size;isolation:isolate;box-shadow:0 0 0 3px #0d0b10}  /* the ring sits under the bezel: no light hairline at the screen edge */
/* the photo is clipped to the corners of the display window in the bezel (measured on its alpha: about 100 of 640 px on the iPhone, 30 of 1468 on the iPad), so no square corner of the screen can show past the bezel's rounded body */
.dv.ph .dscr{border-radius:16.4% / 7.5%}
.dv.pd .dscr{border-radius:2% / 2.7%}
/* the screen of each bezel, measured on the bezel's own transparent window; --pt is one point of the app in that screen */
.dv.ph{--pt:.2488cqw;--ct:58}
.dv.pd{--pt:.0727cqw;--ct:24}
.dv.mc{--pt:.0661cqw;--ct:76}
/* the talking loop: a still (the first frame, painted at once) with the video over it; one framing (--op) for both, so the video fades in without a jump.
   The clip is cropped to the right of the tripod, so no phone is in any frame; each screen only trims it: the iPhone to a face-high column, the iPad shows all of it, the Mac trims top and bottom */
.dpic,.dvid{position:absolute;inset:0;z-index:-2}
.dpic{background-size:cover;background-repeat:no-repeat;background-position:var(--op,50% 50%)}
.dvid{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.dvid.on{opacity:1}
.dv.ph{--op:16% 50%}
.dv.mc{--op:50% 22%}
.dshade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0) 26%,rgba(0,0,0,0) 70%,rgba(0,0,0,.4))}
.drec{position:absolute;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%)}
.drec i{width:78%;height:78%;border-radius:50%;background:var(--rec)}
.ph .drec{left:50%;top:calc(100% - 86 * var(--pt));width:calc(70 * var(--pt));box-shadow:inset 0 0 0 calc(4 * var(--pt)) #fff}
.pd .drec{left:calc(100% - 60 * var(--pt));top:50%;width:calc(72 * var(--pt));box-shadow:inset 0 0 0 calc(3.4 * var(--pt)) #fff}
.mc .drec{left:calc(100% - 60 * var(--pt) - 3.4cqw);top:62%;width:calc(72 * var(--pt));box-shadow:inset 0 0 0 calc(3.4 * var(--pt)) #fff}
/* the Mac: the desktop, the menu bar beside the camera housing, and Cue's iPad app in a window */
.mwall{position:absolute;inset:0;background:radial-gradient(60% 80% at 12% 8%,rgba(102,85,238,.9),rgba(102,85,238,0) 70%),radial-gradient(55% 70% at 92% 100%,rgba(198,244,50,.28),rgba(198,244,50,0) 70%),linear-gradient(160deg,#2A2470,#0B0A12 70%)}
.mbar{position:absolute;left:0;right:0;top:0;height:2.12cqw;display:flex;align-items:center;gap:1.3cqw;padding:0 1.6cqw;font:600 .9cqw/1 var(--body);color:#fff;background:rgba(14,12,24,.55);white-space:nowrap;direction:ltr}
.mbar b{font-weight:800}
.mbar .clk{margin-left:auto;font-variant-numeric:tabular-nums}
.mwin{position:absolute;left:2cqw;right:2cqw;top:2.6cqw;bottom:2.4%;border-radius:.7cqw;overflow:hidden;background:#0d0b10;isolation:isolate;box-shadow:0 0 0 .08cqw rgba(255,255,255,.22)}
.mtl{position:absolute;left:0;right:0;top:0;height:1.85cqw;display:flex;align-items:center;gap:.5cqw;padding:0 .8cqw;background:#1C1A28;z-index:2;direction:ltr}
.mtl i{width:.78cqw;height:.78cqw;border-radius:50%;background:#FF5F57;flex:none}
.mtl i:nth-child(2){background:#FEBC2E}.mtl i:nth-child(3){background:#28C840}
.mtl span{position:absolute;left:0;right:0;text-align:center;font:650 .9cqw/1 var(--body);color:rgba(255,255,255,.78)}
.mpic{position:absolute;left:0;right:0;top:1.85cqw;bottom:0;overflow:hidden;isolation:isolate}
/* the reading card: the same card in every screen, 350 pt wide with 26 pt text, as in the app */
.dcard{position:absolute;left:50%;top:calc(var(--ct) * var(--pt));z-index:5;width:calc(350 * var(--pt));margin-left:calc(-175 * var(--pt));--fs:calc(26 * var(--pt));--lh:calc(var(--fs) * 1.42);padding:calc(var(--fs) * .5) calc(var(--fs) * .62) calc(var(--fs) * .42);border-radius:calc(var(--fs) * 1.05);background:rgba(10,8,20,.86);box-shadow:inset 0 0 0 calc(var(--fs) * .04) rgba(255,255,255,.16);color:#fff}
.dview{position:relative;height:calc(var(--lh) * 3);overflow:hidden;-webkit-mask:linear-gradient(#0000,#000 calc(var(--lh) * .22),#000 calc(100% - var(--lh) * .22),#0000);mask:linear-gradient(#0000,#000 calc(var(--lh) * .22),#000 calc(100% - var(--lh) * .22),#0000)}
.dband{position:absolute;inset-inline:0;top:var(--lh);height:var(--lh);border-radius:calc(var(--fs) * .45);background:rgba(255,255,255,.08)}
.dband::before{content:"";position:absolute;inset-inline-start:calc(var(--fs) * .05);top:50%;transform:translateY(-50%);border:calc(var(--fs) * .28) solid transparent;border-inline-start:calc(var(--fs) * .36) solid var(--lime);border-inline-end:0}
.dtxt{position:absolute;inset:0 0 auto;will-change:transform}
.dtxt p{height:var(--lh);padding-inline:calc(var(--fs) * .62);font:600 var(--fs)/var(--lh) var(--body);color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;transition:color .35s var(--ease)}
.dtxt p.cur{color:#fff}
[lang="ar"] .dtxt p{font-family:-apple-system,"SF Arabic","Geeza Pro",system-ui,sans-serif}
.dfoot{display:flex;justify-content:space-between;align-items:center;margin-top:calc(var(--fs) * .32);font:600 calc(var(--fs) * .6)/1 var(--body);color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums;direction:ltr}
.dfoot .grab{width:12%;height:calc(var(--fs) * .12);border-radius:3px;background:rgba(255,255,255,.4)}
/* the three devices, as a legend that is also a way in: each name jumps to its device; the bar over it fills while it is the one in view */
.dlab{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2.4vw,32px);position:relative}
.dlab li{display:grid;gap:4px;align-content:start}
/* the bar and the name are one button that scrolls the page to that device; its padding makes it a 44 pt target and the caption stays outside it */
.dgo{all:unset;box-sizing:border-box;display:grid;gap:4px;align-content:start;width:100%;cursor:pointer;border-radius:10px;padding:14px 0 6px;margin-top:-14px;-webkit-tap-highlight-color:transparent}
.dgo:focus-visible{outline:3px solid var(--s2);outline-offset:4px}
div.dgo{cursor:default}
.dlab .bar{display:block;height:4px;border-radius:2px;background:var(--ln2);overflow:hidden;margin-bottom:8px}
.dlab .bar b{display:block;height:100%;background:var(--sel);transform-origin:0 50%;transform:scaleX(0)}
[dir="rtl"] .dlab .bar b{transform-origin:100% 50%}
.dlab .nm{font:650 18px/1.25 var(--body);color:var(--d);transition:color .4s var(--ease)}
.dlab .tx{color:var(--d);font-size:15px;line-height:1.42}
.dlab li.on .nm{color:var(--t);font-weight:780}
.dlab li.on .tx{color:var(--t)}
@media (hover:hover){.dlab li:not(.on) .dgo:hover .nm{color:var(--t)}.dgo .bar{transition:transform .25s var(--ease);transform-origin:50% 100%}button.dgo:hover .bar{transform:scaleY(1.75)}}
@media (max-width:1023px){
  .dlab{padding-bottom:50px}
  .dlab .nm{font-size:15.5px}
  .dlab .tx{position:absolute;inset-inline:var(--pad);bottom:0;font-size:14.5px;line-height:1.38;opacity:0;transition:opacity .25s var(--ease);pointer-events:none}
  .dlab li.on .tx{opacity:1;transition-delay:.18s}
  .dev.still .dlab .tx,html:not(.js) .dlab .tx{position:static;opacity:1;pointer-events:auto}
}
@media (min-width:1024px){.dlab{max-width:var(--wrap)}}
@media (min-width:1024px) and (max-height:760px){.dhead .lede{display:none}.dlab .tx{font-size:14px}}
/* Reduce Motion: the three devices as a still, to one scale, each with its own card (site.js lays it out) */
.dev.still{height:auto}
.dev.still .pin{position:relative;height:auto;padding-block:96px 60px}
.dev.still .dlab{padding-bottom:0}
.dev.still .dlab .tx{position:static;opacity:1}
.dev.still .dbg .g3{display:none}
/* without JavaScript: the copy and the three devices as a list */
html:not(.js) .dev{height:auto}
html:not(.js) .dev .pin{position:relative;height:auto;padding-block:96px 60px}
html:not(.js) .dstage{display:none}
html:not(.js) .dlab{padding-bottom:0}
html:not(.js) .dlab .tx{position:static;opacity:1}
html:not(.js) .dgo{cursor:default}

/* ---------- languages ---------- */
.lang-wrap{display:grid;gap:clamp(36px,5vw,64px);align-items:center}
@media (min-width:1024px){.lang-wrap{grid-template-columns:1.1fr .9fr}}
.lcard{position:relative;border-radius:30px;padding:clamp(18px,3vw,30px);background:radial-gradient(90% 70% at 10% 0%,rgba(168,156,255,.55),rgba(123,108,255,0) 70%),linear-gradient(165deg,#6655EE,#3B2FB0);overflow:hidden}
.lcard .pr{position:relative;inset:auto;--fs:clamp(15px,2.3vw,30px);--rows:3;border-radius:22px;padding:18px 20px 12px}
.lcard .prl p{text-overflow:clip}
.lcard .prl p[dir="rtl"]{text-align:right}
.lcard .prfoot{font-size:13px}
.lcard .where{display:flex;justify-content:space-between;margin-top:14px;color:#fff;font:600 14px/1.3 var(--body)}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px;max-width:460px}
.chips span{display:flex;white-space:nowrap;overflow:hidden;align-items:center;min-height:44px;padding:0 16px;border-radius:22px;background:var(--p);box-shadow:inset 0 0 0 1px var(--hair);font-weight:600;font-size:15.5px;transition:background-color .5s var(--ease),color .5s var(--ease)}
.chips span.on{background:var(--sel);color:#fff;box-shadow:none}

/* ---------- pricing ---------- */
.plans{display:grid;gap:16px;grid-template-columns:1fr;margin-top:38px}
@media (min-width:700px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.plans{grid-template-columns:repeat(4,1fr)}}
.plan{position:relative;border-radius:24px;padding:22px 22px 24px;background:var(--p);box-shadow:inset 0 0 0 1.5px var(--hair);display:grid;align-content:start;gap:6px}
.plan.on{box-shadow:inset 0 0 0 2.5px var(--a)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .plan.on{box-shadow:inset 0 0 0 2.5px var(--t)}}
:root[data-theme="light"] .plan.on{box-shadow:inset 0 0 0 2.5px var(--t)}
.plan .nm{display:flex;align-items:center;gap:8px;font:700 17px/1.2 var(--body)}
.plan .nm .tag{height:24px;font-size:12.5px}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .plan .tag{box-shadow:inset 0 0 0 1.5px var(--ink)}}
:root[data-theme="light"] .plan .tag{box-shadow:inset 0 0 0 1.5px var(--ink)}
.plan .price{font:800 clamp(21px,1.7vw,24px)/1.1 var(--disp);text-wrap:balance;font-style:italic;font-stretch:104%;margin-top:6px;font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
[dir="rtl"] .plan .price{text-align:right}
.plan .per{color:var(--d);font-size:15px}
.plan ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px;font-size:15px}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li i{width:20px;height:20px;border-radius:50%;flex:none;margin-top:2px;display:grid;place-items:center;background:var(--sel);color:#fff}
.owner{margin-top:22px;display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:20px;background:var(--p);box-shadow:inset 0 0 0 1px var(--hair)}
.owner .sq{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#A79CFF,#5040D6)}
.cmp{margin-top:34px;border-radius:24px;background:var(--p);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.cmp table{width:100%;border-collapse:collapse;font-size:15.5px}
.cmp th,.cmp td{padding:13px 16px;border-bottom:1px solid var(--ln);text-align:start}
.cmp tr:last-child td{border-bottom:0}
.cmp th{font:700 14px/1.2 var(--body);color:var(--d)}
.cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center;width:22%}
.cmp .pro{color:var(--at);font-weight:700}
.cmp .no{color:var(--d)}
.fine{margin-top:18px;color:var(--d);font-size:14px;max-width:80ch}
.fine a{color:var(--at);font-weight:600;display:inline-flex;align-items:center;min-height:44px;padding:0 2px}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin:36px auto 0}
.faq details{border-bottom:1px solid var(--ln)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 0;cursor:pointer;font:700 clamp(17px,1.5vw,20px)/1.3 var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:32px;height:32px;border-radius:50%;flex:none;position:relative;box-shadow:inset 0 0 0 1.5px var(--hair)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:1px;background:var(--t);transform:translate(-50%,-50%);transition:transform .4s var(--ease)}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq details p{padding:0 0 20px;color:var(--d);max-width:70ch}

/* ---------- end: glass card to CUE plate morph ---------- */
.finale{height:260vh}
.finale .pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.morph{position:relative;transform:translateZ(0);width:calc(var(--cw0) + (var(--cw1) - var(--cw0)) * var(--m,0));height:calc(var(--ch0) + (var(--ch1) - var(--ch0)) * var(--m,0));--cw0:min(86vw,560px);--ch0:min(46vw,250px);--cw1:min(64vw,420px);--ch1:calc(var(--cw1) * 401 / 779);filter:drop-shadow(0 30px 60px rgba(0,0,0,calc(.45 * var(--m,0))))}
.morph .body{position:absolute;inset:0;border-radius:calc(28px * (1 - var(--m,0)));clip-path:polygon(0% 0%,calc(100% - 10.9% * var(--m,0)) 0%,100% 100%,calc(10.9% * var(--m,0)) 100%);background:rgba(10,8,20,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);overflow:hidden}
.morph .lime{position:absolute;inset:0;background:linear-gradient(180deg,#D9FF6B,#C6F432 40%,#A6D61C);opacity:var(--ml,0)}
.morph .lns{position:absolute;inset:12% 9%;display:grid;align-content:center;gap:4px;opacity:calc(1 - var(--m,0) * 2.2);font:600 clamp(18px,2.6vw,28px)/1.45 var(--body);color:rgba(255,255,255,.52)}
.morph .lns p.cur{color:#fff}
.morph .wm{position:absolute;left:13.5%;right:15.5%;top:25.5%;bottom:26.5%;background:var(--ink);-webkit-mask:url(img/wordmark.svg?v=3e868eb6ef) center/contain no-repeat;mask:url(img/wordmark.svg?v=3e868eb6ef) center/contain no-repeat;opacity:var(--mw,0);transform:translateY(calc(12px * (1 - var(--mw,0))))}
.finale .after{position:absolute;inset:auto 0 max(7vh,40px);display:grid;justify-items:center;gap:20px;text-align:center;padding-inline:var(--pad);opacity:var(--ma,0);transform:translateY(calc(16px * (1 - var(--ma,0))))}
.finale .after h2{font-size:clamp(28px,3.6vw,52px);line-height:1.05}
.finale .aurora i{opacity:calc(var(--aur) * (.4 + var(--m,0) * .6))}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--ln);padding-block:44px calc(98px + env(safe-area-inset-bottom,0px))}/* the fixed pause button (44 px + 14 px gap) never covers the last row of the page */
.foot .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px}
.foot nav{display:flex;flex-wrap:wrap;gap:0 6px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;text-decoration:none;color:var(--d);font-size:15px;border-radius:10px}
.foot nav a:hover{color:var(--t);background:var(--ln)}
.foot .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:20px;color:var(--d);font-size:14px}
.foot .made{display:inline-flex;align-items:center;gap:8px;color:var(--t);font-weight:600}
.appear{display:inline-flex;padding:3px;border-radius:14px;background:var(--p);box-shadow:inset 0 0 0 1px var(--hair);margin-inline-start:auto}
.appear button{min-height:44px;min-width:58px;padding:0 12px;border:0;border-radius:11px;background:none;color:var(--d);font:600 14px/1 var(--body);cursor:pointer}
.appear button[aria-pressed="true"]{background:var(--sel);color:#fff}

/* ---------- article pages ---------- */
.ahero{padding-top:clamp(120px,15vh,170px);padding-bottom:clamp(40px,6vw,80px);overflow:clip}
.ahero .grid{display:grid;gap:clamp(36px,5vw,64px);align-items:center}
@media (min-width:1024px){.ahero .grid{grid-template-columns:1.15fr .85fr}}
.ahero h1{font-size:clamp(38px,5vw,76px);line-height:1;margin:16px 0 20px}
.ahero .phone{--pw:min(70vw,300px);margin-inline:auto}
.prose{max-width:740px;margin-inline:auto;padding-bottom:40px}
.prose h2{font-size:clamp(26px,2.6vw,36px);line-height:1.1;margin:56px 0 14px}
.prose p,.prose li{color:var(--d);font-size:18px;line-height:1.7;margin:0 0 16px}
.prose strong{color:var(--t)}
.prose ul,.prose ol{padding-inline-start:22px;margin:0 0 16px}
.prose a{color:var(--at);font-weight:600;overflow-wrap:anywhere}
.strip{display:flex;gap:10px;margin:30px 0 8px;direction:ltr}
.strip figure{margin:0;flex:1;min-width:0;aspect-ratio:9/16;border-radius:14px;background-size:cover;background-position:center 30%;position:relative;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.strip figure{overflow:hidden}
.strip figure figcaption{position:absolute;left:5px;bottom:5px;font:600 11.5px/1.25 var(--body);color:#fff;background:rgba(0,0,0,.66);padding:4px 6px;border-radius:7px;white-space:nowrap}
.strip figure figcaption b{display:block;font-weight:750}
.strip-cap{font-size:14.5px!important;color:var(--d)}
.ctabox{position:relative;max-width:740px;margin:40px auto 80px;border-radius:28px;padding:28px;overflow:hidden;color:#fff;background:radial-gradient(90% 70% at 10% 0%,rgba(168,156,255,.6),rgba(123,108,255,0) 70%),linear-gradient(165deg,#6655EE,#3B2FB0);display:grid;gap:14px;justify-items:start}
.ctabox h2{font-size:clamp(24px,2.6vw,34px);line-height:1.08}
.ctabox p{color:#fff}
.related{max-width:740px;margin:0 auto 60px;display:grid;gap:12px}
.related a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 18px;border-radius:18px;background:var(--p);box-shadow:inset 0 0 0 1px var(--hair);text-decoration:none;font-weight:650}
[dir="rtl"] .related a svg{transform:scaleX(-1)}
.glist{max-width:740px;margin:0 auto 20px;padding:0;list-style:none;display:grid;gap:14px}
.glist li{position:relative;padding:20px 22px;border-radius:22px;background:var(--p);box-shadow:inset 0 0 0 1px var(--hair)}
.glist h2{font-size:clamp(20px,2.2vw,26px);line-height:1.18;margin:0 0 8px}
.glist h2 a{color:inherit;text-decoration:none}
.glist h2 a::after{content:"";position:absolute;inset:0;border-radius:22px}
.glist h2 a:focus-visible{outline:none}
.glist h2 a:focus-visible::after{outline:3px solid var(--s2);outline-offset:3px}
.glist p{color:var(--d);font-size:17px;line-height:1.6;margin:0}
@media (hover:hover){.glist li:hover{box-shadow:inset 0 0 0 1px var(--s2)}}
.legal h1{font-size:clamp(38px,5vw,64px);line-height:1.02;margin:12px 0 14px}
.legal .meta{color:var(--d);font-size:15px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv,html.js .rv:not(.in){opacity:1;transform:none}
  .takes,.finale,.spin,.dev{height:auto}
  .takes .pin,.finale .pin,.spin .pin,.dev .pin{position:relative;height:auto;min-height:0;padding-block:96px 60px}
  .tstage{height:clamp(460px,86vh,780px)}
  .finale .pin{min-height:80svh}
  .steps li:not(.on),.orient li:not(.on){display:grid}
  .v-ai .out p{clip-path:none}
  .v-tp .row{transform:none}
  .dvid{display:none}
}

/* a screen under 501px tall (a phone on its side) cannot hold a pinned scene at a readable size: the scenes become their still
   versions, the same ones Reduce Motion shows, at full size and scrolled by the page (site.js turns the scroll motion off to match) */
@media (max-height:500px){
  .takes,.finale,.spin,.dev{height:auto}
  .takes .pin,.finale .pin,.spin .pin,.dev .pin{position:relative;height:auto;min-height:0;padding-block:96px 60px}
  .tstage{height:clamp(460px,86vh,780px)}
  .finale .pin{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
  .finale .after{position:relative;inset:auto}
  .steps li:not(.on),.orient li:not(.on){display:grid}
  .dvid{display:none}
}

/* ---------- pause control (WCAG 2.2.2): stops every loop on the page; html.paused is also what the script sets ---------- */
.mpause{position:fixed;inset-block-end:max(14px,env(safe-area-inset-bottom));inset-inline-end:14px;z-index:60;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:0;padding:0;background:var(--p);color:var(--t);box-shadow:inset 0 0 0 1px var(--hair),0 6px 20px -8px rgba(0,0,0,.45);cursor:pointer;opacity:.86;transition:opacity .3s var(--ease)}
.mpause:hover,.mpause:focus-visible{opacity:1}
.mpause .iy{display:none}.mpause[data-on="1"] .iy{display:block}.mpause[data-on="1"] .ip{display:none}
html:not(.js) .mpause{display:none}
@media (prefers-reduced-motion: reduce){.mpause{display:none}}
/* paused: every looping animation is stopped at its still frame, the same one Reduce Motion uses */
html.paused *,html.paused *::before,html.paused *::after{animation:none!important}
html.paused .rv,html.paused.js .rv:not(.in){opacity:1;transform:none}
html.paused .v-ai .out p{clip-path:none}
html.paused .v-tp .row{transform:none}

/* ---------- Arabic ---------- */
[lang="ar"] .eyebrow,[lang="ar"] .btn,[lang="ar"] .tag,[lang="ar"] .chipw{letter-spacing:0}
[lang="ar"] .hero h1{line-height:1.25;font-size:clamp(38px,4.8vw,80px)}
[lang="ar"] .h2,[lang="ar"] .takes h2{line-height:1.25}
[lang="ar"] .card h3,[lang="ar"] .tile h3{line-height:1.3}
[lang="ar"] .prl p{font-family:-apple-system,"SF Arabic","Geeza Pro",system-ui,sans-serif}
[lang="ar"] .faq summary{font-weight:700}
@media (min-width:1800px){:root{--wrap:1500px}.hero h1{font-size:96px}}
.shot{margin:30px auto 28px;max-width:var(--sw,520px);width:100%}
.shot img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 0 0 1px rgba(128,128,150,.28)}
.shot figcaption{font-size:14.5px;line-height:1.5;color:var(--d);margin-top:10px}

/* =====================================================================================================================
   TV Studio skin (2026-11 redesign). Guides, the guides hub and anything else on site.css wear the home's look: lime #C6F432 on
   ink #0B0A12, Archivo heavy italic display, square buttons, the guide H1 lettered on a cue card, Apple's real iPhone frame.
   Dark only: the appearance switch is retired with the old home. Overrides only; the rules above stay for reference.
   ===================================================================================================================== */
:root:not([data-theme="none"]){
  --g:#0B0A12; --p:#16151E; --r:#22212B; --t:#FFFFFF; --d:rgba(255,255,255,.74); --a:#C6F432; --on:#0B0A12; --at:#C6F432; --s2:#C6F432;
  --ln:rgba(255,255,255,.10); --ln2:rgba(255,255,255,.44); --hair:rgba(255,255,255,.14); --gl:#0B0A12; --paper:#F3F3F1;
  --disp:"Archivo", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --body:"Archivo", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color-scheme:dark;
}
[lang="ar"]{--body:-apple-system,"SF Arabic","Geeza Pro","Cairo",system-ui,sans-serif}
body{font-family:var(--body);background:var(--g)}
h1,h2,h3{font-weight:900;font-stretch:100%;letter-spacing:-.02em}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3{letter-spacing:0}
:focus-visible{outline-color:var(--a);border-radius:0}
.aurora,.ring,.appear,.mpause{display:none!important}
.logo .edge{display:none!important}

/* header: a flat strip on the studio floor, no glass */
.nav{position:absolute;inset:0 0 auto;max-width:none;height:auto;padding:16px clamp(16px,2.2vw,32px);border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transform:none!important}
.nav .links a,.nav .lang{border-radius:0;font-weight:500;font-size:16px}
.nav .links a:hover,.nav .lang:hover{background:transparent;text-decoration:underline;text-underline-offset:.22em}
.btn{border-radius:0;font-family:var(--body);min-height:44px}
.btn:hover{transform:none;background:#fff;color:var(--on)}
.badge{border-radius:0}.badge:hover{transform:none;opacity:.86}
.qr{border-radius:0;background:transparent;box-shadow:none;padding:0}
.qr img{border-radius:0}
.qr:hover{transform:none}

/* guide first screen: the question on a cue card, Cue's record screen in the real iPhone frame */
.ahero{padding-top:clamp(104px,12vh,140px)}
.ahero .eyebrow{color:var(--a);font:700 15px/1.2 var(--body)}
.ahero h1{display:block;width:fit-content;max-width:100%;background:var(--paper);color:var(--on);padding:.42em .55em .48em;margin:18px 0 26px;
  font-style:italic;font-weight:900;font-size:clamp(1.75rem,1rem + 2.2vw,2.75rem);line-height:1.02;rotate:-1.6deg;transform-origin:0 100%}
[dir="rtl"] .ahero h1{rotate:1.6deg;transform-origin:100% 100%;font-style:normal;line-height:1.3}
.ahero .lede{color:var(--d)}
.ahero .phone{--pw:min(64vw,290px);aspect-ratio:1470/3000;padding:0;border-radius:0;background:none;box-shadow:none}
.ahero .phone::after{content:"";position:absolute;inset:0;background:url(studio/bezel.png?v=ef4e94e112) 0 0/100% 100% no-repeat;pointer-events:none}
.ahero .phone .scr{position:absolute;left:5.102%;top:2.2%;width:89.796%;height:95.6%;border-radius:0;-webkit-mask:url(studio/mask.png?v=eff9fa8ec2) 0 0/100% 100% no-repeat;mask:url(studio/mask.png?v=eff9fa8ec2) 0 0/100% 100% no-repeat}
.ahero .phone .scr>:not(video):not(.still){display:none}
.ahero .phone .scr .still,.ahero .phone .scr video{background-position:center top;object-position:center top}

/* article body */
.prose h2{font-size:clamp(28px,2.8vw,40px);line-height:1.05;margin:64px 0 16px}
.prose p,.prose li{font-size:18px}
.prose a{color:var(--t);font-weight:600;text-decoration:underline;text-decoration-color:var(--a);text-decoration-thickness:.1em;text-underline-offset:.2em}
.prose a:hover{color:var(--a)}
.prose ol li::marker{color:var(--a);font-weight:800}
.prose ul li::marker{color:var(--a)}
.shot img{border-radius:0;box-shadow:none}
.strip figure{border-radius:0}
.faq{max-width:none}
.faq details{border-bottom:0;background:var(--p);margin-bottom:4px;padding-inline:20px}
.faq details:nth-child(even){background:#1C1B24}
.faq summary{font-family:var(--body);font-weight:800;font-stretch:88%}
.faq summary .pm{border-radius:0;box-shadow:none;background:var(--a)}
.faq summary .pm::before,.faq summary .pm::after{background:var(--on);border-radius:0}

/* call to action: a lime card held up */
.ctabox{border-radius:0;background:var(--a);color:var(--on);padding:clamp(26px,3vw,40px);rotate:-.8deg}
[dir="rtl"] .ctabox{rotate:.8deg}
.ctabox h2{font-size:clamp(28px,3vw,42px);color:var(--on)}
.ctabox p{color:var(--on)}
.ctabox .qr b,.ctabox .qr small{color:var(--on)}
.related a{border-radius:0;box-shadow:none;background:var(--p);font-weight:700}
.related a:hover{background:var(--a);color:var(--on)}
.related a svg{color:var(--a)}.related a:hover svg{color:var(--on)}

/* guides hub */
.glist{gap:4px}
.glist li{border-radius:0;box-shadow:none;background:var(--p)}
.glist li:nth-child(even){background:#1C1B24}
.glist h2 a::after{border-radius:0}
@media (hover:hover){.glist li:hover{box-shadow:none;background:var(--a)}.glist li:hover h2,.glist li:hover p{color:var(--on)}}

/* footer: the lime field */
.foot{background:var(--a);color:var(--on);border-top:0;padding-block:56px 40px;content-visibility:visible}
.foot nav a{color:var(--on);font-weight:600;border-radius:0}
.foot nav a:hover{background:transparent;color:var(--on);text-decoration:underline;text-underline-offset:.22em}
.foot .meta{color:var(--on)}
.foot .made{color:var(--on)}
.foot .logo::before{background:var(--on)}
.foot .logo::after{background:var(--a)}

/* fix round: Apple's frame playing the guide language's record screen, one left edge on the hub, the Arabic takes screen */
.ahero .s-phone{width:min(64vw,290px);margin-inline:auto}
.glist{margin-inline:0;max-width:760px}
.shot.shot-phone{max-width:280px}
.shot.shot-phone figcaption{margin-top:14px}
@media (max-width:400px){.ahero h1{padding:.34em .4em .38em;rotate:-1deg}}