/* =============================================================================
   HR Rebooted — 2026 rebrand design system
   Palette: warm gold (primary) + teal / blue / green pillar accents on white.
   Type:    Rubik (body) + Roboto Slab (display headline + stat numbers).
   Radius:  16px cards, 10px buttons.
   ============================================================================= */

/* ---------- Design tokens ---------- */
:root {
    --ink:         #1A1A1A;
    --ink-soft:    #4A4A4A;
    --ink-quiet:   #6E6E6E;
    --paper:       #FFFFFF;
    --paper-soft:  #FAFAFA;
    --border:      #E9E9E9;
    --border-soft: #F1F1F1;

    /* Pillar / brand accents */
    --gold:        #F8AE19;
    --gold-bright: #E5A117;
    --gold-tint:   #FEF3DC;
    --gold-text:   #1A1A1A;
    --amber-text:  #8A5A00;

    --teal:        #6AC7B4;
    --teal-deep:   #1E6E60;
    --teal-tint:   #E8F7F3;

    --green:       #86C140;
    --green-deep:  #4B781E;
    --green-tint:  #F0F8E7;

    --blue:        #43C3E8;
    --blue-deep:   #0F6487;
    --blue-tint:   #E9F8FC;

    /* Dark surface (utility bar, occasional dark islands) */
    --navy-deep:   #1A1A1A;
    --navy-deep2:  #242424;

    --radius:      16px;
    --radius-btn:  10px;
    --radius-sm:   8px;
    --shadow:      0 10px 30px -12px rgba(0, 0, 0, 0.12);
    --shadow-lg:   0 20px 45px -18px rgba(0, 0, 0, 0.18);

    --font-body:    'Rubik', system-ui, -apple-system, Segoe UI, sans-serif;
    --font-display: 'Roboto Slab', Georgia, serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ---------- Legacy variable aliases (used by unmigrated pages during Phase 2+) ---------- */
    --gov:          #0266ff;
    --gov-soft:     #bfdbfe;
    --text-0:       #1A1A1A;
    --text-1:       #4A4A4A;
    --text-2:       #6E6E6E;
    --text-3:       #9CA3AF;
    --ink-line:     #E9E9E9;
    --ink-line-strong: #D1D5DB;
    --risk:         #dc2626;
    --max:          1180px;
    --gutter:       24px;
    --surface-1:    #FAFAFA;
    --surface-2:    #F1F1F1;
    /* Legacy --ink-0/1/2 were dark navy tones used as panel BACKGROUNDS by
       many rules (e.g. .cta-block, .module, .scroll-section.tinted). Rebrand
       flips them to light paper tones so those panels render as white cards. */
    --ink-0:        #ffffff;
    --ink-1:        #FAFAFA;
    --ink-2:        #F1F1F1;
    --cool:         #6AC7B4;
    --check:        #16a34a;
}

/* ---------- Reset + base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Typography ---------- */
h1 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
h2, h3, h4, h5 { font-family: var(--font-body); font-weight: 500; margin: 0; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink); }
p { margin: 0 0 12px; }
strong, b { font-weight: 600; }

.eyebrow { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--teal-deep); display: inline-block; }

/* Utility text colors */
.text-ink       { color: var(--ink); }
.text-soft      { color: var(--ink-soft); }
.text-quiet     { color: var(--ink-quiet); }
.text-teal      { color: var(--teal-deep); }
.text-gold      { color: var(--gold-bright); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    padding: 13px 22px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ink);
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 9px 15px; font-size: 13.5px; }
.btn-lg { padding: 15px 26px; font-size: 15.5px; }

.btn-primary { background: var(--gold); color: var(--ink); box-shadow: 0 8px 20px -8px rgba(248, 174, 25, 0.5); }
.btn-primary:hover { background: var(--gold-bright); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { background: var(--paper-soft); color: var(--ink); border-color: var(--ink); }

.btn-onDark { background: var(--gold); color: var(--ink); }
.btn-onDark:hover { background: var(--gold-bright); }

.btn-onDark-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.btn-onDark-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* Legacy alias: existing pages use .btn-demo for the primary CTA. Keep it working. */
.btn-demo { background: var(--gold); color: var(--ink); box-shadow: 0 8px 20px -8px rgba(248, 174, 25, 0.5); }
.btn-demo:hover { background: var(--gold-bright); }

/* Force the logo gold on a legacy page's primary CTA, matching the nav
   "Book a demo" button. Needed because styles-legacy-compat.css loads BEFORE
   this sheet and its .btn-primary.btn-demo rule (specificity 0,2,0) pins those
   buttons to the old blue. Both selectors below outrank it.

   Two ways in:
     - body[data-page="events"]  page-wide, for a page with no spare hook
     - .btn-gold                 per-button, add it to the element

   Add .btn-gold to any legacy CTA that should be gold. */
body[data-page="events"] .btn-primary.btn-demo,
.btn-primary.btn-demo.btn-gold {
    background: var(--gold);
    color: var(--ink);
    border-color: transparent;
    box-shadow: 0 8px 20px -8px rgba(248, 174, 25, 0.5);
}
body[data-page="events"] .btn-primary.btn-demo:hover,
.btn-primary.btn-demo.btn-gold:hover {
    background: var(--gold-bright);
    color: var(--ink);
    transform: none;
}
body[data-page="events"] .btn-primary.btn-demo:focus-visible,
.btn-primary.btn-demo.btn-gold:focus-visible {
    box-shadow: 0 0 0 3px rgba(248, 174, 25, 0.45);
}

.btn .arr { transition: transform 0.15s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- Utility bar (top strip) ---------- */
.utility-bar {
    background: var(--navy-deep);
    color: #fff;
    font-size: 13px;
    text-align: center;
    padding: 8px 16px;
}
.utility-bar a { color: var(--teal-tint); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.35); }
.utility-bar a:hover { color: #fff; }

/* Legacy alias */
.promo-strip { background: var(--navy-deep); color: #fff; font-size: 13px; text-align: center; padding: 8px 16px; }
.promo-strip strong { font-weight: 600; }
.promo-strip a, .promo-cta { color: var(--teal-tint); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.35); margin-left: 8px; }
.promo-strip a:hover, .promo-cta:hover { color: #fff; }

/* ---------- Modal (white paper download, Zoho web form) ----------
   z-index sits above the sticky nav (100). The panel scrolls internally so a
   tall embedded form never pushes the close button off screen. */
.hrr-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(26, 26, 26, 0.55);
    padding: 24px 16px;
    overflow-y: auto;
}
.hrr-modal.open { display: flex; align-items: flex-start; justify-content: center; }
.hrr-modal-panel {
    position: relative;
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 660px;
    margin: auto;
    overflow: hidden;
}
.hrr-modal-head {
    padding: 22px 56px 18px 26px;
    border-bottom: 1px solid var(--border);
}
.hrr-modal-head h2 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
}
.hrr-modal-head p {
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 8px 0 0;
}
.hrr-modal-body { max-height: 70vh; overflow-y: auto; }
.wp-thanks { padding: 34px 30px 36px; text-align: center; }
.wp-thanks-mark {
    width: 46px;
    height: 46px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--green-tint);
    color: var(--green-deep);
    font-size: 22px;
    line-height: 46px;
    font-weight: 700;
}
.wp-thanks h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
}
.wp-thanks p {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0 auto 22px;
    max-width: 420px;
}
.wp-thanks a { color: var(--ink); border-bottom: 1px solid var(--gold); }
.hrr-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink-soft);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.hrr-modal-close:hover { background: var(--paper-soft); color: var(--ink); border-color: var(--ink); }
body.hrr-modal-open { overflow: hidden; }
@media (max-width: 680px) {
    .hrr-modal { padding: 12px 10px; }
    .hrr-modal-body { max-height: 76vh; }
}

