:root{
  --brand:#2F6FA3; --brand-2:#245782; --brand-soft:#EAF3FA; --brand-line:#CFE3F3;
  --yellow:#FFE08A; --yellow-soft:#FFF6DB; --gold:#6E5200;
  --ink:#1d2a33; --ink-2:#4f5d67; --line:#e7ebee; --warm:#FBF8F0; --bg:#fff;
  --teal:#0b6e8a; --teal-bg:#e0f2f8; --violet:#5b2fb0; --violet-bg:#efe8fb;
  --red:#A3241B; --red-bg:#FDE8E6; --amber:#7a4b00; --amber-bg:#FFF0D1; --green:#1E6B34; --green-bg:#E4F3E8;
  --radius:20px; --shadow:0 10px 30px rgba(20,40,50,.10);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Noto Sans Hebrew","Arial Hebrew",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--brand-2)}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;margin:0}
p{margin:0}
figure{margin:0}
:focus-visible{outline:3px solid #4fb9ff;outline-offset:3px;border-radius:10px}
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:20px}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:10px;z-index:50}
.skip:focus{inset-inline-start:8px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;font-weight:650;font-size:17px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s;font-family:inherit}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(47,111,163,.32)}
.btn-primary:hover{background:var(--brand-2)}
.btn-soft{background:var(--yellow);color:#3d2e00}
.btn-soft:hover{background:#ffd666}
.btn-ghost{background:var(--brand-soft);color:var(--brand-2)}
.btn-ghost:hover{background:var(--brand-line)}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px}
.btn-block{width:100%}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:760;font-size:22px;letter-spacing:-.02em;margin-inline-end:auto}
.brand img{border-radius:10px;box-shadow:0 2px 6px rgba(47,111,163,.3)}
.topnav{display:none;gap:24px}
.topnav a{color:var(--ink-2);text-decoration:none;font-weight:550;font-size:15px}
.topnav a:hover{color:var(--brand)}

