/* Fonts are served from this site: no visitor data goes to font providers. */
@font-face{font-family:"Gambetta";src:url(/fonts/gambetta-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Gambetta";src:url(/fonts/gambetta-500i.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Gambetta";src:url(/fonts/gambetta-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Supreme";src:url(/fonts/supreme-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Supreme";src:url(/fonts/supreme-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Supreme";src:url(/fonts/supreme-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(/fonts/courierprime-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Courier Prime";src:url(/fonts/courierprime-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
:root{
  --teal:#17675a;
  --paper:#f1f3ef;
  --paper-2:#e6ebe6;
  --ink:#0f2320;
  --ink-2:#3b4e4a;
  --rule:color-mix(in oklch,var(--ink) 14%,transparent);
  --alarm:#c62828;
  --alarm-soft:#fbe4e1;
  --display:"Gambetta",Georgia,"Times New Roman",serif;
  --text:"Supreme",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --tape:"Courier Prime","Courier New",monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --expo:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;hanging-punctuation:first}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--text)}
.hero,.call,.notices,.private,.setup{overflow-x:clip}
::selection{background:var(--teal);color:var(--paper)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 40px,1320px);margin-inline:auto}
.skip{position:absolute;top:12px;inset-inline-start:20px;transform:translateY(-200%);background:var(--ink);color:var(--paper);padding:10px 14px;z-index:9}.skip:focus{transform:none}

/* header */
.top{display:flex;align-items:center;gap:20px;padding:22px 0}
.top .mark{margin-inline-end:auto}
.mark{display:inline-flex;align-items:center;gap:10px;font:600 1.15rem/1 var(--display);letter-spacing:-.01em;text-decoration:none}
.mark svg{width:26px;height:28px}
.top .links{display:flex;gap:28px;align-items:center;font-size:.95rem}
.top .links a{text-decoration:none;color:var(--ink-2)}
.top .links a:hover{color:var(--ink)}
.langs{display:flex;gap:2px;padding:3px;border:1px solid var(--rule);border-radius:10px;flex:none}
.langs a{display:grid;place-items:center;min-width:42px;min-height:40px;padding:0 6px;border-radius:7px;text-decoration:none;font:500 .9rem/1 var(--text);color:var(--ink-2);transition:background .2s var(--ease),color .2s var(--ease)}
.langs a[lang=he]{font-family:"Assistant",var(--text)}
.langs a:hover{color:var(--ink);background:color-mix(in oklch,var(--ink) 7%,transparent)}
.langs a[aria-current]{background:var(--ink);color:var(--paper)}
.play{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;background:var(--ink);color:var(--paper)!important;border-radius:8px;text-decoration:none;font-weight:500;transition:background .2s var(--ease),transform .2s var(--ease)}
.play:hover{background:var(--teal);transform:translateY(-1px)}

/* hero */
.hero{position:relative;padding:clamp(28px,6vw,72px) 0 clamp(64px,9vw,128px)}
.hero h1{font:500 clamp(3.1rem,1rem + 8.4vw,10.5rem)/.9 var(--display);letter-spacing:-.035em;margin:0;max-width:11ch;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero .deck{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(28px,4vw,56px);align-items:start}
.hero .deck p{grid-column:1/span 6;grid-row:1;font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.5;margin:0;color:var(--ink-2);text-wrap:pretty}
.hero .deck .act{grid-column:1/span 6;grid-row:2;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hero .deck .act small{color:var(--ink-2);font-size:.9rem}
.notif{--tilt:-2deg;grid-column:8/span 5;grid-row:1/span 2;align-self:start;background:#fff;border-radius:22px;box-shadow:0 1px 0 var(--rule),0 30px 60px -30px color-mix(in oklch,var(--ink) 45%,transparent);padding:22px 26px 24px;transform:rotate(var(--tilt))}
[dir=rtl] .notif{--tilt:2deg}
.notif .app{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--ink-2)}
.notif .app i{width:22px;height:22px;border-radius:6px;background:var(--alarm);display:grid;place-items:center}
.notif .app i svg{width:13px;height:13px}
.notif .app b{font-weight:500;color:var(--ink)}
.notif .app time{margin-inline-start:auto;font-variant-numeric:tabular-nums}
.notif h2{font:600 clamp(1.25rem,1rem + .8vw,1.65rem)/1.2 var(--text);letter-spacing:-.01em;margin:12px 0 6px}
.notif p{margin:0;color:var(--ink-2);font-size:1rem}
.hero.in .notif{animation:land .9s var(--expo) .5s both}
@keyframes land{from{opacity:0;transform:translateY(40px) rotate(var(--tilt))}to{opacity:1;transform:translateY(0) rotate(var(--tilt))}}
.hero .shield{position:absolute;inset-inline-end:-6vw;top:-4vw;width:44vw;max-width:640px;opacity:.07;pointer-events:none;z-index:-1}

/* the call */
.call{position:relative;height:340vh;background:var(--ink);color:var(--paper)}
.call .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center;width:min(100% - 40px,1320px);margin-inline:auto}
.call .lead{grid-column:1/span 12;align-self:end;padding-top:28px;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.call .lead .clock{flex:none}
.call-note{display:none}
.call .lead h2{min-width:0;font:500 clamp(1.8rem,1rem + 2.4vw,3.4rem)/1 var(--display);letter-spacing:-.02em;margin:0}
.call .lead .clock{font:700 clamp(1.4rem,1rem + 2vw,3rem)/1 var(--tape);font-variant-numeric:tabular-nums;color:color-mix(in oklch,var(--paper) 55%,transparent)}
.tape{grid-column:1/span 7;align-self:start;list-style:none;margin:0;padding:0;font:400 clamp(1rem,.9rem + .45vw,1.3rem)/1.45 var(--tape)}
.tape li{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px solid color-mix(in oklch,var(--paper) 14%,transparent);opacity:.16;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease),color .3s}
.tape li.on{opacity:1;transform:none}
.tape li.past{opacity:.45}
.tape time{color:color-mix(in oklch,var(--paper) 55%,transparent);font-variant-numeric:tabular-nums}
.tape .who{display:block;font-size:.8em;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in oklch,var(--paper) 55%,transparent)}
.tape li.hit time,.tape li.hit .who{color:#ff8a80}
.phones{grid-column:8/span 5;align-self:center;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.phone{position:relative;aspect-ratio:9/19;border-radius:30px;background:color-mix(in oklch,var(--paper) 7%,var(--ink));border:1px solid color-mix(in oklch,var(--paper) 18%,transparent);padding:44px 10px 10px;overflow:clip}
.phone::before{content:"";position:absolute;top:14px;left:50%;width:34%;height:16px;margin-left:-17%;border-radius:10px;background:var(--ink)}
.phone .label{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:.82rem;color:color-mix(in oklch,var(--paper) 60%,transparent)}
.phone .card{background:var(--paper);color:var(--ink);border-radius:14px;padding:12px 12px 13px;font-size:.78rem;line-height:1.35;opacity:0;transform:translateY(-24px) scale(.97);transition:opacity .5s var(--expo),transform .6s var(--expo)}
.phone .card b{display:block;font-size:.86rem;margin-bottom:3px}
.phone .card .h{display:flex;gap:6px;align-items:center;font-size:.7rem;color:var(--ink-2);margin-bottom:6px}
.phone .card .h i{width:12px;height:12px;border-radius:3px;background:var(--alarm)}
.phone .card .btn{display:inline-block;margin-top:8px;padding:5px 9px;border-radius:6px;background:var(--alarm);color:#fff;font-weight:500}
.phone .card.show{opacity:1;transform:none}
.phone.buzz{animation:buzz .5s linear}
@keyframes buzz{0%,100%{transform:none}20%{transform:translateX(-3px) rotate(-1deg)}40%{transform:translateX(3px) rotate(1deg)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.call .foot{grid-column:1/span 12;align-self:start;color:color-mix(in oklch,var(--paper) 62%,transparent);font-size:.95rem;max-width:60ch}

/* notices */
.notices{padding:clamp(80px,11vw,160px) 0 clamp(64px,8vw,112px)}
.notices h2,.private h2,.setup h2{font:500 clamp(2.2rem,1rem + 3.6vw,4.6rem)/.98 var(--display);letter-spacing:-.03em;margin:0 0 clamp(32px,4vw,56px);max-width:16ch;text-wrap:balance}
.list{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px}
.item{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:28px 0;border-top:1px solid var(--rule)}
.item h3{grid-column:1/span 5;font:600 clamp(1.35rem,1rem + 1vw,1.9rem)/1.15 var(--display);margin:0;letter-spacing:-.01em}
.item p{grid-column:6/span 6;margin:0;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.item.big h3{font-size:clamp(1.9rem,1rem + 2.6vw,3.3rem);line-height:1}
.names{grid-column:6/span 7;font:400 .98rem/1.9 var(--tape);color:var(--ink);margin:0}
.names span+span::before{content:" · ";color:var(--ink-2)}

/* private */
.private{background:var(--paper-2);padding:clamp(80px,10vw,144px) 0}
.private .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.private .never{grid-column:1/span 7;font:500 clamp(2rem,1rem + 3vw,4rem)/1.05 var(--display);letter-spacing:-.025em;margin:0}
.private .never s{text-decoration-thickness:.07em;text-decoration-color:var(--alarm);color:var(--ink-2)}
.private dl{grid-column:9/span 4;margin:0;font-size:1rem}
.private dt{font-weight:700;margin-top:18px}
.private dt:first-child{margin-top:0}
.private dd{margin:2px 0 0;color:var(--ink-2)}

/* setup */
.setup{padding:clamp(80px,11vw,160px) 0}
.two{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.two section{grid-column:span 6;border-top:2px solid var(--ink);padding-top:22px}
.two h3{font:600 1.5rem/1.2 var(--display);margin:0 0 16px}
.two ol{margin:0;padding-inline-start:1.3em;color:var(--ink-2)}
.two li{margin:0 0 10px;padding-inline-start:4px}
.setup .intro{margin:calc(-1 * clamp(16px,2vw,28px)) 0 clamp(28px,3vw,44px);font-size:clamp(1.1rem,1rem + .3vw,1.3rem);color:var(--ink-2);max-width:48ch}
.two li::marker{font:600 1rem var(--display);color:var(--ink)}
.closing{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;margin-top:clamp(56px,7vw,96px);padding-top:28px;border-top:1px solid var(--rule)}
.closing p{font:500 clamp(1.5rem,1rem + 1.6vw,2.4rem)/1.1 var(--display);margin:0;max-width:22ch;letter-spacing:-.015em}

footer{border-top:1px solid var(--rule);padding:28px 0 40px;font-size:.9rem;color:var(--ink-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}

/* pairing link view */
.pair{display:none}
body.pairing .site{display:none}
body.pairing .pair{display:block;min-height:100svh;padding:28px 0 48px}
.pair .wrap{max-width:640px}
.pair-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pair h1{font:500 clamp(2.6rem,1rem + 6vw,4.4rem)/1 var(--display);letter-spacing:-.03em;margin:44px 0 20px}
.pair p{font-size:1.3rem;line-height:1.5;color:var(--ink-2);margin:0 0 18px}
.pair .open{display:flex;align-items:center;justify-content:center;min-height:76px;margin:32px 0 14px;border-radius:14px;background:var(--teal);color:var(--paper);font:600 1.5rem/1 var(--text);text-decoration:none}
.pair .code{font:700 1.6rem/1 var(--tape);letter-spacing:.12em;color:var(--ink)}
.pair .small{font-size:1.05rem}

/* free */
.free{padding:clamp(80px,10vw,150px) 0;overflow-x:clip}
.free .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.free h2{grid-column:1/span 7;font:500 clamp(2.4rem,1rem + 4.2vw,5.4rem)/.95 var(--display);letter-spacing:-.03em;margin:0;text-wrap:balance}
.free .why{grid-column:9/span 4;display:grid;gap:18px;padding-top:.6em}
.free .why p{margin:0;color:var(--ink-2);text-wrap:pretty}
.free .why p:first-child{color:var(--ink);font-size:1.15rem;line-height:1.5}
@media (max-width:880px){.free h2,.free .why{grid-column:1/-1}.free .why{padding-top:8px}}

@media (max-width:880px){
  .top .links,.top .top-play{display:none}
  .top{gap:12px}
  .hero .deck p,.hero .deck .act{grid-column:1/-1}
  .notif{--tilt:0deg;grid-column:1/-1;grid-row:auto;width:100%;margin:16px 0 0}
  .hero .deck p,.hero .deck .act{grid-row:auto}
  [dir=rtl] .notif{--tilt:0deg}
  .hero .shield{width:90vw;inset-inline-end:-30vw;top:-10px}
  .call{height:300vh}
  .call .stage{grid-template-columns:minmax(0,1fr);gap:14px;align-content:center}
  .call .lead,.tape,.phones,.call .foot{grid-column:1}
  .call .lead{padding-top:16px}
  .tape li{grid-template-columns:max-content minmax(0,1fr);gap:8px;padding:7px 0;font-size:.92rem}
  .tape li:not(.on){display:none}
  .tape li.past{display:none}
  .tape li.last{display:grid}
  .phones{gap:12px;width:min(100%,360px)}
  .phone{aspect-ratio:auto;min-height:220px;border-radius:24px;padding-top:34px;display:flex;flex-direction:column}
  .phone .label{position:static;margin-top:auto;padding-top:10px}
  .call .foot{display:none}
  .call-note{display:block;background:var(--ink);color:color-mix(in oklch,var(--paper) 62%,transparent);font-size:.9rem;padding:4px 0 48px}
  .call-note p{margin:0 auto}
  .call .lead{flex-direction:column;align-items:flex-start;gap:6px}
  .call .lead .clock{font-size:1.25rem}
  .item h3,.item p,.names{grid-column:1/-1}
  .item{gap:10px}
  .private .never,.private dl{grid-column:1/-1}
  .two section{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color,border-color!important;transition-duration:.01ms!important}
  .hero.in .notif{opacity:1}
}

/* Hebrew and Russian: faces with the right scripts (fonts-he.css / fonts-ru.css), RTL details */
:root:lang(he){--display:"Rubik","Arial Hebrew",system-ui,sans-serif;--text:"Assistant","Arial Hebrew",system-ui,sans-serif}
:root:lang(ru){--display:"Literata",Georgia,"Times New Roman",serif;--text:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;--tape:"PT Mono","Courier New",monospace}
:lang(he) *{letter-spacing:normal!important}
:lang(he) em{font-style:normal}
:lang(he) .hero h1{line-height:1.02;font-weight:600;font-size:clamp(2.8rem,1rem + 6.6vw,8.4rem)}
:lang(he) .hero h1 em{font-style:normal}
:lang(he) .tape{font-family:var(--text);font-size:clamp(1.05rem,.95rem + .45vw,1.35rem)}
:lang(he) .tape time,:lang(he) .call .lead .clock{font-family:"Courier Prime","Courier New",monospace}
:lang(he) .tape .who{font-weight:600}
:lang(ru) .hero h1{font-size:clamp(2.7rem,1rem + 6.6vw,8.6rem);max-width:13ch}
:lang(ru) .notices h2,:lang(ru) .private h2,:lang(ru) .setup h2{max-width:18ch}
.names{unicode-bidi:isolate}
:lang(he) bdi{white-space:nowrap}