/* Carter xo- stack: Archivo + Instrument Sans from design source (OFL, self-hosted — legal Q18). */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-wght-normal.woff2") format("woff2"); font-weight: 500 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fonts/sora-latin-wght-normal.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
:root,[data-theme="light"]{--accent:#b4a2fa;--accent-hover:#a48ff5;--accent-text:#6d28d9;--on-accent:#191919;--paper:#f6f4ee;--paper-raised:#ffffff;--paper-sunk:#ece9e0;--ink:#0c0e13;--ink-muted:#4b505c;--line:#d8d4c8;--line-control:#767b88;--volt:var(--accent);--volt-soft:color-mix(in srgb,var(--accent) 24%,var(--paper));--on-volt:var(--on-accent);--signal:#0b57d0;--focus:var(--signal);--done:#0a7560;--blocked:#b8430a;--band:#0c0e13;--on-band:#f6f4ee;--on-band-muted:#a5abb8;--app-bg-0:#0b0b0d;--app-bg-1:#101012;--app-bg-2:#141417;--app-bg-3:#1a1a1e;--app-bg-4:#222227;--app-scrim:rgba(0,0,0,0.6);--app-line-hair:#232328;--app-line:#2e2e35;--app-line-strong:#50505a;--app-line-input:#6b6b75;--app-focus:#ffffff;--app-text-1:#ededef;--app-text-2:#a6a6af;--app-text-3:#8b8b95;--app-text-disabled:#5c5c66;--app-accent:#ffffff;--app-accent-hover:#e4e4e7;--app-accent-fg:#0b0b0d;--app-red:#f5696e;--app-red-tint:#342023;--app-red-line:rgba(245,105,110,0.32);--app-amber:#f5a623;--app-amber-tint:#342819;--app-amber-line:rgba(245,166,35,0.32);--app-blue:#5aa2ff;--app-blue-tint:#1e2837;--app-blue-line:rgba(90,162,255,0.32);--app-green:#4cc46a;--app-green-tint:#1c2d23;--app-green-line:rgba(76,196,106,0.32);--app-danger-solid:#c9302f;--app-danger-solid-hover:#b52a29;--app-line-input-hover:#7c7c86;--app-on-danger:#ffffff;--app-kbd-on-accent:rgba(11,11,13,0.25);--app-canvas:#18181b;--app-canvas-dot:#2a2a30;--scale-red:#d32f2f;--scale-orange:#ef7d00;--scale-yellow:#f2c200;--scale-green:#2e9e4f;--scale-blue:#0b57d0;--shadow-hard:4px 4px 0 0 #0c0e13;--shadow-card:0 1px 2px #0c0e1314, 0 12px 32px -16px #0c0e1340;--app-e2:0 8px 24px rgba(0,0,0,0.5);--app-e3:0 24px 64px rgba(0,0,0,0.6);}
[data-theme="dark"]{--paper:#191919;--paper-raised:#202020;--paper-sunk:#252525;--ink:#f2f2f2;--ink-muted:#9a9a9a;--line:#353535;--line-control:#727a8a;--accent-text:#c4b5fd;--volt:var(--accent);--volt-soft:color-mix(in srgb,var(--accent) 18%,var(--paper));--on-volt:var(--on-accent);--signal:#7fb0ff;--focus:var(--signal);--done:#3ccfae;--blocked:#ff8f52;--band:#1b2029;--on-band:#f3f1ea;--on-band-muted:#a5abb8;--app-bg-0:#191919;--app-bg-1:#202020;--app-bg-2:#252525;--app-bg-3:#303030;--app-bg-4:#414141;--app-scrim:rgba(0,0,0,0.6);--app-line-hair:#353535;--app-line:#2e2e35;--app-line-strong:#50505a;--app-line-input:#6b6b75;--app-focus:#ffffff;--app-text-1:#f2f2f2;--app-text-2:#9a9a9a;--app-text-3:#8b8b95;--app-text-disabled:#5c5c66;--app-accent:#ffffff;--app-accent-hover:#e4e4e7;--app-accent-fg:#0b0b0d;--app-red:#f5696e;--app-red-tint:#342023;--app-red-line:rgba(245,105,110,0.32);--app-amber:#f5a623;--app-amber-tint:#342819;--app-amber-line:rgba(245,166,35,0.32);--app-blue:#5aa2ff;--app-blue-tint:#1e2837;--app-blue-line:rgba(90,162,255,0.32);--app-green:#4cc46a;--app-green-tint:#1c2d23;--app-green-line:rgba(76,196,106,0.32);--app-danger-solid:#c9302f;--app-danger-solid-hover:#b52a29;--app-line-input-hover:#7c7c86;--app-on-danger:#ffffff;--app-kbd-on-accent:rgba(11,11,13,0.25);--app-canvas:#18181b;--app-canvas-dot:#2a2a30;--scale-red:#ff6b6b;--scale-orange:#ffa04d;--scale-yellow:#f2c200;--scale-green:#4cd38a;--scale-blue:#7fb0ff;--shadow-hard:4px 4px 0 0 #3a4050;--shadow-card:0 1px 0 #ffffff0d, 0 12px 32px -16px #000000a6;--app-e2:0 8px 24px rgba(0,0,0,0.5);--app-e3:0 24px 64px rgba(0,0,0,0.6);}
:root{--tap:44px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;--space-32:128px;--app-s1:2px;--app-s2:4px;--app-s3:8px;--app-s4:12px;--app-s5:16px;--app-s6:20px;--app-s7:24px;--app-s8:32px;--app-s9:40px;--app-s10:48px;--app-s11:64px;--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-pill:999px;--app-r-xs:4px;--app-r-sm:6px;--app-r-md:8px;--app-r-lg:12px;--container-max:1200px;--measure:640px;--gutter:24px;--header-height:72px;--app-sidebar:232px;--app-rail:56px;--app-topbar:48px;--app-content-max:1120px;--app-gutter:32px;--app-row:44px;--app-input:36px;--font-display:"Archivo", "Helvetica Neue", Arial, sans-serif;--font-body:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;--font-app-head:"Sora", system-ui, sans-serif;--font-app-body:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;--font-app-mono:"Geist Mono", ui-monospace, Menlo, monospace;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.display-xl{font-family:var(--font-display);font-size:88px;line-height:84px;font-weight:900;letter-spacing:-0.035em;}
.display-l{font-family:var(--font-display);font-size:64px;line-height:64px;font-weight:800;letter-spacing:-0.03em;}
.h1{font-family:var(--font-display);font-size:44px;line-height:48px;font-weight:800;letter-spacing:-0.02em;}
.h2{font-family:var(--font-display);font-size:30px;line-height:36px;font-weight:800;letter-spacing:-0.015em;}
.h3{font-family:var(--font-display);font-size:20px;line-height:26px;font-weight:700;letter-spacing:-0.01em;}
.price{font-family:var(--font-display);font-size:56px;line-height:56px;font-weight:900;letter-spacing:-0.03em;}
.lead{font-family:var(--font-body);font-size:20px;line-height:30px;font-weight:400;}
.body{font-family:var(--font-body);font-size:16px;line-height:26px;font-weight:400;}
.body-strong{font-family:var(--font-body);font-size:16px;line-height:26px;font-weight:600;}
.small{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:400;}
.label{font-family:var(--font-body);font-size:12px;line-height:16px;font-weight:700;letter-spacing:0.08em;}
.app-display{font-family:var(--font-app-head);font-size:28px;line-height:34px;font-weight:700;letter-spacing:-0.02em;}
.app-h1{font-family:var(--font-app-head);font-size:22px;line-height:28px;font-weight:600;letter-spacing:-0.015em;}
.app-h2{font-family:var(--font-app-head);font-size:17px;line-height:24px;font-weight:600;letter-spacing:-0.01em;}
.app-h3{font-family:var(--font-app-head);font-size:14px;line-height:20px;font-weight:600;}
.app-body{font-family:var(--font-app-body);font-size:14px;line-height:20px;font-weight:400;}
.app-body-strong{font-family:var(--font-app-body);font-size:14px;line-height:20px;font-weight:500;}
.app-small{font-family:var(--font-app-body);font-size:13px;line-height:18px;font-weight:400;}
.app-caption{font-family:var(--font-app-body);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.02em;}
.app-overline{font-family:var(--font-app-body);font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.06em;}
.app-mono{font-family:var(--font-app-mono);font-size:13px;line-height:18px;font-weight:400;}


/* Xorion Systems components. Every value comes from tokens.css; class prefix xo-. */

.xo-page { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; margin: 0; }
.xo-page *, .xo-page *::before, .xo-page *::after { box-sizing: border-box; }
.xo-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.xo-section { padding: var(--space-24) 0; }
.xo-section-sunk { background: var(--paper-sunk); }
.xo-eyebrow { display: block; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-4); }
.xo-display-xl, .xo-display-l, .xo-h1, .xo-h2, .xo-h3 { color: inherit; margin: 0; text-wrap: balance; }
.xo-lead { color: var(--ink-muted); max-width: var(--measure); margin: var(--space-4) 0 0; text-wrap: pretty; }
.xo-small { color: var(--ink-muted); }
.xo-link { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }

/* Highlight: the marker stroke behind the words that carry the promise */
.xo-hl { background: var(--volt); color: var(--on-volt); padding: 0 .12em; margin: 0 -.04em; border-radius: var(--radius-sm); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Button */
.xo-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-6); border: 2px solid transparent; border-radius: var(--radius-sm); font: 700 16px/1 var(--font-display); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 120ms cubic-bezier(.2,.8,.2,1), box-shadow 120ms cubic-bezier(.2,.8,.2,1), background-color 120ms; }
.xo-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.xo-btn-primary { background: var(--volt); color: var(--on-volt); border-color: var(--on-volt); box-shadow: var(--shadow-hard); }
.xo-btn-primary:hover { transform: translate(-2px, -2px); }
.xo-btn-primary:active { transform: translate(4px, 4px); box-shadow: none; }
.xo-btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.xo-btn-secondary:hover { background: var(--paper-sunk); }
.xo-btn-quiet { background: transparent; color: var(--ink); padding: 0 var(--space-3); }
.xo-btn-quiet:hover { text-decoration: underline; text-underline-offset: 4px; }
.xo-btn-lg { height: 60px; padding: 0 var(--space-8); font-size: 18px; }
.xo-btn-sm { height: 40px; padding: 0 var(--space-4); font-size: 15px; }
.xo-btn-block { display: flex; width: 100%; }
.xo-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* Status pill: word + mark, never colour alone */
.xo-status, .xo-verdict { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border: 1.5px solid currentColor; border-radius: var(--radius-pill); font: 600 13px/1 var(--font-body); white-space: nowrap; }
.xo-status::before, .xo-verdict::before { font-weight: 800; font-size: 12px; }
.xo-status-done { color: var(--done); }
.xo-status-done::before { content: "\2713"; }
.xo-status-blocked { color: var(--blocked); }
.xo-status-blocked::before { content: "!"; padding: 0 2px; }
.xo-status-review { color: var(--signal); }
.xo-status-review::before { content: "\25D0"; }
.xo-status-queued { color: var(--ink-muted); }
.xo-status-queued::before { content: "\25CB"; }

/* Status card: the client portal's one-glance summary */
.xo-statuscard { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.xo-statuscard-head { padding: var(--space-6) var(--space-6) var(--space-4); }
.xo-statuscard-head .xo-eyebrow { margin-bottom: var(--space-2); }
.xo-statuscard-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.xo-statuscard-count { font: 600 14px/20px var(--font-body); color: var(--ink-muted); }
.xo-progress { height: 8px; margin-top: var(--space-4); background: var(--paper-sunk); border-radius: var(--radius-pill); overflow: hidden; }
.xo-progress > span { display: block; height: 100%; background: var(--done); border-radius: var(--radius-pill); }
.xo-statusrow { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 14px var(--space-6); border-top: 1px solid var(--line); }
.xo-statusrow-name { font-weight: 600; }
.xo-statusrow-note { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); font-weight: 400; }
.xo-statuscard-foot { padding: 14px var(--space-6); border-top: 1px solid var(--line); background: var(--paper-sunk); font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Site header */
.xo-header { height: var(--header-height); border-bottom: 1px solid var(--line); background: var(--paper); }
.xo-header > .xo-container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.xo-wordmark { font: 900 21px/1 var(--font-display); letter-spacing: -.035em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.xo-wordmark span { font-weight: 500; letter-spacing: -.02em; }
.xo-nav { display: flex; align-items: center; gap: var(--space-8); }
.xo-nav a { font: 500 15px/1 var(--font-body); color: var(--ink-muted); text-decoration: none; }
.xo-nav a:hover, .xo-nav a[aria-current="page"] { color: var(--ink); }
.xo-header-actions { display: flex; align-items: center; gap: var(--space-2); }

/* Value stack: what the price buys, one row per deliverable */
.xo-stack { background: var(--paper-raised); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); overflow: hidden; }
.xo-stack-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-6); }
.xo-stack-item { display: grid; grid-template-columns: 24px 1fr auto; align-items: start; gap: var(--space-4); padding: 14px var(--space-6); border-top: 1px solid var(--line); }
.xo-stack-item b { font-weight: 600; }
.xo-stack-item small { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.xo-stack-item em { font: 600 13px/26px var(--font-body); font-style: normal; color: var(--ink-muted); }
.xo-check { width: 24px; height: 24px; margin-top: 1px; display: grid; place-items: center; background: var(--volt); color: var(--on-volt); border: 1.5px solid var(--on-volt); border-radius: 50%; font: 800 12px/1 var(--font-body); }
.xo-check::before { content: "\2713"; }
.xo-stack-total { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); padding: var(--space-6); border-top: 2px solid var(--ink); background: var(--paper-sunk); }
.xo-price { font-variant-numeric: tabular-nums; }
.xo-price small { font: 600 16px/1 var(--font-body); letter-spacing: 0; color: var(--ink-muted); margin-left: 4px; }

