/* ==========================================================================
   Delphic mobile experience
   Authoritative mobile composition for the landing, Knowledge Index and AOs.
   Loaded after the desktop component styles so mobile has one explicit owner
   instead of accumulating fixes inside the 1440px canvas rules.
   ========================================================================== */

@media (max-width: 900px) {
  :root {
    --m-page-gutter: 20px;
    --m-reading-inset: 12px;
    --m-reading-width: 334px;
    --m-title-size: 20px;
    --m-title-leading: 1.42;
    --m-body-size: 14px;
    --m-body-leading: 23px;
    --m-label-size: 13px;
    --m-meta-size: 10px;
    --m-control-size: 16px;
    --m-space-1: 4px;
    --m-space-2: 8px;
    --m-space-3: 12px;
    --m-space-4: 16px;
    --m-space-5: 24px;
    --m-space-6: 32px;
    --m-space-7: 48px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  /* Shared mobile header -------------------------------------------------- */
  .sticky-header.hdr,
  .site-header.sticky-header {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 84px !important;
    overflow: visible;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hdr > .sheet,
  .site-header__frame {
    width: 100%;
    height: 84px !important;
    padding: 20px var(--m-page-gutter) 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hdr .brand,
  .site-header__brand {
    position: static;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }

  .hdr .brand img,
  .site-header__brand img {
    width: 28px;
    height: 22px;
  }

  .hdr .brand .wordmark-g,
  .site-header__wordmark {
    font-size: 19px;
    letter-spacing: 0.16em;
  }

  .hdr .nav-row,
  .site-header__nav { display: none; }

  /* Hero ------------------------------------------------------------------ */
  .hero {
    position: relative;
    height: 678px;
    min-height: 678px;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
  }

  .hero .hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("media/hero-gate-mobile-figma.png");
    background-repeat: no-repeat;
    background-position: 50% -8px;
    background-size: min(129.1vw, 504px) auto;
    opacity: 0.14;
    filter: grayscale(1) contrast(0.96) brightness(1.04);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
    pointer-events: none;
    z-index: 0;
  }

  .hero .hero-media::after { content: none; }

  .hero .hero-img { display: none; }

  .hero .sheet {
    position: relative;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    padding: 61px 18px max(64px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    z-index: 1;
  }

  .hero .hero-title,
  .hero.hero-alt .hero-title,
  .hero:has(.concept-link:is(:hover, :focus-visible)) .hero-title {
    position: static;
    width: min(100%, 346px);
    margin: 0 auto;
    padding: 0;
    color: #080808;
    background: none;
    font-family: var(--serif);
    font-size: 35.88px;
    font-weight: 400;
    line-height: 37.495px;
    letter-spacing: -0.6458px;
    text-wrap: normal;
    transform: none;
  }

  .hero .hero-title .l { display: block; }
  .hero .hero-title .l:last-child { font-weight: 700; }

  .hero .hero-subtitle,
  .hero.hero-alt .hero-subtitle,
  .hero:has(.concept-link:is(:hover, :focus-visible)) .hero-subtitle {
    position: static;
    width: min(100%, 327px) !important;
    max-width: 327px !important;
    margin: 16px auto 0;
    padding: 0;
    color: #333;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 23px;
    text-align: center;
    text-wrap: wrap;
    text-wrap-style: auto;
  }

  .hero .hero-actions {
    position: static;
    width: 186px;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .hero .hero-button,
  .hero .hero-index {
    position: relative;
    isolation: isolate;
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    transform: none;
  }

  .hero .hero-button::before,
  .hero .hero-index::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 4.5px 0;
    border-radius: 999px;
  }

  .hero .hero-button {
    width: 138px;
    color: #fff;
  }

  .hero .hero-button::before {
    border: 1px solid #080808;
    background: #080808;
  }

  .hero .hero-index {
    display: inline-flex;
    width: 186px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #111;
    font-family: var(--sans);
  }

  .hero .hero-index::before {
    border: 1px solid #111;
    background: rgba(255,255,255,0.82);
  }

  .hero .hero-index > span {
    width: 9px;
    height: 9px;
    background: #111;
  }

  .hero .hero-button:hover,
  .hero .hero-button:active,
  .hero .hero-index:hover,
  .hero .hero-index:active { transform: none; }

  .hero .hero-learn {
    position: absolute;
    left: 50%;
    top: min(calc(100svh - 160px), calc(100% - 138px));
    bottom: auto;
    width: 72px;
    min-width: 72px;
    height: 58px;
    padding: 0;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #111;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0;
    text-decoration: none;
    white-space: nowrap;
  }

  .hero .hero-learn::before {
    content: "SCROLL";
    color: #555;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;
  }

  .hero .hero-learn::after {
    content: "↓";
    width: 30px;
    height: 30px;
    margin: 0;
    border: 1px solid rgba(17, 17, 17, 0.72);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    color: #111;
    display: grid;
    place-items: center;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1;
    animation: mobile-hero-scroll-cue 1800ms cubic-bezier(0.42, 0, 0.3, 1) infinite;
  }

  .hero .hero-learn:hover { transform: translateX(-50%); }
  .hero .hero-learn:hover::after,
  .hero .hero-learn:focus-visible::after {
    border-color: #111;
    background: #111;
    color: #fff;
  }

  .hero .hero-learn:focus-visible {
    border-radius: 4px;
    outline: 2px solid #111;
    outline-offset: 4px;
  }

  @keyframes mobile-hero-scroll-cue {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
  }

  /* Shared mobile act composition. Tall portrait screens promote this into a
     pinned two-screen chapter below; compact-height devices retain the same
     content order in normal flow. */
  .sp-chapter,
  .sp-chapter.is-sp-mobile,
  .sp-chapter.is-sp-enhanced.is-sp-mobile {
    position: relative;
    display: block;
    height: 1279px;
    overflow: hidden;
    background: linear-gradient(180deg,
      #fff 0%,
      #fff 5.7692%,
      #f1f1ef 27.404%,
      #cacac6 51.442%,
      #979794 60.577%,
      #656563 71.231%,
      #626261 71.383%,
      #434342 78.605%,
      #222221 86.538%,
      #000 93.269%,
      #000 100%);
  }

  .sp-stage,
  .is-sp-enhanced .sp-stage,
  .is-sp-mobile .sp-stage {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: 1279px;
    overflow: hidden;
    isolation: isolate;
  }

  .sp-bg,
  .is-sp-enhanced .sp-bg,
  .is-sp-mobile .sp-bg { display: none; }

  .sp-fragment { position: absolute; width: 0; height: 0; }
  .sp-fragment-shift { top: 0; }
  .sp-fragment-problem { top: 560px; }

  .sp-act,
  .is-sp-enhanced .sp-act,
  .is-sp-mobile .sp-act {
    position: absolute;
    inset-inline: 0;
    width: 100%;
    min-height: 0;
    display: block;
    overflow: visible;
    background: transparent;
    opacity: 1;
    transform: none;
  }

  .sp-shift,
  .is-sp-enhanced .sp-shift,
  .is-sp-mobile .sp-shift {
    top: 0;
    height: 560px;
  }

  .sp-problem,
  .is-sp-enhanced .sp-problem,
  .is-sp-mobile .sp-problem {
    top: 560px;
    height: 719px;
  }

  .sp-act > .sheet {
    position: relative;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: block;
    text-align: left;
  }

  .sp-act > .sheet > .sp-copy { display: contents; }

  .sp-copy .label-row-s {
    position: absolute;
    left: 28px;
    display: flex;
    justify-content: flex-start;
    gap: 10.2px;
    margin: 0;
    transform: none;
  }

  .sp-shift .label-row-s { top: 74px; }
  .sp-problem .label-row-s { top: 72px; }

  .sp-copy .label-row-s .ld {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
  }

  .sp-copy .label-row-s .lt {
    font-size: 13px;
    line-height: 15px;
  }

  .sp-copy h2 {
    position: absolute;
    left: 28px;
    width: calc(100% - 56px);
    margin: 0;
    font: 400 20px/33.158px var(--serif);
    text-align: left;
    text-wrap: normal;
    transform: none;
  }

  .sp-copy h2 br { display: none; }
  .sp-shift h2 {
    top: 108px;
    width: calc(100% - 56px);
  }
  .sp-problem h2 { top: 106px; }

  .sp-shift .shift-body-open {
    position: absolute;
    display: block;
    left: 28px;
    top: 200px;
    width: calc(100% - 56px);
    margin: 0;
    color: #383737;
    font: 400 14px/24px var(--sans);
    text-align: left;
    text-wrap: wrap;
    text-wrap-style: auto;
    transform: none;
  }

  .sp-shift .shift-body-section {
    position: static;
    inset: auto;
    width: auto;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
    transform: none;
  }

  .sp-shift .shift-body-section:not(.stat-cite):not(.shift-body-close) { display: none; }
  .sp-shift .stat-cite {
    display: inline;
    cursor: default;
  }
  .sp-shift .stat-cite::after { content: " "; }
  .sp-chapter .sp-shift .shift-body-section.shift-body-close {
    position: static;
    display: inline;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #0b0b0b;
    text-align: left !important;
    text-wrap: inherit;
    transform: none;
  }
  .sp-shift .stat-citation,
  .sp-shift .stat-dot { display: none; }
  .sp-shift .shift-stat-lead,
  .sp-shift .shift-stat-number,
  .sp-shift .shift-stat-copy { display: inline; font: inherit; }
  .sp-shift .shift-copy-break { display: none; }

  .sp-act > .sheet > .sp-visual {
    --u: min(0.6730769px, calc((100vw - 40px) / 520));
    --cu: var(--u);
    position: absolute;
    left: 50%;
    width: calc(520 * var(--u));
    height: calc(400 * var(--u));
    margin: 0;
    opacity: 1;
    transform: translateX(-50%);
    transform-origin: center;
    isolation: isolate;
  }

  .sp-shift > .sheet > .sp-visual {
    /* Give the Shift instrument more presence without redrawing any of its
       internal geometry. Every dimension—including its type—continues to
       resolve from --u, so the composition scales as one unit. */
    --u: min(0.75px, calc((100vw - 4px) / 520));
    --cu: var(--u);
    --shift-visible-inset: calc(28px - 50vw + (260 * var(--u)));
    top: 290px;
  }
  .sp-problem > .sheet > .sp-visual { top: 216px; }

  .sp-shift .shift-q-pill::before,
  .sp-shift .shift-sources .dot::after { content: none; }

  .sp-shift .shift-q-pill {
    left: var(--shift-visible-inset);
    top: calc(78 * var(--u));
    width: calc(386 * var(--u));
    height: calc(55 * var(--u));
  }
  .sp-shift .shift-q-pill span {
    font-size: calc(17 * var(--u));
    white-space: nowrap;
  }
  .sp-shift .shift-sourcing {
    right: var(--shift-visible-inset);
    top: calc(212 * var(--u));
    font-size: calc(17 * var(--u));
    line-height: 1.4;
  }
  .sp-shift .shift-sources {
    right: var(--shift-visible-inset);
    top: calc(250 * var(--u));
  }
  .sp-shift .shift-sources .dot {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
    margin-right: calc(5 * var(--u));
    font-size: calc(12 * var(--u));
  }
  .sp-shift .shift-sources .more {
    margin-left: calc(6 * var(--u));
    font-size: calc(12 * var(--u));
  }

  .sp-problem .label-row-s .ld { background: #0b0b0b; }
  .sp-problem .label-row-s .lt,
  .sp-problem h2 { color: #0b0b0b; }

  .sp-problem .surface-field {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(520 * var(--u));
    height: calc(400 * var(--u));
    transform: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,0.72) 61%, transparent 78%);
    mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,0.72) 61%, transparent 78%);
  }
  .sp-problem .surface-field .sf-atom { background: #cdcdcd; }
  .sp-problem .surface-field .sf-atom.below {
    background: rgba(21, 21, 20, calc(0.2 + var(--sf-depth, 0.3) * 0.64));
  }
  .sp-problem .surface-field .sf-atom.lit { background: #fff; }
  .sp-problem .surface-field .sf-atom.cool { background: #cdcdcd; }
  .sp-problem .surface-field .sf-line { background: rgba(255,255,255,0.58); }

  .sp-problem .problem-body {
    display: block;
    position: absolute;
    left: 28px;
    top: 456px;
    width: calc(100% - 56px);
    margin: 0;
    color: #e2e2e2;
    font: 400 14px/24px var(--sans);
    text-align: left;
    text-wrap: wrap;
    text-wrap-style: auto;
    transform: none;
  }
  .sp-problem .problem-body-section {
    position: static;
    display: block;
    width: auto;
    margin: 0;
    text-align: left;
    transform: none;
  }
  .sp-problem .problem-body-section:first-child { display: none; }
  .sp-problem .problem-body-section:nth-child(2) {
    display: block;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }
  .sp-problem .problem-body-wide-copy { display: none; }
  .sp-problem .problem-body-mobile-copy { display: inline; }
  .sp-problem .problem-body-section.problem-body-close {
    display: block;
    margin-top: 24px;
    color: #f2f0ec;
    font: inherit;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: inherit !important;
    letter-spacing: inherit;
    text-align: left;
    text-wrap: inherit;
  }

  /* Tall portrait: Shift and Problem each occupy one composed viewport. The
     chapter supplies a Shift hold, a scroll-scrubbed exchange, and a Problem
     hold; no wheel/touch capture is required on mobile. */
  .sp-chapter.is-sp-enhanced.is-sp-mobile {
      position: relative;
      display: block;
      height: 225svh;
      overflow: visible;
      background: #000;
    }

  .sp-chapter.is-sp-enhanced.is-sp-mobile .sp-stage {
      position: sticky;
      inset: auto;
      top: 0;
      display: block;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      isolation: isolate;
    }

  .sp-chapter.is-sp-enhanced.is-sp-mobile .sp-bg {
      display: block;
      position: absolute;
      inset: 0;
    }

  .sp-chapter.is-sp-enhanced.is-sp-mobile .sp-bg-shift {
      background: linear-gradient(180deg,
        #fff 0%,
        #fff 31%,
        #efefed 58%,
        #c5c5c2 82%,
        #9a9a97 100%);
    }

  .sp-chapter.is-sp-enhanced.is-sp-mobile .sp-bg-problem {
      background: linear-gradient(180deg,
        #d8d8d4 0%,
        #c8c8c4 18%,
        #a8a8a4 34%,
        #777773 46%,
        #444441 56%,
        #1c1c1b 64%,
        #000 71%,
        #000 100%);
      opacity: var(--sp-h, 0);
    }

  .sp-chapter.is-sp-enhanced.is-sp-mobile .sp-fragment-shift { top: 0; }
  .sp-chapter.is-sp-enhanced.is-sp-mobile .sp-fragment-problem {
      top: calc(100% - 100dvh);
    }

  .sp-chapter.is-sp-enhanced.is-sp-mobile .sp-act,
  .sp-chapter.is-sp-enhanced.is-sp-mobile .sp-shift,
  .sp-chapter.is-sp-enhanced.is-sp-mobile .sp-problem {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      min-height: 0;
      overflow: hidden;
      background: transparent;
    }

  .sp-chapter.is-sp-enhanced.is-sp-mobile [data-sp-shift] {
      opacity: var(--sp-shift-opacity, 1);
      transform: translateY(var(--sp-shift-y, 0px));
    }

  .sp-chapter.is-sp-enhanced.is-sp-mobile [data-sp-problem] {
      opacity: var(--sp-problem-opacity, 0);
      transform: translateY(var(--sp-problem-y, 22px));
    }

  .sp-chapter.is-sp-enhanced.is-sp-mobile [data-sp-shift] .sp-visual {
      opacity: var(--sp-shift-visual-opacity, 1);
      transform: translateX(-50%) translateY(var(--sp-shift-visual-y, 0px));
    }

  .sp-chapter.is-sp-enhanced.is-sp-mobile [data-sp-problem] .sp-visual {
      opacity: var(--sp-problem-visual-opacity, 0);
      transform: translateX(-50%) translateY(var(--sp-problem-visual-y, 72px));
  }

  /* Solution -------------------------------------------------------------- */
  .index-prelude,
  .index-prelude > .sheet {
    height: 591px;
    min-height: 591px;
  }

  .index-prelude {
    --solution-progress: 0.5;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #000;
  }

  .index-prelude::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 20px;
    width: calc(100% - 54px);
    height: 550px;
    background: url("media/solution-atom-field-mobile.svg") center / 100% 100% no-repeat;
    pointer-events: none;
  }

  .index-prelude::after {
    content: "";
    position: absolute;
    left: 27px;
    top: calc(20px + var(--solution-progress) * 492px);
    width: calc(100% - 54px);
    height: 58px;
    background-image: url("media/solution-atom-field-mobile.svg");
    background-position: center calc(var(--solution-progress) * -492px);
    background-size: 100% 550px;
    background-repeat: no-repeat;
    filter:
      brightness(8)
      drop-shadow(0 0 0 #e8e5dc)
      drop-shadow(0 0 0 #e8e5dc)
      drop-shadow(0 0 0 #e8e5dc);
    opacity: 1;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.34) 24%, #000 44%, #000 56%, rgba(0,0,0,0.3) 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.34) 24%, #000 44%, #000 56%, rgba(0,0,0,0.3) 78%, transparent 100%);
    pointer-events: none;
  }

  .index-prelude > .sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 591px !important;
    padding: 0;
    display: block;
  }

  .index-prelude > .sheet > .ix-prelude-copy {
    position: absolute;
    left: 28px;
    top: 228px;
    width: calc(100% - 56px);
    margin: 0;
    padding: 0;
    transform: none;
    text-align: left;
    isolation: isolate;
  }

  .index-prelude > .sheet > .ix-prelude-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -28px -18px -34px -18px;
    background: radial-gradient(
      ellipse at 38% 48%,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.78) 48%,
      rgba(0, 0, 0, 0.42) 70%,
      transparent 100%
    );
    filter: blur(10px);
    pointer-events: none;
  }

  .ix-prelude-copy .label-row-s {
    position: relative;
    display: flex;
    justify-content: flex-start;
    gap: 10.2px;
    margin: 0 0 19px;
  }

  .ix-prelude-copy .label-row-s .ld {
    width: 14px;
    height: 14px;
  }

  .ix-prelude-copy .label-row-s .lt {
    font-size: var(--m-label-size);
    line-height: 15px;
  }

  .ix-prelude-copy h2 {
    width: 100%;
    max-width: none;
    margin: 0;
    color: #f2f0ec;
    font-size: 20px;
    line-height: 27.456px;
    text-align: left;
    text-wrap: pretty;
  }

  /* Landing Index --------------------------------------------------------- */
  .index-chapter {
    height: auto;
    min-height: 0;
    overflow-x: clip;
    background: #000;
  }

  .index-chapter .ix-pin {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    background: #000;
  }

  .index-chapter .ix-stage {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
  }

  .index-chapter .ix-atom-pane {
    --ix-mobile-visual-inset: 26px;
    position: sticky;
    z-index: 2;
    left: auto;
    right: auto;
    top: 0;
    width: 100%;
    height: 40svh;
    margin: 0;
    overflow: hidden;
    transform: none;
    background: linear-gradient(180deg,
      #000 0%,
      #000 82%,
      rgba(0,0,0,0.94) 92%,
      rgba(0,0,0,0) 100%);
  }

  .index-chapter .ix-copy-pane {
    position: relative;
    z-index: 1;
    inset: auto;
    margin-top: -40svh;
    padding: 0 var(--m-page-gutter);
    overflow: visible;
    background: #000;
  }

  .index-chapter .ix-slide {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 100svh;
    margin: 0;
    padding: calc(40svh + 24px) 0 40px;
    display: block;
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .index-chapter .ix-slide-copy {
    position: relative;
    top: auto;
    width: min(100%, 350px);
    margin: 0 auto;
    padding: 0;
    background: #000;
    text-align: left;
  }

  .index-chapter .ix-slide small {
    display: block;
    margin: 0 0 var(--m-space-3);
    color: #8e8c86;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: var(--m-meta-size);
    line-height: 14px;
    letter-spacing: 0.2em;
    text-align: left;
    text-transform: uppercase;
  }

  .index-chapter .ix-slide small[data-ix-mobile-label] {
    font-size: 0;
    letter-spacing: 0;
  }

  .index-chapter .ix-slide small[data-ix-mobile-label]::after {
    content: attr(data-ix-mobile-label);
    font-size: var(--m-meta-size);
    line-height: 14px;
    letter-spacing: 0.12em;
    text-transform: none;
  }

  .index-chapter .ix-slide h3 {
    width: 320px;
    max-width: 100%;
    min-height: 0;
    margin: 0 0 var(--m-space-3);
    color: #f2f0ec;
    font-size: var(--m-title-size);
    line-height: var(--m-title-leading);
    text-align: left;
    text-wrap: wrap;
    text-wrap-style: auto;
  }

  .index-chapter .ix-slide h3 br { display: none; }
  .index-chapter .ix-slide h3 .ix-desktop-break { display: none; }
  .index-chapter .ix-slide h3 .ix-word {
    display: inline;
    will-change: auto;
  }

  .index-chapter .ix-slide p {
    max-width: none;
    margin: 0;
    color: #c2bfb8;
    font-size: var(--m-body-size);
    line-height: var(--m-body-leading);
    text-align: left;
    text-wrap: pretty;
  }

  .index-chapter .ix-body-section + .ix-body-section {
    margin-top: var(--m-space-3);
  }

  .index-chapter .ix-slide strong.ix-body-section {
    color: #ebe8e0;
    font-family: var(--sans);
    font-size: var(--m-body-size);
    font-weight: 400;
    line-height: var(--m-body-leading);
    text-wrap: pretty;
  }

  .index-chapter .x-atom {
    background: #292925;
    transition: background-color 90ms linear, filter 90ms linear, box-shadow 90ms linear;
  }

  .index-chapter .x-atom.on {
    filter: brightness(calc(0.74 + var(--ix-mobile-light-energy, 0.4) * 0.66)) contrast(1.14);
  }

  .index-chapter .x-atom.on.shade-1 { background: #4f4d48; }
  .index-chapter .x-atom.on.shade-2 { background: #817e76; }
  .index-chapter .x-atom.on.shade-3 { background: #c9c5ba; }
  .index-chapter .x-atom.on.shade-4 { background: #fffdf6; }

  .index-chapter[data-ix-state="3"] .x-atom.on,
  .index-chapter[data-ix-target="3"] .x-atom.on {
    filter: brightness(calc(0.70 + var(--ix-mobile-light-energy, 0.4) * 0.62)) contrast(1.18);
  }

  /* Tall portrait uses one composed mobile stage. The document remains the
     scroll container; only the scene is sticky. State changes are requested
     by document checkpoints and completed by the same time-based visual
     engine as desktop, so pausing leaves both the copy and the living lattice
     in place without claiming touch input. */
  .index-chapter[data-ix-mobile-mode="pinned"] {
    /* 5.2 screens produce 4.2 screens of sticky travel. The controller's
       0.23 checkpoint pitch therefore lands just under one viewport: still
       one natural swipe, but no longer reactive enough for ordinary momentum
       to jump over an Index stage. */
    height: 520svh;
    min-height: 0;
    overflow: visible;
    overflow-x: clip;
    background: #000;
    touch-action: pan-y pinch-zoom;
  }

  .index-chapter[data-ix-mobile-mode="pinned"][data-ix-pin-phase="active"] {
    /* Vertical touch becomes a semantic one-stage swipe only after the scene
       has reached its canonical fixed pose. Entry and exit remain native;
       horizontal movement and pinch zoom remain available throughout. */
    touch-action: pan-x pinch-zoom;
  }

  .index-chapter[data-ix-mobile-mode="pinned"][data-ix-pin-phase="active"][data-ix-state="5"] {
    /* The managed journey ends here. Preserve semantic reverse navigation,
       but let a forward finger movement continue into the CTA as ordinary
       document scroll rather than another forced landing. */
    touch-action: pan-y pinch-zoom;
  }

  .index-chapter[data-ix-mobile-mode="pinned"] .ix-pin {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    /* svh stays fixed while Safari's address and tab bars collapse. Using
       dvh here made the copy and lattice visibly jump during every toolbar
       resize even though the scene itself was sticky. */
    height: 100svh;
    min-height: 0;
    overflow: hidden;
    background: #000;
  }

  /* iOS Safari can re-resolve a tall sticky layer against the visual
     viewport during a small follow-up swipe, visibly settling it at a second
     top position. The controller therefore owns the three pin phases
     explicitly. The before/fixed/after poses meet at the same coordinates,
     so crossing either chapter boundary remains visually continuous. */
  .index-chapter[data-ix-mobile-mode="pinned"][data-ix-pin-phase="active"] .ix-pin {
    position: fixed;
    top: 0;
    bottom: auto;
  }

  .index-chapter[data-ix-mobile-mode="pinned"][data-ix-pin-phase="after"] .ix-pin {
    top: auto;
    bottom: 0;
  }

  .index-chapter[data-ix-mobile-mode="pinned"] .ix-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .index-chapter[data-ix-mobile-mode="pinned"] .ix-stage::before,
  .index-chapter[data-ix-mobile-mode="pinned"] .ix-stage::after {
    position: absolute;
    left: 50%;
    z-index: 5;
    pointer-events: none;
  }

  .index-chapter[data-ix-mobile-mode="pinned"] .ix-stage::before {
    content: "SWIPE";
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 31px);
    transform: translate(-50%, 0);
    color: #8e8c86;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.18em;
  }

  .index-chapter[data-ix-mobile-mode="pinned"] .ix-stage::after {
    content: "↓";
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 24px;
    height: 24px;
    transform: translateX(-50%);
    border: 1px solid #4a4944;
    border-radius: 50%;
    color: #aaa79f;
    display: grid;
    place-items: center;
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1;
    will-change: transform;
    animation: ix-mobile-scroll-cue 1800ms cubic-bezier(0.42, 0, 0.3, 1) infinite;
  }

  .index-chapter[data-ix-mobile-mode="pinned"][data-ix-state="5"] .ix-stage::before {
    content: "CONTINUE";
  }

  @keyframes ix-mobile-scroll-cue {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 2px); }
  }

  .index-chapter[data-ix-mobile-mode="pinned"] .ix-atom-pane {
    position: absolute;
    z-index: 2;
    inset: 0 0 auto;
    width: 100%;
    height: 40svh;
    margin: 0;
    overflow: hidden;
    transform: none;
    background: linear-gradient(180deg,
      #000 0%,
      #000 82%,
      rgba(0,0,0,0.94) 92%,
      rgba(0,0,0,0) 100%);
  }

  .index-chapter[data-ix-mobile-mode="pinned"] .ix-copy-pane {
    position: absolute;
    z-index: 1;
    inset: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
  }

  .index-chapter[data-ix-mobile-mode="pinned"] .ix-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: calc(40svh + 24px) var(--m-page-gutter) 28px;
    display: block;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: none;
    pointer-events: none;
  }

  .index-chapter[data-ix-mobile-mode="pinned"] .ix-slide.live {
    pointer-events: auto;
  }

  .index-chapter[data-ix-mobile-mode="pinned"] .ix-slide-copy {
    position: relative;
    top: auto;
    width: min(100%, 350px);
    margin: 0 auto;
    padding: 0;
    background: #000;
    text-align: left;
  }

  .index-chapter[data-ix-mobile-mode="pinned"] .ix-slide .ix-word {
    display: inline;
    will-change: auto;
  }

  /* CTA and form ---------------------------------------------------------- */
  .next-steps {
    --cta-release: clamp(350px, 44svh, 390px);
    --rail-pad: var(--m-page-gutter);
    display: flex;
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    overflow: clip;
    background: linear-gradient(180deg,
      #000 0,
      #070707 7svh,
      #202020 14svh,
      #555554 22svh,
      #91918f 29svh,
      #d1d1cf 37svh,
      #f4f4f3 43svh,
      #fff var(--cta-release),
      #fff 100%);
  }

  .next-steps::after { content: none; display: none; }

  .next-steps > .sheet,
  .next-steps:has(.cta-strip[data-driven]) > .sheet {
    position: relative;
    top: auto;
    width: 100%;
    height: auto !important;
    min-height: 0;
    margin: 0;
    padding: calc(var(--cta-release) + 26px) var(--m-page-gutter) 66px;
  }

  .next-steps .ns-copy,
  .next-steps .ns-form {
    position: static;
    width: min(100%, 350px);
    margin-right: auto;
    margin-left: auto;
  }

  .next-steps .ns-copy {
    display: block;
    text-align: left;
  }

  .next-steps .label-row-s {
    position: static;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 var(--m-space-4);
  }

  .next-steps .label-row-s .ld { display: none; }
  .next-steps .label-row-s .lt {
    color: #77756f;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: var(--m-meta-size);
    line-height: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .next-steps h2,
  .next-steps .ns-copy h2 {
    position: static;
    width: 100%;
    margin: 0 0 var(--m-space-4);
    color: #0b0b0b;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    text-wrap: balance;
  }

  .next-steps h2 .cta-heading-line {
    display: block;
    white-space: normal;
  }

  .next-steps h2 .cta-heading-line + .cta-heading-line {
    margin-top: 2px;
  }

  .next-steps h2 .cta-mobile-break { display: none; }

  .next-steps .ns-body {
    position: static;
    width: 100%;
    margin: 0;
    color: #676660;
    font-family: var(--sans);
    font-size: var(--m-body-size);
    line-height: 22px;
    text-align: left;
    text-wrap: pretty;
  }

  .next-steps .ns-form {
    height: auto;
    margin-top: var(--m-space-6);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .next-steps .ns-form .f-inner {
    position: static;
    inset: auto;
    padding: 0;
    display: block;
  }

  .next-steps .ns-fg {
    position: relative;
    display: block;
    margin: 0 0 var(--m-space-3);
  }

  .next-steps .ns-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .next-steps .ns-field,
  .next-steps .ns-country-code-shell {
    height: 52px;
    min-height: 52px;
    border: 1px solid #cececa;
    border-radius: 8px;
    background-color: #fff;
    color: #111;
    font-family: var(--sans);
    font-size: 14px;
    outline: none;
    box-shadow: none;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  }

  .next-steps .ns-field {
    width: 100%;
    padding: 0 14px;
  }

  .next-steps .ns-field::placeholder {
    color: #77756f;
    opacity: 1;
  }

  .next-steps .ns-field:focus,
  .next-steps .ns-country-code-shell:focus-within {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(17,17,17,0.07);
  }

  .next-steps .ns-field.field-invalid,
  .next-steps .ns-country-code-shell:has(.ns-country-code.field-invalid) {
    border-color: #a34d3c;
  }

  .next-steps .ns-phone-row {
    display: grid;
    width: 100%;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    overflow: visible;
    contain: none;
  }

  .next-steps .ns-country-code-shell {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    padding: 0 30px 0 12px;
    overflow: hidden;
  }

  .next-steps .ns-country-code-shell::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #111;
    border-bottom: 1.5px solid #111;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }

  .next-steps .ns-country-code-display {
    display: block;
    color: #111;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
  }

  .next-steps .ns-country-code {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: none;
    padding: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    background-image: none;
    background-color: transparent;
    color: transparent;
    font-size: 16px;
    opacity: 1;
    white-space: nowrap;
    cursor: pointer;
  }

  .next-steps .ns-country-code option {
    background: #fff;
    color: #111;
  }

  .next-steps .ns-phone-field { min-width: 0; }

  .next-steps .ns-error {
    min-height: 0;
    margin: 5px 2px 0;
    color: #a34d3c;
    font-family: var(--sans);
    font-size: 12px;
    line-height: 17px;
  }

  .next-steps .ns-error:empty { display: none; }

  .next-steps .ns-submit-row { display: block; }
  .next-steps .ns-submit {
    width: 100%;
    height: 52px;
    margin-top: 4px;
    border: 1px solid #0b0b0b;
    border-radius: 999px;
    background: #0b0b0b;
    color: #fff;
    font-family: var(--serif);
    font-size: 14px;
    box-shadow: none;
    transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
  }

  .next-steps .ns-submit:hover,
  .next-steps .ns-submit:active {
    background: #252525;
    transform: none;
  }

  .next-steps .ns-submit:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
  }

  .next-steps .ns-status {
    margin: 8px 2px 0;
    font-size: 12px;
    line-height: 17px;
  }

  /* Native touch Answer Object rail -------------------------------------- */
  .cta-strip,
  .cta-strip[data-driven] {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 312px;
    padding: 18px 0 24px;
    display: flex;
    flex-direction: column;
    background: #fff;
    transform: none !important;
  }

  .cta-strip-viewport,
  .cta-strip[data-driven] .cta-strip-viewport {
    position: relative;
    width: 100%;
    height: 226px;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto !important;
    overflow-y: hidden;
    /* Touch is a free, momentum-driven browse surface. Card alignment belongs
       only to the explicit arrow controls in cta-strip.js; mandatory snapping
       made every swipe stop after one AO and prevented fast traversal. */
    scroll-snap-type: none;
    scroll-padding-inline: var(--m-page-gutter);
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cta-strip-viewport::-webkit-scrollbar { display: none; }

  .cta-strip .ao-card-index,
  .cta-strip[data-driven] .ao-card-index {
    position: static;
    z-index: auto;
    left: auto;
    top: auto;
    flex: 0 0 min(80vw, 290px);
    width: min(80vw, 290px);
    margin-left: var(--m-page-gutter);
    transform: none;
    will-change: auto;
  }

  .cta-strip-rail,
  .cta-strip[data-driven] .cta-strip-rail {
    flex: 0 0 auto;
    width: max-content;
    min-height: 226px;
    margin: 0;
    padding: 0 var(--m-page-gutter) 0 0;
    display: flex;
    gap: 12px;
    filter: blur(2px);
    transform: none !important;
    will-change: auto;
    transition: filter 260ms ease, opacity 260ms ease;
  }

  .cta-strip.is-revealed .cta-strip-rail { filter: none; }

  .cta-strip-rail > li {
    flex: 0 0 min(80vw, 290px);
  }

  .ao-card {
    width: 100%;
    height: 100%;
    min-height: 210px;
    padding: 18px;
    border-radius: 10px;
  }

  .ao-card-meta { font-size: 10px; line-height: 15px; }
  .ao-card-q { margin-top: 12px; font-size: 19px; line-height: 1.26; }
  .ao-card-a { margin-top: 10px; font-size: 13px; line-height: 1.48; }
  .ao-card-go { font-size: 14px; }

  .cta-strip-nav {
    flex: 0 0 auto;
    width: 148px;
    height: 44px;
    margin: 12px auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    border: 1px solid #111;
    border-radius: 999px;
    background: #fff;
    color: #111;
  }

  .cta-strip-nav button {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 16px;
  }

  .cta-strip-nav button:disabled { opacity: 0.26; }
  .cta-strip-nav span {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
  }

  .landing-footer {
    min-height: 146px;
    padding: 28px var(--m-page-gutter) max(28px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
    color: #fff;
  }

  .landing-footer__brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }

  .landing-footer__brand img {
    width: 32px;
    height: 25px;
    filter: invert(1);
  }

  .landing-footer__brand span {
    font-family: "Delphic Header Serif", "Playfair Display", Georgia, serif;
    font-size: 22px;
    letter-spacing: 0.18em;
  }

  /* Standalone Knowledge Index ------------------------------------------- */
  .ki-page .ki-wrap { padding-inline: var(--m-page-gutter); }

  .ki-page .ki-hero {
    padding: 42px 0 52px;
  }

  .ki-page .ki-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

  .ki-page .ki-hero-copy {
    min-height: 0;
    padding-top: 0;
    align-items: center;
    text-align: center;
  }

  .ki-page .ki-hero-copy h1 {
    margin: 0 0 16px;
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.14;
    white-space: nowrap;
    text-wrap: nowrap;
  }

  .ki-page .ki-sub {
    max-width: 350px;
    margin: 0 auto 18px;
    font-size: var(--m-body-size);
    line-height: var(--m-body-leading);
    text-align: center;
    text-wrap: pretty;
  }

  .ki-page .ki-index-search {
    width: min(100%, 350px);
    max-width: 350px;
    margin: 0 auto;
  }

  .ki-page .ki-search-form {
    height: 52px;
    border-radius: 10px;
  }

  .ki-page .ki-search-form input {
    padding-inline: 16px;
    font-size: 16px;
  }

  .ki-page .ki-search-form button {
    width: 52px;
    min-width: 52px;
  }

  .ki-page .ki-search-results {
    max-height: min(58dvh, 430px);
    text-align: left;
  }

  .ki-page .ki-return {
    margin: 0 auto 16px;
    text-align: center;
  }

  .ki-page .ki-return a { font-size: 13px; }

  .ki-page .ki-lattice {
    width: 100%;
    max-width: 100%;
    padding: 8px 0 4px;
    justify-self: stretch;
  }

  .ki-page .ki-lat-head {
    width: 248px;
    margin: 0 auto 28px;
    font-size: 9px;
    line-height: 1.4;
    text-align: center;
  }

  .ki-page .ki-lat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 9px;
    margin-bottom: 22px;
  }

  .ki-page .ki-lat-label {
    width: 248px;
    padding-top: 0 !important;
    font-size: 9px;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
  }

  .ki-page .ki-lat-atoms {
    width: 248px;
    grid-template-columns: repeat(8, 24px);
    gap: 8px;
  }

  .ki-page .ki-atom,
  .ki-page .ki-atom-coming {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }

  .ki-page .ki-lat-legend {
    width: 248px;
    margin: 30px auto 0;
  }

  .ki-page .ki-legend-grad,
  .ki-page .ki-legend-text { width: 248px; }
  .ki-page .ki-hover-slot {
    display: block;
    width: min(100%, 350px);
    height: auto;
    max-height: 0;
    margin: 0 auto;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 240ms cubic-bezier(0.22, 0.75, 0.24, 1),
      margin-top 220ms cubic-bezier(0.22, 0.75, 0.24, 1),
      opacity 170ms ease;
  }

  .ki-page .ki-hover-slot.is-visible {
    height: auto;
    max-height: 190px;
    margin-top: 26px;
    opacity: 1;
  }

  .ki-page .ki-hover-card {
    min-height: 0;
    padding: 16px 17px 15px;
    border: 1px solid #bdbdbd;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    pointer-events: auto;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    touch-action: manipulation;
  }

  .ki-page .ki-hover-card.is-actionable:active {
    color: #fff;
    border-color: #111;
    background: #111;
  }

  .ki-page .ki-hover-card .ki-hover-q {
    font-size: 17px;
    line-height: 1.32;
    text-wrap: pretty;
  }

  .ki-page .ki-hover-card.is-actionable:active .ki-hover-read { color: #fff; }
  .ki-page .ki-atom { touch-action: manipulation; }

  .ki-page .ki-shelf,
  .ki-page .ki-record { padding: 44px 0 50px; }

  .ki-page .ki-shelf-head h2,
  .ki-page .kio-body h2 {
    font-size: var(--m-title-size);
    line-height: var(--m-title-leading);
  }

  .ki-page .ki-card,
  .ki-page .kio-body p,
  .ki-page .kio-answer-first p {
    font-size: var(--m-body-size);
    line-height: var(--m-body-leading);
  }
}

/* Compact-height phones and landscape cannot safely hold all text inside a
   sticky scene. They retain the authored order and visual system in normal
   flow rather than clipping copy or trapping the viewport. */
@media (max-width: 900px) and (max-height: 640px) {
  .hero .sheet { padding-top: 8px; padding-bottom: 50px; }
  .hero .hero-title { font-size: clamp(28px, 8vw, 31px); }
  .hero .hero-subtitle {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 18px;
  }
  .hero .hero-actions {
    margin-top: 8px;
    flex-direction: row;
    width: 336px;
    gap: 12px;
  }
  .hero .hero-index,
  .hero .hero-button { flex: 0 0 auto; }
  .sp-chapter,
  .sp-chapter.is-sp-enhanced,
  .sp-chapter.is-sp-mobile {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .sp-stage,
  .is-sp-enhanced .sp-stage,
  .is-sp-mobile .sp-stage {
    position: static;
    display: contents;
    height: auto;
    overflow: visible;
  }

  .sp-bg,
  .is-sp-enhanced .sp-bg,
  .is-sp-mobile .sp-bg { display: none; }

  .sp-fragment { position: static; }
  .sp-fragment-shift { order: 0; }
  .sp-shift { order: 1; }
  .sp-fragment-problem { order: 2; }
  .sp-problem { order: 3; }

  .sp-act,
  .is-sp-enhanced .sp-act,
  .is-sp-mobile .sp-act {
    position: relative;
    inset: auto;
    min-height: max(100svh, 620px);
    opacity: 1;
    transform: none;
  }

  .sp-shift {
    background: linear-gradient(180deg, #fff 0%, #fff 30%, #efefed 55%, #c5c5c2 78%, #9a9a97 100%);
  }

  .sp-problem {
    background: linear-gradient(180deg, #999 0%, #6f6f6e 22%, #454542 40%, #232321 52%, #000 62%, #000 100%);
  }

  .index-chapter .ix-atom-pane { height: 230px; }
  .index-chapter .ix-copy-pane { margin-top: -230px; }
  .index-chapter .ix-slide {
    min-height: max(100svh, 620px);
    padding-top: 254px;
  }
}

@media (max-width: 340px) {
  :root {
    --m-page-gutter: 16px;
    --m-reading-inset: 8px;
  }

  .hero .hero-actions {
    width: 100%;
    max-width: 318px;
    gap: 4px;
  }

  .hero .sheet { padding-top: 54px; }
  .hero .hero-title {
    width: min(100%, 288px);
    font-size: 30.5px;
    line-height: 31.8px;
    letter-spacing: -0.4px;
  }
  .hero .hero-subtitle {
    width: min(100%, 288px) !important;
    font-size: 13px;
    line-height: 21px;
  }
  .hero .hero-button { width: 132px; }
  .hero .hero-index { width: 190px; }

  .sp-copy .label-row-s,
  .sp-copy h2,
  .sp-shift .shift-body-section {
    left: 24px;
  }

  .sp-copy h2 {
    width: calc(100% - 48px);
    font-size: 19px;
    line-height: 31px;
  }

  .sp-shift h2 { width: calc(100% - 48px); }
  .sp-shift .shift-body-section { width: calc(100% - 48px); }

  .sp-chapter,
  .sp-chapter.is-sp-mobile,
  .sp-stage,
  .is-sp-enhanced .sp-stage,
  .is-sp-mobile .sp-stage {
    height: 1339px;
  }

  .sp-shift,
  .is-sp-enhanced .sp-shift,
  .is-sp-mobile .sp-shift {
    height: 620px;
  }

  .sp-problem,
  .is-sp-enhanced .sp-problem,
  .is-sp-mobile .sp-problem {
    top: 620px;
  }

  .sp-fragment-problem { top: 620px; }
  .sp-shift .shift-body-open {
    left: 24px;
    width: calc(100% - 48px);
  }

  .sp-problem .problem-body {
    left: 24px;
    width: calc(100% - 48px);
  }

  .index-prelude,
  .index-prelude > .sheet {
    height: 500px;
    min-height: 500px;
  }

  .index-prelude::before {
    left: 20px;
    width: calc(100% - 40px);
    height: 457px;
  }

  .index-prelude > .sheet > .ix-prelude-copy {
    left: 24px;
    top: 195px;
    width: calc(100% - 48px);
  }

  .ix-prelude-copy h2 {
    width: 100%;
    max-width: none;
    font-size: 19px;
    line-height: 26px;
  }
}

@media (max-width: 325px) {
  .sp-shift .shift-body-open { top: 224px; }
  .sp-shift > .sheet > .sp-visual { top: 302px; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .hero .hero-learn::after { animation: none; }

  .sp-chapter {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .sp-stage,
  .is-sp-enhanced .sp-stage,
  .is-sp-mobile .sp-stage {
    position: static;
    display: contents;
    height: auto;
    overflow: visible;
  }

  .sp-bg,
  .is-sp-enhanced .sp-bg,
  .is-sp-mobile .sp-bg { display: none; }

  .sp-fragment { position: static; }
  .sp-fragment-shift { order: 0; }
  .sp-shift { order: 1; }
  .sp-fragment-problem { order: 2; }
  .sp-problem { order: 3; }

  .sp-act,
  .is-sp-enhanced .sp-act,
  .is-sp-mobile .sp-act {
    position: relative;
    inset: auto;
    min-height: 100svh;
    opacity: 1;
    transform: none;
  }

  .sp-shift {
    background: linear-gradient(180deg, #fff 0%, #fff 30%, #efefed 55%, #c5c5c2 78%, #9a9a97 100%);
  }

  .sp-problem {
    background: linear-gradient(180deg, #999 0%, #6f6f6e 22%, #454542 40%, #232321 52%, #000 62%, #000 100%);
  }

  .cta-strip-rail { transition: none; filter: none; }
  .index-chapter .x-atom { transition: none; }
}