/* Xorion v5 skin over the v4 (xo.css) markup. Load after xo.css, tokens.css and auth.css.
   Source of values: ds/v5/tokens.css (the verified spec). Markup and copy are untouched.
   Rules from the spec: primary is --xo-primary; lavender is never a fill or text, so --volt becomes a neutral;
   elevation is a 1px border (no hard shadow); system fonts; 400/500 weights. */
:root {
  --paper: var(--xo-bg);
  --paper-raised: var(--xo-surface);
  --paper-sunk: var(--xo-surface-2);
  --ink: var(--xo-fg);
  --ink-muted: var(--xo-fg-muted);
  --line: var(--xo-border);
  --line-control: var(--xo-border-control);
  --volt: var(--xo-surface-2);
  --volt-soft: var(--xo-surface-2);
  --on-volt: var(--xo-fg);
  --accent-text: var(--xo-fg);
  --signal: var(--xo-fg);
  --focus: var(--xo-focus);
  --done: var(--xo-success);
  --blocked: var(--xo-warning);
  --band: var(--xo-primary);
  --on-band: var(--xo-primary-fg);
  --on-band-muted: color-mix(in srgb, var(--xo-primary-fg) 70%, var(--xo-primary));
  --shadow-hard: none;
  --shadow-card: none;
  --shadow-glow: none;
  --radius-sm: var(--xo-radius-sm);
  --radius-md: var(--xo-radius-md);
  --radius-lg: var(--xo-radius-lg);
  --font-display: var(--xo-font-sans);
  --font-body: var(--xo-font-sans);
  /* legacy auth/tokens.css names that read the lavender accent */
  --cta: var(--xo-primary);
  --cta-hi: color-mix(in srgb, var(--xo-primary) 88%, var(--xo-bg));
  --on-cta: var(--xo-primary-fg);
  --control: var(--xo-control-h-lg);
  --focus-ring: 2px solid var(--xo-focus);
  --fw-semibold: var(--xo-weight-medium);
  --fw-bold: var(--xo-weight-medium);
}

/* Type: system sans at the spec's 400/500 weights and scale. */
.display-xl, .display-l, .h1, .h2, .h3, .price { font-weight: var(--xo-weight-medium); letter-spacing: -0.01em; }
.display-xl, .display-l { font-size: clamp(30px, 6vw, 44px); line-height: 1.15; }
.h1 { font-size: clamp(24px, 4.5vw, 30px); line-height: 1.25; }
.h2 { font-size: 24px; line-height: 1.3; }
.h3 { font-size: 18px; line-height: 1.35; }
.price { font-size: 30px; line-height: 1.2; }
.lead { font-size: 18px; line-height: 1.5; }
.label { font-weight: var(--xo-weight-medium); letter-spacing: 0.06em; }
.body-strong { font-weight: var(--xo-weight-medium); }

/* Highlight stroke becomes a neutral marker; the words keep the ink colour. */
.xo-hl, .aside-headline .xo-hl { background: var(--xo-surface-2); color: var(--xo-fg); }

/* Buttons: guide sizes (40 / 44 phone), 1px edge, primary is #030213. */
.xo-btn { height: var(--xo-control-h); padding: 0 var(--xo-space-2); border-width: 1px; border-radius: var(--xo-radius-md); font-size: var(--xo-font-size-sm); font-weight: var(--xo-weight-medium); box-shadow: none; transition: background-color var(--xo-dur-fast) var(--xo-ease); }
.xo-btn-lg { height: var(--xo-control-h-lg); padding: 0 var(--xo-space-3); font-size: var(--xo-font-size-sm); }
.xo-btn-sm { height: var(--xo-control-h-sm); padding: 0 var(--xo-space-1-5); font-size: var(--xo-font-size-sm); }
.xo-btn-primary { background: var(--xo-primary); color: var(--xo-primary-fg); border-color: var(--xo-primary); box-shadow: none; }
.xo-btn-primary:hover { transform: none; background: color-mix(in srgb, var(--xo-primary) 88%, var(--xo-bg)); }
.xo-btn-primary:active { transform: scale(0.98); box-shadow: none; }
.xo-btn-secondary { border-color: var(--xo-border-control); }
.xo-btn-secondary:hover { background: var(--xo-secondary); }
.xo-btn:focus-visible { outline: 2px solid var(--xo-focus); outline-offset: 2px; }
@media (max-width: 639px) { .xo-btn, .xo-btn-sm, .xo-btn-lg { height: var(--xo-control-h-lg); } }

