/* ==========================================================================
   Baiond — Section patterns (Phase 4.1 home page · 4.2 polish pass)
   --------------------------------------------------------------------------
   Consumes tokens.css; structure from utilities.css. components.css owns the
   shared identity (buttons, cards, panels, hero, device frame, CTA strip);
   this file adds the section-level compositions:

     1. Hero video (poster → loop) + film modal + the player chrome
     2. Section helpers (note, reveal, "more" row)
     3. Story: the sticky pattern (industries; platform concepts)
     4. Proof: snap carousel of case cards
     5. How it works: the data-journey rail
     6. Resource CTA + form fields
     7. Sensors: photo bento + custom-built feature
     8. Plan cards (recommended tier in the orbit frame)
     9. Insights: thumbnail grid
    10. Reduced motion
   ========================================================================== */

@layer components {

  /* ======================================================================
     1. HERO VIDEO — the poster is the LCP image; the loop fades in over it
        once it actually plays (site.js adds .is-playing). The play link is
        the full film (modal).
     ====================================================================== */

  .media-frame--video { isolation: isolate; }

  .media-frame__poster,
  .media-frame__video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .media-frame__poster { display: block; z-index: 0; }
  .media-frame__poster img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  .media-frame__video {
    z-index: 1;
    object-fit: cover;
    opacity: 0;
    transition: opacity 700ms var(--ease-standard);
  }

  .media-frame--video.is-playing .media-frame__video { opacity: 1; }

  .media-frame--video .media-frame__play,
  .media-frame--video .media-frame__caption { z-index: 2; }

  /* Film modal — native dialog, black backdrop, 16:9 frame */
  .film {
    position: fixed;
    inset: 0;
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    inline-size: min(96vw, calc((100dvh - 5rem) * 16 / 9), 100rem);
    max-inline-size: 96vw;
    max-block-size: 100dvh;
    color: var(--white);
    overflow: visible;
  }

  .film:not([open]) { display: none; }
  .film::backdrop { background: rgb(0 0 0 / 0.9); }
  .film[open] { animation: film-in var(--duration-slow) var(--ease-emphasized); }

  @keyframes film-in {
    from { opacity: 0; scale: 0.98; }
    to   { opacity: 1; scale: 1; }
  }

  .film__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--black);
    border: 1px solid rgb(255 255 255 / 0.16);
  }

  .film__video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    background: var(--black);
  }

  .film__close {
    position: absolute;
    inset-inline-end: var(--space-3);
    inset-block-start: var(--space-3);
    z-index: 4;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    background: rgb(0 0 0 / 0.55);
    color: var(--white);
    border-color: rgb(255 255 255 / 0.3);
    transition: opacity var(--duration-normal) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
  }

  .film__close:hover { background: var(--lime); color: var(--black); border-color: var(--lime); }

  /* --- The player chrome ------------------------------------------------
     `--played` / `--buffered` are set by site.js; data-state, data-muted,
     data-fullscreen and data-idle switch the icons and the visibility. */
  .player {
    --played: 0%;
    --buffered: 0%;
    color: var(--white);
  }

  .player__video { cursor: pointer; }

  .player__big {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 2;
    inline-size: 5.5rem;
    block-size: 5.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: opacity var(--duration-normal) var(--ease-standard), scale var(--duration-normal) var(--ease-out-back);
  }

  .player__big .play-disc { inline-size: 100%; block-size: 100%; }
  .player__big:hover { scale: 1.06; }
  .player[data-state="playing"] .player__big { opacity: 0; pointer-events: none; scale: 0.9; }

  .player__bar {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-3) var(--space-3);
    background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.35) 55%, transparent);
    transition: opacity var(--duration-normal) var(--ease-standard), translate var(--duration-normal) var(--ease-standard);
  }

  .player[data-idle] .player__bar,
  .player[data-idle] .film__close { opacity: 0; translate: 0 4px; pointer-events: none; }
  .player[data-idle] { cursor: none; }

  .player__btn {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--white);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }

  .player__btn:hover { background: rgb(255 255 255 / 0.14); }
  .player__btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
  .player__btn .icon { --icon-size: 1.25rem; }

  .player__ico { display: none; line-height: 0; }
  .player[data-state="paused"]  .player__ico--play,
  .player[data-state="playing"] .player__ico--pause,
  .player:not([data-muted]) .player__ico--sound,
  .player[data-muted] .player__ico--muted,
  .player:not([data-fullscreen]) .player__ico--enter,
  .player[data-fullscreen] .player__ico--exit { display: block; }

  .player__time {
    display: inline-flex;
    gap: 0.35em;
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--paper-85);
    padding-inline: var(--space-1);
  }

  .player__time-sep { opacity: 0.5; }

  .player__scrub {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    block-size: 1.75rem;
    cursor: pointer;
    touch-action: none;
    border-radius: var(--radius-md);
  }

  .player__scrub:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

  .player__track {
    position: relative;
    display: block;
    inline-size: 100%;
    block-size: 4px;
    border-radius: var(--radius-full);
    background: rgb(255 255 255 / 0.22);
    transition: block-size var(--duration-fast) var(--ease-standard);
  }

  .player__scrub:hover .player__track,
  .player__scrub:focus-visible .player__track { block-size: 6px; }

  .player__buffered,
  .player__played {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: inherit;
  }

  .player__buffered { inline-size: var(--buffered); background: rgb(255 255 255 / 0.28); }
  .player__played   { inline-size: var(--played);   background: var(--lime); }

  .player__knob {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--played);
    inline-size: 0.85rem;
    block-size: 0.85rem;
    translate: -50% -50%;
    scale: 0;
    border-radius: var(--radius-full);
    background: var(--lime);
    box-shadow: 0 0 0 4px rgb(202 232 37 / 0.25);
    transition: scale var(--duration-fast) var(--ease-out-back);
  }

  .player__scrub:hover .player__knob,
  .player__scrub:focus-visible .player__knob { scale: 1; }

  .player:fullscreen { border-radius: 0; border: 0; }
  .player:fullscreen .player__video { object-fit: contain; }

  /* ======================================================================
     2. SECTION HELPERS
     ====================================================================== */

  .section-note {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
  }

  .ask-showcase { --ask-max: 70rem; }

  /* Scroll reveal — opt-in via [data-reveal]; site.js adds .is-in when the
     element enters the viewport. Only applies once JS has announced itself
     (html[data-js]) so nothing is hidden without it. [data-reveal-stagger]
     reveals the children in sequence instead of the container. */
  /* Wrapped in :where() so the revealed state stays at class specificity
     (0,1,0) — a card's :hover lift (0,2,0) must beat the reveal's
     `translate: 0 0` once the card is in. */
  :where(html[data-js]) :where([data-reveal]:not([data-reveal-stagger])) {
    opacity: 0;
    translate: 0 18px;
    transition: opacity var(--duration-reveal) var(--ease-emphasized),
                translate var(--duration-reveal) var(--ease-emphasized);
  }

  :where(html[data-js]) :where([data-reveal]:not([data-reveal-stagger])).is-in {
    opacity: 1;
    translate: 0 0;
  }

  :where(html[data-js]) :where([data-reveal-stagger]) > :where(*) {
    opacity: 0;
    translate: 0 16px;
    transition: opacity var(--duration-reveal) var(--ease-emphasized),
                translate var(--duration-reveal) var(--ease-emphasized);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  :where(html[data-js]) :where([data-reveal-stagger]).is-in > :where(*) {
    opacity: 1;
    translate: 0 0;
  }

  /* "More …" row under a listing: label, chips, one button */
  .more-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-5);
    padding-block-start: var(--space-5);
    border-top: 1px solid var(--color-border);
  }

  .more-row__label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .more-row__list { flex: 1 1 20rem; }

  .more-row__chip {
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }

  .more-row__chip .icon { --icon-size: 0.9rem; color: var(--color-accent-ink); }
  /* Chips fill lime on hover (a lime border alone vanishes on white). */
  .more-row__chip:hover { background: var(--lime); border-color: var(--hover-border); color: var(--black); }
  .more-row__chip:hover .icon { color: var(--black); }

  /* ======================================================================
     3. STORY — the sticky pattern (industries, platform concepts). Left:
        the menu, sticky, with a rail that fills as you scroll. Right: one
        panel per item — copy beside its media (photo cover or a framed
        product visual), stacked copy-then-media on small screens.
     ====================================================================== */

  .story {
    display: grid;
    gap: var(--space-5);
  }

  @media (min-width: 64em) {
    .story {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: var(--space-8);
      align-items: start;
    }
  }

  .story__heading {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
  }

  .story__nav { display: none; }

  @media (min-width: 64em) {
    .story__nav {
      display: block;
      position: sticky;
      inset-block-start: calc(var(--header-offset, 5rem) + var(--space-5));
    }
  }

  .story__list {
    position: relative;
    display: grid;
    gap: var(--space-1);
    padding-inline-start: var(--space-4);
  }

  /* the rail: hairline track, lime fill = progress through the panels */
  .story__list::before,
  .story__list::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: 2px;
    border-radius: var(--radius-full);
  }

  .story__list::before { block-size: 100%; background: var(--color-border); }

  .story__list::after {
    block-size: var(--story-progress, 0%);
    background: var(--lime);
    transition: block-size var(--duration-slow) var(--ease-emphasized);
  }

  .story__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    background: var(--color-bg);   /* opaque: a stray triangle never shows through a tab */
    color: var(--color-text-muted);
    text-decoration: none;
    transition: border-color var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard);
  }

  .story__link:hover { color: var(--color-text); }

  .story__link[aria-current="true"] {
    color: var(--color-text);
    border-color: var(--color-border);
    background: var(--color-bg-raised);
  }

  .story__link-icon {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background-color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
  }

  .story__link-icon .icon { --icon-size: 1.05rem; }

  /* active: solid lime, black glyph (the lighter --lime does the softening) */
  .story__link[aria-current="true"] .story__link-icon {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
  }

  .story__link-body { display: grid; gap: 0.1rem; min-inline-size: 0; }
  .story__link-name { font-size: var(--text-sm); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); }
  .story__link-caption { font-size: var(--text-xs); color: var(--color-text-subtle); }
  .story__link[aria-current="true"] .story__link-caption { color: var(--color-text-muted); }

  .story__panels {
    display: grid;
    gap: var(--space-4);
  }

  .story__panel {
    display: grid;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    scroll-margin-block-start: calc(var(--header-offset, 5rem) + var(--space-5));
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), translate var(--duration-normal) var(--ease-standard);
  }

  .story__panel:hover { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }

  @media (min-width: 56em) {
    .story__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  }

  .story__copy {
    display: grid;
    gap: var(--space-3);
    align-content: center;
    justify-items: start;
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  }

  .story__name .icon { --icon-size: 1rem; color: var(--color-accent-ink); }

  .story__caption {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--font-medium);
    text-wrap: balance;
  }

  .story__caption a { color: inherit; text-decoration: none; }
  .story__caption a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 0.15em; }

  .story__text {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    text-wrap: pretty;
    max-width: 34rem;
  }

  .story__more { margin-block-start: var(--space-2); }
  .story__more .icon { transition: translate var(--duration-fast) var(--ease-standard); }
  .story__panel:hover .story__more .icon { translate: 4px 0; }

  .story__media {
    position: relative;
    min-inline-size: 0;
  }

  /* photo cover: fills its column, drifts with the scroll */
  .story__media--cover {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg-raised);
  }

  @media (min-width: 56em) {
    .story__media--cover { aspect-ratio: auto; min-block-size: 22rem; }
  }

  .story__media--cover picture {
    position: absolute;
    inset: 0;
    display: block;
  }

  .story__media--cover img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    scale: 1.04;
    transition: scale var(--duration-slow) var(--ease-standard);
  }

  .story__panel:hover .story__media--cover img { scale: 1.08; }

  /* no photo yet: the black ground with a faint lime bloom */
  .story__media--art {
    background:
      radial-gradient(60% 50% at 80% 20%, color-mix(in oklab, var(--lime) 22%, transparent) 0%, transparent 70%),
      var(--black);
  }

  /* framed product visual (device frame or the Ask card) on a quiet ground */
  .story__media--frame {
    display: grid;
    align-items: center;
    padding: clamp(1rem, 0.5rem + 1.5vw, 2rem);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
  }

  @media (min-width: 56em) {
    .story__media--frame { border-block-start: 0; border-inline-start: 1px solid var(--color-border); }
  }

  .story__media--frame .ask { --ask-max: 100%; }

  /* An illustration in the frame (the old site's concept graphics, review
     switch $howLegacyArt in home.php): a white card, no device chrome —
     they are drawings, not screens. Kept in the dark scheme too: the
     artwork has its own white ground baked in. */
  .concept-art {
    padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--white);
  }

  .concept-art img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  /* Scroll-driven drift: the photo travels ~8 % of its height while the
     panel crosses the viewport. Pure CSS; without support it just sits. */
  @supports (animation-timeline: view()) {
    .story__media--cover img {
      scale: 1.12;
      animation: story-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .story__panel:hover .story__media--cover img { scale: 1.12; }
  }

  @keyframes story-drift {
    from { translate: 0 -4%; }
    to   { translate: 0 4%; }
  }

  .concepts__more { font-size: var(--text-base); }

  /* ======================================================================
     4. PROOF — a scroll-snap rail of case cards: photo left, quote (or
        lead), the client's numbers, link. Cards peek past the content edge
        so the swipe invites itself; prev / next + count + progress above.
     ====================================================================== */

  .cases__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
  }

  .cases__bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 0 1 22rem;
  }

  /* Centred variant: title in the middle, the control bar under it. */
  .cases__head--center {
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }

  .cases__head--center .cases__bar { flex: 0 1 auto; inline-size: min(100%, 22rem); }

  html:not([data-js]) .cases__bar,
  [data-carousel-single] ~ * .cases__bar { display: none; }

  .cases__count {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  .cases__progress {
    position: relative;
    flex: 1 1 6rem;
    block-size: 2px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    overflow: hidden;
  }

  .cases__progress::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--carousel-progress, 33%);
    background: var(--lime);
    transition: inline-size var(--duration-slow) var(--ease-emphasized);
  }

  .cases__btns { display: flex; gap: var(--space-2); }
  .cases__btns .icon-button:disabled { opacity: 0.35; cursor: default; }
  .cases__btns .icon-button:not(:disabled):hover { background: var(--lime); border-color: var(--hover-border); color: var(--black); }

  .cases {
    --bleed: var(--container-gutter, var(--space-5));
  }

  .cases__track {
    display: flex;
    gap: var(--space-4);
    margin-inline: calc(-1 * var(--bleed));
    padding-inline: var(--bleed);
    padding-block: var(--space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bleed);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cases__track::-webkit-scrollbar { display: none; }
  .cases__track:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: var(--radius-lg); }

  .cases__slide {
    flex: 0 0 min(100%, 58rem);
    scroll-snap-align: start;
  }

  .case {
    display: grid;
    block-size: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), translate var(--duration-normal) var(--ease-standard);
  }

  @media (min-width: 56em) {
    .case { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  }

  .case__media {
    position: relative;
    min-block-size: 14rem;
    background: var(--black);
    overflow: hidden;
  }

  @media (min-width: 56em) {
    .case__media { min-block-size: 100%; }
  }

  .case__media img,
  .case__media picture {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .case__media picture { position: absolute; inset: 0; }

  .case__media img {
    object-fit: cover;
    transition: scale var(--duration-slow) var(--ease-standard);
  }

  .case:hover { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }
  .case:hover .case__media img { scale: 1.03; }

  .case__media--mark { display: grid; place-items: center; }

  .case__media--mark img {
    inline-size: 50%;
    max-inline-size: 14rem;
    block-size: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
  }

  .case__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  }

  .case__client {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .case__mark { block-size: 1.5rem; inline-size: auto; }
  [data-theme="dark"] .case__mark { filter: brightness(0) invert(1); opacity: 0.85; }

  .case__headline {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    text-wrap: balance;
  }

  .case__quote p {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    text-wrap: pretty;
  }

  .case__cite {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .case__cite strong { font-weight: var(--font-medium); color: var(--color-text); }

  .case__lead { color: var(--color-text-muted); text-wrap: pretty; }

  /* the client's numbers: stacked rows, so long words never collide */
  .case__stats {
    display: grid;
    border-top: 1px solid var(--color-border);
  }

  .case__stat {
    display: grid;
    gap: 0.15rem;
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  .case__stat strong {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  .case__stat span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  .case__link { margin-block-start: auto; }

  /* ======================================================================
     5. HOW IT WORKS — the data journey: four stops on a rail that runs the
        full width, each stop's icon at the right edge of its cell, with a
        lime pulse travelling sensor → answer. The concepts below reuse
        the story pattern (section 3).
     ====================================================================== */

  .journey {
    position: relative;
    --stop: 3.5rem;   /* icon disc */
  }

  .journey__steps {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-5);
  }

  @media (min-width: 56em) {
    .journey__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* the rail: draws in on reveal (scale), the pulse (::after) travels it */
  .journey__rail {
    position: absolute;
    overflow: hidden;
    background: var(--color-border-strong);
    transition: scale 1.2s var(--ease-emphasized) 200ms;
  }

  .journey__rail::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-standard) 1.2s;
  }

  .journey.is-in .journey__rail { scale: 1 1; }
  .journey.is-in .journey__rail::after { opacity: 1; }

  /* vertical rail on small screens (icons down the left) */
  @media (max-width: 55.99em) {
    .journey__rail {
      inset-block: calc(var(--stop) / 2) calc(var(--stop) / 2);
      inset-inline-start: calc(var(--stop) / 2 - 1px);
      inline-size: 2px;
      transform-origin: top;
      scale: 1 0;
    }
    .journey__rail::after {
      block-size: 14%;
      background: linear-gradient(180deg, transparent, var(--lime), transparent);
      animation: journey-pulse-y 5s linear infinite;
    }
  }

  /* horizontal rail across the whole width; the last icon closes it */
  @media (min-width: 56em) {
    .journey__rail {
      inset-block-start: calc(var(--stop) / 2 - 1px);
      inset-inline: 0 0;
      block-size: 2px;
      transform-origin: left;
      scale: 0 1;
    }
    .journey__rail::after {
      inline-size: 12%;
      background: linear-gradient(90deg, transparent, var(--lime), transparent);
      animation: journey-pulse-x 5s linear infinite;
    }
  }

  @keyframes journey-pulse-x {
    from { translate: -100% 0; }
    to   { translate: 840% 0; }
  }

  @keyframes journey-pulse-y {
    from { translate: 0 -100%; }
    to   { translate: 0 720%; }
  }

  .jstep {
    position: relative;
    display: grid;
    grid-template-columns: var(--stop) minmax(0, 1fr);
    grid-template-areas: "icon title" "icon text";
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    align-items: start;
  }

  @media (min-width: 56em) {
    .jstep {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "icon" "title" "text";
      row-gap: var(--space-2);
      justify-items: start;
      padding-inline-end: var(--space-5);
    }
    .jstep:last-child { padding-inline-end: 0; }
    .jstep__icon { justify-self: end; margin-block-end: var(--space-2); }
  }

  .jstep__icon {
    grid-area: icon;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: var(--stop);
    block-size: var(--stop);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg);
    color: var(--color-text);
    transition: background-color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
  }

  .jstep__icon > .icon { --icon-size: 1.35rem; }

  .jstep:last-child .jstep__icon {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
  }

  .jstep:hover .jstep__icon { border-color: var(--hover-border); box-shadow: var(--hover-shadow-sm); }

  .jstep__num {
    position: absolute;
    inset-inline-end: -0.35rem;
    inset-block-start: -0.35rem;
    display: grid;
    place-items: center;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    border-radius: var(--radius-full);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
  }

  .jstep__title {
    grid-area: title;
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
  }

  .jstep__text {
    grid-area: text;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 28rem;
    text-wrap: pretty;
  }

  /* ======================================================================
     6. RESOURCE CTA — one framed card: cover left, copy + form right
     ====================================================================== */

  .resource-cta__card {
    display: grid;
    gap: var(--space-6);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border-radius: var(--radius-xl);
  }

  @media (min-width: 56em) {
    .resource-cta__card {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      align-items: center;
      gap: var(--space-8);
    }
  }

  .resource-cta__cover {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-muted);
    rotate: -1.5deg;
    transition: rotate var(--duration-normal) var(--ease-emphasized);
  }

  .resource-cta__card:hover .resource-cta__cover { rotate: 0deg; }

  .resource-cta__cover img { display: block; inline-size: 100%; block-size: auto; }

  .resource-cta__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .resource-cta__title {
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-tight);
  }

  .resource-cta__title a { color: inherit; text-decoration: none; }
  .resource-cta__title a:hover { text-decoration: underline; text-decoration-color: var(--lime); }

  .resource-cta__lead { color: var(--color-text-muted); }

  /* The request form (partials/resource-form.php) — inline in the CTA card
     and on the landing page; fields flow 2-up where the slot allows. */
  .rform {
    container-type: inline-size;
    display: grid;
    gap: var(--space-4);
    margin-block-start: var(--space-2);
  }

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

  @container (min-width: 30rem) {
    .rform__fields { grid-template-columns: 1fr 1fr; }
    .rform__fields .field--wide { grid-column: 1 / -1; }
  }

  .rform__select { position: relative; display: block; }

  .rform__select select {
    appearance: none;
    padding-inline-end: 2.5rem;
    cursor: pointer;
  }

  .rform__select .icon {
    position: absolute;
    inset-inline-end: 0.9rem;
    inset-block-start: 50%;
    translate: 0 -50%;
    pointer-events: none;
  }

  .rform__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
  }

  .rform__note {
    flex: 1 1 16rem;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .rform__note a { color: inherit; }

  /* Landing page: cover + what's inside, the form beside it */
  .rlanding__grid {
    display: grid;
    gap: var(--space-7);
    align-items: start;
  }

  @media (min-width: 60em) {
    .rlanding__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); }
    .rlanding__form { position: sticky; top: var(--header-offset, 6rem); }
  }

  .rlanding__info { display: grid; gap: var(--space-6); }

  /* Phones: the form right under the head, the cover + contents after */
  @media (max-width: 59.99em) {
    .rlanding__form { order: -1; }
  }

  .rlanding__cover {
    margin: 0;
    rotate: -2deg;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--card-shadow-lift);
    max-inline-size: 34rem;
  }

  .rlanding__cover img { display: block; inline-size: 100%; block-size: auto; }

  .rlanding__h { font-size: var(--text-xl); margin-block-end: var(--space-3); }

  @media (prefers-reduced-motion: reduce) {
    .rlanding__cover { rotate: 0deg; }
  }

  .field {
    display: grid;
    gap: var(--space-1);
  }

  .field__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .field__input {
    inline-size: 100%;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg-inset);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  }

  .field__input:focus {
    outline: none;
    border-color: var(--color-text);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--lime) 35%, transparent);
  }

  /* ======================================================================
     7. SENSORS — photo bento: six families as photo tiles of three sizes,
        the custom-built feature in the orbit frame spanning two rows
     ====================================================================== */

  .bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(clamp(9rem, 14vw, 13rem), auto);
    grid-auto-flow: dense;
    gap: var(--space-3);
  }

  .bento__item { min-inline-size: 0; }
  .bento__item--lg      { grid-column: span 5; }
  .bento__item--md      { grid-column: span 4; }
  .bento__item--sm      { grid-column: span 3; }
  .bento__item--xs      { grid-column: span 2; }
  .bento__item--feature { grid-column: 10 / span 3; grid-row: 1 / span 2; }

  @media (max-width: 63.99em) {
    .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(clamp(9rem, 22vw, 13rem), auto); }
    .bento__item--lg      { grid-column: span 6; }
    .bento__item--md,
    .bento__item--sm,
    .bento__item--xs      { grid-column: span 3; }
    .bento__item--feature { grid-column: span 6; grid-row: auto / span 1; }
  }

  @media (max-width: 39.99em) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(9.5rem, auto); }
    .bento__item--lg,
    .bento__item--md      { grid-column: span 2; }
    .bento__item--feature { grid-column: span 2; grid-row: auto / span 1; }
    .bento__item--sm,
    .bento__item--xs      { grid-column: span 1; }
  }

  .ptile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.15rem;
    block-size: 100%;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--color-border);
    color: var(--white);
    text-decoration: none;
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
  }

  .ptile:hover,
  .ptile:focus-visible { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }

  .ptile__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--color-bg-raised);
  }

  .ptile__photo picture,
  .ptile__photo img { display: block; inline-size: 100%; block-size: 100%; }

  .ptile__photo img {
    object-fit: cover;
    transition: scale var(--duration-slow) var(--ease-standard);
  }

  .ptile:hover .ptile__photo img { scale: 1.06; }

  .ptile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(0 0 0 / 0.05) 30%, rgb(0 0 0 / 0.72) 100%);
    transition: opacity var(--duration-normal) var(--ease-standard);
  }

  .ptile__icon {
    position: absolute;
    inset-inline-start: var(--space-3);
    inset-block-start: var(--space-3);
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-md);
    border: 1px solid rgb(255 255 255 / 0.22);
    background: rgb(0 0 0 / 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--white);
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }

  .ptile__icon .icon { --icon-size: 1.1rem; }
  .ptile:hover .ptile__icon { background: var(--lime); border-color: var(--lime); color: var(--black); }

  .ptile__title {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
  }

  .bento__item--xs .ptile__title { font-size: var(--text-base); }

  .ptile__hint {
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    color: var(--paper-85);
    max-block-size: 0;
    opacity: 0;
    translate: 0 6px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: max-block-size var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard), translate var(--duration-normal) var(--ease-standard);
  }

  .ptile:hover .ptile__hint,
  .ptile:focus-visible .ptile__hint { max-block-size: 3rem; opacity: 1; translate: 0 0; }
  .bento__item--xs .ptile__hint { display: none; }

  .tile-feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    block-size: 100%;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-decoration: none;
  }

  .tile-feature__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
  }

  .tile-feature__text { color: var(--color-text-muted); font-size: var(--text-sm); }
  .tile-feature__cta { margin-block-start: auto; padding-block-start: var(--space-2); }

  /* ======================================================================
     8. PLANS — three tiers, the recommended one in the orbit frame
     ====================================================================== */

  .plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), translate var(--duration-normal) var(--ease-standard);
  }

  .plan-card:hover { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }

  /* The highlighted plan (CMS `highlight`) is always the INVERSE of the
     page: with `.panel` it is the black surface on the light ground; in
     the dark scheme it flips to a white card, re-pointing the same tokens
     the panel scope sets (components.css § 1) so buttons, hairlines and
     the orbit ring inside read correctly. */
  .plan-card--highlight { border-color: var(--color-border-strong); }

  [data-theme="dark"] .plan-card--highlight,
  [data-theme="dark"] .pcard--highlight {
    --color-bg:            var(--white);
    --color-bg-subtle:     var(--white);
    --color-bg-muted:      rgb(0 0 0 / 0.06);
    --color-bg-raised:     var(--white);
    --color-text:          var(--black);
    --color-text-muted:    var(--ink-70);
    --color-text-subtle:   var(--ink-55);
    --color-border:        rgb(0 0 0 / 0.7);
    --color-border-strong: rgb(0 0 0 / 0.85);
    --color-link:          var(--black);
    --color-link-hover:    var(--black);
    --color-accent-ink:    var(--black);
    --color-focus-ring:    var(--black);
    --hover-border:        var(--black);
    --orbit-tail: color-mix(in oklab, var(--black) 55%, transparent);
    --orbit-peak: var(--black);
    --orbit-head: var(--lime-deep);
    color-scheme: light;
    color: var(--color-text);
    background: var(--white);
  }

  .plan-card__badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--space-6);
    z-index: 1;
    translate: 0 -50%;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-full);
    background: var(--lime);
    color: var(--black);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
  }

  .plan-card__title {
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-tight);
  }

  .plan-card__tagline { color: var(--color-text-muted); font-size: var(--text-sm); }

  .plan-card__features {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-3);
    border-block: 1px solid var(--color-border);
    font-size: var(--text-sm);
    flex: 1;
  }

  .plan-card__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .plan-card__feature .icon { --icon-size: 1rem; flex: none; margin-block-start: 0.2em; color: var(--color-accent-2); }
  .plan-card__feature[data-included="0"] { color: var(--color-text-subtle); }
  .plan-card__feature[data-included="0"] .icon { color: var(--color-text-subtle); }

  .plan-card__cta { align-self: flex-start; }

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

  .plan-grid__foot small { color: var(--color-text-subtle); }

  /* ======================================================================
     9. INSIGHTS — thumbnail grid, three across
     ====================================================================== */

  .post-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
  }

  @media (min-width: 40em) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .post-card { gap: var(--space-3); padding: var(--space-3); }

  .post-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), translate var(--duration-normal) var(--ease-standard);
  }

  .post-card__media picture,
  .post-card__media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .post-card__media img {
    object-fit: cover;
    transition: scale var(--duration-slow) var(--ease-standard);
  }

  .post-card:hover { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }
  .post-card:hover .post-card__media img { scale: 1.04; }

  .post-card__meta,
  .post-card h3,
  .post-card p,
  .post-card .card__more { padding-inline: var(--space-2); }

  .post-card .card__more { padding-block-end: var(--space-2); }

  .post-card__meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  /* ======================================================================
     11. INDUSTRY PAGE (Phase 4.2, built on Supermarkets) — white split hero
         with the first scenario's readings on the photo, the challenge list,
         the store plan with hotspots on the black band + the flow rail, the
         outcomes table, the FAQ accordion, related photo tiles.
     ====================================================================== */

  /* --- Hero ------------------------------------------------------------ */
  .ihero { padding-block: var(--page-top) var(--space-8); }

  .ihero__grid {
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }

  @media (min-width: 56em) {
    .ihero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: var(--space-9); }
  }

  .ihero .breadcrumbs { margin-block-end: var(--space-6); }

  .ihero__title {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    font-weight: var(--font-medium);
    text-wrap: balance;
    max-inline-size: 22ch;
  }

  .ihero__lead { margin-block-start: var(--space-5); max-inline-size: 36rem; }
  .ihero__actions { margin-block-start: var(--space-6); --cluster-space: var(--space-3); }

  .ihero__measured {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-7);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }

  .ihero__measured-label { font-size: var(--text-xs); color: var(--color-text-subtle); }

  .ihero__measured .chip {
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }

  .ihero__measured .chip .icon { --icon-size: 0.9rem; }

  .ihero__measured .chip:hover,
  .ihero__measured .chip:focus-visible {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
  }

  /* the photo, with the first scenario's site line and readings on it */
  .ihero__frame {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xl);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--color-border);
    background: var(--black);
    color: var(--white);
  }

  .ihero__frame picture,
  .ihero__frame img {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .ihero__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0.12) 0%, transparent 30%, transparent 50%, rgb(0 0 0 / 0.6) 100%);
    pointer-events: none;
  }

  .ihero__frame--art {
    background:
      radial-gradient(60% 50% at 80% 20%, color-mix(in oklab, var(--lime) 22%, transparent) 0%, transparent 70%),
      var(--black);
  }

  .ihero__live {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-4);
  }

  .ihero__site {
    align-self: flex-start;
    border-color: rgb(255 255 255 / 0.28);
    background: rgb(0 0 0 / 0.55);
    color: var(--white);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .ihero__readings {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
  }

  .ihero__reading {
    --reading-state: rgb(255 255 255 / 0.6);
    display: grid;
    gap: 0.15rem;
    min-inline-size: 6.75rem;
    padding: 0.6rem 0.85rem 0.65rem;
    border-radius: var(--radius-md);
    border: 1px solid rgb(255 255 255 / 0.24);
    background: rgb(0 0 0 / 0.58);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: ihero-in 0.7s var(--ease-standard) both;
    animation-delay: calc(0.4s + var(--i, 0) * 0.16s);
  }

  .ihero__reading[data-state="ok"]   { --reading-state: var(--color-ok); }
  .ihero__reading[data-state="warn"] { --reading-state: var(--color-warn); }
  .ihero__reading[data-state="bad"]  { --reading-state: var(--color-bad); }

  .ihero__reading-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-xs);
    color: rgb(255 255 255 / 0.85);
    white-space: nowrap;
  }

  .ihero__reading-label::before {
    content: "";
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-radius: var(--radius-full);
    background: var(--reading-state);
    box-shadow: 0 0 10px var(--reading-state);
  }

  .ihero__reading-value {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ihero__reading-value small {
    margin-inline-start: 0.2rem;
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: rgb(255 255 255 / 0.85);
  }

  .ihero__reading[data-state="bad"] .ihero__reading-value { color: var(--reading-state); }

  @keyframes ihero-in {
    from { opacity: 0; translate: 0 10px; }
    to   { opacity: 1; translate: 0 0; }
  }

  /* --- Photo hero (Phase 8.1b) -------------------------------------------
     `.ihero--photo`: the photo-band look as a page's hero. Crumbs sit above
     the frame (.ihero__crumbs); the grid IS the frame — rounded, black,
     the figure (.ihero__media) fills it, the copy sits bottom-left on a
     gradient, an optional glass card (.ihero__aside) bottom-right, the
     first scenario's readings (.ihero__live) top-right. Phones: the photo
     on top, the copy on black below (like the stacked case panels).
     Hubs: page-head.php ($heroPhoto) = `ihero--compact` (no actions). */
  .ihero--photo { padding-block: var(--page-top) var(--space-7); }

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

  /* a hub has no visible crumbs (Breadcrumbs::render, ≤ 2 levels): the frame
     sits under the header like the home hero, same gap */
  .ihero__crumbs:empty { display: none; }
  .ihero--photo:has(> .ihero__crumbs:empty) { padding-block-start: calc(var(--space-3) * 2); }

  .ihero--photo .ihero__grid {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 0;
    padding: 0;
    border-radius: var(--radius-panel);
    background: var(--black);
    color: var(--color-text);
  }

  [data-theme="dark"] .ihero--photo .ihero__grid { border: 1px solid var(--color-border-on-panel); }

  .ihero--photo .ihero__media { order: -1; }

  .ihero--photo .ihero__frame {
    aspect-ratio: 16 / 10;
    border: 0;
    border-radius: 0;
  }

  /* phones: the photo fades into the black copy area below it */
  .ihero--photo .ihero__frame::after {
    background: linear-gradient(180deg, rgb(0 0 0 / 0.25) 0%, transparent 30%, transparent 60%, var(--black) 100%);
  }

  .ihero--photo .ihero__copy { padding: var(--space-5) var(--space-5) var(--space-6); }
  .ihero--photo .ihero__aside { padding: 0 var(--space-5) var(--space-6); }

  .ihero--photo .ihero__title { color: var(--white); }
  .ihero--photo .ihero__lead { color: rgb(255 255 255 / 0.92); }
  .ihero--photo .ihero__measured { border-color: rgb(255 255 255 / 0.25); }
  .ihero--photo .ihero__measured-label { color: rgb(255 255 255 / 0.85); }
  .ihero--photo .eyebrow { color: var(--white); }
  .ihero--photo .ihero__copy a:not(.btn):not(.chip) { color: inherit; }

  @media (min-width: 64em) {
    .ihero--photo .ihero__grid {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      min-block-size: clamp(34rem, 76vh, 46rem);
    }

    .ihero--compact .ihero__grid { min-block-size: clamp(26rem, 56vh, 36rem); }

    .ihero--photo .ihero__media {
      position: absolute;
      inset: 0;
      z-index: -1;
    }

    .ihero--photo .ihero__frame { aspect-ratio: auto; block-size: 100%; }

    .ihero--photo .ihero__frame::after {
      background:
        linear-gradient(to top, rgb(0 0 0 / 0.75) 0%, rgb(0 0 0 / 0.3) 45%, transparent 72%),
        linear-gradient(to right, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.38) 42%, transparent 70%);
    }

    .ihero--photo .ihero__copy {
      max-inline-size: 50rem;
      padding: clamp(var(--space-7), 4.5vw, var(--space-9));
    }

    .ihero--photo .ihero__aside {
      align-self: end;
      padding: var(--space-7);
      padding-inline-start: 0;
    }

    /* the readings move to the top-right corner, stacked */
    .ihero--photo .ihero__live {
      inset: var(--space-6) var(--space-6) auto auto;
      align-items: flex-end;
      justify-content: flex-start;
      gap: var(--space-3);
      padding: 0;
    }

    .ihero--photo .ihero__site { align-self: flex-end; }
    .ihero--photo .ihero__readings { flex-direction: column; align-items: flex-end; }
  }

  /* glass card on the photo (platform answer, sensor counts) */
  .ihero__glass {
    max-inline-size: 24rem;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    background: rgb(0 0 0 / 0.5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--white);
  }

  /* --- The challenge — `###` rows from the problem markdown --------------- */
  .challenges__grid { display: grid; gap: var(--space-6); }

  @media (min-width: 56em) {
    .challenges__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); align-items: start; }
    .challenges__grid > .section-head { position: sticky; top: calc(var(--header-offset) + var(--space-5)); }
  }

  .challenges__body h3 {
    position: relative;
    margin: 0;
    padding-block: var(--space-5) var(--space-2);
    padding-inline-start: var(--space-6);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
  }

  .challenges__body h3::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(var(--space-5) + 0.5em);
    inline-size: 0.6rem;
    block-size: 0.6rem;
    background: var(--lime);
    clip-path: polygon(0 0, 100% 0, 50% 86%);
  }

  .challenges__body p {
    margin: 0;
    padding-inline-start: var(--space-6);
    padding-block-end: var(--space-5);
    max-inline-size: 40rem;
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

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

  /* --- Ask block ---------------------------------------------------------- */
  .ask-band .ask { margin-inline: auto; }

  /* --- The plan band ------------------------------------------------------ */
  .plan-band__head { display: grid; gap: var(--space-5); }

  @media (min-width: 56em) {
    .plan-band__head { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-9); align-items: end; }
  }

  .plan-band__intro {
    max-inline-size: 40rem;
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  .plan-band__intro p { margin: 0; }
  .plan-band__intro p + p { margin-block-start: var(--space-4); }

  .plan { display: grid; gap: var(--space-6); }

  @media (min-width: 56em) {
    .plan { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: start; }
    .plan__stage { position: sticky; top: calc(var(--header-offset) + var(--space-5)); }
  }

  .plan__stage {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
  }

  .plan__svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
    color: var(--color-text);
  }

  .plan__wall { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-opacity: 0.85; stroke-linecap: round; }
  .plan__room { fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: 0.32; }
  .plan__dashed { stroke-dasharray: 4 4; }

  .plan__label {
    font-family: var(--font-sans);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    fill: currentColor;
    fill-opacity: 0.62;
  }

  .plan__dot { cursor: pointer; }
  .plan__dot-hit { fill: transparent; }
  .plan__dot-core { fill: var(--white); fill-opacity: 0.75; transition: fill var(--duration-fast) var(--ease-standard), fill-opacity var(--duration-fast) var(--ease-standard); }
  .plan__dot-ring { fill: none; stroke: var(--white); stroke-opacity: 0.22; stroke-width: 1; transition: stroke var(--duration-fast) var(--ease-standard), stroke-opacity var(--duration-fast) var(--ease-standard); }
  .plan__dot-halo { fill: var(--lime); fill-opacity: 0; transform-origin: center; transform-box: fill-box; }

  .plan__dot:hover .plan__dot-core,
  .plan__dot.is-active .plan__dot-core { fill: var(--lime); fill-opacity: 1; }
  .plan__dot:hover .plan__dot-ring,
  .plan__dot.is-active .plan__dot-ring { stroke: var(--lime); stroke-opacity: 0.6; }
  .plan__dot.is-active .plan__dot-halo { fill-opacity: 0.2; animation: plan-pulse 2.2s var(--ease-standard) infinite; }

  @keyframes plan-pulse {
    0%   { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
  }

  html:not([data-js]) .plan__dot-core { fill: var(--lime); fill-opacity: 1; }

  /* the SVG scales with its column: keep the captions legible on a phone */
  @media (max-width: 40em) {
    .plan__stage { padding: var(--space-2); }
    .plan__label { font-size: 15px; letter-spacing: 0.04em; }
  }

  @media (max-width: 40em) {
    .ihero__reading { min-inline-size: 0; padding: 0.45rem 0.65rem 0.5rem; }
    .ihero__reading-value { font-size: var(--text-lg); }
  }

  /* the zone list: one row per hotspot, the active one expanded */
  .plan__zones {
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--color-border);
  }

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

  .plan__zone-btn {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    align-items: center;
    inline-size: 100%;
    padding: var(--space-3) var(--space-1);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .plan__zone-icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }

  .plan__zone-icon .icon { --icon-size: 1.1rem; }

  .plan__zone-btn:hover .plan__zone-icon { border-color: var(--lime); }

  .plan__zone[data-active] .plan__zone-icon {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
  }

  .plan__zone-title { font-weight: var(--font-medium); line-height: var(--leading-snug); }
  .plan__zone-sensor { grid-column: 2; font-size: var(--text-xs); color: var(--color-text-muted); }

  .plan__zone-chev {
    grid-column: 3;
    grid-row: 1 / span 2;
    --icon-size: 1rem;
    color: var(--color-text-muted);
    transition: rotate var(--duration-normal) var(--ease-standard);
  }

  .plan__zone[data-active] .plan__zone-chev { rotate: 180deg; }

  .plan__zone-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-slow) var(--ease-standard);
  }

  .plan__zone-body > div {
    min-block-size: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s var(--duration-slow);
  }

  .plan__zone[data-active] .plan__zone-body { grid-template-rows: 1fr; }
  .plan__zone[data-active] .plan__zone-body > div { visibility: visible; transition-delay: 0s; }

  .plan__zone-text,
  .plan__zone-link {
    margin: 0;
    padding-inline: calc(2.25rem + var(--space-3) + var(--space-1)) var(--space-1);
  }

  .plan__zone-text {
    padding-block: 0 var(--space-3);
    max-inline-size: 38rem;
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  .plan__zone-link {
    display: inline-flex;
    margin-block-end: var(--space-4);
  }

  html:not([data-js]) .plan__zone-body { grid-template-rows: 1fr; }
  html:not([data-js]) .plan__zone-body > div { visibility: visible; }
  html:not([data-js]) .plan__zone-chev { display: none; }

  /* sensor tiles: the fallback when no plan exists for the industry */
  .sensor-tiles > li { aspect-ratio: 4 / 3; }

  .ptile--art {
    background:
      radial-gradient(60% 50% at 80% 20%, color-mix(in oklab, var(--lime) 22%, transparent) 0%, transparent 70%),
      var(--black);
  }

  /* the flow rail: sensors → the platform functions in use → you */
  .flow {
    display: grid;
    gap: var(--space-3);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border);
  }

  .flow__label { font-size: var(--text-xs); color: var(--color-text-subtle); }

  .flow__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
  }

  .flow__step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem 0.95rem 0.5rem 0.7rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    color: inherit;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-standard);
  }

  .flow__step .icon { --icon-size: 1rem; }
  a.flow__step:hover { border-color: var(--lime); }

  .flow__step--you {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
  }

  .flow__sep { display: inline-flex; color: var(--color-text-subtle); }
  .flow__sep .icon { --icon-size: 1rem; }

  /* --- Outcomes: Today / With baiond --------------------------------------- */
  .outcomes__grid { display: grid; gap: var(--space-6); }

  @media (min-width: 56em) {
    .outcomes__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-9); align-items: start; }
    .outcomes__grid > .section-head { position: sticky; top: calc(var(--header-offset) + var(--space-5)); }
  }

  .outcomes__head,
  .outcomes__row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-6);
  }

  .outcomes__head {
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .outcomes__head .eyebrow { font-size: var(--text-xs); color: var(--color-text); }

  .outcomes__row {
    padding-block: var(--space-5);
    border-block-end: 1px solid var(--color-border);
  }

  .outcomes__before,
  .outcomes__after { margin: 0; text-wrap: pretty; }

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

  .outcomes__after {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
  }

  @media (max-width: 47.99em) {
    .outcomes__head { display: none; }
    .outcomes__row { grid-template-columns: 1fr; gap: var(--space-2); }
    .outcomes__before::before,
    .outcomes__after::before {
      content: attr(data-label);
      display: block;
      margin-block-end: 0.2rem;
      font-size: var(--text-xs);
      font-weight: var(--font-normal);
      letter-spacing: 0.01em;
      color: var(--color-text-subtle);
    }
  }

  /* --- Logo marquee on an interior page: a quiet strip between bands ----- */
  .refs--page { padding-block: var(--space-5) var(--space-6); }

  /* --- FAQ accordion ------------------------------------------------------- */
  .faq__grid { display: grid; gap: var(--space-6); }

  @media (min-width: 56em) {
    .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-9); align-items: start; }
    .faq__grid > .section-head { position: sticky; top: calc(var(--header-offset) + var(--space-5)); }
  }

  .faq__list { border-block-start: 1px solid var(--color-border); }
  .faq__item { border-block-end: 1px solid var(--color-border); }

  .faq__item summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    list-style: none;
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    cursor: pointer;
  }

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

  .faq__item summary::after {
    content: "+";
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    font-size: 1.15rem;
    font-weight: var(--font-normal);
    line-height: 1;
    transition: rotate var(--duration-normal) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }

  .faq__item summary:hover::after { background: var(--lime); border-color: var(--hover-border); color: var(--black); }

  .faq__item[open] summary::after {
    rotate: 45deg;
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
  }

  .faq__item .prose {
    padding-block: 0 var(--space-5);
    max-inline-size: 42rem;
    color: var(--color-text-muted);
  }

  .faq__item .prose > :first-child { margin-block-start: 0; }

  /* --- Related industries: photo tiles ------------------------------------ */
  .related__grid > li { aspect-ratio: 4 / 3; }

  /* ======================================================================
     12. PARTNERS — the revenue card (.pcard, shared by the home strip and the
         partners page hero), the doors list, the technology band, the home
         strip. The "you bring / we add" table reuses .outcomes, the three
         steps reuse .journey (§5).
     ====================================================================== */

  /* --- The revenue card: black panel in the orbit frame, three rows ------ */
  .pcard {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
  }

  .pcard__title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    text-wrap: balance;
  }

  .pcard__rows { display: grid; margin-block-start: var(--space-2); }

  .pcard__row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    padding-block: var(--space-4);
    border-block-start: 1px solid var(--color-border);
  }

  .pcard__icon {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--lime);
    color: var(--black);
    --icon-size: 1.15rem;
  }

  .pcard__row-title { display: block; font-weight: var(--font-medium); line-height: var(--leading-snug); }

  .pcard__row-text {
    display: block;
    margin-block-start: 0.2rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  .pcard__foot {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin: 0;
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .pcard__foot .icon { flex: none; --icon-size: 1rem; color: var(--color-accent-ink); }

  /* --- Page hero: the card takes the photo's column ----------------------- */
  .phero__media { display: grid; }
  .phero__card { inline-size: 100%; }

  @media (min-width: 56em) {
    .phero .ihero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  }

  /* --- The doors: who we are looking for (icon box + title + text) -------- */
  .doors__intro { margin-block-start: var(--space-4); max-inline-size: 34rem; color: var(--color-text-muted); }
  .doors__intro p { margin: 0; text-wrap: pretty; }
  .doors__intro p + p { margin-block-start: var(--space-3); }

  .doors { display: grid; border-block-end: 1px solid var(--color-border); }

  .door {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    padding-block: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }

  .door__icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-accent-ink);
    --icon-size: 1.25rem;
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }

  .door:hover .door__icon { background: var(--lime); border-color: var(--lime); color: var(--black); }

  .door__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
  }

  .door__text { margin: 0.35rem 0 0; max-inline-size: 40rem; color: var(--color-text-muted); text-wrap: pretty; }

  /* --- Three steps: the journey rail with three stops -------------------- */
  .psteps__cta { margin: 0; }

  @media (min-width: 56em) {
    .journey__steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .journey__steps--three .jstep { align-content: start; }
  }

  /* --- Technology + institutional partners on the black band -------------- */
  .ptech { display: grid; gap: var(--space-7); }

  @media (min-width: 56em) {
    .ptech { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9); }
  }

  .ptech__col {
    display: grid;
    gap: var(--space-4);
    align-content: start;
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }

  .ptech__icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--radius-md);
    background: var(--lime);
    color: var(--black);
    --icon-size: 1.25rem;
  }

  .ptech__title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
  }

  .ptech__text { margin: 0; max-inline-size: 36rem; color: var(--color-text-muted); text-wrap: pretty; }
  .ptech__chips { --cluster-space: var(--space-2); }
  .ptech__chips .chip { white-space: normal; }
  .ptech__cta { margin: 0; }

  /* --- Home strip: copy left, the revenue card right ---------------------- */
  .partners-strip { display: grid; gap: var(--space-7); align-items: center; }

  @media (min-width: 56em) {
    .partners-strip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-9); }
  }

  .partners-strip__copy { display: grid; gap: var(--space-5); }
  .partners-strip__copy .section-head > h2 { max-inline-size: 18ch; }
  .partners-strip__doors .chip { text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
  .partners-strip__doors .chip .icon { --icon-size: 0.9rem; }
  .partners-strip__doors .chip:hover,
  .partners-strip__doors .chip:focus-visible { background: var(--lime); border-color: var(--lime); color: var(--black); }
  .partners-strip__actions { align-items: center; }

  /* ======================================================================
     10. REDUCED MOTION
     ====================================================================== */

  @media (prefers-reduced-motion: reduce) {
    html[data-js] [data-reveal],
    html[data-js] [data-reveal-stagger] > * {
      opacity: 1;
      translate: 0 0;
      transition: none;
    }
    .film[open] { animation: none; }
    .media-frame__video { transition: none; }
    .resource-cta__cover { rotate: 0deg; }
    .story__media--cover img { animation: none; scale: 1; translate: 0 0; }
    .journey__rail { scale: 1 1; transition: none; }
    .journey__rail::after { animation: none; opacity: 0; }
    .cases__track { scroll-behavior: auto; }
    .ihero__reading { animation: none; }
    .plan__dot.is-active .plan__dot-halo { animation: none; fill-opacity: 0.25; }
    .plan__zone-body { transition: none; }
    .plan__zone-body > div { transition: none; }
  }

  /* ======================================================================
     12. INDUSTRIES HUB + CATEGORY PAGE (Phase 5)
        Hub: the sticky story reused — one panel per category, copy beside
        a tile grid of its industries. Category: the industry hero, the
        challenges grid for the intro, photo tiles with the first Ask
        question as the hint.
     ====================================================================== */

  /* a panel that holds several links: the tiles carry the hover, not the panel */
  .story--hub .story__panel:hover { translate: none; box-shadow: none; border-color: var(--color-border); }

  .story__media--tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    padding: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
  }

  .story__media--tiles > li { min-inline-size: 0; aspect-ratio: 4 / 3; }
  .story__media--tiles > li:only-child { grid-column: span 2; aspect-ratio: 16 / 9; }

  @media (min-width: 56em) {
    .story__media--tiles { border-block-start: 0; border-inline-start: 1px solid var(--color-border); }
  }

  @media (max-width: 30em) {
    .story__media--tiles { grid-template-columns: minmax(0, 1fr); }
    .story__media--tiles > li,
    .story__media--tiles > li:only-child { grid-column: auto; aspect-ratio: 16 / 9; }
  }

  .story--hub .story__name .icon { margin-inline-end: var(--space-2); }

  /* industry tiles (category page, uncategorised list) */
  .itiles > li { aspect-ratio: 4 / 3; }

  /* the first Ask baiond question as the tile hint: the prefix in lime (white text on the photo) */
  .ptile__ask { color: var(--lime); font-weight: var(--font-medium); }

  /* ======================================================================
     13. PLATFORM (Phase 6) — the overview's hero (product frame + a live
         answer), the data flow (a sticky rail of five stations beside one
         panel per station, feature cards under their station), the
         protocol wires on the black band, the product screens as tabs;
         the feature page (hero art, definition, benefits, Ask card,
         technical tabs, the station rail + prev / next).
     ====================================================================== */

  /* --- shared: mono chips, link chip, tabs ------------------------------ */
  .chip--mono { font-family: var(--font-mono); letter-spacing: 0; }
  .chip .icon { --icon-size: 0.9rem; }
  a.chip--link {
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  a.chip--link:hover,
  a.chip--link:focus-visible { background: var(--lime); border-color: var(--lime); color: var(--black); }

  .tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .tabs__list[hidden] { display: none; }
  .tabs__tab {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .tabs__tab:hover { background: var(--lime); border-color: var(--lime); color: var(--black); }
  .tabs__tab[aria-selected="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
  .tabs__panel[hidden] { display: none; }
  .tabs.is-tabbed .tabs__heading { display: none; }

  /* --- overview hero: the product frame with a live answer on it -------- */
  .phero__media { position: relative; padding-block-end: var(--space-8); }
  .phero__device { rotate: 0deg; }
  .phero__chat {
    position: absolute;
    inset-inline-start: clamp(-1rem, -2vw, 0rem);
    inset-block-end: 0;
    display: grid;
    gap: var(--space-3);
    inline-size: min(26rem, 88%);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--black);
    color: var(--white);
    box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.45);
    animation: phero-pop var(--duration-reveal) var(--ease-emphasized) 400ms both;
  }
  /* on the photo hero the chat is the glass aside, in flow */
  .ihero__glass.phero__chat {
    position: static;
    inline-size: auto;
    max-inline-size: 24rem;
    border-radius: var(--radius-lg);
    background: rgb(0 0 0 / 0.5);
    box-shadow: none;
  }
  .ihero--photo .phero__media { padding-block-end: 0; }

  .phero__q {
    justify-self: end;
    max-inline-size: 90%;
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
    background: rgb(255 255 255 / 0.12);
    font-size: var(--text-sm);
  }
  .phero__a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    font-size: var(--text-sm);
    line-height: var(--leading-snug, 1.45);
    color: rgb(255 255 255 / 0.92);
  }
  .phero__a mark { background: none; color: var(--lime); font-weight: var(--font-medium); }
  .phero__a-icon {
    display: grid;
    place-items: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border-radius: var(--radius-full);
    background: var(--lime);
    color: var(--black);
  }
  .phero__a-icon .icon { --icon-size: 1rem; }
  @media (max-width: 40em) {
    .phero__media { padding-block-end: 0; }
    .phero__chat { position: relative; inset: auto; margin: calc(-1 * var(--space-7)) 0 0 var(--space-3); inline-size: auto; }
  }
  @keyframes phero-pop {
    from { opacity: 0; translate: 0 1rem; scale: 0.97; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
  }

  /* --- the data flow ---------------------------------------------------- */
  .pipe { display: grid; gap: var(--space-6); }
  @media (min-width: 64em) {
    .pipe { grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr); gap: var(--space-9); align-items: start; }
  }

  /* the rail: stations as dots on one wire; lime fill = how far you've read,
     a lime impulse keeps travelling down the wire */
  .pipe__nav {
    position: sticky;
    inset-block-start: var(--header-offset, 4.5rem);
    z-index: 2;
    margin-inline: calc(-1 * var(--container-gutter, var(--space-5)));
    padding: var(--space-3) var(--container-gutter, var(--space-5));
    background: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
  }
  .pipe__rail {
    --dot: 2.5rem;
    position: relative;
    display: flex;
    justify-content: space-between;
  }
  .pipe__rail::before,
  .pipe__rail::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--dot) / 2 - 1px);
    inset-inline-start: calc(var(--dot) / 2);
    block-size: 2px;
    border-radius: var(--radius-full);
  }
  .pipe__rail::before { inset-inline-end: calc(var(--dot) / 2); background: var(--color-border); }
  .pipe__rail::after {
    inline-size: calc((100% - var(--dot)) * (var(--story-progress-n, 0)));
    background: var(--lime);
  }
  .pipe__node {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    color: var(--color-text-muted);
    text-decoration: none;
  }
  .pipe__dot {
    display: grid;
    place-items: center;
    inline-size: var(--dot);
    block-size: var(--dot);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    transition: background-color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
  }
  .pipe__dot .icon { --icon-size: 1.1rem; }
  .pipe__node:hover .pipe__dot { border-color: var(--hover-border); box-shadow: var(--hover-shadow-sm); }
  .pipe__node[aria-current="true"] { color: var(--color-text); }
  .pipe__node[aria-current="true"] .pipe__dot {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--lime) 28%, transparent);
  }
  /* small screens: dots only, the names stay for assistive tech */
  .pipe__name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (min-width: 64em) {
    .pipe__nav {
      inset-block-start: calc(var(--header-offset, 5rem) + var(--space-7));
      margin: 0;
      padding: 0;
      background: none;
      border: 0;
    }
    .pipe__rail {
      --dot: 3.25rem;
      flex-direction: column;
      gap: var(--space-6);
    }
    .pipe__rail::before,
    .pipe__rail::after {
      inset-inline-start: calc(var(--dot) / 2 - 1px);
      inset-block-start: calc(var(--dot) / 2);
      inline-size: 2px;
    }
    .pipe__rail::before {
      inset-inline-end: auto;
      inset-block-end: calc(var(--dot) / 2);
      block-size: auto;
      background-color: var(--color-border);
      background-image: linear-gradient(to bottom, transparent, var(--lime) 80%, transparent);
      background-size: 100% 5rem;
      background-repeat: no-repeat;
      animation: pipe-impulse 3.4s linear infinite;
    }
    .pipe__rail::after {
      inline-size: 2px;
      block-size: calc((100% - var(--dot)) * (var(--story-progress-n, 0)));
      transition: block-size var(--duration-slow) var(--ease-emphasized);
    }
    .pipe__node {
      grid-template-columns: var(--dot) minmax(0, 1fr);
      justify-items: start;
      align-items: center;
      gap: var(--space-4);
    }
    .pipe__name {
      position: static;
      inline-size: auto;
      block-size: auto;
      overflow: visible;
      clip-path: none;
      font-size: var(--text-lg);
      font-weight: var(--font-medium);
      letter-spacing: var(--tracking-tight);
      transition: translate var(--duration-normal) var(--ease-standard);
    }
    .pipe__node[aria-current="true"] .pipe__name { translate: 4px 0; }
  }
  @keyframes pipe-impulse {
    from { background-position: 0 -5rem; }
    to   { background-position: 0 calc(100% + 5rem); }
  }

  .pipe__stages { display: grid; }
  .pipe__stage {
    display: grid;
    gap: var(--space-5);
    align-content: start;
    padding-block: var(--space-8);
    border-block-start: 1px solid var(--color-border);
    scroll-margin-block-start: calc(var(--header-offset, 5rem) + 5rem);
  }
  .pipe__stage:first-child { border-block-start: 0; padding-block-start: var(--space-4); }
  @media (min-width: 64em) {
    .pipe__stage { min-block-size: 60vh; scroll-margin-block-start: calc(var(--header-offset, 5rem) + var(--space-5)); }
    .pipe__stage:first-child { padding-block-start: 0; }
  }
  .pipe__copy { display: grid; gap: var(--space-3); max-inline-size: 44rem; }

  /* the station's visual (Phase 8.1b): a wide photo, or an old-site concept
     drawing (white ground) framed like a card */
  .pipe__visual {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
    aspect-ratio: 16 / 7;
  }
  .pipe__visual img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--focus, center); }
  .pipe__visual--photo { background: var(--black); }
  .pipe__visual--photo img { transition: scale 1.2s var(--ease-emphasized); }
  .pipe__stage:hover .pipe__visual--photo img { scale: 1.03; }
  .pipe__visual--art {
    display: grid;
    place-items: center;
    padding: var(--space-5);
    background: var(--white);
    border: 1px solid var(--color-border);
  }
  .pipe__visual--art img { inline-size: auto; max-inline-size: 100%; block-size: 100%; object-fit: contain; }
  /* Client diagrams (white ground baked in): edge to edge, never cropped. */
  .pipe__visual--diagram { background: var(--white); border: 1px solid var(--color-border); }
  .pipe__visual--diagram img { object-fit: contain; }
  .pipe__visual { position: relative; }
  .pipe__visual picture { display: block; block-size: 100%; }

  /* AI disclosure badge (partials/ai-badge.php) — a small dark glass pill in
     the frame's corner; hover / focus / tap opens the note above it. */
  .ai-badge {
    position: absolute;
    inset-block-end: var(--space-3);
    inset-inline-start: var(--space-3);
    z-index: 1;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .ai-badge__btn {
    display: inline-grid;
    place-items: center;
    min-inline-size: 2.25rem;
    block-size: 1.75rem;
    padding-inline: var(--space-2);
    border: 1px solid rgb(255 255 255 / 0.35);
    border-radius: var(--radius-full);
    background: rgb(0 0 0 / 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--white);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold, 600);
    letter-spacing: 0.04em;
    line-height: 1;
    cursor: help;
    transition: background var(--duration-fast), color var(--duration-fast);
  }
  .ai-badge__btn:hover,
  .ai-badge__btn[aria-expanded="true"] { background: var(--lime); color: var(--black); border-color: var(--lime); }
  .ai-badge__note {
    inline-size: max-content;
    max-inline-size: min(18rem, 70vw);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md, 0.5rem);
    background: rgb(0 0 0 / 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--white);
    font-size: var(--text-xs);
    line-height: 1.35;
    opacity: 0;
    translate: 0 0.25rem;
    pointer-events: none;
    transition: opacity var(--duration-fast), translate var(--duration-fast);
  }
  .ai-badge:hover .ai-badge__note,
  .ai-badge:has(:focus-visible) .ai-badge__note,
  .ai-badge.is-open .ai-badge__note { opacity: 1; translate: 0 0; pointer-events: auto; }
  .pipe__count {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }
  .pipe__count .icon { --icon-size: 0.95rem; color: var(--color-accent-ink); }
  .pipe__title {
    font-size: var(--text-3xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
  }
  .pipe__text { font-size: var(--text-lg); color: var(--color-text-muted); }
  .pipe__label { font-size: var(--text-xs); color: var(--color-text-subtle); }
  .pipe__inputs,
  .pipe__answer { display: grid; gap: var(--space-3); }
  .pipe__answer { max-inline-size: 40rem; }

  .pipe__features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-4);
  }
  .fcard {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-3);
    block-size: 100%;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), translate var(--duration-normal) var(--ease-standard);
  }
  .fcard:hover,
  .fcard:focus-visible { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }
  .fcard__icon {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: background-color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
  }
  .fcard__icon .icon { --icon-size: 1.15rem; }
  .fcard:hover .fcard__icon { background: var(--lime); border-color: var(--lime); color: var(--black); }
  .fcard__title { font-size: var(--text-xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); }
  .fcard__text { font-size: var(--text-sm); color: var(--color-text-muted); }
  .fcard__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
  }
  .fcard__more .icon { --icon-size: 1em; color: var(--color-accent-ink); transition: translate var(--duration-fast) var(--ease-standard); }
  .fcard:hover .fcard__more .icon { translate: 4px 0; }

  /* --- every protocol in, one answer out (black band) ------------------- */
  .protocols__grid { display: grid; gap: var(--space-8); align-items: center; }
  @media (min-width: 60em) {
    .protocols__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); }
  }
  .protocols__chips { margin-block-start: var(--space-3); }
  .protocols__chips .chip { color: var(--color-text); }

  .wires { display: none; }
  @media (min-width: 40em) {
    .wires {
      --row: 1.625rem;
      display: grid;
      grid-template-columns: auto minmax(5rem, 1fr) auto minmax(2rem, 5rem) auto;
      align-items: center;
    }
    /* the diagram carries the list on wide screens; the chips stay for AT */
    .protocols__chips {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }
  }
  .wires__in {
    display: grid;
    grid-auto-rows: var(--row);
    align-items: center;
    justify-items: end;
  }
  .wires__tag {
    padding: 0.08rem 0.6rem;
    border-radius: var(--radius-full);
    border: 1px solid rgb(255 255 255 / 0.28);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.3;
    color: rgb(255 255 255 / 0.92);
    white-space: nowrap;
  }
  .wires__svg,
  .wires__out { display: block; inline-size: 100%; overflow: visible; }
  .wires__svg { block-size: calc(var(--n) * var(--row)); }
  .wires__out { block-size: 10px; }
  .wires__line { fill: none; stroke: rgb(255 255 255 / 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .wires__pulse {
    fill: none;
    stroke: var(--lime);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 7 93;
    stroke-dashoffset: 100;
    animation: wire-pulse 3.2s linear infinite;
    animation-delay: var(--d, 0s);
  }
  .wires__pulse--out { stroke-dasharray: 22 78; animation-duration: 1.6s; }
  @keyframes wire-pulse { to { stroke-dashoffset: 0; } }
  .wires__hub,
  .wires__answer {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.65rem 1.05rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    white-space: nowrap;
  }
  .wires__hub { background: var(--lime); color: var(--black); }
  .wires__hub-ring {
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 1px solid var(--lime);
    animation: hub-ring 2.4s var(--ease-standard) infinite;
  }
  @keyframes hub-ring {
    from { opacity: 0.8; scale: 1; }
    to   { opacity: 0; scale: 1.18; }
  }
  .wires__answer { border: 1px solid rgb(255 255 255 / 0.4); color: var(--white); }
  .wires__answer .icon { color: var(--lime); }

  /* --- product screens -------------------------------------------------- */
  .screens__tabs { display: grid; gap: var(--space-5); justify-items: center; }
  .screens__tabs .tabs__list { justify-content: center; }
  .screens__device { inline-size: 100%; max-inline-size: 72rem; }
  .screens__panel { margin: 0; }
  /* one frame height for every view (the device page is a tall portrait) */
  .screens__panel .device__screen,
  .fscreen .device__screen { aspect-ratio: 1600 / 1034; }
  .screens__panel .device__screen img,
  .fscreen .device__screen img { block-size: 100%; object-fit: cover; object-position: top; }
  .screens__panel + .screens__panel { border-block-start: 1px solid var(--color-border); }
  .screens__caption {
    padding: var(--space-3) var(--space-5);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }
  .screens__caption strong { color: var(--color-text); font-weight: var(--font-medium); }

  /* --- feature page ----------------------------------------------------- */
  .fhero__eyebrow .icon { --icon-size: 1rem; margin-inline-end: var(--space-2); }
  .fhero__eyebrow { margin-block-end: var(--space-4); }
  .fhero__art {
    display: grid;
    place-items: center;
    margin: 0;
    aspect-ratio: 4 / 3;
    padding: clamp(1.25rem, 1rem + 2vw, 2.75rem);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--white);   /* the drawings are drawn on white — also in the dark scheme */
  }
  .fhero__art img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  /* Station graphic (StationVisual, 2026-10-08): the frame takes the image's own wide
     ratio, edge to edge; photos on black, diagrams on their baked-in white. */
  .fhero__art--station { position: relative; aspect-ratio: auto; padding: 0; overflow: hidden; }
  .fhero__art--station picture { display: block; inline-size: 100%; }
  .fhero__art--station img { block-size: auto; }
  .fhero__art--photo { background: var(--black); border-color: transparent; }

  .fdef__grid { display: grid; gap: var(--space-6); align-items: start; }
  @media (min-width: 56em) {
    .fdef__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-9); }
  }
  .fdef__term { display: grid; gap: var(--space-4); padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border-strong, var(--color-border)); }
  .fdef__definition {
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug, 1.3);
    text-wrap: pretty;
  }
  .fdef__body { font-size: var(--text-lg); padding-block-start: var(--space-5); }

  .benefits__list {
    display: grid;
    gap: var(--space-6);
  }
  @media (min-width: 48em) {
    .benefits__list { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-7); }
  }
  .benefit {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border-strong, var(--color-border));
  }
  .benefit__mark {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-full);
    background: var(--lime);
    color: var(--black);
  }
  .benefit__mark .icon { --icon-size: 1rem; }
  .benefit__title { font-size: var(--text-xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); }
  .benefit__text { color: var(--color-text-muted); }

  .fask__grid { display: grid; gap: var(--space-7); align-items: center; }
  @media (min-width: 60em) {
    .fask__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); }
  }

  .fscreen__frame { max-inline-size: 72rem; }

  .technical__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: start; }
  @media (min-width: 64em) {
    .technical__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); }
    .technical__grid > .section-head { position: sticky; top: calc(var(--header-offset) + var(--space-5)); }
  }
  .technical__protocols { display: grid; gap: var(--space-3); margin-block-start: var(--space-5); }
  .technical__label { font-size: var(--text-xs); color: var(--color-text-subtle); }
  .technical__tabs {
    display: grid;
    gap: var(--space-5);
    padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
  }
  .technical__panel { display: grid; gap: var(--space-3); }
  .technical__panel + .technical__panel { padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border); }
  .tabs.is-tabbed .technical__panel + .technical__panel { padding-block-start: 0; border: 0; }
  .technical__panel .tabs__heading { font-size: var(--text-xl); font-weight: var(--font-medium); }
  .technical__panel .prose { max-inline-size: none; }

  .fflow__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .fflow__rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
  .fflow__sep { display: grid; color: var(--color-text-subtle); }
  .fflow__sep .icon { --icon-size: 1rem; }
  .fflow__step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.55rem 1rem 0.55rem 0.75rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .fflow__step .icon { --icon-size: 1rem; }
  .fflow__step:hover { background: var(--lime); border-color: var(--lime); color: var(--black); }
  .fflow__step.is-current { background: var(--lime); border-color: var(--lime); color: var(--black); font-weight: var(--font-medium); }

  .fpager { display: grid; gap: var(--space-4); }
  @media (min-width: 40em) { .fpager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .fpager__link {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), translate var(--duration-normal) var(--ease-standard);
  }
  .fpager__link:hover,
  .fpager__link:focus-visible { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }
  .fpager__link--next { justify-items: end; text-align: end; }
  @media (min-width: 40em) { .fpager__link--next:only-child { grid-column: 2; } }
  .fpager__dir { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); }
  .fpager__dir .icon { --icon-size: 1em; color: var(--color-accent-ink); }
  .fpager__name { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); }
  .fpager__name .icon { --icon-size: 1.1rem; }

  @media (prefers-reduced-motion: reduce) {
    .phero__chat,
    .pipe__rail::before,
    .wires__hub-ring { animation: none; }
    .wires__pulse { display: none; }
  }

  /* ======================================================================
     14. SENSORS (Phase 7) — the hub (hero with counts, the goal picker over
         product-shot tiles, Custom-built on a black panel, the three-step
         journey) and the sensor page (hero with the product stage, facts
         column, the variant explorer, the variant table on the black band,
         function cards). Product shots are shot on white, so every stage
         stays white in both schemes (like the feature drawings).
     ====================================================================== */

  /* --- sensor tiles (hub, children, siblings) --------------------------- */
  .stile {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    block-size: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    color: var(--color-text);
    background: var(--color-bg);
    text-decoration: none;
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), translate var(--duration-normal) var(--ease-standard);
  }
  .stile:hover,
  .stile:focus-visible { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }
  .stile__stage {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    padding: var(--space-5);
    background: var(--white);
    border-block-end: 1px solid var(--color-border);
    overflow: hidden;
  }
  .stile__stage img { inline-size: 100%; block-size: 100%; object-fit: contain; transition: scale var(--duration-slow) var(--ease-standard); }
  .stile:hover .stile__stage img { scale: 1.05; }
  .stile__stage--photo { padding: 0; }
  .stile__stage--photo picture { display: block; inline-size: 100%; block-size: 100%; }
  .stile__stage--photo img { object-fit: cover; }
  .stile__stage--icon { color: var(--black); }
  .stile__stage--icon .icon { --icon-size: 2.5rem; }
  .stile__body { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-4) var(--space-8) var(--space-5) var(--space-5); }
  .stile__meta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); }
  .stile__meta .icon { --icon-size: 0.95rem; color: var(--color-accent-ink); }
  .stile__title { font-size: var(--text-xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); line-height: 1.2; }
  .stile__hint { font-size: var(--text-sm); color: var(--color-text-muted); text-wrap: pretty; }
  .stile__go {
    position: absolute;
    inset-inline-end: var(--space-4);
    inset-block-end: var(--space-4);
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .stile__go .icon { --icon-size: 1rem; }
  .stile:hover .stile__go,
  .stile:focus-visible .stile__go { background: var(--lime); border-color: var(--lime); color: var(--black); }
  .stile--ask { border-style: dashed; }
  .stile--ask .stile__stage { background: transparent; }
  .stile--ask .stile__stage--icon { color: var(--color-text); }

  /* --- hub: hero + counts ---------------------------------------------- */
  .shub-hero { position: relative; padding-block: var(--page-top) var(--space-8); overflow: clip; }
  .shub-hero__grid { position: relative; display: grid; gap: var(--space-7); align-items: end; }
  @media (min-width: 60em) {
    .shub-hero__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-9); }
  }
  .shub-hero__copy .lead { max-inline-size: 44rem; }
  .shub-hero__title { font-size: var(--text-5xl); text-wrap: balance; }
  .shub-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  @media (min-width: 60em) { .shub-stats { grid-template-columns: 1fr; } }
  .shub-stats > div {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-1);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border-strong, var(--color-border));
  }
  .shub-stats dt { font-size: var(--text-sm); color: var(--color-text-muted); }
  .shub-stats dd { font-size: var(--text-4xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); line-height: 1; font-variant-numeric: tabular-nums; }

  /* --- hub: the picker + grid ------------------------------------------ */
  .shub-picker { display: grid; gap: var(--space-4); }
  .shub-picker[hidden] { display: none; }
  .shub-picker__title { font-size: var(--text-2xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); }
  .shub-picker__chips { --cluster-space: var(--space-2); }
  .shub-chip {
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .shub-chip:hover { background: var(--lime); border-color: var(--lime); color: var(--black); }
  .shub-chip[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
  .shub-picker__count { font-size: var(--text-sm); color: var(--color-text-subtle); min-block-size: 1lh; }

  .shub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr));   /* 4 across at the shell width: 12 families = 3 full rows */
    gap: var(--space-4);
  }
  .shub-grid__item[hidden] { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .shub-grid__item { animation: shub-in var(--duration-normal) var(--ease-standard) both; }
  }
  @keyframes shub-in { from { opacity: 0; translate: 0 6px; } }

  /* --- hub: Custom-built on the black panel ---------------------------- */
  .shub-custom {
    position: relative;
    display: grid;
    gap: var(--space-7);
    padding: clamp(1.5rem, 1rem + 3vw, 4rem);
    overflow: clip;
    isolation: isolate;
  }
  @media (min-width: 60em) {
    .shub-custom { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: var(--space-9); }
  }
  .shub-custom h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
  .shub-custom .eyebrow .icon { --icon-size: 1rem; margin-inline-end: var(--space-2); }
  .shub-custom__builds { display: grid; gap: var(--space-3); }
  .shub-build {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
  }
  .shub-build:hover,
  .shub-build:focus-visible { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }
  .shub-build > .icon { --icon-size: 1.1rem; color: var(--color-accent-ink); }
  .shub-build__icon { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-md); background: var(--lime); color: var(--black); }
  .shub-build__icon .icon { --icon-size: 1.2rem; }
  .shub-build__body { display: grid; gap: 0.15rem; }
  .shub-build__title { font-size: var(--text-lg); font-weight: var(--font-medium); }
  .shub-build__hint { font-size: var(--text-sm); color: var(--color-text-muted); }

  /* --- steps (hub journey, custom-built process) ----------------------- */
  .sprocess__list { display: grid; gap: var(--space-6); counter-reset: sstep; }
  @media (min-width: 48em) {
    .sprocess__list { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-7); }
  }
  .sprocess__step {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border-strong, var(--color-border));
  }
  .sprocess__num {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    color: var(--color-accent-ink);
  }
  .sprocess__num .icon { --icon-size: 1.15rem; }
  .sprocess__title { font-size: var(--text-xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); }
  .sprocess__text { color: var(--color-text-muted); text-wrap: pretty; }
  .sprocess__step .link-arrow { margin-block-start: var(--space-2); justify-self: start; }

  /* --- sensor page: hero with the product stage ------------------------ */
  .shero__eyebrow { margin-block-end: var(--space-4); }
  .shero__eyebrow .icon { --icon-size: 1rem; margin-inline-end: var(--space-2); }
  .shero__stage {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
    aspect-ratio: 5 / 4;
    padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 3vw, 3.5rem) clamp(4rem, 3rem + 2vw, 5rem);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background:
      radial-gradient(rgb(0 0 0 / 0.1) 1px, transparent 1.5px) 0 0 / 18px 18px,
      var(--white);
    overflow: hidden;
  }
  .shero__stage > img { inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; }
  .shero__photo { position: absolute; inset: 0; }
  .shero__photo picture,
  .shero__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .shero__icon { color: var(--black); }
  .shero__icon .icon { --icon-size: 5rem; }
  .shero__caption {
    position: absolute;
    inset-inline: var(--space-4);
    inset-block-end: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
  .shero__caption .chip { background: var(--white); color: var(--black); border-color: rgb(0 0 0 / 0.7); }
  .shero__signal {
    position: relative;
    inline-size: 0.6rem;
    block-size: 0.6rem;
    margin-inline: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--black);
  }
  .shero__signal::after {
    content: "";
    position: absolute;
    inset: -0.4rem;
    border-radius: inherit;
    border: 2px solid var(--black);
    opacity: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .shero__signal::after { animation: shero-ping 2.4s var(--ease-standard) infinite; }
  }
  @keyframes shero-ping { 0% { opacity: 0.8; scale: 0.4; } 80%, 100% { opacity: 0; scale: 1.6; } }

  /* --- sensor page: body + facts --------------------------------------- */
  .sabout__grid { display: grid; gap: var(--space-7); align-items: start; }
  @media (min-width: 56em) {
    .sabout__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-9); }
  }
  .sabout__body { font-size: var(--text-lg); }
  .sfacts { display: grid; }
  .sfacts__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-4);
    border-block-start: 1px solid var(--color-border);
  }
  .sfacts__row:first-child { border-color: var(--color-border-strong, var(--color-border)); }
  .sfacts dt { font-size: var(--text-sm); color: var(--color-text-muted); }
  .sfacts dd { font-size: var(--text-2xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
  .sfacts dd.sfacts__text { font-size: var(--text-base); font-family: var(--font-mono); letter-spacing: 0; }
  .sfacts__row--route { flex-direction: column; align-items: stretch; }
  .sfacts dd.sfacts__route {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    letter-spacing: 0;
  }
  .sfacts__route > span,
  .sfacts__route > a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.4rem 0.8rem 0.4rem 0.6rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
  }
  .sfacts__route > a:hover { background: var(--lime); border-color: var(--lime); color: var(--black); }
  .sfacts__route .icon { --icon-size: 0.95rem; }
  .sfacts__route > .icon { color: var(--color-text-subtle); }

  /* --- sensor page: the variant explorer ------------------------------- */
  .vexplorer { display: grid; gap: var(--space-5); }
  @media (min-width: 64em) {
    .vexplorer.is-tabbed { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-7); align-items: start; }
  }
  /* The list: a swipe rail on small screens, a vertical index from 64em. */
  .vexplorer__list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--space-4) * -1);
    padding: var(--space-1) var(--space-4);
  }
  .vexplorer__list::-webkit-scrollbar { display: none; }
  .vexplorer__list[hidden] { display: none; }
  @media (min-width: 64em) {
    .vexplorer__list {
      position: sticky;
      top: calc(var(--header-offset) + var(--space-5));
      flex-direction: column;
      gap: 0;
      overflow: visible;
      margin: 0;
      padding: 0;
      border-block-start: 1px solid var(--color-border-strong, var(--color-border));
    }
  }
  .vexplorer__tab {
    flex: none;
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-align: start;
    cursor: pointer;
    scroll-snap-align: start;
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .vexplorer__tab-hint { display: none; }
  .vexplorer__tab:hover { background: var(--lime); border-color: var(--lime); color: var(--black); }
  .vexplorer__tab[aria-selected="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
  @media (min-width: 64em) {
    .vexplorer__tab {
      position: relative;
      padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
      border: 0;
      border-block-end: 1px solid var(--color-border);
      border-radius: 0;
      font-size: var(--text-base);
    }
    .vexplorer__tab-hint { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-text-subtle); }
    .vexplorer__tab::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      inset-block: var(--space-3);
      inline-size: 3px;
      border-radius: var(--radius-full);
      background: var(--color-accent-ink);
      scale: 1 0;
      transition: scale var(--duration-normal) var(--ease-standard);
    }
    .vexplorer__tab:hover { background: transparent; color: var(--color-text); }
    .vexplorer__tab[aria-selected="true"] { background: transparent; color: var(--color-text); }
    .vexplorer__tab[aria-selected="true"]::before { scale: 1 1; }
    .vexplorer__tab[aria-selected="true"] .vexplorer__tab-hint { color: var(--color-text-muted); }
  }

  .vexplorer__panels { display: grid; gap: var(--space-5); }
  .vpanel {
    display: grid;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    overflow: hidden;
    scroll-margin-block-start: calc(var(--header-offset) + var(--space-5));
  }
  @media (min-width: 40em) {
    .vpanel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  }
  .vexplorer.is-tabbed .vpanel:not([hidden]) { animation: vpanel-in var(--duration-normal) var(--ease-standard); }
  @keyframes vpanel-in { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .vexplorer.is-tabbed .vpanel:not([hidden]) { animation: none; } }
  .vpanel__stage {
    display: grid;
    place-items: center;
    min-block-size: 16rem;
    padding: var(--space-6);
    background: var(--white);
    color: var(--black);
    border-block-end: 1px solid var(--color-border);
  }
  @media (min-width: 40em) {
    .vpanel__stage { border-block-end: 0; border-inline-end: 1px solid var(--color-border); }
  }
  .vpanel__stage img { inline-size: 100%; max-block-size: 22rem; object-fit: contain; }
  .vpanel__stage--empty .icon { --icon-size: 4rem; }
  .vpanel__copy { display: grid; align-content: start; gap: var(--space-3); padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
  .vpanel__name { font-size: var(--text-2xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); }
  .vpanel__aka { font-size: var(--text-sm); color: var(--color-text-subtle); margin-block-start: calc(var(--space-2) * -1); }
  .vpanel__summary { font-size: var(--text-lg); font-weight: var(--font-medium); text-wrap: pretty; }
  .vpanel__text { color: var(--color-text-muted); text-wrap: pretty; }
  .vpanel__facts { display: grid; gap: var(--space-3); margin-block-start: var(--space-2); }
  .vpanel__facts > div { display: grid; gap: 0.15rem; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); }
  .vpanel__facts dt { font-size: var(--text-xs); color: var(--color-text-subtle); }
  .vpanel__facts dd { font-size: var(--text-sm); }

  /* --- sensor page: the variant table on the black band ---------------- */
  .stable { overflow-x: auto; border-radius: var(--radius-xl); border: 1px solid var(--color-border); }
  .stable table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
  .stable caption { padding: var(--space-4) var(--space-5) 0; text-align: start; font-weight: var(--font-medium); }
  .stable th,
  .stable td { padding: var(--space-3) var(--space-5); text-align: start; vertical-align: top; }
  .stable thead th { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-text-subtle); border-block-end: 1px solid var(--color-border); }
  .stable tbody tr + tr > * { border-block-start: 1px solid var(--color-border); }
  .stable tbody th { font-weight: var(--font-medium); }
  .stable tbody th a { color: inherit; text-decoration: none; }
  .stable tbody th a:hover { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 0.2em; }
  .stable td { color: var(--color-text-muted); }
  .stable--specs tbody th { inline-size: 40%; }
  .stech__note { display: flex; gap: var(--space-3); align-items: start; font-size: var(--text-sm); color: var(--color-text-muted); }
  .stech__note > .icon { --icon-size: 1.1rem; flex: none; color: var(--color-accent-ink); margin-block-start: 0.1em; }
  .stech__note a { color: var(--color-text); }

  /* --- sensor page: platform function cards ---------------------------- */
  .sfeature {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-3);
    block-size: 100%;
    padding: var(--space-5) var(--space-5) var(--space-8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
  }
  .sfeature:hover,
  .sfeature:focus-visible { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }
  .sfeature__icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); color: var(--color-accent-ink); }
  .sfeature__icon .icon { --icon-size: 1.15rem; }
  .sfeature__title { font-size: var(--text-xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); }
  .sfeature__text { font-size: var(--text-sm); color: var(--color-text-muted); text-wrap: pretty; }
  .sfeature__go { position: absolute; inset-inline-start: var(--space-5); inset-block-end: var(--space-5); color: var(--color-accent-ink); }
  .sfeature__go .icon { --icon-size: 1.1rem; transition: translate var(--duration-fast) var(--ease-standard); }
  .sfeature:hover .sfeature__go .icon { translate: 4px 0; }

  /* ======================================================================
     15. REFERENCES + PLANS (Phase 8)
         Hub: the sticky story with one panel per case (numbers, quote
         excerpt, sensors) + the compact "More installations" list. Case:
         the industry hero reused, three large numbers, story + facts, the
         data flow on the black band (sensors → Gateway → functions), the
         quote, other cases. Plans: three cards (the highlight is black),
         "which plan fits" tabs, the comparison table, the scaling band.
     ====================================================================== */

  /* --- hub: case slider (Phase 8.1) ------------------------------------
     One photo panel per featured case, stacked (.rstack, below; was a snap slider with site.js
     [data-carousel] — the home case carousel's bar). Phones: the photo on
     top, the text on black. From 64em the photo fills the slide. The panel
     re-points the tokens like a black band (components.css § 1). */

  .rpanel {
    position: relative;
    display: grid;
    min-block-size: 34rem;
    border-radius: var(--radius-xl);
    overflow: hidden;
    isolation: isolate;
    background: var(--color-panel);
    color: var(--color-text);
  }

  .rpanel__media { position: absolute; inset: 0; z-index: -2; }
  .rpanel__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale 1.2s var(--ease-emphasized), filter 0.7s var(--ease-standard);
  }

  /* the gradient that carries the text: dark at the foot and the top edge */
  .rpanel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top, rgb(0 0 0 / 0.92) 0%, rgb(0 0 0 / 0.72) 38%, rgb(0 0 0 / 0.1) 72%),
      linear-gradient(to bottom, rgb(0 0 0 / 0.55), transparent 30%);
    transition: background-color 0.7s var(--ease-standard);
  }

  /* stacked (phones / no JS): the photo is the card's top, the text sits
     on black below it — a full-height photo made the lead unreadable */
  .rpanel__media { block-size: 22rem; inset: 0 0 auto 0; }
  .rpanel::after {
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.55) 0, transparent 7rem, transparent 10rem, rgb(0 0 0 / 0.85) 17rem, var(--black) 22rem);
  }

  .rpanel--art .rpanel__media { background: radial-gradient(circle at 70% 30%, rgb(219 249 54 / 0.18), transparent 60%); }

  .rpanel__body {
    display: grid;
    align-content: space-between;
    gap: var(--space-7);
    padding: clamp(var(--space-5), 3vw, var(--space-7));
  }

  .rpanel__top { display: grid; gap: var(--space-5); justify-items: start; }

  .rpanel__eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); color: var(--white); }
  .rpanel__eyebrow a { color: inherit; text-decoration: none; }
  .rpanel__eyebrow a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .rpanel__place { display: inline-flex; align-items: center; gap: var(--space-1); color: rgb(255 255 255 / 0.92); }
  .rpanel__top { text-shadow: 0 1px 12px rgb(0 0 0 / 0.5); }
  .rpanel__place .icon { --icon-size: 0.85rem; }

  /* the quote as a glass note in the top corner */
  .rpanel__quote {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    max-inline-size: 26rem;
    margin: 0;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: rgb(0 0 0 / 0.42);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    text-wrap: pretty;
  }
  .rpanel__quote p { margin: 0; }

  .rpanel__quote-mark {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--lime);
    color: var(--black);
  }
  .rpanel__quote-mark .icon { --icon-size: 0.8rem; }

  .rpanel__main { display: grid; gap: var(--space-5); max-inline-size: 52rem; }

  .rpanel__title {
    margin: 0;
    font-size: var(--text-3xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }
  .rpanel__title a { color: inherit; text-decoration: none; }
  .rpanel__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }   /* the whole panel opens the case */
  .rpanel__lead { margin: 0; max-inline-size: 58ch; color: var(--color-text-muted); text-wrap: pretty; }

  /* the numbers in a row, each over a hairline — value large, label small */
  .rpanel__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-4) var(--space-5);
    margin: 0;
  }
  .rpanel__stats > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid rgb(255 255 255 / 0.3);
  }
  .rpanel__stats dt { order: 2; font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-snug); }
  .rpanel__stats dd { order: 1; margin: 0; font-size: var(--text-xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--lime); }

  .rpanel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .rpanel__sensors { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
  .rpanel__sensors .icon { --icon-size: 0.85rem; }

  /* links + chips sit above the panel-wide title link */
  .rpanel__eyebrow, .rpanel__sensors, .rpanel__more, .rpanel__quote { position: relative; z-index: 1; }

  .rpanel:hover .rpanel__media img { scale: 1.04; }

  /* ---- the stack (2026-10-07, was a slider): panels one under the other;
     from 64em each one sticks under the header and the next slides over
     it, the earlier ones peeking out a step above (--i). Reduced motion =
     a plain list. */
  .rstack { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
  .rstack__item { display: grid; }

  @media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
    .rstack { gap: var(--space-7); }
    .rstack__item {
      position: sticky;
      top: calc(var(--header-offset) + var(--space-4) + var(--i, 0) * var(--space-4));
    }
    .rstack .rpanel {
      min-block-size: clamp(30rem, calc(100svh - var(--header-offset) - var(--space-9) * 1.6), 42rem);
      box-shadow: 0 -1.5rem 3rem -1.5rem rgb(0 0 0 / 0.35);
    }
  }

  /* the cases after the featured ones: small photo tiles */
  .rolder { padding-block-start: var(--space-7); }
  .rolder__title { margin: 0; font-size: var(--text-2xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); }
  .rolder__grid { margin: 0; padding: 0; list-style: none; }

  /* wide: the photo fills the panel, the text sits on it */
  @media (min-width: 64em) {
    .rpanel { min-block-size: clamp(34rem, 74vh, 44rem); }
    .rpanel__media { block-size: auto; inset: 0; }
    .rpanel::after {
      background:
        linear-gradient(to top, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.65) 36%, rgb(0 0 0 / 0.08) 72%),
        linear-gradient(to bottom, rgb(0 0 0 / 0.55), transparent 30%);
    }
    .rpanel__top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  }

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

  /* --- hub: more installations --------------------------------------- */
  /* a logo wall: no boxes — the mark on a quiet line, the scope beneath */
  .minst__wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-8) var(--space-6);
  }

  .minst__tile { display: grid; gap: var(--space-4); align-content: start; }

  .minst__mark {
    display: flex;
    align-items: center;
    block-size: 6rem;
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--color-border);
    transition: border-color var(--duration-normal) var(--ease-standard);
  }

  .minst__logo {
    display: block;
    block-size: var(--logo-h, 3rem);
    inline-size: auto;
    max-inline-size: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.8;
    transition: filter var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
  }

  /* invert, not flatten: a filled badge (Sport-Club) keeps its drawing */
  [data-theme="dark"] .minst__logo { filter: grayscale(1) invert(1); }
  [data-theme="dark"] .minst__tile:hover .minst__logo { filter: grayscale(1) invert(1); opacity: 1; }

  .minst__word {
    font-size: var(--text-lg);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-text);
    opacity: 0.7;
  }

  .minst__tile:hover .minst__logo { filter: none; opacity: 1; }
  .minst__tile:hover .minst__word { opacity: 1; }
  .minst__tile:hover .minst__mark { border-color: var(--color-accent-ink); }

  .minst__body { display: grid; gap: var(--space-2); justify-items: start; }
  .minst__name { font-weight: var(--font-medium); }
  .minst__place { color: var(--color-text-subtle); font-weight: 400; }
  .minst__scope { font-size: var(--text-sm); color: var(--color-text-muted); text-wrap: pretty; }

  .minst__note {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .minst__note .icon { --icon-size: 0.95rem; flex: none; }

  /* --- case: hero ---------------------------------------------------- */
  .chero__eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .chero__eyebrow .icon { --icon-size: 0.95rem; color: var(--color-accent-ink); }
  .chero__eyebrow a { color: inherit; }
  .chero__frame .ihero__site .icon { --icon-size: 0.85rem; }

  /* --- case: the numbers --------------------------------------------- */
  .cnumbers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    margin: 0;
    border-block: 1px solid var(--color-border);
  }

  .cnumbers__item {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
  }

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

  @media (max-width: 47.99em) {
    .cnumbers__item + .cnumbers__item { border-inline-start: 0; border-block-start: 1px solid var(--color-border); }
    .cnumbers__item { padding-inline: 0; }
  }

  .cnumbers__value {
    font-size: var(--text-4xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-none);
  }

  /* a lime underline mark under the value: a fill, never a lime glyph on white */
  .cnumbers__value::after {
    content: "";
    display: block;
    inline-size: 2.5rem;
    block-size: 0.3rem;
    margin-block-start: var(--space-4);
    border-radius: var(--radius-full);
    background: var(--lime);
  }

  .cnumbers__label { font-size: var(--text-base); color: var(--color-text-muted); max-inline-size: 22rem; text-wrap: pretty; }

  /* --- case: story + facts ------------------------------------------- */
  .cstory__grid { display: grid; gap: var(--space-7); }

  @media (min-width: 64em) {
    .cstory__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-9); align-items: start; }
    .cstory__aside { position: sticky; inset-block-start: calc(var(--header-offset, 5rem) + var(--space-5)); }
  }

  .cstory__body { display: grid; gap: var(--space-8); }
  .cstory__part { display: grid; gap: var(--space-4); }
  .cstory__title { font-size: var(--text-2xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); }
  .cstory__part .prose { max-inline-size: 42rem; }
  .cstory__functions dd { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* --- case: data flow (black band) ------------------------------------- */
  .cflow { position: relative; overflow: hidden; }

  .cflow__rail {
    position: relative;
    display: grid;
    gap: var(--space-7);
  }

  @media (min-width: 64em) {
    .cflow__rail { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
  }

  .cflow__stage { position: relative; display: grid; gap: var(--space-4); align-content: center; }
  .cflow__step { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); }
  .cflow__list { display: grid; gap: var(--space-2); }

  .cflow__node {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
  }

  .cflow__node:hover,
  .cflow__node:focus-visible { border-color: var(--hover-border); box-shadow: var(--hover-shadow-sm); }

  /* product shots have a white ground: a white tile shows them as they are */
  .cflow__thumb {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
  }

  .cflow__thumb picture,
  .cflow__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
  .cflow__thumb--icon { background: transparent; border: 1px solid var(--color-border); color: var(--color-accent-ink); }
  .cflow__thumb--icon .icon { --icon-size: 1.15rem; }
  .cflow__name { font-size: var(--text-sm); font-weight: var(--font-medium); }

  .cflow__gateway {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--lime);
    background: rgb(255 255 255 / 0.04);
    color: var(--color-text);
    text-align: center;
    text-decoration: none;
    transition: box-shadow var(--duration-normal) var(--ease-standard);
  }

  .cflow__gateway:hover,
  .cflow__gateway:focus-visible { box-shadow: var(--hover-shadow); }
  .cflow__gateway > .icon { --icon-size: 2rem; color: var(--lime); }
  .cflow__gateway .cflow__name { font-size: var(--text-lg); }
  .cflow__hint { font-size: var(--text-xs); color: var(--color-text-muted); }

  .cflow__pulse {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid var(--lime);
    opacity: 0;
    pointer-events: none;
  }

  /* the wires: a hairline from each column into the Gateway, a lime impulse runs along */
  .cflow__stage--hub::before,
  .cflow__stage--hub::after {
    content: "";
    position: absolute;
    background:
      linear-gradient(90deg, transparent 0 40%, var(--lime) 50%, transparent 60% 100%) 0 0 / 300% 100% no-repeat,
      var(--color-border);
  }

  @media (min-width: 64em) {
    .cflow__stage--hub::before,
    .cflow__stage--hub::after { inset-block-start: calc(50% + 0.75rem); block-size: 1px; inline-size: var(--space-8); }
    .cflow__stage--hub::before { inset-inline-end: 100%; }
    .cflow__stage--hub::after { inset-inline-start: 100%; }
  }

  @media (max-width: 63.99em) {
    .cflow__stage--hub::before,
    .cflow__stage--hub::after {
      inset-inline-start: 50%;
      inline-size: 1px;
      block-size: var(--space-7);
      background:
        linear-gradient(180deg, transparent 0 40%, var(--lime) 50%, transparent 60% 100%) 0 0 / 100% 300% no-repeat,
        var(--color-border);
    }
    .cflow__stage--hub::before { inset-block-end: 100%; }
    .cflow__stage--hub::after { inset-block-start: 100%; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .cflow__stage--hub::before,
    .cflow__stage--hub::after { animation: cflow-wire 2.4s var(--ease-standard) infinite; }
    .cflow__stage--hub::after { animation-delay: 1.2s; }
    .cflow__pulse { animation: cflow-pulse 2.4s var(--ease-standard) infinite 0.9s; }
  }

  @keyframes cflow-wire {
    from { background-position: 100% 100%, 0 0; }
    to   { background-position: 0 0, 0 0; }
  }

  @keyframes cflow-pulse {
    0%   { opacity: 0.8; scale: 1; }
    70%  { opacity: 0; scale: 1.08; }
    100% { opacity: 0; scale: 1.08; }
  }

  /* --- case: quote ----------------------------------------------------- */
  .cquote__figure {
    display: grid;
    gap: var(--space-6);
    margin: 0;
    padding-inline-start: clamp(0rem, -1rem + 4vw, 3rem);
    border-inline-start: 2px solid var(--color-text);
  }

  .cquote__mark {
    display: grid;
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: var(--radius-full);
    background: var(--lime);
    color: var(--black);
  }

  .cquote__mark .icon { --icon-size: 1.35rem; }

  .cquote__text {
    margin: 0;
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--font-medium);
    text-wrap: pretty;
  }

  .cquote__cite { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
  .cquote__name { font-weight: var(--font-medium); }
  .cquote__name:empty { display: none; }
  .cquote__role { color: var(--color-text-muted); }

  /* --- case: gallery ----------------------------------------------------- */
  .cgallery__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(80%, 26rem);
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--space-2);
  }

  .cgallery__grid > li { scroll-snap-align: start; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
  .cgallery__grid img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* --- case: other references -------------------------------------------- */
  .cothers__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-4); max-inline-size: none; }

  .ccard {
    display: grid;
    grid-template-rows: auto 1fr;
    block-size: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    position: relative;
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
  }

  .ccard:hover,
  .ccard:focus-visible { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }
  .ccard__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-bg-raised); }
  .ccard__media--art { background: radial-gradient(60% 50% at 80% 20%, color-mix(in oklab, var(--lime) 22%, transparent) 0%, transparent 70%), var(--black); }
  .ccard__media picture,
  .ccard__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--duration-slow) var(--ease-standard); }
  .ccard:hover .ccard__media img { scale: 1.05; }
  .ccard__body { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5) var(--space-5) var(--space-8); }
  .ccard__meta { font-size: var(--text-xs); color: var(--color-text-subtle); }
  .ccard__title { font-size: var(--text-lg); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); text-wrap: balance; }
  .ccard__go { position: absolute; inset-inline-start: var(--space-5); inset-block-end: var(--space-5); color: var(--color-accent-ink); }
  .ccard__go .icon { --icon-size: 1.1rem; transition: translate var(--duration-fast) var(--ease-standard); }
  .ccard:hover .ccard__go .icon { translate: 4px 0; }

  /* --- plans: the cards --------------------------------------------------- */
  .pplans__grid { display: grid; gap: var(--space-4); }

  @media (min-width: 64em) {
    .pplans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  }

  .pcard {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    scroll-margin-block-start: calc(var(--header-offset, 5rem) + var(--space-5));
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
  }

  .pcard:hover { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }
  
  /* the highlight: a black card, tokens re-pointed like .band--panel */
  .pcard--highlight {
    --color-bg:            var(--black);
    --color-bg-raised:     rgb(255 255 255 / 0.10);
    --color-text:          var(--white);
    --color-text-muted:    var(--paper-85);
    --color-text-subtle:   var(--paper-70);
    --color-border:        var(--color-border-on-panel);
    --color-accent-ink:    var(--lime);
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(70% 45% at 100% 0%, color-mix(in oklab, var(--lime) 18%, transparent) 0%, transparent 70%),
      var(--black);
  }

  /* dark scheme: flips to a white card like the home's .plan-card--highlight (tokens § 7) */
  [data-theme="dark"] .pcard--highlight { background: var(--white); }

  .pcard__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
  .pcard__brand { flex-basis: 100%; font-size: var(--text-sm); color: var(--color-text-subtle); }
  .pcard__title { font-size: var(--text-3xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-display); line-height: var(--leading-none); }

  .pcard__badge {
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full);
    background: var(--lime);
    color: var(--black);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    align-self: center;
  }

  .pcard__tagline { font-size: var(--text-lg); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); text-wrap: balance; }
  .pcard__audience { font-size: var(--text-sm); color: var(--color-text-muted); text-wrap: pretty; }

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

  .pcard__check {
    display: grid;
    place-items: center;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    border-radius: var(--radius-full);
    background: var(--lime);
    color: var(--black);
  }

  .pcard__check .icon { --icon-size: 0.8rem; stroke-width: 3; }

  .pcard__price { display: flex; gap: var(--space-2); align-items: center; margin-block-start: auto; font-size: var(--text-xs); color: var(--color-text-subtle); }
  .pcard__price .icon { --icon-size: 0.95rem; flex: none; color: var(--color-accent-ink); }
  .pcard__cta { align-self: stretch; justify-content: center; }

  .pplans__jump { margin-block-start: var(--space-5); text-align: center; }

  /* --- plans: which plan fits ---------------------------------------------- */
  .pfit__grid { display: grid; gap: var(--space-6); }

  @media (min-width: 64em) {
    .pfit__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-9); align-items: start; }
  }

  .pfit__list { display: grid; gap: var(--space-2); }

  @media (min-width: 40em) {
    .pfit__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .pfit__tab { justify-content: center; text-align: center; white-space: normal; line-height: var(--leading-snug); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); }

  .pfit__panel {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    margin-block-start: var(--space-4);
    padding: clamp(1.25rem, 1rem + 1vw, 2rem);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
  }

  .tabs:not(.is-tabbed) .pfit__panel + .pfit__panel { margin-block-start: var(--space-3); }
  .pfit__panel .tabs__heading { font-size: var(--text-lg); font-weight: var(--font-medium); }
  .pfit__result { display: grid; gap: var(--space-1); }
  .pfit__result-label { font-size: var(--text-xs); color: var(--color-text-subtle); }
  .pfit__plan { font-size: var(--text-3xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-display); line-height: var(--leading-none); }
  .pfit__text { font-size: var(--text-base); color: var(--color-text-muted); max-inline-size: 40rem; text-wrap: pretty; }

  @media (prefers-reduced-motion: no-preference) {
    .tabs.is-tabbed .pfit__panel:not([hidden]) { animation: pfit-in var(--duration-slow) var(--ease-emphasized); }
  }

  @keyframes pfit-in {
    from { opacity: 0; translate: 0 0.5rem; }
    to   { opacity: 1; translate: 0 0; }
  }

  /* --- plans: the comparison table ---------------------------------------- */
  .pcompare__scroll {
    overflow-x: auto;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
  }

  .pcompare__table { inline-size: 100%; min-inline-size: 40rem; border-collapse: collapse; font-size: var(--text-sm); }
  .pcompare__table th,
  .pcompare__table td { padding: var(--space-4) var(--space-5); text-align: center; vertical-align: middle; }
  .pcompare__table tbody th { text-align: start; font-weight: var(--font-normal); inline-size: 40%; }
  .pcompare__table tbody tr + tr > *,
  .pcompare__table tfoot td { border-block-start: 1px solid var(--color-border); }

  .pcompare__table thead th {
    position: sticky;
    inset-block-start: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    background: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
  }

  .pcompare__table thead a { color: inherit; text-decoration: none; }
  .pcompare__table thead a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

  /* first column sticks while the plans scroll sideways on a phone */
  .pcompare__table tbody th,
  .pcompare__table thead th:first-child,
  .pcompare__table tfoot td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--color-bg); }

  /* the highlighted plan's column: hairlines left + right, the lime top edge (grounds stay pure) */
  .pcompare__table .is-highlight { box-shadow: inset 1px 0 var(--color-border), inset -1px 0 var(--color-border); }
  .pcompare__table thead .is-highlight { box-shadow: inset 0 3px 0 var(--lime), inset 1px 0 var(--color-border), inset -1px 0 var(--color-border); }

  /* phone: each row = the label across, the three plan cells beneath — all plans in view, no sideways scroll */
  @media (max-width: 39.99em) {
    .pcompare__table { min-inline-size: 0; }
    .pcompare__table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pcompare__table thead th:first-child,
    .pcompare__table tfoot td:first-child { display: none; }
    .pcompare__table tbody th { grid-column: 1 / -1; position: static; inline-size: auto; padding-block-end: var(--space-1); font-weight: var(--font-medium); }
    .pcompare__table tbody td { padding-block-start: var(--space-2); }
    .pcompare__table th,
    .pcompare__table td { padding-inline: var(--space-3); }
    .pcompare__table thead th { font-size: var(--text-base); }
    .pcompare__table tbody tr + tr > td { border-block-start: 0; }
    .pcompare__table tfoot .btn { padding-inline: var(--space-3); }
  }

  .pcompare__yes {
    display: inline-grid;
    place-items: center;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    border-radius: var(--radius-full);
    background: var(--lime);
    color: var(--black);
  }

  .pcompare__yes .icon { --icon-size: 0.9rem; stroke-width: 3; }
  .pcompare__no { color: var(--color-text-subtle); }
  .pcompare__no .icon { --icon-size: 1rem; }
  .pcompare__value { font-weight: var(--font-medium); }

  /* --- plans: scaling (black band) ----------------------------------------- */
  .pscale { position: relative; overflow: hidden; }
  .pscale__grid { display: grid; gap: var(--space-7); align-items: center; }

  @media (min-width: 64em) {
    .pscale__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-9); }
  }

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

  .pscale__lever {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
  }

  .pscale__icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    color: var(--lime);
  }

  .pscale__icon .icon { --icon-size: 1.1rem; }
  .pscale__label { font-weight: var(--font-medium); }

  /* a gauge that fills a little further per lever: "scales with use" */
  .pscale__bar { position: relative; block-size: 0.3rem; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
  .pscale__bar::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: calc(35% + var(--i, 0) * 25%);
    border-radius: inherit;
    background: var(--lime);
  }

  @media (prefers-reduced-motion: no-preference) {
    html[data-js] [data-reveal] .pscale__bar::after { transform-origin: left; scale: 0 1; transition: scale 1.2s var(--ease-emphasized) calc(var(--i, 0) * 150ms + 200ms); }
    html[data-js] [data-reveal].is-in .pscale__bar::after { scale: 1 1; }
  }

  /* ======================================================================
     PHOTO BAND (Phase 8.1, partials/photo-band.php) — a wide mood photo
     with one statement: the old site's calm between dense sections. Same
     inset as the hero and the black bands; the photo drifts against the
     scroll (scroll-driven animation, static where unsupported).
     ====================================================================== */
  .photo-band {
    inline-size: calc(100% - 2 * var(--gutter));
    max-inline-size: var(--shell-max);
    margin-inline: auto;
    padding-block: var(--space-6);
  }

  .photo-band__frame {
    position: relative;
    display: grid;
    align-items: end;
    min-block-size: clamp(26rem, 64vh, 42rem);
    border-radius: var(--radius-panel);
    overflow: hidden;
    isolation: isolate;
    background: var(--black);
    color: var(--white);
  }

  .photo-band__media { position: absolute; inset: 0; z-index: -2; }
  .photo-band__media picture,
  .photo-band__media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .photo-band__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top, rgb(0 0 0 / 0.7) 0%, rgb(0 0 0 / 0.25) 45%, transparent 70%),
      linear-gradient(to right, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.4) 40%, transparent 72%);
  }

  .photo-band__copy {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    max-inline-size: 44rem;
    padding: clamp(var(--space-6), 5vw, var(--space-9));
  }

  .photo-band__copy .eyebrow { color: var(--white); }

  .photo-band__title {
    margin: 0;
    font-size: var(--text-4xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  .photo-band__text { margin: 0; max-inline-size: 52ch; font-size: var(--text-lg); color: rgb(255 255 255 / 0.92); text-wrap: pretty; }

  .photo-band__credit {
    position: absolute;
    inset: auto var(--space-5) var(--space-4) auto;
    font-size: var(--text-xs);
    color: rgb(255 255 255 / 0.78);
  }

  [data-theme="dark"] .photo-band__frame { border: 1px solid var(--color-border-on-panel); }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .photo-band__media img {
        block-size: 118%;
        animation: photo-drift linear both;
        animation-timeline: view();
      }
    }
  }

  @keyframes photo-drift {
    from { translate: 0 -15%; }
    to   { translate: 0 0; }
  }

  /* ======================================================================
     FORMS (Phase 9) — contact inquiry + resource request: topic chips,
     field errors, the success card, the "what happens next" panel
     ====================================================================== */

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

  @media (min-width: 60em) {
    .contact__grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--space-8); }
    .contact__aside { position: sticky; top: var(--header-offset, 6rem); }
  }

  .contact-form,
  .contact-sent {
    container-type: inline-size;
    display: grid;
    gap: var(--space-5);
    padding: clamp(var(--space-5), 3vw, var(--space-7));
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    box-shadow: var(--card-shadow);
  }

  .contact-form__title,
  .contact-sent__title {
    font-size: var(--text-2xl);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  .contact-form__head { display: grid; gap: var(--space-2); }

  .contact-form__alert {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-error-bg);
    color: var(--color-error);
    font-size: var(--text-sm);
  }

  .contact-form__fields {
    display: grid;
    gap: var(--space-4);
  }

  @container (min-width: 34rem) {
    .contact-form__fields { grid-template-columns: 1fr 1fr; }
    .contact-form__fields .field--wide { grid-column: 1 / -1; }
  }

  .contact-form textarea.field__input { resize: vertical; min-block-size: 9rem; }

  .field__hint { font-size: var(--text-xs); color: var(--color-text-subtle); }

  .field__error {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-error);
  }

  .field--error .field__input { border-color: var(--color-error); }

  /* Topic chips: real radios, visually a chip row (keyboard: arrows) */
  .contact-topics { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }

  .contact-topics__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .contact-topic { position: relative; cursor: pointer; }

  .contact-topic input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
  }

  .contact-topic span {
    display: inline-block;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
  }

  .contact-topic:hover span { border-color: var(--color-text); }

  .contact-topic input:checked + span {
    background: var(--lime);
    border-color: var(--black);
    color: var(--black);
    font-weight: 600;
  }

  .contact-topic input:focus-visible + span {
    outline: 2px solid var(--color-focus, var(--color-text));
    outline-offset: 2px;
  }

  .contact-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: center;
  }

  .contact-form__note { font-size: var(--text-xs); color: var(--color-text-muted); max-inline-size: 36ch; }
  .contact-form__note a { color: inherit; }

  /* Success */
  .contact-sent { justify-items: start; }
  .contact-sent:focus { outline: none; }

  .contact-sent__icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 50%;
    background: var(--lime);
    color: var(--black);
    --icon-size: 1.4rem;
  }

  .contact-sent__text { color: var(--color-text-muted); max-inline-size: 52ch; }

  /* Aside: the next steps on a black panel, direct lines, locations */
  .contact__aside { display: grid; gap: var(--space-6); }

  .contact-next {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-panel, var(--black));
    color: var(--white);
  }

  [data-theme="dark"] .contact-next { border: 1px solid var(--color-border-on-panel); }

  .contact-next :is(h2, strong) { color: var(--white); }
  .contact-next__title { font-size: var(--text-lg); margin-block-end: var(--space-5); }

  .contact-next__list { display: grid; gap: var(--space-5); counter-reset: none; }

  .contact-next__step {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: var(--space-3);
    position: relative;
  }

  .contact-next__step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(1rem - 0.5px);
    inset-block: 2.25rem calc(-1 * var(--space-5) + 0.25rem);
    border-inline-start: 1px dashed color-mix(in oklab, var(--lime) 60%, transparent);
  }

  .contact-next__num {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: var(--lime);
    color: var(--black);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .contact-next__step strong { display: block; margin-block-end: var(--space-1); }
  .contact-next__step p { color: color-mix(in oklab, var(--white) 88%, transparent); font-size: var(--text-sm); }

  .contact-direct,
  .contact-places { display: grid; gap: var(--space-2); }

  .contact-direct__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
  }

  .contact-direct__link {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    inline-size: fit-content;
    border-block-end: 1px solid transparent;
  }

  .contact-direct__link:hover { border-block-end-color: currentColor; }
  .contact-direct__link .icon { color: var(--color-accent-ink); }

  .contact-places__list { display: grid; gap: var(--space-4); }
  .contact-places__list address { font-style: normal; color: var(--color-text-muted); font-size: var(--text-sm); margin-block-start: var(--space-1); }

  .contact-places__tag {
    margin-inline-start: var(--space-2);
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-full);
    background: var(--lime);
    color: var(--black);
    font-size: var(--text-xs);
    font-weight: 600;
  }

  /* ======================================================================
     § About + team cards (Phase 9) — templates/pages/about.php (mission,
     proof, values, locations, team grid) and team-member.php (the digital
     business card behind the printed card's QR code, phone first).
     ====================================================================== */

  /* --- Mission: statement left (sticky), the story right ------------------ */
  .about-mission__title {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  .about-mission .section-head .lead { margin-block-start: var(--space-4); }

  .about-mission__story {
    font-size: var(--text-lg);
    max-inline-size: 40rem;
  }

  @media (min-width: 56em) {
    .about-mission__story > p:first-child {
      font-size: var(--text-xl);
      color: var(--color-text);
      font-weight: var(--font-medium);
      letter-spacing: var(--tracking-tight);
    }
  }

  /* --- Where baiond runs: three case tiles ------------------------------- */
  .about-proof__list {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }

  .about-proof__list > li { display: grid; }

  .about-proof__item {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    background: var(--color-bg);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                translate var(--duration-normal) var(--ease-standard);
  }

  .about-proof__item:hover,
  .about-proof__item:focus-visible { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }

  .about-proof__media { display: block; overflow: hidden; background: var(--color-bg-muted); }
  .about-proof__media img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: scale var(--duration-slow) var(--ease-standard); }
  .about-proof__item:hover .about-proof__media img { scale: 1.04; }

  .about-proof__body { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5); }

  .about-proof__place {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    --icon-size: 0.95rem;
  }
  .about-proof__place .icon { color: var(--color-accent-ink); }

  .about-proof__title {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
  }

  .about-proof__text { color: var(--color-text-muted); }
  .about-proof__more { margin-block-start: var(--space-2); --icon-size: 1rem; }
  .about-proof__more .icon { color: var(--color-accent-ink); transition: translate var(--duration-fast) var(--ease-standard); }
  .about-proof__item:hover .about-proof__more .icon { translate: 3px 0; }

  /* --- Values: four columns on the black band ------------------------------ */
  .about-values { position: relative; overflow: hidden; }

  .about-values__grid {
    display: grid;
    gap: var(--space-6) var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    counter-reset: none;
  }

  .about-value {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }

  .about-value__icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-accent-ink);
    --icon-size: 1.25rem;
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
  }

  .about-value:hover .about-value__icon { background: var(--lime); border-color: var(--lime); color: var(--black); }

  .about-value__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
  }

  .about-value__text { margin: 0; color: var(--color-text-muted); text-wrap: pretty; }

  /* --- Locations: two photo cards ---------------------------------------- */
  .about-locations__grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }

  .about-location {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
  }

  .about-location__media { position: relative; margin: 0; overflow: hidden; }

  /* Licence credit on a Creative Commons photo (Balzers), bottom-right on the image. */
  .about-location__credit {
    position: absolute;
    inset: auto var(--space-2) var(--space-2) auto;
    padding: 0.15em 0.5em;
    border-radius: var(--radius-sm);
    background: rgb(0 0 0 / 0.55);
    font-size: var(--text-xs);
    color: rgb(255 255 255 / 0.92);
  }
  .about-location__credit a { color: inherit; text-decoration: none; }
  .about-location__credit a:hover { text-decoration: underline; }
  .about-location__media img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; }

  .about-location__body { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-6); }

  .about-location__role {
    justify-self: start;
    padding: 0.2em 0.65em;
    border-radius: var(--radius-full);
    background: var(--lime);
    color: var(--black);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .about-location__city {
    margin: var(--space-1) 0 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
  }

  .about-location__address { margin: 0 0 var(--space-2); font-style: normal; color: var(--color-text-muted); }
  .about-location .link-arrow { justify-self: start; --icon-size: 1rem; }
  .about-location .link-arrow .icon { color: var(--color-accent-ink); }

  /* --- Team grid: a mini card per member, links to the business card ----- */
  .about-team__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }

  .about-team__grid > li { display: grid; }

  .tmini {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "avatar go" "body body";
    align-items: start;
    gap: var(--space-5) var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    background: var(--color-bg);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                translate var(--duration-normal) var(--ease-standard);
  }

  .tmini:hover,
  .tmini:focus-visible { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }

  .tmini__avatar {
    grid-area: avatar;
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--black);
    color: var(--lime);
  }

  .tmini__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  .tmini__initials { font-size: var(--text-xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-wide); }

  [data-theme="dark"] .tmini__avatar { background: var(--lime); color: var(--black); }

  /* phones: one row per member (avatar · name · arrow) instead of tall tiles */
  @media (max-width: 40em) {
    .tmini { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "avatar body go"; align-items: center; gap: var(--space-4); padding: var(--space-4); }
    .tmini__avatar { inline-size: 3.5rem; block-size: 3.5rem; }
  }

  .tmini__body { grid-area: body; display: grid; gap: 0.15rem; min-inline-size: 0; }
  .tmini__name { font-size: var(--text-lg); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
  .tmini__role { font-size: var(--text-sm); color: var(--color-text-muted); }

  .tmini__go {
    grid-area: go;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-accent-ink);
    --icon-size: 1rem;
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
  }

  .tmini:hover .tmini__go { background: var(--lime); border-color: var(--lime); color: var(--black); }

  /* --- The business card page -------------------------------------------- */
  .tcard-page { padding-block: var(--space-4) var(--space-9); }
  .tcard-page__crumbs { margin-block-end: var(--space-5); }

  .tcard-page__inner {
    display: grid;
    justify-items: center;
    gap: var(--space-6);
  }

  .tcard {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--space-6);
    inline-size: 100%;
    max-inline-size: 30rem;
    padding: var(--space-6) var(--space-5) var(--space-5);
    overflow: hidden;
    box-shadow: 6px 6px 0 0 var(--lime);
  }

  @media (min-width: 30em) {
    .tcard { padding: var(--space-7) var(--space-6) var(--space-6); }
  }

  .tcard > .tri-scatter { z-index: -1; }

  .tcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }

  .tcard__avatar {
    display: grid;
    place-items: center;
    inline-size: clamp(5.5rem, 24vw, 7rem);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--lime);
    color: var(--black);
    box-shadow: 0 0 0 6px rgb(219 249 54 / 0.12);
  }

  .tcard__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  .tcard__initials {
    font-size: clamp(1.9rem, 8vw, 2.5rem);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
  }

  .tcard__brand { color: var(--white); padding-block-start: var(--space-2); }
  .tcard__logo { display: block; block-size: 1.25rem; inline-size: auto; }

  .tcard__id { display: grid; gap: var(--space-2); }

  .tcard__name {
    margin: 0;
    font-size: clamp(2rem, 1.4rem + 3vw, 2.75rem);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  .tcard__role { margin: 0; font-size: var(--text-lg); color: var(--lime); font-weight: var(--font-medium); }
  .tcard__bio { margin: var(--space-1) 0 0; color: var(--color-text-muted); text-wrap: pretty; }

  .tcard__facts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0; }
  .tcard__fact { display: grid; gap: 0.15rem; }
  .tcard__fact dt {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    --icon-size: 0.85rem;
  }
  .tcard__fact dt .icon { color: var(--lime); }
  .tcard__fact dd { margin: 0; }

  .tcard__actions { display: grid; gap: var(--space-2); }

  .tcard__action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-block-size: 3.5rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
  }

  .tcard__action:hover,
  .tcard__action:focus-visible { border-color: var(--color-border-strong); background: var(--color-bg-muted); }

  .tcard__action-icon {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 0.08);
    color: var(--lime);
    --icon-size: 1.15rem;
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }

  .tcard__action:hover .tcard__action-icon { background: var(--lime); color: var(--black); }

  .tcard__action-text { display: grid; min-inline-size: 0; }
  .tcard__action-label { font-weight: var(--font-medium); }
  .tcard__action-detail { font-size: var(--text-sm); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .tcard__save { display: grid; gap: var(--space-2); }
  .tcard__save-btn { inline-size: 100%; justify-content: center; }
  .tcard__save-note { margin: 0; font-size: var(--text-xs); color: var(--color-text-subtle); text-align: center; }

  .tcard__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--text-sm);
  }

  .tcard__company { color: var(--color-text-muted); }
  .tcard__claim { color: var(--lime); font-weight: var(--font-medium); }

  .tcard-page__links { justify-content: center; gap: var(--space-3) var(--space-6); --icon-size: 1rem; }
  .tcard-page__links .icon { color: var(--color-accent-ink); }

  @media (prefers-reduced-motion: reduce) {
    .about-proof__item, .tmini { translate: none !important; }
    .about-proof__item:hover .about-proof__media img { scale: none; }
  }

  /* ======================================================================
     16. INSIGHTS (Phase 11) — hub: topic filter chips, the newest post as a
         wide feature card, thumbnail grid, pager, RSS row. Article: header
         + wide cover, sticky contents rail beside the prose body, the
         PostBody extensions (figure, table, callout, click-to-load video),
         author box, reading-progress bar.
     ====================================================================== */

  /* --- Hub ----------------------------------------------------------------- */
  .ihub__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-5) var(--space-7);
  }

  .ifilter .cluster { --cluster-space: var(--space-2); }

  .ifilter__chip {
    padding: 0.5rem 0.95rem;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }

  .ifilter__count {
    min-inline-size: 1.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-full);
    background: var(--color-bg-alt);
    font-size: var(--text-xs);
    text-align: center;
    color: var(--color-text-muted);
  }

  .ifilter__chip:hover,
  .ifilter__chip:focus-visible { background: var(--lime); border-color: var(--lime); color: var(--black); }

  .ifilter__chip[aria-current="page"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
  .ifilter__chip:hover .ifilter__count,
  .ifilter__chip[aria-current="page"] .ifilter__count { background: transparent; color: inherit; }

  .ihub__topic-lead { max-inline-size: 60ch; margin-block-start: calc(var(--space-5) * -1); }

  /* Feature card: the newest post, media left, copy right. */
  .pfeature {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-bg);
  }

  @media (min-width: 56em) {
    .pfeature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--space-7); }
  }

  .pfeature__media {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-raised);
  }

  .pfeature__media :where(picture, img) { display: block; inline-size: 100%; block-size: 100%; }
  .pfeature__media img { object-fit: cover; transition: scale var(--duration-slow) var(--ease-standard); }
  .pfeature:hover { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }
  .pfeature:hover .pfeature__media img { scale: 1.03; }

  .pfeature__body { --stack-space: var(--space-4); padding: var(--space-3) var(--space-3) var(--space-4); }
  @media (min-width: 56em) { .pfeature__body { padding: var(--space-5) var(--space-6) var(--space-5) 0; } }

  .pfeature__meta,
  .pfeature__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .pfeature__badge { background: var(--lime); border-color: var(--lime); color: var(--black); }

  .pfeature__title { font-size: var(--text-3xl); line-height: var(--leading-snug); text-wrap: balance; }
  .pfeature__title a { color: inherit; text-decoration: none; }
  .pfeature__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
  .pfeature__lead { color: var(--color-text-muted); font-size: var(--text-lg); line-height: var(--leading-normal); }
  .pfeature__foot > * + *::before { content: "·"; margin-inline-end: var(--space-3); }

  /* Card meta: topic · date · reading time. */
  .post-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
  .post-card__meta > * + *::before { content: "·"; margin-inline-end: var(--space-2); }
  .post-card__topic { color: var(--color-text); font-weight: var(--font-medium); }

  /* Two posts fill two columns, not two of three. */
  @media (min-width: 64em) {
    .post-grid:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Pager */
  .pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
  }

  .pager__pages { --cluster-space: var(--space-1); }

  .pager__num {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
  }

  .pager__num:hover { background: var(--lime); border-color: var(--lime); color: var(--black); }
  .pager__num[aria-current="page"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }

  /* RSS row */
  .ifeed {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border);
  }

  @media (min-width: 40em) { .ifeed { grid-template-columns: auto minmax(0, 1fr) auto; } }

  .ifeed__icon {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-full);
    background: var(--lime);
    color: var(--black);
    --icon-size: 1.15rem;
  }

  .ifeed__title { font-weight: var(--font-semibold); }
  .ifeed__text { color: var(--color-text-muted); font-size: var(--text-sm); }
  .ifeed .link-arrow { grid-column: 2; justify-self: start; }
  @media (min-width: 40em) { .ifeed .link-arrow { grid-column: auto; } }

  /* --- Article ------------------------------------------------------------ */

  /* Reading progress: a scroll-driven lime bar under the header (no JS). */
  .aprogress { display: none; }

  @supports (animation-timeline: scroll()) {
    .aprogress {
      display: block;
      position: fixed;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 60;
      block-size: 3px;
      background: var(--lime);
      transform-origin: 0 50%;
      scale: 0 1;
      animation: aprogress linear both;
      animation-timeline: scroll(root block);
      pointer-events: none;
    }
    @keyframes aprogress { to { scale: 1 1; } }
  }

  @media (prefers-reduced-motion: reduce) { .aprogress { display: none; } }

  .ahero { padding-block-start: var(--page-top); }
  .ahero__crumbs { margin-block-end: var(--space-6); }
  .ahero__crumbs:empty { display: none; }

  /* Aligned with the body grid below (15rem rail + gap + 46rem column). */
  .ahero__copy {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
  }

  @media (min-width: 64em) { .ahero__copy { max-inline-size: calc(15rem + var(--space-9) + 46rem); } }

  .ahero__topic { text-decoration: none; font-size: var(--text-sm); }
  .ahero__topic:hover,
  .ahero__topic:focus-visible { background: var(--lime); border-color: var(--lime); color: var(--black); }

  .ahero__title { font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: -0.02em; text-wrap: balance; max-inline-size: 22ch; }
  .ahero__lead { max-inline-size: 58ch; color: var(--color-text-muted); }

  .ahero__byline { display: flex; align-items: center; gap: var(--space-3); }
  .ahero__meta { display: grid; gap: 0.15rem; }
  .ahero__author { font-weight: var(--font-semibold); }

  .ahero__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .ahero__facts > span { display: inline-flex; align-items: center; gap: var(--space-1); --icon-size: 0.85rem; }
  .ahero__scheduled { padding: 0.1rem 0.5rem; border-radius: var(--radius-full); background: var(--lime); color: var(--black); }

  .avatar {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--black);
    color: var(--lime);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
  }

  .avatar--lg { inline-size: 4rem; block-size: 4rem; font-size: var(--text-lg); }
  .avatar :where(picture, img) { inline-size: 100%; block-size: 100%; object-fit: cover; }

  .ahero__cover { margin-block-start: var(--space-7); }

  .ahero__frame {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-panel);
    overflow: hidden;
    background: var(--color-bg-raised);
  }

  @media (min-width: 48em) { .ahero__frame { aspect-ratio: 21 / 9; } }
  .ahero__frame :where(picture, img) { display: block; inline-size: 100%; block-size: 100%; }
  .ahero__frame img { object-fit: cover; }

  /* Body grid: contents rail + the prose column. */
  .article {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-block: var(--space-8) var(--space-7);
  }

  .article__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); min-inline-size: 0; }

  @media (min-width: 64em) {
    .article { grid-template-columns: minmax(0, 46rem); justify-content: center; }
    .article:has(> .toc) { grid-template-columns: 15rem minmax(0, 46rem); gap: var(--space-9); }
  }

  .toc__inner {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  @media (min-width: 64em) {
    .toc__inner {
      position: sticky;
      inset-block-start: calc(var(--header-offset) + var(--space-5));
      padding: 0;
      border: 0;
    }
  }

  .toc__title { margin-block-end: var(--space-3); }
  .toc__list { display: grid; gap: var(--space-1); counter-reset: toc; }

  .toc__list a {
    display: block;
    padding: 0.35rem 0 0.35rem var(--space-3);
    border-inline-start: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
  }

  .toc__list a:hover { color: var(--color-text); border-color: var(--color-text); }
  .toc__list a[aria-current="true"] { color: var(--color-text); border-color: var(--color-accent-ink); font-weight: var(--font-medium); }

  /* Prose tuned for long reads. */
  .article__body { max-inline-size: none; font-size: var(--text-lg); line-height: var(--leading-relaxed); }
  .article__body :where(h2, h3) { scroll-margin-block-start: calc(var(--header-offset) + var(--space-5)); text-wrap: balance; }
  .article__body h2 { font-size: var(--text-3xl); line-height: var(--leading-snug); }
  .article__body h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
  .article__body :where(p, ul, ol, blockquote, pre, figure, table, aside, .post-table) + :where(h2) { margin-block-start: var(--space-8); }
  .article__body :where(p, ul, ol, blockquote, pre, figure, table, aside, .post-table) + :where(h3) { margin-block-start: var(--space-6); }
  .article__body :where(p, ul, ol, figure, .post-table, aside) + :where(p, ul, ol, figure, .post-table, aside) { margin-block-start: var(--space-5); }
  .article__body a:not(.btn) { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  .article__body a:not(.btn):hover { text-decoration-thickness: 2px; background: var(--lime); color: var(--black); }
  .article__body strong { font-weight: var(--font-semibold); }

  /* Figure */
  .post-figure img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
  .post-figure figcaption { text-align: start; }

  /* Table: scrolls sideways inside its frame on a phone. */
  .post-table {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  .post-table:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
  .post-table table { min-inline-size: 36rem; border-collapse: collapse; }
  .post-table th { background: var(--color-bg-alt); color: var(--color-text); white-space: nowrap; }
  .post-table tr:last-child td { border-block-end: 0; }
  .post-table :where(th, td) { vertical-align: top; }

  /* Callout */
  .callout {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
    font-size: var(--text-base);
  }

  .callout__label {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: var(--space-2);
    padding: 0.2rem 0.65rem 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-text);
    color: var(--color-bg);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    --icon-size: 0.9rem;
  }

  .callout--tip .callout__label { background: var(--lime); color: var(--black); }
  .callout__body > * + * { margin-block-start: var(--space-3); }

  /* Click-to-load video */
  .post-embed__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--black);
    color: var(--white);
  }

  .post-embed__frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }

  .post-embed__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-4);
    background: radial-gradient(circle at 50% 45%, rgb(255 255 255 / 0.08), transparent 60%);
    color: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
  }

  .post-embed__play:hover .play-disc { scale: 1.06; }
  .post-embed__play:focus-visible { outline: 2px solid var(--lime); outline-offset: -6px; }
  .post-embed.is-loaded .post-embed__play { display: none; }

  .post-embed__note { text-align: start; }
  .post-embed__note a { display: inline-flex; align-items: center; gap: 0.25rem; --icon-size: 0.8rem; }

  /* Tags, author box, back link */
  .article__tags { --cluster-space: var(--space-2); }

  .author-box {
    display: flex;
    align-items: flex-start;
    background: var(--color-bg);
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .author-box__text { display: grid; gap: var(--space-2); }
  .author-box__bio { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }

  .link-arrow--back:hover .icon { translate: -4px 0; }

  /* ======================================================================
     17. SECURITY & DATA PROTECTION (/platform/security/, 2026-10-07)
         Photo hero with trust badges + the inline-DLP glass card, the
         four-step use case (step 02 = the LLM router: two radios light one
         branch, CSS only), the black control-plane band, three
         infrastructure tiles. Template: pages/security.php.
     ====================================================================== */

  /* --- Hero: badges + the DLP masking loop -------------------------------- */
  .sec-badges { --cluster-space: var(--space-2); margin-block-end: var(--space-4); }

  .sec-badge {
    --icon-size: 1em;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.3rem 0.65rem;
    border: 1px solid rgb(255 255 255 / 0.4);
    border-radius: var(--radius-sm);
    background: rgb(0 0 0 / 0.35);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .sec-badge .icon { color: var(--lime); }

  .secdlp { display: grid; gap: var(--space-4); margin: 0; min-inline-size: min(22rem, 100%); }

  .secdlp__label {
    --icon-size: 1em;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    justify-self: start;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--lime);
    color: var(--black);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .secdlp__lines { display: grid; gap: var(--space-2); margin: 0; }

  .secdlp__line {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    padding-block: var(--space-2);
    border-block-end: 1px solid rgb(255 255 255 / 0.12);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }
  .secdlp__line dt { color: rgb(255 255 255 / 0.78); }
  .secdlp__line dd { display: grid; margin: 0; }

  /* raw value and mask share one cell; the loop swaps them, line by line */
  .secdlp__raw, .secdlp__mask { grid-area: 1 / 1; justify-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
  .secdlp__mask {
    padding: 0 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--lime);
    color: var(--black);
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .secdlp__raw  { animation: secdlp-raw 7s var(--ease-standard) infinite; animation-delay: calc(var(--i) * 0.45s + 1s); }
    .secdlp__mask { animation: secdlp-mask 7s var(--ease-standard) infinite; animation-delay: calc(var(--i) * 0.45s + 1s); }
  }
  @media (prefers-reduced-motion: reduce) {
    .secdlp__raw { opacity: 0; }
    .secdlp__mask { opacity: 1; }
  }

  @keyframes secdlp-raw {
    0%, 30%   { opacity: 1; clip-path: inset(0 0 0 0); }
    40%, 85%  { opacity: 0; clip-path: inset(0 0 0 100%); }
    95%, 100% { opacity: 1; clip-path: inset(0 0 0 0); }
  }
  @keyframes secdlp-mask {
    0%, 32%   { opacity: 0; translate: -0.4rem 0; }
    42%, 85%  { opacity: 1; translate: 0 0; }
    93%, 100% { opacity: 0; translate: -0.4rem 0; }
  }

  .secdlp__note { font-size: var(--text-xs); color: rgb(255 255 255 / 0.85); line-height: var(--leading-snug, 1.45); }

  /* --- The use case: four steps ------------------------------------------- */
  .secflow__steps {
    display: grid;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
  }

  @media (min-width: 64em) {
    .secflow__steps { grid-template-columns: 1fr 1.35fr 1fr 1fr; gap: var(--space-6); align-items: start; }
  }

  .secflow__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-raised);
    box-shadow: var(--card-shadow);
  }

  /* the arrow to the next step: below on phones, to the right on desktop */
  .secflow__step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: var(--space-6);
    inline-size: 2px;
    block-size: var(--space-6);
    background: linear-gradient(var(--color-border), var(--color-border)) center / 2px 100% no-repeat;
  }
  @media (min-width: 64em) {
    .secflow__step:not(:last-child)::after {
      inset-block-start: 2.6rem;
      inset-inline-start: 100%;
      inline-size: var(--space-6);
      block-size: 2px;
      background-size: 100% 2px;
    }
  }

  .secflow__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-2); }

  .secflow__num { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--font-medium); }

  .secflow__icon {
    --icon-size: 1.15rem;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    aspect-ratio: 1;
    border-radius: var(--radius-md, 0.6rem);
    background: var(--lime);
    color: var(--black);
  }

  .secflow__title { margin: 0; font-size: var(--text-lg); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); }
  .secflow__text { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

  /* step 02: the black router card */
  .secflow__step--route {
    border-color: var(--black);
    background: var(--black);
    color: var(--white);
    box-shadow: var(--shadow-xl, var(--card-shadow));
  }
  .secflow__step--route .secflow__num { color: var(--lime); }
  .secflow__step--route .secflow__title { color: var(--white); }
  .secflow__step--route .secflow__text { color: var(--lime); }

  .secflow__tag {
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--lime);
    color: var(--black);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .secroute { display: grid; gap: var(--space-3); margin-block-start: var(--space-3); }

  .secroute__pick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }

  .secroute__doc {
    --icon-size: 1em;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.3);
    border-radius: 999px;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) var(--ease-standard), color var(--duration-fast, 150ms) var(--ease-standard), border-color var(--duration-fast, 150ms) var(--ease-standard);
  }
  .secroute__doc input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .secroute__doc:hover { border-color: var(--lime); }
  .secroute__doc:has(input:checked) { background: var(--lime); border-color: var(--lime); color: var(--black); }
  .secroute__doc:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 3px; }

  .secroute__paths {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px dashed rgb(219 249 54 / 0.45);
    border-radius: var(--radius-md, 0.6rem);
  }

  .secroute__path {
    display: grid;
    gap: 0.1rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 0.08);
    text-align: center;
    font-size: var(--text-xs);
    color: rgb(255 255 255 / 0.75);
    transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
    opacity: 0.55;
  }
  .secroute__path strong { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--white); }

  .secroute__fork { --icon-size: 1rem; color: var(--lime); }

  /* the lit branch */
  .secroute:has(input[value="standard"]:checked) .secroute__path--standard,
  .secroute:has(input[value="sensitive"]:checked) .secroute__path--sensitive {
    opacity: 1;
    border-color: var(--lime);
    background: rgb(219 249 54 / 0.12);
    color: var(--lime);
    box-shadow: 0 0 0 3px rgb(219 249 54 / 0.12);
  }

  .secroute__result { margin: 0; min-block-size: 3lh; font-size: var(--text-sm); color: rgb(255 255 255 / 0.92); }
  .secroute__result--sensitive { display: none; }
  .secroute:has(input[value="sensitive"]:checked) .secroute__result--standard { display: none; }
  .secroute:has(input[value="sensitive"]:checked) .secroute__result--sensitive { display: inline; }

  /* --- Control plane band -------------------------------------------------- */
  .secplane__label {
    display: inline-block;
    justify-self: start;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--lime);
    color: var(--black);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .secplane .section-head { display: grid; gap: var(--space-3); max-width: 52rem; }
  .secplane .section-head > * { margin: 0; }

  .secplane__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .secguard {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-border-on-panel);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / 0.04);
    transition: border-color var(--duration-normal) var(--ease-standard), background var(--duration-normal) var(--ease-standard);
  }
  .secguard:hover { border-color: var(--lime); background: rgb(219 249 54 / 0.06); }

  .secguard__icon {
    --icon-size: 1.15rem;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    aspect-ratio: 1;
    margin-block-end: var(--space-2);
    border-radius: var(--radius-md, 0.6rem);
    background: var(--lime);
    color: var(--black);
  }
  .secguard__title { margin: 0; font-size: var(--text-lg); font-weight: var(--font-medium); color: var(--lime); }
  .secguard__text { margin: 0; font-size: var(--text-sm); color: var(--color-text-on-panel-muted); }

  /* --- Infrastructure tiles ------------------------------------------------ */
  .secinfra__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .secpillar {
    --rule: var(--lime);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-5);
    border: 1px solid var(--card-border);
    border-inline-start: 6px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--color-bg-raised);
    box-shadow: var(--card-shadow);
  }
  .secpillar--1 { --rule: var(--color-text); }
  .secpillar--2 { --rule: var(--color-border-strong, var(--color-border)); }

  .secpillar__icon {
    --icon-size: 1.15rem;
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--black);
    color: var(--lime);
  }
  [data-theme="dark"] .secpillar__icon { background: var(--lime); color: var(--black); }

  .secpillar__body { display: grid; gap: var(--space-2); }
  .secpillar__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-lg); font-weight: var(--font-medium); }
  .secpillar__tag { font-size: var(--text-xs); }
  .secpillar__text { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

  /* --- Teaser band (platform overview, AI Agents page) --------------------- */
  .secteaser__card {
    display: grid;
    gap: var(--space-5);
    align-items: center;
    padding: clamp(var(--space-5), 3vw, var(--space-7));
    border: 1px solid var(--card-border);
    border-radius: var(--radius-panel);
    background: var(--color-bg-raised);
    box-shadow: var(--card-shadow);
  }
  @media (min-width: 56em) {
    .secteaser__card { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-7); }
  }
  .secteaser__icon {
    --icon-size: 1.6rem;
    display: grid;
    place-items: center;
    inline-size: 4rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--black);
    color: var(--lime);
  }
  [data-theme="dark"] .secteaser__icon { background: var(--lime); color: var(--black); }
  .secteaser__copy { display: grid; gap: var(--space-2); }
  .secteaser__copy > * { margin: 0; }
  .secteaser__title { font-size: var(--text-xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); }
  .secteaser__text { color: var(--color-text-muted); }
  .secteaser__badges { --cluster-space: var(--space-2); }

  /* ======================================================================
     GUIDE PAGE (templates/download.php, 2026-10-08) — the page behind the
     guide mail: copy + industry photo, the PDF inline (≥ 48em; phones open
     it with the button), next steps as .doors.
     ====================================================================== */
  .guide__grid { display: grid; gap: var(--space-7); align-items: center; }
  @media (min-width: 56em) {
    .guide__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-9); }
  }
  .guide__copy { display: grid; gap: var(--space-5); justify-items: start; }
  .guide__copy > * { margin: 0; }
  .guide__title { font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); font-weight: var(--font-medium); text-wrap: balance; }
  .guide__lead { max-inline-size: 36rem; color: var(--color-text-muted); }
  .guide__actions { --cluster-space: var(--space-3); }
  .guide__media { margin: 0; overflow: hidden; border-radius: var(--radius-xl); aspect-ratio: 4 / 3; background: var(--color-bg-muted); }
  .guide__media picture { display: block; block-size: 100%; }
  .guide__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .guide__media--cover { aspect-ratio: auto; background: none; overflow: visible; border-radius: 0; }
  .guide__media--cover img { block-size: auto; object-fit: contain; filter: drop-shadow(0 18px 30px rgb(16 17 16 / 0.18)); }

  .guide__viewer { display: none; }
  @media (min-width: 48em) {
    .guide__viewer { display: block; margin-block-start: var(--space-9); }
    .guide__viewer iframe {
      display: block;
      inline-size: 100%;
      block-size: min(82vh, 56rem);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      background: var(--color-bg-muted);
      box-shadow: var(--shadow-lg);
    }
  }
  .guide__next { margin-block-start: var(--space-6); }
  .guide__next .door__title a { color: inherit; text-decoration: none; }

  /* ======================================================================
     CARD SURFACES (Phase 8.1) — every outlined card rests on the lime
     offset shadow and lifts off it on hover (tokens.css → --card-*). Last
     in the file so it beats each card's own base rule; the per-card
     :hover rules (0,2,0) set the lift.
     ====================================================================== */
  .card, .story__panel, .case, .ptile, .plan-card, .post-card, .fcard,
  .fpager__link, .stile, .shub-build, .sfeature, .ccard, .pplans .pcard,
  .error-404__hub, .pfeature, .author-box {
    border-color: var(--card-border);
    box-shadow: var(--card-shadow);
    transition: border-color var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                translate var(--duration-normal) var(--ease-standard);
  }

  @media (prefers-reduced-motion: reduce) {
    .card, .story__panel, .case, .ptile, .plan-card, .post-card, .fcard,
    .fpager__link, .stile, .shub-build, .sfeature, .ccard, .pplans .pcard,
    .error-404__hub, .pfeature { translate: none !important; }
  }

  /* ======================================================================
     LEGAL PAGES (Impressum, Datenschutz, AGB + EN counterparts)
     <article class="prose legal">: room under the header and at the foot,
     the H1 set off from the text, the AGB contents as a framed block.
     ====================================================================== */
  .legal {
    padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(4rem, 3rem + 4vw, 8rem);
  }

  .legal > h1 { margin-block-end: var(--space-7); }
  .legal > h1 + * { margin-top: 0; }

  .legal__toc {
    margin-block: var(--space-6) var(--space-8);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-raised);
  }

  .legal__toc-title {
    margin-block-end: var(--space-3);
    font-weight: 600;
  }

  /* The AGB body sits in a wrapper on /terms/ (lang="de") — same rhythm. */
  .legal > * + .legal__body { margin-top: var(--space-5); }

  /* ======================================================================
     ICON BOXES — LIME AT REST (operator 2026-10-06)
     Outlined icon boxes rest filled lime with a black glyph, and hover
     goes one step darker (--lime-deep). Reversible in one place: delete
     this block, or set <html data-icons="outline"> (review switcher →
     "Icons") to get the outline-until-hover look back. Left out on
     purpose: boxes where lime marks one item (story menu active, last
     journey step, plan zones) and the glass icons on photo tiles (.ptile).
     ====================================================================== */
  :root:not([data-icons="outline"]) :is(
    .mega-cat__icon, .mega-tile__icon, .door__icon, .fcard__icon,
    .about-value__icon, .sfeature__icon, .pscale__icon, .cflow__thumb--icon,
    .tcard__action-icon
  ) {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
  }

  :root:not([data-icons="outline"]) :is(
    .mega-cat__title:hover .mega-cat__icon, .mega-tile:hover .mega-tile__icon,
    .door:hover .door__icon, .fcard:hover .fcard__icon,
    .about-value:hover .about-value__icon, .tcard__action:hover .tcard__action-icon
  ) {
    background: var(--lime-deep);
    border-color: var(--lime-deep);
  }

  /* ======================================================================
     LOOK: SOFT (the default since 2026-10-06; review switch "Look: Crisp"
     = <html data-look="crisp"> brings the old surface back)
     Tokens in tokens.css. Here: cards turn white so they stand on the
     warm ground (not inside the black panels), and the black panels float
     on a soft shadow like the first draft's hero.
     ====================================================================== */
  /* both schemes (dark has its own soft tokens since 2026-10-07); the
     highlighted plan cards are the inverse surface and keep their own fill */
  :root:not([data-look="crisp"]) :is(
    .card, .story__panel, .plan-card, .post-card, .fcard, .fpager__link,
    .stile, .shub-build, .sfeature, .ccard, .pplans .pcard, .error-404__hub,
    .pfeature, .author-box
  ):not(:is(.panel, .band--panel) *):not(.panel, .pcard--highlight, .plan-card--highlight) {
    background-color: var(--color-bg-raised);
  }

  :root:not([data-look="crisp"]) :is(.panel, .band--panel) {
    box-shadow: var(--shadow-xl);
  }
}