/* =========================================================================
   motosh.dev — MOBILE layout   (media: max-width 899px)
   Not a set of overrides: an independently authored layout that happens to
   share the same tokens, the same markup contract and the same motion rules
   as the desktop one. Built for thumbs, dvh and safe areas.
   ========================================================================= */

@layer layout {
  [data-layout="mobile"] {
    display: revert;
  }

  :root {
    --gutter: 20px;
    --header-h: 58px;
    --dock-h: 62px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --section-pad: var(--spacing-48);
  }

  html {
    scroll-padding-top: calc(var(--header-h) + 16px);
  }

  /* Full-bleed children (100vw snap tracks) sit inside grid containers.
     A grid item defaults to min-width:auto, so a 100vw child silently
     widens its whole grid track and pushes the layout past the viewport.
     Every grid that hosts one is pinned to a zero-floor column. */
  .tour,
  .tour__rail,
  .lab,
  .lab__controls,
  .lab__group,
  .lab__stage,
  .section-head,
  .hero__grid,
  .about__grid,
  .about__lead,
  .about__copy,
  .contact__grid,
  .case-outro__grid,
  .case-open__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* -------------------------------------------------------- mobile header */
  .m-header {
    position: sticky;
    z-index: var(--z-header);
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding-inline: var(--gutter);
    background: var(--surface-paper);
    transition: box-shadow var(--dur-2) var(--ease-out);
  }

  .m-header.is-scrolled {
    box-shadow: 0 1px 0 0 var(--line);
  }

  .wordmark {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: -.02em;
  }

  .wordmark span {
    color: var(--ink-4);
  }

  .m-header__menu {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    min-height: 48px;
    padding: 0 var(--spacing-12);
    border-radius: var(--radius-full);
    color: var(--ink);
    box-shadow: var(--ring);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-medium);
  }

  .m-header__menu:active {
    background: var(--surface-cream);
  }

  /* ---------------------------------------------------------- bottom dock */
  .m-dock {
    position: fixed;
    z-index: var(--z-header);
    right: var(--gutter);
    bottom: calc(10px + var(--safe-b));
    left: var(--gutter);
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: color-mix(in srgb, var(--color-paper) 88%, transparent);
    backdrop-filter: blur(16px) saturate(150%);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-subtle-2);
    transform: translateY(0);
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
  }

  .m-dock[data-hidden="true"] {
    opacity: 0;
    transform: translateY(calc(100% + 24px));
    pointer-events: none;
  }

  .m-dock__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    min-height: 48px;
    border-radius: var(--radius-full);
    color: var(--ink-2);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-medium);
  }

  .m-dock__item:active {
    background: var(--surface-cream);
  }

  .m-dock__item--primary {
    color: var(--color-paper);
    background: var(--ink);
  }

  .m-dock__item--primary:active {
    background: var(--color-charcoal);
  }

  /* ----------------------------------------------------------- nav sheet */
  .m-sheet {
    position: fixed;
    z-index: var(--z-sheet);
    inset: 0;
    visibility: hidden;
    transition: visibility 0s linear var(--dur-3);
  }

  .m-sheet[data-open="true"] {
    visibility: visible;
    transition-delay: 0s;
  }

  .m-sheet__scrim {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-jet-ink) 34%, transparent);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease-out);
  }

  .m-sheet[data-open="true"] .m-sheet__scrim {
    opacity: 1;
  }

  .m-sheet__panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 90dvh;
    display: grid;
    gap: var(--spacing-16);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px var(--gutter) calc(var(--spacing-20) + var(--safe-b));
    background: var(--surface-paper);
    border-radius: var(--radius-cards) var(--radius-cards) 0 0;
    transform: translateY(100%);
    transition: transform var(--dur-4) var(--ease-spring);
  }

  .m-sheet[data-open="true"] .m-sheet__panel {
    transform: translateY(var(--sheet-drag, 0px));
  }

  .m-sheet[data-dragging="true"] .m-sheet__panel {
    transition: none;
  }

  .m-sheet__grip {
    display: grid;
    place-items: center;
    height: 22px;
    touch-action: none;
    cursor: grab;
  }

  .m-sheet__grip i {
    width: 40px;
    height: 4px;
    background: var(--line);
    border-radius: var(--radius-full);
  }

  .m-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .m-sheet__close {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    color: var(--ink-3);
    box-shadow: var(--ring);
  }

  .m-sheet__list {
    display: grid;
    overflow: hidden;
    background: var(--surface-cream);
    border-radius: var(--radius-cards);
  }

  .m-sheet__list a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-4) var(--spacing-12);
    min-height: 64px;
    padding: var(--spacing-12) var(--spacing-16);
  }

  .m-sheet__list a + a {
    border-top: 1px solid var(--line);
  }

  .m-sheet__list a:active {
    background: var(--surface-paper);
  }

  .m-sheet__list span {
    color: var(--ink-4);
    font-family: var(--font-mono);
    font-size: 10px;
  }

  .m-sheet__list strong {
    font-size: var(--text-body);
    font-weight: var(--font-weight-medium);
  }

  .m-sheet__list small {
    grid-column: 2;
    color: var(--ink-4);
    font-size: 11px;
  }

  .m-sheet__list svg {
    grid-row: 1 / span 2;
    grid-column: 3;
    color: var(--ink-4);
  }

  .m-sheet__cases {
    display: grid;
    gap: var(--spacing-8);
  }

  .m-sheet__cases a {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-12);
    min-height: 68px;
    padding: var(--spacing-12) var(--spacing-16);
    border-radius: var(--radius-cards);
    box-shadow: var(--ring);
  }

  .m-sheet__cases a:active {
    background: var(--surface-cream);
  }

  .m-sheet__cases img {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .m-sheet__cases strong {
    display: block;
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
  }

  .m-sheet__cases small {
    display: block;
    margin-top: 3px;
    color: var(--ink-4);
    font-family: var(--font-mono);
    font-size: 10px;
  }

  .m-sheet__cases svg {
    color: var(--ink-4);
  }

  .m-sheet__cta {
    width: 100%;
    min-height: 52px;
  }

  /* ---------------------------------------------------------------- hero */
  .hero {
    position: relative;
    padding: var(--spacing-40) 0 56px;
    overflow: hidden;
  }

  .hero__field {
    position: absolute;
    inset: -10% -20% auto -20%;
    height: 62%;
    touch-action: pan-y;
  }

  .hero__field canvas {
    width: 100%;
    height: 100%;
    opacity: .8;
    mask-image: radial-gradient(90% 100% at 60% 20%, #000 0%, #000 40%, transparent 76%);
  }

  .hero__orb {
    top: -14%;
    right: -22%;
    width: 78vw;
    aspect-ratio: 1;
    opacity: .55;
  }

  .hero__grid {
    position: relative;
    z-index: var(--z-content);
    display: grid;
    gap: var(--spacing-32);
  }

  .hero__title {
    display: grid;
    font-size: var(--text-display-xl);
    line-height: .9;
    letter-spacing: -.04em;
  }

  .hero__lead {
    display: grid;
    gap: var(--spacing-24);
  }

  .hero__lead > p {
    color: var(--ink-2);
    font-size: var(--text-body);
    line-height: 1.6;
  }

  .hero__actions {
    display: grid;
    gap: var(--spacing-12);
  }

  .hero__actions .btn {
    width: 100%;
    min-height: 52px;
  }

  .hero__facts {
    display: grid;
    border-top: 1px solid var(--line);
  }

  .hero__facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-16);
    padding: var(--spacing-16) 0;
    border-bottom: 1px solid var(--line);
  }

  .hero__facts dt {
    font-size: var(--text-body);
    font-weight: var(--font-weight-medium);
  }

  .hero__facts dd {
    color: var(--ink-4);
    font-size: var(--text-caption);
    text-align: right;
  }

  .hero__hint {
    color: var(--ink-4);
    font-family: var(--font-mono);
    font-size: 11px;
  }

  /* ---------------------------------------------------------- section head */
  .work,
  .system,
  .process,
  .about {
    padding: var(--section-pad) 0;
  }

  .system {
    background: var(--surface-cream);
  }

  .section-head {
    display: grid;
    gap: var(--spacing-12);
    margin-bottom: var(--spacing-24);
  }

  .section-head h2 {
    font-size: var(--text-section);
  }

  .section-head__lead {
    color: var(--ink-3);
    font-size: var(--text-body-sm);
    line-height: 1.6;
  }

  /* ------------------------------------------------------- case carousel */
  .m-cases {
    display: grid;
    gap: var(--spacing-16);
    /* full-bleed out of the container */
    width: 100vw;
    margin-left: 50%;
    translate: -50% 0;
  }

  .m-cases__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 340px);
    gap: var(--spacing-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .m-cases__track::-webkit-scrollbar {
    display: none;
  }

  .m-case {
    scroll-snap-align: start;
  }

  .m-case > a {
    display: grid;
    gap: var(--spacing-12);
    height: 100%;
    padding: var(--spacing-20);
    background: var(--surface-cream);
    border-radius: var(--radius-cards);
    box-shadow: var(--ring);
  }

  .m-case > a:active {
    background: var(--surface-sand);
  }

  .m-case .pill {
    justify-self: start;
    background: var(--surface-paper);
  }

  .m-case img {
    width: 64px;
    height: 64px;
    object-fit: contain;
  }

  .m-case h3 {
    font-size: var(--text-heading-sm);
    line-height: 1.02;
  }

  .m-case p {
    color: var(--ink-3);
    font-size: var(--text-body-sm);
    line-height: 1.55;
  }

  .m-case__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12);
    margin-top: auto;
    padding-top: var(--spacing-16);
    border-top: 1px solid var(--line);
    color: var(--ink-4);
  }

  .m-case__foot .round-arrow {
    width: 36px;
    height: 36px;
    color: var(--color-paper);
    background: var(--ink);
    box-shadow: none;
  }

  .m-cases__rail {
    width: min(100% - var(--gutter) * 2, 240px);
    height: 2px;
    margin-inline: auto;
    overflow: hidden;
    background: var(--line);
    border-radius: var(--radius-full);
  }

  .m-cases__rail i {
    display: block;
    width: 50%;
    height: 100%;
    background: var(--ink);
    border-radius: var(--radius-full);
    transform: translateX(var(--carousel-progress, 0%));
    transition: transform var(--dur-2) var(--ease-out);
  }

  /* ------------------------------------------------------------- lab */
  .lab {
    display: grid;
    gap: var(--spacing-16);
  }

  .lab__controls {
    display: grid;
    gap: var(--spacing-16);
    padding: var(--spacing-20) 0 0;
  }

  .lab__presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border-radius: var(--radius-full);
    background: var(--surface-paper);
    box-shadow: var(--ring);
  }

  .lab__presets button {
    min-height: 48px;
    border-radius: var(--radius-full);
    color: var(--ink-3);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-medium);
  }

  .lab__presets button[aria-pressed="true"] {
    color: var(--color-paper);
    background: var(--ink);
  }

  .lab__group {
    display: grid;
    gap: var(--spacing-8);
  }

  .lab__group legend {
    color: var(--ink-4);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  /* chip rows scroll horizontally out of the gutter */
  .lab__options {
    display: flex;
    gap: var(--spacing-8);
    width: 100vw;
    margin-left: 50%;
    translate: -50% 0;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lab__options::-webkit-scrollbar {
    display: none;
  }

  .lab__options button {
    flex: none;
    min-width: 48px;
    min-height: 48px;
    padding: 0 var(--spacing-16);
    border-radius: var(--radius-full);
    color: var(--ink-2);
    background: var(--surface-paper);
    box-shadow: var(--ring);
    font-family: var(--font-mono);
    font-size: 11px;
  }

  .lab__options button[aria-pressed="true"] {
    color: var(--color-paper);
    background: var(--ink);
    box-shadow: none;
  }

  .lab__reset {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    justify-self: start;
    min-height: 48px;
    color: var(--ink-4);
    font-size: var(--text-caption);
  }

  .lab__stage {
    display: grid;
    padding: var(--spacing-20);
    background:
      linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 100% 20px,
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 20px 100%,
      var(--surface-paper);
    border-radius: var(--radius-cards);
    box-shadow: var(--ring);
  }

  .lab-card {
    position: relative;
    display: grid;
    gap: var(--spacing-12);
    padding: var(--lab-pad, var(--card-padding));
    color: var(--lab-ink, var(--ink));
    background: var(--lab-surface, var(--surface-cream));
    border-radius: var(--lab-radius, var(--radius-cards));
    box-shadow: inset 0 0 0 1px var(--lab-line, var(--line));
    transition:
      padding var(--dur-3) var(--ease-out),
      border-radius var(--dur-3) var(--ease-spring),
      background-color var(--dur-3) var(--ease-out),
      color var(--dur-3) var(--ease-out);
  }

  .lab-card__accent {
    justify-self: start;
    width: 48px;
    height: 7px;
    border-radius: var(--radius-full);
    background: var(--color-sand);
  }

  .lab-card[data-accent="none"] .lab-card__accent { opacity: 0; }

  .lab-card[data-accent="terminal"] .lab-card__accent {
    width: 32px;
    background:
      radial-gradient(circle at 5px 3.5px, var(--color-ember) 3px, transparent 3.5px),
      radial-gradient(circle at 16px 3.5px, var(--color-sunbeam) 3px, transparent 3.5px),
      radial-gradient(circle at 27px 3.5px, var(--color-sprout) 3px, transparent 3.5px);
  }

  .lab-card__label {
    color: color-mix(in srgb, currentColor 52%, transparent);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .lab-card h3 {
    font-size: var(--lab-title, var(--text-subheading));
    line-height: var(--lab-leading, 1.08);
    letter-spacing: var(--lab-tracking, -.75px);
  }

  .lab-card__body {
    color: color-mix(in srgb, currentColor 62%, transparent);
    font-size: var(--text-body-sm);
    line-height: 1.55;
  }

  .lab-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12);
    margin-top: 4px;
    padding-top: var(--spacing-16);
    border-top: 1px solid var(--lab-line, var(--line));
  }

  .lab-card__meta {
    color: color-mix(in srgb, currentColor 52%, transparent);
    font-family: var(--font-mono);
    font-size: 10px;
  }

  .lab-card__button {
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--radius-full);
    color: var(--lab-surface, var(--surface-cream));
    background: var(--lab-ink, var(--ink));
    font-size: var(--text-caption);
    font-weight: var(--font-weight-medium);
    line-height: 1;
  }

  .lab__code {
    overflow: hidden;
    background: var(--surface-charcoal);
    border-radius: var(--radius-cards);
  }

  .lab__code-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-12);
    min-height: 46px;
    padding: 0 var(--spacing-16);
    border-bottom: 1px solid color-mix(in srgb, var(--color-paper) 12%, transparent);
  }

  .lab__code-bar .mono {
    color: color-mix(in srgb, var(--color-paper) 54%, transparent);
    font-size: 11px;
  }

  .lab__copy {
    min-height: 48px;
    padding: 0 var(--spacing-16);
    border-radius: var(--radius-full);
    color: var(--color-paper);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-paper) 22%, transparent);
    font-size: var(--text-caption);
  }

  .lab__code pre {
    max-height: 260px;
    overflow: auto;
    padding: var(--spacing-16);
    -webkit-overflow-scrolling: touch;
  }

  .lab__code code {
    color: color-mix(in srgb, var(--color-paper) 84%, transparent);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    line-height: 1.8;
    white-space: pre;
  }

  /* ------------------------------------------------------- process pager */
  .m-steps {
    display: grid;
    gap: var(--spacing-16);
    width: 100vw;
    margin-left: 50%;
    translate: -50% 0;
  }

  .m-steps__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 380px);
    gap: var(--spacing-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .m-steps__track::-webkit-scrollbar {
    display: none;
  }

  .m-step {
    scroll-snap-align: start;
    display: grid;
    align-content: start;
    gap: var(--spacing-12);
    min-height: 260px;
    padding: var(--spacing-24);
    background: var(--surface-cream);
    border-radius: var(--radius-cards);
    box-shadow: var(--ring);
  }

  .m-step .mono {
    color: var(--ink-4);
    font-size: 11px;
  }

  .m-step h3 {
    font-size: var(--text-heading-sm);
    line-height: 1.05;
  }

  .m-step p {
    color: var(--ink-3);
    font-size: var(--text-body-sm);
    line-height: 1.6;
  }

  .m-steps__dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-8);
  }

  .m-steps__dots i {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--line);
    transition: width var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
  }

  .m-steps__dots i[data-active="true"] {
    width: 20px;
    background: var(--ink);
  }

  /* --------------------------------------------------------------- about */
  .about__grid {
    display: grid;
    gap: var(--spacing-24);
  }

  .about__lead {
    display: grid;
    gap: var(--spacing-24);
  }

  .about__portrait {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-cards);
    background: var(--surface-cream);
  }

  .about__portrait img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  .about__portrait figcaption {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    display: grid;
    gap: var(--spacing-4);
    padding: var(--spacing-12) var(--spacing-16);
    background: color-mix(in srgb, var(--color-paper) 90%, transparent);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-xl);
  }

  .about__portrait figcaption .mono {
    color: var(--ink-4);
    font-size: 10px;
  }

  .about__copy {
    display: grid;
    gap: var(--spacing-24);
  }

  .about__copy h2 {
    font-size: var(--text-section);
  }

  .about__principles {
    display: grid;
    gap: var(--spacing-16);
  }

  .about__principles p {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: var(--spacing-12);
    padding-bottom: var(--spacing-16);
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    font-size: var(--text-body-sm);
    line-height: 1.6;
  }

  .about__principles p:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .about__principles .mono {
    color: var(--ink-4);
    font-size: 10px;
    line-height: 1.9;
  }

  /* ------------------------------------------------------------- contact */
  .contact,
  .case-outro {
    padding-top: var(--section-pad);
    color: var(--color-paper);
    background: var(--ink);
  }

  .contact__grid,
  .case-outro__grid {
    display: grid;
    gap: var(--spacing-24);
  }

  .contact .label,
  .case-outro .label {
    color: color-mix(in srgb, var(--color-paper) 46%, transparent);
  }

  .contact .label::before,
  .case-outro .label::before {
    background: color-mix(in srgb, var(--color-paper) 26%, transparent);
  }

  .contact h2,
  .case-outro h2 {
    font-size: var(--text-display-lg);
  }

  .contact h2 .text-soft {
    color: color-mix(in srgb, var(--color-paper) 48%, transparent);
  }

  .contact__actions {
    display: grid;
    gap: var(--spacing-12);
    margin-top: var(--spacing-32);
  }

  .contact__actions > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-4) var(--spacing-16);
    min-height: 88px;
    padding: var(--spacing-20);
    border-radius: var(--radius-cards);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-paper) 18%, transparent);
  }

  .contact__actions > a:active {
    background: color-mix(in srgb, var(--color-paper) 10%, transparent);
  }

  .contact__actions small {
    color: color-mix(in srgb, var(--color-paper) 52%, transparent);
    font-size: 10px;
  }

  .contact__actions strong {
    grid-column: 1;
    font-family: var(--font-display);
    font-size: var(--text-heading-sm);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--display-tracking);
  }

  .contact__actions .round-arrow {
    grid-row: 1 / span 2;
    grid-column: 2;
    width: 38px;
    height: 38px;
  }

  /* The dock floats above the page, so the room it needs is reserved by the
     closing footer itself. Reserving it on <body> instead left a strip of
     page background below the dark footer. */
  .site-footer {
    display: grid;
    gap: var(--spacing-8);
    margin-top: var(--spacing-48);
    padding: var(--spacing-24) 0 calc(var(--dock-h) + var(--safe-b) + var(--spacing-16));
    border-top: 1px solid color-mix(in srgb, var(--color-paper) 16%, transparent);
    color: color-mix(in srgb, var(--color-paper) 56%, transparent);
    font-size: var(--text-caption);
  }

  .site-footer strong {
    color: var(--color-paper);
    font-size: var(--text-body-sm);
  }
}

