/* v3 Technology (2026-11-07). The page's own rules; the night-map hero, the pills and the nav
   come from blog.css / home-v2.css / style.css, the section cut and the step rows from
   home-v2.css (the home's solution block), the two framed rows and the console from the live
   home's css/home.css. Cream page, ink type, the mark's orange for what is live, Michroma as
   the instrument voice, as on the Roadmap. */

/* ---------- the hero: the night map in a radio blue (blog.css), the title set left ---------- */
.tech .blog-hero { --peek: 0px; min-height: 100svh; align-items: stretch; padding-bottom: clamp(44px, 7vh, 90px); }
.tech-hero-foot { position: relative; z-index: 1; width: 100%; max-width: var(--col); margin: auto auto 0; display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 4vw, 60px); }
.tech .blog-title { width: auto; margin: 0; text-align: left; color: #f4efe1; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.4); }
.tech-hero-aside { display: flex; flex-direction: column; gap: 18px; max-width: 34ch; }
.tech-mission { margin: 0; text-align: left; color: #f4efe1; font-size: clamp(16px, 1.5vw, 20px); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; opacity: 0.86; }
/* the legend: the three parts as links down the page, a map's key */
/* .blog .mono sets the muted ink; the legend sits on the night map, so it is cream (and a touch larger) */
.tech-hero .tech-legend { list-style: none; margin: 0 0 0.4em; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 11.5px; color: rgba(244, 239, 225, 0.78); }
.tech-hero .tech-legend a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; transition: color 0.2s; }
.tech-hero .tech-legend a span { color: rgb(var(--topo)); }
.tech-hero .tech-legend a:hover { color: #f4efe1; }

/* ---------- shared type (the Roadmap's scale) ---------- */
.tech-main { position: relative; }
.tech-sec { padding: clamp(56px, 9vw, 120px) 0; }
.tech-eyebrow { margin: 0 0 14px; }
.tech-h2 { margin: 0 0 clamp(14px, 2vw, 22px); font-size: clamp(34px, 4.6vw, 64px); font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; max-width: 16ch; }
.tech-display { margin: 0 0 clamp(16px, 2vw, 26px); font-size: clamp(38px, 5.4vw, 80px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.96; text-wrap: balance; max-width: 16ch; }
.tech-lede { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--ink); max-width: 48ch; }
.tech-note { margin: clamp(24px, 4vw, 48px) 0 0; color: var(--muted); }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.js .reveal.is-on { opacity: 1; transform: none; }

/* ---------- THE SYSTEM: three words ---------- */
.tech-system { padding-top: clamp(40px, 6vw, 80px); }
.tech-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(22px, 3vw, 40px); }
.tech-parts .reveal:nth-child(2) { transition-delay: 0.12s; } .tech-parts .reveal:nth-child(3) { transition-delay: 0.24s; }
.tech-part-kicker { margin: 0 0 10px; color: var(--signal); }
.tech-part-word { margin: 0 0 10px; font-size: clamp(44px, 6.4vw, 96px); font-weight: 600; letter-spacing: -0.045em; line-height: 0.95; }
.tech-part p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 32ch; }

/* ---------- HOW IT WORKS: the home's solution block on this page ---------- */
.tech-how { padding-top: 0; }
.tech-how .v2-sol-copy .tech-h2 { max-width: 14ch; }
/* the sticky cut needs a long left column: the home gives the rows 44vh each above 1024px (home-v2.css) */
.tech-how .cut-readout dd.is-on, .tech-how .cut-readout div.is-on dd { color: var(--ink); }
.cut-note { margin-top: 10px; font-size: 0.74rem; color: var(--faint); }

/* 2026-11-08 (Ryan: "it feels choppy, not very professional... something missing"): the cut is
   played continuously by js/solution.js (P 0..3, eased), the aircraft actually flies, the relay
   only appears once it has landed, a signal runs along the links, a three-part progress bar
   sits under the head, and the card keeps one height through every step. */
