/* The product theme, shared by the pages built from the Claude Design
   prototypes (Trumis Business.dc.html, Governance Register.dc.html).
   Values are the prototypes' own; change them there first.

   This is a whole-page theme and deliberately does NOT load the marketing
   site's styles.css — pages using it own their chrome. */

/* Inter (SIL OFL), self-hosted. No unicode-range: the design uses → ✓ ■ ✕ ↓,
   which a latin subset would push back to a fallback font. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/inter-variable-latin.woff2) format('woff2');
}

:root {
  --canvas: #eef2f3;
  --page: #f7f9fa;
  --card: #ffffff;
  --ink: #152333;
  --body: #2b3d4c;
  --body-muted: #4f616d;
  --muted: #5b6b76;
  --rule: #dfe6ea;
  --teal: #087f83;
  --teal-dark: #066165;
  --teal-border: #bde0dc;
  --teal-soft: #e3f4f2;
  --teal-wash: #f0f8f7;
  --navy: #152333;
  --navy-lift: #1b2c3e;
  --navy-rule: #2f4257;
  --on-navy-muted: #b6c5cf;
  --on-navy-body: #c8d4dc;
  --on-navy-teal: #7fd6d2;
  --amber-fg: #6b4f0c;
  --amber-bg: #fff4d6;
  --amber-border: #f0ddb2;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal-dark); text-decoration: none; font-weight: 700; }
a:hover { color: #045053; }
button { font: inherit; }
img { max-width: 100%; }
section[id] { scroll-margin-top: 95px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute; left: -9999px;
  background: var(--card); color: var(--ink);
  padding: 10px 14px; border-radius: 8px; z-index: 40;
}
.skip:focus { left: 12px; top: 12px; }

/* Shell ------------------------------------------------------------------ */
.shell {
  max-width: 1500px; margin: 0 auto;
  background: var(--page);
  box-shadow: 0 18px 55px rgba(33, 54, 69, 0.08);
  min-height: 100vh;
}
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 32px;
  background: var(--card); border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.brand { display: flex; gap: 14px; align-items: center; color: var(--ink); }
.brand .lockup { display: flex; align-items: center; gap: 9px; }
.brand .mark { display: block; border-radius: 7px; }
.brand .word { font-size: 21px; font-weight: 800; letter-spacing: -0.035em; }
.brand .div { align-self: stretch; width: 1px; background: var(--rule); }
.brand .who { color: var(--muted); font-size: 13px; font-weight: 600; }
.top nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tab {
  border: 1px solid var(--rule); background: var(--card); color: var(--ink);
  border-radius: 8px; padding: 9px 13px; font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.tab:hover { background: var(--teal-wash); border-color: var(--teal-border); color: var(--ink); }
.tab[aria-current='page'] {
  background: var(--teal-wash); color: var(--teal-dark); border-color: var(--teal-border);
}
.navlink { color: var(--ink); font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 8px; }
.navlink:hover { color: var(--teal-dark); }
/* Current-page state for plain nav links. .tab already had one; without
   this the aria-current on Starter/Developers/Register was announced by
   screen readers but invisible on screen. */
.navlink[aria-current='page'] { color: var(--teal-dark); background: var(--teal-wash); }
.btn-dark {
  background: var(--navy); color: #fff; border-radius: 8px;
  padding: 10px 16px; font-size: 13px; font-weight: 700;
}
.btn-dark:hover { background: #0c1826; color: #fff; }

main { padding: 0 32px 48px; }
.wrap { max-width: 1180px; margin: 0 auto; }

/* Type ------------------------------------------------------------------- */
.eyebrow {
  color: var(--teal-dark); font-size: 11px; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
}
h1 { margin: 0; font-size: 50px; line-height: 1.06; letter-spacing: -0.045em; font-weight: 760; text-wrap: pretty; }
h2 { margin: 6px 0 0; font-size: 34px; letter-spacing: -0.04em; font-weight: 760; }
h3 { margin: 0; font-size: 16px; letter-spacing: -0.02em; font-weight: 700; }
.lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body-muted); max-width: 58ch; }
.sec { padding: 0 0 46px; }
.sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap; margin-bottom: 20px;
}
.sec-note { color: var(--muted); font-size: 12px; }

