/* CloudCover Voice — site styles
   Palette: cool grey-blue ground, navy ink, one electric blue, one "answered" green,
   and a single night panel for the transcript. No cards-with-shadows, no all-caps labels. */

:root {
  --bg: #EEF1F4;
  --paper: #FFFFFF;
  --ink: #13202E;
  --muted: #5B6778;
  --line: #CBD3DC;
  --blue: #1F5EFF;
  --blue-ink: #163FB8;
  --green: #1C8A5A;
  --night: #0E1B2B;
  --night-line: #243548;
  --night-muted: #9AA8B8;
  --max: 1120px;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header { padding: 22px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 14px; height: 14px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(28,138,90,0.18); }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
.nav a:hover { color: var(--blue); }
.nav a.cta { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; }
.nav a.cta:hover { background: var(--blue); }
@media (max-width: 720px) { .nav a:not(.cta) { display: none; } }

/* Buttons */
.btn { display: inline-block; padding: 14px 22px; border-radius: 8px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; font-size: 16px; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-ink); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); }
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* Hero */
.hero { padding: 48px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; } }
h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.02; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 22px; font-variation-settings: "wdth" 96; }
.lead { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 34em; margin: 0 0 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* The one bold element: the transcript */
.transcript {
  background: var(--night);
  color: #E8EEF5;
  border-radius: 14px;
  padding: 26px 28px 22px;
  font-family: var(--mono);
  font-size: 14.5px;
  line-height: 1.6;
}
.transcript-head { display: flex; justify-content: space-between; align-items: baseline; color: var(--night-muted); font-size: 13px; padding-bottom: 14px; border-bottom: 1px solid var(--night-line); margin-bottom: 16px; }
.transcript-head .live { color: #7FE0AE; }
.turn { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; margin: 0 0 14px; opacity: 1; }
.turn .who { color: var(--night-muted); }
.turn.caller .who { color: #FFD28A; }
.turn.system { grid-template-columns: 1fr; color: #7FE0AE; border-top: 1px solid var(--night-line); padding-top: 14px; margin-top: 18px; }
@media (max-width: 480px) { .turn { grid-template-columns: 1fr; gap: 4px; } }

/* The single page-load motion: lines arrive in order */
.transcript.animate .turn { opacity: 0; transform: translateY(6px); animation: arrive 420ms ease-out forwards; }
.transcript.animate .turn:nth-child(2) { animation-delay: 150ms; }
.transcript.animate .turn:nth-child(3) { animation-delay: 1100ms; }
.transcript.animate .turn:nth-child(4) { animation-delay: 2300ms; }
.transcript.animate .turn:nth-child(5) { animation-delay: 3300ms; }
.transcript.animate .turn:nth-child(6) { animation-delay: 4000ms; }
.transcript.animate .turn:nth-child(7) { animation-delay: 5000ms; }
@keyframes arrive { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .transcript.animate .turn { animation: none; opacity: 1; transform: none; } }

/* Sections */
.section { padding: 64px 0; border-top: 1px solid var(--line); }
.section h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; max-width: 22em; }
.section .intro { font-size: 18px; color: var(--muted); max-width: 36em; margin: 0 0 36px; }

/* Stepped process — numbering is content here, it's a sequence */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
@media (max-width: 880px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.steps li { counter-increment: step; border-top: 3px solid var(--ink); padding-top: 16px; }
.steps li::before { content: counter(step); display: block; font-weight: 700; font-size: 28px; line-height: 1; margin-bottom: 10px; }
.steps h3 { font-size: 18px; margin: 0 0 8px; }
.steps p { margin: 0; color: var(--muted); }

/* Ruled lists — structure encodes "these are peers" */
.ruled { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ruled li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .ruled li { grid-template-columns: 1fr; gap: 6px; } }
.ruled strong { font-weight: 600; }
.ruled p { margin: 0; color: var(--muted); max-width: 40em; }

/* Promise list */
.never { list-style: none; margin: 0; padding: 0; max-width: 44em; }
.never li { padding: 14px 0 14px 34px; border-bottom: 1px solid var(--line); position: relative; }
.never li::before { content: ""; position: absolute; left: 0; top: 23px; width: 18px; height: 2px; background: var(--ink); }

/* Two-column prose */
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }
.cols h3 { font-size: 18px; margin: 0 0 8px; }
.cols p { margin: 0 0 14px; color: var(--muted); }

/* CTA band */
.band { background: var(--paper); border-top: 1px solid var(--line); padding: 56px 0; }
.band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.band h2 { margin: 0 0 6px; font-size: 28px; letter-spacing: -0.02em; }
.band p { margin: 0; color: var(--muted); }
.phone { font-weight: 600; color: var(--ink); text-decoration: none; }

/* Footer */
.site-footer { padding: 36px 0 48px; color: var(--muted); font-size: 14px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* Forms */
.form { max-width: 620px; }
.field { margin: 0 0 20px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field .hint { color: var(--muted); font-size: 14px; margin-top: 6px; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(31,94,255,0.18); }
.field textarea { min-height: 120px; resize: vertical; }
.consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font-size: 14.5px; line-height: 1.5; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue); }
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: 8px; display: none; }
.form-status.ok { display: block; background: #E3F3EA; color: #145C3C; }
.form-status.err { display: block; background: #FBEBE1; color: #8A3A12; }

/* Legal pages */
.prose { max-width: 44em; }
.prose h1 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 8px; }
.prose .meta { color: var(--muted); margin: 0 0 32px; }
.prose h2 { font-size: 22px; margin: 36px 0 10px; letter-spacing: -0.01em; }
.prose h3 { font-size: 17px; margin: 24px 0 8px; }
.prose p, .prose li { color: #2A3644; }
.prose ul { padding-left: 22px; }
.prose .callout { background: var(--paper); border-left: 4px solid var(--blue); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 20px 0; }

/* Status page */
.status-headline { display: flex; align-items: center; gap: 14px; font-size: 24px; font-weight: 600; margin: 0 0 28px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--green); flex: none; }
.dot.degraded { background: #D98B0C; }
.dot.down { background: #C8311B; }
.components { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 640px; }
.components li { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
.components .state { color: var(--green); font-weight: 600; }
.components .state.degraded { color: #D98B0C; }
.components .state.down { color: #C8311B; }
.empty { color: var(--muted); padding: 20px 0; }

/* Utilities
   ---------------------------------------------------------------------------
   These replace inline style="..." attributes. The Content-Security-Policy in
   public/_headers sets style-src without 'unsafe-inline', which blocks inline
   style attributes outright — so the seven that were here silently did nothing
   in any browser enforcing the policy. The visible one was the status note,
   which stayed visible on every page load instead of being revealed by
   site.js.

   Loosening the CSP instead would have been the wrong trade for a border and
   two margins, on a site whose job is to look credible to a compliance
   reviewer. */
.section--flush { border-top: 0; }
.is-hidden { display: none; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }