/* dinra.app — one stylesheet for the home page, the legal pages and 404 (generated by web/_src/build.py).
   Direction (owner, 21.10): modern, clean, premium consumer-app site. Lots of air, few elements,
   two font weights only (400 / 700), real dish photos and real app screens carry the visuals.
   No decorative produce, no gradients, no glow. Brand colours from the app: tomato, yellow, green on warm paper.
   No web fonts (system stack = zero requests). Every animation is off under prefers-reduced-motion. */

:root {
  --bg: #FBF8F3;          /* warm off-white page */
  --paper: #FFFFFF;       /* receipt / cards */
  --ink: #17140F;         /* near-black text, 17:1 on bg */
  --muted: #625A50;       /* secondary text, 6.4:1 on bg */
  --line: #ECE5DA;
  --leader: #CFC6B8;      /* dotted receipt leaders, same as the app */
  --tomato: #E8352B;      /* brand fill */
  --tomato-ink: #B81D24;  /* small red text, 5.9:1 on bg */
  --yellow: #FFC83D;
  --green: #2E9D5B;
  --green-ink: #1E7443;   /* small green text, 5.6:1 */
  /* soft tints for the bento tiles */
  --t-red: #FCE9E4;
  --t-yellow: #FFF3D2;
  --t-green: #E3F2E8;
  --sand: #F3ECE1;        /* receipt section background */
  --radius: 28px;
  --gutter: 20px;
  --max: 1160px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "New York", ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
/* Overhangs clip sideways without breaking position: sticky (clip, not hidden) */
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; }
a:hover { color: var(--tomato-ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; line-height: 1.04; letter-spacing: -.035em; font-weight: 700;
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; text-wrap: balance;
  /* hyphenate only really long words (German / Polish compounds), never "ei-ner"; balance = no orphans */
  hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; }
p { margin: 0 0 1em; }
b, strong, summary, th { font-weight: 700; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 50; }
.skip:focus { top: 12px; color: #fff; }

/* ---------- Header + wordmark ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(251, 248, 243, .88); border-bottom: 1px solid transparent; transition: border-color .3s; }
@supports (backdrop-filter: blur(8px)) { .site-header { backdrop-filter: saturate(1.6) blur(14px); } }
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
/* Typographic wordmark: "Dinra" in ink + a tomato full stop (replaces the vegetable logo, owner 21.10) */
.brand { display: inline-flex; align-items: center; min-height: 44px; font: 700 26px/1 var(--sans); letter-spacing: -.045em; text-decoration: none; color: var(--ink); }
.brand .dot { color: var(--tomato); }
.brand:hover { color: var(--ink); }
.nav { display: none; gap: 28px; margin-left: auto; font-size: 15px; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--ink); }
.header-cta { margin-left: auto; }
.nav + .header-cta { margin-left: 16px; } /* badge clear space */
@media (min-width: 900px) { .nav { display: flex; } }
@media (max-width: 599px) { .header-cta { display: none; } } /* the hero carries the CTA on phones */

/* Language codes: plain text, no flags */
.langs { display: flex; flex-wrap: wrap; gap: 0 4px; font: 400 14px/1.4 var(--sans); letter-spacing: .04em; }
.langs a { text-decoration: none; color: var(--muted); display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding-right: 6px; } /* 44px tap targets */
.langs a[aria-current] { color: var(--ink); font-weight: 700; }

/* ---------- App Store button ---------- */
/* Apple's App Store badge, sized like Mealime's (measured 21.10: 180x55 on desktop, 157x48 at 390px wide,
   ~45px under the hero text, 48px under the final-CTA text). >= 40px tall and >= 1/4-height clear space (Apple). */
.store-badge { display: inline-block; line-height: 0; touch-action: manipulation; }
.store-badge img { height: 48px; width: auto; display: block; }
.store-badge.store-sm img { height: 40px; }
@media (min-width: 900px) { .store-badge img { height: 55px; } .store-badge.store-sm img { height: 40px; } }
.final .store-badge { margin-top: 12px; }
.cta-note { margin: 14px 0 0; font-size: 15px; color: var(--muted); }

/* ---------- Common ---------- */
section { padding: 120px 0; }
@media (max-width: 759px) { section { padding: 72px 0; } .cook { padding-top: 56px; } } /* phones: tighter rhythm */
.kicker { display: block; font: 700 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tomato-ink); margin-bottom: 18px; }
.h2 { font-size: clamp(40px, 6.4vw, 72px); max-width: 15em; }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 30em; margin-top: 22px; }

/* ---------- Phone (CSS frame around a real screenshot) ---------- */
.phone { position: relative; width: min(320px, 76vw); aspect-ratio: 9 / 19.3; border-radius: 52px; background: #0E0D0B; padding: 11px; box-shadow: 0 50px 90px -40px rgba(23, 20, 15, .45), 0 0 0 1px rgba(0, 0, 0, .25); }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: var(--paper); }
.phone .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .8s ease; }
.phone .screen img.on { opacity: 1; }
.phone::after { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 30%; height: 28px; border-radius: 20px; background: #0E0D0B; } /* Dynamic Island */

/* ---------- Hero: one headline, one line, one button, one phone ---------- */
.hero { padding: 48px 0 96px; }
.hero .wrap { display: grid; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(44px, min(7.4vw, 10.5vh), 92px); line-height: .96; letter-spacing: -.05em; }
.mark { color: var(--tomato); }
.hero-cta { margin-top: 0; }
.hero-sub { font-size: clamp(19px, 2.2vw, 23px); color: var(--muted); max-width: 24em; margin: 28px 0 36px; }
.hero-art { display: grid; place-items: center; }
@media (max-width: 899px) { .hero .wrap { gap: 32px; } } /* phone closer to the button on phones */
@media (min-width: 900px) {
  /* Phone top lines up with the headline, and the whole phone (bottom bezel too) fits above the fold on
     laptop screens (MacBook Air 1440x740 ... 1440x900): its height is capped at viewport - header - paddings. */
  .hero { padding: 40px 0 120px; }
  .hero .wrap { grid-template-columns: 1.15fr .85fr; align-items: start; }
  .hero-art { place-items: start center; }
  .hero h1 { margin-top: -6px; } /* optical: cap height vs the phone's top edge */
  /* Height-driven: header 64 + top padding 40 + phone + >= 64px air must fit the viewport (MacBook Air 1470x800,
     1440x740, 1280x720). Width follows from the aspect ratio. */
  .hero .phone { height: min(640px, max(440px, calc(100vh - 168px))); width: auto; }
}

/* ---------- Dish photo marquee ---------- */
.strip { overflow: hidden; padding-bottom: 8px; }
.strip ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; width: max-content; animation: marquee 80s linear infinite; }
.strip:hover ul { animation-play-state: paused; }
.strip li { width: clamp(220px, 24vw, 300px); flex: none; }
.strip figure { margin: 0; }
.strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; }
.strip figcaption { font-size: 14px; margin-top: 10px; color: var(--muted); }
@keyframes marquee { to { transform: translateX(calc(-50% - 8px)); } }

/* ---------- Bento grid ---------- */
.bento { display: grid; gap: 16px; margin-top: 56px; }
@media (min-width: 760px) { .bento { grid-template-columns: 1fr 1fr; } } /* tablets: 2 equal tiles per row */
@media (min-width: 1000px) { .bento { grid-template-columns: repeat(3, 1fr); } .tile.wide { grid-column: span 2; } }
.tile { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 500px; display: flex; flex-direction: column; transition: transform .4s var(--ease); }
.tile:hover { transform: translateY(-4px); }
.t-red { background: var(--t-red); } .t-yellow { background: var(--t-yellow); } .t-green { background: var(--t-green); }
.tile-text { padding: 32px 32px 0; }
.tile h3 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.03em; }
.tile p { margin: 10px 0 0; color: var(--muted); font-size: 17px; max-width: 24em; }
/* App screen crop: the top of a real screenshot rising from the bottom of the tile */
.tile .shot { margin: 28px auto 0; width: min(84%, 320px); flex: 1; min-height: 300px; position: relative; border-radius: 30px 30px 0 0; overflow: hidden; border: 8px solid #0E0D0B; border-bottom: 0; box-shadow: 0 30px 50px -30px rgba(23, 20, 15, .4); }
.tile .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tile .photo { margin-top: 28px; flex: 1; min-height: 240px; position: relative; }
.tile .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1000px) { /* side-by-side only when the wide tile has room for text + a 320px phone */
  .tile.wide { flex-direction: row; align-items: stretch; }
  .tile.wide .tile-text { padding: 40px; align-self: center; flex: 1; }
  .tile.wide .shot { margin: 40px 40px 0 0; width: 320px; flex: none; }
}

