/* ==========================================================================
   signmaster.com public site: tokens, header, footer and the front page.
   Design: docs/superpowers/specs/2026-10-22-public-site-overhaul-design.md

   COLORS LIVE ONLY IN THE TOKEN BLOCK BELOW. Change a color there and
   every page follows.

   SEASONS: /seasonal/<name>.css loads after this file. It overrides tokens
   and decorates only these named spots:
       .site-header   every page
       .home-hero     the front-page stage
       .site-band     a dark full-width band a page opts in with that class
       .site-footer   every page
       .site-ledge    the season's piece on the footer's ledge: it opens the season's game
   ========================================================================== */

:root {
    /* Brand: buttons and badges are orange with white text */
    --site-brand: #f26520;
    --site-brand-hover: #d34d0c;

    /* Ink on light surfaces */
    --site-ink: #26262b;
    --site-ink-soft: #55555f;
    --site-line: #d9dbe0;

    /* Light surfaces */
    --site-paper: #ffffff;
    --site-mist: #f4f6f7;

    /* Dark surfaces: graphite black, lit the way Halloween's night is (Tommy, 2026-10-22: "I love the
       halloween look"; slate's blue "sticks out too much", so "more black"). Not flat black: the
       orange glows against it like an ember. */
    --site-header-bg: #18181b;                /* the header; every dark band and the Full service panel follow it */
    --site-header-edge: rgba(242, 101, 32, 0.9);   /* a thin orange line under the header, brightest in the middle (Tommy) */
    --site-nav-current: rgba(255, 255, 255, 0.12);   /* the soft pill behind the current page in the nav */
    /* The header's text and logo. A season with a light header (Christmas) flips these. */
    --site-header-text: #ffffff;                     /* Sign in, the current page, the menu button */
    --site-header-text-soft: #ececf0;                /* the nav links and the phone menu's links */
    --site-header-text-muted: #9d9da6;               /* the phone menu's "Products" label */
    --site-header-hover: rgba(255, 255, 255, 0.08);  /* hover backgrounds, the phone menu's dividers */
    --site-header-current: var(--site-eyebrow);      /* the current page in the phone menu */
    --site-header-logo-dark: block;                  /* smlogo-on-dark.png shows... */
    --site-header-logo-light: none;                  /* ...smlogo-on-light.png doesn't */
    --site-coin-img: url("/assets/images/smlogo-on-dark.png");   /* the coin the easter egg flips: the visible logo's */
    /* What the coin lands on: a printer's registration mark. A season sets its own. */
    --site-coin-face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='19.5' fill='%23f26520'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='20' cy='20' r='9'/%3E%3Cpath d='M20 5v30M5 20h30'/%3E%3C/g%3E%3Cpath d='M20 11a9 9 0 0 1 9 9h-9zM20 29a9 9 0 0 1-9-9h9z' fill='%23fff'/%3E%3C/svg%3E");
    --site-stage-bg: var(--site-header-bg);   /* behind hero media while it loads */
    --site-video-bg: #111113;                 /* the video band, a shade deeper; the hero fades into it */
    --site-hero-tint: rgba(0, 0, 0, 0.56);    /* one flat overlay on the whole hero image whenever the words show: the old site's 56% (Tommy) */
    --site-band-bg: var(--site-header-bg);    /* every dark band... */
    --site-band-edge: transparent;            /* ...lit by glows, not an edge line, as Halloween's are */
    --site-band-glow-top: rgba(255, 255, 255, 0.08);   /* ...soft light at the top right */
    --site-band-glow-bottom: rgba(0, 0, 0, 0.45);      /* ...and a shadow at the bottom left: black, not orange (Tommy) */
    --site-footer-bg: #111113;                /* a shade deeper than the header, like the video band */

    /* Text on dark surfaces */
    --site-on-dark: #ffffff;
    --site-on-dark-soft: #d6d6dc;
    --site-on-dark-muted: #9d9da6;
    --site-eyebrow: #ffb37a;

    /* Sizes */
    --site-header-h: 72px;   /* slimmer (Tommy); 64px on narrow screens */
    --site-logo-h: 40px;     /* 32px on narrow screens, 28px under 360px */
    --site-max: 1240px;
    --site-gutter: 24px;
    --site-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (max-width: 959px) {
    :root { --site-header-h: 64px; --site-logo-h: 32px; }
}

/* The smallest phones: so the logo, Sign in and the menu button fit in one row */
@media (max-width: 359px) {
    :root { --site-logo-h: 28px; }
}

@media (max-width: 719px) {
    :root { --site-gutter: 20px; }
}


/* ---------- Base ---------- */

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

/* In-page links (#products, #video) land below the pinned header, not under it */
html { scroll-padding-top: var(--site-header-h); }

/* At least one screen tall, so a short page (sign-up, sign-in on a tall monitor)
   still ends with the footer at the bottom edge, at its own height */
body {
    margin: 0;
    font-family: var(--site-font);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* On a short page the block just above the footer stretches to fill the extra space,
   so the space keeps that block's colour instead of showing a band of page background */
body > :has(+ .site-footer) { flex-grow: 1; }

.site-wrap {
    max-width: var(--site-max);
    margin: 0 auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
}

.site-header :focus-visible,
.site-footer :focus-visible,
.site-home :focus-visible {
    outline: 3px solid var(--site-brand);
    outline-offset: 2px;
}

.site-skip {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--site-paper);
    color: var(--site-ink);
    font: 600 15px var(--site-font);
}

.site-skip:focus { left: 16px; }

/* Read by screen readers, not shown */
.site-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---------- Buttons ---------- */

.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 22px;
    border: 2px solid transparent;
    border-radius: 10px;
    font: 600 16px/1.2 var(--site-font);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.site-btn:hover { text-decoration: none; }

.site-btn--brand { background: var(--site-brand); color: #ffffff; }
.site-btn--brand:hover { background: var(--site-brand-hover); color: #ffffff; }

.site-btn--ink { background: var(--site-ink); color: #ffffff; }
.site-btn--ink:hover { background: #000000; color: #ffffff; }

.site-btn--outline-light { border-color: rgba(255, 255, 255, 0.85); color: #ffffff; background: transparent; }
.site-btn--outline-light:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }

.site-btn--outline-ink { border-color: var(--site-ink); color: var(--site-ink); background: transparent; }
.site-btn--outline-ink:hover { background: var(--site-ink); color: #ffffff; }

.site-btn--small {
    min-height: 42px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 15px;
}


/* ---------- Header ---------- */

/* Pinned to the top while the page scrolls, always the same size, so nothing jumps. On the front page it
   starts clear over the photo and takes its colour as the words reach it (the header over the photo, below). */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--site-header-bg);
    color: var(--site-header-text);
    font-family: var(--site-font);
}

/* The thin line under the header, fading out toward both sides (the same line tops each dark band) */
.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--site-header-edge) 50%, transparent);
}

/* The header over the photo. On the front page (index.cfm sets siteHdrOverHero) the photo fills the whole
   first screen and the header floats over it, clear: just the logo and the links, on the photo's overlay.
   site.js adds .is-solid once the words scrolling up over the photo reach the header's bottom edge (the page
   below them, when a campaign hides the words), or while a menu is open, and the header takes its colour.
   Only when scripts run: without site.js nothing
   would ever fill it in, so the header stays solid, as on every other page. */
@media (scripting: enabled) {
    .site-header--over-hero:not(.is-solid) {
        /* White text and the logo for dark grounds in every season: the photo under it is darkened */
        --site-header-text: var(--site-on-dark);
        --site-header-text-soft: var(--site-on-dark);
        --site-header-hover: rgba(255, 255, 255, 0.12);
        --site-nav-current: rgba(255, 255, 255, 0.16);
        --site-header-logo-dark: block;
        --site-header-logo-light: none;
        --site-coin-img: url("/assets/images/smlogo-on-dark.png");
        background: transparent;
        box-shadow: none;
    }

    /* The line under the header comes in with the colour */
    .site-header--over-hero:not(.is-solid)::after { opacity: 0; }

    /* Behind the flipping coin: the stage's dark colour, not the header's (a season's may be white) */
    .site-header--over-hero:not(.is-solid) .site-coin::before { background: var(--site-stage-bg); }
}

@media (prefers-reduced-motion: no-preference) {
    .site-header { transition: background-color 0.25s, box-shadow 0.25s; }
    .site-header::after { transition: opacity 0.25s; }
    .site-nav__link,
    .site-header__signin,
    .site-header__menu-btn { transition: color 0.25s; }
}

.site-header__bar {
    height: var(--site-header-h);
    display: flex;
    align-items: center;
    gap: 24px;
}

.site-header__logo {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
}

/* The logo without its tagline, drawn at 4x: smlogo-on-dark.png (grays lifted for a dark header)
   and smlogo-on-light.png (for a light one). The header tokens pick which shows. */
.site-header__logo img {
    display: block;
    height: var(--site-logo-h);
    width: auto;
}

.site-header__logo .site-logo--dark { display: var(--site-header-logo-dark); }
.site-header__logo .site-logo--light { display: var(--site-header-logo-light); }

/* The coin: on the front page, the fifth tap on the logo flips the coin (site.js) and it lands on the
   season's face. It sits over the logo's own coin, hidden until it spins. */
.site-coin {
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--site-logo-h);
    height: var(--site-logo-h);
    transform: translateY(-50%);
    perspective: 400px;
    pointer-events: none;
    visibility: hidden;
}

