/* Mobile-first shop: the choice of HOW to buy (bundle / building / build-your-own) is the page; single items sit last. One look, bottle green + light blue. */
:root{
  --green:#0B4A37; --green-2:#0E5841; --ink:#10241D; --muted:#44574F;
  --sky:#CFE8F3; --sky-2:#E3F1F7; --mint:#E4EFE9; --line:#DCE5E0; --paper:#FFFFFF; --soft:#F3F7F5; --link:#0B6E9A;
  --display:"Rubik", "Arial Hebrew", Arial, sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--paper)}
html{direction:rtl}
body{direction:rtl;margin:0;font-family:var(--display);color:var(--ink);font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
.wrap{max-width:560px;margin:0 auto}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;text-wrap:balance}
button{font-family:inherit;cursor:pointer}
a{color:var(--green)}
:focus-visible{outline:3px solid var(--link);outline-offset:2px}

.strip{background:var(--sky);color:var(--green);font-size:13px;font-weight:600;text-align:center;padding-block:8px}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:8px}
.iconbtn{width:44px;height:44px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;border-radius:12px;position:relative}
.logo{display:flex;align-items:center;gap:6px;font-size:27px;font-weight:900;color:var(--green);letter-spacing:-.5px;text-decoration:none}
.badge{position:absolute;top:4px;left:2px;min-width:18px;height:18px;border-radius:9px;background:var(--green);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}

