/* =========================================================
   Crumble — landing styles
   Layout & palette follow the Memecoin template (green / lime),
   illustrations are Crumble originals.
   ========================================================= */
@font-face {
  font-family: "Dela Gothic One";
  src: url("fonts/dela-gothic-one-latin.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
}

:root {
  --green: #3C574B;
  --green-2: #2E4A3E;
  --deep: #0F2C23;
  --deep-2: #163A2E;
  --lime: #E2FEA5;
  --cream: #F8FFE8;
  --card: #E4EBD5;
  --butter: #FCFAC2;
  --ink: #0B0B0B;
  --orange: #FF8717;
  --mint: #79CC9E;
  --mint-2: #2F8C5B;
  --purple: #5A0CE1;
  --lavender: #B9A4E9;
  --cherry: #C8102E;

  --f-display: "Dela Gothic One", "Arial Black", sans-serif;
  --f-body: "Bricolage Grotesque", system-ui, sans-serif;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 80px);
  --r-xl: 64px;
  --r-lg: 40px;
  --r-md: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--green);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* film grain over everything */
/* film grain on section backgrounds only (cards, text and mascots stay clean).
   Each section gets a noise layer between its background and its content. */
main > section, footer { position: relative; }
/* anchor jumps stop below the fixed nav bar instead of under it */
main > section[id] { scroll-margin-top: 84px; } /* nav bar bottom edge sits at 80px */
main > section::before, footer::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("img/grain-1.png") 0 0 / 96px 96px repeat;
  opacity: .09;
  animation: grain .34s steps(1) infinite;
}
main > section > :not(.burst), footer > .wrap { position: relative; z-index: 2; }
.burst { z-index: 0; }
.foot-char, .foot-meta { z-index: 3; }
@keyframes grain {
  0%   { background-image: url("img/grain-1.png"); background-position: 0 0; }
  25%  { background-image: url("img/grain-2.png"); background-position: -37px 19px; }
  50%  { background-image: url("img/grain-3.png"); background-position: 23px -41px; }
  75%  { background-image: url("img/grain-4.png"); background-position: -13px -29px; }
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); container-type: inline-size; }
/* big display words are sized by the container width (cqi), so they never spill out on wide screens */
.display { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: .95; margin: 0; letter-spacing: -.01em; }
.lime { color: var(--lime); }
.kicker { font-weight: 700; font-size: 18px; color: var(--cream); margin: 0 0 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 30px; border-radius: 100px;
  background: var(--butter); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  font-weight: 700; font-size: 18px; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn.lg { height: 76px; padding: 0 48px; font-size: 26px; }
.btn.sm { height: 42px; padding: 0 18px; font-size: 15px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--cream); }
.link-arrow:hover { color: var(--lime); }
.soon {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em;
  padding: 3px 7px; border-radius: 100px; background: var(--ink); color: var(--lime); vertical-align: middle;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; left: 0; right: 0; top: 16px; z-index: 50;
}
.nav-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 8px 0 20px; border-radius: 100px;
  background: var(--cream); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 24px; }
.brand img { width: 40px; }
.nav-right { display: flex; align-items: center; gap: 8px; }
/* social marks sit in ink discs, like the badges in the "Get it now on" pills */
.icon {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: var(--cream);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.icon:hover { background: var(--lime); color: var(--ink); transform: translateY(-2px); }
.icon svg { width: 17px; height: 17px; }
.menu-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--cream); display: grid; place-items: center; transition: transform .15s ease; }
.menu-btn:hover { transform: rotate(90deg); }
.menu-btn svg { width: 20px; height: 20px; }

