/* Original Concepts — showcase page */
:root{
  --paper:#F3F1EC; --paper-2:#E9E5DC; --card:#FBFAF7;
  --ink:#151513; --ink-2:#5B5A53; --ink-3:#8A887F;
  --line:rgba(21,21,19,.12); --line-2:rgba(21,21,19,.22);
  --accent:#E0482A; --accent-2:#FBE3DC;
  --good:#1D6A4A; --good-2:#DDEEE5;
  --dark:#141412; --dark-2:#1D1D1A; --dark-line:rgba(243,241,236,.14); --dark-ink-2:#B4B1A7;
  --serif:"Noto Sans Hebrew", Arial, sans-serif;
  --sans:"Noto Sans Hebrew", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --wrap:1240px; --gut:clamp(18px,4vw,40px);
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.num{font-family:var(--mono);font-feature-settings:"tnum";direction:ltr;unicode-bidi:isolate}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.is-stuck{border-bottom-color:var(--line)}
.top__in{display:flex;align-items:center;gap:22px;height:64px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;white-space:nowrap}
.brand b{font-family:var(--sans);font-weight:700;letter-spacing:-.01em;font-size:17px;direction:ltr}
.brand span{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.08em;direction:ltr}
.chapters{display:flex;gap:2px;margin-inline-start:auto;overflow-x:auto;scrollbar-width:none}
.chapters::-webkit-scrollbar{display:none}
.chapters a{font-size:14px;text-decoration:none;color:var(--ink-2);padding:6px 10px;border-radius:999px;white-space:nowrap;transition:color .15s,background .15s}
.chapters a:hover{color:var(--ink)}
.chapters a.is-on{background:var(--ink);color:var(--paper)}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;text-decoration:none;padding:12px 20px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);white-space:nowrap;transition:transform .15s ease,background .15s,color .15s}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn svg{width:16px;height:16px}
.top .btn{padding:9px 16px;font-size:14px}
@media (max-width:1080px){.chapters{display:none}.top .btn{margin-inline-start:auto}}
.progress{position:absolute;inset-inline:0;bottom:-1px;height:2px;background:transparent}
.progress i{display:block;height:100%;width:0;background:var(--accent);margin-inline-start:0}

/* ---------- hero ---------- */
.hero{padding-block:clamp(36px,6vw,80px) clamp(40px,6vw,72px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center}
.eyebrow{font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:.01em;color:var(--ink-2);display:flex;align-items:center;gap:10px;margin:0 0 22px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--ink-2)}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(38px,5vw,70px);line-height:1.08;font-weight:800;letter-spacing:-.02em}
h1 em{font-style:normal;color:var(--accent)}
.hero__lede{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:34em;margin:26px 0 30px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__visual{position:relative;padding-bottom:9%;padding-inline-end:6%}
.hero__visual .phone{position:absolute;inset-inline-end:0;bottom:0;width:27%}
.chip{position:absolute;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px 8px 12px;font-size:13.5px;box-shadow:0 10px 30px -12px rgba(0,0,0,.25);white-space:nowrap}
.chip i{width:8px;height:8px;border-radius:50%;background:#22A45D;box-shadow:0 0 0 4px rgba(34,164,93,.18)}
.chip--a{inset-inline-start:-4%;top:14%}
.chip--b{inset-inline-start:8%;bottom:4%}
.chip b{font-weight:700}
@media (max-width:900px){.hero__grid{grid-template-columns:minmax(0,1fr)}.chip--a{inset-inline-start:2%;top:-12px}}

.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2);margin-top:clamp(40px,6vw,72px)}
.fact{padding:22px 0 0;padding-inline-end:18px}
.fact + .fact{border-inline-start:1px solid var(--line);padding-inline-start:22px}
.fact b{display:block;font-family:var(--sans);font-weight:800;font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.03em;direction:ltr;text-align:end}
.fact span{display:block;color:var(--ink-2);font-size:14.5px;margin-top:10px;line-height:1.45}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}.fact:nth-child(3){border-inline-start:0;padding-inline-start:0}.fact:nth-child(n+3){border-top:1px solid var(--line);margin-top:22px}}

