/* ==========================================================================
   PAGE — Digital Twins (digital-twins.html, body.page-digital-twins). SPEC 5.6.
   Hero (title + verbatim copy) with the Physical | Twin plate (css/parts/twin.css),
   then three capability tiles with number-free instruments that draw on reveal,
   then "Next: Support". Live part: js/page-digital-twins.js (the monitoring trace).

   .dt-console            hero + capabilities (one console row on large landscape screens)
     .dt-hero             .dt-hero-grid > .dt-hero-head · .dt-hero-lede · .dt-hero-body · .dt-hero-plate (.twin)
     .dt-caps             section head · .dt-bus (Trace Router) > .dt-hub + ol.dt-cap-list > li.dt-cap
       .dt-scope          instrument screen: --gauge · --spark · --forecast
   .dt-next               "Next: Support"

   Compositions of the first screen:
     stacked   title · plate · copy          portrait, and square below 700px wide
     side      copy | plate                  landscape, and square (aspect ≥ 1) from 700px wide
     console   copy | plate | capabilities   ≥ 2300 × 950 at aspect ≥ 3/2 (QHD, 4K, 21:9, 32:9)
   The copy precedes the plate in the source (reading and focus order); grid areas place it.
   ========================================================================== */

.page-digital-twins {
    --dt-ink: #02060E;                     /* instrument glass, the twin's own ground */
    --dt-mark-rgb: 255, 138, 61;           /* accent-2, safety orange: marks only, never text */
    --dt-gap: clamp(2rem, 5vw, 6rem);      /* copy ↔ plate */
    --dt-top: clamp(1rem, 4svh, 3.5rem);   /* hero breathing room under the header … */
    --dt-bottom: clamp(2rem, 5svh, 4.5rem);/* … and under the plate */
    --dt-plate-extra: calc(4rem + 14px);   /* the plate's scale + caption + tick gaps under the frame */
    --dt-title-size: min(24cqi, 7.5rem, 1.5rem + 9svh);   /* side: by the copy column (cqi of .dt-hero-head) */
    --dt-head-h: 0px;                      /* stacked: the title block above the plate */
    /* Everything above the frame's top and below its bottom edge in the first screen: the plate is sized so
       its frame, scale and caption all fit (twin.css turns this into the plate's height cap). */
    --dt-reserve: calc(var(--header-offset) + var(--dt-top) + var(--dt-bottom) + var(--dt-plate-extra) + var(--dt-head-h));
    /* The plate's own width (mirrors twin.css) plus its tick gaps: the side composition's plate column. */
    --dt-plate-col: calc(max(min(1280px, (100svh - var(--dt-reserve)) * 1.2412 + 10px), 18rem) + 14px);
}

@media (pointer: coarse) {
    .page-digital-twins {
        --dt-plate-extra: calc(4.75rem + 14px);   /* taller touch scale */
    }
}

/* stacked: the title sits above the plate, so it counts against the first screen (sized without cqi, which
   would resolve against the plate's containers inside the reserve) */
@media not ((min-aspect-ratio: 5/4) or ((min-aspect-ratio: 1/1) and (min-width: 700px))) {
    .page-digital-twins {
        --dt-title-size: min(7.5rem, 1.25rem + 8.5svh, .24 * (100vw - 2 * var(--gutter)));
        --dt-head-h: calc(1.5 * var(--t-mono) + clamp(.5rem, 1.5svh, 1rem) + 1.88 * var(--dt-title-size) + clamp(1.25rem, 3vmin, 2.5rem));
    }
}

/* short: the plate takes the whole first screen; its scale and caption follow just below */
@media (max-height: 520px) {
    .page-digital-twins {
        --dt-top: .75rem;
        --dt-bottom: 1.5rem;
        --dt-plate-extra: 0px;
    }
}


/* ---------- Blueprint paper behind the first screen, edge to edge ---------- */

.page-digital-twins .dt-console {
    position: relative;
    isolation: isolate;
}

