/*
  The whole look of the public website, by hand, in one file.

  No framework, no web fonts and no JavaScript: a page is then one request and this stylesheet, which is why the
  site's rate limit can be modest and why nothing here can break because a CDN is having a bad day. Two things it must
  do beyond looking good: read on a phone, because that is where somebody opens a link to a leaderboard; and print
  sensibly, because the legal pages will be printed and filed.

  The site wears the game's own clothes: the deep navy of its menus, one gold for what matters most, white type in
  capitals for labels. Colours are named once at the top and used by name below. The older names (--paper, --card,
  --green...) are kept because the operator area's own rules are written in them.
*/

:root {
    color-scheme: dark;

    /* Surfaces, darkest first. */
    --bg: #070b10;
    --paper: #0a1017;
    --card: #101922;
    --card-2: #15202b;
    --raise: #1b2835;

    /* Type. */
    --ink: #eef2f5;
    --ink-soft: #9aa8b4;
    --ink-faint: #6b7a87;

    /* Lines, as light on dark rather than a colour of their own. */
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);

    /* The game's gold (rgb 239, 200, 119) for the one thing a screen wants pressed; green for yes. */
    --gold: #efc877;
    --gold-deep: #d9a94a;
    --gold-wash: rgba(239, 200, 119, 0.10);
    --green: #6fcf97;
    --green-deep: #8fdcae;
    --green-wash: rgba(111, 207, 151, 0.09);
    --warn: #e8b86b;
    --warn-wash: rgba(232, 184, 107, 0.10);
    --danger: #ef7b7f;
    --danger-wash: rgba(239, 123, 127, 0.10);

    --gutter: 20px;
    --measure: 68ch;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -18px rgba(0, 0, 0, 0.7);

    --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

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

html {
    /* Anchors land below the sticky header rather than under it. */
    scroll-padding-top: 5.5rem;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.65 var(--sans);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(239, 200, 119, 0.35);
    color: #ffffff;
}

img {
    max-width: 100%;
}

/* ---------------------------------------------------------------- the frame */

.wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: var(--gutter);
    top: var(--gutter);
    z-index: 100;
    padding: 0.5rem 0.75rem;
    background: var(--card);
    color: var(--ink);
    border: 2px solid var(--gold);
    border-radius: var(--radius-sm);
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(7, 11, 16, 0.78);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.site-header .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    min-height: 68px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--display);
    font-size: 1.15rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand:hover,
.brand:focus {
    color: var(--ink);
}

.brand svg {
    width: 34px;
    height: 20px;
    flex: none;
}

.brand b {
    font-weight: 700;
}

.brand span {
    font-weight: 300;
    color: var(--ink-soft);
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
    margin-left: auto;
    align-items: center;
}

.site-nav a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav a:hover,
.site-nav a:focus {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.05);
}

.site-nav a.on {
    color: var(--ink);
}

.site-nav a.on::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 2px;
    border-radius: 2px;
    background: var(--gold);
}

/* The last link in the header (sign in / account) is a button, the one thing to press in the bar. */
.site-nav a.nav-cta {
    margin-left: 0.5rem;
    white-space: nowrap;
    color: #15120a;
    background: var(--gold);
    padding: 0.5rem 1rem;
}

.site-nav a.nav-cta:hover,
.site-nav a.nav-cta:focus {
    color: #15120a;
    background: #f6d894;
}

/*
  On a phone the header's links fold into a panel that slides in from the right: a popover (Pages/Shared/_Layout), which
  the browser opens and closes with no script. The button and the panel exist only where popovers do (@supports below),
  so an old browser keeps its links in the bar.
*/
.menu-button {
    display: none;
    align-items: center;
    gap: 0.55rem;
    margin-left: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font: 700 0.72rem/1.2 var(--sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.menu-button:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(239, 200, 119, 0.45);
}

.menu-button .bars,
.menu-button .bars::before,
.menu-button .bars::after {
    display: block;
    width: 15px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.menu-button .bars {
    position: relative;
}

.menu-button .bars::before,
.menu-button .bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.menu-button .bars::before {
    top: -5px;
}

.menu-button .bars::after {
    top: 5px;
}

.site-drawer {
    display: none;
}

@supports selector(:popover-open) {
    .site-drawer:popover-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0 0 0 auto;
        width: min(22rem, 88vw);
        height: 100vh;
        height: 100dvh;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-left: 1px solid var(--line-strong);
        background:
            radial-gradient(120% 40% at 100% 0%, rgba(239, 200, 119, 0.10), transparent 70%),
            var(--paper);
        color: var(--ink);
        box-shadow: -40px 0 80px -30px rgba(0, 0, 0, 0.9);
    }

    .site-drawer::backdrop {
        background: rgba(3, 6, 9, 0.62);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }

    /* In from the right and back out the same way, with the page dimming behind; a browser that cannot animate a
       popover simply shows it. */
    .site-drawer {
        translate: 100% 0;
        transition: translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), display 0.3s allow-discrete, overlay 0.3s allow-discrete;
    }

    .site-drawer:popover-open {
        translate: 0 0;
    }

    .site-drawer::backdrop {
        opacity: 0;
        transition: opacity 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
    }

    .site-drawer:popover-open::backdrop {
        opacity: 1;
    }

    @starting-style {
        .site-drawer:popover-open {
            translate: 100% 0;
        }

        .site-drawer:popover-open::backdrop {
            opacity: 0;
        }
    }

    /* The page behind stays where it is while the panel is open. */
    html:has(.site-drawer:popover-open) {
        overflow: hidden;
    }
}

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    padding: 0.6rem 1rem 0.6rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

.drawer-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.drawer-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.drawer-close:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(239, 200, 119, 0.45);
}