/* ---------- Full-screen menu ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: var(--deep); color: var(--cream);
  display: flex; flex-direction: column; padding: 16px 0 40px;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.sheet.open { opacity: 1; visibility: visible; }
.sheet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("img/grain-1.png") 0 0 / 96px 96px repeat; opacity: .07;
  animation: grain .34s steps(1) infinite;
}
.sheet > * { position: relative; z-index: 2; }
.sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; flex: none; }
.sheet-bar .brand { color: var(--lime); }
.sheet .menu-btn { background: rgba(248,255,232,.1); color: var(--cream); }
.sheet .menu-btn:hover { background: var(--lime); color: var(--ink); }
.sheet-links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(4px, 1.6vh, 14px); padding-top: 24px; padding-bottom: 24px; }
.sheet-links a {
  display: flex; align-items: baseline; gap: clamp(12px, 2vw, 26px);
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: 1.06;
  font-size: min(clamp(30px, 8.5vw, 74px), 8.4vh); color: var(--lime);
  opacity: 0; transform: translateY(30px);
  transition: transform .55s cubic-bezier(.22,.9,.24,1), opacity .45s ease, color .15s ease;
  transition-delay: calc(var(--i, 0) * 55ms + 80ms);
}
.sheet.open .sheet-links a { opacity: 1; transform: none; }
.sheet-links a:hover { color: var(--cream); }
.sheet-links i { font-family: var(--f-body); font-style: normal; font-weight: 700; font-size: 14px; opacity: .5; flex: none; }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; flex: none; }
.sheet-social { display: flex; gap: 10px; }
.sheet .icon { width: 46px; height: 46px; background: rgba(248,255,232,.1); color: var(--cream); }
.sheet .icon svg { width: 20px; height: 20px; }
.sheet .icon:hover { background: var(--lime); color: var(--ink); }
/* mascot sits beside the links, well clear of the Launch App button */
.sheet-char { position: absolute; right: clamp(16px, 5vw, 90px); top: 50%; transform: translateY(-46%); width: min(290px, 28vw); opacity: .16; z-index: 1; pointer-events: none; }
@media (max-width: 1023px) { .sheet-char { display: none; } }
html.locked, html.locked body { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, #24443A 0%, #1B3A30 60%, var(--green-2) 100%);
  padding: 170px 0 0; text-align: center;
}
.burst { position: absolute; left: 50%; top: 40px; width: 1300px; max-width: none; transform: translateX(-50%); opacity: .9; pointer-events: none; will-change: transform; }
.hero-inner { position: relative; z-index: 2; }
.hero .intro { font-weight: 600; letter-spacing: .04em; color: var(--cream); margin: 0 0 8px; }
.hero h1 { font-size: clamp(44px, 13.5vw, 176px); font-size: clamp(40px, 15cqi, 176px); color: var(--lime); }
.hero .sub { font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; margin: 18px auto 30px; max-width: 640px; }
.hero-ctas { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }

.hero-stage { position: relative; height: 200px; margin-top: 30px; }
.hero-mascot { position: absolute; right: 7%; top: -250px; width: clamp(220px, 24vw, 340px); z-index: 3; transform: rotate(6deg); }
.bubble {
  position: absolute; right: calc(7% + clamp(190px, 21vw, 300px)); top: -220px; z-index: 4;
  background: var(--ink); color: var(--lime); font-family: var(--f-display); font-size: clamp(20px, 2.4vw, 30px);
  padding: 12px 22px; border-radius: 14px;
}
.bubble::after { content: ""; position: absolute; right: 26px; bottom: -14px; border: 8px solid transparent; border-top: 8px solid var(--ink); border-right-color: var(--ink); }
.ca-tab {
  /* thin lime tab sitting on the card's top edge (its bottom border merges with the
     card border). Its left edge must clear the card's corner radius (--r-xl), or it
     hangs over the curve where there is no straight edge to sit on. */
  position: absolute; left: max(76px, var(--gutter)); bottom: 100%; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 112px);
  background: var(--lime); color: var(--ink); border: 2.5px solid var(--ink); border-bottom-width: 2.5px;
  border-radius: 14px 14px 0 0; padding: 5px 16px; font-size: 13px; font-weight: 700; line-height: 1.3;
  /* bottom:100% already lands on the card's padding box, i.e. 2.5px in — exactly the
     thickness of the card border — so the two borders merge into one line. Any
     negative margin on top of that pushes the tab onto the card itself. */
  margin-bottom: 0;
}
.ca-tab:hover { background: var(--butter); }
.ca-tab span { white-space: nowrap; flex: none; }
.ca-tab code { min-width: 0; font-family: var(--f-body); font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-tab svg { width: 14px; height: 14px; flex: none; }

/* ---------- Get it now on ---------- */
.getit { background: var(--green-2); padding: 0 0 120px; }
.getit-card {
  position: relative; background: var(--card); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: var(--r-xl); padding: 56px 0 44px;
  margin: 0;
}
.getit-card h2 { font-size: clamp(44px, 6vw, 80px); padding: 0 var(--gutter); display: flex; gap: 20px; align-items: flex-start; }
.getit-card h2 svg { width: 60px; flex: none; margin-top: -6px; }
/* No bottom radius here: the row sits 44px above the card's bottom edge, so there is
   nothing to clip against — a 64px radius on a ~70px tall row just ate the corner
   pills and left flat stubs behind. The side fade is the mask, and stays. */
.pills { margin-top: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pills-track { display: flex; gap: 18px; width: max-content; padding-bottom: 6px; animation: scroll 45s linear infinite; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; height: 64px; padding: 0 30px; border-radius: 100px;
  background: var(--card); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  font-weight: 700; font-size: 18px; color: var(--ink);
}
.pill:hover { background: var(--lime); }
.pill-logo { width: 36px; height: 36px; margin-left: -12px; object-fit: contain; flex: none; }

/* ---------- About ---------- */
.about { background: linear-gradient(180deg, var(--green-2), var(--green)); padding: 40px 0 120px; }
.about h2 { font-size: clamp(44px, 7vw, 100px); text-align: center; color: var(--lime); margin-bottom: 44px; }
.about-grid { display: grid; grid-template-columns: 1fr 1.05fr 1fr; align-items: center; }
.about-card { border: 2.5px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; }
.about-left { background: var(--card); color: var(--ink); padding: 34px 34px 0; margin-right: -40px; min-height: 440px; display: flex; flex-direction: column; }
.about-left h3 { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; margin: 0 0 20px; text-transform: uppercase; }
.about-left img { margin-top: auto; width: 110%; max-width: none; margin-left: -8%; }
.about-mid { position: relative; z-index: 2; background: var(--deep); color: var(--lime); padding: 34px 32px; min-height: 500px; display: flex; flex-direction: column; gap: 14px; font-size: 17px; font-weight: 500; }
.about-mid p { margin: 0; }
.about-mid .ctas { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; }
.about-right { background: var(--deep); color: var(--cream); margin-left: -40px; min-height: 440px; padding: 34px 34px 34px 70px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.about-right .gh { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; }
.about-right .gh span { width: 44px; height: 44px; border-radius: 50%; background: var(--cream); color: var(--ink); display: grid; place-items: center; }
.about-right .gh svg { width: 22px; height: 22px; }
.code {
  margin: 0; overflow-x: auto; max-width: 100%;
  font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; line-height: 1.7; color: var(--lime);
  background: rgba(0,0,0,.25); border: 1.5px solid rgba(226,254,165,.25); border-radius: 18px; padding: 18px;
}
.code .c { color: #8DB39E; } .code .k { color: var(--orange); } .code .s { color: var(--butter); }
.about-right img { width: 150px; position: absolute; right: 24px; bottom: 22px; transform: rotate(8deg); }

/* ---------- Recipe (3 arch cards) ---------- */
.recipe { background: var(--deep); padding: 120px 0; }
.sec-head { text-align: center; margin-bottom: 40px; position: relative; }
.sec-head h2 { font-size: clamp(44px, 7vw, 96px); color: var(--lime); }
.bolt { position: absolute; width: 26px; left: calc(50% + 96px); top: -44px; transform: rotate(12deg); }
.arches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.arch-img { background: var(--card); border-radius: 300px 300px 0 0; aspect-ratio: 1 / 1.1; display: grid; place-items: center; overflow: hidden; }
.arch-img img { width: 78%; }
.arch h3 { font-family: var(--f-display); font-weight: 400; color: var(--lime); font-size: 30px; line-height: 1.05; margin: 16px 0 8px; }
.arch p { margin: 0; color: var(--cream); font-weight: 500; }

/* ---------- A year of crumbs ---------- */
.crumbs { background: var(--green); padding: 110px 0 90px; position: relative; overflow-x: clip; }
.crumbs .kicker { position: relative; z-index: 0; }
/* Sized to keep "A year of crumbs" on ONE line: the stage below is pulled up by
   -7cqi, so a second line lands straight under the mascot. */
.crumbs h2 { font-size: clamp(30px, 6.4vw, 104px); font-size: clamp(28px, 7.2cqi, 104px); color: var(--lime); text-align: center; position: relative; z-index: 0; white-space: nowrap; }
@media (max-width: 560px) { .crumbs h2 { white-space: normal; } }
/* mascot overlaps the headline and slides up out of the card as you scroll (driven by --rise in main.js) */
.crumbs-stage { position: relative; margin-top: -2cqi; }
.crumbs-char {
  width: clamp(180px, 29cqi, 360px); margin: 0 auto -14%; position: relative; z-index: 1;
  transform: translateY(calc((1 - var(--rise, 0)) * 58%)); will-change: transform;
}
.heart { position: absolute; width: clamp(40px, 6cqi, 76px); right: 11%; top: 11cqi; transform: rotate(14deg); z-index: 1; }
.crumbs-card { position: relative; z-index: 2; background: var(--deep); border: 2.5px solid var(--ink); border-radius: var(--r-xl); overflow: hidden; padding-bottom: 30px; }
.crumbs-strip { overflow: hidden; border-bottom: 2px solid rgba(226,254,165,.12); padding: 18px 0; }
.crumbs-strip .track { display: flex; gap: 36px; width: max-content; animation: scroll 70s linear infinite; font-family: var(--f-display); font-size: 26px; color: var(--cream); }
.crumbs-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 36px; align-items: center; padding: 28px 60px 0; }
.pie { width: min(360px, 100%); margin: 0 auto; aspect-ratio: 1; }
.pie svg { width: 100%; height: 100%; overflow: visible; }
/* slices scale in one by one as the section scrolls past (--r comes from main.js) */
.pie .pop { transform: scale(var(--r, 0)); transform-box: view-box; transform-origin: 500px 500px; }
html.boot .pie .pop { transition: transform .7s cubic-bezier(.34,1.56,.64,1); }
.pie .pct { font-family: var(--f-display); font-size: 44px; fill: var(--ink); pointer-events: none; }
.pie .pct-bg { fill: var(--lime); stroke: var(--ink); stroke-width: 5; pointer-events: none; }
.pie .slice { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pie .slice:hover, .pie .slice.active { transform: translate(var(--dx), var(--dy)); }
.pie .cut { fill: none; stroke: #0B0B0B; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.crumbs-legend { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.crumbs-legend button { order: var(--o, 0); display: flex; align-items: center; gap: 10px; padding: 8px 13px; border-radius: 14px; background: rgba(248,255,232,.08); border: 1.5px solid rgba(226,254,165,.2); color: var(--cream); font-weight: 700; text-align: left; }
.crumbs-legend button:hover, .crumbs-legend button.active { background: rgba(226,254,165,.18); }
.crumbs-legend i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #0B0B0B; flex: none; }
.crumbs-legend b { margin-left: auto; padding-left: 8px; font-family: var(--f-display); font-weight: 400; color: var(--lime); }
/* Two rows side by side: stacked, they push the card past the height at which
   the section can still hold a stop-marker on a 1080 screen. */
.crumbs-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .crumbs-list { grid-template-columns: 1fr; } }
.crumbs-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 18px; background: var(--card); color: var(--ink); font-weight: 700; font-size: 18px; border: 2px solid var(--ink); }
.crumbs-row b { font-family: var(--f-display); font-weight: 400; font-size: 22px; text-align: right; }
.crumbs-note { margin: 10px 0 0; color: var(--cream); opacity: .75; font-size: 15px; }

/* ---------- the calculator's controls ---------- */
.crumbs-controls { display: grid; gap: 10px; margin-bottom: 16px; }
.cr-ctl {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  color: var(--cream); font-weight: 700; font-size: 15px;
}
.cr-ctl > span { opacity: .8; }
.cr-ctl > b {
  font-family: var(--f-display); font-weight: 400; font-size: 19px;
  color: var(--lime); min-width: 64px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* range input, restyled in both engines */
.cr-ctl input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px; margin: 0;
  background: rgba(248, 255, 232, .16);
  border-radius: 100px; outline-offset: 4px;
}
.cr-ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lime); border: 2.5px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .13s ease;
}
.cr-ctl input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lime); border: 2.5px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .13s ease;
}
/* The grip grows under the cursor and again while held, so there is never a
   doubt about which handle the drag is moving. */
