/* rekvira.com — Fresh Precision (fleet DESIGN-DIRECTION 2026-08-30, uplift 2026-09-01)
   Near-white ground · modern grotesk · teal accent · product-led hero panel.
   No external font hosts (Caddy CSP is self-only). */

:root {
  --ink:      #0f172a;
  --ink-soft: #334155;
  --paper:    #fafbfc;
  --paper-2:  #f1f5f9;
  --surface:  #ffffff;
  --accent:   #0d9488;
  --accent-bright: #14b8a6;
  --brass:    var(--accent);       /* legacy alias — connect/setup pages */
  --indigo:   #2563eb;
  --oxblood:  #b91c1c;
  --mute:     #64748b;
  --rule:     #e2e8f0;
  --rule-dark:#1e293b;
  --panel:    #0f172a;            /* dark inset for install / session cards */
  --panel-border: #334155;
  --glow:     rgba(6, 182, 212, .35);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --max: 74rem;
  color-scheme: light;
}

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

/* min-width:auto on grid items let the code block and the coverage table push the
   page wider than the phone viewport. Scrolling belongs inside those elements. */
.hero-grid > *, .claim-grid > *, .steps > *, .tiers > *, .faq > div > * { min-width: 0; }

html { -webkit-text-size-adjust: 100%; }
html { scrollbar-color: #94a3b8 var(--paper); }
::selection { background: var(--accent); color: #fff; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
p { margin: 0 0 1rem; }
a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--brass);
  color: var(--ink); padding: .6rem 1rem; z-index: 20;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- micro type */

.mono {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: rgba(250, 251, 252, .85);
  backdrop-filter: blur(12px);
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 10;
}
.masthead .wrap {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.5rem;
  min-height: 3.5rem; padding-block: .65rem;
}
.brand {
  font-size: 1.125rem; letter-spacing: -0.03em;
  font-weight: 700; color: var(--ink);
  text-decoration: none; margin-right: auto; white-space: nowrap;
}
.brand:hover { color: var(--accent); }
.masthead nav { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; align-items: center; }
.masthead nav a {
  font-size: .875rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  padding: .4rem 0;
}
.masthead nav a:hover { color: var(--ink); }
.masthead nav .nav-cta {
  color: #fff; background: var(--accent); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: .5rem .9rem; margin-left: .15rem;
  font-weight: 600;
}
.masthead nav .nav-cta:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #fff; }

/* ---------------------------------------------------------------- beta strip */

.strip {
  background: var(--paper-2); color: var(--ink-soft);
  font-size: .8125rem; font-weight: 500;
  border-bottom: 1px solid var(--rule);
}
.strip .wrap { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; padding-block: .55rem; }
.strip b { font-weight: 700; color: var(--ink); }
.strip span { opacity: .9; }
.strip span + span::before { content: "·"; margin: 0 .15rem 0 0; opacity: .5; }
/* 390 px: stacked rows — the ·-before hung in the left margin when spans wrapped. */
@media (max-width: 40rem) {
  .strip .wrap { gap: .2rem .8rem; padding-block: .55rem; }
  .strip span + span::before { margin-right: .1rem; }
  /* The source and boundary phrases recur in the visible hero. Keep the beta offer
     compact on the phone so a buyer reaches the promise, action, and proof in one fold. */
  .strip span:nth-of-type(n + 2) { display: none; }
}

/* ---------------------------------------------------------------- hero */

.hero {
  background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
  color: var(--ink);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 8vw, 6rem);
  border-bottom: 1px solid var(--rule);
}
/* Single-column hero stacked proof+install under copy pushed fold ink right to ~75%
   at 1440×900 (visual-gym iter 190 pre-fix). FA-161 iter 200: victano-style two-column
   hero-grid — copy+CTA left, corpus proof + keyless install right — with a teal wash
   on the aside so L-055 right half reaches the 10% surface budget without a dark panel. */
.hero-grid {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
}

.hero-install-aside {
  border: 1px solid #99f6e4;
  background: linear-gradient(165deg, #ccfbf1 0%, #ecfeff 24%, var(--surface) 52%, #e2e8f0 100%);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem 1.15rem;
  box-shadow: 0 10px 32px -12px rgba(13, 148, 136, .22), 0 1px 2px rgba(15, 23, 42, .04);
}
@media (min-width: 62rem) {
  .hero-install-aside {
    margin-top: 0;
    display: flex;
    flex-direction: column;
  }
  .hero-install-aside .hero-ask { flex: 1; }
}
.hero-install-aside .proof,
.hero-install-aside .corpus-now {
  margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-soft);
  display: block;
}
.hero-install-aside .proof strong,
.hero-install-aside .corpus-now strong { color: var(--accent); font-weight: 700; }
.hero-install-aside .proof-detail,
.hero-install-aside .corpus-now-detail {
  margin: .75rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid rgba(13, 148, 136, .15);
  font-size: .8125rem;
}

.proof-label {
  margin: 0 0 .65rem; color: var(--accent); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; font-size: .6875rem;
}
.hero-proof-story {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(13, 148, 136, .24);
}
.hero-proof-story h2 {
  max-width: 23ch;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
}
.proof-question {
  margin: .9rem 0 .8rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}
.proof-route {
  display: grid;
  gap: .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.proof-route li {
  display: grid;
  grid-template-columns: minmax(7.6rem, .75fr) minmax(0, 1.25fr);
  gap: .45rem .85rem;
  align-items: baseline;
  padding-top: .55rem;
  border-top: 1px solid rgba(13, 148, 136, .16);
  color: var(--ink-soft);
  font-size: .875rem;
  line-height: 1.45;
}
.proof-route strong { color: var(--ink); font-size: .8125rem; }
.proof-route code { color: var(--ink); font-size: .84em; }
.proof-boundary {
  margin: .85rem 0 0;
  color: var(--ink-soft);
  font-size: .8125rem;
  line-height: 1.5;
}
.proof-session-link {
  display: inline-block;
  margin-top: .75rem;
  color: var(--ink-soft);
  font-size: .8125rem;
  font-weight: 600;
}
.hero-corpus {
  margin-top: 1rem;
}
.proof-chips {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.proof-chips li {
  border: 1px solid rgba(13, 148, 136, .35);
  background: rgba(204, 251, 241, .92);
  border-radius: 6px;
  padding: .4rem .6rem;
  font-size: .6875rem;
  line-height: 1.35;
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.proof-chips strong { color: var(--accent); font-weight: 700; }

.hero h1 {
  font-size: clamp(2.5rem, 5.8vw, 4rem);
  line-height: 1.02;
  max-width: 15ch;
  margin-bottom: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.hero h1 em { font-style: normal; color: var(--accent); }

.lede { font-size: clamp(1.0625rem, 1.5vw, 1.2rem); color: var(--ink-soft); max-width: 55ch; line-height: 1.55; }
.hero-roles {
  margin: 1rem 0 0;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
  max-width: 48ch;
}
.hero-price {
  margin: 1.15rem 0 0;
  max-width: 50ch;
  color: var(--ink-soft);
  font-size: .9375rem;
  line-height: 1.55;
}
.hero-price strong { color: var(--ink); }
.hero-source-summary {
  margin: .65rem 0 0;
  max-width: 50ch;
  color: var(--mute);
  font-size: .8125rem;
  line-height: 1.5;
}
.hero-source-summary strong { color: var(--ink-soft); }
.proof-support {
  margin: 0 0 .65rem;
  color: var(--mute);
  font-size: .8125rem;
  font-weight: 600;
}

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ---------------------------------------------------------------- hero-ask (home install strip) */

.hero-ask {
  margin-top: 1rem;
  max-width: none;
  background: #f8fafc;
  border: 1px solid #94a3b8;
  border-radius: var(--radius-sm);
  padding: 1rem 1.05rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 8px rgba(15, 23, 42, .06);
}
.ask-title {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  margin: 0 0 .65rem; color: var(--accent); font-weight: 600;
}
.ask-title .grow {
  margin-left: auto;
  color: var(--mute);
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero-ask.is-live .ask-title .dot {
  box-shadow: 0 0 8px var(--glow);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .72; transform: scale(1.08); }
  }
  .hero-ask.is-live .ask-title .dot {
    animation: live-pulse 2.4s ease-in-out infinite;
  }
}
.ask-title .dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--accent-bright); flex: none;
  box-shadow: 0 0 6px var(--glow);
}
.ask-step {
  margin: 0 0 .75rem; color: var(--ink-soft); font-size: .9375rem; line-height: 1.55;
  text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 400;
}
.hero-ask pre {
  margin: 0; padding: .85rem 1rem;
  background: #cbd5e1; border: 1px solid #94a3b8; border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: .875rem; line-height: 1.65; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.hero-ask-foot {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-top: .85rem; color: var(--mute); font-size: .75rem;
  text-transform: none; letter-spacing: .01em;
}
.hero-ask-link {
  margin-left: auto; font-size: .8125rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: .12rem;
}
.hero-ask-link:hover { color: var(--accent); border-color: var(--accent); }
.hero-ask-proof {
  margin: .65rem 0 0; padding-top: .65rem; border-top: 1px solid var(--rule);
  color: var(--mute); font-size: .75rem; letter-spacing: .02em;
  text-transform: none;
}
.copy-light {
  color: var(--accent); border-color: var(--rule); background: var(--surface);
}
.copy-light:hover { border-color: var(--accent); background: var(--paper-2); }
.copy-light[data-state="done"] { color: #fff; background: var(--accent); border-color: var(--accent); }
@media (max-width: 30rem) {
  .hero-ask { padding: .85rem .9rem .95rem; margin-top: 1.25rem; }
  .hero-ask-foot > span:first-child { flex-basis: 100%; }
  .hero-ask-foot .hero-ask-link { margin-left: 0; }
  .hero { padding-block: 2.25rem 2.5rem; }
  .proof-route li { grid-template-columns: 1fr; gap: .12rem; }
  .proof-route strong { font-size: .875rem; }
  .hero-regulation-list { display: none; }
}
/* Once the buttons stack they are read as a list, and two different widths in a stack
   look like a mistake rather than a hierarchy. */
@media (max-width: 30rem) {
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { text-align: center; }
  .hero .actions .btn-ghost {
    align-self: flex-start;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--ink-soft);
    text-align: left;
    text-decoration: underline;
  }
}

.btn {
  display: inline-block; font: 600 .9375rem/1 var(--sans);
  padding: .875rem 1.375rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.btn-primary:hover { background: var(--accent-bright); color: #fff; }
.btn-ghost { border-color: var(--rule); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-soft); color: var(--paper); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- record card */

.record {
  border: 1px solid var(--panel-border);
  background: var(--panel);
  border-radius: var(--radius);
  min-width: 0;
  box-shadow: 0 24px 48px -24px rgba(15, 23, 42, .45), 0 0 0 1px rgba(6, 182, 212, .08);
}
.record-head {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--panel-border);
  color: #94a3b8; font-size: .75rem;
}
.record-head .dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--accent-bright); flex: none;
  box-shadow: 0 0 8px var(--glow);
}
.record-head .grow { margin-left: auto; color: var(--accent-bright); }
.record-note {
  margin: 0; padding: 1rem 1rem .25rem; color: #94a3b8; font-size: .875rem;
}
.record pre {
  margin: 0; padding: 1.1rem 1rem;
  font-family: var(--mono); font-size: .9375rem; line-height: 1.7; color: #e2e8f0;
  /* The install prompt is a sentence, and it is the one thing a visitor is meant to
     take away. Scrolling it sideways hid the tail of it on a phone. pre-wrap keeps the
     authored line break and soft-wraps only when the screen is too narrow. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.record pre .k { color: #8fa4ff; }
.record pre .s { color: #d9b25e; }
.record-foot {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .7rem 1rem; border-top: 1px solid var(--panel-border); color: #94a3b8;
}
/* When the bar does have to wrap on a narrow screen, the two controls stay together on
   the second row rather than the label taking one line and Copy taking another. */
@media (max-width: 30rem) {
  .record-foot > span:first-child { flex-basis: 100%; }
  .record-foot .grow { display: none; }
}
.record-foot .grow { margin-left: auto; }
.record-proof {
  margin: 0; padding: .65rem 1rem .85rem;
  border-top: 1px solid var(--panel-border);
  color: #cbd5e1; font-size: .8125rem; letter-spacing: .01em;
}
/* The way out of the box, for someone who would rather follow steps than paste a
   prompt. It sits in the footer of the thing it is an alternative to, rather than as a
   third hero button competing with the primary action. */
.record-link {
  font-size: .8125rem; font-weight: 500;
  color: #94a3b8; text-decoration: none;
  border-bottom: 1px solid var(--panel-border); padding-bottom: .15rem;
}
.record-link:hover { color: var(--accent-bright); border-color: var(--accent-bright); }

.copy {
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: transparent; color: var(--accent-bright); border: 1px solid var(--panel-border);
  padding: .45rem .75rem; border-radius: var(--radius-sm); cursor: pointer;
}
.copy:hover { border-color: var(--accent-bright); }
.copy[data-state="done"] { color: var(--panel); background: var(--accent-bright); border-color: var(--accent-bright); }

/* ---------------------------------------------------------------- setup guide

   ONE JOB: get the address into the reader's app, once, without losing their place.

   The previous version was five sections and about 4,700px for a four-click task, so
   nine tenths of it was scrolling past instructions for apps you do not use. It also
   repeated the address eight times, which was the literal answer to "do not make me
   scroll back" rather than the real one: do not make them scroll. Fourteen copy buttons
   on a page about copying one thing is why it read as amateur, and the operator was
   right to say so.

   So the page reconfigures to the reader instead: pick your app, and only your steps
   are on screen. CSS-only, using radio inputs, so the conversion path works even if the
   script never loads. */

.setup { background: var(--ink); color: var(--paper); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }
/* Narrower than the site's 74rem, and applied to the WHOLE page rather than the hero.
   This is a document somebody works through with another window open, not a landing:
   at full width the content hugged the left edge and half the ink was dead. Narrowing
   only the first band was worse still, because the left margin then jumped between the
   ink band and the sections under it, which the eye catches immediately. */
.guide .wrap { max-width: 58rem; }
.setup h1 {
  font-size: clamp(2rem, 5.5vw, 3.25rem); line-height: 1.04; letter-spacing: -0.035em;
  margin-bottom: 1.1rem; max-width: 18ch;
}
.setup .lede { margin-bottom: 2.25rem; }

/* THE PLATE. The address is the artifact this page exists to hand over, so it is the
   largest thing on the screen after the headline, and the whole plate is the button. */
.plate {
  display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap;
  width: 100%; max-width: 40rem; margin: 0; padding: 1.15rem 1.25rem;
  font: inherit; text-align: left; cursor: pointer;
  background: #0b0f2b; border: 1px solid #343a63; border-radius: 3px;
  transition: border-color .14s ease, background .14s ease;
}
.plate:hover { border-color: var(--brass); background: #0d1130; }
.plate:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.plate-mark {
  flex: none; color: #6f7496; border: 1px solid #343a63; border-radius: 2px;
  padding: .3rem .5rem; font-size: .625rem;
}
.plate .val {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--brass); overflow-wrap: anywhere; line-height: 1.4;
}
.plate .state { flex: none; color: #7d8299; }
.plate:hover .state { color: var(--brass); }
.plate[data-state="done"] { border-color: var(--brass); }
.plate[data-state="done"] .state { color: var(--brass); }

/* THE PICKER. Radio inputs drive it, so no script is required to change tabs. */
.picker { margin-top: 2.75rem; }
.picker-label { color: #9ea2bd; margin-bottom: .9rem; }
.picker-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.picker-tabs > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.picker-tabs > label {
  cursor: pointer; padding: .55rem .9rem; border-radius: 2px;
  border: 1px solid #3d4370; color: #c6c9d8;
  font-size: .875rem; font-weight: 600; line-height: 1;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.picker-tabs > label:hover { border-color: var(--brass); color: var(--paper); }
.picker-tabs > input:checked + label {
  background: var(--brass); border-color: var(--brass); color: #17110a;
}
.picker-tabs > input:focus-visible + label { outline: 2px solid var(--paper); outline-offset: 2px; }

.picker-tabs > .panel { order: 9; flex-basis: 100%; display: none; margin-top: 2rem; }
.picker-tabs > input#app-claude:checked ~ .panel[data-for="app-claude"],
.picker-tabs > input#app-gpt:checked    ~ .panel[data-for="app-gpt"],
.picker-tabs > input#app-cursor:checked ~ .panel[data-for="app-cursor"],
.picker-tabs > input#app-cc:checked     ~ .panel[data-for="app-cc"],
.picker-tabs > input#app-other:checked  ~ .panel[data-for="app-other"] { display: block; }

.panel-lede { color: #c6c9d8; max-width: 52ch; margin-bottom: 1.1rem; }

/* The steps. Numbered because they ARE a sequence and the order matters: this is the
   only numbering left on the page. */
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; counter-reset: how; max-width: 44rem; }
.how > li { counter-increment: how; padding-left: 2.6rem; position: relative; }
.how > li::before {
  content: counter(how); position: absolute; left: 0; top: -.1rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: 1px solid var(--brass); color: var(--brass);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .75rem;
}
.how h2 { font-size: 1.0625rem; letter-spacing: -0.01em; margin-bottom: .35rem; color: var(--paper); }
.how p { color: #c6c9d8; margin: 0; font-size: .9375rem; line-height: 1.6; }
.how b { color: var(--paper); font-weight: 600; }

/* THE COPY FIELD. The whole thing is the button: the seam between a value and a Copy
   button bolted to its edge split one object into two, and gave a phone user a target
   the width of the word COPY when the row could have been one. */
.copyfield {
  display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 40rem;
  margin: .2rem 0 0; padding: .7rem .85rem;
  font: inherit; text-align: left; cursor: pointer;
  background: #0b0f2b; border: 1px solid #343a63; border-radius: 2px;
  transition: border-color .12s ease, background .12s ease;
}
.copyfield:hover { border-color: var(--brass); background: #0d1130; }
.copyfield:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.copyfield .val {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: .875rem; line-height: 1.5; color: var(--brass);
  overflow-wrap: anywhere;
}
.copyfield .state { flex: none; color: #7d8299; }
.copyfield:hover .state, .copyfield[data-state="done"] .state { color: var(--brass); }
.copyfield[data-state="done"] { border-color: var(--brass); }

.caveat {
  margin: 1.75rem 0 0; max-width: 52ch; color: #9ea2bd;
  font-size: .875rem; line-height: 1.65;
  border-left: 2px solid var(--brass); padding-left: .9rem;
}
.caveat b { color: var(--paper); font-weight: 600; }
.caveat a { color: var(--paper); }

.others { margin: 0; display: grid; gap: .9rem; max-width: 44rem; }
.others > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; }
.others dt { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: #7d8299; }
.others dd { margin: 0; color: #c6c9d8; font-size: .9375rem; line-height: 1.6; }
.others b { color: var(--paper); font-weight: 600; }
.others code { font-family: var(--mono); font-size: .8125rem; color: var(--brass); }
@media (max-width: 34rem) { .others > div { grid-template-columns: 1fr; gap: .25rem; } }

.proof { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 52rem) { .proof { grid-template-columns: 1fr 1.35fr; gap: 2.5rem; } }
.proof h2 { font-size: 1.375rem; margin-bottom: .6rem; }
.proof p { color: #4c5164; font-size: .9375rem; }
/* `.wrap` centres itself, so narrowing it here would centre the block while every
   other section starts at the left margin. The measure goes on the text instead. */
.stuck > * { max-width: 60ch; }
.stuck h2 { font-size: 1.375rem; margin-bottom: .6rem; }
.stuck p { color: #4c5164; }

.record-light { background: #171c3d; margin-bottom: 1.25rem; }
.record-light pre { font-size: .9375rem; }

/* ---------------------------------------------------------------- bands */

.band { padding-block: clamp(2rem, 3.5vw, 3.25rem); border-top: 1px solid var(--rule); }
.band-alt { background: var(--surface); }
/* A deep link from the FAQ must leave the buyer-boundary heading clear of the sticky masthead. */
#boundaries { scroll-margin-top: 5rem; }

.ref { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.75rem; color: var(--mute); font-size: .8125rem; font-weight: 600; }
.ref .num { display: none; }
.ref .line { flex: 1; height: 1px; background: var(--rule); }
.ref .note { color: var(--accent); font-weight: 600; }

.band h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); max-width: 24ch; margin-bottom: .9rem; }
.band-intro { color: #4c5164; max-width: 58ch; }

/* ---------------------------------------------------------------- steps */

.steps { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.step { border-top: 2px solid var(--accent); padding-top: 1rem; }
.step .mono { color: var(--mute); display: block; margin-bottom: .6rem; }
.step h3 { font-size: 1.1875rem; margin-bottom: .5rem; }
.step p { color: #4c5164; margin: 0; font-size: .9375rem; }

.exchange {
  margin-top: 2.5rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); font-family: var(--sans); font-size: .9375rem; line-height: 1.65;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.exchange div { padding: .7rem 1rem; border-bottom: 1px solid var(--rule); }
.exchange div:last-child { border-bottom: 0; }
.exchange .who { color: var(--mute); letter-spacing: .12em; text-transform: uppercase; font-size: .6875rem; }
.exchange .tag {
  float: right; color: var(--mute); letter-spacing: .12em; text-transform: uppercase; font-size: .625rem;
}

/* Three sessions stacked. Side by side would cramp a transcript into a column too
   narrow to read a sentence in, which defeats the point of showing one. */
.sessions { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 64rem) { .sessions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .sessions > :first-child { grid-column: 1 / -1; } }

/* FA-067 L-021: workflow cards — tool sequences from config/workflows/index.json */
.wf-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 48rem) {
  .wf-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
.wf {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.wf-tag {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .2rem .55rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--mute);
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wf h3 { font-size: 1.125rem; margin-bottom: .45rem; }
.wf-returns { color: #4c5164; font-size: .9375rem; margin: 0 0 .75rem; }
.wf-steps {
  list-style: none;
  counter-reset: wfs;
  margin: 0;
  padding: .75rem 0 0;
  border-top: 1px solid var(--rule);
}
.wf-steps li {
  counter-increment: wfs;
  position: relative;
  margin: 0;
  padding: .45rem 0 .45rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: .875rem;
}
.wf-steps li:last-child { border-bottom: 0; }
.wf-steps li::before {
  content: counter(wfs) ".";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 600;
}
.wf-steps code {
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--ink-soft);
}

.ex-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--rule);
  color: var(--ink); font-weight: 600; font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.ex-head .tag { float: none; flex: none; }

/* The tool-call rows are the point of this section: they show what the assistant
   actually spends on an answer, rather than describing it in prose. */
.calls {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.25rem;
  padding: .8rem 1rem; background: var(--paper-2);
  font-family: var(--mono); font-size: .8125rem; color: var(--ink);
  /* .mono uppercases labels, which is right for an eyebrow and wrong here: these are
     real tool names and match_profile is not spelled MATCH_PROFILE. */
  text-transform: none; letter-spacing: .01em;
}
.calls b { font-weight: 600; }
.calls .out { color: var(--mute); }
@media (max-width: 34rem) {
  .calls { grid-template-columns: 1fr; gap: .15rem; }
  .calls .out { margin-bottom: .45rem; }
}

/* Corpus figures on connect/home: must NOT inherit section .proof grid, or
   each <strong> becomes its own row at 390 px (eye P1 2026-09-04 / CP-50720). */
.corpus-now {
  margin: 1.25rem 0 0;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  display: block;
}
.corpus-now strong { color: var(--accent); font-weight: 700; }
.corpus-now.corpus-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .75rem;
}
.corpus-now.corpus-metrics strong { color: var(--ink); }
.corpus-metric {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: .2rem;
  white-space: nowrap;
}
.corpus-metric-separator { color: var(--mute); }
@media (max-width: 40rem) {
  /* At phone width the context label takes its own line, freeing enough measure for
     both count-plus-label units to remain intact rather than wrapping “units” alone. */
  .corpus-now.corpus-metrics { gap: .35rem .75rem; }
  .corpus-now-label { flex-basis: 100%; }
}
.corpus-now-detail {
  margin: .75rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
  font-size: .8125rem;
  color: #4c5164;
}

/* ---------------------------------------------------------------- coverage */

.coverage-table { margin-top: 2rem; }
.table-scroll { overflow-x: auto; margin-top: 2rem; }
.coverage-table .table-scroll { margin-top: .6rem; }
.table-scroll-hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.45;
}

/* The cue belongs on the narrow layout, but its labelled relationship remains available
   to assistive technology when the table fits without a separate scroll path. */
@media (min-width: 46.0625rem) {
  .table-scroll-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Edge shadows so a table wider than the screen reads as scrollable instead of as a
   header clipped mid-word. Only below the width where the 40rem table stops fitting:
   these gradients paint whether or not anything actually overflows, so applying them
   everywhere would leave grey smudges beside every table on a desktop. */
@media (max-width: 46rem) {
  .table-scroll {
    background:
      radial-gradient(farthest-side at 0 50%, rgba(20, 24, 45, .13), rgba(20, 24, 45, 0)) 0 0 / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(20, 24, 45, .13), rgba(20, 24, 45, 0)) 100% 0 / 14px 100% no-repeat scroll;
  }
  /* Neither of these can overflow, so neither needs the hint. */
  .table-scroll.is-message, .post .table-scroll { background: none; }
}
table { border-collapse: collapse; width: 100%; min-width: 40rem; }
/* When the table holds a status message instead of rows there are no columns to keep
   wide, and the 40rem floor would clip the message off a phone screen. */
.table-scroll.is-message table { min-width: 0; }
.table-scroll.is-message thead { display: none; }
thead th {
  text-align: left; font: 600 .6875rem/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute); padding: 0 1rem .6rem 0;
  border-bottom: 1px solid var(--ink);
}
tbody td { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
tbody td:first-child { font-weight: 600; }
tbody .when { font-family: var(--mono); font-size: .8125rem; color: var(--mute); }

.state { font: 600 .6875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.state-live    { color: #1c6b3a; }
.state-stale   { color: var(--oxblood); }
.state-planned { color: var(--mute); }

/* ---------------------------------------------------------------- pricing */

.tiers { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 52rem) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  background: #fff; border: 1px solid var(--rule); border-radius: 3px;
  padding: 1.5rem; display: flex; flex-direction: column;
}
.tier-mark { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.tier .mono { color: var(--mute); }
.tier .price { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.04em; margin: .75rem 0 .25rem; }
.tier .price small { font-size: .875rem; font-weight: 400; letter-spacing: 0; color: var(--mute); }
.tier .free-note { color: var(--mute); font-size: .8125rem; margin-bottom: 1.25rem; }
.tier ul { list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: .9375rem; }
.tier li { padding: .4rem 0 .4rem 1.1rem; position: relative; color: #4c5164; border-bottom: 1px solid var(--paper-2); }
.tier li::before { content: "·"; position: absolute; left: .25rem; color: var(--brass); font-weight: 700; }
.tier form, .tier .btn { margin-top: auto; }

.field { display: flex; flex-wrap: wrap; gap: .5rem; }
input[type="email"], input[type="text"] {
  flex: 1 1 12rem; min-width: 0;
  font: 400 .9375rem/1 var(--sans); padding: .8rem .75rem;
  border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink);
}
input::placeholder { color: #9aa0ae; }
input:focus-visible { border-color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.result {
  margin-top: .9rem; font-family: var(--mono); font-size: .8125rem; line-height: 1.6;
  padding: .8rem .9rem; border-radius: 3px; border: 1px solid var(--rule);
  background: var(--paper-2); word-break: break-all;
}
.result[hidden] { display: none; }
.result-bad { border-color: var(--oxblood); color: var(--oxblood); background: #fbf1f2; }
.result-key { background: var(--ink); color: #dfe2ef; border-color: var(--ink); }
.result-key b { color: var(--brass); display: block; margin-top: .4rem; font-size: .9375rem; }

.legal { color: var(--mute); font-size: .8125rem; margin-top: 1.5rem; max-width: 62ch; }

/* ---------------------------------------------------------------- faq */

.faq { margin-top: 2.5rem; border-top: 1px solid var(--rule); }
.faq > div { border-bottom: 1px solid var(--rule); padding: 1.5rem 0; display: grid; gap: .4rem 2.5rem; }
@media (min-width: 52rem) { .faq > div { grid-template-columns: 16rem 1fr; } }
@media (min-width: 68rem) { .faq > div { grid-template-columns: 20rem 1fr; } }
.faq h3 { font-size: 1rem; letter-spacing: -0.01em; }
.faq p { color: #4c5164; margin: 0; font-family: var(--sans); font-size: 1rem; line-height: 1.6; }

/* ---------------------------------------------------------------- signup band */

.claim { background: var(--ink); color: var(--paper); }
.claim .band-intro { color: #c6c9d8; }
.claim .ref { color: #8e93ad; }
.claim .ref .num { color: var(--paper); }
.claim .ref .line { background: var(--rule-dark); }
.claim input[type="email"], .claim input[type="text"] {
  background: #171c3d; border-color: var(--rule-dark); color: var(--paper);
}
.claim .result { background: #171c3d; border-color: var(--rule-dark); color: #c6c9d8; }
.claim .legal { color: #8e93ad; }
.claim-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
/* The aside's label is a column heading, so it lines up with the h2 beside it rather
   than with the section eyebrow a row above. */
.ref-aside { margin-top: .5rem; }
@media (min-width: 56rem) { .claim-grid { grid-template-columns: 1.1fr .9fr; } }

/* ---------------------------------------------------------------- footer */

/* Home chrome uses site-footer (CP-40262); inner pages keep their semantic bare footer,
   so the labelled inner nav joins the same responsive system rather than becoming a second one. */
.site-footer, .foot, footer {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 3.5rem;
  color: var(--mute);
  font-size: .875rem;
}
.site-footer p, .foot p, footer > .wrap > p { max-width: 70ch; margin-bottom: .6rem; }
.site-footer-nav, .foot-top, footer > .wrap > nav[aria-label="Footer"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem 1.5rem;
  margin: 1rem 0 0;
  align-items: baseline;
}
@media (min-width: 40rem) {
  .site-footer-nav, .foot-top, footer > .wrap > nav[aria-label="Footer"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 56rem) {
  .site-footer-nav, .foot-top, footer > .wrap > nav[aria-label="Footer"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.site-footer-nav a, .foot-top a, footer > .wrap > nav[aria-label="Footer"] a {
  min-width: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- blog */

.post-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.post-list li { border-bottom: 1px solid var(--rule); padding: 1.1rem 0; }
.post-list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.post-list a:hover { color: var(--indigo); text-decoration: underline; }
.empty {
  margin-top: 2rem; border: 1px dashed var(--rule); border-radius: 3px;
  padding: 1.75rem; background: #fff; max-width: 46rem;
}
.empty h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
.empty p { color: #4c5164; font-size: .9375rem; }

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .5s cubic-bezier(.2,.7,.3,1) both; }
  .reveal-1 { animation-delay: .04s; }
  .reveal-2 { animation-delay: .12s; }
  .reveal-3 { animation-delay: .2s; }
  @keyframes rise { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------- blog posts */

.post { max-width: 44rem; }
.post-title {
  font-size: clamp(1.9rem, 4.2vw, 2.8rem); line-height: 1.05; margin-bottom: 1rem;
}
.post-standfirst {
  font-size: 1.125rem; color: #4c5164; line-height: 1.6; margin-bottom: 2.5rem;
  padding-bottom: 2rem; border-bottom: 1px solid var(--rule);
}
.post h2 {
  font-size: 1.4rem; margin: 2.75rem 0 .9rem; letter-spacing: -0.02em; max-width: none;
}
.post h3 { font-size: 1.0625rem; margin: 1.75rem 0 .5rem; }
.post p { color: #35394a; margin-bottom: 1.15rem; }
.post ul, .post ol { color: #35394a; margin: 0 0 1.4rem; padding-left: 1.2rem; }
.post li { margin-bottom: .5rem; }
.post strong { color: var(--ink); }
.post blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--brass); color: #4c5164;
}
.post code {
  font-family: var(--mono); font-size: .875em; background: var(--paper-2);
  padding: .1em .35em; border-radius: 2px;
}
.post-code {
  background: var(--ink); color: #dfe2ef; padding: 1.1rem 1rem; border-radius: 3px;
  overflow-x: auto; margin: 0 0 1.5rem; font-family: var(--mono);
  font-size: .8125rem; line-height: 1.65;
}
.post-code code { background: none; padding: 0; color: inherit; font-size: inherit; }
.post table { min-width: 0; }
.post .table-scroll { margin: 1rem 0 1.75rem; }
.post tbody td:first-child { font-weight: 500; }

.post-cta {
  margin-top: 3rem; padding: 1.75rem; border: 1px solid var(--rule);
  border-radius: 3px; background: #fff;
}
.post-cta p { margin-bottom: 1.1rem; font-size: .9375rem; }

.post-list { border-top: 1px solid var(--rule); margin-top: 2.5rem; }
.post-list li { border-bottom: 1px solid var(--rule); padding: 1.5rem 0; }
.post-list a { font-size: 1.125rem; }
.post-blurb { color: #4c5164; font-size: .9375rem; margin: .45rem 0 .6rem; max-width: 72ch; }
.post-meta { color: var(--mute); display: block; }

/* ---------------------------------------------------------------- consent */

/* The consent UI is vanilla-cookieconsent's own (assets/vendor/), themed here through
   its CSS custom properties so it looks like the rest of the site rather than like a
   bolted-on widget. */
#cc-main {
  --cc-font-family: var(--sans);
  --cc-bg: #ffffff;
  --cc-primary-color: var(--ink);
  --cc-secondary-color: #4c5164;
  --cc-btn-primary-bg: var(--brass);
  --cc-btn-primary-color: #17110a;
  --cc-btn-primary-border-color: var(--brass);
  --cc-btn-primary-hover-bg: #cb9a34;
  --cc-btn-primary-hover-color: #17110a;
  --cc-btn-secondary-bg: var(--paper-2);
  --cc-btn-secondary-color: var(--ink);
  --cc-btn-secondary-border-color: var(--rule);
  --cc-btn-secondary-hover-bg: var(--rule);
  --cc-separator-border-color: var(--rule);
  --cc-toggle-on-bg: var(--ink);
  --cc-toggle-readonly-bg: var(--rule);
  --cc-modal-border-radius: 3px;
  --cc-btn-border-radius: 3px;
  --cc-link-color: var(--indigo);
}

/* ---------------------------------------------------------------- coverage page */

.cov-summary {
  display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr);
  background: var(--rule); border: 1px solid var(--rule); border-radius: 3px;
  margin: 2.5rem 0 2.5rem; overflow: hidden;
}
@media (min-width: 52rem) { .cov-summary { grid-template-columns: repeat(4, 1fr); } }
.cov-stat { background: #fff; padding: 1rem 1.1rem; }
.cov-stat-label { display: block; color: var(--mute); margin-bottom: .35rem; }
.cov-stat-value { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }
/* One rhythm for the whole page: a generous gap ABOVE a section heading, a small one
   below it, and the same gap between every block. Before this each block set its own
   spacing and the page read as three designs stacked. */
.cov-h {
  font-size: 1.25rem; margin: 3.5rem 0 .25rem; letter-spacing: -0.02em;
  max-width: none;
}
.cov-h + .band-intro { margin-bottom: 1.5rem; }
.cov-h + .faq, .cov-h + .band-intro + .faq { margin-top: 1.25rem; }
.coverage-page .table-scroll { margin-bottom: 1rem; }
.coverage-page .post-cta { margin-top: 3.5rem; }

/* ---- changelog -------------------------------------------------------------
   The page had `prose` and `entry` classes that this stylesheet never defined, so
   it rendered as unstyled body text under the site's masthead — the one page that
   looked like a draft. Built here on the same parts as the setup guide: the ink
   field for the hero, mono for anything that is a reference rather than a sentence.

   The DATE is the structural element, not the title. A changelog is read by asking
   "what has moved since I last looked", so the date is what the eye needs to land on
   and it gets the mono treatment the rest of the site reserves for references. */
/* The hero shares the body's measure, so the h1 and the first entry sit on ONE left
   edge. Without this the hero used the 74rem page wrap and the entries the 58rem
   reading wrap, putting them 128px apart — visible as a step down the page, and the
   same fault the setup guide had before `.guide .wrap` narrowed its hero to match.
   The masthead and footer deliberately stay on the wider gutter: the chrome frames
   the page, the reading column sits inside it. */
.log-hero .wrap { max-width: 58rem; }
.log-hero .lede { margin-bottom: 1.6rem; }
.log-latest {
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: #8b90ad; margin: 0;
}
.log-latest b { color: var(--brass); font-weight: 700; }

.log { max-width: 58rem; padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem); }

.log .entry { padding-block: 2.25rem; border-top: 1px solid var(--rule); }
.log .entry:first-child { border-top: 0; padding-top: 0; }

/* The date leads and the title follows it on the same line, so scanning down the
   page is scanning down a column of dates. On a phone the title wraps beneath
   rather than being squeezed, which is why this is flex-wrap and not a grid. */
.log .entry h2 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem); margin-bottom: 1.1rem;
}
.log .entry h2 .when {
  font-family: var(--mono); font-size: .8125rem; font-weight: 700;
  letter-spacing: .04em; color: var(--brass); white-space: nowrap;
}
.log .entry h2 .what { color: var(--ink); }

.log .entry p { margin: 0 0 1rem; max-width: 62ch; line-height: 1.65; }
.log .entry ul { margin: 0 0 1rem; padding: 0; list-style: none; max-width: 62ch; }
.log .entry li {
  position: relative; padding-left: 1.35rem; margin-bottom: .7rem; line-height: 1.6;
}
/* A ruled tick rather than a bullet dot: the same hairline vocabulary the record
   blocks use, so a list here reads as entries in a register. */
.log .entry li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .7rem; height: 1px; background: var(--brass);
}
.log .entry li:last-child, .log .entry p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- rekvira connect / inner pages */

.page { padding-block: clamp(2rem, 5vw, 3.5rem); max-width: 44rem; }
/* The regulation ledger needs one readable six-column measure at desktop; prose inside
   it keeps its own max-width, while the phone still uses the ordinary .wrap gutters. */
.coverage-page { max-width: 52rem; }
.badge {
  display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .75rem;
}
.key {
  font-family: var(--mono); font-size: .9rem; padding: .75rem 1rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  word-break: break-all; margin: .75rem 0;
}
.ghost {
  font: inherit; font-size: .875rem; padding: .45rem .85rem;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; color: var(--ink-soft);
}
.ghost:hover { border-color: var(--accent); color: var(--ink); }
.playbook-list { padding-left: 1.25rem; max-width: 62ch; }
.playbook-list li { margin-bottom: .5rem; }
.log .entry code {
  font-family: var(--mono); font-size: .875em;
  background: var(--paper-2); padding: .1em .35em; border-radius: 2px;
}

/* The honest footnote under the country table. Smaller and quieter than the intro
   above it: it qualifies the number rather than selling it, and a qualification that
   shouts reads as a disclaimer. */
.cov-note { font-size: .84rem; opacity: .78; margin-top: .6rem; }
/* The one figure on that table worth the reader's eye. */
td.strong { font-weight: 600; }

/* ---------------------------------------------------------------- status (P6)
   Two-column label/value tables. The global `table { min-width: 40rem }` floor exists so
   the six-column coverage table keeps its columns readable inside .table-scroll; these
   have two columns and no horizontal overflow to protect, and that floor clipped them off
   a 390 px screen. Row labels are <th scope="row">, which the base sheet only styles in
   thead, so they are set here rather than left to the browser default (centred). */
.status-table { min-width: 0; margin: 0 0 2rem; }
.status-table caption {
  text-align: left; font: 600 .6875rem/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute); padding: 0 0 .6rem;
  border-bottom: 1px solid var(--ink);
}
.status-table tbody th {
  text-align: left; font-weight: 600; width: 42%;
  padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.status-table .status-note {
  display: block; color: var(--mute); font-size: .8125rem; margin-top: .2rem;
}
.status-scope { color: var(--mute); font-size: .875rem; max-width: 62ch; margin: -1.2rem 0 2rem; }
@media (max-width: 30rem) {
  .status-table tbody th { width: 50%; }
}

/* ---------------------------------------------------------------- home pricing strip (CP-50702) */
.pricing-strip {
  margin-top: 1.25rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  max-width: 52rem;
}
.pricing-strip .price-line {
  margin: 0 0 .65rem;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pricing-strip .price-line strong { color: var(--accent); font-weight: 700; }
.pricing-strip p { margin: 0 0 .55rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.pricing-strip p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- buyer landing (CP-50746)
   The public page leads with one buyer path. Technical telemetry remains available, but it
   is deliberately collapsed so it supports trust without turning the sales page into a log. */

.buyer-cases {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 52rem) { .buyer-cases { grid-template-columns: repeat(3, 1fr); } }
.buyer-case {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.35rem;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}
.buyer-case .case-role {
  margin: 0 0 1.5rem;
  color: var(--accent);
  font-size: .8125rem;
  font-weight: 700;
}
.buyer-case h3 { font-size: 1.2rem; line-height: 1.15; margin-bottom: .75rem; }
.buyer-case p:last-child { margin: auto 0 0; color: var(--ink-soft); font-size: .9375rem; line-height: 1.58; }
.section-link { margin: 1.5rem 0 0; color: var(--ink-soft); font-size: .9375rem; }

.proof-layout { display: grid; gap: 1.5rem 3rem; align-items: start; }
@media (min-width: 56rem) { .proof-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.proof-layout h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 16ch; margin-bottom: .9rem; }
.proof-trail {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.proof-trail li {
  display: grid;
  grid-template-columns: minmax(7.5rem, .7fr) minmax(0, 1.3fr);
  gap: .8rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: .9375rem;
  line-height: 1.55;
}
.proof-trail strong { color: var(--ink); }
.proof-layout .proof-boundary { grid-column: 1 / -1; margin: 0; color: var(--mute); font-size: .875rem; }

.technical-section { border-top: 1px solid var(--rule); padding-block: 1.25rem; }
.technical-evidence {
  max-width: 62rem;
  margin: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.technical-evidence summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: .7rem 0;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: .9375rem;
  font-weight: 600;
}
.technical-evidence summary:hover { color: var(--accent); }
.technical-evidence[open] summary { color: var(--ink); border-bottom: 1px solid var(--rule); }
.technical-evidence .sessions { margin: 1.5rem 0; }
.technical-evidence .table-scroll { margin: 1rem 0 1.25rem; }
.technical-intro { margin: 1rem 0 0; max-width: 58ch; color: var(--ink-soft); font-size: .875rem; }

.final-cta { background: var(--surface); border-top: 1px solid var(--rule); }
.final-cta-grid { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between; }
.final-cta h2 { max-width: 22ch; font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: .65rem; }
.final-cta p { margin: 0; max-width: 58ch; color: var(--ink-soft); }
.final-cta .btn { flex: none; }

.page-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--rule); background: var(--surface); }
.page-hero h1 { max-width: 19ch; font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: 1rem; }
.playbooks-page .playbook-list { margin-top: 1.75rem; }
.playbooks-page .playbook-list li { margin-bottom: .85rem; line-height: 1.6; }

@media (max-width: 30rem) {
  .hero-price { font-size: .875rem; }
  .buyer-case { padding: 1.1rem; }
  .buyer-case .case-role { margin-bottom: 1rem; }
  .proof-trail li { grid-template-columns: 1fr; gap: .25rem; }
  .final-cta-grid .btn { width: 100%; text-align: center; }
  .technical-evidence summary { align-items: flex-start; padding-block: .8rem; line-height: 1.45; }
}