:root { --paper:#F3F0E8; --ink:#141412; --faint:#6B675E; --rule:#D8D3C6; --signal:#E2401C; --slip:#FBF9F4; }
  @media (prefers-color-scheme: dark) { :root { --paper:#0F0F0D; --ink:#ECE8DE; --faint:#8F8A7E; --rule:#2A2925; --signal:#FF5A33; --slip:#171714; } }
  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.65 "IBM Plex Mono", ui-monospace, monospace; }
  a { color:var(--signal); text-underline-offset:3px; }
  .wrap { max-width:880px; margin:0 auto; padding:0 16px; }

  header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 0; border-bottom:1px solid var(--rule); }
  .brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-weight:500; font-size:17px; }
  .mark { display:inline-flex; align-items:center; gap:5px; }
  .ring { width:20px; height:20px; border:4px solid var(--ink); border-radius:50%; }
  .cursor { width:11px; height:22px; background:var(--signal); animation:blink 1.1s steps(1) infinite; }
  @keyframes blink { 50% { opacity:0; } }
  @media (prefers-reduced-motion: reduce) { .cursor { animation:none; } }
  header .mail { color:var(--faint); font-size:13px; }

  .hero { padding:88px 0 72px; }
  .kicker { color:var(--faint); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 24px; }
  h1, h2 { font-family:"Instrument Serif", Georgia, serif; font-weight:400; letter-spacing:-0.01em; }
  h1 { font-size:clamp(3rem, 11vw, 6.5rem); line-height:0.95; margin:0 0 32px; }
  h1 em, h2 em { font-style:italic; color:var(--signal); }
  .lede { max-width:52ch; font-size:16px; margin:0 0 36px; }
  .cta { display:inline-flex; align-items:center; gap:10px; padding:14px 20px; background:var(--ink); color:var(--paper); text-decoration:none; font-weight:500; }
  .cta:hover, .cta:focus-visible { background:var(--signal); color:#fff; }
  .cta-note { display:block; margin-top:12px; color:var(--faint); font-size:13px; }

  section { padding:64px 0; border-top:1px solid var(--rule); }
  h2 { font-size:clamp(2rem, 6vw, 3rem); line-height:1.05; margin:0 0 28px; }
  .label { color:var(--faint); font-size:13px; margin:0 0 8px; }

  /* staff roster */
  .roster { width:100%; border-collapse:collapse; }
  .roster td { padding:12px 0; border-bottom:1px dashed var(--rule); vertical-align:top; }
  .roster td:last-child { text-align:right; color:var(--faint); white-space:nowrap; padding-left:16px; }
  .roster tr.human td { color:var(--ink); }
  .roster tr.human td:last-child { color:var(--signal); }

  /* steps */
  .steps { list-style:none; padding:0; margin:0; display:grid; gap:0; }
  .steps li { display:grid; grid-template-columns:3.5em 1fr; padding:16px 0; border-bottom:1px dashed var(--rule); }
  .steps b { font-weight:500; }
  .steps span.n { color:var(--signal); }
  .steps p { margin:4px 0 0; color:var(--faint); }

  .scope { columns:2 240px; column-gap:32px; padding:0; margin:0; list-style:none; }
  .scope li { break-inside:avoid; padding:6px 0; }
  .scope li::before { content:"+ "; color:var(--signal); }
  .no { margin-top:24px; color:var(--faint); }

  /* the receipt */
  .receipt { background:var(--slip); max-width:520px; padding:28px 24px 32px; position:relative; font-variant-numeric:tabular-nums;
    --tooth: radial-gradient(circle at 6px 0, transparent 5px, var(--slip) 5.5px);
    box-shadow:0 1px 0 var(--rule); }
  .receipt::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px; background:var(--tooth); background-size:12px 6px; }
  .receipt h3 { font-weight:500; text-align:center; margin:0 0 4px; font-size:15px; letter-spacing:0.1em; }
  .receipt .sub { text-align:center; color:var(--faint); margin:0 0 20px; font-size:13px; }
  .receipt-scroll { overflow-x:auto; }
  .receipt table { width:100%; border-collapse:collapse; font-size:13px; }
  .receipt th, .receipt td { padding:6px 4px; text-align:left; white-space:nowrap; }
  .receipt th { font-weight:500; border-bottom:1px dashed var(--faint); }
  .receipt td.num, .receipt th.num { text-align:right; }
  .receipt tfoot td { border-top:1px dashed var(--faint); font-weight:500; }
  .receipt .empty { color:var(--faint); text-align:center; padding:16px 4px; white-space:normal; }

  .guarantees { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
  .guarantees li { background:var(--paper); padding:20px; }
  .guarantees b { font-weight:500; }
  .guarantees b::before { content:"✓ "; color:var(--signal); }
  .guarantees p { margin:6px 0 0; color:var(--faint); font-size:14px; }
  .quote { max-width:600px; font-size:13px; }
  .quote p { margin:0 0 12px; }
  .quote .k { display:inline-block; min-width:9em; color:var(--faint); }
  .quote table { margin:4px 0 16px; }
  .quote td { white-space:normal; vertical-align:top; padding:6px 4px; border-bottom:1px dashed var(--rule); }
  .quote td.num { white-space:nowrap; text-align:right; }
  .quote tfoot td { border-top:1px dashed var(--faint); border-bottom:0; font-weight:500; }
  @media (max-width:560px) { .quote .k { display:block; } }
  .faq dt { font-weight:500; margin-top:20px; }
  .faq dd { margin:4px 0 0; color:var(--faint); max-width:60ch; }

  footer { border-top:1px solid var(--rule); padding:32px 0 48px; color:var(--faint); font-size:13px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }
  @media (max-width:560px) { header .mail { display:none; } .hero { padding:56px 0 48px; } }

  /* legal pages */
  .legal { max-width:68ch; padding-bottom:48px; }
  .legal h2 { font-size:1.6rem; margin:40px 0 8px; }
  .legal p { color:var(--faint); }
  .legal b { color:var(--ink); font-weight:500; }