.cr-ctl input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.16); }
.cr-ctl input[type="range"]:hover::-moz-range-thumb { transform: scale(1.16); }
.cr-ctl input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.26); }
.cr-ctl input[type="range"]:active::-moz-range-thumb { transform: scale(1.26); }

@media (prefers-reduced-motion: reduce) {
  .cr-ctl input[type="range"]::-webkit-slider-thumb { transition: none; }
  .cr-ctl input[type="range"]::-moz-range-thumb { transition: none; }
}

.cr-seg { display: flex; gap: 6px; }
.cr-seg button {
  flex: 1; padding: 8px 4px; border-radius: 12px;
  background: rgba(248, 255, 232, .08);
  border: 1.5px solid rgba(226, 254, 165, .2);
  color: var(--cream); font: inherit; font-weight: 700;
  transition: background .14s ease, color .14s ease;
}
.cr-seg button:hover { background: rgba(226, 254, 165, .18); }
.cr-seg button.on { background: var(--lime); color: var(--ink); border-color: var(--ink); }

/* ---------- the headline number ---------- */
.crumbs-total {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; color: var(--cream);
}
.crumbs-total b {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(34px, 4.9cqi, 52px); line-height: 1;
  color: var(--lime); font-variant-numeric: tabular-nums;
}
.crumbs-total span { font-size: 15px; opacity: .8; max-width: 22ch; }

/* The fee, stated but not shouted: mint reads cleanly on --deep without
   competing with the lime figure above it. */
.crumbs-fine {
  margin: -8px 0 14px; font-size: 13px; line-height: 1.5;
  color: var(--mint); opacity: .9;
}
.crumbs-fine b { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .cr-ctl { grid-template-columns: 1fr auto; row-gap: 8px; }
  .cr-ctl input[type="range"] { grid-column: 1 / -1; order: 3; }
}

/* ---------- On the menu (the starter basket) ---------- */
.menu-sec { background: var(--green); padding: 120px 0 110px; overflow-x: clip; }
.menu-top { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 20px; }
.menu-sec h2 { font-size: clamp(64px, 11vw, 160px); font-size: clamp(56px, 13cqi, 160px); color: var(--lime); }
.menu-sec .tail { margin: 16px 0 0; font-weight: 600; }
.dishes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.dish {
  background: var(--card); color: var(--ink); border: 2.5px solid var(--ink); border-radius: var(--r-md);
  box-shadow: 0 6px 0 var(--ink); padding: 28px 26px 30px; display: flex; flex-direction: column;
}
.dish-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tick {
  font-family: var(--f-display); font-weight: 400; font-size: 15px; letter-spacing: .03em;
  background: var(--ink); color: var(--cream); border-radius: 100px; padding: 8px 14px 7px; line-height: 1;
}
.pct { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--c, var(--ink)); }
.dish h3 { font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.05; margin: 22px 0 8px; text-transform: uppercase; }
.dish .blurb { margin: 0 0 24px; font-weight: 600; font-size: 16px; }
.dish .bar { margin-top: auto; height: 14px; border-radius: 100px; background: #fff; border: 2px solid var(--ink); overflow: hidden; }
/* the bar fills as the card rides up the screen, and empties on the way back */
.dish .bar i { display: block; height: 100%; width: calc(var(--w, 0%) * var(--r, 0)); background: var(--c, var(--ink)); border-radius: 100px; }
html.boot .dish .bar i { transition: width 1.1s cubic-bezier(.22,.9,.24,1) .2s; }
.dish .cap { margin: 10px 0 0; font-size: 13px; font-weight: 700; opacity: .6; }
/* receipt: one real round-up, to the last cent (19.8 + 9.9*3 = 49.5 = 50.0 - 1%).
   Sits in the right column of .menu-top, where the mascot used to be. */
.slip {
  margin: 0 0 0 auto; width: 100%; max-width: 420px; background: var(--deep); color: var(--cream);
  border: 2px solid rgba(226,254,165,.22); border-radius: 20px; padding: 18px 20px 20px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.2;
}
.slip-head { margin: 0 0 14px; font-family: var(--f-body); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .5; }
.slip-rows { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; align-items: baseline; }
.slip-rows span { opacity: .75; }
.slip-rows b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.slip-rows .lit, .slip-rows b.lit { color: var(--lime); opacity: 1; }
.slip-rows i { font-style: normal; color: var(--lime); opacity: .95; }
.slip-cut { margin: 15px -20px; border-top: 2px dashed rgba(226,254,165,.22); }

/* the rest of the menu + the only call to action in this section */
.menu-more { margin: 26px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 22px 36px; flex-wrap: wrap; }
.more-lead { margin: 0 0 14px; font-weight: 600; font-size: 16px; opacity: .85; max-width: 560px; }
.more-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- House rules ---------- */
.rules { background: var(--deep); padding: 110px 0; }
.rules-head { text-align: center; margin-bottom: 56px; }
.rules-head h2 { font-size: clamp(38px, 9cqi, 104px); color: var(--lime); }
.rules-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rule { background: var(--deep-2); border: 2px solid rgba(226,254,165,.22); border-radius: var(--r-md); padding: 28px 26px 30px; }
.rule .num { display: block; font-family: var(--f-display); font-weight: 400; font-size: 34px; line-height: 1; color: transparent; -webkit-text-stroke: 1.6px var(--lime); }
.rule h3 { font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--lime); margin: 16px 0 10px; text-transform: uppercase; }
.rule p { margin: 0; font-weight: 500; font-size: 16px; color: var(--cream); opacity: .88; }

/* ---------- How to buy ---------- */
.buy { background: var(--green); padding: 120px 0 80px; }
.buy-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.buy-title { grid-column: 1 / -1; background: var(--deep); border-radius: var(--r-lg); padding: 56px 40px; text-align: center; }
.buy-title h2 { font-size: clamp(44px, 9cqi, 124px); color: var(--lime); }
.buy-intro { background: var(--deep); border-radius: var(--r-lg); padding: 40px; font-weight: 700; font-size: 20px; line-height: 1.45; display: flex; flex-direction: column; gap: 20px; min-height: 420px; }
.buy-intro p { margin: 0; }
.buy-intro img { width: min(210px, 55%); margin: auto auto 0; transform: translateY(calc(var(--p, 0) * -22px)); }
.steps-card { background: var(--deep); border-radius: var(--r-lg); padding: 44px; display: flex; flex-direction: column; min-height: 420px; overflow: hidden; touch-action: pan-y; user-select: none; }
.step-body { display: flex; flex-direction: column; gap: 14px; }
.step-body.in-l { animation: stepInL .35s cubic-bezier(.2,.8,.2,1); }
.step-body.in-r { animation: stepInR .35s cubic-bezier(.2,.8,.2,1); }
@keyframes stepInL { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes stepInR { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.steps-card .n { font-family: var(--f-display); font-size: 18px; }
.steps-card h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; margin: 0; color: var(--lime); text-transform: uppercase; }
.steps-card p { margin: 0; max-width: 460px; font-weight: 500; font-size: 18px; }
.steps-foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.steps-foot .link-arrow { font-size: 18px; padding: 6px 10px; }
.dots { display: flex; gap: 10px; justify-content: center; }
.dots i { width: 64px; height: 12px; border-radius: 10px; background: rgba(248,255,232,.25); transition: background .2s ease, width .2s ease; }
.dots i.on { background: var(--lime); }
.buy-cta { grid-column: 1 / -1; width: 100%; height: 104px; margin-top: 8px; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 4cqi, 48px); letter-spacing: .01em; box-shadow: 0 6px 0 var(--ink); border-width: 3px; }
.buy-cta:hover { box-shadow: 0 8px 0 var(--ink); }
.buy-cta .soon { font-family: var(--f-body); font-size: 12px; }

