/* ============================================================
   DAIT — dait.in
   Hand-written. No framework, no build step.
   Type: Plus Jakarta Sans (text) + IBM Plex Mono (figures/labels)
   ============================================================ */

:root{
  /* ink */
  --ink:#0F1A13;
  --ink-2:#4A574E;
  --muted:#7C8880;

  /* brand */
  --green:#2E7D32;
  --green-deep:#1B5E20;
  --green-dark:#0E2617;
  --green-lift:#8BD98F;
  --tint:#E9F2EA;
  --tint-2:#F2F7F2;

  /* surfaces */
  --paper:#FBFCFA;
  --white:#FFFFFF;
  --rule:#E1E8E2;
  --rule-soft:#EDF2EE;
  --graybar:#C6CEC8;

  /* type */
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* metrics */
  --wrap:1180px;
  --gut:24px;
  --sect:clamp(72px,9vw,128px);
  --r:14px;

  /* motion */
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body,h1,h2,h3,p,ul,ol,figure,table,dd{ margin:0 }
ul,ol{ padding:0; list-style:none }

html{ scroll-behavior:smooth; scroll-padding-top:88px }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ animation:none !important; transition:none !important }
}

body{
  font-family:var(--sans);
  font-size:17px; line-height:1.6; color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

img,svg{ max-width:100%; display:block }
a{ color:inherit }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut) }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--green-dark); color:#fff; padding:12px 18px; border-radius:0 0 10px 0;
  font-weight:600; text-decoration:none;
}
.skip:focus{ left:0 }

:focus-visible{ outline:2.5px solid var(--green); outline-offset:3px; border-radius:4px }

/* ---------- shared type ---------- */
h1,h2,h3{ color:var(--ink); font-weight:800; letter-spacing:-.032em; line-height:1.06 }
h2{ text-wrap:balance }
h3{ font-weight:700; letter-spacing:-.014em; line-height:1.25 }

.eyebrow{
  font-family:var(--mono); font-size:14.5px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--green);
  margin-bottom:20px;
}
.eyebrow.light{ color:var(--green-lift) }

.section{ padding:var(--sect) 0 }
.section.alt{ background:var(--tint-2); border-block:1px solid var(--rule-soft) }
.section-title{ font-size:clamp(30px,3.7vw,46px); max-width:16ch }
.section-sub{ font-size:19px; max-width:62ch; margin-top:18px; color:var(--ink-2) }

.fineprint{ font-family:var(--mono); font-size:13.5px; line-height:1.65; color:var(--muted); letter-spacing:-.01em }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--green-deep); color:#fff; text-decoration:none;
  font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:-.01em;
  padding:15px 26px; border:1px solid var(--green-deep); border-radius:10px;
  cursor:pointer; white-space:nowrap;
  transition:background .16s ease, transform .16s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{ background:#144d19; transform:translateY(-1px); box-shadow:0 14px 28px -14px rgba(20,77,25,.5) }
.btn:active{ transform:translateY(0); box-shadow:none }
.btn-sm{ padding:10px 18px; font-size:14.5px; border-radius:9px }
.btn-light{ background:#fff; color:var(--green-dark); border-color:#fff }
.btn-light:hover{ background:var(--tint) }

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(251,252,250,.86);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule-soft);
}
.head-inner{ display:flex; align-items:center; gap:32px; height:68px }

.brand{ display:flex; align-items:center; gap:8px; text-decoration:none; flex:none }
.brand .leaf{ width:22px; height:22px; fill:var(--green) }
.brand .word{
  font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1;
}
.brand .word b{
  background:var(--green); color:#fff; font-weight:800;
  padding:1px 4px; border-radius:5px; margin:0 1px;
}

.nav{ display:flex; gap:28px; margin-left:auto }
.nav a{
  position:relative; font-size:15px; font-weight:500; color:var(--ink-2); text-decoration:none;
  padding:4px 0; transition:color .15s;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--green); transition:right .28s var(--ease);
}
.nav a:hover{ color:var(--green-deep) }
.nav a:hover::after{ right:0 }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:clamp(56px,7vw,96px) 0 clamp(56px,7vw,88px) }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.hero h1{ font-size:clamp(38px,5vw,66px); margin-bottom:26px; text-wrap:balance }
.hero h1 em{ font-style:normal; color:var(--green) }
.lede{ font-size:clamp(18px,1.5vw,21px); line-height:1.55; max-width:52ch; color:var(--ink-2) }