/* Cards ------------------------------------------------------------------ */
.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 14px; padding: 19px;
}
.card-navy {
  background: var(--navy); border: 1px solid var(--navy);
  border-radius: 14px; padding: 19px 22px; color: #fff;
}
.k {
  color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase;
}
.card-navy .k { color: var(--on-navy-muted); }
.grid { display: grid; gap: 13px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
/* The boards pair cards side by side; a bare .grid has no columns and stacked
   the two Starter price cards down the page. */
.g2 { grid-template-columns: repeat(2, 1fr); }
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.9fr); gap: 19px; align-items: start; }
.pill {
  display: inline-flex; align-items: center; border: 1px solid var(--teal-border);
  color: var(--teal-dark); background: var(--teal-soft); padding: 4px 9px;
  border-radius: 99px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.pill-warn { border-color: var(--amber-border); color: var(--amber-fg); background: var(--amber-bg); }
.tick { color: var(--teal); font-weight: 800; font-size: 13px; line-height: 1.4; }
.row-list { display: grid; gap: 11px; }
.row-list > div { display: flex; gap: 10px; align-items: flex-start; }
.detail { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--rule); }
.detail:last-child { border-bottom: none; padding-bottom: 0; }
.detail span { color: var(--muted); }
.detail strong { text-align: right; max-width: 22ch; }

