/* ─── All Things Potato — global styles ───────────────────────────── */
:root{
  --bg-cream:    #FFFBF1;
  --paper:       #FAF1DD;
  --paper-deep:  #F2E5BE;
  --line:        #E5D9B6;
  --line-soft:   #EFE4C5;
  --brown:       #5C3A1E;
  --brown-deep:  #3A2310;
  --muted:       #8A7150;
  --orange:      #D97A2C;
  --orange-deep: #B8611C;
  --green:       #5B8A4F;
  --green-deep:  #41663A;
  --gold:        #C8860A;

  --serif: "Fraunces", "Recoleta", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --maxw: 1320px;
  --pad:  clamp(20px, 4vw, 56px);
  --radius-card: 22px;
  --radius-pill: 999px;

  --ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  scroll-behavior:smooth;
  background:var(--bg-cream);
  color:var(--brown);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  background:var(--bg-cream);
  overflow-x:clip;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--orange);color:#FFFBF1}

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

/* paper noise texture (subtle, used on bg) */
.paper-noise{
  position:relative;
  isolation:isolate;
}
.paper-noise::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.23  0 0 0 0 0.12  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
  opacity:.6;
  pointer-events:none;
  mix-blend-mode:multiply;
  z-index:0;
}
.paper-noise > *{position:relative;z-index:1}

/* layout */
.shell{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
}

/* type */
.display{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:0.95;
  color:var(--brown);
  font-variation-settings:"opsz" 144, "SOFT" 50;
  text-wrap:balance;
}
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}
.lede{
  font-family:var(--sans);
  font-size:clamp(15px,1.35vw,18px);
  color:var(--muted);
  line-height:1.55;
  max-width:46ch;
  text-wrap:pretty;
}

/* progress bar */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:3px;
  background:var(--orange);
  width:0%;
  z-index:9000;
  transition:width .08s linear;
  box-shadow:0 0 12px rgba(217,122,44,.6);
}

/* ─── MASTHEAD HEADER ─────────────────────────────────────────────── */
.masthead{
  position:fixed; top:0; left:0; right:0;
  z-index: 1000;
  background: rgba(255,251,241,.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease-soft), border-color .35s var(--ease-soft), padding .35s var(--ease-soft);
}
.masthead.is-scrolled{
  background: rgba(255,251,241,.95);
  border-bottom-color: var(--line);
}
.masthead-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding: 18px var(--pad) 6px;
  gap: 24px;
  transition: padding .35s var(--ease-soft);
}
.masthead.is-scrolled .masthead-inner{ padding: 12px var(--pad) 6px }

.masthead-side{ display:flex; align-items:center; gap:12px }
.masthead-side.right{ justify-content:flex-end }

.mh-meta{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.mh-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(217,122,44,.5);
  animation: pulse 2.2s infinite;
}

.masthead-mark{
  display:flex; align-items:center; gap: 14px;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1;
  color: var(--brown);
  white-space:nowrap;
  transition: opacity .25s;
}
.masthead-mark:hover{ opacity: .8 }
.mh-word{ display:inline-block }
.mh-word.b{ font-style: italic; font-weight: 500; color: var(--muted) }
.mh-word.c{ color: var(--orange); font-weight: 600 }
.mh-glyph{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper-deep);
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow: inset 0 0 0 1.5px var(--line);
  flex-shrink:0;
}
.mh-glyph img{
  width: 110%; height: 110%; object-fit: cover; object-position: center 25%;
  transform: rotate(-4deg);
}

.mh-cta{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 10px 16px 10px 18px;
  background: var(--brown);
  color: var(--bg-cream);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background .25s, transform .25s var(--ease-out-back);
}
.mh-cta:hover{ background: var(--orange); transform: translateY(-1px) }
.mh-arrow{ display:inline-block; transition: transform .25s var(--ease-soft) }
.mh-cta:hover .mh-arrow{ transform: translate(2px,-2px) rotate(-12deg) }

.masthead-tabs{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 18px;
  padding: 8px var(--pad) 14px;
}
.mh-rule{ height: 1px; background: var(--line); width:100% }
.mh-links{
  display:flex; align-items:center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brown);
  white-space: nowrap;
}
.mh-links a{
  display:inline-block;
  padding: 4px 2px;
  position: relative;
  transition: color .2s;
  font-weight: 500;
}
.mh-links a::after{
  content:"";
  position:absolute;
  left: 2px; right: 2px; bottom: 1px;
  height: 1.5px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-soft);
}
.mh-links a:hover{ color: var(--orange-deep) }
.mh-links a:hover::after{ transform: scaleX(1) }
.mh-sep{ color: var(--line); user-select:none }