/* hero download CTA */
.hero-cta{ margin-top:34px }
.play-badge{
  display:inline-block; line-height:0; border-radius:8px;
  transition:transform .16s var(--ease), filter .16s var(--ease);
}
.play-badge img{ display:block; height:auto }
.play-badge:hover{ transform:translateY(-1px); filter:brightness(1.06) }
.play-badge:active{ transform:translateY(0) }
.fineprint{ margin-top:14px; max-width:52ch }

/* hero entrance — plain CSS, plays with or without JS */
@keyframes hero-rise{
  from{ opacity:0; transform:translateY(14px) }
  to{ opacity:1; transform:translateY(0) }
}
.hero-copy{ animation:hero-rise .7s var(--ease) both }
.hero-art .plan-card{ animation:hero-rise .7s var(--ease) .1s both }
.hero-art .list-card{ animation:hero-rise .7s var(--ease) .22s both }

/* hero art */
.hero-art{ position:relative; padding:14px 0 46px }
.card{
  background:var(--white); border:1px solid var(--rule); border-radius:18px;
  box-shadow:0 1px 2px rgba(15,26,19,.04), 0 18px 44px -22px rgba(15,26,19,.20);
}
.plan-card{ padding:26px 26px 58px }
.card-head{ display:flex; align-items:baseline; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--rule-soft) }
.card-head .tag{
  font-family:var(--mono); font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:var(--green);
}
.card-head .price{ font-family:var(--mono); font-size:24px; font-weight:600; color:var(--ink); letter-spacing:-.02em }

.meals li{ display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--rule-soft); align-items:baseline }
.meals li:last-child{ border-bottom:0 }
.meals span{
  font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); width:84px; flex:none;
}
.meals b{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.4 }

.macro-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid var(--rule-soft) }
.macro-row span{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px }
.macro-row b{ font-family:var(--mono); font-size:16px; font-weight:600; color:var(--ink); letter-spacing:-.02em }

.list-card{
  padding:20px 22px; position:relative; z-index:2;
  width:min(86%,340px); margin:-42px 0 0 auto;
}
.card-label{ font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px }
.mini-list li{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14.5px }
.mini-list b{ font-weight:600; color:var(--ink); flex:1; white-space:nowrap }
.mini-list i{ font-family:var(--mono); font-style:normal; font-weight:600; color:var(--ink); font-size:14px }
.mini-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--ink);
}
.mini-total span{ font-size:14px; font-weight:600; color:var(--ink-2) }
.mini-total b{ font-family:var(--mono); font-size:21px; font-weight:600; color:var(--ink); letter-spacing:-.02em }

