:root {
  --ink: #2b211b;
  --paper: #fbf7f2;
  --card: #fff;
  --line: #e6dcd2;
  --accent: #5b3a29;
  --muted: #7a6a5f;
  --sun: #b98a4e;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
section { padding: 3.5rem 1rem; }
.wrap { max-width: 62rem; margin: 0 auto; }
.narrow { max-width: 44rem; margin: 0 auto; }

/* ── top bar ───────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: .7rem 1.2rem; background: rgba(251, 247, 242, .92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.top .brand { font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.05rem; }
.top nav { display: flex; gap: 1.1rem; align-items: center; margin-left: auto; flex-wrap: wrap; font-size: .95rem; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--accent); }
/* The global rule stretches every control; this one is a chip, not a field. */
.top select { width: auto; padding: .3rem .5rem; border-radius: .4rem; font-size: .9rem; }
/* Same as the app: on a phone the picker rides up beside the title so the links
   take the row below, two rows instead of three. */
@media (max-width: 34rem) {
  .top { padding: .55rem .8rem; gap: .35rem .8rem; }
  .top .brand { font-size: 1rem; }
  .top select { order: 2; margin-left: auto; font-size: .85rem; padding: .2rem .35rem; }
  .top nav { order: 3; width: 100%; margin-left: 0; gap: .9rem; font-size: .9rem; }
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 4.5rem 1rem 0; text-align: center; overflow: hidden; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.02em; }
.hero .lead { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--muted); margin: 1rem auto 0; max-width: 34rem; }
/* The motto sits on the sky inside the picture, not on the paper above it.
   The top of the image is masked into the page, so the words land on the pale
   part before the figures begin, and the dark ink reads against it. */
.banner-wrap { position: relative; margin-top: 3rem; }
.hero .motto {
  position: absolute; top: 11%; left: 0; right: 0; z-index: 1;
  margin: 0; padding: 0 1rem;
  font-style: italic; color: #2f2f2f;
}
.cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.btn {
  display: inline-block; padding: .8rem 1.5rem; border-radius: .5rem; border: 0;
  background: var(--accent); color: #fff; text-decoration: none; font: inherit;
  font-weight: 600; cursor: pointer;
}
.btn:hover { background: #4a2f21; }
.btn.ghost { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn.ghost:hover { background: #f2e9e0; }
.btn:disabled { opacity: .5; cursor: default; }
.banner { display: block; width: 100%; height: clamp(200px, 30vw, 420px); object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%); mask-image: linear-gradient(to bottom, transparent, #000 16%); }

/* ── cards ─────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: .7rem; padding: 1.2rem; }
.card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.card p { margin: 0; color: var(--muted); font-size: .97rem; }
.card .ic { font-size: 1.6rem; line-height: 1; margin-bottom: .6rem; }

h2.title { font-size: clamp(1.4rem, 3.2vw, 2rem); margin-bottom: .5rem; }
p.sub { color: var(--muted); margin: 0 0 2rem; max-width: 40rem; }
.alt { background: #f6efe7; }

/* ── steps ─────────────────────────────────────────────────────────────── */
.steps { counter-reset: s; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.step { position: relative; padding-left: 3.2rem; }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: -.15rem;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700;
  display: grid; place-items: center;
}
.step h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.step p { margin: 0; color: var(--muted); font-size: .97rem; }

/* ── pricing ───────────────────────────────────────────────────────────── */
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 2rem; overflow: hidden; background: #fff; margin-bottom: 1.6rem; }
.toggle button { border: 0; background: transparent; padding: .5rem 1.1rem; font: inherit; cursor: pointer; color: var(--muted); }
.toggle button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.plans { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: .7rem; padding: 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.plan .price { font-size: 2rem; font-weight: 700; }
.plan .price small { font-size: .9rem; font-weight: 400; color: var(--muted); }
.plan ul { margin: .3rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .95rem; }
.plan .btn { margin-top: auto; text-align: center; }
.note { color: var(--muted); font-size: .92rem; margin-top: 1.2rem; }

/* ── forms ─────────────────────────────────────────────────────────────── */
.box { display: grid; gap: .8rem; background: var(--card); border: 1px solid var(--line); border-radius: .7rem; padding: 1.3rem; }
label { display: grid; gap: .25rem; font-size: .95rem; }
input, textarea, select {
  font: inherit; padding: .6rem .7rem; border: 1px solid #cdbfb3; border-radius: .45rem; width: 100%; background: #fff; color: var(--ink);
}
textarea { resize: vertical; }
.row2 { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 34rem) { .row2 { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Choosing an address: one field with the installation's own domain fixed
   beside it, so what is being chosen is plainly only the first part. */
.pick { margin-bottom: 1.2rem; }
.pick h3 { margin: 0; font-size: 1.05rem; }
.pick .note { margin-top: 0; }
.pickrow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pickrow input { flex: 1 1 10rem; width: auto; text-align: right; }
.pickrow .suffix { color: var(--muted); white-space: nowrap; }
.pickrow button {
  font: inherit; padding: .6rem 1rem; border: 1px solid #cdbfb3; border-radius: .45rem;
  background: #fff; color: var(--ink); cursor: pointer;
}
.pickrow button:hover { background: #f6efe7; }
@media (max-width: 28rem) { .pickrow input { text-align: left; } }
.msg { margin: 0; font-size: .95rem; }
.msg.ok { color: #2a6b2a; }
.msg.err { color: #a33; }
.result { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.result li { background: #f6efe7; border-radius: .45rem; padding: .55rem .7rem; }

/* ── footer ────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 2rem 1rem 3rem; color: var(--muted); font-size: .93rem; }
footer .wrap { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: baseline; }
footer .motto { font-style: italic; flex: 1; min-width: 16rem; }
footer nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }