/* ══════════════════════════════════════════════════════════════
   mobile.css — mobile-mode overlay
   Gated entirely by `body.deck-mobile` (set by app.js).
   See docs/superpowers/specs/2026-05-28-responsive-no-overlap-design.md
   ══════════════════════════════════════════════════════════════ */

/* All rules in this file MUST be scoped to body.deck-mobile so they
   are no-ops when the desktop path is active. */

/* ──────────────────────────────────────────────
   Pill→title gap (2026-06-09). The desktop --pill-reserve buffer was widened to
   +100px (style.css) for the tall ~62px desktop pill. The mobile pill is only
   ~36px (font capped 15px, padding 9px 22px), so the original +72 already yields
   a ~36px gap here — on par with desktop's new ~38px. Keeping +72 on mobile also
   reclaims the 28px that a flat +100 stole from the shortest phones (it overflowed
   slides 9 & 10 on iphone-se). So: desktop +100, mobile +72 → consistent gap, no overflow.
   ────────────────────────────────────────────── */
body.deck-mobile{ --pill-reserve:calc(max(env(safe-area-inset-top), clamp(52px,8vh,76px)) + 72px); } /* max(inset, top-margin): clears the notch/Dynamic Island under viewport-fit=cover without wasting space (0 inset on home-button phones like SE → clamp wins) */

/* ──────────────────────────────────────────────
   C2 — Bottom dock nav (replaces left-rail sidenav)
   TASK-063: 13-item strip replaced with prev/counter/next on mobile.
   TASK-064: proportionally shrunk by 40% (×0.6 on every dimension).
   TASK-065: top-right .slide-header hidden — bottom counter is enough.
   ────────────────────────────────────────────── */
body.deck-mobile .sidenav{
  position:fixed;
  left:0; right:0; bottom:0; top:auto;
  width:100%;
  height:calc(38px + env(safe-area-inset-bottom));
  padding:4px 12px env(safe-area-inset-bottom);
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  z-index:200;
  background:rgba(8,18,52,0.92); /* solid — no blur in mobile */
}
body.deck-mobile .sidenav::before{
  display:none;
}
body.deck-mobile .nav-logo,
body.deck-mobile .nav-divider,
body.deck-mobile .nav-item{
  display:none;
}
body.deck-mobile .nav-mobile-prev,
body.deck-mobile .nav-mobile-next{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center; /* TASK-070: ensure button vertically centers in the dock flex row */
  min-width:44px;  /* 44pt Apple HIG / WCAG 2.5.5 comfortable tap target (was 29px); glyph stays 19px, extra area is transparent */
  min-height:44px;
  padding:0;
  background:transparent;
  border:0;
  color:var(--accent-soft);
  font-size:19px;
  line-height:1; /* TASK-070: kill default UA line-height that pushed the chevron glyph above center */
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
body.deck-mobile .nav-mobile-prev.is-disabled,
body.deck-mobile .nav-mobile-next.is-disabled{
  opacity:0.3;
  pointer-events:none;
}
body.deck-mobile .nav-mobile-counter{
  display:inline-flex;
  align-items:center;
  align-self:center; /* TASK-070: vertical center in the dock flex row */
  font-size:12px; /* was 10px — below the ~12px legibility floor on small phones */
  line-height:1; /* TASK-070: match the chevrons' line-height so both controls share the same vertical metric */
  font-variant-numeric:tabular-nums;
  letter-spacing:0.05em;
  color:rgba(255,255,255,0.85);
}

/* TASK-065: hide top-right paging label on mobile (bottom dock covers it). */
body.deck-mobile .slide-header{
  display:none;
}

/* Team-preview badge stays visible on mobile (the slide-header is hidden, so this is
   the only team-only cue). Compact + clear of the safe-area and the centred pill; the
   "· NOT SHOWN TO INVESTORS" suffix is dropped on the narrow viewport. */
body.deck-mobile .team-only-badge{
  top:calc(env(safe-area-inset-top) + 6px);left:10px;
  padding:4px 9px;font-size:8.5px;letter-spacing:1.2px;gap:5px;
}
body.deck-mobile .team-only-badge .tob-sub{display:none;}
body.deck-mobile .team-only-badge .tob-dot{width:5px;height:5px;}

/* Slides container loses left rail. */
body.deck-mobile .slides{
  left:0;
}
/* TASK-066: shrink the slide area on mobile so .slide content can never
   render under the bottom dock. Each slide naturally caps at the dock-top
   instead of overflowing to the viewport edge. */
body.deck-mobile .slide{
  bottom:calc(38px + env(safe-area-inset-bottom));
}
body.deck-mobile .deck-aurora,
body.deck-mobile .deck-noise,
body.deck-mobile .deck-scan{
  left:0;
}

/* ──────────────────────────────────────────────
   C4 — Kill heavy decoration on mobile (perf + readability)
   ────────────────────────────────────────────── */
body.deck-mobile #wireCanvas{ display:none; }
body.deck-mobile .deck-aurora-blob:nth-child(2),
body.deck-mobile .deck-aurora-blob:nth-child(3){ display:none; }
body.deck-mobile .deck-scan{ display:none; }

/* Replace every blur surface with solid — readable text + cheaper paint */
body.deck-mobile .glass,
body.deck-mobile .pill,
body.deck-mobile .pill-dark,
body.deck-mobile .sidenav::before,
body.deck-mobile .nav-label{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background:rgba(8,18,52,0.78) !important;
}
/* Cap pill size on phones so long labels ("HOW WE MAKE MONEY") fit a 375px screen. */
body.deck-mobile .pill,
body.deck-mobile .pill-dark{
  font-size:15px;
  padding:9px 22px;
}

/* ──────────────────────────────────────────────
   C5 — Per-slide mobile layouts
   ────────────────────────────────────────────── */

/* Slide 01 — Intro */
body.deck-mobile .slide[data-index="0"] .hands-wrap{
  display:none;
}
body.deck-mobile .slide[data-index="0"]{
  background:var(--deck-navy);
}
body.deck-mobile .s1-logo-wrap{
  top:var(--pill-reserve);
  transform:translateX(-50%);
  padding:0 24px;
}
body.deck-mobile #gagingLogo{
  width:min(280px,72vw);
}
/* TASK-079: on mobile portrait the GAGING wrap is wide + short (e.g.
   280×60). The desktop rotating ellipse (inset:-18% + transform:rotate)
   sweeps a much bigger area on rotation than its non-rotated extent —
   the glow visibly extends beyond the label. Replace the rotating
   conic-gradient with a STATIC soft radial halo centered on the wrap,
   sized to extend just slightly past the label. Same hue palette. */
