/* =============================================================================
   site.css, the one stylesheet every page on oheyinc.com links.

   WHY THIS FILE EXISTS. Until 2026-09-07 the front door was a monochrome
   editorial page on a near black ground and the five secondary pages were plain
   white legal documents with their own copy of a small stylesheet, five times
   over. A visitor who clicked Pricing left the brand and arrived somewhere
   else. That is the mismatch this file closes.

   THE THEME, unchanged from index.html and restated here so a reader of this
   file does not have to open that one:

     One near black ground. One white voice. One gray register. One typeface,
     one weight. No texture, no gradients. Hierarchy is carried by type size and
     brightness, plus one drop of signal red: hairlines that run hot, focus
     rings, the terminal period after a heading. Red never carries copy, it
     points at it.

   WHAT IS ADDED HERE and is not on the home page: a reading layout for long
   documents. Measure about 65ch, a clear h2 and h3 rhythm, numbered sections
   that a reader can scan, tables that scroll inside their own box rather than
   pushing the page sideways, and visible focus on every interactive thing.

   SELF CONTAINED, and that is a promise the privacy policy makes rather than a
   preference. No webfont host, no CDN, no external anything. The system stack
   is the typeface. backend/scripts/site_check.sh fails the build if a page
   reaches off the origin.

   index.html keeps its own inline CSS and does NOT link this file. The home
   page is a single long editorial surface with animation hooks, a film frame
   and a record block; folding it in here would mean one of the two pages
   compromising. This file is the theme as a DOCUMENT reads it.
   ========================================================================== */

:root {
  --ink:   #0D0D0D;                        /* the page. the only ground there is */
  --white: #FFFFFF;                        /* headlines, numbers, the payoff */
  --text:  rgba(255, 255, 255, 0.92);      /* body at full conviction */
  --mute:  rgba(255, 255, 255, 0.60);      /* secondary copy */
  --faint: rgba(255, 255, 255, 0.40);      /* microtype, metadata */
  --hair:  rgba(255, 255, 255, 0.12);      /* structural hairline */
  --red:   #FF4433;                        /* signal red. the only color here */

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --page-max: 1560px;
  --pad-edge: clamp(20px, 6vw, 104px);
  --sect:     clamp(56px, 9vh, 104px);

  /* the reading measure. 65ch is the long document setting; the home page runs
     at 58ch because its columns sit beside other things and these do not. */
  --measure:  65ch;

  --fs-h1:    clamp(34px, 5vw, 62px);
  --fs-h2:    clamp(21px, 2.1vw, 27px);
  --fs-h3:    clamp(17px, 1.5vw, 19px);
  --fs-lead:  clamp(18px, 1.7vw, 22px);
  --fs-body:  clamp(16px, 1.15vw, 17.5px);
  --fs-small: 13px;

  --dur-hover: 180ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── reset and base ──────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  /* No smooth scrolling: this sheet also dresses the Terms inside the desk's
     acceptance frame, where a programmatic jump to the end must land at once
     for the read-to-the-end sentinel to be seen. */
  scroll-padding-top: 88px;
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--red); color: var(--ink); }

a { color: inherit; text-decoration: none; }

/* FOCUS IS VISIBLE ON EVERY INTERACTIVE THING, and the ring is the signal red
   so it cannot be confused with a hover state. A legal page is read by people
   using a keyboard more often than a marketing page is, and an outline that
   only appears on :focus-visible still appears for them. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

/* The reading column. Wider than the home page's, narrower than the viewport,
   and it is what makes a five thousand word document readable. */
.doc { max-width: var(--measure); }

/* ── the skip link ───────────────────────────────────────────────────────── */

.skip-link {
  position: fixed;
  top: -64px; left: 16px;
  z-index: 300;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  border-radius: 999px;
  padding: 10px 18px;
  transition: top var(--dur-hover) var(--ease);
}
.skip-link:focus { top: 12px; }

/* ── the nav, the same bar the home page carries ─────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--pad-edge);
  min-height: 68px;
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair);
}

.nav__brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* The RingMaster RM lettermark, the same vector the app icon uses, painted as a
   mask so it takes the current ink colour. Generated by
   scripts/make_rm_mark.py; do not hand edit ringmaster-mark.svg. */
.nav__mark {
  height: 16px;
  aspect-ratio: 600 / 482.969;
  display: block;
  flex: 0 0 auto;
  background: var(--white);
  -webkit-mask: url("ringmaster-mark.svg") center / contain no-repeat;
          mask: url("ringmaster-mark.svg") center / contain no-repeat;
  transition: background var(--dur-hover) ease;
}
.nav__brand:hover .nav__mark { background: var(--red); }

.nav__wordmark {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--mute);
  white-space: nowrap;
}
.nav__wordmark b { font-weight: 500; color: var(--white); }

