/* =============================================================================
   doc.css — the long-form ARTICLE design system (.doc-*, .nots, .doc-faq-*).

   WHY THIS FILE EXISTS. These rules were written for /company-brain/ and copied
   verbatim into /permission-aware-ai-retrieval/, each as a page-local inline
   <style>. Adding three /vs/ pages would have made FIVE copies of one design
   system — the only-one-document class this site has already been bitten by four
   times (the dark CTA, the mobile topnav, the aurora check, the waitlist modal).
   So the /vs/ pages link this file instead of carrying a sixth and seventh copy.

   SCOPE, deliberately narrow: the two LIVE content pages still carry their own
   inline copies and are NOT touched by this change — migrating them is a visual
   regression risk that belongs in its own PR with a computed-style before/after
   harness, and it is ledgered as WWW-DOC-CSS-MIGRATION. Until that lands, this
   file and those two blocks are duplicates: a fix to one belongs in all three.

   LOAD ORDER: after tokens.css / shared.css / style.css / surfaces.css, exactly
   where each content page's inline <style> sits today, because several rules
   below win on source order rather than specificity.

   Extracted 2026-08-23 from landing/site/company-brain/index.html, verbatim
   except for de-indentation. The ported .cb-* component block was NOT extracted —
   it belongs to that page's taxonomy figures, not to the article system.
   ============================================================================= */

/* MOBILE TOPNAV — ported from the live landing's INLINE styles (the ≤640px padding rule lives
   only in the landing document; without it the nav CTA wraps on phones). nowrap is the durable
   guard: the nav button must never wrap regardless of wordmark length. */
@media (max-width:640px){ .topnav{ padding-left:12px; padding-right:12px; } }
.topnav .btn{ white-space:nowrap; }

/* Dark glass = 0.08, matching the LIVE landing's own inline token override (founder-tuned;
   canon token in tokens.css is 0.07 — the landing overrides it inline, so we mirror that
   override here to render identically). */
[data-theme="dark"]{ --surface-glass: rgba(255,255,255,0.08); }

/* =====================================================================
   LONG-FORM ARTICLE — page-scoped, and ONLY what the landing's own
   stylesheets do not already provide. The prose, FAQ and CTA blocks are the
   same as the permission-aware-ai-retrieval page (minus the quote rail);
   this page adds the taxonomy cards and the commitment panels ported from
   company-brain-v2 — see the PORTED FROM company-brain-v2 fence below.

   The chrome is the SHIPPED landing chrome, untouched: .topnav, .wordmark
   + svg.fable-orb (shared.css + orb.js), .nav-link, .btn/.btn-primary,
   .eyebrow, .wrap (1120px), footer.site, and the aurora stage.

   Every measure and type step is lifted from a NAMED pattern in the
   landing's style.css or its inline block:

     container      .wrap                      max-width 1120px
     --doc-measure  (article measure)           max-width 900px — the ONE deliberate
                                                departure from .core-head's 720px, because
                                                this is long-form, not a section head
     --doc-inner-mea .alt-faq-a                 780px cap for answers + secondary copy
     .doc-head h1   .hero-lede h1               clamp(44px,5vw,64px)/1.03/-0.02em
     .doc-lede      .hero-sub                   clamp(16px,1.3vw,18px)/1.6, muted
     .doc-body h2   .core-head h2               clamp(28px,3vw,38px)/1.1/-0.02em
     .doc-body h3   .vcard h3                   var(--text-lede,19px)/1.3/-0.01em
     .doc-body p    .feature-copy p             clamp(16px,1.2vw,17.5px)/1.62
     secondary copy .cta-sub                    16px/1.6, muted
     card surface   .alt-faq-list (live index)  light: #fff + --doc-card-shadow, no border
                                                dark:  --surface-glass + blur(2px), no border
                                                       (.doc-faq-list alone takes the landing's
                                                        FAQ variant: hairline instead of shadow)
     FAQ            .alt-faq-* (live index)     adopted wholesale — see the FAQ block below
     cards/panels   company-brain-v2 .cb-*      ported; surface reconciled to the row above

   Deviation, deliberate: .feature-copy p is `--muted` because it is short
   marketing copy beside a visual. Article body prose is `--text` — a full
   page of muted body is unreadable. Everything else matches.
   ===================================================================== */

