/* ==========================================================================
   Yolky — page composition.
   Atoms live in atoms.css and know nothing about layout. This file only
   positions them. Section classes are all prefixed so nothing here can
   accidentally out-specify an atom's own padding.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--egg); color:var(--ink);
  font-family:var(--body); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* every <img> carries width/height attributes so nothing shifts while loading
   (CLS is a ranking input) — which means CSS must release the height again,
   or the attribute wins and the image renders at its intrinsic height. */
img{max-width:100%; height:auto}
.wrap{max-width:1180px; margin:0 auto; padding-inline:clamp(20px,5vw,40px)}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--cream); padding:12px 18px; border-radius:0 0 12px 0;
}
.skip:focus{left:0}

/* ─── nav ─────────────────────────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:40; background:var(--yolk)}
.nav__in{display:flex; align-items:center; gap:20px; height:68px}
.nav__brand{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--ink); font:800 22px/1 var(--display); letter-spacing:-.03em;
  margin-right:auto;
}
.nav__brand img{width:34px; height:34px}
.nav__links{display:flex; gap:26px}
.nav__links a{
  color:var(--ink); text-decoration:none; font:700 15px/1 var(--body);
  opacity:.78; transition:opacity .15s ease;
}
.nav__links a:hover{opacity:1}
@media (max-width:820px){ .nav__links{display:none} }

/* ─── hero ────────────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, #FFE066 0%, transparent 55%),
    linear-gradient(158deg, var(--yolk) 0%, #FFAE3C 48%, var(--pop-soft) 100%);
  padding-block:clamp(44px,6vw,74px) clamp(60px,7vw,96px);
}
.hero__in{
  display:grid; gap:clamp(38px,5vw,56px); align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:960px){ .hero__in{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)} }
.hero h1{margin:.28em 0 0; font-size:clamp(46px,7.4vw,84px)}
.hero h1 .l2{display:block; margin-left:.06em; font-size:1.18em}  /* the size
   staircase: a two-line lockup set at one size is a flat brick. */
.hero__note{margin:clamp(20px,2.4vw,28px) 0 0}
.hero__tabs{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(20px,2.4vw,26px);
}
.hero__tablabel{
  display:block; margin:0 0 10px; color:rgba(35,19,3,.62);
  font:700 13px/1 var(--body); letter-spacing:.1em; text-transform:uppercase;
}
.hero__ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3vw,32px)}
.hero__trust{
  display:flex; align-items:center; gap:8px; margin:18px 0 0;
  color:rgba(35,19,3,.68); font:600 14px/1.4 var(--body);
}
.hero__trust svg{width:16px; height:16px; flex:none; color:var(--ink)}

/* the demo: source → beat → recipe */
.demo{position:relative}
.demo__stack{position:relative; display:grid; justify-items:center; gap:0}
.demo__source{
  position:relative; width:min(300px,72vw); aspect-ratio:1;
  border-radius:var(--r-xl); overflow:hidden;
  border:9px solid #FFFDF7; background:#FFFDF7; box-shadow:var(--shadow-card);
}
.demo__source figure{position:absolute; inset:0; margin:0; opacity:0; transition:opacity .42s ease}
.demo__source figure[data-on]{opacity:1}
.demo__source img{width:100%; height:100%; object-fit:cover; display:block}
/* the link source is a card, not a photo */
.demo__linkcard{position:absolute; inset:0; background:var(--card); display:grid; grid-template-rows:1fr auto}
.demo__linkcard img{height:100%; object-fit:cover}
.demo__linkbar{
  display:flex; align-items:center; gap:9px; padding:13px 15px; color:var(--text);
  font:600 13px/1.25 var(--body); background:var(--elev);
}
.demo__linkbar svg{width:17px; height:17px; flex:none; color:var(--yolk)}
.demo__beat{margin:-26px 0; z-index:2}
.demo__recipe{width:min(340px,84vw); margin-top:6px}
.demo__hand{
  position:absolute; right:-4px; bottom:-40px; z-index:3;
}
.demo__yolky{
  /* tucked against the recipe card's left edge, not floating beside it —
     Yolky reads as handing the recipe over rather than as a loose sticker.
     It sits BELOW the card's baseline on purpose: tucked any higher and the
     hat covers the ingredient list, which is the thing the card exists to show. */
  position:absolute; left:-56px; bottom:-44px; width:158px; z-index:3;
  filter:drop-shadow(0 14px 22px rgba(120,52,0,.32));
}
@media (max-width:960px){
  .demo__yolky{left:auto; right:-18px; bottom:-22px; width:126px}
  .demo__hand{display:none}
}

