@layer components {
  :root.motion-ready .landing .reveal {
    opacity: 0;
    filter: blur(3px);
    transition:
      opacity var(--duration-text-reveal) var(--ease-standard),
      filter var(--duration-text-reveal) var(--ease-standard);

    &.is-revealed { opacity: 1; filter: none; }
  }

  .landing {
    h1, h2, h3 { margin: 0; }

    p { max-inline-size: none; }

    a { color: inherit; }

    ol, ul { padding: 0; list-style: none; }

    svg { display: block; max-inline-size: 100%; }

    button { all: revert-layer; font: inherit; color: inherit; }

    .sr-only {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .svg-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

    .bracketed { position: relative; }

    .bracketed::after,
    .cta::after {
      content: "";
      position: absolute;
      inset: var(--bracket-inset, -0.375rem);
      border: 1.5px solid var(--bracket-color, var(--color-accent));
      pointer-events: none;
      mask:
        linear-gradient(#000 0 0) top left / var(--bracket) var(--bracket) no-repeat,
        linear-gradient(#000 0 0) top right / var(--bracket) var(--bracket) no-repeat,
        linear-gradient(#000 0 0) bottom left / var(--bracket) var(--bracket) no-repeat,
        linear-gradient(#000 0 0) bottom right / var(--bracket) var(--bracket) no-repeat;
      transition: scale var(--duration-fill) var(--ease-out), opacity var(--duration-fill) var(--ease-out);
    }

    .action-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-4);
    }

    .button-wipe {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-block-size: 3rem;
      padding-inline: var(--space-5);
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sharp);
      background: transparent;
      color: var(--color-text);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 500;
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      transition: border-color var(--duration-wipe) var(--ease-in-out);

      &::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: -1;
        inline-size: calc(100% + var(--wipe-feather));
        background: linear-gradient(90deg, var(--color-wipe-fill) calc(100% - var(--wipe-feather)), transparent);
        transform: translateX(-100%);
        transition: transform var(--duration-wipe) var(--ease-in-out);
      }

      &:hover, &:focus-visible { border-color: var(--color-wipe-border); }

      &:hover::before, &:focus-visible::before { transform: translateX(0); }
    }

    .cta {
      position: relative;
      isolation: isolate;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-3);
      min-block-size: 3rem;
      padding-inline: var(--space-5);
      color: var(--color-on-gradient);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 500;
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      filter:
        drop-shadow(0 2px 3px color-mix(in oklch, var(--color-accent) 0%, transparent))
        drop-shadow(0 6px 14px color-mix(in oklch, var(--color-accent) 0%, transparent));
      transition: filter var(--duration-wipe) var(--ease-in-out);

      &::after { transition-duration: var(--duration-wipe); transition-timing-function: var(--ease-in-out); }

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: var(--radius-sharp);
        background: var(--logo-gradient);
      }

      &:hover, &:focus-visible {
        filter:
          drop-shadow(0 2px 3px color-mix(in oklch, var(--color-accent) 10%, transparent))
          drop-shadow(0 6px 14px color-mix(in oklch, var(--color-accent) 16%, transparent));
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      .cta:hover::after, .cta:focus-visible::after { scale: 1.04 1.13; }
    }

    .plan-tag {
      display: inline-flex;
      align-items: center;
      padding: 0.125rem 0.375rem;
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sharp);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      line-height: var(--line-height-tight);
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      color: var(--color-text-muted);

      &.is-free {
        border-color: transparent;
        background: var(--color-accent-soft);
        color: var(--color-accent-on-soft);
      }
    }

    .plan-note {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2);
      margin-block-start: var(--space-5);
      font-size: var(--text-sm);
      color: var(--color-text-muted);

      .plan-tag + span { margin-inline-end: var(--space-3); }
    }

    .photo-slot {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      background: var(--color-photo);

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--photo) center / cover no-repeat;
      }
    }

    .diagram-slot {
      display: grid;
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sharp);
      overflow: hidden;
      background: var(--color-surface);
    }

    .diagram-slot-head {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
    }

    .diagram-slot-head { border-block-end: 1px solid var(--color-border); }

    .fig-tag {
      padding: 0.125rem 0.375rem;
      border: 1px solid var(--color-border-strong);
      color: var(--color-text);
    }

    .status-square {
      flex: none;
      inline-size: 0.375rem;
      block-size: 0.375rem;
      background: var(--color-accent);
    }

    .diagram-drawing {
      inline-size: 100%;
      block-size: auto;
      aspect-ratio: 520 / 390;
      padding: var(--space-5);
      color: var(--color-text-muted);
    }

    .valve-live { display: inline-flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; color: var(--color-text-muted); }

    .live-valve {
      .valve-labels { font-family: var(--font-mono); }

      .valve-pressure { fill: var(--color-accent); opacity: calc(0.06 + var(--pressure, 0) * 0.34); transition: opacity var(--duration-fill) var(--ease-out); }

      .valve-seat-face { fill: none; stroke: var(--color-accent); stroke-width: 2.5; }

      .valve-ring-parts {
        fill: var(--color-accent-faint);
        stroke: currentColor;
        stroke-width: 1.5;
        transition: translate 260ms var(--ease-out);

        [data-ring="raised"] & { translate: 0 -6px; }
      }

      .valve-disc { fill: var(--color-accent-faint); stroke: var(--color-accent); stroke-width: 1.5; stroke-linejoin: round; }

      .valve-moving, .valve-spring { transition: translate 180ms var(--ease-out), scale 180ms var(--ease-out); }

      .valve-spring { transform-origin: 260px 100px; scale: 1 var(--spring, 1); }

      .valve-moving { translate: 0 calc(var(--lift, 0) * -1px); }

      [data-state="open"] & :is(.valve-moving, .valve-spring) { transition-duration: 110ms; transition-timing-function: cubic-bezier(0.2, 1.6, 0.4, 1); }

      .valve-steam {
        stroke: var(--color-accent);
        stroke-width: 2;
        stroke-dasharray: 6 8;
        opacity: 0;
        transition: opacity var(--duration-fill) var(--ease-out);

        path { animation: valve-steam 0.7s linear infinite; }

        .valve-steam-head { fill: var(--color-accent); stroke: none; animation: none; }
      }

      [data-state="simmer"] & .valve-steam { opacity: 0.3; }

      [data-state="open"] & .valve-steam { opacity: 1; }

      .valve-inlet { fill: var(--color-accent); stroke: var(--color-accent); stroke-width: 1.5; }
    }

    .valve-controls {
      display: grid;
      gap: var(--space-4);
      padding: var(--space-4);
      border-block-start: 1px solid var(--color-border);
    }

    .valve-readout {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-2) var(--space-4);
    }

    .valve-pressure-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

    .valve-state {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      color: var(--color-text-muted);

      [data-state="simmer"] & { color: var(--color-text); }

      [data-state="open"] & { color: var(--color-accent); }
    }

    .valve-slider {
      display: grid;
      gap: var(--space-2);

      input { inline-size: 100%; margin: 0; accent-color: var(--color-accent); }
    }

    .valve-slider-label { color: var(--color-text-muted); }

    .valve-scale {
      position: relative;
      block-size: 1rem;
    }

    .valve-tick {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: var(--at);
      translate: -50% 0;
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      color: var(--color-text-muted);
      white-space: nowrap;
      transition: inset-inline-start 260ms var(--ease-out);

      b { font-weight: 500; color: var(--color-text-muted); }

      &:has(+ .valve-tick) { translate: calc(-100% - var(--space-2)) 0; }

    }

    .valve-ring {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2) var(--space-3);

      .mono-label { color: var(--color-text-muted); margin-inline-end: var(--space-1); }

      button {
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-sharp);
        background: transparent;
        color: var(--color-text-muted);
        font: inherit;
        font-size: var(--text-sm);
        cursor: pointer;

        &:hover { color: var(--color-text); }

        &[aria-pressed="true"] {
          border-color: color-mix(in oklch, var(--color-accent) 50%, transparent);
          background: color-mix(in oklch, var(--color-accent) 16%, transparent);
          color: var(--color-text);
        }
      }
    }

    .valve-blowdown {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--space-2) var(--space-3);
      font-variant-numeric: tabular-nums;

      .mono-label { color: var(--color-text-muted); }
    }

    .hero {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: var(--space-10);
      align-items: end;
      padding-block: var(--space-12) var(--space-10);

      h1 {
        font-size: var(--text-5xl);
        font-weight: 300;
        letter-spacing: -0.02em;
        line-height: var(--line-height-display);
        max-inline-size: 12ch;
        margin-block: var(--space-5) var(--space-6);
      }

      .lede {
        max-inline-size: 32em;
        font-size: var(--text-lg);
        color: var(--color-text-muted);
        margin-block-end: var(--space-8);
      }
    }

    .hero-figure {
      display: grid;
      gap: var(--space-2);

      .bracketed { --bracket-color: var(--color-text-subtle); --bracket-inset: -0.5rem; }
    }

    .figure-rule {
      display: flex;
      justify-content: space-between;
      gap: var(--space-4);
      margin-block-start: var(--space-3);
      color: var(--color-text-muted);
    }

    .surface {
      background: var(--color-panel);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sharp);
      box-shadow:
        0 1px 2px var(--color-panel-shadow-near),
        0 6px 18px var(--color-panel-shadow-far);
    }

    .surface.has-rule { position: relative; }

    .metrics {
      display: grid;
    }

    .metric-group {
      display: grid;
      grid-template-columns: 12rem 1fr;
      align-items: center;

      & + & { border-block-start: 1px solid var(--color-border); }
    }

    .metric-group-head {
      display: grid;
      justify-items: start;
      gap: var(--space-2);
      padding: var(--space-5);

      .metric-note { color: var(--color-text-muted); }

      strong {
        font-family: var(--font-display);
        font-size: var(--text-xl);
        font-weight: 400;
      }
    }

    .metric-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      > div {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: var(--space-2);
        padding: var(--space-5);
        border-inline-start: 1px solid var(--color-border);
      }

      dd {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-family: var(--font-display);
        font-size: var(--text-3xl);
        font-weight: 300;
        line-height: 1;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
      }
    }

    .stat-figure {
      display: inline-flex;
      align-items: flex-start;
      block-size: 1em;
      line-height: 1;
    }

    .stat-cell {
      display: inline-block;
      block-size: 1em;
      text-align: center;
      overflow: hidden;

      &.is-blank { visibility: hidden; }
    }

    .stat-tick {
      display: block;
      inline-size: 100%;
      max-inline-size: 6rem;
      block-size: 2px;
      margin-block-start: var(--space-3);
      background: var(--color-border);

      span {
        display: block;
        block-size: 100%;
        background: var(--color-accent);
        transform: scaleX(var(--progress, 1));
        transform-origin: left;
      }
    }

    .section {
      padding-block: var(--space-12) 0;

      h2 {
        font-size: var(--text-3xl);
        font-weight: 300;
        letter-spacing: -0.02em;
        line-height: 1.1;
        max-inline-size: 18ch;
        margin-block-end: var(--space-5);
      }
    }

    .section-index {
      display: flex;
      align-items: baseline;
      gap: var(--space-4);
      margin-block-end: var(--space-8);
      font-family: var(--font-section);
      font-size: var(--text-section);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-text-muted);

      span:first-child { color: var(--color-accent); }

      &::after {
        content: "";
        flex: 1;
        align-self: center;
        block-size: 1px;
        background: var(--color-border);
      }
    }

    .copy p {
      max-inline-size: 34em;
      color: var(--color-text-muted);

      & + p { margin-block-start: var(--space-4); }
    }

    .split {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: var(--space-10);
      align-items: start;
    }

    .card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      padding: var(--space-5);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sharp);
      background: var(--color-panel);
      box-shadow:
        0 1px 2px var(--color-panel-shadow-near),
        0 6px 18px var(--color-panel-shadow-far);
      color: var(--color-text);
      text-decoration: none;
      transition:
        border-color var(--duration-fill) var(--ease-out),
        background-color var(--duration-fill) var(--ease-out);
    }

    .card::before, .surface.has-rule::before {
      content: "";
      position: absolute;
      inset: -1px -1px auto;
      block-size: 2px;
      border-radius: var(--radius-sharp) var(--radius-sharp) 0 0;
      background: var(--logo-gradient-rule);
    }

    a.card:hover, a.card:focus-visible { background: var(--color-panel-hover); }

    .card-arrow {
      position: absolute;
      inset-block-start: var(--space-5);
      inset-inline-end: var(--space-5);
      font-family: var(--font-mono);
      color: var(--color-accent);
      opacity: 0;
      transition: opacity var(--duration-fill) var(--ease-out);
    }

    a.card:hover .card-arrow,
    a.card:focus-visible .card-arrow { opacity: 1; }

    .section .plans-title { max-inline-size: 24ch; }

    .plans {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-5);
    }

    .plan-card {
      gap: var(--space-4);
      padding: var(--space-6);
    }

    .plan-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);

      strong {
        font-family: var(--font-display);
        font-size: var(--text-xl);
        font-weight: 400;
      }
    }

    .plan-price {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: 300;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }

    .plan-desc { max-inline-size: 32em; color: var(--color-text-muted); }

    .plan-facts {
      display: grid;
      border-block-start: 1px solid var(--color-border);

      li {
        display: flex;
        justify-content: space-between;
        gap: var(--space-4);
        padding-block: var(--space-2);
        border-block-end: 1px solid var(--color-border);
        font-size: var(--text-sm);

        span:first-child { color: var(--color-text-muted); }
        span:last-child { text-align: end; font-variant-numeric: tabular-nums; }
      }
    }

    .plan-actions { padding-block-start: var(--space-2); }

    .steps > li, .unit-grid > li { display: grid; }

    .steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
      gap: var(--space-5);
    }

    .step-card {
      gap: var(--space-3);
      padding-block-start: var(--space-5);

      h3 { font-size: var(--text-lg); font-weight: 500; }

      p { font-size: var(--text-sm); color: var(--color-text-muted); }

      .step-detail {
        margin-block-start: auto;
        padding-block-start: var(--space-3);
        border-block-start: 1px solid var(--color-border);
        color: var(--color-text);
      }
    }

    .step-top {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      margin-block-end: var(--space-2);
    }

    .step-icon-tile {
      display: grid;
      place-items: center;
      inline-size: 2.5rem;
      block-size: 2.5rem;
      border-radius: var(--radius-sharp);
      background: var(--color-hover-wash);
    }

    .step-icon {
      inline-size: 1.5rem;
      block-size: 1.5rem;
      color: var(--color-text-subtle);
      transition: color var(--duration-fill) var(--ease-out);
    }

    a.card:hover .step-icon,
    a.card:focus-visible .step-icon { color: var(--color-accent); }

    .step-number { color: var(--color-accent); }

    .units-head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-3);
      margin-block: var(--space-10) var(--space-5);

      h3 { font-size: var(--text-xl); font-weight: 400; }
    }

    .unit-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
      gap: var(--space-3);
    }

    .landing-unit {
      gap: var(--space-2);
      padding: var(--space-4) var(--space-5);
      min-block-size: 7rem;

      .unit-name { font-size: 0.9375rem; line-height: var(--line-height-tight); }

      .unit-meta {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-block-start: auto;
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        font-variant-numeric: tabular-nums;
      }

      .card-arrow { inset-block: auto var(--space-4); }

      .landing-unit-head { display: flex; align-items: center; gap: var(--space-3); }

      .landing-unit-title { display: grid; gap: var(--space-1); min-inline-size: 0; }

      .unit-glyph {
        flex: none;
        inline-size: 28px;
        block-size: 28px;
        color: var(--color-text-subtle);
        transition: color var(--duration-wipe) var(--ease-in-out);
      }

      &:hover .unit-glyph, &:focus-visible .unit-glyph { color: var(--color-accent); }
    }

    .chapter-ticks {
      display: block;
      block-size: 0.625rem;
      inline-size: calc(var(--chapters) * 0.5rem);
      background: repeating-linear-gradient(90deg, var(--color-text-subtle) 0 2px, transparent 2px 0.5rem);
    }

    .sample-q .diagram {
      max-inline-size: var(--measure);
      margin: 0;
      padding: var(--space-4);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sharp);
      background: var(--color-surface);

      svg { inline-size: 100%; block-size: auto; color: var(--color-text-muted); }
    }

    .sample-q .q2-diagram { min-inline-size: 0; }

    .foot-valve {
      --fv-water: color-mix(in oklch, var(--color-accent) 26%, transparent);
      display: grid;
      gap: var(--space-3);

      .fv-labels { font-family: var(--font-mono); }

      .fv-water-static { fill: var(--fv-water); }

      .fv-surface { stroke: var(--color-accent); stroke-width: 1; opacity: 0.6; }

      .fv-fill { fill: var(--fv-water); transform-box: fill-box; transition: scale 0.6s var(--ease-out); }

      .fv-fill-suction, .fv-fill-casing, .fv-fill-discharge-riser { transform-origin: bottom; scale: 1 0; }

      .fv-fill-elbow, .fv-fill-discharge { transform-origin: left; scale: 0 1; }

      .fv-fill-supply { transform-origin: right; scale: 0 1; }

      .fv-flap { fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; transform-origin: 166px 320px; transition: rotate 0.25s var(--ease-out); }

      .fv-hinge { fill: var(--color-accent); }

      .fv-impeller { transform-origin: 272px 106px; }

      .fv-valve { fill: transparent; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; transition: fill 0.3s var(--ease-out); }

      .fv-flow { stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 6 8; opacity: 0; transition: opacity 0.3s var(--ease-out); }

      .fv-flow path { animation: fv-flow 0.8s linear infinite; }

      &.is-paused :is(.fv-flow path, .fv-impeller, .fv-spurt) { animation-play-state: paused; }

      .fv-spurt { fill: var(--color-accent); opacity: 0; }

      &[data-phase="priming"] {
        .fv-fill-supply { scale: 1 1; transition-duration: 0.5s; }

        .fv-fill-suction { scale: 1 1; transition: scale 2.2s linear 0.5s; }

        .fv-fill-elbow { scale: 1 1; transition: scale 0.5s linear 2.7s; }

        .fv-fill-casing { scale: 1 1; transition: scale 0.8s linear 3.2s; }

        :is(.fv-valve-supply, .fv-valve-vent) { fill: var(--color-accent); }

        .fv-flow-supply { opacity: 1; }
      }

      &:is([data-phase="primed"], [data-phase="running"], [data-phase="stopped"]) {
        :is(.fv-fill-supply, .fv-fill-suction, .fv-fill-elbow, .fv-fill-casing) { scale: 1 1; }
      }

      &[data-phase="primed"] .fv-spurt { animation: fv-spurt 0.9s var(--ease-out) 2; }

      &[data-phase="running"] {
        :is(.fv-fill-discharge-riser) { scale: 1 1; transition-duration: 0.3s; }

        .fv-fill-discharge { scale: 1 1; transition: scale 0.8s linear 0.3s; }

        .fv-valve-discharge { fill: var(--color-accent); }

        .fv-flap { rotate: -58deg; }

        .fv-impeller { animation: fv-spin 0.6s linear infinite; }

        .fv-flow-run { opacity: 1; }
      }

      &[data-phase="stopped"] :is(.fv-fill-discharge, .fv-fill-discharge-riser) { scale: 1 1; }

      &[data-phase="empty"] .fv-fill { transition-duration: 0.5s; }
    }

    .fv-caption {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: start;
      gap: var(--space-3);
      padding-block-start: var(--space-3);
      border-block-start: 1px solid var(--color-border);
      font-size: var(--text-sm);
      color: var(--color-text-muted);

      .fv-step { padding-block-start: 0.15rem; color: var(--color-accent); white-space: nowrap; }

      .fv-text { min-block-size: 2lh; }
    }

    .fv-toggle {
      padding: var(--space-1) var(--space-3);
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sharp);
      background: transparent;
      color: var(--color-text-muted);
      font: inherit;
      font-size: var(--text-xs);
      cursor: pointer;

      &:hover { color: var(--color-text); }
    }

    .sample-intro { max-inline-size: var(--measure, 40rem); margin-block-end: var(--space-8); }

    sample-question { display: contents; }

    .sample-q {
      --measure: 40rem;
      display: grid;
      gap: var(--space-5);
      min-inline-size: 0;

      fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }

      legend { padding: 0; }

      h3 { font-weight: 400; }

      .panel {
        position: relative;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sharp);
        background: var(--color-panel);
        color: var(--color-text);
        box-shadow: 0 1px 2px var(--color-panel-shadow-near), 0 6px 18px var(--color-panel-shadow-far);
      }

      .sample-meta { display: flex; flex-wrap: wrap; justify-content: space-between; justify-self: stretch; gap: var(--space-2) var(--space-4); color: var(--color-text-muted); }

      .q2-question { display: grid; gap: var(--space-5); justify-items: start; min-inline-size: 0; }

      .q2-question :is(.choices, fieldset, .stem) { inline-size: 100%; }

      legend.stem { margin-block-end: var(--space-5); }

      .sample-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

      .stem {
        max-inline-size: var(--measure);
        font-size: var(--text-lg);
        line-height: 1.55;
      }

      .choices {
        --choice-bg: var(--color-panel);
        display: grid;
        gap: var(--space-3);
      }

      .choice {
        position: relative;
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: var(--space-4);
        align-items: start;
        padding: var(--space-4);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-sharp);
        background: var(--choice-bg);
        transition:
          border-color var(--duration-fill) var(--ease-out),
          background-color var(--duration-fill) var(--ease-out),
          box-shadow var(--duration-fill) var(--ease-out);
      }

      label.choice {
        cursor: pointer;

        &:hover { background: color-mix(in oklch, var(--color-text) 4%, var(--choice-bg)); }

        &:has(.choice-input:checked) {
          border-color: var(--color-text);
          box-shadow: inset 0 0 0 1px var(--color-text);

          .choice-letter { border-color: var(--color-text); background: var(--color-text); color: var(--choice-bg); }
        }

        &:has(.choice-input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 3px; }
      }

      .q2-grid {
        display: grid;
        gap: var(--space-6);
        align-items: start;
      }

      .panel-actions { display: flex; justify-content: flex-end; padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border); }

      @media (min-width: 64rem) {
        .q2-grid {
          grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
          grid-template-rows: auto 1fr;
          column-gap: var(--space-8);
        }

        .q2-question { grid-column: 1; grid-row: 1; }

        .q2-panel { grid-column: 2; grid-row: 1 / span 2; }

        .q2-diagram { grid-column: 1; grid-row: 2; }

        .q2-panel.is-entering { animation-name: panel-slide; }
      }

      .choice-input {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: 0;
        opacity: 0;
      }

      .choice-letter {
        display: grid;
        place-items: center;
        inline-size: 2rem;
        block-size: 2rem;
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-sharp);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-text-muted);
        transition: background-color var(--duration-fill) var(--ease-out), color var(--duration-fill) var(--ease-out);
      }

      .choice-text { padding-block-start: 0.2rem; }

      .choice-body { display: grid; min-inline-size: 0; }

      .choice-mark {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: var(--space-3);
        translate: 0 -50%;
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding-inline: var(--space-2);
        background: var(--mark-bg, var(--color-surface));
        line-height: 1.4;
        white-space: nowrap;
      }

      .choice.is-correct {
        border-color: var(--color-correct);
        background: color-mix(in oklch, var(--color-accent) 9%, var(--choice-bg));

        .choice-letter { border-color: transparent; background: var(--logo-gradient); color: var(--color-on-gradient); }

        .choice-mark { color: var(--color-correct); }
      }

      .choice.is-incorrect {
        border-color: var(--color-incorrect);
        background: color-mix(in oklch, var(--color-incorrect) 8%, var(--choice-bg));

        .choice-letter { border-color: var(--color-incorrect); color: var(--color-incorrect); }

        .choice-mark { color: var(--color-incorrect); }
      }

      .choice.is-other {
        border-color: var(--color-border);
        color: var(--color-text-muted);

        .choice-letter { border-color: var(--color-border); color: var(--color-text-muted); }
      }

      .verdict {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--text-lg);
        font-weight: 500;
        line-height: var(--line-height-tight);

        &:focus { outline: none; }

        .glyph { inline-size: 1.125rem; block-size: 1.125rem; }

        &.is-correct { color: var(--color-correct); }

        &.is-incorrect, &.is-unanswered { color: var(--color-incorrect); }
      }

      .explain-text {
        max-inline-size: var(--measure);
        line-height: var(--line-height-relaxed);
        color: var(--color-text-muted);
      }

      .q2-question .choices { inline-size: 100%; }

      .q2-panel {
        display: grid;
        gap: var(--space-5);
        padding: var(--space-6);
        scroll-margin-block-start: 8rem;

        &.is-entering { animation: panel-in var(--duration-spring) var(--ease-out) both; }
      }

      .q2-panel .explain-text { font-size: var(--text-base); }

      .q2-panel::after {
        content: "";
        position: absolute;
        inset: var(--space-2);
        border: 1px solid color-mix(in oklch, var(--color-accent) 35%, transparent);
        pointer-events: none;
        mask:
          linear-gradient(#000 0 0) top left / 0.625rem 0.625rem no-repeat,
          linear-gradient(#000 0 0) top right / 0.625rem 0.625rem no-repeat,
          linear-gradient(#000 0 0) bottom left / 0.625rem 0.625rem no-repeat,
          linear-gradient(#000 0 0) bottom right / 0.625rem 0.625rem no-repeat;
      }

      .panel-head {
        display: flex;
        justify-content: space-between;
        gap: var(--space-3);
        padding-block-end: var(--space-3);
        border-block-end: 1px dashed var(--color-border-strong);
      }

      .panel-head-title {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--color-accent);

        .glyph { inline-size: 0.875rem; block-size: 0.875rem; }
      }

      .explain-right {
        padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
        border-inline-start: 2px solid var(--color-accent);
        background: color-mix(in oklch, var(--color-accent) 7%, transparent);

        h3 { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); }
      }

      .letter-chip.is-key {
        grid-row: auto;
        inline-size: 1.375rem;
        block-size: 1.375rem;
        border-color: transparent;
        background: var(--logo-gradient);
        color: oklch(0.2 0.01 260);
      }

      .q2-panel .explain-text.is-right { color: var(--color-text); }

      .explain {
        display: grid;
        gap: var(--space-3);
      }

      .why-list {
        display: grid;
        gap: var(--space-4);

        > div { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); }

        dt { display: contents; }

        .chosen-tag { grid-column: 2; grid-row: 1; color: var(--color-incorrect); }

        dd { grid-column: 2; font-size: var(--text-sm); line-height: var(--line-height-relaxed); color: var(--color-text-muted); }

        .is-chosen dd { color: var(--color-text); }
      }

      .letter-chip {
        grid-row: 1 / span 2;
        display: grid;
        place-items: center;
        inline-size: 1.75rem;
        block-size: 1.75rem;
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-sharp);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--color-text-muted);

        .is-chosen & { border-color: var(--color-incorrect); color: var(--color-incorrect); }
      }
    }

    .closing {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--space-8);
      margin-block-end: var(--space-12);
      padding: var(--space-8);

      h2 { margin-block-end: var(--space-4); }

      .plan-note { margin-block-start: var(--space-4); }
    }

    @media (max-width: 62.4375rem) {
      .hero { grid-template-columns: 1fr; }

      .hero-figure { display: none; }
    }

    @media (max-width: 45rem) {
      .metric-group { grid-template-columns: 1fr; }

      .metric-group-head { padding-block-end: 0; grid-template-columns: auto auto auto; justify-content: start; align-items: center; column-gap: var(--space-3); }

      .metric-row {
        grid-template-columns: 1fr 1fr;

        > div:nth-child(odd) { border-inline-start: 0; }

        > div:nth-child(n + 3) { border-block-start: 1px solid var(--color-border); }

        dd { font-size: var(--text-2xl); }
      }

      .split {
        grid-template-columns: 1fr;
        gap: var(--space-8);
      }

      .plans {
        grid-template-columns: 1fr;
        gap: var(--space-5);
      }

      .closing {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        justify-items: start;
      }
    }

    @media (max-width: 32rem) {

      .hero {
        padding-block: var(--space-10) var(--space-8);

        h1 { font-size: var(--text-3xl); }
      }

      .section {
        padding-block-start: var(--space-10);

        h2 { font-size: var(--text-2xl); }
      }

      .plan-card { padding: var(--space-5); }

      .closing { padding: var(--space-6) var(--space-5); }

    }

    .compare-prices { display: grid; gap: var(--space-5); }
    .compare-prices .plan-price { font-size: var(--text-xl); }

    .price-plan {
      display: grid;
      justify-items: start;
      gap: var(--space-2);

      strong { font-size: var(--text-lg); font-weight: 500; color: var(--color-text); }
    }

    .compare-prices :is(.plan-tag, .save-badge) { white-space: normal; overflow-wrap: anywhere; }

    @media (max-width: 32rem) {
      .compare-prices .badge-more { display: none; }
    }

    .price-or {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      color: var(--color-text-muted);

      &::before, &::after { content: ""; flex: 1; border-block-start: 1px solid var(--color-border-strong); }
    }

    .price-plan-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2) var(--space-3);
    }

    .save-badge {
      padding: 0.1875rem 0.5rem;
      border-radius: var(--radius-sharp);
      background: var(--color-accent-soft);
      color: var(--color-accent-on-soft);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      white-space: nowrap;
    }

    .plans-page {
      display: grid;
      justify-items: center;
      gap: var(--space-10);
      padding-block: var(--space-8) var(--space-10);
    }

    .plans-head {
      display: grid;
      justify-items: center;
      gap: var(--space-4);
      text-align: center;
    }

    .eyebrow {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: var(--space-3);
    }

    .page-title {
      font-size: var(--text-5xl);
      font-weight: 300;
      letter-spacing: -0.02em;
      line-height: var(--line-height-display);
      text-wrap: balance;
    }

    .plans-page .lede {
      max-inline-size: 34em;
      font-size: var(--text-lg);
      color: var(--color-text-muted);
      text-wrap: pretty;
    }

    .plans-notice {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
      border-inline-start: 2px solid var(--color-border-strong);
      background: var(--color-panel);
      font-size: var(--text-sm);
    }

    .plans-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-6);
      inline-size: min(100%, 52rem);
    }

    .plans-grid .plan-card.is-featured {
      --bracket-inset: -0.5625rem;
      background: color-mix(in oklch, var(--color-accent) 7%, var(--color-panel));
      box-shadow:
        0 1px 2px var(--color-panel-shadow-near),
        0 20px 44px var(--color-panel-shadow-far);
    }

    .plan-head {
      display: grid;
      align-content: start;
      justify-items: start;
      gap: var(--space-3);
    }

    .plan-name {
      font-size: var(--text-3xl);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: var(--line-height-tight);
    }

    .billing-tag { background: none; color: var(--color-text); }

    .plan-figure {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0 var(--space-3);
    }

    .plan-amount {
      font-family: var(--font-display);
      font-size: var(--text-4xl);
      font-weight: 300;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .plan-was { font-size: var(--text-xl); color: var(--color-text-muted); text-decoration-thickness: 1.5px; }

    .plan-per { font-size: var(--text-base); color: var(--color-text-muted); }

    .plan-tax { font-size: var(--text-sm); color: var(--color-text-subtle); }

    .plan-meta {
      display: grid;
      align-content: start;
      gap: var(--space-2);
      padding-block: var(--space-4) var(--space-2);
      border-block-start: 1px solid var(--color-border);
      font-size: var(--text-sm);
      color: var(--color-text-muted);

      li {
        display: flex;
        align-items: center;
        gap: var(--space-2);

        &::before { content: "✓"; color: var(--color-text-subtle); }
      }
    }

    .plan-card.is-featured .plan-meta li::before { color: var(--color-accent); }

    .plan-action {
      margin-block-start: auto;
      padding-block-start: var(--space-4);

      > a { inline-size: 100%; }
    }

    .fine-print {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-1) var(--space-5);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      text-align: center;
    }

    .plans-includes {
      display: grid;
      justify-items: center;
      gap: var(--space-4);
      inline-size: min(100%, 64rem);
    }

    .includes-list {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      inline-size: 100%;
      border-block: 1px solid var(--color-border);

      > li {
        display: grid;
        align-content: start;
        gap: 0.125rem;
        padding: var(--space-4);
      }

      > li + li { border-inline-start: 1px solid var(--color-border); }
    }

    .include-detail { font-size: var(--text-sm); line-height: var(--line-height-tight); color: var(--color-text-muted); }

    .faq {
      display: grid;
      gap: var(--space-4);
      inline-size: min(100%, 44rem);
    }

    .faq-title {
      font-family: var(--font-section);
      font-size: var(--text-section);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-text-muted);
    }

    .faq-list { border-block-start: 1px solid var(--color-border); }

    .faq-item {
      border-block-end: 1px solid var(--color-border);

      summary {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-4);
        padding-block: var(--space-4);
        list-style: none;
        cursor: pointer;

        &::-webkit-details-marker { display: none; }

        &::after {
          content: "+";
          flex: none;
          font-family: var(--font-mono);
          color: var(--color-accent);
          transition: rotate var(--duration-fill) var(--ease-out);

          @media (prefers-reduced-motion: reduce) {
            transition: none;
          }
        }
      }

      &[open] summary::after { rotate: 45deg; }

      p {
        max-inline-size: 36em;
        padding-block-end: var(--space-4);
        color: var(--color-text-muted);
      }
    }

    .return-page {
      display: grid;
      justify-items: center;
      padding-block: var(--space-10) var(--space-12);
    }

    .return-card { inline-size: min(100%, 32rem); }

    .return-waiting {
      display: grid;
      justify-items: center;
      gap: var(--space-4);
      text-align: center;
    }

    .return-title {
      font-size: var(--text-3xl);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: var(--line-height-tight);
    }

    .return-plan { font-size: var(--text-lg); }

    .return-action { padding-block-start: var(--space-2); }

    .return-note, .return-copy { color: var(--color-text-muted); }

    @media (max-width: 55.9375rem) {
      .includes-list {
        grid-template-columns: minmax(0, 1fr);

        > li { padding-inline: 0; }

        > li + li { border-inline-start: 0; border-block-start: 1px solid var(--color-border); }
      }
    }

    @media (max-width: 47.9375rem) {
      .plans-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    }

    @media (max-width: 32rem) {
      .page-title { font-size: var(--text-3xl); }

      .plans-page .lede { font-size: var(--text-base); }

      .plans-page { gap: var(--space-8); padding-block: var(--space-6) var(--space-10); }

      .plans-head { gap: var(--space-3); }

      .plan-amount { font-size: var(--text-3xl); }

      .plan-name { font-size: var(--text-2xl); }

      .plans-page :is(.plan-tag, .save-badge) { white-space: normal; overflow-wrap: anywhere; }

      .plan-action > a { white-space: normal; text-align: center; }
    }
  }

  @keyframes valve-steam {
    to { stroke-dashoffset: -28; }
  }
  @keyframes panel-in {
    from { opacity: 0; }
  }
  @keyframes panel-slide {
    from { opacity: 0; translate: var(--space-8) 0; }
  }
  @keyframes fv-flow {
    to { stroke-dashoffset: -28; }
  }
  @keyframes fv-spin {
    to { rotate: 360deg; }
  }
  @keyframes fv-spurt {
    0% { opacity: 0; translate: 0 6px; }
    30% { opacity: 1; }
    100% { opacity: 0; translate: 0 -8px; }
  }
}