/* =============================================================
   FOBMO -- www.fobmo.com, "STRATA PLAN"
   The stylesheet for every page of the site: the four sheets --
   /, /govern/, /partners/ and /preview/ -- plus the two legal
   documents /privacy.html and /terms.html, and /404.html.

   The building is the interface. The page reads as a registered
   strata plan: levels, lots, risers and the lift core are drawn,
   access is marked on the drawing, and every change is a numbered
   revision, because nothing is ever erased from a registered plan.

   Every class is prefixed .db- so this file can never collide with
   /marketing.css. Nothing loads /marketing.css any more -- /404.html
   was the last page on it -- but the file stays, because a Render
   static publish is additive and deleting it unpublishes nothing.

   Contents
     1.  Faces
     2.  Tokens (light, then dark by redefinition only)
     3.  Reset and base
     4.  Sheet primitives: container, sheet, rule, scroll
     5.  Plan vocabulary: label, eyebrow, dimension, state
     6.  Title block
     7.  Header, brand, nav
     8.  Buttons
     9.  Section head
     10. Hero
     11. Drawn plan artefact + credential marks
     12. Spec strip (proof tiles)
     13. Split, card, pillar, annotation
     14. Riser (the lifecycle)
     15. Schedule (pricing)
     16. Matrix (what each price buys), and the tier blocks it
         becomes below 1024px
     17. Routes (persona tiles)
     18. Legend (trust strip)
     19. Notes (drawing notes / disclosure / FAQ)
     20. Stamp band (closing CTA)
     21. Footer
     22. Copy-email chip
     23. Contact modal
     24. Sheets 02-04 vocabulary (govern / partners / preview)
     25. Document sheet (privacy / terms)
     26. Reduced motion
   ============================================================= */


/* -------------------------------------------------------------
   1. Faces
   Self-hosted the same way /marketing.css self-hosts Geist:
   variable woff2 next to the stylesheet, licences alongside in
   fonts/OFL-Jost.txt and fonts/OFL-SplineSansMono.txt.
   Paths are relative to this file, so the stylesheet and fonts/
   move together without editing a URL.
   ------------------------------------------------------------- */

@font-face {
  font-family: "Jost";
  src: url("fonts/Jost-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Jost";
  src: url("fonts/Jost-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Spline Sans Mono";
  src: url("fonts/SplineSansMono-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Spline Sans Mono";
  src: url("fonts/SplineSansMono-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}


/* -------------------------------------------------------------
   2. Tokens

   Light is the base definition. Dark is the SAME token list
   redefined -- no component colour is ever declared for the first
   time inside a media query, so a component can be read once and
   trusted in both schemes.

   Two ways to get dark: the OS preference, or html[data-db-theme]
   set by hand. The attribute exists so a reviewer (or a screenshot)
   can force either scheme without a control in the chrome; there is
   no toggle UI, because a toggle would add a word of copy.
   ------------------------------------------------------------- */

:root {
  /* --- Strata Plan palette, light ------------------------------ */
  --db-paper: #F5F6F8;
  --db-surface: #FFFFFF;
  --db-grid: #E6E9EE;
  --db-grid-paper: #EDEFF3;
  --db-ink: #0F172A;
  --db-ink-2: #4A5568;
  --db-line: #CBD2DC;
  --db-cobalt: #1E40D8;
  --db-cobalt-tint: #E4E9FF;
  --db-rev: #D42A1F;
  /* Amber is only ever used at 10-13px -- state chips, caveats, warn
     values -- so it has to clear 4.5:1 as small text. #A35C00 is the
     lightest ochre that does it on all four light grounds it lands on:
     amber-tint 4.55, paper 4.75, surface 5.14, sunk 4.50. Do not
     lighten it back toward #C77700 (3.03-3.46, a fail on all four). */
  --db-amber: #A35C00;

  /* --- Derived, per scheme ------------------------------------- */
  --db-sunk: #EEF0F4;              /* recessed cell inside a sheet   */
  --db-backdrop: rgba(15, 23, 42, 0.42);
  --db-header-bg: rgba(255, 255, 255, 0.86);
  --db-hatch: rgba(15, 23, 42, 0.07);   /* lift core / riser fill    */
  --db-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  --db-shadow-lift: 0 12px 32px rgba(15, 23, 42, 0.14);
  --db-amber-tint: #FBF0DC;
  --db-rev-tint: #FBE6E4;

  /* --- Type ---------------------------------------------------- */
  --db-font: "Jost", "Futura", "Century Gothic", "Avenir Next",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --db-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular",
    "Menlo", "Consolas", "Liberation Mono", monospace;

  --db-t-xs: 11px;
  --db-t-sm: 13px;
  --db-t-base: 16px;
  --db-t-md: 17px;
  --db-t-lg: 19px;
  --db-t-xl: 22px;
  --db-t-2xl: 27px;
  --db-t-3xl: clamp(26px, 3.4vw, 34px);
  --db-t-4xl: clamp(32px, 5.6vw, 52px);

  /* --- Space, on the 24px drafting module ---------------------- */
  --db-s-1: 4px;
  --db-s-2: 8px;
  --db-s-3: 12px;
  --db-s-4: 16px;
  --db-s-5: 24px;
  --db-s-6: 32px;
  --db-s-7: 48px;
  --db-s-8: 64px;
  --db-s-9: 96px;

  /* --- Form ---------------------------------------------------- */
  --db-r: 2px;
  --db-r-2: 4px;
  --db-module: 24px;               /* the drafting grid pitch        */
  --db-max: 1180px;
  /* The longest line of running prose we let a reader hit. Applied only
     to the blocks that measured past 95 characters a line (the riser
     steps, the pillar and card bodies, the schedule and redirect notes,
     a flag note); everywhere else the column is already narrower than
     this and the cap is inert.
     NOT in `ch`. Jost's zero is far wider than its average letter, so a
     76ch riser column measured 101 characters a line -- a cap in `ch`
     here reads like a measure and is not one. `em` tracks the font size,
     which is what has to hold across the 16px and 13px blocks. */
  --db-measure: 40em;
  --db-pad: clamp(16px, 4vw, 40px);
  --db-header-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-db-theme="light"]) {
    --db-paper: #0A0F1F;
    --db-surface: #121A33;
    --db-grid: #172040;
    --db-grid-paper: #0F162C;
    --db-ink: #E8ECF8;
    --db-ink-2: #A5AFC9;
    --db-line: #2A3558;
    --db-cobalt: #8AA0FF;
    --db-cobalt-tint: #1A2A6B;
    --db-rev: #FF7168;
    --db-amber: #F2B54B;

    --db-sunk: #0E1529;
    --db-backdrop: rgba(2, 5, 14, 0.68);
    --db-header-bg: rgba(10, 15, 31, 0.86);
    --db-hatch: rgba(232, 236, 248, 0.07);
    --db-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    --db-shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.45);
    --db-amber-tint: #3A2A08;
    --db-rev-tint: #3B1512;
  }
}

/* Same list again for the manual override. Duplicated deliberately:
   the alternative is a colour that only exists inside a query. */
:root[data-db-theme="dark"] {
  --db-paper: #0A0F1F;
  --db-surface: #121A33;
  --db-grid: #172040;
  --db-grid-paper: #0F162C;
  --db-ink: #E8ECF8;
  --db-ink-2: #A5AFC9;
  --db-line: #2A3558;
  --db-cobalt: #8AA0FF;
  --db-cobalt-tint: #1A2A6B;
  --db-rev: #FF7168;
  --db-amber: #F2B54B;

  --db-sunk: #0E1529;
  --db-backdrop: rgba(2, 5, 14, 0.68);
  --db-header-bg: rgba(10, 15, 31, 0.86);
  --db-hatch: rgba(232, 236, 248, 0.07);
  --db-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  --db-shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.45);
  --db-amber-tint: #3A2A08;
  --db-rev-tint: #3B1512;
}


/* -------------------------------------------------------------
   3. Reset and base
   ------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--db-header-h) + 16px);
  color-scheme: light dark;
}

/* The paper, with the 24px drafting grid ruled onto it. Sheets sit
   on top of the grid, so the grid only shows in the margins -- the
   way a drawing sits on a gridded sheet.

   This is the only place --db-grid-paper is used, and it is the only
   grid that covers the whole viewport, which is why it is a quieter
   grey than the --db-grid that rules the drawn artefacts. Kept as a
   separate token because the two cannot be one value: on paper the
   grid has to recede, and inside a drawing it has to read. */
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--db-paper);
  background-image:
    linear-gradient(to right, var(--db-grid-paper) 1px, transparent 1px),
    linear-gradient(to bottom, var(--db-grid-paper) 1px, transparent 1px);
  background-size: var(--db-module) var(--db-module);
  background-position: 0 0;
  color: var(--db-ink);
  font-family: var(--db-font);
  font-size: var(--db-t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--db-ink);
  font-family: var(--db-font);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.012em;
}

p { margin: 0; color: var(--db-ink-2); }

a {
  color: var(--db-cobalt);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}

a:hover { text-decoration: underline; text-underline-offset: 3px; }

img, svg { max-width: 100%; display: block; }

button { font-family: inherit; cursor: pointer; }

strong { color: var(--db-ink); font-weight: 500; }

::selection { background: var(--db-cobalt-tint); color: var(--db-ink); }

:focus-visible {
  outline: 2px solid var(--db-cobalt);
  outline-offset: 2px;
  border-radius: var(--db-r);
}


/* -------------------------------------------------------------
   4. Sheet primitives
   ------------------------------------------------------------- */

/* .db-container -- the drawing's margin. One width, every sheet. */
.db-container {
  width: 100%;
  max-width: var(--db-max);
  margin: 0 auto;
  padding-inline: var(--db-pad);
}

/* .db-section -- vertical rhythm between title blocks. */
.db-section { padding-block: var(--db-s-8); }
.db-section--tight { padding-block: var(--db-s-6); }
.db-section--flush { padding-top: 0; }

@media (min-width: 768px) {
  .db-section { padding-block: var(--db-s-9); }
  .db-section--tight { padding-block: var(--db-s-7); }
}

/* .db-sheet -- a white drawing sheet: 1px linework, 2px corners,
   never a soft rounded card. The base surface for every panel. */
.db-sheet {
  background: var(--db-surface);
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  box-shadow: var(--db-shadow);
}

/* .db-sheet--ruled -- a sheet that keeps the drafting grid visible
   inside it, for panels that are meant to read as drawn-on. */
.db-sheet--ruled {
  background-color: var(--db-surface);
  background-image:
    linear-gradient(to right, var(--db-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--db-grid) 1px, transparent 1px);
  background-size: var(--db-module) var(--db-module);
}

/* .db-rule -- a 1px hairline with drafting ticks at each end. */
.db-rule {
  position: relative;
  height: 1px;
  background: var(--db-line);
  border: 0;
  margin: 0;
}
.db-rule::before,
.db-rule::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background: var(--db-line);
}
.db-rule::before { left: 0; }
.db-rule::after { right: 0; }

/* .db-scroll -- wide content (schedules, the matrix) scrolls in its
   own box. The body never scrolls sideways.

   `position: relative` is load-bearing, not decoration. Every
   visually-hidden .db-sr label inside the matrix is position:absolute,
   and an absolutely positioned box is only clipped by an ancestor that
   is in its containing-block chain. Without this the .db-sr spans
   escape the scroll box and drag the BODY 474px sideways at 390px,
   while the scroll box itself still measures correctly. Measured, not
   assumed: overflow:hidden on the wrap does not fix it; this does. */
.db-scroll {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--db-line) transparent;
}
.db-scroll::-webkit-scrollbar { height: 8px; }
.db-scroll::-webkit-scrollbar-track { background: var(--db-sunk); }
.db-scroll::-webkit-scrollbar-thumb {
  background: var(--db-line);
  border-radius: var(--db-r);
}

/* .db-sr -- visually hidden, still announced. */
.db-sr {
  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;
}

/* .db-grid-2 / .db-grid-3 -- plain column sets on the module. */
.db-grid-2,
.db-grid-3 {
  display: grid;
  gap: var(--db-s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
  .db-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .db-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Four-up, for a set of four peers. Never three-then-one: it goes
   1 / 2 / 4, so the last row is always full. */
.db-grid-4 {
  display: grid;
  gap: var(--db-s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) { .db-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .db-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* -------------------------------------------------------------
   5. Plan vocabulary
   ------------------------------------------------------------- */

/* .db-mono -- plan numbers, dates, revisions, identifiers. */
.db-mono {
  font-family: var(--db-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* .db-eyebrow -- the letterspaced uppercase small label. Free
   standing; use .db-label when it needs a box around it. */
.db-eyebrow {
  display: block;
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-ink-2);
}

/* An eyebrow that names a product rather than a section takes the
   accent, the way a keyed part is called out on a drawing. */
.db-eyebrow--cobalt { color: var(--db-cobalt); }

/* .db-label -- the boxed plan label. Every number and identifier on
   the drawing sits in one of these.
   Modifiers: --cobalt (marked access), --rev (a revision), --amber
   (a caution), --plain (no box, for dense rows). */
.db-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
  color: var(--db-ink-2);
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.db-label svg { width: 13px; height: 13px; flex: none; }

.db-label--cobalt {
  border-color: var(--db-cobalt);
  background: var(--db-cobalt-tint);
  color: var(--db-cobalt);
}
.db-label--rev {
  border-color: var(--db-rev);
  background: var(--db-rev-tint);
  color: var(--db-rev);
}
.db-label--amber {
  border-color: var(--db-amber);
  background: var(--db-amber-tint);
  color: var(--db-amber);
}
.db-label--plain {
  border-color: transparent;
  background: none;
  padding-inline: 0;
}

/* .db-label--wrap -- for a label carrying a whole sentence, as the
   hero eyebrow does. Boxed labels default to one line. */
.db-label--wrap {
  white-space: normal;
  text-transform: none;
  letter-spacing: 0.04em;
  align-items: flex-start;
  line-height: 1.5;
  padding: 6px 10px;
}
.db-label--wrap svg { margin-top: 2px; }

/* .db-dimension -- a dimension callout: the figure in mono with a
   ticked leader rule under it, the way a span is dimensioned. */
.db-dimension {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--db-s-4);
  padding: var(--db-s-4) var(--db-s-5);
  border: 1px solid var(--db-line);
  border-left: 3px solid var(--db-cobalt);
  border-radius: var(--db-r);
  background: var(--db-surface);
}
.db-dimension__figure {
  font-family: var(--db-mono);
  font-size: var(--db-t-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--db-cobalt);
  font-variant-numeric: tabular-nums;
}
.db-dimension__label {
  font-size: var(--db-t-sm);
  line-height: 1.5;
  color: var(--db-ink-2);
}

/* .db-state -- a state marked on the drawing (Active, In transit).
   Square, 1px, mono. Modifiers: --active, --muted, --pending, --info. */
.db-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
  color: var(--db-ink-2);
  font-family: var(--db-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.db-state::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: currentColor;
  flex: none;
}
.db-state--active { border-color: var(--db-cobalt); color: var(--db-cobalt); background: var(--db-cobalt-tint); }
.db-state--pending { border-color: var(--db-amber); color: var(--db-amber); background: var(--db-amber-tint); }
.db-state--info { border-color: var(--db-cobalt); color: var(--db-cobalt); background: var(--db-surface); }
.db-state--muted { color: var(--db-ink-2); background: var(--db-sunk); }


/* -------------------------------------------------------------
   6. Title block
   The strip of labelled cells along the bottom of an architectural
   drawing. Two uses:
     .db-titleblock            section head -- Detail / Title / Rev
     .db-titleblock--full      sheet foot   -- Project / Plan / Sheet /
                               Revision / Drawn / Date
   Cells are 1px-separated, never rounded, always mono values under
   letterspaced labels.
   ------------------------------------------------------------- */

/* The 1px rules between cells are drawn by a 1px grid gap over a line
   coloured background. A per-cell border cannot do it: the first cell
   of each wrapped row would keep a rule it should not have. */
.db-titleblock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1px;
  background: var(--db-line);
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  overflow: hidden;
}

.db-titleblock__cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  background: var(--db-surface);
  min-width: 0;
}

.db-titleblock__label {
  font-family: var(--db-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-ink-2);
  opacity: 0.85;
}

/* Values wrap, they do not ellipsise. A Title cell carries the
   section's own eyebrow copy, and truncating carried copy at 320px
   would hide a word the page is required to show. */
.db-titleblock__value {
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--db-ink);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The Title cell carries section copy verbatim, so it is allowed to
   set in the display face and to keep its own capitalisation. */
.db-titleblock__value--title {
  font-family: var(--db-font);
  font-size: var(--db-t-base);
  letter-spacing: 0.01em;
}

.db-titleblock__value--rev { color: var(--db-rev); }

/* Two-cell variant for a section with no eyebrow of its own. The
   middle cell is left empty rather than filled with invented copy. */
.db-titleblock--marks { grid-template-columns: auto minmax(0, 1fr) auto; }
.db-titleblock__spacer { min-height: 42px; }

.db-titleblock--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .db-titleblock--full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .db-titleblock--full { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}


/* -------------------------------------------------------------
   7. Header, brand, nav
   ------------------------------------------------------------- */

.db-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--db-header-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--db-line);
}

.db-header__inner {
  display: flex;
  align-items: center;
  gap: var(--db-s-4);
  min-height: var(--db-header-h);
}

