/* aurexionlabs.net
   The colour sets below use the same names and values as the app's themes (frontend/src/theme.css), so the
   site follows the app: switch <html data-theme> in src/partials/layout.html to the theme the app ships with.
   Default (no data-theme) = "Space Cowboy", the app's original look. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/IBMPlexSans-Regular.woff2') format('woff2'); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/IBMPlexSans-Medium.woff2') format('woff2'); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'); }

:root {
  --al-cyan: #00e5ff; --al-magenta: #ff2bd0; --al-gold: #ffae00; --al-green: #46c463;
  --surface-page: #0d0d0d; --surface-card: #1a1a1a; --surface-input: #2a2a2a; --border-input: #444444;
  --text-body: #ffffff; --text-subtle: #cccccc; --text-muted: #999999;
  --accent: var(--al-magenta); --accent-ink: #ffffff; --accent-hover: var(--al-cyan); --accent-hover-ink: #ffffff;
  --link: var(--al-cyan);
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 10px;
}
:root[data-theme="meridian"] {
  --al-cyan: oklch(0.74 0.085 195); --al-magenta: #f0565b; --al-gold: #e3a008; --al-green: #3fb950;
  --surface-page: oklch(0.175 0.012 250); --surface-card: oklch(0.215 0.013 250); --surface-input: oklch(0.195 0.012 250); --border-input: oklch(0.33 0.012 250);
  --text-body: oklch(0.94 0.008 250); --text-subtle: oklch(0.85 0.009 250); --text-muted: oklch(0.70 0.012 250);
  --accent: var(--al-cyan); --accent-ink: oklch(0.2 0.012 250); --accent-hover: oklch(0.80 0.075 195); --accent-hover-ink: oklch(0.2 0.012 250);
  --coral: oklch(0.70 0.16 25);
  --link: var(--text-body);
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 6px;
}
:root[data-theme="graphite"] {
  --al-cyan: #8b7cf6; --al-magenta: #ef6a6e; --al-gold: #e9b44c; --al-green: #4cc38a;
  --surface-page: #15161a; --surface-card: #1c1d22; --surface-input: #24262c; --border-input: #34363e;
  --text-body: #f2f2f4; --text-subtle: #b4b6bf; --text-muted: #868995;
  --accent: #8b7cf6; --accent-ink: #ffffff; --accent-hover: #a397f8; --accent-hover-ink: #ffffff;
  --link: #b4abfa;
  --radius: 10px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--surface-page); }
body {
  margin: 0;
  background: transparent;
  color: var(--text-body);
  font: 400 17px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text-body); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
h3 { font-size: 1.08rem; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
li { margin: .3em 0; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 720px; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; background: var(--surface-card); padding: 8px 12px; }
mark.todo { background: var(--al-gold); color: var(--surface-page); padding: 0 4px; font: 600 .8em var(--font-mono); }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--border-input); }
/* home-page starfield: a fixed canvas behind the page; the header, main and footer sit above it */
#starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.site-header, main, .site-footer { position: relative; z-index: 1; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.brand img { height: 44px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 4px 22px; flex-wrap: wrap; margin-left: auto; }
.site-nav a { color: var(--text-subtle); text-decoration: none; font-size: .95rem; padding: 4px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text-body); }
.site-nav a[aria-current="page"]:not(.nav-cta) { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 8px; text-decoration-thickness: 2px; }