.site-coin.is-flipping { visibility: visible; }

/* The header's colour behind it, so the logo's own coin never shows through while it spins edge-on */
.site-coin::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--site-header-bg);
}

.site-coin__spin {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.site-coin__front,
.site-coin__back {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    backface-visibility: hidden;
    background: var(--site-coin-img) left center / auto 100% no-repeat;
}

.site-coin__back {
    transform: rotateY(180deg);
    background:
        var(--site-coin-face) center / 100% 100% no-repeat,
        var(--site-coin-img) left center / auto 100% no-repeat;
}

/* Two and a half turns, a beat on the face, then home */
.site-coin.is-flipping .site-coin__spin { animation: site-coin-flip 2.4s cubic-bezier(0.3, 0.1, 0.3, 1) both; }

@keyframes site-coin-flip {
    0%   { transform: rotateY(0deg); }
    35%  { transform: rotateY(900deg); }
    70%  { transform: rotateY(900deg); }
    100% { transform: rotateY(1440deg); }
}

/* Asked for less motion: the face just shows for a moment, no spin */
@media (prefers-reduced-motion: reduce) {
    .site-coin.is-flipping .site-coin__spin { animation: site-coin-show 2.4s steps(1, end) both; }
}

@keyframes site-coin-show {
    0%   { transform: rotateY(180deg); }
    90%  { transform: rotateY(0deg); }
    100% { transform: rotateY(0deg); }
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--site-header-text-soft);
    font: 500 16px/1.2 var(--site-font);
    text-decoration: none;
    cursor: pointer;
}