.db-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--db-ink);
  text-decoration: none;
  flex: none;
}
.db-brand:hover { text-decoration: none; }
.db-brand__glyph { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.db-brand__word {
  font-size: var(--db-t-lg);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Nav: mono, uppercase, ruled. On narrow screens it moves to its own
   strip below the header rather than disappearing; the strip wraps, so
   every link is on screen at 320px. */
.db-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  min-width: 0;
}
.db-nav__link {
  display: inline-block;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: var(--db-r);
  color: var(--db-ink-2);
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.db-nav__link:hover {
  color: var(--db-cobalt);
  border-color: var(--db-line);
  text-decoration: none;
}
.db-nav__link[aria-current="page"] {
  color: var(--db-cobalt);
  border-color: var(--db-cobalt);
  background: var(--db-cobalt-tint);
}

.db-header__group {
  display: flex;
  align-items: center;
  gap: var(--db-s-3);
  flex: none;
}
.db-header__signin {
  color: var(--db-ink-2);
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.db-header__signin:hover { color: var(--db-cobalt); }

/* Below 900px the primary CTA and the Sign in link would crush the
   nav, so the nav moves to its own ruled strip under the header. */
.db-header__strip {
  border-top: 1px solid var(--db-line);
  background: var(--db-surface);
}
/* The strip WRAPS, it does not scroll. It used to scroll with the
   scrollbar hidden, which put Pricing 83px off the right edge at 320px
   with nothing on screen to say it was there -- measured, not guessed.
   Wrapping costs one extra row on the smallest phones and nothing at
   414px and up, where all four links already fit on one line. */
.db-header__strip .db-nav {
  /* -12px cancels the first link's own left padding, so the row starts
     flush with the container. Every link keeps the same padding, which
     is what makes the first link of the SECOND row line up under the
     first link of the first one; zeroing :first-child instead indents
     the wrapped row by 12px against a page ruled to the millimetre. */
  margin-left: -12px;
  gap: 0;
  flex-wrap: wrap;
}
.db-header__strip .db-nav__link {
  border: 0;
  border-right: 1px solid var(--db-line);
  border-radius: 0;
  padding: 9px 12px;
}

@media (min-width: 900px) {
  .db-header__strip { display: none; }
}
.db-header__inner .db-nav { display: none; }
@media (min-width: 900px) {
  .db-header__inner .db-nav { display: flex; }
}

/* The header CTA is a smaller instrument than the hero's. */
@media (max-width: 479px) {
  .db-header__signin { display: none; }
}


/* -------------------------------------------------------------
   8. Buttons
   Squared, 1px, mono label. --primary is a solid cobalt stamp,
   --secondary is drawn linework.
   ------------------------------------------------------------- */

.db-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
  color: var(--db-ink);
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, transform 120ms ease;
}
.db-btn:hover { text-decoration: none; }

.db-btn--primary {
  background: var(--db-cobalt);
  border-color: var(--db-cobalt);
  color: var(--db-surface);
}
.db-btn--primary:hover { filter: brightness(1.08); }
.db-btn--primary:active { transform: translateY(1px); }

.db-btn--secondary {
  background: var(--db-surface);
  border-color: var(--db-line);
  color: var(--db-ink);
}
.db-btn--secondary:hover { border-color: var(--db-cobalt); color: var(--db-cobalt); }
.db-btn--secondary:active { transform: translateY(1px); }

.db-btn--lg {
  padding: 13px 18px;
  font-size: var(--db-t-base);
}

.db-btn--block { width: 100%; }

.db-btn__icon { width: 15px; height: 15px; flex: none; }


/* -------------------------------------------------------------
   9. Section head
   ------------------------------------------------------------- */

.db-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--db-s-4);
  max-width: 76ch;
  margin-bottom: var(--db-s-6);
}
.db-section__title {
  font-size: var(--db-t-3xl);
  font-weight: 500;
  letter-spacing: -0.016em;
}
.db-section__lede {
  font-size: var(--db-t-md);
  line-height: 1.65;
  color: var(--db-ink-2);
  max-width: 72ch;
}

/* The title block is full width even where the head copy is not. */
.db-section > .db-container > .db-titleblock,
.db-section__block { margin-bottom: var(--db-s-5); }

/* The one action a section ends on, after its footnote. */
.db-section__after { margin-top: var(--db-s-5); }


/* -------------------------------------------------------------
   10. Hero
   ------------------------------------------------------------- */

.db-hero {
  padding-top: var(--db-s-6);
  padding-bottom: var(--db-s-8);
  border-bottom: 1px solid var(--db-line);
}
@media (min-width: 1024px) {
  .db-hero { padding-top: var(--db-s-7); padding-bottom: var(--db-s-9); }
}

/* .db-sheetline -- the sheet identifier above the headline: which
   sheet of the set you are reading. */
.db-sheetline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: var(--db-s-4);
  margin-bottom: var(--db-s-5);
  border-bottom: 1px solid var(--db-line);
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-ink-2);
}
.db-sheetline__sep { color: var(--db-line); }
.db-sheetline__now { color: var(--db-ink); }

.db-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--db-s-7);
  align-items: start;
}
@media (min-width: 1024px) {
  .db-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--db-s-8);
  }
}

.db-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--db-s-5);
  min-width: 0;
}

.db-hero__title {
  font-size: var(--db-t-4xl);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.024em;
  margin: 0;
}
/* The second line of the headline is subordinate, not italic: Jost
   ships no true italic here and a synthesised slant is not a
   typeface. Drawn instead as an annotation under the main title. */
.db-hero__title em {
  display: block;
  margin-top: var(--db-s-3);
  padding-left: var(--db-s-4);
  border-left: 2px solid var(--db-cobalt);
  font-style: normal;
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.006em;
  color: var(--db-ink-2);
}
/* The source headline carries a <br> that the annotation replaces. */
.db-hero__title br { display: none; }

.db-hero__subhead {
  font-size: var(--db-t-md);
  line-height: 1.7;
  color: var(--db-ink-2);
  max-width: 62ch;
}

.db-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--db-s-3);
}

/* .db-status -- "Govern is in production today." A live mark on the
   drawing, not a pill. */
.db-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid var(--db-cobalt);
  border-radius: var(--db-r);
  background: var(--db-cobalt-tint);
  color: var(--db-cobalt);
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.db-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--db-cobalt);
  flex: none;
}


/* -------------------------------------------------------------
   11. The drawn plan artefact, and access marked on it
   Used for the hero. .db-plan is the framed drawing; .db-cred is a
   credential marked against a lot.
   ------------------------------------------------------------- */

.db-plan {
  border: 1px solid var(--db-line);
  border-radius: var(--db-r-2);
  background: var(--db-surface);
  box-shadow: var(--db-shadow-lift);
  overflow: hidden;
}

.db-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--db-s-3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--db-line);
  background: var(--db-sunk);
}
.db-plan__stamp {
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--db-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The drawing itself: gridded, so the plan reads as drawn on paper. */
.db-plan__drawing {
  padding: var(--db-s-5) var(--db-s-5) var(--db-s-4);
  background-color: var(--db-surface);
  background-image:
    linear-gradient(to right, var(--db-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--db-grid) 1px, transparent 1px);
  background-size: var(--db-module) var(--db-module);
  border-bottom: 1px solid var(--db-line);
}
.db-plan__svg { width: 100%; height: auto; display: block; }

/* Sheets 02 and 03 use the frame for a drawing alone -- no head, no
   body -- so the drawing's own bottom rule would double the frame. */
.db-plan__drawing:last-child { border-bottom: 0; }

/* Drawing element colours, so the SVG carries no literal hex. */
.db-plan__wall { stroke: var(--db-ink); }
.db-plan__part { stroke: var(--db-line); }
.db-plan__fill { fill: var(--db-hatch); }
.db-plan__lot { fill: var(--db-cobalt-tint); stroke: var(--db-cobalt); }
.db-plan__mark { fill: var(--db-cobalt); }
.db-plan__text {
  fill: var(--db-ink-2);
  font-family: var(--db-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}
.db-plan__text--lot { fill: var(--db-cobalt); font-size: 11px; font-weight: 600; }

.db-plan__body { padding: var(--db-s-5); }
.db-plan__title {
  font-size: var(--db-t-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.db-plan__sub {
  margin-top: 4px;
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  color: var(--db-ink-2);
}
.db-plan__key {
  margin: var(--db-s-5) 0 var(--db-s-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--db-line);
}

/* .db-cred -- one credential marked on the plan. */
.db-cred-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.db-cred {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--db-s-3);
  padding: 11px 0;
  border-bottom: 1px dashed var(--db-line);
}
.db-cred:last-child { border-bottom: 0; padding-bottom: 0; }
.db-cred__mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-sunk);
  color: var(--db-cobalt);
  flex: none;
}
.db-cred__mark svg { width: 15px; height: 15px; }
.db-cred__body { min-width: 0; }
.db-cred__title {
  display: block;
  font-size: var(--db-t-sm);
  font-weight: 500;
  color: var(--db-ink);
}
.db-cred__meta {
  display: block;
  margin-top: 2px;
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  color: var(--db-ink-2);
}


/* -------------------------------------------------------------
   12. Spec strip (the four proof tiles)
   Reads as the specification cells of a drawing: one value per cell,
   its note under it, 1px between them, no shadow, no rounding.
   ------------------------------------------------------------- */

.db-specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--db-line);
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  overflow: hidden;
}
@media (min-width: 640px) { .db-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .db-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.db-spec {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--db-s-5);
  background: var(--db-surface);
  /* A rule of the palette: the accent marks the cell, it does not
     colour the type. */
  border-bottom: 2px solid transparent;
}
.db-spec--cobalt { border-bottom-color: var(--db-cobalt); }
.db-spec--amber { border-bottom-color: var(--db-amber); }
.db-spec--muted { border-bottom-color: var(--db-line); }

