/*
  OpFix design system (ui.css).
  Loaded after each page's own styles, so it wins at equal specificity.

  Faces and colors come from the brand kit (opfix_brand_kit, OFX-0.5):
    Inter for body and interface text. DM Sans for headlines, the wordmark and
    display numbers. No other face on a screen.
    Blue is the action color: primary buttons, links, focus, active states and
    accents (#2563EB under white button text, where #3B82F6 is under AA).
    Doctrine red #C81E2D means bad, and only that: severity, scores in trouble,
    warnings, errors and the one problem phrase in the hero headline.
    #0A0A0A and #1A1A1A for dark sections, #F8F9FA and #F1F5F9 for light fills,
    #E2E8F0 for rules, #64748B for muted text (#94A3B8 on dark).
  The look follows the Command app and Apple's iPhone 18 Pro page: a floating
  glass nav, semibold display type, gray copy with the key phrase in full
  color, 28px panels, pill buttons and outline pill secondary buttons.

  Surfaces: light is the default. Dark sections and dark pages flip the same
  variables, so a component reads its colors from wherever it sits:
    body.t-dark            a page whose canvas is dark
    .nav, .hero, ...       the dark sections of a light page (list below)
    .t-light               a light panel inside a dark section
*/

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root{
  --font-display:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --nav-h:64px;
  --r-xs:4px;--r-sm:6px;--r:10px;--r-lg:14px;
  --container:1200px;

  /* The brand kit's palette */
  --brand-blue:#3B82F6;--blue-dark:#2563EB;--brand-red:#C81E2D;
  --kit-black:#0A0A0A;--kit-ink:#1A1A1A;--kit-page:#F8F9FA;--kit-fill:#F1F5F9;--kit-rule:#E2E8F0;
  --kit-muted:#64748B;--kit-green:#10B981;--kit-amber:#F59E0B;--kit-orange:#F97316;
  --muted-on-dark:#94A3B8;

  /* Light surface (default) */
  --bg:#FFFFFF;--bg-2:#F8F9FA;--panel:#FFFFFF;--panel-2:#F8F9FA;
  --fg:#1A1A1A;--fg-2:#64748B;--fg-3:#64748B;
  --line:#E2E8F0;--line-2:rgba(26,26,26,.16);
  --link:#2563EB;--signal:#C81E2D;--ok:#10B981;--warn:#F59E0B;
  --btn-bg:#0A0A0A;--btn-fg:#FFFFFF;--btn-hover:#1A1A1A;
  --ghost-fg:#1A1A1A;--ghost-line:rgba(26,26,26,.2);--ghost-hover:#F1F5F9;

  /* The face variables the pages already use */
  --font:var(--font-body);--sans:var(--font-body);--font-sans:var(--font-body);
  /* The pages' pale section and panel fill, on the brand kit's page color so
     muted text on it clears AA (#64748B is 4.34:1 on #F1F5F9, 4.55:1 here). */
  --off-white:#F8F9FA;
}

/* Dark surfaces: dark pages, and the dark sections of light pages. */
body.t-dark,
.nav,.mobile-nav,.footer,.site-footer,.ofx-footer,.xr-bar,.ofx-loading,
.hero,.page-hero,.sec-dark,.anti,.ba,.proof,.final-cta,.legal-hero,.art-hero,
div.cta,.cta-band,.rule-card,.contact-block,.xray-bridge,
.t-dark{
  --bg:#0A0A0A;--bg-2:#1A1A1A;--panel:rgba(255,255,255,.03);--panel-2:rgba(255,255,255,.05);
  --fg:#FFFFFF;--fg-2:#94A3B8;--fg-3:#94A3B8;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);
  --link:#3B82F6;--signal:#C81E2D;--ok:#10B981;--warn:#F59E0B;
  --btn-bg:#FFFFFF;--btn-fg:#0A0A0A;--btn-hover:#E2E8F0;
  --ghost-fg:#FFFFFF;--ghost-line:rgba(255,255,255,.22);--ghost-hover:rgba(255,255,255,.06);
  --gray-300:#94A3B8;--gray-400:#94A3B8;--gray-500:#94A3B8;--muted:#94A3B8;
}
/* A light panel inside a dark section reads as light again. */
/* ...and so do the white panels the dark pages already use: the X-Ray request
   and contact cards, the X-Ray form body, the report card in a dark hero. */
.t-light,body.t-dark .card,body.t-dark .exit-modal,body.t-dark .path-b,body.t-dark .form-body,body.t-dark .toast,
body.t-dark .done .next,.hero .report,.path-b{
  --bg:#FFFFFF;--bg-2:#F8F9FA;--panel:#FFFFFF;--panel-2:#F8F9FA;
  --fg:#1A1A1A;--fg-2:#64748B;--fg-3:#64748B;
  --line:#E2E8F0;--line-2:rgba(26,26,26,.16);
  --link:#2563EB;--signal:#C81E2D;--ok:#10B981;--warn:#F59E0B;
  --btn-bg:#0A0A0A;--btn-fg:#FFFFFF;--btn-hover:#1A1A1A;
  --ghost-fg:#1A1A1A;--ghost-line:rgba(26,26,26,.2);--ghost-hover:#F1F5F9;
  --gray-300:#64748B;--gray-400:#64748B;--gray-500:#64748B;--muted:#64748B;
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{font-family:var(--font-body)!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.006em;font-optical-sizing:auto}
body.t-dark{background:var(--kit-black)!important;color:var(--fg)}
body,p,li,a,button,input,select,textarea,label,td,th,dt,dd,blockquote,figcaption{font-family:var(--font-body)}
::selection{background:rgba(59,130,246,.25)}

/* Headlines and the wordmark: DM Sans. */
h1,h2,h3,h4,h5,h6,.book-title,.body-heading,.author-name,.final-cta-heading,.preview-archetype-name{font-family:var(--font-display)!important;text-wrap:balance}
h1{font-weight:700!important;letter-spacing:-.032em!important;line-height:1.05!important}
h2{font-weight:700!important;letter-spacing:-.026em!important;line-height:1.1!important}
h3{font-weight:700!important;letter-spacing:-.016em!important;line-height:1.2}
h4{letter-spacing:-.01em!important}
p{text-wrap:pretty}

/* The hero's problem phrase ("stuck on you?") is red because it names the
   problem. Other emphasized phrases are blue on dark, ink and italic on light. */
h1 span,h1 .accent,h2 .accent,h2 span:not([class]),.final-cta-heading .accent{
  color:inherit!important;font-style:normal!important;background:none!important;-webkit-text-fill-color:currentColor
}
h1 em{color:var(--signal)!important;font-style:normal!important;-webkit-text-fill-color:currentColor}
h2 em{color:inherit!important;font-style:italic!important;-webkit-text-fill-color:currentColor}
.anti h2 em,.sec-dark h2 em,.final-cta h2 em{color:var(--brand-blue)!important;font-style:normal!important}

/* Display numbers: DM Sans, tabular, tight. */
.preview-fdi-num,.ba-score,.xr-score,.sp-fdi-num,.sp-fdi-of,.diag-score,.num,.p-card-score,.sub-score,.rep-score,.rep-score b,
.sticky-pillar-val,.sticky-total-val,.hero-stat b,.stat-card .num,.founder-stat .num{
  font-family:var(--font-display)!important;font-variant-numeric:tabular-nums;font-weight:700!important;letter-spacing:-.03em!important
}

/* Links in running text */
.post-body a:not([class]),.legal-section a:not([class]),.profile a.inline,.body-text a:not([class]){color:var(--link)!important;text-underline-offset:3px;text-decoration-thickness:1px}

/* ── 3. Labels: small, sentence case, quiet ────────────────────────────── */
.section-tag,.tag,.eyebrow,.hero-tag,.legal-tag,.art-eyebrow,.book-eyebrow,.author-eyebrow,.page-hero .section-tag,
.post-pillar,.kc-pillar,.art-card-pillar,.featured-pillar,.featured-label,.grid-label,.keep-reading-label,
.pillar-badge,.path-tag,.rr-tag,.section-badge,.xr-kicker,.rep-kicker,.kicker,.body-label,.legal-toc-label,
.diag-step-label,.sp-verdict-eyebrow,.sp-next-label,.sp-fdi-label,.preview-eyebrow,.preview-section-label,
.preview-fdi-label,.preview-archetype-label,.preview-footer-label,.preview-footer-meta,.ba-label,.xr-preview-label,
.xr-findings-label,.pillar-score,.phase-timing,.score-col-label,.rep-label,.sub-label,.notes-label,.guards-label,
.consent-block-label,.post-meta,.art-card-meta,.featured-meta,.legal-meta-item,.diag-microcopy,.hero-qualifier{
  font-family:var(--font-body)!important;font-size:12px!important;font-weight:500!important;line-height:1.5;
  letter-spacing:0!important;text-transform:none!important;font-style:normal!important
}
.section-tag,.tag,.eyebrow,.hero-tag,.legal-tag,.art-eyebrow,.book-eyebrow,.author-eyebrow,.page-hero .section-tag{
  display:inline-flex!important;align-items:center;gap:10px;color:var(--fg-3)!important;
  background:none!important;border:0!important;padding:0!important;border-radius:0!important;margin-bottom:20px
}
.section-tag::before,.tag::before,.eyebrow::before,.hero-tag::before,.legal-tag::before,.art-eyebrow::before,
.book-eyebrow::before,.author-eyebrow::before{
  content:'';display:block;width:7px;height:7px;border-radius:1px;background:var(--signal);flex:none
}
.hero-tag .dot,.legal-tag .dot{display:none!important}
.pillar-badge,.path-tag,.rr-tag,.section-badge,.post-pillar,.kc-pillar,.art-card-pillar,.featured-pillar{
  border-radius:var(--r-xs)!important
}
.hero-qualifier,.diag-microcopy,.post-meta,.art-card-meta,.featured-meta{color:var(--fg-3)!important}

/* ── 4. Buttons ────────────────────────────────────────────────────────── */
.btn-primary,.nav-cta,.mob-cta,.post-cta-btn,.mid-cta-btn,.book-cta-primary,.final-cta-button,.xray-bridge-btn,
.exit-primary,.submit,.sp-next-btn,.diag-btn-next,.xr-bar a,.bridge-cta,.framework-badge,.profile a.cta{
  font-family:var(--font-body)!important;font-weight:600!important;letter-spacing:-.006em!important;
  background:var(--brand-red)!important;color:#FFFFFF!important;border:1px solid var(--brand-red)!important;
  border-radius:var(--r-sm)!important;box-shadow:none!important;transform:none!important;text-decoration:none!important;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)!important
}
.btn-primary,.post-cta-btn,.mid-cta-btn,.book-cta-primary,.final-cta-button,.xray-bridge-btn,.sp-next-btn,.bridge-cta,.framework-badge,.profile a.cta{
  padding:14px 22px!important;font-size:15px!important;min-height:48px
}
.btn-primary:hover,.nav-cta:hover,.mob-cta:hover,.post-cta-btn:hover,.mid-cta-btn:hover,.book-cta-primary:hover,
.final-cta-button:hover,.xray-bridge-btn:hover,.exit-primary:hover,.submit:hover,.sp-next-btn:hover,.diag-btn-next:hover,
.xr-bar a:hover,.bridge-cta:hover,.framework-badge:hover,.profile a.cta:hover,
.final-cta-button:not([href^="/xray"]):hover{background:#B01A27!important;border-color:#B01A27!important;color:#FFFFFF!important;outline:0}
.btn-primary:active,.nav-cta:active,.post-cta-btn:active,.submit:active,.diag-btn-next:active{transform:translateY(1px)!important}
.diag-btn-next:disabled,.submit:disabled{opacity:.45;cursor:not-allowed}

.btn-secondary,.btn-ghost,.xray-bridge-ghost,.diag-btn-back,.nav-cta.nav-ghost,.sp-next-soft{
  font-family:var(--font-body)!important;font-weight:600!important;letter-spacing:-.006em!important;
  background:transparent!important;color:var(--ghost-fg)!important;border:1px solid var(--ghost-line)!important;
  border-radius:var(--r-sm)!important;box-shadow:none!important;transform:none!important;text-decoration:none!important;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.25;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)!important
}
.btn-secondary,.btn-ghost,.xray-bridge-ghost{padding:14px 20px!important;font-size:15px!important;min-height:48px}
.btn-secondary:hover,.btn-ghost:hover,.xray-bridge-ghost:hover,.diag-btn-back:hover,.nav-cta.nav-ghost:hover,.sp-next-soft:hover{
  background:var(--ghost-hover)!important;border-color:var(--fg-3)!important;color:var(--ghost-fg)!important
}
.btn-ghost.on-light{--ghost-fg:#1A1A1A;--ghost-line:rgba(26,26,26,.2);--ghost-hover:#F1F5F9}
.sp-next-soft{padding:10px 14px!important}
.cta-stack{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){.cta-stack{flex-direction:column;align-items:stretch}.cta-stack>*{width:100%;text-align:center}}

/* ── 5. Navigation ─────────────────────────────────────────────────────── */
.nav{
  height:var(--nav-h)!important;padding:0 max(24px,calc((100vw - var(--container))/2))!important;
  background:rgba(10,10,10,.94)!important;-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--line)!important;box-shadow:none!important
}
.nav-logo{display:flex;align-items:center}
.nav-logo img,.nav-logo-img{height:30px!important;width:auto}
.nav-links{gap:28px!important;align-items:center}
.nav-links a{font-size:14px!important;font-weight:500!important;letter-spacing:-.005em!important;color:var(--fg-2)!important;transition:color .2s var(--ease)}
.nav-links a:not(.nav-cta):hover,.nav-back:hover{color:var(--fg)!important}
.nav-links a.nav-cta,.nav .nav-cta{font-size:14px!important;padding:0 16px!important;height:38px;min-height:0;color:#FFFFFF!important}
.nav-back{font-size:14px!important;color:var(--fg-2)!important}
.hamburger span{width:20px!important;height:1.5px!important;border-radius:2px;margin:5px 0;background:var(--fg)!important}

.mobile-nav{
  background:rgba(10,10,10,.96)!important;-webkit-backdrop-filter:saturate(160%) blur(24px);backdrop-filter:saturate(160%) blur(24px);
  align-items:stretch!important;justify-content:flex-start!important;gap:0!important;padding:88px 28px 40px!important
}
.mobile-nav a{font-size:22px!important;font-weight:600!important;letter-spacing:-.015em;color:var(--fg)!important;padding:14px 0;border-bottom:1px solid var(--line)}
.mobile-nav a:not(.mob-cta):hover{color:var(--link)!important}
.mobile-nav .mob-cta{margin-top:32px!important;border-bottom:1px solid var(--brand-red)!important;color:#FFFFFF!important;font-size:16px!important;padding:15px 24px!important;letter-spacing:-.006em}
.mobile-nav-close{top:14px!important;right:16px!important;font-size:24px!important;font-weight:300;color:var(--fg-2)!important;padding:4px 8px}

/* ── 6. Fields ─────────────────────────────────────────────────────────── */
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input:not([type]),
select,textarea,.field-input,.field-select,.field-textarea,.ctx-input,.notes-textarea{
  font-family:var(--font-body)!important;border-radius:var(--r-sm)!important;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)!important
}
input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,input[type="number"]:focus,
input:not([type]):focus,select:focus,textarea:focus,.field-input:focus,.ctx-input:focus,.notes-textarea:focus{
  outline:none!important;border-color:var(--brand-blue)!important;box-shadow:0 0 0 3px rgba(59,130,246,.22)!important
}
.ctx-input.error,.field-input.error,input.error,select.error{border-color:var(--signal)!important}
input[type="checkbox"],input[type="radio"]{accent-color:var(--brand-blue)}
.diag-opt,.score-btn,.sms-consent,.consent,.sev-ref,.formerr,.toast{border-radius:var(--r-sm)!important}
.diag-opt{transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)!important}

/* ── 7. Surfaces: flat, hairline, 10px ─────────────────────────────────── */
.hero-preview,.anti-col,.pillar-card,.ba-card,.beyond,.diagnostic-box,.report,.path,.card,.featured-card,.art-card,
.form-section,.submit-section,.success-wrap,.exit-modal,.xr-card{border-radius:var(--r)!important;box-shadow:none!important}
.pain-card,.keep-card,.factor-card,.stat-card,.outcome-card,.rule-card,.test-card,.p-card,.fact,.step,.legal-toc,
.contact-block,.author-card,.system-layers,.deliverables-box,.founder-stat,.risk,.live-fill,.opportunity-bar,.guard,
#calendar-embed,.done .next{border-radius:var(--r)!important;box-shadow:none!important}
.pain-card:hover,.pillar-card:hover,.keep-card:hover,.art-card:hover,.featured-card:hover{transform:none!important;box-shadow:none!important}
.pain-card::before{display:none!important}
.hero::before,.hero::after,.anti::before,.art-hero::before,.hero-preview::before,.final-cta::before,.diagnostic-box::before{display:none!important}
.deliverables-toggle{border:0!important;border-radius:0!important;background:transparent!important}

/* Hover language: interactive cells get a blue hairline, reading blocks a faint tint. */
.pain-card,.pillar-card,.fact,.step,.outcome-card,.art-card,.featured-card,.keep-card,.diag-opt{
  transition:border-color .2s var(--ease),background-color .2s var(--ease)!important
}
.art-card:hover,.featured-card:hover,.diag-opt:hover{border-color:var(--brand-blue)!important}
.system-layer,.layer-section,.factor-card,.rule-card,.path{transition:background-color .2s var(--ease)!important}

/* Dark heroes: flat black with a hairline under them. */
.page-hero,.legal-hero,.art-hero{
  background:var(--kit-black)!important;border-bottom:1px solid var(--line)
}
.page-hero h1,.legal-hero h1,.art-hero h1{color:var(--fg)!important}
.page-hero p,.legal-hero p,.art-hero p,.art-hero-sub{color:var(--fg-2)!important}

/* Sections: generous, consistent air. */
.pain,.anti,.pillars,.how,.diagnostic,.founder,.ba{padding-top:128px!important;padding-bottom:128px!important}
.final-cta{padding-top:140px!important;padding-bottom:140px!important}
.post{padding-top:128px!important}
.page-hero,.legal-hero{padding-top:148px!important}
.art-hero{padding-top:148px!important}
.filter-bar{top:var(--nav-h)!important;background:rgba(10,10,10,.85)!important;-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid var(--line)}
.filter-chip{border-radius:var(--r-sm)!important;font-family:var(--font-body)!important;font-size:12px!important;font-weight:500!important;letter-spacing:0!important}
.filter-chip.active{background:var(--fg)!important;color:var(--bg)!important;border-color:var(--fg)!important}
.score-sticky{top:var(--nav-h)!important}

/* ── 8. Mobile X-Ray bar ───────────────────────────────────────────────── */
.xr-bar{background:rgba(10,10,10,.94)!important;-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);border-top:1px solid var(--line)!important}
.xr-bar a{padding:13px 16px!important;font-size:16px!important;display:flex!important;width:100%}
.xr-bar small{color:var(--fg-3)!important;font-family:var(--font-body)!important;font-size:12px!important}

/* ── 9. Footers ────────────────────────────────────────────────────────── */
.site-footer,.footer{background:var(--kit-black)!important;border-top:1px solid var(--line)!important}
.site-footer-links a,.footer-links a,.footer-right a{font-size:13px!important;color:var(--fg-2)!important;transition:color .2s var(--ease)}
.site-footer-links a:hover,.footer-links a:hover,.footer-right a:hover,footer a:hover{color:var(--fg)!important}
.site-footer-left,.footer-left{font-size:13px!important;color:var(--fg-3)!important}
.footer-tagline{font-family:var(--font-body)!important;font-size:13px!important;color:var(--fg-3)!important}
.footer-logo-img{height:30px!important;width:auto}