/* Controls and surfaces: hairlines and the guide's radii. */
.xo-input, .xo-select, .xo-textarea { border-width: 1px; border-color: var(--xo-border-control); border-radius: var(--xo-radius-md); background: var(--xo-bg); box-shadow: none; }
.xo-statuscard, .xo-card, .xo-stage, .xo-composer { box-shadow: none; }

@media (prefers-reduced-motion: reduce) { .xo-btn { transition: none; } .xo-btn:active, .xo-btn-primary:active { transform: none; } }

/* Weights: the spec allows 400 and 500 only. Generated from every selector in xo.css, home.css, auth.css,
   login.css and signup.css that set 600 or heavier; re-run when those files change. */
.app-display,
.app-h1,
.app-h2,
.app-h3,
.app-overline,
.body-strong,
.display-l,
.display-xl,
.h1,
.h2,
.h3,
.label,
.price,
.sso-ms,
.xa-marker-fine::before,
.xa-stepper li.is-current,
.xa-tabbar a[aria-current="page"],
.xo-bands-labels .is-here,
.xo-chart-row b,
.xo-checkrow b,
.xo-choice b,
.xo-dots-row b,
.xo-facts li::before,
.xo-field-error::before,
.xo-flow-alt b,
.xo-journey-q,
.xo-journey-stop li::before,
.xo-list-no li::before,
.xo-list-yes li::before,
.xo-more-plan,
.xo-pick-price b,
.xo-progress-steps li.is-active,
.xo-promise b,
.xo-score-facts dd,
.xo-stack-item b,
.xo-status::before,
.xo-statusrow-name,
.xo-teaser-panel li::before,
.xo-ticks li.xo-ticks-lead,
.xo-ticks li::before,
.xo-vcard-fix,
.xo-vcard-fix::before,
.xo-verdict::before,
.xo-vis b,
.xo-vis-slot-on,
.xo-vis-tile,
.xo-vitem-head,
.xo-yes { font-weight: var(--xo-weight-medium); }

/* Borders: elevation is a 1px edge. Generated from every selector that sets a 1.5-3px `border:` shorthand. */
.signup-card .notice,
.signup-card .sso,
.signup-card.xo-formcard,
.signup-carry .xo-yes,
.signup-consent-row,
.signup-finds i,
.signup-report,
.signup-sample,
.xa-btn[aria-busy="true"]::before,
.xa-check-box,
.xa-empty-mark,
.xa-stepper li::before,
.xo-bands-bar,
.xo-btn,
.xo-carry,
.xo-chart-stack,
.xo-check,
.xo-choice,
.xo-choice:has(input:checked),
.xo-code .xo-copy,
.xo-composer,
.xo-dots-dot,
.xo-dots-key,
.xo-faq summary::after,
.xo-fix::before,
.xo-flow-alt,
.xo-flow-badge,
.xo-flow-node,
.xo-flow-node-on,
.xo-formcard,
.xo-grade,
.xo-input,
.xo-journey-dot,
.xo-journey-stop-off .xo-journey-dot,
.xo-more summary::after,
.xo-notice,
.xo-pick,
.xo-pick:has(input:checked),
.xo-pricecard-featured,
.xo-progress-steps li::before,
.xo-promise li::before,
.xo-quote-avatar,
.xo-quote-slot,
.xo-ribbon,
.xo-scale-bar,
.xo-sso,
.xo-stack,
.xo-stage,
.xo-status,
.xo-step::before,
.xo-teaser-panel,
.xo-tl::before,
.xo-verdict,
.xo-vis-btn,
.xo-vis-empty,
.xo-vis-tile,
.xo-who { border-width: 1px; }

/* account.css and legal-page.css pad with --space-7, which no sheet defines, so their cards rendered with no padding. */
:root { --space-7: var(--xo-space-3); }