.site-nav__link:hover,
.site-nav__link[aria-expanded="true"] {
    background: var(--site-header-hover);
    color: var(--site-header-text);
    text-decoration: none;
}

/* The current page: a soft pill, the hover look kept on */
.site-nav__link[aria-current="page"] {
    background: var(--site-nav-current);
    color: var(--site-header-text);
}

.site-nav__caret { transition: transform 0.15s; }
.site-nav__link[aria-expanded="true"] .site-nav__caret { transform: rotate(180deg); }

.site-menu { position: relative; }

.site-menu__panel {
    position: absolute;
    top: calc((var(--site-header-h) + 100%) / 2 + 6px);   /* just under the header's edge */
    left: 0;
    min-width: 240px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border-radius: 12px;
    background: var(--site-paper);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.site-menu__panel[hidden] { display: none; }

.site-menu__panel a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--site-ink);
    font: 500 15px/1.3 var(--site-font);
    text-decoration: none;
}

.site-menu__panel a:hover { background: var(--site-mist); color: var(--site-ink); }
/* The current page: an orange bar, ink text (orange text on white is too faint to read) */
.site-menu__panel a[aria-current="page"] {
    background: linear-gradient(var(--site-brand), var(--site-brand)) left center / 3px 60% no-repeat;
    color: var(--site-ink);
    font-weight: 600;
}

.site-menu__panel a[aria-current="page"]:hover {
    background: linear-gradient(var(--site-brand), var(--site-brand)) left center / 3px 60% no-repeat, var(--site-mist);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.site-header__signin {
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--site-header-text);
    font: 600 16px/1.2 var(--site-font);
    text-decoration: none;
}

.site-header__signin:hover { background: var(--site-header-hover); color: var(--site-header-text); text-decoration: none; }

.site-header__menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--site-header-text);
    cursor: pointer;
}

.site-header__menu-btn .site-icon-close { display: none; }
.site-header__menu-btn[aria-expanded="true"] .site-icon-open { display: none; }
.site-header__menu-btn[aria-expanded="true"] .site-icon-close { display: block; }

.site-drawer {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - var(--site-header-h));
    overflow-y: auto;
    padding: 4px var(--site-gutter) 24px;
    background: var(--site-header-bg);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
}

.site-drawer[hidden] { display: none; }

.site-drawer__label {
    margin: 16px 0 2px;
    color: var(--site-header-text-muted);
    font: 600 12px/1.4 var(--site-font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-drawer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-drawer__list a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--site-header-hover);
    color: var(--site-header-text-soft);
    font: 500 17px/1.3 var(--site-font);
    text-decoration: none;
}

.site-drawer__list--products a { padding-left: 12px; font-size: 16px; }
.site-drawer__list a[aria-current="page"] { color: var(--site-header-current); }
.site-drawer .site-btn { width: 100%; margin-top: 18px; }

@media (max-width: 959px) {
    .site-nav,
    .site-header__join { display: none; }

    .site-header__bar { gap: 4px; }
    .site-header__logo { margin-right: auto; }
    .site-header__menu-btn { display: inline-flex; }
}

@media (min-width: 960px) {
    .site-drawer { display: none; }
}


/* ---------- Footer ---------- */

.site-footer {
    position: relative;
    margin-top: auto;   /* bottom of a short page even when the block above can't stretch (see body) */
    background: var(--site-footer-bg);
    color: var(--site-on-dark-muted);
    font: 400 14px/1.6 var(--site-font);
}

.site-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    padding-top: 28px;
    padding-bottom: 32px;
}