/* Price card */
.xo-pricegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }
.xo-pricecard { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.xo-pricecard-featured { border: 2px solid var(--ink); box-shadow: var(--shadow-hard); }
.xo-ribbon { position: absolute; top: -13px; left: var(--space-8); height: 26px; display: inline-flex; align-items: center; padding: 0 10px; background: var(--volt); color: var(--on-volt); border: 1.5px solid var(--on-volt); border-radius: var(--radius-sm); font: 700 12px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.xo-pricecard-tag { font-size: 15px; line-height: 22px; color: var(--ink-muted); margin: 0; }
.xo-pricecard-terms { font: 600 14px/20px var(--font-body); color: var(--ink-muted); margin: 0; }
.xo-ticks { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; flex: 1; }
.xo-ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; line-height: 22px; }
.xo-ticks li::before { content: "\2713"; font-weight: 800; color: var(--ink); }
.xo-ticks li.xo-ticks-lead { font-weight: 600; }

/* Steps */
.xo-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); counter-reset: xo-step; list-style: none; margin: 0; padding: 0; }
.xo-step { counter-increment: xo-step; padding-top: var(--space-6); border-top: 2px solid var(--ink); }
.xo-step::before { content: counter(xo-step); display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-6); background: var(--volt); color: var(--on-volt); border: 2px solid var(--on-volt); border-radius: var(--radius-sm); font: 900 22px/1 var(--font-display); }
.xo-step p { margin: var(--space-3) 0 0; color: var(--ink-muted); }

/* Problem / rule cards */
.xo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.xo-cards-2 { grid-template-columns: repeat(2, 1fr); }
.xo-card { padding: var(--space-6); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.xo-card p { margin: var(--space-3) 0 0; color: var(--ink-muted); }
.xo-rule { padding: var(--space-6) 0 0; border-top: 1px solid var(--line); }
.xo-rule p { margin: var(--space-2) 0 0; color: var(--ink-muted); }

/* FAQ */
.xo-faq { max-width: 800px; border-bottom: 1px solid var(--line); }
.xo-faq details { border-top: 1px solid var(--line); }
.xo-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-6) 0; list-style: none; cursor: pointer; font: 700 20px/26px var(--font-display); letter-spacing: -.01em; }
.xo-faq summary::-webkit-details-marker { display: none; }
.xo-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: var(--radius-sm); font: 700 20px/1 var(--font-body); }
.xo-faq details[open] summary::after { content: "\2013"; background: var(--volt); color: var(--on-volt); border-color: var(--on-volt); }
.xo-faq summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.xo-faq p { margin: 0; padding: 0 0 var(--space-6); max-width: var(--measure); color: var(--ink-muted); }

/* CTA band */
.xo-band { background: var(--band); color: var(--on-band); padding: var(--space-24) 0; }
.xo-band .xo-lead, .xo-band .xo-small { color: var(--on-band-muted); }
.xo-band .xo-btn-primary { box-shadow: none; }

/* Footer */
.xo-footer { padding: var(--space-12) 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.xo-footer > .xo-container { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.xo-footer nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.xo-footer a { color: var(--ink-muted); text-decoration: none; }
.xo-footer a:hover { color: var(--ink); text-decoration: underline; }

/* Hero */
.xo-hero { padding: var(--space-24) 0 var(--space-24); }
.xo-hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-12); align-items: center; }
.xo-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-8) 0 0; padding: 0; list-style: none; font: 600 14px/20px var(--font-body); color: var(--ink); }
.xo-facts li::before { content: "\2713"; margin-right: 6px; font-weight: 800; }
.xo-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: start; }
.xo-section-head { max-width: 760px; margin-bottom: var(--space-12); }

@media (max-width: 960px) {
  .xo-hero-grid, .xo-split { grid-template-columns: 1fr; }
  .xo-pricegrid, .xo-steps, .xo-cards { grid-template-columns: minmax(0, 1fr); }
  .xo-nav { display: none; }
}
@media (max-width: 760px) {
  .xo-container { padding: 0 var(--space-4); }
  .xo-section, .xo-band, .xo-hero { padding: var(--space-16) 0; }
  .xo-display-xl { font-size: 52px; line-height: 52px; }
  .xo-display-l { font-size: 44px; line-height: 46px; }
  .xo-h1 { font-size: 34px; line-height: 38px; }
  .xo-cards-2 { grid-template-columns: 1fr; }
  .xo-header .xo-btn-quiet { display: none; }
}
@media (prefers-reduced-motion: reduce) { .xo-btn { transition: none; } .xo-btn-primary:hover { transform: none; } }

/* Verdict pill: the result of one scorecard check. Same shape as the status pill, its own words */
.xo-verdict-good { color: var(--done); }
.xo-verdict-good::before { content: "\2713"; }
.xo-verdict-weak { color: var(--blocked); }
.xo-verdict-weak::before { content: "\25D0"; }
.xo-verdict-failing { color: var(--blocked); }
.xo-verdict-failing::before { content: "\2715"; }
.xo-verdict-unknown { color: var(--ink-muted); }
.xo-verdict-unknown::before { content: "\25CB"; }

/* Field */
.xo-field { display: grid; gap: 6px; }
.xo-field label { font: 600 15px/20px var(--font-body); color: var(--ink); }
.xo-field label span { font-weight: 400; color: var(--ink-muted); }
.xo-input { width: 100%; height: 52px; padding: 0 var(--space-4); background: var(--paper-raised); color: var(--ink); border: 1.5px solid var(--line-control); border-radius: var(--radius-sm); font: 400 17px/1 var(--font-body); }
.xo-input::placeholder { color: var(--ink-muted); }
.xo-input:hover { border-color: var(--ink); }
.xo-input:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.xo-field-help { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.xo-field-invalid .xo-input { border-color: var(--blocked); border-width: 2px; }
.xo-field-error { font: 600 14px/20px var(--font-body); color: var(--blocked); }
.xo-field-error::before { content: "! "; font-weight: 800; }
.xo-formcard { display: grid; gap: var(--space-6); padding: var(--space-8); background: var(--paper-raised); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); }

/* Score ring: the 0-100 score with its band */
.xo-score { position: relative; width: 200px; height: 200px; flex: none; }
.xo-score svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.xo-score-track { fill: none; stroke: var(--paper-sunk); stroke-width: 12; }
.xo-score-arc { fill: none; stroke: var(--grade); stroke-width: 12; stroke-linecap: round; }
.xo-score-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 900 64px/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.xo-score-num small { display: block; margin-top: 4px; font: 600 14px/1 var(--font-body); letter-spacing: 0; color: var(--ink-muted); }
.xo-grade { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 2px solid var(--grade); border-radius: var(--radius-pill); color: var(--grade); font: 700 14px/1 var(--font-body); }
.xo-grade-losing, .xo-grade-needs { --grade: var(--blocked); }
.xo-grade-solid { --grade: var(--signal); }
.xo-grade-strong { --grade: var(--done); }
.xo-scorecard { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); text-align: center; }
.xo-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; background: var(--paper-sunk); color: var(--ink); border-radius: var(--radius-pill); font: 600 13px/1 var(--font-body); }

/* Fix card: one of the top three fixes, with the points it is worth */
.xo-fixes { display: grid; gap: var(--space-4); counter-reset: xo-fix; }
.xo-fix { counter-increment: xo-fix; display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-4); align-items: start; padding: var(--space-6); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.xo-fix::before { content: counter(xo-fix); display: grid; place-items: center; width: 40px; height: 40px; background: var(--volt); color: var(--on-volt); border: 2px solid var(--on-volt); border-radius: var(--radius-sm); font: 900 18px/1 var(--font-display); }
.xo-fix p { margin: 6px 0 0; color: var(--ink-muted); }
.xo-fix-effort { display: inline-block; margin-top: var(--space-3); font: 700 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.xo-fix-gain { text-align: right; font: 900 32px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xo-fix-gain small { display: block; margin-top: 4px; font: 600 13px/1 var(--font-body); letter-spacing: 0; color: var(--ink-muted); }

/* Check rows: every check, its verdict and its points */
.xo-checks { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.xo-checkrow { display: grid; grid-template-columns: 1fr 72px 120px; gap: var(--space-4); align-items: center; padding: 14px var(--space-6); border-top: 1px solid var(--line); }
.xo-checkrow:first-child { border-top: 0; }
.xo-checkrow b { font-weight: 600; }
.xo-checkrow small { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.xo-checkrow-pts { font: 600 14px/20px var(--font-body); color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; }
.xo-checkrow > .xo-verdict { justify-self: end; }
.xo-attribution { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: var(--space-3) 0 0; }

/* Progress steps: what the checker is doing right now */
.xo-progress-steps { list-style: none; margin: 0; padding: 0; counter-reset: xo-ps; }
.xo-progress-steps li { counter-increment: xo-ps; display: grid; grid-template-columns: 32px 1fr auto; gap: var(--space-4); align-items: center; padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink-muted); }
.xo-progress-steps li:first-child { border-top: 0; }
.xo-progress-steps li::before { content: counter(xo-ps); display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--line-control); border-radius: var(--radius-sm); font: 800 15px/1 var(--font-display); color: var(--ink-muted); }
.xo-progress-steps li.is-done { color: var(--ink); }
.xo-progress-steps li.is-done::before { content: "\2713"; background: var(--done); border-color: var(--done); color: var(--paper); }
.xo-progress-steps li.is-active { color: var(--ink); font-weight: 600; }
.xo-progress-steps li.is-active::before { background: var(--volt); border-color: var(--on-volt); color: var(--on-volt); }
.xo-progress-steps li > span:last-child { font: 400 14px/20px var(--font-body); color: var(--ink-muted); }
.xo-busy { height: 4px; margin-top: var(--space-4); background: var(--paper-sunk); border-radius: var(--radius-pill); overflow: hidden; }
.xo-busy::after { content: ""; display: block; width: 30%; height: 100%; background: var(--ink); border-radius: var(--radius-pill); animation: xo-busy 1.6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes xo-busy { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* Choice card: pick one option, a radio inside a card */
.xo-choices { display: grid; gap: var(--space-3); }
.xo-choice { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4) var(--space-6); background: var(--paper-raised); color: var(--ink); border: 1.5px solid var(--line-control); border-radius: var(--radius-md); cursor: pointer; }
.xo-choice:hover { border-color: var(--ink); }
.xo-choice input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--ink); }
.xo-choice input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.xo-choice b { font-weight: 600; }
.xo-choice small { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.xo-choice:has(input:checked) { border: 2px solid var(--ink); box-shadow: var(--shadow-hard); }

/* Notice: a plain message when something did not go to plan */
.xo-notice { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-6); background: var(--paper-raised); color: var(--ink); border: 1.5px solid var(--line-control); border-radius: var(--radius-lg); }
.xo-notice::before { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); font: 900 20px/1 var(--font-display); color: var(--paper); }
.xo-notice-blocked::before { content: "!"; background: var(--blocked); }
.xo-notice-info::before { content: "i"; background: var(--signal); }
.xo-notice p { margin: 6px 0 0; color: var(--ink-muted); }
.xo-notice .xo-cta-row { margin-top: var(--space-4); }

