/* ==========================================================================
   OPAL — Responsive reflow (below artboard threshold)
   Below 1100px wide or 620px tall each slide becomes a document column.
   ========================================================================== */

@media (max-width: 1099.98px), (max-height: 619.98px) {

  /* ── Mobile sticky navbar ── */

  body {
    padding-top: clamp(56px, 14vw, 72px);
  }

  .mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    height: clamp(56px, 14vw, 72px);
    padding: 0 clamp(16px, 5vw, 28px);
    /* Solid, not translucent-with-backdrop-filter(blur) — GPU-composited
       blur on a fixed/scroll-pinned element is a known compositor-cost
       hotspot on Android Chrome, re-blurring the content scrolling
       beneath it on every frame. On weaker GPUs the raster thread can't
       keep up with fast scroll, and the newly-exposed screen area briefly
       shows a solid flash of unpainted background before content catches
       up (reported: a navy band at the bottom of the viewport mid-scroll,
       matching body's background color). Dropping the blur removes that
       per-frame cost entirely; a near-opaque solid fill reads almost
       identically to the frosted-glass look it replaces. */
    background: var(--cream);
    border-bottom: 1px solid rgba(14, 26, 54, 0.08);
  }

  .mobile-nav__logo {
    display: block;
    /* Slightly bigger (was clamp(84px, 22vw, 116px)) — the navbar's own
       height (clamp(56px, 14vw, 72px), unchanged) has plenty of headroom
       above this logo's rendered height even at the new, larger size, so
       it grows without affecting the header's height. */
    width: clamp(120px, 25vw, 130px);
  }
  .mobile-nav__logo img {
    width: 100%;
    height: auto;
    display: block;
  }

  .mobile-nav__toggle {
    position: relative;
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 8px;
  }
  .mobile-nav__toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
  }
  .mobile-nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .mobile-nav__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .mobile-nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-nav__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 290;
    background: rgba(8, 17, 35, 0.5);
    opacity: 0;
    pointer-events: none;
    /* visibility (not just opacity) when hidden — an opacity:0 fixed,
       inset:0 layer still exists as a real compositor layer even fully
       transparent, and an always-present dark full-viewport layer like
       this is a plausible source of a stray navy flash during scroll on
       Android Chrome (a known category of bug around hidden-by-opacity
       fixed overlays). visibility:hidden lets the browser drop it from
       compositing entirely while closed; the transition-delay keeps the
       visibility change instant on the way out (after the fade finishes)
       but zero-delay on the way in. */
    visibility: hidden;
    transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .mobile-nav__scrim.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.3s var(--ease-out), visibility 0s linear 0s;
  }

  /* height (not max-height) + overflow-y:auto as a last-resort safety
     net: each link below is flex:1, so 17 items always exactly divide
     this fixed height between them — the menu fits without scrolling
     on any realistic device, short phones included, instead of
     scrolling past a fixed per-item size. */
  .mobile-nav__menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: clamp(56px, 14vw, 72px);
    right: 0;
    z-index: 295;
    width: min(92vw, 400px);
    height: calc(100vh - clamp(56px, 14vw, 72px));
    overflow-y: auto;
    background: var(--navy);
    padding: 6px 10px;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  }
  .mobile-nav__menu.is-open {
    transform: translateX(0);
    box-shadow: -18px 0 40px rgba(8, 17, 35, 0.35);
  }

  .mobile-nav__menu a {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-height: 0;
    gap: 12px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    /* min(...vw, ...vh): the vw term keeps the longest label ("Founding
       Customer Commitment") on one line down to 320px-wide phones (no
       truncation, per instruction — shrink instead); the vh term keeps
       every row's text from outgrowing its flex-divided share of height
       on short-height phones. Whichever constraint is tighter wins. The
       drawer itself is widened (above) to 92vw/400px so the font doesn't
       have to shrink as aggressively to make this fit. */
    font-size: clamp(11.5px, min(3.7vw, 3.6vh), 16px);
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
  }
  .mobile-nav__menu a:hover,
  .mobile-nav__menu a:focus-visible {
    background: rgba(215, 167, 119, 0.16);
    color: #FFFFFF;
  }
  .mobile-nav__menu a.is-active {
    background: rgba(215, 167, 119, 0.22);
    color: var(--gold);
  }

  .mobile-nav__num {
    flex: none;
    width: 28px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 13px;
    color: var(--gold);
  }

  .slide-shell {
    display: block;
    min-height: 0;
    padding: 0;
    /* Without this, scrollIntoView({block:'start'}) from the menu aligns
       the slide's top edge with the viewport's top edge — but the fixed
       header sits on top of that same strip, covering the first ~60-70px
       of the destination slide's title. scroll-margin-top tells the
       browser to stop short by the header's height instead. */
    scroll-margin-top: clamp(56px, 14vw, 72px);
  }

  .slide {
    width: 100%;
    aspect-ratio: auto;
    overflow: visible;
  }

  .stage {
    --u: clamp(0.66px, calc(0.5px + 0.04cqw), 0.95px);
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(24 * var(--u));
    padding: clamp(26px, 7cqw, 64px) clamp(20px, 6cqw, 72px);
  }

  .at, .tb {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
  }

  .tb { padding: 0 !important; }
  .stage img { max-width: 100%; }

  /* The fixed .mobile-nav header already carries the OPAL mark, so the
     slide-level logo would be duplicate branding — hide it entirely. */
  .slide-logo {
    display: none !important;
  }

  .s2 .stage,
  .s3 .stage,
  .s4 .stage,
  .s5 .stage {
    padding-top: clamp(48px, 12cqw, 80px) !important;
  }

  /* ── Footer (mobile: two lines, first line golden) ── */

  .slide-footer {
    position: static !important;
    text-align: center;
    font-size: clamp(9px, 2.7cqw, 13px);
    padding: calc(16 * var(--u)) 0 0;
    margin-top: calc(20 * var(--u));
    border-top: 1px solid rgba(14, 26, 54, 0.1);
  }

  .slide-footer__line1,
  .slide-footer__line2 {
    display: block;
  }

  .slide-footer__line1 {
    color: var(--gold);
    margin-bottom: calc(4 * var(--u));
  }

  /* Line 2 now carries three phrases ("INVESTOR PRESENTATION · PRE-SEED
     ROUND · CONFIDENTIAL") instead of the old two-word line, so at the
     shared font-size it wrapped to its own second line — three lines of
     footer total. A smaller, independent size keeps it on one line
     across the full mobile/tablet range while line 1 (contact info)
     stays at its original readable size. */
  .slide-footer__line2 {
    font-size: clamp(7px, 2cqw, 10.5px);
  }

  .slide-footer__gold {
    color: var(--gold);
  }

  /* ======================================================== SLIDE 1 */

  .s1 .stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(28 * var(--u));
    min-height: 100svh;
    justify-content: center;
    padding-bottom: clamp(70px, 16cqw, 110px) !important;
  }

  .s1__logo {
    order: 1;
    position: static !important;
    /* 261u (was 420u, then 307u) — same reasoning as the desktop rule in
       slides.css: the new logo-light.png's tighter aspect ratio (2.163,
       was 2.961) renders taller at any given width, so the cap was
       scaled down to preserve the original visual height, then trimmed a
       further ~15% (307 * 0.85 = 260.95) per feedback. */
    width: min(75%, calc(261 * var(--u))) !important;
    align-self: center !important;
    margin: 0;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .s1__title {
    order: 2;
    font-size: clamp(26px, 5.7cqw, 40px) !important;
  }

  .s1__title br {
    display: none;
  }

  .s1__sub {
    order: 3;
    font-size: clamp(14px, 4.1cqw, 19px) !important;
  }

  .s1__invest {
    order: 4;
    margin-top: calc(8 * var(--u));
  }

  .s1__invest-name {
    font-size: clamp(18px, 4.2cqw, 25px) !important;
  }

  .s1 .slide-footer {
    order: 5;
    position: absolute !important;
    bottom: clamp(16px, 4cqw, 32px) !important;
    left: clamp(20px, 6cqw, 72px) !important;
    right: clamp(20px, 6cqw, 72px) !important;
    margin-top: 0;
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .s1 .slide-footer__line1 {
    color: var(--gold);
  }

  /* Slide 1's footer text is unchanged (short, already one line), so
     opt it back out of the smaller line-2 size added for the longer
     three-phrase footer used on every other slide. */
  .s1 .slide-footer__line2 {
    font-size: clamp(9px, 2.7cqw, 13px);
  }

  /* ======================================================== SLIDE 2 */

  .s2 .slide-logo { order: 1; }

  .s2__metro-logo {
    order: 2;
    width: min(84%, calc(400 * var(--u))) !important;
  }

  .s2__eyebrow { order: 3; }

  .s2__stat {
    order: 4;
    font-size: calc(27.8 * var(--u)) !important;
  }

  .s2__gallery {
    position: static !important;
    width: 100% !important;
    order: 5;
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
  }

  .s2__frame {
    width: 100%;
    aspect-ratio: 800 / 400;
  }

  .s2__thumbs {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(8 * var(--u)) calc(12 * var(--u));
    width: 100% !important;
  }

  .s2__thumb-wrap {
    width: auto !important;
  }

  .s2__quote {
    order: 6;
    max-width: 62ch;
    font-size: calc(19.8 * var(--u)) !important;
  }

  .s2__attrib {
    order: 7;
    position: static !important;
    padding: calc(16 * var(--u));
    border-radius: calc(12 * var(--u));
    background: var(--gold-fade);
    z-index: 1;
  }

  .s2__attrib--flat {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .s2 .slide-footer { order: 8; }

  /* ======================================================== SLIDE 3 */

  .s3 .slide-logo { order: 1; }
  .s3__eyebrow { order: 2; }

  .s3__title {
    order: 3;
    font-size: clamp(24px, 5.6cqw, 40px) !important;
  }

  .s3__photo-card {
    order: 4;
    width: min(74%, calc(320 * var(--u))) !important;
    height: auto !important;
    align-self: flex-start;
  }

  .s3__photo {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  .s3__nameplate {
    position: static !important;
    height: auto !important;
    padding: calc(8 * var(--u)) calc(16 * var(--u)) !important;
  }

  .s3__timeline {
    display: none !important;
  }

  .s3__stories {
    order: 5;
    display: flex;
    flex-direction: column;
    gap: calc(28 * var(--u));
    position: relative;
    padding-left: 0;
    padding-top: 10px;
  }

  .s3__stories::before {
    content: '';
    position: absolute;
    left: calc(27 * var(--u));
    top: calc(28 * var(--u));
    bottom: calc(28 * var(--u));
    width: calc(2 * var(--u));
    background: var(--gold);
    opacity: 0.35;
    border-radius: calc(1 * var(--u));
  }

  .s3__story {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: calc(14 * var(--u));
    position: relative;
  }

  .s3__node {
    position: static !important;
    flex: none;
    width: calc(56 * var(--u)) !important;
    height: calc(56 * var(--u)) !important;
    z-index: 1;
  }

  .s3__story-text { grid-column: 2; }

  .s3__story-title {
    position: static !important;
    width: auto !important;
    font-size: calc(24.2 * var(--u)) !important;
    margin-bottom: calc(4 * var(--u));
  }

  .s3__story-body {
    position: static !important;
    width: auto !important;
    font-size: calc(20 * var(--u)) !important;
  }

  .s3__close {
    order: 6;
    max-width: 46ch;
    font-size: calc(20 * var(--u)) !important;
  }

  .s3 .slide-footer { order: 7; }

  /* ======================================================== SLIDE 4 */

  .s4 .slide-logo { order: 1; }
  .s4__eyebrow { order: 2; }

  .s4__title {
    order: 3;
    font-size: clamp(24px, 5.6cqw, 40px) !important;
  }

  .s4__sub { order: 4; }

  .s4__circles {
    order: 5;
    display: flex !important;
    flex-direction: column;
    gap: calc(76 * var(--u));
    position: relative !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    padding-left: 0;
  }

  .s4__problem {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: calc(4 * var(--u)) calc(14 * var(--u));
    position: relative;
  }

  /* Thin rail segment: from this circle's centre down to the next circle's
     centre (gap = 76u), independent of how tall the text wraps. Hidden
     behind the circles, visible only in the gaps. */
  .s4__problem::before {
    content: '';
    position: absolute;
    top: calc(32 * var(--u));
    left: calc(31 * var(--u));
    width: calc(2 * var(--u));
    height: calc(100% + 76 * var(--u));
    background: var(--gold);
    opacity: 0.35;
    border-radius: calc(1 * var(--u));
    z-index: 0;
  }

  .s4__problem--3::before { display: none; }

  .s4__circle {
    position: static !important;
    grid-row: 1 / 3;
    grid-column: 1;
    align-self: start;
    width: calc(64 * var(--u)) !important;
    height: calc(64 * var(--u)) !important;
    z-index: 1;
  }

  .s4__col-title {
    position: static !important;
    width: auto !important;
    grid-column: 2;
    grid-row: 1;
    font-size: calc(24.2 * var(--u)) !important;
    margin-bottom: 0;
    text-align: left;
  }

  .s4__col-body {
    position: static !important;
    width: auto !important;
    grid-column: 2;
    grid-row: 2;
    font-size: calc(20 * var(--u)) !important;
    text-align: left;
  }

  .s4__line { display: none !important; }

  /* Thick rounded stub extends straight out of each circle's bottom edge,
     mirroring the desktop rail treatment. */
  .s4__connector {
    display: block !important;
    position: absolute !important;
    top: calc(64 * var(--u)) !important;
    left: calc(29 * var(--u)) !important;
    width: calc(6 * var(--u)) !important;
    height: calc(56 * var(--u)) !important;
    border-radius: calc(3 * var(--u)) !important;
    background: var(--gold);
    z-index: 1;
    transform: scaleY(0);
    transform-origin: top center;
  }

  .s4__problem--3 .s4__connector { display: none !important; }

  .js .s4__problem.is-in .s4__connector {
    animation: connector-grow-v 1.2s var(--ease-out) forwards;
    animation-delay: 0.3s;
  }

  .s4 .slide-footer { order: 6; }

  /* ======================================================== SLIDE 5 */

  .s5 .slide-logo { order: 1; }
  .s5__eyebrow { order: 2; }

  .s5__title {
    order: 3;
    font-size: clamp(24px, 5.6cqw, 40px) !important;
  }

  .s5__sub { order: 4; }

  /* The diagram is five position:absolute SVG layers stacked over each
     other. Giving the container an explicit/aspect-ratio height and having
     ALL children absolute is fragile on real mobile browsers: if that
     height doesn't resolve (async SVG load, etc.) the absolute layers fall
     back to their 2800px intrinsic size and spill over everything below.
     Robust fix: let ONE layer flow in-document so the box takes a definite
     height from the image's own dimensions (width:100% height:auto can
     never exceed the container width), and overlay the rest absolutely. */
  .s5__diagram {
    order: 5;
    position: relative !important;
    /* Bleeds past the stage's own horizontal padding (clamp(20px, 6cqw,
       72px) each side, set on .stage above) out to the full viewport
       width, instead of stopping at 100% of the padded content column —
       the diagram's labels still read small confined to that column, so
       let it grow past it the same way a full-bleed image would. Negative
       margins claw back exactly the padding on each side. */
    width: calc(100% + 2 * clamp(20px, 6cqw, 72px)) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    align-self: center;
    margin: calc(6 * var(--u)) calc(-1 * clamp(20px, 6cqw, 72px)) calc(18 * var(--u)) !important;
  }
  .s5__diagram-layer { object-fit: contain; }
  /* Base layer (the platform / module-cards art) flows and sets the height;
     it defines the full square extent. The others stay absolutely overlaid
     (inset:0), so they exactly cover it. */
  .s5__diagram-layer:nth-child(3) {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
  }

  .s5__diagram-mark {
    display: block !important;
    top: 43% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    /* Scaled up to match the diagram's own width increase (was sized for
       the old min(82vw, 384px) container, then the 100%-of-column one). */
    width: calc(50 * var(--u)) !important;
  }
  /* Downward chevron sits between the two stacked cards */
  .s5__arrow {
    display: flex !important;
    align-self: center;
    width: calc(30 * var(--u)) !important;
    height: calc(44 * var(--u)) !important;
    margin: calc(2 * var(--u)) 0 !important;
  }

  .s5__cards {
    order: 6;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    display: flex;
    flex-direction: column;
    gap: calc(18 * var(--u));
  }

  .s5__card {
    position: static !important;
    width: 100% !important;
    min-height: auto !important;
    top: auto !important;
    left: auto !important;
  }

  .s5__card-kicker {
    font-size: clamp(12px, 4.4cqw, 15px) !important;
  }

  .s5__card-title {
    font-size: calc(26.2 * var(--u)) !important;
  }

  .s5__card-list li {
    font-size: calc(20 * var(--u));
  }

  .s5__card-emphasis {
    font-size: calc(24 * var(--u)) !important;
  }

  .s5 .slide-footer {
    order: 7;
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .s5 .slide-footer__line1 {
    color: var(--gold);
  }

  /* ======================================================== SLIDE 6 */

  .s6 .slide-logo { order: 1; }
  .s6__eyebrow { order: 2; }

  .s6__title {
    order: 3;
    font-size: clamp(24px, 5.6cqw, 40px) !important;
  }

  .s6__sub { order: 4; }
  .s6__venn { order: 5; }
  .s6 .slide-footer { order: 6; }

  /* Stack the Venn vertically on mobile: same two circles + centre lens,
     just rotated to a portrait arrangement so each circle gets the full
     column width to work with — legible text instead of a squeezed strip.
     Every measurement below uses cqw (== % of the container's own WIDTH,
     via container-type: inline-size on .s6__venn), for BOTH axes — that
     keeps circle diameter, vertical offsets and text box widths in one
     consistent unit instead of fighting a width%/height% conversion.
     Order top-to-bottom: emph--1, then the circle stack, then emph--2 —
     the two takeaway lines bracket the diagram instead of both trailing
     after it. */
  /* Height as aspect-ratio, not height:258cqw — an element's own cqw
     height can't reference its own (container-queried) width, so it was
     resolving against the next container up (.slide, i.e. the full
     viewport width) instead of this element's actual min(92vw,420px)
     width. That made the venn balloon well past its intended height on
     any viewport wider than a phone (e.g. tablets), since .slide's width
     kept growing past 420px while this element's own width did not.
     aspect-ratio sizes off the box's own rendered width instead. */
  .s6__venn {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: min(92vw, 420px) !important;
    /* DEFINITE height in the same width units (100/220 aspect = width * 2.2)
       instead of aspect-ratio. The force text inside is position:absolute
       top:%, so it needs a resolved height from the first paint — on real
       iOS/Android an aspect-ratio height isn't available until layout
       settles, which collapsed the box on load and broke page scroll. */
    height: calc(min(92vw, 420px) * 2.2) !important;
    inset: auto !important;
    align-self: center;
    margin: 0 auto;
  }

  .s6__circle {
    width: 90cqw !important;
    height: 90cqw !important;
    left: 5cqw !important;
  }
  /* Circle offsets used to leave ~150px of dead air above the first
     circle (46cqw of clearance for emph text that only renders ~10cqw
     tall on 2-line wraps) — tightened, but with enough headroom for the
     emph text to wrap to 3 lines on narrower phones (it wraps 2 lines
     on a ~420px-wide tablet card but 3 on a ~360px phone one), since
     these offsets are fixed regardless of how many lines the text
     actually takes. Lens overlap between the two circles (74.7cqw
     apart) is preserved. */
  .s6__circle--navy { top: 24cqw !important; }
  .s6__circle--gold { top: 98.7cqw !important; }

  .s6__lens {
    top: 24cqw !important;
    left: 5cqw !important;
    width: 90cqw !important;
    height: 90cqw !important;
  }
  /* This top offset is relative to .s6__lens's own box (its containing
     block), NOT the venn — so it must stay at the circle-diameter-minus-
     overlap constant (74.7cqw) regardless of where the circle stack
     sits within the venn. Shifting it to "compensate" for the circle
     stack's position (as a previous edit did) double-counts that shift
     and blows the clipped intersection shape up to several times its
     correct size. */
  .s6__lens-inner { top: 74.7cqw !important; left: 0 !important; }

  .s6__force {
    position: absolute !important;
    width: 70cqw !important;
    left: 15cqw !important;
    text-align: center !important;
  }
  /* Extra top padding inside the first circle so the "01" label isn't
     crowding the curve — the top of the circle stays visibly clear. */
  .s6__force--1 { top: 42cqw !important; }
  .s6__force--2 { top: 122cqw !important; }

  .s6__num       { font-size: clamp(16px, 5.6cqw, 21px) !important; margin-bottom: 6px !important; }
  .s6__force-title { font-size: clamp(15px, 5cqw, 18px) !important; margin-bottom: 7px !important; line-height: 1.25 !important; }
  .s6__force-body  { font-size: clamp(12px, 4cqw, 14px) !important; line-height: 1.4 !important; }
  .s6__force-body + .s6__force-body { margin-top: 7px !important; }

  .s6__emph {
    position: absolute !important;
    top: auto !important;
    bottom: auto !important;
    width: 90cqw !important;
    left: 5cqw !important;
    text-align: center !important;
    font-size: clamp(13px, 4.6cqw, 16px) !important;
  }
  .s6__emph--1 { top: 0 !important; }
  .s6__emph--2 { top: 194cqw !important; }

  /* ======================================================== SLIDE 7 */

  .s7 .slide-logo { order: 1; }
  .s7__eyebrow { order: 2; }
  .s7__title { order: 3; font-size: clamp(24px, 5.6cqw, 40px) !important; }
  .s7__sub { order: 4; }
  .s7__hero { order: 5; }
  .s7__card--capture { order: 6; }
  .s7__card--reconcile { order: 7; }
  .s7__card--detect { order: 8; }
  .s7__card--messages { order: 9; }
  .s7__card--forecast { order: 10; }
  .s7 .slide-footer { order: 11; }

  .s7__hero,
  .s7__card {
    position: static !important;
    width: auto !important;
    height: auto !important;
    inset: auto !important;
    padding: calc(30 * var(--u)) calc(28 * var(--u)) !important;
  }

  .s7__hero-icon { width: calc(64 * var(--u)) !important; height: calc(64 * var(--u)) !important; margin-bottom: calc(20 * var(--u)); }
  .s7__hero-title { font-size: calc(32 * var(--u)) !important; margin-bottom: calc(18 * var(--u)) !important; }
  .s7__hero-body { font-size: calc(20 * var(--u)) !important; }
  .s7__hero-pill { height: auto !important; padding: calc(16 * var(--u)); font-size: calc(18 * var(--u)) !important; margin-top: calc(22 * var(--u)); }

  .s7__card-icon { width: calc(52 * var(--u)) !important; height: calc(52 * var(--u)) !important; }
  .s7__card-title { font-size: calc(26 * var(--u)) !important; }
  .s7__card-body { font-size: clamp(13px, 4cqw, 15px) !important; }

  .s7__card-head {
    margin-bottom: 10px;
  }

  .s7__hero-kicker {
        font-size: calc(20 * var(--u));
  }

  /* ======================================================== SLIDE 8 */

  .s8 .slide-logo { order: 1; }
  .s8__eyebrow { order: 2; }
  .s8__title { order: 3; font-size: clamp(24px, 5.6cqw, 40px) !important; }
  .s8__sub { order: 4; }
  .s8__rings { order: 5; }
  .s8__legend { order: 6; }
  .s8__highlight { order: 7; }
  .s8__foot { order: 8; }
  .s8 .slide-footer { order: 9; }

  .s8__ring-label {
        font-size: 2.8cqw;
  }

  .s8__ring-sub {
    font-size: 2.55cqw;
  }

  .s8__ring-note {
    font-size: 2.8cqw;
  }

  .s8__ring-label {
    font-size: 3cqw;
  }

  .s8__ring-mini {
    font-size: 2.55cqw;
  }

  .s8__ring--som {
    top: 63.86%;
    left: 31%;
    width: 36%;
    height: 36%;
  }

  .s8__ring--som .s8__ring-sub,
  .s8__ring--som .s8__ring-note,
  .s8__ring-strong {
    display: none;
  }

  .s8__rings {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 92vw !important;
    max-width: calc(620 * var(--u)) !important;
    /* Definite square height (matches width) instead of aspect-ratio — the
       nested rings inside are position:absolute and need a resolved height
       from the first paint (see slide 5/6 notes). */
    height: min(92vw, calc(620 * var(--u))) !important;
    align-self: center;
  }

  .s8__legend {
    position: static !important;
    width: auto !important;
    inset: auto !important;
  }

  .s8__row-title { font-size: calc(26 * var(--u)) !important; }
  .s8__row-body { font-size: calc(20 * var(--u)) !important; }
  .s8__dot { width: calc(64 * var(--u)) !important; height: calc(64 * var(--u)) !important; font-size: calc(16 * var(--u)) !important; }

  .s8__highlight {
    position: static !important;
    width: auto !important;
    inset: auto !important;
  }
  .s8__hl-big { font-size: calc(26.4 * var(--u)) !important; }

  .s8__foot {
    position: static !important;
    width: auto !important;
    inset: auto !important;
    font-size: calc(16 * var(--u)) !important;
  }

  /* ======================================================== SLIDE 9 */

  .s9 .stage { padding-top: clamp(48px, 12cqw, 80px) !important; }
  .s9 .slide-logo { order: 1; }
  .s9__eyebrow { order: 2; }
  .s9__title { order: 3; font-size: clamp(24px, 6.6cqw, 40px) !important; }
  .s9__sub { order: 4; font-size: calc(16 * var(--u)); }
  .s9__shot { order: 5; align-self: center; width: 100% !important; max-width: calc(680 * var(--u)); }
  .s9__rt { order: 6; font-size: calc(27.8 * var(--u)) !important; }
  .s9__list { order: 7; }
  .s9__timeline { order: 8; padding-top: calc(20 * var(--u));}
  .s9 .slide-footer { order: 9; }

  .s9__timeline {
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: calc(22 * var(--u));
  }
  .s9__rule { display: none; }
  .s9__build {
    position: static !important;
    width: auto !important;
    inset: auto !important;
    font-size: calc(26.4 * var(--u)) !important;
  }
  /* Vertical timeline: a thin rail runs from each check circle's centre
     down to the next one's, through the gap between nodes — same
     rail/connector language as Slide 4's mobile problem list. */
  .s9__node {
    position: relative !important;
    width: auto !important;
    inset: auto !important;
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
  }
  .s9__node::before {
    content: '';
    position: absolute;
    top: calc(40 * var(--u));
    left: calc(20 * var(--u));
    width: calc(2 * var(--u));
    height: calc(100% + 22 * var(--u) - 40 * var(--u));
    background: var(--gold);
    opacity: 0.35;
    z-index: 0;
  }
  .s9__node--5::before { display: none; }
  .s9__check { position: relative; z-index: 1; flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin: 0;}
  .s9__step { margin-top: 0 !important; font-size: calc(20 * var(--u)) !important; line-height: 1.35 !important; text-align: left; }
  .s9__item-title { font-size: calc(26 * var(--u)) !important; }
  .s9__item-body { font-size: calc(20 * var(--u)) !important; }

  /* ======================================================== SLIDE 10 */

  .s10__pbbody,
  .s15__disclosure  { 
    padding: 0;
  }

  .s10 .stage { padding-top: clamp(48px, 12cqw, 80px) !important; }
  .s10 .slide-logo { order: 1; }
  .s10__eyebrow { order: 2; }
  .s10__title { order: 3; font-size: clamp(24px, 6.6cqw, 40px) !important; }
  .s10__sub { order: 4; }
  .s10__cards { order: 5; }
  .s10__note--chart { order: 6; }
  .s10__note--cards { order: 7; }
  .s10__playbook { order: 8; font-size: calc(26.4 * var(--u)) !important; }
  .s10__pbbody { order: 9; }
  .s10 .slide-footer { order: 10; }

  .s10__cards {
    position: static !important;
    width: auto !important;
    height: auto !important;
    inset: auto !important;
    flex-wrap: wrap;
    gap: calc(28 * var(--u));
  }
  .s10__card {
    flex: 1 1 calc(50% - calc(28 * var(--u)));
    min-width: calc(220 * var(--u));
    height: auto !important;
    min-height: calc(300 * var(--u));
  }
  /* Fixed square-ish aspect ratio (matches desktop) instead of a flat
     min-height — a min-height lets the card's width:height ratio swing
     wide on 2-column tablet layouts, and since the JUL 2026 / JUN 2007
     labels are sized in cqw (container width), a shorter-than-expected
     box makes that text tall relative to the box and it collides with
     the curve's fixed-% endpoint dots. */
  .s10__card--chart { min-height: 0; height: auto; aspect-ratio: 1 / 1; }
  .s10__mult { font-size: calc(41.6 * var(--u)) !important; }
  .s10__note { position: static !important; width: auto !important; inset: auto !important; }
  .s10__playbook, .s10__pbbody {
    position: static !important;
    width: auto !important;
    inset: auto !important;
  }

  /* ======================================================== SLIDE 11 */

  .s11 .stage { padding-top: clamp(48px, 12cqw, 80px) !important; }
  .s11 .slide-logo { order: 1; }
  .s11__eyebrow { order: 2; }
  .s11__title { order: 3; font-size: clamp(24px, 6.6cqw, 40px) !important; }
  .s11__sub { order: 4; }
  .s11__quad { order: 5; }
  .s11__gap { order: 6; }
  .s11__foot { order: 7; }
  .s11 .slide-footer { order: 8; }

  .s11__gap-h {
        font-size: calc(24 * var(--u));
  }

  .s11__gap-b {
font-size: calc(20 * var(--u));
  }

  /* The mobile quadrant is the same scatter-chart structure as desktop,
     just scaled to the column width — not a simplified list. Every child
     below is repositioned in cqw (== % of .s11__quad's own width) using
     the exact desktop coordinates converted to fractions of the
     846.6 x 610.4u design box, with an aspect-ratio locking the two axes
     together so a %-of-width value and a %-of-height value stay consistent.
     container-type is set here (mobile-only) rather than unconditionally —
     it would otherwise become the nearest cqw container for --u itself
     (base.css defines --u in cqw), shrinking every desktop calc(u) value
     inside the box down to a fraction of the quad's own width. */
  .s11__quad {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    /* Was 846.6 / 610.4 (total height ≈72.1cqw-of-width). Taller by ~14%
       (≈82cqw) purely to give the rotated axis labels below real margin
       from the top/bottom edges instead of sitting flush against them —
       flush + this box's overflow:hidden + rounded corners is what
       clipped "BUILT FOR SMEs"/"BUILT FOR ENTERPRISE" before. Every
       vertical position below is scaled by the same 82/72.1 factor, so
       the rest of the quadrant (divider, dots, own-card, X-axis labels)
       grows proportionally with it rather than leaving dead space. */
    aspect-ratio: 846.6 / 694.2 !important;
    box-sizing: border-box;
    container-type: inline-size;
  }

  .s11__divider-v {
    left: 50.08cqw !important;
    top: 1.43cqw !important;
    width: 0.18cqw !important;
    height: 76.2cqw !important;
  }
  .s11__divider-h {
    left: 2.28cqw !important;
    top: 39.6cqw !important;
    width: 95.59cqw !important;
    height: 0.18cqw !important;
  }

  /* Same rotated-box math as the desktop rule (see slides.css): each box
     is sized/positioned pre-rotation so its center lands where the old
     narrow vertical column used to sit, converted to %-of-quad-width.
     font-size now matches .s11__row-label's (the X-axis labels) exactly,
     and each box's pre-rotation width (= its rotated visual length) is
     sized to that font's actual measured text width plus margin, then
     centered within its own now-taller quadrant row — not stretched to
     fill the row edge-to-edge with zero clearance like before. */
  .s11__axis {
    height: 2.516cqw !important;
    font-size: 3.5cqw !important;
    white-space: normal;
    text-align: center;
  }
  /* left shifted right (~+2.9cqw of rendered position) from the exact
     desktop-derived center — the untrimmed math left each label's
     rendered left-edge only ~1.3cqw in from the quad's left edge, well
     inside the ~3.8cqw rounded-corner radius, so the top of the "B" (or
     bottom of the "E") sat in the corner's clipped-off zone even though
     it neither touched the top/bottom edge's midpoint nor overlapped
     the other label. A rounded corner only clips points where BOTH the
     x-inset AND y-inset are less than the radius — so once x clears the
     radius on its own, the y-inset (which is 0 here, flush with the
     outer edge by design) no longer matters. Shifting left-inset alone
     (not top) fixes this without moving either label vertically, so
     they can't be pushed into overlapping each other at the middle
     divider the way a vertical nudge would. */
  /* Width = the label's own measured text length at the matched font-size
     (18.5cqw for "BUILT FOR SMEs", 26.3cqw for the longer "BUILT FOR
     ENTERPRISE") plus margin, each centered in its own row — row 1 spans
     0–39.6cqw, row 2 spans 39.6–82cqw.

     Rotated-box center math: with rotate(270deg) around the default
     center origin, the box's horizontal center after rotation is
     `left + width/2` (not just `left`) — so two boxes with different
     `width` values (they do: 25cqw vs 33cqw, since each is sized to its
     own text) still land on different vertical lines even with an
     identical `left`. ent's `left` is sme's minus half the width delta
     ((25-33)/2 = -4cqw) so both centers land on the same line, reading
     as one continuous Y-axis instead of two columns offset from
     each other. */
  .s11__axis--sme { left: -6.132cqw !important; top: 18.54cqw !important; width: 25cqw !important; }
  .s11__axis--ent {         left: -10.132cqw !important;
        top: 59.54cqw !important;
        width: 33cqw !important; }

  .s11__brand {
    width: 25.51cqw !important;
    gap: 0.95cqw !important;
  }
  .s11__dot { width: 2.55cqw !important; height: 2.55cqw !important; }
  .s11__brand-label { font-size: 3.29cqw !important; }

  /* Top values scaled by the same 82/72.1 factor as the quad's own height
     increase, so every dot keeps its original position within its row
     instead of clustering near the top of the newly-added space. */
  .s11__brand--xero       { left: 7.596cqw !important; top: 13.84cqw !important; }
  .s11__brand--quickbooks { left: 19.49cqw  !important; top: 24.34cqw !important; }
  .s11__brand--myob       { left: 0.661cqw  !important; top: 31.62cqw !important; }
  .s11__brand--netsuite   { left: 53.16cqw  !important; top: 52.65cqw !important; }
  .s11__brand--sap        { left: 70.00cqw  !important; top: 56.03cqw !important; }

  .s11__own {
    left: 52.94cqw !important;
    top: 10.16cqw !important;
    width: 44.23cqw !important;
    gap: 1.65cqw !important;
  }
  .s11__mark { width: 5.88cqw !important; }
  .s11__own-label { font-size: 3.47cqw !important; }

  .s11__row-label {
    top: 70cqw !important;
    font-size: 3.5cqw !important;
    max-width: 100px;
    margin: auto;
  }
  .s11__row-label--left  {         left: 15.07cqw !important;
        width: 30.07cqw !important; }
  .s11__row-label--right {         left: 60.08cqw !important;
        width: 30.07cqw !important; }

  .s11__gap {
    padding: calc(28 * var(--u));
    box-sizing: border-box;
  }
  .s11__gap-title {
    position: static !important;
    width: auto !important;
    margin-bottom: calc(20 * var(--u));
  }
  .s11__gap-list {
    position: static !important;
    inset: auto !important;
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--u));
  }
  .s11__gap-item { position: static !important; width: auto !important; }

  /* ======================================================== SLIDE 12 */

  .s12 .stage { padding-top: clamp(48px, 12cqw, 80px) !important; }
  .s12 .slide-logo { order: 1; }
  .s12__eyebrow { order: 2; }
  .s12__title { order: 3; font-size: clamp(24px, 5.6cqw, 40px) !important; }
  .s12__sub { order: 4; }
  .s12__context { order: 5; }
  .s12__cards { order: 6; }
  .s12__note { order: 7; }
  .s12 .slide-footer { order: 8; }

  .s12__cards { flex-direction: column; gap: calc(28 * var(--u)); }
  .s12__card { flex: none; height: auto !important; }
  .s12__price { font-size: calc(45 * var(--u)) !important; }
  .s12__features li { font-size: calc(20.5 * var(--u)) !important; }

  /* ======================================================== SLIDE 13 */

  .s13 .stage { padding-top: clamp(48px, 12cqw, 80px) !important; }
  .s13 .slide-logo { order: 1; }
  .s13__eyebrow { order: 2; }
  .s13__title { order: 3; font-size: clamp(24px, 5.6cqw, 40px) !important; }
  .s13__sub { order: 4; }
  .s13__channels { order: 5; }
  .s13__funnel { order: 6; }
  .s13 .slide-footer { order: 7; }

  /* Desktop's 75.6u gap is a side-by-side column gap; stacked on mobile
     that reads as a large empty band between the two cards, so give it
     its own smaller vertical value instead of inheriting it. */
  .s13__channels { flex-direction: column; gap: calc(24 * var(--u)); }
  .s13__channel {
    flex: none;
    height: auto !important;
    padding: calc(30 * var(--u));
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon title" "icon kicker" "body body";
    column-gap: calc(16 * var(--u));
    row-gap: calc(4 * var(--u));
    align-items: center;
  }
  .s13__channel-icon,
  .s13__channel-title,
  .s13__channel-kicker,
  .s13__channel-body {
    position: static !important;
    width: auto !important;
  }
  /* Definite square box + explicit icon size. The desktop rule left the
     icon with height but width:auto here, so the SVG's width:62% collapsed
     on iOS Safari (missing/tiny icon). */
  .s13__channel-icon {
    grid-area: icon;
    width: calc(58 * var(--u)) !important;
    height: calc(58 * var(--u)) !important;
    align-self: center;
  }
  .s13__channel-icon img {
    width: calc(40 * var(--u)) !important;
    height: calc(40 * var(--u)) !important;
  }
  .s13__channel-title  { grid-area: title; margin-top: 0 !important; align-self: end; }
  .s13__channel-kicker { grid-area: kicker; margin-top: 0 !important; align-self: start; }
  .s13__channel-body   { grid-area: body; margin-top: calc(18 * var(--u)); }

  .s13__funnel {
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: calc(46 * var(--u));
    margin-top: calc(14 * var(--u));
  }
  .s13__rail { display: none; }

  /* Icon circle on the left with a connecting rail, title + caption on
     the right — the same grid/rail/stub pattern as Slide 4's mobile
     problem list, not the desktop's inside-the-circle treatment (white
     text there only reads on the dark badge, not this light card). */
  .s13__step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: calc(18 * var(--u));
    row-gap: calc(4 * var(--u));
    position: relative;
  }

  .s13__step::before {
    content: '';
    position: absolute;
    top: calc(38 * var(--u));
    left: calc(37 * var(--u));
    width: calc(2 * var(--u));
    height: calc(100% + 46 * var(--u));
    background: var(--gold);
    opacity: 0.35;
    border-radius: calc(1 * var(--u));
    z-index: 0;
  }
  .s13__step--partner::before { display: none; }

  .s13__step-badge {
    grid-column: 1;
    grid-row: 1 / 3;
    position: static !important;
    align-self: start;
    flex: none;
    width: calc(76 * var(--u)) !important;
    height: calc(76 * var(--u)) !important;
    padding-top: 0 !important;
    align-items: center !important;
    z-index: 1;
  }
  .s13__step-badge img { width: calc(32 * var(--u)) !important; height: calc(32 * var(--u)) !important; }

  .s13__step-title {
    grid-area: 1 / 2;
    position: static !important;
    width: auto !important;
    margin: calc(6 * var(--u)) 0 0 !important;
    text-align: left;
    color: var(--gold) !important;
    font-size: calc(24 * var(--u)) !important;
  }
  
  .s13__step-cap {
    grid-area: 2 / 2;
    position: static !important;
    width: auto !important;
    text-align: left;
    margin: 0 !important;
    max-width: none !important;
    font-size: calc(20 * var(--u)) !important;
  }

  /* Thick rounded stub extends from the circle's bottom edge, mirroring
     Slide 4's mobile connector treatment. */
  .s13__connector {
    display: block !important;
    position: absolute !important;
    top: calc(76 * var(--u)) !important;
    left: calc(35 * var(--u)) !important;
    width: calc(6 * var(--u)) !important;
    height: calc(24 * var(--u)) !important;
    border-radius: calc(3 * var(--u)) !important;
    transform: scaleY(0);
    transform-origin: top center;
  }
  .s13__step--partner .s13__connector { display: none !important; }

  .js .s13__step.is-in .s13__connector {
    animation: connector-grow-v 1.2s var(--ease-out) forwards;
    animation-delay: 0.3s;
  }

  .s13__channel--navy .s13__channel-kicker ,
  .s13__channel--cream .s13__channel-kicker{
    background: transparent;
    padding: 0;
    color: var(--ink);
}

  /* ======================================================== SLIDE 14 */

  .s14 .stage { padding-top: clamp(48px, 12cqw, 80px) !important; }
  .s14 .slide-logo { order: 1; }
  .s14__eyebrow { order: 2; }
  .s14__title { order: 3; font-size: clamp(22px, 5.1cqw, 35px) !important; }
  .s14__cards { order: 4; }
  .s14 .slide-footer { order: 5; }

  .s14__cards { flex-direction: column; gap: calc(28 * var(--u)); }
  .s14__card { flex: none; height: auto !important; }

  .s14__bio {
    font-size: calc(18 * var(--u));
  }

  .s14__evidence {
    font-size: calc(16 * var(--u));
  }

  /* ======================================================== SLIDE 15 */

  .s15 .stage { padding-top: clamp(48px, 12cqw, 80px) !important; }
  .s15 .slide-logo { order: 1; }
  .s15__eyebrow { order: 2; }
  .s15__title { order: 3; }
  .s15__title-dark { font-size: clamp(24px, 5.6cqw, 37px) !important; }
  .s15__title-gold { font-size: clamp(18px, 4.6cqw, 30px) !important; }
  .s15__sub { order: 4; }
  .s15__bands { order: 5; }
  .s15__tiles { order: 6; }
  .s15__disclosure { order: 7; }
  .s15 .slide-footer { order: 8; }

  .s15__callout-label { font-size: clamp(11px, 3cqw, 14px) !important; }

  .s15__bands { flex-direction: column; height: auto !important; gap: calc(12 * var(--u)); }
  .s15__band { width: auto !important; padding: calc(16 * var(--u)); }
  .s15__band-label { position: static !important; width: auto !important; inset: auto !important; }
  .s15__band-inset {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin-top: calc(10 * var(--u));
    padding: calc(10 * var(--u)) calc(16 * var(--u));
    box-sizing: border-box;
  }

  .s15__tiles { flex-direction: column; height: auto !important; gap: calc(24 * var(--u)); }
  .s15__tile { flex: none; height: auto !important; }

  .s15__band {
    font-size: calc(16 * var(--u));
  }

  .s15__band-sub {
font-size: calc(14 * var(--u));
  }

.s15__tile-meta strong {
    font-size: calc(16 * var(--u));
  }

  .s15__tile-title {
    margin: calc(25 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u));
    font-size: calc(20 * var(--u));
  }

  .s15__tile-body {
    margin: calc(0 * var(--u)) calc(20 * var(--u)) 0;
    font-family: var(--font-body);
    font-size: calc(18 * var(--u));
  }

  /* ======================================================== SLIDE 16 */

  

  .s16 .stage { padding-top: clamp(48px, 12cqw, 80px) !important; }
  .s16 .slide-logo { order: 1; }
  .s16__eyebrow { order: 2; }
  .s16__title { order: 3; font-size: clamp(22px, 5cqw, 38px) !important; }
  .s16__sub { order: 4; }
  .s16__card { order: 5; }
  .s16__donut-wrap { order: 6; }
  .s16__legend { order: 7; }
  .s16__stats { order: 8; }
  .s16__derisks { order: 9; }
  .s16__note { order: 10; }
  .s16 .slide-footer { order: 11; }

  .s16__card { padding: calc(32 * var(--u)) calc(30 * var(--u)); }
  .s16__card-amount { font-size: clamp(32px, 9cqw, 46px) !important; }

  .s16__donut-wrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: calc(340 * var(--u)) !important;
    height: calc(340 * var(--u)) !important;
    /* 0.4x this element's own size, matching the desktop ratio — see
       the comment on the desktop rule for why this can't be shared
       as-is across breakpoints. */
    --donut-r: calc(-136 * var(--u));
    align-self: center;
    margin-top: calc(12 * var(--u));
  }

  /* Legend text/amounts use the same --u scale as the rest of the deck,
     which reads too small on phones — enlarge just these two, keeping
     the same order, centered layout and wording. */
  .s16__legend-text { font-size: clamp(13px, 3.8cqw, 16px); }
  .s16__legend-amount { font-size: clamp(13px, 3.8cqw, 16px); }
  .s16__donut-label-kicker { font-size: clamp(11px, 3.2cqw, 14px) !important; }

  .s16__stats { gap: calc(16 * var(--u)); }
  .s16__stat { padding: calc(20 * var(--u)) calc(24 * var(--u)); }

  /* Desktop base switched to a 4-column grid (matching the source
     PowerPoint's fixed-width columns) — override back to a plain
     flex column here so mobile still stacks the four items instead of
     inheriting those fixed desktop-scale grid tracks. */
  .s16__derisks-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 * var(--u));
  }
  .s16__derisks-dot { display: none; }

  .s16__stat-body {
    font-size: calc(18 * var(--u));
  }

  .s16__derisks-title {
    font-size: calc(26 * var(--u));
  }

  .s16__derisks-b{
    font-size: calc(20 * var(--u));
  }

  /* ======================================================== SLIDE 17 */

  /* No forced min-height:100svh + justify-content:center here (unlike the
     cover slide) — this slide's content is shorter than a full screen on
     most phones, and centering it inside a full-viewport-height box just
     added a large, pointless gap above and below. Flowing naturally with
     the deck's normal top/bottom padding reads much tighter. */
  .s17 .stage { padding-top: clamp(48px, 12cqw, 80px) !important; padding-bottom: clamp(48px, 12cqw, 80px) !important; }
  .s17__mark { order: 1; position: relative !important; top: auto !important; width: calc(90 * var(--u)) !important; margin: 0 auto calc(24 * var(--u)); }
  .s17__title { order: 2; position: relative !important; top: auto !important; width: auto !important; font-size: clamp(28px, 8cqw, 44px) !important; margin: 0 0 calc(30 * var(--u)) !important; }
  .s17__contact { order: 3; position: relative !important; top: auto !important; width: auto !important; margin: 0 0 calc(30 * var(--u)) !important; }
  .s17__on-behalf { order: 4; position: relative !important; top: auto !important; width: auto !important; margin: 0 !important; }
  .s17__notice {
    order: 5;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    margin-top: calc(60 * var(--u));
  }