body.deck-mobile .s1-logo-wrap.fx-brand::before,
body.deck-mobile .s1-sym-wrap.fx-brand::before{
  inset:0;
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    rgba(187,187,255,0.22) 0%,
    rgba(0,82,245,0.16) 38%,
    transparent 72%
  );
  filter:blur(18px);
  opacity:0;
  transform:none;
}
/* Static halo (no rotation/pulse on mobile) but it still fades in after each
   mark's reveal, matching the desktop timing — 2026-06-03. */
body.deck-mobile .s1-logo-wrap.fx-brand::before{
  animation:s1GlowIn 0.45s ease-out 1.65s forwards;
}
body.deck-mobile .s1-sym-wrap.fx-brand::before{
  animation:s1GlowIn 0.45s ease-out 2.5s forwards;
}
body.deck-mobile .s1-sym-wrap{
  top:50%;
}
body.deck-mobile #gagingSym{
  width:min(96px,22vw);
}
body.deck-mobile .s1-overlay{
  bottom:clamp(80px,12dvh,140px);
  padding:0 24px;
}
body.deck-mobile .s1-title-dark{
  font-size:clamp(36px,8vw,52px);
  text-align:center;
}

/* Slide 02 — Team carousel */
/* TASK-075: s2-team has asymmetric desktop padding (72px left, 20px right)
   that pushes the carousel off-center on mobile. Reset to symmetric. */
body.deck-mobile .s2-team{
  padding-left:16px;
  padding-right:16px;
}
/* Kill the 3-D perspective stack; show one card at a time */
body.deck-mobile .s2-team-carousel{
  perspective:none;
  padding:0 40px 8px; /* TASK-075: 52→40 to widen the card area; nav arrows still fit */
  display:flex;
  align-items:center;
  justify-content:center; /* TASK-075: center the carousel horizontally */
  width:100%;
}
/* 2026-06-11: tight title→card gap + fill the stage. The card used to center in
   a tall stage (justify-content:flex-end), leaving a ~137px gap; now the stage
   top-aligns its content (tight gap) and the carousel fills the stage so the
   card can be a CONSTANT height that uses the full iPhone-17 room. The nav arrows
   (top:50%) stay centered because the card fills the carousel. */
body.deck-mobile .slide[data-index="3"] .s2-team{
  row-gap:clamp(14px,2.6vh,24px); /* was clamp(28px,4vh,48px) */
}
body.deck-mobile .slide[data-index="3"] .s2-team__stage{
  justify-content:flex-start;
  padding-top:0;
}
body.deck-mobile .slide[data-index="3"] .s2-team-carousel{
  flex:1; /* fill the stage so the card fills it (constant height per device) */
  min-height:0; /* let flex shrink it to the stage instead of overflowing under the dock */
  padding:0 40px 24px; /* keep the 24px bottom so the "Swipe" hint clears the card */
}
body.deck-mobile .s2-team-deck{
  transform-style:flat;
  width:min(360px,calc(100vw - 88px)); /* TASK-075: was min(280px,84vw); wider card, leaves 44px each side for nav arrows */
  margin-inline:auto;
  /* height driven by the single visible card */
  min-height:clamp(360px,55dvh,520px);
  height:auto !important;
  max-height:none !important;
}
/* Partner logos on mobile — enlarged +50% from the TASK-074 defaults
   (2026-06-11, per request): all slot dims ×1.5, footer gap/padding/min-height
   scaled to match so the bigger logos sit comfortably and still fit one row. */