/* Generated from privacy/legal-page.css (privacy and terms): weights >=600 to 500, 1.5-2px borders to 1px, hard shadows off. Regenerate if that sheet changes. */
.xo-page-legal { --accent: var(--xo-surface-2); --on-accent: var(--xo-fg); }
.xo-page-legal .lg-hero h1 { font-weight: 500; }
.xo-page-legal .lg-updated { border: 1px solid var(--ink); font-weight: 500; }
.xo-page-legal .toc h2,
.xo-page-legal .toc-m summary { font-weight: 500; }
.xo-page-legal .toc ol { border-left: 1px solid var(--line); }
.xo-page-legal .toc a { border-left: 1px solid transparent; }
.xo-page-legal .toc a b,
.xo-page-legal .toc-m a b { font-weight: 500; }
.xo-page-legal .toc .toc-also a { font-weight: 500; }
.xo-page-legal .doc h2 { font-weight: 500; }
.xo-page-legal .doc h2 .n { border: 1px solid var(--ink); font-weight: 500; }
.xo-page-legal .doc li::before { border: 1px solid var(--ink); border-radius: 1px; }
.xo-page-legal .doc strong { font-weight: 500; }
.xo-page-legal .doc .plain { border: 1px solid var(--ink); box-shadow: none; }
.xo-page-legal .doc .plain li::before { font-weight: 500; border: 1px solid var(--ink); }
.xo-page-legal .doc table { border: 1px solid var(--ink); }
.xo-page-legal .doc th { font-weight: 500; border-bottom: 1px solid var(--ink); }
.xo-page-legal .doc td:first-child { font-weight: 500; }
.xo-page-legal .doc hr { border-top: 1px solid var(--ink); }
@media (max-width: 960px) {
.xo-page-legal .toc-m { border: 1px solid var(--ink); box-shadow: none; }
.xo-page-legal .toc-m summary::after { border: 1px solid var(--ink); font-weight: 500; }
}
@media (max-width: 719px) {
.xo-page-legal .menu { border: 1px solid var(--ink); }
}
.xo-page-legal .xo-btn:focus-visible, .xo-page-legal .toc a:focus-visible, .xo-page-legal .doc a:focus-visible { outline-color: var(--xo-focus); }

/* Second pass (pricing, how-it-works, work, bot): rules in xo.css, auth.css and the page sheets that set a heavy weight through the `font:` shorthand,
   or a 1.5-3px edge, and are not in the lists above. Generated; re-run when those files change. */
.xa-ai-label::before,
.xa-avatar,
.xa-bell,
.xa-brand,
.xa-colhead,
.xa-filetype,
.xa-mock-btn,
.xa-mock-hero h4,
.xa-mock-nav,
.xa-side-label,
.xa-status-headline,
.xa-table th,
.xo-bands-labels,
.xo-chart-seg,
.xo-chart-val,
.xo-chart-val small,
.xo-checkrow-pts,
.xo-co-price,
.xo-compare tbody th,
.xo-compare thead th,
.xo-compare thead th small,
.xo-compare tr.xo-compare-group th,
.xo-compare-tile b,
.xo-dots-val,
.xo-facts,
.xo-faq summary,
.xo-field label,
.xo-field-error,
.xo-field-label,
.xo-fix-effort,
.xo-fix-gain,
.xo-fix-gain small,
.xo-incog figcaption,
.xo-lookfor dt,
.xo-more summary,
.xo-notice::before,
.xo-or,
.xo-pillar-pts,
.xo-pillar-pts small,
.xo-price small,
.xo-pricecard-terms,
.xo-quote blockquote,
.xo-quote-by,
.xo-sample,
.xo-scale-ends,
.xo-scale-legend,
.xo-scale-mark,
.xo-scale-mark small,
.xo-score-num,
.xo-score-num small,
.xo-stack-item em,
.xo-statuscard-count,
.xo-tag,
.xo-trust-grid li,
.xo-vis-chip,
.xo-vis-money,
.xo-vis-ring span,
.xo-who,
.xo-wordmark,
.xo-yes { font-weight: var(--xo-weight-medium); }
.xa-switcher::after { border-bottom-width: 1px; }
.xo-bands-bar span,
.xo-chart-seg,
.xo-vis-row-blocked,
.xo-vis-row-done { border-left-width: 1px; }
.xa-switcher::after { border-right-width: 1px; }
.xo-journey::before,
.xo-stack-total,
.xo-step { border-top-width: 1px; }
.xo-btn[aria-busy="true"]::after,
.xo-who { border-width: 1px; }

/* The band is the primary colour, so a primary button on it would vanish: invert it. */
.xo-band .xo-btn-primary { background: var(--xo-primary-fg); color: var(--xo-primary); border-color: var(--xo-primary-fg); }
.xo-band .xo-btn-primary:hover { background: color-mix(in srgb, var(--xo-primary-fg) 88%, var(--xo-primary)); }

