/* ==========================================================================
   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:not(lexxy-editor 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:not(lexxy-editor 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-danger-light: #ef4444;
  --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);

  /* Lexxy editor overrides */
  --lexxy-color-link: var(--color-accent);
  --lexxy-color-accent-dark: var(--accent-beacon);
  --lexxy-color-accent-medium: var(--accent-beacon);
  --lexxy-color-ink: var(--ink-beacon);
  --lexxy-color-ink-medium: var(--muted-beacon);
  --lexxy-color-ink-lighter: rgba(33, 28, 22, 0.12);
  --lexxy-color-ink-lightest: var(--soft-beacon);
  --lexxy-color-ink-inverted: #ffffff;
  --lexxy-color-canvas: var(--panel-beacon);
  --lexxy-color-text: var(--ink-beacon);
  --lexxy-color-text-subtle: var(--muted-beacon);
  --lexxy-color-accent-light: rgba(239, 91, 43, 0.12);
  --lexxy-color-accent-lightest: rgba(239, 91, 43, 0.06);
  --lexxy-color-selected: rgba(239, 91, 43, 0.1);
  --lexxy-color-selected-hover: rgba(239, 91, 43, 0.18);
  --lexxy-color-selected-dark: var(--accent-beacon);
  --lexxy-shadow: 0 2px 8px rgba(33, 28, 22, 0.1);
  --lexxy-color-code-token-att: #cf222e;
  --lexxy-color-code-token-comment: #6e7781;
  --lexxy-color-code-token-function: #8250df;
  --lexxy-color-code-token-operator: #cf222e;
  --lexxy-color-code-token-property: #0550ae;
  --lexxy-color-code-token-punctuation: #24292f;
  --lexxy-color-code-token-selector: #116329;
  --lexxy-color-code-token-variable: #953800;

  /* 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;
}

/* ==========================================================================
   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);
}


/* --------------------------
   Announcement banner
   In-page editorial callout. The V1 masthead owns the top chrome; promotions
   sit below it in the content flow with faint rules and mono caps.
   -------------------------- */
.announcement-banner {
  display: block;
  margin-top: 1.5rem;
  background: transparent;
  text-decoration: none;
  color: inherit;
}
.announcement-banner--linked {
  cursor: pointer;
}
.announcement-banner-inner {
  border-top: 1px solid var(--color-border-faint);
  border-bottom: 1px solid var(--color-border-faint);
  background: var(--success-15);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-text-secondary);
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}
.announcement-banner--linked:hover .announcement-banner-inner {
  border-color: var(--color-border-muted);
  background: var(--color-success);
  color: var(--color-text-on-accent);
}
@media (min-width: 640px) {
  .announcement-banner-inner {
    flex-direction: row;
    justify-content: center;
    gap: 0.625rem;
  }
}
.announcement-icon {
  display: none;
}
.announcement-title {
  color: var(--color-text-primary);
  font-weight: 700;
  position: relative;
  padding-left: 0.875rem;
}
.announcement-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}
.announcement-banner-desc {
  color: var(--color-text-primary);
  font-weight: 400;
  letter-spacing: 0.05em;
}
.announcement-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-text-primary);
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: gap var(--duration-fast);
}
.announcement-cta svg {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform var(--duration-fast);
}
.announcement-banner--linked:hover .announcement-cta svg {
  transform: translateX(2px);
}
.announcement-banner--linked:hover .announcement-title,
.announcement-banner--linked:hover .announcement-banner-desc,
.announcement-banner--linked:hover .announcement-cta {
  color: var(--color-text-on-accent);
}
.announcement-banner--linked:hover .announcement-title::before {
  background: var(--color-text-on-accent);
}

/* Site-wide banner placement (sits above the footer on every page).
   Borrows the homepage banner's recessed background, but stays centered like the
   default banner and goes flush against the footer (no margin between, no
   duplicated horizontal rule — the footer's own dark top border is the divider). */
.announcement-banner--site {
  margin-top: 0;
  --announcement-site-gutter: 2rem;
  width: calc(100% - var(--announcement-site-gutter));
  max-width: calc(90rem - var(--announcement-site-gutter));
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 640px) {
  .announcement-banner--site {
    --announcement-site-gutter: 3rem;
  }
}
@media (min-width: 1024px) {
  .announcement-banner--site {
    --announcement-site-gutter: 5rem;
  }
}
@media (min-width: 1280px) {
  .announcement-banner--site {
    --announcement-site-gutter: 7rem;
  }
}
.announcement-banner--site .announcement-banner-inner {
  background: var(--success-15);
  border-top: 1px solid var(--color-text-primary);
  border-bottom: 0;
}
.announcement-banner--site .announcement-title {
  padding-left: 0;
}
.announcement-banner--site .announcement-title::before {
  content: none;
}
.announcement-banner--site.announcement-banner--linked:hover .announcement-banner-inner {
  border-top-color: var(--color-text-primary);
}

/* ==========================================================================
   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.
   ========================================================================== */

.pagination-standalone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}


/* ==========================================================================
   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 uses descendant selectors (not `>`) so the rules reach
   through the <div class="lexxy-content"> wrapper that Action Text /
   Lexxy puts around every rendered rich-text body. */
.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,
.prose .lexxy-content > :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); }

.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-cardsub {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* 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);
}

/* Draft band — full browser width, light coral. Sits 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. */
.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-draftband-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 { min-height: 4.875rem; }
}
.jobshow-draftband-text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}
.jobshow-draftband-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,
.form-subsection-heading {
  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); }
.form-section-intro[data-error] { color: var(--color-danger); }
[data-error],
[data-fieldset-error] { scroll-margin-top: 5rem; }
.form-success-notice { font-size: 0.875rem; color: var(--flash-notice-text); background: var(--flash-notice-bg); border: 1px solid var(--flash-notice-border); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-bottom: 1.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; }

.duration-fields {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.duration-field {
  width: 4.5rem;
  text-align: center;
}
.duration-sep {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

/* 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 visa-sponsorship boundary, 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-submission-terms {
  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;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.form-submission-terms p + p { margin-top: 0.75rem; }
.form-submission-terms a { color: var(--accent-beacon); text-decoration: underline; text-underline-offset: 2px; }
.form-submission-terms a:hover { color: var(--color-text-primary); }

.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-end { justify-content: flex-end; }
.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;
  }
}

/* The admin panel sits before the numbered run — flag it visually as out-of-band. */
.job-form .form-card-body > section.job-form-panel--admin {
  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--admin::before {
  content: "ADMIN";
  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-submission-terms {
  margin-top: 1rem;
  background: var(--color-bg-deep);
  box-shadow: none;
}
.job-form .form-submission-terms a {
  color: var(--color-text-primary);
}
.job-form .form-submission-terms a:hover {
  color: var(--color-accent);
}

.form-submission-terms-title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-heading);
  margin-bottom: 0.75rem;
}

.form-submission-terms-confirm {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-beacon);
  color: var(--color-text-primary);
  font-size: inherit;
  font-weight: 500;
}

.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 .form-card-footer .btn-primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  box-shadow: 0 6px 16px -8px rgba(192, 74, 26, 0.55), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transition: background var(--duration-fast) ease, transform 0.1s ease, box-shadow 0.2s ease;
}
.job-form .form-card-footer .btn-primary:hover {
  border-color: var(--color-accent-secondary);
  background: var(--color-accent-secondary);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(192, 74, 26, 0.65), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.job-form .form-card-footer .btn-primary:active {
  transform: translateY(0);
}

.job-form .form-card-footer .btn-secondary {
  border-color: var(--color-border-muted);
  color: var(--color-text-primary);
  background: var(--color-bg-card);
}
.job-form .form-card-footer .btn-secondary:hover {
  border-color: var(--color-text-primary);
  background: var(--accent-5);
}

/* -----------------------------------------------------------------
   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;
}
.job-form-promo-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.job-form-promo-pill {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.1875rem 0.4375rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* -----------------------------------------------------------------
   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)); } }
@media (min-width: 640px) { .field-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) { .field-row-4 { grid-template-columns: repeat(4, 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-fields-top-sm { margin-top: 1rem; }
.form-subsection-hint { margin-top: 0.25rem; }
.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; }

.form-page-header {
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin-bottom: 2.5rem;
  text-align: center;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.form-page-title {
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 72;
  font-size: 2.25rem;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text-heading);
}
@media (min-width: 640px) { .form-page-title { font-size: 3rem; letter-spacing: -0.025em; } }

.form-page-subtitle {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--neutral-300);
  line-height: 1.65;
}

.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-light); }
.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-accent {
  background: var(--accent-10);
  color: var(--color-accent);
  border: 1px solid var(--accent-25);
}

.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);
}
.page-subtitle {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}
.section-gap { margin-top: 1.5rem; }


/* ==========================================================================
   pages/blog.css
   ========================================================================== */

/* ==========================================================================
   BLOG (/blog index + show)
   Hero head (page kicker + display headline + lead), featured-post 2-col
   card, 3-col grid for the rest, and the article column for show pages
   (max-width prose, byline, full-bleed cover, "Keep reading" footer).
   ========================================================================== */

/* ----- Shared chrome ----- */

.blog-meta {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 1.625rem;
}
.blog-meta-sm { font-size: 0.8125rem; margin-top: 1rem; }
.blog-av {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-lg);
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.blog-meta-text { display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; }
.blog-author { font-weight: 700; color: var(--color-text-primary); }
.blog-meta-line { font-size: 0.8125rem; color: var(--color-text-muted); }

.blog-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-beacon);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ----- Featured post card (index) ----- */

