/* Jobs Unfiltered · Daybreak. White space, midnight ink, one sunrise orange. No framework.
   Type: Unbounded (wide, futuristic) for the logo, page titles and big numbers only; Manrope for everything people read.
   Orange comes in two strengths: --sun fills (buttons, badges, progress; always with midnight text on top) and
   --accent, a deeper ember that passes contrast as text and lines. Status colours never use green. */
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope.c8ee132a663d.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("../fonts/Unbounded.4ee6ac46944b.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
/* Metric-matched stand-ins, shown while the real fonts download on a slow connection, so headlines don't jump when
   they arrive (the home page shifted 0.136 without these). Widths measured in Chrome and Safari: Unbounded is 128.5%
   of bold Arial, Manrope 101.5% of Arial; ascent and descent come from each font's own metrics. */
@font-face { font-family: "Unbounded Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"), local("Roboto Bold"), local("Roboto"); font-weight: 600 700; size-adjust: 128.5%; ascent-override: 77.4%; descent-override: 19.1%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Roboto"); font-weight: 200 550; size-adjust: 101.5%; ascent-override: 105%; descent-override: 29.6%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto"); font-weight: 551 800; size-adjust: 101.5%; ascent-override: 105%; descent-override: 29.6%; line-gap-override: 0%; }
:root {
  --bg: #FFFFFF;
  --bg-2: #F5F6F9;
  --surface: #FFFFFF;
  --soft: #F5F6F9;
  --ink: #0B1020;
  --ink-2: #3A4055;
  --muted: #5B6175;
  --line: #ECEEF3;
  --line-strong: #D9DDE6;
  --sun: #FF6B35;
  --sun-hover: #FF8152;
  --sun-ink: #0B1020;
  --sun-display: #EE5A24;
  --brand-orange: #CC4A12;
  --accent: #B93C0B;
  --accent-ink: #0B1020;
  --accent-soft: #FFE8DC;
  --good: #B93C0B;
  --good-soft: #FFE8DC;
  --warn: #8A5300;
  --warn-soft: #FFF3C4;
  --bad: #B42318;
  --bad-soft: #FEE4E2;
  --info: #3B4A6B;
  --info-soft: #E8ECF4;
  --panel: #0B1020;
  --panel-ink: #FFFFFF;
  --panel-muted: rgba(255, 255, 255, .74);
  --panel-line: rgba(255, 255, 255, .14);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(11, 16, 32, .04), 0 8px 24px -14px rgba(11, 16, 32, .16);
  --shadow-lg: 0 2px 4px rgba(11, 16, 32, .04), 0 22px 44px -22px rgba(11, 16, 32, .26);
  --font: "Manrope", "Manrope Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Unbounded", "Unbounded Fallback", "Manrope", "Arial Black", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1020; --bg-2: #10162A; --surface: #121830; --soft: #182039; --ink: #F2F4F8; --ink-2: #C6CBD8; --muted: #9AA1B7;
    --line: #222A44; --line-strong: #323C5E; --sun: #FF6B35; --sun-hover: #FF8152; --sun-ink: #0B1020; --sun-display: #FF8A5C; --brand-orange: #FF8A5C;
    --accent: #FF8A5C; --accent-ink: #0B1020; --accent-soft: #2E1C17;
    --good: #FF9A70; --good-soft: #2E1C17; --warn: #F5C451; --warn-soft: #2D2410; --bad: #FF8A80; --bad-soft: #3A1A1D; --info: #AEBBD8; --info-soft: #1A2238;
    --panel: #121830; --panel-ink: #F2F4F8; --panel-muted: rgba(242, 244, 248, .74); --panel-line: rgba(242, 244, 248, .12);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -14px rgba(0, 0, 0, .7);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 22px 44px -22px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15.5px; line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
main { flex: 1; width: 100%; }
h1, h2, h3, h4 { font-weight: 650; letter-spacing: -.022em; line-height: 1.15; margin: 0 0 .45em; color: var(--ink); }
h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: -.015em; }
h3 { font-size: 1.05rem; letter-spacing: -.01em; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }
a.plain { text-decoration: none; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }
.m0 { margin: 0; } .mt { margin-top: 1rem; } .mt-sm { margin-top: .6rem; } .mb { margin-bottom: 1rem; }
.pad-top { padding-top: 2rem; }
.wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 640px; }
.mid { max-width: 820px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--surface); padding: .5rem 1rem; z-index: 99; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* nav */
.nav { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.2) blur(12px); position: sticky; top: 0; z-index: 20; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: .95rem; font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; font-size: .92rem; }
.nav-links a { text-decoration: none; color: var(--ink-2); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-links a[aria-current] { font-weight: 600; }
.badge { display: inline-block; min-width: 1.3em; padding: 0 .4em; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .72rem; text-align: center; font-weight: 700; line-height: 1.55; vertical-align: 1px; }
.menu { position: relative; }
.menu summary { cursor: pointer; list-style: none; padding: .3rem .75rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-weight: 500; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + .4rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); min-width: 200px; padding: .35rem; display: grid; }
.menu-panel a, .menu-panel button { display: block; width: 100%; text-align: left; padding: .5rem .7rem; border-radius: 8px; text-decoration: none; font-size: .92rem; }
.menu-panel a:hover, .menu-panel button:hover { background: var(--soft); }
.linklike { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
form.inline { display: inline; }

/* flashes & notices */
.flashes { margin-top: 1rem; display: grid; gap: .5rem; }
.flash, .notice { padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--info) 25%, transparent); font-size: .93rem; }
.flash { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.flash-success { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.flash-error, .notice-bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.flash-warning, .notice-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.flash-x { background: none; border: 0; font-size: 1.2rem; line-height: 1; cursor: pointer; color: inherit; opacity: .55; }
.notice { margin-bottom: 1rem; }
.notice ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .58rem 1.05rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: .93rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .06s ease; }
.btn:hover { background: var(--soft); border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--soft); border-color: transparent; }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.btn-danger:hover { background: var(--bad-soft); }
.btn-sm { padding: .4rem .85rem; font-size: .86rem; }
.btn-lg { padding: .8rem 1.4rem; font-size: 1rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* cards & layout */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.45rem; box-shadow: var(--shadow); }
.card + .card { margin-top: 1rem; }
.card h3:first-child, .card h2:first-child { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.75rem; align-items: start; }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } }
.section { margin: 2.75rem 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stack { display: grid; gap: 1rem; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.span-all { grid-column: 1 / -1; }

/* chips, grades */
.chip { display: inline-block; padding: .14rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 600; background: var(--soft); color: var(--ink-2); white-space: nowrap; vertical-align: middle; letter-spacing: .005em; }
.chip-muted { background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 500; }
.chip-good { background: var(--good-soft); color: var(--good); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-bad { background: var(--bad-soft); color: var(--bad); }
.chip-info { background: var(--info-soft); color: var(--info); }
.chip-status-submitted, .chip-status-viewed { background: var(--soft); color: var(--muted); }
.chip-status-reviewing { background: var(--info-soft); color: var(--info); }
.chip-status-shortlisted, .chip-status-interviewing, .chip-status-offered { background: var(--good-soft); color: var(--good); }
.chip-status-hired { background: var(--good); color: #fff; }
.chip-status-declined { background: var(--bad-soft); color: var(--bad); }
.chip-status-withdrawn, .chip-status-closed { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.grade { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 650; }
.grade::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.grade-new { background: var(--soft); color: var(--muted); }
.grade-excellent, .grade-good { background: var(--good-soft); color: var(--good); }
.grade-mixed { background: var(--warn-soft); color: var(--warn); }
.grade-poor { background: var(--bad-soft); color: var(--bad); }

/* stats */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem 1.25rem; margin: 0; }
.stat-grid div { border-top: 1px solid var(--line); padding-top: .55rem; }
.stat-grid dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.stat-grid dd { margin: .15rem 0 0; font-size: 1.55rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-grid dd.small { font-size: 1.1rem; }
.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; }
.hero-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.05rem 1.2rem; box-shadow: var(--shadow); }
.hero-stat strong { display: block; font-size: 1.9rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-stat span { color: var(--muted); font-size: .84rem; }
.meter { height: 6px; border-radius: 999px; background: var(--soft); overflow: hidden; margin-top: .45rem; }
.meter > i { display: block; height: 100%; background: var(--good); border-radius: 999px; }
.meter-warn > i { background: var(--warn); }
.meter-bad > i { background: var(--bad); }

/* honest numbers */
.honest { border-left: 3px solid var(--accent); }
.honest ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.honest li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .45rem; font-size: .93rem; }
.honest li:last-child { border-bottom: 0; }
.honest li b { font-variant-numeric: tabular-nums; font-weight: 650; }
.accent { color: var(--accent); }

/* hero */
.hero { padding: 4rem 0 2rem; }
.hero h1 { max-width: 18ch; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.03em; }
.hero .lede { font-size: 1.12rem; max-width: 52ch; color: var(--ink-2); }
.lede { color: var(--ink-2); font-size: 1.05rem; }
.search { display: grid; grid-template-columns: 1fr 1fr auto; gap: .4rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: .35rem .35rem .35rem .9rem; box-shadow: var(--shadow-lg); max-width: 760px; }
.search input { border: 0; background: transparent; padding: .7rem .6rem; font: inherit; color: inherit; min-width: 0; }
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--accent); }
@media (max-width: 640px) { .search { grid-template-columns: 1fr; border-radius: var(--radius); padding: .5rem; } }
.manifesto { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; }
.manifesto .card { padding: 1.1rem 1.25rem; box-shadow: none; }
.manifesto h3 { font-size: 1rem; }
.manifesto p { font-size: .92rem; margin: 0; }

/* job cards & list */
.job-card { display: block; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.job-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.job-card h3 { margin-bottom: .1rem; font-size: 1.08rem; }
.job-card-top { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.job-card-top p { margin: 0; font-size: .92rem; }
.salary { font-size: 1rem; white-space: nowrap; color: var(--good); font-weight: 650; font-variant-numeric: tabular-nums; }
.salary-lg { font-size: 1.25rem; }
.job-card-meta { display: flex; gap: .35rem; flex-wrap: wrap; margin: .6rem 0; }
.job-card-foot { display: flex; gap: 1rem; font-size: .83rem; flex-wrap: wrap; margin-top: .4rem; }
.filters { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr 1fr auto; gap: .5rem; align-items: end; margin-bottom: 1.25rem; }
.filters-3 { grid-template-columns: 2fr 1fr auto; }
@media (max-width: 900px) { .filters, .filters-3 { grid-template-columns: 1fr 1fr; } }
.filters label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .25rem; font-weight: 600; }
.jobs-list { display: grid; gap: .8rem; }
.pager { display: flex; gap: .5rem; justify-content: center; margin: 1.5rem 0; }

/* forms */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], select, textarea {
  width: 100%; padding: .62rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; line-height: 1.5; }
.field { margin-bottom: 1.05rem; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .92rem; }
.field .help { color: var(--muted); font-size: .83rem; margin: .3rem 0 0; }
.field .error { color: var(--bad); font-size: .87rem; margin: .3rem 0 0; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--bad); }
.field-check { display: flex; align-items: center; gap: .6rem; }
.field-check label { margin: 0; font-weight: 500; }
.field ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.field ul li label { display: flex; align-items: center; gap: .55rem; font-weight: 500; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; margin: 0; }
.field ul li label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.field input[type=radio], .field input[type=checkbox] { accent-color: var(--accent); width: 1rem; height: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
input[type=file] { font: inherit; }
.auth { max-width: 440px; margin: 3rem auto; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding-left: 1.7rem; margin-bottom: .95rem; font-size: .95rem; }
.timeline li::before { content: ""; position: absolute; left: 0; top: .32rem; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line-strong); }
.timeline li.good::before { border-color: var(--good); }
.timeline li.bad::before { border-color: var(--bad); }
.timeline li.now::before { background: var(--accent); border-color: var(--accent); }
.timeline .when { font-size: .78rem; color: var(--muted); }
.timeline .note { background: var(--soft); padding: .6rem .8rem; border-radius: var(--radius-sm); margin-top: .4rem; font-size: .92rem; }
.steps { display: flex; gap: .3rem; margin: .8rem 0; }
.steps i { flex: 1; height: 5px; border-radius: 999px; background: var(--soft); }
.steps i.on { background: var(--good); }