/* ---------- buttons ---------- */
.btn, .nav-cta {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 10px 18px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
}
.btn-primary, .header-row .nav-cta { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover, .header-row .nav-cta:hover { background: var(--accent-hover); color: var(--accent-hover-ink); }
.btn-plain { color: var(--text-body); border-color: var(--border-input); }
.btn-plain:hover { border-color: var(--text-muted); color: var(--text-body); }
/* the CTA sits after the nav (not inside it): the 24px row gap minus 2px gives the 22px link-to-CTA gap it had */
.header-row .nav-cta { padding: 7px 14px; margin-left: -2px; }
.header-row .nav-cta[aria-current="page"] { color: var(--accent-ink); outline: 2px solid var(--text-body); outline-offset: 3px; }
/* keyboard focus on the current-page CTA: thicker ring in the focus colour, so it differs from the unfocused ring above */
.header-row .nav-cta[aria-current="page"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* ---------- home: hero ---------- */
.hero { position: relative; overflow: hidden; min-height: 640px; display: flex; align-items: center; padding: 72px 0;
  border-bottom: 1px solid var(--border-input); }
.hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: transparent; }
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-copy { max-width: 36rem; }
.spec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
.spec-grid h2 { margin: 0 0 12px; }
.lede { font-size: 1.15rem; color: var(--text-subtle); max-width: 65ch; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* the fact sheet: a plain specification, the way an engineering data sheet reads */
.spec { font: 400 .86rem/1.5 var(--font-sans); border-top: 1px solid var(--border-input); margin: 6px 0 0; }
.spec div { display: grid; grid-template-columns: 9.5em 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border-input); }
.spec dt { color: var(--text-muted); }
.spec dd { margin: 0; color: var(--text-body); font-variant-numeric: tabular-nums; }
.spec-caption { font: 400 .78rem var(--font-sans); color: var(--text-muted); margin-top: 10px; }

/* ---------- home: sections ---------- */
.section { padding: 64px 0; border-bottom: 1px solid var(--border-input); }
.section:last-of-type { border-bottom: 0; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 0 40px; }
.row + .row { margin-top: 56px; }
.row h2 { margin: 0; }
.row .body p:last-child, .row .body ul:last-child { margin-bottom: 0; }
.coming { font: 500 .78em var(--font-sans); color: var(--text-muted); border: 1px solid var(--border-input); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }

.founder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; }
.founder blockquote { margin: 0; font-size: 1.12rem; color: var(--text-subtle); max-width: 65ch; }
.founder blockquote p:first-child { color: var(--text-body); font-size: 1.3rem; line-height: 1.55; }
.signed { font-size: .95rem; color: var(--text-muted); }

.closing { padding: 72px 0 80px; }
.closing h2 { max-width: 22em; }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 40px 0 14px; align-items: stretch; }
.plan { position: relative; background: color-mix(in oklab, var(--surface-card) 82%, transparent); border: 1px solid var(--border-input); border-radius: var(--radius); padding: 28px 26px; }
.plans .plan h2 { margin: 0 0 6px; }
.plan-pick { border-color: var(--accent); box-shadow: none; }
.plan-flag { position: absolute; top: -12px; left: 24px; margin: 0; padding: 2px 10px; border-radius: 4px; background: var(--accent);
  color: var(--accent-ink); font: 600 .75rem var(--font-sans); letter-spacing: .04em; }
.plan-for { color: var(--text-subtle); margin: 0 0 20px; min-height: 3em; }
.price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.price .amount { font: 600 2.6rem/1 var(--font-sans); color: var(--text-body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price .per { color: var(--text-muted); }
.price-note { font: 400 .8rem var(--font-sans); color: var(--text-muted); margin: 8px 0 22px; }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding: 6px 0 6px 24px; color: var(--text-subtle); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .95em; width: 10px; height: 5px; border-left: 2px solid var(--text-subtle);
  border-bottom: 2px solid var(--text-subtle); transform: rotate(-45deg); }
.ticks.cols { columns: 2; column-gap: 40px; }
.ticks.cols li { break-inside: avoid; }
.plans-note { max-width: 65ch; margin-bottom: 40px; }

/* ---------- product screenshots ---------- */
.shot { grid-column: 1 / -1; margin: 32px 0 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border-input); border-radius: var(--radius); }
.shot figcaption { font: 400 .8rem/1.5 var(--font-sans); color: var(--text-muted); margin-top: 10px; max-width: 65ch; }
/* a detail capture under a row's heading: the heading and the capture share the
   heading's column, so the row's text runs down their right - and the wide
   capture below the pair spans both columns */
.split-main { min-width: 0; }
.row-detail { margin: 20px 0 0; min-width: 0; }
.row-detail img { display: block; width: 100%; height: auto; border: 1px solid var(--border-input);
  border-radius: var(--radius); }
.row-detail figcaption { font: 400 .78rem/1.55 var(--font-sans); color: var(--text-muted); margin-top: 10px; }
/* a real app capture beside a row's text: it opens out into the empty page margin on the left drawn on the
   page itself (captured on a see-through background), the way the home globe sits in the hero: no frame, no box */
.row-fig { --bleed: min(330px, calc(4.5em + 40px + max(0px, (100vw - 1080px) / 2))); margin: 20px 0 0 calc(-1 * var(--bleed));
  width: calc(100% + var(--bleed)); }
.row-fig img { display: block; width: 100%; height: auto; }
.row-fig figcaption { font: 400 .78rem/1.55 var(--font-sans); color: var(--text-muted); margin: -6px 0 0 var(--bleed); }
.row-fig.row-fig-boxed figcaption { margin-top: 12px; } /* app captures with a solid card edge */