/* Report teaser: the full report, blurred behind its call to action */
.xo-teaser { position: relative; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-raised); overflow: hidden; }
.xo-teaser-body { padding: var(--space-8); filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); }
.xo-teaser-shot { height: 220px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-sunk); }
.xo-teaser-line { height: 12px; margin-top: 10px; border-radius: var(--radius-pill); background: var(--line); }
.xo-teaser > * { grid-area: 1 / 1; }
.xo-teaser-body { align-self: stretch; justify-self: stretch; }
.xo-teaser-panel { position: relative; margin: var(--space-12) var(--space-4); width: min(520px, calc(100% - 32px)); display: grid; gap: var(--space-4); padding: var(--space-8); background: var(--paper-raised); border: 2px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); }
.xo-teaser-panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.xo-teaser-panel li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; line-height: 22px; }
.xo-teaser-panel li::before { content: "\2713"; font-weight: 800; }

/* Scorecard page layouts */
.xo-result-grid { display: grid; grid-template-columns: 340px 1fr; gap: var(--space-8); align-items: stretch; }
.xo-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.xo-pillar { padding: var(--space-6); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.xo-pillar-pts { font: 900 40px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.xo-pillar-pts small { font: 600 14px/1 var(--font-body); letter-spacing: 0; color: var(--ink-muted); margin-left: 4px; }
.xo-pillar h3 { margin-top: var(--space-4); }
.xo-pillar p { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.xo-pillar-total { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.xo-pillar-total p, .xo-pillar-total .xo-pillar-pts small { color: var(--paper); opacity: .8; }

@media (max-width: 960px) {
  .xo-result-grid { grid-template-columns: 1fr; }
  .xo-pillars { grid-template-columns: repeat(2, 1fr); }
  .xo-teaser-body { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .xo-checkrow { grid-template-columns: 1fr auto; }
  .xo-checkrow-pts { display: none; }
  .xo-fix { grid-template-columns: 1fr auto; }
  .xo-fix::before { display: none; }
  .xo-pillars { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .xo-busy::after { animation: none; width: 100%; opacity: .35; } }

/* Compare table: what each plan includes */
.xo-compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; font-size: 15px; line-height: 22px; }
.xo-compare th, .xo-compare td { padding: 14px var(--space-6); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.xo-compare thead th { background: var(--paper-sunk); font: 800 18px/24px var(--font-display); letter-spacing: -.01em; }
.xo-compare thead th small { display: block; font: 600 14px/20px var(--font-body); color: var(--ink-muted); letter-spacing: 0; }
.xo-compare thead th.is-featured { background: var(--volt); color: var(--on-volt); }
.xo-compare thead th.is-featured small { color: var(--on-volt); }
.xo-compare td:not(:first-child), .xo-compare th:not(:first-child) { text-align: center; width: 18%; }
.xo-compare tbody th { font: 600 15px/22px var(--font-body); }
.xo-compare tbody th small { display: block; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.xo-compare tr.xo-compare-group th { background: var(--paper-sunk); font: 700 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding-top: 10px; padding-bottom: 10px; }
.xo-compare tr:last-child > * { border-bottom: 0; }
.xo-yes { font-weight: 800; }
.xo-yes::before { content: "\2713"; }
.xo-no { color: var(--ink-muted); }
.xo-no::before { content: "\2014"; }
.xo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Enterprise strip */
.xo-quote-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: center; padding: var(--space-8); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.xo-quote-row p { margin: var(--space-2) 0 0; color: var(--ink-muted); max-width: 64ch; }

/* Sign-up: consent gate and sign-in buttons */
.xo-consent { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: start; font-size: 15px; line-height: 22px; cursor: pointer; }
.xo-consent input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.xo-consent input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.xo-sso { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; height: 52px; padding: 0 var(--space-6); background: var(--paper-raised); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-sm); font: 700 16px/1 var(--font-display); cursor: pointer; }
.xo-sso svg { width: 20px; height: 20px; flex: none; }
.xo-sso:hover { background: var(--paper-sunk); }
.xo-sso:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.xo-sso:disabled { border-color: var(--line-control); color: var(--ink-muted); background: var(--paper-sunk); cursor: not-allowed; }
.xo-sso:disabled svg { opacity: .55; }
.xo-sso-stack { display: grid; gap: var(--space-3); }
.xo-or { margin: 0; text-align: center; font: 700 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.xo-auth { min-height: calc(100vh - var(--header-height)); display: grid; grid-template-columns: 1fr 440px; gap: var(--space-16); align-items: start; padding: var(--space-16) 0 var(--space-24); }
.xo-auth-aside { display: grid; gap: var(--space-6); padding-top: var(--space-4); }
.xo-promise { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; }
.xo-promise li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.xo-promise li::before { content: "\2713"; display: grid; place-items: center; width: 24px; height: 24px; background: var(--volt); color: var(--on-volt); border: 1.5px solid var(--on-volt); border-radius: 50%; font: 800 12px/1 var(--font-body); }
.xo-promise b { display: block; font-weight: 600; }
.xo-promise span { color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.xo-carry { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); background: var(--volt-soft); color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius-md); }
@media (max-width: 960px) { .xo-auth { grid-template-columns: 1fr; gap: var(--space-8); } .xo-quote-row { grid-template-columns: 1fr; } .xo-compare th, .xo-compare td { padding: 12px var(--space-3); } }

/* Code block: things to copy exactly (user agent, robots.txt lines) */
.xo-code { position: relative; margin: 0; padding: var(--space-4) var(--space-6); padding-right: 96px; background: var(--band); color: var(--on-band); border-radius: var(--radius-md); font: 400 15px/24px var(--font-mono); white-space: pre-wrap; word-break: break-word; }
.xo-code .xo-copy { position: absolute; top: var(--space-3); right: var(--space-3); height: 32px; padding: 0 var(--space-3); background: transparent; color: var(--on-band); border: 1.5px solid var(--on-band-muted); border-radius: var(--radius-sm); font: 700 13px/1 var(--font-body); cursor: pointer; }
.xo-code .xo-copy:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.xo-inline-code { padding: 1px 6px; background: var(--paper-sunk); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 400 .92em/1 var(--font-mono); }

/* Do / don't lists */
.xo-list-yes, .xo-list-no { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.xo-list-yes li, .xo-list-no li { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); font-size: 16px; line-height: 24px; }
.xo-list-yes li::before { content: "\2713"; font-weight: 800; }
.xo-list-no li::before { content: "\2715"; font-weight: 800; color: var(--blocked); }

/* Process timeline: who does what, step by step */
.xo-timeline { list-style: none; margin: 0; padding: 0; counter-reset: xo-tl; display: grid; }
.xo-tl { counter-increment: xo-tl; position: relative; display: grid; grid-template-columns: 64px 1fr 260px; gap: var(--space-6); padding: var(--space-8) 0; border-top: 1px solid var(--line); }
.xo-tl:last-child { border-bottom: 1px solid var(--line); }
.xo-tl::before { content: counter(xo-tl); display: grid; place-items: center; width: 56px; height: 56px; background: var(--volt); color: var(--on-volt); border: 2px solid var(--on-volt); border-radius: var(--radius-sm); font: 900 26px/1 var(--font-display); }
.xo-tl p { margin: var(--space-2) 0 0; color: var(--ink-muted); max-width: 58ch; }
.xo-tl-who { display: grid; gap: var(--space-2); align-content: start; font-size: 15px; line-height: 22px; }
.xo-who { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); font: 700 12px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; justify-self: start; }
.xo-who-you { background: var(--volt); color: var(--on-volt); border-color: var(--on-volt); }
.xo-tl-who span { color: var(--ink-muted); }
@media (max-width: 960px) { .xo-tl { grid-template-columns: 56px 1fr; } .xo-tl-who { grid-column: 2; } }

/* States: focus on every link, disabled, loading (audit actions 1-3) */
.xo-link:focus-visible, .xo-nav a:focus-visible, .xo-footer a:focus-visible, .xo-wordmark:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.xo-btn:disabled, .xo-btn[aria-disabled="true"] { background: var(--paper-sunk); color: var(--ink-muted); border-color: var(--line-control); box-shadow: none; transform: none; cursor: not-allowed; }
.xo-btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.xo-btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2.5px solid var(--on-volt); border-right-color: transparent; border-radius: 50%; animation: xo-spin .8s linear infinite; }
.xo-btn-secondary[aria-busy="true"]::after, .xo-btn-quiet[aria-busy="true"]::after { border-color: var(--ink); border-right-color: transparent; }
@keyframes xo-spin { to { transform: rotate(360deg); } }
.xo-input:disabled { background: var(--paper-sunk); color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; }
.xo-input:disabled:hover { border-color: var(--line); }
.xo-field-disabled label { color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .xo-btn[aria-busy="true"]::after { animation: none; border-right-color: var(--on-volt); opacity: .6; } }

/* Layout helpers: page compositions use these instead of inline px (spacing tokens only) */
.xo-vstack { display: grid; grid-template-columns: minmax(0, 1fr); }
.xo-gap-1 { gap: var(--space-1); } .xo-gap-2 { gap: var(--space-2); } .xo-gap-3 { gap: var(--space-3); } .xo-gap-4 { gap: var(--space-4); } .xo-gap-6 { gap: var(--space-6); } .xo-gap-8 { gap: var(--space-8); } .xo-gap-12 { gap: var(--space-12); }
.xo-pad-4 { padding: var(--space-4); } .xo-pad-6 { padding: var(--space-6); } .xo-pad-8 { padding: var(--space-8); }
.xo-mt-1 { margin-top: var(--space-1); } .xo-mt-2 { margin-top: var(--space-2); } .xo-mt-4 { margin-top: var(--space-4); } .xo-mt-6 { margin-top: var(--space-6); } .xo-mt-8 { margin-top: var(--space-8); } .xo-mt-12 { margin-top: var(--space-12); }

/* ===== Admin lane (xa-) ===== */
/* Source: wiki/design/cloud/admin-ui-design-spec.md. Dark only, white accent, status colours mean status. */
.xa-app { margin: 0; background: var(--app-bg-0); color: var(--app-text-1); font: 400 14px/20px var(--font-app-body); color-scheme: dark; -webkit-font-smoothing: antialiased; }
.xa-app *, .xa-app *::before, .xa-app *::after { box-sizing: border-box; }
.xa-h1 { margin: 0; }
.xa-h2 { margin: 0; }
.xa-h3 { margin: 0; }
.xa-display { font-variant-numeric: tabular-nums; }
.xa-overline { text-transform: uppercase; color: var(--app-text-2); }
.xa-small { color: var(--app-text-2); }
.xa-meta { color: var(--app-text-3); font-variant-numeric: tabular-nums; }
.xa-num { font-variant-numeric: tabular-nums; }
.xa-muted { color: var(--app-text-2); }
.xa-faint { color: var(--app-text-3); }

/* Shell: sidebar + topbar + content */
.xa-shell { display: grid; grid-template-columns: var(--app-sidebar) 1fr; min-height: 100vh; }
.xa-sidebar { display: flex; flex-direction: column; gap: 2px; padding: var(--app-s4) var(--app-s3); background: var(--app-bg-1); border-right: 1px solid var(--app-line-hair); }
.xa-brand { display: flex; align-items: center; gap: var(--app-s3); height: 36px; padding: 0 var(--app-s4); margin-bottom: var(--app-s5); font: 600 15px/1 var(--font-app-head); letter-spacing: -.01em; color: var(--app-text-1); text-decoration: none; }
.xa-brand img { width: 20px; height: 20px; }
.xa-side-label { margin: var(--app-s7) var(--app-s4) var(--app-s2); font: 600 12px/16px var(--font-app-body); letter-spacing: .06em; text-transform: uppercase; color: var(--app-text-3); }
.xa-side-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--app-s3); height: 36px; padding: 0 var(--app-s4); border-radius: var(--app-r-sm); font-weight: 500; color: var(--app-text-2); text-decoration: none; transition: background-color 100ms cubic-bezier(.2,0,0,1); }
.xa-side-item:hover { background: var(--app-bg-3); color: var(--app-text-1); }
.xa-side-item[aria-current="page"] { background: var(--app-bg-4); color: var(--app-text-1); }
.xa-side-item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--app-accent); }
.xa-side-item:focus-visible, .xa-btn:focus-visible, .xa-tab:focus-visible, .xa-card-link:focus-visible, .xa-seg button:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.xa-badge { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--app-bg-4); color: var(--app-text-1); font: 500 12px/1 var(--font-app-body); font-variant-numeric: tabular-nums; }
.xa-badge-red { background: var(--app-red-tint); color: var(--app-red); }
.xa-sidebar-foot { margin-top: auto; padding-top: var(--app-s5); border-top: 1px solid var(--app-line-hair); display: grid; gap: 2px; }
.xa-account { display: flex; align-items: center; gap: var(--app-s3); height: 40px; padding: 0 var(--app-s4); color: var(--app-text-2); font-size: 13px; }
.xa-avatar { width: 24px; height: 24px; border-radius: 999px; background: var(--app-bg-4); display: grid; place-items: center; font: 600 11px/1 var(--font-app-body); color: var(--app-text-1); flex: none; }
.xa-main { min-width: 0; display: flex; flex-direction: column; }
.xa-topbar { height: var(--app-topbar); display: flex; align-items: center; justify-content: space-between; gap: var(--app-s5); padding: 0 var(--app-gutter); background: var(--app-bg-1); border-bottom: 1px solid var(--app-line-hair); }
.xa-crumbs { display: flex; align-items: center; gap: var(--app-s3); color: var(--app-text-2); font-weight: 500; }
.xa-crumbs a { color: var(--app-text-2); text-decoration: none; }
.xa-crumbs a:hover { color: var(--app-text-1); }
.xa-crumbs b { color: var(--app-text-1); font-weight: 500; }
.xa-search { display: flex; align-items: center; justify-content: space-between; gap: var(--app-s5); width: 240px; height: 32px; padding: 0 var(--app-s3) 0 var(--app-s4); background: var(--app-bg-0); border: 1px solid var(--app-line-input); border-radius: var(--app-r-sm); color: var(--app-text-3); font-size: 13px; }
.xa-content { width: 100%; max-width: calc(var(--app-content-max) + 2 * var(--app-gutter)); padding: var(--app-s8) var(--app-gutter) var(--app-s11); display: grid; gap: var(--app-s8); align-content: start; }
.xa-content-wide { max-width: none; }
.xa-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--app-s5); }
.xa-pagehead p { margin: var(--app-s2) 0 0; color: var(--app-text-2); }
.xa-block { display: grid; gap: var(--app-s4); }
.xa-blockhead { display: flex; align-items: center; justify-content: space-between; gap: var(--app-s5); }
.xa-blockhead a { color: var(--app-text-2); font-size: 13px; font-weight: 500; text-decoration: none; }
.xa-blockhead a:hover { color: var(--app-text-1); }
.xa-row { display: flex; align-items: center; gap: var(--app-s3); flex-wrap: wrap; }
.xa-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--app-s7); }
.xa-grid-55 { display: grid; grid-template-columns: 55fr 45fr; gap: var(--app-s7); }
.xa-grid-side { display: grid; grid-template-columns: 1fr 340px; gap: var(--app-s7); align-items: start; }

