/* ================================================================
   DesktopRadar — homepage
   Loads on top of core.css. Every class is prefixed `dr_`.

   The whole page is built as an instrument panel: near-black ground,
   hairline seams, monospaced silkscreen labels, tabular numerals.
   Exactly one thing moves on its own — the sweep in the hero. Nothing
   else animates unless you scroll to it or point at it.
   ================================================================ */

body.page_home { background: var(--dr-ground); }

/* Faint scan-line field over the whole page — the ground never reads as
   flat black, the way a phosphor screen never does. */
body.page_home::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .28;
    background:
        repeating-linear-gradient(180deg,
            rgba(48,255,96,.028) 0px, rgba(48,255,96,.028) 1px,
            transparent 1px, transparent 4px);
}
body.page_home > *:not(.dr_nav) { position: relative; z-index: 1; }

/* ── NAV ───────────────────────────────────────────────────── */

.dr_nav {
    position: sticky;
    top: 0;
    z-index: 60;
    border-bottom: 1px solid var(--dr-line);
    background: rgba(1, 6, 4, .72);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
}
.dr_nav_in {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 64px;
}
.dr_logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--dr-green);
    flex: none;
}
.dr_logo_mark { width: 26px; height: 26px; }
.dr_logo_type {
    font-family: var(--dr-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dr-text);
}
.dr_nav_links {
    display: flex;
    gap: 26px;
    margin-left: auto;
    font-family: var(--dr-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dr-text-dim);
}
.dr_nav_links a { transition: color .2s; }
.dr_nav_links a:hover { color: var(--dr-green); }
.dr_nav_cta { padding: 10px 18px; font-size: 11px; }

@media (max-width: 900px) {
    .dr_nav_links { display: none; }
    .dr_nav_cta { margin-left: auto; }
}
@media (max-width: 620px) {
    .dr_nav_cta { display: none; }
}

/* ── HERO ──────────────────────────────────────────────────── */

.dr_hero {
    position: relative;
    overflow: hidden;
    background: var(--dr-ground);
    padding: clamp(48px, 8vh, 96px) 0 clamp(72px, 12vh, 120px);
}
/* A single cold bloom behind the scope, as if the glass were lighting
   the wall behind the desk. */
.dr_hero_glow {
    position: absolute;
    top: -10%;
    right: -12%;
    width: 72vw;
    height: 72vw;
    max-width: 900px;
    max-height: 900px;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(48,255,96,.10) 0%,
        rgba(48,255,96,.045) 32%,
        rgba(95,200,200,.03) 52%,
        transparent 70%);
}
.dr_grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .34;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.dr_hero_in {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.dr_hero_eyebrow {
    color: var(--dr-green);
    margin-bottom: 26px;
}
.dr_dot {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    position: relative;
    top: -1px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--dr-green);
    box-shadow: 0 0 0 0 rgba(48,255,96,.6);
    animation: dr_ping 2.6s ease-out infinite;
}
@keyframes dr_ping {
    0%   { box-shadow: 0 0 0 0 rgba(48,255,96,.55); }
    70%  { box-shadow: 0 0 0 11px rgba(48,255,96,0); }
    100% { box-shadow: 0 0 0 0 rgba(48,255,96,0); }
}

.dr_hero h1 { margin-bottom: 26px; }
.dr_hero_sub { max-width: 46ch; margin-bottom: 34px; }

.dr_hero_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 46px;
}

/* The shipping line sits between the buttons and the stat rail — the one
   commercial fact in an otherwise product-only hero. */
.dr_hero_ship {
    display: block;
    margin: -30px 0 34px;
    color: var(--dr-amber);
}

.dr_hero_stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--dr-line);
    padding-top: 20px;
}
.dr_hero_stats > div {
    padding-right: 32px;
    margin-right: 32px;
    border-right: 1px solid var(--dr-line);
}
.dr_hero_stats > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.dr_hero_stats dd {
    font-family: var(--dr-mono);
    font-size: 15px;
    color: var(--dr-text);
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
}