/* White paper trigger, first item inside .press-line under the "In the Press"
   label. Sized to sit level with .press-link directly below it; margin is 0
   because .press-line already supplies an 8px gap between its children. */
.wp-link-row {
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--ink);
    margin: 0;
    text-align: left;
    line-height: 1.4;
}
.wp-link {
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: var(--ink);
    background: none;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--gold);
    cursor: pointer;
    line-height: 1.4;
}
.wp-link:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

/* ---------- Restyle the embedded Zoho web form inside the modal ----------
   Zoho ships 12px Arial with a 30/68 float layout and inline styles on the
   labels. These selectors carry one extra class over Zoho's own rules so they
   win the cascade; !important is only used where Zoho set an inline style or
   its own !important. Layout becomes a plain vertical stack. */
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft {
    padding: 24px 26px 26px;
    font-family: var(--font-body);
    max-width: none;
}
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft .zcwf_title { display: none !important; }
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft .zcwf_row { margin: 0 0 15px; }
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft .zcwf_col_lab {
    width: 100%;
    float: none;
    min-height: 0;
    margin: 0 0 5px;
    padding: 0;
    font-family: var(--font-body) !important;
    font-size: 11.5px !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
}
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft .zcwf_col_fld {
    width: 100%;
    float: none;
    margin: 0;
    padding: 0;
}
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft .zcwf_col_fld input[type="text"],
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft .zcwf_col_fld_slt {
    width: 100% !important;
    float: none;
    height: auto;
    font-family: var(--font-body);
    font-size: 14px !important;
    line-height: 1.3;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--ink-line-strong, #D1D5DB) !important;
    border-radius: var(--radius-btn);
    padding: 11px 13px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft .zcwf_col_fld input[type="text"]:focus,
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft .zcwf_col_fld_slt:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(248, 174, 25, 0.28);
}
/* Tooltip "?" bubbles add clutter; the labels are self-explanatory. */
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft .zcwf_col_help { display: none !important; }
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft .zcwf_button {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    max-width: none;
    padding: 11px 22px;
    border-radius: var(--radius-btn);
    cursor: pointer;
}
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft .formsubmit.zcwf_button {
    background: var(--gold) !important;
    color: var(--ink) !important;
    border: 1px solid var(--gold) !important;
    margin-right: 10px;
}
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft .formsubmit.zcwf_button:hover {
    background: var(--gold-bright) !important;
    border-color: var(--gold-bright) !important;
}
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft input[type="reset"].zcwf_button {
    background: #fff;
    color: var(--ink-soft);
    border: 1px solid var(--border);
}
.hrr-modal #crmWebToEntityForm.zcwf_lblLeft input[type="reset"].zcwf_button:hover {
    color: var(--ink);
    border-color: var(--ink);
}

/* ---------- HR Rebels join form (hr-rebels.html, right column of .cta-block) ----------
   Mirrors the field set on rebels.hrrebooted.com. That page is a Hostinger
   Website Builder site whose form has no action attribute and whose CSP blocks
   framing, so the fields are rebuilt here and posted to our own endpoint. */
/* Join panel on hr-rebels: form sits in the left column under the heading, so
   top-align the columns instead of centering the short text against a tall form. */
body[data-page="rebels"] .cta-block { align-items: start; }