/* Buttons */
.xa-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--app-s3); height: 32px; padding: 0 var(--app-s4); border: 1px solid transparent; border-radius: var(--app-r-sm); font: 500 14px/1 var(--font-app-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 100ms cubic-bezier(.2,0,0,1), border-color 100ms cubic-bezier(.2,0,0,1), transform 100ms cubic-bezier(.2,0,0,1); }
.xa-btn:active { transform: scale(.98); }
.xa-btn-primary { background: var(--app-accent); color: var(--app-accent-fg); }
.xa-btn-primary:hover { background: var(--app-accent-hover); }
.xa-btn-secondary { background: var(--app-bg-3); color: var(--app-text-1); border-color: var(--app-line); }
.xa-btn-secondary:hover { background: var(--app-bg-4); border-color: var(--app-line-strong); }
.xa-btn-ghost { background: transparent; color: var(--app-text-2); }
.xa-btn-ghost:hover { background: var(--app-bg-3); color: var(--app-text-1); }
.xa-btn-danger { background: var(--app-danger-solid); color: var(--app-on-danger); }
.xa-btn-danger:hover { background: var(--app-danger-solid-hover); }
.xa-btn-sm { height: 28px; padding: 0 10px; font-size: 13px; }
.xa-btn-lg { height: 40px; padding: 0 var(--app-s5); }
.xa-btn[aria-disabled="true"] { background: var(--app-bg-2); color: var(--app-text-disabled); border-color: var(--app-line-hair); cursor: not-allowed; transform: none; }
.xa-kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid var(--app-line); border-radius: var(--app-r-xs); background: var(--app-bg-2); color: var(--app-text-3); font: 500 11px/1 var(--font-app-mono); }
.xa-btn-primary .xa-kbd { background: transparent; border-color: var(--app-kbd-on-accent); color: var(--app-accent-fg); }

/* Inputs */
.xa-field { display: grid; gap: 6px; }
.xa-label { font: 500 13px/18px var(--font-app-body); color: var(--app-text-2); }
.xa-input { width: 100%; height: var(--app-input); padding: 0 var(--app-s4); background: var(--app-bg-0); color: var(--app-text-1); border: 1px solid var(--app-line-input); border-radius: var(--app-r-sm); font: 400 14px/20px var(--font-app-body); }
textarea.xa-input { height: auto; min-height: 88px; padding: var(--app-s3) var(--app-s4); resize: vertical; }
.xa-input::placeholder { color: var(--app-text-3); }
.xa-input:hover { border-color: var(--app-line-input-hover); }
.xa-input:focus { outline: 2px solid var(--app-focus); outline-offset: 2px; border-color: var(--app-focus); }
.xa-input[aria-invalid="true"] { border-color: var(--app-red); }
.xa-help { font-size: 13px; line-height: 18px; color: var(--app-text-3); }
.xa-error { font-size: 13px; line-height: 18px; color: var(--app-red); }
.xa-error::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--app-red); vertical-align: 0; }

/* Alert marker + ownership tag */
.xa-marker { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid; border-radius: var(--app-r-xs); font: 500 12px/1 var(--font-app-body); letter-spacing: .02em; white-space: nowrap; }
.xa-marker::before { content: ""; width: 8px; height: 8px; flex: none; background: currentColor; }
.xa-marker-blocked { color: var(--app-red); background: var(--app-red-tint); border-color: var(--app-red-line); }
.xa-marker-action { color: var(--app-amber); background: var(--app-amber-tint); border-color: var(--app-amber-line); }
.xa-marker-action::before { width: 9px; height: 8px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.xa-marker-info { color: var(--app-blue); background: var(--app-blue-tint); border-color: var(--app-blue-line); }
.xa-marker-info::before { border-radius: 999px; }
.xa-marker-fine { color: var(--app-green); background: var(--app-green-tint); border-color: var(--app-green-line); }
.xa-marker-fine::before { content: "\2713"; width: auto; height: auto; background: none; font-weight: 700; }
.xa-marker-dot { padding: 0; width: 8px; height: 8px; border: 0; background: none; }
.xa-marker-dot::before { margin: 0; }
.xa-marker-neutral { color: var(--app-text-2); background: var(--app-bg-3); border-color: var(--app-line); }
.xa-marker-neutral::before { display: none; }
.xa-owner { display: inline-grid; place-items: center; height: 22px; padding: 0 7px; border: 1px solid var(--app-line-strong); border-radius: var(--app-r-xs); font: 500 11px/1 var(--font-app-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.xa-owner-ours { color: var(--app-text-1); border-style: solid; }
.xa-owner-client { color: var(--app-text-2); border-style: dashed; }
.xa-owner-ai { color: var(--app-text-2); border-style: dotted; }

/* Panels, cards, tables */
.xa-panel { background: var(--app-bg-2); border: 1px solid var(--app-line-hair); border-radius: var(--app-r-md); }
.xa-panel-pad { padding: var(--app-s5); }
.xa-card { display: grid; gap: var(--app-s3); padding: var(--app-s5); background: var(--app-bg-2); border: 1px solid var(--app-line-hair); border-radius: var(--app-r-md); color: inherit; text-decoration: none; }
.xa-card-link { cursor: pointer; transition: background-color 100ms cubic-bezier(.2,0,0,1), border-color 100ms cubic-bezier(.2,0,0,1); }
.xa-card-link:hover { background: var(--app-bg-3); border-color: var(--app-line); }
.xa-card-blocked { box-shadow: inset 2px 0 0 var(--app-red); }
.xa-card-action { box-shadow: inset 2px 0 0 var(--app-amber); }
.xa-card-selected { border-color: var(--app-accent); }
.xa-card-dragging { background: var(--app-bg-3); box-shadow: var(--app-e2); opacity: .95; }
.xa-slot { height: 72px; border: 1px dashed var(--app-line); border-radius: var(--app-r-md); }
.xa-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--app-bg-2); border: 1px solid var(--app-line-hair); border-radius: var(--app-r-md); overflow: hidden; font-size: 13px; line-height: 18px; }
.xa-table th { height: 36px; padding: 0 var(--app-s4); background: var(--app-bg-0); color: var(--app-text-2); font: 600 12px/16px var(--font-app-body); letter-spacing: .06em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--app-line-hair); white-space: nowrap; }
.xa-table td { height: var(--app-row); padding: 0 var(--app-s4); border-bottom: 1px solid var(--app-line-hair); vertical-align: middle; }
.xa-table tr:last-child td { border-bottom: 0; }
.xa-table tbody tr:hover td { background: var(--app-bg-3); }
.xa-table tr.is-focus td:first-child { box-shadow: inset 2px 0 0 var(--app-focus); }
.xa-table tr.is-selected td { background: var(--app-bg-4); }
.xa-table td.xa-r, .xa-table th.xa-r { text-align: right; font-variant-numeric: tabular-nums; }
.xa-cell-main { font-size: 14px; font-weight: 500; color: var(--app-text-1); }
.xa-cell-sub { display: block; color: var(--app-text-3); font-size: 12px; line-height: 16px; }
.xa-unread::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 999px; background: var(--app-accent); vertical-align: 2px; }
.xa-list { display: grid; }
.xa-li { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--app-s4); align-items: center; min-height: var(--app-row); padding: var(--app-s3) var(--app-s5); border-top: 1px solid var(--app-line-hair); }
.xa-li:first-child { border-top: 0; }
.xa-li:hover { background: var(--app-bg-3); }
.xa-li-body b { font-weight: 500; }
.xa-li-body span { color: var(--app-text-2); }