.db-spec__value {
  font-size: var(--db-t-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--db-ink);
  line-height: 1.1;
}
/* Numbers and identifiers set in the mono face, per the direction. */
.db-spec__value--mono {
  font-family: var(--db-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-t-xl);
  letter-spacing: -0.01em;
}
.db-spec__value--figure {
  font-family: var(--db-mono);
  font-variant-numeric: tabular-nums;
  font-size: 40px;
}
.db-spec__label {
  font-size: var(--db-t-sm);
  line-height: 1.55;
  color: var(--db-ink-2);
}


/* -------------------------------------------------------------
   13. Split, card, pillar, annotation
   ------------------------------------------------------------- */

.db-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--db-s-6);
  align-items: start;
}
@media (min-width: 960px) {
  .db-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--db-s-7); }
}

.db-split__copy {
  display: flex;
  flex-direction: column;
  gap: var(--db-s-5);
  max-width: 68ch;
}
.db-split__copy p {
  font-size: var(--db-t-md);
  line-height: 1.7;
}
.db-split__copy p.db-emph { color: var(--db-ink); font-weight: 500; }

/* .db-term -- a product name inside a paragraph. The source page set
   these two in the brand accent and the rest of its <strong> in plain
   ink; the distinction is the author's, so it survives the reskin. */
.db-term { color: var(--db-cobalt); font-weight: 500; }

/* .db-card -- a drawn panel: sheet, plus a labelled head. */
.db-card {
  display: flex;
  flex-direction: column;
  gap: var(--db-s-4);
  padding: var(--db-s-5);
  background: var(--db-surface);
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  box-shadow: var(--db-shadow);
}
.db-card--marked { border-top: 3px solid var(--db-cobalt); }
.db-card__title {
  font-size: var(--db-t-xl);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.db-card__lede {
  font-size: var(--db-t-sm);
  line-height: 1.65;
  color: var(--db-ink-2);
  max-width: var(--db-measure);
}
.db-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: var(--db-s-3);
  border-top: 1px solid var(--db-line);
  color: var(--db-cobalt);
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.db-card__cta svg { width: 14px; height: 14px; }
.db-card__cta:hover { text-decoration: none; }
.db-card__cta:hover svg { transform: translateX(3px); }
.db-card__cta svg { transition: transform 160ms ease; }

/* .db-steps -- a numbered set of plan references inside a card.
   Each line is an identifier plus its annotation. */
.db-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.db-steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--db-s-3);
  padding: 9px 0;
  border-bottom: 1px dashed var(--db-line);
  font-size: var(--db-t-sm);
  color: var(--db-ink-2);
}
.db-steps__item:last-child { border-bottom: 0; }
.db-steps__index {
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--db-cobalt);
}
.db-steps__item--later .db-steps__index { color: var(--db-ink-2); }

/* .db-pillar -- an annotated feature: an index, a title, a body,
   drawn with a leader down the left. Sheets 02-04 lean on this. */
.db-pillar {
  display: flex;
  flex-direction: column;
  gap: var(--db-s-3);
  padding-left: var(--db-s-4);
  border-left: 1px solid var(--db-line);
}
.db-pillar__index {
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-cobalt);
}
.db-pillar__title { font-size: var(--db-t-lg); font-weight: 500; }
.db-pillar__body {
  font-size: var(--db-t-sm);
  line-height: 1.65;
  color: var(--db-ink-2);
  max-width: var(--db-measure);
}
.db-pillar__caveat {
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  line-height: 1.6;
  color: var(--db-amber);
}


/* -------------------------------------------------------------
   14. Riser -- the lifecycle drawn as a service riser
   A vertical core with numbered levels off it. Every stop is a
   level; the core line is the shaft.
   ------------------------------------------------------------- */

.db-riser {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
  overflow: hidden;
}

.db-riser__level {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  border-top: 1px solid var(--db-line);
}
.db-riser__level:first-child { border-top: 0; }

@media (min-width: 720px) {
  .db-riser__level { grid-template-columns: 96px minmax(0, 1fr); }
}

/* The shaft: a gridded column carrying the level number. */
.db-riser__core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--db-s-5) var(--db-s-3);
  border-right: 1px solid var(--db-line);
  background-color: var(--db-sunk);
  background-image:
    linear-gradient(to right, var(--db-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--db-grid) 1px, transparent 1px);
  background-size: var(--db-module) var(--db-module);
}
.db-riser__number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--db-cobalt);
  border-radius: var(--db-r);
  background: var(--db-surface);
  color: var(--db-cobalt);
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* The shaft line continues through each level. */
.db-riser__shaft {
  flex: 1;
  width: 1px;
  min-height: 12px;
  background: var(--db-line);
}
.db-riser__level:last-child .db-riser__shaft { background: transparent; }

/* The stop the drawing is currently at. The accent fills the shaft and
   solidifies the level number; it never colours the running type. */
.db-riser__level--current .db-riser__core { background-color: var(--db-cobalt-tint); }
.db-riser__level--current .db-riser__number {
  background: var(--db-cobalt);
  border-color: var(--db-cobalt);
  color: var(--db-surface);
}

.db-riser__body {
  padding: var(--db-s-5);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.db-riser__title {
  font-size: var(--db-t-lg);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--db-ink);
}
.db-riser__text {
  font-size: var(--db-t-base);
  line-height: 1.7;
  color: var(--db-ink-2);
  max-width: var(--db-measure);
}


/* -------------------------------------------------------------
   15. Schedule -- pricing drawn as a schedule on the drawing
   A schedule has a head, a ruled table of rows, notes under it and
   the action it authorises at the foot.
   ------------------------------------------------------------- */

/* minmax(0, 1fr), not 1fr: a grid item defaults to min-width:auto, so
   the schedule's table would set the track to its own min-content width
   and push the whole body sideways at 320px. */
.db-schedules {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--db-s-5);
  align-items: stretch;
}
@media (min-width: 960px) {
  .db-schedules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.db-schedule {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--db-s-4);
  padding: var(--db-s-5);
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
  box-shadow: var(--db-shadow);
}
/* A sheet with only one schedule on it gives the schedule the page,
   but caps the measure so the table does not run to 1180px. */
.db-schedule--solo { max-width: 880px; }

.db-schedule__head { display: flex; flex-direction: column; gap: 10px; }

/* A ruled sub-head inside a schedule, set like the footer's column
   heads so a reader meets the same device twice. */
.db-schedule__sub {
  font-family: var(--db-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-ink-2);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--db-line);
  margin-bottom: var(--db-s-4);
}
.db-schedule__title {
  font-size: var(--db-t-xl);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.db-schedule__lede {
  font-size: var(--db-t-sm);
  line-height: 1.65;
  color: var(--db-ink-2);
}
/* Pinned to the foot so two side-by-side schedules line their
   actions up regardless of how much copy each carries. */
.db-schedule__foot { margin-top: auto; }
.db-schedule__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--db-s-3);
}
.db-schedule__note {
  font-size: var(--db-t-sm);
  line-height: 1.6;
  color: var(--db-ink-2);
  max-width: var(--db-measure);
}
/* The line under a schedule that points at another schedule. */
.db-schedule__fine {
  font-size: var(--db-t-sm);
  line-height: 1.6;
  color: var(--db-ink-2);
}

.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--db-t-sm);
}
.db-table th,
.db-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--db-line);
  vertical-align: top;
}
.db-table thead th {
  border-bottom: 1px solid var(--db-ink);
  background: var(--db-sunk);
  font-family: var(--db-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-ink-2);
  white-space: nowrap;
}
.db-table tbody tr:last-child td { border-bottom: 0; }
/* The row a schedule calls out. Tinted, not bolded: the mark belongs
   to the cell, and the figures in it stay the same weight as the rest. */
.db-table__row--marked td { background: var(--db-cobalt-tint); }
.db-table__name .db-label { margin-left: 8px; vertical-align: middle; }
/* No `overflow: hidden` here: this wrapper also carries .db-scroll, and
   the shorthand would reset overflow-x and kill the sideways scroll. */