@media (max-width: 780px){
  .masthead-inner{ grid-template-columns: auto 1fr auto; padding: 12px var(--pad) 6px }
  .masthead-side.left{ display:none }
  .masthead-mark{ justify-content:flex-start }
  .masthead-tabs{ display:none }
  .mh-cta{ padding: 8px 12px; font-size: 12px }
  .mh-glyph{ width: 26px; height: 26px }
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  border-radius:var(--radius-pill);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:transform .3s var(--ease-out-back), box-shadow .25s, background .2s;
}
.btn-primary{
  background:var(--orange);
  color:#FFFBF1;
  box-shadow:0 12px 30px -8px rgba(217,122,44,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{
  background:var(--orange-deep);
  transform:translateY(-2px);
  box-shadow:0 18px 38px -10px rgba(217,122,44,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-ghost{
  background:transparent;
  color:var(--brown);
  border:1.5px solid var(--line);
}
.btn-ghost:hover{ background:var(--paper); border-color:var(--brown) }

/* generic reveal */
.reveal{ opacity:0; transform:translateY(28px); filter:blur(6px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft), filter .9s var(--ease-soft) }
.reveal.is-in{ opacity:1; transform:none; filter:none }
.reveal-d-1{ transition-delay:.06s }
.reveal-d-2{ transition-delay:.12s }
.reveal-d-3{ transition-delay:.18s }
.reveal-d-4{ transition-delay:.24s }
.reveal-d-5{ transition-delay:.32s }
.reveal-scale{ transform:scale(.94) translateY(20px) }
.reveal-scale.is-in{ transform:none }

/* ─── HERO ───────────────────────────────────────────────────────── */
.hero{
  position:relative;
  padding:140px 0 60px;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:32px;
  align-items:end;
  min-height: 88vh;
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; gap:24px; min-height: auto }
  .hero{ padding-top:120px }
}

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 12px 6px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(250,241,221,.4);
}
.hero-eyebrow .pulse{
  width:7px; height:7px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 0 rgba(217,122,44,.6);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(217,122,44,.55) }
  70%{ box-shadow:0 0 0 12px rgba(217,122,44,0) }
  100%{ box-shadow:0 0 0 0 rgba(217,122,44,0) }
}

.hero-title{
  font-size: clamp(48px, 8.2vw, 124px);
  font-weight: 600;
  font-variation-settings:"opsz" 144, "SOFT" 100;
  margin: 18px 0 28px;
}
.hero-title .swap{
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
  position:relative;
  display:inline-block;
  padding: 0 .04em;
}
.hero-title .underline{
  position:relative;
  display:inline-block;
}
.hero-title .underline::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:.04em;
  height:.14em;
  background: var(--orange);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  animation: underline 1.2s var(--ease-soft) .9s forwards;
}
@keyframes underline{
  to { transform: scaleX(1) }
}

.hero-line{
  display: block;
}
.hero-line .w{
  display:inline-block;
  opacity:0;
  transform: translateY(.7em) rotate(2deg);
  animation: heroIn .9s var(--ease-soft) forwards;
  white-space: pre;
}
.hero-words{
  display:block;
}
.hero-words .w{
  display:inline-block;
  opacity:0;
  transform: translateY(.7em) rotate(2deg);
  animation: heroIn .9s var(--ease-soft) forwards;
}
@keyframes heroIn{
  to{ opacity:1; transform:none }
}

.hero-meta{
  display:flex; flex-wrap:wrap; gap:18px; align-items:center;
  margin-top:18px;
  color:var(--muted);
  font-size:13px;
}
.hero-meta .tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.4);
}
.hero-meta .tag b{ color:var(--brown); font-weight:600 }

.hero-actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:34px;
}

.hero-stage{
  position:relative;
  height: 600px;
  display:flex; align-items:flex-end; justify-content:center;
}
@media (max-width: 980px){
  .hero-stage{ height: 460px }
}
.hero-mascot{
  width: min(100%, 460px);
  filter: drop-shadow(0 38px 50px rgba(92,58,30,.28)) drop-shadow(0 8px 16px rgba(92,58,30,.15));
  animation: mascotFloat 6s ease-in-out infinite, mascotWobble 10s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes mascotFloat{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-14px) }
}
@keyframes mascotWobble{
  0%,100%{ rotate: -1.2deg }
  50%{ rotate: 1.5deg }
}

.orbit{
  position:absolute;
  border-radius:50%;
  border: 1.5px dashed rgba(92,58,30,.18);
  pointer-events:none;
}
.orbit.o1{ inset: 6% 6% auto auto; width: 84%; height: 84%; animation: spin 60s linear infinite }
.orbit.o2{ inset: 18% 18% auto auto; width: 60%; height: 60%; animation: spin 40s linear reverse infinite; border-style:dotted; border-color:rgba(217,122,44,.28) }
@keyframes spin{ to { transform: rotate(360deg) } }

.sticker-disc{
  position:absolute;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow: 0 18px 40px -10px rgba(92,58,30,.25), inset 0 1px 0 rgba(255,255,255,.7);
  animation: discFloat 8s ease-in-out infinite;
}
.sticker-disc img{
  width: 100%; height: 100%; object-fit: contain; padding: 8%;
}
.sticker-disc.d1{ top: 8%; left: -2%; animation-delay: 0s; width: 96px; height: 96px }
.sticker-disc.d2{ top: 30%; right: -4%; animation-delay: -2s; width: 120px; height: 120px }
.sticker-disc.d3{ bottom: 22%; left: 4%; animation-delay: -4s; width: 84px; height: 84px }
.sticker-disc.d4{ bottom: 6%; right: 8%; animation-delay: -6s; width: 100px; height: 100px }
@keyframes discFloat{
  0%,100%{ transform: translate(0,0) rotate(-4deg) }
  50%{ transform: translate(6px,-12px) rotate(4deg) }
}

/* phone mock */
.phone{
  position:relative;
  width: 280px;
  aspect-ratio: 9 / 19.5;
  background:#fff;
  border-radius: 38px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgba(92,58,30,.4), 0 6px 14px rgba(92,58,30,.12), inset 0 1.5px 0 rgba(255,255,255,.9);
  overflow:hidden;
  isolation:isolate;
}
.phone::before{
  content:"";
  position:absolute;
  top:10px; left:50%; transform:translateX(-50%);
  width:90px; height:24px;
  background: var(--brown-deep);
  border-radius: 999px;
  z-index: 3;
}
.phone-inner{
  position:absolute; inset:0;
  padding: 46px 14px 22px;
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, var(--bg-cream), var(--paper));
}

