/* =========================================================================
   PORTANNOTATE — app.css
   Single consolidated design system. Replaces site.css + ui-fixes.css.

   Direction: a modern, confident employment platform. Generous whitespace,
   a real spatial + type scale, soft depth (radius + shadow are deliberate
   here), one warm accent that sets the product apart from every blue job
   board. Light and dark are peers.

   Structure:
     1  Tokens            6  Forms              11  Job detail
     2  Reset & base      7  Header / footer    12  Testimonials
     3  Typography        8  Landing            13  Notifications / apps
     4  Layout            9  Opportunities      14  Backoffice hooks
     5  Buttons          10  FAQ                15  Cookie consent
                                               16  Motion / utilities
   ========================================================================= */

/* ============================ 1. TOKENS ================================= */

:root {
  color-scheme: light;

  /* Neutrals — warm, near-white ground (forest direction, 2026-10-24) */
  --canvas:      #f8f8f5;
  --surface:     #ffffff;
  --surface-2:   #f0f1ec;
  --surface-3:   #e4e6de;
  --ink:         #162019;
  --ink-soft:    #3d4840;
  --ink-muted:   #5f6a63;
  --ink-faint:   #9aa39d;
  --border:      #e4e6e0;
  --border-strong:#cfd4ca;
  --on-accent:   #ffffff;
  --glow:        #e1ebdc;   /* hero radial, faint sage */

  /* Permanently-dark surfaces (ink sections, auth panel). These must NOT
     invert with the theme — do not redefine them in the dark blocks. */
  --ink-fixed:    #10241b;   /* deep forest */
  --on-ink-fixed: #f2f5f1;
  --on-ink-muted: rgba(242, 245, 241, .70);
  --on-ink-rule:  rgba(242, 245, 241, .16);

  /* Accent — deep forest green, single hue. It marks actions (buttons,
     links, the active nav item) and the hero accent line; labels and
     kickers stay quiet ink-muted so the accent keeps its meaning. */
  --accent:      #1e6b4e;
  --accent-hover:#165a41;
  --accent-weak: #e2efe8;
  --accent-ring: rgba(30, 107, 78, .28);
  /* The same accent re-scoped for permanently dark surfaces, where the
     deep green would vanish against --ink-fixed. Applied by the rule that
     re-declares --accent on .section-ink / panels (see §16). */
  --accent-on-ink:       #6fd3a5;
  --accent-on-ink-hover: #8fe0bb;

  /* Semantic (status only, never chrome) */
  --ok:      #1f7a4d;
  --ok-weak: #e6f2ec;
  --warn:    #855e00;
  --warn-weak:#f6eed9;
  --bad:     #b23b3b;
  --bad-weak:#f6e7e7;
  --info:    #2f5db0;
  --info-weak:#e8eef9;

  /* Typography. GT America (client-licensed, self-hosted) is the site-wide
     face; Mona Sans is the immediate fallback so everything renders even
     before the GT America files are in place. `--font-hero` (Fraunces) is
     used by ONE element — the landing hero headline — and nowhere else.
     `--font-mono` is kept as an alias to the sans stack (legacy selector
     references); only genuine code (`code`/`pre`, via `--font-code`) stays
     monospaced. Figures keep `font-variant-numeric: tabular-nums` for column
     alignment. */
  --font-sans: 'Mona Sans', 'GT America', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-hero: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-logo: 'Manrope', var(--font-sans);
  --font-serif: var(--font-hero);   /* legacy alias — do not use for new work */
  --font-mono: var(--font-sans);
  --font-code: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Below --text-xs: the apparatus micro-scale (mono kickers, table heads,
     badges, pills). Was hardcoded as literal 10px/11px in ~20 places before
     — same two values, just not named, so a new component reaching for
     "about that size" could silently drift off by a pixel. */
  /* Type scale (2026-10-25): eight steps, each with one job. Nothing in the
     stylesheets sets a size outside these tokens (the hero headline has its
     own display token; the logo scales by em).
       xs   12  labels, tags, captions, small print
       sm   14  buttons, nav, card copy, secondary text
       base 16  body reading text
       lg   18  ledes, small titles
       xl   22  card / job titles
       2xl  24-28  sub-section headings
       3xl  30-36  section headings
       4xl  36-48  page titles */
  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.25rem, 1.15rem + .35vw, 1.375rem);
  --text-2xl:  clamp(1.5rem, 1.3rem + .6vw, 1.75rem);
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.2vw, 2.25rem);
  --text-4xl:  clamp(2.25rem, 1.7rem + 2vw, 3rem);
  --text-display: clamp(2.4rem, 1.2rem + 3.4vw, 3.75rem);   /* 38-60px: dominant, not overpowering */
  /* Retired steps, kept as aliases so nothing falls off the scale: they
     were 1px from a neighbour (10/11 vs 12, 17 vs 16) and read as mistakes. */
  --text-3xs:  var(--text-xs);
  --text-2xs:  var(--text-xs);
  --text-md:   var(--text-base);
  --text-figure: var(--text-xl);

  /* Space scale */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* Radius */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(20,20,26,.05), 0 1px 3px rgba(20,20,26,.06);
  --shadow-md: 0 6px 20px -4px rgba(30,24,20,.10), 0 2px 6px -2px rgba(30,24,20,.06);
  --shadow-lg: 0 50px 100px -20px rgba(40,30,25,.22), 0 30px 60px -30px rgba(0,0,0,.25);
  --shadow-focus: 0 0 0 4px var(--accent-ring);

  /* Layout */
  --container: 1180px;
  --container-wide: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 72px;   /* capsule + its top inset */

  --ease: cubic-bezier(.22, .68, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --canvas:      #0e1411;
    --surface:     #141c18;
    --surface-2:   #1a241f;
    --surface-3:   #212d27;
    --ink:         #eef3ef;
    --ink-soft:    #c4cec7;
    --ink-muted:   #909d95;
    --ink-faint:   #637069;
    --border:      #1f2a24;
    --border-strong:#2c3a33;
    --glow:        #15291f;

    --accent:      #4cc28f;
    --accent-hover:#6dd2a5;
    --accent-weak: #13261d;
    --accent-ring: rgba(76, 194, 143, .30);
    --on-accent:   #0e1411;

    /* ok/warn/bad/info themselves, not just their -weak backgrounds — without
       this they stayed at their light-mode luminance while -weak went dark,
       so status-pill text sat under 3.5:1 against its own background. */
    --ok:       #3ddc84;
    --ok-weak:  #14241d;
    --warn:     #e0a730;
    --warn-weak:#28220f;
    --bad:      #ef6060;
    --bad-weak: #2a1616;
    --info:     #6fa3f5;
    --info-weak:#131c2e;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 20px 48px rgba(0,0,0,.55);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --canvas:      #0e1411;
  --surface:     #141c18;
  --surface-2:   #1a241f;
  --surface-3:   #212d27;
  --ink:         #eef3ef;
  --ink-soft:    #c4cec7;
  --ink-muted:   #909d95;
  --ink-faint:   #637069;
  --border:      #1f2a24;
  --border-strong:#2c3a33;
  --glow:        #15291f;

  --accent:      #4cc28f;
  --accent-hover:#6dd2a5;
  --accent-weak: #13261d;
  --accent-ring: rgba(76, 194, 143, .30);
  --on-accent:   #0e1411;

  --ok:       #3ddc84;
  --ok-weak:  #14241d;
  --warn:     #e0a730;
  --warn-weak:#28220f;
  --bad:      #ef6060;
  --bad-weak: #2a1616;
  --info:     #6fa3f5;
  --info-weak:#131c2e;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.55);
}

