/* ==========================================================================
   Contakt Academy — phone version (ACADSITE-MOBILE-20260807)
   --------------------------------------------------------------------------
   Every rule that changes rendering lives inside @media (max-width: 767.98px).
   At >= 768px this sheet contributes exactly one thing: it hides the
   phone-only DOM variants that do not exist on the desktop baseline at all
   ([data-mobile-only]). Desktop rendering is therefore byte-identical to
   origin/main.

   Load order: site.css -> academy-site.css -> mobile.css.
   Motion spec of record: docs/ACADSITE-MOBILE-MOTION-NOTES-20260807.md
   ========================================================================== */

/* Phone-only DOM is inert everywhere until the phone media query opts each
   construct back in with an explicit display. Elements carrying this attribute
   are new in this lane, so this rule cannot alter the desktop baseline. */
[data-mobile-only] {
  display: none;
}

@media (max-width: 767.98px) {

  /* ====================================================================
     A · Document, tokens and the overflow contract
     ==================================================================== */

  :root {
    --m-gutter: 20px;
    --m-paper: #f7f8fa;
    --m-surface: #fff;
    --m-warm: #f3f0e9;
    --m-ink: #1f2328;
    --m-ink-strong: #20242a;
    --m-muted: #616a73;
    /* #8a929c (desktop tertiary) is 3.15:1 on white — below AA. Phone-only
       darkening; ≥768px keeps the desktop palette untouched. */
    --m-tertiary: #666e78;
    --m-hairline: #e1e4e8;
    --m-rule: #d9dde2;
    --m-line: #cfd4da;
    --m-green-deep: #1e7b33;
    --m-green-mid: #2fa24b;
    --m-green-bright: #61ed6a;
    --m-green-press: #176028;
    --m-chip: #d9fbe0;
    --m-chip-border: #b9e8c2;
    --m-dark: #0f1a12;
    --m-dark-ink: #eaf4ec;
    --m-dark-body: #b9c6bd;
    --m-dark-caption: #8fa295;
    --m-dark-rule: rgba(234, 244, 236, .14);
    --m-warn-bg: #fbf4e8;
    --m-warn-border: #eed9b2;
    --m-warn-ink: #8a6a1f;
    --m-warn-dot: #e39a2e;
    --m-teal: #2e7e8f;
    --m-shadow: 0 8px 20px rgba(31, 35, 40, .07);
    --m-shadow-float: 0 18px 40px rgba(31, 35, 40, .12);
    --m-ease: cubic-bezier(.2, .7, .3, 1);
  }

  /* The desktop sheet clips the document horizontally, which would mask a real
     overflow instead of preventing one. The phone version must genuinely fit,
     so the clip is released and every construct is sized to the gutter. */
  body {
    overflow-x: visible;
    font-size: 16.5px;
    line-height: 1.55;
  }

  /* Deep links land under the 56pt bar, not behind it. */
  html {
    scroll-padding-top: 72px;
  }

  .page-refresh .wrap,
  .page-refresh.page-legacy .wrap,
  .wrap {
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--m-gutter);
  }

  /* ====================================================================
     B · Reveals decorate, never gate  (MOTION-NOTES §0)
     ==================================================================== */

  /* Belt and braces with the matchMedia guard in site.js: even if the script
     runs before the guard, nothing on the phone version may start hidden. */
  [data-reveal],
  .reveal-armed [data-reveal],
  body.reveal-armed [data-reveal],
  [data-reveal]:not(.is-in) {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* ====================================================================
     C · Phone-only / desktop-only DOM variants
     ==================================================================== */

  [data-desktop-only] {
    display: none !important;
  }

  /* ====================================================================
     D · Section rhythm and the type ramp
     ==================================================================== */

  .page-refresh main > section,
  main > section {
    padding-block: 32px;
    border-top: 1px solid var(--m-rule);
  }

  main > section:first-child,
  main > section.home-hero,
  main > section.page-hero,
  main > section.hero {
    padding-top: 26px;
    border-top: 0;
  }

  .page-refresh h1,
  .page-refresh h2,
  .page-refresh h3,
  h1, h2, h3 {
    text-wrap: pretty;
  }

  h1,
  .page-hero h1,
  .home-hero h1 {
    margin: 0;
    font: 700 34px/1.05 var(--ct-font-display);
    letter-spacing: -.032em;
  }

  .page-home h1 { font-size: 27px; line-height: 1.09; }
  .route-theme--clubs h1 { font-size: 33px; }
  .route-theme--programs h1,
  .page-product h1,
  .page-pricing h1,
  .page-product-tour h1 { font-size: 31px; }
  .route-theme--managed h1 { font-size: 30px; }
  .page-privacy h1 { font-size: 32px; }

  .page-refresh h2,
  main h2 {
    margin: 0;
    font: 700 27px/1.1 var(--ct-font-display);
    letter-spacing: -.028em;
  }

  .editorial-copy h2,
  .club-stories h2,
  .program-stories h2 {
    font-size: 25px;
    line-height: 1.12;
  }

  .page-refresh h3,
  main h3 {
    margin: 0;
    font: 600 17px/1.3 var(--ct-font-display);
    letter-spacing: -.015em;
  }

  .page-refresh .eyebrow {
    margin: 0 0 14px;
    font: 600 11px/1.4 var(--ct-font-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--m-green-deep);
  }

  .home-hero__lede,
  .page-hero__lede {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--m-muted);
  }

  main p {
    font-size: 16.5px;
    line-height: 1.55;
  }

  main figcaption,
  .ct-legal-line,
  .m-caption {
    font: 400 11.5px/1.6 var(--ct-font-mono);
    color: var(--m-tertiary);
  }

  /* Prices never orphan their unit. */
  .m-nowrap,
  .price-callout strong,
  .pricing-card .plan-price,
  .plan-price {
    white-space: nowrap;
  }

  /* ====================================================================
     E · Buttons, links, chips, press states  (MOTION-NOTES §9)
     ==================================================================== */

  .button {
    display: inline-flex;
    width: 100%;
    min-height: 50px;
    padding: 12px 20px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 999px;
    font: 600 15px/1.35 var(--ct-font-display);
    box-shadow: 0 7px 18px rgba(30, 123, 51, .2);
  }

  .button--ghost {
    min-height: 48px;
    border-color: var(--m-line);
    background: transparent;
    color: var(--m-ink-strong);
    font: 500 12px/1.4 var(--ct-font-mono);
    letter-spacing: .03em;
    text-transform: uppercase;
    box-shadow: none;
  }

  /* Only the sticky bar's CTA runs at the specified 40pt; every other small
     button is a normal in-page target and clears 44pt. */
  .button--small {
    width: auto;
    min-height: 48px;
    padding: 12px 16px;
    font: 600 14px/1.2 var(--ct-font-display);
  }

  .nav-actions .button--small {
    min-height: 40px;
    padding: 9px 14px;
    font: 600 13px/1.2 var(--ct-font-display);
  }

  .text-link {
    min-height: 44px;
    font: 600 14px/1.4 var(--ct-font-display);
    text-decoration-color: var(--m-green-mid);
    text-underline-offset: 6px;
  }

  .button-row,
  .refresh-final__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .button-row .text-link,
  .refresh-final__actions .text-link {
    justify-content: center;
  }

  /* Press replaces hover everywhere. */
  .button:active,
  .text-link:active,
  .m-zoom:active,
  .m-step-chip:active,
  .m-step-nav:active,
  .workflow-card:active,
  .solution-route:active,
  .showcase-card:active,
  .m-rail > *:active {
    transform: scale(.99);
    border-color: var(--m-green-mid);
  }

  .button:active {
    background: var(--m-green-press);
    border-color: var(--m-green-press);
  }

  .button--ghost:active {
    background: transparent;
    border-color: var(--m-green-mid);
  }

  /* Nothing on the phone version may depend on hover. */
  .workflow-card:hover,
  .solution-route:hover,
  .showcase-card:hover,
  .pricing-card:hover {
    transform: none;
    box-shadow: var(--m-shadow);
  }

  /* ====================================================================
     F · The bar  (master prompt §6)
     ==================================================================== */

  .site-header {
    background: rgba(247, 248, 250, .96);
  }

  .page-refresh .nav-header {
    box-shadow: none;
  }

  .site-header.is-scrolled {
    border-color: var(--m-rule);
    box-shadow: 0 4px 16px rgba(31, 35, 40, .06);
  }

  /* Source order is brand · toggle · nav · actions; the phone bar reads
     brand · CTA · toggle, so the two right-hand controls are re-ordered into
     one group without touching the DOM. */
  .nav-shell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding-block: 6px;
    padding-inline: var(--m-gutter);
  }

  .page-refresh .product-brand {
    order: 0;
    display: inline-flex;
    margin-right: auto;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    opacity: 1 !important;
  }

  .nav-shell > .nav-actions { order: 1; }
  .nav-shell > .nav-toggle { order: 2; }
  .nav-shell > .main-nav { order: 3; }

  .page-refresh .product-brand img {
    width: 92px;
    height: auto;
    opacity: 1 !important;
  }

  /* Route pages carry the lockup from the first frame; the desktop scroll
     morph is deliberately omitted on phone (MOTION-NOTES §3). */
  .page-refresh .route-product-brand span {
    display: inline-flex;
    align-items: center;
    padding-left: 10px;
    border-left: 1px solid var(--m-line);
    font: 600 12px/1 var(--ct-font-display);
    letter-spacing: .05em;
    color: var(--m-muted);
    white-space: nowrap;
    opacity: 1 !important;
  }

  .nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .nav-actions .nav-signin {
    display: none;
  }

  .nav-actions .nav-signin.nav-lang {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .nav-actions .button--small {
    min-height: 40px;
    padding: 9px 14px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
  }

  /* 40pt visual pill (per mockup) with a 44pt effective target (§1.7):
     invisible hit-area extension; ::after is taken by the is-open state. */
  .nav-actions .button--small::before {
    content: "";
    position: absolute;
    inset: -2px 0;
  }

  .nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--m-rule);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
  }

  .nav-toggle i {
    display: block;
    width: 15px;
    height: 1.5px;
    background: var(--m-ink-strong);
    transition: transform .2s var(--m-ease), opacity .2s var(--m-ease);
  }

  /* ====================================================================
     G · Menu takeover  (★ 1a, MOTION-NOTES §1)
     ==================================================================== */

  .nav-shell.is-open {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100dvh;
    padding: 0;
    background: var(--m-paper);
    overflow: hidden;
  }

  .nav-shell.is-open::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 56px;
    border-bottom: 1px solid var(--m-rule);
    pointer-events: none;
  }

  .nav-shell.is-open > .product-brand {
    position: absolute;
    top: 6px;
    left: var(--m-gutter);
    z-index: 2;
    margin-right: 0;
  }

  /* The sheet header shows the plain wordmark; the route lockup belongs to the
     bar, not the takeover. */
  .nav-shell.is-open .route-product-brand span {
    display: none;
  }

  .nav-shell.is-open > .nav-toggle {
    position: absolute;
    top: 6px;
    right: var(--m-gutter);
    z-index: 2;
    gap: 0;
  }

  .nav-shell.is-open .nav-toggle i {
    position: absolute;
    background: var(--m-ink-strong);
  }

  .nav-shell.is-open .nav-toggle i:first-of-type {
    transform: rotate(45deg);
  }

  .nav-shell.is-open .nav-toggle i:last-of-type {
    transform: rotate(-45deg);
  }

  .nav-shell.is-open .main-nav {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 64px var(--m-gutter) 0;
    border: 0;
    background: transparent;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: m-menu-content 200ms var(--m-ease) both;
  }

  .nav-shell.is-open .main-nav a {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--m-hairline);
    color: var(--m-ink-strong);
    font: 600 21px/1.2 var(--ct-font-display);
    letter-spacing: -.02em;
    text-decoration: none;
  }

  .nav-shell.is-open .main-nav a::after {
    content: "→";
    color: var(--m-tertiary);
    font-size: 15px;
  }

  .nav-shell.is-open .main-nav .mobile-nav-signin {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    border-bottom: 0;
    color: var(--m-muted);
    font: 400 13px/1.4 var(--ct-font-mono);
  }

  .nav-shell.is-open .main-nav .mobile-nav-signin::after {
    content: none;
  }

  .nav-shell.is-open .nav-actions {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: auto;
    padding: 16px var(--m-gutter) calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--m-hairline);
    background: #fff;
    animation: m-menu-content 200ms var(--m-ease) both;
  }

  .nav-shell.is-open .nav-actions .nav-lang {
    align-self: flex-start;
    width: auto;
  }

  .nav-shell.is-open .nav-actions .button--small {
    width: 100%;
    min-height: 52px;
    padding: 13px 20px;
    gap: 9px;
    font: 600 16px/1.35 var(--ct-font-display);
  }

  .nav-shell.is-open .nav-actions .button--small::after {
    content: "→";
  }

  /* "Book a demo" is a phone-only affordance in the takeover's pinned block. */
  .nav-shell.is-open .m-menu-demo {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--m-ink-strong);
    font: 600 14px/1.4 var(--ct-font-display);
    text-decoration: underline;
    text-decoration-color: var(--m-green-mid);
    text-underline-offset: 6px;
  }

  .m-menu-open,
  .m-menu-open body {
    overflow: hidden;
  }

  .nav-shell.is-open {
    animation: m-menu-in 160ms var(--m-ease) both;
  }

  @keyframes m-menu-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes m-menu-content {
    from { transform: translateY(8px); }
    to { transform: translateY(0); }
  }

  /* ====================================================================
     H · Footer  (identical on all nine pages)
     ==================================================================== */

  .refresh-footer,
  .site-footer {
    padding: 32px 0 calc(28px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--m-rule);
    background: var(--m-paper);
  }

  .footer-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 0;
  }

  .footer-main > img {
    width: 116px;
    height: auto;
    margin-bottom: 20px;
  }

  .family-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font: 500 13px/1.4 var(--ct-font-mono);
  }

  .family-bar a,
  .family-bar strong {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 5px;
  }

  .footer-mail {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    font: 600 16px/1.4 var(--ct-font-display);
    color: var(--m-ink-strong);
    text-decoration: underline;
    text-decoration-color: var(--m-green-mid);
    text-underline-offset: 6px;
  }

  .footer-legal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--m-hairline);
  }

  .footer-legal a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    font: 400 12.5px/1.5 var(--ct-font-mono);
    color: var(--m-green-deep);
  }

  /* ====================================================================
     I · Shared construct 1 — the redrawn product card
     ==================================================================== */

  .m-recreate {
    display: block;
    margin: 0;
    border: 1px solid var(--m-hairline);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--m-shadow);
  }

  .m-recreate--float {
    box-shadow: var(--m-shadow-float);
  }

  /* Attribute-qualified so page-level descendant rules such as
     `.editorial-copy p` cannot out-specify the locator strip. */
  .m-recreate__locator,
  .m-recreate__locator[data-mobile-only] {
    display: block;
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ct-rule);
    background: #f1f3f5;
    font: 400 10px/1.3 var(--ct-font-mono);
    color: var(--m-muted);
  }

  .m-recreate__body {
    display: block;
    padding: 12px 13px;
  }

  .m-recreate__body--warm {
    background: var(--m-warm);
  }

  .m-recreate__body--plain {
    padding: 14px 14px 12px;
  }

  .m-recreate figcaption,
  .m-recreate__caption {
    margin: 0;
    padding: 9px 12px;
    border-top: 1px solid var(--m-hairline);
    font: 400 11.5px/1.5 var(--ct-font-mono);
    color: var(--m-tertiary);
    text-align: left;
  }

  /* ====================================================================
     J · Shared construct 2 — tap-to-zoom  (MOTION-NOTES §4)
     ==================================================================== */

  .m-zoom {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-top: 1px solid var(--m-hairline);
    background: #fff;
    font: 500 12px/1.4 var(--ct-font-mono);
    color: var(--m-green-deep);
    text-align: left;
    cursor: pointer;
  }

  .m-zoom-overlay {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: flex;
    height: 100dvh;
    flex-direction: column;
    background: rgba(15, 26, 18, .96);
    animation: m-zoom-in 140ms var(--m-ease) both;
  }

  .m-zoom-overlay__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
  }

  .m-zoom-overlay__label {
    font: 400 11.5px/1.4 var(--ct-font-mono);
    color: var(--m-dark-body);
  }

  .m-zoom-overlay__close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(234, 244, 236, .3);
    border-radius: 999px;
    background: transparent;
    color: var(--m-dark-ink);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
  }

  .m-zoom-overlay__scroll {
    flex: 1;
    overflow: auto;
    padding: 0 16px calc(20px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .m-zoom-overlay__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .m-zoom-overlay__image {
    display: block;
    width: 900px;
    max-width: none;
    height: auto;
    border-radius: 6px;
    background: #fff;
    animation: m-zoom-image 200ms var(--m-ease) both;
  }

  .m-zoom-overlay--wide .m-zoom-overlay__image {
    width: 1100px;
  }

  @keyframes m-zoom-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes m-zoom-image {
    from { transform: scale(.98); }
    to { transform: scale(1); }
  }

  /* ====================================================================
     K · Shared construct 3 — the snap rail  (MOTION-NOTES §5)
     ==================================================================== */

  .m-rail {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--m-gutter) * -1);
    padding: 2px var(--m-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .m-rail::-webkit-scrollbar {
    height: 0;
  }

  .m-rail > * {
    flex: 0 0 292px;
    scroll-snap-align: center;
  }

  .m-rail--wide > * {
    flex-basis: 300px;
  }

  .m-railmeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
  }

  .m-railmeta__count {
    margin: 0;
    font: 400 11.5px/1.5 var(--ct-font-mono);
    color: var(--m-tertiary);
  }

  .m-railmeta__dots {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
  }

  .m-railmeta__dots i {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--m-line);
    transition: background .15s linear;
  }

  .m-railmeta__dots i.is-on {
    background: var(--m-green-mid);
  }

  /* ====================================================================
     L · Shared construct 4 — the stepper  (★ 1g, MOTION-NOTES §6)
     ==================================================================== */

  .m-stepper {
    display: block;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
  }

  .m-stepper__chips {
    display: flex;
    gap: 8px;
    padding: 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .m-stepper__chips::-webkit-scrollbar {
    height: 0;
  }

  .m-step-chip {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--m-rule);
    border-radius: 999px;
    background: #fff;
    color: var(--m-muted);
    font: 500 12px/1 var(--ct-font-mono);
    white-space: nowrap;
    cursor: pointer;
  }

  .m-step-chip[aria-pressed="true"] {
    border-color: var(--m-ink-strong);
    background: var(--m-ink-strong);
    color: #fff;
  }

  .m-stepper__stage {
    display: flex;
    min-height: 300px;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--m-warm);
  }

  .m-stepper__exhibit {
    display: none;
    width: 100%;
    margin: 0;
  }

  .m-stepper__exhibit.is-active {
    display: block;
    animation: m-exhibit 160ms var(--m-ease) both;
  }

  .m-stepper__exhibit img {
    display: block;
    max-width: 100%;
    max-height: 340px;
    margin-inline: auto;
    object-fit: contain;
  }

  .m-stepper__exhibit--pair {
    display: none;
  }

  .m-stepper__exhibit--pair.is-active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  @keyframes m-exhibit {
    from { opacity: .35; }
    to { opacity: 1; }
  }

  .m-stepper__text {
    padding: 14px 14px 4px;
  }

  .m-stepper__meta {
    display: block;
    margin: 0 0 5px;
    font: 600 10.5px/1.4 var(--ct-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-green-deep);
  }

  .m-stepper__copy {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--m-ink);
  }

  .m-stepper__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-top: 1px solid var(--m-hairline);
  }

  .m-step-nav {
    min-width: 66px;
    min-height: 44px;
    border: 1px solid var(--m-rule);
    border-radius: 999px;
    background: #fff;
    color: var(--m-muted);
    font: 500 12px/1 var(--ct-font-mono);
    cursor: pointer;
  }

  .m-step-nav--next {
    border-color: var(--m-green-deep);
    background: var(--m-green-deep);
    color: #fff;
  }

  .m-step-nav[disabled] {
    opacity: .45;
  }

  .m-stepper__counter {
    margin: 0;
    font: 400 11.5px/1.5 var(--ct-font-mono);
    color: var(--m-tertiary);
  }

  /* ====================================================================
     M · Shared construct 5 — the accordion  (MOTION-NOTES §7)
     ==================================================================== */

  .m-accordion,
  .faq-list details,
  .dossier-group {
    border-bottom: 1px solid var(--m-hairline);
  }

  .m-accordion > summary,
  .faq-list summary {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font: 600 16.5px/1.3 var(--ct-font-display);
    list-style: none;
    cursor: pointer;
  }

  .m-accordion > summary::-webkit-details-marker,
  .faq-list summary::-webkit-details-marker {
    display: none;
  }

  .m-plus {
    display: inline-flex;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--m-rule);
    border-radius: 50%;
    color: var(--m-green-deep);
    transition: transform .18s var(--m-ease);
  }

  details[open] > summary .m-plus {
    transform: rotate(45deg);
  }

  .m-count {
    font: 400 11.5px/1 var(--ct-font-mono);
    color: var(--m-tertiary);
  }

  .m-summary-tail {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
  }

  /* ====================================================================
     N · Dark bands and full-bleed panels
     ==================================================================== */

  .m-bleed {
    margin-inline: calc(var(--m-gutter) * -1);
  }

  .m-dark {
    padding: 30px var(--m-gutter);
    background: var(--m-dark);
    color: var(--m-dark-ink);
  }

  .m-dark p {
    color: var(--m-dark-body);
  }

  .m-dark .eyebrow,
  .m-dark .m-eyebrow {
    color: var(--m-green-bright);
  }

  .m-dark .m-caption,
  .m-dark figcaption {
    color: var(--m-dark-caption);
  }

  /* ====================================================================
     O · Desktop-only machinery neutralised below 768px  (MOTION-NOTES §10)
     ==================================================================== */

  /* The hero wordmark scroll-morph is omitted: the bar owns the wordmark from
     the first frame, so the morph track is removed from the flow entirely. */
  .hero-brand-track,
  .home-brand-track,
  .route-brand-track {
    display: none !important;
  }

  /* Route departure/arrival veils never run on phone (MOTION-NOTES §2). */
  .route-page-transition,
  .route-arrival-veil {
    display: none !important;
  }

  /* ====================================================================
     Q · Redrawn artwork wrappers used inside existing figures
     ==================================================================== */

  /* Route-card media strip (index solution routes). */
  .m-route-strip {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px;
    border-top: 1px solid var(--m-hairline);
  }

  .m-route-strip--dark {
    border-top-color: var(--m-dark-rule);
  }

  /* Workspace-rail dashboard mini. */
  .m-ws {
    display: flex;
    height: 158px;
    flex-direction: column;
    gap: 8px;
    padding: 12px 13px;
    overflow: hidden;
  }

  /* ====================================================================
     R · index
     ==================================================================== */

  .home-hero {
    padding: 26px 0 0;
    overflow: visible;
    background: var(--m-paper);
  }

  .home-hero__grid,
  .home-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .home-hero__grid { gap: 18px; }

  .home-hero__copy > * { margin: 0; }

  /* The 620px sheet drops this line; ACCEPTANCE §B requires the demo note on
     phone and the mockup renders it, so it is restored. */
  .demo-note,
  .home-hero .demo-note {
    display: block;
    margin: 0;
    font: 400 12.5px/1.6 var(--ct-font-mono);
    color: var(--m-muted);
  }

  .demo-note a {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .hero-product {
    display: flex;
    margin: 6px 0 0;
    flex-direction: column;
    gap: 14px;
  }

  .hero-browser {
    border: 1px solid var(--m-hairline);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--m-shadow-float);
  }

  .evidence-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--ct-rule);
    background: #f1f3f5;
    font: 400 10px/1.3 var(--ct-font-mono);
    color: var(--m-muted);
    text-transform: none;
    letter-spacing: 0;
  }

  .hero-phone-rail {
    display: flex;
    gap: 12px;
    justify-content: center;
    overflow: visible;
  }

  /* Baked phone PNGs are shown whole: no frame, no crop, no rotation. */
  .hero-phone {
    position: static;
    display: flex;
    width: 158px;
    flex: 0 0 158px;
    aspect-ratio: auto;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    inset: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
    box-shadow: none;
    transform: none;
  }

  .hero-phone img {
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    box-shadow: none;
  }

  .hero-phone-label {
    position: static;
    inset: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font: 400 11.5px/1.5 var(--ct-font-mono);
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-tertiary);
    text-align: center;
    box-shadow: none;
  }

  .hero-product > figcaption {
    position: static;
    inset: auto;
    font: 400 11.5px/1.6 var(--ct-font-mono);
    color: var(--m-tertiary);
    text-align: left;
  }

  /* 01–04 numbered proof list */
  .proof-strip {
    display: flex;
    margin-top: 8px;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--m-hairline);
    border-bottom: 0;
    background: none;
  }

  /* The 620px sheet raises specificity with a :nth-child selector list for the
     first two cells; this list matches it so all four cells re-flatten. */
  .proof-strip > div,
  .proof-strip > div:nth-child(-n + 2) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 12px;
    min-height: 0;
    padding: 14px 0;
    border: 0;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid var(--m-hairline);
  }

  .proof-strip > div:last-child {
    border-bottom: 0;
  }

  .proof-strip span {
    grid-row: 1 / span 2;
    font: 500 11px/1.5 var(--ct-font-mono);
    color: var(--m-green-mid);
  }

  .proof-strip strong {
    font: 600 16px/1.3 var(--ct-font-display);
  }

  .proof-strip small {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--m-muted);
  }

  /* Split headings collapse to one column everywhere on the phone. */
  .split-heading,
  .section-intro,
  .capability-layout,
  .faq-layout,
  .price-preview__inner,
  .founder-preview__grid,
  .founding-band__grid,
  .refresh-final__inner,
  .editorial-grid,
  .page-hero__grid,
  .start-grid,
  .onboarding-grid,
  .founder-grid,
  .role-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .split-heading > div,
  .section-intro > *,
  .split-heading > * {
    margin: 0;
  }

  .split-heading > div > * + * {
    margin-top: 12px;
  }

  /* Problem, trust: stacked cards */
  .handoff-grid,
  .trust-grid,
  .seam-grid,
  .money-grid,
  .onboarding-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .handoff-grid article,
  .trust-grid article {
    min-height: 0;
    padding: 14px;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: #fff;
  }

  .handoff-grid article > span,
  .trust-grid article > span {
    display: block;
    margin-bottom: 6px;
    font: 500 11px/1.4 var(--ct-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-tertiary);
  }

  .handoff-grid h3,
  .trust-grid h3 {
    margin: 0 0 5px;
    font: 600 17px/1.3 var(--ct-font-display);
  }

  .trust-grid h3 { margin-bottom: 5px; }

  .handoff-grid h3 { margin-bottom: 0; }

  .handoff-grid p,
  .trust-grid p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--m-muted);
  }

  /* Mechanism: full-bleed dark panel, then three plain rows. */
  .mechanism-section > .wrap.record-map {
    display: block;
    padding-inline: 0;
  }

  .record-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0 0 4px;
    padding: 30px var(--m-gutter);
    border: 0;
    border-radius: 0;
    background: var(--m-ink-strong);
    color: #fff;
    text-align: center;
  }

  .record-core span {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--m-green-bright);
    color: #162119;
    font: 600 10px/1.3 var(--ct-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .record-core strong {
    font: 600 24px/1.15 var(--ct-font-display);
    letter-spacing: -.025em;
  }

  .record-core small {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--m-dark-body);
  }

  .record-map > article {
    padding: 16px var(--m-gutter);
    border-bottom: 1px solid var(--m-hairline);
  }

  .record-map > article:last-child {
    border-bottom: 0;
  }

  .record-map > article::before,
  .record-map > article::after {
    content: none;
  }

  .record-map > article > span {
    display: block;
    margin-bottom: 4px;
    font: 500 11px/1.4 var(--ct-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-tertiary);
  }

  .record-map > article h3 {
    margin: 0 0 4px;
    font: 600 20px/1.2 var(--ct-font-display);
    letter-spacing: -.02em;
  }

  .record-map > article p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--m-muted);
  }

  /* Routes: three stacked full-width cards (★ 1c). */
  .solution-routes {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .solution-route {
    display: block;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: #fff;
    color: var(--m-ink);
    overflow: hidden;
    box-shadow: none;
  }

  .solution-route--managed {
    border-color: var(--m-ink-strong);
    background: var(--m-dark);
    color: var(--m-dark-ink);
  }

  .solution-route__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--m-hairline);
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .route-lockup { gap: 9px; }

  .solution-route--managed .solution-route__head {
    border-bottom-color: var(--m-dark-rule);
  }

  .solution-route__head .route-lockup img {
    width: 78px;
    height: auto;
    transform: none !important;
  }

  .solution-route--managed .route-lockup img {
    filter: brightness(0) invert(1);
  }

  .solution-route__status {
    font: 500 11px/1 var(--ct-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-muted);
    white-space: nowrap;
    transform: none !important;
  }

  .solution-route__status::before { content: none; }

  .solution-route--managed .solution-route__status {
    color: var(--m-green-bright);
  }

  .solution-route__copy {
    padding: 14px;
  }

  .solution-route__copy h3 {
    margin: 0 0 6px;
    font: 600 20px/1.2 var(--ct-font-display);
    letter-spacing: -.02em;
  }

  .solution-route--managed .solution-route__copy h3 { color: #fff; }

  .solution-route__copy p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--m-muted);
  }

  .solution-route--managed .solution-route__copy p { color: var(--m-dark-body); }

  .solution-route__copy strong { color: var(--m-ink); }

  .solution-route--managed .solution-route__copy strong { color: var(--m-dark-ink); }

  .solution-route__media {
    display: block;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .solution-route__media figcaption {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0;
    padding: 9px 14px;
    border: 0;
    border-top: 1px solid var(--m-hairline);
    border-radius: 0;
    background: none;
    font: 400 11.5px/1.5 var(--ct-font-mono);
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-tertiary);
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .solution-route--managed .solution-route__media figcaption {
    border-top-color: var(--m-dark-rule);
    color: var(--m-dark-caption);
  }

  /* "Watch how it works" reads as the card's own footer row on phone. */
  .solution-route__curtain {
    position: static;
    display: flex;
    padding: 0;
    align-items: center;
    border-top: 1px solid var(--m-hairline);
    background: none !important;
    background-image: none !important;
    transform: none;
    transition: opacity .18s var(--m-ease);
    pointer-events: none;
  }

  .solution-route--managed .solution-route__curtain {
    border-top-color: var(--m-dark-rule);
  }

  .solution-route__curtain::before { content: none; }

  .solution-route__curtain-content {
    display: flex;
    max-width: none;
    min-height: 48px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    transform: none;
    transition: none;
  }

  .route-handoff-armed .route-lockup--curtain,
  .solution-route__curtain-content .route-lockup--curtain {
    display: none;
    visibility: hidden;
  }

  .solution-route__curtain-content > strong {
    max-width: none;
    font: 600 14px/1.4 var(--ct-font-display);
    letter-spacing: 0;
    color: var(--m-green-deep);
  }

  .solution-route--managed .solution-route__curtain-content > strong {
    color: var(--m-green-bright);
  }

  .solution-route__curtain-content i { margin-left: 6px; }

  /* The 260ms lockup moment (MOTION-NOTES §2). */
  .solution-route.is-m-lockup {
    position: relative;
  }

  .solution-route.is-m-lockup::after {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 0;
    background: rgba(15, 26, 18, .94);
    animation: m-lockup 180ms var(--m-ease) both;
  }

  .solution-route.is-m-lockup .solution-route__curtain {
    position: absolute;
    z-index: 6;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border: 0;
    animation: m-lockup 180ms var(--m-ease) both;
  }

  .solution-route.is-m-lockup .route-lockup--curtain {
    display: flex;
    visibility: visible;
    align-items: center;
    gap: 10px;
    justify-self: center;
  }

  .solution-route.is-m-lockup .route-lockup--curtain img {
    width: 128px;
    filter: brightness(0) invert(1);
  }

  .solution-route.is-m-lockup .route-lockup__label {
    font: 600 13px/1 var(--ct-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--m-green-bright);
  }

  .solution-route.is-m-lockup .solution-route__curtain-content > strong {
    color: #fff;
  }

  @keyframes m-lockup {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .section-link {
    display: flex;
  }

  /* Workflow cards */
  .workflow-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .workflow-card {
    display: block;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: none;
  }

  .workflow-card > figure {
    display: block;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .workflow-card > div {
    padding: 14px;
  }

  .workflow-card__label {
    display: block;
    margin-bottom: 6px;
    font: 500 11px/1.4 var(--ct-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-green-mid);
  }

  .workflow-card h3 {
    margin: 0 0 6px;
    font: 600 18px/1.25 var(--ct-font-display);
    letter-spacing: -.02em;
  }

  .workflow-card p {
    margin: 0 0 8px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--m-muted);
  }

  .workflow-card__cta {
    display: inline-flex;
    min-height: 44px;
    margin-top: 0;
    padding-top: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font: 600 14px/1.4 var(--ct-font-display);
    letter-spacing: 0;
    color: var(--m-green-deep);
  }

  .workflow-card__cta > span {
    display: inline;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    transform: none;
    animation: none !important;
  }

  /* Workspace rail */
  .carousel-section > .wrap:last-of-type,
  .showcase-section > .wrap:last-of-type {
    padding-inline: 0;
  }

  .workspace-carousel {
    display: flex;
    gap: 12px;
    padding: 4px var(--m-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .workspace-carousel::-webkit-scrollbar { height: 0; }

  .workspace-card {
    flex: 0 0 300px;
    scroll-snap-align: center;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    color: var(--m-ink);
  }

  .workspace-card--managed {
    border-color: var(--m-ink-strong);
    background: var(--m-dark);
    color: var(--m-dark-ink);
  }

  .workspace-card figure {
    display: block;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .workspace-card figcaption {
    display: block;
    padding: 12px 13px;
    border-top: 1px solid var(--m-hairline);
    background: none;
    text-align: left;
  }

  .workspace-card--managed figcaption {
    border-top-color: var(--m-dark-rule);
  }

  .workspace-card figcaption strong {
    display: block;
    font: 600 16px/1.3 var(--ct-font-display);
  }

  .workspace-card--managed figcaption strong { color: #fff; }

  .workspace-card figcaption span {
    display: block;
    margin: 3px 0 8px;
    font: 400 11.5px/1.5 var(--ct-font-mono);
    color: var(--m-tertiary);
  }

  .workspace-card--managed figcaption span { color: var(--m-dark-caption); }

  .workspace-card figcaption em {
    font: 600 13px/1.4 var(--ct-font-display);
    font-style: normal;
    color: var(--m-green-deep);
  }

  .workspace-card--managed figcaption em { color: var(--m-green-bright); }

  .m-railmeta {
    display: flex;
    padding-inline: var(--m-gutter);
  }

  /* Spotlights: the copy leads, then the phone exhibit and its glyph tap-row,
     then the arrow points. `display: contents` promotes the body's children to
     flex items so the media can sit between them without duplicating DOM. */
  .spotlight {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .spotlight__body {
    display: contents;
  }

  .spotlight__body > .eyebrow,
  .spotlight__body > h3,
  .spotlight__body > p {
    order: 1;
    margin: 0;
  }

  .spotlight__body > h3 {
    font: 600 21px/1.2 var(--ct-font-display);
    letter-spacing: -.02em;
  }

  .spotlight__media { order: 2; }

  .spotlight__points { order: 3; }

  .spotlight__points {
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 13px;
    list-style: none;
  }

  /* The arrow stays an absolutely positioned ::before so the bolded lead-in
     and its sentence remain one continuous text flow. */
  .spotlight__points li {
    display: block;
    position: relative;
    padding: 0 0 0 22px;
    border: 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--m-muted);
  }

  .spotlight__points li::before {
    top: 0;
    color: var(--m-green-mid);
    font: 600 15px/1.5 var(--ct-font-mono);
  }

  .spotlight__points li strong { color: var(--m-ink); }

  .media-duo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* A dense web capture never renders inline on the phone; every one of these
     slots is replaced by a redrawn card or a glyph tap-row that opens the
     untouched capture (master prompt §1.4). */
  .capture-slot--web,
  .capture-slot--wide[data-desktop-only] { display: none; }

  .capture-slot--phone {
    display: flex;
    width: 218px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .capture-slot--phone img {
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .capture-slot[data-fallback]::after {
    font: 400 11.5px/1.5 var(--ct-font-mono);
    color: var(--m-tertiary);
    text-align: center;
  }

  /* The tap row that opens the office-line capture. */
  .m-glyph-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }

  .m-glyph-row__art {
    display: flex;
    width: 96px;
    height: 60px;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    border: 1px solid var(--m-hairline);
    border-radius: 4px;
    background: var(--m-paper);
  }

  .m-glyph-row__title {
    display: block;
    font: 600 14px/1.3 var(--ct-font-display);
    color: var(--m-ink);
  }

  .m-glyph-row__sub {
    display: block;
    margin-top: 3px;
    font: 400 11.5px/1.5 var(--ct-font-mono);
    color: var(--m-tertiary);
  }

  /* Validation */
  .validation-section .split-heading p:last-child {
    font: 400 12px/1.6 var(--ct-font-mono);
    color: var(--m-tertiary);
  }

  /* Capability ledger 01–06 */
  .capability-ledger {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--m-hairline);
  }

  .capability-ledger article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--m-hairline);
  }

  .capability-ledger article:last-child { border-bottom: 0; }

  .capability-ledger article > span,
  .capability-ledger article > .capability-index {
    grid-row: 1 / span 2;
    font: 500 11px/1.7 var(--ct-font-mono);
    color: var(--m-green-mid);
  }

  .capability-ledger h3 {
    margin: 0 0 3px;
    font: 600 17px/1.25 var(--ct-font-display);
  }

  .capability-ledger p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--m-muted);
  }

  /* Warm platform panel */
  .platform-status {
    padding: 16px;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: var(--m-warm);
  }

  .platform-status > p {
    margin: 0 0 10px;
  }

  .platform-status > p strong {
    font: 600 16px/1.3 var(--ct-font-display);
  }

  .platform-status dl {
    display: flex;
    margin: 0;
    flex-direction: column;
    gap: 0;
  }

  .platform-status dl > div {
    padding: 10px 0;
    border-top: 1px solid #ddd8cc;
  }

  .platform-status dt {
    font: 500 11px/1.5 var(--ct-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--m-tertiary);
  }

  .platform-status dd {
    margin: 3px 0 0;
    font-size: 15px;
    line-height: 1.5;
  }

  /* Showcase rail */
  .showcase-strip {
    display: flex;
    gap: 12px;
    padding: 4px var(--m-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .showcase-strip::-webkit-scrollbar { height: 0; }

  .showcase-card {
    flex: 0 0 296px;
    scroll-snap-align: center;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
  }

  .showcase-card__media {
    padding: 12px 13px;
    background: var(--m-warm);
  }

  .showcase-card__body {
    padding: 13px;
    border-top: 1px solid var(--m-hairline);
  }

  .showcase-card__tier {
    display: block;
    margin-bottom: 6px;
    font: 500 11px/1.4 var(--ct-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--m-green-mid);
  }

  .showcase-card h3 {
    margin: 0 0 5px;
    font: 600 18px/1.25 var(--ct-font-display);
  }

  .showcase-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--m-muted);
  }

  /* Redrawn setup surface inside a showcase card's warm well. */
  .m-setup {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 11px;
    border: 1px solid var(--m-hairline);
    border-radius: 6px;
    background: #fff;
  }

  .showcase-lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0 var(--m-gutter);
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--m-muted);
  }

  .showcase-lead p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--m-muted);
  }

  .showcase-lead strong { color: var(--m-ink); }

  .showcase-lead .button { width: 100%; }

  /* Price preview: the phone version runs this section on paper, not on the
     desktop ink band, so the amount and its unit stay one nowrap line. */
  .price-preview {
    padding-bottom: 32px;
    background: var(--m-paper);
    color: var(--m-ink);
  }

  .price-preview h2 { color: var(--m-ink); }

  .price-preview .eyebrow {
    color: var(--m-green-deep);
    opacity: 1;
  }

  .price-preview p { color: var(--m-muted); }

  .price-callout {
    display: block;
    padding: 16px;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: #fff;
    text-align: left;
  }

  .price-callout > span {
    display: block;
    font: 500 11px/1.4 var(--ct-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--m-muted);
  }

  .price-callout > strong {
    display: inline-block;
    margin: 8px 6px 0 0;
    color: var(--m-ink);
    font: 700 40px/1 var(--ct-font-display);
    letter-spacing: -.035em;
    white-space: nowrap;
  }

  .price-callout > small {
    margin-bottom: 0;
    font: 400 12px/1.4 var(--ct-font-mono);
    color: var(--m-muted);
    white-space: nowrap;
  }

  .price-callout .text-link {
    display: flex;
    margin-top: 8px;
    color: var(--m-ink-strong);
  }

  .boundary-line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top-color: var(--m-hairline);
    color: var(--m-muted);
    font: 400 15px/1.55 var(--ct-font-text);
  }

  .boundary-line strong,
  .boundary-line .text-link {
    color: var(--m-ink);
  }

  .boundary-line p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--m-muted);
  }

  /* Founder */
  .founder-preview__grid figure,
  .founder-grid figure {
    margin: 0;
  }

  .founder-preview__grid img,
  .founder-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  /* Founding band */
  .founding-band {
    padding: 34px 0;
    background: var(--m-dark);
    color: var(--m-dark-ink);
  }

  .founding-band .eyebrow { color: var(--m-green-bright); }

  .founding-band h2 { color: #fff; }

  .founding-band p { color: var(--m-dark-body); }

  .founding-card {
    padding: 16px;
    border: 1px solid var(--m-dark-rule);
    border-radius: 8px;
    background: rgba(234, 244, 236, .05);
  }

  .founding-card .button {
    background: var(--m-green-bright);
    border-color: var(--m-green-bright);
    color: #162119;
    box-shadow: none;
  }

  /* FAQ */
  .page-refresh .faq-list summary {
    min-height: 56px;
    padding: 12px 0;
    font: 600 16.5px/1.3 var(--ct-font-display);
  }

  .faq-list summary span {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--m-rule);
    border-radius: 50%;
    transition: transform .18s var(--m-ease);
  }

  .faq-list summary span::before {
    content: "+";
    color: var(--m-green-deep);
    font: 400 16px/1 var(--ct-font-mono);
  }

  .faq-list details[open] summary span {
    transform: rotate(45deg);
  }

  .faq-list details[open] summary span::before {
    content: "+";
  }

  .page-refresh .faq-list details p {
    max-width: none;
    padding: 0 0 16px;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--m-muted);
  }

  /* Final CTA. The mockup runs this section on paper: #61ED6A is reserved for
     the mark, chips and on-dark accents (master prompt §1.6), so the phone
     version carries the same copy with the standard green primary button. */
  .refresh-final {
    padding: 34px 0 40px;
    border-top: 1px solid var(--m-rule);
    background: var(--m-paper);
    color: var(--m-ink);
  }

  .refresh-final h2 { color: var(--m-ink); }

  .refresh-final .eyebrow { color: var(--m-green-deep); }

  .refresh-final p { color: var(--m-muted); }

  .refresh-final__inner {
    align-items: stretch;
    text-align: left;
  }

  .refresh-final__inner > div:first-child > * + * {
    margin-top: 12px;
  }

  /* Route themes tint the desktop final band; on paper the phone version uses
     the standard green primary, as the mockups do. */
  .refresh-final .button {
    border-color: var(--m-green-deep);
    background: var(--m-green-deep);
    color: #fff;
  }

  .refresh-final .button:active {
    border-color: var(--m-green-press);
    background: var(--m-green-press);
  }

  /* ====================================================================
     S · Editorial stories — clubs, programs, onboarding
     ==================================================================== */

  .page-hero {
    padding: 26px 0 32px;
    overflow: visible;
    background: var(--m-paper);
  }

  .page-hero__aside {
    padding: 14px;
    border: 1px solid var(--m-rule);
    border-left: 3px solid var(--m-green-mid);
    border-radius: 8px;
    background: #fff;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--m-muted);
  }

  .page-hero__aside strong {
    display: block;
    margin-bottom: 6px;
    font: 600 16px/1.3 var(--ct-font-display);
    color: var(--m-ink);
  }

  .editorial-grid > aside {
    padding: 0 0 0 14px;
    border-left: 2px solid var(--m-green-mid);
  }

  .editorial-grid > aside p:last-child {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--m-muted);
  }

  .editorial-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .editorial-copy > * { margin: 0; }

  .editorial-copy > h2 {
    margin-top: 10px;
  }

  .editorial-copy > h2:first-child { margin-top: 0; }

  .editorial-copy > p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--m-muted);
  }

  /* Any inline capture figure becomes a redrawn-card shell. */
  .page-image {
    display: block;
    margin: 0;
    border: 1px solid var(--m-hairline);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--m-shadow);
  }

  .page-image > figcaption,
  .club-story__visual > figcaption {
    margin: 0;
    padding: 9px 12px;
    border-top: 1px solid var(--m-hairline);
    font: 400 11.5px/1.5 var(--ct-font-mono);
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-tertiary);
    text-align: left;
  }

  .cancellation-outcomes {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ====================================================================
     T · Club / program story blocks
     ==================================================================== */

  .club-stories,
  .program-stories {
    padding: 32px 0;
  }

  .club-stories__head,
  .program-stories__head {
    display: flex;
    margin-bottom: 20px;
    flex-direction: column;
    gap: 14px;
  }

  .club-stories__head h2,
  .program-stories__head h2 {
    font-size: 27px;
    line-height: 1.1;
  }

  .club-story-list,
  .program-story-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .club-story,
  .program-story {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    padding: 24px 0 0;
    border-top: 1px solid var(--m-hairline);
  }

  .club-story:first-child,
  .program-story:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .club-story__copy,
  .program-story__copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .club-story__copy > *,
  .program-story__copy > * { margin: 0; }

  .club-story__number,
  .program-story__number {
    font: 500 11px/1.4 var(--ct-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-green-mid);
  }

  .club-story h3,
  .program-story h3 {
    font: 600 22px/1.18 var(--ct-font-display);
    letter-spacing: -.025em;
  }

  .club-story__copy > p,
  .program-story__copy > p {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--m-muted);
  }

  .club-story__beats,
  .program-story__beats {
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 0;
    list-style: none;
    counter-reset: none;
  }

  .club-story__beats li,
  .program-story__beats li {
    display: flex;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--m-hairline);
    font-size: 15px;
    line-height: 1.5;
    color: var(--m-muted);
  }

  .club-story__beats li:last-child,
  .program-story__beats li:last-child {
    border-bottom: 0;
  }

  .club-story__beats li::before,
  .program-story__beats li::before {
    content: none;
  }

  .club-story__beats span,
  .program-story__beats span {
    flex: 0 0 74px;
    font: 500 11px/1.5 var(--ct-font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--m-tertiary);
  }

  .club-story__visual,
  .program-story__visual {
    display: block;
    margin: 0;
    border: 1px solid var(--m-hairline);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
  }

  .club-story__visual figcaption span,
  .club-story__visual figcaption strong {
    display: block;
  }

  .club-story__visual figcaption strong {
    color: var(--m-muted);
    font-weight: 400;
  }

  /* Proof duo -> two-card snap rail */
  .club-proof-duo,
  .program-proof-rail {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--m-gutter) * -1);
    padding: 2px var(--m-gutter) 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .club-proof-duo::-webkit-scrollbar,
  .program-proof-rail::-webkit-scrollbar { height: 0; }

  .club-proof-duo > figure,
  .program-proof-rail > figure {
    flex: 0 0 292px;
    scroll-snap-align: center;
    margin: 0;
    border: 1px solid var(--m-hairline);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
  }

  .club-proof-duo > figure > figcaption,
  .program-proof-rail > figure > figcaption {
    padding: 9px 12px;
    border-top: 1px solid var(--m-hairline);
    font: 400 11.5px/1.5 var(--ct-font-mono);
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-tertiary);
    text-align: left;
  }

  .club-proof-duo__arrow,
  .program-proof__arrow {
    display: none;
  }

  /* Programs story proofs: one snap rail per story, phones shown whole. */
  .program-proof {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-inline: calc(var(--m-gutter) * -1);
    padding: 2px var(--m-gutter) 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .program-proof::-webkit-scrollbar { height: 0; }

  .program-proof > figure {
    flex: 0 0 auto;
    scroll-snap-align: center;
    margin: 0;
    border: 0;
    background: none;
    overflow: visible;
  }

  /* The 620px sheet pins these with !important for its stacked layout; the
     rail needs its own card pitch, so the override matches that weight. */
  .program-proof > figure.program-proof__phone {
    width: 176px !important;
    min-height: 0;
    justify-self: auto;
  }

  /* The before/after calendar pair are two rail cards, not one grid child. */
  .program-calendar-shift,
  .program-proof > .program-calendar-shift {
    display: contents;
  }

  .program-proof > .program-calendar-shift > figure {
    flex: 0 0 236px;
    scroll-snap-align: center;
    margin: 0;
    border: 1px solid var(--m-hairline);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
  }

  .program-proof > .program-calendar-shift > figure > img {
    width: 100%;
    height: auto;
  }

  .program-proof > .program-calendar-shift > figure > figcaption {
    padding: 9px 12px;
    border-top: 1px solid var(--m-hairline);
    font: 400 11.5px/1.5 var(--ct-font-mono);
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-tertiary);
    text-align: left;
  }

  .program-proof__phone img {
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    box-shadow: none;
  }

  .program-proof > figure.program-proof__wide {
    width: 292px !important;
    min-height: 0;
    border: 1px solid var(--m-hairline) !important;
    border-radius: 6px;
    background: #fff !important;
    overflow: hidden !important;
  }

  .program-proof__wide img {
    width: 100%;
    height: auto;
  }

  .program-proof > figure > figcaption {
    padding: 8px 2px 0;
    border: 0;
    font: 400 11.5px/1.5 var(--ct-font-mono);
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-tertiary);
    text-align: center;
  }

  .program-proof__wide > figcaption {
    padding: 9px 12px;
    border-top: 1px solid var(--m-hairline);
    text-align: left;
  }

  /* ====================================================================
     V · product — role rail
     ==================================================================== */

  .role-proof-grid {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 2px var(--m-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .role-proof-grid::-webkit-scrollbar { height: 0; }

  .role-proof-grid > figure {
    flex: 0 0 292px;
    scroll-snap-align: center;
    margin: 0;
    border: 1px solid var(--m-hairline);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
  }

  /* The 620px sheet pins a phone aspect ratio on these wells; the rail sizes
     from the baked asset instead so no device is padded or cut. */
  .role-proof-grid > figure > div,
  .role-proof-grid figure:not(:first-child) > div {
    display: flex;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    justify-content: center;
    padding: 0;
    background: none;
    overflow: visible;
  }

  /* Baked native captures are shown whole, never cut mid-device. */
  .role-proof-grid > figure > div > img {
    width: auto;
    max-width: 100%;
    max-height: 340px;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
  }

  .role-proof-grid > figure > figcaption {
    padding: 9px 12px;
    border-top: 1px solid var(--m-hairline);
    font: 400 11.5px/1.5 var(--ct-font-mono);
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-tertiary);
    text-align: left;
  }

  .spotlight--reverse .spotlight__media { order: 2; }

  /* ====================================================================
     U · Plan cards
     ==================================================================== */

  .pricing-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pricing-card {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: #fff;
  }

  .pricing-card > * { margin: 0; }

  .pricing-card > span:first-child {
    font: 500 11px/1.4 var(--ct-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--m-muted);
  }

  .pricing-card h3 {
    font: 600 20px/1.2 var(--ct-font-display);
    letter-spacing: -.02em;
  }

  .pricing-amount {
    font: 700 32px/1 var(--ct-font-display);
    letter-spacing: -.03em;
    white-space: nowrap;
  }

  .pricing-amount small {
    font: 400 12px/1.4 var(--ct-font-mono);
    color: var(--m-muted);
    white-space: nowrap;
  }

  .pricing-card ul {
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 6px;
    list-style: none;
  }

  .pricing-card ul li {
    position: relative;
    padding: 0 0 0 18px;
    border: 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--m-ink);
  }

  .pricing-card ul li::before {
    position: absolute;
    left: 0;
    content: "→";
    color: var(--m-green-mid);
    font: 400 14px/1.5 var(--ct-font-mono);
  }

  .pricing-card ul li::marker {
    content: "";
  }

  .pricing-card .button,
  .pricing-card .text-link {
    margin-top: auto;
  }

  .pricing-card__shot {
    display: block;
    margin: 4px 0;
    border: 1px solid var(--m-hairline);
    border-radius: 6px;
    overflow: hidden;
  }

  .pricing-card__shot figcaption {
    padding: 8px 11px;
    border-top: 1px solid var(--m-hairline);
    font: 400 11.5px/1.5 var(--ct-font-mono);
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-tertiary);
    text-align: left;
  }

  /* The Managed card is dark on desktop; on paper it reads as a plain card so
     its "From €499 / month + VAT" line stays legible. */
  .pricing-card--managed {
    border-color: var(--m-rule);
    background: #fff;
    color: var(--m-ink);
  }

  .pricing-card--managed h3,
  .pricing-card--managed .pricing-amount,
  .pricing-card--managed .pricing-amount strong {
    color: var(--m-ink);
  }

  .pricing-card--managed > span:first-child { color: var(--m-muted); }

  .pricing-card--managed p,
  .pricing-card--managed li { color: var(--m-muted); }

  .pricing-card--managed .text-link { color: var(--m-ink-strong); }

  .pricing-boundary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: var(--m-warm);
    font-size: 15px;
    line-height: 1.55;
    color: var(--m-muted);
  }

  .pricing-boundary > a,
  .pricing-boundary strong + a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--m-green-deep);
    font: 600 14px/1.4 var(--ct-font-display);
    text-decoration: underline;
    text-decoration-color: var(--m-green-mid);
    text-underline-offset: 6px;
  }

  .pricing-start-row {
    margin-top: 14px;
  }

  .club-final-card__price,
  .program-final-card__price {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--m-ink-strong);
    font: 600 14px/1.4 var(--ct-font-display);
    text-decoration: underline;
    text-decoration-color: var(--m-green-mid);
    text-underline-offset: 6px;
  }

  /* Final band with the walkthrough card */
  .club-final-card,
  .program-final-card {
    padding: 16px;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: #fff;
  }

  .refresh-final--clubs .club-final-card,
  .refresh-final--programs .program-final-card {
    background: #fff;
  }

  .club-final-card ol,
  .program-final-card ol {
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 0;
    list-style: none;
  }

  .club-final-card ol li,
  .program-final-card ol li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--m-hairline);
    font-size: 15px;
    line-height: 1.5;
    color: var(--m-muted);
  }

  .club-final-card ol li:last-child,
  .program-final-card ol li:last-child {
    border-bottom: 0;
  }

  /* ====================================================================
     W · product-tour
     ==================================================================== */

  .hero {
    padding: 26px 0 32px;
  }

  .page-legacy .section,
  .page-legacy .section--surface {
    padding-block: 32px;
  }

  .week-entry,
  .week-entry--scrolly {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 0 0;
    border-top: 1px solid var(--m-hairline);
  }

  .week-entry:first-of-type {
    padding-top: 0;
    border-top: 0;
  }

  .story-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .story-head > * { margin: 0; }

  .week-kicker {
    font: 500 11px/1.4 var(--ct-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-green-mid);
  }

  .week-kicker span { color: inherit; }

  .story-head h3 {
    font: 600 22px/1.18 var(--ct-font-display);
    letter-spacing: -.025em;
  }

  .story-head p:last-child {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--m-muted);
  }

  /* The stepper's own chrome */
  .m-stepper__texts {
    display: block;
  }

  .m-stepper__text {
    display: none;
  }

  .m-stepper__text.is-active {
    display: block;
  }

  .m-stepper__exhibit--card {
    width: 100%;
  }

  .m-stepper__exhibit--card.is-active {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .m-zoom--inset {
    border: 1px solid var(--m-hairline);
    border-radius: 6px;
  }

  .m-exhibit-caption {
    display: block;
    margin: 0;
    font: 400 11.5px/1.5 var(--ct-font-mono);
    color: var(--m-tertiary);
  }

  .m-stepper__foot {
    margin-top: 0;
    background: var(--m-paper);
  }

  /* Boundary notes that follow a situation */
  .week-entry > p:last-child {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--m-hairline);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--m-muted);
  }

  /* site.js appends a live-region paragraph per scrolly story; the phone
     version's stepper owns that announcement instead. */
  .scrolly-detail {
    display: none;
  }

  /* The legacy tour turns these into snap rails at 620px, but without a
     counter or dots. The mockup stacks them, which also keeps every row
     reachable without horizontal movement. */
  .page-product-tour .spec-rail,
  .page-product-tour .seam-grid,
  .page-product-tour .role-grid,
  .page-product-tour .tier-cards,
  .tier-cards {
    display: flex;
    grid-auto-flow: row;
    grid-template-columns: none;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .terms-card--tier {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: #fff;
  }

  .terms-card--featured {
    border-color: var(--m-green-mid);
  }

  .terms-card--tier .tier-cta .button {
    width: 100%;
  }

  /* The amount and its unit never split across lines. */
  .terms-card__name dd,
  .terms-card__name .price {
    white-space: nowrap;
  }

  /* Hero exhibit and role cards on the tour */
  .browser-frame {
    border: 1px solid var(--m-hairline);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--m-shadow-float);
  }

  .browser-bar {
    padding: 9px 12px;
    border-bottom: 1px solid var(--ct-rule);
    background: #f1f3f5;
  }

  .role-card {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--m-hairline);
    background: none;
  }

  .role-card:last-child { border-bottom: 0; }

  .role-card > img {
    width: auto;
    max-width: 100%;
    max-height: 420px;
    height: auto;
    margin-inline: auto;
    border: 1px solid var(--m-hairline);
    border-radius: 6px;
    object-fit: contain;
  }

  .role-card > figcaption {
    font: 400 11.5px/1.5 var(--ct-font-mono);
    color: var(--m-tertiary);
    text-align: left;
  }

  /* Legacy tour section furniture */
  .spec-rail,
  .seam-grid,
  .money-grid,
  .readiness-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .final-cta {
    padding: 34px 0 40px;
  }

  .final-cta__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .faq-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* ====================================================================
     X · pricing — the "vs Core" lens and the compare switcher
     ==================================================================== */

  .m-lens {
    display: block;
    margin: 4px 0;
    border: 1px solid var(--m-rule);
    border-radius: 8px;
    background: var(--m-paper);
  }

  .m-lens > summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    font: 600 14px/1.3 var(--ct-font-display);
    list-style: none;
    cursor: pointer;
  }

  .m-lens > summary::-webkit-details-marker { display: none; }

  .m-lens__list {
    display: flex;
    margin: 0;
    padding: 0 14px 14px;
    flex-direction: column;
    gap: 7px;
    list-style: none;
  }

  .m-lens__list li {
    position: relative;
    padding-left: 18px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--m-ink);
  }

  .m-lens__list li::before {
    position: absolute;
    left: 0;
    content: "+";
    color: var(--m-green-mid);
    font: 400 14px/1.5 var(--ct-font-mono);
  }

  .m-lens__note {
    color: var(--m-tertiary);
    font: 400 12.5px/1.5 var(--ct-font-mono);
  }

  /* Sticky dark strip pinned under the 56pt bar (MOTION-NOTES §8). */
  .m-compare {
    display: block;
    position: sticky;
    z-index: 20;
    top: 57px;
    margin-inline: calc(var(--m-gutter) * -1);
    padding: 10px var(--m-gutter) 8px;
    background: var(--m-dark);
    color: var(--m-dark-ink);
  }

  .m-compare__chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .m-compare__chips::-webkit-scrollbar { height: 0; }

  .m-plan-chip {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(234, 244, 236, .28);
    border-radius: 999px;
    background: transparent;
    color: var(--m-dark-body);
    font: 500 12px/1 var(--ct-font-mono);
    white-space: nowrap;
    cursor: pointer;
  }

  .m-plan-chip[aria-pressed="true"] {
    border-color: var(--m-green-bright);
    background: var(--m-green-bright);
    color: #162119;
  }

  .m-compare__plan {
    display: flex;
    margin: 8px 0 0;
    align-items: baseline;
    gap: 8px;
    font: 400 11.5px/1.5 var(--ct-font-mono);
    color: var(--m-dark-caption);
  }

  .m-compare__plan strong {
    font: 600 13px/1.4 var(--ct-font-display);
    color: #fff;
  }

  .m-compare__plan span { white-space: nowrap; }

  .m-compare__note {
    display: block;
    margin: 12px 0 0;
    font: 400 11.5px/1.5 var(--ct-font-mono);
    color: var(--m-tertiary);
  }

  /* One value column at a time. Server-rendered on Start Core, so a visitor
     without JS still reads a complete column. */
  .compare-wrap {
    overflow: visible;
  }

  /* The desktop table reserves 720px for four value columns; with one column
     it fits the gutter, so the horizontal scroller is retired. */
  .compare-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: auto;
  }

  .compare-table thead th:first-child {
    display: none;
  }

  .compare-table[data-plan="core"] th:nth-child(n + 3),
  .compare-table[data-plan="core"] td:not(:nth-child(2)),
  .compare-table[data-plan="plus"] th:nth-child(2),
  .compare-table[data-plan="plus"] th:nth-child(n + 4),
  .compare-table[data-plan="plus"] td:not(:nth-child(3)),
  .compare-table[data-plan="complete"] th:nth-child(-n + 3):not(:first-child),
  .compare-table[data-plan="complete"] th:nth-child(5),
  .compare-table[data-plan="complete"] td:not(:nth-child(4)),
  .compare-table[data-plan="managed"] th:nth-child(-n + 4):not(:first-child),
  .compare-table[data-plan="managed"] td:not(:nth-child(5)) {
    display: none;
  }

  .compare-table thead {
    display: none;
  }

  .compare-table th,
  .compare-table td {
    border: 0;
    background: none;
  }

  .compare-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid var(--m-hairline);
  }

  .compare-table tbody th[scope="row"] {
    padding: 0;
    font: 400 15px/1.45 var(--ct-font-text);
    color: var(--m-ink);
    text-align: left;
  }

  .compare-table tbody th[scope="row"] small {
    display: block;
    font: 400 11.5px/1.5 var(--ct-font-mono);
    color: var(--m-tertiary);
  }

  .compare-table td {
    padding: 0;
    font: 500 14px/1.45 var(--ct-font-mono);
    color: var(--m-ink);
    text-align: right;
  }

  .compare-table td small {
    display: block;
    font: 400 11px/1.4 var(--ct-font-mono);
    color: var(--m-tertiary);
  }

  .compare-table .compare-yes {
    color: var(--m-green-deep);
    font-size: 16px;
  }

  .compare-table .compare-no {
    color: var(--m-tertiary);
  }

  .compare-table .compare-group {
    display: block;
    margin-top: 18px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--m-ink-strong);
  }

  .compare-table .compare-group th {
    display: block;
    padding: 0;
    font: 600 11px/1.4 var(--ct-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--m-ink-strong);
    text-align: left;
  }

  /* ====================================================================
     Y · onboarding — the numbered spine and the theming rail
     ==================================================================== */

  /* Stages 1–4 share one numbered spine: a hairline with ink number discs. */
  .route-theme--managed .editorial-copy {
    position: relative;
    padding-left: 34px;
    counter-reset: m-stage;
  }

  .route-theme--managed .editorial-copy::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 13px;
    width: 1px;
    background: var(--m-hairline);
  }

  .route-theme--managed .editorial-copy > h2 {
    position: relative;
  }

  /* The live headings already read "1 · …", so the spine carries an ink node
     rather than a second numeral. Deviation from the mockup, which numbers
     only the disc; live copy wins over the mockup. */
  .route-theme--managed .editorial-copy > h2::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -27px;
    width: 13px;
    height: 13px;
    border: 3px solid var(--m-paper);
    border-radius: 50%;
    background: var(--m-ink-strong);
  }

  /* Four themed exhibits, one per swipe, each accent distinct at card size. */
  .theming-grid {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-inline: calc(var(--m-gutter) * -1);
    padding: 2px var(--m-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .theming-grid::-webkit-scrollbar { height: 0; }

  .theming-card {
    flex: 0 0 292px;
    scroll-snap-align: center;
    margin: 0;
    border: 1px solid var(--m-hairline);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
  }

  .theming-card > figcaption {
    display: block;
    padding: 9px 12px;
    border-top: 1px solid var(--m-hairline);
    text-align: left;
  }

  .theming-card figcaption strong {
    display: block;
    font: 600 15px/1.3 var(--ct-font-display);
  }

  .theming-card figcaption span {
    display: block;
    margin-top: 2px;
    font: 400 11.5px/1.5 var(--ct-font-mono);
    color: var(--m-tertiary);
  }

  .theming-card figcaption em {
    display: block;
    margin-top: 4px;
    font: 500 10px/1.5 var(--ct-font-mono);
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--m-tertiary);
  }

  /* ====================================================================
     Z · about
     ==================================================================== */

  .craft-band {
    padding: 34px 0;
    background: var(--m-dark);
    color: var(--m-dark-ink);
  }

  .craft-band .eyebrow { color: var(--m-green-bright); }

  .craft-band h2 { color: #fff; }

  .craft-band p { color: var(--m-dark-body); }

  .craft-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
  }

  .craft-platforms span {
    display: inline-flex;
    padding: 7px 12px;
    border: 1px solid var(--m-dark-rule);
    border-radius: 999px;
    font: 500 11px/1.3 var(--ct-font-mono);
    letter-spacing: .06em;
    color: var(--m-dark-ink);
  }

  .craft-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .craft-grid article {
    padding: 14px 0;
    border-bottom: 1px solid var(--m-dark-rule);
  }

  .craft-grid article:last-child { border-bottom: 0; }

  .craft-grid h3 {
    margin: 0 0 4px;
    font: 600 17px/1.3 var(--ct-font-display);
    color: #fff;
  }

  .craft-grid p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--m-dark-body);
  }

  /* An inline link inside a sentence must not rely on colour alone. */
  .craft-band a:not(.button) {
    color: var(--m-dark-ink);
    text-decoration: underline;
    text-decoration-color: var(--m-green-bright);
    text-underline-offset: 5px;
  }

  /* Dossier: six accordion groups, each summary naming its entry count. */
  .dossier-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--m-hairline);
  }

  .dossier-group {
    padding: 0;
    border: 0;
  }

  .m-accordion--dossier > summary {
    padding: 12px 0;
  }

  .m-accordion--dossier dl {
    display: flex;
    margin: 0;
    padding: 0 0 14px;
    flex-direction: column;
    gap: 0;
  }

  .m-accordion--dossier dl > div {
    padding: 11px 0;
    border-top: 1px solid var(--m-hairline);
  }

  .m-accordion--dossier dt {
    font: 600 14px/1.4 var(--ct-font-display);
    color: var(--m-ink);
  }

  .m-accordion--dossier dd {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--m-muted);
  }

  /* ====================================================================
     AA · privacy — bar, h1, four sections, footer. No extras.
     ==================================================================== */

  .privacy-main {
    padding-block: 0;
  }

  .privacy-copy {
    display: flex;
    max-width: none;
    flex-direction: column;
    gap: 14px;
  }

  .privacy-copy > * { margin: 0; }

  .page-privacy h1 {
    margin: 0;
    font: 700 32px/1.06 var(--ct-font-display);
    letter-spacing: -.032em;
  }

  .privacy-copy h2 {
    margin: 14px 0 0;
    font: 600 21px/1.2 var(--ct-font-display);
    letter-spacing: -.022em;
  }

  .privacy-copy p {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--m-muted);
  }

  /* An inline link inside a sentence must not rely on colour alone. */
  .privacy-copy p a {
    color: var(--m-green-deep);
    text-decoration: underline;
    text-decoration-color: var(--m-green-mid);
    text-underline-offset: 4px;
  }

  /* ====================================================================
     P · Reduced motion
     ==================================================================== */

  @media (prefers-reduced-motion: reduce) {
    .nav-shell.is-open,
    .nav-shell.is-open .main-nav,
    .nav-shell.is-open .nav-actions,
    .m-zoom-overlay,
    .m-zoom-overlay__image,
    .m-stepper__exhibit.is-active {
      animation: none !important;
    }

    .m-plus,
    .nav-toggle i {
      transition: none !important;
    }

    .button:active,
    .text-link:active,
    .m-zoom:active,
    .m-step-chip:active,
    .m-step-nav:active,
    .workflow-card:active,
    .solution-route:active,
    .showcase-card:active,
    .m-rail > *:active {
      transform: none;
    }
  }
}