.site-footer a { color: #c4c4cc; }
.site-footer a:hover { color: #ffffff; }

.site-footer__social {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    text-decoration: none;
}

.site-footer__social a:hover { background: rgba(255, 255, 255, 0.08); }

/* A season's piece on the footer's ledge (footer.cfm, only while a season is on). The season's stylesheet
   shows it, draws it and places it, standing on the footer's top edge; a click opens the season's game
   (site.js). It wobbles when the pointer finds it (Motion, below): a hint that it does something. */
.site-ledge {
    display: none;
    position: absolute;
    z-index: 2;   /* over the bottom of the block above it, which may lift its own content to 1 */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform-origin: bottom center;
}

.site-ledge:focus-visible {
    outline: 2px solid var(--site-brand);
    outline-offset: 4px;
    border-radius: 8px;
}


/* ---------- Dark bands on the older pages ----------
   .site-band marks a dark full-width block so a season can find it.
   .site-band--lead is one that opens the page (sign-in, password reset).
   Its old 200px top padding cleared the floating nav; the header is in the
   flow now, so it only needs breathing room. */

/* Every dark band is the band colour with a thin edge line across its top, brightest in the
   middle, and two soft glows. The shapes live only here; a season changes the colours through
   the tokens. (A low orange wash over gray turned brown, so the normal orange is the line.) */
.site-band {
    background-color: var(--site-band-bg);
    background-image:
        linear-gradient(90deg, transparent, var(--site-band-edge) 50%, transparent),
        radial-gradient(ellipse at 85% 0%, var(--site-band-glow-top), transparent 60%),
        radial-gradient(ellipse at 10% 100%, var(--site-band-glow-bottom), transparent 55%);
    background-size: 100% 3px, auto, auto;
    background-repeat: no-repeat;
}

/* Sign-in's two bands read as one panel: the edge and top glow stay on the first, the bottom glow moves to the second */
.site-band--lead:has(+ .site-band--plain) {
    background-image:
        linear-gradient(90deg, transparent, var(--site-band-edge) 50%, transparent),
        radial-gradient(ellipse at 85% 0%, var(--site-band-glow-top), transparent 60%);
    background-size: 100% 3px, auto;
}

.site-band--plain {
    background-image: radial-gradient(ellipse at 10% 100%, var(--site-band-glow-bottom), transparent 55%);
    background-size: auto;
}

/* A band that opens the page sits right under the header, whose line it already shows */
.site-band--lead { --site-band-edge: transparent; }

.site-band--lead .call-action-content { padding-top: 72px; }

/* Two dark bands in a row (login's sign-in block and "Don't have an account?")
   overlap by a pixel, so no hairline shows between them at fractional heights */
.site-band + .site-band { margin-top: -1px; }

/* ...and read as one panel: the follow-on line sits just under the card */
.site-band--lead:has(+ .site-band--plain) .call-action-content { padding-bottom: 56px; }

@media (max-width: 719px) {
    .site-band--lead .call-action-content { padding-top: 40px; }
}


/* ==========================================================================
   Front page (index.cfm). Everything below is scoped to body.site-home.
   ========================================================================== */

.site-home { background: var(--site-paper); color: var(--site-ink); }

.home-section { padding: 80px 0; }

.home-h2 {
    margin: 0;
    color: var(--site-ink);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.home-eyebrow {
    margin: 0 0 14px;
    color: var(--site-eyebrow);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* ---------- Hero stage ---------- */

.home-hero {
    --home-hero-top-inset: 0px;   /* how much of the stage's top the header covers: art and buttons up there sit below it */
    --home-hero-media-top: var(--site-header-h);   /* where the photo starts on the screen: under the header */
    position: relative;
    display: flex;
    /* Always the whole first screen under the header (Tommy); the media scales to cover it,
       and the stage grows past it only if the words need more room */
    min-height: calc(100vh - var(--site-header-h));
    min-height: calc(100svh - var(--site-header-h));
    overflow: hidden;
    clip-path: inset(0);   /* the window the fixed photo shows through: clip-path clips fixed children, overflow doesn't */
    background: var(--site-stage-bg);
    color: var(--site-on-dark);
}

/* The header over the photo (see the header): the stage starts at the top of the screen, under the clear
   header, and fills the whole first screen */
@media (scripting: enabled) {
    .site-header--over-hero ~ main .home-hero {
        --home-hero-top-inset: var(--site-header-h);
        --home-hero-media-top: 0px;
        margin-top: calc(-1 * var(--site-header-h));
        min-height: 100vh;
        min-height: 100svh;
    }
}

/* Everything below the stage is one sheet, so it covers the photo as it slides up,
   with a soft shadow on its top edge */
.home-curtain {
    position: relative;
    z-index: 1;
    display: flow-root;   /* keeps the video band's -1px inside, so the band covers the sheet's white top edge */
    background: var(--site-paper);
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.35);
}

/* Only the photo and its overlay stay put (Tommy): fixed to the screen, seen through the stage, so the words,
   a season's art and the sheet scroll up over it. The large viewport height keeps it from resizing as a
   phone's address bar comes and goes. */
.home-hero__media {
    position: fixed;
    top: var(--home-hero-media-top);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--home-hero-media-top));
    height: calc(100lvh - var(--home-hero-media-top));
    background: var(--site-stage-bg);
}

.home-hero__media img,
.home-hero__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* One flat overlay covers the whole image, as on the old site (Tommy: no shade behind the words, no fade at
   the bottom), and stays when a campaign hides the words. It sits on the media, so a season's art and the
   pause button stay above it. */
.home-hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--site-hero-tint);
    pointer-events: none;
}

/* Fixed with the video it controls, and above the words: a fixed element is its own layer, so the button
   sits beside the media, not in it, where the words' layer would cover it */
.home-hero__pause {
    position: fixed;
    z-index: 2;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    cursor: pointer;
}

.home-hero__pause .site-icon-play { display: none; }
.home-hero__pause[data-playing="false"] .site-icon-pause { display: none; }
.home-hero__pause[data-playing="false"] .site-icon-play { display: block; }

.home-hero__words {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    flex: 1 1 auto;
}

/* The words sit about 60% of the way down on any screen shape (Tommy: up a bit; on squarer screens
   a fixed bottom gap left them low): the gap below them grows with the screen's height */
.home-hero__inner {
    width: 100%;
    padding-top: calc(32px + var(--home-hero-top-inset));
    padding-bottom: 96px;
    padding-bottom: max(96px, calc(38svh - 190px));
}

/* Short, wide screens (a phone on its side): less air under the buttons, so the words fit the first screen */
@media (min-width: 720px) and (max-height: 520px) {
    .home-hero__inner { padding-bottom: 32px; }
}

.home-hero h1 {
    max-width: 660px;
    margin: 0;
    color: inherit;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.015em;
}

