/* ==========================================================================
   FORCEPULL DESIGN SYSTEM
   ========================================================================== */

/* ==========================================================================
   base/fonts.css
   ========================================================================== */

/* ==========================================================================
   0. SELF-HOSTED FONTS
   Variable woff2 files served from /assets — no third-party requests.
   Source: fontsource (https://fontsource.org), latin subset only.
   Font url() paths use a leading slash so Propshaft resolves them from the
   asset root, not relative to this file's base/ directory.
   ========================================================================== */

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/geist-mono-latin-wght-normal-a8fff9c1.woff2") format('woff2');
}

/* Display + body sans pair: Bricolage Grotesque (display) and Hanken
   Grotesk (body), self-hosted variable woff2. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/bricolage-grotesque-latin-wght-normal-3084aa15.woff2") format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/hanken-grotesk-latin-wght-normal-7b3229a0.woff2") format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/hanken-grotesk-latin-wght-italic-36397538.woff2") format('woff2');
}

/* ==========================================================================
   base/reset.css
   ========================================================================== */

/* ==========================================================================
   1. CSS RESET
   Base reset adapted from Tailwind Preflight. Keeps typography, spacing,
   borders, and form controls predictable across the app.
   ========================================================================== */

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: var(--font-sans);
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  /* Stop horizontal trackpad/wheel gestures from chaining out of the document
     and triggering the browser's swipe-back/forward navigation. Applied at the
     root so it covers any element on the page (including the homepage ticker,
     which is overflow: hidden and so can't absorb the gesture itself). */
  overscroll-behavior-x: contain;
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 1em;
}

small { font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, select { text-transform: none; }

button,
:where(input[type="button"]),
:where(input[type="reset"]),
:where(input[type="submit"]) {
  appearance: button;
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button,
::-webkit-outer-spin-button { height: auto; }
input[type="search"] { appearance: textfield; -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
  margin: 0;
}

fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
dialog { padding: 0; }
textarea { resize: vertical; }

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: var(--color-text-placeholder);
}

button, [role="button"] { cursor: pointer; }
:disabled { cursor: default; }

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
}

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

[hidden]:where(:not([hidden="until-found"])) { display: none !important; }

/* ==========================================================================
   base/tokens.css
   ========================================================================== */

/* ==========================================================================
   2. DESIGN TOKENS
   ========================================================================== */

:root {
  color-scheme: light;

  /* ----- Canonical palette tokens (warm paper + coral). The legacy
     --color-* names below alias to these so any template still using the
     older names inherits the same values. ----- */
  --bg-beacon:         #faf6f0;
  --panel-beacon:      #fffdfa;
  --ink-beacon:        #211c16;
  --prose-beacon:      #3a342c;
  --muted-beacon:      #6b6258;
  --line-beacon:       #e7ddd0;
  --accent-beacon:     #ef5b2b;
  --accent-ink-beacon: #ffffff;
  --soft-beacon:       #f6ece0;
  /* Warm paper tones used as foreground when placed on dark ink (footer, band). */
  --paper-soft-beacon:  #ece5dc;
  --paper-muted-beacon: #cbc1b5;

  /* Core palette via the canonical tokens above. */
  --color-bg: var(--bg-beacon);
  --color-bg-card: var(--panel-beacon);
  --color-accent: var(--accent-beacon);
  --color-accent-secondary: var(--accent-beacon);
  --color-text-secondary: var(--muted-beacon);
  --color-text-muted: var(--muted-beacon);
  --color-success: #16a06a;
  --color-danger: #dc2626;
  --color-sidebar: var(--soft-beacon);
  --color-input-bg: var(--panel-beacon);
  --form-input-border: rgba(33, 28, 22, 0.15);
  --form-panel-bg: var(--bg-beacon);
  --form-panel-input-bg: var(--panel-beacon);
  --form-footer-bg: var(--soft-beacon);

  /* Semantic text colors */
  --color-text-primary: var(--ink-beacon);
  --color-text-on-accent: var(--accent-ink-beacon);
  --color-text-heading: var(--ink-beacon);
  --color-text-prose: var(--prose-beacon);
  --color-text-on-ink: var(--accent-ink-beacon);
  --color-text-on-ink-soft: var(--paper-soft-beacon);
  --color-text-on-ink-muted: var(--paper-muted-beacon);
  /* Warm taupe, lighter than --color-text-muted. Sits below WCAG AA 4.5:1 on
     paper — treated as incidental per the placeholder pattern. */
  --color-text-placeholder: #a99e90;

  /* Semantic background colors */
  --color-bg-deep: var(--soft-beacon);
  --color-bg-code: var(--soft-beacon);
  --color-bg-card-alt: rgba(33, 28, 22, 0.02);
  --color-bg-recessed: rgba(33, 28, 22, 0.03);
  --color-bg-preview: rgba(33, 28, 22, 0.04);
  --color-bg-faint: rgba(33, 28, 22, 0.02);

  /* Semantic border colors */
  --color-border-faint: rgba(33, 28, 22, 0.06);
  --color-border-inset: rgba(33, 28, 22, 0.08);
  --color-border-muted: var(--line-beacon);

  /* State colors */
  --color-warning: #8f5a18;
  --color-danger-hover: #b91c1c;
  --color-danger-border: rgba(220, 38, 38, 0.28);
  --color-danger-bg: rgba(220, 38, 38, 0.07);
  --color-danger-text: var(--color-danger);
  --color-success-gradient-end: #0e8856;
  --color-danger-border-strong: rgba(220, 38, 38, 0.34);
  --color-danger-bg-subtle: rgba(220, 38, 38, 0.055);
  --color-danger-border-medium: rgba(220, 38, 38, 0.22);

  /* Flash message tokens */
  --flash-notice-bg: rgba(22, 160, 106, 0.08);
  --flash-notice-border: rgba(22, 160, 106, 0.22);
  --flash-notice-text: #4f5f25;
  --flash-alert-bg: rgba(220, 38, 38, 0.06);
  --flash-alert-border: rgba(220, 38, 38, 0.22);
  --flash-alert-text: var(--color-danger);
  --flash-warning-bg: rgba(143, 90, 24, 0.07);
  --flash-warning-border: rgba(143, 90, 24, 0.22);
  --flash-warning-text: #7a4610;

  /* Shadows — warm ink, soft editorial */
  --shadow-card: 0 1px 3px rgba(33, 28, 22, 0.08), 0 1px 2px rgba(33, 28, 22, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(33, 28, 22, 0.1);
  --shadow-xs: 0 1px 2px 0 rgb(33 28 22 / 0.04);
  --shadow-sm: 0 2px 4px -1px rgb(33 28 22 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(33 28 22 / 0.06), 0 2px 4px -2px rgb(33 28 22 / 0.04);
  --shadow-lg: 0 4px 16px rgba(33, 28, 22, 0.1);

  /* Radius ladder — covers ~75% of border-radius uses. Outliers (0.6875,
     0.8125, 0.875, 1.375rem, 50%) stay inline where the curve is intentional. */
  --radius-xs:   0.125rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.625rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-3xl:  1.125rem;
  --radius-pill: 9999px;

  /* Motion — most hover/focus transitions share 0.15s. */
  --duration-fast: 0.15s;

  /* Font tokens. --font-serif is kept as an alias of the display face so
     any rule still using `font-family: var(--font-serif)` (carried over
     from the prior type system) resolves to Bricolage. */
  --font-display: var(--font-display-beacon);
  --font-body: var(--font-body-beacon);
  --font-serif: var(--font-display-beacon);
  --font-sans: var(--font-body-beacon);
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Neutral palette — warm, inverted range (light surfaces → dark text) */
  --neutral-300: #4a4540;
  --neutral-400: #6b6560;
  --neutral-500: #9ca3af;
  --neutral-600: #d4d0c7;
  --neutral-700: #e5e1d6;
  --neutral-800: #efebdf;
  --neutral-900: #f9f7ef;

  /* Pre-computed opacity colors.
     NOTE: --white-* names are kept for existing downstream CSS stability,
     but resolve to ink-on-paper tints in light mode. */
  --white-5: rgba(33, 28, 22, 0.04);
  --white-10: rgba(33, 28, 22, 0.08);
  --white-15: rgba(33, 28, 22, 0.12);
  --white-20: rgba(33, 28, 22, 0.15);
  --white-30: rgba(33, 28, 22, 0.2);
  --accent-5: rgba(239, 91, 43, 0.05);
  --accent-10: rgba(239, 91, 43, 0.08);
  --accent-15: rgba(239, 91, 43, 0.12);
  --accent-20: rgba(239, 91, 43, 0.15);
  --accent-25: rgba(239, 91, 43, 0.20);
  --accent-30: rgba(239, 91, 43, 0.25);
  --accent-40: rgba(239, 91, 43, 0.35);
  --accent-50: rgba(239, 91, 43, 0.50);
  --success-5: rgba(22, 160, 106, 0.05);
  --success-15: rgba(22, 160, 106, 0.10);
  --success-20: rgba(22, 160, 106, 0.12);
  --success-30: rgba(22, 160, 106, 0.18);
  --success-50: rgba(22, 160, 106, 0.35);
  --success-60: rgba(22, 160, 106, 0.50);
  --danger-20: rgba(220, 38, 38, 0.12);
  --danger-30: rgba(220, 38, 38, 0.18);

  /* Self-hosted font stacks. --font-serif / --font-sans above alias to
     these so older template rules pick up the new faces transparently. */
  --font-display-beacon: "Bricolage Grotesque", ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-body-beacon: "Hanken Grotesk", ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

/* ==========================================================================
   base/selection.css
   ========================================================================== */

/* ==========================================================================
   3. BASE / SELECTION
   ========================================================================== */

::selection { background: var(--white-15); color: inherit; }

/* ==========================================================================
   base/layout.css
   ========================================================================== */

/* ==========================================================================
   4. BODY & LAYOUT SHELL
   ========================================================================== */

.body-root {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.body-inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Page-level containers */
.page-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 90rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .page-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .page-container { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 1280px) {
  .page-container { padding-left: 3.5rem; padding-right: 3.5rem; }
}

.page-sections {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-block: 2.5rem;
}

.container-narrow { max-width: 48rem; margin-left: auto; margin-right: auto; }
.container-xs { max-width: 32rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.container-sm { max-width: 40rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }

/* Full-height by default: every page can stretch to fill the viewport so
   column dividers (sidebar borders, etc.) touch the navbar and footer with
   no gap. Pages that need vertical padding add it via their own wrapper —
   most use `.page-sections` which carries the standard 2.5rem block padding. */
.main-content,
.main-content-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.main-content-body > article {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Turbo navigation progress bar
   Turbo ships its own CSS for this and injects it as a <style> element at
   runtime, stamped with the page's CSP nonce. Ours is here instead, for two
   reasons. It is #0076ff out of the box, which is nobody's brand colour and
   certainly not ours. And the injected element is what stops this policy
   dropping nonces altogether: a rule we own is one the page does not have to
   be given permission to write at runtime.

   Turbo inserts its style as the *first* child of <head>, so ours wins on
   equal specificity either way, whether or not the injection is allowed.
   Everything but the colour matches Turbo's defaults, so the bar behaves the
   way anyone who has met one expects.
   ========================================================================== */

.turbo-progress-bar {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-accent);
  /* Turbo's own value. It has to clear every fixed element on the site, and
     this is the top of the signed 32-bit range. */
  z-index: 2147483647;
  transition:
    width 300ms ease-out,
    opacity 150ms 150ms ease-in;
  transform: translate3d(0, 0, 0);
}

/* The bar still appears and still fills; it just stops sliding. A loading
   indicator that vanishes under reduced motion tells somebody less than one
   that moves. */
@media (prefers-reduced-motion: reduce) {
  .turbo-progress-bar { transition: none; }
}

/* ==========================================================================
   components/navbar.css
   ========================================================================== */

/* ==========================================================================
   5. NAVBAR
   F-monogram + wordmark on the left, primary nav in the middle, account
   actions + ghost Sign-in + ink Post-a-job on the right. Mobile collapses
   to a small Post button + hamburger details menu.
   ========================================================================== */

.nav {
  position: relative;
  z-index: 40;
  background: var(--color-bg);
  border-bottom: 1px solid var(--line-beacon);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
@media (min-width: 1024px) {
  .nav-inner {
    min-height: 4.875rem;
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
  }
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  flex: 0 0 auto;
}
.mark {
  width: 1.875rem;
  height: 1.875rem;
  flex: 0 0 auto;
  display: block;
  color: var(--accent-beacon);
}
.wordmark { line-height: 1; }

.nav-links {
  display: none;
  align-items: center;
  gap: 1.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
@media (min-width: 1024px) {
  .nav-links { display: flex; }
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--duration-fast);
}
.nav-link:hover { color: var(--color-text-primary); }
.nav-link--active { color: var(--color-text-primary); }
.nav-link--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.0625rem;
  height: 2px;
  background: var(--accent-beacon);
  border-radius: 1px;
}

.nav-cta {
  display: none;
  align-items: center;
  gap: 0.875rem;
}
@media (min-width: 1024px) {
  .nav-cta { display: flex; }
}

/* Shared button primitive, 10px rounded rect. Variants ride on top:
   -ghost (transparent + ink), -solid (ink fill + paper), -accent (coral
   fill + white), -outline (transparent + line border). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  padding: 0.6875rem 1.125rem;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.btn:focus-visible {
  outline: 2px solid var(--accent-beacon);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-sm {
  padding: 0.4375rem 0.75rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-md);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.btn-ghost:hover { background: var(--soft-beacon); }
.btn-ghost--active { background: var(--soft-beacon); }

.btn-solid {
  background: var(--color-text-primary);
  color: var(--color-bg);
  white-space: nowrap;
}
.btn-solid:hover { background: #000; }

.btn-accent {
  background: var(--accent-beacon);
  color: var(--accent-ink-beacon);
  white-space: nowrap;
}
.btn-accent:hover { filter: brightness(0.94); }

.btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  border: 1.5px solid var(--line-beacon);
  white-space: nowrap;
}
.btn-outline:hover { border-color: var(--color-text-primary); }

.btn-danger {
  background: var(--color-danger);
  color: var(--color-text-on-accent);
  white-space: nowrap;
}
.btn-danger:hover { background: var(--color-danger-hover); }
.btn-danger:focus-visible { outline-color: var(--color-danger); }

/* Mobile */
.nav-mobile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
  .nav-mobile { display: none; }
}

/* Match the Post button to the hamburger toggle's box (same padding,
   line-height, and a transparent border so total height aligns). */
.nav-mobile .btn {
  padding: 0.5rem 1rem;
  line-height: 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

.nav-mobile-details {
  position: relative;
  z-index: 100;
}

.nav-mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--line-beacon);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
}
.nav-mobile-toggle::-webkit-details-marker { display: none; }
.nav-mobile-toggle:hover { background: var(--soft-beacon); }
.nav-mobile-toggle svg { width: 1.25rem; height: 1.25rem; }

.nav-mobile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: 14rem;
  background: var(--color-bg-card);
  border: 1px solid var(--line-beacon);
  border-radius: var(--radius-xl);
  padding: 0.375rem 0;
  box-shadow: var(--shadow-lg);
  z-index: 100;
}

.nav-mobile-item {
  display: block;
  padding: 0.5rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  transition: background-color var(--duration-fast);
}
.nav-mobile-item:hover { background: var(--soft-beacon); }

.nav-mobile-rule {
  margin: 0.375rem 0;
  border: 0;
  border-top: 1px solid var(--line-beacon);
}

.nav-mobile-logout {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.875rem;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color var(--duration-fast);
}
.nav-mobile-logout:hover { background: var(--soft-beacon); }

/* ==========================================================================
   components/flash.css
   ========================================================================== */

/* ==========================================================================
   6. FLASH MESSAGES
   ========================================================================== */

/* Flash messages sit just under the navbar. Rounded inset card with a
   1.5px variant-tinted border + soft variant bg. The card sits inside
   the .page-container so it shares the navbar's responsive gutter and
   max-width. */
.flash { padding: 1rem 0 0; }
.flash-inner {
  border-radius: 0.875rem;
  padding: 0.875rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  border: 1.5px solid;
}
.flash--notice .flash-inner {
  background: var(--flash-notice-bg);
  border-color: var(--flash-notice-border);
  color: var(--flash-notice-text);
}
.flash--alert .flash-inner {
  background: var(--flash-alert-bg);
  border-color: var(--flash-alert-border);
  color: var(--flash-alert-text);
}
.flash--warning .flash-inner {
  background: var(--flash-warning-bg);
  border-color: var(--flash-warning-border);
  color: var(--flash-warning-text);
}


/* ==========================================================================
   components/footer.css
   ========================================================================== */

/* ==========================================================================
   7. FOOTER
   Dark ink slab, 4-col grid (brand + 3 link columns). Coral monogram in the
   brand column, mono uppercase headings, paper-tinted text on ink.
   ========================================================================== */

.foot {
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--ink-beacon);
  color: var(--color-text-on-ink-muted);
}

.foot-inner {
  padding-top: 3.5rem;
  padding-bottom: 3rem;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 640px) {
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid > .foot-brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .foot-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2rem;
  }
  .foot-grid > .foot-brand { grid-column: auto; }
}

