/*
 * remoty.work design system -- re-pointed 2026-08-23 to match the live
 * Astro site (remoty-site/tailwind.config.mjs) rather than the earlier
 * "case file" redesign: Inter + JetBrains Mono, the olive/emerald accent,
 * a cooler ink/paper palette. Per explicit owner direction: the whole app
 * must look like the site it's replacing, not a separate redesign. Every
 * page composes these same custom properties, so re-pointing them here is
 * a sitewide reskin without touching per-page markup. The grade-stamp
 * verdict colors (--verified/--flag/--grade-amber) are kept as-is -- they
 * are a functional semantic (pass/fail/mid), not a brand color, and are
 * the one piece of the old system the owner explicitly liked.
 *
 * 2026-10-03: made a SYSTEM rather than a palette. One radius scale, one
 * shadow scale, one set of components (.btn, .chip, .card, .eyebrow,
 * .callout, .stat, form fields) that every page composes, and every page's
 * former inline <style> block moved in here under its page class. Before
 * this there were seven corner radii, four unrelated button styles and two
 * font variables that did not exist. If a page needs a new look, add a
 * component here -- never an inline <style>.
 *
 * Served as a static file (like /js/*.js) rather than through Vite: this app
 * has no JS build step in the deploy path, and one cached stylesheet beats an
 * inline <style> repeated on every SSR response.
 */

:root {
    /* colour -- the palette is unchanged; only its uses are now systematic */
    --ink: hsl(240 5% 8%);           /* near-black -- primary text */
    --paper: hsl(240 5% 96%);        /* page ground */
    --card: hsl(40 20% 98%);         /* cream -- cards, inputs */
    --white: hsl(0 0% 100%);
    --verified: #2E6B4F;     /* pass state, grades A/B, "Verified" */
    --flag: #B23A2E;         /* ghost jobs, scams, grades D-F */
    --grade-amber: #C98A2C;  /* C grade, mid-tier signals */
    --line: hsl(240 5% 8% / 0.08);   /* hairline */
    --line-strong: hsl(240 5% 8% / 0.16);
    --line-soft: hsl(240 5% 8% / 0.05);
    --muted: hsl(240 3% 40%);        /* secondary prose / meta */
    --ink-faint: hsl(240 3% 62%);    /* counts, timestamps, tertiary meta */
    --paper-muted: hsl(240 4% 92%);  /* alternating bands on the paper ground */
    --olive: hsl(160 84% 39%);       /* accent -- links, CTAs, active state */
    --olive-ink: hsl(160 84% 26%);   /* accent as TEXT on light ground (AA contrast) */
    --olive-soft: hsl(160 60% 50%);
    --olive-wash: hsl(160 84% 39% / 0.08);
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --accent-gradient: linear-gradient(120deg, var(--olive), var(--emerald-400));

    /* type */
    --display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Aliases. Several templates were written against --font-mono and
       --font-display, which never existed, and silently fell back to the
       browser's default monospace -- and on the review page, to Georgia. */
    --font-mono: var(--mono);
    --font-display: var(--display);

    /* shape -- one radius scale for every surface */
    --radius-sm: 8px;     /* badges, inputs (design system v1) */
    --radius: 12px;       /* base radius (design system v1) */
    --radius-lg: 16px;    /* cards, panels */
    --radius-pill: 999px; /* chips, badges */

    /* depth -- a ring instead of a border, so every surface shares one edge */
    --ring: 0 0 0 1px hsl(240 5% 8% / 0.07);
    --shadow-1: var(--ring), 0 1px 2px hsl(240 5% 8% / 0.04);
    --shadow-2: 0 0 0 1px hsl(240 5% 8% / 0.12), 0 6px 18px hsl(240 5% 8% / 0.07);
    --shadow-pop: 0 0 0 1px hsl(240 5% 8% / 0.1), 0 12px 32px hsl(240 5% 8% / 0.16);
    --glow: 0 4px 16px hsl(160 84% 39% / 0.28);

    /* motion */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --fast: .15s;

    --measure: 62rem;
}

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

html { -webkit-text-size-adjust: 100%; }

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

main {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

/* ---------------------------------------------------------------- type --- */

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 600;
    font-optical-sizing: auto;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 2rem 0 0.75rem;
}

h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); margin-top: 0.5rem; }
h2 { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.7rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1rem; max-width: 42rem; }

a { color: var(--olive); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

strong { font-weight: 650; }

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

/* Breadcrumb-ish nav lines that sit above an h1 on hub/detail pages. */
main > nav {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 1.25rem;
}
main > nav a { color: var(--muted); text-decoration: none; }
main > nav a:hover { color: var(--olive); }

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

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brand-logo { height: 2rem; width: auto; display: block; }

/* The hand-inked "R" from the marketing assets, rebuilt in type: the letter
   set in the display serif inside an irregular hand-drawn box. */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--paper);
    background: var(--ink);
    border-radius: 225px 15px 200px 15px/15px 200px 15px 225px;
    transform: rotate(-3deg);
}

.brand-name { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.brand-tag {
    display: block;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.site-nav { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.site-nav a {
    font-family: var(--body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    transition: background-color .15s, color .15s;
}
.site-nav a:hover { color: var(--ink); background: hsl(240 5% 8% / 0.04); }

.site-footer {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--muted);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 0.75rem; }
.site-footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.site-footer a:hover { color: var(--ink); }
.site-footer p { max-width: 46rem; margin: 0; }

/* ------------------------------------------------------- the grade stamp -- */
/*
 * The one memorable motif. A customs/verification stamp: the letter grade in
 * mono bold, inside a deliberately irregular border (the asymmetric
 * border-radius makes the ring hand-drawn rather than CSS-perfect), rotated
 * a few degrees off-axis, with a second inset ring so it reads as inked
 * rather than as a chip. Used ONLY where a grade appears.
 */
.stamp {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    flex: 0 0 auto;
    font-family: var(--mono);
    font-weight: 700;
    line-height: 1;
    color: var(--verified);
    border: 2px solid currentColor;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
    background: transparent;
    transform: rotate(-4deg);
    opacity: 0.92;
}
.stamp-letter { font-size: 1.25rem; }
.stamp-label {
    font-size: 0.42rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 0.18rem;
    font-weight: 600;
}

.stamp--pass { color: var(--verified); }
.stamp--mid  { color: var(--grade-amber); transform: rotate(-2.5deg); }
.stamp--fail { color: var(--flag); transform: rotate(3deg); }

.stamp--lg { width: 4.6rem; height: 4.6rem; }
.stamp--lg .stamp-letter { font-size: 1.9rem; }
.stamp--lg .stamp-label { font-size: 0.5rem; }

.stamp--sm { width: 2.5rem; height: 2.5rem; border-width: 1.5px; }
.stamp--sm .stamp-letter { font-size: 1rem; }
.stamp--sm .stamp-label { display: none; }

/* ----------------------------------------------------------- case files --- */
/*
 * A listing is a case file, not a marketing card: title, the facts in mono,
 * a hairline, then the verdict.
 */
.job-list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0.6rem; }

.job-list > li {
    background: linear-gradient(to bottom, var(--card), var(--paper));
    border: none;
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-lg);
    padding: 0.9rem 1.15rem;
    position: relative;
    transition: box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.job-list > li:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }

.case-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

.case-title {
    font-family: var(--body);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0;
}
.case-title a { color: var(--ink); text-decoration: none; }
.case-title a:hover { color: var(--olive); }
/* Stretched-link: the title's <a> covers the whole card, so the entire row
   is clickable, not just the title text. Other links inside the card (the
   company link in .case-facts) sit above it via z-index so they still work
   as their own destination. */
.case-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.case-facts a { position: relative; z-index: 2; }

/* "The facts" -- who, where, what it pays, when it was seen. */
.case-facts {
    font-family: var(--body);
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0.3rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
}
/* Interpuncts between the facts, so a row reads as a filed line of data
   rather than a run-on sentence. */
.case-facts > *:not(:first-child)::before {
    content: "·";
    color: var(--line);
    margin-right: 0.85rem;
}
.case-facts a { color: var(--muted); }
.case-facts .fact-salary { color: var(--olive); font-weight: 600; }

/* The rule between the facts and the verdict. */
.case-verdict {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
}
.case-verdict-note {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--muted);
}

/* A flag is never just a colour: the reason is spelled out, because the
   reason is the product. */
.flag-note {
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
    color: var(--flag);
    display: block;
    margin-top: 0.35rem;
}
.flag-note--block {
    border-left: 2px solid var(--flag);
    background: color-mix(in srgb, var(--flag) 5%, transparent);
    padding: 0.5rem 0.75rem;
    margin: 0.9rem 0;
}

.verified-note { color: var(--verified); }

/* ------------------------------------------------------------- job page --- */

.case-file-header {
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}
.case-file-header .stamp { float: right; margin: 0.25rem 0 0.75rem 1.25rem; }

