/* ═══════════════════════════════════════════════════════════
   FirstPost.io - Design System
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --c-navy:        #0C1A2E;
  --c-navy-mid:    #1E3A5F;
  --c-green:       #15803D;
  --c-green-vivid: #16A34A;
  --c-green-light: #DCFCE7;
  --c-green-mid:   #86EFAC;
  --c-amber:       #D97706;
  /* Amber TEXT tokens. --c-amber is a fill/border colour and fails as text on its own tint.
     MEASURE THROUGH EVERY LAYER: .broaden-chip's rgba(217,119,6,.10) paints on top of
     .broaden-hint's rgba(217,119,6,.08), so the real light background is rgb(248,232,212) —
     NOT amber-over-white rgb(251,241,230). Measuring the naive one made a failing colour look
     passing (#B45309 reads 4.50:1 over white but 4.17:1 where it actually sits) and shipped a
     "fix" that did not land. The nesting is invisible from the rule you are editing; blend the
     whole stack or the number is fiction.
       --c-amber-text: on the chip tint (#92400E -> 5.89:1 on rgb(248,232,212))
       --c-amber-mid : on dark surfaces (#FCD34D -> 6.74:1 on rgb(85,64,43))
       hover fill    : --c-amber-hover, because white on --c-amber is only 3.19:1 */
  --c-amber-text:  #92400E;
  --c-amber-hover: #B45309;
  --c-amber-mid:   #FCD34D;
  --c-text:        #1E293B;
  --c-muted:       #64748B;
  --c-subtle:      #94A3B8;
  --c-bg:          #FFFFFF;
  --c-bg-alt:      #F8FAFC;
  --c-bg-green:    #F0FDF4;
  --c-border:      #E2E8F0;
  --c-border-mid:  #CBD5E1;
  --c-white:       #FFFFFF;
  --c-error:       #DC2626;
  --c-reposts:     #DC2626;   /* role-history "reposts" signal — red (high-turnover warning); dark override below */
  --c-success:     #16A34A;

  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body-tc:  'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --font-body-sc:  'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;

  --r:    8px;
  --r-lg: 16px;
  --r-xl: 24px;

  --max:  1160px;
  --nav-h: 70px;

  --shadow-sm: 0 1px 3px rgba(12,26,46,.08);
  --shadow:    0 4px 16px rgba(12,26,46,.10);
  --shadow-lg: 0 12px 40px rgba(12,26,46,.14);

  --transition: 180ms ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
html[lang="zh-tw"] body { font-family: var(--font-body-tc); }
html[lang="zh-cn"] body { font-family: var(--font-body-sc); }
html[lang="zh-tw"] p, html[lang="zh-tw"] li, html[lang="zh-tw"] dd,
html[lang="zh-cn"] p, html[lang="zh-cn"] li, html[lang="zh-cn"] dd { line-height: 1.8; }
body {
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--c-green-vivid); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-green); }
input, textarea, select, button { font-family: var(--font-body); font-size: 1rem; }
ul { list-style: none; }

/* ── Layout ────────────────────────────────────────────────── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section    { padding: 88px 0; }
.section--alt { background: var(--c-bg-alt); }
.section--green { background: var(--c-bg-green); }
.section--navy { background: var(--c-navy); color: var(--c-white); }

/* ── Typography ────────────────────────────────────────────── */
.display { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.display em { font-style: italic; color: var(--c-green-vivid); }
h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; }
h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 600; }
p { max-width: 65ch; }
p.wide { max-width: none; }
.lead { font-size: 1.15rem; color: var(--c-muted); line-height: 1.7; }
.label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-green-vivid); }
.section-header { margin-bottom: 56px; }
.section-header h2 { margin-bottom: 12px; }
.text-center { text-align: center; }
.text-center p { margin: 0 auto; }

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center;
}
.nav__inner {
  display: flex; align-items: center;
  width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px;
  gap: 0;
}
/* Dashboard nav fills the viewport — the dash-layout below already spans
   full width, so a centred 1160px nav looks like a misaligned strip. The
   logo hugs the left edge, the actions cluster hugs the right. Padding
   matches .dash-main so the logo lines up with the sidebar's inner edge. */
.nav--dash .nav__inner {
  max-width: none; padding: 0 40px;
}
.nav__logo {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--c-navy); text-decoration: none; margin-right: 32px;
}
.nav__logo-icon {
  width: 34px; height: 34px;
  background: var(--c-green-vivid) url('/assets/firstpost-logo-linkedin.png') center/150% no-repeat;
  border-radius: 10px;
}
.hero__tag-icon {
  display: inline-block; width: 20px; height: 20px; vertical-align: middle;
  background: var(--c-green-vivid) url('/assets/firstpost-logo-linkedin.png') center/150% no-repeat;
  border-radius: 5px;
}
/* Links stretch to fill space and stay centred between logo and actions */
.nav__links { display: flex; align-items: center; gap: 32px; flex: 1; }
.nav__links a { color: var(--c-muted); font-size: .9rem; font-weight: 500; transition: color var(--transition); white-space: nowrap; }
.nav__links a:hover, .nav__links a.active { color: var(--c-navy); }
.nav__actions { display: flex; align-items: center; gap: 16px; }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 6px; color: var(--c-navy);
  -webkit-appearance: none; appearance: none;
}
/* SVG hamburger bars - transforms are contained within the SVG viewport,
   immune to any CSS overflow clipping on parent elements */
.hb-bar {
  transition: transform .22s ease, opacity .22s ease;
  transform-box: fill-box;  /* use each bar's own bounding box as origin reference */
  transform-origin: center;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--r); font-weight: 600; font-size: .9rem;
  cursor: pointer; border: 1.5px solid transparent; transition: all var(--transition);
  text-decoration: none; white-space: nowrap; background: transparent;
}
.btn--primary { background: var(--c-green-vivid); color: #fff; border-color: var(--c-green-vivid); }
.btn--primary:hover { background: var(--c-green); border-color: var(--c-green); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22,163,74,.3); }
.btn--outline { background: transparent; color: var(--c-navy); border-color: var(--c-border-mid); }
.btn--outline:hover { border-color: var(--c-navy); color: var(--c-navy); background: var(--c-bg-alt); }
.btn--ghost { background: transparent; color: var(--c-muted); border-color: transparent; }
.btn--ghost:hover { color: var(--c-navy); background: var(--c-bg-alt); }
.btn--white { background: #fff; color: var(--c-navy); border-color: #fff; }
.btn--white:hover { background: var(--c-green-light); }
.btn--lg { padding: 14px 28px; font-size: 1rem; }
.btn--sm { padding: 7px 14px; font-size: .82rem; }
.btn--full { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  padding: 100px 0 80px;
  background: linear-gradient(160deg, #f0fdf4 0%, #fff 55%);
  overflow: hidden; position: relative;
}
.hero::before {
  content: ''; position: absolute; top: -120px; right: -160px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(134,239,172,.18) 0%, transparent 70%);
  pointer-events: none;
}
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero__tag { display: inline-flex; align-items: center; gap: 6px; background: var(--c-green-light); color: var(--c-green); padding: 5px 12px; border-radius: 100px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 24px; }
.hero__title { margin-bottom: 20px; }
.hero__body { font-size: 1.1rem; color: var(--c-muted); margin-bottom: 36px; line-height: 1.75; max-width: 52ch; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.hero__trust { display: flex; align-items: center; gap: 16px; font-size: .82rem; color: var(--c-muted); }
.hero__trust-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-border-mid); }
.hero__visual { position: relative; }
.hero__card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 24px; max-width: 380px; margin-left: auto;
}
.hero__card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hero__card-title { font-weight: 700; font-size: .95rem; }
.hero__card-badge { background: var(--c-green-light); color: var(--c-green); font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 100px; }
.hero__job { padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.hero__job:last-child { border-bottom: none; padding-bottom: 0; }
.hero__job-role { font-size: .88rem; font-weight: 600; color: var(--c-navy); margin-bottom: 3px; }
.hero__job-meta { font-size: .78rem; color: var(--c-muted); display: flex; gap: 12px; }
.hero__job-co { color: var(--c-green-vivid); font-weight: 500; }

/* ── Stats bar ─────────────────────────────────────────────── */
.stats { background: var(--c-navy); padding: 36px 0; }
.stats__grid { display: flex; justify-content: center; gap: 64px; flex-wrap: wrap; }
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--c-white); line-height: 1; margin-bottom: 4px; }
.stat__num span { color: var(--c-green-mid); }
.stat__label { font-size: .8rem; color: rgba(255,255,255,.55); letter-spacing: .05em; text-transform: uppercase; font-weight: 500; }

/* ── How it works ──────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step { border-radius: var(--r-lg); padding: 24px; border: 1px solid transparent; }
.step__num { width: 44px; height: 44px; border-radius: 12px; background: var(--c-green-light); color: var(--c-green-vivid); font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.step h3 { margin-bottom: 10px; }
.step p { font-size: .92rem; color: var(--c-muted); }

/* ── Feature grid ──────────────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.feature-card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 28px; transition: box-shadow var(--transition); }
.feature-card:hover { box-shadow: var(--shadow); }
.feature-icon { font-size: 1.5rem; margin-bottom: 14px; }
.feature-card h3 { margin-bottom: 8px; }
.feature-card p { font-size: .9rem; color: var(--c-muted); }

/* ── Pricing cards ─────────────────────────────────────────── */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: stretch; }
.plan {
  background: var(--c-bg); border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg); padding: 32px; position: relative;
  transition: box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.plan:hover { box-shadow: var(--shadow); }
.plan--featured { border-color: var(--c-green-vivid); box-shadow: 0 0 0 4px var(--c-green-light); }
.plan__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--c-green-vivid); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 100px; white-space: nowrap;
}
.plan__name { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); margin-bottom: 8px; }
.plan__price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--c-navy); line-height: 1; margin-bottom: 4px; }
.plan__price sup { font-size: 1.2rem; vertical-align: super; }
.plan__price sub { font-size: 1rem; color: var(--c-muted); }
.plan__companies { font-size: .85rem; color: var(--c-muted); margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--c-border); }
.plan__features { margin-bottom: 28px; flex: 1; }
.plan__feature { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--c-text); margin-bottom: 10px; }
.plan__check { color: var(--c-green-vivid); font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.plan__annual { font-size: .78rem; color: var(--c-muted); margin-top: 8px; margin-bottom: 4px; }
.plan__annual strong { color: var(--c-green-vivid); }
.save-badge { background: var(--c-green-light); color: var(--c-green); font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; margin-left: 4px; }

/* ── Testimonials ──────────────────────────────────────────── */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 28px; }
.testimonial__stars { color: #FBBF24; margin-bottom: 12px; font-size: .9rem; }
.testimonial__body { font-size: .92rem; color: var(--c-text); margin-bottom: 20px; line-height: 1.7; font-style: italic; }
.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--c-green-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: var(--c-green); }
.testimonial__name { font-size: .88rem; font-weight: 600; }
.testimonial__role { font-size: .78rem; color: var(--c-muted); }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; font-size: 1rem; font-weight: 600; color: var(--c-navy);
  text-align: left; gap: 16px;
}
.faq-q:hover { color: var(--c-green-vivid); }
.faq-icon { flex-shrink: 0; transition: transform var(--transition); font-size: 1.2rem; color: var(--c-muted); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }
.faq-a p { font-size: .92rem; color: var(--c-muted); padding-bottom: 20px; line-height: 1.75; }
.faq-item.open .faq-a { max-height: 1200px; }

/* ── Blog post tables ──────────────────────────────────────── */
/* Used by comparison / data tables inside blog posts. The previous
   inline-style approach used --c-border (#334155 in dark mode) which is
   too low-contrast against the dark navy bg; --c-border-mid is more
   visible in both modes. Zebra striping on tbody rows adds a second
   visual separator that survives even if borders disappear. */
.blog-table-wrap { overflow-x: auto; margin: 28px 0; }
.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r);
}
.blog-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-weight: 600;
  border-bottom: 2px solid var(--c-border-mid);
  background: var(--c-bg-alt);
  vertical-align: bottom;
}
.blog-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border-mid);
  border-right: 1px solid var(--c-border);
  vertical-align: top;
  line-height: 1.55;
}
.blog-table tbody td:last-child { border-right: none; }
.blog-table tbody tr:last-child td { border-bottom: none; }
.blog-table tbody tr:nth-child(even) td { background: rgba(0,0,0,.025); }
[data-theme="dark"] .blog-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.025); }
/* Highlighted "recommended option" row */
.blog-table tbody tr.blog-table__highlight td {
  background: rgba(34,197,94,.08);
  font-weight: 600;
}
[data-theme="dark"] .blog-table tbody tr.blog-table__highlight td { background: rgba(34,197,94,.13); }

/* ── Blog figures (images + captions) ──────────────────────── */
.blog-figure { margin: 32px 0; }
.blog-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-navy);
}
.blog-figure--narrow { max-width: 440px; margin-left: auto; margin-right: auto; }
.blog-figure figcaption {
  margin-top: 10px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--c-muted);
  text-align: center;
}