/* Tabs and segmented control */
.xa-tabs { display: flex; gap: var(--app-s5); border-bottom: 1px solid var(--app-line-hair); overflow-x: auto; }
.xa-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 2px; color: var(--app-text-2); font-weight: 500; text-decoration: none; white-space: nowrap; }
.xa-tab:hover { color: var(--app-text-1); }
.xa-tab[aria-selected="true"] { color: var(--app-text-1); }
.xa-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--app-accent); }
.xa-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--app-bg-0); border: 1px solid var(--app-line-hair); border-radius: var(--app-r-sm); }
.xa-seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: var(--app-text-2); font: 500 13px/1 var(--font-app-body); cursor: pointer; }
.xa-seg button[aria-pressed="true"] { background: var(--app-bg-4); color: var(--app-text-1); }
.xa-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 999px; color: var(--app-text-2); font: 500 13px/1 var(--font-app-body); background: transparent; }
.xa-pill[aria-pressed="true"] { background: var(--app-bg-4); color: var(--app-text-1); border-color: var(--app-line-strong); }

/* Money tile, stage board, health */
.xa-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--app-s5); }
.xa-tile { display: grid; gap: var(--app-s2); padding: var(--app-s5); background: var(--app-bg-2); border: 1px solid var(--app-line-hair); border-radius: var(--app-r-md); }
.xa-tile-sub { font-size: 13px; line-height: 18px; color: var(--app-text-3); }
.xa-tile-sub.is-overdue { color: var(--app-red); font-weight: 500; }
.xa-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--app-s5); align-items: start; }
.xa-col { display: grid; gap: var(--app-s3); align-content: start; }
.xa-colhead { display: flex; align-items: center; justify-content: space-between; height: 28px; font: 600 12px/16px var(--font-app-body); letter-spacing: .06em; text-transform: uppercase; color: var(--app-text-2); }
.xa-health { display: grid; grid-template-columns: 1fr auto auto; gap: var(--app-s4); align-items: center; min-height: 40px; padding: 0 var(--app-s5); border-top: 1px solid var(--app-line-hair); }
.xa-health:first-child { border-top: 0; }
.xa-progress { height: 4px; background: var(--app-bg-4); border-radius: 999px; overflow: hidden; }
.xa-progress > span { display: block; height: 100%; background: var(--app-text-2); border-radius: 999px; }
.xa-kv { display: grid; grid-template-columns: 140px 1fr; gap: var(--app-s3) var(--app-s5); font-size: 13px; line-height: 18px; }
.xa-kv dt { color: var(--app-text-3); }
.xa-kv dd { margin: 0; color: var(--app-text-1); }

/* Empty state, toast, modal */
.xa-empty { display: grid; justify-items: center; gap: var(--app-s3); max-width: 360px; margin: 0 auto; padding: var(--app-s10) var(--app-s5); text-align: center; }
.xa-empty-mark { width: 32px; height: 32px; border: 1.5px solid var(--app-text-3); border-radius: var(--app-r-sm); }
.xa-empty p { margin: 0; font-size: 13px; line-height: 18px; color: var(--app-text-2); }
.xa-toast { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--app-s4); align-items: center; width: 360px; padding: var(--app-s4) var(--app-s5); background: var(--app-bg-3); border: 1px solid var(--app-line); border-radius: var(--app-r-md); box-shadow: var(--app-e2); font-size: 13px; line-height: 18px; }
.xa-modal { width: 480px; display: grid; gap: var(--app-s5); padding: var(--app-s7); background: var(--app-bg-2); border: 1px solid var(--app-line); border-radius: var(--app-r-lg); box-shadow: var(--app-e3); }
.xa-modal-foot { display: flex; justify-content: flex-end; gap: var(--app-s3); }
.xa-scrim { display: grid; place-items: center; padding: var(--app-s8); background: var(--app-scrim); }

/* Activity timeline */
.xa-feed { display: grid; }
.xa-event { display: grid; grid-template-columns: 56px 1fr; gap: var(--app-s4); padding: 10px var(--app-s5); border-top: 1px solid var(--app-line-hair); font-size: 13px; line-height: 18px; }
.xa-event:first-child { border-top: 0; }
.xa-event time { color: var(--app-text-3); font-variant-numeric: tabular-nums; }

/* AI proposal (Penpot plugin panel and agent proposals) */
.xa-plugin { width: 320px; display: grid; grid-template-rows: auto 1fr auto; background: var(--app-bg-1); border: 1px solid var(--app-line-hair); border-radius: var(--app-r-md); overflow: hidden; }
.xa-plugin-head { display: grid; gap: var(--app-s3); padding: var(--app-s4) var(--app-s5); border-bottom: 1px solid var(--app-line-hair); }
.xa-plugin-body { display: grid; gap: var(--app-s4); padding: var(--app-s5); align-content: start; }
.xa-plugin-foot { display: grid; gap: var(--app-s3); padding: var(--app-s4) var(--app-s5); border-top: 1px solid var(--app-line-hair); }
.xa-ai-label { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font-app-body); color: var(--app-text-2); }
.xa-ai-label::before { content: "AI"; display: inline-grid; place-items: center; height: 18px; padding: 0 5px; border: 1px dotted var(--app-line-strong); border-radius: var(--app-r-xs); font: 600 10px/1 var(--font-app-body); letter-spacing: .06em; color: var(--app-text-1); }
.xa-meter { display: grid; gap: 6px; }
.xa-meter-row { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--app-text-3); font-variant-numeric: tabular-nums; }
.xa-proposal { display: grid; gap: var(--app-s4); padding: var(--app-s4); background: var(--app-bg-2); border: 1px solid var(--app-line); border-radius: var(--app-r-md); }
.xa-proposal.is-applied { border-color: var(--app-line-hair); }
.xa-diff { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font: 400 12px/18px var(--font-app-mono); }
.xa-diff li { display: grid; grid-template-columns: 14px 1fr; gap: 6px; padding: 2px 6px; border-radius: var(--app-r-xs); color: var(--app-text-2); }
.xa-diff li::before { color: var(--app-text-3); }
.xa-diff .is-del { background: var(--app-red-tint); color: var(--app-text-1); }
.xa-diff .is-del::before { content: "\2212"; color: var(--app-red); }
.xa-diff .is-add { background: var(--app-green-tint); color: var(--app-text-1); }
.xa-diff .is-add::before { content: "+"; color: var(--app-green); }
.xa-diff .is-ctx::before { content: "\00b7"; }
.xa-chat { display: grid; gap: var(--app-s2); }
.xa-chat p { margin: 0; padding: var(--app-s3) var(--app-s4); background: var(--app-bg-3); border-radius: var(--app-r-md); font-size: 13px; line-height: 18px; }

/* Penpot frame (schematic: Penpot's own UI, we only own the plugin panel) */
.xa-penpot { display: grid; grid-template-columns: 240px 1fr 320px; grid-template-rows: 44px 1fr; height: 720px; background: var(--app-bg-0); border: 1px solid var(--app-line-hair); border-radius: var(--app-r-lg); overflow: hidden; }
.xa-penpot-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--app-s5); padding: 0 var(--app-s5); background: var(--app-bg-1); border-bottom: 1px solid var(--app-line-hair); font-size: 13px; color: var(--app-text-2); }
.xa-penpot-layers { padding: var(--app-s4); border-right: 1px solid var(--app-line-hair); background: var(--app-bg-1); display: grid; gap: 2px; align-content: start; font-size: 13px; }
.xa-penpot-layers span { height: 28px; display: flex; align-items: center; padding: 0 var(--app-s3); border-radius: var(--app-r-xs); color: var(--app-text-2); }
.xa-penpot-layers span.is-sel { background: var(--app-bg-4); color: var(--app-text-1); }
.xa-penpot-canvas { position: relative; display: grid; place-items: center; padding: var(--app-s8); background-color: var(--app-canvas); background-image: radial-gradient(var(--app-canvas-dot) 1px, transparent 1px); background-size: 16px 16px; overflow: hidden; }
.xa-penpot-side { padding: var(--app-s3); border-left: 1px solid var(--app-line-hair); background: var(--app-bg-0); }
.xa-penpot-side .xa-plugin { width: 100%; height: 100%; }
.xa-sel { outline: 1.5px solid var(--app-blue); outline-offset: 2px; }
.xa-thumb { aspect-ratio: 16 / 10; border-radius: var(--app-r-sm); background: var(--app-bg-3); border: 1px solid var(--app-line-hair); overflow: hidden; display: grid; place-items: center; }

/* Compare (review a submission) */
.xa-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--app-s5); }
.xa-compare figure { margin: 0; display: grid; gap: var(--app-s3); }
.xa-compare figcaption { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--app-text-3); }

/* Review stars (GBP) */
.xa-stars { color: var(--app-text-1); letter-spacing: 1px; font-size: 13px; }
.xa-stars span { color: var(--app-text-disabled); }
.xa-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--app-s3); }
.xa-photo { aspect-ratio: 1; border-radius: var(--app-r-sm); background: var(--app-bg-3); border: 1px solid var(--app-line-hair); display: grid; place-items: end start; padding: 6px; font-size: 11px; color: var(--app-text-3); }
.xa-hours { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--app-s3) var(--app-s4); align-items: center; font-size: 13px; }
.xa-quote { margin: 0; padding-left: var(--app-s4); border-left: 1px solid var(--app-line-strong); color: var(--app-text-1); font-size: 13px; line-height: 20px; }

