/* Diski Connect coming-soon. Same colours as the app; system fonts so the page loads fast and asks nothing of other sites. */
:root {
  --bg: #f4f6f3; --card: #ffffff; --raised: #fbfcfa; --fg: #1a1a1a; --muted: #5f665c; --line: #e2e6df;
  --green: #006633; --leaf: #006633; --gold: #ffb612;
  --danger: #c0272d; --danger-bg: #fdf0f0; --warn: #8a6100; --warn-bg: #fff8e6; --good: #006633; --good-bg: #edf7f0;
  --heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e100e; --card: #191c19; --raised: #212520; --fg: #f1f4ef; --muted: #9aa495; --line: #2c312b; --leaf: #43b06d;
    --danger: #ff8080; --danger-bg: #2a1717; --warn: #ffc954; --warn-bg: #2b2312; --good: #5cc98a; --good-bg: #14251a;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--heading); letter-spacing: -0.015em; line-height: 1.2; margin: 0; }
h1 { font-size: 1.85rem; font-weight: 800; }
h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.5rem; }
a { color: var(--leaf); }
p { margin: 0.5rem 0 0; }
.muted, small { color: var(--muted); }
small { display: block; font-size: 0.75rem; margin-top: 0.25rem; }

.top { display: flex; justify-content: center; padding: 1rem 1rem 0.25rem; }
.top img { width: 100%; max-width: 19rem; height: auto; }
.top.small img { max-width: 9rem; }
.wrap { max-width: 42rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; display: grid; gap: 1.25rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.card.small { padding: 0.85rem; }
.hero h1 { margin-top: 0.25rem; }
.eyebrow { font: 700 0.72rem var(--heading); text-transform: uppercase; letter-spacing: 0.06em; color: var(--leaf); margin: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.6rem 1rem; width: 100%; border: 0; border-radius: 0.75rem; background: var(--green); color: #fff; font: 700 0.9rem var(--heading); text-decoration: none; cursor: pointer; margin-top: 1rem; }
@media (prefers-color-scheme: dark) { .btn { background: var(--leaf); color: #06210f; } }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn.danger { background: #c0272d; color: #fff; }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn.small { width: auto; min-height: 2rem; padding: 0.3rem 0.7rem; margin: 0; font-size: 0.75rem; }
.btn.small.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }

.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.promises li { display: grid; gap: 0.2rem; }
.promises span { font-size: 0.8rem; color: var(--muted); }

.join { scroll-margin-top: 1rem; display: grid; gap: 0.75rem; }
.form { display: grid; gap: 1rem; }
fieldset { border: 0; padding: 0; margin: 0; }
legend, .field > span { display: block; font: 700 0.72rem var(--heading); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.4rem; }
.choices { display: grid; gap: 0.5rem; }
.choice, .consent label { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.65rem 0.75rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--card); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--green); background: var(--raised); }
.choice b { display: block; font-size: 0.95rem; }
.choice small { margin: 0.1rem 0 0; font-size: 0.8rem; }
.choice .emoji { font-size: 1.5rem; line-height: 1.2; flex: none; }
.choice input { margin-top: 0.3rem; }
input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin: 0.15rem 0 0; accent-color: var(--green); flex: none; }
.field { display: block; }
input:not([type="checkbox"]), select, textarea { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--card); color: var(--fg); font: inherit; font-size: 0.9rem; }
textarea { min-height: 5rem; resize: vertical; }
.row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .row { grid-template-columns: 1fr 1fr; } .promises { grid-template-columns: 1fr 1fr; } }
.consent { display: grid; gap: 0.6rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--raised); font-size: 0.78rem; color: var(--muted); }
.consent label { border: 0; padding: 0; background: none; }
.consent b { color: var(--fg); }
.trap { position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden; }
.js .role-field[hidden] { display: none; }

.note { border: 1px solid var(--line); border-radius: 1rem; padding: 0.9rem 1rem; }
.note p { margin-top: 0.25rem; font-size: 0.9rem; }
.note.good { background: var(--good-bg); border-color: var(--good); }
.note.good b { color: var(--good); }
.note.bad { background: var(--danger-bg); border-color: var(--danger); }
.note.bad b { color: var(--danger); }
.note.warn { background: var(--warn-bg); border-color: var(--warn); font-size: 0.85rem; }

.prose h1 { margin-top: 0.5rem; }
.prose h2 { margin-top: 1.25rem; }
.prose p { font-size: 0.92rem; }
.foot { text-align: center; font-size: 0.75rem; color: var(--muted); padding: 1rem 1rem 2rem; border-top: 1px solid var(--line); max-width: 42rem; margin: 0 auto; }

/* admin */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats .card b { display: block; font: 800 1.6rem var(--heading); }
.triple { display: grid; gap: 0.6rem; }
@media (min-width: 700px) { .triple { grid-template-columns: repeat(3, 1fr); } }
.tally { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.85rem; }
.tally li, .split { display: flex; justify-content: space-between; gap: 0.75rem; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.people p { font-size: 0.8rem; }
.quote { background: var(--raised); border-radius: 0.5rem; padding: 0.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.actions form { margin: 0; }

/* copy and structure added with the pain-point questions */
.lead { font-size: 1.02rem; font-weight: 600; margin-top: 0.75rem; }
.promises li { display: flex; gap: 0.75rem; align-items: flex-start; }
.promises .emoji { font-size: 1.5rem; line-height: 1.2; flex: none; }
.promises b { display: block; font: 700 0.9rem var(--heading); }
.promises .muted { display: block; font-size: 0.8rem; margin-top: 0.15rem; }
.step { display: grid; gap: 0.9rem; }
.step-title, .step legend { font: 800 1.05rem var(--heading); text-transform: none; letter-spacing: -0.01em; color: var(--fg); margin: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--green); color: #fff; font: 800 0.8rem var(--heading); flex: none; }
@media (prefers-color-scheme: dark) { .num { background: var(--leaf); color: #06210f; } }
.tip { font: 500 0.75rem var(--body); color: var(--muted); text-transform: none; letter-spacing: 0; }
.step-note { font-size: 0.85rem; margin: 0; }
.js-only-hint { display: none; }
.js .js-only-hint { display: block; }
.js .js-only-hint[hidden] { display: none; }
.pains { display: grid; gap: 0.5rem; }
.pains legend { font: 700 0.9rem var(--heading); text-transform: none; letter-spacing: 0; color: var(--fg); margin-bottom: 0.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 0.5rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 0.82rem; line-height: 1.25; transition: border-color 0.15s, background 0.15s; }
.chip:hover span { border-color: var(--green); }
.chip input:checked + span { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { .chip input:checked + span { background: var(--leaf); border-color: var(--leaf); color: #06210f; } }
.chip input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.wish textarea { min-height: 7rem; }
.under18 { margin: 0; font-size: 0.75rem; }
.share { width: auto; margin-top: 0.4rem; text-decoration: none; }
.tally + .tally, h3 { font: 700 0.9rem var(--heading); margin: 0 0 0.4rem; }
.field.wish > span { font: 800 1rem var(--heading); text-transform: none; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 0.5rem; }

.tag { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--good-bg); color: var(--good); font: 700 0.68rem var(--heading); vertical-align: middle; }
.chat-ok { border: 1px solid var(--green) !important; padding: 0.6rem 0.7rem !important; border-radius: 0.6rem; background: var(--card); }
.chat-now { width: auto; text-decoration: none; background: #128c7e; color: #fff; }

.js .main-role[hidden], .js .chip[hidden] { display: none; }
.main-count { font-weight: 500; font-size: 0.78rem; }