/* ========================= 2. RESET & BASE ============================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

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

main { flex: 1 0 auto; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ========================= 3. TYPOGRAPHY ============================== */

/* ---------------------------------------------------------------------------
   Type system: GT America site-wide (Mona Sans fallback). The weight ladder
   below is 400 / 500 / 700 — the three GT America ships. Only the Regular file
   is present today, declared to cover 400-700, so everything renders crisp
   (no faux-bold); real weight contrast appears the moment Medium + Bold land.
   The landing hero headline is the sole exception — it stays on Fraunces.
   --------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); line-height: 1.08; letter-spacing: -.026em; }
h2 { font-size: var(--text-3xl); line-height: 1.15; letter-spacing: -.022em; }
h3 { font-size: var(--text-xl); font-weight: 600; line-height: 1.25; letter-spacing: -.016em; }
h4 { font-size: var(--text-lg); font-weight: 500; line-height: 1.3; }
h5 { font-size: var(--text-base); font-weight: 500; }
/* Not used anywhere today (nothing in the templates reaches h6), defined so
   one never silently falls back to the browser default if that changes. */
h6 { font-size: var(--text-sm); font-weight: 500; }

p { max-width: 68ch; }
p + p { margin-top: 1em; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
.prose a, p a, li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.prose a:hover, p a:hover, li a:hover { text-decoration-color: currentColor; }

strong, b { font-weight: 600; color: var(--ink); }
small { font-size: var(--text-sm); }
hr { border: 0; border-top: 1px solid var(--border); }
code, kbd, samp, pre { font-family: var(--font-code); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-muted);
  font-weight: 400;
  max-width: 56ch;
}

.muted, .form-footnote { color: var(--ink-muted); font-size: var(--text-sm); }
.visually-hidden, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Long-form content */
.prose { max-width: 68ch; color: var(--ink-soft); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--text-2xl); margin-top: 1.6em; }
.prose h3 { font-size: var(--text-lg); margin-top: 1.6em; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: .4em; }
.prose strong { color: var(--ink); }
.prose code {
  font-family: var(--font-code);
  font-size: .875em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: 1.1em 0;
}
.prose th, .prose td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.prose thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-muted);
}

/* --- Weight system: element-level assignments ---------------------------------
   font-weight only. Grouped here so the hierarchy is auditable in one place.
   Three tiers: 400 reading copy, 500 interface (nav, buttons, labels),
   600 headings and titles. Mona Sans is variable, so all three are real. */

/* Card / job / section titles */
.opp-title, .row-title, .jd-title, .role-tile-name, .step h3,
.notice h3, .card-title, .job-title, .jobcard-title, .tm-head, .promise-intro h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -.018em;
}
.tm-who b, .signal-name { font-weight: 600; }

/* Emphasis in running text */
strong, b { font-weight: 600; }

/* Buttons, primary + dashboard nav, form + dashboard-widget labels */
.btn, .a-submit, .form-submit button, .bo-btn, .bo-copy,
.bo-nav a,
label, .a-label { font-weight: 500; }

/* Body-tier: reading copy, applicant info, job descriptions, inputs, table cells */
input, select, textarea, .a-input input,
.jd-body p, .prose p, .prose li,
.bo-table td, .row-cell, .spec-list dd, .bo-data-grid dd { font-weight: 400; }

/* Metadata, captions, helper text, disclaimers → Light */
.muted, .helptext, .form-footnote, .a-help, .a-err,
.hero-note, small, figcaption, .tm-who span, .timeline-meta,
.row-rate small, .opp-rate span, .stat-label, .a-minor, .auth-legal,
.notice time, .jd-secondary, .bo-eyebrow ~ p { font-weight: 400; }

/* Table / register headers → Bold (Mona Sans, per spec). */
.bo-table th, .index-head, .register-head { font-weight: 600; }

/* ============================ 4. LAYOUT =============================== */

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: var(--container-wide); }
.wrap-narrow { max-width: 760px; }
.wrap-form { max-width: 460px; }

.page-shell { padding-block: clamp(32px, 5vw, 64px); }
.landing-messages { padding-top: 20px; }

.section { padding-block: clamp(56px, 8vw, 104px); }
.section-band { background: var(--surface-2); }
.section-ink {
  background: var(--ink-fixed);
  color: var(--on-ink-fixed);
}
.section-ink h1, .section-ink h2, .section-ink h3 { color: var(--on-ink-fixed); }
.section-ink .lede, .section-ink p { color: var(--on-ink-muted); }
.section-ink .eyebrow { color: var(--accent); }

.page-head { margin-bottom: var(--sp-6); }
.page-head h1 { margin-top: var(--sp-3); }
.page-head .lede { margin-top: var(--sp-3); }
.page-head-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }

.section-head { max-width: 640px; margin-bottom: var(--sp-7); }
.section-head h2 { margin-top: var(--sp-3); }
.section-head .lede { margin-top: var(--sp-3); }
.section-head.section-head-action { max-width: none; }  /* the action sits at the row's far edge */
.section-head-action, .row-between { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }

.mt-sm { margin-top: var(--sp-3); }
.mt-lg { margin-top: var(--sp-6); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}

/* ============================ 5. BUTTONS ============================== */

.btn, .a-submit, .form-submit button, .bo-btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  /* resting: a hairline grounding shadow + a 1px top inner highlight so the
     fill has a light source and does not read as a flat slab. */
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: background .14s var(--ease), transform .1s var(--ease),
              box-shadow .14s var(--ease), border-color .14s var(--ease);
}
.btn:hover, .a-submit:hover, .form-submit button:hover, .bo-btn:hover {
  background: var(--accent-hover); color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn:active, .a-submit:active, .bo-btn:active {
  transform: translateY(0);
  background: color-mix(in srgb, var(--accent-hover) 88%, #000);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--ink) 30%, transparent);
}
.btn:focus-visible, .a-submit:focus-visible, .bo-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent);
}
.btn svg { width: 1.05em; height: 1.05em; }

.btn-sm { min-height: 36px; padding: 0 14px; font-size: var(--text-sm); }
.btn-lg { min-height: 48px; padding: 0 26px; font-size: var(--text-base); }
.btn-block { width: 100%; }

