/* PantryPalz website. Shared styles for index, terms, privacy and help. */

/* Geist and Geist Mono, served from this site (SIL OFL 1.1, see fonts/OFL.txt)
   so no page makes a request to a font CDN. */
@font-face{font-family:Geist;src:url("/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  color-scheme:light;
  /* Surfaces, straight from PANTRYPALZ_PRD section 8.6 light mode */
  --paper:#FDFBF7;
  --surface:#FFFFFF;
  --ink:#1A1714;
  --ink-soft:#6B6259;
  --line:#E8E0D4;
  --line-2:#D8CDBB;

  /* The two semantic colours, and they are spent */
  --spill:#B8862F;          /* amber, bars and large type only */
  --spill-ink:#8A6414;      /* amber for small text, 5.4:1 on paper */
  --spill-wash:color-mix(in oklab, var(--spill) 12%, var(--paper));
  --keep:#3F7A56;
  --keep-wash:color-mix(in oklab, var(--keep) 10%, var(--paper));
  --accent:#B44A22;         /* burnt orange, darkened for AA on paper */
  --chill:#3F6079;
  --danger:#B3261E;         /* expired, from PANTRYPALZ_PRD section 17 */
  --danger-wash:color-mix(in oklab, var(--danger) 8%, var(--paper));
  --accent-wash:color-mix(in oklab, var(--accent) 9%, var(--paper));

  /* The reversed section */
  --dark:#17130F;
  --dark-2:#211B16;
  --dark-ink:#F5F1EA;
  --dark-soft:#A39889;
  --dark-line:rgba(245,241,234,.13);
  --spill-lit:#D9A845;
  --keep-lit:#5FA57A;
  --accent-lit:#E8763F;
  --danger-lit:#F2766B;

  --eo:cubic-bezier(.23,1,.32,1);
  --eo-lg:cubic-bezier(.77,0,.175,1);
  --r:14px;
  --pad:clamp(72px,10vw,132px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--ink);
  font-family:Geist,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;position:relative;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--spill);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.mono{font-family:"Geist Mono",ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

h1,h2,h3,h4{font-weight:650;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(2.2rem,6.6vw,4.9rem);letter-spacing:-.048em;line-height:.99}
h2{font-size:clamp(1.85rem,4.1vw,2.95rem);letter-spacing:-.04em}
h3{font-size:1.16rem;letter-spacing:-.022em;line-height:1.28}
h4{font-size:.98rem;letter-spacing:-.015em;line-height:1.3}
p{max-width:66ch}
.lede{font-size:clamp(1.04rem,1.6vw,1.17rem);color:var(--ink-soft);line-height:1.52}
.label{font-family:"Geist Mono",monospace;font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft)}

/* ---------- nav, one row, under 80px ---------- */
nav{position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--paper) 82%,transparent);
  backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line)}
.navin{max-width:1160px;margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-weight:700;letter-spacing:-.055em;font-size:1.2rem;text-decoration:none;flex:none;
  display:inline-flex;align-items:center;min-height:44px}
.brand b{color:var(--spill-ink);font-weight:700}
.navmid{display:flex;align-items:center;gap:9px;min-width:0;
  border:1px solid var(--line-2);border-radius:999px;padding:6px 14px;background:var(--surface)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--spill);flex:none;
  animation:pulse 2.6s var(--eo) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.78)}}
.navmid span{font-family:"Geist Mono",monospace;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;transition:opacity 240ms var(--eo)}
@media (max-width:860px){.navmid{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  border-radius:12px;padding:15px 22px;min-height:52px;
  font:inherit;font-weight:600;font-size:1rem;letter-spacing:-.018em;
  text-decoration:none;cursor:pointer;
  transition:transform 170ms var(--eo),background-color 170ms var(--eo),box-shadow 200ms var(--eo);
  box-shadow:0 1px 2px rgba(26,23,20,.14)}
.btn .ico{flex:none}
.btn:active{transform:scale(.97)}
.btn-sm{padding:10px 16px;min-height:42px;font-size:.9rem;border-radius:10px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn-lit{background:var(--spill-lit);color:#241802;border-color:var(--spill-lit)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(26,23,20,.18)}
  .btn-ghost:hover{background:var(--surface);box-shadow:0 6px 18px rgba(26,23,20,.08)}
  .btn-lit:hover{box-shadow:0 8px 24px color-mix(in oklab,var(--spill) 42%,transparent)}
}
.sub-cta{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;color:var(--ink-soft);
  text-decoration:none;min-height:44px;padding:11px 0 9px;
  box-shadow:inset 0 -1px 0 var(--line-2);
  transition:color 160ms var(--eo),border-color 160ms var(--eo)}
@media (hover:hover) and (pointer:fine){.sub-cta:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}}

/* ---------- hero, 58/42 asymmetric ---------- */
header{padding:clamp(44px,6vw,76px) 0 clamp(38px,5vw,60px);position:relative;overflow:hidden}
.hero{display:grid;grid-template-columns:1.32fr 1fr;gap:clamp(32px,5vw,72px);
  align-items:center;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-2);
  background:var(--spill-wash);border-radius:999px;padding:6px 14px;margin-bottom:22px;
  font-family:"Geist Mono",monospace;font-size:.67rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--spill-ink)}