.pill{
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.01em;
  background:var(--tint); color:var(--green-deep); padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.pill-mute{ background:#EEF1EF; color:var(--ink-2) }

/* ============================================================
   STAT STRIP
   ============================================================ */
.stats{ background:var(--green-dark); color:#fff; padding:44px 0 }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px }
.stat-grid b{
  display:block; font-family:var(--mono); font-size:clamp(28px,3vw,38px); font-weight:600;
  letter-spacing:-.03em; color:#fff; margin-bottom:8px;
}
.stat-grid span{ display:block; font-size:15px; line-height:1.5; color:#A9C2AE; max-width:26ch }

/* ============================================================
   PROBLEM  (editorial two-column)
   ============================================================ */
.prose-grid{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(24px,5vw,72px) }
.prose-label .eyebrow{ margin:0; padding-top:10px }
.prose-body h2{ font-size:clamp(26px,3.2vw,40px); max-width:20ch; margin-bottom:26px }
.prose-body p{ font-size:19px; line-height:1.62; max-width:60ch }
.prose-body p + p{ margin-top:18px }

/* ============================================================
   STEPS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:44px; border-top:1px solid var(--rule) }
.steps li{ padding:30px 28px 8px 0; border-right:1px solid var(--rule) }
.steps li:last-child{ border-right:0; padding-right:0 }
.step-n{
  display:block; font-family:var(--mono); font-size:14px; font-weight:600;
  color:var(--green); letter-spacing:.09em; margin-bottom:20px;
}
.steps h3{ font-size:20px; margin-bottom:10px }
.steps p{ font-size:15.5px; line-height:1.58; max-width:34ch }

/* loop callout — the ongoing step, set apart from the one-time setup steps */
.loop-note{
  display:flex; align-items:center; gap:22px; margin-top:36px;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--r);
  padding:24px 28px;
}
.loop-icon{
  flex:none; width:44px; height:44px; border-radius:50%;
  background:var(--tint); color:var(--green-deep);
  font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.loop-copy h3{ font-size:18px; margin-bottom:4px }
.loop-copy p{ font-size:15px; line-height:1.55; max-width:62ch }

/* ============================================================
   CHART
   ============================================================ */
.split-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:end }
.split-head .section-title{ max-width:22ch; text-wrap:initial }
.split-note{ font-size:18px; line-height:1.6; max-width:52ch; padding-bottom:6px }

.chart{ margin-top:56px; display:flex; flex-direction:column; gap:12px }
.bar-row{ display:grid; grid-template-columns:150px minmax(0,1fr); align-items:center; gap:20px }
.bar-name{ font-size:15.5px; font-weight:600; color:var(--ink); text-align:right; letter-spacing:-.008em; transition:color .2s var(--ease) }
.bar-track{ display:flex; align-items:center; gap:13px; padding-right:58px }
/* the padding reserves room for the value label: a flex item's % width resolves
   against the content box, so even the 100% bar leaves the label its space */
.bar{
  height:22px; width:var(--w); flex:none;
  background:var(--green); border-radius:0 4px 4px 0;
  transition:filter .2s var(--ease);
}
.bar-row:hover .bar-name{ color:var(--green-deep) }
.bar-row:hover .bar{ filter:brightness(1.12) }
.bar-val{ font-family:var(--mono); font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.02em; white-space:nowrap }
.bar-row.muted .bar{ background:var(--graybar) }
.bar-row.muted .bar-name,.bar-row.muted .bar-val{ color:var(--ink-2) }

.chart-key{ display:flex; flex-wrap:wrap; gap:26px; margin-top:14px; padding-left:170px }
.chart-key span{ font-size:15px; font-weight:500; color:var(--ink-2); display:flex; align-items:center }
.sw{ width:12px; height:12px; border-radius:3px; background:var(--green); margin-right:9px; display:inline-block; flex:none }
.sw-mute{ background:var(--graybar) }
.chart-note{ margin-top:26px; max-width:70ch }

/* ============================================================
   TABLE
   ============================================================ */
.table-wrap{ margin-top:44px; overflow-x:auto; -webkit-overflow-scrolling:touch }
.shop{ width:100%; min-width:620px; border-collapse:collapse; text-align:left }
.shop th,.shop td{ padding:13px 18px 13px 0; border-bottom:1px solid var(--rule) }
.shop thead th{
  font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); padding-bottom:12px;
}
.shop tbody tr{ transition:background-color .2s var(--ease) }
.shop tbody tr:hover{ background-color:var(--white) }
.shop tbody th{ font-size:16px; font-weight:600; color:var(--ink) }
.shop tbody td{ font-size:15.5px; color:var(--ink-2) }
.shop .num{ text-align:right; padding-right:0; font-family:var(--mono); font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.02em }
.shop tfoot th{ font-size:17px; font-weight:700; color:var(--ink); border-bottom:0; padding-top:18px }
.shop tfoot td{ border-bottom:0; padding-top:18px }
.shop tfoot .total{ font-size:23px; font-weight:600 }
.shop tfoot tr{ border-top:2px solid var(--ink) }

/* ============================================================
   APP CARDS (mini mockups per tab)
   ============================================================ */
.appcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px }
.appcard{
  background:var(--white); border:1px solid var(--rule); border-radius:var(--r);
  padding:20px 22px 24px; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.appcard:hover{
  transform:translateY(-5px); border-color:var(--rule-soft);
  box-shadow:0 1px 2px rgba(15,26,19,.04), 0 24px 44px -22px rgba(15,26,19,.22);
}
.appcard h3{ font-size:18px; margin-bottom:8px; color:var(--green-deep) }
.appcard p{ font-size:14.5px; line-height:1.56; color:var(--ink-2) }

.appcard-visual{
  background:var(--tint-2); border:1px solid var(--rule-soft); border-radius:10px;
  padding:16px 16px 14px; margin-bottom:18px; min-height:150px;
}

/* Plan */
.mini-days{ display:flex; gap:5px; margin-bottom:12px }
.mini-days span{
  flex:1; text-align:center; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.02em; color:var(--muted); background:var(--white); border:1px solid var(--rule);
  border-radius:6px; padding:5px 0;
}
.mini-days span.on{ background:var(--green-deep); border-color:var(--green-deep); color:#fff }
.mini-meals li{ display:flex; gap:8px; padding:7px 0; border-top:1px solid var(--rule-soft); align-items:baseline }
.mini-meals li:first-child{ border-top:0 }
.mini-meals span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); width:62px; flex:none;
}
.mini-meals b{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.35 }

/* Today */
.mini-gauge-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px }
.mini-gauge-head span{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--muted) }
.mini-gauge-head b{ font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--ink) }
.mini-gauge-track{ height:8px; border-radius:99px; background:var(--rule); overflow:hidden }
.mini-gauge-fill{ display:block; height:100%; width:var(--w); background:var(--green); border-radius:99px }
.mini-log{ margin-top:14px }
.mini-log li{
  display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13px; color:var(--ink);
  border-top:1px solid var(--rule-soft);
}
.mini-log li:first-child{ border-top:0 }
.mini-log i{ font-style:normal; color:var(--green); font-size:12px; width:14px; flex:none; text-align:center }
.mini-log li.pending{ color:var(--muted) }
.mini-log li.pending i{ color:var(--graybar) }

