/*
 * PoE2 Oracle's site: the landing pages (index.html, ru/index.html), the report form
 * (report.html, ru/report.html) and the code signing policy (code-signing.html,
 * ru/code-signing.html).
 * Colours are the app's own (crates/poe2-oracle/src/ui/theme.rs): the near-black panel, gold
 * accents and the nameplate faces, Alegreya SC for English and Philosopher for Russian.
 * The landing reads top to bottom as a player's questions come: what it is and the download, how it
 * works, what it does, how light it is, why to trust it, the rest of the doubts, the download again.
 */

@font-face {
    font-family: "Alegreya SC";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/AlegreyaSC-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Philosopher";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/Philosopher-Bold.ttf") format("truetype");
}

:root {
    --bg: #0e0e10;
    --bg-deep: #060607;
    --bg-warm: #17130d;
    --bg-control: #1e1e22;
    --bg-stripe: #17171a;
    --bg-button: #1f1811;
    --bg-button-hover: #33261a;
    --border: #2b2b30;
    --border-gold: #6b5022;
    --gold: #d0913b;
    --gold-bright: #ecc94b;
    --text: #dcdcdc;
    --text-dim: #9d9da3;
    /* The darkest gray that keeps 4.5:1 (WCAG AA) on every site background, --bg-control's
       #1e1e22 included; the app's own #66666c read 3.55:1 on the footer. */
    --text-muted: #86868c;
    --warning: #e0664f;
    --display: "Alegreya SC", Georgia, "Times New Roman", serif;
    --display-weight: 500;
    --body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --width: 72rem;
    color-scheme: dark;
}

html[lang="ru"] {
    --display: "Philosopher", Georgia, "Times New Roman", serif;
    --display-weight: 700;
}

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

html {
    background: var(--bg-deep);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.6;
}

a {
    color: var(--gold);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--gold-bright);
}

h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: var(--display-weight);
    line-height: 1.2;
    color: var(--gold);
    /* A heading that wraps splits into even lines, never leaving one word on its own. */
    text-wrap: balance;
}

h2 {
    font-size: 2rem;
    margin: 0 0 1rem;
}

h3 {
    font-size: 1.45rem;
    margin: 0 0 0.6rem;
}

p {
    margin: 0 0 1rem;
}

img {
    max-width: 100%;
    height: auto;
}

kbd {
    display: inline-block;
    padding: 0 0.4em;
    border: 1px solid var(--border-gold);
    border-radius: 3px;
    background: var(--bg-button);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9em;
    line-height: 1.5;
    white-space: nowrap;
}

/* Keys pressed together (Ctrl+E, Ctrl+Alt+C) keep the plus between them clear of both caps.
   Sibling selectors skip the "+" text, so this finds every keycap next to another. */
kbd:has(+ kbd) {
    margin-right: 0.25em;
}

kbd + kbd {
    margin-left: 0.25em;
}

/* A key combination such as Ctrl+E stays on one line. */
.keys {
    white-space: nowrap;
}

.wrap {
    max-width: var(--width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.skip-link {
    position: absolute;
    left: -999px;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    padding: 0.5rem 1rem;
    background: var(--bg-button);
    border: 1px solid var(--gold);
}

/* Read by screen readers, not shown: a pause between the hero's name and its claim. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Top bar */

.topbar {
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border-gold);
}

.topbar .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    min-height: 3.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: auto;
    color: var(--gold);
    font-family: var(--display);
    font-weight: var(--display-weight);
    font-size: 1.35rem;
    text-decoration: none;
}

.brand img {
    width: 2rem;
    height: 2rem;
}

.topnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.topnav a {
    color: var(--text-dim);
    text-decoration: none;
}

.topnav a:hover {
    color: var(--text);
}

.lang-switch {
    display: flex;
    gap: 0.25rem;
}

.lang-switch a,
.lang-switch span {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--bg-control);
    border-radius: 3px;
    font-size: 0.85rem;
}

.lang-switch a {
    background: var(--bg-control);
}

.lang-switch span {
    background: var(--bg-button);
    border-color: var(--gold);
    color: var(--gold);
}

/* The landing's own sections in the top bar: a phone keeps only the language switch. */
.topnav-section a {
    white-space: nowrap;
}

