/* ============================================================
   Rine — ancillary pages (principals · organizations · agents ·
   builders · company · privacy · terms).

   Loaded AFTER biz.css and depends on it for tokens, fonts and the
   shared chrome (.nav, .footer, .btn, .eyebrow, .seal, .wrap).
   Nothing here redefines a token; nothing here edits biz.css.

   These pages are DOCUMENTS, not the landing. They do not carry the
   globe, so they do not carry the scroll controller either: there is
   zero JS on this surface. Two consequences are load-bearing —
     1. `.reveal` (opacity:0 until JS adds .is-visible) must never be
        used here, or the copy would be invisible.
     2. the body carries `light-bottom`, which is the same class the
        landing's scroll controller sets at rest. biz.css already knows
        how to paint the nav and the footer for a cream world under it,
        so we inherit both instead of restating them.
   ============================================================ */

/* ---- 0. Small-text tokens this surface adds ---------------------------
   biz.css's brand inks are tuned for the LANDING, where the brand colours carry
   headlines — WCAG's 3:1 large-text bar. These pages are documents: the same
   colours have to carry 11–13px labels, ordinals and table heads, where AA
   demands 4.5:1. The five values below are the small-text counterparts.

   They are NEW tokens for a NEW context. None of them redefines a biz.css
   token: --amber-ink (#C27A00, 3.06:1) keeps its one job — the large `h1`
   accent — and --teal-ink/--green/--ember keep theirs.

   Ratios are measured (alpha-composited) on the surface each one actually
   lands on, against the token it replaces:
     --amber-ink-sm  4.62:1 on --cream        (--amber-ink   3.06:1)
     --green-ink     4.59:1 on --cream,
                     5.18:1 on --card          (--green  3.68 / 4.15:1)
     --ember-300     5.97:1 on --panel-raised  (--ember       3.97:1)
                     over --ink-deep
     --text-quiet    4.78:1 on --cream         (--text-muted  3.13:1,
                                                --text-faint  2.25:1)
     --teal-wash     holds --teal-ink at 4.61:1 inside a code chip; the old
                     7 %-teal-on-cream wash darkened the fill and dropped the
                     same teal to 4.18:1.
   ---------------------------------------------------------------------- */

:root {
  --amber-ink-sm: #996000;
  --green-ink: #277A65;
  --ember-300: #EC7A51;
  --text-quiet: #6E6A60;
  --teal-wash: #EDF4F2;
}

/* ---- 1. Page shell ---------------------------------------------------- */

body.doc {
  background: var(--cream);
  color: var(--text-ink);
}
/* biz.css hangs the whole dark world off the fixed #globe-cream layer, which
   these pages do not have. Paint the shell instead so the sticky nav's
   blur has something behind it at every scroll offset. */
.doc .page { background: var(--cream); }

/* The bar itself — including the "Network" disclosure, which is script-free precisely so
   that these eight pages can have it — is inherited whole from biz.css. The one thing a
   document page has that the landing does not is a CURRENT PAGE, so that is all this owns.
   Three of the six destinations now live inside the panel, and a mark that only appears
   once the panel is open is no mark at all: the closed trigger carries it too. */
.doc .nav__links > a.is-here, .doc .navdrop__btn.is-here { color: var(--ink); font-weight: 600; }
.doc .nav__links > a.is-here::after {
  content: ""; display: block; height: 2px; margin-top: 5px;
  background: var(--teal-ink); border-radius: 2px;
}
/* Same rule under the trigger, drawn instead of laid out — the trigger is an inline-flex
   row, so a block ::after on it would land BESIDE the chevron, and one inside the label
   would grow the box and push the chevron off the word's centre line. Absolute costs no
   height, and `bottom: -7px` on a 2px bar puts its top edge 5px under the text, which is
   the margin the links use. */
.doc .navdrop__btn.is-here .navdrop__label { position: relative; }
.doc .navdrop__btn.is-here .navdrop__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  background: var(--teal-ink); border-radius: 2px;
}
/* Inside the panel the mark is the ink, not a rule: a 2px bar under a two-line row reads
   as a divider between the rows, not as "you are here". */
.doc .navdrop__menu a.is-here b { color: var(--teal-ink-deep); font-weight: 700; }

/* Mobile menu — <details>, so it opens on click AND on keyboard with no script. */
.navm { display: none; margin-left: auto; }
.navm > summary {
  list-style: none; cursor: pointer;
  border: 1px solid #C9C3B7; border-radius: 999px;
  padding: 9px 16px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
}
.navm > summary::-webkit-details-marker { display: none; }
.navm[open] > summary { border-color: var(--ink); }
.navm__sheet {
  position: absolute; left: 0; right: 0; top: var(--nav-h);
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  background: var(--cream); padding: 16px var(--pad) 24px;
}
.navm__sheet a { padding: 12px 4px; min-height: 44px; display: flex; align-items: center;
                 font-size: 16px; font-weight: 500; color: var(--ink); }
.navm__sheet a.pill { justify-content: center; margin-top: 14px; background: var(--ink);
                      color: var(--cream); padding: 13px 20px; border-radius: 999px; }

/* ---- 2. Hero ---------------------------------------------------------- */

.phero { padding: 84px var(--pad) 72px; }
.phero .wrap { max-width: 1000px; }
.phero .seal { width: 56px; height: 56px; margin-bottom: 24px; }
.phero .eyebrow { color: var(--text-chip); margin-bottom: 22px; }
.phero h1 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(38px, 4.8vw, 68px); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 26px; max-width: 16ch;
}
.phero h1 em { font-style: italic; color: var(--teal-ink); }
.phero h1 .amber { color: var(--amber-ink); }   /* #C27A00 — AA-large on cream */
.phero__sub { font-size: 19px; line-height: 1.62; color: var(--text-body); max-width: 62ch; margin: 0 0 34px; }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.phero__ctas .btn { font-size: 15.5px; padding: 15px 28px; }

/* ---- 3. Sections ------------------------------------------------------ */

.doc .sec { padding: 96px var(--pad); }
.doc .sec .eyebrow { color: var(--teal-ink); margin-bottom: 20px; }
.doc .sec h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08;
  letter-spacing: -0.018em; color: var(--ink); margin: 0 0 20px; max-width: 20ch;
}
.doc .sec h2 em { font-style: italic; color: var(--teal-ink); }
.doc .sec__sub { font-size: 18px; line-height: 1.62; color: var(--text-body); max-width: 68ch; margin: 0 0 44px; }
.sec--rule { border-top: 1px solid var(--hairline); }

/* The one dark band per page — the landing's night world, quoted once. It has no
   globe under it, so it brings its own surface.

   ⚠️ Specificity: biz.css's dark inks are `.sec--dark h2` (0,1,1), which the cream
   rules above (`.doc .sec h2`, 0,2,1) outrank — a dark heading on a dark band. Every
   ink the cream world claims must therefore be reclaimed here at `.doc .band …`
   (0,3,x) or higher. Do not shorten these selectors. */
.doc .band { background: var(--ink-deep); }
.doc .band .eyebrow { color: var(--teal-300); }
.doc .band h2 { color: var(--d-bright); }
.doc .band h2 em { color: var(--teal-300); }
.doc .band .sec__sub { color: var(--d-body); }
.doc .band .sec__sub a { color: var(--teal-300); }

/* ---- 4. Ledger rows — the landing's .lrow idiom, cream world ----------- */

.rows { border-top: 1px solid var(--hairline); }
.row {
  display: grid; grid-template-columns: 46px 1fr 200px; gap: 0 22px;
  align-items: start; padding: 26px 0; border-bottom: 1px solid var(--hairline);
}
/* Not decorative, and deliberately not aria-hidden: on builders.html the same
   slot carries `py` / `ts` / `ops` / `std`, which name the row. It is read, so
   it has to be legible — hence --text-quiet, not --text-faint. */
.row__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
          color: var(--text-quiet); padding-top: 4px; }