/* ─── MARQUEE ─────────────────────────────────────────────────────── */
.marquee-stack{
  padding: 80px 0 100px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
  overflow:hidden;
}
.marquee-row{
  display:flex;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  padding: 8px 0;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track{
  display:flex;
  gap: 38px;
  padding-right: 38px;
  flex-shrink:0;
  animation: marquee linear infinite;
  will-change: transform;
}
.marquee-row:hover .marquee-track{ animation-play-state: paused }
.marquee-row.r1 .marquee-track{ animation-duration: 60s }
.marquee-row.r2 .marquee-track{ animation-duration: 80s; animation-direction: reverse }
.marquee-row.r3 .marquee-track{ animation-duration: 50s }
@keyframes marquee{
  to{ transform: translateX(-50%) }
}
.marquee-item{
  font-family: var(--serif);
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 500;
  font-style: italic;
  color: var(--brown);
  display:inline-flex; align-items:center; gap: 38px;
  letter-spacing: -.02em;
}
.marquee-item::before{
  content:"";
  display:inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink:0;
}
.marquee-row.r2 .marquee-item::before{ background: var(--green) }
.marquee-row.r3 .marquee-item::before{ background: var(--gold) }

/* ─── MANIFESTO ───────────────────────────────────────────────────── */
.manifesto{
  position:relative;
  padding: 120px 0 80px;
  background: var(--bg-cream);
}
.manifesto-head{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items:end;
  margin-bottom: 80px;
}
@media (max-width:900px){ .manifesto-head{ grid-template-columns: 1fr; gap:24px } }
.manifesto-head h2{
  font-family:var(--serif);
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.025em;
  margin: 14px 0 0;
  color:var(--brown);
}
.manifesto-head h2 i{
  color: var(--orange);
  font-style: italic;
  font-weight: 500;
}

.panels{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px){
  .panels{ grid-template-columns: 1fr; gap: 24px }
}
.panel{
  position:relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 28px 26px 32px;
  min-height: 460px;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.panel:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -20px rgba(92,58,30,.25);
}
.panel-no{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.panel h3{
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing:-.015em;
  margin: 6px 0 14px;
  text-wrap:balance;
}
.panel p{
  font-size: 14.5px;
  color: var(--muted);
  margin:0;
  line-height:1.55;
}
.panel-visual{
  margin-top: 24px;
  flex: 1;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height: 220px;
}

/* recipe-tiles visual */
.tile-grid{
  position:relative;
  width:100%;
  aspect-ratio: 1.05;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap:6px;
}
.tile{
  background: var(--paper-deep);
  border-radius: 8px;
  position:relative;
  overflow:hidden;
  opacity:.65;
  transition: transform .6s var(--ease-soft), opacity .6s;
}
.tile.hi{ background: var(--orange); opacity:1 }
.tile.gr{ background: var(--green); opacity:.95 }
.tile.gd{ background: var(--gold); opacity:.95 }
.tile.bn{ background: var(--brown); opacity:.95 }
.tile.lite{ background: var(--bg-cream); opacity:.95; border:1px solid var(--line) }

/* points counter visual */
.points-card{
  position:relative;
  width: 90%;
  max-width: 320px;
  padding: 26px 24px;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 40px -16px rgba(92,58,30,.2);
}
.points-num{
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--brown);
  font-variant-numeric: tabular-nums;
}
.points-card .pp{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform:uppercase;
  color: var(--orange);
  margin-top: 4px;
}
.points-bar{
  margin-top: 16px;
  height: 8px;
  background: var(--paper-deep);
  border-radius: 999px;
  overflow:hidden;
}
.points-bar i{
  display:block;
  height:100%;
  background: linear-gradient(90deg, var(--orange), var(--gold));
  width: 0;
  transition: width 1.1s var(--ease-soft);
  border-radius: 999px;
}
.is-in .points-bar i{ width: 78% }
.points-trail{
  display:flex; justify-content:space-between;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.points-foot{
  margin-top: 14px;
  font-size: 12px; color: var(--muted);
  display:flex; align-items:center; gap:8px;
}
.points-foot b{ color:var(--brown); font-weight:600 }
.spark{
  display:inline-block; width:6px; height:6px; background:var(--green); border-radius:50%;
  animation: pulse 2s infinite;
}

/* iMessage visual */
.imsg{
  width: 90%; max-width: 280px;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px 14px 18px;
  box-shadow: 0 18px 40px -16px rgba(92,58,30,.2);
  display:flex; flex-direction:column; gap:10px;
}
.imsg .who{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  padding-bottom:6px;
  border-bottom: 1px solid var(--line-soft);
}
.bubble{
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.35;
  position:relative;
}
.bubble.them{ background: var(--paper-deep); color:var(--brown); align-self:flex-start; border-bottom-left-radius:6px }
.bubble.me  { background: var(--orange); color:#FFFBF1; align-self:flex-end; border-bottom-right-radius:6px }
.bubble.sticker{
  background: transparent;
  padding: 0;
  align-self:flex-end;
  max-width: 50%;
}
.bubble.sticker img{
  width:100%; aspect-ratio:1; object-fit:contain;
  background: transparent;
  transform: rotate(4deg) scale(.4);
  opacity: 0;
  transition: transform .9s var(--ease-out-back) .3s, opacity .6s .3s;
}
.is-in .bubble.sticker img{ transform: rotate(-3deg) scale(1); opacity:1 }
.imsg .time{
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:.12em; color:var(--muted);
  text-transform:uppercase;
  align-self:flex-end;
}

/* ─── BENTO ───────────────────────────────────────────────────────── */
.bento{
  padding: 100px 0 120px;
  background: var(--paper);
  position:relative;
}
.bento-head{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:48px;
  margin-bottom: 48px;
  align-items:end;
}
@media (max-width:900px){ .bento-head{ grid-template-columns: 1fr; gap:18px } }
.bento-head h2{
  font-family:var(--serif);
  font-size: clamp(40px, 6vw, 92px);
  line-height:.98;
  letter-spacing:-.025em;
  font-weight:600;
  margin:10px 0 0;
}
.bento-head h2 i{ font-style:italic; color:var(--orange); font-weight:500 }

.bento-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  grid-template-areas:
    "pantry pantry pantry shop  shop  shop"
    "pantry pantry pantry shop  shop  shop"
    "pantry pantry pantry shop  shop  shop"
    "sync   sync   notes  notes quest quest"
    "sync   sync   notes  notes quest quest"
    "level  level  level  level level level"
    "level  level  level  level level level";
}
.c-pantry{ grid-area: pantry }
.c-shop  { grid-area: shop }
.c-sync  { grid-area: sync }
.c-notes { grid-area: notes }
.c-quest { grid-area: quest }
.c-level { grid-area: level }

.bento-grid > .cell{ min-height: 160px }
.c-pantry{ min-height: 460px }
.c-shop{ min-height: 460px }
.c-sync, .c-notes, .c-quest{ min-height: 240px }
.c-level{ min-height: 280px }

@media (max-width: 900px){
  .bento-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "pantry pantry"
      "shop   shop"
      "sync   notes"
      "quest  quest"
      "level  level";
  }
  .c-pantry{ min-height: 440px }
  .c-shop{ min-height: 300px }
}
.cell{
  position:relative;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  gap: 18px;
  transition: transform .35s var(--ease-out-back), box-shadow .35s, background .3s;
}
.cell:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -18px rgba(92,58,30,.22);
}
.cell h3{
  font-family:var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing:-.015em;
  line-height:1.05;
  margin: 6px 0 8px;
  text-wrap:balance;
}
.cell p{
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin:0;
  max-width: 32ch;
}
.cell-tag{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* spans (legacy class names retained as no-ops; layout owned by grid-template-areas) */

/* dark cell */
.cell-dark{
  background: var(--brown);
  color: var(--bg-cream);
  border-color: var(--brown-deep);
}
.cell-dark h3{ color: var(--bg-cream) }
.cell-dark p{ color: rgba(255,251,241,.6) }
.cell-dark .cell-tag{ color: rgba(255,251,241,.55) }

/* pantry checklist */
.pantry-list{
  margin-top: auto;
  display:grid; gap: 8px;
}
.pantry-row{
  display:flex; align-items:center; gap: 12px;
  padding: 11px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size:13.5px;
  font-weight:500;
  transition: background .3s, transform .25s;
}
.pantry-row .chk{
  width:18px; height:18px; border-radius: 6px;
  border: 1.5px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  background: #fff;
  flex-shrink:0;
  transition: background .25s, border-color .25s;
}
.pantry-row.on{ background:var(--paper-deep); border-color: var(--orange) }
.pantry-row.on .chk{ background:var(--orange); border-color: var(--orange); color:#fff }
.pantry-row.on .chk::after{ content:"✓"; font-size:12px; font-weight:700 }
.pantry-row .have{
  margin-left:auto;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.pantry-row.on .have{ color:var(--orange-deep) }

/* shopping chips */
.chips-wrap{
  margin-top: auto;
  display:flex; flex-direction:column; gap: 12px;
}
.chips-row{
  display:flex; flex-wrap:wrap; gap:6px;
}
.chip{
  display:inline-flex; align-items:center; gap: 6px;
  padding: 6px 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight:500;
}
.chip .x{
  font-family:var(--mono); font-size:9px; color:var(--muted);
  letter-spacing: .12em;
}
.chip.merged{
  background: var(--brown);
  color: var(--bg-cream);
  border-color: var(--brown);
}
.chip.merged .x{ color: rgba(255,251,241,.65) }
.arrow-down{
  align-self:center;
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted);
  font-size:14px;
}

/* iCloud sync */
.sync-stage{
  margin-top: auto;
  display:flex; align-items:center; gap: 8px; justify-content:center;
  height: 100%;
}
.mini-phone{
  width: 52px; aspect-ratio: 9/19;
  background: var(--bg-cream);
  border-radius: 10px;
  border: 1px solid var(--line);
  position:relative;
  box-shadow: 0 10px 18px -8px rgba(92,58,30,.25);
}
.mini-phone::before{
  content:""; position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width: 18px; height:4px; background:var(--brown-deep); border-radius:2px;
}
.mini-phone .scr{
  position:absolute; inset: 8px 4px 8px;
  background: linear-gradient(180deg, var(--paper), var(--paper-deep));
  border-radius: 5px;
  overflow:hidden;
}
.mini-phone .scr::after{
  content:""; position:absolute; inset:auto 4px 4px 4px;
  height:60%;
  background: repeating-linear-gradient(180deg, var(--orange) 0 2px, transparent 2px 6px);
  opacity:.4;
  border-radius: 3px;
}
.sync-arc{
  flex:1; position:relative; height: 4px; max-width: 80px;
  background: var(--line);
  border-radius:999px;
  overflow:hidden;
}
.sync-arc i{
  position:absolute; top:0; left:-25%;
  width: 30%; height:100%;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  animation: syncSlide 2.2s linear infinite;
}
@keyframes syncSlide{
  to{ left: 115% }
}
.cloud-badge{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: var(--bg-cream);
  font-size: 14px;
  font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 22px -8px rgba(91,138,79,.55), inset 0 1px 0 rgba(255,255,255,.3);
  font-family: var(--serif);
}

/* notes */
.note{
  position:relative;
  margin-top: auto;
  background: #FFF6DC;
  border: 1px solid var(--line);
  border-radius: 4px 14px 14px 14px;
  padding: 12px 14px;
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  font-weight: 500;
  color: var(--brown-deep);
  box-shadow: 0 10px 22px -10px rgba(92,58,30,.25), 2px 2px 0 var(--line);
  transform: rotate(-1.2deg);
}
.note::before{
  content:"";
  position:absolute;
  left:-4px; top:-4px;
  width: 16px; height: 16px;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
}
.note .writ{
  display:inline-block;
  background-image: linear-gradient(transparent 92%, var(--orange) 92% 96%, transparent 96%);
  background-size: 100% 1.4em;
}

/* quest */
.quest-card{
  margin-top:auto;
  position:relative;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brown), var(--brown-deep));
  color: var(--bg-cream);
  box-shadow: 0 14px 28px -10px rgba(58,35,16,.45);
  display:flex; flex-direction:column; gap:6px;
  overflow:hidden;
}
.quest-card .badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--gold);
}
.quest-card .badge::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow: 0 0 0 0 rgba(200,134,10,.55);
  animation: pulse 2.2s infinite;
}
.quest-card h4{
  font-family: var(--serif);
  font-size: 18px; font-weight:600; letter-spacing:-.01em;
  margin: 2px 0 0;
}
.quest-card .reward{
  font-size: 12px; color: rgba(255,251,241,.7);
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--mono);
  letter-spacing: .1em;
  text-transform:uppercase;
}
.quest-card .reward b{ color: var(--gold); font-weight:700 }