.home-hero__lead {
    max-width: 520px;
    margin: 18px 0 0;
    color: #ececf0;
    font-size: 19px;
    line-height: 1.55;
    text-wrap: balance;   /* no lone last word on a phone */
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}

/* Beside the buttons when the campaign has a video: it goes down to the video and starts it (site.js) */
.home-hero__watch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 8px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.home-hero__watch:hover { color: #ffffff; text-decoration: underline; }

/* ---------- Video ---------- */

.home-video {
    position: relative;
    margin-top: -1px;   /* over the sheet's white top edge: no light hairline where it meets the photo at fractional heights */
    padding: 48px 0;
    background: var(--site-video-bg);
}

/* As wide as the page's content, so it lines up with the sections below (Tommy: bigger, not full screen) */
.home-video__frame {
    position: relative;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: #000000;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.home-video__frame > a,
.home-video__frame iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.home-video__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-video__frame > a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    transition: background-color 0.15s;
}

.home-video__frame > a:hover::after { background: rgba(0, 0, 0, 0); }

.home-video__play {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: var(--site-brand);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}


/* ---------- What every order gets ---------- */

.home-facts {
    border-bottom: 1px solid #e7e7ea;
    background: var(--site-paper);
}

.home-facts__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px 32px;
    margin: 0 auto;
    padding-top: 32px;
    padding-bottom: 32px;
    list-style: none;
}

.home-fact {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.home-fact svg { flex: none; color: var(--site-brand); }

.home-fact strong {
    display: block;
    color: var(--site-ink);
    font-size: 16px;
    font-weight: 600;
}

.home-fact span {
    color: var(--site-ink-soft);
    font-size: 14px;
    line-height: 1.5;
}


/* ---------- What we print ---------- */

.home-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}

.home-chip {
    flex: none;
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid var(--site-line);
    border-radius: 999px;
    background: var(--site-paper);
    color: var(--site-ink);
    font: 600 15px/1.2 var(--site-font);
    white-space: nowrap;
    cursor: pointer;
}

.home-chip:hover { border-color: var(--site-ink); }

.home-chip[aria-pressed="true"] {
    border-color: var(--site-ink);
    background: var(--site-ink);
    color: #ffffff;
}

.home-product {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px;
    margin-top: 30px;
    padding: 48px;
    border-radius: 20px;
    background: var(--site-mist);
}

.home-product[hidden] { display: none; }

.home-product__img { flex: 1 1 380px; min-width: 0; }

.home-product__img img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: contain;
}

.home-product__body { flex: 1 1 360px; min-width: 0; }

.home-product h3 {
    margin: 0;
    color: var(--site-ink);
    font-size: 34px;
    font-weight: 800;
}

.home-product__tagline {
    margin: 10px 0 0;
    color: var(--site-ink-soft);
    font-size: 17px;
    line-height: 1.6;
}

.home-product__specs {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    color: var(--site-ink);
    font-size: 15px;
    line-height: 1.9;
}

.home-product__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}


/* ---------- Two ways to order ---------- */

.home-ways { background: var(--site-mist); }
.home-ways .home-h2 { text-align: center; }

.home-ways__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
    margin-top: 44px;
}

.home-way {
    overflow: hidden;
    border-top: 6px solid var(--site-brand);
    border-radius: 20px;
    background: var(--site-paper);
    box-shadow: 0 2px 0 #e2e4e8;
}

.home-way--dark {
    border-top-color: var(--site-on-dark-muted);
    background: var(--site-band-bg);   /* the dark bands' colour, the header's (Tommy); a light-header season keeps it dark */
    color: #ffffff;
}

.home-way__img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    padding-top: 20px;
}

.home-way__img img { display: block; height: 230px; width: auto; max-width: 100%; object-fit: contain; }

.home-way__body { padding: 8px 40px 44px; }

