/* ============================================================
   AI for Lunch — shared stylesheet (Bento design system)
   Source design: AIforLunch_5_Bento.html — do not drift the tokens.
   ============================================================ */
/* Self-hosted variable fonts (latin subset, same files Google serves).
   Preloaded in every page head → ready at first paint: no swap-shift (CLS),
   no third-party render-blocking chain. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(../fonts/bricolage-var.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-var.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage-fallback';src:local('Arial');size-adjust:105.00%;ascent-override:88.57%;descent-override:25.71%;line-gap-override:0%}
@font-face{font-family:'Inter-fallback';src:local('Arial');size-adjust:107.40%;ascent-override:90.20%;descent-override:22.48%;line-gap-override:0%}
:root{
  --paper:#faf7f0;
  --ink:#191714;
  --ink-soft:#4c463e;
  --muted:#776e63;
  --card:#ffffff;
  --line:#e6dfd2;
  --butter:#f5cf54;
  --sage:#a8c8a1;
  --sage-deep:#4f7a53;
  --coral:#f2876c;
  --coral-deep:#b2431f;
  --peri:#8f9fe0;
  --peri-deep:#4356b0;
  --plum:#5c3a6e;
  --teal:#3e8f83;
  --r:18px;
  --maxw:1300px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{overflow-x:hidden}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font-family:'Inter','Inter-fallback',system-ui,sans-serif;
  font-size:16.5px;line-height:1.55;color:var(--ink);background:var(--paper);
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:3px solid var(--coral-deep);outline-offset:2px}
.disp{font-family:'Bricolage Grotesque','Bricolage-fallback',system-ui,sans-serif}
img{max-width:100%}

/* JS-rendered grids: reserve height while empty so the fill-in never shifts
   content that painted early (this exact shift was desktop CLS 0.134 — the
   Read section sat high while #watch was empty, then jumped). :empty stops
   matching the instant render.js fills the container. */
#featured-tile:empty{min-height:430px}
.vgrid:empty,.reads:empty,.rgrid:empty,.tools:empty,.lgrid:empty,.sgrid:empty,
.mm-list:empty,.layers:empty,.path-strip:empty,.persona-strip:empty,.lesson-list:empty{min-height:420px}

/* ── ticker: label stays pinned left, items scroll behind it ── */
.ticker{background:var(--ink);color:var(--paper);white-space:nowrap;padding:9px 0;font-size:14.5px;font-weight:600;display:flex;align-items:center}
.ticker-label{flex:none;color:var(--butter);padding:0 10px 0 18px;position:relative;z-index:2;background:var(--ink)}
.ticker-label::after{content:"";position:absolute;right:-22px;top:-9px;bottom:-9px;width:22px;background:linear-gradient(90deg,var(--ink),transparent)}
.ticker-scroll{flex:1;overflow:hidden;min-width:0}
.ticker-track{display:inline-block;animation:tick 58s linear infinite} /* 55→58s: Ricky 08-18 'web a bit fast, slow ≤5%' */
.ticker:hover .ticker-track{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none}}
/* Mobile (Ricky 08-18): ONE line — the pinned label is hidden and the yellow
   "FRESH THIS WEEK:" rides INLINE inside the scroll (render.js .tk-lbl), so the
   whole thing scrolls together. Desktop keeps the pinned label. */