/* On a phone the landing's header is the brand and the language switch: one row, whichever font
   the brand is in while the page's own loads. A row that wrapped in the fallback font and then
   didn't would move the whole page; the brand is cut short for that moment instead. */
.topbar:has(.topnav-section) .wrap {
    flex-wrap: nowrap;
}

.topbar:has(.topnav-section) .brand {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* The bar that brings the download button back once the hero's has scrolled away (ui/download.js
   shows it). Fixed over the page, it moves nothing when it comes and goes. */
.stickybar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    background: rgba(6, 6, 7, 0.95);
    border-bottom: 1px solid var(--border-gold);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
}

.stickybar.is-shown {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .stickybar,
    .stickybar.is-shown {
        transition: none;
    }
}

.stickybar .wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem 1.25rem;
    min-height: 3.5rem;
}

.stickybar .brand {
    font-size: 1.2rem;
}

.stickybar-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.stickybar .button {
    min-height: 2.4rem;
    padding: 0.3rem 1.1rem;
    font-size: 1rem;
}

/* Hero */

.hero {
    padding: 4rem 0 3rem;
    background: radial-gradient(ellipse at top, var(--bg-warm), var(--bg) 70%);
    border-bottom: 1px solid var(--border);
    text-align: center;
}

/* The app's name, big and next to its mark, then the claim under it: the name is what a visitor
   should take away from the page. */
.hero-title {
    margin: 0 0 1.25rem;
}

.hero-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    font-size: clamp(2.25rem, 11vw, 5.75rem);
    line-height: 1.05;
    white-space: nowrap;
}

/* The mark, favicon.png: the 256 px one the app's icon is drawn from. */
.hero-brand img {
    width: 0.95em;
    height: 0.95em;
    filter: drop-shadow(0 0 0.3em rgba(236, 201, 75, 0.28));
}

.hero-name {
    color: var(--gold);
    filter: drop-shadow(0 0.15rem 0.6rem rgba(0, 0, 0, 0.65));
}

/* Gold lit from the top, in the ramp of the mark's rim (packaging/icon/generate_icon.py, RIM). */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .hero-name {
        background: linear-gradient(180deg, #f8de95 0%, var(--gold-bright) 40%, var(--gold) 72%, #a8702a 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.hero-claim {
    display: block;
    margin-top: 0.5rem;
    color: var(--text);
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
}

.hero .lead {
    max-width: 44rem;
    margin: 0 auto 1.75rem;
    color: var(--text-dim);
    font-size: 1.2rem;
    text-wrap: pretty;
}

/* Measured numbers under the picture, filled in from ui/data/bench.json by ui/bench.js, as are the
   "Fast and light" section's. */
.proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 52rem;
    margin: 2.5rem auto 0.9rem;
    padding: 0;
    list-style: none;
}

.proof li {
    padding: 0.85rem 0.75rem 0.95rem;
    border: 1px solid var(--border-gold);
    border-radius: 4px;
    background: rgba(6, 6, 7, 0.5);
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.35;
}

.proof b,
.claims b,
.facts b {
    display: block;
    min-height: 1.15em;
    color: var(--gold-bright);
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: lining-nums;
    white-space: nowrap;
}

.proof b {
    margin-bottom: 0.3rem;
    font-size: 1.9rem;
}

.proof-more {
    margin: 0;
    font-size: 0.95rem;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-control);
    color: var(--text-dim);
    font-weight: 600;
    text-decoration: none;
}

.button:hover {
    border-color: var(--text-dim);
    color: var(--text);
}

.button-primary {
    background: var(--bg-button);
    border-color: var(--gold);
    color: var(--gold);
    font-size: 1.1rem;
}

.button-primary:hover {
    background: var(--bg-button-hover);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}

/* A secondary action that stays secondary: no fill, a quiet edge. */
.button-quiet {
    background: transparent;
}