.row__body { min-width: 0; }
.row__name { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.row p { font-size: 15.5px; line-height: 1.6; color: var(--text-body); margin: 0; max-width: 62ch; }
.row p + p { margin-top: 8px; }
.row__tag { font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
            color: var(--teal-ink); justify-self: end; text-align: right; padding-top: 4px; }
.row--signal .row__tag { color: var(--amber-ink-sm); }
.doc .band .row, .doc .band .rows { border-color: var(--d-hairline); }
.doc .band .row__name { color: var(--d-bright); }
.doc .band .row__name a, .doc .band .row p a { color: var(--teal-300); }
.doc .band .row p { color: var(--d-body); }
.doc .band .row__n { color: var(--d-muted); }
.doc .band .row__tag { color: var(--teal-300); }
.doc .band .row--signal .row__tag { color: var(--amber-300); }

/* ---- 5. Cards — three-up, colour-deltaed like the landing's roles chain -- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--hairline);
  border-top: 2px solid var(--accent, var(--teal-500));
  border-radius: var(--r-card); padding: 26px 24px;
}
/* The accent is text (.card__k 11.5px, .card__more 13px) before it is a border,
   so each one is the small-text ink of its brand colour. */
.card--org   { --accent: var(--teal-ink); }
.card--prin  { --accent: var(--green-ink); }
.card--agent { --accent: var(--amber-ink-sm); }
.card__k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em;
           text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.card h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.card p { font-size: 15.5px; line-height: 1.58; color: var(--text-body); margin: 0 0 20px; flex: 1; }
.card__more { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.card:hover .card__more { text-decoration: underline; text-underline-offset: 3px; }

/* On the night band a white card reads as a component pasted in from another site.
   It takes the landing's raised-panel treatment instead, and the three accents move
   to their dark-world values — the cream teal/gold are near-invisible on ink. */
.doc .band .card { background: var(--panel-raised); border-color: var(--d-hairline);
                   border-top-color: var(--accent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.doc .band .card h3 { color: var(--d-bright); }
.doc .band .card p { color: var(--d-body); }
.doc .band .card--org   { --accent: var(--teal-300); }
.doc .band .card--prin  { --accent: var(--mint); }
.doc .band .card--agent { --accent: var(--amber-300); }

/* ---- 6. Mono artefacts: handles, chips, the namespace tree ------------- */

/* The fill is a tint of teal LIGHTER than cream, not a teal wash laid over it.
   A wash darkens the chip and takes --teal-ink (4.56:1 on bare cream) below AA;
   lifting the fill instead keeps the chip reading teal and the text at 4.61:1. */
.h-code { font-family: var(--font-mono); font-size: .93em; color: var(--teal-ink);
          background: var(--teal-wash); border-radius: 5px; padding: .1em .4em; }
.band .h-code { color: var(--teal-300); background: rgba(0, 224, 200, .1); }

/* Product-status chip. Used ONLY for capabilities that are not on the network —
   it is a label, never prose, so a reader can never mistake it for a shipped fact. */
.soon {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber-ink-sm); border: 1px solid var(--chip-border); background: var(--cream-raised);
  border-radius: var(--r-chip); padding: 5px 12px; white-space: nowrap;
}
.soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                background: var(--amber-ink-sm); flex: none; }
.band .soon { color: var(--amber-300); border-color: var(--d-hairline); background: var(--panel-raised); }
.band .soon::before { background: var(--amber-300); }

/* The namespace fan-out: one verified org, every handle under it. */
.tree { display: grid; gap: 14px; justify-items: start; }
.tree__root, .tree__leaf {
  font-family: var(--font-mono); border-radius: 10px; padding: 10px 16px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.tree__root { font-size: 15px; color: var(--ink); background: var(--cream-raised);
              border: 1px solid var(--teal-ink); }
.tree__leaves { display: grid; gap: 10px; padding-left: 26px; border-left: 1px dashed var(--chip-border); }
.tree__leaf { font-size: 14px; color: var(--text-chip); background: var(--card);
              border: 1px solid var(--hairline); }
.tree em { font-style: normal; font-size: 11.5px; letter-spacing: .06em; color: var(--green-ink); }

/* Sees / never-sees, the landing's central claim restated on the org page. */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pane { border: 1px solid var(--d-hairline); border-radius: var(--r-card);
        background: var(--panel-raised); padding: 24px; }
.pane h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
           text-transform: uppercase; margin: 0 0 18px; font-weight: 400; }
.pane--sees h3 { color: var(--mint); }
.pane--blind h3 { color: var(--ember-300); }
.pane ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pane li { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; color: var(--d-body);
           display: flex; justify-content: space-between; gap: 16px; }
.pane li b { font-weight: 400; color: var(--d-bright); }
.pane--sees li span { color: var(--mint); }
.pane--blind li span { color: var(--ember-300); }

/* ---- 7. Terminal (builders / agents) — biz.css owns .term; only the copy
       colouring for a static, non-animated transcript lives here. ---------- */

.term__body.doc-log { min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-log .l-cmd { color: var(--d-bright); }
.doc-log .l-cmd::before { content: "$ "; color: var(--teal-300); }
.doc-log .l-out { color: var(--d-muted); padding-left: 14px; }
.doc-log .l-ok { color: var(--mint); padding-left: 14px; }
.doc-log .l-gap { height: 12px; }

/* ---- 8. Closing CTA (cream, no viewport stage — that is the landing's job) */

.pcta { padding: 110px var(--pad) 120px; text-align: center; border-top: 1px solid var(--hairline); }
.pcta .wrap { max-width: 820px; }
.pcta .seal { width: 92px; height: 92px; margin: 0 auto 32px; }
.pcta h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 34px;
}
.pcta h2 em { font-style: italic; color: var(--teal-ink); }
.pcta__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.pcta__ctas .btn { font-size: 16px; padding: 16px 32px; }
.pcta__sub { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--text-body); }
.pcta__sub a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Inline prose links inside document sections need to be visibly links.
   (The dark-band counterparts live with the rest of the band overrides in §3/§4,
   where the specificity note explains why they must be scoped `.doc .band`.) */
.doc .sec p a, .doc .phero__sub a, .row p a { color: var(--teal-ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---- 9. Prose (privacy · terms) --------------------------------------- */

.legal { max-width: 780px; margin: 0 auto; padding: 40px var(--pad) 96px; }
.legal .back { display: inline-block; margin-bottom: 28px; font-family: var(--font-mono);
               font-size: 12px; color: var(--text-body); }
.legal .back:hover { color: var(--teal-ink); opacity: 1; }
.legal h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 50px);
            line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px; }
/* The legal TEXT is master's, byte for byte. Only its presentation lives here —
   and it is the one place on the surface a regulator reads, so nothing in it is
   allowed to sit below AA. Hence body ink for the subtitle and quiet ink (not
   muted) for the data-table heads and the version footer. */
.legal .subtitle { font-size: 14.5px; line-height: 1.65; color: var(--text-body); margin: 0 0 44px; }
.legal h2 { font-family: var(--font-sans); font-size: 19px; font-weight: 600; color: var(--ink);
            margin: 52px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.legal h3 { font-size: 15.5px; font-weight: 600; color: var(--ink); margin: 26px 0 8px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.72; color: var(--text-body); margin: 0 0 12px; }
.legal ul { padding-left: 22px; margin: 0 0 12px; }
.legal a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal table { width: 100%; border-collapse: collapse; margin: 20px 0 24px; font-size: 14.5px; }
.legal th, .legal td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--hairline);
                       vertical-align: top; color: var(--text-body); line-height: 1.6; }