@media (max-width: 1023px) {
  .xa-shell { grid-template-columns: 184px 1fr; }
  .xa-account span { display: none; }
  .xa-grid-2, .xa-grid-55, .xa-grid-side, .xa-compare { grid-template-columns: 1fr; }
  .xa-board, .xa-tiles { grid-template-columns: repeat(2, 1fr); }
  .xa-penpot { grid-template-columns: 1fr; grid-template-rows: 44px 1fr auto; height: auto; }
  .xa-penpot-layers { display: none; }
}
@media (max-width: 639px) {
  .xa-shell { grid-template-columns: 1fr; }
  .xa-search, .xa-topbar .xa-btn-secondary { display: none; }
  .xa-topbar { padding: 0 var(--app-s5); }
  .xa-sidebar { display: none; }
  .xa-content { padding: var(--app-s5) var(--app-s5) 96px; gap: var(--app-s7); }
  .xa-board, .xa-tiles { grid-template-columns: 1fr; }
  .xa-btn { height: 44px; }
  .xa-input { height: 44px; font-size: 16px; }
  .xa-h1 { font-size: 20px; line-height: 26px; }
  .xa-display { font-size: 24px; line-height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .xa-btn, .xa-side-item, .xa-card-link { transition: none; } .xa-btn:active { transform: none; } }
.xa-switch { position: relative; width: 32px; height: 18px; flex: none; border-radius: 999px; background: var(--app-bg-4); border: 1px solid var(--app-line-input); }
.xa-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 999px; background: var(--app-text-2); transition: transform 100ms cubic-bezier(.2,0,0,1); }
.xa-switch.is-on { background: var(--app-accent); border-color: var(--app-accent); }
.xa-switch.is-on::after { transform: translateX(14px); background: var(--app-accent-fg); }
.xa-gate { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--app-s4); align-items: center; min-height: 40px; padding: 0 var(--app-s5); border-top: 1px solid var(--app-line-hair); font-size: 13px; }
.xa-gate:first-child { border-top: 0; }
.xa-gate b { font: 500 12px/1 var(--font-app-mono); color: var(--app-text-3); }
.xa-yes { color: var(--app-green); font-weight: 500; }
.xa-no { color: var(--app-red); font-weight: 500; }
.xa-unk { color: var(--app-text-3); font-weight: 500; }
.xa-mail { display: grid; gap: var(--app-s3); padding: var(--app-s4); background: var(--app-bg-0); border: 1px solid var(--app-line-hair); border-radius: var(--app-r-sm); font-size: 13px; line-height: 20px; }
.xa-mail p { margin: 0; color: var(--app-text-1); }
.xa-mock { width: 100%; max-width: 560px; background: var(--paper); color: var(--ink); border-radius: 4px; overflow: hidden; font-family: var(--font-body); box-shadow: 0 0 0 1px var(--line); }
.xa-mock-nav { display: flex; justify-content: space-between; padding: 10px 16px; font: 700 11px/1 var(--font-body); border-bottom: 1px solid var(--line); }
.xa-mock-hero { padding: 28px 16px 24px; display: grid; gap: 10px; }
.xa-mock-hero h4 { margin: 0; font: 800 26px/28px var(--font-display); letter-spacing: -.02em; }
.xa-mock-hero p { margin: 0; font-size: 11px; line-height: 16px; color: var(--ink-muted); }
.xa-mock-btn { justify-self: start; padding: 8px 12px; background: var(--ink); color: var(--paper); border-radius: 4px; font: 700 11px/1 var(--font-body); }
.xa-mock-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px 20px; }
.xa-mock-row span { height: 56px; background: var(--paper-sunk); border-radius: 4px; }
.xa-plugin-body { min-height: 0; overflow: auto; }
.xa-penpot-side { min-height: 0; }
.xa-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--app-s3); }
.xa-card-title .xa-h3 { min-width: 0; }
.xa-pagehead > .xa-row:last-child { flex: none; flex-wrap: nowrap; }
.xa-plugin-foot textarea.xa-input { min-height: 56px; }

/* States: focus, switch, loading, disabled, read-only (audit actions 1-3) */
.xa-crumbs a:focus-visible, .xa-blockhead a:focus-visible, .xa-pill:focus-visible, .xa-thread-row:focus-visible, .xa-tabbar a:focus-visible, .xa-brand:focus-visible, .xa-switch:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.xa-thread-row:focus-visible, .xa-tabbar a:focus-visible { outline-offset: -2px; }
.xa-pill { cursor: pointer; }
.xa-pill:hover { color: var(--app-text-1); border-color: var(--app-line-strong); }
button.xa-switch { padding: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
.xa-switch:disabled { opacity: .45; cursor: not-allowed; }
.xa-btn[aria-busy="true"] { pointer-events: none; }
.xa-btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: xa-spin .8s linear infinite; }
@keyframes xa-spin { to { transform: rotate(360deg); } }
.xa-input:disabled { background: var(--app-bg-1); color: var(--app-text-disabled); border-color: var(--app-line-hair); cursor: not-allowed; }
.xa-input:disabled:hover { border-color: var(--app-line-hair); }
.xa-input[readonly] { background: var(--app-bg-2); border-color: transparent; padding-left: 0; }
.xa-input[readonly]:hover { border-color: transparent; }
.xa-readonly { display: flex; align-items: center; gap: var(--app-s3); }
.xa-readonly .xa-input { flex: 1; }
/* Skeletons: never a blank panel while data loads */
.xa-skel { display: block; height: 12px; border-radius: var(--app-r-xs); background: var(--app-bg-3); animation: xa-pulse 1.2s ease-in-out infinite alternate; }
.xa-skel-lg { height: 16px; }
.xa-skel-block { height: 72px; border-radius: var(--app-r-md); }
@keyframes xa-pulse { from { opacity: .6; } to { opacity: 1; } }
.xa-table tr.is-loading td { background: var(--app-bg-2); }
.xa-proposal.is-proposing { border-style: dashed; }
.xa-proposal.is-proposing .xa-skel { margin-top: 2px; }
.xa-proposal.is-failed { border-color: var(--app-red-line); }
@media (prefers-reduced-motion: reduce) {
  .xa-skel { animation: none; opacity: 1; }
  .xa-btn[aria-busy="true"]::before { animation: none; border-right-color: currentColor; opacity: .6; }
}

/* Layout helpers (admin 4px scale) */
.xa-vstack { display: grid; }
.xa-gap-2 { gap: var(--app-s2); } .xa-gap-3 { gap: var(--app-s3); } .xa-gap-4 { gap: var(--app-s4); } .xa-gap-5 { gap: var(--app-s5); } .xa-gap-7 { gap: var(--app-s7); } .xa-gap-8 { gap: var(--app-s8); } .xa-gap-10 { gap: var(--app-s10); }
.xa-pad-3 { padding: var(--app-s3); } .xa-pad-5 { padding: var(--app-s5); } .xa-pad-7 { padding: var(--app-s7); } .xa-pad-8 { padding: var(--app-s8); }
.xa-mt-2 { margin-top: var(--app-s2); } .xa-mt-3 { margin-top: var(--app-s3); } .xa-mt-5 { margin-top: var(--app-s5); } .xa-mt-7 { margin-top: var(--app-s7); } .xa-mt-8 { margin-top: var(--app-s8); }

/* ===== Client portal (xa- lane, owner-facing) =====
   Source: wiki/design/cloud/client-portal-shell-spec.md + Carter's round-3 first-screen order (xorion-theme.md). */
.xa-portal { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.xa-portal .xa-sidebar { padding-top: var(--app-s5); }
.xa-portal-main { min-width: 0; display: flex; flex-direction: column; }
.xa-portal-top { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--app-s5); padding: 0 var(--app-gutter); border-bottom: 1px solid var(--app-line-hair); background: var(--app-bg-1); }
.xa-portal-content { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--app-s8) var(--app-s7) 96px; display: grid; gap: var(--app-s8); align-content: start; }
.xa-switcher { display: inline-flex; align-items: center; gap: var(--app-s3); height: 32px; padding: 0 var(--app-s4); border: 1px solid var(--app-line); border-radius: var(--app-r-sm); background: var(--app-bg-2); color: var(--app-text-1); font-weight: 500; }
.xa-switcher::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--app-text-2); border-bottom: 1.5px solid var(--app-text-2); transform: rotate(45deg) translateY(-2px); }
.xa-bell { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--app-r-sm); color: var(--app-text-2); border: 1px solid var(--app-line-hair); font: 600 12px/1 var(--font-app-body); }
.xa-bell b { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--app-accent); color: var(--app-accent-fg); font-size: 10px; display: grid; place-items: center; }

/* Status card: the one-glance answer to "what's happening and do I need to do anything" */
.xa-status-card { display: grid; gap: var(--app-s5); padding: var(--app-s7); background: var(--app-bg-2); border: 1px solid var(--app-line-hair); border-radius: var(--app-r-lg); }
.xa-status-card.is-blocked { box-shadow: inset 3px 0 0 var(--app-red); }
.xa-status-card.is-action { box-shadow: inset 3px 0 0 var(--app-amber); }
.xa-status-headline { margin: 0; font: 600 22px/28px var(--font-app-head); letter-spacing: -.015em; }
.xa-status-headline small { display: block; margin-bottom: 4px; font: 500 13px/18px var(--font-app-body); letter-spacing: 0; color: var(--app-text-2); }
.xa-status-card p { margin: 0; color: var(--app-text-2); max-width: 56ch; }
.xa-stepper { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: var(--app-s3); font: 500 13px/1 var(--font-app-body); color: var(--app-text-3); list-style: none; margin: 0; padding: 0; }
.xa-stepper li { display: inline-flex; align-items: center; gap: 6px; }
.xa-stepper li::before { content: ""; width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--app-line-strong); }
.xa-stepper li.is-done { color: var(--app-text-2); }
.xa-stepper li.is-done::before { background: var(--app-text-2); border-color: var(--app-text-2); }
.xa-stepper li.is-current { color: var(--app-text-1); font-weight: 600; }
.xa-stepper li.is-current::before { background: var(--app-accent); border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-bg-4); }
.xa-stepper .xa-step-line { height: 1px; background: var(--app-line); }

/* Checklist: everything we need from the owner, one row each */
.xa-checklist { display: grid; }
.xa-check { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--app-s4); align-items: center; min-height: 56px; padding: var(--app-s3) var(--app-s5); border-top: 1px solid var(--app-line-hair); }
.xa-check:first-child { border-top: 0; }
.xa-check-box { width: 20px; height: 20px; border-radius: var(--app-r-xs); border: 1.5px solid var(--app-line-input); display: grid; place-items: center; font: 700 12px/1 var(--font-app-body); }
.xa-check.is-done .xa-check-box { background: var(--app-green-tint); border-color: var(--app-green); color: var(--app-green); }
.xa-check.is-done .xa-check-box::before { content: "\2713"; }
.xa-check.is-done .xa-check-title { color: var(--app-text-2); }
.xa-check-title { font-weight: 500; }
.xa-check-sub { display: block; font-size: 13px; line-height: 18px; color: var(--app-text-3); }

/* Messages: list + thread */
.xa-inbox { display: grid; grid-template-columns: 300px 1fr; min-height: 640px; background: var(--app-bg-2); border: 1px solid var(--app-line-hair); border-radius: var(--app-r-md); overflow: hidden; }
.xa-threads { border-right: 1px solid var(--app-line-hair); display: grid; align-content: start; }
.xa-thread-row { display: grid; gap: 4px; padding: var(--app-s4) var(--app-s5); border-top: 1px solid var(--app-line-hair); text-decoration: none; color: inherit; }
.xa-thread-row:first-child { border-top: 0; }
.xa-thread-row.is-open { background: var(--app-bg-4); }
.xa-thread-row b { font-weight: 500; display: flex; justify-content: space-between; gap: 8px; }
.xa-thread-row span { font-size: 13px; line-height: 18px; color: var(--app-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xa-convo { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.xa-convo-head { display: flex; justify-content: space-between; align-items: center; padding: var(--app-s4) var(--app-s5); border-bottom: 1px solid var(--app-line-hair); }
.xa-convo-body { display: grid; gap: var(--app-s4); align-content: start; padding: var(--app-s5); }
.xa-day { text-align: center; font: 500 12px/16px var(--font-app-body); color: var(--app-text-3); }
.xa-msg { display: grid; gap: 4px; max-width: 72%; }
.xa-msg-body { padding: var(--app-s3) var(--app-s4); background: var(--app-bg-3); border: 1px solid var(--app-line-hair); border-radius: var(--app-r-md); font-size: 14px; line-height: 20px; }
.xa-msg.is-mine { justify-self: end; }
.xa-msg.is-mine .xa-msg-body { background: var(--app-bg-4); }
.xa-msg.is-mine .xa-meta { text-align: right; }
.xa-attach { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--app-s3); padding: 4px 8px; border: 1px solid var(--app-line); border-radius: var(--app-r-xs); font: 400 12px/16px var(--font-app-mono); color: var(--app-text-2); }
.xa-composer { display: grid; grid-template-columns: auto 1fr auto; gap: var(--app-s3); align-items: center; padding: var(--app-s4) var(--app-s5); border-top: 1px solid var(--app-line-hair); }

/* File type chip */
.xa-filetype { display: inline-grid; place-items: center; width: 36px; height: 24px; border-radius: var(--app-r-xs); background: var(--app-bg-4); color: var(--app-text-2); font: 600 10px/1 var(--font-app-mono); text-transform: uppercase; }

/* Sheet / dialog for owner actions */
.xa-sheet { display: grid; gap: var(--app-s5); width: 480px; padding: var(--app-s7); background: var(--app-bg-2); border: 1px solid var(--app-line); border-radius: var(--app-r-lg); box-shadow: var(--app-e3); }
.xa-sheet-grab { justify-self: center; width: 36px; height: 4px; border-radius: 999px; background: var(--app-line-strong); }

/* Mobile tab bar (portal: Home, Messages, Files, Design, Billing) */
.xa-tabbar { display: none; }
.xa-sign { min-height: 100vh; display: grid; place-items: center; padding: var(--app-s5); }
.xa-sign-card { width: 380px; display: grid; gap: var(--app-s4); padding: var(--app-s8); background: var(--app-bg-2); border: 1px solid var(--app-line-hair); border-radius: var(--app-r-lg); text-align: center; }
.xa-sign-card .xa-btn { width: 100%; height: 44px; }

@media (max-width: 639px) {
  .xa-portal { grid-template-columns: 1fr; }
  .xa-portal .xa-sidebar { display: none; }
  .xa-portal-top { padding: 0 var(--app-s5); }
  .xa-portal-content { padding: var(--app-s5) var(--app-s5) 104px; gap: var(--app-s7); }
  .xa-status-card { padding: var(--app-s5); }
  .xa-status-headline { font-size: 20px; line-height: 26px; }
  .xa-status-card .xa-row > .xa-btn { width: 100%; }
  .xa-inbox { grid-template-columns: 1fr; }
  .xa-threads { border-right: 0; }
  .xa-convo { display: none; }
  .xa-tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--app-bg-1); border-top: 1px solid var(--app-line-hair); }
  .xa-tabbar a { position: relative; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--app-text-2); font: 500 12px/16px var(--font-app-body); text-decoration: none; }
  .xa-tabbar a[aria-current="page"] { color: var(--app-text-1); font-weight: 600; }
  .xa-tabbar a[aria-current="page"]::after { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--app-accent); }
  .xa-tabbar a .xa-dot { position: absolute; top: 16px; right: calc(50% - 30px); width: 8px; height: 8px; border-radius: 999px; background: var(--app-accent); }
  .xa-sheet { width: 100%; border-radius: var(--app-r-lg) var(--app-r-lg) 0 0; }
}

