/* ==========================================================================
   Rent Free Management
   Dark premium design system. One stylesheet, no build step, no web fonts.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* Cool slate grey, a darker ash, and petrol.
     Three palettes have been discarded getting here. Autonomerly's dark ground
     with #00A651 green and #FFD400 gold, because it made this read as a sibling
     product. A warm paper ground, because it was effectively Autonomerly's milk
     #F5F1E8 with the lights turned up. Then terracotta on that grey, because
     the brick was doing more shouting than the work deserves.
     What is left is one family: the ground, a darker ash cut from it, and a
     single cool note. Emphasis comes from weight and ground, not from hue. */

  --bg:           #F1F2F4;   /* page ground, cool light grey */
  --bg-2:         #E7E9EC;   /* alternating sections, a shade deeper */
  --surface:      #FFFFFF;   /* cards */
  --surface-2:    #F7F8F9;   /* subtly raised panel */
  --surface-3:    #E1E4E8;   /* chips, avatars, empty media wells */

  --line:         rgba(20, 23, 26, 0.13);
  --line-strong:  rgba(20, 23, 26, 0.26);

  --text:         #14171A;   /* ink. 16:1 on grey */
  --muted:        #4C525A;   /* secondary body. 7.2:1 */
  --faint:        #5C6269;   /* captions. 4.8:1 on the DARKEST ground it lands
                                on, which is the chips, not the page. A grey
                                ground is dimmer than paper, so the caption
                                colour that passed on cream fell to 4.1:1 here. */
  --text-wash:    rgba(20, 23, 26, 0.05);   /* hover grounds */
  --scrim:        rgba(20, 23, 26, 0.78);   /* pills sitting on a photograph */

  /* Ash. The same grey as the ground, taken down until it is a colour.
     --accent is for FILLS and icons, --accent-ink for TEXT, --accent-deep for
     the pressed and hovered state of a filled button.

     The ramp runs the opposite way to the terracotta it replaces. A bright
     chroma has to go DARKER to be readable as text, so --accent-ink used to sit
     below --accent and doubled as the button hover. An ash fill is already dark,
     so the text tone sits just ABOVE it, far enough off the body ink (2.08:1) to
     read as a deliberate second voice in a headline rather than as a smudge.
     That frees --accent-deep to do what its name always said it did.

     White on the fill is 10.2:1. --accent-ink is 7.7:1 on the page and 6.2:1 on
     the softest chip, so there is room here that the terracotta never had. */
  --accent:       #38424D;
  --accent-ink:   #414D59;
  --accent-deep:  #262E37;   /* hover and press on a filled button */
  --accent-soft:  rgba(56, 66, 77, 0.09);
  --accent-line:  rgba(56, 66, 77, 0.26);
  --on-accent:    #FFFFFF;

  /* Deep petrol. With the accent gone neutral this is the only hue left on the
     page, and it is spent only where colour carries meaning: a task settled, a
     confirmation, a tag that says something is finished. 8.4:1 on white. */
  --second:       #14555E;
  --second-soft:  rgba(20, 85, 94, 0.09);
  --second-line:  rgba(20, 85, 94, 0.26);
  --on-second:    #FFFFFF;

  /* Signal red, and it is ONLY ever a fill: as text on the page ground it is
     4.47:1 and misses AA, so anything red and small is a bug. Primary buttons,
     the progress bar, a pressed chip, the pricing flag and the skip link. That
     is the list. Everything else that used to be accent stays ash, which is what
     keeps the red meaning "do this" instead of meaning "decoration". */
  --cta:          #D62828;   /* white on it is 5.01:1 */
  --cta-deep:     #B31F1F;   /* hover and press, 6.74:1 */
  --on-cta:       #FFFFFF;

  /* Deepened from #A32418 when the buttons went red. An error and a call to
     action must not be the same colour, and 1.49:1 apart is the same colour. */
  --danger:       #8E1D14;
  /* The panel has to READ red, not merely be tinted. At 0.12 it was a pale pink
     that a grey page swallowed. 0.18 over the ground is #DFCCCC, and the text on
     it still measures 5.85:1. */
  --danger-soft:  rgba(142, 29, 20, 0.18);
  --danger-line:  rgba(142, 29, 20, 0.45);

  /* The header sits over content, so it is the page ground with a blur behind. */
  --glass:        rgba(241, 242, 244, 0.80);
  --glass-stuck:  rgba(241, 242, 244, 0.95);

  --radius:       14px;
  --radius-lg:    22px;
  --radius-sm:    9px;

  /* Light themes need shadow to be almost nothing, or every card looks glued on. */
  --shadow:       0 1px 2px rgba(20, 23, 26, .05), 0 20px 44px -30px rgba(20, 23, 26, .32);
  --ring:         0 0 0 3px rgba(56, 66, 77, 0.45);

  --wrap:         1200px;
  --gap:          clamp(18px, 2.2vw, 28px);
  --section:      clamp(68px, 9vw, 132px);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue",
          Helvetica, Arial, sans-serif;

  color-scheme: light;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The header is sticky, so anchor targets need to clear it when jumped to. */