/* rows */
.rows { display: grid; gap: .5rem; }
.rowcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .85rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; transition: border-color .15s ease; }
.rowcard:hover { border-color: var(--line-strong); }
.rowcard h4 { margin: 0; font-size: .97rem; font-weight: 600; }
.rowcard .sub { color: var(--muted); font-size: .83rem; margin-top: .1rem; }
.rowcard.stale { border-left: 3px solid var(--warn); }
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a { text-decoration: none; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--line); font-size: .83rem; color: var(--ink-2); }
.tabs a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* chat */
.chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: min(68vh, 620px); }
.chat-list { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.msg { max-width: 72%; padding: .6rem .85rem; border-radius: 14px; background: var(--soft); }
.msg-mine { align-self: flex-end; background: var(--ink); color: var(--bg); }
.msg-body { white-space: pre-wrap; word-wrap: break-word; font-size: .95rem; }
.msg-meta { font-size: .7rem; opacity: .65; margin-top: .25rem; }
.chat form { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; margin-top: .6rem; }
.chat form .field { margin: 0; }
.chat form textarea { min-height: 2.8rem; }
.privacy-note { background: var(--accent-soft); color: var(--accent); padding: .65rem 1rem; border-radius: var(--radius-sm); font-size: .88rem; }

/* billing */
.plan { padding: 1.6rem 1.75rem; }
.price { font-size: 1.1rem; font-weight: 650; letter-spacing: -.01em; }
.ticks { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .4rem; }
.ticks li { padding-left: 1.5rem; position: relative; font-size: .95rem; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* misc */
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); font-size: .95rem; }
.empty strong { display: block; color: var(--ink); font-size: 1.1rem; margin-bottom: .3rem; }
.prose { max-width: 68ch; }
.prose p, .prose li { font-size: 1rem; color: var(--ink-2); }
.prose h2 { margin-top: 2rem; }
.prose ul { padding-left: 1.2rem; }
.desc { white-space: pre-line; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: .95rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.anon .name { filter: blur(5px); user-select: none; }
.footer { border-top: 1px solid var(--line); margin-top: 3.5rem; padding: 1.75rem 0; font-size: .86rem; color: var(--muted); }
.footer-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer strong { color: var(--ink); }
.callout { background: var(--soft); padding: 1rem 1.2rem; border-radius: var(--radius); }
.mono { font-family: var(--mono); font-size: .9em; }

/* fixes */
.nav-links .btn-primary { color: var(--bg); }
.nav-links .btn-primary:hover { color: var(--bg); }
.help { color: var(--muted); font-size: .83rem; }

/* round 3 */
.fit { font-weight: 600; color: var(--muted); }
.fit-ok { color: var(--warn); }
.fit-good { color: var(--good); }
.pledge-list { padding-left: 1.4rem; margin: 0; display: grid; gap: .6rem; font-size: 1rem; }
.plan-current { border-color: var(--accent); }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0 0 1.2rem; }
.table th, .table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
textarea[readonly] { background: var(--soft); }
.howhire .stat-grid dd { font-size: 1.3rem; }