.drawer-links {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: none;
    margin: 0;
    padding: 1rem 0.75rem 0;
    list-style: none;
}

.drawer-links li {
    margin: 0;
}

.drawer-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

/* A chevron at the end of each row: this goes somewhere. */
.drawer-links a::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 0.2rem;
    border-top: 2px solid var(--ink-faint);
    border-right: 2px solid var(--ink-faint);
    transform: rotate(45deg);
}

.drawer-links a:hover,
.drawer-links a:focus-visible {
    background: var(--card-2);
}

.drawer-links a.on {
    color: var(--gold);
    background: var(--gold-wash);
    box-shadow: inset 3px 0 0 var(--gold);
}

.drawer-links a.on::after {
    border-color: var(--gold);
}

.drawer-foot {
    display: grid;
    gap: 0.65rem;
    margin-top: auto;
    padding: 1.5rem 1.25rem max(1.5rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
}

.drawer-foot .button {
    width: 100%;
}

.drawer-link {
    text-align: center;
    font-size: 0.9rem;
    color: var(--gold);
}

.drawer-note {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--ink-faint);
    text-align: center;
}

main {
    display: block;
    flex: 1 0 auto;
    position: relative;
    padding: 3.5rem 0 5rem;
}

/* Every page but the front one opens on a soft light from above, so the title sits on something. */
body:not(.home) main::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 420px;
    z-index: -1;
    background:
        radial-gradient(60% 100% at 20% 0%, rgba(239, 200, 119, 0.08), transparent 70%),
        radial-gradient(50% 90% at 85% 0%, rgba(111, 207, 151, 0.07), transparent 70%);
    pointer-events: none;
}

body.home main {
    padding: 0;
}

/* ---------------------------------------------------------------- what is on a long page, the pricing notes, the questions' last word */

.on-this-page {
    margin: 1.75rem 0 2.75rem;
    padding: 1rem 1.2rem 1.15rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.on-this-page .toc-title {
    margin: 0 0 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.on-this-page ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.on-this-page li {
    margin: 0;
    counter-increment: toc;
}

.on-this-page a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.42rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card-2);
    color: var(--ink);
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.on-this-page a::before {
    content: counter(toc);
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 700;
}

.on-this-page a:hover,
.on-this-page a:focus-visible {
    border-color: rgba(239, 200, 119, 0.5);
}

.pricing-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 3.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

.pricing-notes h2 {
    margin-top: 1.5rem;
}

.ask {
    margin-top: 3.5rem;
    padding: 1.6rem 1.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--gold-wash), transparent 55%), var(--card);
}

/* The card draws its own edge, so the rule every prose heading opens with is left out here. */
body.prose main .ask h2 {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.ask p {
    margin-bottom: 0;
}

@media (max-width: 860px) {
    .pricing-notes {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- footer */

.site-footer {
    border-top: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink-soft);
    font-size: 0.9rem;
    padding: 3.5rem 0 2.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.footer-grid .brand {
    margin-bottom: 0.9rem;
}

.footer-grid p {
    max-width: 30ch;
}

.footer-grid h4 {
    margin: 0 0 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
}

.footer-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-grid li {
    margin: 0 0 0.5rem;
}

.site-footer a {
    color: var(--ink-soft);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--ink);
}

.site-footer p {
    margin: 0.35rem 0;
}

.footer-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
}

.footer-base p {
    max-width: none;
}

.footer-base a {
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- text */

h1,
h2,
h3,
h4 {
    font-family: var(--display);
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 0.6rem;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

h2 {
    font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem);
    font-weight: 650;
    letter-spacing: -0.01em;
    margin-top: 3rem;
}

h3 {
    font-size: 1.1rem;
    font-weight: 650;
    margin-top: 1.75rem;
}

p,
ul,
ol,
dl {
    max-width: var(--measure);
}

p {
    margin: 0 0 1rem;
}

ul,
ol {
    padding-left: 1.3rem;
}

li {
    margin-bottom: 0.35rem;
}

li::marker {
    color: var(--gold);
}

strong {
    color: var(--ink);
    font-weight: 650;
}

a {
    color: var(--gold);
    text-decoration-color: rgba(239, 200, 119, 0.4);
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover,
a:focus {
    color: #f7dca0;
    text-decoration-color: currentColor;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2.5rem 0;
}

.lede {
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    line-height: 1.6;
    color: var(--ink-soft);
}

/* A small capitals label above a heading: the game's own section labels. */
.eyebrow {
    display: inline-block;
    margin: 0 0 0.9rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}

.muted {
    color: var(--ink-soft);
}

.small {
    font-size: 0.88rem;
}

.nowrap {
    white-space: nowrap;
}

/* An id, a hash, a provider's own word for something: things that must be read character by character. */
.mono {
    font-family: var(--mono);
    font-size: 0.85em;
}

.updated {
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin-bottom: 2rem;
}

/* A plain statement that has to be read, not a decoration: used for "ranking is switched off". */
.plainly,
.notice {
    border: 1px solid rgba(111, 207, 151, 0.22);
    background: var(--green-wash);
    padding: 1rem 1.2rem 1rem 3rem;
    border-radius: var(--radius);
    max-width: var(--measure);
    margin: 1.5rem 0;
    position: relative;
}

.plainly::before,
.notice::before {
    content: "i";
    position: absolute;
    left: 1rem;
    top: 1.05rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 700 0.78rem/1 var(--display);
    color: #0a1017;
    background: var(--green);
}

.notice {
    border-color: rgba(232, 184, 107, 0.25);
    background: var(--warn-wash);
    color: var(--ink);
}

.notice::before {
    content: "!";
    background: var(--warn);
}

.notice.problem {
    border-color: rgba(239, 123, 127, 0.3);
    background: var(--danger-wash);
}

.notice.problem::before {
    background: var(--danger);
}

.plainly p:last-child,
.notice p:last-child {
    margin-bottom: 0;
}

.notice .buttons,
.notice form {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- buttons */

.buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1.75rem 0;
}

.buttons form {
    margin: 0;
}

.buttons.center {
    justify-content: center;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.7rem 1.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gold);
    background: var(--gold);
    color: #15120a;
    text-decoration: none;
    font: 700 0.8rem/1.2 var(--sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 10px 30px -12px rgba(239, 200, 119, 0.55);
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.button:hover,
.button:focus {
    background: #f6d894;
    border-color: #f6d894;
    color: #15120a;
    transform: translateY(-1px);
    box-shadow: 0 14px 34px -12px rgba(239, 200, 119, 0.7);
}

.button.small {
    min-height: 36px;
    padding: 0.45rem 0.9rem;
    font-size: 0.72rem;
}

.button.large {
    min-height: 52px;
    padding: 0.85rem 1.7rem;
    font-size: 0.85rem;
}

/* A form's submit is a button element, which does not inherit the page's type of its own accord. */
button.button {
    cursor: pointer;
}

.button.quiet {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    border-color: var(--line-strong);
    box-shadow: none;
}

.button.quiet:hover,
.button.quiet:focus {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink);
}

.button .arrow {
    transition: transform 0.15s ease;
}

.button:hover .arrow {
    transform: translateX(3px);
}

/*
  A link that reads as the next thing to do, with an arrow. Plain inline text, so that a link long enough to wrap on a
  phone keeps its arrow at the end of its last line rather than standing apart at the far edge of the column.
*/
.more {
    font-weight: 600;
    text-decoration: none;
}

.more::after {
    content: "\2192";
    display: inline-block;
    margin-left: 0.4rem;
    transition: transform 0.15s ease;
}

.more:hover::after {
    transform: translateX(3px);
}

/* ---------------------------------------------------------------- cards and grids */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}

.card {
    position: relative;
    background: linear-gradient(180deg, var(--card-2), var(--card));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.5rem;
    box-shadow: var(--shadow);
}

.card h3 {
    margin-top: 0;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.card p,
.card ul {
    max-width: none;
}

.card .price {
    font-family: var(--display);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--ink);
    margin: 0.2rem 0 0.9rem;
}

/* The plan most people should look at. */
.card.featured {
    border-color: rgba(239, 200, 119, 0.5);
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(239, 200, 119, 0.12), transparent 70%),
        linear-gradient(180deg, var(--card-2), var(--card));
    box-shadow: 0 0 0 1px rgba(239, 200, 119, 0.15), 0 30px 60px -30px rgba(239, 200, 119, 0.35);
}

.card.featured h3 {
    color: var(--gold);
}

.card .badge {
    position: absolute;
    top: 1.3rem;
    right: 1.3rem;
}

.card-rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 1.1rem 0;
}