:target, [id] { scroll-margin-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[hidden] { display: none !important; }
img, svg { max-width: 100%; display: block; }
picture { display: block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.05;
  letter-spacing: -0.028em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 4.15rem); letter-spacing: -0.038em; }
h2 { font-size: clamp(1.95rem, 3.8vw, 3.05rem); letter-spacing: -0.032em; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.25; }
h4 { font-size: 1rem; letter-spacing: -0.01em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--accent); color: var(--on-accent); }

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

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cta); color: var(--on-cta); padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 34px); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line); }
/* A band that sits directly under a page head, so it needs less air above it
   than a section that follows a full one. */
.section--band { padding-block: clamp(26px, 3vw, 40px) clamp(32px, 4.2vw, 56px); }
/* A second band straight after the first, so it does not pay the top padding twice. */
.section--band-top { padding-top: 0; }
/* The portal's tasks are the reason the page exists, so they start high. */
.section--flush { padding-top: clamp(26px, 3vw, 38px); }

.lede { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: var(--muted); max-width: 62ch; }
.measure { max-width: 68ch; }
.center { text-align: center; margin-inline: auto; }
.center .lede { margin-inline: auto; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.stack > * + * { margin-top: clamp(14px, 1.6vw, 22px); }
.head { max-width: 76ch; margin-bottom: clamp(34px, 4.5vw, 60px); }

/* ---------- brand ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .74rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px;
}
.eyebrow--plain::before { display: none; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 12px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent-ink);
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pill--accent { background: var(--second-soft); border-color: var(--second-line); color: var(--second); }
.pill--quiet {
  background: var(--text-wash); border-color: var(--line);
  color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 600;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
/* The mark is landscape, 1.19 to 1. These two are the aspect ratio: change
   them together with the viewBox in make_logo.py or the house squashes. */
.brand__mark { width: 45px; height: 38px; flex: none; }
.brand__type { display: flex; flex-direction: column; gap: 3px; }
.brand__word { width: 116px; height: auto; color: var(--text); }
.brand__sub {
  font-size: .53rem; font-weight: 700; letter-spacing: .42em;
  /* Teal, matching the sub label in the lockup files. */
  text-transform: uppercase; color: var(--second); padding-left: 2px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: .97rem; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .16s ease, background-color .16s ease,
              border-color .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--cta); color: var(--on-cta); }
.btn--primary:hover { background: var(--cta-deep); color: var(--on-cta); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn--sm { padding: 11px 19px; font-size: .88rem; }
.btn--block { width: 100%; }
.btn__arrow { transition: transform .16s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent-ink); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid var(--accent-line); padding-bottom: 2px;
}
.link:hover { border-bottom-color: var(--accent-ink); }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--glass);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.header.is-stuck { border-bottom-color: var(--line); background: var(--glass-stuck); }
.header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 76px;
}
.nav { display: flex; align-items: center; gap: clamp(6px, 1.1vw, 16px); }
.nav a {
  text-decoration: none; color: var(--muted); font-size: .93rem; font-weight: 600;
  padding: 9px 11px; border-radius: 8px; transition: color .15s ease, background-color .15s ease;
}
.nav a:hover { color: var(--text); background: var(--text-wash); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 5px;
  background: var(--accent); border-radius: 2px;
}
.header__cta { display: flex; align-items: center; gap: 12px; }
.nav > .btn { display: none; }