body.deck-mobile .s2-member-card__logos{
  gap:9px; /* 6×1.5 */
  padding:12px 15px; /* 8/10 ×1.5 */
  min-height:72px; /* 48×1.5 */
}
body.deck-mobile .s2-member-card__logos--count-1 .s2-member-card__logo-slot{
  width:min(188px,70%); /* 125×1.5 */
  height:51px; /* 34×1.5 */
}
body.deck-mobile .s2-member-card__logos--count-1 .s2-member-card__logo-slot img{
  max-height:45px; /* 30×1.5 */
}
body.deck-mobile .s2-member-card__logos--count-2 .s2-member-card__logo-slot{
  width:72px; /* 48×1.5 */
  height:56px; /* 37×1.5 */
}
body.deck-mobile .s2-member-card__logos--count-3 .s2-member-card__logo-slot{
  width:60px; /* 40×1.5 */
  height:51px; /* 34×1.5 */
}
body.deck-mobile .s2-member-card__logos--count-4 .s2-member-card__logo-slot{
  width:51px; /* 34×1.5 */
  height:47px; /* 31×1.5 */
}
body.deck-mobile .s2-member-card__logos--count-5 .s2-member-card__logo-slot{
  width:47px; /* 31×1.5 */
  height:41px; /* 27×1.5 */
}
/* Hide all non-front cards */
body.deck-mobile .s2-team-deck .s2-member-card:not(.card-pos-0){
  display:none !important;
}
/* Reset the front card to normal flow */
body.deck-mobile .s2-team-deck .s2-member-card.card-pos-0{
  position:static !important;
  transform:none !important;
  opacity:1 !important;
  filter:none !important;
  width:100%;
  /* 2026-06-11: content-hug — was height:clamp(360px,55dvh,520px). The card now
     sizes to its content (photo aspect-ratio + body text) so there's no dead
     whitespace; see the .slide[data-index="3"] block below. */
  height:auto;
}
/* Team founder card on mobile (2026-06-11). Folds in the earlier passes — bio
   scrolls (app.js [data-deck-scrollable] guard + CSS scroll-shadows), solid
   white, logos −30%, tight title gap — and uses a FIXED-FILL layout: the deck is
   a flex column that fills the stage and the front card is flex:1, so the card
   is a CONSTANT height per device (no per-founder resize on swipe) and consumes
   the full iPhone-17 room. The extra height goes into a bigger photo (54%) +
   bigger text (+25%). See docs/wiki/decisions.md + navigation.md. */