/* ---------- inner pages ---------- */
.page { padding: 64px 0 80px; }
.page h1 { margin-bottom: .5em; }
.page h2 { margin-top: 1.8em; }
.page .lede { margin-bottom: 2em; }
.rules { list-style: none; padding: 0; counter-reset: rule; border-top: 1px solid var(--border-input); }
.rules li { counter-increment: rule; display: grid; grid-template-columns: 3em 1fr; padding: 18px 0; margin: 0; border-bottom: 1px solid var(--border-input); }
.rules li::before { content: counter(rule, decimal-leading-zero); font: 500 .85rem var(--font-mono); color: var(--text-muted); padding-top: .25em; }
.rules strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }

.faq { border-top: 1px solid var(--border-input); }
.faq details { border-bottom: 1px solid var(--border-input); padding: 4px 0; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.2rem/1 var(--font-mono); color: var(--text-muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 14px; color: var(--text-subtle); max-width: 44em; }

table.plain { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 8px 0 8px; }
table.plain th, table.plain td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border-input); vertical-align: top; }
table.plain th { color: var(--text-muted); font-weight: 500; font-size: .85rem; }
table.plain code { overflow-wrap: anywhere; }
table.plain td.n, table.plain th.n { text-align: right; font-family: var(--font-mono); }
table.plain s { color: var(--text-muted); }
.table-scroll { overflow-x: auto; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border-input); padding: 36px 0 44px; font-size: .88rem; color: var(--text-muted); }
.risk-line { max-width: 65ch; }
.site-footer a { color: var(--text-subtle); }
.footer-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.footer-row nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-row nav a { padding: 3px 0; }

/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  .hero { min-height: 0; display: block; padding: 300px 0 44px; }
  .hero-shade { background: transparent; }
  .spec-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .row .body { grid-column: 1; margin-top: 12px; }
  .row-detail { margin-top: 16px; }
  .founder { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 48px 0; }
  .plans { grid-template-columns: 1fr; gap: 28px; }
  .plan-for { min-height: 0; }
  .ticks.cols { columns: 1; }
  .shot { grid-column: 1 / -1; }
  .row-fig { --bleed: 0px; margin-top: 24px; }
}
/* 521-899 px and below: the header is a grid, with logo + CTA on row 1 and the nav landmark on row 2 (no absolute positioning) */
@media (max-width: 899px) {
  .header-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand cta" "nav nav"; align-items: center; gap: 12px 24px; }
  .brand { grid-area: brand; }
  .site-nav { grid-area: nav; width: 100%; }
  .header-row .nav-cta { grid-area: cta; justify-self: end; margin: 0; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .header-row { gap: 10px 14px; padding-top: 16px; }
  .brand img { height: clamp(26px, 9vw, 34px); }
  .site-nav { gap: 4px 14px; width: 100%; justify-content: space-between; }
  .header-row .nav-cta { padding: 9px 12px; }
  .site-nav a:not(.nav-cta) { padding: 10px 0; }
  .site-nav .nav-hide-sm { display: none; }
  .spec div { grid-template-columns: 1fr; gap: 2px; }
  .row, .founder { grid-template-columns: 1fr; }
  .row .body { grid-column: 1; }
}

/* ---------- alternative storefront: a sharper, more editorial expression of the existing brand ---------- */
.store-alternative {
  background: transparent;
}
.store-alternative .site-header {
  position: relative; z-index: 10; border-color: var(--border-input);
  background: transparent;
}
.store-alternative .header-row { min-height: 78px; }
.store-alternative .brand img { height: 38px; }
.store-alternative .site-nav { gap: 6px 27px; }
.store-alternative .site-nav a { font-size: .82rem; letter-spacing: .035em; text-transform: uppercase; }
.store-alternative .header-row .nav-cta { border-radius: 999px; padding: 9px 17px; }
.store-alternative .hero {
  min-height: 720px; isolation: isolate; border-color: var(--border-input);
  background: transparent;
}
.store-alternative .hero-shade {
  background: transparent;
}
.store-alternative .hero-inner { min-height: 576px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, .8fr); align-items: center; gap: 45px; }
.store-alternative .hero-copy { max-width: 39rem; }
.store-alternative h1 { font-size: clamp(2.75rem, 5vw, 4.55rem); letter-spacing: -0.02em; line-height: 1.08; max-width: 10.8ch; text-wrap: balance; }
.store-alternative .lede { margin-top: 23px; font-size: 1.13rem; line-height: 1.72; max-width: 33em; }
.store-alternative .actions { margin-top: 34px; gap: 14px; }
.store-alternative .btn { border-radius: 999px; padding: 12px 22px; }
.store-alternative .btn-plain { background: color-mix(in oklab, var(--text-body) 3.5%, transparent); border-color: var(--border-input); }
.hero-console { position: relative; align-self: center; margin-top: 42px; border: 1px solid var(--border-input); border-radius: 12px; overflow: hidden; background: color-mix(in oklab, var(--surface-card) 82%, transparent); }