.burger {
  display: none; width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span {
  display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px;
  position: relative;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--text); border-radius: 2px; transition: transform .2s ease, top .2s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .burger { display: inline-flex; }
  .header__cta .btn { display: none; }
  .nav {
    /* The header sets backdrop-filter, which makes it the containing block for
       fixed children, so size this panel with viewport units rather than bottom: 0. */
    position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 2px; padding: 18px clamp(20px, 4vw, 34px) 40px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    min-height: calc(100dvh - 76px); max-height: calc(100dvh - 76px);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
  .nav a { padding: 14px 12px; font-size: 1.05rem; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav > .btn { display: inline-flex; margin-top: 18px; padding: 16px 26px; }
  .nav > .btn--primary, .nav > .btn--primary:hover { color: var(--on-accent); }
  .hero__actions .btn { width: 100%; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(58px, 8vw, 108px) var(--section); }
.hero__bg {
  position: absolute; inset: -6% -8% auto -8%; height: 116%;
  z-index: 0; opacity: .82; object-fit: cover; width: 116%;
  /* The reset caps every image at max-width:100%, which silently clamped this
     one back to the width of .hero and left a bare strip down the right hand
     side. The dark theme hid it, because the strip was the same near black as
     the photograph behind its scrim. On paper it is a visible seam. */
  max-width: none;
  pointer-events: none;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, var(--bg) 28%, rgba(241,242,244,.92) 58%, rgba(241,242,244,.66) 100%),
    linear-gradient(180deg, var(--bg) 0%, transparent 24%, transparent 60%, var(--bg) 100%);
}
@media (max-width: 980px) {
  .hero::before { background: linear-gradient(180deg, rgba(241,242,244,.90), rgba(241,242,244,.95)); }
}
.hero::after {
  content: ""; position: absolute; z-index: 1; inset: auto 0 -30% 0; height: 60%;
  background: radial-gradient(60% 100% at 50% 100%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
@media (max-width: 980px) { .hero__grid { grid-template-columns: minmax(0,1fr); } }
.hero h1 span { color: var(--accent-ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
/* Sits directly under the apply button, because somebody who already has an
   account and has lost their cookie will look there and nowhere else. */
.hero__signin { margin-top: 16px; color: var(--muted); font-size: .93rem; }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px;
  color: var(--faint); font-size: .88rem;
}
.hero__trust li { display: flex; align-items: center; gap: 9px; }
.hero__trust svg { color: var(--accent); flex: none; }

/* statement card in the hero */
.statement {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.statement__top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
  font-size: .82rem; color: var(--faint);
}
.statement__body { padding: 24px; }
.statement__amount {
  font-size: clamp(2.3rem, 4.4vw, 3.1rem); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; margin-bottom: 6px;
}
.statement__rows { margin-top: 22px; }
.statement__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--line); font-size: .94rem;
}
.statement__row span:first-child { color: var(--muted); }
.statement__row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.statement__foot {
  padding: 16px 24px; background: var(--accent-soft);
  border-top: 1px solid var(--accent-line); color: var(--accent-ink);
  font-size: .86rem; font-weight: 600; display: flex; align-items: center; gap: 10px;
}

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stat { background: var(--bg); padding: clamp(26px, 3.4vw, 40px) clamp(18px, 2.4vw, 30px); }
.stat b {
  display: block; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; color: var(--text);
}
.stat b i { font-style: normal; color: var(--accent-ink); }
.stat span { display: block; margin-top: 10px; color: var(--faint); font-size: .9rem; }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(22px, 2.6vw, 32px);
  transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}
.card--hover:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .97rem; }
.card__icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 20px;
  border: 1px solid var(--accent-line);
}
.card--flush { padding: 0; overflow: hidden; }

