/* Ratably — "Redline" design system.
   Ported from marketing/ratably/site/src/a_redline.html (CMO pick, 2026-09-19),
   with the audit-window clock promoted into the hero from c_countdown.html.
   Paper and ink, with the auditor's red pen. Light only, by design: this is a
   document, and documents are on paper. */

:root {
  --paper: #F6F8F5; --sheet: #FFFFFF; --ink: #10202F; --ink2: #47586A;
  --green: #0C6B50; --green-soft: #E1EFE9; --red: #C6362C; --hi: #FFE873;
  --rule: #CCD6D0; --amber: #8A6516;
  --display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --hand: "Caveat", "Bradley Hand", cursive;
  /* type and spacing the shared components use (the app's h1 is --h1-app; the public pages' is --h1-page) */
  --h1-hero: clamp(2.3rem, 5.6vw, 4.1rem); --h1-page: clamp(2rem, 4.6vw, 3rem);
  --h1-app: clamp(1.7rem, 3.6vw, 2.2rem); --h2-section: clamp(1.4rem, 2.6vw, 1.9rem); --gap: 20px;
}
* { box-sizing: border-box }
body { background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--body); margin: 0 }
.wrap { max-width: 1160px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px) }
a { color: inherit }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; letter-spacing: -.015em }
h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); line-height: .99; font-weight: 800 }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.05; font-weight: 700 }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: 0 }
p { margin: 0 }
[hidden] { display: none !important }
img { max-width: 100% }
.eyebrow { font: 500 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green) }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* buttons */
.btn { display: inline-block; padding: .8em 1.25em; border: 1.5px solid var(--ink); border-radius: 3px;
  text-decoration: none; font-weight: 600; font-size: 1rem; background: transparent; color: var(--ink);
  cursor: pointer; font-family: var(--body); text-align: center }
.btn-primary, .capture button { background: var(--ink); color: #fff; border-color: var(--ink) }
.btn:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: #fff }
.btn:disabled { opacity: .45; cursor: not-allowed }
.btn-sm { padding: .55em 1em; font-size: .92rem }