.s17__name {
  font-size: calc(20 * var(--u));
}

.s17__notice p {
    font-size: calc(14 * var(--u));
}

  /* ======================================================== chrome */

  /* Slide dots are deck-only; the download button stays as a
     floating action in scroll mode. */
  .slide-nav {
    display: none;
  }

  /* Smaller footprint on mobile — the button is fixed over scrolling
     content, so it stays compact enough not to blot out list text as the
     page scrolls underneath it. */
  .download-btn {
    position: fixed;
    bottom: clamp(10px, 3vw, 20px);
    right: clamp(10px, 3vw, 20px);
  }

  .opal-pdf-btn svg {
    width: clamp(112px, 30vw, 150px);
  }

  .slide-shell + .slide-shell {
    border-top: 1px solid rgba(14, 26, 54, 0.15);
  }
}

/* Narrow phones */
@media (max-width: 560px) {
  .s3__photo-card { width: 100% !important; }
}

/* Project thumbnail labels (including the new "View project website"
   link) crowd together in a 4-across row well before phone width — a
   2x2 grid keeps them legible through tablet widths too. */
@media (max-width: 900px) {
  .s2__thumbs { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   OPAL — Touch-first "deck-sized" tablets
   A physical iPad Pro 12.9" landscape (1366×1024) satisfies the desktop
   deck breakpoint on width/height alone, but a mouse-oriented side rail
   is unusable there. Show the hamburger header instead, while leaving the
   JS deck/paging behaviour (driven by the same width/height thresholds)
   untouched, so the slide-at-a-time experience is preserved. The drawer
   opens from the right on every device/orientation, same as phone/tablet.
   ========================================================================== */

@media (min-width: 1100px) and (min-height: 620px) and (pointer: coarse) {

  .mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    height: 72px;
    padding: 0 28px;
    /* No backdrop-filter blur — see the matching comment on the
       phone/tablet .mobile-nav rule above for why. */
    background: var(--cream);
    border-bottom: 1px solid rgba(14, 26, 54, 0.08);
  }

  /* Slightly bigger (was 116px) — the navbar's own 72px height (unchanged)
     has plenty of headroom above this logo's rendered height. */
  .mobile-nav__logo { display: block; width: 130px; }
  .mobile-nav__logo img { width: 100%; height: auto; display: block; }

  .mobile-nav__toggle {
    position: relative;
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 8px;
  }
  .mobile-nav__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
  }
  .mobile-nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .mobile-nav__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .mobile-nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-nav__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 290;
    background: rgba(8, 17, 35, 0.5);
    opacity: 0;
    pointer-events: none;
    /* visibility (not just opacity) when hidden — an opacity:0 fixed,
       inset:0 layer still exists as a real compositor layer even fully
       transparent, and an always-present dark full-viewport layer like
       this is a plausible source of a stray navy flash during scroll on
       Android Chrome (a known category of bug around hidden-by-opacity
       fixed overlays). visibility:hidden lets the browser drop it from
       compositing entirely while closed; the transition-delay keeps the
       visibility change instant on the way out (after the fade finishes)
       but zero-delay on the way in. */
    visibility: hidden;
    transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .mobile-nav__scrim.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.3s var(--ease-out), visibility 0s linear 0s;
  }

  .mobile-nav__menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px;
    left: auto;
    right: 0;
    z-index: 295;
    width: min(60vw, 380px);
    height: calc(100vh - 72px);
    overflow-y: auto;
    background: var(--navy);
    padding: 6px 10px;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  }
  .mobile-nav__menu.is-open {
    transform: translateX(0);
    box-shadow: -18px 0 40px rgba(8, 17, 35, 0.35);
  }

  .mobile-nav__menu a {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-height: 0;
    gap: 12px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(13px, 3.6vh, 16px);
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
  }
  .mobile-nav__menu a:hover,
  .mobile-nav__menu a:focus-visible {
    background: rgba(215, 167, 119, 0.16);
    color: #FFFFFF;
  }
  .mobile-nav__menu a.is-active {
    background: rgba(215, 167, 119, 0.22);
    color: var(--gold);
  }

  .mobile-nav__num {
    flex: none;
    width: 28px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 13px;
    color: var(--gold);
  }

  /* Same reasoning as the phone/tablet rule above: the fixed header
     already shows the OPAL mark, and the desktop pointer-oriented rail
     doesn't belong on a touch device. */
  .slide-logo { display: none !important; }
  .slide-nav { display: none; }
}

