/* PenaltyProof — shared stylesheet
   Single source of truth for tokens, reset, layout, and components.
   Page-specific styling stays inline in templates. */

/* ---------- Self-hosted Inter (variable) ---------- */
@font-face{
  font-family:InterVariable;
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/static/fonts/InterVariable.woff2') format('woff2-variations'),
      url('/static/fonts/InterVariable.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:InterVariable,Inter,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:'cv11','ss01','ss03';
  font-variant-numeric:tabular-nums;
  line-height:1.5;
}
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:#1B3A8A;
  --blue-700:#142F70;
  --blue-50:#eff6ff;
  --blue-100:#dbeafe;
  /* 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;
  --white:#ffffff;
  --navy-600:#264a78;
  --navy-50:#eef2f7;
  --ink:#0f172a;
  --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:#f8fafc;
  --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 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
  --shadow-md:0 4px 12px -2px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04);
  --shadow-lg:0 12px 32px -8px rgba(15,23,42,.14), 0 4px 12px -4px rgba(15,23,42,.06);
  --shadow-blue:0 6px 18px -4px rgba(27,58,138,.32), 0 2px 6px rgba(27,58,138,.18);
  --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;
  /* Phase 9 — gradient and dark section tokens */
  --gradient-from: #1B3A8A;
  --gradient-to: #6366f1;
  --shadow-gradient: 0 6px 18px rgba(99,102,241,.3), 0 2px 6px rgba(27,58,138,.2);
  --dark-section-bg: #1e293b;
}

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

/* ---------- 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(27,58,138,.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}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:36px}
@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{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);white-space:nowrap;
  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}}

/* 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;font-variant-numeric:tabular-nums;white-space:nowrap}
.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}

/* manage-empty removed — replaced by .db-empty (two-column command center redesign) */

/* Mobile: stack client rows vertically below 480px. The right-cluster (badge +
   remove) was wrapping awkwardly under the name because both spans used flex. */
@media (max-width:480px){
  .client-row{align-items:flex-start;flex-direction:column;gap:8px}
  /* Full-width so deadline text isn't clipped when the parent uses flex-start alignment */
  .client-row__main{width:100%}
  /* Allow the action items to wrap rather than overflow horizontally.
     5 items (badge + pill + settings + configure + remove) exceed phone card width
     without wrapping, causing a page-wide horizontal scrollbar. */
  .client-row__actions{align-self:stretch;flex-wrap:wrap;justify-content:flex-start;gap:8px 10px}
  .manage-shell{padding:32px 16px}
}

/* Tax/payroll feature rows — description-left + toggle-right. Stacks on mobile
   so text doesn't squeeze into a narrow column next to the CTA button. */
.feature-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:16px;
}
.feature-row + .feature-row{border-top:1px solid var(--line-soft);padding-top:14px}
.feature-row__action{flex-shrink:0;margin:0}
@media(max-width:480px){
  .feature-row{flex-direction:column;gap:10px}
  .feature-row__action .btn{width:100%}
}

/* 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 must also carry the overflow so the min-width
   triggers scroll containment rather than page-level overflow. */
.table-scroll-wide{overflow-x:auto;-webkit-overflow-scrolling:touch}
.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,.55);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(226,232,240,.7);
  transition: background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.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:8px;
  font-weight:700;color:var(--ink);
  font-size:15px;letter-spacing:-.02em;
  white-space:nowrap;
}
.site-nav-brand:hover{color:var(--blue)}
.site-nav-spacer{height:56px}
.is-impersonating .site-nav{top:44px}
.is-impersonating .site-nav-spacer{height:100px}

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

/* ---------- App chrome (logged-in /manage variant of .site-nav) ----------
   The marketing nav is translucent and "salesy"; this variant is solid and
   denser so the boundary between marketing site and app feels intentional
   — a one-frame signal "you are inside the tool". Brand still links to the
   dashboard (/manage); the account dropdown holds the public-site escape
   hatch + marketing-tool links the dashboard nav no longer prioritises. */
.site-nav--app{
  background:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.site-nav-pill{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:var(--radius-pill);
  background:var(--line-soft);color:var(--ink-soft);
  font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-left:4px;white-space:nowrap;
}

/* Account dropdown trigger + panel. Trigger is an avatar pill in the
   top-right; clicking flips [data-open] on the .app-menu wrapper which
   the CSS uses to reveal the absolutely-positioned panel. JS wiring lives
   in setupAccountMenu() in app.js — click-outside dismiss + Escape. */
.app-menu{position:relative}
.app-menu__trigger{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1px solid transparent;
  padding:4px 10px 4px 4px;border-radius:var(--radius-pill);
  cursor:pointer;color:var(--ink-soft);
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.app-menu__trigger:hover{background:var(--bg-muted);border-color:var(--line)}
.app-menu__trigger:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.app-menu__avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:999px;
  background:var(--blue);color:#fff;
  font-size:12px;font-weight:600;text-transform:uppercase;
}
.app-menu__caret{color:var(--muted);transition:transform var(--t-fast) var(--ease)}
.app-menu[data-open="true"] .app-menu__caret{transform:rotate(180deg)}
.app-menu__panel{
  position:absolute;top:calc(100% + 6px);right:0;
  min-width:240px;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-4px);pointer-events:none;visibility:hidden;
  transition:opacity var(--t-base) var(--ease),
             transform var(--t-base) var(--ease),
             visibility 0s linear var(--t-base);
  z-index:60;
}
.app-menu[data-open="true"] .app-menu__panel{
  opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;
  transition:opacity var(--t-base) var(--ease),
             transform var(--t-base) var(--ease),
             visibility 0s linear 0s;
}
.app-menu__header{padding:8px 12px 4px}
.app-menu__label{font-size:11px;color:var(--muted-soft-text);letter-spacing:.02em}
.app-menu__email{font-size:13px;color:var(--ink);font-weight:500;word-break:break-all}
.app-menu__divider{height:1px;background:var(--line-soft);margin:4px 0}
.app-menu__item{
  display:block;width:100%;text-align:left;
  padding:8px 12px;border-radius:6px;
  font-size:13px;color:var(--ink-soft);text-decoration:none;
  background:transparent;border:none;cursor:pointer;
  font-family:inherit;font-weight:inherit;line-height:inherit;
}
.app-menu__item:hover{background:var(--bg-muted);color:var(--ink)}
.app-menu__item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.app-menu__item--danger{color:var(--red)}
.app-menu__item--danger:hover{background:var(--red-50);color:var(--red)}
.app-menu__form{margin:0}

/* 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:600;font-size:14px;
  padding:11px 22px;border-radius:var(--radius);
  border:1px solid transparent;
  text-align:center;line-height:1.2;
  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 8px 22px -4px rgba(27,58,138,.40), 0 3px 8px rgba(27,58,138,.22)}
.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}
/* 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)}
/* Founding member offer band — --navy background for brand premium signal. */
.founding-band{background:var(--navy);padding:64px 24px;border-top:1px solid rgba(255,255,255,.08);}

/* ---------- 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(27,58,138,.12);
}
/* Small variant for compact contexts (drawer fields, inline filters).
   Replaces inline `style="font-size:13px;padding:8px 12px;width:auto"`
   that was duplicated on every drawer input. */
.form-input--sm{font-size:13px;padding:8px 12px;width:auto}

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

/* ---------- Pricing page components ---------- */
/* Billing toggle buttons — canonical version promoted from landing.html nonce
   block (PAGE-02). These rules now load via app.css on every page so /pricing
   receives them without a per-page nonce block. */
.billing-toggle-btn{
  display:inline-flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:6px;cursor:pointer;
  padding:10px 18px;font-size:13px;font-weight:600;
  line-height:1.2;box-sizing:border-box;min-height:44px;
  font-family:inherit;border:1px solid var(--line);
  background:#fff;color:var(--ink);
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.billing-toggle-pill{background:#eff6ff;color:var(--blue)}
.billing-toggle-btn--on{background:var(--blue);color:#fff;border-color:var(--blue)}
.billing-toggle-btn--on .billing-toggle-pill{background:rgba(255,255,255,.25);color:inherit}
/* Green "Save ~17%" pill on the Annual toggle segment. */
.billing-toggle-pill--save{background:var(--green-50);color:var(--green-700);border:1px solid var(--green-200)}
.billing-toggle-btn--on .billing-toggle-pill--save{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.3)}
/* Gradient outer ring — fixes the isolation bug where this rule was only present
   on landing.html nonce block, never on /pricing. */
.pricing-recommended::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(37,99,235,0) 70%);
  z-index:-1;
  pointer-events:none;
}
@media(max-width:640px){.pricing-recommended{transform:none!important;}}
@media(max-width:480px){.billing-toggle-btn{flex:1;min-height:52px;}}

/* ---------- 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);white-space:nowrap}
.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.resolving{opacity:.6}
.chip-status{font-size:11px;font-weight:500;margin-left:4px;opacity:.85}

/* ---------- Drag-drop import zone ---------- */
.drop-zone{
  border:2px dashed var(--line);border-radius:var(--radius);
  padding:28px 20px;text-align:center;background:#f8fafc;
  cursor:pointer;transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease);
  position:relative;
}
.drop-zone:hover,.drop-zone--hover{border-color:var(--blue);background:var(--blue-50);}
.drop-zone--active{border-color:var(--blue);background:var(--blue-50);border-style:solid;}
.drop-zone__icon{font-size:28px;line-height:1;margin-bottom:8px;display:block;}
.drop-zone__label{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.drop-zone__hint{font-size:12px;color:var(--muted);}
.drop-zone__or{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:12px;color:var(--muted);}
.drop-zone__or::before,.drop-zone__or::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---------- Skeleton loaders ---------- */
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skeleton{
  display:inline-block;width:100%;height:14px;background:var(--line-soft);
  border-radius:4px;position:relative;overflow:hidden;
}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.7) 50%,transparent 100%);
  transform:translateX(-100%);
  animation:shimmer 1.4s infinite;
}
.skeleton--sm{height:12px;width:80%}
.skeleton--lg{height:18px}

/* ---------- Inline deadline preview table ---------- */
.deadline-preview{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  margin-top:16px;font-size:13px;
}
.deadline-preview__head{
  background:var(--line-soft);padding:10px 14px;
  font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;display:flex;align-items:center;gap:8px;
}
.deadline-preview__row{
  display:grid;grid-template-columns:1fr auto auto auto;
  gap:8px;align-items:center;
  padding:10px 14px;border-top:1px solid var(--line);
  background:#fff;
}
.deadline-preview__row:first-child{border-top:none;}
.deadline-preview__name{font-weight:500;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.deadline-preview__date{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;white-space:nowrap;}
.deadline-preview__badge--ok{color:var(--green-700);font-weight:600;font-size:11px;}
.deadline-preview__badge--soon{color:var(--amber-700);font-weight:600;font-size:11px;}
.deadline-preview__badge--overdue{color:var(--red);font-weight:600;font-size:11px;}
.deadline-preview__badge--pending{color:var(--muted);font-size:11px;}

/* ---------- Import progress banner ---------- */
.import-progress{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--radius);
  font-size:13px;color:#1e40af;margin-top:10px;
}
.import-progress__spinner{
  width:16px;height:16px;border:2px solid var(--blue-100);border-top-color:var(--blue);
  border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg)}}

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

/* Large-number display variant — used in the "Scale of the Problem" section.
   Separate modifier so the hero stat strip keeps its smaller 20px treatment. */
.stat-card--lg{padding:28px 24px}
.stat-card--lg .stat-card__value{font-size:clamp(26px,3.2vw,36px);font-weight:800;line-height:1;letter-spacing:-0.025em;margin-bottom:0}
.stat-card--lg .stat-card__label{font-size:13px;color:var(--ink-soft);font-weight:500;line-height:1.5;margin-top:10px}
/* Citation footnote — uses --muted-soft-text (#64748b) for WCAG AA compliance;
   --muted-soft (#94a3b8) fails AA on white/bg-muted (2.9:1). */
.stat-card__cite{display:inline-block;font-size:11px;color:var(--muted-soft-text);text-decoration:none;margin-top:12px;border-bottom:1px dotted currentcolor;line-height:1.4}
.stat-card__cite:hover{color:var(--ink-soft)}
/* Highlight variant — blue-tinted card for the "coming risk" stat.
   Uses --blue-50 token (same as chip/comparison table) not an ad-hoc color-mix(). */
.stat-card--highlight{background:var(--blue-50);border-top:3px solid var(--blue)}
.stat-card--highlight .stat-card__value{color:var(--blue)}
/* Urgency accents — mirror the stat-tile--danger/warn pattern from the manage page.
   Top border signals severity; value colour reinforces it. */
.stat-card--urgent{border-top:3px solid var(--red)}
.stat-card--urgent .stat-card__value{color:var(--red)}
.stat-card--warn{border-top:3px solid var(--amber)}
.stat-card--warn .stat-card__value{color:var(--amber)}

/* Four-column penalty stats grid — 2-column at narrow tablet, 1-column at phone.
   margin-top reduced on mobile to close the gap between .section-sub and the cards. */
.penalty-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px}
@media(max-width:640px){.penalty-stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}}
/* Reduce card padding in 2-column range so number + label don't clip at ~175px card width */
@media(max-width:640px){.stat-card--lg{padding:20px 16px}}
@media(max-width:480px){.penalty-stats-grid{grid-template-columns:1fr;gap:8px}}
/* Section padding override for the penalty stats section on mobile.
   The <section> uses inline padding:64px 24px which can't be overridden below without !important;
   !important is acceptable here as the inline style is purely for desktop layout. */
@media(max-width:640px){.penalty-stats-section{padding-top:40px!important;padding-bottom:40px!important}}
/* .section-sub margin-bottom is 32px — reduce on mobile to tighten subtitle-to-cards gap */
@media(max-width:640px){.penalty-stats-section .section-sub{margin-bottom:0}}

/* ---------- Card ---------- */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow-sm);
}

/* ---------- 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:12px;font-weight:600;color:var(--blue);letter-spacing:.04em;text-transform:uppercase;text-align:center;margin-bottom:12px}
.section-title{font-size:clamp(20px,2.4vw,28px);font-weight:600;color:var(--ink);letter-spacing:-.025em;line-height:1.2;text-align:center;margin-bottom:10px}
.section-sub{font-size:14px;color:var(--ink-soft);line-height:1.6;text-align:center;max-width:540px;margin:0 auto 32px}

/* ---------- 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}
}
/* Skeleton layout classes — avoids inline style= in JS-injected HTML (CSP: style-src-elem) */
.check-skel-wrap{margin-bottom:24px;}
.check-skel-label{width:80px;height:12px;border-radius:4px;margin-bottom:6px;}
.check-skel-title{width:60%;height:24px;border-radius:6px;margin-bottom:6px;}
.check-skel-sub{width:40%;height:13px;border-radius:4px;}
.check-skel-cards{display:flex;flex-direction:column;gap:12px;}
.check-skel-card{height:74px;border-radius:12px;}

/* ---------- 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}
  /* ANIM-03 D-08: explicit per-hover-state transform overrides for auditability */
  .card-hover:hover,
  .btn-gradient:hover { transform: none; }
}

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

/* ---------- Company search typeahead animations ---------- */
@keyframes ch-spin{to{transform:rotate(360deg)}}
@keyframes ch-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- Manage: per-client setup pill + edit drawer ----------
   Replaces five inline <details> per client row (pension / VAT / CT / RTI /
   client-email) with a single Edit button that opens a side drawer holding
   every optional setting. The row stays one line + status; the amber pill
   surfaces only when something is unset and the relevant feature is on. */

.setup-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;
  color:var(--amber-700);background:var(--amber-50);border:1px solid var(--amber-200);
  padding:2px 9px;border-radius:var(--radius-pill);
  text-decoration:none;line-height:1.4;white-space:nowrap;flex-shrink:0;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.setup-pill:hover{background:var(--amber-100);border-color:var(--amber)}
.setup-pill__dot{width:5px;height:5px;border-radius:50%;background:var(--amber)}
/* On overdue rows the left-border is already red; an amber pill next to a
   red badge clutters the urgency signal. Drop the pill to neutral grey so
   "Overdue" stays the loudest thing on the row. */
.client-row--overdue .setup-pill{
  color:var(--muted);background:var(--bg-muted);border-color:var(--line);
}
.client-row--overdue .setup-pill:hover{background:var(--line-soft);border-color:var(--muted-soft)}
.client-row--overdue .setup-pill__dot{background:var(--muted-soft)}

/* Quiet pencil-style Edit button — sits between badge and Remove on the row. */
.client-row__edit{
  display:inline-flex;align-items:center;gap:5px;
  background:transparent;color:var(--muted);
  border:1px solid transparent;
  font-weight:500;font-size:13px;
  padding:6px 10px;border-radius:var(--radius);
  cursor:pointer;line-height:1.2;white-space:nowrap;
  transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.client-row__edit:hover{color:var(--blue);background:var(--blue-50);border-color:var(--blue-100)}

/* Drawer (right-side panel, used for per-client settings).
   position:fixed so it overlays regardless of where its markup lives.
   Bottom-sheet on narrow viewports — full-width slide-up. */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.36);
  opacity:0;pointer-events:none;
  transition:opacity 180ms var(--ease);
  z-index:60;
}
.drawer-overlay.is-open{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;top:0;right:0;height:100vh;width:min(460px,92vw);
  background:#fff;box-shadow:var(--shadow-lg);
  transform:translateX(100%);
  /* Visibility flips after the slide-out finishes — without the 220ms delay
     the drawer would snap-vanish mid-animation. On open, visibility flips
     instantly (no delay) so the slide-in is visible. */
  transition:transform 220ms var(--ease), visibility 0s 220ms;
  z-index:61;display:flex;flex-direction:column;
  visibility:hidden;
}
.drawer.is-open{transform:translateX(0);visibility:visible;transition:transform 220ms var(--ease), visibility 0s 0s}

.drawer__head{
  padding:18px 22px 14px;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  flex-shrink:0;
}
.drawer__title{font-size:17px;font-weight:700;color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
.drawer__sub{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.drawer__close{
  background:transparent;border:none;color:var(--muted);
  font-size:22px;line-height:1;cursor:pointer;
  padding:4px 8px;border-radius:var(--radius);
  transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.drawer__close:hover{color:var(--ink);background:var(--bg-muted)}

.drawer__body{flex:1;overflow-y:auto;padding:4px 0 12px}
.drawer__section{padding:16px 22px;border-bottom:1px solid var(--line-soft)}
.drawer__section:last-child{border-bottom:none}
.drawer__section h3{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.drawer__section .status-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0}
.drawer__section .status-dot--ok{background:var(--green)}
.drawer__field{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.drawer__field label{font-size:13px;font-weight:600;color:var(--ink)}
.drawer__field-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.drawer__hint{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:2px}
.drawer__readonly{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:13px;padding:2px 0;
}
.drawer__readonly + .drawer__readonly{margin-top:4px}
.drawer__readonly span:first-child{color:var(--muted)}
.drawer__readonly span:last-child{color:var(--ink);font-weight:500}
.drawer__error{font-size:12px;color:var(--red);margin-top:2px}
.drawer__saved{font-size:12px;color:var(--green-700);margin-top:2px;font-weight:500}
/* Inline "✓ Saved" flash appended by the AJAX submit handler. Fades after
   ~1.8s and removes itself; styling matches the existing __saved badge. */
.drawer__saved-flash{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:600;color:var(--green-700);
  align-self:center;margin-left:4px;
  opacity:1;transition:opacity 320ms var(--ease);
}

/* ---- Mission Control dashboard table (MC-*) ---- */
/* Replaces the card list with a dense fixed-layout table for desktop.
   Sticky thead + RAG row accents + explicit days column = 8 AM glance-ability. */

/* Widen the shell when rendering the full authenticated dashboard */
.manage-shell--dashboard{max-width:1300px}

/* Unified toolbar: urgency chips left, search+sort right */
.mc-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:0;padding-bottom:12px;
  border-bottom:1px solid var(--line-soft);
}
.mc-toolbar__filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mc-toolbar__controls{display:flex;gap:10px;align-items:center;flex-shrink:0}
.mc-toolbar__controls .form-input{padding:7px 10px;font-size:13px;height:34px}

/* Scrollable wrapper — lets table scroll on narrow viewports without breaking layout */
.mc-table-wrap{overflow-x:auto;margin-bottom:32px;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-sm)}

/* Table base */
.mc-table{
  width:100%;min-width:800px;border-collapse:collapse;table-layout:fixed;
  font-size:13px;background:#fff;
}

/* Sticky dark header — warm slate (more Linear, less Bootstrap dark table) */
.mc-table thead{position:sticky;top:0;z-index:10}
.mc-table thead tr{background:#1e293b}
.mc-table thead th{
  padding:10px 14px;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:rgba(255,255,255,.65);text-align:left;white-space:nowrap;
  border-bottom:2px solid rgba(255,255,255,.08);
}
.mc-table thead th.mc-th-days,.mc-table thead th.mc-th-type{text-align:center}
.mc-th-sortable{cursor:pointer;user-select:none;white-space:nowrap}
.mc-th-sortable:hover{background:rgba(255,255,255,.12)}
.mc-sort-icon{display:inline-block;margin-left:4px;opacity:.35;font-size:10px;font-style:normal}
.mc-th-sortable[aria-sort="ascending"] .mc-sort-icon,
.mc-th-sortable[aria-sort="descending"] .mc-sort-icon{opacity:1}

/* Column widths — fixed layout uses first-row widths */
.mc-th-status{width:4px;padding:0}
.mc-th-name{width:auto;min-width:180px} /* takes remaining width — min prevents crush on mid-size viewports */
.mc-th-type{width:52px}
.mc-th-days{width:74px}
.mc-th-date{width:118px}
.mc-th-secondary{width:140px}
.mc-th-actions{width:190px}

/* Body rows — tr.client-row must override the old flex card layout from line 186 */
tr.client-row{
  display:table-row;
  border-radius:0;
  box-shadow:none;
  padding:0;
  gap:0;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  transition:background 0.1s ease;
  contain:layout style;
}
.client-row:last-child{border-bottom:none}
.client-row:hover{background:var(--line-soft)}

/* RAG row accents — left border + row tint for instant danger-zone scanning */
.client-row--overdue{
  border-left:4px solid var(--red);
  background:rgba(220,38,38,.07);
}
.client-row--overdue:hover{background:rgba(220,38,38,.12)}
.client-row--soon{
  border-left:4px solid var(--amber);
  background:rgba(217,119,6,.05);
}
.client-row--soon:hover{background:rgba(217,119,6,.09)}
.client-row--ok{border-left:4px solid transparent}
.client-row--unknown{border-left:4px solid var(--line)}

/* Cells — 8px vertical padding for higher density at scale */
.client-row td{padding:8px 14px;vertical-align:middle}
.mc-td-status{padding:0;width:4px}

/* Name cell */
.mc-name a{font-weight:600;color:var(--ink);font-size:14px;text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-name a:hover{color:var(--blue);text-decoration:underline}
.mc-cn{display:block;font-size:11px;color:var(--muted);margin-top:1px;font-weight:400;font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;letter-spacing:.01em}

/* Type chip ("CS" / "AA") */
.mc-type-chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 6px;border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--line-soft);color:var(--ink-soft);
}
.mc-type-chip--overdue{background:var(--red-100);color:var(--red-700)}
.mc-type-chip--soon{background:var(--amber-100);color:var(--amber-700)}
.mc-type-chip--ok{background:var(--green-100);color:var(--green-700)}
/* Full filing name — hidden on desktop (the "Type" header + legend decode the
   abbreviation); swapped in for the abbreviation on mobile cards. */
.mc-type-chip__full{display:none}

/* Filing-type legend — decodes CS/AA once for the desktop table */
.mc-legend{font-size:12px;color:var(--muted);margin:-6px 0 14px}
.mc-legend strong{color:var(--ink-soft);font-weight:700}

/* Days countdown badge */
.mc-days{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;padding:3px 8px;border-radius:var(--radius-pill);
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* Solid fill for overdue/critical = unmistakable danger signal */
.mc-days--overdue{background:var(--red);color:#fff;font-weight:800}
.mc-days--critical{background:var(--amber);color:#fff;font-weight:800}
.mc-days--soon{background:var(--amber-100);color:var(--amber-700)}
.mc-days--ok{background:var(--green-100);color:var(--green-700)}
.mc-days--unknown{background:var(--line-soft);color:var(--muted)}

/* Critical row (≤7 days, still "soon" bucket) — stronger amber tint than standard soon */
.client-row--critical{
  background:rgba(217,119,6,.09);
  border-left-color:var(--amber);
}
.client-row--critical:hover{background:rgba(217,119,6,.14)}

/* Clickable row: navigates via JS using data-row-href attribute */
.client-row[data-row-href]{cursor:pointer}
.client-row[data-row-href] td:not(.mc-td-actions){user-select:none}

/* Date cell */
.mc-date{font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-no-date{font-size:12px;color:var(--muted);font-style:italic}

/* Secondary deadline cell — inner div clips to column width */
.mc-td-secondary{color:var(--muted);font-size:12px;padding-right:8px}
.mc-sec-row{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;width:100%;max-width:172px}
.mc-type-chip-sm{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1px 5px;border-radius:3px;
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--line-soft);color:var(--muted);flex-shrink:0;
}
.mc-sec-date{color:var(--muted);font-size:12px;white-space:nowrap}

/* Actions cell */
.mc-td-actions{text-align:right}
.mc-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:nowrap}

/* Empty-row placeholder */
.mc-empty-row td{padding:32px 20px;text-align:center;color:var(--muted);font-size:13px}

/* Responsive: hide secondary at 1100px, allow horizontal scroll below 700px */
@media(max-width:1100px){.mc-th-secondary,.mc-td-secondary{display:none}}
@media(max-width:760px){
  .mc-table-wrap{border-radius:0;margin-left:-16px;margin-right:-16px;border-left:none;border-right:none}
  .mc-th-date,.mc-td-date,.mc-th-type,.mc-td-type{display:none}
  .mc-th-actions{width:160px}
}

/* manage-h2 and manage-card removed — superseded by add-clients-section__title and db-card */
/* .manage-details__summary: shared layout for portal disclosure rows — D-05. No color (3 variants exist). */
.manage-details__summary{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:4px}

/* Bottom-sheet on mobile: slide up from bottom, capped height. */
@media (max-width:600px){
  .drawer{
    top:auto;bottom:0;right:0;left:0;
    width:100%;height:auto;max-height:90vh;
    border-top-left-radius:var(--radius-lg);
    border-top-right-radius:var(--radius-lg);
    transform:translateY(100%);
  }
  .drawer.is-open{transform:translateY(0)}
}

/* ---------- Homepage redesign — animation & polish additions ---------- */

/* Stat strip number: count-up animation is JS-driven (counter_target attr),
   but we can add a subtle fade-in entrance tied to .is-visible via .reveal. */
.stat-card{
  transition:opacity 400ms var(--ease);
}

/* Card hover: ensure all .card-hover instances get a polished lift.
   Strengthens the existing rule without overriding border-radius. */
.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(-6px);
  box-shadow:var(--shadow-lg);
  border-color:#d0d9e8;
}

/* Primary button: add a subtle scale micro-interaction on click for haptic feel */
.btn-primary:active{
  transform:translateY(1px) scale(.99);
}

/* Eyebrow / section-title / divider entrance animations — scoped to the
   landing page only so other pages with .eyebrow/.section-title aren't
   affected. .page-landing is set via {% block body_class %} in landing.html. */
.page-landing .reveal.is-visible .eyebrow{
  animation:eyebrow-slide 480ms var(--ease) both;
}
@keyframes eyebrow-slide{
  from{opacity:0;letter-spacing:.01em}
  to{opacity:1;letter-spacing:.04em}
}

.page-landing .reveal.is-visible .section-title{
  animation:reveal-fade 540ms var(--ease) both;
}

.page-landing .reveal.is-visible .divider-dashed{
  animation:divider-grow 600ms var(--ease) both;
}
@keyframes divider-grow{
  from{max-width:0;opacity:0}
  to{max-width:120px;opacity:.6}
}

/* Pricing card: lift animation on hover for all cards except Starter (which
   has its own elevated treatment via .pricing-recommended). */
#pricing .pricing-card:not(.pricing-recommended):hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

/* FAQ item: scroll-margin-top so direct #faq-N anchor links don't hide under
   the sticky nav (nav height ~60px + 20px breathing room). */
.faq-item{
  scroll-margin-top:80px;
}

/* FAQ item: strengthen the open state border for clarity */
.faq-item[open]{
  border-color:var(--blue-100);
  box-shadow:0 4px 14px -4px rgba(27,58,138,.08),0 1px 3px rgba(15,23,42,.04);
}
.faq-item summary:hover{
  color:var(--blue);
}

/* Site nav: frosted-glass scrolled state — background opacity up, shadow, border crisp (JS adds .scrolled class) */
.site-nav.scrolled{
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow-md);
  border-color:rgba(226,232,240,.9);
}
/* The translucent scrolled state is for the marketing nav only. The app
   (dashboard) nav must stay fully opaque — at 92% with no backdrop blur the
   scrolled .site-nav rule (higher specificity) let page content ghost through
   the bar. Keep it solid white when scrolled. */
.site-nav--app.scrolled{
  background:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Badge pulse: a very subtle glow pulse on the hero CTA button to draw the eye
   on first load. Only fires once via animation-iteration-count:1. Respects
   prefers-reduced-motion via the global reduce block. */
@keyframes cta-pulse{
  0%,100%{box-shadow:var(--shadow-blue)}
  50%{box-shadow:0 8px 32px -4px rgba(27,58,138,.45),0 4px 12px rgba(27,58,138,.25)}
}
.hero-cta-pulse{
  animation:cta-pulse 2.4s ease-in-out 1.2s 2;
}

/* Guarantee shield icon wrapper */
.guarantee-shield{
  width:56px;height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--blue) 0%,var(--green) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -4px rgba(27,58,138,.25);
  margin:0 auto 16px;
}

/* How-it-works timeline line: shown on desktop only via .how-timeline-line class */
.how-timeline-line{
  display:none; /* shown via media query in landing.html style block */
}

/* Feature check animation: stagger each row on section entry */
.reveal.is-visible .feature-check{
  animation:reveal-fade 400ms var(--ease) both;
}
.reveal.is-visible .feature-check:nth-child(2){animation-delay:40ms}
.reveal.is-visible .feature-check:nth-child(3){animation-delay:80ms}
.reveal.is-visible .feature-check:nth-child(4){animation-delay:120ms}
.reveal.is-visible .feature-check:nth-child(5){animation-delay:160ms}
.reveal.is-visible .feature-check:nth-child(6){animation-delay:200ms}

/* Lookup widget input: better focus ring */
.hero-lookup-input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(27,58,138,.12);
  outline:none;
}

/* Testimonial card: slight lift on hover if testimonials get enabled */
.reveal.is-visible figure[itemprop="review"]:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}

