/* Compera design system — "Editorial".
 *
 * Paper, ink and one green. Newsreader for display, Instrument Sans for text.
 * Everything is prefixed cx- so it can sit beside Bootstrap/Nexus on the
 * client-area and cart pages without either side leaking into the other.
 * Page-level base styles apply only on lean pages (body.cx-lean), which load
 * this file alone.
 */

/* Fonts: latin subsets, self-hosted. Newsreader ships as three static cuts;
   each @font-face claims a weight range so any 400–700 request maps to a real
   file instead of a synthesised bold. */
/* Text cut: Newsreader at the 30pt optical size, variable weight 400–560
   (450 text, 500 names, 560 logo). Serif text on the site runs 22–44px. */
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-text-var.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-text-italic-450.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
/* Display cut: the 72pt optical size at weight 440, for type of 44px and up.
   The design sets Newsreader with font-optical-sizing (opsz 6–72); the text
   cut above is the 18pt one, which is ~wider and softer at headline sizes. */
@font-face { font-family: "Newsreader Display"; src: url("../fonts/newsreader-display-440.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader Display"; src: url("../fonts/newsreader-display-italic-440.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* Metric-matched fallbacks keep the layout still while the webfonts load.
   Values computed from the font files (letter-frequency-weighted advance
   widths, typo ascender/descender), against Georgia and Arial. */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 94.87%; ascent-override: 77.48%; descent-override: 27.93%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Display Fallback"; src: local("Georgia"); size-adjust: 102.57%; ascent-override: 71.66%; descent-override: 25.84%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 103.25%; ascent-override: 93.95%; descent-override: 24.21%; line-gap-override: 0%; }

:root {
    --cx-paper: #F5F2EA;
    --cx-paper-2: #EBE5D8;
    --cx-paper-hi: #FBF9F4;
    --cx-rule: #D8D0BF;
    --cx-rule-soft: #E3DCCD;
    --cx-ink: #17150F;
    --cx-ink-2: #4F4A40;
    --cx-ink-body: #2E2A23;
    --cx-green: #1D5A38;
    --cx-green-deep: #123A24;
    --cx-mint: #8FD3A6;
    --cx-night-rule: #3A362E;
    --cx-night-muted: #BDB5A4;
    --cx-serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
    --cx-display: "Newsreader Display", "Newsreader Display Fallback", Georgia, "Times New Roman", serif;
    --cx-sans: "Instrument Sans", "Instrument Sans Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --cx-wrap: 1200px;
    --cx-gutter: clamp(16px, 4vw, 48px);
    --cx-section: clamp(56px, 7vw, 104px);
    --cx-radius: 3px;
}

/* ---------- Lean-page base ---------- */
body.cx-lean {
    margin: 0;
    background: var(--cx-paper);
    color: var(--cx-ink);
    font-family: var(--cx-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body.cx-lean *, body.cx-lean *::before, body.cx-lean *::after { box-sizing: border-box; }
body.cx-lean img, body.cx-lean svg { display: block; max-width: 100%; }
body.cx-lean a { color: var(--cx-ink); }
body.cx-lean a:hover { color: var(--cx-green); }
body.cx-lean h1, body.cx-lean h2, body.cx-lean h3, body.cx-lean p, body.cx-lean ul, body.cx-lean figure { margin: 0; }
body.cx-lean button, body.cx-lean input { font: inherit; color: inherit; }
.cx :focus-visible { outline: 2px solid var(--cx-green); outline-offset: 3px; }
.cx-main { display: block; }

/* ---------- Primitives ---------- */
/* The design's .wrap is content-box: 1200px of content, gutters outside it.
   Pages still on the Nexus layout (client area, cart) keep header and footer
   on Bootstrap's 1110px container, so their edges line up. */
.cx-wrap { max-width: calc(var(--cx-wrap) + 2 * var(--cx-gutter)); margin: 0 auto; padding-left: var(--cx-gutter); padding-right: var(--cx-gutter); }
.cx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cx-tnum { font-variant-numeric: tabular-nums; }
.cx-serif { font-family: var(--cx-serif); }
.cx-eyebrow { font-family: var(--cx-sans); font-size: 12px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--cx-ink-2); }
.cx-h1 { font-family: var(--cx-serif); font-weight: 440; font-size: clamp(56px, 8.4vw, 124px); line-height: .94; letter-spacing: -.04em; color: var(--cx-ink); }
.cx-h2 { font-family: var(--cx-serif); font-weight: 450; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.03em; color: var(--cx-ink); text-wrap: balance; }
.cx-h1 em, .cx-h2 em, .cx-quote em, .cx-cta__title em { font-style: italic; }
.cx-lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; max-width: 34em; color: var(--cx-ink-body); }
.cx-muted { color: var(--cx-ink-2); }
.cx-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--cx-ink); color: var(--cx-paper) !important; font: 600 15px/1.2 var(--cx-sans); text-decoration: none; border-radius: var(--cx-radius); }
.cx-skip:focus { top: 12px; }

.cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--cx-radius); font: 600 15px/1.2 var(--cx-sans); text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.cx-btn--ink { background: var(--cx-ink); color: var(--cx-paper) !important; }
.cx-btn--ink:hover { background: var(--cx-green); color: #fff !important; }
.cx-btn--line { border-color: var(--cx-ink); color: var(--cx-ink) !important; background: transparent; }
.cx-btn--line:hover { background: var(--cx-ink); color: var(--cx-paper) !important; }
.cx-btn--paper { background: var(--cx-paper); color: var(--cx-ink) !important; }
.cx-btn--paper:hover { background: #fff; }
.cx-btn--ghost-light { border-color: var(--cx-paper); color: var(--cx-paper) !important; background: transparent; }
.cx-btn--ghost-light:hover { background: var(--cx-paper); color: var(--cx-ink) !important; }
.cx-btn--lg { min-height: 54px; padding: 0 28px; font-size: 15px; }
.cx-more { color: var(--cx-ink) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.cx-more:hover { color: var(--cx-green) !important; }
.cx-dot { display: inline-block; width: .22em; height: .22em; border-radius: 50%; background: var(--cx-green); margin-left: .06em; }

/* ---------- Header ---------- */
/* No backdrop-filter here: it would make the header the containing block of
   the fixed mobile-menu panel and squash it to the header's height. */
.cx-header { position: sticky; top: 0; z-index: 60; background: var(--cx-paper); border-bottom: 1px solid var(--cx-rule); font-family: var(--cx-sans); }
.cx-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.cx-logo { display: inline-flex; align-items: baseline; flex: 0 0 auto; color: var(--cx-ink) !important; text-decoration: none !important; }
.cx-logo__word { font-family: var(--cx-serif); font-weight: 560; font-size: 32px; line-height: 1; letter-spacing: -.035em; }
.cx-logo__dot { width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: var(--cx-green); }
.cx-nav { display: flex; align-items: center; gap: 30px; flex: 1 1 auto; margin: 0; padding: 0 0 0 20px; list-style: none; }
.cx-nav > a, .cx-nav > li > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cx-ink) !important; font: 500 15px/1.2 var(--cx-sans); text-decoration: none !important; background: none; }
.cx-nav > a:hover, .cx-nav > li > a:hover, .cx-nav > .active > a, .cx-nav > a[aria-current="page"] { color: var(--cx-green) !important; text-decoration: underline !important; text-underline-offset: 6px; }
.cx-nav > li { list-style: none; position: relative; }
.cx-nav > li.d-none { display: none !important; }
.cx-nav .c-nav-ico { display: none; }
.cx-header__end { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.cx-header__end > ul { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cx-header__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--cx-ink) !important; font: 500 15px/1.2 var(--cx-sans); text-decoration: none !important; }
.cx-header__link:hover { color: var(--cx-green) !important; text-decoration: underline !important; text-underline-offset: 6px; }
.cx-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--cx-radius); background: transparent; color: var(--cx-ink) !important; cursor: pointer; }
.cx-iconbtn:hover { background: var(--cx-paper-2); }
.cx-iconbtn svg { width: 22px; height: 22px; }
.cx-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--cx-green); color: #fff; font: 600 11px/18px var(--cx-sans); text-align: center; }
.cx-badge[hidden] { display: none; }