h1 em{font-style:normal;color:var(--spill-ink)}
h1 .strike{text-decoration:line-through;text-decoration-thickness:.055em;
  text-decoration-color:color-mix(in oklab,var(--ink) 38%,transparent);color:var(--ink-soft)}
.hero .lede{margin-top:20px;max-width:34rem}
.cta-row{margin-top:30px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.fineprint{margin-top:16px;font-size:.86rem;color:var(--ink-soft)}
.fineprint b{color:var(--ink);font-weight:600}


/* ---------- receipts strip under the hero ---------- */
.receipts{margin-top:clamp(36px,5vw,56px);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:0}
.receipt{padding:22px 26px 22px 0;border-right:1px solid var(--line)}
.receipt:last-child{border-right:0;padding-right:0}
.receipt:not(:first-child){padding-left:26px}
.receipt .fig{font-size:1.5rem;font-weight:650;letter-spacing:-.04em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.receipt p{font-size:.88rem;color:var(--ink-soft);margin-top:6px;line-height:1.45}
.receipt a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--line-2);transition:text-decoration-color 160ms var(--eo)}
@media (hover:hover) and (pointer:fine){.receipt a:hover{text-decoration-color:var(--spill)}}

/* ---------- the phone ---------- */
.phone{position:relative;width:min(100%,330px);margin:0 auto;
  border-radius:44px;padding:9px;background:#2A241E;
  box-shadow:0 2px 4px rgba(26,23,20,.2),0 26px 60px -18px rgba(26,23,20,.38),
             inset 0 0 0 1px rgba(255,255,255,.09)}
.screen{border-radius:36px;overflow:hidden;background:var(--paper);position:relative;
  height:640px;display:flex;flex-direction:column}
.statusbar{display:flex;align-items:center;justify-content:space-between;
  padding:13px 22px 4px;font-size:.72rem;font-weight:600;letter-spacing:-.01em;position:relative}
.island{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:88px;height:26px;border-radius:999px;background:#100D0A}
.sb-r{display:flex;gap:5px;align-items:center;opacity:.9}
.sb-r i{display:block;width:15px;height:9px;border:1.2px solid var(--ink);border-radius:2.5px;
  position:relative}
.sb-r i::after{content:"";position:absolute;inset:1.4px;background:var(--ink);border-radius:1px;width:8px}
.scr-head{padding:14px 20px 10px}
.scr-head .t{font-size:1.34rem;font-weight:650;letter-spacing:-.035em}
.scr-head .s{font-size:.76rem;color:var(--ink-soft);margin-top:3px}
.split{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:0}
.col{padding:14px 14px 10px;overflow:hidden}
.col.keepcol{border-right:1px solid var(--line)}
.col.spillcol{background:var(--spill-wash)}
.colhead{font-family:"Geist Mono",monospace;font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:12px}
.keepcol .colhead{color:var(--keep)}
.spillcol .colhead{color:var(--spill-ink)}
.row>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-size:.78rem;padding:6px 0;border-bottom:1px solid color-mix(in oklab,var(--line) 70%,transparent)}
.row .q{font-family:"Geist Mono",monospace;font-size:.68rem;color:var(--ink-soft);flex:none}
.srow{padding:9px 0;border-bottom:1px solid color-mix(in oklab,var(--spill) 22%,transparent)}
.srow .n{font-size:.82rem;font-weight:500;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.srow .n>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .n em{font-style:normal;font-family:"Geist Mono",monospace;font-size:.65rem;
  letter-spacing:-.02em;color:var(--spill-ink);flex:none}
.bar{height:4px;border-radius:99px;background:color-mix(in oklab,var(--spill) 22%,transparent);
  margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--spill);border-radius:99px;
  transform-origin:left;transform:scaleX(var(--f,.5));
  transition:transform 420ms var(--eo-lg)}