body.deck-mobile .slide[data-index="3"] .s2-member-card{
  grid-template-rows:38% minmax(0,1fr) auto; /* photo 38% (−30% from 54%); body fills (more bio room); logos auto */
  flex:1 1 auto; /* fill the flex-column deck → constant card height per device */
  min-height:0;
  height:auto;
  background:#fff;
}
body.deck-mobile .slide[data-index="3"] .s2-team-deck{
  display:flex; /* column so the single visible card (flex:1) fills the deck */
  flex-direction:column;
  align-self:stretch; /* fill the carousel height (carousel is flex:1 of the stage) */
  min-height:0;
}
body.deck-mobile .slide[data-index="3"] .s2-member-card__photo{
  height:100%; /* fill the 54% photo row (grid row sets the height — no aspect-ratio) */
  min-height:0;
  max-height:none;
}
body.deck-mobile .slide[data-index="3"] .s2-member-card__body{
  justify-content:flex-start;
  background:transparent; /* the white card shows through */
}
body.deck-mobile .slide[data-index="3"] .s2-member-card__name{
  flex-shrink:0; /* never let a long bio squeeze the name out */
  font-size:26px; /* +25% (was 21px) to fill the bigger card */
}
body.deck-mobile .slide[data-index="3"] .s2-member-card__role-long{
  flex-shrink:0;
  font-size:16px; /* +25% (was 13px) */
}
body.deck-mobile .slide[data-index="3"] .s2-member-card__bio{
  flex:1 1 auto; /* fill the (fixed) body; scroll when the bio runs long */
  min-height:0;
  max-height:none;
  font-size:17px; /* +25% (was 13.5px) */
  scrollbar-width:thin;
  scrollbar-color:rgba(0,82,245,0.28) transparent;
  /* CSS scroll-shadows (Lea Verou): opaque cover layers ride with the text
     (attachment:local) and hide the soft navy shadow layers (attachment:scroll,
     pinned to the box edges) at the very top/bottom — so a shadow shows only
     when there is more bio to scroll in that direction. White covers match the
     now-white card. */
  background:
    linear-gradient(#fff 30%, rgba(255,255,255,0)) center top,
    linear-gradient(rgba(255,255,255,0), #fff 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgba(0,28,85,0.16), rgba(0,28,85,0)) center top,
    radial-gradient(farthest-side at 50% 100%, rgba(0,28,85,0.16), rgba(0,28,85,0)) center bottom;
  background-repeat:no-repeat;
  background-size:100% 20px, 100% 20px, 100% 9px, 100% 9px;
  background-attachment:local, local, scroll, scroll;
}
body.deck-mobile .slide[data-index="3"] .s2-member-card__bio::-webkit-scrollbar{
  width:4px;
}
body.deck-mobile .slide[data-index="3"] .s2-member-card__bio::-webkit-scrollbar-thumb{
  background:rgba(0,82,245,0.28);
  border-radius:4px;
}
/* Ensure nav buttons meet 44 px tap target */
body.deck-mobile .s2-team-nav{
  width:44px;
  height:44px;
  font-size:20px;
}

/* ──────────────────────────────────────────────
   Slide 03 — Mission
   ────────────────────────────────────────────── */
body.deck-mobile .s25-layout{
  padding:var(--pill-reserve) 16px 16px;
  gap:clamp(12px,2vh,24px);
}
body.deck-mobile .cardbeam-embed-wrap{
  --cardbeam-crop-w:min(92vw,520px);
  height:clamp(220px,42dvh,360px);
}

/* Slide 04 — Problem */
body.deck-mobile .s4-problem-layout{
  padding:var(--pill-reserve) 16px 16px;
  gap:clamp(12px,2vh,20px);
}
body.deck-mobile .s4-problem-hero-img{
  /* TASK-076: cap max-height by available column height so the bottom of the image
     never extends past the dock. Reserves: pill (--pill-reserve), dock (38px),
     title + gap (~100px), bottom padding (16px). */
  max-height:min(38dvh, calc(100dvh - var(--pill-reserve) - 38px - 100px));
  max-width:88vw;
}
body.deck-mobile .deck-slide-title{
  font-size:clamp(20px,5vw,32px);
}

/* Slide 05 — Solution */
body.deck-mobile .s5-layout{
  padding:var(--pill-reserve) 16px 16px;
  gap:clamp(8px,1.5vh,16px);
}
body.deck-mobile .s5-solution-title{
  font-size:clamp(22px,5.5vw,36px);
  max-width:92vw;
}
/* TASK-077d: tablet (iPad Mini portrait, mobile mode at ≥600px width) — bump
   subtitle + below text since 1.55vw collapses to the 15-20px clamp floor on
   tablets, making them feel small relative to the larger title. */
body.deck-mobile .s5-solution-title__sub{
  font-size:clamp(15px,3vw,22px);
}
body.deck-mobile .s5-solution-title__sub--below{
  font-size:clamp(21px,4.2vw,31px); /* TASK-077c+d: +40% relative to the bumped __sub */
}
body.deck-mobile .s5-joystick-img,
body.deck-mobile .s5-layout img{
  max-height:26dvh;   /* was 32dvh — shrunk again 2026-06-12 so the two mechanism lines fit below */
  max-width:70vw;
}
/* Trim the blue glow on mobile so its halo doesn't bleed onto the surrounding text. */
body.deck-mobile .s5-joystick-img{
  filter:
    drop-shadow(0 0 8px rgba(0,82,245,0.6))
    drop-shadow(0 0 18px rgba(77,155,255,0.4))
    drop-shadow(0 0 32px rgba(0,82,245,0.22));
}

/* ──────────────────────────────────────────────
   Slide 06 — How It Works
   ────────────────────────────────────────────── */
body.deck-mobile .hiw-layout{
  padding:var(--pill-reserve) 16px 16px;
}
body.deck-mobile .hiw-notify,
body.deck-mobile .hiw-cycle-arrows{
  display:none; /* desktop-only: notify feeds + the 2×2 corner cycle-arrows (mobile stacks the widgets) */
}
body.deck-mobile .hiw-body{
  display:flex;
  flex-direction:column;
  max-width:none;
  gap:12px;
}
/* Option C (2026-06-10): one step at a time — a big CONTAINED phone crossfades the 4
   screens (driven by hiw-06.js), the matching step label crossfades in below, and a
   4-dot indicator tracks position. Replaces the stacked-4-cards layout (the phone
   cropped + node 4 clipped on notched phones). */
body.deck-mobile .hiw-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 10px;
  width:100%;
  flex:1;
  min-height:0;
  overflow:hidden;
  aspect-ratio:auto;
  max-width:none;
  margin-block:0;
}
body.deck-mobile .hiw-hero{
  position:relative;
  left:auto; top:auto; transform:none;
  order:0;
  width:auto;
  flex:0 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}
body.deck-mobile .hiw-hero-frame{ width:auto; height:auto; }  /* shrink-wraps the bezel; keeps position:relative from style.css, so the % video overlay tracks the bezel box */
body.deck-mobile .hiw-hero-bezel{
  width:auto;
  height:auto;
  max-width:84vw;
  max-height:38dvh;   /* self-sized + contained — never cropped, never depends on a flex height chain */
  object-fit:contain;
}
/* The four step labels become a fixed-height crossfade band; only .is-active shows. */
body.deck-mobile .hiw-steps{
  display:block;
  position:relative;
  width:100%;
  max-width:380px;
  min-height:66px;
  flex:0 0 auto;
}
body.deck-mobile .hiw-widget{
  position:absolute !important;
  inset:0 !important;
  left:0 !important; right:0 !important; top:0 !important; bottom:0 !important;
  transform:none !important;
  width:auto !important;
  min-height:0 !important;
  margin:0 !important;
  animation:none !important;
  display:flex !important;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:12px 16px;
  border-radius:16px;
  text-align:center;
  opacity:0;                 /* only the active step is shown (crossfade) */
  transition:opacity .45s ease;
  backdrop-filter:none !important;
  background:rgba(75,139,255,0.14);
  border:1px solid var(--hiw-accent);
  box-shadow:0 0 22px var(--hiw-glow), inset 0 1px 0 rgba(255,255,255,0.12);
}
body.deck-mobile .hiw-widget.is-active{ opacity:1; }
body.deck-mobile .hiw-widget__icon{ width:30px; height:30px; }
body.deck-mobile .hiw-widget__title{ font-size:14px; line-height:1.3; }
body.deck-mobile .hiw-widget::before{
  flex:0 0 auto;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--hiw-accent);
  color:var(--deck-navy);
  font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 14px var(--hiw-glow);
}
body.deck-mobile .hiw-widget--1::before{ content:'1'; }
body.deck-mobile .hiw-widget--2::before{ content:'2'; }
body.deck-mobile .hiw-widget--3::before{ content:'3'; }
body.deck-mobile .hiw-widget--4::before{ content:'4'; }
/* 4-dot position indicator (desktop hides it). */
body.deck-mobile .hiw-dots{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
body.deck-mobile .hiw-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  transition:width .35s ease, background .35s ease;
}
body.deck-mobile .hiw-dot.is-active{
  width:22px;
  border-radius:999px;
  background:var(--hiw-accent);
  box-shadow:0 0 12px var(--hiw-glow);
}