.foot-brand { display: flex; flex-direction: column; gap: 1rem; }

.foot-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--color-text-on-ink);
  width: max-content;
}

.foot-tag {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-on-ink-muted);
  max-width: 22rem;
}

.foot-social {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.25rem;
}

.foot-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-on-ink-muted);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.foot-social-link:hover {
  background: var(--accent-beacon);
  color: var(--color-text-on-ink);
}
.foot-social-link svg { width: 1.125rem; height: 1.125rem; }

.foot-heading {
  margin: 0 0 0.875rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-on-ink);
}

.foot-links {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}

.foot-link {
  font-size: 0.9375rem;
  color: var(--color-text-on-ink-muted);
  transition: color var(--duration-fast);
}
.foot-link:hover { color: var(--accent-beacon); }

/* ==========================================================================
   components/pagination.css
   ========================================================================== */

/* ==========================================================================
   PAGINATION (account, admin)
   /jobs index now uses .pagination from the JOBS INDEX section.
   ========================================================================== */

/* ==========================================================================
   pages/job-show.css
   ========================================================================== */

/* ==========================================================================
   JOB SHOW (/jobs/:id)
   Top: back link + 3-col header (logo + title block + apply block) with a
   badge row. Then a full-bleed rule, then a 2-col body grid (rich-text
   sections on the left, sticky sidebar cards on the right).
   ========================================================================== */

.jobshow-top {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
}
.back:hover { color: var(--color-text-primary); }
.back svg { width: 0.9375rem; height: 0.9375rem; }

/* Used by companies/show (logo + text 2-col). Job show uses .jobshow-titleblock. */
.jobshow-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 768px) {
  .jobshow-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 1.375rem;
  }
}

/* Title block at the top of the job-show main column. The whole page is
   one 2-col grid (main + sidebar), so this header is just a vertical
   stack with a bit of bottom margin before the first section. */
.jobshow-titleblock {
  margin-bottom: 2.25rem;
}

.jobshow-logo {
  width: 4.5rem;
  height: 4.5rem;
  flex: 0 0 auto;
  border-radius: var(--radius-3xl);
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.875rem;
  color: var(--color-text-primary);
  overflow: hidden;
}
.jobshow-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jobshow-htext { min-width: 0; }

.jobshow-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.625rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.jobshow-co {
  margin: 0.5625rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 1.0625rem;
  color: var(--color-text-muted);
}
.jobshow-co b { color: var(--color-text-primary); font-weight: 700; }
.dot-sep { opacity: 0.5; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  border: 1px solid var(--line-beacon);
  border-radius: var(--radius-md);
}
.chip-accent {
  color: var(--accent-ink-beacon);
  background: var(--accent-beacon);
  border-color: var(--accent-beacon);
}

/* Apply card sits at the top of the sidebar. Lede + hint + button.
   Salary lives in the chips row above; posted date lives in the
   "Job overview" details card below.
   Specificity bumped (.jobshow-card.jobshow-applycard) so the flex
   layout wins over .jobshow-card's `display: block` further down. */
.jobshow-card.jobshow-applycard {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  text-align: center;
  border-top: 3px solid var(--accent-beacon);
}
.jobshow-applycard-intro {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.jobshow-applycard-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-beacon);
}
.jobshow-applycard-lede {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-primary);
}
.jobshow-applycard-hint {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.jobshow-applycard-rule {
  border: 0;
  border-top: 1px solid var(--line-beacon);
  margin: 0;
  height: 0;
}

.jobshow-rule {
  height: 1px;
  background: var(--line-beacon);
  border: 0;
  margin: 0;
}

/* ----- Body grid ----- */

.jobshow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: clamp(2rem, 4vw, 2.75rem) 0;
  align-items: start;
}
@media (min-width: 1024px) {
  .jobshow-grid { grid-template-columns: minmax(0, 1fr) 21.25rem; gap: 3rem; }
}

.jobshow-main { min-width: 0; }

.jobshow-section { margin-top: 2.375rem; }
.jobshow-section:first-child { margin-top: 0; }

/* Seeded-listing attribution: republished from a public careers page. */
.jobshow-attribution-box {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--color-border-muted);
  border-left: 3px solid var(--color-text-muted);
  border-radius: var(--radius-md);
  background: var(--color-bg-recessed);
}
.jobshow-attribution-icon {
  flex: none;
  margin-top: 0.125rem;
  color: var(--color-text-muted);
}
.jobshow-attribution-body { min-width: 0; }
.jobshow-attribution-h {
  margin: 0 0 0.25rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
}
.jobshow-attribution-box .prose-p { font-size: 0.9375rem; }
.jobshow-attribution-claim {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
}

.jobshow-h2 {
  margin: 0 0 0.9375rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5625rem;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

/* Rich-text and prose body styling */
.prose,
.prose-p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-prose);
}
.prose-p { margin: 0; }

/* Block spacing. Descendant selectors rather than `>` because a body is not
   always a flat list of children, and this is the only source of space between
   paragraphs: the reset zeroes every margin, and `simple_format` emits bare
   <p>. It used to carry a third selector to pierce the Lexxy wrapper, and
   deleting that took the whole rule with it for a while. */
.prose :is(p, h2, h3, h4, ul, ol, blockquote, pre) { margin: 0.9375rem 0 0; }
.prose :is(p, h2, h3, h4, ul, ol, blockquote, pre):first-child { margin-top: 0; }

.prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin-top: 1.5rem;
}
.prose h3 {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-text-primary);
  margin-top: 1.25rem;
}
.prose h4 {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-primary);
  margin-top: 1.125rem;
}

.prose strong { color: var(--color-text-primary); font-weight: 700; }
.prose a { color: var(--accent-beacon); text-underline-offset: 2px; }

