/* stash-minder.com: the landing page. Values come from the Stash Minder design system (Provençal Tile, Pink tile). */
:root {
  --bg: #fdfbf6; --card: #ffffff; --ink: #1e2b45; --muted: #56607a;
  --line: #ead9de; --line-strong: #d9b9c4; --accent: #b4476a; --on-accent: #ffffff;
  --soft: #fbeaf0; --soft-ink: #8a2f4e; --motif-soft: #e6afc0; --brand-blue: #33589e;
  --warn: #9e3620; --warn-soft: #fbe9e3;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-input: 12px; --r-card: 16px; --r-chip: 22px; --r-ctl: 24px;
  --tap-min: 44px; --btn-height: 46px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.5; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; }
p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.band { display: block; line-height: 0; border-bottom: 1px solid var(--accent); }
.band svg { display: block; }
.b-ring { fill: none; stroke: var(--motif-soft); stroke-width: 1.2; }
.b-leaf { fill: var(--motif-soft); }
.b-petal { fill: var(--accent); }
.b-eye { fill: var(--card); }

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding-inline: 20px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.brand { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 26px; }
.brand img { width: 30px; height: 30px; }

.kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.btn { min-height: var(--btn-height); padding: 0 22px; border-radius: var(--r-ctl); border: 1.5px solid transparent; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.ghost { border-color: var(--accent); color: var(--accent); background: var(--card); }
.btn.small { min-height: var(--tap-min); padding: 0 16px; font-size: 15px; }

/* The hero: the promise, set big in the display face, with the frieze above it. */
.hero { display: grid; gap: 20px; padding-block: 44px 52px; max-width: 760px; }
.hero h1 { font-size: clamp(44px, 8vw, 76px); line-height: 1.02; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lede { font-size: 19px; color: var(--muted); max-width: 36em; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero .note { font-size: 14px; color: var(--muted); }

section { padding-block: 44px; }
section + section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 8px; margin-bottom: 26px; max-width: 640px; }
.section-head h2 { font-size: clamp(32px, 5vw, 42px); font-style: italic; line-height: 1.1; }
.section-head p { color: var(--muted); }

/* What it keeps track of: a quatrefoil bullet, a name, one sentence. */
.keeps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.keeps li { display: grid; grid-template-columns: 28px 1fr; gap: 4px 12px; align-items: start; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.keeps svg { grid-row: span 2; width: 28px; height: 28px; margin-top: 2px; }
.keeps h3 { font-size: 24px; line-height: 1.15; }
.keeps p { color: var(--muted); font-size: 16px; min-width: 0; }
.q-petal { fill: var(--accent); }
.q-eye { fill: var(--card); }
.q-leaf { fill: var(--motif-soft); }

.who { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.who > div { display: grid; gap: 8px; align-content: start; min-width: 0; }
.who h3 { font-size: 26px; }
.who p { color: var(--muted); }
.persona-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.persona-row span { min-height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--r-chip); background: var(--soft); color: var(--soft-ink); font-size: 14px; font-weight: 700; }

.test { display: grid; gap: 14px; }
.test ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.test li::marker { color: var(--accent); }

/* The request form: one card, labels above fields. */
.join { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 28px; align-items: start; }
.join-copy { display: grid; gap: 12px; min-width: 0; }
.join-copy p { color: var(--muted); }
form.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; display: grid; gap: 16px; min-width: 0; }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-weight: 700; font-size: 15px; }
.field .hint { font-size: 14px; color: var(--muted); font-weight: 400; }
.field input, .field select { width: 100%; min-height: var(--tap-min); padding: 0 14px; border: 1px solid color-mix(in srgb, var(--line-strong) 65%, var(--ink)); border-radius: var(--r-input); background: var(--card); color: var(--ink); font: inherit; font-size: 16px; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 6px; }
.choices label { position: relative; font-weight: 600; font-size: 15px; }
.choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choices span { min-height: var(--tap-min); display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--line-strong) 65%, var(--ink)); border-radius: var(--r-chip); background: var(--card); cursor: pointer; }
.choices input:checked + span { border-color: var(--accent); background: var(--soft); color: var(--soft-ink); font-weight: 700; }
.choices input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fine { font-size: 13px; color: var(--muted); }

.notice { display: grid; gap: 14px; padding-block: 56px 72px; max-width: 620px; }
.notice h1 { font-size: clamp(40px, 7vw, 60px); line-height: 1.05; }
.notice p { color: var(--muted); }
.notice.problem .kicker { color: var(--warn); }

footer { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--muted); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.join-title { font-size: clamp(32px, 5vw, 42px); font-style: italic; line-height: 1.1; }
@media (max-width: 420px) { .brand { font-size: 22px; } .top .btn.small { padding: 0 12px; font-size: 14px; } }
.notice .tip { padding: 14px 16px; border-radius: var(--r-card); background: var(--soft); color: var(--soft-ink); }
.notice .tip strong { font-weight: 700; }
.notice.privacy h2 { font-size: 26px; margin-top: 10px; }
.notice.privacy p { color: var(--ink); }
footer a { color: var(--muted); }