/* uplitMD — First Light · deploy supplement
   The pages carry their own styling from the design system tokens and their
   own inline styles. This file adds ONLY what a deployed site needs and a
   mockup does not: the concept guard, a skip link, and focus visibility.
   Nothing here restyles the design. */

.concept-badge{
  position:fixed;bottom:14px;left:14px;z-index:99;
  background:rgba(13,11,26,0.92);border:1px solid #f2b183;color:#f2b183;
  font-family:'Poppins',system-ui,sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:0.14em;padding:6px 12px;border-radius:8px;pointer-events:none;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:#7ef86f;color:#0b2607;font-family:'Poppins',system-ui,sans-serif;
  font-weight:700;padding:12px 20px;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0}

/* The mockups style hover states but not keyboard focus — a gap the design
   system's own readme calls out as a fault on the live site. Fixed here. */
:focus-visible{outline:3px solid #7ef86f;outline-offset:3px;border-radius:6px}

/* Stage buttons and FAQ triggers are real buttons now that site.js drives them;
   make sure they never inherit a UA button look. */
[data-fl-stage],[data-fl-q]{-webkit-appearance:none;appearance:none;font:inherit}
[data-fl-q]{background:transparent;border:0;text-align:left;cursor:pointer}

/* Stages that are planned but not yet in the library — 6, 9 and 12 months as of
   2026-08-05. Dashed, muted and inert, matching how Concept B says "not yet" so
   the two builds read the same. Sized to sit in the same row as the real stage
   buttons; the dashed border and the tag are what separate them. */
.fl-soon{
  display:inline-flex;align-items:center;gap:9px;
  font-family:Poppins,sans-serif;font-size:14px;font-weight:600;
  min-height:44px;border-radius:999px;padding:0 16px;
  border:1.5px dashed rgba(255,246,240,.17);color:var(--wf-muted);
  cursor:default;
}
/* The capture that closes the stage section (2026-08-06, Ed). Class-based
   because it needs a breakpoint: side-by-side on desktop so it reads as a
   footer to the section, stacked on a phone where the form needs the width. */
.fl-stage-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px 32px;margin:34px 0 0;padding:24px 26px;
  border:1px solid var(--wf-line);border-radius:16px;background:rgba(255,246,240,.03);
}
.fl-stage-cta-h{
  font-family:var(--serif);font-weight:300;font-size:25px;line-height:1.2;
  color:var(--wf-ink);margin:0 0 4px;
}
.fl-stage-cta-sub{font-size:14.5px;line-height:1.6;color:var(--wf-body);margin:0}
.fl-stage-cta-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fl-stage-cta-form input{
  flex:1 1 220px;min-height:48px;background:var(--wf-deep);
  border:1.5px solid var(--wf-line);border-radius:10px;padding:0 16px;
  font-family:Poppins,sans-serif;font-size:15px;color:var(--wf-ink);
}
.fl-stage-cta-form button{
  min-height:48px;padding:0 20px;font-family:Poppins,sans-serif;font-size:15px;
  font-weight:600;border:none;border-radius:12px;cursor:pointer;
  background:var(--green-500);color:var(--green-ink);
  box-shadow:0 0 0 1px rgba(126,248,111,.35),0 8px 30px rgba(126,248,111,.2);
  transition:all .15s var(--ease);
}
@media (max-width:720px){
  .fl-stage-cta{padding:20px;gap:14px}
  .fl-stage-cta-form{width:100%}
  .fl-stage-cta-form button{width:100%}
}

