/* Oztally landing site. Tokens mirror trolley/lib/main.dart's baseColorScheme
   (ink on paper, 12 px corners, Inter) and storeBrandColors. No JS, nothing
   fetched from a CDN. */
:root{
  color-scheme:light;
  --ink:#211F1C; --paper:#F5F4F1; --bone:#FFFFFF; --chip:#EDEBE6; --rule:#E5E2DC; --muted:#7A756C;
  --sale:#1E7B34; --sale-bg:#E3F0E5;
  --aldi-1:#00247D; --aldi-2:#F5A623; --woolworths:#046A38; --coles:#E4002B; --priceline:#EC008C; --cw:#00539F;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:12px; --r-lg:20px;
  --shadow:0 1px 2px rgba(33,31,28,.06),0 16px 40px -16px rgba(33,31,28,.22);
  --bezel:#0E0D0C;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#F5F4F1; --paper:#1C1B19; --bone:#262523; --chip:#302E2B; --rule:#3A3733; --muted:#A8A39A;
    --sale:#7CC48E; --sale-bg:#1F3A26; --bezel:#000000;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#F5F4F1; --paper:#1C1B19; --bone:#262523; --chip:#302E2B; --rule:#3A3733; --muted:#A8A39A;
  --sale:#7CC48E; --sale-bg:#1F3A26; --bezel:#000000;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -16px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--font);font-size:17px;line-height:1.55;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:16px;top:-48px;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{top:12px}

.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.num{font-variant-numeric:tabular-nums}

/* masthead */
.masthead{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;gap:24px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand svg{width:30px;height:30px;flex:none}
.nav{display:flex;gap:22px;margin-left:auto;font-size:15px;font-weight:500}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}
@media (max-width:720px){.nav{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r);background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;font-size:15px;border:1px solid var(--ink)}
.btn:hover{opacity:.92}
.btn.ghost{background:transparent;color:var(--ink)}
.masthead .btn{margin-left:auto}
@media (min-width:721px){.masthead .btn{margin-left:0}}

/* sections */
section{padding-block:clamp(56px,9vw,112px)}
section.tint{background:var(--bone);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.kicker{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(40px,6.4vw,76px);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(30px,4vw,46px);font-weight:800}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:58ch;margin:20px 0 0}
p{margin:0}
.copy p+p{margin-top:12px}

/* hero */
.hero{padding-block:clamp(40px,7vw,96px) 0;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);background:var(--chip);padding:6px 12px;border-radius:999px;margin-bottom:24px}
.eyebrow b{color:var(--ink);font-weight:700}
.stores-line{margin-top:28px;font-size:15px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.stores-line span{display:inline-flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:3px;flex:none}
.dot.aldi{background:linear-gradient(90deg,var(--aldi-1) 50%,var(--aldi-2) 50%)}
.dot.coles{background:var(--coles)}.dot.woolworths{background:var(--woolworths)}.dot.cw{background:var(--cw)}.dot.priceline{background:var(--priceline)}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.badge{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 18px 8px 14px;border-radius:14px;background:var(--ink);color:var(--paper);text-decoration:none;border:1px solid var(--ink)}
.badge svg{width:24px;height:24px;flex:none;fill:currentColor}
.badge .lines{line-height:1.1;text-align:left}
.badge small{display:block;font-size:11px;font-weight:500;opacity:.8}
.badge strong{font-size:17px;font-weight:700;letter-spacing:-.01em}
.badge.alt{background:transparent;color:var(--ink)}
.fine{margin-top:16px;font-size:14px;color:var(--muted)}

.hero .art{position:relative;justify-self:center;width:min(320px,100%)}
.phone{position:relative;aspect-ratio:1179/2556;border-radius:46px;background:var(--bezel);padding:10px;box-shadow:var(--shadow)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:38px}
.docket{position:absolute;left:-96px;bottom:56px;width:250px;background:var(--bone);color:var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px;border:1px solid var(--rule)}
.docket .t{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--rule)}
.docket .row{display:grid;grid-template-columns:4px 1fr auto;gap:10px;align-items:center;padding:8px 0;font-size:14px}
.docket .row+.row{border-top:1px solid var(--rule)}
.docket .row i{display:block;width:4px;height:100%;min-height:26px;border-radius:2px}
.docket .row .n{font-weight:600}
.docket .row .s{display:block;font-size:12px;color:var(--muted);font-weight:500}
.docket .row .p{font-weight:700;font-size:15px}
.docket .row .p small{display:block;font-size:11px;color:var(--muted);font-weight:500;text-align:right}
.pill{display:inline-block;background:var(--sale-bg);color:var(--sale);font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:middle}
@media (max-width:900px){
  .hero .grid{grid-template-columns:1fr}
  .hero .art{width:min(280px,100%);margin-top:8px}
  .docket{left:auto;right:-16px;bottom:24px;width:224px}
}
@media (max-width:420px){.docket{display:none}}