.case-dossier {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.85rem 1.5rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 0.9rem 0;
    margin: 1.25rem 0;
}
.dossier-item { display: flex; flex-direction: column; gap: 0.15rem; }
.dossier-label {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.dossier-value { font-family: var(--mono); font-size: 0.9rem; color: var(--ink); }

.job-body { max-width: 42rem; margin: 1.5rem 0; line-height: 1.65; }
.job-body p { margin-bottom: 1rem; }

/* Employer copy keeps its own structure now (see App\Support\Html\DescriptionHtml).
   These rules are what make that structure read as a document rather than a
   dump: headings that step down from the job title, lists that look like
   lists, and a link style that is visibly a link inside body prose. */
.job-body h3,
.job-body h4,
.job-body h5 {
    font-family: var(--display);
    line-height: 1.25;
    margin: 1.75rem 0 0.6rem;
}
.job-body h3 { font-size: 1.2rem; }
.job-body h4 { font-size: 1.05rem; }
.job-body h5 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #6b6b6b); }
.job-body > *:first-child { margin-top: 0; }
.job-body ul,
.job-body ol { margin: 0 0 1rem 1.25rem; padding-left: 0.75rem; }
.job-body ul { list-style: disc; }
.job-body ol { list-style: decimal; }
.job-body li { margin-bottom: 0.4rem; }
.job-body li::marker { color: var(--olive, #6b7f4b); }
.job-body strong, .job-body b { font-weight: 650; }
.job-body a {
    color: var(--olive, #4a6b3f);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.job-body blockquote {
    margin: 1.25rem 0;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 3px solid var(--line, #d8d3c7);
    color: var(--muted, #6b6b6b);
}
.job-body hr { border: 0; border-top: 1px solid var(--line, #d8d3c7); margin: 1.75rem 0; }
.job-body pre,
.job-body code { font-family: var(--mono); font-size: 0.87em; }
.job-body pre { overflow-x: auto; padding: 0.75rem; background: rgba(0, 0, 0, 0.04); border-radius: var(--radius-sm); }
.job-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem; display: block; overflow-x: auto; }
.job-body th, .job-body td { border: 1px solid var(--line, #d8d3c7); padding: 0.4rem 0.6rem; text-align: left; }

.apply-cta {
    display: inline-block;
    font-family: var(--body);
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    background: var(--accent-gradient);
    text-decoration: none;
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius);
    box-shadow: var(--glow);
    transition: transform .15s, box-shadow .15s;
}
.apply-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px hsl(160 84% 39% / 0.34); }

/* ---------------------------------------------------------------- tags ---- */

.tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.45rem;
    margin: 0 0.25rem 0.3rem 0;
}
.tag--flag { color: var(--flag); border-color: color-mix(in srgb, var(--flag) 40%, var(--line)); }
.tag--pass { color: var(--verified); border-color: color-mix(in srgb, var(--verified) 40%, var(--line)); }

/* --------------------------------------------------------- panels etc. ---- */


.pool-file > h3 { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.pool-file .pool-stats {
    font-family: var(--body);
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0.2rem 0 0.4rem;
}
.pool-file .job-list { margin: 0.9rem 0 0; }

.archived-banner {
    background: color-mix(in srgb, var(--grade-amber) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--grade-amber) 45%, var(--line));
    border-left: 3px solid var(--grade-amber);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.5rem;
}
.archived-banner p { margin: 0; }

/* The lede under an h1 -- one editorial sentence, then back to data. */
.lede { font-size: 1.08rem; color: var(--muted); max-width: 40rem; }
.lede strong { color: var(--ink); }

.stat-line {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--muted);
    text-transform: uppercase;
}

.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.tier {
    background: linear-gradient(to bottom, var(--card), var(--paper));
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
}
.tier--paid { box-shadow: 0 0 0 2px var(--olive), 0 1px 2px hsl(240 5% 8% / 0.04); }
.tier h3 { margin-top: 0; }
.tier-price { font-family: var(--body); font-weight: 600; font-size: 0.9rem; color: var(--olive); }
.tier p { font-size: 0.92rem; }

/* ========================================================== COMPONENTS ===== */
/*
 * The vocabulary every page speaks. Use these classes; do not restyle a
 * button, a card or a label inside a page module.
 */

:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
::selection { background: hsl(160 84% 39% / 0.18); }

/* ---------------------------------------------------------------- .btn ---- */
/*
 * Four kinds, one shape:
 *   --primary  the one action a page exists for (Apply, Alert me). Gradient.
 *   --dark     a strong secondary (submit a form that is not the main ask).
 *   --ghost    everything else that is a button. Also the default for any
 *              un-classed <button>, so a forgotten class still looks right.
 *   --quiet    a link that behaves like a button.
 */
/* `button` excludes Flux's own components (data-flux-button): this sheet is
   unlayered, so on the signed-in dashboard it would otherwise override Flux. */
.btn, button:not([data-flux-button]), .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-family: var(--body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ink);
    background: var(--white);
    border: 0;
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--line-strong);
    padding: 0.6rem 1.05rem;
    cursor: pointer;
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
                background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover, button:not([data-flux-button]):hover, .button:hover {
    color: var(--ink);
    box-shadow: 0 0 0 1px hsl(240 5% 8% / 0.3), 0 2px 8px hsl(240 5% 8% / 0.06);
}
.btn:active, button:not([data-flux-button]):active { transform: translateY(1px); }
button:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--primary {
    color: var(--white);
    background: var(--accent-gradient);
    box-shadow: var(--glow);
}
.btn--primary:hover { color: var(--white); transform: translateY(-1px); box-shadow: 0 8px 22px hsl(160 84% 39% / 0.34); }

.btn--dark { color: var(--paper); background: var(--ink); box-shadow: none; }
.btn--dark:hover { color: var(--white); background: var(--olive-ink); box-shadow: none; }

.btn--ghost { background: var(--white); }

.btn--quiet { background: transparent; box-shadow: none; color: var(--olive-ink); padding-inline: 0.6rem; }
.btn--quiet:hover { background: var(--olive-wash); box-shadow: none; color: var(--olive-ink); }

.btn--lg { font-size: 0.95rem; padding: 0.8rem 1.4rem; border-radius: var(--radius); }
.btn--sm { font-size: 0.8rem; padding: 0.4rem 0.75rem; }
.btn-aside { font-weight: 500; color: var(--muted); }

/* --------------------------------------------------------------- .chip ---- */
/* A choice: a tap-to-report, a poll answer, a filter. Pill-shaped, so it can
   never be mistaken for the page's main action. */
.chip {
    white-space: normal;   /* long answers wrap on a phone instead of overflowing */
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--body);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink);
    background: var(--white);
    border: 0;
    box-shadow: 0 0 0 1px var(--line-strong);
    border-radius: var(--radius-pill);
    padding: 0.45rem 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--fast) var(--ease);
}
.chip:hover { color: var(--olive-ink); background: var(--olive-wash); box-shadow: 0 0 0 1px hsl(160 84% 39% / 0.45); }
.chip.is-active, .chip[aria-pressed="true"] {
    color: var(--white);
    background: var(--ink);
    box-shadow: none;
}
[aria-pressed="true"]:not(.chip) { outline: 2px solid var(--olive); }

/* --------------------------------------------------------------- .card ---- */
.card, .widget {
    background: linear-gradient(to bottom, var(--card), var(--paper));
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.4rem;
    margin: 1.5rem 0;
}
.card > :first-child, .widget > :first-child { margin-top: 0; }
.card > :last-child, .widget > :last-child { margin-bottom: 0; }
.card h2, .widget h2 { font-size: 1.15rem; margin: 0.15rem 0 0.5rem; }
.card h3, .widget h3 { margin-top: 0; }
.card--accent { box-shadow: 0 0 0 1px hsl(160 84% 39% / 0.35), 0 6px 20px hsl(160 84% 39% / 0.08); }
.card--flat { background: var(--white); }

/* ------------------------------------------------------------ .eyebrow ---- */
/* The small mono caps label above a heading or a figure. One style, so a
   "section label", a "teaser label" and a "dossier label" stop drifting. */
.eyebrow, .section-label, .teaser-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.5rem;
}
.eyebrow-aside { letter-spacing: 0.04em; text-transform: none; color: var(--ink-faint); }

/* ------------------------------------------------------------ .callout ---- */
.callout {
    border-radius: var(--radius);
    border-left: 3px solid var(--ink-faint);
    background: hsl(240 5% 8% / 0.03);
    padding: 0.85rem 1.1rem;
    margin: 1.25rem 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout--amber { border-left-color: var(--grade-amber); background: color-mix(in srgb, var(--grade-amber) 7%, transparent); }
.callout--flag  { border-left-color: var(--flag); background: color-mix(in srgb, var(--flag) 6%, transparent); }
.callout--olive { border-left-color: var(--olive); background: var(--olive-wash); }

/* --------------------------------------------------------------- .stat ---- */
.stat { display: flex; flex-direction: column; gap: 0.2rem; }
.stat-num { font-family: var(--display); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.82rem; color: var(--muted); }

/* ------------------------------------------------------------- fields ----- */
textarea:not([data-flux-control]), select:not([data-flux-control]),
input:is([type="email"], [type="text"], [type="search"], [type="number"], [type="url"]):not([data-flux-control]) {
    width: 100%;
    max-width: 100%;
    font-family: var(--body);
    font-size: 0.92rem;
    color: var(--ink);
    background: var(--white);
    border: 0;
    box-shadow: 0 0 0 1px var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    transition: box-shadow var(--fast) var(--ease);
}
textarea:focus, select:focus, input:focus { outline: none; box-shadow: 0 0 0 2px var(--olive); }
::placeholder { color: var(--ink-faint); }
.field-error { color: var(--flag); font-size: 0.82rem; margin: 0.35rem 0; }

.ats-error, .ghost-error, .rrc-error, .feedback-error { color: var(--flag); font-family: var(--mono); font-size: 0.85rem; }

/* --------------------------------------------------- account menu (JS) ---- */

.account-menu { position: relative; display: inline-block; }
.account-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    padding: 0.6rem 0.85rem;
    min-width: 12rem;
    z-index: 10;
    font-family: var(--mono);
    font-size: 0.78rem;
}
.account-dropdown span { display: block; font-size: 0.78rem; }
.account-email { color: var(--muted); }
/* Sign in reads as a button in the nav, not a mono label: it is the one
   account action on every page. */
.account-signin, #account-menu a {
    font-family: var(--body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    padding: 0.375rem 0.85rem;
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--line-strong);
    background: var(--white);
}
.account-signin:hover, #account-menu a:hover { color: var(--olive-ink); box-shadow: 0 0 0 1px hsl(160 84% 39% / 0.45); }

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

table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--line); }
th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
td { font-family: var(--mono); font-size: 0.82rem; }

@media (max-width: 34rem) {
    .case-head { flex-direction: column; }
    .case-file-header .stamp { float: none; margin: 0 0 0.75rem; }
}

/* Small screens: the 7-item nav + logo already wraps (flex-wrap on
   .site-header/.site-nav), but wrapping onto the same row as the brand looks
   cramped. Stack brand and nav as two rows instead, and trim nav link padding
   so more items fit per row before wrapping again. */
@media (max-width: 40rem) {
    .site-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    /* One swipeable row instead of three wrapped ones. */
    .site-nav { width: 100%; gap: 0.1rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav a { white-space: nowrap; }
    .site-nav a { padding: 0.3rem 0.55rem; font-size: 0.82rem; }
}

/* --------------------------------------------------------- platform-logo --- */

.platform-logo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; vertical-align: middle; }
.platform-logo img { object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 0.4rem; }
.platform-logo-fallback { line-height: 1; }
.platform-logo--sm { width: 1.25rem; height: 1.25rem; }
.platform-logo--sm img { width: 1.25rem; height: 1.25rem; border-radius: 0.3rem; }
.platform-logo--sm .platform-logo-fallback { font-size: 1rem; }
.platform-logo--md { width: 2rem; height: 2rem; }
.platform-logo--md img { width: 2rem; height: 2rem; }
.platform-logo--md .platform-logo-fallback { font-size: 1.5rem; }
.platform-logo--lg { width: 3rem; height: 3rem; }
.platform-logo--lg img { width: 3rem; height: 3rem; }
.platform-logo--lg .platform-logo-fallback { font-size: 2.25rem; }

/* --------------------------------------------------- featured platforms --- */
/* Referral-partner cards on /platforms/ -- deliberately heavier than a
   .tier card (gradient border, bigger logo) so they read as "we recommend
   these" without needing fake urgency copy. */