.prose ul,
.prose ol,
.prose-list {
  padding: 0;
  list-style: none;
}
.prose li,
.prose-list li {
  position: relative;
  padding-left: 1.625rem;
  margin-top: 0.6875rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-text-prose);
}
.prose li:first-child,
.prose-list li:first-child { margin-top: 0; }
.prose li::before,
.prose-list li::before {
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 0.625rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-xs);
  background: var(--accent-beacon);
}

.prose blockquote {
  padding-left: 1rem;
  border-left: 3px solid var(--line-beacon);
  color: var(--color-text-muted);
  font-style: italic;
}

.prose pre {
  padding: 1rem 1.25rem;
  background: var(--color-bg-deep);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-x: auto;
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 0.0625rem 0.3125rem;
  background: var(--color-bg-deep);
  border-radius: var(--radius-xs);
}
.prose pre code {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.prose-link {
  color: var(--accent-beacon);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Skills chip row, sits inside a regular .jobshow-section after
   Qualifications. Larger than the meta-row .chip so the required
   tech reads as primary information, not incidental. */
.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.skill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-bg-card);
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}
.skill:hover {
  border-color: var(--accent-beacon);
  color: var(--accent-beacon);
  background: var(--soft-beacon);
}
.skill.skill-category {
  background: rgba(239, 91, 43, 0.08);
  border-color: rgba(239, 91, 43, 0.25);
  color: var(--accent-beacon);
}
.skill.skill-category:hover {
  background: rgba(239, 91, 43, 0.12);
  border-color: var(--accent-beacon);
}


/* ----- Sidebar cards ----- */

.jobshow-side {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  min-width: 0;
}

.jobshow-card {
  background: var(--color-bg-card);
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-3xl);
  padding: 1.5rem;
  color: inherit;
  text-decoration: none;
  display: block;
}
.jobshow-card-link:hover { border-color: var(--color-text-primary); }

.jobshow-cardh {
  margin: 0 0 0.375rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-text-primary);
}
.jobshow-cardh--warning { color: var(--color-warning); }

/* Digest signup in the listing sidebar. The column is narrow, so the field
   and button stack rather than sitting on one row as they do in the
   full-width and footer variants of the same form partial. */
.jobshow-nl-sub {
  margin: 0 0 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.jobshow-nl-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.jobshow-nl-input {
  width: 100%;
}
.jobshow-nl-alt {
  margin: 0.875rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.jobshow-nl-x {
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.jobshow-nl-x:hover { color: var(--accent-beacon); }

.jobshow-cardbtn {
  display: block;
  width: 100%;
  height: 3rem;
  border-radius: var(--radius-xl);
  border: none;
  background: var(--accent-beacon);
  color: var(--accent-ink-beacon);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  line-height: 3rem;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--duration-fast);
}
.jobshow-cardbtn:hover { filter: brightness(0.94); }
.jobshow-cardbtn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--line-beacon);
}
.jobshow-cardbtn--secondary:hover {
  filter: none;
  background: var(--color-bg-recessed);
}
.jobshow-applycard .jobshow-cardbtn + .jobshow-cardbtn {
  margin-top: 0.75rem;
}
/* Facts list */
.facts { margin: 0; }
.fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.8125rem 0;
  border-bottom: 1px solid var(--line-beacon);
}
.fact:last-child { border-bottom: 0; padding-bottom: 0; }
.fact-k {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.fact-v {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: right;
}
/* Company card */
.jobshow-comp { display: flex; align-items: center; gap: 0.75rem; }
.jobshow-comp-logo {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: var(--radius-xl);
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1875rem;
  color: var(--color-text-primary);
  overflow: hidden;
}
.jobshow-comp-logo img { width: 100%; height: 100%; object-fit: cover; }
.jobshow-comp-nm {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--color-text-primary);
}
.jobshow-comp-ds {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Status bands: full browser width, above the article's page-container so
   the bg paints edge to edge. Inner row is height-matched to the navbar
   (4rem mobile / 4.875rem desktop) so the band reads as a sibling
   system-status bar rather than a callout. Draft is light coral; closed is
   translucent warm ink (--ink-beacon #211c16, same RGB as the form border
   tokens), the listing no longer accepts applications but stays up so old
   links keep resolving. */
.jobshow-draftband {
  background: rgba(239, 91, 43, 0.08);
  border-top: 1px solid rgba(239, 91, 43, 0.12);
  border-bottom: 1px solid rgba(239, 91, 43, 0.22);
}
.jobshow-closedband {
  background: rgba(33, 28, 22, 0.05);
  border-top: 1px solid rgba(33, 28, 22, 0.08);
  border-bottom: 1px solid rgba(33, 28, 22, 0.14);
}
.jobshow-draftband-inner,
.jobshow-closedband-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.875rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  min-height: 4rem;
}
@media (min-width: 1024px) {
  .jobshow-draftband-inner,
  .jobshow-closedband-inner { min-height: 4.875rem; }
}
.jobshow-draftband-text,
.jobshow-closedband-text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}
.jobshow-draftband-text strong,
.jobshow-closedband-text strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Owner panel embedded in sidebar */
.jobshow-owner-text {
  margin: 0 0 0.875rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.jobshow-owner-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ==========================================================================
   components/cards.css
   ========================================================================== */

/* ==========================================================================
   12. CARDS
   ========================================================================== */

.card {
  position: relative;
  border-radius: var(--radius-md);
  border: 0;
  background: var(--color-bg-card);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-fast);
}
@media (min-width: 640px) { .card { padding: 1.5rem; } }

a.card { text-decoration: none; }
a.card:hover { box-shadow: var(--shadow-card-hover); }

/* ==========================================================================
   components/buttons.css
   ========================================================================== */

/* ==========================================================================
   14. BUTTONS
   ========================================================================== */

.btn-block { width: 100%; }

.btn-group-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }


/* ==========================================================================
   components/forms.css
   ========================================================================== */

/* ==========================================================================
   15. FORMS
   ========================================================================== */

.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.form-required { color: var(--ink-beacon); font-weight: 700; }

.form-field,
.form-select,
.form-textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--form-input-border);
  background: var(--form-panel-bg);
  padding: 0.8125rem 0.9375rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  /* 1.5 (was 1.4) so descender tails on y/g/p have room above the bottom
     border. Especially important on selects, where the native rendering
     ignores padding for vertical centering and clips at the line box. */
  line-height: 1.5;
  color: var(--color-text-primary);
  outline: none;
  box-shadow: none;
  transition: border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease,
              background var(--duration-fast) ease;
}
.form-field::placeholder,
.form-textarea::placeholder { color: var(--color-text-placeholder); }
.form-field:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--color-border-muted);
}
.form-field:focus,
.form-select:focus,
.form-textarea:focus {
  background: var(--color-bg-card);
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--success-30);
  outline: none;
}
.form-field:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible { outline: none; }

.form-field-error,
.form-select.form-field-error,
.form-textarea.form-field-error {
  border-color: var(--color-danger);
}
.form-field-error:focus,
.form-select.form-field-error:focus,
.form-textarea.form-field-error:focus {
  background: var(--color-bg-card);
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--danger-20);
}
.form-field-error:focus-visible {
  outline: 1px solid var(--color-danger);
  outline-offset: 0;
}

.form-select {
  appearance: none;
  background-repeat: no-repeat;
  background-size: 0.75rem 0.5rem;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b6258' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  max-width: 100%;
}

.form-textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.form-hint { font-size: 0.875rem; color: var(--color-text-muted); }
.form-error-message { font-size: 0.875rem; color: var(--color-danger); }
[data-error-message][data-hiding] {
  opacity: 0;
  transition: opacity 120ms ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-error-message][data-hiding] { transition: none; }
}
.form-section-intro[data-error] { color: var(--color-danger); }
[data-error],
[data-fieldset-error] { scroll-margin-top: 5rem; }
/* min-height (not height) so a 13px padding + 15px/1.4 line-height
   (= ~47px intrinsic) isn't squeezed into a 44px box. The previous
   `height: 2.75rem` clipped descenders (y/g/p tails) on every input
   and select, and forced the native file-input button into the top
   half of its container. */
.form-field-height { min-height: 2.75rem; }

/* Form with sidebar navigation */
.form-with-sidebar .form-main-col {
  min-width: 0;
}

@media (min-width: 1280px) {
  .form-page--wide:has(.form-with-sidebar) {
    max-width: none;
  }
  .form-with-sidebar {
    display: grid;
    grid-template-columns: 1fr minmax(0, 42rem) 1fr;
    grid-template-rows: auto auto;
    align-items: start;
  }
  .form-with-sidebar .form-main-col {
    grid-column: 2;
    grid-row: 1;
  }
  .form-with-sidebar .form-trailing {
    grid-column: 2;
    grid-row: 2;
  }
  /* Rail stretches to the height of row 1 (the form sections).
     The sticky nav inside is contained by the rail, so it stops
     sticking once the user scrolls past the last section. */
  .form-with-sidebar .form-sidebar-rail {
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    justify-self: start;
    margin-left: 2rem;
    width: 14rem;
  }
}

.form-sidebar-rail { display: none; }
.form-sidebar {
  display: none;
}
@media (min-width: 1280px) {
  .form-sidebar-rail { display: block; }
  .form-sidebar {
    display: block;
    position: sticky;
    top: 2rem;
    padding-top: 2rem;
    /* Matches .form-card-body's bottom padding so the sticky element runs
       out of room at the last form section, not 2rem past it. */
    padding-bottom: 2rem;
    width: 14rem;
  }
}

.form-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.form-sidebar-link {
  display: block;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--neutral-500);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast);
}
.form-sidebar-link:hover {
  color: var(--neutral-300);
}
.form-sidebar-link.active {
  color: var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 8%, transparent);
}

.form-card,
.form-surface {
  background: var(--color-bg-card);
  border: 1.5px solid var(--line-beacon);
  border-radius: 1.375rem;
  box-shadow: none;
}

.form-card {
  overflow: hidden;
}