/* ── THE SCOPE ─────────────────────────────────────────────── */

.dr_hero_media { display: flex; justify-content: center; }
.dr_hero_shot {
    position: relative;
    width: min(100%, 520px);
    border: 1px solid var(--dr-line);
    background: var(--dr-panel);
    box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .95);
}
.dr_hero_shot picture,
.dr_plate_img picture { display: block; }
.dr_hero_shot img { display: block; width: 100%; height: auto; }

/* The scope, now living down in the instrument section. */
.dr_scope_demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(48px, 6vw, 76px);
}
.dr_scope { width: min(100%, 460px); }

.dr_scope_bezel {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 4.2%;
    background:
        linear-gradient(155deg, #333935 0%, #141a17 38%, #0a0f0c 62%, #262c28 100%);
    box-shadow:
        0 40px 90px -30px rgba(0,0,0,.95),
        0 0 0 1px rgba(255,255,255,.05),
        inset 0 1px 1px rgba(255,255,255,.14);
}
/* The knurl: the whole front glass is the knob, so the bezel gets the
   fine ticks a knurled ring would have. */
.dr_scope_bezel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255,255,255,.055) 0deg 0.7deg,
        transparent 0.7deg 2.4deg);
    -webkit-mask: radial-gradient(circle, transparent 0 91.5%, #000 92% 100%);
    mask: radial-gradient(circle, transparent 0 91.5%, #000 92% 100%);
    pointer-events: none;
}

.dr_scope_glass {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: #020a07;
    box-shadow:
        inset 0 0 40px rgba(0,0,0,.9),
        inset 0 0 0 1px rgba(48,255,96,.10);
}
.dr_scope_svg,
.dr_scope_bearing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Map layers */
.dr_land { fill: rgba(48,255,96,.055); }
.dr_islet { fill: rgba(48,255,96,.13); }
.dr_coastline {
    fill: none;
    stroke: var(--dr-sage);
    stroke-width: 1.1;
    opacity: .85;
}

/* Grid */
.dr_rings circle {
    fill: none;
    stroke: rgba(48,255,96,.16);
    stroke-width: 1;
}
.dr_rings circle:last-child { stroke: rgba(48,255,96,.3); }
.dr_cross line {
    stroke: rgba(48,255,96,.10);
    stroke-width: 1;
}
.dr_ringlabels text {
    font-family: var(--dr-mono);
    font-size: 11px;
    letter-spacing: .1em;
    fill: rgba(154,184,167,.85);
}

/* Own position */
.dr_home circle { fill: var(--dr-teal); }
.dr_home_ping {
    fill: none;
    stroke: var(--dr-teal);
    stroke-width: 1.2;
    transform-origin: 260px 260px;
    animation: dr_homeping 4s ease-out infinite;
}
@keyframes dr_homeping {
    0%   { transform: scale(1);  opacity: .8; }
    70%  { transform: scale(6);  opacity: 0; }
    100% { transform: scale(6);  opacity: 0; }
}

/* Traffic — the firmware's palette: amber icons and callsigns, teal
   altitude tags, military in red. No trails: the glass draws none. */
.dr_ac path { fill: #e6af46; }
.dr_ac_call {
    font-family: var(--dr-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    fill: #cdaa46;
}
.dr_ac_alt {
    font-family: var(--dr-mono);
    font-size: 9px;
    letter-spacing: .05em;
    fill: #5fc8c8;
}
.dr_ac_mil path { fill: #ff5a3c; }
.dr_ac_mil .dr_ac_call { fill: #ff8878; }

/* Towns + airfields, as the firmware labels them */
.dr_pl_city, .dr_pl_town { fill: #54845e; }
.dr_pl_name {
    font-family: var(--dr-mono);
    font-size: 10px;
    fill: #547061;
    text-anchor: middle;
}
.dr_pl_cityname { fill: #64906e; }
.dr_pl_code {
    font-family: var(--dr-mono);
    font-size: 10px;
    fill: #4a9a9a;
    text-anchor: middle;
}
.dr_pl_rwy { stroke: #4a9a9a; stroke-width: 1.6; }
.dr_pl_gnd { fill: #6e5424; }

/* Bearing ring: cardinals only, like the glass */
.dr_cardinal {
    font-family: var(--dr-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1em;
    fill: rgba(48,255,96,.7);
}

/* The sweep — a clean bright beam, exactly as the glass draws it (the
   afterglow experiments were retired). The faint halo is optical bloom,
   the way the real beam photographs. */
.dr_sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    animation: dr_sweep 6s linear infinite;
}
.dr_sweep::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 2px;
    height: 48%;
    transform: translateX(-50%);
    background: rgba(48,255,96,.95);
    box-shadow: 0 0 6px rgba(48,255,96,.55), 0 0 14px rgba(48,255,96,.25);
}
@keyframes dr_sweep { to { transform: rotate(360deg); } }

.dr_scope_vignette {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 34% 24%, rgba(255,255,255,.055) 0%, transparent 42%),
        radial-gradient(circle, transparent 58%, rgba(0,0,0,.6) 100%);
}

.dr_scope_cap {
    margin-top: 20px;
    text-align: center;
    font-size: 11px;
    letter-spacing: .16em;
}

/* ── SCROLL CUE ────────────────────────────────────────────── */

.dr_scrollcue {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    animation: dr_bob 2.8s ease-in-out infinite;
}
.dr_scrollcue_ln {
    width: 1px;
    height: 38px;
    background: linear-gradient(var(--dr-sage), transparent);
}
@keyframes dr_bob { 0%, 100% { transform: none; } 50% { transform: translateY(7px); } }

/* ── SECTION HEADS ─────────────────────────────────────────── */

.dr_sec_head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 68px); }
.dr_sec_head .dr_label { display: block; margin-bottom: 18px; }
.dr_sec_head h2 { margin-bottom: 20px; }
.dr_sec_head b { color: var(--dr-text); font-weight: 600; }

/* ── MAGIC MOMENTS ─────────────────────────────────────────── */

.dr_moment_grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: var(--dr-line);
    border: 1px solid var(--dr-line);
}
.dr_moment {
    background: var(--dr-ground);
    padding: clamp(28px, 3.4vw, 42px);
    transition: background .3s;
}
.dr_moment:hover { background: var(--dr-panel); }
.dr_moment_no { display: block; color: var(--dr-green-dim); margin-bottom: 26px; }
.dr_moment h3 { margin-bottom: 14px; }
.dr_moment p { color: var(--dr-text-dim); font-size: 16px; }

/* ── FLIGHT CARD ───────────────────────────────────────────── */

.dr_card_in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
.dr_card_copy h2 { margin-bottom: 20px; }
.dr_card_copy .dr_label { display: block; margin-bottom: 18px; }
.dr_card_copy em { color: var(--dr-green); font-style: normal; }

.dr_ticks_list {
    list-style: none;
    margin-top: 34px;
    border-top: 1px solid var(--dr-line);
}
.dr_ticks_list li {
    position: relative;
    padding: 16px 0 16px 24px;
    border-bottom: 1px solid var(--dr-line);
    font-size: 15.5px;
    color: var(--dr-text-dim);
}
.dr_ticks_list span {
    position: absolute;
    left: 0;
    top: 16px;
    color: var(--dr-green);
    font-family: var(--dr-mono);
}
.dr_ticks_list b { color: var(--dr-text); font-weight: 600; }

.dr_card_fig { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.dr_card_fig figcaption { font-size: 11px; letter-spacing: .16em; }

/* The round glass, reused: same bezel treatment as the scope. */
.dr_glass {
    position: relative;
    width: min(100%, 420px);
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 4.2%;
    background: linear-gradient(155deg, #333935 0%, #141a17 38%, #0a0f0c 62%, #262c28 100%);
    box-shadow:
        0 34px 76px -28px rgba(0,0,0,.95),
        0 0 0 1px rgba(255,255,255,.05),
        inset 0 1px 1px rgba(255,255,255,.14);
}
.dr_glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255,255,255,.055) 0deg 0.7deg,
        transparent 0.7deg 2.4deg);
    -webkit-mask: radial-gradient(circle, transparent 0 91.5%, #000 92% 100%);
    mask: radial-gradient(circle, transparent 0 91.5%, #000 92% 100%);
    pointer-events: none;
    z-index: 2;
}

.dr_flightcard {
    position: relative;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #020a07;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: inset 0 0 40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(48,255,96,.10);
}
/* The airframe photograph sits behind the type, faded right down —
   on the device this is the real planespotters.net image. */
.dr_fc_photo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .16;
}
.dr_fc_photo svg { width: 118%; height: auto; }
.dr_fc_photo path { fill: var(--dr-sage); }

.dr_fc_body { position: relative; z-index: 2; width: 68%; }
.dr_fc_call {
    font-family: var(--dr-face);
    font-weight: 700;
    font-size: clamp(1.7rem, 5.2vw, 2.5rem);
    letter-spacing: .04em;
    color: var(--dr-green);
    line-height: 1;
    margin-bottom: 10px;
}
.dr_fc_route {
    font-family: var(--dr-mono);
    font-size: clamp(.85rem, 2.4vw, 1.05rem);
    letter-spacing: .16em;
    color: var(--dr-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}
.dr_fc_route i { color: var(--dr-teal); font-style: normal; }

.dr_fc_rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 28px;
    border-top: 1px solid var(--dr-line);
    border-bottom: 1px solid var(--dr-line);
    padding: 14px 0;
    margin-bottom: 14px;
}
.dr_fc_rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.dr_fc_rows dt {
    font-family: var(--dr-mono);
    font-size: 9px;
    letter-spacing: .1em;
    color: var(--dr-sage-lit);
}
.dr_fc_rows dd {
    font-family: var(--dr-mono);
    font-size: clamp(.8rem, 2.1vw, .95rem);
    font-variant-numeric: tabular-nums;
    color: var(--dr-text);
}
.dr_fc_rows small { font-size: .74em; color: var(--dr-sage-lit); margin-left: 3px; }

.dr_fc_reg {
    font-family: var(--dr-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    color: var(--dr-sage-lit);
    max-width: none;
}

.dr_fc_follow {
    position: absolute;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-family: var(--dr-mono);
    font-size: 10px;
    letter-spacing: .24em;
    padding: 7px 20px;
    border-radius: 999px;
    border: 1px solid rgba(48,255,96,.45);
    background: rgba(48,255,96,.10);
    color: var(--dr-green);
    cursor: default;
}

/* ── YOUR TOWN ─────────────────────────────────────────────── */

.dr_steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(24px, 3vw, 44px);
    counter-reset: step;
}
.dr_step { border-top: 1px solid var(--dr-green-dim); padding-top: 22px; }
.dr_step_no { display: block; color: var(--dr-green); margin-bottom: 18px; }
.dr_step h3 { margin-bottom: 12px; }
.dr_step p { color: var(--dr-text-dim); font-size: 16px; }

/* ── THE OBJECT ────────────────────────────────────────────── */

.dr_object_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.dr_plate {
    border: 1px solid var(--dr-line);
    background: linear-gradient(180deg, var(--dr-panel) 0%, var(--dr-ground) 100%);
    display: flex;
    flex-direction: column;
}
.dr_plate_wide { grid-column: span 2; }

.dr_plate_img {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(26px, 4vw, 54px);
    min-height: 240px;
    /* Faint graph paper — these are engineering renders, so they sit on
       a drawing sheet rather than floating in the void. */
    background-image:
        linear-gradient(rgba(48,255,96,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(48,255,96,.04) 1px, transparent 1px);
    background-size: 34px 34px;
}
.dr_plate_img img {
    filter: brightness(1.22) drop-shadow(0 26px 40px rgba(0,0,0,.8));
    position: relative;
    z-index: 2;
    max-width: 100%;
    max-height: 380px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* The parts are matte black; on a black page they need something behind
   them to read against. This is the desk lamp. */
.dr_plate_lit::after,
.dr_plate_img::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: 74%;
    height: 74%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: radial-gradient(ellipse at center,
        rgba(48,255,96,.11) 0%,
        rgba(95,200,200,.05) 40%,
        transparent 68%);
}
.dr_plate_lit::after { background: radial-gradient(ellipse at center, rgba(48,255,96,.20) 0%, rgba(48,255,96,.07) 42%, transparent 70%); }
/* The specification plate that sits beside the profile — deliberately
   about material and finish, not about how the thing comes apart. */
.dr_note {
    padding: clamp(26px, 3vw, 38px);
    background-image:
        linear-gradient(rgba(48,255,96,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(48,255,96,.04) 1px, transparent 1px),
        linear-gradient(180deg, var(--dr-panel) 0%, var(--dr-ground) 100%);
    background-size: 34px 34px, 34px 34px, 100% 100%;
}
.dr_note_head {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.015em;
    color: #e8f5ec;
    margin: 14px 0 26px;
}
.dr_note_rows { border-top: 1px solid var(--dr-line); }
.dr_note_rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 11px 0;
    border-bottom: 1px solid var(--dr-line);
}
.dr_note_rows dt {
    flex: none;
    font-family: var(--dr-mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dr-green-dim);
}
.dr_note_rows dd {
    font-size: 14.5px;
    text-align: right;
    color: var(--dr-text);
}
.dr_note_foot {
    margin-top: 22px;
    font-size: 15px;
    color: var(--dr-text-dim);
}

/* A photographic plate. The OpenSCAD renders float on a drawing sheet; a
   photograph should fill its frame instead, so this undoes the sheet, the
   lamp glow and the height cap for that one figure. */
.dr_plate_bleed .dr_plate_img {
    padding: 0;
    min-height: 0;
    background-image: none;
}
.dr_plate_bleed .dr_plate_img::after { content: none; }
.dr_plate_bleed .dr_plate_img {
    overflow: hidden;
}
.dr_plate_bleed .dr_plate_img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    filter: none;
}

.dr_plate figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    padding: 16px 22px;
    border-top: 1px solid var(--dr-line);
    font-size: 14px;
}
.dr_plate figcaption b { font-weight: 600; color: #e8f5ec; }
.dr_plate figcaption .dr_label { font-size: 10.5px; }

/* ── SPECS ─────────────────────────────────────────────────── */

.dr_spec_table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--dr-line);
}
.dr_spec_table caption {
    text-align: left;
    padding-bottom: 18px;
    color: var(--dr-sage);
}
.dr_spec_table tr { border-bottom: 1px solid var(--dr-line); transition: background .25s; }
.dr_spec_table tr:hover { background: var(--dr-panel); }
.dr_spec_table th,
.dr_spec_table td { padding: 20px 18px 20px 0; text-align: left; vertical-align: top; }
.dr_spec_table th {
    width: 30%;
    font-family: var(--dr-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dr-green-dim);
    padding-top: 23px;
}
.dr_spec_table td { color: var(--dr-text-dim); font-size: 16px; }

/* ── FIRMWARE ──────────────────────────────────────────────── */

.dr_fw_in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .7fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}
.dr_fw_in .dr_label { display: block; margin-bottom: 18px; }
.dr_fw_in h2 { margin-bottom: 20px; }
.dr_fw_in b { color: var(--dr-green); font-weight: 600; }

.dr_fw_panel {
    border: 1px solid rgba(48,255,96,.3);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(48,255,96,.09), transparent 70%),
        var(--dr-panel);
    padding: clamp(26px, 3vw, 38px);
}
.dr_fw_ver {
    font-family: var(--dr-mono);
    font-size: clamp(2.2rem, 5vw, 3.1rem);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--dr-green);
    line-height: 1;
    margin: 12px 0 26px;
    text-shadow: 0 0 34px rgba(48,255,96,.5);
}
.dr_fw_meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    border-top: 1px solid var(--dr-line);
    padding-top: 20px;
}
.dr_fw_meta dt { margin-bottom: 6px; }
.dr_fw_meta dd {
    font-family: var(--dr-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* Subtle link from the firmware panel to /releases/ */
.dr_fw_loglink {
    margin-top: 16px;
    font-family: var(--dr-mono);
    font-size: 11px;
    line-height: 1;
}
.dr_fw_loglink a {
    color: var(--dr-sage);
    opacity: .75;
    text-decoration: none;
    letter-spacing: .06em;
    transition: color .2s ease, opacity .2s ease;
}
.dr_fw_loglink a:hover { color: var(--dr-green); opacity: 1; }

/* Release log page (/releases/) — rendered from firmware/releases.json */
.dr_releases_page .dr_wrap { max-width: 860px; }
.dr_releases_page h2 { margin: 14px 0 18px; }
.dr_releases_back { margin-top: clamp(28px, 4vw, 44px); }
.dr_fw_log {
    margin-top: clamp(18px, 3vw, 36px);
}
.dr_fw_releases {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    border-top: 1px solid var(--dr-line);
}
.dr_fw_releases > li {
    padding: 18px 0;
    border-bottom: 1px solid var(--dr-line);
}
.dr_rel_head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
}
.dr_rel_head b {
    font-family: var(--dr-mono);
    font-weight: 500;
    color: var(--dr-green);
    font-variant-numeric: tabular-nums;
}
.dr_rel_head em {
    font-style: normal;
    color: var(--dr-text);
    font-weight: 600;
}
.dr_rel_head span {
    margin-left: auto;
    font-family: var(--dr-mono);
    font-size: 12px;
    color: var(--dr-sage);
    font-variant-numeric: tabular-nums;
}
.dr_fw_releases ul {
    margin: 8px 0 0;
    padding-left: 18px;
}
.dr_fw_releases ul li {
    margin: 4px 0;
    color: var(--dr-text-dim);
    font-size: 14px;
    line-height: 1.55;
}

/* ── FAQ ───────────────────────────────────────────────────── */

.dr_faq_list { border-top: 1px solid var(--dr-line); max-width: 860px; }
.dr_faq_list details { border-bottom: 1px solid var(--dr-line); }
.dr_faq_list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
    font-size: clamp(1.02rem, 1.6vw, 1.18rem);
    font-weight: 500;
    color: #e8f5ec;
    transition: color .2s;
}
.dr_faq_list summary::-webkit-details-marker { display: none; }
.dr_faq_list summary:hover { color: var(--dr-green); }
/* A plus that becomes a minus — no icon font, no image. */
.dr_faq_list summary::after {
    content: "+";
    flex: none;
    font-family: var(--dr-mono);
    font-size: 20px;
    font-weight: 400;
    color: var(--dr-green);
    transition: transform .28s;
}
.dr_faq_list details[open] summary::after { content: "–"; }
.dr_faq_list details p {
    padding: 0 0 26px;
    color: var(--dr-text-dim);
    font-size: 16px;
}

