/**
 * Happy Orbit Labs — site styles.
 *
 * Everything here sits on Halo tokens (halo/tokens.css). If a value is not a
 * `var(--halo-*)`, it is a screenshot mat colour chosen to match the ground of
 * the image it sits behind — see `.hol-mat--*` at the bottom. There should be
 * no other literal colours in this file.
 */

/* ── Page shell ─────────────────────────────────────────────────────── */

html {
    /* Dark is the identity — tell the browser so scrollbars and form controls
       match the ground rather than defaulting light. */
    color-scheme: dark;
    background: var(--halo-color-bg);
}

/* Stands in for HaloProvider's `.halo-root`, which every page is wrapped in
   upstream. These are its rules verbatim — notably `box-sizing: border-box`,
   which Halo's control heights assume, and the base text colour, which the
   live-text wordmark inherits. */
body {
    margin: 0;
    font-family: var(--halo-font-sans);
    font-size: var(--halo-text-md);
    font-weight: var(--halo-weight-regular);
    line-height: var(--halo-leading-normal);
    font-synthesis-weight: none;
    color: var(--halo-color-text);
    background-color: var(--halo-color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body *,
body *::before,
body *::after {
    box-sizing: border-box;
}

a {
    color: var(--halo-color-accent);
}

a:hover {
    color: var(--halo-color-accent-hover);
}

/* Declared even where the design has no inline links: content added later
   would otherwise render browser-default blue. */

.hol-page {
    position: relative;
    min-height: 100vh;
    background: var(--halo-color-bg);
    font-family: var(--halo-font-sans);
    /* `clip`, not `hidden`: `hidden` computes overflow-y to `auto`, which would
       make this wrapper a scroll container. `clip` still contains the orbit's
       outer moons and the Noat card's window where they run past the edge. */
    overflow-x: clip;
}

.hol-main {
    width: min(1180px, 92vw);
    margin: 0 auto;
    padding: var(--halo-space-6) 0 var(--halo-space-9);
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-9);
}

.hol-main--narrow {
    width: min(760px, 92vw);
    gap: var(--halo-space-7);
}

/* ── Back link ──────────────────────────────────────────────────────── */

.hol-back {
    display: inline-flex;
    align-items: center;
    gap: var(--halo-space-3);
    align-self: flex-start;
    text-decoration: none;
    color: var(--halo-color-text-muted);
    font-size: var(--halo-text-sm);
}

.hol-back:hover {
    color: var(--halo-color-text);
}

.hol-back img {
    display: block;
    width: auto;
    height: 22px;
}

/* ── Sections ───────────────────────────────────────────────────────── */

.hol-section {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-6);
}

.hol-section--tight {
    gap: var(--halo-space-5);
}

/* ── Type ───────────────────────────────────────────────────────────── */

/* Halo's Overline: one line, truncated rather than wrapped. Accent when it
   names the current thing, subtle otherwise. */
.hol-overline {
    display: block;
    min-width: 0;
    font-size: var(--halo-text-overline);
    line-height: 1.2;
    letter-spacing: var(--halo-tracking-caps);
    text-transform: uppercase;
    color: var(--halo-color-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hol-overline--lg {
    font-size: var(--halo-text-xs);
    font-weight: var(--halo-weight-medium);
}

.hol-overline--subtle {
    color: var(--halo-color-text-subtle);
}

/* Serif is for reading moments only — headings and names. Everything else,
   paragraphs included, stays in mono. */
.hol-h1 {
    margin: 0;
    font-family: var(--halo-font-serif);
    font-size: clamp(2.75rem, 6vw, var(--halo-serif-5xl));
    font-weight: 400;
    letter-spacing: var(--halo-tracking-serif);
    line-height: var(--halo-leading-display);
    color: var(--halo-color-text);
    max-width: 18ch;
    text-wrap: balance;
}

/* The home headline. A serif line in two halves: the second is italic and
   muted. */
.hol-display {
    margin: 0;
    font-family: var(--halo-font-serif);
    font-size: clamp(2.75rem, 7vw, var(--halo-serif-5xl));
    font-weight: 400;
    letter-spacing: var(--halo-tracking-serif);
    line-height: var(--halo-leading-display);
    color: var(--halo-color-text);
    text-wrap: balance;
}

.hol-display em,
.hol-cta__text h2 em {
    color: var(--halo-color-text-muted);
}

.hol-h1--legal {
    font-size: clamp(1.8rem, 4vw, var(--halo-text-4xl));
    max-width: none;
}

.hol-lede {
    margin: 0;
    max-width: 54ch;
    color: var(--halo-color-text-muted);
    font-size: var(--halo-text-lg);
    line-height: var(--halo-leading-normal);
    text-wrap: pretty;
}

.hol-note {
    margin: 0;
    max-width: 58ch;
    color: var(--halo-color-text-muted);
    font-size: var(--halo-text-md);
    line-height: var(--halo-leading-normal);
    text-wrap: pretty;
}

.hol-meta {
    color: var(--halo-color-text-subtle);
    font-size: var(--halo-text-sm);
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.hol-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--halo-space-8);
    align-items: center;
}

.hol-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-5);
}