.page-digital-twins .dt-console::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: min(100%, 135svh);
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(var(--accent-rgb), .07) 1px, transparent 1px) 50% 0 / 6rem 6rem,
        linear-gradient(90deg, rgba(var(--accent-rgb), .07) 1px, transparent 1px) 50% 0 / 6rem 6rem,
        linear-gradient(rgba(var(--accent-rgb), .03) 1px, transparent 1px) 50% 0 / 1.5rem 1.5rem,
        linear-gradient(90deg, rgba(var(--accent-rgb), .03) 1px, transparent 1px) 50% 0 / 1.5rem 1.5rem;
    /* fades out downwards; the sides only soften, so wide screens get paper to the edges */
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent), linear-gradient(90deg, rgba(0, 0, 0, .5), #000 30%, #000 70%, rgba(0, 0, 0, .5));
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000 40%, transparent), linear-gradient(90deg, rgba(0, 0, 0, .5), #000 30%, #000 70%, rgba(0, 0, 0, .5));
    mask-composite: intersect;
}


/* ---------- Hero ---------- */

.page-digital-twins .dt-hero {
    position: relative;
    padding: calc(var(--header-offset) + var(--dt-top)) 0 var(--dt-bottom);
}

.page-digital-twins .dt-hero .twin {
    --twin-reserve: var(--dt-reserve);
}

.page-digital-twins .dt-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "plate" "lede" "body";
    gap: clamp(1.25rem, 3vmin, 2.5rem);
    width: var(--wrap);
    margin-inline: auto;
}

.page-digital-twins .dt-hero-grid > * {
    min-width: 0;
}

.page-digital-twins .dt-hero-head { grid-area: head; }
.page-digital-twins .dt-hero-lede { grid-area: lede; }
.page-digital-twins .dt-hero-body { grid-area: body; }
.page-digital-twins .dt-hero-plate { grid-area: plate; position: relative; }

/* stacked, tablet-wide: title · plate · lede | hint + actions */
@media (min-width: 700px) and (max-width: 899.98px) and (not (min-aspect-ratio: 1/1)) {
    .page-digital-twins .dt-hero-grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-areas: "head head" "plate plate" "lede body";
        column-gap: var(--dt-gap);
    }

    .page-digital-twins :is(.dt-hero-lede, .dt-hero-body) {
        margin-top: clamp(.5rem, 2vmin, 1.5rem);
    }
}

/* stacked, wide (portrait monitors, large portrait tablets): title | lede · plate · hint and actions */
@media (min-width: 900px) and (not (min-aspect-ratio: 1/1)) {
    .page-digital-twins {
        --dt-title-size: min(7.5rem, 1.25rem + 8.5svh, .12 * (100vw - 2 * var(--gutter) - var(--dt-gap)));
    }

    .page-digital-twins .dt-hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "head lede" "plate plate" "body body";
        column-gap: var(--dt-gap);
    }

    .page-digital-twins .dt-hero-lede {
        align-self: end;
    }

    .page-digital-twins .dt-hero-body {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem var(--dt-gap);
        margin-top: clamp(.25rem, 1vmin, 1rem);
    }

    .page-digital-twins .dt-hero-body .dt-actions {
        margin-top: 0;
    }
}

/* side: copy | plate across the full content width, the copy centred against the plate */
@media (min-aspect-ratio: 5/4), (min-aspect-ratio: 1/1) and (min-width: 700px) {
    .page-digital-twins .dt-hero-grid {
        grid-template-columns:
            minmax(min(100%, 17rem), 36rem)
            min(var(--dt-plate-col), 100% - 17rem - var(--dt-gap));
        grid-template-rows: 1fr auto auto auto 1fr;
        grid-template-areas: ". plate" "head plate" "lede plate" "body plate" ". plate";
        justify-content: space-between;
        column-gap: var(--dt-gap);
        row-gap: clamp(1rem, 3svh, 2.25rem);
    }
}

/* soft wire-cyan light behind the plate */
.page-digital-twins .dt-hero-plate::before {
    content: "";
    position: absolute;
    inset: 5% 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(var(--accent-rgb), .13), transparent);
}

.page-digital-twins .dt-eyebrow {
    margin-bottom: clamp(.5rem, 1.5svh, 1rem);
}

/* folded phones: tighter tracking keeps the eyebrow on one line */
@container (max-width: 17rem) {
    .page-digital-twins .dt-eyebrow {
        column-gap: .5em;
        letter-spacing: .12em;
    }
}

/* "Digital" solid over "Twins" drawn as its wireframe twin. Two lines, wide cut; sized by the copy column
   (both words fit at 125%) and by the screen height, so short screens never get giant type. */
