/* ==========================================================================
   PAGE: Support (support.html) — "neon handshake"
   The photographed support sign is dimmed; a glass face pinned to the sign's
   plane (js/page-support.js) covers its printed letters, and the real,
   selectable address strikes on inside it, the photo brightening in step.
   The sign's light runs on to both edges of the screen.

    1  Hero layout (copy + actions | sign; stacked on portrait and narrow screens)
    2  Hero light field (full bleed, centred on the sign)
    3  The sign: photo fit, glass face, neon address
    4  Handshake: the tube strikes
    5  Compose card (topic chips → mailto: draft)
    6  App help cards
    7  Wide screens: compose and help share one band
    8  Modes: no JS, no container units, forced colors, more contrast
   ========================================================================== */


/* ---------- 1. Hero layout ------------------------------------------------- */

.page-support .sup-hero {
    /* the sign's centre and frame width, measured by the script (fallbacks: no JS) */
    --sign-x: 50%;
    --sign-y: 72%;
    --sign-w: 86vw;
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    /* sized to its content: the sign carries the screen, so no empty bands above or below */
    padding-block: calc(var(--header-offset) + clamp(1rem, 5svh, 4.5rem)) clamp(.5rem, 3svh, 2.5rem);
}

/* stacked: copy, then the sign (edge to edge), then the actions */
.page-support .sup-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "sign" "cta";
    align-items: center;
}

.page-support .sup-hero-copy {
    grid-area: copy;
    position: relative;   /* above the sign's photo, which runs on behind it */
    z-index: 1;
    display: grid;
    gap: var(--space-s);
    min-width: 0;
    container-type: inline-size;
}

.page-support .sup-title {
    max-width: 22ch;
}

/* "religion" is lit like the sign rather than slanted */
.page-support .sup-title em {
    font-style: normal;
    font-weight: 300;
    color: color-mix(in srgb, var(--neon) 34%, #fff);
    text-shadow:
        0 0 .05em rgba(255, 255, 255, .5),
        0 0 .28em color-mix(in srgb, var(--neon) 55%, transparent),
        0 0 .9em color-mix(in srgb, var(--neon) 28%, transparent);
}

.page-support .sup-lede {
    max-width: 44ch;
    text-wrap: balance;
}

.page-support .sup-line {
    grid-area: sign;
    display: grid;
    justify-items: center;
    gap: var(--space-m);
    min-width: 0;
    margin-top: var(--space-m);
    container-type: inline-size;
}

.page-support .sup-cta {
    grid-area: cta;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
    container-type: inline-size;
}

/* The script reveals Copy / Write to us at DOMContentLoaded: their row is held so nothing shifts */
:root.js .page-support .sup-cta {
    min-height: 2.75rem;
    margin-top: var(--space-s);
}

.page-support .sup-actions {
    justify-content: center;
}

/* a narrow column (small phones, phone landscape): "Copy" (its full name stays for screen
   readers) and slimmer buttons, so both share one row */
@container (max-width: 20.5rem) {
    .page-support .sup-cta-more {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .page-support .sup-actions {
        gap: .6rem;
    }

    .page-support .sup-actions .btn {
        padding-inline: 1em;
    }
}

/* landscape (and phone landscape): copy and actions | sign, vertically centred on each other */
@media (min-aspect-ratio: 5/4) and (min-width: 640px) {
    .page-support .sup-hero {
        --sign-x: 68%;
        --sign-y: 50%;
        --sign-w: 50vw;
    }

    .page-support .sup-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, min(58%, 1130px));
        grid-template-rows: 1fr auto auto 1fr;
        grid-template-areas: ". sign" "copy sign" "cta sign" ". sign";
        column-gap: clamp(1.5rem, 4vw, 6rem);
    }

    .page-support .sup-line {
        margin-top: 0;
    }

    .page-support .sup-cta {
        justify-content: start;
    }

    :root.js .page-support .sup-cta {
        margin-top: var(--space-l);
    }

    .page-support .sup-actions {
        justify-content: start;
    }
}