.btn-ghost, .bo-btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
}
.btn-ghost:hover, .bo-btn-ghost:hover {
  background: var(--surface-2); color: var(--ink);
  border-color: var(--ink-faint);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:active, .bo-btn-ghost:active { transform: translateY(0); box-shadow: none; }

/* Explicit color, not inherited: `.btn-danger` is meant to combine with
   `.btn-ghost` (see the withdraw/delete buttons) and needs to win that
   cascade. Without it the ghost variant's dark --ink text sat on the solid
   --bad fill at ~2.9:1 contrast, under the 4.5:1 minimum for this size. */
.btn-danger { background: var(--bad); color: var(--on-accent); border-color: transparent; }
.btn-danger:hover { background: color-mix(in srgb, var(--bad) 85%, #000); color: var(--on-accent); }

.linklike, .backlink, .a-minor a, .bo-back {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  cursor: pointer;
  text-decoration: none;
}
.linklike:hover, .backlink:hover, .bo-back:hover { color: var(--accent); }
.inline-form { display: inline; }

/* ============================ 6. FORMS =============================== */

label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); }

/* Base form-control box. Wrapped in :where() so it carries zero specificity —
   any component (the hero search, the opps search) overrides it with a single
   class instead of fighting a 3-pseudo selector. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=file])),
:where(select),
:where(textarea),
.a-input {
  width: 100%;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

input:focus, select:focus, textarea:focus,
.a-input:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c6c77' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
}

.helptext, .a-help { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 6px; font-family: var(--font-mono); }
.errorlist, .a-err { color: var(--bad); font-size: var(--text-xs); list-style: none; padding: 0; }
.a-err:empty { display: none; }

/* Generic form-card layout used by profile / applications */
.form-card, .workspace-form, .profile-form, .workspace-profile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 4vw, 44px);
}
.form-section + .form-section { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.form-section-head, .subsection-title { margin-bottom: var(--sp-4); }
.detail-layout .subsection-title { margin-top: var(--sp-6); }
.detail-layout .page-head + .subsection-title { margin-top: 0; }
.backlink { margin-bottom: var(--sp-5); }
.page-head .tags { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sidecard > .btn { display: flex; width: 100%; margin-top: var(--sp-4); }
.sidecard > form { margin-top: var(--sp-2); }
.sidecard > form .btn { width: 100%; }
.backlink svg { width: 1em; height: 1em; flex: none; }
.form-card h2, .form-section-head h2, .timeline-head h2 { font-size: var(--text-xl); }
.detail-layout h2 { font-size: var(--text-2xl); }
input[type=file] {
  width: 100%;
  padding: 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
input[type=file]:hover { border-color: var(--ink-faint); background: var(--surface-2); }
input[type=file]:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
input[type=file]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.form-fields { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form-fields { grid-template-columns: 1fr 1fr; } .field-wide, .is-wide { grid-column: 1 / -1; } }
.form-fields > div, .form-fields > p { display: grid; gap: 7px; align-content: start; min-width: 0; max-width: none; margin: 0; }
.form-fields > * { min-width: 0; }
.form-fields .helptext { margin-top: 0; }
.form-footer, .form-submit { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

/* Custom listbox from select.js */
.nsel { position: relative; }
.nsel-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.nsel-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.nsel-btn:hover { border-color: var(--ink-faint); }
.nsel-btn[aria-expanded='true'] { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.nsel-arrow { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ink-muted); transition: transform .16s var(--ease); }
.nsel-btn[aria-expanded='true'] .nsel-arrow { transform: rotate(180deg); }
.nsel-list {
  display: none;
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0; right: 0;
  min-width: 180px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  list-style: none;
}
.nsel[data-open='true'] .nsel-list { display: block; }
.nsel-opt { padding: 9px 11px; border-radius: 6px; font-size: var(--text-sm); cursor: pointer; }
.nsel-opt:hover, .nsel-opt.is-active { background: var(--surface-2); }
.nsel-opt[aria-selected='true'] { color: var(--accent); font-weight: 500; }

/* Messages */
.messages { list-style: none; padding: 0; display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.message {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-faint);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--text-sm);
}
.message.success { border-left-color: var(--ok); background: var(--ok-weak); }
.message.error   { border-left-color: var(--bad); background: var(--bad-weak); }
.message.warning { border-left-color: var(--warn); background: var(--warn-weak); }
.message.info    { border-left-color: var(--info); background: var(--info-weak); }

/* ===================== 7. HEADER / FOOTER =========================== */

/* The masthead is a compact floating pill, centred on the page and only as
   wide as its contents: brand, page links, actions. Slightly translucent so
   content scrolls visibly behind it; lifts a shadow once the page scrolls
   (motion.js toggles .is-scrolled). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px var(--gutter) 0;
  pointer-events: none;            /* only the capsule itself takes clicks */
}
.header-inner {
  position: relative;
  pointer-events: auto;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  min-height: 58px;
  padding: 7px 7px 7px 22px;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 8px 24px -16px color-mix(in srgb, var(--ink) 25%, transparent);
  transition: box-shadow .2s var(--ease), background .2s var(--ease);
}
.site-header.is-scrolled .header-inner {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--ink) 22%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
}
.header-inner > .brand { margin-right: 0; }

.brand, .bo-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--ink);
  letter-spacing: -.02em;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand-mark, .bo-brand-mark {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--canvas);
  flex: 0 0 auto;
}
.brand-mark svg { width: 17px; height: 17px; }
.brand-copy { display: inline-flex; flex-direction: column; line-height: 1.15; }
.brand-copy small {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Logo (templates/_logo.html): the green owl + "portannotate" wordmark,
   "port" in ink, "annotate" in brand green. Colours are tokens so the logo
   follows the theme; permanently dark surfaces set their own below. */
:root {
  --logo-head: #1E6B4E;
  --logo-face: #FFFFFF;
  --logo-eye: #1E6B4E;
  --logo-port: #162019;
  --logo-annotate: #1E6B4E;
}
:root[data-theme='dark'] { --logo-head: #4CC28F; --logo-eye: #0E1411; --logo-port: #EEF3EF; --logo-annotate: #4CC28F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --logo-head: #4CC28F; --logo-eye: #0E1411; --logo-port: #EEF3EF; --logo-annotate: #4CC28F; }
}
.logo { display: inline-flex; align-items: center; gap: .42em; font-size: 20px; line-height: 1; white-space: nowrap; }
.logo-mark { width: 1.8em; height: auto; flex: none; overflow: visible; }  /* the owl leads; text sits beside it */
.logo-head { fill: var(--logo-head); }
.logo-face { fill: var(--logo-face); }
.logo-eye { fill: var(--logo-eye); }
.logo-word { font-family: var(--font-logo); font-size: 1em; font-weight: 500; letter-spacing: -.02em; color: var(--logo-annotate); }
.logo-word b { font-weight: 700; color: var(--logo-port); }
.site-header .logo, .footer-brand .logo { font-size: 20px; }  /* one logo size everywhere (backoffice sidebar excepted) */
/* The backoffice sidebar is always dark → always the cream tone. */
.bo-brand { flex-direction: column; align-items: flex-start; gap: 3px; }
.bo-brand .logo { font-size: 18px; --logo-head: #6FD3A5; --logo-eye: #10241B; --logo-port: #F2F5F1; --logo-annotate: #6FD3A5; }
.bo-brand small {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  font-family: var(--font-sans);
}
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-actions { display: flex; align-items: center; gap: 2px; }

.nav-links a, .nav-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-muted);
  font: 500 var(--text-sm)/1 var(--font-sans);
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition: color .12s var(--ease), background .12s var(--ease);
}
.nav-links a:hover, .nav-quiet:hover { color: var(--ink); background: var(--surface-2); }
.nav-links a.is-active { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.nav-cta { margin-left: 6px; min-height: 42px; padding: 0 16px 0 18px; border-radius: var(--r-pill); font-size: var(--text-sm); }

/* Quiet square-round icon buttons: theme toggle, notifications. */
.nav-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color .12s var(--ease), background .12s var(--ease);
}
.nav-icon:hover, .nav-icon.is-active { color: var(--ink); background: var(--surface-2); }
.nav-icon svg { width: 18px; height: 18px; }
.nav-icon:focus-visible, .nav-links a:focus-visible, .nav-quiet:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.badge {
  position: absolute;
  top: 3px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 2px var(--surface);
  font-size: var(--text-3xs);
  font-weight: 600;
}

/* Theme toggle outside the masthead (auth pages) keeps its own frame. */
.theme-toggle:not(.nav-icon) {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
}
.theme-toggle:not(.nav-icon):hover { color: var(--ink); }
.theme-toggle svg { width: 17px; height: 17px; }
/* Moon in light, sun in dark — explicit choice first, OS preference otherwise. */
.icon-sun { display: none; }
:root[data-theme='dark'] .icon-sun { display: block; }
:root[data-theme='dark'] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .icon-sun { display: block; }
  :root:not([data-theme='light']) .icon-moon { display: none; }
}