/* Mobile menu: a <details> disclosure, so it works without any JavaScript. */
.cx-menu { position: relative; display: none; }
.cx-menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--cx-ink); border-radius: var(--cx-radius); cursor: pointer; color: var(--cx-ink); }
.cx-menu > summary::-webkit-details-marker { display: none; }
.cx-menu > summary svg { width: 20px; height: 20px; }
.cx-menu .cx-menu__close { display: none; }
.cx-menu[open] .cx-menu__open { display: none; }
.cx-menu[open] .cx-menu__close { display: block; }
.cx-menu__panel { position: fixed; left: 0; right: 0; top: 77px; bottom: 0; overflow-y: auto; background: var(--cx-paper); border-top: 1px solid var(--cx-rule); padding: 8px var(--cx-gutter) 32px; }
.cx-menu__list { margin: 0; padding: 0; list-style: none; }
.cx-menu__list a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-bottom: 1px solid var(--cx-rule); color: var(--cx-ink) !important; font: 450 26px/1.1 var(--cx-serif); letter-spacing: -.02em; text-decoration: none !important; }
.cx-menu__list .cx-menu__sub a { min-height: 46px; padding-left: 16px; font: 500 16px/1.2 var(--cx-sans); letter-spacing: 0; }
.cx-menu__group { display: block; padding: 22px 0 6px; }
.cx-menu__foot { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.cx-menu__foot .cx-btn { width: 100%; }
.cx-menu__note { margin-top: 8px !important; color: var(--cx-ink-2); font-size: 15px; }
a[href^="tel:"], a[href*="wa.me"] { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 1120px) { .cx-header__phone { display: none !important; } }
@media (max-width: 900px) {
    .cx-nav, .cx-header__login, .cx-header__cta, .cx-header__account { display: none !important; }
    .cx-menu { display: block; }
}

.cx-adminbar { background: var(--cx-ink); color: var(--cx-paper); font: 500 14px/1.3 var(--cx-sans); }
.cx-adminbar .cx-wrap { display: flex; justify-content: flex-end; padding-top: 8px; padding-bottom: 8px; }
.cx-adminbar a { color: var(--cx-paper) !important; text-decoration: underline !important; text-underline-offset: 4px; }

/* ---------- Sections ---------- */
.cx-section { padding: var(--cx-section) 0; }
.cx-section--bright { background: var(--cx-paper-hi); border-top: 1px solid var(--cx-rule); border-bottom: 1px solid var(--cx-rule); }
.cx-section--sunk { background: var(--cx-paper-2); }
.cx-section--ink { background: var(--cx-ink); color: var(--cx-paper); }
.cx-section--tight-top { padding-top: 0; }
/* Section rhythm as in the design: proof, picker, credentials and FAQ sit a
   little tighter (96px, 36px stack gap); the ink support band breathes more. */
.cx-section--compact { padding: clamp(56px, 7vw, 96px) 0; }
.cx-section--compact.cx-section--tight-top { padding-top: 0; }
.cx-section--compact > .cx-stack { gap: 36px; }
.cx-section.cx-section--ink { padding: clamp(64px, 8vw, 120px) 0; }
.cx-stack { display: flex; flex-direction: column; gap: 44px; }
.cx-sechead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.cx-sechead__title { display: flex; flex-direction: column; gap: 14px; max-width: 800px; }
.cx-sechead > .cx-sechead__title { flex: 1 1 480px; }
.cx-sechead__note { max-width: 360px; color: var(--cx-ink-2); }
.cx-sechead > .cx-sechead__note { flex: 0 1 360px; }

/* ---------- Hero ---------- */
.cx-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); }
.cx-hero__grid { display: flex; flex-wrap: wrap; gap: clamp(40px, 5vw, 72px); align-items: flex-start; }
.cx-hero__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.cx-hero__main .cx-h1 em { color: var(--cx-green); }
.cx-search { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.cx-search__row { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-search__input { flex: 1 1 280px; min-width: 0; height: 60px; padding: 0 18px; border: 1px solid var(--cx-ink); border-radius: var(--cx-radius); background: var(--cx-paper-hi); color: var(--cx-ink); font: 400 19px/1 var(--cx-sans); }
.cx-search__input::placeholder { color: #8A8274; }
.cx-search__input:focus { outline: 2px solid var(--cx-green); outline-offset: 2px; }
.cx-search__btns { display: flex; gap: 8px; }
.cx-search__btns .cx-btn { height: 60px; }
.cx-search__go { padding: 0 30px; font-size: 16px; }
.cx-tldline { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; color: var(--cx-ink-2); }
.cx-tldline strong { color: var(--cx-ink); font-weight: 600; }
.cx-tldline > span:last-child { flex-basis: 100%; }
.cx-rowlink { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; max-width: 620px; padding: 14px 0; border-top: 1px solid var(--cx-rule); border-bottom: 1px solid var(--cx-rule); color: var(--cx-ink) !important; text-decoration: none !important; }
.cx-rowlink:hover { color: var(--cx-green) !important; }
.cx-rowlink span span { color: var(--cx-ink-2); }
@media (max-width: 700px) { .cx-search__btns { flex: 1 1 100%; } .cx-search__btns .cx-btn { flex: 1 1 0; } }

.cx-ledger { flex: 1 1 360px; min-width: 0; border-top: 2px solid var(--cx-ink); padding-top: 18px; }
.cx-ledger__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; }
.cx-ledger__title { font-family: var(--cx-serif); font-size: 26px; letter-spacing: -.01em; }
.cx-ledger dl { display: grid; grid-template-columns: 112px 1fr; column-gap: 16px; margin: 0; font-size: 15px; border-bottom: 1px solid var(--cx-rule); }
.cx-ledger dt, .cx-ledger dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--cx-rule); }
.cx-ledger dt { padding-top: 13px; }
.cx-ledger a { color: var(--cx-ink); font-weight: 600; text-underline-offset: 4px; }

