/* ==========================================================================
   CortexPM public site: shared tokens, buttons, nav and footer
   Nov 2026 redesign. Linked from public_base.html on every public page.
   Page-specific styles live beside their page (e.g. css/home.css).
   ========================================================================== */

:root {
    --site-ink: #110E1B;          /* hero / dark sections */
    --site-ink-2: #17141F;        /* dark cards, body text on light */
    --site-ink-3: #0C0A14;        /* footer */
    --site-paper: #F6F5F2;        /* alternate light sections */
    --site-panel: #EEEBF6;        /* tinted screenshot panels */
    --site-line: #D9D5E0;
    --site-text: #17141F;
    --site-text-2: #3A3646;
    --site-muted: #5E5A6B;        /* 6.7:1 on white */
    --site-subtle: #6B6680;       /* 5.5:1 on white */
    --site-on-dark: #F4F2F8;
    --site-on-dark-muted: #B4AEC6;
    --site-on-dark-subtle: #9A93B0;
    --site-on-dark-link: #DDD8EA;
    --site-accent: #5B3CC4;       /* buttons, links on light (7.3:1 with white) */
    --site-accent-hover: #4E31B8;
    --site-highlight: #A99BFF;    /* accent on dark */
    --site-wordmark: #667EEA;     /* the "PM" in the nav wordmark */
    --site-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --site-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --site-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --site-container: 1200px;
    --site-gutter: clamp(16px, 4vw, 40px);
    --site-nav-height: 72px;
}

