:root {
    --paper: #F5F6F2;
    --paper-2: #ECEEE8;
    --ink: #1B2229;
    --ink-2: #4B555C;
    --ink-3: #7A848A;
    --rule: #C9CFC8;
    --teal: #0E6B62;
    --teal-soft: #DCEBE7;
    --amber: #A9701C;
    --amber-soft: #F3E7D2;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #151A1E; --paper-2: #1D2328; --ink: #E6E9E4; --ink-2: #AEB6B2; --ink-3: #7F8985;
      --rule: #333B40; --teal: #3FB3A5; --teal-soft: #1B302E; --amber: #D6A04C; --amber-soft: #33291A;
    }
  }
  :root[data-theme="dark"] {
    --paper: #151A1E; --paper-2: #1D2328; --ink: #E6E9E4; --ink-2: #AEB6B2; --ink-3: #7F8985;
    --rule: #333B40; --teal: #3FB3A5; --teal-soft: #1B302E; --amber: #D6A04C; --amber-soft: #33291A;
  }

  * { box-sizing: border-box; }
  body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  .page { max-width: 1040px; margin: 0 auto; padding: 56px 28px 96px; }
  .col { max-width: 68ch; }

  h1, h2, h3 { font-family: var(--serif); font-weight: 500; text-wrap: balance; margin: 0; line-height: 1.1; }
  h1 { font-size: clamp(40px, 6vw, 64px); letter-spacing: -0.01em; font-variation-settings: "opsz" 72; }
  h2 { font-size: 32px; margin-bottom: 8px; }
  h3 { font-size: 21px; }
  p { margin: 0 0 1em; }
  p.lede { font-family: var(--serif); font-size: 22px; line-height: 1.4; color: var(--ink-2); margin-top: 20px; }
  .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin-bottom: 18px; }
  code { font-family: var(--mono); font-size: 0.88em; background: var(--paper-2); padding: 1px 5px; border-radius: 3px; }
  a { color: var(--teal); }
  sup a { text-decoration: none; font-family: var(--mono); font-size: 11px; }

  section { margin-top: 88px; }
  .section-head { margin-bottom: 28px; }
  .section-head .num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.08em; margin-bottom: 6px; }
  .section-head p { color: var(--ink-2); max-width: 68ch; margin: 6px 0 0; }

  .facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-top: 40px; }
  .facts > div { padding: 18px 20px 20px 0; border-right: 1px solid var(--rule); }
  .facts > div + div { padding-left: 20px; }
  .facts > div:last-child { border-right: 0; }
  .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
  .facts .v { font-size: 15px; }

  /* promises */
  .promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .promise { border-top: 2px solid var(--teal); padding: 18px 0 6px; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
  .promise:hover { transform: translateY(-2px); }
  .promise h3 { font-size: 23px; margin-bottom: 8px; }
  .promise p { color: var(--ink-2); font-size: 15px; margin: 0; }

  /* AI reader panel */
  .reader { margin-top: 40px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2); padding: 28px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; }
  .reader h3 { margin-bottom: 10px; }
  .reader p { font-size: 15px; color: var(--ink-2); }
  .terms { list-style: none; margin: 0; padding: 0; }
  .terms li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14.5px; color: var(--ink-2); }
  .terms li:first-child { border-top: 0; padding-top: 0; }
  .terms b { color: var(--ink); font-weight: 600; }
  .check { width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: var(--paper); display: inline-grid; place-items: center; flex: none; }
  .check svg { width: 12px; height: 12px; }
  .opt { border-left: 3px solid var(--amber); background: var(--amber-soft); padding: 10px 14px; border-radius: 0 6px 6px 0; font-size: 14px; color: var(--ink-2); margin-top: 16px; }
  .opt b { color: var(--ink); }

  /* invoice lifecycle */
  .life { margin-top: 40px; }
  .life ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--ink); }
  .life li { padding: 18px 18px 18px 0; border-right: 1px solid var(--rule); font-size: 14.5px; color: var(--ink-2); position: relative; }
  .life li + li { padding-left: 18px; }
  .life li:last-child { border-right: 0; }
  .life .t { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
  .life b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 4px; font-size: 15px; }
  .life .end { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding: 16px 0 0; font-family: var(--serif); font-size: 20px; color: var(--ink); border-right: 0; }

  /* figure */
  figure { margin: 0; }
  .figwrap { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2); padding: 22px 22px 14px; overflow-x: auto; position: relative; }
  .figwrap svg { display: block; width: 100%; height: auto; min-width: 760px; transition: opacity 240ms ease; }
  figcaption { color: var(--ink-2); font-size: 14.5px; margin-top: 14px; max-width: 72ch; }
  .controls { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 16px; align-items: center; }
  .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .filters .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
  .chip { font: 500 13px var(--sans); border: 1px solid var(--rule); background: transparent; color: var(--ink-2); padding: 6px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
  .chip .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
  .chip:hover { border-color: var(--ink-2); }
  .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .chip:focus-visible, .seg button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
  .seg { display: inline-flex; position: relative; border: 1px solid var(--rule); border-radius: 999px; padding: 3px; background: var(--paper); }
  .seg button { font: 500 13px var(--sans); background: none; border: 0; color: var(--ink-2); padding: 6px 14px; border-radius: 999px; cursor: pointer; position: relative; z-index: 1; transition: color 200ms ease; }
  .seg button[aria-pressed="true"] { color: var(--paper); }
  .seg .ind { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0; background: var(--ink); border-radius: 999px; transition: transform 260ms cubic-bezier(.2,.7,.2,1), width 260ms cubic-bezier(.2,.7,.2,1); }
  svg .node, svg .edge, svg .lbl { transition: opacity 260ms ease; }
  svg[data-focus="tenant"] .node:not(.tenant), svg[data-focus="tenant"] .edge:not(.tenant), svg[data-focus="tenant"] .lbl:not(.tenant),
  svg[data-focus="drift"] .node:not(.drift), svg[data-focus="drift"] .edge:not(.drift), svg[data-focus="drift"] .lbl:not(.drift),
  svg[data-focus="third"] .node:not(.third), svg[data-focus="third"] .edge:not(.third), svg[data-focus="third"] .lbl:not(.third) { opacity: .18; }
  svg text { font-family: var(--sans); fill: currentColor; }
  svg .box { fill: var(--paper); stroke: currentColor; stroke-width: 1.2; }
  svg .box.tenantbox { stroke: var(--teal); stroke-width: 1.4; }
  svg .zone { fill: none; stroke: var(--rule); stroke-dasharray: 4 4; }
  svg .zone.tenantzone { stroke: var(--teal); }
  svg .edge { stroke: currentColor; stroke-width: 1.3; fill: none; }
  svg .edge.copy { stroke-dasharray: 5 4; }
  svg .small { font-size: 11px; fill: var(--ink-2); }
  svg .tag { font-size: 10.5px; fill: var(--ink-3); letter-spacing: .06em; }
  svg .teal { fill: var(--teal); }

  .qa { border-top: 1px solid var(--ink); margin-top: 36px; }
  .qa > div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .qa .q { font-family: var(--serif); font-size: 19px; }
  .qa .a { color: var(--ink-2); font-size: 15px; }
  .qa .a p { margin: 0; }

  /* steps */
  .steps { list-style: none; margin: 0; padding: 0; }
  .step { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 0 32px; padding: 26px 0; border-top: 1px solid var(--rule); }
  .step:last-child { border-bottom: 1px solid var(--rule); }
  .step .n { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink-3); font-variation-settings: "opsz" 72; transition: color 220ms ease; }
  .step:hover .n { color: var(--teal); }
  .step h3 { margin-bottom: 6px; }
  .step .what { color: var(--ink-2); font-size: 15px; }
  .step .what p { margin: 0; }
  .guard { background: var(--teal-soft); border-left: 3px solid var(--teal); padding: 12px 16px; border-radius: 0 6px 6px 0; font-size: 14.5px; align-self: start; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
  .step:hover .guard { transform: translateX(3px); }
  .guard .k { color: var(--teal); display: block; margin-bottom: 5px; }
  .guard p { margin: 0; }

  /* keys */
  table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
  .tablewrap { overflow-x: auto; }
  th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 0 14px 10px 0; border-bottom: 1px solid var(--ink); font-weight: 500; }
  td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-2); }
  td:first-child { color: var(--ink); white-space: nowrap; }
  tr:hover td { background: linear-gradient(90deg, var(--paper-2), transparent); }

  /* case study */
  .case { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .case p { font-size: 15px; color: var(--ink-2); }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-top: 8px; }
  .stats > div { padding: 16px 16px 16px 0; border-right: 1px solid var(--rule); }
  .stats > div + div { padding-left: 16px; }
  .stats > div:last-child { border-right: 0; }
  .stats .big { font-family: var(--serif); font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
  .stats .k { margin: 0; }

  footer { margin-top: 96px; border-top: 1px solid var(--ink); padding-top: 18px; color: var(--ink-3); font-size: 13.5px; }
  footer ol { margin: 8px 0 0; padding-left: 20px; }
  footer li { margin-bottom: 4px; }
  footer a { color: var(--ink-2); }

  @media (max-width: 760px) {
    .page { padding: 36px 18px 72px; }
    .facts, .promises, .stats, .case, .reader { grid-template-columns: 1fr; }
    .facts > div, .stats > div { border-right: 0; border-bottom: 1px solid var(--rule); padding: 14px 0; }
    .facts > div + div, .stats > div + div { padding-left: 0; }
    .facts > div:last-child, .stats > div:last-child { border-bottom: 0; }
    .life ol { grid-template-columns: 1fr; }
    .life li { border-right: 0; border-bottom: 1px solid var(--rule); padding: 14px 0; }
    .life li + li { padding-left: 0; }
    .step { grid-template-columns: 40px 1fr; }
    .step .guard { grid-column: 2; margin-top: 12px; }
    .qa > div { grid-template-columns: 1fr; gap: 6px; }
  }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }