/* AI in EE, version 2. Colour fields change as you scroll: dusk hero, cream, sand, deep blue, amber, teal, coral.
   Same rules as Solar + AI: big display type, solid colour fields, one drawing per block, hard shadows, no borders on cards.
   Patterns this page adds beyond base: the nested rings, the Before AI / With AI toggle with its drawing, the time bar, the range bar, the gauge. */

main { display: block; }

/* ---------- animations ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(0.96); } 50% { transform: scale(1.05); } }
@keyframes drift { from { transform: translateX(-60px); } to { transform: translateX(160px); } }
@keyframes run { to { stroke-dashoffset: -100; } }
@keyframes dash { to { stroke-dashoffset: -22; } }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes rise { from { transform: translateY(105%) rotate(7deg); } to { transform: none; } }
@keyframes pop { from { transform: scale(0.965) rotate(-0.7deg); } to { transform: none; } }
@keyframes ping { from { transform: scale(1); opacity: 0.55; } to { transform: scale(1.45, 1.7); opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes colgrow { from { transform: scaleY(0.5); } to { transform: scaleY(1); } }
@keyframes flash { from { opacity: 0.95; transform: scale(0.4); } to { opacity: 0; transform: scale(1.6); } }
@keyframes png { from { opacity: 0.95; transform: scale(0.25); } to { opacity: 0; transform: scale(1); } }
@keyframes swing { from { transform: rotate(-62deg); } to { transform: rotate(58deg); } }
@keyframes steam { from { transform: translateY(0) scale(0.8); opacity: 0.9; } to { transform: translateY(-26px) scale(1.25); opacity: 0; } }
@keyframes buzz { 50% { opacity: 0.35; } }
@keyframes ride { to { offset-distance: 100%; } }
@keyframes drawc { 0% { stroke-dashoffset: 100; } 65%, 100% { stroke-dashoffset: 0; } }
@keyframes glide { from { transform: translateX(0); } to { transform: translateX(28px); } }

.glow { animation: blink 2.6s ease-in-out infinite; opacity: 0.6; }

/* ================= 1. HERO ================= */
.hero { position: relative; overflow: hidden; background: #0B2A5C; min-height: clamp(560px, calc(100svh - var(--header-h)), 900px); }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl { will-change: transform; }
.hl-sun { transform: translateY(calc(var(--hp, 0) * 70px)); }
.hl-far { transform: translateY(calc(var(--hp, 0) * 26px)); }
.hl-mid { transform: translateY(calc(var(--hp, 0) * 14px)); }
.stars circle { animation: blink 3.4s ease-in-out infinite; }
.stars circle:nth-child(2n) { animation-delay: -1.1s; }
.stars circle:nth-child(3n) { animation-delay: -2.2s; animation-duration: 4.6s; }
.ring { transform-box: fill-box; transform-origin: center; animation: pulse 5s ease-in-out infinite; }
.ring.r2 { animation-delay: -2.5s; }
.chip .spark { transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-in-out infinite; }
.cloud { animation: drift 38s ease-in-out infinite alternate; }
.cloud.c2 { animation-duration: 52s; animation-direction: alternate-reverse; }
.pulse { stroke-dasharray: 5 95; animation: run 3.4s linear infinite; }
.pulse.p2 { animation-delay: -0.9s; }
.pulse.p3 { animation-delay: -1.7s; }
.pulse.p4 { animation-delay: -2.5s; }
.hero-copy { position: relative; z-index: 2; padding-top: clamp(32px, 7vh, 80px); padding-bottom: var(--s8); }
.hero-title { margin: 0 0 var(--s5); }
.ht { display: inline-block; overflow: hidden; font-size: var(--fs-hero); line-height: 0.9; letter-spacing: -0.045em; color: var(--cream); background: var(--ink); padding: 0.06em 0.18em 0.14em; border-radius: 0.2em; transform: rotate(-2deg); box-shadow: 0.05em 0.06em 0 var(--amber); white-space: pre-wrap; }
.ht .ch { display: inline-block; animation: rise 650ms var(--spring) both; animation-delay: min(calc(var(--i) * 40ms + 100ms), 500ms); } /* same on every page: the whole entry ends within 1.2 s */
@media (max-width: 600px) { .ht { font-size: 20vw; } .hero-copy { padding-top: var(--s6); } }
.hero-line { display: inline-block; margin: 0 0 var(--s6); padding: var(--s3) var(--s5); background: var(--sun); color: var(--ink); border-radius: 999px; font: 600 clamp(20px, 2.2vw, 28px)/1.2 var(--font-body); transform: rotate(1deg); max-width: 28ch; }
.hero-go { display: flex; width: fit-content; }

/* ================= 2. DEFINED ================= */
.defs { background: var(--cream); overflow: clip; }
.defs-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "title rings" "nist rings"; column-gap: var(--s8); row-gap: var(--s6); align-items: center; }
.defs h2 { grid-area: title; font-size: clamp(44px, 7vw, 104px); align-self: end; }
.nist { grid-area: nist; align-self: start; max-width: 28ch; padding: var(--s6) var(--s7); border-radius: var(--r-lg); background: var(--ink); color: var(--cream); font: 600 clamp(22px, 2.3vw, 30px)/1.28 var(--font-body); box-shadow: 0 10px 0 var(--amber); }
.rings { grid-area: rings; width: min(100%, 440px); margin: 0 auto; }
.ring { position: absolute; border-radius: 50%; }
.r-cs { position: relative; width: 100%; aspect-ratio: 1; background: var(--cream-2); }
.r-cs::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 4px dashed var(--amber); animation: spin 70s linear infinite; }
.r-ai { left: 0; right: 0; bottom: 6%; margin-inline: auto; width: 72%; aspect-ratio: 1; background: var(--amber); }
.r-ml { left: 0; right: 0; bottom: 8%; margin-inline: auto; width: 58%; aspect-ratio: 1; background: var(--coral); display: grid; place-items: center; text-align: center; animation: pulse 4.5s ease-in-out infinite; }
.ring > span { position: absolute; left: 0; right: 0; top: 6%; text-align: center; font: 800 clamp(17px, 2vw, 24px)/1.05 var(--font-display); letter-spacing: -0.01em; }
.r-ml > span { position: static; padding: 0 12%; }
.rings figcaption { margin-top: var(--s5); text-align: center; font: 600 17px/1.3 var(--font-body); }