.tk-lbl{display:none;color:var(--butter);margin-right:6px}
@media (max-width:1000px){
  .ticker{display:flex;flex-wrap:nowrap;padding:8px 0;font-size:13px}
  .ticker-label{display:none}.tk-lbl{display:inline}
  /* swipe-to-read: the strip is a real scroller (JS drives it, pauses on touch,
     resumes ~2.5s after you let go); scrollbar hidden; no CSS animation here */
  .ticker-scroll{width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ticker-track{line-height:1.2;vertical-align:top}
  .ticker-scroll::-webkit-scrollbar{display:none}
  .ticker-track{animation:none}
}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker b{color:var(--butter)}
.ticker .sep{color:var(--coral);margin:0 14px}
.ticker a{color:inherit;text-decoration:none}
.ticker a:hover{color:var(--butter)}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.88);backdrop-filter:blur(14px);border-bottom:1.5px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:22px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo .mark{
  width:36px;height:36px;border-radius:11px;background:var(--butter);
  display:flex;align-items:center;justify-content:center;font-size:19px;
  border:2px solid var(--ink);box-shadow:2.5px 2.5px 0 var(--ink);
}
.logo .name{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.02em;white-space:nowrap}
.nav-links{display:flex;gap:2px;flex:1}
.nav-links a{text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:15px;padding:8px 13px;border-radius:99px}
.nav-links a:hover,.nav-links a.on{background:#f0ead9;color:var(--ink)}
.nav-cta{
  text-decoration:none;background:var(--ink);color:var(--paper);font-weight:700;font-size:15px;
  padding:11px 20px;border-radius:99px;border:2px solid var(--ink);white-space:nowrap;
}
.nav-cta:hover{background:var(--coral-deep);border-color:var(--coral-deep)}

/* ── mobile chrome: burger menu + sticky Weekly Bite (injected by render.js) ── */
.nav-burger{display:none;width:44px;height:44px;flex:none;border-radius:12px;border:2px solid var(--ink);background:var(--card);cursor:pointer;align-items:center;justify-content:center;padding:0;color:var(--ink);box-shadow:2.5px 2.5px 0 var(--ink)}
.nav-burger svg{display:block}
.mobile-menu{position:fixed;inset:0;z-index:120;background:rgba(15,13,10,.45);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s linear .42s}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s ease}
.mm-panel{position:absolute;top:0;left:0;right:0;background:var(--paper);border-bottom:2.5px solid var(--ink);padding:14px 24px calc(22px + env(safe-area-inset-bottom));max-height:100dvh;overflow-y:auto;transform:translateY(-103%);transition:transform .42s cubic-bezier(.32,.72,.28,1)}
.mobile-menu.open .mm-panel{transform:translateY(0)}
.mm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
/* Links cascade in as the panel lands. */
.mm-top,.mm-link,.mm-cta{opacity:0;transform:translateY(-10px);transition:opacity .24s ease,transform .24s ease}
.mobile-menu.open .mm-top,.mobile-menu.open .mm-link,.mobile-menu.open .mm-cta{opacity:1;transform:none}
.mobile-menu.open .mm-top{transition-delay:.10s}
.mobile-menu.open .mm-link:nth-child(2){transition-delay:.13s}
.mobile-menu.open .mm-link:nth-child(3){transition-delay:.16s}
.mobile-menu.open .mm-link:nth-child(4){transition-delay:.19s}
.mobile-menu.open .mm-link:nth-child(5){transition-delay:.22s}
.mobile-menu.open .mm-link:nth-child(6){transition-delay:.25s}
.mobile-menu.open .mm-link:nth-child(7){transition-delay:.28s}
.mobile-menu.open .mm-link:nth-child(8){transition-delay:.31s}
.mobile-menu.open .mm-link:nth-child(9){transition-delay:.34s}
.mobile-menu.open .mm-cta{transition-delay:.40s}
@media (prefers-reduced-motion: reduce){
  .mobile-menu,.mm-panel,.mm-top,.mm-link,.mm-cta{transition:none}
  .mm-panel{transform:none}
  .mm-top,.mm-link,.mm-cta{opacity:1;transform:none}
  .mobile-menu{visibility:hidden}
  .mobile-menu.open{visibility:visible}
}
.mm-close{width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:var(--butter);font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.mm-link{display:block;text-decoration:none;font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:700;font-size:21px;color:var(--ink);padding:13px 2px;border-top:1.5px solid var(--line)}
.mm-link:active{color:var(--coral-deep)}
.mm-cta{display:block;text-align:center;text-decoration:none;background:var(--ink);color:var(--paper);font-weight:800;font-size:16px;padding:14px 20px;border-radius:99px;border:2px solid var(--ink);margin-top:16px}
.sticky-bite{display:none}

/* ── bento hero ── */
.bento{padding:34px 0 8px}
.bento-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(12,1fr);
  /* minmax lets tiles GROW with their content — fixed 88px rows clipped the
     quiz/email tiles and spilled the hero text outside its card */
  grid-auto-rows:minmax(88px,auto);
}
.tile{border-radius:var(--r);border:2px solid var(--ink);position:relative;overflow:hidden;text-decoration:none;display:block;box-shadow:4px 4px 0 rgba(25,23,20,.9)}
.tile:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(25,23,20,.9);transition:transform .13s ease,box-shadow .13s ease}
@media (prefers-reduced-motion: reduce){.tile:hover{transform:none}}

.t-head{grid-column:1/8;grid-row:1/3;background:var(--card);display:flex;flex-direction:column;justify-content:center;padding:26px 38px;box-shadow:none;border:none;overflow:visible}
.t-head:hover{transform:none;box-shadow:none}
.kick{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-deep)}
.t-head h1{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:clamp(34px,3.8vw,50px);line-height:1.02;letter-spacing:-.03em;margin-top:10px}
.t-head h1 .hl{background:linear-gradient(transparent 58%, var(--butter) 58%)}
.t-head p{font-size:18px;color:var(--ink-soft);margin-top:14px;max-width:30em}

/* Featured tile: true-16:9 media on top, info panel below — no thumbnail cropping */
.t-video{grid-column:8/13;grid-row:1/5;background:var(--card);display:flex;flex-direction:column}
.t-video .fmedia{position:relative;aspect-ratio:16/9;background:#000;flex:none;overflow:hidden;border-bottom:2px solid var(--ink)}
.t-video .fmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t-video .vtag{position:absolute;top:14px;left:14px;background:var(--coral);color:var(--ink);font-weight:700;font-size:13px;padding:5px 12px;border-radius:99px;border:2px solid var(--ink);z-index:2}
.t-video .dur{position:absolute;top:14px;right:14px;background:rgba(12,10,8,.8);color:#fff;font-weight:600;font-size:13px;padding:5px 10px;border-radius:8px;z-index:2}
.t-video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.t-video .play::after{
  content:"▶";display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;background:var(--butter);color:var(--ink);
  font-size:22px;padding-left:5px;border:2.5px solid var(--ink);
}
.t-video:hover .play::after{background:var(--coral)}
.t-video .fbody{padding:14px 20px 15px;display:flex;flex-direction:column;flex:1;min-height:0}
.t-video .fbody .src{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-deep)}
.t-video .fbody strong{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.28em*3);font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:700;font-size:clamp(16px,1.35vw,19px);line-height:1.28;margin-top:5px;color:var(--ink)}
.t-video .fmedia img,.t-video .fbody{animation:featfade .5s ease}
@keyframes featfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.t-video .fmedia img,.t-video .fbody{animation:none}}
.fdots{display:flex;gap:7px;margin-top:auto;padding-top:10px}
.fdot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;cursor:pointer}
.fdot.on{background:var(--butter)}
.fdot:hover{background:var(--line)}