.fl-soon-tag{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(255,246,240,.17);border-radius:6px;padding:3px 7px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ==========================================================================
   JOURNEY RAIL — the stage picker's episode list (rebuilt 2026-07-31)

   Was a three-tile grid over a "Showing 3 of 10" line and a link out to the
   catalog. Ed's note: the one thing he preferred in Concept B was being able to
   see every segment without leaving the page. So this is Concept B's horizontal
   rail — every episode in the stage, each one a real link — re-themed onto
   First Light's warm tokens and carrying our richer card (tag / title / doctor).

   Class-based, unlike its neighbours, which are inline-styled prerender output.
   Inline styles cannot carry media queries, :hover or [aria-pressed], and this
   module needs all three.
   ========================================================================== */

.fl-railhead{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 20px;margin:0 0 14px;
}
#fl-count{font-size:12.5px;letter-spacing:.02em;color:var(--wf-muted);margin:0}
.fl-all{font-size:14.5px;font-weight:600;color:var(--green-500);text-decoration:none}
.fl-all:hover{text-decoration:underline}

/* Native overflow rather than a JS carousel: swipe and momentum come free, and
   there is no state to keep in sync with the stage buttons. */
.fl-rail{
  display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(255,246,240,.25) transparent;
}
.fl-rail::-webkit-scrollbar{height:8px}
.fl-rail::-webkit-scrollbar-track{background:transparent}
.fl-rail::-webkit-scrollbar-thumb{background:rgba(255,246,240,.22);border-radius:99px}

/* ~1.6 cards visible on a phone: the partial card is the "there's more" cue.
   Widened 2026-08-04 with the switch to full Uscreen titles: those run to 87
   characters against the old ~22, and at 286px the longest wrapped to five
   lines. 320px holds the longest in three. */
.fl-card{flex:0 0 clamp(240px,26vw,320px);scroll-snap-align:start;text-decoration:none;display:block}
.fl-card-art{
  position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  border:1px solid var(--wf-line);background:var(--wf-card);
  transition:border-color .15s ease,transform .15s ease;
}
.fl-card-art img{width:100%;height:100%;object-fit:cover;display:block}
.fl-card:hover .fl-card-art,
.fl-card:focus-visible .fl-card-art{border-color:rgba(126,248,111,.55);transform:translateY(-3px)}
.fl-card-badge{
  position:absolute;right:10px;bottom:10px;
  font-size:11px;font-weight:600;letter-spacing:.06em;
  background:rgba(13,11,26,.72);border:1px solid rgba(255,246,240,.28);
  color:var(--wf-ink);border-radius:6px;padding:5px 8px;transition:.15s ease;
}
.fl-card:hover .fl-card-badge{background:#7ef86f;border-color:#7ef86f;color:#0b2607}
.fl-card-tag{
  display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wf-body);margin:10px 0 4px;
}
/* Full Uscreen titles are 20–87 characters, so this needs both a ceiling and a
   floor: clamp at three lines so one long title cannot run away, and reserve
   those three lines so a short title does not pull its card's doctor line up
   out of alignment with its neighbours in the rail. */
.fl-card-title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  font-family:var(--serif);font-size:15.5px;font-weight:400;line-height:1.34;
  color:var(--wf-ink);margin:0 0 4px;min-height:calc(3 * 1.34em);
}
.fl-card-doc{display:block;font-size:13px;color:var(--wf-muted)}

@media(max-width:900px){.fl-card{flex:0 0 min(70vw,290px)}}

/* ==========================================================================
   FREE EPISODE DECK — real production art without fake device chrome

   The old CSS phone reduced five strong thumbnails to a miniature dashboard.
   This deck makes the episodes themselves the object: one readable cover and
   four quieter layers, distinct from the complete bundle grid farther down.
   ========================================================================== */