/* home: categories */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.cat { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; font-size: .92rem; font-weight: 500; transition: border-color .15s ease; }
.cat:hover { border-color: var(--accent); }
.chip.plain { text-decoration: none; }
.filters { grid-template-columns: 2fr 1.4fr 1.2fr 1.2fr 1fr 1fr 1fr auto; }
@media (max-width: 1000px) { .filters { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .filters { grid-template-columns: 1fr 1fr; } }
.cat span:last-child { white-space: nowrap; }
.cat-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (max-width: 700px) {
  .nav-secondary { display: none; }
  .nav-links { gap: .8rem; font-size: .88rem; }
  .hero { padding: 2.5rem 0 1.5rem; }
}

/* why page + both-sides band */
.eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--accent); margin: 0 0 .5rem; }
.why-hero h1 { max-width: 20ch; }
.pains { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.pains li { padding-left: 1.4rem; position: relative; color: var(--ink-2); }
.pains li::before { content: "×"; position: absolute; left: 0; color: var(--bad); font-weight: 700; }
.side h2 { font-size: 1.35rem; }
.mirror { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.mirror-row { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr 1.6fr; gap: 1rem; padding: .8rem 1.1rem; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); }
.mirror-row:first-child { border-top: 0; }
.mirror-row span:last-child { color: var(--good); font-weight: 600; }
.mirror-head { background: var(--soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--muted); }
.mirror-head span:last-child { color: var(--muted); }
@media (max-width: 760px) {
  .mirror-row { grid-template-columns: 1fr; gap: .25rem; }
  .mirror-head { display: none; }
}
.price-big { font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em; margin: .2rem 0 .5rem; }
.price-big span { font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pledge-band { background: var(--panel); color: var(--panel-ink); border-color: var(--panel); padding: 2rem 2.2rem; }
.pledge-band h2 { color: var(--panel-ink); }
.pledge-band .muted { color: var(--panel-muted); }
.pledge-band a { color: var(--panel-ink); text-decoration-color: var(--sun); }
.pledge-band .eyebrow { color: #FF8A5C; }
.cta .btn { margin-top: .3rem; }
.both-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; padding: 1.5rem 1.75rem; }
.both-sides p:last-child { margin: 0; color: var(--ink-2); }
.both-mid { font-size: 1.6rem; color: var(--accent); font-weight: 700; }
@media (max-width: 700px) { .both-sides { grid-template-columns: 1fr; } .both-mid { display: none; } }
.m-label { display: none; font-style: normal; font-weight: 600; color: var(--muted); }
@media (max-width: 760px) { .m-label { display: inline; } }

/* onboarding */
.choose { max-width: 760px; margin: 0 auto; text-align: center; }
.choose .lede { margin-bottom: 1.5rem; }
.choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: left; }
@media (max-width: 640px) { .choose-grid { grid-template-columns: 1fr; } }
.choice { display: grid; gap: .5rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.choice:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.choice-title { font-size: 1.25rem; font-weight: 650; letter-spacing: -.015em; }
.choice-title::after { content: " →"; color: var(--accent); }
.choice-meta { font-size: .8rem; color: var(--accent); font-weight: 600; }
.steps-bar { list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0 0 1.25rem; }
.steps-bar li { flex: 1; font-size: .72rem; font-weight: 600; color: var(--muted); padding-top: .45rem; border-top: 3px solid var(--line); text-transform: uppercase; letter-spacing: .05em; }
.steps-bar li.on { color: var(--ink); border-top-color: var(--accent); }
.btn-block { width: 100%; }
.drop { display: grid; gap: .3rem; place-items: center; text-align: center; padding: 2rem 1rem; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--soft); cursor: pointer; }
.drop:hover, .drop:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.drop.has-error { border-color: var(--bad); }
.drop-title { font-weight: 650; font-size: 1.05rem; }
.drop input[type=file] { margin-top: .5rem; max-width: 100%; }
.checklist { margin-bottom: 1.5rem; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.check-items { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .55rem; }
.check-items li { padding-left: 1.7rem; position: relative; }
.check-items li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid var(--line-strong); }
.check-items li.done { color: var(--muted); text-decoration: line-through; }
.check-items li.done::before { background: var(--accent); border-color: var(--accent); }
.check-items li a { font-weight: 600; }
.form-section { display: flex; align-items: center; gap: .55rem; margin: 1.6rem 0 .9rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.form-section span { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: .8rem; }
.nav-narrow { display: none; }
@media (max-width: 700px) {
  .nav-wide { display: none; }
  .menu-panel .nav-narrow { display: block; }
}
.drop { overflow: hidden; }
.drop > * { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 480px) { .drop { padding: 1.5rem .75rem; } }
.drop { grid-template-columns: minmax(0, 1fr); justify-items: center; }

/* ================= mobile optimisation ================= */
html { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
#apply { scroll-margin-top: 80px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], select, textarea { font-size: 16px; }
.layout > *, .grid-2 > *, .grid-3 > *, .spread > *, .row > * { min-width: 0; }
h1, h2, h3, h4, .field p, .desc, .rowcard h4, .sub { overflow-wrap: break-word; }
input[type=file] { max-width: 100%; }
.eyebrow, .stat-grid dt, .filters label, .filters-m label, .steps-bar li, .table th, .msg-meta, .tiny, .chip, .mirror-head { font-size: max(.75rem, 12px); }

/* filters */
.filters-m { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; align-items: end; margin-bottom: 1.25rem; }
.filters-m label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .25rem; font-weight: 600; }
.filters-m > button { order: 3; }
.filters-m .filter-more { order: 4; grid-column: 1 / -1; }
.filter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.filter-more summary { list-style: none; cursor: pointer; }
.filter-more summary::-webkit-details-marker { display: none; }
@media (min-width: 701px) { .filter-more > summary { display: none; } }

/* sticky apply bar + at-a-glance stats (phones only) */
.apply-bar, .m-stats { display: none; }

/* hover effects only where hover exists */
@media (hover: none) {
  .job-card:hover, .choice:hover { transform: none; box-shadow: var(--shadow); }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 2rem); }
  .pad-top { padding-top: 1.25rem; }
  .section { margin: 2rem 0; }
  .card { padding: 1.1rem 1.1rem; }
  h1 { font-size: 1.85rem; }

  /* tap targets */
  .nav-links a, .menu summary, .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .menu-panel a, .menu-panel button { min-height: 44px; display: flex; align-items: center; }
  .btn, .btn-sm { min-height: 44px; }
  .tabs a, a.chip { min-height: 44px; display: inline-flex; align-items: center; padding-inline: .9rem; }
  .footer nav { gap: 0 1rem; }
  .footer nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .skip:focus { padding: .9rem 1rem; }
  .linklike { min-height: 44px; }
  .field ul li label { min-height: 48px; }
  .field-check { min-height: 44px; }
  .field input[type=radio], .field input[type=checkbox] { width: 1.25rem; height: 1.25rem; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], select { min-height: 48px; }

  /* tabs scroll sideways instead of wrapping into a wall */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: 0 0 auto; }

  /* job cards stack */
  .job-card-top { flex-direction: column; gap: .25rem; }
  .salary { white-space: normal; }
  .job-card-foot { gap: .25rem .9rem; }

  /* rows: chip drops under text */
  .rowcard { grid-template-columns: 1fr; gap: .4rem; }
  .rowcard > .chip, .rowcard > span:last-child { justify-self: start; }

  /* filters */
  .filters-m { grid-template-columns: 1fr; }
  .filters-m > button { order: 4; width: 100%; }
  .filters-m .filter-more { order: 3; }
  .filter-more summary { min-height: 44px; display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ink-2); }
  .filter-more summary::before { content: "+"; font-weight: 700; color: var(--accent); width: 1rem; }
  .filter-more[open] summary::before { content: "–"; }
  .filter-grid { grid-template-columns: 1fr 1fr; margin-top: .25rem; }
  .filters, .filters-3 { grid-template-columns: 1fr; }

  /* job page */
  .m-stats { display: block; font-size: .92rem; color: var(--ink-2); background: var(--accent-soft); border-radius: var(--radius-sm); padding: .6rem .8rem; }
  body.has-apply-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .apply-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: .75rem; align-items: center; justify-content: space-between; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(0,0,0,.25); }
  .apply-bar-text { display: grid; min-width: 0; }
  .apply-bar-text strong { color: var(--good); font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .apply-bar-text span { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .apply-bar .btn { flex: 0 0 auto; padding-inline: 1.6rem; }

  /* stats */
  .hero-stats { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .hero-stat { padding: .85rem .9rem; }
  .hero-stat strong { font-size: 1.5rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; }

  /* home categories: two columns */
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .cat { flex-direction: column; align-items: flex-start; gap: .1rem; min-height: 64px; padding: .65rem .75rem; font-size: .88rem; }

  /* chat fills the screen, input stays usable with the keyboard up */
  .chat { height: calc(100dvh - 230px); min-height: 360px; }
  .msg { max-width: 86%; }

  /* privacy table stacks */
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table .th-row { display: none; }
  .table tr { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .8rem; margin-bottom: .6rem; background: var(--surface); }
  .table td { border: 0; padding: .2rem 0; }
  .table td::before { content: attr(data-label); display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }

  /* employer bits */
  textarea[readonly] { font-size: 12px; }
  .both-sides { padding: 1.1rem; gap: .75rem; }
  .pledge-band { padding: 1.4rem 1.2rem; }
  .plan { padding: 1.2rem; }
}
.skip { padding: .9rem 1rem; }
@media (max-width: 700px) {
  .section-head a { min-height: 44px; display: inline-flex; align-items: center; }
  input[type=file] { min-height: 44px; font-size: 15px; }
  input[type=file]::file-selector-button { min-height: 40px; padding: 0 .9rem; margin-right: .6rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font: inherit; font-weight: 600; }
  textarea[readonly] { font-size: 16px; }
  h1 a.plain { display: inline-block; min-height: 44px; }
  .field-check label a { display: inline-block; padding: .7rem .2rem; margin: -.4rem -.2rem; }
}
img { max-width: 100%; height: auto; }
@media (max-width: 700px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid dd { overflow-wrap: break-word; }
}
@media (max-width: 340px) {
  .hero-stats, .cat-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .nav-links a.nav-secondary, .nav-links a.nav-wide { display: none; }
  .nav-inner { flex-wrap: nowrap; padding: .35rem 0; }
  .nav-links { flex-wrap: nowrap; gap: .9rem; }
}
@media (max-width: 700px) {
  .menu summary { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 42px; padding-block: 0; }
}
@media (max-width: 380px) {
  .nav-links { gap: .7rem; }
  .brand > span:last-child { display: none; }
}

/* offers + onboarding */
.offer-card { border-left: 3px solid var(--info); }
.offer-accepted { border-left-color: var(--good); }
.offer-declined { border-left-color: var(--bad); }
.tasks { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.tasks li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tasks form { flex: 1; }
.task-btn { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: .35rem .2rem; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
button.task-btn:hover { background: var(--soft); }
.task-btn.readonly { cursor: default; }
.tick { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--line-strong); }
.tasks li.done .tick { background: var(--accent); border-color: var(--accent); }
.tasks li.done .task-btn span:last-child { color: var(--muted); text-decoration: line-through; }
.new-job { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); margin-bottom: 1rem; }
.funnel { display: grid; gap: .5rem; }
.funnel-row { display: grid; grid-template-columns: 9rem 1fr 2.5rem; gap: .6rem; align-items: center; font-size: .9rem; }
.funnel-row .meter { margin: 0; }
.funnel-row b { text-align: right; font-variant-numeric: tabular-nums; }
.reveal input { margin-top: .4rem; font-size: 14px; }
@media (max-width: 700px) { .funnel-row { grid-template-columns: 7rem 1fr 2rem; font-size: .85rem; } .reveal input { font-size: 16px; } }

/* for business + developers */
.journey { list-style: none; counter-reset: step; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.journey li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; display: grid; gap: .3rem; box-shadow: var(--shadow); }
.journey li::before { content: counter(step); display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .85rem; }
.journey span { color: var(--muted); font-size: .93rem; }
.integrate { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
pre.code { background: #0B1020; color: #E6E9F2; border-radius: var(--radius-sm); padding: 1rem 1.1rem; overflow-x: auto; font-size: .82rem; line-height: 1.55; margin: .5rem 0 1rem; }
pre.code code { font-family: var(--mono); white-space: pre; }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--soft); padding: .05rem .3rem; border-radius: 5px; }
.prose pre.code code { background: none; padding: 0; }
.wide-prose { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); padding: .3rem 0; }
.faq summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--accent); font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--ink-2); margin: .2rem 0 .9rem; }
@media (max-width: 860px) { .journey { grid-template-columns: 1fr 1fr; } .integrate { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .journey { grid-template-columns: 1fr; } }
input[type=date] { width: 100%; padding: .62rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
pre.code { font-size: 13px; }
pre.code code { font-size: 1em; }
details > summary { cursor: pointer; }
@media (max-width: 700px) {
  input[type=date] { min-height: 48px; }
  main details > summary { min-height: 44px; display: flex; align-items: center; }
}

/* CV picker */
.filepick { display: grid; justify-items: start; gap: .5rem; padding: 1.1rem; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--soft); }
.filepick.has-error { border-color: var(--bad); background: var(--bad-soft); }
.filepick-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.filepick-btn { cursor: pointer; margin: 0; }
.filepick-input:focus-visible + .filepick-btn { outline: 3px solid var(--accent); outline-offset: 2px; }
.filepick-name { margin: 0; font-size: .92rem; color: var(--ink-2); overflow-wrap: anywhere; }
.filepick-warn { margin: 0; color: var(--bad); font-weight: 600; font-size: .92rem; }
.filepick-help { width: 100%; font-size: .88rem; color: var(--ink-2); }
.filepick-help summary { color: var(--accent); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.filepick-help ul { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
@media (max-width: 700px) { .filepick-btn { width: 100%; } .filepick-help summary { min-height: 44px; } }

/* pricing + share */
.pricing-grid { align-items: stretch; }
.pricing-grid .plan { display: flex; flex-direction: column; gap: .3rem; }
.pricing-grid .plan .ticks { flex: 1; }
.plan-featured { border: 2px solid var(--accent); }
.feecalc { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: center; }
.feecalc-out { display: grid; gap: .7rem; background: var(--soft); border-radius: var(--radius); padding: 1.2rem; }
.feecalc-out div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.feecalc-out span { color: var(--ink-2); font-size: .92rem; }
.feecalc-out strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.feecalc-out div:first-child strong { color: var(--bad); }
.feecalc-out div:nth-child(2) strong, .feecalc-out div:nth-child(3) strong { color: var(--good); }
.share { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.share-label { font-weight: 600; font-size: .9rem; margin-right: .3rem; width: 100%; }
.share-btn { display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.share-btn:hover { background: var(--soft); }
.share-note { margin: .5rem 0 0; }
.trust-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.trust-band > div { padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.trust-band strong { display: block; margin-bottom: .2rem; }
.trust-band p { margin: 0; color: var(--muted); font-size: .92rem; }
@media (max-width: 860px) { .feecalc { grid-template-columns: 1fr; } .trust-band { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .share-btn { min-height: 44px; } }
.grid-2x2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
@media (max-width: 700px) { .grid-2x2 { grid-template-columns: 1fr; } }
.notice-good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.error-page { padding-bottom: 3rem; }
main:focus { outline: none; }

/* ===================== display (Unbounded) + home ===================== */
.display, .hero h1 { font-family: var(--display); font-weight: 700; letter-spacing: -.025em; line-height: 1.06; }
.display em, .hero h1 em { font-style: normal; color: var(--sun-display); }
h2.display { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: .5rem; }
.center { text-align: center; }

.home-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; align-items: center; padding: 4.5rem 0 3rem; }
.home-hero h1.display { font-size: clamp(2.8rem, 6.2vw, 4.9rem); max-width: 13ch; margin-bottom: 1.1rem; }
.home-hero .lede { font-size: 1.14rem; max-width: 50ch; color: var(--ink-2); margin-bottom: 1.6rem; }
.assurances { list-style: none; padding: 0; margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; font-size: .9rem; color: var(--ink-2); }
.assurances li { display: inline-flex; align-items: center; gap: .45rem; }
.assurances li::before { content: ""; width: .9rem; height: .9rem; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23B93C0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; flex: 0 0 auto; }

.hero-visual { margin: 0; position: relative; }
.hero-visual::before { content: ""; position: absolute; inset: 8% -6% -6% 10%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent); filter: blur(10px); z-index: 0; }
.hv-card { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 1.4rem 1.5rem 1.2rem; box-shadow: 0 30px 60px -30px rgba(11, 16, 32, .35), 0 2px 6px rgba(11, 16, 32, .05); transform: rotate(-1.2deg); }
.hv-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.hv-head strong { display: block; font-size: 1.05rem; }
.hv-head span { color: var(--muted); font-size: .86rem; }
.hv-pay { font-weight: 650; color: var(--good) !important; font-size: .98rem !important; white-space: nowrap; }
.hv-steps { list-style: none; margin: 1rem 0 .4rem; padding: 0; position: relative; display: grid; gap: .85rem; }
.hv-steps::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.hv-steps li { position: relative; padding-left: 1.8rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .8rem; font-size: .93rem; color: var(--muted); }
.hv-steps li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.hv-steps li.done { color: var(--ink); }
.hv-steps li.done::before { background: var(--accent); border-color: var(--accent); }
.hv-steps li.now::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent); }
.hv-steps time { font-size: .8rem; color: var(--muted); }
.hv-note { flex-basis: 100%; margin: .35rem 0 0; padding: .65rem .8rem; background: var(--soft); border-radius: 12px 12px 12px 4px; font-weight: 600; font-size: 1rem; color: var(--ink); line-height: 1.45; }
.hv-foot { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-2); }
.hv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); flex: 0 0 auto; }
.hero-visual figcaption { position: relative; z-index: 1; margin-top: .9rem; text-align: center; font-size: .78rem; color: var(--muted); }