/* ================= 3. PROBLEM ================= */
.problem { background: var(--sand); }
.problem h2 { margin-bottom: var(--s7); font-size: clamp(44px, 7vw, 104px); }
.problem .big { font-size: clamp(44px, 6.4vw, 96px); }
.problem .tile { min-height: 0; }
.t-data { grid-column: 1 / 8; display: flex; flex-direction: column; background: var(--ink); color: var(--cream); }
.t-data::after { content: ""; position: absolute; right: -90px; bottom: -110px; width: 320px; aspect-ratio: 1; border-radius: 50%; background: var(--panel); }
.t-data > * { position: relative; z-index: 1; }
.t-fast { grid-column: 8 / 13; background: var(--coral); color: var(--ink); }
.t-out { grid-column: 1 / 13; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; column-gap: var(--s8); background: var(--cream); color: var(--ink); }
.art { display: block; height: auto; max-width: 100%; }
.art-data { width: min(100%, 340px); margin-bottom: var(--s5); }
.art-data .cols rect { transform-box: fill-box; transform-origin: bottom; animation: colgrow 2.6s ease-in-out infinite alternate; }
.art-data .cols rect:nth-child(2n) { animation-duration: 3.4s; animation-delay: -1s; }
.art-data .cols rect:nth-child(3n) { animation-duration: 2.1s; animation-delay: -0.4s; }
.art-fast { width: min(100%, 420px); margin-bottom: var(--s5); overflow: visible; }
.chirp { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: drawc 4.5s ease-in-out infinite; }
.art-lamps { width: 100%; max-width: 440px; }
.lamp circle { r: 25px; }
.lamp.flick circle { animation: blink 1.7s ease-in-out infinite; }
.t-out .what { max-width: 22ch; }

