/* Jacqui's Corner: the public website. Plain files, no scripts, no outside fonts or trackers.
   Colours are the app's own (terracotta on warm stone). Every text colour passes WCAG AA contrast on its background. */
:root {
  --bg: #f0ebe5;
  --card: #fbf8f4;
  --line: #e0d4c7;
  --text: #383432;
  --muted: #665a51;
  --link: #7c4f3a;
  --accent: #be8a70;
  --on-accent: #1f1b1a;
  --shell: #464240;
  --on-shell: #ffffff;
  --on-shell-muted: #d9cfc7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1b1a;
    --card: #2a2625;
    --line: #3f3836;
    --text: #f2ece6;
    --muted: #b8aca2;
    --link: #d9a98f;
    --shell: #151312;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); color: var(--text); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 44rem; }

/* top bar */
.bar { background: var(--shell); color: var(--on-shell); }
.bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--on-shell); text-decoration: none; font-weight: 600; font-size: 1.1rem; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.bar nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.bar nav a { color: var(--on-shell); text-decoration: none; padding: 6px 0; }
.bar nav a:hover, .bar nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }

/* hero */
.hero { background: var(--shell); color: var(--on-shell); padding: 56px 0 72px; }
.hero .eyebrow { color: var(--on-shell-muted); }
.hero h1 { color: var(--on-shell); max-width: 18ch; font-size: clamp(2.1rem, 6vw, 3.4rem); }
.hero .lead { color: var(--on-shell-muted); max-width: 38rem; font-size: 1.15rem; }
.store { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.pill { display: inline-block; border-radius: 999px; padding: 11px 22px; font-weight: 600; text-decoration: none; }
.pill.solid { background: var(--accent); color: var(--on-accent); }
.pill.soon { border: 1px solid var(--on-shell-muted); color: var(--on-shell); }
.store small { color: var(--on-shell-muted); }

.eyebrow { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 16px; }
h2 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 12px; }
h3 { font-size: 1.1rem; margin: 0 0 6px; }
p { margin: 0 0 14px; }
.muted { color: var(--muted); }

section.block { padding: 56px 0 8px; }
section.block > .wrap > p.intro { max-width: 40rem; color: var(--muted); }

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 24px; padding: 0; list-style: none; }
.cards li { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin: 0; }
.cards p { margin: 0; color: var(--muted); }

ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
ol.steps li { counter-increment: step; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin: 0; }
ol.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; margin-bottom: 10px; }
ol.steps strong { display: block; }
ol.steps span { color: var(--muted); }

.about { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px 26px; margin-top: 24px; max-width: 44rem; }
.about p:last-child { margin-bottom: 0; }

/* text pages (support, delete account) */
main.page { padding: 44px 0 24px; }
main.page h2 { margin-top: 36px; }
main.page ol, main.page ul { padding-left: 1.3rem; }
li { margin-bottom: 8px; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; margin: 0 0 12px; }
details summary { cursor: pointer; font-weight: 600; padding: 12px 0; }
details[open] summary { margin-bottom: 4px; }
details p { color: var(--text); }
.contact { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px; margin: 24px 0; }
.contact p { margin: 0 0 6px; }

footer { margin-top: 56px; border-top: 1px solid var(--line); padding: 28px 0 48px; color: var(--muted); font-size: 0.95rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
footer p { margin: 0; max-width: 34rem; }
footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0; margin: 0; }
footer li { margin: 0; }