.ticks {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
}

.ticks li {
    padding-left: 1.75rem;
    position: relative;
    margin-bottom: 0.6rem;
    font-size: 0.94rem;
    line-height: 1.5;
}

.ticks li::before {
    position: absolute;
    left: 0;
    top: 0.12rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    content: "\2713";
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--green);
    background: rgba(111, 207, 151, 0.14);
}

.ticks li.no {
    color: var(--ink-faint);
}

.ticks li.no::before {
    content: "\2013";
    color: var(--ink-faint);
    background: rgba(255, 255, 255, 0.05);
}

/* The screenshot band on a page that lists them. A slot with no file yet is a labelled box, not a broken image. */
.shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.75rem 0;
}

.shots figure {
    margin: 0;
}

.shots img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

.shots figcaption {
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin-top: 0.5rem;
}

.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 16 / 9;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-size: 0.85rem;
    padding: 1rem;
    background: var(--card);
}

/* ---------------------------------------------------------------- the front page */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: min(88vh, 860px);
    display: flex;
    align-items: center;
    margin-top: -68px;
    padding: calc(68px + 4rem) 0 6rem;
    background: #0b1a12;
}

.hero-picture {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 40%;
    transform: scale(1.02);
}

/* The pictures come as <picture> (WebP where the browser takes it); the wrapper takes no box of its own. */
.hero-picture picture,
.closing-picture picture,
.showcase-media picture {
    display: contents;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(7, 11, 16, 0.92) 0%, rgba(7, 11, 16, 0.72) 34%, rgba(7, 11, 16, 0.12) 66%, rgba(7, 11, 16, 0) 100%),
        linear-gradient(180deg, rgba(7, 11, 16, 0.55) 0%, transparent 22%, transparent 70%, var(--paper) 100%);
}

.hero-copy {
    max-width: 640px;
}

.hero h1 {
    font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin-bottom: 1.4rem;
}

.hero h1 em {
    font-style: normal;
    color: var(--gold);
}

/* The small gold label above the headline is part of the h1 (it says what the thing is); drawn as every eyebrow is. */
.hero h1 .eyebrow {
    display: block;
    width: fit-content;
    margin: 0 0 1.1rem;
    font-family: var(--sans);
    line-height: 1.5;
    letter-spacing: 0.16em;
}

.hero .lede {
    color: #c9d3db;
    max-width: 52ch;
}

.hero .buttons {
    margin: 2.2rem 0 2rem;
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c9d3db;
}

.hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.hero-points li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(111, 207, 151, 0.2);
}

/* The strip of four facts under the hero. */
.facts-band {
    position: relative;
    z-index: 2;
    margin-top: -3.5rem;
}