.check { list-style: none; margin: 0; padding: 0; }
.check li {
  position: relative; padding-left: 30px; margin-bottom: 11px;
  color: var(--muted); font-size: .97rem;
}
.check li::before {
  content: ""; position: absolute; left: 0; top: .48em; width: 15px; height: 9px;
  border-left: 2.5px solid var(--accent-ink); border-bottom: 2.5px solid var(--accent-ink);
  transform: rotate(-45deg); border-radius: 1px;
}
.check--accent li::before { border-color: var(--second); }
.cross li::before {
  content: "\00d7"; border: 0; transform: none; top: -.06em;
  color: var(--faint); font-size: 1.25rem; line-height: 1; font-weight: 700;
}

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line);
         border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
         grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0,1fr); } }
.step { background: var(--surface); padding: clamp(24px, 2.8vw, 34px); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  display: block; font-size: .82rem; font-weight: 800; letter-spacing: .16em;
  color: var(--accent-ink); margin-bottom: 16px;
}
.step h3 { font-size: 1.12rem; }
.step p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- listings ---------- */
.listing {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease;
}
.listing:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.listing__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-2); }
.listing__media picture { width: 100%; height: 100%; }
.listing__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.listing:hover .listing__media img { transform: scale(1.045); }
.listing__tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--scrim); border: 1px solid transparent; color: #FFFFFF;
  backdrop-filter: blur(6px);
}
.listing__tag--live { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.listing__tag--soon { background: var(--second); border-color: transparent; color: var(--on-second); }
.listing__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.listing__price { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.listing__price small { font-size: .82rem; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.listing__addr { color: var(--muted); font-size: .95rem; margin: 0; }
.listing__avail { color: var(--accent-ink); font-size: .84rem; font-weight: 600; margin: 0; }
.listing__facts {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px;
  list-style: none; padding-left: 0;
}
.listing__facts li {
  font-size: .8rem; color: var(--muted); padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2);
}

.filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 34px;
}
.chip {
  padding: 9px 17px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
}
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip[aria-pressed="true"] { background: var(--cta); border-color: var(--cta); color: var(--on-cta); }
.filters__count { margin-left: auto; color: var(--faint); font-size: .88rem; }
@media (max-width: 640px) { .filters__count { margin-left: 0; width: 100%; } }

/* gallery on the detail page */
.gallery { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 760px) { .gallery { grid-template-columns: minmax(0,1fr); } }
.gallery__main, .gallery__side img {
  border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden;
}
.gallery__main img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.gallery__side { display: grid; gap: 12px; grid-template-rows: repeat(2, minmax(0,1fr)); }
.gallery__side img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .gallery__side { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: none; } }

.specs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 700px) { .specs { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.spec { background: var(--surface); padding: 20px 22px; }
.spec span { display: block; color: var(--faint); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.spec b { font-size: 1.06rem; font-weight: 700; }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); align-items: start; }
@media (max-width: 980px) { .plans { grid-template-columns: minmax(0,1fr); max-width: 520px; margin-inline: auto; } }
.plan {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 36px); position: relative;
}
.plan--featured {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface) 55%);
  box-shadow: var(--shadow);
}
.plan__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--cta); color: var(--on-cta); font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px;
  white-space: nowrap;
}
.plan__price { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 6px; }
.plan__price b { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.plan__price span { color: var(--faint); font-size: .95rem; }
.plan__note { color: var(--faint); font-size: .88rem; min-height: 2.6em; }
.plan .btn { margin: 24px 0; }
.plan hr { border: 0; border-top: 1px solid var(--line); margin: 0 0 22px; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .95rem; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); }
thead th { background: var(--surface-2); font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
td.yes { color: var(--accent-ink); font-weight: 700; }
td.no  { color: var(--faint); }
caption { caption-side: bottom; padding: 14px 20px; color: var(--faint); font-size: .85rem; text-align: left; }

/* ---------- accordion ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 24px 4px; background: none; border: 0; cursor: pointer;
  text-align: left; font-size: clamp(1rem, 1.4vw, 1.14rem); font-weight: 700;
  letter-spacing: -0.015em; transition: color .15s ease;
}
.faq__q:hover { color: var(--accent-ink); }
.faq__sign { flex: none; width: 22px; height: 22px; position: relative; margin-top: 4px; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px;
  background: var(--accent-ink); border-radius: 2px; transition: transform .22s ease;
}
.faq__sign::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: rotate(0deg); }
.faq__a { display: none; padding: 0 60px 26px 4px; color: var(--muted); }
.faq__a.is-open { display: block; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 620px) { .form__row { grid-template-columns: minmax(0,1fr); } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label { font-size: .84rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; font: inherit; font-size: .97rem;
  color: var(--text); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .15s ease, background-color .15s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); background: var(--surface); outline: none; box-shadow: none;
}
.field textarea { resize: vertical; min-height: 118px; }
.field select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--muted) 50%),
  linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field small { color: var(--faint); font-size: .8rem; }
.field--error input, .field--error select { border-color: var(--danger); }
.field__err { color: var(--danger); font-size: .8rem; display: none; }
.field--error .field__err { display: block; }
.form__note { color: var(--faint); font-size: .84rem; }
.form__done {
  display: none; padding: 18px 20px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent-ink); font-weight: 600;
}
.form__done.is-on { display: block; }

/* ---------- callout / cta ---------- */
.callout {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--accent-soft), var(--surface) 60%);
  padding: clamp(30px, 5vw, 66px);
}
.callout--flat { background: var(--surface); }
.cta-band { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: var(--bg-2); }
.cta-band::before {
  content: ""; position: absolute; inset: -50% -10% auto -10%; height: 200%;
  background: radial-gradient(45% 50% at 50% 50%, var(--accent-soft), transparent 70%);
}
.cta-band .wrap { position: relative; }