/* levels */
.lv-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap: 24px; flex-wrap:wrap;
}
.lv-you{ text-align:right; flex-shrink:0 }
.lv-you .cell-tag{ display:block }
.lv-you-num{
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--gold);
  margin-top: 4px;
}
.levels-rail{
  margin-top: auto;
  position:relative;
}
.levels-bar{
  position:relative;
  height: 6px;
  background: rgba(255,251,241,.15);
  border-radius:999px;
  overflow:hidden;
}
.levels-bar i{
  position:absolute; left:0; top:0; bottom:0;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--orange));
  border-radius:999px;
  transition: width 1.4s var(--ease-soft);
}
.is-in .levels-bar i{ width: 64% }
.levels-list{
  margin-top: 16px;
  display:grid; grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.lvl{
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap: 8px;
}
.lvl .pip{
  width: 38px; height: 38px;
  border-radius:50%;
  background: rgba(255,251,241,.08);
  border: 1.5px solid rgba(255,251,241,.18);
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,251,241,.55);
  position:relative;
}
.lvl.on .pip{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--brown-deep);
  box-shadow: 0 8px 20px -8px rgba(200,134,10,.7);
}
.lvl .name{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,251,241,.55);
}
.lvl.on .name{ color: var(--gold) }
@media (max-width:560px){ .levels-list .name{ display:none } }