/* Bare by default: most hero PNGs are device mocks that already carry their own
   bezel, so a figure frame would draw a second one around the first. */
.hol-hero__figure {
    margin: 0;
    justify-self: end;
    width: 100%;
    max-width: var(--hol-hero-figure-max, 340px);
}

.hol-hero__figure img,
.hol-hero__figure video {
    display: block;
    width: 100%;
    height: auto;
}

/* DVC Cam's hero is a recording of the app filtering real footage rather than a still,
   because a camera app that only ever sits still is a strange thing to advertise. The
   still is the poster, and it takes over when the reader has asked for less motion —
   the video carries preload="none", so in that case it is never fetched at all. */
/* Scoped to the figure on purpose: `.hol-hero__figure img` above is (0,1,1) and beats a bare
   `.hol-hero__still` at (0,1,0), which shipped once and drew the video and the still stacked. */
.hol-hero__figure .hol-hero__still {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .hol-hero__figure .hol-hero__video {
        display: none;
    }

    .hol-hero__figure .hol-hero__still {
        display: block;
    }
}

/* Every hero is now a real capture off a device, with no bezel of its own, so the
   markup supplies one — at an actual iPhone corner radius. The drop-shadow treatment
   that went with the bezelled design mocks is gone with them. */
.hol-hero__figure--device {
    border-radius: 34px;
    overflow: hidden;
    box-shadow:
        0 0 0 var(--halo-border-width) var(--halo-color-border),
        var(--halo-shadow-xl);
}

/* A Mac window capture, wider than a phone and with a window's corner rather
   than a phone's. */
.hol-hero__figure--window {
    --hol-hero-figure-max: 680px;
    border-radius: var(--halo-radius-lg);
    overflow: hidden;
    box-shadow:
        0 0 0 var(--halo-border-width) var(--halo-color-border),
        var(--halo-shadow-xl);
}

/* A landscape hero needs a wider column before it shares the row. */
.hol-hero--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}

.hol-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--halo-space-3);
}

.hol-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--halo-space-4);
}

.hol-actions--spaced {
    margin-top: var(--halo-space-2);
}

/* Apple's badge is hot-linked from Apple, per their guidelines. */
.hol-appstore {
    display: inline-block;
    line-height: 0;
}

.hol-appstore img {
    width: 180px;
    height: auto;
    border-radius: var(--halo-radius-md);
    border: var(--halo-border-width) solid var(--halo-color-border);
}

/* ── Feature cards ──────────────────────────────────────────────────── */

.hol-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--halo-space-5);
}

/* Window captures need the width: at most three across. */
.hol-cards--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* Four features: two by two, then one row, so a fourth card never sits alone under three. */
.hol-cards--four {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
    .hol-cards--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1040px) {
    .hol-cards--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.hol-feature {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hol-feature__text {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-3);
    padding: var(--halo-space-5);
}

.hol-feature__text h3 {
    margin: 0;
    font-family: var(--halo-font-serif);
    font-size: var(--halo-serif-md);
    font-weight: 400;
    letter-spacing: var(--halo-tracking-serif);
    line-height: 1.1;
    color: var(--halo-color-text);
}

.hol-feature__text p {
    margin: 0;
    color: var(--halo-color-text-muted);
    font-size: var(--halo-text-md);
    line-height: var(--halo-leading-normal);
    text-wrap: pretty;
}

.hol-feature__media {
    margin-top: auto;
    height: 300px;
    overflow: hidden;
    border-top: var(--halo-border-width) solid var(--halo-color-border);
}

.hol-feature__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Real captures, shown whole rather than cropped to the band a mock can spare. */
.hol-feature__media--full {
    height: auto;
}

/* A full-bleed capture runs to the card's bottom edge, where the card's radius
   clips two rounded notches out of it. On a screenshot with the app's dark
   ground that is invisible against the page; on the light accent of the "NOW"
   screen it reads as a cut corner, and the three cards stop matching. Squaring
   the bottom corners costs nothing on the dark ones and settles it. */
.halo-card:has(> .hol-feature > .hol-feature__media--full) {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.hol-feature__media--full img {
    height: auto;
    object-fit: fill;
}

/* A window capture sits inset on the card, shown whole with its own corners. */
.hol-feature__media--inset {
    padding: var(--halo-space-4);
}

.hol-feature__media--inset img {
    border-radius: 8px;
}

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

/* Native <details>, with the disclosure marker replaced by + / −. No JS. */
.hol-faq {
    border-bottom: var(--halo-border-width) solid var(--halo-color-border);
    padding: var(--halo-space-4) 0;
}

.hol-faq summary {
    cursor: pointer;
    list-style: none;
    color: var(--halo-color-text);
    font-size: var(--halo-text-md);
}

.hol-faq summary::-webkit-details-marker {
    display: none;
}

.hol-faq summary::after {
    content: "+";
    float: right;
    color: var(--halo-color-text-subtle);
}

.hol-faq[open] summary::after {
    content: "−";
}

.hol-faq p {
    margin: var(--halo-space-4) 0 0;
    color: var(--halo-color-text-muted);
    font-size: var(--halo-text-md);
    line-height: var(--halo-leading-normal);
    max-width: 62ch;
}

/* ── Closing CTA band ───────────────────────────────────────────────── */

.hol-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--halo-space-6);
    padding: var(--halo-space-7);
    background: var(--halo-color-accent-subtle);
}