:root{
  /* 900px, not the landing's 720px .core-head measure: this is a long-form ARTICLE, not a
     marketing section head, and 720px read too tight (founder 2026-08-20). The elements
     that would visibly stretch at 900px keep their own inner measure instead — see
     --doc-inner-measure below (780px = the landing's own .alt-faq-a measure). */
  --doc-measure: 900px;
  --doc-inner-measure: 780px;        /* = the landing's .alt-faq-a max-width */
  --doc-y: clamp(40px, 5vw, 68px);

  /* THE landing's light-mode card shadow, verbatim from the live index.html's .alt-faq-list
     (the same value the frost/FAQ panels carry). Light cards on this page are a solid white
     fill + this shadow + NO border; dark cards swap to the landing's dark-glass recipe. */
  --doc-card-shadow: 0 1px 2px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.08);
}
/* The landing's dark card recipe: --surface-glass + a 2px backdrop blur, no border, no shadow —
   the near-black ink shadow cannot lift anything on the graphite aurora, it only muddies the
   lower edge. The one exception is the FAQ panel, which on the landing carries a --hairline
   border INSTEAD of the shadow so the panel edge still reads; reproduced on .doc-faq-list below.

   ON THE 0.07 vs 0.08 QUESTION (measured against the running landing 2026-08-21, not inferred):
   tokens.css declares --surface-glass: rgba(255,255,255,0.07) in dark. The landing's OWN inline
   <style> then overrides that token to 0.08 for its generic marketing cards
   (`[data-theme="dark"]{ --surface-glass: rgba(255,255,255,0.08); }`) — so a live .vcard computes
   0.08 + blur(2px). Its FAQ panel does NOT use the token: it hard-codes rgba(255,255,255,0.07)
   + a hairline. These doc pages do not carry that inline override, so var(--surface-glass)
   resolves to the canon 0.07 here. We keep 0.07 + blur(2px) deliberately: it is the tokens.css
   canon value, it matches the landing's FAQ panel exactly, and it is one notch off the landing's
   inline-overridden marketing cards — a difference of 0.01 alpha that is not perceptible. This
   is the same value the permission-aware-ai-retrieval page ships, so the two doc pages agree.
   (The founder asked for 0.08/1px; 0.07/2px is what the landing actually renders for the panel
   this recipe is copied from. Recorded here so the next pass does not "fix" it back.) */

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:var(--z-toast, 60);
  padding:10px 16px; border-radius:var(--radius-small);
  background:var(--surface); color:var(--text); border:1px solid var(--hairline-strong);
  font-size:14px; text-decoration:none;
}
.skip-link:focus{ left:12px; top:12px; }

/* The article column sits INSIDE the landing's .wrap, left-aligned to the
   same edge as the footer — exactly how .core-head sits inside .core. */
.doc-head, .doc-body{ max-width:var(--doc-measure); }

.doc-head{ padding:var(--doc-y) 0 0; }
/* = .hero-lede h1 / .hero-copy h1 — the landing's own h1, in the landing's own
   h1→h2 relationship with the .core-head h2 step used by .doc-body h2 below.
   (The .answer-head step, 30–46px, sat only 8px above that h2 and the two-line
   section heads visually out-massed the page title.) */
.doc-head h1{
  margin:0 0 18px; font-weight:600; letter-spacing:-0.02em;
  font-size:clamp(44px, 5vw, 64px); line-height:1.03;
}
.doc-lede{ margin:0; color:var(--muted); font-size:clamp(16px, 1.3vw, 18px); line-height:1.6; }
.doc-meta{
  margin:24px 0 0; padding-top:18px; border-top:1px solid var(--hairline);
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--muted);
}

