/* Mednaire public website. Plain CSS, no inline styles (the content security policy forbids them). */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/geist-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/poppins-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --ground:#F3F5EE;--paper:#FFFFFF;--ink:#10201A;--ink-2:#33423B;--muted:#4D5B54;--muted-2:#64736C;--faint:#8A968F;
  --line:#DDE3DA;--line-2:#C5CEC4;--soft:#EAEEE5;--soft-2:#F7F9F4;--rule:#EEF1EA;
  --green:#077A52;--green-d:#06583B;--mint:#DDF2E6;--mint-line:#A9D6BE;--mango:#FFC24B;--mango-soft:#FFF1CF;
  --tomato:#E4572E;--water:#1A7F9E;--water-soft:#E1F3F8;--lilac:#F1ECFA;--mpesa:#00A84F;
  --dark:#10201A;--dark-card:#1B3128;--dark-muted:#B8C7BF;
  --display:"Bricolage Grotesque",system-ui,sans-serif;--body:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased;line-height:1.5}
img,svg{display:block;max-width:100%}
a{color:var(--green)}a:hover{color:var(--green-d)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
::selection{background:var(--mango);color:var(--ink)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:50;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none}
.skip:focus{top:12px;color:#fff}

.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
@media(max-width:600px){.wrap{padding:0 16px}}
.section{padding-top:112px;padding-bottom:112px}
.section-tight{padding-bottom:112px}
@media(max-width:700px){.section{padding-top:72px;padding-bottom:72px}.section-tight{padding-bottom:72px}}

/* type */
.display{margin:0;font-family:var(--display);font-weight:500;letter-spacing:-.045em;line-height:.96;font-size:clamp(44px,6.6vw,96px)}
.h2{margin:0;font-family:var(--display);font-weight:500;letter-spacing:-.04em;line-height:1;font-size:clamp(34px,4.6vw,64px)}
.h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:24px;line-height:1.15}
.lead{margin:0;font-size:19px;line-height:1.6;color:var(--muted);max-width:540px}
.body{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.label{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2)}
.mono{font-family:var(--mono)}
.hl{display:inline-block;padding:0 .16em .06em;border-radius:.2em;background:var(--mango);transform:rotate(-2deg)}
.hl-mint{background:var(--mint)}
.center{text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;border:1px solid transparent;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .2s ease,filter .2s ease,background .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.btn-lg{height:58px;padding:0 28px;font-size:16px}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{color:#fff}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{color:#fff}
.btn-white{background:#fff;color:var(--ink)}.btn-white:hover{color:var(--ink)}
.btn-mango{background:var(--mango);color:var(--ink)}.btn-mango:hover{color:var(--ink)}
.btn-line{background:#fff;color:var(--ink);border-color:var(--line-2)}.btn-line:hover{color:var(--ink)}
.btn-block{display:flex;width:100%}
.btn svg{flex-shrink:0}

/* header */
.head{position:sticky;top:0;z-index:30;background:rgba(243,245,238,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(197,206,196,.55)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
.brand-name{font-family:"Poppins",var(--body);font-weight:700;font-size:22px;letter-spacing:-.3px}
.brand-sm .brand-name{font-size:19px}
.nav{display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:500}
.nav a{padding:9px 16px;border-radius:999px;color:var(--ink);text-decoration:none;transition:background .2s}
.nav a:hover{background:var(--rule)}
.nav a[aria-current=page]{background:var(--ink);color:#fff}
.head-cta{height:46px;padding:0 20px;font-size:14px}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--ink);color:#fff;border-color:var(--ink)}
.menu-list{position:absolute;right:0;top:54px;min-width:240px;display:flex;flex-direction:column;padding:8px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 48px -28px rgba(16,32,26,.45)}
.menu-list a{padding:13px 14px;border-radius:14px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.menu-list a:hover{background:var(--ground)}
.menu-list a[aria-current=page]{background:var(--mint);color:var(--green-d)}
.menu-list .btn{margin-top:6px;color:#fff}
@media(max-width:860px){.nav,.head-cta{display:none}.menu{display:block}}

/* hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:56px;padding-top:56px;padding-bottom:72px}
.hero-copy{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:28px}
.hero-art{flex:1 1 440px;min-width:0;position:relative;height:680px}
.chip-link{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:500;text-decoration:none}
.chip-link:hover{color:var(--ink)}
.chip-link b{padding:4px 10px;border-radius:999px;background:var(--mint);color:var(--green-d);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.5px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.facts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-size:14px;color:var(--muted)}
.facts span{display:inline-flex;align-items:center;gap:8px}
.mp{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:11px;background:var(--mpesa);color:#fff;font-size:10px;font-weight:700}
.blob{position:absolute;left:50%;top:40px;width:560px;height:560px;margin-left:-280px;border-radius:50%;background:var(--mint)}
.blob-mango{background:var(--mango-soft)}
@media(max-width:600px){.blob{width:330px;height:330px;margin-left:-165px;top:100px}.hero-art{height:640px}}

/* phone mock */
.phone{position:absolute;left:50%;top:0;width:300px;margin-left:-150px;padding:8px;border-radius:48px;background:var(--dark);box-shadow:0 40px 80px -40px rgba(16,32,26,.55)}
.screen{position:relative;height:632px;border-radius:40px;overflow:hidden;background:#F6F7F4;font-family:"Poppins",var(--body)}
.screen *{font-family:var(--body)}
.notch{position:absolute;left:50%;top:10px;width:90px;height:24px;margin-left:-45px;border-radius:12px;background:var(--dark);z-index:2}
.scr{display:flex;flex-direction:column;gap:10px;padding:46px 14px 14px}
.scr-top{display:flex;justify-content:space-between;align-items:center}
.scr-hi{font-size:12px;color:var(--muted-2)}
.scr-title{font-size:19px;font-weight:600;letter-spacing:-.3px}
.scr-av{width:32px;height:32px;border-radius:16px;background:var(--mango);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.scr-good{display:flex;gap:8px;align-items:center;padding:9px 11px;border-radius:14px;background:var(--mint);color:var(--green-d);font-size:11.5px;font-weight:500}
.scr-card{padding:12px;border-radius:18px;background:#fff;border:1px solid #E7EBE4}
.scr-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.scr-h{font-size:13px;font-weight:600}
.scr-s{font-size:11px;color:var(--muted-2)}
.scr-meal{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #EEF1EA}
.scr-meal:first-of-type{border-top:0}
.tick{flex-shrink:0;width:20px;height:20px;border-radius:10px;border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center}
.tick.on{background:var(--green);border-color:var(--green)}
.scr-meal b{display:block;font-size:12px;font-weight:600}
.scr-meal i{display:block;font-style:normal;font-size:10.5px;color:var(--muted-2)}
.scr-meal .cost{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-2)}
.bar{height:6px;border-radius:3px;background:#E8ECE5;overflow:hidden}
.bar>span{display:block;height:100%;border-radius:3px;background:var(--green)}
.bar-water>span{background:var(--water)}
.scr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scr-big{font-size:18px;font-weight:600;letter-spacing:-.3px}
.scr-tabs{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:10px 6px 16px;background:#fff;border-top:1px solid #E7EBE4;font-size:10px;color:var(--muted-2)}
.scr-tabs span{display:flex;flex-direction:column;align-items:center;gap:3px}
.scr-tabs .on{color:var(--green);font-weight:600}
.scr-tabs i{width:18px;height:18px;border-radius:6px;background:#E3E8E0}
.scr-tabs .on i{background:var(--green)}
.pt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid #E7EBE4}
.pt-av{flex-shrink:0;width:34px;height:34px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.pt b{display:block;font-size:12.5px;font-weight:600}
.pt i{display:block;font-style:normal;font-size:10.5px;color:var(--muted-2)}
.pill{margin-left:auto;flex-shrink:0;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:600}
.pill-red{background:#FCE6E1;color:#8E2A17}.pill-green{background:var(--mint);color:var(--green-d)}.pill-amber{background:var(--mango-soft);color:#7A5300}
.av-1{background:var(--mango)}.av-2{background:var(--water-soft)}.av-3{background:var(--mint)}.av-4{background:var(--lilac)}.av-5{background:#FCE6E1}

/* floating cards */
.float{position:absolute;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(16,32,26,.45);animation:float 6s ease-in-out infinite}
.float b{display:block;font-size:13px;font-weight:600}
.float i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted)}
.float-1{left:0;top:96px;max-width:240px}
.float-2{right:0;top:300px;animation-delay:-2s}
.float-3{left:12px;bottom:40px;animation-delay:-4s}
.ico{flex-shrink:0;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.ico-mint{background:var(--mint);color:var(--green-d)}.ico-mango{background:var(--mango);color:var(--ink)}.ico-water{background:var(--water-soft);color:var(--water)}.ico-mpesa{background:var(--mpesa);color:#fff;font-weight:700;font-size:14px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:600px){.float-1{left:-4px;top:60px}.float-2{right:-4px}.float-3{left:0;bottom:24px}}

/* ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;overflow:hidden}
.ticker-track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.tick-item{display:flex;align-items:center;gap:10px;padding:16px 28px;border-right:1px solid var(--rule);white-space:nowrap;font-size:14px;color:var(--ink-2)}
.tag{padding:3px 9px;border-radius:999px;font-family:var(--mono);font-size:11px}
.tag-plan{background:var(--mint);color:var(--green-d)}.tag-meal{background:var(--mango-soft);color:#7A5300}.tag-reading{background:var(--water-soft);color:#155F77}.tag-pay{background:#E3F6EA;color:#00692F}.tag-reminder{background:var(--rule);color:var(--ink-2)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* section heads */
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.sec-head .body{max-width:380px;font-size:16px}

/* goals */
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.tab{height:50px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;cursor:pointer;background:#fff;color:var(--ink);border:1px solid var(--line-2);transition:background .2s,color .2s}
.tab[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.goal{display:flex;flex-wrap:wrap;gap:16px}
.day{flex:3 1 560px;min-width:0;display:flex;flex-direction:column;border-radius:28px;background:#fff;border:1px solid var(--line);overflow:hidden}
.day-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 28px;border-bottom:1px solid var(--line)}
.day-title{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.4px}
.meal{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:18px 28px;border-bottom:1px solid var(--rule);transition:background .25s}
.meal.swapped{background:#F1FAF4}
.dot{width:10px;height:10px;flex-shrink:0;border-radius:5px}
.dot-0{background:var(--mango)}.dot-1{background:var(--green)}.dot-2{background:var(--water)}.dot-3{background:var(--tomato)}
.meal-when{width:92px;flex-shrink:0;font-family:var(--mono);font-size:12px;color:var(--muted-2)}
.meal-food{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:4px}
.meal-food b{font-size:16px;font-weight:500}
.meal-food i{font-style:normal;font-size:12px;color:var(--green)}
.meal-end{display:flex;align-items:center;gap:12px;margin-left:auto}
.meal-was{font-family:var(--mono);font-size:12px;color:var(--faint);text-decoration:line-through}
.meal-cost{min-width:64px;text-align:right;font-family:var(--mono);font-size:14px}
.swap{width:96px;height:36px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;background:var(--mint);color:var(--green-d);border:1px solid var(--mint)}
.swap[aria-pressed=true]{background:#fff;color:var(--ink);border-color:var(--line-2)}
.swap-gap{width:96px}
.day-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:22px 28px;background:var(--soft-2)}
.day-foot small{display:block;font-size:13px;color:var(--muted-2)}
.day-foot small.saving{color:var(--green)}
.day-total{display:flex;align-items:baseline;gap:12px}
.day-total s{font-family:var(--mono);font-size:14px;color:var(--faint)}
.day-total strong{font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.6px}
.why{flex:2 1 340px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:32px;border-radius:28px;background:var(--mint);transition:background .3s}
.why p.big{margin:0;font-family:var(--display);font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.5px}
.why-bp{background:var(--water-soft)}.why-weight{background:var(--mango-soft)}.why-budget{background:var(--lilac)}
@media(max-width:600px){.meal,.day-head,.day-foot{padding-left:18px;padding-right:18px}.meal-when{width:auto}}

/* dark how-it-works */
.dark{margin:0 16px;border-radius:40px;background:var(--dark);color:#fff}
.dark .label{color:var(--dark-muted)}
.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.step{display:flex;flex-direction:column;gap:22px;padding:28px;border-radius:28px;background:var(--dark-card)}
.step-n{font-family:var(--mono);font-size:12px;color:var(--mango)}
.step p{margin:0;font-size:15px;line-height:1.6;color:var(--dark-muted)}
.mini{padding:16px;border-radius:18px;background:#fff;color:var(--ink);display:flex;flex-direction:column;gap:10px;font-size:13px}
.mini-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.seg{display:flex;gap:6px}
.seg span{flex:1;padding:8px 4px;border-radius:10px;border:1px solid var(--line);text-align:center;font-size:12px;font-weight:600}
.seg span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:600px){.dark{margin:0 8px;border-radius:28px}}

/* cards grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
.card{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:28px;border-radius:28px;background:#fff;border:1px solid var(--line);transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(16,32,26,.45)}
.card-top{display:flex;flex-direction:column;gap:10px}
.card-mango{background:var(--mango);border-color:var(--mango)}
.card-mango .body{color:var(--ink-2)}
.card-mint{background:var(--mint);border-color:var(--mint-line)}
.glasses{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.glass{height:56px;border-radius:6px 6px 12px 12px;background:var(--water-soft);transition:background .2s}
.glass.on{background:var(--water)}
.water-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}
.water-text{font-family:var(--display);font-size:22px;font-weight:600}
.btn-sm{height:40px;padding:0 16px;font-size:13px}
.notif{display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;background:var(--ground)}
.notif-logo{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.notif b{display:block;font-size:14px;font-weight:600}
.notif i{display:block;font-style:normal;font-size:12px;color:var(--muted-2)}
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:14px;font-weight:500}
.switch{position:relative;width:52px;height:30px;flex-shrink:0;border:0;border-radius:15px;cursor:pointer;background:var(--line-2);transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:12px;background:#fff;transition:left .2s}
.switch[aria-checked=true]{background:var(--green)}
.switch[aria-checked=true]::after{left:25px}
.scan{position:relative;height:150px;border-radius:20px;background:#fff;overflow:hidden}
.scan-plate{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:60px;background:#F4EFE6;border:8px solid #fff;box-shadow:0 0 0 1px var(--line)}
.scan-plate span{position:absolute;border-radius:50%}
.scan-a{left:14px;top:18px;width:46px;height:40px;background:#F5F0DC}
.scan-b{right:12px;top:22px;width:40px;height:44px;background:#3E7D3A}
.scan-c{left:30px;bottom:12px;width:46px;height:32px;background:#8C4A2F}
.scan-line{position:absolute;left:0;right:0;top:0;height:2px;background:var(--green);box-shadow:0 0 12px var(--green);animation:scan 2.6s ease-in-out infinite}
@keyframes scan{0%,100%{top:8%}50%{top:90%}}
.scan-tag{position:absolute;right:10px;bottom:10px;padding:4px 10px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:11px}
.bubbles{display:flex;flex-direction:column;gap:8px}
.bubble{max-width:85%;padding:10px 14px;border-radius:18px;font-size:13px;line-height:1.45}
.bubble-them{align-self:flex-start;background:var(--ground);border-bottom-left-radius:6px}
.bubble-me{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:6px}
.sms{padding:14px;border-radius:18px;background:var(--ground);font-size:13px;line-height:1.5}
.sms b{display:block;margin-bottom:4px;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--muted-2)}
.report{display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;background:var(--ground)}
.report-doc{flex-shrink:0;width:40px;height:50px;border-radius:6px;background:#fff;border:1px solid var(--line);position:relative}
.report-doc::after{content:"PDF";position:absolute;left:4px;bottom:5px;padding:1px 4px;border-radius:3px;background:var(--tomato);color:#fff;font-family:var(--mono);font-size:8px}

/* privacy band */
.band{display:flex;flex-wrap:wrap;gap:40px 72px;padding:56px;border-radius:40px;background:var(--mint)}
.band-copy{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#fff;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--green-d)}
.checks{flex:1 1 440px;min-width:0;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.checks li{display:flex;gap:14px;padding:18px 20px;border-radius:20px;background:#fff;font-size:15px;line-height:1.55}
.checks svg,.ticks svg{flex-shrink:0;margin-top:1px}
@media(max-width:600px){.band{padding:28px;border-radius:28px}}

/* faq */
.faq{display:flex;flex-wrap:wrap;gap:40px 80px}
.faq>.h2{flex:1 1 320px}
.faq-list{flex:2 1 560px;min-width:0;display:flex;flex-direction:column;gap:10px}
.qa{border-radius:22px;background:var(--soft);border:1px solid var(--soft);transition:background .2s}
.qa[open]{background:#fff;border-color:var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;font-size:17px;font-weight:600}
.qa summary::-webkit-details-marker{display:none}
.qa-ico{flex-shrink:0;width:34px;height:34px;border-radius:17px;background:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.qa[open] .qa-ico{background:var(--mango);transform:rotate(45deg)}
.qa p{margin:0;padding:0 24px 24px;max-width:640px;font-size:15px;line-height:1.7;color:var(--muted)}

/* call to action */
.cta{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;padding:72px 56px;border-radius:40px;background:var(--green);color:#fff;overflow:hidden}
.cta-sun{position:absolute;right:-60px;top:-80px;width:320px;height:320px;border-radius:50%;background:var(--mango)}
.cta-ring{position:absolute;right:180px;top:140px;width:120px;height:120px;border-radius:50%;border:2px dashed #8FD3B0}
.cta-copy{position:relative;display:flex;flex-direction:column;gap:18px;max-width:640px}
.cta-copy p{margin:0;font-size:17px;line-height:1.6;color:var(--mint)}
.cta-side{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.qr{display:flex;align-items:center;gap:20px;padding:18px 24px 18px 18px;border-radius:28px;background:#fff;color:var(--ink)}
.qr img{width:120px;height:120px}
.qr-copy{display:flex;flex-direction:column;gap:8px;max-width:190px}
.qr-copy b{font-family:var(--display);font-size:20px;font-weight:600;line-height:1.15}
.qr-copy span{font-size:13px;line-height:1.5;color:var(--muted)}
@media(max-width:600px){.cta{padding:40px 24px;border-radius:28px}.qr{display:none}}

/* footer */
.foot{border-top:1px solid var(--line)}
.foot-in{display:flex;flex-direction:column;gap:48px;padding-top:56px;padding-bottom:40px}
.foot-cols{display:flex;flex-wrap:wrap;gap:32px 64px}
.foot-about{flex:2 1 280px;display:flex;flex-direction:column;gap:12px}
.foot-about p{margin:0;max-width:300px;font-size:14px;line-height:1.6;color:var(--muted)}
.foot-col{flex:1 1 150px;display:flex;flex-direction:column;font-size:14px}
.foot-col .label{padding-bottom:10px}
.foot-col a{padding:6px 0;color:var(--ink-2);text-decoration:none}
.foot-col a:hover{color:var(--green)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--muted-2)}

/* pricing */
.seg-toggle{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:5px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.seg-toggle button{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;font-size:15px;font-weight:600;background:transparent;color:var(--ink-2);transition:background .2s}
.seg-toggle button[aria-checked=true]{background:var(--ink);color:#fff}
@media(max-width:600px){.seg-toggle{flex-wrap:nowrap;width:100%;border-radius:20px}.seg-toggle button{flex:1 1 0;flex-direction:column;justify-content:center;gap:3px;height:auto;min-height:56px;padding:8px 6px;border-radius:15px;font-size:14px}.seg-toggle .save{font-size:11px;padding:1px 7px}}
.save{padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;background:var(--mango);color:var(--ink)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:26px;padding:32px;border-radius:32px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.plan:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(16,32,26,.45)}
.plan-std{background:var(--mint);border-color:var(--mint-line)}
.plan-prem{background:var(--dark);color:#fff;border-color:var(--dark)}
.plan-prem .plan-sun{position:absolute;right:-50px;top:-50px;width:160px;height:160px;border-radius:80px;background:var(--mango)}
.plan>*{position:relative}
.plan h2{margin:0;font-family:var(--display);font-size:26px;font-weight:600}
.plan-tag{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.plan-prem .plan-tag,.plan-prem .plan-sub{color:var(--dark-muted)}
.plan-price{font-family:var(--display);font-size:52px;font-weight:600;letter-spacing:-2px;line-height:1}
.plan-price small{font-family:var(--body);font-size:15px;font-weight:400;letter-spacing:0;color:var(--muted)}
.plan-prem .plan-price small{color:var(--dark-muted)}
.plan-sub{display:block;margin-top:8px;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--ink-2)}
.ticks li{display:flex;gap:10px}
.ticks li.lead-in{font-weight:600;color:var(--ink)}
.plan-prem .ticks{color:#DCE6E0}.plan-prem .ticks li.lead-in{color:#fff}
.picker{display:flex;flex-wrap:wrap;gap:40px 72px;padding:48px;border-radius:40px;background:#fff;border:1px solid var(--line)}
.picker-q{flex:2 1 520px;min-width:0;display:flex;flex-direction:column;gap:24px}
.picker fieldset{margin:0;padding:0;border:0}
.picker legend{padding:0 0 10px;font-size:16px;font-weight:600}
.opt{height:46px;padding:0 20px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.opt[aria-checked=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:20px 22px;border-radius:22px;background:var(--mint);transition:background .3s}
.pick-free{background:var(--rule)}.pick-prem{background:var(--mango-soft)}
.pick strong{font-family:var(--display);font-size:26px;font-weight:600}
.pick span{font-size:14px;color:var(--ink-2)}
@media(max-width:600px){.picker{padding:28px;border-radius:28px}}
.table-wrap{overflow-x:auto;border-radius:28px;background:#fff;border:1px solid var(--line)}
table.compare{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.compare th,.compare td{text-align:left;padding:16px 12px}
.compare thead th{padding-top:20px;padding-bottom:20px;font-weight:600}
.compare thead th:first-child{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);width:46%}
.compare th:first-child,.compare td:first-child{padding-left:24px}
.compare tbody tr{border-top:1px solid var(--rule)}
.compare tbody tr:nth-child(even){background:var(--soft-2)}
.compare tbody th{font-weight:500}
.compare td{color:var(--ink-2)}
.compare td.no{color:var(--faint)}
.notice{padding:16px 20px;border-radius:18px;background:var(--mango-soft);font-size:14px;color:var(--ink-2)}

/* nutritionists */
.tpl-tabs{display:flex;flex-wrap:wrap;gap:8px}
.tpl{height:42px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;background:var(--dark-card);color:#fff;border:1px solid #2C4A3D}
.tpl[aria-selected=true]{background:var(--mango);color:var(--ink);border-color:var(--mango)}
.writer{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.patient{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px;padding:28px;border-radius:28px;background:var(--dark-card)}
.patient p{margin:0;font-size:14px;line-height:1.6;color:var(--dark-muted)}
.patient-chips{display:flex;flex-wrap:wrap;gap:6px}
.patient-chips span{padding:5px 10px;border-radius:999px;background:#2C4A3D;font-size:12px}
.plan-ed{flex:2 1 480px;min-width:0;display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:28px;background:#fff;color:var(--ink)}
.pm{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 0;border-top:1px solid var(--rule)}
.pm:first-of-type{border-top:0}
.pm-when{width:84px;font-family:var(--mono);font-size:12px;color:var(--muted-2)}
.pm-food{flex:1 1 180px;min-width:0;font-size:15px;font-weight:500}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:32px;height:32px;border-radius:16px;border:1px solid var(--line-2);background:#fff;cursor:pointer;font-size:16px;line-height:1}
.stepper output{min-width:44px;text-align:center;font-family:var(--mono);font-size:13px}
.pm-kcal{width:70px;text-align:right;font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.ed-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding-top:14px;border-top:1px solid var(--line)}
.ed-foot strong{font-family:var(--display);font-size:24px;font-weight:600}
.sent{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--green)}
.kyc{display:flex;flex-wrap:wrap;gap:40px 72px}
.kyc-copy{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:18px}
.kyc-list{flex:2 1 520px;min-width:0;display:flex;flex-direction:column;gap:10px}
.kyc-item{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:20px;background:#fff;border:1px solid var(--line);cursor:pointer;text-align:left;width:100%}
.kyc-item[aria-pressed=true]{border-color:var(--mint-line);background:#F6FCF8}
.kyc-box{flex-shrink:0;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:transparent}
.kyc-item[aria-pressed=true] .kyc-box{background:var(--green);border-color:var(--green);color:#fff}
.kyc-item b{display:block;font-size:16px;font-weight:600}
.kyc-item i{display:block;font-style:normal;font-size:14px;line-height:1.55;color:var(--muted)}
.progress{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.progress .bar{height:10px;border-radius:5px}
.pay-band{display:flex;flex-wrap:wrap;gap:32px 64px;padding:56px;border-radius:40px;background:var(--mango)}
.pay-band .body{color:var(--ink-2);max-width:460px;font-size:16px}
.pay-points{flex:1 1 440px;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.pay-points li{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:22px;background:#fff}
.pay-points b{font-family:var(--display);font-size:20px;font-weight:600}
.pay-points span{font-size:14px;line-height:1.55;color:var(--muted)}
@media(max-width:600px){.pay-band{padding:28px;border-radius:28px}}
.mail-card{display:flex;flex-direction:column;gap:26px;padding:36px;border-radius:32px;background:#fff;border:1px solid var(--line)}
.mail-addr{font-family:var(--display);font-size:clamp(26px,3vw,36px);font-weight:600;letter-spacing:-.8px;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.mail-addr:hover{color:var(--green)}
.warn{display:flex;gap:12px;padding:14px 16px;border-radius:16px;background:var(--mango-soft);font-size:14px;line-height:1.55;color:var(--ink-2)}
.ask{display:flex;flex-wrap:wrap;gap:48px 80px}
.ask-copy{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:22px}
.ask-card{flex:1 1 520px;min-width:0}
.soft-note{margin:0;max-width:400px;padding:14px 16px;border-radius:16px;background:var(--soft);font-size:14px;line-height:1.6;color:var(--ink-2)}

/* legal */
.legal-hero{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;padding-top:56px;padding-bottom:40px}
.legal-hero dl{margin:0;display:flex;gap:40px;font-family:var(--mono);font-size:12px;letter-spacing:.5px}
.legal-hero dt{color:var(--muted-2);text-transform:uppercase}
.legal-hero dd{margin:6px 0 0}
.short{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px 32px;margin:0 0 40px;padding:28px 32px;border-radius:28px;background:#fff;border:1px solid var(--line);list-style:none}
.short li{display:flex;flex-direction:column;gap:8px}
.short b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--green)}
.short span{font-size:15px;line-height:1.55;color:var(--ink-2)}
.legal{display:flex;flex-wrap:wrap;gap:32px 48px;align-items:flex-start;padding-bottom:112px}
.toc{flex:1 1 240px;min-width:0;position:sticky;top:96px;display:flex;flex-direction:column;padding:24px;border-radius:28px;background:var(--soft);font-size:14px}
.toc .label{padding-bottom:12px}
.toc a{padding:7px 0;color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--green)}
@media(max-width:860px){.toc{position:static}}
.doc{flex:999 1 560px;min-width:0;max-width:820px;padding:8px 48px 24px;border-radius:36px;background:#fff;border:1px solid var(--line)}
@media(max-width:600px){.doc{padding:4px 22px 16px;border-radius:24px}}
.doc .intro{margin:0;padding:40px 0 8px;font-size:19px;line-height:1.6;color:var(--ink)}
.doc section{padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:96px}
.doc section:first-of-type{border-top:0}
.doc h2{margin:0 0 20px;font-family:var(--display);font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-.8px}
.doc h2 span{display:flex;align-items:center;justify-content:center;width:40px;height:28px;margin:0 0 14px;border-radius:999px;background:var(--mint);font-family:var(--mono);font-size:12px;font-weight:500;color:var(--green-d)}
.doc h3{margin:24px 0 8px;font-size:17px;font-weight:600}
.doc p,.doc li{font-size:16px;line-height:1.7;color:var(--ink-2)}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:20px}
.doc li{margin-bottom:6px}
.doc strong{font-weight:600;color:var(--ink)}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:14px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-top:1px solid var(--rule);line-height:1.55;color:var(--ink-2)}
.doc th{font-weight:600;color:var(--ink)}
.doc .table-scroll{overflow-x:auto}

/* scroll-in motion */
@keyframes rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.card:hover,.plan:hover,.btn:hover{transform:none}}

/* helpers */
.w-62{width:62%}.w-100{width:100%}
.grid-gap{margin-top:48px}
.section-top{padding-top:56px;padding-bottom:72px;display:flex;flex-direction:column;gap:40px}
.price-head{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.price-head .lead{max-width:560px}
.price-head .display{max-width:900px}
.mb-32{margin-bottom:32px}.mt-24{margin-top:24px}
.grow-1{flex:1 1 320px;min-width:0}
.chip-static{cursor:default}
.lead-dark{color:var(--dark-muted);margin-top:18px}
.small-muted{font-size:13px;color:var(--dark-muted)}
.white{color:#fff}
.space-between{justify-content:space-between}
.ticks-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 24px;font-size:15px}
.day-foot b{font-size:15px}
.center-col{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;min-height:60vh;justify-content:center}
.row-center{justify-content:center}
.plan-prem .btn-line{background:transparent;color:#fff;border-color:#3A5A4C}
.plan .btn-block{margin-top:auto}
.doc .intro+section{border-top:0}

/* ---------- playful motion: only when motion.js has added .motion to <html> (never with reduced motion) ---------- */
/* arriving on scroll: groups slide in one after another */
.motion .stagger>*{opacity:0;translate:0 28px;scale:.97;transition:opacity .6s ease,translate .7s cubic-bezier(.2,.9,.25,1.25),scale .7s cubic-bezier(.2,.9,.25,1.25),transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s}
.motion .stagger.in>*{opacity:1;translate:0 0;scale:1}
.motion .stagger:not(.done)>*:nth-child(2){transition-delay:.08s}
.motion .stagger:not(.done)>*:nth-child(3){transition-delay:.16s}
.motion .stagger:not(.done)>*:nth-child(4){transition-delay:.24s}
.motion .stagger:not(.done)>*:nth-child(5){transition-delay:.32s}
.motion .stagger:not(.done)>*:nth-child(6){transition-delay:.40s}
.motion .stagger:not(.done)>*:nth-child(7){transition-delay:.48s}
.motion .stagger:not(.done)>*:nth-child(n+8){transition-delay:.56s}
/* highlighted words are painted in like a marker, and jiggle on hover */
.motion .hl{background:linear-gradient(var(--hl-c,var(--mango)),var(--hl-c,var(--mango))) no-repeat 0 0/0% 100%;transition:background-size .9s cubic-bezier(.65,0,.35,1) .2s}
.motion .hl-mint{--hl-c:var(--mint)}
.motion .hl.in{background-size:100% 100%}
.motion .hl:hover{animation:jelly .6s}
@keyframes jelly{0%,100%{transform:rotate(-2deg) scale(1)}30%{transform:rotate(-5deg) scale(1.1,.92)}60%{transform:rotate(1deg) scale(.95,1.06)}80%{transform:rotate(-3deg) scale(1.02)}}
/* scroll progress along the bottom of the header */
.scroll-bar{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--green),#8FD3B0,var(--mango));transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
.head{transition:box-shadow .3s}
.head.head-scrolled{box-shadow:0 12px 30px -24px rgba(16,32,26,.5)}
/* parallax layers */
.motion .blob,.motion .hero-art .phone,.motion .float,.motion .cta-sun,.motion .cta-ring,.motion .plan-sun{translate:0 var(--py,0px)}
.motion .cta-ring{rotate:var(--spin,0deg)}
.motion .hero-art .phone{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.motion .float{transition:scale .35s cubic-bezier(.3,1.6,.5,1),rotate .35s cubic-bezier(.3,1.6,.5,1)}
.motion .float:hover{scale:1.07;rotate:-2deg}
.motion .float:hover .ico,.motion .card:hover .ico{animation:wiggle .55s}
@keyframes wiggle{0%,100%{transform:none}25%{transform:rotate(-14deg) scale(1.12)}50%{transform:rotate(10deg) scale(1.12)}75%{transform:rotate(-5deg)}}
/* the ticker leans with scroll speed */
.motion .tick-item{transform:skewX(var(--lean,0deg))}
.motion .tick-item:hover .tag{animation:wiggle .55s}
/* cards tilt towards the pointer, with a soft light where it is */
.motion .tilt{--glare:rgba(255,255,255,.55);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity .6s ease,translate .7s cubic-bezier(.2,.9,.25,1.25),scale .7s cubic-bezier(.2,.9,.25,1.25),transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background-color .3s}
.motion .step.tilt,.motion .plan-prem.tilt{--glare:rgba(255,255,255,.09)}
.motion .tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);box-shadow:0 30px 50px -30px rgba(16,32,26,.5);background-image:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--glare),transparent 65%)}
/* magnetic buttons, springy presses */
.motion .magnet{translate:var(--gx,0px) var(--gy,0px);transition:translate .3s cubic-bezier(.2,.8,.2,1),transform .2s ease,filter .2s ease,background .2s,scale .15s}
.motion .btn:active,.motion .tab:active,.motion .opt:active,.motion .seg-toggle button:active,.motion .kyc-item:active{scale:.94}
.motion .btn:hover svg{animation:nudge .5s}
@keyframes nudge{0%,100%{transform:none}40%{transform:translateX(3px) rotate(-8deg)}70%{transform:translateX(-1px)}}
.motion .brand:hover svg,.motion .brand:hover img{animation:hop .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes hop{0%,100%{transform:none}35%{transform:translateY(-6px) rotate(-14deg)}65%{transform:translateY(0) rotate(9deg)}}
/* a spotlight follows the pointer over the dark and green panels */
.motion .spot{background-image:radial-gradient(520px circle at var(--sx,-1000px) var(--sy,-1000px),rgba(143,211,176,.16),transparent 65%)}
.motion .cta.spot{background-image:radial-gradient(460px circle at var(--sx,-1000px) var(--sy,-1000px),rgba(255,255,255,.16),transparent 65%)}
/* a pill glides between the header links */
.motion .nav{position:relative}
.motion .nav a{position:relative;z-index:1}
.motion .nav a:hover{background:transparent}
.nav-pill{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:var(--w,0px);translate:var(--x,0px) 0;border-radius:999px;background:var(--rule);opacity:0;transition:translate .4s cubic-bezier(.3,1.35,.5,1),width .4s cubic-bezier(.3,1.35,.5,1),opacity .2s}
.nav-pill.on{opacity:1}
/* links in the footer and contents draw their underline */
.motion .foot-col a,.motion .toc a{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0% 1.5px;transition:background-size .3s ease,color .2s}
.motion .foot-col a:hover,.motion .toc a:hover{background-size:100% 1.5px}
.motion .glass{transition:background .2s,translate .3s cubic-bezier(.3,1.6,.5,1)}
.motion .glass:hover{translate:0 -5px}
/* numbers that change bounce */
.motion .plan-price,.motion [data-total]{display:inline-block}
.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:none}40%{transform:scale(1.08)}100%{transform:none}}
/* a burst of colour where a button is tapped */
.burst{position:fixed;left:var(--bx);top:var(--by);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--c);pointer-events:none;z-index:100;animation:burst .65s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes burst{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* ---------- food stickers ---------- */
.sticker{position:absolute;z-index:0;width:64px;height:64px;pointer-events:none;filter:drop-shadow(0 12px 12px rgba(16,32,26,.16));transform:translate(var(--kx,0px),var(--ky,0px)) rotate(calc(var(--r0,0deg) + var(--rot,0deg)));transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.sticker svg{display:block;width:100%;height:100%;animation:bob 5s ease-in-out infinite}
.st-avocado svg,.st-egg svg{animation-delay:-1.6s}.st-banana svg,.st-chili svg{animation-delay:-3.2s}
@keyframes bob{50%{transform:translateY(-7px) rotate(5deg)}}
.motion .sticker{translate:0 var(--py,0px)}
.hero-art .st-leaf{left:12%;top:-6px;--r0:-8deg}
.hero-art .st-tomato{right:6%;top:6px;--r0:12deg}
.hero-art .st-avocado{left:2%;top:42%;width:74px;height:74px;--r0:-16deg}
.hero-art .st-banana{right:-2%;bottom:20%;width:80px;height:80px;--r0:-10deg}
.hero-art .st-egg{left:6%;bottom:27%;--r0:10deg}
.hero-art .st-chili{right:20%;bottom:-6px;--r0:24deg}
@media(max-width:600px){.hero-art .sticker{width:48px;height:48px}.hero-art .st-avocado,.hero-art .st-banana{width:56px;height:56px}.hero-art .st-avocado{left:-6px}.hero-art .st-banana{right:-6px}}
.price-head{position:relative}
.price-head>*:not(.sticker){position:relative;z-index:1}
.price-head .st-tomato{left:3%;top:8px;--r0:-10deg;width:72px;height:72px}
.price-head .st-avocado{right:4%;top:28px;--r0:14deg;width:76px;height:76px}
.price-head .st-banana{left:9%;bottom:6px;--r0:8deg;width:80px;height:80px}
.price-head .st-leaf{right:11%;bottom:-6px;--r0:-12deg}
@media(max-width:1100px){.price-head .sticker{display:none}}

/* ---------- food band: sliding rows of everyday foods ---------- */
.foodband{overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:8px 0 96px;user-select:none;-webkit-user-select:none}
.fb-row{display:flex;align-items:center;gap:22px;width:max-content;white-space:nowrap;translate:var(--fx,0px) 0}
.fb-row-2{margin-left:-45%}
.fb-w,.fb-o,.fb-p{font-family:var(--display);font-size:clamp(40px,7vw,96px);font-weight:600;letter-spacing:-.03em;line-height:1.15;cursor:default;transition:color .2s,background .2s,rotate .35s cubic-bezier(.3,1.6,.5,1),scale .35s cubic-bezier(.3,1.6,.5,1)}
.fb-w{color:var(--ink)}
.fb-o{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.fb-p{padding:0 .32em .06em;border-radius:999px;background:var(--mango);color:var(--ink)}
.fb-w:hover{color:var(--green);rotate:-4deg;scale:1.06}
.fb-o:hover{color:var(--mint);-webkit-text-stroke-color:var(--green);rotate:4deg;scale:1.06}
.fb-p:hover{background:var(--mint);rotate:3deg;scale:1.06}
.fb-dot{flex-shrink:0;width:14px;height:14px;border-radius:50%;background:var(--green)}
.fb-row-2 .fb-dot{background:var(--mango)}
@media(max-width:700px){.foodband{padding-bottom:64px}}

/* decorations may poke past the edges; never let them widen the page */
main{overflow-x:clip}