@font-face{font-family:"TT Firs Neue";src:url("fonts/TT-Firs-Neue-Light.woff2") format("woff2");font-weight:300;font-display:swap;}
@font-face{font-family:"TT Firs Neue";src:url("fonts/TT-Firs-Neue-Regular.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"TT Firs Neue";src:url("fonts/TT-Firs-Neue-Medium.woff2") format("woff2");font-weight:500;font-display:swap;}

/* =====================================================================
   aw2b-demo.css — the interactive ClutchDay app demo.

   Extracted from the June "Clutchday App Store" mockup
   (funnels/The Challenge/VSL Version/IOS App Copy/). A verbatim copy of
   that source lives beside this file in _original/ and is never edited.

   WHAT CHANGED vs the source:
   - The App Store listing is gone. That page put every word of the pitch
     inside a 402pt screen at App Store type size, wrapped in version
     history, compatibility rows, a review summary and a legal wall. It
     also showed calorie counts and macro rings, which contradict the
     offer ("no calorie counting") and the real app, which never prints a
     calorie on the timeline. Only the four LIVE screens survive.
   - The phone is no longer the page. It is one element inside a normal
     landing page, so all the store-listing chrome, the fullscreen
     `.stage` centring and the viewport `fit()` scaler are gone.
   - Fonts point at the woff2 files this funnel already ships.

   Section map: device frame · status bar · tab bar · page system ·
   .ap app screens · fuel plan + spotlight tour · plan meals · coach.
   ===================================================================== */


:root{
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --cd-font: "TT Firs Neue", var(--sf);
  --as-blue: #0a84ff;            /* App Store action blue (light mode ~ #007aff/#0a84ff) */
  --as-blue-open: #1d8fff;
  --as-ink: #1c1c1e;             /* primary label */
  --as-ink-2: #8a8a8e;           /* secondary label */
  --as-ink-3: #aeaeb2;           /* tertiary */
  --as-hair: rgba(60,60,67,0.12);/* separators */
  --as-fill: #e9e9eb;            /* secondary fill (gray pills) */
  --cd-accent:#00D2FF;
  --cd-card-gradient:linear-gradient(135deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.02) 50%,rgba(0,0,0,0.20) 100%);
}

/* The global reset and page background live in aw2b-page.css. This module
   owns nothing outside .aw2-demo. */


/* =====================  DEVICE FRAME  ===================== */
/* --scale is set by the page stylesheet per breakpoint. The wrapper reserves
   the SCALED height so the phone never overlaps the sections around it —
   transform alone does not affect layout. */
.aw2-demo__stage{
  --scale:1;
  width:calc(430px * var(--scale));
  height:calc(902px * var(--scale));
  margin-inline:auto;
  display:flex;align-items:flex-start;justify-content:center;
  contain:layout paint;
}
.aw2-demo__stage .phone-scaler{transform:scale(var(--scale));transform-origin:top center;}
.phone{
  position:relative;
  width:402px;height:874px;
  background:#0a0a0a;
  border-radius:60px;
  padding:14px;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.4),
    0 40px 80px -20px rgba(0,0,0,0.65),
    inset 0 0 0 2px #2a2a2c;
}
.phone::after{ /* side buttons hint */
  content:"";position:absolute;left:-2px;top:190px;width:3px;height:64px;border-radius:3px;background:#1a1a1c;
  box-shadow:0 84px 0 #1a1a1c, 0 -96px 0 #1a1a1c;
}
.screen{
  position:relative;width:100%;height:100%;
  background:#fff;border-radius:47px;overflow:hidden;
  display:flex;flex-direction:column;
}

/* The dynamic island and status bar rules lived here. Both are gone: they
   were absolutely positioned at z-index 55/60 OVER .ap-scroll (z-index 1), so
   any tour scroll pushed the app's own header underneath a fake 9:41 and a
   notch. Real iOS hides content behind an opaque bar; this mockup did not,
   and a fake clock earns nothing on a landing page. */

/* =====================  APP STORE TAB BAR  ===================== */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:58;height:84px;
  background:rgba(249,249,249,0.94);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-top:0.5px solid var(--as-hair);
  display:flex;align-items:flex-start;padding:8px 6px 0;
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;color:#8e8e93;font-family:var(--sf);}
.tab svg{width:25px;height:25px;}
.tab .t-label{font-size:10px;font-weight:500;letter-spacing:0.1px;}
.tab.active{color:var(--as-blue);}
.tab.active .search-pill{}
/* The source's "tap me" tab pulse lived here, keyed to #sitenav and Apple's
   blue. This page has no #sitenav and the bar is dark, so the pulse is
   restated in aw2b-page.css as bNavPulse — in the accent, and gated on
   .is-live so the tabs never twitch while the phone is off screen. */