.page-digital-twins .dt-title {
    /* the box grows (padding, offset by margins) so the reveal mask never crops the wireframe's glow */
    padding: 0 0 .3em .35em;
    margin: 0 0 -.3em -.35em;
    font-size: var(--dt-title-size);
    font-stretch: 125%;
    line-height: .94;
    letter-spacing: -.02em;
    text-wrap: initial;
}

.page-digital-twins .dt-title-twin {
    display: block;
    padding-top: .3em;                     /* room for the glow above the line, inside the filter's area */
    margin-top: -.3em;
    color: transparent;
    -webkit-text-stroke: max(1px, .018em) var(--accent);
    paint-order: stroke fill;
    filter: drop-shadow(0 0 .35em rgba(var(--accent-rgb), .4));
}

.page-digital-twins .dt-lede {
    font-size: var(--t-lead);
    line-height: 1.5;
    color: var(--text-2);
    max-width: 34ch;
}

@container (max-width: 26rem) {
    .page-digital-twins .dt-lede {
        font-size: 1.0625rem;
    }
}

.page-digital-twins .dt-hint {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    max-width: 40ch;
    font-size: var(--t-small);
    line-height: 1.7;
    color: var(--text-3);
}

/* touch screens slide the scale; keyboards and mice get the arrow keys */
.page-digital-twins .dt-hint-touch-text {
    display: none;
}

@media (pointer: coarse) {
    .page-digital-twins .dt-hint-keys-text {
        display: none;
    }

    .page-digital-twins .dt-hint-touch-text {
        display: inline;
    }
}

.page-digital-twins .dt-hint-keys {
    white-space: nowrap;
}

.page-digital-twins .dt-hint kbd {
    font-size: .6875rem;
    min-width: 2em;
    height: 2em;
    margin-inline: .1em;
}

.page-digital-twins .dt-hint-glyph {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: -.05rem;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-digital-twins .dt-hint-glyph circle {
    stroke: rgba(var(--accent-rgb), .45);
}

/* the scale it mentions only exists with JS */
html:not(.js) .page-digital-twins .dt-hint {
    display: none;
}

.page-digital-twins .dt-actions {
    margin-top: clamp(1.25rem, 3svh, 2.25rem);
}

html:not(.js) .page-digital-twins .dt-actions {
    margin-top: 0;
}

/* short landscape (phones on their side): the copy starts level with the frame and fits the first screen —
   title on one line, a copy column wide enough for both actions in a row */
@media (max-height: 520px) and ((min-aspect-ratio: 5/4) or ((min-aspect-ratio: 1/1) and (min-width: 700px))) {
    .page-digital-twins {
        --dt-gap: clamp(1.5rem, 4vw, 6rem);
        --dt-title-size: min(13.9cqi, 1.25rem + 7svh);
    }

    .page-digital-twins .dt-hero-grid {
        grid-template-columns:
            minmax(min(100%, 18.5rem), 36rem)
            min(var(--dt-plate-col), 100% - 18.5rem - var(--dt-gap));
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas: "head plate" "lede plate" "body plate" ". plate";
        row-gap: .75rem;
    }

    .page-digital-twins .dt-hero-head {
        padding-top: 7px;                  /* the plate's tick gap: eyebrow level with the frame's top */
    }

    .page-digital-twins .dt-eyebrow {
        margin-bottom: .35rem;
    }

    .page-digital-twins .dt-title-twin {
        display: inline;
    }

    .page-digital-twins .dt-lede {
        font-size: 1rem;
        line-height: 1.45;
    }

    .page-digital-twins .dt-hint {
        display: none;
    }

    .page-digital-twins .dt-actions {
        margin-top: .25rem;
    }
}


/* ---------- Capabilities ---------- */

.page-digital-twins .dt-caps {
    position: relative;
    padding-block: calc(var(--section) * .6) calc(var(--section) * .75);
}

.page-digital-twins .dt-caps-head {
    width: var(--wrap);
    margin-bottom: 0;
}

/* the section title stays clearly above the card titles, down to the narrowest phone */
.page-digital-twins .dt-caps-head .section-title {
    font-size: min(var(--t-h2), 11cqi);
}

@container (max-width: 29.99rem) {
    .page-digital-twins .dt-caps-head .section-title {
        font-stretch: 100%;
    }
}

.page-digital-twins .dt-bus {
    container: dt-bus / inline-size;
    width: var(--wrap);
    margin-inline: auto;
    margin-top: clamp(2rem, 4vmin, 3.5rem);
}

/* the replica chip that feeds the three tiles (only while they share a row) */
.page-digital-twins .dt-hub {
    display: none;
    align-items: center;
    gap: .7em;
    width: fit-content;
    margin: 0 auto clamp(3.5rem, 7vmin, 6rem);
    padding: .7rem 1.1rem .7rem .95rem;
    font: 500 var(--t-mono)/1 var(--font-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-2);
    border-radius: var(--r-xs);
    background: linear-gradient(to bottom, rgba(255, 255, 255, .05), transparent 60%), var(--laminate);
    box-shadow: inset 0 0 0 1px var(--line-strong), var(--glow-soft);
}

/* pin rows on both sides */
.page-digital-twins .dt-hub::before,
.page-digital-twins .dt-hub::after {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    width: 6px;
    background: repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px 5px);
}