/* ── Blog share bar (auto-added to every article via base.njk) ── */
.blog-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 4px;
  padding-top: 26px;
  border-top: 1px solid var(--c-border);
}
.blog-share__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-muted);
  margin-right: 6px;
}
.blog-share__label svg { width: 18px; height: 18px; fill: var(--c-green-vivid); flex-shrink: 0; }
.blog-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.blog-share__btn svg { width: 17px; height: 17px; fill: #fff; }
.blog-share__btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15,23,42,.22); opacity: .94; }
.blog-share__btn--linkedin { background: #0A66C2; }
.blog-share__btn--x        { background: #000; }
.blog-share__btn--facebook { background: #1877F2; }
.blog-share__btn--whatsapp { background: #25D366; }
.blog-share__btn--reddit   { background: #FF4500; }
.blog-share__btn--email    { background: #64748B; }

/* ── CTA banner ────────────────────────────────────────────── */
.cta-banner { background: var(--c-green-vivid); color: #fff; padding: 72px 0; text-align: center; }
.cta-banner h2 { color: #fff; margin-bottom: 12px; }
.cta-banner p { color: rgba(255,255,255,.8); margin: 0 auto 32px; }
.cta-banner .btn--white:hover { color: var(--c-green-vivid); }

/* ── Footer ────────────────────────────────────────────────── */
.footer { background: var(--c-navy); color: rgba(255,255,255,.6); padding: 64px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.footer__brand p { font-size: .88rem; line-height: 1.7; margin-top: 14px; max-width: 28ch; }
.footer__col h4 { color: #fff; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.footer__col a { display: block; font-size: .88rem; color: rgba(255,255,255,.55); margin-bottom: 8px; transition: color var(--transition); }
.footer__col a:hover { color: var(--c-green-mid); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: .82rem; }
.footer__bottom a { color: rgba(255,255,255,.45); }
.footer__bottom a:hover { color: #fff; }
.footer-logo { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.footer-logo-icon { width: 30px; height: 30px; background: var(--c-green-vivid) url('/assets/firstpost-logo-linkedin.png') center/150% no-repeat; border-radius: 8px; }

/* ── Ad slots ──────────────────────────────────────────────── */
/* HIDDEN PRE-ADSENSE-APPROVAL. The DOM placeholders + body.fp-pro
   plumbing are kept so re-enabling is a one-line CSS change once
   AdSense approves and the AdSense JS tag is in <head>: replace
   the rule below with the styled-block version (display:flex with
   min-height/border/background) and `<ins class="adsbygoogle">`
   units inside each .ad-slot. body.fp-pro hides ads for paid users
   (see app.js consent + plan logic). */
.ad-slot { display: none; }
.ad-slot--leaderboard { width: 100%; margin: 32px 0; }
.ad-slot--sidebar     { width: 300px; }
.ad-slot--banner      { width: 100%; }
.ad-slot--inline      { margin: 16px 0; }

/* ── Cookie consent banner ────────────────────────────────────
   Shown once on first visit until user clicks Accept / Essentials.
   Choice stored in localStorage.fp_cookie_consent. Replaceable
   with Google Funding Choices once the AdSense console unlocks. */
#fp-cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 9999;
  background: var(--c-bg, #fff);
  border: 1px solid var(--c-border, #e0e0e0);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  padding: 16px 20px;
  max-width: 720px;
  margin: 0 auto;
}
.fp-cookie-banner__inner {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.fp-cookie-banner__text {
  font-size: .85rem;
  margin: 0;
  flex: 1 1 320px;
  line-height: 1.5;
  color: var(--c-text);
}
.fp-cookie-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  #fp-cookie-banner {
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 12px 12px 0 0;
    max-width: none;
  }
}

/* ── Aside cards (shared across pages - backgrounds set inline per instance) */
.aside-card { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 28px; margin-bottom: 20px; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 40px; box-shadow: var(--shadow); }
.form-group { margin-bottom: 22px; }
.form-group label:not(.check-item) { display: block; font-size: .88rem; font-weight: 600; color: var(--c-navy); margin-bottom: 7px; }
.form-group label .req { color: var(--c-error); margin-left: 3px; }
.form-hint { font-size: .78rem; color: var(--c-muted); margin-top: 5px; }
.form-error { font-size: .78rem; color: var(--c-error); margin-top: 5px; display: none; }
.form-group.has-error .form-error { display: block; }
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea { border-color: var(--c-error); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
  width: 100%; padding: 11px 2.5rem 11px 14px;
  border: 1.5px solid var(--c-border); border-radius: var(--r);
  font-size: .95rem; color: var(--c-text); background: var(--c-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
/* Custom chevron for <select> so the arrow sits consistently close to the
   right edge across iOS/Android/desktop. Without this the browser's native
   widget respects the oversized right padding and floats the arrow inward. */
select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--c-green-vivid);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}
textarea { resize: vertical; min-height: 110px; }

/* Checkboxes and radios */
.check-group { display: flex; flex-direction: column; gap: 12px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.check-item { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 24px; }
.check-item input[type="checkbox"],
.check-item input[type="radio"] {
  width: 17px; height: 17px; min-width: 17px;
  accent-color: var(--c-green-vivid); cursor: pointer; flex-shrink: 0;
  margin: 0;
}
.check-item span { font-size: .9rem; color: var(--c-text); line-height: 1.3; }

/* Chip-cloud variant of .check-grid - flex-wrap of pill-shaped buttons.
   Used for the Matched jobs "Your feed criteria" card to render industries,
   seniority, and work-arrangement multi-selects as compact toggles instead
   of a tall checkbox column. The underlying inputs stay the source of truth
   so existing form-collection logic keeps working unchanged. */
.chip-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-cloud .check-item {
  margin: 0; padding: 6px 14px; border: 1px solid var(--c-border);
  border-radius: 100px; background: var(--c-bg);
  transition: background var(--transition), border-color var(--transition);
  user-select: none; min-height: 32px;
}
.chip-cloud .check-item:hover { background: var(--c-bg-alt); }
.chip-cloud .check-item:has(input:checked) {
  background: var(--c-green-light); border-color: var(--c-green-mid);
}
.chip-cloud .check-item input[type="checkbox"],
.chip-cloud .check-item input[type="radio"] { display: none; }
.chip-cloud .check-item span { font-size: .85rem; }

[data-theme="dark"] .chip-cloud .check-item:has(input:checked) {
  background: rgba(50, 130, 100, .25);
  border-color: var(--c-green-mid);
}

/* Per-section collapsible rows for the "Your feed criteria" card. Each
   subsection (titles, industries, seniority, etc.) is its own native
   <details>/<summary> so users can expand only the field they want to
   edit. Summary line shows the saved value at a glance via .summary-chip
   pills built dynamically by _updatePerSectionSummaries(). */
.pref-collapse {
  border-top: 1px solid var(--c-border);
  /* Bigger vertical breathing room between collapsed rows so the card
     doesn't feel like an HTML spreadsheet. */
  margin-top: 6px;
  padding-top: 6px;
}
.pref-collapse:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.pref-collapse > summary,
.pref-collapse > summary * {
  cursor: pointer;                         /* hand-cursor everywhere on the row */
}
.pref-collapse > summary {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 6px;                       /* generous click target */
  user-select: none;
  border-radius: var(--r-md);
  transition: background var(--transition);
  /* Hide the native disclosure marker across all engines. Setting
     list-style:none on a flex container handles WebKit + Firefox; the
     ::-webkit-details-marker rule covers older WebKit; ::marker covers
     standards-compliant browsers. Belt + braces. */
  list-style: none;
}
.pref-collapse > summary::-webkit-details-marker { display: none; }
.pref-collapse > summary::marker { content: ''; display: none; }
.pref-collapse > summary:hover { background: rgba(0, 0, 0, .03); }
[data-theme="dark"] .pref-collapse > summary:hover { background: rgba(255, 255, 255, .04); }

.pref-collapse__label {
  font-size: .92rem; font-weight: 600;
  color: var(--c-text);
  flex-shrink: 0; min-width: 130px;
}
/* Trailing colon after the label, e.g. "Industries:". Implemented in CSS
   so it can't drift out of sync if a label is edited in HTML. */
.pref-collapse__label::after {
  content: ':';
  margin-left: 1px;
  color: var(--c-muted);
}
.pref-collapse__summary {
  font-size: .85rem; color: var(--c-muted);
  flex: 1; min-width: 0;
}
/* When the row is expanded, fade the summary so the editor body is the
   visual focal point. */
.pref-collapse[open] > summary > .pref-collapse__summary { opacity: .55; }

.pref-collapse__chevron {
  flex-shrink: 0;
  width: 14px; height: 14px;
  transition: transform 0.15s ease;
  /* SVG chevron via background - single source of truth, no double-arrow
     because we're not using any text glyph. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,5 7,9 11,5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.pref-collapse[open] > summary > .pref-collapse__chevron { transform: rotate(180deg); }

.pref-collapse__body {
  padding: 4px 6px 18px 6px;
}

/* Inline summary pills - small read-only badges displayed in the collapsed
   summary row. Visually distinct from the active chip-cloud chips (gray
   instead of green) since they're informational, not interactive. Spacing
   between chips comes from explicit margin (not flex `gap`) so the chip
   never visually merges with its neighbour even if a parent rule strips
   the flex layout. */
.summary-chip {
  display: inline-block;
  padding: 3px 10px;
  margin: 0 6px 4px 0;
  border-radius: 100px;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: .78rem; font-weight: 500;
  white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
.summary-chip--more {
  background: transparent; border-color: transparent;
  color: var(--c-muted); font-style: italic;
  padding-left: 2px;
}
.summary-chip--empty {
  background: transparent; border-color: transparent;
  color: var(--c-muted); font-style: italic;
  padding-left: 0;
}

/* Mobile layout for the criteria card collapsibles. Below 640px the
   horizontal label-summary-chevron line doesn't fit cleanly with chip
   pills wide enough to read, so we drop the chips onto a second line
   and keep the label + chevron on the first. Also shrinks card padding
   so the content has more horizontal room. */
@media (max-width: 640px) {
  .dash-card { padding: 18px; }

  .pref-collapse > summary {
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 4px;
    padding: 14px 4px;
  }
  .pref-collapse__label { min-width: 0; }
  .pref-collapse__summary {
    flex-basis: 100%;
    order: 3;            /* push chips onto a second row below label/chevron */
    margin-top: 2px;
  }
  .pref-collapse__chevron { margin-left: auto; }

  /* Tighter chips so even a long industry label doesn't blow out the row */
  .summary-chip {
    max-width: 100%;
    font-size: .76rem;
    padding: 3px 9px;
    margin: 0 5px 4px 0;
  }
}

/* File upload */
.file-drop {
  border: 2px dashed var(--c-border-mid); border-radius: var(--r-lg);
  padding: 36px 24px; text-align: center; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: var(--c-bg-alt);
}
.file-drop:hover, .file-drop.drag-over { border-color: var(--c-green-vivid); background: var(--c-green-light); }
.file-drop__icon { font-size: 2rem; margin-bottom: 10px; }
.file-drop__text { font-size: .9rem; color: var(--c-muted); margin-bottom: 6px; }
.file-drop__sub { font-size: .78rem; color: var(--c-subtle); }
.file-drop__name { font-size: .88rem; font-weight: 600; color: var(--c-green-vivid); margin-top: 10px; display: none; }

/* Tags input */
.tags-input-wrap { border: 1.5px solid var(--c-border); border-radius: var(--r); padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 48px; cursor: text; transition: border-color var(--transition), box-shadow var(--transition); }
.tags-input-wrap:focus-within { border-color: var(--c-green-vivid); box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.tag-pill { background: var(--c-green-light); color: var(--c-green); font-size: .8rem; font-weight: 600; padding: 3px 10px 3px 10px; border-radius: 100px; display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.tag-pill button { background: none; border: none; cursor: pointer; color: var(--c-green); font-size: 1rem; line-height: 1; padding: 0; display: flex; }

/* ── WS6 per-company SEO pages (/company/<slug>) ───────────────────────────── */
.company-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 1.75rem; }
.company-body { max-width: 760px; margin-inline: auto; }
.company-intro { font-size: 1.05rem; color: var(--c-text); line-height: 1.7; }
.company-block { margin-top: 2.5rem; }
.company-block > h2 { font-size: 1.4rem; margin: 0 0 .25rem; }
.company-block > p { color: var(--c-muted); margin: 0 0 .9rem; }
.company-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: .9rem 0 0; padding: 0; list-style: none; }
.company-chips li { background: var(--c-green-light); color: var(--c-green); font-size: .875rem; font-weight: 600; padding: 6px 14px; border-radius: 100px; }
.company-chips--loc li { background: var(--c-bg-alt); color: var(--c-text); border: 1px solid var(--c-border); font-weight: 500; }
.company-cta-card { margin-top: 3rem; padding: 2.25rem 2rem; border-radius: var(--r-lg); background: var(--c-bg-green); border: 1px solid var(--c-green-mid); text-align: center; }
.company-cta-card h2 { margin: 0 0 .5rem; font-size: 1.5rem; }
.company-cta-card p { max-width: 540px; margin: 0 auto 1.5rem; color: var(--c-text); line-height: 1.65; }
.company-disclaimer { margin-top: 2rem; font-size: .82rem; color: var(--c-subtle); line-height: 1.6; }
[data-theme="dark"] .company-chips li { background: rgba(22,163,74,.18); color: var(--c-green-mid); }
[data-theme="dark"] .company-chips--loc li { background: rgba(255,255,255,.04); color: var(--c-text); }
[data-theme="dark"] .company-cta-card { background: rgba(22,163,74,.10); }
/* The input is contenteditable; default flow wraps text on width which
   makes characters stack vertically when min-width is tight. Force the
   input to keep text on a single line so a 2-px-wide caret slot can't
   blow up vertically and stretch its sibling pills. */
.tags-input { white-space: nowrap; overflow: visible; }
/* When the input sits BETWEEN pills (caret positioned via arrow keys or
   click), the :empty pseudo selector handles the cursor-only state
   (a 2px slice, so adjacent pills don't visibly move). Once the user
   starts typing, width: max-content sizes the input to exactly its
   typed text — no flex distribution involved — so the surrounding
   pills stay packed left and don't get shoved to the right edge.
   First fix tried flex: 0 1 auto but was overridden somewhere on the
   dashboard preferences card; this version uses !important on
   flex-grow + an explicit width to guarantee no row-width absorption.
   User-reported regression on 2026-05-06. */
.tags-input.between-pills {
  flex: 0 0 auto !important;
  width: max-content;
  /* No min-width floor — let the input size to its actual typed content
     so the visual gap between the typed text and the next pill is the
     6px container gap, not a 60px+ phantom block. The :empty state below
     pins the cursor-only width to 2px for caret visibility, so we don't
     need a min-width fallback for the typing state. */
  min-width: 0;
  max-width: 100%;
  padding: 0 2px;
  margin: 0;
}
.tags-input.between-pills:empty {
  min-width: 0;
  width: 2px;
  flex: 0 0 2px !important;
  padding: 0;
  margin: 0;
}
.tags-input { border: none; outline: none; font-family: var(--font-body); font-size: .9rem; color: var(--c-text); min-width: 120px; background: transparent; flex: 1; padding: 2px 0; }

/* CV-derived title suggestions block (signup step 3 + dashboard prefs).
   Renders above the jobTitles tags-input. Each chip is a click-to-add. */
.cv-suggestions { background: var(--c-green-light); border: 1px solid var(--c-green-mid); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px; }
.cv-suggestions__header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cv-suggestions__icon { font-size: .95rem; }
.cv-suggestions__title { font-size: .8rem; font-weight: 600; color: var(--c-green); flex: 1; }
.cv-suggestions__close { -webkit-appearance: none; appearance: none; background: none; border: none; cursor: pointer; color: var(--c-green); font-size: 1.2rem; line-height: 1; padding: 0 4px; opacity: .7; }
.cv-suggestions__close:hover { opacity: 1; }
.cv-suggestions__chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Chip styling - visual language matches .tag-pill (green-light fill, green
   text, pill radius) so it sits naturally next to existing tag-pills. The
   appearance reset is critical: without it, browser user-agent button
   styling bleeds through on some pages (Chrome on macOS dark mode in
   particular renders <button> with a 3px square radius and grey fill that
   ignores `border-radius` until appearance:none is applied). */
.cv-chip {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--c-green-light); color: var(--c-green);
  border: 1px solid var(--c-green-mid);
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  padding: 5px 12px; border-radius: 100px;
  cursor: pointer; line-height: 1.2; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.cv-chip:hover { background: var(--c-green); color: #fff; border-color: var(--c-green); transform: translateY(-1px); }
.cv-chip:focus-visible { outline: 2px solid var(--c-green-vivid); outline-offset: 2px; }
/* Inherit the chip's font-size so the + sits on the same baseline as the
   text. The 1px upward nudge compensates for the asymmetric vertical
   bearings in the '+' glyph (most sans-serif fonts render '+' centred on
   x-height rather than cap-height). */
.cv-chip__plus { font-weight: 700; line-height: 1; opacity: .85; transform: translateY(-1px); }
.cv-chip:hover .cv-chip__plus { opacity: 1; }
[data-theme="dark"] .cv-suggestions { background: rgba(22,163,74,.10); border-color: var(--c-green-mid); }
[data-theme="dark"] .cv-chip { background: rgba(22,163,74,.18); color: var(--c-green-mid); border-color: var(--c-green-mid); }
[data-theme="dark"] .cv-chip:hover { background: var(--c-green); color: #fff; border-color: var(--c-green); }

/* "Broaden search" hint — amber nudge, visually distinct from the green CV chips,
   shown on a saved search with <=10 backend-stamped matches. */
.broaden-hint {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(217,119,6,.08); border: 1px solid rgba(217,119,6,.30);
  border-radius: var(--r); padding: 10px 12px; margin-bottom: 12px;
}
.broaden-hint__icon { font-size: .95rem; line-height: 1.4; }
.broaden-hint__body { flex: 1; min-width: 0; }
.broaden-hint__intro { font-size: .8rem; font-weight: 600; color: var(--c-amber-text); margin-bottom: 8px; }
.broaden-hint__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.broaden-chip {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(217,119,6,.10); color: var(--c-amber-text);
  border: 1px solid rgba(217,119,6,.35);
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  padding: 5px 12px; border-radius: 100px;
  cursor: pointer; line-height: 1.2;
  /* NOT nowrap. The title chip must name EVERY stem it will add ("no clicked A,B but
     silently got C too" — dashboard-search.js), and _TITLE_MAX=3 long role families
     ("Also match: Software Engineer, Site Reliability Engineer, Platform Engineer") ran
     straight off a nowrap pill. The industry chip never hit this because it caps at 2.
     Wrapping keeps the promise the label makes; truncating would quietly break it. */
  white-space: normal; max-width: 100%; text-align: left; overflow-wrap: anywhere;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.broaden-chip:hover { background: var(--c-amber-hover); color: #fff; border-color: var(--c-amber-hover); transform: translateY(-1px); }
.broaden-chip:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }
.broaden-chip__icon { font-weight: 700; line-height: 1; opacity: .85; }
.broaden-chip:hover .broaden-chip__icon { opacity: 1; }
[data-theme="dark"] .broaden-hint { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.35); }
[data-theme="dark"] .broaden-hint__intro { color: var(--c-amber-mid); }
[data-theme="dark"] .broaden-chip { background: rgba(217,119,6,.20); color: var(--c-amber-mid); border-color: rgba(252,211,77,.45); }
[data-theme="dark"] .broaden-chip:hover { background: var(--c-amber-hover); color: #fff; border-color: var(--c-amber-hover); }
[data-theme="dark"] .broaden-chip:focus-visible { outline-color: var(--c-amber-mid); }

/* ── "Did you mean" location diagnostics ────────────────────────────────────
   A location pref that resolves to nothing matches nothing, silently. These
   states say so where the user typed it.

   Deliberately the SAME amber language as .broaden-hint above, including its
   measured contrast tokens: --c-amber-text on the light tint, --c-amber-mid on
   dark surfaces. Both components say "this search may be finding you less than
   you think", so they should not look like two unrelated systems.

   The unrecognised pill keeps .tag-pill's geometry and overrides only colour,
   so it stays the same shape/size as its neighbours — the row must not reflow
   when a diagnostic arrives. Colour is NOT the only signal: the pill also
   carries a dotted underline and a title/aria description, because amber-vs-
   green is invisible to a red-green colour-blind user. */
/* Visually hidden, still announced. The standard clip-rect recipe rather than
   display:none or visibility:hidden, both of which remove the node from the
   accessibility tree — which would defeat the point. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Selectors DOUBLE the class (.tag-pill.tag-pill--unrecognised) on purpose.
   `[data-theme="dark"] .tag-pill { color: var(--c-green-mid) }` lives ~650
   lines further down; at equal specificity (0,2,0) the LATER rule wins, so the
   single-class dark override lost and the "unrecognised" pill rendered GREEN in
   dark mode — the feature's primary signal, dead for every dark-mode user.
   Doubling the class makes these (0,2,0)/(0,3,0) vs (0,1,0)/(0,2,0) and removes
   the dependence on source order entirely. Do not "simplify" it back. */
.tag-pill.tag-pill--unrecognised {
  background: rgba(217,119,6,.12);
  color: var(--c-amber-text);
  text-decoration: underline dotted currentColor 1.5px;
  text-underline-offset: 2px;
}
.tag-pill.tag-pill--unrecognised button { color: var(--c-amber-text); }
[data-theme="dark"] .tag-pill.tag-pill--unrecognised { color: var(--c-amber-mid); background: rgba(217,119,6,.22); }
[data-theme="dark"] .tag-pill.tag-pill--unrecognised button { color: var(--c-amber-mid); }

.loc-diag { margin-top: 8px; }
.loc-diag:empty { display: none; margin-top: 0; }
.loc-diag__note {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(217,119,6,.08); border: 1px solid rgba(217,119,6,.25);
  border-radius: var(--r); padding: 8px 10px; margin-bottom: 8px;
  font-size: .8rem; line-height: 1.45; color: var(--c-amber-text);
}
[data-theme="dark"] .loc-diag__note { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.35); color: var(--c-amber-mid); }
.loc-diag__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.loc-chip {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(217,119,6,.10); color: var(--c-amber-text);
  border: 1px solid rgba(217,119,6,.35);
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  padding: 5px 12px; border-radius: 100px;
  cursor: pointer; line-height: 1.2;
  /* Wraps for the same reason .broaden-chip does: the chip names the exact
     replacement, and a long one ("Saint Vincent and the Grenadines") ran off a
     nowrap pill. Truncating would hide the very word the user must judge. */
  white-space: normal; max-width: 100%; text-align: left; overflow-wrap: anywhere;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.loc-chip:hover { background: var(--c-amber-hover); color: #fff; border-color: var(--c-amber-hover); transform: translateY(-1px); }
.loc-chip:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }
.loc-chip[disabled] { opacity: .55; cursor: default; transform: none; }
[data-theme="dark"] .loc-chip { background: rgba(217,119,6,.20); color: var(--c-amber-mid); border-color: rgba(252,211,77,.45); }
[data-theme="dark"] .loc-chip:hover { background: var(--c-amber-hover); color: #fff; border-color: var(--c-amber-hover); }
[data-theme="dark"] .loc-chip:focus-visible { outline-color: var(--c-amber-mid); }
/* Military trade helper — collapsible branch/trade selector above job titles */
.military-helper { margin-bottom: 10px; }
.military-helper__toggle {
  -webkit-appearance: none; appearance: none; background: none; border: none;
  cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--c-green-vivid);
  padding: 0; text-decoration: none;
}
.military-helper__toggle:hover { text-decoration: underline; }
.military-helper__body {
  background: var(--c-green-light); border: 1px solid var(--c-green-mid);
  border-radius: var(--r); padding: 12px 14px; margin-top: 8px;
}
.military-helper__selects { display: flex; gap: 10px; margin-bottom: 10px; }
.military-helper__selects select {
  flex: 1; font-family: var(--font-body); font-size: .85rem;
  padding: 8px 10px; border: 1.5px solid var(--c-border); border-radius: var(--r);
  background: var(--c-bg); color: var(--c-text); cursor: pointer;
}
.military-helper__selects select:disabled { opacity: .5; cursor: not-allowed; }
.military-helper__chips { display: flex; flex-wrap: wrap; gap: 8px; }
[data-theme="dark"] .military-helper__body { background: rgba(22,163,74,.10); border-color: var(--c-green-mid); }
[data-theme="dark"] .military-helper__selects select { background: var(--c-bg); border-color: var(--c-border); }
@media (max-width: 480px) { .military-helper__selects { flex-direction: column; } }
/* Military trade translator (landing page) */
.trade-translator { background: var(--c-bg-alt); border: 1.5px solid var(--c-border); border-radius: var(--r-lg, 12px); padding: 28px 24px; margin-bottom: 40px; }
.trade-translator h2 { margin-bottom: 20px; }
.mil-narrow { max-width: 780px; }
.mil-byline { font-size: .78rem; color: var(--c-muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.mil-section-heading { font-size: 1.25rem; margin: 56px 0 0; }
.mil-section-heading + p { margin: 16px 0 28px; }
.mil-section-heading + .mil-spacer { height: 28px; }
.mil-section-heading + .mil-spacer + .steps { margin-top: 0; }
.trade-translator__selects { display: flex; gap: 12px; margin-bottom: 16px; }
.trade-translator__selects select {
  -webkit-appearance: none; appearance: none;
  flex: 1; font-family: var(--font-body); font-size: .95rem;
  padding: 12px 36px 12px 14px; border: 1.5px solid var(--c-border); border-radius: var(--r);
  background: var(--c-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--c-text); cursor: pointer;
}
.trade-translator__selects select:disabled {
  opacity: .45; cursor: not-allowed; color: var(--c-muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
.trade-translator__results { min-height: 48px; }
.trade-translator__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.trade-translator__chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--c-green-light); color: var(--c-green); font-size: .88rem;
  font-weight: 600; padding: 6px 14px; border-radius: 100px; border: none; cursor: default;
}
.trade-translator__empty { font-size: .9rem; color: var(--c-muted); padding: 8px 0; }
.trade-translator__cta { margin-top: 4px; }
.blog-table tbody tr.branch-header td { font-weight: 700; background: var(--c-bg-green, rgba(22,163,74,.06)) !important; font-size: .95rem; letter-spacing: .02em; color: var(--c-green); }
[data-theme="dark"] .blog-table tbody tr.branch-header td { background: rgba(22,163,74,.10) !important; color: var(--c-green-mid); }
[data-theme="dark"] .trade-translator { background: var(--c-bg-alt); border-color: var(--c-border); }
[data-theme="dark"] .trade-translator__selects select {
  background-color: var(--c-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
[data-theme="dark"] .trade-translator__chip { background: rgba(22,163,74,.18); color: var(--c-green-mid); }
@media (max-width: 480px) { .trade-translator__selects { flex-direction: column; } .trade-translator { padding: 20px 16px; } }
/* Matched-jobs "no signal" empty state - surfaced when the user has
   neither typed jobTitles nor a CV that produced suggestions. Two CTAs
   nudge them toward the title input or the CV panel. */
.jobs-empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 24px; gap: 12px;
}
.jobs-empty-state__icon { font-size: 2.4rem; line-height: 1; }
.jobs-empty-state__title { margin: 0; font-size: 1.1rem; color: var(--c-text); }
.jobs-empty-state__body { margin: 0; max-width: 420px; font-size: .9rem; color: var(--c-muted); line-height: 1.5; }
.jobs-empty-state__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
@media (max-width: 480px) {
  .jobs-empty-state { padding: 36px 16px; }
  .jobs-empty-state__actions { flex-direction: column; width: 100%; }
  .jobs-empty-state__actions .btn { width: 100%; }
}

/* "Reading your CV…" status row shown on signup while we poll for the
   extractor's result.  Subtle, no chips - replaced by the chip block once
   suggestions arrive. */
.cv-suggestions--loading { display: flex; align-items: center; gap: 8px; }
.cv-suggestions--loading .cv-suggestions__title { font-weight: 500; }
.cv-suggestions__spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid var(--c-green-mid); border-top-color: transparent;
  border-radius: 50%; animation: cvSpin .9s linear infinite;
}
@keyframes cvSpin { to { transform: rotate(360deg); } }

/* Progress steps
   Layout: [step(32px)] [line(flex:1)] [step(32px)] [line] [step] [line] [step]
   Each step is a fixed 32px-wide flex column so labels overflow symmetrically.
   Line margin-top centres it with the dot: (32px - 2px) / 2 = 15px.          */
/* Plan feature badge (shown on restricted features) */
.plan-badge { display: inline-block; font-size: .65rem; font-weight: 700; padding: 1px 6px; border-radius: 100px; background: var(--c-green-light); color: var(--c-green); border: 1px solid var(--c-green-mid); vertical-align: middle; margin-left: 4px; }
.plan-badge--label { font-size: .6rem; }
/* Dim locked sections without affecting the upgrade notice child */
.plan-locked { pointer-events: none; cursor: not-allowed; }
.plan-locked > *:not(.plan-locked-notice) { opacity: .5; }
.plan-locked input, .plan-locked textarea, .plan-locked select {
  background: var(--c-bg-alt) !important; color: var(--c-subtle) !important;
  border-color: var(--c-border) !important; cursor: not-allowed !important;
}
/* Amber notice - must stay fully opaque inside a dimmed parent */
.plan-locked-notice {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; color: #92400e; font-weight: 600;
  background: #fef3c7; border: 1px solid #fcd34d; border-radius: var(--r);
  padding: 6px 12px; margin-top: 10px;
}

/* Progress steps
   Layout: [step(32px)] [line(flex:1)] [step(32px)] [line] [step] [line] [step]
   Each step is a fixed 32px-wide flex column so labels overflow symmetrically.
   Line margin-top centres it with the dot: (32px - 2px) / 2 = 15px.          */
.progress-steps { display: flex; align-items: flex-start; margin-bottom: 52px; }
.progress-step {
  flex-shrink: 0; width: 32px;
  display: flex; flex-direction: column; align-items: center;
}
.progress-step__dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
  border: 2px solid var(--c-border); background: var(--c-bg); color: var(--c-muted);
  transition: all var(--transition); position: relative; z-index: 1;
  cursor: pointer; flex-shrink: 0;
}
.progress-step__dot:hover:not(.active):not(.locked) { border-color: var(--c-green-mid); }
.progress-step__dot.locked { opacity: .35; cursor: not-allowed; pointer-events: none; }
.progress-step__dot.active { border-color: var(--c-green-vivid); background: var(--c-green-vivid); color: #fff; cursor: default; }
.progress-step__dot.done  { border-color: var(--c-green-vivid); background: var(--c-green-light); color: var(--c-green-vivid); }
.progress-step__line { flex: 1; height: 2px; background: var(--c-border); margin-top: 15px; transition: background var(--transition); min-width: 12px; }
.progress-step__line.done { background: var(--c-green-vivid); }
/* Labels sit below the dot, overflow the 32px step symmetrically */
.progress-step__label {
  margin-top: 8px; font-size: .72rem; font-weight: 600; color: var(--c-muted);
  white-space: nowrap; text-align: center;
  /* Center text under the 32px dot even when label is wider */
  position: relative; left: 50%; transform: translateX(-50%);
}
.progress-step__label.active { color: var(--c-green-vivid); }

/* ── Dashboard ─────────────────────────────────────────────── */
.dash-layout { display: grid; grid-template-columns: 240px 1fr; gap: 0; min-height: calc(100vh - var(--nav-h)); align-items: stretch; overflow-x: hidden; }
.dash-sidebar { background: var(--c-bg-alt); border-right: 1px solid var(--c-border); padding: 32px 0; min-height: calc(100vh - var(--nav-h)); }
.dash-sidebar__menu a { display: flex; align-items: center; gap: 10px; padding: 10px 24px; font-size: .9rem; font-weight: 500; color: var(--c-muted); border-left: 3px solid transparent; transition: all var(--transition); }
.dash-sidebar__menu a:hover { color: var(--c-navy); background: var(--c-border); }
.dash-sidebar__menu a.active { color: var(--c-green-vivid); border-left-color: var(--c-green-vivid); background: var(--c-green-light); }
.dash-sidebar__icon { font-size: 1rem; }
.dash-main { padding: 40px; overflow-x: hidden; min-width: 0; }
.dash-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 28px; margin-bottom: 24px; }
.dash-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dash-card h3 { font-size: 1rem; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 100px; }
.status-badge--active { background: var(--c-green-light); color: var(--c-green); }
.status-badge--pending { background: #FEF9C3; color: #854D0E; }
.status-badge--inactive { background: var(--c-bg-alt); color: var(--c-muted); }
.change-notice { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--r); padding: 12px 16px; font-size: .85rem; color: #92400E; margin-bottom: 24px; display: flex; align-items: flex-start; gap: 10px; }
.change-notice__icon { flex-shrink: 0; margin-top: 1px; }

/* New-roles pill (dashboard freshness) — non-disruptive "tap to load" prompt
   shown on return-to-tab when the feed advanced. Sticky so it stays reachable
   while the user is scrolled down the list. Visibility toggled inline in JS. */
.new-jobs-pill {
  display: flex; align-items: center; gap: 6px;
  width: fit-content; max-width: 100%;
  margin: 0 auto 14px;
  position: sticky; top: 8px; z-index: 10;
  padding: 9px 18px;
  background: var(--c-green-vivid); color: #fff;
  border: none; border-radius: 999px;
  font-size: .85rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.new-jobs-pill:hover  { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,0,0,.24); }
.new-jobs-pill:active { transform: translateY(0); }

/* ── Page hero (inner pages) ───────────────────────────────── */
.page-hero { background: var(--c-bg-green); padding: 64px 0 56px; border-bottom: 1px solid var(--c-border); }
.page-hero h1 { margin-bottom: 12px; }
.page-hero .lead { margin-bottom: 0; }

/* ── Legal pages ───────────────────────────────────────────── */
.legal-body { max-width: 760px; }
.legal-body h2 { font-size: 1.25rem; margin: 40px 0 12px; }
.legal-body h3 { font-size: 1rem; margin: 24px 0 8px; }
.legal-body p { font-size: .93rem; color: var(--c-text); margin-bottom: 14px; line-height: 1.8; }
.legal-body ul { margin: 0 0 14px 20px; list-style: disc; }
.legal-body ul li { font-size: .93rem; color: var(--c-text); margin-bottom: 6px; line-height: 1.75; }
.legal-body ol { margin: 0 0 14px 28px; list-style: decimal; }
.legal-body ol li { font-size: .93rem; color: var(--c-text); margin-bottom: 6px; line-height: 1.75; }
.legal-body a { color: var(--c-green-vivid); }
.legal-meta { font-size: .82rem; color: var(--c-muted); margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--c-border); }

/* ── Contact page ──────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: start; }
.contact-info__item { display: flex; gap: 14px; margin-bottom: 28px; }
.contact-info__icon { width: 42px; height: 42px; border-radius: 10px; background: var(--c-green-light); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.contact-info__label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); margin-bottom: 3px; }
.contact-info__value { font-size: .95rem; color: var(--c-navy); font-weight: 500; }
.contact-info__value a { color: var(--c-navy); }

/* ── Alert / notice ────────────────────────────────────────── */
.alert { padding: 14px 18px; border-radius: var(--r); font-size: .88rem; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 10px; }
.alert--success { background: var(--c-green-light); color: var(--c-green); border: 1px solid var(--c-green-mid); }
.alert--error { background: #FEF2F2; color: var(--c-error); border: 1px solid #FECACA; }
.alert--info { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
/* L15 (security audit pass 5): replaces the inline-cssText positioning
   that showAlert() used to set when hoisted to <body>. */
.alert--toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  max-width: 560px;
  width: calc(100% - 32px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  margin: 0;
}

/* ── Prevent horizontal overflow ───────────────────────────── */
/* clip: prevents scroll container creation (unlike hidden), so transforms
   on sticky/fixed children (e.g. hamburger X rotation) are never clipped */
html, body { overflow-x: clip; }

/* ── Touch UX: no tap flash, respect tap targets ───────────── */
a, button, label, [role="button"],
input[type="checkbox"], input[type="radio"] { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"] { touch-action: manipulation; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 100%; margin: 0 auto; }
  .steps { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .dash-layout { grid-template-columns: 1fr; }
  .dash-sidebar { display: none; }
}
@media (max-width: 640px) {
  .section { padding: 60px 0; }
  /* nav__links and nav-toggle handled by the 768px nav block above */
  .footer__grid { grid-template-columns: 1fr; }
  .stats__grid { gap: 32px; }
  .hero { padding: 64px 0 56px; }
  .form-card { padding: 24px; }
}

/* ══════════════════════════════════════════════════════════════
   Mobile enhancements
   ══════════════════════════════════════════════════════════════ */

/* ── Medium-width nav (769–1024px) — tighten gaps when lang-picker is present ── */
@media (max-width: 1024px) and (min-width: 769px) {
  .nav__links { gap: 18px; }
  .nav__links a { font-size: .84rem; }
  .nav__actions { gap: 10px; }
  .nav__actions .btn--ghost,
  .nav__actions .btn--sm { padding: 6px 10px; font-size: .78rem; }
}

/* ── Mobile nav drawer (≤768px: tablets + phones) ──────────── */
/* Nav-specific breakpoint separate from other 640px mobile styles */
@media (max-width: 768px) {
  /* Collapse links, show hamburger */
  .nav__links { display: none; }
  .nav-toggle  { display: flex; flex-direction: column; }

  /* Push actions right; hide auth buttons - they're inside the drawer */
  .nav__actions { margin-left: auto; gap: 6px; }
  .nav__inner:has(.nav-toggle) .nav__actions .btn { display: none; }
  /* Let minimal-nav "back to home" button text wrap on narrow screens */
  .nav__actions .btn--ghost { white-space: normal; text-align: right; }

  /* Hamburger: never shrink, gap from dark-toggle */
  .nav-toggle { flex-shrink: 0; margin-left: 12px; }

  /* Drawer open state */
  .nav__links--open {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 8px 32px rgba(12,26,46,.15);
    padding: 0 0 20px;
    z-index: 99;
    animation: navSlideDown .2s ease;
    /* Max-height + scroll in case content is tall */
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  /* Full-width link rows */
  .nav__links a {
    display: block;
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
    white-space: normal;
    width: 100%;
  }
  /* Background only in drawer context, never on desktop */
  .nav__links--open a:hover,
  .nav__links--open a.active { color: var(--c-green-vivid); background: var(--c-bg-alt); }
  /* Keep primary CTA green on hover - the rule above would grey it out */
  .nav__links--open .nav__mobile-auth .btn--primary:hover {
    background: var(--c-green);
    border-color: var(--c-green);
    color: #fff;
    box-shadow: 0 4px 12px rgba(22,163,74,.3);
  }

  /* Auth button block at bottom of drawer */
  .nav__mobile-auth {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 24px 0;
  }
  /* Override display:block set by the nav link rule above */
  .nav__mobile-auth .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  /* Keep primary button text white in dark mode */
  .nav__mobile-auth .btn--primary { color: #fff !important; }

  /* Hamburger → X animation (SVG bars, transforms stay inside SVG viewport) */
  .nav-toggle[aria-expanded="true"] .hb-bar--1 { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .hb-bar--2 { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .hb-bar--3 { transform: translateY(-6px) rotate(-45deg); }

  /* Logo: shrink margin on narrow screens so hamburger always fits */
  .nav__logo { margin-right: 16px; }
}

/* Hide drawer-only auth on wider screens */
@media (min-width: 769px) { .nav__mobile-auth { display: none; } }

@keyframes navSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Semi-transparent backdrop behind open drawer */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0; top: var(--nav-h);
  background: rgba(12,26,46,.3);
  backdrop-filter: blur(2px);
  z-index: 98;
}
.nav-overlay--visible { display: block; }

/* Dark mode drawer - scoped to ≤768px to avoid desktop hover side-effects */
@media (max-width: 768px) {
  [data-theme="dark"] .nav__links--open  { background: var(--c-bg); }
  [data-theme="dark"] .nav__links a      { color: var(--c-text); border-bottom-color: var(--c-border); }
  [data-theme="dark"] .nav__links--open a:hover,
  [data-theme="dark"] .nav__links--open a.active { background: var(--c-bg-alt); }
}

/* ── Prevent iOS auto-zoom on input focus (≥16px required) ─── */
@media (max-width: 640px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], textarea, select, .tags-input { font-size: 16px; }
}

/* ── Tighter spacing on small screens ───────────────────────── */
@media (max-width: 480px) {
  .container      { padding: 0 16px; }
  .form-card      { padding: 20px 16px; }
  .section        { padding: 48px 0; }
  .section-header { margin-bottom: 32px; }
  .page-hero      { padding: 44px 0 36px; }
}

/* ── Hero: full-width CTAs, tidy trust row ──────────────────── */
@media (max-width: 640px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .hero__trust { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .hero__trust-dot { display: none; }
  .hero__trust span { text-align: center; }
  .hero__body { max-width: 100%; overflow-wrap: break-word; }
}

/* ── Stats: 2×2 grid on phones ──────────────────────────────── */
@media (max-width: 480px) {
  .stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .stat { min-width: 0; }
  .stat__label { overflow-wrap: break-word; hyphens: auto; }
  .stat__num { overflow-wrap: break-word; }
}

/* ── Progress steps: shrink and hide labels on phones ───────── */
@media (max-width: 640px) {
  .progress-step__dot   { width: 28px; height: 28px; font-size: .7rem; }
  .progress-step__line  { margin-top: 13px; }
  .progress-step__label { display: none; }  /* hide text labels - dots show step numbers */
  .progress-steps       { margin-bottom: 28px; }
}

/* ── Signup step 4: centre card and override inline padding ──── */
#step-4 { max-width: 520px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  #step-4 { padding: 36px 20px !important; }
  /* Give 4th progress dot breathing room from right edge */
  .progress-steps { padding-right: 4px; }
}

/* ── Check grid: single column on phones ────────────────────── */
@media (max-width: 480px) {
  .check-grid { grid-template-columns: 1fr; }
}

/* ── CTA banner: full-width button ─────────────────────────── */
@media (max-width: 640px) {
  .cta-banner .btn { display: block; width: 100%; max-width: 320px; margin: 0 auto 12px; text-align: center; white-space: normal; }
}

/* ── Footer bottom row: stack on mobile ─────────────────────── */
@media (max-width: 640px) {
  .footer { padding: 48px 0 24px; }
  .footer__grid { gap: 28px; }
  .footer__bottom { flex-direction: column; text-align: center; align-items: center; }
  .footer__bottom > div { flex-wrap: wrap; justify-content: center; }
}

/* ── Comparison table: responsive for longer translations ────── */
@media (max-width: 760px) {
  .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table td, .compare-table th { word-break: break-word; hyphens: auto; }
  .compare-table td:first-child { min-width: 120px; max-width: 45vw; }
}

/* ── Dashboard: payment-pending lock state ──────────────────── */
/* Collapses the 2-col grid and centres content when subscription isn't active */
.dash-layout--locked { grid-template-columns: 1fr !important; }
.dash-layout--locked .dash-main { max-width: 640px; margin: 0 auto; }
/* When locked (payment-pending OR WS3-paused), force ONLY the inactive/paused
   banner to show and hide every content panel with !important — so a deep-link
   or refresh to e.g. #subscription can't reveal an unrendered placeholder panel
   (the JS lock returns early, so those panels never get filled). !important beats
   the router's inline display:block when it navigates to a hash. */
.dash-layout--locked #dash-content > [id^="panel-"] { display: none !important; }
.dash-layout--locked #sub-inactive-banner { display: block !important; }

/* ── Cancel-subscription modal buttons ─────────────────────── */
.cancel-modal-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 4px;
}
.cancel-modal-actions button { width: 100%; text-align: center; justify-content: center; white-space: normal; }

/* ── Dashboard: mobile bottom tab bar ───────────────────────── */
.dash-mobile-nav { display: none; }
.dash-mobile-nav__fade { display: none; }

@media (max-width: 980px) {
  .dash-mobile-nav {
    display: flex;
    justify-content: safe center;  /* center when items fit (e.g. iPad portrait); fall back to flex-start when they overflow so scroll still starts at the first tab */
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--c-bg);
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -4px 16px rgba(12,26,46,.08);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .dash-mobile-nav::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  /* Right-edge fade - visual cue that more tabs exist beyond the viewport.
     Fixed position so it stays as the user scrolls; pointer-events:none so
     taps pass through to whichever tab is underneath. */
  .dash-mobile-nav__fade {
    position: fixed;
    right: 0; bottom: 0;
    width: 42px;
    height: 64px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, var(--c-bg) 85%);
    z-index: 101;
    display: block;
  }
  .dash-mobile-nav__item {
    flex: 0 0 auto;   /* don't grow/shrink - fixed width so items never squish */
    min-width: 64px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 8px 8px;
    font-size: .58rem; font-weight: 600; line-height: 1.2;
    color: var(--c-muted);
    text-decoration: none; border: none; background: none;
    cursor: pointer; font-family: var(--font-body);
    transition: color var(--transition);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .dash-mobile-nav__item:last-child { padding-right: 36px; }  /* room for fade to not obscure text */
  .dash-mobile-nav__item:hover,
  .dash-mobile-nav__item.active { color: var(--c-green-vivid); }
  .dash-mobile-nav__icon { font-size: 1.3rem; line-height: 1; }
  /* Push main content above the tab bar */
  .dash-main { padding: 28px 20px 92px; }
  /* Shorten verbose form hints on mobile so they don't dominate short inputs */
  .form-hint { font-size: .78rem; }
}

/* iPad-portrait range: items fit in one row, so centering kicks in via `safe center`.
   Hide the right-edge fade (nothing to scroll to) and drop the last-child padding hack
   that only existed to keep the fade from obscuring the "Help" label. */
@media (min-width: 720px) and (max-width: 980px) {
  .dash-mobile-nav__fade { display: none; }
  .dash-mobile-nav__item:last-child { padding-right: 8px; }
}

/* Recent-updates rows: at narrow phone widths the date + count+tag wrap
   inconsistently — short rows fit on one line, long rows spill to two.
   Force a clean 2-line stack so all rows in the panel align vertically. */
@media (max-width: 640px) {
  .alert-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2px !important;
  }
}

/* Mobile nav admin item — the global admin-reveal rule
   `[data-fp-admin-only="1"][data-fp-admin-show="1"] { display: revert !important; }`
   reverts the <a>'s display to the browser default (`inline`), which
   overrides .dash-mobile-nav__item's flex column layout and leaves the
   icon + label on a single horizontal line out-of-step with every other
   tab. Re-impose the column flex layout with a higher-specificity rule
   that still uses !important so it wins against the revert. */
@media (max-width: 980px) {
  .dash-mobile-nav__item[data-fp-admin-only="1"][data-fp-admin-show="1"] {
    display: flex !important;
  }
}

[data-theme="dark"] .dash-mobile-nav { background: var(--c-bg-alt); border-top-color: var(--c-border); }
@media (max-width: 980px) {
  [data-theme="dark"] .dash-mobile-nav__fade {
    background: linear-gradient(to right, rgba(30,41,59,0) 0%, var(--c-bg-alt) 85%);
  }
}

/* ── Dark mode ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --c-bg:          #0F172A;
  --c-bg-alt:      #1E293B;
  --c-bg-green:    #0A2818;
  --c-text:        #E2E8F0;
  --c-muted:       #94A3B8;
  --c-subtle:      #64748B;
  --c-reposts:     #F87171;   /* lighter red (red-400) so the reposts signal stays legible on dark */
  --c-border:      #334155;
  --c-border-mid:  #475569;
  --c-green-light: #14532d;
  color-scheme: dark;
}

/* Elements with hardcoded white backgrounds */
[data-theme="dark"] .nav                { background: rgba(15,23,42,.95); border-bottom: 1px solid var(--c-border); }
[data-theme="dark"] .form-card          { background: var(--c-bg-alt); }
[data-theme="dark"] .dash-card          { background: var(--c-bg-alt); }
[data-theme="dark"] .hero__card         { background: var(--c-bg-alt); }
[data-theme="dark"] .plan               { background: var(--c-bg-alt); }
[data-theme="dark"] .feature-card       { background: var(--c-bg-alt); }
[data-theme="dark"] .testimonial        { background: var(--c-bg-alt); }
[data-theme="dark"] .progress-step__dot { background: var(--c-bg); }

/* Aside-cards: override any hardcoded background (#fff or var(--c-bg-green)) */
[data-theme="dark"] .aside-card         { background: var(--c-bg-alt) !important; border-color: var(--c-border); }

/* Step cards: add card treatment (border + padding) so they read as distinct from bg */
[data-theme="dark"] .step               { background: var(--c-bg-alt); border-color: var(--c-border); }

/* Hero gradient */
[data-theme="dark"] .hero { background: linear-gradient(160deg, #0a2818 0%, #0F172A 55%); }

/* Nav text colours */
[data-theme="dark"] .nav__logo                       { color: var(--c-text); }
[data-theme="dark"] .nav__links a                    { color: var(--c-muted); }
[data-theme="dark"] .nav__links a:hover,
[data-theme="dark"] .nav__links a.active             { color: var(--c-text); }
[data-theme="dark"] .nav-toggle                      { color: var(--c-text); }

/* Form labels */
[data-theme="dark"] .form-group label:not(.check-item) { color: var(--c-text); }
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4       { color: var(--c-text); }

/* Buttons */
[data-theme="dark"] .btn--outline { color: var(--c-text); border-color: var(--c-border-mid); }
[data-theme="dark"] .btn--ghost   { color: var(--c-muted); }
[data-theme="dark"] .btn--ghost:hover { color: var(--c-text); background: var(--c-border); }

/* ── Tag pills: ensure readable contrast in dark mode ──────── */
[data-theme="dark"] .tag-pill                       { color: var(--c-green-mid); }
[data-theme="dark"] .tag-pill button                { color: var(--c-green-mid); }

/* ── Navy-coloured foreground text that needs lightening in dark mode ─ */
[data-theme="dark"] .faq-q                          { color: var(--c-text); }
[data-theme="dark"] .plan__price                    { color: var(--c-text); }
[data-theme="dark"] .plan-opt__price                { color: var(--c-text); }
[data-theme="dark"] .hero__job-role                 { color: var(--c-text); }
[data-theme="dark"] .contact-info__value,
[data-theme="dark"] .contact-info__value a          { color: var(--c-text); }

/* ── Pricing page: guarantee box border + featured column ─────── */
[data-theme="dark"] .guarantee                      { border-color: var(--c-green); }
[data-theme="dark"] .save-badge,
[data-theme="dark"] .hero__tag,
[data-theme="dark"] .hero__card-badge,
[data-theme="dark"] .plan-badge                     { background: rgba(22,163,74,.2); color: #86EFAC; border-color: rgba(22,163,74,.4); }
[data-theme="dark"] .step__num                      { background: rgba(22,163,74,.2); }
[data-theme="dark"] .compare-table .featured-col    { background: rgba(22,163,74,.12); }

/* ── Informational panel banner ──────────────────────────────── */
.info-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--c-bg-green);
  border: 1px solid var(--c-green-light);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 24px;
  font-size: .82rem;
  color: var(--c-text);
}
/* Both --c-bg-green and --c-green-light have dark-mode overrides in the
   :root block above, so no separate [data-theme="dark"] rule needed here. */

/* ── Amber / info coloured boxes ──────────────────────────────── */
[data-theme="dark"] .change-notice       { background: #1c1205; border-color: #5a3500; color: #FCD34D; }
[data-theme="dark"] .status-badge--active  { background: rgba(22,163,74,.2); color: #86EFAC; }
[data-theme="dark"] .status-badge--pending { background: #2d1a02; color: #FCD34D; }
[data-theme="dark"] .alert--info         { background: #0c1f3d; color: #93C5FD; border-color: #1e3a6e; }
[data-theme="dark"] .alert--success      { background: #052e16; color: #86EFAC; border-color: #166534; }
[data-theme="dark"] .alert--error        { background: #2d0a0a; color: #FCA5A5; border-color: #7f1d1d; }

/* Dark mode toggle button */
.dark-toggle {
  background: none; border: 1.5px solid var(--c-border-mid); border-radius: var(--r);
  cursor: pointer; padding: 5px 9px; font-size: .85rem; color: var(--c-muted);
  transition: border-color var(--transition), color var(--transition);
  line-height: 1; display: flex; align-items: center;
}
.dark-toggle:hover { border-color: var(--c-green-vivid); color: var(--c-text); }

/* Language picker */
.lang-picker { position: relative; display: flex; align-items: center; margin-right: 4px; flex-shrink: 0; }
.lang-picker__btn {
  background: none; border: 1.5px solid var(--c-border-mid); border-radius: var(--r);
  cursor: pointer; padding: 5px 9px; font-size: .78rem; font-weight: 600;
  color: var(--c-muted); line-height: 1; display: flex; align-items: center; gap: 5px;
  font-family: var(--font-body);
  transition: border-color var(--transition), color var(--transition);
}
.lang-picker__btn:hover { border-color: var(--c-green-vivid); color: var(--c-text); }
.lang-picker__btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.lang-picker__menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r);
  box-shadow: var(--shadow); min-width: 130px; z-index: 1000; overflow: hidden;
}
.lang-picker__menu--open { display: block; }
.lang-picker__menu a {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  font-size: .82rem; font-weight: 500; color: var(--c-text);
  text-decoration: none; transition: background var(--transition);
}
.lang-picker__menu a:hover { background: var(--c-bg-alt); }
.lang-picker__menu a.active { color: var(--c-green-vivid); font-weight: 600; }
[data-theme="dark"] .lang-picker__menu { background: var(--c-bg); border-color: var(--c-border); }

/* ── Tags-input placeholder: show data-placeholder when no tags yet ── */
.tags-input-wrap:not(:has(.tag-pill)) .tags-input:empty::before {
  content: attr(data-placeholder);
  color: var(--c-subtle);
  pointer-events: none;
}