/* Brand colours and fonts (green, Manrope headings, Source Sans 3 text), shared with the emails (David, 24 October 2026). */
:root{
  --bg:#F4F6F4; --surface:#FFFFFF; --fg:#16201B; --muted:#56635C; --soft:#3C4842;
  --line:#DCE3DF; --field:#B9C4BE; --accent:#1F6B57; --accent-strong:#164E40; --on-accent:#FFFFFF;
  --done-bg:#E3EFEA; --todo-bg:#EEF1EF;
  --warn-bg:#FFF6EC; --warn-line:#E8C9A4; --danger:#8A3B12;
  --note-bg:#EEF4FB; --note-line:#C5D6EA;
  --display:"Manrope",system-ui,sans-serif; --body:"Source Sans 3",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111714; --surface:#19211D; --fg:#E6ECE8; --muted:#9AA8A0; --soft:#C3CEC8;
  --line:#2C3833; --field:#43524B; --accent:#5DB89C; --accent-strong:#7DCCB3; --on-accent:#0D1411;
  --done-bg:#1F3A31; --todo-bg:#222B27;
  --warn-bg:#2E2418; --warn-line:#5E4528; --danger:#E08A5C;
  --note-bg:#1A2430; --note-line:#33475E; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111714; --surface:#19211D; --fg:#E6ECE8; --muted:#9AA8A0; --soft:#C3CEC8;
  --line:#2C3833; --field:#43524B; --accent:#5DB89C; --accent-strong:#7DCCB3; --on-accent:#0D1411;
  --done-bg:#1F3A31; --todo-bg:#222B27;
  --warn-bg:#2E2418; --warn-line:#5E4528; --danger:#E08A5C;
  --note-bg:#1A2430; --note-line:#33475E; color-scheme:dark}
/* Body text is grey, like the emails; headings, names and form labels stay dark (David, 24 October 2026). */
body{margin:0;background:var(--bg);color:var(--muted);font-family:var(--body);font-size:16px;line-height:1.5}
a{color:var(--accent)}a:hover{color:var(--accent-strong)}
.page{min-height:100vh;display:flex;flex-direction:column}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:18px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.brand b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-0.01em}
.brand span{font-size:13px;color:var(--muted)}
nav{display:flex;flex-wrap:wrap;gap:6px}
nav span{font-size:13px;padding:6px 10px;border-radius:999px;background:var(--todo-bg);color:var(--muted)}
nav span.done{background:var(--done-bg);color:var(--accent)}
nav span.now{background:var(--accent);color:var(--on-accent);font-weight:600}
main{flex:1;width:100%;max-width:760px;margin:0 auto;box-sizing:border-box;padding-block:40px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
section{display:flex;flex-direction:column;gap:20px}
.head{display:flex;flex-direction:column;gap:6px}
h1{margin:0;font-family:var(--display);font-size:30px;line-height:1.15;text-wrap:balance}
h1.hero{font-size:32px}
h2{margin:0;font-size:18px}
.lead{margin:0;color:var(--muted);font-size:17px;max-width:60ch}
.card{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px}
.points{margin:0;padding-left:20px;color:var(--soft);display:flex;flex-direction:column;gap:4px}
label.field{display:flex;flex-direction:column;gap:6px;font-weight:600}
.help{font-weight:400;font-size:14px;color:var(--muted)}
input[type=text],input[type=email],input[type=number],select{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--field);border-radius:6px;background:var(--surface);color:var(--fg);min-height:44px;box-sizing:border-box;width:100%}
input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.area{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.area .pc{flex:1 1 180px}.area .mi{flex:0 1 160px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:520px){.grid2{grid-template-columns:minmax(0,1fr)}}
.check{display:flex;align-items:center;gap:10px;min-height:44px}
.check input{width:20px;height:20px;flex:none;accent-color:var(--accent)}
details{border-top:1px solid var(--line);padding-top:12px}
summary{cursor:pointer;font-weight:600;min-height:32px}
.row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
button{font:inherit;cursor:pointer;min-height:48px;padding:0 20px;border-radius:8px;border:1px solid var(--field);background:var(--surface);color:var(--fg)}
button.primary{border:0;background:var(--accent);color:var(--on-accent);font-weight:600;padding:0 24px}
button.primary:disabled{opacity:.45;cursor:not-allowed}
button.outline{border-color:var(--accent);color:var(--accent);font-weight:600}
button.dashed{min-height:44px;border:1px dashed var(--accent);color:var(--accent);font-weight:600}
button.small{min-height:44px}
button.link{border:0;background:transparent;color:var(--accent);text-decoration:underline;min-height:44px;padding:0 4px}
button.danger{border:0;background:var(--danger);color:var(--on-accent);font-weight:600;min-height:44px}
.stat{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px}
.stat b{font-family:var(--display);font-weight:800;font-size:32px;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted)}
.small-print{margin:0;font-size:14px;color:var(--muted)}
.kv{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.kv b{font-weight:600}
.price{font-family:var(--display);font-weight:800;font-size:22px}
.alert{display:flex;flex-direction:column;gap:12px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;padding:20px}
.mock{font-size:14px;color:var(--soft);background:var(--note-bg);border:1px solid var(--note-line);border-radius:8px;padding:12px 14px;margin:0}
.email{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.email .meta{font-size:13px;color:var(--muted)}
.email p{margin:0}
footer{font-size:13px;color:var(--muted);border-top:1px solid var(--line);background:var(--surface);padding-block:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
footer p{margin:0;max-width:90ch}
.about-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.about-list li{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:12px}
.about-list li:first-child{border-top:0;padding-top:0}
.about-list .src{font-size:14px;color:var(--muted)}
/* Additions for the live site */
.brand a{color:inherit;text-decoration:none}
.topnav{display:flex;flex-wrap:wrap;gap:14px;font-size:14px}
.topnav a{color:var(--muted)}
.error{color:var(--danger);font-weight:600;font-size:14px}
.notice{background:var(--note-bg);border:1px solid var(--note-line);border-radius:8px;padding:12px 14px;margin:0}
a.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:8px;text-decoration:none;font-weight:600}
a.button.primary{background:var(--accent);color:var(--on-accent)}
a.button.outline{border:1px solid var(--accent);color:var(--accent)}
form.inline{display:inline}
.prose{display:flex;flex-direction:column;gap:12px;max-width:68ch}
.prose h2{font-size:20px;margin-top:12px}
.prose p,.prose ul,.prose ol{margin:0}
.prose li{margin-bottom:4px}
table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list th,table.list td{text-align:left;border-bottom:1px solid var(--line);padding:8px 6px;vertical-align:top}
.tag{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--todo-bg);color:var(--soft)}
.tag.ok{background:var(--done-bg);color:var(--accent)}
.tag.bad{background:var(--warn-bg);color:var(--danger)}
.wide{max-width:1100px}
iframe.preview{width:100%;height:70vh;border:1px solid var(--line);border-radius:8px;background:#fff}
.spinner{font-size:14px;color:var(--muted)}

h1,h2,h3,.brand b,label.field,.kv b,.stat b,b,strong,th{color:var(--fg)}
input,select,textarea{color:var(--fg)}
.points{color:var(--muted)}