.blog-feat {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-bg-card);
  border: 1.5px solid var(--line-beacon);
  border-radius: 1.375rem;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .blog-feat { grid-template-columns: 1.12fr 0.88fr; }
}
.blog-feat-cover {
  display: block;
  background: var(--soft-beacon);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .blog-feat-cover { order: 2; }
}
.blog-feat-cover img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s;
}
.blog-feat-cover:hover img { transform: scale(1.03); }
.blog-feat-body {
  padding: clamp(1.75rem, 3vw, 2.625rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1024px) { .blog-feat-body { order: 1; } }
.blog-feat-title {
  margin: 0.875rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.625rem, 2.75vw, 2.375rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.blog-feat-title-link {
  color: var(--color-text-primary);
  text-decoration: none;
  background-image: linear-gradient(var(--accent-beacon), var(--accent-beacon));
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  transition: background-size 0.2s;
}
.blog-feat-title-link:hover { background-size: 100% 2px; }
.blog-feat-ex {
  margin: 1rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 30rem;
}
@media (min-width: 640px) {
  .blog-feat-ex {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
}

/* ----- Card grid (index + Keep reading) ----- */

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 1.125rem; }
}
.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-card);
  border: 1.5px solid var(--line-beacon);
  border-radius: var(--radius-3xl);
  padding: 1.625rem;
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.blog-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.blog-card-ex {
  flex: 1;
  margin: 0.625rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ----- Article column (show page) ----- */

.blog-show { padding-bottom: clamp(2rem, 4vw, 3rem); }

.blog-article {
  max-width: 47rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 1.5rem);
}
.blog-show > .blog-article:first-child {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.blog-h1 {
  margin: 1.125rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
}

.blog-deck {
  margin: 1.25rem 0 0;
  font-size: 1.3125rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.blog-byline {
  margin: 1.75rem 0 1.875rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line-beacon);
}
.blog-byline .blog-meta { margin-top: 0; }

/* Cover image — escapes the article max-width to a slightly wider band. */
.blog-cover {
  margin: 0 0 1.625rem;
}
.blog-cover .blog-article {
  max-width: 52rem;
}
.blog-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-2xl);
}
.blog-caption {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* Lexxy/Action Text wraps the body in a <div class="lexxy-content"> so
   descendant selectors (not child combinators) are required to reach the
   actual paragraphs / lists / blockquotes / pre. */
.blog-body {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-prose);
}
.blog-body :is(p, ul, ol, blockquote, pre, figure, hr) { margin: 1.5rem 0 0; }
.blog-body :is(p, ul, ol, blockquote, pre, figure, hr):first-child { margin-top: 0; }
.blog-body .lexxy-content > :first-child { margin-top: 0; }
.blog-body p { font-size: 1.125rem; line-height: 1.7; color: var(--color-text-prose); }
.blog-body h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.625rem, 2.5vw, 1.875rem);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin-top: 2.625rem;
}
.blog-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin-top: 2rem;
}
.blog-body a {
  color: var(--accent-beacon);
  text-underline-offset: 2px;
}
.blog-body strong { color: var(--color-text-primary); font-weight: 700; }
.blog-body ul,
.blog-body ol { padding: 0; list-style: none; }
.blog-body li {
  position: relative;
  padding-left: 1.625rem;
  margin-top: 0.75rem;
}
.blog-body li:first-child { margin-top: 0; }
.blog-body 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);
}
.blog-body blockquote {
  padding: 0.125rem 0 0.125rem 1.625rem;
  border-left: 3px solid var(--accent-beacon);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.blog-body pre {
  padding: 1.125rem 1.25rem;
  background: var(--color-bg-code);
  border: 1px solid var(--line-beacon);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}
.blog-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-code);
  border: 1px solid var(--line-beacon);
  border-radius: 0.3125rem;
  padding: 0.0625rem 0.3125rem;
}
.blog-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}

