/* COPY of PayrollUno.Web/wwwroot/app.css (2026-08-14, paystub-generator M1).
   payroar.ca is the CANONICAL marketing site now — edit THIS copy for
   public-site changes; the Web copy serves the deprecated in-app marketing
   pages until the app.payroar.ca cutover deletes them. */

/* ============================================================
   PayrollUno — "clear ledger" design system, v3
   ------------------------------------------------------------
   Design intent: payroll software must feel PRECISE and CALM,
   and the public site must feel FRIENDLY without overselling.
   - Money is always monospaced with tabular numerals (.fig), so
     columns of figures line up like a real ledger.
   - One brand blue for actions, one amber accent used sparingly,
     green strictly for "good/active", red strictly for
     deductions/danger.
   - Cool paper background + white cards + hairline borders.

   ★ CUSTOMIZING THE THEME ★
   Every color in the app derives from the token block below.
   To re-theme the whole product (marketing site AND app), edit
   ONLY this :root block. Semantic names, not color names, so a
   rebrand never requires touching a page:
     --brand-*  = primary action color (buttons, links, focus)
     --accent   = small highlights (brand dot, marketing flourishes)
     --ok-*     = positive status (Active, Processed)
     --warn-*   = caution (Draft, warnings)
     --danger-* = deductions, destructive actions, errors
     --ink-*    = text     --paper/--card = surfaces   --hair = borders
   Fonts are SELF-HOSTED (wwwroot/fonts, @font-face below) since
   2026-07-11 — no Google Fonts request, so pages render identically
   with no internet and leak no visitor IPs to a third party. To
   change fonts: replace the woff2 files + @font-face blocks + the
   --ui / --mono tokens together.

   All class names are a stable contract with the Razor pages —
   restyle freely, but never rename without checking usages.
   ============================================================ */

/* ---- Self-hosted fonts (subset files from Google Fonts) ------
   Figtree ships as a VARIABLE font: one file covers weights
   400–800. IBM Plex Mono is static: one file per weight.
   unicode-range lets the browser skip the latin-ext files unless
   a page actually uses those characters (accented names, etc.). */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/figtree-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ---- EDIT ME: palette ---------------------------------- */
    --ink:         #16233A;   /* navy-black text */
    --ink-soft:    #46566E;   /* secondary text */
    --ink-faint:   #63738C;   /* AA on card+paper (D-085; was #7E8DA4 at 3.4:1) */   /* hints, labels */
    --paper:       #F5F8FC;   /* app background (cool blue-grey) */
    --card:        #FFFFFF;

    --brand:       #2F6CC4;   /* cobalt blue — primary actions */
    --brand-deep:  #1F4E96;
    --brand-soft:  #5288D6;
    --brand-wash:  #E9F1FB;

    --navy:        #122442;   /* sidebar / marketing footer */
    --navy-deep:   #0C1930;

    --accent:      #F0A836;   /* warm amber — sparing highlights */
    --accent-wash: #FBF1DC;

    --ok:          #247B4C;   /* AA on --ok-wash (D-085) */   /* positive status */
    --ok-wash:     #E6F4EB;
    --warn:        #926418;   /* AA on --warn-wash (D-085) */   /* caution */
    --warn-wash:   #FAF1DE;
    --danger:      #BC443D;   /* AA on --danger-wash (D-085) */   /* deductions / destructive */
    --danger-wash: #FAECEB;

    --hair:        #E1E7EF;   /* hairline borders */
    --hair-soft:   #ECF1F7;

    /* ---- EDIT ME: type + shape ----------------------------- */
    --ui:   'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --r: 14px;       /* card radius */
    --r-sm: 9px;
    --shadow:      0 1px 2px rgba(18,36,66,.05), 0 8px 24px rgba(18,36,66,.06);
    --shadow-lift: 0 2px 4px rgba(18,36,66,.06), 0 14px 36px rgba(18,36,66,.10);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--ui);
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-soft); }

::selection { background: var(--brand-wash); }

/* Keyboard accessibility: a visible ring on focused controls. */
:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; }

/* Secondary/hint text used throughout pages. */
.sub { color: var(--ink-faint); font-size: .82rem; }

/* Money / figures — the signature treatment. Tabular numerals make
   digits equal width so amounts align vertically in tables. */
.fig {
    font-family: var(--mono);
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.fig-neg { color: var(--danger); }

/* ---------- App shell ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
}
/* Brand + the hide-menu toggle on one row (spacing lives here now,
   not on .brand, so the two stay vertically centred on each other). */
.sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0 20px 10px;
}
.brand {
    display: flex; align-items: baseline; gap: 2px;
    font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em;
}
.brand .dot { color: var(--accent); }

/* Inside the dark sidebar the toggle inverts to the light-on-navy scheme. */
.sidebar .sidebar-toggle {
    border-color: rgba(255,255,255,.22);
    color: rgba(255,255,255,.75);
}
.sidebar .sidebar-toggle:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.4);
    color: #fff;
}

/* Sidebar visibility is toggled from the topbar (MainLayout adds
   .sidebar-closed to .shell). display:none — not a transform — so the
   main column reflows to take the full width when the menu is hidden.
   THREE shell states since the mobile layout (2026-08-13):
     .sidebar-open   — user wants the nav visible
     .sidebar-closed — user hid it
     .sidebar-auto   — prerender, before the browser width is known:
                       desktop shows the column (this default), phones
                       keep the drawer closed (mobile block below).
   The desktop default is "visible", so only -closed needs a rule. */
.shell.sidebar-closed .sidebar { display: none; }

/* Desktop: in the pre-measure auto state the sidebar column is visible,
   so the topbar's hamburger (rendered for auto so phones always have
   it) must hide — two menu toggles at once is a glitch, not a feature.
   The backdrop only exists for the phone drawer. */
@media (min-width: 901px) {
    .shell.sidebar-auto .topbar .sidebar-toggle { display: none; }
    .nav-backdrop { display: none; }
}

.sidebar-toggle {
    background: none; border: 1px solid var(--hair); border-radius: var(--r-sm);
    width: 34px; height: 34px; flex-shrink: 0;
    font-size: 1rem; line-height: 1; color: var(--ink-soft);
    cursor: pointer; transition: background .12s, color .12s;
}
.sidebar-toggle:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .eyebrow { font-size: .64rem; text-transform: uppercase; letter-spacing: .12em;
    color: rgba(255,255,255,.42); padding: 16px 11px 6px; }