.rebels-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--paper-soft);
    border: 1px solid var(--ink-line-strong, #D1D5DB);
    border-radius: 16px;
    padding: 26px 24px;
}
.rf-field { display: flex; flex-direction: column; gap: 5px; }
.rf-field label {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
}
.rf-req { color: #dc2626; }
.rebels-form input[type="text"],
.rebels-form input[type="email"],
.rebels-form textarea {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--ink-line-strong, #D1D5DB);
    border-radius: var(--radius-btn);
    padding: 11px 13px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rebels-form textarea { resize: vertical; min-height: 64px; }
.rebels-form input::placeholder,
.rebels-form textarea::placeholder { color: var(--ink-quiet); }
.rebels-form input:focus,
.rebels-form textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(248, 174, 25, 0.28);
}
.rf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rf-check-group { border: none; margin: 0; padding: 0; }
.rf-check-group legend {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
    padding: 0;
    margin-bottom: 6px;
}
.rf-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.4;
    cursor: pointer;
}
.rf-check input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--gold);
    cursor: pointer;
}
.rebels-form .rf-submit { width: 100%; justify-content: center; margin-top: 2px; }
.rebels-form .rf-submit[disabled] { opacity: 0.6; cursor: default; }
.rf-msg { font-size: 13px; line-height: 1.45; margin: 0; }
.rf-msg.ok { color: var(--green-deep); }
.rf-msg.err { color: #dc2626; }
@media (max-width: 560px) {
    .rf-row2 { grid-template-columns: 1fr; }
}

/* ---------- Nav (sticky white with mega dropdowns) ---------- */
header.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
/* Same max-width as .wrap so the logo's left edge lines up with the content
   column on every page. The content box is 1132px (1180 less 24px padding each
   side). Six dropdowns take 624px and the chat FAB 56px, so with two 12px gaps
   the logo has ~428px before the row wraps. At 91px tall it is 330px wide, so
   everything sits on one line; wrap is kept as a safety net, not a layout. */
.nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.logo-mark { display: flex; align-items: center; flex-shrink: 0; }
.logo-img { height: 91px; width: auto; max-width: none; display: block; flex-shrink: 0; }
.footer-logo-img { height: 44px; width: auto; max-width: none; }

.nav-links { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; flex: 0 0 auto; }
/* Horizontal padding is doing double duty: it sets the hover target and it
   widens the menu block so the leftover space either side of it stays tight
   against the logo and the demo button. Shrinking it pushes those gaps open.
   Measured against the real Rubik 400 metrics: at 14px the six labels come to
   ~624px, plus ~56px for the chat FAB. That leaves ~428px of the 1132px row
   before the logo forces a wrap. Do not raise this padding past 13px or the
   row overflows. */
.nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    padding: 10px 13px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.nav-item:hover .nav-link,
.nav-link:hover { background: var(--paper-soft); }
.nav-link.active { color: var(--teal-deep); background: var(--teal-tint); }
.caret { font-size: 10px; opacity: 0.6; transform: translateY(1px); }

.mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 460px;
    z-index: 50;
}
.mega.mega-1col { grid-template-columns: 1fr; width: 300px; }
/* Right-anchored panel for the last nav item, so it opens inward. */
.mega.mega-right { left: auto; right: 0; }
.nav-item:hover .mega,
.nav-item:focus-within .mega { display: grid; }
/* Hover bridge to prevent flicker between trigger and dropdown */
.nav-item::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
}
.mega-col { display: flex; flex-direction: column; gap: 0; }
.mega-col-title {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    padding: 6px 10px 4px;
    font-weight: 500;
}
.mega-link {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: var(--ink);
    text-decoration: none;
}
.mega-link:hover { background: var(--paper-soft); }
.mega-link b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mega-link span { font-size: 12px; color: var(--ink-soft); }

.nav-cta { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav-cta .btn { padding: 10px 18px; font-size: 14px; white-space: nowrap; }
.chat-fab-slot { display: flex; align-items: center; margin-left: 4px; }

.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; }

.mobile-menu { display: none; }

/* ---------- Section shell ---------- */
section { padding: 80px 0; }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head .eyebrow { color: var(--teal-deep); margin-bottom: 10px; display: block; }
.section-head h2 { font-size: 32px; font-weight: 500; color: var(--ink); }
.section-head p { font-size: 16px; color: var(--ink-soft); margin-top: 14px; line-height: 1.6; }

/* Center-aligned section head variant */
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }

/* Small label used above a divider line */
.section-label { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.section-label .line { flex: 1; height: 1px; background: var(--border); }
.section-label span { font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); white-space: nowrap; font-weight: 500; }

/* Breadcrumb */
.breadcrumb { font-size: 12.5px; color: var(--ink-soft); padding: 14px 0 0; }
.breadcrumb b { color: var(--ink); font-weight: 600; }

/* ---------- Hero (home + sub-page shared) ---------- */
.home-hero {
    padding: 64px 0 40px;
    background: radial-gradient(700px 380px at 82% -10%, var(--gold-tint) 0%, rgba(254, 243, 220, 0) 70%);
}
.hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }

.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold-tint);
    color: var(--amber-text);
    padding: 7px 13px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: block; }
.badge.badge-teal  { background: var(--teal-tint);  color: var(--teal-deep); }
.badge.badge-teal i  { background: var(--teal); }
.badge.badge-blue  { background: var(--blue-tint);  color: var(--blue-deep); }
.badge.badge-blue i  { background: var(--blue); }
.badge.badge-green { background: var(--green-tint); color: var(--green-deep); }
.badge.badge-green i { background: var(--green); }

.home-hero h1 { font-size: 52px; font-weight: 700; color: var(--ink); }
.home-hero h1 .accent { color: var(--gold-bright); }
.home-hero p.lede { font-size: 18px; line-height: 1.55; color: var(--ink-soft); margin: 22px 0 30px; max-width: 520px; font-weight: 300; }

.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }

/* ---------- Reserve a Copy form (book page, third column of .book-card) ----------
   The panel sits on a white card, so it needs real contrast to read as a form:
   a tinted body, a visible border, and input borders a shade darker than the
   page hairline. Hairline-on-white here looks like unstyled markup. */
.reserve-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
    background: var(--paper-soft);
    border: 1px solid var(--ink-line-strong, #D1D5DB);
    border-radius: 14px;
    padding: 24px 22px;
    box-shadow: inset 0 1px 0 #fff;
}
.reserve-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}
.reserve-field { display: flex; flex-direction: column; gap: 5px; }
.reserve-field > span {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
}
.reserve-card input[type="text"],
.reserve-card input[type="email"] {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.3;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--ink-line-strong, #D1D5DB);
    border-radius: var(--radius-btn);
    padding: 11px 13px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reserve-card input::placeholder { color: var(--ink-quiet); }
.reserve-card input[type="text"]:focus,
.reserve-card input[type="email"]:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(248, 174, 25, 0.28);
}
.reserve-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.35;
    cursor: pointer;
    margin: 1px 0 2px;
}
.reserve-check input[type="checkbox"] {
    flex: none;
    width: 15px;
    height: 15px;
    margin: 1px 0 0;
    accent-color: var(--gold);
    cursor: pointer;
}
.reserve-card button {
    width: 100%;
    justify-content: center;
    padding: 11px 14px;
    font-size: 13.5px;
}
.reserve-card button[disabled] { opacity: 0.6; cursor: default; }
.reserve-note {
    font-size: 11.5px;
    color: var(--ink-soft);
    line-height: 1.4;
    margin: 0;
    text-align: center;
}
.reserve-msg { font-size: 12px; line-height: 1.4; margin: 0; }
.reserve-msg.ok { color: var(--green-deep); }
.reserve-msg.err { color: var(--risk, #dc2626); }

/* Book page: tighten the gap between the hero and the cover panel. The default
   stack (44px hero padding + 26px trailing row margin + 80px section padding)
   leaves roughly 150px of dead space; this halves it. */
body[data-page="book"] .page-hero { padding-bottom: 24px; }
body[data-page="book"] .page-hero .hero-cta-row { margin-bottom: 0; }
body[data-page="book"] .book-section { padding-top: 48px; }

/* Book card variant that carries the reserve form in its third column.
   Form column is a fixed 360px so the fields have room to breathe; the copy
   column takes whatever is left. Cover is a fixed 170px. */
.book-card.book-card-form {
    grid-template-columns: 170px 1fr 360px;
    gap: 30px;
    align-items: center;
}
.book-card.book-card-form .book-cover-img { max-width: 170px; }
@media (max-width: 900px) {
    .book-card.book-card-form { grid-template-columns: 1fr; gap: 26px; }
    .book-card.book-card-form .book-cover-img { max-width: 200px; margin: 0 auto; }
}
.press-line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    max-width: 520px;
}
.press-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-deep); }
.press-icon { flex-shrink: 0; }
.press-link { font-weight: 600; font-size: 14.5px; color: var(--ink); border-bottom: 1px solid var(--gold); line-height: 1.4; }
.press-link:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

.hero-visual { position: relative; }
.hero-photo-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.hero-photo-card img { width: 100%; height: 360px; object-fit: cover; }