.blog-keep-reading { border-top: 1px solid var(--line-beacon); margin-top: clamp(3rem, 5vw, 4rem); }


/* 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 + cue + stats),
   trust ribbon, featured roles 2-col card grid, how-it-works steps,
   dark band with the latest blog post, 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);
}

.cue {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.cue b { color: var(--color-text-primary); font-weight: 600; }

.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 + transmissions) ----- */

.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 { 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);
}

.job-new {
  position: absolute;
  top: -0.5625rem;
  left: 1.5rem;
  background: var(--accent-beacon);
  color: var(--accent-ink-beacon);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5625rem;
  border-radius: 0.4375rem;
}

.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;
}

/* Category filter chips above the listings on /jobs. Same shape as
   admin-filter-links but with a dedicated namespace for the public page. */
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.75rem 0 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);
}

/* ----- How it works ----- */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.625rem;
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 1.375rem; }
}

.step { display: flex; flex-direction: column; }
.step-num {
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 0.8125rem;
  background: var(--soft-beacon);
  border: 1px solid var(--line-beacon);
  color: var(--accent-beacon);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.125rem;
}
.step-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.step-desc {
  margin: 0.5625rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 19rem;
}

/* ----- Dark band (latest blog post) ----- */

.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);
}

/* Why Forcepull bullets: zine-style sticker marks with a rotated corner
   stamp on the band. Coral + on positives, coral × on negatives. */
.band-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--accent-beacon);
  color: var(--accent-beacon);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.15;
  transform: rotate(-9deg);
  background: rgba(239, 91, 43, 0.08);
}
@media (min-width: 1024px) {
  /* Desktop: float into the top-right corner. Below 1024px the band
     collapses to one column, so leave the stamp inline above the kicker. */
  .band-stamp {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    margin-bottom: 0;
  }
}
.band-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.band-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--color-text-on-ink-soft);
}
.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;
}



/* ==========================================================================
   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);
}
/* 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-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.
   ========================================================================== */

/* Blog post cover — scale entrance */
.blog-cover { view-transition-name: blog-cover; }
::view-transition-new(blog-cover) {
  animation: vt-scale-in 0.35s ease forwards;
}
::view-transition-old(blog-cover) {
  animation: vt-fade-out 0.2s ease forwards;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(blog-cover),
  ::view-transition-new(blog-cover) {
    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 ----- */

.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)); } }

.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;
}

.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-invite-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 24rem;
}
.admin-invite-form .field-group + .field-group { margin-top: 0.75rem; }
.admin-invite-form .btn { align-self: flex-start; margin-top: 1.25rem; }

.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; }


/* Promotions page (still on pre-Beacon design) — keeps .content-section-lg
   alive. Slim layout helpers used by /promotions/show. */
.content-section-lg { padding: 2.5rem 0; }

/* ==========================================================================
   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 .page-header { text-align: left; margin-bottom: 0; }
.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; }

.account-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.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-accent  { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.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 a.breadcrumb-back { color: var(--color-accent); }
.breadcrumb a.breadcrumb-back:hover { color: var(--color-text-primary); }
.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
   ========================================================================== */

.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-xl);
  background: var(--accent-20);
  color: var(--color-accent);
}

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

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

.scroll-mt-nav { scroll-margin-top: 5rem; }

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

.bullet-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-success);
  margin-top: 0.375rem;
}


.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;
}

/* Job show: match index logo size (48px) and fallback icon styling */
.job-company-info .company-logo-box,
.job-company-info .company-logo-img {
  width: 3rem;
  height: 3rem;
}

.job-company-info .company-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.job-company-info .company-logo-box svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* 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. */
.job-item-logo:has(img),
.company-logo-box:has(img),
.company-show-logo:has(img),
.company-title-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-light); }

/* 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 — Action Text wrapper, attachments, lexxy-content scoping.
   Prose typography lives in article-body.css.
   ========================================================================== */

/* Action Text wrapper — word-break, attachments, lexxy-content scoping only.
   Prose typography (lists, links, headings, code) lives in .article-body. */
.rich-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.rich-text .attachment--preview {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.rich-text .attachment--preview img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-2xl);
  margin-inline: auto;
  color: transparent;
}

.rich-text .attachment__caption:empty { display: none; }

.rich-text .lexxy-content { color: inherit; }
/* Hide "empty" paragraphs that come from double-Enter in the editor.
   Lexxy emits <p><br></p> (and sometimes <p></p>) when the cursor blanks
   a line, which would otherwise render as a visible gap. */
.rich-text .lexxy-content > p:empty,
.rich-text .lexxy-content > p:has(> br:only-child) { display: none; }
.rich-text > :last-child,
.rich-text .lexxy-content > :last-child { margin-bottom: 0; }

/* ==========================================================================
   components/article-body.css
   ========================================================================== */

/* ==========================================================================
   39. ARTICLE BODY
   ========================================================================== */

.article-body {
  font-size: 1rem;
  line-height: 1.625;
  letter-spacing: -0.011em;
  color: var(--neutral-300);
}

/* Article-body typography */

.article-body h2 {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.3;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  color: var(--color-accent);
  text-wrap: balance;
}

.article-body h3 {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  text-wrap: balance;
}

.article-body h4 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 1.75em;
  margin-bottom: 0.5em;
}