/* ---------- Proof ---------- */
.cx-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 32px 28px; }
.cx-proof__tile { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--cx-ink); padding-top: 18px; color: var(--cx-ink) !important; text-decoration: none !important; }
.cx-proof__value { font-family: var(--cx-serif); font-size: clamp(46px, 4.8vw, 64px); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.cx-proof__value small { font-size: .42em; letter-spacing: 0; color: var(--cx-ink-2); }
.cx-proof__desc { font-size: 15px; color: var(--cx-ink-body); min-height: 46px; }
.cx-proof__bench { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.45; color: var(--cx-ink-2); }
.cx-proof__bench .cx-eyebrow { font-size: 10.5px; color: var(--cx-green); }
.cx-proof__src { font-size: 13px; color: var(--cx-ink-2); border-top: 1px solid var(--cx-rule-soft); padding-top: 10px; margin-top: auto; }
.cx-proof__src a { color: var(--cx-ink-2) !important; text-decoration: underline; text-underline-offset: 3px; }
.cx-proof__src a:hover { color: var(--cx-green) !important; }
/* Subgrid lines the tiles up row by row (label, figure, note, benchmark,
   source), so every source rule sits at the same height across the row. */
@supports (grid-template-rows: subgrid) {
  .cx-proof__tile { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
  .cx-proof__src { grid-row: 5; margin-top: 0; align-self: start; }
}
a.cx-proof__tile:hover .cx-proof__src { color: var(--cx-green); text-decoration: underline; }

/* ---------- Situation picker ---------- */
.cx-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 0 48px; border-bottom: 1px solid var(--cx-ink); }
.cx-pick { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; border-top: 1px solid var(--cx-ink); color: var(--cx-ink) !important; text-decoration: none !important; }
.cx-pick__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cx-pick__title { font-family: var(--cx-serif); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.02em; }
.cx-pick__sub { font-size: 15px; color: var(--cx-ink-2); }
.cx-pick__arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--cx-ink); border-radius: 50%; transition: background-color .15s ease, color .15s ease; }
.cx-pick__arrow svg { width: 18px; height: 18px; }
.cx-pick:hover .cx-pick__arrow { background: var(--cx-ink); color: var(--cx-paper); }
.cx-pick:hover .cx-pick__title { color: var(--cx-green); }

/* ---------- Plans ---------- */
.cx-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); border-top: 1px solid var(--cx-ink); }
.cx-plan { display: flex; flex-direction: column; gap: 20px; padding: 28px 28px 32px; border-right: 1px solid var(--cx-rule); }
.cx-plan:first-child { padding-left: 0; }
.cx-plan:last-child { padding-right: 0; border-right: 0; }
.cx-plan--pick { background: var(--cx-paper); box-shadow: inset 0 3px 0 var(--cx-green); padding-left: 28px !important; padding-right: 28px !important; }
.cx-plan__head { display: flex; flex-direction: column; gap: 6px; }
.cx-plan__name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--cx-serif); font-size: 30px; font-weight: 500; letter-spacing: -.02em; line-height: 1.5; }
.cx-plan__name .cx-eyebrow { color: var(--cx-green); }
.cx-plan__tag { font-size: 15px; color: var(--cx-ink-2); }
.cx-plan__price { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.cx-plan__amount { font-family: var(--cx-serif); font-size: 52px; line-height: 1; letter-spacing: -.03em; }
.cx-plan__per { color: var(--cx-ink-2); }
.cx-plan__billed { font-size: 14px; color: var(--cx-ink-2); }
.cx-plan__feat { list-style: none; margin: 0; padding: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.cx-plan__feat li { padding: 9px 0; border-top: 1px solid var(--cx-rule-soft); }
.cx-plan .cx-btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 700px) {
    .cx-plan { padding: 28px 0 32px !important; border-right: 0; border-bottom: 1px solid var(--cx-rule); }
    .cx-plan--pick { padding: 28px 16px 32px !important; margin: 0 -16px; }
}
.cx-morerows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 0 48px; }
.cx-morerows .cx-rowlink { max-width: none; border-top: 0; }

/* ---------- Managed websites: CSS-only tabs ---------- */
.cx-tabs__input { position: absolute; opacity: 0; pointer-events: none; }
.cx-tabs__bar { display: inline-flex; border: 1px solid var(--cx-ink); border-radius: var(--cx-radius); overflow: hidden; }
.cx-tabs__bar label { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; margin: 0; font: 600 15px/1 var(--cx-sans); cursor: pointer; color: var(--cx-ink); background: transparent; }
#cx-m-restaurants:checked ~ .cx-sechead label[for="cx-m-restaurants"],
#cx-m-business:checked ~ .cx-sechead label[for="cx-m-business"] { background: var(--cx-ink); color: var(--cx-paper); }
#cx-m-restaurants:focus-visible ~ .cx-sechead label[for="cx-m-restaurants"],
#cx-m-business:focus-visible ~ .cx-sechead label[for="cx-m-business"] { outline: 2px solid var(--cx-green); outline-offset: 2px; }
.cx-tiers { display: none; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 36px; }
#cx-m-restaurants:checked ~ .cx-tiers--restaurants,
#cx-m-business:checked ~ .cx-tiers--business { display: grid; }
.cx-tier { display: flex; flex-direction: column; gap: 16px; border-top: 2px solid var(--cx-ink); padding-top: 20px; }
.cx-tier--mid { border-top-color: var(--cx-green); }
.cx-tier__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cx-tier__name { font-family: var(--cx-serif); font-size: 28px; font-weight: 500; letter-spacing: -.01em; }
.cx-tier__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-tier__price strong { font-size: 22px; }
.cx-tier__price span { color: var(--cx-ink-2); }
.cx-tier p { color: var(--cx-ink-2); }
.cx-tier ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.cx-tier .cx-more { margin-top: auto; align-self: flex-start; }