.nav a, .nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: var(--r-sm);
    color: rgba(255,255,255,.75); font-weight: 500; font-size: .92rem;
    transition: background .12s, color .12s;
    border-left: 2px solid transparent;
}
.nav a:hover, .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav a.active, .nav-link.active {
    background: var(--brand); color: #fff;
    border-left-color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

/* Sidebar emphasis tiers (2026-08-12, tester feedback). Tier 1 is the
   ONE call-to-action (Run Payroll): solid amber fill, navy label —
   the loudest thing in the sidebar by design. Tier 2 (.nav-featured:
   Payroll History, Remittances) wears the hairline amber outline the
   CTA used to wear — clearly featured, clearly below the fill.
   Active keeps the standard --brand fill on all tiers so the
   current-page language stays consistent. MainLayout drops .nav-cta
   for access levels that can't run payroll (D-029). */
.nav-link.nav-cta {
    background: var(--accent);
    border: 1px solid var(--accent);
    border-left-width: 2px;      /* keep the shared active-marker geometry */
    padding: 8px 11px;           /* compensate the top/bottom border — rows stay aligned */
    color: var(--navy-deep);
    font-weight: 700;
}
.nav-link.nav-cta:hover { background: #F6B44E; color: var(--navy-deep); }
.nav-link.nav-cta.active { background: var(--brand); border-color: var(--accent); color: #fff; }

.nav-link.nav-featured {
    border: 1px solid rgba(240, 168, 54, .55);   /* --accent at 55% */
    border-left-width: 2px;
    padding: 8px 11px;
    color: #fff;
    font-weight: 600;
}
.nav-link.nav-featured:hover { background: rgba(240, 168, 54, .12); }
.nav-link.nav-featured.active { background: var(--brand); border-color: var(--accent); }

.sidebar .foot { margin-top: auto; font-size: .7rem; color: rgba(255,255,255,.38);
    padding: 12px 10px 4px; border-top: 1px solid rgba(255,255,255,.1); }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    height: 60px; flex-shrink: 0;
    border-bottom: 1px solid var(--hair);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 32px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 10;
}
.topbar .ctx { font-size: .82rem; color: var(--ink-soft); }
.topbar .ctx strong { color: var(--ink); font-weight: 700; }
/* Full-bleed: pages use every pixel the sidebar leaves them (the old
   1120px cap made wide tables wrap their action buttons). */
.content { padding: 32px; width: 100%; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.page-head .sub { color: var(--ink-faint); font-size: .9rem; margin-top: 4px; }

/* Run-detail actions (Payroll History): a COLUMN of two rows at every
   width (tester feedback 2026-08-14) — navigation (Back + View) on
   top, the "Download as:" group on its own line below. Right-aligned
   beside the H1 on desktop; the mobile block centers everything once
   the page-head stacks. Rows wrap internally — an unwrapped button
   row once forced the whole page to pan sideways on phones. */
.run-actions {
    display: flex; flex-direction: column; gap: 8px;
    align-items: flex-end;
    /* When the page-head wraps this column onto its own line, a lone
       flex line sits LEFT under space-between — auto margin keeps the
       group hugging the right edge instead. (The mobile block's
       flex-basis:100% + center overrides this on phones.) */
    margin-left: auto;
}
/* align-items:flex-start keeps button TOPS level — the .zip-stack is
   taller than its neighbours. */
.run-actions-row {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: flex-start; justify-content: flex-end;
}
/* The "Download as:" label — optically aligned with the button text
   beside it (top-aligned rows put bare text at the buttons' top edge). */
.run-actions .run-actions-label { padding-top: 10px; }
/* ZIP button + its how-to-extract note as ONE flex item, so the note
   sits directly under the button it explains wherever the row wraps. */
.zip-stack { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; }
.zip-stack .zip-help { font-size: .72rem; max-width: 210px; text-align: center; line-height: 1.4; }

/* ---------- Card ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    overflow: hidden;   /* table row hovers respect the rounded corners */
}
.card-pad { padding: 24px 26px; }
.card + .card { margin-top: 18px; }
/* Forms don't benefit from full-bleed the way tables do — unbounded
   two-column inputs on a wide monitor are a reading-width problem, so
   create/edit form cards cap themselves while the page stays full width. */
.card-form { max-width: 1000px; }

/* ---------- Table ---------- */
table.data { width: 100%; border-collapse: collapse; }

/* Horizontal scroll for tables wider than their card (e.g. the Run
   Payroll input grid with its many per-employee columns). The card
   itself clips overflow (rounded corners), so WIDE tables must be
   wrapped: <div class="table-scroll"><table class="data">…
   width:max-content lets the table grow to its natural width;
   min-width:100% keeps narrow tables filling the card as before. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table.data { width: max-content; min-width: 100%; }
table.data th {
    text-align: left; font-size: .67rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-faint); font-weight: 700; padding: 12px 16px;
    border-bottom: 1px solid var(--hair);
    background: #F9FBFD;
    white-space: nowrap;
}
table.data td { padding: 13px 16px; border-bottom: 1px solid var(--hair-soft);
    font-size: .92rem; vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .1s; }
table.data tbody tr:hover td { background: #F8FAFD; }
table.data tr.click { cursor: pointer; }
table.data tr.click:hover td { background: var(--brand-wash); }
.num { text-align: right; }
/* Plain .num is OUT-SPECIFIED on headers by `table.data th` (element+
   class beats lone class), so digit-column headers silently rendered
   left-aligned over right-aligned figures (tester report 2026-08-12).
   Sortable headers had their own patch (th.num .th-sort below); this
   is the general rule for plain <th class="num"> everywhere. */
table.data th.num { text-align: right; }
/* Action-button cells (Edit / YTD… / Delete): never let the buttons wrap
   onto a second line inside the row. */
table.data td.actions { white-space: nowrap; }

/* ---------- Sortable headers + list pager (audit B6) ---------- */
/* The whole header is a real <button> (keyboard for free), restyled
   to look exactly like the plain th text it replaces. */
table.data th .th-sort {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
    display: inline-flex; align-items: center; gap: 5px;
}
table.data th .th-sort:hover { color: var(--ink-soft); }
/* Right-aligned digit columns keep their header flush right too. */
table.data th.num .th-sort { width: 100%; justify-content: flex-end; }
.sort-arrow { opacity: .4; font-size: .8em; }
.sort-arrow.on { opacity: 1; color: var(--brand); }

.pager {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 10px; padding: 10px 14px;
    border-top: 1px solid var(--hair-soft);
}
.pager-range { font-size: .85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--ui); font-weight: 600; font-size: .9rem;
    padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
    cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    transition: background .12s, border-color .12s, box-shadow .12s, transform .05s;
    text-decoration: none; line-height: 1.35; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 1px 2px rgba(31,78,150,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover { background: var(--brand-deep); color: #fff; }

.btn-ghost { background: var(--card); border-color: var(--hair); color: var(--ink);
    box-shadow: 0 1px 2px rgba(18,36,66,.04); }
.btn-ghost:hover { background: var(--paper); border-color: #C6D0DE; color: var(--ink); }

/* Small + danger variants (previously copy-pasted into pages —
   defined once here so every page agrees). */
.btn-sm { padding: 5px 11px; font-size: .8rem; }
.btn-danger { color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); background: var(--danger-wash); color: var(--danger); }
/* Back-navigation button: brand-outlined so "go back" stands out from
   the ghost action buttons around it without competing with the solid
   primary action (a tester couldn't find the ghost version at all). */
.btn-back { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); }
.btn-back:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Brand-accented row action — same look as .btn-back but its own name:
   "back" is navigation, this marks THE featured action in a row of
   ghosts (first use: the Paystubs… button on Employees, 2026-08-12). */
.btn-brand { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); }
.btn-brand:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary.btn-danger {
    background: var(--danger);
    color: #fff; box-shadow: 0 1px 2px rgba(120,35,30,.35);
}
.btn-primary.btn-danger:hover { background: #A93B34; color: #fff; }

/* Danger zone: destructive actions live at the BOTTOM of an edit form,
   fenced off in a red-tinted box — never as a row button next to the
   everyday actions, where one slipped click could arm them (tester
   feedback 2026-07-14). The two-step confirmation still follows. */
.danger-zone {
    margin-top: 22px; padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
}

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .8rem; font-weight: 650; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select {
    width: 100%; padding: 9px 12px; border: 1px solid var(--hair); border-radius: var(--r-sm);
    font-family: var(--ui); font-size: .92rem; background: var(--card); color: var(--ink);
    outline: none; transition: border-color .12s, box-shadow .12s;
}
.field input:hover, .field select:hover { border-color: #BECAD9; }
.field input:focus, .field select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.field input::placeholder { color: #63738C;   /* AA placeholder (D-085) */ }
/* Money/number inputs read better in the ledger font. */
.field input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.field .err { color: var(--danger); font-size: .78rem; margin-top: 5px; font-weight: 500; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

/* Standalone label + control (used by inline pickers like the
   Remittances month selector, outside a .field wrapper). */
.field-label { display: block; font-size: .8rem; font-weight: 650; color: var(--ink-soft); margin-bottom: 6px; }
select.input, input.input {
    padding: 9px 12px; border: 1px solid var(--hair); border-radius: var(--r-sm);
    font-family: var(--ui); font-size: .92rem; background: var(--card); color: var(--ink);
    outline: none; min-width: 150px; transition: border-color .12s, box-shadow .12s;
}
select.input:hover, input.input:hover { border-color: #BECAD9; }
select.input:focus, input.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }

/* ---------- Pills ---------- */
/* Semantic status pills: ok = green (Active/Processed), warn = amber
   (Draft), danger = red (Voided), muted = grey, brand = blue. The old
   color-named classes (pill-pine/clay/gold) were renamed 2026-07-10. */
.pill {
    font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 100px;
    letter-spacing: .02em; display: inline-flex; align-items: center; gap: 5px;
    text-transform: uppercase;
}
.pill-ok { background: var(--ok-wash); color: var(--ok); }
.pill-muted { background: var(--hair-soft); color: var(--ink-soft); }
.pill-danger { background: var(--danger-wash); color: var(--danger); }
.pill-warn { background: var(--warn-wash); color: var(--warn); }
.pill-brand { background: var(--brand-wash); color: var(--brand); }
/* A status dot inside pills, e.g. Active. */
.pill-ok::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 56px 24px; color: var(--ink-faint); }
.empty h3 { color: var(--ink); margin-bottom: 6px; font-size: 1.05rem; }
.empty p { margin: 0 auto 18px; max-width: 420px; }

/* ---------- Stat row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--hair); border-radius: var(--r); overflow: hidden;
    border: 1px solid var(--hair); box-shadow: var(--shadow); }
.stat { background: var(--card); padding: 18px 20px; }
.stat .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-faint); font-weight: 700; }
.stat .v { font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 1.4rem; font-weight: 500; margin-top: 6px; letter-spacing: -0.02em; }

/* ---------- Document (pay stub / PD7A) — the signature ---------- */
/* Styled like a paper cheque/statement: perforated top edge, dashed
   ledger lines, a heavy rule above the total. */
.doc {
    background: var(--card); border: 1px solid var(--hair); border-radius: var(--r);
    position: relative; overflow: hidden; box-shadow: var(--shadow);
    transition: box-shadow .15s;
}
.doc:hover { box-shadow: var(--shadow-lift); }
.doc::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: repeating-linear-gradient(90deg, var(--hair) 0 7px, transparent 7px 14px);
}
.doc-body { padding: 28px 30px; }
.doc-row { display: flex; justify-content: space-between; align-items: baseline;
    padding: 9px 0; border-bottom: 1px dashed var(--hair); font-size: .95rem; }
.doc-row:last-child { border-bottom: none; }
.doc-row.total { border-top: 2px solid var(--ink); border-bottom: none;
    margin-top: 6px; padding-top: 14px; font-weight: 700; font-size: 1.02rem; }

/* ---------- Form validation + help ---------- */

/* Mandatory fields: labels with class="req" get a red asterisk. */
.field label.req::after, .field-label.req::after { content: " *"; color: var(--danger); font-weight: 700; }

/* Inputs that failed validation. */
.field input.invalid, .field select.invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(192, 69, 62, .12);
}

/* ============================================================
   HELP TIPS (D-106 — replaces the D-045 focus-tied bubble)
   Markup is Components/Shared/HelpTip.razor (identical in both apps):
     <span class="tip-wrap">
       <button class="tip" popovertarget="tip-x">?</button>
       <span id="tip-x" popover class="tip-pop">
         <span class="tip-pop-head"> title + × </span>
         <span class="tip-pop-body"> the explanation </span>
       </span>
     </span>
   The bubble is a NATIVE POPOVER. The browser puts an open popover in
   the top layer — .table-scroll overflow, sticky headers and the drawer
   can never clip or cover it — and closes it on outside tap, Escape,
   or the × (a second popovertarget with action=hide). None of that
   needs JavaScript, which keeps PayRoar.Public zero-script.
   Why not the old bubble: it only lived while the ? had FOCUS and sat
   at the bottom of the LAYOUT viewport. On phones that meant it died
   the moment iOS moved focus (keyboard dismissing, the Done bar) and,
   while the keyboard was still collapsing, landed below the visual
   viewport — testers had to scroll to find it, and it never said
   which field it was about. A popover persists until dismissed and
   carries the field's name as its heading.
   Layout: ≤900px a BOTTOM SHEET over a dimmed backdrop (thumb reach,
   safe-area aware, no positioning guesswork); >900px a card ANCHORED
   under the ? where the browser has CSS anchor positioning (the
   invoker is the popover's implicit anchor — no anchor names needed),
   else centred in the viewport over a light backdrop.
   Duplicated verbatim in the other app's app.css — keep them in sync.
   ============================================================ */
.tip-wrap { display: inline; }
.tip {
    position: relative;               /* for the ::before touch target */
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-left: 5px; padding: 0;
    border: 1px solid var(--hair); border-radius: 50%;
    background: var(--card);
    font-family: inherit; font-size: 10px; font-weight: 700; line-height: 1;
    color: var(--ink-faint);
    cursor: help; user-select: none; vertical-align: middle;
    transition: background .12s, color .12s, border-color .12s;
}
/* The 16px circle stays visually small; the tap target is ≥36px. */
.tip::before { content: ""; position: absolute; inset: -10px; }
.tip:hover, .tip:focus-visible,
.tip-wrap:has(.tip-pop:popover-open) > .tip {
    background: var(--brand-wash); color: var(--brand); border-color: var(--brand);
}
.tip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.tip-pop {
    /* Reset the UA popover box AND what the DOM parent would hand down —
       inherited properties still inherit into the top layer, and a
       .stat .k parent is uppercase/letter-spaced, a th is .67rem. */
    margin: auto; padding: 0; border: 1px solid var(--hair);
    width: min(360px, calc(100vw - 24px));
    background: var(--card); color: var(--ink);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(22, 35, 58, .22);
    font-family: var(--ui); font-size: .84rem; font-weight: 400; line-height: 1.5;
    text-align: left; text-transform: none; letter-spacing: normal;
    white-space: normal; cursor: auto; user-select: text;
    overflow: auto;
}
.tip-pop:popover-open { display: block; animation: tip-pop .16s ease-out; }
.tip-pop::backdrop { background: rgba(22, 35, 58, .18); }
.tip-pop-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px 0;
}
.tip-pop-title { font-weight: 700; font-size: .86rem; color: var(--ink); }
.tip-pop-close {
    flex: none; width: 28px; height: 28px; margin: -4px -6px 0 0; padding: 0;
    border: 0; border-radius: 50%; background: transparent;
    color: var(--ink-faint); font-family: inherit; font-size: 20px; line-height: 1;
    cursor: pointer;
}
.tip-pop-close:hover, .tip-pop-close:focus-visible { background: var(--paper); color: var(--ink); }
.tip-pop-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tip-pop-body { display: block; padding: 6px 14px 14px; color: var(--ink-soft); }

/* Desktop, browsers with CSS anchor positioning: sit under the ?,
   flipping above / leftward when the viewport edge is near. */
@supports (position-area: block-end) {
    @media (min-width: 901px) {
        .tip-pop {
            position: absolute; inset: auto; margin: 6px 0 0;
            position-area: block-end span-inline-end;
            position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
        }
        .tip-pop::backdrop { background: transparent; }
    }
}

/* Phones and tablets: a bottom sheet. */
@media (max-width: 900px) {
    .tip-pop {
        position: fixed; inset: auto 0 0 0; margin: 0;
        width: auto; max-height: 70dvh;
        border-radius: 16px 16px 0 0; border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -12px 40px rgba(9, 20, 40, .35);
    }
    .tip-pop:popover-open { animation: tip-sheet .2s ease-out; }
    .tip-pop::backdrop { background: rgba(9, 20, 40, .42); }
    .tip-pop-head { padding: 16px 18px 0; }
    .tip-pop-title { font-size: 1rem; }
    .tip-pop-body { padding: 8px 18px 20px; font-size: .95rem; }
    .tip-pop-close { width: 36px; height: 36px; margin: -8px -10px 0 0; font-size: 24px; }
}

@keyframes tip-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes tip-sheet { from { opacity: .4; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tip-pop:popover-open { animation: none; } }
/* ---- Old browsers (D-107) ----------------------------------------
   No Popover API (Chrome/Edge <114, Safari/iOS <17, Firefox <125 —
   in practice iPhone 8/X on iOS 16, Windows 7/8.1 on Chrome 109,
   Big Sur Safari 16): the bubble can't open, so DEGRADE, don't hide —
   the explanation renders as a plain note right under its caption,
   the ? (which would do nothing) disappears, and the heading/× go
   too (the caption already names the field). Longer pages beat
   missing help. Must come AFTER the sheet/anchored rules above so
   `static` wins their `fixed`/`absolute`. */
@supports not selector(:popover-open) {
    .tip { display: none; }
    .tip-pop {
        display: block; position: static; inset: auto; width: auto; max-width: none;
        margin: 6px 0 4px; box-shadow: none; border-radius: 8px;
        background: var(--paper);
    }
    .tip-pop-head { display: none; }
    .tip-pop-body { padding: 8px 10px; font-size: .8rem; }
}

/* The outdated-browser notice (D-107): markup sits at the top of the
   anonymous layouts (Web's PublicLayout, Public's MarketingShell) and
   is INVISIBLE in any browser that can open a popover — the same
   feature test as above, so the notice and the fallback flip
   together. Zero JavaScript: it must work on the public site and
   before any circuit connects. */
.old-browser { display: none; }
@supports not selector(:popover-open) {
    .old-browser {
        display: block;
        background: var(--warn-wash); color: var(--warn);
        border-bottom: 1px solid #E8D9B4;
        padding: 10px 16px; font-size: .85rem; line-height: 1.45; text-align: center;
    }
}

/* ---------- Scrollbar (webkit) — quiet, matches the paper ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C4CEDB; border-radius: 6px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: #A9B5C6; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Print: the browser's Print on any page should produce
   something an accountant could file — chrome hidden, cards flat. */
@media print {
    .sidebar, .topbar, .btn { display: none !important; }
    body { background: #fff; }
    .card, .doc { box-shadow: none; border-color: #ccc; }
    .content { padding: 0; max-width: none; }
}

/* ============================================================
   APP SHELL — MOBILE (2026-08-13). One breakpoint story:
     ≤900px  — sidebar becomes a slide-in DRAWER over a dimmed
               backdrop; topbar compacts and wraps; touch targets
               grow; inputs go to 16px (below that iOS zooms the
               whole page on focus).
     ≤720px  — grids collapse, paddings tighten further.
   The 900px figure is mirrored in wwwroot/js/viewport.js — change
   them together.
   ============================================================ */
@media (max-width: 900px) {
    /* Belt-and-braces overflow guard: one un-wrapped button row used to
       force the WHOLE page wider than the phone (first mobile bug
       report, 2026-08-13 — the Payroll History actions). The real rows
       are fixed to wrap; this clip means any future stray row clips at
       the edge instead of panning the entire layout sideways. Inner
       wide content still scrolls — .table-scroll has its own overflow. */
    html, body { overflow-x: clip; }

    /* ---- The drawer ---- */
    .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 40;
        height: 100dvh;              /* dvh: tracks the iOS collapsing URL bar */
        width: min(300px, 85vw);
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: none;
    }
    /* Override the desktop display:none — the drawer must stay in the
       DOM (off-canvas) for the slide transition to have a start point. */
    .shell.sidebar-closed .sidebar { display: flex; }
    .shell.sidebar-open .sidebar {
        transform: none;
        box-shadow: 0 0 48px rgba(9, 20, 40, .45);
    }
    .nav-backdrop {
        position: fixed; inset: 0; z-index: 35;
        background: rgba(9, 20, 40, .45);
        animation: backdrop-in .2s ease;
    }
    /* Thumb-sized nav rows while the sidebar is a touch surface. */
    .nav a, .nav-link { padding: 12px; font-size: 1rem; }
    .nav-link.nav-cta, .nav-link.nav-featured { padding: 11px 12px; }

    /* ---- Topbar: compact, two tidy rows ----
       Row 1: hamburger + the company switcher stretched edge-to-edge
       (it truncated at 52vw before — tester feedback 2026-08-13).
       Row 2: the action buttons, pushed to the RIGHT edge (a lone
       wrapped flex line sits left under space-between without the
       margin-left:auto). */
    .topbar {
        height: auto; min-height: 48px;
        padding: 6px 12px; gap: 4px 8px;
        flex-wrap: wrap;
    }
    .topbar .ctx { min-width: 0; }
    .topbar .topbar-left { flex: 1 1 100%; }
    .topbar .topbar-left .ctx { flex: 1; min-width: 0; }
    .topbar .topbar-left .ctx > span { width: 100%; }
    .topbar .topbar-right { margin-left: auto; }
    .hide-narrow { display: none !important; }
    .sidebar-toggle { width: 40px; height: 40px; font-size: 1.1rem; }
    /* .topbar prefix is LOAD-BEARING: the base select.company-switch
       rule (max-width: min(260px, 40vw)) is defined LATER in this file,
       so an equal-specificity mobile rule here would lose on source
       order and the switcher would stay truncated. */
    .topbar select.company-switch {
        flex: 1 1 auto; width: 100%; min-width: 0; max-width: none;
    }

    /* ---- Touch targets + iOS focus-zoom guard ---- */
    .btn { min-height: 42px; }
    .btn-sm { min-height: 36px; }
    .field input, .field select, select.input, input.input,
    select.company-switch, select.role-select, textarea {
        font-size: 16px;
    }

    /* Run-detail actions: once the page-head stacks (title above,
       actions below), CENTER the whole group — right-alignment only
       made sense beside the H1 (tester feedback 2026-08-14). */
    .run-actions { align-items: center; flex-basis: 100%; }
    .run-actions-row { justify-content: center; }
    /* "Download as:" heads its own line on phones, buttons below it —
       inline-beside-a-button read as part of the button row (tester
       feedback 2026-08-14). flex-basis:100% forces the wrap; the
       desktop padding-top that aligned it with button text would sit
       it off-center here. */
    .run-actions .run-actions-label {
        flex-basis: 100%; text-align: center; padding-top: 0;
    }

    /* ---- Tables: tighter cells; .table-scroll already provides the
       horizontal swipe for wide tables ---- */
    table.data th { padding: 10px 12px; }
    table.data td { padding: 11px 12px; }

    /* Toasts never wider than the phone. */
    .toast-stack { left: 18px; align-items: stretch; }
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 720px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
    .content { padding: 16px 14px; }
    .card-pad { padding: 18px 16px; }
    .page-head { margin-bottom: 18px; }
    h1 { font-size: 1.35rem; }
    .doc-body { padding: 20px 16px; }
    .danger-zone { padding: 12px 14px; }
    .pager { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================
   MARKETING SITE (public pages: /, /pricing, /who-its-for,
   /for/{industry}, /login). Prefix: mk-. Shares the tokens above,
   so re-theming :root re-themes these pages too.
   ============================================================ */

/* The marketing body sits on the cool blue-grey paper, not white —
   white is reserved for cards and deliberate .mk-band-light bands, so
   sections alternate paper → white → navy instead of white-on-white. */
.mk { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }

/* Full-width color bands. Usage: <section class="mk-band-light">
   <div class="mk-section">…</div></section> — the band paints the
   background edge-to-edge, the inner .mk-section keeps the content
   column. Same pattern as mk-hero / mk-honest / mk-cta. */
.mk-band-light { background: var(--card);
    border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft); }
.mk-band-dark { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); }
.mk-band-dark .mk-h2 { color: #fff; }
.mk-band-dark .mk-eyebrow { color: var(--accent); }
.mk-band-dark .mk-tile { background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.14); box-shadow: none; }
.mk-band-dark .mk-tile h3 { color: #fff; }
.mk-band-dark .mk-tile p { color: rgba(255,255,255,.72); }
.mk-band-dark .mk-tile .ico { background: rgba(255,255,255,.12); color: var(--accent); }

/* ---------- Header ---------- */
.mk-header {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 18px 48px;
    border-bottom: 1px solid var(--hair-soft);
    background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 20;
}
.mk-wordmark { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ink); }
.mk-wordmark span { color: var(--accent); }
.mk-nav { display: flex; align-items: center; gap: 26px; }
.mk-nav a { color: var(--ink-soft); font-weight: 600; font-size: .92rem; }
.mk-nav a:hover, .mk-nav a.active { color: var(--brand); }
.mk-header .actions { display: flex; align-items: center; gap: 10px; }

/* Header dropdown ("Who it's for") — pure CSS: opens on hover or
   keyboard focus (focus-within covers tabbing), so it works even
   before Blazor's circuit connects. The panel's transparent top
   padding bridges the gap below the trigger, keeping :hover alive
   while the cursor travels down to the menu. */
.mk-dd { position: relative; }
.mk-dd-trigger {
    font-family: var(--ui); font-size: .92rem; font-weight: 600;
    color: var(--ink-soft); background: none; border: none; cursor: pointer;
    padding: 0; display: inline-flex; align-items: center; gap: 5px;
}
.mk-dd-trigger .caret { font-size: .68rem; }
.mk-dd:hover .mk-dd-trigger, .mk-dd:focus-within .mk-dd-trigger,
.mk-dd-trigger.active { color: var(--brand); }
.mk-dd-panel { position: absolute; top: 100%; left: -14px; padding-top: 12px;
    display: none; z-index: 30; }
.mk-dd:hover .mk-dd-panel, .mk-dd:focus-within .mk-dd-panel { display: block; }
.mk-dd-card { background: var(--card); border: 1px solid var(--hair);
    border-radius: var(--r-sm); box-shadow: var(--shadow-lift);
    padding: 8px; min-width: 230px; display: flex; flex-direction: column; }
.mk-dd-card a { padding: 9px 12px; border-radius: 7px; color: var(--ink);
    font-weight: 600; font-size: .9rem; }
.mk-dd-card a:hover { background: var(--brand-wash); color: var(--brand); }

/* ---------- Signed-out confirmation banner ----------
   Rendered once on "/" after /account/logout (cookie handshake — see
   Home.razor). Auto-dismisses: the animation holds it ~4s, then fades
   it out and hides it for good ("forwards" keeps the final frame).
   pointer-events none so it can never block clicks on the page. */
.mk-signout-banner {
    position: fixed; top: 78px; left: 50%;
    z-index: 15;                       /* under the sticky header (20) */
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ok-wash); color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
    border-radius: 999px; padding: 9px 20px;
    font-size: .9rem; font-weight: 600;
    box-shadow: var(--shadow-lift);
    pointer-events: none;
    animation: mk-signout 4.5s ease forwards;
}
@keyframes mk-signout {
    0%   { opacity: 0; transform: translate(-50%, -10px); }
    8%   { opacity: 1; transform: translate(-50%, 0); }
    82%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 0); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    /* No motion: appear in place, vanish at the end (step-end = no fade). */
    .mk-signout-banner { animation: mk-signout-static 4.5s step-end forwards; }
}
@keyframes mk-signout-static {
    0%   { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 0); visibility: hidden; }
}

/* ---------- Shared section scaffolding ---------- */
.mk-section { max-width: 1080px; width: 100%; margin: 0 auto; padding: 72px 48px; }
.mk-section.tight { padding-top: 40px; padding-bottom: 40px; }
.mk-eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--brand); font-weight: 700; margin-bottom: 14px; }
.mk-h1 { font-size: 2.9rem; line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.mk-h2 { font-size: 1.9rem; line-height: 1.15; letter-spacing: -0.025em; font-weight: 800; margin-bottom: 12px; }
.mk-lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 560px; line-height: 1.6; }
/* Amber underline flourish on key headings — the site's signature. */
.mk-underline { position: relative; display: inline-block; }
.mk-underline::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 4px;
    height: 10px; background: var(--accent-wash); z-index: -1; border-radius: 3px; }