/* ==========================================================================
   OPAL — Desktop hamburger
   A compact floating menu button on genuine pointer/hover desktop,
   supplementing (not replacing) the dot rail and the existing top-right
   logo — both stay exactly as they are. Opens the same slide list as
   phone/tablet, sliding in from the right (same side everywhere,
   regardless of device or orientation) — it temporarily sits over the
   dot rail while open, which is fine since the drawer itself is the
   primary navigation in that moment. Self-contained navy/gold button so
   it reads on both cream and navy slide backgrounds without per-slide
   color logic.
   ========================================================================== */

@media (min-width: 1100px) and (min-height: 620px) and (hover: hover) and (pointer: fine) {

  /* Plain px, not calc(*var(--u)) — .mobile-nav lives outside .slide's
     container-query scope (it's a direct child of body, not a
     descendant of any .slide), so --u is undefined here and any
     calc() using it silently falls back to the property's initial
     value at computed-value time. A few px above .corner-logo's own
     fixed `top` (below) — the two read as a genuinely balanced pair. */
  .mobile-nav {
    display: flex;
    position: fixed;
    top: 38px;
    /* Flat px, matching .slide-nav's own offset (chrome.css) exactly —
       see that file's comment on why this is a bare constant, not a
       clamp(). Right edges land on each other exactly, at any width. */
    right: 16px;
    left: auto;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    z-index: 300;
  }

  /* The per-slide .slide-logo can't be fixed to the true viewport at all
     (see the <div class="corner-logo"> comment in index.html — a
     transformed ancestor becomes its containing block), so every
     previous attempt to align it with the hamburger via CSS values alone
     was fundamentally capped: correct at one window shape, drifting at
     another. Hide it here; .corner-logo (styled below) replaces it. */
  .slide-logo { display: none !important; }

  .corner-logo {
    display: block;
    position: fixed;
    top: 40px;
    /* .mobile-nav's own right offset (16px) + its 44px width + a 12px
       visual gap = 72px. Both logo images (logo-dark-corner.png,
       logo-light.png) are now tightly cropped with only a few px of
       incidental padding — unlike the old logo-dark.png (~30% transparent
       right margin), there's no invisible buffer to absorb an overlap
       here, so the box gap and the visible gap are now the same thing. */
    right: 72px;
    /* 84px = 140px - 40%. */
    width: 84px;
    z-index: 300;
  }
  .corner-logo__img {
    display: none;
    width: 100%;
    height: auto;
  }
  /* Default: dark wordmark (for the cream-background slides). main.js
     adds/removes .corner-logo--on-dark to swap variants as the active
     slide changes, matching the #slide-N dark/cream list in base.css. */
  .corner-logo__img--dark { display: block; }
  .corner-logo--on-dark .corner-logo__img--dark { display: none; }
  .corner-logo--on-dark .corner-logo__img--light { display: block; }

  /* .corner-logo--cover: cover slide (slide-1) already carries its own
     large centered .s1__logo, so the corner one is redundant there —
     main.js toggles this alongside .corner-logo--on-dark as the active
     slide changes. .corner-logo--drawer-open: the slide-list drawer
     overlays this same top-right corner when open; main.js adds/removes
     this in mobileNavInit()'s openMenu()/closeMenu(). Two independent
     classList flags, either one hides the logo. */
  .corner-logo--cover,
  .corner-logo--drawer-open {
    display: none !important;
  }

  .mobile-nav__logo { display: none; }

  .mobile-nav__toggle {
    position: relative;
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 50%;
    background: var(--navy);
    box-shadow: 0 4px 16px rgba(8, 17, 35, 0.28);
    transition: transform 0.25s var(--ease-out);
  }
  .mobile-nav__toggle:hover { transform: scale(1.06); }
  .mobile-nav__toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold);
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
  }
  .mobile-nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .mobile-nav__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .mobile-nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-nav__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 290;
    background: rgba(8, 17, 35, 0.5);
    opacity: 0;
    pointer-events: none;
    /* visibility (not just opacity) when hidden — an opacity:0 fixed,
       inset:0 layer still exists as a real compositor layer even fully
       transparent, and an always-present dark full-viewport layer like
       this is a plausible source of a stray navy flash during scroll on
       Android Chrome (a known category of bug around hidden-by-opacity
       fixed overlays). visibility:hidden lets the browser drop it from
       compositing entirely while closed; the transition-delay keeps the
       visibility change instant on the way out (after the fade finishes)
       but zero-delay on the way in. */
    visibility: hidden;
    transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .mobile-nav__scrim.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.3s var(--ease-out), visibility 0s linear 0s;
  }

  .mobile-nav__menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    z-index: 295;
    width: min(30vw, 400px);
    height: 100vh;
    overflow-y: auto;
    background: var(--navy);
    padding: 32px 10px;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  }
  .mobile-nav__menu.is-open {
    transform: translateX(0);
    box-shadow: -18px 0 40px rgba(8, 17, 35, 0.35);
  }

  .mobile-nav__menu a {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-height: 0;
    gap: 12px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    /* min(...vw, ...vh): the vw term keeps the longest label on one line
       down to this context's narrowest supported width (1100px, where the
       drawer itself is comparatively narrow); the vh term keeps text from
       outgrowing its flex-divided row height. */
    font-size: clamp(12px, min(1.2vw, 3.2vh), 15.5px);
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
  }
  .mobile-nav__menu a:hover,
  .mobile-nav__menu a:focus-visible {
    background: rgba(215, 167, 119, 0.16);
    color: #FFFFFF;
  }
  .mobile-nav__menu a.is-active {
    background: rgba(215, 167, 119, 0.22);
    color: var(--gold);
  }

  .mobile-nav__num {
    flex: none;
    width: 26px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    color: var(--gold);
  }
}

/* Phone-only (the general mobile breakpoint above covers both phones and
   tablets up to 1099.98px — this narrower one scopes changes meant for
   phones alone, leaving tablet-width viewports on the general styling). */
@media (max-width: 767.98px), (max-height: 619.98px) {
  /* Slide 14 team cards: bigger, full-bleed square photo (clipped to the
     card's own rounded corners via overflow:hidden, instead of the small
     circular avatar) and a shorter bio (clamped to 2 lines) so the photo
     carries more visual weight. Tablet and desktop keep the original
     circular-avatar, full-bio layout untouched. */
  .s14__card {
    padding: 0;
    overflow: hidden;
  }
  .s14__photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 0 !important;
  }
  .s14__name-row { padding: 0 calc(28 * var(--u)); align-items: center; }
  .s14__role { padding: 0 calc(28 * var(--u)); }
  .s14__bio { padding: 0 calc(28 * var(--u)); }
  /* LinkedIn icon read too small on phones — calc(21.1 * var(--u)) shrinks
     down to ~14-20px depending on viewport, well under the 44px
     hamburger toggle it's meant to feel comparable to. Fixed to a flat
     29px (32px, then trimmed ~10% per feedback) instead of scaling with
     the rest of the deck's --u unit. */
  .s14__li {
    width: 29px;
    height: 29px;
    margin-top: 0;
  }
  /* A real shorter copy for phones, not a clamped/truncated version of
     the full bio — .s14__bio--full is the same paragraph tablet/desktop
     show; .s14__bio--short is a dedicated one-sentence version. */
  .s14__bio--full { display: none; }
  .s14__bio--short { display: block; }
  .s14__evidence {
    margin-top: calc(10 * var(--u));
    padding: 0 calc(28 * var(--u)) calc(28 * var(--u));
  }
}