.form-card-body {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.form-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid var(--line-beacon);
  background: var(--form-footer-bg);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.form-card-footer-between { justify-content: space-between; }
.form-card-footer .btn { border-radius: var(--radius-md); }

/* Standalone form shell — compact page forms (login, OTP, OAuth). Same outer
   chrome as .form-card; adds inner padding + flex gap for direct children. */
.form-surface {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-surface .form-hint {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.form-surface-inset {
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-beacon);
}

/* Job form editorial treatment — warm cream panels, numbered section chips,
   stepper sidebar. Scoped so admin/account forms keep their existing
   compact app chrome. */
.job-form .form-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.job-form .form-card-body {
  padding-left: 0;
  padding-right: 0;
  counter-reset: jobsection;
}
@media (min-width: 640px) {
  .job-form .form-card-body {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Each section becomes its own warm editorial panel. The numbered chip
   lives in the left gutter via ::before, so the title and inputs share
   the same indent inside the panel. */
.job-form .form-card-body > section {
  counter-increment: jobsection;
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--color-bg-card);
  border: 1.5px solid var(--line-beacon);
  border-radius: 1.375rem;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.job-form .form-card-body > section:hover,
.job-form .form-card-body > section:focus-within {
  border-color: var(--color-border-muted);
  box-shadow: 0 6px 24px -12px rgba(26, 22, 18, 0.18), 0 1px 2px rgba(26, 22, 18, 0.04);
}

/* Gutter chip — sits outside the panel, aligned to the title baseline. */
.job-form .form-card-body > section::before {
  content: counter(jobsection, decimal-leading-zero);
  position: absolute;
  top: clamp(1.75rem, 3vw, 2.5rem);
  right: calc(100% + 1rem);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--color-text-muted);
  padding: 0.4375rem 0.625rem;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-pill);
  background: transparent;
  white-space: nowrap;
}
/* On narrow viewports there is no gutter — render the chip above the
   title inside the panel instead. */
@media (max-width: 1023px) {
  .job-form .form-card-body > section::before {
    position: static;
    display: inline-block;
    margin-bottom: 0.875rem;
  }
}

/* Source sits before the numbered run, flagged as provenance rather than a step. */
.job-form .form-card-body > section.job-form-panel--source {
  background: var(--color-bg-deep);
  border-color: var(--color-border-muted);
  counter-increment: jobsection 0; /* don't bump the section count */
}
.job-form .form-card-body > section.job-form-panel--source::before {
  content: "SOURCE";
  color: var(--color-text-primary);
  border-color: var(--color-border-muted);
  background: var(--color-bg-card);
}

/* Title and intro now share the panel's left edge. */
.job-form .form-section-title {
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 24;
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-text-heading);
}

.job-form .form-section-intro {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.job-form .form-section-intro[data-error] {
  color: var(--color-danger);
}


.job-form .form-card-footer {
  border-top: 0;
  background: transparent;
  padding: 1.5rem 0 0 0;
}
@media (min-width: 640px) {
  .job-form .form-card-footer {
    padding: 2rem 0 0 0;
  }
}

.job-form .form-card-footer .btn {
  border-radius: var(--radius-lg);
  box-shadow: none;
  font-weight: 600;
}

/* -----------------------------------------------------------------
   Job form page header — compact editorial banner.
   ----------------------------------------------------------------- */
.job-form-header {
  padding-top: 0;
  padding-bottom: 1.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}
.job-form-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-success);
  margin-bottom: 0.75rem;
}
.job-form-eyebrow-dot {
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-pill);
  background: var(--color-success);
  box-shadow: 0 0 0 4px var(--success-15);
  animation: job-form-pulse 2.4s ease-in-out infinite;
}
@keyframes job-form-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--success-30); }
  50%      { box-shadow: 0 0 0 6px rgba(22, 160, 106, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .job-form-eyebrow-dot { animation: none; }
}
.job-form-title {
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 56;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-text-heading);
}
.job-form-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
}
@media (min-width: 640px) {
  .job-form-title { font-size: 2.5rem; letter-spacing: -0.025em; }
}
.job-form-subtitle {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
/* -----------------------------------------------------------------
   Sidebar stepper — vertical numbered marker rail with connecting line.
   ----------------------------------------------------------------- */
.job-form-stepper {
  width: 14rem;
}
.job-form-stepper-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-left: 0.625rem;
  margin-bottom: 1rem;
}
.job-form-stepper-list {
  position: relative;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The connecting rail behind the markers. */
.job-form-stepper-list::before {
  content: "";
  position: absolute;
  left: calc(0.625rem + 0.6875rem); /* link padding-left + half marker width */
  top: 0.875rem;
  bottom: 0.875rem;
  width: 1px;
  background: var(--color-border-faint);
}

.job-form .form-sidebar-link.job-form-stepper-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
  text-decoration: none;
  background: transparent;
  box-shadow: none;
  position: relative;
}
.job-form .form-sidebar-link.job-form-stepper-link:hover {
  color: var(--color-text-primary);
}
.job-form-stepper-marker {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--radius-md);
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.job-form-stepper-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: -0.01em;
  color: var(--accent-beacon);
  transition: color 0.2s ease;
}
.job-form-stepper-label {
  line-height: 1.3;
}

.job-form .form-sidebar-link.job-form-stepper-link.active {
  background: var(--accent-5);
  color: var(--color-accent);
  box-shadow: none;
}
.job-form .form-sidebar-link.job-form-stepper-link.active .job-form-stepper-marker {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: scale(1.05);
}
.job-form .form-sidebar-link.job-form-stepper-link.active .job-form-stepper-num {
  color: var(--color-text-on-accent);
}

/* -----------------------------------------------------------------
   Company panel — picker summary card shown when an existing
   company is selected.
   ----------------------------------------------------------------- */
.job-form-company-summary {
  margin-top: 1.25rem;
}

.job-form-company-summary-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--color-bg-deep);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-lg);
}

.job-form-company-summary-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-inset);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.job-form-company-summary-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-form-company-summary-body {
  flex: 1;
  min-width: 0;
}
.job-form-company-summary-name {
  font-weight: 600;
  color: var(--color-text-heading);
  font-size: 1rem;
  line-height: 1.25;
}
.job-form-company-summary-meta {
  margin-top: 0.125rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.job-form-company-summary-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-success);
  text-decoration: none;
  border: 1px solid var(--success-30);
  border-radius: var(--radius-pill);
  padding: 0.4375rem 0.75rem;
  background: var(--success-15);
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.job-form-company-summary-link svg {
  width: 0.75rem;
  height: 0.75rem;
}
.job-form-company-summary-link:hover {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-on-accent);
}

.job-form-company-toggle {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}
.job-form-company-toggle--back {
  margin-top: 0;
  margin-bottom: 1rem;
  justify-content: flex-start;
}

.job-form-company-mode-toggle {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-success);
  border: 1px solid var(--success-30);
  border-radius: var(--radius-pill);
  padding: 0.4375rem 0.75rem;
  background: var(--success-15);
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.job-form-company-mode-toggle svg {
  width: 0.75rem;
  height: 0.75rem;
}
.job-form-company-mode-toggle:hover {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-on-accent);
}
.job-form-company-new {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--form-panel-bg);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-lg);
}
@media (min-width: 640px) {
  .job-form-company-new {
    padding: 1.5rem;
  }
}
.job-form-company-new .form-field,
.job-form-company-new .form-select,
.job-form-company-new .form-textarea {
  background: var(--color-bg-card);
}
/* The first field inside the sub-panel doesn't need its own top margin,
   the panel padding already provides breathing room. */
.job-form-company-new > .field-group.form-fields-top:first-child {
  margin-top: 0;
}

.form-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.form-checkbox {
  height: 1.125rem;
  width: 1.125rem;
  border-radius: 0.25rem;
  border: 1px solid var(--neutral-600);
  accent-color: var(--color-success);
  cursor: pointer;
  flex-shrink: 0;
}
.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.form-checkbox-label .form-checkbox {
  margin-top: 0.125rem;
}
.form-checkbox-grid {
  columns: 1;
  column-gap: 2rem;
}
.form-checkbox-grid > * {
  break-inside: avoid;
  margin-bottom: 0.75rem;
}
@media (min-width: 640px) { .form-checkbox-grid { columns: 2; } }

/* Form layout helpers */

/* Page wrapper for forms outside .page-container (login, job post, etc.). */
.form-page {
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1rem 2.5rem;
}
@media (min-width: 640px) {
  .form-page { padding: 3rem 1.5rem 2.5rem; }
}
.form-page--narrow { max-width: 34rem; }
.form-page--wide { max-width: 48rem; }

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
.field-row + .field-row,
.field-row + .field-group,
.field-group + .field-row,
:not(.field-row) > .field-group + .field-group { margin-top: 2rem; }
/* Remove gap when any form-panel in this row is hidden (avoids space above/below visible panel from the collapsed one) */
.field-row:has(.form-panel[hidden]) {
  gap: 0;
}
.field-row:has(.form-panel):not(:has(.form-panel:not([hidden]))) {
  margin-top: 0;
}
@media (min-width: 640px) { .field-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


.form-section-gap { gap: 2.5rem; }

.form-divider {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border: 0;
  border-top: 1px solid var(--color-border-muted);
}

/* Form section spacing — used inside form card sections */
.form-section-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 0;
}
.form-section-title + * { margin-top: 0.25rem; }
.form-section-intro { margin-top: 0.25rem; }
.form-fields-top { margin-top: 1.5rem; }
.form-inline-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.form-inline-center { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.form-tag-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.form-tag-pills:empty { height: 0; min-height: 0; margin-top: -0.5rem; overflow: hidden; }
.form-tag-pills:not(:empty) { margin-top: 1rem; }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.image-preview-row { margin-top: 0.75rem; display: flex; align-items: center; gap: 1rem; }
.counter-text { font-size: 0.875rem; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.counter-text[data-state="warning"] { color: var(--color-warning); }
.counter-text[data-state="danger"]  { color: var(--color-danger); }
.form-label-between { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }


/* ==========================================================================
   components/badges.css
   ========================================================================== */

/* ==========================================================================
   16. BADGES
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 0.375rem;
  border-radius: var(--radius-pill);
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge svg { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }

.badge-muted {
  background: var(--white-5);
  color: var(--color-text-secondary);
  border: 1px solid var(--white-30);
}

.badge-success {
  background: var(--success-20);
  color: var(--color-accent);
  border: 1px solid var(--success-30);
}

.badge-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border: 1px solid var(--color-danger-border);
}

.badge-warning {
  background: rgba(143, 90, 24, 0.1);
  color: var(--color-warning);
  border: 1px solid rgba(143, 90, 24, 0.28);
}


/* ==========================================================================
   components/tables.css
   ========================================================================== */

/* ==========================================================================
   17. TABLES
   ========================================================================== */

.table-container { overflow-x: auto; }

.data-table {
  width: 100%;
  font-size: 0.9375rem;
  text-align: left;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-bg-card);
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-3xl);
  overflow: hidden;
}
.data-table thead { background: var(--soft-beacon); }
.data-table th {
  padding: 0.875rem 1.125rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--line-beacon);
}
.data-table td {
  padding: 1rem 1.125rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--line-beacon);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--soft-beacon); }

.table-link {
  font-weight: 600;
  color: var(--color-text-primary);
  transition: color var(--duration-fast);
}
.table-link:hover { color: var(--accent-beacon); }

.td-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.td-shrink { width: 0; }
.td-expand { width: 100%; max-width: 0; }
.col-half { width: 50%; }
.truncate-cell { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ==========================================================================
   components/empty-states.css
   ========================================================================== */

/* ==========================================================================
   18. EMPTY STATES
   ========================================================================== */

.empty-state {
  border-radius: var(--radius-3xl);
  border: 1.5px solid var(--line-beacon);
  background: var(--color-bg-card);
  padding: 3rem 2rem;
  text-align: center;
}

.empty-state-icon {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.8125rem;
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  color: var(--accent-beacon);
}
.empty-state-icon svg { width: 1.625rem; height: 1.625rem; }

.empty-state-title {
  margin-top: 1.125rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.empty-state-text {
  margin: 0.625rem auto 0;
  max-width: 28rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.empty-state-action { margin-top: 1.75rem; }


/* ==========================================================================
   components/section-headings.css
   ========================================================================== */

/* ==========================================================================
   19. SECTION HEADINGS
   ========================================================================== */

.section-title {
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 24;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--color-text-heading);
  margin-bottom: 0;
}
@media (min-width: 640px) {
  .section-title { font-size: 1.5rem; }
}
.section-title + * { margin-top: 1.25rem; }

.section-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-primary);
}

.section-heading {
  margin-top: 0.5rem;
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 72;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-text-heading);
}
@media (min-width: 640px) {
  .section-heading { font-size: 2.5rem; letter-spacing: -0.025em; }
}

.section-subtext {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-text-primary);
}
/* A subtitle that introduces a block needs clearance under it as well as over.
   Scoped to the pairing rather than given to every .page-subtitle, because most
   of the 31 uses sit inside a header whose parent already spaces them. */
.page-subtitle + .table-container {
  margin-top: 1rem;
}
.page-subtitle {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}
.section-gap { margin-top: 1.5rem; }