/* Published service standards, two per row on desktop and one on mobile. */
.standards {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px;
}
.standards::before { content: ""; display: none; }
.standard {
  background: var(--surface); padding: 20px clamp(18px, 2.2vw, 28px);
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  box-shadow: 0 1px 0 var(--line), 1px 0 0 var(--line);
}
.standard span { color: var(--muted); font-size: .93rem; }
.standard b { font-size: .93rem; text-align: right; flex: none; max-width: 52%; }
@media (max-width: 760px) {
  .standards { grid-template-columns: minmax(0,1fr); }
  .standard b { max-width: 60%; }
}

/* ---------- misc content ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0,1fr); } }
.split img {
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
}
.split--flip > *:first-child { order: 2; }
@media (max-width: 900px) { .split--flip > *:first-child { order: 0; } }

.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.area { background: var(--surface); padding: 20px 22px; }
.area b { display: block; font-size: 1rem; }
.area span { color: var(--faint); font-size: .85rem; }

.prose { max-width: 76ch; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose p, .prose li { color: var(--muted); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--accent-ink); }

.page-head { padding-block: clamp(52px, 7vw, 96px) clamp(30px, 4vw, 46px); border-bottom: 1px solid var(--line); position: relative; }
.crumbs { display: flex; gap: 9px; align-items: center; color: var(--faint); font-size: .84rem; margin-bottom: 18px; list-style: none; padding: 0; flex-wrap: wrap; }
.crumbs a { text-decoration: none; color: var(--faint); }
.crumbs a:hover { color: var(--text); }

/* ---------- footer ---------- */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 78px) 32px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0,1fr)); gap: clamp(26px, 3vw, 44px); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: minmax(0,1fr); } }
.footer h4 { font-size: .77rem; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer a { color: var(--muted); text-decoration: none; font-size: .94rem; }
.footer a:hover { color: var(--text); }
.footer p { color: var(--faint); font-size: .92rem; }
.footer__base {
  margin-top: clamp(34px, 4vw, 54px); padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center;
  color: var(--faint); font-size: .85rem;
}
.footer__base p { margin: 0; }
.footer__legal { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 700px) { .footer__legal { margin-left: 0; } }

.note {
  background: var(--second-soft); border: 1px solid var(--second-line);
  color: var(--second); border-radius: var(--radius-sm);
  padding: 14px 18px; font-size: .87rem; font-weight: 600;
}

/* ---------- reveal ---------- */
/* Only hide content once we know scripting is available to bring it back.
   With JavaScript off the .js class is never set and everything stays visible. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .btn:hover, .listing:hover, .card--hover:hover { transform: none; }
  .listing:hover .listing__media img { transform: none; }
}

/* ==========================================================================
   Careers funnel, applicant portal and admin
   ========================================================================== */

.hero--short { padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6vw, 88px); min-height: 0; }

