:root {
  --ink: #14201a;
  --green: #0f5b3a;
  --green-dark: #0a4229;
  --yellow: #ffc20e;
  --paper: #f7f8f5;
  --line: #d6dcd5;
  --muted: #5a6b61;
  --error: #b3261e;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 1.05rem; line-height: 1.5;
}
header.top { background: var(--green); color: #fff; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; }
header.top a { color: #fff; text-decoration: none; margin-left: 18px; }
header.top .logo { font-weight: 800; font-size: 1.4rem; margin: 0; }
header.top .logo span { color: var(--yellow); }
main { max-width: 640px; margin: 0 auto; padding: 28px 20px 60px; }
h1 { font-size: 2.2rem; line-height: 1.1; margin: 0 0 8px; }
p.lead { color: var(--muted); margin: 0 0 24px; }
label { display: block; font-weight: 600; margin: 16px 0 6px; }
input, select { width: 100%; padding: 12px; font: inherit; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; }
input:focus, select:focus, button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }
button {
  font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 6px;
  background: var(--yellow); color: var(--ink); padding: 14px 22px; margin-top: 22px;
}
button:hover { background: #f0b400; }
button.small { padding: 8px 12px; margin: 0; font-size: .9rem; }
.price { font-size: 1.6rem; font-weight: 800; color: var(--green); margin-top: 18px; min-height: 2.2rem; }
.error { color: var(--error); font-weight: 600; margin-top: 12px; }
.result { background: #fff; border: 2px solid var(--green); border-radius: 8px; padding: 20px; margin-top: 24px; }
.result .id { font-size: 2rem; font-weight: 800; color: var(--green); }
.steps { display: flex; gap: 6px; margin: 18px 0; }
.steps div { flex: 1; padding: 8px 4px; text-align: center; font-size: .85rem; border-radius: 6px; background: var(--line); color: var(--muted); }
.steps div.done { background: var(--green); color: #fff; font-weight: 700; }
table { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.wide main { max-width: 1100px; }
.hidden { display: none; }

/* ---------- Landing page ---------- */
header.top .logo a { color: #fff; text-decoration: none; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.hero { background: var(--green); color: #fff; padding: 48px 0 56px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; margin: 0 0 16px; }
.hero p { font-size: 1.15rem; max-width: 34rem; color: #dbe9e1; margin: 0 0 18px; }
.hero a.inline { color: var(--yellow); font-weight: 600; }
.quote { background: #fff; color: var(--ink); border-radius: 10px; padding: 22px; }
.quote h2 { margin: 0 0 4px; font-size: 1.3rem; }
.quote p { color: var(--muted); font-size: .95rem; margin: 0; max-width: none; }
.quote label:first-of-type { margin-top: 10px; }
.quote .price { margin-top: 14px; }
.quote button { width: 100%; margin-top: 10px; }
.quote button[disabled] { background: var(--line); color: var(--muted); cursor: not-allowed; }
section.block { padding: 52px 0; }
section.block h2 { font-size: 1.8rem; line-height: 1.15; margin: 0 0 20px; }
.steps-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: s; }
.steps-list li { counter-increment: s; border-top: 4px solid var(--yellow); padding-top: 12px; }
.steps-list li::before { content: counter(s); display: block; font-weight: 800; font-size: 1.8rem; color: var(--green); }
.steps-list strong { display: block; margin-bottom: 4px; }
.trust { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.trust ul { margin: 0; padding-left: 20px; }
.trust li { margin-bottom: 8px; }
table.routes td:last-child, table.routes th:last-child { text-align: right; font-weight: 700; }
.note { color: var(--muted); font-size: .95rem; margin-top: 10px; }
.cta { background: var(--yellow); }
.cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta h2 { margin: 0; }
a.button { display: inline-block; background: var(--green); color: #fff; font-weight: 700; padding: 14px 22px; border-radius: 6px; text-decoration: none; }
a.button:hover { background: var(--green-dark); }
footer.foot { background: var(--ink); color: #c9d3cd; padding: 22px 0; font-size: .95rem; }
footer.foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
footer.foot a { color: #fff; margin-left: 16px; }
@media (max-width: 760px) {
  .hero .wrap, .trust .wrap { grid-template-columns: 1fr; }
  .steps-list { grid-template-columns: 1fr; }
}

/* ---------- Mobile + account ---------- */
header.top { flex-wrap: wrap; gap: 8px; }
.wide main { overflow-x: auto; }
.tabs { display: flex; gap: 8px; margin: 18px 0 4px; }
.tabs button { margin: 0; flex: 1; background: var(--line); }
.tabs button.on { background: var(--green); color: #fff; }
.job { background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: 14px; margin-top: 12px; }
@media (max-width: 520px) { header.top nav a { margin-left: 12px; } main { padding: 22px 16px 48px; } h1 { font-size: 1.8rem; } }