.feelings { padding-top: 1rem; }
.feel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.6rem; }
.feel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.3rem; display: grid; gap: .9rem; align-content: start; }
.feel-was { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; margin: 0; color: var(--ink); }
.feel-now { margin: 0; padding-top: .9rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .95rem; }
.feel-now strong { color: var(--accent); }

.promises { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.promise-col { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.8rem 1.9rem; }
.promise-list { list-style: none; counter-reset: p; padding: 0; margin: 1.1rem 0 1.5rem; display: grid; gap: .85rem; }
.promise-list li { counter-increment: p; display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; color: var(--ink-2); }
.promise-list li::before { content: counter(p, decimal-leading-zero); font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--accent); }

.numbers { background: var(--bg-2); border-radius: 24px; padding: 2.4rem 2.2rem; }
.numbers-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.numbers-head p { margin: 0; max-width: 42ch; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin: 0; }
.figures div { display: flex; flex-direction: column-reverse; gap: .3rem; border-top: 1px solid var(--line-strong); padding-top: .9rem; }
.figures dd { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1; color: var(--ink); }
.figures dd small { font-size: .45em; color: var(--muted); }
.figures dd.figure-text { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.figures dt { color: var(--muted); font-size: .88rem; }

.independent { text-align: center; }
.independent-inner { max-width: 640px; margin: 0 auto; }
.independent p:last-child { color: var(--ink-2); font-size: 1.04rem; }

.closing { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 26px; overflow: hidden; background: var(--panel); color: var(--panel-ink); }
.closing-col { padding: 2.6rem 2.4rem; display: grid; gap: .8rem; align-content: start; }
.closing-col + .closing-col { border-left: 1px solid var(--panel-line); }
.closing h2.display { color: var(--panel-ink); font-size: clamp(1.6rem, 3vw, 2.3rem); }
.closing h2.display em { color: #FF8A5C; }
.closing p { color: var(--panel-muted); margin: 0 0 .4rem; }
.closing .btn { justify-self: start; }
.btn-light { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); }
.btn-light:hover { background: var(--sun-hover); border-color: var(--sun-hover); }
.btn-outline-light { background: transparent; color: var(--panel-ink); border-color: rgba(255, 255, 255, .45); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .08); border-color: var(--panel-ink); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hv-card { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
  :root:not([data-theme="light"]) .assurances li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23FF8A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) .closing { border: 1px solid var(--line); }
  :root:not([data-theme="light"]) .pledge-band { background: var(--panel); color: var(--ink); border-color: var(--line); }
  :root:not([data-theme="light"]) .pledge-band h2, :root:not([data-theme="light"]) .pledge-band a { color: var(--ink); }
  :root:not([data-theme="light"]) .pledge-band .muted { color: var(--ink-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .hv-card { animation: hv-in .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hv-steps li.now::before { animation: hv-pulse 2.4s ease-in-out infinite; }
}
@keyframes hv-in { from { opacity: 0; transform: translateY(14px) rotate(-1.2deg); } to { opacity: 1; transform: rotate(-1.2deg); } }
@keyframes hv-pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 6%, transparent); } }

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; gap: 2.2rem; padding-top: 2.6rem; }
  .hv-card { transform: none; }
  .feel-grid, .promises, .closing { grid-template-columns: 1fr; }
  .closing-col + .closing-col { border-left: 0; border-top: 1px solid var(--panel-line); }
  .figures { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .home-hero h1.display { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .numbers { padding: 1.6rem 1.2rem; border-radius: 18px; }
  .promise-col { padding: 1.4rem 1.2rem; }
  .closing-col { padding: 1.8rem 1.4rem; }
  .feel-was { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) { @keyframes hv-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } }
.home-hero .search { grid-template-columns: 1.15fr 1fr auto; }
.figures div { flex-direction: column; justify-content: flex-start; }
.figures dd { order: -1; min-height: 1.05em; display: flex; align-items: flex-end; }
.jobs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.jobs-grid .job-card { height: 100%; }
@media (max-width: 760px) { .home-hero .search { grid-template-columns: 1fr; } .jobs-grid { grid-template-columns: 1fr; } }
.home-hero { overflow-x: clip; }
@media (max-width: 900px) { .hero-visual::before { inset: 6% 0 0 0; } }
/* cards side by side in a grid must not inherit the stacked-card top margin */
:is(.grid-2, .grid-3, .grid-2x2, .jobs-grid, .manifesto, .feel-grid, .promises, .pricing-grid, .trust-band, .choose-grid, .journey) > .card + .card { margin-top: 0; }
.figures dd { min-height: clamp(2rem, 3.8vw, 2.8rem); line-height: 1; }


/* ===== reading comfort ===== */
body { font-size: 16.5px; line-height: 1.62; font-optical-sizing: auto; text-rendering: optimizeLegibility; font-kerning: normal; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3, .display { text-wrap: balance; }
.lede { line-height: 1.6; }
.prose { max-width: 66ch; }
.prose p, .prose li { line-height: 1.7; }
.muted, .small, .sub, .help { letter-spacing: .005em; }
.chip, .eyebrow, .stat-grid dt, .filters-m label, .steps-bar li { letter-spacing: .04em; }
.chip { letter-spacing: .01em; }
.salary, .price, .stat-grid dd, .figures dd, .hero-stat strong, .honest li b { font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 700px) { body { font-size: 17px; } }

/* attention: something the reader should act on (amber, never the brand orange) */
.attn { color: var(--warn); font-weight: 600; }


/* ===================== Daybreak component layer ===================== */
/* Type: page titles in Unbounded; everything else in Manrope, headings heavy and tight. */
body { font-size: 16px; line-height: 1.6; }
h1 { font-family: var(--display); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; font-size: clamp(1.55rem, 3vw, 2.15rem); }
h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); max-width: 18ch; }
.home-hero h1.display { font-size: clamp(2.2rem, 5.2vw, 3.9rem); max-width: 14ch; line-height: 1.04; }
@media (max-width: 700px) {
  h1 { font-size: clamp(1.4rem, 6.4vw, 1.75rem); }
  .home-hero h1.display { font-size: clamp(1.95rem, 9vw, 2.6rem); }
}
.eyebrow { color: var(--accent); letter-spacing: .08em; font-weight: 800; }
.lede, .hero .lede, .home-hero .lede { color: var(--ink-2); }
a:hover { text-decoration-color: var(--sun); }