/* ---------- Buttons ---------- */
.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: var(--site-font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.site-btn svg { flex: none; }
.site-btn:focus-visible { outline: 2px solid var(--site-highlight); outline-offset: 2px; }
.site-btn--sm { height: 44px; padding: 0 18px; font-size: 15px; border-radius: 9px; }
.site-btn--primary { background: var(--site-accent); color: #fff; }
.site-btn--primary:hover, .site-btn--primary:focus { background: var(--site-accent-hover); color: #fff; }
.site-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .24); color: #fff; }
.site-btn--ghost:hover, .site-btn--ghost:focus { border-color: rgba(255, 255, 255, .5); color: #fff; }
.site-btn--outline { background: transparent; border-color: var(--site-text); color: var(--site-text); }
.site-btn--outline:hover, .site-btn--outline:focus { background: var(--site-text); color: #fff; }

/* ---------- Nav ---------- */
.site-nav.navbar {
    padding: 0;
    height: auto;                 /* custom.css fixes .navbar at 50px; the mobile menu needs to grow */
    min-height: var(--site-nav-height);
    background: rgba(17, 14, 27, .88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-family: var(--site-font-body);
    z-index: 1020;
}
.site-nav .site-nav__inner {
    max-width: var(--site-container);
    min-height: var(--site-nav-height);
    margin: 0 auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
}
.site-nav .site-nav__brand {
    margin: 0 32px 0 0;
    padding: 0;
    font-family: 'Poppins', var(--site-font-body);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
}
.site-nav .site-nav__brand:hover { color: #fff; }
.site-nav .site-nav__brand span { color: var(--site-wordmark); }
.site-nav .navbar-nav .nav-link {
    padding: 8px 16px;
    border-radius: 8px;
    background: transparent;
    font-family: var(--site-font-body);
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 500;
    color: #C9C3DA;
    transition: color .15s ease;
}
.site-nav .navbar-nav .nav-link:hover,
.site-nav .navbar-nav .nav-link:focus,
.site-nav .navbar-nav .nav-link.show { color: #fff; background: transparent; }
.site-nav .dropdown-menu {
    min-width: 230px;
    font-family: var(--site-font-body);
    letter-spacing: 0;
    margin-top: 8px;
    padding: 8px;
    background: #1A1626;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12px;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .6);
}
.site-nav .dropdown-item {
    display: block;
    padding: 8px 12px;
    font-family: var(--site-font-body);
    font-weight: 400;
    letter-spacing: 0;
    border-radius: 8px;
    font-size: 15px;
    color: var(--site-on-dark-link);
}
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus { background: rgba(255, 255, 255, .06); color: #fff; }
.site-nav .dropdown-item--all { font-weight: 600; color: #fff; }
.site-nav .dropdown-divider { border-color: rgba(255, 255, 255, .10); margin: 6px 0; }
.site-nav .site-nav__actions { display: flex; align-items: center; gap: 20px; }
.site-nav .site-nav__login { font-size: 15px; font-weight: 500; color: #fff; text-decoration: none; }
.site-nav .site-nav__login:hover { color: var(--site-highlight); }
.site-nav .navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
}
.site-nav .navbar-toggler:focus { box-shadow: 0 0 0 2px var(--site-highlight); }

@media (max-width: 991.98px) {
    .site-nav .navbar-collapse { padding: 8px 0 20px; }
    .site-nav .navbar-nav .nav-link { padding: 12px 0; font-size: 16px; }
    .site-nav .dropdown-menu {
        margin: 0 0 8px;
        padding: 0 0 0 12px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .site-nav .site-nav__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 8px;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }
    .site-nav .site-nav__login { padding: 10px 0; font-size: 16px; }
}

/* ==========================================================================
   Shared page components (homepage, feature pages, pricing, utility pages).
   Pages wrap their content in .site and set {% block body_class %} to
   site-page. Page-only styles go in css/pages/<page>.css (or css/home.css).
   ========================================================================== */

body.site-page { padding-top: 0; background: var(--site-ink); }

.site {
    background: #fff;
    color: var(--site-text);
    font-family: var(--site-font-body);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
/* :where() keeps the reset at one class of specificity, so a component's own
   margins (.site-related, .hp-stages, ...) win without needing to out-score it. */
.site :where(p, ul, ol, figure, blockquote) { margin: 0; }
.site :where(ul, ol) { padding: 0; list-style: none; }
.site img { display: block; max-width: 100%; height: auto; }
.site a { text-decoration: none; }

.site-container {
    max-width: var(--site-container);
    margin: 0 auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
}
.site-section { padding-top: clamp(80px, 9vw, 128px); padding-bottom: clamp(80px, 9vw, 128px); }
.site-section--paper { background: var(--site-paper); }
.site-section--white { background: #fff; }
.site-section--dark { background: var(--site-ink); color: var(--site-on-dark); }
.site-grid-bg {
    background-color: var(--site-ink);
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* ---------- Type ---------- */
.site-eyebrow {
    font-family: var(--site-font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--site-accent);
}
.site-eyebrow--on-dark { color: var(--site-highlight); }
.site .site-h2 {
    margin: 0;
    font-family: var(--site-font-display);
    font-size: clamp(32px, 3.6vw, 52px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: var(--site-text);
    text-wrap: balance;
}
.site .site-h2--sm { font-size: clamp(32px, 3.4vw, 48px); }
.site .site-h3 {
    margin: 0;
    font-family: var(--site-font-display);
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: var(--site-text);
}
.site .site-h4 {
    margin: 0;
    font-family: var(--site-font-display);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--site-text);
}
.site-section--dark .site-h2, .site-section--dark .site-h3, .site-section--dark .site-h4 { color: #fff; }
.site-lede { font-size: 18px; line-height: 1.6; color: var(--site-muted); text-wrap: pretty; }
.site-body { font-size: 17px; line-height: 1.6; color: var(--site-muted); }
.site-small { font-size: 16px; line-height: 1.6; color: var(--site-muted); }
.site-num { font-family: var(--site-font-mono); font-size: 13px; color: var(--site-subtle); }
.site-link { font-size: 16px; font-weight: 600; color: var(--site-accent); }
.site-link:hover { color: var(--site-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.site-link:focus-visible, .site a:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; border-radius: 4px; }
.site-intro { max-width: 820px; display: flex; flex-direction: column; gap: 20px; }
.site-intro--centre { max-width: 680px; margin: 0 auto; align-items: center; text-align: center; gap: 18px; }

.site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.site-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--site-on-dark-subtle); }

/* Check list: the tick is a CSS mask, so markup is just <li><span>text</span></li>. */
.site-checks { display: flex; flex-direction: column; gap: 10px; }
.site-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--site-text-2); }
.site-checks li::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    background-color: var(--site-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-checks .site-checks__lead::before { display: none; }
/* Things a plan or surface doesn't do: a muted dash instead of the tick. */
.site-checks--off li { color: var(--site-muted); }
.site-checks--off li::before { -webkit-mask: none; mask: none; height: 2px; margin-top: 11px; background-color: #B9B4C4; }

/* ---------- Hero (ink, with a product shot in a browser frame) ---------- */
.site-hero { color: var(--site-on-dark); overflow: hidden; padding-top: var(--site-nav-height); }
.site-hero__inner { padding-top: clamp(28px, 3vw, 44px); padding-bottom: clamp(56px, 6vw, 88px); }
/* The title gets the container's full width and tops out at 66px, so every feature page's
   headline (the longest is CRM's) sits on one line from 770px up instead of some breaking
   and some not. The lede keeps its own 640px measure. */
.site-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.site .site-hero__title {
    margin: 0;
    font-family: var(--site-font-display);
    font-size: clamp(40px, 5.2vw, 66px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.035em;
    color: #fff;
    text-wrap: balance;
}
.site-hero__title em { font-style: normal; color: var(--site-highlight); }
.site-hero__lede { max-width: 640px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--site-on-dark-muted); text-wrap: pretty; }
.site-hero__copy .site-actions { margin-top: 4px; }
.site-hero__product { position: relative; margin-top: clamp(40px, 4.5vw, 60px); }

.site-browser {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    background: #1C1828;
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .75);
}
.site-browser__bar { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.site-browser__dot { width: 10px; height: 10px; border-radius: 50%; background: #3A3448; }
.site-browser__url { margin-left: 16px; padding: 3px 14px; border-radius: 6px; background: rgba(255, 255, 255, .06); font-size: 12px; color: var(--site-on-dark-subtle); }
.site-browser img { width: 100%; }
@media (max-width: 575.98px) {
    .site-browser__url { display: none; }
    .site-hero__copy .site-actions .site-btn { width: 100%; }
}

/* Pause / play in the bar (public/_browser_toggle.html), for anything in the frame that moves.
   Whatever runs it puts .is-paused on an ancestor. */
.site-browser__toggle {
    margin-left: auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    color: var(--site-on-dark-muted);
    cursor: pointer;
}
.site-browser__toggle:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.site-browser__toggle:focus-visible { outline: 2px solid var(--site-highlight); outline-offset: 3px; }
.site-browser__icon-play, .is-paused .site-browser__icon-pause { display: none; }
.is-paused .site-browser__icon-play { display: block; }

/* ---------- Live instrument (feature-page heroes; js/site-instrument.js) ----------
   A working miniature of a module in the hero's browser frame, on a 3D stage that bobs and
   tilts toward the pointer. This is the shell every instrument shares: the stage, the board's
   header (title, live line, figures, status) and its activity footer. Each page's own body is
   in css/pages/<page>.css and its script of steps in js/pages/<page>.js. */
.site-instrument { perspective: 1600px; }
.site-instrument__device { transform: rotateX(1.2deg) rotateY(-1.2deg); transform-style: preserve-3d; will-change: transform; }
.site-instrument__board {
    padding: 18px 20px 14px;
    background: #fff;
    color: var(--site-text);
    font-family: var(--site-font-body);
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.site-instrument__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--site-line);
}
.site-instrument__title { font-family: var(--site-font-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--site-text); }
.site-instrument__sub {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--site-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--site-subtle);
}
.site-instrument__live { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; animation: site-live 2s ease-in-out infinite; }
@keyframes site-live { 50% { opacity: .35; } }
.site-instrument__figures { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-instrument__figure {
    min-width: 108px;
    padding: 6px 12px;
    border: 1px solid var(--site-line);
    border-radius: 10px;
    text-align: right;
}
.site-instrument__value { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--site-text); }
.site-instrument__label { display: block; font-family: var(--site-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--site-subtle); }
.site-instrument__figure--key .site-instrument__value { color: var(--site-accent); }
.site-instrument__figure.is-flash { animation: site-figure-flash .9s ease; }
@keyframes site-figure-flash { 0% { border-color: var(--site-accent); background: var(--site-panel); } }
.site-instrument__status {
    padding: 5px 11px;
    border-radius: 999px;
    background: #E7F5EC;
    color: #146C43;
    font-family: var(--site-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.site-instrument__foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--site-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.site-instrument__ticker { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.site-instrument__ticker-label { flex: none; font-family: var(--site-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--site-accent); }
.site-instrument__ticker-text {
    font-size: 13px;
    color: var(--site-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .25s ease, transform .25s ease;
}
.site-instrument__ticker-text.is-swapping { opacity: 0; transform: translateY(4px); }
.site-instrument__hint { flex: none; font-family: var(--site-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--site-subtle); }
/* A changed figure in a board pops once (kit.bump). */
.site-instrument .is-bumped { animation: site-bump .5s ease; }
@keyframes site-bump { 40% { transform: scale(1.08); color: var(--site-accent); } }
/* One rule for every board: the figures sit beside the title where all of them fit, and
   below it under 1024px, so no page wraps where another doesn't. */
@media (max-width: 1023.98px) {
    .site-instrument__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
    .site-instrument__board { padding: 14px 14px 12px; }
    .site-instrument__figure:not(.site-instrument__figure--key), .site-instrument__hint { display: none; }
    .site-instrument__figure { min-width: 0; }
}
@media (max-width: 480px) {
    .site-instrument__status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .site-instrument__live { animation: none; }
    .site-instrument__ticker-text { transition: none; }
}

/* ---------- Screenshot panel ---------- */
.site-panel { border-radius: 18px; background: var(--site-panel); padding: clamp(14px, 3vw, 40px); }
.site-panel--wide { margin-top: 56px; }
.site-shot {
    overflow: hidden;
    border: 1px solid var(--site-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 24px 48px -24px rgba(23, 20, 31, .28);
}
.site-shot img { width: 100%; }

/* ---------- Phone screenshots (site app), cropped by the panel's bottom edge ---------- */
.site-phones {
    overflow: hidden;
    border-radius: 18px;
    background: var(--site-panel);
    padding: clamp(24px, 4vw, 48px) clamp(14px, 3vw, 40px) 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(10px, 2vw, 24px);
}
.site-phones__item { flex: 0 1 220px; min-width: 0; margin-bottom: -40px; padding: 6px; border-radius: 30px 30px 0 0; background: var(--site-ink); }
.site-phones__item--raised { margin-bottom: 0; }
.site-phones__item img { width: 100%; border-radius: 24px 24px 0 0; }
.site-phones__item--tablet { flex-basis: 360px; border-radius: 22px 22px 0 0; }
.site-phones__item--tablet img { border-radius: 16px 16px 0 0; }
.site-phones--on-dark { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.site-phones--on-dark .site-phones__item { background: #0B0912; border: 1px solid rgba(255, 255, 255, .14); }

/* ---------- Points (short headed paragraphs in a grid) ---------- */
.site-points { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 32px 48px; }
.site-point { display: flex; flex-direction: column; gap: 8px; }
.site .site-point h3 { margin: 0; font-family: var(--site-font-body); font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.35; color: var(--site-text); }

/* ---------- Alternating feature rows ---------- */
.site-rows { display: flex; flex-direction: column; gap: clamp(80px, 9vw, 128px); }
.site-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 5vw, 80px); }
.site-row__copy { flex: 1 1 360px; max-width: 460px; display: flex; flex-direction: column; gap: 20px; }
.site-row__media { flex: 999 1 540px; min-width: 0; }
/* Once the row stacks (copy 360 + media 540 + gap 80 no longer fit), the copy leads. */
@media (max-width: 1059.98px) { .site-row__copy { order: -1; } }

/* ---------- Works with (related modules) and Toolbox links ---------- */
.site-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); column-gap: 40px; margin-top: 40px; }
.site-related a {
    min-height: 44px;
    height: 100%;
    padding: 24px 0 28px;
    border-top: 1px solid var(--site-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--site-text);
}
.site-related__name { font-family: var(--site-font-display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.site-related__name::after { content: " \2192"; color: var(--site-accent); }
.site-related__desc { font-size: 16px; line-height: 1.55; color: var(--site-muted); }
.site-related a:hover .site-related__name { color: var(--site-accent); }
.site-related__more { margin-top: 24px; }

/* ---------- Plans (homepage and /pricing/) ---------- */
.site-plans { max-width: 940px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; }
.site-plan {
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--site-line);
    border-radius: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.site-plan--featured { border-color: var(--site-ink-2); background: var(--site-ink-2); color: var(--site-on-dark); }
.site-plan__head { display: flex; flex-direction: column; gap: 6px; }
.site-plan__title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site .site-plan__name { margin: 0; font-family: var(--site-font-display); font-size: 22px; font-weight: 600; letter-spacing: 0; color: var(--site-text); }
.site-plan--featured .site-plan__name { color: #fff; }
.site-plan__tag { padding: 4px 10px; border-radius: 999px; background: var(--site-highlight); color: var(--site-ink); font-size: 12px; font-weight: 600; }
.site-plan__limits { font-size: 15px; color: var(--site-muted); }
.site-plan--featured .site-plan__limits { color: var(--site-on-dark-muted); }
.site-plan__price-row { display: flex; align-items: baseline; gap: 6px; }
.site-plan__price { font-family: var(--site-font-display); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--site-text); }
.site-plan--featured .site-plan__price { color: #fff; }
.site-plan__per { font-size: 16px; color: var(--site-muted); }
.site-plan--featured .site-plan__per { color: var(--site-on-dark-muted); }
.site-plan__annual { display: block; margin-top: 4px; font-size: 14px; color: var(--site-subtle); }
.site-plan--featured .site-plan__annual { color: var(--site-on-dark-subtle); }
.site-plan .site-checks { flex: 1; padding-top: 24px; border-top: 1px solid #E5E2EA; }
.site-plan .site-checks li { font-size: 15px; }
.site-plan--featured .site-checks { border-top-color: rgba(255, 255, 255, .12); }
.site-plan--featured .site-checks li { color: var(--site-on-dark-link); }
.site-plan--featured .site-checks li::before { background-color: var(--site-highlight); }
.site-plan--featured .site-checks .site-checks__lead { font-weight: 600; color: #fff; }
.site-plan .site-btn { width: 100%; height: 50px; }

/* ---------- Final CTA band (public/_final_cta.html) ---------- */
.site-final { color: var(--site-on-dark); }
.site-final__inner {
    padding-top: clamp(88px, 10vw, 144px);
    padding-bottom: clamp(88px, 10vw, 144px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}
.site .site-final__title {
    max-width: 820px;
    margin: 0;
    font-family: var(--site-font-display);
    font-size: clamp(36px, 4.6vw, 68px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.035em;
    color: #fff;
    text-wrap: balance;
}
.site-final__lede { max-width: 560px; font-size: 19px; line-height: 1.55; color: var(--site-on-dark-muted); }
.site-final .site-actions { justify-content: center; margin-top: 8px; }

/* ---------- Prose pages (public/prose_base.html): title band + reading column ---------- */
.site-prose-band { color: var(--site-on-dark); padding-top: var(--site-nav-height); }
.site-prose-band__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 80px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.site .site-prose-band__title {
    margin: 0;
    font-family: var(--site-font-display);
    font-size: clamp(36px, 4.6vw, 60px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.03em;
    color: #fff;
    text-wrap: balance;
}
.site-prose-band__meta { margin: 0; font-size: 15px; color: var(--site-on-dark-muted); }
.site-prose-band__lede { margin: 0; max-width: 640px; font-size: 19px; line-height: 1.55; color: var(--site-on-dark-muted); }
.site-prose-section { padding-top: clamp(48px, 6vw, 80px); }

.site-prose { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--site-text-2); overflow-wrap: break-word; }
.site-prose > * + * { margin-top: 1.1em; }
.site .site-prose h2 {
    margin: 2.2em 0 0;
    font-family: var(--site-font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--site-text);
}
.site .site-prose h3 { margin: 1.8em 0 0; font-family: var(--site-font-display); font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--site-text); }
.site .site-prose h4 { margin: 1.4em 0 0; font-family: var(--site-font-display); font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--site-text); }
.site .site-prose > :first-child, .site .site-prose h2 + *, .site .site-prose h3 + *, .site .site-prose h4 + * { margin-top: .6em; }
.site .site-prose > :first-child { margin-top: 0; }
.site .site-prose ul { list-style: disc; padding-left: 1.4em; }
.site .site-prose ol { list-style: decimal; padding-left: 1.4em; }
.site-prose li + li { margin-top: .4em; }
.site-prose li > ul, .site-prose li > ol { margin-top: .4em; }
.site-prose strong, .site-prose b { font-weight: 600; color: var(--site-text); }
/* Text links only: buttons (.site-btn) in the column keep their own colours. */
.site .site-prose a:not(.site-btn) { color: var(--site-accent); text-decoration: underline; text-underline-offset: 3px; }
.site .site-prose a:not(.site-btn):hover { color: var(--site-accent-hover); }
.site-prose hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--site-line); opacity: 1; }
.site-prose hr + * { margin-top: 0; }
.site-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.site-prose th, .site-prose td { padding: 10px 12px; border-bottom: 1px solid var(--site-line); text-align: left; vertical-align: top; }
.site-prose thead th { border-bottom: 2px solid var(--site-text); font-weight: 600; color: var(--site-text); }
.site-prose .table-responsive { overflow-x: auto; }
.site-prose__note { padding: 20px 24px; border: 1px solid var(--site-line); border-radius: 12px; background: var(--site-paper); }
.site-prose__note > * + * { margin-top: .6em; }
.site .site-prose .site-prose__note h4, .site .site-prose .site-prose__note h3 { margin-top: 0; }
/* Link grids (.site-related) inside a prose column keep their own look. */
.site .site-prose .site-related { list-style: none; padding-left: 0; }
.site .site-prose .site-related li + li { margin-top: 0; }
.site .site-prose .site-related a { color: var(--site-text); text-decoration: none; }
.site .site-prose .site-related a:hover .site-related__name { color: var(--site-accent); }

/* ---------- Book-a-demo modal (public/_book_demo_modal.html) ---------- */
.site-modal .modal-content {
    background: var(--site-ink-2);
    color: var(--site-on-dark);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    font-family: var(--site-font-body);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7);
}
.site-modal .modal-header { padding: 22px 24px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.site-modal .modal-title { margin: 0; font-family: var(--site-font-display); font-size: 22px; font-weight: 700; letter-spacing: -.015em; color: #fff; }
.site-modal .modal-body { padding: 20px 24px 8px; }
.site-modal .modal-footer { padding: 16px 24px 22px; border-top: 1px solid rgba(255, 255, 255, .08); gap: 8px; }
.site-modal .modal-footer > * { margin: 0; }
.site-modal__intro { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--site-on-dark-muted); }
.site-modal__field { margin-bottom: 16px; }
.site-modal .form-label { margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--site-on-dark-link); }
.site-modal__optional { font-weight: 400; color: var(--site-on-dark-subtle); }
.site-modal .form-control,
.site-modal .form-select {
    min-height: 44px;
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    color: #fff;
    font-size: 15px;
}
.site-modal .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23DDD8EA' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.site-modal .form-select option { color: var(--site-text); }
.site-modal .form-control::placeholder { color: var(--site-on-dark-subtle); }
.site-modal .form-control:focus,
.site-modal .form-select:focus {
    background-color: rgba(255, 255, 255, .07);
    border-color: var(--site-highlight);
    box-shadow: 0 0 0 3px rgba(169, 155, 255, .25);
    color: #fff;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--site-ink-3);
    color: var(--site-on-dark-muted);
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-family: var(--site-font-body);
}
.site-footer__inner {
    max-width: var(--site-container);
    margin: 0 auto;
    padding: 72px var(--site-gutter) 40px;
}
.site-footer__cols { display: flex; flex-wrap: wrap; gap: 48px; }
.site-footer__brand { flex: 2 1 260px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.site-footer__logo { display: block; width: auto; height: 64px; }
.site-footer__tagline { margin: 0; font-size: 15px; line-height: 1.5; color: var(--site-on-dark-muted); }
.site-footer__col { flex: 1 1 150px; }
.site-footer .site-footer__heading {
    margin: 0 0 14px;
    font-family: var(--site-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--site-on-dark-subtle);
}
.site-footer__links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.site-footer__links a { font-size: 15px; color: var(--site-on-dark-link); text-decoration: none; }
.site-footer__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
}
.site-footer__fineprint { margin: 0; font-size: 12px; line-height: 1.5; color: #8E88A3; }