.btn-lg { padding: 12px 22px; font-size: 1rem; }

/* ---------- Hero ---------- */
.mk-hero {
    background:
        radial-gradient(1000px 520px at 85% -10%, #D6E5F8 0%, transparent 65%),
        radial-gradient(700px 400px at -5% 110%, var(--accent-wash) 0%, transparent 60%),
        linear-gradient(180deg, var(--brand-wash) 0%, var(--paper) 100%);
    border-bottom: 1px solid var(--hair-soft);
}
.mk-hero .mk-section { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.mk-hero-copy p { margin: 18px 0 28px; }
.mk-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mk-hero-note { margin-top: 14px; font-size: .82rem; color: var(--ink-faint); }

/* The hero visual: a stylized pay-stub card built from the .doc
   pattern — shows the product's actual output, not a stock photo. */
.mk-stub { max-width: 400px; justify-self: end; width: 100%; }
.mk-stub .doc-body { padding: 22px 26px; }
.mk-stub .who { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.mk-stub .who b { font-size: .95rem; }

/* ---------- Feature grid ---------- */
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mk-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.mk-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.mk-tile {
    background: var(--card); border: 1px solid var(--hair); border-radius: var(--r);
    box-shadow: var(--shadow); padding: 24px; transition: box-shadow .15s, transform .15s;
}
a.mk-tile { color: var(--ink); display: block; }
a.mk-tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); color: var(--ink); }
.mk-tile .ico { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-wash);
    color: var(--brand); display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; margin-bottom: 14px; font-weight: 700; }