/* Account page components */
.detail-grid { display: grid; gap: 1rem; }
.detail-value { margin-top: 0.25rem; font-size: 0.875rem; color: var(--neutral-300); }
.job-card-meta { margin-top: 1rem; display: grid; gap: 0.5rem; font-size: 0.75rem; }
.job-card-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.job-card-actions form,
.td-actions form { display: contents; }


/* ==========================================================================
   pages/homepage.css
   ========================================================================== */

/* ==========================================================================
   HOMEPAGE
   Hero (eyebrow + display headline + sub + CTA pair + stats),
   trust ribbon, featured roles 2-col card grid, how-it-works steps,
   dark band, and the employer CTA.
   ========================================================================== */

/* ----- Hero ----- */

.hero {
  padding-top: clamp(2.25rem, 5vw, 3.75rem);
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}
.hero .page-container { position: relative; }
.blob {
  display: none;
  position: absolute;
  top: clamp(2.5rem, 4vw, 3.75rem);
  right: clamp(0rem, 2vw, 2.5rem);
  width: 31.25rem;
  height: 31.25rem;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 1024px) {
  .blob { display: block; }
}
/* Keep hero content above the decorative blob if it ever overlaps. */
.hero .page-container > *:not(.blob) { position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-beacon);
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  padding: 0.4375rem 0.8125rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.625rem;
}
.dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--accent-beacon);
  flex: 0 0 auto;
}

.h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  max-width: 60rem;
}
.h1 em {
  font-style: normal;
  color: var(--accent-beacon);
}

.sub {
  margin: 1.75rem 0 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.45;
  color: var(--color-text-muted);
  max-width: 35rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.btn-lg {
  padding: 0.875rem 1.375rem;
  font-size: 1rem;
  border-radius: var(--radius-xl);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 2.875rem);
  margin: 2.25rem 0 0;
}
.stat { display: flex; flex-direction: column; gap: 0.125rem; }
.stat-n {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.125rem;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  order: 1;
}
.stat-l {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  order: 2;
}

/* ----- Trust ribbon (between hero + jobs). The strip itself is full-bleed
   so the top/bottom rules extend edge-to-edge; the inner grid sits inside
   a .page-container so the ribs line up with hero + jobs content. ----- */

.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 1.625rem 0;
  border-top: 1px solid var(--line-beacon);
  border-bottom: 1px solid var(--line-beacon);
}
@media (min-width: 640px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .trust-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: center;
  }
}

.rib {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
}
.rcheck {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-lg);
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  color: var(--accent-beacon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.rt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.rs {
  margin-top: 0.0625rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ----- Section primitives (used by jobs and the homepage) ----- */

.sec {
  padding: clamp(3rem, 6vw, 4rem) 0;
}

.sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.kick {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-beacon);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.h2 {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.875rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.seelink {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  text-decoration: none;
}
.seelink svg { width: 1rem; height: 1rem; }
.seelink:hover { color: var(--accent-beacon); }

/* ----- Fresh roles 2-col card grid ----- */

.jobs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}
.jobs > li {
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 768px) {
  .jobs:not(.jobs--stack) { grid-template-columns: repeat(2, 1fr); }
}

.job {
  position: relative;
  display: flex;
  gap: 1.125rem;
  padding: 1.5rem;
  /* The <li> is the grid item and stretches to the row height; the card
     itself is this <a>, so fill the li so the visual matches. */
  height: 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: var(--color-bg-card);
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-3xl);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
.job:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-beacon);
}

/* The honeypot apply link. Positioned off-screen rather than display:none,
   because automation that filters on visibility should still take it, while a
   person can neither see it nor reach it: aria-hidden keeps it out of the
   accessibility tree, tabindex="-1" out of the tab order, and pointer-events
   out of reach of a stray click. A class rather than an inline style, since
   style-src-attr is forbidden by the CSP. See Jobs::ApplyTrapsController. */
.apply-trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.job-new,
.job-closed {
  position: absolute;
  top: -0.5625rem;
  left: 1.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5625rem;
  border-radius: 0.4375rem;
}
.job-new {
  background: var(--accent-beacon);
  color: var(--accent-ink-beacon);
}
/* Deliberately colourless: a closed role is a fact about the card, not
   something to draw the eye the way the accent-coloured New badge is. */
.job-closed {
  background: var(--line-beacon);
  color: var(--ink-beacon);
}

.jlogo {
  width: 3.375rem;
  height: 3.375rem;
  flex: 0 0 auto;
  border-radius: 0.8125rem;
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--color-text-primary);
}
.jlogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jbody {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.jrole {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.jco {
  margin: 0.1875rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
/* Pinned to the bottom of the card so short cards (no salary, brief title)
   don't clump all content at the top. */
.jmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.875rem;
}
.jcat {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Neutral chip so it doesn't clash with the green salary pill — salary
     is the only accent colour in the meta row. */
  color: var(--color-text-muted);
  background: var(--color-bg-recessed);
  border: 1px solid var(--line-beacon);
  border-radius: var(--radius-md);
  padding: 0.3125rem 0.625rem;
}

/* Technology chip, beside the category. Same shape as .jcat but outlined rather
   than filled, so the two read as one pair without a second solid block
   competing with the salary pill for attention. */
.jtech {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border: 1px solid var(--line-beacon);
  border-radius: var(--radius-md);
  padding: 0.3125rem 0.625rem;
  white-space: nowrap;
}

/* Category and skill filter chips above the listings on /jobs. Two columns
   so Role/Skill sit beside the pills instead of eating a full line, and a
   wrap stays under the first chip rather than under the label. The first
   column is as wide as "Skill" so the two rows line up. */
.cats {
  display: grid;
  grid-template-columns: minmax(3.75rem, max-content) minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  margin: 1.5rem 0 0;
}
.cats + .cats {
  margin-top: 1.625rem;
}
/* Both rows print chips that look identical, and one word appears in both:
   "Security" is a category and it is also one of the fattest tags, pointing at
   a different page with a different cut of the board. Without a visible label
   the two are indistinguishable to anyone who is not reading the href. The
   nav's aria-label already says it for a screen reader. */
.cats-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  /* Match the first pill row so the small-caps label does not sit on the
     chip's top edge. */
  padding-top: 0.5rem;
  white-space: nowrap;
}
.cats-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}
@media (max-width: 40rem) {
  .cats {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.5rem;
  }
  .cats-label {
    padding-top: 0;
  }
}
.cat {
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  text-decoration: none;
  transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast);
}
.cat:hover {
  color: var(--color-text-primary);
  background: var(--soft-beacon);
}
.cat-active {
  color: var(--accent-beacon);
  background: var(--soft-beacon);
  border-color: var(--accent-beacon);
}
/* Salary pill — sits in the .jmeta row beside the category pill and wraps
   to its own line when there isn't room. Green to read as "the good bit". */
.pay {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  white-space: nowrap;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-md);
  color: var(--color-success);
  background: var(--success-15);
  border: 1px solid var(--success-30);
}

/* ----- Dark band ----- */

.band-wrap { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.band {
  position: relative;
  background: var(--ink-beacon);
  color: var(--color-text-on-ink);
  border-radius: 1.75rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .band { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; }
}

.band-kick {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-beacon);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.band-title {
  margin: 0.625rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-text-on-ink);
}
.band-intro {
  margin: 1.125rem 0 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-text-on-ink-muted);
  max-width: 32rem;
}
.band-title em {
  font-style: normal;
  color: var(--accent-beacon);
}

/* The listing price inside the band. Coral on ink measures 4.99:1, which
   clears AA's 3:1 for text at this size. */
.band-price {
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--accent-beacon);
}
.band-price-note {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  color: var(--color-text-on-ink-muted);
}
.band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 1.5rem;
}
/* Paper on ink rather than the global coral fill: a coral
   button sits at 3.4:1 against its own white label. */
.band-actions .btn-accent {
  background: var(--accent-ink-beacon);
  color: var(--ink-beacon);
}
.band-actions .btn-outline {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--color-text-on-ink-soft);
}
.band-actions .btn-outline:hover {
  background: var(--accent-ink-beacon);
  border-color: var(--accent-ink-beacon);
  color: var(--ink-beacon);
}

/* Why Forcepull bullets: coral + on positives, coral × on negatives, set on
   their own inset surface so the list reads as a spec sheet beside the offer
   rather than as loose text. */
.band-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem clamp(1rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1.25rem;
}
.band-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--color-text-on-ink-soft);
}
.band-row + .band-row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.band-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-md);
  background: var(--accent-beacon);
  color: var(--ink-beacon);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
}
.band-mark-plus { background: var(--paper-soft-beacon); }

/* ----- Employer CTA ----- */

.cta {
  padding: clamp(3rem, 7vw, 5.25rem) 0;
  text-align: center;
}
.cta-title {
  margin: 0.5rem auto 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 52rem;
}
.cta-title em {
  font-style: normal;
  color: var(--accent-beacon);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
  margin-top: 2rem;
}

/* The signup panel is the last thing on the page, so the space above it should
   read the same as the space below it. Whatever section precedes it gives up
   its bottom padding and the panel owns the whole gap, because the sections
   that can precede it pad by different amounts and the gap should not depend
   on which one it is. Below, the panel's bottom padding and the footer's
   trimmed margin are each half that gap and add back to it. */
.band-wrap:has(+ .nl),
.sec:has(+ .nl) {
  padding-bottom: 0;
}


/* Newsletter signup (shared partial: homepage + jobs index) */
.nl {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1rem, 2.5vw, 1.75rem);
}

/* Pages that end on the signup section (homepage, jobs index) opt in via the
   partial's tail local. Half of the gap below the panel, the panel's own bottom
   padding being the other half. */
.foot--tight {
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}
/* Shared panel chrome for the signup box and the newsletter issue panel;
   they stack in one column on /newsletter and must stay identical. */
.nl-panel {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--panel-beacon);
  border: 1px solid var(--line-beacon);
  /* Matches .band, the other full-width panel */
  border-radius: 1.75rem;
}
.nl-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}
.nl-copy {
  max-width: 30rem;
}
/* .h2-md zeroes the top margin .h2 sets, which pins the heading to the kicker
   above it. Restored here so this panel breathes the same as the other
   full-width panel it stacks with. */
.nl-copy .h2-md {
  margin-top: 0.5rem;
}
.nl-sub {
  margin: 0.625rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}
.nl-sub a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.nl-sub a:hover {
  color: var(--accent-beacon);
}
.nl-alt {
  margin: 0.875rem 0 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}
.nl-alt-link {
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.nl-alt-link:hover { color: var(--accent-beacon); }
.nl-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  flex: 1 1 22rem;
  max-width: 30rem;
}
.nl-input {
  flex: 1 1 14rem;
}
.nl-btn {
  flex: 0 0 auto;
}

/* Newsletter pages: the signup box (rendered bare, no section wrappers)
   and the issue panel share one column, narrower than the full page. */
.nlpage {
  max-width: 56rem;
  margin-inline: auto;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
}
.nlpage .back { margin-bottom: 1.25rem; }

.nlissue-panel {
  margin-top: 2rem;
}

/* Newsletter issue article (public archive page + admin preview). */
.nlissue-head {
  margin: 2.5rem 0 2rem;
}
.nlissue-panel .nlissue-head {
  margin-top: 0;
}
.nlissue-date {
  margin: 0.5rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}
.nlissue-jobs {
  margin-top: 2.5rem;
}
.nlissue-joblist {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}
/* Job entries inside an issue and archive entries on the index share a
   shape: bold underlined link over a muted meta line. */