/* ─── PREMIUM ─────────────────────────────────────────────────────── */
.premium{
  padding: 120px 0;
  background: var(--bg-cream);
}
.prem-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items:center;
  margin-bottom: 60px;
}
@media (max-width: 960px){ .prem-grid{ grid-template-columns:1fr; gap: 36px } }
.prem-head h2{
  font-family:var(--serif);
  font-size: clamp(40px, 6vw, 88px);
  line-height: .98;
  letter-spacing:-.025em;
  font-weight: 600;
  margin: 14px 0 0;
}
.prem-head h2 i{ color: var(--green); font-style:italic; font-weight:500 }
.prem-list{
  margin-top: 28px;
  list-style:none;
  padding:0;
  display:grid; gap: 12px;
}
.prem-list li{
  display:flex; gap: 14px; align-items:flex-start;
  font-size: 15.5px;
  color: var(--brown-deep);
  line-height:1.5;
}
.prem-list .mk{
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: var(--bg-cream);
  font-weight: 700; font-size: 12px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink: 0;
  margin-top: 2px;
}
.prem-list b{ color: var(--brown); font-weight: 600 }
.prem-list small{ color: var(--muted); font-weight: 400; display:block; font-size:13.5px }

.prem-phone-stage{
  position:relative;
  display:flex; justify-content:center;
  padding: 20px;
}
.prem-phone-stage::before{
  content:"";
  position:absolute; inset: 16% 8%;
  background: radial-gradient(closest-side, rgba(91,138,79,.18), transparent 70%);
  filter: blur(8px);
  z-index:0;
}

.pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 900px){ .pricing{ grid-template-columns: 1fr } }
.price-card{
  position:relative;
  padding: 28px 26px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  display:flex; flex-direction:column;
}
.price-card.featured{
  background: var(--green);
  border-color: var(--green-deep);
  color: var(--bg-cream);
  box-shadow: 0 20px 50px -16px rgba(91,138,79,.5);
}
.price-card .tier{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform:uppercase;
  color: var(--muted);
}
.price-card.featured .tier{ color: rgba(255,251,241,.7) }
.price-card h4{
  font-family:var(--serif);
  font-size: 28px;
  font-weight:600;
  letter-spacing: -.015em;
  margin: 6px 0 16px;
}
.price-card .num{
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  display:flex; align-items:baseline; gap:6px;
}
.price-card .num small{
  font-family:var(--sans);
  font-size: 14px;
  font-weight:500;
  color: var(--muted);
}
.price-card.featured .num small{ color: rgba(255,251,241,.75) }
.price-card .alt{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}
.price-card.featured .alt{ color: rgba(255,251,241,.75) }
.price-card .feats{
  margin: 22px 0 0;
  padding: 0;
  list-style:none;
  display:grid; gap: 8px;
  font-size: 13.5px;
  line-height:1.45;
}
.price-card .feats li{
  display:flex; gap: 10px;
}
.price-card .feats li::before{
  content:"·";
  font-family:var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--orange);
  margin-top: -4px;
}
.price-card.featured .feats li::before{ color: var(--gold) }
.price-card .price-cta{
  margin-top: auto;
  padding-top: 22px;
}
.price-card .price-cta .btn{
  width:100%;
  justify-content: center;
}
.price-card.featured .price-cta .btn{
  background: var(--bg-cream);
  color: var(--green-deep);
}
.best-value{
  position:absolute;
  top: -10px; right: 18px;
  background: var(--gold);
  color: var(--brown-deep);
  font-family:var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform:uppercase;
  font-weight:700;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -6px rgba(200,134,10,.5);
  transform: rotate(2deg);
}

/* ─── PRIVACY STRIP ──────────────────────────────────────────────── */
.privacy{
  padding: 80px 0;
  background: var(--green);
  color: var(--bg-cream);
  position:relative;
  overflow:hidden;
}
.privacy::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,251,241,.08) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: .8;
  pointer-events:none;
}
.privacy-grid{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items:stretch;
}
@media (max-width: 880px){ .privacy-grid{ grid-template-columns: 1fr; gap:24px } }
.privacy h2{
  font-family:var(--serif);
  font-size: clamp(36px, 5.6vw, 80px);
  line-height: .98;
  letter-spacing:-.025em;
  font-weight: 600;
  margin: 14px 0 0;
}
.privacy h2 i{ font-style:italic; color: var(--gold); font-weight:500 }
.privacy p{
  margin: 18px 0 0;
  font-size: 16px;
  color: rgba(255,251,241,.8);
  max-width: 50ch;
  line-height: 1.55;
}
.privacy .eyebrow{ color: rgba(255,251,241,.7) }
.priv-badges{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: stretch;
}
.priv-badge{
  padding: 28px 28px 30px;
  background: rgba(255,251,241,.09);
  border: 1px solid rgba(255,251,241,.2);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  transition: background .3s, transform .3s var(--ease-out-back), border-color .3s;
}
.priv-badge:hover{
  background: rgba(255,251,241,.14);
  border-color: rgba(255,251,241,.32);
  transform: translateY(-3px);
}
.priv-badge b{
  display:block;
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--bg-cream);
  margin-bottom: 12px;
}
.priv-badge span{
  font-size: 14.5px;
  color: rgba(255,251,241,.78);
  line-height: 1.5;
}
@media (max-width: 540px){
  .priv-badges{ grid-template-columns: 1fr }
  .priv-badge{ min-height: 140px; padding: 22px }
}

/* ─── FOOTER ──────────────────────────────────────────────────────── */
.footer{
  padding: 100px 0 50px;
  background: var(--bg-cream);
  position:relative;
}
.footer-cta{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 50px;
  align-items:center;
  margin-bottom: 80px;
}
@media (max-width: 880px){ .footer-cta{ grid-template-columns:1fr; gap: 32px } }
.footer-cta h2{
  font-family:var(--serif);
  font-size: clamp(48px, 7vw, 112px);
  line-height: .94;
  letter-spacing: -.03em;
  font-weight: 600;
  margin: 0 0 18px;
  text-wrap:balance;
}
.footer-cta h2 i{ font-style:italic; font-weight:500; color: var(--orange) }
.footer-cta p{
  color: var(--muted);
  font-size: 15.5px;
  max-width: 38ch;
  line-height: 1.55;
}
/* Official Apple "Download on the App Store" badge.
   Per Apple Marketing Resources guidelines, the badge SVG is shown
   as-is (no custom backgrounds, colors, or overlays). We only scale
   it and add a subtle magnetic hover for the cursor. */
