/* Level10ai theme — matched to qpionline.com.
 *
 * Loaded BEFORE l10-ui.css so the button system still wins on buttons, and
 * AFTER each page's inline <style> so it wins on everything else.
 *
 * The palette moves from black-and-warm-grey to QPI's navy-and-blue. Gold is
 * unchanged (#c9a84c is the same value on both sites) but its job narrows: it
 * marks calls to action and eyebrows, not every border and heading.
 *
 * Typography was already half-shared — the tool pages use Playfair Display and
 * DM Sans, which is exactly what QPI uses. This brings the marketing pages
 * (previously Georgia) onto the same two faces.
 *
 * Hardcoded hex values inside each page were migrated separately; this file
 * carries the tokens, the type ramp and the section rhythm.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --navy-950: #020c1b;
  --navy-900: #04152d;
  --navy-800: #0a2744;
  --navy-700: #103860;
  --navy-600: #185fa5;
  --blue-500: #2176d4;
  --blue-400: #378add;
  --blue-300: #85b7eb;
  --blue-200: #b5d4f4;
  --blue-100: #ddeef9;
  --blue-50:  #eef6fd;

  --gold: #c9a84c;
  --gold-light: #f0d48a;

  --white: #ffffff;
  --off-white: #f4f7fb;
  --text-muted: #8ca4be;
  --text-body: #b5d4f4;

  /* Kept so older page rules that still reference these keep resolving, now
     pointing at the new palette rather than the retired black one. */
  --black: #020c1b;
  --dark: #020c1b;
  --dark-2: #04152d;
  --dark-3: #0a2744;
  --dark-4: #103860;
  --border: #103860;
  --text: #b5d4f4;
  --muted: #8ca4be;
  --teal: #378add;
  --teal-light: #85b7eb;
}

/* ------------------------------------------------------------ surfaces */

html,
body {
  background: var(--navy-950);
  color: var(--text-body);
}

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- typography */

h1, h2, h3, h4, h5, h6,
.intro-card h1,
.plan-n,
.cover-t {
  font-family: 'Playfair Display', serif;
  color: var(--white);
  line-height: 1.15;
}

h1 { font-size: 2.8rem; font-weight: 700; }
h2 { font-size: 1.8rem; font-weight: 600; }
h3 { font-size: 1.3rem; font-weight: 600; }

/* QPI's signature: a word or two of the headline set in italic blue. */
h1 em, h1 i, h2 em, h2 i {
  font-style: italic;
  font-weight: 400;
  color: var(--blue-300);
}

p, li, td, th, label, input, textarea, select {
  font-family: 'DM Sans', sans-serif;
}

p, li {
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-body);
}

a { color: var(--blue-300); }

/* The uppercase gold kicker above a headline. */
.eyebrow,
.intro-badge,
.sidebar-title,
.plan-u,
.intro-meta-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* The badge is a pill on the tool pages; keep its shape, adopt the palette. */
.intro-badge {
  background: rgba(201, 168, 76, 0.10);
  border: 1px solid rgba(201, 168, 76, 0.3);
}

/* -------------------------------------------------------------- rhythm */
/* QPI breathes at 90px between sections. */

section {
  padding-top: 90px;
  padding-bottom: 90px;
}

/* ------------------------------------------------------------- panels */
/* One box treatment for the whole site.
 *
 * Boxes had drifted three ways at once: some had rounded corners and some were
 * square, some sat almost flush against their own text, and the fill varied
 * between three navies depending on which page you were on. All three are
 * settled here.
 *
 * The fill is --navy-800, taken from the $49.99 plan card, which David picked
 * as the reference. Padding is a single value applied to every box: CSS cannot
 * read what a rule already declared, so "at least this much" is not expressible
 * — one comfortable value everywhere is both simpler and more consistent than
 * per-box guesses. !important is needed because most of these are declared in
 * page-level class rules that would otherwise outrank a shared sheet.
 *
 * Buttons, inputs, badges and layout wrappers are deliberately excluded: they
 * carry borders too, but a button with 24px of padding and a 10px radius is not
 * a button any more. */