/* Tables ----------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  padding: 12px 21px; color: var(--muted); background: var(--page);
  border-bottom: 1px solid var(--rule); font-size: 10px; letter-spacing: 0.06em;
  text-align: left; text-transform: uppercase;
}
td { padding: 14px 21px; border-bottom: 1px solid var(--rule); font-size: 12.5px; color: var(--body-muted); }
td.lbl { font-size: 13px; font-weight: 700; color: var(--ink); }

/* CTA + footer ----------------------------------------------------------- */
.cta {
  background: var(--navy); border-radius: 14px; padding: 40px; color: #fff;
  display: flex; justify-content: space-between; align-items: center;
  gap: 36px; flex-wrap: wrap;
}
.cta .word-ondark { font-size: 27px; font-weight: 800; letter-spacing: -0.035em; margin-bottom: 14px; display: block; }
.btn-light { background: #fff; color: var(--navy); border-radius: 10px; padding: 15px 26px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.btn-light:hover { background: var(--teal-soft); color: var(--navy); }
.btn-ghost { border: 1px solid var(--navy-rule); color: #fff; border-radius: 10px; padding: 15px 26px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.btn-ghost:hover { background: var(--navy-lift); color: #fff; }
.btn-teal { background: var(--teal); color: #fff; border-radius: 10px; padding: 14px 24px; font-size: 15px; font-weight: 700; }
.btn-teal:hover { background: #056b6e; color: #fff; }
.btn-plain {
  background: var(--card); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 10px; padding: 14px 24px; font-size: 15px; font-weight: 700;
}
.btn-plain:hover { background: var(--teal-wash); border-color: var(--teal-border); color: var(--ink); }

/* A card's closing call-to-action is a standalone target, not a link inside a
   sentence, so WCAG 2.2 asks for 24px. A 13px line box gives 19px. */
article > a[href] { padding: 3px 0; }

footer { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; padding: 26px 0 8px; border-top: 1px solid var(--rule); }
/* The overview and pricing pages put the footer inside main's 1180px column;
   the document pages hang it off .shell instead, where it was spanning the
   whole 1500px panel and running its rule past the content above it. Give it
   the column's measure and gutter of its own. */
.shell > footer { max-width: 1244px; margin: 0 auto; padding: 26px 32px 8px; }
footer .fine { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.7; max-width: 60ch; }
footer .legal { margin: 12px 0 0; color: var(--muted); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
footer .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* 6px of the 9px link gap moved inside the link: same optical rhythm, and the
   hit area clears WCAG 2.2's 24px minimum instead of sitting at 19px. */
footer .cols div { display: flex; flex-direction: column; gap: 3px; }
footer .cols a { color: var(--body-muted); font-size: 13px; font-weight: 600; padding: 3px 0; }
footer .cols a:hover { color: var(--teal-dark); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1080px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .split, .hero, .records-split { grid-template-columns: minmax(0, 1fr) !important; }
  h1 { font-size: 40px; }
}
@media (max-width: 720px) {
  main { padding: 0 18px 40px; }
  .top { padding: 14px 18px; }
  .g4, .g3, .g2 { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  .cta { padding: 26px; }
  footer { grid-template-columns: minmax(0, 1fr); }
  .shell > footer { padding: 26px 18px 8px; }
}

/* ---------------------------------------------------------------------------
   Document layer.

   The reference pages (/security/, /starter/, /developers/, …) were written
   against the cream design system and carry its class names and custom
   properties. Rather than rewrite that prose, this layer re-homes those
   names on the product theme, so every page shares one look.

   Legacy custom properties are aliased first — an undefined var() with no
   fallback invalidates the whole declaration, which would silently drop
   borders and backgrounds rather than fail loudly.
   ------------------------------------------------------------------------ */
:root {
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --serif: Inter, ui-sans-serif, -apple-system, sans-serif;
  --paper-lift: var(--page);
  --tint: var(--teal-soft);
  --khaki: var(--teal-border);
  --paper: var(--page);
}

/* The reading measure belongs to the prose, not to the page. Capping .doc
   itself pinned every document page to 689px at the left of the 1180px column
   and left 491px of it unused — including beside the API tables, the code
   samples and the Starter price cards, which are reference blocks rather than
   prose and read better on the full column. Cap the prose; let those span.

   The measure is in rem, not ch: `ch` resolves against each element's own
   font-size, so a 40px h1 and a 15px paragraph would get different measures.
   43rem is the 78ch this layer was written to, at the 14px body face. */
.doc { padding: 40px 0 8px; }
.doc > * { max-width: 43rem; }
.doc > pre,
.doc > .table-scroll,
.doc > .grid,
.doc > .pilot-grid,
.doc > #register-view { max-width: none; }
.doc h1 { font-size: 40px; line-height: 1.08; margin: 0 0 14px; }
.doc h2 { font-size: 24px; margin: 38px 0 10px; letter-spacing: -0.03em; }
.doc h3 { font-size: 16px; margin: 26px 0 8px; }
.doc p { font-size: 15px; line-height: 1.65; color: var(--body-muted); }
/* Same measure as the body prose — 68ch at 17px is wider than 78ch at 14px,
   and only .doc's old cap was hiding that. */
.doc .lead { font-size: 17px; line-height: 1.6; color: var(--body-muted); max-width: 43rem; }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { font-size: 15px; line-height: 1.65; color: var(--body-muted); margin: 8px 0; }
.doc li strong, .doc p strong { color: var(--ink); }
.doc a { color: var(--teal-dark); }

.crumb { color: var(--muted); font-size: 12px; margin: 0 0 14px; font-weight: 600; }
.crumb a { color: var(--muted); font-weight: 600; }
.crumb a:hover { color: var(--teal-dark); }

.updated { color: var(--muted); font-size: 12px; margin-top: 34px; }

/* Amber caveat block — the same treatment the compliance note uses on /. */
.notice {
  border-left: 3px solid #b67a08; background: var(--amber-bg);
  border-radius: 0 8px 8px 0; padding: 13px 16px;
  color: var(--amber-fg); font-size: 12.5px; line-height: 1.55; margin: 20px 0;
}
.notice a { color: var(--amber-fg); text-decoration: underline; }

code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--page); border: 1px solid var(--rule);
  border-radius: 5px; padding: 1px 5px; color: var(--ink);
}
pre {
  background: var(--navy); color: var(--on-navy-body);
  border-radius: 10px; padding: 16px 18px;
  font-family: var(--mono); font-size: 12px; line-height: 1.7;
  overflow-x: auto;
}
pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }

/* Reference tables. */
.spec { width: 100%; border-collapse: collapse; }
.spec th {
  padding: 10px 14px; background: var(--page); color: var(--muted);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; text-align: left;
}
.spec td {
  padding: 12px 14px; border-bottom: 1px solid var(--rule);
  font-size: 13px; color: var(--body-muted); vertical-align: top;
}
.spec td code { font-size: 12px; }
.table-scroll {
  overflow-x: auto; border: 1px solid var(--rule);
  border-radius: 14px; background: var(--card); margin: 18px 0;
}
.table-scroll .spec th:first-child, .table-scroll .spec td:first-child { padding-left: 21px; }
.table-scroll .spec th:last-child, .table-scroll .spec td:last-child { padding-right: 21px; }
.table-scroll .spec tr:last-child td { border-bottom: none; }

/* Buttons carried over from the cream pages. */
.btn {
  display: inline-block; background: var(--teal); color: #fff;
  border: 1px solid var(--teal); border-radius: 10px;
  padding: 12px 20px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.btn:hover { background: #056b6e; color: #fff; }
.btn.small { padding: 9px 14px; font-size: 13px; border-radius: 8px; }

.price { font-size: 31px; font-weight: 760; letter-spacing: -0.05em; color: var(--ink); }
.starter-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.starter-form input {
  flex: 1 1 260px; font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--card); color: var(--ink);
}
.hide-sm { display: inline; }
@media (max-width: 720px) { .hide-sm { display: none; } }
@media print { .no-print { display: none; } }