/* =========================================================================
   COMPONENTS — mobile presentation of the shared overlays
   ========================================================================= */
@layer components {
  .m-dock {
    display: flex;
  }

}

/* =========================================================================
   CASE PAGES — mobile
   Authored for a 390px thumb, not squeezed down from the desktop grid.
   ========================================================================= */
@layer layout {
  .case-hero {
    position: relative;
    padding: var(--spacing-32) 0 var(--spacing-40);
    overflow: hidden;
  }

  .case-hero__field {
    position: absolute;
    inset: -8% -18% auto -18%;
    height: 56%;
  }

  .case-hero__field canvas {
    width: 100%;
    height: 100%;
    opacity: .7;
    mask-image: radial-gradient(90% 100% at 62% 18%, #000 0%, #000 38%, transparent 74%);
  }

  .case-hero__orb {
    top: -16%;
    right: -26%;
    width: 76vw;
    aspect-ratio: 1;
    opacity: .48;
  }

  .case-hero > .container {
    position: relative;
    z-index: var(--z-content);
  }

  .case-hero__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-12);
    padding-bottom: var(--spacing-24);
  }

  .case-hero__title {
    font-size: var(--text-display-lg);
    line-height: .96;
  }

  .case-hero__bottom {
    display: grid;
    gap: var(--spacing-20);
    margin-top: 28px;
    padding-top: var(--spacing-24);
    border-top: 1px solid var(--line);
  }

  .case-hero__bottom > p {
    color: var(--ink-2);
    font-size: var(--text-body-sm);
    line-height: 1.6;
  }

  .case-hero__bottom dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-8);
  }

  .case-hero__bottom dl > div {
    padding: var(--spacing-12);
    background: var(--surface-cream);
    border-radius: var(--radius-xl);
  }

  .case-hero__bottom dt {
    margin-bottom: 5px;
    color: var(--ink-4);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .case-hero__bottom dd {
    font-size: var(--text-caption);
    font-weight: var(--font-weight-medium);
  }

  .case-status {
    display: grid;
    gap: var(--hairline);
    margin-top: 24px;
    overflow: hidden;
    background: var(--line);
    border-radius: var(--radius-cards);
  }

  .case-status > div {
    display: grid;
    gap: var(--spacing-8);
    padding: var(--spacing-16);
    background: var(--surface-cream);
  }

  .case-status p {
    color: var(--ink-2);
    font-size: var(--text-body-sm);
    line-height: 1.5;
  }

  /* --------------------------------------------------------------- shared */
  .case-context,
  .case-live,
  .case-story,
  .case-structure,
  .case-model,
  .case-decisions,
  .case-measure,
  .case-plan,
  .case-journey,
  .case-open {
    padding: var(--section-pad) 0;
  }

  .case-live,
  .case-model,
  .case-decisions,
  .case-plan {
    background: var(--surface-cream);
  }

  /* ---- constraints: a swipe row, not four stacked screens ---- */
  .constraints {
    display: flex;
    gap: var(--spacing-8);
    width: 100vw;
    margin-left: 50%;
    translate: -50% 0;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .constraints::-webkit-scrollbar {
    display: none;
  }

  .constraints li {
    flex: none;
    width: min(72vw, 300px);
    scroll-snap-align: start;
    display: grid;
    align-content: start;
    gap: var(--spacing-8);
    padding: var(--spacing-20);
    background: var(--surface-cream);
    border-radius: var(--radius-cards);
    box-shadow: var(--ring);
  }

  .constraints .mono {
    color: var(--ink-4);
    font-size: 11px;
  }

  .constraints h3 {
    font-size: var(--text-heading-sm);
  }

  .constraints p {
    color: var(--ink-3);
    font-size: var(--text-body-sm);
    line-height: 1.6;
  }

  /* ---- rig ---- */
  /* Generous ceiling on purpose: on a phone the width should bind, so the
     emulated device fills the card instead of standing narrow in the middle. */
  .rig {
    --rig-max-h: 700px;
    position: relative;
    overflow: hidden;
    background: var(--surface-paper);
    border-radius: var(--radius-cards);
    box-shadow: var(--ring);
  }

  .rig__bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    height: 46px;
    padding: 0 var(--spacing-16);
    border-bottom: 1px solid var(--line);
  }

  .rig__url {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--ink-2);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* A width switcher is meaningless on a phone — the phone IS the viewport. */
  .rig__switch,
  .rig__readout {
    display: none;
  }

  .rig__external {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--ink-3);
    border-radius: var(--radius-full);
    box-shadow: var(--ring);
  }

  .rig__stage {
    position: relative;
    aspect-ratio: 390 / 844;
    margin-inline: auto;
    overflow: hidden;
    background: var(--surface-paper);
    transition:
      width var(--dur-3) var(--ease-out),
      height var(--dur-3) var(--ease-out);
  }

  .rig__canvas {
    position: absolute;
    top: 0;
    left: 50%;
    transform-origin: top center;
    translate: -50% 0;
    transition: width var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  }

  .rig__canvas iframe {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  [data-rig-interactive="true"] .rig__canvas iframe {
    pointer-events: auto;
  }

  .rig__loader {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--spacing-16);
    background: var(--surface-cream);
    transition: opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
  }

  .rig__loader img {
    width: 56px;
    height: 56px;
    object-fit: contain;
  }

  .rig__loader .mono {
    color: var(--ink-4);
    font-size: 11px;
  }

  .rig__progress {
    width: 140px;
    height: 2px;
    overflow: hidden;
    background: var(--line);
    border-radius: var(--radius-full);
  }

  .rig__progress i {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--ink);
    animation: rig-progress 1.4s var(--ease-in-out) infinite;
  }

  @keyframes rig-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(280%); }
  }

  [data-rig-loaded="true"] .rig__loader {
    opacity: 0;
    visibility: hidden;
  }

  .rig__gate {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: end center;
    padding-bottom: var(--spacing-20);
    background: linear-gradient(to top, color-mix(in srgb, var(--color-jet-ink) 14%, transparent), transparent 34%);
  }

  [data-rig-interactive="true"] .rig__gate {
    display: none;
  }

  .rig__defer {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--spacing-12);
    padding: var(--spacing-24);
    text-align: center;
    background: var(--surface-cream);
  }

  .rig__defer .mono {
    color: var(--ink-4);
    font-size: 11px;
    line-height: 1.5;
  }

  .case-live__note {
    max-width: 62ch;
    margin-top: var(--spacing-16);
    padding-top: var(--spacing-16);
    border-top: 1px solid var(--line);
    color: var(--ink-4);
    font-size: var(--text-caption);
    line-height: 1.6;
  }

  /* ---- guided tour: rail becomes a snap row under the frame ---- */
  .tour {
    display: grid;
    gap: var(--spacing-16);
  }

  .tour__rail {
    display: grid;
    gap: var(--spacing-12);
  }

  .tour__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12);
  }

  .tour__play {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    min-height: 48px;
    padding: 0 var(--spacing-16);
    color: var(--color-paper);
    background: var(--ink);
    border-radius: var(--radius-full);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-medium);
  }

  .tour__play-icon--pause { display: none; }
  [data-playing="true"] .tour__play-icon--play { display: none; }
  [data-playing="true"] .tour__play-icon--pause { display: block; }

  .tour__steps {
    display: flex;
    gap: var(--spacing-8);
    width: 100vw;
    margin-left: 50%;
    translate: -50% 0;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .tour__steps::-webkit-scrollbar {
    display: none;
  }

  .tour__steps li {
    flex: none;
    width: min(66vw, 260px);
    scroll-snap-align: start;
  }

  .tour__steps button {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--spacing-4) var(--spacing-12);
    width: 100%;
    height: 100%;
    padding: var(--spacing-16);
    background: var(--surface-paper);
    border-radius: var(--radius-cards);
    box-shadow: var(--ring);
    text-align: left;
  }

  .tour__steps button[aria-current="true"] {
    background: var(--surface-sand);
    box-shadow: none;
  }

  .tour__steps .mono {
    grid-row: 1 / span 2;
    color: var(--ink-4);
    font-size: 11px;
    line-height: 1.4;
  }

  .tour__steps strong {
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
  }

  .tour__steps small {
    color: var(--ink-4);
    font-size: var(--text-caption);
  }

  .tour__note {
    color: var(--ink-4);
    font-size: 10px;
    line-height: 1.5;
  }

  /* ---- wiring: columns stack, wires run vertically ---- */
  .wiring {
    position: relative;
    display: grid;
    gap: var(--spacing-32);
    padding: var(--spacing-20);
    background: var(--surface-paper);
    border-radius: var(--radius-cards);
    box-shadow: var(--ring);
  }

  .wiring__wires {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .wire {
    fill: none;
    stroke: var(--line);
    stroke-width: 1;
  }

  [data-focused="true"] .wire {
    opacity: .2;
  }

  .wire[data-lit] {
    stroke: var(--ink);
    opacity: 1;
  }

  .wiring__column {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
  }

  .wiring__legend {
    width: 100%;
    color: var(--ink-4);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .wiring__node {
    min-height: 48px;
    padding: var(--spacing-12) var(--spacing-16);
    background: var(--surface-paper);
    border-radius: var(--radius-full);
    box-shadow: var(--ring);
    font-size: var(--text-caption);
  }

  .wiring__node[data-lit] {
    color: var(--color-paper);
    background: var(--ink);
    box-shadow: none;
  }

  .wiring__node[data-dim] {
    opacity: .34;
  }

  .wiring__readout {
    padding-top: var(--spacing-16);
    border-top: 1px solid var(--line);
    color: var(--ink-4);
    font-size: 11px;
  }

  /* ---- decisions ---- */
  .decisions {
    display: grid;
    gap: var(--spacing-8);
  }

  .decision {
    overflow: hidden;
    background: var(--surface-paper);
    border-radius: var(--radius-cards);
    box-shadow: var(--ring);
  }

  .decision summary {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 26px;
    align-items: center;
    gap: var(--spacing-12);
    min-height: 68px;
    padding: var(--spacing-16);
    cursor: pointer;
    list-style: none;
  }

  .decision summary::-webkit-details-marker {
    display: none;
  }

  .decision summary .mono {
    color: var(--ink-4);
    font-size: 11px;
  }

  .decision summary strong {
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
  }

  .decision__marker {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    box-shadow: var(--ring);
  }

  .decision__marker::before,
  .decision__marker::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1px;
    background: var(--ink);
    translate: -50% -50%;
    transition: transform var(--dur-2) var(--ease-out);
  }

  .decision__marker::after {
    transform: rotate(90deg);
  }

  .decision[open] .decision__marker::after {
    transform: rotate(0deg);
  }

  .decision__body {
    display: grid;
    gap: var(--spacing-12);
    padding: 0 var(--spacing-16) var(--spacing-20);
    color: var(--ink-2);
    font-size: var(--text-body-sm);
    line-height: 1.6;
  }

  .decision__body b {
    color: var(--ink);
    font-weight: var(--font-weight-medium);
  }

  /* ---- measurement ---- */
  .measure {
    display: grid;
    gap: var(--spacing-20);
    padding: var(--spacing-20);
    color: var(--color-paper);
    background: var(--surface-charcoal);
    border-radius: var(--radius-cards);
  }

  .measure__head {
    display: grid;
    gap: var(--spacing-12);
  }

  .measure__head .btn--primary {
    width: 100%;
    min-height: 50px;
    color: var(--ink);
    background: var(--color-paper);
  }

  .measure__head .mono {
    color: color-mix(in srgb, var(--color-paper) 56%, transparent);
    font-size: 11px;
    line-height: 1.6;
  }

  .measure__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hairline);
    overflow: hidden;
    background: color-mix(in srgb, var(--color-paper) 14%, transparent);
    border-radius: var(--radius-xl);
  }

  .measure__grid > div {
    display: grid;
    gap: var(--spacing-8);
    padding: var(--spacing-16);
    background: var(--surface-charcoal);
  }

  .measure__grid dt {
    color: color-mix(in srgb, var(--color-paper) 52%, transparent);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .measure__grid dd {
    font-size: var(--text-heading-sm);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--display-tracking);
    transition: none;
  }

  /* ---- plan ---- */
  .plan {
    display: grid;
    gap: var(--hairline);
    overflow: hidden;
    background: var(--line);
    border-radius: var(--radius-cards);
  }

  .plan li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--spacing-4) var(--spacing-12);
    padding: var(--spacing-12) var(--spacing-16);
    background: var(--surface-paper);
  }

  .plan__state {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--color-paper);
    border-radius: var(--radius-full);
    box-shadow: var(--ring);
  }

  [data-state="done"] .plan__state {
    background: var(--ink);
    box-shadow: none;
  }

  [data-state="active"] .plan__state {
    box-shadow: inset 0 0 0 1px var(--ink);
  }

  [data-state="active"] .plan__state::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-sunbeam);
  }

  .plan li strong {
    display: block;
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
  }

  .plan li p {
    margin-top: var(--spacing-4);
    color: var(--ink-4);
    font-size: var(--text-caption);
    line-height: 1.5;
  }

  .plan__owner {
    padding: var(--spacing-4) var(--spacing-8);
    color: var(--ink-3);
    background: var(--surface-cream);
    border-radius: var(--radius-full);
    font-size: 10px;
  }

  .plan__domain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    margin-top: 10px;
    padding: var(--spacing-16);
    background: var(--surface-paper);
    border-radius: var(--radius-cards);
    box-shadow: var(--ring);
  }

  .plan__domain small {
    display: block;
    margin-bottom: 4px;
    color: var(--ink-4);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .plan__domain strong {
    font-family: var(--font-display);
    font-size: var(--text-heading-sm);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--display-tracking);
  }

  /* ---- tabs become a sticky segmented control ---- */
  .tabs-layout {
    display: grid;
    gap: var(--spacing-20);
  }

  .tabs {
    position: sticky;
    z-index: 40;
    top: calc(var(--header-h) + 8px);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: color-mix(in srgb, var(--color-paper) 92%, transparent);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-full);
    box-shadow: var(--ring);
  }

  .tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    min-height: 48px;
    color: var(--ink-3);
    border-radius: var(--radius-full);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-medium);
  }

  .tabs button[aria-selected="true"] {
    color: var(--color-paper);
    background: var(--ink);
  }

  .tabs button:active {
    transform: scale(.97);
  }

  .tabs button .mono {
    color: currentColor;
    opacity: .55;
    font-size: 10px;
  }

  .panel {
    display: none;
    gap: var(--spacing-16);
  }

  .panel.is-active {
    display: grid;
  }

  .panel__index {
    color: var(--ink-4);
    font-size: 11px;
  }

  .panel h3 {
    font-size: var(--text-section);
  }

  .panel__body {
    display: grid;
    gap: var(--spacing-16);
    padding-top: var(--spacing-16);
    border-top: 1px solid var(--line);
  }

  .panel__body p {
    color: var(--ink-3);
    font-size: var(--text-body-sm);
    line-height: 1.65;
  }

  .panel__body strong {
    font-size: var(--text-body-sm);
    line-height: 1.5;
  }

  /* ---- journey ---- */
  .journey {
    display: grid;
    gap: var(--spacing-24);
  }

  .journey li {
    position: relative;
    display: grid;
    gap: var(--spacing-8);
    padding-left: var(--spacing-20);
    border-left: 1px solid var(--line);
  }

  .journey li::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -4px;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background: var(--line);
  }

  .journey li.is-current::before {
    background: var(--ink);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 12%, transparent);
  }

  .journey time {
    color: var(--ink-4);
    font-size: 11px;
  }

  .journey strong {
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-display);
    font-size: var(--text-heading-sm);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--display-tracking);
  }

  .journey p {
    color: var(--ink-3);
    font-size: var(--text-body-sm);
    line-height: 1.6;
  }

  /* ---- open questions ---- */
  .case-open__grid {
    display: grid;
    gap: var(--spacing-20);
  }

  .case-open h2 {
    margin-bottom: var(--spacing-20);
    font-size: var(--text-section);
  }

  .case-open__list {
    display: grid;
    gap: var(--spacing-16);
  }

  .case-open__list li {
    padding-bottom: var(--spacing-16);
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    font-size: var(--text-body-sm);
    line-height: 1.6;
  }

  .case-open__note {
    margin-top: 18px;
    color: var(--ink-4);
    font-size: var(--text-caption);
  }

  /* ---- outro ---- */
  .case-outro__actions {
    display: grid;
    gap: var(--spacing-12);
    margin-top: 28px;
  }

  .case-outro__actions .btn {
    width: 100%;
    min-height: 52px;
  }
}