/* ---------- frames ---------- */
.shot{position:relative;margin:0}
.browser{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.02),0 30px 60px -34px rgba(20,20,18,.35)}
.browser__bar{display:flex;align-items:center;gap:10px;height:34px;padding-inline:12px;border-bottom:1px solid var(--line);background:#F7F5F0}
.browser__url{flex:1;max-width:420px;margin-inline:auto;height:22px;border-radius:6px;background:var(--paper-2);font-family:var(--mono);font-size:11px;color:var(--ink-2);display:flex;align-items:center;justify-content:center;direction:ltr;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-inline:10px}
.browser__dots{display:flex;gap:5px;direction:ltr}
.browser__dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.browser img,.phone img{width:100%;cursor:zoom-in}
.phone{background:var(--ink);padding:7px;border-radius:34px;box-shadow:0 30px 50px -26px rgba(20,20,18,.55)}
.phone img{border-radius:27px;background:#fff}
.admin .browser__bar{background:#23282D;border-color:#23282D}
.admin .browser__url{background:#32373C;color:#C3C4C7}
.admin .browser__dots i{background:#50575E}
figcaption{font-size:14px;color:var(--ink-2);margin-top:12px;line-height:1.5}
figcaption b{color:var(--ink);font-weight:700}

/* pins */
.pinwrap{position:relative}
.pin{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--sans);font-size:13px;font-weight:400;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 6px 16px -4px rgba(224,72,42,.6);transition:transform .2s;cursor:default;z-index:2}
.pin::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7}80%,100%{transform:scale(1.5);opacity:0}}
.pin.is-hot{transform:translate(-50%,-50%) scale(1.25)}
.legend{list-style:none;margin:0;padding:0;counter-reset:lg}
.legend li{position:relative;padding:14px 0;padding-inline-start:44px;border-top:1px solid var(--line);transition:background .15s}
.legend li:last-child{border-bottom:1px solid var(--line)}
.legend li::before{counter-increment:lg;content:counter(lg);position:absolute;inset-inline-start:0;top:14px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:700;font-size:13px;display:grid;place-items:center}
.legend li.is-hot::before{background:var(--accent)}
.legend b{display:block;font-weight:700;margin-bottom:2px}
.legend span{color:var(--ink-2);font-size:15.5px}

/* ---------- chapters ---------- */
.ch{padding-block:clamp(64px,9vw,128px);border-top:1px solid var(--line)}
.ch-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:start;margin-bottom:clamp(34px,5vw,60px)}
.ch-num{font-family:var(--sans);font-weight:300;font-size:clamp(46px,6vw,84px);line-height:.9;color:transparent;-webkit-text-stroke:1px var(--ink-2);letter-spacing:-.04em;direction:ltr}
.kicker{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.01em;color:var(--accent);margin:4px 0 12px}
h2{font-size:clamp(34px,4.4vw,60px);line-height:1.04;max-width:16em}
.lede{font-size:clamp(17px,1.4vw,19.5px);color:var(--ink-2);max-width:40em;margin:18px 0 0}
@media (max-width:640px){.ch-head{grid-template-columns:minmax(0,1fr)}.ch-num{font-size:40px}}

.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,56px);align-items:start}
.split--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split--even{grid-template-columns:1fr 1fr}
@media (max-width:900px){.split,.split--rev,.split--even{grid-template-columns:minmax(0,1fr)}}
.stack{display:grid;gap:clamp(20px,3vw,32px)}

.points{list-style:none;margin:0;padding:0;display:grid;gap:0}
.points li{padding:13px 0;border-top:1px solid var(--line);padding-inline-start:26px;position:relative;font-size:16.5px}
.points li::before{content:"";position:absolute;inset-inline-start:2px;top:23px;width:12px;height:1.5px;background:var(--accent)}
.points li b{font-weight:700}
.points--2{grid-template-columns:1fr 1fr;column-gap:36px}
@media (max-width:760px){.points--2{grid-template-columns:minmax(0,1fr)}}