/* The full footer (.ofx-footer): link columns, partners, disclosures. */
.ofx-footer{background:var(--kit-black);color:var(--fg-2);border-top:1px solid var(--line);padding:72px max(24px,calc((100vw - var(--container))/2)) 40px}
.ofx-footer a{color:var(--fg-2);text-decoration:none;transition:color .2s var(--ease)}
.ofx-footer a:hover{color:var(--fg)}
.ofx-footer-top{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line)}
.ofx-footer-brand img{height:30px;width:auto;display:block;margin-bottom:16px}
.ofx-footer-brand p{font-size:13px;color:var(--fg-3);margin:0;max-width:260px;line-height:1.6}
.ofx-footer-col h3{font-family:var(--font-body)!important;font-size:12px!important;font-weight:500!important;letter-spacing:0!important;color:var(--fg-3);margin:0 0 16px}
.ofx-footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ofx-footer-col a{font-size:14px}
.ofx-footer-partners{display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap;padding:28px 0;border-bottom:1px solid var(--line)}
.ofx-footer-partners span{font-size:12px;font-weight:500;color:var(--fg-3)}
.ofx-footer-partners img{display:block;height:var(--h);width:auto;opacity:.82;transition:opacity .2s var(--ease)}
.ofx-footer-partners img:hover{opacity:1}
.ofx-footer-legal{display:grid;gap:10px;padding-top:28px}
.ofx-footer-legal p{margin:0;font-size:12px;line-height:1.6;color:var(--fg-3);max-width:880px}
@media(max-width:900px){.ofx-footer-top{grid-template-columns:1fr 1fr}.ofx-footer-brand{grid-column:1/-1}}
@media(max-width:520px){.ofx-footer{padding-top:56px}.ofx-footer-top{gap:32px 20px}}

/* ── 10. Loading screen (assets/ui.js) ─────────────────────────────────── */
.ofx-loading{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;
  background:rgba(10,10,10,.92);-webkit-backdrop-filter:saturate(160%) blur(20px);backdrop-filter:saturate(160%) blur(20px);
  opacity:0;transition:opacity .22s var(--ease)}