/* ================= 4. THE LOOP ================= */
.loopf { background: var(--deep); color: var(--cream); overflow: clip; }
.loopf::before { content: ""; position: absolute; right: -12vw; top: -10vw; width: 44vw; aspect-ratio: 1; border-radius: 50%; border: clamp(24px, 4vw, 56px) solid var(--panel); }
.loopf::after { content: ""; position: absolute; right: 8vw; top: 4vw; width: 7vw; aspect-ratio: 1; border-radius: 50%; background: var(--amber); }
.loop-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5) var(--s7); margin-bottom: var(--s7); }
.loop-head h2 { --st-rot: -1.5deg; font-size: clamp(38px, 6vw, 88px); line-height: 0.95; }
.ba-toggle { display: inline-flex; gap: 8px; padding: 6px; border-radius: 999px; background: var(--ink); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); }
.ba-toggle button { min-width: 150px; min-height: 56px; padding: 0 var(--s6); border: 0; border-radius: 999px; background: transparent; color: var(--cream); font: 800 20px/1 var(--font-display); letter-spacing: -0.01em; cursor: pointer; touch-action: manipulation; transition: transform 200ms var(--spring); }
.ba-toggle button[aria-pressed="true"] { background: var(--amber); color: var(--ink); }
.ba-toggle button:active { transform: scale(0.96); }
@media (hover: hover) { .ba-toggle button[aria-pressed="false"]:hover { background: var(--ink-soft); } }
.ba-toggle.invite button[data-state="with"] { position: relative; }
.ba-toggle.invite button[data-state="with"]::after { content: ""; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 3px var(--amber); animation: ping 2s ease-out infinite; pointer-events: none; }