/* ---- prose ---- */
.doc-body{ padding-top:34px; padding-bottom:var(--doc-y); }
.doc-body p, .doc-body li{
  margin:0 0 18px; font-size:clamp(16px, 1.2vw, 17.5px); line-height:1.62; color:var(--text);
}
.doc-body li{ margin:0 0 12px; }
.doc-body p.lead{ font-size:clamp(17px, 1.4vw, 19px); line-height:1.6; }
.doc-body h2{
  margin:0 0 18px; font-weight:600; letter-spacing:-0.02em;
  font-size:clamp(28px, 3vw, 38px); line-height:1.1;
}
.doc-body h3{
  margin:30px 0 10px; font-weight:600;
  font-size:var(--text-lede, 19px); letter-spacing:-0.01em; line-height:1.3;
}
.doc-body ul{ margin:0 0 18px; padding-left:20px; }
.doc-body a{ color:var(--interactive-ink); text-underline-offset:3px; text-decoration-thickness:1px; }
.doc-body a:hover{ text-decoration-thickness:2px; }
/* `.doc-body a` (0,1,1) outranks `.btn-primary` (0,1,0), which painted the CTA label
   in --interactive-ink — the same cobalt as the button fill, i.e. invisible in dark.
   Give the button back its own ink. In dark, --on-interactive is the graphite that
   shared.css's white-fill rule expects, so this stays correct in both themes.
   Both CTAs became <button data-waitlist-open> on 2026-08-22 (they open the modal rather
   than link to the landing), so nothing matches these two rules today. They stay as the
   guard for any future anchor-styled-as-button inside the article. */