/* Mobile: the capsule keeps brand + menu button; the nav opens as a panel
   directly beneath it. */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .header-inner { width: auto; min-height: 56px; padding: 6px 6px 6px 18px; justify-content: space-between; }
  .nav-toggle { display: inline-flex; border-radius: 50%; }
  .nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
  }
  .nav.is-open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-links a { min-height: 44px; font-size: var(--text-md); }
  .nav-actions { justify-self: stretch; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
  .nav-actions .inline-form { flex: 1; }
  .nav-quiet { min-height: 44px; }
  .nav-cta { flex: 1; justify-content: center; min-height: 44px; margin: 0; }
}
body.nav-open { overflow-y: hidden; }

/* The site's one arrow (templates/_arrow.html). A chevron at rest; when the
   link or button around it is hovered or focused, the shaft draws in and
   the tip moves forward. */
.arr {
  display: inline-block;   /* the reset makes svg block-level, which pushed the arrow onto its own line */
  width: .95em; height: .95em;
  flex: none;
  overflow: visible;
  vertical-align: -.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arr-back { transform: scaleX(-1); }
/* Keep an arrow on the same line as the last word before it. */
:is(a, button):has(> .arr) { white-space: nowrap; }
.arr-line, .arr-tip { transition: transform .2s var(--ease), opacity .2s var(--ease); }
.arr-line { opacity: 0; transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
.arr-tip { transform: translateX(-3px); }
:is(a, button):is(:hover, :focus-visible) .arr-line { opacity: 1; transform: none; }
:is(a, button):is(:hover, :focus-visible) .arr-tip { transform: none; }
@media (prefers-reduced-motion: reduce) { .arr-line, .arr-tip { transition: none; } }

.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding-top: var(--sp-7);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.footer-inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: var(--sp-6);
}
.footer-brand p { margin-top: var(--sp-4); max-width: 34ch; line-height: 1.6; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.footer-cols > div { display: grid; align-content: start; gap: 10px; justify-items: start; }
.footer-cols h2 { margin-bottom: 4px; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--ink); }
.footer-cols a, .footer-cols button { color: var(--ink-muted); text-decoration: none; font-family: var(--font-sans); font-size: var(--text-sm); }
.footer-cols a:hover, .footer-cols button:hover { color: var(--ink); }
.footer-cols a[href^='mailto:'] { overflow-wrap: anywhere; }  /* a long address must wrap in a narrow column, not run off the page */
.footer-base {
  position: relative;
  max-width: var(--container-wide);
  margin: var(--sp-7) auto 0;
  padding: var(--sp-5) var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}
.footer-base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--border); }
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================ 8. LANDING ============================= */

.hero {
  position: relative;
  padding-block: clamp(44px, 6vw, 84px) clamp(52px, 8vw, 104px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 62% at 88% 6%, var(--glow), transparent 68%),
    radial-gradient(46% 46% at 4% 2%, var(--surface-2), transparent 60%);
  opacity: .85;
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* Landing only: the caption spans the hero so its two authored lines stay
   whole; search, actions and the job card sit side by side beneath it.
   (The careers hero reuses .hero-grid with the plain two-column layout.) */
[data-landing-hero] .hero-grid { grid-template-areas: "head head" "copy stage"; row-gap: 40px; }
[data-landing-hero] .hero-head { grid-area: head; }
[data-landing-hero] .hero-copy { grid-area: copy; align-self: start; }  /* centring against the taller card added a hidden gap */
[data-landing-hero] .hero-stage { grid-area: stage; }

/* --- Hero stage: the live cycling job card. */
.hero-stage { position: relative; display: grid; padding-top: 8px; }
@media (max-width: 940px) {
  .hero-stage { max-width: 34rem; }
}

.hero-grid > aside { margin-top: clamp(28px, 7vw, 84px); }
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  [data-landing-hero] .hero-grid { grid-template-areas: "head" "copy" "stage"; }
  .hero-grid > aside { margin-top: 12px; }
}
.hero-copy { min-width: 0; }
.hero-copy > .lede:first-child { margin-top: 0; }
.hero-copy h1 + .lede { margin-top: 20px; }

/* ---- Hero headline — the ONE Fraunces element ---- */
.hero-headline {
  margin-top: var(--sp-4);
  font-family: var(--font-hero);
  font-optical-sizing: auto;
  font-weight: 420;
  /* The longer authored line is ~11.1em wide; this scale keeps both lines
     whole across the full-width head from ~700px up. */
  font-size: var(--text-display);
  line-height: 1.06;
  letter-spacing: -.02em;
}
.hero-headline .hl-line { display: block; }
@media (max-width: 700px) {
  /* Too narrow for the authored lines: flow and balance instead. */
  .hero-headline .hl-line { display: inline; }
  .hero-headline { text-wrap: balance; }
}
.hero-headline .hl-accent { color: var(--accent); font-style: italic; font-weight: 380; }
.hero .lede { font-size: var(--text-lg); line-height: 1.55; color: var(--ink-muted); }
/* Landing hero rhythm: 16 kicker → headline → subline, 40 to the action
   block, then 24 / 32 inside it. The subline belongs to the headline. */
.hero-head .hero-headline { margin-top: 16px; }
.hero-head .lede { margin-top: 16px; max-width: 46ch; }
[data-landing-hero] .hero-copy > .hero-finder { margin-top: 0; }

/* ---- Auto-cycling job card ---- */
.hero-jobcard {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 14px;
  min-width: 0;
}
.jobcard-stack { display: grid; align-items: start; min-height: 268px; }
.jobcard {
  grid-area: 1 / 1;
  align-self: stretch;  /* every card fills the locked stack height, so shells coincide */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px) scale(.985);
  pointer-events: none;
  /* Hand-off, not a cross-fade: the outgoing card clears fast and the
     incoming one waits for it, so two cards' text never overlaps. */
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.jobcard.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity .38s var(--ease) .16s, transform .38s var(--ease) .16s;
  position: relative;   /* lift above the stacked inactive cards */
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .jobcard { transition: none; }
}
.jobcard-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.jobcard-tag {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-muted);
}
.jobcard-tag-cat { background: var(--accent-weak); color: var(--accent-hover); }
.jobcard-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: -.018em;
  color: var(--ink);
}
.jobcard-blurb {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jobcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;  /* pin the rate row to the card's foot */
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.jobcard-rate {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.jobcard-rate small { font-size: var(--text-xs); font-weight: 400; color: var(--ink-muted); }
.jobcard-apply {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.16);
  transition: background .14s var(--ease), box-shadow .14s var(--ease);
}
.jobcard-apply:hover { background: var(--accent-hover); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent); }
.jobcard-dots { display: flex; justify-content: center; gap: 7px; }
.jobcard-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.jobcard-dot:hover { background: var(--ink-faint); }
.jobcard-dot.is-active { background: var(--accent); transform: scale(1.25); }

/* Hero search — ONE integrated control: a bordered bar with a hairline seam
   and a flush, full-height submit. Not an input with a button dropped on it. */