/* Logo lockup: the open-door mark + "jobs" in midnight, "unfiltered" in orange */
.brand { gap: .6rem; font-family: var(--display); font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.brand-logo { width: 30px; height: 30px; flex: 0 0 auto; display: block; border-radius: 9px; }
.brand-word { white-space: nowrap; }
.brand-word b { color: var(--brand-orange); font-weight: 700; }  /* small text: deep enough for 4.5:1 */
@media (max-width: 380px) { .brand > .brand-word { display: none; } }

/* Buttons: squared-off, the primary action is the sunrise */
.btn { border-radius: var(--radius-sm); font-weight: 700; }
.btn-primary, .btn-accent { background: var(--sun); border-color: var(--sun); color: var(--sun-ink); }
.btn-primary:hover, .btn-accent:hover { background: var(--sun-hover); border-color: var(--sun-hover); color: var(--sun-ink); }
.nav-links .btn-primary, .nav-links .btn-primary:hover { color: var(--sun-ink); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-dark:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

/* Shapes: cards a touch rounder, small controls squarer */
.chip, .grade { border-radius: 8px; }
.tabs a, .share-btn, .menu summary { border-radius: 10px; }
.tabs a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.search { border-radius: var(--radius); }
.hv-card { border-radius: 22px; }
.msg-mine { background: var(--ink); color: var(--bg); }

/* Fills use the sunrise with midnight on top; lines and text use the deeper ember */
.badge { background: var(--sun); color: var(--sun-ink); }
input:focus, select:focus, textarea:focus { border-color: var(--sun); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 22%, transparent); }
.search:focus-within, .cat:hover, .choice:hover, .drop:hover, .drop:focus-within, .field ul li label:has(input:checked), .plan-current { border-color: var(--sun); }
.plan-featured { border: 2px solid var(--sun); }
.field input[type=radio], .field input[type=checkbox] { accent-color: var(--sun); }
.timeline li.now::before, .check-items li.done::before, .tasks li.done .tick, .hv-steps li.done::before { background: var(--sun); border-color: var(--sun); }
.hv-dot { background: var(--sun); box-shadow: 0 0 0 4px var(--accent-soft); }
.steps i.on, .meter > i { background: var(--sun); }
.steps-bar li.on { border-top-color: var(--sun); }
.journey li::before { background: var(--sun); color: var(--sun-ink); }
.chip-status-hired { background: var(--sun); color: var(--sun-ink); }
.honest { border-left-color: var(--sun); }
.hero-visual::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--sun) 16%, transparent), transparent); }