/* ─── generic section rhythm ──────────────────────────────────────── */
.band{padding-block:clamp(58px,7vw,96px)}
.band--cream{background:var(--egg)}
.band--dark{background:var(--card); color:var(--text)}
.band--bright{background:linear-gradient(170deg,#FFD54A,var(--yolk))}
.band__head{max-width:660px; margin:0 0 clamp(30px,4vw,46px)}
.band__head h2{
  margin:.5em 0 .35em; font:800 clamp(30px,4.4vw,50px)/1.06 var(--display);
  letter-spacing:-.035em;
}
.band__head p{
  margin:0; color:var(--ink-dim);
  font:500 clamp(16px,1.7vw,19px)/1.6 var(--body);
}
.band--dark .band__head p{color:var(--text-dim)}
.band__head--mid{margin-inline:auto; text-align:center}
.band__head--mid .a-eyebrow{margin-inline:auto}

/* ─── ways in ─────────────────────────────────────────────────────── */
.ways{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.way{
  background:var(--cream); border:2px solid rgba(35,19,3,.1);
  border-radius:var(--r-lg); padding:clamp(20px,2.2vw,26px);
  transition:transform .2s ease, border-color .2s ease;
}
.way:hover{transform:translateY(-4px); border-color:var(--pop-soft)}
.way__ico{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:var(--ink); color:var(--yolk); margin-bottom:15px;
}
.way__ico svg{width:22px; height:22px}
.way h3{margin:0 0 .4em; font:800 clamp(18px,1.9vw,21px)/1.2 var(--display); letter-spacing:-.02em}
.way p{margin:0; color:var(--ink-dim); font:500 15px/1.6 var(--body)}

/* ─── features ────────────────────────────────────────────────────── */
.feats{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}

/* ─── fridge split ────────────────────────────────────────────────── */
.split{display:grid; gap:clamp(30px,4vw,54px); align-items:center; grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)} }
.split__media{position:relative}
.split__media .a-photo{border-width:10px}
.split__badge{
  position:absolute; left:-14px; bottom:-18px; z-index:2;
  background:var(--ink); color:var(--cream); border-radius:18px;
  padding:14px 18px; box-shadow:0 14px 30px rgba(35,19,3,.3);
  font:700 15px/1.35 var(--body); max-width:230px;
}
.split__badge b{color:var(--yolk); display:block; font:800 15px/1.4 var(--body)}
.split__list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:13px}
.split__list li{
  display:flex; gap:11px; align-items:flex-start;
  font:500 clamp(15px,1.6vw,17px)/1.5 var(--body); color:var(--ink-dim);
}
.split__list svg{width:20px; height:20px; flex:none; color:var(--mint); margin-top:2px}
.band--dark .split__list li{color:var(--text-dim)}

/* ─── steps ───────────────────────────────────────────────────────── */
.steps{display:grid; gap:clamp(24px,3vw,34px); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* the step marker is yolk by default, which disappears on the yolk band —
   invert it there so the sequence is still legible */
.band--bright .a-step__n{
  background:var(--ink); color:var(--yolk); box-shadow:0 0 0 5px rgba(35,19,3,.13);
}

/* ─── pricing ─────────────────────────────────────────────────────── */
.prices{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); max-width:760px}
.prices__note{
  margin:24px 0 0; max-width:760px; color:var(--ink-dim);
  font:500 14px/1.65 var(--body);
}
.prices__note a{color:var(--pop-ink)}