.db-table__wrap {
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
}
.db-table__name { color: var(--db-ink); font-weight: 500; white-space: nowrap; }
.db-table__what { color: var(--db-ink-2); line-height: 1.5; min-width: 15ch; }
.db-table__price {
  font-family: var(--db-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--db-ink);
  text-align: right;
  white-space: nowrap;
}
.db-table th.db-table__price { text-align: right; }

/* A schedule is a price list, and a price list that scrolls sideways is
   a price nobody reads: at 320px the Govern table pushed its Lots and
   Price columns 241px past the right edge, and the partners table 342px.
   Below 640px the table gives up the five things that were making it
   wide -- fixed 12px side padding, a 15ch floor on the middle column, an
   unbreakable name cell, unbreakable column headings, and a one-line
   label chip inside a name cell -- so the price is on screen. The scroll
   box stays as the backstop; this only stops it being needed. */
@media (max-width: 639px) {
  .db-table th,
  .db-table td { padding: 10px 8px; }
  .db-table thead th { white-space: normal; }
  .db-table__name { white-space: normal; }
  .db-table__name .db-label {
    margin-left: 0;
    white-space: normal;
  }
  .db-table__what { min-width: 0; }
}
/* 8px still left the partners schedule 10px over the edge at 320px. */
@media (max-width: 399px) {
  .db-table th,
  .db-table td { padding-inline: 6px; }
}

/* .db-inclusions -- the ticked notes under a schedule. */
.db-inclusions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.db-inclusions li {
  position: relative;
  padding-left: 20px;
  font-size: var(--db-t-sm);
  line-height: 1.6;
  color: var(--db-ink-2);
}
.db-inclusions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--db-cobalt);
  background: var(--db-cobalt-tint);
  border-radius: 1px;
}

.db-footnote {
  margin-top: var(--db-s-5);
  padding-top: var(--db-s-4);
  border-top: 1px solid var(--db-line);
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  line-height: 1.7;
  color: var(--db-ink-2);
  max-width: 92ch;
}


/* -------------------------------------------------------------
   16. Matrix -- what each price buys
   A wide inclusion matrix. Scrolls in its own box; the row heading
   column stays pinned so the ticks never lose their row.
   ------------------------------------------------------------- */

.db-matrix__wrap {
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
}

/* separate, not collapse: a sticky <th> is not honoured inside a
   collapsed table in every engine. Spacing is 0 and every cell draws
   its own bottom and left rule, so it looks collapsed. */
.db-matrix {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--db-t-sm);
}
.db-matrix th,
.db-matrix td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--db-line);
  border-left: 1px solid var(--db-line);
  text-align: center;
  vertical-align: middle;
}
.db-matrix th:first-child,
.db-matrix td:first-child { border-left: 0; }

.db-matrix thead th {
  background: var(--db-sunk);
  border-bottom: 1px solid var(--db-ink);
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--db-ink);
  line-height: 1.4;
}
.db-matrix thead th span {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--db-ink-2);
  white-space: nowrap;
}

.db-matrix th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 300px;
  max-width: 380px;
  text-align: left;
  font-weight: 400;
  line-height: 1.5;
  color: var(--db-ink);
  background: var(--db-surface);
  border-right: 1px solid var(--db-line);
}

.db-matrix__group th {
  position: sticky;
  left: 0;
  background: var(--db-cobalt-tint);
  border-bottom: 1px solid var(--db-cobalt);
  text-align: left;
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-cobalt);
}

/* Marks: a filled square with a check for included, an open square
   with a diagonal for not. Drawn, not a glyph. */
.db-mark {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--db-line);
  border-radius: 1px;
  position: relative;
  vertical-align: middle;
}
.db-mark--in {
  border-color: var(--db-cobalt);
  background: var(--db-cobalt-tint);
}
.db-mark--in::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--db-cobalt);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.db-mark--out { background: var(--db-sunk); }
.db-mark--out::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--db-line);
  transform: rotate(-45deg);
  transform-origin: center;
}

.db-matrix__note {
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  line-height: 1.5;
  color: var(--db-ink-2);
}

.db-matrix__cta th,
.db-matrix__cta td {
  padding-block: var(--db-s-4);
  background: var(--db-sunk);
  border-bottom: 0;
}
.db-matrix__cta th[scope="row"] {
  background: var(--db-sunk);
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-ink-2);
}


/* --- The matrix below 1024px: one block per tier ---------------

   A four-column comparison is not a phone layout. MEASURED at HEAD
   with real mobile emulation (isMobile, touch, deviceScaleFactor 3):
   the table's intrinsic width is 918px and .db-container hands it
   viewport minus 82px, so the scroll box HIDES 632px at 320, 577px at
   375, 562px at 390, 213px at 768 and 37px at 960. It first fits at
   1000px. What a phone reader saw was the row-heading column, a value
   column with nothing in it, and the group headings cut mid-word.

   Why the launch sweep called this clean, because the next person to
   measure it will make the same mistake: it read
   `documentElement.scrollWidth - clientWidth` and got 0 at every
   width, and that number is CORRECT -- the page does not scroll
   sideways, .db-scroll contains it. The question that mattered is
   `el.scrollWidth - el.clientWidth` ON THE SCROLL BOX, which is a
   different number and was never taken. "No body overflow" and "no
   hidden content" are not the same claim.

   The usual suspect was ruled out by measurement rather than by
   argument: NO ancestor of any .db-scroll needs `min-width: 0`.
   Forcing `min-width: 0` onto every .db-scroll moved no geometry on
   any of 36 page/width combinations, while a `min-width: 900px`
   control moved all 36. .db-schedules already uses minmax(0, 1fr) and
   .db-schedule already carries min-width: 0, which is why.

   So the two presentations SWAP, they do not shrink: 1024, above the
   measured 1000px threshold and a breakpoint this sheet already uses.
   `display: none` rather than `aria-hidden` or `.db-sr`, so exactly
   one of them is in the accessibility tree at any width and a screen
   reader never meets the same boundary twice. The blocks carry every
   row of the matrix, including the ones a tier does NOT get. */

/* One, then three at 960 -- the same steps .db-grid-3 takes, and never
   two, so the last row is never a single orphan next to a gap. */
.db-tiers {
  display: grid;
  gap: var(--db-s-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 960px) {
  .db-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.db-tier {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--db-s-5);
  padding: var(--db-s-5);
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
  box-shadow: var(--db-shadow);
}

/* The tier name and its price, ruled off in ink the way the matrix
   rules its own head off from the body. */
.db-tier__head {
  display: flex;
  flex-direction: column;
  gap: var(--db-s-1);
  padding-bottom: var(--db-s-4);
  border-bottom: 1px solid var(--db-ink);
}
.db-tier__name {
  font-size: var(--db-t-xl);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.db-tier__price {
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  color: var(--db-ink-2);
}

/* The matrix's three group rows, kept verbatim: they are the argument
   the section is making, not decoration, and a phone reader loses it
   if the blocks reorganise into included/not-included instead. */
.db-tier__group {
  display: flex;
  flex-direction: column;
  gap: var(--db-s-3);
}
.db-tier__grouphead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--db-s-2);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--db-cobalt);
}
.db-tier__grouptitle {
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-cobalt);
}

.db-tier__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--db-s-3);
}

/* `position: relative` is load-bearing for the same reason it is on
   .db-scroll: each item carries a visually-hidden .db-sr status, and
   an absolutely positioned box is only contained by an ancestor in its
   containing-block chain. */
.db-tier__item {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: var(--db-s-1) var(--db-s-2);
  font-size: var(--db-t-sm);
  line-height: 1.5;
}
.db-tier__item .db-mark { margin-top: 2px; }
.db-tier__item--out .db-tier__label { color: var(--db-ink-2); }
/* The note cell carries no mark on the matrix either, so it carries
   none here. The mark track is left EMPTY rather than collapsed, so
   the note's text still starts on the same rule as every other label
   in the list; collapsing it moved this one row 24px left of its
   neighbours, which read as a mistake rather than as a distinction. */
.db-tier__item .db-tier__label,
.db-tier__item .db-tier__chip { grid-column: 2; }
.db-tier__item .db-tier__chip { justify-self: start; }

/* The chip says in words what the mark says as a glyph. On a phone a
   16px tick against a 16px struck square is the only thing between
   "you get this" and "you do not", and that is not enough to hang a
   price decision on. It sits on the group head where a group is
   uniform for this tier, and on the item where the group is mixed --
   which happens exactly once, on Govern's fob commerce. */
.db-tier__chip {
  flex: none;
  font-family: var(--db-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-sunk);
  color: var(--db-ink-2);
  white-space: nowrap;
}
.db-tier__chip--in {
  border-color: var(--db-cobalt);
  background: var(--db-cobalt-tint);
  color: var(--db-cobalt);
}
/* A note is a sentence, not a status: it wraps, and it is not shouted. */
.db-tier__chip--note {
  white-space: normal;
  text-transform: none;
  letter-spacing: 0.04em;
}

.db-tier__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--db-s-3);
  padding-top: var(--db-s-4);
  border-top: 1px solid var(--db-line);
}
.db-tier__start {
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-ink-2);
}