/* Inline SVG icons (Marketing/Icons.cs) inherit the .ico color. */
.ico svg { width: 20px; height: 20px; }
/* Pain tiles ("Sound familiar?") get an amber top edge — a visual cue
   that these are the problems, before the blue/white solutions. */
.mk-pains .mk-tile { border-top: 3px solid var(--accent); }
.mk-tile h3 { font-size: 1rem; margin-bottom: 8px; }
.mk-tile p { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }
.mk-tile .more { display: inline-block; margin-top: 12px; font-size: .85rem; font-weight: 700; color: var(--brand); }

/* ---------- Steps (how it works) ---------- */
.mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.mk-step { position: relative; padding: 24px; background: var(--card);
    border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow); }
.mk-step::before {
    counter-increment: step; content: counter(step);
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--brand); color: #fff; font-weight: 800; font-size: .9rem;
    margin-bottom: 14px;
}
.mk-step h3 { font-size: 1rem; margin-bottom: 8px; }
.mk-step p { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }

/* ---------- The honesty strip — deliberate anti-overselling.
   Plain statements of what the product does NOT do yet. Keep it:
   it converts skeptics and sets expectations we can meet. ---------- */
.mk-honest { background: linear-gradient(180deg, var(--accent-wash) 0%, #FDF7EA 100%);
    border-top: 1px solid #F0E3C6; border-bottom: 1px solid #F0E3C6; }
.mk-honest .mk-section { padding-top: 48px; padding-bottom: 48px; }
.mk-honest ul { list-style: none; margin: 18px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; }
.mk-honest li { font-size: .92rem; color: var(--ink-soft); padding-left: 24px; position: relative; }
.mk-honest li::before { content: '—'; position: absolute; left: 0; color: var(--ink-faint); }

/* ---------- Checklists ---------- */
.mk-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mk-check li { padding-left: 28px; position: relative; font-size: .95rem; color: var(--ink-soft); }
.mk-check li b { color: var(--ink); }
.mk-check li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--ok-wash); color: var(--ok);
    font-size: .7rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.mk-check li.no::before { content: '·'; background: var(--hair-soft); color: var(--ink-faint); font-size: 1rem; }

/* ---------- Pricing ---------- */
.mk-price-card {
    max-width: 460px; margin: 0 auto;
    background: var(--card); border: 2px solid var(--brand); border-radius: var(--r);
    box-shadow: var(--shadow-lift); padding: 34px 36px; text-align: center;
}
.mk-price-card .plan { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--brand); font-weight: 800; }
.mk-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 16px 0 4px; }
.mk-price .amt { font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 3rem; font-weight: 600; letter-spacing: -0.04em; }
.mk-price .per { color: var(--ink-faint); font-size: .95rem; }
.mk-price-plus { color: var(--ink-soft); font-size: .98rem; margin-bottom: 22px; }
.mk-price-plus b { font-family: var(--mono); }
.mk-price-card .mk-check { text-align: left; margin: 24px 0 28px; }
.mk-fineprint { font-size: .8rem; color: var(--ink-faint); margin-top: 14px; }

/* ---------- FAQ ---------- */
.mk-faq { max-width: 720px; margin: 0 auto; }
.mk-faq details { background: var(--card); border: 1px solid var(--hair);
    border-radius: var(--r-sm); padding: 16px 20px; margin-bottom: 10px;
    box-shadow: var(--shadow); }
.mk-faq details[open] { border-color: var(--brand-soft); }
.mk-faq summary { font-weight: 700; cursor: pointer; font-size: .98rem; list-style: none;
    display: flex; justify-content: space-between; align-items: center; }
.mk-faq summary::after { content: '+'; color: var(--brand); font-weight: 600; font-size: 1.2rem; }
.mk-faq details[open] summary::after { content: '–'; }
.mk-faq details p { color: var(--ink-soft); font-size: .92rem; margin: 10px 0 4px; line-height: 1.6; }

/* ---------- Industry pages ---------- */
.mk-ind-hero { background:
    radial-gradient(900px 440px at 90% -20%, #D6E5F8 0%, transparent 62%),
    linear-gradient(180deg, var(--brand-wash) 0%, var(--paper) 100%);
    border-bottom: 1px solid var(--hair-soft); }
.mk-ind-hero .mk-section { padding-top: 56px; padding-bottom: 56px;
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }

/* The highlighted stub row — the line the industry page is selling. */
.doc-row.hi { background: var(--accent-wash); border-bottom: none;
    margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 7px; }
.mk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

/* ---------- Big CTA band ---------- */
.mk-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; }
.mk-cta .mk-section { text-align: center; padding-top: 64px; padding-bottom: 64px; }
.mk-cta h2 { color: #fff; font-size: 1.9rem; letter-spacing: -0.025em; margin-bottom: 10px; }
.mk-cta p { color: rgba(255,255,255,.75); max-width: 520px; margin: 0 auto 26px; }

/* ---------- Footer ---------- */
.mk-footer { background: var(--navy-deep); color: rgba(255,255,255,.65); margin-top: auto; }
.mk-footer .mk-section { padding-top: 40px; padding-bottom: 40px;
    display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.mk-footer .mk-wordmark { color: #fff; font-size: 1.1rem; }
.mk-footer nav { display: flex; gap: 12px 22px; flex-wrap: wrap; }
.mk-footer a { color: rgba(255,255,255,.65); font-size: .85rem; }
.mk-footer a:hover { color: #fff; }
.mk-footer .legal { font-size: .75rem; color: rgba(255,255,255,.4); width: 100%; }

/* ---------- Login ---------- */
.mk-login { flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 48px 24px;
    background:
        radial-gradient(700px 380px at 75% -10%, var(--brand-wash) 0%, transparent 60%),
        var(--paper); }
.mk-login-card { width: 100%; max-width: 420px; background: var(--card);
    border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow-lift);
    padding: 40px 40px 32px; text-align: center; }
.mk-login-card .mk-wordmark { display: block; margin-bottom: 22px; }
.mk-login-card h1 { font-size: 1.35rem; margin-bottom: 8px; }
.mk-login-card .hint { color: var(--ink-soft); font-size: .9rem; margin: 0 0 24px; line-height: 1.55; }
/* One-shot failed-sign-in notice (cookie handshake — see OnRemoteFailure
   in AuthenticationSetup + Login.razor). Amber = attention, not danger:
   the user did nothing wrong. */
.mk-login-card .mk-login-notice { background: var(--warn-wash); color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
    border-radius: 8px; padding: 10px 14px; font-size: .88rem; font-weight: 600;
    text-align: left; margin: 0 0 18px; }
.mk-login-card .btn { width: 100%; justify-content: center; }
.mk-login-card .alt { margin-top: 18px; font-size: .85rem; color: var(--ink-faint); }
.mk-login-foot { text-align: center; padding: 18px; font-size: .75rem; color: var(--ink-faint); }

/* ---------- Mobile menu (≤880px) ----------
   Pure CSS via <details> — like the desktop dropdown it must work
   before Blazor's circuit connects (marketing pages render statically).
   Hidden on desktop; replaces .mk-nav on phones so Pricing and the
   industry pages stay reachable (they used to just vanish). */
.mk-burger { display: none; position: relative; }
.mk-burger summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--hair); border-radius: var(--r-sm);
    font-size: 1.15rem; color: var(--ink-soft);
    user-select: none;
}
.mk-burger summary::-webkit-details-marker { display: none; }
.mk-burger[open] summary { background: var(--brand-wash); color: var(--brand); border-color: var(--brand-soft); }
.mk-burger-panel {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
    min-width: 230px; max-height: min(70vh, 480px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--hair);
    border-radius: var(--r-sm); box-shadow: var(--shadow-lift);
    padding: 8px; display: flex; flex-direction: column;
}
.mk-burger-panel a { padding: 11px 12px; border-radius: 7px; color: var(--ink);
    font-weight: 600; font-size: .95rem; }
.mk-burger-panel a:hover { background: var(--brand-wash); color: var(--brand); }
.mk-burger-panel .group { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink-faint); font-weight: 700; padding: 12px 12px 4px; }