/* ── REGISTER INTEREST ─────────────────────────────────────── */

.dr_interest { text-align: center; }
.dr_interest_in { max-width: 760px; margin: 0 auto; }
.dr_interest .dr_label { display: block; margin-bottom: 18px; }
.dr_interest h2 { margin-bottom: 20px; }
.dr_interest .dr_lede { margin: 0 auto 38px; }

/* Who made it, what is promised, what turns up — the three things a
   small-run buyer actually wants before leaving an address. */
.dr_assurance {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(20px, 3vw, 36px);
    text-align: left;
    margin: 0 0 40px;
    padding: 30px 0;
    border-top: 1px solid var(--dr-line);
    border-bottom: 1px solid var(--dr-line);
}
.dr_assurance .dr_label { display: block; margin-bottom: 12px; color: var(--dr-green); }
.dr_assurance p { font-size: 15px; line-height: 1.6; color: var(--dr-text-dim); max-width: none; }
.dr_assurance b { color: var(--dr-text); font-weight: 600; }

.dr_interest .dr_lede + .dr_assurance { margin-top: 0; }
.dr_assurance + .dr_lede { margin-bottom: 34px; }

.dr_interest_form { max-width: 520px; margin: 0 auto; text-align: left; }
.dr_interest_form > .dr_label { margin-bottom: 10px; }
.dr_interest_row { display: flex; gap: 10px; flex-wrap: wrap; }
.dr_interest_row input {
    flex: 1 1 220px;
    min-width: 0;
    font-family: var(--dr-mono);
    font-size: 14px;
    color: var(--dr-text);
    background: var(--dr-panel);
    border: 1px solid var(--dr-line-soft);
    border-radius: 2px;
    padding: 15px 16px;
    transition: border-color .2s, background .2s;
}
.dr_interest_row input::placeholder { color: rgba(111,143,122,.6); }
.dr_interest_row input:focus {
    outline: none;
    border-color: var(--dr-green);
    background: var(--dr-panel-2);
}
.dr_interest_note {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--dr-text-dim);
    max-width: none;
    min-height: 1.4em;   /* hold the line so a reply does not jump the form */
}
.dr_interest_note.is_ok  { color: var(--dr-green); }
.dr_interest_note.is_bad { color: #ff8878; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.dr_hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.dr_interest_row input:disabled,
.dr_interest_form button:disabled { opacity: .55; cursor: default; }

/* ── FOOTER ────────────────────────────────────────────────── */

.dr_footer {
    border-top: 1px solid var(--dr-line);
    padding: clamp(48px, 7vh, 76px) 0 clamp(36px, 5vh, 56px);
    background: linear-gradient(180deg, var(--dr-ground), #000301);
}
.dr_footer_in {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 5vw, 64px);
}
.dr_footer_line { margin-top: 16px; color: var(--dr-text-dim); font-size: 14.5px; }
.dr_credits .dr_label { display: block; margin-bottom: 14px; }
.dr_credits p { font-size: 14px; color: var(--dr-text-dim); max-width: 68ch; }
.dr_credits a { color: var(--dr-sage-lit); border-bottom: 1px solid var(--dr-line-soft); }
.dr_credits a:hover { color: var(--dr-green); border-color: var(--dr-green); }
.dr_credits b { color: var(--dr-text); font-weight: 600; }
.dr_footer_small { margin-top: 18px; font-size: 12.5px; opacity: .82; }

/* ── RESPONSIVE ────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .dr_hero_in,
    .dr_card_in,
    .dr_fw_in,
    .dr_footer_in { grid-template-columns: minmax(0, 1fr); }
    .dr_hero_in { gap: 56px; }
    /* The object first on a phone: it is the whole pitch. */
    .dr_hero_media { order: -1; }
    .dr_scope { width: min(100%, 380px); }
    .dr_object_grid { grid-template-columns: minmax(0, 1fr); }
    .dr_plate_wide { grid-column: span 1; }
}

@media (max-width: 560px) {
    :root { --dr-gutter: 20px; }
    body { font-size: 16px; }
    .dr_hero_stats > div {
        padding-right: 20px;
        margin-right: 20px;
    }
    .dr_fc_rows { grid-template-columns: 1fr; }
    .dr_assurance { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .dr_spec_table th,
    .dr_spec_table td { display: block; width: 100%; padding-right: 0; }
    .dr_spec_table th { padding-bottom: 6px; }
    .dr_spec_table td { padding-top: 0; padding-bottom: 20px; }
    .dr_interest_row input { flex-basis: 100%; }
    .dr_btn { width: 100%; justify-content: center; }
}