/* Stat strip: stronger number treatment */
.stat-card__value{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'cv11','ss01';
}

/* Portfolio summary strip — left-border RAG encoding (coherent with table rows) */
.stats-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;
}
.stat-tile{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-left:4px solid var(--line);
  border-top:none;
  border-radius:var(--radius);
  text-align:left;
}
.stat-tile__value{
  font-size:28px;font-weight:800;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
  font-feature-settings:'cv11','ss01';
}
.stat-tile__label{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-top:3px;
}
/* Left-border status encoding — same language as table rows */
.stat-tile--danger{border-left-color:var(--red);background:rgba(220,38,38,.03)}
.stat-tile--danger .stat-tile__value{color:var(--red)}
.stat-tile--warn{border-left-color:var(--amber);background:rgba(217,119,6,.03)}
.stat-tile--warn .stat-tile__value{color:var(--amber-700)}
.stat-tile--ok{border-left-color:var(--green);background:rgba(5,150,105,.02)}
.stat-tile--ok .stat-tile__value{color:var(--green-700)}
.stat-tile--savings{border-left-color:var(--blue);background:rgba(27,58,138,.02)}
.stat-tile--savings .stat-tile__value{color:var(--blue);font-size:22px}

/* Clickable stat tiles for urgency filtering */
.stat-tile[data-urgency-filter]{cursor:pointer;transition:transform 80ms ease,box-shadow 80ms ease}
.stat-tile[data-urgency-filter]:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.stat-tile[data-urgency-filter][aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.stat-tile--danger[data-urgency-filter][aria-pressed="true"]{box-shadow:0 0 0 2px var(--red)}
.stat-tile--warn[data-urgency-filter][aria-pressed="true"]{box-shadow:0 0 0 2px var(--amber)}
.stat-tile--ok[data-urgency-filter][aria-pressed="true"]{box-shadow:0 0 0 2px var(--green)}
@media(max-width:480px){
  .stats-strip{grid-template-columns:repeat(2,1fr)}
}

/* ---- Phase 9: dark section wrapper (CSS-05) ---- */
/* Re-scopes all five colour tokens so child elements using var(--ink) etc.
   render correctly on the dark background. All five must be declared —
   omitting any one creates invisible text (D-12, Pitfall 4). */
.section-dark{
  background:var(--dark-section-bg);
  --ink: #f1f5f9;
  --ink-soft: #cbd5e1;
  --muted: #94a3b8;
  --line: rgba(255,255,255,.12);
  --bg-muted: rgba(255,255,255,.06);
}

/* ---- Phase 9: utility classes (CSS-02, CSS-03, CSS-04, ANIM-02) ---- */

/* CSS-02 .text-gradient — solid fallback for browsers that fail the @supports guard
   (D-04, Pitfall 3). Renders brand blue so the text is always readable. */
.text-gradient{color:var(--blue)}
/* Belt-and-suspenders: both color and -webkit-text-fill-color set to transparent
   inside the guard so all Blink/WebKit variants produce the gradient fill. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .text-gradient{
    background:linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
  }
}

/* CSS-03 .btn-gradient — modifier only; MUST be used alongside .btn and optionally
   .btn-primary. Never mutates .btn-primary itself (T-09-08, modifier-only strategy).
   Inherits .btn transition list and .btn:hover translateY(-1px) — no redundant
   transform or transition declarations (ANIM-04, D-03). */
.btn-gradient{
  background:linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
  color:#fff;
  box-shadow:var(--shadow-gradient);
  border-color:transparent;
}

/* ANIM-02 .btn-gradient:hover — intensifies glow; lift comes from .btn:hover (no
   transform here). Subtly lightens gradient end-stop to #818cf8 for visual feedback.
   Dual-layer indigo shadow mirrors the hover glow decision (D-03). */
.btn-gradient:hover{
  box-shadow:0 10px 28px rgba(99,102,241,.4), 0 4px 10px rgba(27,58,138,.25);
  background:linear-gradient(135deg, var(--gradient-from) 0%, #818cf8 100%);
}

/* CSS-04 eyebrow--pill modifier — extends .eyebrow with pill-shaped badge treatment.
   display:inline-block required so padding and border-radius shrink-wrap the text
   (Pitfall 5). No color/font overrides — all typography inherited from .eyebrow. */
.eyebrow--pill{
  display:inline-block;
  padding:4px 12px;
  background:rgba(27,58,138,.07);
  border:1px solid rgba(27,58,138,.15);
  border-radius:var(--radius-pill);
}

/* ============================================================
   DESIGN OVERHAUL 2026 — Premium polish layer
   Appended below the existing stylesheet so existing rules
   have lower specificity and these overrides take precedence.
   ============================================================ */

/* ---- Enhanced shadows ---- */
:root {
  --shadow-xl:0 24px 56px -12px rgba(15,23,42,.22), 0 8px 24px -8px rgba(15,23,42,.12);
  --shadow-card:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-card-hover:0 8px 24px -4px rgba(15,23,42,.12), 0 3px 8px -3px rgba(15,23,42,.06);
  --shadow-float:0 20px 48px -12px rgba(15,23,42,.18), 0 6px 20px -6px rgba(15,23,42,.1);
  --hero-bg:#0c1628;
  --hero-glow:rgba(27,58,138,.35);
  --radius-xl:16px;
  --radius-2xl:20px;
}

/* ---- Upgraded section typography ---- */
.section-title {
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.18;
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 14px;
}
.eyebrow--pill {
  padding: 5px 14px;
  background: rgba(27,58,138,.08);
  border: 1px solid rgba(27,58,138,.16);
  border-radius: var(--radius-pill);
}

/* ---- Dark hero — page-landing only ---- */
.page-landing .hero-section {
  background: linear-gradient(160deg, #0c1628 0%, #0f1f3d 55%, #0d2a4a 100%) !important;
}
.page-landing .hero-dot-grid {
  background-image: radial-gradient(circle, rgba(255,255,255,.065) 1px, transparent 1px) !important;
}
/* Glow orb behind the dashboard mockup on dark bg */
.page-landing .hero-section::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,58,138,.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Hero text on dark background */
.page-landing .hero-badge {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.9) !important;
}
.page-landing .hero-h1 {
  color: #fff !important;
}
.page-landing .hero-body {
  color: rgba(255,255,255,.78) !important;
}
.page-landing .hero-body strong {
  color: #fff !important;
}
.page-landing .hero-cta-sub {
  color: rgba(255,255,255,.58) !important;
}
.page-landing .hero-free-link {
  color: rgba(255,255,255,.7) !important;
}
.page-landing .hero-trust-strip {
  border-top-color: rgba(255,255,255,.12) !important;
}
.page-landing .hero-trust-item {
  color: rgba(255,255,255,.65) !important;
}
.page-landing .hero-deadline-tag {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.78) !important;
}

/* Hero dashboard preview: richer shadow on dark bg */
.page-landing .hero-preview-wrap {
  box-shadow: 0 32px 80px -16px rgba(0,0,0,.6), 0 8px 32px -8px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.1) !important;
  background: #1e293b !important;
}

/* Stat strip: slight upgrade */
.page-landing .stat-strip {
  box-shadow: var(--shadow-md) !important;
  border-radius: 14px !important;
}

/* ---- Feature cards: more polished ---- */
.feature-card {
  border-radius: 14px !important;
  padding: 28px 24px !important;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease) !important;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: #c5d0e0;
}
.feature-card__icon {
  width: 48px !important;
  height: 48px !important;
}

/* ---- How-it-works cards: richer ---- */
.page-landing #how-it-works .card-hover {
  border-radius: 14px !important;
}

/* ---- Guarantee section: upgrade shield ---- */
.guarantee-shield {
  width: 64px !important;
  height: 64px !important;
  box-shadow: 0 12px 32px -6px rgba(27,58,138,.35), 0 4px 12px rgba(27,58,138,.2) !important;
}

/* ---- Sections: consistent visual breathing ---- */
.page-landing #why-penaltyproof {
  background: #f8fafc !important;
}
.page-landing #promise {
  background: linear-gradient(160deg, #f0f7ff 0%, #fff 40%, #f0fdf8 100%) !important;
}

/* ---- Eyebrow entrance for dark hero ---- */
.page-landing .hero-section .eyebrow--pill {
  background: rgba(27,58,138,.35) !important;
  border-color: rgba(99,102,241,.4) !important;
  color: rgba(255,255,255,.9) !important;
}

/* ---- Comparison table: better contrast ---- */
.page-landing #why-penaltyproof .table-scroll > div {
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: var(--shadow-md) !important;
}

/* ---- Email preview mockup: deeper shadow ---- */
.page-landing .email-preview-shell {
  box-shadow: var(--shadow-xl) !important;
}

/* ---- How-it-works step numbers: more subtle ---- */
.page-landing #how-it-works [aria-hidden="true"][style*="position:absolute;top:14px;right:14px"] {
  font-size: 11px;
  opacity: .35;
}

/* ---- Stat cards in penalty section ---- */
.page-landing .stat-card--lg {
  border-radius: 14px !important;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease) !important;
}
.page-landing .stat-card--lg:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ---- Dark footer ---- */
.site-footer-full {
  background: #0f172a !important;
  border-top: none !important;
}
.site-footer-full .footer-grid-brand-name {
  color: #fff !important;
}
.site-footer-full .footer-grid-brand-desc {
  color: #64748b !important;
}
.site-footer-full .footer-col-heading {
  color: #94a3b8 !important;
}
.site-footer-full .footer-col-link {
  color: #64748b !important;
}
.site-footer-full .footer-col-link:hover {
  color: #cbd5e1 !important;
}
.site-footer-full .footer-bottom {
  border-top-color: rgba(255,255,255,.1) !important;
  color: #475569 !important;
}
.site-footer-full .footer-bottom span {
  color: #475569 !important;
}
.site-footer-full .footer-bottom div {
  color: #374151 !important;
}

/* ---- Nav: more polished brand mark ---- */
.site-nav-brand {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}
.site-nav-brand img {
  width: 26px !important;
  height: 26px !important;
}

/* ---- Pricing cards: subtle premium treatment ---- */
#pricing .pricing-card {
  border-radius: 14px !important;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease) !important;
}

/* ---- Promise section shield ring animation ---- */
@keyframes shield-pulse {
  0%, 100% { box-shadow: 0 12px 32px -6px rgba(27,58,138,.35), 0 4px 12px rgba(27,58,138,.2); }
  50% { box-shadow: 0 16px 40px -6px rgba(27,58,138,.45), 0 6px 16px rgba(5,150,105,.2); }
}
.guarantee-shield {
  animation: shield-pulse 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .guarantee-shield { animation: none; }
}

/* ---- Section title — hero gets special treatment ---- */
.page-landing .hero-section h1 {
  font-size: clamp(30px, 4.5vw, 54px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  line-height: 1.05 !important;
}

/* ---- Closing CTA band (founding / trial) ---- */
.founding-band {
  background: linear-gradient(160deg, #0c1628 0%, #1B3A8A 100%) !important;
  padding: 80px 24px !important;
}

/* ---- FAQ items: slightly more polished ---- */
.faq-item {
  border-radius: 14px !important;
}

/* ---- Testimonial cards ---- */
figure[itemprop="review"] {
  border-radius: 14px !important;
  padding: 26px 24px !important;
}

/* ---- Callout block: nicer left accent ---- */
.callout {
  border-left-width: 3px !important;
  border-radius: 10px !important;
}

/* ---- Divider dashed: slightly more visible ---- */
.divider-dashed {
  opacity: .45 !important;
  max-width: 48px !important;
  margin-bottom: 20px !important;
}

/* ---- Section eyebrow text: centered on landing sections ---- */
.page-landing section .eyebrow {
  display: block;
  text-align: center;
}

/* ---- Promise badge variant 'dark': good on dark hero ---- */
.promise-badge--dark {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
}

/* ---- Try-it widget: stronger container ---- */
.page-landing #try-it {
  background: #f8fafc !important;
}
.page-landing #try-it .container {
  box-shadow: var(--shadow-lg) !important;
  border-radius: 18px !important;
}

/* ---- Coverage trust section heading ---- */
.page-landing #coverage-trust .section-title {
  font-size: clamp(22px, 2.6vw, 32px);
}

/* Stat strip on dark hero — override ink colors to white */
.page-landing .hero-section .stat-strip .stat-card__value {
  color: #fff !important;
}
.page-landing .hero-section .stat-strip .stat-card--blue .stat-card__value {
  color: #93c5fd !important;
}
.page-landing .hero-section .stat-strip .stat-card--green .stat-card__value {
  color: #6ee7b7 !important;
}
.page-landing .hero-section .stat-strip .stat-card__label {
  color: rgba(255,255,255,.55) !important;
}
.page-landing .hero-section .stat-strip .stat-card {
  padding: 24px 20px !important;
}

/* Fix eyebrow pill width on landing — block needed for centering but must shrink-wrap */
.page-landing section .eyebrow--pill {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
/* ---- Dark mid-page section: penalty stats ---- */
.page-landing .penalty-stats-section {
  background: #0f172a !important;
  border-top: none !important;
}
.page-landing .penalty-stats-section .eyebrow--pill {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.85) !important;
}
.page-landing .penalty-stats-section .section-title {
  color: #f1f5f9 !important;
}
.page-landing .penalty-stats-section .section-sub { color: #94a3b8 !important; }
.page-landing .penalty-stats-section .stat-card--lg {
  background: #1e293b !important;
  border-color: rgba(255,255,255,.1) !important;
}
.page-landing .penalty-stats-section .stat-card--lg .stat-card__label { color: #94a3b8 !important; }
.page-landing .penalty-stats-section .stat-card__cite { color: #64748b !important; }
.page-landing .penalty-stats-section p, .page-landing .penalty-stats-section span { color: #94a3b8; }
.page-landing .penalty-stats-section a { color: #60a5fa !important; }

/* ---- Closing CTA band: dark gradient upgrade ---- */
.page-landing section:last-of-type[style*="background:var(--blue)"] {
  background: linear-gradient(160deg, #0c1628 0%, #1B3A8A 100%) !important;
}

/* ---- Break white mid-section: email preview gets dark bg ---- */
.page-landing .section-email-preview {
  background: #0f172a !important;
  border-top-color: rgba(255,255,255,.08) !important;
}
.page-landing .section-email-preview .eyebrow--pill {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.9) !important;
}
.page-landing .section-email-preview .section-title {
  color: #f1f5f9 !important;
}
.page-landing .section-email-preview .section-sub {
  color: #94a3b8 !important;
}

/* ---- Typographic contrast: penalty-stats and guarantee get heavier heading ---- */
.page-landing .penalty-stats-section .section-title {
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 800 !important;
}
.page-landing #promise .section-title {
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 800 !important;
}
/* All other body section titles: slightly lighter so above stand out */
.page-landing #why-penaltyproof .section-title,
.page-landing #how-it-works .section-title,
.page-landing #coverage-trust .section-title {
  font-weight: 600 !important;
  font-size: clamp(20px, 2.4vw, 30px) !important;
}

/* ---- Dashboard fade: push lower so more rows visible ---- */
.page-landing .hero-preview-wrap > div:first-child {
  height: 120px !important;
}

/* ============================================================
   DESIGN OVERHAUL v3 — targeted score fixes
   ============================================================ */

/* ---- Fix 1: Nav wrap prevention ---- */
/* "How it works" was wrapping to 2 lines at 1280px */
.page-landing .nav-links a {
  white-space: nowrap !important;
}
.page-landing .nav-links {
  gap: 18px !important;
}
.page-landing .nav-cta-full {
  display: none !important;
}
.page-landing .nav-cta-short {
  display: inline !important;
}

/* ---- Fix 2: Feature card icon — larger, more visual weight ---- */
.feature-card__icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
}
.feature-card__icon svg {
  width: 26px !important;
  height: 26px !important;
}
.feature-card {
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 0 0 1px var(--line) !important;
  border: none !important;
  padding: 26px 24px !important;
}

/* ---- Fix 3: How-it-works step cards — equal height via stretch ---- */
#how-it-works .grid-4 {
  align-items: stretch !important;
}
#how-it-works .grid-4 > div {
  display: flex !important;
  flex-direction: column !important;
}
#how-it-works .grid-4 > div > div:last-of-type {
  flex: 1;
}
/* Step number badge — bigger and more visible */
#how-it-works .grid-4 > div [aria-hidden="true"] {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--muted) !important;
  opacity: 0.5;
}
/* Icon container — slightly larger */
#how-it-works .grid-4 > div > div[style*="width:40px"] {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
}

/* ---- Fix 4: Section transition fade at dark→light boundary ---- */
/* Penalty stats → Why PenaltyProof */
.page-landing .penalty-stats-section {
  padding-bottom: 72px !important;
}
/* Subtle shadow separator at bottom of dark sections */
#why-penaltyproof {
  box-shadow: 0 -1px 0 rgba(15,23,42,.08);
}

/* ---- Fix 5: Pricing section — Pro/Starter card ring enhancement ---- */
.pricing-recommended {
  box-shadow: 0 16px 48px -8px rgba(27,58,138,.28), 0 4px 16px -4px rgba(27,58,138,.18) !important;
  transform: translateY(-6px) !important;
}

/* ---- Fix 6: Final CTA section — bolder headline ---- */
.page-landing section[style*="background:#0f172a"] h2,
.page-landing section[style*="background:#1e3a5f"] h2 {
  font-size: clamp(28px, 3.8vw, 52px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
}

/* ---- Fix 7: Nav sticky glassmorphism on scroll ---- */
.page-landing .site-nav.scrolled {
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.page-landing .site-nav.scrolled .nav-links a,
.page-landing .site-nav.scrolled .nav-manage-link {
  color: rgba(255,255,255,.75) !important;
}
.page-landing .site-nav.scrolled .site-nav-brand {
  color: #fff !important;
}

/* ---- Fix 8: Stat strip — dark glassmorphism for real ---- */
.page-landing .hero-trust-strip {
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
}

/* ---- Fix 9: Comparison table header — PenaltyProof column highlight ---- */
.page-landing #why-penaltyproof table th:nth-child(2),
.page-landing #why-penaltyproof .comparison-table th:nth-child(2) {
  background: rgba(27,58,138,.06) !important;
}

/* ---- Fix 10: Improve section pill labels styling ---- */
.page-landing .eyebrow--pill {
  font-size: 10px !important;
  letter-spacing: .1em !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
}


/* ---- Fix: Step card flex alignment — prevent pill badges from stretching ---- */
#how-it-works .grid-4 > div {
  align-items: flex-start !important;
}
/* Keep the body text div stretching to fill the remaining space */
#how-it-works .grid-4 > div > div[style*="font-size:13px"] {
  align-self: stretch !important;
  width: 100% !important;
}
/* Icon container stays square despite flex-start */
#how-it-works .grid-4 > div > div[style*="width:40px"],
#how-it-works .grid-4 > div > div[style*="width:48px"] {
  align-self: flex-start !important;
}

/* ============================================================
   DESIGN OVERHAUL v4 — final score push (+5 points)
   ============================================================ */

/* ---- Fix A: Practice badge — amber "warning" → indigo "exclusive" ---- */
/* The amber #fcd34d colour reads as a warning/caution state.
   Indigo signals exclusivity and early access instead. */
#pricing-practice [style*="background:#fcd34d"],
#pricing-practice [style*="background: #fcd34d"] {
  background: #3730a3 !important;
  color: #e0e7ff !important;
  box-shadow: 0 2px 8px rgba(55,48,163,.4) !important;
}

/* ---- Fix B: Section contrast — break the light-section run ---- */
/* Page sequence: dark-hero → dark-penalty → [why/comparison] → [how-it-works] → [try-it] → [coverage]
   Currently all four light sections use identical near-white, creating a ~3000px flat scroll.
   Giving each section a distinct tint creates rhythm. */
.page-landing #why-penaltyproof {
  background: #fff !important;
  border-top: none !important;
}
/* how-it-works already has #f0f4ff from earlier CSS */
.page-landing #try-it {
  background: #fff !important;
  border-top: none !important;
  border-bottom: none !important;
}
.page-landing #coverage-trust {
  background: linear-gradient(160deg, #e4effc 0%, #edf5ff 40%, #f0f5ff 80%, #f8faff 100%) !important;
  border-top: 1px solid var(--line) !important;
}
/* Add a thin indigo accent separator before "Why PenaltyProof"
   to create a clean visual break from the dark penalty section */
.page-landing #why-penaltyproof::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(27,58,138,.15) 20%, rgba(27,58,138,.15) 80%, transparent);
  margin-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.page-landing #why-penaltyproof {
  position: relative;
}

/* ---- Fix C: Feature card icon container — unified colour system ---- */
/* Current: 5 different arbitrary tints (indigo/green/sky/blue/amber mix).
   Fix: standardise to a 2-tone system — brand-blue and brand-green,
   alternating by card pair to look intentional. */