.home-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--site-brand);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-way--dark .home-badge { background: #ffffff; color: var(--site-ink); }

.home-way h3 {
    margin: 14px 0 0;
    color: inherit;
    font-size: 30px;
    font-weight: 800;
}

.home-way p {
    margin: 8px 0 0;
    color: var(--site-ink-soft);
    font-size: 17px;
    line-height: 1.6;
}

.home-way--dark p { color: #c4c4cc; }

.home-checks {
    display: grid;
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
    font-weight: 500;
}

.home-checks li { display: flex; align-items: center; gap: 10px; }
.home-checks svg { flex: none; color: var(--site-brand); }

.home-or {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-or::before,
.home-or::after {
    content: "";
    flex: 1 1 auto;
    width: 2px;
    background: var(--site-line);
}

.home-or span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 56px;
    height: 56px;
    margin: 14px 0;
    border: 2px solid var(--site-line);
    border-radius: 50%;
    background: var(--site-paper);
    color: var(--site-ink);
    font-size: 17px;
    font-weight: 700;
}


/* ---------- What customers say ---------- */

.home-reviews__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
}

.home-reviews__nav { display: flex; gap: 12px; }

.home-reviews__nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--site-ink);
    border-radius: 50%;
    background: var(--site-paper);
    color: var(--site-ink);
    cursor: pointer;
}

.home-reviews__nav button:hover { background: var(--site-ink); color: #ffffff; }

.home-reviews__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 40px) / 3);
    align-items: start;   /* each card fits its own review; one long review doesn't stretch the rest */
    gap: 20px;
    margin-top: 32px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.home-reviews__track::-webkit-scrollbar { display: none; }

.home-review {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 28px;
    border-radius: 16px;
    background: var(--site-mist);
    scroll-snap-align: start;
}

.home-review__mark {
    color: var(--site-brand);
    font-size: 54px;
    font-weight: 800;
    line-height: 0.8;
}

.home-review blockquote {
    margin: 10px 0 0;
    color: var(--site-ink);
    font-size: 16px;
    line-height: 1.65;
}

.home-review figcaption {
    margin-top: 18px;
    color: var(--site-ink);
    font-size: 15px;
    font-weight: 700;
}


/* ---------- Closing band ---------- */

/* Its colour and glows come from .site-band */
.home-closing {
    position: relative;
    overflow: hidden;
    color: var(--site-on-dark);
}

.home-closing__inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 96px var(--site-gutter);
    text-align: center;
}

.home-closing h2 {
    margin: 0;
    color: inherit;
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.15;
}

.home-closing p {
    margin: 16px 0 0;
    color: var(--site-on-dark-soft);
    font-size: 18px;
    line-height: 1.6;
}

.home-closing__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}


/* ---------- Front page on tablets ---------- */

@media (max-width: 959px) {
    .home-reviews__track { grid-auto-columns: calc((100% - 20px) / 2); }
}


/* ---------- Front page on phones ---------- */

@media (max-width: 719px) {
    .home-section { padding: 48px 0; }

    /* The campaign sits behind the words, as on desktop (Tommy: it shouldn't pop out on its own).
       The words sit in the vertical middle (Tommy: low, it "looks very strange" on a phone). */
    .home-hero {
        height: auto;
        min-height: calc(100svh - var(--site-header-h));   /* the whole first screen, as on desktop */
        background: var(--site-video-bg);
    }

    /* Top left, just under the header: a season's art takes the top right */
    .home-hero__pause { top: calc(12px + var(--site-header-h)); left: 12px; right: auto; bottom: auto; }

    /* Centred words, on the same flat overlay as desktop */
    .home-hero__words { align-items: center; }

    .home-hero__inner {
        padding-top: calc(72px + var(--home-hero-top-inset));
        padding-bottom: 72px;
    }
    .home-hero .home-eyebrow,
    .home-hero h1,
    .home-hero__lead { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
    .home-hero__lead { font-size: 17px; }

    .home-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 24px;
    }

    .home-hero__watch { display: none; }   /* the stacked buttons fill the width, and the video is right below */

    .home-video { padding: 8px 0 40px; }
    .home-video__frame { border-radius: 12px; box-shadow: none; }

    .home-video__play {
        width: 64px;
        height: 64px;
        margin: -32px 0 0 -32px;
        border-width: 3px;
    }

    .home-video__play svg { width: 26px; height: 26px; }

    .home-facts__list { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; padding-bottom: 28px; }

    /* Every chip stays on screen: they wrap into rows instead of scrolling off the edge */
    .home-chips { margin-top: 18px; }
    .home-chip { padding: 8px 14px; font-size: 14px; }

    .home-product { gap: 18px; margin-top: 18px; padding: 24px 20px; border-radius: 16px; }
    .home-product__img img { height: 190px; }
    .home-product h3 { font-size: 26px; }
    .home-product__actions { flex-direction: column; }

    .home-ways__grid { grid-template-columns: 1fr; margin-top: 28px; }
    .home-way__img { height: 180px; padding-top: 14px; }
    .home-way__img img { height: 166px; }
    .home-way__body { padding: 6px 24px 30px; }
    .home-way h3 { font-size: 26px; }

    .home-or { flex-direction: row; margin: 14px 0; }
    .home-or::before,
    .home-or::after { width: auto; height: 2px; }
    .home-or span { width: 48px; height: 48px; margin: 0 12px; font-size: 16px; }

    .home-reviews__track {
        grid-auto-columns: 300px;
        gap: 12px;
        margin: 20px calc(-1 * var(--site-gutter)) 0;
        padding: 0 var(--site-gutter);
        scroll-padding: 0 var(--site-gutter);
    }

    .home-review { padding: 22px; }
    .home-review blockquote { font-size: 15px; line-height: 1.6; }

    .home-closing__inner { padding: 56px var(--site-gutter); }
    .home-closing p { font-size: 16px; }
    .home-closing__actions { flex-direction: column; }
}


