/* The CHAINED family (owner 2026-11-07: "the pages need to be more visually appealing. make sure all the pages resemble each other"):
   every page but the homepage and /pricing, body.fam (revenue/site/sys.mjs family()). It carries the homepage's signature onto them:
   heavy General Sans heroes on a black stage lit by a violet glow, the homepage's chrome chain as a rail along the bottom of each hero
   (img.br-chain, broken on the pages about finding gaps), kickers in the homepage's style, one deep-violet band per page, and one
   card language (dark panel, violet hairline, soft lift) for the many card classes the pages grew. ds.css loads after this file, so
   rules carry html body.fam where they override its globals. Legal documents (sys-doc) keep a plain reading surface. */
html body.fam { --fam-bg: #0A0A0F; --fam-panel: linear-gradient(180deg, #15121F 0%, #100E18 100%); --fam-line: rgba(124,92,255,.28); --fam-grey: #ADA9BE;
  --fam-font: "General Sans", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sys-card: var(--fam-panel); --sys-line: var(--fam-line); }

/* ── the hero: heavy type on a lit black stage, the chain along its foot ── */
html body.fam main > section:first-child { position: relative; overflow: clip; padding-bottom: 0;
  background: radial-gradient(60% 70% at 85% 0%, rgba(106,59,255,.30), rgba(106,59,255,0) 70%), radial-gradient(40% 50% at 0% 100%, rgba(124,92,255,.12), rgba(124,92,255,0) 70%), var(--fam-bg); }
html body.fam main > section:first-child h1 { font-family: var(--fam-font); font-weight: 700; letter-spacing: -0.045em; line-height: .98; color: #fff; text-wrap: balance; }
html body.fam main > section:first-child h1 .tt-b, html body.fam main > section:first-child h1 .tt-b .sys-w { color: #8F8AA6; }
html body.fam:not(.sys-doc) main > section:first-child h1 { font-size: clamp(44px, 6.2vw, 92px); }
html body.fam .br-chain { display: block; width: 100%; height: auto; max-height: 64px; object-fit: cover; margin: clamp(40px, 5vw, 72px) 0 18px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.7)); pointer-events: none; user-select: none; }
@media (max-width: 900px) { html body.fam .br-chain { height: 34px; margin-top: 32px; } }   /* a phone crops the rail sideways: the links stay their size */

/* kickers (the pages' eyebrows) in the homepage's style */
html body.fam .eyebrow, html body.fam .d-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--fam-font); letter-spacing: .12em; text-transform: uppercase; color: #B9A3FF; }
html body.fam .eyebrow::before, html body.fam .d-eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; }

/* section headings share the hero's weight */
html body.fam main h2 { font-family: var(--fam-font); font-weight: 700; letter-spacing: -0.04em; }

/* ── one deep-violet band per page (the homepage's colour flip), never on legal documents or the report UI ── */
html body.fam:not(.sys-doc):not(.sys-sr):not(.check-page):not(.sf-page) main > section:nth-of-type(3) { --band: #1A0C3E;
  background: radial-gradient(70% 90% at 100% 0%, rgba(124,92,255,.32), rgba(124,92,255,0) 70%), linear-gradient(180deg, #1F0C4A 0%, #160935 100%); }

/* ── one card language ── */
html body.fam :is(.surface-2, .surface-3, .form-card, .chk-card, .ct-side-card, .sf-panel, .sf-opt-box, .pt-model, .d-card, .d-panel, .help-card, .ab-card, .sec-row, .sr-tablecard) {
  background: var(--fam-panel); border: 1px solid var(--fam-line); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 48px -28px rgba(0,0,0,.9); }
html body.fam :is(.sf-opt-box) { border-radius: 14px; }
/* product UI frames (the drawn app windows) take the violet hairline too */
html body.fam :is(.d-app, .d-frame, .sys-device, .dm-app) { border-color: var(--fam-line); box-shadow: 0 0 0 1px rgba(124,92,255,.12), 0 40px 80px -40px rgba(106,59,255,.45); }
/* the highlighted source row: violet, like the homepage (it was yellow) */
html body.fam :is(tr, .d-src-row, .d-row, .sr-row, [class*="-row"]).is-hot, html body.fam :is(tr, [class*="row"]).is-hit, html body.fam .d-src .is-hot { background: rgba(106,59,255,.16) !important; box-shadow: inset 3px 0 0 #7C5CFF !important; }
html body.fam :is(tr, [class*="row"]).is-hot *, html body.fam :is(tr, [class*="row"]).is-hit * { color: #E6DEFF !important; }

/* legal documents: plain and readable, brand type only */
html body.fam.sys-doc main > section:first-child { background: radial-gradient(50% 80% at 90% 0%, rgba(106,59,255,.18), rgba(106,59,255,0) 70%), var(--fam-bg); }
@media (max-width: 900px) { html body.fam .br-chain { margin-bottom: 0; } }
/* alternate bands a step lighter than the stage (the brand's #0F0D16 was too close to #0A0A0F to read as a band) */
html body.fam.sys main > section:nth-of-type(even):not(:nth-of-type(3)) { --band: #14121C; background-color: #14121C; }
/* the sample report's panels on the brand stage: the family panel, a step above #0A0A0F (they were #0F1012, nearly the stage) */
html body.fam.sys-sr :is(.surface-2, .surface-3, .sr-lead, .sr-tablecard, .sr-pillar, .sr-card) { background-color: #16131F !important; border-color: var(--fam-line) !important; }
/* /product's hero kicker is a .d-label: the same kicker style, in the first section only (labels elsewhere keep theirs) */
html body.fam main > section:first-of-type .d-label { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--fam-font); letter-spacing: .12em; text-transform: uppercase; color: #B9A3FF; }
html body.fam main > section:first-of-type .d-label::before { content: ""; width: 18px; height: 2px; background: currentColor; }