.float-card {
    position: absolute;
    background: #fff;
    border: 1.5px solid var(--ink-soft);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 14px 16px;
}
.float-card.f1 { top: -22px; left: -28px; width: 200px; }
.float-card.f2 { bottom: -26px; right: -20px; width: 210px; }
.float-card .k { font-family: var(--font-body); font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 400; }
.float-card .v { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink); margin-top: 2px; }
.float-card .bar { height: 6px; background: var(--paper-soft); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.float-card .bar i { display: block; height: 100%; background: var(--teal); width: 82%; }
.dot-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dot-row i { width: 7px; height: 7px; border-radius: 50%; }
.dot-row button {
    width: 9px; height: 9px; border-radius: 50%; padding: 0;
    border: none; cursor: pointer;
    background: rgba(0, 0, 0, 0.18);
    transition: background 180ms ease, transform 180ms ease;
}
.dot-row button:hover { background: var(--teal-deep); transform: scale(1.2); }
.dot-row button.is-active { background: var(--gold); transform: scale(1.35); }

/* Sub-page hero (light gradient, single column) */
.page-hero { padding: 56px 0 44px; background: linear-gradient(180deg, var(--paper-soft) 0%, #fff 100%); }
.page-hero .eyebrow { color: var(--teal-deep); margin-bottom: 12px; display: block; }
.page-hero h1 { font-size: 42px; font-weight: 700; color: var(--ink); max-width: 720px; }
.page-hero p { font-size: 17px; color: var(--ink-soft); max-width: 640px; margin: 16px 0 0; line-height: 1.6; }
.page-hero .hero-cta-row { margin-top: 28px; }

.cat-tabs { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.cat-tab { font-family: var(--font-body); font-size: 12px; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--border); color: var(--ink-soft); cursor: pointer; background: transparent; }
.cat-tab:hover { border-color: var(--ink); color: var(--ink); }
.cat-tab.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* ---------- Pillars (signature 4-color grid) ---------- */
.pillars-section { background: var(--paper-soft); }
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pillar-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 22px;
    position: relative;
    overflow: hidden;
}
.pillar-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.pillar-card.c-strategy::before, .pillar-card.c1::before   { background: var(--teal); }
.pillar-card.c-policy::before,   .pillar-card.c2::before   { background: var(--blue); }
.pillar-card.c-training::before, .pillar-card.c3::before   { background: var(--green); }
.pillar-card.c-enablement::before, .pillar-card.c4::before { background: var(--gold); }
.pillar-num { font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); margin-bottom: 14px; display: block; }
.pillar-card h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; color: var(--ink); }
.pillar-card p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.pillar-legend { display: flex; gap: 22px; margin-top: 28px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.pillar-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pillar-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ---------- Product preview / browser frame ---------- */
.product-preview .wrap { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }

.browser-frame {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    background: #fff;
}
.browser-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    background: #EEF1F5;
    border-bottom: 1px solid var(--border);
}
.browser-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #D3D9E3; }
.browser-chrome span {
    margin-left: 10px;
    font-size: 11.5px;
    color: var(--ink-soft);
    background: #fff;
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: 6px;
    font-family: var(--font-body);
}
.browser-body { padding: 18px; background: #fff; }
.browser-body img { border-radius: 8px; }

/* Module list (used next to a browser-frame) */
.module-list { display: flex; flex-direction: column; gap: 16px; }
.module-item { display: flex; gap: 14px; align-items: flex-start; }
.module-chip {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: #fff;
}
.module-item h4 { margin: 0 0 3px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.module-item p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- Differentiator band ---------- */
.diff-band { background: var(--paper-soft); color: var(--ink); }
.diff-band .section-head { max-width: 640px; }
.diff-band .eyebrow { color: var(--teal-deep); }
.diff-band h2 { color: var(--ink); }
.diff-band .section-head p { color: var(--ink-soft); }

.home-diff-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
.diff-band h2 { font-size: 32px; font-weight: 500; margin: 12px 0 18px; }
.diff-band p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; max-width: 480px; }

.diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.diff-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.diff-card .tag { font-family: var(--font-body); font-size: 10.5px; color: var(--teal-deep); margin-bottom: 10px; display: block; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.diff-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.diff-card p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.stat-card .num { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--ink); }
.stat-card .lbl { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }

/* ---------- Audience / role cards ---------- */
.audience .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.audience-photo { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.audience-photo img { height: 340px; object-fit: cover; width: 100%; }

.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.role-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.role-card:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.role-card .role-title { font-weight: 700; font-size: 14.5px; font-family: var(--font-display); color: var(--ink); }
.role-card .role-sub { font-size: 12.5px; color: var(--ink-soft); }
.role-card .role-tag { align-self: flex-start; font-family: var(--font-body); font-size: 10px; padding: 3px 8px; border-radius: 6px; margin-bottom: 6px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Book resource card ---------- */
.book-section { background: var(--paper-soft); }
.book-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    display: grid;
    grid-template-columns: 220px 1fr auto;
    gap: 36px;
    align-items: center;
    padding: 36px;
    box-shadow: var(--shadow);
}
.book-cover-img { width: 100%; height: auto; max-width: 220px; border-radius: 10px; box-shadow: 0 14px 30px -14px rgba(11, 27, 51, 0.5); display: block; }
/* Placeholder book cover — styled as an actual cover with title + author, so
   the panel reads as intentional design until the real cover art is delivered. */
.book-cover-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4.4;
    border-radius: 10px;
    box-shadow: 0 14px 30px -14px rgba(11, 27, 51, 0.55);
    background: linear-gradient(160deg, #04132a 0%, #142655 45%, var(--gold-bright) 100%);
    color: #ffffff;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}
.book-cover-placeholder::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    pointer-events: none;
}
.book-cover-placeholder .bcp-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold-tint);
    position: relative;
    z-index: 1;
}
.book-cover-placeholder .bcp-title {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    position: relative;
    z-index: 1;
    margin-top: auto;
    margin-bottom: 8px;
}
.book-cover-placeholder .bcp-author {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 1;
    letter-spacing: 0.03em;
}
.book-copy .eyebrow { color: var(--amber-text); }
.book-copy h3 { font-size: 24px; font-weight: 500; margin: 10px 0 12px; color: var(--ink); }
.book-copy p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; max-width: 480px; }
.book-note { font-size: 12px; color: var(--ink-soft); font-style: italic; margin-top: 8px; }

/* ---------- Final CTA ---------- */
.final-cta { background: #fff; border-top: 1px solid var(--border); color: var(--ink); text-align: center; }
.final-cta h2 { font-size: 36px; color: var(--ink); font-weight: 500; }
.final-cta p { color: var(--ink-soft); font-size: 16.5px; margin: 16px auto 30px; max-width: 520px; }
.final-cta .hero-cta-row,
.final-cta .row { justify-content: center; }
.final-cta.boxed { background: #fff; border: 1px solid var(--border); border-radius: 24px; border-top: 1px solid var(--border); padding: 64px 32px; }
.check-row { display: flex; gap: 22px; justify-content: center; margin-top: 26px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft); }
.check-row span { display: flex; align-items: center; gap: 6px; }

/* ---------- Product / services pages ---------- */
.flagship {
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.flagship-copy { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.flagship-tag { display: inline-flex; align-self: flex-start; gap: 8px; background: var(--gold-tint); color: var(--amber-text); padding: 6px 12px; border-radius: 100px; font-family: var(--font-body); font-size: 11px; margin-bottom: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.flagship-copy h2 { font-size: 30px; font-weight: 500; color: var(--ink); }
.flagship-copy .tagline { font-size: 16px; color: var(--ink-soft); font-weight: 500; margin: 8px 0 14px; }
.flagship-copy p.desc { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 20px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.pill { font-size: 12px; background: var(--paper-soft); border: 1px solid var(--border); padding: 6px 12px; border-radius: 100px; color: var(--ink-soft); font-weight: 500; }
.flagship-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.flagship-visual { background: var(--paper-soft); display: flex; align-items: center; padding: 30px; }
.diff-strip { display: flex; gap: 22px; padding: 20px 44px; background: var(--paper-soft); border-top: 1px solid var(--border); flex-wrap: wrap; grid-column: 1 / -1; }
.diff-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.diff-item b { color: var(--ink); font-weight: 600; }
.diff-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

/* Structured feature list (secondary products / services) */
.feature-list { display: flex; flex-direction: column; }
.feature-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 28px;
    padding: 40px 0;
    border-bottom: 1px solid var(--border);
}
.feature-row:first-child { padding-top: 0; }
.feature-row:last-child { border-bottom: none; padding-bottom: 0; }
.feature-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.feature-num { font-family: var(--font-body); font-size: 11.5px; color: var(--ink-soft); }
.feature-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.feature-content { max-width: 720px; }
.feature-content .product-tag { display: inline-flex; gap: 6px; padding: 5px 11px; border-radius: 100px; font-family: var(--font-body); font-size: 10.5px; margin-bottom: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.feature-content h3 { font-size: 21px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.feature-content .tagline { font-size: 13.5px; font-weight: 500; margin-bottom: 14px; color: var(--ink-soft); }
.feature-content p.desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 18px; }
.benefit-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-bottom: 22px; }
.bmg-item { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.bmg-item .chk {
    flex: none;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    background: var(--teal);
}
.feature-content .card-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* Product card (grid) */
.product-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.product-card .mock { padding: 22px 26px 0; }
.product-card .mock-inner { border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 150px; justify-content: center; }
.product-card .body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.product-tag { display: inline-flex; align-self: flex-start; gap: 6px; padding: 5px 11px; border-radius: 100px; font-family: var(--font-body); font-size: 10.5px; margin-bottom: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.product-card h3 { font-size: 20px; font-weight: 500; color: var(--ink); }
.product-card .tagline { font-size: 13.5px; font-weight: 500; margin: 6px 0 10px; color: var(--ink-soft); }
.product-card p.desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 14px; }
.mini-benefits { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mini-benefits li { font-size: 12.5px; color: var(--ink-soft); padding-left: 16px; position: relative; }
.mini-benefits li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.product-card .card-cta { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* Mock UI bits reused across product cards */
.mock-row { display: flex; align-items: center; gap: 8px; }
.mock-chip { font-size: 10px; font-family: var(--font-body); padding: 3px 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.7); }
.mock-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.55); flex: 1; overflow: hidden; }
.mock-bar i { display: block; height: 100%; }
.mock-line { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.45); }

/* Consumer products grid */
.consumer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Pricing */
.pricing-note { background: var(--paper-soft); border: 1px dashed var(--border); border-radius: 12px; padding: 14px 18px; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 28px; font-style: italic; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px; display: flex; flex-direction: column; background: #fff; }
.price-card.featured { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); position: relative; }
.featured-badge { position: absolute; top: -13px; left: 26px; background: var(--teal); color: var(--ink); font-family: var(--font-body); font-size: 10.5px; padding: 4px 10px; border-radius: 100px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.price-card h4 { font-size: 19px; font-weight: 700; color: var(--ink); }
.price-card .price-sub { font-size: 13px; color: var(--ink-soft); margin: 6px 0 20px; }
.price-card .price-amt { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); margin-bottom: 20px; }
.price-card .price-amt span { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.price-feats { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 9px; }
.price-feats li { font-size: 13px; color: var(--ink-soft); padding-left: 18px; position: relative; }
.price-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }

/* ---------- Pain points ---------- */
.pain-section { background: var(--paper-soft); }
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pain-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; }
.pain-role { display: inline-flex; font-family: var(--font-body); font-size: 10.5px; padding: 5px 10px; border-radius: 100px; margin-bottom: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pain-role.role-ceo   { background: var(--gold-tint);  color: var(--amber-text); }
.pain-role.role-cfo   { background: var(--blue-tint);  color: var(--blue-deep); }
.pain-role.role-chro  { background: var(--teal-tint);  color: var(--teal-deep); }
.pain-role.role-ciso  { background: var(--green-tint); color: var(--green-deep); }
.pain-card h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 10px; line-height: 1.3; color: var(--ink); }
.pain-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* ---------- Benefit grid (before features) ---------- */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.benefit-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px; position: relative; overflow: hidden; background: #fff; }
.benefit-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.benefit-card.c1::before { background: var(--teal); }
.benefit-card.c2::before { background: var(--blue); }
.benefit-card.c3::before { background: var(--green); }
.benefit-card.c4::before { background: var(--gold); }
.benefit-card.c5::before { background: var(--teal); }
.benefit-card.c6::before { background: var(--blue); }
.benefit-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 16px; }
.benefit-icon.i-teal  { background: var(--teal-tint);  color: var(--teal-deep); }
.benefit-icon.i-blue  { background: var(--blue-tint);  color: var(--blue-deep); }
.benefit-icon.i-green { background: var(--green-tint); color: var(--green-deep); }
.benefit-icon.i-gold  { background: var(--gold-tint);  color: var(--amber-text); }
.benefit-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.benefit-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* ---------- Frameworks strip ---------- */
.frameworks { padding: 50px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.frameworks .eyebrow { color: var(--teal-deep); display: block; margin-bottom: 16px; }
.fw-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fw-chip { font-size: 12.5px; font-family: var(--font-body); background: var(--paper-soft); border: 1px solid var(--border); padding: 8px 14px; border-radius: 100px; color: var(--ink-soft); font-weight: 500; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; }
.faq-item { border-bottom: 1px solid var(--border); padding: 20px 0; }
.faq-item .q { font-weight: 600; font-size: 15.5px; display: flex; justify-content: space-between; cursor: pointer; align-items: center; gap: 12px; color: var(--ink); }
.faq-item .q .chev { color: var(--ink-soft); font-size: 12px; transition: transform 0.2s ease; }
.faq-item.open .q .chev { transform: rotate(180deg); }
.faq-item .a { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-top: 12px; display: none; max-width: 720px; }
.faq-item.open .a { display: block; }

/* ---------- Roles pages ---------- */
.roles-hero { padding: 56px 0 44px; background: linear-gradient(180deg, var(--paper-soft) 0%, #fff 100%); }
.roles-hero .eyebrow { color: var(--teal-deep); margin-bottom: 12px; display: block; }
.roles-hero h1 { font-size: 40px; font-weight: 700; color: var(--ink); max-width: 720px; }
.roles-hero p { font-size: 16.5px; color: var(--ink-soft); max-width: 640px; margin: 16px 0 0; line-height: 1.6; }

.role-tabs { display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap; }
.role-tab { display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 100px; border: 1.5px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; background: transparent; cursor: pointer; }
.role-tab i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.role-tab:hover { border-color: var(--ink); color: var(--ink); }

.role-section { padding: 76px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 24px; }
.role-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.role-inner.flip .role-copy { order: 2; }
.role-inner.flip .role-visual { order: 1; }
.role-copy h2 { font-size: 28px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.role-copy .role-sub { font-size: 14.5px; font-weight: 600; margin-bottom: 20px; color: var(--ink-soft); }
.role-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 100px; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; margin-bottom: 18px; letter-spacing: 0.04em; text-transform: uppercase; }

.quote-block { background: var(--paper-soft); border-left: 3px solid var(--border); border-radius: 0 10px 10px 0; padding: 16px 20px; margin-bottom: 22px; }
.quote-block .qlabel { font-family: var(--font-body); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 6px; display: block; font-weight: 500; }
.quote-block p { font-size: 14.5px; font-style: italic; color: var(--ink); margin: 0; line-height: 1.5; }

.solve-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.solve-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.solve-list .check { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; margin-top: 1px; background: var(--teal); }
.solve-list b { color: var(--ink); }

.role-visual { border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 14px; min-height: 280px; justify-content: center; }
.visual-stat-row { display: flex; gap: 12px; }
.visual-stat { flex: 1; background: rgba(255, 255, 255, 0.7); border-radius: 12px; padding: 14px; }
.visual-stat .n { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); }
.visual-stat .l { font-size: 11px; color: var(--ink-soft); margin-top: 4px; line-height: 1.3; }
.visual-line-card { background: rgba(255, 255, 255, 0.7); border-radius: 12px; padding: 16px; }
.visual-line-card .t { font-family: var(--font-body); font-size: 10.5px; margin-bottom: 8px; font-weight: 500; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.visual-bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.6); overflow: hidden; margin-bottom: 6px; }
.visual-bar i { display: block; height: 100%; }

.compare-section { background: var(--paper-soft); }
.compare-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.compare-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.compare-card .role-name { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; color: var(--ink); }
.compare-card .role-type { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 14px; }
.compare-card ul { margin: 0; padding-left: 16px; font-size: 12px; color: var(--ink-soft); line-height: 1.8; }

/* ---------- Blog list + post (re-themed to light) ---------- */
.blog-list { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.blog-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow); color: var(--ink); }
.blog-card-meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; font-weight: 500; }
.blog-cat-badge { background: var(--teal-tint); color: var(--teal-deep); border: 1px solid rgba(30, 110, 96, 0.2); border-radius: 100px; padding: 3px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: none; }
.blog-card-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
.blog-card-title a { color: var(--ink); text-decoration: none; }
.blog-card-title a:hover { color: var(--gold-bright); }
.blog-card-author { font-size: 13px; color: var(--ink-soft); font-weight: 500; margin-bottom: 12px; }
.blog-card-summary { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; }
.blog-card-cta { display: flex; justify-content: flex-end; }
.blog-card-link { color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; border-bottom: 1.5px solid var(--gold); padding-bottom: 2px; }
.blog-card-link:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.blog-empty { padding: 40px 24px; text-align: center; color: var(--ink-soft); background: var(--paper-soft); border: 1px solid var(--border); border-radius: 12px; font-size: 15px; }