.hero-console img { display: block; width: 100%; min-height: 260px; object-fit: cover; object-position: center; opacity: .94; filter: saturate(1.08) contrast(1.03); }
.store-alternative .section { border-color: var(--border-input); padding: 84px 0; }
.store-alternative .spec-band { padding: 78px 0; }
.store-alternative .spec-grid { gap: 90px; }
.store-alternative .spec-grid > div { padding-top: 12px; }
.store-alternative .spec-grid h2 { font-size: clamp(2rem, 3vw, 2.75rem); letter-spacing: -0.01em; }
.store-alternative .spec { border-top-color: var(--border-input); }
.store-alternative .spec div { padding: 12px 0; border-bottom-color: var(--border-input); }
.store-alternative .spec dd { color: var(--text-body); }
.store-alternative .owned { max-width: 880px; padding: 48px 42px 42px; border-color: var(--border-input); background: color-mix(in oklab, var(--surface-card) 82%, transparent); }
.store-alternative .owned h2 { font-size: clamp(1.8rem, 3vw, 2.55rem); letter-spacing: -0.01em; }
.store-alternative .row { grid-template-columns: minmax(0, .83fr) minmax(0, 1.45fr); gap: 0 48px; }
.store-alternative .row + .row { margin-top: 82px; }
.store-alternative .row h2 { font-size: clamp(1.7rem, 2.4vw, 2.3rem); letter-spacing: -0.01em; }
.store-alternative .row .body { color: var(--text-subtle); }
.store-alternative .shot { margin-top: 40px; }
.store-alternative .shot img { border-color: var(--border-input); border-radius: 12px; }
.store-alternative .founder { max-width: 930px; }
.store-alternative .founder blockquote p:first-child { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.55; letter-spacing: -0.01em; }
.store-alternative .closing { padding: 112px 0; }
.store-alternative .closing h2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.08; letter-spacing: -0.01em; }
.store-alternative .site-footer { border-color: var(--border-input); background: transparent; }
@media (max-width: 860px) {
  .store-alternative .hero { padding: 130px 0 56px; }
  .store-alternative .hero-inner { min-height: 0; grid-template-columns: 1fr; gap: 12px; }
  .store-alternative h1 { max-width: 12ch; }
  .hero-console { margin: 30px 0 0 6%; width: 94%; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
  .store-alternative .spec-grid { gap: 34px; }
  .store-alternative .row { grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
  .store-alternative .row + .row { margin-top: 60px; }
}
@media (max-width: 520px) {
  .store-alternative .header-row { min-height: 0; }
  .store-alternative .hero { padding-top: 88px; }
  .store-alternative h1 { font-size: clamp(2.45rem, 12vw, 3.3rem); }
  .store-alternative .lede { font-size: 1.02rem; }
  .hero-console { margin-left: 0; width: 100%; }
  .hero-console img { min-height: 166px; }
  .store-alternative .row { grid-template-columns: 1fr; gap: 0; }
  .store-alternative .section { padding: 60px 0; }
  .store-alternative .owned { padding: 34px 22px 30px; }
  .store-alternative .closing { padding: 78px 0; }
}

/* ---------- "your strategies belong to you" band (home) ---------- */
.owned-band { padding: 56px 0; }
.owned { max-width: 780px; margin: 0 auto; text-align: center; border: 1px solid var(--border-input); border-radius: 14px;
  padding: 34px 28px 30px; background: color-mix(in oklab, var(--surface-card) 82%, transparent); }
.owned-icon { color: var(--text-body); margin-bottom: 10px; }
.owned h2 { margin: 0 0 6px; }
.owned-sub { font-size: 1.15rem; color: var(--text-subtle); margin: 0 0 8px; }
.owned-tags { font-size: .92rem; color: var(--text-subtle); margin: 0; }
.owned hr { border: 0; border-top: 1px solid var(--border-input); margin: 22px 0 18px; }
.owned-lead { font-weight: 600; margin: 0 0 6px; }
.owned-body { color: var(--text-subtle); font-size: .95rem; margin: 0 auto; max-width: 40em; }
.page ol.steps > li { margin-bottom: .9em; }
.page .note { border-left: 1px solid var(--border-input); padding: 4px 0 4px 16px; color: var(--text-subtle); }
.page pre { background: var(--surface-input); border-radius: 6px; padding: 10px 14px; overflow-x: auto; font: .85rem/1.5 var(--font-mono); }

/* ---------- features page: plan tags, the three layers ---------- */
.tier { display: inline-block; font: 500 .74rem/1.4 var(--font-sans); border: 1px solid var(--border-input); border-radius: 4px; padding: 2px 8px; color: var(--text-subtle); white-space: nowrap; }
.row-tier { margin: 12px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.features-top { border-bottom: 1px solid var(--border-input); }
.layers { list-style: none; padding: 0; margin: 8px 0 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.layers li { margin: 0; position: relative; background: color-mix(in oklab, var(--surface-card) 82%, transparent); border: 1px solid var(--border-input); border-radius: var(--radius); padding: 22px 22px 18px; display: flex; flex-direction: column; }
.layers li + li::before { content: ""; position: absolute; left: -21px; top: 50%; width: 20px; border-top: 1px solid var(--border-input); }
.layers h2 { margin: 0 0 8px; font-size: 1.2rem; }
.layers p { margin: 0 0 10px; color: var(--text-subtle); font-size: .95rem; }
.layers p:last-child { margin: auto 0 0; padding-top: 6px; }
.layer-n { font: 500 .78rem var(--font-sans); color: var(--text-muted) !important; letter-spacing: .04em; }
.layer-eg { font: 400 .8rem/1.5 var(--font-sans); color: var(--text-muted) !important; }
.layers-note { margin: 0; }
.row .body h3 { margin: 1.4em 0 .4em; }
.row .body code, .page code { font: .88em var(--font-mono); background: var(--surface-input); padding: 1px 5px; border-radius: 4px; }
.page pre code { padding: 0; background: none; border: 0; border-radius: 0; }
table.compare td:not(:first-child), table.compare th:not(:first-child) { text-align: center; width: 17%; }
table.compare td.yes { color: var(--text-body); }
table.compare td.no { color: var(--text-muted); }
table.compare tr.group td { color: var(--text-muted); font: 500 .78rem var(--font-sans); letter-spacing: .04em; padding-top: 22px; }
@media (max-width: 860px) {
  .layers { grid-template-columns: 1fr; gap: 14px; }
  .layers li + li::before { left: 50%; top: -15px; width: 0; height: 14px; border-top: 0; border-left: 1px solid var(--border-input); }
}
@media (max-width: 520px) {
  table.compare { font-size: .85rem; }
  table.compare td:not(:first-child), table.compare th:not(:first-child) { width: 20%; }
}

/* ---------- reading measure and headings ---------- */
p, li, figcaption, .note { max-width: 65ch; }

/* ---------- buy dialog (pricing page) ---------- */
.buy-actions { margin-top: 22px; }
.buy-dialog { width: min(440px, calc(100vw - 32px)); max-width: none; padding: 28px; background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-input); border-radius: var(--radius); }
.buy-dialog::backdrop { background: rgb(0 0 0 / .6); }
.buy-dialog h2 { margin: 0 0 8px; }
.buy-plan { margin: 0 0 18px; color: var(--text-subtle); max-width: none; }
.buy-dialog label { display: grid; gap: 8px; }
.buy-dialog label.terms-tick { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; }
.buy-dialog .terms-tick input[type=checkbox] { flex-shrink: 0; width: auto; height: auto; margin: .3em 0 0; }
.buy-dialog input[type=email], .buy-dialog input[type=text] { font: inherit; color: var(--text-body); background: var(--surface-input); border: 1px solid var(--border-input); border-radius: calc(var(--radius) - 2px); padding: 10px 12px; width: 100%; box-sizing: border-box; }
.buy-error { color: var(--al-gold); margin: 14px 0 0; max-width: none; }
.buy-dialog .actions { margin-top: 22px; }
.buy-dialog .btn:disabled { opacity: .6; cursor: wait; }
h1, h2, h3 { text-wrap: balance; }