.hero-finder {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: stretch;
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.hero-finder:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.hero-finder > svg {
  grid-column: 1;
  place-self: center;
  width: 18px; height: 18px;
  color: var(--ink-faint);
  pointer-events: none;
}
.hero-finder input[type=search] {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 6px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: var(--text-base);
  font-weight: 500;
}
.hero-finder input[type=search]:focus { outline: none; box-shadow: none; border: 0; }
.hero-finder input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.hero-finder button {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin: 5px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.hero-finder button svg { width: 15px; height: 15px; margin-right: -2px; }
.hero-finder button:hover { background: var(--accent-hover); }
.hero-finder:focus-within button { border-left-color: var(--accent); }

/* Popular — a weightless editorial line, not chips */

/* Actions — one real button, one quiet link */
.hero-actions { margin-top: var(--sp-5); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-actions .btn { min-height: 46px; padding: 0 24px; }
.hero-actions-alt {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}
.hero-actions-alt:hover { color: var(--accent); }

/* Facts — credentials as a ruled strip (à la the reference's info pill) */
/* Trust row under the CTAs: three icon + label items, evenly spaced, no
   separators. Wraps item by item, never mid-label. */
.hero-facts {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  list-style: none;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hero-facts svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Signal board — self-contained, cannot overflow */
.signal-board {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.signal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.signal-live { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.signal-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.signal-list { display: flex; flex-direction: column; }
.signal-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  transition: background .12s var(--ease);
}
.signal-item:hover { background: var(--surface-2); }
.signal-code {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--accent-weak);
  color: var(--accent);
}
.signal-name { font-weight: 500; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signal-market { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); }
.signal-rate { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.signal-empty { padding: 20px; font-size: var(--text-sm); color: var(--ink-muted); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 18px 20px;
  background: var(--surface-2);
}
.stat-row > div { text-align: left; }
.stat-value { font-family: var(--font-mono); font-size: var(--text-figure); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat-label { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }

/* Promise / steps / roles */
.promise-intro { max-width: 640px; margin-bottom: var(--sp-7); }
.promise-intro h2 { margin-top: var(--sp-4); }
.promise-intro .lede { margin-top: var(--sp-4); }
.promise-grid, .steps, .role-grid { display: grid; gap: var(--sp-5); }
.promise-grid { grid-template-columns: repeat(3, 1fr); }
.steps { grid-template-columns: repeat(3, 1fr); }
.role-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .role-tile { min-height: 0; padding: var(--sp-4); } .role-tile-arrow { display: none; } }
@media (max-width: 860px) { .promise-grid, .steps { grid-template-columns: 1fr; } }

.promise-grid article { }
.promise-grid span {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 500;
}
.promise-grid h3 { margin-top: var(--sp-3); margin-bottom: var(--sp-2); }
.promise-grid p { color: var(--on-ink-muted); font-size: var(--text-sm); max-width: 32ch; }

.step {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.step h3 { margin-bottom: var(--sp-2); }
.step p { color: var(--ink-muted); font-size: var(--text-sm); }

.role-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), border-color .14s var(--ease);
}
.role-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); color: var(--ink); }
.role-tile { position: relative; gap: 6px; min-height: 168px; }
.role-tile-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: auto;
  border-radius: 10px;
  background: var(--accent-weak);
  color: var(--accent);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.role-tile-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.role-tile:hover .role-tile-icon { background: var(--accent); color: var(--on-accent); }
.role-tile-name { font-weight: 600; font-size: var(--text-lg); line-height: 1.3; margin-top: var(--sp-4); }
.role-tile-count { font-size: var(--text-sm); color: var(--ink-muted); }
.role-tile-arrow { position: absolute; top: var(--sp-5); right: var(--sp-5); color: var(--ink-faint); transition: transform .14s var(--ease), color .14s var(--ease); }
.role-tile:hover .role-tile-arrow { color: var(--accent); transform: translateX(3px); }

/* --- Ink band: copy left, product moment right ----------------------- */
.promise-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (max-width: 980px) { .promise-split { grid-template-columns: 1fr; } }
.promise-split .promise-intro { margin-bottom: 0; }
.promise-points { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-5); }
.promise-points li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.promise-points svg {
  width: 36px; height: 36px; padding: 8px;
  border-radius: 10px; border: 1px solid var(--on-ink-rule);
  fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.promise-points strong { display: block; color: var(--on-ink-fixed); font-size: var(--text-md); }
.promise-points span { display: block; margin-top: 2px; color: var(--on-ink-muted); font-size: var(--text-sm); line-height: 1.55; }

.product-shot { position: relative; padding: 0 0 56px 0; }
.ps-window {
  border-radius: var(--r-lg);
  background: #fbf8f4;
  color: #211d1a;
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
  overflow: hidden;
  transform: rotate(-1.2deg);
}
.ps-window strong, .ps-window b, .ps-toast b { color: #211d1a; }  /* the mock is a light card in both themes */
.ps-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(33,29,26,.08); background: #f3ede6; }
.ps-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(33,29,26,.14); }
.ps-bar span { margin-left: 10px; font-size: var(--text-xs); color: rgba(33,29,26,.45); }
.ps-body { padding: 22px 24px 26px; }
.ps-kicker { font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5f6a63; }
.ps-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.ps-title-row strong { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em; }
.ps-pill { padding: 3px 10px; border-radius: var(--r-pill); background: #f6eed9; color: #855e00; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.ps-track { list-style: none; padding: 0; margin: 20px 0 0; display: grid; }
.ps-track li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding-bottom: 18px; }
.ps-track li:last-child { padding-bottom: 0; }
.ps-track li::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px; background: rgba(33,29,26,.1); }
.ps-track li:last-child::before { display: none; }
.ps-track li > span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(33,29,26,.18); background: #fff; }
.ps-track li.is-done > span { border-color: #1f7a4d; background: #1f7a4d; box-shadow: inset 0 0 0 4px #fff; }
.ps-track li.is-done::before { background: #1f7a4d; }
.ps-track li.is-current > span { border-color: #c48a0a; box-shadow: 0 0 0 5px rgba(196,138,10,.18); }
.ps-track b { display: block; font-size: var(--text-sm); font-weight: 600; }
.ps-track small { display: block; font-size: var(--text-xs); color: rgba(33,29,26,.55); }
.ps-toast {
  position: absolute; right: -8px; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: var(--r);
  background: #fff; color: #211d1a;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.5);
}
.ps-toast svg { width: 34px; height: 34px; padding: 8px; border-radius: 9px; background: #e6f2ec; fill: none; stroke: #1f7a4d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ps-toast b { display: block; font-size: var(--text-sm); font-weight: 600; }
.ps-toast small { display: block; font-size: var(--text-xs); color: rgba(33,29,26,.55); }
@media (max-width: 520px) { .ps-toast { right: 8px; } .ps-window { transform: none; } }

/* --- How it works: a connected stepper ------------------------------- */
.stepper { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); position: relative; }
.stepper::before { content: ""; position: absolute; top: 19px; left: 20px; right: calc(33.33% - 20px); height: 2px; background: linear-gradient(90deg, var(--accent), var(--border-strong)); }
.stepper-item { position: relative; display: flex; flex-direction: column; }
.stepper-node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: var(--sp-5);
  border-radius: 50%;
  background: var(--canvas); border: 2px solid var(--accent);
  color: var(--accent); font-weight: 600; font-size: var(--text-sm);
}
.stepper-item h3 { margin-bottom: var(--sp-2); }
.stepper-item p { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; max-width: 34ch; }
.stepper-vignette {
  margin-top: auto; padding-top: var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.stepper-vignette > * { font-size: var(--text-xs); white-space: nowrap; }
.vg-chip { padding: 5px 10px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); color: var(--ink-soft); }
.vg-chip.is-ok, .vg-check { color: var(--ok); }
.vg-chip.is-ok::before, .vg-check::before { content: "✓ "; font-weight: 600; }
.vg-check { padding: 5px 10px; border-radius: var(--r-pill); background: var(--ok-weak); font-weight: 500; }
.vg-btn { padding: 6px 12px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-weight: 500; }
.vg-stage { padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); color: var(--ink-muted); }
.vg-stage.is-done { border-color: transparent; background: var(--ok-weak); color: var(--ok); }
.vg-stage.is-current { border-color: var(--warn); color: var(--warn); }
.vg-line { width: 12px; height: 1px; background: var(--border-strong); }
@media (max-width: 860px) {
  .stepper { grid-template-columns: 1fr; gap: var(--sp-6); }
  .stepper::before { top: 20px; bottom: 20px; left: 19px; right: auto; width: 2px; height: auto; background: var(--border-strong); }
  .stepper-item { padding-left: 64px; }
  .stepper-node { position: absolute; left: 0; top: 0; margin: 0; }
  .stepper-vignette { padding-top: var(--sp-4); }
}

/* Index rows (landing "latest projects") */
.index-5, .index-4 {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.index-head {
  display: grid;
  gap: 20px;
  padding: 12px 24px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.index-5 .index-head { grid-template-columns: 1.4fr 2fr .8fr .8fr .7fr; }
.index-4 .index-head { grid-template-columns: 2fr 1fr 1fr .8fr; }
.index-5 .row, .index-4 .row {
  display: grid;
  gap: 20px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  transition: background .12s var(--ease);
}
.index-5 .row { grid-template-columns: 1.4fr 2fr .8fr .8fr .7fr; }
.index-4 .row { grid-template-columns: 2fr 1fr 1fr .8fr; }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-2); }
.row-main { display: flex; flex-direction: column; gap: 4px; }
.row-kicker { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
.row-title { font-weight: 600; font-size: var(--text-lg); letter-spacing: -.01em; }
.row-blurb { font-size: var(--text-sm); color: var(--ink-muted); max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-cell { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-soft); }
.row-rate { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.row-rate small { display: block; font-size: var(--text-3xs); color: var(--ink-muted); font-weight: 400; }
@media (max-width: 860px) {
  .index-head { display: none; }
  .index-5 .row, .index-4 .row { grid-template-columns: 1fr auto; grid-auto-flow: row; }
  .row-blurb, .index-5 .row .row-cell { display: none; }
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .05em;
  vertical-align: middle;
  background: var(--surface-3);
  color: var(--ink-muted);
}
/* Status semantics: the only place --ok / --warn / --bad / --info appear.
   Application statuses and stage outcomes share one mapping. */
.pill.applied { background: var(--info-weak); color: var(--info); }
.pill.in_review, .pill.pending, .pill.draft { background: var(--warn-weak); color: var(--warn); }
.pill.accepted, .pill.passed { background: var(--ok-weak); color: var(--ok); }
.pill.rejected, .pill.failed { background: var(--bad-weak); color: var(--bad); }

/* Closing register / facts / CTA */
.closing-facts-head, .closing-cta-grid > .eyebrow { margin-bottom: var(--sp-5); }
.closing-register {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.closing-register > div { background: var(--canvas); padding: var(--sp-5); }
.closing-register dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.closing-register dd { margin-top: 6px; font-size: var(--text-sm); }

.closing-cta-panel {
  position: relative; overflow: hidden;
  padding: clamp(36px, 6vw, 72px);
  border-radius: var(--r-xl);
  background: var(--ink-fixed); color: var(--on-ink-fixed);
  box-shadow: var(--shadow-lg);
}
.closing-cta-panel::before {
  content: ""; position: absolute; inset: auto -20% -60% 30%; height: 140%;
  background: radial-gradient(closest-side, rgba(111,211,165,.22), transparent 70%);
  pointer-events: none;
}
.closing-cta-panel > * { position: relative; }
.closing-cta-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
.closing-cta-grid > .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.closing-cta-grid h2 { color: var(--on-ink-fixed); }
.closing-cta .eyebrow { color: var(--accent); }
.closing-cta-action p { color: var(--on-ink-muted); margin-bottom: var(--sp-4); }
@media (max-width: 760px) { .closing-cta-grid { grid-template-columns: 1fr; } }

/* ======================= 9. OPPORTUNITIES =========================== */

.opps { max-width: var(--container-wide); margin-inline: auto; padding: clamp(40px, 6vw, 80px) var(--gutter) var(--sp-9); }
.opps-head { max-width: 720px; margin-inline: auto; text-align: center; }
.opps-head h1 { margin-top: var(--sp-3); }
.opps-sub { margin: var(--sp-4) auto 0; color: var(--ink-muted); font-size: var(--text-lg); }

.opps-finder { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.opps-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  padding: 6px 6px 6px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.opps-search:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus), var(--shadow-sm); }
.opps-search svg { width: 18px; height: 18px; color: var(--ink-faint); flex: 0 0 auto; }
.opps-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  font-weight: 500;
}
.opps-search input:focus { outline: none; box-shadow: none; border: 0; }
.opps-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.opps-search button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.16);
  transition: background .14s var(--ease), box-shadow .14s var(--ease);
}
.opps-search button:hover { background: var(--accent-hover); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent); }

.opps-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pill-select { display: inline-block; min-width: 150px; }
.pill-select .nsel-btn,
.pill-select select {
  border-radius: var(--r-pill);
  padding-block: 9px;
  font-size: var(--text-sm);
  background: var(--surface);
}
.opps-reset { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-muted); }
.opps-reset:hover { color: var(--accent); }

.opps-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: var(--sp-5); }
@media (max-width: 620px) {
  /* One swipeable row instead of four ragged centred lines. */
  .opps-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
  .opps-tabs::-webkit-scrollbar { display: none; }
  .opps-tabs .tab { flex: none; scroll-snap-align: start; }
  .opps-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pill-select { min-width: 0; }
}
.tab {
  padding: 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--surface);
  transition: all .12s var(--ease);
}
.tab:hover { border-color: var(--ink-faint); color: var(--ink); }
.tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--canvas); }

.opps-count { margin-top: var(--sp-5); text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-muted); }
.opps-count:focus { outline: none; }

.opps-grid {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-5);
}
@media (max-width: 560px) { .opps-grid { grid-template-columns: 1fr; } }

.opp-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), border-color .14s var(--ease);
}
.opp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.opp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.opp-kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.opp-title { margin-top: 6px; font-size: var(--text-xl); line-height: 1.2; }
.opp-rate { text-align: right; flex: 0 0 auto; font-family: var(--font-mono); }
.opp-rate strong { display: block; font-size: var(--text-xl); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.opp-rate span { font-size: var(--text-xs); color: var(--ink-muted); }
.opp-summary { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; flex: 1 1 auto; }
.opp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.opp-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-soft);
}
.opp-tag svg { width: 12px; height: 12px; opacity: .7; }
.opp-tag-draft { background: var(--warn-weak); color: var(--warn); border-color: transparent; }
.opp-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  text-decoration: none;
  transition: all .12s var(--ease);
}
.opp-view:hover { background: var(--ink); border-color: var(--ink); color: var(--canvas); }

.pager { margin-top: var(--sp-7); display: flex; align-items: center; justify-content: center; gap: var(--sp-4); font-family: var(--font-mono); font-size: var(--text-sm); }
.pager a { color: var(--ink); text-decoration: none; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; }
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager > span { color: var(--ink-muted); }
.pager-pages { display: flex; gap: 4px; }
.pager-pages .is-current { padding: 6px 10px; border-radius: 6px; background: var(--ink); color: var(--canvas); }

.opps-empty { margin-top: var(--sp-6); text-align: center; padding: var(--sp-8) var(--sp-5); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }
.opps-empty h3 { margin-bottom: var(--sp-3); }
.opps-empty p { margin-inline: auto; color: var(--ink-muted); }
.opps-view-all { display: inline-block; margin-top: var(--sp-4); }

.opps-faq { margin-top: var(--sp-9); max-width: 820px; margin-inline: auto; }
.opps-faq > h2 { margin-bottom: var(--sp-5); text-align: center; }

/* ============================ 10. FAQ ============================== */