/* phone landscape: a little more room for the copy, so the actions fit beside the sign on one row */
@media (min-aspect-ratio: 5/4) and (min-width: 640px) and (max-height: 520px) {
    .page-support .sup-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 55%);
    }

    :root.js .page-support .sup-cta {
        margin-top: var(--space-s);
    }
}

/* from small desktops the sign takes more of the stage */
@media (min-aspect-ratio: 5/4) and (min-width: 1200px) {
    .page-support .sup-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, min(62%, 1130px));
    }
}

/* ultrawide (once the wrap has grown): copy and sign stay close together; the light field
   and the traces carry the rest of the width */
@media (min-aspect-ratio: 21/9) and (min-width: 2560px) {
    .page-support .sup-hero-grid {
        grid-template-columns: minmax(0, 64rem) minmax(0, 1130px);
        justify-content: start;
    }
}


/* ---------- 2. Hero light field ----------------------------------------------
   The sign's light continues past the photo to both screen edges: the photo
   itself, enlarged and heavily blurred (.sup-ambient), a blue haze and the aqua
   spill (::before) and the glass's dot matrix (::after), all centred on the
   sign and fading out into the next section. */

.page-support .sup-hero::before,
.page-support .sup-hero::after {
    content: "";
}

.page-support .sup-ambient,
.page-support .sup-hero::before,
.page-support .sup-hero::after {
    position: absolute;
    inset: 0 0 -8rem;
    z-index: -1;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 calc(100% - 16rem), transparent);
    mask: linear-gradient(#000 calc(100% - 16rem), transparent);
}

.page-support .sup-ambient {
    overflow: clip;
}