.loop { --sky: #0E86A6; --orb: #FFE36E; --ground: #F6A45C; --lever: 300ms; --ping: 1.2s; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "stage relay" "chip chip"; gap: var(--s6); }
.loop[data-state="before"] { --sky: #3E5A78; --orb: #C9D3E0; --ground: #7F6E60; --lever: 1100ms; --ping: 1.5s; }
.loop[data-state="with"] { --sky: #0E86A6; --orb: #FFE36E; --ground: #F6A45C; --lever: 160ms; --ping: 0.3s; }
.stage { grid-area: stage; display: flex; flex-direction: column; justify-content: space-between; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); box-shadow: 0 10px 0 rgba(0, 0, 0, 0.3); }
.scene { display: block; width: 100%; height: auto; }
.sky { fill: var(--sky); transition: fill 500ms; }
.orb { fill: var(--orb); transition: fill 500ms; }
.ground { fill: var(--ground); transition: fill 500ms; }
.cl1 { animation: drift 40s ease-in-out infinite alternate; }
.cl2 { animation: drift 52s ease-in-out infinite alternate-reverse; }

/* the line, drawn as a picture of the story */
.w { stroke: var(--ink); transition: stroke 250ms; }
.fl { stroke: var(--sun); stroke-dasharray: 6 16; animation: dash 0.8s linear infinite; transition: opacity 250ms; }
.fl2 { opacity: 0; }
.w2 { stroke: #8896A2; stroke-dasharray: 6 12; }
.win { transition: opacity 250ms; }
.lever { transition: transform var(--lever) var(--spring); }
.lv-a { transform-origin: 256px 250px; transform: rotate(60deg); }
.lv-b { transform-origin: 380px 250px; transform: rotate(-60deg); }
.bolt { transform-origin: 322px 250px; transition: transform 400ms var(--spring), opacity 200ms; }
.flash { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pg { opacity: 0; transform-box: fill-box; transform-origin: center; }
.loop[data-phase="healthy"] .fl, .loop[data-phase="healthy"] .fl2 { opacity: 1; }
.loop[data-phase="healthy"] .w2 { stroke: var(--ink); stroke-dasharray: none; }
.loop[data-phase="healthy"] .bolt { opacity: 0; transform: scale(0.2) rotate(-14deg); }
.loop[data-phase="healthy"] .lever { transform: none; }
.loop[data-phase="fault"] .fl, .loop[data-phase="locate"] .fl, .loop[data-phase="isolate"] .fl { opacity: 0; }
.loop[data-phase="fault"] .w2, .loop[data-phase="locate"] .w2 { stroke: var(--ink); stroke-dasharray: none; }
.loop[data-phase="fault"] .lever, .loop[data-phase="locate"] .lever { transform: none; }
.loop[data-phase="fault"] .win { opacity: 0.18; } /* the town is dark for the fault phase only, which lasts the same in both states */
.loop[data-phase="fault"] .flash { animation: flash 0.8s ease-out both; }
.loop[data-phase="locate"] .pg { animation: png var(--ping) ease-out infinite; }
.loop[data-phase="locate"] .pg.p2 { animation-delay: calc(var(--ping) / 3); }
.loop[data-phase="locate"] .pg.p3 { animation-delay: calc(var(--ping) * 2 / 3); }

/* the two actors: the drawing changes with the toggle. With no state set (scripts off) both show side by side. */
.loop[data-state="before"] .a-after, .loop[data-state="with"] .a-before { display: none; }
.loop:not([data-state]) .a-before { transform: translateX(-80px); }
.loop:not([data-state]) .a-after { transform: translateX(80px); }
.needle { transform-origin: 340px 127px; animation: spin 7s linear infinite; }
.a-after .spark { transform-box: fill-box; transform-origin: center; animation: pulse 0.8s ease-in-out infinite; }
.loop[data-phase="locate"] .a-after .spark { fill: #fff; }
.loop[data-phase="locate"] .a-before .needle { animation-duration: 3.4s; }

.steps { display: flex; flex-wrap: wrap; gap: var(--s3); padding: var(--s4) var(--s5) var(--s5); background: var(--ink); }
.steps li { flex: 1 1 130px; display: flex; align-items: center; gap: var(--s3); padding: 10px 16px; border-radius: 999px; background: var(--ink-soft); color: var(--cream); font: 700 19px/1 var(--font-display); transition: transform 250ms var(--spring); }
.steps b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cream); color: var(--ink); font: 800 17px/1 var(--font-display); }
.loop[data-phase="fault"] .steps li:nth-child(1), .loop[data-phase="locate"] .steps li:nth-child(2), .loop[data-phase="isolate"] .steps li:nth-child(3), .loop[data-phase="restore"] .steps li:nth-child(4) { background: var(--amber); color: var(--ink); transform: translateY(-3px); }

/* the two cards: each holds both texts; the toggle shows one. Scripts off: both show. */
.loop .card { padding: var(--s6); }
.c-relay { grid-area: relay; display: flex; flex-direction: column; justify-content: space-between; background: var(--cream); color: var(--ink); }
.c-chip { grid-area: chip; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; column-gap: var(--s8); background: var(--mint); color: var(--ink); }
.c-chip .big { font-size: clamp(64px, 8vw, 120px); }
.loop h3 { margin: 0 0 var(--s3); font-size: clamp(26px, 2.6vw, 34px); }
.eyebrow { max-width: none; margin: 0 0 var(--s4); font: 700 16px/1.3 var(--font-body); }
.st + .st { margin-top: var(--s5); }
.who { display: inline-block; max-width: none; padding: 8px 16px 10px; border-radius: 999px; background: var(--ink-soft); color: var(--cream); font: 800 clamp(19px, 1.9vw, 24px)/1.1 var(--font-display); letter-spacing: -0.01em; }
.st-after .who { background: var(--teal-dark); }
.loop .big { max-width: none; margin-top: var(--s4); font: 800 clamp(44px, 5vw, 72px)/0.9 var(--font-display); letter-spacing: -0.04em; }
.loop .small-word { font-size: max(14px, 0.32em); letter-spacing: 0; margin-right: 0.1em; }
.loop .unit { font-size: max(14px, 0.34em); letter-spacing: -0.01em; }
.loop .plus { letter-spacing: -0.02em; }
.loop .line { max-width: 38ch; margin-top: var(--s3); font: 600 18px/1.35 var(--font-body); }
.loop .note { margin-top: var(--s4); font: 600 16px/1.35 var(--font-body); }
.js .loop[data-state="before"] .st-after, .js .loop[data-state="with"] .st-before { display: none; }
.js .loop[data-state] .st { animation: pop 380ms var(--spring); }

.tbar { margin: var(--s5) 0 0; }
.tbar figcaption { margin-bottom: var(--s2); font: 700 16px/1.2 var(--font-body); }
.trk { display: grid; gap: var(--s3); }
.tl { display: block; margin-bottom: 4px; font: 700 16px/1.2 var(--font-body); }
.tf { display: block; height: 22px; border-radius: 11px; }
.tf-before { width: 100%; background: var(--ink-soft); }
.tf-after { position: relative; width: 1%; min-width: 10px; background: var(--teal-dark); } /* a drawing: the bar is wider than 1% so a projector can see it, and an end dot says it is tiny (see the note under the drawing) */
.tf-after::after { content: ""; position: absolute; left: calc(100% + 6px); top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--teal-dark); }
.drawing-note { max-width: none; margin: 0; padding: 0 var(--s5) var(--s5); background: var(--ink); color: var(--cream); font: 600 16px/1.3 var(--font-body); }
.steps { padding-bottom: var(--s3); }
.t-300 .big { white-space: nowrap; }
@media (max-width: 400px) { .numbers .t-300 .big { font-size: 52px; } .c-relay .big { font-size: 38px; } }

.chip-art { display: block; width: 100%; max-width: 360px; height: auto; margin: 0; }
.chip-art .ghost { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 8 6; }
.chip-art .die { fill: var(--teal-dark); }
.chip-art .die-g { transform-origin: 120px 136px; transform: scaleY(0.9016); transition: transform 700ms var(--spring); }
.chip-art .band { transition: opacity 400ms; }
.loop[data-state="before"] .die-g { transform: none; }
.loop[data-state="before"] .band, .loop[data-state="before"] .ghost { opacity: 0; }

/* ================= 5. NUMBERS ================= */
.numbers { background: var(--amber); color: var(--ink); }
.numbers h2 { margin-bottom: var(--s7); font-size: clamp(44px, 7vw, 104px); }
.numbers .tile { min-height: 0; }
.numbers .big { font-size: clamp(60px, 7.2vw, 100px); }
.t-3050 .big { white-space: nowrap; }
.tile .small-word { font-size: 0.32em; letter-spacing: 0; margin-right: 0.1em; }
.t-30 { grid-column: 1 / 8; background: var(--deep); color: var(--cream); }
.t-3050 { grid-column: 8 / 13; background: var(--coral); color: var(--ink); }
.t-300 { grid-column: 1 / 6; background: var(--cream); color: var(--ink); }
.t-dc { grid-column: 6 / 13; background: var(--teal-dark); color: var(--cream); }
.art-ticks { width: min(100%, 340px); margin-bottom: var(--s5); }
.art-ticks .ticks rect { fill: var(--sun); }
.art-ticks .ticks .gone { fill: none; stroke: var(--sun); stroke-width: 3; stroke-dasharray: 5 6; }
.range { position: relative; height: 30px; margin-bottom: var(--s5); border-radius: 15px; background: var(--ink); }
.rg { position: absolute; left: 30%; width: 20%; top: 0; bottom: 0; border-radius: 15px; background: var(--sun); transform-origin: left; transition: transform 900ms var(--glide); }
.js .tile:not(.in) .rg { transform: scaleX(0); }
.art-globe { width: 120px; margin-bottom: var(--s4); overflow: visible; }
.art-globe .orbit { transform-box: fill-box; transform-origin: center; animation: spin 26s linear infinite; }
.t-300 .what { max-width: 22ch; }
.t-dc h3 { margin: 0 0 var(--s4); font-size: clamp(26px, 2.8vw, 38px); }
.dc { display: flex; align-items: flex-end; gap: var(--s6); height: 290px; margin-bottom: var(--s5); }
.dc-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; }
.dc .v { margin-bottom: var(--s2); font: 800 clamp(20px, 2.4vw, 30px)/1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.dc .b { display: block; border-radius: 16px 16px 0 0; transform-origin: bottom; transition: transform 900ms var(--glide); }
.d25 .b { height: 106px; background: var(--cream); }
.d30 .b { height: 208px; background: var(--sun); }
.dc small { margin-top: var(--s2); font: 700 17px/1 var(--font-body); }
.js .tile:not(.in) .dc .b { transform: scaleY(0); }

/* ================= 6. UAE ================= */
.uae { background: var(--teal-dark); color: var(--cream); }
.uae h2 { margin-bottom: var(--s7); font-size: clamp(44px, 7vw, 104px); }
.uae-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); }
.uae .card h3 { margin-bottom: var(--s3); font-size: clamp(26px, 2.8vw, 40px); }
.uae .card .what { max-width: 34ch; }
.u-dewa { grid-column: 1 / 8; display: flex; flex-direction: column; background: var(--cream); color: var(--ink); }
.u-adden { grid-column: 8 / 13; background: var(--sun); color: var(--ink); }
.u-gov { grid-column: 1 / 13; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-areas: "art title" "art what" "art meta"; align-items: center; column-gap: var(--s8); background: var(--coral); color: var(--ink); }
.u-gov .art-rack { grid-area: art; }
.u-gov h3 { grid-area: title; align-self: end; }
.u-gov .what { grid-area: what; }
.u-gov .meta { grid-area: meta; align-self: start; }
.u-dewa .art-dash { width: 100%; max-width: 520px; margin: 0 0 var(--s6); }
.u-adden .art-plant { width: min(100%, 260px); margin-bottom: var(--s4); }
.u-gov .art-rack { width: 100%; max-width: 300px; margin: 0; }
.art-dash .mini rect { transform-box: fill-box; transform-origin: bottom; animation: colgrow 2s ease-in-out infinite alternate; }
.art-dash .mini rect:nth-child(2n) { animation-delay: -0.8s; }
.art-dash .blip { offset-path: path("M136 150C170 150 178 80 212 80S250 140 284 112T338 70"); animation: ride 5s ease-in-out infinite alternate; }
.art-plant .steam circle { animation: steam 3s ease-out infinite; }
.art-plant .steam .s2 { animation-delay: -1s; }
.art-plant .steam .s3 { animation-delay: -2s; }
.art-plant .gear { transform-box: fill-box; transform-origin: center; animation: spin 9s linear infinite; }
.art-rack .fan { transform-box: fill-box; transform-origin: center; animation: spin 1.6s linear infinite; }
.art-rack .leds circle { animation: blink 1.4s ease-in-out infinite; }
.art-rack .leds .l2 { animation-delay: -0.5s; }
.art-rack .leds .l3 { animation-delay: -0.9s; }