/* THE SWAP ITSELF, and it goes LAST on purpose. `.db-tiers { display:
   grid }` above has the same specificity as `.db-tiers { display: none }`,
   so whichever is written later wins. Written first, the swap was inert
   at 1024 and up and the page carried BOTH presentations -- which reads
   as a duplicated section, not as a broken one, so nothing about it
   looks like a bug. Do not move these two blocks up. */
@media (max-width: 1023px) {
  .db-matrix__wrap { display: none; }
}
@media (min-width: 1024px) {
  .db-tiers { display: none; }
}


/* -------------------------------------------------------------
   17. Routes -- the persona tiles, drawn as lot entries
   ------------------------------------------------------------- */

.db-route {
  display: flex;
  flex-direction: column;
  gap: var(--db-s-4);
  padding: var(--db-s-5);
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
  box-shadow: var(--db-shadow);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease,
    transform 160ms ease;
}
.db-route:hover {
  text-decoration: none;
  border-color: var(--db-cobalt);
  box-shadow: var(--db-shadow-lift);
  transform: translateY(-2px);
}
.db-route__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--db-s-3);
  padding-bottom: var(--db-s-3);
  border-bottom: 1px solid var(--db-line);
}
.db-route__glyph {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--db-cobalt);
  border-radius: var(--db-r);
  background: var(--db-cobalt-tint);
  color: var(--db-cobalt);
  flex: none;
}
.db-route__glyph svg { width: 17px; height: 17px; }
.db-route__title { display: block; font-size: var(--db-t-lg); font-weight: 500; }
.db-route__body { margin-top: 6px; }
.db-route__body {
  font-size: var(--db-t-sm);
  line-height: 1.65;
  color: var(--db-ink-2);
  max-width: var(--db-measure);
}
.db-route__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: var(--db-s-3);
  border-top: 1px solid var(--db-line);
  color: var(--db-cobalt);
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.db-route__cta svg { width: 14px; height: 14px; transition: transform 160ms ease; }
.db-route:hover .db-route__cta svg { transform: translateX(3px); }


/* -------------------------------------------------------------
   18. Legend -- the trust strip, drawn as a drawing legend
   ------------------------------------------------------------- */

.db-legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--db-line);
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  overflow: hidden;
}
@media (min-width: 640px) { .db-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .db-legend { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* The grid's own --db-line background is what draws the 1px rules between
   cells, so a cell with NO item in it renders as a solid grey block --
   which is what five items in two columns did from 640px to 1079px. An odd
   last item takes the whole row instead. Bounded at 1079px on purpose: at
   1080px the five columns fit exactly and a spanning item would swallow
   the row. */
@media (min-width: 640px) and (max-width: 1079px) {
  .db-legend__item:nth-child(odd):last-child { grid-column: 1 / -1; }
}

.db-legend__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px var(--db-s-4);
  background: var(--db-surface);
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--db-ink-2);
}
.db-legend__icon {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
  color: var(--db-cobalt);
}


/* -------------------------------------------------------------
   19. Notes -- drawing notes. The home page has none; sheets 02-04
   use this for roadmap notes and any FAQ. Numbered, because notes
   on a drawing are referenced by number.
   ------------------------------------------------------------- */

.db-notes {
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
  padding: var(--db-s-5);
}
.db-notes__title {
  font-size: var(--db-t-lg);
  font-weight: 500;
  padding-bottom: var(--db-s-3);
  border-bottom: 1px solid var(--db-line);
  margin-bottom: var(--db-s-4);
}
.db-notes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: db-note;
  display: flex;
  flex-direction: column;
}
.db-notes__list > li {
  counter-increment: db-note;
  position: relative;
  padding: 12px 0 12px 38px;
  border-bottom: 1px dashed var(--db-line);
  font-size: var(--db-t-sm);
  line-height: 1.65;
  color: var(--db-ink-2);
}
.db-notes__list > li:last-child { border-bottom: 0; padding-bottom: 0; }
/* The number is positioned, not a grid track. A note is a sentence that
   opens with a bolded phrase, so its <li> holds MIXED inline content --
   a <strong> plus a bare text node. In a grid each of those becomes its
   own item and the sentence breaks into one word per line, in a 34px
   column. Measured on sheet 03, which is the first page to use this. */
.db-notes__list > li::before {
  content: counter(db-note, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--db-cobalt);
}
.db-notes__foot {
  margin-top: var(--db-s-4);
  padding-top: var(--db-s-4);
  border-top: 1px solid var(--db-line);
  font-size: var(--db-t-sm);
  line-height: 1.65;
}


/* -------------------------------------------------------------
   20. Stamp band -- the closing CTA, drawn as the approval stamp
   ------------------------------------------------------------- */

.db-stamp {
  position: relative;
  padding: var(--db-s-7) var(--db-s-5);
  border: 1px solid var(--db-ink);
  border-radius: var(--db-r);
  background-color: var(--db-surface);
  background-image:
    linear-gradient(to right, var(--db-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--db-grid) 1px, transparent 1px);
  background-size: var(--db-module) var(--db-module);
  text-align: center;
}
/* The inner rule of a stamp: a second line inside the first. */
.db-stamp::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--db-line);
  border-radius: 1px;
  pointer-events: none;
}
.db-stamp > * { position: relative; }

@media (min-width: 768px) {
  .db-stamp { padding: var(--db-s-8) var(--db-s-7); }
}

.db-stamp__title {
  font-size: var(--db-t-3xl);
  font-weight: 500;
  letter-spacing: -0.016em;
  max-width: 24ch;
  margin: 0 auto;
}
/* A short stamp title needs a wider measure than a long one. At 24ch
   "Your building uses Fobmo? Sign in." orphans the word "in." on its
   own line; sheet 04 opts out of the default measure for that reason.
   text-wrap: balance is the improvement where it is supported, and the
   wider measure is what carries it where it is not. */
.db-stamp__title--wide {
  max-width: 34ch;
  text-wrap: balance;
}

.db-stamp__lede {
  margin: var(--db-s-4) auto 0;
  max-width: 68ch;
  font-size: var(--db-t-md);
  line-height: 1.7;
  color: var(--db-ink-2);
}
.db-stamp__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--db-s-3);
  margin-top: var(--db-s-5);
}
.db-stamp .db-copyline { margin-top: var(--db-s-4); }

.db-stamp__secondary {
  margin-top: var(--db-s-5);
  padding-top: var(--db-s-4);
  border-top: 1px solid var(--db-line);
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  color: var(--db-ink-2);
}


/* -------------------------------------------------------------
   21. Footer -- carries the full title block of the sheet
   ------------------------------------------------------------- */

.db-footer {
  border-top: 1px solid var(--db-line);
  background: var(--db-surface);
  padding-block: var(--db-s-6) var(--db-s-5);
}

.db-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--db-s-6);
  margin-top: var(--db-s-6);
}
@media (min-width: 768px) {
  .db-footer__cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--db-s-7); }
}

.db-footer__brand { display: flex; flex-direction: column; gap: 6px; }
.db-footer__brand p {
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  letter-spacing: 0.04em;
  color: var(--db-ink-2);
}
.db-footer__brand .db-brand { margin-bottom: 6px; }
/* Sheet 02 carries a legal-grounding line the other sheets do not. */
.db-footer__note { margin-top: 6px; max-width: 42ch; }

.db-footer__col h4 {
  font-family: var(--db-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-ink-2);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--db-line);
  margin-bottom: 10px;
}
.db-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: var(--db-t-sm);
}
.db-footer__col li { color: var(--db-ink-2); }
.db-footer__col a { color: var(--db-ink); }
.db-footer__col a:hover { color: var(--db-cobalt); }

.db-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--db-s-3);
  margin-top: var(--db-s-6);
  padding-top: var(--db-s-4);
  border-top: 1px solid var(--db-line);
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  letter-spacing: 0.04em;
  color: var(--db-ink-2);
}
@media (min-width: 860px) {
  .db-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.db-footer__legal {
  list-style: none;
  display: flex;
  gap: var(--db-s-4);
  margin: 0;
  padding: 0;
}
.db-footer__legal a { color: var(--db-ink-2); }
.db-footer__legal a:hover { color: var(--db-cobalt); }


/* -------------------------------------------------------------
   22. Copy-email chip
   ------------------------------------------------------------- */

.db-copyline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  color: var(--db-ink-2);
}
.db-copyline--centred { justify-content: center; }

.db-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
  color: var(--db-ink);
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  transition: border-color 160ms ease, color 160ms ease,
    background-color 160ms ease;
}
.db-copy:hover { border-color: var(--db-cobalt); color: var(--db-cobalt); }
.db-copy__icon { width: 13px; height: 13px; flex: none; opacity: 0.7; }
.db-copy[data-state="copied"] {
  border-color: var(--db-cobalt);
  background: var(--db-cobalt-tint);
  color: var(--db-cobalt);
}
.db-copy .db-copy__icon--check { display: none; }
.db-copy[data-state="copied"] .db-copy__icon--copy { display: none; }
.db-copy[data-state="copied"] .db-copy__icon--check { display: inline-block; opacity: 1; }