/* twice the photo's size, centred on the sign's frame (its centre is at 49.6%, 46.5% of the photo) */
.page-support .sup-ambient img {
    --amb-w: calc(var(--sign-w) * 3.44);
    position: absolute;
    left: calc(var(--sign-x) - var(--amb-w) * .496);
    top: calc(var(--sign-y) - var(--amb-w) * .251);
    width: var(--amb-w);
    max-width: none;
    height: auto;
    opacity: .5;
    filter: blur(calc(var(--sign-w) * .06)) saturate(1.3) brightness(.75);
    -webkit-mask: radial-gradient(closest-side, #000 35%, transparent);
    mask: radial-gradient(closest-side, #000 35%, transparent);
}

.page-support .sup-hero::before {
    background:
        radial-gradient(calc(var(--sign-w) * .62) calc(var(--sign-w) * .3) at var(--sign-x) var(--sign-y), color-mix(in srgb, var(--neon) 8%, transparent), transparent),
        radial-gradient(max(var(--sign-w) * 2, 75vw) calc(var(--sign-w) * .7) at var(--sign-x) var(--sign-y), color-mix(in srgb, var(--die) 13%, transparent), transparent);
}

.page-support .sup-hero::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--neon) 34%, transparent) 0 .75px, transparent 1.25px) 50% 0 / 14px 14px;
    -webkit-mask:
        radial-gradient(calc(var(--sign-w) * 1.7) calc(var(--sign-w) * .55) at var(--sign-x) var(--sign-y), rgba(0, 0, 0, .55), rgba(0, 0, 0, .16) 55%, transparent),
        linear-gradient(#000 calc(100% - 16rem), transparent);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(calc(var(--sign-w) * 1.7) calc(var(--sign-w) * .55) at var(--sign-x) var(--sign-y), rgba(0, 0, 0, .55), rgba(0, 0, 0, .16) 55%, transparent),
        linear-gradient(#000 calc(100% - 16rem), transparent);
    mask-composite: intersect;
}

/* the sign's circuit, continued to the screen edges (paths drawn by the script) */
.page-support .sup-traces {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    pointer-events: none;
}

.page-support .sup-trace {
    stroke: color-mix(in srgb, var(--neon) 24%, transparent);
    stroke-width: 1.25;
    stroke-linejoin: round;
}

.page-support .sup-trace-hot {
    stroke: none;
}

.page-support .sup-via {
    fill: var(--substrate);
    stroke: color-mix(in srgb, var(--neon) 45%, transparent);
    stroke-width: 1.25;
}


/* ---------- 3. The sign ------------------------------------------------------
   .sup-line (the sign's column) is the container. The sign box runs a full
   viewport past the column on both sides (the hero clips it), so the photo
   fades out under the copy and towards the screen edges instead of at a box
   edge. The photo is placed so the sign's frame (source px 284–1095 × 178–522
   of 1392×752) is centred in the column at --cy of the sign's height, filling
   --fit-w of --span or --fit-h of the height, whichever binds, never above 1.25×. */

.page-support .sup-sign {
    --sign-h: min((100cqi + 2 * var(--gutter)) / 1.45, 48svh);
    --span: calc(100cqw + 2 * var(--gutter));
    --fit-w: .94;
    --fit-h: .76;
    --cx: calc(100vw + 50cqw);
    --cy: calc(var(--sign-h) * .47);
    --s: min(var(--fit-w) * var(--span) / 810, var(--fit-h) * var(--sign-h) / 343.5, 1.25px);
    position: relative;
    justify-self: stretch;
    height: var(--sign-h);
    margin-inline: -100vw;
    overflow: clip;
    pointer-events: none;
    -webkit-mask: linear-gradient(transparent, #000 8%, #000 90%, transparent);
    mask: linear-gradient(transparent, #000 8%, #000 90%, transparent);
}

@media (min-aspect-ratio: 5/4) and (min-width: 640px) {
    .page-support .sup-sign {
        --sign-h: min(100cqi / 1.45, 62svh);
        --span: 100cqw;
        --fit-w: .96;
    }
}

/* short landscape: the sign takes the height the header leaves */
@media (min-aspect-ratio: 5/4) and (min-width: 640px) and (max-height: 600px) {
    .page-support .sup-sign {
        --sign-h: min(100cqi / 1.45, 100svh - var(--header-offset) - 4.5rem);
        --fit-h: .8;
    }
}

/* small phones: the sign gives up a little height so both actions land on the first screen */
@media (max-width: 359.98px), (max-aspect-ratio: 4/5) and (max-height: 700px) {
    .page-support .sup-sign {
        --sign-h: min((100cqi + 2 * var(--gutter)) / 1.45, 36svh);
    }
}

@media (max-aspect-ratio: 4/5) and (max-height: 600px) {
    .page-support .sup-line {
        margin-top: var(--space-xs);
    }

    .page-support .sup-sign {
        --sign-h: min((100cqi + 2 * var(--gutter)) / 1.45, 30svh);
    }
}

.page-support .sup-sign-photo img {
    position: absolute;
    left: calc(var(--cx) - 690.2 * var(--s));
    top: calc(var(--cy) - 339.3 * var(--s));
    width: calc(1392 * var(--s));
    max-width: none;
    height: calc(752 * var(--s));
    filter: brightness(.5) saturate(1.05);
    -webkit-mask: radial-gradient(closest-side at 49.6% 45%, #000 64%, transparent);
    mask: radial-gradient(closest-side at 49.6% 45%, #000 64%, transparent);
}

/* The glass face. Until the script pins it to the sign's plane it sits on the
   face's bounding box (source px 302, 231, 783 × 256), which is close enough. */
.page-support .sup-sign-face {
    position: absolute;
    left: calc(var(--cx) + (302.1 - 690.2) * var(--s));
    top: calc(var(--cy) + (230.8 - 339.3) * var(--s));
    width: calc(783.3 * var(--s));
    height: calc(256 * var(--s));
    display: grid;
    place-items: center;
    max-width: none;
    margin: 0;
    container-type: inline-size;
    transform-origin: 0 0;
    pointer-events: auto;   /* the address stays selectable */
}

/* dark glass with the sign's dot matrix, feathered so the frame's own traces fade under it */
.page-support .sup-sign-face::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--neon) 11%, transparent) 0 .09cqi, transparent .16cqi) 50% 50% / .8cqi .8cqi,
        radial-gradient(ellipse 60% 70% at 50% 52%, color-mix(in srgb, var(--solder) 92%, var(--die) 8%), color-mix(in srgb, var(--solder) 96%, transparent));
    -webkit-mask: linear-gradient(90deg, transparent, #000 2.6%, #000 97.4%, transparent), linear-gradient(transparent, #000 9.5%, #000 90.5%, transparent);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(90deg, transparent, #000 2.6%, #000 97.4%, transparent), linear-gradient(transparent, #000 9.5%, #000 90.5%, transparent);
    mask-composite: intersect;
}

/* light the tube throws onto the glass */
.page-support .sup-sign-face::after {
    content: "";
    position: absolute;
    inset: 12% 8%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--neon) 16%, transparent), transparent);
    pointer-events: none;
}