.tab svg{transition:transform .15s;}


/* =====================================================================
   PAGE SYSTEM (Store listing + live app demos)
   ===================================================================== */
.pages{position:absolute;inset:0;z-index:1;}
.page{position:absolute;inset:0;display:none;}
.page.is-active{display:block;animation:pageIn .3s var(--cd-ease,ease);}
@keyframes pageIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}


/* ---- site navigation (repurposed Apple tab bar) ---- */
.tabbar .tab .t-label{font-size:10px;}

/* =====================================================================
   FULL-SIZE CLUTCHDAY APP SCREENS (.ap)  — dark, cyan, TT Firs Neue
   ===================================================================== */
.ap{position:absolute;inset:0;background:#000;color:#fff;font-family:var(--cd-font);overflow:hidden;}
.ap-bg{position:absolute;inset:0;background:url("assets/bg-brushstroke.jpg") center/cover;opacity:0.06;pointer-events:none;}
/* top padding was 60px to clear the status bar; 22px is now just breathing
   room under the screen's rounded top edge. */
.ap-scroll{position:absolute;inset:0;z-index:1;overflow-y:auto;overflow-x:hidden;padding:22px 20px 104px;}
.ap-scroll::-webkit-scrollbar{display:none;}

/* app top bar: brand + persistent Get CTA */
.ap-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.ap-brand{display:flex;align-items:center;gap:8px;}
.ap-brand img{height:22px;}
.ap-brand .streak{display:flex;align-items:center;gap:3px;background:rgba(255,255,255,0.07);border:0.5px solid rgba(255,255,255,0.12);border-radius:999px;padding:4px 9px;font-size:12px;}
.ap-brand .streak svg{width:13px;height:13px;color:#ff8a3d;}
.get-pill{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;border:none;font-family:var(--cd-font);
  font-size:13.5px;font-weight:500;color:#001417;
  background:linear-gradient(90deg,#00D2FF,rgba(0,210,255,0.78));
  padding:9px 15px;border-radius:999px;box-shadow:0 6px 16px rgba(0,210,255,0.4);
  transition:transform .12s var(--cd-ease,ease), box-shadow .12s;white-space:nowrap;
}
.get-pill:active{transform:scale(0.96);}
.get-pill svg{width:14px;height:14px;}

/* headings */
.ap-h1{font-size:26px;font-weight:500;letter-spacing:-0.01em;line-height:1.1;}
.ap-h1 .muted{color:rgba(255,255,255,0.5);}
.ap-eyebrow{font-size:11px;font-weight:600;letter-spacing:0.2em;color:var(--cd-accent);text-transform:uppercase;margin:22px 2px 12px;}
.ap-sub{font-size:13px;color:rgba(255,255,255,0.6);margin-top:4px;}

.ap-card{background:var(--cd-card-gradient);border:0.5px solid rgba(255,255,255,0.1);border-radius:18px;box-shadow:0 10px 18px rgba(0,0,0,0.4);padding:16px;}

/* next-up banner */
.ap-next{display:flex;align-items:center;gap:12px;background:rgba(0,210,255,0.1);border:0.5px solid rgba(0,210,255,0.3);border-radius:16px;padding:13px 15px;margin-bottom:16px;transition:background .3s;}
.ap-next .nxt-ico{width:34px;height:34px;border-radius:10px;background:rgba(0,210,255,0.18);display:flex;align-items:center;justify-content:center;color:var(--cd-accent);flex-shrink:0;}
.ap-next .nxt-ico svg{width:18px;height:18px;}
.ap-next .nxt-label{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--cd-accent);}
.ap-next .nxt-title{font-size:15px;font-weight:500;margin-top:1px;}
.ap-next .nxt-when{margin-left:auto;font-size:13px;color:rgba(255,255,255,0.65);font-weight:500;}

/* progress meter */
.ap-meter{margin-bottom:18px;}
.ap-meter-top{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;color:rgba(255,255,255,0.7);margin-bottom:8px;}
.ap-meter-top b{color:#fff;font-weight:600;}
.ap-bar{height:8px;border-radius:8px;background:rgba(255,255,255,0.1);overflow:hidden;}
.ap-bar > i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#00D2FF,rgba(0,210,255,0.7));transition:width .5s var(--cd-ease,ease);}

/* hydration card */
.ap-hydro{display:flex;flex-direction:column;gap:12px;}
.ap-hydro-top{display:flex;align-items:center;justify-content:space-between;}
.ap-hydro-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;}
.ap-hydro-title svg{width:18px;height:18px;color:#3ba6ff;}
.ap-hydro-val{font-size:14px;color:rgba(255,255,255,0.7);}
.ap-hydro-val b{color:#fff;font-weight:600;font-size:16px;}
.ap-hydro-bar{height:10px;border-radius:10px;background:rgba(255,255,255,0.1);overflow:hidden;}
.ap-hydro-bar > i{display:block;height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,#1d6fff,#3bd0ff);transition:width .5s var(--cd-ease,ease);}
.ap-hydro-btns{display:flex;gap:8px;}
.ap-hydro-btns .wb{flex:1;text-align:center;font-family:var(--cd-font);font-size:13px;font-weight:500;color:#cfeeff;background:rgba(59,166,255,0.12);border:0.5px solid rgba(59,166,255,0.35);border-radius:12px;padding:9px 0;transition:background .2s, transform .12s;}
.ap-hydro-btns .wb.flash{background:rgba(59,166,255,0.4);transform:scale(0.96);}

/* checklist rows */
.ap-list{display:flex;flex-direction:column;gap:10px;}
.ap-row{display:flex;align-items:center;gap:12px;}
.ap-check{width:30px;height:30px;border-radius:50%;background:transparent;border:2px solid rgba(255,255,255,0.25);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#001417;transition:background .35s var(--cd-ease,ease), border-color .35s;}
.ap-check.done{background:var(--cd-accent);border-color:var(--cd-accent);box-shadow:0 0 0 0 rgba(0,210,255,0.5);}
.ap-check svg{width:15px;height:15px;opacity:0;transform:scale(0.5);transition:opacity .3s, transform .3s;}
.ap-check.done svg{opacity:1;transform:none;}
.ap-row-body{flex:1;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.08);border-radius:15px;transition:background .35s;}
.ap-row.done .ap-row-body{background:rgba(0,210,255,0.07);border-color:rgba(0,210,255,0.2);}
.ap-row-title{font-size:14.5px;font-weight:500;transition:color .35s;}
.ap-row.done .ap-row-title{color:rgba(255,255,255,0.55);text-decoration:line-through;}
.ap-row-time{font-size:12.5px;color:rgba(255,255,255,0.55);}
/* event row variant */
.ap-row.event .ap-row-body{background:rgba(255,138,61,0.1);border-color:rgba(255,138,61,0.3);}
.ap-row.event .ap-check{border-color:rgba(255,138,61,0.6);background:transparent;}
.ap-row.event .ap-row-title{color:#ffb27a;}
.ap-row .pill-srv{font-size:11px;color:rgba(255,255,255,0.5);}

/* generic page placeholder (stub) */
.ap-stub{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:rgba(255,255,255,0.7);text-align:center;padding:40px;}
.ap-stub .ico{width:54px;height:54px;border-radius:16px;background:rgba(0,210,255,0.14);border:0.5px solid rgba(0,210,255,0.3);display:flex;align-items:center;justify-content:center;color:var(--cd-accent);}
.ap-stub .ico svg{width:26px;height:26px;}
.ap-stub h3{font-size:19px;font-weight:500;color:#fff;margin:0;}
.ap-stub p{font-size:13.5px;line-height:1.5;margin:0;max-width:240px;}
.ap-stub .get-pill{margin-top:6px;}

/* =====================================================================
   FUEL PLAN page + reusable SPOTLIGHT TOUR
   ===================================================================== */
.ap-fp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.add-event-btn{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-family:var(--cd-font);font-size:13px;font-weight:500;color:#001417;background:linear-gradient(90deg,#00D2FF,rgba(0,210,255,0.78));border:none;border-radius:999px;padding:9px 14px;box-shadow:0 6px 14px rgba(0,210,255,0.35);white-space:nowrap;}
.add-event-btn svg{width:14px;height:14px;}

.weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;background:var(--cd-card-gradient);border:0.5px solid rgba(255,255,255,0.1);border-radius:16px;padding:8px;box-shadow:0 10px 18px rgba(0,0,0,0.4);}
.wday{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 11px;border-radius:11px;position:relative;}
.wday .wd{font-size:8.5px;letter-spacing:0.12em;color:rgba(255,255,255,0.5);}
.wday .wn{font-size:15px;font-weight:500;}
.wday.on{background:linear-gradient(160deg,#00D2FF,rgba(0,210,255,0.78));color:#001417;}
.wday.on .wd{color:rgba(0,20,23,0.65);}
.wdot{position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--cd-accent);}
.wday.on .wdot{background:#001417;}

.fp-daylabel{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;}
.fp-daylabel .d{font-size:16px;font-weight:500;}
.fp-daylabel .hint{font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:#ff8a3d;}
.fp-timeline{display:flex;flex-direction:column;gap:8px;}
.fp-row{display:flex;align-items:center;gap:11px;padding:12px 14px;background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.08);border-radius:14px;}
.fp-row.event{background:rgba(0,210,255,0.08);border-color:rgba(0,210,255,0.28);border-left:2px solid var(--cd-accent);}
.fp-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.4);flex-shrink:0;}
.fp-row.event .fp-dot{background:var(--cd-accent);}
.fp-time{font-size:11px;color:rgba(255,255,255,0.55);width:56px;flex-shrink:0;}
.fp-rbody{flex:1;min-width:0;}
.fp-title{font-size:14px;font-weight:500;}
.fp-sub{font-size:11.5px;color:rgba(255,255,255,0.5);margin-top:2px;}
.fp-tag{font-size:9px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.4);flex-shrink:0;}
.fp-row.event .fp-tag{color:var(--cd-accent);}

.protocol-card{background:linear-gradient(135deg,rgba(0,210,255,0.13),rgba(0,210,255,0.02) 60%,rgba(0,0,0,0.2));border:0.5px solid rgba(0,210,255,0.3);border-radius:16px;padding:14px;}
.pc-head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:0.03em;color:var(--cd-accent);margin-bottom:8px;}
.pc-head svg{width:15px;height:15px;}
.pc-row{display:flex;gap:10px;padding:8px 0;border-top:0.5px solid rgba(255,255,255,0.08);}
.pc-row.first{border-top:none;}
.pc-label{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.5);width:72px;flex-shrink:0;padding-top:1px;}
.pc-text{font-size:12.5px;color:#fff;line-height:1.35;}

.quick-actions{display:flex;flex-direction:column;gap:9px;}
.qa{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:var(--cd-font);font-size:13.5px;color:#fff;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.12);border-radius:14px;padding:13px 15px;}
.qa svg{width:15px;height:15px;color:rgba(255,255,255,0.6);}

/* Fuel Plan — Add Event flow demo */
.add-event-btn.big{font-size:14px;padding:13px 22px;border-radius:999px;}
.fpa{position:relative;height:238px;margin-top:14px;}
.fpa-frame{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;opacity:0;}
.fpa-a{align-items:center;animation:fpaA 8.5s var(--cd-ease,ease) infinite;}
.fpa-b{animation:fpaB 8.5s var(--cd-ease,ease) infinite;}
.fpa-c{animation:fpaC 8.5s var(--cd-ease,ease) infinite;}
@keyframes fpaA{0%{opacity:0}4%,20%{opacity:1}26%,100%{opacity:0}}
@keyframes fpaB{0%,27%{opacity:0}33%,54%{opacity:1}60%,100%{opacity:0}}
@keyframes fpaC{0%,61%{opacity:0}67%,96%{opacity:1}100%{opacity:0}}
.fpa-tap{position:absolute;width:48px;height:48px;border-radius:50%;border:2px solid var(--cd-accent);opacity:0;animation:fpaTap 8.5s var(--cd-ease,ease) infinite;}
@keyframes fpaTap{0%,7%{transform:scale(0.4);opacity:0}12%{opacity:0.85}19%{transform:scale(1.7);opacity:0}20%,100%{opacity:0}}
.fpa-sheet{width:100%;background:var(--cd-card-gradient);border:0.5px solid rgba(255,255,255,0.12);border-radius:16px;padding:14px;box-shadow:0 16px 36px rgba(0,0,0,0.6);}
.fpa-sheet-head{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;margin-bottom:12px;}
.fpa-x{color:rgba(255,255,255,0.5);font-size:18px;line-height:1;}
.fpa-tlabel{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:9px;}
.fpa-types{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.fpa-type{border:0.5px solid rgba(255,255,255,0.14);border-radius:11px;padding:9px 11px;}
.fpa-type b{display:block;font-size:12.5px;font-weight:600;}
.fpa-type span{display:block;font-size:9.5px;color:rgba(255,255,255,0.5);margin-top:2px;}
.fpa-type.sel{border-color:var(--cd-accent);background:rgba(0,210,255,0.08);}
.fpa-field{margin-bottom:11px;}
.fpa-flabel{display:block;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:6px;}
.fpa-input{background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.14);border-radius:11px;padding:11px 13px;font-size:13.5px;}
.fpa-input.focus{border-color:var(--cd-accent);box-shadow:0 0 0 2px rgba(0,210,255,0.25);}
.fpa-times{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:13px;}
.fpa-save{background:linear-gradient(90deg,#00D2FF,rgba(0,210,255,0.78));color:#001417;text-align:center;font-weight:600;font-size:13.5px;padding:11px;border-radius:999px;box-shadow:0 8px 18px rgba(0,210,255,0.35);animation:fpaSave 8.5s var(--cd-ease,ease) infinite;}
@keyframes fpaSave{0%,82%{transform:scale(1)}88%{transform:scale(0.95)}93%,100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.fpa-a,.fpa-b,.fpa-tap,.fpa-save{animation:none}.fpa-c{animation:none;opacity:1}.fpa-a,.fpa-b{opacity:0}}

/* Fuel Plan — Swap meal modal */
.fps{background:var(--cd-card-gradient);border:0.5px solid rgba(255,255,255,0.12);border-radius:16px;padding:14px;box-shadow:0 16px 36px rgba(0,0,0,0.55);}
.fps-head{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;margin-bottom:12px;}
.fps-tabs{display:flex;gap:6px;background:rgba(255,255,255,0.05);border-radius:999px;padding:4px;margin-bottom:6px;}
.fps-tab{flex:1;text-align:center;font-size:10.5px;font-weight:500;padding:7px 4px;border-radius:999px;color:rgba(255,255,255,0.6);white-space:nowrap;}
.fps-tab.on{background:var(--cd-accent);color:#001417;}
.fps .pm-cathead{margin-top:14px;}

/* ---- spotlight tour ---- */
.tour-step{transition:opacity .5s var(--cd-ease,ease), box-shadow .45s var(--cd-ease,ease), filter .5s;border-radius:18px;}
.ap.touring .tour-step{padding:8px;margin:-8px;}
.ap.touring .tour-step:not(.is-spot){opacity:0.4;filter:saturate(0.75) brightness(0.92);}
.ap.touring .tour-step.is-spot{opacity:1;box-shadow:0 0 0 1.5px var(--cd-accent),0 16px 38px rgba(0,210,255,0.22);}
.reveal-on-spot{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--cd-ease,ease),opacity .5s;}
.reveal-on-spot.is-spot{max-height:360px;opacity:1;}
.ap.seen .reveal-on-spot{max-height:600px;opacity:1;}
/* after the guided pass: nothing greyed, every feature stays visible & clickable to replay */
.ap.seen .tour-step{cursor:pointer;}
.ap.seen .tour-step.is-spot{box-shadow:0 0 0 1.5px var(--cd-accent),0 16px 38px rgba(0,210,255,0.22);}
.tour-pop.hidden{display:none;}

.ap.touring .tour-step.is-spot{cursor:pointer;}
.tour-pop{position:absolute;left:14px;right:14px;z-index:25;--pop-bg:#181c22;
  background:var(--pop-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(0,210,255,0.65);border-radius:16px;padding:14px 16px 13px;
  font-family:var(--cd-font);box-shadow:0 0 0 1px rgba(0,210,255,0.25),0 22px 50px rgba(0,0,0,0.78),0 0 42px rgba(0,210,255,0.22);}
.tour-pop::before{content:"";position:absolute;top:-7px;left:26px;width:13px;height:13px;
  background:var(--pop-bg);border-left:1px solid rgba(0,210,255,0.65);border-top:1px solid rgba(0,210,255,0.65);transform:rotate(45deg);}
.tour-pop.below::before{top:auto;bottom:-7px;border-left:none;border-top:none;border-right:1px solid rgba(0,210,255,0.65);border-bottom:1px solid rgba(0,210,255,0.65);}
.tour-pop-no{font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--cd-accent);margin-bottom:4px;}
.tour-pop-text{font-size:14px;line-height:1.45;color:#fff;font-weight:500;}
.tour-pop-ctl{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px;}
.tp-btn{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-family:var(--cd-font);font-size:12.5px;font-weight:500;border-radius:999px;padding:7px 13px;border:0.5px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.06);color:#fff;transition:transform .12s,background .2s,opacity .2s;}
.tp-btn:active{transform:scale(0.95);}
.tp-btn.next{background:linear-gradient(90deg,#00D2FF,rgba(0,210,255,0.78));color:#001417;border:none;}
.tp-btn svg{width:13px;height:13px;}
@keyframes capIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tour-dots{display:flex;gap:5px;align-items:center;}
.tour-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.28);transition:background .3s,width .3s;cursor:pointer;}
.tour-dots i.on{background:var(--cd-accent);width:15px;border-radius:3px;}

/* =====================================================================
   PLAN MEALS page
   ===================================================================== */
.pm-search{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.14);border-radius:12px;padding:11px 13px;color:rgba(255,255,255,0.5);font-size:13px;}
.pm-search svg{width:16px;height:16px;flex-shrink:0;}
.pm-chips{display:flex;gap:7px;overflow:hidden;margin-top:10px;}
.pm-chip{padding:7px 12px;font-size:11px;font-weight:500;letter-spacing:0.04em;border-radius:999px;border:0.5px solid rgba(255,255,255,0.18);color:#fff;white-space:nowrap;}
.pm-chip.on{background:var(--cd-accent);color:#001417;border-color:var(--cd-accent);}
.pm-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pm-card{background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.08);border-radius:14px;overflow:hidden;position:relative;}
.pm-thumb{height:74px;background:linear-gradient(135deg,rgba(0,210,255,0.25),rgba(255,255,255,0.06));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.65);}
.pm-card.photo .pm-thumb{height:92px;background:#1a1a1a center/cover no-repeat;}
.pm-thumb svg{width:24px;height:24px;}
.pm-heart{position:absolute;top:7px;right:7px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;color:#fff;}
.pm-heart svg{width:14px;height:14px;}
.pm-heart.on{color:#ff4d6d;}
.pm-cbody{padding:9px 10px 11px;}
.pm-cname{font-size:12.5px;font-weight:500;line-height:1.25;}
.pm-cmeta{font-size:10.5px;color:rgba(255,255,255,0.5);margin-top:3px;}

.pm-menu{background:var(--cd-card-gradient);border:0.5px solid rgba(255,255,255,0.1);border-radius:16px;padding:14px;box-shadow:0 10px 18px rgba(0,0,0,0.4);}
.pm-menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.pm-menu-name{font-size:15px;font-weight:500;}
.pm-menu-len{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.45);}
.pm-slot{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:0.5px solid rgba(255,255,255,0.07);}
.pm-slot.first{border-top:none;}
.pm-slot-label{font-size:12px;font-weight:500;width:76px;flex-shrink:0;}
.pm-slot-bar{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,0.1);overflow:hidden;}
.pm-slot-bar > i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#00D2FF,rgba(0,210,255,0.7));}
.pm-slot-count{font-size:11px;color:rgba(255,255,255,0.55);width:30px;text-align:right;flex-shrink:0;}
.pm-slot-count.full{color:var(--cd-accent);}

.pm-family{display:flex;flex-direction:column;gap:10px;}
.pm-fam-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.08);border-radius:13px;padding:10px 12px;}
.pm-ava{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#001417;flex-shrink:0;}
.pm-fam-name{font-size:13px;font-weight:500;flex:1;}
.pm-fam-tag{font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--cd-accent);background:rgba(0,210,255,0.12);border:0.5px solid rgba(0,210,255,0.3);border-radius:999px;padding:3px 8px;}

.pm-apply{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#00D2FF,rgba(0,210,255,0.78));color:#001417;border-radius:14px;padding:13px 16px;font-weight:500;font-size:14px;box-shadow:0 10px 22px rgba(0,210,255,0.32);}
.pm-apply svg{width:16px;height:16px;}

/* Find Meals — category strips */
.pm-cathead{display:flex;align-items:baseline;justify-content:space-between;margin:18px 2px 9px;}
.pm-cathead .ct{font-size:14px;font-weight:600;}
.pm-cathead .sa{display:inline-flex;align-items:center;gap:2px;font-size:11px;color:var(--cd-accent);}
.pm-cathead .sa svg{width:11px;height:11px;}
.pm-strip{display:flex;gap:10px;overflow:hidden;}
.pm-strip .pm-card{flex:0 0 130px;}

/* New Menu builder */
.nm-card{background:var(--cd-card-gradient);border:0.5px solid rgba(255,255,255,0.1);border-radius:16px;padding:14px;box-shadow:0 10px 18px rgba(0,0,0,0.4);}
.nm-flabel{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.5);}
.nm-input{margin-top:6px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.14);border-radius:11px;padding:11px 13px;font-size:13.5px;}
.nm-lenrow{display:flex;gap:8px;margin-top:13px;}
.nm-len{flex:1;text-align:center;font-size:12.5px;font-weight:500;padding:9px 0;border-radius:11px;border:0.5px solid rgba(255,255,255,0.16);color:rgba(255,255,255,0.7);}
.nm-len.on{border-color:var(--cd-accent);color:var(--cd-accent);background:rgba(0,210,255,0.08);}
.nm-slot{margin-top:16px;}
.nm-slot-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;}
.nm-slot-name{font-size:13.5px;font-weight:600;}
.nm-slot-name b{font-weight:600;color:rgba(255,255,255,0.45);}
.nm-slot-ath{font-size:11px;color:rgba(255,255,255,0.4);}
.nm-chip{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.1);border-radius:11px;padding:8px 11px;font-size:12.5px;margin-bottom:8px;}
.nm-chip-ic{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,rgba(0,210,255,0.3),rgba(255,255,255,0.06));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nm-chip-ic svg{width:13px;height:13px;color:#fff;}
.nm-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;font-family:var(--cd-font);font-size:12.5px;color:rgba(255,255,255,0.78);background:none;border:1px dashed rgba(255,255,255,0.22);border-radius:11px;padding:11px;}
.nm-add svg{width:13px;height:13px;}

/* Build Your Plate */
.byp-card{background:var(--cd-card-gradient);border:0.5px solid rgba(255,255,255,0.1);border-radius:16px;padding:14px;box-shadow:0 10px 18px rgba(0,0,0,0.4);}
.byp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px;}
.byp-for{font-size:13px;color:rgba(255,255,255,0.6);}
.byp-for b{color:#fff;font-weight:500;}
.byp-pill{font-size:9px;font-weight:600;letter-spacing:0.07em;color:var(--cd-accent);border:1px solid rgba(0,210,255,0.4);border-radius:999px;padding:5px 10px;white-space:nowrap;}
.byp-step{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.03);border:0.5px solid rgba(255,255,255,0.08);border-radius:13px;padding:12px 13px;margin-bottom:9px;}
.byp-num{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex-shrink:0;}
.byp-step-body{flex:1;}
.byp-cat{font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.5);}
.byp-choose{font-size:14px;font-weight:500;margin-top:2px;}
.byp-chev{color:rgba(255,255,255,0.4);display:flex;}
.byp-chev svg{width:15px;height:15px;}
.byp-colors{background:rgba(255,255,255,0.03);border:0.5px solid rgba(255,255,255,0.08);border-radius:13px;padding:12px 13px;}
.byp-colors-head{display:flex;align-items:center;gap:12px;}
.byp-color-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px;}
.byp-pick{border:1px dashed rgba(255,255,255,0.2);border-radius:11px;padding:9px 11px;}
.byp-pick-l{display:block;font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.45);}
.byp-pick-v{display:block;font-size:13px;margin-top:3px;color:rgba(255,255,255,0.85);}

/* =====================================================================
   COACH chat (simulated "ask Kelsey")
   ===================================================================== */
.ap-coach{position:absolute;inset:0;display:flex;flex-direction:column;background:#000;color:#fff;font-family:var(--cd-font);padding-bottom:84px;}
.coach-head{display:flex;align-items:center;gap:10px;padding:20px 16px 12px;border-bottom:0.5px solid rgba(255,255,255,0.08);position:relative;z-index:2;}
.coach-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(150deg,#00D2FF,rgba(0,210,255,0.7));color:#001417;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;flex-shrink:0;}
.coach-name{font-size:15px;font-weight:500;}
.coach-status{font-size:11px;color:rgba(255,255,255,0.55);margin-top:1px;display:flex;align-items:center;gap:5px;}
.coach-status .dot{width:6px;height:6px;border-radius:50%;background:#22C55E;}
.coach-head .get-pill{margin-left:auto;font-size:12px;padding:7px 12px;}
.coach-scroll{flex:1;overflow-y:auto;padding:16px 14px 6px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:2;}
.coach-scroll::-webkit-scrollbar{display:none;}
.msg{max-width:82%;font-size:13.5px;line-height:1.45;padding:11px 14px;border-radius:18px;animation:msgIn .3s var(--cd-ease,ease);}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,#00D2FF,rgba(0,210,255,0.82));color:#001417;border-bottom-right-radius:6px;font-weight:500;}
.msg.coach{align-self:flex-start;background:rgba(255,255,255,0.07);border:0.5px solid rgba(255,255,255,0.1);border-bottom-left-radius:6px;color:#fff;}
.msg.coach .by{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--cd-accent);margin-bottom:5px;}
.typing{align-self:flex-start;display:flex;gap:4px;padding:13px 15px;background:rgba(255,255,255,0.07);border:0.5px solid rgba(255,255,255,0.1);border-radius:18px;border-bottom-left-radius:6px;}
.typing i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.55);animation:typed 1.2s infinite;}
.typing i:nth-child(2){animation-delay:.18s;}
.typing i:nth-child(3){animation-delay:.36s;}
@keyframes typed{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.coach-cursor{display:inline-block;width:2px;height:1em;background:var(--cd-accent);margin-left:1px;vertical-align:-2px;animation:cblink .9s steps(1) infinite;}
@keyframes cblink{50%{opacity:0}}
.coach-input{display:flex;align-items:center;gap:9px;padding:10px 14px 4px;position:relative;z-index:2;}
.coach-inputbox{flex:1;min-height:42px;display:flex;align-items:center;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.16);border-radius:21px;padding:0 16px;font-size:13.5px;color:#fff;}
.coach-inputbox .ph{color:rgba(255,255,255,0.4);}
.coach-send{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#00D2FF,rgba(0,210,255,0.8));border:none;display:flex;align-items:center;justify-content:center;color:#001417;}
.coach-send svg{width:18px;height:18px;}

/* feature nudge (Store tab only) — subtle, static */
.feature-nudge{position:absolute;left:0;right:0;bottom:100px;z-index:40;display:flex;justify-content:center;pointer-events:none;animation:fnPop .6s var(--cd-ease,ease) both 1s;}
.feature-nudge.hide{display:none;}
@keyframes fnPop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fn-inner{pointer-events:auto;display:inline-flex;align-items:center;background:rgba(255,255,255,0.96);-webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);border:0.5px solid rgba(0,0,0,0.08);border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,0.14);}
.fn-label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;background:none;font-family:var(--sf);font-size:13px;font-weight:600;color:var(--as-blue);padding:10px 7px 10px 15px;}
.fn-label svg{width:13px;height:13px;}
.fn-dot{width:6px;height:6px;border-radius:50%;background:var(--as-blue);flex-shrink:0;animation:fnDot 2.8s ease-in-out infinite;}
@keyframes fnDot{0%,100%{opacity:1}50%{opacity:0.35}}
.fn-x{cursor:pointer;border:none;background:none;color:var(--as-ink-3);font-size:17px;line-height:1;padding:8px 13px 10px 8px;border-left:1px solid rgba(0,0,0,0.1);}
@media (prefers-reduced-motion: reduce){.fn-dot,.feature-nudge{animation:none;}}

/* hint chip (desktop) */
.view-hint{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:200;
  font-family:var(--sf);font-size:12.5px;color:#d8d8dc;background:rgba(20,20,22,0.7);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:0.5px solid rgba(255,255,255,0.12);padding:7px 14px;border-radius:999px;
  display:flex;align-items:center;gap:7px;pointer-events:none;opacity:0;transition:opacity .4s;
}
.view-hint.show{opacity:1;}
.view-hint svg{width:14px;height:14px;}

/* The in-app background texture. The source shipped BG_4-White.png — a
   4106x2879 PNG, 7.7 MB, drawn at 6% opacity inside a 402pt phone. It is now
   the brushstroke this funnel already ships (701x1000, 75 KB), which is the
   same brand texture at the same weight and a portrait aspect that actually
   suits a phone. That one swap is 98% of the page's byte count. */

/* ---- tour countdown --------------------------------------------------------
   A thin bar across the top of the bubble that empties over the step's dwell.
   Without it the tour simply moves on its own and the reader has no idea how
   long they have — which is exactly what "there's no time to read" feels like,
   even after the dwell itself is generous. Hidden when the visitor is driving
   with Back/Next, and while the pointer is holding the step. */
.tour-prog{position:absolute;top:0;left:14px;right:14px;height:2px;overflow:hidden;
  border-radius:0 0 2px 2px;background:rgba(255,255,255,0.10);}
.tour-prog i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;
  background:var(--cd-accent);border-radius:inherit;}
@keyframes tourProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tour-prog{transition:opacity .2s var(--cd-ease,ease);}
.tour-pop.no-prog .tour-prog{opacity:0;}
@media (prefers-reduced-motion: reduce){.tour-prog{display:none;}}