.page-digital-twins .dt-hub::before { left: -6px; }
.page-digital-twins .dt-hub::after { right: -6px; }

.page-digital-twins .dt-hub-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: var(--glow-accent);
}

.page-digital-twins .dt-cap-list {
    display: grid;
    gap: clamp(1rem, 2vw, 2rem);
}

.page-digital-twins .dt-cap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: .9rem;
}

.page-digital-twins .dt-cap .card-kicker {
    margin-top: .35rem;
}

.page-digital-twins .dt-cap-name {
    font-size: var(--t-h3);
    font-stretch: 100%;                    /* never wider than the section title */
}

.page-digital-twins .dt-cap-text {
    color: var(--text-2);
}

/* three in a row: the hub's bus fans out to them */
@container dt-bus (min-width: 46rem) {
    .page-digital-twins .dt-cap-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* the hub only makes sense with its traces, which need JS */
    .js .page-digital-twins .dt-hub {
        display: flex;
    }
}

/* one column with room to spare, or wide tiles in a row: instrument beside its text */
@container dt-bus (min-width: 30rem) and (max-width: 45.99rem) {
    .page-digital-twins .dt-cap {
        grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        column-gap: clamp(1.25rem, 3cqi, 2rem);
        align-items: start;
    }

    .page-digital-twins .dt-cap .dt-scope {
        grid-row: 1 / -1;
        align-self: center;
    }

    .page-digital-twins .dt-cap .card-kicker {
        margin-top: 0;
    }
}


/* ---------- Instruments ---------- */

.page-digital-twins .dt-scope {
    container: dt-scope / inline-size;
    position: relative;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: var(--r-sm);
    background:
        linear-gradient(rgba(var(--accent-rgb), .08) 1px, transparent 1px) 0 0 / 100% 25%,
        linear-gradient(90deg, rgba(var(--accent-rgb), .08) 1px, transparent 1px) 0 0 / 12.5% 100%,
        radial-gradient(120% 90% at 50% 0%, rgba(var(--accent-rgb), .12), transparent 70%),
        var(--dt-ink);
    box-shadow: inset 0 0 0 1px var(--line), inset 0 0 2.5rem rgba(0, 0, 0, .65);
}

.page-digital-twins .dt-scope svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Strokes are in the instruments' own units (viewBox 240 × 120), so they scale with the screen. (Not
   non-scaling-stroke: Chrome then applies pathLength-normalised dashes in screen space and the draw-in breaks.) */
.page-digital-twins .dt-scope :is(path, circle, rect) {
    fill: none;
}

.page-digital-twins .dt-scope-tag {
    position: absolute;
    font: 500 max(.75rem, 12px)/1 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-2);
    text-shadow: 0 0 .5rem var(--dt-ink), 0 0 2px var(--dt-ink);
}

/* gauge — Improved efficiency: the needle settles inside the lit band, on the orange set mark */
.page-digital-twins .dt-g-track { stroke: rgba(var(--accent-rgb), .4); stroke-width: 1; }
.page-digital-twins .dt-g-band { stroke: var(--accent); stroke-width: 3; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .6)); }
.page-digital-twins .dt-g-minor { stroke: rgba(233, 237, 250, .34); stroke-width: .75; }
.page-digital-twins .dt-g-major { stroke: rgba(233, 237, 250, .72); stroke-width: 1.1; }
.page-digital-twins .dt-g-mark { stroke: var(--accent-2); stroke-width: 1.8; filter: drop-shadow(0 0 4px rgba(var(--dt-mark-rgb), .8)); }