.page-support .sup-sign .email-address {
    --tube-glow:
        0 0 .04em #fff,
        0 0 .18em var(--neon),
        0 0 .5em color-mix(in srgb, var(--neon) 70%, transparent),
        0 0 1.2em color-mix(in srgb, var(--neon) 45%, transparent);
    display: block;
    max-width: 88cqi;   /* too narrow for one line, so it breaks after the @ */
    font-size: 7.2cqi;
    text-shadow: var(--tube-glow);
    font-weight: 300;
    font-stretch: 112%;
    line-height: 1.14;
    letter-spacing: .015em;
    text-align: center;
    overflow-wrap: normal;
}


/* ---------- 4. Handshake ------------------------------------------------------
   The tube strikes: every change of its state is a hard jump (steps), two dips
   in 1.2s (under 3 per second). The photo and the glass spill react with a short
   ease, a beat behind the tube, as a room lit by it would. */

:root.js:not(.motion-off) .page-support .sup-line:not(.is-in) .sup-sign-photo img {
    filter: brightness(.3) saturate(.9);
}

:root.js:not(.motion-off) .page-support .sup-line:not(.is-in) .sup-sign-face::after {
    opacity: 0;
}

:root.js:not(.motion-off) .page-support .sup-line.is-in .sup-sign .email-address {
    animation: sup-tube-on 1.2s steps(1, end) backwards;
}

:root.js:not(.motion-off) .page-support .sup-line.is-in .sup-sign-photo img {
    animation: sup-plate-on 1.2s var(--ease-out) backwards;
}

:root.js:not(.motion-off) .page-support .sup-line.is-in .sup-sign-face::after {
    animation: sup-spill-on 1.2s var(--ease-out) backwards;
}

:root.js:not(.motion-off) .page-support .sup-hero:has(.sup-line:not(.is-in)) .sup-ambient {
    opacity: 0;
}

:root.js:not(.motion-off) .page-support .sup-hero:has(.sup-line.is-in) .sup-ambient {
    animation: sup-spill-on 1.2s var(--ease-out) backwards;
}

/* once the tube holds, one pulse of current runs out along the traces to the screen edges */
:root.js:not(.motion-off) .page-support .sup-hero:has(.sup-line.is-in) .sup-traces:not(.is-settled) .sup-trace-hot {
    stroke: var(--neon);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: .08 1.2;
    animation: sup-current 1.6s .9s var(--ease-io) both;
}

/* tube: off 0–180ms · on · dip 276–348ms · on · dip 780–852ms · on */
@keyframes sup-tube-on {
    0% { opacity: .2; text-shadow: none; }
    15% { opacity: 1; text-shadow: var(--tube-glow); }
    23% { opacity: .3; text-shadow: none; }
    29% { opacity: 1; text-shadow: var(--tube-glow); }
    65% { opacity: .42; text-shadow: none; }
    71%, 100% { opacity: 1; text-shadow: var(--tube-glow); }
}

/* the room: eased, ~70ms behind each jump (equal neighbouring stops hold) */
@keyframes sup-plate-on {
    0%, 15% { filter: brightness(.3) saturate(.9); }
    21%, 23% { filter: brightness(.6) saturate(1.08); }
    28%, 29% { filter: brightness(.38) saturate(.95); }
    35%, 65% { filter: brightness(.54) saturate(1.05); }
    70%, 71% { filter: brightness(.42) saturate(1); }
    77%, 100% { filter: brightness(.5) saturate(1.05); }
}