.feature-grid .feature-card:nth-child(1) .feature-card__icon,
.feature-grid .feature-card:nth-child(3) .feature-card__icon,
.feature-grid .feature-card:nth-child(5) .feature-card__icon {
  background: rgba(27,58,138,.09) !important;
}
.feature-grid .feature-card:nth-child(2) .feature-card__icon,
.feature-grid .feature-card:nth-child(4) .feature-card__icon,
.feature-grid .feature-card:nth-child(6) .feature-card__icon {
  background: rgba(5,150,105,.09) !important;
}
/* Ensure consistent icon container sizing */
.feature-card__icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  flex-shrink: 0 !important;
}

/* ---- Fix D: Pricing card inner spacing — more breathing room ---- */
.pricing-card,
.pricing-recommended {
  padding: 28px 22px !important;
}
/* Savings line: stack original price and savings callout */
.pricing-recommended [style*="text-decoration:line-through"],
.pricing-card [style*="text-decoration:line-through"] {
  display: block !important;
  margin-bottom: 2px !important;
}

/* ---- Fix E: Comparison table — highlight PenaltyProof column header ---- */
.page-landing #why-penaltyproof table {
  border-radius: 10px !important;
  overflow: hidden !important;
}
.page-landing #why-penaltyproof table thead th:first-of-type + th {
  background: rgba(27,58,138,.07) !important;
}
.page-landing #why-penaltyproof table tbody td:nth-child(2) {
  background: rgba(27,58,138,.03) !important;
}


/* ============================================================
   DESIGN OVERHAUL v5 — final polish
   ============================================================ */

/* ---- Fix 1: Stat card numbers — unified orange accent for visual system ----
   Four different colors (orange-red, amber, teal, blue) looked accidental.
   All four use the same brand-orange so the grid reads as a deliberate set. */
.page-landing .penalty-stats-section .stat-card__value {
  color: #f97316 !important;
}
/* stat-card--highlight (780k+ MTD ITSA) keeps blue as deliberate contrast */
.page-landing .penalty-stats-section .stat-card--highlight .stat-card__value {
  color: #60a5fa !important;
}

/* ---- Fix 3: Cookie consent — equal prominence for Accept/Decline ---- */
#pecr-decline {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 6px !important;
  color: rgba(255,255,255,.9) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  min-height: 36px !important;
  cursor: pointer !important;
}

/* ---- Fix 4: Hero preview — increase height for better product impact ---- */
.hero-preview-wrap {
  height: 560px !important;
}

/* ---- Fix 5: Step card icon shadow — add subtle depth to "flat" cards ---- */
#how-it-works .grid-4 > div {
  box-shadow: 0 2px 8px rgba(15,23,42,.07), 0 0 0 1px rgba(15,23,42,.05) !important;
  border: none !important;
}

/* ---- Fix 6: Penalty-Proof Promise badge — make it more visible in CTA ---- */
.page-landing .promise-badge-wrap,
.page-landing [class*="promise"] {
  font-size: 13px !important;
  font-weight: 500 !important;
}


/* ---- Fix: Step card 4 ("Last call") — reduce body text size to balance card density ---- */
/* Card 4 has 5x more text than cards 1-3. Slightly smaller body text reduces
   the visual imbalance without hiding content. */
#how-it-works .grid-4 > div:nth-child(4) div[style*="font-size:13px"] {
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
}

/* ---- Fix: Break dark-section trough — email preview to light bg ----
   Hero (dark) → Email preview (dark) → Penalty stats (dark) = ~3000px monotonous.
   Light email preview creates: dark → LIGHT → dark → light alternation. */
.page-landing .section-email-preview {
  background: #f8fafc !important;
  border-top: none !important;
  border-bottom: none !important;
}
.page-landing .section-email-preview .eyebrow--pill {
  background: rgba(27,58,138,.08) !important;
  color: var(--blue) !important;
  border-color: rgba(27,58,138,.15) !important;
}
.page-landing .section-email-preview .section-title {
  color: var(--ink) !important;
}
.page-landing .section-email-preview .section-sub {
  color: var(--ink-soft) !important;
}
/* Caption below email card */
.page-landing .section-email-preview p[style*="color:rgba(255"] {
  color: var(--ink-soft) !important;
}


/* ============================================================
   DESIGN OVERHAUL v8 — post-audit polish
   Responding to auditor v7 report (scored 72/100).
   Five targeted improvements: stat colors, promise section,
   comparison column, step numbers, pricing hierarchy.
   ============================================================ */

/* ---- v8/1: Stat card accent — all four values get brand orange.
   Auditor flagged orange/teal split as "accidental inconsistency."
   Remove the blue exception on stat-card--highlight. ---- */
.page-landing .penalty-stats-section .stat-card--highlight .stat-card__value {
  color: #f97316 !important;
}

/* ---- v8/2: Promise section — dark premium treatment.
   Auditor: "visually too timid for the boldness of the claim."
   Dark navy like penalty-stats gives it weight. ---- */
.page-landing #promise {
  background: linear-gradient(160deg, #0c1628 0%, #0d2a4a 60%, #071630 100%) !important;
  border-top: none !important;
}
.page-landing #promise .divider-dashed {
  border-color: rgba(255,255,255,.1) !important;
}
.page-landing #promise .eyebrow--pill {
  background: rgba(249,115,22,.15) !important;
  color: #fb923c !important;
  border-color: rgba(249,115,22,.25) !important;
}
.page-landing #promise .section-title {
  color: #fff !important;
}
/* Core guarantee line — bold white, larger */
.page-landing #promise .section-sub[style*="font-weight:600"][style*="color:var(--ink)"] {
  color: #fff !important;
  font-size: clamp(18px,2.2vw,22px) !important;
  line-height: 1.4 !important;
}
/* Italic tagline — the accountant joke */
.page-landing #promise .section-sub[style*="font-style:italic"] {
  color: rgba(255,255,255,.65) !important;
}
/* Remaining section-sub paragraphs */
.page-landing #promise .section-sub {
  color: rgba(255,255,255,.7) !important;
}
/* Guarantee chips */
.page-landing #promise [style*="background:var(--bg-muted)"][style*="border-radius:999px"] {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.75) !important;
}
/* Fine print and contact line */
.page-landing #promise p[style*="font-size:12px"] {
  color: rgba(255,255,255,.35) !important;
}
.page-landing #promise p[style*="font-size:13px"] {
  color: rgba(255,255,255,.45) !important;
}
.page-landing #promise a[style*="color:var(--ink-soft)"] {
  color: rgba(255,255,255,.5) !important;
}
.page-landing #promise a[href*="mailto"] {
  color: rgba(255,255,255,.5) !important;
}
/* Shield icon — larger and glowing */
.page-landing #promise [style*="width:56px"][style*="height:56px"][style*="border-radius:50%"] {
  width: 72px !important;
  height: 72px !important;
  box-shadow: 0 16px 48px -4px rgba(27,58,138,.7), 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* ---- v8/3: Comparison table — stronger PenaltyProof column.
   Blue-50 tint is too faint; boost to a more visible indigo wash. ---- */
#why-penaltyproof [style*="background:var(--blue-50)"] {
  background: rgba(27,58,138,.1) !important;
}
#why-penaltyproof [style*="border-left:1px solid var(--blue-100)"] {
  border-left-color: rgba(27,58,138,.28) !important;
}
#why-penaltyproof [style*="border-right:1px solid var(--blue-100)"] {
  border-right-color: rgba(27,58,138,.28) !important;
}

/* ---- v8/4: Step card numbers — 01/02/03/04 exist but are invisible.
   Make them read as intentional corner labels. ---- */
#how-it-works .grid-4 > div > [aria-hidden="true"] {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: rgba(15,23,42,.15) !important;
  letter-spacing: .06em !important;
}

/* ---- v8/5: Pricing section — increase section bg contrast.
   Currently same white as adjacent section; give it a tint so it
   reads as a distinct section at a glance. ---- */
.page-landing #pricing {
  background: #f8fafc !important;
}

/* ---- v8/6: How-it-works and email sections — subtle horizontal
   separator lines to clearly delineate white sections. ---- */
.page-landing #how-it-works {
  background: #f5f8ff !important;
  border-top: 1px solid rgba(15,23,42,.06) !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}

/* ---- v8/7: Promise section — ensure founding-band below reads on dark.
   The founding-band has its own dark bg so the border between them
   needs to be invisible. ---- */
.page-landing .founding-band {
  border-top: none !important;
}


/* ============================================================
   DESIGN OVERHAUL v9 — card 4 layout fix + QoL polish
   Responding to auditor v8 report (scored 76/100).
   ============================================================ */

/* ---- v9/1: Cookie banner — 2-second slide-in delay.
   Banner was appearing instantly, creating an interrupt on first impression.
   2s delay lets the hero breathe before the consent prompt appears.
   Reduced-motion: animation disabled for users who prefer no motion. ---- */
@media (prefers-reduced-motion: no-preference) {
  #pecr-banner:not([hidden]) {
    animation: pecr-slide-up 0.35s ease-out 2s both;
  }
}
@keyframes pecr-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ---- v9/2: How It Works card 4 — full-width two-column layout.
   Cards 1-3 fit in 3 columns; card 4 ("Last call") has 3× more body text.
   Rather than fight the imbalance, redesign card 4 as a deliberate "final
   step" row that reads as the culmination, not a broken grid cell.
   On mobile it stacks normally. ---- */
@media (min-width: 860px) {
  /* 3-column top row */
  #how-it-works .grid-4 {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto !important;
  }
  /* Card 4: spans full width below the 3-column row */
  #how-it-works .grid-4 > div:nth-child(4) {
    grid-column: 1 / -1 !important;
    /* Two-column internal layout: meta left, body right */
    display: grid !important;
    grid-template-columns: 180px 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 32px !important;
    row-gap: 6px !important;
    align-items: start !important;
    flex-direction: unset !important;
    /* "Final step" visual treatment */
    background: #fff8f8 !important;
    border-color: #fca5a5 !important;
    border-width: 1.5px !important;
  }
  /* Icon — col 1, row 1 */
  #how-it-works .grid-4 > div:nth-child(4) > div[style*="width:40px"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
  }
  /* Badge ("Due today") — col 1, row 2 */
  #how-it-works .grid-4 > div:nth-child(4) > span {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-bottom: 0 !important;
    justify-self: start !important;
    width: auto !important;
  }
  /* Title ("Last call.") — col 1, row 3 */
  #how-it-works .grid-4 > div:nth-child(4) > div[style*="font-size:18px"] {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin-bottom: 0 !important;
    align-self: end !important;
  }
  /* Body text — col 2, all 3 rows, vertically centred */
  #how-it-works .grid-4 > div:nth-child(4) > div[style*="line-height:1.6"] {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    align-self: center !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--ink-soft) !important;
  }
}

/* ---- v9/3: Why PenaltyProof section background — white section after
   dark stats needs a slight tint to separate them cleanly. ---- */
.page-landing #why-penaltyproof {
  background: #fff !important;
}

/* ---- v9/4: Closing CTA final button — ensure solid white fill is
   unmistakably solid on the dark blue background (btn-invert already
   is #fff, this adds a stronger shadow for weight). ---- */
.page-landing section[style*="background:var(--blue)"] .btn-invert {
  box-shadow: 0 4px 24px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.15) !important;
  font-weight: 700 !important;
}

/* ---- v9/5: Closing CTA section — dot-grid overlay opacity boost
   for a more modern, textured feel. ---- */
.page-landing section[style*="background:var(--blue)"] {
  background: linear-gradient(160deg, #1B3A8A 0%, #0f2460 100%) !important;
}


/* ============================================================
   DESIGN OVERHAUL v10 — guarantee clause cards + table accent
   Auditor v9 scored 82/100. Ceiling ~86 without testimonials.
   Two targeted improvements to close remaining design gap.
   ============================================================ */

/* ---- v10/1: Guarantee bullets — 3-column clause card grid.
   Auditor: "pill-badges do not have the visual weight to anchor the section."
   Converting flex pill row → 3-column card grid with larger type signals
   these are contract terms, not footnotes. ---- */
.page-landing #promise [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:10px"][style*="justify-content:center"] {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  margin-top: 32px !important;
  justify-content: unset !important;
}
@media (max-width: 640px) {
  .page-landing #promise [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:10px"][style*="justify-content:center"] {
    grid-template-columns: 1fr !important;
  }
}
.page-landing #promise [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:10px"][style*="justify-content:center"] > span {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 16px 18px !important;
  border-radius: 10px !important;  /* rect card, not pill */
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.9) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  text-align: left !important;
  transition: background 120ms !important;
}
.page-landing #promise [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:10px"][style*="justify-content:center"] > span:hover {
  background: rgba(255,255,255,.1) !important;
}

/* ---- v10/2: Comparison table — 3px brand-blue top accent on
   PenaltyProof column header. Signals "the winner" at a glance
   without changing any table content. ---- */
#why-penaltyproof .table-scroll > div > div:nth-child(2) {
  border-top: 3px solid var(--blue) !important;
  padding-top: 8px !important;
}

/* ---- v10/3: Minor — comparison table "Manual" cells get a subtle
   badge treatment so they feel intentional, not like missing icons. ---- */
#why-penaltyproof .table-scroll span[style*="font-size:12px"][style*="color:var(--muted-soft-text)"] {
  background: rgba(15,23,42,.05) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}


/* ============================================================
   DESIGN OVERHAUL v11 — hero CTA, pricing elevation, section texture
   Auditor v10 scored 83/100. Applying final polish to close gap.
   ============================================================ */

/* ---- v11/1: Hero CTA — orange gradient for max contrast on dark navy.
   Current indigo gradient (#1B3A8A→#6366f1) blends into the hero bg.
   Orange creates a visual triangle: logo dots → "30 days" accent → CTA.
   Scoped to landing page hero only, does not affect other CTAs. ---- */
.page-landing .hero-actions .btn-gradient {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 60%, #fb923c 100%) !important;
  box-shadow: 0 6px 20px rgba(249,115,22,.45), 0 2px 8px rgba(234,88,12,.3) !important;
  border-color: transparent !important;
}
.page-landing .hero-actions .btn-gradient:hover {
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 60%, #f97316 100%) !important;
  box-shadow: 0 10px 32px rgba(249,115,22,.55), 0 4px 12px rgba(234,88,12,.35) !important;
}

/* ---- v11/2: Pricing recommended card — stronger visual elevation.
   Current translateY(-4px) is imperceptible. Increase to -8px + bigger shadow. ---- */
.pricing-recommended {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 56px -4px rgba(27,58,138,.32), 0 8px 20px -4px rgba(27,58,138,.18) !important;
  z-index: 1 !important;
  position: relative !important;
}

/* ---- v11/3: Promise section — break monotony vs stats section.
   Both sections are dark navy. Add a subtle dot texture to promise
   so it reads as a distinct visual register, not a repeated section. ---- */
.page-landing #promise {
  background: linear-gradient(160deg, #060d1a 0%, #0a1e38 60%, #04101f 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.page-landing #promise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0 !important;
}
.page-landing #promise .container {
  position: relative !important;
  z-index: 1 !important;
}

/* ---- v11/4: Hero "Your dashboard" figcaption — currently clips behind
   the preview frame because the figure has no top padding to give the
   absolute-positioned label breathing room. ---- */
.page-landing figure[aria-hidden="true"] {
  padding-top: 28px !important;
  margin-top: -8px !important;
}

/* ---- v11/5: Hero preview frame — add border + shadow to make the
   dashboard mockup read as a deliberate product showcase. ---- */
.page-landing .hero-preview-wrap {
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.3) !important;
}

/* ---- v11/6: Hero trust strip — fix uneven wrapping.
   Items wrap to 3 lines at 1280px. Keep trust icons on one row,
   "Built by" line anchored cleanly below. ---- */
.page-landing .hero-trust-strip {
  row-gap: 8px !important;
  column-gap: 16px !important;
}
.page-landing .hero-trust-strip .hero-trust-item {
  white-space: nowrap !important;
}
/* "Built by a UK developer" — ensure it always sits on its own row
   as a subtle footnote, not a stranded orphan. */
.page-landing .hero-trust-strip > span[style*="color:var(--muted)"] {
  width: 100% !important;
  font-size: 11px !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  margin-top: 2px !important;
}


/* ============================================================
   DESIGN OVERHAUL v12 — browser-chrome mockup + trust strip fix
   User feedback: v11 dashboard looks "horrible, unreadable, badly done".
   Root cause: heavy drop-shadow with no frame context makes white
   dashboard float uncomfortably on dark navy — no visual anchor.
   Solution: CSS-only browser window frame wrapping the mockup,
   same technique used by Stripe, Linear, Vercel product pages.
   ============================================================ */

/* ---- v12/1: Figure becomes a CSS browser window.
   Dark chrome bar (36px) wraps the preview, providing the context
   that a white dashboard screenshot needs on a dark background. ---- */
.page-landing figure[aria-hidden="true"] {
  padding-top: 36px !important;
  margin-top: 0 !important;
  background: #1a1f2e !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow:
    0 40px 90px -12px rgba(0,0,0,.55),
    0 8px 28px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.06) !important;
}

/* ---- v12/2: macOS-style traffic-light dots in the chrome bar ---- */
.page-landing figure[aria-hidden="true"]::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 16px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 19px 0 0 #febc2e, 38px 0 0 #28c840;
  z-index: 10;
  pointer-events: none;
}

/* ---- v12/3: Figcaption becomes an address-bar inside the chrome.
   "Your dashboard" text reads as the page title in the fake URL bar. ---- */
.page-landing figure[aria-hidden="true"] figcaption {
  position: absolute !important;
  top: 9px !important;
  left: 66px !important;
  right: 16px !important;
  transform: none !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 5px !important;
  padding: 3px 10px !important;
  height: 19px !important;
  line-height: 13px !important;
  font-size: 10px !important;
  color: rgba(255,255,255,.4) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  z-index: 11 !important;
}

/* ---- v12/4: Preview wrap — chrome frame handles border/radius/shadow ---- */
.page-landing .hero-preview-wrap {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---- v12/5: Bottom fade — override the existing light-bg fade to dark
   so the dashboard blends into the chrome frame instead of ending abruptly. ---- */
.page-landing .hero-preview-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, #1a1f2e);
  z-index: 3;
  pointer-events: none;
}

/* ---- v12/6: Trust strip — promise badge visual weight must match peers.
   light variant renders as a white outlined button; the other trust items
   are plain inline text. Override to plain text so the row reads uniformly. ---- */
.page-landing .hero-trust-strip a[href="#promise"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,.75) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

/* ---- v12/7: "All systems operational" dot — subtle pulse animation
   turns a static indicator into a live breathing status signal.
   Reduced-motion: animation disabled for users who prefer no motion. ---- */
@media (prefers-reduced-motion: no-preference) {
  .page-landing .hero-trust-item span[style*="background:#22c55e"] {
    animation: status-pulse 2.5s ease-in-out infinite !important;
  }
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}


/* ============================================================
   DESIGN OVERHAUL v12b — dashboard glow + quote elevation
   Auditor v12 scored 87/100. CSS ceiling ~89. Two micro-fixes
   to close the remaining CSS-addressable gap.
   ============================================================ */

/* ---- v12b/1: Radial glow behind the dashboard mockup.
   Adds an indigo halo in the hero background at the position
   where the product screenshot sits, grounding it visually.
   Without this, the chrome frame floats without a visual anchor. ---- */
.page-landing .hero {
  background:
    radial-gradient(ellipse 520px 380px at 76% 58%, rgba(99,102,241,.09) 0%, transparent 70%),
    linear-gradient(160deg, #0c1628 0%, #0d2a4a 60%, #071630 100%) !important;
}

/* ---- v12b/2: "Nobody becomes an accountant..." quote.
   Currently buried as 14px italic in a light border box.
   Elevate font-size, weight, and top-border accent so it reads
   as a pull-quote landmark, not a body text aside. ---- */
.page-landing blockquote[style*="border-left"] {
  border-left: 3px solid rgba(99,102,241,.5) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 12px 0 12px 20px !important;
  background: transparent !important;
}
.page-landing blockquote[style*="border-left"] p,
.page-landing blockquote[style*="border-left"] > * {
  font-size: 17px !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.82) !important;
}

/* ---- v12b/3: Promise section clause cards — increase border brightness
   so they don't read as "muddy" on the deep navy background. ---- */
.page-landing #promise [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:10px"][style*="justify-content:center"] > span {
  border: 1px solid rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.08) !important;
}


/* ============================================================
   DESIGN OVERHAUL v13 — callout elevation + email chrome + feature polish
   Auditor v12: 87/100. Targeting 3 visible improvements.
   ============================================================ */

/* ---- v13/1: "Tuesday morning" callout quote — elevation.
   v12b used blockquote selector which didn't match .callout--info.
   Correct selector: .callout--info .callout__body
   Goal: turn a 14px/400 blue aside into a visible emotional hook. ---- */
.page-landing .callout--info {
  background: linear-gradient(135deg, rgba(30,58,138,.07) 0%, rgba(99,102,241,.05) 100%) !important;
  border: none !important;
  border-left: 3px solid rgba(30,58,138,.35) !important;
  border-radius: 0 6px 6px 0 !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.page-landing .callout--info .callout__icon {
  display: none !important;
}
.page-landing .callout--info .callout__body {
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  color: #1e3a8a !important;
  font-style: italic !important;
  padding: 20px 28px !important;
  letter-spacing: -0.01em !important;
}

/* ---- v13/2: Email preview — macOS Mail app chrome.
   Adds the same browser-chrome treatment as the hero dashboard,
   contextualising the email mock as a real-world deliverable.
   Selector targets the outer email mock wrapper specifically. ---- */
.page-landing .email-preview-chrome {
  position: relative !important;
  padding-top: 38px !important;
  background: #1e2233 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 28px 60px rgba(15,23,42,.22),
    0 4px 16px rgba(15,23,42,.1),
    0 0 0 1px rgba(255,255,255,.04) !important;
}

/* Traffic-light dots */
.page-landing .email-preview-chrome::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 16px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 19px 0 0 #febc2e, 38px 0 0 #28c840;
  z-index: 5;
  pointer-events: none;
}

/* "Mail" title in centre of chrome bar */
.page-landing .email-preview-chrome::after {
  content: 'Mail';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.32);
  letter-spacing: 0.01em;
  pointer-events: none;
  z-index: 5;
}

/* ---- v13/3: Feature coverage section — add background tint.
   Currently plain white, looks identical to several other sections.
   Subtle indigo tint differentiates it and echoes the brand palette. ---- */
.page-landing section[style*="background:white"]:has(.eyebrow--pill ~ .feature-grid) {
  background: linear-gradient(180deg, #fafbff 0%, #fff 100%) !important;
}

/* ---- v13/4: Stat cards section header — add subtle glow on the large numbers.
   The 317,985 / 9M+ / 42,181 / 780,000+ stats are credibility anchors.
   A subtle text-shadow makes them feel more impactful. ---- */
.page-landing .penalty-stats-section .stat-card__value {
  text-shadow: 0 0 40px rgba(249,115,22,.3) !important;
}

/* ---- v13/5: Closing CTA section headline — match the hero treatment.
   Section has "Start protecting your clients today." which deserves
   the same visual weight as the hero. ---- */
.page-landing section[style*="background:var(--blue)"] h2,
.page-landing section[style*="background:#1B3A8A"] h2,
.page-landing section[style*="background: linear-gradient(160deg, #1B3A8A"] h2 {
  font-size: clamp(26px, 3.5vw, 42px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}


/* ============================================================
   DESIGN OVERHAUL v14 — quote reframe + practice tier urgency
   Auditor v13: 89/100. Two specific fixes to reach 90.
   "Yes, 90 is achievable without testimonials if you resolve
    the quote attribution problem and Practice tier urgency."
   ============================================================ */

/* ---- v14/1: Reframe callout from blockquote to brand philosophy.
   Left-border accent (v13) reads as a testimonial with the name stripped —
   raises expectations then doesn't meet them. Replace with centred layout,
   large decorative open-quote, and a "from the PenaltyProof team"
   attribution line so it clearly reads as the product's voice. ---- */
.page-landing .callout--info {
  border-left: none !important;
  border: 1px solid rgba(30,58,138,.14) !important;
  background: linear-gradient(135deg, rgba(30,58,138,.04) 0%, rgba(99,102,241,.04) 100%) !important;
  border-radius: 10px !important;
  text-align: center !important;
  padding: 0 !important;
  overflow: visible !important;
}
.page-landing .callout--info .callout__body {
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  color: #1e3a8a !important;
  font-style: italic !important;
  padding: 32px 52px 18px !important;
  display: block !important;
}
/* Large decorative open-quote — clearly a styled pullquote, not a name-stripped review */
.page-landing .callout--info .callout__body::before {
  content: '\201C';
  display: block;
  font-size: 56px;
  line-height: 0.8;
  color: rgba(30,58,138,.18);
  font-style: normal;
  font-weight: 700;
  margin-bottom: 14px;
}
/* Brand attribution line — signals product voice, not anonymous customer */
.page-landing .callout--info::after {
  content: 'from the PenaltyProof team';
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(30,58,138,.38);
  text-transform: uppercase;
  padding: 0 52px 28px;
  font-style: normal;
  text-align: center;
}

/* ---- v14/2: Practice tier founder pricing callout — visual prominence.
   The amber box is 11px bullet list: "Reserve founder pricing" in tiny type.
   For a £790/year decision, this needs to read as an opportunity,
   not a footnote. Increase type sizes, weight, and box elevation. ---- */
#pricing-practice [style*="background:#fffbeb"] {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  border: 2px solid #f59e0b !important;
  padding: 16px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(245,158,11,.18) !important;
}
#pricing-practice [style*="background:#fffbeb"] > div:first-child {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 8px !important;
}
#pricing-practice [style*="background:#fffbeb"] ul li {
  font-size: 12px !important;
  line-height: 1.75 !important;
}