.nav__byline {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--faint);
  white-space: nowrap;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--hair);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav__links a,
.nav__links strong {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--mute);
  padding: 6px 0;
  transition: color var(--dur-hover) ease;
}
.nav__links a:hover { color: var(--white); }
/* the page you are on carries a red hairline, the same mark the home page's
   scrollspy uses for the section you are in */
.nav__links strong { color: var(--white); }
.nav__links strong::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--red);
}

.nav__cta {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  padding: 9px 18px;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.nav__cta:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* ── page head ───────────────────────────────────────────────────────────── */

main { display: block; padding-block: clamp(40px, 7vh, 72px) 0; }

.page-head { padding-bottom: clamp(28px, 4vh, 44px); }

h1, .h1 {
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--white);
  max-width: 16ch;
  text-wrap: balance;
}

.accent { color: var(--red); }
.sep { color: var(--red); }

.updated {
  margin-top: 18px;
  font-size: var(--fs-small);
  color: var(--faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--mute);
  line-height: 1.55;
  max-width: var(--measure);
  margin-top: 24px;
  text-wrap: pretty;
}
.lead b { color: var(--text); font-weight: 500; }

/* ── the document rhythm ─────────────────────────────────────────────────── */

/* h2 opens with a full width hairline, which is what gives a long legal page
   its sections without boxes or background tints. */
h2 {
  margin-top: clamp(44px, 6vh, 76px);
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--white);
  max-width: 34ch;
  text-wrap: balance;
}

h3 {
  margin-top: 34px;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.35;
  color: var(--white);
  max-width: 40ch;
}

h2 + p, h2 + ul, h2 + ol, h2 + div, h2 + table, h2 + .wrapper-scroll { margin-top: 16px; }
h3 + p, h3 + ul, h3 + ol { margin-top: 12px; }

p {
  margin-top: 14px;
  max-width: var(--measure);
  color: var(--mute);
  line-height: 1.7;
  text-wrap: pretty;
}
p b, li b, td b { color: var(--text); font-weight: 500; }
p strong, li strong, td strong { color: var(--text); font-weight: 500; }

ul, ol { margin-top: 14px; padding-left: 1.25rem; max-width: var(--measure); }
li { margin-top: 10px; color: var(--mute); line-height: 1.7; }
li::marker { color: var(--faint); }

/* the in-text link: a plain underline, like a page from a book */
a.tlink,
main p a, main li a, main td a, main dd a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--faint);
  transition: text-decoration-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
a.tlink:hover,
main p a:hover, main li a:hover, main td a:hover, main dd a:hover {
  color: var(--white);
  text-decoration-color: var(--red);
}

hr, .rule {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: clamp(40px, 6vh, 72px) 0 0;
  max-width: none;
}

blockquote {
  margin-top: 22px;
  padding-left: 20px;
  border-left: 1px solid var(--red);
  max-width: var(--measure);
}
blockquote p:first-child { margin-top: 0; }

/* ── the callout: a hairline box, no fill, no tint ───────────────────────── */

.note {
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid var(--hair);
  border-left: 1px solid var(--red);
  max-width: var(--measure);
}
.note > p:first-child { margin-top: 0; }
.note p { color: var(--text); }

/* ── tables scroll inside their own box ──────────────────────────────────── */

/* A wide table used to push the whole page sideways on a phone, which breaks
   every other column on the page to show one. It scrolls inside its own
   container instead, and the container is focusable so a keyboard can reach
   the scroll. */
.table-scroll {
  margin-top: 20px;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--hair);
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  min-width: 420px;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
  color: var(--mute);
  line-height: 1.6;
}
th {
  font-weight: 500;
  color: var(--white);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
tr:last-child td { border-bottom: 0; }
td:first-child { color: var(--text); }

/* ── key and value rows, the component the home page is built from ───────── */

.kv { margin-top: 26px; max-width: 980px; }
.kv__row {
  display: grid;
  grid-template-columns: minmax(150px, 260px) 1fr;
  gap: clamp(16px, 3vw, 44px);
  padding: 22px 0;
  border-top: 1px solid var(--hair);
}
.kv__row:last-child { border-bottom: 1px solid var(--hair); }
.kv__k { font-size: 16px; font-weight: 500; color: var(--white); }
.kv__k small { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--faint); margin-top: 6px; }
.kv__v { color: var(--mute); line-height: 1.7; max-width: var(--measure); }
.kv__v p { margin-top: 0; }
.kv__v p + p { margin-top: 12px; }

/* ── plan cards ──────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 30px;
  max-width: 1080px;
}

.plan {
  border: 1px solid var(--hair);
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
}
/* the paid card runs its top hairline hot. one drop of red, no fill, no badge,
   and deliberately not a "most popular" ribbon: there are two plans and the
   reader picks on timing, not on a sticker. */
.plan--paid { border-top: 1px solid var(--red); }