/* stores strip */
.stores{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:36px}
.store{background:var(--bone);border:1px solid var(--rule);border-radius:var(--r);padding:0 16px 16px;overflow:hidden}
.store .stripe{height:6px;margin:0 -16px 14px;background:var(--ink)}
.store.aldi .stripe{background:linear-gradient(90deg,var(--aldi-1) 50%,var(--aldi-2) 50%)}
.store.coles .stripe{background:var(--coles)}.store.woolworths .stripe{background:var(--woolworths)}
.store.cw .stripe{background:var(--cw)}.store.priceline .stripe{background:var(--priceline)}
.store b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.store span{display:block;font-size:13px;color:var(--muted);margin-top:4px;line-height:1.4}
@media (max-width:900px){.stores{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.stores{grid-template-columns:repeat(2,1fr)}}

/* feature rows */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.feature+.feature{margin-top:clamp(56px,9vw,120px)}
.feature .art{justify-self:center;width:min(280px,100%)}
.feature:nth-child(even) .art{order:-1}
.feature .copy p{color:var(--muted);font-size:18px;max-width:46ch;margin-top:18px}
.feature .copy p+p{margin-top:12px}
@media (max-width:820px){
  .feature{grid-template-columns:1fr}
  .feature:nth-child(even) .art{order:0}
  .feature .art{width:min(240px,100%)}
}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.tile{background:var(--bone);border:1px solid var(--rule);border-radius:var(--r);padding:20px}
.tile svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.tile b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.tile p{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.5}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.tiles{grid-template-columns:1fr}}

/* pro receipt */
.receipt{max-width:720px;margin:36px auto 0;background:var(--bone);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(20px,4vw,36px);box-shadow:var(--shadow)}
.receipt table{width:100%;border-collapse:collapse;font-size:15px}
.receipt th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 0 12px;border-bottom:1px dashed var(--rule)}
.receipt th:not(:first-child),.receipt td:not(:first-child){text-align:right;white-space:nowrap;padding-left:16px}
.receipt td{padding:12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.receipt tr:last-child td{border-bottom:1px dashed var(--rule)}
.receipt td:first-child{font-weight:600}
.receipt td small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:2px}
.receipt .yes{color:var(--sale);font-weight:700}
.receipt .pro{font-weight:700}
.receipt .foot{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.5}
@media (max-width:480px){.receipt table{font-size:14px}.receipt td:not(:first-child){white-space:normal}}

/* faq */
.faq{max-width:760px;margin:32px auto 0;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:600;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:500;font-size:22px;color:var(--muted);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted);padding:0 0 20px;max-width:64ch}

/* cta */
.cta{background:var(--ink);color:var(--paper);border-radius:var(--r-lg);padding:clamp(40px,7vw,80px) clamp(20px,5vw,64px);text-align:center}
.cta h2{color:inherit}
.cta p{color:inherit;opacity:.8;max-width:48ch;margin:16px auto 0;font-size:18px}
.cta .badges{justify-content:center}
.cta .badge{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta .badge.alt{background:transparent;color:var(--paper);border-color:color-mix(in srgb,var(--paper) 40%,transparent)}

/* footer */
footer{padding:48px 0 40px;font-size:14px;color:var(--muted)}
footer .row{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer a{color:inherit}
footer .legal{margin-top:20px;max-width:80ch;line-height:1.6}

/* long-form legal pages */
.doc{max-width:720px;margin-inline:auto;padding-block:clamp(40px,6vw,72px)}
.doc h1{font-size:clamp(34px,5vw,52px)}
.doc .meta{color:var(--muted);margin-top:12px;font-size:15px}
.doc .jump{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:6px;background:var(--bone);border:1px solid var(--rule);border-radius:var(--r);padding:12px 16px}
.doc .jump a{text-decoration:none;font-weight:600;font-size:15px;display:flex;gap:12px;align-items:baseline}
.doc .jump a span{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}
.doc h2{font-size:26px;margin-top:48px;padding-top:24px;border-top:1px solid var(--rule)}
.doc h3{font-size:18px;margin-top:28px}
.doc p{margin-top:10px;color:var(--ink);max-width:68ch}
.doc p.note{background:var(--chip);border-radius:var(--r);padding:14px 16px;font-size:15px}
.doc .callout{border:1px dashed var(--rule);border-radius:var(--r);padding:14px 16px;margin-top:16px;font-size:15px;color:var(--muted)}
.doc .agree{background:var(--chip);border-radius:var(--r);padding:16px;font-weight:500;margin-top:32px}