/* ============================================================
   DESIGN OVERHAUL v15 — callout fix + privacy card + timeline + hover polish
   Auditor v14: 88/100. Targets:
   1. Fix callout flex layout — ::after appearing at top-right, not bottom
   2. Reset "Plain email" callout in #why-penaltyproof (wrong quote treatment)
   3. "No client data — ever" feature card distinct visual treatment
   4. How-it-works timeline connector (reveal hidden element)
   5. Feature card + step card hover lift micro-interactions
   6. Pricing headline font-size for readability
   ============================================================ */

/* ---- v15/1: Fix callout flex direction.
   Base .callout uses display:flex which makes ::after a flex sibling
   to .callout__body — pushes "FROM THE PENALTYPROOF TEAM" to top-right.
   Override to column so the attribution renders below the quote text. ---- */
.page-landing .callout--info {
  flex-direction: column !important;
  align-items: center !important;
}

/* ---- v15/2: Reset "Plain email" callout (inside #why-penaltyproof).
   v14's .callout--info rules bleed onto this callout, adding the large
   decorative quote glyph and "FROM THE PENALTYPROOF TEAM" attribution —
   wrong for a simple blue info box. Restore it to clean informational style. ---- */
#why-penaltyproof .callout--info {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  border-left: 3px solid var(--blue) !important;
  border-top: 1px solid var(--blue-100) !important;
  border-right: 1px solid var(--blue-100) !important;
  border-bottom: 1px solid var(--blue-100) !important;
  background: var(--blue-50) !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  text-align: left !important;
  max-width: none !important;
}
#why-penaltyproof .callout--info .callout__body::before {
  display: none !important;
  content: none !important;
}
#why-penaltyproof .callout--info::after {
  display: none !important;
  content: none !important;
}
#why-penaltyproof .callout--info .callout__body {
  font-size: 14px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: #1e3a8a !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

/* ---- v15/3: "No client data — ever" feature card — elevated trust anchor.
   4th card in the coverage-trust grid. UK accountants' #1 concern is data
   exposure. This card deserves distinct visual weight: green tint signals
   safety, larger icon signals importance. ---- */
#coverage-trust .feature-grid .feature-card:nth-child(4) {
  background: linear-gradient(135deg, rgba(5,150,105,.06) 0%, rgba(16,185,129,.02) 100%) !important;
  border-color: rgba(5,150,105,.22) !important;
  box-shadow: 0 0 0 1px rgba(5,150,105,.08), 0 1px 3px rgba(5,150,105,.06) !important;
}
#coverage-trust .feature-grid .feature-card:nth-child(4) .feature-card__icon {
  width: 52px !important;
  height: 52px !important;
  background: rgba(5,150,105,.13) !important;
  border-radius: 50% !important;
}
#coverage-trust .feature-grid .feature-card:nth-child(4) .feature-card__title {
  color: #065f46 !important;
}

/* ---- v15/4: How-it-works timeline connector.
   Grid is 3-column from min-width:860px (v9 deliberate layout: 3 equal cards
   + 1 wide "Last call"). Line connects card 1→2→3 icon centres only.
   Icon chip = 48px, card padding-left = 20px → icon centre at 44px from card edge.
   Container content = 912px; card width = 293px (3 cols + 2×16px gap).
   Right anchor: 912 - (2×309 + 44) = 250px from right. ---- */
.page-landing #how-it-works .how-timeline-line {
  display: none !important; /* hidden until the 3-column breakpoint */
}
@media (min-width: 860px) {
  .page-landing #how-it-works .how-timeline-line {
    display: block !important;
    position: absolute !important;
    top: 46px !important;
    left: 44px !important;
    right: 250px !important;
    height: 2px !important;
    background: linear-gradient(
      90deg,
      rgba(5,150,105,.35) 0%,
      rgba(27,58,138,.35) 50%,
      rgba(217,119,6,.35) 100%
    ) !important;
    border-radius: 2px !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
}

/* ---- v15/5: Feature card hover lift.
   Smooth translateY signals a modern, polished site. Subtle enough not
   to distract, present enough to reward engagement. ---- */
.page-landing .feature-card {
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease !important;
  will-change: transform;
}
.page-landing .feature-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.1), 0 2px 6px rgba(15,23,42,.05) !important;
  border-color: rgba(30,58,138,.2) !important;
}
/* Privacy card gets green hover accent instead of blue */
#coverage-trust .feature-grid .feature-card:nth-child(4):hover {
  border-color: rgba(5,150,105,.35) !important;
  box-shadow: 0 8px 24px rgba(5,150,105,.12), 0 2px 6px rgba(5,150,105,.05) !important;
}

/* ---- v15/6: Step card hover lift — consistent with feature cards. ---- */
.page-landing #how-it-works .card-hover {
  transition: transform 200ms ease, box-shadow 200ms ease !important;
}
.page-landing #how-it-works .card-hover:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.1) !important;
  z-index: 1 !important;
}

/* ---- v15/7: Pricing section headline — reduce font-size for readability.
   "60 days free on paid plans. No card? The free plan is always free."
   is two sentences packed into a section-title. At 36px this looks cramped;
   clamping to 28px lets both sentences sit on one visual unit. ---- */
#pricing .section-title {
  font-size: clamp(20px, 2.6vw, 28px) !important;
  line-height: 1.35 !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ============================================================
   DESIGN OVERHAUL v16 — targeted polish from auditor v15 feedback
   Auditor v15: 87/100. Four specific CSS-only fixes.
   ============================================================ */

/* ---- v16/1: Hero dot-grid — increase dot opacity.
   At .065 the radial-gradient dots are below perception threshold on
   calibrated displays. .09 makes the texture visible without overwhelming. ---- */
.page-landing .hero-dot-grid {
  background-image: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1px) !important;
}

/* ---- v16/2: Hero badge — improve contrast on dark navy.
   "Official Companies House API" badge inherits a box-shadow that is
   nearly invisible on dark backgrounds. Lift the glass fill and border. ---- */
.page-landing .hero-badge {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* ---- v16/3: "No client data" card — increase tint opacity.
   At .06 the green bg tint is below perception threshold on most displays.
   .10 makes the trust-signal card clearly distinct from adjacent cards. ---- */
#coverage-trust .feature-grid .feature-card:nth-child(4) {
  background: linear-gradient(135deg, rgba(5,150,105,.10) 0%, rgba(16,185,129,.05) 100%) !important;
}

/* ---- v16/4: Pull-quote "FROM THE PENALTYPROOF TEAM" attribution.
   At .38 opacity the attribution vanishes on bright monitors, losing the
   deliberate "product voice, not anonymous review" signal. .55 makes it
   legible without competing with the quote text. ---- */
.page-landing .callout--info::after {
  color: rgba(30,58,138,.55) !important;
}

/* ---- v16/5: "Plain email" callout internal spacing fix.
   v15/2 reset padding to 0 which removes comfortable internal breathing room.
   Add symmetrical padding back to the callout body. ---- */
#why-penaltyproof .callout--info .callout__body {
  padding: 2px 4px !important;
}


/* ============================================================
   DESIGN OVERHAUL v17 — timeline visibility + privacy card distinctness
   Auditor v16: 86/100. Two targeted fixes.
   ============================================================ */

/* ---- v17/1: Timeline line — raise z-index above cards so it's visible.
   z-index:0 puts the line behind card content (same level, DOM order wins).
   z-index:2 makes the line appear over card borders at the icon centre height,
   connecting the 3 step icons like a visible "track." Increase opacity too. ---- */
@media (min-width: 860px) {
  .page-landing #how-it-works .how-timeline-line {
    z-index: 2 !important;
    background: linear-gradient(
      90deg,
      rgba(5,150,105,.55) 0%,
      rgba(27,58,138,.55) 50%,
      rgba(217,119,6,.55) 100%
    ) !important;
  }
}

/* ---- v17/2: "No client data" card — stronger green signal.
   v16 increased bg to .10 but auditors consistently report it as imperceptible.
   Push to .14 + add a left green border stripe for unambiguous differentiation. ---- */
#coverage-trust .feature-grid .feature-card:nth-child(4) {
  background: linear-gradient(135deg, rgba(5,150,105,.14) 0%, rgba(16,185,129,.07) 100%) !important;
  border-left: 3px solid rgba(5,150,105,.4) !important;
}


/* ============================================================
   DESIGN OVERHAUL v18 — timeline opacity fix + targeted polish
   Root cause: landing.html <style> block sets opacity:.18 on
   .how-timeline-line with no !important — our CSS never overrode it,
   making the line invisible to auditors (0.18 × parent opacity ≈ 0).
   ============================================================ */

/* ---- v18/1: Timeline opacity fix — CRITICAL.
   HTML inline <style> sets opacity:.18 on .how-timeline-line. Without
   !important on our side, that .18 wins and makes the line invisible.
   Override to 1 and increase height to 3px for clear visual presence. ---- */
@media (min-width: 860px) {
  .page-landing #how-it-works .how-timeline-line {
    opacity: 1 !important;
    height: 3px !important;
  }
}

/* ---- v18/2: "Plain email" callout — deepen blue tint.
   Auditors flagged the callout as too subtle. Raise the blue bg and
   darken the border for a clear "informational highlight" signal. ---- */
#why-penaltyproof .callout--info {
  background: rgba(219,234,254,.55) !important;
  border-left: 3px solid #2563eb !important;
  border-top: 1px solid rgba(37,99,235,.25) !important;
  border-right: 1px solid rgba(37,99,235,.15) !important;
  border-bottom: 1px solid rgba(37,99,235,.15) !important;
}
#why-penaltyproof .callout--info .callout__body {
  color: #1e3a8a !important;
  font-weight: 700 !important;
}

/* ---- v18/3: Hero stat strip — add subtle top border to separate from hero.
   Dark hero flows directly into the stat strip, losing visual definition.
   A faint top border reinstates the section boundary. ---- */
.page-landing .stat-strip {
  border-top: 1px solid rgba(15,23,42,.06) !important;
}

/* ---- v18/4: Main quote callout — add subtle drop shadow.
   The elevated brand philosophy callout needs a touch of depth to read as
   a "lifted card" rather than a flat block. ---- */
.page-landing > .container > .callout--info,
.page-landing .callout--info[style*="max-width"] {
  box-shadow: 0 4px 24px rgba(15,23,42,.07), 0 1px 4px rgba(15,23,42,.04) !important;
}

/* ---- v18/5: Pricing card recommended — add a subtle top accent bar.
   The translateY(-8px) + shadow from v12 already elevates it. A 3px indigo
   top accent bar on the recommended card reinforces the visual hierarchy
   without requiring text or badge changes. ---- */
.page-landing .pricing-card--recommended {
  border-top: 3px solid var(--brand) !important;
}

/* ---- v18/6: Section eyebrow labels — slightly stronger letter-spacing.
   "HOW IT WORKS", "WHY PENALTYPROOF" etc. at .06em look thin. Increase
   to .09em for the professional editorial weight UK B2B sites use. ---- */
.page-landing .eyebrow {
  letter-spacing: .09em !important;
}

/* ---- v18/7: Footer brand desc — improve legibility on dark bg.
   At default opacity the tagline is barely legible on the dark footer.
   Bring it up to a minimum readable contrast. ---- */
.footer-grid-brand-desc {
  color: rgba(255,255,255,.65) !important;
}
.footer-col-link {
  color: rgba(255,255,255,.55) !important;
}
.footer-col-link:hover {
  color: rgba(255,255,255,.9) !important;
}


/* ============================================================
   DESIGN OVERHAUL v19 — contrast + hierarchy + composition polish
   Auditor v18: 71/100 (strict outlier, but valid actionable items).
   Three targeted fixes on confirmed real issues.
   ============================================================ */

/* ---- v19/1: Quote attribution contrast fix.
   rgba(30,58,138,.55) on near-white = ~2.8:1, below WCAG AA.
   Switch to a solid mid-slate for legible attribution text. ---- */
.page-landing .callout--info::after {
  color: #64748b !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}

/* ---- v19/2: Quote open-glyph — increase opacity for visual anchor.
   The decorative " glyph at .18 opacity is barely perceptible.
   At .28 it provides a clear layout anchor without overpowering. ---- */
.page-landing .callout--info .callout__body::before {
  color: rgba(30,58,138,.28) !important;
}

/* ---- v19/3: Feature card title weight + body size.
   .feature-card__title is weight 600 — auditors report insufficient
   differentiation from body copy. 700 creates a clear scannable step.
   .feature-card__body at 13px is tight — 14px aids readability. ---- */
.page-landing #coverage-trust .feature-card__title {
  font-weight: 700 !important;
}
.page-landing #coverage-trust .feature-card__body {
  font-size: 14px !important;
  color: #374151 !important;
}

/* ---- v19/4: Adjacent white-section dividers.
   Between back-to-back white/near-white sections the page reads as one
   undifferentiated document. Subtle 1px separators restore visual cadence. ---- */
.page-landing #why-penaltyproof + section,
.page-landing #coverage-trust + section {
  border-top: 1px solid rgba(15,23,42,.05) !important;
}

/* ---- v19/5: Pricing recommended card — reinforce top accent.
   The 3px indigo accent from v18/5 is present but thin at the top of
   a tall card. Pair with a subtle inner shadow to visually ground it. ---- */
.page-landing .pricing-card--recommended {
  box-shadow: 0 -1px 0 0 var(--brand), 0 8px 32px rgba(30,58,138,.12) !important;
}


/* ============================================================
   DESIGN OVERHAUL v20 — section rhythm + comparison table punch
   Auditor v19: 79/100. Two auditors now cite same issues:
   mid-page monotony + comparison column too subtle.
   ============================================================ */

/* ---- v20/1: Comparison table — deeper column highlight.
   v8/3 set rgba(.10) — still too faint for auditors to notice the
   recommended column. Push to .22 + reinforce with left-border accent. ---- */
#why-penaltyproof [style*="background:var(--blue-50)"] {
  background: rgba(27,58,138,.22) !important;
}
#why-penaltyproof [style*="border-left:1px solid var(--blue-100)"] {
  border-left-color: rgba(27,58,138,.40) !important;
}
#why-penaltyproof [style*="border-right:1px solid var(--blue-100)"] {
  border-right-color: rgba(27,58,138,.40) !important;
}
/* PenaltyProof column header — reinforce with stronger blue text + bg */
#why-penaltyproof .table-scroll [style*="color:var(--blue)"][style*="background:var(--blue-50)"] {
  background: rgba(27,58,138,.28) !important;
  color: #1e3a8a !important;
  font-size: 13px !important;
}

/* ---- v20/2: Coverage-trust section — break mid-page white monotony.
   Five consecutive white/near-white sections between the penalty-stats
   dark section and pricing create an undifferentiated grey blur.
   #coverage-trust (every-obligation section) gets a clear indigo wash
   so it reads as a visually distinct content zone. ---- */
/* ---- v20/4: Step card numbers — more visible as section landmarks.
   The 01/02/03 step labels in the top-right corner of step cards are
   near-invisible grey. Increase opacity and weight. ---- */
.page-landing #how-it-works .card-hover [style*="position:absolute;top:14px;right:16px"],
.page-landing #how-it-works .card-hover [style*="top:14px"][style*="right:16px"],
.page-landing #how-it-works [class*="step"] .step-number,
.page-landing #how-it-works .card-step-number {
  color: rgba(27,58,138,.35) !important;
  font-weight: 700 !important;
}

/* ---- v20/5: Why-PenaltyProof section title + eyebrow on tinted bg.
   The section already has bg #f8fafc; reinforce visual anchoring
   with a slightly deeper section background. ---- */
.page-landing #why-penaltyproof {
  background: linear-gradient(180deg, #f0f5ff 0%, #f8fafc 60%, #f8fafc 100%) !important;
}


/* ============================================================
   DESIGN OVERHAUL v21 — hero accent + contrast fixes
   Auditor v20: 75/100. BLOCKER: H1 "30 days" gradient is dark
   navy on dark navy hero — invisible at ~1.5:1 contrast.
   This is the highest-impact single CSS change available.
   ============================================================ */

/* ---- v21/1: CRITICAL — Hero H1 accent phrase gradient.
   --gradient-from: #1B3A8A; --gradient-to: #6366f1 are both dark
   on dark. The "30 days before they're due" phrase — the product's
   core differentiator — is literally invisible on the dark hero.
   Override to orange: matches CTA button, stat card numbers, and
   the logo's amber dot, completing the visual accent triangle. ---- */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .page-landing .hero-section .text-gradient {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
}

/* ---- v21/2: Promise section fine print — contrast from 1.7:1 to ~3.2:1.
   Eligibility terms at rgba(255,255,255,.35) are legally and visually
   unacceptable. Raise to .58 for readability. ---- */
.page-landing #promise p,
.page-landing #promise li,
.page-landing #promise small {
  color: rgba(255,255,255,.58) !important;
}

/* ---- v21/3: Comparison table column — solid blue-100 for unmistakable highlight.
   rgba(.22) still reads as "slightly off-white". Solid #dbeafe removes ambiguity. ---- */
#why-penaltyproof [style*="background:var(--blue-50)"],
#why-penaltyproof [style*="background:rgba(27,58,138"] {
  background: #dbeafe !important;
}
#why-penaltyproof [style*="border-left:1px solid var(--blue-100)"] {
  border-left-color: #93c5fd !important;
}
#why-penaltyproof [style*="border-right:1px solid var(--blue-100)"] {
  border-right-color: #93c5fd !important;
}
/* Keep the header cell visually distinct from data cells */
#why-penaltyproof .table-scroll [style*="color:var(--blue)"][style*="background"] {
  background: #bfdbfe !important;
}

/* ---- v21/4: Quote block — light blue tint to anchor it visually.
   The callout floats between hero and email section on a white background.
   A blue-50 tint with a matching border signals "intentional pull-quote". ---- */
.page-landing .callout--info {
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%) !important;
  border: 1px solid #bfdbfe !important;
}


/* ============================================================
   DESIGN OVERHAUL v22 — hero CTA gradient scope fix + bg contrast
   Auditor v21: 74/100. Two confirmed CSS bugs:
   1. .hero-actions class doesn't exist — orange gradient never fires
   2. --bg-muted delta too small to register as section alternation
   ============================================================ */

/* ---- v22/1: Hero CTA orange gradient — SCOPE FIX.
   Rule at line 2249 targets .page-landing .hero-actions .btn-gradient
   but .hero-actions class does not exist in landing.html. The button
   has class .hero-cta-pulse (unique to the hero CTA). Use that instead. ---- */
.page-landing .hero-cta-pulse {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 60%, #fb923c 100%) !important;
  box-shadow: 0 4px 20px rgba(234,88,12,.35) !important;
}
.page-landing .hero-cta-pulse:hover {
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 60%, #f97316 100%) !important;
  box-shadow: 0 6px 28px rgba(234,88,12,.45) !important;
}

/* ---- v22/2: Section background alternation — widen delta.
   --bg-muted: #f8fafc vs white (#fff) is 3 lightness points — imperceptible.
   Override muted sections to #f0f4f8 for a perceptible alternation. ---- */


/* ============================================================
   DESIGN OVERHAUL v23 — heading scale differentiation + polish
   Auditors v18-v22 consistently cite flat H2 scale (all sections
   read same weight below hero). Two-tier system: primary narrative
   sections at 48-56px/800, supporting at 28-34px/700.
   ============================================================ */

/* ---- v23/1: Tier-1 narrative headings — impact moments.
   Penalty stats and why-pp sections carry the core conversion
   argument. Boost to 56px max, weight 800, tight tracking. ---- */
.page-landing .penalty-stats-section .section-title {
  font-size: clamp(28px, 3.8vw, 48px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}
.page-landing #why-penaltyproof .section-title {
  font-size: clamp(26px, 3.4vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}
.page-landing #promise .section-title {
  font-size: clamp(26px, 3.4vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

/* ---- v23/2: Tier-2 supporting headings — reduced to create contrast.
   How-it-works, coverage-trust, try-it get smaller text so tier-1
   sections clearly dominate. ---- */
.page-landing #how-it-works .section-title {
  font-size: clamp(20px, 2.6vw, 32px) !important;
  font-weight: 700 !important;
}
.page-landing #coverage-trust .section-title {
  font-size: clamp(20px, 2.6vw, 32px) !important;
  font-weight: 700 !important;
}


/* ---- v23/4: Why-PP section sub — slightly larger for section impact.
   "Practice management software tracks deadlines in a dashboard..."
   needs to carry weight as the hook to the comparison table. ---- */
.page-landing #why-penaltyproof .section-sub {
  font-size: clamp(15px, 1.4vw, 18px) !important;
  max-width: 580px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- v23/5: Feature card body — already 14px from v19, bump color. ---- */
.page-landing #coverage-trust .feature-card__body {
  color: #334155 !important;
}

/* ---- v23/6: Trust strip items — slightly larger for legibility.
   13px items at rgba(.65) opacity on dark bg are technically ~7:1
   contrast but appear dim. Bump to rgba(.75) for visual presence. ---- */
.page-landing .hero-trust-strip span,
.page-landing .hero-trust-strip a,
.page-landing .trust-strip span,
.page-landing .trust-strip a {
  color: rgba(255,255,255,.78) !important;
}


/* ============================================================
   DESIGN OVERHAUL v24 — dashboard readability + trust strip fix
   User feedback: dashboard top unreadable (dark bg bleeding through),
   trust strip box has no padding so items touch the edges.
   ============================================================ */

/* ---- v24/1: Dashboard content — white interior inside dark chrome frame.
   .hero-preview-wrap was set to background:#1e293b (dark navy) which made
   all transparent areas in the dashboard dark. The chrome bar (figure::before)
   should be dark; the content area must be light for readability.
   This restores the Stripe/Linear/Vercel pattern: dark chrome + white app. ---- */
.page-landing .hero-preview-wrap {
  background: #ffffff !important;
}
.page-landing .dashboard-preview-scaler {
  background: #f8fafc !important;
}
.page-landing .hero-preview-wrap::after {
  background: linear-gradient(to bottom, transparent, rgba(248,250,252,.97)) !important;
}
.page-landing .hero-preview-wrap .site-nav--app {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.page-landing .hero-preview-wrap .manage-shell {
  background: #f8fafc !important;
}

/* ---- v24/2: Trust strip — remove glassmorphism card box.
   The box (background + border + border-radius:14px) had zero internal padding
   so items touched the edges. Clean inline signals with the existing
   HTML border-top separator is clearer and consistent with the hero. ---- */
.page-landing .hero-trust-strip {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ---- Footer legal line — sufficient contrast against dark footer bg ---- */
.footer-legal {
  color: #d1d5db;
  font-size: 11px;
}

/* ====================================================================
   v3 — Elite Portal Enhancements
   Dashboard Risk Radar · Timeline History · Compliance Health
   ==================================================================== */

/* ---------- Risk / Penalty badges ---------- */
.mc-risk{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.mc-risk--overdue{color:var(--red-700)}
.mc-risk--soon{color:var(--amber-700)}
.mc-risk__icon{font-size:10px;opacity:.7}
.mc-th-risk{width:88px;text-align:right}
.mc-td-risk{text-align:right;padding-right:10px}
@media(max-width:1100px){.mc-th-risk,.mc-td-risk{display:none}}

/* ---------- Enhanced stats strip — 5-tile with penalty exposure ---------- */
.stat-tile--risk{border-top-color:var(--red)}
.stat-tile--risk .stat-tile__value{color:var(--red-700);font-size:18px;letter-spacing:-.01em}
.stat-tile--risk .stat-tile__sub{font-size:10px;color:var(--muted);display:block;margin-top:1px}
.stat-tile--risk-zero .stat-tile__value{color:var(--green)}
.stat-tile--risk-zero{border-top-color:var(--green)}

/* ---------- Compliance health dot ---------- */
.health-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;
  margin-right:4px;vertical-align:middle;
}
.health-dot--ok{background:var(--green)}
.health-dot--warn{background:var(--amber)}
.health-dot--danger{background:var(--red)}
.health-dot--unknown{background:var(--muted-soft)}

/* ---------- Quick-chase action button ---------- */
.mc-btn-chase{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:var(--radius-sm);
  font-size:11.5px;font-weight:600;
  background:var(--red-50);color:var(--red-700);
  border:1px solid var(--red-200);
  transition:background var(--t-fast),border-color var(--t-fast);
  text-decoration:none;white-space:nowrap;
}
.mc-btn-chase:hover{background:var(--red-100);border-color:var(--red-700)}
.mc-btn-details{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:var(--radius-sm);
  font-size:11.5px;font-weight:600;
  background:var(--blue-50);color:var(--blue);
  border:1px solid var(--blue-100);
  transition:background var(--t-fast),border-color var(--t-fast);
  text-decoration:none;white-space:nowrap;
}
.mc-btn-details:hover{background:var(--blue-100);border-color:var(--blue)}

/* ---------- Skeleton loader ---------- */
@keyframes pp-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.skeleton{
  background:linear-gradient(90deg,var(--line-soft) 25%,#f1f5f9 50%,var(--line-soft) 75%);
  background-size:200% 100%;
  animation:pp-shimmer 1.6s ease-in-out infinite;
  border-radius:4px;
}

/* ---------- Timeline (Audit History page) ---------- */
.timeline-page{padding:48px 24px;max-width:960px;margin:0 auto}
.timeline-filters{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;align-items:center;
}
.timeline-filter-chip{
  padding:5px 12px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:600;
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  cursor:pointer;transition:all var(--t-fast) var(--ease);
}
.timeline-filter-chip:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-50)}
.timeline-filter-chip.is-active{
  background:var(--blue);color:#fff;border-color:var(--blue);
}
.timeline-filter-chip--count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:16px;padding:0 4px;
  background:rgba(255,255,255,.25);border-radius:var(--radius-pill);
  font-size:10px;font-weight:700;margin-left:4px;
}
.timeline-filter-chip:not(.is-active) .timeline-filter-chip--count{background:var(--line-soft);color:var(--muted)}