.facts-band ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(16, 25, 34, 0.86);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

.facts-band li {
    margin: 0;
    padding: 1.4rem 1.5rem;
    border-left: 1px solid var(--line);
}

.facts-band li:first-child {
    border-left: 0;
}

.facts-band .figure {
    display: block;
    font-family: var(--display);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.2;
}

.facts-band .figure-label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.86rem;
    color: var(--ink-soft);
    line-height: 1.45;
}

.section {
    padding: 6rem 0 0;
}

.section-head {
    max-width: 720px;
    margin-bottom: 3rem;
}

.section-head.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-head.center p {
    margin-left: auto;
    margin-right: auto;
}

.section-head h2 {
    margin-top: 0;
    font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
    letter-spacing: -0.02em;
    line-height: 1.12;
}

/* A picture beside a paragraph, alternating sides down the page. */
.showcase {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
    gap: 3.5rem;
    margin: 0 0 5.5rem;
}

.showcase:last-child {
    margin-bottom: 0;
}

.showcase.flip {
    grid-template-columns: 1fr 1.25fr;
}

.showcase.flip .showcase-media {
    order: 2;
}

.showcase-media {
    margin: 0;
    position: relative;
}

.showcase-media::after {
    content: "";
    position: absolute;
    inset: 8% -4% -6% 8%;
    z-index: -1;
    border-radius: 24px;
    background: radial-gradient(closest-side, rgba(239, 200, 119, 0.14), transparent);
    filter: blur(20px);
}

.showcase.flip .showcase-media::after {
    inset: 8% 8% -6% -4%;
    background: radial-gradient(closest-side, rgba(111, 207, 151, 0.14), transparent);
}

.showcase-media img,
.showcase-media .empty {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--line-strong);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(255, 255, 255, 0.02);
}

/* A picture inside a page of text (the Mevo and games pages). */
.page-figure {
    margin: 1.5rem 0;
}

.page-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
}

.page-figure.wide img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.page-figure figcaption {
    margin-top: 0.6rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

/* A settings panel shown at its own size and shape, so its text stays readable. */
.showcase-media.panel img {
    width: auto;
    max-width: 100%;
    max-height: 640px;
    aspect-ratio: auto;
    object-fit: contain;
    margin: 0 auto;
}

.showcase-media figcaption {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

.showcase-copy h3 {
    margin-top: 0;
    font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.showcase-copy p {
    color: var(--ink-soft);
}

/* The fun games: four pictures in a row (two on a phone), each with its name and a line. */
.arcade {
    list-style: none;
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.arcade-tile {
    margin: 0;
}

.arcade-tile picture {
    display: contents;
}

.arcade-tile img,
.arcade-tile .empty {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.9);
}

.arcade-tile figcaption {
    margin-top: 0.8rem;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.arcade-tile figcaption strong {
    display: block;
    color: var(--gold);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

@media (max-width: 860px) {
    .arcade {
        grid-template-columns: 1fr 1fr;
    }
}

/* The inflatable targets beside a few lines for families with kids, under the games. */
.arcade-kids {
    margin-top: 4.5rem;
}

/* Six small cards, each with a drawn icon. */
.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: none;
}

.feature {
    margin: 0;
    padding: 1.7rem 1.6rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--card-2), var(--card));
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.feature:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
}

.feature .icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    margin-bottom: 1.1rem;
    color: var(--gold);
    background: var(--gold-wash);
    border: 1px solid rgba(239, 200, 119, 0.22);
}

.feature .icon svg {
    width: 22px;
    height: 22px;
}

.feature h3 {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
}

.feature p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

/* The link under the cards, which has no margin of its own to stand off from. */
.features + .center-text {
    margin-top: 2.25rem;
}

/* The same cards on the download page, for what the game needs: two to a row in the reading column, one on a phone. */
.features.needs {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    margin: 1.5rem 0 1.75rem;
}

.center-text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.plainly.centred {
    margin: 3rem auto 0;
}

/* This week's Tour Week, as a panel. */
.event {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    align-items: center;
    padding: 2.4rem;
    border-radius: 18px;
    border: 1px solid rgba(239, 200, 119, 0.28);
    background:
        radial-gradient(80% 120% at 100% 0%, rgba(239, 200, 119, 0.14), transparent 60%),
        linear-gradient(135deg, #132230, #0d1620);
    box-shadow: var(--shadow);
}

.event h2 {
    margin: 0 0 0.6rem;
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
}

.event p {
    color: var(--ink-soft);
}

.leader {
    padding: 1.4rem 1.5rem;
    border-radius: var(--radius);
    background: rgba(7, 11, 16, 0.55);
    border: 1px solid var(--line);
}

.leader .label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.leader .name {
    display: block;
    margin: 0.35rem 0 0.15rem;
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 700;
}

.leader .score {
    font-family: var(--display);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.leader .score small {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-left: 0.4rem;
    letter-spacing: 0;
}

/* The last word on the front page: a call to download over the course. */
.closing {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 6rem;
    padding: 6rem 0;
    text-align: center;
    border-top: 1px solid var(--line);
}

.closing-picture {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.closing-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
}

.closing::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--paper) 0%, rgba(10, 16, 23, 0.8) 35%, rgba(10, 16, 23, 0.82) 70%, var(--bg) 100%);
}

.closing h2 {
    margin: 0 auto 0.8rem;
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
    letter-spacing: -0.02em;
}

.closing p {
    margin-left: auto;
    margin-right: auto;
    color: #c9d3db;
}

.closing .buttons {
    justify-content: center;
}

/* ---------------------------------------------------------------- tables */

.table-scroll {
    overflow-x: auto;
    margin: 1.25rem 0 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.94rem;
}