@keyframes sup-spill-on {
    0%, 15% { opacity: 0; }
    21%, 23% { opacity: 1; }
    28%, 29% { opacity: .15; }
    35%, 65% { opacity: 1; }
    70%, 71% { opacity: .35; }
    77%, 100% { opacity: 1; }
}

/* a short dash (pathLength 1) travelling from the sign to the screen edge */
@keyframes sup-current {
    from { stroke-dashoffset: .08; }
    to { stroke-dashoffset: -1.1; }
}


/* ---------- 5. Compose card ------------------------------------------------- */

.page-support .sup-compose {
    padding-block: calc(var(--section) * .45) calc(var(--section) * .75);
}

.page-support .sup-compose-grid {
    display: grid;
    gap: var(--space-xl);
    align-items: start;
}

.page-support .sup-compose-head {
    margin-bottom: 0;
}

/* landscape desktop: head | card; the head stays beside the card while it scrolls */
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
    .page-support .sup-compose-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(2rem, 5vw, 6rem);
    }
}

@media (min-width: 1024px) and (min-aspect-ratio: 5/4) and (min-height: 760px) {
    .page-support .sup-compose-head {
        position: sticky;
        top: calc(var(--header-offset) + var(--space-l));
    }
}

@media (min-width: 1600px) and (min-aspect-ratio: 5/4) {
    .page-support .sup-compose-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 56rem);
    }
}

/* one width of Anybody below the hero: section and card titles match */
.page-support :is(.sup-compose, .sup-help) :is(h2, h3),
.page-support .sup-card-title {
    font-stretch: 100%;
}

@media (max-width: 479.98px) {
    .page-support :is(.sup-compose, .sup-help) :is(h2, h3),
    .page-support .sup-card-title {
        font-stretch: 80%;
    }
}

/* three steps on a vertical trace */
.page-support .sup-steps {
    position: relative;
    display: grid;
    gap: var(--space-s);
    margin: var(--space-2xs) 0 0;
    padding: 0;
    list-style: none;
}

.page-support .sup-steps::before {
    content: "";
    position: absolute;
    left: calc(1.1rem - .5px);
    top: 1.1rem;
    bottom: 1.1rem;
    width: 1px;
    background: linear-gradient(var(--line-strong), rgba(var(--accent-rgb), .45), var(--line-strong));
}

.page-support .sup-steps li {
    position: relative;
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: var(--space-s);
    align-items: center;
    color: var(--text-2);
}

.page-support .sup-step-num {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-text);
    border-radius: 50%;
    background: var(--ground);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45);
}

.page-support .sup-tag-sample {
    font-family: var(--font-mono);
    font-size: .9em;
    color: var(--text);
}

/* the card: a mail header (To · Topic · Subject) above the message */
.page-support .sup-card {
    --card-pad: clamp(1.25rem, .9rem + 1.6vmin, 2.5rem);
    gap: 0;
    transition: box-shadow var(--dur-3) var(--ease-out);
}

.page-support .sup-card:focus-within {
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .4), var(--glow-soft);
}

.page-support .sup-form {
    display: grid;
    gap: var(--space-m);
}

.page-support .sup-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem 1.5rem;
    padding-bottom: var(--space-s);
    border-bottom: 1px solid var(--line);
}

.page-support .sup-card-title {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 400;
    line-height: 1.2;
    color: var(--plasma);
}

.page-support .sup-card-status {
    display: inline-flex;
    align-items: flex-start;
    line-height: 1.5;
    gap: .6em;
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-2);
}

.page-support .sup-card-dot {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: calc(.75em - 3.5px);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--text-3);
}

.page-support .sup-row {
    display: grid;
    gap: .55rem;
    min-width: 0;
    margin: 0;
}

.page-support .sup-row-label {
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-2);
}

.page-support .sup-topics legend {
    margin-bottom: .55rem;
}