/* The facts we lead with: pay is midnight and heavy, never a status colour */
.salary, .hv-pay, .apply-bar-text strong { color: var(--ink) !important; font-weight: 800; }
.price-big, .stat-grid dd, .hero-stat strong { font-weight: 800; }
.figures dd small { font-family: var(--font); font-weight: 600; letter-spacing: 0; }

/* Daybreak polish (from screenshot review) */
.home-hero h1.display { max-width: 17ch; font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.search input[type=text], .search input[type=search] { border: 0; box-shadow: none; background: transparent; min-height: 0; }
.search input[type=text]:focus, .search input[type=search]:focus { box-shadow: none; }
.search > * + input, .search > input + input { border-left: 1px solid var(--line); border-radius: 0; }
@media (max-width: 760px) {
  .search input[type=text], .search input[type=search] { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); min-height: 48px; }
}
/* Status lives in the chip, not a coloured rail down the card */
.honest, .offer-card, .offer-accepted, .offer-declined { border-left: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo { box-shadow: 0 0 0 1px var(--line-strong); } }
@media (min-width: 761px) { .search input[type=search] + input[type=search] { border-left: 1px solid var(--line); border-radius: 0; } }

/* apply links */
.copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; align-items: center; }
.copy-row input { font-size: 14px; min-height: 0; padding: .5rem .65rem; background: var(--soft); }
.copy-list, .source-list { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .3rem; }
.copy-list li, .source-list li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-size: .9rem; }
.source-list li { border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.source-list b { font-variant-numeric: tabular-nums; }
.apply-link-card details { border-top: 1px solid var(--line); padding: .45rem 0; }
.how-steps { margin: .4rem 0 .2rem; padding-left: 1.2rem; display: grid; gap: .3rem; color: var(--ink-2); }
.apply-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: .55rem; color: var(--ink-2); }
.apply-steps strong { color: var(--ink); }
.apply-landing h1 { margin-bottom: .3rem; }
@media (max-width: 700px) { .copy-row input { font-size: 16px; } .copy-list .btn { min-height: 40px; } }
.developers .toc { font-size: .9rem; color: var(--muted); margin: 1rem 0 0; line-height: 2; }
.developers h2 { scroll-margin-top: 80px; }
.developers .table code { white-space: nowrap; }
.developers .toc { font-size: .9rem; color: var(--muted); margin: 1rem 0 0; line-height: 2; }
.developers h2 { scroll-margin-top: 80px; }
.developers .table code { white-space: nowrap; }