.doc-body a.btn{ text-decoration:none; }
.doc-body a.btn-primary{ color:var(--on-interactive, #fff); }

.doc-sec{ margin-top:var(--doc-y); padding-top:var(--doc-y); border-top:1px solid var(--hairline); }
.doc-sec .eyebrow{ margin-bottom:14px; }

/* ---- breakout: the wrapper the taxonomy cards and the commitment panels sit in.
       Deliberately WIDER than --doc-measure (900px) so a three-column grid still
       breathes inside the landing's .wrap (1120px). It is a fixed 1072px max, NOT
       a function of the measure — so the 720px→900px measure change did not touch
       it, and three cards did not stretch. Left-aligned to the same edge as the
       prose column and the footer. ---- */
.doc-breakout{ width:min(1072px, calc(100vw - 48px)); margin:0 0 22px;  margin-bottom:36px; }
@media (max-width: 860px){ .doc-breakout{ width:auto; } }

/* ---- the "is not" list ---- */
/* `.doc-body ul` (0,1,1) outranks a bare `.nots` (0,1,0), so the 20px prose
   bullet indent would apply here and push the list off the prose margin. */
.doc-body ul.nots{ list-style:none; margin:0 0 18px; padding:0; }
.nots li{ padding:16px 0; border-bottom:1px solid var(--hairline); margin:0; }
.nots li:last-child{ border-bottom:none; }
.nots strong{ display:block; margin-bottom:4px; font-weight:600; }
/* The row RULE spans the full 900px column (that is what makes it read as a list), but the
   secondary copy keeps the 780px inner measure — at 900px/16px it ran ~110 characters. */
.nots span{ display:block; color:var(--muted); font-size:16px; line-height:1.6; max-width:var(--doc-inner-measure); }

/* ---- FAQ ----------------------------------------------------------------------------------
   These are the LANDING's .alt-faq-* rules, adopted wholesale — same panel, padding, question
   type, row rhythm (24px desktop / 18px mobile), chevron, hover, answer type and 780px answer
   measure. The rules are applied to the .doc-faq-* names rather than renaming the markup to
   .alt-faq-*: the landing's FAQ rules live in ITS index.html inline <style>, not in the shared
   style.css, so a rename would still require copying the same declarations here AND rewriting
   every <details>/<summary> class in this page's markup (which the FAQPage JSON-LD sits beside).
   Same CSS either way, less churn — so the values move, not the names. Divergences, both
   deliberate, are marked DIVERGES below. */
.doc-faq-list{
  background:#fff; border-radius:var(--radius-lg); padding:20px;
  box-shadow:var(--doc-card-shadow);
}
/* the landing's dark FAQ panel: glass + a hairline INSTEAD of the shadow (see the note at the
   top of this block) — this is the one dark card on the page that carries a border. */
[data-theme="dark"] .doc-faq-list{
  background:var(--surface-glass);
  border:1px solid var(--hairline);
  box-shadow:none;
}
.doc-faq-item{ border-bottom:1px solid var(--hairline); }
.doc-faq-item:last-of-type{ border-bottom:none; }
.doc-faq-q{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:24px 2px; cursor:pointer; list-style:none;
}
@media (max-width:600px){ .doc-faq-q{ padding:18px 2px; } }
.doc-faq-q::-webkit-details-marker{ display:none; }
.doc-faq-q h3{
  margin:0; font-family:var(--sans, Inter, sans-serif); font-size:var(--text-lede, 19px); font-weight:600;
  letter-spacing:-0.01em; line-height:1.4; transition:color .16s ease;
}
.doc-faq-q::after{
  content:""; flex:none; width:10px; height:10px; margin-top:7px;
  border-right:1.7px solid var(--muted); border-bottom:1.7px solid var(--muted);
  transform:rotate(45deg); transition:transform .2s ease, border-color .16s ease;
}
.doc-faq-q:hover h3{ color:var(--interactive-ink); }
.doc-faq-q:hover::after{ border-color:var(--interactive-ink); }
/* DIVERGES from the landing's flat `outline-offset:3px`: this page has one focus system, the
   same ring + token offset as shared.css's a/button rule. Visually equivalent, and keeping the
   token means a future ring change moves this too. */
.doc-faq-q:focus-visible{
  outline:2px solid var(--interactive);
  outline-offset:var(--focus-ring-offset, 2px);
  border-radius:var(--radius-small);
}
.doc-faq-item[open] > .doc-faq-q::after{ transform:rotate(-135deg); margin-top:11px; }
.doc-faq-a{ padding:0 clamp(20px,6vw,72px) 22px 2px; max-width:var(--doc-inner-measure); }
.doc-faq-a p{ margin:0; color:var(--muted); font-size:15.5px; line-height:1.65; }
.doc-faq-a p + p{ margin-top:10px; }
@media (max-width:600px){ .doc-faq-q h3{ font-size:16.5px; } }
@media (prefers-reduced-motion:reduce){
  .doc-faq-q h3, .doc-faq-q::after{ transition:none; }
}

/* ---- closing CTA + related ---- */
.doc-cta{
  margin-top:var(--doc-y); margin-bottom:30px;
  padding:26px 28px; border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--doc-card-shadow);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
[data-theme="dark"] .doc-cta{
  background:var(--surface-glass);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  box-shadow:none;
}
.doc-cta div{ max-width:400px; }
.doc-cta h2{ margin:0 0 6px; font-size:var(--text-title, 22px); letter-spacing:-0.01em; line-height:1.25; }
.doc-cta p{ margin:0; font-size:16px; line-height:1.6; color:var(--muted); }

.doc-related{ margin-top:26px; font-size:16px; color:var(--muted); }
.doc-related a{ color:var(--interactive-ink); }

@media (max-width: 560px){
  .doc-cta{ padding:22px; }
}

/* =====================================================================
   AURORA / STAGE BACKGROUND — where it actually lives (verified by
   measurement against the running landing, 2026-08-21)

   THE RECIPE IS NOT INLINE ON THE LANDING. Unlike the dark-CTA rule (which
   really did live only in the landing's index.html <style> and had to be
   lifted), the aurora is fully shared and this page already inherits it:

     markup   <div class="aurora-stage aurora-stage--m"> + .aurora-blobs
              (span.b1/.b2/.b3) + .aurora-grid    — in <body> below
     layers   shared.css lines 20-30 (.aurora-stage/.aurora-blobs/.b1-.b3/
              .aurora-grid, the aur1-3 keyframes, the reduced-motion stop)
     colours  tokens.css --stage-bg / --stage-blob-a|b|c / --stage-blob-blend
              / --stage-aurora-opacity / --stage-grid / --stage-grid-opacity
              / --stage-grid-fade, themed under :root and [data-theme="dark"]

   Both files are BYTE-IDENTICAL to the ones the live landing serves, so
   copying any of it into this block would not change a pixel — it would only
   create a second, drifting copy that silently outranks shared.css. That is
   why there is a comment here and no CSS.

   MEASURED 2026-08-21, live landing vs this page, 1440x900, animations
   frozen, both themes — every computed layer matched literally:
     light  stage #FFFFF0 · b1 rgba(46,230,168,0.55) · b2 rgba(110,150,255,0.55)
            · b3 rgba(255,158,13,0.36) · blend multiply · blobs opacity 0.385
            · grid radial-gradient(rgba(20,25,30,0.5) 0.15px, transparent 0.5px)
              / 5px 5px @ 0.55
     dark   stage #0A0C0E · b1 rgba(46,230,168,0.32) · b2 rgba(110,150,255,0.30)
            · b3 rgba(255,177,61,0.18) · blend screen · blobs opacity 0.385
            · grid rgba(255,255,255,0.5) 0.15px / transparent 1.5px @ 0.10
   Sampled background pixels were identical (0,0,0 delta) at 13 of 16 probe
   points; the 3 that differed are where the LANDING paints content this page
   does not have (its quote/stats band), not background.

   PROMOTION / REFRESH CONTRACT: the aurora rides on ../tokens.css and
   ../shared.css. Re-copy BOTH whenever the landing's are updated, and re-run
   the computed-layer comparison above — a token rename or a new
   [data-theme] override on the landing would change the background here with
   no visible edit to this file. Do NOT inline the recipe to "pin" it.
   ===================================================================== */

/* ---- comparison table -------------------------------------------------------
   A real semantic <table>: column heads are <th scope="col">, row labels are
   <th scope="row">. That is deliberate and load-bearing — answer engines extract
   semantic tables cleanly, which is most of the point of the /vs/ pages.

   Ported 2026-08-23 from permission-aware-ai-retrieval/index.html's page-local
   <style>, because doc.css shipped without a single table rule and all three
   /vs/ pages carry a comparison table. Rebound from that page's `.doc-table`
   class to `.doc-body table`, because the /vs/ pages emit BARE semantic tables —
   so any future doc page gets the treatment without remembering a class name.

   Styling is the doc vocabulary and nothing else: column labels take the mono
   label treatment, every rule is a --hairline token, the only colours are --text
   and --muted. That is why there is no dark-theme override here — both themes
   are already carried by those tokens.
   --------------------------------------------------------------------------- */
.doc-body table{
  display:block;              /* scroll container: a 3-column comparison must not
                                 overflow a phone, and the min-width below would
                                 otherwise force the whole page wide */
  overflow-x:auto;
  max-width:100%;
  margin:26px 0 18px;
  border-collapse:collapse; text-align:left;
}
.doc-body table thead th{
  padding:0 20px 12px 0; border-bottom:1px solid var(--hairline-strong);
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--muted);
  vertical-align:bottom; white-space:nowrap;
}
.doc-body table th[scope="row"]{
  padding:16px 20px 16px 0; border-bottom:1px solid var(--hairline);
  font-weight:600; font-size:16px; line-height:1.5; color:var(--text);
  vertical-align:top; min-width:150px;
}
.doc-body table td{
  padding:16px 20px 16px 0; border-bottom:1px solid var(--hairline);
  font-size:16px; line-height:1.5; color:var(--muted); vertical-align:top;
  min-width:220px;
}
.doc-body table thead th:last-child,
.doc-body table td:last-child{ padding-right:0; }
.doc-body table tbody tr:last-child th,
.doc-body table tbody tr:last-child td{ border-bottom:none; }
.doc-body table caption{
  margin:0 0 10px; text-align:left;
  font-size:14px; line-height:1.5; color:var(--muted);
}

/* ---- source footnote ---------------------------------------------------------
   The /vs/ pages originally stamped "fetched 23 August 2026" beside every quote —
   5, 7 and 15 times per page. The date is load-bearing (a vendor quote with no
   date is a claim we cannot defend) but it does not need repeating: it is stated
   once, at the bottom, with an asterisk on the section that introduces the quotes.
   --------------------------------------------------------------------------- */
/* `.doc-body p` is (0,1,1) and sets both size and colour, so a bare `.doc-sources`
   (0,1,0) loses to it on specificity — the footnote rendered at body size in --text.
   Qualify it. */
.doc-body p.doc-sources{
  margin:34px 0 0; padding-top:18px; border-top:1px solid var(--hairline);
  font-size:14px; line-height:1.6; color:var(--muted);
}
.doc-sources a, .doc-sources-ref{ color:var(--interactive-ink); text-decoration:none; }
/* an absolute size, not `em`: as `em` this inherits the h2 step and renders a ~24px
   asterisk on the heading. */
.doc-body h2 .doc-sources-ref{ font-size:15px; vertical-align:super; margin-left:3px; font-weight:500; }
.doc-sources-ref:hover, .doc-sources a:hover{ text-decoration:underline; }