.card,
.plan,
.cover,
.benefit,
.results-card,
.intro-card,
.quiz-card,
.panel,
.feature,
.fcard,
.pcard,
.partner,
.pricing-box,
.prod-feature,
.checkout-wrap,
.checkout-tnc,
.ctabox,
.mission-block,
.info-box,
.kml-box,
.gate-box,
.overall,
.result,
.cs-features,
.cs-timeline,
.success,
.error {
  background: var(--navy-800) !important;
  border-color: var(--navy-700) !important;
  border-radius: 10px !important;
  padding: 24px 28px !important;
}

/* The sidebar is a column, not a card — it keeps its own fill and square edge
   against the chat area, but its contents still need room. */
.sidebar {
  background: var(--navy-900);
  border-color: var(--navy-700);
}

/* The featured plan keeps the same fill as every other box — it is the one
   David picked as the reference, so changing it would defeat the point. It is
   marked out by a gold edge instead of a different blue. */
.plan.feat,
.card.feat,
.panel-raised {
  background: var(--navy-800) !important;
  border-color: rgba(201, 168, 76, 0.55) !important;
}

/* Rounded corners for the remaining boxed things that are NOT full panels —
   they need the radius but not the padding or the fill. */
.badge,
.prod-badge,
.cs-badge,
.admin-badge,
.pricing-badge,
.intro-badge,
.pill,
.chat-input,
.gate-input,
.kml-input,
.token-input,
input,
textarea,
select {
  border-radius: 8px;
}

/* Boxes written with inline styles carry their own padding and radius, which
   outranks everything above. This catches the common case — a div given a
   background and a border inline — without touching layout. */
[style*="border:1px solid"],
[style*="border: 1px solid"] {
  border-radius: 10px;
}

/* Muted supporting copy across every page, replacing the assorted
   #ccc / #bbb / #aaa / #9A9080 greys that had drifted apart. */
.muted,
.text-muted,
.sub,
.note,
.lede,
.cover-d,
.faq-a,
.plan-d,
.step p {
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- nav */

#sitenav,
.topnav,
.nav-row1 {
  background: rgba(2, 12, 27, 0.97);
  border-bottom-color: var(--navy-700);
}

.nav-link,
.nav-link2,
.m-link,
.nav-back,
.h-back {
  color: var(--blue-200);
}

.nav-link:hover,
.nav-link2:hover,
.m-link:hover,
.nav-back:hover,
.h-back:hover {
  color: var(--gold);
}

.nav-logo,
.logo,
.footer-logo {
  font-family: 'Playfair Display', serif;
  color: var(--white);
}

/* -------------------------------------------------------------- forms */

input,
textarea,
select {
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  color: var(--white);
  border-radius: 3px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold);
}

::placeholder { color: var(--text-muted); }

/* ------------------------------------------------------------- footer */

footer {
  border-top-color: var(--navy-700);
  color: var(--text-muted);
}

/* ------------------------------------------------------- font sweep */
/* The marketing pages set Georgia and Arial inside their own class rules —
   .stitle, .lead, .section-label and friends — and a class rule outranks any
   element selector this file could offer. So the sweep is done with
   !important, ordered so the heading rule below still wins over the body rule
   above it.
 *
 * Safe to be this blunt: the exported report and chat windows are separate
 * documents written into popups with their own inline <style>, so they never
 * load this file and keep their own print-friendly typography. */