caption {
    text-align: left;
    font-weight: 650;
    padding: 1rem 1.1rem 0.75rem;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}

th,
td {
    text-align: left;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

th {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.02);
}

tbody tr {
    transition: background-color 0.12s ease;
}

tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}

td.num,
th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

tbody tr:last-child td {
    border-bottom: none;
}

.rank {
    width: 3.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

tbody tr:first-child td.rank {
    color: var(--gold);
}

/* ---------------------------------------------------------------- forms */

.field {
    margin: 0 0 1.2rem;
    max-width: 34rem;
}

.field label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.45rem;
}

.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=number],
.field textarea,
.field select {
    width: 100%;
    min-height: 46px;
    padding: 0.65rem 0.85rem;
    font: inherit;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:hover,
.field textarea:hover,
.field select:hover {
    border-color: rgba(255, 255, 255, 0.28);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(239, 200, 119, 0.2);
}

/* A field for form-filling programs only: off the screen, out of the tab order, and read by no screen reader. */
.field.trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.field .hint {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0.4rem 0 0;
}

.field.check {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.field.check input {
    margin-top: 0.3rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--gold);
}

.field.check label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0;
}

form.inline {
    display: inline;
}

/* The small pages that are one form (sign in, forgotten password, a new name): one centred panel. */
body.form-page main .wrap {
    max-width: 560px;
}

body.form-page main .wrap > h1 {
    text-align: center;
    font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.3rem);
}

body.form-page main .wrap > .lede {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

body.form-page main form:not(.inline) {
    margin: 1.75rem 0 1.5rem;
    padding: 1.9rem 1.8rem 0.4rem;
    background: linear-gradient(180deg, var(--card-2), var(--card));
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

body.form-page main form .buttons .button {
    width: 100%;
}

body.form-page .toc,
body.form-page main .wrap > p.small {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* A page that is read from top to bottom (how it plays, the legal pages): one centred column. */
body.prose main .wrap {
    max-width: 820px;
}

body.prose main h2 {
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------- questions and answers */

/*
  The questions page: topic cards that jump to their sections, then each question a card that opens where it is.
  <details> does the opening, so there is no script, a question can be linked to by its id, and a browser's
  find-in-page can still reach an answer that is closed. Every movement is CSS: the card's height glides open and shut
  where the browser can animate to an automatic height (::details-content with interpolate-size), the answer rises
  into place in every browser, and the cards drift in as they scroll into view where scroll timelines exist. Each is
  an addition a browser can ignore; none of them is needed to read the page.
*/
body.faq-page main h2 {
    scroll-margin-top: 5.5rem;
}

/* Three to a row on a wide screen, the last row centred; two, then one, as the screen narrows. */
.faq-topics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 2rem 0 0.5rem;
}

.faq-topics a {
    flex: 1 1 220px;
    max-width: calc((100% - 1.5rem) / 3);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.85rem;
    align-items: center;
    padding: 0.95rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--card-2), var(--card));
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.2s ease, box-shadow 0.25s ease;
}

/* A gold wash that sweeps across the card from the left as it is pointed at. */
.faq-topics a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, var(--gold-wash), transparent 70%);
    opacity: 0;
    transform: translateX(-30%);
    transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
}

.faq-topics a:hover,
.faq-topics a:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(239, 200, 119, 0.4);
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(239, 200, 119, 0.08);
}

.faq-topics a:hover::before,
.faq-topics a:focus-visible::before {
    opacity: 1;
    transform: none;
}

.topic-icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid rgba(239, 200, 119, 0.25);
    background: var(--gold-wash);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}

.topic-icon svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.faq-topics a:hover .topic-icon,
.faq-topics a:focus-visible .topic-icon {
    transform: scale(1.1) rotate(-6deg);
    background-color: rgba(239, 200, 119, 0.18);
}

.topic-name {
    position: relative;
    font-family: var(--display);
    font-weight: 650;
    line-height: 1.25;
}

.topic-line {
    position: relative;
    font-size: 0.82rem;
    color: var(--ink-soft);
    line-height: 1.35;
}

.faq-section {
    scroll-margin-top: 5.5rem;
}

.faq {
    display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    /* Lets a height of "auto" be animated to and from (where supported). */
    interpolate-size: allow-keywords;
}

.faq details {
    background: linear-gradient(180deg, var(--card-2), var(--card));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color 0.2s ease, box-shadow 0.3s ease;
}

.faq details:hover {
    border-color: var(--line-strong);
}

/* An open question, and the one a link arrived at, are edged in gold and lit a little from below. */
.faq details[open],
.faq details:target {
    border-color: rgba(239, 200, 119, 0.35);
    box-shadow: var(--shadow), 0 0 0 1px rgba(239, 200, 119, 0.06), 0 22px 44px -30px rgba(239, 200, 119, 0.35);
}

.faq summary {
    display: block;
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 4.2rem 1.15rem 1.4rem;
    border-radius: var(--radius);
    font-family: var(--display);
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.4;
    color: var(--ink);
    transition: color 0.2s ease, padding-left 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Safari's own triangle; everybody else's goes with list-style. */
.faq summary::-webkit-details-marker {
    display: none;
}

/* A gold bar down the left edge: a hint of it on hover, the full bar while the answer is open. */
.faq summary::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85rem;
    bottom: 0.85rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
    transform: scaleY(0);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.faq summary:hover {
    padding-left: 1.6rem;
}

.faq summary:hover::before {
    transform: scaleY(0.45);
}

.faq details[open] > summary {
    color: var(--gold);
    padding-left: 1.6rem;
}

.faq details[open] > summary::before {
    transform: scaleY(1);
}

/* The marker: a gold plus in the front page's icon colours, spun into a cross while the answer is open. */
.faq summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.2rem;
    width: 1.9rem;
    height: 1.9rem;
    margin-top: -0.95rem;
    border-radius: 50%;
    border: 1px solid rgba(239, 200, 119, 0.22);
    background:
        linear-gradient(var(--gold), var(--gold)) center / 0.75rem 2px no-repeat,
        linear-gradient(var(--gold), var(--gold)) center / 2px 0.75rem no-repeat,
        var(--gold-wash);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease;
}

