/* Wasl public pages (internal/site) — the app's tokens (.claude/rules/app-design.md §9), mobile-first, light and dark.
   Fonts are the app's own (2026-11-06): Geist draws Latin letters and EVERY digit, Graphik Arabic every Arabic letter —
   the same split as app/pubspec.yaml — served by this binary as WOFF2 subsets (no CDN). */
@font-face{font-family:"Geist";src:url("fonts/geist.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url("fonts/graphik-ar-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url("fonts/graphik-ar-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url("fonts/graphik-ar-700.woff2") format("woff2");font-weight:700 800;font-display:swap}
:root{color-scheme:light dark;
  --green:#0F7B4F;--green-700:#0A5A3A;--green-50:#E7F4EE;--green-100:#CDE9DB;
  --bg:#F7F7F5;--card:#FFFFFF;--line:#E4E5E7;--field:#D0D5DD;--ink:#101828;--muted:#475467;
  --bad-ink:#A5241A;--bad-bg:#FDECEA;--danger:#B42318;--ok-ink:#0A5A3A;--ok-bg:#E7F4EE;--link:#0A5A3A}
@media (prefers-color-scheme:dark){:root{
  --bg:#0C111D;--card:#161B26;--line:#2A303C;--field:#3B4250;--ink:#F2F4F7;--muted:#B0B7C3;
  --green-50:#0F2A1F;--green-100:#164530;--bad-ink:#FDA29B;--bad-bg:#3A1513;--danger:#D92D20;
  --ok-ink:#A6E3C4;--ok-bg:#0F2A1F;--link:#6CD3A0}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Geist","Graphik Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;font-size:16px;line-height:1.7}
a{color:var(--link);font-weight:600}
main{max-width:720px;margin:0 auto;padding:20px 16px 40px}
.top{display:flex;align-items:center;gap:12px;max-width:720px;margin:0 auto;padding:16px 16px 0}
.top a.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark{flex:none;width:44px;height:44px}
.brand b{font-size:22px;font-weight:700}
h1,h2,h3{font-family:"Geist","Graphik Arabic",system-ui,sans-serif;line-height:1.35;text-wrap:balance}
h1{font-size:26px;font-weight:800;margin:8px 0 6px}
h2{font-size:19px;font-weight:700;margin:0 0 10px}
h3{font-size:16px;font-weight:700;margin:14px 0 6px}
p{margin:0 0 10px}
.sub{color:var(--muted);font-size:15px;margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin:0 0 12px;box-shadow:0 1px 2px rgba(16,24,40,.06)}
ul{margin:0;padding:0 20px 0 0}li{margin:0 0 6px}
.note{color:var(--muted);font-size:14px;margin:8px 0 0}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
nav.links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
nav.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
.hero{text-align:center;padding:28px 0 8px}
.hero .mark{width:72px;height:72px;margin:0 auto 12px;display:block}
.hero h1{font-size:34px}
.tag{font-family:"Geist","Graphik Arabic",system-ui,sans-serif;font-size:20px;font-weight:700;color:var(--link);margin:0 0 6px}
.stores{display:grid;gap:10px;margin:18px 0 6px}
.store{display:flex;align-items:center;justify-content:center;min-height:60px;border-radius:16px;padding:12px 16px;text-align:center;font-weight:700;font-size:17px;text-decoration:none;background:var(--ink);color:var(--bg)}
.badge.soon{position:relative;opacity:.92}
.badge.soon img{filter:saturate(.85)}
.badge.soon em{position:absolute;top:-11px;inset-inline-end:-10px;padding:3px 10px;border-radius:999px;background:#F5A623;color:#101828;font-style:normal;font-size:13px;font-weight:700;line-height:1.4;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.store.soon{background:transparent;color:var(--muted);border:1.5px dashed var(--field)}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin:12px 0 0;font:inherit;font-size:17px;font-weight:700;color:#fff;background:var(--green);border:0;border-radius:16px;padding:12px 16px;cursor:pointer;text-decoration:none}
.btn:active{background:var(--green-700)}
.btn.danger{background:var(--danger)}
label{display:block;font-weight:700;margin:0 0 8px}
input{width:100%;font:inherit;font-size:20px;padding:12px;min-height:56px;border:1.5px solid var(--field);border-radius:14px;background:var(--card);color:var(--ink);direction:ltr;text-align:center}
input:focus{outline:2px solid var(--green);outline-offset:1px}
.bad{background:var(--bad-bg);border:1px solid rgba(217,45,32,.25);color:var(--bad-ink);padding:10px 13px;border-radius:14px;margin:0 0 12px;font-weight:600}
.done{background:var(--ok-bg);border:1px solid rgba(15,123,79,.25);color:var(--ok-ink);padding:12px 14px;border-radius:14px;margin:0 0 12px;font-weight:700}
a.wa{display:block;text-align:center;margin:10px 0 0}
dl{margin:0}dt{font-weight:700;margin:10px 0 2px}dd{margin:0 0 6px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:15px}th,td{text-align:right;vertical-align:top;padding:8px 6px;border-bottom:1px solid var(--line)}th{font-weight:700}
footer{max-width:720px;margin:0 auto;padding:8px 16px 32px;color:var(--muted);font-size:14px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 8px}
footer a{color:var(--muted)}
@media (max-width:560px){body:not(.page-home) :is(table,tbody,tr,td){display:block}body:not(.page-home) th{display:none}body:not(.page-home) tr{padding:10px 0;border-bottom:1px solid var(--line)}body:not(.page-home) td{border:0;padding:2px 0}body:not(.page-home) td:first-child{font-weight:700;color:var(--link)}}
@media (min-width:640px){.stores{grid-template-columns:1fr 1fr}h1{font-size:30px}}

/* ── The landing page («/», 2026-11-07) — built from the approved Figma design (file nhlgKGOHNjCaOqjprWk1Tj, page
   «Website»: «Website — Desktop 1440» 266:241 and «Website — Mobile 390» 284:308). Bands cycle brand green / paper /
   near-black and ride 48 px over the band before with rounded tops; one right edge (RTL start) at 120 px from the
   frame; real app screens with ONE real card lifted from its own place. No script: the day story and the questions
   are <details>, the story's panel follows the open stop through :has(). */
.page-home{background:#000}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.page-home main{max-width:none;margin:0;padding:0}
.page-home a:focus-visible,.page-home summary:focus-visible{outline:3px solid #7FE3B4;outline-offset:3px;border-radius:8px}
.wrap{position:relative;width:min(1200px,100% - 40px);margin-inline:auto}
.band{position:relative;overflow:hidden;padding:120px 0}
.band+.band,.band+.home-foot{margin-top:-48px;border-radius:48px 48px 0 0}
.green{color:#fff;background:radial-gradient(60% 55% at 82% -5%,rgba(255,255,255,.14),transparent 70%),linear-gradient(180deg,#168A5A,#0A5A3A 50%,#04301F)}
.paper{color:#101828;background:linear-gradient(180deg,#FFFFFF,#F4F5F1 50%,#E3EBE4)}
.black{color:#fff;background:radial-gradient(42% 40% at 50% 62%,rgba(66,201,140,.12),transparent 70%),linear-gradient(180deg,#16291F,#07100C 50%,#000)}
.band h1,.band h2,.band h3{font-family:"Graphik Arabic",system-ui,sans-serif;font-weight:700;margin:0;text-wrap:initial}
.band h1{font-size:clamp(54px,7.4vh,76px);line-height:1.22;white-space:nowrap}
.band h2{font-size:72px;line-height:1.22}
.lead{font-size:22px;line-height:1.7;margin:20px 0 0;opacity:.84}
.paper .lead{opacity:.72}
.band a{color:inherit}
/* the real screen on a white rim, and its card lifted from its own place (--x/--y/--w: % of the raw screen width) */
.shot{position:relative;container-type:inline-size;margin:0}
.shot .screen{position:relative;padding:6px;border-radius:44px;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.3);overflow:hidden}
.shot .screen img{display:block;width:100%;height:auto;border-radius:38px}
.shot .screen::after{content:"";position:absolute;inset:6px;border-radius:38px;background:var(--dim,rgba(10,42,28,.14))}
.shot .lift{position:absolute;display:block;height:auto;border-radius:18px;transform:scale(1.08) translateY(-8px);
  left:calc(6px + var(--x) * (100cqw - 12px) / 100);top:calc(6px + var(--y) * (100cqw - 12px) / 100);width:calc(var(--w) * (100cqw - 12px) / 100);
  box-shadow:0 26px 60px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.12)}
.s01-till{--x:.513;--y:9.402;--w:98.974}.s02-loose{--x:3.761;--y:88.034;--w:92.479}.s03-customer{--x:4.103;--y:44.872;--w:91.795}
.s04-close{--x:6.239;--y:79.487;--w:87.692}.s05-profit{--x:4.103;--y:57.949;--w:91.795}.s06-stock{--x:4.103;--y:67.179;--w:91.795}
.s07-orders{--x:.513;--y:40.598;--w:98.974}.s08-supplier{--x:.513;--y:43.59;--w:98.974}
/* store row */
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:40px 0 0}
.get{display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:56px;padding:6px 28px;border-radius:14px;background:#fff;color:#0A5A3A!important;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.get b{font-size:19px;line-height:1.3}
.get small{font-size:13px;opacity:.72}
.get:hover{background:#E7F4EE}
.badge{display:inline-flex;border-radius:10px}.badge img{display:block;height:56px;width:auto}
.store.soon{display:inline-flex;align-items:center;min-height:56px;padding:0 20px;border-radius:14px;font-size:16px;background:transparent;border:1.5px dashed currentColor;opacity:.78}
/* ── 01 hero */
.hero{padding:36px 0 0;min-height:clamp(760px,100vh,1040px)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:260px;background:linear-gradient(180deg,rgba(4,48,31,0),rgba(4,48,31,.96));pointer-events:none}
.home-top{display:flex;align-items:center;gap:24px}
.lockup{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.lockup b{font-family:"Graphik Arabic",sans-serif;font-size:34px;font-weight:700;line-height:1}
.lockup img{border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.home-top nav{display:flex;gap:8px;margin-inline:auto}
.home-top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;font-size:17px;font-weight:500;color:rgba(255,255,255,.82);text-decoration:none}
.home-top nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-get{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:12px;background:#fff;color:#0A5A3A!important;font-size:16px;font-weight:700;text-decoration:none}
.hero-grid{display:grid;grid-template-columns:680px 1fr;margin-top:clamp(40px,8vh,110px);position:relative;z-index:1}
.hero .copy .lead{max-width:560px}
.hero-art{position:relative}
.hero-art .shot{position:absolute;left:180px;top:-10px;width:clamp(260px,34vh,320px)}
.hero-art .receipt{position:absolute;left:0;top:clamp(222px,30vh,330px);width:clamp(230px,30vh,290px);font-size:clamp(10.5px,1.35vh,13px)}
/* the receipt as a printed invoice — the app's sale, in columns (features/sale/model/receipt.dart), torn at both ends */
.receipt{margin:0;font-size:14px;color:#101828;filter:drop-shadow(0 26px 34px rgba(0,0,0,.3))}
.invoice{background:#FFFDF7;padding:2.4em 1.7em 2em;text-align:right;
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/1em 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/1em 51% repeat-x;
  mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/1em 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/1em 51% repeat-x}
.invoice header{text-align:center;padding-bottom:.9em;border-bottom:1.5px dashed rgba(16,24,40,.35)}
.invoice header b{display:block;font-family:"Graphik Arabic",sans-serif;font-size:1.3em;font-weight:700}
.invoice header span{display:block;font-size:.86em;opacity:.6;margin-top:.15em}
.inv-meta{display:flex;justify-content:space-between;margin:.7em 0 .5em;font-size:.86em;opacity:.65}
.invoice table{width:100%;border-collapse:collapse;font-size:.93em;font-variant-numeric:tabular-nums}
.invoice th{font-weight:500;font-size:.86em;opacity:.55;padding:.4em 0;border-bottom:1px solid rgba(16,24,40,.15);text-align:center}
.invoice td{padding:.5em 0;text-align:center;border:0;vertical-align:top}
.invoice th:first-child,.invoice td:first-child{text-align:right}
.invoice th:last-child,.invoice td:last-child{text-align:left}
.invoice td:first-child{font-weight:500}
.inv-total{display:flex;justify-content:space-between;align-items:baseline;margin:.6em 0 0;padding:.8em 0;border-top:1.5px dashed rgba(16,24,40,.35);border-bottom:1.5px dashed rgba(16,24,40,.35)}
.inv-total span{font-weight:500}
.inv-total b{font-family:"Graphik Arabic",sans-serif;font-size:1.45em;font-weight:700}
.inv-total small{font-size:.6em;font-weight:500;opacity:.7}
.inv-foot{margin:.9em 0 0;text-align:center;font-size:.86em;opacity:.55}
/* ── 02 the pitch: six cards, all in view at once (3 × 2) — the app's real card on top, then the change: the paper way
   struck through, the Wasl way. Normal scrolling; nothing pinned (the sideways scroll-jack was «bad ux», 2026-11-07). */
.pitch{padding-bottom:150px}
.pts-view{width:min(1200px,100% - 40px);margin:56px auto 0}
.pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pt{display:flex;flex-direction:column;border-radius:32px;background:#fff;box-shadow:0 24px 60px rgba(16,24,40,.07),0 0 0 1px rgba(16,24,40,.06);overflow:hidden}
.pt-art{order:-1;display:grid;place-items:center;height:250px;padding:24px;background:radial-gradient(70% 60% at 50% 40%,rgba(255,255,255,.7),transparent 70%),linear-gradient(180deg,#E7F4EE,#CDE9DB)}
.pt-art img{display:block;width:100%;max-width:330px;max-height:202px;object-fit:contain;height:auto;border-radius:16px;box-shadow:0 20px 44px rgba(10,90,58,.2),0 2px 8px rgba(16,24,40,.08)}
.pt-copy{padding:28px 32px 32px;display:flex;flex-direction:column;flex:1}
.pt-copy i{font-style:normal;font-family:"Geist",sans-serif;font-weight:600;font-size:16px;color:#0F7B4F}
.pt-copy i small{font-weight:500;opacity:.5}
.pt-copy h3{margin:8px 0 0;font-size:40px;line-height:1.2;color:#101828}
.pt-copy p{margin:0}
.pt-copy p small{display:block;font-size:13px;font-weight:500;margin-bottom:4px}
.pt-copy .was{margin-top:16px;font-size:16px;line-height:1.65;color:#475467}
/* the strike is a drawn line (a background on the inline text, one per line fragment), so home.js can draw it */
.pt-copy .was s{text-decoration:none;background:linear-gradient(rgba(165,36,26,.7),rgba(165,36,26,.7)) no-repeat right 58%/100% 1.5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pt-art img{transition:transform .25s ease,box-shadow .25s ease}
@media (hover:hover){.pt:hover .pt-art img{transform:translateY(-6px);box-shadow:0 30px 60px rgba(10,90,58,.26),0 4px 12px rgba(16,24,40,.1)}}
.pt-copy .now{margin-top:16px;font-size:19px;font-weight:500;line-height:1.6;color:#101828}
.pt-copy .now small{color:#0F7B4F;font-size:13px}
/* ── 03 the order between shop and supplier */
.supplier{padding-bottom:120px}
.supplier h2{font-size:84px}
.sup-head{display:grid;grid-template-columns:1fr 520px;align-items:end}
.sup-head .lead{margin:0;font-size:22px;opacity:.82}
/* three phones, one order: the shop sends, the supplier accepts, the rep delivers (RTL: the first on the right) */
.three{list-style:none;margin:96px 0 0;padding:0;display:flex;justify-content:space-between;gap:70px}
.three .phone{position:relative;flex:0 0 340px}
.three .phone:nth-child(2){margin-top:60px}
.three .screen{padding:6px;border-radius:44px;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.45);overflow:hidden}
.three .screen img{display:block;width:100%;height:auto;border-radius:38px}
.three .phone:not(:last-child)::after{content:"←";position:absolute;top:340px;inset-inline-end:-50px;font-family:"Geist",sans-serif;font-size:28px;color:rgba(255,255,255,.5)}
.three i{display:block;margin:36px 0 6px;font-style:normal;font-family:"Geist",sans-serif;font-weight:600;font-size:20px;color:#7FE3B4}
.three b{display:block;font-size:28px;font-weight:700;line-height:1.35}
.three span{display:block;margin-top:8px;font-size:17px;line-height:1.7;opacity:.75}
/* ── 04 tiles — whole real cards (never a screen cut through a row) on a calm stage inside each tile */
.tiles{padding:120px 0 168px}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tile{position:relative;display:flex;flex-direction:column;border-radius:32px;background:#fff;border:1px solid #E4E4DF;overflow:hidden;padding:16px}
.tile-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:400px;border-radius:22px;background:linear-gradient(180deg,#EEF5F0,#E2EDE6)}
.tile-art img{display:block;width:420px;max-width:86%;height:auto;border-radius:16px;box-shadow:0 18px 40px rgba(16,24,40,.12),0 2px 6px rgba(16,24,40,.06)}
.tile.wide{grid-column:1/-1;flex-direction:row;align-items:stretch;gap:0}
.tile.wide .tile-art{flex:0 0 600px;height:auto;padding:40px 0}
.tile-copy{padding:32px 24px 24px}
.tile.wide .tile-copy{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:40px 48px}
.tile-copy h3{font-size:44px;line-height:1.3;color:#101828}
.tile-copy p{margin:12px 0 0;font-size:18px;line-height:1.7;opacity:.72;max-width:460px}
.tile.books .receipt{width:270px;font-size:11.5px}
/* ── 05 steps */
.steps{padding-bottom:0;min-height:880px}
.steps-grid{display:grid;grid-template-columns:560px 1fr}
.step-list{list-style:none;margin:40px 0 0;padding:0}
.step-list li{display:flex;gap:24px;align-items:flex-start;padding:21px 0 20px;border-top:1px solid rgba(255,255,255,.2)}
.step-list li:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.step-list i{flex:0 0 40px;font-style:normal;font-family:"Geist",sans-serif;font-weight:600;font-size:24px;color:#7FE3B4;padding-top:8px}
.step-list b{display:block;font-size:36px;font-weight:700;line-height:1.25}
.step-list span{display:block;font-size:18px;line-height:1.7;opacity:.75;margin-top:2px}
.steps-art{position:relative}
.steps-art .screen{position:absolute;width:280px;padding:6px;border-radius:36px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.3);overflow:hidden}
.steps-art .screen img{display:block;width:100%;height:auto;border-radius:30px}
.steps-art .screen:first-child{left:304px;top:140px}
.steps-art .screen:last-child{left:0;top:210px}
/* ── 06 questions */
.faq{padding-bottom:168px}
.qa{margin-top:40px;border-bottom:1px solid #DADAD5}
.qa details{border-top:1px solid #DADAD5}
.qa summary{display:flex;align-items:center;gap:24px;min-height:96px;padding:20px 0;list-style:none;cursor:pointer;font-size:26px;font-weight:500}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:0 0 40px;height:40px;margin-inline-start:auto;border-radius:50%;border:1px solid rgba(16,24,40,.3);display:grid;place-items:center;font-family:"Geist",sans-serif;font-size:24px;font-weight:400;line-height:1}
.qa details[open] summary{min-height:0;padding-bottom:12px}
.qa details[open] summary::after{content:"−"}
.qa p{margin:0;padding:0 0 30px;max-width:760px;font-size:18px;line-height:1.7;opacity:.75}
.qa a{font-weight:600;text-underline-offset:4px}
/* ── 07 closing call */
.cta{padding:90px 0 110px}
.cta-grid{display:grid;grid-template-columns:1fr auto;align-items:end}
.cta-get .stores{margin:0}
.cta-get .offer{margin:0 0 20px;font-size:22px;font-weight:500;max-width:520px;line-height:1.6}
.cta-get .note{margin:14px 0 0;font-size:15px;opacity:.8}
/* ── footer */
.home-foot{position:relative;background:#050807;color:#fff;padding:64px 0 48px;border-top:1px solid rgba(255,255,255,.12);max-width:none;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1fr 200px 200px;gap:40px}
.foot-brand .lockup b{font-size:28px}
.foot-brand p{margin:16px 0 0;font-size:15px;color:rgba(255,255,255,.7)}
.foot-brand small{display:block;margin-top:56px;font-size:13px;color:rgba(255,255,255,.5)}
.home-foot nav{display:flex;flex-direction:column;gap:2px;margin:0}
.home-foot h4{margin:0 0 10px;font-size:14px;font-weight:400;color:rgba(255,255,255,.5)}
.home-foot nav a{display:flex;align-items:center;min-height:36px;color:rgba(255,255,255,.75);text-decoration:none}
.home-foot nav a:hover{color:#fff;text-decoration:underline}
/* ── wide AND tall screens: scale the whole 1440 design so it keeps its proportion on big monitors. Width alone is
   not enough: a wide but short laptop window zoomed the hero past the first screen (founder 2026-11-07). */
@media (min-width:1680px) and (min-height:1050px){.page-home main{zoom:1.12}}
@media (min-width:1860px) and (min-height:1150px){.page-home main{zoom:1.24}}
@media (min-width:2100px) and (min-height:1300px){.page-home main{zoom:1.4}}
@media (min-width:2400px) and (min-height:1480px){.page-home main{zoom:1.6}}
@media (min-width:2800px) and (min-height:1720px){.page-home main{zoom:1.86}}
@media (min-width:3200px) and (min-height:1960px){.page-home main{zoom:2.13}}
/* ── tablets: the six pitch cards in two columns */
@media (min-width:760px) and (max-width:1179px){.pts{grid-template-columns:1fr 1fr!important}}
/* ── narrow screens: the mobile frame «Website — Mobile 390» */
@media (max-width:1180px){
  .band{padding:72px 0}
  .band+.band,.band+.home-foot{margin-top:-32px;border-radius:32px 32px 0 0}
  .band h1{font-size:clamp(34px,10.4vw,76px)}
  .band h2,.supplier h2{font-size:clamp(36px,7.8vw,72px)}
  .lead{font-size:18px}
  .home-top nav{display:none}
  .home-top{justify-content:space-between}
  .hero{padding-top:24px;min-height:0;padding-bottom:0}
  .hero-grid{grid-template-columns:1fr;margin-top:48px}
  .hero-art{height:700px;margin-top:40px}
  .hero-art .shot{left:auto;right:calc(50% - 160px);top:0;width:250px}
  .hero-art .receipt{left:0;top:300px;width:230px;font-size:11.5px}
  .stores{margin-top:28px}
  .stores .get{flex:1 1 100%;align-items:flex-start}
  .pts-view{margin-top:32px}
  .pts{grid-template-columns:1fr;gap:16px}
  .pt{border-radius:28px}
  .pt-art{height:auto;padding:28px 20px}
  .pt-art img{max-width:380px;max-height:none}
  .pt-copy{padding:24px 22px 28px}
  .pt-copy h3{font-size:34px}
  .cta-get .offer{font-size:18px}
  .sup-head{grid-template-columns:1fr;gap:20px}
  .three{margin:40px -20px 0;padding:0 20px 8px;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;justify-content:flex-start}
  .three .phone{flex:0 0 250px;scroll-snap-align:start}
  .three .phone:nth-child(2){margin-top:0}
  .three .phone::after{display:none}
  .three .screen{border-radius:34px;padding:5px}
  .three .screen img{border-radius:29px}
  .three i{margin-top:22px}
  .three b{font-size:22px}
  .three span{font-size:15px}
  .tiles{padding:56px 0 88px}
  .bento{grid-template-columns:1fr}
  .tile.wide{flex-direction:column}
  .tile.wide .tile-art{flex:none;padding:24px 0}
  .tile-art{height:auto;padding:24px 0}
  .tile.wide .tile-copy,.tile-copy{padding:24px 12px 12px}
  .tile.books .receipt{width:240px;font-size:10.5px}
  .tile-copy h3,.tile.books .tile-copy h3{font-size:30px}
  .tile-copy p{font-size:16px}
  .steps{min-height:0;padding-bottom:0}
  .steps-grid{grid-template-columns:1fr}
  .step-list b{font-size:26px}
  .step-list span{font-size:16px}
  .steps-art{height:420px;margin-top:40px}
  .steps-art .screen{width:160px;border-radius:24px;padding:4px}
  .steps-art .screen img{border-radius:20px}
  .steps-art .screen:first-child{left:auto;right:12px;top:0}
  .steps-art .screen:last-child{left:12px;top:48px}
  .faq{padding-bottom:88px}
  .qa summary{font-size:19px;min-height:72px}
  .qa p{font-size:16px}
  .cta-grid{grid-template-columns:1fr;gap:28px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-brand{grid-column:1/-1}
  .foot-brand small{margin-top:20px}
}