/* Progress */
.mini-chart{ width:100%; height:80px; display:block; overflow:visible }
.mini-chart polyline{ fill:none; stroke:var(--green); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round }
.mini-chart circle{ fill:var(--green) }
.mini-chart-foot{ display:flex; justify-content:space-between; align-items:baseline; margin-top:6px }
.mini-chart-foot span{ font-family:var(--mono); font-size:11px; color:var(--muted) }
.mini-chart-foot b{ font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--ink) }

/* Value */
.mini-bar-row{ display:flex; align-items:center; gap:10px; padding:7px 0 }
.mini-bar-row span{ font-size:12.5px; font-weight:600; color:var(--ink); width:40px; flex:none }
.mini-bar-track{ flex:1; height:8px; border-radius:0 4px 4px 0; background:transparent }
.mini-bar-row i{ display:block; height:8px; width:var(--w); background:var(--green); border-radius:0 4px 4px 0 }
.mini-bar-row.muted i{ background:var(--graybar) }
.mini-bar-row b{ font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink); width:44px; flex:none; text-align:right }

/* Settings */
.mini-set-row{
  display:flex; justify-content:space-between; align-items:center; padding:9px 0;
  border-top:1px solid var(--rule-soft); font-size:13px;
}
.mini-set-row:first-child{ border-top:0 }
.mini-set-row span{ color:var(--muted) }
.mini-set-row b{ font-weight:600; color:var(--ink) }
.mini-switch{
  width:30px; height:17px; border-radius:99px; background:var(--rule); position:relative; flex:none;
}
.mini-switch::after{
  content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(15,26,19,.25); transition:left .15s ease;
}
.mini-switch.on{ background:var(--green) }
.mini-switch.on::after{ left:15px }

/* ============================================================
   PROOF
   ============================================================ */
.proof-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:48px }
.proof{
  background:var(--white); border:1px solid var(--rule); border-radius:var(--r); padding:28px 30px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.proof:hover{
  transform:translateY(-5px); border-color:var(--rule-soft);
  box-shadow:0 1px 2px rgba(15,26,19,.04), 0 24px 44px -22px rgba(15,26,19,.22);
}
.proof b{
  display:block; font-family:var(--mono); font-size:15px; font-weight:600;
  color:var(--green); letter-spacing:.01em; margin-bottom:16px;
}
.proof h3{ font-size:19px; margin-bottom:9px }
.proof p{ font-size:15.5px; line-height:1.58; max-width:48ch }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(24px,5vw,72px); align-items:start }
.faq-list{ border-top:1px solid var(--rule) }
.faq-list details{ border-bottom:1px solid var(--rule) }
.faq-list summary{
  list-style:none; cursor:pointer; position:relative;
  padding:22px 46px 22px 0;
  font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.014em; line-height:1.4;
}
.faq-list summary::-webkit-details-marker{ display:none }
.faq-list summary::after{
  content:''; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:translateY(-70%) rotate(45deg); transition:transform .18s ease;
}
.faq-list details[open] summary::after{ transform:translateY(-30%) rotate(225deg) }
.faq-list summary:hover{ color:var(--green-deep) }
.faq-list p{ padding:0 46px 24px 0; font-size:16.5px; line-height:1.62; max-width:64ch; margin-top:-4px }
/* Open/close is animated in main.js (height + padding on this <p>), not
   here — a native ::details-content CSS transition was tried first, but
   CSS.supports('selector(...)') proved an unreliable way to detect real
   support for it (it checks syntax only), so it silently failed to
   animate in at least Safari. JS animation works identically everywhere. */