.t-quiz{grid-column:1/4;grid-row:3/5;background:var(--peri);padding:22px 24px;display:flex;flex-direction:column;min-height:190px}
.t-quiz .em{font-size:26px}
.t-quiz strong{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:21px;line-height:1.15;margin-top:8px;color:#101534}
.t-quiz span{font-size:14.5px;color:#232f66;margin-top:6px}
.t-quiz .go{margin-top:auto;font-weight:700;font-size:15px;color:#101534}

.t-daily{grid-column:4/8;grid-row:3/5;background:var(--butter);padding:22px 24px;display:flex;flex-direction:column;min-height:190px}
.t-daily form{padding-top:12px}
.t-daily strong{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:21px;line-height:1.15;color:#33270a}
.t-daily span{font-size:14.5px;color:#5c4a17;margin-top:6px}
.t-daily form{display:flex;gap:8px;margin-top:auto}
.t-daily input{
  flex:1;min-width:0;font-size:14.5px;padding:11px 13px;border-radius:10px;
  border:2px solid var(--ink);font-family:inherit;background:var(--paper);
}
.t-daily button{
  font-size:14.5px;font-weight:700;padding:11px 16px;border-radius:10px;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);cursor:pointer;font-family:inherit;white-space:nowrap;
}
.t-daily button:hover{background:var(--coral-deep);border-color:var(--coral-deep)}
.form-note{font-size:13px;margin-top:8px;font-weight:600;color:#5c4a17;display:none}
.form-note.ok{display:block;color:#2c5a30}
.form-note.err{display:block;color:var(--coral-deep)}

/* ── section heads ── */
.zone{padding:46px 0 6px}
.zone-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.zone-head h2{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em}
.zone-head .pill{font-size:13px;font-weight:700;padding:5px 13px;border-radius:99px;border:2px solid var(--ink)}
.zone-head .rule{flex:1;border-top:2px solid var(--ink)}
.zone-head a.more{font-weight:700;font-size:15px;color:var(--coral-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.zone-head a.more:hover{color:var(--ink)}

/* ── video cards ── */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vcard{
  text-decoration:none;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:4px 4px 0 rgba(25,23,20,.9);
}
.vcard:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(25,23,20,.9);transition:transform .13s ease,box-shadow .13s ease}
@media (prefers-reduced-motion: reduce){.vcard:hover{transform:none}}
.vthumb{position:relative;aspect-ratio:16/9;background:#000}
.vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vthumb .dur{position:absolute;right:10px;bottom:10px;background:rgba(12,10,8,.82);color:#fff;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:6px}
.vthumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vthumb .play::after{
  content:"▶";display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;background:rgba(250,247,240,.92);color:var(--ink);
  font-size:16px;padding-left:4px;border:2px solid var(--ink);
}
.vcard:hover .play::after{background:var(--butter)}
.vbody{padding:15px 17px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.vmeta{display:flex;gap:7px;flex-wrap:wrap}
.chip{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:99px;border:1.5px solid var(--ink);background:var(--card)}
.chip.starter{background:var(--sage)}
.chip.operator{background:var(--peri);color:#101534}
.chip.power{background:var(--coral)}
.chip.fresh{background:var(--butter)}
.chip.skillc{background:var(--plum);color:#fff}
.vbody h3{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:700;font-size:18px;line-height:1.3}
.vbody .src{margin-top:auto;font-size:13.5px;color:var(--muted);font-weight:500}
.vbody .src b{color:var(--ink-soft)}

/* ── reads: colored stack ── */
.reads{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.acard{
  text-decoration:none;border:2px solid var(--ink);border-radius:var(--r);
  padding:22px 24px;display:flex;gap:18px;align-items:center;
  box-shadow:4px 4px 0 rgba(25,23,20,.9);
}
.acard:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(25,23,20,.9);transition:transform .13s ease,box-shadow .13s ease}
@media (prefers-reduced-motion: reduce){.acard:hover{transform:none}}
.acard.c1{background:#fdf3d0}
.acard.c2{background:#e7f0e4}
.acard.c3{background:#fde5dc}
.acard.c4{background:#e6eafb}
.acard.c5{background:#f3e8f8}
.acard.c6{background:#e0f0ed}
.a-ico{
  flex:none;width:84px;height:84px;border-radius:14px;border:2px solid var(--ink);
  overflow:hidden;position:relative;background:#fff;
}
.a-ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.abody{min-width:0}
.abody .src{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.abody h3{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:700;font-size:19px;line-height:1.25;margin-top:4px}
.abody .ft{font-size:13.5px;color:var(--ink-soft);margin-top:6px;font-weight:500}

/* ── the pantry (tools) ── */
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tcard{
  text-decoration:none;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);
  padding:20px 21px;display:flex;flex-direction:column;gap:8px;box-shadow:4px 4px 0 rgba(25,23,20,.9);
}
.tcard:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(25,23,20,.9);transition:transform .13s ease,box-shadow .13s ease}
@media (prefers-reduced-motion: reduce){.tcard:hover{transform:none}}
.tcard .t-em{width:46px;height:46px;border-radius:13px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:23px}
.tcard h3{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:18.5px;line-height:1.2}
.tcard p{font-size:14px;color:var(--ink-soft);flex:1}
.tcard .t-for{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ── recipe cards ── */
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.rcp{
  background:var(--card);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:4px 4px 0 rgba(25,23,20,.9);padding:20px 22px;display:flex;flex-direction:column;gap:9px;
}
.rcp h3{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:19.5px;line-height:1.2}
.rcp .r-what{font-size:14.5px;color:var(--ink-soft)}
.r-promptwrap{position:relative;margin-top:2px}
.r-promptwrap pre{
  white-space:pre-wrap;word-wrap:break-word;font-family:inherit;font-size:13.5px;line-height:1.5;
  background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:14px 15px;
  padding-right:74px;color:var(--ink-soft);max-height:230px;overflow-y:auto;
}
.copy-btn{
  position:absolute;top:10px;right:10px;font-family:inherit;font-size:12.5px;font-weight:700;
  border:2px solid var(--ink);border-radius:99px;background:var(--butter);padding:6px 13px;cursor:pointer;
}
.copy-btn:hover{background:var(--coral)}
.r-tip{font-size:13.5px;color:var(--sage-deep);font-weight:600}
@media (max-width:1000px){.rgrid{grid-template-columns:1fr}}

/* ── lingo cards ── */
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lterm{
  background:var(--card);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:4px 4px 0 rgba(25,23,20,.9);padding:18px 20px;display:flex;flex-direction:column;gap:7px;
}
.lterm h3{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:18.5px;line-height:1.2}
.lterm .l-plain{font-size:14.5px;font-weight:600;color:var(--ink)}
.lterm .l-more{font-size:13.5px;color:var(--muted);flex:1}
.lterm .l-see{font-size:13px;font-weight:700;color:var(--coral-deep);text-decoration:underline;text-underline-offset:3px}
.lterm .l-see:hover{color:var(--ink)}
@media (max-width:1000px){.lgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.lgrid{grid-template-columns:1fr}}

/* ── path cards ── */
.path-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.persona-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.persona-strip .pcard .ph{aspect-ratio:16/8}
.pcard{border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;text-decoration:none;background:var(--card);box-shadow:4px 4px 0 rgba(25,23,20,.9);display:flex;flex-direction:column}
.pcard:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(25,23,20,.9);transition:transform .13s ease,box-shadow .13s ease}
@media (prefers-reduced-motion: reduce){.pcard:hover{transform:none}}
.pcard .ph{position:relative;aspect-ratio:16/7.5}
.pcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard .ph .lv{position:absolute;top:12px;left:12px}
.pcard .pb{padding:17px 19px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard h3{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:700;font-size:20px;line-height:1.25}
.pcard p{font-size:14.5px;color:var(--ink-soft)}
.pcard .ct{margin-top:auto;font-weight:700;font-size:14px}

/* ── promise band ── */
.promise{margin-top:60px;background:var(--sage-deep);border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink)}
.promise-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:0;color:#f2f7ef}
.pr{padding:34px 30px;border-right:1.5px solid rgba(250,247,240,.25)}
.pr:last-child{border-right:none}
.pr h3{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:19px;margin-bottom:6px;color:#fff}
.pr p{font-size:15px;color:#f0f6ec}
.pr .em{font-size:24px;display:block;margin-bottom:8px}

footer{padding:38px 0 50px;color:var(--muted);font-size:15px}
.foot-brand{display:flex;flex-direction:column;gap:1px}
.foot-tag{font-size:14px;color:var(--muted)}
.legal{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;margin-top:20px;padding-top:16px;border-top:1.5px solid var(--line);font-size:13.5px;color:var(--muted)}
.legal a{color:var(--muted);font-weight:600;text-decoration:none}
.legal a:hover{color:var(--coral-deep)}
.prose{max-width:760px;padding-bottom:60px}
.prose h2{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:22px;margin:30px 0 8px}
.prose p,.prose li{font-size:15.5px;color:var(--ink-soft);margin-top:8px}
.prose ul{margin-left:22px}
.foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
footer a{color:var(--ink-soft);text-decoration:none;font-weight:600}
footer a:hover{color:var(--coral-deep)}

/* ── sub-page hero (quiz, paths, libraries) ── */
.page-hero{padding:44px 0 10px}
.page-hero .kick{margin-bottom:2px}
.page-hero h1{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:clamp(32px,4vw,48px);line-height:1.05;letter-spacing:-.03em;margin-top:8px}
.page-hero .dek{font-size:18px;color:var(--ink-soft);margin-top:12px;max-width:38em}

/* ── continue chip + progress ── */
.continue-chip{
  display:inline-block;margin-top:14px;text-decoration:none;font-weight:700;font-size:14px;
  background:var(--sage);border:2px solid var(--ink);border-radius:99px;padding:8px 16px;
  box-shadow:2.5px 2.5px 0 var(--ink);
}
.continue-chip:hover{background:var(--butter)}
.lesson .eat{
  margin-top:13px;align-self:flex-start;font-family:inherit;font-size:13.5px;font-weight:700;
  border:2px solid var(--ink);border-radius:99px;background:var(--paper);padding:8px 15px;cursor:pointer;
}
.lesson .eat:hover{background:var(--butter)}
.lesson.done{background:#f4f8f2}
.lesson.done .num{background:var(--sage)}
.lesson.done .eat{background:var(--sage)}
.path-progress{font-size:14px;font-weight:700;color:var(--sage-deep);margin-top:10px}

/* ── library filters: labeled rows; on phones each row becomes a swipeable chip rail ── */
.filters{display:flex;flex-direction:column;gap:10px;margin:22px 0 4px}
.frow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.flbl{flex:none;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.fsearch{
  flex:1;min-width:240px;max-width:460px;font-family:inherit;font-size:15px;
  padding:11px 15px;border-radius:99px;border:2px solid var(--ink);background:var(--card);
}
.fsearch:focus{outline:3px solid var(--coral-deep);outline-offset:2px}
.fbtn{
  font-family:inherit;font-size:13.5px;font-weight:700;padding:7px 15px;border-radius:99px;
  border:2px solid var(--ink);background:var(--card);cursor:pointer;
}
.fbtn:hover{background:#f0ead9}
.fbtn.on{background:var(--ink);color:var(--paper)}
.count-note{font-size:14px;color:var(--muted);font-weight:600;margin:10px 0 0}

/* ── path page ── */
.path-hero{position:relative;border-bottom:2.5px solid var(--ink);background:#000}
.path-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.path-hero .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,10,8,.9) 0%,rgba(12,10,8,.25) 70%)}
.path-hero .inner{position:relative;padding:110px 28px 34px;color:#fff}
.path-hero h1{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:clamp(32px,4.4vw,52px);line-height:1.04;letter-spacing:-.03em;margin-top:10px;max-width:18em}
.path-hero .dek{font-size:18px;color:#e9e4da;margin-top:12px;max-width:36em}
.path-hero .meta-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

.lesson-list{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.lesson{
  background:var(--card);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:4px 4px 0 rgba(25,23,20,.9);padding:22px 24px;
  display:flex;gap:20px;align-items:flex-start;
}
.lesson .num{
  flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:19px;background:var(--butter);
}
.lesson .lbody{flex:1;min-width:0}
.lesson h3{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:20px;line-height:1.25}
.lesson .goal{font-size:15px;color:var(--ink-soft);margin-top:5px}
.lesson .goal b{color:var(--ink)}
.lesson .items{display:flex;flex-direction:column;gap:9px;margin-top:13px}
.lesson .item{
  display:flex;gap:11px;align-items:center;text-decoration:none;
  border:1.5px solid var(--line);border-radius:12px;padding:10px 13px;background:var(--paper);
}
.lesson .item:hover{border-color:var(--ink);background:#f5f0e4}
.lesson .item .ico{flex:none;width:30px;height:30px;border-radius:9px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--card)}
.lesson .item .it{min-width:0;font-size:14.5px;font-weight:600;line-height:1.35}
.lesson .item .it small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:1px}
.lesson .do{
  margin-top:13px;border-left:4px solid var(--sage-deep);background:#eef4ec;
  border-radius:0 12px 12px 0;padding:11px 15px;font-size:14.5px;color:#2c4a2f;
}
.lesson .do b{text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--sage-deep)}

/* ── quiz ── */
.quiz-shell{max-width:780px;margin:0 auto;padding:0 28px}
.qcard{
  background:var(--card);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:5px 5px 0 rgba(25,23,20,.9);padding:30px 32px;margin-top:26px;
}
.qprog{display:flex;gap:6px;margin-bottom:22px}
.qprog span{flex:1;height:8px;border-radius:99px;border:1.5px solid var(--ink);background:var(--paper)}
.qprog span.done{background:var(--butter)}
.qcard h2{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,30px);line-height:1.15}
.qsub{font-size:15px;color:var(--muted);margin-top:6px;font-weight:500}
.qopts{display:flex;flex-direction:column;gap:11px;margin-top:22px}
.qopt{
  font-family:inherit;text-align:left;font-size:16px;font-weight:600;cursor:pointer;
  border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:15px 18px;
  display:flex;gap:13px;align-items:center;line-height:1.35;
}
.qopt:hover{background:var(--butter);transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(25,23,20,.9)}
@media (prefers-reduced-motion: reduce){.qopt:hover{transform:none}}
.qopt .oem{flex:none;font-size:21px}
.qopt small{display:block;font-weight:500;color:var(--muted);font-size:13.5px}
.qback{margin-top:18px;background:none;border:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer}
.qback:hover{color:var(--ink)}

.result-tag{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep)}
.rcard .plate{
  border:2px solid var(--ink);border-radius:14px;background:#fdf3d0;padding:16px 19px;margin-top:18px;
}
.rcard .plate b{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.rcard .plate .big{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:20px}
.rcard ul{margin:14px 0 0 2px;list-style:none;display:flex;flex-direction:column;gap:9px}
.rcard li{display:flex;gap:10px;font-size:15px;color:var(--ink-soft)}
.rcard li::before{content:"◆";color:var(--coral);flex:none}
.r-cta{
  display:inline-block;text-decoration:none;background:var(--ink);color:var(--paper);font-weight:700;
  font-size:15.5px;padding:13px 24px;border-radius:99px;border:2px solid var(--ink);margin-top:20px;
}
.r-cta:hover{background:var(--coral-deep);border-color:var(--coral-deep)}
.r-email{margin-top:26px;border-top:2px solid var(--line);padding-top:20px}
.r-email strong{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:18px}
.r-email p{font-size:14.5px;color:var(--ink-soft);margin-top:4px}
.r-email form{display:flex;gap:8px;margin-top:12px;max-width:440px}
.r-email input{flex:1;min-width:0;font-size:14.5px;padding:11px 13px;border-radius:10px;border:2px solid var(--ink);font-family:inherit;background:var(--paper)}
.r-email button{font-size:14.5px;font-weight:700;padding:11px 16px;border-radius:10px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);cursor:pointer;font-family:inherit}
.r-email button:hover{background:var(--coral-deep);border-color:var(--coral-deep)}

/* ── on-site player overlay ── */
.player-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(15,13,10,.82);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.player-box{
  position:relative;width:min(960px,100%);background:var(--paper);
  border:2.5px solid var(--ink);border-radius:var(--r);overflow:hidden;
  box-shadow:8px 8px 0 rgba(0,0,0,.5);
}
.player-close{
  position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;
  border:2px solid var(--ink);background:var(--butter);font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;
}
.player-close:hover{background:var(--coral)}
.player-frame{position:relative;aspect-ratio:16/9;background:#000}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-box{max-height:92vh;overflow-y:auto}
.player-meta{padding:18px 22px 20px}
.player-meta h3{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:21px;line-height:1.2;margin-top:8px}
.player-meta .p-block{
  border-left:4px solid var(--coral);background:#fdf3d0;border-radius:0 12px 12px 0;
  padding:11px 15px;margin-top:12px;
}
.player-meta .p-block b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep)}
.player-meta .p-block p{font-size:15px;color:var(--ink-soft);margin-top:3px}
.player-meta .p-tools{margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.player-meta .p-tools .lbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.player-meta .p-tools a.chip{text-decoration:none;background:var(--butter)}
.player-meta .p-tools a.chip:hover{background:var(--coral)}
.player-meta .p-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:7px;flex-wrap:wrap}
.player-meta .p-src{font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.player-meta .p-out{font-size:14px;font-weight:700;text-decoration:none;color:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:7px 15px}
.player-meta .p-out:hover{background:var(--butter)}
.player-meta .p-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.player-meta button.p-out{font:inherit;font-size:14px;font-weight:700;background:transparent;cursor:pointer;line-height:normal}
.p-next{margin-top:14px;border-top:1.5px solid var(--line);padding-top:12px}
.player-meta .p-bite{margin-top:14px;border-top:1.5px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--ink-soft)}
.player-meta .p-bite-go{font-weight:800;color:var(--ink);text-decoration:none;background:var(--butter);border:2px solid var(--ink);border-radius:99px;padding:7px 14px;white-space:nowrap}
.player-meta .p-bite-go:hover{background:var(--coral)}
.p-next .lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.nxt-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.nxt{display:flex;flex-direction:column;gap:6px;text-decoration:none;border:1.5px solid var(--line);border-radius:12px;padding:8px;background:var(--paper)}
.nxt:hover{border-color:var(--ink);background:#f5f0e4}
.nxt img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1.5px solid var(--ink)}
.nxt span{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:560px){.nxt-row{grid-template-columns:repeat(3,1fr)}.nxt span{display:none}}
.player-meta .vmeta{align-items:center}
.p-vote{display:flex;align-items:center;gap:7px;margin-left:auto}
.p-vote .lbl{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vote-btn{
  width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:var(--card);
  font-size:14px;cursor:pointer;font-family:inherit;
}
.vote-btn:hover{background:var(--butter)}
.vote-btn.on{background:var(--sage)}
.vote-btn.on[data-vote="down"]{background:var(--coral)}
.vote-btn:disabled{cursor:default;opacity:.9}
.vote-btn:disabled:not(.on){opacity:.35}

/* ── footer feedback widget ── */
.fb-overlay{position:fixed;inset:0;z-index:200;background:rgba(15,13,10,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.fb-box{position:relative;width:min(480px,100%);background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 rgba(0,0,0,.5);padding:24px 26px}
.fb-box strong{font-weight:800;font-size:20px;display:block;padding-right:40px}
.fb-box p{font-size:14px;color:var(--ink-soft);margin-top:5px}
.fb-box textarea,.fb-box input[type=email]{width:100%;font-family:inherit;font-size:14.5px;border:2px solid var(--ink);border-radius:12px;background:var(--card);padding:11px 13px;margin-top:12px;resize:vertical}
.fb-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.fb-send{font-family:inherit;font-size:14.5px;font-weight:700;padding:11px 22px;border-radius:99px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);cursor:pointer}
.fb-send:hover{background:var(--coral-deep);border-color:var(--coral-deep)}
.fb-box .form-note{margin-top:0}
.fb-thanks{font-size:15px;font-weight:600;color:var(--sage-deep);margin-top:14px}

/* ── Weekly Bite signup modal (opened by every CTA) ── */
.bite-box{background:var(--butter);text-align:center}
.bite-box .bite-em{font-size:44px;display:block;margin-bottom:4px}
.bite-box strong{font-size:26px;padding-right:0;color:#33270a}
.bite-box p{color:#5c4a17;font-size:14.5px;max-width:30em;margin:6px auto 0}
.bite-box input[type=email]{background:var(--paper);text-align:center}
.bite-box .fb-row{justify-content:center;flex-wrap:wrap}
.bite-box .form-note{flex-basis:100%;text-align:center;color:#5c4a17}
.bite-box .form-note.ok{color:#2c5a30}

/* ── scoreboard cards ── */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sb{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);box-shadow:4px 4px 0 rgba(25,23,20,.9);padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.sb-head{display:flex;align-items:center;gap:10px}
.sb-em{font-size:24px;line-height:1}
.sb-head h3,.layer-head h3{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:19px;line-height:1.2}
.sb-lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.sb-pick b{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:20px;line-height:1.25;display:inline;background:linear-gradient(transparent 62%, var(--butter) 62%)}
/* Scoreboard cards speak bento: rotating pastel tints (same palette as acards). */
.sb.c1{background:#fdf3d0}.sb.c2{background:#e7f0e4}.sb.c3{background:#fde5dc}
.sb.c4{background:#e6eafb}.sb.c5{background:#f3e8f8}.sb.c6{background:#e0f0ed}
.sb-pick p,.sb-row p{font-size:13.5px;color:var(--ink-soft);margin-top:2px}
.sb-row.moved p{font-weight:600;color:var(--ink)}
.sb-row.moved .sb-lbl{color:var(--coral-deep)}
.sb .l-see{margin-top:auto}
.live-boards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
@media (max-width:800px){.sgrid{grid-template-columns:1fr}}

/* ── the stack: money moves + layers ── */
.mm-meta{font-size:14.5px;color:var(--ink-soft);margin:6px 0 14px}
.mm-list{display:flex;flex-direction:column;gap:12px}
.mm{display:grid;grid-template-columns:64px 108px 1fr auto;gap:14px;align-items:center;text-decoration:none;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);box-shadow:4px 4px 0 rgba(25,23,20,.9);padding:14px 18px}
.mm:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(25,23,20,.9);transition:transform .13s ease,box-shadow .13s ease}
@media (prefers-reduced-motion: reduce){.mm:hover{transform:none}}
.mm-date{font-weight:800;font-size:13px;color:var(--muted);white-space:nowrap}
.mm-kind{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:99px;padding:3px 9px;text-align:center;color:var(--ink)}
.mm-kind.coral{background:var(--coral)}.mm-kind.sage{background:var(--sage)}.mm-kind.peri{background:var(--peri)}.mm-kind.butter{background:var(--butter)}
.mm-text{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45}
.mm-layer{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.mm-watch{font-weight:700;color:var(--ink)}
.mm-month{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:14px 0 2px;padding-left:2px}
.mm-month:first-child{margin-top:0}
.layer-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:4px}
.stack-note{font-size:13px;color:var(--muted);border:1.5px dashed var(--muted);border-radius:12px;padding:10px 14px;margin-top:18px}
.layers{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.layer{position:relative;overflow:hidden;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);box-shadow:4px 4px 0 rgba(25,23,20,.9);padding:20px 22px;display:flex;flex-direction:column;gap:7px}
/* Layer tints carry meaning: apps=sage, labs=plum, clouds=peri, chips=coral, energy=butter. */
.layer.ln5{background:#e7f0e4}.layer.ln4{background:#f3e8f8}.layer.ln3{background:#e6eafb}
.layer.ln2{background:#fde5dc}.layer.ln1{background:#fdf3d0}
.layer-big{position:absolute;right:10px;bottom:-30px;font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:150px;line-height:1;color:var(--ink);opacity:.06;pointer-events:none;user-select:none}
.layer-head{display:flex;align-items:center;gap:10px}
.layer-n{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.layer-who{font-size:13px;font-weight:700;color:var(--coral-deep);line-height:2}
.layer-who a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.layer-who a:hover{color:var(--ink)}
.layer-who .wsep{color:var(--muted);font-weight:400}
.layer-who .tick{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--muted);border:1.5px solid var(--line);border-radius:6px;padding:1.5px 6px;background:var(--card);vertical-align:1.5px}
.layer-plain{font-size:14.5px;font-weight:600;color:var(--ink)}
.layer-money{font-size:13.5px;color:var(--ink-soft)}
@media (max-width:700px){.mm{grid-template-columns:56px 1fr;grid-template-rows:auto auto}.mm-text{grid-column:1/-1}.mm-layer{display:none}}

/* ── responsive ── */
@media (max-width:1000px){
  .bento-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .t-head{grid-column:auto;grid-row:auto;padding:26px 24px}
  .t-video{grid-column:auto;grid-row:auto}
  .t-quiz,.t-daily{grid-column:auto;grid-row:auto;min-height:170px}
  .vgrid,.path-strip,.persona-strip{grid-template-columns:1fr}
  .reads{grid-template-columns:1fr}
  .tools{grid-template-columns:repeat(2,1fr)}
  .promise-inner{grid-template-columns:1fr}
  .pr{border-right:none;border-bottom:1.5px solid rgba(250,247,240,.25)}
  .nav-links{display:none}
  /* Phone header = logo left, burger right; the CTA moves into the menu +
     the sticky bottom pill so the wordmark never wraps. */
  .nav-cta{display:none}
  .nav-burger{display:flex}
  .nav-inner{justify-content:space-between;min-height:44px}
  .sticky-bite{
    position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:110;
    display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
    background:var(--ink);color:var(--paper);font-weight:800;font-size:16px;
    padding:15px 20px;border-radius:99px;border:2px solid var(--ink);
    box-shadow:0 8px 24px rgba(15,13,10,.35);
    transform:translateY(120px);opacity:0;transition:transform .25s ease,opacity .25s ease;pointer-events:none;
  }
  .sticky-bite.show{transform:none;opacity:1;pointer-events:auto}
  @media (prefers-reduced-motion: reduce){.sticky-bite{transition:none}}
  /* Room for the pill: the legal row must scroll clear above it. */
  footer{padding-bottom:104px}
  .lesson{flex-direction:column;gap:12px}
  .path-hero .inner{padding:70px 28px 28px}
  .qcard{padding:24px 20px}
}
@media (max-width:700px){
  /* Section heads: pill gets its own single line under the heading —
     no more two-and-three-line pill blobs. */
  .zone-head{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:8px 12px}
  .zone-head .rule{display:none}
  .zone-head .pill{grid-column:1/-1;justify-self:start;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .frow{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -28px;padding:2px 28px}
  .frow::-webkit-scrollbar{display:none}
  .fbtn{white-space:nowrap;flex:none}
  .fsearch{min-width:0;max-width:none;flex:1}
}

/* ── HOMEPAGE-ONLY mobile rails: sections swipe left-right instead of stacking,
   so vertical scroll = section-to-section, horizontal = dial into one section.
   The next card peeks in from the right as the swipe affordance. Library pages
   (watch/read/recipes) keep vertical stacks — they're the dial-in destination. ── */
@media (max-width:1000px){
  .home .vgrid,.home .reads,.home .rgrid,.home .tools,.home .path-strip,.home .persona-strip{
    display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scroll-padding-left:28px;scrollbar-width:none;
    gap:14px;margin:0 -28px;padding:2px 28px 10px;
  }
  .home .vgrid::-webkit-scrollbar,.home .reads::-webkit-scrollbar,.home .rgrid::-webkit-scrollbar,
  .home .tools::-webkit-scrollbar,.home .path-strip::-webkit-scrollbar,.home .persona-strip::-webkit-scrollbar{display:none}
  .home .vgrid>*,.home .reads>*,.home .rgrid>*,.home .tools>*,.home .path-strip>*,.home .persona-strip>*{
    flex:none;scroll-snap-align:start;
  }
  .home .vgrid>.vcard,.home .path-strip>.pcard,.home .persona-strip>.pcard{width:min(82vw,330px)}
  .home .reads>.acard,.home .rgrid>.rcp{width:min(85vw,340px)}
  .home .tools>.tcard{width:min(62vw,240px)}
  .home .reads>.acard{align-items:flex-start}
}
@media (max-width:560px){
  .tools{grid-template-columns:1fr}
  .acard{align-items:flex-start}
  .a-ico{width:64px;height:64px}
}

/* Phones: every form control at 16px. Below 16px iOS Safari auto-zooms the page
   when a field takes focus (the feedback textarea autofocuses on every page) and
   the page stays zoomed after the modal closes = sideways scroll (Ricky 08-18). */
@media (max-width:1000px){html body input,html body textarea,html body select,html body .fsearch,html body .r-email input,html body .t-daily input,html body .fb-box textarea,html body .fb-box input[type=email]{font-size:16px}}

/* Scroll-reveal initial state (index.html sets html.js-reveal in <head> only when
   motion is allowed; the reveal script removes it if GSAP is missing). Cards sit
   hidden + 18px low until GSAP marks them .rv-in — no flash of visible-then-hidden. */
.js-reveal .vcard:not(.rv-in),.js-reveal .acard:not(.rv-in),.js-reveal .tcard:not(.rv-in),.js-reveal .pcard:not(.rv-in),.js-reveal .pr:not(.rv-in),.js-reveal .tile:not(.rv-in),.js-reveal .zone-head:not(.rv-in){opacity:0;transform:translateY(18px)}
@media (max-width:1000px){.js-reveal .vcard:not(.rv-in),.js-reveal .acard:not(.rv-in),.js-reveal .tcard:not(.rv-in),.js-reveal .pcard:not(.rv-in),.js-reveal .pr:not(.rv-in),.js-reveal .tile:not(.rv-in),.js-reveal .zone-head:not(.rv-in){transform:scale(.97)}}

/* hero intro helpers: words animate as inline-blocks; the butter highlight starts at
   0 width and GSAP wipes background-size to 100% */
.t-head h1 .w{display:inline-block}
.t-head h1 .hl.hl-wipe{background-repeat:no-repeat;background-size:0% 100%}

/* "· N new" pill on Watch (nav + mobile menu) — see render.js newSinceVisit */
.new-pill{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;letter-spacing:.02em;background:var(--coral);color:var(--ink);border-radius:99px;padding:2px 7px;vertical-align:1px}
.mm-link .new-pill{font-size:12px;margin-left:8px}

/* ── 404 page ── */
.nf .nf-grid{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:34px;align-items:center}
.nf .kick{color:var(--coral-deep)}
.nf h1{font-family:'Bricolage Grotesque','Bricolage-fallback',sans-serif;font-weight:800;font-size:clamp(34px,4.6vw,58px);line-height:1.02;margin-top:8px}
.nf h1 .hl{background:linear-gradient(transparent 58%, var(--butter) 58%)}
.nf .dek{margin-top:14px;font-size:17px;color:var(--ink-soft);max-width:56ch}
.nf-search{display:flex;gap:10px;margin-top:20px;max-width:560px}
.nf-search .fsearch{min-width:0;flex:1;max-width:none}
.nf-btn{font-family:inherit;font-weight:800;font-size:15px;padding:11px 20px;border-radius:99px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);cursor:pointer;white-space:nowrap}
.nf-btn:hover{background:var(--coral-deep);border-color:var(--coral-deep)}
.nf-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.nf-chip{text-decoration:none;color:var(--ink);font-weight:700;font-size:14px;border:2px solid var(--ink);border-radius:99px;padding:7px 14px;background:var(--card)}
.nf-chip:hover{background:var(--butter)}
.nf-plate{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.nf-plate .plate{width:78%;aspect-ratio:1;border-radius:50%;background:#fff;border:2.5px solid var(--ink);box-shadow:8px 8px 0 rgba(25,23,20,.9);position:relative;animation:plate-in .9s cubic-bezier(.2,.9,.3,1.2) both}
.nf-plate .plate::before{content:"";position:absolute;inset:14%;border-radius:50%;border:2px dashed var(--line)}
.nf-plate .crumb{position:absolute;width:7px;height:7px;border-radius:2px;background:#c9a24d;transform:rotate(20deg)}
.nf-plate .c1{left:36%;top:52%}.nf-plate .c2{left:56%;top:44%;width:5px;height:5px}.nf-plate .c3{left:48%;top:63%;width:6px;height:4px}.nf-plate .c4{left:62%;top:58%;width:4px;height:4px}
.nf-plate .fork{position:absolute;right:2%;bottom:6%;font-size:44px;transform:rotate(-18deg);animation:fork-in 1s .25s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes plate-in{from{opacity:0;transform:translateY(24px) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes fork-in{from{opacity:0;transform:translate(20px,20px) rotate(30deg)}to{opacity:1;transform:rotate(-18deg)}}
@media (prefers-reduced-motion: reduce){.nf-plate .plate,.nf-plate .fork{animation:none}}
@media (max-width:1000px){.nf .nf-grid{grid-template-columns:1fr;gap:18px}.nf-plate{width:min(200px,55vw);margin:0 auto 6px}}