/* Thursday Rose. A calm room with a painted mural: petals of blush, dusty rose, terracotta, sand
   and sage on a warm cream wall, burgundy bouclé chairs, oak and a charcoal pendant.
   Visual system and reasoning: DESIGN.md. */
:root {
  --cream: #f7f0e7;
  --paper: #fffaf4;
  --blush: #f1d8cf;
  --blush-2: #e7bfb4;
  --rose: #b4545f;          /* dusty rose: links, ticks, accents */
  --rose-ink: #8f3a45;
  --oxblood: #5e1c27;       /* the bouclé chairs: headings, buttons, deep bands */
  --terracotta: #c4785a;
  --sand: #e3c7a4;
  --sage: #7f9474;
  --moss: #7f9474;          /* focus rings and small marks (sage) */
  --gold: #b98a5a;          /* oak: hairlines and stars */
  --charcoal: #2c2628;
  --deep: #5e1c27;       /* deep band (burgundy) */
  --deep-2: #3f1219;     /* footer */
  --ink: #2c2226;
  --mut: #6d5d5c;
  --line: #e8d8cc;
  --bg: var(--cream);
  --fg: var(--ink);
  --card: var(--paper);
  --head: var(--oxblood);
  --accent: var(--rose-ink);  /* text in rose: 5.4:1 on blush; --rose is for dots and ticks */
  --accent-ink: #fff;
  --consent-bg: var(--paper);
  --consent-fg: var(--ink);
  --consent-line: var(--line);
  --consent-accent: var(--oxblood);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 22px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1214; --card: #261a1d; --fg: #f3e7e1; --mut: #c4aeb0; --line: #3d2c30;
    --head: #f2c9cf; --accent: #e3889a; --accent-ink: #2a1418; --blush: #33232a; --blush-2: #45303a;
    --consent-bg: #261a1d; --consent-fg: #f3e7e1; --consent-line: #3d2c30; --consent-accent: #e3889a;
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.6 var(--sans); }
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { color: var(--head); }
:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 720px; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--head); font-weight: 500; line-height: 1.1; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; color: var(--accent); font-weight: 400; }
.kicker { font: 600 .78rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.lede { font-size: 1.15rem; color: var(--mut); max-width: 38em; }
.mut { color: var(--mut); }
.small { font-size: .9rem; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--head); font: italic 500 1.45rem/1 var(--serif); white-space: nowrap; }
.brand img { width: 32px; height: 32px; flex: none; border-radius: 8px; }
.nav { display: flex; align-items: center; gap: 18px; justify-content: flex-end; }
.nav a { color: var(--fg); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; }
.nav a:hover { color: var(--accent); }
.nav .pill { padding: 8px 16px; border-radius: 999px; background: var(--head); color: var(--bg); }
.nav .pill:hover { color: var(--bg); background: var(--accent); }
@media (max-width: 640px) { .nav .hide-s { display: none; } .nav { gap: 14px; } .brand { font-size: 1.2rem; gap: 8px; } .nav .pill { padding: 8px 14px; } }
@media (max-width: 430px) { .brand span { display: none; } .brand img { width: 36px; height: 36px; } }
[tabindex="-1"]:focus { outline: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; border: 0; background: var(--oxblood); color: #fff; font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.btn:hover { background: var(--rose-ink); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: wait; transform: none; }
.btn.ghost { background: transparent; color: var(--head); box-shadow: inset 0 0 0 1.5px var(--head); }
.btn.ghost:hover { background: var(--head); color: var(--bg); }
.btn.small { padding: 9px 16px; font-size: .9rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { background: var(--accent); color: var(--accent-ink); } :root:not([data-theme="light"]) .btn:hover { background: #f0a7b5; color: var(--accent-ink); } }
.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* Hero (Cara, 2026-10-22): the headline beside the pink art-deco bathroom photo, framed in an arch
   with a gold edge like the photo's own arches (public/img/hero-bath.webp, see design/IMAGE-CREDITS.md).
   The photo is 480px wide, so it is shown at about that size and stays sharp. */
.hero { padding: clamp(28px, 5vw, 64px) 0 clamp(36px, 5vw, 64px); overflow-x: clip; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(2.8rem, 7vw, 5.2rem); line-height: 1; margin-bottom: .3em; }
.h1-sub { display: block; font-size: .42em; font-style: italic; font-weight: 400; color: var(--accent); margin-top: .35em; letter-spacing: 0; }
.hero .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 28px 0 10px; }
.sparkle { color: var(--gold); }
/* The photo sits inside a thin gold arch line with a cream gap all round (Cara, 2026-10-22, after an
   arched frame she shared): arch top, square bottom corners, no animation. The round "Make my plan"
   badge overlaps the bottom-right corner of the frame on a cream ring. */
.arch-photo { position: relative; margin: 0 24px 0 0; justify-self: end; width: min(100%, 540px); padding: 18px; }
.arch-photo::before { content: ""; position: absolute; inset: 0; border: 2px solid #b8894e; border-radius: 999px 999px 0 0; pointer-events: none; }
.arch-photo img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 560; object-fit: cover; object-position: 50% 20%; border-radius: 999px 999px 0 0; }

.round-cta { position: absolute; right: -44px; bottom: -44px; width: 176px; height: 176px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; background: #f3d9d1; text-decoration: none; text-align: center;
  box-shadow: inset 0 0 0 2px #b8894e, 0 0 0 8px var(--bg), 0 22px 40px -18px rgb(94 28 39 / .45); transition: transform .25s cubic-bezier(.23, 1, .32, 1); }
.round-cta .ring { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; animation: ring-turn 18s linear infinite; }
.round-cta .ring text { font: 500 9.2px "Jost", var(--sans); letter-spacing: .22em; fill: #5e1c27; }
.rc-big { font: 400 2.05rem/1 "Bodoni Moda", var(--serif); color: #8f3a45; letter-spacing: .02em; text-transform: uppercase; }
.rc-small { font: 600 .74rem/1 "Jost", var(--sans); color: #5e1c27; letter-spacing: .22em; text-transform: uppercase; }
.round-cta:hover { transform: scale(1.05); }
.round-cta:active { transform: scale(.97); }
.round-cta:hover .ring { animation-duration: 7s; }
@keyframes ring-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .round-cta .ring { animation: none !important; } }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .arch-photo { order: -1; justify-self: center; width: min(calc(100% - 48px), 340px); padding: 12px; margin: 0 22px 18px 0; }
  .round-cta { width: 132px; height: 132px; right: -34px; bottom: -30px; }
  .rc-big { font-size: 1.55rem; } .rc-small { font-size: .62rem; }
  .arch-photo img { aspect-ratio: 1 / 1.05; object-position: 50% 30%; border-radius: 999px 999px 0 0; }
}

.example { padding: clamp(28px, 4vw, 44px) 0; background: var(--blush); }
.example .kicker { margin-bottom: 14px; }
.card { background: var(--card); border-radius: 24px; padding: 18px 20px; border: 1px solid var(--line); box-shadow: 0 14px 30px -22px rgb(94 28 39 / .55); }
.when { font: 700 .72rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rose-ink); }

/* Sections */
section.band { padding: clamp(56px, 8vw, 96px) 0; }
section.band h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); max-width: 18em; }
.band.deep { background: var(--deep); color: #f7ece6; }
.band.deep h2, .band.deep h3 { color: #fbf4ec; }
.band.deep .kicker { color: var(--moss); }
.band.deep .mut, .band.deep p { color: #ecd3cb; }
.band.blush { background: var(--blush); }
.steps { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.steps li { padding: 26px 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.steps .n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blush); color: var(--oxblood); font: italic 500 1.3rem var(--serif); margin-bottom: 12px; }
.steps h3 { font-size: 1.35rem; }
.steps p { margin: 0; color: var(--mut); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.feature { padding: 26px 24px; border-radius: var(--r); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14); }
.feature svg { width: 34px; height: 34px; color: var(--moss); margin-bottom: 10px; }
.feature h3 { font-size: 1.3rem; }
.feature p { margin: 0; }
@media (max-width: 860px) { .steps, .features { grid-template-columns: 1fr; } }
@media (min-width: 561px) and (max-width: 860px) { .features { grid-template-columns: 1fr 1fr; } }

.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--blush); color: var(--oxblood); font: 700 .7rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }

.phases { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.phase { padding: 28px 26px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.phase ul { margin: 12px 0 0; padding-left: 1.1em; }
.phase li { margin: 6px 0; }
.phase li::marker { color: var(--gold); content: "✦  "; }
@media (max-width: 760px) { .phases { grid-template-columns: 1fr; } }

/* Notes (articles) */
.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; }
.note-card { display: block; text-decoration: none; color: inherit; border-radius: var(--r); overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.note-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.note-card div { padding: 16px 18px 18px; }
.note-card h3 { font-size: 1.25rem; margin: 4px 0 6px; }
.note-card time { font-size: .85rem; color: var(--mut); }

/* Forms */
label { display: block; font-weight: 600; margin: 0 0 6px; }
input[type=text], input[type=email], input[type=date], input[type=url], select, textarea {
  width: 100%; padding: 13px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--fg); font: 400 1rem/1.3 var(--sans); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
textarea { min-height: 90px; resize: vertical; }
.field { margin: 0 0 16px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -5000px; }
.signup-band { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; padding: 30px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); margin-top: 40px; }
.signup-band form div { display: flex; gap: 10px; flex-wrap: wrap; }
.signup-band input[type=email] { flex: 1 1 220px; width: auto; }
@media (max-width: 760px) { .signup-band { grid-template-columns: 1fr; } }
.status { min-height: 1.4em; margin: 8px 0 0; font-weight: 600; color: var(--accent); }
.status.ok { color: var(--deep); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .status.ok { color: #cfe3c4; } }

/* The planner: one question at a time */
.quiz { max-width: 760px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) 20px 80px; }
.progress { display: flex; gap: 6px; margin: 0 0 28px; }
.progress span { flex: 1; height: 5px; border-radius: 5px; background: var(--line); }
.progress span.on { background: var(--accent); }
.quiz h1 { font-size: clamp(2rem, 5vw, 3rem); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
@media (max-width: 560px) { .choices { grid-template-columns: 1fr; } }
.choice { position: relative; display: block; cursor: pointer; }
.choice > input { position: absolute; opacity: 0; pointer-events: none; }
.choice .box { display: grid; grid-template-columns: 44px 1fr 24px; gap: 12px; align-items: center; padding: 16px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--card); transition: border-color .15s, background .15s; }
.choice .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--blush); color: var(--oxblood); }
.choice .ico svg { width: 24px; height: 24px; }
.choice b { display: block; font-weight: 600; }
.choice small { color: var(--mut); font-size: .88rem; }
.choice .tick { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: transparent; font-size: .8rem; }
.choice > input:checked + .box { border-color: var(--accent); background: color-mix(in srgb, var(--blush) 55%, var(--card)); }
.choice > input:checked + .box .tick { background: var(--accent); border-color: var(--accent); color: #fff; }
.choice > input:focus-visible + .box { outline: 3px solid var(--moss); outline-offset: 2px; }
.choice .when-date { display: none; grid-column: 1 / -1; margin-top: 4px; }
.choice > input:checked + .box .when-date { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--fg); font: 500 .9rem var(--sans); cursor: pointer; }
.chip:hover, .chip[aria-pressed=true] { border-color: var(--accent); color: var(--accent); }
.qnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }
.hint { background: var(--blush); border-radius: 14px; padding: 12px 14px; color: var(--oxblood); font-size: .92rem; margin: 14px 0 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hint { color: var(--head); } }

/* The calendar */
.plan-head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.weeks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.week { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.week .wk { font: italic 500 1.1rem/1.2 var(--serif); color: var(--head); }
.week .wk small { display: block; font: 600 .75rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); font-style: normal; margin-top: 2px; }
.week.now { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: start; }
.dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; background: var(--gold); }
.k-cycle .dot { background: var(--rose); } .k-style .dot { background: var(--oxblood); } .k-event .dot { background: var(--moss); box-shadow: 0 0 0 3px color-mix(in srgb, var(--moss) 35%, transparent); }
.k-book .dot { background: transparent; border: 2px solid var(--rose); } .k-deep .dot { background: var(--sage); } .k-care .dot { background: var(--blush-2); }
.item b { display: block; font-weight: 600; }
.item .d { font-size: .82rem; color: var(--accent); font-weight: 700; letter-spacing: .04em; }
.item p { margin: 2px 0 0; color: var(--mut); font-size: .93rem; }
.item.done b, .item.done p { text-decoration: line-through; opacity: .55; }
.item input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--rose); margin-top: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; color: var(--mut); margin: 0 0 16px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .dot { margin: 0; }
@media (max-width: 560px) { .week { grid-template-columns: 1fr; gap: 8px; } }
.save { margin-top: 28px; padding: 26px; border-radius: var(--r); background: var(--deep); color: #f7ece6; }
.save h2, .save h3 { color: #fbf4ec; }
.save p { color: #ecd3cb; }
.save label { color: #fbf4ec; }
.save input { background: #fffaf5; color: var(--ink); border-color: transparent; }
.save .btn { background: #fbf4ec; color: var(--oxblood); }
.save .btn:hover { background: var(--blush); color: var(--oxblood); }
.save .status { color: #f4dcd8; }
.save a { color: #f4dcd8; }
.code { font: 700 1.6rem/1 var(--sans); letter-spacing: .4em; text-align: center; max-width: 240px; }

/* Member page */
.me-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .me-grid { grid-template-columns: 1fr; } }
.panel { padding: 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); margin-bottom: 20px; }
.panel h2 { font-size: 1.6rem; }
.visits { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.visits li { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: start; padding: 12px; border-radius: 14px; background: var(--bg); }
.visits .g { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--blush); color: var(--oxblood); font: italic 500 1.5rem var(--serif); }
.visits p { margin: 2px 0 0; color: var(--mut); font-size: .93rem; white-space: pre-wrap; }
.events-edit { display: grid; gap: 10px; }
.events-edit .ev { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr auto; gap: 8px; align-items: center; }
@media (max-width: 640px) { .events-edit .ev { grid-template-columns: 1fr 1fr; } }
.toggle { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.toggle input { width: 22px; height: 22px; accent-color: var(--rose); }
.danger { color: #a3283c; }

/* Long text (About, legal, articles) */
.prose { max-width: 720px; margin: 0 auto; padding: clamp(32px, 6vw, 64px) 20px 40px; }
.prose h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.prose h2 { font-size: 1.7rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.4em; }
.prose figure { margin: 24px 0; }
.prose figure img { width: 100%; border-radius: var(--r); display: block; }
.prose figcaption { font-size: .82rem; color: var(--mut); margin-top: 6px; }
.prose blockquote { margin: 1.2em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold); color: var(--mut); font-style: italic; }
.byline { color: var(--mut); font-size: .95rem; }
.byline a { color: inherit; }
.sources li, .related li { margin: 6px 0; }
.related { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.related span { color: var(--mut); font-size: .85rem; }

/* Footer */
.foot { margin-top: 0; padding: 48px 0 40px; background: var(--deep-2); color: #ecd3cb; font-size: .95rem; }
.foot .wrap { display: grid; gap: 8px; }
.foot a { color: #f4dcd8; }
.foot .word { font: italic 500 1.7rem/1 var(--serif); color: #fbf4ec; margin: 0 0 6px; }
.foot p { margin: 0; }
.foot .buzzz { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge, :root:not([data-theme="light"]) .steps .n,
  :root:not([data-theme="light"]) .choice .ico, :root:not([data-theme="light"]) .visits .g { color: var(--head); }
}


/* Phones: the whole site on the brand burgundy with cream text (Cara, 2026-10-22). Listed after the
   dark-mode block with the same selector weight, so it wins there too. Burgundy elements switch to
   cream or deeper burgundy so they still stand out. */
@media (max-width: 640px) {
  :root, :root:not([data-theme="light"]) {
    --bg: #3f1219; --card: #531c26; --fg: #fbf1ea; --mut: #ecd3cb; --line: #6e2f3a;
    --head: #fbf1ea; --accent: #f4c9c0; --blush: #531c26; --blush-2: #6e2f3a;
    --deep: #300c13; --deep-2: #24080d;
    --consent-bg: #531c26; --consent-fg: #fbf1ea; --consent-line: #6e2f3a; --consent-accent: #fbf1ea;
    color-scheme: dark;
  }
  .btn, .save .btn { background: #fbf1ea; color: var(--oxblood); }
  .btn:hover, .save .btn:hover { background: #f1d8cf; color: var(--oxblood); }
  .btn.ghost { background: transparent; color: #fbf1ea; box-shadow: inset 0 0 0 1.5px #fbf1ea; }
  .nav .pill { background: #fbf1ea; color: var(--oxblood); }
  .when { color: #f4c9c0; }
  .steps .n, .choice .ico, .visits .g, .badge { color: #fbf1ea; }
  .hint { color: #fbf1ea; }
  .k-style .dot { background: #fbf1ea; }
  .status.ok { color: #cfe3c4; }
  .danger { color: #ffb4b4; }
  .consent button[data-v=yes] { color: var(--oxblood); }
  input[type=text], input[type=email], input[type=date], input[type=url], select, textarea { background: #fbf1ea; color: var(--ink); border-color: transparent; }
}


/* An example plan as a phone (Cara, 2026-10-22, after a booking-app screen she shared): a dark phone
   with a light screen showing the month, the Thursday column, the two key dates (book by Nov 1, the
   wedding on Nov 15) and the three plan items as labelled rose bars. The screen keeps its own light
   colours on every page and theme. */
.example { text-align: center; }
.example .kicker { margin-bottom: 18px; }
.phone { width: min(100%, 340px); margin: 0 auto; padding: 12px; border-radius: 46px; background: #2c2226;
  box-shadow: inset 0 0 0 2px #4a3b3f, 0 40px 70px -40px rgb(44 34 38 / .7); text-align: left; }
.phone-screen { border-radius: 36px; background: #fffaf6; color: #4a3438; padding: 22px 18px 24px; font-family: var(--sans); }
.ph-top { display: flex; align-items: center; justify-content: space-between; font-size: 1.25rem; color: #6d5d5c; margin-bottom: 14px; }
.ph-top b { font: 600 .82rem/1 "Jost", var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #4a3438; }
.ph-month { display: flex; justify-content: space-between; padding: 8px 12px; background: #b4545f; color: #fff;
  font: 500 1.05rem/1.2 "Jost", var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.ph-cal { display: grid; grid-template-columns: repeat(7, 1fr); border-left: 1px solid #efdeda; border-top: 1px solid #efdeda; margin-bottom: 18px; }
.ph-cal span { display: grid; place-items: center; height: 30px; border-right: 1px solid #efdeda; border-bottom: 1px solid #efdeda; font: 500 .72rem "Jost", var(--sans); color: #8f3a45; }
.ph-cal .dow { color: #6d5d5c; font-weight: 600; }
.ph-cal .out { color: #cdbab8; }
.ph-cal .thu { background: #f8e8e4; }
.ph-cal .book { background: #b4545f; color: #fff; }
.ph-cal .event { background: #5e1c27; color: #fff; }
.ph-rows { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.ph-when { margin: 0 0 4px; font: 500 .78rem/1.2 "Jost", var(--sans); color: #4a3438; }
.ph-bar { margin: 0; padding: 6px 10px; background: #b4545f; color: #fff; font: 500 .8rem/1.3 "Jost", var(--sans); letter-spacing: .02em; }
.ph-rows li:last-child .ph-bar { background: #5e1c27; }
.ph-note { margin: 4px 0 0; font-size: .74rem; line-height: 1.4; color: #6d5d5c; }
.ph-btn { display: block; width: fit-content; margin: 0 auto; padding: 12px 26px; border-radius: 999px; background: #b4545f; color: #fff;
  text-decoration: none; font: 500 .95rem/1 "Jost", var(--sans); box-shadow: 0 10px 22px -12px rgb(94 28 39 / .6); }
.ph-btn:hover { background: #984a55; color: #fff; }

/* Two phones side by side (stacked on small screens): the welcome screen with Karisma Ray's photo
   (Cara, 2026-10-22; her consent noted in design/IMAGE-CREDITS.md) and the routine screen. */
.phones { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; align-items: start; gap: clamp(24px, 4vw, 56px); }
.phones .phone { margin: 0; width: 100%; }
@media (max-width: 760px) { .phones { grid-template-columns: minmax(0, 340px); } }
.pw-top { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; margin-bottom: 14px; }
.pw-top img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fffaf6, 0 0 0 3.5px #b4545f; }
.pw-top b { display: block; font: 600 .95rem/1.2 "Jost", var(--sans); color: #4a3438; }
.pw-top small { display: block; font: 400 .72rem/1.3 "Jost", var(--sans); color: #6d5d5c; }
.pw-dots { font-size: 1.4rem; color: #6d5d5c; line-height: 1; }
.pw-hero { position: relative; margin: 0 -18px 16px; overflow: hidden; background: #f3e9df; }
.pw-hero img { display: block; width: 100%; height: auto; }
.pw-hi { position: absolute; right: 8px; top: 8px; margin: 0; text-align: center; color: #4a3438;
  font: 500 .74rem/1.15 "Jost", var(--sans); padding: 7px 8px 8px; border-radius: 12px; background: rgb(255 250 246 / .92); }
.pw-hi b { display: block; margin-top: 3px; font: 400 1rem/1 "Bodoni Moda", var(--serif); color: #5e1c27; text-transform: uppercase; letter-spacing: .04em; }
.pw-hi span { display: block; margin-top: 4px; padding: 2px 6px; background: #b4545f; color: #fff; font: 500 .6rem/1.2 "Jost", var(--sans); letter-spacing: .4em; text-transform: uppercase; }
.pw-h { margin: 0 0 8px; font: 500 .95rem/1.2 "Jost", var(--sans); color: #4a3438; }
.pw-cats { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pw-cats li { position: relative; display: grid; justify-items: center; gap: 5px; }
.pw-cats .pw-ico { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 12px; background: #f6e3e0; color: #8f3a45; }
.pw-cats svg { width: 24px; height: 24px; }
.pw-cats .pw-lab { font: 500 .72rem/1 "Jost", var(--sans); color: #4a3438; letter-spacing: .02em; }
.pw-cats li.on .pw-ico { background: #b4545f; color: #fff; }
.pw-cats li.on::after { content: "✓"; position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: #5e1c27; color: #fff; font-size: .6rem; display: grid; place-items: center; }
.pw-soon { margin: 0 0 20px; padding: 12px; border-radius: 12px; border: 1px dashed #e7bfb4; font-size: .78rem; line-height: 1.45; color: #6d5d5c; text-align: center; }
/* "Coming soon" on a feature card in the green band (Cara, 2026-10-22). */
.feature .badge { display: block; width: fit-content; margin: 0 0 8px; background: #f4c9c0; color: #3f1219; }

/* About: Karisma Ray's photo under "Who made it", the whole photo with rounded corners (Cara,
   2026-10-22; consent noted in design/IMAGE-CREDITS.md), and her Instagram link. */
.maker { margin: 18px 0 14px; width: min(100%, 420px); }
.prose .maker img, .maker img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 24px 48px -30px rgb(44 34 38 / .5); }
.insta { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.insta b { font-weight: 700; }