.appstore-badge{
  display: inline-block;
  cursor: pointer;
  transition: transform .3s var(--ease-out-back);
  will-change: transform;
}
.appstore-badge img{
  display: block;
  height: 56px;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.appstore-badge:hover{ transform: scale(1.04); }

.footer-legal{
  border-top: 1px solid var(--line);
  padding-top: 32px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap: 18px;
}
.footer-legal-links{
  display:flex; gap: 22px; flex-wrap:wrap;
  font-size: 13.5px;
  color: var(--muted);
}
.footer-legal-links a:hover{ color: var(--brown) }
.footer-credit{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .marquee-track{ animation: none !important }
  .reveal{ opacity:1; transform:none; filter:none }
}
.no-motion *,.no-motion *::before,.no-motion *::after{
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
.no-motion .marquee-track{ animation: none !important }
.no-motion .reveal{ opacity:1; transform:none; filter:none }


/* ─── HERO STAMP + EXTRA ORBIT ──────────────────────────────────── */
.orbit.o3{ inset: 30% 30% auto auto; width: 38%; height: 38%; animation: spin 28s linear infinite; border-color: rgba(200,134,10,.28); border-style: dashed }

.sticker-disc.d5{ top: 50%; left: -6%; animation-delay: -3s; width: 84px; height: 84px }
.sticker-disc.d6{ top: 62%; right: -2%; animation-delay: -5s; width: 90px; height: 90px }

.hero-stamp{
  position: absolute;
  right: 6%;
  top: 8%;
  text-align: center;
  font-family: var(--mono);
  color: var(--brown);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 14px 30px -16px rgba(92,58,30,.4), inset 0 1px 0 rgba(255,255,255,.6);
  transform: rotate(7deg);
  animation: stampFloat 7s ease-in-out infinite;
  max-width: 200px;
}
@keyframes stampFloat{
  0%,100%{ transform: rotate(7deg) translateY(0) }
  50%{ transform: rotate(5deg) translateY(-8px) }
}
.hero-stamp .hs-line{
  display:block;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-stamp .hs-big{
  display:block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.015em;
  color: var(--brown);
  margin: 3px 0 4px;
}
@media (max-width: 980px){
  .hero-stamp{ right: 4%; top: 4%; transform: rotate(4deg) scale(.85) }
}

/* push hero down for taller masthead */
.hero{ padding-top: 180px }
@media (max-width: 780px){ .hero{ padding-top: 130px } }

/* ─── POTATO WORLDS ─────────────────────────────────────────────── */
.worlds{
  padding: 120px 0;
  background: var(--paper);
  position: relative;
}
.worlds::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(92,58,30,.05) 1px, transparent 1.4px);
  background-size: 24px 24px;
  opacity: .7;
  pointer-events: none;
}
.worlds > .shell{ position:relative }

.worlds-head{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
@media (max-width: 960px){ .worlds-head{ grid-template-columns: 1fr; gap: 24px } }
.worlds-h{
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: .98;
  margin: 12px 0 0;
  text-wrap: balance;
}
.worlds-h i{ font-style: italic; color: var(--orange); font-weight: 500 }
.worlds-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 22px;
  max-width: 380px;
}
.worlds-stats > div{
  background: var(--bg-cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; flex-direction: column;
}
.worlds-stats b{
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--brown);
}
.worlds-stats span{
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* world cards */
.world-card{
  position: relative;
  background: var(--w-bg, var(--paper-deep));
  color: var(--w-fg, var(--brown));
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  cursor: pointer;
  transition: transform .45s var(--ease-out-back), box-shadow .45s;
  box-shadow: 0 14px 30px -16px rgba(92,58,30,.3);
  isolation: isolate;
}
.world-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -22px rgba(92,58,30,.5);
}
.world-card .world-media{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.world-card .world-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: left center;
  transition: transform .8s var(--ease-soft);
}
.world-card:hover .world-media img{ transform: scale(1.04) }
.world-card .world-body{
  padding: 22px 24px 24px;
  background: var(--bg-cream);
  color: var(--brown);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.world-card .world-row{
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.world-card .world-no{ color: var(--orange-deep); font-weight: 500 }
.world-name{
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.05;
  margin: 4px 0 0;
}
.world-line{
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}
.world-foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brown);
}
.world-arrow{
  display:inline-block;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--bg-cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  transition: transform .35s var(--ease-out-back), background .25s;
}
.world-card:hover .world-arrow{ background: var(--brown); transform: translateX(4px) rotate(-12deg) }

/* featured */
.world-card.is-large{
  grid-template-rows: none;
  grid-template-columns: 1.05fr .95fr;
  margin-bottom: 22px;
  min-height: 420px;
}
@media (max-width: 880px){
  .world-card.is-large{ grid-template-columns: 1fr; grid-template-rows: 1fr auto; min-height: 0 }
}
.world-card.is-large .world-media{
  aspect-ratio: auto;
  height: 100%;
  min-height: 360px;
}
.world-card.is-large .world-media img{
  object-position: 20% center;
}
.world-card.is-large .world-body{
  border-top: 0;
  border-left: 1px solid var(--line);
  padding: 40px 44px;
  justify-content: center;
  gap: 12px;
}
@media (max-width: 880px){
  .world-card.is-large .world-body{ border-left: 0; border-top: 1px solid var(--line); padding: 24px }
}
.world-card.is-large .world-name{ font-size: 56px }
.world-card.is-large .world-line{ font-size: 16.5px; max-width: 36ch }

/* dark tone — image background bleeds into body */
.world-card[data-tone="dark"] .world-body,
.world-card[data-tone="night"] .world-body,
.world-card[data-tone="plum"] .world-body,
.world-card[data-tone="hot"] .world-body,
.world-card[data-tone="green"] .world-body{
  background: var(--bg-cream);
  color: var(--brown);
}

.worlds-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1080px){ .worlds-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px){ .worlds-grid{ grid-template-columns: 1fr } }

.worlds-foot{
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}


/* ─── PREMIUM PAYWALL CARD (replaces phone mock) ─────────────────── */
.prem-phone-stage{ padding: 0 }
.prem-phone-stage::before{ display: none }

.paywall-card{
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 30px 32px 28px;
  box-shadow:
    0 30px 60px -24px rgba(92,58,30,.32),
    0 6px 14px -8px rgba(92,58,30,.16),
    inset 0 1px 0 rgba(255,255,255,.7);
  isolation: isolate;
  overflow: hidden;
}
.paywall-card::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(92,58,30,.045) 1px, transparent 1.4px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}
.paywall-card > *{ position:relative; z-index: 1 }

.paywall-corner{
  position: absolute;
  top: -18px; right: -18px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: var(--green);
  color: var(--bg-cream);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 36px -14px rgba(91,138,79,.55), inset 0 1.5px 0 rgba(255,255,255,.25);
  z-index: 2;
  transform: rotate(8deg);
}
.paywall-corner span{
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  transform: translate(-6px, 6px);
}

.paywall-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 8px;
  background: rgba(91,138,79,.12);
  color: var(--green-deep);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
}
.paywall-pulse{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(91,138,79,.5);
  animation: pulse 2.2s infinite;
}