/* ---------- Marketing responsive ---------- */
@media (max-width: 880px) {
    .mk-header { padding: 12px 16px; gap: 12px; }
    .mk-nav { display: none; }   /* replaced by .mk-burger on phones */
    .mk-burger { display: block; }
    .mk-header .actions { gap: 8px; }
    /* One clear action in the compact header: "Sign in", styled as the
       primary button (rules mirror .btn-primary — keep in sync); "Get
       started" moves into the burger's Account group (2026-09-04). */
    .mk-header .actions .mk-getstarted { display: none; }
    .mk-header .actions .mk-signin { background: var(--brand);
    color: #fff;
    box-shadow: 0 1px 2px rgba(31,78,150,.35), inset 0 1px 0 rgba(255,255,255,.12); }
    .mk-header .actions .mk-signin:hover { background: var(--brand-deep); color: #fff; }
    .mk-section { padding-left: 22px; padding-right: 22px; padding-top: 48px; padding-bottom: 48px; }
    .mk-h1 { font-size: 2.1rem; }
    .mk-h2 { font-size: 1.5rem; }
    .mk-hero .mk-section, .mk-ind-hero .mk-section { grid-template-columns: 1fr; gap: 32px; }
    .mk-stub { justify-self: start; }
    .mk-grid, .mk-grid.cols-2, .mk-grid.cols-4, .mk-steps { grid-template-columns: 1fr; }
    .mk-pair { grid-template-columns: 1fr; }
    .mk-honest ul { grid-template-columns: 1fr; }
}

/* ---------- Toasts (audit §F save confirmations) ----------
   Rendered by Components/Shared/ToastHost.razor (one instance, in
   MainLayout). Bottom-right so they never cover the topbar actions or
   the feedback panel (top-right). Click dismisses; the service
   auto-dismisses after a few seconds. */
.toast-stack {
    position: fixed; right: 18px; bottom: 18px; z-index: 60;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
    display: flex; align-items: center; gap: 8px;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--hair); border-left: 3px solid var(--ok);
    border-radius: var(--r-sm); box-shadow: var(--shadow-lift);
    padding: 10px 14px; font-size: 14px; font-weight: 600;
    cursor: pointer; user-select: none;
    animation: toast-in .18s ease-out;
}
.toast-check { color: var(--ok); font-weight: 700; }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Topbar company switcher (audit §F) ---------- */
select.company-switch {
    font: inherit; font-weight: 700; color: var(--ink);
    background: var(--card); border: 1px solid var(--hair);
    border-radius: var(--r-sm); padding: 4px 8px;
    max-width: min(260px, 40vw); cursor: pointer;
}
select.company-switch:hover { border-color: var(--brand-soft); }