/* ================= 7. ASSISTS ================= */
.assists { background: var(--coral); color: var(--ink); overflow: clip; }
.assist-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "title gauge" "verbs gauge" "lead gauge" "blog gauge"; column-gap: var(--s8); row-gap: var(--s5); align-items: center; }
.assists h2 { grid-area: title; font-size: clamp(44px, 7vw, 104px); align-self: end; }
.verbs { grid-area: verbs; display: flex; flex-wrap: wrap; gap: var(--s4); }
.verbs li { padding: 0.14em 0.5em 0.24em; border-radius: 999px; background: var(--ink); color: var(--cream); font: 800 clamp(28px, 3.3vw, 46px)/1 var(--font-display); letter-spacing: -0.02em; transform: rotate(-2deg); animation: bob 3.2s ease-in-out infinite; }
.verbs li:nth-child(2) { background: var(--amber); color: var(--ink); transform: rotate(1.5deg); animation-delay: -1s; }
.verbs li:nth-child(3) { background: var(--cream); color: var(--ink); transform: rotate(-1deg); animation-delay: -2s; }
.gauge { grid-area: gauge; justify-self: center; width: 100%; max-width: 520px; height: auto; }
.needle2 { transform-origin: 160px 170px; animation: swing 3.4s ease-in-out infinite alternate; }
.assists .lead { grid-area: lead; max-width: 34ch; font-weight: 600; }
.blog { grid-area: blog; max-width: 40ch; padding: var(--s4) var(--s5); border-radius: var(--r); background: var(--cream); font: 600 19px/1.35 var(--font-body); }