.page-digital-twins .dt-g-needle {
    transform-box: view-box;
    transform-origin: 120px 108px;
    transform: rotate(39.6deg);
}

.page-digital-twins .dt-g-needle path {
    stroke: var(--plasma);
    stroke-width: 1.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), .9));
}

.page-digital-twins .dt-scope .dt-g-needle circle {
    fill: var(--dt-ink);
    stroke: var(--accent);
    stroke-width: 1.2;
}

/* the low and high ends of the dial: real glyphs, not specks */
.page-digital-twins .dt-scope-tag:is(.dt-scope-tag--lo, .dt-scope-tag--hi) {
    top: 74%;
    font-size: max(1.125rem, 18px);
    font-weight: 400;
    letter-spacing: 0;
    translate: -50% 0;
}

.page-digital-twins .dt-scope-tag--lo { left: 18.3%; }
.page-digital-twins .dt-scope-tag--hi { left: 81.7%; }

/* sparkline — Real-time monitoring */
.page-digital-twins .dt-s-base { stroke: var(--line-strong); stroke-width: .75; }
.page-digital-twins .dt-scope .dt-s-area { fill: url(#dt-spark-fill); }

.page-digital-twins .dt-s-line {
    stroke: var(--accent);
    stroke-width: 1.3;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .7));
}

.page-digital-twins .dt-scope .dt-s-dot { fill: var(--plasma); }
.page-digital-twins .dt-s-ring { stroke: var(--accent); stroke-width: .9; opacity: .6; }

/* "Live · scroll (+ pointer) speed": one line in the top band, which the live trace stays below */
.page-digital-twins .dt-scope-tag--live {
    left: 5%;
    top: 8%;
    display: inline-flex;
    align-items: center;
    gap: .6em;
    visibility: hidden;                    /* not display: its reveal animation must not replay */
}

.page-digital-twins .dt-scope.is-live .dt-scope-tag--live {
    visibility: visible;
}

@container dt-scope (max-width: 20rem) {
    .page-digital-twins .dt-scope-extra {
        display: none;
    }
}

@container dt-scope (max-width: 14rem) {
    .page-digital-twins .dt-scope-tag--live {
        left: 4%;
        letter-spacing: .1em;
    }
}

.page-digital-twins .dt-scope-live {
    flex: none;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: var(--glow-accent);
}

/* forecast — Predictive maintenance: wear rises to "now", the forecast meets the limit ahead of it */
.page-digital-twins .dt-scope .dt-f-window { fill: rgba(var(--dt-mark-rgb), .08); }
.page-digital-twins .dt-f-limit { stroke: rgba(var(--dt-mark-rgb), .55); stroke-width: .75; stroke-dasharray: 3 4; }
.page-digital-twins .dt-f-axis { stroke: rgba(233, 237, 250, .45); stroke-width: .75; }
.page-digital-twins .dt-f-now { stroke: rgba(233, 237, 250, .55); stroke-width: .75; }
.page-digital-twins .dt-f-past { stroke: var(--accent); stroke-width: 1.3; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .7)); }
.page-digital-twins .dt-f-ahead { stroke: var(--accent); stroke-width: 1.3; stroke-dasharray: 4 4; }
.page-digital-twins .dt-f-drop { stroke: rgba(var(--dt-mark-rgb), .7); stroke-width: .75; stroke-dasharray: 2 3; }
.page-digital-twins .dt-scope .dt-f-node { fill: var(--plasma); stroke: var(--accent); stroke-width: 1.1; }
.page-digital-twins .dt-scope .dt-f-mark { fill: var(--accent-2); filter: drop-shadow(0 0 5px rgba(var(--dt-mark-rgb), .8)); }

.page-digital-twins .dt-scope-tag--now { left: 53.3%; top: 6%; translate: calc(-100% - .55rem) 0; }
.page-digital-twins .dt-scope-tag--predicted { right: 4%; top: 6%; color: var(--text); }


/* ---------- Next ---------- */

.page-digital-twins .dt-next {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem var(--dt-gap);
    width: var(--wrap);
    margin-inline: auto;
    padding-block: clamp(2rem, 4vmin, 3.5rem) calc(var(--section) * .5);
    border-top: 1px solid var(--line);
}