/* ─── faq ─────────────────────────────────────────────────────────── */
.faqs{max-width:760px}

/* ─── closing cta ─────────────────────────────────────────────────── */
.cta{position:relative; overflow:hidden; background:linear-gradient(150deg,var(--yolk),#FFA83C 60%,var(--pop-soft))}
.cta__in{position:relative; display:grid; gap:30px; align-items:center; grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){ .cta__in{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)} }
.cta h2{margin:.35em 0 .3em; font:800 clamp(30px,4.6vw,52px)/1.04 var(--display); letter-spacing:-.035em}
.cta p{margin:0 0 26px; max-width:46ch; font:500 clamp(16px,1.7vw,19px)/1.6 var(--body); color:rgba(35,19,3,.76)}
.cta__yolky{justify-self:center; width:min(230px,58vw); filter:drop-shadow(0 18px 26px rgba(120,52,0,.3))}
.cta__btns{display:flex; flex-wrap:wrap; gap:12px}

/* ─── footer ──────────────────────────────────────────────────────── */
.foot{background:var(--card); color:var(--text-dim); padding-block:clamp(44px,5vw,64px)}
.foot__in{display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.foot__brand{display:flex; align-items:center; gap:9px; color:var(--text); font:800 21px/1 var(--display); letter-spacing:-.03em}
.foot__brand img{width:32px; height:32px}
.foot__blurb{margin:14px 0 0; font:500 14px/1.65 var(--body); max-width:34ch}
.foot h2{margin:0 0 14px; color:var(--text); font:800 13px/1 var(--body); letter-spacing:.12em; text-transform:uppercase}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.foot a{color:var(--text-dim); text-decoration:none; font:500 15px/1.4 var(--body)}
.foot a:hover{color:var(--yolk); text-decoration:underline}
.foot__legal{
  margin-top:clamp(32px,4vw,48px); padding-top:22px;
  border-top:1px solid rgba(255,240,214,.13);
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
  font:500 13px/1.6 var(--body);
}

/* ─── legal page shell ────────────────────────────────────────────── */
.legal-hero{background:linear-gradient(160deg,var(--yolk),#FFBE45); padding-block:clamp(36px,4.5vw,58px) clamp(30px,4vw,46px)}
.legal-hero h1{margin:.3em 0 .2em; font:800 clamp(32px,5vw,54px)/1.05 var(--display); letter-spacing:-.035em}
.legal-hero p{margin:0; color:rgba(35,19,3,.72); font:600 15px/1.5 var(--body)}
.legal-body{padding-block:clamp(34px,4vw,52px) clamp(56px,7vw,90px); background:var(--egg)}
.legal-grid{display:grid; gap:clamp(28px,4vw,54px); grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){ .legal-grid{grid-template-columns:230px minmax(0,1fr)} }
.toc{position:sticky; top:92px; align-self:start}
.toc h2{margin:0 0 12px; font:800 12px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim)}
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:9px; counter-reset:t}
.toc a{
  color:var(--ink-dim); text-decoration:none; font:600 14px/1.35 var(--body);
  display:block; padding-left:11px; border-left:2px solid rgba(35,19,3,.14);
}
.toc a:hover{color:var(--pop-ink); border-left-color:var(--pop)}
@media (max-width:959px){ .toc{position:static} .toc ol{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} }
.callout{
  background:var(--cream); border:2px solid var(--yolk); border-radius:var(--r-md);
  padding:18px 20px; margin:0 0 1.6em;
  font:500 16px/1.6 var(--body);
}
.callout strong{display:block; margin-bottom:.3em; font:800 16px/1.4 var(--body)}

/* ─── entrance choreography (progressive enhancement only) ────────── */
.js .rise{opacity:0; transform:translateY(18px)}
.js .rise.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1; transform:none}
}