/* -------------------------------------------------------------
   23. Contact modal -- the same dialog, drawn
   ------------------------------------------------------------- */

.db-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--db-s-4);
  overflow-y: auto;
}
.db-modal[hidden] { display: none; }

.db-modal__backdrop {
  position: fixed;
  inset: 0;
  background: var(--db-backdrop);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 0;
}

.db-modal__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: var(--db-s-6) 0;
  padding: var(--db-s-6);
  background: var(--db-surface);
  border: 1px solid var(--db-ink);
  border-radius: var(--db-r-2);
  box-shadow: var(--db-shadow-lift);
}

.db-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
  color: var(--db-ink-2);
}
.db-modal__close:hover { border-color: var(--db-cobalt); color: var(--db-cobalt); }
.db-modal__close svg { width: 15px; height: 15px; }

.db-modal__title {
  font-size: var(--db-t-2xl);
  font-weight: 500;
  letter-spacing: -0.016em;
  padding-right: var(--db-s-6);
}
.db-modal__lede {
  margin-top: 10px;
  font-size: var(--db-t-sm);
  line-height: 1.65;
  color: var(--db-ink-2);
}

.db-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--db-s-4);
  margin-top: var(--db-s-5);
}
.db-modal__form[hidden],
.db-modal__success[hidden],
.db-modal__message[hidden] { display: none; }

.db-field { display: flex; flex-direction: column; gap: 6px; }
.db-field__label {
  font-family: var(--db-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-ink-2);
}
.db-field__req { color: var(--db-rev); }
.db-field__optional {
  color: var(--db-ink-2);
  opacity: 0.75;
  letter-spacing: 0.1em;
}
.db-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
  color: var(--db-ink);
  font-family: var(--db-font);
  font-size: var(--db-t-base);
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.db-input:hover { border-color: var(--db-ink-2); }
.db-input:focus {
  outline: none;
  border-color: var(--db-cobalt);
  box-shadow: 0 0 0 3px var(--db-cobalt-tint);
}
.db-input[aria-invalid="true"] { border-color: var(--db-rev); }
.db-textarea { min-height: 130px; resize: vertical; }
.db-field__error {
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  color: var(--db-rev);
}
.db-field__error[hidden] { display: none; }

/* .db-modal__submit-label is a JS hook, not a style hook: the
   controller swaps its text between "Send message" and "Sending...".
   It carries no rule of its own on purpose. */
.db-modal__submit { width: 100%; }
.db-modal__submit[disabled],
.db-modal__submit[aria-disabled="true"] { opacity: 0.65; cursor: not-allowed; }

.db-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: db-spin 700ms linear infinite;
}
@keyframes db-spin { to { transform: rotate(360deg); } }
.db-modal__form[data-state="submitting"] .db-modal__submit-arrow { display: none; }
.db-modal__form[data-state="submitting"] .db-spinner { display: inline-block; }

.db-modal__message {
  padding: 12px 14px;
  border: 1px solid var(--db-line);
  border-left-width: 3px;
  border-radius: var(--db-r);
  font-size: var(--db-t-sm);
  line-height: 1.6;
}
.db-modal__message a { color: inherit; text-decoration: underline; }
.db-modal__message[data-tone="warning"] {
  border-color: var(--db-amber);
  background: var(--db-amber-tint);
  color: var(--db-amber);
}
.db-modal__message[data-tone="danger"] {
  border-color: var(--db-rev);
  background: var(--db-rev-tint);
  color: var(--db-rev);
}
.db-modal__message-row { display: flex; gap: 10px; align-items: flex-start; }
.db-modal__message-row svg { flex: none; margin-top: 2px; }
.db-modal__message-copy { color: var(--db-ink); }

.db-modal__success {
  margin-top: var(--db-s-5);
  padding: var(--db-s-5);
  border: 1px solid var(--db-cobalt);
  border-radius: var(--db-r);
  background: var(--db-cobalt-tint);
  text-align: center;
}
.db-modal__success-icon {
  width: 38px;
  height: 38px;
  margin: 0 auto var(--db-s-3);
  display: grid;
  place-items: center;
  border: 1px solid var(--db-cobalt);
  border-radius: var(--db-r);
  background: var(--db-surface);
  color: var(--db-cobalt);
}
.db-modal__success-icon svg { width: 18px; height: 18px; }
.db-modal__success-title { font-size: var(--db-t-lg); font-weight: 500; }
.db-modal__success-body {
  margin-top: 6px;
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  color: var(--db-ink-2);
}

.db-modal__alt {
  margin-top: var(--db-s-5);
  padding-top: var(--db-s-5);
  border-top: 1px solid var(--db-line);
}
.db-modal__alt-heading {
  font-family: var(--db-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-ink-2);
  margin-bottom: var(--db-s-3);
}
.db-modal__actions {
  display: flex;
  gap: var(--db-s-3);
  margin-top: var(--db-s-3);
}
.db-modal__actions .db-btn { flex: 1; }
@media (max-width: 420px) {
  .db-modal__actions { flex-direction: column; }
}
.db-modal__mailto {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--db-s-3);
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--db-ink-2);
}
.db-modal__mailto:hover { color: var(--db-cobalt); }
.db-modal__mailto svg { width: 14px; height: 14px; }

body.db-modal-open { overflow: hidden; }


/* -------------------------------------------------------------
   24. Sheets 02-04 vocabulary
   Defined here, not on the page that first needs them, so the next
   engineer applies a class instead of inventing one. None of these
   is used by the home page.
   ------------------------------------------------------------- */

/* .db-showcase -- a framed screen artefact with a URL stamp and a
   caption under it. /preview/ is built out of these. */
.db-showcase {
  border: 1px solid var(--db-line);
  border-radius: var(--db-r-2);
  background: var(--db-surface);
  box-shadow: var(--db-shadow-lift);
  overflow: hidden;
}
.db-showcase__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--db-s-3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--db-line);
  background: var(--db-sunk);
}
/* The URL wraps rather than ellipsising. Two of the three stamps on
   sheet 04 carry a section name after the path, and truncating carried
   copy at 320px would hide a word the page is required to show. */
.db-showcase__url {
  min-width: 0;
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--db-ink-2);
  overflow-wrap: anywhere;
}
.db-showcase__body { padding: var(--db-s-5); }
.db-showcase__caption {
  padding: 12px var(--db-s-5);
  border-top: 1px solid var(--db-line);
  background: var(--db-sunk);
  font-size: var(--db-t-sm);
  line-height: 1.6;
  color: var(--db-ink-2);
}

/* .db-lot -- a lot on the plan: a titled row with its own meta line.
   Sheet 04 lists lots and the credentials against them. */
.db-lot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--db-line);
}
.db-lot:last-child { border-bottom: 0; }
.db-lot__title { font-size: var(--db-t-sm); font-weight: 500; color: var(--db-ink); }
.db-lot__meta {
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  color: var(--db-ink-2);
}
/* A row that carries a state as well as a name: the state is marked at
   the far end, the way it is against a lot on the drawing. */
.db-lot__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--db-s-3);
}
.db-lot__scope {
  font-size: var(--db-t-sm);
  line-height: 1.55;
  color: var(--db-ink-2);
}

/* .db-register -- a figure read off the register, e.g. a count.
   --warn draws it in revision red, for a number that needs action. */
.db-register {
  font-family: var(--db-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-t-xl);
  font-weight: 600;
  color: var(--db-ink);
}
.db-register--warn { color: var(--db-rev); }

/* .db-flag -- a revision note: something the drawing is honest about.
   Red left rule, because a revision is never erased. */
.db-flag {
  padding: var(--db-s-4);
  border: 1px solid var(--db-line);
  border-left: 3px solid var(--db-rev);
  border-radius: var(--db-r);
  background: var(--db-surface);
  font-size: var(--db-t-sm);
  line-height: 1.65;
  color: var(--db-ink-2);
}
/* Not every inset note is a revision. --cobalt is the same panel drawn
   in the accent, for a note that adds rather than warns. */
.db-flag--cobalt { border-left-color: var(--db-cobalt); }
.db-flag__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--db-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-rev);
}
.db-flag--cobalt .db-flag__label { color: var(--db-cobalt); }
/* The global p rule sets its own colour and size, so a paragraph inside
   a flag has to be told to take the flag's. */
.db-flag p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  max-width: var(--db-measure);
}
.db-flag__list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.db-warn { color: var(--db-amber); }

/* .db-redirect -- the small panel that explains where a page has
   moved or what a visitor should read instead. */