/* the hairline is a trace: a pad where it starts, current running into the arrow */
.page-digital-twins .dt-next::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), .7), rgba(var(--accent-rgb), .12) 30%, transparent 55%, rgba(var(--accent-rgb), .45));
}

.page-digital-twins .dt-next::after {
    content: "";
    position: absolute;
    top: -4px;
    left: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dt-ink);
    box-shadow: inset 0 0 0 1.5px var(--accent), var(--glow-accent);
}

.page-digital-twins .dt-next-teaser {
    max-width: 38ch;
    color: var(--text-2);
}

.page-digital-twins .dt-next-teaser strong {
    display: block;
    margin-bottom: .25rem;
    font-weight: 500;
    color: var(--text);
}


/* ---------- Console: copy | plate | capabilities in one screen ---------- */

@media (min-width: 2300px) and (min-height: 950px) and (min-aspect-ratio: 3/2) {
    .page-digital-twins {
        --dt-caps-w: 40rem;
    }

    /* full width, content inside the wrap (the padding), so the sheet and its lines can run edge to edge */
    .page-digital-twins .dt-console {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--dt-caps-w);
        align-items: center;
        column-gap: clamp(3rem, 2.5vw, 6rem);
        min-height: min(100vh, 82rem);
        min-height: min(100svh, 82rem);    /* one screen, but never a void around it on very tall screens */
        padding: calc(var(--header-offset) + var(--dt-top)) calc((100% - var(--wrap)) / 2) var(--dt-bottom);
        overflow: clip;
    }

    /* the drafting sheet runs edge to edge: blueprint grid, the plate's light, and its frame's construction lines */
    .page-digital-twins .dt-console::before {
        height: 100%;
        background:
            linear-gradient(rgba(var(--accent-rgb), .07) 1px, transparent 1px) 50% 0 / 6rem 6rem,
            linear-gradient(90deg, rgba(var(--accent-rgb), .07) 1px, transparent 1px) 50% 0 / 6rem 6rem,
            linear-gradient(rgba(var(--accent-rgb), .03) 1px, transparent 1px) 50% 0 / 1.5rem 1.5rem,
            linear-gradient(90deg, rgba(var(--accent-rgb), .03) 1px, transparent 1px) 50% 0 / 1.5rem 1.5rem,
            radial-gradient(var(--dt-glow, 42% 60%) at 47% 52%, rgba(var(--accent-rgb), .07), transparent);
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
    }

    .page-digital-twins .dt-hero .twin-frame::after,
    .page-digital-twins .dt-hero-plate::after {
        content: "";
        position: absolute;
        z-index: -1;
        pointer-events: none;
        --dash: rgba(var(--accent-rgb), var(--dt-dash-a, .18));
    }

    /* the frame's top and bottom edges, out to both screen edges */
    .page-digital-twins .dt-hero .twin-frame::after {
        inset: 0 -100vw;
        background:
            repeating-linear-gradient(90deg, var(--dash) 0 8px, transparent 8px 16px) 0 0 / 100% 1px no-repeat,
            repeating-linear-gradient(90deg, var(--dash) 0 8px, transparent 8px 16px) 0 100% / 100% 1px no-repeat;
    }

    /* its left and right edges, through the whole console */
    .page-digital-twins .dt-hero-plate::after {
        inset: -100vh 7px;                 /* 7px: the plate's tick gap, so the lines meet the frame */
        background:
            repeating-linear-gradient(var(--dash) 0 8px, transparent 8px 16px) 0 0 / 1px 100% no-repeat,
            repeating-linear-gradient(var(--dash) 0 8px, transparent 8px 16px) 100% 0 / 1px 100% no-repeat;
    }

    .page-digital-twins .dt-hero,
    .page-digital-twins .dt-caps {
        padding: 0;
    }

    .page-digital-twins .dt-hero-grid {
        grid-template-columns:
            minmax(22rem, 36rem)
            min(var(--dt-plate-col), 100% - 22rem - var(--dt-gap));
        width: auto;
    }

    /* super-ultrawide: the content keeps the header's edges; the sheet's light and lines carry the extra width */
    @media (min-aspect-ratio: 3/1) {
        .page-digital-twins {
            --dt-glow: 75% 70%;
            --dt-dash-a: .26;
        }
    }

    /* the capabilities are already beside it */
    .page-digital-twins .dt-to-caps {
        display: none;
    }

    .page-digital-twins .dt-caps-head,
    .page-digital-twins .dt-bus {
        width: auto;
    }

    .page-digital-twins .dt-caps-head {
        gap: .75rem;
        justify-items: start;
        text-align: left;
    }

    .page-digital-twins .dt-caps-head .eyebrow {
        justify-content: flex-start;
    }

    .page-digital-twins .dt-caps-head .section-title {
        margin-inline: 0;
    }

    .page-digital-twins .dt-bus {
        margin-top: clamp(1.5rem, 2.5vmin, 2.5rem);
    }

    .page-digital-twins .dt-cap-list {
        gap: 1rem;
    }

    .page-digital-twins .dt-cap {
        --card-pad: 1.25rem 1.5rem;
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        row-gap: .6rem;
    }

    .page-digital-twins .dt-cap-name {
        font-size: 1.5rem;
    }
}


