/* ======================================================================
   Festidy gen 2 ("Cover Story"): an editorial, photo-led skin.
   The chrome is neutral paper and ink with one clay accent; each theme's
   photograph carries the theme. Theme palettes stay available as .t-<id>
   classes for invitation cards, posters, and swatches.
   Gen 1 (theme-tinted chrome, per-theme fonts) is archived in
   versions/festidi-v18-gen1-classic.html.
   ====================================================================== */
.t-dino { --t-ink:#17402E; --t-accent:#E58A1F; --t-pop:#7CB342; --t-soft:#DDEBC8; }
.t-space { --t-ink:#1E1B4B; --t-accent:#FF7A9C; --t-pop:#FFC75F; --t-soft:#E4E0FF; }
.t-unicorn { --t-ink:#4A2C6B; --t-accent:#C8367F; --t-pop:#FFD166; --t-soft:#F9E1F1; }
.t-mermaid { --t-ink:#0B4A57; --t-accent:#D0472F; --t-pop:#3DBDB1; --t-soft:#D5F0EC; }
.t-hero { --t-ink:#1C2541; --t-accent:#D62839; --t-pop:#FFC300; --t-soft:#FFE9B0; }
.t-build { --t-ink:#3A3410; --t-accent:#F2A900; --t-pop:#E4572E; --t-soft:#FFF0B3; }
.t-safari { --t-ink:#4B2E12; --t-accent:#2F7D4F; --t-pop:#E6A23C; --t-soft:#F3E2C2; }
.t-pirate { --t-ink:#12344D; --t-accent:#B93A24; --t-pop:#E9C46A; --t-soft:#EBDDB5; }
.t-garden { --t-ink:#35513B; --t-accent:#D13C67; --t-pop:#F4C95D; --t-soft:#E7F1D5; }
.t-race { --t-ink:#252525; --t-accent:#E42121; --t-pop:#F7D94C; --t-soft:#E7EEF2; }
.t-art { --t-ink:#253278; --t-accent:#DD2E18; --t-pop:#35A7B6; --t-soft:#FFF0C9; }
.t-sprout { --t-ink:#2F4A3A; --t-accent:#B4535E; --t-pop:#E9C97A; --t-soft:#E6EFE3; }
.t-gold { --t-ink:#1F1A14; --t-accent:#B8862B; --t-pop:#E9D8A6; --t-soft:#F4EEDF; }
.t-capsoff { --t-ink:#1B2A4A; --t-accent:#2E6FD8; --t-pop:#F5C542; --t-soft:#E5ECF8; }
.t-winter { --t-ink:#25395C; --t-accent:#3E72CC; --t-pop:#B9E4F7; --t-soft:#EAF4FA; }
.t-sports { --t-ink:#0F2A47; --t-accent:#1B5FA8; --t-pop:#F28C28; --t-soft:#E3EDF8; }
.t-sweets { --t-ink:#5B1424; --t-accent:#C8143C; --t-pop:#7BC67E; --t-soft:#FFE3E6; }
.t-princess { --t-ink:#3E1D4E; --t-accent:#7A3FB0; --t-pop:#F2C14E; --t-soft:#EFE6F8; }
.t-pixel { --t-ink:#1B1F33; --t-accent:#1F78A8; --t-pop:#7BD14B; --t-soft:#E3F1F8; }
.t-popstar { --t-ink:#1C1033; --t-accent:#C2187F; --t-pop:#3EE0F0; --t-soft:#FBE3F2; }
.t-bows { --t-ink:#4D2433; --t-accent:#B0446B; --t-pop:#F7A8C0; --t-soft:#FCEEF2; }
.t-puppy { --t-ink:#3B2A1A; --t-accent:#2A6FB0; --t-pop:#F2A93B; --t-soft:#F1EADF; }
.t-spa { --t-ink:#1F4744; --t-accent:#2B7A70; --t-pop:#F6C1C7; --t-soft:#E6F4F1; }
.t-rodeo { --t-ink:#3A2312; --t-accent:#9C4A1A; --t-pop:#3FB8AF; --t-soft:#F4E7D3; }
.t-farm { --t-ink:#3A2A16; --t-accent:#B23A2B; --t-pop:#F4CF4A; --t-soft:#F6EFDC; }
.t-bugs { --t-ink:#1F3D2A; --t-accent:#C23B2A; --t-pop:#F7C548; --t-soft:#F0F6E4; }
.t-glow { --t-ink:#150A2E; --t-accent:#7A22D6; --t-pop:#39FF88; --t-soft:#EDE6FB; }
.t-bubbles { --t-ink:#1F2550; --t-accent:#5B6CF0; --t-pop:#7FE3E0; --t-soft:#EEF2FF; }
.t-sleepover { --t-ink:#1E2349; --t-accent:#5050C8; --t-pop:#F9C74F; --t-soft:#E8E8F8; }
.t-slime { --t-ink:#1B2E3C; --t-accent:#6C3BB8; --t-pop:#8EE04B; --t-soft:#EAF8DE; }
.t-camp { --t-ink:#1F3527; --t-accent:#B5512A; --t-pop:#F2C14E; --t-soft:#E8EEE2; }
.t-wizard { --t-ink:#1C1A3A; --t-accent:#5D3FA8; --t-pop:#E7B84B; --t-soft:#ECE8F6; }
.t-paris { --t-ink:#22284A; --t-accent:#C03E68; --t-pop:#9ED9C6; --t-soft:#FBEDEF; }
.t-disco { --t-ink:#3B1A47; --t-accent:#C2451C; --t-pop:#F6B93B; --t-soft:#FDEBD9; }
.t-carnival { --t-ink:#2B1B17; --t-accent:#D1262E; --t-pop:#FBC531; --t-soft:#FFF1D6; }
.t-mystery { --t-ink:#1F2228; --t-accent:#8B3A2A; --t-pop:#E3B341; --t-soft:#EEE8DC; }
.t-tropical { --t-ink:#0F3D3E; --t-accent:#C93766; --t-pop:#2EC4C4; --t-soft:#E2F6F4; }
.t-fiesta { --t-ink:#2E1A3E; --t-accent:#C82E5C; --t-pop:#2EC4B6; --t-soft:#FFF0D9; }
.t-fall { --t-ink:#3B2414; --t-accent:#B4500F; --t-pop:#E9B44C; --t-soft:#F7EBDD; }
.t-spooky { --t-ink:#1E1530; --t-accent:#B4470F; --t-pop:#9BD14B; --t-soft:#EFE8F5; }
.t-holly { --t-ink:#1E3A26; --t-accent:#2F7A47; --t-pop:#D93A3A; --t-soft:#EAF3EA; }
.t-harvest { --t-ink:#2E2418; --t-accent:#9C3D2A; --t-pop:#D9A441; --t-soft:#F4EDE0; }
.t-festive { --t-ink:#13343B; --t-accent:#C2263A; --t-pop:#F4C542; --t-soft:#FBEDEE; }
.t-countdown { --t-ink:#0E1A33; --t-accent:#2B4FB8; --t-pop:#F5D06B; --t-soft:#E8ECF8; }
.t-tailgate { --t-ink:#1B1E24; --t-accent:#2E7D3A; --t-pop:#F2C230; --t-soft:#E6F0E2; }
.t-galentine { --t-ink:#4A1530; --t-accent:#C2185B; --t-pop:#FF9AB8; --t-soft:#FDE7EF; }
.t-lantern { --t-ink:#3D0F0F; --t-accent:#C1121F; --t-pop:#F2B33D; --t-soft:#FCE9E2; }
.t-lights { --t-ink:#3B1438; --t-accent:#A8327E; --t-pop:#F6A623; --t-soft:#FFF1DC; }
.shop-games { margin-top: 40px; display: grid; gap: 16px; }
.game-card .shop-art:not(.pic) { display: none; }
.game-card .shop-bd { padding-top: 18px; }
.shop-games-h h2 { margin: 4px 0 6px; }
.game-sup { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.game-sup li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.game-sup .shop-links { display: flex; gap: 8px; }
.pill-picked { font: 600 .7rem/1 var(--sans, inherit); background: var(--sage-bg, #e7efe9); color: var(--sage, #3f6f52); border-radius: 99px; padding: 3px 8px; vertical-align: middle; }
.ph-theme { margin-top: 14px; display: grid; gap: 10px; }
.ph-theme:empty { display: none; }
.ph-theme-q { margin: 0; font-size: .9rem; line-height: 1.45; color: inherit; }
.ph-theme-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ph-theme-chips .chip { font-size: .85rem; padding: 6px 12px; }
.ph-theme-in { width: 100%; font: inherit; font-size: .95rem; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card, #fff); color: var(--ink); }
.ph-theme-m { margin: 0; font-size: .85rem; line-height: 1.7; color: inherit; opacity: .9; }
.ph-theme label.ph-theme-q { display: block; text-transform: none; letter-spacing: 0; font: inherit; font-size: .9rem; line-height: 1.45; opacity: 1; margin: 0; }
.ph-theme-m select { width: auto; min-height: 0; font: inherit; font-size: .85rem; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); background: var(--card, #fff); color: var(--ink); max-width: 100%; }
.ph-theme-chips select { width: auto; min-height: 0; font: inherit; font-size: .85rem; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--card, #fff); color: var(--ink); max-width: 100%; }
.t-hanukkah { --t-ink:#14315E; --t-accent:#2F6FD6; --t-pop:#C9D3E3; --t-soft:#EEF3FB; }
.t-pool { --t-ink:#0B3954; --t-accent:#00799E; --t-pop:#FFC93C; --t-soft:#E0F6FB; }
.t-rainbow { --t-ink:#2E1F47; --t-accent:#C8243B; --t-pop:#FFB703; --t-soft:#FFF5E1; }
.t-ocean { --t-ink:#0A2E4D; --t-accent:#1565A0; --t-pop:#FF8C42; --t-soft:#DDF1F6; }
.t-eggs { --t-ink:#2F3D2A; --t-accent:#8148B0; --t-pop:#F9D86B; --t-soft:#EAF5E3; }
.t-cookout { --t-ink:#13294B; --t-accent:#C1272D; --t-pop:#5DA9E9; --t-soft:#EAF1FA; }
.t-sage { --t-ink:#34402F; --t-accent:#647C59; --t-pop:#E3A9A4; --t-soft:#F4F2EB; }
.t-boho { --t-ink:#4A2E22; --t-accent:#B5563A; --t-pop:#D9A441; --t-soft:#F6EEE2; }
.t-wildflower { --t-ink:#3D3A4F; --t-accent:#7F6CA8; --t-pop:#E3B448; --t-soft:#F7F2E8; }
.t-amalfi { --t-ink:#13305F; --t-accent:#1F4FA3; --t-pop:#F2CF3A; --t-soft:#F7F6EF; }
.t-coastal { --t-ink:#142A47; --t-accent:#2F5D8C; --t-pop:#D64933; --t-soft:#F2F5F7; }
.t-pearls { --t-ink:#3B332C; --t-accent:#BA985E; --t-pop:#E3CBA3; --t-soft:#FAF6EF; }
.t-celestial { --t-ink:#141B3C; --t-accent:#3A3F7A; --t-pop:#D8B25A; --t-soft:#EEEDF5; }
.t-supper { --t-ink:#1C1A17; --t-accent:#6B1E28; --t-pop:#B88A44; --t-soft:#F3ECDD; }
.t-picnic { --t-ink:#3A2A1E; --t-accent:#D14438; --t-pop:#F3D67A; --t-soft:#FBF6EC; }
.t-teddy { --t-ink:#4A3426; --t-accent:#996C43; --t-pop:#A7B8C7; --t-soft:#F8F1E6; }
.t-masquerade { --t-ink:#1A1020; --t-accent:#5C1A3A; --t-pop:#C9A24A; --t-soft:#F1EAF0; }
.t-palm { --t-ink:#12403F; --t-accent:#EC8A5A; --t-pop:#2BB3A6; --t-soft:#FBF4E6; }
.t-pickleball { --t-ink:#1F3B2D; --t-accent:#3E7B4F; --t-pop:#D7E94B; --t-soft:#F5F7EE; }
.t-bricks { --t-ink:#1B2A4A; --t-accent:#D6372B; --t-pop:#F5C518; --t-soft:#F4F6F9; }
.t-books { --t-ink:#2B2320; --t-accent:#8C3B2E; --t-pop:#D9A441; --t-soft:#F7F1E6; }
.t-yoga { --t-ink:#2E3A40; --t-accent:#547D70; --t-pop:#E8B4A0; --t-soft:#F6F2EC; }
.t-code { --t-ink:#0F1E2E; --t-accent:#1F7A8C; --t-pop:#7CE0A0; --t-soft:#EEF4F6; }
.t-woodshop { --t-ink:#2E2118; --t-accent:#8B5A2B; --t-pop:#E2A23B; --t-soft:#F5EEE3; }
.t-birds { --t-ink:#263A3A; --t-accent:#4F7A6A; --t-pop:#E57A5A; --t-soft:#F5F3EA; }
.t-knit { --t-ink:#3A2E3F; --t-accent:#A8527A; --t-pop:#E9B44C; --t-soft:#F8F1EC; }
.t-fishing { --t-ink:#1D3445; --t-accent:#B8432F; --t-pop:#E9B949; --t-soft:#F2F4EF; }
.t-twenties { --t-ink:#15130F; --t-accent:#1E5A4E; --t-pop:#C9A23F; --t-soft:#F4EFE3; }
.t-woodland { --t-ink:#26301F; --t-accent:#9A4E26; --t-pop:#C9A66B; --t-soft:#F4EFE4; }
.t-sunshine { --t-ink:#4A2E0E; --t-accent:#C2410C; --t-pop:#F6C343; --t-soft:#FFF8E6; }
.t-fairy { --t-ink:#3B2E4A; --t-accent:#7E4FA0; --t-pop:#9CC5A1; --t-soft:#F6F1F8; }
.t-murder { --t-ink:#15171C; --t-accent:#2F4058; --t-pop:#B8433C; --t-soft:#EEF0F2; }
.t-throwback { --t-ink:#1E1B3A; --t-accent:#C42A72; --t-pop:#2EC4B6; --t-soft:#F5F0FA; }
.t-gamenight { --t-ink:#1B2B2E; --t-accent:#1E6B52; --t-pop:#E2B13C; --t-soft:#F2F1EA; }
.t-adventure { --t-ink:#1F2D3A; --t-accent:#2E6F8E; --t-pop:#E0A458; --t-soft:#F5EFE3; }

/* ---------- Tokens: light, then dark (system) and forced dark ---------- */
:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
  --paper: #f8f5ef; --paper-2: #f1ece3; --clay: #DD5F28; --clay-2: #B5480E; --clay-soft: #FBE3D6;
  /* v42 brand: saffron clay is the one brand color. Words in it use --clay-text; set it to #B5480E (deep saffron clay, 4.95:1 on paper)
     to go back to the original proposal for small text. Buttons on it take dark text (--on-clay), since white is 3.7:1. */
  --clay-text: var(--clay); --on-clay: #181512; --sage: #3f6f52; --sage-bg: #e7efe9; --gold: #c9a24a;
  --ink: #181512; --ink-2: #4a443d; --ink-3: #6f675d;
  --accent: var(--clay); --on-accent: #181512; --pop: var(--gold); --soft: var(--paper-2);
  --bg: var(--paper);
  --card: #ffffff;
  --text: var(--ink);
  --muted: var(--ink-2);
  --line: #e3ddd2;
  --tip: var(--paper-2);
  --warn: #A8460A;
  --shadow: 0 20px 60px -20px rgba(24,21,18,.35), 0 2px 6px rgba(24,21,18,.06);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--serif);
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #151311; --paper-2: #1f1c19; --line: #36312b; --card: #1c1916; --ink: #f3eee6; --ink-2: #c9c1b5; --ink-3: #9d958a;
    --clay: #DD5F28; --clay-2: #EE7A44; --clay-soft: #3A2117; --on-clay: #151311; --sage: #7fb592; --sage-bg: #1d2a22;
    --accent: var(--clay); --on-accent: #151311; --bg: var(--paper); --text: var(--ink); --muted: var(--ink-2); --tip: var(--paper-2); --warn: #F5A25D;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151311; --paper-2: #1f1c19; --line: #36312b; --card: #1c1916; --ink: #f3eee6; --ink-2: #c9c1b5; --ink-3: #9d958a;
  --clay: #DD5F28; --clay-2: #EE7A44; --clay-soft: #3A2117; --on-clay: #151311; --sage: #7fb592; --sage-bg: #1d2a22;
  --accent: var(--clay); --on-accent: #151311; --bg: var(--paper); --text: var(--ink); --muted: var(--ink-2); --tip: var(--paper-2); --warn: #F5A25D;
}

/* ---------- Base ---------- */
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 76px); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
/* Gen 1's theme art (page washes, corner stickers, the paper dinosaur) stays in the markup but is off in gen 2 */
.theme-sticker, .dino-craft { display: none !important; }
:root { --art: none; --art-pos: center; --art-fit: cover; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.1; margin: 0; letter-spacing: -0.01em; font-synthesis: none; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 14px; border-radius: 10px; z-index: 50; }
.skip:focus { left: 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 22px; font: 700 1rem var(--font-display); background: var(--accent); color: var(--on-accent); cursor: pointer; text-decoration: none; transition: background-color .35s ease, color .35s ease, transform .12s ease; }
.btn:active { transform: scale(.97); }
.btn.big { padding: 15px 30px; font-size: 1.1rem; }
.btn.ghost { background: transparent; color: var(--text); border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent); }
.btn.small { padding: 8px 16px; font-size: .92rem; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.team .link-btn, .save-card .link-btn, .side .link-btn, .acct-actions .link-btn, .auth-in .link-btn, .shop-link { min-height: 44px; padding: 0 6px; display: inline-flex; align-items: center; }
.pt-actions button { min-height: 44px; min-width: 44px; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 22px; height: 62px; }
.brand { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font: 800 1.35rem var(--font-display); text-decoration: none; letter-spacing: -0.02em; }
.brand svg .b1 { fill: var(--accent); transition: fill .35s ease; }
.brand svg .b2 { stroke: var(--text); fill: none; }
.nav-links { display: flex; gap: 6px; margin-left: 8px; white-space: nowrap; }
.nav-links a { text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 600; }
.nav-links a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.nav-cta { margin-left: auto; }

/* ---------- Landing ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "copy invite" "form invite"; column-gap: 48px; row-gap: 0; grid-template-rows: auto 1fr; padding: 48px 20px 64px; align-items: start; }
.hero-copy { grid-area: copy; }
.hero .setup { grid-area: form; }
.hero .invite { grid-area: invite; }
.start { padding: 56px 20px 28px; }
.start .lead { max-width: 40em; }
.start h1 { font-weight: 800; font-size: clamp(2.3rem, 5.6vw, 3.9rem); line-height: 1.02; letter-spacing: -0.025em; max-width: 12em; }
.start .lead { margin-top: 14px; }
.ptype-grid.big { margin-top: 30px; gap: 12px; }
.ptype-grid.big .ptype { padding: 18px 16px; gap: 4px; }
.ptype-grid.big .pt-e { font-size: 2.2rem; margin-bottom: 4px; }
.ptype-grid.big .ptype b { font-size: 1.1rem; }
.ptype:hover { border-color: var(--accent); }
.start-links { margin-top: 22px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.start-links a { font-weight: 600; }
.steps.compact { margin-top: 18px; gap: 24px; }
.steps.compact h3 { font-size: 1.05rem; }
.type-pill { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 700; margin-bottom: 18px; }
.type-pill .link-btn { font-weight: 600; padding: 4px 8px; }
.hero.step2 { padding-top: 8px; }
.details-h { font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 800; }
.start + .hero .setup { margin-top: 18px; }
.more { border-top: 1px solid var(--line); padding-top: 14px; }
.more > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent); font-weight: 700; line-height: 1; }
.more[open] > summary::before { content: "−"; }
.more-sum { color: var(--muted); font-weight: 500; font-size: .92rem; }
.more-body { display: grid; gap: 22px; margin-top: 18px; }
.hero h1 { font-weight: 800; font-size: clamp(2.3rem, 5.2vw, 3.7rem); line-height: 1.02; letter-spacing: -0.025em; max-width: 13em; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 36em; margin-top: 16px; }
.setup { margin-top: 30px; display: grid; gap: 22px; }
.field-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.field { grid-column: span 3; }
.fld { display: block; }
.field.w4 { grid-column: span 4; }
.field.w6 { grid-column: span 6; }
.field.w2 { grid-column: span 2; }
label, legend { font-weight: 600; font-size: .92rem; display: block; margin-bottom: 6px; padding: 0; }
input, select { width: 100%; padding: 11px 12px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--text) 24%, transparent); background: var(--card); color: var(--text); font: inherit; min-height: 46px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.hint { min-height: 1.4em; color: var(--muted); font-size: .92rem; margin-top: -8px; }
.hint.error { color: var(--warn); font-weight: 600; }
[aria-invalid="true"] { border-color: var(--warn) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 25%, transparent); }
/* 44 px touch targets on phones (review IR21) */
@media (pointer: coarse) { .chip { min-height: 44px; } .gp-sec .link-btn, li .row .link-btn, li > div > a.link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; } .foot-links a { display: inline-flex; align-items: center; min-height: 40px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid color-mix(in srgb, var(--text) 24%, transparent); background: var(--card); color: var(--text); border-radius: 999px; padding: 8px 14px 8px 10px; font: 600 .95rem var(--font-body); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.chip-emoji { font-size: 1.25rem; line-height: 1; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg button { text-align: left; padding: 10px 12px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--text) 24%, transparent); background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.seg strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.seg small { color: var(--muted); font-size: .82rem; line-height: 1.3; display: block; }
.seg button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.invite { position: sticky; top: 86px; padding: 6px 10px 10px; align-self: start; }
.invite-card { transform: rotate(1.6deg); background: var(--card); border-radius: 30px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--ink) 60%, transparent); transition: background-color .35s ease; }
.invite-top { position: relative; background: var(--soft); color: var(--ink); padding: 34px 28px 26px; text-align: center; transition: background-color .35s ease; }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; }
.confetti .c1 { fill: var(--accent); } .confetti .c2 { fill: var(--pop); } .confetti .c3 { fill: var(--ink); opacity: .75; }
.confetti .s1 { stroke: var(--accent); fill: none; stroke-width: 4; stroke-linecap: round; } .confetti .s2 { stroke: var(--pop); fill: none; stroke-width: 4; stroke-linecap: round; }
.emoji-badge { position: relative; width: 104px; height: 104px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-size: 3.4rem; margin: 0 auto 14px; transition: background-color .35s ease; }
.invite-top .small { position: relative; font-weight: 600; }
.invite-top h2 { position: relative; font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; margin-top: 4px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.invite-body { padding: 22px 28px 26px; display: grid; gap: 4px; text-align: center; }
.invite-body strong { font: 700 1.2rem var(--font-display); }
.invite-body .muted { color: var(--muted); }
.swatches { display: inline-flex; gap: 6px; justify-content: center; margin-top: 12px; }
.swatches i { width: 22px; height: 22px; border-radius: 50%; display: block; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); }

.section { padding: 56px 20px; border-top: 1px solid var(--line); }
.section h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; }
.section .lead { margin-top: 10px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 30px; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 800 1.1rem var(--font-display); margin-bottom: 12px; }
.steps h3 { font-size: 1.2rem; margin-bottom: 6px; }
.steps p { color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 26px; }
.tile { text-align: left; border: 0; border-radius: 20px; padding: 16px; background: var(--soft); color: var(--ink); cursor: pointer; font: inherit; }
.tile .e { font-size: 2.2rem; line-height: 1; display: block; margin-bottom: 10px; }
.tile b { font: 700 1.05rem var(--font-display); display: block; }
.tile .dots { display: flex; gap: 5px; margin-top: 10px; }
.tile .dots i { width: 14px; height: 14px; border-radius: 50%; display: block; }

/* ---------- Plan ---------- */
.plan-head { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: flex-end; justify-content: space-between; padding: 34px 20px 8px; }
.plan-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; }
.plan-head .sub { color: var(--muted); margin-top: 8px; max-width: 40em; }
.count { text-align: right; }
.count strong { display: block; font: 800 3.4rem/1 var(--font-display); }
.count span { color: var(--muted); font-weight: 600; }
.plan-tools { padding: 8px 20px 0; display: grid; gap: 16px; }
.tool-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; min-width: 0; }
.tool-row > .chips { min-width: 0; }
.progress-wrap { display: grid; gap: 8px; }
.progress-label { display: flex; justify-content: space-between; font-weight: 600; }
.progress { height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar { height: 100%; background: var(--accent); border-radius: inherit; transition: width .45s ease, background-color .35s ease; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; padding: 26px 20px 72px; align-items: start; }
.next-strip { display: grid; gap: 8px; margin-bottom: 26px; }
.next-strip h2 { font-size: 1.15rem; }
.next-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; width: 100%; padding: 12px 16px; border-radius: 14px; background: var(--soft); color: var(--ink); border: 0; font: inherit; cursor: pointer; }
.next-row b { font-weight: 700; }
.next-row span { font-size: .88rem; white-space: nowrap; }
.filters { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 8px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.filters button { flex: none; white-space: nowrap; border: 1.5px solid color-mix(in srgb, var(--text) 24%, transparent); background: transparent; color: var(--text); border-radius: 999px; padding: 6px 14px; font: 600 .92rem var(--font-body); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: transparent; }
.phase { border-top: 1px solid var(--line); padding: 4px 0 10px; }
.phase-btn { width: 100%; display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; text-align: left; background: none; border: 0; padding: 16px 0 10px; color: var(--text); cursor: pointer; font: inherit; }
.phase-btn h2 { font-size: 1.3rem; font-weight: 700; }
.phase-btn .range { color: var(--muted); font-size: .92rem; }
.phase-btn .count-mini { margin-left: auto; font-weight: 700; font-size: .92rem; }
.chev { width: 10px; height: 10px; border: solid var(--text); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); align-self: center; transition: transform .2s ease; }
.phase-btn[aria-expanded="true"] .chev { transform: rotate(-135deg); }
.tasks { display: grid; gap: 10px; }
.task { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); transition: background-color .35s ease; }
.check { position: relative; width: 28px; height: 28px; margin-top: 1px; }
.check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; min-height: 0; }
.box { display: block; width: 28px; height: 28px; border-radius: 9px; border: 2px solid color-mix(in srgb, var(--text) 42%, transparent); background: var(--card); transition: background-color .15s ease, transform .15s ease; }
.check input:checked + .box { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.check input:checked + .box::after { content: ""; display: block; width: 7px; height: 13px; border: solid var(--on-accent); border-width: 0 3px 3px 0; transform: translate(8px, 3px) rotate(45deg); }
.check input:focus-visible + .box { outline: 3px solid var(--text); outline-offset: 2px; }
.task-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.task h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: 0; }
.task.done h3 { text-decoration: line-through; color: var(--muted); }
.due { font-size: .9rem; color: var(--muted); white-space: nowrap; }
.due.overdue { color: var(--warn); font-weight: 700; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: .88rem; color: var(--muted); }
.tag { border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; }
.who { display: inline-flex; align-items: center; gap: 6px; }
.avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--pop); color: var(--ink); display: inline-grid; place-items: center; font: 800 .72rem var(--font-display); }
.tips-btn { margin-top: 10px; background: none; border: 0; padding: 4px 0; font: 700 .95rem var(--font-body); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.tips-btn .chev { width: 8px; height: 8px; border-width: 0 2px 2px 0; }
.tips-btn[aria-expanded="true"] .chev { transform: rotate(-135deg); }
.tips { margin-top: 10px; padding: 16px; border-radius: 14px; background: var(--tip); display: grid; gap: 14px; }
.tips p.advice { max-width: 62ch; }
.theme-hint { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px dashed color-mix(in srgb, var(--accent) 70%, transparent); }
.theme-hint .e { font-size: 1.3rem; line-height: 1.2; }
.theme-hint b { display: block; font-size: .88rem; color: var(--muted); font-weight: 600; }
.shortcuts h4 { margin: 0 0 6px; font: 700 .95rem var(--font-display); }
.shortcuts ul { display: grid; gap: 6px; }
.shortcuts li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.shortcuts a { font-weight: 700; text-underline-offset: 3px; }
.shortcuts span { color: var(--muted); font-size: .9rem; }
.fineprint { color: var(--muted); font-size: .82rem; margin-top: 6px; }
.aff-note { color: var(--muted); font-size: .82rem; margin: 6px 0 0; } .aff-more { white-space: nowrap; } /* v111: the disclosure beside store links */
.assign { display: grid; gap: 4px; max-width: 320px; }
.assign select { min-height: 42px; }
.side { display: grid; gap: 0; }
.side section { padding: 20px 0; border-top: 1px solid var(--line); }
.side section:first-child { border-top: 0; padding-top: 0; }
.side h2 { font-size: 1.15rem; margin-bottom: 10px; }
.team li { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.team .avatar { width: 32px; height: 32px; font-size: .9rem; }
.team .who-name { font-weight: 700; line-height: 1.2; }
.team .who-role { color: var(--muted); font-size: .85rem; }
.team .n { margin-left: auto; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.mini-form { display: grid; gap: 8px; margin-top: 10px; }
.mini-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share { display: flex; gap: 8px; margin-top: 12px; }
.share input { font-size: .85rem; }
.sched li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 6px 0; }
.sched time { font-weight: 700; white-space: nowrap; }
.split { display: grid; gap: 8px; }
.split-row { display: grid; gap: 4px; }
.split-row div:first-child { display: flex; justify-content: space-between; font-size: .92rem; }
.split-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.split-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.big-num { font: 800 2rem var(--font-display); }
.ideas ul { display: grid; gap: 4px; padding-left: 0; }
.ideas h3 { font-size: .95rem; margin: 10px 0 4px; }
.ideas li { font-size: .95rem; }

/* ---------- Themes page ---------- */
.page-head { padding: 40px 20px 8px; }
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.02em; }
.themes-body { padding: 18px 20px 72px; display: grid; gap: 26px; }
.themes-body > * { min-width: 0; }
.poster { background: var(--soft); color: var(--ink); border-radius: 30px; padding: 30px; display: grid; gap: 26px; }
.poster-head { display: flex; align-items: center; gap: 20px; }
.poster-emoji { width: 92px; height: 92px; flex: none; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-size: 3rem; }
.poster h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
.poster-head p { margin-top: 4px; font-size: 1.1rem; }
.poster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.poster h3 { font-size: 1.1rem; margin-bottom: 8px; }
.poster ul { display: grid; gap: 8px; }
.poster li { padding-left: 18px; position: relative; }
.poster li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* v49: invitation designs on the Themes tab */
.tinv { margin: 38px 0 0; }
.tinv .sample .cap { display: grid; gap: 2px; justify-content: start; }
.tinv .sample .cap span:first-child { color: var(--ink); font-weight: 600; }
.tinv .sample .cap span:last-child { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.tinv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 760px; margin-top: 16px; }
@media (max-width: 560px) { .tinv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.poster-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.poster .swatches { margin: 0; }
.poster .swatches i { border: 2px solid color-mix(in srgb, var(--ink) 28%, transparent); box-shadow: none; width: 26px; height: 26px; }
.poster .btn { background: var(--accent); color: var(--on-accent); }
.poster .btn[disabled] { opacity: .75; cursor: default; }
.shop { display: grid; gap: 8px; }
.shop h2 { font-size: 1.4rem; }

/* ---------- Party tools ---------- */
.tool-page { padding: 34px 20px 72px; }
.tool-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; }
.tool-page-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -.02em; }
.tool-page-head p { color: var(--muted); max-width: 44em; margin-top: 8px; }
.tool-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 26px; align-items: start; }
.utility-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; transition: background-color .35s ease; }
.utility-card h2 { font-size: 1.25rem; margin-bottom: 7px; }.utility-card > p { color: var(--muted); font-size: .94rem; }
.shopping-list { margin-top: 16px; display: grid; gap: 7px; }.shop-item { display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--line); }.shop-item:last-child { border:0; }.shop-item input { width:20px; min-height:20px; accent-color:var(--accent); }.shop-item span { flex:1; }.shop-item.done span { color:var(--muted); text-decoration:line-through; }.shop-item small { display:block; color:var(--muted); font-size:.88rem; }.shop-item label { display:flex; align-items:center; gap:10px; flex:1; margin:0; font-weight:400; font-size:1rem; cursor:pointer; }.shop-item .shop-link { font-size:.88rem; font-weight:700; white-space:nowrap; }
.budget-summary { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:17px 0; }.metric { padding:13px; border-radius:14px; background:var(--tip); }.metric b { display:block; font:800 1.45rem var(--font-display); }.metric span { display:block; color:var(--muted); font-size:.8rem; margin-top:2px; }.money-table { display:grid; gap:8px; margin-top:14px; }.money-row { display:grid; grid-template-columns:1fr 104px 96px; gap:10px; align-items:center; }.money-row label { margin:0; font-size:.9rem; }.money-row input { min-height:40px; padding:7px 9px; }.money-row b { text-align:right; font-size:.88rem; }.money-head { font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }.money-head span:nth-child(3) { text-align:right; }.run-item em { font-style:normal; font-weight:700; color:var(--text); }.budget-warning { color:var(--warn); font-weight:700; font-size:.9rem; min-height:1.4em; }
.run-sheet { display:grid; gap:0; margin-top:16px; }.run-item { display:grid; grid-template-columns:100px minmax(0,1fr); gap:16px; padding:15px 0; border-top:1px solid var(--line); }.run-item time { color: var(--clay-text); font:800 1rem var(--font-display); }.run-item b { display:block; }.run-item span { display:block; color:var(--muted); font-size:.9rem; margin-top:3px; }.party-kit { display:grid; gap:9px; margin:15px 0 0; }.party-kit li { padding-left:18px; position:relative; }.party-kit li::before { content:""; position:absolute; left:0; top:.65em; width:7px; height:7px; border-radius:50%; background:var(--accent); }

/* ---------- Local vendors: directory, cards, profile, inquiry, join form ---------- */
.vendor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 20px; }
.vcard { display: flex; flex-direction: column; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s ease, background-color .35s ease; }
a.vcard:hover { transform: translateY(-2px); }
.vcard-photos { display: flex; }
.vcard-photos span { flex: 1; aspect-ratio: 1; display: grid; place-items: center; font-size: 1.7rem; background: var(--soft); color: var(--ink); }
.vcard-photos span:nth-child(2) { background: color-mix(in srgb, var(--soft) 70%, var(--accent) 14%); }
.vcard-photos span:nth-child(3) { background: color-mix(in srgb, var(--soft) 55%, var(--pop) 20%); }
.vcard-body { padding: 16px; display: grid; gap: 6px; }
.vcard h3 { font-size: 1.05rem; }
.vbadges { display: flex; flex-wrap: wrap; gap: 6px; }
.vbadge { font: 700 .76rem var(--font-body); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.vbadge.kind { color: var(--muted); }
.vbadge.verified { background: color-mix(in srgb, var(--pop) 42%, transparent); border-color: transparent; color: var(--ink); }
.vbadge.match { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: transparent; }
.vbadge.pending { background: var(--tip); border-color: transparent; }
.vmeta { font-size: .9rem; color: var(--muted); }
.vprice { font-weight: 700; color: var(--text); }

.vprofile { max-width: 760px; }
.vprofile h1 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 800; margin-top: 16px; }
.vphotos-lg { display: flex; gap: 10px; margin-bottom: 6px; }
.vphotos-lg span { flex: 1; aspect-ratio: 3 / 2; border-radius: 18px; display: grid; place-items: center; font-size: 2.6rem; background: var(--soft); color: var(--ink); }
.vphotos-lg span:nth-child(2) { background: color-mix(in srgb, var(--soft) 70%, var(--accent) 14%); }
.vphotos-lg span:nth-child(3) { background: color-mix(in srgb, var(--soft) 55%, var(--pop) 20%); }
.vsection { margin-top: 24px; }
.vsection h2 { font-size: 1.15rem; margin-bottom: 8px; }
.vsection ul { display: grid; gap: 6px; }
.vsection li { padding-left: 18px; position: relative; }
.vsection li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.inquiry-box, .inquiry-sent { border-radius: 18px; padding: 20px; margin-top: 24px; }
.inquiry-box { background: var(--tip); }
.inquiry-box h2, .inquiry-sent h2 { font-size: 1.15rem; margin-bottom: 8px; }
.inquiry-sent { background: var(--soft); color: var(--ink); }
.inquiry-sent .vmeta { color: color-mix(in srgb, var(--ink) 75%, transparent); }
textarea { width: 100%; padding: 11px 12px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--text) 24%, transparent); background: var(--card); color: var(--text); font: inherit; min-height: 100px; resize: vertical; }

.cat-check { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-check label { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid color-mix(in srgb, var(--text) 24%, transparent); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .92rem; cursor: pointer; }
.cat-check input { width: 16px; height: 16px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; cursor: pointer; }
.checkbox-row input { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.consent { font-size: .9rem; color: var(--muted); }

/* ---------- Party-type picker ---------- */
.ptype-field { margin-top: 26px; }
.ptype-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ptype { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 12px; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); background: var(--card); color: var(--text); font: inherit; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.ptype .pt-e { font-size: 1.6rem; line-height: 1.1; }
.ptype b { font: 700 1rem/1.2 var(--font-display); }
.ptype small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.ptype[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.chip-more { border-style: dashed; }
.type-filter { margin-bottom: 4px; }

/* ---------- Vendor photos: cards, gallery, lightbox, uploader ---------- */
.vcard-cover { position: relative; aspect-ratio: 16 / 10; background: var(--soft); overflow: hidden; }
.vcard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-count { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.62); color: #fff; font: 700 .75rem var(--font-body); padding: 3px 9px; border-radius: 999px; }
.vbadge.founding { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: transparent; }
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 130px; gap: 8px; margin-bottom: 10px; }
.g-item { position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--soft); }
.g-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.g-item:hover img { transform: scale(1.03); }
.g-main { grid-row: span 2; }
.g-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.5); color: #fff; font: 800 1.2rem var(--font-display); }
.gallery.n1 { grid-template-columns: 1fr; grid-auto-rows: 320px; }
.gallery.n1 .g-main, .gallery.n2 .g-main { grid-row: auto; }
.gallery.n2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }
.gallery.n4 { grid-template-columns: 2fr 1fr; grid-auto-rows: 86px; }
.gallery.n4 .g-main { grid-row: span 3; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1000px, 94vw); width: 100%; }
.lightbox::backdrop { background: rgba(10,10,14,.86); }
.lb-inner { position: relative; display: grid; gap: 10px; justify-items: center; }
.lb-inner img { max-width: 100%; max-height: 78vh; border-radius: 14px; display: block; }
.lb-bar { display: flex; gap: 10px; align-items: center; color: #fff; font-weight: 600; }
.lb-bar .btn { background: #fff; color: #111; }
.owner-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--tip); margin-bottom: 18px; }
.owner-bar p { flex: 1 1 260px; }
.join-section { display: grid; gap: 14px; padding: 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.join-section h2 { font-size: 1.2rem; }
.join-section > p.vmeta { margin-top: -8px; }
.dropzone { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 26px 16px; border-radius: 18px; border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--soft) 45%, var(--card)); cursor: pointer; margin: 0; font-weight: 400; }
.dropzone.drag { background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.dropzone .dz-icon { font-size: 2rem; }
.dropzone b { font: 700 1.05rem var(--font-display); }
#jf-photos:focus-visible + .dropzone, .dropzone:focus-within { outline: 3px solid var(--text); outline-offset: 3px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.photo-grid:empty { display: none; }
.pthumb { position: relative; border-radius: 14px; overflow: hidden; background: var(--soft); aspect-ratio: 1; }
.pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pthumb .cover-tag { position: absolute; left: 6px; top: 6px; background: var(--accent); color: var(--on-accent); font: 700 .72rem var(--font-body); padding: 2px 8px; border-radius: 999px; }
.pthumb .pt-actions { position: absolute; inset: auto 0 0 0; display: flex; gap: 4px; justify-content: flex-end; padding: 6px; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.pthumb .pt-actions button { border: 0; border-radius: 999px; padding: 4px 9px; font: 700 .74rem var(--font-body); background: rgba(255,255,255,.92); color: #111; cursor: pointer; }
.upload-status { font-size: .9rem; color: var(--muted); min-height: 1.3em; }
.hl-inputs { display: grid; gap: 8px; }

/* ---------- Deployment hooks: giveaway, reminders, honeypot, print footer ---------- */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.print-only { display: none; }
.promo-strip { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 18px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); margin-top: 22px; }
.promo-strip b { font-family: var(--font-display); }
.ref-link { display: flex; gap: 8px; margin-top: 10px; }
.ref-link input { font-size: .9rem; }
.giveaway-card { max-width: 640px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* ---------- Accounts: save prompt, sign-in dialog ---------- */
.nav-acct { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-cta + .nav-acct { margin-left: 0; }
.nav-acct .link-btn { font-weight: 600; text-decoration: none; padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.nav-acct .link-btn:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.acct-dot { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; border: 0; cursor: pointer; font: 700 .95rem var(--font-display); }
.save-card { display: grid; gap: 10px; padding: 18px 20px; margin-bottom: 26px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.save-card h2 { font-size: 1.1rem; }
.save-card p { color: var(--muted); }
.save-card .auth-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.auth-dlg { border: 0; border-radius: 22px; padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--card); color: var(--text); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.auth-dlg::backdrop { background: rgba(10,10,14,.55); }
.auth-in { display: grid; gap: 14px; padding: 26px 24px 22px; position: relative; }
.auth-in h2 { font-size: 1.35rem; padding-right: 36px; }
.auth-in p { color: var(--muted); }
.auth-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.auth-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.auth-list { display: grid; gap: 10px; }
.auth-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 16px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); background: var(--card); color: var(--text); font: 600 1rem var(--font-body, inherit); cursor: pointer; text-align: left; }
.auth-btn:hover { border-color: color-mix(in srgb, var(--text) 45%, transparent); }
.auth-brand { display: flex; align-items: center; gap: 8px; font: 700 1.05rem var(--font-display); color: var(--text); }
.auth-brand svg .b1 { fill: #E58A1F; } .auth-brand svg .b2 { fill: none; stroke: #17402E; }
.auth-sum { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--card)); font-size: .95rem; }
.auth-sum b { display: block; }
.auth-btn.brand-g { background: #fff; color: #1f1f1f; border: 1px solid #747775; font-family: Roboto, Arial, sans-serif; font-weight: 500; justify-content: center; border-radius: 999px; }
.auth-btn.brand-g:hover { background: #f8f9fa; border-color: #1f1f1f; }
.auth-btn.brand-f { background: #1877F2; color: #fff; border: 1px solid #1877F2; font-family: Helvetica, Arial, sans-serif; font-weight: 600; justify-content: center; border-radius: 999px; }
.auth-btn.brand-f:hover { background: #166fe5; }
.auth-btn.brand-e { justify-content: center; border-radius: 999px; }
.auth-btn .logo { width: 20px; height: 20px; flex: none; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--text) 16%, transparent); }
.auth-trust { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--muted); }
.auth-trust svg { flex: none; margin-top: 2px; }
.auth-later { justify-self: center; }
#authHint:empty { display: none; }
.auth-btn .ai { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--text) 9%, transparent); font-weight: 700; flex: none; }
.auth-form { display: grid; gap: 10px; }
.auth-form .hint { margin-top: 0; }
.code-input { letter-spacing: .4em; font-size: 1.3rem; text-align: center; font-variant-numeric: tabular-nums; }
.auth-fine { font-size: .85rem; color: var(--muted); }
.auth-choice { display: grid; gap: 10px; }
.auth-choice button { text-align: left; }
.auth-choice small { display: block; font-weight: 400; color: var(--muted); }
.sync-note { font-size: .9rem; color: var(--muted); }
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.nav-signin { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 400px) { /* keep every nav link visible on small phones */
  .nav .nav-in { gap: 4px; }
  .nav .brand { font-size: 1.05rem; gap: 4px; }
  .nav .nav-links a { padding: 6px 5px; font-size: .86rem; }
}
.nav-signin svg { display: none; }
@media (max-width: 560px) {
  .nav-acct { margin-left: auto; flex: none; }
  .nav-acct .link-btn { padding: 6px; font-size: .92rem; }
  .nav-signin svg { display: block; }
  .nav-signin .lbl { display: none; }
}

/* ---------- Plan sub-tabs (checklist, shopping, budget, day-of) ---------- */
.plan-tabs { padding: 18px 20px 0; }
.plan-tabs nav { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.plan-tabs a { flex: none; white-space: nowrap; text-decoration: none; border: 1.5px solid color-mix(in srgb, var(--text) 24%, transparent); border-radius: 999px; padding: 7px 16px; font-weight: 600; font-size: .95rem; background: var(--card); }
.plan-tabs a[aria-current="page"] { background: var(--text); color: var(--bg); border-color: transparent; }
.plan-tabs + .plan-head { padding-top: 20px; }
.plan-tabs + .tool-page { padding-top: 22px; }
.side-link { margin-top: 10px; font-weight: 700; }

/* ---------- Footer, toast ---------- */
.foot { position: relative; background: color-mix(in srgb, var(--bg) 90%, transparent); border-top: 1px solid var(--line); padding: 26px 0 36px; color: var(--muted); font-size: .9rem; }
.foot .wrap { display: grid; gap: 4px; }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 60; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 940px) {
  .ptype-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1fr; grid-template-areas: "copy" "form" "invite"; grid-template-rows: auto; row-gap: 8px; }
  .hero .invite { margin-top: 28px; }
  .plan-grid { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: 1fr; }
  .invite { position: static; max-width: 460px; width: 100%; margin: 0 auto; }
  .dino-craft { width:260px; right:-32px; bottom:20px; opacity:.78; }
  .theme-sticker { display:none !important; }
  .side { position: static; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .count { text-align: left; }
}
@media (max-width: 560px) {
  .field, .field.w4, .field.w6 { grid-column: span 6; }
  .field.w2 { grid-column: span 3; }
  .seg { grid-template-columns: 1fr; }
  .ptype-grid { grid-template-columns: 1fr 1fr; }
  .ptype-grid .ptype:last-child { grid-column: span 2; }
  .start { padding-top: 36px; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 110px; }
  .gallery .g-main { grid-column: span 2; grid-row: span 2; }
  .nav-links { margin-left: 0; gap: 2px; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav-links a { padding: 6px 8px; font-size: .92rem; }
  .nav-in { gap: 6px; }
  .brand { font-size: 1.15rem; }
  .nav-cta { display: none; }
  .chips-scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
  .chips-scroll .chip { flex: none; }
  .invite-top { padding: 22px 18px 16px; }
  .emoji-badge { width: 76px; height: 76px; font-size: 2.4rem; margin-bottom: 8px; }
  .invite-body { padding: 14px 18px 18px; }
  .poster { padding: 22px; }
  .poster-head { flex-direction: column; align-items: flex-start; }
  .dino-craft { width:185px; right:-38px; bottom:16px; opacity:.42; }
  .budget-summary { grid-template-columns: 1fr; }
  .money-row { grid-template-columns: 1fr 84px 86px; }
  .run-item { grid-template-columns: 82px minmax(0,1fr); gap:10px; }
}
@media print {
  .print-only { display: block !important; margin-top: 24px; font-size: .85rem; }
  .nav, .foot, .plan-tabs, .dino-craft, .theme-sticker, .toast, .skip, .tool-page-head .btn { display: none !important; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
  .tool-grid { grid-template-columns: 1fr; }
  .utility-card { border: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- My plan dashboard (v14): three views of the same eight steps ---------- */
.dash { --ok: #25794A; --ok-soft: color-mix(in srgb, #25794A 12%, var(--card)); } /* 4.5:1 on white for small labels (review IR21) */
.dash h1, .dash h2, .dash h3 { font-family: var(--font-display); letter-spacing: -.01em; }
.dash .tag { display: inline-flex; align-items: center; gap: 6px; font: 600 .8rem var(--font-body); padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--soft) 70%, var(--card)); color: var(--text); white-space: normal; }
.dash .lead { color: var(--muted); max-width: 680px; }
.dash .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dash .btn.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.dash .card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 20px; display: grid; gap: 12px; align-content: start; }
.dash .card h3 { font-size: 1.15rem; }
.dash .muted { color: var(--muted); }
.add-name { font-weight: 600; font-size: .92rem; }
/* weather + view switcher */
.dw { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 8px 14px 8px 8px; box-shadow: 0 10px 30px -20px color-mix(in srgb, var(--ink) 70%, transparent); }
.dw .wx-art { width: 76px; height: 61px; flex: none; }
/* v97: weather alerts for the party's hours, under the weather */
.dw-al { margin-top: 8px; display: grid; gap: 6px; }
.dw-al p { margin: 0; font-size: .86rem; line-height: 1.4; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.dw-al p.warn { border-color: color-mix(in srgb, var(--clay) 55%, var(--line)); background: color-mix(in srgb, var(--clay) 9%, var(--card)); }
.dw-al .link-btn { justify-self: start; font-size: .86rem; }
.dw-wrap.flash .dw-al p.warn { outline: 2px solid var(--clay); outline-offset: 2px; }
.dw b { font: 800 1.35rem/1.1 var(--font-display); display: block; }
.dw small { display: block; font-size: .78rem; color: var(--muted); }
.dw small.dw-src { font-size: .68rem; opacity: .8; }
@keyframes wxbob { 50% { transform: translateY(-3px); } }
@keyframes wxdrop { 0% { transform: translateY(-3px); opacity: .2; } 60% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
.wx-sun { animation: wxbob 3.2s ease-in-out infinite; }
.wx-drops { animation: wxdrop 1.6s ease-in infinite; }
/* panels (the full tools for one step) */
.panel { display: grid; gap: 14px; }
.sp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-head .kicker { font: 700 .76rem var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 75%, var(--ink)); }
.panel h2 { font-size: 1.8rem; line-height: 1.1; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E6A23C; } .status.ok::before { background: var(--ok); }
.city-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .city-row label { font-weight: 600; }
.city-row input { border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 14px; font: inherit; background: var(--card); color: var(--text); min-width: 0; width: 220px; }
.venues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.venue { border: 1.5px solid var(--line); border-radius: 20px; overflow: hidden; display: grid; background: var(--card); transition: transform .2s, box-shadow .2s; }
.venue:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--ink) 80%, transparent); }
.venue.sel { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.venue .ph { height: 84px; display: grid; place-items: center; font-size: 2.4rem; }
.venue .bd { padding: 12px 14px 14px; display: grid; gap: 6px; align-content: start; }
.venue h3 { font-size: 1.02rem; } .venue p { font-size: .88rem; color: var(--muted); }
.vrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .vrow .btn { margin-left: auto; }
.venue-form { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: end; }
.venue-form label, .inv-tools label, .dm-two label, #budgetForm label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 4px; }
.venue-form input, .inv-tools textarea, .guest-form input, .dash-dlg input:not([type="checkbox"]), .dash-dlg select { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--card); color: var(--text); }
.inv-split { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 26px; align-items: start; }
.inv-tools { display: grid; gap: 10px; }
.inv-tools textarea { resize: vertical; }
.dinv .invite-top { padding: 26px 20px 20px; } .dinv .invite-top h2 { font-size: 1.9rem; }
.dinv .invite-body { padding: 16px 20px 20px; }
.dinv.compact { transform: rotate(-1.4deg) scale(.96); } .dinv.compact .invite-top h2 { font-size: 1.45rem; } .dinv.compact .inv-rsvp { display: none; }
.inv-note { font-style: italic; margin-top: 4px; }
.inv-rsvp { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.inv-rsvp .inv-prev { flex-basis: 100%; text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.inv-rsvp .pill, .inv-rsvp .inv-q { opacity: .6; }
.inv-rsvp .pill { border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: .85rem; font-weight: 600; }
.inv-rsvp .pill.yes { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.inv-q { flex-basis: 100%; margin-top: 6px; font-size: .8rem; color: var(--muted); background: var(--bg); border: 1px dashed var(--line); border-radius: 10px; padding: 7px 10px; text-align: left; }
.note-soft { background: var(--tip); border-radius: 12px; padding: 10px 12px; font-size: .92rem; }
.gstats { display: flex; flex-wrap: wrap; gap: 8px; } .gstats span { background: var(--bg); border-radius: 12px; padding: 8px 12px; font-size: .9rem; } .gstats b { font-family: var(--font-display); font-size: 1.1rem; margin-right: 4px; }
.guest-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; } .guest-form .wide { grid-column: 1 / 3; }
.glist { list-style: none; padding: 0; display: grid; gap: 8px; }
.glist li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; flex-wrap: wrap; }
.glist .gmain { flex: 1; min-width: 180px; display: grid; gap: 4px; } .glist .gmain small { color: var(--muted); }
.glist .gneeds { border: 1px dashed var(--line); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: .86rem; background: transparent; color: var(--text); width: 100%; }
.rsvp { border: 0; border-radius: 999px; padding: 8px 12px; font-weight: 700; font-size: .84rem; cursor: pointer; min-height: 40px; background: var(--bg); color: var(--text); }
.rsvp.r-yes { background: var(--ok-soft); color: var(--ok); } .rsvp.r-no { background: color-mix(in srgb, #C0392B 10%, var(--card)); color: #A2331F; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rsvp.r-no { color: #f09a82; } } :root[data-theme="dark"] .rsvp.r-no { color: #f09a82; } .rsvp.r-maybe { background: color-mix(in srgb, #E6A23C 16%, var(--card)); }
.needs { background: var(--tip); border-radius: 12px; padding: 10px 12px; font-size: .9rem; }
.budget-bar { display: grid; gap: 8px; width: 100%; text-align: left; border: 1.5px solid var(--line); background: var(--card); color: var(--text); border-radius: 16px; padding: 12px 14px; cursor: pointer; font: inherit; }
.budget-bar:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.bb-top { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: .92rem; } .bb-top b { font-family: var(--font-display); } .bb-edit { margin-left: auto; font-weight: 700; text-decoration: underline; }
.bb-track { height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; } .bb-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--pop)); border-radius: 99px; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.dash-dlg .shopping-list { margin-top: 0; }
.cat { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); min-height: 52px; }
.cat .cat-open { flex: 1; display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--text); text-align: left; padding: 8px 4px 8px 12px; cursor: pointer; font: inherit; min-height: 48px; }
.cat .cat-open b { display: block; font-size: .92rem; } .cat .cat-open small { display: block; font-size: .74rem; color: var(--muted); }
.cat .e { font-size: 1.25rem; }
.cat .x { border: 0; background: none; color: var(--muted); font-size: 1.2rem; width: 40px; min-height: 44px; cursor: pointer; border-radius: 12px; }
.cat .x:hover { color: var(--text); background: var(--bg); }
.cat.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.cat .cat-det { border: 0; background: none; color: var(--muted); font: 600 .74rem var(--font-body); text-decoration: underline; text-underline-offset: 2px; padding: 0 4px; min-height: 44px; cursor: pointer; }
.cat .cat-det:hover { color: var(--text); } .cat .cat-arr { font-weight: 500; color: var(--muted); }
.cat.off { opacity: .55; border-style: dashed; } .cat.off .cat-open { cursor: default; }
.cat.more { justify-content: center; font-weight: 700; color: var(--text); cursor: pointer; font: inherit; font-weight: 700; }
.runline { display: grid; gap: 8px; } .runline div { display: flex; gap: 12px; font-size: .94rem; } .runline b { width: 70px; flex: none; font-family: var(--font-display); }
.after-list { display: grid; gap: 8px; }
.after-item { display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 14px; cursor: pointer; }
.after-item .e { font-size: 1.4rem; } .after-item small { display: block; color: var(--muted); font-size: .86rem; } .after-item.done { background: var(--ok-soft); }
.after-item input { width: 20px; height: 20px; accent-color: var(--ok); }
.avatars { display: flex; } .avatars span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--card); margin-left: -8px; display: grid; place-items: center; font: 700 .8rem var(--font-display); background: var(--soft); }
.avatars span:first-child { margin-left: 0; } .avatars .r-yes { background: color-mix(in srgb, var(--ok) 30%, var(--card)); } .avatars .r-no { opacity: .5; }
.chips-row { display: flex; gap: 8px; flex-wrap: wrap; } .chips-row span { background: var(--bg); border-radius: 12px; padding: 8px 12px; font-weight: 600; font-size: .9rem; }
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.tools .team { margin: 0; } .tools .mini-form .row { flex-wrap: nowrap; } .tools .mini-form input, .tools .mini-form select { min-width: 0; }
.tools .acct { display: block; }
.care { text-align: center; color: var(--muted); font-size: .92rem; margin: 6px 0 20px; }
.eyebrow { display: inline-block; background: var(--card); padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
@keyframes stpulse { from { transform: scale(.9); opacity: .6; } to { transform: scale(1.35); opacity: 0; } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; } .stat b { font: 800 1.9rem/1 var(--font-display); display: block; } .stat span { font-size: .84rem; color: var(--muted); }
.stat.big b { color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.chapters { margin-top: 26px; position: relative; display: grid; gap: 6px; }
.chapters::before { content: ""; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
.ch { position: relative; padding-left: 68px; }
.ch > .num { position: absolute; left: 0; top: 4px; width: 48px; height: 48px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); display: grid; place-items: center; font: 800 1rem var(--font-display); color: var(--muted); }
.ch.done > .num { background: var(--ok); border-color: var(--ok); color: #fff; }
.ch.now > .num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 20%, transparent); }
.chead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; width: 100%; background: none; border: 0; padding: 12px 0 4px; text-align: left; color: var(--text); cursor: pointer; font: inherit; min-height: 44px; }
.chead h2 { font-size: 1.35rem; } .chead:hover h2 { text-decoration: underline; }
.chead .when { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--muted); }
.ch.done .chead h2 { color: var(--muted); }
.ch .sum { color: var(--muted); font-size: .95rem; padding-bottom: 8px; }
.ch .panel { margin: 8px 0 12px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 22px; box-shadow: 0 24px 50px -44px color-mix(in srgb, var(--ink) 80%, transparent); }
.ch.now .panel { border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.ch .panel .sp-head .kicker { display: none; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pl { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 12px; font: 600 .88rem var(--font-body); background: var(--card); border: 1.5px solid var(--line); color: var(--text); cursor: pointer; min-height: 40px; }
.pl.in { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.pl.skip { color: var(--muted); text-decoration: line-through; border-style: dashed; }
/* pop-up */
.dash-dlg { width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
.dash-dlg .auth-in { gap: 16px; overflow: auto; max-height: calc(100vh - 32px); }
.dm-head { display: flex; gap: 14px; align-items: center; padding-right: 36px; } .dm-head .e { font-size: 2.2rem; } .dm-head h2 { font-size: 1.5rem; } .dm-head h2:focus { outline: none; }
.dm-head .tag { display: inline-flex; margin-top: 4px; font-size: .8rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--soft) 70%, var(--card)); }
.dm-sec { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.dm-sec h3 { font-size: 1.02rem; } .dm-sec ul { padding-left: 20px; display: grid; gap: 4px; }
.dm-two { grid-template-columns: 1fr 1fr; gap: 14px; }
.money-in { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; padding-left: 12px; background: var(--card); } .money-in span { color: var(--muted); font-weight: 700; }
.money-in input { border: 0 !important; }
.dm-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.add-item { display: flex; gap: 8px; } .add-item input { flex: 1; }
.dash-dlg .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash-dlg .seg button { border: 1.5px solid var(--line); background: var(--card); color: var(--text); border-radius: 14px; padding: 10px; text-align: left; cursor: pointer; font: inherit; display: grid; gap: 2px; }
.dash-dlg .seg button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.dash-dlg .seg small { color: var(--muted); font-size: .76rem; }
.bcats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bcat { display: flex; justify-content: space-between; gap: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; min-height: 44px; align-items: center; }
#budgetForm .row { flex-wrap: nowrap; } #budgetForm .money-in { flex: 1; }
/* phones and tablets */
@media (max-width: 980px) {
  .venues { grid-template-columns: 1fr; } .venue { grid-template-columns: 84px 1fr; } .venue .ph { height: auto; }
  .inv-split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) { .panel h2 { font-size: 1.5rem; }
  .venue-form, .guest-form { grid-template-columns: 1fr; } .guest-form .wide { grid-column: auto; } .ch { padding-left: 58px; } .chead .when { margin-left: 0; flex-basis: 100%; }
  .dm-two, .bcats, .dash-dlg .seg { grid-template-columns: 1fr; }
  .city-row input { width: 100%; }
}
@media print { .dw { display: none; } }

/* ---------- invitations, guests, RSVPs ---------- */
.inv-left { display: grid; gap: 12px; align-content: start; } .inv-dl { justify-content: center; }
.inv-photo { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 8px 20px -10px rgba(0,0,0,.4); position: relative; display: block; margin: 0 auto; }
.inv-sec { border: 1px solid var(--line); border-radius: 16px; padding: 4px 14px; background: var(--card); }
.inv-sec > summary { cursor: pointer; font: 700 1rem var(--font-display); padding: 10px 0; list-style: none; min-height: 44px; display: flex; align-items: center; }
.inv-sec > summary::-webkit-details-marker { display: none; } .inv-sec > summary::after { content: "▾"; margin-left: auto; color: var(--muted); } .inv-sec[open] > summary::after { content: "▴"; }
.inv-sec[open] { padding-bottom: 14px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .fgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fld label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 4px; }
.fld input, .fld select, .paste textarea, .msg-form textarea, .gift-list input, .su-form input { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--card); color: var(--text); box-sizing: border-box; }
.file-btn { cursor: pointer; }
.pub-box { border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 18px; padding: 16px; display: grid; gap: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.pub-box.on { border-style: solid; border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); }
.pub-box h3 { font-size: 1.1rem; }
.linkrow { display: flex; gap: 8px; } .linkrow input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 600 .95rem var(--font-body); background: var(--card); color: var(--text); }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px; padding: 8px 12px; font: 600 .88rem var(--font-body); cursor: pointer; min-height: 40px; text-decoration: none; }
.chip-btn.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.qr-box { display: grid; place-items: center; min-height: 270px; background: #fff; border-radius: 16px; } .qr-box img { image-rendering: pixelated; }
.rdash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 1.6fr; gap: 8px; }
.rstat { background: var(--bg); border-radius: 14px; padding: 10px 12px; display: grid; } .rstat b { font: 800 1.6rem/1.1 var(--font-display); } .rstat span { font-size: .8rem; color: var(--muted); }
.rstat.yes b { color: var(--ok); } .rstat.wide { background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.small-note { font-size: .82rem; }
.gform { display: grid; grid-template-columns: 1.4fr 1fr .6fr .6fr; gap: 10px; align-items: end; }
.gform .fld:nth-child(5) { grid-column: 1 / 3; } .gform .fld:nth-child(6) { grid-column: 3 / 5; } .gform .wide { grid-column: 1 / 4; }
.paste { display: grid; gap: 8px; margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; } .paste label { font-weight: 600; font-size: .86rem; }
.bulk { gap: 8px; }
.gp-gift { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.gp-gift > svg { width: 22px; height: 22px; flex: none; margin-top: 2px; } .gp-gift > div { display: grid; gap: 6px; justify-items: start; } .gp-gift span { color: var(--muted); }
.gp-trial { background: var(--clay-soft); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; font-size: .92rem; }
.grem { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-top: 14px; }
.grem-h { margin: 0 0 8px; display: grid; gap: 2px; } .grem-h span { color: var(--muted); font-size: .84rem; }
.grem ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.grem li { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; font-size: .92rem; }
.grem label { display: flex; align-items: center; gap: 8px; cursor: pointer; } .grem input { width: 18px; height: 18px; accent-color: var(--clay); margin: 0; }
.grem small { color: var(--muted); } .grem li.off span { color: var(--muted); } .grem li.done label { cursor: default; }
.gfilter .chip-btn { min-height: 36px; padding: 6px 12px; }
.glist .gtag { justify-self: start; width: max-content; font-size: .72rem; font-weight: 700; background: var(--bg); border-radius: 999px; padding: 2px 8px; color: var(--muted); }
.glist .gnote { font-style: italic; }
.gsend { display: inline-flex; gap: 2px; align-items: center; }
.gsend .ic { border: 0; background: none; font-size: 1.05rem; width: 38px; height: 40px; border-radius: 10px; cursor: pointer; }
.gsend .ic:hover { background: var(--bg); }
.glist .sent { font-size: .74rem; color: var(--ok); font-weight: 700; }
.sub-h { font-size: 1rem; margin-top: 6px; }
.updates { list-style: none; padding: 0; display: grid; gap: 6px; margin-top: 10px; } .updates li { background: var(--bg); border-radius: 12px; padding: 8px 12px; font-size: .9rem; } .updates small { display: block; color: var(--muted); }
.msg-form { display: grid; gap: 8px; }
.hc { display: flex; gap: 14px; align-items: center; background: color-mix(in srgb, var(--pop) 16%, var(--card)); border-radius: 16px; padding: 12px 14px; }
.hc-n { font: 800 2rem/1 var(--font-display); min-width: 52px; text-align: center; } .hc small { display: block; color: var(--muted); font-size: .86rem; }
.signup, .gifts, .album { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.signup h3, .gifts h3, .album h3 { font-size: 1.1rem; }
.su-list, .gift-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.su-list li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; flex-wrap: wrap; min-height: 48px; }
.su-who { margin-left: auto; font-size: .86rem; color: var(--muted); }
.su-form .row { flex-wrap: nowrap; } .su-form input { flex: 1; } .su-form .qty { width: 72px; flex: none; }
.gift-list li { display: grid; grid-template-columns: 1fr 1.4fr auto auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.gift-list li.done { background: var(--ok-soft); }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ph-grid figure { margin: 0; position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg); }
.ph-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 1.1rem; cursor: pointer; }
/* ---------- the guest's page ---------- */
:root[data-view="guest"] .foot .wrap > p:not(.foot-links) { display: none; }
.gp { padding: 28px 0 40px; }
.gp-in { max-width: 1080px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 40px; align-items: start; }
.gp-card { position: sticky; top: 90px; } .gp-card .invite-card { transform: rotate(-1.5deg); }
.gp-main { display: grid; gap: 18px; }
.gp-hi { font: 800 1.6rem var(--font-display); }
.gp-update { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 18px; padding: 14px 16px; display: grid; gap: 6px; }
.gp-details { list-style: none; padding: 0; display: grid; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 16px 18px; }
.gp-details li { display: flex; gap: 12px; } .gp-details li > span { font-size: 1.3rem; width: 28px; flex: none; } .gp-details b { display: block; font-family: var(--font-display); }
.gp-details .row { gap: 4px 14px; margin-top: 4px; }
.gp-sec { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 18px 20px; display: grid; gap: 12px; }
.gp-sec h2 { font-size: 1.4rem; }
.gp-form { display: grid; gap: 12px; }
.gp-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gp-choice button { border: 2px solid var(--line); background: var(--card); color: var(--text); border-radius: 16px; padding: 14px 8px; font: 700 1rem var(--font-display); cursor: pointer; min-height: 56px; }
.gp-choice button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.gp-stay { border: 0; padding: 0; display: grid; gap: 6px; } .gp-stay input, .gift-list .checkbox-row input { width: 20px; height: 20px; min-height: 0; flex: none; margin: 0; accent-color: var(--accent); }
.gift-list .checkbox-row { display: flex; gap: 6px; align-items: center; font-size: .86rem; margin: 0; } .gp-stay legend { font-weight: 600; font-size: .86rem; margin-bottom: 4px; } .gp-stay label { display: flex; gap: 8px; align-items: center; min-height: 36px; }
.gp-done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.gp-foot { text-align: center; color: var(--muted); margin-top: 26px; }
/* print just the invitation */
#printInvite, #printPlan { display: none; }
.plan-tools .row { flex-wrap: wrap; gap: 8px; }
.welcome { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 18px; padding: 12px 16px; margin-bottom: 14px; }
.welcome b { font-family: var(--font-display); }
.welcome .x { margin-left: auto; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--muted); min-width: 40px; min-height: 40px; }
.cat.add-cat { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-style: dashed; }
.cat.add-cat input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 11px; font: inherit; background: var(--card); color: var(--text); }
.last-notes { background: var(--tip, var(--bg)); border-radius: 14px; padding: 10px 14px; margin-top: 10px; white-space: pre-wrap; }
.after-notes { display: grid; gap: 6px; margin-top: 14px; } .after-notes label { font-weight: 600; font-size: .9rem; }
.after-notes textarea { width: 100%; min-height: 84px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--card); color: var(--text); box-sizing: border-box; }
.test-flag { font-size: .8rem; background: #fff3c4; color: #5a4300; border-radius: 999px; padding: 2px 10px; }
.next-year { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 12px; display: grid; gap: 6px; }
@media print {
  html.print-invite body > *:not(#printInvite) { display: none !important; }
  html.print-invite #printInvite { display: block; max-width: 520px; margin: 0 auto; }
  html.print-invite #printInvite .invite-card { transform: none; box-shadow: none; }
  html.print-invite #printInvite .inv { max-width: 420px; margin: 0 auto; }
  html.print-invite .print-link { text-align: center; margin-top: 16px; font-weight: 600; }
  html.print-plan body > *:not(#printPlan) { display: none !important; }
  html.print-plan #printPlan { display: block; color: #000; background: #fff; font: 11pt/1.4 system-ui, sans-serif; }
  html.print-plan #printPlan h1 { font-size: 20pt; margin: 0 0 4px; } html.print-plan #printPlan h2 { font-size: 13pt; margin: 14px 0 4px; border-bottom: 1px solid #999; }
  html.print-plan #printPlan ul { margin: 4px 0; padding-left: 0; list-style: none; } html.print-plan #printPlan li { margin: 2px 0; break-inside: avoid; }
  html.print-plan #printPlan .pp-cols { columns: 2; column-gap: 24px; } html.print-plan #printPlan .pp-cat { break-inside: avoid; margin-bottom: 8px; }
}
@media (max-width: 980px) {
  .rdash { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rstat.wide { grid-column: 1 / -1; }
  .gp-in { grid-template-columns: 1fr; gap: 24px; } .gp-card { position: static; max-width: 420px; margin: 0 auto; width: 100%; }
}
@media (max-width: 760px) {
  .fgrid, .fgrid2, .gform { grid-template-columns: 1fr 1fr; } .gform .fld:nth-child(1), .gform .fld:nth-child(2), .gform .fld:nth-child(5), .gform .fld:nth-child(6), .gform .wide { grid-column: 1 / -1; }
  .fgrid { grid-template-columns: 1fr; }
  .rdash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gift-list li { grid-template-columns: 1fr auto; } .gift-list li input { grid-column: 1 / -1; }
  .gp-in { padding: 0 16px; } .gp-choice { grid-template-columns: 1fr; }
}

/* ======================================================================
   Gen 2 layer: Cover Story. Everything below restyles gen 1 components
   and adds the new ones (hero, create, invitation card, cover layout,
   build moment). Keep it last in the stylesheet.
   ====================================================================== */
:root :is(h1, h2, h3) { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; line-height: 1.06; font-variation-settings: "opsz" 96, "SOFT" 30; }
:root :is(h1, h2, h3) em, .lede em { font-style: italic; font-weight: 300; }
:root .dash :is(h1, h2, h3) { font-family: var(--serif); }
:root :is(.count strong, .stat b, .metric b, .rstat b, .hc-n, .big-num, .gstats b) { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.eyebrow, :root .eyebrow { display: block; background: none; padding: 0; border-radius: 0; font: 600 .72rem/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.kicker { font: 600 .72rem var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2.5px solid var(--clay); outline-offset: 3px; }
::selection { background: var(--clay-soft); }

/* ---------- buttons, chips, inputs ---------- */
.btn { min-height: 48px; padding: 0 22px; border-radius: 999px; font: 600 .95rem var(--font-body); background: var(--ink); color: var(--paper); border: 1.5px solid transparent; transition: transform .15s ease, background-color .15s ease, border-color .15s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled, .btn[disabled] { opacity: .45; transform: none; cursor: default; }
.btn.big, .btn.lg { min-height: 56px; padding: 0 30px; font-size: 1rem; }
.btn.small { min-height: 40px; padding: 0 16px; font-size: .88rem; }
.btn.ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line); }
.btn.ghost:hover { background: var(--card); border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.btn.white { background: #fff; color: #181512; }
.btn.clay, .poster .btn { background: var(--clay); color: var(--on-clay); }
.dash .btn.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.link-btn { color: var(--text); text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); }
input, select, textarea { border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); min-height: 48px; font-size: 1rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent); }
label, legend { font: 600 .72rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.checkbox-row, .checkbox-row span, .cat-check label, .gp-stay label, .after-item, .shop-item label, .auth-choice button { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--text); }
.chip, .chip-btn, .filters button, .plan-tabs a { border: 1.5px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px; font: 500 .9rem var(--font-body); }
.chip[aria-pressed="true"], .chip-btn.on, .filters button[aria-pressed="true"], .plan-tabs a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg button, .dash-dlg .seg button { border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); padding: 12px 14px; }
.seg strong { font: 600 1rem var(--font-body); }
.seg button[aria-pressed="true"], .dash-dlg .seg button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--card); }
.hint { color: var(--ink-3); }
.fineprint, .small-note, .muted { color: var(--ink-3); }

/* ---------- nav and footer ---------- */
.nav { background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom: 1px solid var(--line); }
.nav-in { height: 64px; }
.brand { font: 500 1.55rem var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 72; }
.brand svg { width: 20px; height: 22px; }
.brand svg .b1 { fill: var(--clay); } .brand svg .b2 { stroke: currentColor; }
.nav-links a { font: 500 .92rem var(--font-body); padding: 8px 12px; }
.nav-links a[aria-current="page"] { background: none; text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.acct-dot { background: var(--clay); color: var(--on-clay); font: 600 .9rem var(--font-body); }
:root:is([data-view="home"], [data-view="create"]) .nav { position: absolute; left: 0; right: 0; top: env(safe-area-inset-top, 0px); background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }
:root:is([data-view="home"], [data-view="create"]) .nav a, :root:is([data-view="home"], [data-view="create"]) .nav .link-btn { color: #fff; }
:root:is([data-view="home"], [data-view="create"]) .nav .brand svg .b1 { fill: #fff; }
:root:is([data-view="home"], [data-view="create"]) .nav .nav-cta .btn { background: #fff; color: #181512; }
:root:is([data-view="home"], [data-view="create"]) .nav-acct .link-btn:hover { background: rgba(255,255,255,.14); }
.foot { background: var(--paper); border-top: 1px solid var(--line); color: var(--ink-3); font-size: .85rem; padding: 34px 0 44px; }
.foot strong { font: 500 1.1rem var(--serif); color: var(--text); }
.toast { background: var(--ink); color: var(--paper); font: 500 .92rem var(--font-body); box-shadow: 0 20px 40px -10px rgba(0,0,0,.45); }

/* ---------- landing: hero ---------- */
.cs-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; color: #fff; isolation: isolate; overflow: hidden; background: #2a2320 var(--hero) center 40% / cover no-repeat; }
.cs-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.62) 100%); } /* the prototype's veil, exactly */
/* v51 (Anu, readability B): a warm brown shade over the top of the home photo, fading out by the middle, so the words read on phones too; the bottom stays as it was */
.cs-hero.hx::before { background: linear-gradient(180deg, rgba(46,24,10,.8) 0%, rgba(46,24,10,.62) 32%, rgba(46,24,10,.12) 58%, rgba(0,0,0,.05) 72%, rgba(0,0,0,.62) 100%); }
.cs-hero-in { width: 100%; max-width: 1180px; margin: 0 auto; padding: 108px 20px 36px; display: grid; gap: 22px; }
.cs-hero-in > div { min-width: 0; }
.cs-hero .eyebrow { color: rgba(255,255,255,.88); }
.cs-hero h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: .98; max-width: 11ch; margin-top: 10px; font-variation-settings: "opsz" 144, "SOFT" 40; }
.cs-hero .lede { font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 44ch; margin-top: 16px; opacity: .93; }
.hero-q { margin-top: 24px; font: 600 .72rem var(--font-body); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.cs-hero .ptype-grid.big { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-hero .ptype, .type-row .ptype { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; min-height: 44px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.5); background: rgba(24,21,18,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; text-align: left; }
.cs-hero .ptype b, .type-row .ptype b { font: 500 .92rem var(--font-body); }
.cs-hero .ptype small, .type-row .ptype small, .cs-hero .ptype .pt-e, .type-row .ptype .pt-e { display: none; }
.cs-hero .ptype[aria-pressed="true"] { background: #fff; color: #181512; border-color: #fff; box-shadow: none; }
.cs-hero .ptype:hover { border-color: #fff; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.hero-cta .sub { font-size: .9rem; opacity: .88; } .hero-cta .sub a { color: #fff; }
.cs-hero .promo-strip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); max-width: 560px; }
.hero-card { justify-self: center; width: min(58%, 250px); transform: rotate(-2.5deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.hero-card .inv-rsvp-pill { pointer-events: none; }
@media (min-width: 900px) {
  .cs-hero-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; padding: 132px 40px 56px; gap: 22px 60px; }
  .hero-card { justify-self: end; width: 380px; transform: rotate(2.5deg) translateY(10px); }
}
@media (max-width: 899px) { .hero-card { order: -1; margin-top: 4px; } .cs-hero-in { padding-top: 84px; } }

/* ---------- landing: create ---------- */
.cs-create { display: grid; gap: 34px; padding: 64px 20px 72px; align-items: start; }
.cs-create-main { min-width: 0; }
@media (min-width: 900px) { .cs-create { grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; padding: 88px 40px 96px; max-width: 1180px; } }
.details-h { font-size: clamp(2rem, 4vw, 3.1rem); max-width: 18ch; }
.type-row { margin-top: 18px; }
.type-row .ptype-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.type-row .ptype { background: var(--card); color: var(--text); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 40px; }
.type-row .ptype[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
.cs-create .setup { margin-top: 26px; gap: 26px; }
.moods.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.chip.mood { position: relative; display: block; height: 88px; padding: 0; overflow: hidden; border-radius: 14px; border: 2px solid transparent; background: #333; color: #fff; text-align: left; box-shadow: 0 8px 24px -14px rgba(0,0,0,.6); transition: transform .2s ease, border-color .2s ease; }
.chip.mood:hover { transform: translateY(-2px); }
.chip.mood .mood-img { position: absolute; inset: 0; background: center / cover no-repeat; }
.chip.mood img.mood-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip.mood::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.62)); }
.chip.mood .mood-name { position: absolute; left: 10px; right: 8px; bottom: 8px; z-index: 1; font: 600 .8rem/1.2 var(--font-body); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.chip.mood[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); background: #333; color: #fff; }
.chip.mood[aria-pressed="true"]::before { content: ""; position: absolute; top: 6px; right: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #181512; display: grid; place-items: center; font: 700 .75rem var(--font-body); }
.chip.chip-more { height: 88px; border-radius: 14px; border-style: dashed; justify-content: center; }
.cs-create .big-in { font: 400 1.5rem var(--serif); min-height: 56px; }
.cs-create .form-actions .sub { font-size: .88rem; }
.inv-label { font: 600 .72rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-align: center; margin-bottom: 12px; }
.invite { position: sticky; top: 24px; padding: 0; }
@media (max-width: 899px) { .cs-create .invite { position: static; max-width: 340px; width: 100%; margin: 0 auto; order: -1; } .cs-create .invite .inv-rsvp-pill { display: none; } }

/* ---------- the invitation card ---------- */
.invite-card.inv, .inv { container-type: inline-size; position: relative; display: block; aspect-ratio: 4 / 5; min-height: 0; border-radius: 22px; overflow: hidden; color: #fff; background: #2a2320; border: 0; box-shadow: var(--shadow); transform: none; font-family: var(--serif); }
.inv .inv-ph, .inv .inv-photo { position: absolute; inset: 0; width: 100%; height: 100%; background: center / cover no-repeat; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; margin: 0; transition: opacity .5s ease; }
.inv .inv-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.76) 100%); }
.inv .inv-inner { position: relative; min-height: 100%; padding: clamp(14px, 6cqw, 24px); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.inv .inv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font: 600 clamp(8px, 2.9cqw, 11px)/1.35 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.inv .inv-top span { max-width: 58%; opacity: .95; }
.inv .inv-top b { border: 1px solid rgba(255,255,255,.7); padding: 5px 9px; border-radius: 999px; font-weight: 600; white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.inv .inv-ttl { font: 400 clamp(22px, 11.5cqw, 46px)/.98 var(--serif); letter-spacing: -.015em; font-variation-settings: "opsz" 144, "SOFT" 60; overflow-wrap: anywhere; color: #fff; }
.inv .inv-sub { font: 400 clamp(10.5px, 3.6cqw, 13.5px)/1.45 var(--font-body); opacity: .94; margin-top: 8px; }
.inv .inv-sub + .inv-sub { margin-top: 2px; }
.inv .inv-sub b { font-weight: 600; }
.inv .inv-note { font-family: var(--serif); font-style: italic; }
.inv .inv-rsvp-pill { margin-top: clamp(8px, 4cqw, 14px); display: inline-flex; align-self: flex-start; background: #fff; color: #181512; font: 600 clamp(11px, 3.6cqw, 13px) var(--font-body); border-radius: 999px; padding: 8px 14px; }
.inv.compact .inv-top b { display: none; }
.dinv.compact { transform: none; }
.pop { animation: csPop .5s cubic-bezier(.2,.9,.3,1.3); }
@keyframes csPop { from { transform: scale(.965); opacity: .7; } to { transform: scale(1); opacity: 1; } }

/* ---------- landing: strip and gallery ---------- */
.cs-gal { background: var(--card); padding: 70px 0 76px; border-top: 1px solid var(--line); }
/* v88 (MR39-03): "A free party planner, start to finish" with plain links below the sample invitations */
.cs-hub { padding: 64px 0 72px; border-top: 1px solid var(--line); }
.cs-hub .wrap { max-width: 1180px; }
@media (min-width: 900px) { .cs-hub .wrap { padding: 0 40px; } }
.cs-hub h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); max-width: 30ch; margin: 0 0 14px; }
@media (max-width: 560px) { .cs-hub .hub-col:nth-child(2) ul { grid-template-columns: 1fr 1fr; column-gap: 16px; } }
.cs-hub .hub-copy { max-width: 68ch; color: var(--ink-2); }
.cs-hub .hub-copy p { margin: 0 0 10px; }
.cs-hub .hub-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 40px; margin-top: 26px; }
.cs-hub h3 { font: 600 .74rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.cs-hub ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cs-hub a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.cs-hub a:hover { text-decoration-color: var(--clay); }
.cs-gal .wrap { max-width: 1180px; }
@media (min-width: 900px) { .cs-gal .wrap { padding: 0 40px; } }
.cs-gal h2 { font-size: clamp(2.1rem, 4.5vw, 3.3rem); max-width: 16ch; }
.lede-2 { color: var(--ink-2); margin: 12px 0 30px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.sample { display: block; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.sample .inv, .sample .dshow { transition: transform .25s ease; }
.sample:hover .inv, .sample:hover .dshow { transform: translateY(-6px) rotate(-.5deg); }
/* v47: pictures of the invitation designs (Assets/invites/show/) */
.dshow { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--line); box-shadow: var(--shadow); }
.dshow img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-show { position: relative; display: block; padding: 0; border: 0; background: #2a2320; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; cursor: pointer; }
.hero-show img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.hero-show img.on { opacity: 1; }
.hero-show:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .hero-show img { transition: none; } }
.sample .cap { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: .82rem; color: var(--ink-3); }
.start-links { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.start-links a { font-weight: 600; }

/* ---------- page heads, tool pages, themes, vendors ---------- */
.page-head { padding-top: 48px; }
.page-head h1, .tool-page-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 400; }
.lead { color: var(--ink-2); }
.utility-card, .join-section, .dash .card, .gp-sec, .gp-details, .vcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }
.utility-card h2, .join-section h2, .vsection h2, .shop h2 { font-size: 1.5rem; }
.poster { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 22px; padding: 0; gap: 0; overflow: hidden; }
.poster-photo { position: relative; min-height: clamp(260px, 38vw, 420px); background: #2a2320 center / cover no-repeat; display: flex; align-items: flex-end; color: #fff; }
.poster-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.66)); }
.poster-photo .poster-head { position: relative; padding: clamp(20px, 4vw, 36px); }
.poster-photo .eyebrow { color: rgba(255,255,255,.85); }
.poster h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 400; margin-top: 6px; }
.poster-head p { font-size: 1.05rem; opacity: .92; }
.poster-grid { padding: 28px clamp(20px, 4vw, 36px) 8px; gap: 28px; }
.poster h3 { font-size: 1.3rem; }
.poster li::before, .vsection li::before, .party-kit li::before { background: var(--clay); }
.poster-foot { padding: 12px clamp(20px, 4vw, 36px) 28px; }
.poster .swatches i { border-color: var(--line); }
.poster .btn[disabled] { opacity: .6; }
.filters button { min-height: 40px; }
.themes-body > .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.vcard { overflow: hidden; }
.vcard-photos span, .vphotos-lg span { background: var(--paper-2); color: var(--ink); }
.vbadge { border-color: var(--line); font-weight: 600; }
.vbadge.verified, .vbadge.founding { background: var(--sage-bg); color: var(--sage); }
.vbadge.match { background: var(--clay-soft); color: var(--clay-2); }
.inquiry-box, .owner-bar, .tips, .metric, .note-soft, .needs, .last-notes { background: var(--paper-2); }
.inquiry-sent { background: var(--sage-bg); color: var(--text); }
.dropzone { border-color: var(--line); background: var(--paper-2); }
.promo-strip { background: var(--clay-soft); border-color: color-mix(in srgb, var(--clay) 30%, transparent); }
.run-item time { color: var(--clay-text); font: 400 1.15rem var(--serif); }
.plan-tabs a[aria-current="page"] { background: var(--ink); color: var(--paper); }

/* ---------- dialogs ---------- */
.auth-dlg { border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.auth-in h2, .dm-head h2 { font-size: 1.7rem; }
.auth-brand { font: 500 1.2rem var(--serif); } .auth-brand svg .b1 { fill: var(--clay); } .auth-brand svg .b2 { stroke: var(--ink); }
.auth-sum, .save-card, .welcome { background: var(--paper-2); border: 1px solid var(--line); }

/* ---------- plan: shared dashboard pieces, re-skinned ---------- */
.dash { --ok: var(--sage); --ok-soft: var(--sage-bg); }
.dash .tag { background: var(--paper-2); color: var(--ink-2); font: 500 .78rem var(--font-body); }
.sp-head .kicker { color: var(--clay-text); letter-spacing: .14em; }
.panel h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.status { font: 600 .72rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; background: var(--paper-2); border: 0; }
.status.ok { background: var(--sage-bg); color: var(--sage); }
.venue, .cat, .budget-bar, .inv-sec, .glist li, .after-item, .su-list li, .gift-list li, .bcat { border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.venue .ph { filter: saturate(.75); }
.venue.sel { border-color: var(--sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 18%, transparent); }
.cat.ok { background: var(--sage-bg); border-color: color-mix(in srgb, var(--sage) 35%, transparent); }
.pub-box { border: 1.5px dashed var(--line); background: var(--paper-2); border-radius: 18px; }
.pub-box.on { border: 1px solid color-mix(in srgb, var(--sage) 40%, transparent); background: var(--sage-bg); }
.pub-box h3, .signup h3, .gifts h3, .album h3, .dash .card h3 { font-size: 1.35rem; }
.rstat { background: var(--card); border: 1px solid var(--line); } .rstat.wide { background: var(--paper-2); } .rstat.yes b { color: var(--sage); }
.hc { background: var(--paper-2); } .hc-n { font-size: 2.4rem; }
.bb-track i, .split-bar i, .bar { background: var(--sage); }
.dw { border: 1px solid var(--line); box-shadow: none; border-radius: 18px; }
.dw b { font: 400 1.5rem var(--serif); }
.avatar, .avatars span, .team .avatar { background: var(--paper-2); color: var(--ink-2); font: 600 .72rem var(--font-body); }
.rsvp.r-yes { background: var(--sage-bg); color: var(--sage); }
.inv-split { grid-template-columns: minmax(0, 340px) 1fr; }
.inv-left .inv { max-width: 340px; }
.ch.now > .num { background: var(--clay); border-color: var(--clay); color: var(--on-clay); box-shadow: 0 0 0 7px color-mix(in srgb, var(--clay) 18%, transparent); }
.ch.now .panel { border: 1px solid var(--line); background: var(--card); }
.stat.big b { color: var(--clay-text); }

.venue h3, .dash .card h3.small-h, .after-item b { font-family: var(--font-body); }
:root .venue h3 { font: 600 1rem var(--font-body); letter-spacing: 0; }
.hero-card .inv-top b, .cs-create .inv-top b { max-width: 50%; }
label, legend { font: 600 .86rem/1.35 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.cs-create label, .cs-create legend, .kicker-label { font: 600 .72rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
label.btn, .file-btn { font: 600 .88rem var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); margin: 0; }
.gp-details .row { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.shop .btn, .themes-body > .btn { justify-self: start; }
.inv, .inv .inv-ph, .loop, .poster-photo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* ---------- plan: Cover story layout ---------- */
.lay-cover { max-width: 1180px; margin: 0 auto; padding: 8px 20px 40px; display: grid; gap: 26px; box-sizing: content-box; }
@media (min-width: 900px) { .lay-cover { grid-template-columns: 420px minmax(0, 1fr); gap: 56px; padding: 12px 40px 60px; align-items: start; } .cv-cover { position: sticky; top: 84px; } }
.cv-cover { display: grid; gap: 14px; align-content: start; min-width: 0; }
.cv-card .inv { max-width: 380px; margin: 0 auto; }
.cv-share { display: flex; flex-wrap: wrap; gap: 8px; } .cv-share .btn { flex: 1 1 auto; }
.cv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cv-stats .stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 8px; text-align: center; }
.cv-stats .stat b { display: block; font-size: 1.9rem; line-height: 1; }
.cv-stats .stat span { font: 600 .66rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.feed { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; }
.feed h4, .feed .feed-h { margin: 0; display: flex; justify-content: space-between; align-items: center; font: 600 .72rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.feed .live { color: var(--sage); display: inline-flex; gap: 6px; align-items: center; }
.feed .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); animation: csPulse 1.6s infinite; }
@keyframes csPulse { 50% { opacity: .3; } }
.feed-row { display: flex; gap: 10px; align-items: center; font-size: .9rem; }
.feed-row .av { width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; font: 600 .75rem var(--font-body); color: var(--ink-2); flex: none; }
.fr-main { min-width: 0; display: grid; } .fr-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-main small { color: var(--ink-3); font-size: .78rem; }
.fr-st { margin-left: auto; font-weight: 600; font-size: .82rem; white-space: nowrap; } .fr-st.yes { color: var(--sage); } .fr-st.no { color: var(--ink-3); } .fr-st.maybe { color: var(--clay-2); }
.feed-row .t { color: var(--ink-3); font-size: .75rem; white-space: nowrap; }
.cv-cover .dw { justify-content: center; }
.cv-story { min-width: 0; display: grid; gap: 30px; align-content: start; }
.cv-head { min-width: 0; display: grid; gap: 10px; }
.cv-head > h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.cv-head .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-2); font-size: .92rem; }
.cv-head .meta span + span::before { content: "·"; margin-right: 14px; color: var(--ink-3); }
.cv-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 14px 0 0; }
@media (min-width: 900px) { .lay-cover { grid-template-rows: auto 1fr; } .lay-cover > .cv-cover { grid-column: 1; grid-row: 1 / span 2; } .lay-cover > .cv-head { grid-column: 2; grid-row: 1; } .lay-cover > .cv-story { grid-column: 2; grid-row: 2; } }
.cv-count b { font: 400 clamp(3rem, 7vw, 4.6rem)/1 var(--serif); letter-spacing: -.03em; }
.cv-count span { color: var(--ink-2); font-size: 1.02rem; }
.cv-sec { display: grid; gap: 14px; min-width: 0; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.sec-h h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.sec-h .muted, .sec-h .link-btn { font-size: .86rem; }
.todo { display: grid; gap: 8px; }
.todo li { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 6px 8px 6px 14px; }
.todo .tick { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: none; cursor: pointer; display: grid; place-items: center; font: 600 .78rem var(--font-body); color: var(--ink-2); }
.todo .tick:hover { border-color: var(--sage); background: var(--sage-bg); }
.todo .tw-step .tick { border-color: var(--clay); color: var(--clay-text); cursor: inherit; }
.tw-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 10px 6px; color: var(--text); text-align: left; cursor: pointer; font: inherit; min-height: 48px; }
.tw-go .t { flex: 1; min-width: 0; font-weight: 600; }
.tw-go .d { display: block; font-weight: 400; color: var(--ink-3); font-size: .84rem; margin-top: 2px; }
.tw-go .when { font-size: .8rem; color: var(--ink-3); white-space: nowrap; } .tw-go .when.due { color: var(--clay-text); font-weight: 600; }
.cv-hsent { margin-top: -4px; }
.cv-shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .cv-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.cv-shop .item { display: grid; gap: 2px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--text); transition: transform .15s ease, border-color .15s ease; }
.cv-shop .item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.cv-shop .q { font: 400 2.2rem/1 var(--serif); letter-spacing: -.02em; }
.cv-shop .n { font-weight: 600; font-size: .9rem; margin-top: 6px; } .cv-shop .s { color: var(--ink-3); font-size: .8rem; }
.pill { font: 600 .68rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.pill.sage { background: var(--sage-bg); color: var(--sage); } .pill.clay { background: var(--clay-soft); color: var(--clay-2); }
.cv-sticky { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: 12px; background: #181512; color: #fff; border-radius: 18px; padding: 10px 10px 10px 16px; box-shadow: 0 20px 50px -10px rgba(0,0,0,.5); }
.cv-sticky small { display: block; font: 600 .66rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.cv-sticky b { font-weight: 500; font-size: .95rem; }
.cv-sticky .btn { margin-left: auto; }
@media (min-width: 900px) { .cv-sticky { display: none; } }
@media (max-width: 899px) {
  :root[data-view="plan"] .foot { padding-bottom: 110px; }
  .lay-cover { display: flex; flex-direction: column; gap: 18px; }
  .lay-cover > .cv-cover { display: contents; }
  .lay-cover > .cv-head { order: 0; }
  .lay-cover > .cv-cover > .gpv { order: 1; max-width: 300px; margin: 6px auto 0; width: 100%; }
  .lay-cover > .cv-cover > .cv-share { order: 2; }
  .lay-cover > .cv-cover > .cv-stats { order: 3; }
  .lay-cover > .cv-story { order: 4; margin-top: 10px; }
  .lay-cover > .cv-cover > .feed, .lay-cover > .cv-cover > .dw { order: 5; }
}


/* ---------- guest page ---------- */
:root[data-view="guest"] { --bg: var(--paper-2); }
.gp { padding: 24px 0 48px; }
@media (min-width: 900px) { .gp-in { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 56px; padding: 0 40px; max-width: 1180px; } .gp-card { top: 88px; } }
/* v67 (Anu): on desktop the invitation grows with the window, as tall as the screen allows (4:5), between 420 and 620 px wide */
@media (min-width: 900px) { .gp-in { --gpw: clamp(420px, min(46vw, calc((100svh - 130px) * .8)), 620px); grid-template-columns: var(--gpw) minmax(0, 1fr); max-width: 1280px; } .gp-in .gp-card .inv, .gp-in .gp-card .dfr { max-width: var(--gpw); } }
.gp-card .inv { max-width: 420px; }
.gp-card .invite-card { transform: none; }
.gp-host { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--ink-2); font-size: .92rem; }
.gp-host .av, .gp-host span.av { width: 30px; height: 30px; border-radius: 50%; background: var(--clay); color: var(--on-clay); display: grid; place-items: center; font: 600 .78rem var(--font-body); }
.gp-hi { font: 400 clamp(1.9rem, 4vw, 2.6rem) var(--serif); }
.gp-main { gap: 16px; }
.gp-update { background: var(--clay-soft); border: 1px solid color-mix(in srgb, var(--clay) 30%, transparent); }
.gp-details { padding: 6px 18px; gap: 0; }
.gp-details li { padding: 12px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.gp-details li:last-child { border-bottom: 0; }
.gp-details li > span { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.gp-details li > span svg { width: 22px; height: 22px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gp-details b { font: 600 .98rem var(--font-body); }
.gp-sec { padding: 20px 22px; }
.gp-sec h2 { font-size: 2rem; }
.gp-choice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gp-choice button { min-height: 68px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); display: grid; place-items: center; gap: 2px; font: 600 1rem var(--font-body); padding: 10px 6px; }
.gp-choice button b { font-weight: 600; } .gp-choice button small { font-weight: 500; font-size: .74rem; color: var(--ink-3); }
.gp-choice button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hp-ask .gp-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hp-change { margin: 18px 0 0; text-align: center; } /* G23 */ .gp-choice button.on small { color: color-mix(in srgb, var(--paper) 70%, transparent); }
@media (max-width: 760px) { .gp-choice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* v66 (Anu): the three replies in very light pastels, green, yellow and red; the picked one a shade deeper with a darker edge */
.gp-choice button.gp-c-yes { --gc: #4FA872; } .gp-choice button.gp-c-maybe { --gc: #E0B53A; } .gp-choice button.gp-c-no { --gc: #D9705F; }
.gp-choice button[class*="gp-c-"] { background: color-mix(in srgb, var(--gc) 11%, var(--card)); border-color: color-mix(in srgb, var(--gc) 30%, var(--card)); color: var(--ink); }
.gp-choice button[class*="gp-c-"]:hover { background: color-mix(in srgb, var(--gc) 18%, var(--card)); }
.gp-choice button[class*="gp-c-"].on { background: color-mix(in srgb, var(--gc) 30%, var(--card)); border-color: color-mix(in srgb, var(--gc) 85%, var(--ink)); border-width: 2px; color: var(--ink); }
.gp-choice button[class*="gp-c-"] small, .gp-choice button[class*="gp-c-"].on small { color: var(--ink-2); }
.gp-drop { margin: -4px 0 0; font-size: .8rem; color: var(--ink-3); }
.gp-cnts { display: flex; flex-wrap: wrap; gap: 10px 22px; } .gp-cnt { display: grid; gap: 6px; } .gp-cnt > span { font-weight: 600; font-size: .9rem; }
.gp-cnt .stepper input { width: 40px; min-height: 0; height: 38px; padding: 0; border: 0; background: none; box-shadow: none; text-align: center; font: 600 1rem var(--font-body); color: var(--text); -moz-appearance: textfield; }
.gp-cnt .stepper input::-webkit-outer-spin-button, .gp-cnt .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gp-more { border-top: 1px solid var(--line); padding-top: 10px; }
.gp-more > summary { cursor: pointer; color: var(--ink-2); font-size: .92rem; font-weight: 500; min-height: 40px; display: flex; align-items: center; }
.gp-more-in { display: grid; gap: 12px; margin-top: 8px; }
.gp-done { background: var(--card); border-color: color-mix(in srgb, var(--sage) 40%, transparent); }
.gp-done h2 { font-size: clamp(2.2rem, 5vw, 2.8rem); }
.gp-done .row { display: flex; flex-wrap: wrap; gap: 8px; }
.loop { position: relative; display: grid; gap: 6px; margin-top: 12px; padding: 22px 20px; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; background: #333 center / cover no-repeat; isolation: isolate; }
.loop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.5); }
.loop b { font: 400 1.7rem var(--serif); } .loop span { font-size: .92rem; opacity: .92; } .loop .btn { justify-self: start; margin-top: 6px; opacity: 1; }
.gp-foot { color: var(--ink-3); }

/* ---------- the build moment ---------- */
.cs-build { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: #181512; color: #fff; padding: 40px 20px; overflow: auto; animation: csFade .25s ease; }
.cs-build.out { opacity: 0; transition: opacity .25s ease; }
@keyframes csFade { from { opacity: 0; } }
.cs-build-bg { position: absolute; inset: 0; background: center / cover no-repeat; opacity: .35; filter: saturate(.8); }
.cs-build-in { position: relative; display: grid; gap: 28px; justify-items: center; text-align: center; max-width: 900px; width: 100%; }
.cs-build-card { width: min(220px, 60vw); }
.cs-build h2 { font-size: clamp(2rem, 4vw, 3rem); color: #fff; }
.ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; text-align: left; }
.ticks li { display: flex; gap: 12px; align-items: center; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.ticks li.shown { opacity: 1; transform: none; }
.ticks li i { width: 26px; height: 26px; border-radius: 50%; background: var(--sage); display: grid; place-items: center; flex: none; }
.ticks li i svg { width: 14px; height: 14px; }
.ticks small { display: block; color: rgba(255,255,255,.65); font-size: .82rem; }
.cs-build .btn { margin-top: 24px; }
@media (min-width: 900px) { .cs-build-in { grid-template-columns: 300px 1fr; text-align: left; justify-items: start; gap: 64px; align-items: center; } .cs-build-card { width: 300px; } }

/* ---------- small screens and motion ---------- */
@media (max-width: 560px) {
  .nav-in { gap: 6px; }
  .brand { font-size: 1.3rem; }
  .cs-create { padding: 44px 16px 56px; }
  .cv-stats .stat b { font-size: 1.6rem; }
  .cards { gap: 12px; }
}
@media print { .cs-hero, .cv-sticky, .cs-build { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .pop, .cs-build, .feed .live::before { animation: none !important; } }

/* ======================================================================
   v20 changes (Sep 28, 2026): photo tiles for party types, the full-page
   create screen, the hybrid plan (Cover story left column + Story chapters),
   and the guest's-eye phone preview.
   ====================================================================== */
.cs-hero .ptype-grid.ptiles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.cs-hero .ptype.ptile { position: relative; display: block; flex: 0 0 auto; width: 110px; height: 86px; padding: 0; border-radius: 14px; overflow: hidden; border: 2px solid transparent; background: #333; color: #fff; text-align: left; box-shadow: 0 8px 24px -10px rgba(0,0,0,.6); -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform .2s ease, border-color .2s ease; }
.cs-hero .ptype.ptile:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.7); }
.cs-hero .ptype.ptile .mood-img { position: absolute; inset: 0; background: center / cover no-repeat; }
.cs-hero .ptype.ptile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.65)); }
.cs-hero .ptype.ptile b { position: absolute; left: 10px; right: 8px; bottom: 8px; z-index: 1; font: 600 .82rem/1.2 var(--font-body); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.cs-hero .ptype.ptile small { display: none; }
.cs-hero .ptype.ptile[aria-pressed="true"] { border-color: #fff; background: #333; color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 8px 24px -10px rgba(0,0,0,.6); }
.cs-hero .ptype.ptile[aria-pressed="true"]::before { content: ""; position: absolute; top: 6px; right: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #181512; display: grid; place-items: center; font: 700 .75rem var(--font-body); }
@media (max-width: 899px) {
  .cs-hero .ptype-grid.ptiles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 10px -20px 0; padding: 2px 20px 6px; }
  .cs-hero .ptype-grid.ptiles::-webkit-scrollbar { display: none; }
  .cs-hero .ptype.ptile { width: 118px; height: 88px; }
  .hero-card .inv-top b { display: none; }
}

@media (max-width: 560px) { .moods.chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .chip.mood, .chip.chip-more { height: 76px; } .chip.mood .mood-name { font-size: .72rem; left: 7px; bottom: 6px; } }
/* the create screen */
.cc { position: relative; min-height: 100vh; min-height: 100svh; color: #fff; isolation: isolate; display: grid; align-items: end; overflow: hidden; }
.cc-bg { position: absolute; inset: 0; z-index: -2; background: #2a2320 center / cover no-repeat; transition: background-image .4s ease; }
@media (min-width: 900px) { .cc-bg { background-attachment: fixed; } } /* v64: sized to the window, so opening More designs (a taller page) no longer zooms the photo out */
.cc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.38) 40%, rgba(0,0,0,.8) 100%); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.cc-in { width: 100%; max-width: 1180px; margin: 0 auto; padding: 96px 20px 40px; display: grid; gap: 26px; min-width: 0; } /* v86 (MR40-01b): as a grid item it grew to its widest child (446 px on a 390 px phone), clipping the age + and the time */
.cc-in > div, .cc-in > aside { min-width: 0; }
@media (min-width: 900px) { .cc-in { grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: center; padding: 108px 40px 48px; } }
.cc-steps { display: flex; align-items: center; gap: 8px; font: 600 .72rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 14px; }
.cc-steps span.on { color: #fff; } .cc-steps i { width: 22px; height: 2px; background: rgba(255,255,255,.3); display: inline-block; } .cc-steps i.on { background: #fff; }
.cc h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); max-width: 15ch; color: #fff; font-variation-settings: "opsz" 144, "SOFT" 40; }
.cc .type-row { margin-top: 18px; }
.cc .type-row .ptype { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.45); min-height: 40px; }
.cc .type-row .ptype[aria-pressed="true"] { background: #fff; color: #181512; border-color: #fff; }
.cc .setup { margin-top: 22px; gap: 22px; }
.cc label, .cc legend { color: rgba(255,255,255,.82); font: 600 .72rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.cc input, .cc select { background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.42); color: #fff; color-scheme: dark; }
.cc input::placeholder { color: rgba(255,255,255,.55); }
.cc input:focus, .cc select:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.cc select option { color: #181512; background: #fff; }
.cc .big-in { background: transparent; border: 0; border-bottom: 1.5px solid rgba(255,255,255,.6); border-radius: 0; padding: 6px 0; font: 400 clamp(1.8rem, 5vw, 2.4rem) var(--serif); min-height: 56px; }
.cc .big-in:focus { box-shadow: none; border-bottom-color: #fff; }
.cc .hint { color: rgba(255,255,255,.8); } .cc .hint.error { color: #ffc9b8; }
.cc [aria-invalid="true"] { border-color: #ffc9b8 !important; }
.cc .seg button { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.4); color: #fff; }
.cc .seg small { color: rgba(255,255,255,.72); }
.cc .seg button[aria-pressed="true"] { background: #fff; color: #181512; border-color: #fff; box-shadow: none; } .cc .seg button[aria-pressed="true"] small { color: #4a443d; }
.cc .chip.mood { box-shadow: 0 8px 24px -10px rgba(0,0,0,.7); }
.cc .chip.mood[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.cc .chip.chip-more { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.45); }
.cc .form-actions { gap: 14px 20px; }
.cc-skip, .cc .form-actions a { color: #fff; font-size: .92rem; }
.cc-fine { font-size: .82rem; color: rgba(255,255,255,.72); margin-top: -6px; }
.cc .invite { position: static; } .cc .inv-label { color: rgba(255,255,255,.82); }
@media (min-width: 900px) { .cc .invite { position: sticky; top: 90px; align-self: center; } }
@media (max-width: 899px) { .cc .invite { order: -1; max-width: 230px; width: 100%; margin: 0 auto; } .cc .invite .inv-rsvp-pill, .cc .invite .inv-top b { display: none; } .cc-in { padding-top: 84px; } }

/* hybrid plan: Story chapters inside Cover story */
.lay-cover .chapters { margin-top: 4px; }
.lay-cover .chead h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.lay-cover .chead:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.lay-cover .ch.done .chead h3 { color: var(--ink-3); }
.lay-cover .ch > .num { background: var(--card); border: 1.5px solid var(--line); color: var(--ink-3); font: 400 1.15rem var(--serif); }
.lay-cover .ch.done > .num { background: var(--sage); border-color: var(--sage); color: #fff; font-family: var(--font-body); }
.lay-cover .ch .panel { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 3vw, 26px); box-shadow: 0 30px 60px -48px rgba(24,21,18,.6); }
.lay-cover .ch.now .panel { border-color: color-mix(in srgb, var(--clay) 35%, var(--line)); }
.lay-cover .ch .panel .sp-head .kicker { display: none; }
.sec-h h2 em { font-style: italic; font-weight: 300; }

/* the guest's-eye preview (Cover Story screen 4) */
.gpv { margin: 0; display: grid; gap: 10px; justify-items: center; }
.gpv figcaption { font: 600 .72rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.gpv-phone { width: 100%; max-width: 340px; border-radius: 42px; border: 9px solid #1a1714; background: #1a1714; box-shadow: 0 40px 80px -34px rgba(24,21,18,.6); overflow: hidden; }
.gpv-screen { background: #fff; color: #181512; border-radius: 33px; overflow: hidden; }
.gpv-photo { position: relative; min-height: 330px; background: #2a2320 center / cover no-repeat; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; isolation: isolate; }
.gpv-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.74)); }
.gpv-eb { font: 600 .62rem var(--font-body); letter-spacing: .15em; text-transform: uppercase; opacity: .9; }
.gpv-ttl { font: 400 2.1rem/1 var(--serif); margin-top: 6px; letter-spacing: -.015em; font-variation-settings: "opsz" 144, "SOFT" 60; overflow-wrap: anywhere; }
.gpv-ttl em { font-style: italic; font-weight: 300; }
.gpv-sub { font-size: .78rem; opacity: .92; margin-top: 8px; line-height: 1.45; }
.gpv-host { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #e3ddd2; font-size: .78rem; color: #4a443d; }
.gpv-host .av { width: 24px; height: 24px; border-radius: 50%; background: var(--clay); color: var(--on-clay); display: grid; place-items: center; font: 600 .66rem var(--font-body); }
.gpv-body { padding: 14px 16px 18px; display: grid; gap: 8px; }
.gpv-h { font: 400 1.35rem var(--serif); }
.gpv-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gpv-choice span { border: 1.5px solid #e3ddd2; border-radius: 12px; padding: 8px 4px; text-align: center; display: grid; gap: 1px; }
.gpv-choice span:first-child { background: #181512 !important; color: #fff !important; border-color: #181512; }
.gpv-choice b { font-size: .78rem; } .gpv-choice small { font-size: .6rem; color: #5f574e; } .gpv-choice span { background: #fff; color: #181512; } .gpv-choice span:first-child small { color: rgba(255,255,255,.82); }
.gpv-l { font: 600 .62rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #7c746a; margin-top: 4px; }
.gpv-in { height: 36px; border: 1.5px solid #e3ddd2; border-radius: 10px; }
.gpv-note { font: italic 400 .86rem var(--serif); color: #4a443d; }
.gpv-by { font-size: .72rem; color: #7c746a; }
.gpv-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: .88rem; }

/* ---------- v21: the create screen as in the prototype (Mood, Who, When, Publish) ---------- */
.hero-q span { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; margin-left: 6px; }
.cs-hero .lede { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.cc-type { font-size: .88rem; color: rgba(255,255,255,.78); margin: -4px 0 8px; } .cc-type a { color: #fff; }
.cc .setup { margin-top: 18px; gap: 18px; max-width: 600px; }
.cc-moods.chips { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; margin: 0 -2px; }
.cc-moods.chips::-webkit-scrollbar { display: none; }
.cc .cc-moods.chips { flex-wrap: nowrap; display: flex; }
.cc .cc-pick span { white-space: nowrap; }
.cc .cc-moods .chip.mood { flex: 0 0 auto; width: 104px; height: 72px; }
.cc .cc-moods .chip.chip-more { flex: 0 0 auto; width: 104px; height: 72px; font-size: .8rem; }
.cc .cc-moods .chip.mood .mood-name { font-size: .74rem; }
.cc .fl { display: grid; gap: 8px; }
.cc .fl > label, .cc .fl-label { font: 600 .72rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.82); margin: 0; }
.cc .big-row { display: flex; align-items: center; gap: 12px; border-bottom: 1.5px solid rgba(255,255,255,.55); padding: 4px 0; }
.cc .big-row .big-in { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; font: 400 clamp(1.9rem, 6vw, 2.5rem) var(--serif); font-variation-settings: "opsz" 144; min-height: 52px; box-shadow: none; }
.cc .stepper { position: relative; display: inline-flex; align-items: center; height: 44px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; overflow: visible; flex: none; }
.cc .stepper button { width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 1.25rem; cursor: pointer; border-radius: 50%; display: grid; place-items: center; }
.cc .stepper button:hover { background: rgba(255,255,255,.15); }
.cc .stepper input { width: 46px; min-height: 0; height: 40px; padding: 0; border: 0; background: none; text-align: center; font: 600 .98rem var(--font-body); color: #fff; -moz-appearance: textfield; box-shadow: none; }
.cc .stepper input::-webkit-outer-spin-button, .cc .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cc .stepper small { position: absolute; left: 0; right: 0; top: 100%; margin-top: 3px; text-align: center; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.cc .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc .chip.cc-chip { min-height: 42px; padding: 0 15px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.45); background: transparent; color: #fff; font: 500 .9rem var(--font-body); display: inline-flex; align-items: center; gap: 8px; }
.cc .chip.cc-chip:hover { background: rgba(255,255,255,.12); }
.cc .chip.cc-chip[aria-pressed="true"] { background: #fff; color: #181512; border-color: #fff; }
.cc .chip.cc-chip small { opacity: .7; font-weight: 400; font-size: .8rem; }
.cc .cc-pick { cursor: pointer; padding: 0 6px 0 15px; text-transform: none; letter-spacing: 0; }
.cc .cc-pick span { font: 500 .9rem var(--font-body); color: rgba(255,255,255,.82); }
.cc .cc-pick input { min-height: 0; height: 38px; border: 0; background: rgba(255,255,255,.12); border-radius: 999px; padding: 0 10px; color: #fff; font: 500 .88rem var(--font-body); color-scheme: dark; box-shadow: none; }
.cc .cc-pick input:focus { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
/* v89: our own "Pick a date" over an empty date field (Safari on iPhone draws it blank; other browsers' mm/dd/yyyy is hidden so all show the same) */
.cc .cc-pick .cc-dw { display: inline-block; position: relative; } .cc .cc-pick #f-date { min-width: 136px; } /* desktop Safari shrinks an empty date field */
.cc .cc-pick .cc-ph { display: none; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; font: 500 .88rem var(--font-body); color: inherit; opacity: .8; white-space: nowrap; }
.cc .cc-pick.cc-empty .cc-ph { display: block; }
.cc .cc-pick.cc-empty input:not(:focus) { color: transparent; }
.cc .cc-pick.cc-empty:focus-within .cc-ph { display: none; }
.cc .cc-num input { width: 74px; text-align: center; }
.cc .cc-times { margin-top: 2px; }
.cc .form-actions { margin-top: 6px; }
.cc .form-actions .sub { font-size: .84rem; color: rgba(255,255,255,.8); max-width: 34ch; }
@media (max-width: 560px) { .cc .chip.cc-chip { min-height: 40px; padding: 0 13px; font-size: .86rem; } .cc .chip.cc-chip small { display: none; } .cc .cc-pick input { max-width: 150px; } }

/* ======================================================================
   v22 (Sep 28, 2026): "Cover Story, refined". One My plan view, one header,
   sharing and counts shown once, a line-icon set instead of emoji, pick
   chips on Create, phone fixes. Keep it last in the stylesheet.
   ====================================================================== */
:root { --line-2: #d3cbbe; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --line-2: #45403a; } }
:root[data-theme="dark"] { --line-2: #45403a; }

/* ---------- icons ---------- */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.btn .ic { width: 16px; height: 16px; }
.icbtn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink-2); padding: 0; }
.icbtn:hover { background: var(--paper-2); color: var(--text); }
.icbtn .ic { width: 18px; height: 18px; }

/* ---------- nav on phones (v21 overflowed 75 px at 390 px) ---------- */
.nav-in { min-width: 0; }
@media (max-width: 599px) {
  .nav-in { gap: 4px; } .brand { font-size: 1.3rem; }
  .nav-links { min-width: 0; overflow-x: auto; scrollbar-width: none; gap: 0; margin-left: 2px; } .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { padding: 8px 6px; font-size: .84rem; }
  .nav-signin .lbl { display: none; } .nav-cta { display: none; }
}

/* ---------- landing ---------- */
.hero-sub { margin-top: 16px; font-size: .88rem; opacity: .86; } .hero-sub a { color: #fff; }
.hero-q span { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; margin-left: 6px; }
.cs-hero .ptype-grid.ptiles { gap: 8px; }
.cs-hero .ptype.ptile { width: 104px; height: 80px; }
@media (min-width: 900px) { .cs-hero .ptype-grid.ptiles { flex-wrap: nowrap; } }
.cs-hero .promo-strip { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 6px 6px 6px 14px; border-radius: 999px; font-size: .86rem; max-width: 100%; }
.cs-hero .promo-strip .btn { min-height: 32px; padding: 0 12px; font-size: .8rem; }
.cs-gal { padding: 56px 0 64px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
.foot .wrap > p { margin: 0; } .foot .foot-links { margin-left: auto; }

/* ---------- create: pick chips ---------- */
.cc .cc-pick[data-on="true"] { background: #fff; color: #181512; border-color: #fff; }
.cc .cc-pick[data-on="true"] span { color: #181512; }
.cc .cc-pick[data-on="true"] input { background: #f1ece3; color: #181512; color-scheme: light; }
.cc .form-actions .sub { max-width: 30ch; }
@media (min-width: 900px) { .cc-in { align-items: start; } .cc .invite { position: sticky; top: 96px; align-self: start; } }
.cc .stepper input { font: 600 .98rem var(--font-body); }

/* ---------- My plan: header, cover column ---------- */
.lay-cover { padding-top: 22px; }
.cv-head { gap: 8px; } .cv-head > h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.cv-count { margin-top: 6px; } .cv-count b { font-size: clamp(2.8rem, 6vw, 4.2rem); }
.cv-cover { gap: 12px; }
.gpv-phone { max-width: 300px; border-radius: 36px; border-width: 6px; box-shadow: 0 24px 60px -28px rgba(24,21,18,.45), 0 0 0 1px var(--line); }
.gpv-screen { border-radius: 30px; }
.gpv-photo { min-height: 290px; padding: 16px; } .gpv-ttl { font-size: 1.85rem; }
.gpv-cap { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; width: 100%; max-width: 300px; margin: 0; font: 400 .88rem var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); }
.gpv-cap .eyebrow { display: inline; } .gpv-links { display: flex; gap: 12px; }
.gpv-links .link-btn { min-height: 32px; font: 500 .82rem var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink-3); text-decoration: none; padding: 0; display: inline-flex; align-items: center; } .gpv-links .link-btn:hover { text-decoration: underline; }
.cv-share .btn:first-child { flex: 1 1 100%; }
.cv-stats .stat b { font-size: 1.8rem; }
.feed h4 .live, .feed .feed-h .live { color: var(--sage); }
.welcome { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; font-size: .92rem; }
.welcome .btn { margin-left: auto; } .welcome .x { border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--ink-3); width: 36px; height: 36px; }
.save-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border-radius: 16px; font-size: .9rem; }
.save-card .auth-row { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.save-card .auth-row .link-btn { color: var(--ink-3); text-decoration: none; }

/* ---------- My plan: chapters and panels ---------- */
.lay-cover .chapters { margin-top: 0; display: grid; gap: 0; }
.lay-cover .chapters::before { display: none; }
.lay-cover .ch { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; padding: 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.lay-cover .ch:last-child { border-bottom: 0; }
.lay-cover .ch > .num { position: static; width: 40px; height: 40px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink-3); font: 400 1.05rem var(--serif); display: grid; place-items: center; }
.lay-cover .ch.done > .num { background: var(--sage); border-color: var(--sage); color: #fff; } .lay-cover .ch.done > .num .ic { width: 16px; height: 16px; stroke-width: 2; }
.lay-cover .ch.now > .num { background: var(--clay); border-color: var(--clay); color: var(--on-clay); box-shadow: 0 0 0 6px color-mix(in srgb, var(--clay) 16%, transparent); }
.lay-cover .chead { padding: 6px 0; gap: 8px 14px; justify-content: space-between; align-items: baseline; }
.lay-cover .chead h3 { font-size: clamp(1.3rem, 2.2vw, 1.55rem); }
.lay-cover .chead .when { margin-left: 0; font-size: .8rem; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.lay-cover .ch.now .chead .when { color: var(--clay-text); font-weight: 600; }
.lay-cover .ch .sum { grid-column: 2; color: var(--ink-2); font-size: .92rem; padding-bottom: 0; }
.lay-cover .ch .sum .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pl { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: 500 .78rem var(--font-body); cursor: pointer; color: var(--text); }
.pl .ic { width: 14px; height: 14px; color: var(--ink-3); } .pl.in { background: var(--sage-bg); border-color: transparent; color: var(--sage); } .pl.in .ic { color: var(--sage); } .pl.skip { opacity: .5; text-decoration: line-through; }
.lay-cover .ch .panel { grid-column: 2; min-width: 0; margin: 8px 0 0; border-radius: 22px; padding: clamp(16px, 3vw, 24px); box-shadow: none; display: grid; gap: 16px; animation: panelIn .3s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(-4px); } }
.lay-cover .ch.now .panel { border: 1px solid color-mix(in srgb, var(--clay) 35%, var(--line)); }
.panel h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); } .panel .lead { font-size: .98rem; }
.panel .sp-head { margin: 0; } .panel .sp-head:empty { display: none; }
.panel h3, .signup h3, .gifts h3, .album h3 { font: 600 .95rem var(--font-body); }
.panel .pv-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
@media (max-width: 599px) { .lay-cover .ch { grid-template-columns: 32px minmax(0, 1fr); gap: 0 10px; } .lay-cover .ch > .num { width: 32px; height: 32px; font-size: .9rem; } .lay-cover .ch .panel, .lay-cover .ch .sum { grid-column: 1 / -1; } .lay-cover .ch .sum { padding-left: 42px; } }
/* venues */
.venues { display: grid; gap: 10px; } @media (min-width: 700px) { .venues { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.venue { display: grid; gap: 6px; padding: 14px; border: 1.5px solid var(--line); }
.venue .v-ic { width: 22px; height: 22px; color: var(--clay-text); } .venue .ph { display: none; }
.venue .bd { padding: 0; display: grid; gap: 4px; } .venue h3 { margin-top: 2px; } .venue p { font-size: .86rem; color: var(--ink-2); }
.venue .vrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .venue .vrow .btn { margin-left: auto; }
.city-row { max-width: 380px; }
.venue-form { display: grid; gap: 12px; } @media (min-width: 640px) { .venue-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .venue-form > button { grid-column: 1 / -1; justify-self: start; } }
/* invite panel */
.inv-split { display: grid; gap: 22px; grid-template-columns: 1fr; } @media (min-width: 760px) { .inv-split { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 28px; } }
.inv-left { display: grid; gap: 10px; justify-items: center; align-content: start; } .inv-left > div { width: 100%; max-width: 260px; } .inv-left .inv { max-width: none; width: 100%; }
.inv-left .inv-dl { justify-content: center; }
.inv-tools { display: grid; gap: 0; }
.inv-tools .fgrid { grid-template-columns: 1fr; gap: 12px; }
.inv-sec { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 0; margin: 0; }
.inv-sec > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font: 600 .95rem var(--font-body); padding: 0; list-style: none; cursor: pointer; }
.inv-sec > summary::-webkit-details-marker { display: none; } .inv-sec > summary::after { display: none; }
.inv-sec > summary .ic { color: var(--ink-3); transition: transform .3s ease; } .inv-sec[open] > summary .ic { transform: rotate(180deg); }
.inv-sec > *:not(summary) { margin-bottom: 14px; }
.pub-box { margin-top: 14px; }
/* guests */
.hc { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; } .hc .hc-n { font-size: 2.2rem; line-height: 1; }
.hc b { display: block; font-weight: 600; font-size: .95rem; } .hc small { color: var(--ink-3); font-size: .84rem; }
.glist { display: grid; gap: 8px; }
.glist li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.gmain { min-width: 0; display: grid; gap: 2px; } .gmain b { font-weight: 600; } .gmain small { color: var(--ink-3); font-size: .8rem; display: block; }
.gmain .gneeds { min-height: 34px; padding: 4px 10px; font-size: .82rem; margin-top: 4px; max-width: 320px; }
.gmain .gneeds-open { min-height: 28px; justify-self: start; font-size: .8rem; color: var(--ink-3); text-decoration: none; padding: 0; } .gmain .gneeds-open:hover { text-decoration: underline; }
.gacts { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.gacts .rsvp { min-height: 32px; padding: 0 10px; border-radius: 999px; font: 600 .76rem var(--font-body); }
.gacts .link-btn { min-height: 36px; font-size: .84rem; padding: 0 6px; }
@media (max-width: 599px) { .glist li { grid-template-columns: 30px minmax(0, 1fr); } .gacts { grid-column: 1 / -1; justify-content: flex-start; } }
.gform { display: grid; gap: 10px; } @media (min-width: 640px) { .gform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gform .wide, .gform > button { grid-column: 1 / -1; } .gform > button { justify-self: start; } }
.gform .fld.num { grid-column: auto; }
.paste { display: grid; gap: 8px; margin-top: 10px; } .paste > button { justify-self: start; }
/* plan it */
.budget-bar .bb-top { font-size: .9rem; } .budget-bar .bb-edit { text-decoration: underline; text-underline-offset: 3px; }
.cats { display: grid; gap: 8px; } @media (min-width: 640px) { .cats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cat { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; }
.cat .cat-open { display: flex; align-items: center; gap: 12px; padding: 12px 0 12px 14px; min-height: 56px; }
.cat .cat-open .ic { width: 20px; height: 20px; color: var(--ink-2); } .cat.ok .cat-open .ic { color: var(--sage); }
.cat .cat-open b { display: block; font-weight: 600; font-size: .92rem; } .cat .cat-open small { display: block; color: var(--ink-3); font-size: .78rem; }
.cat .x { min-height: 44px; }
.cat.go { grid-template-columns: minmax(0, 1fr) auto 36px; }
.cat.add-cat { border-style: dashed; padding: 6px 8px 6px 14px; grid-template-columns: 1fr; }
.su-list li { font-size: .92rem; }
/* after */
.after-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; } .after-item .ic { color: var(--ink-2); } .after-item.done { background: var(--sage-bg); border-color: transparent; }
.after-item b { display: block; font-weight: 600; font-size: .92rem; } .after-item small { color: var(--ink-3); font-size: .82rem; }
/* this week and shopping: unchanged except type */
.cv-shop .q { font-size: 2.1rem; }
/* tools */
.tools .card h3 { font: 400 1.2rem var(--serif); margin-bottom: 8px; }
.plan-tools .acct { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.plan-tools .acct section h2 { font: 600 .92rem var(--font-body); margin: 0 0 4px; } .plan-tools .acct .vmeta { font-size: .86rem; }
.team li .link-btn { min-height: 36px; font-size: .84rem; }
/* dialogs */
.dm-head .dm-ic { width: 26px; height: 26px; color: var(--clay-text); margin-top: 6px; flex: none; }
.dm-sec h3 { font: 600 .95rem var(--font-body); }
.ideas li { display: flex; gap: 8px; font-size: .92rem; padding: 3px 0; } .ideas li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--clay); margin-top: 9px; flex: none; }
.bcat span { font-size: .9rem; }
.auth-dlg .auth-in { padding: 22px 22px 24px; }
.auth-in h2, .dm-head h2 { font-size: 1.6rem; }
.auth-sum .av { width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); display: inline-grid; place-items: center; font: 600 .74rem var(--font-body); color: var(--ink-2); flex: none; }
/* themes and vendors */
.themes-body .theme-tiles.chips { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; margin: 0 -2px; min-width: 0; max-width: 100%; }
.themes-body .theme-tiles.chips::-webkit-scrollbar { display: none; }
.themes-body .theme-tiles .chip.mood, .themes-body .theme-tiles .chip.chip-more { flex: 0 0 auto; width: 104px; height: 74px; }
@media (min-width: 900px) { .themes-body .theme-tiles.chips { flex-wrap: wrap; overflow: visible; } }
.themes-body > div > .filters, .themes-body > .filters { min-width: 0; max-width: 100%; }
.themes-body > * { min-width: 0; }
.poster-photo { min-height: clamp(220px, 32vw, 360px); }
.vbadges { gap: 4px; }
.dropzone .dz-icon { display: none; } .dropzone .ic { width: 22px; height: 22px; color: var(--ink-2); }
/* guest page */
.gp-details li > span svg { width: 20px; height: 20px; }
.gp-details .row .link-btn { min-height: 36px; font-size: .92rem; }
/* dark */
@media print { .cv-share, .cv-stats, .gpv, .cv-sticky { display: none !important; } }

/* ======================================================================
   v22 port, part 2: layout widths, dialogs, guest page, run sheet, footer.
   Values follow prototype 11 (ui-prototypes/11-cover-story-refined).
   ====================================================================== */
:root { --lift: 0 24px 60px -28px rgba(24,21,18,.45), 0 2px 6px rgba(24,21,18,.06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lift: 0 24px 60px -28px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.3); } }
:root[data-theme="dark"] { --lift: 0 24px 60px -28px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.3); }
:focus-visible { outline: 2.5px solid var(--clay); outline-offset: 3px; }
.wrap { max-width: 1180px; padding-left: 16px; padding-right: 16px; }
@media (min-width: 900px) { .wrap { padding-left: 40px; padding-right: 40px; } }
/* nav: the person icon beside "Sign in" everywhere */
.nav-signin svg { display: block; width: 20px; height: 20px; }
.nav-acct .link-btn.nav-signin { font-weight: 500; }
/* plan grid: 360 px cover column, the story gets the rest */
.lay-cover { box-sizing: border-box; max-width: 1180px; padding: 20px 16px 40px; }
@media (min-width: 900px) { .lay-cover { grid-template-columns: 360px minmax(0, 1fr); gap: 20px 56px; padding: 22px 40px 60px; } .cv-cover { top: 84px; } }
@media (max-width: 899px) { .gpv-phone { max-width: 270px; } .gpv-photo { min-height: 260px; } .gpv-cap { max-width: 270px; } }
:root[data-theme="dark"] .gpv-phone { box-shadow: var(--lift), 0 0 0 1px var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gpv-phone { box-shadow: var(--lift), 0 0 0 1px var(--line); } }
.cv-stats .stat b, .cv-shop .q { transition: color .3s; }
.cv-stats .stat b.bump, .cv-shop .q.bump { color: var(--clay-text); animation: numbump .5s cubic-bezier(.2,.7,.2,1); }
@keyframes numbump { 30% { transform: scale(1.18); } }
/* toast sits above the Next up bar on phones */
@media (max-width: 899px) { :root[data-view="plan"][data-demo] .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }
/* panels: open with the lead sentence; small headings are Inter */
.lay-cover .panel > .lead:first-child, .lay-cover .panel > .sp-head:first-child { margin-top: 0; }
.lay-cover .panel .lead { margin: 0; color: var(--ink-2); font-size: .98rem; }
:root .lay-cover .panel :is(.album, .gifts, .signup) h3, :root .lay-cover .panel .pv-h h3, :root .pub-box h3 { font: 600 .95rem var(--font-body); letter-spacing: 0; }
.lay-cover .panel :is(.album, .gifts, .signup) { border-top: 1px solid var(--line); padding-top: 14px; }
label.btn.file-btn { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.after-item, .after-item small { font-weight: 400; } .after-item b { font-weight: 600; }
.after-item input { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; accent-color: var(--sage); flex: none; }
.plan-tools .acct { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.acct-line { font-size: .86rem; color: var(--ink-3); margin: 0; } .acct-line .link-btn { min-height: 0; padding: 0; display: inline; color: var(--text); font-weight: 500; }
.team + .mini-form .row, #addMember .row { flex-wrap: nowrap; } #addMember input { flex: 1 1 auto; min-width: 0; } #addMember select { width: auto; flex: 0 1 auto; min-width: 0; }
/* no emoji or glyph badges in the chrome */
.chip.mood[aria-pressed="true"]::before, .cs-hero .ptype.ptile[aria-pressed="true"]::before { content: ""; width: 20px; height: 20px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23181512' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* dialogs */
.dash-dlg, .auth-dlg { width: min(560px, calc(100vw - 24px)); box-shadow: var(--lift); }
dialog.auth-dlg::backdrop { background: rgba(24,21,18,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dash-dlg .auth-in { padding: 22px 22px 24px; gap: 14px; }
.dash-dlg .lead { font-size: 1rem; margin: 0; color: var(--ink-2); }
.dm-head { display: flex; gap: 12px; align-items: flex-start; padding-right: 40px; } .dm-head h2 { font-size: 1.7rem; }
.dm-head .tag { font: 500 .76rem var(--font-body); padding: 4px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); border: 0; margin-top: 4px; display: inline-flex; }
.dm-sec { border-top: 1px solid var(--line); padding-top: 14px; }
.dash-dlg .ideas { padding: 0; margin: 0; } .dash-dlg .shortcuts ul { padding: 0; }
.dash-dlg .budget-summary { margin: 0; gap: 8px; } .dash-dlg .metric { text-align: center; background: var(--paper-2); border-radius: 16px; padding: 12px; }
.dash-dlg .metric b { font: 400 1.6rem var(--serif); } .dash-dlg .metric span { font-size: .76rem; color: var(--ink-3); }
#budgetForm.b-own { display: flex; gap: 8px; align-items: center; margin-top: 8px; } #budgetForm.b-own .money-in { flex: 1; min-width: 0; } #budgetForm.b-own .btn { flex: none; }
/* guest page */
.gp-details li > span { flex: none; } .gp-details li > span svg { width: 20px; height: 20px; stroke-width: 1.6; }
.gp-details .row { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 2px; }
.gp-details .row .link-btn, .gp-details a.link-btn { font-size: .92rem; min-height: 36px; padding: 0; display: inline-flex; align-items: center; }
.gp-more { border-top: 1px solid var(--line); padding-top: 0; }
.gp-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font: 600 .95rem var(--font-body); color: var(--text); list-style: none; }
.gp-more > summary::-webkit-details-marker { display: none; } .gp-more > summary .muted { font-weight: 400; font-size: .86rem; color: var(--ink-3); margin-left: 6px; }
.gp-more > summary .ic { color: var(--ink-3); transition: transform .3s ease; } .gp-more[open] > summary .ic { transform: rotate(180deg); }
.gp-more-in { padding-bottom: 6px; }
.gp-done { display: grid; gap: 12px; } .gp-done > div > .link-btn { padding: 0; min-height: 36px; }
.aha { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-size: .9rem; }
.aha b { font: 400 1.3rem var(--serif); } .aha p { margin: 0; color: var(--ink-2); } .aha .fineprint { margin: 0; }
.aha .delta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); } .aha .delta em { font-style: normal; color: var(--clay-text); font-weight: 600; }
/* run sheet */
.rs-page { display: grid; gap: 20px; padding-bottom: 64px; }
@media (min-width: 900px) { .rs-page { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } .rs-page > .rs-head { grid-column: 1 / -1; } }
.rs-page > * { min-width: 0; }
.rs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-top: 32px; }
.rs-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-top: 6px; } .rs-head .lead { margin: 4px 0 0; font-size: 1rem; }
.rs-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 3vw, 26px); }
.rs-card h2 { font: 400 1.3rem var(--serif); margin: 0 0 8px; } .rs-card h2 + ul + h2 { margin-top: 16px; }
.rs-list { margin: 0; padding: 0; } .rs-list li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rs-list li:last-child { border: 0; } .rs-list time { font: 400 1.15rem var(--serif); color: var(--clay-text); } .rs-list b { display: block; font-weight: 600; } .rs-list span { font-size: .9rem; color: var(--ink-2); }
.rs-kit { margin: 0; padding: 0; } .rs-kit li { display: flex; gap: 8px; font-size: .92rem; padding: 3px 0; } .rs-kit li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--clay); margin-top: 9px; flex: none; }
.rs-card .fineprint { margin-top: 12px; }
@media print { .rs-head .row { display: none !important; } .rs-page { display: block; } .rs-card { border: 0; padding: 0; margin-top: 14px; } }
/* footer: one line and one row of links */
.foot { padding: 28px 0 calc(36px + env(safe-area-inset-bottom, 0px)); font-size: .82rem; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.foot .foot-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--ink-3); }
.foot .foot-line strong { font: 500 1rem var(--serif); color: var(--text); }
.foot .foot-links { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot .foot-links a { color: var(--ink-3); font-size: .82rem; }
@media (max-width: 899px) { .foot .foot-links { margin-left: 0; } :root[data-view="plan"] .foot { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); } }
/* landing on phones: room between the tilted card and the eyebrow */
@media (max-width: 899px) { .cs-hero .hero-card { margin-bottom: 26px; } }
/* vendors: cards cap trust tags at two; tags are small and quiet */
.vendor-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
@media (min-width: 960px) { .vendor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vbadges { align-items: center; gap: 4px; }
.vbadge { font: 500 .72rem var(--font-body); padding: 4px 9px; border: 0; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); line-height: 1.3; }
.vbadge.verified, .vbadge.founding { background: var(--sage-bg); color: var(--sage); } .vbadge.match { background: var(--clay-soft); color: var(--clay-2); }
.vcard-photos { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--paper-2); }
.vcard-photos span, .vcard-photos span:nth-child(n) { flex: none; aspect-ratio: auto; background: none; font-size: 1.6rem; }
.vcard-body { padding: 12px 14px 14px; gap: 6px; } .vcard h3 { font: 400 1.15rem var(--serif); }
.vcard .vmeta { font-size: .84rem; color: var(--ink-3); }
.vp-back { padding-top: 32px; padding-bottom: 4px; } .vp-back .link-btn { color: var(--ink-3); text-decoration: none; font-size: .92rem; } .vp-back .link-btn:hover { text-decoration: underline; }
.vprofile { max-width: 820px; } .vprofile .vsection h2 { font-size: 1.3rem; margin-bottom: 6px; }
#inquiryForm .hint:empty { display: none; } #inquiryForm { gap: 12px; }
/* vendor join: one column of numbered cards, plain checkboxes */
#vendorJoin { max-width: 760px; }
.cat-check { gap: 4px 16px; } .cat-check label { border: 0; padding: 0; border-radius: 0; min-height: 36px; font-weight: 500; font-size: .9rem; background: none; }
.cat-check input { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--ink); }
.checkbox-row { align-items: center; } .checkbox-row input { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--ink); }
.checkbox-row .consent, .checkbox-row span { font-weight: 400; font-size: .92rem; }
.acct-line .link-btn, .plan-tools .acct .acct-line .link-btn { display: inline; min-height: 0; padding: 0; }
#addMember select { flex: 0 0 auto; min-width: 104px; }
/* type and spacing scales (review item 14) */
:root { --t-display: clamp(2.6rem, 6.5vw, 5.2rem); --t-h1: clamp(2.1rem, 4.2vw, 3.2rem); --t-h2: clamp(1.6rem, 2.6vw, 2.1rem); --t-h3: 1.3rem; --t-body: 1rem; --t-small: .875rem; --t-micro: .72rem;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --r-in: 12px; --r-card: 16px; --r-lg: 22px; --r-pill: 999px; }
/* sign-in sheet: tighter */
#authBody h2 { font-size: 1.7rem; } #authBody .auth-btn { min-height: 50px; }
.dash-dlg .budget-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dm-head .tag { border-radius: 10px; }
/* ===============================================================   v23 plan tools (backlog P2 to P10): timing and snooze, item prices and
   stores, payments, the food calculator, games, the editable run sheet,
   and day-of mode. Gen 2 tokens only; every grid child min-width: 0.
   ====================================================================== */
.panel .shape, .dash-dlg .shape { border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); }
.shape > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; cursor: pointer; list-style: none; font-size: .9rem; color: var(--ink-2); }
.shape > summary::-webkit-details-marker { display: none; }
.shape > summary .ic { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.shape > summary > span:first-of-type { flex: 1; min-width: 0; }
.shape .shape-edit { font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); }
.shape[open] > summary { border-bottom: 1px solid var(--line); }
.shape-body { display: grid; gap: 10px; padding: 12px 14px 14px; }
.shape-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .shape-f > * { min-width: 0; }
.shape-body .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.shape-body .fineprint { margin: 0; }

.shop-item { flex-wrap: wrap; } .shop-item label { min-width: 0; }
.it-meta { display: inline-flex; align-items: center; gap: 4px; max-width: 46%; min-height: 32px; padding: 0 10px; border: 1px dashed var(--line); border-radius: 999px; background: none; color: var(--ink-3); font: 500 .78rem var(--font-body); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-meta .ic { width: 13px; height: 13px; flex: none; }
.it-meta.set { border-style: solid; color: var(--ink-2); background: var(--paper-2); }
.it-edit { display: grid; gap: 10px; padding: 12px; margin: -2px 0 6px; border-radius: 14px; background: var(--paper-2); }
.it-f { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 10px; } .it-f > * { min-width: 0; }
.store-chips { max-width: 100%; } .it-edit .fineprint { margin: 0; }

.pays, .dm-sec .pays { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pays li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px 8px 12px; min-height: 52px; background: var(--card); }
.pays li.paid { background: var(--sage-bg); border-color: transparent; }
.pay-t { flex: 1; min-width: 0; } .pay-t b { display: block; font-weight: 600; font-size: .92rem; } .pay-t small { display: block; color: var(--ink-3); font-size: .8rem; }
.pays li:not(.paid) .pay-t small { color: var(--clay-text); }
.pay-amt { font: 400 1.1rem var(--serif); }
.pay-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.pay-form > * { min-width: 0; } .pay-form label { font-size: .8rem; margin-bottom: 4px; }
.budget-summary.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bcat b small { display: block; font: 500 .72rem var(--font-body); color: var(--clay-text); text-align: right; }
.bb-track { display: flex; } .bb-track i.bb-due { background: var(--clay); opacity: .55; border-radius: 0 99px 99px 0; }
.tw-zz { margin: 8px 0 0; }

.fc .fc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.fc-list li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: baseline; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.fc-list b { font: 400 1.5rem/1 var(--serif); flex: none; } .fc-list span { min-width: 0; font-weight: 600; font-size: .88rem; } .fc-list small { display: block; font-weight: 400; color: var(--ink-3); font-size: .76rem; }
.fc > p { margin: 0; }
.fc-mix { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .9rem; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); }
.stepper button { width: 44px; height: 40px; border: 0; background: none; color: var(--text); font: 600 1.2rem var(--font-body); cursor: pointer; border-radius: 999px; }
.stepper button:disabled { opacity: .35; cursor: default; } .stepper b { min-width: 32px; text-align: center; font: 400 1.2rem var(--serif); }
.diet { display: grid; gap: 8px; } .diet-flag { background: var(--clay-soft) !important; color: var(--clay-text); font-weight: 600; }
.diet-list { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--ink-2); display: grid; gap: 2px; }
.len-row { display: grid; gap: 6px; } .len-row .chips-row { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; } .len-row .chip-btn { flex: none; }

.games { gap: 8px; }
.game, .more-games { border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.more-games { border-style: dashed; } .more-games > summary { padding: 12px 14px; cursor: pointer; font-size: .9rem; color: var(--ink-2); } .more-games .game { margin: 0 8px 8px; }
.game > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 52px; cursor: pointer; list-style: none; }
.game > summary::-webkit-details-marker { display: none; }
.game > summary > span:first-child:not(.g-pic), .game > summary > .g-pic + span { flex: 1; min-width: 0; }
.g-pic { flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--paper-2); } .g-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.do-game { display: flex; gap: 12px; align-items: flex-start; } .do-game .g-pic { width: 56px; height: 56px; } .do-game > div { min-width: 0; } .game summary b { display: block; font-weight: 600; font-size: .94rem; } .game summary small { color: var(--ink-3); font-size: .8rem; }
.game.on { border-color: color-mix(in srgb, var(--sage) 40%, transparent); }
.g-on { display: inline-flex; align-items: center; gap: 4px; color: var(--sage); font-size: .8rem; font-weight: 600; } .g-on .ic { width: 14px; height: 14px; }
.game > p, .game > .btn { margin: 0 14px 12px; } .game > p { font-size: .9rem; color: var(--ink-2); } .g-sup b { font-weight: 600; color: var(--ink); }
.day-games h3 small { font: 400 .8rem var(--font-body); color: var(--ink-3); margin-left: 6px; }
.game .g-chev { width: 16px; height: 16px; color: var(--ink-3); transition: transform .15s; } .game[open] .g-chev { transform: rotate(180deg); }
.dm-sec .dg-sup { list-style: none; margin: 0 14px 10px; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.dm-sec .dg-sup li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; } .dg-sup .shop-links { display: inline-flex; gap: 6px; margin: 0; } .dg-sup .shop-out { min-height: 30px; padding: 0 10px; font-size: .78rem; }
.game > .small-note { margin: 0 14px 12px; }
.day-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 0; font-size: .88rem; } .day-links a { color: var(--ink); text-underline-offset: 3px; }
.day-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } @media (max-width: 640px) { .day-tools { grid-template-columns: 1fr; } }
.day-tool { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); text-decoration: none; min-width: 0; }
.day-tool:hover { border-color: var(--ink-3); } .day-tool > .ic { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--clay-text, var(--ink)); }
.day-tool b { display: block; font-weight: 600; font-size: .94rem; } .day-tool small { display: block; color: var(--ink-2); font-size: .82rem; line-height: 1.35; margin-top: 2px; }

.runline small { font-size: .82rem; }
.rs-hint { margin: 0 0 6px; }
.rs-edit li.rs-block { grid-template-columns: 92px minmax(0, 1fr) auto; align-items: start; }
.rs-body { display: block; width: 100%; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: var(--text); font: inherit; cursor: pointer; position: relative; }
.rs-body b { display: block; font-weight: 600; padding-right: 22px; } .rs-body span { display: block; font-size: .9rem; color: var(--ink-2); } .rs-body em { font-style: normal; font-weight: 600; color: var(--ink); }
.rs-body small { display: block; color: var(--ink-3); font-size: .78rem; margin-top: 2px; }
.rs-pen { position: absolute; right: 0; top: 2px; width: 15px; height: 15px; color: var(--ink-3); }
.rs-body:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rs-acts { display: flex; align-items: center; gap: 2px; }
.rs-acts button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.rs-acts button:disabled { opacity: .3; cursor: default; } .rs-acts .ic { width: 18px; height: 18px; }
.rs-grip { width: 18px; height: 18px; color: var(--ink-3); cursor: grab; margin-right: 4px; }
.rs-block[draggable] { cursor: grab; } .rs-block.dragging { opacity: .4; }
.rs-block.drop-before { box-shadow: inset 0 2px 0 var(--clay); } .rs-block.drop-after { box-shadow: inset 0 -2px 0 var(--clay); }
.rs-list li.rs-form-li { display: block; }
.rs-form { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: var(--paper-2); }
.rs-f2 { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; } .rs-f2 > * { min-width: 0; }
.rs-form .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .rs-del { margin-left: auto; color: var(--clay-text); }
.rs-add .row { grid-template-columns: minmax(0, 1fr) 80px auto; }
.rs-more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; } .rs-more > summary { cursor: pointer; font-size: .9rem; color: var(--ink-2); min-height: 40px; display: flex; align-items: center; }
.rs-more-in { display: grid; gap: 10px; max-width: 260px; padding-top: 6px; }
.rs-card h2 + .do-check, .rs-card h2 + .do-list, .rs-card h2 + p { margin-top: 4px; }
.rs-card .do-add + .fineprint, .rs-card .do-check + .do-add { margin-top: 8px; }
.rs-card aside h2, aside.rs-card h2:not(:first-child) { margin-top: 20px; }
@media (max-width: 599px) {
  .rs-edit li.rs-block { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .rs-edit li.rs-block time { grid-column: 1 / -1; font-size: 1rem; }
  .rs-grip { display: none; }
  .shape-f, .it-f { grid-template-columns: minmax(0, 1fr); }
  .pay-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pay-form > div:first-child { grid-column: 1 / -1; } .pay-form .btn { grid-column: 1 / -1; }
  .budget-summary.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-item label { flex: 1 1 100%; } .it-meta { max-width: calc(100% - 30px); margin: -4px 0 0 30px; }
}

.do-check, .do-list, .do-next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.do-check li { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding-left: 12px; min-height: 52px; }
.do-check li.done { background: var(--sage-bg); border-color: transparent; } .do-check li.done span { color: var(--ink-3); text-decoration: line-through; }
.do-check label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 0; cursor: pointer; font: 400 .95rem var(--font-body); color: var(--text); }
.do-check input { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--sage); }
.do-check .x, .do-list .x { flex: none; width: 44px; min-height: 44px; border: 0; background: none; color: var(--ink-3); font-size: 1.2rem; cursor: pointer; border-radius: 12px; }
.do-list li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 8px 6px 8px 14px; min-height: 56px; }
.do-list li > span { flex: 1; min-width: 0; } .do-list b { display: block; font-weight: 600; font-size: .95rem; } .do-list small { display: block; color: var(--ink-3); font-size: .84rem; overflow-wrap: anywhere; }
.do-list .btn .ic { width: 16px; height: 16px; }
.do-add .row { grid-template-columns: minmax(0, 1fr) auto; }
#contactForm .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.do-page { display: grid; gap: 16px; padding-top: 18px; padding-bottom: 150px; max-width: 640px; }
.do-page > * { min-width: 0; }
.do-top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.do-clock { font: 400 1.3rem var(--serif); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.do-now { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 22px 20px 20px; display: grid; gap: 6px; box-shadow: 0 24px 50px -44px color-mix(in srgb, var(--ink) 80%, transparent); }
.do-now > small { font: 600 .72rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--clay-text); }
.do-now h1 { font: 400 clamp(2rem, 8vw, 2.8rem)/1.05 var(--serif); }
.do-who { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-weight: 600; } .do-who .ic { width: 18px; height: 18px; color: var(--ink-3); }
.do-note { margin: 0; color: var(--ink-2); }
.do-timer { font: 300 clamp(3.4rem, 18vw, 5rem)/1 var(--serif); font-variant-numeric: tabular-nums; margin-top: 10px; }
.do-timer small { font: 500 .9rem var(--font-body); color: var(--ink-3); margin-left: 8px; letter-spacing: 0; }
.do-timer .over { color: var(--clay-text); }
.do-bar { height: 8px; border-radius: 99px; background: var(--paper-2); overflow: hidden; } .do-bar i { display: block; height: 100%; width: 0; background: var(--sage); transition: width 1s linear; }
.do-timer.is-over + .do-bar i { background: var(--clay); }
.do-now.done { text-align: left; } .do-now .row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.do-sec { display: grid; gap: 10px; } .do-sec h2 { font: 400 1.35rem var(--serif); }
.do-fold { border-top: 1px solid var(--line); padding-top: 4px; }
.do-fold > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 52px; padding: 10px 0; cursor: pointer; list-style: none; }
.do-fold > summary::-webkit-details-marker { display: none; }
.do-fold > summary h2::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 10px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg) translateY(-4px); }
.do-fold[open] > summary h2::after { transform: rotate(-135deg); }
.do-next-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.do-next-list time { font: 400 1.05rem var(--serif); color: var(--clay-text); } .do-next-list b { display: block; font-weight: 600; } .do-next-list small { color: var(--ink-3); font-size: .84rem; }
.do-game { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); } .do-game p { margin: 4px 0 0; font-size: .92rem; color: var(--ink-2); }
.do-foot { text-align: center; font-size: .9rem; color: var(--ink-3); }
.do-acts { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: grid; grid-template-columns: 64px 64px minmax(0, 1fr); gap: 8px; max-width: 616px; margin: 0 auto;
  padding: 8px; border-radius: 22px; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--shadow); }
.do-acts.one { grid-template-columns: minmax(0, 1fr); }
.do-acts .btn { min-height: 64px; padding: 0 16px; font-size: 1.05rem; }
.do-acts .do-sq { padding: 0; } .do-acts .do-sq .ic { width: 22px; height: 22px; }
.do-next span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.do-acts .btn .ic { width: 20px; height: 20px; }
:root[data-view="day-of"] .foot { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
:root[data-view="day-of"] .toast { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
@media print {
  .no-print, .do-empty, .rs-acts, .rs-add, .rs-more, .rs-hint, .rs-pen, .do-add, .do-check .x, .do-list .x, .do-list .btn, #contactForm, .rs-card .fineprint { display: none !important; }
  .rs-edit li.rs-block { grid-template-columns: 92px minmax(0, 1fr); }
  .do-check li, .do-list li { border: 0; min-height: 0; padding: 2px 0; background: none; }
  .do-acts, .do-top { display: none !important; }
}
=======

/* ================================================================== sweep-app (Sep 28): several parties (A2), the per-child
   record (MR3), the private party link (IR50, Q12), and helper links (P1). Gen 2 tokens only; works light and dark. */
.cv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.cv-top .eyebrow { min-width: 0; }
.cv-parties { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 .82rem/1 var(--font-body); cursor: pointer; white-space: nowrap; max-width: 100%; }
.cv-parties:hover { border-color: var(--ink-3); }
.cv-parties .ic { width: 16px; height: 16px; color: var(--ink-2); }
.cv-parties b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .72rem; }
@media (pointer: coarse) { .cv-parties { min-height: 44px; } }
.pty-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pty { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.pty.on { background: var(--paper-2); }
.pty-ph { width: 52px; height: 52px; border-radius: 12px; background: var(--paper-2) center / cover no-repeat; }
.pty-t { min-width: 0; display: grid; gap: 2px; }
.pty-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pty-t small { color: var(--ink-3); font-size: .8rem; overflow-wrap: anywhere; }
.pty-now { font: 600 .72rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--clay-text); padding: 0 8px; }
.pty-sub { font: 600 .72rem/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 -4px; }
.kid-rec { display: grid; gap: 10px; }
.kid-h { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.kid-h h3 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.dash-dlg .dm-foot .fineprint { margin: 0; flex: 1 1 200px; }
.pl-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 16px 18px; margin-bottom: 22px; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--line); }
.pl-txt { display: grid; gap: 2px; min-width: 0; } .pl-txt b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; } .pl-txt span { color: var(--ink-2); font-size: .92rem; }
.pl-form { display: flex; gap: 8px; min-width: 0; grid-column: 1 / -1; }
.pl-form input { flex: 1 1 auto; min-width: 0; width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--card); color: var(--text); }
.pl-card .hint { grid-column: 1 / -1; margin: -4px 0 0; min-height: 0; }
.pl-card .hint:empty { display: none; }
.pl-later { grid-column: 2; grid-row: 1; justify-self: end; font-size: .88rem; min-height: 40px; }
.pl-tool { display: grid; gap: 8px; } .pl-tool .muted { font-size: .88rem; } .pl-tool .hint { margin: 0; }
.open-page { max-width: 640px; margin: 0 auto; padding-top: 72px; padding-bottom: 72px; display: grid; gap: 14px; }
.open-page .row { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-in { max-width: 680px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .hp-in > * { min-width: 0; }
.hp-in > h1 { font-size: clamp(2.1rem, 6vw, 3rem); }
.hp-in > .lead { margin: 0; }
.hp-when { gap: 8px; }
.hp-prog { display: grid; gap: 8px; font-size: .95rem; color: var(--ink-2); }
.hp-bar { display: block; height: 8px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.hp-bar i { display: block; height: 100%; background: var(--sage); border-radius: 999px; transition: width .3s ease; }
.hp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.hp-cat.done { background: var(--sage-bg); border-color: transparent; }
.hp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hp-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.hp-item.on { background: var(--sage-bg); border-color: transparent; }
.hp-item input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--sage); }
.hp-item label { display: grid; gap: 2px; min-width: 0; cursor: pointer; flex: 1; } .hp-item label b { font-weight: 600; } .hp-item small { color: var(--ink-3); font-size: .82rem; }
.hp-item.on label b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--sage) 60%, transparent); }
.hp-ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sage); min-height: 40px; }
.hp-cat .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
#addMember .row { display: flex; gap: 8px; align-items: center; } #addMember input { flex: 1 1 120px; } /* the helper name field had collapsed to a sliver */
@media (max-width: 560px) { .pl-card { grid-template-columns: minmax(0, 1fr); } .pl-later { grid-column: 1; grid-row: auto; justify-self: start; } .pty { grid-template-columns: 44px minmax(0, 1fr); } .pty-ph { width: 44px; height: 44px; } .pty > .btn, .pty > .pty-now { grid-column: 2; justify-self: start; } }
/* ---- growth sweep (Sep 28): example party, invite success, report a problem, survey, vendors */
.hero-tag { margin: 14px 0 0; font-family: var(--serif); font-variation-settings: "opsz" 96, "SOFT" 30; font-weight: 400; font-size: clamp(1.02rem, 1.7vw, 1.3rem); line-height: 1.25; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45); max-width: 40ch; }
.hero-tag em { font-style: italic; }
.hx h1.hx-h1 { font-size: clamp(2.6rem, 5.4vw, 4.75rem); }
.hx h1.hx-h1 span { white-space: nowrap; }
.hero-lede { font-style: italic; margin: 16px 0 0; font-family: var(--serif); font-variation-settings: "opsz" 96, "SOFT" 30; font-weight: 400; font-size: clamp(1.6rem, 3.3vw, 2.4rem); line-height: 1.2; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45); max-width: none; } /* v51: bigger (was clamp(1.2rem, 2.4vw, 1.75rem)) */
.hero-demo { margin: 14px 0 0; } .hero-demo a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; font-weight: 600; text-underline-offset: 4px; }
.hero-demo .ic { width: 20px; height: 20px; }
.demo-bar { background: var(--ink); color: var(--paper); }
.demo-in { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.demo-in .ic { width: 22px; height: 22px; flex: none; }
.demo-in p { margin: 0; flex: 1 1 260px; min-width: 0; font-size: .95rem; } .demo-in p span { opacity: .85; }
.demo-in .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (min-width: 900px) { .demo-in { padding: 12px 40px; } }
.lay-cover > .succ { min-width: 0; }
@media (min-width: 900px) { .lay-cover.has-succ { grid-template-rows: auto auto 1fr; } .lay-cover.has-succ > .cv-cover { grid-row: 1 / span 3; } .lay-cover.has-succ > .succ { grid-column: 2; grid-row: 2; } .lay-cover.has-succ > .cv-story { grid-row: 3; } }
@media (max-width: 899px) { .lay-cover > .succ { order: 0; } }
.succ { background: var(--card); border: 1px solid color-mix(in srgb, var(--sage) 45%, var(--line)); border-radius: 22px; padding: clamp(18px, 3vw, 26px); display: grid; gap: 16px; box-shadow: 0 30px 60px -48px rgba(24,21,18,.6); }
.succ-head { display: grid; gap: 4px; } .succ-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--sage); margin: 0; } .succ-head .ic { width: 16px; height: 16px; }
.succ-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.succ-grid { display: grid; gap: 18px; } .succ-grid > * { min-width: 0; }
@media (min-width: 640px) { .succ-grid { grid-template-columns: minmax(0, 1fr) 170px; align-items: start; } }
.succ-msg { display: grid; gap: 8px; } .succ-msg label { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.succ-msg textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: .92rem; line-height: 1.5; background: var(--paper-2); color: var(--text); resize: vertical; }
.succ-btns { display: flex; flex-wrap: wrap; gap: 8px; } .succ-btns .btn { flex: 1 1 auto; } .succ-btns .btn:first-child { flex: 1 1 100%; }
.succ-qr { margin: 0; display: grid; gap: 6px; justify-items: center; text-align: center; }
.succ-qr .qr-box { width: 150px; height: 150px; min-height: 0; padding: 0; box-sizing: border-box; display: grid; place-items: center; background: #fff; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.succ-qr .qr-box img { width: 150px; height: 150px; } .succ-qr .qr-box .muted { font-size: .78rem; padding: 8px; }
.succ-qr figcaption { font-size: .8rem; color: var(--ink-3); } .succ-qr figcaption a { color: var(--ink-2); font-weight: 600; }
.succ-keep { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); } .succ-keep p { margin: 0; font-size: .92rem; color: var(--ink-2); } .succ-keep .hint:empty { display: none; }
.succ-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .succ-foot .muted { font-size: .85rem; }
.rp-link, .rp-done { text-align: center; margin: 10px 0 0; font-size: .88rem; } .rp-link .link-btn { color: var(--ink-3); min-height: 44px; }
.rp-done { display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--sage); } .rp-done .ic { width: 16px; height: 16px; }
.rp-form { max-width: 520px; margin: 14px auto 0; display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.rp-form label { font-weight: 600; font-size: .92rem; } .rp-form textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--card); color: var(--text); }
.rp-form .row { display: flex; flex-wrap: wrap; gap: 8px; } .rp-form .fineprint { margin: 0; }
.survey { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--line); margin: 14px 0; }
.sv-q { margin: 0; font-family: var(--serif); font-size: 1.25rem; }
.sv-opts { display: flex; flex-wrap: wrap; gap: 8px; } .sv-opts .btn { min-width: 88px; }
.sv-thanks { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--sage); font-weight: 600; } .sv-thanks .ic { width: 18px; height: 18px; flex: none; }
.sv-form { display: grid; gap: 6px; } .sv-form label { font-size: .9rem; font-weight: 600; } .sv-form .row { display: flex; gap: 8px; } .sv-form input { flex: 1 1 auto; min-width: 0; }
.survey .fineprint { margin: 0; }
.natl { display: grid; gap: 10px; } .natl h2, .rec h2 { font-size: clamp(1.5rem, 3vw, 2rem); } .natl > .muted, .rec > .muted { margin: 0; max-width: 62ch; }
.natl-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 6px; }
.natl-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.natl-card h3 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; } .natl-card h3 .ic { width: 20px; height: 20px; color: var(--clay-text); flex: none; }
.natl-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* MR51: the compact national list */
.natl-list { margin: 4px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.natl-list > div { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 4px 14px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.natl-list dt { display: flex; align-items: center; gap: 8px; font-weight: 600; } .natl-list dt .ic { width: 18px; height: 18px; color: var(--clay-text); flex: none; }
.natl-list dd { margin: 0; color: var(--ink-3); } .natl-list dd a { font-weight: 600; color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 520px) { .natl-list > div { grid-template-columns: 1fr; } }
.natl-card li { display: grid; gap: 2px; } .natl-card li a { font-weight: 600; color: var(--ink); text-underline-offset: 3px; } .natl-card li > span:last-child { color: var(--ink-2); font-size: .88rem; }
.tag.aff { font-size: .7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3); justify-self: start; }
.rec { display: grid; gap: 10px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 3vw, 28px); }
.rec-form { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } .rec-form > * { min-width: 0; }
@media (min-width: 700px) { .rec-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rec-form .wide, .rec-form .hint, .rec-form .row, .rec-form .fineprint { grid-column: 1 / -1; } }
.rec-form .fld { display: grid; gap: 6px; } .rec-form label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.rec-form input, .rec-form select, .rec-form textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--card); color: var(--text); min-height: 44px; }
.rec-form .hint:empty { display: none; } .rec-form .fineprint, .rec-form .hint { margin: 0; }

/* ======================================================================
   v25 home hero: the title and subtext sit a little above the middle of the photo, just above the Happy Birthday banner,
   25% larger than v24; the party types follow the subtext; the sample invitation (380 px, as before v24) sits to the
   right, its top level with the title; See a finished plan and Back to my plan stay at the bottom. */
.cs-hero.hx { align-items: stretch; }
.hx .cs-hero-in { min-height: 100vh; min-height: 100svh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-content: stretch; padding: 0 20px 30px; gap: 0; align-items: start; }
.hx .hx-top { grid-row: 1; padding-top: clamp(70px, 9vh, 104px); } /* v51: higher (was clamp(92px, 13vh, 130px)) */
.hx .hx-bottom { grid-row: 3; align-self: end; }
.hx .hero-card { display: none; }
.hx h1 { max-width: none; font-size: clamp(2.875rem, 6.5vw, 5.75rem); line-height: 1.02; margin-top: 8px; text-wrap: balance; text-shadow: 0 2px 22px rgba(0,0,0,.28); }
.hx h1 em { display: block; }
.hx .lede { font-size: clamp(1.25rem, 2vw, 1.475rem); margin-top: 14px; max-width: 64ch; text-wrap: balance; }
.cs-hero.hx::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 0% 45%, rgba(0,0,0,.34), transparent 72%), radial-gradient(ellipse 60% 40% at 0% 100%, rgba(0,0,0,.36), transparent 72%); } /* soft shade behind the text only, so the photo stays bright */
.hx .hero-q { margin-top: 26px; }
.plinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.hx .plinks { margin-top: 28px; } /* v51: no label above the party types any more */
@media (min-width: 900px) { .hx .plinks { margin-top: 56px; } } /* v76 (Anu, Oct 13): more space under the subhead on computer screens: double on short windows, so the buttons stay off the photo's banner */
@media (min-width: 900px) and (min-height: 800px) { .hx .plinks { margin-top: 84px; } } /* v76: triple where the window is 800 px tall or more */
/* v31: frosted pill buttons so the party types read as buttons over the photo; Kids' birthday (the one we market first, MR2) is solid */
.plink { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 999px; cursor: pointer; color: #fff;
  background: rgba(24,20,16,.34); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border: 1.5px solid rgba(255,255,255,.6); /* v33: darker, for contrast over bright photos */
  font: 600 clamp(.95rem, 1.15vw, 1.05rem)/1.15 var(--font-body); box-shadow: 0 8px 20px -12px rgba(0,0,0,.7); text-shadow: 0 1px 2px rgba(0,0,0,.35); transition: background-color .2s ease, transform .2s ease; }
.plink:hover, .plink:focus-visible { background: rgba(24,20,16,.52); transform: translateY(-2px); }
.plink.main { background: #fff; color: #181512; border-color: #fff; text-shadow: none; }
.plink.main:hover, .plink.main:focus-visible { background: #f1ece3; }
.plink .arr { font-weight: 500; }
/* v33: occasions in season get a small sparkle; More occasions opens a frosted list with each one's next date */
.plink.now .ic { width: 15px; height: 15px; margin-left: -4px; }
.plink.more { border-style: dashed; }
.cc .chip.mood:focus-visible, .cc .cc-up:focus-within { outline: 3px solid #fff; outline-offset: 2px; }
.occ-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 12px; max-width: 760px; }
.occ { appearance: none; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 12px 8px 8px; border-radius: 16px; cursor: pointer; color: #fff;
  background: rgba(20,16,12,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.35); font: inherit; }
.occ:hover, .occ:focus-visible { background: rgba(20,16,12,.62); }
.occ:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.occ-ph { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: #2a2320 center / cover no-repeat; }
.occ b { display: block; font-weight: 600; font-size: .95rem; }
.occ small { display: block; font-size: .78rem; opacity: .85; line-height: 1.3; }
/* v33: My plan sits on the party's photo, washed out so the plan stays easy to read */
#view { position: relative; }
.pl-bg { position: absolute; left: 0; right: 0; top: 0; height: 620px; z-index: 0; pointer-events: none; background: #2a2320 center 35% / cover no-repeat; }
.pl-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) var(--wash, 88%), transparent) 0%, color-mix(in srgb, var(--bg) var(--wash2, 93%), transparent) 50%, var(--bg) 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pl-bg { --wash: 70%; --wash2: 84%; } }
:root[data-theme="dark"] .pl-bg { --wash: 70%; --wash2: 84%; }
.pl-bg + .dash { position: relative; z-index: 1; }
.pl-bg + .dash .cv-head .eyebrow { color: var(--muted); }
@media print { .pl-bg { display: none; } }
.plink:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .plink { transition: none; } .plink:hover, .plink:focus-visible { transform: none; } }
@media (min-width: 900px) {
  .hx .cs-hero-in { max-width: 1320px; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr auto; column-gap: 28px; padding: 0 40px 44px; }
  .hx .hx-top { grid-column: 1; padding-top: clamp(84px, 11vh, 130px); } /* v51: higher (was clamp(100px, 16vh, 170px)) */
  .hx .hx-bottom { grid-column: 1; }
  .hx .hero-card { display: block; grid-column: 2; grid-row: 1; align-self: start; justify-self: end; width: 380px; transform: rotate(2.5deg); margin: calc(clamp(84px, 11vh, 130px) + 22px) 0 0; }
  :root[data-view="home"] .nav-in { max-width: 1320px; padding-left: 40px; padding-right: 40px; } /* the nav lines up with the wider home hero */
}
@media (max-width: 420px) {
  .hx .hero-q span { display: block; margin: 4px 0 0; }
}
/* v98 (Anu, Oct 25): the home page below the hero is the bake-off's arm B, "Your party, on film" (prototype/ui-prototypes/home-2026-10/B-opus/):
   full-width bands, each with its own colors in light and dark mode, and one object from a 90s and 2000s camera bag each:
   a strip of film (the steps), a holographic sticker (the plan), a field of real invitations (the wow), a receipt (shopping),
   a photo-booth strip (local pros), disposable-camera prints (the place), instant photos (four parties). Classes start with hb-. */
.hb { --hb-bg: #FBF8F3; --hb-fg: #181512; --hb-fg2: #4a443d; --hb-acc: #B5480E; --hb-line: #e6dfd4;
  --hb-grain-d: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .96  0 0 0 0 .9  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url%28%23n%29'/></svg>");
  --hb-grain-l: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url%28%23n%29'/></svg>");
  position: relative; isolation: isolate; overflow-x: clip; background: var(--hb-bg); color: var(--hb-fg); border: 0; }
.hb-paper { --hb-bg: #FBF8F3; --hb-fg: #181512; --hb-fg2: #4a443d; --hb-acc: #B5480E; --hb-line: #e6dfd4; }
.hb-cream { --hb-bg: #F2E9DA; --hb-fg: #181512; --hb-fg2: #463f37; --hb-acc: #A9420D; --hb-line: #ddd0bb; }
.hb-ink { --hb-bg: #12100E; --hb-fg: #F6F1EA; --hb-fg2: #C9C1B5; --hb-acc: #EE7A44; --hb-line: #2c2723; }
.hb-sun { --hb-bg: #F8D2B2; --hb-fg: #181512; --hb-fg2: #3f362e; --hb-acc: #9E3C0A; --hb-line: rgba(24,21,18,.14); background: linear-gradient(180deg, #FCE9D6 0%, #F9D3B2 46%, #F3B48E 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hb-paper { --hb-bg: #191613; --hb-fg: #F3EEE6; --hb-fg2: #C9C1B5; --hb-acc: #EE7A44; --hb-line: #35302a; }
  :root:not([data-theme="light"]) .hb-cream { --hb-bg: #221C17; --hb-fg: #F3EEE6; --hb-fg2: #CFC6B8; --hb-acc: #EE7A44; --hb-line: #3a332b; }
  :root:not([data-theme="light"]) .hb-ink { --hb-bg: #0B0A09; --hb-line: #26211d; }
  :root:not([data-theme="light"]) .hb-sun { --hb-fg: #F6EEE4; --hb-fg2: #DCCDBD; --hb-acc: #F59A62; --hb-line: rgba(255,255,255,.14); background: linear-gradient(180deg, #1c1411 0%, #2e1b13 50%, #4a2516 100%); }
}
:root[data-theme="dark"] .hb-paper { --hb-bg: #191613; --hb-fg: #F3EEE6; --hb-fg2: #C9C1B5; --hb-acc: #EE7A44; --hb-line: #35302a; }
:root[data-theme="dark"] .hb-cream { --hb-bg: #221C17; --hb-fg: #F3EEE6; --hb-fg2: #CFC6B8; --hb-acc: #EE7A44; --hb-line: #3a332b; }
:root[data-theme="dark"] .hb-ink { --hb-bg: #0B0A09; --hb-line: #26211d; }
:root[data-theme="dark"] .hb-sun { --hb-fg: #F6EEE4; --hb-fg2: #DCCDBD; --hb-acc: #F59A62; --hb-line: rgba(255,255,255,.14); background: linear-gradient(180deg, #1c1411 0%, #2e1b13 50%, #4a2516 100%); }
.hb-grain::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--hb-grain-l); opacity: .16; }
.hb-ink.hb-grain::after { background-image: var(--hb-grain-d); opacity: .07; }
.hb :focus-visible { outline: 3px solid var(--hb-acc); outline-offset: 3px; }
.hb-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 900px) { .hb-wrap { max-width: 1260px; padding: 0 40px; } }
.hb .eyebrow { color: var(--hb-fg2); }
.hb-h2 { font: 400 clamp(2.15rem, 4.3vw, 3.7rem)/1.04 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 30; letter-spacing: -.02em; margin: 12px 0 16px; text-wrap: balance; color: var(--hb-fg); }
.hb-h2 em, .cs-hub.hb h2 em { color: var(--hb-acc); }
.hb-nw { white-space: nowrap; }
@media (max-width: 560px) { #hb-pros-h { font-size: min(2.15rem, 8.7vw); } #hb-pros-h em { display: block; } }
.hb-lede { color: var(--hb-fg2); font-size: clamp(1.02rem, 1.2vw, 1.12rem); max-width: 44ch; margin: 0; }
.hb-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; min-height: 44px; font-weight: 600; color: var(--hb-fg); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--hb-fg) 55%, transparent); }
.hb-link .ic { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform .2s ease; }
.hb-link:hover { text-decoration-color: var(--hb-acc); }
.hb-link:hover .ic { transform: translateX(3px) rotate(-90deg); }
.hb-row { display: grid; gap: 34px; align-items: center; padding-top: clamp(60px, 7.5vw, 104px); padding-bottom: clamp(60px, 7.5vw, 104px); }
.hb-row > * { min-width: 0; }
@media (min-width: 900px) {
  .hb-row { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; }
  .hb-row.flip > .hb-media { order: 2; }
  .hb-row.flip { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}
.hb-media img { display: block; width: 100%; height: auto; }

/* 1. the steps: a strip of film (sprockets top and bottom; down the sides on phones) */
.hb-film { position: relative; padding: 46px 0; }
.hb-film::before, .hb-film::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='14'><rect x='8' y='1' width='14' height='12' rx='3' fill='%23F6F1EA' fill-opacity='.13'/></svg>") repeat-x 0 0 / 30px 14px; }
.hb-film::before { top: 12px; } .hb-film::after { bottom: 12px; }
.hb-edge { position: absolute; left: 0; right: 0; display: flex; justify-content: space-around; font: 600 .62rem/1 var(--font-body); letter-spacing: .32em; text-transform: uppercase; color: rgba(238,122,68,.55); pointer-events: none; white-space: nowrap; overflow: hidden; }
.hb-edge.top { top: 30px; } .hb-edge.bot { bottom: 30px; }
.hb-frames { display: grid; gap: 14px; padding: 18px 0; }
.hb-frame { position: relative; overflow: hidden; padding: 30px 28px 32px; border-radius: 8px; background: #1d1916; border: 1px solid rgba(255,255,255,.06); }
.hb-frame.leak::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 70% at -6% 0%, rgba(238,122,68,.38), rgba(221,95,40,.12) 45%, transparent 70%); }
.hb-frame > * { position: relative; }
.hb-frame .n { display: block; font: 300 3.6rem/1 var(--serif); color: #EE7A44; font-variation-settings: "opsz" 144; }
.hb-frame h2 { font: 400 1.7rem/1.15 var(--serif); letter-spacing: -.02em; margin: 12px 0 8px; color: #F6F1EA; }
.hb-frame p { color: #C9C1B5; font-size: 1rem; max-width: 36ch; margin: 0; }
@media (min-width: 900px) { .hb-frames { grid-template-columns: repeat(3, 1fr); gap: 18px; } .hb-frame { padding: 34px 32px 38px; } }
@media (max-width: 899px) {
  .hb-film { padding: 34px 0; }
  .hb-film::before, .hb-film::after { top: 0; bottom: 0; height: auto; width: 14px; left: 6px; right: auto;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='30'><rect x='1' y='8' width='12' height='14' rx='3' fill='%23F6F1EA' fill-opacity='.13'/></svg>") repeat-y 0 0 / 14px 30px; }
  .hb-film::after { left: auto; right: 6px; }
  .hb-edge { display: none; }
  .hb-steps .hb-wrap { padding: 0 28px; }
  .hb-frames { gap: 12px; padding: 0; }
  .hb-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; padding: 22px 20px 24px; }
  .hb-frame .n { grid-row: 1 / span 2; font-size: 2.9rem; margin-top: 2px; }
  .hb-frame h2 { margin: 0 0 6px; font-size: 1.5rem; }
}

/* 2. your party plan: the real screens, the weather lifting out, and the holographic "Free for hosts" sticker */
.hb-planpic { position: relative; max-width: 600px; margin: 0 auto; width: 100%; }
.hb-planpic img { -webkit-mask-image: linear-gradient(#000 84%, transparent 100%); mask-image: linear-gradient(#000 84%, transparent 100%); } /* the phones run off the picture: fade them out */
.hb-stk { position: absolute; z-index: 2; right: 1%; top: -3%; width: clamp(92px, 11vw, 128px); aspect-ratio: 1; border-radius: 50%; color: #241833; border: 4px solid #fff; overflow: hidden;
  background: conic-gradient(from 30deg, #ffd0e6, #d7c8ff, #b6e9ff, #c6fadf, #fff0b4, #ffd0e6); box-shadow: 0 0 0 1px rgba(24,21,18,.1), 0 14px 22px -10px rgba(24,21,18,.5);
  display: grid; place-content: center; text-align: center; transform: rotate(10deg); }
.hb-stk::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,.35) 70%, rgba(255,255,255,0) 100%); }
.hb-stk::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.8) 48%, transparent 60%); transform: translateX(-70%); transition: transform 1.1s ease; }
.hb-planpic:hover .hb-stk::after, .hb-stk.shine::after { transform: translateX(70%); }
.hb-stk b { position: relative; font: italic 700 clamp(1.6rem, 2.5vw, 2.1rem)/.9 var(--serif); font-variation-settings: "opsz" 72, "SOFT" 40; letter-spacing: -.02em; }
.hb-stk span { position: relative; margin-top: 4px; font: 700 .6rem/1.1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.hb-stk svg { position: absolute; width: 18px; height: 18px; fill: #fff; right: 15%; top: 13%; filter: drop-shadow(0 0 3px rgba(120,90,200,.6)); }

/* 3. the invitation field: real invitations in three depths around one message */
.hb-field { height: clamp(720px, 100svh, 900px); overflow: hidden; background: #0E0C0B; color: #F6F1EA; }
@media (min-width: 700px) { .hb-field { height: clamp(600px, 100svh, 980px); } }
:root[data-theme="dark"] .hb-field { background: #080706; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hb-field { background: #080706; } }
.hb-field::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 45% at 0% 0%, rgba(221,95,40,.30), transparent 70%), radial-gradient(45% 40% at 100% 100%, rgba(238,122,68,.20), transparent 70%); }
.hb-field::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--hb-grain-d); opacity: .06; }
.hb-fld { position: absolute; inset: 0; }
.hb-lay { position: absolute; inset: 0; will-change: transform; }
.hb-fc { position: absolute; left: 0; top: 0; display: block; transform: translate3d(var(--dx, 0), var(--dy, 0), 0) scale(.55); opacity: 0; transition: transform 1.5s cubic-bezier(.16, 1, .3, 1) var(--dl, 0ms), opacity .9s ease var(--dl, 0ms); }
.hb-field.in .hb-fc { transform: none; opacity: 1; }
.hb-fc-f { display: block; animation: hb-drift var(--t, 12s) ease-in-out var(--d0, 0s) infinite alternate; animation-play-state: paused; }
.hb-field.on .hb-fc-f { animation-play-state: running; }
@keyframes hb-drift { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(var(--fx, 6px), var(--fy, -14px), 0) rotate(var(--fr, 1deg)); } }
.hb-fc-c { position: relative; display: block; border-radius: 10px; overflow: hidden; background: #2a2522; transform: rotate(var(--r, 0deg)); transition: transform .45s cubic-bezier(.2, .9, .3, 1.2); aspect-ratio: 4 / 5; }
.hb-fc-c img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-fc-c::after { content: ""; position: absolute; inset: 0; background: #0E0C0B; opacity: var(--shade, 0); transition: opacity .35s ease; pointer-events: none; }
.hb-lay[data-d="2"] .hb-fc-c { box-shadow: 0 30px 50px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06); border-radius: 12px; }
.hb-lay[data-d="1"] .hb-fc-c { box-shadow: 0 20px 34px -18px rgba(0,0,0,.8); }
.hb-lay[data-d="1"] { --shade: .28; } .hb-lay[data-d="0"] { --shade: .55; }
.hb-fc:hover { z-index: 5; }
.hb-fc:hover .hb-fc-c { transform: rotate(0deg) translateY(-10px) scale(1.07); }
.hb-fc:hover .hb-fc-c::after { opacity: 0; }
.hb-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(60% 55% at 50% 48%, rgba(255,250,240,.95), rgba(255,240,220,.35) 45%, rgba(255,240,220,0) 75%); }
.hb-field.in .hb-flash { animation: hb-flash 1.1s ease-out 1; }
@keyframes hb-flash { 0% { opacity: 0; } 7% { opacity: .5; } 100% { opacity: 0; } }
.hb-msg { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 92%; text-align: center; pointer-events: none; }
.hb-msg::before { content: ""; position: absolute; z-index: -1; inset: -18% -14%; background: radial-gradient(closest-side, rgba(14,12,11,.92), rgba(14,12,11,.7) 55%, rgba(14,12,11,0)); }
.hb-msg a { pointer-events: auto; }
.hb-field .eyebrow { color: #D6CEC2; }
.hb-msg h2 { margin: 16px auto 4px; font: 300 clamp(2.7rem, 5.6vw, 5.8rem)/1 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 30; letter-spacing: -.025em; color: #F6F1EA; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.hb-msg h2 > span { display: block; }
.hb-msg h2 em { color: #EE7A44; font-weight: 400; }
.hb-msg .hb-link { --hb-fg: #F6F1EA; --hb-acc: #EE7A44; font-size: 1.08rem; margin-top: 18px; }

/* 4. shopping: a receipt in front of the real Shop and book step */
.hb-shoppic { max-width: 600px; margin: 0 auto; width: 100%; }

/* 5. local pros: a photo-booth strip */
.hb-pros::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 55% at 26% 50%, rgba(255,244,228,.12), transparent 70%), radial-gradient(50% 50% at 100% 0%, rgba(221,95,40,.16), transparent 70%); }
.hb-boothw { display: grid; place-items: center; }
.hb-booth { --fw: 236px; --fh: 184px; position: relative; display: grid; gap: 10px; padding: 14px 14px 0; background: #F7F2EA var(--hb-grain-l); border-radius: 3px; transform: rotate(3deg); box-shadow: 0 40px 70px -30px rgba(0,0,0,.9), 0 2px 0 rgba(255,255,255,.06); }
.hb-booth figure { position: relative; margin: 0; width: var(--fw); height: var(--fh); overflow: hidden; background: #2a2522; }
.hb-booth img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); }
.hb-booth figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.28)), linear-gradient(transparent 52%, rgba(0,0,0,.55)); }
.hb-booth figcaption { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 8px; color: #fff; font: 600 .82rem/1.25 var(--font-body); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.hb-booth .bf { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px 12px; font: 700 .58rem/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: #6f675d; }
.hb-booth .bf svg { width: 13px; height: 14px; }
.hb-booth .bf .ck { stroke: #B5480E; } .hb-booth .bf .ckf { fill: #B5480E; }
@media (max-width: 899px) {
  .hb-booth { --fw: calc((min(100vw, 520px) - 40px - 20px - 16px - 8px) / 3); --fh: calc(var(--fw) * 1.25); grid-template-columns: repeat(3, var(--fw)); transform: rotate(-2deg); padding: 10px 10px 0; gap: 8px; }
  .hb-booth figure { grid-row: 1; }
  .hb-booth .bf { grid-column: 1 / -1; grid-row: 2; }
  .hb-booth figcaption { left: 7px; right: 6px; bottom: 6px; font-size: .74rem; }
}

/* 6. the place: disposable-camera prints with the orange date stamp, on a golden-hour band */
.hb-prints { position: relative; width: min(92%, 560px); margin: 0 auto; aspect-ratio: 1 / .82; }
.hb-print { position: absolute; margin: 0; width: 42%; padding: 8px; background: #FFFDF9; box-shadow: 0 26px 40px -24px rgba(60,24,6,.6), 0 2px 5px rgba(60,24,6,.12); transition: transform .4s cubic-bezier(.2,.9,.3,1.2); }
.hb-print .ph { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #d9c9b5; }
.hb-print img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-print .ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(255,214,170,.18), transparent 40%, rgba(80,30,0,.12)); }
.hb-stamp { position: absolute; z-index: 1; right: 8px; bottom: 7px; font: 600 .78rem/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: .12em; color: #FF8B3D; text-shadow: 0 0 4px rgba(255,120,40,.85), 0 0 1px #ff6a1a; transform: skewX(-6deg); }
.hb-print figcaption { padding: 9px 2px 3px; font: italic 400 1.02rem/1.25 var(--serif); color: #2b2420; }
.hb-print figcaption span { display: block; font: 400 .78rem/1.3 var(--font-body); color: #5a5048; }
.hb-print.p1 { left: 0; top: 8%; transform: rotate(-7deg); z-index: 1; }
.hb-print.p2 { left: 29%; top: 0; width: 46%; transform: rotate(2deg); z-index: 3; }
.hb-print.p3 { right: 0; top: 12%; transform: rotate(8deg); z-index: 2; }
.hb-print:hover { transform: rotate(0deg) translateY(-8px); z-index: 4; }

/* 7. four parties, already dressed: the real sample cards as instant photos, plus the closing start button */
.hb-four { padding: clamp(64px, 9vw, 116px) 0; border-top: 0; }
.hb-four-head { display: grid; gap: 18px; align-items: end; }
@media (min-width: 900px) { .hb-four-head { grid-template-columns: minmax(0, 1fr) auto; } }
.hb-four .hb-h2 { max-width: 16ch; margin-bottom: 10px; }
.hb-cta { display: grid; justify-items: start; gap: 8px; }
@media (min-width: 900px) { .hb-cta { justify-items: end; text-align: right; } }
.hb-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--clay); color: #181512; font: 600 1.02rem var(--font-body); text-decoration: none; box-shadow: 0 14px 24px -14px rgba(181,72,14,.7); transition: transform .2s ease, background-color .2s ease; }
.hb-btn:hover { background: #EE7A44; transform: translateY(-2px); }
.hb-btn .ic { width: 18px; height: 18px; transform: rotate(-90deg); }
.hb-cta small { color: var(--hb-fg2); font-size: .86rem; }
.hb-four .cards { gap: 26px 16px; margin-top: 40px; }
@media (min-width: 900px) { .hb-four .cards { gap: 34px; margin-top: 52px; } }
.hb-four .sample { background: #FFFEFB; padding: 10px 10px 0; border-radius: 3px; color: #2b2420; box-shadow: 0 28px 44px -26px rgba(24,21,18,.5), 0 2px 6px rgba(24,21,18,.1); transform: rotate(-2.2deg); transition: transform .4s cubic-bezier(.2,.9,.3,1.2); }
.hb-four .sample:nth-child(2) { transform: rotate(1.6deg); } .hb-four .sample:nth-child(3) { transform: rotate(-1deg); } .hb-four .sample:nth-child(4) { transform: rotate(2.2deg); }
.hb-four .sample:hover, .hb-four .sample:focus-visible { transform: rotate(0deg) translateY(-10px); }
.hb-four .sample:hover .dshow { transform: none; }
.hb-four .dshow { border-radius: 0; box-shadow: none; background: #e8e0d4; }
.hb-four .sample .cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; padding: 12px 4px 16px; min-height: 52px; color: #6a6058; }
.hb-four .sample .cap span:first-child { font: italic 400 1.18rem/1.1 var(--serif); color: #2b2420; }
.hb-four .sample .cap span:last-child { font: 600 .66rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; text-align: right; }
@media (max-width: 899px) { .hb-four .sample { padding: 7px 7px 0; } .hb-four .sample .cap { flex-direction: column; gap: 3px; padding: 9px 2px 12px; min-height: 0; } .hb-four .sample .cap span:last-child { text-align: left; } .hb-four .sample .cap span:first-child { font-size: 1.05rem; } }
.hb-four .start-links { gap: 4px 26px; }
.hb-four .start-links a { color: var(--hb-fg); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; min-height: 44px; display: inline-flex; align-items: center; }
.hb-four .start-links a:hover { text-decoration-color: var(--hb-acc); }

/* 8. the links section (MR39-03), calm on cream */
.cs-hub.hb { padding: clamp(56px, 7vw, 88px) 0 clamp(60px, 7vw, 92px); border-top: 1px solid var(--hb-line); }
.cs-hub.hb .wrap { max-width: 1260px; }
.cs-hub.hb h2 { color: var(--hb-fg); }
.cs-hub.hb .hub-copy { color: var(--hb-fg2); }
.cs-hub.hb h3 { color: var(--hb-fg2); }
.cs-hub.hb a { color: var(--hb-fg); text-decoration-color: color-mix(in srgb, var(--hb-fg) 30%, transparent); }
.cs-hub.hb a:hover { text-decoration-color: var(--hb-acc); }
@media (pointer: coarse) { .cs-hub.hb ul { gap: 2px; } .cs-hub.hb a { display: inline-flex; align-items: center; min-height: 40px; } }

/* the bold wordmark footer, on the home page only for now (arm C's; Anu loves it) */
.foot-mark { display: none; }
:root[data-view="home"] .foot { position: relative; isolation: isolate; overflow: hidden; background: #0f0c0a; color: #e9e0d2; border-top: 0; padding: 48px 0 0; font-size: .92rem; }
:root[data-view="home"] .foot::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .96  0 0 0 0 .9  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url%28%23n%29'/></svg>"); }
:root[data-view="home"] .foot .wrap { display: block; max-width: 1260px; }
@media (min-width: 900px) { :root[data-view="home"] .foot .wrap { padding: 0 40px; } }
:root[data-view="home"] .foot .foot-line strong { font: 700 1.1rem var(--serif); color: #fff; margin-right: 8px; }
:root[data-view="home"] .foot .foot-line, :root[data-view="home"] .foot .foot-line span, :root[data-view="home"] .foot .foot-social span { color: #cfc5b6; }
:root[data-view="home"] .foot .foot-social { align-items: baseline; } :root[data-view="home"] .foot .foot-social span { font-size: .92rem; padding: 6px 0; }
:root[data-view="home"] .foot .foot-links, :root[data-view="home"] .foot .foot-social { display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 14px 0 0; }
:root[data-view="home"] .foot a, :root[data-view="home"] .foot .foot-links a { color: #e9e0d2; font-size: .92rem; padding: 6px 0; text-underline-offset: 4px; text-decoration-color: rgba(233,224,210,.4); }
:root[data-view="home"] .foot a:hover { color: #fff; text-decoration-color: #EE7A44; }
:root[data-view="home"] .foot :focus-visible { outline-color: #EE7A44; }
:root[data-view="home"] .foot-mark { display: block; margin: 18px 0 0; font: 800 clamp(5.5rem, 22vw, 20rem)/.78 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; letter-spacing: -.045em; color: var(--clay); text-align: center; white-space: nowrap; overflow: hidden; padding-bottom: .02em; user-select: none; transform: translateY(.06em); }
@media (max-width: 700px) { :root[data-view="home"] .foot-mark { font-size: 33vw; } }

@media (prefers-reduced-motion: reduce) {
  .hb-fc { transition: none; transform: none; opacity: 1; }
  .hb-fc-f { animation: none; }
  .hb-fc-c, .hb-print, .hb-four .sample, .hb-link .ic, .hb-btn { transition: none; }
  .hb-field.in .hb-flash { animation: none; }
  .hb-stk::after { transition: none; }
}
/* v27: create screen (three steps, mood arrows, readable age stepper, date and time, kids and adults, the hosts) */
.cc .chip.mood[aria-pressed="true"]::before { display: none; }
.cc .chip.mood[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 8px 24px -10px rgba(0,0,0,.7); }
.cc-mood-wrap { position: relative; min-width: 0; }
.cc-arr { position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -17px; border: 0; border-radius: 50%; background: rgba(24,21,18,.42); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .2s ease; }
.cc-arr:hover { background: rgba(24,21,18,.65); }
.cc-arr:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cc-arr[hidden] { display: none; }
.cc-arr .ic { width: 18px; height: 18px; }
.cc-arr.prev { left: 4px; } .cc-arr.prev .ic { transform: rotate(90deg); }
.cc-arr.next { right: 4px; } .cc-arr.next .ic { transform: rotate(-90deg); }
.cc .stepper { background: rgba(255,255,255,.1); margin-top: 18px; }
.cc .stepper button, .cc .stepper input { color: #fff; }
.cc .stepper small { top: auto; bottom: 100%; margin: 0 0 5px; }
.cc .cc-line { width: 100%; min-height: 46px; border: 0; border-bottom: 1.5px solid rgba(255,255,255,.55); border-radius: 0; background: transparent; padding: 4px 0; color: #fff; font: 400 clamp(1.3rem, 3.6vw, 1.6rem) var(--serif); box-shadow: none; }
.cc .cc-line::placeholder { color: rgba(255,255,255,.55); }
.cc .cc-line:focus { outline: none; border-bottom-color: #fff; }
.cc .cc-when { flex-wrap: nowrap; }
@media (max-width: 480px) {
  .cc .cc-when { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .cc .cc-when .cc-pick { padding: 0 4px; justify-content: center; } .cc .cc-when .cc-pick span { display: none; }
  .cc .cc-when .cc-pick input { width: 100%; max-width: none; padding: 0 8px; }
  .cc .cc-when .cc-pick .cc-dw { display: block; width: 100%; } .cc .cc-when .cc-pick .cc-ph { left: 8px; } /* v89: the date's wrapper is a span too; keep it */
}
.cc .cc-count { gap: 6px; padding: 0 6px; }
.cc .cc-count label { display: inline-flex; align-items: center; gap: 8px; padding-left: 9px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.cc .cc-count input { width: 64px; min-height: 0; height: 38px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; text-align: center; font: 600 .95rem var(--font-body); box-shadow: none; -moz-appearance: textfield; }
.cc .cc-count input::-webkit-outer-spin-button, .cc .cc-count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cc .cc-count input:focus { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.cc .cc-count i { width: 1px; height: 22px; background: rgba(255,255,255,.3); }
.inv .inv-top .inv-k { display: block; max-width: none; }
.inv .inv-host { display: block; margin-top: 5px; font: 500 clamp(9px, 3.1cqw, 12.5px)/1.3 var(--font-body); letter-spacing: .01em; text-transform: none; font-style: normal; opacity: .95; }
.inv .inv-host:empty { display: none; }
.inv.compact .inv-host { display: none; }
.gpv-hb { font: 500 .66rem/1.3 var(--font-body); margin-top: 3px; opacity: .92; }
/* v28: create screen (hosts focus, kid and adult steppers, upload tile), place first after publishing, Send invite pill */
.cc .cc-line:focus, .cc .cc-line:focus-visible { outline: none; box-shadow: none; border: 0; border-bottom: 1.5px solid #fff; background: transparent; }
.cc .cc-count { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cc .cc-count > i { width: 1px; height: 26px; background: rgba(255,255,255,.3); }
.cc .cc-cnt { display: inline-flex; align-items: center; gap: 10px; }
.cc .cc-cnt > span { font: 500 .92rem var(--font-body); color: rgba(255,255,255,.88); }
.cc .cc-cnt .stepper { margin-top: 0; }
.cc .cc-cnt .stepper input { background: transparent; box-shadow: none; }
.cc .cc-cnt .stepper input:focus { box-shadow: none; outline: none; }
.cc .stepper input:focus { box-shadow: none; outline: none; border: 0; }
.cc .cc-more { flex: 0 0 auto; width: 104px; height: 72px; border: 1.5px dashed rgba(255,255,255,.6); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: grid; place-items: center; }
.cc .cc-more .mood-name { position: static; font-size: .78rem; }
.cc .cc-up { flex: 0 0 auto; width: 104px; height: 72px; border: 1.5px dashed rgba(255,255,255,.6); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: grid; place-items: center; }
.cc .cc-up:hover { background: rgba(255,255,255,.16); }
.cc .cc-up:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.cc .cc-up .up-in { position: relative; z-index: 2; display: grid; justify-items: center; gap: 3px; }
.cc .cc-up .up-in .ic { width: 20px; height: 20px; }
.cc .cc-up .up-in .mood-name { position: static; font-size: .74rem; }
.cc .cc-up:has(.mood-img) { border-style: solid; border-color: rgba(255,255,255,.35); }
.cc .cc-up:has(.mood-img) .up-in { align-self: end; justify-self: start; padding: 0 0 7px 10px; }
.cc .cc-up[data-on="true"] { border: 1.5px solid #fff; box-shadow: 0 0 0 2px #fff, 0 8px 24px -10px rgba(0,0,0,.7); }
.cc .cc-up::before { display: none; }
.succ-place .venues { margin-top: 2px; }
.succ-place .succ-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rsvp.r-send { display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rsvp.r-send .ic { width: 14px; height: 14px; }
.cc .cc-up:not(:has(.mood-img))::after { display: none; }
.cc .cc-up, .cc .cc-up .mood-name { text-transform: none; letter-spacing: 0; }
@media (max-width: 480px) {
  .cc .cc-count { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cc .cc-count > i { display: none; }
  .cc .cc-cnt { display: grid; gap: 6px; justify-items: start; }
  .cc .cc-cnt > span { font: 600 .66rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); }
  .cc .cc-cnt .stepper button { width: 38px; }
  .cc .cc-cnt .stepper input { width: 40px; }
}
/* v29: the Shop tab */
.shop-body { display: grid; gap: 22px; padding-bottom: 72px; }
.shop-for { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ink-2); margin: 0; }
.shop-for .stepper b { min-width: 40px; }
.shop-ths { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-th { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 5px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font: 500 .88rem var(--font-body); cursor: pointer; }
.shop-th span { width: 30px; height: 30px; border-radius: 50%; background-size: cover; background-position: center; }
.shop-th:hover { border-color: var(--ink-3); }
.shop-th[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.shop-kit { position: relative; border-radius: 22px; overflow: hidden; background-size: cover; background-position: center; color: #fff; isolation: isolate; }
.shop-kit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15,13,11,.82), rgba(15,13,11,.45) 70%, rgba(15,13,11,.25)); }
.shop-kit-in { padding: clamp(22px, 4vw, 40px); display: grid; gap: 10px; max-width: 640px; }
.shop-kit .eyebrow { color: rgba(255,255,255,.82); margin: 0; }
.shop-kit h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: #fff; }
.shop-kit p { margin: 0; color: rgba(255,255,255,.9); }
.shop-kit-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.shop-kit-links > span { color: rgba(255,255,255,.8); font-size: .9rem; }
.shop-kit .shop-out { background: #fff; color: #181512; border-color: #fff; }
.shop-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.shop-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.shop-art { background: var(--paper-2); height: 128px; display: grid; place-items: center; }
.shop-art span { width: 76px; height: 76px; border-radius: 50%; background: var(--card); display: grid; place-items: center; color: var(--ink); box-shadow: 0 10px 24px -16px rgba(24,21,18,.5); }
.shop-art .ic { width: 34px; height: 34px; stroke-width: 1.5; }
/* v101: pictures (Anu's art, cut by deploy/tools/shop_tiles.py) on the sheets' own cream, in light and dark */
.shop-art.pic { background: #F6EEDE; height: 156px; overflow: hidden; background-size: 8000%; background-position: 0 0; background-repeat: no-repeat; } /* v104: the band takes the picture's own corner color, so a theme tile never sits in a different-colored box */
.shop-art.pic img { height: 156px; width: 156px; max-width: 100%; object-fit: contain; display: block; }
.game-card .shop-art.pic { height: 132px; } .game-card .shop-art.pic img { height: 132px; width: 132px; }
.shop-lc .lc-pic { margin: -18px -18px 10px; height: 120px; background: #F6EEDE; border-radius: 17px 17px 0 0; display: grid; place-items: center; overflow: hidden; }
.shop-lc .lc-pic img { height: 120px; width: 120px; object-fit: contain; display: block; }
.shop-food .food-pic { width: 112px; height: 112px; border-radius: 16px; background: #F6EEDE; flex: none; object-fit: contain; }
.shop-bd { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.shop-bd h3 { font: 600 1rem/1.3 var(--font-body); }
.shop-bd .muted { margin: 0; font-size: .85rem; }
.shop-need { justify-self: start; background: var(--sage-bg); color: var(--sage); border-radius: 999px; padding: 3px 10px; font: 600 .78rem var(--font-body); }
.shop-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.shop-card.hl { box-shadow: 0 0 0 2px var(--clay); }
.shop-food { margin: 28px 0 8px; padding: 22px 24px; border: 1px dashed var(--line); border-radius: 20px; background: var(--card); display: flex; gap: 14px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.shop-food > div { max-width: 62ch; } .shop-food h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 4px 0 6px; } .shop-food .muted { margin: 0; }
.shop-card.bought { background: var(--sage-bg); border-color: color-mix(in srgb, var(--sage) 45%, transparent); }
.shop-buy { justify-self: start; margin-top: 6px; max-width: 100%; white-space: normal; }
@media (max-width: 560px) { .shop-buy { justify-self: stretch; font-size: .8rem; padding: 6px 10px; } .shop-bought { font-size: .8rem; flex-wrap: wrap; } }
.shop-bought { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--sage); font-weight: 600; font-size: .88rem; } .shop-bought .link-btn { margin-left: auto; }
.shop-buyform { margin-top: 6px; display: grid; gap: 6px; font-size: .84rem; } .shop-buyform .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shop-buyform input { width: 96px; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--card); color: var(--text); font: inherit; }
.shop-links > span { font-size: .82rem; color: var(--ink-3); margin-right: 2px; }
.shop-out { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); font: 600 .82rem var(--font-body); text-decoration: none; }
.shop-out:hover { border-color: var(--ink); }
.shop-local { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 26px; }
.shop-local-h { display: grid; gap: 8px; } .shop-local-h h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); } .shop-local-h .muted { margin: 0; max-width: 52ch; }
@media (min-width: 900px) { .shop-local-h { grid-template-columns: 1fr minmax(0, 420px); align-items: end; } }
.shop-local-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.shop-lc { display: grid; gap: 4px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--text); text-decoration: none; }
.shop-lc .ic { width: 26px; height: 26px; color: var(--clay-text); margin-bottom: 8px; }
.shop-lc b { font-size: 1.02rem; } .shop-lc span { color: var(--ink-2); font-size: .88rem; }
.shop-lc:hover { border-color: var(--ink-3); }
.shop-lc.dark { background: #1f1b17; color: #fff; border-color: #1f1b17; } .shop-lc.dark span { color: rgba(255,255,255,.75); } .shop-lc.dark .ic { color: #fff; }
@media (max-width: 600px) {
  .shop-ths { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
  .shop-ths::-webkit-scrollbar { display: none; }
  .shop-th { flex: none; }
  .shop-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .shop-art { height: 84px; } .shop-art span { width: 54px; height: 54px; } .shop-art .ic { width: 26px; height: 26px; }
  .shop-bd { padding: 10px 12px 12px; gap: 5px; } .shop-bd h3 { font-size: .9rem; } .shop-bd .muted { font-size: .78rem; }
  .shop-need { font-size: .72rem; padding: 3px 8px; }
  .shop-links > span { display: none; }
  .shop-out { min-height: 32px; padding: 0 10px; font-size: .78rem; }
}
@media (max-width: 400px) { .nav .nav-links a { padding: 8px 4px; font-size: .8rem; } .brand { font-size: 1.15rem; gap: 4px; } }
p.shop-for { display: block; }
/* v101 (the shop review): one theme row, a slim kit bar, five sections of item rows, folded game supplies, a running total */
.shop-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.shop-head .lead { margin-top: 6px; }
.shop-th-all { padding: 0 16px; font-weight: 600; border-style: dashed; }
.shop-th-all[aria-expanded="true"] { border-style: solid; border-color: var(--ink); }
.shop-all { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.shop-all input { font: inherit; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--text); max-width: 360px; width: 100%; }
.shop-all-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 320px; overflow-y: auto; }
.shop-kit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 18px; align-items: center; padding: 14px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); color: var(--text); }
.shop-kit::before { content: none; }
.shop-kit .kit-pic { width: 56px; height: 56px; border-radius: 50%; background-size: cover; background-position: center; flex: none; }
.shop-kit h2 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--text); margin: 0 0 2px; }
.shop-kit p { margin: 0; color: var(--ink-2); font-size: .9rem; }
.shop-kit-links { margin-top: 0; }
.shop-kit-links > span { color: var(--ink-3); }
.shop-kit .shop-out { background: var(--card); color: var(--text); border-color: var(--line); }
.shop-secs { columns: 2 400px; column-gap: 16px; }
.shop-sec { break-inside: avoid; display: grid; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); overflow: hidden; }
.ss-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px 4px; }
.ss-h h2 { font-size: 1.25rem; margin: 0; }
.ss-done { display: inline-flex; align-items: center; gap: 4px; color: var(--sage); font: 600 .82rem var(--font-body); } .ss-done .ic { width: 16px; height: 16px; }
.shop-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px 14px; align-items: start; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.ss-h + .shop-row { border-top: 0; }
.shop-row.hl { box-shadow: inset 3px 0 0 var(--clay); background: color-mix(in srgb, var(--clay) 5%, var(--card)); }
.shop-row.bought { background: var(--sage-bg); }
.sr-pic { width: 76px; height: 76px; border-radius: 14px; background: #F6EEDE; object-fit: contain; display: block; }
.sr-ic { display: grid; place-items: center; color: var(--ink); } .sr-ic .ic { width: 28px; height: 28px; }
.sr-main { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.sr-main h3 { font: 600 1rem/1.3 var(--font-body); margin: 0; }
.sr-main .muted { margin: 0; font-size: .84rem; }
.sr-main .shop-links { margin-top: 4px; }
.sr-act { align-self: center; }
.sr-act .shop-buy { margin: 0; }
.sr-done { width: 40px; height: 40px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; } .sr-done .ic { width: 20px; height: 20px; }
.shop-row .shop-bought, .shop-row .shop-buyform { margin-top: 4px; }
.gs { margin: 6px 0 4px; } .gs summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--clay-text); }
.games-more > summary { cursor: pointer; font-weight: 600; margin: 4px 0 12px; color: var(--clay-text); list-style-position: inside; }
.shop-food { border-style: solid; padding: 12px 16px; gap: 12px 16px; flex-wrap: nowrap; }
.shop-food p { margin: 0; flex: 1; color: var(--ink-2); font-size: .92rem; } .shop-food p b { color: var(--text); }
.shop-food .food-pic { width: 64px; height: 64px; border-radius: 12px; }
.shop-join { margin: 0; color: var(--ink-2); font-size: .92rem; } .shop-join a { color: var(--clay-text); font-weight: 600; }
.shop-total { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 18px; border-radius: 16px; background: #1f1b17; color: #fff; box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); font-size: .92rem; }
.shop-total b { font-size: 1.02rem; } .shop-total a { color: #fff; font-weight: 600; white-space: nowrap; }
.shop-th[hidden] { display: none; }
/* v102 (Anu, Oct 25): My plan. A bigger, barely rounded invitation with no caption; the days to go as a flip calendar; Shop and book
   as a checklist with Shop and Find a pro; Back to the plan from the Shop and Vendors */
.gpv-phone { max-width: 100%; border-radius: 12px; border-width: 6px; box-shadow: 0 34px 70px -36px rgba(24,21,18,.6); }
.gpv-screen { border-radius: 7px; }
.gpv-hit { border-radius: 7px; }
.gpv-hit:hover { background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.18)); }
.cv-count { display: flex; align-items: center; flex-wrap: nowrap; gap: 14px 18px; margin: 14px 0 0; }
.cv-count .cv-when { margin: 0; min-width: 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.45; }
.cv-count .cv-when .cw-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cv-count .cv-when span { color: inherit; font-size: inherit; }
.flipcal { display: inline-flex; gap: 6px; padding: 7px 7px 8px; background: #1f1b17; border-radius: 10px; box-shadow: 0 12px 26px -14px rgba(0,0,0,.55); flex: none; }
.flipcal .fc-win { display: grid; gap: 5px; justify-items: center; }
.flipcal .fc-lab { font: 700 .56rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #efe7da; }
.flipcal .fc-card { position: relative; min-width: 66px; height: 66px; padding: 0 8px; box-sizing: border-box; display: grid; place-items: center; border-radius: 5px; background: linear-gradient(#fdfaf4 0 50%, #f1ebe1 50%); box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); perspective: 240px; }
.flipcal .fc-card::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: rgba(26,23,20,.55); }
.flipcal .fc-card b { font: 800 2.7rem/1 var(--font-body); color: #1a1714; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.flipcal .fc-win + .fc-win .fc-card { min-width: 50px; } .flipcal .fc-win + .fc-win .fc-card b { font-size: 2rem; }
.flipcal .fc-word b { font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; }
.flipcal.fc-in .fc-card b { animation: fcflip .75s cubic-bezier(.2, .8, .3, 1) both; transform-origin: 50% 100%; }
.flipcal.fc-in .fc-win + .fc-win .fc-card b { animation-delay: .12s; }
@keyframes fcflip { from { transform: rotateX(80deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flipcal.fc-in .fc-card b { animation: none; } }
.pc-top { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--paper-2) 60%, var(--card)); }
.pc-top .budget-bar { margin: 0; }
.pc-top .sb-hc { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: .9rem; color: var(--ink-2); }
.pc-grp { margin-top: 18px; }
.pc-gh { font: 600 .72rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 2px; }
.pc-row { display: flex; align-items: center; gap: 12px; }
.pc-tick { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: var(--card); color: transparent; display: grid; place-items: center; flex: none; cursor: pointer; padding: 0; }
.pc-tick .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.pc-tick:hover { border-color: var(--sage); color: var(--sage); }
.scat.done .pc-tick { background: var(--sage); border-color: var(--sage); color: #fff; }
.scat.pc .pc-main { width: auto; flex: 1; min-width: 0; min-height: 56px; }
.pc-go { flex: none; min-height: 36px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font: 600 .85rem var(--font-body); cursor: pointer; white-space: nowrap; }
.pc-go:hover { border-color: var(--ink); }
.scat.done .pc-go { color: var(--ink-3); }
.scat.pc .scat-b { padding: 0 0 16px 42px; }
.pc-note { margin: 0; font-size: .9rem; color: var(--ink-2); }
.scat.flash { animation: pcflash 1.6s ease; } @keyframes pcflash { 0%, 40% { background: color-mix(in srgb, var(--clay) 12%, transparent); } 100% { background: transparent; } }
.scat.pc { position: relative; }
.pc-ic { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--paper-2) 70%, var(--card)); color: var(--ink-2); }
.pc-ic .ic { width: 19px; height: 19px; }
.pc-ic.on { background: var(--sage); color: #fff; } .pc-ic.on .ic { stroke-width: 2.6; }
.scat.pc .pc-main { gap: 12px; }
.pc-done { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.scat-who > span { white-space: nowrap; }
.pc-amt { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-2); }
.pc-amt input { width: 96px; min-height: 40px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--card); color: var(--text); font: inherit; }
/* v102 (Anu picked B, cards, over zebra, icon dots and roomy tiles): each row is its own small card */
.pc-grp .scats { border-top: 0; display: grid; gap: 8px; }
.pc-grp .scat { border: 1px solid var(--line); border-radius: 14px; padding: 0 12px; background: var(--card); box-shadow: 0 6px 16px -14px rgba(24,21,18,.45); }
.pc-gh { margin-bottom: 8px; }
.scat.pc .scat-t { flex: 0 1 auto; }
.scat.pc .scat-chev { margin-right: auto; }
.pc-top { border: 0; background: none; padding: 0; }
#catAddForm { display: flex; gap: 8px; margin-top: 14px; } #catAddForm input { flex: 1; min-width: 0; } #catAddForm .btn { width: auto; flex: none; }
.pc-signup { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; } .pc-signup > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.pc-signup .signup .pv-h { display: none; }
.back-plan { padding-top: 14px; } .back-plan + .page-head { padding-top: 6px; }
.back-plan-btn { border: 0; background: none; padding: 6px 0; min-height: 40px; color: var(--clay-text); font: 600 .95rem var(--font-body); cursor: pointer; }
.back-plan-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.shop-total .link-btn { color: #fff; font-weight: 600; white-space: nowrap; }
@media (max-width: 899px) {
  .lay-cover > .cv-cover > .gpv { max-width: 560px; }
  .lay-cover > .cv-cover > .dw-wrap, .lay-cover > .cv-cover > #dashWx { order: 5; }
  .gpv-phone { max-width: 100%; }
}
@media (max-width: 600px) {
  .cv-count { gap: 12px; margin-top: 10px; }
  .cv-count .cv-when { font-size: .95rem; }
  .flipcal .fc-card { min-width: 54px; height: 56px; } .flipcal .fc-card b { font-size: 2.2rem; }
  .flipcal .fc-win + .fc-win .fc-card { min-width: 42px; } .flipcal .fc-win + .fc-win .fc-card b { font-size: 1.7rem; }
  .pc-go { padding: 0 11px; font-size: .8rem; }
  .scat.pc .scat-chev { display: none; }
  .scat.pc .scat-b { padding-left: 0; }
}
@media (max-width: 600px) {
  .shop-head h1 { font-size: 1.9rem; }
  .shop-kit { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; } .shop-kit .kit-pic { width: 44px; height: 44px; }
  .shop-kit-links { grid-column: 1 / -1; }
  .shop-secs { columns: 1; }
  .shop-row { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 10px 12px; padding: 12px 14px; }
  .sr-pic { width: 60px; height: 60px; border-radius: 12px; }
  .sr-main h3 { font-size: .95rem; }
  .sr-act .shop-buy { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; justify-content: center; }
  .sr-act .shop-buy .sb-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sr-act .shop-buy .ic { margin: 0; }
  .shop-food { flex-wrap: wrap; } .shop-food .food-pic { width: 52px; height: 52px; } .shop-food p { flex: 1 1 200px; }
  #shop-sec-games .shop-grid { grid-template-columns: 1fr; }
  .game-card { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto; align-items: start; }
  .game-card .shop-art.pic { height: 76px; width: 76px; margin: 12px 0 0 12px; border-radius: 12px; } .game-card .shop-art.pic img { height: 76px; width: 76px; }
  .game-card .shop-bd { padding-top: 12px; }
  .shop-local-grid { grid-template-columns: 1fr; gap: 8px; }
  .shop-lc { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 14px 10px 10px; }
  .shop-lc .lc-pic { grid-row: span 2; margin: 0; height: 64px; width: 64px; border-radius: 12px; } .shop-lc .lc-pic img { height: 64px; width: 64px; }
  .shop-total { font-size: .84rem; padding: 10px 14px; }
}

/* v44: social profile links in the footer */
.foot .foot-social { flex-basis: 100%; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-3); font-size: .82rem; } .foot .foot-social a { color: var(--ink-3); } .foot .foot-social a:hover { color: var(--clay-text); }
/* ---------- v42 brand: saffron clay and the lit cake (Oct 4, 2026; backlog U16) ---------- */
.btn:not(.ghost):not(.white):not(.dark):not(.link-btn) { background: var(--clay); color: var(--on-clay); border-color: transparent; }
.chip:not(.mood)[aria-pressed="true"], .chip-btn.on, .filters button[aria-pressed="true"], .plan-tabs a[aria-current="page"],
.type-row .ptype[aria-pressed="true"], .gp-choice button.on { background: var(--clay); color: var(--on-clay); border-color: var(--clay); }
.seg button[aria-pressed="true"], .dash-dlg .seg button[aria-pressed="true"] { border-color: var(--clay); box-shadow: inset 0 0 0 1px var(--clay); }
input:focus, select:focus, textarea:focus { border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 18%, transparent); }
:root:not([data-view="home"]):not([data-view="create"]) :is(h1, h2) em { color: var(--clay-text); }
.brand svg, .auth-brand svg { width: 24px; height: 24px; }
.brand svg .ck, .auth-brand svg .ck { stroke: var(--clay); } .brand svg .ckf, .auth-brand svg .ckf { fill: var(--clay); }
:root:is([data-view="home"], [data-view="create"]) .nav .brand svg .ck { stroke: #fff; }
:root:is([data-view="home"], [data-view="create"]) .nav .brand svg .ckf { fill: #fff; }
.brand, .auth-brand { font-weight: 700; font-variation-settings: "opsz" 72, "SOFT" 100; letter-spacing: -.03em; }
/* ---------- v45 invitation designs (Oct 5, 2026; backlog G15): the design frame, the design tiles and More designs ---------- */
.dfr { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: var(--dfr-bg, #2a2320); box-shadow: var(--shadow); isolation: isolate; }
.dfr iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease; color-scheme: light; } /* v46: the design draws itself at this size (runtime zoom) */
.dfr iframe.on { opacity: 1; }
.dfr-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dz { margin-top: 14px; min-width: 0; }
.dz-label { font: 600 .72rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.dz-row { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 4px 3px 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.dz-tile { flex: 0 0 66px; display: grid; gap: 5px; align-content: start; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: center; font: 600 .68rem/1.2 var(--font-body); min-width: 0; }
.dz-img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #3a332d center / cover no-repeat; border: 2px solid transparent; transition: border-color .15s ease; }
.dz-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-tile[aria-pressed="true"] .dz-img { border-color: var(--clay); box-shadow: 0 0 0 2px color-mix(in srgb, var(--clay) 30%, transparent); }
.dz-tile:hover .dz-img { border-color: color-mix(in srgb, var(--clay) 55%, transparent); }
.dz-tile:focus-visible { outline: none; } .dz-tile:focus-visible .dz-img { outline: 3px solid var(--clay); outline-offset: 2px; }
.dz-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; letter-spacing: -.01em; }
.dz-more .dz-img { background: transparent; border: 1.5px dashed var(--line); }
.dz-more .dz-img .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.dz-panel { scroll-margin: 84px 0 16px; margin-top: 8px; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--ink); display: grid; gap: 18px; text-align: left; }
.dz-panel[hidden] { display: none; }
.dz-sec h3 { font: 600 .95rem var(--font-body); margin: 0 0 4px; letter-spacing: 0; }
.dz-p { font-size: .85rem; color: var(--ink-2); margin: 0 0 10px; line-height: 1.45; }
.dz-prompt { display: block; width: 100%; min-height: 0; font: .82rem/1.45 var(--font-body); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); resize: vertical; }
.dz-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dz-gh { font: 600 .7rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 12px 0 6px; }
.dz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 76px)); gap: 10px 8px; }
.dz-up .chip.mood { width: 132px; height: 84px; }
.dz-close { margin: 0; text-align: right; }
.ph-theme-link { justify-self: center; font-size: .85rem; }
.inv-left .dfr, .inv-left .dz { max-width: 340px; } .inv-left .dz-row { flex-wrap: wrap; overflow: visible; } .inv-left .dz-row .dz-tile { flex-basis: 60px; }
.gpv-fr .dfr { border-radius: 0; box-shadow: none; }
.gp-card .dfr { max-width: 420px; margin: 0 auto; }
.succ-img { margin: 10px 0 0; font-size: .85rem; line-height: 1.5; }
html.print-invite #printInvite .print-card { display: block; width: 100%; max-width: 480px; margin: 0 auto; }
/* on the create screen the preview sits on the mood's photo */
.cc .dz-label { color: rgba(255,255,255,.82); text-align: center; }
.cc .dz-tile { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.cc .dz-tile[aria-pressed="true"] .dz-img { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.cc .dz-tile:focus-visible .dz-img { outline-color: #fff; }
.cc .dz-more .dz-img { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); }
.cc .dz-panel { background: rgba(24,21,18,.82); border-color: rgba(255,255,255,.18); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cc .dz-p { color: rgba(255,255,255,.84); } .cc .dz-gh { color: rgba(255,255,255,.7); }
.cc .dz-prompt { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); }
.cc .dz-panel .btn.ghost { color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }
.cc .dz-panel .link-btn, .cc .ph-theme-link { color: #fff; }
.cc .invite.dz-open { position: relative; top: auto; align-self: start; }
@media (min-width: 900px) { .cc .dz-row { justify-content: center; } }
@media (max-width: 899px) { .cc .invite { max-width: 100%; } .cc .inv-fr { max-width: 240px; margin: 0 auto; } }
@media (max-width: 560px) { .dz-tile { flex-basis: 60px; } }
@media (prefers-reduced-motion: reduce) { .dfr iframe, .dz-img { transition: none; } }

/* ---- v57 (U19): My plan decluttered, same Cover Story look. ⋯ menu, one Share link button, the invitation in the phone,
   six steps with one open, Shop as an inline checklist, the pop-ups. */
.cv-title { display: flex; align-items: flex-start; gap: 12px; }
.cv-title h1 { flex: 1; min-width: 0; margin: 0; font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.cv-more { flex: none; width: 46px; height: 46px; margin-top: 6px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.cv-more .ic { width: 22px; height: 22px; stroke-width: 3; }
.cv-more:hover { border-color: var(--ink-3); }
.cv-count span { line-height: 1.45; }
.cv-attn { display: inline; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--clay-text); cursor: pointer; min-height: 32px; text-align: left; }
.cv-attn .ic { width: 16px; height: 16px; transform: rotate(-90deg); vertical-align: -3px; margin-left: 2px; }
.cv-attn:hover { text-decoration: underline; text-underline-offset: 3px; }
.gpv-phone { position: relative; }
.gpv-hit { position: absolute; inset: 0; z-index: 2; border: 0; background: transparent; border-radius: inherit; cursor: zoom-in; }
.gpv-hit:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
.cv-share { display: grid; gap: 8px; }
.cv-share .btn { width: 100%; justify-content: center; }
.cv-sent { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .88rem; color: var(--ink-2); text-align: center; }
.cv-sent .ic { width: 16px; height: 16px; color: var(--sage); flex: none; }
.cv-split { margin: -4px 0 0; text-align: center; font-size: .88rem; color: var(--ink-2); }
.succ-slim { flex-wrap: wrap; }
.succ-slim > span { flex: 1 1 220px; }
.rem-offer > span { display: flex; align-items: center; gap: 8px; } /* v65 (P30): the one-time reminders offer */
.succ-in { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); }
.succ-in .ic { width: 16px; height: 16px; }
.due-late { color: var(--clay-text); font-weight: 600; }

/* Shop and book: an inline checklist */
.sb-top { display: grid; gap: 10px; margin: 4px 0 16px; padding: 14px 16px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line); }
.sb-hc { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.sb-top .budget-bar { margin: 0; }
.sb-top .small-note { margin: -4px 0 0; }
.hc-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.hc-form .fld { display: grid; gap: 4px; }
.hc-form input { width: 96px; }
.scats { border-top: 1px solid var(--line); }
.scat { border-bottom: 1px solid var(--line); }
.scat-h { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 2px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.scat-h:hover b { text-decoration: underline; text-underline-offset: 3px; }
.scat-ic { width: 22px; height: 22px; flex: none; color: var(--ink-2); }
.scat-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.scat-t b { font-weight: 600; font-size: 1rem; }
.scat-t small { color: var(--ink-3); font-size: .875rem; }
.scat-chev { width: 18px; height: 18px; flex: none; color: var(--ink-3); transition: transform .2s ease; }
.scat.open .scat-chev { transform: rotate(180deg); }
.scat.done .scat-ic { color: var(--sage); }
.scat.done .scat-t b { color: var(--ink-3); }
.scat-b { display: grid; gap: 12px; padding: 0 0 18px 34px; }
@media (max-width: 600px) { .scat-b { padding-left: 0; } }
.scat-tip { margin: 0; color: var(--ink-2); font-size: .92rem; }
.scat-b .shopping-list { margin: 0; }
.scat-b .add-item { margin: 0; }
.scat-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.scat-who { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--ink-2); }
.scat-who select { min-height: 40px; }
.scat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.scat-off { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; }
.scats + .scat-off + .add-cat, .scats + .add-cat { margin-top: 14px; }
.scat-diet, .allergy-card { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--clay-soft); border: 1px solid color-mix(in srgb, var(--clay) 30%, transparent); font-size: .92rem; color: var(--text); }
.scat-diet .ic, .allergy-card .ic { width: 20px; height: 20px; flex: none; color: var(--clay-text); margin-top: 1px; }
.allergy-card { margin: 0 0 14px; }
.allergy-card ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.allergy-card.big { font-size: 1.05rem; padding: 14px 16px; margin: 0 0 16px; }
.allergy-card.big .ic { width: 24px; height: 24px; }
.tell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.tell p { margin: 0; }
/* guests */
.gadd { margin: 14px 0 6px; }
.gform-min { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .gform-min { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gform-min .wide, .gform-min .row { grid-column: 1 / -1; } }
.rsvp { white-space: nowrap; flex: none; }
.glist .gacts { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 599px) { .glist li { grid-template-columns: 30px minmax(0, 1fr) auto; } .glist li > .rsvp { grid-column: 3; } .glist .gacts { grid-column: 1 / -1; justify-content: flex-start; } .glist li:has(> .rsvp) .gacts { grid-column: auto; } }
/* helpers */
.helpers .pv-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.helpers .team li { flex-wrap: wrap; }
.hform { display: grid; gap: 12px; }
.hform .fld { display: grid; gap: 4px; }
.hcats { border: 0; padding: 0; margin: 0; }
.hcats legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.hchip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.hform .hchip input[type="checkbox"] { margin: 0; padding: 0; accent-color: var(--clay); width: 18px; height: 18px; min-height: 0; border-radius: 4px; flex: none; }
.hchip:has(input:checked) { border-color: var(--clay); background: var(--clay-soft); }
/* the pop-ups */
.more-list { display: grid; }
.more-it { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.more-it:last-child { border-bottom: 0; }
.more-it .ic { width: 22px; height: 22px; flex: none; color: var(--ink-2); }
.more-it span { display: grid; gap: 1px; }
.more-it small { color: var(--ink-3); font-size: .875rem; }
.more-it:hover b { text-decoration: underline; text-underline-offset: 3px; }
.more-it.danger, .more-it.danger .ic { color: var(--warn); }
.inv-pop { width: 100%; max-width: 340px; margin: 4px auto 0; }
/* v67 (Anu): the invitation pop-up has no card around it: the invitation floats on the dimmed page, sized to the window (4:5),
   with Open and Edit under it; a saffron clay close button sits on its top-right corner (shown while the mouse is over it,
   always on touch screens), and a click outside closes it */
.dash-dlg[data-kind="invite"] { --ipw: min(calc(100vw - 32px), calc((100svh - 130px) * .8)); width: var(--ipw); max-width: none; max-height: none; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
@media (min-width: 600px) { .dash-dlg[data-kind="invite"] { --ipw: clamp(260px, calc((100svh - 130px) * .8), 680px); } }
.dash-dlg[data-kind="invite"] .auth-in { padding: 0; gap: 14px; max-height: none; overflow: visible; }
.dash-dlg[data-kind="invite"] .inv-pop { width: 100%; max-width: none; margin: 0; }
.dash-dlg[data-kind="invite"] .inv-pop .dfr { box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); }
.dash-dlg[data-kind="invite"] .dm-foot { border-top: 0; padding-top: 0; }
.dash-dlg[data-kind="invite"] .btn.ghost { background: var(--card); border-color: var(--card); color: var(--text); }
.dash-dlg[data-kind="invite"] .auth-x { top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; background: var(--clay); color: #fff; font-size: 1.5rem; box-shadow: 0 4px 14px rgba(0,0,0,.3); opacity: 0; transition: opacity .2s ease; }
.dash-dlg[data-kind="invite"] .auth-in:hover .auth-x, .dash-dlg[data-kind="invite"] .auth-x:focus-visible { opacity: 1; }
@media (hover: none) { .dash-dlg[data-kind="invite"] .auth-x { opacity: 1; } }
.inv-pop .dfr { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(24,21,18,.55); }
.inv-pop-btns { display: flex; gap: 10px; }
.inv-pop-btns .btn { flex: 1; justify-content: center; }
.sh-lab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sh-lab .link-btn { font-size: 13px; }
.sh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sh-grid .btn { justify-content: center; }
.sh-qr { display: grid; justify-items: center; gap: 6px; margin-top: 12px; }
#sh-text, #tg-text { width: 100%; box-sizing: border-box; }
.btn.danger { background: var(--warn); border-color: var(--warn); color: #fff; }
.toast.has-undo { pointer-events: auto; display: flex; align-items: center; gap: 10px; }
.toast-undo { border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; padding: 0 4px; }
/* the create screen, editing: the invitation's wording and details for guests */
.tell-btns { display: grid; gap: 8px; }
.tell-btns .btn { justify-content: center; }
@media (max-width: 899px) { .lay-cover > .cv-cover > .gpv { max-width: 560px; } /* v102 (Anu): almost the full width */ .lay-cover > .cv-cover > .cv-share { order: 2; } .lay-cover > .cv-cover > .cv-split { order: 3; } }
/* ---------- v58 (Oct 9, 2026): the create screen sits higher, its invitation is bigger, and The place carries the details for guests ---------- */
.cc-in { --ccw: clamp(380px, min(36vw, calc((100svh - 140px) * .8)), 520px); }
@media (min-width: 900px) { .cc-in { grid-template-columns: minmax(0, 1fr) var(--ccw); gap: clamp(40px, 4.5vw, 64px); padding-top: 86px; } .cc .invite { top: 80px; } }
@media (max-width: 899px) { .cc-in { padding-top: 74px; } .cc .inv-fr { max-width: clamp(240px, 78vw, 380px); } }
.place-details { margin-top: 16px; }
.place-details .inv-sec { border-top: 1px solid var(--line); }
/* ---------- v59 to v60 (Oct 9, 2026): the create screen without the steps line, headline and label; the mood row first and across the top (v60), then the form and the invitation ---------- */
.cc { align-items: start; } /* v60: the content starts under the header on tall screens too (it sat at the bottom of the photo) */
.cc .cc-top { min-width: 0; }
@media (min-width: 900px) {
  .cc-in { --ccw: clamp(380px, min(36vw, calc((100svh - 230px) * .8)), 520px); padding-top: 75px; row-gap: 22px; }
  .cc .cc-top { grid-column: 1 / -1; }
  .cc .cc-moods .chip.mood { width: 122px; height: 84px; }
  .cc .cc-moods .chip.mood .mood-name { font-size: .8rem; }
  .cc .cc-moods .chip.cc-more, .cc .cc-moods .chip.chip-more { width: 122px; height: 84px; }
}
@media (max-width: 899px) {
  .cc-in { display: flex; flex-direction: column; gap: 16px; padding-top: 69px; }
  .cc .cc-top { order: 1; }
  .cc .invite { order: 2; margin-top: -4px; }
  .cc-main { order: 3; }
  .cc-type { margin: 0 0 4px; }
  .cc .inv-fr { max-width: clamp(220px, min(78vw, calc((100svh - 330px) * .8)), 380px); }
}
/* ---------- v61 (Oct 9, 2026): on laptops and desktops the design tiles stand in a narrow column beside the invitation, so short screens still show them (Anu picked option A) ---------- */
@media (min-width: 900px) {
  .cc-in { --ccw: clamp(330px, min(36vw, calc((100svh - 230px) * .8)), 500px); grid-template-columns: minmax(0, 1fr) calc(var(--ccw) + 100px); }
  .cc .invite { display: grid; grid-template-columns: minmax(0, 1fr) 84px; column-gap: 16px; align-items: start; }
  .cc .invite > .inv-fr { grid-column: 1; grid-row: 1; }
  .cc .invite > .dz { display: contents; }
  .cc .invite .dz-label { display: none; }
  .cc .invite .dz-row { grid-column: 2; grid-row: 1; flex-direction: column; justify-content: flex-start; overflow-x: hidden; overflow-y: auto; max-height: calc(var(--ccw) * 1.25); padding: 3px 4px 3px 3px; scrollbar-width: thin; }
  .cc .invite .dz-tile { flex: 0 0 auto; width: 72px; }
  .cc .invite .dz-panel { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; }
  .cc .invite > .ph-theme { grid-column: 1 / -1; }
}

/* v77: The place, style A round 2 */
.pl-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pl-opt { display: flex; gap: 10px; align-items: center; justify-content: center; border: 1.5px solid var(--line); background: var(--card); color: var(--text); border-radius: 16px; padding: 14px 10px; cursor: pointer; font: 600 1rem var(--font-body); min-height: 52px; }
.pl-opt:hover { border-color: color-mix(in srgb, var(--clay) 45%, var(--line)); }
.pl-opt .ic { width: 22px; height: 22px; color: var(--clay-text); }
.pl-opt[aria-checked="true"] { border-color: var(--clay); background: color-mix(in srgb, var(--clay-soft) 55%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 16%, transparent); }
.pl-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .pl-duo .btn { justify-content: center; }
.pl-duo .btn[aria-pressed="true"] { border-color: var(--text); }
#ch-place .venue-form { margin-top: 14px; grid-template-columns: 1fr 1.3fr auto; }
#ch-place .pl-home { grid-template-columns: 1fr 1.3fr auto; }
.pl-opt-l { font-weight: 400; color: var(--ink-3); }
.pl-rain { position: relative; margin-top: 12px; }
.pl-rain input { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--card); color: var(--text); }
.pl-rain .ph { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; white-space: nowrap; overflow: hidden; max-width: calc(100% - 28px); text-overflow: ellipsis; }
.pl-rain input:not(:placeholder-shown) + .ph { display: none; }
.pl-list { display: grid; gap: 8px; margin-top: 14px; }
.pl-city { font: 500 .85rem var(--font-body); margin-left: 6px; }
.pl-lh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .pl-lh h3 { font: 600 1rem var(--font-body); } .pl-lh span { margin-left: auto; font-size: .82rem; color: var(--ink-3); }
.pl-row { border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; }
.pl-row.sel { border-color: var(--clay); }
.pl-rt h4 { margin: 0; font: 600 1rem var(--font-body); } .pl-rt p { font-size: .88rem; color: var(--ink-2); }
.pl-detail { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 8px; }
.pl-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pl-photos figure { margin: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--paper-2); }
.pl-photos .pl-map button { display: block; position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.pl-photos .pl-map button:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.pl-mapbadge { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: rgba(255,253,249,.94); color: #221C17; font-size: .75rem; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.pl-mapbadge .ic { width: 13px; height: 13px; }
.pl-gmap { margin-top: 8px; height: 260px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); }
.pl-gmap iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 600px) { .pl-gmap { height: 240px; } }
.pl-credit a { color: inherit; }
.pl-photos img, .pl-photos svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.pl-credit { font-size: .74rem; color: var(--ink-3); margin-top: -4px; }
.pl-links { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: .9rem; font-weight: 600; } .pl-links .ic { width: 14px; height: 14px; margin-left: 4px; }
.pl-req { border: 1.5px solid var(--clay); border-radius: 14px; padding: 14px; display: grid; gap: 8px; background: color-mix(in srgb, var(--clay-soft) 30%, var(--card)); }
.pl-req h4 { margin: 0; font: 600 1rem var(--font-body); } .pl-req p { font-size: .9rem; color: var(--ink-2); }
.pl-req .btn .ic { width: 14px; height: 14px; margin-left: 4px; }
.pl-ok { color: var(--sage) !important; font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pl-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0; padding: 0; }
.pl-track li { list-style: none; position: relative; padding-top: 22px; font-size: .84rem; color: var(--ink-3); }
.pl-track li::before { content: ""; position: absolute; top: 4px; left: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); z-index: 1; }
.pl-track li::after { content: ""; position: absolute; top: 9px; left: 12px; right: 0; height: 2px; background: var(--line); }
.pl-track li:last-child::after { display: none; }
.pl-track li.on { color: var(--text); font-weight: 600; } .pl-track li.on::before { background: var(--sage); border-color: var(--sage); } .pl-track li.on::after { background: var(--sage); }
@media (max-width: 640px) {
  .pl-choice { gap: 8px; } .pl-opt { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: .92rem; }
  #ch-place .venue-form, #ch-place .pl-home { grid-template-columns: 1fr; }
  .pl-photos { gap: 6px; }
}
/* ---------- v94: the create screen, the card is the form (prototype F, the D-hybrid; prototype/ui-prototypes/create-2026-10/F-hybrid).
   The stage is dark in both color modes (the theme photo, blurred); the dock, the checklist and the theme sheet are paper. ---------- */
:root[data-cf] .foot { display: none; }
.pl-ask { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: color-mix(in srgb, var(--clay-soft) 45%, var(--card)); border: 1px solid color-mix(in srgb, var(--clay) 30%, transparent); font-size: .92rem; }
.pl-ask:focus { outline: none; } .pl-ask .ic { width: 20px; height: 20px; color: var(--clay-text); flex: none; margin-top: 2px; } .pl-ask b { font-weight: 600; } .pl-ask .link-btn { font-size: .88rem; color: var(--ink-2); }
:root[data-cf] .nav-in { position: relative; }
.cf { --cw: 340px; position: relative; height: 100vh; height: 100svh; min-height: 520px; color: #fff; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding-top: 118px; background: #1d1713; }
.cf-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #2a2320; pointer-events: none; }
.cf-bg i { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(20px) saturate(1.05) brightness(.5); transform: scale(1.06); opacity: 0; transition: opacity .6s ease; }
.cf-bg i.on { opacity: 1; }
.cf-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,16,11,.6), rgba(24,16,11,.12) 34%, rgba(20,14,10,.5)); }
.cf .ic { width: 20px; height: 20px; }
.cf-ic-l { transform: rotate(90deg); } .cf-ic-r { transform: rotate(-90deg); }
/* the bar under the nav: the party type, the Theme button and (phones) the checklist */
.cf-tools { display: flex; align-items: center; gap: 8px; min-width: 0; color: #fff; }
.cf-tools a, .cf-tools button { color: #fff; font: 600 .92rem var(--font-body); }
.cf-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 12px; background: rgba(255,255,255,.1); text-decoration: none; white-space: nowrap; flex: none; }
.cf-back:hover { background: rgba(255,255,255,.18); }
.cf-tbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; padding: 4px 10px 4px 4px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.32); background: rgba(255,255,255,.1); text-align: left; cursor: pointer; }
.cf-tbtn:hover { background: rgba(255,255,255,.18); }
.cf-tbtn .ph { width: 34px; height: 34px; border-radius: 10px; background: #3a2a20 center / cover no-repeat; flex: none; }
.cf-tbtn .t { min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.cf-tbtn small { font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.72); }
.cf-tbtn b { font-size: .95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.cf-tbtn.pulse { animation: cfPulse 1s cubic-bezier(.2,.8,.2,1) 1; }
@keyframes cfPulse { 0% { box-shadow: 0 0 0 0 rgba(238,122,68,.9); transform: scale(1); } 25% { transform: scale(1.07); background: rgba(238,122,68,.35); border-color: #EE7A44; } 100% { box-shadow: 0 0 0 18px rgba(238,122,68,0); transform: scale(1); } }
.cf-list { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px; margin-left: auto; border: 0; border-radius: 12px; background: rgba(255,255,255,.12); cursor: pointer; flex: none; }
.cf-list:hover { background: rgba(255,255,255,.2); }
@media (max-width: 1023px), (max-height: 559px) {
  .cf-tools { position: absolute; left: 12px; right: 12px; top: 64px; height: 52px; }
  .cf-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cf-back { padding: 0 8px; }
}
/* the card, with the theme's other designs on a turning cylinder either side (v95; pictures, never live pages: B54) */
.cf-stage { position: relative; z-index: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding-top: 6px; overflow: hidden; }
.cf-deckw { position: relative; transform-origin: 50% 0; transition: transform .25s ease; }
.cf-deck { position: relative; width: var(--cw); height: calc(var(--cw) * 1.25); touch-action: pan-y; -webkit-user-select: none; user-select: none; perspective: calc(var(--cw) * 3.2); }
/* a face of the cylinder: the design's picture three times, blurred under, sharp toward the card (a gradient blur), sharp all over at the front */
.cf-face { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; pointer-events: none; background: #3a2a20; box-shadow: 0 16px 40px rgba(0,0,0,.35); transform-origin: 50% 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; visibility: hidden; }
.cf-face img, .cf-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-face .fb { filter: blur(9px) saturate(.95); transform: scale(1.08); }
.cf-face .fs { filter: blur(.6px); -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.8) 18%, rgba(0,0,0,0) 70%); mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.8) 18%, rgba(0,0,0,0) 70%); }
.cf-face.l .fs { -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.8) 18%, rgba(0,0,0,0) 70%); mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.8) 18%, rgba(0,0,0,0) 70%); }
.cf-face .ff { opacity: 0; }
.cf-cover { z-index: 40; border-radius: 16px; opacity: 0; visibility: hidden; pointer-events: none; }
.cf-cover.on { visibility: visible; }
.cf-card { position: absolute; inset: 0; transform-origin: 50% 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
:root[data-cf-turn] .cf-ov { visibility: hidden; }
.cf-card .inv-fr, .cf-card .dfr { width: 100%; height: 100%; }
.cf-card .dfr { border-radius: 16px; box-shadow: 0 26px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); background: var(--dfr-bg, #2e241d); }
.cf-ov { position: absolute; inset: 0; z-index: 2; border-radius: 16px; }
.cf-hs { position: absolute; padding: 0; border: 0; background: none; border-radius: 6px; cursor: text; opacity: 0; transition: opacity .3s; }
.cf-ov.ready .cf-hs { opacity: 1; }
.cf-hs::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: border-color .15s, box-shadow .15s, background .15s; }
.cf-hs.need::before { border: 1.5px dashed var(--clay); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.cf-hs:hover::before, .cf-hs:focus-visible::before { border: 2px solid #EE7A44; background: rgba(255,255,255,.1); box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.cf-hs:focus-visible { outline: none; }
.cf-hs.cur::before { border: 2.5px solid var(--clay); background: rgba(221,95,40,.1); box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 24px rgba(238,122,68,.7); }
.cf-ov.pulse .cf-hs.need::before, .cf-ov.pulse-all .cf-hs::before { animation: cfHs 1.1s ease 2; }
@keyframes cfHs { 0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,.75); } 50% { box-shadow: 0 0 0 6px rgba(238,122,68,.55), 0 0 22px rgba(238,122,68,.8); } }
:root[data-cf-q] .cf-hs.need:not(.cur)::before { opacity: .45; }
.cf-coach { position: absolute; z-index: 6; left: 50%; width: max-content; max-width: 92%; transform: translateX(-50%); padding: 9px 16px 10px; border-radius: 14px; background: var(--paper); color: var(--ink); font: italic 500 1.12rem/1.15 var(--serif); text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); pointer-events: none; opacity: 0; transition: opacity .35s; }
.cf-coach.on { opacity: 1; }
.cf-coach::after { content: ""; position: absolute; left: 50%; margin-left: -9px; border: 9px solid transparent; }
.cf-coach.below::after { bottom: 100%; border-bottom-color: var(--paper); } .cf-coach.above::after { top: 100%; border-top-color: var(--paper); }
.cf-dname { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; margin-top: 8px; font-size: .9rem; color: rgba(255,255,255,.92); white-space: nowrap; }
.cf-dname b { font-weight: 600; } .cf-dname .n { color: rgba(255,255,255,.7); }
.cf-own-note { margin: -2px 0 12px; font-size: .88rem; color: var(--ink-2); } /* v107: on the host's own invitation */
.cf-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: #fff; cursor: pointer; }
.cf-arrow:hover { background: rgba(255,255,255,.14); }
.cf-big { display: none; }
/* phones: the bottom bar names the next thing */
.cf-bar { position: relative; z-index: 1; padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(20,14,10,0), rgba(20,14,10,.55)); }
.cf-bar-l { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .84rem; color: rgba(255,255,255,.9); }
.cf-segs { display: flex; gap: 3px; flex: none; }
.cf-segs i { width: 12px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); transition: background .3s; }
.cf-segs i.on { background: #EE7A44; }
.cf-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; border: 0; border-radius: 999px; background: var(--clay); color: #181512; font: 700 1.06rem var(--font-body); box-shadow: 0 8px 24px rgba(221,95,40,.35); cursor: pointer; transition: transform .12s, background-color .2s; }
.cf-cta:hover { background: #EE7A44; } .cf-cta:active { transform: scale(.98); }
.cf-cta.ready { background: #fff; color: #181512; box-shadow: 0 8px 30px rgba(255,255,255,.25); }
.cf-bplan { margin: 0 0 10px; padding: 10px 14px 8px; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.cf-bar .cf-back-plan { display: block; margin-top: 8px; text-align: center; color: #fff; font-size: .9rem; }
/* "Your plan, built from your answers" */
.cf-built-h { margin: 0 0 6px; font: 600 .68rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cf-built { display: grid; gap: 5px; }
.cf-built li { display: flex; gap: 9px; align-items: flex-start; font-size: .84rem; line-height: 1.3; color: var(--ink-2); }
.cf-built li b { color: var(--ink); font-weight: 600; }
.cf-built li .ic { width: 17px; height: 17px; color: var(--clay); flex: none; }
.cf-built li.wait { color: var(--ink-3); font-style: italic; } .cf-built li.wait .ic { color: var(--ink-3); opacity: .6; }
/* the checklist: a column beside the card on laptops, a sheet on phones */
.cf-side { z-index: 1; color: var(--ink); background: var(--paper); }
.cf-side h2 { font: 500 1.3rem/1.2 var(--serif); letter-spacing: -.01em; }
.cf-side h2 b { font-weight: 700; color: var(--clay-text); }
.cf-side .cf-segs { display: flex; margin: 10px 0 6px; } .cf-side .cf-segs i { width: auto; flex: 1; background: var(--line); } .cf-side .cf-segs i.on { background: var(--clay); }
.cf-rows { margin: 4px 0 0; }
.cf-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 5px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.cf-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.cf-row .ck { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px dashed var(--clay); display: flex; align-items: center; justify-content: center; }
.cf-row.done .ck { border: 0; background: var(--ink); color: var(--paper); } .cf-row.done .ck .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.cf-row.xopt .ck { border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.cf-row .t { flex: 1; min-width: 0; }
.cf-row .t b { display: block; font-weight: 600; font-size: .92rem; }
.cf-row .t span { display: block; color: var(--ink-2); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-row .t span.s { color: var(--ink-3); font-style: italic; }
.cf-row .go { color: var(--ink-3); width: 18px; height: 18px; }
.cf-extras-h { margin: 14px 0 0; font-size: .82rem; font-weight: 600; color: var(--ink-3); }
.cf-sideplan { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cf-send { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 54px; margin-top: 12px; border: 0; border-radius: 999px; background: var(--clay); color: var(--on-clay); font: 700 1.03rem var(--font-body); box-shadow: 0 8px 24px rgba(221,95,40,.3); cursor: pointer; flex: none; }
.cf-send:hover { background: #EE7A44; }
.cf-send small { font-size: .78rem; font-weight: 600; opacity: .85; }
.cf-send.wait { background: var(--paper-2); color: var(--ink-2); box-shadow: none; } .cf-send.wait small { color: var(--clay-text); opacity: 1; }
.cf-side-note { margin: 10px 0 0; font-size: .82rem; color: var(--ink-3); text-align: center; }
.cf-side-note a { color: inherit; }
.cf-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cf-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink); flex: none; cursor: pointer; }
.cf-x .ic { width: 18px; height: 18px; }
/* the one-question dock: above the keyboard on phones, a popover beside the card on laptops */
.cf-ed { position: fixed; left: 0; right: 0; bottom: var(--kb, 0px); z-index: 30; color: var(--ink); background: var(--paper); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.35); padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); transition: transform .28s cubic-bezier(.2,.8,.2,1); visibility: hidden; max-height: 72dvh; overflow: auto; }
.cf-ed.on { transform: none; visibility: visible; }
.cf-ed-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cf-ed-h h2 { flex: 1; font: 500 1.3rem/1.15 var(--serif); letter-spacing: -.01em; }
.cf-ed-h h2 em { font-style: italic; color: var(--clay-text); }
.cf-ed-h .step { font-size: .75rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.cf-ed .cf-x { width: 40px; height: 40px; }
.cf-ed .sub { margin: -4px 0 10px; font-size: .9rem; color: var(--ink-2); }
.cf-in { display: block; width: 100%; height: 54px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: 500 1.2rem var(--font-body); }
.cf-in::placeholder { color: var(--ink-3); opacity: .7; font-weight: 400; }
.cf-in:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(221,95,40,.2); }
.cf-ed .hint { margin: 8px 0 0; font-size: .88rem; color: var(--ink-2); }
.cf-ed .hint.warn { color: var(--clay-text); font-weight: 600; }
.cf-ed .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cf-ed .chip { min-height: 44px; padding: 0 16px; cursor: pointer; }
.cf-ed-f { display: flex; gap: 10px; margin-top: 14px; }
.cf-ed-f .cf-cta { min-height: 50px; font-size: 1rem; box-shadow: none; }
.cf-shuffle { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--paper-2); color: var(--ink); font: 600 .88rem var(--font-body); cursor: pointer; }
.cf-shuffle .ic { width: 18px; height: 18px; }
.cf-ed .ptr { display: none; }
.cf-ed.shake { animation: cfShake .35s; }
@keyframes cfShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.cf-grid { display: grid; gap: 8px; }
.cf-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf-opt { position: relative; border: 0; border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent), 0 0 0 1px var(--line) inset; text-align: left; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s; overflow: hidden; padding: 0; cursor: pointer; font: inherit; }
.cf-opt:hover { box-shadow: 0 6px 18px rgba(0,0,0,.1), 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent) inset; }
.cf-opt:active { transform: scale(.97); }
.cf-opt[aria-checked="true"], .cf-opt[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--clay) inset, 0 8px 22px rgba(221,95,40,.22); }
.cf-num { height: 50px; display: grid; place-items: center; font: 600 1.45rem/1 var(--serif); text-align: center; }
.cf-wide { grid-column: 1 / -1; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 1.02rem/1 var(--font-body); }
.cf-wide small { font: 400 .82rem/1 var(--font-body); color: var(--ink-2); }
.cf-stp-l { margin: 14px 0 6px; font: 600 .8rem var(--font-body); color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.cf-stp { display: flex; align-items: center; gap: 8px; }
.cf-stp button { flex: none; width: 48px; height: 50px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: 600 1.45rem/1 var(--font-body); cursor: pointer; }
.cf-stp input { flex: 1; min-width: 0; width: 100%; height: 50px; text-align: center; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: 600 1.4rem/1 var(--font-body); }
.cf-stp input:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(221,95,40,.2); }
.cf-ex2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cf-cal { height: 70px; text-align: center; display: flex; flex-direction: column; }
.cf-cal .m { background: var(--clay); color: #181512; font: 700 .66rem/19px var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.cf-cal .d { font: 600 1.55rem/1 var(--serif); margin-top: 6px; }
.cf-cal .w { font: 500 .75rem/1 var(--font-body); color: var(--ink-2); margin-top: 4px; }
.cf-cal.other { background: transparent; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 25%, transparent) inset; justify-content: center; align-items: center; font: 600 .84rem/1.25 var(--font-body); padding: 0 6px; }
.cf-cal.other .ic { width: 20px; height: 20px; margin-bottom: 4px; }
.cf-other { position: relative; margin-top: 10px; }
.cf-other input { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: 500 1.05rem var(--font-body); }
.cf-other .cc-ph { display: none; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; font-size: 1rem; }
.cf-other.cc-empty .cc-ph { display: block; } .cf-other.cc-empty input { color: transparent; }
.cf-other.cc-empty input:focus { color: var(--ink); } .cf-other.cc-empty input:focus + .cc-ph { display: none; }
.cf-rowo { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.cf-rowo .sun { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--paper-2); display: grid; place-items: center; }
.cf-rowo .sun svg { width: 24px; height: 24px; }
.cf-rowo .t { font: 600 .94rem/1.2 var(--font-body); }
.cf-rowo .t small { display: block; font: 400 .78rem/1.3 var(--font-body); color: var(--ink-2); margin-top: 2px; }
.cf-rowo input[type="time"] { border: 0; background: none; padding: 0; min-height: 0; font: inherit; color: inherit; border-radius: 0; }
.cf-size { height: 104px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.cf-size .art { position: absolute; inset: 10px 10px 50px; overflow: hidden; display: grid; place-items: end center; }
.cf-size .t { position: relative; font: 600 .97rem/1.2 var(--font-body); }
.cf-size .t small { display: block; font: 400 .78rem/1.3 var(--font-body); color: var(--ink-2); margin-top: 2px; }
.cf-dots { display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-end; justify-content: center; max-width: 100%; }
.cf-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--clay); display: block; }
.cf-dots i.a { width: 8px; height: 8px; background: var(--ink-2); }
.cf-exart { font: 600 1.9rem/1 var(--serif); color: var(--clay-text); letter-spacing: .12em; }
/* scrim, theme sheet, modal */
.cf-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(15,10,7,.45); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.cf-scrim.on { opacity: 1; visibility: visible; }
.cf-tsh { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 92dvh; display: flex; flex-direction: column; color: var(--ink); background: var(--paper); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.4); transform: translateY(105%); visibility: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility .3s; }
.cf-tsh.on { transform: none; visibility: visible; }
.cf-tsh-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; }
.cf-tsh-h h2 { flex: 1; font: 500 1.42rem/1.15 var(--serif); letter-spacing: -.01em; }
.cf-tsh-h h2 em { font-style: italic; color: var(--clay-text); }
.cf-tsh-s { position: relative; padding: 0 16px 10px; }
.cf-tsh-s .ic { position: absolute; left: 30px; top: 15px; color: var(--ink-3); }
.cf-tsh-s input { width: 100%; height: 50px; padding: 0 16px 0 44px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 1rem; }
.cf-tsh-s input:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(221,95,40,.2); }
.cf-tsh-b { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.cf-tsh-sub { margin: 0 0 10px; font-size: .88rem; color: var(--ink-2); }
.cf-tsh-more { margin: 16px 0 8px; font: 600 .7rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cf-tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cf-ph { position: relative; height: 150px; border: 0; border-radius: 18px; overflow: hidden; color: #fff; background: #2a2320; text-align: left; padding: 0; cursor: pointer; font: inherit; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.cf-ph:active { transform: scale(.97); }
.cf-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.cf-ph:hover img { transform: scale(1.05); }
.cf-ph::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.74)); z-index: 1; }
.cf-ph .lab { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2; font: 600 1rem/1.15 var(--font-body); text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.cf-ph .lab small { display: block; font: 400 .78rem/1.3 var(--font-body); opacity: .9; margin-top: 2px; }
.cf-ph .badge { position: absolute; z-index: 2; top: 9px; left: 9px; background: var(--clay); color: #181512; font: 600 .7rem/1 var(--font-body); padding: 6px 8px; border-radius: 99px; }
.cf-ph .badge.season { background: #FFB547; }
.cf-ph[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--clay), 0 8px 22px rgba(221,95,40,.3); }
.cf-ph .tick { position: absolute; z-index: 2; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--clay); color: #181512; display: grid; place-items: center; }
.cf-ph .tick .ic { width: 15px; height: 15px; stroke-width: 3; }
.cf-ph.own { background: var(--clay); color: #181512; }
.cf-ph.own::before { display: none; }
.cf-ph.own .lab { text-shadow: none; }
.cf-ph.own .big { position: absolute; inset: 16px 16px 58px; display: grid; place-items: center; }
.cf-ph.own .big .ic { width: 54px; height: 54px; stroke-width: 1.5; }
.cf-tsh-none { margin: 4px 0 12px; font-size: .95rem; color: var(--ink-2); }
.cf-cv-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px 0 4px; margin: 0 0 6px -4px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 600 .88rem var(--font-body); cursor: pointer; }
.cf-cv h3 { font: 500 1.35rem/1.2 var(--serif); margin-bottom: 4px; }
.cf-cv .q { display: block; margin: 14px 0 6px; font: 600 .94rem var(--font-body); color: var(--ink); letter-spacing: 0; text-transform: none; }
.cf-cv .q small { display: block; font-weight: 400; font-size: .85rem; color: var(--ink-2); margin-top: 2px; }
.cf-cv-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.cf-cv-opt { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 14px; border: 0; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line) inset; text-align: left; cursor: pointer; font: inherit; letter-spacing: 0; text-transform: none; margin: 0; }
.cf-cv-opt:hover { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 25%, transparent) inset, 0 6px 18px rgba(0,0,0,.08); }
.cf-cv-opt .ic { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--clay-soft); color: var(--clay-text); }
.cf-cv-opt b { font-size: .97rem; } .cf-cv-opt small { font-size: .82rem; color: var(--ink-2); line-height: 1.35; }
.cf-ai { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--paper-2); }
.cf-ai p { margin: 0 0 10px; font-size: .88rem; color: var(--ink-2); }
.cf-ai textarea { width: 100%; min-height: 96px; padding: 10px 12px; font-size: .85rem; line-height: 1.4; resize: vertical; }
.cf-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cf-match { margin-top: 12px; font-size: .88rem; color: var(--ink-2); } .cf-match select { min-height: 40px; padding: 0 8px; }
.cf-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,10,7,.6); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.cf-modal.on { opacity: 1; visibility: visible; }
/* v95: the resume question. (v94 used class "box", which the site's checkbox style shrinks to 28 x 28 px: a tiny box with a scrollbar) */
.cf-mbox { position: relative; width: min(440px, 100%); height: auto; max-height: calc(100dvh - 32px); overflow: auto; padding: 24px 24px 20px; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.cf-mbox h2 { margin: 0 0 8px; font: 500 1.5rem/1.2 var(--serif); letter-spacing: -.01em; }
.cf-mbox p { color: var(--ink-2); font-size: .98rem; line-height: 1.45; }
.cf-mbox .cf-acts { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; } .cf-mbox .cf-acts .btn { flex: 1 1 150px; min-height: 48px; }
@media (max-width: 699px) {
  .cf-modal { align-items: flex-end; padding: 0; }
  .cf-mbox { width: 100%; max-height: 90dvh; border-radius: 22px 22px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
}
:root[data-cf-modal] .cf-big, :root[data-cf-modal] .cf-dname, :root[data-cf-modal] .cf-coach, :root[data-cf-modal] .cf-face { visibility: hidden !important; }
/* phones: the checklist is a sheet */
@media (max-width: 1023px), (max-height: 559px) {
  .cf-side { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; max-height: 88dvh; overflow: auto; border-radius: 22px 22px 0 0; padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateY(105%); visibility: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility .3s; box-shadow: 0 -12px 40px rgba(0,0,0,.35); }
  .cf-side.open { transform: none; visibility: visible; }
  :root[data-cf-q] .cf-bar, :root[data-cf-q] .cf-dname { visibility: hidden; }
}
/* laptops: the checklist stands beside the card, Publish in view at 1366 x 657 */
@media (min-width: 1024px) and (min-height: 560px) {
  .cf { grid-template-columns: minmax(0, 1fr) 372px; grid-template-rows: minmax(0, 1fr); padding-top: 66px; }
  .cf-tools { margin-left: 18px; flex: 0 1 auto; }
  .cf-list { display: none; }
  .cf-stage { grid-column: 1; grid-row: 1; padding: 0 0 8px; justify-content: center; }
  .cf-big { display: inline-flex; position: absolute; top: 50%; margin-top: -28px; z-index: 50; width: 56px; height: 56px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #181512; box-shadow: 0 8px 24px rgba(0,0,0,.3); align-items: center; justify-content: center; cursor: pointer; }
  .cf-big:hover { background: #fff; transform: scale(1.05); }
  .cf-big.l { right: calc(100% + 14px); } .cf-big.r { left: calc(100% + 14px); }
  .cf-big .ic { width: 24px; height: 24px; }
  .cf-dname .cf-arrow { display: none; }
  .cf-side { grid-column: 2; grid-row: 1; position: relative; margin: 0 24px 16px 0; padding: 16px 20px 14px; border-radius: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.3); align-self: start; max-height: calc(100% - 16px); display: flex; flex-direction: column; transition: opacity .2s; }
  .cf-side-scroll { flex: 1 1 auto; min-height: 60px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
  .cf-side .cf-sheet-h .cf-x { display: none; }
  .cf-bar { display: none; }
  .cf-row { min-height: 44px; padding: 3px 4px; }
  :root[data-cf-q] .cf-side { opacity: .3; pointer-events: none; }
  :root[data-cf-q] .cf-big { opacity: 0; pointer-events: none; }
  .cf-ed { left: auto; right: auto; bottom: auto; top: 0; width: 360px; border-radius: 20px; padding: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.45); transform: translateX(-8px); opacity: 0; transition: opacity .2s, transform .2s, top .2s; max-height: calc(100vh - 32px); overflow: auto; }
  .cf-ed.on { transform: none; opacity: 1; }
  .cf-ed .ptr { display: block; position: absolute; left: -10px; width: 20px; height: 20px; background: var(--paper); transform: rotate(45deg); border-radius: 3px; }
  .cf-tsh { left: 50%; top: 50%; bottom: auto; width: min(860px, calc(100vw - 48px)); height: min(720px, calc(100vh - 48px)); border-radius: 22px; transform: translate(-50%, -46%); opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1), visibility .25s; }
  .cf-tsh.on { transform: translate(-50%, -50%); opacity: 1; }
  .cf-tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .cf-ph { height: 170px; }
  .cf-tsh-h { padding: 18px 22px 8px; } .cf-tsh-s { padding: 0 22px 12px; } .cf-tsh-s .ic { left: 36px; } .cf-tsh-b { padding: 4px 22px 22px; }
}
@media (min-width: 1024px) and (min-height: 560px) and (max-height: 700px) {
  .cf-side { padding: 12px 18px 12px; } .cf-row { min-height: 40px; } .cf-side h2 { font-size: 1.18rem; } .cf-side-note { display: none; } .cf-extras-h { margin-top: 8px; } .cf-send { min-height: 50px; margin-top: 10px; }
}
/* short windows (a phone on its side): the screen fits the window, so the bottom button stays in reach; the plan lines wait in the list */
@media (max-height: 559px) {
  .cf { min-height: 0; }
  .cf-bplan { display: none; }
  .cf-bar { padding-top: 4px; } .cf-bar-l { margin-bottom: 4px; } .cf-cta { min-height: 46px; }
  .cf-dname { height: 36px; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf *, .cf *::before, .cf *::after, .cf-tools * { animation: none !important; transition: none !important; }
}
/* ---------- v114 Local pros (Oct 30): directory band and cards, a pro's page, the ask card, joining in steps, plans, the pro dashboard.
   Mockup: docs/reviews/local-pros-2026-10/. The dark band uses the home page's ink (works in both themes). ---------- */
.lp-hero { --lp-bg: #12100E; background: var(--lp-bg); color: #F6F1EA; position: relative; overflow: hidden; padding: clamp(28px, 6vw, 56px) 0 clamp(24px, 4vw, 40px); }
.lp-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 70% at 88% 10%, rgba(221,95,40,.30), transparent 70%), radial-gradient(40% 60% at 6% 100%, rgba(201,162,74,.16), transparent 70%); }
.lp-hero .wrap { position: relative; }
.lp-hero .eyebrow { color: #C9C1B5; }
.lp-hero h1 { font-size: clamp(2rem, 5.4vw, 3.4rem); margin-top: 8px; max-width: 18ch; }
.lp-hero h1 em { color: #F08A57; }
.lp-lede { color: #D8CFC2; margin-top: 10px; max-width: 60ch; font-size: 1.02rem; }
.lp-party { margin-top: 14px; font-size: .9rem; color: #D8CFC2; } .lp-party b { color: #fff; font-weight: 600; }
.lp-where { margin-top: 10px; font-size: .9rem; color: #D8CFC2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .lp-where b { color: #fff; font-weight: 600; } .lp-where .ic { width: 16px; height: 16px; color: #F08A57; flex: none; }
.lp-where .link-btn, .lp-where-form .link-btn { color: #F08A57; }
.pw-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; max-width: 560px; }
.pw-form input { flex: 1 1 220px; min-width: 0; min-height: 48px; font-size: 1rem; }
.pw-form .hint { flex-basis: 100%; margin: 0; min-height: 0; }
.lp-hero .pw-form .hint { color: #D8CFC2; } .lp-hero .pw-form .hint.error { color: #FFB59A; }
.shop-local .shop-where { margin: 0; font-size: .9rem; color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .shop-local .shop-where .ic { width: 16px; height: 16px; color: var(--clay-text); flex: none; }
.shop-local .natl-list { margin-top: 0; }
.lp-body { gap: 22px; }
.lp-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; }
.lp-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; min-width: 0; flex: 1 1 420px; }
.lp-chips::-webkit-scrollbar { display: none; }
.lp-chip { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 14px; font: 500 .86rem var(--font-body); color: var(--ink-2); cursor: pointer; }
.lp-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lp-sel select { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 8px 14px; font: 500 .86rem var(--font-body); }
.lp-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: .88rem; color: var(--ink-2); margin: -8px 0 0; }
.lp-meta b { color: var(--ink); font-weight: 600; }
.vendor-grid.lp-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 20px 18px; margin-top: 0; }
@media (min-width: 960px) { .vendor-grid.lp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-card { display: flex; flex-direction: column; border-radius: 18px; transition: transform .15s ease; }
a.lp-card:hover { transform: translateY(-2px); }
.lp-ph { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.lp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-emoji { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; font-size: 1.7rem; }
.lp-fit { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.94); color: #181512; font: 600 .72rem var(--font-body); border-radius: 999px; padding: 4px 10px; }
.lp-count { position: absolute; right: 10px; top: 10px; display: inline-flex; gap: 4px; align-items: center; background: rgba(24,21,18,.66); color: #fff; font: 600 .72rem var(--font-body); border-radius: 999px; padding: 3px 8px; }
.lp-count .ic { width: 13px; height: 13px; }
.lp-bd { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lp-bd h3 { font: 400 1.22rem/1.15 var(--serif); }
.lp-row { display: flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--ink-2); margin: 0; }
.lp-row .ic { width: 15px; height: 15px; flex: none; }
.lp-ok { color: var(--sage); font-weight: 600; }
.lp-line { font-size: .84rem; color: var(--ink-3); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.lp-price { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.lp-ft .btn { flex: none; }
.lp-tiles { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .lp-tiles { grid-template-columns: 1fr 1fr; } }
.lp-tile { border-radius: 20px; padding: 22px 24px; display: grid; gap: 8px; align-content: start; }
.lp-tile h3 { font-size: 1.5rem; } .lp-tile p { margin: 0; color: var(--ink-2); }
.lp-t1 { background: var(--clay-soft); } .lp-t2 { background: var(--sage-bg); }
.lp-join { background: #12100E; color: #F6F1EA; border-radius: 22px; padding: 24px 26px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; position: relative; overflow: hidden; }
.lp-join::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 80% at 100% 0%, rgba(221,95,40,.32), transparent 70%); }
.lp-join > * { position: relative; }
.lp-join .eyebrow { color: #F08A57; } .lp-join h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 6px 0; } .lp-join h2 em { color: #F08A57; }
.lp-join p { color: #D8CFC2; margin: 0; max-width: 56ch; }
.lp-join-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-join .btn.ghost { color: #F6F1EA; border-color: #F6F1EA; }
/* a pro's page */
.lp-crumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; color: var(--ink-3); padding-top: 18px; padding-bottom: 4px; }
.lp-crumb a { color: var(--ink-2); text-decoration: none; }
.lp-pf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 72px; }
@media (min-width: 960px) { .lp-pf { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } }
.vprofile.lp-main { max-width: none; min-width: 0; }
.lp-head { display: grid; gap: 8px; }
.lp-head h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0; font-weight: 400; }
.lp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-tag { display: inline-flex; gap: 5px; align-items: center; font: 600 .72rem var(--font-body); border-radius: 999px; padding: 3px 10px; background: var(--clay-soft); color: var(--clay-2); }
.lp-tag.ok { background: var(--sage-bg); color: var(--sage); }
.lp-tag .ic { width: 13px; height: 13px; }
.lp-pmeta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .92rem; color: var(--ink-2); margin: 0; }
.lp-pmeta span { display: inline-flex; gap: 6px; align-items: center; } .lp-pmeta .ic { width: 16px; height: 16px; }
.lp-mosaic { display: grid; gap: 6px; border-radius: 18px; overflow: hidden; margin-top: 16px; position: relative; aspect-ratio: 16 / 9; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lp-mosaic button { padding: 0; border: 0; background: var(--paper-2); cursor: zoom-in; min-width: 0; min-height: 0; }
.lp-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-mosaic .lp-m0 { grid-row: 1 / 3; }
.lp-mo1 { grid-template-columns: 1fr; grid-template-rows: 1fr; } .lp-mo1 .lp-m0 { grid-row: auto; }
.lp-mo2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; } .lp-mo2 .lp-m0 { grid-row: auto; }
.lp-mo3 { grid-template-columns: 2fr 1fr; } .lp-mo4 { grid-template-columns: 2fr 1fr 1fr; } .lp-mo4 .lp-m3 { grid-column: 2 / 4; }
.lp-mo-e { display: flex; align-items: center; justify-content: center; gap: 22px; background: var(--paper-2); font-size: 2.6rem; aspect-ratio: 21 / 9; }
.lp-mosaic .lp-all { position: absolute; right: 12px; bottom: 12px; background: rgba(255,255,255,.95); color: #181512; border-radius: 999px; padding: 7px 13px; font: 600 .8rem var(--font-body); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.lp-mosaic .lp-all .ic { width: 15px; height: 15px; }
@media (max-width: 600px) { .lp-mosaic { aspect-ratio: 1; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; } .lp-mosaic .lp-m0 { grid-row: auto; grid-column: 1 / 3; } .lp-mosaic .lp-m3, .lp-mosaic .lp-m4 { display: none; } .lp-mo1 { grid-template-rows: 1fr; } .lp-mo2 { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; } .lp-mo2 .lp-m0 { grid-column: auto; } }
.lp-secnav { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-top: 24px; overflow-x: auto; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 60px); background: var(--bg); z-index: 3; }
.lp-secnav button { border: 0; background: none; padding: 12px 0; font: 500 .92rem var(--font-body); color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.lp-secnav button:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--clay); }
.lp-sec { padding: 24px 0; border-bottom: 1px solid var(--line); display: grid; gap: 12px; scroll-margin-top: 120px; }
.lp-sec h2 { font-size: 1.65rem; }
.lp-sec p { max-width: 66ch; color: var(--ink-2); margin: 0; }
.lp-sec .lp-lead { color: var(--ink); font-size: 1.05rem; }
.lp-info { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
@media (min-width: 620px) { .lp-info { grid-template-columns: 1fr 1fr; } .lp-info > div:nth-child(odd) { border-right: 1px solid var(--line); } }
.lp-info > div { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; font-size: .92rem; margin-bottom: -1px; }
.lp-k { font: 600 .72rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
.lp-k .ic { width: 14px; height: 14px; }
:root .lp-h3 { font: 600 .95rem var(--font-body); letter-spacing: 0; margin-top: 4px; }
.lp-incl { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0; margin: 0; list-style: none; }
@media (min-width: 620px) { .lp-incl { grid-template-columns: 1fr 1fr; } }
.lp-incl li { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; color: var(--ink-2); padding: 0; }
.lp-incl li::before { display: none; } .lp-incl .ic { color: var(--sage); width: 16px; height: 16px; flex: none; margin-top: 3px; }
.lp-links { display: flex; gap: 16px; flex-wrap: wrap; } .lp-links a { display: inline-flex; gap: 5px; align-items: center; } .lp-links .ic { width: 14px; height: 14px; }
.lp-side { min-width: 0; }
.lp-ask { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 76px); background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; gap: 12px; box-shadow: var(--shadow); scroll-margin-top: 90px; }
@media (max-width: 959px) { .lp-ask { position: static; box-shadow: none; } }
.lp-ask-top { display: flex; gap: 12px; align-items: center; } .lp-ask-top b { display: block; } .lp-ask-top .muted { font-size: .84rem; }
.lp-av { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: none; background: var(--paper-2); font-size: 1.1rem; gap: 0; }
.lp-av span:not(:first-child) { display: none; }
.lp-from { display: grid; margin: 0; font-size: .82rem; } .lp-from b { font: 400 1.7rem/1.1 var(--serif); color: var(--ink); }
.lp-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: .86rem; } .lp-dl dt { color: var(--ink-3); } .lp-dl dd { margin: 0; }
.lp-wide { width: 100%; justify-content: center; }
.lp-why { font-size: .82rem; color: var(--ink-3); margin: 0; }
.lp-form { display: grid; gap: 10px; } .lp-form textarea { min-height: 120px; }
.lp-acct { display: flex; gap: 8px; align-items: center; font-size: .86rem; color: var(--ink-2); margin: 0; } .lp-acct .ic { width: 16px; height: 16px; }
.lp-priv { display: flex; gap: 8px; font-size: .78rem; color: var(--ink-3); background: var(--paper-2); border-radius: 12px; padding: 10px 12px; margin: 0; }
.lp-priv .ic { color: var(--sage); width: 15px; height: 15px; flex: none; margin-top: 1px; }
.lp-sent { margin: 0; border-radius: 14px; padding: 14px; display: grid; gap: 6px; } .lp-sent p { margin: 0; font-size: .88rem; }
.lp-thread { display: grid; gap: 10px; }
.lp-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-st { font: 600 .72rem var(--font-body); padding: 3px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-3); }
.lp-st.on { background: var(--sage-bg); color: var(--sage); }
.lp-bub { border-radius: 16px; padding: 11px 14px; font-size: .88rem; margin: 0; max-width: 92%; }
.lp-bub small { display: block; font-size: .72rem; color: var(--ink-3); margin-top: 4px; }
.lp-bub.me { background: var(--paper-2); justify-self: end; border-bottom-right-radius: 4px; }
.lp-bub.them { background: var(--clay-soft); border-bottom-left-radius: 4px; }
.lp-contact { border: 1px dashed var(--sage); background: var(--sage-bg); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; font-size: .88rem; }
.lp-contact .lp-k { color: var(--sage); } .lp-contact span:not(.lp-k) { display: flex; gap: 8px; align-items: center; } .lp-contact .ic { width: 15px; height: 15px; }
.lp-bar { display: none; }
@media (max-width: 959px) { .lp-bar { display: flex; position: sticky; bottom: 0; z-index: 5; background: var(--card); border-top: 1px solid var(--line); padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 12px; align-items: center; justify-content: space-between; } .lp-bar b { font: 400 1.25rem var(--serif); } }
:root[data-view="vendor"] .foot { padding-bottom: 70px; }
@media (min-width: 960px) { :root[data-view="vendor"] .foot { padding-bottom: 0; } }
/* joining in steps */
.lp-jn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 28px; padding-bottom: 72px; }
@media (min-width: 960px) { .lp-jn { grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; } }
.lp-jmain { min-width: 0; } .lp-jmain h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); margin-top: 4px; } .lp-jmain > .lead { margin-top: 8px; }
.lp-jmain #vendorJoin { margin-top: 18px; }
.lp-jsteps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; }
.lp-jsteps li { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 12px 5px 5px; font-size: .8rem; display: flex; gap: 8px; align-items: center; color: var(--ink-3); }
.lp-jsteps i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); font-weight: 700; font-size: .74rem; }
.lp-jsteps i .ic { width: 13px; height: 13px; }
.lp-jsteps .done i { background: var(--sage-bg); color: var(--sage); }
.lp-jsteps .on { border-color: var(--ink); color: var(--ink); font-weight: 600; } .lp-jsteps .on i { background: var(--clay); color: var(--on-clay); }
.lp-jcard { margin-top: 18px; max-width: 560px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; gap: 12px; }
.lp-keys { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-keys li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: .9rem; color: var(--ink-2); padding: 0; } .lp-keys li::before { display: none; }
.lp-keys b { color: var(--ink); display: block; }
.lp-ki { width: 28px; height: 28px; border-radius: 9px; background: var(--clay-soft); color: var(--clay-2); display: grid; place-items: center; } .lp-ki .ic { width: 16px; height: 16px; }
.lp-trust { background: var(--paper-2, var(--card)); } .lp-trust h2 { font: 600 1.05rem/1.3 Inter, system-ui, sans-serif; margin: 0; display: flex; align-items: center; gap: 8px; } .lp-trust h2 .ic { width: 18px; height: 18px; color: var(--clay-2); }
.lp-trust .lp-ki { background: transparent; border: 1px solid var(--line); color: var(--ink-2); } .lp-trust a { color: inherit; }
.lp-plans .lp-trust { margin: 28px auto 0; }
.lp-free { background: #12100E; color: #F6F1EA; border-radius: 20px; padding: 22px; display: grid; gap: 10px; align-content: start; align-self: start; position: relative; overflow: hidden; }
.lp-free::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 100% 0%, rgba(221,95,40,.35), transparent 70%); }
.lp-free > * { position: relative; } .lp-free .eyebrow { color: #F08A57; } .lp-free h3 { font-size: 1.6rem; } .lp-free h3 em { color: #F08A57; }
.lp-free p { color: #D8CFC2; font-size: .88rem; margin: 0; }
.lp-free ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: .88rem; } .lp-free li { display: flex; gap: 8px; align-items: flex-start; } .lp-free li .ic { color: #F08A57; width: 16px; height: 16px; flex: none; margin-top: 2px; }
.lp-free .btn { justify-self: start; }
.lp-gate { padding-top: 48px; padding-bottom: 72px; display: grid; gap: 14px; justify-items: start; }
/* plans */
.lp-plans { padding-bottom: 72px; }
.lp-phero { text-align: center; padding: clamp(30px, 6vw, 64px) 0 18px; display: grid; gap: 12px; justify-items: center; }
.lp-phero h1 { font-size: clamp(2.2rem, 6.5vw, 4rem); } .lp-phero p { color: var(--ink-2); max-width: 56ch; margin: 0; }
.lp-zero { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lp-zero span { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: .86rem; font-weight: 600; } .lp-zero b { font: 500 1.1rem var(--serif); color: var(--clay-2); margin-right: 4px; }
.lp-tiers { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 20px 0; max-width: 1000px; margin: 0 auto; }
@media (min-width: 820px) { .lp-tiers { grid-template-columns: repeat(3, 1fr); } }
.lp-tier { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: grid; gap: 12px; align-content: start; position: relative; }
.lp-tier.feat { background: #12100E; color: #F6F1EA; border-color: #12100E; }
.lp-nm { font: 700 .74rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .lp-tier.feat .lp-nm { color: #F08A57; }
.lp-was { font: 400 1.25rem var(--serif); color: var(--ink-3); text-decoration-color: var(--clay); text-decoration-thickness: 2px; } .lp-tier.feat .lp-was { color: #A99F92; }
.lp-now { font: 400 2.6rem/1 var(--serif); } .lp-now small { display: block; font: 400 .84rem/1.35 var(--font-body); color: var(--ink-3); margin-top: 6px; } .lp-tier.feat .lp-now small { color: #C9C1B5; }
.lp-leads { font-weight: 600; padding: 10px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); } .lp-tier.feat .lp-leads { border-color: #3A332D; }
.lp-tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: .86rem; color: var(--ink-2); } .lp-tier.feat ul { color: #D8CFC2; }
.lp-tier li { display: flex; gap: 8px; align-items: flex-start; } .lp-tier li .ic { color: var(--sage); width: 16px; height: 16px; flex: none; margin-top: 2px; } .lp-tier.feat li .ic { color: #7FB592; }
.lp-pop { position: absolute; top: -11px; left: 22px; background: var(--clay); color: var(--on-clay); font: 700 .7rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; }
.lp-tiers.sm { padding: 6px 0; margin: 0; } .lp-tiers.sm .lp-now { font-size: 1.8rem; }
.lp-c { text-align: center; }
.lp-time { display: grid; grid-template-columns: 1fr; max-width: 1000px; margin: 26px auto 0; padding: 0; list-style: none; }
@media (min-width: 820px) { .lp-time { grid-template-columns: repeat(4, 1fr); } }
.lp-time li { padding: 16px 18px; border-left: 2px solid var(--line); display: grid; gap: 4px; }
@media (min-width: 820px) { .lp-time li { border-left: 0; border-top: 2px solid var(--line); } }
.lp-time li.k { border-color: var(--clay); }
.lp-time b { font: 500 1.15rem var(--serif); } .lp-time span { font-size: .86rem; color: var(--ink-2); } .lp-time em { font: 600 .72rem var(--font-body); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lp-keep { max-width: 1000px; margin: 30px auto 0; display: grid; grid-template-columns: 1fr; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px; }
@media (min-width: 820px) { .lp-keep { grid-template-columns: 1fr 1fr 1fr; align-items: center; } }
.lp-keep h3 { font-size: 1.5rem; } .lp-cmp { display: grid; gap: 4px; font-size: .86rem; color: var(--ink-2); } .lp-cmp b { font: 400 1.9rem var(--serif); color: var(--ink); } .lp-cmp.us b { color: var(--clay-2); }
.lp-faq { max-width: 760px; margin: 30px auto 30px; }
.lp-faq details { border-bottom: 1px solid var(--line); padding: 12px 0; } .lp-faq summary { font-weight: 600; cursor: pointer; } .lp-faq p { color: var(--ink-2); font-size: .92rem; margin: 8px 0 0; }
/* the pro dashboard */
.lp-sample { background: var(--clay-soft); border-radius: 12px; padding: 10px 14px; font-size: .86rem; margin: 18px 0 0; }
.lp-db { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 22px; padding-bottom: 72px; }
@media (min-width: 900px) { .lp-db { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; } }
.lp-dnav { display: flex; gap: 4px; overflow-x: auto; align-self: start; }
@media (min-width: 900px) { .lp-dnav { flex-direction: column; position: sticky; top: 80px; } }
.lp-dnav button { border: 0; background: none; border-radius: 10px; padding: 9px 12px; text-align: left; font: 500 .9rem var(--font-body); color: var(--ink-2); display: flex; gap: 8px; align-items: center; white-space: nowrap; cursor: pointer; }
.lp-dnav button[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(24,21,18,.08); }
.lp-dnav .ic { width: 16px; height: 16px; } .lp-n { margin-left: auto; background: var(--clay); color: var(--on-clay); border-radius: 999px; font-size: .7rem; font-weight: 700; padding: 1px 7px; }
.lp-dmain { display: grid; gap: 16px; align-content: start; min-width: 0; } .lp-dmain h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-top: 2px; } .lp-dmain > .muted { margin: 0; max-width: 62ch; }
.lp-meter { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; }
.lp-mt { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; font-size: .88rem; }
.lp-bar2 { height: 8px; border-radius: 99px; background: var(--paper-2); overflow: hidden; } .lp-bar2 i { display: block; height: 100%; background: var(--sage); }
.lp-req { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; } .lp-req.new { border-color: var(--clay); }
.lp-rh { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.lp-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .86rem; color: var(--ink-2); margin: 0; } .lp-facts span { display: inline-flex; gap: 6px; align-items: center; } .lp-facts .ic { width: 15px; height: 15px; }
.lp-msg { font-size: .92rem; color: var(--ink-2); background: var(--paper-2); border-radius: 12px; padding: 10px 12px; margin: 0; }
.lp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lp-done { display: flex; gap: 6px; align-items: flex-start; font-size: .88rem; margin: 0; color: var(--sage); } .lp-done .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.lp-ph2 { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: end; }
.lp-edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 1000px) { .lp-edit { grid-template-columns: minmax(0, 1fr) 280px; } }
.lp-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-ownlink { margin-top: 18px; } .lp-ownlink .ref-link input { flex: 1; min-width: 0; }
.lp-plist li { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: .88rem; color: var(--ink-3); }
.lp-plist li::before { display: none; } .lp-plist b { display: block; color: var(--ink); font-size: .95rem; } .lp-plist .ic { width: 18px; height: 18px; color: var(--clay); flex: none; margin-top: 2px; }
.lp-plist li.soon { opacity: .7; }
/* v118 (MR31): referral rewards on the plans page and the dashboard's Referrals tab; the Partner badge */
.lp-ref { max-width: 760px; margin: 30px auto 0; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: grid; gap: 10px; }
.lp-ref h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0; } .lp-ref p { margin: 0; color: var(--ink-2); font-size: .94rem; } .lp-ref .fineprint { font-size: .8rem; }
.lp-ref.in { margin: 0; max-width: none; background: none; border: 0; padding: 0; }
.lp-refl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-refl li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--ink-2); } .lp-refl li::before { display: none; }
.lp-refl .ic { width: 18px; height: 18px; color: var(--clay); flex: none; margin-top: 2px; } .lp-refl b { color: var(--ink); }
.lp-ms li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; } .lp-ms li.got { border-color: var(--sage); } .lp-ms li.got .ic { color: var(--sage); }
.lp-reflink { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 4px 16px 16px; }
@media (min-width: 700px) { .lp-reflink { grid-template-columns: minmax(0, 1fr) auto; } }
.lp-qr { display: grid; gap: 8px; justify-items: center; padding-top: 14px; } .lp-qrb { width: 150px; height: 150px; display: grid; place-items: center; background: #fff; border-radius: 12px; }
.lp-qrb img { width: 150px; height: 150px; display: block; border-radius: 12px; } .lp-qrb .muted { font-size: .8rem; text-align: center; padding: 8px; }
.lp-refn { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .88rem; color: var(--ink-2); margin: 0; } .lp-refn b { color: var(--ink); }
.lp-partner { color: var(--clay-2); font-weight: 600; }
.lp-code { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 14px 0 0; } .lp-code span { font-size: .8rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; width: 100%; }
.lp-code b { font: 600 1.25rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); background: var(--paper-2); border-radius: 10px; padding: 6px 12px; word-break: break-all; } .lp-tag.partner { background: var(--clay-soft); color: var(--clay-2); }

/* ---------- v128 (Nov 2): My plan polish from the UI review (three reviewers: visual, phones and accessibility, usability; measured in
   the browser). Small fixes only, close to the current design. ---------- */
/* the Coming / Maybe / Can't pill on a guest row: its words sat at the top of a 40px block; now centered, the same 32px as in .gacts */
.rsvp { display: inline-flex; align-items: center; justify-content: center; }
.glist li > .rsvp, .gacts .rsvp { min-height: 32px; padding: 0 12px; font: 600 .76rem var(--font-body); }
.glist li > span.rsvp, .gacts span.rsvp { cursor: default; }
/* guest rows: the avatar matches the Replies feed (30px), the remove X keeps its distance from Invite */
.glist .avatar { width: 30px; height: 30px; font-size: .75rem; }
.gacts { gap: 10px; }
/* the guests panel: every block 16px apart (was 30, 22, 30, 16) */
.gadd { margin: 0; } .grem { margin-top: 0; }
/* reply reminders: the label carried the global 8px label margin and a 48px-tall checkbox, so the note on the right sat 4px low */
.grem label { margin: 0; } .grem li { min-height: 44px; }
.grem input[type=checkbox] { height: 18px; min-height: 0; }
.grem input[type=checkbox]:focus-visible, .after-item input:focus-visible { outline: 2.5px solid var(--clay); outline-offset: 3px; box-shadow: none; }
/* Shop and book, an open row: What it cost and Bought on one line (the label's 8px margin pushed Bought 4px down) */
.pc-amt { margin: 0; }
/* After the party: 8px between the checklist rows like every other list (was 16px) */
.after-item { margin: 0; }
.after-notes label { font-size: .95rem; color: var(--text); }
/* "Add your own" isn't stretched to the input's height */
#catAddForm { align-items: center; }
.pc-signup > summary .small-note { font-weight: 400; }
/* one corner for row-level cards */
.cv-stats .stat, .dw, .pc-grp .scat, .game, .survey { border-radius: 16px; }
/* small labels a touch bigger: DAYS LEFT was 9px, the tile labels 10.6px */
.flipcal .fc-lab { font-size: .62rem; letter-spacing: .1em; }
.cv-stats .stat span { font-size: .72rem; }
/* pop-ups: the close X lines up with the title */
.dash-dlg .auth-x { top: 20px; }
/* the Share pop-up's "Try it first" line: no gap before the full stop */
.sh-try .link-btn { min-height: 0; padding: 0; display: inline; vertical-align: baseline; }
/* the invitation's shadow painted over the Share link button under it, muddying the orange */
.cv-share { position: relative; }
/* the "invitation is live" banner repeated the Share link button that sits right under the invitation on wide screens */
@media (min-width: 900px) { .succ-slim .succ-share { display: none; } }
.welcome .x .ic { width: 18px; height: 18px; }
/* a tap on a step's number or check circle opens the step, like the title */
.lay-cover .chead::before { content: ""; position: absolute; left: 0; top: 14px; width: 40px; height: 40px; border-radius: 50%; }
/* the focus box only on things you can act on: headings focused for screen readers (tabindex -1) don't get the ring */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
/* header: Sign in the size of the nav links */
.nav-acct .link-btn { font-size: .92rem; }
/* phones: "Local pros" was cut off at 360px; the wordmark gives way to the cake */
@media (max-width: 374px) { .nav .brand { font-size: 0; gap: 0; } .nav .brand svg { width: 26px; height: 26px; } }
/* phones: things you tap are 44px */
@media (pointer: coarse) {
  .lay-cover .btn.small, .dash-dlg .btn.small, .pc-go, .glist li > .rsvp, .gacts .rsvp { min-height: 44px; }
  .lay-cover .icbtn, .dash-dlg .auth-x, .welcome .x { width: 44px; height: 44px; }
  .lay-cover .panel .link-btn, .cv-story .succ-in .link-btn { display: inline-flex; align-items: center; min-height: 44px; }
}
/* phones: Shop and book rows keep a small chevron, so rows without a Shop button still look like they open */
@media (max-width: 600px) { .scat.pc .scat-chev { display: block; width: 16px; height: 16px; } }
/* dark mode: the white check on the green circles was 2.4:1, the avatars vanished into the card, the flip calendar into the page */
:is(.lay-cover .ch.done > .num, .sr-done, .scat.done .pc-tick, .pc-ic.on) { color: var(--paper); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.glist .avatar, .feed-row .av) { background: var(--line); } :root:not([data-theme="light"]) .flipcal { box-shadow: 0 0 0 1px var(--line), 0 12px 26px -14px rgba(0,0,0,.55); } }
:root[data-theme="dark"] :is(.glist .avatar, .feed-row .av) { background: var(--line); }
:root[data-theme="dark"] .flipcal { box-shadow: 0 0 0 1px var(--line), 0 12px 26px -14px rgba(0,0,0,.55); }
/* ---------- v129 (Nov 2): the review's recommendations (U45; Anu: "I agree with all of them") ---------- */
/* small orange words in the deep saffron clay the brand book keeps for them (4.95:1 on paper; was 3.4:1); buttons and big type stay bright.
   The "need attention" line sits on the photo wash, which is greyer than paper, so it goes a shade deeper still (about 4.7:1). */
:root { --clay-text: var(--clay-2); --attn: #A63F0B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --attn: var(--clay-2); } }
:root[data-theme="dark"] { --attn: var(--clay-2); }
.cv-attn { color: var(--attn); text-decoration-color: currentColor; }
/* the tiles open The guests */
button.cv-stats { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; width: 100%; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cv-stats .stat { display: block; }
button.cv-stats:hover .stat { border-color: var(--line-2, var(--line)); }
/* Reply reminders as one line that opens */
.grem > summary { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; list-style: none; }
.grem > summary::-webkit-details-marker { display: none; }
.grem > summary span { margin-left: auto; color: var(--muted); font-size: .84rem; }
.grem > summary .ic { width: 16px; height: 16px; color: var(--ink-3); transition: transform .2s ease; }
.grem[open] > summary .ic { transform: rotate(180deg); }
.grem[open] > summary { margin-bottom: 4px; }
/* the place on the invitation */
.pl-on { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font: 600 .76rem var(--font-body); color: var(--sage); vertical-align: middle; white-space: nowrap; }
.pl-on .ic { width: 14px; height: 14px; }
/* the helper pop-up's job chips: the checkbox beside its word */
.hchip { display: inline-flex; align-items: center; gap: 6px; }
.hchip input { width: 16px; height: 16px; min-height: 0; margin: 0; flex: none; }
/* phones: header and footer links 44px to tap */
@media (max-width: 400px) { .nav .nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; } .nav-signin { min-height: 44px; } }
@media (pointer: coarse) { .foot .foot-social a, .foot > .wrap > p a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; } }