/* ---------- benefit cards ---------- */
.benefit {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(24px, 2.8vw, 32px);
  display: flex; flex-direction: column; gap: 14px;
}
.benefit h3 { margin: 0; font-size: 1.22rem; }
.benefit p { margin: 0; color: var(--muted); }
.benefit__fine {
  margin-top: auto !important; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--faint) !important; font-size: .84rem; line-height: 1.55;
}

/* ---------- what the job actually is ---------- */
.jobdesc {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 52px); align-items: start;
}
@media (max-width: 900px) { .jobdesc { grid-template-columns: minmax(0, 1fr); } }

.jobdesc__prose h2 {
  margin: 0 0 16px; font-size: clamp(1.45rem, 2.4vw, 1.95rem); letter-spacing: -0.02em;
}
.jobdesc__prose p { margin: 0 0 14px; color: var(--muted); max-width: 62ch; }
.jobdesc__prose p:last-child { margin-bottom: 0; }
.jobdesc__prose strong { color: var(--text); font-weight: 700; }

/* An at a glance panel. Everything in it is a fact the funnel already relies on,
   so nothing here can drift from what the portal then does. */
.jobdesc__facts {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(18px, 2.2vw, 26px); display: grid; gap: 2px;
}
.jobdesc__facts li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.jobdesc__facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.jobdesc__facts li:first-child { padding-top: 0; }
.jobdesc__facts span {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 5px;
}
.jobdesc__facts b { display: block; font-size: .95rem; line-height: 1.45; color: var(--text); }

/* ---------- the three things, compact, beside the tasks ---------- */
.rail__head { margin: 0 0 2px; font-size: 1.05rem; }
.rail { display: grid; }
.rail li { padding: 15px 0; border-bottom: 1px solid var(--line); }
.rail li:last-child { border-bottom: 0; padding-bottom: 0; }
.rail__tag {
  margin: 0 0 5px; font-size: .68rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent-ink);
}
.rail__big {
  display: block; font-size: 1.72rem; font-weight: 800; letter-spacing: -0.035em;
  line-height: 1; color: var(--text);
}
.rail__big i {
  font-style: normal; font-size: .44em; font-weight: 700; letter-spacing: -0.01em;
  color: var(--muted);
}
.rail__fine { margin: 9px 0 0; color: var(--faint); font-size: .8rem; line-height: 1.5; }

/* ---------- the three things, said loudly ---------- */
/* The same three promises as .benefit, in the place somebody decides whether to
   fill the form in. They were a checklist in a sidebar, which is the wrong
   weight for the only three reasons anybody is on the page. Emphasis is size and
   weight rather than colour, which is the whole point of a neutral accent. */
.offer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 880px) { .offer { grid-template-columns: minmax(0, 1fr); } }

.offer__head {
  margin: 0 0 clamp(18px, 2.2vw, 26px); font-size: clamp(1.3rem, 2vw, 1.65rem);
  letter-spacing: -0.02em;
}

.offer__box {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius); padding: clamp(22px, 2.6vw, 30px);
  display: flex; flex-direction: column; gap: 11px;
}

.offer__tag {
  margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent-ink);
}

/* Mirrors .stat b: the number carries the weight and the unit rides along at a
   fraction of its size, so "$500 a month" is one object and not two. */
.offer__big {
  display: block; font-size: clamp(2.4rem, 4.6vw, 3.3rem); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1; color: var(--text);
}
.offer__big i {
  font-style: normal; font-size: .34em; font-weight: 700; letter-spacing: -0.01em;
  color: var(--muted);
}

.offer__line { margin: 0; color: var(--muted); }

/* Pushed to the bottom so the conditions line up across all three boxes however
   long the sentence above them runs. The condition is not optional: these are
   promises to a real applicant. */
.offer__fine {
  margin: auto 0 0; padding-top: 15px; border-top: 1px solid var(--line);
  color: var(--faint); font-size: .82rem; line-height: 1.55;
}

/* ---------- apply page ---------- */
.apply-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 940px) { .apply-grid { grid-template-columns: minmax(0,1fr); } }
/* Do not make anything in this column sticky. Only the first card ever was, and
   the card and the paragraph below it then scrolled up underneath it, because a
   sticky box paints above a static sibling. Sticking the whole column instead
   just moves the bug to a short window: the column cannot pin without stranding
   its own bottom below the fold. It is 348px tall and fits on screen regardless. */