/* ---------- Reveal choreography (one-shot, only when motion is allowed) ---------- */

/* the title is legible on its first frame: the sweep starts partly in, runs short and fast, no wait */
:root.js:not(.motion-off) .page-digital-twins .dt-title.is-in {
    animation: dt-title-sweep 700ms var(--ease-out) backwards;
}

:root.js:not(.motion-off) .page-digital-twins .dt-scope:not(.is-in) [pathLength="1"] {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
}

:root.js:not(.motion-off) .page-digital-twins .dt-scope:not(.is-in) :is(.dt-g-mark, .dt-g-needle, .dt-s-area, .dt-s-now, .dt-f-node, .dt-f-mark, .dt-f-window, .dt-f-now, .dt-scope-tag) {
    opacity: 0;
}

:root.js:not(.motion-off) .page-digital-twins .dt-scope:not(.is-in) .dt-f-wipe {
    transform: scaleX(0);
}

/* each instrument starts when it is revealed; the row stagger only applies while the tiles share a row */
:root.js:not(.motion-off) .page-digital-twins .dt-scope.is-in {
    --t0: 100ms;
}

@container dt-bus (min-width: 46rem) {
    :root.js:not(.motion-off) .page-digital-twins .dt-scope.is-in {
        --t0: calc(var(--i, 0) * 140ms + 100ms);
    }
}

:root.js:not(.motion-off) .page-digital-twins .dt-scope.is-in [pathLength="1"] {
    animation: reveal-draw 800ms var(--ease-io) backwards;
    animation-delay: calc(var(--t0) + var(--d, 0ms));
}

:root.js:not(.motion-off) .page-digital-twins .dt-scope.is-in :is(.dt-g-mark, .dt-s-area, .dt-s-now, .dt-f-node, .dt-f-mark, .dt-f-window, .dt-f-now, .dt-scope-tag) {
    animation: dt-pop 400ms var(--ease-out) backwards;
    animation-delay: calc(var(--t0) + var(--d, 0ms));
}

:root.js:not(.motion-off) .page-digital-twins .dt-scope.is-in .dt-g-needle {
    animation: dt-needle 1.3s linear backwards;
    animation-delay: calc(var(--t0) + 250ms);
}

:root.js:not(.motion-off) .page-digital-twins .dt-scope.is-in .dt-f-wipe {
    animation: dt-wipe 550ms var(--ease-io) backwards;
    animation-delay: calc(var(--t0) + 700ms);
}

/* sequence (--d): every instrument is complete about 1.6 s after it is revealed */
.page-digital-twins .dt-g-minor { --d: 100ms; }
.page-digital-twins .dt-g-major { --d: 180ms; }
.page-digital-twins .dt-g-band { --d: 450ms; }
.page-digital-twins .dt-scope--gauge .dt-scope-tag { --d: 500ms; }
.page-digital-twins .dt-g-mark { --d: 1050ms; }
.page-digital-twins .dt-s-area { --d: 600ms; }
.page-digital-twins .dt-s-now { --d: 750ms; }
.page-digital-twins .dt-scope--spark .dt-scope-tag { --d: 800ms; }
.page-digital-twins .dt-f-past { --d: 50ms; }
.page-digital-twins .dt-f-now { --d: 600ms; }
.page-digital-twins .dt-f-node { --d: 700ms; }
.page-digital-twins .dt-scope-tag--now { --d: 700ms; }
.page-digital-twins .dt-f-window { --d: 950ms; }
.page-digital-twins .dt-f-mark { --d: 1100ms; }
.page-digital-twins .dt-scope-tag--predicted { --d: 1150ms; }