.fl-offer-visual{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:348px;padding:18px 0;
}
.fl-offer-glow{
  position:absolute;inset:-8% -12%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,177,131,.23),rgba(242,177,131,0) 72%);
  opacity:var(--dawn);
}
.fl-episode-deck{
  position:relative;width:min(440px,96%);aspect-ratio:1.38;isolation:isolate;
}
.fl-deck-card{
  position:absolute;left:50%;top:50%;display:block;width:86%;aspect-ratio:16/9;
  overflow:hidden;border-radius:14px;background:var(--wf-card);
  border:1px solid rgba(255,246,240,.18);
  box-shadow:0 18px 48px rgba(13,11,26,.42);
  transform-origin:50% 50%;
  transition:transform .45s var(--ease),filter .45s var(--ease);
}
.fl-deck-card img{width:100%;height:100%;object-fit:cover;display:block}
.fl-deck-card-1{z-index:1;transform:translate(-57%,-68%) rotate(-8deg);filter:saturate(.76) brightness(.8)}
.fl-deck-card-2{z-index:2;transform:translate(-43%,-63%) rotate(7deg);filter:saturate(.82) brightness(.84)}
.fl-deck-card-3{z-index:3;transform:translate(-58%,-55%) rotate(-4deg);filter:saturate(.88) brightness(.88)}
.fl-deck-card-4{z-index:4;transform:translate(-42%,-48%) rotate(4deg);filter:saturate(.94) brightness(.92)}
.fl-deck-card-lead{
  z-index:5;transform:translate(-50%,-38%) rotate(-1.5deg);
  border-color:rgba(255,246,240,.28);box-shadow:0 24px 64px rgba(13,11,26,.56);
}
.fl-deck-card-lead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,246,240,.06);
}
.fl-deck-free{
  position:absolute;left:12px;bottom:11px;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;color:var(--wf-ink);background:rgba(13,11,26,.76);
  border:1px solid rgba(255,246,240,.3);border-radius:6px;padding:5px 8px;
  backdrop-filter:blur(4px);
}
.fl-deck-count{
  position:absolute;right:0;bottom:4px;z-index:7;display:flex;align-items:center;gap:9px;
  color:var(--wf-ink);background:rgba(23,20,41,.9);border:1px solid rgba(242,177,131,.48);
  border-radius:10px;padding:8px 11px 8px 10px;box-shadow:0 12px 30px rgba(13,11,26,.38);
}
.fl-deck-count strong{font-family:var(--serif);font-size:28px;font-weight:300;line-height:.9;color:var(--hearth)}
.fl-deck-count span{font-size:9px;font-weight:700;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--wf-body)}
.fl-episode-deck:hover .fl-deck-card-1{transform:translate(-61%,-72%) rotate(-10deg)}
.fl-episode-deck:hover .fl-deck-card-2{transform:translate(-39%,-67%) rotate(9deg)}
.fl-episode-deck:hover .fl-deck-card-3{transform:translate(-61%,-56%) rotate(-5deg)}
.fl-episode-deck:hover .fl-deck-card-4{transform:translate(-39%,-49%) rotate(5deg)}

@media(max-width:900px){
  .fl-offer-visual{min-height:330px;padding-top:6px}
  .fl-episode-deck{width:min(420px,92vw)}
}

@media(max-width:480px){
  .fl-offer-visual{min-height:276px;padding:0}
  .fl-episode-deck{width:min(350px,94vw)}
  .fl-deck-card{border-radius:11px}
  .fl-deck-count{right:2px;bottom:0}
}

/* ==========================================================================
   THE MARK — the "u" of uplit with light breaking over its left shoulder
   (2026-08-04)

   Replaces the lamp-over-an-oval icon that trailed three headings. Ed's note:
   use the logo. There is no SVG of the wordmark anywhere in the repo (only a
   300x80 PNG, white-on-dark), so the mark is drawn here from the same geometry:
   an open, warm-white u with green rays deliberately off-axis to the left.
   ========================================================================== */
.fl-mark{overflow:visible}

/* Mobile-only alternatives stay out of the desktop composition. */
.fl-mobile-only,
.fl-bundle-mobile-deck,
.fl-doctors-link{display:none}

/* ==========================================================================
   SCENE PILLS — the four claims in "Parenting is hard" now switch the photo
   ========================================================================== */