/* ============================================================
   APPENDIX A — Responsive reflow
   ============================================================ */

@media (max-width: 1099.98px), (max-height: 619.98px) {
  .appendix-a .appendix-a__slide {
    width: 100%;
    min-height: auto;
    aspect-ratio: auto;
    overflow: visible;
    background: var(--cream);
  }

  .appendix-a .appendix-a__stage {
    position: relative;
    inset: auto;
    min-height: 100svh;
    padding: clamp(88px, 12vw, 112px) clamp(20px, 6vw, 64px) clamp(72px, 9vw, 96px);
    display: flex;
    flex-direction: column;
  }

  .appendix-a__header {
    position: static;
  }

  .appendix-a__eyebrow {
    font-size: clamp(10px, 1.7vw, 13px);
    letter-spacing: 0.13em;
  }

  .appendix-a__title {
    margin-top: clamp(16px, 3vw, 24px);
    font-size: clamp(28px, 5.4vw, 40px);
  }

  .appendix-a__subtitle {
    margin-top: 5px;
    font-size: clamp(28px, 5.4vw, 40px);
  }

  .appendix-a__intro {
    margin-top: clamp(14px, 2.8vw, 20px);
    max-width: 900px;
    font-size: clamp(12px, 2vw, 15px);
  }

  .appendix-a__milestones {
    position: static;
    width: 100%;
    height: auto;
    margin-top: clamp(28px, 5vw, 42px);
    padding: clamp(24px, 4vw, 34px) clamp(18px, 4vw, 34px) clamp(26px, 4vw, 36px);
    border-radius: 8px;
    overflow: visible;
  }

  .appendix-a__milestone-head {
    position: static;
    height: auto;
    display: flex;
    justify-content: flex-start;
    gap: 14px;
  }

  .appendix-a__xero-logo {
    position: static;
    flex: 0 0 auto;
    width: clamp(36px, 7vw, 52px);
    height: clamp(36px, 7vw, 52px);
  }

  .appendix-a__milestone-head h3 {
    font-size: clamp(11px, 1.9vw, 15px);
    align-self: center;
  }

  .appendix-a__milestone-head h3 span {
    margin-inline: 7px;
  }

  .appendix-a__metric-labels {
    position: static;
    margin-top: 22px;
    width: auto;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    font-size: clamp(11px, 1.8vw, 14px);
  }

  .appendix-a__timeline {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: 94px;
    margin-top: 4px;
    overflow: visible;
  }

  .appendix-a__timeline-line {
    top: 39px;
  }

  .appendix-a__metric {
    top: 0;
    font-size: clamp(10px, 1.7vw, 14px);
  }

  .appendix-a__market-cap {
    top: 18px;
    font-size: clamp(10px, 1.7vw, 14px);
  }

  .appendix-a__dot {
    top: 35px;
    width: 10px;
    height: 10px;
  }

  .appendix-a__year {
    top: 58px;
    font-size: clamp(9px, 1.5vw, 12px);
  }

  .appendix-a__cards {
    position: static;
    margin-top: clamp(20px, 4vw, 30px);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 24px);
    width: 100%;
  }

  .appendix-a__card {
    min-height: 0;
    padding: clamp(22px, 4vw, 32px);
    border-radius: 9px;
  }

  .appendix-a__card-title {
    font-size: clamp(20px, 3.8vw, 28px);
  }

  .appendix-a__bullets,
  .appendix-a__card--geography .appendix-a__bullets {
    margin-top: clamp(20px, 3.5vw, 28px);
    font-size: clamp(12px, 2vw, 15px);
    line-height: 1.55;
  }

  .appendix-a__bullets li + li {
    margin-top: 10px;
  }

  .appendix-a__sources {
    position: static;
    margin-top: clamp(20px, 4vw, 30px);
    font-size: clamp(8.5px, 1.35vw, 11px);
    line-height: 1.35;
  }

  .appendix-a__footer {
    position: static;
    width: 100%;
    margin-top: clamp(28px, 5vw, 42px);
    padding-top: 0;
    display: flex;
    flex-wrap: wrap;
    white-space: normal;
    gap: 4px 5px;
    font-size: clamp(9px, 1.7vw, 12px);
    line-height: 1.35;
  }
}