.hol-cta__text {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-3);
}

.hol-cta__text h2 {
    margin: 0;
    font-family: var(--halo-font-serif);
    font-size: var(--halo-serif-lg);
    font-weight: 400;
    letter-spacing: var(--halo-tracking-serif);
    line-height: 1.1;
    color: var(--halo-color-text);
}

.hol-cta__text p {
    margin: 0;
    max-width: 46ch;
    color: var(--halo-color-text-muted);
    font-size: var(--halo-text-md);
    line-height: var(--halo-leading-normal);
}

/* ── Beta sign-up ───────────────────────────────────────────────────── */

/* The closing band carries the form itself; the hero button jumps here. Two
   columns — the pitch, then the form — stacking when there's no room. */
.hol-cta--form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    align-items: start;
    gap: var(--halo-space-7);
}

.hol-cta--form .hol-cta__text h2 {
    font-size: var(--halo-serif-xl);
    line-height: var(--halo-leading-display);
}

#beta {
    scroll-margin-top: var(--halo-space-7);
}

.hol-beta {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-5);
}

/* The note's caption is a whole question; keep its last word company. */
.hol-beta .halo-label {
    text-wrap: balance;
}

.hol-beta .hol-meta a {
    color: inherit;
}

.hol-beta .hol-meta a:hover {
    color: var(--halo-color-text);
}

/* Off-screen rather than display:none — some bots skip hidden fields. */
.hol-beta__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.hol-footer {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-5);
}

.hol-footer__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--halo-space-5);
    font-size: var(--halo-text-sm);
}

.hol-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--halo-space-5);
}

.hol-footer a {
    color: var(--halo-color-text-muted);
    text-decoration: none;
}

.hol-footer a:hover {
    color: var(--halo-color-text);
}

.hol-footer span {
    color: var(--halo-color-text-subtle);
}

/* ── Privacy ────────────────────────────────────────────────────────── */

.hol-legal-header {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-4);
}

.hol-legal {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-6);
    color: var(--halo-color-text-muted);
    font-size: var(--halo-text-md);
    line-height: var(--halo-leading-normal);
}

.hol-legal > p {
    margin: 0;
}

.hol-legal section {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-3);
}

.hol-legal h2 {
    margin: 0;
    font-family: var(--halo-font-serif);
    font-size: var(--halo-text-lg);
    font-weight: 400;
    letter-spacing: var(--halo-tracking-serif);
    color: var(--halo-color-text);
}

.hol-legal p {
    margin: 0;
}

.hol-legal ul {
    margin: 0;
    padding-left: var(--halo-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-2);
}

/* ── Home: top band ─────────────────────────────────────────────────── */

@keyframes hol-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* The page's one piece of paper: Halo's dot grid, behind the hero only, solid
   for the first third and fading out down the band. On a layer of its own so
   the mask fades the dots and not the hero above them. */
.hol-top {
    position: relative;
}

.hol-top::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(
        circle at calc(var(--halo-paper-pitch) / 2) calc(var(--halo-paper-pitch) / 2),
        var(--halo-color-border) var(--halo-paper-dot),
        transparent 1.3px
    );
    background-size: var(--halo-paper-pitch) var(--halo-paper-pitch);
    mask-image: linear-gradient(#000 35%, transparent);
}