.fl-pill{
  font-family:'Poppins',system-ui,sans-serif;font-size:13px;font-weight:600;
  color:var(--wf-body);background:transparent;min-height:44px;
  border:1.5px solid var(--wf-line);border-radius:999px;padding:9px 15px;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.fl-pill:hover{border-color:rgba(126,248,111,.45);color:var(--wf-ink)}
.fl-pill[aria-pressed="true"]{
  background:rgba(126,248,111,.14);border-color:rgba(126,248,111,.7);color:var(--wf-ink);
}
#fl-living-room{transition:opacity .26s var(--ease)}
#fl-living-room.is-swapping{opacity:0}

/* ==========================================================================
   HOW IT WORKS — one rail, three stations, then the journey keeps going
   ========================================================================== */
.fl-journey{position:relative;margin-top:34px}
.fl-journey-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fl-journey-track{
  position:absolute;z-index:0;top:19px;left:16.666%;right:0;height:1px;
  background:linear-gradient(90deg,rgba(242,177,131,.8),rgba(242,177,131,.34) 84%,rgba(242,177,131,0));
  transform-origin:left;animation:flJourneyDraw 1.2s var(--ease) .15s both;
}
.fl-journey-track::after{
  content:"";position:absolute;right:1px;top:-3px;width:7px;height:7px;
  border-top:1px solid rgba(242,177,131,.48);border-right:1px solid rgba(242,177,131,.48);transform:rotate(45deg);
}
@keyframes flJourneyDraw{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.fl-step{position:relative;display:flex;min-width:0;flex-direction:column}
.fl-step-node{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin:0 auto 22px;border-radius:999px;
  font-family:var(--serif);font-size:14px;color:var(--hearth);
  background:var(--wf-bg);border:1px solid rgba(242,177,131,.62);box-shadow:0 0 0 7px var(--wf-bg),0 0 24px rgba(242,177,131,.12);
}
.fl-step-art{
  height:148px;padding:16px;overflow:hidden;background:var(--wf-deep);
  border:1px solid var(--wf-line);border-radius:16px;
  display:flex;align-items:center;justify-content:center;
}
.fl-step-body{padding:18px 4px 0}
/* 01 — the episodes a membership opens */
.fl-step-art-unlock{position:relative;padding-bottom:38px}
.fl-step-fan{display:flex;gap:8px;width:100%;opacity:.82}
.fl-step-fan img{
  flex:1 1 0;min-width:0;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:7px;border:1px solid rgba(255,246,240,.12);
}
.fl-step-fan img:first-child{transform:translateY(7px) rotate(-3deg)}
.fl-step-fan img:last-child{transform:translateY(7px) rotate(3deg)}
.fl-step-access{
  position:absolute;left:50%;bottom:15px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;
  width:max-content;max-width:calc(100% - 28px);padding:7px 11px;border-radius:999px;
  font-size:10.5px;font-weight:600;letter-spacing:.025em;color:var(--wf-ink);white-space:nowrap;
  background:rgba(23,20,41,.94);border:1px solid rgba(126,248,111,.42);box-shadow:0 8px 20px rgba(13,11,26,.32);
}
.fl-step-access b{display:flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;font-size:9px;color:var(--wf-deep);background:var(--green-500)}
/* 02 — one episode, mid-play */
.fl-step-play{
  position:relative;display:block;width:min(216px,100%);
  border-radius:9px;overflow:hidden;border:1px solid rgba(255,246,240,.12);
}
.fl-step-play img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.fl-step-scrim{position:absolute;inset:0;background:linear-gradient(rgba(13,11,26,0) 40%,rgba(13,11,26,.7))}
.fl-step-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:999px;padding-left:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--hearth);
  background:rgba(23,20,41,.6);border:1.5px solid rgba(242,177,131,.6);
}
.fl-step-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.22)}
.fl-step-bar > span{display:block;width:46%;height:100%;background:var(--green-500)}
/* 03 — time passes, but the membership stays */
.fl-stage-path{width:100%;padding:2px 6px 12px}
.fl-stage-caption{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:30px}
.fl-stage-caption span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--wf-muted)}
.fl-stage-caption strong{font-size:11px;font-weight:600;color:var(--green-500)}
.fl-stage-line{position:relative;display:flex;align-items:center;justify-content:space-between}
.fl-stage-line::before{
  content:"";position:absolute;left:2px;right:2px;top:50%;height:1px;
  background:linear-gradient(90deg,var(--green-500) 0 34%,rgba(242,177,131,.55) 34% 68%,rgba(242,177,131,.24) 68% 100%);
}
.fl-stage-line > span{
  position:relative;z-index:1;width:10px;height:10px;border-radius:50%;
  background:var(--wf-deep);border:1.5px solid rgba(242,177,131,.72);
}
.fl-stage-line > span::after{
  content:attr(data-label);position:absolute;top:17px;left:50%;transform:translateX(-50%);
  width:max-content;font-size:9px;color:var(--wf-muted);white-space:nowrap;
}
.fl-stage-line > span.done{background:var(--green-500);border-color:var(--green-500)}
.fl-stage-line > span.current{width:16px;height:16px;background:var(--wf-deep);border:4px solid var(--green-500);box-shadow:0 0 0 5px rgba(126,248,111,.09)}
.fl-stage-line > span.current::after{top:20px;color:var(--wf-ink);font-weight:600}
.fl-stage-line > span.future{border-style:dashed;opacity:.7}
.fl-journey-onward{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:24px 0 0 auto}
.fl-journey-onward > span{width:96px;height:1px;background:linear-gradient(90deg,rgba(242,177,131,.42),rgba(242,177,131,0))}
.fl-journey-onward p{display:flex;flex-direction:column;gap:2px;margin:0;font-size:11.5px;color:var(--wf-muted)}
.fl-journey-onward strong{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--hearth)}