.faq summary:hover::after {
    background-color: rgba(239, 200, 119, 0.18);
    border-color: rgba(239, 200, 119, 0.45);
}

.faq details[open] > summary::after {
    transform: rotate(135deg);
    background-color: rgba(239, 200, 119, 0.2);
}

/* Drawn inside the card rather than round it, so the ring keeps to the card's own corners. */
.faq summary:focus-visible {
    outline-offset: -3px;
}

/* The glide: the answer's box grows from nothing to its height, and shrinks back before it is hidden. */
.faq details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 0.4s allow-discrete;
}

.faq details[open]::details-content {
    block-size: auto;
}

.faq .answer {
    margin: 0 1.4rem;
    padding: 1.1rem 0 1.3rem;
    border-top: 1px solid var(--line);
}

/* The rise: each part of the answer fades up into place a moment after the one before. */
.faq details[open] .answer > * {
    animation: faq-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.faq details[open] .answer > :nth-child(2) {
    animation-delay: 0.06s;
}

.faq details[open] .answer > :nth-child(3) {
    animation-delay: 0.12s;
}

.faq details[open] .answer > :nth-child(n+4) {
    animation-delay: 0.18s;
}

@keyframes faq-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* A question a link was sent to glows once, so it is found at a glance. */
.faq details:target > summary {
    animation: faq-found 1.8s ease-out 0.2s 1;
}

@keyframes faq-found {
    0% {
        background-color: rgba(239, 200, 119, 0.22);
    }

    100% {
        background-color: transparent;
    }
}

.faq .answer p,
.faq .answer ul {
    max-width: none;
}

.faq .answer .plainly {
    max-width: none;
    margin-top: 0;
}

.faq .answer > :last-child {
    margin-bottom: 0;
}

/* The drift: topic cards and questions ease up into place as they come into view, where scroll timelines exist. */
@supports (animation-timeline: view()) {
    .faq-topics a,
    .faq details {
        animation: faq-drift linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
    }

    @keyframes faq-drift {
        from {
            opacity: 0;
            translate: 0 18px;
        }
    }
}

.faq-page .ask .buttons {
    margin-top: 1.1rem;
}

/* ---------------------------------------------------------------- the community Discord */

/* A card that sends somebody to the Discord: an icon, two lines, and the button. Stacks on a phone. */
.community {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.1rem;
    align-items: center;
    margin: 2.5rem 0 0;
    padding: 1.2rem 1.4rem;
    border: 1px solid rgba(88, 101, 242, 0.45);
    border-radius: var(--radius);
    background: linear-gradient(120deg, rgba(88, 101, 242, 0.16), transparent 60%), var(--card);
    box-shadow: var(--shadow);
}

.community-icon {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: rgba(88, 101, 242, 0.22);
    border: 1px solid rgba(88, 101, 242, 0.5);
}

.community-icon svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: none;
    stroke: #aab3ff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.community-text p {
    margin: 0;
    max-width: none;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.community-text .community-title {
    color: var(--ink);
    font-family: var(--display);
    font-weight: 650;
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.community .button {
    background: #5865f2;
    border-color: #5865f2;
    color: #ffffff;
    box-shadow: 0 10px 30px -12px rgba(88, 101, 242, 0.7);
}

.community .button:hover,
.community .button:focus {
    background: #6d78f5;
    border-color: #6d78f5;
    color: #ffffff;
}

.closing-community {
    margin-top: 1.2rem;
    color: var(--ink-soft);
}

@media (max-width: 640px) {
    .community {
        grid-template-columns: auto 1fr;
    }

    .community .button {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------- the account's computers */

.computers {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 1rem;
    display: grid;
    gap: 0.5rem;
    max-width: 42rem;
}

.computers li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
}

.computers li > span {
    display: grid;
    gap: 0.1rem;
}

.computers.removed li {
    opacity: 0.75;
}

/* ---------------------------------------------------------------- report a bug */

body.bug-page main .wrap > .eyebrow {
    display: block;
    text-align: center;
    max-width: none;
}

.bug-tip {
    margin: 1.5rem 0 0;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    background: var(--gold-wash);
    font-size: 0.93rem;
}

.bug-tip p {
    margin: 0;
}

.bug-signin {
    margin: 1.5rem 0;
    padding: 1.6rem 1.6rem 1.2rem;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--card-2), var(--card));
    box-shadow: var(--shadow);
}

.bug-signin .buttons {
    justify-content: center;
}

.bug-form fieldset {
    border: 0;
    padding: 0;
    min-width: 0;
}

.bug-form legend {
    display: block;
    padding: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.55rem;
}

.bug-form .optional {
    margin-left: 0.4rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--ink-faint);
}

.bug-form textarea {
    resize: vertical;
    line-height: 1.5;
}

/* What it is about: each choice a pill that lights gold when picked. The radio itself stays for keyboards and readers. */
.choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.field .choice {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.choice input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.choice span {
    display: block;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.choice:hover span {
    border-color: rgba(239, 200, 119, 0.45);
}

.choice input:checked + span {
    border-color: var(--gold);
    background: rgba(239, 200, 119, 0.16);
    color: var(--gold);
    transform: scale(1.03);
}

.choice input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(239, 200, 119, 0.3);
}

.bug-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.bug-sent {
    margin: 2rem 0;
    padding: 2rem 1.6rem 1.4rem;
    text-align: center;
    border: 1px solid rgba(111, 207, 151, 0.35);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--green-wash), transparent 70%), var(--card);
    box-shadow: var(--shadow);
    animation: faq-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