.scr-foot{border-top:1px solid var(--line);padding:12px 18px 20px;background:var(--surface)}
.money{font-size:.95rem;font-weight:600;letter-spacing:-.02em}
.money em{font-style:normal;color:var(--spill-ink)}
.scr-foot .fbtn{margin-top:10px;background:var(--accent);color:#fff;border-radius:11px;
  padding:12px;text-align:center;font-size:.9rem;font-weight:600;letter-spacing:-.015em}
.homebar{height:5px;width:120px;border-radius:99px;background:var(--ink);opacity:.22;
  margin:11px auto 0}

/* ---------- generic section ---------- */
section{padding:var(--pad) 0}
.sec-head{max-width:46rem;margin-bottom:clamp(32px,4vw,52px)}
.sec-head p{margin-top:16px}
.rule-line{height:1px;background:var(--line);margin:0 auto;max-width:1160px}

/* ---------- the counter, reversed full bleed ---------- */
.counter{background:var(--dark);color:var(--dark-ink);position:relative;overflow:hidden}
.counter h2{color:var(--dark-ink)}
.counter .label{color:var(--dark-soft)}
.counter .lede{color:var(--dark-soft)}
.ctr-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(34px,5vw,70px);align-items:center;position:relative}
.ledger{border:1px solid var(--dark-line);border-radius:var(--r);background:var(--dark-2);overflow:hidden}
.ledger-h{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--dark-line)}
.ledger-h div{padding:15px 20px;font-family:"Geist Mono",monospace;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase}
.ledger-h div:first-child{color:var(--keep-lit);border-right:1px solid var(--dark-line)}
.ledger-h div:last-child{color:var(--spill-lit)}
.ledger-b{display:grid;grid-template-columns:1fr 1fr}
.ledger-b>div{padding:18px 20px 20px}
.ledger-b>div:first-child{border-right:1px solid var(--dark-line)}
.lrow{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:.94rem;padding:9px 0;border-bottom:1px solid var(--dark-line)}
.lrow:last-child{border-bottom:0}
.lrow .q{font-family:"Geist Mono",monospace;font-size:.78rem;color:var(--dark-soft);flex:none}
.lspill{padding:11px 0;border-bottom:1px solid var(--dark-line)}
.lspill:last-child{border-bottom:0}
.lspill .n{display:flex;justify-content:space-between;gap:10px;font-size:.94rem}
.lspill .n em{font-style:normal;font-family:"Geist Mono",monospace;font-size:.78rem;color:var(--spill-lit)}
.lspill .bar{background:color-mix(in oklab,var(--spill-lit) 24%,transparent);margin-top:8px;height:5px}
.lspill .bar i{background:var(--spill-lit)}
.ledger-f{border-top:1px solid var(--dark-line);padding:16px 20px;display:flex;
  justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.ledger-f .m{font-size:1.02rem;font-weight:600;letter-spacing:-.025em}
.ledger-f .m em{font-style:normal;color:var(--spill-lit)}
.ledger-f .cap{font-family:"Geist Mono",monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dark-soft)}
.ctr-copy blockquote{border-left:2px solid var(--spill-lit);padding-left:20px;margin:26px 0 0;
  font-size:1.06rem;line-height:1.5;color:var(--dark-ink)}
.ctr-copy blockquote cite{display:block;margin-top:10px;font-style:normal;
  font-family:"Geist Mono",monospace;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dark-soft)}

/* ---------- the four steps, offset rail ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.step{background:var(--paper);padding:30px 24px 34px}
.step:nth-child(even){padding-top:58px}
.step .k{font-family:"Geist Mono",monospace;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--spill-ink);display:block;margin-bottom:14px}
.step h3{margin-bottom:9px}
.step p{font-size:.92rem;color:var(--ink-soft);line-height:1.5}

/* ---------- bento, six items into six cells ---------- */
.bento{display:grid;gap:14px;
  grid-template-columns:repeat(6,1fr);
  grid-template-areas:
    "a a a a b b"
    "a a a a c c"
    "d d e e f f"}
.cell{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 26px 28px;display:flex;flex-direction:column;
  transition:transform 190ms var(--eo),border-color 190ms var(--eo),box-shadow 220ms var(--eo)}