/* Message delivery states */
.xa-msg.is-sending .xa-msg-body { opacity: .65; }
.xa-msg.is-failed .xa-msg-body { border-color: var(--app-red-line); }
.xa-msg-fail { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font-app-body); color: var(--app-red); }
.xa-msg-fail::before { content: ""; width: 8px; height: 8px; background: var(--app-red); }
.xa-msg-fail a { color: var(--app-text-1); text-decoration: underline; text-underline-offset: 3px; }
.xa-msg-fail a:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }

/* xo-vis: mock-ups that give a card its visual. Mock data only, never a real account. */
.xo-vcard { display: grid; gap: var(--space-4); align-content: start; }
.xo-vcard h3, .xo-vcard p { margin: 0; }
.xo-vis { min-height: 156px; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--paper-sunk); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; font: 500 12px/16px var(--font-body); color: var(--ink); }
.xo-vis-sm { min-height: 132px; }
.xo-vis-mid { justify-content: center; }
.xo-vis b { font-weight: 600; }
.xo-vis small { display: block; font-size: 11px; line-height: 14px; color: var(--ink-muted); }
.xo-vis-bar { display: flex; gap: 4px; flex: none; }
.xo-vis-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-control); }
.xo-vis-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 6px var(--space-2); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.xo-vis-row-blocked { border-left: 3px solid var(--blocked); }
.xo-vis-row-done { border-left: 3px solid var(--done); }
.xo-vis-line { height: 6px; flex: none; border-radius: var(--radius-pill); background: var(--line-control); }
.xo-vis-w40 { width: 40%; }
.xo-vis-w60 { width: 60%; }
.xo-vis-w80 { width: 80%; }
.xo-vis-photos { display: flex; gap: var(--space-2); flex: 1; }
.xo-vis-photo { flex: 1; min-height: 28px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, var(--line) 0 6px, var(--paper-raised) 6px 12px); }
.xo-vis-empty { background: transparent; border: 1.5px dashed var(--line-control); }
.xo-vis-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid currentColor; border-radius: var(--radius-pill); font: 600 11px/1 var(--font-body); white-space: nowrap; }
.xo-vis-chip-done { color: var(--done); }
.xo-vis-chip-blocked { color: var(--blocked); }
.xo-vis-chip-review { color: var(--signal); }
.xo-vis-chip-muted { color: var(--ink-muted); }
.xo-vis-btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; height: 22px; padding: 0 10px; background: var(--volt); color: var(--on-volt); border: 1.5px solid var(--on-volt); border-radius: var(--radius-sm); font: 700 11px/1 var(--font-body); white-space: nowrap; }
.xo-vis-btn-quiet { background: var(--paper-raised); color: var(--ink); border-color: var(--line-control); }
.xo-vis-actions { display: flex; gap: var(--space-2); }
.xo-vis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); flex: 1; }
.xo-vis-slot { display: grid; place-items: center; background: var(--paper-raised); border: 1px solid var(--line-control); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.xo-vis-slot-on { background: var(--volt); color: var(--on-volt); border-color: var(--on-volt); font-weight: 700; }
.xo-vis-tiles { display: flex; gap: var(--space-2); flex: 1; }
.xo-vis-tile { display: grid; place-items: center; flex: 1; padding: 0 2px; background: var(--paper-raised); border: 1.5px dashed var(--line-control); border-radius: var(--radius-sm); color: var(--ink-muted); font-weight: 600; font-size: 11px; text-align: center; }
.xo-vis-ring { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--done) 0 62%, var(--line) 0); }
.xo-vis-ring span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-sunk); font: 800 15px/1 var(--font-display); }
.xo-vis-split { display: flex; align-items: center; gap: var(--space-3); }
.xo-vis-money { font: 800 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.xo-vis-bars { display: flex; align-items: flex-end; gap: 4px; flex: 1; }
.xo-vis-bars i { flex: 1; background: var(--ink-muted); border-radius: 2px 2px 0 0; opacity: .5; }
.xo-vis-bars i:nth-child(1) { height: 30%; }
.xo-vis-bars i:nth-child(2) { height: 55%; }
.xo-vis-bars i:nth-child(3) { height: 40%; }
.xo-vis-bars i:nth-child(4) { height: 70%; }
.xo-vis-bars i:nth-child(5) { height: 50%; }
.xo-vgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); padding: var(--space-6); border-top: 1px solid var(--line); }
.xo-vitem { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.xo-vitem-wide { grid-column: 1 / -1; }
.xo-vitem-head { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.xo-vitem small { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.xo-checkout { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-8); align-items: start; }
.xo-checkout-main { display: grid; gap: var(--space-8); }
.xo-co-step { display: grid; gap: var(--space-4); }
.xo-co-step .xo-eyebrow { margin: 0; }
.xo-co-line { display: flex; justify-content: space-between; gap: var(--space-4); }
.xo-co-price { font: 700 16px/24px var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xo-checkout .xo-choice:has(input:checked) { box-shadow: none; }
.xo-summary { position: sticky; top: var(--space-6); }
.xo-summary-line { display: flex; justify-content: space-between; gap: var(--space-4); padding: 14px var(--space-6); border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.xo-summary-line small { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.xo-summary-line-off { color: var(--ink-muted); }
.xo-summary-foot { display: grid; gap: var(--space-3); padding: var(--space-6); border-top: 1px solid var(--line); }
.xo-summary-foot .xo-small { margin: 0; }
.xo-fieldset-reset { border: 0; padding: 0; margin: 0; min-width: 0; }
.xo-fieldset-reset legend { padding: 0 0 var(--space-4); }

/* xo-flow: process graph. xo-chart: bar charts with the value in text, never colour alone. */
.xo-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.xo-flow-node { position: relative; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); background: var(--paper-raised); color: var(--ink); border: 1.5px solid var(--line-control); border-radius: var(--radius-lg); }
.xo-flow-node p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.xo-flow-node:not(:last-child)::after { content: ""; position: absolute; top: 44px; left: 100%; width: var(--space-8); height: 2px; background: var(--ink); }
.xo-flow-node:not(:last-child)::before { content: ""; position: absolute; top: 39px; left: calc(100% + var(--space-8) - 8px); border: 6px solid transparent; border-left: 9px solid var(--ink); border-right: 0; }
.xo-flow-node-on { border: 2px solid var(--ink); box-shadow: var(--shadow-hard); }
.xo-flow-badge { width: 40px; height: 40px; display: grid; place-items: center; background: var(--paper-sunk); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-sm); font: 800 18px/1 var(--font-display); }
.xo-flow-node-on .xo-flow-badge { background: var(--volt); color: var(--on-volt); border-color: var(--on-volt); }
.xo-flow-alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); padding: var(--space-4) var(--space-6); border: 1.5px dashed var(--line-control); border-radius: var(--radius-lg); color: var(--ink-muted); }
.xo-flow-alt b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .xo-flow { grid-template-columns: 1fr; }
  .xo-flow-node:not(:last-child)::after { top: 100%; left: 44px; width: 2px; height: var(--space-8); }
  .xo-flow-node:not(:last-child)::before { top: calc(100% + var(--space-8) - 8px); left: 38px; border: 6px solid transparent; border-top: 9px solid var(--ink); border-bottom: 0; }
}
.xo-chart { display: grid; gap: var(--space-4); }
.xo-chart-row { display: grid; grid-template-columns: minmax(0, 220px) 1fr 72px; align-items: center; gap: var(--space-4); }
.xo-chart-row b { font-weight: 600; }
.xo-chart-row small { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.xo-chart-track { height: 16px; background: var(--paper-sunk); border: 1px solid var(--line-control); border-radius: var(--radius-pill); overflow: hidden; }
.xo-chart-fill { display: block; height: 100%; background: var(--ink); border-radius: var(--radius-pill); }
.xo-chart-fill-good { background: var(--done); }
.xo-chart-fill-weak { background: var(--signal); }
.xo-chart-fill-failing { background: var(--blocked); }
.xo-chart-val { text-align: right; font: 700 15px/20px var(--font-body); font-variant-numeric: tabular-nums; }
.xo-chart-val small { display: inline; font: 600 13px/20px var(--font-body); }
.xo-chart-stack { display: flex; height: 36px; border: 2px solid var(--ink); border-radius: var(--radius-md); overflow: hidden; background: var(--paper-raised); }
.xo-chart-seg { display: grid; place-items: center; min-width: 0; border-left: 2px solid var(--ink); font: 700 13px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.xo-chart-seg:first-child { border-left: 0; }
.xo-chart-seg:nth-child(odd) { background: var(--volt-soft); }
.xo-chart-panel { padding: var(--space-6); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; gap: var(--space-4); align-content: start; }
.xo-chart-panel h3 { margin: 0; }
.xo-chart-note { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.xo-chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.xo-chart-grid .xo-chart-row { grid-template-columns: minmax(0, 130px) 1fr 104px; }
.xo-chart-val small { white-space: nowrap; }
.xo-band-split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-12); align-items: center; }
.xo-band .xo-vis { color: var(--ink); }
@media (max-width: 900px) { .xo-chart-grid, .xo-band-split { grid-template-columns: 1fr; } .xo-chart-row { grid-template-columns: 1fr 72px; } .xo-chart-row .xo-chart-track { grid-column: 1 / -1; order: 3; } }
.xo-field-label { font: 600 15px/20px var(--font-body); color: var(--ink); }

/* xo-incog: faceless hat-and-glasses figure for "customers can't see you". xo-trust: proof strip under the hero. */
.xo-incog { margin: 0; display: grid; gap: var(--space-2); justify-items: center; text-align: center; }
.xo-incog svg { width: 168px; height: 168px; }
.xo-incog figcaption { font: 600 13px/18px var(--font-body); color: var(--ink-muted); max-width: 168px; }
.xo-incog-disk { fill: var(--volt); }
.xo-incog-ink { fill: var(--ink); }
.xo-incog-paper { fill: var(--paper); }
.xo-incog-line { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.xo-head-split { display: grid; grid-template-columns: 1fr auto; gap: var(--space-12); align-items: center; margin-bottom: var(--space-12); }
.xo-head-split .xo-section-head { margin-bottom: 0; }
.xo-trust { padding: var(--space-6) 0; border-block: 1px solid var(--line); background: var(--paper-raised); }
.xo-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.xo-trust-grid li { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: start; font: 600 15px/22px var(--font-body); color: var(--ink); }
.xo-trust-grid small { display: block; font: 400 14px/20px var(--font-body); color: var(--ink-muted); }
.xo-vcard-fix { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.xo-vcard-fix::before { content: "\2713"; font-weight: 800; }
.xo-cta-center { display: flex; justify-content: center; margin-top: var(--space-12); }
@media (max-width: 900px) { .xo-head-split { grid-template-columns: 1fr; } .xo-trust-grid { grid-template-columns: 1fr 1fr; } }
.xo-card .xo-vcard-fix { color: var(--ink); }

/* xo-builder: pick the items you want; the plan that covers them sets the price. */
.xo-builder { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-8); align-items: start; }
.xo-builder-main { display: grid; gap: var(--space-8); }
.xo-picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.xo-builder .xo-choice:has(input:checked) { box-shadow: none; }
.xo-builder .xo-choice { padding: var(--space-4); }
.xo-builder-group { display: grid; gap: var(--space-4); }
.xo-builder-group h3 { margin: 0; }
@media (max-width: 900px) { .xo-builder, .xo-checkout, .xo-picks { grid-template-columns: minmax(0, 1fr); } .xo-summary { position: static; } }

/* xo-more: a dropdown under a line item (description plus a mock-up). xo-lookfor: what a check looks for. xo-bands: where a score sits. */
.xo-pick { display: grid; gap: var(--space-2); align-content: start; }
.xo-more { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); }
.xo-more summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); list-style: none; cursor: pointer; font: 600 14px/20px var(--font-body); color: var(--ink); }
.xo-more summary::-webkit-details-marker { display: none; }
.xo-more summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--ink); border-radius: var(--radius-sm); font: 700 14px/1 var(--font-body); }
.xo-more[open] summary::after { content: "\2013"; background: var(--volt); color: var(--on-volt); border-color: var(--on-volt); }
.xo-more summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.xo-more-body { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.xo-more-body p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.xo-checkrow-more { grid-column: 1 / -1; }
.xo-lookfor { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin: 0; padding: var(--space-2) var(--space-4) var(--space-4); }
.xo-lookfor dt { font: 700 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.xo-lookfor dd { margin: var(--space-1) 0 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.xo-bands { display: grid; gap: var(--space-2); width: 100%; text-align: left; }
.xo-bands-bar { position: relative; display: flex; height: 14px; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); overflow: hidden; background: linear-gradient(90deg, var(--scale-red) 0%, var(--scale-orange) 50%, var(--scale-yellow) 70%, var(--scale-green) 100%); }
.xo-bands-bar span { display: block; border-left: 1.5px solid var(--ink); }
.xo-bands-bar span:first-child { border-left: 0; }
.xo-bands-perfect .xo-bands-bar { background: var(--scale-blue); }
.xo-bands-pin { position: relative; height: 18px; }
.xo-bands-pin i { position: absolute; top: 0; width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-bottom: 10px solid var(--ink); border-top: 0; }
.xo-bands-labels { display: flex; font: 600 12px/16px var(--font-body); color: var(--ink-muted); }
.xo-bands-labels span { text-align: center; padding: 0 2px; }
.xo-bands-labels .is-here { color: var(--ink); font-weight: 800; }
.xo-score-facts { width: 100%; display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); text-align: left; }
.xo-score-facts div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 14px; line-height: 20px; }
.xo-score-facts dt { color: var(--ink-muted); }
.xo-score-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .xo-lookfor { grid-template-columns: 1fr; } }
/* xo-pick: the option and its dropdown share one card. */
.xo-picks { align-items: start; }
.xo-pick { gap: 0; background: var(--paper-raised); border: 1.5px solid var(--line-control); border-radius: var(--radius-lg); overflow: hidden; }
.xo-pick:hover { border-color: var(--ink); }
.xo-pick:has(input:checked) { border: 2px solid var(--ink); }
.xo-builder .xo-pick .xo-choice, .xo-builder .xo-pick .xo-choice:has(input:checked) { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.xo-pick .xo-more { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }

/* images on every Pricing card */
.xo-pick > .xo-vis { min-height: 120px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.xo-pricecard > .xo-vis { min-height: 140px; }
.xo-quote-row > .xo-vis { flex: none; width: 240px; min-height: 120px; }
.xo-more-plan { font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .xo-quote-row > .xo-vis { width: 100%; } }
.xo-quote-row:has(> .xo-vis) { grid-template-columns: 240px 1fr auto; }
@media (max-width: 960px) { .xo-quote-row:has(> .xo-vis) { grid-template-columns: 1fr; } }

/* xo-quote: a client's words. Placeholders are dashed and tagged until a real quote and a yes arrive. */
.xo-quote { display: grid; gap: var(--space-6); align-content: start; padding: var(--space-8); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.xo-quote-slot { border: 1.5px dashed var(--line-control); }
.xo-quote blockquote { margin: 0; font: 700 22px/30px var(--font-display); letter-spacing: -.01em; text-wrap: pretty; }
.xo-quote-feature blockquote { font-size: 32px; line-height: 40px; }
.xo-quote-by { display: flex; align-items: center; gap: var(--space-3); font: 600 15px/20px var(--font-body); }
.xo-quote-by small { display: block; font: 400 14px/20px var(--font-body); color: var(--ink-muted); }
.xo-quote-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--paper-sunk); border: 1.5px dashed var(--line-control); }
.xo-sample { display: inline-flex; align-self: start; height: 22px; align-items: center; padding: 0 8px; border: 1px dashed var(--ink-muted); border-radius: var(--radius-pill); font: 600 12px/1 var(--font-body); color: var(--ink-muted); }
.xo-work { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-4); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.xo-work h3, .xo-work p { margin: 0; }
.xo-work p { color: var(--ink-muted); }
.xo-work-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.xo-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .xo-quotes { grid-template-columns: 1fr; } .xo-quote-feature blockquote { font-size: 24px; line-height: 32px; } }