.page-support .sup-to {
    font-family: var(--font-mono);
    font-size: .9375rem;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* the topic tag sits inside the subject box, so the subject reads exactly as it will arrive */
.page-support .sup-subject {
    display: flex;
    align-items: center;
    min-width: 0;
    border-radius: var(--r-sm);
    background: var(--laminate);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    transition: box-shadow var(--dur-2);
}

.page-support .sup-subject:hover {
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45);
}

.page-support .sup-subject:focus-within {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    box-shadow: inset 0 0 0 1px var(--accent), var(--focus-halo);
}

.page-support .sup-subject-tag {
    flex: none;
    padding-left: .95rem;
    font-family: var(--font-mono);
    font-size: .875rem;
    color: var(--accent-text);
    white-space: nowrap;
}

.page-support .sup-subject .input {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: .6rem;
    background-color: transparent;
    box-shadow: none;
}

.page-support .sup-subject .input:focus-visible {
    outline: none;
    box-shadow: none;
}

/* a narrow card (small phones): the tag sits above the text, so the subject keeps the full width */
@container (max-width: 18.5rem) {
    .page-support .sup-subject {
        flex-wrap: wrap;
    }

    .page-support .sup-subject-tag {
        flex-basis: 100%;
        padding: .65rem .95rem 0;
    }

    .page-support .sup-subject .input {
        padding: .3rem .95rem .7rem;
    }
}

.page-support .sup-send {
    display: grid;
    gap: var(--space-s);
    padding-top: var(--space-2xs);
}

.page-support .sup-honest {
    max-width: none;
    text-wrap: balance;
}

/* wide card: labels in a mono column, like a mail header */
@container (min-width: 38rem) {
    .page-support .sup-row {
        grid-template-columns: 7rem minmax(0, 1fr);
        column-gap: var(--space-m);
        align-items: start;
    }

    .page-support .sup-row--to {
        align-items: baseline;
    }

    .page-support .sup-row > .sup-row-label {
        padding-top: .8rem;
    }

    .page-support .sup-row--to > .sup-row-label {
        padding-top: 0;
    }

    /* a legend can't be a grid item: float it into the label column */
    .page-support .sup-topics {
        display: block;
    }

    .page-support .sup-topics legend {
        float: left;
        width: 7rem;
        margin: 0 var(--space-m) 0 0;
        padding-top: .6rem;
    }

    .page-support .sup-topics .chip-set {
        margin-left: calc(7rem + var(--space-m));
    }

    .page-support .sup-send {
        padding-left: calc(7rem + var(--space-m));
    }
}


/* ---------- 6. App help ------------------------------------------------------
   Each card carries a small factual mark: the GreekGPT data flow from its
   policy, a MAGO account chip with its delete control, the official Steam badge. */

.page-support .sup-help {
    padding-top: calc(var(--section) * .5);
}

.page-support .sup-help-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 1024px) {
    .page-support .sup-help-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.page-support .sup-help-grid > li {
    display: grid;
    min-width: 0;
    container-type: inline-size;
}

.page-support .sup-help-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    gap: var(--space-xs);
    align-content: start;
}

.page-support .sup-help-card p {
    text-wrap: balance;
}

.page-support .sup-help-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6.5rem;
    margin-bottom: var(--space-xs);
    padding: var(--space-s);
    border-radius: var(--r-sm);
    background:
        radial-gradient(circle, color-mix(in srgb, var(--trace) 20%, transparent) 0 .75px, transparent 1.25px) 50% 50% / 12px 12px,
        color-mix(in srgb, var(--substrate) 72%, transparent);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow var(--dur-3);
}

.page-support .sup-help-card:is(:hover, :focus-visible) .sup-help-mark {
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3);
}

.page-support .sup-help-mark svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* GreekGPT: voice → server → OpenAI → device, joined by a trace */
.page-support .sup-flow {
    gap: 0;
    color: var(--text-2);
}

.page-support .sup-flow-node {
    display: grid;
    justify-items: center;
    gap: .4rem;
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: .04em;
}

.page-support .sup-flow-node svg {
    box-sizing: content-box;
    width: 1.15rem;
    height: 1.15rem;
    padding: .5rem;
    color: var(--accent-text);
    border-radius: 50%;
    background: var(--laminate);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .4);
}