/* Blog filters */
.blog-filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin: 0 0 24px; }
.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-chip { background: transparent; color: var(--ink-soft); border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.blog-chip:hover { border-color: var(--ink); color: var(--ink); }
.blog-chip.is-active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.blog-chip-count { opacity: 0.7; font-weight: 500; margin-left: 4px; }
.blog-filters-right { display: flex; gap: 8px; align-items: center; }
.blog-search, .blog-year { background: #fff; color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 9px 13px; font: inherit; font-size: 14px; }
.blog-search { min-width: 200px; }

/* Blog post detail */
.blog-post { color: var(--ink); }
.blog-post-meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; font-weight: 500; }
.blog-post-title { font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1.15; margin: 0 0 12px; color: var(--ink); }
.blog-post-author { font-size: 15px; color: var(--ink-soft); font-weight: 500; margin-bottom: 32px; }
.blog-post-body { color: var(--ink); line-height: 1.75; font-size: 17px; }
.blog-post-body h2, .blog-post-body h3 { color: var(--ink); margin: 32px 0 12px; font-family: var(--font-display); font-weight: 700; }
.blog-post-body p { margin: 0 0 18px; color: var(--ink-soft); }
.blog-post-body a { color: var(--gold-bright); border-bottom: 1px solid var(--gold); }
.blog-post-body a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.blog-post-body ul, .blog-post-body ol { margin: 0 0 18px 24px; color: var(--ink-soft); }
.blog-post-body blockquote { margin: 18px 0; padding: 8px 20px; border-left: 3px solid var(--gold); color: var(--ink); font-style: italic; }
.blog-post-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 18px 0; }
/* Neutralize inline background/color styles pasted from Word/Google Docs so the
   post reads as ink-on-paper regardless of what was in the source. */
.blog-post-body, .blog-post-body * { background: transparent !important; background-color: transparent !important; }
.blog-post-body *:not(a) { color: var(--ink-soft) !important; }
.blog-post-body h1, .blog-post-body h2, .blog-post-body h3, .blog-post-body h4 { color: var(--ink) !important; }
.blog-post-back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 28px; letter-spacing: 0.02em; }
.blog-post-back:hover { color: var(--ink); }