.hol-top__inner {
    position: relative;
    z-index: 1;
    width: min(1200px, 92vw);
    margin: 0 auto;
    padding: var(--halo-space-6) 0 var(--halo-space-8);
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 6vw, 72px);
}

/* No nav: the lockup is the only thing in the top bar. */
.hol-lockup {
    display: flex;
    align-items: center;
    gap: var(--halo-space-4);
    align-self: flex-start;
    text-decoration: none;
    color: var(--halo-color-text);
    font-size: var(--halo-text-lg);
    font-weight: var(--halo-weight-heading);
    letter-spacing: -0.045em;
    white-space: nowrap;
}

.hol-lockup:hover {
    color: var(--halo-color-text);
}

.hol-lockup img {
    display: block;
    width: 34px;
    height: auto;
}

.hol-lockup__labs {
    color: var(--halo-color-accent);
}

.hol-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--halo-space-8);
    align-items: center;
}

@media (min-width: 1000px) {
    .hol-intro {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }
}

.hol-intro__text {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-6);
    animation: hol-rise 800ms cubic-bezier(0.2, 0, 0, 1) both;
}

.hol-intro__origin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--halo-space-3);
}

/* The origin line has to be read whole, so it wraps rather than truncating. */
.hol-intro__origin .hol-overline {
    white-space: normal;
}

/* An inline SVG rather than 🇨🇦, which Windows draws as the letters "CA". Its
   red and white are the flag's own, like the colours inside the logo SVGs. */
.hol-flag {
    display: block;
    flex: none;
    width: 20px;
    height: 10px;
    border-radius: 1px;
}

/* ── Home: orbit ────────────────────────────────────────────────────── */

/* Safari (26) gets `tan(atan2())` wrong when a container unit goes into it
   raw — the scale comes out negative and several times too big, which throws
   the whole orbit off the page. Registered as a length, the column's width
   reaches the maths already resolved to pixels. */
@property --orbit-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 640px;
}

/* The stage is drawn at 640 × 640 and scaled to the column. The visible box is
   shorter than the stage, which is lifted by 19% so the rings sit tight under
   the headline. `tan(atan2())` turns the two lengths into a plain ratio, which
   `scale` needs and a length division can't give yet. */
.hol-orbit {
    container-type: inline-size;
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 1 / 0.62;
}

.hol-orbit__stage {
    --orbit-width: 100cqw;
    --orbit-scale: tan(atan2(var(--orbit-width), 640px));
    position: absolute;
    top: 0;
    left: 0;
    width: 640px;
    height: 640px;
    transform-origin: 0 0;
    transform: translateY(calc(-121.6px * var(--orbit-scale)))
        scale(var(--orbit-scale));
}

/* Stacked, the stage's empty top band overlaps the headline above it — so
   only the moons take clicks. */
.hol-orbit__stage,
.hol-orbit__track {
    pointer-events: none;
}

.hol-orbit__stage svg {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.hol-ring {
    fill: none;
    stroke: var(--halo-color-border);
    stroke-width: 1;
}

.hol-ring--near {
    stroke: var(--halo-color-border-strong);
}

.hol-ring--far {
    stroke-dasharray: 2 5;
}

.hol-orbit__halo {
    fill: none;
    stroke: var(--halo-color-accent);
    stroke-width: 1.5;
}

.hol-orbit__core {
    fill: var(--halo-color-text);
}

.hol-orbit__track {
    position: absolute;
    inset: 0;
    transform: rotate(var(--tilt));
}

@keyframes hol-orbit {
    from {
        offset-distance: 0%;
    }
    to {
        offset-distance: 100%;
    }
}

.hol-moon {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: auto;
    offset-rotate: 0deg;
    animation: hol-orbit linear infinite;
    text-decoration: none;
}

/* Every moon stops while the pointer is over the orbit, so they're easy to catch. */
.hol-orbit:hover .hol-moon {
    animation-play-state: paused;
}

.hol-moon__pill {
    display: flex;
    align-items: center;
    gap: var(--halo-space-3);
    padding: 7px 13px;
    transform: rotate(calc(-1 * var(--tilt)));
    white-space: nowrap;
    background: var(--halo-color-surface-raised);
    border-radius: var(--halo-radius-full);
    box-shadow: var(--halo-shadow-md);
    color: var(--halo-color-text);
    font-size: var(--halo-text-xs);
    letter-spacing: var(--halo-tracking-caps);
    text-transform: uppercase;
    transition:
        box-shadow 160ms cubic-bezier(0.2, 0, 0, 1),
        color 160ms;
}

.hol-moon__pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--halo-color-success);
}