/* Slide — wellness-economy market map (TAM) — REMOVED 2026-06-12 (merged into The Market; mobile overrides cleaned) */

/* Slide 08 (Golden Rush / Market Timing) — REMOVED 2026-06-03 */

/* ──────────────────────────────────────────────
   C9 — Viewport unit hardening
   (100vh → 100dvh handled in style.css)
   ────────────────────────────────────────────── */
body.deck-mobile{
  overscroll-behavior:contain;
}
html, body{
  height:100dvh;
}

/* Slide 09 Competitor (funnel vortex) — REMOVED 2026-06-03 */

/* ══════════════════════════════════════════════
   TASK-R22 — Slide 10 Roadmap
   4 columns (timeline) → 4 rows (vertical) on mobile
   ══════════════════════════════════════════════ */

body.deck-mobile .s10-layout{
  padding:var(--pill-reserve) 16px 12px !important;
  gap:6px;
}

body.deck-mobile .s10-head{
  gap:4px;
}

body.deck-mobile .s10-head .deck-slide-title{
  font-size:clamp(18px,4.5vw,24px);
}

body.deck-mobile .s10-spine{
  display:none;
}

body.deck-mobile .s10-panel{
  padding:6px 8px 8px;
  gap:4px;
  flex:1;
  min-height:0;
  overflow:hidden;
}

body.deck-mobile .s10-journey{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  grid-template-columns:unset;
  grid-template-rows:unset;
  align-items:stretch;
  margin-top:0 !important;
  flex:1;
  min-height:0;
}

body.deck-mobile .s10-col{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:4px;
  padding:4px 6px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(187,187,255,0.2);
  border-radius:6px;
  opacity:1;
  transform:none;
  flex:0 1 auto;
}

body.deck-mobile .s10-col::before{
  display:none;
}

body.deck-mobile .s10-col__head{
  flex:0 0 auto;
  min-width:50px;
  width:auto;
  padding:4px 6px;
  border-radius:6px;
  background:rgba(0,0,0,0.32);
  border:1px solid color-mix(in srgb,var(--s10-accent) 30%,rgba(255,255,255,0.08));
  text-align:left;
  gap:1px;
}