.fineprint {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Under a download button, what stops a download: what it costs, what it needs, the installer's
   size (ui/bench.js) and, once the service names it (ui/download.js), the latest version. */
.cta-note {
    max-width: 44rem;
    margin: 0.35rem auto 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-wrap: balance;
}

.shot {
    margin: 2.5rem auto 0;
    padding: 0;
}

.shot img,
.feature img {
    display: block;
    margin: 0 auto;
    border: 1px solid var(--border-gold);
    border-radius: 4px;
    background: var(--bg-deep);
}

.shot img {
    margin: 0 auto;
}

/* The app's interface drawn from data (ui/oracle-ui.js), centred in its figure. The drawing keeps
   its own width; data-fit scales it down to the figure's. */
.shot > .oui,
.feature-media > .oui {
    display: flex;
    justify-content: center;
}

.shot > .oui > *,
.feature-media > .oui > * {
    flex: none;
}

/* Until its drawing is in, the hero's picture keeps the room it will take, framed as it will be, so
   that the numbers under it don't jump: data/hero.<lang>.json draws 941.5 x 864 px at scale 1 in
   either language (measured in the page), and data-fit only ever scales that down to the figure's
   width. A change to the hero's parts changes these numbers. Empty, not "not .oui": oracle-ui.js
   marks the element before the drawing arrives. */
.shot > [data-oracle="hero"]:empty {
    width: min(100%, 941.5px);
    margin: 0 auto;
    aspect-ratio: 941.5 / 864;
    border: 1px solid var(--border-gold);
    border-radius: 6px;
    background: linear-gradient(180deg, #15120f, #060607);
}

/* Sections */

.section {
    padding: 4rem 0;
    border-bottom: 1px solid var(--border);
}

.section-alt {
    background: var(--bg-stripe);
}

.section > .wrap > p.intro {
    max-width: 48rem;
    color: var(--text-dim);
}

/* In-page links land below the bar that may cover the page's top. */
.section[id] {
    scroll-margin-top: 3.5rem;
}

/* How it works: three numbered steps side by side, from the download to the price. */
.how {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: how;
}

.how li {
    position: relative;
    padding: 1.2rem 1.25rem 1.3rem 4.25rem;
    border: 1px solid var(--border-gold);
    border-radius: 4px;
    background: rgba(6, 6, 7, 0.5);
    counter-increment: how;
}

.how li::before {
    content: counter(how);
    position: absolute;
    left: 1.1rem;
    top: 1.05rem;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid var(--gold);
    border-radius: 50%;
    background: var(--bg-button);
    color: var(--gold-bright);
    font-family: var(--display);
    font-weight: var(--display-weight);
    font-size: 1.25rem;
    line-height: 1;
}

.how h3 {
    font-size: 1.25rem;
}

.how p {
    margin: 0;
    color: var(--text-dim);
}

.how-needs {
    margin: 1.25rem 0 0;
    color: var(--text-dim);
}

/* Fast and light: the claims, the comparison (ui/bench.css) and its note, then the timings and
   sizes. */

.fast-heading {
    margin-top: 3rem;
}

/* The comparison's outcome, above its table: how many times less PoE2 Oracle needs. */
.claims {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.claims li {
    padding: 1rem 1.25rem 1.1rem;
    border: 1px solid var(--border-gold);
    border-radius: 4px;
    background: rgba(6, 6, 7, 0.5);
    color: var(--text);
    line-height: 1.4;
}

.claims b {
    margin-bottom: 0.35rem;
    font-size: 2rem;
}

.bench-note {
    max-width: 48rem;
    margin: 1rem 0 0;
    color: var(--text-dim);
    font-size: 0.95rem;
}

.facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.facts li {
    padding: 1rem 1.25rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-control);
    color: var(--text-dim);
    line-height: 1.45;
}

.facts b {
    margin-bottom: 0.35rem;
    font-size: 1.6rem;
}

.facts-note {
    margin: 1rem 0 0;
}

/* The download again, once the comparison has made its case. */
.cta-band {
    margin-top: 3rem;
    padding: 2rem 1.5rem;
    border: 1px solid var(--border-gold);
    border-radius: 4px;
    background: radial-gradient(ellipse at top, var(--bg-warm), var(--bg) 75%);
    text-align: center;
}

.cta-band-title {
    margin: 0 0 1rem;
    color: var(--gold);
    font-family: var(--display);
    font-weight: var(--display-weight);
    font-size: 1.6rem;
    line-height: 1.2;
}

.feature {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2rem 3rem;
    align-items: center;
    margin-top: 3.5rem;
}

/* The screenshot takes the wider column on either side. */
.feature:nth-of-type(even) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.feature:nth-of-type(even) .feature-media {
    order: -1;
}

.feature p,
.feature li {
    color: var(--text-dim);
}

.feature ul {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
}

.feature figure {
    margin: 0;
}

/* The feature's name over its heading: what it gives. */
.feature-name {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text-muted);
    font-family: var(--body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Why you can trust it: one card per promise. The two short ones share the first row, the three
   longer ones the next. */
.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.trust li {
    flex: 1 1 18rem;
    padding: 1.1rem 1.25rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-control);
    color: var(--text-dim);
}

.trust li:nth-child(-n + 2) {
    flex-basis: max(calc(50% - 0.5rem), 18rem);
}

.trust h3 {
    margin-bottom: 0.4rem;
    font-size: 1.25rem;
}

.trust p {
    margin: 0 0 0.5rem;
}

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

/* Questions and answers: each opens by itself, with the keyboard as with the mouse. The rows span
   the section's whole width, as the blocks above them do; an answer keeps a line short enough to
   read. */
.faq {
    margin: 1.5rem 0 0;
    border-top: 1px solid var(--border);
}

.faq details {
    border-bottom: 1px solid var(--border);
}

.faq summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0.25rem;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

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

/* The sign is drawing only: a screen reader hears the question and whether it's open. */
.faq summary::after {
    content: "+" / "";
    flex: none;
    width: 1rem;
    color: var(--gold);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

.faq details[open] > summary::after {
    content: "−" / "";
}

.faq summary:hover {
    color: var(--gold-bright);
}

.faq summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.faq-answer {
    max-width: 52rem;
    padding: 0 0.25rem 1.1rem;
    color: var(--text-dim);
}

.faq-answer p {
    margin: 0 0 0.75rem;
}

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

.faq-more {
    margin: 1.5rem 0 0;
    color: var(--text-dim);
}

/* The last word: the download once more. */
.final {
    background: radial-gradient(ellipse at bottom, var(--bg-warm), var(--bg) 70%);
    text-align: center;
}

.final h2 {
    font-size: clamp(1.75rem, 4vw, 2.4rem);
}

.final-lead {
    max-width: 40rem;
    margin: 0 auto 1.5rem;
    color: var(--text-dim);
    font-size: 1.1rem;
}

/* After a press of a download button (ui/download.js), under it: the download has started, and
   what comes next. */
.after-download {
    position: relative;
    max-width: 34rem;
    margin: 1rem auto 0;
    padding: 1rem 2.75rem 1.1rem 1.25rem;
    border: 1px solid var(--gold);
    border-radius: 4px;
    background: var(--bg-warm);
    color: var(--text-dim);
    text-align: left;
}

.after-title {
    margin: 0 0 0.5rem;
    color: var(--gold-bright);
    font-weight: 600;
}

.after-steps {
    margin: 0 0 0.75rem;
    padding-left: 1.3rem;
}

.after-steps li {
    margin-bottom: 0.4rem;
}

.after-steps li::marker {
    color: var(--gold);
    font-weight: 600;
}

/* The installer's name, whole on one line. */
.after-steps b {
    white-space: nowrap;
}

.after-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.after-close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: none;
    color: var(--text-dim);
    font: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.after-close:hover {
    background: var(--bg-control);
    color: var(--text);
}

.after-close:focus-visible {
    outline: 2px solid var(--gold);
}

/* Pressed in the bar at the top, the same words hang under its button. */
.stickybar .cta {
    position: relative;
}

.stickybar .after-download {
    position: absolute;
    top: calc(100% + 1.1rem);
    right: 0;
    width: min(32rem, calc(100vw - 2rem));
    margin: 0;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.6);
}

.note {
    margin-top: 1.5rem;
    padding: 0.9rem 1.2rem;
    border: 1px solid var(--border-gold);
    border-radius: 4px;
    background: var(--bg-warm);
    color: var(--text-dim);
}

/* Footer */

.footer {
    padding: 2.5rem 0 3rem;
    background: var(--bg-deep);
    border-top: 1px solid var(--border-gold);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.footer-links a {
    color: var(--text-dim);
}

.footer p {
    margin-bottom: 0.5rem;
}

.footer a {
    color: var(--text-dim);
}

/* Report form */

.wrap.narrow {
    max-width: 46rem;
}

.page-title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 5vw, 2.75rem);
}

.report-form {
    margin-top: 2rem;
}

.field {
    min-width: 0;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

.field > label,
.field > legend {
    display: block;
    margin-bottom: 0.5rem;
    padding: 0;
    color: var(--text);
    font-weight: 600;
}

.report-form textarea,
.report-form input[type="text"] {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-control);
    color: var(--text);
    font: inherit;
}

.report-form textarea {
    min-height: 12rem;
    resize: vertical;
}

.report-form textarea::placeholder,
.report-form input::placeholder {
    color: var(--text-muted);
}

.report-form textarea:focus-visible,
.report-form input[type="text"]:focus-visible {
    border-color: var(--gold);
    outline: 1px solid var(--gold);
}

/* Problem or Idea, as one control like the app's kind switch. The radios stay in the page, only
   out of sight, so keys and screen readers work as with plain radios. */
.segmented {
    display: inline-flex;
    border: 1px solid var(--border-gold);
    border-radius: 3px;
}

.segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented label {
    padding: 0.4rem 1.25rem;
    background: var(--bg-control);
    color: var(--text-dim);
    cursor: pointer;
}

.segmented label + input + label {
    border-left: 1px solid var(--border-gold);
}

.segmented label:hover {
    color: var(--text);
}

.segmented input:checked + label {
    background: var(--bg-button-hover);
    color: var(--gold-bright);
}

.segmented input:focus-visible + label {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.counter,
.hint {
    margin: 0.4rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.counter {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The honeypot: a field people never see and bots fill in. */
.honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1.5rem;
}

button.button {
    font-family: inherit;
    cursor: pointer;
}

button.button:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.status {
    margin: 0;
}

.status.error {
    color: var(--warning);
}

.status.sent {
    margin-bottom: 1.25rem;
    color: var(--gold-bright);
    font-size: 1.2rem;
}

.report-sent {
    margin-top: 2rem;
}

/* Code signing policy: a text page with sections, lists and commands. */

.policy h2 {
    margin-top: 2.5rem;
    font-size: 1.6rem;
}

.policy ul,
.policy ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.policy li {
    margin-bottom: 0.5rem;
}

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

.policy strong {
    color: var(--text);
}

.policy code {
    padding: 0.05em 0.35em;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-control);
    font-family: Consolas, "Cascadia Mono", "DejaVu Sans Mono", monospace;
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

.policy pre {
    margin: 0.6rem 0 0;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-control);
}

.policy pre code {
    padding: 0;
    border: 0;
    background: none;
    overflow-wrap: normal;
}

@media (max-width: 52rem) {
    .feature,
    .feature:nth-of-type(even) {
        grid-template-columns: minmax(0, 1fr);
    }

    .feature:nth-of-type(even) .feature-media {
        order: 0;
    }

    .hero {
        padding-top: 2.5rem;
    }

    .section {
        padding: 3rem 0;
    }

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

    .topnav-section {
        display: none;
    }

    .how {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 40rem) {
    .hero .lead {
        font-size: 1.05rem;
    }

    .proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .proof li {
        padding: 0.6rem 0.5rem 0.7rem;
        font-size: 0.85rem;
    }

    .proof b {
        margin-bottom: 0.15rem;
        font-size: 1.6rem;
    }

    .claims,
    .facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .claims {
        gap: 0.5rem;
    }

    .claims b {
        font-size: 1.75rem;
    }

    .stickybar-note {
        display: none;
    }

    .stickybar .brand {
        font-size: 1.05rem;
    }

    .stickybar .button {
        padding: 0.3rem 0.85rem;
    }

    .how li {
        padding: 1rem 1rem 1.1rem 3.75rem;
    }

    .how li::before {
        left: 0.85rem;
        top: 0.9rem;
    }

    .cta-band {
        padding: 1.5rem 1rem;
    }

    .after-download {
        padding-right: 2.5rem;
        padding-left: 1rem;
    }
}

/* Too narrow for the name beside "Download for Windows": the bar keeps the mark, and the name stays
   for a screen reader. */
@media (max-width: 26rem) {
    .stickybar-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}