.db-redirect {
  display: flex;
  flex-direction: column;
  gap: var(--db-s-3);
  padding: var(--db-s-5);
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-sunk);
}
@media (min-width: 720px) {
  .db-redirect { flex-direction: row; align-items: center; justify-content: space-between; }
}
.db-redirect__copy {
  font-size: var(--db-t-sm);
  line-height: 1.6;
  color: var(--db-ink-2);
  max-width: var(--db-measure);
}
/* The action keeps its own width: squeezed by the copy beside it, a
   two-word button breaks onto two lines. */
.db-redirect > .db-btn { flex: none; }

/* .db-concept -- a defined term and its explanation, drawn as a
   labelled cell. Sheet 02 uses these for the vocabulary section. */
.db-concept {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--db-s-5);
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
}
.db-concept__label {
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-cobalt);
}
.db-concept__title { font-size: var(--db-t-lg); font-weight: 500; }
.db-concept__body { font-size: var(--db-t-sm); line-height: 1.65; color: var(--db-ink-2); }
/* Pinned to the foot so two concepts side by side rule their notes at
   the same height. Set in the mono face at the small copy size: 11px
   mono over four lines of prose is a caption, not a paragraph. */
.db-concept__note {
  margin-top: auto;
  padding-top: var(--db-s-3);
  border-top: 1px dashed var(--db-line);
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  line-height: 1.6;
  color: var(--db-ink-2);
}


/* .db-refs -- a list of the authorities a claim rests on. Ruled rows,
   the acts in ink, the explanation after them: a schedule of
   references, not a bulleted list. Sheet 02 cites three. */
.db-refs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.db-refs li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--db-line);
  font-size: var(--db-t-sm);
  line-height: 1.6;
  color: var(--db-ink-2);
}
.db-refs li:first-child { padding-top: 0; }
.db-refs li:last-child { border-bottom: 0; padding-bottom: 0; }

/* .db-statement -- a section that is one paragraph and nothing else.
   Three of these across sheets 02 and 03; without it each one would be
   a bare <p> in 1180px of white, which is not a drawing of anything.
   The default is a marked panel; --centred is the sheet's own note,
   ruled top and set over the drafting grid. */
.db-statement {
  padding: var(--db-s-5);
  border: 1px solid var(--db-line);
  border-left: 3px solid var(--db-cobalt);
  border-radius: var(--db-r);
  background: var(--db-surface);
}
.db-statement__lede {
  font-size: var(--db-t-md);
  line-height: 1.7;
  color: var(--db-ink-2);
  max-width: 78ch;
}
.db-statement__title {
  font-size: var(--db-t-3xl);
  font-weight: 500;
  letter-spacing: -0.016em;
  max-width: 26ch;
  margin: 0 auto;
}

.db-statement--centred {
  border-left: 1px solid var(--db-line);
  border-top: 3px solid var(--db-cobalt);
  padding: var(--db-s-7) var(--db-s-5);
  text-align: center;
  background-color: var(--db-surface);
  background-image:
    linear-gradient(to right, var(--db-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--db-grid) 1px, transparent 1px);
  background-size: var(--db-module) var(--db-module);
}
@media (min-width: 768px) {
  .db-statement--centred { padding: var(--db-s-8) var(--db-s-7); }
}
.db-statement--centred .db-statement__lede {
  margin: var(--db-s-4) auto 0;
  max-width: 66ch;
}

/* .db-owner -- the owner-view artefact sheet 04 is built out of: a
   header, then one or two ruled columns of rows. The columns are
   panels rather than floating cards, because a register on a drawing
   is a boxed schedule, not a stack of tiles. */
.db-owner {
  display: flex;
  flex-direction: column;
  gap: var(--db-s-5);
}
.db-owner__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--db-s-4);
  border-bottom: 1px solid var(--db-line);
}
.db-owner__name {
  font-size: var(--db-t-xl);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--db-ink);
  line-height: 1.25;
}
.db-owner__meta {
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  line-height: 1.5;
  color: var(--db-ink-2);
}

/* Lots read narrower than credentials, so the split is not 50/50. */
.db-owner__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--db-s-5);
  align-items: start;
}
@media (min-width: 768px) {
  .db-owner__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.db-owner__col {
  min-width: 0;
  border: 1px solid var(--db-line);
  border-radius: var(--db-r);
  background: var(--db-surface);
}
.db-owner__collabel {
  padding: 8px 14px;
  border-bottom: 1px solid var(--db-line);
  background: var(--db-sunk);
  font-family: var(--db-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-ink-2);
}
.db-owner__list {
  list-style: none;
  margin: 0;
  padding: 0 14px;
  display: flex;
  flex-direction: column;
}
/* A note that belongs to the artefact, not to the page around it. */
.db-owner__note { margin-top: 0; }

/* .db-attrib -- the attribution line under a credential: who holds it,
   who manages it, when it was issued. The label is a mono plan label;
   the value is the display face, because the value is a person or a
   date a reader has to read, not an identifier. */
.db-attrib {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--db-s-4);
  font-family: var(--db-mono);
  font-size: var(--db-t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--db-ink-2);
}
.db-attrib__item {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
}
.db-attrib__value {
  margin-left: 7px;
  font-family: var(--db-font);
  font-size: var(--db-t-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--db-ink);
}
/* A value that needs somebody to look at it. Amber, not revision red:
   nothing here has been revised, it just wants an eye on it. */
.db-attrib__value--warn { color: var(--db-amber); }


/* -------------------------------------------------------------
   25. Document sheet -- /privacy.html and /terms.html

   A legal instrument is a document, not a marketing sheet: one
   column of running prose on a single drawing sheet, headings
   ruled off, and the measure capped so a clause can be read.
   These are the longest text blocks on the site; at the container's
   own width they set at 153 characters a line, which is not a
   measure.

   Every selector is scoped inside .db-doc or names a class only
   these two pages use, so nothing here can reach a component that
   sheets 01-04 draw with.
   ------------------------------------------------------------- */

/* The document column: the SHEET is one measure wide, border to
   border, and the prose sits inside the sheet's own margin -- a
   drawing inside its frame. The cap has to be on the border box, not
   on the text: --db-measure is 40em, and 40em of Jost sets 104
   characters a line, MEASURED by walking every character with a Range
   and bucketing it into its line box. Taking the sheet's padding out
   of the measure instead of adding it on brings the longest line on
   either document to 94. Uncapped it is 153. The estimate
   width/average-advance reads 8 characters low on the same block and
   is wrong in the comfortable direction; do not trust it.

   Head and sheet are both set at --db-t-md so the `em` resolves to the
   same pixel width on each and the title sits flush with the sheet's
   left border. */
.db-doc,
.db-doc__head {
  font-size: var(--db-t-md);
  max-width: var(--db-measure);
}

/* Eyebrow, title, effective date. Tighter than the hero's own stack,
   because the date belongs to the title above it. */
.db-doc__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--db-s-4);
}

/* The date the instrument took effect, in mono: it is a plan date,
   read the same way as a revision date in the title block. */
.db-doc__effective {
  font-family: var(--db-mono);
  font-size: var(--db-t-sm);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--db-ink-2);
}

.db-doc {
  padding: var(--db-s-5);
  line-height: 1.7;
}
@media (min-width: 768px) {
  .db-doc { padding: var(--db-s-7); }
}

.db-doc__lede {
  font-size: var(--db-t-lg);
  line-height: 1.65;
  color: var(--db-ink);
}

/* A clause opens under a ruled heading, the way a drawing note does. */
.db-doc h2 {
  font-size: var(--db-t-xl);
  margin-top: var(--db-s-7);
  margin-bottom: var(--db-s-3);
  padding-top: var(--db-s-4);
  border-top: 1px solid var(--db-line);
}
.db-doc h3 {
  font-size: var(--db-t-lg);
  margin-top: var(--db-s-5);
  margin-bottom: var(--db-s-2);
}

.db-doc p { margin-bottom: var(--db-s-4); }

/* Links inside running prose are underlined, unlike links in the
   chrome. Colour alone is not enough to find a clause reference in a
   paragraph of the same weight. */
.db-doc a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.db-doc ul {
  list-style: none;
  margin: 0 0 var(--db-s-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--db-s-3);
}
.db-doc li {
  position: relative;
  padding-left: var(--db-s-5);
  color: var(--db-ink-2);
}
/* The marker is the plan's mark, not a bullet: the same small square
   that flags a marked credential on the drawing. */
.db-doc li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--db-cobalt);
}

/* The contact block at the foot of each document: a recessed cell
   with the accent down its left edge, the same idiom as .db-dimension. */
.db-doc__callout {
  margin: var(--db-s-5) 0 var(--db-s-4);
  padding: var(--db-s-5);
  border: 1px solid var(--db-line);
  border-left: 3px solid var(--db-cobalt);
  border-radius: var(--db-r);
  background: var(--db-sunk);
}

.db-doc > *:last-child,
.db-doc__callout > *:last-child { margin-bottom: 0; }


/* -------------------------------------------------------------
   26. Reduced motion
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .db-route:hover { transform: none; }
  .db-btn:active { transform: none; }
}