/* ================================================================
   KANOON MITRA SOLUTIONS — LABOUR LAW COMPLIANCE PORTAL
   Shared Design System — confident blue, deep navy surfaces, soft rounded
   corners, Archivo throughout (no serif).
   Loaded by: index.html (public homepage), login.html, dashboard.html, every file under
   /registers/, and the nav-shim injected into /tools/*.html
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

/* Public marketing header (index.html, faq.html, and any other public page reusing this
   markup) — lives here, not per-page, so every page gets the same sized logo/nav instead of
   an unstyled <header class="pub-header"> rendering a full-resolution logo image. */
.pub-header { background: var(--ink); border-bottom: 2px solid var(--gold); position: sticky; top: 0; z-index: 100; }
.pub-header.pm-scrolled { border-bottom-color: var(--gold); }
.pub-header-inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; transition: padding .3s var(--pm-ease); }
.pub-header.pm-scrolled .pub-header-inner { padding: 7px 24px; }
.pub-header.pm-scrolled .pub-header-brand img { height: 32px; }
.pub-header-brand img { transition: height .3s var(--pm-ease); }
.pub-header-brand { display: flex; align-items: center; gap: 12px; }
.pub-header-brand .logo-plate { background: #fff; padding: 4px 7px; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.pub-header-brand img { height: 40px; width: auto; display: block; }
.pub-header-brand .name { font-family: 'Archivo', sans-serif; font-weight: 800; color: #fff; font-size: 15px; line-height: 1.2; }
.pub-header-brand .tag { font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.45); }
.pub-header-nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pub-header-nav a { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.8); text-decoration: none; padding: 8px 12px; border-radius: var(--radius); white-space: nowrap; transition: background .2s ease, color .2s ease; }
.pub-header-nav a:hover { background: rgba(26,86,219,.22); color: var(--gold-light); }
.pub-topbar { background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.12); }
.pub-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 6px 24px; display: flex; gap: 20px; font-size: 11.5px; color: rgba(255,255,255,.7); }
.pub-topbar-inner a { color: rgba(255,255,255,.7); text-decoration: none; }
.pub-topbar-inner a:hover { color: var(--gold-light); }
@media (max-width: 560px) { .pub-topbar-inner { gap: 12px; padding: 6px 16px; } }
.pub-lang-switch { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.pub-lang-btn { background: none; border: none; color: rgba(255,255,255,.55); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.pub-lang-btn:hover { color: var(--gold-light); }
.pub-lang-btn.pm-active { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .pub-topbar-inner span[style*="margin-left:auto"] { display: none; } }
.pub-nav-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; width: 38px; height: 34px; border-radius: var(--radius); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.pub-nav-toggle span { display: block; width: 18px; height: 2px; background: #fff; }
.pub-mobile-nav { display: none; }
/* The canonical bar carries five hubs plus Pricing, Login and the call button. Below ~1180px
   that wraps onto two and then three lines, which reads as a broken header rather than a dense
   one — so the drawer takes over earlier than the old 900px breakpoint, while it is still a
   deliberate choice rather than a collapse. */
@media (max-width: 1180px) {
    .pub-header-nav { display: none; }
    .pub-nav-toggle { display: flex; }
    .pub-mobile-nav.pm-open { display: flex; flex-direction: column; width: 100%; background: var(--ink); border-top: 1px solid rgba(255,255,255,.14); padding: 6px 0; }
    .pub-mobile-nav a, .pub-mobile-nav button.pub-m-cat { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85); text-decoration: none; padding: 13px 24px; border-bottom: 1px solid rgba(255,255,255,.08); background: none; border-left: none; border-right: none; border-top: none; text-align: left; width: 100%; cursor: pointer; }
    .pub-mobile-nav .pub-m-sub { display: none; flex-direction: column; background: rgba(255,255,255,.04); }
    .pub-mobile-nav .pub-m-sub.pm-open { display: flex; }
    .pub-mobile-nav .pub-m-sub a { padding-left: 40px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); }
    .pub-mobile-nav a.p-btn { margin: 12px 24px; }
}

:root {
    /* Brand ink & accent — deep navy surfaces, vibrant blue accent */
    --ink: #0f1f3d;
    --ink-2: #24406b;
    --gold: #1a56db;
    --gold-light: #7ba3ef;
    --gold-pale: #eaf1fd;
    --gold-dark: #123d99;
    --cream: #f4f6fb;

    /* Status — cooler tones to sit with the blue */
    --red: #dc2626;
    --red-pale: #fdecec;
    --green: #16a34a;
    --green-pale: #eafbf0;
    --orange: #b45309;
    --orange-pale: #fef3e2;
    --blue: #0891b2;
    --blue-pale: #e5f7fa;

    /* Neutrals */
    --border: color-mix(in srgb, #0f1f3d 22%, transparent);
    --muted: #5b6472;
    --white: #ffffff;

    --shadow: 0 1px 2px color-mix(in srgb, #0f1f3d 10%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #0f1f3d 18%, transparent);
    --radius: 10px;
    --radius-lg: 14px;
}

* { box-sizing: border-box; }

body.portal-body {
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    background: var(--cream);
    color: var(--ink);
    min-height: 100vh;
}

a { color: var(--gold-dark); }
a:hover { color: var(--gold); }

/* ---------- TOP BAR (shared across every page) ---------- */
.portal-topbar {
    background: var(--ink);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 24px;
    border-bottom: 2px solid var(--gold);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 200;
}
.portal-topbar-left { display: flex; align-items: center; gap: 12px; }
.portal-topbar-logo { height: 40px; width: auto; display: flex; align-items: center; flex-shrink: 0; background: #fff; padding: 4px 6px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.portal-topbar-logo img { height: 100%; width: auto; object-fit: contain; display: block; }
.portal-topbar-firm { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px; color: #fff; line-height: 1.2; }
.portal-topbar-sub { font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.portal-topbar-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.portal-topbar-nav a, .portal-topbar-nav button {
    font-family: 'Archivo', sans-serif;
    font-size: 11.5px; font-weight: 600;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    padding: 7px 12px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.portal-topbar-nav a:hover, .portal-topbar-nav button:hover {
    background: rgba(26,86,219,0.22);
    border-color: rgba(26,86,219,0.5);
    color: #fff;
}
.portal-topbar-nav a.current { background: rgba(26,86,219,0.3); color: #fff; border-color: var(--gold); }
.portal-topbar-user { font-size: 11px; color: rgba(255,255,255,0.5); margin-left: 8px; }
.portal-topbar-sub-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 3px 9px; border-radius: 20px; margin-left: 8px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.65); }
.portal-topbar-sub-badge.active { background: rgba(22,163,74,.25); color: #a8e6bd; }
.portal-topbar-sub-badge.none { background: rgba(220,38,38,.22); color: #f3b0b0; }

/* ---------- COMPANY PROFILE PICKER (in the topbar) ---------- */
.cp-picker { display: flex; align-items: center; gap: 6px; margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,0.15); }
.cp-picker select {
    font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600; max-width: 340px;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9);
    border: 1px solid rgba(26,86,219,0.5); border-radius: var(--radius); padding: 5px 8px; cursor: pointer;
}
.cp-picker select:hover { border-color: var(--gold); }
.cp-picker a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 13px; padding: 4px; border-radius: var(--radius); }
.cp-picker a:hover { color: #fff; background: rgba(26,86,219,0.22); }
@media (max-width: 720px) { .cp-picker { margin-left: 0; padding-left: 0; border-left: none; } .cp-picker select { max-width: 200px; } }

/* ---------- SHELL / LAYOUT ---------- */
.portal-shell { max-width: 1200px; margin: 0 auto; padding: 28px 24px 60px; }
.portal-page-head { margin-bottom: 24px; }
.portal-page-head h1 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 26px; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em; }
.portal-page-head p { font-size: 13px; color: var(--muted); margin: 0; }
.portal-page-head.center-head { text-align: center; }
.portal-page-head.center-head p { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---------- CARDS ---------- */
.p-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 20px;
}
.p-card-head {
    padding: 14px 20px;
    background: var(--ink);
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Archivo', sans-serif;
    font-size: 15px;
    font-weight: 800;
}
.p-card-head .icon { font-size: 18px; display: inline-flex; }
.p-card-head .icon svg { width: 18px; height: 18px; }
.p-card-body { padding: 20px; }

/* ---------- BUTTONS ---------- */
.p-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 800;
    padding: 9px 16px; border-radius: var(--radius); border: 1.5px solid transparent;
    cursor: pointer; transition: all .15s; text-decoration: none; white-space: nowrap;
    justify-content: flex-start;
}
.p-btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.p-btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.p-btn-outline { background: transparent; color: var(--ink); border-color: var(--border); }
.p-btn-outline:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-pale); }
.p-btn-danger { background: var(--red-pale); color: var(--red); border-color: var(--red); }
.p-btn-danger:hover { background: var(--red); color: #fff; }
.p-btn-green { background: var(--green-pale); color: var(--green); border-color: var(--green); }
.p-btn-green:hover { background: var(--green); color: #fff; }
.p-btn:disabled { opacity: .45; cursor: not-allowed; }
.p-btn-sm { padding: 6px 11px; font-size: 11px; }
.p-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- FORM FIELDS ---------- */
.p-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.p-field label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.p-field input, .p-field select, .p-field textarea {
    height: 36px; padding: 0 11px; border: 1.5px solid var(--border); border-radius: var(--radius);
    font-size: 13px; font-family: 'Archivo', sans-serif; background: var(--cream); color: var(--ink);
}
.p-field textarea { height: auto; padding: 8px 11px; }
.p-field input:focus, .p-field select:focus, .p-field textarea:focus { outline: none; border-color: var(--gold); background: #fff; }
.p-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

/* ---------- TABLES / REGISTERS ---------- */
.p-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.p-table { border-collapse: collapse; width: 100%; font-size: 11.5px; min-width: 100%; }
table.p-table th {
    background: var(--ink); color: #fff;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
    padding: 8px 8px; text-align: left; white-space: nowrap; position: sticky; top: 0; z-index: 5;
}
table.p-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.p-table tr:nth-child(even) td { background: var(--cream); }
table.p-table tr:hover td { background: var(--gold-pale); }
table.p-table td[contenteditable="true"] { cursor: text; }
table.p-table td[contenteditable="true"]:focus { outline: 2px solid var(--gold); outline-offset: -2px; background: #fff; }

/* ---------- BADGES / TAGS ---------- */
.p-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 9.5px; font-weight: 800; letter-spacing: .3px; }
.p-badge-gold { background: var(--gold-pale); color: var(--gold-dark); border: 1px solid var(--gold); }
.p-badge-green { background: var(--green-pale); color: var(--green); border: 1px solid #a8e0bb; }
.p-badge-red { background: var(--red-pale); color: var(--red); border: 1px solid #f0b0b0; }
.p-badge-blue { background: var(--blue-pale); color: var(--blue); border: 1px solid #a9e2ec; }

/* ---------- UPLOAD ZONE ---------- */
.p-upload {
    border: 2px dashed var(--border); border-radius: var(--radius-lg);
    padding: 30px; text-align: center; cursor: pointer; transition: all .2s; background: var(--cream);
}
.p-upload:hover { border-color: var(--gold); background: var(--gold-pale); }
.p-upload .icon { font-size: 30px; margin-bottom: 8px; }
.p-upload .title { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.p-upload .hint { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.6; }

/* ---------- NOTE / DISCLAIMER STRIP ---------- */
.p-note { background: var(--gold-pale); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 10px 14px; font-size: 11.5px; color: var(--gold-dark); line-height: 1.6; }
.p-note.warn { background: var(--red-pale); border-left-color: var(--red); color: #8a1414; }

/* ---------- DASHBOARD TOOL CARDS ---------- */
.p-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.p-tool-card {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 22px; box-shadow: var(--shadow); transition: all .2s; text-decoration: none; color: inherit;
    display: block; position: relative; overflow: hidden;
}
.p-tool-card:hover { border-color: var(--gold); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.p-tool-card .icon { margin-bottom: 10px; color: var(--gold); }
.p-tool-card .icon svg { width: 28px; height: 28px; }
.p-tool-card .title { font-family: 'Archivo', sans-serif; font-size: 15.5px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.p-tool-card .desc { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.p-tool-card .tag { position: absolute; top: 14px; right: 14px; }

/* ---------- FOOTER ---------- */
.portal-footer { background: var(--ink); color: rgba(255,255,255,0.6); padding: 22px 24px; text-align: center; font-size: 10.5px; letter-spacing: .3px; line-height: 1.9; margin-top: 40px; }
.portal-footer strong { color: #fff; }

/* ---------- PRINT ---------- */
.print-area { display: none; }

@media print {
    .no-print { display: none !important; }
    body.portal-body { background: #fff; }
    .portal-shell { max-width: 100%; padding: 0; }
    .p-card { box-shadow: none; border: 1px solid #999; }
    .screen-view { display: none !important; }
    .print-area { display: block !important; }

    /* Portal chrome and data-entry aids never belong on a printed/filed page. Applies
       across every page so individual tools don't each have to remember. */
    #portal-topbar-mount, #portal-footer-mount, .portal-footer, .pub-header,
    #km-portal-nav, #howto-mount, .rt-howto,
    #kmsSheetSyncMount, #register-master-card, .p-upload,
    .p-btn:not(.print-keep), button:not(.print-keep), input[type="file"],
    .calc-btn:not(.print-keep) { display: none !important; }

    /* THE ON-SCREEN PAGE TITLE MUST NOT PRINT ON A PAGE THAT GENERATES A DOCUMENT.
       Every tool page opens with a screen heading block — "Offer Letter
       Generator", "Bulk Onboarding" — plus a sentence telling the operator what
       to upload. That is UI copy. It is not part of the instrument, and a PDF
       opening with "Offer Letter Generator — upload one row per candidate" above
       the letterhead cannot be sent to an employee or filed with an inspector.

       But it is NOT hidden unconditionally, and that distinction was learned the
       hard way in both directions:

         · Hide it everywhere, and a REFERENCE page prints untitled. The
           apprenticeship page's only heading lives here, and it carries the
           sourced NATS rate table with its gazette citation — exactly the sheet
           a consultant prints for a client. An untitled page of stipend figures
           with no indication of what it is, or who produced it, is worse than
           the operator-title problem this rule exists to solve.
         · Don't hide it at all, and every generated document carries a
           "…Generator" line the recipient cannot delete.

       So both this and .cd-hero are hidden only on pages that actually produce a
       document, two ways, both opt-in:
         1. Structurally, where a generated document exists to replace the
            heading (.print-area / .gaz-page).
         2. Explicitly, via body.doc-output — for report pages that build their
            output inline with no separate print container. A new report page
            adds that one class and inherits correct print behaviour.

       A page that generates nothing keeps its title, because on that page the
       title IS the document's heading. The adjacent operator note is scoped the
       same way, so a disclaimer meant to travel with a printed reference page
       survives. */
    body:has(.print-area) .portal-page-head,
    body:has(.gaz-page) .portal-page-head,
    body.doc-output .portal-page-head,
    body:has(.print-area) .page-head,
    body:has(.gaz-page) .page-head,
    body.doc-output .page-head,
    body:has(.print-area) .tool-head,
    body:has(.gaz-page) .tool-head,
    body.doc-output .tool-head,
    body:has(.print-area) .cd-hero,
    body:has(.gaz-page) .cd-hero,
    body.doc-output .cd-hero,
    body:has(.print-area) .pub-hero,
    body:has(.print-area) .portal-page-head + .p-note,
    body:has(.gaz-page) .portal-page-head + .p-note,
    body.doc-output .portal-page-head + .p-note { display: none !important; }

    /* A hidden control must not leave its wrapper behind as an empty bordered box. */
    .p-btn-row:empty, .p-actions:empty { display: none !important; }

    /* Anything that DOES print keeps its fills and ink — otherwise a filled cell or tinted
       header prints white-on-white and reads as a blank box. */
    body, .print-area, .print-area * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Reference/marketing panels a printout shouldn't carry. */
    .mw-wrap-gate, .pm-upsell, .cd-hero-links, .jd-quickadd { display: none !important; }

    /* Links print as plain text — a filed register full of blue underlines reads as a web
       printout, and the URL is not useful on paper. */
    a[href] { color: #000 !important; text-decoration: none !important; }

    /* Editable cells lose their affordance styling on paper. */
    [contenteditable] { outline: none !important; background: transparent !important; }
}

/* ---------- MOTION (reduced — flat system, minimal movement) ---------- */
@media (prefers-reduced-motion: no-preference) {
    @keyframes p-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .portal-shell { animation: p-fade-up .3s ease both; }
    .p-tool-grid .p-tool-card { animation: p-fade-up .3s ease both; }
    .p-tool-grid .p-tool-card:nth-child(1) { animation-delay: .02s; }
    .p-tool-grid .p-tool-card:nth-child(2) { animation-delay: .05s; }
    .p-tool-grid .p-tool-card:nth-child(3) { animation-delay: .08s; }
    .p-tool-grid .p-tool-card:nth-child(4) { animation-delay: .11s; }
    .p-tool-grid .p-tool-card:nth-child(5) { animation-delay: .14s; }
    .p-tool-grid .p-tool-card:nth-child(6) { animation-delay: .17s; }
    .p-tool-grid .p-tool-card:nth-child(7) { animation-delay: .20s; }
    .p-tool-grid .p-tool-card:nth-child(8) { animation-delay: .23s; }
    .p-tool-grid .p-tool-card:nth-child(9) { animation-delay: .26s; }
    .p-tool-grid .p-tool-card:nth-child(n+10) { animation-delay: .29s; }
}

.p-btn { transition: background .15s ease, border-color .15s ease, color .15s ease; }
.p-btn:active { transform: scale(.98); }
.p-tool-card { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
    .portal-topbar { flex-direction: column; align-items: flex-start; }
    .portal-shell { padding: 20px 14px 40px; }
}

/* --- Public page chrome (header, nav, hero, footer, cards) shared across all public pages --- */
.pub-nav-drop { position: relative; }
/* The mega panel is 860px wide, so anchoring it to its nav item pushed its right
   edge past the viewport on narrow desktops — and because it is only
   visibility:hidden, that stretched document.scrollWidth and gave every public
   page a phantom sideways scroll. It is anchored to the header instead (already
   position:sticky, so it is the containing block), which is full-width — the panel
   is therefore inside the viewport at any window size. */
.pub-nav-drop.pub-nav-mega-drop { position: static; }
.pub-mega {
    position: absolute; top: 100%; left: 16px; z-index: 150;
    width: 860px; max-width: calc(100vw - 32px); background: var(--ink); border: 2px solid var(--gold);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.pub-nav-drop:hover .pub-mega, .pub-mega.pm-open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
/* HOVER BRIDGE. The panel is anchored to the header (see above), so it opens at the header's
   bottom edge — but the nav link it belongs to sits higher, with the header's own padding in
   between. That strip is inside .pub-header and outside .pub-nav-drop, so moving the pointer
   down from the link to the panel crossed unhovered ground and the panel closed before it could
   be clicked. This invisible strip belongs to the panel, and therefore to the drop, so the path
   between the two stays hovered the whole way. */
.pub-mega::before {
    content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px;
}
/* minmax(0,1fr), not 1fr: the columns' min-width:auto let long item titles push
   the grid wider than the panel, which reintroduced the sideways page scroll. */
.pub-mega-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pub-mega-col { padding: 20px; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.pub-mega-col:nth-child(3n) { border-right: none; }
.pub-mega-head { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-light); margin-bottom: 10px; }
.pub-mega-item { display: block; text-decoration: none; padding: 6px 0; }
.pub-mega-item .t { display: block; font-size: 12.5px; font-weight: 700; color: #fff; margin-bottom: 2px; transition: color .15s ease; }
.pub-mega-item .d { font-size: 11px; color: rgba(255,255,255,.55); line-height: 1.4; }
.pub-mega-item:hover .t { color: var(--gold-light); }

/* ---------- Single-link hover preview (nav items with no dropdown) ---------- */
.pub-nav-drop.pub-nav-preview-drop { display: inline-flex; }
.pub-nav-preview {
    position: absolute; top: 100%; left: 0; z-index: 150; width: 250px;
    background: var(--ink); border: 2px solid var(--gold); padding: 16px 18px;
    display: flex; flex-direction: column; gap: 7px; text-decoration: none;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.pub-nav-drop:hover .pub-nav-preview, .pub-nav-preview.pm-open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.pub-nav-drop.pub-nav-align-right .pub-nav-preview { left: auto; right: 0; }
.pub-nav-preview .t { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 12.5px; color: #fff; line-height: 1.35; }
.pub-nav-preview .d { font-size: 11px; color: rgba(255,255,255,.6); line-height: 1.55; }
.pub-nav-preview .cta { font-size: 10.5px; font-weight: 700; color: var(--gold-light); margin-top: 2px; }
.pub-nav-preview:hover .cta { text-decoration: underline; }

.pub-advisory {
    background: var(--ink); color: #fff; border-bottom: 2px solid var(--gold);
    display: flex; align-items: center; gap: 16px;
    padding: 9px 24px; font-size: 12px; text-align: left;
    max-width: 1200px; margin: 0 auto;
}
.pub-advisory span { flex: 1; }
.pub-advisory strong { color: var(--gold-light); font-weight: 800; }
.pub-advisory a { color: #fff; font-weight: 700; text-decoration: underline; }
.pub-advisory-close { background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; width: 22px; height: 22px; cursor: pointer; font-size: 13px; line-height: 1; flex-shrink: 0; }
@media (max-width: 700px) { .pub-advisory { flex-wrap: wrap; } }
.pub-advisory.pm-hidden { display: none; }

.pub-enquire-fab {
    position: fixed; bottom: 92px; left: 22px; z-index: 9997;
    background: var(--gold); color: #fff; border: 2px solid var(--ink);
    font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 12.5px;
    padding: 12px 18px; cursor: pointer;
    opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.pub-enquire-fab.pm-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pub-enquire-fab:hover { background: var(--gold-dark); }
.pub-enquire-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(32,30,29,.7); z-index: 9998;
    align-items: center; justify-content: center; padding: 20px;
}
.pub-enquire-backdrop.pm-open { display: flex; }
.pub-enquire-dialog { background: var(--white); border: 2px solid var(--ink); width: 440px; max-width: 100%; padding: 28px; position: relative; }
.pub-enquire-dialog h3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); margin: 0 0 6px; }
.pub-enquire-dialog .sub { font-size: 12px; color: var(--muted); margin: 0 0 18px; }
.pub-enquire-close { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); }

.pub-audience { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pub-audience-card { background: var(--white); border: 1px solid var(--border); padding: 32px; }
.pub-audience-card .kicker { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 10px; }
.pub-audience-card h3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 19px; color: var(--ink); margin-bottom: 10px; }
.pub-audience-card p { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
.pub-audience-card ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink); line-height: 2; }
@media (max-width: 800px) { .pub-audience { grid-template-columns: 1fr; } }

.pub-lock-badge {
    display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase; color: var(--gold-dark); background: var(--gold-pale);
    border: 1px solid var(--gold); padding: 4px 10px; margin-top: 12px;
}

.pub-photo-placeholder {
    background: var(--white);
    border: 1.5px dashed var(--border); display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: var(--muted); font-size: 12px; text-align: center; gap: 6px;
    min-height: 220px; padding: 20px;
}
.pub-photo-placeholder .icon { font-size: 26px; opacity: .5; }
.pub-logo-strip { display: flex; gap: 2px; justify-content: flex-start; flex-wrap: wrap; margin: 24px 0 8px; }
.pub-logo-slot {
    width: 150px; height: 56px; border: 1px solid var(--border); display: flex;
    align-items: center; justify-content: center; color: var(--ink); font-size: 9.5px; background: var(--white); text-align: center; padding: 4px 10px;
}
.pub-testimonial { background: var(--white); border: 1px solid var(--border); padding: 28px; width: 380px; flex-shrink: 0; }
.pub-testimonial .quote { font-size: 14px; color: var(--ink); line-height: 1.8; margin-bottom: 18px; }
.pub-testimonial .person { display: flex; align-items: center; gap: 12px; }
.pub-testimonial .avatar { width: 46px; height: 46px; }
.pub-testimonial .who .name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pub-testimonial .who .role { font-size: 11px; color: var(--muted); }

.pub-testimonial-marquee { overflow: hidden; margin-top: 36px; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.pub-testimonial-track { display: flex; gap: 20px; width: max-content; animation: pub-marquee 150s linear infinite; }
.pub-testimonial-marquee:hover .pub-testimonial-track { animation-play-state: paused; }
@keyframes pub-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pub-testimonial-track { animation: none; } }

.pub-hero {
    position: relative; text-align: left; padding: 100px 24px 80px;
    background: var(--ink); border-bottom: 2px solid var(--gold);
}
.pub-hero-inner { position: relative; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: center; }
@media (max-width: 960px) { .pub-hero-inner { grid-template-columns: 1fr; } .pub-hero-visual { order: -1; max-width: 320px; margin: 0 auto 12px; } }
.pub-hero-urgency { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--gold-light); background: rgba(122,31,31,.16); border: 1px solid rgba(122,31,31,.4); padding: 6px 14px; border-radius: 20px; margin-bottom: 16px; }
.pub-hero-urgency i { width: 14px; height: 14px; flex-shrink: 0; }
.pub-hero-eyebrow {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
    color: #fff; border: 1px solid var(--gold); padding: 7px 18px; margin-bottom: 26px;
}
.pub-hero h1 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(32px, 5.6vw, 54px); color: #fff; margin: 0 0 18px; line-height: 1.12; letter-spacing: -0.01em; }
.pub-hero p.lead { max-width: 620px; margin: 0 0 30px; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.8; }
.pub-hero-ctas { display: flex; gap: 2px; justify-content: flex-start; flex-wrap: wrap; }
.pub-hero-trustbar { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; }
.pub-hero-trustbar span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,.65); }
.pub-hero-trustbar i { width: 14px; height: 14px; color: var(--gold-light); flex-shrink: 0; }
.pub-hero-visual { position: relative; }
.pub-doc-mock { background: #fff; border-radius: 2px; box-shadow: 0 24px 60px rgba(0,0,0,.4); padding: 20px 20px 22px; transform: rotate(-2deg); }
.pub-doc-mock .dm-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 12px; }
.pub-doc-mock .dm-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 12px; color: var(--ink); }
.pub-doc-mock .dm-tag { font-size: 8.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.pub-doc-mock .dm-row { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid #eee; }
.pub-doc-mock .dm-row div { height: 8px; border-radius: 2px; background: #e8e4da; }
.pub-doc-mock .dm-row div:nth-child(1) { flex: 1.4; }
.pub-doc-mock .dm-row div:nth-child(2) { flex: 1; }
.pub-doc-mock .dm-row div:nth-child(3) { flex: .7; background: var(--gold-pale); }
.pub-doc-badge { position: absolute; bottom: -14px; right: 18px; background: var(--gold); color: var(--ink); font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 11px; padding: 9px 16px; border-radius: 30px; box-shadow: 0 8px 20px rgba(0,0,0,.3); display: flex; align-items: center; gap: 6px; }
.pub-doc-badge i { width: 14px; height: 14px; }
.pub-quiz-teaser-card { display: grid; grid-template-columns: 1fr 1fr; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
@media (max-width: 720px) { .pub-quiz-teaser-card { grid-template-columns: 1fr; } }
.pub-quiz-teaser-q { padding: 26px 28px; border-right: 1px solid var(--border); }
.pub-quiz-teaser-q:last-child { border-right: none; }
.pub-quiz-teaser-q .ql { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gold); margin-bottom: 8px; }
.pub-quiz-teaser-q h4 { font-family: 'Archivo', sans-serif; font-size: 14px; color: var(--ink); margin: 0 0 12px; }
.pub-quiz-teaser-q .opt { font-size: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; color: var(--muted); }
.pub-quiz-teaser-q .opt.picked { border-color: var(--gold); background: var(--gold-pale); color: var(--ink); font-weight: 600; }

.pub-section { max-width: 1100px; margin: 0 auto; padding: 70px 24px; position: relative; }
.pub-section h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(22px,3vw,28px); color: var(--ink); text-align: left; margin-bottom: 10px; }
.pub-section .sub { text-align: left; color: var(--muted); font-size: 13px; max-width: 620px; margin: 0 0 40px; }
.pub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px; }
.pub-card { display: block; text-decoration: none; color: inherit; background: var(--white); border: 1px solid var(--border); padding: 24px; }
.pub-card .icon { font-size: 28px; margin-bottom: 12px; }
.pub-card h3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.pub-card p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.pub-cd-band { background: var(--gold); padding: 48px 32px; text-align: left; position: relative; }
.pub-cd-band h2, .pub-cd-band .sub { color: #fff; }
.pub-cd-band .sub { color: rgba(255,255,255,.85); }

.pub-faq { max-width: 780px; margin: 0; }
.pub-faq details { background: var(--white); border: 1px solid var(--border); padding: 16px 20px; margin-bottom: 2px; }
.pub-faq details:hover { border-color: var(--gold); }
.pub-faq summary { font-weight: 800; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.pub-faq p { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.7; }

.pub-contact { background: var(--ink); color: rgba(255,255,255,.85); text-align: left; padding: 56px 24px; position: relative; border-top: 2px solid var(--gold); }
.pub-contact-inner { position: relative; z-index: 1; }
.pub-contact h2 { font-family: 'Archivo', sans-serif; font-weight: 800; color: #fff; font-size: 22px; margin-bottom: 14px; }
.pub-contact a { color: #fff; }
.pub-contact .line { font-size: 13.5px; margin-bottom: 6px; }