/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
    html:has(body.site-home) { scroll-behavior: smooth; }
    .site-ledge:hover { animation: site-ledge-wobble 0.7s ease-in-out; }
}

@keyframes site-ledge-wobble {
    0%, 100% { transform: rotate(0); }
    20%      { transform: rotate(-4deg); }
    45%      { transform: rotate(3deg); }
    70%      { transform: rotate(-1.5deg); }
}


/* ---------- Easter eggs (site.js) ---------- */

/* Out of register: the Konami code knocks the headings and the logo off by a few pixels in cyan,
   magenta and yellow, like plates that slipped on press. They snap back when the class comes off. */
.site-misregister h1,
.site-misregister h2 {
    text-shadow: 3px 1px 0 rgba(0, 174, 239, 0.75), -3px -1px 0 rgba(236, 0, 140, 0.7), 1px 3px 0 rgba(255, 221, 0, 0.8);
}

.site-misregister .site-header__logo img {
    filter: drop-shadow(3px 1px 0 rgba(0, 174, 239, 0.75)) drop-shadow(-3px -1px 0 rgba(236, 0, 140, 0.7));
}

@media (prefers-reduced-motion: no-preference) {
    .site-misregister h1,
    .site-misregister h2 { animation: site-misregister-text 1.6s ease-in-out both; }

    .site-misregister .site-header__logo img { animation: site-misregister-logo 1.6s ease-in-out both; }
}

@keyframes site-misregister-text {
    0%       { text-shadow: 0 0 0 rgba(0, 174, 239, 0), 0 0 0 rgba(236, 0, 140, 0), 0 0 0 rgba(255, 221, 0, 0); }
    20%, 80% { text-shadow: 4px 1px 0 rgba(0, 174, 239, 0.75), -3px -2px 0 rgba(236, 0, 140, 0.7), 1px 4px 0 rgba(255, 221, 0, 0.8); }
    50%      { text-shadow: -3px 2px 0 rgba(0, 174, 239, 0.75), 4px -1px 0 rgba(236, 0, 140, 0.7), -2px -3px 0 rgba(255, 221, 0, 0.8); }
    100%     { text-shadow: 0 0 0 rgba(0, 174, 239, 0), 0 0 0 rgba(236, 0, 140, 0), 0 0 0 rgba(255, 221, 0, 0); }
}

@keyframes site-misregister-logo {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 174, 239, 0)) drop-shadow(0 0 0 rgba(236, 0, 140, 0)); }
    20%, 80% { filter: drop-shadow(3px 1px 0 rgba(0, 174, 239, 0.75)) drop-shadow(-3px -1px 0 rgba(236, 0, 140, 0.7)); }
    50%      { filter: drop-shadow(-3px 1px 0 rgba(0, 174, 239, 0.75)) drop-shadow(3px -1px 0 rgba(236, 0, 140, 0.7)); }
}

/* The note that follows: a small card at the bottom of the screen for three seconds */
.site-toast {
    position: fixed;
    z-index: 200;
    left: 50%;
    bottom: 24px;
    padding: 12px 20px;
    border-radius: 10px;
    background: var(--site-header-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 -3px 0 var(--site-brand);
    color: var(--site-header-text);
    font: 600 15px/1.3 var(--site-font);
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

.site-toast.is-showing { opacity: 1; transform: translate(-50%, 0); }