.numbered { counter-reset: n; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.numbered li { counter-increment: n; display: flex; gap: 13px; color: var(--muted); font-size: .95rem; }
.numbered li::before {
  content: counter(n); flex: none; width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem; font-weight: 800;
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line);
}

/* ---------- extra form parts ---------- */
.field__hint { display: block; color: var(--faint); font-size: .82rem; margin-top: 7px; }
.field--check { margin-top: 6px; }
.check-line { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 500; }
.check-line input { flex: none; width: 19px; height: 19px; margin-top: 3px; accent-color: var(--accent); }
.check-line span { color: var(--muted); font-size: .92rem; line-height: 1.55; }
input[type="file"] {
  width: 100%; padding: 13px 14px; background: var(--bg-2); color: var(--text);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: .92rem;
}
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; font-size: .85rem; margin-right: 14px; cursor: pointer;
  padding: 8px 15px; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-accent);
}
form[aria-busy="true"] { opacity: .72; }

/* ---------- flash messages ---------- */
.flash { border-radius: var(--radius-sm); padding: 15px 19px; font-size: .93rem; font-weight: 600; border: 1px solid; }
.flash--ok   { background: var(--second-soft); border-color: var(--second-line); color: var(--second); }
.flash--warn { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.flash--bad  { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.flash__hot { color: var(--danger); }
.flash-wrap { padding-top: 26px; }

/* ---------- portal ---------- */
/* Deliberately shorter than a marketing page head. Everything here is a
   greeting and three reference numbers; the tasks below are what the applicant
   signed in for, and every pixel spent up here pushes the first open one nearer
   the fold. Measured: this head plus the flash used to put it at 944px of a
   950px window, which is not "visible", it is "technically on screen". */
.portal-head { padding: clamp(26px, 3.2vw, 44px) 0 clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--line); }
.portal-head h1 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
.portal-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.portal-meta li {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 17px; display: flex; flex-direction: column; gap: 3px;
}
.portal-meta span { color: var(--faint); font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.portal-meta b { font-size: .96rem; }

.portal-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 940px) { .portal-grid { grid-template-columns: minmax(0,1fr); } }
/* Nothing sticky here either, and for the same reason: "Need something changed?"
   used to slide up behind "Your file". See the note on .apply-side. */
.head--tight { margin-bottom: 24px; }
.head--tight h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.head--tight .lede { font-size: 1rem; margin-top: 10px; }

.progress { margin-bottom: 26px; }
.progress__bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.progress__bar i { display: block; height: 100%; width: 0; background: var(--cta);
  border-radius: 999px; transition: width .5s ease; }
/* The fill width comes from how many tasks are done, as a rule rather than an
   inline style, because the CSP is style-src 'self' with no 'unsafe-inline'.
   Add a step here if the task list ever grows past three. */
.progress__bar[data-done="1"][data-total="3"] i { width: 33.333%; }
.progress__bar[data-done="2"][data-total="3"] i { width: 66.667%; }
.progress__bar[data-done="3"][data-total="3"] i { width: 100%; }
.progress__label { margin: 10px 0 0; color: var(--faint); font-size: .86rem; font-weight: 600; }

.tasks { display: grid; gap: 14px; }
.task {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 26px); display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 18px;
}
.task__mark {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface-3); color: var(--faint); border: 1px solid var(--line-strong);
  font-weight: 800; font-size: .85rem;
}
/* A finished task is a receipt, not an instruction: it takes less room. */
.task--done { border-color: var(--second-line); padding-block: clamp(16px, 1.8vw, 20px); }
.task--done .task__mark { background: var(--second); color: var(--on-second); border-color: transparent; }
.task--verifying { border-color: var(--accent-line); }
.task--verifying .task__mark { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.task h3 { margin: 0 0 6px; font-size: 1.08rem; }
.task p { margin: 0; color: var(--muted); font-size: .94rem; }
.task__meta { margin-top: 10px !important; color: var(--faint) !important; font-size: .83rem !important; }
.task__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.task__actions form { margin: 0; }

.feed { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.feed::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); }
.feed li { position: relative; padding-bottom: 26px; }
.feed li::before {
  content: ""; position: absolute; left: -26px; top: 6px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--surface-3); border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.feed li:first-child::before { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.feed h4 { margin: 0 0 4px; font-size: .99rem; }
.feed p { margin: 0; color: var(--muted); font-size: .92rem; }
.feed time { display: block; color: var(--faint); font-size: .78rem; margin-top: 6px; letter-spacing: .04em; }
.feed__empty { color: var(--faint); font-size: .93rem; }

.kv { display: grid; gap: 12px; }
.kv li { display: flex; justify-content: space-between; gap: 16px; font-size: .91rem; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.kv li:last-child { border-bottom: 0; padding-bottom: 0; }
.kv span { color: var(--faint); flex: none; }
.kv b { text-align: right; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- admin ---------- */
.adm { padding: clamp(30px, 4vw, 56px) 0 clamp(60px, 8vw, 100px); }
.adm-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 30px; }
.adm-head h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0; }
.adm-head p { margin: 6px 0 0; color: var(--faint); font-size: .92rem; }

.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 34px; }
.adm-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.adm-stat b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; }
.adm-stat span { color: var(--faint); font-size: .82rem; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.adm-table { width: 100%; border-collapse: collapse; font-size: .91rem; min-width: 680px; }
.adm-table th, .adm-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-table th { color: var(--faint); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; white-space: nowrap; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover { background: var(--surface-2); }
.adm-table a { font-weight: 700; }

.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .73rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
/* Petrol is settled, ash is waiting on somebody, plain grey is neutral. Named
   for the state and never for the colour: the palette has now moved twice, and
   a class called .tag--clay would be a lie in both directions. */
.tag--done      { background: var(--second-soft); color: var(--second); }
.tag--attention { background: var(--accent-soft); color: var(--accent-ink); }
.tag--quiet     { background: var(--surface-3); color: var(--muted); }

.adm-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 940px) { .adm-grid { grid-template-columns: minmax(0,1fr); } }
.adm-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 20px; }
.adm-bar .field { margin: 0; }
.adm-bar input, .adm-bar select { min-width: 180px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.inline-form .field { margin: 0; flex: 1 1 190px; }
.copy-box {
  background: var(--bg-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  padding: 13px 15px; font-size: .84rem; overflow-wrap: anywhere; color: var(--muted);
}
.pager { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }
.pager > span { align-self: center; }

/* ---------- small helpers for the server rendered pages ----------
   The Python builder extracts its inline styles into util.css at build time,
   but the portal and admin bodies are composed in JavaScript at request time,
   so they use these named classes instead. Same reason either way: the CSP is
   style-src 'self' with no 'unsafe-inline', so a style attribute would simply
   be dropped by the browser. */
.h-sec       { font-size: 1.15rem; margin: 34px 0 14px; }
.h-sec--top  { margin-top: 0; }
.h-sec--gap  { margin-top: 38px; }
.h-card      { margin: 0 0 14px; }
.h-card--sm  { margin: 0 0 10px; }
.h-card--md  { margin: 0 0 12px; }
.t-faint     { color: var(--faint); font-size: .82rem; }
.t-faint-xs  { color: var(--faint); font-size: .8rem; }
.t-faint-sm  { color: var(--faint); font-size: .84rem; margin: 0 0 10px; }
.t-muted     { color: var(--muted); }
.t-muted-sm  { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.t-muted-xs  { color: var(--muted); font-size: .88rem; margin: 0; }
.t-note      { color: var(--faint); margin-top: 24px; }
.t-normal    { font-weight: 500; }
.nowrap      { white-space: nowrap; }
.min0        { min-width: 0; }
.cell-wide   { max-width: 280px; }
.center-x    { justify-content: center; }
.narrow      { max-width: 460px; margin: 0 auto; }
.narrow--sm  { max-width: 440px; margin: 0 auto; }
.mt-8  { margin-top: 8px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mb-22 { margin-bottom: 22px; }
.footer--slim { padding: 30px 0; margin-top: auto; }
.footer--slim p { margin: 0; color: var(--faint); font-size: .84rem; max-width: 70ch; }