:root {
  --bg: #f7faf9;
  --alt: #e9f1ef;
  --card: #ffffff;
  --fg: #172524;
  --muted: #3f5553;
  --line: #c5d6d3;
  --accent: #0b5f5a;
  --on-accent: #ffffff;
  --focus: #0b5f5a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1a19;
    --alt: #142423;
    --card: #182c2a;
    --fg: #e8f1ef;
    --muted: #b4c9c6;
    --line: #2c4643;
    --accent: #6fd6ca;
    --on-accent: #0a1514;
    --focus: #6fd6ca;
  }
}
* { 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(--fg);
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { width: min(100% - 2rem, 62rem); margin-inline: auto; }
a { color: var(--accent); text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-accent); padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 0.75rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent); text-decoration: none; font-size: 1.25rem; }
/* #797 - the mark is logo.svg painted in the current color (CSS mask), so one
   file serves every theme and the accent set on .brand. */
.mark { display: inline-block; flex: none; width: 2rem; height: 2rem; background-color: currentColor; -webkit-mask: url(logo.svg) center / contain no-repeat; mask: url(logo.svg) center / contain no-repeat; }
.word { color: var(--fg); font-weight: 400; letter-spacing: -0.01em; }
.word b { color: var(--accent); font-weight: 700; }
nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
nav a { color: var(--fg); text-decoration: none; padding: 0.25rem 0; }
nav a:hover { color: var(--accent); text-decoration: underline; }

section { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
section.alt { background: var(--alt); }
.hero { padding-block: clamp(3rem, 10vw, 6.5rem); }
.eyebrow { margin: 0 0 0.5rem; color: var(--accent); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.875rem; }
h1 { margin: 0 0 1rem; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 20ch; }
h2 { margin: 0 0 1.5rem; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; }
h3 { margin: 0 0 0.35rem; font-size: 1.125rem; }
.lead { font-size: 1.2rem; max-width: 40rem; color: var(--muted); margin: 0 0 1.5rem; }
p { margin: 0 0 1rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn { display: inline-block; padding: 0.7rem 1.25rem; border-radius: 0.5rem; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; border: 2px solid var(--accent); }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--accent); }

.cards, .steps, .plain { list-style: none; margin: 0; padding: 0; }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cards li, .steps li { background: var(--card); border: 1px solid var(--line); border-radius: 0.75rem; padding: 1.25rem; }
.cards p, .steps p { margin: 0; color: var(--muted); }
.steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: 0.5rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.plain li { padding: 0.5rem 0 0.5rem 1.75rem; position: relative; max-width: 42rem; }
.plain li::before { content: ""; position: absolute; left: 0.25rem; top: 1.05rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--accent); }

.price-card { background: var(--card); border: 1px solid var(--line); border-radius: 0.75rem; padding: 1.5rem; max-width: 42rem; margin-bottom: 2rem; }
.price-card p:last-child { margin-bottom: 0; }
.price { font-size: 1.1rem; margin: 0 0 0.75rem; }
.price .amount { font-size: clamp(2.25rem, 7vw, 3rem); font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.price .plus { color: var(--muted); }
.example { border-collapse: collapse; width: 100%; max-width: 32rem; margin: 0 0 1rem; }
.example th, .example td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; }
.example td { text-align: right; font-variant-numeric: tabular-nums; }
.example .total th, .example .total td { font-weight: 700; border-bottom: 2px solid var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.site-footer { border-top: 1px solid var(--line); padding-block: 2rem; color: var(--muted); font-size: 0.95rem; }
.site-footer p { max-width: 48rem; }
.foot-brand { margin: 0 0 1rem; }
.site-footer .brand { font-size: 1.05rem; }
.site-footer .mark { width: 1.5rem; height: 1.5rem; }
.site-footer strong { color: var(--fg); }
.legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 1rem 0; padding: 0; }
.small { font-size: 0.875rem; }
.doc { padding-block: 3rem; }

/* #844 - contact form */
.contact { max-width: 32rem; margin: 0 0 1.5rem; }
.contact p { margin: 0 0 1rem; }
.contact label { display: block; margin-bottom: 0.25rem; font-weight: 600; }
.contact input, .contact textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--card); color: var(--fg); font: inherit; }
.contact input:focus-visible, .contact textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.contact button.btn { cursor: pointer; font: inherit; font-weight: 600; }
.contact .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* #854 - a larger header logo at the top of the page that shrinks to the
   compact size as you scroll. The site runs no script of its own (#765), so this
   is a CSS scroll-driven animation: it applies only where the browser supports
   animation-timeline, the visitor has not asked for reduced motion, and the
   viewport is wide enough for the nav to sit on one row. Everywhere else the
   header stays the static, compact one above.
   The header is fixed here, so body reserves the large bar's height (5.5rem +
   its 1px border) and nothing below it moves as the bar shrinks. */
@media (prefers-reduced-motion: no-preference) and (min-width: 52rem) {
  @supports (animation-timeline: scroll()) {
    html { scroll-padding-top: 4.5rem; }
    body { padding-top: calc(5.5rem + 1px); }
    .site-header { position: fixed; inset: 0 0 auto 0; z-index: 20; }
    .skip { z-index: 30; }
    @keyframes ct-shrink-bar { from { padding-block: 1.25rem; } to { padding-block: 0.75rem; } }
    @keyframes ct-shrink-brand { from { font-size: 1.75rem; } to { font-size: 1.25rem; } }
    @keyframes ct-shrink-mark { from { width: 3rem; height: 3rem; } to { width: 2rem; height: 2rem; } }
    .site-header .bar,
    .site-header .brand,
    .site-header .mark {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0px 6rem;
    }
    .site-header .bar { animation-name: ct-shrink-bar; }
    .site-header .brand { animation-name: ct-shrink-brand; }
    .site-header .mark { animation-name: ct-shrink-mark; }
  }
}