.nlissue-jobitem,
.nlissue-archive-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.nlissue-joblink,
.nlissue-archive-link {
  width: max-content;
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.nlissue-joblink:hover,
.nlissue-archive-link:hover {
  color: var(--accent-beacon);
}
/* A removed listing keeps its place in the archive and loses its link, so it
   reads as an absence rather than as a role somebody could still apply for.
   Deliberately not sharing the .nlissue-joblink rules: those carry an
   underline, 600 weight and an accent hover, which is a promise of somewhere
   to go. Only the width is worth borrowing, so the muted text does not stretch
   the width of the row. */
.nlissue-jobgone {
  width: max-content;
  color: var(--color-text-muted);
  font-style: italic;
}

.nlissue-jobmeta,
.nlissue-archive-date {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}
.nlissue-archive {
  margin-top: 3rem;
}
.nlissue-archive-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}


/* ==========================================================================
   pages/jobs-index.css
   ========================================================================== */

/* ==========================================================================
   JOBS INDEX (/jobs)
   Hero-lite header (eyebrow + display headline + sub), filter chip row,
   2-col .job card grid (reuses the partial + grid from the homepage),
   pagination, empty state. No sidebar.
   ========================================================================== */

.page-head {
  padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(2rem, 3.5vw, 2.5rem);
}
/* Chip rows are the controls for the list, not a separate chapter, so
   don't leave a full header-plus-section gap under them. Only the jobs
   index prints .cats; other .page-head pages keep the roomy padding. */
.page-head:has(.cats) {
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-bottom: 0;
}
.page-head:has(.cats) + .sec {
  padding-top: 2rem;
}
#jobs.is-filtering {
  opacity: 0.45;
  transition: opacity 120ms ease;
}
@media (prefers-reduced-motion: reduce) {
  #jobs.is-filtering { transition: none; }
}
/* Secondary-page display H1, smaller than the homepage hero. */
.page-h1 {
  margin: 0.875rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 5.5vw, 3.875rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.page-head:has(.cats) .sub {
  margin-top: 1rem;
}
.page-h1 em {
  font-style: normal;
  color: var(--accent-beacon);
}

/* Mid-size H2 for in-page section sub-headers (Latest roles, etc.). */
.h2-md {
  font-size: clamp(1.5rem, 2.75vw, 2rem);
  margin: 0;
}
.sec-meta {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

/* ----- Pagination ----- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-beacon);
  flex-wrap: wrap;
}
.pagination-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.pagination-link:hover {
  background: var(--soft-beacon);
  color: var(--accent-beacon);
}
.pagination-link svg { width: 1.125rem; height: 1.125rem; }
.pagination-info {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ----- Empty state ----- */

.empty {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  text-align: center;
}
.empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.8125rem;
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  color: var(--accent-beacon);
}
.empty-icon svg { width: 1.625rem; height: 1.625rem; }
.empty-title {
  margin: 1.125rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.empty-text {
  margin: 0.625rem auto 0;
  max-width: 28rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.empty-text a {
  color: var(--accent-beacon);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.empty-actions {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}


/* ==========================================================================
   pages/view-transitions.css
   ========================================================================== */

/* ==========================================================================
   VIEW TRANSITIONS
   Progressive enhancement — browsers that don't support it just ignore it.
   ========================================================================== */

/* Jobs index chip filters. The listing is its own group so it can
   crossfade while the kick/H1/chips stay put. Naming the whole head
   (not each nav, not each pill) keeps unique names and avoids a
   flying-chip morph; duration 0 on the head group stops a shorter
   title ("Python roles." vs "Remote tech jobs.") from stretching
   the snapshot — including the chips. */
#jobs { view-transition-name: jobs-list; }
.page-head:has(.cats) { view-transition-name: jobs-head; }

::view-transition-old(jobs-list) {
  animation: vt-fade-out 0.2s ease forwards;
}
::view-transition-new(jobs-list) {
  animation: vt-fade-in 0.2s ease forwards;
}
::view-transition-group(jobs-list) {
  animation: none;
}

::view-transition-old(jobs-head),
::view-transition-new(jobs-head),
::view-transition-group(jobs-head) {
  animation-duration: 0s;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(jobs-list),
  ::view-transition-new(jobs-list),
  ::view-transition-old(jobs-head),
  ::view-transition-new(jobs-head) {
    animation: none;
  }
}


/* ==========================================================================
   pages/static-pages.css
   ========================================================================== */

/* ==========================================================================
   STATIC PAGES (/about, /pricing, /faq, /privacy, /terms, /workshop,
   /field_notes). Hero head with optional centered alignment, page-meta
   line, 2-col about layout, dark stat band, values grid, pricing card,
   FAQ list, legal prose, and the workshop/field-notes log list.
   ========================================================================== */

/* ----- Hero head variants ----- */

.page-head-center .page-container {
  text-align: center;
}
.page-head-center .sub {
  margin-left: auto;
  margin-right: auto;
}
.page-meta {
  margin: 1.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.page-meta strong { color: var(--color-text-primary); font-weight: 700; margin-right: 0.4rem; }

.sechead-center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.cta-sub {
  margin: 1rem auto 0;
  max-width: 28rem;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* ----- About: 2-col Why ----- */

.about-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .about-2col {
    grid-template-columns: 0.82fr 1.18fr;
    gap: 3rem;
  }
}
.about-lede {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.about-body p {
  margin: 0 0 1.125rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-text-prose);
}
.about-body p:last-child { margin-bottom: 0; }

/* ----- Values grid (about) ----- */

.values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .values { grid-template-columns: repeat(2, 1fr); }
}
.value-card {
  background: var(--color-bg-card);
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-3xl);
  padding: 1.75rem;
}
.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 0.6875rem;
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  color: var(--accent-beacon);
  margin-bottom: 1rem;
}
.value-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.value-text {
  margin: 0.5625rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ----- Pricing card ----- */

/* Two cards side by side when a page has more than one offer. Each card
   keeps its own max-width, so on one column they stay the size they were. */
.price-two-up {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .price-two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
  /* Full width of its own column rather than centred inside it. The auto
     inline margins .price-card carries for the single-card pages have to go
     with the max-width: an auto margin on a grid item suppresses stretch, so
     each card would size to its own content and the two would end up
     different widths. Block-axis stretch is unaffected either way, which is
     why the heights matched while the widths did not.

     Grid then stretches both cards to the taller one's height, and the column
     layout below turns that shared height into a shared baseline for the
     buttons. */
  .price-two-up .price-card {
    max-width: none;
    margin-inline: 0;
    display: flex;
    flex-direction: column;
  }
  /* The two lists are different lengths (seven lines against four), so the
     leftover height is absorbed here rather than pushed to the bottom of the
     card. Everything after the list, button and reassurance both, then starts
     at the same line in each card. */
  .price-two-up .price-incl {
    margin-bottom: auto;
  }
}
/* The paid-for service, marked out from the self-serve listing beside it. */
.price-card--accent {
  border-color: var(--accent-beacon);
}

.price-card {
  max-width: 35rem;
  margin: 0 auto;
  background: var(--color-bg-card);
  border: 1.5px solid var(--line-beacon);
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 4vw, 2.875rem);
  text-align: center;
  box-shadow: 0 30px 70px -42px rgba(60, 40, 20, 0.55);
}
.price-tag {
  display: inline-block;
  margin: 0 0 1.125rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-beacon);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
}
.price-amt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 8vw, 4.75rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--color-text-primary);
}
.price-per {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.price-sub {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  color: var(--color-text-muted);
}
.price-incl {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  text-align: left;
}
.price-incl-row {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  font-size: 1rem;
  color: var(--color-text-prose);
}
.price-ck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4375rem;
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  color: var(--accent-beacon);
  flex: 0 0 auto;
}
.price-btn {
  display: block;
  width: 100%;
  height: 3.375rem;
  margin-top: 2rem;
  border-radius: 0.8125rem;
  background: var(--accent-beacon);
  color: var(--accent-ink-beacon);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 3.375rem;
  text-decoration: none;
  text-align: center;
  transition: filter var(--duration-fast);
}
.price-btn:hover { filter: brightness(0.94); }
.price-rea {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.625rem;
  margin-top: 1.5rem;
}
.price-rea-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.price-rea-ck {
  display: inline-flex;
  color: var(--accent-beacon);
}

/* ----- FAQ list — compact (used inline by /pricing) ----- */

.faq-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 48rem;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
.faq-row { padding: 0; }
.faq-q {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.faq-a {
  margin: 0.5rem 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.faq-more {
  margin: 2.5rem auto 0;
  max-width: 48rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}
.faq-more a {
  color: var(--accent-beacon);
  font-weight: 600;
  text-decoration: none;
}
.faq-more a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ----- FAQ groups — sticky-rail layout (used by /faq).
   Two-column rows on desktop: left rail with a sticky group title +
   count; right column with the Q/A list. Each question is prefixed by
   a coral "Q." marker, and answers indent to align with the question
   text below it. ----- */

.faq-wrap {
  display: flex;
  flex-direction: column;
}
.faq-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 2.75rem 0;
  border-top: 1px solid var(--line-beacon);
}
.faq-group:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 1024px) {
  .faq-group {
    grid-template-columns: 0.62fr 1.38fr;
    gap: 3rem;
    align-items: start;
  }
}
.faq-group-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
  .faq-group-head {
    position: sticky;
    top: 1.5rem;
  }
}
.faq-gtitle {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.faq-gcount {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.faq-qs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.faq-group .faq-q {
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--line-beacon);
}
.faq-group .faq-q:first-child { padding-top: 0; }
.faq-group .faq-q:last-child { padding-bottom: 0; border-bottom: 0; }
.faq-q-title {
  display: flex;
  gap: 0.8125rem;
  align-items: baseline;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.faq-q-mark {
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent-beacon);
}
.faq-q-text { flex: 1; min-width: 0; }
.faq-group .faq-a {
  margin: 0.6875rem 0 0;
  padding-left: 1.8125rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 40rem;
}
.faq-a-link {
  color: var(--accent-beacon);
  font-weight: 600;
  text-decoration: none;
}
.faq-a-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ----- Legal prose page ----- */

.prose-page {
  max-width: 47rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 1.5rem);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-prose);
}
.prose-page h2 {
  margin: 2.625rem 0 0.9375rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.prose-page h2:first-child { margin-top: 0; }
.prose-page h3 {
  margin: 1.875rem 0 0.6875rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.prose-page p { margin: 1.25rem 0 0; }
.prose-page p:first-of-type { margin-top: 0.625rem; }
.prose-page a {
  color: var(--accent-beacon);
  text-underline-offset: 2px;
}
.prose-page strong { color: var(--color-text-primary); font-weight: 700; }
.prose-page ul {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.prose-page li {
  position: relative;
  padding-left: 1.625rem;
  margin-top: 0.625rem;
}
.prose-page li::before {
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 0.6875rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-xs);
  background: var(--accent-beacon);
}

/* ----- Error pages (404 / 500) -----
   Centered hero with a huge display-numeral as the visual feature; the
   middle digit gets the coral accent treatment via `<em>`. Kicker +
   short witty H1 + sub + two CTAs sit centered below. */

.error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 14rem);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  text-align: center;
}
.error .page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.error-code {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(7rem, 22vw, 14rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--color-text-primary);
}
.error-code em {
  font-style: normal;
  color: var(--accent-beacon);
}
.error .kick { margin: 1.625rem 0 0; }
.error-h1 {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.625rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
}
.error-h1 em {
  font-style: normal;
  color: var(--accent-beacon);
}
.error-sub {
  margin: 1.25rem auto 0;
  max-width: 32rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
  justify-content: center;
}


