/* getkoraai.com. Shared by every language page (tools/build_site.py). */
:root{
  --ink:#0B0D18;
  --ink-2:#11142A;
  --surface:#161A33;
  --app:#0F1124;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);
  --paper:#F3F1F9;
  --muted:#98A0BD;
  --said:#8B7BFF;
  --done:#FFB067;
  --shell:min(1140px,100% - 40px);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;
}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.025em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}

:focus-visible{outline:2px solid var(--done);outline-offset:3px;border-radius:4px}

.shell{width:var(--shell);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--said);color:#0B0D18;padding:12px 18px;z-index:100;font-weight:600}
.skip:focus{left:12px;top:12px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px;
}
.eyebrow b{color:var(--done);font-weight:500}

/* Suggests the visitor's own language; site.js fills and reveals it. */
.langbar{background:linear-gradient(90deg,rgba(139,123,255,.18),rgba(255,176,103,.12));border-bottom:1px solid var(--line-2);font-size:14.5px}
.langbar .shell{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.langbar a{color:var(--paper)}
.langbar a b{color:var(--done);font-weight:600;white-space:nowrap}
.langbar button{background:none;border:0;color:var(--muted);font-size:22px;line-height:1;padding:6px 4px;cursor:pointer}
.langbar button:hover{color:var(--paper)}

.topbar{position:sticky;top:0;z-index:60;background:rgba(11,13,24,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.topbar .shell{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.mark{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.mark span{width:26px;height:26px;border-radius:50%;background:url('/favicon.png') center/cover;box-shadow:0 0 0 1px var(--line),0 0 22px rgba(139,123,255,.45)}
.topnav{display:flex;align-items:center;gap:26px}
.navlink{font-size:14.5px;font-weight:500;color:var(--muted);transition:color .18s}
.navlink:hover{color:var(--paper)}
.badge img{height:42px;width:auto}
@media(max-width:860px){.navlink{display:none}.topnav{gap:12px}}
@media(max-width:380px){.badge img{height:36px}}

.langmenu{position:relative}
.langmenu summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--muted);
  padding:8px 10px;border:1px solid var(--line);border-radius:10px;transition:color .18s,border-color .18s
}
.langmenu summary::-webkit-details-marker{display:none}
.langmenu summary:hover,.langmenu[open] summary{color:var(--paper);border-color:rgba(255,255,255,.22)}
.langmenu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.langmenu ul{
  position:absolute;right:0;top:calc(100% + 8px);min-width:170px;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.9);z-index:70
}
.langmenu a{display:block;padding:8px 12px;border-radius:9px;font-size:14.5px;color:var(--muted)}
.langmenu a:hover{background:rgba(255,255,255,.05);color:var(--paper)}
.langmenu a[aria-current]{color:var(--done)}

.band,.hero{scroll-margin-top:84px}
.band{padding:96px 0;border-top:1px solid var(--line-2);position:relative}
.band-tight{padding:72px 0}
.lede{font-size:19px;color:var(--muted);max-width:56ch;margin-top:18px}
.h-sec{font-size:clamp(32px,4.6vw,50px)}
.h-priv{font-size:clamp(27px,3.4vw,36px)}
.h-ios{font-size:clamp(26px,3.2vw,34px)}
.h-priv+.lede,.h-ios+.lede{margin-top:16px}
@media(max-width:640px){.band{padding:72px 0}.lede{font-size:17.5px}}

/* Soft colour behind alternating sections, so the long dark page has rhythm. */
.glow-a::before,.glow-b::before{content:'';position:absolute;pointer-events:none;inset:0;z-index:-1}
.glow-a::before{background:radial-gradient(60% 50% at 0% 0%,rgba(139,123,255,.08),transparent 70%)}
.glow-b::before{background:radial-gradient(55% 50% at 100% 10%,rgba(255,176,103,.06),transparent 70%)}
main{position:relative;z-index:0}

/* Hero */
.hero{padding:56px 0 64px;position:relative;overflow:hidden}
/* Both glows are painted across the whole hero and fade out well inside it.
   (They used to sit in offset boxes whose gradients hadn't finished fading at
   the box edge, which showed as a vertical seam beside the CTA on phones.) */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(55% 45% at 12% 18%,rgba(139,123,255,.17),transparent 100%),
    radial-gradient(45% 40% at 88% 55%,rgba(255,176,103,.08),transparent 100%);
}
.hero .shell{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(44px,6.4vw,78px);max-width:13ch}
.hero h1 em{font-style:normal;color:var(--done)}
.hero-sub{font-size:19.5px;color:var(--muted);max-width:50ch;margin-top:20px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:30px}
.badge-lg img{height:58px;width:auto;transition:transform .18s}
.badge-lg:hover img{transform:translateY(-2px)}
.price-line{font-size:15px;color:var(--muted);line-height:1.55}
.price-line b{color:var(--paper);font-weight:600}
.lang-note{margin-top:22px;font-size:14px;color:var(--muted)}
@media(max-width:900px){
  .hero{padding:40px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-sub{font-size:18px}
}

/* The phone in the hero: Kora's chat, drawn in HTML so it's sharp and in the
   page's language. site.js plays the script through it. */
.phone{
  justify-self:center;width:min(310px,82vw);aspect-ratio:9/18.5;padding:10px;border-radius:46px;
  background:linear-gradient(160deg,#23274a,#07080f 45%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 100px -45px rgba(0,0,0,.95),0 0 120px -30px rgba(139,123,255,.45);
  transform:rotate(1.5deg);
}
.ph-screen{
  position:relative;height:100%;border-radius:37px;overflow:hidden;background:var(--app);
  display:flex;flex-direction:column;
}
.ph-island{
  align-self:center;margin-top:12px;display:flex;align-items:center;gap:8px;
  background:#000;border-radius:999px;padding:7px 14px 7px 11px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#cfd3ea;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);max-width:88%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.pip{flex:none;width:8px;height:8px;border-radius:50%;background:var(--said);animation:pulse 2.4s ease-out infinite}
.phone.is-done .pip{background:var(--done);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(139,123,255,.55)}70%{box-shadow:0 0 0 10px rgba(139,123,255,0)}100%{box-shadow:0 0 0 0 rgba(139,123,255,0)}}
.ph-head{display:flex;align-items:center;gap:9px;padding:14px 18px 10px;font-family:var(--display);font-weight:800;font-size:15px;border-bottom:1px solid var(--line-2)}
.ph-menu{width:14px;height:10px;border-top:2px solid var(--muted);border-bottom:2px solid var(--muted);position:relative;margin-right:4px}
.ph-menu::after{content:'';position:absolute;left:0;right:0;top:2px;border-top:2px solid var(--muted)}
.ph-orb{flex:none;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c9c0ff,var(--said) 55%,#4b3fb8);box-shadow:0 0 14px rgba(139,123,255,.6)}
.ph-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:14px 14px 10px;min-height:0}
/* A quiet "today" card at the top of the chat, drawn as placeholder bars so
   it needs no words in any language. */
.ph-today{margin-bottom:auto;padding:12px;border-radius:16px;background:#151936;border:1px solid var(--line-2);display:grid;gap:9px}
.ph-today .sk-t{width:42%;height:9px;border-radius:5px;background:rgba(255,176,103,.45)}
.ph-today .sk-row{display:flex;align-items:center;gap:8px}
.ph-today .sk-row i{flex:none;width:14px;height:14px;border-radius:5px;background:rgba(139,123,255,.45)}
.ph-today .sk-row span{height:7px;border-radius:4px;background:rgba(255,255,255,.12)}
@media(max-width:900px){.ph-today{display:none}}
.b-user{
  align-self:flex-end;max-width:86%;background:#7C5CFF;color:#fff;
  border-radius:18px 18px 5px 18px;padding:10px 13px;font-size:14px;line-height:1.45;min-height:40px
}
.b-kora{
  align-self:flex-start;max-width:90%;background:#1B1F3D;border:1px solid var(--line-2);
  border-radius:18px 18px 18px 5px;padding:10px 13px;font-size:14px;line-height:1.45
}
.b-dots,.b-done{display:none}
.phone.is-working .b-dots{display:flex}
.phone.is-done .b-done{display:flex}
.b-dots{gap:5px;padding:14px 16px}
.b-dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:dot 1s infinite}
.b-dots i:nth-child(2){animation-delay:.15s}.b-dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.b-done{align-items:center;gap:10px;color:var(--done);font-family:var(--mono);font-size:12.5px;animation:pop .4s cubic-bezier(.22,.7,.3,1)}
.b-done .tick{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--done);display:grid;place-items:center;font-size:11px}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.phone.is-typing .b-user::after{content:'';display:inline-block;width:2px;height:1em;background:#fff;margin-left:2px;vertical-align:-.15em;animation:caret 1s step-end infinite}
@keyframes caret{50%{opacity:0}}
.ph-input{
  display:flex;align-items:center;justify-content:space-between;margin:0 12px 16px;padding:10px 8px 10px 16px;
  border-radius:999px;background:#1B1F3D;border:1px solid var(--line-2);color:var(--muted);font-size:13px
}
.ph-mic{width:28px;height:28px;border-radius:50%;background:var(--said);position:relative}
.ph-mic::after{content:'';position:absolute;left:11px;top:7px;width:6px;height:10px;border-radius:3px;background:#fff}
@media(max-width:900px){.phone{width:min(290px,80vw);aspect-ratio:auto;height:440px;transform:none}}

.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:56px}
.trust li{
  font-size:13.5px;color:var(--muted);padding:8px 14px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.02)
}
.trust li:first-child{color:var(--paper);border-color:rgba(255,176,103,.4)}
@media(max-width:900px){.trust{margin-top:40px}}

/* Why */
.why{max-width:74ch}
.why p+p{margin-top:22px}
.why .big{font-family:var(--display);font-size:clamp(24px,3.2vw,34px);font-weight:600;line-height:1.32;letter-spacing:-.02em;color:var(--paper);text-wrap:balance}
.why .big b{color:var(--done);font-weight:600}

/* What you say → what happens */
.pairs{margin-top:52px;border-top:1px solid var(--line-2)}
.pair{
  display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center;
  padding:22px 4px;border-bottom:1px solid var(--line-2);transition:background .2s
}
.pair:hover{background:rgba(255,255,255,.015)}
.pair-said{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.015em}
.pair-said i{font-style:normal;color:var(--said)}
.pair-extra{color:var(--muted);font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:0}
.pair-arrow{font-family:var(--mono);color:var(--muted);font-size:14px}
.pair-done{font-family:var(--mono);font-size:14.5px;color:var(--done);line-height:1.5}
@media(max-width:760px){
  .pair{grid-template-columns:1fr;gap:9px;padding:20px 2px}
  .pair-arrow{display:none}
  .pair-done{padding-left:16px;border-left:2px solid rgba(255,176,103,.35)}
}

/* Voice notes */
.vn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:48px}
@media(max-width:820px){.vn-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.vn-card{padding:22px 18px}.vn-thread{padding:14px}}
.vn-card{
  border:1px solid var(--line);border-radius:22px;padding:28px 26px;
  background:linear-gradient(180deg,var(--ink-2),var(--surface));
  display:flex;flex-direction:column;gap:22px;box-shadow:0 30px 70px -45px rgba(0,0,0,.9)
}
.vn-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--said)}
.vn-thread{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;background:var(--app);border:1px solid var(--line-2)}
.vn-note{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:18px;max-width:92%}
.vn-in{align-self:flex-start;background:#1F2A26;border:1px solid rgba(90,200,140,.18)}
.vn-out{align-self:flex-start;background:#1B1F3D;border:1px solid rgba(255,176,103,.28)}
.vn-play{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:rgba(255,255,255,.1);padding-left:2px}
.vn-out .vn-play{background:var(--done);color:#231303}
.vn-wave{display:flex;align-items:center;gap:2px;height:26px;flex:1;min-width:0;overflow:hidden}
.vn-wave i{flex:none;width:3px;border-radius:2px;background:rgba(160,230,190,.7)}
.vn-out .vn-wave i{background:rgba(255,176,103,.8)}
.vn-len{flex:none;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.vn-shared{align-self:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vn-summary{display:flex;flex-direction:column;gap:10px;max-width:100%}
.vn-reply{font-size:13.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:10px}
.vn-send{display:inline-block;margin-left:4px;padding:3px 10px;border-radius:999px;background:var(--done);color:#231303;font-weight:600;font-size:12px}
.vn-actions{align-self:flex-start}
.vn-actions .vn-send{margin:0}
.vn-thread .b-user{font-size:14px}
.vn-cap{font-size:15.5px;color:var(--muted)}

/* Screenshots: four across on desktop, a swipe row on phones. */
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:48px}
.shot{margin:0;position:relative}
.frame{
  padding:7px;border-radius:30px;background:linear-gradient(160deg,#23274a,#07080f 45%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -36px rgba(0,0,0,.9)
}
.frame img{width:100%;height:auto;border-radius:24px;background:var(--app)}
.shot figcaption{margin-top:14px;font-size:14.5px;color:var(--muted);text-align:center}
@media(max-width:900px){
  /* Bleed to the screen edges, keep the page gutter as padding (the shell's
     gutter is 20px on each side), and let the next card peek in. */
  .shots,.revs{
    display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:-20px;padding:0 20px 6px;scroll-padding-inline:20px
  }
  .shots::after,.revs::after{content:'';flex:0 0 4px}
  .shots::-webkit-scrollbar,.revs::-webkit-scrollbar{display:none}
  .shot,.rev{scroll-snap-align:start;flex:0 0 min(64vw,260px)}
  .rev{flex-basis:min(80vw,330px)}
}

/* Chat assistant vs Kora */
.versus{margin-top:48px;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.vrow{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line-2)}
.vrow:last-child{border-bottom:0}
.vcell{padding:20px 24px;font-size:15.5px}
.vcell:first-child{color:var(--muted);border-right:1px solid var(--line-2)}
.vcell:last-child{background:linear-gradient(90deg,rgba(255,176,103,.035),transparent)}
.vhead{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;background:rgba(255,255,255,.025)}
.vhead .vcell{color:var(--muted);padding-top:15px;padding-bottom:15px}
.vhead .vcell:last-child{color:var(--done)}
.vtag{display:none}
@media(max-width:640px){.vcell{padding:15px 17px;font-size:14.5px}}
@media(max-width:560px){
  .vrow{grid-template-columns:1fr}
  .vhead{display:none}
  .vcell{border-right:0!important}
  .vtag{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:5px}
  .vcell:first-child{border-bottom:1px solid var(--line-2);padding-bottom:13px}
  .vcell:first-child .vtag{color:var(--muted);opacity:.75}
  .vcell:last-child .vtag{color:var(--done)}
}

/* The long list */
.caps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:48px}
@media(max-width:1060px){.caps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.caps{grid-template-columns:1fr}}
.cap{
  background:var(--ink-2);padding:24px 22px;border:1px solid var(--line-2);border-radius:18px;
  transition:border-color .2s,transform .2s,background .2s
}
.cap:hover{border-color:rgba(139,123,255,.35);transform:translateY(-3px);background:linear-gradient(180deg,rgba(139,123,255,.06),transparent 60%),var(--ink-2)}
.cap-icon{width:26px;height:26px;fill:none;stroke:var(--said);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.cap h3{font-size:18px;font-weight:600;letter-spacing:-.015em}
.cap p{margin-top:9px;font-size:15px;color:var(--muted)}
.cap .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--said);margin:0 0 8px}
@media(max-width:520px){
  .cap{display:grid;grid-template-columns:26px 1fr;column-gap:14px;padding:18px}
  .cap-icon{grid-row:1 / span 3;margin:2px 0 0}
  .cap:hover{transform:none}
}

/* Reviews */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:48px}
.rev{
  position:relative;border:1px solid var(--line);border-radius:18px;padding:26px 24px;background:var(--ink-2);
  display:flex;flex-direction:column;gap:15px;margin:0
}
.rev-stars{color:var(--done);font-size:13px;letter-spacing:.2em;line-height:1}
.rev blockquote{margin:0;font-size:16px;line-height:1.62}
.rev-orig{font-size:13.5px;color:var(--muted);line-height:1.5}
.rev-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px}
.rev-av{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:15px;color:#0B0D18;
  background:linear-gradient(140deg,var(--said),var(--done))
}
.rev-name{font-size:14.5px;font-weight:600;display:block}
.rev-meta{display:block;white-space:nowrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){
  /* Same swipe row as .shots; restated here because .revs' grid rule above
     comes later in the file than the shared block. */
  .revs{display:flex}
}

/* Plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin-top:48px}
.plan{border:1px solid var(--line);border-radius:22px;padding:32px 30px;background:var(--ink-2)}
.plan-hi{
  border-color:rgba(255,176,103,.42);
  background:linear-gradient(180deg,rgba(255,176,103,.08),transparent 55%),var(--ink-2);
  box-shadow:0 30px 80px -50px rgba(255,176,103,.45)
}
.plan h3{font-size:14px;font-family:var(--mono);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.plan-hi h3{color:var(--done)}
.amount{font-family:var(--display);font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.03em;margin-top:14px;line-height:1.15}
.plan-note{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.55}
.plan ul{margin-top:24px;display:grid;gap:12px}
.plan li{display:flex;gap:11px;font-size:15.5px;color:var(--paper)}
.plan li::before{content:'✓';color:var(--muted);flex:none;font-family:var(--mono)}
.plan-hi li::before{content:'+';color:var(--done)}

/* Privacy */
.privacy{border:1px solid var(--line);border-radius:22px;padding:40px;background:var(--ink-2);display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:center}
.privacy ul{display:grid;gap:13px}
.privacy li{display:flex;gap:12px;font-size:15.5px;color:var(--muted)}
.privacy li b{color:var(--paper);font-weight:600}
.privacy .tick{flex:none;color:var(--done);font-family:var(--mono)}
@media(max-width:820px){.privacy{grid-template-columns:1fr;padding:28px 24px}}

/* FAQ */
.faq{margin-top:44px;border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  cursor:pointer;padding:22px 44px 22px 2px;font-family:var(--display);
  font-size:19px;font-weight:600;letter-spacing:-.015em;position:relative;list-style:none;transition:color .18s
}
.faq summary:hover{color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:20px;font-family:var(--mono);font-size:21px;color:var(--muted)}
.faq details[open] summary::after{content:'−';color:var(--done)}
.faq .ans{padding:0 44px 24px 2px;color:var(--muted);font-size:16px}
.faq .ans a{color:var(--said);text-decoration:underline}

/* iPhone waitlist */
.ios{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;max-width:560px}
.ios input[type=email]{
  flex:1 1 240px;background:var(--ink);border:1px solid var(--line);color:var(--paper);
  border-radius:11px;padding:14px 16px;font:inherit;font-size:16px
}
.ios input::placeholder{color:var(--muted)}
.btn{
  border:0;border-radius:11px;padding:14px 26px;font:inherit;font-weight:600;font-size:16px;
  background:var(--done);color:#231303;cursor:pointer;transition:filter .18s
}
.btn:hover{filter:brightness(1.08)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ios-msg{margin-top:13px;font-size:14.5px;color:var(--done);min-height:1.3em}

/* Final call */
.final{text-align:center;padding:120px 0;overflow:hidden}
.final::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(40% 55% at 50% 30%,rgba(139,123,255,.14),transparent 70%)}
.final .orb{width:76px;height:76px;border-radius:50%;margin:0 auto 26px;object-fit:cover;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 40px rgba(139,123,255,.35)}50%{box-shadow:0 0 80px rgba(139,123,255,.6)}}
.final h2{font-size:clamp(34px,5vw,56px)}
.final .lede{margin:18px auto 0;text-align:center}
.final .cta-row{justify-content:center}

/* Footer */
.foot{border-top:1px solid var(--line-2);padding:44px 0 110px;color:var(--muted);font-size:14.5px}
.foot .shell{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:center}
.foot a{transition:color .18s}
.foot a:hover{color:var(--paper)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot .langs{font-size:13.5px;width:100%;display:flex;flex-wrap:wrap;gap:8px 16px;padding-top:12px;border-top:1px solid var(--line-2)}
.foot .langs [aria-current]{color:var(--paper)}
@media(min-width:861px){.foot{padding-bottom:44px}}

/* Phones only: a Play button that follows once the hero's has scrolled away. */
.stick{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:none;align-items:center;gap:12px;
  padding:14px 18px;border-radius:16px;background:var(--done);color:#231303;font-weight:600;font-size:16px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.8);transform:translateY(140%);transition:transform .3s cubic-bezier(.22,.7,.3,1)
}
.stick .stick-go{margin-left:auto;font-family:var(--mono)}
.stick.show{transform:none}
@media(max-width:860px){.stick{display:flex}}

/* Analytics consent */
.consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:420px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.85);display:none
}
.consent.show{display:block;animation:slideUp .4s cubic-bezier(.22,.7,.3,1) both}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.consent p{font-size:14px;color:var(--muted);line-height:1.55}
.consent a{color:var(--said);text-decoration:underline}
.consent .row{display:flex;gap:11px;margin-top:17px;flex-wrap:wrap}
.consent button{
  border-radius:10px;padding:11px 20px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--paper);transition:border-color .18s
}
.consent button:hover{border-color:var(--muted)}
.consent .ok{background:var(--done);border-color:var(--done);color:#231303}

.rise{opacity:0;transform:translateY(14px)}
.rise.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.7,.3,1)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
  .phone{transform:none}
}