@media (hover:hover) and (pointer:fine){
  .cell:hover{transform:translateY(-3px);border-color:var(--line-2);
    box-shadow:0 12px 30px -14px rgba(26,23,20,.24)}
}
.cell .k{font-family:"Geist Mono",monospace;font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px}
.cell h3{margin-bottom:10px}
.cell p{font-size:.93rem;color:var(--ink-soft);line-height:1.52;max-width:40ch}
.cell.big{grid-area:a;padding:34px 34px 36px;background:var(--spill-wash);border-color:color-mix(in oklab,var(--spill) 30%,transparent)}
.cell.big h3{font-size:clamp(1.5rem,2.7vw,2.1rem);letter-spacing:-.04em;line-height:1.1;margin-bottom:14px}
.cell.big p{font-size:1.02rem;max-width:56ch;color:var(--ink);line-height:1.55}
.cell.big .k{color:var(--spill-ink)}
.cell.b{grid-area:b}.cell.c{grid-area:c}.cell.d{grid-area:d}.cell.e{grid-area:e}.cell.f{grid-area:f}
.timing{margin-top:auto;padding-top:20px;display:flex;gap:44px;flex-wrap:wrap;
  border-top:1px solid color-mix(in oklab,var(--spill) 26%,transparent)}
.cell.big .timing{margin-top:26px}
.timing div span{display:block;font-family:"Geist Mono",monospace;font-size:.63rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--spill-ink);margin-bottom:3px}
.timing div b{font-size:1.28rem;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ---------- objections and accordion ---------- */
.obj{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,5vw,70px);align-items:start}
details{border-bottom:1px solid var(--line)}
details summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;
  align-items:center;justify-content:space-between;gap:18px;
  font-size:1.06rem;font-weight:600;letter-spacing:-.025em;
  transition:color 160ms var(--eo)}
details summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){details summary:hover{color:var(--spill-ink)}}
.chev{flex:none;width:22px;height:22px;border:1px solid var(--line-2);border-radius:50%;
  position:relative;transition:transform 200ms var(--eo),background-color 200ms var(--eo)}
.chev::before,.chev::after{content:"";position:absolute;background:var(--ink);border-radius:1px}
.chev::before{width:9px;height:1.5px;top:9.7px;left:6px}
.chev::after{width:1.5px;height:9px;top:6px;left:9.7px;
  transition:transform 200ms var(--eo);transform-origin:center}
details[open] .chev{background:var(--spill-wash);border-color:color-mix(in oklab,var(--spill) 34%,transparent)}
details[open] .chev::after{transform:scaleY(0)}
details .body{padding:0 0 22px;color:var(--ink-soft);font-size:.97rem;line-height:1.6}
details .body p+p{margin-top:12px}
details .body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* ---------- verbatim quotes ---------- */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.voice{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column}
.voice p{font-size:.97rem;line-height:1.5;letter-spacing:-.01em}
.voice cite{display:block;margin-top:auto;padding-top:16px;font-style:normal;font-family:"Geist Mono",monospace;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- closing ---------- */
.close{background:var(--dark);color:var(--dark-ink);text-align:left;position:relative;overflow:hidden}
.close-in{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,5vw,64px);align-items:end}
.close-in>*,.hero>*,.ctr-grid>*,.obj>*{min-width:0}
.close h2{color:var(--dark-ink);max-width:16ch}
.close .lede{color:var(--dark-soft);margin-top:18px;max-width:38ch}
.pricebox{border:1px solid var(--dark-line);border-radius:var(--r);background:var(--dark-2);padding:24px}
.pricebox .p{font-size:2rem;font-weight:650;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.pricebox .p small{font-size:.92rem;font-weight:500;color:var(--dark-soft);letter-spacing:-.01em}
.pricebox ul{list-style:none;margin:16px 0 20px;display:grid;gap:9px}
.pricebox li{font-size:.9rem;color:var(--dark-soft);display:flex;gap:10px;align-items:flex-start}
.pricebox li b{color:var(--dark-ink);font-weight:500}
.tick{flex:none;width:16px;height:16px;margin-top:3px}
.pricebox .btn{width:100%;justify-content:center}

/* ---------- legal and footer ---------- */
.legal{font-family:"Geist Mono",monospace;font-size:.64rem;line-height:1.75;color:var(--ink-soft);
  padding:36px 0;border-top:1px solid var(--line);max-width:78ch}
footer{padding:0 0 56px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.82rem;color:var(--ink-soft)}

/* ---------- motion guard ---------- */
@media (prefers-reduced-motion:reduce){
  .bar i{transition:none}
  .dot{animation:none}
  .btn,.cell,.sub-cta,.chev,.receipt a,details summary{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:40px}
  .hero .art{order:1;max-width:360px;margin-inline:auto}
  .ctr-grid,.obj,.close-in{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(even){padding-top:30px}
  .bento{grid-template-columns:1fr 1fr;
    grid-template-areas:"a a" "b c" "d e" "f f"}
  .voices{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .receipts{grid-template-columns:1fr}
  .receipt{border-right:0;border-bottom:1px solid var(--line);padding:18px 0}
  .receipt:not(:first-child){padding-left:0}
  .receipt:last-child{border-bottom:0}
  .steps{grid-template-columns:1fr}
  .step:nth-child(even){padding-top:30px}
  .bento{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e" "f"}
  .cta-row{gap:14px}
  .cta-row .btn{width:100%;justify-content:center}
  .navin .btn-sm{width:auto}
  /* headline and CTA come first on a phone, the split sits under them */
  .hero{gap:34px}
  .hero .art{max-width:none;margin-inline:0}
  .phone{width:min(100%,346px);margin:0}
  .screen{height:604px}
  .srow .n{font-size:.78rem}
  .srow .n em{font-size:.63rem}
}
@media (max-width:400px){
  /* 320px class: the nowrap App Store label was forcing the grid track wider than the page */
  .btn{font-size:.9rem;padding:14px 14px;gap:9px}
  .btn-sm{font-size:.82rem;padding:9px 12px;min-height:44px}
  .pricebox{padding:18px}
  .wrap{padding:0 18px}
  .phone{width:min(100%,284px)}
  .screen{height:560px}
  .col{padding:11px 10px 8px}
  .row,.srow .n{font-size:.72rem}
  .row .q,.srow .n em{font-size:.61rem}
  .scr-head{padding:12px 14px 8px}
  .scr-foot{padding:10px 14px 16px}
}

/* ============================================================
   Site shell: nav links, footer, socials, document pages
   ============================================================ */

.navlinks{display:flex;align-items:center;gap:26px;margin-left:auto;margin-right:22px}
.navlinks a{font-size:.92rem;color:var(--ink-soft);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
  transition:color 160ms var(--eo)}
.navlinks a[aria-current="page"]{color:var(--ink);font-weight:500}
@media (hover:hover) and (pointer:fine){.navlinks a:hover{color:var(--ink)}}
@media (max-width:820px){.navlinks{display:none}}

/* ---------- footer ---------- */
.sitefoot{display:block;border-top:1px solid var(--line);background:var(--surface);padding:clamp(48px,6vw,72px) 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.foot-brand .brand{font-size:1.35rem;min-height:0;margin-bottom:12px}
.foot-brand p{font-size:.9rem;color:var(--ink-soft);max-width:30ch;margin-bottom:20px}
.foot-col h4{font-family:"Geist Mono",monospace;font-size:.65rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:500;margin-bottom:16px}
.foot-col ul{list-style:none;display:grid;gap:2px}
.foot-col a{font-size:.93rem;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;min-height:38px;
  transition:color 160ms var(--eo)}
@media (hover:hover) and (pointer:fine){.foot-col a:hover{color:var(--spill-ink)}}

.socials{display:flex;gap:10px;flex-wrap:wrap}
.social{width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
  background:var(--paper);display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-soft);
  transition:transform 170ms var(--eo),color 170ms var(--eo),border-color 170ms var(--eo)}
.social svg{width:18px;height:18px;fill:currentColor}
.social:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .social:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-2px)}
}

.foot-bar{border-top:1px solid var(--line);margin-top:clamp(40px,5vw,60px);
  padding:14px 0 26px;align-items:center;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.84rem;color:var(--ink-soft)}
.foot-bar nav{position:static;background:none;border:0;backdrop-filter:none;display:flex;gap:20px}
.foot-bar a{color:var(--ink-soft);text-decoration:none;
  display:inline-flex;align-items:center;min-height:38px}
@media (hover:hover) and (pointer:fine){.foot-bar a:hover{color:var(--ink)}}

@media (max-width:820px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:480px){
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .foot-bar{flex-direction:column;gap:10px}
}

/* ---------- document pages: terms, privacy, help ---------- */
.dochead{border-bottom:1px solid var(--line);padding:clamp(44px,6vw,76px) 0 clamp(30px,4vw,44px);
  background:var(--surface)}
.crumb{font-family:"Geist Mono",monospace;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px;display:block;
  text-decoration:none}
@media (hover:hover) and (pointer:fine){.crumb:hover{color:var(--ink)}}
.dochead h1{font-size:clamp(2rem,4.6vw,3.3rem);letter-spacing:-.04em;max-width:18ch}
.docmeta{margin-top:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:.88rem;color:var(--ink-soft)}
.docmeta .btn{padding:11px 16px;min-height:44px;font-size:.9rem}

.doclayout{display:grid;grid-template-columns:220px 1fr;gap:clamp(30px,5vw,64px);
  align-items:start;padding-top:clamp(44px,5vw,68px);padding-bottom:clamp(60px,7vw,96px)}
.toc{position:sticky;top:88px}
.toc h4{font-family:"Geist Mono",monospace;font-size:.65rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:500;margin-bottom:12px}
.toc ol{list-style:none;counter-reset:t;display:grid;gap:1px}
.toc a{display:block;padding:7px 0;font-size:.88rem;color:var(--ink-soft);text-decoration:none;
  transition:color 160ms var(--eo)}
@media (hover:hover) and (pointer:fine){.toc a:hover{color:var(--ink)}}

.prose{max-width:68ch}
/* the global section padding must not apply inside a document page */
.prose section,.dochead section{padding:0}
.prose section+section{margin-top:40px}
.prose h2{font-size:1.42rem;letter-spacing:-.03em;margin-bottom:14px;scroll-margin-top:92px}
.prose h3{font-size:1.04rem;margin:26px 0 8px}
.prose p{margin-bottom:14px;color:var(--ink-soft);line-height:1.62;max-width:68ch}
.prose p strong,.prose li strong{color:var(--ink);font-weight:600}
.prose ul{margin:0 0 16px 0;padding-left:0;list-style:none;display:grid;gap:9px}
.prose ul li{position:relative;padding-left:20px;color:var(--ink-soft);line-height:1.6}
.prose ul li::before{content:"";position:absolute;left:3px;top:.66em;width:5px;height:5px;
  border-radius:50%;background:var(--spill)}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--line-2)}
@media (hover:hover) and (pointer:fine){.prose a:hover{text-decoration-color:var(--spill)}}
.callout{border:1px solid var(--line);border-left:2px solid var(--spill);border-radius:0 var(--r) var(--r) 0;
  background:var(--spill-wash);padding:18px 22px;margin:0 0 20px}
.callout p{color:var(--ink);margin:0}
.docfoot{margin-top:52px;padding-top:26px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--ink-soft)}

/* help centre */
.helpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:44px}
.helpcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;text-decoration:none;color:inherit;display:block;
  transition:transform 190ms var(--eo),border-color 190ms var(--eo),box-shadow 220ms var(--eo)}
.helpcard h3{margin-bottom:8px}
.helpcard p{font-size:.9rem;color:var(--ink-soft);line-height:1.5;margin:0}
@media (hover:hover) and (pointer:fine){
  .helpcard:hover{transform:translateY(-3px);border-color:var(--line-2);
    box-shadow:0 12px 30px -14px rgba(26,23,20,.22)}
}
.contactbar{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:26px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:44px}
.contactbar h3{margin-bottom:6px}
.contactbar p{font-size:.9rem;color:var(--ink-soft);margin:0}

@media (max-width:900px){
  .doclayout{grid-template-columns:1fr;gap:34px}
  .toc{position:static;border-bottom:1px solid var(--line);padding-bottom:18px}
  .toc ol{grid-template-columns:1fr 1fr;display:grid}
  .helpgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .toc ol{grid-template-columns:1fr}
  .helpgrid{grid-template-columns:1fr}
  .contactbar{flex-direction:column;align-items:flex-start}
  .contactbar .btn{width:100%;justify-content:center}
}