/* ---------- Legal pages (privacy / terms / security / etc) ---------- */
.legal-wrap { max-width: 860px; margin-top: 12px; }
.legal-wrap h2 { font-size: 22px; margin: 48px 0 12px; color: var(--ink); font-family: var(--font-body); font-weight: 600; }
.legal-wrap h3 { font-size: 16px; margin: 24px 0 8px; color: var(--ink); font-weight: 600; }
.legal-wrap p, .legal-wrap li { color: var(--ink-soft); line-height: 1.7; font-size: 15px; }
.legal-wrap p { margin: 0 0 14px; }
.legal-wrap ul { padding-left: 22px; margin: 0 0 14px; }
.legal-wrap li { margin-bottom: 6px; }
.legal-wrap a { color: var(--gold-bright); border-bottom: 1px solid var(--gold); }
.legal-wrap a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- Footer ---------- */
footer {
    background: var(--paper-soft);
    color: var(--ink-soft);
    padding: 64px 0 28px;
    border-top: 1px solid var(--border);
}
.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--border);
}
.footer-brand .logo-mark { color: var(--ink); }
.footer-brand p { font-size: 13.5px; line-height: 1.6; margin: 14px 0 18px; max-width: 260px; }
.footer-col-title { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; font-weight: 500; }
.footer-col a { display: block; font-size: 13.5px; color: var(--ink-soft); padding: 6px 0; text-decoration: none; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 22px;
    font-size: 12.5px;
    color: var(--ink-soft);
    flex-wrap: wrap;
    gap: 10px;
}

/* Legacy footer aliases so old footer markup still styles cleanly during migration */
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--border); }
.foot-brand p, .foot-brand .lede { font-size: 13.5px; line-height: 1.6; margin: 14px 0 18px; max-width: 260px; color: var(--ink-soft); }
.foot-brand .brand-logo { height: 30px; }
.foot-col h5 { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; font-weight: 500; }
.foot-col a { display: block; font-size: 13.5px; color: var(--ink-soft); padding: 6px 0; text-decoration: none; }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; gap: 10px; margin-top: 44px; border-top: 1px solid var(--border); }

/* ---------- Site-page routing helper (SPA-style page containers) ---------- */
.site-page { width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .footer-top, .foot-grid { grid-template-columns: 1fr 1fr; }
    .compare-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .hero-inner,
    .product-preview .wrap,
    .home-diff-wrap,
    .audience .wrap,
    .feature-section .wrap,
    .flagship,
    .consumer-grid,
    .role-inner { grid-template-columns: 1fr; }
    .role-inner.flip .role-copy,
    .role-inner.flip .role-visual { order: initial; }
    .hero-inner { gap: 40px; }
    .hero-visual { order: -1; }
    .pillar-grid { grid-template-columns: 1fr 1fr; }
    .pain-grid, .benefit-grid, .diff-grid { grid-template-columns: 1fr 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .book-card { grid-template-columns: 140px 1fr; }
    .book-card .btn { grid-column: 1 / -1; justify-content: center; }
    .diff-strip { padding: 20px 26px; }
    .flagship-visual { order: -1; }
}
/* Nav collapses to the hamburger here rather than at 680px. The full row needs
   about 1130px of usable width, so this leaves a little headroom for font
   rendering differences rather than letting it overflow. */
@media (max-width: 1240px) {
    .nav-links, .nav-cta .btn-ghost { display: none; }
    .hamburger { display: block; }
    .mega { position: static; width: 100%; box-shadow: none; border: none; padding: 6px 0 6px 14px; display: none; }
    .mega.mega-right { right: auto; }
    .nav-item.mobile-open .mega { display: grid; grid-template-columns: 1fr; }
    .mobile-menu { flex-direction: column; padding: 8px 24px 20px; gap: 2px; background: #fff; border-bottom: 1px solid var(--border); }
    .mobile-menu.open { display: flex; }
    /* nowrap is a desktop-row rule only. In the stacked mobile panel long
       labels like "Governance Implementation Program" must be free to wrap. */
    .mobile-menu .nav-link { justify-content: space-between; width: 100%; white-space: normal; }
}
/* At its 91px height the logo is 330px wide, which overruns a small phone once
   the hamburger is alongside it. max-width can't cap it (the flex parent is
   auto width), so step the height down instead; width:auto keeps the ratio.
   440px is where 330px logo + 36px hamburger + gap stops fitting the box. */
@media (max-width: 440px) {
    .logo-img { height: 64px; }
}
@media (max-width: 680px) {
    .utility-bar, .promo-strip { font-size: 12px; padding: 8px 12px; }
    .nav-cta { gap: 8px; }
    .nav-cta .btn { padding: 9px 14px; font-size: 13px; }
    .home-hero { padding: 36px 0 30px; }
    .home-hero h1 { font-size: 34px; }
    .home-hero p.lede { font-size: 16px; }
    .page-hero h1, .gov-hero h1, .roles-hero h1 { font-size: 30px; }
    section { padding: 56px 0; }
    .section-head h2 { font-size: 26px; }
    .pillar-grid, .stat-grid, .pain-grid, .benefit-grid, .diff-grid, .role-grid { grid-template-columns: 1fr; }
    .footer-top, .foot-grid { grid-template-columns: 1fr; gap: 28px; }
    .book-card { grid-template-columns: 1fr; text-align: center; }
    .book-cover-img { width: 160px; margin: 0 auto; }
    .float-card { display: none; }
    .diff-band h2, .final-cta h2 { font-size: 26px; }
    .feature-row { grid-template-columns: 1fr; gap: 14px; }
    .feature-rail { flex-direction: row; justify-content: flex-start; gap: 12px; }
    .benefit-mini-grid { grid-template-columns: 1fr; }
    .compare-grid { grid-template-columns: 1fr; }
    .flagship-copy { padding: 28px; }
    .flagship-visual { padding: 22px; }
}