body,
body *:not(pre):not(code):not(kbd):not(samp) {
  font-family: 'DM Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.hero h1,
.page-hero h1,
.section-title,
.stitle,
.lead,
.intro-card h1,
.plan-n,
.plan-p,
.cover-t,
.benefit-t,
.pricing-box h3,
.pricing-price,
.price,
.feature h3,
.nav-logo,
.logo,
.footer-logo,
.intro-meta-num {
  font-family: 'Playfair Display', serif !important;
}

/* Monospace stays monospace — report code blocks and ids need it. */
pre, code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* ------------------------------------------------- fitting the screen */
/* Installed to a home screen there is no address bar to pinch against, so a
   page even slightly wider than the viewport just looks broken. Some pages set
   overflow-x on body and some never did; this makes it universal.
 *
 * min-width:0 on flex and grid children is the fix that matters: their default
 * is min-content, so one long unbroken string — a URL in a source list, a token
 * — pushes the whole row wider than the screen and nothing else can shrink it. */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, canvas, iframe, table {
  max-width: 100%;
}

pre, code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Long URLs in report source lists were the worst offender. */
a { overflow-wrap: anywhere; }

@media (max-width: 768px) {
  .layout > *, .cards > *, .figs > *, .plans > *, .covers > *,
  .how > *, .prod-features > *, .features-grid > * {
    min-width: 0;
  }
}

/* ------------------------------------------------------------ mobile */

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.45rem; }
  section { padding-top: 60px; padding-bottom: 60px; }
}

/* ── Line breaking ──────────────────────────────────────────────────────────
 *
 * David's rule: no line of text should end with a stray word or two hanging on
 * its own. CSS cannot enforce "at least three words" literally, but these two
 * properties are what the browser offers and they cover the case:
 *
 *   text-wrap: pretty   — the browser reflows the last few lines to avoid an
 *                         orphan, so a paragraph never ends on one short word.
 *   text-wrap: balance  — evens out the lines of a heading rather than leaving
 *                         a long first line and a single trailing word.
 *
 * Balance is capped by browsers at a handful of lines, which is why it is on
 * headings and short decks rather than on body copy.
 */
h1, h2, h3, h4,
.stitle, .stage-q, .plan-n, .cover-t, .owner-who,
.hero-deck, .lead, .prod-hero h1, .checkout-heading {
  text-wrap: balance;
}

p, li,
.lede, .ssub, .plan-d, .cover-d, .faq-a, .jtext, .lib-note,
.prod-section p, .prod-feature-desc, .stage p, .fbio, .vtext {
  text-wrap: pretty;
}

/* ── Small print ────────────────────────────────────────────────────────────
 *
 * Captions, labels, notes and secondary links were scattered across 11px,
 * 12px, 12.5px and 13px, in a mix of #8ca4be and var(--muted), set variously
 * in page <style> blocks and in inline style attributes. Result: the smallest
 * text on the site was also the dimmest, and no two pages agreed on it.
 *
 * One size, one colour, site-wide: 13px gold.
 *
 * !important is used deliberately and only here. Much of this text carries an
 * inline style attribute, which no ordinary rule can override — the footer
 * columns and several notes are written that way. Without it the change would
 * apply on some pages and silently skip others, which is the problem this
 * block exists to end.
 *
 * NOT included, on purpose: .cover-d, .feat-text, .vtext, .prod-feature-desc,
 * .fbio, .part-desc, .jtext and .stage p. Those are descriptive sentences
 * inside cards, not labels — turning whole paragraphs gold reads as an error
 * rather than an accent, and costs more legibility than it buys.
 */
.nav-link, .nav-link2, .nav-coming, .subnav-label,
.h-back, .h-user, .h-logout,
.backbar a, .lib-note, .consent-note, .ctanote, .checkout-secure,
.plan-u, .pnote, .psub, .gate-note, .gate-label, .slbl,
.sidebar-label, .sidebar-bottom, .part-sub, .result-note,
.ftagline, .femail, .fbottom, .footer-tagline, .footer-bottom, .footer-copy,
#l10-footer a, #l10-footer div[style*="font-size:13px"],
.fcol a, .footer-col a {
  font-size: 13px !important;
  color: var(--gold, #c9a84c) !important;
}

/* Hover has to stay distinguishable now the resting state is already gold. */
.nav-link:hover, .nav-link2:hover,
.h-back:hover, .h-logout:hover, .backbar a:hover,
#l10-footer a:hover, .fcol a:hover, .footer-col a:hover {
  color: var(--gold-light, #f0d48a) !important;
}