/* ===================== Mobile pass (from scripts/mobile_audit.py on iPhone, Android, iPad) ===================== */
/* Dropdowns: iOS Safari ignores height on native selects (they rendered 27px tall), so draw our own arrow.
   The arrow is muted ink in light mode and muted light ink in dark mode. */
select {
  -webkit-appearance: none; appearance: none; padding-right: 2.4rem; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B6175' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239AA1B7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
select[multiple] { background-image: none; padding-right: .8rem; }

/* Long values wrap instead of pushing the page sideways on small phones */
.kv { grid-template-columns: max-content minmax(0, 1fr); }
.kv dd, .stat-grid dd, .prose code, .developers .table code { overflow-wrap: anywhere; }
.developers .table code { white-space: normal; }
@media (max-width: 420px) { .kv { grid-template-columns: minmax(0, 1fr); gap: .1rem; } .kv dd { margin-bottom: .55rem; } }

/* Small text never under 12px */
.badge { font-size: max(.72rem, 12px); }

/* Touch screens of any size (phones in either orientation, tablets): finger-sized controls and no iOS zoom.
   The max-width:700px block above handles phone layout; this one handles touch whatever the width. */
@media (pointer: coarse) {
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], input[type=date], select, textarea { font-size: 16px; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], input[type=date], select { min-height: 48px; }
  textarea[readonly], .copy-row input, .reveal input { font-size: 16px; }
  .copy-row input { min-height: 48px; }
  .nav-links a, .menu summary, .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .menu-panel a, .menu-panel button, .linklike { min-height: 44px; display: flex; align-items: center; }
  .btn, .btn-sm, .share-btn { min-height: 44px; }
  .tabs a, a.chip { min-height: 44px; display: inline-flex; align-items: center; }
  .footer nav a, .section-head a { min-height: 44px; display: inline-flex; align-items: center; }
  .field ul li label { min-height: 48px; }
  .field-check { min-height: 44px; }
  .field-check label { padding-block: .7rem; }
  .field-check label a { display: inline-block; padding: .7rem .2rem; margin: -.7rem -.2rem; }
  .filepick-help summary { min-height: 44px; }
  h1 a.plain { display: inline-block; min-height: 44px; }
  .field input[type=radio], .field input[type=checkbox] { width: 1.25rem; height: 1.25rem; }
  main details > summary { min-height: 44px; display: flex; align-items: center; }
  .flash-x { min-width: 44px; min-height: 44px; margin: -.6rem -.7rem -.6rem 0; }
  .developers .toc a { display: inline-block; padding: .55rem .15rem; }
  .copy-list .btn { min-height: 44px; }
}

/* Phones turned sideways: a sticky bar would take a third of the screen, so let it scroll away */
@media (max-height: 500px) and (orientation: landscape) {
  .nav { position: static; }
}

/* Radio and checkbox lists: Django 5 renders them as <div><div><label><input> Text</label></div></div>, not <ul><li>,
   so give that structure the same bordered, finger-sized options as before */
.field > div[id] { display: grid; gap: .35rem; }
.field > div[id] > div > label { display: flex; align-items: center; gap: .55rem; font-weight: 500; padding: .55rem .8rem; min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; margin: 0; }
.field > div[id] > div > label:has(input:checked) { border-color: var(--sun); background: var(--accent-soft); }
.field > div[id] input[type=radio], .field > div[id] input[type=checkbox] { accent-color: var(--sun); width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }