/* StaffClock — unified design system
   Single source of truth for tokens, reset, layout, and components. */

/* ---------- Self-hosted Plus Jakarta Sans (variable) ---------- */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/static/fonts/PlusJakartaSans.woff2') format('woff2-variations'),
      url('/static/fonts/PlusJakartaSans.woff2') format('woff2');
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* The HTML `hidden` attribute defaults to `display:none` in the UA stylesheet
   at attribute-selector specificity, which loses to any author class rule
   setting `display:flex|grid|inline-flex|...` on the same element. The pricing
   section's monthly/annual toggle hides the inactive CTA via `hidden`, but
   `.btn` is `inline-flex` and overrode the UA rule — so both 'Start for £X/
   month' and 'Start for £X/year' rendered together. !important is the
   standard normalize fix; promote `[hidden]` so flex/grid elements honour it. */
[hidden]{display:none!important}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg-page);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizelegibility;
  font-feature-settings:'ss01';
  font-variant-numeric:tabular-nums;
  line-height:1.55;
  font-size:15px;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}

/* ---------- Tokens ---------- */
:root{
  /* --blue is the interactive-primary action token. Shifted off Tailwind
     blue-600 (#2563eb) into the navy family so the palette reads as one
     identity (navy + navy-blue), not "logo navy + Tailwind blue". The
     hue sits next to --navy:#1E3A5F. Reads institutional / regulator-tier
     — closer to gov.uk than to a generic SaaS landing page. */
  --blue:#0284C7;
  --blue-700:#0369a1;
  --blue-50:#f0f9ff;
  --blue-100:#e0f2fe;
  /* Navy is the proprietary brand colour (also in logo.svg). Reserved for brand
     chrome — surfaces that say "PenaltyProof", not interactive primary actions
     (those stay --blue). Keep these two roles distinct. */
  --navy:#1E3A5F;
  --navy-600:#264a78;
  --navy-50:#eef2f7;
  --ink:#111128;
  --ink-soft:#475569;
  --muted:#64748b;
  --muted-soft:#94a3b8;
  /* For body-text < 14px on white. #94a3b8 is ~3.4:1 on white and fails
     WCAG AA for normal text; --muted-soft is reserved for non-text UI
     (callout icons, dismiss glyphs). Footnotes/captions use this token. */
  --muted-soft-text:#64748b;
  --line:#e2e8f0;
  --line-soft:#f1f5f9;
  --bg-page:#fff;
  --bg-muted:#f7f8fa;
  --bg-subtle:#f5f6f8;
  --green:#059669;
  --green-50:#f0fdf4;
  --green-100:#d1fae5;
  --green-200:#bbf7d0;
  --green-700:#166534;
  --red:#dc2626;
  --red-50:#fef2f2;
  --red-100:#fee2e2;
  --red-200:#fecaca;
  --red-700:#991b1b;
  --amber:#d97706;
  --amber-50:#fffbeb;
  --amber-100:#fef3c7;
  --amber-200:#fde68a;
  --amber-700:#92400e;
  /* Semantic aliases — split brand-chrome from interactive-action so future
     re-skin doesn't require touching every consumer. Today they resolve to the
     hues above; tomorrow swapping --brand requires no template changes. */
  --brand:var(--navy);
  --action-primary:var(--blue);
  --info:var(--blue);
  --shadow-sm:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 14px -2px rgba(15,23,42,.10), 0 2px 6px -2px rgba(15,23,42,.05);
  --shadow-lg:0 16px 40px -8px rgba(15,23,42,.16), 0 6px 16px -4px rgba(15,23,42,.08);
  --shadow-blue:0 6px 20px -4px rgba(2,132,199,.36), 0 2px 8px rgba(2,132,199,.20);
  --bg-app:#f0f2f5;
  --bg-mktg:#ffffff;
  --bg-auth-proof:#111128;
  --radius-sm:6px;
  --radius:8px;
  --radius-lg:12px;
  --radius-pill:999px;
  --t-fast:120ms;
  --t-base:160ms;
  --ease:cubic-bezier(.2,.6,.2,1);
  --stroke:1.7;
}

/* Inline SVGs that opt in via [data-icon] inherit a consistent stroke weight. */
svg[data-icon]{stroke-width:var(--stroke)}

/* App-shell pages opt in to the muted background that makes white cards pop. */
body.bg-app{--bg-page:var(--bg-app)}
body.marketing-page { --bg-page: var(--bg-mktg); }

/* ---------- Skip to content (a11y) ---------- */
.skip-to-content{
  position:absolute;left:8px;top:8px;
  background:var(--blue);color:#fff;
  padding:8px 14px;border-radius:6px;
  font-size:13px;font-weight:600;
  text-decoration:none;
  transform:translateY(-200%);
  transition:transform 150ms var(--ease);
  z-index:1000;
}
.skip-to-content:focus,
.skip-to-content:focus-visible{transform:translateY(0)}

/* ---------- Selection + focus ---------- */
::selection{background:rgba(2,132,199,.18);color:var(--ink)}

:focus{outline:none}
:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="option"]:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}

/* ---------- Container ---------- */
.container{max-width:960px;margin:0 auto;padding:0 24px}
.container-wide{max-width:1180px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:560px;margin:0 auto;padding:0 24px}

/* ---------- Layout utilities ----------
   Shared responsive grids + flex helpers. Previously these only existed
   inside landing.html's <style> block, so they did not apply to the footer
   on /check, /manage, /privacy, etc. Promoted here so every page benefits. */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
@media (max-width:640px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:420px){
  .footer-grid{grid-template-columns:1fr}
}
.row-wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Dashed divider — pulls the logo's safe→overdue dashed-line motif into the
   page rhythm. Short and centred so it reads as a deliberate brand mark
   above section eyebrows, not as a separator rule. */
.divider-dashed{height:1px;background:none;border:none;border-top:1px dashed var(--muted-soft);max-width:120px;margin:0 auto 28px;opacity:.6}

/* Client row on /manage. 3px left accent encodes urgency at a glance so
   the list is scannable peripherally — no need to read each badge. */
.client-list{display:flex;flex-direction:column;gap:14px;list-style:none;padding:0;margin:0 0 32px}
.client-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid var(--line);border-left-width:4px;
  border-radius:var(--radius-lg);padding:18px 20px;font-size:14px;gap:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.client-row:hover{box-shadow:0 4px 12px -2px rgba(15,23,42,.08),0 2px 4px -2px rgba(15,23,42,.04)}
.client-row--ok      { border-left-color: var(--green); }
.client-row--soon    { border-left-color: var(--amber); }
.client-row--overdue { border-left-color: var(--red); }
.client-row--unknown { border-left-color: var(--line); }

/* ---------- Manage page components ----------
   Page-specific UI scoped to /manage. Kept here (rather than inline in the
   template) so the next person touching the page reads styles in one place. */

/* Slim header strip under the H1 — left: signed-in identity + meta, right:
   account actions. Wraps on narrow viewports so clusters stack rather than
   truncate. */
.manage-shell{padding:48px 24px;max-width:960px;margin:0 auto}
/* Subtitle directly under the H1 — promoted from the old meta-strip so the
   "Last checked" timestamp reads as part of the page header rather than as
   secondary chrome. */
.manage-subtitle{font-size:14px;color:var(--muted);margin:0 0 18px;line-height:1.5}
.manage-header{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 16px;font-size:12px;color:var(--muted-soft-text);margin-bottom:24px;
}
.manage-header__meta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.manage-header__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.manage-header__actions a{color:var(--blue);font-weight:500}
.manage-header__actions a:hover{text-decoration:underline}
.signed-in{color:var(--muted-soft-text)}
.signed-in strong{color:var(--ink-soft);font-weight:500}
.dot-sep{color:var(--muted-soft);margin:0 2px}

/* Segmented urgency filter — sits between the summary callout and the list.
   Replaces the in-callout buttons; setupCompanyListFilter() in app.js binds
   to [data-urgency-filter] regardless of where the buttons live. */
.urgency-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.urgency-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);
  font:inherit;font-size:13px;font-weight:500;cursor:pointer;
  padding:6px 12px;border-radius:var(--radius-pill);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.urgency-chip:hover{border-color:var(--muted-soft);color:var(--ink)}
.urgency-chip__count{font-size:12px;color:var(--muted);font-weight:600}
.urgency-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.urgency-chip[aria-pressed="true"] .urgency-chip__count{color:rgba(255,255,255,.7)}
.urgency-chip--clear{color:var(--muted);border-style:dashed}
.urgency-chip--clear:hover{color:var(--ink);border-color:var(--muted)}

/* Single consolidated plan-usage component — replaces the four overlapping
   callouts (persistent usage, near_limit, headroom-nudge, header upgrade
   link). One bar + one contextual CTA shown at ≥80% usage. */