.why{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px 22px;margin-top:28px}
.why__label{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:13.5px;color:var(--accent);margin-bottom:8px}
.why__label::before{content:"?";width:20px;height:20px;border-radius:50%;border:1.5px solid var(--accent);display:grid;place-items:center;font-size:12px;line-height:1}
.why p{margin:0;font-size:16px;color:var(--ink)}
.why-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:34px}
.why-row .why{margin-top:0}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tags li{border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;font-size:14px;background:var(--card);display:flex;gap:8px;align-items:center}
.tags li .num{font-family:var(--sans);font-size:11.5px;color:var(--ink-3)}

.phones{display:flex;gap:clamp(14px,2.4vw,26px);align-items:flex-start}
.phones .phone{flex:1;max-width:260px}
.phones--offset .phone:nth-child(2){margin-top:48px}

.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;background:var(--card);margin-bottom:14px}
.seg button{border:0;background:transparent;padding:7px 16px;border-radius:999px;font-size:14px;cursor:pointer;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.swap > [hidden]{display:none!important}

/* statement */
.statement{padding-block:clamp(60px,8vw,110px);border-top:1px solid var(--line)}
.statement p{font-family:var(--serif);font-size:clamp(26px,3.2vw,44px);line-height:1.3;margin:0;max-width:24em;font-weight:300}
.statement p span{color:var(--ink-3)}

/* questions grid (product) */
.qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,24px);margin-top:clamp(40px,5vw,64px)}
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,30px)}
.q h3{font-size:clamp(24px,2.3vw,32px);line-height:1.1;margin-bottom:6px}
.q .qk{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--ink-3)}
.q .points li{font-size:15.5px}
@media (max-width:820px){.qgrid{grid-template-columns:minmax(0,1fr)}}

/* dark */
.dark{background:var(--dark);color:var(--paper);border-top:0}
.dark .ch-num{-webkit-text-stroke-color:var(--dark-ink-2)}
.dark .lede,.dark .legend span,.dark figcaption,.dark .points li span{color:var(--dark-ink-2)}
.dark .points li,.dark .legend li{border-color:var(--dark-line)}
.dark .why{background:var(--dark-2);border-color:var(--dark-line)}
.dark .why p{color:var(--paper)}
.dark .browser{border-color:rgba(243,241,236,.18);box-shadow:0 40px 80px -40px #000}
.dark .tags li{background:var(--dark-2);border-color:var(--dark-line)}
.dark .seg{background:var(--dark-2);border-color:var(--dark-line)}
.dark .seg button{color:var(--dark-ink-2)}
.dark .seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.dark .legend li::before{background:var(--paper);color:var(--ink)}
.dark .phone{background:#000;box-shadow:0 30px 60px -20px #000}

/* keyboard demo */
.kbd{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:26px 0 8px;font-size:15px}
.kbd kbd{font-family:var(--mono);font-size:20px;border:1px solid var(--dark-line);border-bottom-width:3px;border-radius:8px;padding:6px 12px;background:var(--dark-2);direction:ltr}
.kbd .arrow{color:var(--accent);font-family:var(--mono)}
.kbd strong{font-family:var(--serif);font-size:30px;font-weight:800}

/* backstage tabs */
.tabs{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,48px);align-items:start}
.tablist{display:flex;flex-direction:column;border-top:1px solid var(--dark-line)}
.tablist button{all:unset;cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:16px 4px;border-bottom:1px solid var(--dark-line);transition:background .15s}
.tablist button .num{grid-row:span 2;font-family:var(--sans);font-size:12px;color:var(--dark-ink-2);padding-top:5px}
.tablist button b{font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.2}
.tablist button span:last-child{color:var(--dark-ink-2);font-size:14.5px;line-height:1.5;display:none}
.tablist button[aria-selected="true"] b{color:var(--accent)}
.tablist button[aria-selected="true"] span:last-child{display:block}
.tablist button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tabpanels{position:sticky;top:90px}
@media (max-width:900px){.tabs{grid-template-columns:minmax(0,1fr)}.tabpanels{position:static}.tablist{flex-direction:row;overflow-x:auto;border:0;gap:8px;scrollbar-width:none}.tablist button{border:1px solid var(--dark-line);border-radius:999px;padding:8px 14px;display:block;white-space:nowrap}.tablist button .num,.tablist button span:last-child{display:none!important}.tablist button b{font-family:var(--sans);font-size:14.5px;font-weight:400}}
.panel-note{margin-top:16px;color:var(--dark-ink-2);font-size:15.5px;max-width:48em}
.panel-note b{color:var(--paper)}

.more-admin{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--dark-line);border:1px solid var(--dark-line);border-radius:var(--r);overflow:hidden}
.more-admin div{background:var(--dark);padding:18px 20px}
.more-admin b{display:block;font-weight:700;font-size:15.5px}
.more-admin span{display:block;color:var(--dark-ink-2);font-size:14px;line-height:1.5;margin-top:3px}