/* small screens: the header button wraps, Log in steps aside; wide tables scroll inside their own box */
@media (max-width: 640px) {
  .xo-header-actions .xo-btn-quiet { display: none; }
  .xo-header .xo-btn-sm { height: auto; min-height: 36px; padding-block: 6px; max-width: 190px; white-space: normal; text-align: center; line-height: 16px; }
  .xo-header .xo-container { gap: var(--space-3); }
}
.xo-table-scroll { position: relative; overflow-x: auto; max-width: 100%; }
.xo-hero-grid-form { grid-template-columns: 6fr 5fr; }
@media (max-width: 900px) { .xo-hero-grid-form { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .xo-summary-foot .xo-btn, .xo-formcard .xo-btn, .xo-cta-row .xo-btn-lg { white-space: normal; text-align: center; height: auto; min-height: 48px; padding-block: var(--space-3); line-height: 22px; } .xo-stack-total { flex-wrap: wrap; } }
.xo-quote { margin: 0; }
.xo-pick-price { display: block; margin-top: var(--space-2); font: 400 14px/20px var(--font-body); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.xo-pick-price b { font-weight: 700; color: var(--ink); }
.xo-summary-save { background: var(--paper-sunk); color: var(--ink-muted); }
.xo-summary-save s { text-decoration-thickness: 1.5px; }
.xo-section-head .xo-sample { margin-top: var(--space-4); }

/* xo-journey: the six moments a customer goes through (welcome pages). xo-scale and xo-dots: a score against the industry and the best (reports). */
.xo-journey { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.xo-journey::before { content: ""; position: absolute; top: 19px; left: 20px; right: calc((100% - 80px) / 6 - 20px); border-top: 2px dashed var(--line-control); }
.xo-journey::after { content: ""; position: absolute; top: 18px; left: 20px; width: calc(2 * ((100% - 80px) / 6 + 16px)); height: 3px; background: var(--ink); }
.xo-journey-stop { position: relative; z-index: 1; display: grid; gap: var(--space-3); align-content: start; }
.xo-journey-dot { width: 40px; height: 40px; display: grid; place-items: center; background: var(--volt); color: var(--on-volt); border: 2px solid var(--on-volt); border-radius: 50%; font: 800 16px/1 var(--font-display); }
.xo-journey-stop-off .xo-journey-dot { background: var(--paper); color: var(--ink-muted); border: 2px dashed var(--line-control); }
.xo-journey-stop h3 { margin: 0; }
.xo-journey-q { margin: 0; font-weight: 600; color: var(--ink); }
.xo-journey-stop ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.xo-journey-stop li::before { content: "\2713\00a0"; font-weight: 800; color: var(--ink); }
.xo-journey-stop-off p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 960px) { .xo-journey { grid-template-columns: minmax(0, 1fr); } .xo-journey::before, .xo-journey::after { display: none; } .xo-journey-stop { grid-template-columns: 40px 1fr; column-gap: var(--space-4); } .xo-journey-stop > .xo-journey-dot { grid-row: 1 / span 4; } }
.xo-scale { position: relative; height: 124px; margin: 0 var(--space-4); }
.xo-scale-bar { position: absolute; left: 0; right: 0; top: 52px; height: 18px; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--scale-red) 0%, var(--scale-orange) 50%, var(--scale-yellow) 70%, var(--scale-green) 100%); }
.xo-scale-mark { position: absolute; transform: translateX(-50%); display: grid; justify-items: center; text-align: center; font: 700 14px/18px var(--font-body); white-space: nowrap; }
.xo-scale-mark small { display: block; font: 600 12px/16px var(--font-body); color: var(--ink-muted); }
.xo-scale-mark i { display: block; width: 3px; height: 14px; background: var(--ink); }
.xo-scale-up { bottom: calc(100% - 52px); }
.xo-scale-down { top: 70px; }
.xo-scale-you { font-size: 18px; line-height: 22px; }
.xo-scale-ends { position: absolute; left: 0; right: 0; top: 74px; display: flex; justify-content: space-between; font: 600 12px/16px var(--font-body); color: var(--ink-muted); }
.xo-scale-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font: 600 13px/18px var(--font-body); color: var(--ink-muted); }
.xo-dots { display: grid; gap: var(--space-4); }
.xo-dots-row { display: grid; grid-template-columns: minmax(0, 170px) 1fr minmax(0, 190px); align-items: center; gap: var(--space-4); }
.xo-dots-row b { font-weight: 600; }
.xo-dots-track { position: relative; height: 20px; margin: 0 8px; }
.xo-dots-track::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--line-control); }
.xo-dots-dot { position: absolute; top: 1px; width: 18px; height: 18px; margin-left: -9px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.xo-dots-top { background: var(--volt); z-index: 1; }
.xo-dots-you { background: var(--ink); z-index: 2; }
.xo-dots-val { font: 600 13px/18px var(--font-body); color: var(--ink-muted); font-variant-numeric: tabular-nums; text-align: right; }
.xo-dots-val b { color: var(--ink); }
.xo-dots-key { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 2px solid var(--ink); border-radius: 50%; vertical-align: -2px; background: var(--paper); }
.xo-dots-key.is-you { background: var(--ink); }
.xo-dots-key.is-top { background: var(--volt); }
.xo-compare-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.xo-compare-tile { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-6); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.xo-compare-tile b { font: 900 32px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.xo-compare-tile span { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
@media (max-width: 900px) { .xo-compare-tiles { grid-template-columns: minmax(0, 1fr); } .xo-dots-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .xo-dots-val { text-align: left; } .xo-scale-mark { font-size: 12px; } }