/* ---------- Support (ink) ---------- */
.cx-support { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); align-items: flex-start; }
.cx-support__lead { flex: 1 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.cx-section--ink .cx-eyebrow { color: var(--cx-night-muted); }
.cx-quote { font-family: var(--cx-serif); font-size: clamp(34px, 4.2vw, 58px); line-height: 1.08; letter-spacing: -.025em; font-weight: 400; color: var(--cx-paper); }
.cx-quote em { color: var(--cx-mint); }
.cx-facts { flex: 1 1 340px; min-width: 0; border-top: 1px solid #4A453B; }
.cx-facts__row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #4A453B; }
.cx-facts__row dt { color: var(--cx-night-muted); }
.cx-facts__row dd { margin: 0; text-align: right; }
.cx-facts dl { margin: 0; }
/* Links in the list only: a wider ".cx-facts a" outranked .cx-btn--paper and
   turned the "Open a ticket" label paper-on-paper. */
.cx-facts dd a { color: var(--cx-paper) !important; }
.cx-facts__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- Infrastructure ---------- */
.cx-infra { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); align-items: stretch; }
.cx-specs { flex: 1 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 0 36px; align-content: start; margin: 0; }
.cx-specs div { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--cx-rule); font-variant-numeric: tabular-nums; }
.cx-specs dt { color: var(--cx-ink-2); }
.cx-specs dd { margin: 0; font-weight: 600; text-align: right; }
.cx-figure { flex: 1 1 340px; min-width: 0; background: var(--cx-paper-2); border-radius: 4px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.cx-figure svg { width: 100%; height: auto; }
.cx-figure figcaption { font-size: 14px; color: var(--cx-ink-2); }

/* ---------- Domains ---------- */
.cx-domains { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); }
.cx-domains__lead { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cx-domains__lead p { color: var(--cx-ink-body); }
.cx-domains__table { flex: 1 1 520px; min-width: 0; overflow-x: auto; }
.cx-table { width: 100%; min-width: 340px; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.cx-table th, .cx-table td { padding: 14px 0; border-bottom: 1px solid #CFC6B3; text-align: right; }
.cx-table thead th { padding: 0 0 12px; border-bottom: 2px solid var(--cx-ink); }
.cx-table th[scope="row"], .cx-table thead th:first-child { text-align: left; font-weight: 600; }
.cx-table th + th, .cx-table th + td, .cx-table td + td { padding-left: 14px; }
@media (max-width: 700px) { .cx-table thead th { letter-spacing: .06em; font-size: 11px; } }
.cx-table .cx-free { color: var(--cx-green); font-weight: 600; }
.cx-table-note { margin-top: 14px !important; font-size: 14px; color: var(--cx-ink-2); }

/* ---------- Credentials ---------- */
.cx-creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); border-top: 1px solid var(--cx-ink); }
.cx-cred { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--cx-rule); color: var(--cx-ink) !important; text-decoration: none !important; }
.cx-cred__value { font-family: var(--cx-serif); font-size: 34px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.5; }
.cx-cred__label { font-size: 15px; color: var(--cx-ink-2); }
a.cx-cred:hover .cx-cred__label { color: var(--cx-green); text-decoration: underline; }

/* ---------- FAQ ---------- */
.cx-faq { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); }
.cx-faq__title { flex: 1 1 300px; font-family: var(--cx-serif); font-weight: 450; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.025em; }
.cx-faq__list { flex: 2 1 560px; min-width: 0; border-top: 1px solid var(--cx-ink); }
.cx-faq details { border-bottom: 1px solid var(--cx-rule); padding: 18px 0; }
.cx-faq summary { display: flex; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; font-weight: 600; font-size: 18px; }
.cx-faq summary::-webkit-details-marker { display: none; }
.cx-faq summary::after { content: "+"; flex: 0 0 auto; color: var(--cx-ink-2); font-weight: 400; }
.cx-faq details[open] summary::after { content: "\2212"; }
.cx-faq details p { margin-top: 12px; color: var(--cx-ink-body); max-width: 40em; }

/* ---------- Final CTA ---------- */
.cx-cta { background: var(--cx-green); color: #fff; padding: clamp(64px, 8vw, 112px) 0; }
.cx-cta .cx-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.cx-cta__title { font-family: var(--cx-serif); font-weight: 420; font-size: clamp(48px, 7vw, 104px); line-height: .95; letter-spacing: -.04em; color: #fff; }
.cx-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cx-cta .cx-btn--ghost-light { border-color: #fff; color: #fff !important; }
.cx-cta .cx-btn--ghost-light:hover { background: #fff; color: var(--cx-green) !important; }

/* ---------- Pages ----------
   .cx-page wraps every design-system page. Its reset makes the page render
   the same on lean pages and on pages where Bootstrap is loaded (logged-in
   visitors), where h1/p/ul would otherwise pick up Bootstrap margins. */
.cx-page { background: var(--cx-paper); color: var(--cx-ink); font-family: var(--cx-sans); font-size: 16px; line-height: 1.5; text-align: left; }
/* :where() keeps this reset at zero specificity, so every component class
   (e.g. the white CTA title) still wins over it. */
:where(.cx-page) :where(h1, h2, h3, p, ul, dl, dd, figure, table) { margin: 0; }
:where(.cx-page) :where(h1, h2, h3) { color: var(--cx-ink); }
:where(.cx-page) :where(a:not(.cx-btn)) { color: inherit; }
:where(.cx-page) :where(strong) { font-weight: 600; }

.cx-pagehead { padding: clamp(40px, 6vw, 80px) 0 clamp(36px, 4.5vw, 56px); }
.cx-pagehead__inner { display: flex; flex-direction: column; gap: 22px; }
.cx-pagehead__inner > .cx-h1, .cx-pagehead__inner > .cx-lede { max-width: 860px; }
.cx-pagehead__grid { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); align-items: flex-end; }
.cx-pagehead__grid .cx-pagehead__inner { flex: 1 1 520px; min-width: 0; }
.cx-pagehead__tool { flex: 1 1 380px; min-width: 0; }
.cx-h1--page { font-size: clamp(48px, 6.4vw, 92px); line-height: .98; }
.cx-h1--page em { color: var(--cx-green); }
.cx-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--cx-ink-2); }
.cx-crumbs a { color: var(--cx-ink-2) !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--cx-rule); }
.cx-crumbs a:hover { color: var(--cx-green) !important; }
.cx-crumbs [aria-current] { color: var(--cx-ink); }

.cx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cx-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--cx-rule); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--cx-ink) !important; text-decoration: none !important; background: var(--cx-paper-hi); }
.cx-chip:hover { border-color: var(--cx-ink); }
.cx-chip[aria-current="page"] { background: var(--cx-ink); border-color: var(--cx-ink); color: var(--cx-paper) !important; }

.cx-store { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.cx-storecard { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--cx-paper-hi); border: 1px solid var(--cx-rule); border-radius: 4px; color: var(--cx-ink) !important; text-decoration: none !important; transition: border-color .15s ease, transform .15s ease; }
.cx-storecard:hover { border-color: var(--cx-ink); }
.cx-storecard__name { font-family: var(--cx-serif); font-weight: 500; font-size: 32px; line-height: 1.08; letter-spacing: -.02em; }
.cx-storecard__blurb { color: var(--cx-ink-2); flex-grow: 1; }
.cx-storecard__price { padding-top: 14px; border-top: 1px solid var(--cx-rule-soft); color: var(--cx-ink-2); }
.cx-storecard__price strong { color: var(--cx-ink); font-size: 20px; }
.cx-storecard__go { font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.cx-storecard:hover .cx-storecard__go { color: var(--cx-green); }
.cx-linklist { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cx-linklist .cx-rowlink { max-width: none; border-top: 0; }
.cx-linklist .cx-rowlink:first-child { border-top: 1px solid var(--cx-ink); }

/* Pages that wrap a WHMCS app (Nexus Cart domain search). */
.cx-pagehead--app { padding-bottom: clamp(20px, 3vw, 32px); }
.cx-apppage__body { padding-bottom: clamp(56px, 7vw, 96px); }
.cx-apppage #order-standard_cart { margin: 0; padding: 0; }
.cx-pagehead__inner .cx-lede .cx-more { white-space: nowrap; }

/* Product groups with other than three plans: cards instead of columns. */
.cx-plans--grid { gap: 20px; border-top: 0; }
.cx-plans--grid .cx-plan { padding: 28px !important; margin: 0 !important; border: 1px solid var(--cx-rule) !important; border-radius: 4px; background: var(--cx-paper-hi); box-shadow: none; }
.cx-plan .cx-plan__head > .cx-eyebrow { margin-bottom: 2px; }
.cx-plan[aria-disabled], .cx-btn[aria-disabled] { opacity: .55; cursor: not-allowed; }
.cx-alert { padding: 14px 18px; border: 1px solid #B8432F; border-radius: var(--cx-radius); background: #FBEDE8; color: #6E2416; }

.cx-includes { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; border-top: 1px solid var(--cx-ink); }
.cx-includes ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 32px; list-style: none; padding: 0; }
.cx-includes li { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--cx-rule-soft); }
.cx-includes li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-green); transform: translateY(-2px); }