.page-support .sup-flow-wire {
    position: relative;
    flex: 1 1 0;
    min-width: .5rem;
    max-width: 4.5rem;
    height: 1px;
    margin-bottom: calc(var(--t-mono) * 1.5 + .4rem);   /* on the icons' centre line, above the labels */
    background: linear-gradient(90deg, var(--line-strong), rgba(var(--accent-rgb), .55), var(--line-strong));
}

/* a packet rides each wire while the card is hovered or focused */
.page-support .sup-flow-wire::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
    opacity: 0;
}

:root:not(.motion-off) .page-support .sup-help-card:is(:hover, :focus-visible) .sup-flow-wire::after {
    animation: sup-packet 1.2s var(--ease-io) infinite;
}

:root:not(.motion-off) .page-support .sup-help-card:is(:hover, :focus-visible) .sup-flow-wire:nth-of-type(4)::after { animation-delay: .25s; }
:root:not(.motion-off) .page-support .sup-help-card:is(:hover, :focus-visible) .sup-flow-wire:nth-of-type(6)::after { animation-delay: .5s; }

@keyframes sup-packet {
    0% { left: 0; opacity: 0; }
    15%, 80% { opacity: 1; }
    100% { left: calc(100% - 5px); opacity: 0; }
}

/* MAGO: an account chip with its delete control */
.page-support .sup-account-chip {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .55rem .7rem .55rem .55rem;
    border-radius: 999px;
    background: var(--laminate);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

.page-support .sup-account-avatar {
    width: 2.1rem;
    height: 2.1rem;
    padding: .35rem;
    box-sizing: border-box;
    color: var(--accent-text);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .4);
}

.page-support .sup-account-lines {
    display: grid;
    gap: .4rem;
}

.page-support .sup-account-lines span {
    display: block;
    width: 4.75rem;
    height: 5px;
    border-radius: 3px;
    background: var(--line-strong);
}

.page-support .sup-account-lines span + span {
    width: 3.25rem;
    background: var(--line);
}

.page-support .sup-account-delete {
    width: 2.1rem;
    height: 2.1rem;
    padding: .45rem;
    box-sizing: border-box;
    color: var(--short);
    border-radius: 50%;
    background: color-mix(in srgb, var(--short) 10%, transparent);
    transition: background-color var(--dur-2), box-shadow var(--dur-2);
}

.page-support .sup-help-card:is(:hover, :focus-visible) .sup-account-delete {
    background: color-mix(in srgb, var(--short) 18%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--short) 55%, transparent), 0 0 14px color-mix(in srgb, var(--short) 30%, transparent);
}

/* Steam: the official badge, unaltered */
.page-support .sup-steam img {
    width: min(11rem, 78%);
    height: auto;
}

.page-support .sup-help-cta {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-top: auto;
    padding-top: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.page-support .sup-help-arrow {
    position: relative;
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    transition: width var(--dur-3) var(--ease-out);
}

.page-support .sup-help-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    rotate: 45deg;
    transform-origin: 100% 0;
}

.page-support .sup-help-card:is(:hover, :focus-visible) .sup-help-arrow {
    width: 2.75rem;
}

.page-support .sup-help-ext {
    font-size: 1.1em;
    letter-spacing: 0;
    transition: translate var(--dur-2) var(--ease-out);
}

.page-support .sup-help-card:is(:hover, :focus-visible) .sup-help-ext {
    translate: .15em -.15em;
}

/* one card per row (tablets, and the wide band's help column) and wide: mark | text */
@media (max-width: 1023.98px), (min-width: 2560px) and (min-aspect-ratio: 5/4) {
    @container (min-width: 34rem) {
        .page-support .sup-help-card {
            grid-template-columns: minmax(0, min(16rem, 38%)) minmax(0, 1fr);
            grid-template-rows: auto auto 1fr auto;
            column-gap: var(--space-l);
        }

        .page-support .sup-help-card > .sup-help-mark {
            grid-area: 1 / 1 / 5 / 2;
            margin-bottom: 0;
        }

        .page-support .sup-help-card > :not(.sup-help-mark, .visually-hidden) {
            grid-column: 2;
        }
    }
}