.legal th { font-family: var(--font-mono); font-size: 11px; font-weight: 400; text-transform: uppercase;
            letter-spacing: .12em; color: var(--text-quiet); }
.legal td strong { color: var(--ink); }
.legal code { font-family: var(--font-mono); font-size: .88em; color: var(--teal-ink);
              background: var(--teal-wash); border-radius: 5px; padding: .12em .4em; }
.legal .note {
  background: var(--cream-raised); border: 1px solid var(--hairline);
  border-left: 3px solid var(--teal-ink); border-radius: 0 var(--r-panel) var(--r-panel) 0;
  padding: 18px 22px; margin: 22px 0; font-size: 15px; line-height: 1.7; color: var(--text-chip);
}
.legal .note--warn { border-left-color: var(--ember); background: rgba(193, 95, 60, 0.07); }
.legal .note strong { color: var(--ink); }
.legal footer { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--hairline);
                font-family: var(--font-mono); font-size: 12px; line-height: 1.9; color: var(--text-quiet); }
.legal footer a { color: var(--text-body); text-decoration: none; }
.legal footer a:hover { color: var(--teal-ink); }

/* ---- 10. Responsive --------------------------------------------------- */

/* Round 5: the shared footer grows from 4 columns to 5 (Product / Integrations /
   Network / Builders / Company). biz.css now owns the full .footer__grid track
   list — base (brand + 5) plus its @media(max-width:1024/768/480px) 3-col/2-col/
   1-col collapse — because it is shared chrome inherited from that file (see the
   file header). Nothing is restated here. */

/* biz.css owns the nav breakpoint — it hides `.nav__links` + `.nav__cta` at this same
   1024px, unscoped, for all nine pages (see its §7). All this file adds is the trigger
   these pages use instead of the landing's JS burger. Do not restate the hide here: two
   copies of one breakpoint is how the homepage and the sub-pages drifted apart in the
   first place. */
@media (max-width: 1024px) {
  .navm { display: block; }
}
@media (max-width: 900px) {
  .split2 { grid-template-columns: 1fr; }
  .row { grid-template-columns: 34px 1fr; gap: 4px 16px; padding: 22px 0; }
  .row__tag { grid-column: 2; justify-self: start; text-align: left; padding-top: 8px; }
}
@media (max-width: 768px) {
  .phero { padding: 56px var(--pad) 48px; }
  .phero h1 { max-width: none; }
  .doc .sec { padding: 68px var(--pad); }
  .pcta { padding: 80px var(--pad) 90px; }
  .legal { padding: 28px var(--pad) 72px; }
  .legal table, .legal thead, .legal tbody, .legal tr { display: block; }
  .legal th { display: none; }
  .legal td { display: block; padding: 4px 0; border: 0; }
  .legal tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
  .legal td:first-child { color: var(--ink); font-weight: 600; }
}
@media (max-width: 480px) {
  .phero__ctas, .pcta__ctas { flex-direction: column; align-items: stretch; }
  .tree__leaves { padding-left: 14px; }
  .term__body.doc-log { font-size: 11.5px; }
}