.cx-help { background: var(--cx-paper-2); padding: clamp(48px, 6vw, 80px) 0; }
.cx-help__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px 48px; }
.cx-help__text { flex: 1 1 420px; display: flex; flex-direction: column; gap: 10px; }
.cx-help__title { font-family: var(--cx-serif); font-weight: 450; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.025em; }
.cx-help__title em { font-style: italic; color: var(--cx-green); }
.cx-help__text p { color: var(--cx-ink-body); }
.cx-help__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cx-table--full thead th { position: sticky; top: 77px; background: var(--cx-paper); z-index: 1; }
.cx-domains__table--full { overflow: visible; }
.cx-tag { display: inline-block; margin-left: 8px; padding: 2px 7px; border: 1px solid #B79B59; border-radius: 3px; background: #F3E7C9; color: #5A4512; font: 600 11px/1.4 var(--cx-sans); letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.cx-strong { font-weight: 600; }
.cx-notes { display: flex; flex-direction: column; gap: 8px; max-width: 760px; font-size: 14px; color: var(--cx-ink-2); }
.cx-notes a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .cx-domains__table--full { overflow-x: auto; } .cx-table--full thead th { position: static; } }

/* ---------- Infrastructure page ---------- */
.cx-stack--tight { gap: 16px; }
.cx-subhead { margin: 0; font-family: var(--cx-serif); font-weight: 450; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; color: var(--cx-ink); }
.cx-route { max-width: 560px; padding: 20px 20px 24px; }
.cx-route__labels { font-family: var(--cx-sans); }
.cx-glance { display: grid; gap: 32px 28px; margin: 0; }
/* Four-item rows: 4, then 2, then 1 column, never a stranded fourth item. */
.cx-glance, .cx-specs.cx-specs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cx-specs.cx-specs--4 { flex: none; gap: 0 28px; }
/* Spec sheet: label above, value large. */
.cx-specs--4 div { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 16px 0 4px; border-top: 2px solid var(--cx-ink); }
.cx-specs--4 dt { font-size: 14px; }
.cx-specs--4 dd { font-family: var(--cx-serif); font-weight: 450; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.015em; text-align: left; }
@media (max-width: 960px) { .cx-glance, .cx-specs.cx-specs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cx-glance, .cx-specs.cx-specs--4 { grid-template-columns: minmax(0, 1fr); } }
.cx-glance > div { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--cx-ink); padding-top: 18px; }
.cx-glance dd { margin: 0; }
.cx-glance__value { font-family: var(--cx-serif); font-size: clamp(44px, 4.6vw, 60px); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--cx-ink); }
.cx-glance__value small { font-size: .42em; letter-spacing: 0; color: var(--cx-ink-2); }
.cx-glance__label { font-size: 15px; color: var(--cx-ink-body); }
.cx-defs { margin: 0; border-top: 1px solid var(--cx-ink); }
.cx-defs > div { display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr); gap: 6px 32px; padding: 18px 0; border-bottom: 1px solid var(--cx-rule); }
.cx-defs dt { font-family: var(--cx-serif); font-size: 24px; line-height: 1.2; letter-spacing: -.01em; color: var(--cx-ink); }
.cx-defs dd { margin: 0; align-self: center; color: var(--cx-ink-body); }
.cx-callout { margin: 0; max-width: 760px; padding: 2px 0 2px 20px; border-left: 2px solid var(--cx-green); color: var(--cx-ink-body); }
.cx-section--ink .cx-h2, .cx-section--ink .cx-subhead { color: var(--cx-paper); }
.cx-section--ink .cx-h2 em { color: var(--cx-mint); }
.cx-source { margin: 0; max-width: 760px; font-size: 14px; color: var(--cx-ink-2); }
.cx-source a { text-decoration: underline; text-underline-offset: 3px; }
.cx-section--ink .cx-sechead__note, .cx-section--ink .cx-source { color: var(--cx-night-muted); }
.cx-section--ink a:not(.cx-btn) { color: var(--cx-paper) !important; }
.cx-night-body { margin: 0; color: #D9D2C3; max-width: 34em; }
.cx-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 40px 32px; margin: 0; padding: 0; list-style: none; }
.cx-pillars li { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid #4A453B; padding-top: 18px; }
.cx-pillars h3 { margin: 0; font-family: var(--cx-serif); font-weight: 450; font-size: 26px; line-height: 1.15; letter-spacing: -.015em; color: var(--cx-paper); text-wrap: balance; }
.cx-pillars p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #D9D2C3; }
.cx-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cx-ink); }
.cx-layers li { display: flex; flex-direction: column; gap: 10px; padding: 24px 0 26px; border-bottom: 1px solid var(--cx-rule); }
.cx-layers__n { font-family: var(--cx-serif); font-size: 48px; line-height: 1; letter-spacing: -.03em; color: var(--cx-green); font-variant-numeric: tabular-nums; }
.cx-layers h3 { margin: 0; font: 600 17px/1.3 var(--cx-sans); color: var(--cx-ink); }
.cx-layers p { margin: 0; font-size: 15.5px; color: var(--cx-ink-body); }
.cx-layers__who { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cx-ink-2); }
.cx-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.cx-duo__card { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 3vw, 32px); background: var(--cx-paper-hi); border: 1px solid var(--cx-rule); border-radius: 4px; }
.cx-duo__name { margin: 0; font-family: var(--cx-serif); font-size: clamp(28px, 3vw, 36px); line-height: 1.1; letter-spacing: -.02em; color: var(--cx-ink); }
.cx-duo ul { margin: 6px 0 0; padding: 0; list-style: none; }
.cx-duo li { padding: 11px 0; border-top: 1px solid var(--cx-rule-soft); color: var(--cx-ink-body); }

body.compera-app:not(.cx-bleed) .cx-header .cx-wrap, body.compera-app:not(.cx-bleed) .cx-footer .cx-wrap { max-width: calc(1110px + 2 * var(--cx-gutter)); }

