@font-face { font-family: 'Inter 26M'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-variable-latin.woff2') format('woff2'); }
/* 26M: phone-only scene navigation. Paper coordinates use a 390px reading canvas. */
#mobile26 { display: none; }
.m26-scene[hidden] { display: none !important; }
.m26-dialog:not([open]), .m26-menu:not([open]) { display: none; }
@media (max-width: 600px), (max-width: 1000px) and (pointer: coarse) and (max-height: 600px) {
  html.m26-active { height: 100%; overflow: hidden; scroll-behavior: auto; }
  html.m26-active body { zoom: 1; height: 100%; overflow: hidden; }
  html.m26-active, html.m26-active body { background-color: var(--m26-active-bg, #fffdfa); }
  html.m26-active #desktop-site { display: none; }
  html.m26-active { --page-zoom: 1; }
  #mobile26 { display: block; position: fixed; inset: 0; height: 100svh; overflow: hidden; background: #fffdfa; }
  .m26-scene { position: absolute; inset: 0; height: 100%; overflow: auto; overscroll-behavior: none; scrollbar-width: none; background: var(--m26-scene-bg,#fffdfa); }
  .m26-scene::-webkit-scrollbar, .m26-carousel::-webkit-scrollbar, .m26-video-row::-webkit-scrollbar, .m26-review-row::-webkit-scrollbar { display: none; }
  .m26-design, .m26-header { margin-inline: auto; zoom: var(--m26-scale,1); }
  .m26-design { position: relative; }
  .m26-design h1, .m26-design h2 { margin: 0; }
  .m26-design button { text-align: inherit; }
  .m26-design a { text-decoration: none; }
  .m26-design button, .m26-design a, .m26-design summary { -webkit-tap-highlight-color: transparent; }
  .m26-carousel { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; scroll-behavior: smooth; }
  .m26-slide { flex-shrink: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .m26-full-slide { position: relative; }
  .m26-capacity-rail { gap: 0; }
  .m26-capacity-rail > .m26-slide { min-width: 350px; }
  .m26-story-dots button { position: relative; display: grid; place-items: center; min-width: 14px; height: 20px; }
  .m26-story-dots button::after { content: ''; position: absolute; inset: -12px -4px; }
  .m26-video-wall { overflow: visible; }
  .m26-video-row { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory; width: calc(100% + 48px); margin-inline: -24px; padding-inline: 24px; }
  .m26-video-row > button { scroll-snap-align: start; }
  .m26-review-rows { overflow: visible; }
  .m26-review-row { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; width: calc(100% + 40px); margin-inline: -20px; padding-inline: 20px; }
  .m26-faq-summary { cursor: pointer; list-style: none; min-height: 44px; }
  .m26-faq-summary::-webkit-details-marker { display: none; }
  .m26-faq-answer { font: 14px/21px var(--font-body); color: #635f59; padding: 0 0 16px; }
  .m26-faq-answer a { text-decoration: underline; }
  .m26-faq-item { flex-shrink: 0; }
  .m26-faq-item:not([open]) .m26-faq-answer { display: none; }
  .m26-cta:focus-visible, #mobile26 button:focus-visible, #mobile26 summary:focus-visible { outline: 2px solid #4040ff; outline-offset: 3px; }
  #mobile26 [data-scene='faq'] .m26-design { height: auto; min-height: var(--m26-page-height); }
  #mobile26 [data-scene='faq'] .m26-design > div:last-child { flex-basis: auto; }
}
.m26-dialog { border: 0; padding: 0; background: transparent; color: #1a1816; width: fit-content; height: fit-content; max-width: calc(100vw - 40px); max-height: calc(100svh - 64px); overflow: visible; margin: auto; }
.m26-dialog::backdrop, .m26-menu::backdrop { background: rgb(26 24 22 / .82); }
.m26-dialog-frame { position: relative; }
.m26-dialog-close { position: absolute; top: 8px; right: 8px; z-index: 3; border: 0; border-radius: 50%; width: 44px; height: 44px; background: #fffdfa; color: #1a1816; font: 28px/1 var(--font-body); box-shadow: 0 2px 12px #0003; }
.m26-dialog-body { max-height: calc(100svh - 64px); overflow-y: auto; overscroll-behavior: contain; border-radius: 8px; }
.m26-dialog-body video { display: block; width: auto; max-width: calc(100vw - 40px); max-height: 72svh; border-radius: 8px; background: black; }
.m26-dialog-body:has(.m26-detail-content), .m26-dialog-body:has(.m26-full-review) { width: min(390px, calc(100vw - 40px)); background: #fffdfa; padding-top: 38px; }
/* Keep the VSL controls outside the video, including on short phone screens. */
.m26-dialog-actions[hidden] { display: none; }
.m26-dialog--vsl { width: min(680px, calc(100vw - 40px)); max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.m26-dialog--vsl .m26-dialog-frame { display: flex; flex-direction: column; gap: 12px; }
.m26-dialog--vsl .m26-dialog-close { position: static; align-self: flex-end; flex-shrink: 0; cursor: pointer; }
.m26-dialog--vsl .m26-dialog-body { flex-shrink: 0; overflow: hidden; }
.m26-dialog--vsl .m26-dialog-body video { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: calc(100svh - 232px); object-fit: contain; }
.m26-dialog-actions { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.m26-dialog-primary { text-decoration: none; }
.m26-dialog-primary .m26-p17 { width: auto; }
.m26-dialog-return { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 16px; border: 1px solid #d6d0c8; border-radius: 999px; background: #fffdfa; color: #1a1816; font: 500 15px/22px 'Inter 26M', sans-serif; cursor: pointer; }
.m26-dialog--vsl .m26-dialog-close, .m26-dialog-primary, .m26-dialog-return { -webkit-tap-highlight-color: transparent; transition: transform 140ms cubic-bezier(.23,1,.32,1); }
.m26-dialog--vsl .m26-dialog-close:active, .m26-dialog-primary:active, .m26-dialog-return:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .m26-dialog--vsl .m26-dialog-close, .m26-dialog-primary, .m26-dialog-return { transition: none; }
  .m26-dialog--vsl .m26-dialog-close:active, .m26-dialog-primary:active, .m26-dialog-return:active { transform: none; }
}
.m26-full-review { padding: 24px; font: 16px/26px var(--font-body); }
.m26-full-review h2 { font-size: 22px; margin-bottom: 8px; }
.m26-full-review p { margin-bottom: 16px; }
.m26-full-review small { display: block; color: #635f59; font-size: 13px; line-height: 20px; }
.m26-menu { width: min(350px,calc(100vw - 40px)); padding: 64px 28px 32px; border: 0; border-radius: 8px; background: #fffdfa; margin: auto; }
.m26-menu-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; font-size: 28px; }
.m26-menu nav { display: flex; flex-direction: column; gap: 8px; }
.m26-menu a { min-height: 44px; display: flex; align-items: center; font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .m26-carousel { scroll-behavior: auto; } }

/* Native accordions preserve the 26M row dimensions; answers can grow naturally. */
.m26-faq-item { display: block; width: 350px; }
.m26-faq-summary { position: relative; display: flex; align-items: center; justify-content: center; width: 350px; min-height: 50px; border-bottom: 1px solid #d6d0c8; padding: 8px 30px; text-align: center; font: 13px/18px 'Inter 26M', sans-serif; color: #1a1816; }
.m26-faq-sign { position: absolute; right: 0; top: 3px; width: 44px; height: 44px; display: grid; place-items: center; color: #635f59; font: 21px/26px system-ui, sans-serif; }
.m26-faq-answer { padding: 12px 10px; text-align: center; color: #3d3935; font: 14px/21px 'Inter 26M', sans-serif; }
.m26-takeaway { width: 342px; align-self: center; font: 500 19px/27px 'Inter 26M', sans-serif; letter-spacing: -.015em; color: #1a1816; }
.m26-takeaway mark { background: #ffe76a; color: inherit; }

.m26-roadmap-stage { position: relative; width: 390px; margin-inline: auto; zoom: var(--m26-scale,1); }
.m26-roadmap-stage .m26-design { zoom: 1; }
.m26-pinned-roadmap { position: absolute; z-index: 2; top: 44px; left: 20px; width: 350px; display: flex; flex-direction: column; gap: 24px; background: #fffdfa; }

/* Keep these concise scenes readable in one phone viewport. */
#m26-skillset .m26-design { padding-block: 28px; gap: 16px; }
#m26-skillset .m26-p263 { height: 200px; }
#m26-skillset .m26-p264 { padding-top: 0; gap: 10px; }
#m26-skillset .m26-p134, #m26-skillset .m26-p266 { font-size: 14px; line-height: 21px; }
#m26-skillset .m26-p267 { padding-top: 0; gap: 4px; }
#m26-skillset .m26-p268 { font-size: 30px; line-height: 34px; }
#m26-pricing .m26-design { padding-block: 24px; gap: 12px; }
#m26-pricing .m26-p345 { font-size: 30px; line-height: 35px; }
#m26-pricing .m26-p346 { font-size: 15px; line-height: 22px; }
#m26-pricing .m26-p347 { top: 0; padding: 18px; gap: 14px; }
#m26-pricing .m26-p350 { font-size: 48px; line-height: 52px; }
#m26-pricing .m26-p353 { padding-top: 12px; gap: 8px; }
#m26-pricing .m26-p356, #m26-pricing .m26-p361 { font-size: 14px; line-height: 20px; }
#m26-pricing .m26-p362 { gap: 10px; }
@media (max-height: 740px) {
  #m26-skillset .m26-design { padding-block: 18px; gap: 12px; }
  #m26-skillset .m26-p263 { height: 150px; }
  #m26-pricing .m26-design { padding-block: 16px; gap: 10px; }
  #m26-pricing .m26-p347 { padding-block: 14px; gap: 10px; }
}
@media (max-height: 740px) {
  #m26-pricing .m26-design { padding-block: 12px; gap: 8px; }
  #m26-pricing .m26-p345 { font-size: 28px; line-height: 31px; }
  #m26-pricing .m26-p347 { padding-block: 12px; gap: 8px; }
  #m26-pricing .m26-p348 { gap: 4px; }
  #m26-pricing .m26-p350 { font-size: 44px; line-height: 46px; }
  #m26-pricing .m26-p353 { padding-top: 8px; gap: 6px; }
  #m26-pricing .m26-p357 { padding-top: 2px; gap: 4px; }
  #m26-pricing .m26-p362 { gap: 8px; }
}

/* The two video-story rows fit the viewport; each still swipes sideways. */
#m26-videos .m26-design { height: calc(100svh / var(--m26-scale, 1)); padding-block: 24px; gap: 20px; }
#m26-videos .m26-p164 { gap: 10px; flex-shrink: 0; }
#m26-videos .m26-video-wall { flex: 1; min-height: 0; justify-content: center; }
#m26-videos .m26-video-row { flex: 1; min-height: 0; max-height: 278px; }
#m26-videos .m26-video-row > button, #m26-videos .m26-p170 { height: 100%; }
#m26-videos .m26-p177 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
@media (max-height: 740px) {
  #m26-videos .m26-design { padding-block: 18px; gap: 16px; }
}

/* Keep Remy's face in the compact crop and his sign-off at the foot of the scene. */
#m26-skillset .m26-design { min-height: calc(100svh / var(--m26-scale, 1)); }
#m26-skillset .m26-p263 { background-position: 50% 38%; }
#m26-skillset .m26-p267 { margin-top: auto; }

/* ---------------------------------------------------------------------------
   One scene = one phone screen, never a scroll (Remy, 18 Sept 2026).
   Paper exports each scene at a fixed 844px with a matching min-height. On a
   real phone Safari's toolbars leave ~660-745px, so those floors forced every
   scene to scroll. js/mobile26.js now sets --m26-page-height from the live
   viewport; these rules drop the floors so the scenes actually use it.
   --------------------------------------------------------------------------- */
@media (max-width: 600px), (max-width: 1000px) and (pointer: coarse) and (max-height: 600px) {
  #mobile26 .m26-scene { overflow: hidden; }
  #mobile26 .m26-scene > .m26-design {
    height: var(--m26-page-height);
    min-height: 0;
  }
  /* The hero carries the 64px header above its design box. */
  #mobile26 [data-scene='hero'] > .m26-design {
    height: calc(var(--m26-page-height) - 64px);
    min-height: 0;
  }
  /* The roadmap and founder stages wrap the design box, so the box sizes to the
     stage — and their full-screen slides carry Paper's 844px floor of their own,
     which has to go too or content runs under the pinned dots and CTA. */
  #mobile26 .m26-roadmap-stage > .m26-design { height: var(--m26-page-height); min-height: 0; }
  #mobile26 .m26-roadmap-stage .m26-full-slide,
  #mobile26 .m26-founder-stage .m26-full-slide { height: var(--m26-page-height); min-height: 0; }
  /* FAQ is the one scene allowed to grow: open answers push it past a screen. */
  #mobile26 [data-scene='faq'] { overflow-y: auto; }
  #mobile26 [data-scene='faq'] > .m26-design { height: auto; min-height: var(--m26-page-height); }
}

/* ---------------------------------------------------------------------------
   Merge notes, 18 Sept 2026. Overrides live here, never in mobile26-paper.css,
   so that file stays an exact record of the Paper 26M export.
   --------------------------------------------------------------------------- */

/* Hero (01): proof sits BELOW the CTA and reads as one Trustpilot line, with the
   signature green tiles at the real 4.6 / 5 rating (Remy, 18 Sept 2026).
   Paper stacked it column-reverse, which put the proof above the button. */
#m26-hero .m26-p15 { flex-direction: column; }
#m26-hero .m26-hero-proof { gap: 8px; }
#m26-hero .m26-hero-stars { display: inline-flex; align-items: center; }
#m26-hero .m26-hero-stars svg { display: block; }

/* Growth (03): the headcount-overhead sentence is gone, and the headline gets
   more air above the subtext. The chart still carries the overhead idea. */
#m26-growth .m26-p26 { gap: 22px; }

/* You direct (04): the rail is 24px wider than a slide, so without trailing
   space slide 2 can never reach its snap position and lands flush against the
   right edge of the phone. The padding gives it somewhere to land. */
#m26-direct .m26-p61 { padding-inline-end: 24px; align-items: center; }
/* Lift the pinned example note further up onto the photograph. */
#m26-direct .m26-p63 { padding-bottom: 64px; }

/* Operating system (06): break the headline a word earlier, grow the OS folder
   toward the size it has on the live phone layout (270x212 there, 130x102 in the
   Paper export), and move the subtext under the graphic as the closing line. */
#m26-operating-system .m26-p101 { height: auto; }
#m26-operating-system .m26-p102 { zoom: 1.4; }
/* Trimmed to two Skills and four Tools, with the agent-row label gone, so the
   diagram can breathe instead of filling the frame (Remy, 18 Sept 2026). */
#m26-operating-system .m26-design { gap: 24px; padding-block: 56px; }
#m26-operating-system .m26-p89 { gap: 28px; }
#m26-operating-system .m26-p90 { gap: 4px; }
#m26-operating-system .m26-p26 { gap: 14px; }
#m26-operating-system .m26-os-takeaway {
  flex-shrink: 0; align-self: center; width: 100%; text-align: center;
  font-size: 16px; line-height: 24px;
}
#m26-operating-system .m26-os-takeaway mark { padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Context, Tools, Skills (07): the Paper export wrote filterUnits/stdDeviation
   in kebab-case and reused one set of gradient ids across every document, so the
   Skills documents rendered as flat grey silhouettes. Fixed in the partial. */
#m26-framework .m26-p145 { width: 76px; height: 99px; }

/* Video stories (09): the CTA carries the same proof row as the hero and close. */
#m26-videos .m26-videos-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
#m26-videos .m26-video-blake { background-image: url(/assets/img/optimized/blake-rocha-bb54c74ba347.webp); }

/* Roadmap (10): the CTA is pinned under the chapter cards for all eight chapters
   instead of appearing only on the last one (Remy, 18 Sept 2026). js/mobile26.js
   lifts it out of chapter 08 into the stage. */
.m26-pinned-roadmap-cta { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 0; display: flex; justify-content: center; }
.m26-pinned-roadmap-cta .m26-p147 { width: 350px; }
.m26-pinned-roadmap-cta[hidden] { display: none; }
#m26-roadmap .m26-p217 { padding-bottom: 118px; }

/* Skillset (11): "technical" drops to the second line, and the scene spreads
   evenly instead of bunching at the top with dead space under the signature. */
#m26-skillset .m26-design { padding-block: 34px; gap: 16px; justify-content: space-between; }
#m26-skillset .m26-p262 { font-size: 30px; line-height: 35px; }
#m26-skillset .m26-p264 { padding-top: 0; }
#m26-skillset .m26-p267 { margin-top: 0; padding-top: 0; }

/* A note from Remy (14): stark white ground, centred headline, centred Polaroid
   captions, a real shadow under each Polaroid, and taller photo windows so the
   pictures fill their frames. */
#m26-founder .m26-p290, #m26-founder .m26-p291 { background-color: #FFFFFF; }
/* Remy's handwritten line reads as a note, not a label. */
#m26-founder .m26-p294 { text-transform: lowercase; font-size: 21px; line-height: 26px; }
/* The dots belong to the scene, not the slide: they hold still and the active
   dot steps along while the slides travel behind them. */
.m26-founder-stage { position: relative; width: 390px; margin-inline: auto; zoom: var(--m26-scale,1); }
.m26-founder-stage .m26-design { zoom: 1; }
#mobile26 .m26-founder-stage > .m26-design { height: var(--m26-page-height); min-height: 0; }
.m26-pinned-story { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 18px; }
#m26-founder .m26-p293 { align-items: center; text-align: center; }
#m26-founder .m26-p294, #m26-founder .m26-p295, #m26-founder .m26-p309 { text-align: center; }
#m26-founder .m26-p297 { box-shadow: 0 1px 3px #2524221a, 0 14px 30px -6px #2524222e; }
#m26-founder .m26-p299, #m26-founder .m26-p308 { text-align: center; }
#m26-founder .m26-p298, #m26-founder .m26-p307, #m26-founder .m26-p310 { height: 248px; }
/* The Agency days source is a tall 1320x2868 screenshot, so Paper's height-based
   crop left white bands either side of the photo. Cover fills the window. */
#m26-founder .m26-p298 { background-size: cover; background-position: 50% 66%; }
#m26-founder .m26-slide:nth-child(3) .m26-p307 {
  background-image: url('/assets/img/optimized/founder-going-all-in.webp');
  background-position: 50% 50%;
  background-size: cover;
}
#m26-founder .m26-slide:nth-child(4) .m26-p307 {
  background-image: url('/assets/img/optimized/founder-noah.webp');
  background-position: 50% 45%;
  background-size: cover;
}
#m26-founder .m26-slide:last-child .m26-p310 {
  background-image: url('/assets/img/optimized/founder-creating-course.webp');
  background-position: 50% 44%;
  background-size: cover;
}
#m26-founder .m26-slide:last-child .m26-p293 { margin-bottom: 8px; }
#m26-founder .m26-p311 { gap: 16px; padding-bottom: 0; }
#m26-founder .m26-p312 { display: none; }
#m26-founder .m26-p313 { transform: translateY(8px); }

/* Everything included (15): one card colour, left-aligned rows led by a green
   tick, and the launch extras as a yellow slip with a gold star sticker.
   ?cards=grey swaps the blue cards for the warm grey ones. */
#m26-included { --m26-inc-card: #ECEEFF; --m26-inc-title: #3131B5; }
#mobile26[data-cards='grey'] #m26-included { --m26-inc-card: #F7F6F2; --m26-inc-title: #1A1816; }
#m26-included .m26-design { gap: 18px; }
#m26-included .m26-p317 { gap: 4px; }
#m26-included .m26-inc-row {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; flex-shrink: 0;
  background-color: var(--m26-inc-card); border-radius: 8px; padding: 7px 10px; text-align: left;
}
#m26-included .m26-inc-tick { flex: 0 0 16px; width: 16px; height: 15px; margin-top: 3px; color: #1A8F53; }
#m26-included .m26-inc-tick svg { display: block; }
#m26-included .m26-inc-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
#m26-included .m26-inc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#m26-included .m26-inc-title { font: 500 14px/20px 'Inter 26M', system-ui, sans-serif; color: var(--m26-inc-title); }
#m26-included .m26-inc-desc { font: 12px/17px 'Inter 26M', system-ui, sans-serif; color: #635F59; }
#m26-included .m26-inc-badge {
  flex: 0 0 auto; font-family: 'Space Mono', system-ui, sans-serif; font-size: 10px; line-height: 14px;
  letter-spacing: .04em; color: #6B6979; text-align: right;
}
#m26-included .m26-inc-slip {
  position: relative; display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background-color: #FFFBD8; background-image: linear-gradient(180deg, #FFFBD8 0%, #FFF6BC 100%);
  border: 0; border-radius: 3px; padding: 11px 14px 12px; text-align: left; rotate: -1.2deg;
  box-shadow: 0 1px 2px #68561a1f, 0 7px 16px #68561a26; flex-shrink: 0; margin-top: 4px;
}
#m26-included .m26-p324 { text-align: left; color: #62521A; }
#m26-included .m26-inc-extra { font: 13px/18px 'Inter 26M', system-ui, sans-serif; color: #4A3F17; text-align: left; }
#m26-included .m26-inc-star {
  position: absolute; top: -10px; right: -8px; width: 26px; height: 26px; rotate: 14deg;
  filter: drop-shadow(0 1px 2px #68561a4d);
}
#m26-included .m26-inc-star svg { display: block; }

/* Your next step (16): more air between the headline, the subtext and the card. */
#m26-pricing .m26-p346 { margin-top: 6px; margin-bottom: 12px; }

/* FAQ (18): the live phone format — left-aligned rows on hairline dividers with
   the plus/minus icon on the right. Every answer is closed so the nine rows fit
   one frame; the scene only scrolls once someone opens one. */
#m26-faq .m26-design { padding-block: 40px; gap: 18px; }
#m26-faq .m26-p218 { gap: 10px; }
#m26-faq .m26-p34, #m26-faq .m26-p27, #m26-faq .m26-p365 { text-align: left; }
#m26-faq .m26-p366 { border-top: 1px solid #1A1816; }
#m26-faq .m26-faq-item { width: 100%; border-bottom: 1px solid #E7E5E4; }
#m26-faq .m26-faq-summary {
  width: 100%; min-height: 0; justify-content: space-between; gap: 20px; text-align: left;
  padding: 16px 0; border-bottom: 0; font: 15px/21px 'Inter 26M', system-ui, sans-serif;
  letter-spacing: -.01em; color: #1A1816;
}
#m26-faq .m26-faq-sign { position: static; width: 18px; height: 18px; flex: 0 0 18px; color: #55524C; }
#m26-faq .m26-faq-sign svg { display: block; }
#m26-faq .m26-faq-icon-v { transform-origin: 9px 9px; transition: transform .18s ease; }
#m26-faq .m26-faq-item[open] .m26-faq-icon-v { transform: scaleY(0); }
#m26-faq .m26-faq-answer { padding: 0 0 16px; text-align: left; font: 14px/21px 'Inter 26M', system-ui, sans-serif; color: #55524C; }
/* Only one answer is ever open (<details name>), and while one is open the closed
   rows tighten so the whole list still fits the frame. */
#m26-faq .m26-faq-summary { transition: padding .18s ease; }
#m26-faq .m26-p366:has(.m26-faq-item[open]) .m26-faq-summary { padding-block: 10px; }
@media (prefers-reduced-motion: reduce) { #m26-faq .m26-faq-summary { transition: none; } }
#m26-faq .m26-faq-answer p { margin: 0 0 12px; }
#m26-faq .m26-faq-answer p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { #m26-faq .m26-faq-icon-v { transition: none; } }

/* Short phones: the densest scenes give up padding before they give up content. */
@media (max-height: 740px) {
  #m26-included .m26-design { padding-block: 34px; gap: 14px; }
  #m26-included .m26-inc-row { padding-block: 5px; }
  #m26-faq .m26-design { padding-block: 28px; gap: 14px; }
  #m26-faq .m26-faq-summary { padding-block: 10px; font-size: 14px; line-height: 20px; }
  #m26-pricing .m26-p346 { margin-top: 4px; margin-bottom: 8px; }
  /* Paper fixes the chapter card at 478px. On a short phone that plus the pinned
     CTA is more than one screen, so let the card take whatever is left. */
  #m26-roadmap .m26-p217 { padding-block: 32px; padding-bottom: 104px; gap: 16px; }
  #m26-roadmap .m26-p228 { flex: 1 1 auto; height: auto; min-height: 0; }
  #m26-roadmap .m26-p229 { min-height: 0; }
  .m26-pinned-roadmap-cta { bottom: 0; }
}

/* ---------------------------------------------------------------------------
   Scene transitions. A swipe should read as the page travelling to the next
   screen, not as one frame blinking into another (Remy, 18 Sept 2026).
   Both scenes stay painted while they slide; js/mobile26.js drives the pair.
   --------------------------------------------------------------------------- */
.m26-scene[data-leaving] { z-index: 1; }
.m26-scene[data-entering] { z-index: 2; }
#mobile26 .m26-scene[data-entering] .m26-design:not(.m26-carousel) > *,
#mobile26 .m26-scene[data-entering] > .m26-carousel,
#mobile26 .m26-scene[data-entering] > .m26-roadmap-stage,
#mobile26 .m26-scene[data-entering] > .m26-founder-stage,
#mobile26 .m26-scene[data-entering] .m26-header { animation: m26-rise 380ms cubic-bezier(.32,.72,0,1) both; }
#mobile26 .m26-scene[data-entering] .m26-design:not(.m26-carousel) > :nth-child(2) { animation-delay: 45ms; }
#mobile26 .m26-scene[data-entering] .m26-design:not(.m26-carousel) > :nth-child(3) { animation-delay: 90ms; }
#mobile26 .m26-scene[data-entering] .m26-design:not(.m26-carousel) > :nth-child(4) { animation-delay: 130ms; }
#mobile26 .m26-scene[data-entering] .m26-design:not(.m26-carousel) > :nth-child(n+5) { animation-delay: 165ms; }
@keyframes m26-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #mobile26 .m26-scene[data-entering] .m26-design:not(.m26-carousel) > *,
  #mobile26 .m26-scene[data-entering] > .m26-carousel,
  #mobile26 .m26-scene[data-entering] > .m26-roadmap-stage,
  #mobile26 .m26-scene[data-entering] > .m26-founder-stage,
  #mobile26 .m26-scene[data-entering] .m26-header { animation: none; }
}

/* Same photo crops, with smaller downloads for mobile scene transitions. */
#m26-direct .m26-p64 { background-image: url(/assets/img/optimized/direct-outcome-1080-d316c491a280.webp); }
#m26-direct .m26-p75 { background-image: url(/assets/img/optimized/direct-improvement-1080-30d85d9d5344.webp); }

/* Reserve enough room for all capacity slide copy inside the fixed screen. */
#m26-capacity .m26-design { padding-block: 32px; }

/* Reviews keep their own space below the heading, with native swipeable rows. */
#m26-reviews .m26-review-rows { width: 390px; margin-inline: -20px; gap: 12px; overflow: hidden; }
#m26-reviews .m26-review-tracks { display: flex; flex-direction: column; gap: 10px; width: 100%; flex-shrink: 0; overflow: hidden; }
#m26-reviews .m26-review-row { width: 100%; height: 144px; margin-inline: 0; padding-inline: 20px; scroll-behavior: auto; overflow-x: auto; overflow-y: hidden; }
#m26-reviews [data-review-id] { position: static; height: 144px; }
#m26-reviews .m26-p278 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 0; }
#m26-reviews .m26-p280 { display: grid; place-items: center; background-color: #e0e6e0; color: #47614e; font: 500 14px/18px 'Inter 26M', sans-serif; }
#m26-reviews .m26-p282 { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Centre the guarantee in the space below the offer bar. */
#m26-guarantee .m26-design { justify-content: center; }
#m26-guarantee .m26-p327 { flex-shrink: 0; }
/* Let the order card use the rest of the scene instead of leaving a blank footer. */
#m26-pricing .m26-p347 { flex: 1 0 auto; padding-block: 16px; gap: 12px; justify-content: space-between; }
#m26-pricing .m26-p348 { gap: 6px; }
#m26-pricing .m26-p350 { font-size: 48px; line-height: 52px; }
#m26-pricing .m26-p353 { flex: 1 0 auto; padding-top: 14px; gap: 10px; justify-content: space-evenly; }
#m26-pricing .m26-p356, #m26-pricing .m26-p361 { font-size: 15px; line-height: 22px; }
#m26-pricing .m26-p357 { padding-top: 6px; gap: 6px; }
#m26-pricing .m26-p362 { gap: 12px; }
/* Limited-time price (Charlie, 26 Sept 2026): the saving is highlighted and the weekly plan is one plain line. */
#m26-pricing .m26-save mark { padding: 1px 4px; background: #FFE76A; color: #1A1816; font-weight: 500; }
#m26-pricing .m26-plan { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid #E4E1DA; }
#m26-pricing .m26-plan-sum { font: 15px/20px 'Inter 26M', system-ui, sans-serif; color: #635F59; }
#m26-pricing .m26-plan-sum strong { font-weight: 500; color: #1A1816; }
#m26-pricing .m26-plan-sum s { margin-left: 4px; color: #8B8780; text-decoration-thickness: 1px; }
#m26-footer .m26-p399 { flex-direction: column; gap: 4px; }
#m26-footer .m26-footer-legal-link { display: flex; align-items: center; justify-content: center; min-height: 40px; font: 400 13px/20px 'Inter 26M', sans-serif; color: #78716c; text-align: center; }

/* Preserve a complete order card when a phone is turned sideways. */
@media (max-height: 450px) {
  #m26-pricing .m26-design { gap: 6px; }
  #m26-pricing .m26-p346 { margin-block: 0; }
  #m26-pricing .m26-p347 { padding-block: 8px; gap: 6px; }
  #m26-pricing .m26-p348 { gap: 4px; }
  #m26-pricing .m26-p350 { font-size: 44px; line-height: 46px; }
  #m26-pricing .m26-p353 { padding-top: 8px; gap: 6px; }
  #m26-pricing .m26-p356, #m26-pricing .m26-p361 { font-size: 14px; line-height: 20px; }
  #m26-pricing .m26-p357 { padding-top: 2px; gap: 4px; }
  #m26-pricing .m26-p362 { gap: 8px; }
  #m26-pricing .m26-plan { padding-top: 8px; gap: 6px; }
}