/* speed */
.scores{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,20px)}
.score{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px 20px;position:relative;overflow:hidden}
.score svg{width:92px;height:92px;display:block;margin-bottom:14px;transform:rotate(-90deg)}
.score circle{fill:none;stroke-width:7}
.score .bg{stroke:var(--paper-2)}
.score .fg{stroke:var(--good);stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1)}
.score b{position:absolute;top:22px;inset-inline-start:20px;width:92px;height:92px;display:grid;place-items:center;font-family:var(--sans);font-size:28px;font-weight:700;letter-spacing:-.03em}
.score span{font-size:14.5px;color:var(--ink-2);line-height:1.45;display:block}
.score strong{display:block;font-weight:700;color:var(--ink);font-size:15.5px}
@media (max-width:900px){.scores{grid-template-columns:1fr 1fr}}
.metrics{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;font-size:15px;color:var(--ink-2)}
.metrics b{font-family:var(--sans);color:var(--ink);font-weight:700;direction:ltr;unicode-bidi:isolate}

/* compare */
.compare{background:var(--card);border:1px solid var(--line-2);border-radius:18px;overflow:hidden}
.compare__head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.compare__head p{margin:0;color:var(--ink-2);font-size:14.5px}
.tbl-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:720px}
th,td{padding:13px 18px;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle;font-size:15.5px}
thead th{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink-3);background:var(--paper)}
td.app{color:var(--ink-2);font-size:14px}
td.app a{text-decoration:none;border-bottom:1px dotted var(--ink-3)}
td.price{font-family:var(--sans);font-feature-settings:"tnum";direction:ltr;text-align:end;white-space:nowrap;color:var(--ink)}
th.price{text-align:end}
td.ours{text-align:center;white-space:nowrap}
th.ours{text-align:center}
.inc{display:inline-flex;align-items:center;gap:6px;background:var(--good-2);color:var(--good);font-weight:700;font-size:13.5px;border-radius:999px;padding:4px 11px}
.inc svg{width:13px;height:13px}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--paper)}
tbody tr.reveal{opacity:0;transform:translateY(6px)}
tbody tr.reveal.in{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
tfoot td{border-bottom:0;background:var(--ink);color:var(--paper);font-size:16px;padding-block:20px}
tfoot td.price{color:var(--paper);font-size:clamp(22px,2.6vw,30px);font-weight:400}
tfoot .inc{background:var(--good);color:#fff;font-size:15px;padding:6px 14px}
.extras{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.extras div{background:var(--card);padding:18px 22px}
.extras b{display:block;font-family:var(--sans);font-weight:700;font-size:22px;direction:ltr;text-align:end}
.extras span{display:block;font-size:14px;color:var(--ink-2);line-height:1.5;margin-top:4px}
@media (max-width:760px){.extras{grid-template-columns:minmax(0,1fr)}}
.fine{font-size:13.5px;color:var(--ink-3);margin-top:14px;line-height:1.6}

/* closing */
.closing{background:var(--accent);color:#fff;padding-block:clamp(70px,10vw,140px)}
.closing h2{max-width:14em;font-size:clamp(36px,5vw,68px);font-weight:800}
.closing p{font-size:clamp(17px,1.5vw,20px);max-width:36em;margin:22px 0 34px;color:rgba(255,255,255,.9)}
.closing .btn{background:#fff;color:var(--ink);border-color:#fff}
.closing .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.closing .btn--ghost:hover{background:#fff;color:var(--ink)}
footer.foot{padding-block:28px;font-size:14px;color:var(--ink-2)}
footer.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:min(1500px,96vw);max-height:94vh;overflow:visible}
dialog.lb::backdrop{background:rgba(15,15,13,.86)}
dialog.lb img{max-height:90vh;width:auto;max-width:96vw;border-radius:10px;margin:auto}
dialog.lb button{position:absolute;top:-44px;inset-inline-end:0;background:#fff;border:0;border-radius:999px;padding:7px 14px;cursor:pointer;font-size:14px}

/* browser with a phone laid over its lower corner */
.duo{position:relative;padding-bottom:16%;padding-inline-end:12%}
.duo .phone{position:absolute;inset-inline-end:0;bottom:0;width:30%;max-width:230px}
@media (max-width:560px){.duo{padding-inline-end:0;padding-bottom:0}.duo .phone{position:relative;width:62%;margin:-18% auto 0;max-width:none}}

/* WhatsApp */
.top__wa{padding:9px 14px!important}
.top__wa svg{width:17px;height:17px;color:#1FA855}
@media (max-width:1080px){.top__wa{margin-inline-start:auto}.top__wa + .btn{margin-inline-start:0}}
@media (max-width:520px){.top__wa span{display:none}.top .btn{padding:8px 13px;font-size:13.5px}}
.closing .btn svg{width:18px;height:18px}
.wa-float{position:fixed;inset-inline-end:18px;bottom:18px;z-index:45;width:54px;height:54px;border-radius:50%;background:#1FA855;color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px -10px rgba(31,168,85,.7);transition:transform .2s;opacity:0;pointer-events:none}
.wa-float.is-on{opacity:1;pointer-events:auto}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:28px;height:28px}

/* phones: nothing may widen the page */
body{overflow-x:clip}
.shot,.browser,.phone,.pinwrap,.why,.points,.legend,.q,.compare{min-width:0;max-width:100%}
.browser__url{min-width:0}
@media (max-width:600px){
  .top__in{gap:10px;height:58px}
  .brand{min-width:0;overflow:hidden}
  .brand span{display:none}
  .brand b{font-size:15px}
  .top .btn{padding:8px 12px;font-size:13px}
  .top__wa{padding:8px 10px!important}
  .browser__dots{display:none}
  .browser__url{font-size:10px}
  .ch{padding-block:56px}
  h2{font-size:32px}
  .phones .phone{max-width:none}
  .chip{font-size:12.5px;padding:6px 11px}
  .chip--b{inset-inline-start:0;bottom:-6px}
}

/* comparison table as stacked rows on phones */
@media (max-width:640px){
  table{min-width:0}
  thead{display:none}
  tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
  tbody td{border:0;padding:0}
  tbody td:first-child{grid-column:1;grid-row:1;font-weight:400}
  tbody td.app{grid-column:1;grid-row:2;font-size:13px;margin-top:2px}
  tbody td.price{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:15px}
  tbody td.ours{display:none}
  tfoot tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;background:var(--ink)}
  tfoot td{padding:16px}
  tfoot td.ours{grid-column:1 / -1;padding-top:0;text-align:start}
  .compare__head{padding:14px 16px}
}