.hero{background:var(--green);color:#fff}
.hero .wrap{padding-block:26px 22px;display:flex;flex-direction:column;gap:10px}
.hero .eyebrow{font-size:14px;font-weight:600;color:var(--sky)}
.hero h1{font-size:42px;line-height:1.02;font-weight:900;letter-spacing:-1px}
.hero p{margin:0;font-size:17px;color:#E2EEE8;max-width:34ch}

.choose{background:var(--green);padding-bottom:24px}
.choose h2{color:var(--sky);font-size:15px;font-weight:700;margin-bottom:10px}
.choices{display:grid;gap:10px}
.choice{display:flex;align-items:center;gap:14px;background:var(--paper);color:var(--ink);text-decoration:none;border-radius:20px;padding:14px;min-height:84px}
.choice .ic{flex:none;width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.choice b{display:block;font-size:19px;font-weight:800}
.choice span{font-size:14px;color:var(--muted)}
.choice .arrow{margin-inline-start:auto;flex:none}

section{padding-block:28px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.sec-h h2{font-size:26px;font-weight:900}
.sec-sub{color:var(--muted);font-size:15px;margin:0 0 16px}

.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.chip{min-height:52px;border:1.5px solid var(--line);background:var(--paper);border-radius:14px;font-size:16px;font-weight:700;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.chip small{font-size:11px;font-weight:500;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.chip[aria-pressed="true"] small{color:var(--sky)}

.reco{border:2px solid var(--green);border-radius:24px;overflow:hidden}
.reco .head{background:var(--sky-2);padding:16px;display:flex;align-items:flex-end;justify-content:center;gap:6px;min-height:118px;flex-wrap:wrap}
.reco .body{padding:16px;display:flex;flex-direction:column;gap:10px}
.reco .name{display:flex;justify-content:space-between;align-items:center;gap:8px}
.reco .name h3{font-size:24px;font-weight:900}
.pill{font-size:12px;font-weight:700;background:var(--green);color:var(--sky);border-radius:999px;padding:4px 10px;white-space:nowrap}
.items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;font-size:15px}
.items li{display:flex;gap:6px;align-items:baseline}
.items .q{font-weight:800;color:var(--green);min-width:2.2ch;font-variant-numeric:tabular-nums}
.lasts{display:flex;align-items:center;gap:8px;background:var(--mint);border-radius:12px;padding:10px 12px;font-size:15px;font-weight:600}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.price{font-size:28px;font-weight:900;color:var(--green)}
.price small{display:block;font-size:13px;font-weight:600;color:var(--muted)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:16px;border:0;background:var(--green);color:#fff;font-weight:800;font-size:17px;text-decoration:none;padding:0 20px}
.btn.ghost{background:var(--paper);color:var(--green);border:1.5px solid var(--green)}
.btn.sky{background:var(--sky);color:var(--green)}
.textlink{font-size:15px;font-weight:600;color:var(--link);background:none;border:0;padding:6px 0;text-align:center}

.allb{display:grid;gap:10px;margin-top:22px}
.bcard{display:flex;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:18px;padding:12px;background:var(--paper);text-align:start;width:100%;color:var(--ink)}
.bcard .pic{flex:none;width:72px;height:72px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.bcard b{font-size:17px;font-weight:800;display:block}
.bcard span{font-size:13px;color:var(--muted);display:block}
.bcard .for{font-size:12px;font-weight:700;color:var(--green);background:var(--mint);border-radius:999px;padding:2px 8px;display:inline-block;margin-top:4px}

.group{background:var(--sky)}
.group h2{color:var(--green)}
.steps{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.steps li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.steps .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
.bubble{background:var(--paper);border-radius:18px 18px 18px 4px;padding:12px 14px;font-size:15px;margin-bottom:14px}
.bubble .who{font-size:13px;font-weight:700;color:var(--green)}
.bubble .url{color:var(--link);font-weight:600;direction:ltr;text-align:right}
.bar{height:12px;background:var(--paper);border-radius:999px;overflow:hidden;display:flex}
.bar > i{display:block;background:var(--green);border-radius:999px;transition:width .3s}
.barlab{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:var(--green);margin-bottom:6px}

.gbox{background:var(--paper);border-radius:22px;padding:16px;margin-bottom:12px;display:grid;gap:12px}
.gbox h3{font-size:19px;font-weight:800;color:var(--green)}
.gbox .steps{margin:0}
.gbox .bubble{background:var(--sky-2);margin:0}
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vs-col{border:1.5px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted)}
.vs-col b{font-size:30px;font-weight:900;color:var(--ink);line-height:1.1}
.vs-lab{font-size:14px;font-weight:700;color:var(--ink)}
.vs-col.on{background:var(--green);border-color:var(--green);color:var(--sky)}
.vs-col.on b,.vs-col.on .vs-lab{color:#fff}
.gex{margin:0;font-size:15px;color:var(--ink)}
.who-grid{display:flex;flex-wrap:wrap;gap:8px}
.who-grid span{background:var(--sky-2);color:var(--green);font-weight:700;font-size:14px;border-radius:999px;padding:8px 12px}
.tiers-h{font-size:17px;font-weight:800;color:var(--green);margin:4px 0 8px}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tier{background:var(--paper);border-radius:14px;padding:10px 4px;text-align:center;display:flex;flex-direction:column;gap:2px;align-items:center}
.tier span{font-size:12px;font-weight:600;color:var(--muted)}
.tier b{font-size:22px;font-weight:900;color:var(--green);line-height:1.1}
.tier:first-child b{font-size:14px;line-height:1.2;padding-top:4px}
.tier small{font-size:11px;color:var(--muted)}
.tier.top{background:var(--green)}.tier.top span,.tier.top small{color:var(--sky)}.tier.top b{color:#fff}
.tnote{font-size:14px;color:var(--ink);margin:10px 0 14px}
.shelf{background:var(--green-2);border-top:1px solid #136B50;display:flex;align-items:flex-end;justify-content:space-around;padding:16px 10px}
.focus h2{font-size:24px;font-weight:900;margin-bottom:6px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fitem{border-radius:16px;padding:12px 8px;min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;text-decoration:none;color:var(--ink);text-align:center}
.fitem b{font-size:15px;font-weight:800}
.fitem span{font-size:12px;color:var(--muted)}
.fitem.more{border:2px dashed var(--green);background:var(--paper)}
.fitem .plus{font-size:34px;font-weight:800;color:var(--green);line-height:1}
.ask-card{background:var(--green);color:#fff;border-radius:26px;padding:22px 18px;display:grid;gap:12px}
.ask-eyebrow{color:var(--sky);font-weight:700;font-size:14px}
.ask-card h2{font-size:27px;line-height:1.1;font-weight:900}
.ask-card p{margin:0;color:#E2EEE8;font-size:16px}
.ask-form{display:grid;gap:6px}
.ask-form label{font-size:14px;font-weight:600;color:var(--sky)}
.ask-form input{min-height:50px;border:0;border-radius:14px;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.ask-form .btn{margin-top:6px}
.votes{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.vote{display:inline-flex;align-items:center;gap:6px;min-height:40px;border-radius:999px;border:1.5px solid #3C7A65;background:transparent;color:#fff;font-size:14px;font-weight:600;padding:0 12px}
.vote i{font-style:normal;color:var(--sky);font-variant-numeric:tabular-nums}
.vote[aria-pressed="true"]{background:var(--sky);color:var(--green);border-color:var(--sky)}
.vote[aria-pressed="true"] i{color:var(--green)}
.ph{display:block;object-fit:cover;border-radius:12px;background:#E9EAEA;max-width:100%}
.shelf .ph{border-radius:14px;border:2px solid rgba(255,255,255,.35)}
.fitem .ph.tile{width:100%;height:auto;aspect-ratio:1/1;border-radius:12px;margin-bottom:4px}
.fitem{justify-content:flex-start}
.plist{display:grid;gap:8px}
.prod{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:16px;padding:10px 12px}
.prod .pic{flex:none;width:64px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.prod .pic .ph{width:64px;height:64px}
.prod .t{flex:1;min-width:0;display:grid;gap:1px}
.prod b{font-size:16px;font-weight:800}
.prod .size{font-size:13px;color:var(--muted)}
.prod .pack{font-size:14px}
.prod .unit .pp{white-space:nowrap;color:var(--ink);font-size:15px;font-weight:800}
.prod .unit{font-size:13px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.plist.compact .prod{padding:8px 10px}
.plist.compact .prod .pic,.plist.compact .prod .pic .ph{width:48px;height:48px}
@media (min-width: 900px){ .plist:not(.compact){grid-template-columns:1fr} }
.builder{display:grid;gap:8px}
.row{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:16px;padding:10px 12px}
.row .pic{flex:none;width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.row .t{flex:1;min-width:0}
.row b{font-size:16px;font-weight:700;display:block}
.row span{font-size:13px;color:var(--muted)}
.step{display:flex;align-items:center;gap:4px;flex:none}
.step button{width:40px;height:40px;border-radius:12px;border:1.5px solid var(--green);background:var(--paper);color:var(--green);font-size:22px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center}
.step button.plus{background:var(--green);color:#fff}
.step output{min-width:2ch;text-align:center;font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.sum{margin-top:12px;background:var(--soft);border-radius:18px;padding:14px;display:grid;gap:10px}
.note{font-size:12px;color:var(--muted)}

.why{display:grid;gap:8px}
.why div{display:flex;gap:12px;align-items:center;background:var(--soft);border-radius:16px;padding:12px}
.why .ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--green);display:flex;align-items:center;justify-content:center}
.why b{display:block;font-size:16px}
.why span{font-size:14px;color:var(--muted)}

.singles{border-top:8px solid var(--soft)}
.single{display:flex;align-items:center;gap:12px;padding-block:10px;border-bottom:1px solid var(--line)}
.single .t{flex:1;min-width:0}
.single b{display:block;font-size:16px;font-weight:700}
.single span{font-size:13px;color:var(--muted)}
.add{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--green);background:var(--paper);display:flex;align-items:center;justify-content:center;flex:none}

footer{background:var(--soft);font-size:13px;color:var(--muted)}
footer .wrap{padding-block:20px 120px;display:grid;gap:8px}
footer nav{display:flex;flex-wrap:wrap;gap:14px}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--paper);border-top:1px solid var(--line);padding-top:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.dock .wrap{display:flex;gap:10px}
.dock .wa{flex:none;width:54px;height:54px;border-radius:16px;border:1.5px solid var(--green);display:flex;align-items:center;justify-content:center;background:var(--paper)}
.dock .cart{flex:1;justify-content:space-between}
.dock .cart small{font-size:14px;font-weight:600;color:var(--sky)}

.sheet{position:fixed;inset:0;z-index:40;background:var(--paper);overflow-y:auto;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet .bar-top{display:flex;align-items:center;justify-content:space-between;padding-block:8px;border-bottom:1px solid var(--line)}
.sheet .hero2{background:var(--sky);padding-block:16px}
.sheet .hero2 h2{font-size:23px;font-weight:900;color:var(--ink)}
.prow{display:flex;justify-content:space-between;align-items:center;padding-block:11px;border-bottom:1px solid var(--line);font-size:15px}
.paid{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mini{min-height:64px;text-align:start;padding:10px 12px;border:1.5px solid var(--line);background:var(--paper);border-radius:14px;display:flex;flex-direction:column;gap:2px;color:var(--ink)}
.mini b{font-size:15px}
.mini span{font-size:13px;color:var(--muted)}
.mini[aria-pressed="true"]{border-color:var(--green);background:var(--mint)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:15px;font-weight:600;z-index:50}

/* ---- desktop: same page, laid out for a wide screen ---- */
.topnav{display:none}
@media (min-width: 900px){
  header.top .wrap{gap:24px}
  header.top .iconbtn[aria-label="תפריט"]{display:none}
  .topnav{display:flex;gap:28px;margin-inline-start:48px;margin-inline-end:0;font-weight:600;font-size:16px}
  header.top .wrap{justify-content:flex-start}
  header.top .acct{margin-inline-start:auto}
  .topnav a{text-decoration:none;color:var(--ink)}
  .topnav a:hover{color:var(--green)}
}
.near{background:var(--paper)}
.signup{background:var(--sky-2);border-radius:20px;padding:16px;display:grid;gap:6px}
.signup b{font-size:18px;color:var(--green)}
.signup > span{font-size:14px;color:var(--muted)}
.signup label{font-size:14px;font-weight:700;margin-top:4px}
.signup input{min-height:50px;border:1.5px solid var(--line);border-radius:14px;padding:0 14px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.signup .btn{margin-top:8px}
.hello{font-weight:800;color:var(--green);margin-bottom:8px}
.acct{border:0;background:transparent;color:var(--green);font-weight:700;font-size:14px;min-height:44px;padding:0 6px;white-space:nowrap}

.nrules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.nrules div{background:var(--soft);border-radius:14px;padding:10px 12px;display:grid;gap:2px}
.nrules b{font-size:14px;color:var(--green)}
.nrules span{font-size:13px;color:var(--muted)}
.nrow input{background:#fff;color:var(--ink)}
.joined{display:flex;gap:10px;align-items:center;background:var(--green);color:#fff;border-radius:16px;padding:12px 14px;margin-bottom:12px}
.joined b{display:block}
.joined span{font-size:14px;color:var(--sky)}
.joined button{margin-inline-start:auto;background:transparent;border:1.5px solid var(--sky);color:var(--sky);border-radius:12px;min-height:40px;padding:0 12px;font-weight:700}
.ncols{display:grid;gap:18px}
.addr-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.achip{white-space:nowrap;min-height:42px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-weight:700;font-size:15px;color:var(--ink)}
.achip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.achip.add{border-style:dashed;color:var(--green)}
.nlabel{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.nrow{display:flex;gap:8px}
.nrow input{flex:1;min-width:0;min-height:52px;border:1.5px solid var(--line);border-radius:14px;padding:0 14px;font:inherit;font-size:16px}
.nrow .btn{flex:none}
.ntoggle{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:15px}
.ntoggle input{width:22px;height:22px;accent-color:var(--green);flex:none;margin-top:1px}
.appbox{margin-top:14px;background:var(--sky-2);border-radius:18px;padding:14px;display:grid;gap:4px}
.appbox span{font-size:14px;color:var(--muted)}
.appbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.appbtn{background:var(--ink);color:#fff !important;border-radius:12px;padding:8px 12px;font-size:13px !important;font-weight:600}
.nlist-h{display:flex;gap:6px;align-items:baseline;margin-bottom:8px}
.nlist-h span{font-size:13px;color:var(--muted)}
.nlist{display:grid;gap:8px}
.ncard{border:1.5px solid var(--line);border-radius:18px;padding:12px 14px;display:flex;gap:12px;align-items:center}
.ncard .t{flex:1;min-width:0}
.ncard b{display:block;font-size:16px}
.ncard .tag{display:inline-block;font-size:12px;font-weight:700;color:var(--green);background:var(--mint);border-radius:999px;padding:2px 8px;margin:4px 0}
.ncard span.m{display:block;font-size:13px;color:var(--muted)}
.ncard .btn{min-height:44px;padding:0 16px;font-size:15px}
@media (min-width: 900px){
  .ncols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
}
.hero-art{display:none}
@media (min-width: 900px){
  .wrap{max-width:1140px}
  body{font-size:17px}
  .strip{font-size:14px}
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;padding-block:64px}
  .hero-text{display:flex;flex-direction:column;gap:14px}
  .hero h1{font-size:60px}
  .hero p{font-size:20px;max-width:46ch}
  .hero-text .btn{max-width:360px}
  .hero-art{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .hero-art .ph{width:100%;height:auto;aspect-ratio:1/1;border-radius:22px;border:3px solid rgba(255,255,255,.18)}
  .shelf{display:none}
  section{padding-block:56px}
  .sec-h h2,.focus h2{font-size:36px}
  .sec-sub{font-size:18px;max-width:70ch}
  .fgrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
  .fitem{min-height:0;padding:14px}
  .gcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
  .tiers b{font-size:28px}
  .bcols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:start}
  .bcols .allb{margin-top:0}
  .reco .head{min-height:170px}
  .bdcols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
  .builder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bdcols .sum{margin-top:0;position:sticky;top:90px}
  .ask-card{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;padding:40px;align-items:center}
  .ask-main{display:grid;gap:12px}
  .ask-card h2{font-size:40px}
  .why{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .dock{display:none}
  footer .wrap{padding-block:28px}
}

/* compact, normal-size controls in the nearby section (all widths) */
.near .sec-sub{font-size:15px}
.near .nrow input,.signup input{min-height:42px;border-radius:10px;font-size:15px;padding:0 12px}
.near .btn{min-height:42px;border-radius:10px;font-size:15px;padding:0 16px}
.near .nlabel,.signup label{font-size:13px}
.ntoggle{font-size:14px}.ntoggle input{width:18px;height:18px}
.signup{padding:14px;border-radius:14px;gap:6px}
.signup b{font-size:15px}
.signup > span{font-size:13px}
.su-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.su-row label{display:block;margin-bottom:4px}
.su-row input{width:100%}
.signup .btn{justify-self:start;margin-top:4px}
.appbox{padding:12px;border-radius:14px}
.appbox b{font-size:15px}
.ncard{padding:10px 12px;border-radius:12px}
.ncard b{font-size:15px}
.ncard .btn{min-height:38px;font-size:14px;padding:0 14px}
.nrules div{padding:8px 10px;border-radius:10px}
.nrules b{font-size:13px}.nrules span{font-size:12px}
.achip{min-height:36px;font-size:14px;padding:0 12px}
@media (min-width: 900px){
  .near .sec-h h2{font-size:30px}
  .ncols{gap:40px}
}

/* ===== one size system for the whole site (best practice: 16px body, 46px controls, clear type scale, ~65ch text) ===== */
body{font-size:16px;line-height:1.5}
h1,h2,h3{line-height:1.15}
.hero h1{font-size:36px;letter-spacing:-.5px}
.hero p{font-size:17px}
.hero .eyebrow,.ask-eyebrow{font-size:13px;letter-spacing:.2px}
.sec-h h2,.focus h2,.near .sec-h h2,.ask-card h2{font-size:24px;font-weight:900}
.sec-sub,.near .sec-sub{font-size:16px;max-width:65ch}
section{padding-block:40px}
.btn,.near .btn,.ask-form .btn,.signup .btn,.dock .btn{min-height:46px;border-radius:12px;font-size:16px;padding:0 20px}
.textlink{font-size:15px}
input[type=text],input[type=tel],.near .nrow input,.signup input,.ask-form input,#apt{min-height:46px;border-radius:12px;font-size:16px;padding:0 14px}
.ask-form label,.signup label,.nlabel{font-size:14px;font-weight:600}
.dock .wa{width:46px;height:46px;border-radius:12px}
.step button{width:38px;height:38px;border-radius:10px;font-size:20px}
.step output{font-size:16px}
.vote{min-height:36px;font-size:14px;padding:0 12px}
.achip{min-height:38px;font-size:14px}
.ask-card{padding:20px 16px;border-radius:20px;gap:10px}
.ask-card p{font-size:16px}
.ask-form{gap:6px}
.tiers b{font-size:20px}
.fitem b{font-size:15px}
.ncard .btn{min-height:40px;font-size:15px}
.prod b{font-size:16px}
.why b{font-size:16px}
@media (min-width: 900px){
  body{font-size:16px}
  section{padding-block:72px}
  .hero .wrap{padding-block:56px;gap:48px}
  .hero h1{font-size:52px}
  .hero p{font-size:18px}
  .sec-h h2,.focus h2,.near .sec-h h2{font-size:32px}
  .ask-card h2{font-size:30px}
  .sec-sub,.near .sec-sub{font-size:17px}
  .hero-text .btn{max-width:300px}
  .btn{width:auto}
  .ask-card{padding:36px 40px;gap:40px}
  .ask-main{max-width:520px}
  .ask-form{max-width:440px}
  .ask-form .btn{justify-self:start;min-width:200px}
  .signup .btn{justify-self:start}
  .gcols .btn,.bdcols .sum .btn{width:100%}
  .tiers b{font-size:24px}
  .why b{font-size:16px}
}
.hsearch{margin-top:6px;max-width:460px}
.hsearch .nlabel{color:var(--sky);display:block;margin-bottom:6px;font-size:14px;font-weight:600}
.hsearch .nrow input{min-height:46px;border:0;border-radius:12px}
.hsearch .btn{min-height:46px}

/* nearby section, clean */
.nc{display:grid;gap:20px}
.nc-main{min-width:0}
.nfacts{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted)}
.nfacts li{display:flex;align-items:center;gap:6px}
.nfacts svg{color:var(--green);flex:none}
.nc-side{background:var(--soft);border-radius:16px;padding:16px;display:grid;gap:10px;align-content:start}
.nc-title{font-size:16px;color:var(--ink)}
.nc-side .signup{background:transparent;padding:0;border-radius:0;gap:8px}
.linkbtn{background:none;border:0;padding:0;color:var(--link);font:inherit;font-size:15px;font-weight:600;text-align:start;text-decoration:underline;text-underline-offset:3px}
.su-form{display:grid;gap:8px}
.nc-side .ntoggle{margin:0}
@media (min-width: 900px){ .nc{grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start} }



/* ask for a product, clean */
.ask2{background:var(--sky-2);border-radius:20px;padding:24px 18px;display:grid;gap:10px;text-align:center;justify-items:center}
.ask2 .ask-eyebrow{color:var(--green);font-weight:700}
.ask2 h2{font-size:24px;font-weight:900;color:var(--ink);max-width:24ch}
.ask2 p{margin:0;color:var(--muted);font-size:16px;max-width:52ch}
.ask-row{display:grid;gap:8px;width:100%;max-width:640px;margin-top:6px}
.ask-row input{min-height:46px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;font-size:16px;background:#fff;color:var(--ink);min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.votes-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;font-size:14px;color:var(--muted)}
.ask2 .votes{margin:0;justify-content:center}
.ask2 .vote{border-color:var(--line);color:var(--ink);background:#fff}
.ask2 .vote i{color:var(--green)}
.ask2 .vote[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.ask2 .vote[aria-pressed="true"] i{color:var(--sky)}
@media (min-width: 900px){
  .ask2{padding:44px 40px}
  .ask2 h2{font-size:30px}
  .ask-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto}
}

/* compact product rows: the whole list fits in about one screen, on phone and desktop */
.plist{gap:6px}
.prod{gap:10px;padding:8px 10px;border-radius:12px;align-items:center}
.prod .pic{width:52px;height:52px;border-radius:10px;background:#E9EAEA;overflow:hidden;flex:none}
.prod .pic .ph{width:52px;height:52px;border-radius:10px}
.prod .t{gap:0}
.prod b{font-size:15px}
.prod .meta{font-size:13px;color:var(--muted)}
.prod .unit{font-size:13px;color:var(--green);font-weight:700}
.prod .unit .pp{font-size:15px;color:var(--ink);font-weight:800}
.prod .step button{width:34px;height:34px;font-size:18px;border-radius:9px}
.prod .step output{min-width:2ch;font-size:15px}
@media (min-width: 900px){
  #products .bdcols{grid-template-columns:minmax(0,1fr) 280px;gap:24px}
  #plist{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px}
  #products .sum{position:sticky;top:90px}
}

.ostep{display:flex;align-items:center;gap:10px}
.ostep .n{width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.ostep b{font-size:17px}
.ofield{display:grid;gap:6px}
.ofield label{font-size:14px;font-weight:700}
.ofield input{min-height:46px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.osum{display:flex;justify-content:space-between;align-items:center;background:var(--soft);border-radius:12px;padding:12px 14px}
.osum b{font-size:18px;color:var(--green)}
.olabel{font-size:14px;font-weight:700}
.omode{display:grid;gap:8px}
.ocard{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.ocard input{accent-color:var(--green);width:18px;height:18px;margin-top:2px;flex:none}
.ocard b{display:block;font-size:15px}
.ocard small{font-size:13px;color:var(--muted)}
.ocard:has(input:checked){border-color:var(--green);background:var(--mint)}
.withbox{background:var(--green);color:#fff;border-radius:14px;padding:12px 14px;display:grid;gap:2px}
.withbox b{font-size:16px}
.withbox span{font-size:14px;color:var(--sky)}
.demo-switch{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.demo-switch button{min-height:30px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:inherit;font-size:12px;padding:0 10px}
.demo-switch button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.ninfo{background:var(--green);color:#fff;border-radius:16px;padding:16px;display:grid;gap:4px}
.ninfo b{font-size:18px}
.ninfo > span{color:var(--sky);font-size:14px}
.ninfo ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;font-size:14px}
.ninfo li{display:flex;gap:8px;align-items:flex-start}
.ninfo svg{color:var(--sky);flex:none;margin-top:2px}
.okmark{width:56px;height:56px;border-radius:50%;background:var(--mint);color:var(--green);display:flex;align-items:center;justify-content:center}
.olink{direction:ltr;font-weight:700;color:var(--link);background:var(--soft);border-radius:12px;padding:10px 16px}

/* the flows are full pages */
.sheet .bar-top{position:sticky;top:0;z-index:2;background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px}
.backbtn{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:var(--green);font:inherit;font-weight:700;font-size:15px;min-height:44px;padding:0 4px}
.ptitle{font-weight:800;font-size:16px}
.logo.small{font-size:18px;font-weight:900;color:var(--green);text-decoration:none}
.pagewrap{padding-block:20px 40px;display:grid;gap:20px}
.pcol{display:grid;gap:12px;align-content:start;min-width:0}
input[type=radio],input[type=checkbox]{color-scheme:light}
@media (min-width: 900px){
  .pagewrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding-block:36px 56px}
  .sheet .hero2 .wrap{padding-block:8px}
}

/* open-a-group: a calm 2-step page */
#openForm{padding-block:20px 24px}
.owrap{max-width:680px;margin:0 auto;width:100%}
.oprog{list-style:none;margin:0 0 16px;padding:0;display:flex;gap:8px}
.oprog li{flex:1;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--muted);border-bottom:3px solid var(--line);padding-bottom:8px}
.oprog li span{width:24px;height:24px;border-radius:50%;background:var(--line);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.oprog li.on{color:var(--green);border-color:var(--green)}
.oprog li.on span{background:var(--green);color:#fff}
.ocard2{display:grid;gap:14px}
.oh{font-size:22px;font-weight:900;margin:0}
.oh-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.orow{display:grid;gap:14px}
.omode{grid-template-columns:repeat(2,minmax(0,1fr))}
.omode .ocard{padding:10px;align-items:center}
.omode .ocard small{display:block}
#oNext{justify-self:start;min-width:240px}
.ogrid{gap:6px}
.obar{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line);padding-block:10px calc(10px + env(safe-area-inset-bottom,0px));padding-inline:max(16px,env(safe-area-inset-left,0px));box-shadow:0 -8px 24px rgba(16,36,29,.06)}
.obar-in{display:flex;align-items:center;justify-content:space-between;gap:12px}
.osum2{display:grid;line-height:1.2}
.osum2 span{font-size:13px;color:var(--muted)}
.osum2 b{font-size:20px;color:var(--green)}
.osum2 small{font-size:12px;color:var(--muted)}
@media (min-width: 900px){
  #openForm{padding-block:36px 32px}
  .orow{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* personal details + alignment */
.orow{align-items:end}
.ofield input:not([type=radio]):not([type=checkbox]),.pbox input{width:100%;height:46px;min-height:46px;box-sizing:border-box}
input[type=email],input[type=tel]{direction:ltr;text-align:right}
.pbox{border:1.5px solid var(--line);border-radius:14px;padding:14px;margin:0;display:grid;gap:10px;min-width:0}
.pbox legend{font-weight:800;font-size:15px;padding:0 6px}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pgrid .span2{grid-column:1/-1}
#aptBox{margin-top:4px}
@media (min-width: 900px){ .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))} .pgrid .span2{grid-column:span 2} }

/* address autocomplete (simulated in the mockup) */
.ac-wrap{position:relative}
.ac-list{color:var(--ink);text-align:start;position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1.5px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(16,36,29,.14);list-style:none;margin:0;padding:4px;max-height:240px;overflow:auto}
.ac-list li{display:flex;gap:10px;align-items:center;padding:10px;border-radius:8px;cursor:pointer;font-size:15px}
.ac-list li:hover,.ac-list li[aria-selected="true"]{background:var(--soft)}
.ac-list li small{display:block;color:var(--muted);font-size:12px}
.ac-list svg{flex:none;color:var(--green)}
.ac-foot{font-size:11px;color:var(--muted);padding:4px 10px 2px;text-align:left}

/* order steps fit one screen: tighter rows, two columns on wide screens */
.ogrid .prod{padding:6px 8px;gap:8px}
.ogrid .prod .pic,.ogrid .prod .pic .ph{width:44px;height:44px}
.ogrid .prod b{font-size:14px}
.ogrid .prod .meta{font-size:12px}
.ogrid .prod .unit{font-size:12px}
.ogrid .prod .unit .pp{font-size:14px}
.ogrid .prod .step button{width:32px;height:32px;font-size:17px}
.ogrid{gap:5px}
#oStep2 .oh,#nearForm .oh{font-size:20px}
@media (min-width: 900px){
  #oStep2,#nearForm .owrap{max-width:980px}
  .owrap:has(#oStep2:not([hidden])){max-width:980px}
  .ogrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px}
  .obar .owrap{max-width:980px}
}

@media (max-width: 899px){
  #openForm{padding-block:10px 12px}
  .oprog{margin-bottom:8px}
  .oprog li{padding-bottom:6px}
  #oStep2.ocard2{gap:8px}
  .ogrid .prod{padding:5px 8px}
  .ogrid .prod .pic,.ogrid .prod .pic .ph{width:40px;height:40px}
}
.asksmall{padding-block:12px;text-align:center;font-size:14px}
.asksmall a{color:var(--link);font-weight:600}

input[readonly]{background:var(--soft) !important;color:var(--muted) !important;cursor:not-allowed}
.lockline{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--green);font-weight:600}
.lockline svg{flex:none}

/* invite page */
.jwrap{max-width:680px}
.jstep{display:grid;gap:14px}
.jinvite{background:var(--green);color:#fff;border-radius:20px;padding:22px 18px;display:grid;gap:8px}
.jfrom{font-size:14px;font-weight:700;color:var(--sky)}
.jinvite h1{font-size:28px;line-height:1.15;font-weight:900;margin:0}
.jinvite p{margin:0;color:#E2EEE8}
.jfacts{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.jfacts li{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.08);border-radius:12px;padding:10px 12px}
.jfacts svg{color:var(--sky);flex:none;margin-top:3px}
.jfacts b{display:block;font-size:15px}
.jfacts small{display:block;font-size:13px;color:var(--sky)}
.jmembers{display:grid;gap:0}
.jmembers > b{font-size:15px;margin-bottom:4px}
#jStart{justify-self:stretch}
@media (min-width: 900px){ .jinvite{padding:32px} .jinvite h1{font-size:34px} #jStart{justify-self:start;min-width:280px} .jwrap:has(#j1:not([hidden])){max-width:980px} }

/* inner pages sit under the site header, which stays */
header.top{z-index:60}
.sheet{top:var(--hdr,0px) !important}
.sheet .logo.small{visibility:hidden}
/* nearby order: compact */
.nwrap{gap:10px}
.ninfo2{background:var(--green);color:#fff;border-radius:14px;padding:12px 14px;display:grid;gap:2px}
.ninfo2 b{font-size:16px}
.ninfo2 > span{color:var(--sky);font-size:14px;font-weight:600}
.nchips{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:4px}
.nchips span{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:#fff;font-weight:500}
.nchips svg{color:var(--sky)}
#nearForm .oprog{margin:0}
.nempty{border:1.5px dashed var(--green);border-radius:14px;padding:16px;display:grid;gap:6px;justify-items:start}
.nempty span{color:var(--muted);font-size:14px}
@media (min-width: 900px){ .nwrap:has(#nS1:not([hidden])){max-width:980px} }

/* tighter inner pages so each step fits one screen */
#openForm{padding-block:12px 12px}
.oprog{margin-bottom:10px}
.oprog li{font-size:13px;padding-bottom:6px}
.ocard2{gap:10px}
.oh{font-size:19px}
.ofield{gap:4px}
.ofield label,.olabel{font-size:13px}
.note{font-size:12px}
.pbox{padding:10px 12px;gap:8px}
.pgrid{gap:8px}
@media (max-width: 899px){
  #nearForm{padding-block:8px 8px !important}
  .ninfo2{padding:10px 12px}
}

/* compact rows: two lines */
.prod .t b .sz{font-size:12px;font-weight:500;color:var(--muted)}
.prod .unit{font-size:12px;color:var(--muted);font-weight:500}
.prod .unit .pp{font-size:15px;color:var(--ink);font-weight:800}
body.paging .strip{display:none}
/* invite landing, compact */
.jinvite{padding:16px;gap:6px;border-radius:16px}
.jinvite h1{font-size:22px}
.jinvite p{font-size:15px}
.jfrom{font-size:13px}
.jfacts{gap:6px;margin-top:4px}
.jfacts li{padding:8px 10px;border-radius:10px;gap:8px}
.jfacts b{display:inline;font-size:14px}
.jfacts small{display:inline;font-size:13px}
.jmembers2{font-size:13px;color:var(--sky);display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px}
.jmembers2 span{color:#fff;font-weight:600}
#jStart{margin-top:6px}
.demo-switch{margin-bottom:8px}
.demo-switch button{color:var(--ink)}
@media (min-width: 900px){ .jinvite{padding:22px 24px} .jinvite h1{font-size:26px} #jStart{justify-self:start;min-width:260px} }
@media (max-width: 899px){
  .sheet .bar-top{min-height:48px}
  .ogrid .prod{padding:4px 8px}
  .ogrid .prod .pic,.ogrid .prod .pic .ph{width:38px;height:38px}
  .oprog{margin-bottom:6px}
  .oh-row .oh{font-size:17px}
}

@media (max-width: 899px){
  .ogrid{gap:4px}
  .ogrid .prod{padding:3px 8px;min-height:0}
  .ogrid .prod .pic,.ogrid .prod .pic .ph{width:34px;height:34px;border-radius:8px}
  .ogrid .prod b{font-size:14px;line-height:1.25}
  .ogrid .prod .unit{line-height:1.25}
  .ogrid .prod .step button{width:30px;height:30px}
  .obar{padding-block:6px calc(6px + env(safe-area-inset-bottom,0px))}
  .osum2 b{font-size:18px}
  .obar .btn{min-height:42px}
}
body.jsteps .demo-switch{display:none}

@media (max-width: 899px) and (max-height: 780px){
  #j1 .oh-row .oh{font-size:15px}
  .ninfo2{padding:8px 12px}
  .ninfo2 b{font-size:15px}
  .ogrid .prod .pic,.ogrid .prod .pic .ph{width:30px;height:30px}
  .ogrid .prod{padding:2px 8px}
  .ogrid .prod .step button{width:28px;height:28px}
}

/* invite landing v2 */
.jstep{align-content:start;padding-block:0 !important}
.inv{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:12px;box-shadow:0 10px 30px rgba(16,36,29,.06)}
.inv-head{display:flex;align-items:center;gap:10px}
.ava{width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.inv-head b{display:block;font-size:15px}
.inv-head small{display:block;font-size:13px;color:var(--muted)}
.inv h1{font-size:24px;line-height:1.2;font-weight:900;margin:0;color:var(--ink)}
.inv > p{margin:0;color:var(--muted);font-size:15px}
.inv-tiles{display:grid;grid-template-columns:1fr;gap:8px}
.tile{display:flex;gap:10px;align-items:center;background:var(--soft);border-radius:12px;padding:10px 12px}
.tile .ic{width:36px;height:36px;border-radius:10px;background:var(--mint);color:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
.tile b{display:block;font-size:15px}
.tile small{display:block;font-size:12px;color:var(--muted)}
.inv-prog{display:grid;gap:6px}
.inv-prog-l{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.inv-prog-l b{color:var(--ink);font-size:15px}
.inv-prog .bar{background:var(--mint);height:8px}
.inv-mem{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}
.inv-mem .lbl{color:var(--muted);margin-inline-end:4px}
.inv-mem .m{background:var(--soft);border-radius:999px;padding:4px 10px;font-weight:600}
@media (min-width: 900px){
  .inv{padding:28px 32px;gap:14px}
  .inv h1{font-size:28px}
  .inv-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  #jStart{justify-self:start;min-width:260px}
}

/* purchase-group section: normal proportions */
#group{padding-block:40px}
#group .gsub{color:var(--ink);font-size:16px;font-weight:500;margin-bottom:18px}
#group .steps{gap:8px;margin-bottom:12px}
#group .steps li{font-size:15px;gap:10px;align-items:center}
#group .steps .n{width:26px;height:26px;font-size:13px}
#group .bubble{padding:10px 12px;font-size:14px;border-radius:14px 14px 14px 4px}
#group .bubble .who{font-size:12px}
#group .gcol:last-child{background:#fff;border-radius:16px;padding:16px;display:grid;gap:10px;align-content:start}
#group .tiers-h{font-size:15px;margin:0}
#group .tiers{gap:6px}
#group .tier{padding:8px 4px;border:1px solid var(--line)}
#group .tier b{font-size:18px}
#group .tier:first-child b{font-size:13px}
#group .tier.top{border-color:var(--green)}
#group .tnote{font-size:13px;margin:0;color:var(--muted)}
#group .barlab{font-size:13px;margin:0}
#group .bar{height:8px;background:var(--mint)}
.gcta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:4px}
.gcta .btn{flex:none}
@media (min-width: 900px){ #group{padding-block:56px} #group .gcols{gap:40px} #group .tier b{font-size:22px} }
/* ask page */
.askp{display:grid;gap:20px}
.askp h1{font-size:24px;font-weight:900;margin:0 0 4px}
.askp-main > p{margin:0 0 12px;color:var(--muted);font-size:15px}
.askf{display:grid;gap:10px;max-width:420px}
.askf .btn{justify-self:start;min-width:180px}
.askp-pop{background:var(--soft);border-radius:16px;padding:16px;display:grid;gap:6px;align-content:start}
.askp-pop > b{font-size:16px}
.vlist{display:grid;gap:6px;margin-top:6px}
.vlist .vote{width:100%;justify-content:space-between;min-height:42px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:15px;padding:0 14px}
.vlist .vote i{color:var(--green);font-weight:800}
.vlist .vote[aria-pressed="true"]{background:var(--mint);border-color:var(--green);color:var(--ink)}
.vlist .vote[aria-pressed="true"] i{color:var(--green)}
@media (min-width: 900px){ .askp{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:start} #askSheet .owrap{max-width:900px} }

.nbwrap{max-width:980px}
.nbsearch{max-width:520px;margin-bottom:14px}
@media (min-width: 900px){ #nearbySheet .nc{grid-template-columns:minmax(0,1fr) 320px} }

.htiers{display:grid;gap:6px;margin:4px 0 6px;max-width:520px}
.ht-h{font-size:13px;color:var(--sky);font-weight:600}
.ht-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ht{background:rgba(255,255,255,.1);border:1px solid rgba(207,232,243,.35);border-radius:12px;padding:8px 4px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0;line-height:1.15}
.ht small{font-size:11px;color:var(--sky)}
.ht b{font-size:20px;font-weight:900;color:#fff}
.ht:first-child b{font-size:13px;padding-block:3px}
.ht em{font-style:normal;font-size:11px;color:#E2EEE8}
.ht.top{background:var(--sky);border-color:var(--sky)}
.ht.top small,.ht.top em{color:var(--green)}
.ht.top b{color:var(--green)}
@media (min-width: 900px){ .ht b{font-size:24px} .ht small,.ht em{font-size:12px} }

/* milestones on the invite page */
.ms{display:grid;gap:8px;background:var(--soft);border-radius:14px;padding:12px}
.ms-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted)}
.ms-top b{font-size:18px;color:var(--ink)}
.ms-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;text-align:center}
.ms-track li{display:grid;justify-items:center;gap:2px;line-height:1.2}
.ms-track .dot{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.ms-track b{font-size:12px}
.ms-track small{font-size:11px;color:var(--muted)}
.ms-track li.done .dot{background:var(--green);border-color:var(--green);color:#fff}
.ms-track li.done small{color:var(--green);font-weight:700}
.ms-track li.next .dot{border-color:var(--green);color:var(--green);box-shadow:0 0 0 4px rgba(11,74,55,.12)}
.ms-track li.next small{color:var(--ink);font-weight:800}
.ms-bar{height:6px;background:#fff;border-radius:999px;overflow:hidden;display:flex}
.ms-bar i{display:block;background:var(--green);border-radius:999px}
@media (min-width: 900px){ .ms-track b{font-size:14px} .ms-track small{font-size:12px} .ms-track .dot{width:40px;height:40px} }

@media (max-width: 899px){
  .inv{padding:14px;gap:9px}
  .inv h1{font-size:21px}
  .inv > p{font-size:14px}
  .tile{padding:7px 10px}
  .tile .ic{width:30px;height:30px}
  .ms{padding:10px;gap:6px}
  .ms-track .dot{width:30px;height:30px}
}


.htiers2{font-size:13px;color:var(--sky);line-height:1.5;margin:2px 0 6px;max-width:52ch}
.htiers2 b{color:#fff;font-weight:700}
.htiers.soft{margin-top:12px;opacity:.9}
.htiers.soft .ht{background:transparent;border-color:rgba(207,232,243,.25);padding:6px 4px}
.htiers.soft .ht b{font-size:17px}
.htiers.soft .ht:first-child b{font-size:12px}
.htiers.soft .ht-h{font-size:12px}
@media (min-width: 900px){ .htiers.soft .ht b{font-size:19px} }
.ncard2 .t{display:grid;gap:3px}
.ncard2 .tag{justify-self:start}
.nstat{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.nstat b{display:inline !important;color:var(--ink);font-size:15px}
.nstat .cb{color:var(--green);font-weight:700}
.nbar{display:block;height:6px;background:var(--mint);border-radius:999px;overflow:hidden;max-width:320px}
.nbar i{display:block;height:100%;background:var(--green);border-radius:999px}
.nhome{padding-block:36px}
.nhome .sec-h{align-items:center}
.nlist-home{display:grid;gap:8px}
@media (min-width: 900px){ .nlist-home{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* smaller hero */
.hero h1{font-size:30px !important}
.hero p{font-size:15px !important}
.hero .wrap{padding-block:20px 18px !important}
.hero-text{gap:10px !important}
.shelf{padding:10px !important}
.shelf .ph{width:50px !important;height:50px !important}
@media (min-width: 900px){
  .hero .wrap{padding-block:36px !important;gap:40px !important;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) !important}
  .hero h1{font-size:40px !important}
  .hero p{font-size:16px !important}
  .hero-art{max-width:380px;justify-self:end;gap:10px !important}
  .hero-art .ph{border-radius:16px !important}
  .hero-text .btn{max-width:280px}
  .hsearch{max-width:420px}
  .htiers.soft{max-width:420px}
}

/* cashback footnote + sign-up recommendation */
.cbnote{font-size:12px;color:var(--muted);margin:2px 0 0;line-height:1.45}
.cbnote.onDark{color:#BFD9CF;max-width:420px}
.acct-opt{display:grid;gap:6px;background:var(--mint);border-radius:12px;padding:10px 12px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--green);flex:none;margin-top:2px}
.chk b{display:block;font-size:14px}
.chk small{display:block;font-size:12px;color:var(--muted)}
.saveacct{display:grid;gap:4px;justify-items:center;background:var(--soft);border-radius:12px;padding:12px;max-width:420px}
.saveacct span{font-size:13px;color:var(--muted)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.nask{border:1.5px dashed var(--line);border-radius:14px;padding:16px;display:grid;gap:4px}
.nask span{font-size:14px;color:var(--muted)}
@media (max-width: 899px){ .inv{gap:7px} .inv h1{font-size:20px} .inv .cbnote{font-size:11px} .ms-track small{font-size:10px} }
.nfacts-top{margin:0 0 12px}
.nfacts-top .nfacts{margin:0}

/* focus v3: moving product strip */
.focus2{padding-block:28px;background:var(--paper);overflow:hidden}
.f2-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:14px}
.f2-head h2{font-size:22px;font-weight:900;margin:0}
.f2-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted)}
.f2-badges li{display:inline-flex;align-items:center;gap:5px}
.f2-badges svg{color:var(--green)}
.mq{overflow:hidden;mask-image:linear-gradient(to left,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;gap:12px;width:max-content;animation:mq 32s linear infinite;padding-block:6px}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(50%)}}
.mq-item{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:999px;padding:6px 18px 6px 6px;text-decoration:none;color:var(--ink);flex:none;transition:transform .2s ease, background .2s ease}
.mq-item:hover{transform:translateY(-2px);background:var(--mint)}
.mq-item .ph{width:56px;height:56px;border-radius:50%;flex:none}
.mq-item b{display:block;font-size:15px}
.mq-item small{display:block;font-size:12px;color:var(--muted)}
.f2-more{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:600;color:var(--green);text-decoration:none}
.f2-more .plus{width:26px;height:26px;border-radius:50%;background:var(--mint);display:inline-flex;align-items:center;justify-content:center;font-weight:800}
@media (min-width: 900px){ .focus2{padding-block:40px} .f2-head h2{font-size:28px} .mq-item .ph{width:64px;height:64px} }
.lgwrap{max-width:440px}
.lgcard{display:grid;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:22px}
.lgcard h1{font-size:22px;font-weight:900;margin:0}
.lgcard p{margin:0;color:var(--muted);font-size:14px}
.codein{letter-spacing:.5em;text-align:center;font-size:22px !important;direction:ltr}

/* focus v4: shop cards with price per unit */
.focus3{padding-block:32px}
.f3-head{margin-bottom:14px}
.f3-head h2{font-size:22px;font-weight:900;margin:0}
.f3-head p{margin:4px 0 0;font-size:14px;color:var(--muted)}
.shopgrid{display:grid;grid-auto-flow:column;grid-auto-columns:46%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none}
.shopgrid::-webkit-scrollbar{display:none}
.shopc{scroll-snap-align:start;text-decoration:none;color:var(--ink);display:grid;gap:4px;justify-items:start}
.shopc .ph{width:100%;height:auto;aspect-ratio:1/1;border-radius:14px;background:#E9EAEA;transition:transform .25s ease}
.shopc:hover .ph{transform:translateY(-3px)}
.shopc b{font-size:15px;margin-top:4px}
.shopc small{font-size:12px;color:var(--muted)}
.shopc em{font-style:normal;color:var(--green);font-weight:800;font-size:14px}
.f3-more{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--link)}
@media (min-width: 900px){ .focus3{padding-block:48px} .f3-head h2{font-size:28px} .shopgrid{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;gap:16px} }

/* easy sharing */
.sharep{display:grid;gap:10px;width:100%;max-width:460px;text-align:start}
.olinkrow{display:flex;gap:8px;align-items:center}
.olinkrow .olink{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.sm{min-height:40px;font-size:14px;padding:0 12px}
.shbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn.wa{background:#1FA855;color:#fff}
.btn.wa svg{color:#fff}
.shmsg{background:var(--soft);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--muted)}
.shmsg p{margin:4px 0 0;color:var(--ink);font-size:14px;white-space:pre-line}

/* mobile menu: the hamburger opens the same four links the desktop shows in the header */
@media (max-width: 899px){
  header.top.menu-open .topnav{display:flex;flex-direction:column;position:absolute;top:100%;inset-inline:0;background:var(--paper);border-bottom:1px solid var(--line);padding:4px 16px 8px;box-shadow:0 10px 24px rgba(16,36,29,.10)}
  header.top.menu-open .topnav a{min-height:44px;display:flex;align-items:center;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  header.top.menu-open .topnav a:last-child{border-bottom:0}
}

/* payment step: goods + delivery share = the amount held on the card (owner, 24.10.2026) */
.obrk{display:flex;align-items:flex-end;gap:8px;line-height:1.15}
.obrk > div{display:grid}
.obrk span{font-size:12px;color:var(--muted);white-space:nowrap}
.obrk b{font-size:17px;color:var(--ink)}
.obrk .op{font-size:17px;font-weight:700;color:var(--muted);padding-bottom:1px}
.obrk .tot b{color:var(--green);font-size:20px}
.obrk .free b{text-decoration:line-through;color:var(--muted)}
.obrk-note{margin:6px auto 0;max-width:980px;font-size:12px;line-height:1.4;color:var(--muted)}
@media (max-width: 899px){ .obrk{gap:5px} .obrk b{font-size:15px} .obrk .op{font-size:15px} .obrk .tot b{font-size:17px} .obrk span{font-size:11px} .obrk-note{font-size:11px;line-height:1.3;margin-top:3px} }

/* account page */
.acwrap{max-width:980px;display:grid;gap:14px}
.achead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.achead h1{font-size:24px;font-weight:900}
.acgrid{display:grid;gap:12px}
.accard{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:10px;align-content:start}
.accard h2{font-size:17px;margin:0}
.acmoney{background:var(--mint);border-color:transparent}
.acmoney > b{font-size:34px;font-weight:900;color:var(--green);line-height:1}
.aclist{display:grid;gap:8px}
.acrow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:14px}
.acrow > div{display:grid;gap:2px}
.acrow small{color:var(--muted);font-size:12px}
.acrow .amt{font-weight:800;white-space:nowrap}
.acrow .row2{display:flex;gap:6px;flex-wrap:wrap}
.pill2{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--mint);color:var(--green)}
.pill2.grey{background:var(--soft);color:var(--muted)}
.acempty{font-size:14px;color:var(--muted)}
.acadd,.acform{display:grid;gap:8px}
.acadd select{height:40px;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;font:inherit;font-size:16px;background:#fff;color:var(--ink);width:100%}
.acadd .btn,.accard > .btn{justify-self:start}
@media (min-width: 900px){
  .acgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acwide{grid-column:1 / -1}
  .acform{grid-template-columns:repeat(3,minmax(0,1fr))}
  .acadd{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
  .acadd .ofield:nth-child(1){width:130px} .acadd .ofield:nth-child(2){flex:1 1 240px} .acadd .ofield:nth-child(3){width:100px}
}

/* inner pages on phones: the header is pinned to the very top and the page fills exactly the visible screen
   (dvh), so the browser's own toolbars never cover the bottom bar and the page behind never shows above it */
body.paging header.top{position:fixed;top:0;left:0;right:0}
.sheet{bottom:auto !important;height:calc(100vh - var(--hdr,0px));height:calc(100dvh - var(--hdr,0px))}

@media (prefers-reduced-motion: reduce){ .mq-track{animation:none} .mq{overflow-x:auto} }


/* ===== mobile declutter (desktop untouched) ===== */
.acct-ic{display:none}
@media (max-width: 899px){
  .strip{display:none}
  .acct{min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0}
  .acct-ic{display:block;color:var(--ink)}
  .acct-t{font-size:12px;font-weight:700;color:var(--green)}
  .acct{gap:4px;padding:0 4px}
  .acct-ic{width:20px;height:20px}
  .hero h1{font-size:27px !important;line-height:1.1}
  .hero .wrap{padding-block:18px 16px !important}
  .hero-text{gap:12px !important}
  .hsearch{margin-top:0}
  .hsearch .nrow input,.hsearch .btn{min-height:44px}
  .htiers.soft{margin-top:4px}
  .htiers.soft .ht{padding:5px 2px}
  .htiers.soft .ht b{font-size:15px}
  .htiers.soft .ht small,.htiers.soft .ht em{font-size:10px}
  .shelf{display:none !important}
}


/* details steps on phones: one screen */
@media (max-width: 899px){
  #oStep3 .pbox legend,#j2 .pbox legend,#nS2 .pbox legend,#soloSheet .pbox legend{display:none}
  #oStep3 .pbox,#j2 .pbox,#nS2 .pbox,#soloSheet .pbox{border:0;padding:0;gap:6px}
  #oStep3 .pgrid,#j2 .pgrid,#nS2 .pgrid,#soloSheet .pgrid{gap:6px 8px}
  #oStep3 .ofield,#j2 .ofield,#nS2 .ofield,#soloSheet .ofield{gap:2px}
  #oStep3 .ofield label,#j2 .ofield label,#nS2 .ofield label,#soloSheet .ofield label{font-size:12px}
  #oStep3 .pbox input,#j2 .pbox input,#nS2 .pbox input,#soloSheet .pbox input{height:40px !important;min-height:40px !important;font-size:15px;border-radius:10px}
  .acct-opt{padding:8px 10px;gap:4px}
  .acct-opt > .note{font-size:11px}
  .chk{font-size:13px}
  #j2 .lockline{font-size:12px}
  .oh-row .oh{font-size:17px}
}


@media (max-width: 899px){
  .hero .eyebrow{font-size:11px}
  .hero p{font-size:13px !important;line-height:1.45}
  .hsearch .nlabel{font-size:12px;margin-bottom:3px}
  .htiers.soft .ht-h{font-size:11px}
  .hero .cbnote.onDark{font-size:11px;line-height:1.35}
  #oStep3 .pbox > .note,#j2 .pbox > .note,#nS2 .pbox > .note,#soloSheet .pbox > .note{font-size:11px}
  .acct-opt .chk small{font-size:11px;line-height:1.3}
  .oprog{margin-bottom:4px}
  .oprog li{font-size:12px;padding-bottom:4px}
  .oprog li span{width:20px;height:20px;font-size:11px}
  .nchips span{font-size:12px}
  #oStep2 > p.note{font-size:11px;margin:0}
}


@media (max-width: 899px){
  .ninfo2{padding:8px 12px;gap:1px}
  .ninfo2 b{font-size:15px}
  .ninfo2 > span{font-size:12px}
  .nchips{gap:2px 10px;margin-top:2px}
  #nearForm .nwrap{gap:6px}
}


/* phones: invite + steps fit one short screen (sizes only, no text removed) */
@media (max-width: 899px){
  #sheet .gut,#openForm,#nearForm{padding-block:8px 8px !important}
  .demo-switch{margin-bottom:4px;font-size:11px}
  .demo-switch button{min-height:26px;font-size:11px;padding:0 8px}
  .sheet .bar-top{min-height:42px}
  .backbtn{min-height:38px;font-size:14px}
  .ptitle{font-size:14px}
  .inv{padding:10px 12px;gap:6px;border-radius:14px}
  .inv-head{gap:8px}
  .ava{width:30px;height:30px;font-size:14px}
  .inv-head b{font-size:13px}.inv-head small{font-size:11px}
  .inv h1{font-size:17px !important}
  .inv > p{font-size:12px}
  .inv-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .tile{flex-direction:column;align-items:center;text-align:center;padding:6px 4px;gap:3px}
  .tile .ic{width:24px;height:24px;border-radius:7px}
  .tile .ic svg{width:15px;height:15px}
  .tile b{font-size:12px;line-height:1.2}
  .tile small{font-size:10px;line-height:1.2}
  .ms{padding:7px 8px;gap:4px}
  .ms-top{font-size:11px}.ms-top b{font-size:15px}
  .ms-track .dot{width:24px;height:24px;font-size:10px}
  .ms-track b{font-size:10px}.ms-track small{font-size:9px}
  .ms-bar{height:4px}
  .inv .cbnote{font-size:10px;line-height:1.3;margin:0}
  .inv-mem{font-size:11px;gap:4px}
  .inv-mem .m{padding:2px 8px}
  #jStart{min-height:42px;margin-top:2px}
  .ogrid .prod{padding:2px 8px}
  .ogrid .prod .pic,.ogrid .prod .pic .ph{width:30px;height:30px}
  .ogrid .prod b{font-size:13px}
  .ogrid .prod .unit{font-size:11px}
  .ogrid .prod .unit .pp{font-size:13px}
  .ogrid .prod .step button{width:28px;height:28px;font-size:16px}
  .ogrid{gap:3px}
  .obar{padding-block:5px calc(5px + env(safe-area-inset-bottom,0px))}
  .obar .btn{min-height:40px;font-size:15px}
  .osum2 span,.osum2 small{font-size:11px}.osum2 b{font-size:17px}
  #oStep3 .pbox input,#j2 .pbox input,#nS2 .pbox input,#soloSheet .pbox input{height:36px !important;min-height:36px !important}
  .acct-opt{padding:6px 8px;gap:3px}
  .ocard2{gap:6px}
  .ofield input:not([type=radio]):not([type=checkbox]){height:40px;min-height:40px}
  .omode .ocard{padding:6px 8px}
}


/* phones: product steps as a 2-column grid of small cards (all text kept) */
@media (max-width: 899px){
  .ogrid{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:5px !important}
  .ogrid .prod{display:grid !important;grid-template-columns:30px minmax(0,1fr);grid-template-areas:"pic t" "st st";gap:3px 6px;padding:5px 6px !important;align-items:start}
  .ogrid .prod .pic{grid-area:pic}
  .ogrid .prod .t{grid-area:t;line-height:1.2}
  .ogrid .prod b{font-size:12px}
  .ogrid .prod .t b .sz{display:block;font-size:10px}
  .ogrid .prod .unit{font-size:10px;line-height:1.25}
  .ogrid .prod .unit .pp{font-size:12px}
  .ogrid .prod .step{grid-area:st;justify-content:space-between;padding-top:2px;border-top:1px solid var(--line)}
  .ogrid .prod .step button{width:26px;height:26px;font-size:15px}
  .ogrid .prod .step output{font-size:13px}
}


@media (max-width: 899px){
  .ninfo2{padding:6px 10px;border-radius:10px}
  .ninfo2 b{font-size:14px}
  .nchips{margin-top:0}
  .nchips span{font-size:11px}
  #nearForm .oprog{margin:0}
  #nS2 .oh-row .oh{font-size:16px}
}


@media (max-width: 899px){
  #nearForm .nwrap{gap:4px}
  #nearForm .ogrid .prod{padding:4px 6px !important}
  #nS2 .pgrid{gap:4px 8px}
}


/* phones: clean product cards */
@media (max-width: 899px){
  .ogrid .prod{grid-template-columns:38px minmax(0,1fr) !important;gap:4px 8px !important;padding:6px 8px !important;border-radius:12px}
  .ogrid .prod .pic{width:38px !important;height:38px !important;overflow:hidden;border-radius:8px;align-self:start}
  .ogrid .prod .pic .ph{width:38px !important;height:38px !important;max-width:38px;border-radius:8px}
  .ogrid .prod .t{display:grid;gap:1px;min-width:0}
  .ogrid .prod .t b{font-size:13px;line-height:1.15}
  .ogrid .prod .t b .sz{display:block;font-size:11px;font-weight:500;color:var(--muted)}
  .ogrid .prod .unit{display:block;font-size:10px;line-height:1.3;color:var(--muted)}
  .ogrid .prod .unit .pp{display:block;font-size:13px;color:var(--ink);font-weight:800}
  .ogrid .prod .step{border-top:1px solid var(--line);padding-top:4px;margin-top:2px}
  .ogrid .prod .step button{width:28px;height:28px;border-radius:8px}
}


@media (max-width: 899px){
  .ogrid .prod{grid-template-columns:38px minmax(0,1fr) auto !important;grid-template-areas:"pic nm nm" "un un st" !important;align-items:center !important;gap:4px 6px !important}
  .ogrid .prod .t{display:contents}
  .ogrid .prod .t b{grid-area:nm}
  .ogrid .prod .unit{grid-area:un;align-self:end}
  .ogrid .prod .step{grid-area:st;border-top:0 !important;padding-top:0 !important;margin-top:0 !important;gap:2px;align-self:end}
  .ogrid .prod .step button{width:26px !important;height:26px !important;font-size:15px}
  .ogrid .prod .step output{min-width:1.6ch;font-size:13px}
}


/* phones, MAIN page only: breathing room on an 8px scale (8/16/24/32/48), line-height 1.5 */
@media (max-width: 899px){
  .hero .wrap{padding-block:32px 36px !important}
  .hero-text{gap:0 !important}
  .hero .eyebrow{font-size:12px;margin-bottom:8px}
  .hero h1{font-size:28px !important;line-height:1.15;margin-bottom:12px}
  .hero p{font-size:15px !important;line-height:1.6;margin-bottom:24px}
  .hero-text > div[style]{margin-top:0 !important;gap:0 !important}
  .hero-text .btn.sky{margin-bottom:24px}
  .hsearch .nlabel{font-size:13px;margin-bottom:8px}
  .hsearch{margin-bottom:32px}
  .htiers.soft{margin-top:0;gap:10px}
  .htiers.soft .ht-h{font-size:12px}
  .htiers.soft .ht-row{gap:8px}
  .htiers.soft .ht{padding:10px 4px}
  .htiers.soft .ht b{font-size:17px}
  .htiers.soft .ht small,.htiers.soft .ht em{font-size:11px}
  .hero .cbnote.onDark{font-size:12px;line-height:1.5;margin-top:16px}
  section{padding-block:48px}
  .sec-sub{line-height:1.6;margin-bottom:20px}
}


/* phones: product steps back to a LIST, one product per row, compact */
@media (max-width: 899px){
  .ogrid{grid-template-columns:1fr !important;gap:4px !important}
  .ogrid .prod{grid-template-columns:36px minmax(0,1fr) auto !important;grid-template-areas:"pic nm st" "pic un st" !important;gap:0 8px !important;padding:5px 8px !important;align-items:center !important}
  .ogrid .prod .pic,.ogrid .prod .pic .ph{width:36px !important;height:36px !important;max-width:36px}
  .ogrid .prod .t b{font-size:13px}
  .ogrid .prod .t b .sz{display:inline;font-size:11px}
  .ogrid .prod .unit{font-size:11px;align-self:start}
  .ogrid .prod .unit .pp{display:inline;font-size:13px}
  .ogrid .prod .step{align-self:center}
}
/* phones: home hero on one consistent scale (8px steps; eyebrow-H1 6, H1-text 12, text-button 24, groups 32) */
@media (max-width: 899px){
  .hero .wrap{padding-block:32px 40px !important}
  .hero .eyebrow{font-size:13px;font-weight:600;letter-spacing:.2px;margin-bottom:6px;color:var(--sky)}
  .hero h1{font-size:28px !important;line-height:1.2;margin-bottom:12px}
  .hero p{font-size:16px !important;line-height:1.5;margin-bottom:24px}
  .hero-text .btn.sky{min-height:48px;margin-bottom:32px}
  .hsearch{margin-bottom:32px}
  .hsearch .nlabel{font-size:14px;margin-bottom:8px}
  .hsearch .nrow{gap:8px}
  .hsearch .nrow input,.hsearch .btn{min-height:48px !important;font-size:16px}
  .htiers.soft{gap:8px}
  .htiers.soft .ht-h{font-size:14px}
  .htiers.soft .ht-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .htiers.soft .ht{padding:12px 8px;flex-direction:row;justify-content:space-between;align-items:baseline;text-align:start;gap:6px}
  .htiers.soft .ht small{font-size:13px;order:1}
  .htiers.soft .ht b{font-size:18px;order:2}
  .htiers.soft .ht:first-child b{font-size:14px}
  .htiers.soft .ht em{display:none}
  .htiers.soft .ht b::after{content:" קאשבק*";font-size:13px;font-weight:600}
  .htiers.soft .ht:first-child b::after{content:""}
  .hero .cbnote.onDark{font-size:13px;line-height:1.5;margin-top:16px}
}


@media (max-width: 899px) and (max-height: 700px){
  #j2 .pbox input,#nS2 .pbox input,#oStep3 .pbox input,#soloSheet .pbox input{height:32px !important;min-height:32px !important;font-size:14px}
  #j2 .pgrid,#nS2 .pgrid{gap:3px 8px}
  #j2 .lockline{font-size:11px}
}


/* phones: hero CTA group spacing (proximity: related 8-16, groups 24) */
@media (max-width: 899px){
  .hero-text .btn.sky[data-open="new"]{margin-bottom:16px !important}
  .hsearch .btn.sky{margin-bottom:0 !important}
  .hsearch{margin-bottom:24px !important}
  .hsearch .nlabel{margin-bottom:6px}
  .htiers.soft{margin-top:0 !important}
}


@media (max-width: 899px) and (max-height: 720px){
  .sheet .bar-top{min-height:40px;padding-block:0}
  #j2.jstep,#oStep3,#nS2{gap:5px !important}
  #j2 .oprog{margin-bottom:0}
}


/* ===== ONE mobile system for every page (last word; desktop untouched) =====
   type: page title 20 · section title 22 · card title 16 · body 15 · label 13 · small 12 (min)
   space: 4 / 8 / 12 / 16 / 24 · controls 44 · card padding 12 · radius 12 */
@media (max-width: 899px){
  /* page titles inside flows */
  .oh,#oStep2 .oh,#nS2 .oh-row .oh,#j1 .oh-row .oh,.oh-row .oh,.lgcard h1,.askp h1{font-size:20px !important;line-height:1.25 !important}
  .ptitle{font-size:15px !important}
  .backbtn{font-size:15px !important}
  /* invite card on the same scale */
  .inv{padding:16px !important;gap:12px !important;border-radius:16px !important}
  .ava{width:36px !important;height:36px !important;font-size:16px !important}
  .inv-head b{font-size:15px !important}.inv-head small{font-size:12px !important}
  .inv h1{font-size:20px !important;line-height:1.25 !important}
  .inv > p{font-size:15px !important}
  .tile{padding:8px 4px !important;gap:4px !important}
  .tile .ic{width:28px !important;height:28px !important}
  .tile b{font-size:13px !important}.tile small{font-size:12px !important}
  .ms{padding:12px !important;gap:8px !important}
  .ms-top{font-size:13px !important}.ms-top b{font-size:18px !important}
  .ms-track .dot{width:30px !important;height:30px !important;font-size:12px !important}
  .ms-track b{font-size:12px !important}.ms-track small{font-size:12px !important}
  .inv .cbnote,.cbnote{font-size:12px !important;line-height:1.45 !important}
  .inv-mem{font-size:13px !important;gap:6px !important}
  .inv-mem .m{padding:4px 10px !important}
  #jStart{min-height:44px !important}
  .demo-switch{font-size:12px !important}
  /* labels, notes, fields */
  .ofield label,.olabel,.nlabel,.signup label,.ask-form label{font-size:13px !important}
  .note,.ninfo2 > span,.nchips span,.acct-opt .chk small,.acct-opt > .note,#j2 .lockline,.lockline{font-size:12px !important}
  .chk,.chk b{font-size:14px !important}
  .ofield input:not([type=radio]):not([type=checkbox]),.pbox input,.nrow input,.signup input,.askf input,.lgcard input{height:44px !important;min-height:44px !important;font-size:15px !important;border-radius:12px !important}
  .btn{min-height:44px !important;font-size:15px !important;border-radius:12px !important}
  /* product rows (lists) */
  .ogrid .prod .t b,.prod b{font-size:14px !important}
  .ogrid .prod .t b .sz,.prod .t b .sz{font-size:12px !important}
  .ogrid .prod .unit,.prod .unit{font-size:12px !important}
  .ogrid .prod .unit .pp,.prod .unit .pp{font-size:14px !important}
  .ogrid .prod .step button{width:30px !important;height:30px !important}
  .ogrid .prod .pic,.ogrid .prod .pic .ph{width:40px !important;height:40px !important;max-width:40px}
  /* bars */
  .osum2 span,.osum2 small{font-size:12px !important}.osum2 b{font-size:18px !important}
  .oprog li{font-size:13px !important}
  .ninfo2 b{font-size:16px !important}
}


/* same type, tighter spacing so flows fit (spacing only) */
@media (max-width: 899px){
  #sheet .gut{padding-block:8px !important}
  .demo-switch{margin-bottom:6px !important}
  .demo-switch button{min-height:28px !important}
  .inv{padding:14px !important;gap:10px !important}
  .inv-tiles{gap:6px !important}
  .tile{padding:6px 4px !important;gap:2px !important}
  .tile .ic{width:24px !important;height:24px !important;background:transparent !important}
  .ms{padding:10px !important;gap:6px !important}
  .ms-track .dot{width:26px !important;height:26px !important}
  .inv-mem .m{padding:2px 8px !important}
  .ogrid{gap:4px !important}
  .ogrid .prod{padding:4px 8px !important}
  .ogrid .prod .pic,.ogrid .prod .pic .ph{width:36px !important;height:36px !important;max-width:36px}
  .ogrid .prod .step button{width:28px !important;height:28px !important}
}


@media (max-width: 899px){
  /* the mockup-only switch floats so it takes no page height */
  .demo-switch{position:fixed;left:8px;bottom:74px;z-index:45;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 8px;margin:0 !important;box-shadow:0 4px 12px rgba(0,0,0,.08)}
  .ogrid{gap:3px !important}
  .ogrid .prod{padding:3px 8px !important}
  .oprog{margin-bottom:2px !important}
  .oprog li{padding-bottom:3px !important}
  .inv{gap:8px !important;padding:12px 14px !important}
  .inv-head .ava{width:32px !important;height:32px !important}
  .ms{gap:4px !important;padding:8px 10px !important}
  .ninfo2{padding:6px 12px !important}
}
@media (max-width: 899px) and (max-height: 720px){
  .sheet .bar-top{min-height:40px !important}
}


@media (max-width: 899px){
  .ninfo2{display:flex !important;flex-wrap:wrap;align-items:baseline;gap:2px 8px !important}
  .ninfo2 .nchips{flex-basis:100%}
  #nearForm{padding-block:4px 4px !important}
  #nearForm .nwrap{gap:4px !important}
  #j1.jstep{gap:4px !important}
  #j1 .oprog,#nearForm .oprog,#openForm .oprog{margin-bottom:0 !important}
}


@media (max-width: 899px) and (max-height: 720px){
  #nPick .prod{padding:1px 8px !important}
  #nPick .prod .pic,#nPick .prod .pic .ph{width:32px !important;height:32px !important}
  #nPick{gap:2px !important}
  #nS2 .pgrid{gap:2px 8px !important}
  #nS2 .ofield{gap:1px !important}
}


@media (max-width: 899px) and (max-height: 720px){
  .ninfo2{padding:4px 12px !important;line-height:1.25 !important;gap:0 8px !important}
  .ninfo2 b{line-height:1.25 !important}
  #nearForm .nwrap{gap:2px !important}
  #nPick .prod .t b,#nPick .prod .unit{line-height:1.2 !important}
}


@media (max-width: 899px){
  .demo-switch{bottom:auto !important;top:calc(var(--hdr,56px) + 6px) !important;left:8px !important;box-shadow:none !important}
}


/* nothing may be wider than the phone */
html,body{max-width:100%;overflow-x:hidden}
.sheet{overflow-x:hidden}
@media (max-width: 899px){
  .ncard{flex-direction:column;align-items:stretch !important;gap:8px}
  .ncard .t{min-width:0;width:100%}
  .ncard .btn{width:100%}
  .nbar{max-width:100% !important}
  .nc,.nc-main,.nlist,.nlist-home,.nbwrap,.owrap{min-width:0;max-width:100%}
  .nc-side{min-width:0}
}


@media (max-width: 899px){ .demo-switch{display:none !important} }


/* milestone labels wrap instead of being cut; inner pages scroll without a visible scrollbar */
.ms-track li{min-width:0}
.ms-track small,.ms-track b{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;overflow-wrap:anywhere;line-height:1.25}
.sheet{scrollbar-width:none;-ms-overflow-style:none}
.sheet::-webkit-scrollbar{display:none;width:0;height:0}

@media (prefers-reduced-motion: reduce){*{transition:none!important}}
/* short phones (about 660-700px of page, like the owner's): the details steps carry the delivery note in the bar,
   so the form tightens a little - same text, smaller gaps */
@media (max-width: 899px) and (max-height: 720px){
  body #sheet #j2 .pbox .ofield input,body #openSheet #oStep3 .pbox .ofield input,body #nearSheet #nS2 .pbox .ofield input{height:34px !important;min-height:34px !important}
  #j2 .pgrid,#oStep3 .pgrid{gap:2px 8px !important}
  #j2 .acct-opt,#oStep3 .acct-opt{padding:6px 10px !important;gap:3px !important}
  .obar{padding-block:4px calc(4px + env(safe-area-inset-bottom,0px)) !important}
  .oprog{margin-bottom:2px !important}
  .oprog li{padding-block:2px !important}
  body #sheet #j2 .ofield,body #openSheet #oStep3 .ofield,body #nearSheet #nS2 .ofield{gap:1px !important}
  body #sheet #j2 .oh-row,body #openSheet #oStep3 .oh-row{margin-bottom:0 !important}
  body #sheet #j2 .lockline{margin-block:0 2px !important}
  body #sheet #j2.jstep,body #openSheet #oStep3{gap:4px !important}
}

/* product photo zoom */
.zoompop{position:fixed;z-index:80;width:min(340px,calc(100vw - 32px));aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(16,36,29,.22);padding:8px;pointer-events:none}
.zoompop img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.zoompop.full{inset:0;width:auto;height:auto;margin:auto;max-width:min(92vw,520px);max-height:min(92vh,520px);pointer-events:auto}
.prod .pic img{cursor:zoom-in}

/* competitor prices: our saving next to our price; theirs small and red, never struck through */
.prod .save{display:inline-block;font-style:normal;font-weight:800;font-size:12px;color:var(--green);background:var(--mint);border-radius:999px;padding:1px 8px;margin-inline-start:6px;white-space:nowrap;vertical-align:middle}
.prod .comp{display:flex;flex-wrap:wrap;gap:0 12px;font-size:12px;color:var(--muted);margin-top:3px}
.prod .comp .their{color:#B4232A;font-weight:600}
.prod .comp small{font-size:11px;white-space:nowrap}
.prod .comp > span{white-space:normal}
.prod .t{min-width:0}
.prod .unit{overflow-wrap:anywhere}
.compnote{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.4}
@media (max-width: 899px){ .prod .comp{font-size:11px;grid-column:1 / -1} .prod .save{font-size:11px;padding:0 7px} .compnote{font-size:11px} }

.oprog li[role=button]{cursor:pointer}
.oprog li[role=button]:hover{color:var(--green)}

/* "back to the previous step" in a step header: a clear secondary button, not a bare link (owner, 25.10.2026) */
.oh-row .linkbtn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px 0 12px;border:1.5px solid var(--green);border-radius:999px;background:var(--paper);color:var(--green);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s}
.oh-row .linkbtn::before{content:"";width:8px;height:8px;border-top:2.4px solid currentColor;border-right:2.4px solid currentColor;transform:rotate(225deg);margin-inline-end:2px}
.oh-row .linkbtn:hover{background:var(--mint)}
@media (max-width: 899px){ .oh-row .linkbtn{min-height:34px;font-size:13px;padding:0 12px 0 10px} }

/* price comparison page */
.cmpwrap{max-width:1040px;display:grid;gap:16px}
.cmphead h1{font-size:24px;font-weight:900;line-height:1.25;margin:0 0 8px}
.cmphead p{font-size:15px;color:var(--muted);margin:0 0 4px;max-width:68ch}
.cmplist{display:grid;gap:14px}
.cmpcard{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cmpours{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--mint)}
.cmpours img{width:72px;height:72px;border-radius:12px;background:#fff;object-fit:contain;flex:none}
.cmpours h2{font-size:18px;margin:0 0 4px}
.cmpours h2 small{font-size:13px;font-weight:500;color:var(--muted)}
.cmpours > div{flex:1;min-width:0}
.ourp{font-size:15px;color:var(--ink)}
.ourp b{font-size:18px;color:var(--green)}
.ouru{font-size:16px !important}
.cmpbig{display:grid;justify-items:center;background:var(--green);color:#fff;border-radius:12px;padding:6px 10px;font-size:20px;font-weight:900;line-height:1;flex:none}
.cmpbig small{font-size:11px;font-weight:700;margin-top:4px}
.cmptable{overflow-x:auto}
.cmptable table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.cmptable th,.cmptable td{padding:9px 12px;text-align:start;border-top:1px solid var(--line);vertical-align:middle}
.cmptable thead th{font-size:12px;color:var(--muted);font-weight:700;border-top:0;background:var(--soft)}
.cmptable tbody th{font-weight:800;white-space:nowrap}
.cmptable tbody th small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.cmptable .nm{font-size:13px;color:var(--muted);max-width:280px}
.cmptable .their{color:#B4232A;font-weight:700;white-space:nowrap}
.cmptable tr.avg th,.cmptable tr.avg td{background:var(--soft);font-weight:800}
.dgood{display:inline-block;background:var(--green);color:#fff;font-weight:800;font-size:12px;border-radius:999px;padding:2px 9px;white-space:nowrap}
.dbad{display:inline-block;background:var(--soft);color:var(--muted);font-weight:700;font-size:12px;border-radius:999px;padding:2px 9px;white-space:nowrap}
.dsame{font-size:12px;color:var(--muted)}
.cmpfoot{font-size:12px;line-height:1.5}
@media (max-width: 899px){
  .cmphead h1{font-size:22px}
  .cmphead p{font-size:14px}
  .cmpours{padding:12px}
  .cmpours img{width:56px;height:56px}
  .cmpbig{font-size:20px;padding:6px 9px}
  .cmptable table{min-width:0}
  .cmptable thead{display:none}
  .cmptable tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border-top:1px solid var(--line)}
  .cmptable th,.cmptable td{border:0;padding:0}
  .cmptable .nm{grid-column:1 / -1;max-width:none;order:3}
  .cmptable td:nth-child(3)::before{content:"מארז "} .cmptable td:nth-child(4)::before{content:"כמה במארז: "}
  .cmptable td:nth-child(3),.cmptable td:nth-child(4){font-size:12px;color:var(--muted)}
  .cmptable td:nth-child(5)::after{content:" ליחידה";font-weight:500;font-size:11px;color:var(--muted)}
}

.prod .aka{display:block;font-size:11px;color:var(--muted);margin-top:1px}

/* "X% הכי זול בישראל" - the shop's main claim, big and green on every product (owner, 25.10.2026) */
.prod .save{display:inline-flex;align-items:baseline;gap:6px;margin-top:6px;padding:4px 12px 4px 10px;border-radius:10px;background:var(--green);color:#fff;font-size:14px;font-weight:800;font-style:normal;white-space:nowrap}
.prod .save b{font-size:20px;font-weight:900;line-height:1}
@media (max-width: 899px){ .prod .save{font-size:12px;padding:3px 10px 3px 8px} .prod .save b{font-size:17px} }

.cmptop{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:10px 14px}
.cmprow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"img n p" "img c c";gap:0 10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.cmprow:nth-last-child(-n+2){border-bottom:0}
.cmprow img{grid-area:img;width:36px;height:36px;border-radius:8px;background:var(--soft);object-fit:contain}
.cmprow .tn{grid-area:n;font-size:15px;font-weight:700}
.cmprow .tp{grid-area:p;font-size:15px;font-weight:800;color:#fff;background:var(--green);border-radius:8px;padding:2px 9px;white-space:nowrap}
.cmprow .tp.na{background:var(--soft);color:var(--muted);font-weight:600;font-size:13px}
.cmprow .tc{grid-area:c;font-size:12px;color:var(--muted)}
.cmprow:hover .tn{color:var(--green)}
.cmpdetail-h{font-size:17px;margin:8px 0 0}
@media (max-width: 899px){ .cmptop{grid-template-columns:1fr;padding:6px 12px} .cmprow:nth-last-child(2){border-bottom:1px solid var(--line)} .cmprow .tn,.cmprow .tp{font-size:14px} }
.cmpcard{padding:0 !important}

/* ===== product cards (redesign 25.10.2026, from docs/research/grocery_ux/FINDINGS.md) =====
   one size system: name 15, price 20, small 12-13, controls 40-44; airy, one accent colour */
body .plist:has(.pitem),body #plist.plist:has(.pitem){display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:14px !important}
.pitem{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .15s, box-shadow .15s}
.pitem:hover{box-shadow:0 6px 18px rgba(16,36,29,.08)}
.pitem.inq{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.pitem.out{opacity:.55}
.pi-win{display:flex;align-items:baseline;justify-content:center;gap:6px;background:var(--green);color:#fff;font-size:13px;font-weight:800;padding:6px 10px}
.pi-win b{font-size:19px;font-weight:900;line-height:1}
.pi-pic{display:flex;align-items:center;justify-content:center;background:#F1F3F2;height:150px;padding:10px}
.pi-pic img{width:auto;height:100%;max-width:100%;object-fit:contain;mix-blend-mode:multiply;cursor:zoom-in}
.pi-body{display:grid;gap:3px;padding:12px 14px 6px;flex:1;align-content:start}
.pi-name{font-size:15px;font-weight:800;margin:0;line-height:1.3}
.pi-size{font-size:12px;color:var(--muted)}
.pi-aka{font-size:11px;color:var(--muted)}
.pi-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:6px}
.pi-price b{font-size:20px;font-weight:900;color:var(--ink)}
.pi-unit{font-size:13px;color:var(--muted);font-weight:600}
.pi-comp{font-size:12px;color:var(--muted)}
.pi-comp .their{color:#B4232A;font-weight:700;white-space:nowrap}
.pi-add{padding:8px 14px 14px}
.pi-addbtn{width:100%;min-height:42px;border:0;border-radius:12px;background:var(--green);color:#fff;font-weight:800;font-size:15px;cursor:pointer}
.pi-addbtn:hover{background:var(--green-2)}
.pitem .step{display:none;align-items:center;justify-content:space-between;min-height:42px;border:1.5px solid var(--green);border-radius:12px;padding:0 4px}
.pitem.inq .step{display:flex}
.pitem.inq .pi-addbtn{display:none}
.pitem .step button{width:36px;height:36px;border:0;border-radius:9px;background:var(--mint);color:var(--green);font-size:20px;font-weight:800;cursor:pointer}
.pitem .step button.plus{background:var(--green);color:#fff}
.pitem .step output{font-size:16px;font-weight:800;min-width:2ch;text-align:center}
.pi-out{display:block;text-align:center;font-weight:800;color:var(--muted);padding:10px 0}
/* phones: list rows - photo on the right, text in the middle, the add control under the price */
@media (max-width: 899px){
  body .plist:has(.pitem),body #plist.plist:has(.pitem){grid-template-columns:1fr !important;gap:8px !important}
  .pitem{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-areas:"win win" "pic body" "pic add";border-radius:14px}
  .pi-win{grid-area:win;font-size:12px;padding:4px 10px;justify-content:flex-start}
  .pi-win b{font-size:16px}
  .pi-pic{grid-area:pic;height:100%;min-height:88px;padding:6px}
  .pi-body{grid-area:body;padding:8px 10px 2px;gap:1px}
  .pi-name{font-size:14px}
  .pi-price{margin-top:2px}
  .pi-price b{font-size:17px}
  .pi-unit{font-size:12px}
  .pi-comp{font-size:11px}
  .pi-add{grid-area:add;padding:4px 10px 10px}
  .pi-addbtn,.pitem .step{min-height:38px}
  .pitem .step button{width:32px;height:32px}
}
@media (min-width: 900px){
  .pi-win{position:absolute;top:0;inset-inline:0;z-index:1}
  .pi-pic{padding-top:40px}
}

/* ===== one proportional type scale for the whole site (owner, 25.10.2026: "proportional, not huge") =====
   desktop: h1 34 · h2 26 · h3 18 · body 16 · small 13 · buttons 16/44   phone: h1 26 · h2 21 · body 15 · buttons 15/44 */
.hero h1{font-size:34px !important;line-height:1.2 !important}
.sec-h h2,section h2,.near h2,.group h2{font-size:26px !important;line-height:1.25}
.sec-sub{font-size:16px !important}
.btn{font-size:16px}
.hero-text .btn,.hero-text .btn.sky{font-size:16px !important;min-height:46px}
header.top .logo{font-size:24px}
.strip{font-size:13px}
section{padding-block:44px}
.achead h1,.askp h1,.lgcard h1{font-size:22px !important}
.cmphead h1{font-size:24px}
@media (max-width: 899px){
  .hero h1{font-size:26px !important}
  .sec-h h2,section h2,.near h2,.group h2{font-size:21px !important}
  .sec-sub{font-size:15px !important}
  .btn,.hero-text .btn,.hero-text .btn.sky{font-size:15px !important}
  header.top .logo{font-size:23px}
  section{padding-block:32px}
  .cmphead h1{font-size:21px}
  .achead h1,.askp h1,.lgcard h1{font-size:20px !important}
}

/* every product tile exactly the same size (owner, 25.10.2026): equal rows, the add control pinned to the bottom */
body .plist:has(.pitem),body #plist.plist:has(.pitem){grid-auto-rows:1fr !important}
.pitem{height:100%}
.pi-win.plain{background:var(--soft);color:var(--muted);font-weight:700}
.pi-add{margin-top:auto}
@media (max-width: 899px){ .pitem{grid-template-rows:auto 1fr auto} }
/* step titles keep their own size (the section h2 scale is for page sections), and short phones get a slimmer back button */
section.jstep h2.oh,.ostep h2.oh,#oStep1 h2.oh,#oStep2 h2.oh,#oStep3 h2.oh,#nS1 h2.oh,#nS2 h2.oh{font-size:20px !important}
@media (max-width: 899px){ section.jstep h2.oh,#oStep1 h2.oh,#oStep2 h2.oh,#oStep3 h2.oh,#nS1 h2.oh,#nS2 h2.oh{font-size:18px !important} }
@media (max-width: 899px) and (max-height: 720px){ .oh-row .linkbtn{min-height:28px !important;font-size:12px !important;padding:0 10px 0 8px !important} }
.pi-comp .pk{white-space:nowrap}
@media (max-width: 899px) and (max-height: 720px){
  body #sheet #j2 .pbox .ofield input,body #openSheet #oStep3 .pbox .ofield input,body #nearSheet #nS2 .pbox .ofield input{height:32px !important;min-height:32px !important}
}

/* 25.10 owner: our price is the clearest thing on the card - its own light-blue tag (competitors stay red);
   the stepper − n + is always there (no "הוספה" button); the chain line is two fixed lines that never wrap. */
:root{ --tag:var(--sky); --tag-ink:var(--green); }
.pi-price{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"pb pu";align-items:baseline;column-gap:8px;row-gap:0;
  background:var(--tag);color:var(--tag-ink);border-radius:12px;padding:6px 10px 7px;margin:6px 0 4px;justify-self:start}
.pi-price .pl{grid-area:pl;font-size:11px;font-weight:800;letter-spacing:.2px}
.pi-price b{grid-area:pb;font-size:24px;font-weight:900;color:var(--tag-ink);line-height:1.05}
.pi-price .pi-unit{grid-area:pu;font-size:14px;font-weight:800;color:var(--tag-ink)}
.pi-comp{display:grid;gap:0;font-size:12px;line-height:1.45}
.pi-comp .cl,.pi-comp .cv{white-space:nowrap}
.pi-addbtn{display:none !important}
.pitem .step{display:flex;justify-content:space-between}
.pitem .step output{font-size:18px;min-width:3ch}
.pitem:not(.inq) .step output{color:var(--muted)}
.pitem:not(.inq) .step button:not(.plus){opacity:.45}
@media (max-width: 899px){
  .pi-price{padding:4px 9px 5px;margin:4px 0 3px}
  .pi-price b{font-size:20px}
  .pi-price .pi-unit{font-size:13px}
  .pi-comp{font-size:11px}
}
/* the saving tag on the focus tiles (25.10) */
.fitem{position:relative}
.ftag{align-self:stretch;display:flex;align-items:baseline;justify-content:center;gap:4px;background:var(--green);color:#fff;font-size:11px;font-weight:800;border-radius:10px;padding:4px 6px;margin-bottom:6px;white-space:nowrap}
.ftag b{font-size:15px;font-weight:900;line-height:1}
.ftag.plain{background:var(--paper);color:var(--muted)}
.focus .compnote{margin-top:12px}
.fitem .ftag{flex-direction:column;align-items:center;gap:0;color:#fff;white-space:normal;line-height:1.2;text-align:center;font-size:11px}
.fitem .ftag b{color:#fff;font-size:17px}
.fitem .ftag.plain{color:var(--muted);flex-direction:row;justify-content:center;font-size:11px}
.fitem .ftag b small{font-size:12px;font-weight:800}
/* 25.10 owner: the tile tag looks exactly like the card band - one line across the top of the tile */
.fitem .ftag{flex-direction:row;align-items:baseline;justify-content:center;gap:5px;white-space:nowrap;margin:-12px -8px 8px;border-radius:16px 16px 0 0;padding:6px 4px;font-size:12px}
.fitem .ftag b{font-size:16px}
.fitem .ftag.plain{margin:-12px -8px 8px;border-radius:16px 16px 0 0;background:var(--soft)}
@media (min-width: 900px){ .fitem .ftag,.fitem .ftag.plain{margin:-14px -14px 10px} }
@media (max-width: 420px){ .fitem .ftag{font-size:10px;gap:3px;padding:5px 2px} .fitem .ftag b{font-size:13px} }
@media (max-width: 420px){ .fitem .ftag{white-space:normal;flex-wrap:wrap;row-gap:0;line-height:1.15;min-height:36px;align-content:center} }
@media (min-width: 900px){ .fgrid{grid-template-columns:repeat(5,minmax(0,1fr))} }
.pi-win > span,.fitem .ftag > span{white-space:nowrap;color:inherit;font-size:inherit}
/* 25.10 owner: the summary box under the products is gone; the bottom bar / header cart opens this choice */
.cchoice{position:fixed;inset:0;z-index:60;background:rgba(16,36,29,.45);display:flex;align-items:flex-end;justify-content:center}
.cc-box{background:var(--paper);width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));display:grid;gap:10px}
.cc-head{display:flex;align-items:center;justify-content:space-between}
.cc-head h2{font-size:20px;font-weight:900;margin:0;color:var(--green)}
.cc-x{width:44px;height:44px;border:0;background:var(--soft);border-radius:12px;font-size:26px;line-height:1;color:var(--ink);cursor:pointer}
@media (min-width: 900px){
  .cchoice{align-items:center}
  .cc-box{border-radius:20px;padding:22px}
  body.hascart:not(.paging) .dock{display:block}
  .dock .wrap{max-width:620px}
}
/* 25.10 owner: a short − n + (not full width), and n is a field you can type into */
.pitem .pi-add{display:flex;justify-content:center}
.pitem .step{display:inline-flex;width:auto;gap:6px;justify-content:center;padding:3px;min-height:0}
.pitem .step .qn{width:3.4ch;height:36px;border:0;border-radius:8px;background:transparent;text-align:center;font:inherit;font-size:18px;font-weight:800;color:var(--ink);padding:0;-moz-appearance:textfield}
.pitem .step .qn:focus{outline:2px solid var(--green);background:var(--paper)}
.pitem:not(.inq) .step .qn{color:var(--muted)}
@media (max-width: 899px){ .pitem .pi-add{justify-content:flex-start} .pitem .step .qn{height:32px;font-size:17px} }
/* 25.10 owner: a tapped photo gets an X to close it, and a dim background */
.zoomback{position:fixed;inset:0;z-index:79;background:rgba(16,36,29,.55)}
.zoompop .zx{display:none}
.zoompop.full .zx{display:flex;position:absolute;top:10px;left:10px;width:44px;height:44px;border:0;border-radius:50%;background:var(--paper);box-shadow:0 2px 8px rgba(16,36,29,.25);color:var(--ink);font-size:28px;line-height:1;align-items:center;justify-content:center;cursor:pointer}
.addr-use{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.addr-use .achip{min-height:36px;font-size:14px;padding:0 14px}

/* the invite demo (25.10): switch between the states a member sees */
.jdemo{display:grid;gap:8px;background:var(--sky-2);border:1.5px dashed var(--green);border-radius:16px;padding:12px;margin-bottom:12px}
.jdemo b{color:var(--green);font-size:15px}
.jd-row{display:flex;flex-wrap:wrap;gap:6px}
.jd-row .achip{min-height:34px;font-size:13px;padding:0 12px}
.jdemo .jd-row .achip{min-height:34px !important;height:auto !important;font-size:13px !important;padding:0 12px !important;border-radius:999px}

/* 25.10 owner: the hero says it in one line; delivery time and the service area are stated plainly */
.hline{margin:2px 0 0;font-size:15px;font-weight:700;color:var(--sky);display:flex;align-items:center;gap:6px}
.hline.area{font-weight:600;font-size:14px;opacity:.95}
.facts2{display:grid;gap:8px;margin:4px 0 16px}
.facts2 span{display:flex;gap:8px;align-items:flex-start;font-size:15px;color:var(--ink);background:var(--mint);border-radius:12px;padding:10px 12px}
.facts2 svg,.deliv svg{flex:none;color:var(--green);margin-top:2px}
.deliv{display:flex;gap:6px;align-items:flex-start;font-weight:700;color:var(--green)}
.deliv.big{margin:0;font-size:15px;background:var(--mint);border-radius:12px;padding:10px 12px;justify-content:center;text-align:center}
.ninfo2 .deliv{color:#fff;font-weight:600}
.ninfo2 .deliv svg{color:var(--sky)}
.hline + .hline{margin-top:-6px}
.facts2 > span{display:block}
.facts2 > span svg{display:inline-block;vertical-align:-3px;margin-inline-end:6px;margin-top:0}
.hero .hline{margin:0 !important;line-height:1.35}.hero .hline + .hline{margin-top:-6px !important}
.hero .hline + .hline{margin-top:4px !important}
.logo img{display:block;height:43px;width:auto} @media (max-width: 899px){ .logo img{height:38px} }