.article-body p {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

.article-body ul {
  list-style-type: disc;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-left: 0.5rem;
  margin-left: 1rem;
}
.article-body ol {
  list-style-type: decimal;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-left: 0.5rem;
  margin-left: 1rem;
}
.article-body ul ul { list-style-type: circle; }
.article-body ul ul ul { list-style-type: square; }
.article-body ol ol { list-style-type: lower-alpha; }
.article-body ol ol ol { list-style-type: lower-roman; }

.article-body li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.article-body li p {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.article-body blockquote {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-left: 1.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-left: 3px solid var(--accent-30);
  font-size: 1.1rem;
  line-height: 1.75;
}

.article-body blockquote p {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.article-body pre,
.article-body code[data-language] {
  display: block;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 1.5rem 2rem;
  border-radius: 0;
  background: var(--color-bg-code);
  border: 1px solid var(--white-10);
  box-shadow: none;
  font-size: 0.9rem;
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
}

/* Strip the box from the inner <code> when it sits inside a <pre>. Lexxy 0.9.10+
   emits `<pre data-language><code data-language>...</code></pre>`, where the outer
   <pre> owns the border/padding/background and the inner <code> is just the syntax-
   highlighting host. The `code[data-language]` variant is required because that
   selector has higher specificity than `.article-body pre code` and would otherwise
   re-apply the box to the inner element, producing a double border + double padding.
   The plain `pre code` variant covers legacy / non-language-tagged code blocks. */
.article-body pre code,
.article-body pre code[data-language] {
  display: block;
  background: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: inherit;
  margin-block: 0;
}

.article-body hr {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-color: var(--white-10);
}

.article-body a,
.article-body a strong {
  color: var(--color-accent);
  text-decoration: none;
}
.article-body a:hover,
.article-body a:hover strong {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body strong { color: var(--color-text-primary); }

.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.article-body code {
  color: var(--color-accent);
  background: var(--accent-15);
  padding: 0.1rem 0.375rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.article-body code::before,
.article-body code::after {
  content: none;
}

@media (max-width: 480px) {
  .article-body code {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* ==========================================================================
   components/lexxy.css
   ========================================================================== */

/* ==========================================================================
   40. LEXXY EDITOR OVERRIDES
   ========================================================================== */

/* Hide the highlight dropdown: clicking it emits <mark style="..."> which
   violates our CSP (style-src-attr, no unsafe-inline). The rendered output
   already strips inline styles (see config/initializers/lexxy_strip_inline_styles.rb)
   so the feature would silently break for readers anyway. */
.lexxy-editor__toolbar-dropdown--highlight {
  display: none;
}

lexxy-editor.form-field {
  color: var(--lexxy-color-ink);
  background-color: var(--lexxy-color-canvas);
}

/* Lexxy focus: matches the green focus ring used on all other form fields. */
lexxy-editor.form-field:focus-within {
  outline: 2px solid var(--success-30);
  outline-offset: 0;
  border-color: var(--color-success);
}
lexxy-editor.form-field-error:focus-within {
  outline: 1px solid var(--color-danger);
  border-color: var(--color-danger);
}

/* Lexxy toolbar: prevent our resets from interfering with Lexxy's own styles.
   Lexxy uses :where() so any specificity wins — we must re-assert Lexxy's values
   for properties our reset overrides (line-height, font-size, appearance). */
lexxy-editor button,
lexxy-editor summary {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--lexxy-color-canvas);
  color: var(--lexxy-color-ink);
  font-size: inherit;
  line-height: normal;
}

lexxy-editor input {
  color: var(--lexxy-color-text);
  background-color: var(--lexxy-color-canvas);
}

lexxy-editor h1 {
  color: var(--lexxy-color-ink);
}

lexxy-editor h2 {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.3;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  color: var(--color-accent);
  text-wrap: balance;
}

lexxy-editor h3 {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  color: var(--lexxy-color-ink);
  text-wrap: balance;
}

lexxy-editor h4 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 1.75em;
  margin-bottom: 0.5em;
  color: var(--lexxy-color-ink);
}

lexxy-editor h5,
lexxy-editor h6 {
  color: var(--lexxy-color-ink);
}

lexxy-editor a,
lexxy-editor [contenteditable] a {
  color: var(--lexxy-color-link);
}

lexxy-editor strong { color: inherit; }
lexxy-editor hr { border-top: 1px solid var(--lexxy-color-ink-lighter); }

[data-controller~="lexxy-config"] lexxy-editor button[name="code"],
[data-controller~="lexxy-config"] lexxy-editor button[name="table"],
[data-controller~="lexxy-config"] lexxy-editor button[name="divider"],
[data-controller~="lexxy-config"] lexxy-editor summary[name="highlight"] {
  display: none !important;
}

/* Opt back into the code-block button for prose-heavy editors (e.g. blog posts).
   Mirrors the .lexxy-simple convention below but in the opposite direction:
   .lexxy-rich on the field wrapper re-enables what the lexxy-config default hides. */
.lexxy-rich lexxy-editor button[name="code"] {
  display: revert !important;
}

lexxy-editor[data-attachments="false"] button[name="image"],
lexxy-editor[data-attachments="false"] button[name="file"] {
  display: none !important;
}

/* Simplified toolbar: bold, italic, lists, link, quote, undo, redo only */
.lexxy-simple button[name="code"],
.lexxy-simple button[name="table"],
.lexxy-simple button[name="divider"],
.lexxy-simple details:has([name="format"]),
.lexxy-simple details:has([name="highlight"]) {
  display: none !important;
}

lexxy-editor { --lexxy-content-margin: 0.5rem; }
lexxy-editor ul, lexxy-editor ol { list-style: revert; padding: revert; }

lexxy-editor [contenteditable] blockquote {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-left: 1.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-left: 3px solid var(--accent-30);
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--neutral-400);
}

lexxy-editor [contenteditable] {
  -webkit-user-drag: none;
  user-select: text;
  outline: none;
}

lexxy-editor [contenteditable] > *:first-child {
  margin-top: 0;
}

lexxy-editor [contenteditable] p {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

lexxy-editor [contenteditable] pre,
lexxy-editor [contenteditable] code[data-language] {
  display: block;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 1.5rem 2rem;
  border-radius: var(--radius-2xl);
  background: var(--color-bg-code);
  border: 1px solid var(--white-10);
  font-size: 0.9rem;
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
}

lexxy-editor [contenteditable] hr {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-color: var(--white-10);
}

lexxy-editor [contenteditable] strong { color: var(--color-text-primary); }

lexxy-editor [contenteditable]:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

lexxy-editor [contenteditable] img {
  pointer-events: none;
  user-select: none;
}

/* Job form + admin editorial forms Lexxy skin — align rich text editors with the
   editorial chrome. Lexxy ships a white canvas/toolbar; we match inputs. */
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor.form-field {
  --lexxy-color-canvas: var(--color-bg);
  --lexxy-color-ink-lightest: var(--color-bg);
  --lexxy-color-selected: var(--accent-10);
  --lexxy-color-selected-hover: var(--accent-20);

  border-radius: var(--radius-xs);
  border-color: var(--form-input-border);
  background: var(--color-bg-recessed);
  box-shadow: none;
}

:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor.form-field:focus-within {
  outline: 2px solid var(--success-30);
  border-color: var(--color-success);
}

:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor button,
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor summary {
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}

:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor button:hover,
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor summary:hover {
  background: var(--accent-5);
  border-color: var(--color-border-muted);
  color: var(--color-accent);
}

:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor button[aria-pressed="true"],
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor button.active,
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor summary[aria-expanded="true"] {
  background: var(--accent-10);
  border-color: var(--accent-30);
  color: var(--color-accent);
}

:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor input {
  border-radius: var(--radius-xs);
  background: var(--color-bg);
  color: var(--color-text-primary);
}

:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor details[open] > :not(summary),
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [popover],
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [role="menu"],
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [role="listbox"],
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor dialog {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border-muted);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
}

:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor details[open] > :not(summary) button,
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [popover] button,
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [role="menu"] button,
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [role="listbox"] button,
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor dialog button {
  border: 1px solid var(--color-border-muted);
  background: var(--color-bg);
  color: var(--color-text-primary);
}

:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor details[open] > :not(summary) button:hover,
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [popover] button:hover,
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [role="menu"] button:hover,
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [role="listbox"] button:hover,
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor dialog button:hover {
  border-color: var(--color-accent);
  background: var(--accent-5);
  color: var(--color-accent);
}

:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [contenteditable] {
  background: var(--color-bg-recessed);
  color: var(--color-text-primary);
}

:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [contenteditable]::before {
  color: var(--color-text-muted);
}

:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [contenteditable] blockquote {
  border-left-color: var(--color-accent);
  color: var(--color-text-secondary);
}

:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [contenteditable] pre,
:is(.job-form, .dashboard-layout .admin-editorial-form) lexxy-editor [contenteditable] code[data-language] {
  border-radius: var(--radius-xs);
  border-color: var(--color-border-muted);
  background: var(--color-bg);
}

/* ==========================================================================
   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);
  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; }
.display-contents { display: contents; }

.w-full { width: 100%; }
.max-w-none { max-width: none; }

.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; }
.flex-center { display: flex; justify-content: center; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.prose-line-height { line-height: 1.625; }
.opacity-dimmed { opacity: 0.5; }
.relative { position: relative; }
.align-start { align-items: flex-start; }
.text-balance { text-wrap: balance; }

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

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

/* Image preview box */
.image-preview-box {
  aspect-ratio: 16/9;
  width: 16rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-bg-preview);
  box-shadow: inset 0 0 0 1px var(--color-border-inset);
}
.image-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 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;
}

.job-import-callout {
  max-width: 42rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border-inset);
  border-radius: var(--radius-md);
  background: var(--color-bg-faint);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}