body.form-page main .bug-sent h2 {
    margin-top: 0.8rem;
    padding-top: 0;
    border-top: 0;
}

.bug-sent-mark {
    display: inline-grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--green-wash);
    border: 1px solid rgba(111, 207, 151, 0.45);
    animation: bug-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.bug-sent-mark svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: none;
    stroke: var(--green);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: bug-tick 0.45s ease-out 0.45s forwards;
}

@keyframes bug-pop {
    from {
        transform: scale(0.4);
        opacity: 0;
    }
}

@keyframes bug-tick {
    to {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 700px) {
    .faq-topics a {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .bug-row {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- odds and ends */

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem 1.5rem;
    margin: 1.25rem 0 2rem;
    padding: 1.3rem 1.4rem;
    list-style: none;
    max-width: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.facts dt,
.facts .label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.facts dd,
.facts .value {
    margin: 0.2rem 0 0.6rem;
    font-weight: 600;
    /* A long email address breaks within the card on a phone rather than running off it. */
    overflow-wrap: anywhere;
}

.pill,
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--green-wash);
    border: 1px solid rgba(111, 207, 151, 0.25);
    color: var(--green-deep);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    vertical-align: middle;
}

.badge {
    background: var(--gold);
    border-color: var(--gold);
    color: #15120a;
}

.empty-state {
    color: var(--ink-soft);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: var(--measure);
    background: rgba(255, 255, 255, 0.015);
}

.empty-state p:last-child {
    margin-bottom: 0;
}

.toc {
    list-style: none;
    padding: 0;
}

.toc li {
    margin-bottom: 0.4rem;
}

/*
  Things to be copied or compared character by character: the download's fingerprint and the command that checks it
  (the download page), a two-step secret. Monospaced, on a card of their own, and broken anywhere rather than pushing the
  column wider than a phone.
*/
.hash,
pre.command {
    max-width: var(--measure);
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    overflow-wrap: anywhere;
    word-break: break-all;
}

.hash {
    border: 1px solid var(--line-strong);
    background: var(--card);
    letter-spacing: 0.04em;
}

pre.command {
    margin: 0 0 1.25rem;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    white-space: pre-wrap;
}

.hash code,
pre.command code,
p code {
    font-family: var(--mono);
    font-size: 0.9rem;
}

pre.command em {
    color: var(--gold);
}

/* The download's facts under its button: close to it, since they are about it. */
.facts.release-facts {
    margin-top: -0.5rem;
}

/* A version's lists of what changed read at the size of the ticked list above them. */
.release ul:not(.ticks) li {
    margin-bottom: 0.6rem;
    font-size: 0.94rem;
    line-height: 1.5;
}

/* One version on the what's-new page: its number, then when and what it was, in small type under it. */
.release-meta {
    margin-top: -0.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* The not-found and error pages: a big number and a way back. */
.big-code {
    font-family: var(--display);
    font-size: clamp(4rem, 3rem + 5vw, 7rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    margin: 0 0 0.5rem;
    color: transparent;
    background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.25));
    -webkit-background-clip: text;
    background-clip: text;
}

/* ---------------------------------------------------------------- narrower screens */

@media (max-width: 960px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-grid > :first-child {
        grid-column: 1 / -1;
    }

    .facts-band ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .facts-band li:nth-child(3) {
        border-left: 0;
    }

    .facts-band li:nth-child(n+3) {
        border-top: 1px solid var(--line);
    }

    .showcase,
    .showcase.flip {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        margin-bottom: 4rem;
    }

    .showcase.flip .showcase-media {
        order: 0;
    }

    .features {
        grid-template-columns: repeat(2, 1fr);
    }

    .event {
        grid-template-columns: 1fr;
        padding: 1.8rem;
    }
}

@media (max-width: 720px) {
    /* Where popovers are not, the header's links wrap to a second row or a third, so an anchor lands further down. */
    html {
        scroll-padding-top: 9rem;
    }

    .site-header .wrap {
        min-height: 0;
    }

    .site-nav {
        margin-left: 0;
        width: 100%;
        gap: 0.15rem;
    }

    .site-nav a {
        padding: 0.4rem 0.55rem;
        font-size: 0.72rem;
    }

    .site-nav a.nav-cta {
        margin-left: auto;
    }

    /* Everywhere else, one row: the mark, the menu button and the sign-in button, the links in the side panel. */
    @supports selector(:popover-open) {
        html {
            scroll-padding-top: 5.5rem;
        }

        .site-header .wrap {
            flex-wrap: nowrap;
            min-height: 60px;
            gap: 0.6rem;
        }

        .menu-button {
            display: inline-flex;
        }

        .site-nav {
            width: auto;
            flex-wrap: nowrap;
        }

        .site-nav a:not(.nav-cta) {
            display: none;
        }

        .site-nav a.nav-cta {
            margin-left: 0;
            padding: 0.5rem 0.85rem;
        }
    }

    .hero {
        margin-top: 0;
        min-height: 0;
        padding: 4rem 0 6rem;
    }

    .hero::before {
        background: linear-gradient(180deg, rgba(7, 11, 16, 0.78) 0%, rgba(7, 11, 16, 0.86) 60%, var(--paper) 100%);
    }

    .features {
        grid-template-columns: 1fr;
    }

    .section {
        padding-top: 4.5rem;
    }

    main {
        padding: 2.5rem 0 4rem;
    }
}

@media (max-width: 520px) {
    .facts-band ul {
        grid-template-columns: 1fr;
    }

    .facts-band li {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .facts-band li:first-child {
        border-top: 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    th,
    td {
        padding: 0.6rem 0.75rem;
    }

    body.form-page main form:not(.inline) {
        padding: 1.4rem 1.2rem 0.2rem;
    }

    .faq summary {
        padding: 1rem 3.6rem 1rem 1.1rem;
        font-size: 1.02rem;
    }

    .faq summary::after {
        right: 0.95rem;
    }

    .faq .answer {
        margin: 0 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }

    /* The questions page and the bug report still open and answer; they just don't move. */
    .faq-topics a,
    .faq details,
    .faq details .answer > *,
    .faq summary,
    .bug-sent,
    .bug-sent-mark,
    .bug-sent-mark svg {
        animation: none !important;
        stroke-dashoffset: 0;
    }

    .faq details::details-content {
        transition: none !important;
    }
}

/* ---------------------------------------------------------------- printing */

@media print {
    :root {
        color-scheme: light;
        --bg: #ffffff;
        --paper: #ffffff;
        --card: #ffffff;
        --card-2: #ffffff;
        --ink: #000000;
        --ink-soft: #333333;
        --ink-faint: #555555;
        --line: #999999;
        --line-strong: #999999;
        --gold: #000000;
        --green: #000000;
        --green-deep: #000000;
        --green-wash: #ffffff;
        --warn-wash: #ffffff;
        --danger-wash: #ffffff;
        --shadow: none;
    }

    html,
    body {
        background: #ffffff;
    }

    body {
        font-size: 11pt;
        display: block;
    }

    .site-header {
        position: static;
        background: #ffffff;
    }

    .site-nav,
    .menu-button,
    .site-drawer,
    .skip,
    .buttons,
    .shots,
    .hero-picture,
    .closing,
    .footer-grid {
        display: none;
    }

    main::before,
    .hero::before,
    .plainly::before,
    .notice::before {
        display: none;
    }

    .plainly,
    .notice {
        padding-left: 1.2rem;
    }

    .site-header,
    .site-footer {
        border-color: #000000;
    }

    a {
        color: #000000;
        text-decoration: underline;
    }

    /* On paper a link has to say where it goes; relative ones are no use, so only absolute addresses are spelt out. */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }

    h2,
    h3 {
        break-after: avoid;
    }

    table,
    .plainly,
    .notice {
        break-inside: avoid;
    }
}

/* Keep linked sections clear of the sticky navigation. */
main [id] {
    scroll-margin-top: 7rem;
}

.setup-steps li {
    padding: 0.8rem 0 0.8rem 0.5rem;
    border-bottom: 1px solid var(--line);
}

/* /monitors: each monitor's support level, as a pill in the level's color. */
.support { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.68rem; letter-spacing: 0.1em;
    text-transform: uppercase; font-weight: 700; border: 1px solid transparent; }
.support--tested { background: var(--green-wash); border-color: rgba(111, 207, 151, 0.35); color: var(--green-deep); }
.support--should { background: rgba(214, 178, 94, 0.14); border-color: rgba(214, 178, 94, 0.35); color: var(--gold); }
.support--testers { background: rgba(120, 160, 220, 0.12); border-color: rgba(120, 160, 220, 0.35); color: rgb(150, 185, 235); }
.support--not-yet { background: transparent; border-color: var(--line); color: var(--ink-faint); }
table.monitors td { vertical-align: top; }

/* The beta offer (Pages/Beta, Accounts/BetaTesters): a thin gold strip under the header on every page while it's open. */
.beta-strip {
    position: relative;
    z-index: 2;
    background: var(--gold-wash);
    border-bottom: 1px solid rgba(239, 200, 119, 0.22);
}

/* The front page's hero tucks up under the see-through header; with the strip there, it starts below the strip. */
.beta-strip + main > .hero:first-child {
    margin-top: 0;
    padding-top: 4rem;
}

.beta-strip p {
    max-width: none;
    margin: 0;
    padding: 0.55rem 0;
    font-size: 0.9rem;
    text-align: center;
    color: var(--ink);
}

.beta-strip a {
    color: var(--gold);
    font-weight: 600;
    margin-left: 0.35rem;
    white-space: nowrap;
}

.beta-strip a::after {
    content: " \2192";
}

.beta-ask {
    max-width: var(--measure);
    margin: 2rem 0;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.02);
}

.beta-ask h2 {
    margin-top: 0;
}

.beta-form .field input[type="text"],
.beta-form .field textarea {
    width: 100%;
}

@media (max-width: 560px) {
    .beta-ask {
        padding: 1.1rem 1rem;
    }
}

/* A small phone: the mark, MENU and ACCOUNT (the longest of the header's buttons) all on one row, inside the screen. */
@media (max-width: 420px) {
    .site-header .wrap {
        gap: 0.45rem;
    }

    .brand {
        gap: 0.4rem;
        font-size: 1rem;
        letter-spacing: 0.08em;
    }

    .brand svg {
        width: 28px;
        height: 17px;
    }

    .menu-button {
        gap: 0.4rem;
        padding: 0.45rem 0.6rem;
        letter-spacing: 0.08em;
    }

    .site-nav a.nav-cta {
        padding: 0.45rem 0.7rem;
        letter-spacing: 0.06em;
    }
}

/* The smallest phones (320 px): MENU is its three bars alone. The button keeps its label for screen readers. */
@media (max-width: 350px) {
    .menu-button .menu-word {
        display: none;
    }

    .menu-button {
        padding: 0.45rem 0.55rem;
    }
}