.paywall-h{
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1;
  margin: 14px 0 12px;
  color: var(--brown-deep);
}
.paywall-h i{ font-style: italic; color: var(--green); font-weight: 500 }

.paywall-sub{
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.paywall-feats{
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 8px;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: 16px 0;
}
.paywall-feats li{
  display: flex; align-items: center; gap: 12px;
  font-size: 14px;
  color: var(--brown-deep);
  font-weight: 500;
}
.pf-mk{
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--green);
  color: var(--bg-cream);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.paywall-plans{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 10px;
  margin-bottom: 12px;
}
.plan{
  position: relative;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.plan.featured{
  background: var(--green);
  border-color: var(--green-deep);
  color: var(--bg-cream);
  box-shadow: 0 16px 28px -16px rgba(91,138,79,.55);
}
.plan-top{
  display:flex; align-items:center; justify-content:space-between; gap: 8px;
}
.plan-tag{
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.plan.featured .plan-tag{ color: rgba(255,251,241,.75) }
.plan-badge{
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 7px;
  background: var(--gold);
  color: var(--brown-deep);
  border-radius: 999px;
}
.plan-price{
  display: flex; align-items: baseline; gap: 4px;
  margin-top: 2px;
}
.plan-price b{
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1;
}
.plan-price small{
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.plan.featured .plan-price small{ color: rgba(255,251,241,.8) }
.plan-alt{
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.3;
}
.plan.featured .plan-alt{ color: rgba(255,251,241,.85) }

.paywall-once{
  margin: 10px 0 16px;
  padding: 11px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
.paywall-once b{ color: var(--brown); font-weight: 600 }

.paywall-cta{
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--brown);
  color: var(--bg-cream);
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: background .25s, transform .25s var(--ease-out-back);
  box-shadow: 0 14px 28px -12px rgba(58,35,16,.45);
}
.paywall-cta:hover{ background: var(--orange); transform: translateY(-1px) }
.paywall-arrow{
  display: inline-block;
  transition: transform .25s var(--ease-soft);
}
.paywall-cta:hover .paywall-arrow{ transform: translateX(4px) }

.paywall-stamp{
  position: absolute;
  left: 18px; bottom: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .55;
}

@media (max-width: 480px){
  .paywall-card{ padding: 26px 22px 22px }
  .paywall-corner{ width: 72px; height: 72px }
  .paywall-corner span{ font-size: 30px }
  .paywall-h{ font-size: 32px }
  .paywall-plans{ grid-template-columns: 1fr }
}


/* ─── RECIPE STACK (manifesto panel A) ─────────────────────────────
   Fanned card stack inspired by the FreeFrontend "rotating navigation"
   pattern. Five cards, each with its own rotation in the fan when the
   wrapper has `.opened`. Click the stack to collapse all cards into a
   tight aligned pile; click again to re-fan. Hover any individual card
   to lift it. Cards are sized via `inset` so they never escape the
   stack's bounding box even with rotation. */
.recipe-stack{
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  cursor: pointer;
  outline: none;
}
.recipe-stack:focus-visible{
  outline: 3px solid var(--orange);
  outline-offset: 8px;
  border-radius: 22px;
}
.recipe-card{
  position: absolute;
  top:    10%;
  bottom: 8%;
  left:   18%;
  right:  18%;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 14px 28px -10px rgba(74, 48, 34, 0.4),
    0 2px 6px rgba(74, 48, 34, 0.15),
    inset 0 0 0 3px #fff;
  transform-origin: bottom center;
  transition: transform .45s cubic-bezier(.175, .885, .32, 1.275),
              z-index 0s .15s;
  will-change: transform;
}
.recipe-card img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* Closed (default — when the stack is NOT .opened): every card stacks
   flat in place. Z-index keeps the centre card (pos=2) on top. */
.recipe-card[data-pos="0"]{ z-index: 1; }
.recipe-card[data-pos="1"]{ z-index: 2; }
.recipe-card[data-pos="2"]{ z-index: 3; }
.recipe-card[data-pos="3"]{ z-index: 2; }
.recipe-card[data-pos="4"]{ z-index: 1; }

/* Opened — fanned out. Pos=2 sits flat in the centre; the others rotate
   left/right at increasing angles. */
.recipe-stack.opened .recipe-card[data-pos="0"]{ transform: rotate(-14deg); }
.recipe-stack.opened .recipe-card[data-pos="1"]{ transform: rotate( -7deg); }
.recipe-stack.opened .recipe-card[data-pos="2"]{ transform: rotate(  0deg); }
.recipe-stack.opened .recipe-card[data-pos="3"]{ transform: rotate(  7deg); }
.recipe-stack.opened .recipe-card[data-pos="4"]{ transform: rotate( 14deg); }

/* Hover an individual card while opened — slight lift along its own
   rotated axis. No z-index change, no scale: cards keep their stacking
   order so nothing jumps to the front. */
.recipe-stack.opened .recipe-card[data-pos="0"]:hover{ transform: rotate(-14deg) translateY(-10px); }
.recipe-stack.opened .recipe-card[data-pos="1"]:hover{ transform: rotate( -7deg) translateY(-10px); }
.recipe-stack.opened .recipe-card[data-pos="2"]:hover{ transform: rotate(  0deg) translateY(-10px); }
.recipe-stack.opened .recipe-card[data-pos="3"]:hover{ transform: rotate(  7deg) translateY(-10px); }
.recipe-stack.opened .recipe-card[data-pos="4"]:hover{ transform: rotate( 14deg) translateY(-10px); }