/* ---------- Cookies page ---------- */
.cx-ctable { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.cx-ctable thead th { padding: 0 24px 12px 0; border-bottom: 2px solid var(--cx-ink); text-align: left; }
.cx-ctable th[scope="row"], .cx-ctable td { padding: 18px 24px 18px 0; border-bottom: 1px solid #CFC6B3; text-align: left; vertical-align: top; font-weight: 400; color: var(--cx-ink-body); }
.cx-ctable th[scope="row"] { width: 28%; }
.cx-ctable td:last-child { width: 22%; padding-right: 0; color: var(--cx-ink-2); }
.cx-ctable code { font: 500 14px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--cx-ink); overflow-wrap: anywhere; }
.cx-ctable th[scope="row"] code { display: block; }
.cx-ctable__who { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cx-ink-2); }
@media (max-width: 720px) {
  .cx-ctable, .cx-ctable tbody, .cx-ctable tr, .cx-ctable th[scope="row"], .cx-ctable td { display: block; width: auto !important; }
  .cx-ctable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cx-ctable tbody { border-top: 2px solid var(--cx-ink); }
  .cx-ctable tr { padding: 16px 0; border-bottom: 1px solid #CFC6B3; }
  .cx-ctable th[scope="row"], .cx-ctable td { padding: 0 0 8px; border: 0; }
  .cx-ctable td::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cx-ink-2); }
}
/* Two-column variant (privacy: use and lawful basis, retention) and the
   recipients table with names in bold. */
.cx-ctable--two th[scope="row"] { width: 60%; }
.cx-ctable--two td:last-child { width: auto; color: var(--cx-ink); }
.cx-ctable--who th[scope="row"] { width: 22%; font-weight: 600; color: var(--cx-ink); }
.cx-ctable--who td:last-child { width: 24%; }
.cx-prose { display: flex; flex-direction: column; gap: 14px; max-width: 42em; }
.cx-prose p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--cx-ink-body); }
.cx-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Headline-size serif (44px and up) uses the display cut. */
.cx-h1, .cx-h2, .cx-cta__title, .cx-quote, .cx-proof__value, .cx-plan__amount, .cx-glance__value, .cx-layers__n { font-family: var(--cx-display); }