/* hero */
.hero{background:radial-gradient(120% 80% at 100% 0%,var(--yellow-soft) 0,transparent 55%),linear-gradient(180deg,var(--brand-soft),#fff 85%);padding:32px 0 44px;overflow:hidden}
.hero-in{display:grid;gap:30px;align-items:center}
.eyebrow{margin:0 0 10px;color:var(--brand);font-weight:700;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase}
h1{font-size:clamp(38px,10vw,62px);font-weight:800}
.nw{white-space:nowrap}
.hl{background:linear-gradient(transparent 62%,var(--yellow) 62%);padding-inline:2px}
.lead{font-size:18px;color:var(--ink-2);margin:16px 0 24px;max-width:34em}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.cta .btn{flex:1 1 140px;padding:0 16px;white-space:nowrap}
.fine{font-size:14px;color:var(--ink-2);margin:14px 0 0}

/* phone + chat */
.hero-art{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.phone{width:min(370px,100%);background:#F6F4EE;border:9px solid #1f2b33;border-radius:36px;box-shadow:0 30px 60px rgba(20,40,50,.22);display:flex;flex-direction:column;overflow:hidden;font-size:14px;position:relative}
.phone.flat{border-width:1px;border-color:#e3ded1;border-radius:24px;box-shadow:var(--shadow);width:100%}
.ph-head{display:flex;align-items:center;gap:8px;padding:12px 12px 10px;background:#fff;border-bottom:1px solid #ece7da}
.ph-back{font-size:26px;line-height:1;color:var(--brand);padding-inline:2px 4px}
.ph-title{display:flex;flex-direction:column;min-width:0;flex:1}
.ph-title b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-title small{color:var(--ink-2);font-size:12px}
.stack{display:flex}
.stack .av{width:24px;height:24px;font-size:9.5px;border:2px solid #fff;margin-inline-start:-7px}
.ph-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;background:var(--brand-soft);color:var(--brand-2);font-size:12.5px;font-weight:600}
.pri{background:var(--red-bg);color:var(--red);border-radius:999px;padding:1px 8px;font-size:11px}
.feed{display:flex;flex-direction:column;gap:9px;padding:12px 10px 14px;height:500px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.feed.static{height:auto;overflow:visible}
.ph-compose{display:flex;align-items:center;justify-content:space-between;margin:0 10px 12px;padding:9px 14px;background:#fff;border:1px solid #e6e1d4;border-radius:999px;color:#8a949b;font-size:13.5px}
.ph-compose .send{color:var(--brand)}

.av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff;background:#7a8a96;letter-spacing:0}
.av-maya,.av-tamar{background:#2F6FA3}.av-daniel,.av-avi{background:#c2603a}.av-shira,.av-hadas{background:#2f8f6e}.av-yoni{background:#8a5a9e}
.av-atlas,.av-kesher{background:linear-gradient(135deg,#6d3fc0,#2F6FA3);font-size:13px}

.m{display:flex;gap:7px;align-items:flex-end;max-width:92%}
.m .b{background:#fff;border-radius:16px;border-end-start-radius:5px;padding:7px 11px 8px;box-shadow:0 1px 1px rgba(0,0,0,.06);min-width:0}
.m.mine{align-self:flex-end;flex-direction:row-reverse}
.m.mine .av{display:none}
.m.mine .b{background:#DCEBF7;border-end-start-radius:16px;border-end-end-radius:5px}
.m.ai .b{background:#F4EFFC;border:1px solid #e3d8f7}
.m.urg .b{border-inline-start:4px solid #d7382c}
.meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;font-size:11.5px;margin-bottom:2px}
.meta b{font-size:12.5px;color:var(--ink)}
.meta .role{color:#6b7780}
.meta time{color:#8a949b;margin-inline-start:auto}
.aitag{background:var(--violet);color:#fff;border-radius:5px;padding:0 5px;font-size:10px;font-weight:700;line-height:1.6}
.utag{background:#d7382c;color:#fff;border-radius:5px;padding:0 5px;font-size:10px;font-weight:800;letter-spacing:.04em;line-height:1.6}
.m p{font-size:14px;line-height:1.42;overflow-wrap:anywhere}
.m p.tr{font-size:12.5px;color:#6b7780;font-style:italic;margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.chip{display:inline-block;border-radius:9px;padding:3px 8px;font-size:11.8px;font-weight:600;line-height:1.35;max-width:100%}
.c-due{background:var(--brand-soft);color:var(--brand-2);border:1px solid var(--brand-line)}
.c-wait{background:var(--amber-bg);color:var(--amber);border:1px solid #f5dca6}
.c-urgent{background:var(--red-bg);color:var(--red);border:1px solid #f6c4bf}
.c-recur{background:var(--teal-bg);color:var(--teal);border:1px solid #bfe3ef}
.file{display:flex;align-items:center;gap:8px;margin-top:7px;background:#F3F5F7;border:1px solid #e1e6ea;border-radius:11px;padding:6px 9px;font-size:12.5px;min-width:0}
.fi{flex:none;background:#d7382c;color:#fff;font-size:9px;font-weight:800;border-radius:4px;padding:3px 4px}
.fn{font-weight:600;overflow-wrap:anywhere;min-width:0}
.fm{color:#6b7780;margin-inline-start:auto;white-space:nowrap}
.recap{display:flex;flex-direction:column;gap:3px;background:linear-gradient(135deg,#f3ecfd,#eaf3fa);border:1px solid #dccdf5;border-radius:12px;padding:8px 10px;font-size:13px;line-height:1.42}
.recap b{color:var(--violet);font-size:13px}
.day{align-self:center;font-size:11.5px;font-weight:650;color:#5b6770;background:#E9E5DA;border-radius:999px;padding:3px 11px;margin:4px 0}
.sys{align-self:center;text-align:center;font-size:12px;font-weight:600;border-radius:10px;padding:4px 10px;max-width:94%}
.sys-done,.sys-final{background:var(--green-bg);color:var(--green)}
.sys-final{font-weight:700}
.sys-info{background:#ECEFF2;color:#4f5d67}
[dir="rtl"] .m p,[lang="he"]{text-align:start}

/* animation states (added by script.js only when motion is allowed) */
.feed.anim{overflow:hidden}
.feed.anim > *{display:none}
.feed.anim > .show{display:flex;animation:pop .35s ease-out}
.feed.anim > .day.show,.feed.anim > .sys.show{display:block}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.typing{display:flex;align-items:center;gap:7px;margin:-6px 10px 8px;font-size:12px;color:#6b7780}
.typing[hidden]{display:none}
.typing .av{width:22px;height:22px;font-size:9px}
.typing em{font-style:normal}
.dots{display:inline-flex;gap:3px;background:#fff;border-radius:12px;padding:7px 9px;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.dots i{width:6px;height:6px;border-radius:50%;background:#9aa5ad;animation:blink 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.cap{font-size:12.5px;color:var(--ink-2);text-align:center;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.replay{font:inherit;font-weight:650;color:var(--brand-2);background:var(--brand-soft);border:0;border-radius:999px;padding:4px 12px;cursor:pointer}

/* sections */
.section{padding:56px 0}
.section-warm{background:var(--warm)}
h2{font-size:clamp(28px,7vw,40px);font-weight:780}
.sub{color:var(--ink-2);font-size:17px;margin:10px 0 28px}

/* how it works */
.how{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.how li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 20px 20px;box-shadow:0 2px 8px rgba(20,40,50,.04)}
.num{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;margin-bottom:12px}
.how li:nth-child(2) .num{background:var(--yellow);color:#3d2e00}
.how li:nth-child(3) .num{background:var(--violet)}
.how h3{font-size:19px;margin-bottom:6px}
.how p{color:var(--ink-2);font-size:15.5px}

/* feature rows */
.row{display:grid;gap:22px;align-items:center;margin-bottom:44px}
.row-copy h3{font-size:24px;margin:4px 0 8px}
.row-copy p{color:var(--ink-2);font-size:16.5px;max-width:30em}
.kicker{font-weight:800;color:var(--brand);font-size:14px;letter-spacing:.08em}
.screen{background:#fff;border:1px solid #e6e1d4;border-radius:24px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px;justify-self:center;font-size:14px;min-width:0}
.sc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 10px;border-bottom:1px solid #efeae0}
.sc-head b{font-size:15.5px}
.sc-head small{color:var(--ink-2);font-size:12px}
.tl{display:flex;flex-direction:column;gap:8px}
.tl-i{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:#F8F7F3;min-width:0}
.tl-i > div:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.tl-i b{font-size:14px}
.tl-i small{color:#6b7780;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-i .typ{color:var(--green);font-style:italic}
.tl-i.done b{text-decoration:line-through;color:#6b7780}
.ck{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #b9c3ca;display:grid;place-items:center;font-size:12px;color:#fff}
.done .ck{background:#2f8f4e;border-color:#2f8f4e}
.tl-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.tl-r small{font-size:11px;color:var(--brand-2);font-weight:600}
.unread{background:var(--brand);color:#fff;border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;font-size:11.5px;font-weight:700;padding:0 6px}
.badge-red{background:#d7382c;color:#fff;border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:12px;font-weight:700}
.wcard,.aicard{border:1px solid #ece7da;border-radius:16px;padding:11px;display:flex;flex-direction:column;gap:7px;background:#fff}
.wcard.muted{background:#F8F7F3}
.wcard p{font-size:14px;line-height:1.42}
.wtop{display:flex;align-items:center;gap:9px;min-width:0}
.wtop > div{flex:1;display:flex;flex-direction:column;min-width:0}
.wtop b{font-size:14px}
.wtop small{font-size:12px;color:#6b7780}
.waitbar{background:var(--amber-bg);color:var(--amber);border:1px solid #f5dca6;border-radius:12px;padding:8px 12px;font-size:13.5px;font-weight:600}
.ok{background:var(--green-bg);color:var(--green);border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700}
.sees{display:flex;flex-direction:column;gap:6px}
.sees > small{color:#6b7780;font-size:12px;font-weight:600}
.proj{display:flex;align-items:center;gap:8px;border-radius:11px;padding:8px 10px;font-size:13.5px;font-weight:600}
.proj.on{background:var(--brand-soft);color:var(--brand-2)}
.proj.off{background:#F1F2F3;color:#7b868d}
.proj em{font-style:normal;font-weight:500;margin-inline-start:auto;font-size:12px}
.recap.big{font-size:14px;padding:12px}
.recap.big b{font-size:14.5px}
.deeper{align-self:flex-start;border:1px solid #dccdf5;color:var(--violet);border-radius:999px;padding:6px 14px;font-weight:650;font-size:13.5px}
.seg{display:flex;background:#F1F2F3;border-radius:12px;padding:3px}
.seg span{flex:1;text-align:center;padding:6px 0;border-radius:9px;font-size:13px;font-weight:600;color:#6b7780}
.seg .on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.daysel{display:flex;gap:5px}
.daysel span{flex:1;text-align:center;padding:7px 0;border-radius:10px;background:#F8F7F3;font-size:12px;font-weight:600;color:#6b7780}
.daysel .on{background:var(--teal);color:#fff}
.kv{display:flex;justify-content:space-between;align-items:center;padding:4px 4px;font-size:13.5px;color:var(--ink-2)}
.kv b{color:var(--ink)}
.tog{width:38px;height:22px;border-radius:999px;background:#d5dbe0;position:relative}
.tog::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;border-top:1px solid #efeae0;padding-top:10px}
.cal div{text-align:center;border-radius:9px;padding:5px 0;display:flex;flex-direction:column;min-width:0}
.cal b{font-size:14px}
.cal small{font-size:9.5px;color:#7b868d;white-space:nowrap;overflow:hidden}
.cal div:first-child small{font-size:9px}
.cal .on{background:var(--teal-bg)}
.cal .on small{color:var(--teal)}
.screen.lock{background:linear-gradient(160deg,#2b4f72,#1f2b33);border-color:#1f2b33;color:#fff}
.lk-time{text-align:center;font-size:44px;font-weight:300;letter-spacing:-.02em;padding:4px 0 2px}
.notif{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.92);color:var(--ink);border-radius:16px;padding:10px 12px}
.notif > div{display:flex;flex-direction:column;min-width:0}
.notif b{font-size:13.5px}
.notif small{font-size:12.5px;color:var(--ink-2);line-height:1.35}
.n-ic img{border-radius:6px}
.digest{background:#fff;color:var(--ink);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:2px}
.digest b{font-size:14px}
.digest small{color:var(--ink-2);font-size:12px}
.digest ul{margin:6px 0 0;padding-inline-start:18px;font-size:13px;color:var(--ink-2)}
.also{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.also li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14.5px;font-weight:550;color:var(--ink-2)}
.also li::before{content:"✓ ";color:#2f8f4e;font-weight:800}

/* AI members */
.ai-box{background:linear-gradient(150deg,#26507a,#2F6FA3 55%,#5b3fa8);color:#fff;border-radius:28px;padding:30px 22px}
.light{color:#dfe9f3}
.eyebrow.light{color:var(--yellow)}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rules li{display:flex;gap:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:14px}
.rules li > span{font-size:22px;line-height:1.2}
.rules b{font-size:17px}
.rules p{color:#dfe9f3;font-size:15px;margin-top:2px}
.soon{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2)}
.soon-l{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow);margin-inline-end:4px}
.pill{border:1px dashed rgba(255,255,255,.5);border-radius:999px;padding:5px 12px;font-size:13.5px;color:#eef4fa}

/* Hebrew + English */
.langtabs{display:inline-flex;background:#ece7da;border-radius:999px;padding:4px;margin-bottom:16px}
.langtabs button{font:inherit;font-weight:650;font-size:15px;border:0;background:none;padding:8px 20px;border-radius:999px;color:var(--ink-2);cursor:pointer}
.langtabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.pair{display:grid;gap:22px}
.tpanel{min-width:0}
.tpanel[hidden]{display:none}
.tpanel .phone{max-width:460px;margin-inline:auto}

/* who */
.who{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.who li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.wi{font-size:28px;display:block;margin-bottom:8px}
.who h3{font-size:17px;margin-bottom:4px}
.who p{color:var(--ink-2);font-size:14.5px}

/* weekly break */
.rest{background:#EEF0F2}
.rest-in{display:grid;gap:26px;align-items:center}
.rest-copy p{color:#4a565f;font-size:17.5px;margin-top:12px;max-width:32em;line-height:1.65}
.screen.grey{background:#F4F5F6;border-color:#dcdfe2;filter:grayscale(.9);opacity:.95}
.resting{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px}
.resting > div{display:flex;flex-direction:column}
.resting small{color:#7b868d;font-size:12px}
.held{align-self:flex-end;background:#e4e7ea;border-radius:16px;border-end-end-radius:5px;padding:9px 12px;max-width:85%}
.held p{font-size:14px}
.held small{display:block;margin-top:4px;font-size:12px;color:#5b6770;font-weight:600}
.paused{align-self:center;font-size:12px;font-weight:600;color:#5b6770;background:#e4e7ea;border-radius:10px;padding:4px 10px}

/* videos */
.videos{display:grid;gap:18px}
.video figcaption{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.video figcaption b{font-size:17px}
.video figcaption span{color:var(--ink-2);font-size:14.5px}
.video-slot{aspect-ratio:16/9;border-radius:18px;background:linear-gradient(135deg,var(--brand-soft),var(--yellow-soft));border:1px dashed var(--brand-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--brand-2);font-weight:650;font-size:15px}
.play{width:54px;height:54px;border-radius:50%;background:#fff;box-shadow:var(--shadow);position:relative}
.play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--brand)}

/* get the app */
.getapp{background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px 20px;text-align:center;box-shadow:var(--shadow)}
.getapp .sub{margin-bottom:20px}
.steps{display:grid;gap:14px;text-align:start;margin-bottom:22px}
.step{background:var(--warm);border-radius:18px;padding:16px 18px}
.step h3{font-size:17px;margin-bottom:6px}
.step ol{margin:0;padding-inline-start:20px;color:var(--ink-2)}
.step li{margin:4px 0}
.kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:7px;background:#fff;border:1px solid var(--line);font-size:13px;vertical-align:middle}

/* updates */
.badge{display:inline-block;background:var(--yellow-soft);color:var(--gold);border:1px solid #f3e1a6;border-radius:999px;padding:1px 10px;font-size:12.5px;font-weight:700;vertical-align:middle}
.updates{display:grid;gap:14px}
.update{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 18px;border-inline-start:5px solid var(--brand)}
.update time{font-size:13px;color:var(--ink-2);font-weight:600}
.update h3{font-size:18px;margin:4px 0 6px}
.update p{color:var(--ink-2);font-size:15px}
.update .badge{position:absolute;top:16px;inset-inline-end:16px}

/* footer */
.footer{border-top:1px solid var(--line);padding:26px 0 calc(26px + env(safe-area-inset-bottom))}
.footer-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.brand-sm{font-size:18px;margin:0}
.footer p{color:var(--ink-2);font-size:15px}

/* modal */
.modal{border:0;border-radius:26px;padding:26px 22px 22px;width:min(420px,calc(100% - 28px));box-shadow:0 30px 80px rgba(0,0,0,.3);text-align:center;color:var(--ink)}
.modal::backdrop{background:rgba(20,35,45,.5);backdrop-filter:blur(3px)}
.modal img{margin:0 auto 10px;border-radius:14px}
.modal h2{font-size:24px}
.modal > p{color:var(--ink-2);margin:8px 0 16px}
.modal-x-wrap{position:absolute;top:10px;inset-inline-end:10px;margin:0}
.modal-x{width:38px;height:38px;border-radius:50%;border:0;background:#f1f3f5;font-size:22px;cursor:pointer;color:var(--ink-2)}
.tabs{display:flex;background:#f1f3f5;border-radius:999px;padding:4px;margin-bottom:14px}
.tabs button{flex:1;font:inherit;font-weight:650;border:0;background:none;padding:9px;border-radius:999px;cursor:pointer;color:var(--ink-2)}
.tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.tabpanel ol{text-align:start;margin:0 0 18px;padding-inline-start:22px;color:var(--ink-2)}
.tabpanel li{margin:6px 0}

@media (max-width:419px){.stack{display:none}}

/* wider screens */
@media (min-width:640px){
  .how{grid-template-columns:repeat(3,1fr)}
  .who{grid-template-columns:repeat(4,1fr)}
  .videos{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr 1fr}
  .updates{grid-template-columns:repeat(3,1fr)}
  .rules{grid-template-columns:repeat(3,1fr)}
  .rules li{flex-direction:column}
  .ai-box{padding:44px 40px}
}
@media (min-width:900px){
  .topnav{display:flex}
  .brand{margin-inline-end:0}
  .topnav{margin-inline:auto}
  .hero{padding:56px 0 72px}
  .hero-in{grid-template-columns:1.05fr .95fr;gap:48px}
  .row{grid-template-columns:1fr 1fr;gap:56px;margin-bottom:64px}
  .row.flip .screen{order:2}
  .row-copy h3{font-size:30px}
  .section{padding:84px 0}
  .pair{grid-template-columns:1fr 1fr;align-items:start}
  .langtabs{display:none}
  .tpanel[hidden]{display:block}
  .rest-in{grid-template-columns:1.1fr .9fr;gap:56px}
}