/* =========================================================================
   CASE 03 — competition system (mobile)
   The bracket does not shrink: on a phone it becomes a vertical ladder, so
   an athlete still reads their route top to bottom instead of pinch-zooming.
   ========================================================================= */
@layer layout {
  .case-bracket,
  .case-flow,
  .case-roles,
  .case-surfaces {
    padding: var(--section-pad) 0;
  }

  .case-bracket,
  .case-roles {
    background: var(--surface-cream);
  }

  /* ---- bracket ---- */
  .bracket-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-16);
    padding: var(--spacing-20);
    background: var(--surface-paper);
    border-radius: var(--radius-cards);
    box-shadow: var(--ring);
  }

  .bracket-block__head {
    display: grid;
    gap: var(--spacing-12);
  }

  .bracket-block__stages {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--surface-cream);
    border-radius: var(--radius-full);
  }

  .bracket-block__stages button {
    min-height: 48px;
    border-radius: var(--radius-full);
    color: var(--ink-3);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-medium);
  }

  .bracket-block__stages button[aria-pressed="true"] {
    color: var(--color-paper);
    background: var(--ink);
  }

  .bracket-block__head .pill {
    justify-self: start;
  }

  .bracket {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-24);
  }

  .bracket__wires {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .bracket__wire {
    fill: none;
    stroke: var(--line);
    stroke-width: 1;
  }

  [data-focused="true"] .bracket__wire {
    opacity: .2;
  }

  .bracket__wire[data-lit] {
    stroke: var(--ink);
    opacity: 1;
  }

  .bracket__round {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--spacing-8);
  }

  .bracket__legend {
    margin-bottom: var(--spacing-4);
    color: var(--ink-4);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .bracket__slot {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-8);
    min-height: 48px;
    padding: var(--spacing-8) var(--spacing-12);
    background: var(--surface-paper);
    border-radius: var(--radius-full);
    box-shadow: var(--ring);
    font-size: var(--text-body-sm);
    text-align: left;
  }

  .bracket__seed {
    color: var(--ink-4);
    font-size: 10px;
  }

  .bracket__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bracket__slot[data-known="false"] .bracket__name {
    color: var(--ink-4);
  }

  .bracket__slot[data-lit] {
    color: var(--color-paper);
    background: var(--ink);
    box-shadow: none;
  }

  .bracket__slot[data-lit] .bracket__seed {
    color: color-mix(in srgb, var(--color-paper) 56%, transparent);
  }

  .bracket__slot[data-lit][data-future] {
    color: var(--ink);
    background: var(--surface-paper);
    box-shadow: none;
    outline: 1px dashed var(--ink);
    outline-offset: -1px;
  }

  .bracket__wire[data-future] {
    stroke-dasharray: 3 4;
  }

  .bracket__slot[data-dim] {
    opacity: .34;
  }

  .bracket__slot[data-lost] {
    color: var(--ink-4);
  }

  .bracket__slot--winner {
    grid-template-columns: minmax(0, 1fr);
    background: var(--surface-sand);
    box-shadow: none;
    font-weight: var(--font-weight-medium);
  }

  .bracket__readout {
    padding-top: var(--spacing-12);
    border-top: 1px solid var(--line);
    color: var(--ink-4);
    font-size: 11px;
    line-height: 1.5;
  }

  /* ---- flow ---- */
  .flow {
    display: grid;
    gap: var(--hairline);
    overflow: hidden;
    background: var(--line);
    border-radius: var(--radius-cards);
  }

  .flow li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: var(--spacing-12);
    padding: var(--spacing-20);
    background: var(--surface-paper);
  }

  .flow .mono {
    color: var(--ink-4);
    font-size: 11px;
    line-height: 1.6;
  }

  .flow strong {
    display: block;
    margin-bottom: var(--spacing-4);
    font-family: var(--font-display);
    font-size: var(--text-heading-sm);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--display-tracking);
  }

  .flow p {
    color: var(--ink-3);
    font-size: var(--text-body-sm);
    line-height: 1.6;
  }

  /* ---- roles: a swipe row ---- */
  .roles {
    display: flex;
    gap: var(--spacing-8);
    width: 100vw;
    margin-left: 50%;
    translate: -50% 0;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .roles::-webkit-scrollbar {
    display: none;
  }

  .role {
    flex: none;
    width: min(78vw, 320px);
    scroll-snap-align: start;
    display: grid;
    align-content: start;
    gap: var(--spacing-12);
    padding: var(--spacing-20);
    background: var(--surface-paper);
    border-radius: var(--radius-cards);
    box-shadow: var(--ring);
  }

  .role .mono {
    color: var(--ink-4);
    font-size: 11px;
  }

  .role h3 {
    font-size: var(--text-heading-sm);
  }

  .role__question {
    padding-bottom: var(--spacing-12);
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    font-size: var(--text-body-sm);
  }

  .role ul {
    display: grid;
    gap: var(--spacing-8);
  }

  .role li {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: var(--spacing-8);
    color: var(--ink-3);
    font-size: var(--text-caption);
    line-height: 1.5;
  }

  .role li::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: 7px;
    border-radius: var(--radius-full);
    background: var(--line);
  }

  /* ---- two surfaces of one product ---- */
  .surfaces {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-24);
  }

  .surface {
    display: grid;
    gap: var(--spacing-8);
  }

  .rig__lock {
    color: var(--ink-4);
  }

  .surface__note {
    display: grid;
    justify-items: start;
    gap: var(--spacing-12);
    padding: var(--spacing-20);
    background: var(--surface-cream);
    border-radius: var(--radius-cards);
  }

  .surface__note .pill {
    background: var(--surface-paper);
  }

  .surface__note strong {
    font-family: var(--font-mono);
    font-size: var(--text-body);
    font-weight: var(--font-weight-regular);
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
  }

  .surface__note p {
    color: var(--ink-3);
    font-size: var(--text-body-sm);
    line-height: 1.6;
  }

  .surface--closed .surface__note {
    background: var(--surface-charcoal);
    color: var(--color-paper);
  }

  .surface--closed .surface__note p {
    color: color-mix(in srgb, var(--color-paper) 62%, transparent);
  }

  .surface--closed .pill--beta {
    color: var(--color-paper);
    background: color-mix(in srgb, var(--color-paper) 14%, transparent);
  }
}