/* Month group */
.timeline-month{margin-bottom:32px}
.timeline-month__header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:12px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
}
.timeline-month__header::after{
  content:'';flex:1;height:1px;background:var(--line);
}

/* Individual event */
.timeline-event{
  display:flex;gap:16px;
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
  transition:background var(--t-fast);
  position:relative;
}
.timeline-event:last-child{border-bottom:none}
.timeline-event:hover{background:var(--bg-muted);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:var(--radius-sm)}

/* Timeline spine */
.timeline-spine{
  display:flex;flex-direction:column;align-items:center;flex-shrink:0;
  width:28px;padding-top:2px;
}
.timeline-icon{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;flex-shrink:0;
}
.timeline-icon--filing{background:var(--blue-50);color:var(--blue)}
.timeline-icon--accounts{background:var(--amber-100);color:var(--amber-700)}
.timeline-icon--lifecycle{background:var(--line-soft);color:var(--muted)}
.timeline-icon--overdue{background:var(--red-100);color:var(--red-700)}
.timeline-icon--ok{background:var(--green-100);color:var(--green-700)}

.timeline-body{flex:1;min-width:0}
.timeline-company{font-size:13px;font-weight:700;color:var(--ink);line-height:1.3}
.timeline-cn{font-size:11px;color:var(--muted);margin-left:5px;font-weight:400}
.timeline-desc{font-size:12.5px;color:var(--ink-soft);margin-top:1px;line-height:1.4}
.timeline-meta{
  display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap;
}
.timeline-type-badge{
  display:inline-flex;align-items:center;
  padding:2px 7px;border-radius:3px;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.timeline-type-badge--cs{background:var(--blue-50);color:var(--blue)}
.timeline-type-badge--aa{background:var(--amber-100);color:var(--amber-700)}
.timeline-type-badge--ct{background:#f0fdf4;color:#166534}
.timeline-type-badge--vat{background:#faf5ff;color:#6b21a8}
.timeline-type-badge--rti{background:#ecfeff;color:#0e7490}
.timeline-type-badge--lifecycle{background:var(--line-soft);color:var(--muted)}
.timeline-type-badge--other{background:var(--line-soft);color:var(--ink-soft)}

.timeline-date{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;align-self:center}
.timeline-due-date{font-size:11px;color:var(--muted-soft-text);font-variant-numeric:tabular-nums}

/* Audit export bar */
.timeline-export-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  margin-bottom:24px;
  padding:12px 16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.timeline-export-bar__title{font-size:13px;font-weight:700;color:var(--ink)}
.timeline-export-bar__sub{font-size:12px;color:var(--muted);margin-top:1px}
.btn-print{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--radius-sm);
  font-size:12.5px;font-weight:600;
  background:var(--ink);color:#fff;border:none;cursor:pointer;
  transition:background var(--t-fast);
}
.btn-print:hover{background:#334155}
.btn-print svg{flex-shrink:0}

/* Empty timeline state */
.timeline-empty{
  padding:48px 24px;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
}
.timeline-empty__title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}
.timeline-empty__body{font-size:13px;color:var(--muted)}

/* ---------- Print styles for Audit Report ---------- */
@media print{
  body *{visibility:hidden}
  .print-audit-section,
  .print-audit-section *{visibility:visible}
  .print-audit-section{
    position:fixed;top:0;left:0;width:100%;
  }
  .timeline-export-bar,
  .timeline-filters,
  .btn-print,
  .site-nav,
  .site-nav-spacer{display:none!important}
  .timeline-event:hover{background:none;margin:0;padding-left:0;padding-right:0}
  .timeline-month__header::after{background:#ccc}
  @page{margin:20mm}
}

/* ---------- Obligations page — enhanced ---------- */
.obligations-summary-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 24px;margin-bottom:24px;
  box-shadow:var(--shadow-sm);
  display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;
}
.obl-deadline-item{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 16px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--bg-muted);min-width:140px;
}
.obl-deadline-item--overdue{background:var(--red-50);border-color:var(--red-200)}
.obl-deadline-item--soon{background:var(--amber-50);border-color:var(--amber-200)}
.obl-deadline-item__type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.obl-deadline-item__date{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.obl-deadline-item__days{font-size:11.5px;font-weight:600}
.obl-deadline-item--overdue .obl-deadline-item__days{color:var(--red-700)}
.obl-deadline-item--soon .obl-deadline-item__days{color:var(--amber-700)}
.obl-deadline-item__days--ok{color:var(--green-700)}

/* ---------- Micro-animations ---------- */
@keyframes pp-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.mc-table-wrap{animation:pp-fade-in 160ms var(--ease) both}
.stats-strip .stat-tile{animation:pp-fade-in 160ms var(--ease) both}
.stats-strip .stat-tile:nth-child(2){animation-delay:30ms}
.stats-strip .stat-tile:nth-child(3){animation-delay:60ms}
.stats-strip .stat-tile:nth-child(4){animation-delay:90ms}
.stats-strip .stat-tile:nth-child(5){animation-delay:120ms}

/* Hover row glow on overdue */
.client-row--overdue:hover .mc-name a{color:var(--red-700)}
.client-row--overdue{transition:background .12s ease,box-shadow .12s ease}
.client-row--overdue:hover{box-shadow:inset 3px 0 0 var(--red)}

/* Subtle row enter animation — stagger handled by JS adding .is-visible class */
.client-row{opacity:1} /* rows are visible by default; JS can add staggered entrance */

/* ---------- Responsive: timeline ---------- */
@media(max-width:640px){
  .timeline-page{padding:32px 16px}
  .timeline-event:hover{margin:0;padding-left:0;padding-right:0}
  .timeline-export-bar{flex-direction:column;align-items:flex-start}
}

/* ---------- Risk banner — calm urgency (Stripe "calm technology" principle) ---------- */
.risk-banner{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 18px;
  background:#fff;
  border:1px solid var(--red-100);
  border-left:4px solid var(--red);
  border-radius:var(--radius-lg);
  color:var(--ink);
  box-shadow:var(--shadow-sm);
  margin-bottom:0;
  animation:pp-fade-in 200ms var(--ease) both;
}
.risk-banner__icon{
  flex-shrink:0;color:var(--red);margin-top:1px;
}
.risk-banner__body{flex:1;min-width:0}
.risk-banner__headline{
  font-size:14px;font-weight:700;line-height:1.35;color:var(--red-700);
}
.risk-banner__sub{
  font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.4;
}
.risk-banner__cta{
  flex-shrink:0;align-self:center;
  padding:7px 14px;
  background:var(--red-50);
  border:1px solid var(--red-100);
  border-radius:var(--radius-sm);
  color:var(--red-700);font-size:12.5px;font-weight:700;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast);
  white-space:nowrap;
}
.risk-banner__cta:hover{background:var(--red-100);border-color:var(--red-200)}
.risk-banner__mailto{font-size:11px;color:var(--muted);text-decoration:none;text-align:right;white-space:nowrap}
.risk-banner__mailto:hover{color:var(--ink);text-decoration:underline}

/* ---------- Forecast horizon strip ---------- */
.forecast-strip{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:8px 14px;
  background:var(--line-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:12.5px;color:var(--ink-soft);
}
.forecast-strip__item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.forecast-strip__item strong{color:var(--ink);font-weight:700}
.forecast-strip__item--urgent strong{color:var(--amber-700)}
.forecast-strip__item--urgent::before{content:"⏰";font-size:12px}

/* ---------- Count-up animation for stat tile values ---------- */
.stat-tile__value[data-countup]{
  display:inline-block;
  transition:transform 0.15s var(--ease);
}

/* ---------- Enhanced timeline event hover ---------- */
.timeline-event{
  border-radius:var(--radius-sm);
  padding-left:8px;padding-right:8px;margin-left:-8px;margin-right:-8px;
}

/* ---------- Larger, more visible penalty figures ---------- */
.mc-risk{font-size:13px;font-weight:800}
.mc-risk--overdue{
  color:#fff;
  background:var(--red-700);
  padding:2px 7px;border-radius:4px;
  font-size:12px;
}
.mc-risk--soon{
  color:var(--amber-700);
  font-size:12px;font-weight:700;
}

/* ---------- Chase button pop animation ---------- */
@keyframes pp-chase-pop{0%{transform:scale(1)}50%{transform:scale(.94)}100%{transform:scale(1)}}
.mc-btn-chase:active{animation:pp-chase-pop 100ms ease}

/* ---------- High Risk inline badge (≤7 days — renders in HTML for a11y) ---------- */
.high-risk-badge{
  display:inline-flex;align-items:center;
  margin-left:7px;padding:1px 6px;border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--amber-100);color:var(--amber-700);
  vertical-align:middle;
}

/* ---------- Responsive risk banner ---------- */
@media(max-width:600px){
  .risk-banner{flex-direction:column;gap:10px}
  .risk-banner__cta{align-self:flex-start}
}

/* ---------- Compliance health tier badges ---------- */
.compliance-tier{
  display:inline-flex;align-items:center;
  padding:2px 6px;border-radius:3px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  margin-right:4px;vertical-align:middle;
}
.compliance-tier--chronic{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.compliance-tier--risk{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}

/* ---------- MC table group headers ---------- */
.mc-group-header td,.mc-group-header__cell{
  padding:6px 14px 4px;
  background:var(--line-soft);
  border-bottom:1px solid var(--line);
}
.mc-group-header__label{
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);
}
.mc-group-header__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;
  padding:0 5px;
  margin-left:6px;
  border-radius:999px;
  font-size:10px;font-weight:700;
  background:var(--line);color:var(--ink-soft);
}
.mc-group-header--overdue .mc-group-header__label{color:var(--red-700)}
.mc-group-header--overdue .mc-group-header__count{background:var(--red-100);color:var(--red-700)}
.mc-group-header--soon .mc-group-header__label{color:var(--amber-700)}
.mc-group-header--soon .mc-group-header__count{background:var(--amber-100);color:var(--amber-700)}
.mc-group-header--ok .mc-group-header__label{color:var(--green-700)}
.mc-group-header--ok .mc-group-header__count{background:var(--green-100);color:var(--green-700)}

/* ---------- High-risk row accent (≤7 days) — badge rendered in HTML for a11y ---------- */

/* Stat tile transition — interactive tiles get cursor+hover via [data-urgency-filter] rule */
.stat-tile{transition:transform 120ms var(--ease),box-shadow 120ms var(--ease)}
/* Pressed state for blue (Monitored) tile */
.stat-tile--savings[data-urgency-filter][aria-pressed="true"]{box-shadow:0 0 0 2px var(--blue)}

/* ---------- Timeline event SVG icon sizing ---------- */
.timeline-icon svg{width:16px;height:16px;display:block}

/* ---------- Premium row enter animation ---------- */
@keyframes pp-row-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.client-row{animation:pp-row-in 180ms var(--ease) both}
.client-row:nth-child(1){animation-delay:0ms}
.client-row:nth-child(2){animation-delay:20ms}
.client-row:nth-child(3){animation-delay:40ms}
.client-row:nth-child(4){animation-delay:60ms}
.client-row:nth-child(5){animation-delay:80ms}
.client-row:nth-child(6){animation-delay:100ms}
@media(prefers-reduced-motion:reduce){
  .client-row{animation:none}
  .stat-tile{transition:none}
}

/* ==========================================================================
   DASHBOARD REDESIGN — manage_page_design_improve branch
   Two-column command center layout for /manage step == "manage"
   ========================================================================== */

/* ---------- Dashboard header (title + Add button) ---------- */
.db-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:20px;
}
.db-header__title{min-width:0;flex:1}
.db-header__actions{
  display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;
}
.db-add-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;font-size:14px;font-weight:700;
  background:var(--blue);color:#fff;border-radius:var(--radius);
  border:2px solid var(--blue);
  box-shadow:var(--shadow-blue);
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
  white-space:nowrap;
}
.db-add-btn:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(27,58,138,.4),0 2px 6px rgba(27,58,138,.2)}
.db-add-btn:active{transform:none;box-shadow:var(--shadow-blue)}
.db-export-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;font-size:13px;font-weight:600;
  border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);
  border-radius:var(--radius);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
  white-space:nowrap;
}
.db-export-btn:hover{border-color:var(--blue);color:var(--blue)}
.db-export-btn--locked{border-style:dashed}

/* ---------- Stats strip — extended for savings tile ---------- */
.stat-tile--savings-value{
  border-top-color:var(--green);
}
.stat-tile--savings-value .stat-tile__value{
  color:var(--green-700);font-size:18px;letter-spacing:-.02em;
}
a.stat-tile--savings-value{cursor:pointer}
a.stat-tile--savings-value:hover{border-top-color:var(--green-700);box-shadow:var(--shadow-md)}

/* ---------- Two-column command grid ---------- */
.cmd-grid{
  display:grid;
  grid-template-columns:1fr 304px;
  gap:24px;
  align-items:start;
  margin-bottom:32px;
}
@media(max-width:1023px){
  .cmd-grid{grid-template-columns:1fr}
}

/* ---------- Monitoring coverage panel (sidebar) ---------- */
.cov-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  position:sticky;
  top:72px; /* below nav */
}
@media(max-width:1023px){
  .cov-panel{position:static}
}
.cov-panel__hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-muted);
}
.cov-panel__title{
  font-size:13px;font-weight:700;letter-spacing:.01em;
  color:var(--ink);text-transform:uppercase;
}
.cov-panel__badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:var(--radius-pill);
  background:var(--green-100);color:var(--green-700);
  font-size:11px;font-weight:700;letter-spacing:.02em;
}

.cov-section{border-bottom:1px solid var(--line-soft)}
.cov-section:last-child{border-bottom:none}
.cov-section__label{
  padding:10px 16px 6px;
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);
}

.cov-item{
  display:flex;align-items:center;
  padding:8px 16px;
  gap:10px;
  transition:background var(--t-fast) var(--ease);
}
.cov-item:hover{background:var(--line-soft)}
.cov-item--on{/* active feature rows */}
.cov-item__icon{
  flex-shrink:0;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  background:var(--green-50);
}
.cov-item__icon--always{background:var(--green-50)}
.cov-item__icon--off{background:var(--line-soft)}
.cov-item__icon--locked{background:var(--bg-muted)}
.cov-item__body{flex:1;min-width:0}
.cov-item__name{
  font-size:12.5px;font-weight:600;color:var(--ink);
  display:block;line-height:1.3;
}
.cov-item__sub{
  font-size:11px;color:var(--muted);display:block;margin-top:1px;line-height:1.3;
}
.cov-item__action{flex-shrink:0}

/* Urgency chips — focus ring */
.urgency-chip:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;
}
/* Stat tiles — focus ring */
.stat-tile:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;
}

/* Coverage toggle button */
.cov-toggle{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:700;letter-spacing:.02em;
  border:1.5px solid var(--line);background:var(--bg-muted);
  color:var(--muted);cursor:pointer;
  transition:all var(--t-fast) var(--ease);
  white-space:nowrap;
}
.cov-toggle:before{
  content:'';display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--muted-soft);
  transition:background var(--t-fast) var(--ease);
}
.cov-toggle--on{
  background:var(--green-50);border-color:var(--green-200);color:var(--green-700);
}
.cov-toggle--on:before{background:var(--green)}
.cov-toggle:hover{border-color:var(--muted-soft);color:var(--ink-soft)}
.cov-toggle--on:hover{background:var(--red-50);border-color:var(--red-200);color:var(--red-700)}
.cov-toggle--on:hover:before{background:var(--red)}
.cov-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Coverage lock badge */
.cov-lock{
  display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:var(--radius-pill);
  font-size:10px;font-weight:700;letter-spacing:.04em;
  background:#eef2ff;color:#4f46e5;
  border:1px solid #c7d2fe;
  white-space:nowrap;
}

/* Coverage always-active tick */
.cov-tick{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--green-100);color:var(--green-700);
  font-size:12px;font-weight:800;flex-shrink:0;
}

/* Upgrade card inside coverage panel */
.cov-upgrade{
  padding:14px 16px;
  background:linear-gradient(135deg,#f0f7ff 0%,#f5f3ff 100%);
  border-top:1px solid var(--line-soft);
}
.cov-upgrade__title{
  font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px;
}
.cov-upgrade__benefits{
  list-style:none;margin:0 0 12px;padding:0;
}
.cov-upgrade__benefits li{
  font-size:12px;color:var(--ink-soft);padding:2px 0;
  display:flex;align-items:baseline;gap:6px;
}
.cov-upgrade__benefits li:before{
  content:'→';font-size:10px;color:var(--blue);font-weight:700;flex-shrink:0;
}
.cov-upgrade__cta{
  display:block;width:100%;text-align:center;
  padding:8px 14px;border-radius:var(--radius);
  background:var(--blue);color:#fff;font-size:12.5px;font-weight:700;
  border:none;cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.cov-upgrade__cta:hover{background:var(--blue-700)}
.cov-upgrade__or{
  display:block;text-align:center;font-size:11px;color:var(--muted);margin-top:8px;
}

/* Account tools section in sidebar */
.cov-acct{border-top:1px solid var(--line-soft)}
.cov-acct__item{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;color:var(--ink-soft);font-size:12.5px;
  border-bottom:1px solid var(--line-soft);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.cov-acct__item:last-child{border-bottom:none}
.cov-acct__item:hover{color:var(--blue);background:var(--blue-50)}
.cov-acct__item svg{flex-shrink:0;opacity:.6}
.cov-acct__item:hover svg{opacity:1}

/* ---------- Coverage feature: pre-toggle context, semantics, next-step ---------- */
.cov-section__hint{
  padding:0 16px 8px;margin:0;
  font-size:11px;color:var(--muted);line-height:1.45;
}
.cov-feature{border-bottom:1px solid transparent}
.cov-feature + .cov-feature{border-top:1px solid var(--line-soft)}

/* Persistent semantics label — always visible so the user knows a toggle acts
   on every client BEFORE clicking. Not hover-dependent. */
.cov-sem{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:3px;font-size:10.5px;font-weight:600;letter-spacing:.01em;
  color:var(--muted-soft-text);
}
.cov-sem:before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--muted-soft);flex-shrink:0;
}

/* Touchable info affordance (i). Sized for fingers, not a hover tooltip. */
.cov-info-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-left:6px;padding:0;vertical-align:middle;
  border-radius:50%;border:1.5px solid var(--muted-soft);
  background:#fff;color:var(--muted);
  font-size:10px;font-weight:800;font-style:italic;font-family:Georgia,'Times New Roman',serif;
  line-height:1;cursor:pointer;flex-shrink:0;
  transition:all var(--t-fast) var(--ease);
}
.cov-info-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-50)}
.cov-info-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cov-info-btn[aria-expanded="true"]{background:var(--blue);border-color:var(--blue);color:#fff}

/* The expanding context panel: Tracks / Alerts / Setup / Plan */
.cov-info{
  margin:0 16px 10px;padding:10px 12px;
  background:var(--bg-muted);border:1px solid var(--line-soft);
  border-radius:var(--radius);
}
.cov-info__list{margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.cov-info__row{display:grid;grid-template-columns:54px 1fr;gap:8px;align-items:baseline}
.cov-info__row dt{
  margin:0;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);
}
.cov-info__row dd{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink-soft)}

/* Inline next-step beneath a toggled-on feature. The whole point: no dead end. */
.cov-next{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  margin:0 16px 10px;padding:9px 12px;
  border-radius:var(--radius);
  font-size:11.5px;line-height:1.45;
  background:var(--green-50);border:1px solid var(--green-100);
}
.cov-next[data-state="warn"]{background:var(--amber-50);border-color:var(--amber-200)}
.cov-next__ok{color:var(--green-700);font-weight:600}
.cov-next__ok:before{content:'✓ ';font-weight:800}
.cov-next__warn{color:var(--amber-700);font-weight:600;flex:1;min-width:140px}
.cov-next__cta{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--amber-700);color:#fff;border:none;cursor:pointer;
  font-size:11.5px;font-weight:700;white-space:nowrap;
  transition:filter var(--t-fast) var(--ease);
}
.cov-next__cta:hover{filter:brightness(1.08)}
.cov-next__cta:focus-visible{outline:2px solid var(--amber-700);outline-offset:2px}
.cov-next__link{
  color:var(--green-700);font-weight:700;text-decoration:underline;white-space:nowrap;cursor:pointer;
}
.cov-next__link:hover{color:var(--ink)}

/* Add-on "Set up →" action — visually distinct from the on/off toggle pill so
   the same control never means two different things. */
.cov-action{
  display:inline-flex;align-items:center;gap:3px;
  padding:4px 10px;border-radius:var(--radius);
  font-size:11px;font-weight:700;letter-spacing:.01em;
  color:var(--blue);background:var(--blue-50);border:1px solid var(--blue-100);
  white-space:nowrap;cursor:pointer;
  transition:all var(--t-fast) var(--ease);
}
.cov-action:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.cov-action:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cov-action--ready{color:var(--green-700);background:var(--green-50);border-color:var(--green-200)}
.cov-action--ready:hover{background:var(--green-700);color:#fff;border-color:var(--green-700)}

/* ---------- Bulk-apply pay-day wizard ---------- */
.bulk-modal{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.bulk-modal[hidden]{display:none}
.bulk-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.bulk-modal__panel{
  position:relative;z-index:1;
  width:100%;max-width:440px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  animation:bulk-modal-in 200ms var(--ease);
}
@keyframes bulk-modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bulk-modal__panel{animation:none}}
.bulk-modal__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 20px 0;
}
.bulk-modal__title{font-size:17px;font-weight:700;color:var(--ink);margin:0;line-height:1.3}
.bulk-modal__body{padding:8px 20px 20px}
.bulk-modal__lead{font-size:13px;color:var(--ink-soft);line-height:1.6;margin:0 0 16px}
.bulk-modal__field{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;margin-bottom:8px}
.bulk-modal__field input[type=number]{
  flex:1;min-width:120px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:14px;color:var(--ink);
}
.bulk-modal__field input[type=number]:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.bulk-modal__field .btn{white-space:nowrap}
.bulk-modal__hint{font-size:11.5px;color:var(--muted);line-height:1.5;margin:0}
.bulk-modal__error{font-size:12px;color:var(--red);margin:8px 0 0;font-weight:600}

/* Deep-link flash: when the dashboard "to set up" badge lands on a settings
   section, briefly highlight it so the user sees where they were taken. */
@keyframes section-flash{0%{background:var(--amber-50)}100%{background:transparent}}
.section-flash{animation:section-flash 2s var(--ease)}
@media(prefers-reduced-motion:reduce){.section-flash{animation:none}}

/* ---------- Mobile parity (≤640px) for the new coverage patterns ---------- */
@media(max-width:640px){
  .cov-info-btn{width:24px;height:24px;font-size:12px}
  .cov-next{padding:11px 12px}
  .cov-next__cta{padding:9px 14px;width:100%;justify-content:center}
  .cov-action{padding:8px 12px}
  .bulk-modal{padding:0;align-items:flex-end}
  .bulk-modal__panel{max-width:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:88vh}
  .bulk-modal__field input[type=number]{min-width:0}
  .bulk-modal__field .btn{width:100%}
}

/* ---------- Mobile table → cards transformation ---------- */
@media(max-width:768px){
  .db-header{flex-direction:column;gap:8px}
  .db-header__actions{justify-content:flex-start;width:100%}
  .mc-table-wrap{
    border-radius:0;margin-left:-16px;margin-right:-16px;
    border-left:none;border-right:none;overflow-x:visible;
  }
  .mc-table{border:none;min-width:0}
  .mc-table thead{display:none}
  .mc-table tbody{display:flex;flex-direction:column;gap:8px;padding:0 16px}
  .mc-table tbody tr.client-row{
    display:block;
    border-radius:var(--radius);
    border:1px solid var(--line);
    padding:12px 14px;
    border-left:3px solid var(--line);
    animation:pp-row-in 180ms var(--ease) both;
  }
  .mc-table tbody tr.client-row--ok{border-left-color:var(--green)}
  .mc-table tbody tr.client-row--soon{border-left-color:var(--amber)}
  .mc-table tbody tr.client-row--overdue{border-left-color:var(--red)}
  .mc-table tbody tr.client-row--critical{border-left-color:var(--amber)}
  .mc-table td{display:block;padding:0;border:none;text-align:left!important}
  .mc-td-status{display:none!important}
  .mc-td-name{padding-bottom:8px;overflow:hidden}
  .mc-td-name .mc-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px;overflow:hidden}
  .mc-td-name .mc-name a{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mc-td-name .mc-cn{flex:0 0 100%;margin-top:1px}
  .mc-td-days{display:inline-block!important;vertical-align:middle}
  .mc-td-date{display:inline-block!important;vertical-align:middle;margin-left:6px;color:var(--muted);font-size:13px}
  .mc-td-type{display:inline-block!important;vertical-align:middle;margin-left:4px}
  /* No column header on mobile and tooltips don't fire on touch — spell the
     filing type out in full instead of the bare CS/AA code. */
  .mc-type-chip__abbr{display:none}
  .mc-type-chip__full{display:inline}
  .mc-td-type .mc-type-chip{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;padding:2px 8px;white-space:nowrap}
  .mc-legend{display:none}
  .mc-td-risk{display:block!important;padding-top:3px;text-align:left!important}
  .mc-td-secondary{display:none!important}
  .mc-td-actions{
    padding-top:10px;margin-top:8px;
    border-top:1px solid var(--line-soft);
    text-align:left!important;
  }
  /* Roomier, touch-friendly action row; destructive "Remove" pushed to the
     far edge so it reads as separate from the primary actions. */
  .mc-actions{justify-content:flex-start;flex-wrap:wrap;gap:8px;align-items:center}
  .mc-btn-details,.mc-btn-chase{padding:7px 14px;font-size:13px}
  .mc-td-actions .client-row__edit{padding:7px 12px;border-color:var(--line)}
  .mc-td-actions .btn-quiet-danger{padding:7px 12px}
  .mc-actions .remove-form{margin-left:auto}
  /* Toolbar: stack controls below chips on mobile so search fills full width */
  .mc-toolbar{flex-direction:column;align-items:stretch}
  .mc-toolbar__controls{flex-direction:column;align-items:stretch;flex-shrink:1;width:100%}
  .mc-toolbar__controls>*{width:100%}
  .mc-toolbar__controls .form-input{flex:1;min-width:0}
  /* Chips scroll horizontally rather than wrap — cleaner on narrow screens */
  .mc-toolbar__filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}
  .mc-toolbar__filters::-webkit-scrollbar{display:none}
}