/* ---------- 7. Wide screens: one band [compose head | draft card | app help] ----
   From 2560px (where the wrap grows to 150rem) in landscape. */

@media (min-width: 2560px) and (min-aspect-ratio: 5/4) {
    .page-support .sup-desk {
        --desk-gap: clamp(3rem, 3vw, 7rem);
        display: grid;
        grid-template-columns: minmax(0, calc(90rem + var(--desk-gap))) minmax(0, 1fr);
        column-gap: var(--desk-gap);
        align-items: start;
        width: var(--wrap);
        margin-inline: auto;
    }

    .page-support .sup-desk > .section {
        padding-block: calc(var(--section) * .45) var(--section);
    }

    .page-support .sup-desk .wrap {
        width: 100%;
    }

    .page-support .sup-compose-grid {
        grid-template-columns: minmax(0, 34rem) minmax(0, 56rem);
        gap: var(--desk-gap);
    }

    .page-support .sup-help-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---------- 8. Modes --------------------------------------------------------- */

/* No JS: the photo keeps its own printed address, undimmed; the image fallback follows.
   The compose section offers the address and the topic tags instead of the draft tool. */
:root:not(.js) .page-support noscript {
    display: contents;
}

:root:not(.js) .page-support :is(.sup-js, .sup-sign-face, .sup-form) {
    display: none;
}

:root:not(.js) .page-support .sup-sign-photo img {
    filter: none;
}

.page-support .email-fallback {
    display: block;
    width: min(100%, 24rem);
    height: auto;
    margin-inline: auto;
    mix-blend-mode: screen;   /* the image's black ground drops out */
    /* fade the image's edges so only its neon line remains */
    -webkit-mask: linear-gradient(transparent, #000 34%, #000 66%, transparent), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(transparent, #000 34%, #000 66%, transparent), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-composite: intersect;
}

.page-support .sup-nojs {
    display: grid;
    gap: var(--space-s);
}

.page-support .sup-nojs .email-fallback {
    width: min(100%, 30rem);
    margin: calc(-1 * var(--space-s)) 0;
}

.page-support .sup-nojs-topics {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: .875rem;
    color: var(--text);
}

.page-support .sup-nojs-topics li {
    padding: .35rem .75rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Browsers without container units (Safari < 16): the plain photo, then the address as text below it */
@supports not (width: 1cqw) {
    .page-support .sup-sign {
        height: auto;
        margin: 0;
        -webkit-mask: none;
        mask: none;
    }

    .page-support .sup-sign-photo img {
        position: static;
        width: 100%;
        height: auto;
        filter: none;
    }

    .page-support .sup-sign-face {
        position: static;
        width: auto;
        height: auto;
    }

    .page-support .sup-sign-face::before,
    .page-support .sup-sign-face::after {
        display: none;
    }

    .page-support .sup-sign .email-address {
        max-width: none;
        font-size: clamp(1.25rem, 4vw, 2.5rem);
    }
}

@media (forced-colors: active) {
    .page-support .sup-ambient,
    .page-support .sup-traces,
    .page-support .sup-hero::before,
    .page-support .sup-hero::after,
    .page-support .sup-sign-photo,
    .page-support .sup-sign-face::before,
    .page-support .sup-sign-face::after {
        display: none;
    }

    .page-support .sup-sign {
        height: auto;
        margin: 0;
        container-type: inline-size;
        -webkit-mask: none;
        mask: none;
    }

    .page-support .sup-sign-face {
        position: static;
        width: auto !important;
        height: auto !important;
        transform: none !important;
        padding: 0;
    }

    .page-support .sup-sign .email-address {
        font-size: clamp(1.25rem, 6cqi, 3rem);
    }
}

@media (prefers-contrast: more) {
    .page-support .sup-title em {
        text-shadow: none;
    }

    .page-support .sup-sign .email-address {
        --tube-glow: none;
    }

    .page-support .sup-sign-face::before {
        background: var(--solder);
    }

    .page-support .sup-hero::after {
        display: none;
    }
}