/* ================= phones and tablets ================= */
@media (max-width: 900px) {
  .hl-sun { transform: translate(56px, calc(180px + var(--hp, 0) * 40px)); } /* the chip drops below the title block so the text never covers it */
  .defs-grid { grid-template-columns: 1fr; grid-template-areas: "title" "nist" "rings"; }
  .defs h2, .assists h2 { align-self: start; }
  .nist { max-width: none; padding: var(--s5) var(--s6); }
  .rings { width: min(86%, 380px); }
  .t-data, .t-fast, .t-out, .t-30, .t-3050, .t-300, .t-dc, .u-dewa, .u-adden, .u-gov { grid-column: 1; grid-row: auto; }
  .t-out { display: block; }
  .t-out .art-lamps { margin-top: var(--s5); }
  .loop { grid-template-columns: 1fr; grid-template-areas: "stage" "relay" "chip"; }
  .c-chip, .u-gov { display: block; }
  .c-chip .chip-art { max-width: 300px; margin-bottom: var(--s5); }
  .u-gov .art-rack { max-width: 240px; margin-bottom: var(--s4); }
  .uae-grid { grid-template-columns: 1fr; }
  .assist-grid { grid-template-columns: 1fr; grid-template-areas: "title" "verbs" "gauge" "lead" "blog"; }
  .gauge { max-width: 340px; justify-self: start; }
}
@media (max-width: 600px) {
  .ba-toggle { width: 100%; }
  .ba-toggle button { flex: 1 1 0; min-width: 0; padding: 0 var(--s4); }
  .steps li { flex: 1 1 calc(50% - var(--s3)); padding: 10px 12px; font-size: 18px; }
  .dc { gap: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  .ht .ch { animation: none; }
  .hl { --hp: 0 !important; }
  .js .tile:not(.in) .rg, .js .tile:not(.in) .dc .b { transform: none; }
}