.featured-platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 2rem;
}
.featured-platform-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--ink);
    background: linear-gradient(to bottom, var(--card), var(--paper));
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.25rem 1.15rem;
    box-shadow: 0 0 0 1.5px var(--olive), 0 6px 20px hsl(160 84% 39% / 0.12);
    transition: transform .15s, box-shadow .15s;
}
.featured-platform-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1.5px var(--olive), 0 10px 28px hsl(160 84% 39% / 0.2);
}
.featured-platform-badge {
    align-self: flex-end;
    order: -1;
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(to right, var(--olive), var(--emerald-400));
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.55rem;
}
.featured-platform-card .platform-logo--lg { margin-top: -0.35rem; }
.featured-platform-name { font-family: var(--display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.featured-platform-tagline { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
.featured-platform-meta { display: flex; flex-wrap: wrap; margin-top: 0.2rem; }

/* ----------------------------------------------------- cookie consent --- */

.cookie-banner { position: fixed; left: 1rem; bottom: 1rem; z-index: 60; max-width: 24rem; }
@media (max-width: 40rem) { .cookie-banner { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; max-width: none; } }
.cookie-banner.hidden { display: none; }
.cookie-banner-inner {
    background: var(--white);
    box-shadow: var(--shadow-pop);
    border-radius: var(--radius-lg);
    padding: 1rem 1.15rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
}
.cookie-banner-inner p { font-size: 0.8rem; color: var(--muted); line-height: 1.5; margin: 0; flex: 1 1 100%; }
.cookie-banner-inner a { color: var(--olive); }
.cookie-banner-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }
.cookie-banner-decline, .cookie-banner-accept {
    font-family: var(--body);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
}
.cookie-banner-decline { background: transparent; color: var(--muted); box-shadow: none; }
.cookie-banner-decline:hover { color: var(--ink); background: hsl(240 5% 8% / 0.05); }
.cookie-banner-accept { background: var(--ink); color: var(--paper); box-shadow: none; }
.cookie-banner-accept:hover { background: var(--olive); color: #fff; }

/* ── Source trail (job page) ───────────────────────────────────────────
   The sourcing history of a listing, read from public.v_job_provenance.
   Deliberately set as a record, not a marketing panel: mono dates in a
   left rail, the origin sighting marked, everything else a follow-on. */
.source-trail {
    max-width: 42rem;
    margin: 2.5rem 0;
    padding: 1.25rem 1.25rem 1rem;
    border: 1px solid var(--line, #d8d3c7);
    border-radius: var(--radius-lg);
    background: var(--card, #fff);
}
.source-trail h2 {
    font-family: var(--display);
    font-size: 1.05rem;
    margin: 0 0 0.9rem;
}
.source-trail .trail { list-style: none; margin: 0; padding: 0; }
.trail-item {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.45rem 0;
    border-left: 2px solid var(--line, #d8d3c7);
    padding-left: 0.9rem;
    margin-left: 0.15rem;
}
.trail-item--origin { border-left-color: var(--verified, #2e6b4f); }
.trail-date {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: -0.01em;
    color: var(--muted, #6b6b6b);
    white-space: nowrap;
}
.trail-body { font-size: 0.92rem; }
.trail-tag {
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.35rem;
    margin-left: 0.35rem;
    border: 1px solid var(--verified, #2e6b4f);
    border-radius: var(--radius-sm);
    color: var(--verified, #2e6b4f);
}
.trail-note { display: block; font-size: 0.82rem; color: var(--muted, #6b6b6b); }
.trail-summary {
    margin: 0.9rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line, #d8d3c7);
    font-size: 0.85rem;
    color: var(--muted, #6b6b6b);
}
@media (max-width: 32rem) {
    .trail-item { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Apply CTA destination line: says which host the click actually opens, and
   whether that is the employer's own ATS or only the board we scraped. */
.apply-block { margin: 1.75rem 0; }
.apply-destination {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted, #6b6b6b);
}

/* ------------------------------------------------------------------
   Board filters + pagination (/jobs/, /search/)

   A filter bar is a control panel, so it reads as one: mono labels,
   cream inputs on the paper ground, one hairline box. No JavaScript --
   it is a plain GET form, and every state it produces is a URL.
   ------------------------------------------------------------------ */
.job-filters {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: 1rem;
    margin: 1.25rem 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.job-filters label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 11rem;
    min-width: 0;
}

.job-filters label > span {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}


.filter-q { flex: 3 1 18rem; }

.job-filters button { color: var(--paper); background: var(--ink); box-shadow: none; }
.job-filters button:hover { color: var(--white); background: var(--olive-ink); }

.filter-toggles { align-items: center; }

.filter-check {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

.filter-check > span {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--ink);
}

.filter-clear {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted);
}

.search-note {
    font-size: 0.92rem;
    color: var(--muted);
    border-left: 2px solid var(--grade-amber);
    padding-left: 0.75rem;
}

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.82rem;
}

.pager a { text-decoration: none; }
.pager a:hover { text-decoration: underline; }
.pager-off { color: hsl(240 3% 70%); }
.pager-at { color: var(--muted); }

@media (max-width: 40rem) {
    .job-filters label { flex-basis: 100%; }
    .pager { flex-wrap: wrap; justify-content: center; }
}

/* FAQ blocks on keyword pages -- a definition list, styled as one. */
.faq { margin: 1rem 0 2rem; }
.faq dt {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1rem;
    margin-top: 1.25rem;
}
.faq dd {
    margin: 0.4rem 0 0;
    color: var(--muted);
    max-width: 44rem;
}

/* --------------------------------------------------------------------------
   Job alerts -- the "email me these" block under a board or search result.
   Same card shell as .job-filters on purpose: it is the same idea (this view,
   as a thing you keep) and should not read as an ad dropped into the page.
   -------------------------------------------------------------------------- */

.alert-signup { margin: 1.5rem 0; }

.alert-signup h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.alert-lede,
.alert-fine {
    margin: 0.35rem 0;
}

.alert-fine {
    font-size: 0.8rem;
    color: var(--muted);
}

.alert-status,
.alert-error {
    font-family: var(--mono);
    font-size: 0.8rem;
    margin: 0.35rem 0;
}

.alert-error {
    color: var(--flag);
}

.alert-signup-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0.25rem;
}

.alert-signup-form input[type="email"] { flex: 1 1 16rem; min-width: 0; width: auto; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Save-to-dashboard, under the apply block on a job page. */
.save-job {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.75rem 0 1.25rem;
}

.save-job-status {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--muted);
}

/* ============================================================ JOB PAGE ===== */

/* The next action, always in reach. Inline under the title on a wide screen;
   pinned to the bottom edge on a phone, where the title has long scrolled
   away by the time someone decides to apply. */
.job-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
}
.job-actions .save-job { margin: 0; display: contents; }
.job-actions .save-job-status { flex-basis: 100%; }
@media (max-width: 40rem) {
    /* FIXED, not sticky: a sticky bar right under the title scrolls away
       with it, which is exactly when the reader needs it. */
    .job-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        margin: 0;
        padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--paper) 90%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 -1px 0 var(--line), 0 -8px 24px hsl(240 5% 8% / 0.06);
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
    .job-actions .btn { padding-inline: 0.8rem; }
    .job-actions .btn--primary { flex: 1 1 auto; }
    .job-actions .btn--quiet { display: none; }   /* the alert lives further down the page */
    .job-actions .save-job-status { display: none; }
    /* Room for the bar, so it never covers the last thing on the page. */
    body:has(.job-actions) { padding-bottom: 5rem; }   /* body, not main: the footer sits outside main */
    /* And the cookie card sits above it rather than on top of it. */
    body:has(.job-actions) .cookie-banner { bottom: 5.25rem; }
}

.pay-band .band-figure { font-family: var(--display); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.pay-band .band-note { font-size: 0.85rem; line-height: 1.55; color: var(--muted); max-width: 64ch; margin: 0 0 0.4rem; }

.desc-review-teaser .teaser-scores { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 0.75rem; }
.desc-review-teaser .teaser-score strong { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; }
.desc-review-teaser .teaser-score strong.teaser-absent { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.desc-review-teaser .teaser-score > span { display: block; font-size: 0.8rem; color: var(--muted); }

/* Similar live roles */
.similar { margin: 2.5rem 0; }
.similar h2 { margin-top: 0.1rem; }
.similar .job-list { margin-top: 1rem; }
.similar-more { margin: 0.5rem 0 0; }

/* Help the next applicant -- taps, salary, and the outcome form in one box */
.contribute-lede, .contribute-foot, .contribute-hint { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.85rem; }
.contribute-foot { margin: 1rem 0 0; }
.contribute-taps { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.contribute-taps form { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.contribute-count { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.contribute-salary { margin-top: 1rem; }
.contribute-salary summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--olive-ink); }
.contribute-salary form { margin-top: 0.75rem; }
.contribute-salary-row { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; margin-bottom: 0.75rem; }
.contribute-salary-row label { display: flex; flex-direction: column; font-size: 0.8rem; gap: 0.25rem; color: var(--muted); }
.contribute-salary-row input, .contribute-salary-row select { max-width: 9.5rem; }

/* The outcome widget (public/js/job-feedback.js) now sits inside the
   contribute card, as its second half. */
.contribute-outcome { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.contribute-outcome:empty { display: none; }
.contribute-outcome h2 { font-size: 1rem; margin: 0 0 0.35rem; }
.contribute-outcome p { font-size: 0.9rem; }
.contribute-outcome fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.contribute-outcome legend { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; }
.contribute-outcome .feedback-outcome, .contribute-outcome .feedback-grade, .contribute-outcome .feedback-reason {
    white-space: normal; text-align: left;
    border-radius: var(--radius-pill); font-weight: 500; font-size: 0.82rem; padding: 0.4rem 0.85rem; margin: 0 0.25rem 0.4rem 0;
}
.contribute-outcome [aria-pressed="true"] { color: var(--white); background: var(--ink); box-shadow: none; outline: 0; }
.contribute-outcome .feedback-open, .contribute-outcome .feedback-submit { color: var(--paper); background: var(--ink); box-shadow: none; }
.contribute-outcome .feedback-open:hover, .contribute-outcome .feedback-submit:hover { background: var(--olive-ink); color: var(--white); }
.contribute-outcome .feedback-close { background: transparent; box-shadow: none; color: var(--muted); font-weight: 500; }
.feedback-stats { font-size: 0.8rem; color: var(--muted); }

/* =============================================================== POLLS ===== */
.poll .poll-prompt { font-size: 1.1rem; margin: 0 0 0.85rem; }
.poll-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.poll-foot { font-size: 0.8rem; color: var(--muted); margin: 0.75rem 0 0; }
.poll-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.poll-row { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; align-items: baseline; font-size: 0.9rem; }
.poll-share { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.poll-bar { grid-column: 1 / -1; height: 6px; border-radius: var(--radius-pill); background: hsl(240 5% 8% / 0.06); overflow: hidden; }
.poll-bar > span { display: block; height: 100%; border-radius: inherit; background: hsl(240 5% 8% / 0.22); transition: width .6s var(--ease); }
.poll-row.is-mine .poll-bar > span { background: var(--accent-gradient); }
.poll-row.is-mine .poll-label { font-weight: 600; }
.poll-you { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--olive-ink); margin-left: 0.4rem; }
/* "Change my answer" without JavaScript: the link targets the form. */
.poll-change { display: none; margin-top: 0.85rem; }
.poll-change:target { display: flex; }
.poll-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.poll-strip .poll { margin: 0; }

/* ======================================================== PAGE MODULES ===== */
/* Each page's rules, scoped by its container class. Moved here from the
   inline <style> blocks they used to live in. */

/* content/board-index */
.board-index { max-width: 960px; margin: 0 auto; padding: 0 16px 64px; }
.board-index .crumbs { font-size: 13px; color: var(--muted); padding: 20px 0 0; }
.board-index h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.1; margin: 16px 0 20px; }
.board-index .lede { font-size: 17.5px; line-height: 1.6; max-width: 68ch; }
.board-index .measured { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.board-index section { padding: 26px 0; border-top: 1px solid var(--line); }
.board-index h2 { font-size: 21px; margin: 0 0 10px; }
.board-index .note { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 72ch; margin: 0 0 16px; }
.board-index .board-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.board-index .board-table th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.board-index .board-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); }
.board-index .board-table .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.board-index .board-table .strong { font-weight: 600; }
.board-index .board-table .muted { color: var(--muted); }
.board-index .board-table .flag { color: var(--flag); }
.board-index .cmp-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 20px; }
.board-index .cmp-list li { font-size: 14.5px; padding: 3px 0; }
.board-index .method { padding: 26px 0 0; border-top: 1px solid var(--line); }
.board-index .method p { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 74ch; }
@media (max-width: 640px) {
    .board-index .board-table { font-size: 13px; }
    .board-index .board-table td, .board-index .board-table th { padding-right: 6px; }
}

/* content/board-show */
.board-show { max-width: 860px; margin: 0 auto; padding: 0 16px 64px; }
.board-show .crumbs { font-size: 13px; color: var(--muted); padding: 20px 0 0; }
.board-show h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.1; margin: 16px 0 18px; }
.board-show .lede { font-size: 17.5px; line-height: 1.6; max-width: 66ch; }
.board-show .measured { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.board-show section { padding: 26px 0; border-top: 1px solid var(--line); }
.board-show h2 { font-size: 21px; margin: 0 0 14px; }
.board-show p { font-size: 15.5px; line-height: 1.6; max-width: 68ch; }
.board-show .figures { display: flex; flex-wrap: wrap; gap: 36px; margin-bottom: 18px; }
.board-show .fig strong { font-family: var(--mono); font-size: 32px; display: block; line-height: 1.1; }
.board-show .fig span { font-size: 13.5px; color: var(--muted); display: block; max-width: 24ch; margin-top: 4px; }
.board-show .big-flag { font-family: var(--mono); font-size: 46px; color: var(--flag); line-height: 1; margin: 0 0 10px; }
.board-show .insight { border-left: 3px solid var(--olive); padding-left: 16px; margin-top: 16px; }
.board-show .board-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.board-show .board-table th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.board-show .board-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); }
.board-show .board-table .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.board-show .board-table tr.is-this td { background: hsl(40 20% 90% / .5); }
.board-show .method { padding: 26px 0 0; border-top: 1px solid var(--line); }
.board-show .method p { font-size: 14px; color: var(--muted); max-width: 72ch; }
@media (max-width: 640px) {
    .board-show .board-table { font-size: 13px; }
    .board-show .figures { gap: 22px; }
}

/* content/article-show */
.article { max-width: 720px; margin: 0 auto; padding: 0 16px 64px; }
.article .crumbs { font-size: 13px; color: var(--muted); padding: 20px 0 0; }
.article h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.12; margin: 16px 0 8px; }
.article .meta { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.article .body { font-size: 17.5px; line-height: 1.7; }
.article .body p { margin: 0 0 18px; }
.article .body h2 { font-size: 22px; margin: 32px 0 12px; }
.article .provenance { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.article .provenance .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.article .provenance p { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 64ch; }

/* content/articles-index */
.articles { max-width: 760px; margin: 0 auto; padding: 0 16px 64px; }
.articles .crumbs { font-size: 13px; color: var(--muted); padding: 20px 0 0; }
.articles h1 { font-size: clamp(28px, 5vw, 40px); margin: 16px 0 12px; }
.articles .lede { font-size: 17px; line-height: 1.6; color: var(--muted); }
.articles .list { list-style: none; padding: 0; margin: 28px 0 0; }
.articles .list li { padding: 18px 0; border-top: 1px solid var(--line); }
.articles .list a { font-size: 20px; font-weight: 600; }
.articles .when { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 4px 0 6px; }
.articles .list p { font-size: 15px; line-height: 1.55; margin: 0; }

/* content/board-compare */
.board-compare { max-width: 820px; margin: 0 auto; padding: 0 16px 64px; }
.board-compare .crumbs { font-size: 13px; color: var(--muted); padding: 20px 0 0; }
.board-compare h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.1; margin: 16px 0 22px; }
.board-compare .answer { border-left: 3px solid var(--olive); padding: 4px 0 4px 18px; margin-bottom: 26px; }
.board-compare .section-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.board-compare .verdict { font-size: 18px; line-height: 1.55; max-width: 64ch; margin: 0; }
.board-compare section { padding: 24px 0; border-top: 1px solid var(--line); }
.board-compare h2 { font-size: 20px; margin: 0 0 12px; }
.board-compare p { font-size: 15.5px; line-height: 1.6; max-width: 68ch; }
.board-compare .note { font-size: 14px; color: var(--muted); }
.board-compare .cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.board-compare .cmp th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.board-compare .cmp td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); }
.board-compare .cmp .k { color: var(--muted); }
.board-compare .cmp .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.board-compare .cmp .win { font-weight: 600; color: var(--ink); }
.board-compare .method { padding: 24px 0 0; border-top: 1px solid var(--line); }
.board-compare .method p { font-size: 14px; color: var(--muted); max-width: 72ch; }

/* content/role-guide/index */
.role-guide { max-width: 1040px; margin: 0 auto; padding: 0 16px 64px; }
.role-guide .crumbs { font-size: 13px; color: var(--muted); padding: 20px 0 0; }
.role-guide h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.1; margin: 18px 0 14px; }
.role-guide .lede { font-size: 17px; max-width: 68ch; color: var(--muted); margin: 0 0 28px; }
.role-guide .lede strong { color: var(--ink); }
.role-guide .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.role-guide .guide-card { background: var(--card); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.role-guide .guide-card:hover { background: var(--paper); }
.role-guide .guide-role { font-weight: 600; font-size: 16px; }
.role-guide .guide-official { font-size: 13px; color: var(--muted); }
.role-guide .guide-count { font-family: var(--mono); font-size: 11.5px; color: var(--olive); margin-top: 4px; }
.role-guide .guide-method { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 24px; }
.role-guide .guide-method h2 { font-size: 20px; margin: 0 0 12px; }
.role-guide .guide-method p { max-width: 70ch; font-size: 15px; }
.role-guide .guide-caveat { color: var(--muted); font-size: 14px; }

/* content/role-guide/show */
.role-page { max-width: 880px; margin: 0 auto; padding: 0 16px 64px; }
.role-page .crumbs { font-size: 13px; color: var(--muted); padding: 20px 0 0; }
.role-page h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.1; margin: 16px 0 24px; }
.role-page section { padding: 22px 0; border-top: 1px solid var(--line); }
.role-page .section-label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.role-page .section-note { font-size: 14px; color: var(--muted); max-width: 66ch; margin: 0 0 14px; }
.role-page .section-caveat { font-size: 13.5px; color: var(--muted); margin-top: 12px; max-width: 66ch; }
.role-page .official blockquote { margin: 0; padding-left: 16px; border-left: 3px solid var(--olive); font-size: 17px; line-height: 1.6; max-width: 70ch; }
.role-page .source { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.role-page .tasks { list-style: none; padding: 0; margin: 0; }
.role-page .tasks li { padding: 9px 0; border-bottom: 1px solid var(--line); max-width: 74ch; }
.role-page .task-text { display: block; font-size: 15.5px; line-height: 1.5; }
.role-page .task-pct { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.role-page .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.role-page .tier h3 { font-size: 15px; margin: 0 0 10px; }
.role-page .tier ul { list-style: none; padding: 0; margin: 0; }
.role-page .tier li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.role-page .facet-ratio { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.role-page .titles li { display: block; }
.role-page .titles span { color: var(--muted); font-size: 13px; }
.role-page .tools { display: grid; gap: 10px; }
.role-page .tool-cat { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: block; }
.role-page .tool-list { font-size: 14.5px; }
.role-page .quality-figs { display: flex; flex-wrap: wrap; gap: 32px; }
.role-page .quality-figs strong { font-family: var(--mono); font-size: 26px; display: block; }
.role-page .quality-figs span { font-size: 13px; color: var(--muted); }
.role-page .method { padding: 24px 0 0; border-top: 1px solid var(--line); }
.role-page .method p { font-size: 14px; color: var(--muted); max-width: 72ch; }
@media (max-width: 620px) {
    .role-page .tier li { flex-direction: column; gap: 2px; }
}

/* jobs/review */
.review-page { max-width: 1100px; margin: 0 auto; padding: 0 16px 64px; }
.review-page .review-head { padding: 32px 0 20px; border-bottom: 2px solid var(--ink); }
.review-page .review-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.review-page .review-head h1 { font-family: var(--display); font-size: clamp(26px, 5vw, 40px); line-height: 1.12; margin: 0 0 8px; }
.review-page .review-sub { color: var(--muted); margin: 0; font-size: 15px; }
.review-page .review-empty { border: 1px solid var(--line); padding: 24px; margin-top: 28px; }
.review-page .scorecard { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 28px 0; }
.review-page .score { background: var(--paper); padding: 16px 18px; }
.review-page .score-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.review-page .score-value { font-family: var(--mono); font-size: 30px; font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; }
.review-page .score-value span { font-size: 14px; font-weight: 400; color: var(--muted); }
.review-page .score-value.role { font-size: 20px; }
.review-page .score-value.role.unclear { color: var(--muted); }
.review-page .score-band { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.review-page .reference, .review-page .missing, .review-page .manuscript-wrap, .review-page .method { padding: 26px 0; border-bottom: 1px solid var(--line); }
.review-page .reference h2, .review-page .missing h2, .review-page .manuscript-wrap h2, .review-page .method h2 { font-family: var(--display); font-size: 21px; margin: 0 0 12px; }
.review-page .ref-source { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.review-page .reference blockquote { margin: 0; padding-left: 16px; border-left: 3px solid var(--verified); font-size: 16px; max-width: 70ch; }
.review-page .ref-alts { font-size: 13.5px; color: var(--muted); margin: 12px 0 0; }
.review-page .exemplar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.review-page .exemplar-col ul { list-style: none; margin: 0; padding: 0; }
.review-page .exemplar-col li { padding: 5px 0; font-size: 14.5px; }
.review-page .exemplar-col li span { color: var(--muted); }
.review-page .missing ul { list-style: none; margin: 0; padding: 0; }
.review-page .missing li { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.review-page .sev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
.review-page .sev-high .sev-dot { background: var(--flag); }
.review-page .sev-medium .sev-dot { background: var(--grade-amber); }
.review-page .standard { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.review-page .manuscript { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
.review-page .prose { font-size: 16px; line-height: 1.8; max-width: 68ch; white-space: pre-wrap; }
.review-page .prose mark { background: transparent; padding: 0 1px; border-bottom: 2px solid var(--muted); color: inherit; }
.review-page .prose mark.sev-high { border-color: var(--flag); background: rgba(178, 58, 46, .10); }
.review-page .prose mark.sev-medium { border-color: var(--grade-amber); background: rgba(201, 138, 44, .10); }
.review-page .prose mark.sev-low { border-color: var(--line); background: rgba(20, 18, 15, .04); }
.review-page .prose mark sup { font-family: var(--mono); font-size: 10px; padding-left: 2px; }
.review-page .margin { display: grid; gap: 14px; position: sticky; top: 16px; }
.review-page .note { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; }
.review-page .note.sev-high { border-color: var(--flag); }
.review-page .note.sev-medium { border-color: var(--grade-amber); }
.review-page .note-num { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 0 0 3px; }
.review-page .note-body { font-size: 14px; margin: 0; line-height: 1.5; }
.review-page .note-standard { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 5px 0 0; }
.review-page .clean-note { color: var(--muted); max-width: 62ch; }
.review-page .method p { font-size: 14.5px; color: var(--muted); max-width: 72ch; }
.review-page .method-line { font-family: var(--mono); font-size: 12.5px; }
@media (max-width: 860px) {
    .review-page .manuscript { grid-template-columns: 1fr; }
    .review-page .margin { position: static; }
}

/* dashboard/points */
.points-page .points-grid { display: flex; flex-wrap: wrap; gap: 28px; margin: 16px 0 24px; }
.points-page .points-grid strong { display: block; font-family: var(--mono); font-size: 28px; }
.points-page .points-grid span { font-size: 13px; color: var(--muted); }
.points-page .perks li { margin-bottom: 10px; }
.points-page .perk-on { font-weight: 600; }
.points-page .redeem { display: inline; margin-left: 6px; }
.points-page .points-history td { padding: 4px 10px 4px 0; vertical-align: top; font-size: 14px; }
.points-page .points-history .num { font-family: var(--mono); text-align: right; }
.points-page .points-status { border-left: 3px solid currentColor; padding: 6px 10px; }

/* components/grade-reason */
.grade-reason { border: 1px solid var(--line); padding: 20px 22px; margin: 28px 0; }
.grade-reason .section-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.grade-reason-lede { font-size: 15.5px; line-height: 1.55; margin: 0 0 18px; max-width: 62ch; }
.grade-reason .grade-factors { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.grade-reason .grade-factor { display: grid; gap: 5px; }
.grade-reason .factor-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.grade-reason .factor-label { font-size: 14.5px; font-weight: 500; }
.grade-reason .factor-points { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.grade-reason .factor-max { color: var(--muted); }
.grade-reason .factor-bar { display: block; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.grade-reason .factor-fill { display: block; height: 100%; background: var(--olive); }
.grade-reason .grade-factor.is-empty .factor-fill { background: var(--flag); }
.grade-reason .grade-factor.is-empty .factor-label { color: var(--muted); }
.grade-reason .factor-why { font-size: 12.5px; line-height: 1.45; color: var(--muted); max-width: 68ch; }
.grade-reason .grade-penalty { font-size: 13.5px; line-height: 1.5; color: var(--flag); margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); max-width: 68ch; }
.grade-reason .grade-penalty strong { font-family: var(--mono); }
.grade-reason-foot { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); max-width: 70ch; }
@media (max-width: 620px) {
    .grade-reason { padding: 16px; }
    .grade-reason .factor-head { flex-direction: column; gap: 2px; }
}

/* ============================================================ HOMEPAGE ===== */
/* Formerly public/css/home.css. Scoped by body.rw-home; the --rw-* names are
   aliases onto the tokens above. */

body.rw-home {
    --rw-ink: var(--ink);
    --rw-ink-soft: var(--muted);
    --rw-ink-faint: var(--ink-faint);
    --rw-paper: var(--paper);
    --rw-paper-muted: var(--paper-muted);
    --rw-cream: var(--card);
    --rw-olive: var(--olive);
    --rw-olive-soft: var(--olive-soft);
    --rw-emerald-400: var(--emerald-400);
    --rw-emerald-500: var(--emerald-500);
    --rw-line: var(--line);
    --rw-line-soft: var(--line-soft);

    background: var(--rw-paper);
    font-family: var(--body);
}

body.rw-home .rw-mono { font-family: var(--mono); }
body.rw-home .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Hero ── */
body.rw-home .rw-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rw-line); }
body.rw-home .rw-hero-glow {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 800px; height: 400px; max-width: 100%;
    background: radial-gradient(closest-side, hsl(160 84% 39% / 0.08), transparent 70%);
    filter: blur(40px); pointer-events: none;
}
body.rw-home .rw-hero-inner { position: relative; max-width: 80rem; margin: 0 auto; padding: 5rem 1.5rem 4rem; text-align: center; }
@media (min-width: 768px) { body.rw-home .rw-hero-inner { padding: 7rem 1.5rem 6rem; } }

body.rw-home .rw-ph-badge { display: flex; justify-content: center; margin-bottom: 1rem; }
body.rw-home .rw-ph-badge img { width: 250px; height: 54px; transition: transform .15s; }
body.rw-home .rw-ph-badge a:hover img { transform: scale(1.02); }

body.rw-home .rw-live-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.375rem 0.9rem; border-radius: var(--radius-pill);
    background: hsl(240 5% 8% / 0.05); border: 1px solid var(--rw-line);
    color: var(--rw-ink-soft); font-size: 0.75rem; font-weight: 500;
    margin-bottom: 2rem; text-decoration: none; transition: background .15s;
}
body.rw-home .rw-live-badge:hover { background: hsl(240 5% 8% / 0.1); }
body.rw-home .rw-live-dot { position: relative; display: inline-flex; width: 0.5rem; height: 0.5rem; }
body.rw-home .rw-live-dot-ping {
    position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--rw-olive);
    opacity: 0.75; animation: rw-ping 1.6s cubic-bezier(0,0,.2,1) infinite;
}
body.rw-home .rw-live-dot-core { position: relative; display: block; width: 100%; height: 100%; border-radius: var(--radius-pill); background: var(--rw-olive); }
@keyframes rw-ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }

body.rw-home .rw-hero-title { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--rw-ink); margin: 0; }
@media (min-width: 768px) { body.rw-home .rw-hero-title { font-size: 3.25rem; } }
@media (min-width: 1024px) { body.rw-home .rw-hero-title { font-size: 3.75rem; } }
body.rw-home .rw-hero-gradient {
    background: linear-gradient(to bottom right, var(--rw-olive), var(--rw-emerald-400));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.rw-home .rw-hero-lede { max-width: 34rem; margin: 1.25rem auto 0; font-size: 1rem; line-height: 1.7; color: var(--rw-ink-soft); }
@media (min-width: 768px) { body.rw-home .rw-hero-lede { font-size: 1.125rem; } }
body.rw-home .rw-hero-lede-strong { color: var(--rw-ink); font-weight: 500; }

body.rw-home .rw-cta-row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
body.rw-home .rw-cta-primary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.25rem; border-radius: var(--radius-pill); text-decoration: none;
    background: var(--accent-gradient);
    color: #fff; font-size: 0.875rem; font-weight: 600;
    box-shadow: var(--glow); transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
body.rw-home .rw-cta-primary:hover { transform: scale(1.02); box-shadow: 0 4px 14px hsl(160 84% 39% / 0.3); }
body.rw-home .rw-cta-arrow { color: rgba(255,255,255,0.7); }
body.rw-home .rw-cta-telegram {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.25rem; border-radius: var(--radius-pill); text-decoration: none;
    background: hsl(199 79% 46% / 0.1); border: 1px solid hsl(199 79% 46% / 0.3);
    color: #1a7ab5; font-size: 0.875rem; font-weight: 600; transition: transform .15s, background .15s;
}
body.rw-home .rw-cta-telegram:hover { transform: scale(1.02); background: hsl(199 79% 46% / 0.2); }
body.rw-home .rw-cta-arrow-muted { opacity: 0.6; }

body.rw-home .rw-stats-row { display: flex; justify-content: center; gap: 2.5rem; margin-top: 2.5rem; flex-wrap: wrap; }
@media (min-width: 768px) { body.rw-home .rw-stats-row { gap: 4rem; } }
body.rw-home .rw-stat { text-align: center; text-decoration: none; }
body.rw-home .rw-stat-num { display: block; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { body.rw-home .rw-stat-num { font-size: 2.25rem; } }
body.rw-home .rw-stat-olive { color: var(--rw-olive); }
a.rw-stat:hover .rw-stat-num { color: var(--rw-olive-soft); }
body.rw-home .rw-stat-label { display: block; font-size: 0.875rem; color: var(--rw-ink-faint); margin-top: 0.375rem; font-weight: 500; }

body.rw-home .rw-newsletter { margin-top: 3rem; }
body.rw-home .rw-newsletter-lede { font-size: 0.875rem; color: var(--rw-ink-faint); margin-bottom: 0.75rem; font-weight: 500; }
body.rw-home .rw-newsletter-form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 28rem; margin: 0 auto; }
@media (min-width: 640px) { body.rw-home .rw-newsletter-form { flex-direction: row; } }
body.rw-home .rw-newsletter-input {
    flex: 1; height: 3rem; border-radius: var(--radius); border: 1px solid hsl(240 5% 8% / 0.15);
    background: hsl(40 20% 98% / 0.5); padding: 0 1rem; font-size: 0.875rem; font-family: inherit;
}
body.rw-home .rw-newsletter-input::placeholder { color: var(--rw-ink-faint); }
body.rw-home .rw-newsletter-btn {
    height: 3rem; padding: 0 2rem; border-radius: var(--radius); border: 0; cursor: pointer;
    background: var(--rw-ink); color: var(--rw-cream); font-size: 0.875rem; font-weight: 600; font-family: inherit;
}
body.rw-home .rw-newsletter-btn:hover { background: hsl(240 5% 8% / 0.85); }
body.rw-home .rw-newsletter-fine { font-size: 0.75rem; color: hsl(240 3% 62% / 0.7); margin-top: 0.75rem; }
body.rw-home .rw-newsletter-fine a { color: var(--rw-olive); text-decoration: underline; text-underline-offset: 2px; }

/* ── Section shell ── */
body.rw-home .rw-section-inner { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
body.rw-home .rw-h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; color: var(--rw-ink); margin: 0; }
@media (min-width: 768px) { body.rw-home .rw-h2 { font-size: 1.5rem; } }
body.rw-home .rw-section-sub { font-size: 0.875rem; color: var(--rw-ink-soft); margin-top: 0.375rem; }
body.rw-home .rw-inline-link { color: var(--rw-olive); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }

/* ── Trust bar ── */
body.rw-home .rw-trust-bar { padding: 3rem 0; border-bottom: 1px solid var(--rw-line-soft); background: hsl(240 4% 92% / 0.3); }
body.rw-home .rw-trust-kicker { text-align: center; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rw-ink-faint); margin-bottom: 1.5rem; }
body.rw-home .rw-trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 768px) { body.rw-home .rw-trust-grid { grid-template-columns: repeat(4, 1fr); } }
body.rw-home .rw-trust-item { text-align: center; }
body.rw-home .rw-trust-num { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--rw-ink); }
body.rw-home .rw-trust-label { display: block; font-size: 0.875rem; color: var(--rw-ink-soft); margin-top: 0.25rem; }

/* ── Category hub ── */
body.rw-home .rw-category-hub { padding: 3rem 0; border-bottom: 1px solid var(--rw-line-soft); }
body.rw-home .rw-section-head { text-align: center; margin-bottom: 2rem; }
body.rw-home .rw-section-head .rw-section-sub { max-width: 32rem; margin: 0.5rem auto 0; }
body.rw-home .rw-category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { body.rw-home .rw-category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { body.rw-home .rw-category-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { body.rw-home .rw-category-grid { grid-template-columns: repeat(6, 1fr); } }
body.rw-home .rw-category-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    border-radius: var(--radius); background: linear-gradient(to bottom, var(--rw-cream), var(--rw-paper));
    box-shadow: inset 0 0 0 1px hsl(240 5% 8% / 0.06); padding: 1rem; text-decoration: none;
    transition: box-shadow .15s;
}
body.rw-home .rw-category-card:hover { box-shadow: inset 0 0 0 1px hsl(240 5% 8% / 0.15); }
body.rw-home .rw-category-name { font-size: 0.875rem; font-weight: 600; color: var(--rw-ink); letter-spacing: -0.01em; }
body.rw-home .rw-category-card:hover .rw-category-name { color: var(--rw-olive); }
body.rw-home .rw-category-count { font-size: 0.75rem; color: var(--rw-ink-faint); margin-top: 0.25rem; font-family: var(--mono); font-variant-numeric: tabular-nums; }
body.rw-home .rw-see-all { text-align: center; margin-top: 1.5rem; }
body.rw-home .rw-see-all a { font-size: 0.875rem; color: var(--rw-olive); font-weight: 500; text-decoration: none; }
body.rw-home .rw-see-all a:hover { color: var(--rw-olive-soft); }

/* ── Filter bands ── */
body.rw-home .rw-filter-band { border-bottom: 1px solid var(--rw-line-soft); background: hsl(240 4% 92% / 0.2); }
body.rw-home .rw-filter-inner { max-width: 48rem; margin: 0 auto; padding: 1.25rem 1.5rem; }
body.rw-home .rw-filter-kicker { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rw-ink-faint); margin-bottom: 0.625rem; }
body.rw-home .rw-pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
body.rw-home .rw-pill {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.375rem 0.75rem; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 500;
    color: var(--rw-ink-soft); background: hsl(240 5% 8% / 0.05); border: 1px solid hsl(240 5% 8% / 0.05);
    text-decoration: none; transition: background .15s, color .15s;
}
body.rw-home .rw-pill:hover { background: hsl(240 5% 8% / 0.1); color: var(--rw-ink); }
body.rw-home .rw-pill-active { background: var(--rw-ink); color: var(--rw-cream); font-weight: 600; border-color: transparent; }
body.rw-home .rw-pill-active:hover { background: var(--rw-ink); color: var(--rw-cream); }
body.rw-home .rw-pill-olive { background: hsl(160 84% 39% / 0.05); border-color: hsl(160 84% 39% / 0.15); }
body.rw-home .rw-pill-olive:hover { background: hsl(160 84% 39% / 0.1); color: var(--rw-olive); border-color: hsl(160 84% 39% / 0.3); }
body.rw-home .rw-pill-count { color: var(--rw-ink-faint); font-family: var(--mono); font-size: 0.625rem; }

/* ── Listings ── */
body.rw-home .rw-listings { padding: 3rem 0; }
body.rw-home .rw-listings-alt { border-top: 1px solid var(--rw-line); background: hsl(240 4% 92% / 0.2); }
body.rw-home .rw-section-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
body.rw-home .rw-job-list { max-width: 80rem; margin: 0 auto; }
body.rw-home .rw-browse-more { margin-top: 1.5rem; text-align: center; }
body.rw-home .rw-browse-more-btn {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem;
    border-radius: var(--radius-pill); border: 1px solid hsl(240 5% 8% / 0.12); color: var(--rw-ink-soft);
    font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: border-color .15s, color .15s;
}
body.rw-home .rw-browse-more-btn:hover { border-color: hsl(240 5% 8% / 0.24); color: var(--rw-ink); }

/* Job rows inherit the existing case-file component styling (grade stamp) —
   only the surrounding shell/section chrome above is re-themed. */

/* Toolkit + pulse bands (homepage) */
body.rw-home .rw-toolkit, body.rw-home .rw-pulse { padding: 3rem 0; border-bottom: 1px solid var(--rw-line-soft); }
body.rw-home .rw-pulse { background: linear-gradient(180deg, var(--olive-wash), transparent 70%); }
.toolkit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 0.85rem; }
.toolkit-card {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 1.1rem 1.15rem; border-radius: var(--radius-lg);
    background: linear-gradient(to bottom, var(--card), var(--paper));
    box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none;
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.toolkit-card:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.toolkit-card strong { font-size: 0.95rem; letter-spacing: -0.01em; }
.toolkit-card span:last-child { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.toolkit-icon { font-size: 1.35rem; line-height: 1; margin-bottom: 0.2rem; }
.toolkit-card:hover strong { color: var(--olive-ink); }

.review-page .scorecard { border-radius: var(--radius-lg); overflow: hidden; }
.role-guide .guide-grid { border-radius: var(--radius-lg); overflow: hidden; }

/* /pulse/ -- the public results page */
.pulse-section { margin: 2.5rem 0; }
.pulse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.pulse-grid > .card, .pulse-grid > .poll { margin: 0; }
.pulse-card h2 { font-size: 1.05rem; margin: 0 0 0.25rem; }
.pulse-meta { font-size: 0.8rem; color: var(--muted); margin: 0 0 1rem; }
.pulse-empty { font-size: 0.9rem; color: var(--muted); }
.pulse-answer { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); align-items: center; }
.pulse-answer-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-right: 0.25rem; }
.pulse-reports { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pulse-reports li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.75rem; font-size: 0.9rem; }
.pulse-reports strong { font-family: var(--display); font-variant-numeric: tabular-nums; }
.pulse-confirmed { grid-column: 1 / -1; font-size: 0.75rem; color: var(--olive-ink); }

/* =====================================================================
   DESIGN SYSTEM v1 -- the visual layer.
   Source: the remoty.work Design System canvas (2026-08-25), which the
   social covers have used since August and the site never did. Header,
   buttons, grade chips, the compact job card, cards with an inset highlight,
   heavier display type. Later in the file on purpose: it wins over the
   older rules above it.
   ===================================================================== */

/* --- type ------------------------------------------------------------- */
h1 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
h2 { font-weight: 700; letter-spacing: -0.015em; }
.text-gradient {
    background: linear-gradient(to bottom right, var(--olive), var(--emerald-400));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- header: frosted, sticky, one row --------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    max-width: none; margin: 0;
    padding: 0 max(1.25rem, calc((100vw - 72rem) / 2));
    min-height: 3.5rem;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
    flex-wrap: nowrap;
}
.brand-logo { height: 1.75rem; }
.site-nav { flex: 1; justify-content: center; gap: 0.15rem; flex-wrap: nowrap; }
.site-nav a { font-size: 0.875rem; font-weight: 500; padding: 0.375rem 0.75rem; border-radius: 8px; color: var(--muted); }
.site-nav a:hover { color: var(--ink); background: hsl(240 5% 8% / 0.05); }
.site-nav a[aria-current="page"] { color: var(--ink); background: hsl(240 5% 8% / 0.06); }
.site-actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
@media (max-width: 60rem) {
    .site-header { flex-wrap: wrap; padding-block: 0.5rem; gap: 0.4rem; }
    .site-nav { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav a { white-space: nowrap; }
}
@media (max-width: 40rem) {
    .site-header { flex-direction: row; align-items: center; }
    .site-actions .btn--secondary { display: none; }
}

/* --- buttons: pills for actions, per v1 -------------------------------- */
.btn--primary, .btn--secondary, .apply-cta { border-radius: var(--radius-pill); }
.btn--primary { background: linear-gradient(to right, var(--olive), var(--emerald-500)); box-shadow: 0 1px 2px hsl(160 84% 39% / 0.2), 0 6px 18px -6px hsl(160 84% 39% / 0.45); }
.btn--secondary {
    color: var(--ink); background: hsl(240 5% 8% / 0.05);
    box-shadow: inset 0 0 0 1px hsl(240 5% 8% / 0.08);
}
.btn--secondary:hover { color: var(--ink); background: hsl(240 5% 8% / 0.09); box-shadow: inset 0 0 0 1px hsl(240 5% 8% / 0.14); }
.btn--dark { border-radius: 8px; }
.chip { border-radius: var(--radius-pill); }

/* --- cards: cream-to-paper with the inset highlight --------------------- */
.card, .widget, .toolkit-card, .tier {
    border-radius: 16px;
    background: linear-gradient(to bottom, var(--card), var(--paper));
    border: 1px solid hsl(240 5% 8% / 0.07);
    box-shadow: inset 0 1px 0 var(--card), 0 1px 2px -1px hsl(240 5% 8% / 0.06), 0 6px 18px -10px hsl(240 5% 8% / 0.12);
}
.card--accent { border-color: hsl(160 84% 39% / 0.35); }

/* --- grade chips: six grades, one palette, never remapped -------------- */
.grade-chip {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 1.75rem; height: 1.75rem; border-radius: 8px;
    font-family: var(--mono); font-weight: 800; font-size: 0.72rem;
    border: 1px solid transparent;
}
.grade-a { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.grade-b { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.grade-c { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.grade-d { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.grade-e { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.grade-f { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.grade-none { background: hsl(240 5% 8% / 0.04); color: var(--ink-faint); border-color: var(--line); }

/* --- the job card: the single most-repeated surface ------------------- */
.job-list { gap: 0.5rem; }
.job-list > li.job-card {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 16px;
    background: linear-gradient(to bottom, var(--card), var(--paper));
    border: 1px solid hsl(240 5% 8% / 0.07);
    box-shadow: inset 0 1px 0 var(--card), 0 1px 2px -1px hsl(240 5% 8% / 0.06), 0 6px 18px -10px hsl(240 5% 8% / 0.12);
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.job-list > li.job-card:hover {
    transform: translateY(-1px);
    border-color: hsl(240 5% 8% / 0.12);
    box-shadow: inset 0 1px 0 var(--card), 0 2px 4px -1px hsl(240 5% 8% / 0.08), 0 10px 24px -8px hsl(240 5% 8% / 0.18);
}
.company-tile {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 1.75rem; height: 1.75rem; border-radius: 8px;
    font-weight: 800; font-size: 0.78rem;
    color: hsl(var(--h) 45% 30%); background: hsl(var(--h) 60% 92%);
}
.job-card-main { flex: 1; min-width: 0; }
.job-card .case-title { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.job-card .case-title a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-card .case-facts { margin-top: 0.15rem; font-size: 0.78rem; gap: 0.15rem 0.6rem; }
.job-card .case-facts > *:not(:first-child)::before { content: "·"; color: hsl(240 5% 8% / 0.2); margin-right: 0.6rem; }
.job-card .fact-company { font-weight: 600; color: hsl(240 5% 8% / 0.8); text-decoration: none; }
.job-card .fact-salary { color: var(--olive-ink); font-weight: 600; }
.job-card-age { flex: 0 0 auto; font-size: 0.75rem; color: var(--ink-faint); white-space: nowrap; }
.job-card-flags { margin: 0.35rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.flag-pill {
    display: inline-flex; align-items: center; padding: 0.1rem 0.6rem; border-radius: var(--radius-pill);
    font-size: 0.68rem; font-weight: 700; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
}
.job-card.is-featured { border-color: hsl(160 84% 39% / 0.45); box-shadow: 0 0 0 1px hsl(160 84% 39% / 0.2), 0 8px 22px -10px hsl(160 84% 39% / 0.35); }
@media (max-width: 34rem) {
    .job-card .case-title a { white-space: normal; }
    .job-card-age { display: none; }
}

/* --- badges & tags ------------------------------------------------------ */
.badge {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    padding: 0.1rem 0.55rem; border-radius: var(--radius-pill);
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
}
.badge--featured { color: #fff; background: linear-gradient(to right, var(--olive), var(--emerald-500)); }
.tag {
    border-radius: var(--radius-pill); padding: 0.1rem 0.65rem; font-family: var(--body);
    font-size: 0.7rem; font-weight: 500; color: var(--ink-faint);
    background: hsl(240 5% 8% / 0.04); border: 1px solid hsl(240 5% 8% / 0.06);
}

/* --- featured block ---------------------------------------------------- */
.featured-jobs { margin: 0.5rem 0 1.75rem; }
.featured-jobs .job-list { margin-top: 0.5rem; }

/* --- employer pages ----------------------------------------------------- */
.employers-hero { padding: 2.5rem 0 1rem; max-width: 46rem; }
.employers-hero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); }
.employers-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.employers-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.25rem; margin: 2.5rem 0 0.5rem; }
.employers-stats .stat-num { font-size: 2.2rem; }
.employers-stats small { color: var(--ink-faint); font-size: 0.72rem; }
.employers-note { font-size: 0.82rem; color: var(--muted); }
.employers-how { margin: 3rem 0 1rem; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.how-grid .card { margin: 0; }
.how-step {
    display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
    border-radius: 8px; font-weight: 800; font-size: 0.8rem; color: #fff; background: var(--ink); margin-bottom: 0.6rem;
}
.employers-find-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.employers-find-form input { flex: 1 1 16rem; width: auto; }
.employers-suggest { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.table-wrap { overflow-x: auto; }
.employer-table td { font-family: var(--body); vertical-align: middle; }
.employer-table .num { text-align: right; font-family: var(--mono); }
.employer-table .badge { margin-left: 0.4rem; }
.muted { color: var(--muted); }

/* --- homepage hero: heavier, per v1 ----------------------------------- */
body.rw-home .rw-hero-title { font-weight: 800; letter-spacing: -0.025em; }
body.rw-home .rw-cta-primary { border-radius: var(--radius-pill); }

/* Fixes from the v1 preview pass. */
/* The global button rule (button:not([data-flux-button]), 0,1,1) outranked
   these single-class rules and turned Accept white. */
.cookie-banner .cookie-banner-accept { background: var(--ink); color: var(--paper); box-shadow: none; }
.cookie-banner .cookie-banner-accept:hover { background: var(--olive-ink); color: #fff; }
.cookie-banner .cookie-banner-decline { background: transparent; color: var(--muted); box-shadow: none; }
/* `.job-filters label` (column) outranked `.filter-check` (row). */
.job-filters label.filter-check { flex-direction: row; align-items: center; flex: 0 0 auto; }
.job-filters label.filter-check input { width: auto; }
/* Company tile is ROUND and muted so it can never be read as a second grade:
   the square, coloured chip is the grade, the circle is who is hiring. */
.company-tile { border-radius: 999px; color: hsl(var(--h) 25% 32%); background: hsl(var(--h) 30% 92%); font-weight: 700; }

/* /ai-training-jobs/ */
.ai-jobs h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
.ai-jobs-quick { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1.75rem 0 1rem; }
.ai-jobs section { margin: 2.25rem 0; }
.ai-jobs-note { font-size: 0.85rem; color: var(--muted); }
.ai-table td { font-family: var(--body); font-size: 0.85rem; vertical-align: top; }
.ai-table td.num, .ai-table th.num { text-align: right; font-family: var(--mono); }
.ai-table-tag { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 0.15rem; }
.ai-pay { max-width: 18rem; color: var(--ink); }
.btn-aside--on-primary { color: inherit; opacity: 0.8; }
.callout--flag h2 { margin-top: 0; font-size: 1.1rem; }

/* /worldwide/ finder: search + role chips above the list */
.finder { margin: 1.25rem 0 1.75rem; }
.finder-form { display: flex; gap: 0.5rem; margin: 0 0 0.85rem; }
.finder-form input[type="search"] { flex: 1 1 auto; width: auto; min-width: 0; font-size: 1rem; padding: 0.7rem 0.9rem; }
.finder-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; }

/* --- wayfinding: the board opens on jobs, not on prose ------------------ */
.crumbs { font-size: 0.8rem; color: var(--muted); padding-top: 1.25rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.board-lede { color: var(--muted); max-width: 46rem; margin: 0.25rem 0 0; }
.job-filters .filter-more { border-top: 1px solid var(--line); padding-top: 0.6rem; }
.job-filters .filter-more > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; font-weight: 600; color: var(--ink);
}
.job-filters .filter-more > summary::-webkit-details-marker { display: none; }
.job-filters .filter-more > summary::before { content: "+"; font-family: var(--mono); color: var(--muted); }
.job-filters .filter-more[open] > summary::before { content: "−"; }
.job-filters .filter-more[open] > summary { margin-bottom: 0.75rem; }
.job-filters .filter-more .filter-row + .filter-row { margin-top: 0.75rem; }
.filter-count {
    font-size: 0.7rem; font-weight: 700; color: var(--olive-ink); background: var(--olive-wash);
    border-radius: var(--radius-pill); padding: 0.05rem 0.5rem;
}
.quick-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: -1rem 0 1.5rem; }
p.quick-chips { margin: 0.5rem 0 1.5rem; }
.chip-count { font-family: var(--mono); font-size: 0.72em; color: var(--muted); margin-left: 0.2rem; }
.board-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.board-heading small { font-family: var(--mono); font-size: 0.75rem; font-weight: 400; color: var(--muted); }
.board-about { margin: 3rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); max-width: 46rem; }
.board-about h2 { font-size: 1.1rem; color: var(--ink); }
.header-search input {
    width: 12rem; padding: 0.4rem 0.75rem; font-size: 0.85rem;
    border-radius: var(--radius-pill); background: hsl(240 5% 8% / 0.04);
    border: 1px solid hsl(240 5% 8% / 0.1);
}
.header-search input:focus { width: 16rem; background: var(--white); }
@media (max-width: 60rem) { .header-search input { width: 9rem; } .header-search input:focus { width: 11rem; } }
@media (max-width: 40rem) { .header-search { flex: 1 1 auto; } .header-search input, .header-search input:focus { width: 100%; } .site-actions { flex: 1 1 auto; justify-content: flex-end; } }

/* job page: breadcrumb above the case file; the grade reason folds */
.grade-reason > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.grade-reason > summary::-webkit-details-marker { display: none; }
.grade-reason > summary .section-label { flex-basis: 100%; margin: 0; }
.grade-reason-more { font-size: 0.85rem; font-weight: 600; color: var(--olive-ink); white-space: nowrap; }
.grade-reason-more::after { content: " +"; font-family: var(--mono); }
.grade-reason[open] .grade-reason-more::after { content: " −"; }
.grade-reason[open] > summary { margin-bottom: 1rem; }
.grade-reason > summary .grade-reason-lede { margin: 0; }
.grade-reason > summary .section-label { margin-bottom: 0.4rem; }

/* /companies/: search first, then a compact grid instead of 500 tall rows */
.company-finder { max-width: 40rem; margin: 1.25rem 0 1.5rem; }
.company-grid { list-style: none; padding: 0; margin: 0.5rem 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.5rem; }
.company-grid a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
    padding: 0.6rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--card); color: var(--ink); text-decoration: none;
}
.company-grid a:hover { border-color: color-mix(in srgb, var(--olive) 45%, var(--line)); background: var(--olive-wash); }
.company-grid strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.company-grid span { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); white-space: nowrap; }

/* Phones: the menu row scrolls inside itself. As a flex item it defaulted to
   min-width:auto, grew to fit every link, and pushed the whole page 26px
   wider than the screen (a sideways scroll on every page). */
@media (max-width: 60rem) {
    .site-nav { min-width: 0; max-width: 100%; }
    .site-header { max-width: 100vw; overflow-x: clip; }
}
/* Scraped descriptions carry long URLs, wide tables and fixed-width images
   from thousands of sources; none of them may widen the page. */
.job-body { overflow-wrap: anywhere; min-width: 0; }
.job-body img, .job-body video, .job-body iframe { max-width: 100%; height: auto; }
.job-body table { display: block; max-width: 100%; overflow-x: auto; }
.job-body pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; }
/* Any data table scrolls within itself on a phone rather than widening the
   page (the /platforms/ comparison was 582px on a 375px screen). */
@media (max-width: 40rem) {
    main table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Employer page: "Feature — $99" opens a one-field form (the email that pays). */
.feature-start > summary { list-style: none; cursor: pointer; display: inline-flex; }
.feature-start > summary::-webkit-details-marker { display: none; }
.feature-start-form { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; min-width: 16rem; }
.feature-start-form input[type="email"] { flex: 1 1 10rem; width: auto; padding: 0.35rem 0.6rem; font-size: 0.85rem; }

/* =====================================================================
   Phones and small tablets. Written against real 390px renders
   (2026-10-09): the earlier pass only checked for sideways scroll and
   left a clipped two-row header, dead space under it, cramped job rows
   and a job page whose fixed Apply bar covered the content.
   ===================================================================== */
.mobile-menu { display: none; }
@media (max-width: 60rem) {
    .site-header { flex-wrap: nowrap; min-height: 3.5rem; padding-block: 0.5rem; gap: 0.5rem; position: sticky; }
    .site-header .site-nav, .site-header .header-search { display: none; }
    .site-actions { flex: 0 0 auto; margin-left: 0; }
    .site-actions .btn--secondary { display: none; }
    .brand { margin-right: auto; }

    .mobile-menu { display: block; }
    .mobile-menu > summary {
        list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
        height: 2.5rem; padding: 0 0.85rem; border-radius: var(--radius-pill);
        font-size: 0.9rem; font-weight: 600; color: var(--ink);
        background: hsl(240 5% 8% / 0.05); box-shadow: inset 0 0 0 1px hsl(240 5% 8% / 0.08);
    }
    .mobile-menu > summary::-webkit-details-marker { display: none; }
    .mobile-menu-bars, .mobile-menu-bars::before, .mobile-menu-bars::after {
        display: block; width: 1rem; height: 2px; border-radius: 2px; background: currentColor; content: "";
    }
    .mobile-menu-bars { position: relative; }
    .mobile-menu-bars::before { position: absolute; top: -5px; }
    .mobile-menu-bars::after { position: absolute; top: 5px; }
    .mobile-menu[open] .mobile-menu-bars { background: transparent; }
    .mobile-menu[open] .mobile-menu-bars::before { top: 0; transform: rotate(45deg); }
    .mobile-menu[open] .mobile-menu-bars::after { top: 0; transform: rotate(-45deg); }

    .mobile-menu-panel {
        position: absolute; left: 0; right: 0; top: 100%;
        max-height: calc(100dvh - 3.5rem); overflow-y: auto;
        padding: 0.75rem 1rem 1.25rem;
        background: var(--paper); border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 30px -18px hsl(240 5% 8% / 0.35);
    }
    .mobile-menu-search { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
    .mobile-menu-search input { flex: 1 1 auto; width: auto; min-width: 0; font-size: 1rem; padding: 0.6rem 0.8rem; }
    .mobile-menu-panel nav { display: grid; }
    .mobile-menu-panel nav a {
        display: block; padding: 0.8rem 0.25rem; font-size: 1rem; font-weight: 500;
        color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
    }
    .mobile-menu-panel nav a:last-child { border-bottom: 0; }
    .mobile-menu-panel nav a[aria-current="page"] { color: var(--olive-ink); font-weight: 700; }
}

@media (max-width: 40rem) {
    main { padding: 1rem 1rem 3rem; }
    .crumbs { padding-top: 0.25rem; }
    h1 { font-size: clamp(1.6rem, 1.2rem + 3vw, 2.1rem); line-height: 1.12; }

    /* Job rows: one grade chip, the title gets the width. */
    .job-card { gap: 0.6rem; padding: 0.75rem 0.85rem; align-items: flex-start; }
    .job-card .company-tile { display: none; }
    .job-card .case-title a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .job-card .case-facts .fact-company { flex-basis: 100%; }
    .job-card .case-facts .fact-company + *::before { content: none; margin: 0; }
    .job-card .case-facts span:not(.fact-salary) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    .job-card-age { font-size: 0.7rem; }

    /* Job page: the stamp sits beside the title, not above it, and the
       fixed Apply bar never covers the last of the page. */
    .case-file-header .stamp { transform: scale(0.7); transform-origin: top right; margin: 0 0 -1rem 0.5rem; }
    body:has(.job-actions) { padding-bottom: 5rem; }
    .case-dossier { grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; }
}

/* Home hero search: one field, one button, on every screen size. */
body.rw-home .rw-hero-search { display: flex; gap: 0.5rem; max-width: 34rem; margin: 1.5rem auto 0; }
body.rw-home .rw-hero-search input { flex: 1 1 auto; width: auto; min-width: 0; font-size: 1rem; padding: 0.8rem 1rem; border-radius: var(--radius-pill); }
body.rw-home .rw-hero-search button { flex: 0 0 auto; border-radius: var(--radius-pill); padding: 0.8rem 1.25rem; color: var(--paper); background: var(--ink); box-shadow: none; font-weight: 600; }
body.rw-home .rw-hero-search button:hover { background: var(--olive-ink); color: #fff; }

.mobile-menu-search button, .mobile-menu .mobile-menu-search button { color: var(--paper); background: var(--ink); box-shadow: none; }

@media (max-width: 40rem) {
    body.rw-home .rw-hero-inner { padding: 1.75rem 1rem 2.25rem; }
    body.rw-home .rw-ph-badge { display: none; }
    body.rw-home .rw-hero-title { font-size: clamp(2rem, 1.4rem + 5vw, 2.6rem); }
    body.rw-home .rw-hero-search { margin-top: 1.1rem; }
    body.rw-home .rw-hero-search button { padding-inline: 1rem; }
    body.rw-home .rw-cta-row { flex-direction: column; align-items: stretch; }
    body.rw-home .rw-cta-row > a { justify-content: center; }

    /* The grade is in the facts and "Why this grade" right below; the big
       stamp only pushed the title down on a phone. */
    .case-file-header .stamp { display: none; }

    /* Board: the search button beside the field, not under it. */
    .job-filters .filter-row:first-child { flex-wrap: nowrap; }
    .job-filters .filter-row:first-child .filter-q { flex: 1 1 auto; }
    .job-filters .filter-row:first-child button { flex: 0 0 auto; }
}

@media (max-width: 40rem) {
    /* A nowrap line sized against an auto-width parent made each row grow to
       its longest line (743px in a 343px list). Rows take the list width;
       their text shrinks into it. */
    .job-list > li.job-card { width: 100%; min-width: 0; box-sizing: border-box; }
    .job-card .job-card-main { flex: 1 1 0; min-width: 0; }
    .job-card .case-facts { min-width: 0; }

    body.rw-home .rw-newsletter-form input { padding: 0.75rem 1rem; font-size: 1rem; height: auto; }
}

/* /pricing/: plan cards, one button each. */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0 0.75rem; }
.plan-card {
    position: relative; display: flex; flex-direction: column; gap: 0.5rem;
    padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
}
.plan-card h3, .plan-card h2 { margin: 0; font-size: 1.15rem; }
.plan-card ul { margin: 0.25rem 0 0.75rem; padding-left: 1.1rem; color: var(--muted); font-size: 0.92rem; flex: 1; }
.plan-card .btn { align-self: flex-start; }
.plan-card--popular { border-color: color-mix(in srgb, var(--olive) 55%, var(--line)); box-shadow: 0 0 0 1px hsl(160 84% 39% / 0.25); }
.plan-card--seeker { margin: 2.5rem 0 1rem; max-width: 46rem; }
.plan-flag { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--olive-ink); }
.plan-price { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.plan-price small { font-size: 0.85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan-alt { margin: 0.25rem 0 0; font-size: 0.82rem; }
.plan-alt a { color: var(--muted); }
.plan-note { font-size: 0.85rem; }
.pricing-faq { margin-top: 2.5rem; max-width: 46rem; }

@media (max-width: 40rem) {
    .plan-card .btn { align-self: stretch; justify-content: center; text-align: center; }

    /* AI training table: each platform becomes a card; Join stays on screen. */
    .ai-table, .ai-table tbody, .ai-table tr, .ai-table td { display: block; width: 100%; }
    .ai-table thead { display: none; }
    .ai-table tr { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 0.85rem 1rem; margin-bottom: 0.75rem; }
    .ai-table td { border: 0; padding: 0.2rem 0; text-align: left; }
    .ai-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink); }
    .ai-table td.num { display: inline-block; width: auto; margin-right: 1rem; font-family: var(--body); }
    .ai-table td:last-child { padding-top: 0.6rem; }
    .ai-table td:last-child .btn { width: 100%; justify-content: center; }

    /* Footer: two columns of real tap targets instead of a run-on line. */
    .site-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
    .site-footer nav a { padding: 0.55rem 0; font-size: 0.8rem; }
}

@media (max-width: 40rem) {
    main table.is-stacked, main table.is-stacked tbody, main table.is-stacked tr, main table.is-stacked td { display: block; width: 100%; overflow: visible; }
    main table.is-stacked thead { display: none; }
    main table.is-stacked tr {
        border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
        padding: 0.8rem 0.95rem; margin-bottom: 0.65rem; box-sizing: border-box;
    }
    main table.is-stacked td { border: 0; padding: 0.15rem 0; text-align: left; font-family: var(--body); font-size: 0.92rem; line-height: 1.45; }
    main table.is-stacked td:first-child { font-weight: 600; font-size: 1rem; padding-bottom: 0.3rem; }
    main table.is-stacked td:not(:first-child)[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); }
    main table.is-stacked td:empty { display: none; }
    main table.is-stacked td .btn, main table.is-stacked td details { margin-top: 0.4rem; }
    main table.is-stacked .num { font-family: var(--body); }
    .table-wrap { overflow: visible; }

    /* Employer page: the Feature form opens full width under the row. */
    .feature-start-form { min-width: 0; }

    /* Cookie banner: compact, and above the job page's fixed Apply bar. */
    .cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
    .cookie-banner .cookie-banner-inner { padding: 0.75rem 0.9rem; gap: 0.5rem; }
    .cookie-banner p { font-size: 0.8rem; line-height: 1.4; margin: 0; }
    body:has(.job-actions) .cookie-banner { bottom: 5.25rem; }
}
@media (max-width: 40rem) {
    main table.is-stacked td.num { display: inline-block; width: auto; margin-right: 1.25rem; text-align: left; }
}
.feature-start-form button, .feature-start-form button.btn--dark { color: var(--paper); background: var(--ink); box-shadow: none; }

/* Lighthouse (mobile, 2026-10-09): contrast below AA on the home hero.
   The faint grey measured 2.5:1 and the bright green 2.35:1 on the paper
   ground; the tokens meant for text on light are --muted and --olive-ink. */
body.rw-home .rw-stat-label, body.rw-home .rw-newsletter-lede { color: var(--muted); }
body.rw-home .rw-stat-olive { color: var(--olive-ink); }
body.rw-home .rw-cta-telegram { color: #0b5d8c; }

/* Touch targets: title and company links in a job row were stacked too
   tightly to hit reliably with a thumb. */
.job-card .case-title a { padding-block: 0.15rem; }
.job-card .case-facts .fact-company { display: inline-block; padding-block: 0.3rem; }

/* Home: every faint-grey label and every green text link failed AA (1.8-2.5:1).
   Faint grey becomes the accessible --muted; green used as TEXT becomes
   --olive-ink (green fills and borders are untouched). */
body.rw-home { --rw-ink-faint: var(--muted); }
body.rw-home .rw-newsletter-fine,
body.rw-home .rw-trust-kicker { color: var(--muted); }
body.rw-home .rw-newsletter-fine a,
body.rw-home .rw-inline-link,
body.rw-home .rw-see-all a,
body.rw-home .rw-category-card:hover .rw-category-name,
body.rw-home .rw-pill-olive:hover { color: var(--olive-ink); }

/* Site-wide AA: the bright accent as link TEXT measured 2.2-2.6:1 on every
   ground we use. Links take the text-safe accent; tag chips the readable grey.
   (Buttons and fills keep the bright --olive.) */
a { color: var(--olive-ink); }
a:hover { color: var(--ink); }
.tag { color: var(--muted); }
.cookie-banner .cookie-banner-inner a, .cookie-banner-inner p a { color: var(--olive-ink); }
.pager-off { color: var(--muted); }