/* ---------------------------------------------------------------------------
   Design tokens — "the warm voice over the cool infrastructure"
   Deep blue-teal ink ground + a single warm amber "live signal" accent.
   Type: heavy system-sans display + monospace utility (call-log vernacular).
   No webfont URLs (CSP/perf) — disciplined system stacks instead.
--------------------------------------------------------------------------- */
:root {
  --ink-bg:    #0B1418;  /* page ground — after-hours, always-on */
  --ink-raise: #111E24;  /* raised surfaces (cards, demo panel) */
  --ink-line:  #1C2E36;
  --line:      #1C2E36;

  --ink-0: #F2F6F7;       /* primary text */
  --ink-1: #A9BcC2;       /* secondary */
  --ink-2: #6B828B;       /* tertiary / labels */

  --signal:   #F5A623;    /* warm amber — the live-call accent */
  --signal-2: #FFCD6B;

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

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink-bg); color: var(--ink-1);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 4px; }

/* Service page prose */
.service { max-width: 760px; margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem); }
.service .eyebrow { font: 600 .8rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.service h1 { font: 800 clamp(2rem, 5vw, 3.2rem)/1.05 var(--font-sans); letter-spacing: -.03em; margin: 1rem 0; text-wrap: balance; color: var(--ink-0); }
.service .lede { font-size: 1.15rem; line-height: 1.6; color: var(--ink-1); }
.service section { margin-top: 3.5rem; }
.service h2 { font: 700 1.5rem/1.1 var(--font-sans); letter-spacing: -.02em; color: var(--ink-0); margin-bottom: 1.25rem; }

.flow { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.flow li { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; }
.flow .num { grid-row: 1 / 3; font: 700 1.1rem/1 var(--font-mono); color: var(--signal); padding-top: .2rem; }
.flow h3 { font: 700 1.05rem/1.2 var(--font-sans); color: var(--ink-0); }
.flow p { color: var(--ink-1); line-height: 1.5; }

.benefits ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.benefits li { padding-left: 1.5rem; position: relative; line-height: 1.5; }
.benefits li::before { content: "→"; position: absolute; left: 0; color: var(--signal); }

.faq details { border-top: 1px solid var(--line); padding: 1rem 0; }
.faq summary { cursor: pointer; font: 600 1.05rem/1.3 var(--font-sans); color: var(--ink-0); }
.faq p { margin-top: .6rem; color: var(--ink-1); line-height: 1.55; }