/* zoompilot.ai: one stylesheet for every page (zoompilot, jetlink).
   pages differ only in color: the paint vars below theme everything, and a
   page can repaint them (see the jetlink block at the end). */
/* the device's own faces (selfdrive/assets/fonts) */
@font-face {
    font-family: "Audiowide";
    src: url("fonts/Audiowide-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("fonts/Inter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("fonts/Inter-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("fonts/Inter-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

:root {
    /* the 2022-2025 CX-5 paint line: base, highlight, shadow, and
       a text-legible tint per paint. the ONE definition for the page;
       the logo files in assets/logo carry baked-in copies. */
    --p46v: #a01c2f;
    --p46v-hi: #d0414f;
    --p46v-lo: #5f0d1a;
    --p46v-t: #e05a6b;
    --p45p: #85898e;
    --p45p-hi: #a9adb2;
    --p45p-lo: #54575b;
    --p45p-t: #b0b4b9;
    --p47c: #566269;
    --p47c-hi: #79868f;
    --p47c-lo: #333d43;
    --p47c-t: #9fb0b5;
    --p45b: #2e5a8b;
    --p45b-hi: #4a7fb8;
    --p45b-lo: #17304d;
    --p45b-t: #6ea3dd;
    --p46g: #55585a;
    --p46g-hi: #777b7e;
    --p46g-lo: #323436;
    --p46g-t: #9da2a6;
    --p25d: #f3f2ed;
    --p25d-hi: #ffffff;
    --p25d-lo: #cfceca;
    --p25d-t: #f3f2ed;
    --p42m: #1c2f4e;
    --p42m-hi: #33507e;
    --p42m-lo: #0e1728;
    --p42m-t: #7f9dcb;
    --p41w: #121316;
    --p41w-hi: #2c2e33;
    --p41w-lo: #000000;
    --p41w-t: #aab2bd;
    --ink-dark: #14161a; /* text on the light paints */
    /* the hero Z's two departures from the line: soul red pushed
       the way the real paint photographs (hot highlight, near-black
       shadow), and 41W lifted a step so it holds on the dark page */
    --z46v: #9e1024;
    --z46v-hi: #e3303c;
    --z46v-lo: #2e020a;
    --z41w-hi: #3a3d44;

    /* the chosen paint. default 46G: must agree with the
       aria-pressed chip + its caption in the hero; the page's theme-color
       meta is a hand-computed --bg snapshot for it. */
    --paint: var(--p46g);
    --paint-hi: var(--p46g-hi);
    --paint-lo: var(--p46g-lo);
    --accent: var(--p46g-t);
    --cta-text: #fff;

    /* everything derived from the paint */
    --bg: color-mix(in srgb, var(--paint) 18%, #04060a);
    --glow: color-mix(in srgb, var(--paint-hi) 30%, transparent);
    --hair: color-mix(in srgb, var(--accent) 26%, transparent);
    --hair-strong: color-mix(
        in srgb,
        var(--accent) 44%,
        transparent
    );

    /* constants: the device screen stays jet black in any car */
    --card: #07080a;
    --text: rgba(255, 255, 255, 0.93);
    --dim: #a9aeb8;
    --faint: #8a92a0;
    --warn: #e8a13c; /* hazard amber for the alpha callouts */

    --body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --mono:
        "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --col: 58rem;
    --gutter: 1.4rem;
    --edge: max(var(--gutter), calc((100vw - var(--col)) / 2));
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    background:
        radial-gradient(
                80rem 42rem at 74% -12rem,
                var(--glow),
                transparent 70%
            )
            no-repeat,
        var(--bg);
    color: var(--dim);
    font-family: var(--body);
    font-size: 1.02rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.45s ease;
}
::selection {
    background: var(--paint);
    color: var(--cta-text);
}

a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--hair-strong);
    text-underline-offset: 3px;
}
a:hover {
    text-decoration-color: var(--accent);
}
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
    border-radius: 6px;
}
strong {
    color: var(--text);
    font-weight: 600;
}
code {
    font-family: var(--mono);
}

/* ================= top bar ================= */
.topbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    padding: 1.4rem var(--edge) 1.1rem;
    border-bottom: 1px solid var(--hair);
}
.topbar .id {
    font-family: "Audiowide", var(--body);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    color: var(--text);
}
/* the sites, side by side: zoompilot | jetlink, the current one lit */
.topbar .id a {
    color: var(--faint);
    text-decoration: none;
}
.topbar .id a:hover,
.topbar .id a[aria-current="page"] {
    color: var(--text);
}
.topbar .id .sep {
    margin: 0 0.6em;
    color: var(--faint);
    opacity: 0.6;
}
.topbar nav {
    display: flex;
    align-items: baseline;
    gap: 1.35rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}
.topbar nav a {
    color: var(--faint);
    text-decoration: none;
}
.topbar nav a:hover {
    color: var(--text);
}
/* the two places to find us: brighter, set off from the section links */
.topbar nav a.ext {
    color: var(--text);
}
.topbar nav a:not(.ext) + a.ext {
    margin-left: 0.6rem;
}

/* ================= hero: the chip wall ================= */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 2.5rem 4rem;
    padding: 4.2rem var(--edge) 3.4rem;
    /* the wordmark's size; the Z lines its top up with the
       top of the lettering, 0.095em below the h1's box */
    --mark: clamp(2.6rem, 6.5vw, 4.6rem);
    --mark-top: calc(0.7rem + 0.095 * var(--mark));
}
h1.mark {
    margin-top: 0.7rem;
    font-family: "Audiowide", var(--body);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1;
    font-size: var(--mark);
    color: var(--text);
}
.hero-copy .tagline {
    margin-top: 1rem;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}
.hero-copy p.lede {
    margin-top: 1.1rem;
    max-width: 32em;
    font-size: 0.98rem;
}
/* the cars it runs on: one badge each, no breakdown */
.cars {
    list-style: none;
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.55rem;
    /* evenly spaced, and narrow enough to wrap as the three
       Mazdas over the two wider badges */
    max-width: 24rem;
}
/* the label takes a line of its own */
.cars::before {
    content: "supported vehicles";
    flex-basis: 100%;
    margin-bottom: 0.1rem;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--faint);
}
.cars li {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text);
    padding: 0.34rem 0.85rem;
    background: color-mix(in srgb, var(--paint) 14%, transparent);
    border: 1px solid var(--hair-strong);
    border-radius: 999px;
}
.cta-row {
    margin-top: 1.8rem;
    display: flex;
    align-items: center;
    gap: 1.3rem;
    flex-wrap: wrap;
}
/* anything dipped in the chosen paint: hero cta + copy button */
.cta,
.urlbar button {
    font-weight: 600;
    color: var(--cta-text);
    background: linear-gradient(
        180deg,
        var(--paint-hi),
        var(--paint) 55%,
        var(--paint-lo)
    );
    border-radius: 999px;
}
.cta:hover,
.urlbar button:hover {
    filter: brightness(1.1);
}
.cta {
    display: inline-block;
    text-decoration: none;
    font-size: 0.96rem;
    padding: 0.85rem 2.2rem;
    box-shadow:
        0 6px 22px color-mix(in srgb, var(--paint) 40%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.cta-row .alt {
    font-size: 0.88rem;
    color: var(--text);
}

/* the paint wall: the zoompilot Z, one chip for each paint in
   the 2022-2025 CX-5 line. tap one and the page wears it. on load it
   plays the icon's intro: the chips boot in along the stroke, soul
   red lands at the apex with a glow, then a studio light runs the Z
   and leaves its reflection behind. */
/* the Z's top meets the top of the wordmark and the caption
   sits on the cta row's centre line */
.paintwall {
    justify-self: end;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    width: min(20.5rem, 100%);
}
.zmark {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--mark-top);
    overflow: visible;
}
.zmark .chip {
    cursor: pointer;
    outline: none;
}
.zmark .ring {
    fill: none;
    stroke: var(--text);
    stroke-width: 2.4;
    opacity: 0;
}
.zmark .chip[aria-pressed="true"] .ring {
    opacity: 1;
}
.zmark .chip:focus-visible .ring {
    opacity: 1;
    stroke: var(--accent);
    stroke-dasharray: 5 4;
}
.zmark .lit {
    fill: #fff;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.zmark .chip:hover .lit {
    opacity: 0.1;
}
.zmark .bloom {
    opacity: 0;
}
/* the reflection line along the stroke. each path carries its
   dash offsets from before (--a) and after (--b) the sweep */
.zmark .light path {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-dashoffset: var(--b);
}
.zmark .rest {
    stroke-width: 34;
    opacity: 0.36;
    filter: url(#zglow);
}
.zmark .rest.hair {
    stroke-width: 3.5;
    opacity: 0.38;
    filter: url(#zhair);
}
.zmark .sweep {
    stroke-width: 55;
    opacity: 0.52;
    filter: url(#zwide);
}
.zmark .sweep.hair {
    stroke-width: 7;
    opacity: 0.9;
    filter: url(#zhair);
}

.wearing {
    /* half the cta's height less half this line's */
    margin-bottom: calc((3.236rem - 1.248rem) / 2);
    /* right edge under the bottom row's last corner */
    margin-right: 19.2%;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--text);
    text-align: right;
}
.wearing::before {
    content: "wearing ";
    color: var(--faint);
}

/* the intro, timed like the icon's (zoompilot-intro) minus its
   studio fade-in */
@keyframes zfade {
    from {
        opacity: 0;
    }
    55% {
        opacity: 1;
    }
}
@keyframes zrise {
    from {
        translate: 0 20px;
    }
}
@keyframes zgrow {
    from {
        scale: 0.94;
    }
}
@keyframes zbloom {
    50% {
        opacity: 0.55;
    }
}
@keyframes zrun {
    from {
        stroke-dashoffset: var(--a);
    }
    to {
        stroke-dashoffset: var(--b);
    }
}
.zmark .chip,
.zmark .shadows rect {
    transform-box: fill-box;
    transform-origin: center;
    animation:
        zfade 0.6s linear both,
        zrise 0.6s cubic-bezier(0.33, 1, 0.68, 1) both,
        zgrow 0.6s cubic-bezier(0.34, 1.45, 0.64, 1) both;
    animation-delay: calc(0.15s + var(--i) * 0.09s);
}
.zmark .bloom {
    animation: zbloom 1.2s ease-in-out 0.68s;
}
.zmark .light path {
    animation: zrun 1.4s cubic-bezier(0.37, 0, 0.63, 1) 1.4s both;
}
@media (prefers-reduced-motion: reduce) {
    .zmark * {
        animation: none !important;
    }
    .zmark .lit {
        transition: none;
    }
}

/* a page's own art in the hero's right column (jetlink's icon) */
.hero-art {
    justify-self: end;
    width: min(20.5rem, 100%);
}
.hero-art img {
    display: block;
    width: 100%;
    height: auto;
}

/* ================= sections: plain flow ================= */
main > section {
    padding: 3.4rem var(--edge) 0.6rem;
}
.idx {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    color: var(--accent);
}
/* an eyebrow standing in for a title */
h2.idx {
    margin-top: 0;
    font-weight: 400;
    line-height: 1.6;
}
.idx.warn-text {
    color: var(--warn);
}
main h2 {
    margin-top: 0.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: clamp(1.55rem, 3.2vw, 2.05rem);
    color: var(--text);
}
main h3 {
    margin-top: 2rem;
    font-size: 1rem;
    color: var(--text);
}
.intro {
    margin-top: 0.7rem;
    max-width: 42em;
    font-size: 0.96rem;
}
main h3 + p,
main p.prose {
    margin-top: 0.6rem;
    max-width: 44em;
    font-size: 0.94rem;
    line-height: 1.6;
}
main p.prose + p.prose {
    margin-top: 0.7em;
}
.note {
    margin-top: 1.3rem;
    max-width: 44em;
    font-size: 0.9rem;
    color: var(--faint);
}
.warn {
    margin-top: 1.6rem;
    max-width: 44em;
    font-size: 0.94rem;
}
.warn strong {
    color: var(--warn);
}

/* the headline features: two columns of plain text, one rule on top */
dl.features {
    margin-top: 1.8rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--hair);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.7rem 3rem;
}
dl.features dt {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
    letter-spacing: -0.01em;
}
dl.features dt small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--faint);
}
dl.features dt small.warn-text {
    color: var(--warn);
}
dl.features dd {
    margin-top: 0.4rem;
    max-width: 32em;
    font-size: 0.94rem;
    line-height: 1.58;
}

/* feature ledger: one hairline row per item, no cards */
dl.ledger {
    margin-top: 1.5rem;
    border-top: 1px solid var(--hair);
}
dl.ledger > div {
    display: grid;
    grid-template-columns: minmax(11rem, 15rem) 1fr;
    gap: 0.4rem 2.2rem;
    padding: 1.05rem 0 1.15rem;
    border-bottom: 1px solid var(--hair);
}
dl.ledger dt {
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}
dl.ledger dt small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--faint);
}
dl.ledger dt small.warn-text {
    color: var(--warn);
}
dl.ledger dd {
    font-size: 0.94rem;
    line-height: 1.58;
    max-width: 40em;
}