.hol-moon__pill--soon {
    color: var(--halo-color-text-muted);
}

.hol-moon__pill--soon::before {
    background: var(--halo-color-warning);
}

.hol-moon:hover .hol-moon__pill {
    box-shadow:
        0 0 0 1px var(--halo-color-accent),
        0 16px 40px rgb(0 0 0 / 0.55);
}

/* ── Home: app cards ────────────────────────────────────────────────── */

.hol-home {
    width: min(1200px, 92vw);
    margin: 0 auto;
    padding-bottom: var(--halo-space-9);
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-9);
}

.hol-home__section {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-7);
    scroll-margin-top: var(--halo-space-7);
}

/* Three across on a desktop, so six apps make two rows. */
.hol-apps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: var(--halo-space-6);
}

/* The whole card is the link. */
.hol-app {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-4);
    padding: var(--halo-space-7) var(--halo-space-7) 0;
    background: var(--halo-color-bg);
    border-radius: var(--halo-radius-lg);
    box-shadow: var(--halo-shadow-sm);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1);
}

.hol-app:hover {
    box-shadow: var(--halo-shadow-lg);
}

.hol-app__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--halo-space-4);
}

.hol-app__name {
    margin: 0;
    font-family: var(--halo-font-serif);
    font-size: var(--halo-serif-xl);
    font-weight: 400;
    letter-spacing: var(--halo-tracking-serif);
    line-height: var(--halo-leading-display);
    color: var(--halo-color-text);
}

.hol-app__desc {
    color: var(--halo-color-text-muted);
    font-size: var(--halo-text-md);
    line-height: var(--halo-leading-normal);
    text-wrap: pretty;
}

.hol-app__window {
    display: block;
    height: 280px;
    margin-top: var(--halo-space-5);
    overflow: hidden;
}

.hol-app__shot {
    display: block;
    width: 62%;
    height: auto;
    margin: 14px auto 0;
    transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
}

.hol-app:hover .hol-app__shot {
    transform: translateY(-14px);
}

/* A Mac window, wider than the card: it starts at the left edge and runs off
   the right. */
.hol-app__shot--window {
    width: 118%;
    max-width: none;
    margin: 34px 0 0;
    border-radius: var(--halo-radius-md);
    box-shadow: var(--halo-shadow-lg);
}

/* ── Home: say hi ───────────────────────────────────────────────────── */

.hol-hi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--halo-space-5);
    padding: var(--halo-space-8) 0;
    text-align: center;
    scroll-margin-top: var(--halo-space-7);
}

.hol-hi__label {
    display: flex;
    align-items: center;
    gap: var(--halo-space-2);
    font-size: var(--halo-text-sm);
    line-height: 1;
}

.hol-hi__mail {
    font-family: var(--halo-font-serif);
    font-size: clamp(34px, 6vw, var(--halo-serif-4xl));
    letter-spacing: var(--halo-tracking-serif);
    line-height: 1.1;
    color: var(--halo-color-text);
    text-decoration: none;
    border-bottom: var(--halo-border-width-thick) solid var(--halo-color-accent);
    overflow-wrap: anywhere;
}

.hol-hi__mail:hover {
    color: var(--halo-color-text);
}

.hol-hi__note {
    color: var(--halo-color-text-muted);
    font-size: var(--halo-text-md);
    line-height: var(--halo-leading-normal);
}

/* ── Home: footer ───────────────────────────────────────────────────── */

.hol-home-footer {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-5);
}

.hol-home-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--halo-space-4);
    color: var(--halo-color-text-subtle);
    font-size: var(--halo-text-sm);
}

/* The only place the home page links Privacy from. */
.hol-home-footer__privacy {
    color: var(--halo-color-text-subtle);
    text-decoration: none;
    border-bottom: var(--halo-border-width) solid var(--halo-color-border);
    padding-bottom: 1px;
}

.hol-home-footer__privacy:hover {
    color: var(--halo-color-text-subtle);
}

@media (prefers-reduced-motion: reduce) {
    .hol-moon {
        animation-play-state: paused;
    }

    .hol-intro__text {
        animation: none;
    }

    .hol-app,
    .hol-app__shot,
    .hol-moon__pill {
        transition: none;
    }
}

/* ── Screenshot mats ────────────────────────────────────────────────── */

/* The only non-token colours on the site. Each matches the ground of the
   screenshot sitting on it, so the seam between image and page disappears. */
.hol-mat--black { background: #000; }
.hol-mat--deep { background: #101120; }
.hol-mat--surface { background: var(--halo-color-surface); }
.hol-mat--bg { background: var(--halo-color-bg); }