/* ----- Info card panel (used by the payment-success page). ----- */

.message-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 38rem;
  margin: 0 auto;
}
.info-card {
  background: var(--color-bg-card);
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-3xl);
  padding: clamp(1.5rem, 3vw, 1.875rem);
}
.info-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.info-card p {
  margin: 0.875rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.info-card p:first-of-type { margin-top: 0.75rem; }


/* ----- Contact (2-col grid, form left + info cards right) ----- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
  }
}
.contact-form {
  background: var(--color-bg-card);
  border: 1.5px solid var(--line-beacon);
  border-radius: 1.375rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
/* Shared full-width Beacon form submit (contact, auth, security report,
   anywhere a "primary commit" button caps off a form). */
.form-submit,
.contact-submit {
  width: 100%;
  height: 3.25rem;
  border-radius: 0.8125rem;
  border: none;
  background: var(--accent-beacon);
  color: var(--accent-ink-beacon);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 0.25rem;
  transition: filter var(--duration-fast);
}
.form-submit:hover,
.contact-submit:hover { filter: brightness(0.94); }
.contact-note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
}
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-card {
  background: var(--color-bg-card);
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-3xl);
  padding: 1.625rem;
}
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 0.6875rem;
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  color: var(--accent-beacon);
  margin-bottom: 0.9375rem;
}
.contact-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.contact-card p {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.contact-link {
  color: var(--accent-beacon);
  font-weight: 600;
  text-decoration: none;
}
.contact-link:hover { text-decoration: underline; text-underline-offset: 2px; }


/* ----- Checkout / payment-success ----- */

.checkout-card { text-align: left; }
.checkout-steps {
  list-style: none;
  margin: 1.125rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.checkout-step {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.checkout-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--radius-md);
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  color: var(--accent-beacon);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  flex: 0 0 auto;
}
.checkout-note {
  margin: 1.125rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
}
.checkout-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}


/* ==========================================================================
   pages/admin.css
   ========================================================================== */

/* ==========================================================================
   20. ADMIN
   ========================================================================== */

.dash-eyebrow {
  margin: 0 0 0.625rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-beacon);
}

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
  padding: 0.375rem;
  border-radius: 0.875rem;
  border: 1.5px solid var(--line-beacon);
  background: var(--color-bg-card);
}

.admin-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.875rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  transition: color var(--duration-fast), background-color var(--duration-fast);
}
.admin-nav-icon {
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity var(--duration-fast), color var(--duration-fast);
}
.admin-nav-link:hover {
  color: var(--color-text-primary);
  background: var(--soft-beacon);
}
.admin-nav-link:hover .admin-nav-icon { opacity: 0.9; }
.admin-nav-link[aria-current="page"],
.admin-nav-link.active {
  background: var(--soft-beacon);
  color: var(--accent-beacon);
}
.admin-nav-link.active .admin-nav-icon { opacity: 1; color: var(--accent-beacon); }

.admin-stat-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) { .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .admin-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Dashboard only. Its eight cards are four pairs and the markup is ordered to
   match: the board (jobs, stale listings), then what it did (apply clicks,
   pages served), then what came in (contacts, security reports), then who is
   reading and what is waiting (subscribers, suggestions). Four columns would
   split those pairs across rows.
   A modifier rather than a change to the shared rule, because the other two
   grids hold five time-window cards each (today, yesterday, 7 days, 30 days,
   all time). Those are a progression rather than pairs, and pairing them would
   be inheriting this decision rather than making it. */
@media (min-width: 1024px) {
  .admin-stat-grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}

.admin-dashboard-grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .admin-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.admin-stat-card {
  border-radius: 0.875rem;
  border: 1.5px solid var(--line-beacon);
  background: var(--color-bg-card);
  padding: 1.25rem 1.375rem;
}

/* The room comes from being two per row, so it is scoped to the grid that is.
   Applied to every card, these would crowd the four-across grids on the apply
   clicks and page views pages. */
.admin-stat-grid--pairs .admin-stat-card { padding: 1.5rem 1.75rem; }
.admin-stat-grid--pairs .admin-stat-value { font-size: 2.5rem; }

.admin-stat-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.admin-stat-card-link:hover {
  background: var(--soft-beacon);
  border-color: var(--accent-beacon);
}
.admin-stat-card-link:focus-visible {
  outline: 2px solid var(--accent-beacon);
  outline-offset: 2px;
}

/* Attention variant: a stat card whose count demands action (e.g. stale
   listings awaiting review). Border carries the signal so it reads at a
   glance without shouting. */
.admin-stat-card-alert {
  border-color: var(--color-danger);
}
.admin-stat-card-alert:hover {
  border-color: var(--color-danger);
}

.admin-stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.admin-stat-value {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.dash-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.dash-header-left { display: flex; align-items: center; gap: 1rem; }
.dash-back-link a { font-size: 0.875rem; color: var(--color-text-secondary); }
.dash-back-link a:hover { color: var(--color-accent); }

.admin-recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  padding: 0.625rem 0.875rem;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.admin-recent-item:hover {
  background: var(--soft-beacon);
  border-color: var(--accent-beacon);
}
.admin-recent-item:hover { background: var(--white-5); }

.admin-recent-item-body {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.admin-filter-links {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.admin-filter-links a {
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast);
}
.admin-filter-links a:hover {
  color: var(--color-text-primary);
  background: var(--soft-beacon);
}
.admin-filter-links a.text-brand {
  color: var(--accent-beacon);
  background: var(--soft-beacon);
  border-color: var(--accent-beacon);
}

.admin-recent-list { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.admin-stat-detail { margin-top: 0.25rem; font-size: 0.75rem; }
.admin-section-link { margin-top: 0.75rem; font-size: 0.875rem; display: inline-block; }


/* ==========================================================================
   pages/auth.css
   ========================================================================== */

/* ==========================================================================
   27. AUTH
   ========================================================================== */

.auth-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.auth-header::before {
  content: "Account access";
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-beacon);
}

.auth-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.125rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
  margin: 0;
}

.auth-subtitle {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.auth-footer {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: center;
}

/* Social login */
.auth-social {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Profile "Connect" buttons: content-width, side by side on wider viewports. */
.auth-social--compact {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.auth-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6875rem;
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--line-beacon);
  color: var(--color-text-primary);
  background: var(--soft-beacon);
  box-shadow: none;
}
.auth-social-btn:hover {
  border-color: var(--color-text-primary);
  background: var(--color-bg-card);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line-beacon);
}

.otp-field {
  text-align: center;
  font-size: 1.75rem;
  letter-spacing: 0.18em;
  font-family: var(--font-mono);
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

/* ==========================================================================
   pages/account.css
   ========================================================================== */

/* ==========================================================================
   28. ACCOUNT
   ========================================================================== */

/* Dashboard sidebar layout (account + admin). Views wrap this in a
   .page-container, so width matches the rest of the site automatically. */
.dashboard-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dashboard-sidebar { margin-bottom: 1.5rem; padding-top: 1rem; }
.dashboard-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; padding-top: 1rem; padding-bottom: 2rem; }

.dashboard-layout .dash-header { margin-bottom: 0; }

@media (min-width: 1024px) {
  .dashboard-layout {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 3fr);
    gap: 2rem;
    align-items: stretch;
    min-height: 100%;
  }
  .dashboard-sidebar {
    margin-bottom: 0;
    padding: 2rem 0;
    align-self: stretch;
    min-width: 0;
  }
  .dashboard-sidebar .admin-nav {
    flex-direction: column;
    align-items: stretch;
    position: sticky;
    top: 1.5rem;
  }
  .dashboard-content { padding: 2rem 0; min-width: 0; }
}

/* Dashboard form wrapper — width only; .form-card chrome is global. */
.dash-form-wrap form.container-narrow { max-width: none; width: 100%; }

/* Profile show page — editorial card: faint ink frame, no shadow/radius,
   matches the job sidebar aesthetic from Phase 4. */
.profile-card {
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-3xl);
  background: var(--color-bg-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 640px) { .profile-card { padding: 2rem; } }

.profile-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.875rem;
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-avatar-letter {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-beacon);
  letter-spacing: -0.02em;
}

.profile-card-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}

.profile-card-meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
}

.profile-fields-divider {
  height: 1px;
  background: var(--line-beacon);
}

.profile-fields-row {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .profile-fields-row { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

.dash-detail-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 0.375rem;
}

.dash-detail-value {
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.dash-detail-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Connected OAuth accounts */
.connected-accounts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.connected-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-lg);
  background: var(--bg-beacon);
}

.connected-account-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.connected-account-provider {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.connected-account-detail {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-action {
  text-align: center;
}

.account-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-faint);
}
.account-logo-link img { width: 2.5rem; height: 2.5rem; object-fit: contain; }

.company-member-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  min-width: 0;
}
.company-member-item > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-member-item > div {
  min-width: 0;
}
.company-meta-line {
  white-space: nowrap;
}

/* ── Company Show (account) ─────────────────────────────────── */

.company-show-card {
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-3xl);
  background: var(--color-bg-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) { .company-show-card { padding: 2rem; gap: 1.5rem; } }

.company-show-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}

.company-show-logo {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--line-beacon);
}
.company-show-logo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-beacon);
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
}
.company-show-logo--placeholder svg { color: var(--accent-beacon); opacity: 0.9; }
.company-show-logo-img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

.company-show-header-text {
  flex: 1;
  min-width: 0;
}
.company-show-name {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.company-show-url {
  margin-top: 0.375rem;
  font-size: 0.875rem;
}
.company-show-url-link {
  color: var(--accent-beacon);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.company-show-url-link:hover { text-decoration: underline; }

.company-show-header-action {
  flex-shrink: 0;
  margin-left: auto;
}

.company-show-divider {
  height: 1px;
  background: var(--line-beacon);
}

.company-show-about {
  min-width: 0;
}
.company-show-about .dash-detail-value {
  margin-top: 0.375rem;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

/* Responsive: stack header on very small screens */
@media (max-width: 480px) {
  .company-show-header {
    flex-wrap: wrap;
  }
  .company-show-header-action {
    width: 100%;
    margin-left: 0;
    margin-top: 0.5rem;
  }
  .company-show-header-action .btn {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   components/links.css
   ========================================================================== */

/* ==========================================================================
   29. LINKS
   ========================================================================== */

.link-brand {
  color: var(--color-accent);
  text-underline-offset: 2px;
}
.link-brand:hover {
  color: var(--color-accent-secondary);
  text-decoration: underline;
}

/* ==========================================================================
   utilities/text.css
   ========================================================================== */

/* ==========================================================================
   30. TEXT UTILITIES
   ========================================================================== */

.text-brand   { color: var(--color-accent); }
.text-muted   { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-faint   { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }


/* ==========================================================================
   components/breadcrumb.css
   ========================================================================== */

/* ==========================================================================
   31. BREADCRUMB
   ========================================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--neutral-500);
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.breadcrumb > span {
  color: var(--neutral-300);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   components/token-input.css
   ========================================================================== */

/* ==========================================================================
   32. TOKEN INPUT
   ========================================================================== */

.token-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid var(--success-30);
  background: var(--success-15);
  color: var(--color-success);
  transition: border-color var(--duration-fast), background-color var(--duration-fast), color var(--duration-fast);
}
.token-pill:hover {
  border-color: var(--success-50);
  background: var(--success-20);
  color: var(--color-success-gradient-end);
}

.token-pill-remove { color: var(--success-50); }
.token-pill:hover .token-pill-remove { color: var(--color-success-gradient-end); }

.token-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  text-align: left;
  color: var(--neutral-400);
}
.token-dropdown-item:hover { background: var(--neutral-800); }
.token-dropdown-item.active,
.token-dropdown-item[aria-selected="true"] { background: var(--neutral-800); }
.token-dropdown-item.disabled,
.token-dropdown-item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.token-input-field {
  outline: none;
  color: var(--color-text-primary);
}
.token-input-field::placeholder { color: var(--color-text-placeholder); }

.token-dropdown-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
  margin-top: 0.25rem;
  border: 1px solid var(--neutral-700);
  background: var(--neutral-900);
  border-radius: 0.25rem;
  box-shadow: var(--shadow-xs);
}

.token-input-container { position: relative; }
.token-input-hidden-wrap { display: none; }

/* ==========================================================================
   components/icons.css
   ========================================================================== */

/* ==========================================================================
   34. ICON SIZES
   ========================================================================== */

.icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; vertical-align: middle; }

/* ==========================================================================
   components/alerts.css
   ========================================================================== */

/* ==========================================================================
   35. ALERTS
   ========================================================================== */

.alert-danger {
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--color-danger-border);
  background: var(--color-danger-bg);
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
  color: var(--color-danger-text);
}
.alert-danger p {
  margin: 0;
  color: inherit;
}

.text-sm { font-size: 0.875rem; }

/* ==========================================================================
   components/misc.css
   ========================================================================== */

/* ==========================================================================
   36. MISC COMPONENTS
   ========================================================================== */

.label-upper-xs { text-transform: uppercase; letter-spacing: 0.025em; }

.border-top-section {
  border-top: 1px solid var(--neutral-700);
  padding-top: 1rem;
}

.safe-wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.company-logo-box {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--neutral-900);
  border-radius: 0;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 0 0 1px var(--white-10);
}
.company-logo-img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