/* ---------- Footer ---------- */
footer { background: var(--green); padding: 40px 0 0; text-align: center; position: relative; overflow: hidden; }
.foot-mark { font-family: var(--f-display); color: var(--lime); font-size: clamp(56px, 12.6vw, 190px); font-size: clamp(40px, 15cqi, 190px); line-height: .9; }
.foot-links { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 36px 0 0; font-weight: 600; font-size: 19px; }
.foot-links a:hover { color: var(--lime); }
.foot-note { margin: 14px 0 0; font-size: 13px; opacity: .8; }
.foot-bottom { --oven: clamp(260px, 30vw, 400px); position: relative; margin-top: 24px; height: calc(var(--oven) * .962 + 24px); }
.hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 300px; }
.foot-char { position: absolute; left: 50%; bottom: 0; width: var(--oven); transform: translateX(-50%); z-index: 2; }
.foot-meta { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 3; display: flex; justify-content: space-between; padding: 0 var(--gutter); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--cream); }

/* ---------- Scroll stop-markers ----------
   A pinned section holds the page still while its row fills in, and lets go only
   when the last card has arrived. main.js turns this on per section, and only
   when the whole section fits on screen — on a phone every section is 2-4 screens
   tall, so there is nothing to pin and the normal scrub is used instead. */
[data-pin].on { height: var(--pin-h); padding-top: 0; padding-bottom: 0; }
[data-pin].on > .pin-inner {
  position: sticky; top: 0; height: 100vh; padding-top: 96px;
  display: flex; flex-direction: column; justify-content: center; gap: 0;
}
[data-pin].on > .pin-inner > .wrap { flex: none; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 200%); opacity: 0; visibility: hidden; z-index: 90; background: var(--ink); color: var(--lime); padding: 14px 22px; border-radius: 100px; font-weight: 700; transition: transform .3s ease, opacity .3s ease, visibility .3s; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------- Reveal: tied to the scroll, not to a trigger ----------
   main.js writes --r (0 → 1) from the scroll position, so scrolling down plays
   an animation and scrolling back up plays it backwards. No transitions here on
   purpose — the scroll is the timeline. html.boot adds them for the first
   screenful only, so the page still animates in on load. */
.reveal { opacity: var(--r, 0); transform: translateY(calc((1 - var(--r, 0)) * 44px)); }
html.boot .reveal { transition: opacity .6s cubic-bezier(.22,.9,.24,1), transform .6s cubic-bezier(.22,.9,.24,1); transition-delay: calc(var(--i, 0) * 90ms); }

/* Headlines: every word rides up from behind its own mask */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
[data-split] .w > i { display: block; font-style: normal; transform: translateY(calc((1 - var(--r, 0)) * 125%)); }
html.boot [data-split] .w > i { transition: transform .75s cubic-bezier(.22,.9,.24,1); }
/* the SVG next to a split headline comes in with it */
[data-split] > svg { opacity: var(--r, 0); transform: scale(calc(.55 + .45 * var(--r, 0))) rotate(calc((1 - var(--r, 0)) * -30deg)); transform-origin: center; }
html.boot [data-split] > svg { transition: opacity .5s ease .3s, transform .6s cubic-bezier(.34,1.56,.64,1) .3s; }

/* Pop-in (speech bubble) */
[data-pop] { opacity: var(--r, 0); transform: scale(calc(.45 + .55 * var(--r, 0))) rotate(calc((1 - var(--r, 0)) * -10deg)); }
html.boot [data-pop] { transition: opacity .3s ease .3s, transform .55s cubic-bezier(.34,1.56,.64,1) .3s; }

@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, [data-split] .w > i, [data-split] > svg, [data-pop], .pie .pop, .dish .bar i { --r: 1; }
  .crumbs-char { transform: none; }
}

/* ---------- Responsive ----------
   Breakpoints follow the original: desktop ≥1200, tablet 810–1199, mobile <810 */
