/* ============================================================
   MD Flour Mill — shared design system
   ============================================================ */
:root{
  --bg:#FBF7EC; --bg2:#F3EADA; --card:#FFFFFF; --line:#E7DCC4;
  --ink:#3E3324; --ink2:#7A6647; --ink3:#9C8A6B;
  --green:#2F4A26; --green2:#3E6231; --gold:#C98A2B; --gold2:#A96F1B; --gold-soft:#F5E7C8;
  --wa:#1DA45B; --wa-dark:#0E7A56;
  --shadow:0 4px 20px rgba(62,51,36,.08); --shadow-lg:0 10px 40px rgba(62,51,36,.13);
  --r:16px; --r-lg:24px;
  --nav-h:58px; --bar-h:62px;
}
html[data-theme="dark"]{
  --wa:#1C7C4A;
  --bg:#15120D; --bg2:#1D1913; --card:#241F18; --line:#3D3325;
  --ink:#F7F0E2; --ink2:#CBB595; --ink3:#9A8A70;
  --green:#A3C083; --green2:#8DAC6D; --gold:#E5AE44; --gold2:#F3C96D; --gold-soft:#3C2E16;
  --shadow:0 4px 20px rgba(0,0,0,.45); --shadow-lg:0 14px 44px rgba(0,0,0,.55);
}
/* dark: depth + warmth so it doesn't read flat */
html[data-theme="dark"] body{
  background:
    radial-gradient(120% 55% at 80% -4%, rgba(233,180,81,.20), transparent 62%),
    radial-gradient(110% 45% at 0% 26%, rgba(126,168,95,.11), transparent 66%),
    var(--bg);
  background-attachment:fixed;
}
html[data-theme="dark"] .tint{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
html[data-theme="dark"] .card,
html[data-theme="dark"] .rev,
html[data-theme="dark"] .step,
html[data-theme="dark"] .faq,
html[data-theme="dark"] .ptile,
html[data-theme="dark"] .trust div{
  background:linear-gradient(160deg,#2A241C 0%,#211C15 100%);
  border-color:#443A2B;
}
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .rev:hover{border-color:#584A33}
html[data-theme="dark"] .ptile.hero-tile{background:linear-gradient(160deg,#4A3818 0%,#2A2318 100%);border-color:var(--gold)}
html[data-theme="dark"] .btn-gold{color:#241B08;box-shadow:0 4px 18px rgba(229,174,68,.28)}
html[data-theme="dark"] .menu-in a.m.hi{color:#241B08}
html[data-theme="dark"] .links a.hi{color:#241B08}
html[data-theme="dark"] .badge,
html[data-theme="dark"] .ptile .badge{color:#241B08}
html[data-theme="dark"] .btn-wa{box-shadow:0 3px 12px rgba(0,0,0,.4);color:#F1FBF4}
html[data-theme="dark"] .eyebrow{background:#3C2E16;color:var(--gold2)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{font-family:'Hind','Noto Sans Devanagari',system-ui,sans-serif;background:var(--bg);color:var(--ink);
  line-height:1.6;font-size:16px;padding-bottom:var(--bar-h);transition:background .3s,color .3s;overflow-x:hidden}
@media(min-width:900px){body{padding-bottom:0}}
h1,h2,h3,.disp{font-family:'Baloo 2','Noto Sans Devanagari',sans-serif;line-height:1.2;font-weight:800;letter-spacing:-.01em}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.sec{padding:44px 0}
.sec-sm{padding:30px 0}
.tint{background:var(--bg2)}
h1{font-size:clamp(1.75rem,6vw,2.9rem)}
h2{font-size:clamp(1.4rem,4.6vw,2rem);margin-bottom:10px}
h3{font-size:1.08rem}
.lead{color:var(--ink2);font-size:1.02rem;max-width:640px}
.eyebrow{display:inline-block;background:var(--gold-soft);color:var(--gold2);font-weight:800;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:99px;margin-bottom:12px}
.note{font-size:.82rem;color:var(--ink3);line-height:1.5}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;
  font-size:1rem;padding:13px 24px;border-radius:14px;border:none;cursor:pointer;text-decoration:none;
  transition:transform .15s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.10)}
.btn-primary{background:var(--green);color:#fff}
html[data-theme="dark"] .btn-primary{color:#1B2416}
.btn-gold{background:var(--gold);color:#fff}
.btn-ghost{background:var(--card);color:var(--ink);border:2px solid var(--line)}
.btn-sm{padding:9px 16px;font-size:.87rem;border-radius:11px}
.btn-block{display:flex;width:100%}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:10px;
  max-width:1080px;margin:0 auto;padding:0 14px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);min-width:0}
.brand svg{width:34px;height:34px;flex:none}
.brand b{font-family:'Baloo 2',sans-serif;font-size:1.02rem;font-weight:800;white-space:nowrap;line-height:1.1}
.brand .dot{width:8px;height:8px;border-radius:50%;background:#bbb;flex:none}
.dot.on{background:#4CAF50;box-shadow:0 0 0 3px rgba(76,175,80,.2)}
.dot.off{background:#E07A5F;box-shadow:0 0 0 3px rgba(224,122,95,.18)}
.nav-right{display:flex;align-items:center;gap:7px;flex:none}
.links{display:none;gap:2px}
@media(min-width:900px){
  .links{display:flex}
  .links a{padding:8px 13px;border-radius:10px;text-decoration:none;font-weight:600;font-size:.93rem;color:var(--ink2)}
  .links a:hover{background:var(--bg2);color:var(--ink)}
  .links a.on{color:var(--gold2);font-weight:700}
  .links a.hi{background:var(--gold);color:#fff;font-weight:700}
  .links a.hi:hover{background:var(--gold2);color:#fff}
  .burger{display:none!important}
}
.icon-btn{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:.95rem;flex:none}
.lang-btn{border:1.5px solid var(--gold);background:var(--card);color:var(--gold2);font-family:inherit;
  font-weight:700;font-size:.78rem;padding:7px 12px;border-radius:99px;cursor:pointer;flex:none}
.burger{width:38px;height:36px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);
  display:grid;place-items:center;cursor:pointer;gap:4px;padding:9px 8px}
.burger i{display:block;height:2px;background:var(--ink);border-radius:2px;width:100%}

/* ---------- mobile menu ---------- */
.menu{position:fixed;inset:0;z-index:90;background:rgba(30,22,12,.55);display:none}
.menu.open{display:block}
.menu-in{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--bg);
  padding:16px;display:flex;flex-direction:column;animation:slideIn .22s ease-out;overflow-y:auto}
@keyframes slideIn{from{transform:translateX(30px);opacity:.6}to{transform:none;opacity:1}}
.menu-in a.m{display:flex;align-items:center;gap:12px;padding:15px 14px;border-radius:14px;text-decoration:none;
  color:var(--ink);font-weight:700;font-size:1.02rem;border:1.5px solid transparent}
.menu-in a.m:hover{background:var(--bg2)}
.menu-in a.m.on{background:var(--gold-soft);color:var(--gold2);border-color:var(--gold)}
.menu-in a.m.hi{background:var(--gold);color:#fff}
.menu-in a.m .e{font-size:1.2rem}
.menu-in .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:4px}
.menu-in .mh b{font-family:'Baloo 2',sans-serif;font-size:1.05rem}
.menu-close{border:none;background:var(--bg2);color:var(--ink);width:34px;height:34px;border-radius:50%;
  font-size:1.05rem;cursor:pointer}
.menu-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:8px}

/* ---------- bottom action bar (mobile) ---------- */
.actionbar{position:fixed;bottom:0;left:0;right:0;z-index:70;display:flex;gap:8px;padding:9px 12px;
  background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(0,0,0,.07)}
.actionbar .btn{flex:1;padding:12px 8px;font-size:.93rem;border-radius:12px}
@media(min-width:900px){.actionbar{display:none}}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.card h3{margin-bottom:5px}
.card p{font-size:.93rem;color:var(--ink2)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(170deg,var(--bg) 0%,var(--bg2) 100%);padding:38px 0 42px;position:relative;overflow:hidden}
.hero h1{margin:10px 0 12px;max-width:15ch}
.hero .sub{color:var(--ink2);font-size:1.06rem;max-width:44ch;margin-bottom:20px}
.hero-grid{display:grid;gap:24px;align-items:center}
@media(min-width:820px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);
  aspect-ratio:4/3;background:var(--gold-soft);display:grid;place-items:center;position:relative}
.hero-photo .ph{text-align:center;padding:20px;color:var(--gold2)}
.hero-photo .ph .big{font-size:3rem}

/* ---------- trust strip ---------- */
.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
@media(min-width:700px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust div{background:var(--card);padding:14px 10px;text-align:center}
.trust .t{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.02rem;color:var(--gold2);line-height:1.2}
.trust .d{font-size:.76rem;color:var(--ink2);font-weight:600;margin-top:2px}

/* ---------- price tiles ---------- */
.price-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.ptile{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:18px 16px;text-align:center}
.ptile.hero-tile{border-color:var(--gold);background:linear-gradient(160deg,var(--gold-soft),var(--card))}
.ptile .nm{font-weight:700;font-size:.93rem;line-height:1.3}
.ptile .pr{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.7rem;color:var(--gold2);margin:4px 0 2px}
.ptile .tag{font-size:.75rem;color:var(--ink2);font-weight:600}
.ptile .badge{display:inline-block;background:var(--gold);color:#fff;font-size:.66rem;font-weight:800;
  padding:2px 9px;border-radius:99px;letter-spacing:.05em;margin-bottom:6px}

/* ---------- steps ---------- */
.steps{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));counter-reset:s}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;position:relative}
.step .n{width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.9rem;margin-bottom:9px}
html[data-theme="dark"] .step .n{color:#1B2416}
.step h3{font-size:.98rem;margin-bottom:3px}
.step p{font-size:.85rem;color:var(--ink2);line-height:1.45}

/* ---------- product rows ---------- */
.prod{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow)}
.prod .ic{width:46px;height:46px;flex:none;border-radius:12px;background:var(--gold-soft);display:grid;place-items:center}
.prod .ic svg{width:30px;height:30px;color:var(--gold2)}
.prod .body{flex:1;min-width:0}
.prod .nm{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.02rem;line-height:1.25}
.prod .tagline{font-size:.85rem;color:var(--ink2);margin-top:1px;line-height:1.45}
.prod .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px}
.prod .price{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.15rem;color:var(--gold2)}
.pill{display:inline-block;font-size:.68rem;font-weight:800;padding:3px 10px;border-radius:99px;letter-spacing:.04em}
.pill.order{background:var(--gold-soft);color:var(--gold2)}
.pill.ready{background:#DFF0DC;color:#2F5D2A}
html[data-theme="dark"] .pill.ready{background:#2C3B24;color:#B9D8A8}

/* ---------- chips / anchors ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chips a,.chips button{flex:none;background:var(--card);border:1.5px solid var(--line);border-radius:99px;
  padding:8px 15px;font-weight:700;font-size:.85rem;color:var(--ink2);text-decoration:none;cursor:pointer;font-family:inherit}
.chips a.on,.chips button.on{background:var(--gold);border-color:var(--gold);color:#fff}

/* ---------- reviews ---------- */
.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:17px 18px;box-shadow:var(--shadow)}
.rev .stars{color:var(--gold);letter-spacing:2px;font-size:.9rem}
.rev .q{font-size:.95rem;margin:7px 0 9px;line-height:1.55}
.rev .who{font-size:.8rem;font-weight:700;color:var(--ink2)}

/* ---------- footer ---------- */
footer{background:var(--green);color:#EDE4CE;padding:32px 0 26px;margin-top:10px}
html[data-theme="dark"] footer{background:linear-gradient(180deg,#1E1810,#120E09);border-top:1px solid #3D3325}
footer a{color:#F3C87A;text-decoration:none}
.f-grid{display:grid;gap:22px}
@media(min-width:720px){.f-grid{grid-template-columns:1.2fr 1fr 1fr}}
footer h4{font-family:'Baloo 2',sans-serif;font-size:1rem;margin-bottom:8px;color:#fff}
footer p,footer li{font-size:.88rem;line-height:1.6;opacity:.92}
footer ul{list-style:none}
footer li{margin-bottom:4px}
.f-bot{border-top:1px solid rgba(255,255,255,.16);margin-top:20px;padding-top:14px;font-size:.8rem;opacity:.75;text-align:center}

/* ---------- misc ---------- */
.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.map iframe{width:100%;height:300px;border:0;display:block}
html[data-theme="dark"] .map iframe{filter:brightness(.9) saturate(.85)}
.faq{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:9px;overflow:hidden}
.faq summary{padding:15px 18px;font-weight:700;cursor:pointer;font-size:.97rem;list-style:none;
  display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold2);font-weight:800;font-size:1.15rem}
.faq[open] summary::after{content:'−'}
.faq .a{padding:0 18px 15px;color:var(--ink2);font-size:.92rem;line-height:1.6}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.reveal.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.menu-in{animation:none}}
.divider{height:26px;margin:0 auto;max-width:200px;opacity:.5;color:var(--gold2)}

/* ---------- atta maker rows ---------- */
.mix-row{padding:11px 0;border-bottom:1px dashed var(--line)}
.mix-row:last-child{border-bottom:none}
.mr-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mr-nm{font-weight:700;font-size:.97rem}
.mr-pct{font-family:'Baloo 2',sans-serif;font-weight:800;color:var(--gold2);font-size:1rem;flex:none}
.mr-ben{font-size:.78rem;margin-top:1px}
.mix-row input[type=range]{width:100%;accent-color:var(--gold);height:30px;margin-top:2px}
#mixRows.collapsed .mix-row.zero{display:none}

/* mix page: the mix bar replaces the generic action bar */
body.mixpage .actionbar{display:none}
body.mixpage{padding-bottom:74px}

/* ---------- brand panel (replaces photos) ---------- */
.bpanel{border-radius:var(--r-lg);border:2px solid var(--gold);padding:30px 24px;text-align:center;
  background:linear-gradient(155deg,var(--gold-soft) 0%,var(--card) 100%);box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden}
.bpanel:before{content:'';position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:radial-gradient(rgba(169,111,27,.35) .7px,transparent .7px);background-size:15px 15px}
.bpanel>*{position:relative}
.bpanel svg.mark{display:block;width:74px;height:74px;color:var(--green);margin:0 auto 10px}
.bpanel .bn{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.32rem;line-height:1.15;color:var(--green)}
.bpanel .bs{font-size:.86rem;font-weight:700;letter-spacing:.13em;color:var(--gold2);margin-top:5px;text-transform:uppercase}
.bpanel .bl{width:56px;height:2px;background:var(--gold);margin:13px auto;border-radius:2px}
.bpanel .bt{font-family:'Baloo 2',sans-serif;font-size:1.06rem;font-weight:700;color:var(--ink);margin-bottom:4px}
.bpanel .bd{font-size:.88rem;color:var(--ink2);line-height:1.55;max-width:34ch;margin:0 auto}
.bpanel .bstat{display:flex;justify-content:center;gap:20px;margin-top:16px;flex-wrap:wrap}
.bpanel .bstat div{text-align:center}
.bpanel .bstat b{display:block;font-family:'Baloo 2',sans-serif;font-size:1.15rem;color:var(--gold2);line-height:1}
.bpanel .bstat span{font-size:.72rem;color:var(--ink2);font-weight:600}

/* ---------- story band ---------- */
.story{background:var(--green);color:#F1EBD9;border-radius:var(--r-lg);padding:28px 24px;position:relative;overflow:hidden}
html[data-theme="dark"] .story{background:linear-gradient(150deg,#26331D 0%,#1A2414 100%);border:1px solid #3A4A2E}
.story svg.mark{display:block;width:52px;height:52px;color:#E9C87F;margin-bottom:12px}
.story .eyebrow{display:inline-block;margin-bottom:8px}
.story .btn-gold{margin-top:2px}
@media(max-width:600px){.story{padding:24px 18px}.story .snum{gap:16px}}
@media(min-width:900px){
  .story{padding:36px 40px}
  .story svg.mark{position:absolute;right:44px;top:50%;transform:translateY(-50%);
    width:172px;height:172px;opacity:.45;margin:0}
  .story>*:not(svg){max-width:64%}
}
.story h2{color:#fff;margin-bottom:8px}
.story p{color:#E4DCC6;font-size:1rem;line-height:1.65;max-width:58ch}
.story .snum{display:flex;gap:22px;flex-wrap:wrap;margin:18px 0 20px}
.story .snum div b{display:block;font-family:'Baloo 2',sans-serif;font-size:1.5rem;color:#F3C87A;line-height:1}
.story .snum div span{font-size:.78rem;opacity:.85}
.brandstrip{display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--gold);
  border-radius:var(--r);padding:13px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.brandstrip svg{width:38px;height:38px;color:var(--green);flex:none}
.brandstrip .t{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.98rem;line-height:1.2}
.brandstrip .d{font-size:.8rem;color:var(--ink2);margin-top:1px}
.brandstrip .go{margin-left:auto;color:var(--gold2);font-weight:800;flex:none}

/* dark: hero + brand panel get real presence */
html[data-theme="dark"] .hero{background:transparent}
html[data-theme="dark"] .hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 82% 8%, rgba(233,180,81,.13), transparent 60%)}
html[data-theme="dark"] .bpanel{background:linear-gradient(155deg,#3E3018 0%,#241E17 100%);border-color:var(--gold)}
html[data-theme="dark"] .bpanel:before{background-image:radial-gradient(rgba(243,201,109,.22) .7px,transparent .7px)}
html[data-theme="dark"] .bpanel .bn{color:var(--gold2)}
html[data-theme="dark"] .bpanel svg.mark{color:var(--gold)}
html[data-theme="dark"] .brandstrip{background:linear-gradient(160deg,#2C2419 0%,#221D16 100%)}
html[data-theme="dark"] .brandstrip svg{color:var(--gold)}
html[data-theme="dark"] header{background:color-mix(in srgb,#15120D 88%,transparent);border-bottom-color:#3D3325}
html[data-theme="dark"] .actionbar{background:color-mix(in srgb,#15120D 94%,transparent);border-top:1px solid #3D3325}
html[data-theme="dark"] .icon-btn,html[data-theme="dark"] .lang-btn,html[data-theme="dark"] .burger{background:#241F18}
html[data-theme="dark"] .tape,html[data-theme="dark"] .strip{border-color:#3D3325}
html[data-theme="dark"] .mix-row input[type=range]{accent-color:var(--gold2)}
html[data-theme="dark"] a{color:inherit}
html[data-theme="dark"] .rev .stars{color:var(--gold2)}

/* announcement tape */
.tape{background:var(--green);color:#F3EFDF;text-align:center;padding:11px 16px;font-weight:700;font-size:.92rem}
html[data-theme="dark"] .tape{background:linear-gradient(90deg,#22301B,#2B3B22 50%,#22301B);color:#DCE9CE;
  border-bottom:1px solid #3A4A2E}
html[data-theme="dark"] .btn-primary{background:linear-gradient(160deg,#F0BC58,#D2952C);color:#241B08;
  box-shadow:0 6px 20px rgba(226,170,60,.30)}
html[data-theme="dark"] .btn-ghost{background:#241F18;border-color:#4A3F2E}
html[data-theme="dark"] .story h2{color:#F4EEDF}

/* ---------- dark-mode polish pass ---------- */
html[data-theme="dark"] header{box-shadow:0 1px 0 rgba(243,201,109,.10),0 8px 24px rgba(0,0,0,.5)}
html[data-theme="dark"] .brand svg{color:#F3C96D}
html[data-theme="dark"] .tape{font-size:.87rem;padding:10px 16px;
  background:linear-gradient(90deg,#1F2C18,#2E4024 50%,#1F2C18);color:#D9E7CB;
  border-top:1px solid rgba(243,201,109,.16);border-bottom:1px solid rgba(243,201,109,.16)}
html[data-theme="dark"] .eyebrow{border:1px solid rgba(243,201,109,.28)}
html[data-theme="dark"] .hero h1{color:#FFF8EA;text-shadow:0 2px 18px rgba(0,0,0,.45)}
html[data-theme="dark"] .actionbar{box-shadow:0 -8px 24px rgba(0,0,0,.55)}
html[data-theme="dark"] .actionbar .btn-wa{box-shadow:none}
html[data-theme="dark"] .mb-send{background:var(--wa)}

/* tighter above-the-fold on phones so the brand panel is visible without hunting */
@media(max-width:640px){
  .hero{padding:24px 0 26px}
  .hero h1{margin:8px 0 10px;font-size:clamp(1.6rem,7.2vw,2.1rem);max-width:none}
  .hero .sub{font-size:.98rem;margin-bottom:16px;max-width:none}
  .hero .btn-row{gap:8px}
  .hero .btn-row .btn{flex:1 1 100%;padding:12px 18px}
  .tape{font-size:.83rem;padding:9px 14px;line-height:1.45}
  .bpanel{padding:24px 18px}
  .bpanel svg.mark{width:62px;height:62px}
}

/* ---------- Atta Maker: floating order panel ---------- */
#mixBar{position:fixed;left:0;right:0;bottom:0;z-index:65;
  background:color-mix(in srgb,var(--card) 96%,transparent);backdrop-filter:blur(14px);
  border-top:2px solid var(--gold);box-shadow:0 -8px 26px rgba(0,0,0,.16);
  padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  transform:translateY(130%);transition:transform .28s cubic-bezier(.2,.7,.3,1)}
#mixBar.show{transform:none}
html[data-theme="dark"] #mixBar{box-shadow:0 -10px 30px rgba(0,0,0,.6)}
.mixbar-in{display:flex;align-items:center;gap:10px;padding:0}
.mb-info{flex:1;min-width:0}
#barMix{font-size:.76rem;color:var(--ink2);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#barTotal{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.08rem;color:var(--gold2);
  white-space:nowrap;line-height:1.25}
.mb-send{flex:none;padding:11px 16px}
.mb-share{flex:none;padding:10px 12px}
@media(max-width:400px){.mb-send{padding:11px 13px;font-size:.83rem}}
/* compact trust strip (Atta Maker hero) */
.trust-sm div{padding:9px 6px}
.trust-sm .t{font-size:.92rem}
.trust-sm .d{font-size:.7rem}

/* ---------- Atta Maker: how-it-works row (replaces the tile grid) ---------- */
.howrow{display:flex;gap:8px;margin-top:14px}
.howrow div{flex:1;display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line);
  border-radius:12px;padding:9px 10px;min-width:0}
.howrow b{flex:none;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#fff;
  font-family:'Baloo 2',sans-serif;font-size:.82rem;display:grid;place-items:center}
html[data-theme="dark"] .howrow b{color:#241B08}
html[data-theme="dark"] .howrow div{background:linear-gradient(160deg,#2A241C,#211C15);border-color:#443A2B}
.howrow span{font-size:.78rem;font-weight:600;line-height:1.25}
.minfo{margin-top:9px}
@media(max-width:520px){
  .howrow{gap:6px}
  .howrow div{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:9px 5px}
  .howrow span{font-size:.72rem}
}

/* ---------- "these scroll" cue on the preset row ---------- */
.chipwrap{position:relative}
.chipwrap:after{content:'';position:absolute;top:0;bottom:10px;right:0;width:52px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bg));opacity:1;transition:opacity .25s}
.chipwrap.end:after{opacity:0}
.swipe-cue{position:absolute;right:6px;top:calc(50% - 16px);width:28px;height:28px;border-radius:50%;
  background:var(--gold);color:#fff;display:grid;place-items:center;font-size:1.2rem;font-weight:800;
  box-shadow:0 3px 12px rgba(0,0,0,.22);pointer-events:none;animation:cueNudge 1.9s ease-in-out infinite;
  transition:opacity .25s}
html[data-theme="dark"] .swipe-cue{color:#241B08}
.chipwrap.end .swipe-cue{opacity:0}
@keyframes cueNudge{0%,58%,100%{transform:translateX(0)}70%{transform:translateX(-5px)}82%{transform:translateX(0)}}
.chips.hintable.peek{animation:chipPeek 1.25s cubic-bezier(.4,0,.2,1)}
@keyframes chipPeek{0%{transform:translateX(0)}28%{transform:translateX(-26px)}60%{transform:translateX(-26px)}100%{transform:translateX(0)}}

/* ---------- sliders that read as sliders ---------- */
.draghint{display:flex;align-items:flex-start;gap:7px;color:var(--ink2)}
.dh-ico{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;
  background:var(--gold-soft);color:var(--gold2);font-weight:800;font-size:.8rem;animation:dhSlide 2.2s ease-in-out infinite}
@keyframes dhSlide{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
.mix-row input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:34px;margin-top:2px;
  background:transparent;cursor:grab;touch-action:pan-y}
.mix-row input[type=range]:active{cursor:grabbing}
.mix-row input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold) var(--f,0%),var(--line) var(--f,0%))}
.mix-row input[type=range]::-moz-range-track{height:10px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold) var(--f,0%),var(--line) var(--f,0%))}
.mix-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--card);border:3px solid var(--gold);margin-top:-8px;
  box-shadow:0 2px 8px rgba(0,0,0,.22),inset 0 0 0 3px var(--gold)}
.mix-row input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--card);
  border:3px solid var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.22),inset 0 0 0 3px var(--gold)}
#mixRows.untouched .mix-row:not(.zero):first-child input[type=range]::-webkit-slider-thumb{animation:thumbPulse 1.8s ease-in-out infinite}
#mixRows.untouched .mix-row:not(.zero):first-child input[type=range]::-moz-range-thumb{animation:thumbPulse 1.8s ease-in-out infinite}
@keyframes thumbPulse{
  0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.22),inset 0 0 0 3px var(--gold),0 0 0 0 rgba(201,138,43,.55)}
  60%{box-shadow:0 2px 8px rgba(0,0,0,.22),inset 0 0 0 3px var(--gold),0 0 0 11px rgba(201,138,43,0)}
}
@media(prefers-reduced-motion:reduce){
  .swipe-cue,.dh-ico,.chips.hintable.peek{animation:none}
  #mixRows.untouched .mix-row input[type=range]::-webkit-slider-thumb{animation:none}
}

/* short chip rows wrap instead of cutting off mid-word */
#wheatRow,#fulRow{flex-wrap:wrap;overflow:visible}
#wheatRow button,#fulRow button{flex:0 1 auto}

/* ================= Atta Maker v2 ================= */
/* all ready mixes visible at once, with their ratios */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(min-width:560px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pmix{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--card);
  border:1.5px solid var(--line);border-radius:14px;padding:10px 11px;cursor:pointer;font-family:inherit;
  color:var(--ink);transition:border-color .15s,transform .12s,box-shadow .15s}
.pmix:active{transform:scale(.985)}
.pmix.on{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 35%,transparent);
  background:linear-gradient(160deg,var(--gold-soft),var(--card))}
html[data-theme="dark"] .pmix{background:linear-gradient(160deg,#2A241C,#211C15);border-color:#443A2B}
html[data-theme="dark"] .pmix.on{background:linear-gradient(160deg,#463519,#272118)}
.pt-top{display:flex;align-items:center;gap:6px;min-width:0}
.pt-e{font-size:1.05rem;flex:none}
.pt-n{font-weight:700;font-size:.85rem;line-height:1.15}
.pt-bar{display:flex;height:7px;border-radius:99px;overflow:hidden;background:var(--line)}
.pt-bar i{display:block;height:100%}
.pt-r{font-size:.68rem;color:var(--ink2);font-weight:600;line-height:1.3}

/* wheat choice, inside the wheat slider row */
.wsel{display:inline-flex;gap:0;margin-top:7px;border:1.5px solid var(--line);border-radius:99px;
  overflow:hidden;background:var(--bg2)}
.wsel button{font-family:inherit;font-weight:700;font-size:.76rem;padding:6px 12px;border:none;
  background:transparent;color:var(--ink2);cursor:pointer;white-space:nowrap}
.wsel button.on{background:var(--gold);color:#fff}
html[data-theme="dark"] .wsel{background:#1D1913;border-color:#443A2B}
html[data-theme="dark"] .wsel button.on{color:#241B08}

/* the live result panel — sticky so you never scroll to check */
.mixgrid{display:block}
.livecard{background:var(--card);border:1.5px solid var(--gold);border-radius:var(--r);padding:13px 15px;
  box-shadow:var(--shadow)}
html[data-theme="dark"] .livecard{background:linear-gradient(160deg,#2C2419,#211C15)}
.lc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lc-ttl{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.95rem}
.lc-cost{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.3rem;color:var(--gold2)}
.lc-ratio{margin-top:8px}
.lr-txt{display:block;font-size:.7rem;color:var(--ink2);font-weight:600;margin-top:5px;line-height:1.35}
.lc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.ls{background:var(--bg2);border-radius:10px;padding:7px 4px;text-align:center;min-width:0}
html[data-theme="dark"] .ls{background:#1D1913}
.ls b{display:block;font-family:'Baloo 2',sans-serif;font-size:.95rem;line-height:1.1}
.ls span{display:block;font-size:.62rem;color:var(--ink2);font-weight:700;line-height:1.2;margin-top:2px}
.ls.hi{background:var(--gold-soft)}
.ls.hi b{color:var(--gold2)}
.lc-bars{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line)}

/* mobile: the panel pins under the header while you drag */
@media(max-width:899px){
  .mixcol{display:contents}
  .mixgrid{display:flex;flex-direction:column}
  .livecol{position:sticky;top:calc(var(--nav-h) + 6px);z-index:35;order:-1;padding-top:8px;
    background:linear-gradient(180deg,var(--bg) 78%,transparent)}
  .livecard{padding:10px 12px}
  .livecard .note#rotiEq{display:none}
  .lc-cost{font-size:1.18rem}
}
@media(min-width:900px){
  .mixgrid{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start;margin-top:6px}
  .livecol{position:sticky;top:calc(var(--nav-h) + 14px)}
}

html[data-theme="dark"] .pmix{background:linear-gradient(160deg,#2A241C,#211C15);border-color:#443A2B}
html[data-theme="dark"] .pmix.on{background:linear-gradient(160deg,#463519,#272118);border-color:var(--gold)}

/* one clear nutrition chart: label · bar · quantity */
.lc-bars{margin-top:9px}
.nbar{display:grid;grid-template-columns:72px 1fr 60px;align-items:center;gap:8px;margin-bottom:6px}
.nbar .nl{font-size:.75rem;font-weight:700;color:var(--ink2);line-height:1.1}
.nbar .nt{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.nbar .nt i{display:block;height:100%;border-radius:99px;transition:width .35s ease}
.nbar .nv{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.82rem;text-align:right;line-height:1.1}
.nnote{font-size:.66rem;color:var(--ink3);line-height:1.35;margin-top:6px}
@media(max-width:380px){.nbar{grid-template-columns:62px 1fr 54px;gap:6px}.nbar .nl{font-size:.7rem}}
.livecard .mix-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}

/* ---------- per-grain detail ---------- */
.mr-top{gap:8px}
.mr-i{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg2);
  color:var(--ink2);font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.75rem;line-height:1;
  cursor:pointer;margin-right:auto;transition:background .15s,color .15s,border-color .15s}
.mr-i:hover{border-color:var(--gold);color:var(--gold2)}
.mr-i.on{background:var(--gold);border-color:var(--gold);color:#fff}
html[data-theme="dark"] .mr-i{background:#1D1913}
html[data-theme="dark"] .mr-i.on{color:#241B08}
.mr-info{margin-top:8px;padding:12px 13px;border-radius:12px;background:var(--bg2);
  border:1px solid var(--line);animation:giIn .18s ease-out}
html[data-theme="dark"] .mr-info{background:#1B1712;border-color:#3D3325}
@keyframes giIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.gi-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.gi-facts span{background:var(--card);border-radius:9px;padding:6px 4px;text-align:center;font-size:.63rem;
  color:var(--ink2);font-weight:700;line-height:1.25}
html[data-theme="dark"] .gi-facts span{background:#241F18}
.gi-facts b{display:block;font-family:'Baloo 2',sans-serif;font-size:.88rem;color:var(--gold2);line-height:1.1}
.gi-facts .gi-gf b{color:var(--green2)}
.gi-why{font-size:.83rem;line-height:1.6;color:var(--ink)}
.gi-line{font-size:.79rem;line-height:1.55;color:var(--ink2);margin-top:7px}
.gi-line b{color:var(--ink)}
.gi-src{font-size:.66rem;color:var(--ink3);line-height:1.4;margin-top:9px;padding-top:8px;
  border-top:1px dashed var(--line)}
@media(min-width:560px){.gi-facts{grid-template-columns:repeat(6,1fr)}}

/* ---------- spread the word ---------- */
.sharecard{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(150deg,var(--gold-soft),var(--card));
  border:1.5px solid var(--gold);border-radius:var(--r-lg);padding:20px 20px;box-shadow:var(--shadow)}
html[data-theme="dark"] .sharecard{background:linear-gradient(150deg,#3B2E17,#241F18)}
.sharecard .sh-ic{flex:none;width:44px;height:44px;border-radius:14px;background:var(--gold);color:#fff;
  display:grid;place-items:center;font-size:1.3rem}
html[data-theme="dark"] .sharecard .sh-ic{color:#241B08}
.sharecard h3{font-size:1.05rem;margin-bottom:5px}
.sharecard p{font-size:.9rem;color:var(--ink2);line-height:1.55}
@media(max-width:520px){.sharecard{padding:17px 15px;gap:11px}.sharecard .sh-ic{width:38px;height:38px;font-size:1.15rem}}
.fshare{margin-top:10px;background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#F1EBD9;
  font-family:inherit;font-weight:700;font-size:.83rem;padding:8px 14px;border-radius:99px;cursor:pointer;
  text-align:left;line-height:1.3}
.fshare:hover{border-color:#F3C87A;color:#F3C87A}

/* ---------- retractable top bar on the Atta Maker ---------- */
header{transition:transform .26s cubic-bezier(.3,.7,.3,1),background .3s}
body.navhide header{transform:translateY(-102%)}
body.mixpage .livecol{transition:top .26s cubic-bezier(.3,.7,.3,1)}
@media(max-width:899px){
  body.mixpage.navhide .livecol{top:6px}
}
@media(min-width:900px){
  body.mixpage.navhide .livecol{top:14px}
}
/* a small handle so it is obvious the bar comes back */
body.mixpage.navhide::before{content:'';position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:46px;height:4px;border-radius:0 0 6px 6px;background:var(--gold);opacity:.75;z-index:59;
  pointer-events:none}

/* ---------- mix ratio bar ---------- */
.lc-ratio{margin-top:8px}
.lr-bar{display:flex;height:9px;border-radius:99px;overflow:hidden;background:var(--line)}
.lr-bar i{display:block;height:100%;min-width:2px;transition:width .3s ease}

/* ---------- less repetition, more room ---------- */
/* gluten status rides on the ratio line — the chart cannot show it */
.lr-gf{display:inline-block;margin-left:7px;padding:1px 8px;border-radius:99px;font-size:.68rem;
  font-weight:800;background:var(--gold-soft);color:var(--gold2);vertical-align:1px}
html[data-theme="dark"] .lr-gf{background:#3C2E16;color:var(--gold2)}

/* the chart needs the value column, not the label column */
.nbar{grid-template-columns:64px 1fr 78px;gap:9px}
.nbar .nv{font-size:.83rem;white-space:nowrap}
@media(max-width:380px){.nbar{grid-template-columns:56px 1fr 70px;gap:6px}.nbar .nv{font-size:.78rem}}

/* fixed bar: drop the repeated summary while the live card is visible */
#mixBar.slim .mb-info{display:none}
#mixBar.slim .mb-send{flex:1}
#mixBar .mb-send{transition:flex .2s}

/* ---------- no duplicate CTAs ---------- */
.actionbar{transition:transform .26s cubic-bezier(.3,.7,.3,1)}
body.ctahide .actionbar{transform:translateY(120%);pointer-events:none}

/* ============================================================
   Landing intro — ~2s. Self-dismisses in pure CSS even without JS.
   ============================================================ */
#boot{position:fixed;inset:0;z-index:999;display:grid;place-items:center;
  touch-action:none;overscroll-behavior:contain;will-change:opacity;overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(217,170,72,.13), transparent 38%),
    linear-gradient(150deg,#16130D 0%,#1A1C11 55%,#101711 100%);
  animation:bootOut .5s ease 1.9s forwards}
#boot.skip{animation:bootOut .25s ease forwards}
html.noboot #boot{display:none}
@keyframes bootOut{to{opacity:0;visibility:hidden;pointer-events:none}}

/* slow drifting grain specks in the background */
#boot .gd{position:absolute;width:8px;height:8px;border-radius:56% 44% 56% 44%;
  background:#D9A441;opacity:0;transform:rotate(35deg);animation:gdIn 1.3s ease-out forwards}
#boot .gd.g1{left:17%;top:19%;animation-delay:.05s} #boot .gd.g2{left:73%;top:21%;animation-delay:.16s}
#boot .gd.g3{left:27%;top:73%;animation-delay:.22s} #boot .gd.g4{left:81%;top:69%;animation-delay:.09s}
#boot .gd.g5{left:11%;top:52%;animation-delay:.27s} #boot .gd.g6{left:89%;top:43%;animation-delay:.19s}
#boot .gd.g7{left:41%;top:12%;animation-delay:.32s} #boot .gd.g8{left:60%;top:83%;animation-delay:.13s}
@keyframes gdIn{0%{opacity:0;transform:translateY(-26px) rotate(35deg) scale(.5)}
  60%{opacity:.55}100%{opacity:.22;transform:translateY(0) rotate(35deg) scale(1)}}

.boot-in{text-align:center;position:relative;padding:0 24px;display:flex;flex-direction:column;align-items:center}
.boot-stage{position:relative;width:124px;height:124px;margin:0 auto 18px}
.boot-stage .stone{width:124px;height:124px;display:block;
  animation:stoneIn .55s cubic-bezier(.2,1.25,.4,1) both, stoneSpin 3.6s linear .55s infinite}
@keyframes stoneIn{from{opacity:0;transform:scale(.55) rotate(-40deg)}to{opacity:1;transform:none}}
@keyframes stoneSpin{to{transform:rotate(360deg)}}

.boot-stage .grain{position:absolute;left:50%;top:0;width:9px;height:15px;margin-left:-4.5px;
  border-radius:50%;background:#E9C87F;opacity:0}
.grain.g1{animation:drop .62s ease-in .36s both}
.grain.g2{margin-left:-19px;animation:drop .62s ease-in .52s both}
.grain.g3{margin-left:10px;animation:drop .62s ease-in .68s both}
.grain.g4{margin-left:-11px;animation:drop .62s ease-in .84s both}
@keyframes drop{0%{opacity:0;transform:translateY(-70px) rotate(-18deg) scale(.9)}
  25%{opacity:1}100%{opacity:0;transform:translateY(48px) rotate(22deg) scale(.5)}}

.boot-stage .puff{position:absolute;left:50%;top:50%;width:126px;height:126px;margin:-63px 0 0 -63px;
  border-radius:50%;background:radial-gradient(circle,rgba(246,237,214,.5) 0%,rgba(246,237,214,0) 68%);
  opacity:0;animation:puff 1.1s ease-out .95s both}
@keyframes puff{0%{opacity:0;transform:scale(.35)}35%{opacity:.9}100%{opacity:0;transform:scale(2.3)}}

.boot-name{font-family:'Baloo 2','Noto Sans Devanagari',sans-serif;font-weight:800;color:#FFF8EA;
  font-size:clamp(1.3rem,6vw,1.8rem);letter-spacing:.06em;line-height:1.1;
  animation:bootUp .5s cubic-bezier(.2,.8,.3,1) .55s both}
.boot-rule{width:0;height:1.5px;background:#C98A2B;border-radius:2px;margin:15px 0 14px;
  animation:ruleIn .55s ease .8s forwards}
@keyframes ruleIn{to{width:118px}}
.boot-tag{font-family:'Hind','Noto Sans Devanagari',serif;color:#F1E7D2;
  font-size:clamp(1rem,4.2vw,1.22rem);line-height:1.4;
  animation:bootUp .55s ease 1s both}
.boot-sub{color:#C6A96C;font-weight:700;font-size:clamp(.66rem,2.6vw,.78rem);letter-spacing:.16em;
  text-transform:uppercase;margin-top:11px;animation:bootUp .5s ease 1.25s both}
@keyframes bootUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  #boot{animation:bootOut .3s ease .9s forwards}
  .boot-stage .stone,.boot-name,.boot-rule,.boot-tag,.boot-sub,#boot .gd{animation:none}
  .boot-rule{width:118px}
  .boot-stage .grain,.boot-stage .puff{display:none}
}

/* ---------- install as an app ---------- */
html.inapp .instwrap{display:none!important}
.instcard{
  margin-top:14px;padding:12px 14px;border-radius:14px;
  background:color-mix(in srgb,var(--gold) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
}
.instcard .ic-t{font-weight:700;margin-bottom:4px}
.instcard .note{margin-bottom:10px}
.iosheet{
  position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;
  background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .22s ease;
  padding:0 0 env(safe-area-inset-bottom);
}
.iosheet.open{opacity:1;pointer-events:auto}
.iosheet-in{
  width:100%;background:var(--bg);color:var(--fg);
  border-radius:20px 20px 0 0;padding:20px 20px 24px;
  transform:translateY(14px);transition:transform .22s ease;
  box-shadow:0 -8px 40px rgba(0,0,0,.28);
}
.iosheet.open .iosheet-in{transform:translateY(0)}
.iosheet-in b{display:block;font-size:1.05rem;margin-bottom:10px}
.iosheet-in ol{margin:0 0 16px;padding-left:20px}
.iosheet-in li{margin-bottom:7px;line-height:1.45}
@media(min-width:640px){
  .iosheet{align-items:center;justify-content:center}
  .iosheet-in{max-width:400px;border-radius:20px}
}

/* install banner, sits just under the hero trust row on Home */
.instbanner{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding:13px 16px;border-radius:16px;
  background:color-mix(in srgb,var(--gold) 14%,var(--card));
  border:1px solid color-mix(in srgb,var(--gold) 38%,transparent);
}
.instbanner[hidden]{display:none}
.instbanner .ib-txt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}
.instbanner .ib-txt b{font-size:1rem}
.instbanner .ib-txt span{font-size:.87rem;color:var(--muted)}