/* ================= install ================= */
ol.steps {
    counter-reset: step;
    list-style: none;
    max-width: 44em;
    margin-top: 1.5rem;
    border-top: 1px solid var(--hair);
}
ol.steps > li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: 1rem;
    padding: 0.95rem 0 1.05rem;
    border-bottom: 1px solid var(--hair);
}
ol.steps > li::before {
    content: counter(step, decimal-leading-zero);
    font-size: 0.8rem;
    color: var(--accent);
    padding-top: 0.25rem;
}
/* a step's title: the bold line that opens it, not bold words within */
ol.steps > li > div > strong {
    display: block;
}
ol.steps span {
    font-size: 0.93rem;
}
/* the one piece of device chrome left: the url you type in */
.urlbar {
    margin-top: 0.9rem;
    max-width: 28rem;
    background: var(--card);
    border: 1px solid var(--hair);
    border-radius: 999px;
    padding: 0.6rem 0.6rem 0.6rem 1.3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.urlbar code {
    font-size: 0.95rem;
    color: var(--text);
    flex: 1 1 10rem;
    word-break: break-all;
}
.urlbar code::before {
    content: "> ";
    color: var(--faint);
}
.urlbar button {
    cursor: pointer;
    border: 0;
    font-family: var(--body);
    font-size: 0.85rem;
    padding: 0.55rem 1.3rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* the device demo, straight under the hero: the full column */
.demo {
    margin: 0 var(--edge);
}
.demo video {
    display: block;
    width: 100%;
    height: auto;
    background: #08090b; /* the video's own stage, so the poster gap never flashes */
    border: 1px solid var(--hair);
    border-radius: 0.9rem;
}
.demo figcaption {
    margin-top: 0.7rem;
    font-size: 0.8rem;
    color: var(--faint);
}
/* inside a section the section already carries the edge: the full column */
main > section .demo {
    margin: 1.4rem 0 0;
}
/* a row of plain links under a paragraph */
.links {
    margin-top: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.3rem;
    font-size: 0.9rem;
}

/* ================= folds: detail you can skip ================= */
.fold {
    margin-top: 1.4rem;
    max-width: 58rem;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}
.fold > summary {
    cursor: pointer;
    padding: 1rem 0 1.1rem;
    color: var(--text);
    font-weight: 600;
    list-style-position: inside;
}
.fold > summary::marker {
    color: var(--accent);
}
.fold[open] > summary {
    border-bottom: 1px solid var(--hair);
}
.fold > section {
    padding: 2.2rem 0 0.4rem;
}
.fold > section:last-child {
    padding-bottom: 0.4rem;
}
.fold > section:last-child dl.ledger > div:last-child {
    border-bottom: 0;
}
.fold > section > h3 {
    margin-top: 0.4rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.fold > ol.log {
    margin-top: 0;
    border-top: 0;
}

/* ================= changelog ================= */
.rel-line {
    margin-top: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 1rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}
.rel-line .ver {
    color: var(--accent);
    font-weight: 500;
}
.rel-line .stamp {
    color: var(--faint);
    text-decoration: none;
}
.rel-line .stamp::before {
    content: "build ";
}
.rel-line .stamp:hover {
    color: var(--text);
}
ul.bullets {
    margin-top: 1rem;
    max-width: 46em;
}
ol.log {
    list-style: none;
    margin-top: 1.5rem;
    max-width: 46em;
    border-top: 1px solid var(--hair);
}
ol.log li {
    display: grid;
    grid-template-columns: 7.2rem 1fr;
    gap: 1.1rem;
    padding: 0.95rem 0 1.05rem;
    border-bottom: 1px solid var(--hair);
}
ol.log time {
    font-family: var(--mono);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    color: var(--accent);
    padding-top: 0.25rem;
}
/* release identity: the version string is what the device's home
   screen shows, so it leads; the date is secondary. Entries from
   before the prebuilt channel have no version and keep a bare
   accent-colored date. */
ol.log .rel {
    display: grid;
    align-content: start;
    gap: 0.1rem;
    padding-top: 0.25rem;
}
ol.log .rel .ver {
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--accent);
}
ol.log .rel time {
    font-size: 0.7rem;
    color: var(--faint);
    padding-top: 0;
}
ol.log strong {
    display: block;
}
ol.log span {
    font-size: 0.92rem;
}
/* the changes themselves: one scannable line each */
ol.log ul,
ul.bullets {
    list-style: none;
    display: grid;
    gap: 0.5rem;
}
ol.log ul {
    margin-top: 0.85rem;
}
ol.log ul ul {
    margin-top: 0.5rem;
}
ol.log ul li,
ul.bullets li {
    display: block;
    position: relative;
    padding: 0 0 0 1rem;
    border: 0;
    font-size: 0.92rem;
    line-height: 1.55;
}
ol.log ul li::before,
ul.bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.65;
}
ol.log ul b,
ul.bullets b {
    color: var(--text);
    font-weight: 600;
}
ol.steps ul.bullets {
    margin-top: 0.8rem;
}
/* which settings panel the bullets below live in */
ol.steps .group {
    margin-top: 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
}
/* setting name on the left, what it does on the right: no bold needed */
ol.steps dl.settings {
    margin-top: 0.4rem;
}
ol.steps dl.settings > div {
    display: grid;
    grid-template-columns: minmax(9rem, 14.5rem) 1fr;
    gap: 0.15rem 1.2rem;
    padding: 0.32rem 0;
}
ol.steps dl.settings dt {
    color: var(--text);
}
ol.steps dl.settings dd {
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ================= footer ================= */
/* the paint line signs the page off, one band per color */
.paintline {
    margin-top: 5rem;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--p46v) 0 12.5%,
        var(--p45p) 0 25%,
        var(--p47c) 0 37.5%,
        var(--p45b) 0 50%,
        var(--p46g) 0 62.5%,
        var(--p25d) 0 75%,
        var(--p42m) 0 87.5%,
        var(--p41w) 0 100%
    );
}
.foot {
    padding: 2.3rem var(--edge) 3.2rem;
    font-size: 0.9rem;
}
.foot .thanks {
    max-width: 44em;
}
.foot p + p {
    margin-top: 0.8em;
}
.foot .signoff {
    margin-top: 2rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--accent);
}
.foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    margin-top: 1.4rem;
    font-size: 0.78rem;
}
.foot-links a[data-build] {
    color: var(--accent);
    font-family: var(--mono);
}