.tech-how .cut-wrap { padding: 22px 26px 20px; border-radius: 22px; box-shadow: 0 1px 0 rgba(16, 21, 27, 0.04), 0 24px 60px -32px rgba(16, 21, 27, 0.22); }
.tech-how .cut-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font-family: "Michroma", sans-serif; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.tech-how .cut-stage { color: var(--signal); transition: opacity 0.16s ease, transform 0.16s ease; }
.tech-how .cut-stage.is-swap { opacity: 0; transform: translateY(-3px); }
.tech-how .cut-prog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.tech-how .cut-prog i { position: relative; height: 2px; border-radius: 2px; background: var(--hair); overflow: hidden; }
.tech-how .cut-prog i::after { content: ""; position: absolute; inset: 0; background: var(--signal-bright); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
/* 2026-11-08 (Ryan: "something about the section cut seems unprofessional"): drawn as a radio
   path profile. Ink and greys only, orange for what Vexil adds (the flight, the links, the
   stations once they are in play). Labels in the head's small caps. */
.tech-how .cut { margin-top: 14px; overflow: hidden; border-radius: 8px; border: 1px solid var(--hair); }
.tech-how .cut-bg { fill: url(#cutSkyTint); }
.tech-how .cut-grid line { stroke: rgba(16, 21, 27, 0.06); stroke-width: 1; }
.tech-how .cut-grid line.v { stroke-dasharray: 2 4; }
.tech-how .cut-ground { fill: url(#cutLand); }
.tech-how .cut-crest { fill: none; stroke: #3a463c; stroke-width: 1.3; stroke-linejoin: round; }
.tech-how .cut-ticks line { stroke: rgba(16, 21, 27, 0.28); stroke-width: 1; }
/* everything below is driven by custom properties the script sets; no class-based jumps */
.tech-how .cut-shadow { fill: rgba(196, 64, 46, 0.055); opacity: var(--shadow, 0); }
.tech-how .cut-ray { fill: none; stroke: rgba(196, 64, 46, 0.55); stroke-width: 1; stroke-dasharray: 3 3; opacity: var(--shadow, 0); }
.tech-how .cut-los { fill: none; stroke: #10151b; stroke-width: 1.3; stroke-linecap: round; opacity: var(--los, 1); transition: none; }
.tech-how .cut-los-ghost { fill: none; stroke: rgba(16, 21, 27, 0.45); stroke-width: 1; stroke-dasharray: 2 4 !important; stroke-dashoffset: 0 !important; opacity: calc(var(--blk, 0) * var(--los, 1)); transition: none; }
.tech-how .cut-block { opacity: calc(var(--blk, 0) * var(--los, 1)); transition: none; }
.tech-how .cut-block circle { fill: #fff; stroke: #c4402e; stroke-width: 1.2; }
.tech-how .cut-block path { fill: none; stroke: #c4402e; stroke-width: 1.3; stroke-linecap: round; }
.tech-how .cut-flight { fill: none; stroke: var(--signal-bright); stroke-width: 1; stroke-linecap: round; opacity: calc(var(--trail, 0) * 0.6); transition: none; }
.tech-how .cut-craft { opacity: var(--craft, 0); transition: opacity 0.2s ease; }
.tech-how .cut-link-a, .tech-how .cut-link-b { fill: none; stroke: var(--signal-bright); stroke-width: 1.6; stroke-linecap: round; transition: none; }
.tech-how .cut-fz { fill: rgba(232, 100, 44, 0.05); stroke: var(--signal-bright); stroke-width: 0.8; stroke-dasharray: 2 3; opacity: calc(var(--fz, 0) * 0.7); }
.tech-how .cut-pulse { fill: var(--signal-bright); opacity: 0; }
/* the stations: one antenna symbol each, ink until the station is in play */
.tech-how .cut-node .cut-mast { fill: none; stroke: #2b3036; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s ease; }
.tech-how .cut-node .cut-tip { fill: #fff; stroke: #2b3036; stroke-width: 1.3; transition: fill 0.3s ease, stroke 0.3s ease; }
.tech-how .cut.op-on .cut-op .cut-tip, .tech-how .cut.cmd-on .cut-cmd .cut-tip { fill: #2f6fb0; stroke: #2f6fb0; }   /* the radios crews already carry, in blue */
.tech-how .cut-relay .cut-tip { fill: var(--signal-bright); stroke: var(--signal-bright); }
.tech-how .cut-relay { opacity: var(--relay, 0); transition: opacity 0.3s ease; }
.tech-how .cut-relay .cut-mast { stroke: #10151b; }
/* the repeater's ring breathes once the links are live */
.tech-how .cut-ring { fill: none; stroke: var(--signal-bright); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tech-how .cut.live .cut-ring { animation: cut-ring 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
@keyframes cut-ring { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
.tech-how .cut text { font-family: "Michroma", sans-serif; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; fill: #3a463c; text-anchor: middle; paint-order: stroke; stroke: rgba(236, 238, 226, 0.6); stroke-width: 2px; stroke-linejoin: round; }
.tech-how .cut .cut-t-relay { fill: #10151b; stroke: #eef3f6; opacity: var(--relay, 0); transition: opacity 0.3s ease; }
.tech-how .cut .cut-t-shadow { fill: #a8402f; stroke: none; opacity: var(--shadow, 0); }
.tech-how .cut .cut-t-los { fill: #a8402f; stroke: #f3f6f7; opacity: calc(var(--blk, 0) * var(--los, 1)); transition: none; }
/* the readout: fixed height so the card never jumps */
.tech-how .cut-readout { margin-top: 16px; }
.tech-how .cut-readout dd { min-height: 2.6em; }
/* the rows: the active one carries an orange rule down its left edge; done rows stay readable */
.tech-how .sol-step { position: relative; opacity: 0.38; transition: opacity 0.35s ease; }
.tech-how .sol-step.is-done { opacity: 0.6; }
.tech-how .sol-step:hover, .tech-how .sol-step.is-on { opacity: 1; }
.tech-how .sol-step::before { content: ""; position: absolute; left: -18px; top: 30px; bottom: 30px; width: 2px; border-radius: 2px; background: var(--signal-bright); transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.tech-how .sol-step.is-on::before { transform: scaleY(1); }
.tech-how .sol-step.is-done .sol-status::before { background: var(--signal-bright); opacity: 0.5; }
@media (min-width: 1024px) { .tech-how .sol-steps { padding-bottom: 24vh; } }   /* hold the finished relay a moment before the card leaves */
@media (max-width: 1023px) { .tech-how .sol-step::before { content: none; } .tech-how .sol-step, .tech-how .sol-step.is-done { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tech-how .cut-ring { animation: none !important; } .tech-how .sol-step::before { transition: none; } }

/* ---------- THE GROUND: the home's terrain model under How it works (desktop only) ---------- */
.tech-ground { padding-top: 0; }
.tech-ground .v2-sol-model { margin-top: 0; }
/* phones: the section stays (the model inside it is hidden by home-v2.css); js/story.js adds the point cards */

/* ---------- THE HARDWARE: the heading and lede beside a small photo of the prototype ---------- */
/* the photo (2026-11-08): one wide crop of the prototype in the night sky, centred on the aircraft */
.tech-photo { padding-top: 0; }
.tech-photo-fig { margin: 0 auto; }
.tech-photo-fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 50%; border-radius: 18px; background: #2a3b6e; }
.tech-photo-fig figcaption { margin-top: 10px; }
@media (max-width: 700px) { .tech-photo-fig img { aspect-ratio: 4 / 3; } }

/* ---------- THE FOUR MOVES: the steps with the specification strip under each ---------- */
.tech-steps { list-style: none; margin: clamp(26px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tech-steps li { display: flex; flex-direction: column; padding: 22px 0 0; border-top: 1px solid var(--hair-strong); }
.tech-steps b { color: var(--signal); }
.tech-steps h3 { margin: 10px 0 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.tech-steps p { margin: 8px 0 22px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.tech-spec { margin: 22px 0 0; padding: 14px 0 0; border-top: 1px solid var(--hair); margin-top: auto; padding-top: 14px; }   /* bottom-aligned, so the dashes sit on one line across the four */
.tech-spec dt { min-height: 2.5em; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.tech-spec dd { margin: 0; }
.tech-spec dd:not(.tech-spec-note) { margin-top: 8px; font-size: clamp(26px, 2.8vw, 36px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--signal); }
.tech-spec-note { margin-top: 8px !important; min-height: 2.9em; line-height: 1.4; color: var(--muted); }   /* two lines' room in every cell, so the strips stay level */

/* ---------- NOT YET ---------- */

/* ---------- RADIO CHECK (the Roadmap's) ---------- */
.tech-check { padding: clamp(60px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); text-align: center; }
.tech-check-call { margin: 0 0 16px; color: var(--signal); }
.tech-check-line { margin: 0 auto clamp(22px, 3vw, 36px); max-width: 18ch; font-size: clamp(30px, 4.4vw, 60px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; }
.tech-check-sub { margin: calc(-1 * clamp(10px, 1.6vw, 20px)) auto clamp(22px, 3vw, 36px); font-size: clamp(17px, 1.6vw, 21px); color: var(--muted); }   /* Ryan, 2026-11-08: "interested in testing, request a demo" */
.tech-check-pill { --rot: 0deg; --d: 0.25s; font-size: clamp(22px, 2.6vw, 34px); margin: 0 auto; }

/* ---------- phones ---------- */
@media (max-width: 1023px) {
  .tech-how .v2-sol-media { margin-top: 28px; }
}
@media (max-width: 900px) {
  .tech-hero-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .tech-parts { grid-template-columns: 1fr; gap: 26px; }
  .tech-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .tech-steps { grid-template-columns: 1fr; }
  .tech-legend { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* the terrain model's panel (2026-11-08, Ryan: concise language, no diagrams; then "clean the
   design and UI of the pop up"). The panel's text fills its column, the small card by the marker
   is dropped (it repeated the panel word for word; the active marker already shows the point),
   the label is one quiet line, and the person-vs-drone pair stacks as two ruled rows. */
.tech-ground .model .pin, .tech-ground .model .pin:not([hidden]) { display: none; }
.tech-ground .panel-inner { width: auto; min-width: 0; padding: 30px 32px 40px; }
.tech-ground .panel-head { align-items: center; }
.tech-ground .panel-label { font-family: "Michroma", sans-serif; font-size: 9.5px; font-weight: 400; letter-spacing: 0.16em; color: var(--signal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tech-ground .panel-label > span:first-child { display: none; }   /* "Point" */
.tech-ground .panel-sep { margin: 0 6px; color: var(--hair); }
.tech-ground .panel-close { width: 32px; height: 32px; flex: none; font-size: 16px; color: var(--muted); border-color: var(--hair); transition: border-color 0.2s, color 0.2s; }
.tech-ground .panel-close:hover { color: var(--ink); border-color: var(--ink); }
.tech-ground .panel-title { margin-top: 22px; font-size: clamp(24px, 2vw, 30px); letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; }
.tech-ground .panel-body { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.tech-ground .panel-sub { margin-top: 28px; padding-top: 18px; font-family: "Michroma", sans-serif; font-size: 9.5px; font-weight: 400; letter-spacing: 0.16em; color: var(--faint); }
.tech-ground .panel-sub:empty, .tech-ground .panel-list:empty, .tech-ground .panel-facts:empty { display: none; }
/* the relay's person-vs-drone comparison. Restyled 2026-11-08 (Ryan: "looks really AI and not
   professional or clean"): a plain spec-sheet table. No box, no tinted columns, no red: one ink rule
   on top, hairline rows, sentence-case heads; the person's column in muted ink, the drone's in full
   ink with the one orange mark on its head. */
.tech-ground .panel-facts { margin-top: 16px; display: block; border: 0; border-top: 1px solid var(--ink); border-radius: 0; overflow: visible; }
.tech-ground .panel-facts > div { display: grid; grid-template-columns: minmax(84px, 0.8fr) 1fr 1fr; column-gap: 16px; align-items: baseline; padding: 12px 0; border: 0; border-radius: 0; background: none; }
.tech-ground .panel-facts > div + div { border-top: 1px solid var(--hair); }
.tech-ground .panel-facts .vs-head { padding: 10px 0 9px; }
.tech-ground .panel-facts .vs-head span { padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0; white-space: nowrap; text-transform: none; background: none; border: 0; }
.tech-ground .panel-facts .vs-head .vs-p { color: var(--muted); }
.tech-ground .panel-facts .vs-head .vs-d { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.tech-ground .panel-facts .vs-head .vs-d::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal-bright); }
.tech-ground .panel-facts .vs-head + .vs-row { border-top: 1px solid var(--hair); }
.tech-ground .panel-facts dt { padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: 0; line-height: 1.35; text-transform: none; color: var(--muted); }
.tech-ground .panel-facts dd { margin: 0; padding: 0; font-size: 14.5px; font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; background: none; }
.tech-ground .panel-facts dd.vs-p { color: var(--muted); }
.tech-ground .panel-facts dd.vs-d { color: var(--ink); font-weight: 600; }

/* no numbers on the pins or in the pop-up label: names only (Ryan, 2026-11-08) */
.tech-ground .marker-label b, .tech-ground #panelNum, .tech-ground .panel-sep { display: none; }

/* the pop-up as frosted glass over the terrain instead of solid white (Ryan, 2026-11-08) */
.tech-ground .panel { background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-left-color: rgba(255, 255, 255, 0.6); }

/* quick hits: short, big lines a reader can take in at a glance (Ryan, 2026-11-08) */
.tech-ground .panel-list { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.tech-ground .panel-list li { position: relative; padding: 13px 0 13px 20px; border-bottom: 1px solid var(--hair); font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); }
.tech-ground .panel-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--signal-bright); }

/* bigger pop-up headers (Ryan, 2026-11-08: "bigger, not small") */
.tech-ground .panel-title { font-size: clamp(30px, 2.6vw, 40px); letter-spacing: -0.03em; line-height: 1.04; }
.tech-ground .panel-label { font-size: 11px; }

/* phones and tablets (2026-11-08 audit): the three terrain points as cards, built by js/story.js
   from the same .pt copy the desktop pop-up uses. The terrain model itself stays desktop-only. */
.pt-cards { display: none; }
@media (max-width: 1023px) {
  .tech-ground { padding-bottom: clamp(48px, 10vw, 90px); }
  .pt-cards { display: block; }
  .pt-cards-title { margin: 10px 0 0; font-size: clamp(30px, 8vw, 44px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
  .pt-card { margin-top: 22px; padding: 22px 20px 24px; border: 1px solid var(--hair); border-radius: 18px; background: rgba(251, 251, 249, 0.92); overflow: hidden; }
  .pt-card-kicker { margin: 0; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
  .tech-ground .pt-card .panel-title { margin-top: 10px; font-size: 28px; }
  .tech-ground .pt-card .panel-sub { margin-top: 20px; padding-top: 0; }
  .pt-card .op-reel-band { margin: 0 -20px; }
  .pt-card .op-reel-track { --w: 170px; }
}
/* the section-cut labels: the drawing scales down on a phone, so its type is set bigger to land
   at a readable size (about 7.5px on screen at 390px, up from 4) */
@media (max-width: 700px) {
  .tech-how .cut text { font-size: 15px; letter-spacing: 0.06em; stroke-width: 3px; }
  .tech-how .cut .cut-t-cmd { text-anchor: start; } .tech-how .cut .cut-t-op { text-anchor: end; }   /* the stations sit near the edges: grow inward */
}
@media (max-width: 1023px) { .pt-cards .pt-card .pt-card-kicker { color: var(--signal); font-family: "Michroma", sans-serif; } }

/* "Beyond the fire line." (moved from the roadmap, Ryan 2026-11-08), styled as it was there */
.tech-outlook { padding-top: 0; }
.tech-outlook-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(24px, 5vw, 80px); padding-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--hair); }
.tech-outlook-h { margin: 0 0 clamp(14px, 2vw, 22px); font-size: clamp(34px, 4.6vw, 64px); font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; }
.tech-outlook-lede { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--ink); max-width: 48ch; }
.tech-outlook-links { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: clamp(22px, 3vw, 36px) 0 0; }
.tech-outlook-links a { color: var(--signal); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: color 0.2s; }
.tech-outlook-links a:hover { color: var(--ink); }
@media (max-width: 900px) { .tech-outlook-grid { grid-template-columns: 1fr; } }

/* How it works on phones and tablets (2026-11-08, Ryan: "a UI with three buttons they click for each
   scene", then "make it look clean"): the card, a small hint, one segmented control with the three
   scenes (the active one solid orange), and the tapped scene's title and copy under it
   (js/tech.js). Each tap plays that scene in the drawing (js/solution.js); no scroll driving. */
.tech-how .sol-short, .tech-how .sol-hint, .tech-how .sol-detail { display: none; }
@media (max-width: 1023px) {
  .tech-how .v2-sol-grid { display: flex; flex-direction: column; }
  .tech-how .v2-sol-copy { display: contents; }
  .tech-how .v2-sol-media { order: 1; margin-top: 26px; }
  .tech-how .sol-hint { order: 2; display: block; width: 100%; max-width: none; margin: 22px 0 10px; text-align: center; font-family: "Michroma", sans-serif; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
  .tech-how .sol-steps { order: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: none; margin: 0; padding: 4px; border: 1px solid var(--hair); border-radius: 18px; background: rgba(16, 21, 27, 0.035); }
  .tech-how .sol-steps > li { min-width: 0; }
  .tech-how .sol-step { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 58px; padding: 10px 6px; text-align: center; border: 0; border-radius: 14px; background: transparent; opacity: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease; }
  .tech-how .sol-step > span:not(.sol-num):not(.sol-short) { display: none; }   /* the long title, copy and status: shown below the control */
  .tech-how .sol-step .sol-num { font-family: "Michroma", sans-serif; font-size: 9px; letter-spacing: 0.12em; line-height: 1; color: var(--faint); transition: color 0.25s ease; }
  .tech-how .sol-step .sol-short { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink); white-space: nowrap; transition: color 0.25s ease; }
  .tech-how .sol-step.is-on { background: var(--signal-bright); box-shadow: 0 6px 16px -8px rgba(232, 114, 42, 0.7); }
  .tech-how .sol-step.is-on .sol-short { color: #fff; }
  .tech-how .sol-step.is-on .sol-num { color: rgba(255, 255, 255, 0.78); }
  .tech-how .sol-step:active { transform: scale(0.97); }
  .tech-how .sol-detail { order: 4; display: block; width: 100%; max-width: none; min-height: 7.5em; margin: 18px 0 0; padding: 0 4px; }
  .tech-how .sol-detail-title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
  .tech-how .sol-detail-text { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
  .tech-how .sol-detail-text:only-child { margin: 0; text-align: center; color: var(--faint); font-size: 14.5px; }   /* the prompt, before the first tap */
  @media (prefers-reduced-motion: reduce) { .tech-how .sol-step, .tech-how .sol-step * { transition: none; } }
}

/* the Incident Command label stays on the right of its marker (Ryan, 2026-11-08): it sits near the
   70% line where ../js/ground.js flips labels left, so it jumped sides as the camera moved */
.home .tech-ground .marker[data-point="command"].label-left .marker-label { left: calc(50% + 30px); right: auto; flex-direction: row; }

/* How it works, phones and tablets (Ryan, 2026-11-08: "ensure the section cut is centered"): between
   ~600px and 1023px the card sat flush left at ~420px wide. Centre the card and give the hint, the
   three-step control and the detail the same column so the whole stack lines up. */
@media (max-width: 1023px) {
  .tech-how .v2-sol-media,
  .tech-how .sol-hint,
  .tech-how .sol-steps,
  .tech-how .sol-detail { align-self: center; width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* How it works, phones and tablets (Ryan, 2026-11-08: "move Tap a step under the buttons, make the
   buttons look good", apple-design pass). An iOS-style segmented control: a quiet grey track, one
   orange thumb that slides between the three scenes instead of each button repainting (spatial
   continuity, 380ms critically-damped curve), feedback on press, and the hint sits under the
   control. No JS: the thumb follows whichever step js/solution.js marks .is-on. */
@media (max-width: 1023px) {
  .tech-how .sol-steps { order: 2; position: relative; margin-top: 22px; gap: 0; padding: 3px; border: 0; border-radius: 14px; background: rgba(16, 21, 27, 0.06); box-shadow: inset 0 0 0 1px rgba(16, 21, 27, 0.04); }
  .tech-how .sol-steps::before {
    content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3);
    border-radius: 11px; background: var(--signal-bright);
    box-shadow: 0 1px 1px rgba(16, 21, 27, 0.08), 0 4px 12px -4px rgba(232, 114, 42, 0.6);
    transform: translateX(calc(var(--seg, 0) * 100%)) scale(0.92); opacity: 0;
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
  }
  .tech-how .sol-steps:has(> li:nth-child(1) .is-on) { --seg: 0; }
  .tech-how .sol-steps:has(> li:nth-child(2) .is-on) { --seg: 1; }
  .tech-how .sol-steps:has(> li:nth-child(3) .is-on) { --seg: 2; }
  .tech-how .sol-steps:has(.is-on)::before { opacity: 1; transform: translateX(calc(var(--seg) * 100%)); }
  /* hairline dividers between unselected segments, hidden next to the thumb */
  .tech-how .sol-steps > li { position: relative; z-index: 1; }
  .tech-how .sol-steps > li + li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(16, 21, 27, 0.12); transition: opacity 0.2s ease; }
  .tech-how .sol-steps > li:has(.is-on)::before,
  .tech-how .sol-steps > li:has(.is-on) + li::before { opacity: 0; }
  .tech-how .sol-step, .tech-how .sol-step.is-on { min-height: 54px; padding: 9px 6px; border-radius: 11px; background: transparent; box-shadow: none; transition: transform 0.1s ease-out; }
  .tech-how .sol-step:active { transform: scale(0.96); }
  .tech-how .sol-step:not(.is-on):active { background: rgba(16, 21, 27, 0.05); }
  .tech-how .sol-step:focus-visible { outline: 2px solid var(--signal-bright); outline-offset: 2px; }
  .tech-how .sol-step .sol-short { font-size: 14.5px; letter-spacing: -0.015em; }
  .tech-how .sol-step .sol-num { font-size: 8.5px; }
  .tech-how .sol-hint { order: 3; margin: 12px auto 0; }
  .tech-how .sol-detail { order: 4; margin-top: 20px; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .tech-how .sol-steps::before { transition: opacity 0.2s ease; }
}