.usage-bar{
  display:flex;flex-direction:column;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 16px;margin-bottom:20px;
}
.usage-bar__row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;flex-wrap:wrap}
.usage-bar__label{color:var(--ink-soft);font-weight:500}
.usage-bar__cta{color:var(--blue);font-weight:600;font-size:13px}
.usage-bar__cta:hover{text-decoration:underline}
.usage-bar__track{height:6px;background:var(--line-soft);border-radius:var(--radius-pill);overflow:hidden}
.usage-bar__fill{height:100%;background:var(--blue);border-radius:var(--radius-pill);transition:width var(--t-base) var(--ease)}
.usage-bar__note{margin:0;font-size:12.5px;line-height:1.45}
.usage-bar__note--warn{color:var(--amber-ink,#92400e)}
.usage-bar__note--full{color:var(--red-ink,#991b1b);font-weight:500}
.usage-bar--warn{border-color:var(--amber);background:var(--amber-bg,#fffbeb)}
.usage-bar--warn .usage-bar__fill{background:var(--amber)}
.usage-bar--warn .usage-bar__cta{color:var(--amber-ink,#92400e)}
.usage-bar--full{border-color:var(--red);background:var(--red-bg,#fef2f2)}
.usage-bar--full .usage-bar__fill{background:var(--red)}
.usage-bar--full .usage-bar__cta{color:var(--red-ink,#991b1b)}

/* Undo toast for soft-deletes. Fixed at the bottom of the viewport, auto-hides
   after 10s. setupUndoToast() in app.js reads ?removed= and renders. */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:12px 18px;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:16px;
  font-size:13px;font-weight:500;
  z-index:60;max-width:calc(100% - 32px);
  animation:toast-in 200ms var(--ease);
}
.toast__action{
  background:none;border:none;color:#fff;font-weight:600;
  text-decoration:underline;cursor:pointer;padding:0;font-size:13px;
}
.toast__action:hover{color:#cbd5e1}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}
.toast--success{background:var(--green-700);}

/* Per-row layout for the company list. One line per company — name + number
   + the most-urgent deadline — with an optional small caption below for the
   second filing when it exists. Drives the marketing-mockup feel; the
   colour-coded left accent + the urgency pill on the right do the rest. */
.client-row__main{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px;min-width:0;flex:1}
.client-row__name{color:var(--ink);font-weight:600;font-size:15px}
.client-row__name a{color:inherit}
.client-row__name a:hover{color:var(--blue);text-decoration:underline}
.client-row__num{color:var(--muted);margin-left:6px;font-weight:400;font-size:13px}
.client-row__deadline{color:var(--ink-soft);font-size:13px;font-weight:500}
.client-row__deadline--pending{color:var(--muted);font-style:italic;font-weight:400}
.client-row__secondary{flex-basis:100%;color:var(--muted-soft-text);font-size:12px;margin-top:2px}
.client-row__actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* Inline keyboard hint used in the chip-input help text. */
.kbd{background:var(--line-soft);border:1px solid var(--line);border-radius:3px;
  padding:1px 5px;font-size:11px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}

/* Page-level helpers reused on /manage so we can drop inline `style=` blocks. */
.text-meta{font-size:12px;color:var(--muted-soft-text)}
.text-muted{color:var(--muted)}
.muted-link{color:var(--muted-soft-text);text-decoration:underline}
.muted-link:hover{color:var(--ink)}
.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:16px}
.mb-5{margin-bottom:20px}
.mb-6{margin-bottom:24px}
.mb-8{margin-bottom:32px}
.mt-5{margin-top:20px}

/* Empty state — first-paid-visit moment. Plain text + clear primary CTA so the
   page never feels broken or marketing-ish. */
.manage-empty{padding:40px 24px;text-align:center;color:var(--muted);margin-bottom:32px}
.manage-empty__title{font-size:18px;color:var(--ink);font-weight:600;margin-bottom:4px}
.manage-empty__body{font-size:14px;margin-bottom:20px}
.manage-empty__actions{display:flex;flex-direction:column;gap:10px;align-items:center}
.manage-empty__secondary{color:var(--blue);font-size:13px;font-weight:500;background:none;border:none;cursor:pointer;padding:0}
.manage-empty__secondary:hover{text-decoration:underline}

/* Mobile: stack client rows vertically below 540px. */
@media (max-width:540px){
  .client-row{align-items:flex-start;flex-direction:column;gap:10px;padding:16px}
  .client-row__actions{align-self:stretch;justify-content:space-between;flex-wrap:wrap;gap:8px}
  .manage-shell{padding:32px 16px}
}

/* Quiet-then-red button for moderately-destructive actions with a 2-step
   confirm. Resting state is grey-on-transparent (low emphasis); hover hints
   at the danger; on data-step="2" (set by the existing remove-confirm JS)
   it escalates to a solid red affirm. Reuses the dataset.step toggle —
   no JS changes required. */
.btn-quiet-danger{background:transparent;color:var(--muted);border:1px solid transparent;font-weight:500}
.btn-quiet-danger:hover{color:var(--red);background:var(--red-50);border-color:var(--red-200)}
.btn-quiet-danger[data-step="2"]{background:var(--red);color:#fff;border-color:var(--red)}
.btn-quiet-danger[data-step="2"]:hover{background:#b91c1c}

/* Horizontal-scroll wrapper for wide tables on narrow viewports.
   Inner table needs an intrinsic min-width; otherwise width:100% would
   shrink-to-fit and the scroll would never engage. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll > table{min-width:480px}
.table-scroll-wide > table,
.table-scroll-wide > div{min-width:560px}

/* Single H1 token used across every page. Hard-coded font-sizes (24px–32px)
   on /check, /manage, /penalty-calculator, /privacy, etc. felt oversized on
   small phones and undersized on large screens — clamp() scales per viewport. */
.page-h1{font-size:clamp(22px,4.4vw,30px);font-weight:700;color:var(--ink);
  letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.page-h1--display{font-size:clamp(24px,5vw,32px);font-weight:800}
/* Manage page leads with a heavier, marketing-grade H1 to match the homepage
   dashboard preview. Scoped here (rather than retuning .page-h1 globally) so
   /check, /penalty-calculator, /privacy etc. keep their existing scale. */
.page-h1--manage{font-size:clamp(28px,4.8vw,38px);font-weight:800;margin-bottom:4px}
.error-code{font-size:clamp(48px,12vw,72px);font-weight:700;line-height:1;
  color:var(--line);margin-bottom:0}

/* ---------- Site nav (the fixed translucent header used on every page) ---------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(200%) blur(16px);
  -webkit-backdrop-filter:saturate(200%) blur(16px);
  border-bottom:1px solid rgba(226,232,240,.8);
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.site-nav-inner{
  max-width:960px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  height:56px;gap:24px;
}
.site-nav-brand{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:800;color:var(--ink);
  font-size:15.5px;letter-spacing:-.025em;
  white-space:nowrap;
}
.site-nav-brand:hover{color:var(--navy)}
.site-nav-spacer{height:56px}

/* Default site-nav links + hamburger (used by _base.html on every page
   except landing.html, which renders its own nav variant). On phones the
   links collapse into a dropdown panel anchored under the navbar. */
.site-nav-links{display:flex;gap:20px;align-items:center}
.site-nav-links a{font-size:13px;color:var(--muted);font-weight:500;text-decoration:none}
.site-nav-links a:hover{color:var(--ink)}
.site-nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  padding:8px;border-radius:6px;color:var(--ink);
  align-items:center;justify-content:center;
}
.site-nav-toggle:hover{background:var(--bg-muted)}
@media (max-width:640px){
  .site-nav-toggle{display:inline-flex;min-width:44px;min-height:44px}
  .site-nav-links{
    position:absolute;top:56px;right:0;left:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);padding:8px 0;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    visibility:hidden;
    transition:transform var(--t-base) var(--ease),
               opacity var(--t-base) var(--ease),
               visibility 0s linear var(--t-base);
  }
  .site-nav-links a{padding:12px 20px;font-size:14px;border-radius:0}
  .site-nav-links a:hover{background:var(--bg-muted)}
  .site-nav[data-open="true"] .site-nav-links{
    transform:translateY(0);opacity:1;pointer-events:auto;visibility:visible;
    transition:transform var(--t-base) var(--ease),
               opacity var(--t-base) var(--ease),
               visibility 0s linear 0s;
  }
}

/* Footer chrome — replaces the inline-styled <footer> in _base.html so the
   .footer-grid responsive collapse defined above actually applies. */
.site-footer-full{background:#fff;border-top:1px solid var(--line);padding:48px 24px 32px}

/* ---------- Site footer (default minimal footer) ---------- */
.site-footer{
  margin-top:64px;
  padding:32px 24px 36px;
  border-top:1px solid var(--line);
  background:var(--bg-page);
  color:var(--muted);
  font-size:13px;
}
.site-footer-inner{
  max-width:960px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;
}
.site-footer a{color:var(--muted);transition:color var(--t-fast) var(--ease)}
.site-footer a:hover{color:var(--ink)}
.site-footer-links{display:flex;flex-wrap:wrap;gap:18px}
.site-footer-meta{font-size:11px;color:var(--muted-soft-text);max-width:560px;margin:14px auto 0;text-align:center;line-height:1.6}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-weight:700;font-size:14px;
  padding:11px 22px;border-radius:var(--radius);
  border:1px solid transparent;
  text-align:center;line-height:1.2;letter-spacing:-.01em;
  transition:transform var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:var(--blue);color:#fff;
  box-shadow:var(--shadow-blue);
}
.btn-primary:hover{background:var(--blue-700);box-shadow:0 10px 26px -4px rgba(2,132,199,.44), 0 4px 10px rgba(2,132,199,.24)}
.btn-secondary{
  background:#fff;color:var(--ink);border-color:var(--line);
  box-shadow:var(--shadow-sm);
}
.btn-secondary:hover{border-color:var(--blue);color:var(--blue);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--ink);background:var(--bg-muted)}
.btn-danger{background:var(--red);color:#fff;box-shadow:var(--shadow-sm)}
.btn-danger:hover{background:#b91c1c;box-shadow:var(--shadow-md)}
.btn-block{display:flex;width:100%}
.btn-sm{padding:8px 14px;font-size:13px}
/* White-on-dark CTA — used on the Pro pricing tier (#0f172a card) and over
   the closing-CTA blue band where a primary blue would fight the bg. */
.btn-invert{background:#fff;color:var(--ink);box-shadow:0 4px 16px rgba(0,0,0,.15)}
.btn-invert:hover{background:#f8fafc;box-shadow:0 6px 20px rgba(0,0,0,.18)}
/* Suppresses the brand shadow when a primary CTA sits on a tinted card and
   the shadow would compete with the card border. */
.btn-no-shadow{box-shadow:none!important}
.btn-pill { border-radius: var(--radius-pill); }
/* Navy CTA — founding-member offer band only. Uses the brand navy from the
   logo so the offer feels premium without colliding with --amber, which is
   reserved for warning semantics. Hover lightens to --navy-600 instead of
   going to --ink — keeps the brand cue on hover instead of drifting to black. */
.btn-founding{background:var(--navy);color:#fff;box-shadow:0 4px 14px rgba(30,58,95,.3);font-weight:700}
.btn-founding:hover{background:var(--navy-600);box-shadow:0 6px 18px rgba(30,58,95,.36)}

/* ---------- Form input ---------- */
.form-label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.form-input{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 14px;font-size:14px;
  background:#fff;color:var(--ink);
  outline:none;
  transition:border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.form-input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(2,132,199,.18);
}

/* ---------- Badges ---------- */
.badge-ok{display:inline-flex;align-items:center;gap:5px;background:var(--green-50);border:1px solid var(--green-200);color:var(--green-700);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--radius-pill)}
.badge-overdue{display:inline-flex;align-items:center;gap:5px;background:var(--red-50);border:1px solid var(--red-200);color:var(--red);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--radius-pill)}
.badge-warning{display:inline-flex;align-items:center;gap:5px;background:var(--amber-50);border:1px solid var(--amber-200);color:var(--amber-700);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--radius-pill)}
.badge-unknown{display:inline-flex;align-items:center;gap:5px;background:var(--bg-muted);border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--radius-pill)}

/* ---------- Chips (company-number entry) ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--blue-50);border:1px solid var(--blue-100);color:#1e40af;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--radius-pill)}
.chip-remove{background:none;border:none;cursor:pointer;color:var(--blue-700);font-size:14px;line-height:1;padding:0;transition:color var(--t-fast) var(--ease)}
.chip-remove:hover{color:#1e3a8a}
.chip.is-invalid{background:var(--red-50);border-color:var(--red-200);color:var(--red)}
.chip.is-invalid .chip-remove{color:var(--red)}
.chip-status{font-size:11px;font-weight:500;margin-left:4px;opacity:.85}

/* ---------- Feature check (pricing rows) ---------- */
/* Replaces the hand-rolled "round bg + tiny check svg" repeated in
   landing.html for each tier. Variants pick up the tier accent. */
.feature-check{display:flex;gap:7px;align-items:flex-start;font-size:12px;line-height:1.5}
.feature-check__mark{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.feature-check__label{color:var(--ink-soft)}
.feature-check--primary .feature-check__mark{background:var(--blue);color:#fff}
.feature-check--soft .feature-check__mark{background:var(--blue-50);color:var(--blue)}
.feature-check--invert .feature-check__mark{background:#fff;color:var(--ink)}
.feature-check--invert .feature-check__label{color:#cbd5e1}
.feature-check--off .feature-check__mark{background:transparent;color:var(--muted-soft);font-size:12px;font-weight:600}
.feature-check--off .feature-check__label{color:var(--muted-soft-text)}

/* ---------- Stat card (hero strip on landing) ---------- */
.stat-card{padding:22px 24px}
.stat-card__value{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:4px}
.stat-card--blue .stat-card__value{color:var(--blue)}
.stat-card--green .stat-card__value{color:var(--green)}
.stat-card__label{font-size:12px;color:var(--muted);line-height:1.5}

/* ---------- Card ---------- */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow-sm);
}
.card-hover{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#dbe3ee}

/* ---------- Callouts (status banners, inline notices) ----------
   Single component used across manage/onboarding/csv-confirm/capacity flows.
   Replaces four separate inline implementations. */
.callout{
  display:flex;align-items:flex-start;gap:10px;
  padding:14px 18px;
  border:1px solid var(--line);
  border-left-width:4px;
  border-radius:var(--radius);
  background:#fff;
  font-size:13px;line-height:1.55;
  color:var(--ink-soft);
}
.callout > .callout__icon{flex-shrink:0;margin-top:1px;color:inherit}
.callout > .callout__body{flex:1;min-width:0}
.callout > .callout__body :first-child{margin-top:0}
.callout > .callout__body :last-child{margin-bottom:0}
.callout > .callout__body strong{color:var(--ink);font-weight:600}
.callout__title{display:block;font-weight:600;color:var(--ink);margin-bottom:2px;font-size:14px}
.callout__dismiss{
  flex-shrink:0;background:none;border:none;cursor:pointer;
  color:var(--muted-soft);font-size:18px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;min-height:28px;border-radius:6px;padding:0;margin:-6px -8px -6px 0;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.callout__dismiss:hover{color:var(--ink);background:rgba(15,23,42,.04)}
.callout--compact{padding:10px 14px;font-size:13px}
.callout--info{background:#eff6ff;border-color:#dbeafe;border-left-color:var(--blue);color:#1e3a8a}
.callout--info .callout__icon{color:var(--blue)}
.callout--success{background:var(--green-50);border-color:var(--green-200);border-left-color:var(--green);color:var(--green-700)}
.callout--success .callout__icon{color:var(--green)}
.callout--warn{background:var(--amber-50);border-color:var(--amber-200);border-left-color:var(--amber);color:#78350f}
.callout--warn .callout__icon{color:var(--amber)}
.callout--danger{background:var(--red-50);border-color:var(--red-200);border-left-color:var(--red);color:var(--red-700)}
.callout--danger .callout__icon{color:var(--red)}

/* ---------- Visually-hidden (a11y-only text) ---------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0); /* legacy fallback */
  clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ---------- Typography helpers ---------- */
.eyebrow{font-size:11.5px;font-weight:700;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;text-align:center;margin-bottom:14px}
.section-title{font-size:clamp(22px,2.6vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.15;text-align:center;margin-bottom:12px}
.section-sub{font-size:15px;color:var(--ink-soft);line-height:1.65;text-align:center;max-width:540px;margin:0 auto 36px}

/* ---------- Smooth scroll, anchor offsets ---------- */
html{scroll-behavior:smooth}
:target{scroll-margin-top:72px}

/* ---------- Subtle entrance for sections (opted-in via .reveal) ----------
   Hidden state only applies when JS has confirmed it's running by adding
   `js-reveal` to <html>. Without JS, .reveal sections render normally — no
   blank-screen failure mode if the script is blocked or fails to load. */
.reveal{transition:opacity 520ms var(--ease),transform 520ms var(--ease);will-change:opacity,transform}
html.js-reveal .reveal{opacity:0;transform:translateY(12px)}
html.js-reveal .reveal.is-visible{opacity:1;transform:none}
/* Stagger reveal children with a small delay each — opt-in via .reveal-stagger */
html.js-reveal .reveal-stagger.is-visible > *{animation:reveal-fade 520ms var(--ease) both}
html.js-reveal .reveal-stagger.is-visible > *:nth-child(2){animation-delay:80ms}
html.js-reveal .reveal-stagger.is-visible > *:nth-child(3){animation-delay:160ms}
html.js-reveal .reveal-stagger.is-visible > *:nth-child(4){animation-delay:240ms}
@keyframes reveal-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Loading skeletons (e.g. /check while CH API is fetched) ---------- */
.check-skeleton{
  background:linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.4s linear infinite;
}
@keyframes skeleton-shimmer{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  html.js-reveal .reveal{opacity:1;transform:none}
  html.js-reveal .reveal-stagger > *{animation:none!important}
}

/* ---------- Prose (legal pages, long-form text) ---------- */
.prose{max-width:720px;margin:0 auto;color:var(--ink-soft);font-size:15px;line-height:1.7}
.prose h1{color:var(--ink);font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.prose h2{color:var(--ink);font-size:20px;font-weight:600;letter-spacing:-.015em;margin:36px 0 10px}
.prose h3{color:var(--ink);font-size:16px;font-weight:600;margin:24px 0 8px}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 14px 22px}
.prose li{margin-bottom:6px}
.prose a:not(.btn){color:var(--blue);text-decoration:underline;text-underline-offset:2px;transition:color var(--t-fast) var(--ease)}
.prose a:not(.btn):hover{color:var(--blue-700)}
.prose strong{color:var(--ink);font-weight:600}
.prose code{background:var(--bg-muted);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:13px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.prose hr{border:none;border-top:1px solid var(--line);margin:28px 0}
.prose .lead{font-size:16px;color:var(--muted);margin-bottom:24px}
.prose table{width:100%;font-size:14px;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:14px 0}
.prose th{padding:10px 14px;text-align:left;background:var(--bg-muted);font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.prose td{padding:10px 14px;border-top:1px solid var(--line-soft)}
.prose tr:first-child td{border-top:0}

/* ---------- Legal pages (terms / privacy / dpa) ---------- */
.legal-section{margin-top:32px}
.legal-section:first-of-type{margin-top:0}
.legal-section h2{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px}
.legal-section p{margin-bottom:8px;color:#334155}
.legal-section ul{list-style:disc;padding-left:20px;margin-top:4px}
.legal-section li{margin-bottom:4px;color:#334155}
.legal-section table{width:100%;min-width:480px;font-size:12px;border:1px solid var(--line);border-radius:8px;overflow:hidden;border-collapse:separate;border-spacing:0;margin-top:4px}
.legal-section th{padding:8px 16px;text-align:left;font-weight:600;color:#334155;background:var(--blue-50)}
.legal-section td{padding:8px 16px;border-top:1px solid var(--line-soft);color:#334155}
.legal-section tr:nth-child(even) td{background:var(--bg-muted)}
.legal-section code{background:var(--bg-muted);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:12px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.legal-callout{background:#fefce8;border:1px solid #fde68a;border-radius:6px;padding:10px 14px;display:inline-block;width:100%;box-sizing:border-box;font-size:12px;color:#64748b;margin-top:8px}

/* ---------- Mobile tweaks ---------- */
@media (max-width:640px){
  .site-nav-inner{gap:12px;padding:0 16px}
  .container,.container-wide,.container-narrow{padding-left:16px;padding-right:16px}
  .site-footer-inner{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---------- <details>/<summary> reset ----------
   Centralised so manual triangles in templates don't double-render with the
   native disclosure marker on Safari/Chrome. */
details > summary{list-style:none;cursor:pointer}
details > summary::-webkit-details-marker{display:none}

/* ---------- Print stylesheet ----------
   Strip chrome and decorative elements; keep prose readable. Helpful for
   accountants saving filing-deadline pages as evidence. */
@media print{
  .site-nav,.site-nav-spacer,.site-footer,.skip-to-content,
  .btn,#share-btn,#share-toast,.callout__dismiss{display:none!important}
  body{background:#fff!important;color:#000}
  .container,.container-wide,.container-narrow{max-width:none;padding:0}
  .card,.callout{box-shadow:none!important;border-color:#ccc!important}
  .reveal{opacity:1!important;transform:none!important}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:90%;color:#444}
  a{color:#000;text-decoration:underline}
  h1,h2,h3{break-after:avoid-page}
}

/* =======================================================================
   StaffClock overrides — everything above this line is reused verbatim
   from the PenaltyProof (ch-monitor) production stylesheet. This block is
   the ONLY StaffClock-specific layer: bare-element defaults (the base
   styles .form-input/.callout classes, not raw tags) plus app components.
   Safe to edit / rebrand without touching the shared system above.
   ======================================================================= */

/* Brand link colour for inline links (base sets a{color:inherit}). */
main a:not(.btn):not(.site-nav-brand) { color: var(--blue); font-weight: 500; }
main a:not(.btn):not(.site-nav-brand):hover { text-decoration: underline; }

/* Headings (base has no global heading scale — it used utilities/inline). */
main h1 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.25rem); font-weight: 700; letter-spacing: -.022em; line-height: 1.15; margin: 0 0 16px; }
main h2 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; margin: 30px 0 12px; }
main h3 { font-size: 1.05rem; font-weight: 600; margin: 18px 0 8px; }
main p { margin: 0 0 12px; }
.muted, .text-muted { color: var(--muted); }

/* Page rhythm: content containers get vertical padding (base .container is
   horizontal-only; the footer's .container-wide must stay un-padded). */
main > .container, main > .container-narrow { padding-top: 40px; padding-bottom: 64px; }

/* Bare form controls (templates use plain <label>/<input>, not .form-*). */
main label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
main input, main select, main textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 13px; font-size: 14px; background: #fff; color: var(--ink); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
main input[type="checkbox"], main input[type="radio"] { width: auto; }
main input:focus, main select:focus, main textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(2,132,199,.18); outline: none; }
main fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px 18px; margin: 18px 0; }
main legend { font-weight: 700; font-size: 13px; padding: 0 6px; color: var(--ink); }
main form > label + label { margin-top: 14px; }
.form-actions { margin-top: 20px; }
.auth-card { max-width: 420px; margin: 0 auto; }

/* Toolbar of actions under a dashboard heading. */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 10px; }
.lastrun { font-size: 12.5px; color: var(--muted); margin: 0 0 22px; }

/* Summary stat cards (dashboard + welcome). */
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 24px; }
.summary-chip { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.summary-chip__n { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.summary-chip__l { font-size: 12px; color: var(--muted); margin-top: 7px; font-weight: 500; }
.summary-chip--red { border-top-color: var(--red); } .summary-chip--red .summary-chip__n { color: var(--red); }
.summary-chip--amber { border-top-color: var(--amber); } .summary-chip--amber .summary-chip__n { color: var(--amber-700); }
.summary-chip--ok { border-top-color: var(--green); } .summary-chip--ok .summary-chip__n { color: var(--green-700); }
/* Mobile: keep 3-across for instant scannability — use compact cards */
@media (max-width: 640px) {
  .summary { gap: 10px; }
  .summary-chip { padding: 14px 12px; }
  .summary-chip__n { font-size: 1.7rem; }
  .summary-chip__l { font-size: 11px; margin-top: 4px; }
}

/* Credential row internals (reuses the base .client-row + .client-row--* accents). */
.client-row__name { font-weight: 600; font-size: 15px; color: var(--ink); }
.client-row__deadline { font-size: 13px; color: var(--muted); margin-top: 3px; }
.client-row__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.renew-form { display: flex; align-items: center; gap: 6px; }
.renew-form input { width: 150px; padding: 7px 10px; font-size: 13px; }

/* Coloured status pill with a leading dot (the base badges have no dot). */
.badge-ok, .badge-warning, .badge-overdue { gap: 6px; }
.badge-ok::before, .badge-warning::before, .badge-overdue::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

/* Landing hero. */
.hero { padding: 24px 0 8px; }
.hero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 2.9rem); max-width: 18ch; }
.hero .lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 56ch; margin-bottom: 22px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.stakes { margin-top: 40px; }
.stakes h3 { margin: 0 0 6px; font-size: 1rem; }
.stakes p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.hero .eyebrow { text-align: left; margin-bottom: 10px; }

/* Footer disclaimer bar (replaces an inline style for CSP cleanliness). */
.site-footer-bar { border-top: 1px solid var(--line); padding-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); }

/* =========================================================================
   MARKETING PAGE — full landing page components
   ========================================================================= */

/* Larger button variant for hero CTAs */
.btn-lg { padding: 14px 28px; font-size: 15px; }

/* Marketing nav (slightly different from app nav) */
.mktg-nav { background: rgba(255,255,255,.92); border-bottom-color: rgba(17,17,40,.08); }
.mktg-nav .btn-primary { background: #111128; color: #fff; box-shadow: none; }
.mktg-nav .btn-primary:hover { background: #1e293b; box-shadow: none; }
.mktg-nav .site-nav-links a:not(.btn) { font-size: 13.5px; color: #111128; font-weight: 500; }
.mktg-nav .site-nav-links a:not(.btn):hover { color: #0284C7; }

/* ---- Fine badge (hero eyebrow) ---- */
.mktg-fine-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red-50); color: var(--red); border: 1px solid var(--red-200);
  font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

/* ---- Hero ---- */
.mktg-hero {
  padding: 80px 0 72px;
  background:
    radial-gradient(ellipse 900px 600px at 10% 60%, rgba(14,165,233,.07) 0%, transparent 70%),
    radial-gradient(ellipse 600px 400px at 90% 20%, rgba(14,165,233,.05) 0%, transparent 60%),
    #ffffff;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.mktg-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(2,132,199,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(160deg, transparent 0%, rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(160deg, transparent 0%, rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 80%, transparent 100%);
}
.mktg-hero::after {
  content: '';
  position: absolute; right: -80px; top: -60px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,165,233,.06) 0%, rgba(14,165,233,.02) 50%, transparent 70%);
  pointer-events: none;
}
.mktg-hero__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.mktg-hero__h1 {
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.2rem); font-weight: 800;
  letter-spacing: -.032em; line-height: 1.08; color: var(--ink); margin: 0 0 20px;
}
.mktg-hero__lead {
  font-size: 1.08rem; color: var(--ink-soft); line-height: 1.65;
  max-width: 52ch; margin: 0 0 28px;
}
.mktg-hero__cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mktg-hero__small { font-size: 12px; color: var(--muted); margin: 0; }
.mktg-hero__guarantees {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px;
}
.mktg-hero__guarantee {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ink-soft); font-weight: 500;
}
.mktg-hero__guarantee svg { color: var(--green); flex-shrink: 0; }
@media (max-width: 768px) {
  .mktg-hero { padding: 48px 0 40px; }
  .mktg-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  /* Copy FIRST on mobile — CTA must be above fold, mockup is decoration */
  .mktg-hero__dashboard { order: 1; }
  .mktg-hero__copy { order: 0; }
}
@media (max-width: 480px) {
  .mktg-hero { padding: 36px 0 32px; }
  .mktg-hero__h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .mktg-hero__cta-row { flex-direction: column; }
  .mktg-hero__cta-row .btn { width: 100%; justify-content: center; }
}

/* ---- Dashboard mockup ---- */
.mktg-mockup {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.mktg-mockup__bar {
  background: var(--bg-muted); border-bottom: 1px solid var(--line);
  padding: 10px 14px; display: flex; align-items: center; gap: 6px;
}
.mktg-mockup__dot {
  width: 11px; height: 11px; border-radius: 50%;
}
.mktg-mockup__dot--r { background: #ff5f57; }
.mktg-mockup__dot--a { background: #febc2e; }
.mktg-mockup__dot--g { background: #28c840; }
.mktg-mockup__url {
  margin-left: 8px; font-size: 11px; color: var(--muted);
  background: var(--line-soft); border-radius: 4px; padding: 2px 10px;
}
.mktg-mockup__body { padding: 20px 16px; }
.mktg-mockup__heading { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 14px; }
.mktg-mockup__chips { display: flex; gap: 8px; margin-bottom: 16px; }

.mktg-chip {
  flex: 1; background: #fff; border-radius: var(--radius); padding: 10px 12px;
  border: 1px solid var(--line); text-align: center;
}
.mktg-chip--red { border-top: 3px solid var(--red); }
.mktg-chip--amber { border-top: 3px solid var(--amber); }
.mktg-chip--green { border-top: 3px solid var(--green); }
.mktg-chip__n {
  display: block; font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: var(--ink);
}
.mktg-chip--red .mktg-chip__n { color: var(--red); }
.mktg-chip--amber .mktg-chip__n { color: var(--amber-700); }
.mktg-chip--green .mktg-chip__n { color: var(--green-700); }
.mktg-chip__l { font-size: 10px; color: var(--muted); margin-top: 3px; }

.mktg-mockup__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: var(--radius); margin-bottom: 6px;
  border-left: 3px solid transparent;
}
.mktg-mockup__row--red { background: var(--red-50); border-left-color: var(--red); }
.mktg-mockup__row--amber { background: var(--amber-50); border-left-color: var(--amber); }
.mktg-mockup__row--green { background: var(--green-50); border-left-color: var(--green); }
.mktg-mockup__name { font-size: 13px; font-weight: 600; color: var(--ink); }
.mktg-mockup__cred { font-size: 11px; color: var(--muted); margin-top: 2px; }

.mktg-badge {
  font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: var(--radius-pill); white-space: nowrap;
}
.mktg-badge--red { background: var(--red-100); color: var(--red-700); }
.mktg-badge--amber { background: var(--amber-100); color: var(--amber-700); }
.mktg-badge--green { background: var(--green-100); color: var(--green-700); }

/* ---- Hero inline social proof ---- */
.mktg-hero__social-proof {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; font-size: 12.5px; color: var(--muted);
}
.mktg-proof-avatars { display: flex; }
.mktg-proof-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; margin-right: -8px;
  flex-shrink: 0;
}
.mktg-proof-avatars { margin-right: 4px; }

/* ---- Trust bar ---- */
.mktg-trust-bar {
  background: var(--bg-muted); border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.mktg-trust-bar__inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 16px 28px;
}
.mktg-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
.mktg-trust-sep {
  width: 1px; height: 20px; background: var(--line);
}
@media (max-width: 640px) {
  .mktg-trust-sep { display: none; }
  .mktg-trust-bar__inner { justify-content: flex-start; }
}

/* ---- Sections ---- */
.mktg-section { padding: 80px 0; }
.mktg-section + .mktg-section { border-top: 1px solid var(--line-soft); }

/* ---- Problem cards ---- */
.mktg-problem-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 24px; box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--line);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.mktg-problem-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.mktg-problem-card--red { border-top-color: var(--red); }
.mktg-problem-card--amber { border-top-color: var(--amber); }
.mktg-problem-card--blue { border-top-color: var(--blue); }
.mktg-problem-card h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 12px 0 8px; }
.mktg-problem-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }
.mktg-problem-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.mktg-problem-card__icon--red { background: var(--red-50); color: var(--red); }
.mktg-problem-card__icon--amber { background: var(--amber-50); color: var(--amber); }
.mktg-problem-card__icon--blue { background: var(--blue-50); color: var(--blue); }

/* ---- Realistic scenario callout ---- */
.mktg-scenario {
  background: var(--red-50); border: 1px solid var(--red-200);
  border-left: 4px solid var(--red); border-radius: var(--radius-lg);
  padding: 24px 28px; margin-top: 28px;
}
.mktg-scenario__label {
  font-size: 11px; font-weight: 700; color: var(--red);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px;
}
.mktg-scenario__text {
  font-size: 14px; color: var(--red-700); line-height: 1.7; margin: 0 0 12px;
}
.mktg-scenario__text strong { color: var(--red); }
.mktg-scenario__footer {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--red-700); opacity: .7;
}

/* ---- Real voices / social proof ---- */
.mktg-voices { margin: 32px 0 36px; }
.mktg-voices__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: 18px;
}
.mktg-voices__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px;
}
@media (max-width: 720px) { .mktg-voices__grid { grid-template-columns: 1fr; } }

.mktg-voice-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 20px 18px; margin: 0; position: relative;
  box-shadow: var(--shadow-sm);
}
.mktg-voice-card::before {
  content: '\201C'; font-size: 52px; line-height: 1; font-family: Georgia, serif;
  color: var(--navy); opacity: .1; position: absolute; top: 10px; left: 15px;
  pointer-events: none;
}
.mktg-voice-card__quote {
  font-size: 13.5px; line-height: 1.65; color: var(--ink);
  margin: 0 0 14px; padding-top: 22px; font-style: italic;
}
.mktg-voice-card__speaker {
  font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 2px;
}
.mktg-voice-card__context {
  font-size: 11.5px; color: var(--muted-soft); line-height: 1.4;
}
.mktg-voice-card--fact { background: var(--navy-50); border-color: #c7d4e8; }
.mktg-voice-card--fact::before { display: none; }
.mktg-voice-card--fact .mktg-voice-card__quote {
  padding-top: 0; font-style: normal; color: var(--navy);
  font-size: 14px; font-weight: 500;
}
.mktg-voice-card__icon {
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--navy); display: flex; align-items: center;
  justify-content: center; margin-bottom: 14px; color: #fff;
}

.mktg-voice-badge {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 10px;
}
.mktg-voice-badge--press { background: #e0e7ff; color: #3730a3; }
.mktg-voice-badge--fsb   { background: #dcfce7; color: #166534; }
.mktg-voice-badge--gov   { background: var(--navy-50); color: var(--navy); }

.mktg-voices__why {
  background: var(--bg-muted); border-left: 3px solid var(--navy);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: 18px 22px;
}
.mktg-voices__why-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--navy); margin: 0 0 8px;
}
.mktg-voices__why-text {
  font-size: 14.5px; line-height: 1.7; color: var(--ink); margin: 0;
}

/* ---- How it works steps ---- */
.mktg-step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 24px; box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.mktg-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #dbe3ee; }
.mktg-step__num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 17px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(14,165,233,.30);
}
.mktg-step h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; color: var(--ink); }
.mktg-step p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ---- Industry cards ---- */
.mktg-industry-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.mktg-industry-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.mktg-industry-card__header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; font-weight: 700; font-size: 14px;
  color: #fff;
}
.mktg-industry-card__header--construction { background: linear-gradient(135deg, #0EA5E9, #0284C7); }
.mktg-industry-card__header--care { background: linear-gradient(135deg, #059669, #0da870); }
.mktg-industry-card__header--security { background: linear-gradient(135deg, #0f172a, #1e293b); }
.mktg-industry-card__header--hospitality { background: linear-gradient(135deg, #d97706, #f59e0b); }

.mktg-cred-list {
  list-style: none; padding: 16px 20px; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.mktg-cred-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-soft);
}
.mktg-cred-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.mktg-cred-dot--required { background: var(--red); }
.mktg-cred-dot--standard { background: var(--muted-soft); }

.mktg-industry-card__note {
  font-size: 12px; color: var(--muted); line-height: 1.55;
  padding: 12px 20px 16px; border-top: 1px solid var(--line-soft);
  margin: 0; background: var(--bg-muted);
}

/* ---- Dark features section ---- */
.mktg-features-dark {
  background: #0d1e35; border-top: none;
}
.mktg-feature-item h3 { font-size: 1rem; font-weight: 700; color: #fff; margin: 10px 0 8px; }
.mktg-feature-item p { font-size: 13.5px; color: #94a3b8; line-height: 1.6; margin: 0; }
.mktg-feature-item__icon {
  width: 40px; height: 40px; border-radius: var(--radius);
  background: rgba(255,255,255,.1); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Pricing ---- */
.mktg-pricing {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 36px; align-items: start;
}
@media (max-width: 768px) {
  .mktg-pricing { grid-template-columns: 1fr; }
}

.mktg-price-card--main {
  background: var(--ink); color: #fff;
  border-radius: var(--radius-lg); padding: 32px;
  position: relative;
}
.mktg-price-card__badge {
  display: inline-flex; background: var(--amber); color: var(--ink);
  font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: var(--radius-pill); letter-spacing: .03em;
  text-transform: uppercase; margin-bottom: 16px;
}
.mktg-price-card__name {
  font-size: 13px; font-weight: 600; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;
}
.mktg-price-card__amount {
  font-size: 3.5rem; font-weight: 800; color: #fff; line-height: 1;
  margin-bottom: 4px; letter-spacing: -.04em;
}
.mktg-price-card__currency { font-size: 1.8rem; vertical-align: top; margin-top: 8px; display: inline-block; }
.mktg-price-card__per { font-size: 1.2rem; font-weight: 400; color: #94a3b8; }
.mktg-price-card__sub { font-size: 13px; color: #94a3b8; margin: 0 0 24px; }
.mktg-price-card__trial-note { font-size: 12px; color: #64748b; text-align: center; margin: 10px 0 24px; }

.mktg-price-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.mktg-price-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: #cbd5e1;
}
.mktg-price-features li svg { color: var(--green); flex-shrink: 0; }

/* Price comparison box */
.mktg-price-compare {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow-sm);
}
.mktg-price-compare h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 16px; }
.mktg-price-compare__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
  gap: 12px;
}
.mktg-price-compare__row:last-of-type { border-bottom: none; }
.mktg-price-compare__row span:first-child { font-size: 13px; color: var(--ink-soft); }
.mktg-price-compare__cost { font-size: 13px; font-weight: 700; white-space: nowrap; }
.mktg-price-compare__cost--good { color: var(--green-700); }
.mktg-price-compare__cost--bad { color: var(--red); }
.mktg-price-compare__note {
  font-size: 12px; color: var(--muted); line-height: 1.55;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft);
}

/* ---- Closing CTA band ---- */
.mktg-cta-band {
  background: linear-gradient(135deg, #0d1e35 0%, #0a1828 60%, #070f1c 100%);
  padding: 80px 0;
  position: relative; overflow: hidden;
}
.mktg-cta-band::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px;
}
.mktg-cta-band__inner {
  text-align: center;
}
.mktg-cta-band__inner h2 {
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.4rem);
  font-weight: 800; color: #fff; margin: 0 0 12px;
  letter-spacing: -.025em;
}
.mktg-cta-band__inner p {
  font-size: 1rem; color: rgba(255,255,255,.8);
  margin: 0 0 28px;
}

/* Marketing page overrides */
.marketing-page main > .container,
.marketing-page main > .container-wide,
.marketing-page main > .container-narrow { padding-top: 0; padding-bottom: 0; }

/* =========================================================================
   MARKETING — Announcement bar
   ========================================================================= */
/* Announcement bar lives inside .site-nav (fixed), so nav height grows.
   The marketing page overrides .site-nav-spacer via .mktg-with-bar on <body>
   to compensate — set via template body_class. Alternatively we bump the
   spacer height for all pages with the bar using a sibling selector. */
.mktg-announce-bar {
  background: var(--ink); color: #fff;
  padding: 10px 24px; display: flex; align-items: center;
  justify-content: center; flex-wrap: wrap; gap: 12px;
  font-size: 13px; text-align: center;
}
/* When announcement bar is inside .site-nav, the spacer below must be taller */
.site-nav:has(.mktg-announce-bar) + .site-nav-spacer {
  height: 96px;
}
.mktg-announce-bar__text {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.92);
}
.mktg-announce-bar__text svg { color: #fbbf24; flex-shrink: 0; }
.mktg-announce-bar__text strong { color: #fff; }
.mktg-announce-bar__cta {
  display: inline-flex; align-items: center;
  background: #ffffff; border: 1px solid transparent;
  color: #111128; font-size: 12.5px; font-weight: 600;
  padding: 5px 14px; border-radius: var(--radius-pill);
  white-space: nowrap; transition: background var(--t-fast) var(--ease);
}
.mktg-announce-bar__cta:hover { background: rgba(255,255,255,.90); }

/* =========================================================================
   MARKETING — Industry pills (hero)
   ========================================================================= */
.mktg-hero__industry-pills {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;
}
.mktg-industry-pill {
  font-size: 12px; font-weight: 500; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 4px 12px;
  white-space: nowrap;
}

/* =========================================================================
   MARKETING — Setup preview ("first 10 minutes")
   ========================================================================= */
.mktg-setup-preview { background: var(--bg-muted); }
.mktg-setup-steps {
  display: flex; align-items: flex-start; gap: 0;
  margin: 36px 0 32px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.mktg-setup-step {
  flex: 1; padding: 28px 24px;
}
.mktg-setup-step__time {
  font-size: 11px; font-weight: 700; color: var(--blue);
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--blue-50); border: 1px solid var(--blue-100);
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.mktg-setup-step h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.mktg-setup-step p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
.mktg-setup-connector {
  width: 1px; background: var(--line); align-self: stretch; flex-shrink: 0;
}
.mktg-setup-cta {
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.mktg-setup-cta__note { font-size: 12px; color: var(--muted); }
@media (max-width: 768px) {
  .mktg-setup-steps { flex-direction: column; }
  .mktg-setup-connector { width: 100%; height: 1px; }
}

/* =========================================================================
   MARKETING — Pricing toggle (monthly / annual)
   ========================================================================= */
.mktg-pricing-toggle {
  display: flex; justify-content: center; gap: 4px;
  background: var(--bg-muted); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 4px;
  width: fit-content; margin: 24px auto 0;
}
.mktg-toggle-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--muted); padding: 8px 20px; border-radius: var(--radius-pill);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mktg-toggle-btn--active {
  background: #fff; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.mktg-toggle-save {
  font-size: 10.5px; font-weight: 700; color: var(--green-700);
  background: var(--green-100); padding: 2px 7px; border-radius: var(--radius-pill);
  border: 1px solid var(--green-200);
}

/* =========================================================================
   MARKETING — Enforcement stats strip
   ========================================================================= */
.mktg-stat-strip {
  background: #0d1e35; padding: 40px 0;
}
.mktg-stat-strip__inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.mktg-stat-box {
  text-align: center; padding: 8px 16px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.mktg-stat-box:last-child { border-right: none; }
.mktg-stat-box__number {
  font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800;
  color: #fff; letter-spacing: -.04em; line-height: 1; margin-bottom: 12px;
}
.mktg-stat-box__label {
  font-size: 13.5px; color: #94a3b8; line-height: 1.5; margin-bottom: 8px;
}
.mktg-stat-box__source {
  font-size: 11px; color: rgba(255,255,255,.55); font-style: italic;
}
@media (max-width: 640px) {
  /* Keep 3-across even on mobile — vertical stacking wastes space and loses visual punch */
  .mktg-stat-strip__inner { gap: 0; }
  .mktg-stat-box { border-right: 1px solid rgba(255,255,255,.12); border-bottom: none; padding: 20px 8px; }
  .mktg-stat-box:last-child { border-right: none; }
  .mktg-stat-box__number { font-size: clamp(1.5rem, 8vw, 2.4rem); margin-bottom: 8px; }
  .mktg-stat-box__label { font-size: 11px; line-height: 1.4; }
  .mktg-stat-box__source { display: none; }
}

/* =========================================================================
   MARKETING — Email reminder preview section
   ========================================================================= */
.mktg-email-section {
  background: var(--bg-muted);
}
.mktg-email-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
@media (max-width: 768px) {
  .mktg-email-layout { grid-template-columns: 1fr; gap: 32px; }
}
.mktg-email-benefits {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.mktg-email-benefits li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.5;
}
.mktg-email-benefits li svg { color: var(--green); flex-shrink: 0; margin-top: 2px; }

.mktg-email-mock {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; font-size: 13px;
}
.mktg-email-mock__header {
  background: var(--bg-muted); border-bottom: 1px solid var(--line);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
}
.mktg-email-mock__from {
  display: flex; align-items: center; gap: 10px;
}
.mktg-email-mock__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mktg-email-mock__sender { font-size: 13px; font-weight: 600; color: var(--ink); }
.mktg-email-mock__addr { font-size: 11px; color: var(--muted); }
.mktg-email-mock__subject {
  font-size: 13px; font-weight: 600; color: var(--ink);
  line-height: 1.4;
}
.mktg-email-mock__body { padding: 18px; }
.mktg-email-cred-row {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--amber-50); border: 1px solid var(--amber-200);
  border-left: 3px solid var(--amber); border-radius: var(--radius);
  padding: 12px 14px; margin: 0 0 16px;
}
.mktg-email-cred-row--amber .mktg-email-cred-row__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); flex-shrink: 0; margin-top: 4px;
}
.mktg-email-cred-row__name { font-size: 13px; font-weight: 600; color: var(--ink); }
.mktg-email-cred-row__detail { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.mktg-email-btn {
  display: inline-flex; align-items: center;
  background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 9px 18px; border-radius: var(--radius);
  text-decoration: none; margin-bottom: 4px;
}

/* =========================================================================
   MARKETING — ROI Calculator
   ========================================================================= */
.mktg-roi-section {
  background: linear-gradient(160deg, #f5f8ff 0%, #f4faf6 100%);
  border-top: 1px solid var(--line-soft);
}
.mktg-roi {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 36px;
  box-shadow: var(--shadow-md); margin-top: 32px;
}
.mktg-roi__label {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 16px;
}
.mktg-roi__slider-row {
  display: flex; align-items: center; gap: 12px;
}
.mktg-roi__slider-min, .mktg-roi__slider-max {
  font-size: 12px; color: var(--muted); font-weight: 500; flex-shrink: 0;
}
.mktg-roi__slider {
  width: 100%; flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 6px; background: var(--line); border-radius: var(--radius-pill);
  outline: none; cursor: pointer;
}
.mktg-roi__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); cursor: pointer;
  box-shadow: 0 2px 6px rgba(2,132,199,.3);
  border: 2px solid #fff;
}
.mktg-roi__slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); cursor: pointer;
  box-shadow: 0 2px 6px rgba(2,132,199,.3);
  border: 2px solid #fff;
}
.mktg-roi__worker-count {
  text-align: center; margin-top: 10px;
  font-size: 1.4rem; font-weight: 700; color: var(--blue);
}
.mktg-roi__results {
  display: flex; align-items: center; gap: 20px;
  margin: 28px 0 24px; flex-wrap: wrap;
}
.mktg-roi-card {
  flex: 1; min-width: 180px;
  border-radius: var(--radius-lg); padding: 24px 20px; text-align: center;
}
.mktg-roi-card--risk {
  background: var(--red-50); border: 1px solid var(--red-200);
}
.mktg-roi-card--safe {
  background: var(--green-50); border: 1px solid var(--green-200);
}
.mktg-roi-card__icon {
  width: 40px; height: 40px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
}
.mktg-roi-card--risk .mktg-roi-card__icon { background: var(--red-100); color: var(--red); }
.mktg-roi-card--safe .mktg-roi-card__icon { background: var(--green-100); color: var(--green); }
.mktg-roi-card__label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.mktg-roi-card__value {
  font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1; margin-bottom: 6px;
}
.mktg-roi-card--risk .mktg-roi-card__value { color: var(--red); }
.mktg-roi-card--safe .mktg-roi-card__value { color: var(--green-700); }
.mktg-roi-card__note { font-size: 11px; color: var(--muted); }
.mktg-roi-vs {
  font-size: 13px; font-weight: 700; color: var(--muted);
  flex-shrink: 0; text-align: center;
}
.mktg-roi__conclusion {
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: var(--radius); padding: 16px 20px;
  font-size: 15px; color: var(--ink);
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}
.mktg-roi__conclusion strong { color: var(--blue); font-size: 1.1em; }
@media (max-width: 640px) {
  .mktg-roi { padding: 24px 18px; }
  .mktg-roi__results { flex-direction: column; }
  .mktg-roi-vs { transform: rotate(90deg); }
  .mktg-roi__conclusion { flex-direction: column; }
}

/* =========================================================================
   MARKETING — Pricing guarantee badge
   ========================================================================= */
.mktg-price-guarantee {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 12px; color: #94a3b8; margin-top: 20px;
}
.mktg-price-guarantee svg { color: var(--green); flex-shrink: 0; }
.mktg-price-compare__why {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.mktg-price-compare__why strong {
  font-size: 13px; color: var(--ink); display: block; margin-bottom: 4px;
}
.mktg-price-compare__why p {
  font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0;
}

/* =========================================================================
   MARKETING — FAQ Section
   ========================================================================= */
.mktg-faq-section { background: var(--bg-muted); }
.mktg-faq {
  margin-top: 32px; display: flex; flex-direction: column; gap: 8px;
}
.mktg-faq__item {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.mktg-faq__q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 20px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none; user-select: none;
  transition: background var(--t-fast) var(--ease);
}
.mktg-faq__q::-webkit-details-marker { display: none; }
.mktg-faq__q:hover { background: var(--bg-muted); }
.mktg-faq__chevron {
  flex-shrink: 0; color: var(--muted);
  transition: transform var(--t-base) var(--ease);
  font-size: 22px; font-weight: 300; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
}
.mktg-faq__item[open] .mktg-faq__chevron { transform: rotate(45deg); }
.mktg-faq__a {
  padding: 0 20px 20px;
  font-size: 14px; color: var(--ink-soft); line-height: 1.65;
  border-top: 1px solid var(--line-soft);
}
.mktg-faq__a p { margin: 12px 0 0; }
.mktg-faq__a p:first-child { margin-top: 12px; }
.mktg-faq__a strong { color: var(--ink); }

/* =========================================================================
   MARKETING — Closing CTA badges
   ========================================================================= */
.mktg-cta-badges {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-bottom: 28px;
}
.mktg-cta-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9); font-size: 12.5px; font-weight: 500;
  padding: 5px 14px; border-radius: var(--radius-pill);
}
.mktg-cta-badge svg { color: rgba(255,255,255,.7); }

/* =========================================================================
   DASHBOARD REDESIGN — enhanced app-shell components
   ========================================================================= */

.dash-container { padding-top: 32px; padding-bottom: 64px; }

/* Dashboard page header */
.dash-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.dash-header__left { min-width: 0; }
.dash-header__right { display: flex; gap: 8px; flex-wrap: wrap; }

.dash-org-name {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem);
  font-weight: 800; letter-spacing: -.03em; color: var(--ink);
  margin: 0 0 4px; line-height: 1.1;
}
.dash-lastrun { font-size: 12px; color: var(--muted); margin: 0; }

/* Compliance status pill shown on dashboard header */
.dash-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 12px;
  border-radius: var(--radius-pill); margin-top: 8px;
}
.dash-status-pill--ok {
  background: var(--green-50); border: 1px solid var(--green-200); color: var(--green-700);
}
.dash-status-pill--warn {
  background: var(--amber-50); border: 1px solid var(--amber-200); color: var(--amber-700);
}
.dash-status-pill--danger {
  background: var(--red-50); border: 1px solid var(--red-200); color: var(--red-700);
}
.dash-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentcolor;
}

/* Summary cards */
.dash-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-bottom: 20px;
}

.dash-summary-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 16px;
  border-top: 4px solid var(--line);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.dash-summary-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.dash-summary-card__icon {
  width: 48px; height: 48px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--bg-muted);
}
.dash-summary-card__n {
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
  letter-spacing: -.04em;
}
.dash-summary-card__l { font-size: 12px; color: var(--muted); margin-top: 5px; font-weight: 500; }

.dash-summary-card--red { border-top-color: var(--red); }
.dash-summary-card--red.dash-summary-card--active { background: var(--red-50); border-color: var(--red-200); border-top-color: var(--red); }
.dash-summary-card--red.dash-summary-card--active .dash-summary-card__icon { background: var(--red-100); color: var(--red); }
.dash-summary-card--red .dash-summary-card__n { color: var(--red); }

.dash-summary-card--amber { border-top-color: var(--amber); }
.dash-summary-card--amber.dash-summary-card--active { background: var(--amber-50); border-color: var(--amber-200); border-top-color: var(--amber); }
.dash-summary-card--amber.dash-summary-card--active .dash-summary-card__icon { background: var(--amber-100); color: var(--amber); }
.dash-summary-card--amber .dash-summary-card__n { color: var(--amber-700); }

.dash-summary-card--green { border-top-color: var(--green); }
.dash-summary-card--green.dash-summary-card--active { background: var(--green-50); border-color: var(--green-200); border-top-color: var(--green); }
.dash-summary-card--green.dash-summary-card--active .dash-summary-card__icon { background: var(--green-100); color: var(--green); }
.dash-summary-card--green .dash-summary-card__n { color: var(--green-700); }

/* Mobile: keep 3-across compact for instant at-a-glance scanning */
@media (max-width: 600px) {
  .dash-summary { gap: 10px; }
  .dash-summary-card { padding: 14px 14px; gap: 10px; }
  .dash-summary-card__icon { width: 36px; height: 36px; display: none; }
  .dash-summary-card__n { font-size: 1.9rem; }
  .dash-summary-card__l { font-size: 11px; }
}

/* Alert banner spacing */
.dash-alert { margin-bottom: 20px; }

/* Section label above credential list */
.dash-section-label {
  font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 28px 0 14px; display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.dash-section-label__count {
  background: var(--ink); color: #fff;
  border-radius: var(--radius-pill); padding: 2px 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 0;
}

/* Credential type tags on dashboard rows */
.cred-type-tag {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--blue-50); color: var(--blue);
  border: 1px solid var(--blue-100);
}
.cred-type-tag--sia { background: #f0f0ff; color: #4c1d95; border-color: #ddd6fe; }
.cred-type-tag--cscs { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.cred-type-tag--rtw_recheck { background: #fef2f2; color: var(--red-700); border-color: var(--red-200); }
.cred-type-tag--visa { background: #fef2f2; color: var(--red-700); border-color: var(--red-200); }
.cred-type-tag--dbs { background: #f0fdf4; color: var(--green-700); border-color: var(--green-200); }
.cred-type-tag--food_hygiene { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.cred-type-tag--gas_safe { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.cred-type-tag--first_aid { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
.cred-type-tag--personal_licence { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.cred-type-tag--insurance { background: var(--bg-muted); color: var(--muted); border-color: var(--line); }
.cred-type-tag--other { background: var(--bg-muted); color: var(--muted); border-color: var(--line); }

/* Improved renew form */
.renew-form { display: flex; align-items: center; gap: 6px; }
.renew-form__date {
  width: 145px; padding: 6px 10px; font-size: 12.5px;
  border-radius: var(--radius-sm);
}
.renew-form__btn { white-space: nowrap; }

/* Urgency-aware renew button — overrides .btn-secondary on red/amber rows */
.renew-form__btn--danger {
  background: var(--red); color: #fff;
  border-color: var(--red); font-weight: 700;
  box-shadow: 0 2px 8px -2px rgba(220,38,38,.30);
}
.renew-form__btn--danger:hover {
  background: #b91c1c; color: #fff; border-color: #b91c1c;
  box-shadow: 0 4px 14px -2px rgba(220,38,38,.44);
}
.renew-form__btn--warn {
  background: var(--amber-50); color: var(--amber-700);
  border-color: var(--amber); font-weight: 700;
}
.renew-form__btn--warn:hover {
  background: var(--amber); color: #fff; border-color: var(--amber);
  box-shadow: 0 4px 12px -2px rgba(217,119,6,.32);
}

/* Badges now include inline SVG dots instead of CSS ::before */
.badge-ok, .badge-warning, .badge-overdue {
  gap: 5px;
}
.badge-ok::before, .badge-warning::before, .badge-overdue::before { display: none; }

/* Flash toast improvements */
.toast {
  display: flex; align-items: center; gap: 8px;
}

/* Dashboard credential row improvements */
.client-row__deadline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .dash-header { flex-direction: column; }
  .dash-header__right { width: 100%; justify-content: stretch; }
  .dash-header__right .btn { flex: 1; justify-content: center; min-height: 44px; }
  .renew-form { flex-wrap: wrap; gap: 8px; }
  .renew-form__date { flex: 1; min-width: 140px; padding: 10px 12px; font-size: 15px; min-height: 44px; }
  .renew-form__btn { flex: 0 0 auto; min-height: 44px; padding: 10px 16px; }
}
@media (max-width: 480px) {
  .renew-form { flex-direction: column; }
  .renew-form__date { width: 100%; }
  .renew-form__btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   AUTH PAGES — split layout for login/signup
   ========================================================================= */
.auth-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: start; padding: 48px 0 72px; max-width: 820px; margin: 0 auto;
}
.auth-split--login { grid-template-columns: 1fr; max-width: 440px; }
.auth-split__form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 36px; box-shadow: var(--shadow-md); }
.auth-split__proof { background: var(--bg-auth-proof); border-radius: var(--radius-lg); padding: 36px; border: 1px solid rgba(255,255,255,.06); }

.auth-back-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--muted); font-weight: 500;
  margin-bottom: 20px; transition: color var(--t-fast) var(--ease);
}
.auth-back-link:hover { color: var(--ink); }

.auth-logo-mark {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 16px; color: var(--ink);
  margin-bottom: 24px;
}

.auth-h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 8px; color: var(--ink); }
.auth-lead { font-size: 13.5px; color: var(--muted); margin: 0 0 24px; line-height: 1.5; }

.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.auth-field input { width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; background: #fff; color: var(--ink); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.auth-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(2,132,199,.18); outline: none; }

.auth-form__note { font-size: 12px; color: var(--muted); text-align: center; margin: 10px 0 0; }
.auth-switch { font-size: 13px; color: var(--muted); margin: 20px 0 0; text-align: center; }

/* Auth proof ROI mini-table */
.auth-proof-roi {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 14px 16px; margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.auth-proof-roi__row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: #cbd5e1; gap: 12px;
}
.auth-proof-roi__bad { font-weight: 700; color: #fca5a5; white-space: nowrap; }
.auth-proof-roi__good { font-weight: 700; color: #6ee7b7; white-space: nowrap; }
.auth-proof-roi__note { font-size: 11px; color: #94a3b8; margin: -12px 0 20px; text-align: center; }
.auth-proof-footer {
  font-size: 11.5px; color: #475569; text-align: center; margin: 16px 0 0;
}

/* Auth proof panel */
.auth-proof-badge {
  display: flex; align-items: center; gap: 8px;
  background: rgba(239,68,68,.15); color: #fca5a5;
  font-size: 12px; font-weight: 600; padding: 6px 14px;
  border-radius: var(--radius); margin-bottom: 16px;
  border: 1px solid rgba(252,165,165,.2);
  width: fit-content;
}
.auth-proof-title { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0 0 20px; line-height: 1.3; }
.auth-proof-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.auth-proof-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #cbd5e1; }
.auth-proof-list li svg { color: var(--green); flex-shrink: 0; margin-top: 1px; }

/* Login page trust strip — fills the empty space below the lone form card */
.auth-login-trust {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px 0 8px; align-items: center;
}
.auth-login-trust__item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); font-weight: 500;
}
.auth-login-trust__item svg { color: var(--green); flex-shrink: 0; }

@media (max-width: 640px) {
  .auth-split { grid-template-columns: 1fr; gap: 20px; padding: 24px 0 48px; }
  /* Form first on mobile — reduce friction, don't bury the CTA below proof text */
  .auth-split__proof { order: 1; }
  .auth-split__form { order: 0; border-radius: var(--radius); padding: 24px 20px; }
  /* Compact proof panel on mobile */
  .auth-split__proof { padding: 24px 20px; border-radius: var(--radius); }
}

/* =========================================================================
   CREDENTIAL FORM — radio grid type selector
   ========================================================================= */
.cred-form-header { margin-bottom: 20px; }
.cred-form-staff-name { color: var(--blue); }

.cred-type-grid__label { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.cred-type-options {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px;
}
@media (max-width: 480px) {
  .cred-type-options { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cred-type-option__inner { padding: 16px 8px; min-height: 72px; justify-content: center; }
  .cred-type-option__icon { font-size: 28px; }
  .cred-type-option__name { font-size: 12.5px; }
}
.cred-type-option { cursor: pointer; }
.cred-type-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.cred-type-option__inner {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: #fff; text-align: center; font-size: 12px; font-weight: 500;
  color: var(--ink-soft); transition: all var(--t-fast) var(--ease);
  cursor: pointer;
}
.cred-type-option__icon { font-size: 22px; line-height: 1; }
.cred-type-option__name { font-size: 11.5px; line-height: 1.3; }
.cred-type-option:hover .cred-type-option__inner { border-color: var(--blue); background: var(--blue-50); color: var(--ink); }
.cred-type-option input[type="radio"]:checked + .cred-type-option__inner {
  border-color: var(--blue); background: var(--blue-50);
  color: var(--blue); font-weight: 600;
  box-shadow: 0 0 0 2px rgba(2,132,199,.18);
}

/* Staff form */
.cred-form-header h1 { font-size: 1.4rem; font-weight: 700; margin: 8px 0 4px; }

/* =========================================================================
   APP + AUTH PAGE POLISH — shared utilities for form and content pages
   ========================================================================= */

/* Narrow container for form pages (settings, staff, import etc.) */
.container-form { max-width: 560px; }
.container-form--wide { max-width: 680px; }

/* Page-level heading for form pages */
.page-form-title { margin: 12px 0 6px; }
.page-form-lead { color: var(--muted); margin: 0 0 24px; }

/* Card variant for form pages — slightly more padding */
.card-form { padding: 28px 32px; }
.card-form + .card-form { margin-top: 16px; }
.card-form__title { font-size: 15px; font-weight: 600; margin: 0 0 16px; color: var(--ink); }

/* Stacked form field — label wraps the input */
.form-field { display: block; margin-bottom: 16px; }
.form-field--mt { margin-top: 12px; }
.form-required { color: var(--red); font-size: 11px; font-weight: 600; margin-left: 4px; }
.form-optional { font-weight: 400; font-size: 12px; }
.form-hint { font-size: 12px; color: var(--muted); display: block; margin-top: 6px; }
.form-field-label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 4px; }
.form-field-value { font-size: 15px; font-weight: 500; color: var(--ink); }
.settings-plan-note { font-size: 13px; font-weight: 400; color: var(--muted); }

/* Fieldset for credential form sections */
.form-fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px 18px; margin-top: 16px; }

/* Checkbox label row */
.checkbox-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; cursor: pointer; font-size: 14px; }

/* Amber warning text (inline) */
.text-amber-warn { color: var(--amber-700); font-weight: 500; }

/* Bulk action bar above credential list */
.bulk-bar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  background: transparent; border: none;
  border-bottom: 1px solid var(--line-soft);
  padding: 4px 2px 10px;
  font-size: 13px;
}
.bulk-bar__select-all { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; color: var(--ink-soft); font-weight: 500; }
.bulk-bar .btn { margin-left: auto; }

/* Checkbox inside a credential row */
.row-check { margin-right: 8px; flex-shrink: 0; }

/* Trial banner: info-style so it doesn't compete visually with compliance alerts */
.trial-banner-wrap { padding: 16px 0 0; }
.trial-banner-container { padding-top: 0 !important; padding-bottom: 0 !important; }
.trial-banner { margin-bottom: 0; background: var(--navy-50); border-color: var(--blue-100); border-left-color: var(--blue); color: var(--blue); }
.trial-banner .callout__icon { color: var(--blue); }
.trial-banner__body { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: #1e3a8a; }
/* Higher specificity (0,3,1) beats main a:not(...) (0,2,2) — no !important needed */
main .trial-banner a.trial-banner__cta,
main .trial-banner a.trial-banner__cta:hover {
  color: #fff;
  text-decoration: none;
}
.trial-banner__cta {
  display: inline-flex; align-items: center;
  white-space: nowrap; font-weight: 600; font-size: 12.5px;
  background: var(--blue);
  padding: 5px 14px; border-radius: var(--radius-pill);
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  box-shadow: 0 1px 4px rgba(2,132,199,.20);
}
.trial-banner__cta:hover {
  background: var(--blue-700);
  box-shadow: 0 2px 8px rgba(2,132,199,.3);
}
.trial-banner__close { background: none; border: none; color: var(--blue); padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.7; transition: opacity 0.2s; }
.trial-banner__close:hover { opacity: 1; }

/* Welcome page header (legacy — kept for any remaining references) */
.welcome-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.welcome-header__icon { width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--green-50); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--green-200); }

/* Welcome hero (redesigned) */
.welcome-hero {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 28px;
}
.welcome-hero__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--green-50); color: var(--green);
  border: 1px solid var(--green-200);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.welcome-hero__title {
  font-size: clamp(1.3rem, 1rem + 1.5vw, 1.9rem);
  font-weight: 800; letter-spacing: -.025em; color: var(--ink); margin: 0 0 4px;
}
.welcome-hero__sub { font-size: 14px; color: var(--muted); margin: 0; }

/* Welcome next-steps section */
.welcome-next { margin: 8px 0 28px; }
.welcome-next__title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 14px; }
.welcome-next__steps { display: flex; flex-direction: column; gap: 8px; }
.welcome-step {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px 20px;
  box-shadow: var(--shadow-sm); color: var(--ink);
  transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.welcome-step:hover { box-shadow: var(--shadow-md); border-color: var(--blue); }
.welcome-step__num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.welcome-step__body { flex: 1; min-width: 0; }
.welcome-step__body strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.welcome-step__body p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.welcome-step__arrow { color: var(--muted-soft); flex-shrink: 0; }
.welcome-step:hover .welcome-step__arrow { color: var(--blue); }
@media (max-width: 480px) {
  .welcome-hero { flex-direction: column; gap: 12px; }
  .welcome-hero__icon { width: 52px; height: 52px; }
}

/* Import table */
.import-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.import-table th { text-align: left; font-weight: 600; color: var(--ink); padding: 10px 14px; background: var(--bg-muted); border-bottom: 1px solid var(--line); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.import-table td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); }
.import-table tr:last-child td { border-bottom: none; }

/* Import page field reference (collapsible) */
.import-ref { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.import-ref__summary { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 6px; }
.import-ref__summary::-webkit-details-marker { display: none; }
.import-ref__summary::before { content: "›"; font-size: 16px; line-height: 1; transition: transform .15s; }
details[open] .import-ref__summary::before { transform: rotate(90deg); }
.import-ref__body { padding: 12px 14px; border-top: 1px solid var(--line-soft); background: var(--bg-muted); display: flex; flex-direction: column; gap: 10px; }
.import-ref__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 12px; }
.import-ref__col { min-width: 160px; color: var(--ink); }
.import-ref__vals { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.import-ref__hint { color: var(--muted); font-size: 11px; }
.import-ref__note { font-size: 11px; color: var(--muted); margin: 2px 0 0; }

/* Auth status icon (above heading on confirm/link-sent/invalid pages) */
.auth-status-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.auth-status-icon--success { background: var(--green-50); color: var(--green); border: 1px solid var(--green-200); }
.auth-status-icon--warn { background: var(--amber-50); color: var(--amber-700); border: 1px solid var(--amber-200); }

/* =========================================================================
   SUBSCRIBE PAGE — trial-ended conversion page
   ========================================================================= */
.subscribe-page { padding-top: 48px; padding-bottom: 64px; }

.subscribe-header { text-align: center; margin-bottom: 40px; }
.subscribe-header__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--amber-50); color: var(--amber-700);
  border: 1px solid var(--amber-200);
  font-size: 12.5px; font-weight: 600; padding: 5px 14px;
  border-radius: var(--radius-pill); margin-bottom: 16px;
}
.subscribe-header__eyebrow--active {
  background: rgba(34,197,94,.1); color: #16803c;
  border-color: rgba(34,197,94,.25);
}
.subscribe-header__h1 { font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem); font-weight: 800; letter-spacing: -.025em; margin: 0 0 12px; }
.subscribe-header__lead { font-size: 1.05rem; color: var(--ink-soft); max-width: 52ch; margin: 0 auto; line-height: 1.6; }

.subscribe-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  align-items: start; max-width: 840px; margin: 0 auto;
}
@media (max-width: 700px) {
  .subscribe-layout { grid-template-columns: 1fr; }
}

.subscribe-card { border-radius: var(--radius-lg); }
.subscribe-price-row { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 4px; }
.subscribe-features { margin: 24px 0 0; }

/* Why-it-matters column */
.subscribe-why { padding: 4px 0; }
.subscribe-why__title { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 20px; }
.subscribe-why__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.subscribe-why__item { display: flex; align-items: flex-start; gap: 14px; }
.subscribe-why__item strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.subscribe-why__item p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
.subscribe-why__icon { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.subscribe-why__icon--red { background: var(--red-50); color: var(--red); border: 1px solid var(--red-200); }
.subscribe-why__icon--amber { background: var(--amber-50); color: var(--amber-700); border: 1px solid var(--amber-200); }
.subscribe-why__icon--green { background: var(--green-50); color: var(--green); border: 1px solid var(--green-200); }

.subscribe-footer { text-align: center; margin-top: 32px; }

/* =========================================================================
   DASHBOARD — Rich empty state
   ========================================================================= */
.dash-empty {
  text-align: center; padding: 56px 24px 48px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.dash-empty__icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--blue-50); color: var(--blue);
  border: 1px solid var(--blue-100);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.dash-empty__title {
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
  font-weight: 700; color: var(--ink); margin: 0 0 10px;
  letter-spacing: -.02em;
}
.dash-empty__body {
  font-size: 14.5px; color: var(--muted); max-width: 46ch;
  margin: 0 auto 28px; line-height: 1.6;
}
.dash-empty__ctas {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap; margin-bottom: 40px;
}
.dash-empty__steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  text-align: left; max-width: 720px; margin: 0 auto;
  padding-top: 32px; border-top: 1px solid var(--line-soft);
}
.dash-empty__step {
  display: flex; gap: 14px; align-items: flex-start;
}
.dash-empty__step-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.dash-empty__step strong {
  display: block; font-size: 13.5px; font-weight: 700;
  color: var(--ink); margin-bottom: 4px;
}
.dash-empty__step p {
  font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0;
}
@media (max-width: 640px) {
  .dash-empty { padding: 40px 20px 36px; }
  .dash-empty__steps { grid-template-columns: 1fr; gap: 16px; }
  .dash-empty__ctas { flex-direction: column; align-items: stretch; }
  .dash-empty__ctas .btn { justify-content: center; }
}

/* =========================================================================
   MARKETING — Sticky mobile CTA bar
   Appears on mobile after the user scrolls 400px past the hero.
   JS adds/removes .is-visible. Hidden on desktop.
   ========================================================================= */
.mktg-mobile-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  padding: 12px 16px 16px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(15,23,42,.08);
  transform: translateY(100%);
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
  opacity: 0;
}
@media (max-width: 768px) {
  .mktg-mobile-cta { display: block; }
  .mktg-mobile-cta.is-visible { transform: translateY(0); opacity: 1; }
}

/* =========================================================================
   MARKETING — Testimonials strip
   ========================================================================= */
.mktg-testimonials {
  padding: 56px 0; background: var(--bg-muted);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.mktg-testimonial-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.mktg-testimonial {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px;
  box-shadow: var(--shadow-sm);
}
.mktg-testimonial__quote {
  font-size: 14px; color: var(--ink-soft); line-height: 1.65;
  margin: 0 0 18px; font-style: italic;
}
.mktg-testimonial__quote::before { content: '\201C'; }
.mktg-testimonial__quote::after  { content: '\201D'; }
.mktg-testimonial__author {
  display: flex; align-items: center; gap: 12px;
}
.mktg-testimonial__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mktg-testimonial__author strong {
  display: block; font-size: 13px; color: var(--ink); font-weight: 700;
}
.mktg-testimonial__author span {
  font-size: 12px; color: var(--muted);
}
@media (max-width: 768px) {
  .mktg-testimonial-grid { grid-template-columns: 1fr; }
  .mktg-testimonials { padding: 36px 0; }
}

/* Announce bar dismiss button */
.mktg-announce-bar__dismiss {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.6); padding: 4px; margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.mktg-announce-bar__dismiss:hover { color: #fff; background: rgba(255,255,255,.15); }

/* =========================================================================
   DASHBOARD — Compliance UX v2: audit strip, search, filters, no-expiry badge
   ========================================================================= */

/* Audit trail export strip — highly visible, inspection-ready CTA */
.dash-audit-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--navy-50); border: 1px solid #c7d4e8;
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-lg); padding: 14px 20px;
  margin-bottom: 20px;
}
.dash-audit-strip__copy {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.dash-audit-strip__icon {
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash-audit-strip__copy strong {
  display: block; font-size: 13.5px; font-weight: 700; color: var(--navy);
}
.dash-audit-strip__sub {
  font-size: 12px; color: var(--ink-soft); display: block; margin-top: 1px;
}
.dash-audit-btn {
  white-space: nowrap; flex-shrink: 0;
  border-color: #c7d4e8; color: var(--navy); font-weight: 600;
}
.dash-audit-btn:hover { border-color: var(--navy); color: var(--navy); background: #fff; }
@media (max-width: 540px) {
  .dash-audit-strip { flex-direction: column; align-items: stretch; }
  .dash-audit-btn { justify-content: center; }
}

/* Search + filter controls above the credential list */
.dash-controls {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}

/* Search input */
.dash-search-wrap {
  position: relative; display: flex; align-items: center;
}
.dash-search-icon {
  position: absolute; left: 12px; color: var(--muted-soft); pointer-events: none;
  flex-shrink: 0;
}
.dash-search-input {
  width: 100%; padding: 9px 14px 9px 36px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 13.5px; background: #fff; color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.dash-search-input:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(2,132,199,.18); outline: none;
}
.dash-search-input::placeholder { color: var(--muted-soft); }

/* Filter row (urgency chips) */
.dash-filter-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}

/* Urgency chip color variants (on top of base .urgency-chip) */
.urgency-chip--danger { border-color: var(--red-200); color: var(--red-700); }
.urgency-chip--danger:hover { border-color: var(--red); color: var(--red); }
.urgency-chip--danger[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.urgency-chip--warn { border-color: var(--amber-200); color: var(--amber-700); }
.urgency-chip--warn:hover { border-color: var(--amber); color: var(--amber-700); }
.urgency-chip--warn[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #fff; }
.urgency-chip--ok { border-color: var(--green-200); color: var(--green-700); }
.urgency-chip--ok:hover { border-color: var(--green); color: var(--green-700); }
.urgency-chip--ok[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }

/* Inline urgency dot inside chips */
.uc-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.uc-dot--red { background: var(--red); }
.uc-dot--amber { background: var(--amber); }
.uc-dot--green { background: var(--green); }

/* Credential type filter row */
.dash-type-filter-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.dash-type-label {
  font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; flex-shrink: 0;
}

/* Credential type filter chips */
.type-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  padding: 5px 11px; border-radius: var(--radius-pill);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.type-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-50); }
.type-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.type-chip--clear { color: var(--muted); border-style: dashed; }
.type-chip--clear:hover { color: var(--ink); border-color: var(--muted); background: #fff; }

/* "No expiry — will NOT send reminders" inline badge */
.badge-no-expiry {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--red-50); border: 1px solid var(--red-200);
  color: var(--red); font-size: 11.5px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Inline deadline context text on urgent/overdue rows */
.deadline-overdue-text {
  font-size: 12px; font-weight: 700; color: var(--red);
}
.deadline-urgent-text {
  font-size: 12px; font-weight: 700; color: var(--amber-700);
}

/* Row variant for needs_attention — stronger left accent */
.client-row--no-expiry {
  background: var(--red-50);
  border-left-color: var(--red);
}
.client-row--no-expiry:hover { background: #fde8e8; }

/* Filter empty state */
.dash-filter-empty {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--muted); padding: 24px;
  text-align: center; justify-content: center;
  background: #fff; border: 1px dashed var(--line);
  border-radius: var(--radius-lg); margin-bottom: 24px;
}

/* =========================================================================
   CREDENTIAL FORM v2 — RTW Wizard, conditional sections, inline validation
   ========================================================================= */

/* Progress step indicator */
.cred-step-indicator {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted);
  margin: 10px 0 18px;
}
.cred-step-indicator__sep { color: var(--muted-soft); font-size: 14px; }
.cred-step-indicator__step { display: flex; align-items: center; gap: 6px; }
.cred-step-indicator__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.cred-step-indicator__step--done { color: var(--green-700); }
.cred-step-indicator__step--done .cred-step-indicator__num {
  background: var(--green-100); color: var(--green-700);
}
.cred-step-indicator__step--active { color: var(--blue); font-weight: 600; }
.cred-step-indicator__step--active .cred-step-indicator__num {
  background: var(--blue); color: #fff;
}

/* Credential type group separators */
.cred-type-group-label {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  margin: 0 0 8px; display: flex; align-items: center; gap: 7px;
}
.cred-type-group-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.cred-type-group-badge--legal {
  background: var(--red-50); color: var(--red-700); border: 1px solid var(--red-200);
}
.mb-3 { margin-bottom: 12px; }
.mt-5 { margin-top: 24px; }

/* Legal type options get a subtle tinted border on hover */
.cred-type-options--legal .cred-type-option:hover .cred-type-option__inner {
  border-color: var(--red); background: var(--red-50); color: var(--red-700);
}
.cred-type-options--legal .cred-type-option input[type="radio"]:checked + .cred-type-option__inner {
  border-color: var(--red); background: var(--red-50);
  color: var(--red-700); font-weight: 600;
  box-shadow: 0 0 0 2px rgba(220,38,38,.10);
}

/* Conditional credential sections */
.cred-section[hidden] { display: none !important; }

/* Date input constrained width */
.cred-date-input { max-width: 220px !important; margin-top: 8px; display: block; }
@media (max-width: 480px) { .cred-date-input { max-width: 100% !important; } }

/* RTW intro callout */
.rtw-intro {
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: var(--radius); padding: 13px 16px; margin-bottom: 20px;
}
.rtw-intro__text {
  font-size: 13.5px; color: #1e3a8a; margin: 0; line-height: 1.6;
}

/* RTW basis fieldset — no native fieldset chrome, custom legend */
.rtw-basis-fieldset { border: none; padding: 0; margin: 0; }
.rtw-basis-legend {
  font-size: 14px; font-weight: 700; color: var(--ink);
  margin-bottom: 12px; display: block; float: left; width: 100%;
}

/* RTW option cards */
.rtw-basis-cards { display: flex; flex-direction: column; gap: 8px; clear: both; }
.rtw-basis-radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.rtw-basis-card { display: block; cursor: pointer; margin-bottom: 0; }
.rtw-basis-card__inner {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border: 2px solid var(--line);
  border-radius: var(--radius-lg); background: #fff;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  cursor: pointer;
}
.rtw-basis-card:hover .rtw-basis-card__inner {
  border-color: var(--blue); background: var(--blue-50);
}
.rtw-basis-radio:checked ~ .rtw-basis-card__inner,
.rtw-basis-radio:checked + .rtw-basis-card__inner {
  border-color: var(--blue); background: var(--blue-50);
  box-shadow: 0 0 0 3px rgba(14,165,233,.10);
}
.rtw-basis-card__icon { font-size: 26px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.rtw-basis-card__body { flex: 1; min-width: 0; }
.rtw-basis-card__title {
  display: block; font-size: 14px; font-weight: 700; color: var(--ink);
  margin-bottom: 4px; line-height: 1.35;
}
.rtw-basis-card__desc {
  display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.55;
}
.rtw-basis-card__check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  border: 2px solid var(--line-soft); display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 800;
  color: transparent; background: var(--bg-muted);
  transition: all var(--t-fast) var(--ease);
}
.rtw-basis-radio:checked ~ .rtw-basis-card__inner .rtw-basis-card__check,
.rtw-basis-radio:checked + .rtw-basis-card__inner .rtw-basis-card__check {
  border-color: var(--blue); background: var(--blue); color: #fff;
}
@media (max-width: 480px) {
  .rtw-basis-card__inner { padding: 13px 12px; gap: 10px; }
  .rtw-basis-card__icon { font-size: 22px; }
  .rtw-basis-card__title { font-size: 13.5px; }
}

/* RTW date entry sections */
.rtw-date-section {
  background: var(--bg-muted); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px 20px;
  margin-top: 12px; animation: rtw-section-in 160ms var(--ease) forwards;
}
.rtw-date-section[hidden] { display: none !important; }
.rtw-date-section__label-el { margin-bottom: 0 !important; }
.rtw-date-section__hint {
  display: block; font-size: 12.5px; color: var(--muted);
  margin: 4px 0 0; line-height: 1.55; font-weight: 400;
}
@keyframes rtw-section-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Live reminder preview banner */
.rtw-preview {
  margin-top: 14px; padding: 14px 18px;
  border-radius: var(--radius); font-size: 13.5px; font-weight: 500;
  line-height: 1.55; border: 1px solid;
  animation: rtw-section-in 160ms var(--ease) forwards;
}
.rtw-preview[hidden] { display: none !important; }
.rtw-preview--active {
  background: var(--green-50); color: var(--green-700); border-color: var(--green-200);
}
.rtw-preview--permanent {
  background: var(--blue-50); color: #1e3a8a; border-color: var(--blue-100);
}
.rtw-preview--warn {
  background: var(--amber-50); color: var(--amber-700); border-color: var(--amber-200);
}

/* Inline form error messages */
.form-error-inline {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--red);
  margin-top: 8px; padding: 9px 12px;
  background: var(--red-50); border: 1px solid var(--red-200);
  border-radius: var(--radius-sm);
}
.form-error-inline[hidden] { display: none !important; }

/* Optional details/summary collapse */
.cred-optional-details {
  border: 1px solid var(--line); border-radius: var(--radius);
}
.cred-optional-details > summary {
  padding: 12px 16px; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 6px; margin-bottom: 0;
  user-select: none;
}
.cred-optional-details > summary::-webkit-details-marker { display: none; }
.cred-optional-details > summary::before {
  content: '›'; font-size: 18px; line-height: 1; font-weight: 400;
  transition: transform var(--t-fast) var(--ease); display: inline-block;
}
.cred-optional-details[open] > summary::before { transform: rotate(90deg); }
.cred-optional-details > summary:hover { color: var(--ink); }
.cred-optional-details__body {
  padding: 0 16px 16px; border-top: 1px solid var(--line-soft);
  background: var(--bg-muted); border-radius: 0 0 var(--radius) var(--radius);
}

/* Staff form step indicator (reuses cred-step-indicator) */
.staff-step-indicator { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 10px 0 18px; }
.staff-step-indicator .cred-step-indicator__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  background: var(--blue); color: #fff;
}
.staff-step-indicator__step--active { color: var(--blue); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.staff-step-indicator__step--pending { color: var(--muted-soft); display: flex; align-items: center; gap: 6px; }
.staff-step-indicator__step--pending .cred-step-indicator__num { background: var(--line); color: var(--muted); }
.staff-step-indicator__sep { color: var(--muted-soft); font-size: 14px; }

/* =========================================================================
   MARKETING — Stat strip updates (4-column layout + red variant)
   ========================================================================= */
.mktg-stat-strip__inner { grid-template-columns: repeat(4, 1fr); }
.mktg-stat-box--red .mktg-stat-box__number { color: #ffffff; }
@media (max-width: 860px) {
  .mktg-stat-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .mktg-stat-box { border-right: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.08); }
  .mktg-stat-box:nth-child(2n) { border-right: none; }
  .mktg-stat-box:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 640px) {
  .mktg-stat-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .mktg-stat-box { padding: 18px 10px; }
  .mktg-stat-box__number { font-size: clamp(1.4rem, 7vw, 2rem); }
}

/* =========================================================================
   MARKETING — Mockup overdue row pulse animation
   ========================================================================= */
@keyframes overdue-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.0); }
  50% { box-shadow: 0 0 0 4px rgba(220,38,38,.18); }
}
.mktg-mockup__row--red {
  animation: overdue-pulse 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mktg-mockup__row--red { animation: none; }
}

/* =========================================================================
   MARKETING — "The Alert That Won't Stop" nag sequence section
   ========================================================================= */
.mktg-nag-section {
  background: #0d1e35;
  border-top: none;
}
.mktg-nag-section .eyebrow { color: rgba(255,255,255,.55); }
.mktg-nag-section .section-title { color: #fff; }
.mktg-nag-section .section-sub { color: #94a3b8; }

.mktg-nag-timeline {
  display: flex; align-items: stretch; gap: 0;
  margin: 36px 0 28px; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: 4px;
}
.mktg-nag-node {
  flex: 1; min-width: 140px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg); padding: 20px 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
  transition: background var(--t-base) var(--ease);
  position: relative;
}
.mktg-nag-node:hover { background: rgba(255,255,255,.08); }
.mktg-nag-node__day {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: #64748b;
}
.mktg-nag-node__icon {
  width: 36px; height: 36px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.mktg-nag-node__label {
  font-size: 12px; font-weight: 700; color: #cbd5e1;
  margin-top: 2px;
}
.mktg-nag-node__subject {
  font-size: 11.5px; color: #64748b; line-height: 1.45;
  font-style: italic;
}

/* Node colour states */
.mktg-nag-node--early { }
.mktg-nag-node--early .mktg-nag-node__icon { background: rgba(5,150,105,.15); color: #34d399; }
.mktg-nag-node--early .mktg-nag-node__day { color: #34d399; }

.mktg-nag-node--warning .mktg-nag-node__icon { background: rgba(217,119,6,.15); color: #fbbf24; }
.mktg-nag-node--warning .mktg-nag-node__day { color: #fbbf24; }

.mktg-nag-node--urgent { border-color: rgba(251,146,60,.25); }
.mktg-nag-node--urgent .mktg-nag-node__icon { background: rgba(234,88,12,.2); color: #fb923c; }
.mktg-nag-node--urgent .mktg-nag-node__day { color: #fb923c; }

.mktg-nag-node--critical { border-color: rgba(220,38,38,.3); }
.mktg-nag-node--critical .mktg-nag-node__icon { background: rgba(220,38,38,.2); color: #f87171; }
.mktg-nag-node--critical .mktg-nag-node__day { color: #f87171; }

.mktg-nag-node--overdue {
  background: rgba(220,38,38,.12);
  border-color: rgba(220,38,38,.4);
}
.mktg-nag-node--overdue .mktg-nag-node__day { color: #f87171; font-size: 11px; }
.mktg-nag-node--overdue .mktg-nag-node__label { color: #fca5a5; }
.mktg-nag-node--overdue .mktg-nag-node__subject { color: #f87171; }

@keyframes nag-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.0); background: rgba(220,38,38,.12); }
  50% { box-shadow: 0 0 0 5px rgba(220,38,38,.12); background: rgba(220,38,38,.2); }
}
.mktg-nag-node__icon--pulse {
  animation: nag-pulse 1.8s ease-in-out infinite;
  border-radius: var(--radius);
  background: rgba(220,38,38,.25);
  color: #f87171;
}
@media (prefers-reduced-motion: reduce) {
  .mktg-nag-node__icon--pulse { animation: none; background: rgba(220,38,38,.2); }
}

.mktg-nag-arrow {
  display: flex; align-items: center; justify-content: center;
  color: #334155; font-size: 18px; font-weight: 300;
  flex-shrink: 0; padding: 0 6px;
  align-self: center;
}
@media (max-width: 640px) {
  .mktg-nag-timeline { gap: 8px; }
  .mktg-nag-node { min-width: 120px; padding: 16px 12px; }
  .mktg-nag-arrow { padding: 0 2px; font-size: 14px; }
}

.mktg-nag-footer {
  display: flex; align-items: flex-start; gap: 16px;
  background: rgba(2,132,199,.2); border: 1px solid rgba(14,165,233,.35);
  border-radius: var(--radius-lg); padding: 20px 22px;
}
.mktg-nag-footer__icon {
  width: 40px; height: 40px; border-radius: var(--radius);
  background: rgba(2,132,199,.3); color: #bae6fd;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mktg-nag-footer__title {
  font-size: 14px; font-weight: 700; color: #e2e8f0; margin: 0 0 6px;
}
.mktg-nag-footer__text {
  font-size: 13.5px; color: #94a3b8; line-height: 1.65; margin: 0;
}

/* =========================================================================
   MARKETING — Pricing comparison row highlight (repeat fine)
   ========================================================================= */
.mktg-price-compare__row--highlight {
  background: var(--red-50); border-radius: var(--radius-sm);
  margin: 2px -8px; padding: 10px 8px;
  border-bottom: 1px solid var(--red-100) !important;
}
.mktg-price-compare__row--highlight span:first-child { color: var(--red-700); }

/* Sector pills — authoritative, no emoji */
.mktg-industry-pill--sector {
  font-size: 11.5px; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 5px 14px;
  letter-spacing: .01em;
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   HERO v2 — linen bg, eyebrow pill, compliance table mockup, trust row
   ========================================================================== */

.mktg-hero--new {
  background: var(--bg-mktg, #ffffff);
  border-bottom: 1px solid rgba(17,17,40,.08);
}
.mktg-hero--new::before,
.mktg-hero--new::after { display: none; }

.mktg-hero__eyebrow {
  display: inline-flex; align-items: center;
  background: rgba(17,17,40,.06); border: 1px solid rgba(17,17,40,.12);
  color: var(--ink); font-size: 12.5px; font-weight: 500;
  padding: 5px 14px; border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

.mktg-hero__h1-accent { color: var(--blue); }

.mktg-hero__subhead {
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
  margin: 0 0 10px;
}

.mktg-hero__trust-row {
  font-size: 12px; color: rgba(17,17,40,.5);
  margin: 14px 0 16px;
}

/* Compliance card */
.mktg-compliance-card {
  background: #fff;
  border: 1px solid rgba(17,17,40,.10);
  border-radius: 16px;
  box-shadow: 0 20px 60px -12px rgba(17,17,40,.15), 0 8px 24px -6px rgba(17,17,40,.08);
  overflow: hidden;
  max-width: 440px; width: 100%;
}
.mktg-compliance-card__header {
  background: var(--ink); color: #fff;
  font-size: 13.5px; font-weight: 600;
  padding: 14px 20px;
}

/* Table inside card */
.mktg-compliance-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
}
.mktg-compliance-table thead tr { border-bottom: 1px solid var(--line-soft); }
.mktg-compliance-table th {
  padding: 10px 16px; text-align: left;
  font-size: 11px; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.mktg-compliance-table th:last-child { text-align: center; }
.mktg-compliance-table tbody tr { border-bottom: 1px solid var(--line-soft); }
.mktg-compliance-table tbody tr:last-child { border-bottom: none; }
.mktg-compliance-table__name { padding: 12px 16px; font-weight: 600; color: var(--ink); }
.mktg-compliance-table__cred { padding: 12px 16px; color: var(--muted); }
.mktg-compliance-table td:last-child { padding: 12px 16px; text-align: center; }

/* Status badges */
.mktg-compliance-badge {
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 4px;
  border-left: 3px solid transparent; white-space: nowrap;
}
.mktg-compliance-badge--amber { background: var(--amber-50); color: var(--amber-700); border-left-color: var(--amber); }
.mktg-compliance-badge--red   { background: var(--red-50);   color: var(--red);       border-left-color: var(--red); }
.mktg-compliance-badge--green { background: var(--green-50); color: var(--green-700); border-left-color: var(--green); }

/* Pulse on expired row */
@keyframes compliance-expired-pulse {
  0%, 100% { background: transparent; }
  50%       { background: rgba(220,38,38,.04); }
}
.mktg-compliance-table__row--expired {
  animation: compliance-expired-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mktg-compliance-table__row--expired { animation: none; }
}

/* Mobile: hero stacks, table full-width */
@media (max-width: 640px) {
  .mktg-compliance-card { max-width: 100%; }
  .mktg-hero__eyebrow { font-size: 11.5px; }
}

/* =========================================================================
   SEO PAGES — Programmatic landing pages, blog, compliance guides
   ========================================================================= */

/* Breadcrumb */
.seo-breadcrumb { padding: 12px 0; border-bottom: 1px solid var(--line); background: var(--bg-subtle, #f8fafc); }
.seo-breadcrumb__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; }
.seo-breadcrumb__item { display: flex; align-items: center; gap: 4px; }
.seo-breadcrumb__item a { color: var(--blue); text-decoration: none; }
.seo-breadcrumb__item a:hover { text-decoration: underline; }
.seo-breadcrumb__item span[aria-current] { color: var(--ink-soft); }
.seo-breadcrumb__sep { color: var(--muted); }

/* Hero */
.seo-hero { padding: 64px 0 48px; background: var(--bg-subtle, #f8fafc); border-bottom: 1px solid var(--line); }
.seo-hero__h1 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; color: var(--ink); line-height: 1.2; margin: 8px 0 20px; }
.seo-hero__intro { font-size: 1.05rem; color: var(--ink-soft); line-height: 1.65; max-width: 680px; margin-bottom: 28px; }
.seo-hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.seo-hero__note { font-size: 13px; color: var(--muted); }

/* Sections */
.seo-section { padding: 56px 0; }
.seo-section + .seo-section { border-top: 1px solid var(--line); }
.seo-section__heading { font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 700; color: var(--ink); margin-bottom: 32px; }

/* Cards grid */
.seo-cards { display: grid; gap: 20px; }
.seo-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.seo-card h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.seo-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* Credential list */
.seo-cred-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.seo-cred-item { display: flex; align-items: flex-start; gap: 10px; }
.seo-cred-item__icon { color: var(--green); flex-shrink: 0; margin-top: 2px; }
.seo-cred-item__name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.seo-cred-item__note { font-size: 13.5px; color: var(--ink-soft); }

/* Steps */
.seo-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.seo-step { display: flex; align-items: flex-start; gap: 16px; }
.seo-step__num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.seo-step__text { font-size: 15px; color: var(--ink); line-height: 1.55; padding-top: 5px; }

/* CTA band */
.seo-cta-band { background: var(--ink); color: #fff; padding: 60px 0; text-align: center; }
.seo-cta-band__heading { font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 800; color: #fff; margin: 0 0 12px; }
.seo-cta-band__sub { color: rgba(255,255,255,0.75); margin: 0 0 28px; font-size: 15px; }

/* Related cards grid */
.seo-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.seo-related-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.seo-related-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }
.seo-related-card__label { font-size: 11px; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; }
.seo-related-card__name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.seo-related-card__arrow { font-size: 14px; color: var(--blue); margin-top: auto; }

/* Compare table */
.seo-compare-table { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; overflow-y: hidden; }
@media (max-width: 720px) { .seo-compare-table__header, .seo-compare-table__row { min-width: 720px; } }
.seo-compare-table__header, .seo-compare-table__row { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.seo-compare-table__header { background: var(--bg-subtle, #f8fafc); font-weight: 700; font-size: 13px; color: var(--ink); }
.seo-compare-table__header > *, .seo-compare-table__row > * { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.seo-compare-table__row:last-child > * { border-bottom: 0; }
.seo-compare-table__col--bad { color: var(--red-700, #b91c1c); background: var(--red-50, #fef2f2); display: flex; align-items: flex-start; gap: 8px; }
.seo-compare-table__col--good { color: var(--green-700, #15803d); background: var(--green-50, #f0fdf4); display: flex; align-items: flex-start; gap: 8px; }
.seo-compare-icon--bad { color: var(--red-500, #ef4444); flex-shrink: 0; margin-top: 2px; }
.seo-compare-icon--good { color: var(--green-500, #22c55e); flex-shrink: 0; margin-top: 2px; }

/* Verdict box */
.seo-verdict-box { background: var(--blue-50, #eff6ff); border: 1px solid var(--blue-200, #bfdbfe); border-radius: var(--radius-lg); padding: 32px; }
.seo-verdict-box h2 { font-size: 1.1rem; font-weight: 700; color: var(--blue); margin: 0 0 12px; }
.seo-verdict-box p { font-size: 15px; color: var(--ink); line-height: 1.65; margin: 0; }

/* Article layout */
.seo-article { padding: 56px 0; }
.seo-article__header { margin-bottom: 40px; }
.seo-article__meta { font-size: 13px; color: var(--muted); margin-bottom: 12px; display: flex; gap: 8px; }
.seo-article__h1 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; color: var(--ink); line-height: 1.2; margin: 0 0 20px; }
.seo-article__intro { font-size: 1.05rem; color: var(--ink-soft); line-height: 1.65; border-left: 3px solid var(--blue); padding-left: 16px; margin: 0; }
.seo-article__body h2 { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 36px 0 12px; }
.seo-article__body p { font-size: 15px; color: var(--ink-soft); line-height: 1.7; margin: 0 0 16px; }

/* Inline CTA in articles */
.seo-inline-cta { background: var(--blue-50, #eff6ff); border: 1px solid var(--blue-200, #bfdbfe); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 40px 0; }
.seo-inline-cta__text { font-size: 15px; color: var(--ink); line-height: 1.5; margin: 0; }

/* Blog index */
.seo-blog-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.seo-blog-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.seo-blog-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }
.seo-blog-card__meta { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.seo-blog-card__title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; margin: 0; }
.seo-blog-card__intro { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.seo-blog-card__cta { font-size: 13px; font-weight: 600; color: var(--blue); margin-top: auto; }

/* =========================================================================
   PRICING — 3-tier grid (home page + /pricing page)
   ========================================================================= */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 32px;
}
@media (max-width: 800px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}
.pricing-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pricing-card--featured {
  border-color: var(--blue);
  box-shadow: 0 4px 24px rgba(2,132,199,.12);
  transform: translateY(-6px);
}
@media (max-width: 800px) {
  .pricing-card--featured { transform: none; order: -1; }
}
.pricing-card__popular-badge {
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 0;
}
.pricing-card__header {
  padding: 24px 24px 0;
}
.pricing-card__name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
}
.pricing-card__tagline {
  font-size: 13px;
  color: var(--muted);
  margin: 2px 0 16px;
}
.pricing-card__price {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  line-height: 1;
  margin-bottom: 4px;
}
.pricing-card__currency {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.pricing-card__amount {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.04em;
}
.pricing-card__per {
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 6px;
}
.pricing-card__billing {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 16px;
}
.pricing-card__cta { margin-bottom: 8px; }
.pricing-card__trial-note {
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  margin: 0 0 20px;
}
.pricing-card__features {
  list-style: none;
  padding: 20px 24px 24px;
  margin: 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.pricing-feature svg { flex-shrink: 0; margin-top: 1px; }
.pricing-feature--check svg { color: var(--green); }
.pricing-feature--cross svg { color: var(--muted); }
.pricing-feature--cross { color: var(--muted); }
.pricing-vat-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 20px;
}
.pricing-vat-note a { color: var(--blue); text-decoration: underline; }

/* /pricing page hero */
.pricing-hero {
  padding: 56px 0 32px;
  background: linear-gradient(180deg, var(--blue-50) 0%, #fff 100%);
}
.pricing-hero__h1 {
  font-size: clamp(1.8rem, 2rem + 1.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.15;
  color: var(--ink);
  margin: 12px 0 16px;
}
.pricing-hero__sub {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 auto;
}
.pricing-section { padding: 40px 0 60px; }
.pricing-toggle-centered { justify-content: center; }

/* /pricing comparison table */
.pricing-compare-section { background: var(--bg-subtle); }
.compare-table {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  margin-top: 32px;
}
.compare-table__header {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.compare-table__tier-col, .compare-table__feature-col {
  padding: 14px 16px;
  text-align: center;
  line-height: 1.4;
}
.compare-table__feature-col { text-align: left; }
.compare-table__tier-col span { font-size: 11px; font-weight: 400; opacity: .7; }
.compare-table__tier-col--featured { background: var(--blue); }
.compare-table__group-label {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-subtle);
  border-top: 1px solid var(--line);
}
.compare-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr;
  border-top: 1px solid var(--line);
  align-items: center;
}
.compare-table__row:hover { background: var(--blue-50); }
.compare-table__feature {
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.compare-table__cell {
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
}
.compare-table__cell--featured { background: rgba(2,132,199,.04); }
.compare-table__cell--text { font-size: 13px; color: var(--ink-soft); }
.compare-check { color: var(--green); font-size: 15px; font-weight: 700; }
.compare-dash { color: var(--muted); font-size: 13px; }
.compare-table__cta-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr;
  border-top: 2px solid var(--line);
  background: var(--bg-subtle);
}
.compare-table__cta-row .compare-table__cell {
  padding: 16px;
}
@media (max-width: 680px) {
  .compare-table { display: none; }
}

/* ROI calculator on pricing page */
.pricing-roi-section { background: var(--bg-subtle); }
.pricing-roi { max-width: 800px; margin: 0 auto; }

/* Bottom CTA section */
.pricing-cta-section { padding-bottom: 80px; }
.pricing-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 24px 0 12px; }
.pricing-cta-note { font-size: 13px; color: var(--muted); margin: 0; }
.pricing-cta-note a { color: var(--blue); text-decoration: underline; }

/* =========================================================================
   SUBSCRIBE PAGE — 3-tier selector
   ========================================================================= */
.sub-toggle { justify-content: center; margin: 0 auto 32px; max-width: 280px; }
.sub-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto 24px;
}
@media (max-width: 720px) {
  .sub-tiers { grid-template-columns: 1fr; max-width: 420px; }
}
.sub-tier {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sub-tier--featured {
  border-color: var(--blue);
  box-shadow: 0 4px 20px rgba(2,132,199,.18);
  position: relative;
}
.sub-tier__popular {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  align-self: flex-start;
}
.sub-tier__name { font-size: 1.1rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.sub-tier__desc { font-size: 12.5px; color: var(--muted); margin: 2px 0 12px; }
.sub-tier__price { display: flex; align-items: flex-end; gap: 2px; line-height: 1; margin-bottom: 2px; }
.sub-tier__currency { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.sub-tier__amount { font-size: 2.4rem; font-weight: 800; color: var(--ink); letter-spacing: -.04em; }
.sub-tier__per { font-size: .95rem; color: var(--muted); margin-bottom: 4px; }
.sub-tier__billing { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.sub-tier__cta { margin-bottom: 6px; }
.sub-tier__features { list-style: none; padding: 0; margin: 16px 0 0; border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.sub-tier__features li { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: var(--ink-soft); }
.sub-tier__features li svg { color: var(--green); flex-shrink: 0; margin-top: 1px; }
.subscribe-guarantee {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 24px;
}
.subscribe-guarantee svg { color: var(--green); }

/* =========================================================================
   DASHBOARD — upgrade nudge
   ========================================================================= */
.upgrade-nudge-wrap { background: var(--amber-50); border-bottom: 1px solid var(--amber-200); }
.upgrade-nudge-container { padding: 0; }
.upgrade-nudge { padding: 10px 0; }
.upgrade-nudge__body { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.upgrade-nudge__meter {
  flex: 0 0 100px;
  height: 6px;
  background: var(--amber-200);
  border-radius: 99px;
  overflow: hidden;
}
.upgrade-nudge__bar {
  height: 100%;
  background: var(--amber-700);
  border-radius: 99px;
  transition: width .3s;
}
.upgrade-nudge__text { font-size: 13.5px; color: var(--ink); flex: 1; }
.upgrade-nudge__cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.upgrade-nudge__cta:hover { text-decoration: underline; }
.toast--error {
  background: var(--red-50);
  border-color: var(--red-200);
  color: var(--red);
}

/* ===== Cycle 132-159: incremental UI primitives ============================== */
.staff-name-link {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}
.staff-name-link:hover { text-decoration: underline; }

.edit-link {
  font-size: 0.78rem;
  margin-left: 8px;
  color: var(--blue);
  text-decoration: none;
  opacity: 0.7;
}
.edit-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.cred-ref {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  color: #4a5568;
}

.last-sent-note {
  margin-left: 6px;
  font-size: 0.78rem;
  color: #6b7280;
  font-style: italic;
}

.notes-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: #6b7280;
  cursor: help;
  vertical-align: middle;
}
.notes-indicator:hover { color: var(--blue); }

.staff-detail-header { margin-bottom: 24px; }
.staff-detail-meta {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #6b7280;
}
.staff-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.staff-cred-list { list-style: none; padding: 0; margin: 0; }
.staff-cred-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}
.staff-cred-row:last-child { border-bottom: none; }
.staff-cred-row__main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.staff-cred-row__ref { font-family: ui-monospace, monospace; font-size: 0.8rem; color: #4a5568; }
.staff-cred-row__date { font-size: 0.88rem; color: #4b5563; }
.staff-cred-row__notes {
  width: 100%;
  margin-top: 4px;
  padding: 6px 10px;
  font-size: 0.85rem;
  color: #4b5563;
  background: #f9fafb;
  border-left: 3px solid #d1d5db;
  border-radius: 0 3px 3px 0;
}
.staff-cred-row__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.type-chip__count, .urgency-chip__count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-weight: 600;
}

/* Audit log: subtle hover affordance on the action link */
.staff-name-link[href*="action="] {
  color: var(--blue);
}

/* Filter-empty message spacing */
#staff-list-no-matches {
  padding: 12px 0;
  text-align: center;
}