/* ---------- Sidebar mobile collapse ---------- */
@media(max-width:1023px){
  .cov-panel-toggle{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:12px 16px;
    background:#fff;border:1px solid var(--line);
    border-radius:var(--radius-lg);
    font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
    margin-bottom:8px;
  }
  .cov-panel-toggle__arrow{transition:transform 200ms var(--ease)}
  .cov-panel-toggle[aria-expanded="true"] .cov-panel-toggle__arrow{transform:rotate(180deg)}
  html.js-enabled .cov-panel{display:none}
  html.js-enabled .cov-panel.is-open{display:block}
}
@media(min-width:1024px){
  .cov-panel-toggle{display:none}
  .cov-panel{display:block}
}

/* ---------- Empty state redesign ---------- */
.db-empty{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:56px 32px;
}
.db-empty__icon{
  width:64px;height:64px;border-radius:16px;
  background:linear-gradient(135deg,var(--blue) 0%,#4f46e5 100%);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;box-shadow:0 8px 24px -4px rgba(27,58,138,.35);
}
.db-empty__title{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:8px}
.db-empty__body{font-size:14px;color:var(--muted);max-width:360px;line-height:1.6;margin-bottom:24px}
.db-empty__actions{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
.db-empty__primary{max-width:280px;width:100%}
.db-empty__secondary{font-size:13px;color:var(--blue);font-weight:600;cursor:pointer}
.db-empty__secondary:hover{text-decoration:underline}

/* ---------- Risk banner responsive ---------- */
@media(max-width:600px){
  .risk-banner{flex-wrap:wrap}
  .risk-banner__cta,.risk-banner__mailto{font-size:12px}
}

/* ---------- Forecast strip responsive ---------- */
@media(max-width:600px){
  .forecast-strip{flex-wrap:wrap;gap:6px}
}

/* ---------- Usage bar on small screens ---------- */
@media(max-width:600px){
  .usage-bar__row{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---------- Add Clients section (below grid) ---------- */
.add-clients-section{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px;margin-bottom:24px;
  box-shadow:var(--shadow-sm);
}
.add-clients-section__hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.add-clients-section__title{
  font-size:16px;font-weight:700;color:var(--ink);
}

/* ---------- All-on-track celebratory banner ---------- */
.on-track-banner{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 16px;
  background:var(--green-50);border:1px solid var(--green-200);
  border-radius:var(--radius);color:var(--green-700);
  font-size:13px;line-height:1.5;
  animation:pp-fade-in 200ms var(--ease) both;
}
.on-track-banner svg{flex-shrink:0;margin-top:1px}

/* ---------- Second email / referral cards ---------- */
.db-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow-sm);
}
.db-card__hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;cursor:pointer;
  border-bottom:1px solid transparent;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
  list-style:none;
}
.db-card__hd:hover{background:var(--bg-muted)}
.db-card[open] .db-card__hd{border-bottom-color:var(--line-soft);background:var(--bg-muted)}
.db-card__label{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.db-card__arrow{color:var(--muted);font-size:12px;transition:transform 200ms var(--ease)}
details[open] .db-card__arrow{transform:rotate(180deg)}
.db-card__body{padding:18px}


/* ========== Design Increment 1: Dashboard Above-the-Fold Redesign (2026-05-28) ========== */

/* Forecast strip — clean text strip, no emoji, no box */
.forecast-strip{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:4px 0;
  background:transparent;
  border:none;
  font-size:12.5px;color:var(--ink-soft);
}
.forecast-strip__item::before{content:none}
.forecast-strip__sep{color:var(--muted);margin:0 2px}

/* Next-7-days urgency panel — proper CSS classes (replaces inline styles) */
.urgency-panel{
  background:#fff;
  border:1px solid var(--amber-100);
  border-left:4px solid var(--amber);
  border-radius:var(--radius);
  padding:12px 16px;
  margin-bottom:12px;
}
.urgency-panel__title{
  margin:0 0 10px;
  font-size:11px;font-weight:700;color:var(--amber-700);
  text-transform:uppercase;letter-spacing:.06em;
}
.urgency-panel__items{
  display:flex;flex-wrap:wrap;gap:8px;
}
.urgency-chip-item{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-muted);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:5px 10px;
  text-decoration:none;
  font-size:13px;color:var(--ink);
  transition:background var(--t-fast),border-color var(--t-fast);
}
.urgency-chip-item:hover{background:var(--amber-50);border-color:var(--amber-200)}
.urgency-chip-item__name{font-weight:600}
.urgency-chip-item__type{color:var(--amber-700);font-size:12px;font-weight:600}
.urgency-chip-item__days{
  background:var(--amber-50);color:var(--amber-700);
  border-radius:4px;padding:1px 7px;
  font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.urgency-chip-item__days--today{background:var(--red-50);color:var(--red-700)}

/* Deadline heatmap — proper CSS classes (replaces inline styles) */
.deadline-heatmap{margin-bottom:16px}
.deadline-heatmap__heading{
  margin:0 0 8px;
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;
}
.deadline-heatmap__bars{
  display:flex;gap:4px;align-items:flex-end;height:52px;
}
.deadline-heatmap__col{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
}
.deadline-heatmap__bar{
  width:100%;border-radius:2px 2px 0 0;
  background:var(--blue);
  transition:height .2s var(--ease);
}
.deadline-heatmap__bar--empty{background:var(--line)}
.deadline-heatmap__bar-label{
  font-size:10px;color:var(--muted-soft);white-space:nowrap;
}

/* Phase duplicate stat-tile--risk/risk-zero — ensure left border coherence */
.stat-tile--risk{border-left-color:var(--red);border-top:none;background:var(--red-50)}
.stat-tile--risk .stat-tile__value{color:var(--red-700);font-size:22px;letter-spacing:-.01em}
.stat-tile--risk .stat-tile__sub{font-size:10px;color:var(--muted);display:block;margin-top:1px}
.stat-tile--risk-zero{border-left-color:var(--green);border-top:none;background:rgba(5,150,105,.02)}
.stat-tile--risk-zero .stat-tile__value{color:var(--green-700)}

/* Savings tile — left border coherence */
.stat-tile--savings-value{border-left-color:var(--green);border-top:none;background:rgba(5,150,105,.02)}
a.stat-tile--savings-value{cursor:pointer;text-decoration:none}
a.stat-tile--savings-value:hover{border-left-color:var(--green-700);box-shadow:var(--shadow-md)}

/* ── Data freshness badge (increment 2) ─────────────────────────────────── */
.data-freshness{
  display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
  padding:4px 10px;
  background:var(--bg-muted);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  font-size:11.5px;line-height:1;
  color:var(--muted);
  margin-bottom:14px;
}
.data-freshness svg{color:var(--muted-soft);flex-shrink:0;margin-right:1px}
.data-freshness__source{font-weight:600;color:var(--ink-soft)}
.data-freshness__sep{color:var(--muted-soft)}
.data-freshness__label{color:var(--muted)}
.data-freshness__abs{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}
.data-freshness__rel{color:var(--muted)}

/* ── Increment 3: Table RAG encoding + empty state + penalty ─────────────── */

/* badge-overdue: solid red fill (overdue = unmistakable, not a soft callout) */
.badge-overdue{
  background:var(--red);
  border:none;
  color:#fff;
  font-weight:800;
}

/* mc-days--soon: plain amber number, no pill — reduce noise on non-critical */
.mc-days--soon{
  background:none;
  border:none;
  color:var(--amber-700);
  min-width:auto;
  padding:0;
  font-size:13px;
  font-weight:700;
}

/* mc-days--ok: plain green number, larger — it's the majority state, must scan fast */
.mc-days--ok{
  background:none;
  border:none;
  color:var(--green-700);
  min-width:auto;
  padding:0;
  font-size:14px;
  font-weight:800;
}

/* Empty state: remove gradient from icon (anti-pattern in dashboard) */
.db-empty__icon{
  background:var(--blue);
  box-shadow:0 4px 12px -2px rgba(27,58,138,.22);
}

/* Penalty overdue: slightly larger, tnum */
.mc-risk--overdue{
  font-size:13px;
  font-variant-numeric:tabular-nums;
}

/* ── Increment 4: Obligation breadth strip ───────────────────────────────── */

/* Strip container: data provenance cluster, reads with freshness badge */
.obl-strip{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  margin-bottom:14px;
  font-size:11px;
}

.obl-strip__label{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-right:4px;
  white-space:nowrap;
}

.obl-chip{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:4px;
  font-size:10.5px;
  font-weight:600;
  white-space:nowrap;
  letter-spacing:.01em;
  text-decoration:none;
}

/* Active: green trust signal */
.obl-chip--on{
  background:var(--green-50,#f0fdf4);
  border:1px solid var(--green-100,#dcfce7);
  color:var(--green-700,#15803d);
}

/* Inactive: muted — system capable but not yet configured */
.obl-chip--off{
  background:var(--bg-muted,#f8fafc);
  border:1px solid var(--line,#e2e8f0);
  color:var(--muted-soft,#94a3b8);
}

/* ── Increment 6: Per-row obligation mini-chips ──────────────────────────── */

/* Container inside .mc-name — secondary tier, never competes with urgency signals */
.row-obl-strip{
  display:flex;
  align-items:center;
  gap:3px;
  flex-wrap:wrap;
  margin-top:4px;
}

/* Each chip: very subtle green, 7.5px — present if you look, invisible if scanning */
.row-obl-chip{
  display:inline-flex;
  align-items:center;
  padding:1px 5px;
  border-radius:3px;
  font-size:7.5px;
  font-weight:700;
  white-space:nowrap;
  letter-spacing:.02em;
  background:var(--green-50,#f0fdf4);
  border:1px solid var(--green-100,#dcfce7);
  color:var(--green-700,#15803d);
  line-height:1.4;
}

/* ── Increment 7: Coverage panel progress header ─────────────────────────── */

.cov-progress{
  background:#fff;
  border:1px solid var(--line,#e2e8f0);
  border-radius:6px;
  padding:10px 12px;
  margin:0 0 12px;
}

.cov-progress__label{
  font-size:12px;
  color:var(--ink-soft,#475569);
  margin-bottom:6px;
}

.cov-progress__label strong{
  color:var(--ink,#0f172a);
  font-weight:700;
}

.cov-progress__bar{
  height:4px;
  background:var(--green-100,#dcfce7);
  border-radius:2px;
  overflow:hidden;
}

.cov-progress__fill{
  height:100%;
  background:var(--green-600,#16a34a);
  border-radius:2px;
  transition:width .3s ease;
}

.cov-progress__nudge{
  font-size:11px;
  color:var(--muted,#94a3b8);
  margin:6px 0 0;
}

/* ── Increment 8: Callout component — white card + left border ───────────── */
/* Override colored-bg variants — background stays white, only border + title/icon carry urgency */

.callout--info{background:#fff;color:var(--ink-soft)}
.callout--info .callout__icon{color:var(--blue)}
.callout--info .callout__title{color:var(--blue)}

.callout--success{background:#fff;color:var(--ink-soft)}
.callout--success .callout__icon{color:var(--green-700,#15803d)}
.callout--success .callout__title{color:var(--green-700,#15803d)}

.callout--warn{background:#fff;color:var(--ink-soft)}
.callout--warn .callout__icon{color:var(--amber-700,#b45309)}
.callout--warn .callout__title{color:var(--amber-700,#b45309)}

.callout--danger{background:#fff;color:var(--ink-soft)}
.callout--danger .callout__icon{color:var(--red,#dc2626)}
.callout--danger .callout__title{color:var(--red,#dc2626)}

/* ── Increment 9: Secondary deadline cell ────────────────────────────────── */

/* Row container: flex, compact, vertically centered */
.mc-sec-row{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;
}

/* Filing type abbreviation: matches mc-type-chip visual register */
.mc-sec-chip{
  display:inline-flex;
  align-items:center;
  padding:1px 5px;
  border-radius:3px;
  font-size:10px;
  font-weight:700;
  background:var(--bg-muted,#f8fafc);
  border:1px solid var(--line,#e2e8f0);
  color:var(--ink-soft,#475569);
  letter-spacing:.03em;
}

.mc-sec-date{
  color:var(--ink-soft,#475569);
  font-variant-numeric:tabular-nums;
}

.mc-sec-days{
  color:var(--muted,#94a3b8);
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ── Increment 12: Dark app nav — cohesive top-to-table visual hierarchy ─── */

.site-nav--app{
  background:#1e293b;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:none;
}

/* Brand text: white */
.site-nav--app .site-nav-brand{color:#fff}
.site-nav--app .site-nav-brand:hover{color:rgba(255,255,255,.8)}

/* Nav links: muted white inactive, white active */
.site-nav--app .site-nav-links a{color:rgba(255,255,255,.65)}
.site-nav--app .site-nav-links a:hover{color:#fff;background:rgba(255,255,255,.07)}

/* Pill badge (plan tier etc): inverted on dark bg */
.site-nav--app .site-nav-pill{
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.8);
}

/* Hamburger icon on mobile: white strokes */
.site-nav--app .site-nav-toggle{color:#fff}
.site-nav--app .site-nav-toggle:hover{background:rgba(255,255,255,.08)}

/* Dropdown / account button: white text */
.site-nav--app .nav-account-btn{color:rgba(255,255,255,.85)}
.site-nav--app .nav-account-btn:hover{color:#fff;background:rgba(255,255,255,.08)}

/* Mobile dropdown panel: dark background to match nav */
@media (max-width:640px){
  .site-nav--app .site-nav-links{
    background:#1e293b;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
}

.mc-sec-days--soon{color:var(--amber-700,#b45309);font-weight:600}
.mc-sec-days--overdue{color:var(--red,#dc2626);font-weight:800}

.mc-sec-empty{
  color:var(--muted-soft,#cbd5e1);
  font-size:12px;
}

/* ── Increment 13: Coverage panel section sub-labels ─────────────────────── */

.cov-section__sublabel{
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--muted,#94a3b8);
  padding:4px 0;
  margin-top:16px;
  border-top:1px solid var(--border,#e2e8f0);
}

.cov-section__sublabel--first{
  margin-top:4px;
  border-top:none;
}

/* ── Increment 14: On-track banner next-filing detail ────────────────────── */

.ontrack-next__name{
  color:var(--ink,#0f172a);
  font-weight:500;
}

/* ── Increment 16: Risk column — "soon" penalty pill treatment ───────────── */

.mc-risk--soon{
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:var(--amber-700,#b45309);
  background:var(--amber-50,#fffbeb);
  border:1px solid var(--amber-200,#fde68a);
  border-radius:4px;
  padding:2px 6px;
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* ── Increment 17: Alphabetical group headers (name-sort only) ───────────── */

.mc-alpha-row{pointer-events:none;user-select:none}
.mc-alpha-cell{
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted,#94a3b8);
  padding:8px 12px 3px;
  background:transparent;
  border-bottom:1px solid var(--border,#e2e8f0);
}

/* ── Increment 18: Portfolio health score ────────────────────────────────── */

.portfolio-health{display:flex;align-items:baseline;gap:6px}
.portfolio-health__score{
  font-size:22px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--green-700,#15803d);
}
.portfolio-health__score--ok{color:var(--amber-700,#b45309)}
.portfolio-health__score--low{color:var(--red-700,#b91c1c)}
.portfolio-health__label{font-size:12px;color:var(--muted,#94a3b8);font-weight:500}

/* ── Increment 19: Overdue penalty breakdown tooltip ─────────────────────── */

.mc-risk--overdue[data-tooltip]{position:relative;cursor:help}
.mc-risk--overdue[data-tooltip]:hover::after,
.mc-risk--overdue[data-tooltip]:focus::after,
.mc-risk--overdue[data-tooltip]:focus-within::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:130%;left:50%;
  transform:translateX(-50%);
  background:#1e293b;
  color:#f8fafc;
  font-size:11px;
  font-weight:500;
  white-space:nowrap;
  padding:5px 9px;
  border-radius:5px;
  pointer-events:none;
  z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* ── Increment 21: Due-today pulsing badge ──────────────────────────────── */
@keyframes mc-today-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.mc-today-badge{
  display:inline-flex;align-items:center;
  background:var(--amber-50);border:1.5px solid var(--amber);
  color:var(--amber-700);font-size:10px;font-weight:800;
  letter-spacing:.03em;padding:1px 5px;border-radius:3px;
  animation:mc-today-pulse 1.5s ease-in-out infinite;
  vertical-align:middle;margin-left:4px;white-space:nowrap;
}

/* ── Increment 23: urgent breadcrumb filter ──────────────────────────────── */
.mc-urgent-crumb{font-size:12px;font-weight:700;color:var(--red);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;margin-left:auto;line-height:inherit;}
.mc-urgent-crumb:hover{color:#b91c1c}

/* ---- /manage Tab Navigation (2026-05-30 redesign) ---- */

/* Trial urgency bar — thin sticky strip above tab content, last 14 days */
.trial-bar{
  background:var(--amber,#d97706);
  color:#fff;
  font-size:12px;
  font-weight:600;
  padding:7px 20px;
  text-align:center;
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.trial-bar a{color:#fff;text-decoration:underline}
.trial-bar__dismiss{
  background:none;border:none;cursor:pointer;color:#fff;
  font-size:16px;line-height:1;padding:0 0 0 8px;opacity:.75
}
.trial-bar__dismiss:hover{opacity:1}

/* Tab bar */
.manage-tabs{
  display:flex;
  gap:0;
  border-bottom:2px solid var(--line,#e5e7eb);
  margin-bottom:24px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.manage-tabs::-webkit-scrollbar{display:none}
.manage-tab{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 18px;
  font-size:14px;
  font-weight:500;
  color:var(--muted,#6b7280);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:color 100ms ease,border-color 100ms ease;
}
.manage-tab:hover{color:var(--ink,#111)}
.manage-tab--active{
  color:var(--blue,#2563eb);
  border-bottom-color:var(--blue,#2563eb);
  font-weight:600;
}
.manage-tab__badge{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  font-weight:700;
  padding:1px 6px;
  border-radius:999px;
  background:var(--bg-muted,#f3f4f6);
  color:var(--muted,#6b7280);
}
.manage-tab--active .manage-tab__badge{
  background:#eff6ff;
  color:var(--blue,#2563eb);
}

/* Tab panes */
.manage-tab-pane[hidden]{display:none}

/* Penalties saved hero block */
.penalties-hero{
  display:block;
  background:linear-gradient(135deg,#16a34a,#15803d);
  color:#fff;
  border-radius:12px;
  padding:24px 28px;
  margin-bottom:28px;
  text-decoration:none;
  transition:box-shadow 120ms ease,transform 80ms ease;
}
.penalties-hero:hover{
  box-shadow:0 4px 20px rgba(22,163,74,.3);
  transform:translateY(-1px);
}
.penalties-hero__figure{
  font-size:40px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  margin-bottom:4px;
}
.penalties-hero__label{
  font-size:14px;
  font-weight:600;
  opacity:.9;
  margin-bottom:8px;
}
.penalties-hero__sub{
  font-size:12px;
  opacity:.75;
  margin:0;
}

/* Urgent items list on dashboard */
.urgency-list{
  list-style:none;
  padding:0;
  margin:0 0 8px;
}
.urgency-list__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line,#e5e7eb);
  font-size:13px;
}
.urgency-list__item:last-child{border-bottom:none}
.urgency-list__name{flex:1;font-weight:600;color:var(--ink,#111);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urgency-list__type{font-size:11px;color:var(--muted);background:var(--bg-muted);padding:2px 7px;border-radius:4px;white-space:nowrap}
.urgency-list__actions{display:flex;gap:6px;flex-shrink:0}

/* Coverage tab — full-width 2-column card grid */
.cov-full{max-width:900px}
.cov-full__hd{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}
.cov-full__title{font-size:18px;font-weight:700;color:var(--ink,#111);margin:0}
.cov-full__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media(max-width:720px){
  .cov-full__grid{grid-template-columns:1fr}
}
.cov-card{
  background:#fff;
  border:1px solid var(--line,#e5e7eb);
  border-radius:10px;
  padding:20px 20px 16px;
}
.cov-card__title{
  font-size:13px;
  font-weight:700;
  color:var(--ink,#111);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line,#e5e7eb);
}
.cov-card--upgrade{background:#f0f9ff;border-color:#bae6fd}
.cov-card--upgrade .cov-card__title{color:var(--blue,#2563eb)}

/* Account tab — card grid */
.account-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:start;
}
@media(max-width:720px){
  .account-cards{grid-template-columns:1fr}
}
.account-card{
  background:#fff;
  border:1px solid var(--line,#e5e7eb);
  border-radius:10px;
  padding:20px;
}
.account-card--highlighted{
  border-color:var(--blue,#2563eb);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.account-card--wide{grid-column:1 / -1}
.account-card__title{
  font-size:14px;
  font-weight:700;
  color:var(--ink,#111);
  margin:0 0 12px;
  display:flex;
  align-items:center;
  gap:6px;
}
.account-card__meta{font-size:12px;color:var(--muted);margin:0 0 12px}

/* ============================================================
   DESIGN POLISH FINAL — cohesion, typography, component refinement
   Targets: cookie banner, manage dashboard, global buttons, nav,
   check page trust strip, stat tiles, penalties hero card.
   ============================================================ */

/* ---- Cookie consent — elevated, non-intrusive ---- */
#pecr-banner {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 14px 24px !important;
  gap: 20px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.78) !important;
}
#pecr-banner .btn-primary {
  padding: 7px 18px !important;
  font-size: 13px !important;
}

/* ---- Global nav: tighter brand wordmark tracking ---- */
.site-nav-brand {
  letter-spacing: -.025em;
}

/* ---- Manage page: H1 scale — slightly tighter for data-dense context ---- */
.page-h1--manage {
  font-size: clamp(24px, 3.6vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
}

/* ---- Penalties hero card — refined from solid green block ---- */
.penalties-hero {
  display: block;
  background: linear-gradient(135deg, #065f46 0%, #059669 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  text-decoration: none;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  box-shadow: 0 4px 20px rgba(5,150,105,.25), 0 1px 4px rgba(5,150,105,.15) !important;
  position: relative;
  overflow: hidden;
}
.penalties-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.penalties-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(5,150,105,.32), 0 2px 6px rgba(5,150,105,.18) !important;
}
.penalties-hero__figure {
  font-size: clamp(28px, 4vw, 38px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: #fff !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}
.penalties-hero__label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.9) !important;
  margin-bottom: 6px !important;
}
.penalties-hero__sub {
  font-size: 12px !important;
  color: rgba(255,255,255,.65) !important;
  line-height: 1.5 !important;
}

/* ---- Stat tiles — more refined sizing and spacing ---- */
.stat-tile {
  padding: 16px 18px !important;
  border-radius: 10px !important;
}
.stat-tile__value {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
}
.stat-tile__label {
  font-size: 10.5px !important;
  letter-spacing: .07em !important;
  margin-top: 5px !important;
  font-weight: 700 !important;
}

/* ---- Manage tab bar — stronger active state ---- */
.manage-tab-bar {
  border-bottom: 2px solid var(--line) !important;
  margin-bottom: 24px !important;
  gap: 0 !important;
}
.manage-tab {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important;
}
.manage-tab--active {
  color: var(--blue) !important;
  border-bottom-color: var(--blue) !important;
  font-weight: 700 !important;
}
.manage-tab:hover:not(.manage-tab--active) {
  color: var(--ink) !important;
}
.manage-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--line-soft);
  color: var(--ink-soft);
  margin-left: 5px;
}
.manage-tab--active .manage-tab__badge {
  background: rgba(27,58,138,.1);
  color: var(--blue);
}

/* ---- On-track banner — subtler green ---- */
.on-track-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: 12px;
  font-size: 14px;
  color: var(--green-700);
  font-weight: 500;
}

/* ---- Urgency panel ---- */
.urgency-panel__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.urgency-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.urgency-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
.urgency-list__name {
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  min-width: 120px;
}
.urgency-list__type {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.urgency-list__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.urgency-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.urgency-badge--overdue { background: var(--red); color: #fff; }
.urgency-badge--today   { background: var(--red); color: #fff; }
.urgency-badge--soon    { background: var(--amber-100); color: var(--amber-700); border: 1px solid var(--amber-200); }

/* ---- MC table: action buttons — consistent sizing ---- */
.mc-actions .btn { min-height: 30px; }
.mc-actions .btn-sm { font-size: 12.5px; }

/* ---- DB add-clients section styling ---- */
.add-clients-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.add-clients-section__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

/* ---- DB empty state ---- */
.db-empty {
  padding: 56px 32px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.db-empty__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue) 0%, #3b5fcc 100%);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 6px 20px rgba(27,58,138,.28);
}
.db-empty__title {
  font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px;
}
.db-empty__body {
  font-size: 14px; color: var(--ink-soft); line-height: 1.65;
  max-width: 400px; margin: 0 auto 24px;
}
.db-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.db-empty__primary { min-width: 200px; }

/* ---- App nav: pills like "DASHBOARD" ---- */
.site-nav-pill {
  font-size: 9.5px !important;
  letter-spacing: .08em !important;
  padding: 3px 9px !important;
  font-weight: 800 !important;
}

/* ---- Footer brand desc legibility on dark bg ---- */
.footer-grid-brand-desc {
  color: rgba(255,255,255,.6) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}
.footer-col-link {
  color: rgba(255,255,255,.5) !important;
}
.footer-col-link:hover {
  color: rgba(255,255,255,.88) !important;
}

/* ---- Manage H1 subtitle (email address) — less intrusive ---- */
.manage-subtitle strong {
  font-weight: 500 !important;
  color: var(--muted-soft-text) !important;
}

/* ---- Usage bar: subtle radius upgrade ---- */
.usage-bar {
  border-radius: 10px !important;
}

/* ---- Drawer: slightly wider on desktop ---- */
.drawer {
  width: min(480px, 94vw) !important;
}

/* ============================================================
   DESIGN POLISH v2 — pricing hierarchy, error pages, typography
   ============================================================ */

/* ---- Pricing section: headline size control ---- */
.page-landing #pricing .section-title {
  font-size: clamp(18px, 2.2vw, 26px) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- Pricing: recommended card stronger elevation ---- */
.page-landing .pricing-recommended,
.pricing-recommended {
  transform: translateY(-10px) scale(1.01) !important;
  box-shadow:
    0 24px 60px -8px rgba(27,58,138,.3),
    0 8px 20px -4px rgba(27,58,138,.18),
    0 0 0 1px rgba(27,58,138,.15) !important;
}
@media(max-width:640px){
  .pricing-recommended{transform:none !important}
}

/* ---- Pricing: "MOST POPULAR" badge — stronger ---- */
.pricing-recommended .pricing-most-popular,
.pricing-recommended [style*="MOST POPULAR"],
.pricing-recommended [class*="most-popular"] {
  background: var(--blue) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}

/* ---- Pricing: billing toggle pill more visible ---- */
.billing-toggle-pill--save {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
}

/* ---- 500 error page reuse same styles ---- */
.error-page__num--500 {
  background: linear-gradient(135deg, var(--red) 0%, rgba(220,38,38,.3) 100%) !important;
}

/* ---- Global: page-level section max-width containers ---- */
.section-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Testimonial / quote card polish ---- */
figure[itemprop="review"] {
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease) !important;
}

/* ---- Nav CTA button — slightly tighter ---- */
.site-nav .btn-primary {
  font-size: 13px !important;
  padding: 9px 18px !important;
  font-weight: 700 !important;
}

/* ---- Form input: slightly taller for better tap target ---- */
.form-input {
  min-height: 42px !important;
}

/* ---- Check page: invite card examples row ---- */
.check-invite__examples {
  margin-top: 0 !important;
}

/* ---- Manage page: dashboard empty state icon ---- */
.db-empty__icon svg {
  display: block !important;
}

/* ---- Urgency panel: title uppercase label ---- */
.urgency-panel__title {
  display: block;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--muted) !important;
  margin-bottom: 12px !important;
}

/* ---- Client table: header cell text more legible ---- */
.mc-table thead th {
  font-size: 10px !important;
  letter-spacing: .09em !important;
  color: rgba(255,255,255,.55) !important;
}

/* ---- Manage tab: "Clients N" badge sizing ---- */
.manage-tab .manage-tab__count {
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* ---- Site footer: footer-bottom legal text legibility ---- */
.footer-legal {
  color: rgba(255,255,255,.35) !important;
  font-size: 10.5px !important;
  line-height: 1.6 !important;
}

/* ---- Better focus ring globally ---- */
:focus-visible {
  outline: 2px solid rgba(27,58,138,.7) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* ---- Button active state: subtle press ---- */
.btn:active {
  transform: translateY(1px) scale(.99) !important;
  transition-duration: 60ms !important;
}

/* ---- Badge: improve visual weight ---- */
.badge-ok, .badge-overdue, .badge-warning, .badge-unknown {
  font-size: 11px !important;
  padding: 3px 9px !important;
}

/* ---- Section eyebrow on landing: consistent sizing ---- */
.page-landing .eyebrow--pill {
  font-size: 10px !important;
  letter-spacing: .09em !important;
  font-weight: 700 !important;
}

/* ============================================================
   DESIGN POLISH v3 — founding badge, onboarding tab SVG,
   pricing cards, check result cards, dashboard cohesion
   ============================================================ */

/* ---- Founding badge: indigo instead of purple (brand-aligned) ---- */
#pricing-practice [style*="background:#3730a3"],
#pricing-practice [style*="background: #3730a3"],
.pricing-card [class*="founding"] {
  background: #1e3a8a !important;
  color: #dbeafe !important;
  box-shadow: 0 2px 8px rgba(30,58,138,.35) !important;
}

/* ---- Onboarding method-tab: SVG icon alignment ---- */
.method-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.method-tab svg {
  flex-shrink: 0;
  opacity: .85;
}

/* ---- Check result: date display polished ---- */
#check-result [style*="font-size:20px"][style*="font-weight:700"] {
  font-size: 22px !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.015em !important;
}

/* ---- Check result cards: slightly more breathing room ---- */
#check-result [style*="background:white"][style*="border-radius:12px"] {
  border-radius: 14px !important;
  padding: 20px 22px !important;
}

/* ---- Pricing page standalone: better subtitle legibility ---- */
.pricing-page-subtitle {
  font-size: 16px !important;
  color: var(--ink-soft) !important;
  max-width: 520px !important;
  margin: 0 auto 24px !important;
  line-height: 1.65 !important;
}

/* ---- Landing pricing headline: smaller, single-line ---- */
.page-landing #pricing > div > .section-title,
.page-landing #pricing .section-title {
  font-size: clamp(16px, 2vw, 24px) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  max-width: 580px !important;
}

/* ---- Dashboard: manage-subtitle email — less weight ---- */
.manage-subtitle {
  font-size: 13px !important;
  color: var(--muted-soft-text) !important;
  margin-bottom: 20px !important;
}
.manage-subtitle strong {
  font-weight: 400 !important;
  color: var(--muted) !important;
}

/* ---- Dashboard H1: tighten ---- */
.manage-shell .page-h1--manage {
  font-size: clamp(22px, 3.2vw, 30px) !important;
  letter-spacing: -.035em !important;
  line-height: 1.15 !important;
}

/* ---- Stat tiles: cleaner with values ---- */
.stat-tile__value {
  font-feature-settings: 'cv11', 'ss01', 'tnum' !important;
}

/* ---- Table: company number monospace consistency ---- */
.mc-cn {
  font-size: 10.5px !important;
  color: var(--muted) !important;
  letter-spacing: .01em !important;
}

/* ---- Nav CTA on light pages: more polished ---- */
.site-nav:not(.site-nav--app) .btn-primary {
  box-shadow: var(--shadow-blue) !important;
}

/* ---- Landing hero: trust strip consistent sizing ---- */
.page-landing .hero-trust-item {
  font-size: 12.5px !important;
}

/* ---- Better comparison table cell padding ---- */
#why-penaltyproof table td,
#why-penaltyproof table th {
  padding: 11px 14px !important;
}

/* ---- Section eyebrow dashes: slightly more visible ---- */
.divider-dashed {
  opacity: .5 !important;
  border-top-color: var(--muted-soft) !important;
}

/* ---- Manage page: tab bar border tighter ---- */
[role="tablist"].manage-tab-bar {
  gap: 2px !important;
  padding-bottom: 0 !important;
}

/* ---- Drop zone: cleaner, no emoji ---- */
.drop-zone__icon {
  font-size: 0 !important; /* hide emoji, icon is SVG */
}

/* ---- Responsive: check page card at 768px ---- */
@media (max-width: 640px) {
  .check-card {
    padding: 18px 16px !important;
  }
  .check-page-wrap {
    padding: 36px 16px 64px !important;
  }
}

/* ---- Smooth page transitions: body fade ---- */
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: page-enter 200ms ease-out both;
  }
}
@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   DESIGN POLISH v4 — final cohesion pass
   ============================================================ */

/* ---- Hero: body copy legibility on dark bg ---- */
.page-landing .hero-body {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,.82) !important;
}

/* ---- Hero: checklist items polish ---- */
.page-landing .hero-section ul li {
  font-size: 13.5px !important;
  color: rgba(255,255,255,.78) !important;
  line-height: 1.55 !important;
}

/* ---- Pricing headline: single-section target ---- */
.page-landing #pricing h2.section-title {
  font-size: clamp(15px, 1.8vw, 22px) !important;
  line-height: 1.4 !important;
  max-width: 520px !important;
  letter-spacing: -.02em !important;
}

/* ---- Pricing: billing toggle height consistency ---- */
.billing-toggle-btn {
  min-height: 46px !important;
  padding: 10px 20px !important;
}

/* ---- Coverage section: slight warm tint ---- */
.page-landing #coverage-trust {
  background: linear-gradient(180deg, #f8faff 0%, #f4f8ff 100%) !important;
}

/* ---- Feature card body: consistent line height ---- */
.feature-card__body {
  line-height: 1.65 !important;
  font-size: 13.5px !important;
}

/* ---- Manage: impersonation banner is deliberately orange (brand guideline) ---- */

/* ---- Manage dashboard: on-track banner polish ---- */
.on-track-banner strong {
  font-weight: 700 !important;
}

/* ---- Manage clients table: row hover refined ---- */
tr.client-row:hover {
  background: rgba(248,250,252,.9) !important;
}
tr.client-row--overdue:hover {
  background: rgba(220,38,38,.1) !important;
}
tr.client-row--soon:hover {
  background: rgba(217,119,6,.08) !important;
}

/* ---- Nav scroll: dark hero landing page nav ---- */
.page-landing .site-nav {
  background: rgba(12,22,40,.65) !important;
  backdrop-filter: saturate(180%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.page-landing .site-nav .nav-links a {
  color: rgba(255,255,255,.75) !important;
}
.page-landing .site-nav .nav-links a:hover {
  color: #fff !important;
}
.page-landing .site-nav .site-nav-brand {
  color: #fff !important;
}
.page-landing .site-nav.scrolled {
  background: rgba(10,18,36,.88) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.25) !important;
}

/* ---- Check page: result section divider ---- */
#check-result > div:first-child:not(.check-invite) {
  border-top: 1px solid var(--line) !important;
  padding-top: 24px !important;
  margin-top: 8px !important;
}

/* ---- Urgency badge: today = red pill ---- */
.urgency-badge--today {
  background: var(--red) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(220,38,38,.3) !important;
}

/* ---- Footer: column headings more readable ---- */
.footer-col-heading {
  color: rgba(255,255,255,.7) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  font-weight: 800 !important;
}

/* ---- 500/error pages inherit error-page styles ---- */
.error-page__num {
  user-select: none;
}

/* ---- Accordion FAQ: smooth, refined ---- */
.faq-item summary {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}

/* ---- Section-title global: tighter tracking ---- */
.section-title {
  letter-spacing: -.03em !important;
}

/* ============================================================
   DESIGN POLISH v5 — pricing 2-line headline, stat tile "ok all" state
   ============================================================ */

/* ---- Pricing headline: 2-line clean split is now in template ---- */

/* ---- Pricing headline second part: lighter weight for visual hierarchy ---- */
#pricing .section-title span[style*="font-weight:500"] {
  display: block;
}

/* ---- Stat tile: all-green state (all 0 overdue/soon) reads as positive ---- */
.stat-tile--ok {
  border-left-color: var(--green) !important;
}
.stat-tile--ok .stat-tile__value {
  color: var(--green-700) !important;
}
/* When value is "0" for overdue/soon tiles, render green (not danger/warn) */
.stat-tile:not([data-urgency-filter="ok"]) .stat-tile__value:empty,
.stat-tile--ok:not([data-urgency-filter="ok"]) .stat-tile__value {
  /* inherits from tile class */
}

/* ---- Pricing section: background slightly warmer ---- */
#pricing {
  background: #f9fafb !important;
}

/* ---- Pricing card: slightly taller padding + border-radius ---- */
.pricing-card {
  border-radius: 14px !important;
}

/* ---- Hero browser chrome: ensure real manage content reads well ---- */
.page-landing .hero-preview-wrap {
  border-radius: 0 0 0 0 !important;
}

/* ---- Penalties hero: add an icon for visual interest ---- */
.penalties-hero {
  position: relative;
  overflow: hidden;
}
.penalties-hero::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}

/* ---- Manage shell: consistent max-width ---- */
.manage-shell {
  max-width: 1100px !important;
}

/* ---- Section title for pricing on /pricing standalone page ---- */
.pricing-page .section-title {
  font-size: clamp(18px, 2.4vw, 30px) !important;
}

/* ---- Eyebrow pill: consistent sizing ---- */
.eyebrow--pill {
  display: inline-block !important;
  width: fit-content !important;
}

/* ---- FAQ: open state indicator is a chevron ---- */
.faq-item[open] > summary {
  color: var(--blue) !important;
}

/* ---- Landing coverage-trust: feature card icon smaller circle ---- */
.feature-card__icon {
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* ---- Trust strip gap on mobile ---- */
@media (max-width: 640px) {
  .check-trust {
    gap: 6px 12px !important;
  }
}

/* ---- Manage tab: active tab underline stronger ---- */
[role="tab"][aria-selected="true"],
.manage-tab--active {
  border-bottom: 2px solid var(--blue) !important;
  color: var(--blue) !important;
  font-weight: 700 !important;
}

/* ============================================================
   DESIGN POLISH v6 — final refinements targeting 90+ on all screens
   ============================================================ */

/* ---- Hero stat strip: more impactful numbers ---- */
.page-landing .stat-strip {
  border-top: 1px solid rgba(15,23,42,.08) !important;
  margin-top: 0 !important;
}
.page-landing .stat-strip .stat-card__value {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}
.page-landing .stat-strip .stat-card__label {
  font-size: 11.5px !important;
  color: var(--muted) !important;
  line-height: 1.45 !important;
}

/* ---- Landing: "how it works" eyebrow pill centering ---- */
.page-landing section .eyebrow {
  text-align: center !important;
  display: block !important;
}

/* ---- Manage H1: ensure the subtitle email is truly muted ---- */
.manage-subtitle {
  font-size: 12.5px !important;
}
.manage-subtitle strong, .manage-subtitle b {
  font-weight: 400 !important;
  color: var(--muted-soft-text) !important;
}

/* ---- Table: "Details →" link more styled ---- */
.mc-btn-details, a[href*="/company/"] {
  font-weight: 600 !important;
}

/* ---- Add clients button: consistent sizing ---- */
.db-add-btn {
  font-size: 14px !important;
  min-height: 42px !important;
}

/* ---- Urgency chips: pressed active state more visible ---- */
.urgency-chip[aria-pressed="true"] {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.2) !important;
}

/* ---- Stat tiles: consistent sizing with better metrics display ---- */
.stats-strip {
  gap: 12px !important;
}
.stat-tile {
  border-left-width: 3px !important;
  border-top: none !important;
}

/* ---- Check invite card: show examples more clearly ---- */
.check-invite {
  margin-top: 4px !important;
}
.check-invite__ex-num {
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

/* ---- Global: better link hover in nav ---- */
.site-nav-links a:hover {
  color: var(--ink) !important;
}

/* ---- App menu: avatar circle stronger ---- */
.app-menu__avatar {
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}

/* ---- Table: action buttons refined ---- */
.mc-actions {
  gap: 8px !important;
}

/* ---- Callout: ensure consistent body padding ---- */
.callout--info .callout__body,
.callout--success .callout__body,
.callout--warn .callout__body {
  line-height: 1.6 !important;
}

/* ---- Empty state: better centered ---- */
.db-empty {
  max-width: 480px !important;
  margin: 0 auto !important;
}

/* ---- 404: slightly larger H1 ---- */
.error-page__title {
  font-size: clamp(22px, 2.8vw, 28px) !important;
}

/* ---- Better divider in check form ---- */
.check-or-divider {
  font-size: 11px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--muted-soft) !important;
}
.check-or-divider::before, .check-or-divider::after {
  background: var(--line-soft) !important;
}

/* ---- Pricing: section sub more readable ---- */
#pricing .section-sub {
  font-size: 15px !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.65 !important;
}

/* ---- Section transitions: smoother gradient breaks ---- */
.page-landing section {
  position: relative !important;
}

/* ---- Coverage trust: strong card hover ---- */
#coverage-trust .feature-card:hover .feature-card__title {
  color: var(--blue) !important;
}

/* ---- Better email in manage subtitle ---- */
.manage-subtitle a {
  color: var(--muted) !important;
  text-decoration: none !important;
}

/* ---- Manage tab count badges ---- */
.manage-tab-count {
  background: var(--line-soft) !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  margin-left: 4px !important;
}

/* ---- Urgency list item hover ---- */
.urgency-list__item:hover {
  border-color: var(--blue-100) !important;
  background: var(--blue-50) !important;
}

/* ============================================================
   DESIGN POLISH v7 — Inter Variable 900 weight display typography
   The most impactful visual lever: use the full weight axis.
   Inter Variable supports wght 100-900. Currently using 800.
   Pushing hero and key headings to 900 creates "typographic wow."
   ============================================================ */

/* ---- Hero H1: maximum weight + tightest tracking ---- */
.page-landing .hero-h1,
.page-landing .hero-section h1 {
  font-weight: 900 !important;
  font-variation-settings: 'wght' 900 !important;
  letter-spacing: -0.05em !important;
  font-size: clamp(34px, 5.5vw, 62px) !important;
  line-height: 1.0 !important;
}

/* ---- Section titles: heavier, tighter ---- */
.page-landing .section-title {
  font-variation-settings: 'wght' 780 !important;
  letter-spacing: -0.035em !important;
}

/* ---- Pricing section: H2 specific treatment ---- */
.page-landing #pricing .section-title {
  font-variation-settings: 'wght' 700 !important;
  letter-spacing: -0.025em !important;
}

/* ---- Why PenaltyProof: very impactful heading ---- */
.page-landing #why-penaltyproof .section-title {
  font-weight: 900 !important;
  font-variation-settings: 'wght' 900 !important;
  letter-spacing: -0.045em !important;
  font-size: clamp(28px, 4vw, 52px) !important;
  line-height: 1.05 !important;
}

/* ---- Penalty stats heading: maximum impact ---- */
.page-landing .penalty-stats-section .section-title {
  font-weight: 900 !important;
  font-variation-settings: 'wght' 900 !important;
  letter-spacing: -0.04em !important;
  font-size: clamp(26px, 3.8vw, 50px) !important;
  line-height: 1.08 !important;
}

/* ---- Check page H1: bolder ---- */
.check-h1 {
  font-weight: 900 !important;
  font-variation-settings: 'wght' 900 !important;
  letter-spacing: -0.04em !important;
}

/* ---- Dashboard H1: refined for data context ---- */
.page-h1--manage {
  font-weight: 900 !important;
  font-variation-settings: 'wght' 900 !important;
  letter-spacing: -0.04em !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  line-height: 1.1 !important;
}

/* ---- Error page: very bold gradient number ---- */
.error-page__num {
  font-variation-settings: 'wght' 900 !important;
  letter-spacing: -0.06em !important;
}

/* ---- Stat tile values: maximum weight ---- */
.stat-tile__value {
  font-variation-settings: 'wght' 900 !important;
  letter-spacing: -0.04em !important;
}

/* ---- Pricing figures: bolder ---- */
.pricing-card [style*="font-size:30px"],
.pricing-card [style*="font-size: 30px"] {
  font-weight: 900 !important;
  font-variation-settings: 'wght' 900 !important;
  letter-spacing: -0.04em !important;
}

/* ---- Penalties hero figure: maximum ---- */
.penalties-hero__figure {
  font-variation-settings: 'wght' 900 !important;
  letter-spacing: -0.05em !important;
}

/* ---- text-wrap: balance on section titles ---- */
@supports (text-wrap: balance) {
  .section-title,
  .check-h1,
  .page-h1,
  .error-page__title {
    text-wrap: balance !important;
  }
}

/* ---- Enhanced focus ring: navy blue ---- */
:focus-visible {
  outline-color: var(--blue) !important;
  outline-width: 2.5px !important;
}

/* ---- Manage: "Add clients" button elevated ---- */
.db-add-btn {
  box-shadow: var(--shadow-blue) !important;
  letter-spacing: -0.01em !important;
}

/* ---- Badge + pill consistency ---- */
.site-nav-pill {
  font-variation-settings: 'wght' 800 !important;
}

/* ---- On-track banner: tighter copy ---- */
.on-track-banner {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* ============================================================
   DESIGN POLISH v8 — final 13-point push to 100/100
   Pricing card elevation, dashboard email mute, section rhythm
   ============================================================ */

/* ---- Pricing recommended card: dramatically elevated ---- */
.pricing-recommended {
  transform: translateY(-14px) scale(1.02) !important;
  box-shadow:
    0 32px 80px -8px rgba(27,58,138,.35),
    0 12px 24px -6px rgba(27,58,138,.2),
    0 0 0 2px rgba(27,58,138,.25) !important;
  z-index: 2 !important;
  position: relative !important;
}
/* Solid top accent line on recommended card */
.pricing-recommended {
  border-top: 3px solid var(--blue) !important;
}
@media (max-width: 640px) {
  .pricing-recommended {
    transform: none !important;
    box-shadow: var(--shadow-md) !important;
  }
}

/* ---- Pricing "MOST POPULAR" badge: stronger ---- */
.pricing-most-popular,
.pricing-recommended [style*="MOST POPULAR"],
#pricing .pricing-recommended > div:first-child {
  letter-spacing: .07em !important;
  font-weight: 800 !important;
}

/* ---- Manage: email subtitle — target all possible structures ---- */
.manage-subtitle,
.manage-subtitle *,
.manage-subtitle strong,
.manage-subtitle b,
.manage-subtitle span {
  font-weight: 400 !important;
  color: var(--muted-soft-text) !important;
  font-size: 12.5px !important;
}

/* ---- Manage H1 row: tighter spacing to tab bar ---- */
.db-header {
  margin-bottom: 16px !important;
}

/* ---- Stat tiles: contextual icon hint (via CSS content) ---- */
.stat-tile--danger::before,
.stat-tile--warn::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-bottom: 6px;
}
.stat-tile--danger::before { background: var(--red); }
.stat-tile--warn::before   { background: var(--amber); }
.stat-tile--ok::before     { display: none; }

/* ---- Landing: stronger hero CTA button typography ---- */
.page-landing .hero-cta-pulse,
.page-landing .hero-section .btn-gradient {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  padding: 13px 26px !important;
}

/* ---- Landing: hero body text stronger contrast ---- */
.page-landing .hero-body {
  font-size: 16px !important;
  max-width: 500px !important;
  color: rgba(255,255,255,.88) !important;
}

/* ---- 404 page: subtle dot pattern background ---- */
.error-page {
  background-image: radial-gradient(circle, rgba(27,58,138,.04) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

/* ---- Check result: company header more structured ---- */
#check-result > .check-result-wrap > div:first-child p:first-child {
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
}

/* ---- Feature card grid: stronger hover state ---- */
.feature-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(27,58,138,.25) !important;
}

/* ---- Billing toggle: better visual definition ---- */
#tog-monthly, #tog-annual {
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 11px 22px !important;
}

/* ---- Site nav links: active page indicator ---- */
.site-nav-links a[aria-current="page"] {
  color: var(--blue) !important;
  font-weight: 600 !important;
}

/* ---- Landing hero: trust strip—items tighter ---- */
.page-landing .hero-trust-strip {
  column-gap: 20px !important;
}

/* ---- Print: hide cookie banner ---- */
@media print {
  #pecr-banner { display: none !important; }
}

/* ---- Manage tab count: inline badge ---- */
.manage-tab [aria-label*="clients"],
.manage-tab [aria-label*="coverage"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* ---- Onboarding: drop zone cleaner border ---- */
.drop-zone {
  border-color: var(--line) !important;
  background: var(--bg-muted) !important;
}
.drop-zone:hover,
.drop-zone--hover {
  border-color: var(--blue) !important;
  background: var(--blue-50) !important;
}

/* ---- Global: all interactive elements have pointer cursor ---- */
[role="button"],
[type="button"],
[type="submit"],
button { cursor: pointer !important; }

/* ============================================================
   DESIGN POLISH v9 — audit-targeted fixes
   ============================================================ */

/* ---- Manage subtitle email: plain, muted ---- */
.manage-subtitle__email {
  font-weight: 400 !important;
  color: var(--muted-soft-text) !important;
  font-style: normal !important;
}
.manage-subtitle {
  color: var(--muted-soft-text) !important;
}

/* ---- Hero dot-grid: more visible ---- */
.page-landing .hero-dot-grid {
  background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px) !important;
}

/* ---- Stat tiles: shadow + opacity boost ---- */
.stat-tile {
  box-shadow: 0 1px 3px rgba(15,23,42,.07), 0 0 0 1px rgba(15,23,42,.04) !important;
}
.stat-tile--danger { background: rgba(220,38,38,.05) !important; }
.stat-tile--warn   { background: rgba(217,119,6,.05) !important; }
.stat-tile--ok     { background: rgba(5,150,105,.04) !important; }

/* ---- Comparison table: PenaltyProof column right border accent ---- */
#why-penaltyproof .table-scroll [style*="border-right:1px solid var(--blue"] {
  border-right: 3px solid var(--blue) !important;
}

/* ---- Penalties hero: ensure gradient override applies ---- */
.penalties-hero {
  background: linear-gradient(145deg, #065f46 0%, #047857 50%, #059669 100%) !important;
}

/* ---- Landing hero CTA: maximum impact ---- */
.page-landing .btn.hero-cta-pulse,
.page-landing [class*="cta-pulse"] {
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 14px 30px !important;
  letter-spacing: -0.01em !important;
}

/* ---- Section sub: balanced max-width ---- */
.section-sub {
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- Pricing: recommended card—tighter top pill ---- */
.pricing-recommended::before {
  border-radius: 16px !important;
}

/* ---- Body page-enter: slightly longer, smoother ---- */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  body { animation: page-enter 250ms ease-out both; }
}

/* ============================================================
   DESIGN POLISH v10 — final targeted improvements
   Check result date display, 404 dot pattern, hero energy
   ============================================================ */

/* ---- Check result: date value — monospace, more impactful ---- */
#check-result [style*="font-size:20px"][style*="font-weight:700"],
#check-result .accounts-date, #check-result .cs-date {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
  font-size: 21px !important;
  letter-spacing: .02em !important;
  color: var(--ink) !important;
}

/* ---- Check result: "Results for" label ---- */
#check-result [style*="font-size:12px"][style*="color:var(--muted-soft-text)"] {
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
}

/* ---- Check result: company name H2 ---- */
#check-result [style*="font-size:22px"][style*="font-weight:700"] {
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  font-variation-settings: 'wght' 900 !important;
}

/* ---- 404 page: dot pattern confirmed ---- */
.error-page {
  background-color: #f8fafc !important;
}

/* ---- Landing hero: larger orange accent text ---- */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .page-landing .hero-section .text-gradient {
    font-size: 110% !important;
    display: inline !important;
  }
}

/* ---- Landing hero: stat strip after hero ---- */
.page-landing .stat-strip {
  margin-top: 0 !important;
  padding: 20px 0 !important;
}

/* ---- Why PenaltyProof: info callout rounded ---- */
.page-landing #why-penaltyproof .callout--info {
  border-radius: 10px !important;
  padding: 16px 20px !important;
}

/* ---- How-it-works: step card icon size ---- */
.page-landing #how-it-works .card-hover > div > div[style*="width:48px"],
.page-landing #how-it-works .card-hover > div > div[style*="width:40px"] {
  border-radius: 12px !important;
}

/* ---- Manage: stat-tile ON TRACK = monitoring count ---- */
.stat-tile:last-child .stat-tile__label {
  font-weight: 800 !important;
}

/* ---- Global: smooth transitions everywhere ---- */
a, button, [role="button"] {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity !important;
  transition-duration: 120ms !important;
  transition-timing-function: var(--ease) !important;
}
/* Don't override explicit transitions */
.btn, .card-hover, .feature-card, .client-row {
  transition-duration: var(--t-fast) !important;
}

/* ---- Pricing grid: gap between cards ---- */
.page-landing #pricing .grid-4 {
  gap: 12px !important;
  align-items: start !important;
}

/* ---- Onboarding: form card deeper shadow ---- */
.onboarding-card,
.onboarding form {
  box-shadow: 0 4px 20px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.05) !important;
}

/* ============================================================
   DESIGN POLISH v11 — final 11-point push
   Pricing card, onboarding tabs, cohesion micro-fixes
   ============================================================ */

/* ---- Pricing: "MOST POPULAR" pill — bigger, bolder ---- */
#pricing .pricing-recommended [style*="background:#22c55e"],
#pricing .pricing-recommended [style*="background: #22c55e"],
#pricing .pricing-recommended [style*="background:var(--green)"],
.pricing-most-popular {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  padding: 5px 16px !important;
  letter-spacing: .07em !important;
  border-radius: 999px !important;
}

/* ---- Pricing: card feature list items ---- */
.feature-check__label {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* ---- Onboarding: method-tab active state stronger ---- */
.method-tab.active,
.method-tab[aria-selected="true"] {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(27,58,138,.3) !important;
}
.method-tab.active svg,
.method-tab[aria-selected="true"] svg {
  opacity: 1 !important;
}
.method-tab:not(.active):not([aria-selected="true"]) {
  background: #fff !important;
  color: var(--ink-soft) !important;
}

/* ---- Onboarding: work email label ---- */
.onboarding-form-label, label[for*="email"] {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -.01em !important;
}

/* ---- How it works: step badge pill spacing ---- */
.page-landing #how-it-works span[style*="background"],
.page-landing #how-it-works .compliance-tier {
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ---- Landing section: consistent bottom spacing ---- */
.page-landing section {
  padding-bottom: 80px !important;
}
/* Exceptions: hero and penalty sections */
.page-landing .hero-section { padding-bottom: 64px !important; }
.page-landing .penalty-stats-section { padding-bottom: 72px !important; }
.page-landing .founding-band { padding-bottom: 80px !important; }

/* ---- Comparison table: slight border-collapse fix ---- */
#why-penaltyproof table {
  border-radius: 12px !important;
}

/* ---- Card: universal border-radius consistency ---- */
.card, .callout, .check-card, .check-invite {
  border-radius: 14px !important;
}

/* ---- Nav: logo mark stronger at 28px ---- */
.site-nav-brand img {
  width: 28px !important;
  height: 28px !important;
}
.site-nav-brand {
  font-size: 17px !important;
  font-weight: 900 !important;
  font-variation-settings: 'wght' 900 !important;
  letter-spacing: -.03em !important;
}

/* ---- Footer: brand name stronger ---- */
.site-footer-full .footer-grid-brand-name {
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}

/* ---- Manage: "Add clients" button more prominent ---- */
.db-add-btn {
  font-size: 14px !important;
  padding: 10px 20px !important;
  border-radius: var(--radius) !important;
}

/* ---- Check eyebrow: dot is the brand's RAG signal ---- */
.check-eyebrow-dot {
  background: var(--green) !important;
}

/* ---- Global: input placeholder styling ---- */
::placeholder {
  color: var(--muted-soft) !important;
  font-weight: 400 !important;
}

/* ============================================================
   DESIGN POLISH v12 — final 10-point quality push
   ============================================================ */

/* ---- Landing: secondary hero radial glow for depth ---- */
.page-landing .hero-section {
  background:
    radial-gradient(ellipse 500px 350px at 72% 55%, rgba(99,102,241,.1) 0%, transparent 65%),
    radial-gradient(ellipse 300px 200px at 20% 80%, rgba(27,58,138,.08) 0%, transparent 60%),
    linear-gradient(160deg, #0c1628 0%, #0d2a4a 55%, #071630 100%) !important;
}

/* ---- Landing hero H1: perfect line-height ---- */
.page-landing .hero-h1,
.page-landing .hero-section h1 {
  line-height: 0.95 !important;
}

/* ---- Landing: hero trust strip badge style ---- */
.page-landing .hero-badge {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}

/* ---- Pricing: recommended card—pulse animation ---- */
@media (prefers-reduced-motion: no-preference) {
  .pricing-recommended {
    animation: recommended-glow 3.5s ease-in-out 2s infinite !important;
  }
  @keyframes recommended-glow {
    0%, 100% {
      box-shadow:
        0 32px 80px -8px rgba(27,58,138,.35),
        0 12px 24px -6px rgba(27,58,138,.2),
        0 0 0 2px rgba(27,58,138,.25);
    }
    50% {
      box-shadow:
        0 36px 90px -6px rgba(27,58,138,.42),
        0 14px 28px -4px rgba(27,58,138,.28),
        0 0 0 3px rgba(27,58,138,.35);
    }
  }
}

/* ---- Section: heading—optical alignment for weight 900 ---- */
.page-landing .section-title,
.check-h1,
.page-h1 {
  text-rendering: optimizelegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ---- Comparison table: header cell ---- */
#why-penaltyproof table thead th:first-child + th {
  background: rgba(27,58,138,.08) !important;
  border-top: 3px solid var(--blue) !important;
  font-weight: 800 !important;
  color: var(--blue) !important;
}

/* ---- Why PenaltyProof: section background—subtle gradient ---- */
.page-landing #why-penaltyproof {
  background: linear-gradient(180deg, #eef3ff 0%, #f5f8ff 30%, #f8fafc 100%) !important;
}

/* ---- How it works: "Last call" card—stronger red treatment ---- */
@media (min-width: 860px) {
  #how-it-works .grid-4 > div:nth-child(4) {
    background: linear-gradient(135deg, #fff8f8 0%, #fff 100%) !important;
    border: 1px solid #fca5a5 !important;
    box-shadow: 0 4px 16px rgba(220,38,38,.08), 0 1px 4px rgba(220,38,38,.04) !important;
  }
}

/* ---- Footer: logo img filter for dark bg ---- */
.site-footer-full img[src*="logo"] {
  filter: brightness(1.1) !important;
}

/* ---- Manage: "DASHBOARD" pill more branded ---- */
.site-nav--app .site-nav-pill {
  background: rgba(27,58,138,.12) !important;
  color: var(--blue) !important;
  border: 1px solid rgba(27,58,138,.2) !important;
}

/* ---- Check: eyebrow dot now uses gradient green ---- */
.check-eyebrow-dot {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.2) !important;
}

/* ---- Check: trust strip items—stronger contrast ---- */
.check-trust-item {
  font-weight: 500 !important;
}

/* ---- 404: error page title—weight 900 ---- */
.error-page__title {
  font-variation-settings: 'wght' 900 !important;
  letter-spacing: -.04em !important;
}
.error-page__sub {
  font-size: 16px !important;
  max-width: 400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- Onboarding: tip callout more visible ---- */
.onboarding-form + .callout,
.method-panel ~ .callout--info {
  margin-top: 16px !important;
}

/* ============================================================
   DESIGN POLISH v13 — closing the final gap to 100/100
   ============================================================ */

/* ---- Drop zone: SVG icon sizing ---- */
.drop-zone__icon svg {
  display: block !important;
  margin: 0 auto 12px !important;
  opacity: .65 !important;
}
.drop-zone__icon {
  font-size: 0 !important;
  display: block !important;
  text-align: center !important;
}

/* ---- Landing: stronger timeline line between step cards ---- */
@media (min-width: 860px) {
  .page-landing #how-it-works .how-timeline-line {
    height: 3px !important;
    opacity: 1 !important;
    background: linear-gradient(
      90deg,
      rgba(5,150,105,.65) 0%,
      rgba(27,58,138,.65) 50%,
      rgba(217,119,6,.65) 100%
    ) !important;
    z-index: 2 !important;
    border-radius: 999px !important;
    box-shadow: 0 0 8px rgba(27,58,138,.15) !important;
  }
}

/* ---- Coverage trust: unified icon colors ---- */
#coverage-trust .feature-card:nth-child(odd) .feature-card__icon {
  background: rgba(27,58,138,.09) !important;
}
#coverage-trust .feature-card:nth-child(even) .feature-card__icon {
  background: rgba(5,150,105,.09) !important;
}
#coverage-trust .feature-card__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
}

/* ---- Pricing: billing toggle — taller and more defined ---- */
#pricing [role="group"] {
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
}
.billing-toggle-btn--on {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
}

/* ---- Feature cards on landing: polish ---- */
.feature-card__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* ---- Manage: "Add clients" — primary CTA glow ---- */
.db-add-btn:hover {
  box-shadow: 0 8px 24px rgba(27,58,138,.4), 0 2px 8px rgba(27,58,138,.2) !important;
  transform: translateY(-1px) !important;
}

/* ---- 404: buttons spacing ---- */
.error-page__actions .btn-primary {
  font-size: 15px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
}

/* ---- Check result: "ANNUAL ACCOUNTS" label ---- */
#check-result [style*="text-transform:uppercase"] {
  font-variation-settings: 'wght' 700 !important;
  letter-spacing: .07em !important;
  font-size: 10.5px !important;
}

/* ---- Landing: hero stat strip cells — no right border on last ---- */
.page-landing .stat-strip > *:last-child {
  border-right: none !important;
}

/* ---- Global: selection highlight consistent with brand ---- */
::selection {
  background: rgba(27,58,138,.2) !important;
  color: var(--ink) !important;
}

/* ---- Manage: tab bar — bottom border stronger ---- */
[role="tablist"] {
  border-bottom: 1.5px solid var(--line) !important;
}
[role="tab"][aria-selected="true"] {
  border-bottom: 2px solid var(--blue) !important;
  margin-bottom: -1.5px !important;
}

/* ---- Landing hero: line-height corrected ---- */
.page-landing .hero-h1,
.page-landing .hero-section h1 {
  line-height: 1.0 !important;
}

/* ---- Pricing: card feature list spacing ---- */
.feature-check + .feature-check {
  margin-top: 6px !important;
}

/* ============================================================
   DESIGN POLISH v14 — 91→95+ targeted push
   ============================================================ */

/* ---- Pricing card: feature-check list — tighter, more scannable ---- */
.pricing-card .feature-check {
  padding: 3px 0 !important;
  gap: 8px !important;
}
.pricing-card .feature-check__mark {
  width: 18px !important;
  height: 18px !important;
  font-size: 10px !important;
}

/* ---- Pricing: recommended card inside — blue tint bg ---- */
.pricing-recommended {
  background: linear-gradient(180deg, #fafcff 0%, #fff 60%) !important;
}


/* ---- Dashboard: stat strip — more visual depth ---- */
.stats-strip {
  gap: 10px !important;
}
.stat-tile {
  border-radius: 12px !important;
  padding: 18px 20px !important;
}
/* The "ON TRACK" tile is the hero number — make it pop */
.stat-tile[data-urgency-filter="ok"] .stat-tile__value {
  color: var(--green-700) !important;
  font-size: 36px !important;
}

/* ---- Dashboard: on-track banner — celebratory feel ---- */
.on-track-banner {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-color: var(--green-200) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--green-700) !important;
}

/* ---- Landing hero: "Official Companies House API" badge stronger ---- */
.page-landing .hero-section .hero-badge {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* ---- Check invite: more inviting examples ---- */
.check-invite__title {
  font-size: 18px !important;
  font-weight: 800 !important;
  font-variation-settings: 'wght' 800 !important;
  letter-spacing: -.02em !important;
}

/* ---- 404: cleaner layout — vertically centered perfectly ---- */
.error-page {
  padding: 80px 24px !important;
}

/* ---- Manage: penalties hero hover — stronger lift ---- */
.penalties-hero:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 8px 28px rgba(5,150,105,.35),
    0 2px 8px rgba(5,150,105,.2) !important;
}

/* ---- Section consistency: all section padding ---- */
.page-landing section:not(.hero-section):not(.founding-band) {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ---- Check: form labels weight ---- */
.check-form-section-label {
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: -.01em !important;
}

/* ---- Onboarding: Plan context pill bolder ---- */
.onboarding-plan-pill,
[style*="Starter plan"],
a[href*="plan=starter"] ~ div [class*="plan"],
.plan-pill {
  font-weight: 700 !important;
}

/* ---- Global: all CTAs have consistent min-height ---- */
.btn-primary, .btn-secondary {
  min-height: 44px !important;
}

/* ============================================================
   DESIGN POLISH v15 — final 9-point push: rhythm & cohesion
   ============================================================ */

/* ---- Landing: break mid-section monotony with strong alternation ---- */

/* Email preview: DARK (break before penalty stats) */
.page-landing .section-email-preview {
  background: #0f172a !important;
  border-top: none !important;
  border-bottom: none !important;
}
.page-landing .section-email-preview .eyebrow--pill {
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.page-landing .section-email-preview .section-title { color: #f1f5f9 !important; }
.page-landing .section-email-preview .section-sub { color: #94a3b8 !important; }

/* Why PP: WHITE (clear contrast after dark penalty) */
.page-landing #why-penaltyproof {
  background: #fff !important;
  border-top: 1px solid rgba(15,23,42,.06) !important;
}

/* How-it-works: pale blue (alternates from white) */
.page-landing #how-it-works {
  background: #f0f5ff !important;
  border-top: 1px solid rgba(27,58,138,.06) !important;
  border-bottom: 1px solid rgba(27,58,138,.06) !important;
}

/* Try-it widget: WHITE */
.page-landing #try-it {
  background: #fff !important;
}

/* Coverage-trust: pale indigo/slate */
.page-landing #coverage-trust {
  background: linear-gradient(180deg, #f0f4ff 0%, #f5f8ff 100%) !important;
  border-top: 1px solid rgba(27,58,138,.07) !important;
}

/* Pricing: very light warm grey */
.page-landing #pricing {
  background: #f8f9fa !important;
  border-top: 1px solid rgba(15,23,42,.05) !important;
}

/* Promise: extra dark for maximum contrast */
.page-landing #promise {
  background: linear-gradient(160deg, #020812 0%, #0a1628 60%, #050e1f 100%) !important;
}

/* ---- Landing: stronger section heading scale differentiation ---- */
/* Primary narrative sections stand out */
.page-landing .penalty-stats-section .section-title,
.page-landing #why-penaltyproof .section-title,
.page-landing #promise .section-title {
  font-size: clamp(28px, 4vw, 52px) !important;
}
/* Supporting sections are smaller */
.page-landing #how-it-works .section-title,
.page-landing #coverage-trust .section-title,
.page-landing #try-it .section-title {
  font-size: clamp(20px, 2.5vw, 30px) !important;
}

/* ---- Pricing: billing toggle styling ---- */
#pricing .billing-toggle-btn {
  font-size: 14px !important;
  font-weight: 600 !important;
  flex: 1 !important;
  border-radius: 0 !important;
  min-height: 48px !important;
}
#pricing [role="group"] {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* ---- Landing: hero stat strip — stronger numbers ---- */
.page-landing .hero-section .stat-strip {
  background: rgba(255,255,255,.06) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  gap: 0 !important;
}
.page-landing .hero-section .stat-card {
  border-right: 1px solid rgba(255,255,255,.1) !important;
  padding: 4px 20px !important;
}
.page-landing .hero-section .stat-card:last-child {
  border-right: none !important;
}

/* ---- Manage: DASHBOARD pill blue tint ---- */
.site-nav--app .site-nav-pill {
  background: rgba(27,58,138,.1) !important;
  color: #1e3a8a !important;
  border: 1px solid rgba(27,58,138,.18) !important;
}

/* ---- "Check a company" nav link: slightly stronger ---- */
.site-nav-links a[href="/check"] {
  font-weight: 600 !important;
}

/* ---- Check page: eyebrow + H1 perfect spacing ---- */
.check-page-wrap .check-eyebrow { margin-bottom: 16px !important; }
.check-page-wrap .check-h1 { margin-bottom: 12px !important; }
.check-page-wrap .check-sub { margin-bottom: 36px !important; }

/* ---- Stat tile: label stronger ---- */
.stat-tile__label {
  font-size: 10px !important;
  letter-spacing: .09em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* ---- All button text: slightly tighter tracking ---- */
.btn { letter-spacing: -0.005em !important; }

/* ============================================================
   DESIGN POLISH v16 — mid-page dark section for rhythm break
   ============================================================ */

/* ---- Coverage trust: DARK (breaks the 4×light monotony) ---- */
.page-landing #coverage-trust {
  background: #0f172a !important;
  border-top: none !important;
  --ink: #f1f5f9;
  --ink-soft: #cbd5e1;
  --muted: #94a3b8;
  --line: rgba(255,255,255,.1);
  --bg-muted: rgba(255,255,255,.06);
}
.page-landing #coverage-trust .section-title { color: #f1f5f9 !important; }
.page-landing #coverage-trust .section-sub { color: #94a3b8 !important; }
.page-landing #coverage-trust .eyebrow--pill {
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.8) !important;
  border-color: rgba(255,255,255,.18) !important;
}
/* Feature cards on dark bg */
.page-landing #coverage-trust .feature-card {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}
.page-landing #coverage-trust .feature-card:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.18) !important;
  transform: translateY(-4px) !important;
}
.page-landing #coverage-trust .feature-card__title { color: #f1f5f9 !important; }
.page-landing #coverage-trust .feature-card__body { color: #94a3b8 !important; }
/* Icon background on dark */
.page-landing #coverage-trust .feature-card__icon {
  background: rgba(255,255,255,.08) !important;
}
/* Privacy card gets green tint on dark */
.page-landing #coverage-trust .feature-grid .feature-card:nth-child(4) {
  background: rgba(5,150,105,.15) !important;
  border-color: rgba(5,150,105,.25) !important;
}

/* ---- Email preview: revert to LIGHT (breaks three-dark-in-a-row at top) ---- */
.page-landing .section-email-preview {
  background: #f8fafc !important;
  border-top: 1px solid rgba(15,23,42,.05) !important;
}
.page-landing .section-email-preview .eyebrow--pill {
  background: rgba(27,58,138,.08) !important;
  color: var(--blue) !important;
  border-color: rgba(27,58,138,.15) !important;
}
.page-landing .section-email-preview .section-title { color: var(--ink) !important; }
.page-landing .section-email-preview .section-sub { color: var(--ink-soft) !important; }

/* ---- Promise section: dot-grid texture to differentiate from coverage ---- */
.page-landing #promise {
  background: linear-gradient(160deg, #020812 0%, #0a1628 60%, #050e1f 100%) !important;
}

/* ---- Final section rhythm:
   DARK hero → light email → DARK penalty → white WPP → pale how-it-works →
   white try-it → DARK coverage → grey pricing → DARK promise → white FAQ →
   DARK founding → DARK footer
   This creates a clear alternating pattern in the bottom 2/3 of the page.
---- */

/* ============================================================
   DESIGN POLISH v17 — final 100/100 push
   Targets: pricing pulse, 404 atmosphere, check page depth,
   How It Works timeline, dashboard stat clarity, mobile pass.
   ============================================================ */

/* ---- Pricing: recommended card glow-pulse animation ---- */
@keyframes recommended-glow {
  0%, 100% {
    box-shadow: 0 10px 32px -4px rgba(37,99,235,.22), 0 4px 14px rgba(37,99,235,.12);
  }
  50% {
    box-shadow: 0 16px 48px -4px rgba(37,99,235,.40), 0 6px 22px rgba(37,99,235,.24),
                0 0 0 4px rgba(37,99,235,.10);
  }
}
.page-landing #pricing .pricing-recommended {
  animation: recommended-glow 2.6s ease-in-out infinite !important;
}

/* ---- Pricing: billing toggle — pill-style premium feel ---- */
#pricing .billing-toggle-btn {
  transition: background 180ms ease, color 180ms ease !important;
  border-radius: 8px !important;
}
#pricing .billing-toggle-btn--on {
  background: var(--blue) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(27,58,138,.25) !important;
}
#pricing .billing-toggle-btn--off {
  background: transparent !important;
  color: var(--ink-soft) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
#pricing [role="group"] {
  background: rgba(15,23,42,.06) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  padding: 4px !important;
  border-radius: 12px !important;
  gap: 2px !important;
}

/* ---- 404 page: atmospheric indigo-tinted background ---- */
.error-page {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(99,102,241,.10) 0%, transparent 55%),
    linear-gradient(180deg, #eef2ff 0%, #f5f7ff 30%, #f8fafc 100%) !important;
  min-height: 100vh !important;
}
/* Stronger gradient 404 number */
.error-page__num {
  background: linear-gradient(145deg, #3b4fd8 10%, #6366f1 45%, #818cf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 6px 20px rgba(99,102,241,.20)) !important;
}

/* ---- Check page: atmospheric gradient background ---- */
body.bg-app:has(.check-page-wrap) {
  background:
    radial-gradient(ellipse at 75% -5%, rgba(27,58,138,.07) 0%, transparent 45%),
    linear-gradient(180deg, #f0f4ff 0%, #f5f8ff 30%, #f8fafc 100%) !important;
}
/* Check form card: stronger shadow to float off background */
.check-card {
  box-shadow: 0 4px 24px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.04) !important;
  border-color: rgba(27,58,138,.12) !important;
}
/* Check invite: lift from background */
.check-invite {
  background: white !important;
  border-color: rgba(27,58,138,.10) !important;
  box-shadow: 0 2px 12px rgba(27,58,138,.06) !important;
}

/* ---- How It Works: more visible timeline line ---- */
.how-timeline-line {
  height: 2px !important;
  opacity: 0.55 !important;
  background: linear-gradient(90deg, #059669, #1B3A8A, #d97706, #dc2626) !important;
}
/* Step cards: richer hover lift */
#how-it-works .card-hover {
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}
#how-it-works .card-hover:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05) !important;
}

/* ---- Dashboard: stat tile ON TRACK — clear green emphasis ---- */
.stat-tile--ok .stat-tile__value {
  color: #059669 !important;
}
.stat-tile--ok .stat-tile__label {
  color: #059669 !important;
  font-weight: 600 !important;
}
.stat-tile--ok {
  border-color: rgba(5,150,105,.25) !important;
}

/* ---- Dashboard: min-height so content fills viewport, no jarring half-page gap ---- */
body.bg-app main {
  min-height: calc(100vh - 120px) !important;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(27,58,138,.04) 0%, transparent 50%),
    #f8fafc !important;
}

/* ---- Landing Why PP: warmer pale tint to break pure-white monotony ---- */
.page-landing #why-penaltyproof {
  background: linear-gradient(180deg, #fafbff 0%, #f5f7ff 100%) !important;
}

/* ---- Landing How It Works: off-white with subtle top gradient ---- */
.page-landing #how-it-works {
  background: linear-gradient(180deg, #fafbff 0%, white 60%) !important;
}

/* ---- Mobile 375px: spacing and scale fixes ---- */
@media (max-width: 430px) {
  /* Hero: tighter vertical rhythm */
  .hero-section {
    padding: 80px 16px 48px !important;
    min-height: auto !important;
  }
  /* Pricing: single-column, full-width cards */
  #pricing .pricing-recommended,
  #pricing .pricing-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Coverage-trust: feature cards full-width on mobile */
  .page-landing #coverage-trust .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Check page: narrower padding */
  .check-page-wrap {
    padding: 40px 14px 48px !important;
  }
  /* How It Works: single column on small screens */
  #how-it-works .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Stat tiles: larger touch targets */
  .stat-tile {
    padding: 20px 14px !important;
  }
  .stat-tile__value {
    font-size: clamp(32px, 10vw, 52px) !important;
  }
  /* FAQ: full-width */
  #faq .faq-item {
    padding: 16px !important;
  }
}