.nav .soon { display: none; }
.lbl-short { display: none; }
@media (max-width: 560px) { .lbl-long { display: none; } .lbl-short { display: inline; } }
@media (max-width: 1199px) {
  .about-grid { grid-template-columns: 1fr; gap: 16px; max-width: 640px; margin: 0 auto; }
  .about-left, .about-right { margin: 0; min-height: 0; }
  .about-left { padding-bottom: 0; }
  .about-left img { width: 80%; max-width: 440px; margin: 10px auto 0; }
  .about-mid { min-height: 0; }
  .about-right { padding: 34px; }
  .about-right img { position: static; width: 130px; margin: 6px auto 0; }
  .crumbs-body { grid-template-columns: 1fr; padding: 40px 40px 0; max-width: 640px; margin: 0 auto; }
  .dishes, .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-mascot { right: 4%; width: clamp(200px, 26vw, 300px); top: -230px; }
  .bubble { right: calc(4% + clamp(170px, 22vw, 250px)); top: -210px; }
}
@media (max-width: 809px) {
  .nav { top: 12px; }
  .nav-bar { height: 58px; padding: 0 6px 0 12px; }
  .brand { font-size: 20px; gap: 8px; }
  .brand img { width: 34px; }
  .nav-right .icon.hide-sm { display: none; }
  .sheet { padding-top: 12px; }
  .sheet-bar { height: 58px; }
  .hero { padding-top: 130px; }
  .hero-stage { height: 314px; margin-top: 24px; }
  .hero-mascot { right: auto; left: 50%; top: -302px; width: 250px; transform: translateX(-50%) rotate(4deg); }
  .bubble { right: 12px; left: auto; top: -284px; font-size: 20px; padding: 10px 16px; }
  .bubble::after { right: auto; left: 18px; border-top-color: var(--ink); border-left-color: var(--ink); border-right-color: transparent; }
  /* card radius drops to 40px here, so the tab clears it at 46px */
  .ca-tab { left: 46px; right: 46px; max-width: none; justify-content: center; padding: 6px 12px; }
  .bolt { left: auto; right: 8%; top: -40px; width: 22px; }
  .getit { padding-bottom: 90px; }
  .getit-card { border-radius: 40px; padding: 40px 0 30px; }
  .getit-card h2 svg { width: 40px; }
  .getit-card h2 { font-size: clamp(34px, 11vw, 64px); gap: 12px; }
  .about { padding-top: 30px; }
  .about h2 { margin-bottom: 40px; }
  .recipe { padding: 90px 0; }
  .buy { padding: 90px 0 60px; }
  footer { padding-top: 30px; }
  .arches { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; gap: 40px; }
  .crumbs { padding: 90px 0 100px; }
  .menu-sec { padding-top: 90px; }
  .menu-top { grid-template-columns: 1fr; }
  .slip { margin: 22px 0 0; max-width: none; }
  .dishes { margin-top: 40px; }
  .menu-more { margin-top: 24px; }
  .rules { padding: 80px 0; }
  .rules-head { margin-bottom: 36px; }
  .buy-grid { grid-template-columns: minmax(0, 1fr); }
  .buy-title { padding: 40px 24px; }
  .buy-title h2 { font-size: clamp(40px, 14cqi, 96px); }
  .buy-intro, .steps-card { min-height: 0; }
  .steps-card { min-height: 340px; }
  .foot-mark { font-size: clamp(40px, 15cqi, 120px); }
  .menu-sec h2 { font-size: clamp(56px, 24cqi, 140px); }
  .rules-head h2 { font-size: clamp(36px, 13cqi, 88px); }
  .foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; justify-items: center; font-size: 17px; margin: 28px 0 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav-right .btn.sm { padding: 0 16px; height: 40px; }
  .pill { height: 54px; font-size: 16px; padding: 0 22px; }
  .pill-logo { width: 30px; height: 30px; margin-left: -8px; }
  .about-left { padding: 28px 24px 0; }
  .about-mid, .about-right { padding: 28px 24px; }
  .about-left h3 { font-size: 26px; }
  .code { font-size: 11.5px; padding: 14px; }
  .crumbs-body { padding: 30px 18px 0; gap: 28px; }
  .crumbs-card { border-radius: 40px; padding-bottom: 36px; }
  .crumbs-strip .track { font-size: 20px; gap: 26px; }
  .crumbs-legend { grid-template-columns: 1fr; }
  .crumbs-legend button { order: 0; }
  .crumbs-row { padding: 14px 16px; font-size: 16px; border-radius: 16px; }
  .crumbs-row b { font-size: 16px; }
  .crumbs-stage { margin-top: 4px; }
  .crumbs-char { width: 72cqi; }
  .dish, .rule { padding: 26px 22px 28px; }
  .dishes, .rules-grid { grid-template-columns: 1fr; gap: 16px; }
  .dish h3 { font-size: 24px; }
  .more-lead { font-size: 15px; }
  .menu-more { display: block; }
  .menu-more .btn { width: 100%; margin-top: 18px; }
  .slip { font-size: 12.5px; padding: 16px 16px 18px; max-width: none; }
  .slip-cut { margin: 13px -16px; }
  .buy-intro { padding: 28px; font-size: 18px; }
  .steps-card { padding: 30px 26px; }
  .dots i { width: 48px; }
  .buy-cta { height: 80px; font-size: clamp(22px, 8cqi, 30px); padding: 0 20px; }
  .foot-meta { position: static; flex-direction: column; gap: 6px; align-items: center; }
  .foot-bottom { --oven: min(76vw, 300px); height: calc(var(--oven) * .962 + 64px); margin-top: 28px; }
  .btn.lg { height: 64px; font-size: 21px; padding: 0 32px; }
}
@media (max-width: 380px) {
  .brand img { display: none; }
  .hero-mascot { width: 220px; top: -274px; }
  .bubble { top: -274px; font-size: 17px; }
  .hero-stage { height: 286px; }
  .ca-tab span { display: none; }
}