/* ============================================================
   CTA
   ============================================================ */
.cta{ position:relative; background:var(--green-dark); color:#fff; padding:clamp(72px,9vw,116px) 0; overflow:hidden }
.cta::after{
  content:''; position:absolute; right:-160px; top:-220px; width:680px; height:680px; border-radius:50%;
  background:radial-gradient(circle at 38% 38%, rgba(76,175,80,.32), rgba(76,175,80,0) 62%);
  pointer-events:none;
}
.cta-inner{ position:relative; z-index:1; max-width:660px }
.cta h2{ color:#fff; font-size:clamp(30px,3.9vw,50px) }
.cta-sub{ font-size:19px; line-height:1.55; color:#B9CFBE; margin-top:18px; max-width:48ch }

/* ============================================================
   LEGAL (privacy / terms)
   ============================================================ */
.legal-hero{ padding-bottom:0 }
.legal-title{ max-width:none; text-wrap:initial }
.legal-meta{ font-family:var(--mono); font-size:13.5px; line-height:1.8; color:var(--muted); margin-top:18px }
.legal-meta a{ color:var(--green-deep) }
.legal-intro{ font-size:18px; line-height:1.6; max-width:66ch; color:var(--ink-2); margin-top:22px }

.legal-grid{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:start }
.legal-nav{ position:sticky; top:96px; display:flex; flex-direction:column; gap:2px }
.legal-nav .card-label{ margin-bottom:8px }
.legal-nav a{
  font-size:14px; color:var(--ink-2); text-decoration:none; padding:6px 0;
  border-bottom:1px solid transparent; transition:color .15s;
}
.legal-nav a:hover{ color:var(--green-deep) }

.legal-body section{ padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid var(--rule) }
.legal-body section:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0 }
.legal-body h2{ font-size:25px; letter-spacing:-.02em; margin-bottom:16px; scroll-margin-top:96px }
.legal-body h3{ font-size:16.5px; color:var(--ink); margin:26px 0 8px }
.legal-body h3:first-child{ margin-top:0 }
.legal-body p{ font-size:16px; line-height:1.68; max-width:70ch; color:var(--ink-2) }
.legal-body p + p{ margin-top:12px }
.legal-body p + h3{ margin-top:26px }
.legal-body ul{ margin:12px 0 0; max-width:70ch }
.legal-body li{
  font-size:16px; line-height:1.62; color:var(--ink-2);
  padding:0 0 10px 20px; position:relative;
}
.legal-body li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--green) }
.legal-body strong{ color:var(--ink); font-weight:700 }
.legal-body a{ color:var(--green-deep) }

@media (max-width:900px){
  .legal-grid{ grid-template-columns:1fr }
  .legal-nav{ position:static; flex-direction:row; flex-wrap:wrap; gap:4px 16px }
  .legal-nav .card-label{ width:100%; margin-bottom:4px }
}

/* ============================================================
   MOTION — scroll reveal
   Gated behind .js-reveal (set by an inline script in <head>), so a
   page with JS disabled or slow to load is fully visible, never stuck
   at opacity:0. prefers-reduced-motion (top of file) turns the
   transitions off globally; the is-visible end state still applies,
   just instantly instead of animated.
   ============================================================ */
.js-reveal .reveal,
.js-reveal .steps li,
.js-reveal .appcards > .appcard,
.js-reveal .proof-grid > .proof,
.js-reveal .stat-grid > div{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease),
             box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.js-reveal .reveal.is-visible,
.js-reveal .steps.is-visible li,
.js-reveal .appcards.is-visible > .appcard,
.js-reveal .proof-grid.is-visible > .proof,
.js-reveal .stat-grid.is-visible > div{
  opacity:1; transform:none;
}
/* once a card has settled into its revealed position, swap to a snappier
   transition so the hover-lift doesn't inherit the slow .6s reveal timing */