/* Members panel access-level dropdowns (D-029) — the compact cousin
   of .company-switch, sized to sit inside table rows and the add-row. */
select.role-select {
    font: inherit; font-size: .88rem; color: var(--ink);
    background: var(--card); border: 1px solid var(--hair);
    border-radius: var(--r-sm); padding: 4px 8px; cursor: pointer;
}
select.role-select:hover { border-color: var(--brand-soft); }

/* ---------- Employee portal (D-028) ----------
   The employee-facing side wears the same design system but a
   different shape: no sidebar, one centred column, big friendly
   stat cards. Phones first — most employees will open their stubs
   from a text or email on a phone. */
.portal-shell {
    min-height: 100vh;
    display: flex; flex-direction: column;
    background: var(--paper);
}
.portal-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 14px clamp(16px, 4vw, 28px);
    background: var(--card); border-bottom: 1px solid var(--hair);
}
.portal-brand {
    font-weight: 800; font-size: 1.1rem; color: var(--ink);
    display: flex; align-items: baseline; gap: 8px;
}
.portal-brand .dot { color: var(--accent); }
.portal-brand-sub { font-weight: 600; font-size: .85rem; color: var(--ink-faint); }
.portal-topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.portal-topbar-email { color: var(--ink-faint); font-size: .82rem; }

.portal-main {
    width: 100%; max-width: 860px;
    margin: 0 auto; padding: clamp(16px, 4vw, 28px);
    flex: 1;
}
.portal-foot {
    text-align: center; color: var(--ink-faint); font-size: .78rem;
    padding: 18px; border-top: 1px solid var(--hair-soft);
}

.portal-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.portal-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.portal-section-title { margin: 22px 0 10px; font-size: 1.05rem; }

/* Employment chooser cards (multi-employer logins). */
.portal-employments { display: flex; flex-direction: column; gap: 10px; }
.portal-employment-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; color: var(--ink);
}
.portal-employment-card:hover { box-shadow: var(--shadow-lift); color: var(--ink); }
.portal-chevron { color: var(--ink-faint); font-size: 1.3rem; margin-left: 8px; }