.plan__name { font-size: 20px; font-weight: 500; color: var(--white); letter-spacing: -0.01em; }
.plan__price {
  margin-top: 14px;
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.plan__price small { font-size: 15px; font-weight: 500; color: var(--faint); letter-spacing: 0; margin-left: 2px; }
.plan__say { margin-top: 16px; color: var(--mute); max-width: none; }

.plan__list { margin-top: 22px; padding: 0; list-style: none; max-width: none; }
.plan__list li {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--hair);
  color: var(--mute);
}
.plan__list li:first-child { border-top: 0; padding-top: 0; }
.plan__list li b { color: var(--text); }
/* the connector row, on both cards */
.plan__list li.plan__ai { border-top: 1px solid var(--red); }

.plan__foot { margin-top: auto; padding-top: 24px; }
.plan__foot p { margin-top: 0; color: var(--faint); font-size: var(--fs-small); line-height: 1.65; max-width: none; }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 999px;
  padding: 14px 26px;
  transition: opacity 200ms ease, transform 200ms ease;
}
.btn:hover { opacity: 0.85; transform: translateY(-1px); }
.btn:hover .arrow { color: var(--red); }

.btn--quiet {
  color: var(--white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.30);
}
.btn--quiet:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.arrow { display: inline-block; transition: transform var(--dur-hover) ease; }
a:hover .arrow, button:hover .arrow { transform: translateX(4px); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }

/* ── the live record block, read from the record file ────────────────────── */

/* Nothing numeric is in the markup on purpose. The block starts hidden and in
   its fallback state, so a failed read, a blocked request or a browser with no
   script shows the honest sentence rather than an empty cell where a figure
   should be. The paper label sits OUTSIDE the fetched region and is always on
   the page, so there is no frame in which a figure renders without it. */
.record { margin-top: 30px; max-width: 980px; }
.record__eyebrow {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 16px;
  max-width: none;
}
.record__trio {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 22px;
  align-items: end;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
}
.record__fig {
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.record__fig--null { font-size: clamp(28px, 3.6vw, 50px); color: var(--mute); }
.record__fig--gap  { font-size: clamp(28px, 3.6vw, 50px); color: var(--red); }
.record__k { margin-top: 10px; font-size: 14px; color: var(--text); line-height: 1.45; max-width: 24ch; }
.record__rule {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  color: var(--mute);
  max-width: 70ch;
}
.record__label { margin-top: 22px; font-size: 14px; color: var(--text); max-width: none; }
.record__asof { margin-top: 6px; font-size: var(--fs-small); color: var(--faint); max-width: none; }
.record__fallback { margin-top: 22px; color: var(--mute); }

/* ── steps, for the connector how-to ─────────────────────────────────────── */

.steps { margin-top: 22px; padding-left: 0; list-style: none; counter-reset: step; max-width: var(--measure); }
.steps > li {
  counter-increment: step;
  position: relative;
  margin-top: 0;
  padding: 16px 0 16px 44px;
  border-top: 1px solid var(--hair);
}
.steps > li:last-child { border-bottom: 1px solid var(--hair); }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 16px;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--red);
}

/* ── code, for the one command a reader pastes ───────────────────────────── */

code, .code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--white);
}
pre.code {
  display: block;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--hair);
  border-left: 1px solid var(--red);
  overflow-x: auto;
  max-width: var(--measure);
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre;
}
pre.code:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ── footer ──────────────────────────────────────────────────────────────── */

.footer {
  margin-top: var(--sect);
  padding: 56px var(--pad-edge) 48px;
  border-top: 1px solid var(--hair);
  font-size: var(--fs-small);
  color: var(--faint);
}
.footer__legal { max-width: 880px; font-size: var(--fs-small); line-height: 1.75; color: var(--faint); }
.footer__legal b { color: var(--mute); font-weight: 500; }
.footer__legalnav { margin-top: 18px; font-size: var(--fs-small); line-height: 2.1; color: var(--mute); }
.footer__legalnav a { color: var(--mute); transition: color var(--dur-hover) ease; }
.footer__legalnav a:hover { color: var(--white); }
.footer__base {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer__base a { color: var(--mute); transition: color var(--dur-hover) ease; }
.footer__base a:hover { color: var(--white); }

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .nav { flex-wrap: wrap; padding-block: 12px; row-gap: 10px; }
  .nav__links { order: 3; width: 100%; justify-content: flex-start; gap: 16px; }
  .kv__row { grid-template-columns: 1fr; gap: 8px; }
  .record__trio { grid-template-columns: 1fr 1fr; gap: 16px; }
  .record__trio > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .nav__byline { display: none; }
  .nav__cta { font-size: 12px; padding: 8px 14px; }
  .plan { padding: 22px 18px 24px; }
}

/* ── reduced motion: craft includes restraint ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}