.ofx-loading.on{display:flex;opacity:1}
.ofx-loading.out{opacity:0}
.ofx-loading-inner{text-align:center}
.ofx-loading img{height:40px;width:auto;display:block;margin:0 auto 22px}
.ofx-loading p{margin:0;font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;color:#FFFFFF}
.ofx-loading p span{display:inline-block;opacity:0;transform:translateY(6px);animation:ofx-word .45s var(--ease) forwards}
.ofx-loading p span:nth-child(1){animation-delay:.1s}
.ofx-loading p span:nth-child(2){animation-delay:.4s;color:var(--brand-blue)}
.ofx-loading p span:nth-child(3){animation-delay:.7s}
@keyframes ofx-word{to{opacity:1;transform:none}}

/* ── 11. Page details ──────────────────────────────────────────────────── */
/* Inner-page heroes: flat black, like the page heroes. */
body:not(.home) .hero{background:var(--kit-black)!important;border-bottom:1px solid var(--line)}
/* Brand red was decorating numbers, steps and markers. The brand kit keeps red
   for severity and errors, so these move to ink and blue. Scores, findings and
   errors keep red. */
.fact b,.stat-card .num{color:var(--fg)!important}
.content-num,.layer-num,.rule-num,.outcome-q,.phase-when,.done .next b{
  color:var(--fg-3)!important;background:none!important;font-family:var(--font-body)!important;font-weight:500!important;letter-spacing:0!important
}
.step-n,.phase-dot{
  background:transparent!important;color:var(--fg)!important;border:1px solid currentColor!important;border-radius:var(--r-sm)!important;
  font-family:var(--font-body)!important;font-weight:500!important
}
.path-b .path-tag,.xray-bridge .tag{color:var(--fg-3)!important}
.tick{background:var(--brand-blue)!important;border-radius:1px!important}
.legal-toc ol li::before,.legal-section h2::before{
  color:var(--fg-3)!important;font-family:var(--font-body)!important;font-weight:500!important;letter-spacing:0!important
}
.legal-toc ol li a:hover{color:var(--link)!important}
.legal-section ul li::before{background:var(--line-2)!important}
.live-fill-cta{color:var(--link)!important;font-weight:600;text-decoration:none}
.live-fill-cta:hover{text-decoration:underline;text-underline-offset:3px}
.nav .nav-cta.nav-ghost{color:var(--ghost-fg)!important;background:transparent!important;border-color:var(--ghost-line)!important}

/* The sample report's severity words sit on a chip in their severity color
   (brand kit OFX-0.5.4), with text dark enough to read on it. */
.report .rep-row b[style*="#C81E2D"]{background:var(--brand-red)!important;color:#FFFFFF!important}
.report .rep-row b[style*="#F59E0B"]{background:var(--kit-amber)!important;color:#1A1A1A!important}
.report .rep-row b[style*="#E97820"],.report .rep-row b[style*="#F97316"]{background:var(--kit-orange)!important;color:#1A1A1A!important}

/* The sample report's amber and orange scores read in ink; the bar under each
   keeps its severity color, on the brand kit's orange where the page has an
   older one. */
.rep-pillar b[style*="#F59E0B"],.rep-pillar b[style*="#E97820"]{color:var(--fg)!important}
.rep-bar i[style*="#E97820"]{background:var(--kit-orange)!important}

/* Hard-coded slate gray that sits just under AA on the dark book page. */
.book-tagline,.xray-bridge-note,.final-cta-sub{color:var(--fg-2)!important}

/* Small links in consent text and form cards use the AA blue for their surface. */
.consent a,.sms-consent a,.card a:not([class]),.form-section a:not([class]),.diag-actions a{color:var(--link)!important}
.rr-tag,.guards-label{color:var(--fg-3)!important}

/* ── 12. Signature treatments ──────────────────────────────────────────
   Stripe cards and rows of identical boxes read as template work. These
   replace them with the brand kit's panel and the site's own vocabulary:
   framed callouts, hairline panels, timelines and ledgers. */

/* Callout: the brand kit's panel (light fill, thin border, generous padding),
   with brand blue corner marks instead of a colored stripe. */
.legal-callout,.bridge,.live-fill,.author-card{
  position:relative;border:1px solid var(--line-2)!important;border-radius:2px!important;
  background:var(--panel-2)!important;box-shadow:none!important;overflow:visible!important
}
.bridge{padding:28px 32px!important}
.legal-callout::before,.bridge::before,.live-fill::before,.author-card::before,
.legal-callout::after,.bridge::after,.live-fill::after,.author-card::after{
  content:''!important;position:absolute!important;width:12px!important;height:12px!important;background:none!important;pointer-events:none;display:block!important
}
.legal-callout::before,.bridge::before,.live-fill::before,.author-card::before{
  top:-1px!important;left:-1px!important;right:auto!important;border-top:2px solid var(--brand-blue);border-left:2px solid var(--brand-blue)
}
.legal-callout::after,.bridge::after,.live-fill::after,.author-card::after{
  bottom:-1px!important;right:-1px!important;top:auto!important;left:auto!important;border-bottom:2px solid var(--brand-blue);border-right:2px solid var(--brand-blue)
}
.bridge p:first-child{color:var(--fg)!important;font-weight:500}

/* Four pillars: the symptom reads as ruled text, the test as a dark band
   (the brand kit's data band: dark fill, blue label, white text). */
.factor-card{background:transparent!important;border:0!important;border-top:1px solid var(--fg)!important;border-radius:0!important;padding:18px 0 4px!important}
.factor-card.test-card{background:var(--kit-black)!important;border:1px solid var(--kit-black)!important;border-radius:var(--r)!important;padding:22px 24px!important}
.factor-card.test-card .factor-name{
  display:flex!important;align-items:center;gap:10px;font-family:var(--font-body)!important;font-size:12px!important;font-weight:600!important;
  letter-spacing:0!important;color:var(--brand-blue)!important;margin-bottom:12px!important
}
.factor-card.test-card .factor-name::before{content:'';width:8px;height:8px;border-radius:1px;background:var(--brand-blue)}
.factor-card.test-card .factor-desc{color:#E2E8F0!important}

/* How it works: the sample report's findings as rows with severity chips. */
.report .rep-row{border-left:0!important;background:transparent!important;border-radius:0!important;border-bottom:1px solid var(--line)!important;padding:10px 2px!important}
.report .rep-row b{font-family:var(--font-body)!important;font-size:11px!important;font-weight:600!important;padding:2px 7px;border-radius:var(--r-xs)}

/* Three steps: a timeline on one rule, not three boxes. */
.steps{gap:0!important}
.step{position:relative;background:transparent!important;border:0!important;border-radius:0!important;padding:0 40px 0 0!important}
.step::before{content:'';position:absolute;top:17px;left:46px;right:14px;height:1px;background:var(--line-2)}
.step:last-child::before{display:none}
.step .step-n{position:relative;z-index:1;background:var(--bg)!important;width:36px!important;height:36px!important}
.step h3{margin-top:22px!important}

/* Facts and stats: one panel with hairline dividers. */
.facts,.stats-grid{gap:0!important;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
.fact,.stat-card{background:transparent!important;border:0!important;border-radius:0!important;border-right:1px solid var(--line)!important;padding:24px 26px!important}
.fact:last-child,.stat-card:last-child{border-right:0!important}
.fact span,.stat-card .label{font-family:var(--font-body)!important;font-size:12px!important;font-weight:500!important;color:var(--fg-3)!important;letter-spacing:0}

/* Two outcomes: one split panel instead of two cards. */
.paths{gap:0!important;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2)}
.path{border-radius:0!important;border:0!important}

/* Guarantees, rules and outcomes: hairline grids and ledgers. */
.guard-grid,.advisor-rules{gap:0!important;border-radius:var(--r-lg);overflow:hidden}
.guard-grid{border:1px solid var(--line)}
.advisor-rules{background:var(--kit-black);border:1px solid var(--kit-black)}
.guard,.rule-card{border:0!important;border-radius:0!important;background:transparent!important;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
.guard:nth-child(2n),.rule-card:nth-child(2n){border-right:0!important}
.guard:nth-last-child(-n+2),.rule-card:nth-last-child(-n+2){border-bottom:0!important}
.outcome-grid{gap:0 40px!important}
.outcome-card{background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;padding:18px 0 22px!important}

/* Article thumbnails: a flat dark plate, one color per headline. */
.art-card-visual,.featured-visual{background:var(--kit-ink)!important}
.art-card-visual::before,.featured-visual::before,.art-card-visual::after,.featured-visual::after{display:none!important}
.art-card-visual-text .hl,.featured-visual-text .hl{color:inherit!important}

@media(max-width:900px){
  .step{padding:0 0 28px!important}
  .step::before{display:none}
  .fact,.stat-card{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .fact:last-child,.stat-card:last-child{border-bottom:0!important}
  .guard,.rule-card{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .guard:last-child,.rule-card:last-child{border-bottom:0!important}
  .outcome-grid{grid-template-columns:1fr!important}
}

/* ── 13. Accessibility ─────────────────────────────────────────────────── */
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:#FFFFFF;color:#0A0A0A;padding:10px 14px;border-radius:var(--r-sm);font-weight:600;font-size:14px;text-decoration:none}
.skip-link:focus{top:12px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand-blue)!important;outline-offset:3px!important;border-radius:var(--r-sm)
}

@media (max-width:900px){
  :root{--nav-h:56px}
  .nav{padding:0 16px!important}
  .nav-logo img,.nav-logo-img{height:26px!important}
  .pain,.anti,.pillars,.how,.diagnostic,.founder,.ba{padding-top:88px!important;padding-bottom:88px!important}
  .final-cta{padding-top:96px!important;padding-bottom:96px!important}
  .post{padding-top:104px!important}
  .page-hero,.legal-hero,.art-hero{padding-top:112px!important}
  .btn-primary,.btn-secondary,.btn-ghost{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ofx-loading p span{opacity:1;transform:none;animation:none}
}

/* ── Backdrops: a faint blueprint grid and a soft blue glow on dark heroes ── */
.page-hero,.legal-hero,.art-hero,body:not(.home) .hero{
  background-color:#0A0A0A!important;
  background-image:radial-gradient(70% 90% at 85% -10%,rgba(59,130,246,.16),transparent 62%),
                   radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.2px)!important;
  background-size:100% 100%,22px 22px!important;background-position:0 0,0 0!important;
  border-bottom:1px solid var(--line)
}
.factor-card.test-card{background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px)!important;background-size:18px 18px!important}
.art-card-visual,.featured-visual{background-color:#1A1A1A!important;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px)!important;background-size:18px 18px!important}


/* ── 14. Command look ──────────────────────────────────────────────────
   After the Command app: a silk wall, glass panels, pill controls, and blue
   for every action. Red stays for what's bad. */
:root{
  --ofx-accent:#3B82F6;--accent-fill:#2563EB;--accent-hover:#1D4ED8;
  --wall:#EEF0F4;
  --silk:radial-gradient(60% 45% at 12% 8%,rgba(255,255,255,.95),transparent 70%),
         radial-gradient(55% 40% at 92% 62%,rgba(150,170,210,.26),transparent 70%),
         radial-gradient(50% 40% at 30% 105%,rgba(255,255,255,.7),transparent 70%);
  --g1:rgba(255,255,255,.82);--g2:rgba(255,255,255,.5);--edge:rgba(255,255,255,.95);
  --hl:rgba(255,255,255,1);--hl2:rgba(255,255,255,.6);--lo:rgba(0,0,0,.05);
  --gshadow:0 14px 40px rgba(40,50,80,.12);--gblur:blur(26px) saturate(1.9);--r-glass:28px
}
body.t-dark,.nav,.mobile-nav,.footer,.site-footer,.ofx-footer,.xr-bar,
.hero,.page-hero,.sec-dark,.anti,.ba,.proof,.final-cta,.legal-hero,.art-hero,
div.cta,.cta-band,.rule-card,.contact-block,.xray-bridge,.t-dark{
  --wall:#0B0B0D;
  --silk:radial-gradient(60% 40% at 15% 12%,rgba(255,255,255,.07),transparent 70%),
         radial-gradient(55% 38% at 90% 55%,rgba(120,140,170,.11),transparent 70%),
         radial-gradient(60% 50% at 70% 0%,rgba(59,130,246,.14),transparent 70%),
         radial-gradient(45% 45% at 20% 110%,rgba(59,130,246,.08),transparent 70%);
  --g1:rgba(255,255,255,.10);--g2:rgba(255,255,255,.035);--edge:rgba(255,255,255,.13);
  --hl:rgba(255,255,255,.28);--hl2:rgba(255,255,255,.07);--lo:rgba(0,0,0,.28);
  --gshadow:0 18px 50px rgba(0,0,0,.45)
}
.t-light,body.t-dark .card,body.t-dark .exit-modal,body.t-dark .path-b,body.t-dark .form-body,body.t-dark .toast,
body.t-dark .done .next,.hero .report,.path-b{
  --g1:rgba(255,255,255,.96);--g2:rgba(255,255,255,.88);--edge:rgba(255,255,255,1);
  --hl:rgba(255,255,255,1);--hl2:rgba(255,255,255,.6);--lo:rgba(0,0,0,.05);--gshadow:0 14px 40px rgba(40,50,80,.14)
}

/* The wall: dark sections and light sections each get their silk. */
.hero,.anti,.ba,.integrations,.final-cta,.page-hero,.legal-hero,.art-hero,body:not(.home) .hero,.sec-dark{
  background-color:var(--wall)!important;background-image:var(--silk)!important;background-size:100% 100%!important
}
.pain,.pillars,.how,.diagnostic,.founder,.deliverables{background-color:var(--wall)!important;background-image:var(--silk)!important}
body.t-dark{background:#0B0B0D!important}
.hero-bg{background:none!important}
.hero-bg::after{opacity:.5}
.page-hero,.legal-hero,.art-hero,body:not(.home) .hero{border-bottom:0!important}

/* Glass panels. */
.xc,.compare,.ba-card,.beyond,.deliverables-box,.diagnostic-box,.pillar-row,.symptoms li,
.card,.report,.facts,.stats-grid,.paths,.guard-grid,.featured-card,.art-card,.legal-toc,
.legal-callout,.bridge,.live-fill,.author-card,.form-section,.submit-section,.success-wrap,.exit-modal,
.factor-card.test-card,.system-layers,.contact-block,.xr-card,.hero-preview{
  position:relative;background:linear-gradient(145deg,var(--g1),var(--g2))!important;
  border:1px solid var(--edge)!important;border-radius:var(--r-glass)!important;
  -webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);
  box-shadow:inset 0 1px 0 var(--hl),inset 1px 0 0 var(--hl2),inset 0 -1px 0 var(--lo),var(--gshadow)!important
}
.legal-callout::before,.bridge::before,.live-fill::before,.author-card::before,
.legal-callout::after,.bridge::after,.live-fill::after,.author-card::after{display:none!important}
.factor-card.test-card{background-image:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035))!important;background-color:#16161A!important;border-color:rgba(255,255,255,.13)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 40px rgba(40,50,80,.18)!important}
.art-card-visual,.featured-visual{border-radius:16px!important;background-color:#16161A!important;background-image:radial-gradient(60% 60% at 80% 0%,rgba(59,130,246,.22),transparent 70%),radial-gradient(50% 50% at 10% 100%,rgba(255,255,255,.06),transparent 70%)!important;background-size:100% 100%!important}
.featured-card,.art-card{overflow:hidden}
.advisor-rules{background:linear-gradient(145deg,#1C1C21,#0F0F12)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:var(--r-glass)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 40px rgba(40,50,80,.18)!important}
.featured-card:hover,.art-card:hover{border-color:var(--edge)!important;box-shadow:inset 0 1px 0 var(--hl),0 0 0 2px rgba(59,130,246,.45),var(--gshadow)!important}

/* Home panels. */
.symptoms{gap:16px!important}
.symptoms li{border-top:1px solid var(--edge)!important;padding:24px 24px 26px!important}
.compare{overflow:hidden}
.compare-row>div:last-child{background:rgba(59,130,246,.08)!important}
.compare-vs{border-radius:999px!important;background:#16161A!important}
.pillar-row{overflow:hidden}
.pillar{border-color:rgba(26,26,26,.07)!important}
.ba-card .ba-label{border-color:var(--line)!important}
.beyond{padding:36px 40px!important}
.deliverables-box{overflow:hidden}
.diagnostic-box{padding:32px!important}
.s-n,.step-n,.phase-dot{border-radius:50%!important;border:1px solid var(--edge)!important;background:linear-gradient(145deg,var(--g1),var(--g2))!important;box-shadow:inset 0 1px 0 var(--hl),var(--gshadow)!important;color:var(--fg)!important}
.node-tile{border-radius:14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.4)!important}
.node-p .node-tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(59,130,246,.75),0 8px 24px rgba(59,130,246,.25)!important}

/* Labels: a round blue dot. */
.section-tag::before,.tag::before,.eyebrow::before,.hero-tag::before,.legal-tag::before,.art-eyebrow::before,
.book-eyebrow::before,.author-eyebrow::before,.partners-label::before,.factor-card.test-card .factor-name::before{
  border-radius:50%!important;background:var(--ofx-accent)!important;width:7px!important;height:7px!important
}
.tick{border-radius:50%!important}

/* Buttons: pills, blue. */
.btn-primary,.nav-cta,.mob-cta,.post-cta-btn,.mid-cta-btn,.book-cta-primary,.final-cta-button,.xray-bridge-btn,
.exit-primary,.submit,.sp-next-btn,.diag-btn-next,.xr-bar a,.bridge-cta,.framework-badge,.profile a.cta{
  background:var(--accent-fill)!important;border-color:var(--accent-fill)!important;color:#FFFFFF!important;border-radius:999px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px rgba(37,99,235,.28)!important
}
.btn-primary:hover,.nav-cta:hover,.mob-cta:hover,.post-cta-btn:hover,.mid-cta-btn:hover,.book-cta-primary:hover,
.final-cta-button:hover,.xray-bridge-btn:hover,.exit-primary:hover,.submit:hover,.sp-next-btn:hover,.diag-btn-next:hover,
.xr-bar a:hover,.bridge-cta:hover,.framework-badge:hover,.profile a.cta:hover,
.final-cta-button:not([href^="/xray"]):hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important}
.btn-primary,.post-cta-btn,.mid-cta-btn,.book-cta-primary,.final-cta-button,.xray-bridge-btn,.sp-next-btn,.bridge-cta,.framework-badge,.profile a.cta{padding:14px 24px!important}
.btn-secondary,.btn-ghost,.xray-bridge-ghost,.diag-btn-back,.nav-cta.nav-ghost,.sp-next-soft{
  border-radius:999px!important;background:linear-gradient(145deg,var(--g1),var(--g2))!important;border-color:var(--edge)!important;
  -webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);box-shadow:inset 0 1px 0 var(--hl)!important
}
.btn-secondary:hover,.btn-ghost:hover,.xray-bridge-ghost:hover,.diag-btn-back:hover,.nav-cta.nav-ghost:hover,.sp-next-soft:hover{border-color:var(--ofx-accent)!important}
.mobile-nav .mob-cta{border-bottom:1px solid var(--accent-fill)!important}
.nav .nav-cta.nav-ghost{background:linear-gradient(145deg,var(--g1),var(--g2))!important}

/* Nav: glass over the wall. */
.nav{background:rgba(11,11,13,.62)!important;-webkit-backdrop-filter:blur(26px) saturate(1.9);backdrop-filter:blur(26px) saturate(1.9);border-bottom:1px solid rgba(255,255,255,.08)!important}
.xr-bar{background:rgba(11,11,13,.7)!important;-webkit-backdrop-filter:blur(26px) saturate(1.9);backdrop-filter:blur(26px) saturate(1.9)}

/* Fields and choices: soft and round. */
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input:not([type]),
select,textarea,.field-input,.field-select,.field-textarea,.ctx-input,.notes-textarea{border-radius:12px!important}
.diag-opt,.score-btn,.sms-consent,.consent,.sev-ref,.formerr,.toast{border-radius:14px!important}
.filter-chip,.pillar-badge,.path-tag,.rr-tag,.section-badge,.post-pillar,.kc-pillar,.art-card-pillar,.featured-pillar,
.report .rep-row b,.xr-tier,.xr-finding em{border-radius:999px!important}
.filter-chip.active{background:var(--accent-fill)!important;border-color:var(--accent-fill)!important;color:#FFFFFF!important}
.filter-bar{background:rgba(11,11,13,.62)!important;-webkit-backdrop-filter:blur(26px) saturate(1.9);backdrop-filter:blur(26px) saturate(1.9)}

/* Footer on the wall. */
.ofx-footer,.site-footer,.footer{background:#0B0B0D!important}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .xc,.compare,.ba-card,.beyond,.deliverables-box,.diagnostic-box{background:var(--panel-2)!important}
}
@media (prefers-reduced-transparency:reduce){
  .nav{background:#0B0B0D!important}
}


/* ── 15. Apple pass ────────────────────────────────────────────────────
   After Apple's iPhone 18 Pro page: a floating glass nav, semibold display
   type, outline pills for secondary actions. */
.nav{top:12px!important;left:50%!important;right:auto!important;transform:translateX(-50%);width:min(1180px,calc(100% - 24px))!important;
  height:56px!important;padding:0 10px 0 22px!important;border-radius:18px!important;border:1px solid rgba(255,255,255,.1)!important;
  background:rgba(22,22,23,.72)!important;box-shadow:0 10px 30px rgba(0,0,0,.25)!important}
.nav-logo img,.nav-logo-img{height:26px!important}
.nav-links{gap:26px!important}
.nav-links a.nav-cta,.nav .nav-cta{height:36px;padding:0 16px!important;font-size:14px!important;box-shadow:none!important}
h1,h2{font-weight:600!important}
h1{letter-spacing:-.04em!important}
h2{letter-spacing:-.032em!important}
.btn-secondary,.btn-ghost,.xray-bridge-ghost,.diag-btn-back,.nav-cta.nav-ghost,.sp-next-soft{
  background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none!important;border:1px solid var(--ghost-line)!important}
.btn-secondary:hover,.btn-ghost:hover,.xray-bridge-ghost:hover,.diag-btn-back:hover,.nav-cta.nav-ghost:hover,.sp-next-soft:hover{background:var(--ghost-hover)!important;border-color:var(--ghost-fg)!important}
.btn-primary,.nav-cta,.mob-cta,.post-cta-btn,.mid-cta-btn,.book-cta-primary,.final-cta-button,.xray-bridge-btn,.exit-primary,.submit,.sp-next-btn,.diag-btn-next,.xr-bar a,.bridge-cta,.framework-badge,.profile a.cta{box-shadow:none!important}
.ofx-footer,.site-footer,.footer{background:#000!important}
@media (max-width:900px){
  .nav{top:8px!important;width:calc(100% - 16px)!important;height:52px!important;padding:0 8px 0 16px!important;border-radius:16px!important}
}

/* ── 16. Fintech layer ─────────────────────────────────────────────────
   The home page's finish on every page. Dark surfaces sit on a near-black
   navy with a faint blue glow, light ones on a white-to-mist gradient. Panels
   are quiet tiles with a hairline that turns blue on hover. Supporting copy is
   one color at regular weight. */
:root{--tile:#FFFFFF;--tile-line:#E2E8F0;--tile-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05);
  --navy-wall:radial-gradient(55% 55% at 50% -10%,rgba(59,130,246,.09),transparent 70%),linear-gradient(180deg,#0C111B 0%,#080B12 55%,#05070C 100%);
  --mist-wall:radial-gradient(60% 50% at 85% 0%,rgba(59,130,246,.06),transparent 70%),linear-gradient(180deg,#FFFFFF 0%,#F2F5FA 100%)}
body.t-dark,.nav,.mobile-nav,.footer,.site-footer,.ofx-footer,.xr-bar,
.hero,.page-hero,.sec-dark,.anti,.ba,.proof,.final-cta,.legal-hero,.art-hero,
div.cta,.cta-band,.rule-card,.contact-block,.xray-bridge,.t-dark{
  --tile:rgba(255,255,255,.04);--tile-line:rgba(255,255,255,.09);--tile-shadow:none;--fg-2:#A3ACB9;--fg-3:#8B94A3}
.t-light,body.t-dark .card,body.t-dark .exit-modal,body.t-dark .path-b,body.t-dark .form-body,.hero .report,.path-b{
  --tile:#FFFFFF;--tile-line:#E2E8F0;--tile-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05);--fg-2:#475569;--fg-3:#64748B}

/* Surfaces */
body:not(.home){background:#F2F5FA!important}
body.t-dark:not(.home){background:#05070C!important}
body.t-dark:not(.home)::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--navy-wall)}
body:not(.home) .hero,body:not(.home) .page-hero,body:not(.home) .legal-hero,body:not(.home) .art-hero,body:not(.home) .sec-dark,
body:not(.home) div.cta,body:not(.home) .cta-band,body:not(.home) .xray-bridge,body:not(.home) .final-cta,body:not(.home) .book-hero,body:not(.home) .rr{
  background:var(--navy-wall)!important;background-color:#05070C!important;background-size:auto!important;border:0!important}
body.t-dark:not(.home) section:not(.integrations){background-color:transparent}
body:not(.home):not(.t-dark) .sec:not(.sec-dark),body:not(.home):not(.t-dark) .legal-body,body:not(.home):not(.t-dark) .pillar-deep{background:var(--mist-wall)!important}
body:not(.home):not(.t-dark) .sec-alt:not(.sec-dark){background:linear-gradient(180deg,#F2F5FA 0%,#EAEFF6 100%)!important}

/* Tiles */
.keep-card,.outcome-card,.path,.guard,.legal-toc,.legal-callout,.featured-card,.art-card,.report,.author-card,.bridge,.live-fill,
.fact,.stat-card,.content-item,.layer-section,.diagnostic-box,.card,.form-section,.submit-section,.exit-modal,.xr-card{
  background:var(--tile)!important;border:1px solid var(--tile-line)!important;border-radius:20px!important;box-shadow:var(--tile-shadow)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)!important}
.keep-card:hover,.outcome-card:hover,.path:hover,.guard:hover,.featured-card:hover,.art-card:hover,.fact:hover,.stat-card:hover,.content-item:hover,.layer-section:hover{
  border-color:var(--brand-blue)!important;box-shadow:0 0 0 1px var(--brand-blue),var(--tile-shadow)!important;background:var(--tile)!important}
.facts,.stats-grid,.paths,.guard-grid{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;gap:16px!important;overflow:visible!important}
.fact,.stat-card{border-right:1px solid var(--tile-line)!important}
.guard,.rule-card{border-bottom:1px solid var(--tile-line)!important}
.path{border-radius:20px!important}
.factor-card.test-card{background:linear-gradient(160deg,#111827,#0B0F17)!important;background-image:none!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:20px!important;box-shadow:none!important}
.advisor-rules{background:linear-gradient(160deg,#111827,#0B0F17)!important;border-radius:20px!important;box-shadow:none!important}
.art-card-visual,.featured-visual{background:linear-gradient(160deg,#111827,#070A10)!important;background-image:radial-gradient(60% 60% at 80% 0%,rgba(59,130,246,.14),transparent 70%),linear-gradient(160deg,#111827,#070A10)!important;border-radius:14px!important}

/* Supporting copy: one color, regular weight */
.hero-lede,.hero-sub,.sec-lede,.lede,.rr-lede,.post-sub,.art-hero-sub,.page-hero p,.legal-hero p,.art-hero p,.factor-desc,.layer-desc,.outcome-a,.final-cta-sub,.book-tagline,.xray-bridge-note{font-weight:400!important}
.hero-lede b,.hero-sub b,.sec-lede b,.lede b{font-weight:inherit;color:inherit}

/* Labels: small and quiet, blue on light, gray on dark, no marker */
.section-tag::before,.tag::before,.eyebrow::before,.hero-tag::before,.legal-tag::before,.art-eyebrow::before,.book-eyebrow::before,.author-eyebrow::before{display:none!important}
.section-tag,.tag,.eyebrow,.hero-tag,.legal-tag,.art-eyebrow,.book-eyebrow,.author-eyebrow,.page-hero .section-tag{font-size:13px!important;font-weight:600!important;letter-spacing:.02em!important;color:var(--brand-blue)!important}
body.t-dark .section-tag,body.t-dark .tag,body.t-dark .eyebrow,.hero .eyebrow,.hero .hero-tag,.page-hero .section-tag,.legal-hero .legal-tag,.art-hero .art-eyebrow,.sec-dark .tag,div.cta .tag,.cta-band .tag,.xray-bridge .tag,.book-hero .book-eyebrow,
body.t-dark .t-light .section-tag,body.t-dark .card .eyebrow{color:var(--fg-3)!important}
body.t-dark .card .eyebrow,body.t-dark .t-light .tag{color:var(--brand-blue)!important}

/* Nav: the X-Ray button, then the few pages a visitor needs */
.nav{background:rgba(12,17,27,.72)!important}
.ofx-footer,.site-footer,.footer{background:#05070C!important}

/* ── 17. Footer: brand and one button, then four folded groups ─────────── */
footer.ofx-footer{text-align:left;font-size:14px;border-top:1px solid rgba(255,255,255,.08)!important;color:var(--fg-2);padding:56px max(20px,calc((100vw - var(--container))/2)) 36px}
footer.ofx-footer .ofx-footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:32px 64px;align-items:start;padding-bottom:36px}
footer.ofx-footer .ofx-footer-brand p{margin:0 0 20px}
footer.ofx-footer .ofx-footer-cta{padding:12px 20px!important;font-size:14px!important;min-height:0}
.ofx-footer-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;align-items:start}
.ofx-fgroup{border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.035);transition:border-color .2s var(--ease),background .2s var(--ease)}
.ofx-fgroup:hover,.ofx-fgroup[open]{border-color:var(--brand-blue);background:rgba(59,130,246,.06)}
.ofx-fgroup summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;color:var(--fg)}
.ofx-fgroup summary::-webkit-details-marker{display:none}
.ofx-fgroup summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--brand-blue);border-bottom:2px solid var(--brand-blue);transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--ease)}
.ofx-fgroup[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.ofx-fgroup summary:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px;border-radius:12px}
.ofx-fgroup ul{list-style:none;margin:0;padding:2px 16px 16px;display:grid;gap:10px}
.ofx-fgroup a{font-size:14px;color:var(--fg-2)}
.ofx-fgroup a:hover{color:var(--fg)}
@media(max-width:900px){
  footer.ofx-footer{padding:44px 20px 28px}
  footer.ofx-footer .ofx-footer-top{grid-template-columns:1fr;gap:28px}
  .ofx-footer-menu{grid-template-columns:1fr}
  .ofx-footer-menu{gap:10px}
  .ofx-fgroup summary{padding:16px;font-size:15px}
  .ofx-fgroup a{font-size:16px;display:block;padding:4px 0}
}

/* ── 18. Articles opt-in ───────────────────────────────────────────────── */
.optin{max-width:600px;margin:32px auto 0;text-align:left}
.optin-label{display:block;font-size:15px;font-weight:500;line-height:1.5;color:var(--fg);margin-bottom:14px;text-align:center}
.optin-row{display:flex;gap:8px;padding:6px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.optin-row input[type=email],.optin-row input[type=text]{flex:1;min-width:0;height:46px;padding:0 16px;border:0!important;border-radius:999px!important;background:transparent;color:var(--fg);font-size:16px;outline:none;box-shadow:none!important}
.optin-row input[type=text]{flex:.7;border-right:1px solid rgba(255,255,255,.1)!important;border-radius:999px 0 0 999px!important}
.optin-row input::placeholder{color:var(--fg-3)}
.optin-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.optin-row:focus-within{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(59,130,246,.22)}
.optin-btn{padding:0 22px!important;min-height:46px;font-size:15px!important;white-space:nowrap}
.optin-btn:disabled{opacity:.6}
.optin-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.optin-note{font-size:13px;color:var(--fg-3);margin-top:10px;text-align:center}
.optin-note a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
.optin-note.err{color:#FF8A94}
@media(max-width:600px){.optin-row{flex-direction:column;border-radius:20px;padding:8px;gap:6px}.optin-row input[type=text],.optin-row input[type=email]{flex:none!important;width:100%;height:48px}.optin-row input[type=text]{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.1)!important;border-radius:12px!important}.optin-btn{width:100%}}

/* ── 19. Phones ────────────────────────────────────────────────────────── */
/* The floating nav centers with margins, so it sits right whether a page
   fixes it or leaves it in the flow. */
.nav{left:0!important;right:0!important;margin-left:auto!important;margin-right:auto!important;transform:none!important}
/* On a phone the nav keeps the X-Ray button beside the menu. */
@media (max-width:960px){
  .nav .nav-links{display:flex!important;gap:8px!important}
  .nav .nav-links a:not(.nav-cta){display:none!important}
  .nav .nav-links a.nav-cta{height:34px;padding:0 14px!important;font-size:13px!important}
  .hamburger{display:block!important}
}
@media (max-width:400px){.nav .nav-links a.nav-cta .arr{display:none}}
/* Thumb-sized taps and readable type */
@media (max-width:640px){
  .btn-primary,.btn-secondary,.btn-ghost{min-height:48px}
  input[type="text"],input[type="email"],input[type="tel"],input[type="number"],select,textarea{font-size:16px!important}
  h1{overflow-wrap:break-word}
}

/* A plain text link at the end of the floating nav gets the same inset as the logo. */
.nav > .nav-back:last-child{margin-right:12px}

/* ── 20. Plain pass ─────────────────────────────────────────────────────
   Flat surfaces: dark sections are one navy, light sections are white or a
   pale gray. No glows, no dot grids. */
:root{--navy-wall:#0A0F1A;--mist-wall:#F5F7FA;--silk:none}
body.t-dark,.nav,.mobile-nav,.footer,.site-footer,.ofx-footer,.xr-bar,
.hero,.page-hero,.sec-dark,.anti,.ba,.proof,.final-cta,.legal-hero,.art-hero,
div.cta,.cta-band,.rule-card,.contact-block,.xray-bridge,.t-dark{--silk:none;--wall:#0A0F1A}
.page-hero,.legal-hero,.art-hero,body:not(.home) .hero{background-image:none!important;background-color:#0A0F1A!important}
.factor-card.test-card{background-image:none!important}
.art-card-visual,.featured-visual{background:#111827!important;background-image:none!important}
.art-hero::before,.featured-visual::before,.art-card-visual::before,.mid-cta::before,.book-hero::before,.hero-bg::after{display:none!important}
body.t-dark{background:#0A0F1A!important}
body:not(.home):not(.t-dark) .sec-alt:not(.sec-dark){background:#EEF2F7!important}
/* Tiles: a hover outline only on things you can click, and smaller corners. */
.keep-card:hover,.outcome-card:hover,.path:hover,.guard:hover,.fact:hover,.stat-card:hover,.content-item:hover,.layer-section:hover,.step:hover{
  border-color:var(--tile-line)!important;box-shadow:var(--tile-shadow)!important}
.fact,.stat-card,.content-item,.layer-section,.diagnostic-box,.card,.form-section,.submit-section,.exit-modal,.xr-card,
.keep-card,.outcome-card,.guard,.path,.art-card,.featured-card,.advisor-rules,.factor-card,.pillar-card,.pain-card{border-radius:12px!important}
.art-card-visual,.featured-visual{border-radius:10px!important}
/* One flat navy for every dark surface except the footer. */
body.t-dark:not(.home){background:#0A0F1A!important}
body:not(.home) .hero,body:not(.home) .page-hero,body:not(.home) .legal-hero,body:not(.home) .art-hero,body:not(.home) .sec-dark,
body:not(.home) div.cta,body:not(.home) .cta-band,body:not(.home) .xray-bridge,body:not(.home) .final-cta,body:not(.home) .book-hero,body:not(.home) .rr{
  background:#0A0F1A!important}
.nw{white-space:nowrap}

/* ── 21. Fixes ──────────────────────────────────────────────────────────
   The test cards keep their dark panel, cards with only a top rule stay
   square, the report contents and the legal contact card get their room
   and readable text back. */
.factor-card.test-card{background:#111827!important;border:1px solid #1F2937!important;border-radius:12px!important}
.factor-card.test-card .factor-desc{color:#CBD5E1!important}
.factor-card:not(.test-card),.guard{border-radius:0!important}
.contact-block{background:#FFFFFF!important;border:1px solid #E2E8F0!important;box-shadow:0 1px 2px rgba(15,23,42,.04)!important;border-radius:12px!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.contact-block h3{color:#0F172A!important}
.contact-block p{color:#475569!important}
/* Plain: the report contents read as a list, like the standards. */
.contents{gap:0 40px!important}
.content-item{background:none!important;border:0!important;border-bottom:1px solid #E2E8F0!important;border-radius:0!important;box-shadow:none!important;padding:16px 0!important}
.advisor-rules{background:#111827!important}
/* Mercury's required disclaimer, as small print under the copyright. */
.ofx-footer-legal p.ofx-fine{font-size:10.5px;line-height:1.5;opacity:.7;max-width:none}

/* ── 22. Book menu in the nav ─────────────────────────────────────────── */
.nav-dd{position:relative;display:inline-flex;align-items:center}
.nav-dd-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;letter-spacing:-.005em;color:var(--fg-2,#A3ACB9);transition:color .2s}
.nav-dd-btn:hover,.nav-dd.open .nav-dd-btn{color:var(--fg,#F1F5F9)}
.nav-dd-btn:focus-visible{outline:2px solid #3B82F6;outline-offset:4px;border-radius:4px}
.nav-dd-btn svg{transition:transform .2s}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-menu{display:none;position:absolute;top:100%;left:-14px;padding-top:12px;z-index:200}
.nav-dd-menu::before{content:"";position:absolute;inset:12px 0 0;background:#0F1522;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 16px 40px rgba(2,6,23,.5);z-index:-1}
.nav-dd-menu a{display:block;white-space:nowrap;padding:10px 16px!important;margin:0 4px;font-size:14px!important;color:#CBD5E1!important;border-radius:8px}
.nav-dd-menu a:first-child{margin-top:4px}.nav-dd-menu a:last-child{margin-bottom:4px}
.nav-dd-menu a:hover{background:rgba(255,255,255,.06);color:#FFFFFF!important}
.nav-dd.open .nav-dd-menu{display:block}
@media (hover:hover) and (min-width:961px){.nav-dd:hover .nav-dd-menu{display:block}}
@media (max-width:960px){.nav-links .nav-dd{display:none!important}}
.opi-nav-links .nav-dd-btn{color:var(--muted)}.opi-nav-links .nav-dd-btn:hover,.opi-nav-links .nav-dd.open .nav-dd-btn{color:var(--ink)}

/* ── 23. Elevation: what the Ripple page set, on every page ───────────────
   One blue phrase per headline (.grad), blue to green step flows (.flow),
   sections that fade up once as they enter (.rv, switched on by nav.js), and
   each page's signature drawing. Motion stops for anyone with reduced motion. */
.grad{background:linear-gradient(92deg,#93C5FD 0%,#3B82F6 55%,#60A5FA 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.grad span{-webkit-text-fill-color:transparent!important;color:transparent!important}

/* Step flows: each step's rule runs toward the next marker, blue to green. */
.flow{--f0:#3B82F6;--f1:#269EBC;--f2:#10B981}
.flow.n4{--f1:#2D94CF;--f2:#1EA7A8;--f3:#10B981}
.flow>*:nth-child(1){--fa:var(--f0);--fb:var(--f1)}
.flow>*:nth-child(2){--fa:var(--f1);--fb:var(--f2)}
.flow>*:nth-child(3){--fa:var(--f2);--fb:var(--f3,var(--f2))}
.flow>*::before{background:linear-gradient(90deg,var(--fa),var(--fb))!important;height:2px!important;opacity:1!important}
.flow>*:last-child::before{display:none!important}
/* Home's three steps: round markers on the dark band, the last one green. */
body.home .steps.flow .step-x::before{display:block!important;content:'';position:absolute;top:21px;left:56px;right:-32px}
body.home .steps.flow .step-x:last-child::before{display:none!important}
body.home .steps.flow .s-n{width:44px!important;height:44px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.16)!important;background:#0A0F1A!important;display:grid!important;place-items:center;font:700 16px var(--font-display,'DM Sans'),sans-serif!important;color:#60A5FA!important}
body.home .steps.flow .step-x:last-child .s-n{color:#10B981!important}
.steps.flow .step:last-child .step-n{color:#10B981}
@media (max-width:900px){.flow>*::before{display:none!important}}

/* Fade up once, on entry. */
.rv-on .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv-on .rv.in{opacity:1;transform:none}

/* How it works: the business, taken apart into its four layers. */
.xpl{position:relative;height:440px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 40% 50%,rgba(59,130,246,.18),rgba(59,130,246,0) 60%),#0D1424;overflow:hidden}
.xpl::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(96,165,250,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.06) 1px,transparent 1px);background-size:24px 24px}
.xpl-stack,.xpl-labels{position:absolute;top:64px;display:flex;flex-direction:column;gap:32px}
.xpl-stack{left:56px;width:min(260px,46%)}
.xpl-stack span{display:block;height:52px;border-radius:8px;border:1.5px solid #60A5FA;transform:skewX(-12deg)}
.xpl-stack span:nth-child(1){background:rgba(59,130,246,.12);animation:xpl1 6s ease-in-out infinite}
.xpl-stack span:nth-child(2){background:rgba(59,130,246,.09);animation:xpl2 6s ease-in-out infinite}
.xpl-stack span:nth-child(3){background:rgba(59,130,246,.06);animation:xpl3 6s ease-in-out infinite}
.xpl-stack span:nth-child(4){background:rgba(59,130,246,.03);animation:xpl4 6s ease-in-out infinite}
.xpl-labels{left:calc(min(260px,46%) + 84px);font-size:13px;color:#CBD5E1;animation:xplL 6s ease-in-out infinite}
.xpl-labels span{height:52px;display:flex;align-items:center;gap:10px}
.xpl-labels span::before{content:"";width:28px;border-top:1px dashed rgba(96,165,250,.6)}
.xpl-cap{position:absolute;left:24px;bottom:18px;font-size:12px;color:#8B94A3}
@keyframes xpl1{0%,15%{transform:skewX(-12deg) translateY(96px)}45%,85%{transform:skewX(-12deg) translateY(0)}100%{transform:skewX(-12deg) translateY(96px)}}
@keyframes xpl2{0%,15%{transform:skewX(-12deg) translateY(32px)}45%,85%{transform:skewX(-12deg) translateY(0)}100%{transform:skewX(-12deg) translateY(32px)}}
@keyframes xpl3{0%,15%{transform:skewX(-12deg) translateY(-32px)}45%,85%{transform:skewX(-12deg) translateY(0)}100%{transform:skewX(-12deg) translateY(-32px)}}
@keyframes xpl4{0%,15%{transform:skewX(-12deg) translateY(-96px)}45%,85%{transform:skewX(-12deg) translateY(0)}100%{transform:skewX(-12deg) translateY(-96px)}}
@keyframes xplL{0%,30%{opacity:0}45%,85%{opacity:1}100%{opacity:0}}
@media (max-width:900px){.xpl{height:400px;margin-top:32px}.xpl-stack{left:28px}.xpl-labels{left:calc(min(260px,46%) + 44px);font-size:12px}}

/* Four pillars: one panel per pillar, each with a drawing of how it breaks. */
.pill-over{background:#0A0F1A;padding:8px 24px 88px}
.pill-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pill{border:1px solid rgba(255,255,255,.09);border-radius:14px;background:#0D1424;padding:24px;display:flex;flex-direction:column;gap:14px;text-align:left;transition:transform .2s ease,border-color .2s ease}
.pill:hover{transform:translateY(-3px);border-color:rgba(96,165,250,.35)}
.pill-n{font:700 44px/1 'DM Sans',sans-serif;color:rgba(96,165,250,.35)}
.pill h3{margin:0;font:700 21px/1.2 'DM Sans',sans-serif;color:#F1F5F9}
.pill p{margin:0;font-size:14px;line-height:1.6;color:#A3ACB9!important;min-height:68px}
.pill svg{width:100%;height:auto;border-radius:8px;background:#0A0F1A}
.pill a{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:14px;font-size:13px;color:#60A5FA;text-decoration:none}
.pill a:hover{color:#93C5FD}
@media (max-width:1000px){.pill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pill-grid{grid-template-columns:1fr}.pill p{min-height:0}}

/* Our standards: the usual way next to the OpFix standard. */
.std{max-width:1080px;margin:0 auto;padding:32px 24px 56px}
.std-grid{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.5fr)}
.std-grid>div{display:contents}
.std-grid>div>*{padding:20px 22px;border-top:1px solid var(--line,#E2E8F0);font-size:15px;line-height:1.55}
.std-grid .h>*{border-top:0;padding-top:0;font:600 13px Inter,sans-serif;color:var(--fg-3,#64748B)}
.std-grid .h>.us{padding-top:18px;border-radius:14px 14px 0 0;font:700 15px 'DM Sans',sans-serif;color:var(--fg,#1A1A1A)}
.std-grid .k{padding-left:0;font:700 16px 'DM Sans',sans-serif;color:var(--fg,#1A1A1A)}
.std-grid .them{color:var(--fg-3,#64748B)}
.std-grid .them::before{content:"✕";margin-right:10px;color:#94A3B8}
.std-grid .us{background:rgba(59,130,246,.07);border-left:1px solid rgba(59,130,246,.35);border-right:1px solid rgba(59,130,246,.35);border-top-color:rgba(59,130,246,.18)}
.std-grid .us b{display:block;font:700 16px 'DM Sans',sans-serif;color:var(--fg,#1A1A1A);margin-bottom:4px}
.std-grid .us b::before{content:"✓";margin-right:10px;color:#2563EB}
.std-grid .us span{color:var(--fg-2,#475569)}
.std-grid>div:last-child>*{border-bottom:1px solid var(--line,#E2E8F0)}
.std-grid>div:last-child>.us{border-bottom:1px solid rgba(59,130,246,.35);border-radius:0 0 14px 14px}
@media (max-width:760px){.std-grid{grid-template-columns:1fr}.std-grid .h{display:none}.std-grid .k{padding-top:24px}.std-grid .them,.std-grid .k{border-top:0}.std-grid .us{border-radius:10px;border:1px solid rgba(59,130,246,.35);margin-top:6px}}

@media (prefers-reduced-motion:reduce){.rv-on .rv{opacity:1;transform:none;transition:none}.xpl-stack span,.xpl-labels{animation:none}.xpl-labels{opacity:1}.pill{transition:none}}

/* ===== 24. Elevation, batch 2: articles, article pages, books ===== */

/* Articles hub: every card visual reads as a cover, its phrase in the blue gradient. */
.art-card-visual,.featured-visual{background:radial-gradient(circle at 95% 115%,rgba(59,130,246,.42),rgba(59,130,246,0) 58%),#0A0F1A!important;border-bottom:1px solid rgba(96,165,250,.14)}
.art-card-visual-text .hl,.featured-visual-text .hl{background:linear-gradient(92deg,#93C5FD,#3B82F6 55%,#60A5FA);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent!important;color:transparent!important}
.art-card,.featured-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.art-card:hover,.featured-card:hover{transform:translateY(-3px)!important;box-shadow:0 20px 40px rgba(2,6,23,.5)!important;border-color:rgba(96,165,250,.3)!important}

/* Article pages: reading progress, a contents rail that tracks your place, covers for the next reads. */
.read-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;pointer-events:none}
.read-prog span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#3B82F6,#60A5FA 60%,#10B981)}
.post-toc{position:fixed;top:150px;left:max(24px,calc(50% - 600px));width:210px;display:none;flex-direction:column;gap:2px;transition:opacity .25s ease}
.post-toc.off{opacity:0;pointer-events:none}
.post-toc b{font:600 12px Inter,sans-serif;color:#8B94A3;margin-bottom:10px}
.post-toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid rgba(255,255,255,.08);font:500 13px/1.4 Inter,sans-serif;color:#8B94A3!important;text-decoration:none!important}
.post-toc a:hover{color:#CBD5E1!important}
.post-toc a.on{border-left-color:#3B82F6;color:#F1F5F9!important}
@media (min-width:1280px){.post-toc{display:flex}}
.post-body h2{scroll-margin-top:110px}
.keep-card{background:radial-gradient(circle at 95% 115%,rgba(59,130,246,.38),rgba(59,130,246,0) 60%),#0A0F1A!important;border:1px solid rgba(96,165,250,.16)!important;transition:transform .2s ease,border-color .2s ease}
.keep-card:hover{transform:translateY(-3px)!important;border-color:rgba(96,165,250,.4)!important}

/* Book pages: the cover in 3D beside the title, a ruled contents ledger, the companion as a card. */
@media (min-width:900px){
  .book-hero{display:grid!important;grid-template-columns:auto minmax(0,520px);grid-template-rows:auto auto auto 1fr;column-gap:72px;justify-content:center;align-content:center;text-align:left!important}
  .book-hero>*{grid-column:2;justify-self:start;margin-left:0!important;margin-right:0!important}
  .book-hero .book-cover-hero{grid-column:1;grid-row:1/span 4;align-self:center}
  .book-hero .book-eyebrow{align-self:end}
  .book-hero .book-ctas{align-self:start}
}
.book-cover-hero{transform:perspective(1400px) rotateY(-18deg) rotateX(4deg);box-shadow:30px 40px 70px rgba(2,6,23,.75),0 0 0 1px rgba(255,255,255,.06)!important;transition:transform .6s ease;border-radius:3px 6px 6px 3px}
.book-cover-hero:hover{transform:perspective(1400px) rotateY(-6deg) rotateX(2deg)}
.book-ctas{display:flex;flex-wrap:wrap;gap:10px;justify-content:inherit}
@media (max-width:899px){.book-ctas{justify-content:center}}
.book-cta-2{display:inline-block;border:1px solid rgba(255,255,255,.22);color:#F1F5F9!important;text-decoration:none!important;font-weight:600;font-size:15px;padding:14px 26px;border-radius:999px}
.book-cta-2:hover{border-color:rgba(96,165,250,.6)}
.book-body{counter-reset:ledger}
.book-body .body-section{counter-increment:ledger;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:8px;border-top:1px solid rgba(255,255,255,.1);padding-top:28px;margin-bottom:40px!important}
.book-body .body-section:last-child{border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:28px}
.book-body .body-section::before{content:counter(ledger,decimal-leading-zero);grid-row:1/span 9;font:700 14px/2.2 'DM Sans',sans-serif;color:#60A5FA}
.book-body .body-section>*{grid-column:2}
@media (max-width:600px){.book-body .body-section{grid-template-columns:1fr}.book-body .body-section::before{grid-row:auto;line-height:1;margin-bottom:10px}}
.companion-inner{border:1px solid rgba(96,165,250,.22);border-radius:16px;padding:32px;background:radial-gradient(circle at 0% 50%,rgba(59,130,246,.16),rgba(59,130,246,0) 55%),#0D1424}
.companion img{transform:perspective(900px) rotateY(-14deg);box-shadow:16px 22px 40px rgba(2,6,23,.7)!important}

@media (prefers-reduced-motion:reduce){.book-cover-hero,.art-card,.featured-card,.keep-card{transition:none}.book-cover-hero:hover{transform:perspective(1400px) rotateY(-18deg) rotateX(4deg)}}

/* ===== 25. Elevation, batch 3: product pages ===== */
/* The demo glows, a strip of true numbers sits under it, and the getting-started steps
   carry a static blue to green line from the first number to the last. */
.pr-top .demo{box-shadow:0 40px 100px rgba(2,6,23,.65),0 0 0 1px rgba(96,165,250,.06),0 0 80px rgba(59,130,246,.12)!important}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.pstats div{padding:22px 24px}
.pstats div+div{border-left:1px solid rgba(255,255,255,.08)}
.pstats b{display:block;font:700 40px/1 'DM Sans',sans-serif;color:#F1F5F9;letter-spacing:-.02em}
.pstats span{display:block;margin-top:8px;font-size:14px;line-height:1.5;color:#A3ACB9}
@media (max-width:700px){.pstats{grid-template-columns:1fr}.pstats div+div{border-left:0;border-top:1px solid rgba(255,255,255,.08)}.pstats div{padding:18px 4px}}
.steps.pflow li{--c:#3B82F6;--n:#309ED9}
.steps.pflow li:nth-child(2){--c:#309ED9;--n:#26A0BC}
.steps.pflow li:nth-child(3){--c:#26A0BC;--n:#1BAB9E}
.steps.pflow li:nth-child(4){--c:#1BAB9E;--n:#10B981}
.steps.pflow li:nth-child(5){--c:#10B981;--n:#10B981}
.steps.pflow li:last-child{--c:#10B981}
.steps.pflow li:nth-last-child(2){--n:#10B981}
.steps.pflow li::before{background:var(--c)!important;z-index:2}
.steps.pflow li::after{content:"";position:absolute;left:33px;top:46px;bottom:-30px;width:2px;background:linear-gradient(var(--c),var(--n));z-index:1;opacity:.7}
.steps.pflow li:last-child::after{display:none}

/* Questions: a search box that filters as you type, and the X-Ray ask at the foot of the rail. */
.faq-search{margin:0 0 36px;display:flex;flex-direction:column;gap:8px}
.faq-search label{font:600 13px Inter,sans-serif;color:#A3ACB9}
.faq-search input{width:100%;box-sizing:border-box;background:#0D1424;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:14px 16px;font:500 16px Inter,sans-serif;color:#F1F5F9}
.faq-search input:focus{outline:none;border-color:#3B82F6;box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.faq-search input::placeholder{color:#64748B}
.faq-none{margin:4px 0 0;font-size:15px;color:#A3ACB9}
.post-toc a[hidden]{display:none}
.post-toc a.toc-cta{margin-top:18px;border:0;padding:12px 16px;border-radius:999px;background:#2563EB;color:#fff!important;font:600 13px Inter,sans-serif;text-align:center}
.post-toc a.toc-cta:hover{background:#3B82F6}

/* X-Ray request: a 2-step bar on the form, and a blurred sample report that sharpens as you answer. */
.xr-steps{display:flex;align-items:center;gap:12px;margin:0 0 26px;font:600 13px Inter,sans-serif;color:#94A3B8}
.xr-steps div{display:flex;align-items:center;gap:8px;white-space:nowrap}
.xr-steps span{width:24px;height:24px;border-radius:50%;border:1.5px solid #CBD5E1;display:inline-flex;align-items:center;justify-content:center;font:700 12px 'DM Sans',sans-serif}
.xr-steps div.on{color:#0B1D3A}
.xr-steps div.on span{background:#3B82F6;border-color:#3B82F6;color:#fff}
.xr-steps div.on:last-child span{background:#10B981;border-color:#10B981}
.xr-steps i{flex:1;height:2px;border-radius:2px;background:#E2E8F0;position:relative;overflow:hidden}
.xr-steps i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#3B82F6,#10B981);transform:scaleX(.5);transform-origin:left;transition:transform .6s ease}
.xr-steps.done i::after{transform:scaleX(1)}
.xr-sample{margin:36px 0 0}
.xr-doc{--xr-blur:7px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#0D1424;padding:22px;box-shadow:0 30px 70px rgba(2,6,23,.55);filter:blur(var(--xr-blur));transition:filter .5s ease;user-select:none}
.xr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.xr-logo{font:700 15px 'DM Sans',sans-serif;color:#F1F5F9}
.xr-logo em{font-style:normal;color:#3B82F6}
.xr-tag{font:600 11px Inter,sans-serif;color:#60A5FA;border:1px solid rgba(96,165,250,.4);border-radius:999px;padding:3px 9px}
.xr-k{font:600 12px Inter,sans-serif;color:#8B94A3;margin:14px 0 8px}
.xr-bar{height:10px;border-radius:999px;background:#1E293B;overflow:hidden}
.xr-bar i{display:block;height:100%;background:linear-gradient(90deg,#3B82F6,#60A5FA)}
.xr-big{font:700 30px/1 'DM Sans',sans-serif;color:#F1F5F9;letter-spacing:.02em}
.xr-fixes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;counter-reset:xf}
.xr-fixes li{counter-increment:xf;display:grid;grid-template-columns:22px 1fr;gap:4px 8px;align-items:center}
.xr-fixes li::before{content:counter(xf);grid-row:1/span 2;font:700 12px 'DM Sans',sans-serif;color:#60A5FA}
.xr-fixes b{height:8px;border-radius:4px;background:#334155;width:78%}
.xr-fixes span{height:6px;border-radius:3px;background:#1E293B;width:56%}
.xr-fixes li:nth-child(2) b{width:64%}.xr-fixes li:nth-child(3) b{width:70%}.xr-fixes li:nth-child(4) b{width:52%}
.xr-sample figcaption{margin-top:12px;font-size:13px;line-height:1.5;color:#8B94A3}
@media (max-width:900px){.xr-sample{display:none}}
@media (prefers-reduced-motion:reduce){.xr-doc{transition:none}.xr-steps i::after{transition:none}}

/* Damon's page: portrait and name on the left, a first-person record on the right. */
.profile.pf{max-width:1080px;display:grid;grid-template-columns:320px minmax(0,1fr);gap:56px;align-items:start}
.pf-side{position:sticky;top:120px;display:flex;flex-direction:column}
.pf-photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:14px;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px rgba(2,6,23,.6);margin-bottom:22px}
.pf-side .eyebrow{align-self:flex-start;margin-bottom:10px}
.pf-side h1{font-size:36px!important;line-height:1.1;margin:0 0 6px}
.pf-side .lede{margin-bottom:0;font-size:15px;color:#A3ACB9}
.pf-say{font:700 28px/1.3 'DM Sans',sans-serif!important;color:#F8FAFC!important;margin:0 0 34px!important;letter-spacing:-.01em}
.pf-k{font:600 12px Inter,sans-serif;color:#8B94A3;margin-bottom:10px}
.pf-rec>div:not(.pf-k){display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;border-top:1px solid rgba(255,255,255,.1);padding:16px 0}
.pf-rec>div:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.pf-rec span{font:600 14px Inter,sans-serif;color:#60A5FA;padding-top:2px}
.pf-rec p{margin:0!important;font-size:16px!important;color:#E2E8F0!important}
.pf-main h2:first-of-type{margin-top:48px}
.pf-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.pf-ctas .cta{margin-top:0}
.pf-2{display:inline-block;border:1px solid rgba(255,255,255,.22);color:#F1F5F9!important;font-weight:600;font-size:15px;padding:14px 26px;border-radius:999px;text-decoration:none!important}
.pf-2:hover{border-color:rgba(96,165,250,.6)}
@media (max-width:900px){.profile.pf{grid-template-columns:1fr;gap:32px}.pf-side{position:static}.pf-photo{max-width:280px}.pf-say{font-size:23px!important}.pf-rec>div:not(.pf-k){grid-template-columns:84px minmax(0,1fr)}}

/* Article pages: one pull quote per article, and the self-test in a framed panel. Both lines come from the article itself. */
.post-body figure.pq{margin:44px 0;padding:6px 0 6px 28px;border-left:3px solid;border-image:linear-gradient(#3B82F6,#10B981) 1;position:relative}
.post-body figure.pq blockquote{margin:0}
.post-body figure.pq p{margin:0!important;font:700 clamp(24px,2.6vw,30px)/1.3 'DM Sans',sans-serif!important;color:#F8FAFC!important;letter-spacing:-.015em;text-wrap:balance}
.post-body aside.selftest{position:relative;margin:48px 0 40px;padding:28px 30px;border-radius:14px;background:rgba(59,130,246,.07);border:1px solid rgba(96,165,250,.25)}
.post-body aside.selftest::before,.post-body aside.selftest::after{content:"";position:absolute;width:18px;height:18px;border-color:#60A5FA;border-style:solid}
.post-body aside.selftest::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:14px 0 0 0}
.post-body aside.selftest::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 14px 0}
.post-body aside.selftest span{display:block;font:600 13px Inter,sans-serif;color:#60A5FA;margin-bottom:10px}
.post-body aside.selftest p{margin:0!important;font-size:19px!important;line-height:1.55!important;color:#F1F5F9!important}
@media (max-width:600px){.post-body figure.pq{padding-left:20px;margin:36px 0}.post-body aside.selftest{padding:22px}}