/* Stat cards: auto-fill grid — two-up on phones, more on desktop. */
.portal-stats {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.portal-stat-value { font-size: 1.15rem; font-weight: 600; margin-top: 2px; }

.portal-notice {
    border-left: 3px solid var(--accent);
    margin-bottom: 14px;
}

.portal-claim { max-width: 560px; margin: 24px auto; }

/* "On file with your employer" read-only facts. */
.portal-facts { display: flex; gap: 28px; flex-wrap: wrap; }

/* Columns that don't earn their width on a phone. */
@media (max-width: 560px) {
    .portal-hide-sm { display: none; }
    .portal-topbar-email { display: none; }

    /* Marketing at true phone widths: full-width hero actions, cards
       lose the desktop-sized padding. */
    .mk-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
    .mk-login-card { padding: 28px 22px 24px; }
    .mk-price-card { padding: 26px 20px; }
}

/* ============================================================
   Paystub generator (PayRoar.Public M2) — the /paystub-generator
   page. Reuses the .field form system above; these styles only
   handle the page's two-pane layout and the no-JS mechanics.
   ============================================================ */

.gen-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
@media (max-width: 900px) {
    .gen-wrap { grid-template-columns: minmax(0, 1fr); }
    /* Phones: preview FIRST (owner request, D-052). The submit is a full
       page reload in static SSR, so landing at the top means landing on
       the freshly rendered preview instead of scrolling past the whole
       form to find it. Grid items honor `order` like flex items do. */
    .gen-preview { order: -1; margin-bottom: 18px; }
}

.gen-panel {
    background: #fff;
    border: 1px solid var(--line, #E3E8EF);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 18px;
}
/* Category headers (D-052): each panel's h3 reads as a section label —
   "Company info", "Pay info", "Delivery" — not as prose. Same eyebrow
   treatment as .mk-eyebrow, with a hairline to anchor the group.
   NUMBERED via a CSS counter (D-053, the "1. Company Information"
   pattern) — automatic, so the two generators' different panel counts
   both come out right; the buy panel opts out (it isn't a form step). */
.gen-form { counter-reset: gen-step; }
.gen-panel h3 {
    margin: 0 0 16px;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--brand);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line, #E3E8EF);
}
.gen-panel h3::before {
    counter-increment: gen-step;
    content: counter(gen-step) ".\00a0\00a0";
}
.gen-buy h3::before { counter-increment: none; content: none; }
.gen-panel .hint { font-size: .8rem; color: var(--ink-faint, #64748B); margin: -8px 0 14px; }

/* Two fields side by side (rate + hours, city + postal). */
.gen-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 14px;
}
@media (max-width: 560px) {
    .gen-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Pay-type choice: two radio cards. The NO-JS TOGGLE below shows
   the matching field group — this site ships no scripts (App.razor),
   so the swap is pure CSS via :has(). */
.gen-paytype { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.gen-paytype label {
    display: flex; align-items: center; gap: 8px;
    border: 1.5px solid var(--line, #E3E8EF); border-radius: 10px;
    padding: 10px 16px; cursor: pointer; font-weight: 650; font-size: .92rem;
}
.gen-paytype label:has(input:checked) {
    border-color: var(--brand); background: var(--brand-wash, #EEF3FE);
}
.gen-hourly, .gen-salaried, .gen-hours { display: none; }
.gen-form:has(input.pt-hourly:checked)   .gen-hourly   { display: block; }
.gen-form:has(input.pt-salaried:checked) .gen-salaried { display: block; }
/* BC-only fields (double-time OT): shown only when the BC province
   radio is checked — the same pure-CSS reveal as the pay-type swap,
   nested inside .gen-hourly so both radios must agree. */
.gen-bc { display: none; }
.gen-form:has(input.pv-bc:checked) .gen-bc { display: block; }
/* The hours field serves hourly (required) AND no-base pay (optional —
   powers the piece-work minimum-wage check); CSS also swaps its label. */
.gen-form:has(input.pt-hourly:checked) .gen-hours,
.gen-form:has(input.pt-none:checked)   .gen-hours { display: block; }
.gen-hours .lbl-none { display: none; }
.gen-form:has(input.pt-none:checked) .gen-hours .lbl-hourly { display: none; }
.gen-form:has(input.pt-none:checked) .gen-hours .lbl-none   { display: block; }

/* Opening-YTD block folds away — most users are generating a first
   cheque and should not meet five extra inputs. */
.gen-ytd summary { cursor: pointer; font-weight: 650; font-size: .92rem; color: var(--brand); }
.gen-ytd[open] summary { margin-bottom: 14px; }

/* Preview column */
.gen-preview { position: sticky; top: 20px; }
@media (max-width: 900px) { .gen-preview { position: static; } }
.gen-preview img {
    display: block;
    /* Capped so the sticky column (summary + buy panel + image) fits one
       viewport — an over-tall sticky column's bottom is unreachable
       until the page's end. Aspect ratio is preserved; the paid PDF is
       the full-size artifact. */
    max-width: 100%; max-height: 45vh; width: auto; height: auto;
    margin: 0 auto;
    border: 1px solid var(--line, #E3E8EF); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 33, 66, .10);
    background: #fff;
}
.gen-summary {
    display: flex; gap: 18px; flex-wrap: wrap;
    margin: 14px 0 6px; font-size: .9rem;
}
.gen-summary b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* Click-to-enlarge lightbox (D-053) — no JS: a hidden checkbox toggled
   by its label. Unchecked, the label is just the preview thumbnail;
   checked, the SAME label goes fullscreen and the one <img> inside it
   scales up (one element, so the heavy data-URI image is never
   duplicated in the HTML). Clicking anywhere on the overlay unchecks. */
.gen-zoom-toggle { display: none; }
.gen-zoom { display: block; cursor: zoom-in; }
/* Save-deterrent (owner request, D-053 round 2): the preview image is
   transparent to hit-testing, so right-click lands on the label behind
   it (no "Save image as…"), it can't be dragged to the desktop, and
   iOS long-press gets no callout. A DETERRENT, not protection — the
   tiled PAYROAR.CA watermark is what actually guards the preview;
   clicks still toggle the lightbox because the label catches them. */
.gen-zoom img {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}
.gen-zoom-toggle:checked + .gen-zoom {
    position: fixed; inset: 0; z-index: 1000;
    margin: 0; padding: 20px;
    background: rgba(15, 23, 42, .86);
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out;
}
.gen-zoom-toggle:checked + .gen-zoom img {
    width: auto;
    max-width: min(94vw, 860px);
    max-height: 94vh;
    border-radius: 6px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.gen-alert {
    background: #FDF2F2; border: 1px solid #EFC7C7; color: #8C2F2F;
    border-radius: 10px; padding: 12px 16px; font-size: .9rem; margin-bottom: 16px;
}
.gen-fineprint { font-size: .78rem; color: var(--ink-faint, #64748B); margin-top: 12px; line-height: 1.55; }

/* Buy panel + terms page (M3) */
.gen-buy { border-color: var(--brand); }
.gen-price {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .95rem; margin-bottom: 14px;
}
.gen-price b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.25rem; }
.gen-attest {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .82rem; line-height: 1.5; margin-bottom: 14px; cursor: pointer;
}
.gen-attest input { margin-top: 3px; flex: none; }
.gen-terms h3 { margin: 26px 0 8px; font-size: 1rem; }
.gen-terms p { font-size: .92rem; line-height: 1.65; color: var(--ink-soft, #3F4C63); }

/* Legal pages (/privacy, /terms — D-075): sectioned prose. The
   selling pages never use bare h2/p like this, so the legal look
   lives behind one wrapper class instead of styling tags globally. */
.mk-legal h2 {
    font-size: 1.05rem; font-weight: 800; color: var(--ink);
    margin: 34px 0 10px; letter-spacing: -.01em;
}
.mk-legal p { font-size: .95rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 12px; }
.mk-legal p b, .mk-legal li b { color: var(--ink); }
.mk-legal ul { margin: 0 0 12px 20px; padding: 0; }
.mk-legal li { font-size: .95rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: 6px; }
.mk-legal a { color: var(--brand); }

/* Terms list (one formal line per point) */
.gen-terms-list { margin: 26px 0 0 20px; padding: 0; }
.gen-terms-list li {
    font-size: .92rem; line-height: 1.6; color: var(--ink-soft, #3F4C63);
    margin-bottom: 12px; padding-left: 6px;
}

/* Exemption checkboxes on the generator's Pay panel */
.gen-check {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .82rem; line-height: 1.5; margin-top: 10px; cursor: pointer;
    color: var(--ink-soft, #3F4C63);
}
.gen-check input { margin-top: 3px; flex: none; }

/* Net-to-gross solve note above the preview summary */
.gen-solve-note {
    background: var(--brand-wash, #EEF3FE); border: 1px solid var(--brand);
    border-radius: 10px; padding: 10px 14px; font-size: .85rem;
    margin-bottom: 12px; line-height: 1.5;
}