.js-reveal .appcards.is-visible > .appcard,
.js-reveal .proof-grid.is-visible > .proof{
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.js-reveal .appcards.is-visible > .appcard:hover,
.js-reveal .proof-grid.is-visible > .proof:hover{
  transform:translateY(-5px);
}
/* the app tabs get a bit more presence on arrival — a slightly bigger
   rise plus a touch of scale, so each one visibly "lands" in turn */
.js-reveal .appcards > .appcard{
  transform:translateY(26px) scale(.97);
  transition:opacity .5s var(--ease), transform .5s var(--ease),
             box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.js-reveal .appcards.is-visible > .appcard{ transform:none }

.js-reveal .chart{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.js-reveal .chart.is-visible{ opacity:1; transform:none }
.js-reveal .bar{ width:0; transition:width .9s var(--ease), filter .2s var(--ease) }
.js-reveal .chart.is-visible .bar{ width:var(--w) }

/* week's shopping list — rows price in one at a time, then the total sums up */
.js-reveal .shop tbody tr{
  opacity:0; transform:translateX(-10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.js-reveal .table-wrap.is-visible .shop tbody tr{ opacity:1; transform:none }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{ background:var(--paper); border-top:1px solid var(--rule); padding:56px 0 28px }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr); gap:clamp(28px,5vw,64px); align-items:start }
.brand-foot{ margin-bottom:16px }
.foot-line{ font-size:15px; line-height:1.6; color:var(--ink-2) }
.foot-contact{ margin-top:16px; display:flex; flex-direction:column; gap:7px }
.foot-contact a{
  font-family:var(--mono); font-size:13.5px; color:var(--ink-2);
  text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:1px;
  align-self:flex-start; transition:color .15s, border-color .15s;
}
.foot-contact a:hover{ color:var(--green-deep); border-bottom-color:var(--green) }
.foot-nav{ display:flex; flex-direction:column; gap:11px }
.foot-nav a{ font-size:15px; color:var(--ink-2); text-decoration:none }
.foot-nav a:hover{ color:var(--green-deep); text-decoration:underline; text-underline-offset:3px }
.foot-disc{ font-family:var(--mono); font-size:12.5px; line-height:1.65; color:var(--muted) }
.foot-base{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:44px; padding-top:22px; border-top:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:13px; color:var(--muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .nav{ gap:20px }
  .nav a{ font-size:14px }
  .appcards{ grid-template-columns:repeat(2,1fr) }
  /* 5 cards in 2 columns leaves the last one stranded alone — instead,
     stretch it full-width and lay it out sideways so it reads as a
     deliberate closer, not an orphan. */
  .appcards > :last-child{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:28px }
  .appcards > :last-child .appcard-visual{ width:240px; flex:none; margin-bottom:0 }
  .appcards > :last-child .appcard-copy{ flex:1 }
}

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:44px }
  .hero-art{ max-width:520px; padding-bottom:20px }
  .stat-grid{ grid-template-columns:repeat(2,1fr); gap:26px 24px }
  .split-head{ grid-template-columns:1fr; align-items:start; gap:22px }
  .split-note{ font-size:17px }
  .steps{ grid-template-columns:repeat(2,1fr) }
  .steps li:nth-child(2n){ border-right:0; padding-right:0 }
  .steps li:nth-child(n+3){ border-top:1px solid var(--rule) }
  .proof-grid{ grid-template-columns:1fr }
  .faq-grid{ grid-template-columns:1fr; gap:30px }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:34px }
  .foot-disc{ grid-column:1/-1 }
}

@media (max-width:760px){
  .nav{ display:none }
  .head-inner{ gap:16px }
  .btn-sm{ margin-left:auto }
  .prose-grid{ grid-template-columns:1fr; gap:14px }
  .prose-body p{ font-size:17.5px }
  .bar-row{ grid-template-columns:118px minmax(0,1fr); gap:14px }
  .bar-name{ font-size:14.5px }
  .chart-key{ padding-left:0; gap:18px }
}

@media (max-width:640px){
  body{ font-size:16.5px }
  :root{ --gut:20px }
  .appcards{ grid-template-columns:1fr }
  .appcards > :last-child{ flex-direction:column; gap:0 }
  .appcards > :last-child .appcard-visual{ width:auto }
  .steps{ grid-template-columns:1fr }
  .steps li{ border-right:0; border-top:1px solid var(--rule); padding:24px 0 6px }
  .steps li:first-child{ border-top:0 }
  .loop-note{ flex-direction:column; align-items:flex-start; text-align:left; gap:14px }
  .stat-grid{ grid-template-columns:1fr; gap:22px }
  .stat-grid span{ max-width:none }
  .list-card{ width:100%; margin:-18px 0 0 0 }
  .foot-grid{ grid-template-columns:1fr }
  .foot-base{ flex-direction:column; gap:8px; align-items:flex-start }
}

@media print{
  .site-head,.cta{ display:none }
  body{ background:#fff }
}