/* When a logo is actually present, strip the surround chrome so logos with
   their own rounded corners or transparent backgrounds aren't framed. The
   placeholder state (no img) keeps the border/box-shadow as a visual slot. */
.company-logo-box:has(img),
.company-show-logo:has(img),
.account-logo-link:has(img),
.job-form-company-summary-logo:has(img),
.logo-preview-box:has(img) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Rich text character counter */
.rich-text-counter { color: var(--color-success); }
.rich-text-counter[data-state="warning"] { color: var(--color-warning); }
.rich-text-counter[data-state="danger"] { color: var(--color-danger); }

/* Responsive mobile / desktop toggle */
.mobile-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) { .mobile-cards { display: none; } }

.desktop-table { display: none; }
@media (min-width: 768px) { .desktop-table { display: block; } }

/* ==========================================================================
   components/rich-text.css
   ========================================================================== */

/* ==========================================================================
   RICH TEXT — the wrapper around a rendered body.
   Prose typography lives in .prose.
   ========================================================================== */

/* Body wrapper: word-break only. Prose typography lives in .prose, and bodies
   are paragraphs now, so there is no attachment or editor markup to scope. */
.rich-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}


.rich-text > :last-child { margin-bottom: 0; }


/* ==========================================================================
   utilities/helpers.css
   ========================================================================== */

/* ==========================================================================
   41. UTILITIES
   ========================================================================== */

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

/* Skip-to-content link: hidden until focused, then anchors top-left so
   keyboard users can bypass the nav. */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: var(--color-text-primary);
  color: var(--color-bg);
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 0.5rem 0;
}

.skip-to-content:focus {
  top: 0;
  outline: 2px solid var(--color-accent, currentColor);
  outline-offset: 2px;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-center { text-align: center; }

.hidden { display: none; }
.inline { display: inline; }
.block { display: block; }
.inline-block { display: inline-block; }
.w-full { width: 100%; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.prose-line-height { line-height: 1.625; }
.relative { position: relative; }
.align-start { align-items: flex-start; }
.text-balance { text-wrap: balance; }

.mt-xs { margin-top: 0.25rem; }
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mt-xl { margin-top: 2rem; }
.ml-xs { margin-left: 0.25rem; }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: 0.5rem; }
.pb-md { padding-bottom: 1rem; }

.stack { display: flex; flex-direction: column; }
.gap-sm { gap: 1rem; }
.gap-md { gap: 1.5rem; }
.gap-lg { gap: 2.5rem; }

/* Logo preview box (admin companies) */
.logo-preview-box {
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border-radius: 0;
  background: var(--color-bg-preview);
  box-shadow: inset 0 0 0 1px var(--color-border-inset);
}
.logo-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* In-form error banner; same shape as the standalone .alert-danger so
   every form's "fix this" callout reads identically. */
.contact-alert {
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--color-danger-border);
  background: var(--color-danger-bg);
  padding: 0.875rem 1rem;
  text-align: center;
}
.contact-alert p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-danger-text);
}
/* Honeypot */
.honeypot {
  display: none;
}

/* ==========================================================================
   pages/promotion.css
   ========================================================================== */

/* Promotion show page */
/* ---- Promotion show page ---- */

.promo-hero {
  position: relative;
  padding: 3rem 1.5rem;
  text-align: center;
}
@media (min-width: 640px) { .promo-hero { padding: 5rem 2.5rem; } }

.promo-hero-glow {
  display: none;
}

.promo-hero-inner {
  position: relative;
  z-index: 10;
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Badge */
.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-pill);
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.promo-badge-live {
  background: var(--success-15);
  border: 1px solid var(--success-50);
  color: var(--color-success);
}
.promo-badge-muted {
  background: var(--white-5);
  border: 1px solid var(--white-10);
  color: var(--color-text-muted);
}
.promo-badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-success);
  animation: promo-pulse 2s ease-in-out infinite;
}
@keyframes promo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-badge-dot { animation: none; }
}

/* Title */
.promo-title {
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 72;
  font-size: 2.75rem;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--color-text-heading);
}
.promo-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-success);
}
@media (min-width: 640px) { .promo-title { font-size: 3.75rem; letter-spacing: -0.03em; } }

/* Price group */
.promo-price-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.promo-price {
  font-size: 5rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-gradient-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (min-width: 640px) { .promo-price { font-size: 7rem; } }

.promo-price-original {
  font-size: 1.0625rem;
  color: var(--neutral-400);
}
.promo-price-original s {
  color: var(--color-text-primary);
  text-decoration-color: var(--color-text-primary);
  text-decoration-thickness: 2px;
}

/* Description */
.promo-desc {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--neutral-300);
  max-width: 32rem;
}

/* Hero CTA */
.promo-hero-cta {
  margin-top: 0.5rem;
}

/* Details grid */
.promo-details-section {
  padding: 0 0 2.5rem;
}
.promo-details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 48rem;
  margin: 0 auto;
}
@media (min-width: 640px) { .promo-details-grid { grid-template-columns: repeat(2, 1fr); } }
.promo-details-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.75rem 1.25rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-faint);
  background: var(--color-bg-faint);
}
.promo-details-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--success-15);
  border: 1px solid var(--success-30);
}
.promo-details-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-success);
}
.promo-details-value {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.promo-details-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-400);
  margin-bottom: -0.25rem;
}


/* Features grid */
.promo-features-section {
  padding: 2rem 0;
}
.promo-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 2rem;
}
/* Single column layout for features */

.promo-feature-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-faint);
  background: var(--color-bg-faint);
  transition: border-color 0.2s, transform 0.2s;
}
.promo-feature-card:hover {
  border-color: var(--success-30);
  transform: translateY(-2px);
}
.promo-feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--success-15);
  border: 1px solid var(--success-30);
  flex-shrink: 0;
}
.promo-feature-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-success);
}
.promo-feature-text {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Final CTA */
.promo-final-cta {
  padding: 3rem 0 1rem;
}

/* ==========================================================================
   pages/job-importer.css
   ========================================================================== */

/* ==========================================================================
   JOB IMPORTER (picker + conversation)
   ========================================================================== */

.import-intro {
  max-width: 42rem;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

.import-form {
  max-width: 42rem;
}

.import-providers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
}

.import-providers legend {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Radio-backed tiles: the native radio is visually hidden but kept in the
   a11y tree and focusable; the label is the clickable card. */
.import-provider {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border: 2px solid var(--color-border-muted);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}

.import-provider:hover {
  border-color: var(--color-accent);
}

.import-provider:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-bg-faint);
}

.import-provider:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.import-provider input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.import-provider__title {
  font-weight: 600;
  color: var(--color-text-heading);
}

.import-provider__hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.import-field {
  margin-bottom: 1.25rem;
}

.import-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.import-field input[type="url"],
.import-field textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--form-input-border);
  border-radius: var(--radius-md);
  background: var(--color-input-bg);
  font: inherit;
}

.import-manual-link {
  margin-top: 1.5rem;
  font-size: 0.875rem;
}

/* ---- Conversation (the post-import chat) ---- */

.import-conversation {
  max-width: 34rem;
}

.import-question {
  margin-top: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border-inset);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
}

.import-question h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.import-question fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.import-question label {
  display: block;
}

.import-question input[type="number"],
.import-question select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--form-input-border);
  border-radius: var(--radius-md);
  background: var(--color-input-bg);
  font: inherit;
}


/* Traffic chart (admin page views). Hand-built inline SVG: the CSP allows no
   external script, so a charting library would have to be vendored and shipped
   for a page two people ever open, and a polyline is a list of coordinates.
   Colours live here rather than as presentation attributes so the two series
   stay themeable with everything else. */
.tchart-figure {
  margin: 0;
}
.tchart {
  display: block;
  width: 100%;
  /* Height follows the viewBox ratio. A fixed height would need
     preserveAspectRatio="none", which stretches the text and the single-day
     dot along with the plot. */
  height: auto;
  overflow: visible;
}
.tchart-grid {
  stroke: var(--color-border);
  stroke-width: 1;
}
.tchart-tick {
  fill: var(--color-text-muted);
  font-size: 11px;
}
.tchart-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* The plot is drawn in viewBox units and stretched to the container, so
     without this the stroke stretches with it and reads thicker horizontally. */
  vector-effect: non-scaling-stroke;
}
.tchart-line--served,
.tchart-dot--served {
  stroke: var(--color-text-muted);
}
.tchart-line--scripted,
.tchart-dot--scripted {
  stroke: var(--color-accent);
}
/* Prefetched sits between the two in weight as well as meaning: dashed,
   because it is the line for pages nobody necessarily read. */
.tchart-line--prefetched,
.tchart-dot--prefetched {
  stroke: var(--color-text-muted);
}
.tchart-line--prefetched {
  stroke-dasharray: 4 3;
  opacity: 0.75;
}
.tchart-dot--served {
  fill: var(--color-text-muted);
}
.tchart-dot--scripted {
  fill: var(--color-accent);
}
.tchart-key {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.tchart-key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}
.tchart-swatch {
  width: 0.875rem;
  height: 0.1875rem;
  border-radius: 999px;
}
.tchart-swatch--served {
  background: var(--color-text-muted);
}
.tchart-swatch--scripted {
  background: var(--color-accent);
}
.tchart-swatch--prefetched {
  background: repeating-linear-gradient(
    to right,
    var(--color-text-muted) 0 4px,
    transparent 4px 7px
  );
}

/* Company logo in the admin list. Small, square and quiet: it is there to make
   a row recognisable at a glance, not to be looked at. */
.admin-logo-col {
  width: 3rem;
}
.admin-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-bg-card);
}
.admin-logo-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.admin-logo-fallback {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
}