/* These carry weight in the `font:` shorthand with the size, which the generated weight list does not match. */
.xo-ribbon,
.xo-vis-btn,
.xo-status,
.xo-verdict,
.xo-statuscard-count { font-weight: var(--xo-weight-medium); }
b, strong { font-weight: var(--xo-weight-medium); }

/* Shared site header. The bar shrank to its content and centred at desktop widths; it now spans the same column as
   .xo-container so the mark lines up with page content. On a phone it stays one row: the wordmark gives way to the
   mark, and the two links that only jump to home-page sections drop out (home keeps them). */
.xo-page .site-top .auth-top-in { width: 100%; max-width: var(--container-max); padding-inline: var(--gutter); }
@media (max-width: 519px) {
  .site-top .auth-top-in { flex-wrap: nowrap; padding-inline: var(--xo-space-2); gap: var(--xo-space-1); }
  .site-top .brand { flex: 0 0 auto; min-width: var(--tap); }
  .site-top .brand-word { display: none; }
  .site-nav { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 0; min-width: 0; }
  .site-nav > .nav-link:nth-child(2), .site-nav > .nav-link:nth-child(4) { display: none; }
  .site-nav .nav-link, .site-nav .nav-cta { padding: 0 var(--xo-space-1); white-space: nowrap; }
}
/* tokens.css (loaded by some pages) restyles the bar, wordmark and links; pin the one look every page shares. */
.xo-page .site-top { min-height: 56px; background: transparent; border-bottom: 0; }
.xo-page .site-top .auth-top-in { padding-block: 0; min-height: 56px; }
.xo-page .site-top .brand { font-size: var(--xo-font-size-md); letter-spacing: normal; }
.xo-page .site-top .brand-word, .xo-page .site-top .brand-word span { font-size: inherit; letter-spacing: inherit; color: var(--xo-fg); }
.xo-page .site-top .nav-link, .xo-page .site-top .nav-cta { font-size: var(--xo-font-size-md); font-weight: var(--xo-weight-normal); }
.xo-page .site-top .nav-link { color: var(--xo-fg); }
/* A page with its own primary Sign up in the hero keeps one: the header copy is dropped. */
.xo-page:has(.ar-top a[href="/signup"]) .site-top .nav-cta { display: none; }

/* Shared site footer: same box on every page. A 24px gutter container (16px on a phone, as the header), 24px between
   links, 44px link targets. Pages ship either .foot-in or .xo-container inside the footer; both are styled alike. */
.xo-page .site-foot { margin: 0; padding: var(--xo-space-2) 0; border-top: 1px solid var(--xo-border); background: transparent; font-size: var(--xo-font-size-sm); line-height: 20px; color: var(--xo-fg-muted); }
.xo-page .site-foot > .foot-in,
.xo-page .site-foot > .xo-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--xo-space-1) var(--xo-space-3); width: 100%; max-width: var(--container-max); margin-inline: auto; padding: 0 var(--gutter); box-sizing: border-box; }
.xo-page .site-foot .foot-name { font-size: var(--xo-font-size-sm); line-height: 20px; font-weight: var(--xo-weight-medium); letter-spacing: 0; color: var(--xo-fg); }
.xo-page .site-foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-inline: calc(var(--xo-space-1-5) * -1); }
.xo-page .site-foot nav a, .xo-page .site-foot nav button { display: inline-flex; align-items: center; min-height: var(--xo-control-h-lg); padding: 0 var(--xo-space-1-5); background: none; border: 0; font: inherit; color: var(--xo-fg-muted); text-decoration: none; cursor: pointer; }
.xo-page .site-foot nav a:hover, .xo-page .site-foot nav button:hover { color: var(--xo-fg); text-decoration: underline; }
.xo-page .site-foot a:focus-visible, .xo-page .site-foot button:focus-visible { outline: 2px solid var(--xo-focus); outline-offset: 2px; border-radius: var(--xo-radius-sm); }
@media (max-width: 519px) {
  .xo-page .site-foot > .foot-in,
  .xo-page .site-foot > .xo-container { padding-inline: var(--xo-space-2); flex-direction: column; align-items: flex-start; gap: var(--xo-space-1); }
}