body.deck-mobile .s10-col__phase{
  font-size:8px; /* was 5px — illegible; the rows have headroom below on phone */
  margin-bottom:0px;
  line-height:1;
}

body.deck-mobile .s10-col__q{
  font-size:clamp(10px,1.8vw,12px);
  margin:0;
  line-height:1.1;
}

body.deck-mobile .s10-col__cards{
  flex:1;
  gap:0;
  padding:0;
}

body.deck-mobile .s10-card{
  gap:4px;
  padding:4px 6px;
  font-size:9px;
  flex-direction:row;
  align-items:flex-start;
  min-height:0;
}

body.deck-mobile .s10-card__n{
  font-size:7px;
  flex-shrink:0;
}

body.deck-mobile .s10-card__text{
  font-size:10px;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2; /* was 1 — the row text is the whole content; 1 line dropped "…recommendation engine" / "…feature release)" */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

body.deck-mobile .s10-card--hero{
  padding:4px 6px;
  flex-direction:row;
  align-items:flex-start;
  text-align:left;
  gap:4px;
}

body.deck-mobile .s10-card--hero .s10-card__text{
  font-size:9px;
}

body.deck-mobile .s10-card__badge{
  padding:1px 6px;
  font-size:6px;
  flex-shrink:0;
  line-height:1;
}

/* ==============================================
   EXPERIENCE FACTORY (display #9, v2 2026-08-16) -- mobile: the network stage
   goes VERTICAL (the sim's aspect switch handles hub layout: chain runs
   top→bottom with alternating x, fewer satellites); title + below-line type
   tightened so title + stage + line fit an SE-class stage with no internal
   scroll (I-4). Pointer interaction is fine-pointer-only, so phones get the
   plain animation.
   ============================================== */
body.deck-mobile .exf-layout{
  padding:var(--pill-reserve) 16px 14px;
  gap:clamp(8px,1.5vh,16px);
}
body.deck-mobile .exf-head .deck-slide-title{
  font-size:clamp(18px,4.8vw,28px);
  max-width:92vw;
}
body.deck-mobile .exf-stage{
  width:min(92vw,430px);
  min-height:clamp(220px,44dvh,430px);
}
body.deck-mobile .exf-node-label{
  font-size:clamp(11px,3vw,13px);
}
body.deck-mobile .exf-below{
  font-size:clamp(13px,3.4vw,16px);
  max-width:92vw;
}

/* ==============================================
   ADVISORY BOARD (display #13 since the 2026-08-16 factory insert) -- mobile: one-card swipe carousel + tagline.
   Mirrors the founder carousel's one-card mobile behavior, scoped by the
   .s2-team--advisory modifier (renumber-proof; was keyed to the stale
   data-index="10" while the slide was disabled). Cards are still portraits; the
   closing tagline sits below the carousel, and the swipe hint stays (the
   3-card deck IS swipeable on mobile).
   ============================================== */
body.deck-mobile .s2-team--advisory{
  grid-template-rows:auto minmax(0,1fr); /* tagline removed 2026-06-18 */
  row-gap:clamp(10px,2vh,18px);
}
body.deck-mobile .s2-team--advisory .s2-team__stage{
  width:100%;
  justify-content:flex-start;
}
body.deck-mobile .s2-team--advisory .s2-team-carousel{
  perspective:none;
  padding:0 44px 24px;
  flex:1;
  min-height:0;
}
body.deck-mobile .s2-team--advisory .s2-team-deck{
  display:flex !important;
  flex-direction:column;
  align-self:stretch;
  width:min(300px,84vw) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  transform-style:flat;
  margin:0 auto;
}
body.deck-mobile .s2-team--advisory .s2-member-card{
  position:static !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  opacity:1 !important;
  filter:none !important;
  width:100% !important;
  height:auto !important;
  flex:1 1 auto;
  grid-template-rows:38% minmax(0,1fr) auto; /* 42%→38% (matches founder slide) → more bio room; the rest scrolls with a fade affordance (below) */
  background:#fff;
}
/* On the short mobile one-card carousel, center-top cropped the face at the nose;
   center the crop on the face so the full face (forehead→chin) shows. */
body.deck-mobile .s2-team--advisory .s2-member-card__photo img{
  object-position:center 35%;
}
body.deck-mobile .s2-team--advisory .s2-member-card:not(.card-pos-0){
  display:none !important;
}
body.deck-mobile .s2-team--advisory .s2-member-card__photo{
  height:100%;
}
body.deck-mobile .s2-team--advisory .s2-member-card__body{
  padding:12px 14px 14px;
  justify-content:flex-start;
}
body.deck-mobile .s2-team--advisory .s2-member-card__name{
  font-size:22px;
  flex-shrink:0;
}
body.deck-mobile .s2-team--advisory .s2-member-card__bio{
  font-size:14.5px;
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,82,245,0.28) transparent;
  /* CSS scroll-shadows (mirrors the founder slide, slide-02) so a long bio on the
     shortest phones (e.g. iPhone SE) reads as SCROLLABLE, not cut: white cover layers
     ride with the text (attachment:local) and hide the soft navy shadow layers
     (attachment:scroll) at the very top/bottom — a shadow shows only when there's more
     bio to scroll. Taller phones (iPhone 14+) fit the whole bio, so no shadow shows. */
  background:
    linear-gradient(#fff 30%, rgba(255,255,255,0)) center top,
    linear-gradient(rgba(255,255,255,0), #fff 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgba(0,28,85,0.16), rgba(0,28,85,0)) center top,
    radial-gradient(farthest-side at 50% 100%, rgba(0,28,85,0.16), rgba(0,28,85,0)) center bottom;
  background-repeat:no-repeat;
  background-size:100% 20px, 100% 20px, 100% 9px, 100% 9px;
  background-attachment:local, local, scroll, scroll;
}
body.deck-mobile .s2-team--advisory .s2-member-card__bio::-webkit-scrollbar{
  width:4px;
}
body.deck-mobile .s2-team--advisory .s2-member-card__bio::-webkit-scrollbar-thumb{
  background:rgba(0,82,245,0.28);
  border-radius:4px;
}
/* Shortest phones only (iPhone SE, 667pt tall): the 38% photo + 14.5px bio still
   overflow. Trim the photo to 30% + bio to 13px so the FULL bio fits with little/no
   scroll. Scoped by body.deck-mobile (desktop short viewports never match) and
   max-height:720px (only SE-class; iPhone 15 Pro is 852pt, iPad mini 1024pt). */
@media (max-height: 720px) {
  body.deck-mobile .s2-team--advisory .s2-member-card{
    grid-template-rows:30% minmax(0,1fr) auto;
  }
  body.deck-mobile .s2-team--advisory .s2-member-card__bio{
    font-size:13px;
  }
}
body.deck-mobile .s2-team--advisory .s2-team__tagline{
  font-size:12.5px;
  padding:0 18px;
  max-width:100%;
}

/* ══════════════════════════════════════════════
   TASK-R24 — Slide 12 The Ask
   Hero raise card + funds breakdown + bullets → single column
   ══════════════════════════════════════════════ */

/* Override desktop 2-col grid → single flex column */
body.deck-mobile .s11-layout{
  display:flex;
  flex-direction:column;
  grid-template-columns:unset;
  gap:10px;
  padding:var(--pill-reserve) 16px 12px;
  min-height:0;
  overflow:hidden;
}
/* Tablet band (iPad Mini portrait): phone-tuned content is short on the taller
   canvas — center it so the empty space balances instead of pooling at the top. */
@media (min-width:600px){
  body.deck-mobile .s11-layout{ justify-content:center; gap:clamp(12px,2.4vh,22px); }
}

/* Hide the jump game entirely on mobile — it needs vertical space */
body.deck-mobile .s11-col--game{
  display:none !important;
}

/* Copy column: vertical flex, tight gap, clipped to viewport */
body.deck-mobile .s11-col--copy{
  gap:8px;
  align-self:stretch;
  min-height:0;
  overflow:hidden;
}

/* Raise hero: tighter padding, centred large number */
body.deck-mobile .s11-raise--hero{
  padding:clamp(10px,2vh,18px) clamp(14px,3.5vw,20px);
  text-align:center;
}

/* Shrink the $4M amount so it fits narrow viewports */
body.deck-mobile .s11-raise__num{
  font-size:clamp(56px,18vw,100px);
}
body.deck-mobile .s11-raise__sym{
  font-size:clamp(28px,8.5vw,48px);
}
body.deck-mobile .s11-raise__unit{
  font-size:clamp(34px,10.5vw,66px);
}

/* Runway text: smaller for tight screens */
body.deck-mobile .s11-raise__runway{
  font-size:clamp(12px,3vw,15px);
  margin-top:6px;
}

/* Funds card: stack pie left and legend right (horizontal) so it
   is compact enough to not overflow on landscape (393px height) */
body.deck-mobile .s11-funds{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
  padding:clamp(8px,1.5vh,12px) clamp(12px,2.5vw,16px);
}

/* Shrink pie on narrow screens */
body.deck-mobile .s11-pie{
  width:clamp(64px,16vw,96px);
  height:clamp(64px,16vw,96px);
}

/* Legend items: tighten gap */
body.deck-mobile .s11-legend{
  gap:6px;
  width:100%;
}

body.deck-mobile .s11-legend li{
  gap:4px 6px;
  align-items:center;
}

/* Legend text: smaller for mobile */
body.deck-mobile .s11-legend__text strong{
  font-size:clamp(10px,2.6vw,12px);
}
body.deck-mobile .s11-legend__desc{
  font-size:clamp(9px,2.2vw,10px);
}
body.deck-mobile .s11-legend__pct{
  font-size:clamp(12px,3vw,14px);
}

/* Bullets: tighter padding, 1-line clamp to prevent overflow */
body.deck-mobile .s11-bullets{
  gap:8px;
  padding:clamp(8px,1.2vh,12px) clamp(12px,2.5vw,14px);
}
body.deck-mobile .s11-bullets li{
  font-size:clamp(11px,2.8vw,13px);
  -webkit-line-clamp:2;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ══════════════════════════════════════════════
   TASK-R25 — Slide 13 Contact
   Reflow: centre content, ensure touch targets
   ══════════════════════════════════════════════ */

body.deck-mobile .s9-content{
  padding:var(--pill-reserve) 16px 16px;
  text-align:center;
}

body.deck-mobile .s9-contact a,
body.deck-mobile .s9-contact a:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:44px;
  padding:10px 16px;
  text-decoration:none;
  border-radius:8px;
}

body.deck-mobile .s9-big{
  font-size:clamp(28px,6vw,40px);
}

/* ══════════════════════════════════════════════
   TABLET BAND — iPad Mini portrait (mobile mode, viewport ≥ 600px wide)
   Phone-tuned layouts pool empty space on the taller/wider tablet canvas;
   center + scale the sparse slides. Phones (≤ 430px) are unaffected.
   (2026-05-29 design audit — iteration 3.)
   ══════════════════════════════════════════════ */
@media (min-width:600px){
  /* Slide 10 Roadmap — fill the panel instead of pinning the 4 rows to the top */
  body.deck-mobile .s10-journey{ justify-content:center; gap:clamp(10px,2vh,22px) !important; }
  body.deck-mobile .s10-col{ padding:10px 14px; }
  body.deck-mobile .s10-col__head{ min-width:64px; padding:6px 10px; }
  body.deck-mobile .s10-col__phase{ font-size:10px; }
  body.deck-mobile .s10-col__q{ font-size:clamp(13px,1.7vw,16px); }
  body.deck-mobile .s10-card{ font-size:13px; padding:8px 12px; }
  body.deck-mobile .s10-card__text{ font-size:13px; }

}

/* ──────────────────────────────────────────────
   C10 — Tap-target audit (≥ 44×44 across mobile)
   ────────────────────────────────────────────── */
body.deck-mobile .s2-team-nav,
body.deck-mobile .s2-team__thumb,
body.deck-mobile .s9-contact a,
body.deck-mobile .nav-item{
  min-width:44px;
  min-height:44px;
}

/* ══════════════════════════════════════════════
   Slide 7 — The Network Effect (data-index 6)
   Three full referral trees can't fit a phone without scrolling (I-4), so the
   trees + dotted baseline are dropped and each column collapses to a compact
   "avatar | (label over caption)" row. CSS grid-areas keep it source-order
   independent — on desktop the label sits ABOVE the hero and the caption BELOW
   it, so they can't simply be wrapped/re-flowed with flex.
   ══════════════════════════════════════════════ */
body.deck-mobile .nfx-layout{ gap:clamp(12px,2.4vh,22px); justify-content:center; }
body.deck-mobile .nfx-grid{
  grid-template-columns:1fr;
  gap:clamp(8px,1.5vh,14px);
  max-width:440px;
}
body.deck-mobile .nfx-col{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"avatar label" "avatar caption";
  align-items:center;
  column-gap:14px; row-gap:0;
  text-align:left;
  width:100%;
}
body.deck-mobile .nfx-label{ grid-area:label; align-self:end; }
body.deck-mobile .nfx-phone{ grid-area:avatar; width:52px; height:auto; flex:none; align-self:center; }
body.deck-mobile .nfx-caption{ grid-area:caption; align-self:start; font-size:12px; font-weight:700; }
body.deck-mobile .nfx-punch__growth{ font-size:12px; }
/* The long "HOW IT WORKS N - …" pills (slides 6 & 7) wrap to two lines on
   narrow phones and collide with the title under the fixed +72px mobile
   pill-reserve. Keep them on ONE line by shrinking type instead (2026-06-12). */
body.deck-mobile .slide[data-index="5"] .deck-pill-slot .pill,
body.deck-mobile .slide[data-index="6"] .deck-pill-slot .pill{
  white-space:nowrap;
  font-size:clamp(10px,3.3vw,15px);
  letter-spacing:0.14em;
  padding:9px 14px;
}
body.deck-mobile .nfx-punch{ margin-top:clamp(8px,2vh,16px); }
body.deck-mobile .nfx-punch__lead{ font-size:14px; }
body.deck-mobile .nfx-punch__hook{ font-size:19px; }