/* ================= reading comfort ================= */
/* even line breaks: no word stranded on a paragraph's last line, headings
   split into even lines */
h1,
h2,
h3,
.tagline {
    text-wrap: balance;
}
p,
li,
dd {
    text-wrap: pretty;
}
/* two-column rows: a faint tint under the row the pointer is on, so the eye
   keeps its place across the gap between label and text */
@media (hover: hover) {
    dl.ledger > div,
    ol.steps dl.settings > div {
        transition: background-color 0.15s ease;
    }
    dl.ledger > div:hover,
    ol.steps dl.settings > div:hover {
        background: color-mix(in srgb, var(--accent) 5%, transparent);
        box-shadow:
            -0.6rem 0 0 color-mix(in srgb, var(--accent) 5%, transparent),
            0.6rem 0 0 color-mix(in srgb, var(--accent) 5%, transparent);
    }
}
@media (prefers-reduced-motion: reduce) {
    dl.ledger > div,
    ol.steps dl.settings > div {
        transition: none;
    }
}

/* ================= responsive ================= */
@media (max-width: 860px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 3rem;
        padding-bottom: 3.4rem;
    }
    .paintwall,
    .hero-art {
        display: none;
    }
    dl.features {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
    dl.ledger > div,
    ol.steps dl.settings > div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    /* narrow screens: date on its own line so the change list
       gets the full width */
    ol.log > li {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
    ol.log time {
        padding-top: 0;
    }
    ol.log .rel {
        display: flex;
        gap: 0.5rem;
        align-items: baseline;
        padding-top: 0;
    }
    main > section {
        padding-top: 2.6rem;
    }
}
@media (max-width: 600px) {
    .topbar nav a:not(.ext):nth-child(n + 3) {
        display: none;
    }
}

/* skip link: off screen until focused */
.skip {
    position: absolute;
    top: -5rem;
    left: 1rem;
    z-index: 1;
    padding: 0.6rem 1rem;
    background: var(--bg);
    color: var(--text);
}
.skip:focus {
    top: 1rem;
}

/* ================= jetlink ================= */
/* the same page in jetlink's green. the button is the cable's bright green
   with dark ink, as on the jetlink app; the page itself stays a near-neutral
   dark with a hint of green, so body text reads as well as on zoompilot.
   theme-color on the jetlink page is this --bg, resolved by hand. */
:root[data-site="jetlink"] {
    --paint: #3fbf6a;
    --paint-hi: #7ceba0;
    --paint-lo: #25804a;
    --accent: #6ae58c;
    --cta-text: #0b1f13;
    --bg: color-mix(in srgb, #2e8a52 7%, #0b0d10);
    --glow: color-mix(in srgb, var(--paint-hi) 12%, transparent);
}
/* one green line instead of the eight paint bands */
[data-site="jetlink"] .paintline {
    background: linear-gradient(90deg, var(--paint-lo), var(--paint-hi));
}