/* "Neighbours": a warm American street and a human reviewer. Light theme (phones in the sun), no official symbols.
   Text pairs are WCAG AA: ink on cream 11.9:1, white on green 7.1:1, brick on cream 5.3:1, muted on cream 6.5:1. */
/* Onest, self-hosted variable font (static/fonts/onest/.source): a browser loads only the subsets a page uses. */
@font-face { font-family:"Onest"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/onest/onest-cyrillic-wght-normal.fe2bd26ae82a.woff2") format("woff2-variations");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Onest"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/onest/onest-cyrillic-ext-wght-normal.11a468877c94.woff2") format("woff2-variations");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:"Onest"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/onest/onest-latin-wght-normal.3db826ed1c5d.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,
    U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --ink:#18392F; --muted:#4D5E57; --line:#E7DCCB; --bg:#FFF8ED; --card:#FFFFFF;
  --green:#236347; --green-dark:#1A4C36; --green-soft:#E8F3EC;
  --brick:#B24424; --brick-soft:#FBE9E2; --sun:#F2B441; --sun-soft:#FFF1D6;
  --ok:#1D6B3F; --warn:#7A4A00; --err:#A3231B;
  --radius:16px; --shadow:0 1px 2px rgba(24,57,47,.06), 0 6px 20px rgba(24,57,47,.06);
  --font: "Onest", "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:17px/1.6 var(--font); color:var(--ink); background:var(--bg); }
a { color:var(--green); text-underline-offset:3px; }
a:hover { color:var(--green-dark); }
:focus-visible { outline:3px solid var(--sun); outline-offset:2px; border-radius:6px; }
.container { max-width:860px; margin:0 auto; padding:16px; }
h1, h2, h3 { line-height:1.2; letter-spacing:-.01em; }
h1 { font-size:clamp(26px, 6.4vw, 40px); font-weight:800; margin:.3em 0 .4em; }
h2 { font-size:clamp(21px, 4.6vw, 26px); font-weight:750; margin:1em 0 .5em; }
h3 { font-size:19px; margin:.6em 0 .3em; }
.inline { display:inline; margin:0; }
.hidden { display:none; }
.mono { font-family:ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; }

/* top bar */
.topbar { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 16px; background:rgba(255,248,237,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(6px); }
.topbar nav { display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:16px; }
.brand { display:flex; flex:none; align-items:center; gap:8px; font-weight:800; font-size:18px; text-decoration:none; color:var(--ink);
  white-space:nowrap; }
.brand::before { content:"DV"; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--green); color:#fff; font-size:14px; letter-spacing:.02em; }
.langs { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--card); }
.langs .inline button { padding:4px 10px; }
.linklike { background:none; border:0; padding:0; color:var(--green); font:inherit; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; }
.langs .linklike { text-decoration:none; font-weight:600; color:var(--muted); }
.langs .linklike.active { background:var(--green); color:#fff; }
@media (max-width:420px) {
  .topbar { gap:8px; padding:10px 12px; }
  .topbar nav { gap:10px; font-size:15px; justify-content:flex-end; }
  .brand { font-size:16px; }
  .langs .inline button { padding:4px 8px; }
}

/* cards and text */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin:14px 0;
  box-shadow:var(--shadow); }
.card > h2:first-child, .card > h3:first-child { margin-top:0; }
.help { color:var(--muted); font-size:15px; }
.note { color:var(--muted); font-size:15px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.lead { font-size:19px; color:var(--ink); }
.kicker { display:inline-block; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--brick); }
.price { font-size:clamp(30px, 7vw, 40px); font-weight:800; margin:0; }
.late { color:var(--err); font-weight:600; }

/* buttons */
.btn, button.btn, input[type=submit] { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px;
  padding:12px 22px; border:0; border-radius:12px; background:var(--green); color:#fff; font:inherit; font-weight:700;
  text-decoration:none; cursor:pointer; box-shadow:0 2px 0 var(--green-dark); transition:transform .08s, background .15s; }
.btn:hover { background:var(--green-dark); color:#fff; }
.btn:active { transform:translateY(2px); box-shadow:none; }
.btn.secondary { background:var(--card); color:var(--ink); border:2px solid var(--line); box-shadow:none; }
.btn.secondary:hover { border-color:var(--green); color:var(--green-dark); }
.btn.ghost { background:none; color:var(--green); box-shadow:none; text-decoration:underline; text-underline-offset:3px; padding:12px 8px; }
.btn.danger { background:var(--err); box-shadow:0 2px 0 #6f1712; }
.btn.small { min-height:36px; padding:6px 12px; font-size:15px; border-radius:10px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px; }
@media (max-width:520px) { .actions > .btn, .actions > form > .btn { flex:1 1 100%; } .actions > form { flex:1 1 100%; } }

/* forms */
fieldset { border:0; padding:0; margin:0; min-width:0; }
label { display:block; font-weight:650; margin:14px 0 6px; }
input[type=text], input[type=email], input[type=date], input[type=number], input[type=password], input[type=file], select, textarea {
  width:100%; min-height:50px; padding:12px 14px; border:2px solid var(--line); border-radius:12px; font:inherit; background:#fff; color:var(--ink); }
input:focus, select:focus, textarea:focus { border-color:var(--green); outline:none; box-shadow:0 0 0 4px var(--green-soft); }
input[type=file] { padding:10px; background:var(--bg); border-style:dashed; }
input[type=checkbox], input[type=radio] { width:22px; height:22px; accent-color:var(--green); vertical-align:middle; margin:0 8px 0 0; flex:none; }
.field { margin-bottom:10px; }
.field ul { list-style:none; padding:0; margin:0; }
.field ul li label { font-weight:400; display:flex; align-items:flex-start; gap:8px; margin:8px 0; }
.check-row label, label.check-row { display:flex; gap:10px; font-weight:400; align-items:flex-start; }
.errorlist { color:var(--err); margin:6px 0; padding-left:20px; font-size:15px; font-weight:600; }

/* messages, issues, remarks, statuses */
.messages .msg, .msg { padding:12px 14px; border-radius:12px; margin-bottom:10px; border:1px solid transparent; }
.msg-success { background:var(--green-soft); color:var(--ok); } .msg-error { background:#FBE5E3; color:var(--err); }
.msg-warning { background:var(--sun-soft); color:var(--warn); } .msg-info { background:#EEF3F8; color:var(--ink); }
.issues { list-style:none; padding:0; margin:10px 0; }
.issues li { padding:12px 14px 12px 16px; border-radius:12px; margin:8px 0; font-size:16px; border-left:5px solid; }
.issues li.err { background:var(--brick-soft); border-color:var(--brick); }
.issues li.warn { background:var(--sun-soft); border-color:var(--sun); }
.issues .fix { display:block; margin-top:4px; }
.remarks-title { display:flex; align-items:center; gap:8px; }
.remarks-title::before { content:""; width:12px; height:12px; border-radius:50%; background:var(--brick); }
.status { display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border-radius:999px; background:#EEF3F8;
  font-size:15px; font-weight:700; }
.status::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor; }
.status.ok { background:var(--green-soft); color:var(--ok); }
.status.wait { background:var(--sun-soft); color:var(--warn); }
.status.bad { background:#FBE5E3; color:var(--err); }
.next-action { background:var(--green-soft); border-radius:12px; padding:12px 14px; margin:12px 0; }
.confirmation { background:var(--bg); border:2px dashed var(--line); border-radius:12px; padding:14px; margin:12px 0; }
.confirmation .mono { font-size:22px; font-weight:700; letter-spacing:.04em; word-break:break-all; }

/* wizard: step N of 9, a progress bar, a horizontally scrolling list of steps */
.step-head { margin:8px 0 4px; }
.step-head .kicker { color:var(--muted); }
.progress { height:10px; background:var(--line); border-radius:999px; overflow:hidden; margin:6px 0 10px; }
.progress span { display:block; height:100%; background:var(--green); border-radius:999px; }
.p1 { width:11%; } .p2 { width:22%; } .p3 { width:33%; } .p4 { width:44%; } .p5 { width:56%; } .p6 { width:67%; } .p7 { width:78%; }
.p8 { width:89%; } .p9 { width:100%; }
.steps { display:flex; gap:8px; padding:2px 0 8px; list-style:none; margin:4px 0 14px; font-size:15px; overflow-x:auto;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.steps li { flex:none; }
.steps li a { display:block; padding:7px 12px; border-radius:999px; background:var(--card); border:1px solid var(--line);
  text-decoration:none; color:var(--ink); white-space:nowrap; }
.steps li.done a { background:var(--green-soft); border-color:transparent; }
.steps li.done a::before { content:"✓ "; color:var(--ok); font-weight:800; }
.steps li.current a { background:var(--green); border-color:var(--green); color:#fff; font-weight:700; }

/* tables */
table { width:100%; border-collapse:collapse; font-size:15px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:700; }
.table-wrap { overflow-x:auto; }
.thumb { max-width:160px; border:1px solid var(--line); border-radius:10px; }
.grid2 { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:700px) { .grid2 { grid-template-columns:1fr 1fr; } }

/* landing */
.hero { display:grid; gap:12px; align-items:center; padding:12px 0 4px; }
.hero h1 { margin-top:.2em; }
.hero .lead { margin:0 0 6px; }
.hero-art { width:100%; height:auto; display:block; }
.hero .note { font-size:15px; color:var(--muted); margin:12px 0 0; }
@media (min-width:760px) { .hero { grid-template-columns:1.1fr .9fr; gap:28px; padding:28px 0 8px; } }
.how { display:grid; gap:12px; counter-reset:how; padding:0; margin:0; list-style:none; }
.how li { counter-increment:how; display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.how li::before { content:counter(how); flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--green); color:#fff; font-weight:800; }
@media (min-width:760px) { .how { grid-template-columns:1fr 1fr; } }
.pitfalls { display:grid; gap:12px; }
@media (min-width:760px) { .pitfalls { grid-template-columns:repeat(3, 1fr); } }
.pitfalls .card { margin:0; border-top:5px solid var(--brick); }
.prices { display:grid; gap:12px; grid-template-columns:1fr 1fr; margin:8px 0 12px; }
.prices > div { background:var(--bg); border-radius:12px; padding:14px; }
.prices .help { margin:4px 0 0; }
.ticks { list-style:none; padding:0; margin:10px 0; }
.ticks li { position:relative; padding-left:30px; margin:8px 0; }
.ticks li::before { content:"✓"; position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; background:var(--green-soft);
  color:var(--ok); font-weight:800; display:grid; place-items:center; font-size:14px; }
.promise { background:var(--sun-soft); border-radius:12px; padding:12px 14px; font-weight:650; }

/* footer: the disclaimer is a real paragraph, not fine print */
.footer { max-width:860px; margin:40px auto 0; padding:20px 16px 32px; color:var(--muted); font-size:15px; border-top:1px solid var(--line); }
.footer .disclaimer { color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }

/* staff panel */
.panel .container { max-width:1200px; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.tabs a { padding:8px 12px; border-radius:10px; background:var(--card); border:1px solid var(--line); text-decoration:none; color:var(--ink); }
.tabs a.on { background:var(--green); border-color:var(--green); color:#fff; }
.copy { cursor:pointer; }
.copy.copied { background:var(--green-soft); border-color:var(--green); color:var(--ok); }

/* photo upload: one big target instead of a bare file input */
.counter { font-weight:700; margin:14px 0 8px; }
.upload { display:flex; flex-direction:column; gap:8px; padding:16px; margin:8px 0; border:2px dashed var(--green);
  border-radius:12px; background:var(--green-soft); cursor:pointer; }
.upload span { font-weight:700; color:var(--green-dark); }
.upload input { font-size:15px; max-width:100%; }

/* checkout total */
.total { font-size:19px; margin:16px 0 6px; padding-top:12px; border-top:1px solid var(--line); }
.total strong { font-size:26px; }

/* narrow single-form pages: staff sign-in */
.narrow { max-width:440px; margin-left:auto; margin-right:auto; }

/* on a phone, a table with labelled cells turns into one card per row */
@media (max-width:640px) {
  table.stack thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  table.stack tr { display:block; padding:8px 0; border-bottom:1px solid var(--line); }
  table.stack td { display:flex; gap:10px; padding:3px 0; border:0; }
  table.stack td::before { content:attr(data-label); flex:0 0 44%; color:var(--muted); font-weight:700; }
}