/* ---------- Custom cursors ---------- */
/* A 32px base with a 64px @2x. Chrome quietly ignores a cursor bitmap much past
   128px, so the base stays small; PNG rather than SVG because Safari's SVG
   cursor support is unreliable. The plain url() declaration is written first
   and the image-set() ones after it: a browser that cannot parse image-set()
   drops those lines at parse time and keeps the 1x, so there is no @supports
   test to get wrong. The two numbers after the url are the hotspot — the pixel
   that actually does the clicking. */
html, body {
  cursor: url("/assets/cursors/arrow-32.png") 1 0, auto;
  cursor: -webkit-image-set(url("/assets/cursors/arrow-32.png") 1x,
                            url("/assets/cursors/arrow-64.png") 2x) 1 0, auto;
  cursor: image-set(url("/assets/cursors/arrow-32.png") 1x,
                    url("/assets/cursors/arrow-64.png") 2x) 1 0, auto;
}
a, button, summary, label, select, [role="button"],
.pie .slice, .dots i, .ca-tab,
input[type="checkbox"], input[type="radio"] {
  cursor: url("/assets/cursors/point-32.png") 10 0, pointer;
  cursor: -webkit-image-set(url("/assets/cursors/point-32.png") 1x,
                            url("/assets/cursors/point-64.png") 2x) 10 0, pointer;
  cursor: image-set(url("/assets/cursors/point-32.png") 1x,
                    url("/assets/cursors/point-64.png") 2x) 10 0, pointer;
}
/* Typing gets its own beam rather than the system caret. The hotspot is the
   middle of the bar, not a corner: a text cursor that clicks anywhere else
   drops the caret between the wrong two letters. */
input[type="text"], input[type="number"], input[type="email"],
input[type="search"], input[type="tel"], input[type="url"], textarea {
  cursor: url("/assets/cursors/text-32.png") 16 16, text;
  cursor: -webkit-image-set(url("/assets/cursors/text-32.png") 1x,
                            url("/assets/cursors/text-64.png") 2x) 16 16, text;
  cursor: image-set(url("/assets/cursors/text-32.png") 1x,
                    url("/assets/cursors/text-64.png") 2x) 16 16, text;
}
button[disabled], .btn[disabled], .btn.is-disabled { cursor: not-allowed; }

/* The weight sliders get the open glove instead — the gesture is "take hold of
   this", not "click here", and it closes into a fist for as long as you hold it.

   Each vendor pseudo-element gets its own rule on purpose. A selector list is
   thrown away whole when a browser does not recognise one of its parts, so
   putting ::-webkit-slider-thumb and ::-moz-range-thumb in the same list as the
   input would leave every engine with no rule at all. The thumb needs its own
   because a cursor set there beats the one set on the track. */
.cr-ctl input[type="range"] {
  cursor: url("/assets/cursors/palm-32.png") 16 15, grab;
  cursor: -webkit-image-set(url("/assets/cursors/palm-32.png") 1x,
                            url("/assets/cursors/palm-64.png") 2x) 16 15, grab;
  cursor: image-set(url("/assets/cursors/palm-32.png") 1x,
                    url("/assets/cursors/palm-64.png") 2x) 16 15, grab;
}
.cr-ctl input[type="range"]::-webkit-slider-thumb {
  cursor: url("/assets/cursors/palm-32.png") 16 15, grab;
  cursor: -webkit-image-set(url("/assets/cursors/palm-32.png") 1x,
                            url("/assets/cursors/palm-64.png") 2x) 16 15, grab;
}
.cr-ctl input[type="range"]::-moz-range-thumb {
  cursor: url("/assets/cursors/palm-32.png") 16 15, grab;
  cursor: image-set(url("/assets/cursors/palm-32.png") 1x,
                    url("/assets/cursors/palm-64.png") 2x) 16 15, grab;
}
.cr-ctl input[type="range"]:active {
  cursor: url("/assets/cursors/fist-32.png") 14 16, grabbing;
  cursor: -webkit-image-set(url("/assets/cursors/fist-32.png") 1x,
                            url("/assets/cursors/fist-64.png") 2x) 14 16, grabbing;
  cursor: image-set(url("/assets/cursors/fist-32.png") 1x,
                    url("/assets/cursors/fist-64.png") 2x) 14 16, grabbing;
}
.cr-ctl input[type="range"]:active::-webkit-slider-thumb {
  cursor: url("/assets/cursors/fist-32.png") 14 16, grabbing;
  cursor: -webkit-image-set(url("/assets/cursors/fist-32.png") 1x,
                            url("/assets/cursors/fist-64.png") 2x) 14 16, grabbing;
}
.cr-ctl input[type="range"]:active::-moz-range-thumb {
  cursor: url("/assets/cursors/fist-32.png") 14 16, grabbing;
  cursor: image-set(url("/assets/cursors/fist-32.png") 1x,
                    url("/assets/cursors/fist-64.png") 2x) 14 16, grabbing;
}