/* console: one scan line crosses the whole drafting sheet as the page powers on */
@media (min-width: 2300px) and (min-height: 950px) and (min-aspect-ratio: 3/2) {
    :root:not(.motion-off) .page-digital-twins .dt-console::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: 18rem;
        pointer-events: none;
        background:
            linear-gradient(90deg, transparent calc(100% - 1px), rgba(226, 248, 255, .4) 0),
            linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .09));
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 80%, transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 80%, transparent);
        opacity: 0;
        animation: dt-sheet-scan 2.8s var(--ease-io) 250ms;
    }
}

/* the live trace's "now" ping */
:root:not(.motion-off) .page-digital-twins .dt-scope.is-live .dt-s-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: dt-ping 1.8s var(--ease-out) infinite;
}

.page-digital-twins .dt-f-wipe {
    transform-box: fill-box;
    transform-origin: 0 0;
}

@keyframes dt-pop {
    from { opacity: 0; }
}

/* a gauge needle swings up from rest and settles, damped, on the set mark (39.6°) */
@keyframes dt-needle {
    0% { transform: rotate(-90deg); animation-timing-function: cubic-bezier(.3, .1, .3, 1); }
    42% { transform: rotate(54deg); animation-timing-function: cubic-bezier(.4, 0, .4, 1); }
    60% { transform: rotate(32deg); animation-timing-function: cubic-bezier(.4, 0, .4, 1); }
    75% { transform: rotate(44deg); animation-timing-function: cubic-bezier(.4, 0, .4, 1); }
    88% { transform: rotate(38deg); animation-timing-function: cubic-bezier(.4, 0, .4, 1); }
    100% { transform: rotate(39.6deg); }
}

@keyframes dt-title-sweep {
    from { --sweep: 45%; }
    to { --sweep: 130%; }
}

@keyframes dt-sheet-scan {
    0% { transform: translateX(-100%); opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateX(100vw); opacity: 0; }
}

@keyframes dt-wipe {
    from { transform: scaleX(0); }
}

@keyframes dt-ping {
    0% { transform: scale(.4); opacity: .9; }
    70%, 100% { transform: scale(1.9); opacity: 0; }
}


/* ---------- Modes ---------- */

@media (prefers-contrast: more) {
    .page-digital-twins .dt-console::before {
        display: none;
    }

    .page-digital-twins .dt-title-twin {
        filter: none;
    }
}

@media (forced-colors: active) {
    .page-digital-twins .dt-console::before,
    .page-digital-twins .dt-console::after,
    .page-digital-twins .dt-hero-plate::before,
    .page-digital-twins .dt-hero-plate::after,
    .page-digital-twins .dt-hero .twin-frame::after,
    .page-digital-twins .dt-next::before,
    .page-digital-twins .dt-next::after {
        display: none;
    }

    .page-digital-twins .dt-title-twin {
        -webkit-text-stroke: 0;
        filter: none;
    }

    .page-digital-twins .dt-scope {
        forced-color-adjust: none;
        background: Canvas;
        box-shadow: inset 0 0 0 1px CanvasText;
    }

    .page-digital-twins .dt-scope :is(path, circle, rect, g) {
        stroke: CanvasText;
        filter: none;
    }

    .page-digital-twins .dt-scope :is(.dt-f-mark, .dt-s-dot, .dt-g-mark) {
        fill: Highlight;
        stroke: Highlight;
        filter: none;
    }

    .page-digital-twins .dt-scope :is(.dt-f-node, .dt-g-needle circle) {
        fill: Canvas;
        stroke: CanvasText;
    }

    .page-digital-twins .dt-scope .dt-s-area,
    .page-digital-twins .dt-scope .dt-f-window {
        fill: none;
        stroke: none;
    }

    .page-digital-twins .dt-scope-tag {
        color: CanvasText;
        text-shadow: none;
    }

    .page-digital-twins .dt-scope-live {
        background: Highlight;
    }

    .page-digital-twins .dt-hint-glyph,
    .page-digital-twins .dt-hint-glyph circle {
        stroke: CanvasText;
    }

    .page-digital-twins .dt-hub {
        border: 1px solid CanvasText;
    }
}