/* ---------- print, so the PDFs come out clean ---------- */
@media print{
  nav,.sitefoot,.docmeta .btn,.toc,.crumb,body::after{display:none !important}
  body{background:#fff;color:#111;font-size:11pt}
  .wrap{max-width:none;padding:0}
  .doclayout{display:block;padding:0 !important}
  .dochead{background:none;border:0;padding:0 0 18pt}
  .dochead h1{font-size:22pt;max-width:none}
  .prose{max-width:none}
  .prose h2{font-size:13pt;margin-top:16pt;page-break-after:avoid}
  .prose h3{font-size:11pt;page-break-after:avoid}
  .prose p,.prose li{color:#333;font-size:10.5pt;line-height:1.5;max-width:none}
  .prose section+section{margin-top:16pt}
  .prose ul{margin-bottom:10pt}
  .callout{margin-bottom:14pt}
  .docfoot{display:none}
  .helpgrid,.contactbar{display:none}
  .callout{background:#f6f2e9;border:1px solid #ddd;border-left:2pt solid #B8862F}
  a{color:#111;text-decoration:none}
  section{page-break-inside:auto}
}

/* ---------- hero entry, CSS only (no script needed under the CSP) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:rise 300ms var(--eo) both}
.hero-copy>*:nth-child(2){animation-delay:60ms}
.hero-copy>*:nth-child(3){animation-delay:120ms}
.hero-copy>*:nth-child(4){animation-delay:180ms}
.hero-copy>*:nth-child(5){animation-delay:240ms}
.hero .art{animation:rise 340ms var(--eo) 120ms both}
@media (prefers-reduced-motion:reduce){
  .hero-copy>*,.hero .art{animation:none}
}

/* ============================================================
   v2.0 food tracker additions (September 2026)
   Everything below replaces what used to be inline style attributes,
   so the CSP can drop 'unsafe-inline' for styles.
   ============================================================ */

/* ---------- small utilities ---------- */
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.mt-20{margin-top:20px}
.pt-0{padding-top:0}
.lede a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.help-top{padding-top:clamp(40px,5vw,64px)}
.doclayout.tight{padding-top:clamp(20px,3vw,36px)}

/* ---------- the Home screen inside the phone ---------- */
.scr-head .e{font-family:"Geist Mono",monospace;font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.scr-head.home .t{font-size:1.9rem;letter-spacing:-.045em;line-height:1.05}
.hlist{flex:1;min-height:0;overflow:hidden;padding:2px 14px 8px}
.hsec{display:flex;align-items:baseline;gap:8px;margin:12px 4px 6px;
  font-family:"Geist Mono",monospace;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase}
.hsec b{font-weight:500;color:var(--ink-soft)}
.hsec.s-today{color:var(--accent)}
.hsec.s-soon{color:var(--spill-ink)}
.hsec.s-past{color:var(--danger)}
.hsec.s-fine{color:var(--ink-soft)}
.frow{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-bottom:6px}
.frow .tile{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.frow .tile svg{width:16px;height:16px}
.frow .fx{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.frow .fn{font-size:.8rem;font-weight:600;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .fl{font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .fs{flex:none;font-family:"Geist Mono",monospace;font-size:.58rem;color:var(--ink-soft)}
.st-today .tile{background:var(--accent-wash);color:var(--accent)}
.st-today .fl{color:var(--accent)}
.st-soon .tile{background:var(--spill-wash);color:var(--spill-ink)}
.st-soon .fl{color:var(--spill-ink)}
.st-past .tile{background:var(--danger-wash);color:var(--danger)}
.st-past .fl{color:var(--danger)}
.fine{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;
  color:var(--ink-soft);padding:8px 10px;border:1px dashed var(--line-2);border-radius:12px}
.hbar{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);
  padding:10px 14px 0;background:var(--surface)}
.hbar .pill{flex:1;background:var(--accent);color:#fff;border-radius:999px;padding:11px;
  text-align:center;font-size:.86rem;font-weight:600;letter-spacing:-.015em}
.hbar .sq{flex:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--ink)}
.hbar .sq svg{width:18px;height:18px}
.phone .homebar{margin:10px auto 8px}
.screen.home{background:var(--paper)}
.screen.home .homewrap{background:var(--surface)}

/* ---------- the receipt review, on the dark band ---------- */
.rv-h{display:grid;grid-template-columns:1fr 1.2fr;border-bottom:1px solid var(--dark-line)}
.rv-h div{padding:15px 20px;font-family:"Geist Mono",monospace;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase}
.rv-h div:first-child{color:var(--dark-soft);border-right:1px solid var(--dark-line)}
.rv-h div:last-child{color:var(--keep-lit)}
.rv{display:grid;grid-template-columns:1fr 1.2fr;border-bottom:1px solid var(--dark-line)}
.rv:last-child{border-bottom:0}
.rv>div{padding:12px 20px;min-width:0}
.rv>div:first-child{border-right:1px solid var(--dark-line);font-family:"Geist Mono",monospace;
  font-size:.8rem;color:var(--dark-soft);display:flex;align-items:center;
  overflow-wrap:anywhere}
.rv .nm{font-size:.95rem;display:block}
.rv .mt{font-size:.74rem;color:var(--dark-soft);font-family:"Geist Mono",monospace}
.rv .mt em{font-style:normal;color:var(--spill-lit)}
.rv.unsure .nm{color:var(--dark-soft)}
.rv.unsure .mt{color:var(--spill-lit)}

/* ---------- chips and the notification mock ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;
  padding:5px 12px;font-size:.8rem;background:var(--surface);color:var(--ink);white-space:nowrap}
.chip.warn{color:var(--danger);border-color:color-mix(in oklab,var(--danger) 30%,transparent)}
.notif{margin-top:26px;background:var(--surface);border:1px solid color-mix(in oklab,var(--spill) 30%,transparent);
  border-radius:18px;padding:14px 16px 16px;max-width:30rem;
  box-shadow:0 10px 26px -16px rgba(26,23,20,.28)}
.notif-top{display:flex;justify-content:space-between;align-items:center;
  font-family:"Geist Mono",monospace;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.notif-t{font-weight:600;margin-top:8px;letter-spacing:-.015em}
.notif-b{font-size:.92rem;color:var(--ink-soft);margin:2px 0 12px}

/* ---------- privacy: what leaves the phone ---------- */
.flows{display:grid;grid-template-columns:1fr 1.35fr;gap:14px;align-items:start}
.flows>*{min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px}
.card.keepcard{background:var(--keep-wash);border-color:color-mix(in oklab,var(--keep) 26%,transparent)}
.card .k{font-family:"Geist Mono",monospace;font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:14px}
.card.keepcard .k{color:var(--keep)}
.card h3{margin-bottom:10px}
.card p{font-size:.93rem;color:var(--ink-soft)}
.ticks{list-style:none;display:grid;gap:9px;margin-top:6px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem}
.ticks .tick{color:var(--keep)}
.pricebox .tick{color:var(--keep-lit)}
.flow{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.flow:last-child{border-bottom:0;padding-bottom:0}
.flow:first-of-type{padding-top:0}
.flow b{font-weight:600;font-size:.94rem;letter-spacing:-.01em}
.flow span{font-size:.88rem;color:var(--ink-soft)}
.flow .why{grid-column:1/-1}
.flow .to{font-family:"Geist Mono",monospace;font-size:.74rem;color:var(--ink)}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:1fr 1.15fr;gap:14px;align-items:stretch}
.plans>*{min-width:0}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;display:flex;flex-direction:column}
.plan.pro{background:var(--spill-wash);border-color:color-mix(in oklab,var(--spill) 30%,transparent)}
.plan .k{font-family:"Geist Mono",monospace;font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.plan.pro .k{color:var(--spill-ink)}
.plan .big{font-size:2rem;font-weight:650;letter-spacing:-.045em;line-height:1.1}
.plan .ticks{margin-top:18px}
.prices{margin-top:18px;display:grid;gap:0;border-top:1px solid color-mix(in oklab,var(--spill) 26%,transparent)}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid color-mix(in oklab,var(--spill) 26%,transparent)}
.prow b{font-weight:600}
.prow span{font-size:.86rem;color:var(--ink-soft)}
.prow>span{margin-left:auto;text-align:right}
.prow .amt{font-size:1.15rem;font-weight:650;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.plan .small{margin-top:16px;font-size:.8rem;color:var(--ink-soft);line-height:1.5}

/* ---------- document tables (privacy) ---------- */
.dtable{width:100%;border-collapse:collapse;margin:6px 0 22px;font-size:.88rem}
.dtable th,.dtable td{text-align:left;vertical-align:top;padding:11px 12px 11px 0;
  border-bottom:1px solid var(--line);color:var(--ink-soft);line-height:1.5}
.dtable th{font-family:"Geist Mono",monospace;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;color:var(--ink-soft);border-bottom-color:var(--line-2)}
.dtable td:first-child{color:var(--ink);font-weight:600}
.dtable a{overflow-wrap:anywhere}
@media screen and (max-width:720px){
  .dtable thead{display:none}
  .dtable,.dtable tbody,.dtable tr,.dtable td{display:block;width:100%}
  .dtable tr{border-bottom:1px solid var(--line-2);padding:10px 0}
  .dtable td{border:0;padding:3px 0}
  .dtable td::before{content:attr(data-label);display:block;font-family:"Geist Mono",monospace;
    font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
    font-weight:500;margin-top:6px}
  .dtable td:first-child::before{display:none}
}

/* ---------- 404 ---------- */
.nf{padding-top:clamp(80px,12vw,160px);padding-bottom:clamp(60px,8vw,110px);max-width:760px}
.nf h1{margin-top:18px;font-size:clamp(2.2rem,5vw,3.6rem)}
.nf .lede{margin-top:20px;max-width:46ch}
.nf .cta-row{margin-top:32px}
.nf-more{margin-top:clamp(44px,6vw,72px);border-top:1px solid var(--line);padding-top:26px}
.nf-more h4{margin-bottom:14px}
.nf-more ul{list-style:none;display:grid;gap:10px;max-width:34rem}
.nf-more a{color:var(--ink)}

@media (max-width:980px){
  .flows,.plans{grid-template-columns:1fr}
}
@media (max-width:640px){
  .rv-h,.rv{grid-template-columns:1fr 1.25fr}
  .rv>div,.rv-h div{padding-left:14px;padding-right:14px}
  .flow{grid-template-columns:1fr}
  .plan{padding:22px}
  .card{padding:20px}
}
@media (max-width:400px){
  .hlist{padding:2px 10px 6px}
  .frow{padding:7px 8px;gap:8px}
  .rv>div:first-child{font-size:.72rem}
}
@media print{
  .dtable{font-size:9.5pt}
  .dtable td,.dtable th{color:#333;padding:5pt 8pt 5pt 0}
  .dtable td:first-child{color:#111}
}