@media (max-width: 560px) {
  .appendix-a .appendix-a__stage {
    padding-inline: 16px;
  }

  .appendix-a__milestone-head h3 {
    line-height: 1.35;
  }

  .appendix-a__metric-labels {
    margin-top: 18px;
  }

  .appendix-a__timeline {
    height: 88px;
  }

  .appendix-a__timeline-line {
    top: 37px;
  }

  .appendix-a__dot {
    top: 33px;
    width: 9px;
    height: 9px;
  }

  .appendix-a__year {
    top: 55px;
  }

  .appendix-a__metric,
  .appendix-a__market-cap,
  .appendix-a__year {
    max-width: 64px;
    overflow: visible;
  }

  .appendix-a__card--geography .appendix-a__bullets span {
    width: 50px;
  }

  .appendix-a__footer {
    align-items: center;
  }

  


}


/* APPENDIX A — Xero brand wrapper */
@media (max-width: 1099.98px), (max-height: 619.98px) {
  .appendix-a__xero-brand {
    position: static;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .appendix-a__xero-meta {
    margin-top: -1px;
    font-family: var(--font-mono);
    font-size: 6px;
    line-height: 1;
    letter-spacing: .06em;
    color: rgba(255,255,255,.72);
    white-space: nowrap;
  }
}


/* ============================================================
   APPENDIX B — RESPONSIVE
   ============================================================ */

@media (max-width: 767.98px), (max-height: 480px) {
  .appendix-b .appendix-b__slide {
    width: 100%;
    min-height: auto;
    aspect-ratio: auto;
    overflow: visible;
    background: var(--cream);
  }

  .appendix-b .appendix-b__stage {
    position: relative;
    inset: auto;
    min-height: 100svh;
    padding: clamp(74px, 12vw, 104px) clamp(20px, 6vw, 64px) clamp(76px, 10vw, 104px);
    display: flex;
    flex-direction: column;
  }

  .appendix-b__header,
  .appendix-b__precedents,
  .appendix-b__signal,
  .appendix-b__footer {
    position: static;
  }

  .appendix-b__header {
    width: 100%;
  }

  .appendix-b__eyebrow {
    font-size: clamp(9px, 1.8vw, 13px);
    letter-spacing: 0.13em;
  }

  .appendix-b__title {
    margin-top: clamp(16px, 3vw, 24px);
    font-size: clamp(27px, 5.6vw, 39px);
    line-height: 1.13;
  }

  .appendix-b__intro {
    margin-top: clamp(14px, 2.8vw, 20px);
    font-size: clamp(12px, 2vw, 16px);
  }

  .appendix-b__precedents {
    width: 100%;
    margin-top: clamp(28px, 5vw, 42px);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(18px, 3.2vw, 26px);
  }

  .appendix-b__card {
    height: auto;
    min-height: 0;
  }

  .appendix-b__card-head {
    min-height: 92px;
    height: auto;
    padding: 20px 22px;
    gap: 18px;
  }

  .appendix-b__card-head h3 {
    font-size: clamp(12px, 2vw, 15px);
    letter-spacing: 0.13em;
  }

  .appendix-b__brand {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }

  .appendix-b__brand--myob {
    flex-basis: 82px;
    width: 82px;
    font-size: 30px;
  }

  .appendix-b__brand--quickbooks {
    flex-basis: 98px;
    width: 98px;
  }

  .appendix-b__qb-mark {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .appendix-b__qb-word {
    font-size: 9px;
  }

  .appendix-b__qb-word b {
    font-size: 12px;
  }

  .appendix-b__card-body {
    height: auto;
    padding: 24px 22px 24px;
    min-height: 430px;
  }

  .appendix-b__kicker {
    font-size: clamp(9px, 1.55vw, 12px);
  }

  .appendix-b__metric {
    margin-top: 24px;
    font-size: clamp(22px, 4vw, 28px);
  }

  .appendix-b__metric-label {
    font-size: clamp(11px, 1.8vw, 14px);
  }

  .appendix-b__divider {
    margin-top: 26px;
  }

  .appendix-b__proof,
  .appendix-b__note {
    position: static;
  }

  .appendix-b__proof {
    min-height: 62px;
    margin-top: 30px;
    font-size: clamp(11px, 1.8vw, 13px);
  }

  .appendix-b__note {
    margin-top: 16px;
    font-size: clamp(10px, 1.6vw, 12px);
  }

  .appendix-b__signal {
    width: 100%;
    height: auto;
    margin-top: clamp(24px, 4vw, 34px);
    padding: clamp(24px, 4vw, 30px) clamp(22px, 4vw, 30px);
    border-radius: 9px;
  }

  .appendix-b__signal-kicker {
    font-size: clamp(10px, 1.7vw, 13px);
  }

  .appendix-b__signal h3 {
    margin-top: 15px;
    font-size: clamp(22px, 4.5vw, 30px);
  }

  .appendix-b__signal > p:last-child {
    margin-top: 12px;
    font-size: clamp(12px, 2vw, 15px);
  }

  .appendix-b__footer {
    width: 100%;
    margin-top: clamp(28px, 5vw, 42px);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 5px;
    white-space: normal;
    font-size: clamp(9px, 1.7vw, 12px);
    line-height: 1.35;
  }
}

@media (max-width: 560px) {
  .appendix-b .appendix-b__stage {
    padding-inline: 16px;
  }

  .appendix-b__title {
    font-size: clamp(25px, 7vw, 34px);
  }

  .appendix-b__card-head {
    padding-inline: 18px;
  }

  .appendix-b__card-body {
    padding-inline: 18px;
  }

  .appendix-b__proof {
    margin-top: 26px;
  }
}


/* ============================================================
   APPENDIX C — responsive reflow
   ============================================================ */

@media (max-width: 1099.98px), (max-height: 619.98px) {
  .appendix-c .appendix-c__stage {
    background: var(--cream);
    color: var(--ink);
    gap: 0;
    padding: clamp(30px, 7cqw, 64px) clamp(20px, 6cqw, 72px);
  }

  .appendix-c__header {
    position: static;
    margin: 0;
  }

  .appendix-c__eyebrow {
    font-size: clamp(11px, 2.8cqw, 15px);
  }

  .appendix-c__title {
    margin-top: clamp(14px, 3.5cqw, 27px);
    font-size: clamp(25px, 6.5cqw, 37px);
    line-height: 1.12;
  }

  .appendix-c__intro {
    margin-top: clamp(12px, 3cqw, 17px);
    font-size: clamp(13px, 3.4cqw, 17px);
  }

  .appendix-c__gallery {
    position: static;
    width: 100%;
    margin-top: clamp(28px, 6cqw, 52px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2.8cqw, 28px);
  }

  .appendix-c__product {
    border-radius: clamp(4px, 0.7cqw, 7px);
  }

  .appendix-c__product img {
    width: 100%;
    height: auto;
  }

  .appendix-c__gallery { 
    padding: 0;
  }

  .appendix-c__footer {
    position: static;
    width: 100%;
    margin-top: clamp(24px, 5cqw, 44px);
    padding-bottom: clamp(8px, 2cqw, 18px);
    font-size: clamp(8px, 2.2cqw, 12.5px);
    line-height: 1.35;
    white-space: normal;
    flex-wrap: wrap;
    gap: 4px;
  }
}

@media (max-width: 640px) {
  .appendix-c__gallery {
    grid-template-columns: 1fr;
  }

  .appendix-c__title em {
    display: inline;
  }

  .appendix-c__footer {
    letter-spacing: 0.035em;
  }
}


/* ============================================================
   APPENDIX D — RESPONSIVE ROADMAP
   ============================================================ */

@media (max-width: 1099.98px), (max-height: 619.98px) {
  .appendix-d__stage {
    background: var(--cream);
    color: var(--ink);
    gap: 0;
    padding: clamp(30px, 7cqw, 64px) clamp(20px, 6cqw, 72px);
  }

  .appendix-d__header {
    position: static;
    margin: 0;
  }

  .appendix-d__eyebrow {
    font-size: clamp(11px, 2.8cqw, 15px);
  }

  .appendix-d__title {
    margin-top: clamp(14px, 3.5cqw, 23px);
    font-size: clamp(25px, 6.2cqw, 36px);
    line-height: 1.12;
  }

  .appendix-d__intro {
    margin-top: clamp(12px, 3cqw, 18px);
    font-size: clamp(13px, 3.4cqw, 17px);
  }

  .appendix-d__funding,
  .appendix-d__phase-bar,
  .appendix-d__months,
  .appendix-d__cards,
  .appendix-d__footer {
    position: static;
    width: 100%;
    left: auto;
    right: auto;
  }

  .appendix-d__funding {
    height: auto;
    margin-top: clamp(28px, 6cqw, 48px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 8px;
  }

  .appendix-d__funding-label,
  .appendix-d__funding-track {
    position: static;
    width: auto;
    height: clamp(38px, 8cqw, 47px);
  }

  .appendix-d__funding-label {
    padding: 0 clamp(12px, 3cqw, 20px);
    font-size: clamp(9px, 2.2cqw, 12px);
  }

  .appendix-d__funding-label--seed {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
  }

  .appendix-d__funding-track {
    grid-column: 1 / -1;
    grid-row: 2;
    border-radius: 8px;
  }

  .appendix-d__funding-segment {
    font-size: clamp(9px, 2.2cqw, 12px);
  }

  .appendix-d__phase-bar {
    margin-top: clamp(14px, 3cqw, 24px);
    height: auto;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .appendix-d__phase {
    min-height: clamp(40px, 8cqw, 50px);
    padding: 8px clamp(12px, 3cqw, 22px);
    gap: 12px;
    font-size: clamp(9px, 2.2cqw, 12px);
  }

  .appendix-d__phase b {
    font-size: clamp(9px, 2.1cqw, 11.5px);
    text-align: right;
  }

  .appendix-d__months {
    margin-top: clamp(14px, 3cqw, 22px);
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  .appendix-d__months > div {
    height: clamp(32px, 7cqw, 39px);
    padding: 0 7px;
    font-size: clamp(8px, 2cqw, 11.5px);
    white-space: normal;
    text-align: center;
    line-height: 1.1;
    clip-path: none;
    border-radius: 6px;
  }

  .appendix-d__months > div:first-child {
    clip-path: none;
  }

  .appendix-d__cards {
    margin-top: clamp(18px, 4cqw, 30px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 2.5cqw, 18px);
  }

  .appendix-d__card {
    min-height: clamp(230px, 40cqw, 330px);
    padding: clamp(20px, 4cqw, 29px) clamp(14px, 3cqw, 18px);
  }

  .appendix-d__card h3 {
    font-size: clamp(16px, 4cqw, 18px);
  }

  .appendix-d__card-rule {
    margin-top: clamp(14px, 3cqw, 18px);
    margin-bottom: clamp(14px, 3cqw, 18px);
  }

  .appendix-d__card p {
    font-size: clamp(12px, 3cqw, 13.8px);
    line-height: 1.45;
  }

  .appendix-d__footer {
    margin-top: clamp(26px, 5cqw, 44px);
    padding-bottom: clamp(8px, 2cqw, 18px);
    font-size: clamp(8px, 2.2cqw, 12.5px);
    line-height: 1.35;
    white-space: normal;
    flex-wrap: wrap;
    gap: 4px;
  }
}

@media (max-width: 640px) {
  .appendix-d__funding {
    grid-template-columns: 1fr;
  }

  .appendix-d__funding-label--founder,
  .appendix-d__funding-label--seed {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .appendix-d__funding-label--seed {
    justify-content: center;
  }

  .appendix-d__funding-track {
    grid-column: 1;
    grid-row: auto;
  }

  .appendix-d__months {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appendix-d__cards {
    grid-template-columns: 1fr;
  }

  .appendix-d__card {
    min-height: 0;
  }

  .appendix-d__title em {
    display: inline;
  }

  .appendix-d__footer {
    letter-spacing: 0.035em;
  }
}


/* ============================================================
   APPENDIX E — responsive financial model
   ============================================================ */

@media (max-width: 1099.98px), (max-height: 619.98px) {
  .appendix-e .appendix-e__stage {
    background: var(--cream);
    color: var(--ink);
    gap: 0;
    padding: clamp(30px, 6cqw, 64px) clamp(20px, 6cqw, 72px) clamp(32px, 6cqw, 58px);
  }

  .appendix-e__header,
  .appendix-e__year-cards,
  .appendix-e__pnl,
  .appendix-e__break-even,
  .appendix-e__key-metrics,
  .appendix-e__source,
  .appendix-e__footer {
    position: static;
    left: auto;
    right: auto;
    width: 100%;
  }

  .appendix-e__header { margin: 0; }

  .appendix-e__eyebrow { font-size: clamp(11px, 2.7cqw, 15px); }
  .appendix-e__title {
    margin-top: clamp(14px, 3.5cqw, 23px);
    font-size: clamp(25px, 6.1cqw, 35px);
  }

  .appendix-e__year-cards {
    margin-top: clamp(28px, 5cqw, 46px);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(8px, 1.5cqw, 14px);
  }

  .appendix-e__year-card {
    height: auto;
    min-height: clamp(145px, 20cqw, 185px);
    padding: clamp(15px, 2.6cqw, 28px) clamp(8px, 1.6cqw, 14px);
  }

  .appendix-e__metric-row { grid-template-columns: 1fr; gap: 4px; min-height: 0; margin-bottom: 9px; }
  .appendix-e__metric-row span { font-size: clamp(9px, 1.8cqw, 12.5px); }
  .appendix-e__metric-row strong { height: clamp(25px, 3.5cqw, 28px); font-size: clamp(9px, 1.8cqw, 13px); }

  .appendix-e__pnl {
    height: auto;
    margin-top: clamp(20px, 4cqw, 34px);
    padding: clamp(12px, 2cqw, 18px);
  }

  .appendix-e__pnl-head { display: none; }
  .appendix-e__pnl-row {
    display: block;
    min-width: 0;
    margin-top: 14px;
  }

  .appendix-e__row-label {
    display: block;
    margin-bottom: 7px;
    text-align: left;
    font-size: clamp(10px, 1.9cqw, 13px);
    font-weight: 700;
  }

  .appendix-e__pnl-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .appendix-e__pnl-values span {
    height: clamp(26px, 3.7cqw, 31px);
    font-size: clamp(9px, 1.8cqw, 13px);
  }

  .appendix-e__break-even { margin-top: clamp(20px, 4cqw, 32px); }
  .appendix-e__break-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(9px, 2cqw, 15px); margin-top: 10px; }
  .appendix-e__break-card { height: auto; min-height: clamp(84px, 11cqw, 93px); }
  .appendix-e__break-card p { font-size: clamp(9px, 1.8cqw, 12px); }
  .appendix-e__break-card strong { font-size: clamp(22px, 4.2cqw, 27px); }
  .appendix-e__break-card span { font-size: clamp(9px, 1.8cqw, 12px); }

  .appendix-e__key-metrics { margin-top: clamp(20px, 4cqw, 30px); }
  .appendix-e__key-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.7cqw, 13px); }
  .appendix-e__key-grid article { height: auto; min-height: 66px; }
  .appendix-e__key-grid article span { font-size: clamp(9px, 1.7cqw, 11.5px); }
  .appendix-e__key-grid article strong { font-size: clamp(9px, 1.8cqw, 12px); }

  .appendix-e__source {
    margin-top: clamp(18px, 4cqw, 28px);
    font-size: clamp(9px, 1.9cqw, 12.5px);
  }

  .appendix-e__footer {
    margin-top: clamp(24px, 5cqw, 42px);
    padding-bottom: clamp(8px, 2cqw, 18px);
    font-size: clamp(8px, 2.1cqw, 12.5px);
    line-height: 1.35;
    white-space: normal;
    flex-wrap: wrap;
    gap: 4px;
  }
}

@media (max-width: 760px) {
  .appendix-e__year-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appendix-e__year-card { min-height: 150px; }
  .appendix-e__row-label { font-size: 12px; }
  .appendix-e__pnl-values span {
    height: 29px;
    padding-inline: 6px;
    font-size: 10px;
  }
  .appendix-e__break-grid { grid-template-columns: 1fr; }
  .appendix-e__key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .appendix-e__year-cards { grid-template-columns: 1fr; }
  .appendix-e__year-card { min-height: 0; }
  .appendix-e__metric-row { grid-template-columns: minmax(0, 1fr) minmax(90px, 0.55fr); margin-bottom: 6px; }
  .appendix-e__pnl-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appendix-e__key-grid { grid-template-columns: 1fr; }
  .appendix-e__title em { display: inline; }  
  .appendix-e__footer { letter-spacing: 0.035em; }
}
/* @media screen and (min-width: 769px) {
  p.appendix-e__note{
   top: calc(184 * var(--u));
}} */

/* ============================================================
   APPENDIX F — RESPONSIVE
   All selectors are scoped to .appendix-f.
   ============================================================ */

.appendix-f .appendix-f__stage { 
  color: var(--ink);
}

@media (max-width: 1099px) {
  .appendix-f .appendix-f__slide {
    width: 100%;
    min-height: 100svh;
    height: auto;
    aspect-ratio: auto;
    overflow: visible;
  }

  .appendix-f .appendix-f__stage {
    position: relative;
    inset: auto;
    min-height: 100svh;
    height: auto;
    padding: clamp(30px, 6cqw, 64px) clamp(20px, 6cqw, 72px) clamp(32px, 6cqw, 58px);
    display: block;
  }

  .appendix-f__header,
  .appendix-f__summary,
  .appendix-f__architect,
  .appendix-f__connector,
  .appendix-f__disciplines,
  .appendix-f__team-total,
  .appendix-f__note,
  .appendix-f__footer {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    transform: none;
  }

  .appendix-f__header { margin: 0; }

  .appendix-f__eyebrow {
    font-size: clamp(11px, 2.7cqw, 15px);
  }

  .appendix-f__title {
    margin-top: clamp(14px, 3.5cqw, 23px);
    font-size: clamp(25px, 6.1cqw, 36px);
  }

  .appendix-f__intro {
    margin-top: clamp(14px, 3cqw, 18px);
    font-size: clamp(12px, 2.9cqw, 17px);
  }

  .appendix-f__summary {
    margin-top: clamp(28px, 5cqw, 46px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 2cqw, 18px);
  }

  .appendix-f__summary-card {
    height: auto;
    min-height: clamp(105px, 16cqw, 121px);
    padding: clamp(18px, 3cqw, 24px) clamp(10px, 2cqw, 14px);
  }

  .appendix-f__summary-card strong {
    font-size: clamp(16px, 3.4cqw, 22px);
  }

  .appendix-f__summary-card span {
    margin-top: clamp(10px, 2.5cqw, 17px);
    font-size: clamp(10px, 2cqw, 12.5px);
  }

  .appendix-f__architect {
    margin: clamp(28px, 5cqw, 42px) auto 0;
    width: min(100%, 528px);
    height: clamp(78px, 12cqw, 92px);
    transform: none;
  }

  .appendix-f__architect:hover,
  .appendix-f__architect:focus-within,
  .appendix-f__architect.appendix-f__card--hover {
    transform: translateY(-4px);
  }

  .appendix-f__architect strong {
    font-size: clamp(14px, 2.6cqw, 18px);
  }

  .appendix-f__architect span {
    margin-top: 6px;
    font-size: clamp(9px, 1.8cqw, 11.5px);
  }

  .appendix-f__connector {
    display: none;
  }

  .appendix-f__disciplines {
    margin-top: clamp(34px, 6cqw, 56px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2.5cqw, 24px);
  }

  .appendix-f__discipline {
    height: auto;
    min-height: clamp(135px, 18cqw, 157px);
    padding: clamp(20px, 3cqw, 32px) clamp(10px, 2cqw, 12px) clamp(16px, 2.5cqw, 18px);
  }

  .appendix-f__discipline::before {
    display: none;
  }

  .appendix-f__discipline h3 {
    font-size: clamp(12px, 2.3cqw, 16px);
  }

  .appendix-f__discipline span {
    font-size: clamp(9px, 1.8cqw, 12px);
  }

  .appendix-f__team-total {
    margin-top: clamp(24px, 4cqw, 38px);
    min-height: clamp(48px, 7cqw, 54px);
    border-radius: 999px;
    font-size: clamp(12px, 2.5cqw, 18px);
  }

  .appendix-f__note {
    margin-top: clamp(20px, 4cqw, 32px);
    font-size: clamp(9px, 1.9cqw, 14px);
  }

  .appendix-f__note--secondary {
    margin-top: clamp(10px, 2.5cqw, 20px);
  }

  .appendix-f__footer {
    margin-top: clamp(24px, 5cqw, 42px);
    padding-bottom: clamp(8px, 2cqw, 18px);
    font-size: clamp(8px, 2.1cqw, 12.5px);
    line-height: 1.35;
    white-space: normal;
    flex-wrap: wrap;
    gap: 4px;
  }
}

@media (max-width: 760px) {
  .appendix-f__summary {
    grid-template-columns: 1fr;
  }

  .appendix-f__disciplines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appendix-f__summary-card {
    min-height: 100px;
  }
}

@media (max-width: 480px) {
  .appendix-f .appendix-f__stage {
    padding-inline: 18px;
  }

  .appendix-f__disciplines {
    grid-template-columns: 1fr;
  }

  .appendix-f__title em {
    display: inline;
  }

  .appendix-f__team-total {
    padding-inline: 14px;
  }

  .appendix-f__footer {
    letter-spacing: 0.035em;
  }
}

@media (max-width: 1099.98px), (max-height: 619.98px) {
  .appendix-a__eyebrow,
  .appendix-b__eyebrow,
  .appendix-c__eyebrow,
  .appendix-d__eyebrow,
  .appendix-e__eyebrow,
  .appendix-f__eyebrow {
        font-size: clamp(14px, 1.7vw, 13px);
  }

  .appendix-a__title,
  .appendix-b__title,
  .appendix-c__title,
  .appendix-d__title,
  .appendix-e__title,
  .appendix-f__title {
    font-size: clamp(24px, 5.4vw, 40px);
  }

  .appendix-a__subtitle {
      font-size: clamp(22px, 5.4vw, 40px);
  }

  .appendix-a__intro,
  .appendix-b__intro,
  .appendix-c__intro,
  .appendix-d__intro,
  .appendix-e__intro,
  .appendix-f__intro {
      font-size: clamp(14px, 2vw, 15px);
  }

  .appendix-a__bullets, .appendix-a__card--geography .appendix-a__bullets {
      font-size: clamp(14px, 2vw, 15px);
  }

  .appendix-a__sources {
      font-size: clamp(10px, 1.35vw, 11px);
  }

  .appendix-b__kicker ,
  .appendix-b__signal-kicker{
    font-size: clamp(12px, 1.35vw, 11px);
  }

  .appendix-b__card-body {
            min-height: 350px;
  }

  .appendix-d__months > div {
      font-size: clamp(12px, 2.5cqw, 11.5px);
  }

  .appendix-d__phase {
      font-size: clamp(10px, 2.2cqw, 12px);
  }

  .appendix-d__card h3 {
      font-size: clamp(16px, 4.5cqw, 18px);
  }

  .appendix-d__card p {
      font-size: clamp(12px, 3.5cqw, 13.8px);
  }

  .appendix-e__year-cards {
      margin-top: clamp(45px, 5cqw, 46px);
  }

  .appendix-e__metric-row span,
  .appendix-e__metric-row strong {
      font-size: clamp(12px, 1.8cqw, 12.5px);
  }
  
  .appendix-e__section-label {
    font-size: calc(18 * var(--u));
  }

  .appendix-e__section-label {
    font-size: calc(18 * var(--u));
  }

  .appendix-e__break-card p {
      font-size: clamp(10px, 1.8cqw, 12px);
  }

  .appendix-e__break-card {
      height: auto;
      min-height: clamp(75px, 11cqw, 93px);
  }

  .appendix-e__break-card span,
  .appendix-f__architect span,
  .appendix-f__discipline span {
      font-size: clamp(10px, 1.8cqw, 12px);
  }

  .appendix-e__key-grid article span,
  .appendix-e__key-grid article strong {
      font-size: clamp(12px, 1.7cqw, 11.5px);
  }

  .appendix-f__summary-card span {
    font-size: clamp(12px, 1.7cqw, 11.5px);
  }

  .appendix-f__architect {
    transform: translateX(0) !important;
  }

  .appendix-f__discipline {
      min-height: clamp(70px, 18cqw, 157px);
  }

  p.appendix-e__note {
    position: static;
    width: auto;
    font-size: 12px;
    font-size: clamp(14px, 2vw, 15px);
  }
}

@media (max-width: 1099px), (max-height: 619px) {
  .compounding-advantages .stage {
    padding: clamp(48px, 11cqw, 78px) clamp(22px, 5cqw, 72px) clamp(72px, 9cqw, 110px) !important;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2.5cqw, 26px);
    overflow-y: auto;
    box-sizing: border-box;
  }

  .compounding-advantages__eyebrow, .compounding-advantages__title, .compounding-advantages__sub, .compounding-advantages__card, .compounding-advantages__core {
    position: relative;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  .compounding-advantages__card--tl::after, .compounding-advantages__card--tr::after, .compounding-advantages__card--bl::before, .compounding-advantages__card--br::before {
    display: none;
  }

  .compounding-advantages__sub {
    margin-bottom: 20px;
  }

  .compounding-advantages__card {
    margin: 10px 0;
  }

  .compounding-advantages__card {
    width: auto;
    height: auto;
    min-height: calc(360 * var(--u));
  }

  .compounding-advantages__eyebrow,
  .compounding-advantages__title,
  .compounding-advantages__sub {
    order: -2;
  }

  .compounding-advantages__core {
    order: -1;
    width: calc(400 * var(--u));
    height: calc(400 * var(--u));
    margin: 0 auto 20px;
  }

  .compounding-advantages__title {
    font-size: clamp(24px, 5.6cqw, 40px) !important;
  }

  .compounding-advantages__tag {
    font-size: calc(18 * var(--u));
  }

  .compounding-advantages__card-title {
    left: calc(116 * var(--u));
    right: calc(20 * var(--u));
  }

  .compounding-advantages__card-body {
    font-size: calc(20 * var(--u));
  }

  .compounding-advantages__card-proof {
    font-size: calc(18 * var(--u));
  }
}


@media (max-width: 640px) { 
  .s1__sub {
    font-size: clamp(14px, 4.3cqw, 19px) !important;
  }

  .s1__invest-note {
    font-size: calc(18 * var(--u));
  }

  .s2__stat {
    font-size: calc(30 * var(--u)) !important;
  }

  .s2__stat-dark {
    margin: 0;
    top: -2px;
  }

  .slide-footer {
    font-size: clamp(9px, 3.4cqw, 13px);
  }

  .slide-footer__line2 {
    font-size: clamp(7px, 2.5cqw, 10.5px);
  }

  .eyebrow {
    font-size: calc(22 * var(--u));
  }

  .s4__sub,
  .s5__sub,
  .s6__sub,
  .s7__sub,
  .s8__sub,
  .s9__sub,
  .s10__sub,
  .s11__sub,
  .s12__sub,
  .s13__sub,
  .compounding-advantages__sub,
  .s15__sub,
  .s16__sub {
    font-size: calc(20 * var(--u));
  }

}