@media(max-width:760px){
  .fl-journey{padding-left:44px;margin-top:30px}
  .fl-journey-grid{grid-template-columns:minmax(0,1fr);gap:42px}
  .fl-journey-track{
    top:18px;bottom:42px;left:18px;right:auto;width:1px;height:auto;
    background:linear-gradient(180deg,rgba(242,177,131,.8),rgba(242,177,131,.34) 84%,rgba(242,177,131,0));
    transform-origin:top;animation-name:flJourneyDrawMobile;
  }
  .fl-journey-track::after{right:-3px;top:auto;bottom:0;transform:rotate(135deg)}
  @keyframes flJourneyDrawMobile{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
  .fl-step-node{position:absolute;left:-44px;top:0;margin:0}
  .fl-step-art{height:144px}
  .fl-step-body{padding-top:16px}
  .fl-journey-onward{justify-content:flex-start;margin-top:28px}
  .fl-journey-onward > span{width:54px}
}

/* ==========================================================================
   MOBILE NAV — a real hamburger (2026-08-04)

   The open state is driven entirely by the button's own aria-expanded and a
   sibling combinator, so the accessible state and the visual state cannot drift
   apart: site.js flips one attribute and there is no second source of truth.
   ========================================================================== */
.fl-navtoggle{
  display:none;margin-left:auto;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;cursor:pointer;
  background:transparent;border:1.5px solid var(--wf-line);border-radius:10px;
  -webkit-appearance:none;appearance:none;
}
.fl-navtoggle:hover{border-color:var(--wf-line-strong)}
.fl-navtoggle span{
  display:block;width:100%;height:1.5px;border-radius:2px;background:var(--wf-ink);
  transition:transform .22s var(--ease),opacity .18s var(--ease);
}
.fl-navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.fl-navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.fl-navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Inline trailer playback */
.fl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0d0b1a;z-index:3}

/* ==========================================================================
   RESPONSIVE — rebuilt 2026-07-30 from the V4 handoff's own strategy

   Background: the Claude Design mockups lay out with INLINE styles, which
   cannot carry media queries — so through V3 every grid held its desktop value
   at every width. V4 ships a real breakpoint layer for the first time.

   We keep OUR markup (it carries every correction the exports keep resetting)
   and adopt V4's responsive approach, with its data-m hooks injected into our
   DOM. Breakpoints match the handoff: 1080 / 900 / 640.

   The grid rule is V4's and is better than the blanket one it replaces: it
   spares `auto-fit` grids, which already reflow on their own — collapsing
   those to a single column was making the bundle and episode cards
   needlessly tall. Opt a grid out with data-m="keep".
   ========================================================================== */

/* ==========================================================================
   STICKY HEADER — desktop only (2026-08-04)

   The header has carried `position: sticky; top: 0` since the port and has
   never once stuck. The page wrapper (the single element per page with an
   inline `overflow-x: hidden`) computes `overflow-y: auto`, which makes it a
   scroll container — and sticky resolves against the nearest scrolling
   ancestor, so the header was pinning itself to a box that never scrolls.
   Measured before the fix: after scrolling 1500px the header sat at top:-1398.

   `overflow-x: clip` clips identically but does NOT create a scroll container,
   so sticky resolves against the viewport again. Verified: header holds at
   top:0 and no horizontal overflow comes back. If a browser ever ignores
   `clip`, the declaration is simply dropped and we are back to today's
   behaviour — nothing breaks.

   Desktop only, per Ed. Below 901px the header travels with the page, but it
   is set to `relative` rather than `static` on purpose: it needs to keep its
   z-index:70, or the open hamburger panel would be painted over by the
   position:relative sections that follow it in the DOM.
   ========================================================================== */
@media (min-width: 901px) {
  /* !important is required, not defensive: the wrapper carries overflow-x as
     an INLINE style, and inline beats any stylesheet selector without it. */
  .sc-host > [style*="overflow-x: hidden"]{overflow-x:clip !important}

  /* A pinned header means every in-page jump lands underneath it. Measured:
     the header is 78px, and clicking Pricing put the section at top:0 with its
     first 77px covered. scroll-padding-top makes the browser stop short by the
     header's height plus a little air, for anchors, keyboard navigation and
     scrollIntoView alike. Only needed where the header is actually pinned. */
  html{scroll-padding-top:92px}
}
@media (max-width: 900px) {
  header{position:relative !important}
}