.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-weight: 600;
  font-size: var(--text-md);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink-muted); transition: transform .18s var(--ease); }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item[open] summary { color: var(--accent); }
.faq-item > p { padding: 0 0 var(--sp-4); color: var(--ink-muted); max-width: 66ch; }

/* ======================== 11. JOB DETAIL ========================== */

.jd { max-width: var(--container-wide); margin-inline: auto; padding: clamp(28px, 4vw, 52px) var(--gutter) var(--sp-9); }
.jd-back { display: inline-flex; align-items: center; gap: .45em; margin-bottom: var(--sp-5); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-muted); text-decoration: none; }
.jd-back:hover { color: var(--accent); }
.jd-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 940px) { .jd-grid { grid-template-columns: 1fr; } }

.jd-panel {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
@media (max-width: 940px) { .jd-panel { position: static; } }
.jd-panel-head { display: flex; align-items: center; gap: 12px; }
.jd-title { margin-top: var(--sp-4); font-size: var(--text-3xl); }
.jd-tags { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: 6px; }
.jd-tag { padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--text-xs); color: var(--ink-soft); }
.jd-rate { margin-top: var(--sp-5); font-size: var(--text-xl); font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: var(--ink); }
.jd-assurance { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: 6px; font-size: var(--text-sm); color: var(--ink-muted); }
.jd-assurance li { display: flex; align-items: center; gap: 8px; }
.jd-assurance li::before { content: "✓"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ok-weak); color: var(--ok); font-size: 10px; font-weight: 700; flex: none; }

/* Category icon: the same mark on tiles, cards and the posting panel. */
.cat-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); color: var(--ink-soft); flex: none; }
.cat-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cat-icon-lg { width: 40px; height: 40px; border-radius: 10px; }
.cat-icon-lg svg { width: 20px; height: 20px; stroke-width: 1.7; }
.jd-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-5);
  padding: 13px 20px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background .14s var(--ease), transform .12s var(--ease);
}
.jd-apply:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-1px); }
.jd-apply.is-done { background: var(--ok-weak); color: var(--ok); pointer-events: none; }
.jd-apply.is-blocked { background: var(--bad-weak); color: var(--bad); pointer-events: none; }
.jd-secondary { display: block; margin-top: var(--sp-3); text-align: center; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); }
.jd-secondary:hover { color: var(--accent); }
.jd-reasons { margin-top: var(--sp-3); padding-left: 1.2em; font-size: var(--text-sm); color: var(--bad); }
.jd-facts { margin: var(--sp-5) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--border); display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 10px var(--sp-4); font-size: var(--text-sm); line-height: 1.5; }
.jd-facts dt { color: var(--ink-muted); }
.jd-facts dd { margin: 0; color: var(--ink); }
.jd-email-label, .jd-email { grid-column: 1 / -1; }
.jd-facts .jd-email { margin-top: -6px; overflow-wrap: anywhere; }
.jd-rate-note { margin-top: 2px; font-size: var(--text-xs); color: var(--ink-muted); }
.jd-apply .arr { margin-left: .3em; }
.jd-steps { list-style: none; counter-reset: step; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.jd-steps li { counter-increment: step; position: relative; display: grid; gap: 2px; padding-left: 44px; }
.jd-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); }
.jd-steps strong { color: var(--ink); }
.jd-steps span { color: var(--ink-soft); }
/* Beats the generic .jd-body li bullet, which is declared later. */
.jd-body .jd-steps li { padding-left: 44px; }
.jd-body .jd-steps li + li { margin-top: 0; }
.jd-body .jd-steps li::before { content: counter(step); top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); }
.jd-secondary-note { margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--ink-muted); }

.jd-body { min-width: 0; }
.jd-body .eyebrow { margin-bottom: var(--sp-3); display: block; }
.jd-h2 { font-size: var(--text-2xl); margin: var(--sp-2) 0 var(--sp-5); }
.jd-body h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.jd-body p { color: var(--ink-soft); }
.jd-body ul { list-style: none; margin-top: var(--sp-3); padding: 0; color: var(--ink-soft); }
.jd-body li { position: relative; padding-left: 1.4em; }
.jd-body li::before { content: ""; position: absolute; left: .2em; top: .72em; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.jd-body li + li { margin-top: .5em; }
.jd-rule { margin: var(--sp-7) 0; border-top: 1px solid var(--border); }
.task-preview {
  margin: var(--sp-5) 0;
  padding: var(--sp-5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
}
.task-preview .eyebrow { margin-bottom: var(--sp-2); }
.task-preview h3 { margin-top: 0; }
.task-preview small { display: block; margin-top: var(--sp-3); color: var(--ink-muted); font-size: var(--text-xs); }

/* ======================= 12. TESTIMONIALS ========================= */

.tm { max-width: var(--container); margin-inline: auto; }
.tm-intro { max-width: 620px; margin-bottom: var(--sp-6); }
.tm-head { margin-top: var(--sp-3); }
.tm-intro p { margin-top: var(--sp-3); color: var(--ink-muted); }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-5); }
.tm-card {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.tm-card blockquote { margin: 0 0 var(--sp-4); font-size: var(--text-md); line-height: 1.55; color: var(--ink); }
.tm-card figcaption { display: flex; align-items: center; gap: 12px; }
.tm-avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-weak);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  flex: 0 0 auto;
  object-fit: cover;
}
.tm-who { display: flex; flex-direction: column; line-height: 1.3; }
.tm-who b { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.tm-who span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); }
.tm-li { color: var(--ink-faint); display: inline-grid; place-items: center; }
.tm-li svg { width: 14px; height: 14px; }
.tm-li:hover { color: var(--accent); }

/* ================= 13. NOTIFICATIONS / APPLICATIONS =============== */

.notice-list { display: grid; gap: var(--sp-3); }
.notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.notice.unread { border-left: 3px solid var(--accent); }
.notice-dot { width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--border-strong); }
.notice.unread .notice-dot { background: var(--accent); }
.notice h3 { font-size: var(--text-lg); }
.notice p { margin-top: 4px; color: var(--ink-muted); font-size: var(--text-sm); }
.notice time { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); }

.empty, .bo-empty-copy, .staff-role-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  color: var(--ink-muted);
}
.empty svg { width: 40px; height: 40px; margin: 0 auto var(--sp-3); color: var(--ink-faint); }
.empty h3 { margin-bottom: var(--sp-2); color: var(--ink); }

/* Application detail: timeline + sidecard */
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(24px,4vw,48px); align-items: start; }
@media (max-width: 900px) { .detail-layout { grid-template-columns: 1fr; } }
.sidecard, .spec {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.spec-list { display: grid; gap: var(--sp-3); }
/* Facts inside a sidecard are rows of one card, not cards inside a card. */
.sidecard .spec { padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.sidecard .spec:first-child { padding-top: 0; }
.spec-list > div { display: grid; gap: 2px; }
.spec-list dt, .spec dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
.spec-list dd, .spec dd { margin: 0; font-size: var(--text-sm); }

.timeline { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.timeline-head { margin-bottom: var(--sp-4); }
.timeline-item {
  position: relative;
  padding: 0 0 var(--sp-5) var(--sp-6);
  border-left: 2px solid var(--border);
}
.timeline-item:last-child { border-left-color: transparent; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -7px; top: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
}
/* Stage states, keyed by ApplicationStage.outcome (is-passed / is-pending /
   is-failed). Same language as the tracker drawn on the homepage, so the
   product looks like what it promised. */
.timeline-item::before { left: -11px; top: 0; width: 20px; height: 20px; }
.timeline-item.is-passed { border-left-color: var(--ok); }
.timeline-item.is-passed::before { background: var(--ok); border-color: var(--ok); box-shadow: inset 0 0 0 4px var(--surface); }
.timeline-item.is-pending::before { border-color: var(--warn); box-shadow: 0 0 0 5px color-mix(in srgb, var(--warn) 18%, transparent); }
.timeline-item.is-failed::before { background: var(--bad); border-color: var(--bad); box-shadow: inset 0 0 0 4px var(--surface); }
.timeline-item:last-child { border-left-color: transparent; }
.timeline-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.timeline-head h3 { font-size: var(--text-lg); }
.timeline-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); }
.timeline-note { margin-top: 4px; font-size: var(--text-sm); color: var(--ink-muted); }

.tag, .tags .tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-soft);
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Status pill tones */
.tone, .bo-status, .status, .application-note .value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tone { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-soft); }
.tone.applied  { background: var(--info-weak); color: var(--info); }
.tone.in_review, .tone.in-review { background: var(--warn-weak); color: var(--warn); }
.tone.accepted { background: var(--ok-weak); color: var(--ok); }
.tone.rejected, .tone.withdrawn { background: var(--bad-weak); color: var(--bad); }

.withdraw-form { margin-top: var(--sp-4); }

/* Contact page: public support details above the form. */
.contact-direct { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.contact-method {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: var(--ink); text-decoration: none;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.contact-method:hover { border-color: var(--accent); box-shadow: var(--shadow-md); color: var(--ink); }
.contact-method-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accent-weak); color: var(--accent); flex: none; }
.contact-method-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-method small { display: block; font-size: var(--text-xs); color: var(--ink-muted); }
.contact-method strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.staff-comp-note { font-size: var(--text-sm); color: var(--ink-muted); }
.application-note { font-size: var(--text-base); color: var(--ink-soft); }

/* ====================== 14. STAFF CAREERS ========================= */

/* Built from the landing page's pieces (.hero-grid, .promise-grid, .step,
   .tab) so the two pages read as one site; only the deltas live here. */
.careers-brief { display: grid; gap: var(--sp-4); padding: var(--sp-5); }
.careers-brief p { color: var(--ink-muted); font-size: var(--text-sm); margin-top: 4px; }
.steps-2 { grid-template-columns: repeat(2, 1fr); }
.steps-4 { grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; }
@media (max-width: 1000px) { .steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .steps-2, .steps-4 { grid-template-columns: 1fr; } }
.career-teams .step > span,
.career-process .step > span {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.staff-board { margin-top: var(--sp-6); }
.staff-board-filter { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.staff-filter-list { display: flex; gap: 8px; flex-wrap: wrap; }
.staff-role-list { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.staff-role-main { display: grid; gap: 4px; min-width: 0; flex: 1; }
.staff-role-main strong { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em; }
.staff-comp-note { margin-top: var(--sp-5); }
.staff-role {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  transition: background .12s var(--ease);
}
.staff-role:last-child { border-bottom: 0; }
.staff-role:hover { background: var(--surface-2); }
.staff-role-department, .staff-role-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); }
.staff-role-meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-end; }
.staff-role-arrow { color: var(--ink-faint); }
@media (max-width: 700px) {
  /* Title, then meta on its own row: side by side they collided in narrow columns. */
  .staff-role { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: 8px; align-items: start; }
  .staff-role-main { grid-column: 1; }
  .staff-role-arrow { grid-column: 2; grid-row: 1; align-self: center; }
  .staff-role-meta { grid-column: 1 / -1; justify-content: flex-start; }
}
.staff-role:hover .staff-role-arrow { color: var(--accent); }

/* ==================== 15. COOKIE CONSENT ========================== */

/* A compact corner panel, not a slab across the page: it asks once and
   stays out of the content's way. */
.cc-banner {
  position: fixed;
  left: clamp(12px, 2.5vw, 24px);
  bottom: clamp(12px, 2.5vw, 24px);
  z-index: 200;
  width: min(400px, calc(100vw - 24px));
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
.cc-banner p { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); max-width: none; }
.cc-banner a { text-decoration: underline; }
.cc-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cc-actions .btn:first-child { flex: 1 1 auto; }
.cc-actions button { white-space: nowrap; }

.cc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(2px);
}
.cc-modal {
  width: min(540px, 100%);
  max-height: min(86vh, 720px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(22px, 4vw, 34px);
}
.cc-modal h2 { font-size: var(--text-xl); }
.cc-modal > p { margin-top: var(--sp-2); color: var(--ink-muted); font-size: var(--text-sm); }
.cc-group {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
}
.cc-group-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.cc-group h3 { font-size: var(--text-md); }
.cc-group p { margin-top: 6px; font-size: var(--text-sm); color: var(--ink-muted); }

.cc-switch { position: relative; flex: 0 0 auto; width: 44px; height: 26px; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-switch span {
  position: absolute; inset: 0;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  transition: background .16s var(--ease);
}
.cc-switch span::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease);
}
.cc-switch input:checked + span { background: var(--accent); }
.cc-switch input:checked + span::before { transform: translateX(18px); }
.cc-switch input:disabled + span { opacity: .55; }
.cc-switch input:focus-visible + span { box-shadow: var(--shadow-focus); }

.cc-modal-actions { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* Display (theme) control inside the settings panel: a segmented choice. */
.cc-theme { margin-inline: 0; min-width: 0; }
.cc-theme legend { float: left; width: 100%; padding: 0; font-size: var(--text-md); font-weight: 600; color: var(--ink); }
.cc-theme legend + p { clear: both; }
.cc-segmented {
  margin-top: var(--sp-3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
}
.cc-segmented label { position: relative; display: block; cursor: pointer; }
.cc-segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cc-segmented span {
  display: grid; place-items: center;
  min-height: 36px; padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--text-sm); font-weight: 500; text-align: center;
  color: var(--ink-muted);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.cc-segmented label:hover span { color: var(--ink); }
.cc-segmented input:checked + span { background: var(--accent); color: var(--on-accent); }
.cc-segmented input:focus-visible + span { box-shadow: var(--shadow-focus); }

/* Permanently dark surfaces re-declare the accent so it stays legible on
   --ink-fixed; every component inside keeps reading var(--accent). */
.section-ink, .closing-cta-panel, .auth-show, .bo-sidebar {
  --accent: var(--accent-on-ink);
  --accent-hover: var(--accent-on-ink-hover);
  --on-accent: #0e1411;
  --accent-weak: rgba(111, 211, 165, .14);
}
.section-ink .eyebrow, .closing-cta-panel .eyebrow, .auth-show .eyebrow { color: var(--on-ink-muted); }

/* ==================== 16. MOTION / UTILITIES ===================== */

@view-transition { navigation: auto; }

.has-js .lift-in, .has-js [data-reveal] {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .has-js .opp-card,
  .has-js .role-tile,
  .has-js .step,
  .has-js .tm-card {
    animation: lift-in .5s var(--ease) both;
    animation-timeline: view();
    animation-range: entry 2% cover 22%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .product-shot .ps-window { animation: ps-settle linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .product-shot .ps-toast { animation: ps-toast linear both; animation-timeline: view(); animation-range: entry 30% cover 30%; }
    .stepper::before { transform-origin: left center; animation: draw-x linear both; animation-timeline: view(); animation-range: entry 40% cover 35%; }
  }
}
@keyframes ps-settle { from { opacity: .55; transform: translateY(40px) rotate(-4deg); } to { opacity: 1; transform: rotate(-1.2deg); } }
@keyframes ps-toast { from { opacity: .55; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lift-in {
  from { opacity: .55; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.row-between > div { min-width: 0; }