/* ---------- Footer ---------- */
.cx-footer { background: var(--cx-ink); color: #D9D2C3; padding: 64px 0 36px; font: 400 15px/1.5 var(--cx-sans); }
.cx-footer a { color: var(--cx-paper) !important; text-decoration: none !important; }
.cx-footer a:hover { color: var(--cx-mint) !important; text-decoration: underline !important; text-underline-offset: 4px; }
.cx-footer__top { display: flex; flex-wrap: wrap; gap: 40px 64px; justify-content: space-between; }
.cx-footer__brand { flex: 1 1 260px; display: flex; flex-direction: column; gap: 14px; }
.cx-footer__brand .cx-logo__word { color: var(--cx-paper); font-size: 34px; }
.cx-footer__brand .cx-logo__dot { background: var(--cx-mint); }
.cx-footer__brand p { margin: 0; max-width: 24em; color: #D9D2C3; }
.cx-footer__bottom p { color: #A9A190; font-size: 13px; }
.cx-footer__contact { color: var(--cx-paper); font-variant-numeric: tabular-nums; }
.cx-footer .cx-footer__contact a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: rgba(245, 242, 234, .5); }
.cx-footer__nav { flex: 2 1 520px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 28px; }
.cx-footer__col { display: flex; flex-direction: column; gap: 10px; }
.cx-footer__col .cx-eyebrow { color: #9C9381; margin-bottom: 2px; }
.cx-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; border-top: 1px solid var(--cx-night-rule); padding-top: 22px; font-size: 13px; color: #A9A190; font-variant-numeric: tabular-nums; }
.cx-footer__bottom p { flex: 1 1 560px; margin: 0; max-width: 72em; }
/* Register numbers link to their registers, but read as text, as in the design. */
.cx-footer__bottom p a { color: inherit !important; text-decoration: none !important; }
.cx-footer__bottom p a:hover { color: #D9D2C3 !important; text-decoration: underline !important; }
.cx-footer__bottom a { color: #D9D2C3 !important; text-decoration: underline !important; text-underline-offset: 3px; }
.cx-footer__legal { flex: none; display: flex; gap: 18px; flex-wrap: wrap; }
.cx-footer--app { padding: 32px 0 28px; }
.cx-footer--app .cx-footer__bottom { margin-top: 24px; padding-top: 20px; }
.cx-footer__help { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; }
.cx-footer__help p { margin: 0; color: #D9D2C3; }
.cx-footer__help strong { color: var(--cx-paper); font-weight: 600; }
.cx-footer .cx-footer__help p a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: rgba(245, 242, 234, .5); }
.cx-footer__helplinks { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ---------- Bridge: the rest of WHMCS ----------
   Pages not yet redrawn (login, register, configure, cart, client area,
   knowledgebase…) still render with Nexus + compera-nexus/custom.css. Both
   are built on custom properties, so remapping those tokens here moves every
   one of those pages onto the Editorial palette, type and radii at once.

   Declared on :root, after custom.css, so tokens that custom.css derives
   from these (e.g. --primary-50: var(--compera-green-tint)) recompute too.
   Lean pages load only this file and never read these. */
:root {
    --compera-brand: #1D5A38;
    --compera-green: #1D5A38;
    --compera-green-deep: #123A24;
    --compera-green-tint: #E8EFE8;
    --compera-green-line: #C9DCCD;
    --compera-ink: #17150F;
    --compera-ink-lifted: #2E2A23;
    --compera-ink-soft: #4F4A40;
    --compera-muted: #6E675A;
    --compera-paper: #F5F2EA;
    --compera-paper-sunk: #EBE5D8;
    --compera-surface: #FBF9F4;
    --compera-line: #E3DCCD;
    --compera-line-strong: #D8D0BF;
    --compera-footer-bg: #17150F;
    --compera-font-sans: "Instrument Sans", "Instrument Sans Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --compera-font-serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;

    --neutral-50: #FBF9F4;
    --neutral-100: #F5F2EA;
    --neutral-200: #EBE5D8;
    --neutral-300: #D8D0BF;
    --neutral-400: #A9A190;
    --neutral-500: #6E675A;
    --neutral-600: #5E584D;
    --neutral-700: #4F4A40;
    --neutral-800: #2E2A23;
    --neutral-900: #17150F;
    --neutral-950: #0E0D09;

    --primary-100: #DCE7DD;
    --primary-300: #9DBDA4;
    --primary-400: #6E9B78;
    --primary-500: #3F7651;
    --primary-800: #123A24;
    --primary-900: #0D2B1B;
    --primary-950: #081C11;
    --success-accented: #123A24;

    --rounding-sm: 2px;
    --rounding-md: 3px;
    --rounding-lg: 4px;
    --c-focus: 0 0 0 3px rgba(29, 90, 56, .2);
    --footer-ink: #F5F2EA;
    --footer-muted: #A9A190;
    --footer-line: rgba(245, 242, 234, .1);
}
/* Grounds. The design is paper (#F5F2EA) everywhere, with cards one shade
   lighter (#FBF9F4) behind a hairline. custom.css instead paints the content
   area one shade darker (paper-sunk) with paper cards, which left a visible
   step under the header. Re-scope its tokens inside #main-body so the ground
   matches the header and its 30-odd card components land one shade lighter. */
body.cx #main-body:not(.compera-marketing) {
    --compera-paper-sunk: #F5F2EA;
    --compera-paper: #FBF9F4;
    --bg-muted: #FBF9F4;
    --bg-lifted: #F5F2EA;
}
body.cx #main-body { background-color: var(--cx-paper) !important; }
body.cx:not(.cx-lean) { font-family: var(--cx-sans); color: var(--cx-ink); }
body.cx:not(.cx-lean) h1, body.cx:not(.cx-lean) .h1 { font-weight: 450; letter-spacing: -.03em; }
body.cx:not(.cx-lean) h2, body.cx:not(.cx-lean) .h2, body.cx:not(.cx-lean) h3, body.cx:not(.cx-lean) .h3 { font-weight: 450; letter-spacing: -.02em; }
body.cx:not(.cx-lean) .btn-primary:hover, body.cx:not(.cx-lean) .btn-primary:focus { background-color: var(--cx-green); border-color: var(--cx-green); }
body.cx:not(.cx-lean) a { text-underline-offset: 3px; }
/* Bootstrap's colour utilities are hard-coded (#007bff, #17a2b8, #28a745), not tokens. */
body.cx .bg-primary { background-color: var(--cx-ink) !important; color: #fff; }
body.cx .badge-primary { background: var(--cx-ink); color: var(--cx-paper); }
body.cx .bg-info { background-color: var(--cx-ink-2) !important; border-color: var(--cx-ink-2) !important; color: #fff; }
body.cx .bg-success { background-color: var(--cx-green) !important; color: #fff; }
body.cx .text-primary, body.cx .text-success { color: var(--cx-green) !important; }
body.cx .text-info { color: var(--cx-ink-2) !important; }
body.cx .invoice-logo__img { height: 32px; width: auto; }

@media (prefers-reduced-motion: reduce) {
    .cx *, .cx *::before, .cx *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- App layer (audit F1, F9, F13, F14; 2026-10-16) ----------
   The Nexus and Bootstrap components used by the client area, order forms,
   sign-in and help pages, redrawn in the cx system: one button scale, one
   radius, palette-only status and alert colours, one form style, serif page
   titles and line icons. Loaded after custom.css; everything is scoped to
   body.cx so the lean pages are untouched. */

/* Page titles: the serif voice of the marketing pages. */
body.cx .c-page-title { font-family: var(--cx-serif); font-weight: 450; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.02em; color: var(--cx-ink); }
body.cx .c-page-lede { color: var(--cx-ink-2); }
body.cx .c-page-eyebrow { display: block; margin-bottom: 10px; }

/* Buttons: 40 px default, 48 px large, 32 px small; ink primary, quiet
   secondary, one danger style. */
body.cx .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--cx-radius); font: 600 14px/1.2 var(--cx-sans); letter-spacing: 0; text-transform: none; box-shadow: none; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
body.cx .btn-lg, body.cx .btn-group-lg > .btn { min-height: 48px; padding: 0 24px; font-size: 15px; }
body.cx .btn-sm, body.cx .btn-xs, body.cx .btn-group-sm > .btn { min-height: 32px; padding: 0 12px; font-size: 13px; }
body.cx .btn-block { display: flex; width: 100%; }
body.cx .btn-primary, body.cx .btn-success { background: var(--cx-ink); border-color: var(--cx-ink); color: var(--cx-paper); }
body.cx .btn-primary:hover, body.cx .btn-primary:focus, body.cx .btn-success:hover, body.cx .btn-success:focus { background: var(--cx-green); border-color: var(--cx-green); color: #fff; }
body.cx .btn-default, body.cx .btn-secondary, body.cx .btn-light, body.cx .btn-info, body.cx .btn-warning, body.cx .btn-outline-primary, body.cx .btn-outline-secondary, body.cx .btn-outline-info { background: var(--cx-paper-hi); border-color: var(--cx-rule); color: var(--cx-ink); }
body.cx .btn-default:hover, body.cx .btn-secondary:hover, body.cx .btn-light:hover, body.cx .btn-info:hover, body.cx .btn-warning:hover, body.cx .btn-outline-primary:hover, body.cx .btn-outline-secondary:hover, body.cx .btn-outline-info:hover { background: var(--cx-paper-hi); border-color: var(--cx-ink); color: var(--cx-ink); }
body.cx .btn-danger, body.cx .btn-delete, body.cx .btn-outline-danger, body.cx .btn.btn-sm[href*="delete"], body.cx .btn[data-role="delete"] { background: #FBEDE8; border-color: rgba(184, 67, 47, .45); color: #6E2416; }
body.cx .btn-danger:hover, body.cx .btn-delete:hover, body.cx .btn-outline-danger:hover { background: #B8432F; border-color: #B8432F; color: #fff; }
body.cx .btn-link { min-height: 0; padding: 0; background: none; border-color: transparent; color: var(--cx-ink); text-decoration: underline; text-underline-offset: 3px; }
body.cx .btn:disabled, body.cx .btn.disabled { opacity: .5; }
body.cx .input-group .btn, body.cx .input-group-append .btn, body.cx .input-group-prepend .btn { min-height: 48px; }

/* One radius: 3 px controls, 4 px surfaces, pills for status. */
body.cx .card, body.cx .panel, body.cx .c-panel, body.cx .modal-content, body.cx .dropdown-menu, body.cx .list-group, body.cx .alert, body.cx .well, body.cx .popover, body.cx .option, body.cx .summary-container, body.cx .product-info, body.cx .domain-renewal { border-radius: 4px; }
body.cx .card-header:first-child, body.cx .panel-heading { border-radius: 3px 3px 0 0; }
body.cx .card-footer:last-child, body.cx .panel-footer { border-radius: 0 0 3px 3px; }
body.cx .form-control, body.cx .custom-select, body.cx .input-group-text, body.cx textarea { border-radius: var(--cx-radius); }
body.cx .progress { border-radius: 999px; }
body.cx .list-group-item, body.cx .list-group-item.active { border-radius: var(--cx-radius); }
body.cx .c-pw-meter, body.cx .progress-bar { border-radius: 999px; }
body.cx #order-standard_cart .domain-selection-options { border-radius: 4px; }
body.cx #order-standard_cart .domain-renewals-filter { border-radius: var(--cx-radius); }

/* Forms: one style everywhere. */
body.cx .form-control, body.cx .custom-select, body.cx select.form-control, body.cx input.field, body.cx textarea.form-control { min-height: 48px; padding: 10px 14px; background: var(--cx-paper-hi); border: 1px solid var(--cx-rule); color: var(--cx-ink); font: 400 15px/1.4 var(--cx-sans); box-shadow: none; }
body.cx textarea.form-control, body.cx textarea { min-height: 120px; border: 1px solid var(--cx-rule); background: var(--cx-paper-hi); color: var(--cx-ink); }
body.cx .form-control:focus, body.cx .custom-select:focus, body.cx textarea:focus { border-color: var(--cx-ink); outline: 2px solid var(--cx-green); outline-offset: 1px; box-shadow: none; }
body.cx .form-control-sm, body.cx .input-group-sm > .form-control { min-height: 36px; font-size: 14px; }
body.cx label:not([class*="cx-"]):not(.form-check-label), body.cx .control-label, body.cx .col-form-label { color: var(--cx-ink-2); font-weight: 500; font-size: 14px; }
body.cx .form-check-label, body.cx .checkbox label, body.cx .radio label { color: var(--cx-ink); font-weight: 400; font-size: 15px; }
body.cx .form-text, body.cx .help-block { color: var(--cx-ink-2); }

/* Status pills from the palette. */
body.cx .c-status, body.cx .label.status, body.cx .badge, body.cx .label { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px; font: 600 12px/1 var(--cx-sans); letter-spacing: .02em; text-transform: none; border: 0; }
body.cx .c-status--active, body.cx .c-status--paid, body.cx .c-status--completed, body.cx .c-status--open, body.cx .status-active, body.cx .status-paid, body.cx .status-completed, body.cx .status-open, body.cx .label-success, body.cx .badge-success { background: #DCE7DD; color: #123A24; }
body.cx .c-status--unpaid, body.cx .c-status--pending, body.cx .c-status--suspended, body.cx .c-status--refunded, body.cx .c-status--answered, body.cx .status-unpaid, body.cx .status-pending, body.cx .status-suspended, body.cx .status-refunded, body.cx .status-answered, body.cx .status-customer-reply, body.cx .label-warning, body.cx .badge-warning { background: #F3E7C9; color: #5A4512; }
body.cx .c-status--expired, body.cx .c-status--cancelled, body.cx .c-status--closed, body.cx .c-status--terminated, body.cx .status-terminated, body.cx .status-cancelled, body.cx .status-closed, body.cx .status-expired, body.cx .label-default, body.cx .label-info, body.cx .badge-secondary, body.cx .badge-info, body.cx .badge-light { background: var(--cx-paper-2); color: var(--cx-ink-2); }
body.cx .c-status--overdue, body.cx .c-status--fraud, body.cx .status-fraud, body.cx .status-overdue, body.cx .label-danger, body.cx .badge-danger { background: #FBEDE8; color: #6E2416; }
body.cx .textblack { color: var(--cx-ink); }

/* Alerts as palette tints. */
body.cx .alert { border: 1px solid var(--cx-rule); background: var(--cx-paper-hi); color: var(--cx-ink); padding: 14px 18px; font-size: 15px; }
body.cx .alert-info, body.cx .alert-info.c-alert { background: var(--cx-paper-2); border-color: var(--cx-rule); color: var(--cx-ink); }
body.cx .alert-success, body.cx .alert-success.c-alert { background: #E8EFE8; border-color: #9DBDA4; color: #123A24; }
body.cx .alert-warning, body.cx .alert-warning.c-alert { background: #F3E7C9; border-color: #B79B59; color: #5A4512; }
body.cx .alert-danger, body.cx .alert-danger.c-alert { background: #FBEDE8; border-color: rgba(184, 67, 47, .45); color: #6E2416; }
body.cx .alert a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Tables and text in ink, not Bootstrap's #212529. */
body.cx .table, body.cx .table th, body.cx .table td, body.cx table strong { color: var(--cx-ink); }
body.cx .table th, body.cx .table td { border-color: var(--cx-rule-soft); }
body.cx .table thead th { border-bottom: 2px solid var(--cx-ink); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--cx-ink-2); }

/* Icons: Font Awesome Pro's Light weight is loaded, so solid and regular
   glyphs switch to the same family's line style, in keeping with the
   site's hairline drawings. Brand and duotone icons are untouched. */
body.cx .fas, body.cx .fa-solid, body.cx .far, body.cx .fa-regular { font-weight: 300; }

/* Order forms and sign-up: WHMCS's all.min.css and Nexus's theme.min.css
   style these through #order-standard_cart and #registration, which outrank
   class rules, so the same values are restated at that level. */
body.cx #order-standard_cart label:not([class*="cx-"]):not(.form-check-label), body.cx #registration label:not(.form-check-label) { color: var(--cx-ink-2); }
body.cx #order-standard_cart .form-control, body.cx #order-standard_cart input.field, body.cx #registration .field, body.cx #registration .form-control { min-height: 48px; background: var(--cx-paper-hi); border: 1px solid var(--cx-rule); border-radius: var(--cx-radius); color: var(--cx-ink); font-size: 15px; box-shadow: none; }
body.cx #order-standard_cart .panel-heading, body.cx #order-standard_cart .card-header { border-radius: 3px 3px 0 0; }
body.cx #order-standard_cart .option, body.cx #order-standard_cart .summary-totals { border-radius: 3px; border-color: var(--cx-rule); }
body.cx #order-standard_cart .multiselect-selected-text, body.cx .multiselect-selected-text { color: var(--cx-ink); }
body.cx #order-standard_cart textarea, body.cx #order-standard_cart textarea.form-control { border: 1px solid var(--cx-rule); border-radius: var(--cx-radius); background: var(--cx-paper-hi); color: var(--cx-ink); }
/* Two-factor set-up links: Nexus styles them with a five-class selector. */
body.cx .btn.btn-success.open-modal.twofa-config-link { background: var(--cx-ink); border-color: var(--cx-ink); color: var(--cx-paper); }
body.cx .btn.btn-danger.open-modal.twofa-config-link { background: #FBEDE8; border-color: rgba(184, 67, 47, .45); color: #6E2416; }

/* reCAPTCHA: the footer carries Google's notice, so the floating badge
   (which spills off-screen on phones) can be hidden. */
.grecaptcha-badge { visibility: hidden !important; }

/* Touch screens: at least 44 px to tap (audit F13). Inline links get
   vertical padding with a matching negative margin, so text does not move. */
@media (pointer: coarse) {
    .cx-crumbs a, .cx-proof__src a, .cx-source a, .cx-notes a, .cx-footer__bottom a { padding: 12px 0; margin: -12px 0; }
    .cx-footer__col { gap: 0; }
    .cx-footer__col a, .cx-footer__helplinks a, .cx-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
    body.cx .c-filter, body.cx .c-pager__btn { min-height: 44px; }
}

/* Empty basket: a way forward under the Nexus Cart app. */
.cx-emptycart { display: flex; flex-direction: column; gap: 20px; max-width: 620px; margin: 8px auto clamp(48px, 6vw, 80px); background: transparent; }
.cx-emptycart__links { display: flex; flex-direction: column; }
.cx-emptycart__links .cx-rowlink { max-width: none; border-top: 0; }
.cx-emptycart__links .cx-rowlink:first-child { border-top: 1px solid var(--cx-ink); }
/* Homepage infrastructure: the route map beside the spec list, no width cap. */
.cx-route--home { max-width: none; }