/* Tablet band only. This rule used to run to 0px and selected [data-m="bar"],
   which appears nowhere in the markup — every header wrapper is
   data-m="barwrap", so flex-wrap never applied and the second-row treatment
   could not wrap. Fixed 2026-08-04, and capped at 901px because below that the
   hamburger takes over. */
@media (max-width: 1080px) and (min-width: 901px) {
  [data-m="barwrap"]{flex-wrap:wrap !important}
  [data-m="nav"]{order:3;flex:1 0 100%;margin-left:0 !important;overflow-x:auto;
    gap:20px !important;padding:2px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  [data-m="nav"]::-webkit-scrollbar{display:none}
  [data-m="nav"] a{white-space:nowrap}
}

/* Hamburger band. Nav and sign-in collapse behind the toggle and return as a
   stacked panel on the header's second row. */
@media (max-width: 900px) {
  [data-m="barwrap"]{flex-wrap:wrap !important}
  .fl-navtoggle{display:flex}
  [data-m="nav"],[data-m="signin"]{display:none !important}

  .fl-navtoggle[aria-expanded="true"] ~ [data-m="nav"],
  .fl-navtoggle[aria-expanded="true"] ~ [data-m="signin"]{
    display:flex !important;flex:1 0 100%;margin-left:0 !important;
    flex-direction:column;align-items:stretch;
  }
  .fl-navtoggle[aria-expanded="true"] ~ [data-m="nav"]{
    gap:0 !important;margin-top:12px !important;border-top:1px solid var(--wf-line-soft);
  }
  .fl-navtoggle[aria-expanded="true"] ~ [data-m="nav"] a{
    padding:14px 2px;border-bottom:1px solid var(--wf-line-soft);font-size:15.5px;
  }
  .fl-navtoggle[aria-expanded="true"] ~ [data-m="signin"]{gap:12px !important;padding:16px 0 6px}
  .fl-navtoggle[aria-expanded="true"] ~ [data-m="signin"] a{text-align:center}
}

@media (max-width: 900px) {
  [style*="display: grid"]:not([style*="auto-fit"]):not([data-m="keep"]),
  [style*="display:grid"]:not([style*="auto-fit"]):not([data-m="keep"]){
    grid-template-columns:1fr !important;gap:30px !important}

  /* Photography: the arch crops hard at narrow widths. */
  [style*="aspect-ratio: 4 / 4.4"],
  [style*="aspect-ratio: 3 / 3.5"]{aspect-ratio:4/3 !important}

  /* Founder bio. On desktop the pull-quote lives in its own right-hand rail,
     placed explicitly (prose col 1 rows 1-2, quote col 2). The rule above only
     resets grid-template-columns, so that placement would survive the collapse
     and grid would invent an implicit second column to honour `grid-column:2`.
     Clear the placement and give the quote back its in-flow spacing. Source
     order is already before -> quote -> after, so the stacked reading order is
     unchanged from what shipped. */
  [data-m="bio"] > *{grid-column:auto !important;grid-row:auto !important}
  /* Centring is a desktop-rail behaviour. Stacked, the quote needs its old
     in-flow rhythm — but the collapse rule's gap:30px would stack on top of the
     figure's own margins and push it 70px clear of the prose. The collapse rule
     outranks a plain [data-m="bio"] on specificity (three attribute selectors to
     one), so rather than fight it, top its 30px up to the 40/44 the quote had
     before the rail existed. */
  [data-m="bio-q"]{align-self:auto !important;margin:10px 0 14px !important}
  /* Ed, 2026-09-25: on desktop the quote sits across the rail, so the prose
     also carries it inline to finish the sentence. Stacked, the pull quote
     follows directly, so the inline copy would read twice. */
  .fl-bio-inline{display:none}
  /* Legal pages: the "On this page" rail caps its height on desktop because
     the approved terms run 22 sections. Stacked, it is ordinary flow. */
  nav[style*="position: sticky"][style*="max-height"]{max-height:none !important;overflow:visible !important}

  body{overflow-x:hidden}
}

@media (max-width: 640px) {
  /* [data-m="signin"] used to be hidden outright here. It now lives inside the
     hamburger panel instead, so the rule moved to the 900px block above. */
  [style*="max-width: 1180px"],[style*="max-width:1180px"]{
    padding-left:20px !important;padding-right:20px !important}
  /* Our two capture forms: input above button rather than a 40px-wide field. */
  form[data-fl-capture],form[data-fl-bundle-capture]{
    flex-direction:column !important;align-items:stretch !important}
  form[data-fl-capture] button,form[data-fl-bundle-capture] button{width:100%}
  /* The inputs carry `flex: 1 1 220px` inline. Once the form is a COLUMN, that
     basis applies to height and the field grows to ~230px tall. Reset it. */
  /* Rows that pair left content with a right-aligned tail — the in-the-player
     card, the gift price row. At 390px both halves wrap into each other. */
  /* Wrap rather than stack: the thumbnail and title stay side by side and only
     the right-aligned tail drops to its own full-width line. Stacking all three
     children put the 86px thumbnail alone on a row, which reads worse. */
  [data-m="split"]{flex-wrap:wrap !important}
  [data-m="split"] > p[style*="text-align: right"],
  [data-m="split"] > p[style*="margin: 0px 0px 0px auto"]{
    margin:2px 0 0 !important;text-align:left !important;flex:1 0 100%}
  .gv-foot{flex-direction:column;align-items:flex-start;gap:6px}

  form[data-fl-capture] input[type="email"],
  form[data-fl-bundle-capture] input[type="email"]{
    flex:0 0 auto !important;width:100%;min-height:48px}
}

/* Touch targets — WCAG 2.5.5 and Apple's HIG both want 44px; the prerender
   renders footer and inline links at 20–25px.

   This rule used to select `.foot-links a`. That class appears NOWHERE in the
   markup — the footer's links carry the prerender's own .scp2 / .scp4 — so the
   footer half had never matched a single element, while the [data-m="nav"]
   half worked and made the rule look alive. Nineteen links were sitting at
   20–26px as a result. Fixed 2026-08-04 to select the footer directly, and
   widened to the three content links that sit outside it.

   The `pointer: coarse` gate came off with it. It kept the rule away from
   desktop, but it also made the bug invisible to a narrow-window check and
   skipped touch laptops, which report `pointer: fine`. Below 900px a 44px
   footer link costs nothing visually.

   `inline-flex` is safe here: every footer link group is already a flex
   container (three columns plus the social row), so these are flex items and
   cannot reflow side by side.

   NOT included, deliberately: the second "Start with 5 free episodes", which
   sits mid-sentence in the trailer note. WCAG 2.5.5 exempts targets inline in
   a sentence, and forcing 44px there would break the line's leading. Only the
   standalone CTA carries .fl-cta-link. */
@media (max-width: 900px) {
  footer a,
  [data-m="nav"] a,
  [data-m="barwrap"] > a:first-child,   /* the logo lockup — 26px tall */
  .fl-all,                              /* "See it in the library →" */
  .fl-cta-link                          /* the standalone free-episodes CTA */
  {min-height:44px;display:inline-flex;align-items:center}
}

/* ---- Mobile homepage rhythm, reviewed section by section at 390px ---- */
@media (max-width: 640px) {
  /* The hero's drawn arch collided with the copy once the two columns stacked.
     On phones the portrait itself carries the arch shape, while the names sit
     in their own calm caption band instead of on top of faces. */
  #top .fl-hero-grid{padding-top:48px !important;padding-bottom:48px !important;gap:28px !important}
  #top .fl-hero-arch{display:none}
  #top .fl-hero-photo{border-radius:160px 160px 16px 16px !important;background:var(--wf-card)}
  #top .fl-hero-scrim{display:none}
  #top .fl-hero-caption{
    position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;
    padding:14px 16px 16px !important;background:var(--wf-card)
  }
  #top .fl-hero-caption p:first-child{font-size:15.5px !important;line-height:1.45 !important;margin-bottom:5px !important}
  #top .fl-hero-caption p:last-child{font-size:12.5px !important;line-height:1.5 !important}

  /* One consistent section beat prevents the inline desktop paddings from
     turning into large empty bands on a narrow, single-column page. */
  .fl-mobile-section{padding-top:52px !important;padding-bottom:52px !important}
  .fl-mobile-compact{padding-top:40px !important;padding-bottom:40px !important}
  #start-free{padding-top:48px !important;padding-bottom:48px !important}
  #stage-picker [data-dc-tpl="100"]{padding-top:48px !important}
  #how-it-works{padding-bottom:28px !important}
  #pricing{padding-top:44px !important}
  .fl-membership-bridge{display:none}

  /* The deck belongs with the bundle details on mobile. Hiding it in the first
     capture avoids showing the same five covers twice in one short scroll. */
  /* The deck now leads the offer on mobile too. It had been hidden here to
     save height, which left "Watch five episodes free" as a bare form — the
     one place on the page where the offer is made and nothing shows what you
     get. It is deliberately shorter than the free-bundle deck further down. */
  #start-free .fl-offer-visual{min-height:236px;padding:6px 0 0;margin-top:4px}
  #start-free .fl-episode-deck{width:min(320px,90vw)}
  .fl-bundle-grid{display:none !important}
  .fl-bundle-mobile-deck{display:block}
  #free-bundle [data-dc-tpl="142"]{margin-bottom:14px !important}
  #free-bundle .fl-offer-visual{min-height:242px;padding:0;margin:0 0 10px}
  #free-bundle .fl-episode-deck{width:min(340px,94vw)}
  #free-bundle > div:last-of-type{margin-top:12px !important}

  /* Three tall biography cards become three readable people rows: portrait,
     role and one proof point. The full bios remain unchanged on desktop. */
  .fl-doctor-intro{margin-bottom:26px !important}
  .fl-doctor-grid{grid-template-columns:1fr !important;gap:22px !important}
  .fl-doctor-card{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start}
  .fl-doctor-photo{width:104px;border-radius:68px 68px 12px 12px !important}
  .fl-doctor-photo img{
    width:100% !important;height:auto !important;aspect-ratio:4/5 !important;
    object-fit:cover !important;object-position:50% 18% !important
  }
  .fl-doctor-copy{padding-top:4px !important}
  .fl-doctor-copy > p:first-child{font-size:19px !important;line-height:1.25 !important}
  .fl-doctor-copy > p:nth-child(2){margin-bottom:7px !important}
  .fl-doctor-bio{font-size:13.5px !important;line-height:1.55 !important}
  .fl-desktop-only{display:none}
  .fl-mobile-only{display:inline}
  .fl-doctors-link{
    display:inline-flex;min-height:44px;margin-top:20px;align-items:center;width:max-content;
    font-size:14px;font-weight:600;color:var(--green-500)
  }
  /* The number column was a fixed 66px, but "85%" at 42px in the serif paints
     81px wide — the glyphs overflowed the box (which grid had already clamped
     to 66px) and the % ran into "of parents". Nothing in the box model showed
     it, because the boxes were 14px apart; only the glyphs collided. `auto`
     sizes the column to whatever the number actually renders at. */
  #doctors .fl-trust-stat{
    grid-template-columns:auto minmax(0,1fr) !important;gap:14px !important;
    margin-top:22px !important;padding:20px !important
  }
  .fl-trust-stat > p{font-size:42px !important}
  .fl-trust-stat [data-dc-tpl="214"]{font-size:14.5px !important;line-height:1.5 !important}
  .fl-trust-stat [data-dc-tpl="215"]{font-size:11.5px !important;line-height:1.5 !important}

  /* The journey still reads as a connected sequence, with less vertical air
     between stations and shallower supporting art. */
  .fl-journey{margin-top:26px;padding-left:38px}
  .fl-journey-grid{gap:32px !important}
  .fl-step-node{margin-bottom:16px}
  .fl-step-art{height:128px;padding:13px}
  .fl-step-body{padding-top:14px}
  .fl-journey-onward{margin-top:22px}
}

/* The [data-m="arc"] and [data-m="step"]::before rules that lived here are gone
   as of 2026-08-04. "How it works" no longer has a wide-format arc to hide, and
   the 01/02/03 now sit on the step cards at every width rather than being
   reinstated by CSS once the steps stacked. Both hooks are out of the markup. */

@media (max-width: 640px) {
  /* Footer sitemap: three stacked groups ran 1,098px. Two-up halves it and the
     groups are only four links each. */
  /* The footer grid is `minmax(250px,1.25fr) repeat(3, minmax(140px,1fr))` —
     a brand column plus three link groups. The generic stacking rule at 900px
     leaves all four stacked, running 1,098px. Put the brand full-width and the
     three groups two-up beneath it. */
  footer [style*="display: grid"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:26px 18px !important}
  footer [style*="display: grid"] > :first-child{grid-column:1 / -1}
}