/* ---------- Receipt demo (signature) ---------- */
.receipt-sec { background: var(--sand); }
.receipt-sec .wrap { display: grid; gap: 56px; align-items: start; }
@media (min-width: 900px) { .receipt-sec .wrap { grid-template-columns: 1fr 1fr; } .receipt-copy { position: sticky; top: 120px; } }
.chips { margin: 32px 0 0; padding: 0; border: 0; min-width: 0; }
.chips legend { font-size: 14px; color: var(--muted); margin-bottom: 12px; padding: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 400 16px/1 var(--sans); padding: 13px 16px; min-height: 44px; border-radius: 999px; border: 1px solid #D9CFC0; background: var(--paper); color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; white-space: nowrap; flex: none; }
@media (hover: hover) { .chip:hover { border-color: var(--ink); } }
.chip:active { background: #EFE6D8; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; transition: none; } /* instant feedback on tap */
/* Phones: the copy block dissolves into the grid so the chips sit right ABOVE the receipt as one swipeable row,
   sticky under the header while the receipt is on screen (a tap visibly reprints it). Note goes below. */
@media (max-width: 899px) {
  .receipt-sec .wrap { gap: 0; }
  .receipt-copy { display: contents; }
  .receipt-copy > * { order: 0; }
  .receipt-sec .chips { order: 1; position: sticky; top: 64px; z-index: 5; background: var(--sand); margin: 24px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter); }
  .chips legend { float: left; width: 100%; margin-bottom: 8px; }
  .chip-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); clear: both; }
  .chip-row::-webkit-scrollbar { display: none; }
  .receipt-stage { order: 2; margin-top: 16px; }
  .receipt-note { order: 3; }
}
.receipt-note { font-size: 14px; color: var(--muted); margin-top: 24px; max-width: 32em; }
.receipt-stage { position: relative; display: grid; justify-items: center; }
.receipt { position: relative; width: min(100%, 440px); background: var(--paper); padding: 32px 28px 42px; border-radius: 24px 24px 6px 6px; font: 400 15px/1.45 var(--mono); box-shadow: 0 30px 60px -34px rgba(23, 20, 15, .4);
  /* Perforated bottom edge: semicircle bites every 12px, like CWReceiptViews in the app */
  -webkit-mask: radial-gradient(circle 5px at 6px 100%, transparent 98%, #000) 0 0 / 12px 100% repeat-x;
          mask: radial-gradient(circle 5px at 6px 100%, transparent 98%, #000) 0 0 / 12px 100% repeat-x; }
.r-head { border-bottom: 1.5px dashed var(--leader); padding-bottom: 14px; margin-bottom: 12px; }
.r-store { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.r-title { font: 700 34px/1.1 var(--serif); letter-spacing: -.01em; margin-top: 6px; }
.r-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.r-lines { list-style: none; margin: 0; padding: 0; }
.r-line { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; }
.r-line .l { min-width: 0; }
.r-line .dots { flex: 1; border-bottom: 2px dotted var(--leader); transform: translateY(-4px); min-width: 16px; }
.r-line .v { white-space: nowrap; font-weight: 700; }
.r-sum { border-top: 1.5px dashed var(--leader); margin-top: 10px; padding-top: 10px; }
.r-sum .r-line .v { font-size: 17px; }
.r-sum .muted .l, .r-sum .muted .v { color: var(--muted); font-weight: 400; }
.r-sum .muted .v { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.stamp { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 18px; padding: 8px 14px; border: 2.5px solid var(--green); border-radius: 10px; color: var(--green-ink); font: 700 19px/1.15 var(--mono); text-transform: uppercase; transform: rotate(-3deg); }
.stamp .num { white-space: nowrap; }
.basket { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px; min-height: 90px; margin-top: 20px; width: min(100%, 440px); }
.basket img { width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(23, 20, 15, .18)); }
@media (max-width: 480px) {
  .basket img { width: 52px; height: 52px; }
  .stamp { font-size: 16px; }
  .receipt { padding: 26px 18px 38px; font-size: 14px; }
}
.replay { min-height: 44px; margin-top: 12px; background: none; border: 0; font: 400 15px var(--sans); text-decoration: underline; cursor: pointer; color: var(--muted); padding: 8px; }
/* Printing: lines appear one by one (JS sets --i), the stamp lands last, the week's packs drop into the basket */
.printing .r-line, .printing .r-head { animation: print .3s steps(4, end) both; animation-delay: calc(var(--i, 0) * 130ms); }
.printing .stamp { animation: stamp .45s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: var(--stamp-delay, 1.6s); }
.printing .basket img { animation: drop .6s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(var(--stamp-delay, 1.6s) + var(--i, 0) * 100ms); }
@keyframes print { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.8) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(-3deg); } }
@keyframes drop { from { opacity: 0; transform: translateY(-80px); } to { opacity: 1; transform: none; } }

/* ---------- How it works: one compact block (3 steps beside one phone; on phones just 3 stacked steps) ---------- */
.how-grid { display: grid; gap: 40px; margin-top: 40px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.step { padding: 24px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; }
.step h3 { font-size: clamp(26px, 3vw, 36px); }
.step h3::before { counter-increment: s; content: "0" counter(s); display: block; font: 700 14px/1 var(--sans); letter-spacing: .08em; color: var(--tomato-ink); margin-bottom: 12px; }
.step p { margin: 10px 0 0; color: var(--muted); font-size: 18px; max-width: 24em; }
.step .step-shot { display: none; }
.how-phone { display: none; }
@media (min-width: 900px) {
  /* Steps sit centred next to the phone (no sticky, no tall scroll-driven steps = no empty gaps).
     The phone cycles the 3 screens; the matching step is highlighted, hover picks one. */
  .how-grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .step { cursor: default; opacity: .45; transition: opacity .4s; }
  .step.active { opacity: 1; }
  .how-phone { display: grid; place-items: center; }
}

/* ---------- Cook strip: phone with the real cook-mode screen + swipeable step cards ---------- */
.cook { padding-top: 96px; }
.cook-grid { display: grid; gap: 40px; align-items: center; }
.cook-phone { display: none; }
.cook-main { min-width: 0; }
.cook-strip { list-style: none; margin: 32px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 18px; display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-padding: 0 var(--gutter); }
.cook-strip::-webkit-scrollbar { display: none; }
.cook-card { flex: 0 0 min(76%, 280px); scroll-snap-align: start; background: var(--paper); border-radius: 24px; overflow: hidden;
  box-shadow: 0 24px 40px -30px rgba(23, 20, 15, .45); display: flex; flex-direction: column; }
.cc-pic { position: relative; }
.cc-pic img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cc-body { padding: 16px 18px 20px; }
.cc-n { font: 700 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tomato-ink); }
.cc-body p { margin: 8px 0 0; font-size: 16px; line-height: 1.45; }
.timer-chip { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); line-height: 1.25 !important; background: rgba(14, 13, 11, .86); color: #fff; font: 600 13px/1 var(--sans); padding: 9px 12px; border-radius: 999px; }
.cook-cta { margin-top: 24px; }
/* Cards slide in one after another once the strip is on screen */
.js .cook-strip .cook-card { opacity: 0; transform: translateX(28px); transition: opacity .5s ease, transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.js .cook-strip.in .cook-card { opacity: 1; transform: none; }
@media (min-width: 900px) {
  .cook-grid { grid-template-columns: 340px 1fr; gap: 64px; }
  .cook-phone { display: grid; place-items: center; }
  .cook-phone .phone { width: min(300px, calc((100vh - 170px) * 9 / 19.3)); }
  .cook-strip { margin-right: 0; padding-right: 0; }
}

/* ---------- Trust facts under the final CTA (true facts only, see i18n trust1-4) ---------- */
.trust { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.trust li { font-size: 15px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; }

/* ---------- /mealime-alternative/ ---------- */
.ma-hero { padding: 64px 0 96px; }
.ma-hero h1 { font-size: clamp(40px, 6.4vw, 72px); max-width: 14em; }
.ma-dishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
.ma-dishes img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.ma-cols { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 760px) { .ma-cols { grid-template-columns: 1fr 1fr; } }
.ma-col { background: var(--t-green); border-radius: var(--radius); padding: 28px 32px; }
.ma-col.new { background: var(--t-yellow); }
.ma-col h2 { font-size: clamp(24px, 2.6vw, 30px); }
.ma-col ul { margin: 14px 0 0; padding-left: 20px; }
.ma-col li { margin: 8px 0; font-size: 18px; }
.ma-honest { margin: 28px 0; color: var(--muted); font-size: 17px; max-width: 36em; }
.ma .fine { margin-top: 24px; font-size: 14px; color: var(--muted); }
.ma-link { margin-top: 16px !important; font-weight: 700; }

/* ---------- Coming from Mealime ---------- */
.switch { padding: 40px 0; }
.switch .box { background: var(--t-yellow); border-radius: var(--radius); padding: clamp(28px, 5vw, 64px); display: grid; gap: 24px; }
@media (min-width: 900px) { .switch .box { grid-template-columns: .8fr 1.2fr; gap: 56px; } }
.switch h2 { font-size: clamp(32px, 4.4vw, 52px); }
.switch p { margin: 0; }
.switch ul { margin: 16px 0 0; padding-left: 22px; }
.switch li { margin: 6px 0; }
.switch .fine { font-size: 14px; color: var(--muted); margin-top: 16px; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-top: 48px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 24px 48px 24px 0; position: relative; font: 700 clamp(19px, 2.2vw, 22px)/1.3 var(--sans); letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px; background: var(--ink); transition: transform .3s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq .a { padding: 0 0 26px; color: var(--muted); max-width: 42em; }

/* ---------- Final CTA ---------- */
.final { background: var(--tomato); color: #fff; padding: 140px 0; }
.final h2 { font-size: clamp(48px, 9vw, 104px); line-height: .96; letter-spacing: -.05em; max-width: 11em; }
.final p { font-size: 21px; margin: 24px 0 36px; }
.final .cta-note { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { padding: 72px 0 40px; font-size: 15px; }
.site-footer .cols { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.site-footer h2 { font: 700 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; } /* 44px tap targets */
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .tagline { margin-top: 14px; color: var(--muted); }
.site-footer .fine { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ---------- Legal / document pages ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: 48px var(--gutter) 80px; font-size: 17px; }
.doc h1 { font-size: clamp(40px, 6vw, 60px); margin-bottom: 14px; }
.doc h2 { font-size: 26px; letter-spacing: -.02em; margin: 48px 0 12px; line-height: 1.15; scroll-margin-top: 80px; }
.doc h3 { font-size: 20px; letter-spacing: -.01em; margin: 28px 0 8px; line-height: 1.2; }
.doc ul, .doc ol { padding-left: 22px; margin: 0 0 1em; }
.doc li { margin: 5px 0; }
.doc a { color: var(--tomato-ink); }
.doc .muted { color: var(--muted); font-size: 15px; }
.doc .summary { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 26px 28px 12px; margin: 28px 0 10px; }
.doc .summary h2 { margin-top: 0; font-size: 22px; }
.doc .callout { background: var(--t-yellow); border-radius: 16px; padding: 18px 22px 4px; margin: 20px 0; }
.doc .table-wrap { overflow-x: auto; margin: 10px 0 18px; -webkit-overflow-scrolling: touch; }
.doc table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 15px; background: var(--paper); }
.doc th, .doc td { border: 1px solid var(--line); padding: 10px; text-align: left; vertical-align: top; }
.doc th { background: var(--sand); }
.doc .binding { font-size: 14px; color: var(--muted); background: var(--paper); border: 1px dashed var(--leader); border-radius: 12px; padding: 12px 16px; }
mark.owner { background: var(--yellow); color: var(--ink); padding: 0 4px; border-radius: 4px; font-weight: 700; }
.nf { padding: 96px var(--gutter) 120px; max-width: 900px; margin: 0 auto; }
.nf h1 { font-size: clamp(48px, 9vw, 104px); line-height: .96; letter-spacing: -.05em; }
.nf ul { margin-top: 24px; }

/* ---------- Motion: fade + slide up 12px, 400ms, staggered via --d (only when JS runs) ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Reduced motion: everything static, final states shown ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .strip { overflow-x: auto; }
  .strip ul { width: auto; }
  .strip li[aria-hidden="true"] { display: none; }
  .tile:hover { transform: none; }
  .js .cook-strip .cook-card { opacity: 1; transform: none; }
}
@media print { .site-header, .site-footer, .strip { display: none; } }