@font-face { font-family: "Instrument Serif"; src: url("https://fonts.gstatic.com/s/instrumentserif/v5/jizBRFtNs2ka5fXjeivQ4LroWlx-2zI.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("https://fonts.gstatic.com/s/instrumentserif/v5/jizHRFtNs2ka5fXjeivQ4LroWlx-6zATiw.ttf") format("truetype"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-700.ttf") format("truetype"); font-weight: 700 950; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-800.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --ink: #29131f;
  --muted: #735f68;
  --paper: #fff9f4;
  --surface: #ffffff;
  --surface-2: #f5f1ec;
  --line: #e5dfda;
  --coral: #ff4f7b;
  --coral-deep: #d82c62;
  --plum: #641547;
  --plum-2: #a92b78;
  --butter: #ffe668;
  --mint: #c8f28d;
  --sky: #9fe8ff;
  --lavender: #d7c3ff;
  --danger: #b42318;
  --success: #1b7f50;
  --shadow: 0 24px 70px rgba(52, 39, 42, 0.10);
  --shadow-sm: 0 8px 24px rgba(52, 39, 42, 0.07);
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "DM Sans";
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.narrow { width: min(780px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: 88px 0; }
.section.tight { padding: 56px 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 0 7px; border-radius: 0; border-bottom: 1px solid #caaeb7;
  background: transparent; color: var(--plum);
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.display {
  font-size: clamp(48px, 7vw, 86px); line-height: .96;
  letter-spacing: -0.055em; margin: 18px 0 22px;
  max-width: 920px; font-weight: 500;
  font-family: "Instrument Serif";
}
.h1 { font-family: "Instrument Serif"; font-weight: 400; font-size: clamp(38px, 5vw, 62px); line-height: 1; letter-spacing: -.035em; margin: 0 0 18px; }
.h2 { font-family: "Instrument Serif"; font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 16px; }
.h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px; }
.lede { font-size: 20px; color: var(--muted); max-width: 720px; }
.small { font-size: 13px; color: var(--muted); }
.muted { color: var(--muted); }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: 16px; }
.stack-lg { display: grid; gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 18px; border: 1px solid transparent;
  border-radius: 8px; font-weight: 750; transition: .18s ease;
  background: var(--surface); color: var(--ink);
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.btn.coral { background: var(--coral); color: #fff; }
.btn.plum { background: var(--plum); color: #fff; }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.soft { background: var(--surface-2); }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 13px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,250,245,.90); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(234,223,216,.75);
}
.site-header .inner { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; font-size: 29px; font-weight: 800; letter-spacing: -.085em; }
.brand-symbol { width: 34px; height: 34px; display: block; }
.wordmark { line-height: 1; font-family: "Fraunces"; transform: rotate(-2deg); transform-origin: center; }
.site-nav { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 700; }
.site-nav a:hover { color: var(--coral-deep); }
.header-actions { display: flex; gap: 10px; }
.mobile-menu { display: none; }
.site-footer .brand-symbol, .sidebar .brand-symbol { filter: brightness(0) invert(1); opacity: .92; }

.hero { padding: 76px 0 82px; overflow: hidden; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 54px; }
.hero-copy .lede { max-width: 610px; }
.hero-actions { margin-top: 30px; }
.trust-line { margin-top: 18px; font-size: 13px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; }
.hero-visual { position: relative; min-height: 590px; }
.hero-photo { position: absolute; inset: 0 0 46px 26px; width: calc(100% - 26px); height: calc(100% - 46px); object-fit: cover; object-position: 49% center; border-radius: 16px; filter: saturate(.82) contrast(.96); }
.photo-note { position: absolute; right: -2px; top: 24px; background: rgba(255,255,255,.94); padding: 12px 14px; border-radius: 8px 0 0 8px; font-family: "Instrument Serif"; font-style: italic; font-size: 15px; color: var(--plum); }
.demo-card {
  position: absolute; left: 0; right: 54px; bottom: 0; z-index: 2;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.97);
  padding: 19px; box-shadow: var(--shadow); backdrop-filter: blur(16px); overflow: hidden;
}
.window-dots { display: flex; gap: 6px; margin-bottom: 16px; }
.window-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.demo-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.demo-title { font-size: 25px; font-weight: 900; letter-spacing: -.03em; }
.demo-meta { color: var(--muted); font-size: 13px; }
.progress-wrap { background: #f3ece7; height: 10px; border-radius: 999px; overflow: hidden; }
.progress { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral), #ff9c8e); }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.mini-card { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fff; }
.mini-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
.mini-value { font-size: 22px; font-weight: 900; margin-top: 4px; }
.task-card { margin-top: 12px; background: var(--mint); border-radius: 18px; padding: 16px; }
.avatar-stack { display: flex; padding-left: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--lavender); border: 3px solid #fff; margin-left: -8px; font-size: 11px; font-weight: 900; }

.pain-strip { background: #31282a; color: #fff; padding: 28px 0; }
.pain-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pain-strip strong { font-size: clamp(22px, 3vw, 32px); letter-spacing: -.03em; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: none; }
.card.soft { background: var(--surface-2); }
.card.lavender { background: var(--lavender); border-color: transparent; }
.card.mint { background: var(--mint); border-color: transparent; }
.card.butter { background: #fff1c9; border-color: transparent; }
.card.sky { background: var(--sky); border-color: transparent; }
.card.coral { background: #f4e6e7; border-color: transparent; }
.icon-badge { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 19px; box-shadow: none; border: 1px solid var(--line); margin-bottom: 18px; }
.feature-bento { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
.feature-bento .wide { min-height: 330px; }
.feature-bento .stacked { display: grid; gap: 20px; }
.quote-card { position: relative; overflow: hidden; padding: 38px; border-radius: 14px; background: #643047; color: #fff; }
.quote-card::after { content: none; }
.quote-card p { font-size: clamp(28px, 4vw, 44px); letter-spacing: -.035em; line-height: 1.08; margin: 0; font-weight: 850; }

.steps { counter-reset: step; }
.step { position: relative; padding-left: 72px; min-height: 80px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 16px;
  display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 900;
}

.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: stretch; }
.price-card { padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: #fff; position: relative; }
.price-card.featured { border: 2px solid var(--plum); transform: translateY(-8px); box-shadow: var(--shadow); }
.price-badge { position: absolute; top: -14px; right: 18px; background: var(--plum); color: #fff; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 800; }
.price { font-size: 46px; font-weight: 950; letter-spacing: -.05em; margin: 10px 0 0; }
.price small { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.feature-list { display: grid; gap: 10px; margin: 20px 0 26px; padding: 0; list-style: none; }
.feature-list li::before { content: "✓"; color: var(--success); font-weight: 900; margin-right: 8px; }

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-q { font-weight: 850; display: flex; justify-content: space-between; gap: 20px; cursor: pointer; }
.faq-a { color: var(--muted); display: none; max-width: 760px; padding-top: 10px; }
.faq-item.open .faq-a { display: block; }

.site-footer { background: #321d27; color: #fff8f3; padding: 56px 0 28px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, .8fr); gap: 30px; }
.footer-col a { display: block; color: #cfc4ca; margin: 9px 0; font-size: 14px; }
.footer-col strong { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.footer-bottom { border-top: 1px solid #3a3438; margin-top: 36px; padding-top: 22px; color: #9f959b; font-size: 12px; }

/* App */
.app-body { background: #fbf5f2; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; background: linear-gradient(180deg, #4c2338, #2d1b24); color: #fff; padding: 22px 16px; display: flex; flex-direction: column; }
.sidebar .logo { padding: 4px 8px 20px; }
.side-label { color: #92878e; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; padding: 16px 10px 8px; }
.side-nav { display: grid; gap: 4px; }
.side-nav a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 11px; border-radius: 12px; color: #d6cfd3; font-size: 14px; font-weight: 700; }
.side-nav a:hover, .side-nav a.active { background: rgba(255,255,255,.11); color: #fff; }
.side-nav .nav-emoji { width: 20px; text-align: center; }
.side-bottom { margin-top: auto; }
.plan-chip { padding: 12px; background: #342f32; border-radius: 14px; margin: 8px 0 12px; }
.plan-chip strong { display: block; font-size: 13px; }
.plan-chip span { font-size: 11px; color: #b8adb3; }
.app-main { min-width: 0; }
.app-topbar { position: sticky; top: 0; z-index: 30; height: 72px; background: rgba(251,245,242,.91); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; }
.app-title { font-weight: 900; font-size: 18px; }
.app-sub { font-size: 12px; color: var(--muted); }
.app-content { padding: 30px; max-width: 1320px; margin: 0 auto; }
.app-content .h1 { font-size: 42px; }
.mobile-side-toggle { display: none; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.stat .label { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.stat .value { font-size: 28px; font-weight: 950; letter-spacing: -.04em; margin-top: 4px; }
.stat .note { margin-top: 6px; color: var(--muted); font-size: 12px; }
.app-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(290px, .6fr); gap: 20px; margin-top: 20px; align-items: start; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.panel-title { font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.panel-note { color: var(--muted); font-size: 12px; margin-top: 2px; }
.next-action { background: #f3ebed; border: 1px solid #e3d4d8; border-radius: 12px; padding: 22px; }
.next-action strong { font-size: 23px; letter-spacing: -.03em; }
.task-list { display: grid; gap: 9px; }
.task { display: flex; align-items: flex-start; gap: 11px; padding: 12px; border-radius: 14px; background: #faf8f6; }
.check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #cbbfc5; display: grid; place-items: center; flex: 0 0 auto; font-size: 12px; }
.task.done .check { background: var(--success); border-color: var(--success); color: #fff; }
.task.done .task-name { text-decoration: line-through; color: var(--muted); }
.task-name { font-weight: 760; }
.task-meta { font-size: 12px; color: var(--muted); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
td { padding: 13px 12px; border-bottom: 1px solid #f0eae6; font-size: 14px; vertical-align: middle; }
.person { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.person-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lavender); font-weight: 900; font-size: 12px; }
.badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #f1ece9; color: var(--muted); }
.badge.success { background: #e5f6ec; color: var(--success); }
.badge.warning { background: #fff2d3; color: #8a6300; }
.badge.plum { background: var(--lavender); color: var(--plum); }
.badge.danger { background: #ffe7e5; color: var(--danger); }

.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 800; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid #d9cec8; border-radius: 12px; background: #fff; min-height: 46px; padding: 10px 12px; color: var(--ink); outline: none;
}
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--plum-2); box-shadow: 0 0 0 3px rgba(125,74,131,.10); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.input-row { display: flex; gap: 10px; }
.switch { display: inline-flex; align-items: center; gap: 10px; }
.switch input { width: 42px; height: 24px; }

.poll-card { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.poll-option { margin-top: 10px; }
.poll-option-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.bar { height: 9px; border-radius: 999px; background: #f0e8e4; overflow: hidden; margin-top: 6px; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), #d99a5e); }
.locked-banner { background: var(--mint); color: #1c5a39; padding: 10px 12px; border-radius: 12px; font-size: 12px; font-weight: 800; margin-top: 12px; }

.money { font-variant-numeric: tabular-nums; }
.money.strong { font-weight: 950; font-size: 22px; }
.budget-item { display: grid; grid-template-columns: 1.5fr .7fr .7fr auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f0eae6; }
.budget-item:last-child { border-bottom: 0; }
.progress-ring { --p: 72; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(var(--coral) calc(var(--p) * 1%), #efe7e2 0); display: grid; place-items: center; }
.progress-ring::after { content: attr(data-label); width: 78px; height: 78px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 950; }

.timeline { position: relative; display: grid; gap: 12px; }
.timeline::before { content: ""; position: absolute; left: 13px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding-left: 40px; }
.timeline-dot { position: absolute; left: 4px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--coral); border: 4px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.timeline-card { padding: 14px; background: #faf8f6; border-radius: 14px; }
.timeline-time { color: var(--muted); font-size: 12px; font-weight: 800; }
.timeline-title { font-weight: 900; }

.notice { padding: 14px 16px; border-radius: 14px; background: var(--sky); color: #234e68; font-size: 13px; }
.notice.warning { background: #fff2d3; color: #765800; }
.notice.coral { background: #ffe8e5; color: #7c2d27; }
.notice.success { background: var(--mint); color: #1d5f3d; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(20,15,18,.48); display: none; place-items: center; padding: 20px; }
.modal-backdrop.show { display: grid; }
.modal { width: min(560px, 100%); max-height: min(760px, 90vh); overflow: auto; background: #fff; border-radius: 22px; padding: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.modal h3 { margin: 0 0 14px; }

.toast { position: fixed; right: 20px; bottom: 20px; z-index: 200; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .22s ease; font-size: 13px; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Onboarding */
.onboard-wrap { min-height: 100vh; background: var(--paper); padding: 30px 20px; }
.onboard-top { max-width: 900px; margin: 0 auto 30px; display: flex; justify-content: space-between; align-items: center; }
.onboard-card { width: min(760px, 100%); margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 34px; }
.step-dots { display: flex; gap: 7px; }
.step-dot { height: 8px; flex: 1; border-radius: 999px; background: #eadfd8; }
.step-dot.active { background: var(--coral); }
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.choice { border: 1.5px solid var(--line); border-radius: 16px; padding: 16px; cursor: pointer; background: #fff; transition: .15s ease; }
.choice:hover, .choice.selected { border-color: var(--plum-2); box-shadow: 0 0 0 3px rgba(125,74,131,.08); }
.choice strong { display: block; }
.choice span { color: var(--muted); font-size: 12px; }
.wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }

/* Guest */
.guest-shell { min-height: 100vh; background: var(--paper); }

.story-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 64px; align-items: center; }
.story-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; border-radius: 14px; filter: saturate(.78) contrast(.96); }
.story-copy { max-width: 520px; }
.story-copy .lede { font-family: "Instrument Serif"; color: var(--ink); font-size: clamp(25px,3vw,38px); line-height: 1.18; }
.photo-credit { display: block; margin-top: 8px; font-size: 10px; color: var(--muted); }
.wide-photo { margin: 28px auto 0; width: min(980px, calc(100% - 40px)); }
.wide-photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 44%; border-radius: 14px; filter: saturate(.78) contrast(.96); display: block; }
body[data-page="home"] .grid-4 > .card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 24px 0; }
body[data-page="home"] .grid-4 .icon-badge { background: transparent; border: 0; width: auto; height: auto; justify-content: start; font-size: 21px; }
body[data-page="templates"] .grid-3 > .card,
body[data-page="how-it-works"] main .grid-3 > .card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 24px 0; }
.guest-top { padding: 22px 0; }
.guest-hero { padding: 34px 0 24px; text-align: center; }
.guest-card { width: min(720px, calc(100% - 40px)); margin: 0 auto 22px; }

/* Free tool */
.calc-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 24px; align-items: start; }
.calc-result { position: sticky; top: 100px; }
.result-big { font-size: 52px; font-weight: 950; letter-spacing: -.055em; }

.empty { text-align: center; padding: 42px 20px; color: var(--muted); }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

@media (max-width: 1050px) {
  .hero-grid, .feature-bento { grid-template-columns: 1fr; }
  .hero-visual { min-height: 520px; max-width: 680px; width: 100%; margin: 0 auto; }
  .story-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .grid-4, .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid .brand-col { grid-column: 1 / -1; }
  .app-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .site-nav, .header-actions .signin { display: none; }
  .mobile-menu { display: inline-flex; }
  .site-header.menu-open .site-nav { display: grid; position: absolute; top: 76px; left: 20px; right: 20px; padding: 18px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
  .grid-2, .grid-3, .form-grid, .calc-grid { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  .story-photo { aspect-ratio: 16 / 10; object-position: 50% 42%; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 80; width: 250px; transform: translateX(-100%); transition: .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .mobile-side-toggle { display: inline-flex; }
  .app-topbar { padding: 0 18px; }
  .app-content { padding: 22px 18px; }
  .budget-item { grid-template-columns: 1fr 1fr; }
  .budget-item .budget-actions { grid-column: 1 / -1; }
  .calc-result { position: static; }
}

@media (max-width: 600px) {
  .container, .narrow { width: min(100% - 28px, var(--max)); }
  .section { padding: 64px 0; }
  .hero { padding-top: 44px; }
  .display { font-size: 48px; }
  .hero-visual { min-height: 450px; }
  .hero-photo { inset: 0 0 38px 0; width: 100%; height: calc(100% - 38px); }
  .demo-card { left: 12px; right: 12px; bottom: 0; padding: 16px; }
  .photo-note { right: 0; }
  .mini-grid, .grid-4, .stat-grid, .choice-grid { grid-template-columns: 1fr; }
  .pain-strip .container { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .onboard-card { padding: 24px 18px; }
  .app-content .h1 { font-size: 36px; }
  .input-row { flex-direction: column; }
}

/* 2026 party-forward brand refresh */
.site-header { background: rgba(255,249,244,.91); border-bottom: 1px solid rgba(41,19,31,.1); }
.site-header .inner { height: 72px; }
.site-nav { gap: 24px; }
.btn { min-height: 48px; border-radius: 999px; padding: 0 22px; font-weight: 900; }
.btn.primary { background: var(--coral); color: #fff; box-shadow: 0 5px 0 #bd2752; }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #bd2752; }
.btn.coral { background: var(--ink); box-shadow: 0 5px 0 rgba(255,255,255,.25); }
.btn.ghost { border: 1.5px solid currentColor; }
.btn.light { background: #fff9f4; color: var(--ink); box-shadow: 0 5px 0 rgba(41,19,31,.2); }
.eyebrow { padding: 8px 13px; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; font-size: 10px; letter-spacing: .13em; }
.h1, .h2 { font-family: "Instrument Serif"; font-weight: 400; letter-spacing: -.055em; }
.h2 { font-size: clamp(38px, 5.1vw, 64px); line-height: .98; }
.h3 { font-weight: 950; }
.site-footer { background: var(--ink); color: #fff9f4; }
.site-footer .logo { font-size: 42px; color: var(--coral); }

body[data-page="home"] { overflow-x: hidden; }
body[data-page="home"] .site-header .wordmark { color: var(--coral-deep); }
.party-hero { padding: 70px 0 86px; background: #ffc6dc; isolation: isolate; }
.party-hero::before { content: ""; position: absolute; width: 430px; height: 430px; background: #ffef71; border-radius: 50%; left: -240px; top: -170px; z-index: -1; }
.party-hero::after { content: ""; position: absolute; width: 330px; height: 330px; background: #c8f28d; border-radius: 50%; right: -210px; bottom: -90px; z-index: -1; }
.party-hero .hero-grid { grid-template-columns: .93fr 1.07fr; gap: 64px; }
.party-hero .hero-copy { position: relative; z-index: 3; }
.party-hero .display { font-family: "Instrument Serif"; font-weight: 400; font-size: clamp(60px, 7.4vw, 106px); letter-spacing: -.075em; line-height: .84; margin: 25px 0 28px; }
.party-hero .display span { color: var(--coral-deep); font-family: "Instrument Serif"; letter-spacing: -.06em; white-space: nowrap; }
.party-hero .lede { color: var(--ink); font-size: 19px; line-height: 1.55; max-width: 570px; }
.party-hero .hero-actions { margin-top: 30px; gap: 24px; }
.text-link { font-weight: 900; border-bottom: 2px solid; padding: 10px 0 5px; }
.party-hero .trust-line { color: var(--ink); font-weight: 700; gap: 8px; }
.party-hero .trust-line span { background: rgba(255,255,255,.62); padding: 6px 10px; border-radius: 999px; }
.party-hero .hero-visual { min-height: 610px; transform: rotate(1.5deg); }
.hero-photo-wrap { position: absolute; inset: 0 5px 45px 25px; background: #fff; padding: 10px; border-radius: 32px; box-shadow: 10px 12px 0 var(--coral); }
.party-hero .hero-photo { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 47% center; border-radius: 24px; filter: saturate(1.16) contrast(1.02); }
.party-hero .demo-card { left: -20px; right: 64px; bottom: -12px; border: 2px solid var(--ink); border-radius: 20px; box-shadow: 7px 8px 0 var(--ink); transform: rotate(-2.3deg); padding: 18px 20px; }
.party-hero .photo-note { right: -25px; top: 36px; border-radius: 999px; border: 2px solid var(--ink); color: var(--ink); font-family: "DM Sans"; font-weight: 900; transform: rotate(4deg); box-shadow: 4px 4px 0 var(--ink); }
.party-hero .progress { background: linear-gradient(90deg, var(--coral), #ff8a39); }
.sticker { position: absolute; display: grid; place-items: center; text-align: center; z-index: 4; font-family: "Fraunces"; font-weight: 800; line-height: .9; }
.sticker-bride { width: 108px; height: 108px; border-radius: 50%; background: var(--butter); left: -35px; top: -28px; font-size: 25px; transform: rotate(-11deg); border: 2px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); }
.confetti { position: absolute; width: 17px; height: 55px; background: var(--coral); border-radius: 999px; transform: rotate(32deg); }
.confetti-one { left: 49%; top: 38px; }
.confetti-two { left: 44%; bottom: 46px; background: #764de8; transform: rotate(-48deg); }

.ticker { overflow: hidden; background: var(--ink); color: var(--butter); transform: rotate(-1deg) scale(1.02); position: relative; z-index: 5; }
.ticker-track { width: max-content; padding: 15px 0; animation: ticker 26s linear infinite; }
.ticker-track span { font-size: 18px; font-weight: 950; letter-spacing: .09em; white-space: nowrap; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

.intro-section { background: #fff9f4; }
.intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; }
.intro-grid .lede { color: var(--ink); }
.intro-grid .btn { margin-top: 16px; }
.kicker, .card-scribble, .scribble-arrow { font-family: "Fraunces"; color: var(--coral-deep); font-size: 20px; }
.kicker { display: block; margin-bottom: 15px; transform: rotate(-2deg); transform-origin: left; }

.feature-party { background: #ff775e; }
.feature-party .feature-heading { max-width: 820px; margin-bottom: 42px; }
.feature-party .eyebrow { color: var(--ink); }
.feature-party .h2 { margin-top: 18px; }
body[data-page="home"] .party-grid { gap: 18px; }
body[data-page="home"] .party-grid > .card { min-height: 360px; display: flex; flex-direction: column; padding: 25px; border: 2px solid var(--ink); border-radius: 28px; box-shadow: 7px 8px 0 var(--ink); transform: rotate(-1deg); }
body[data-page="home"] .party-grid > .card:nth-child(even) { transform: rotate(1.3deg) translateY(15px); }
body[data-page="home"] .party-grid > .card.coral { background: #ffc5dc; }
body[data-page="home"] .party-grid > .card.lavender { background: var(--lavender); }
body[data-page="home"] .party-grid > .card.mint { background: var(--mint); }
body[data-page="home"] .party-grid > .card.butter { background: var(--butter); }
body[data-page="home"] .party-grid .icon-badge { width: 52px; height: 52px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 16px; box-shadow: 3px 3px 0 var(--ink); }
.party-grid .card p { font-size: 16px; }
.party-grid .card-scribble { margin-top: auto; padding-top: 20px; font-size: 17px; color: var(--ink); transform: rotate(-3deg); }

.bridal-story { background: #f7f0ff; }
.bridal-story .story-grid { gap: 90px; }
.story-image-stack { position: relative; max-width: 540px; }
.bridal-story .story-photo { filter: saturate(1.08) contrast(1.02); border: 10px solid #fff; border-radius: 30px; box-shadow: 10px 11px 0 #7e56e8; transform: rotate(-2deg); }
.bridal-story .story-copy .lede { font-family: "Instrument Serif"; font-size: 19px; line-height: 1.55; color: var(--ink); }
.bridal-story .story-copy .h2 { margin-top: 20px; }
.sticker-girls { width: 120px; height: 120px; border-radius: 50%; background: var(--butter); right: -40px; bottom: 45px; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); font-size: 26px; transform: rotate(8deg); }

.money-section { background: var(--butter); }
.money-section .quote-card { background: var(--plum); border-radius: 34px; box-shadow: 9px 10px 0 var(--ink); min-height: 420px; display: flex; flex-direction: column; justify-content: center; }
.money-section .quote-card .eyebrow { color: #fff; align-self: flex-start; margin-bottom: 25px; }
.money-section .quote-card p { font-family: "Instrument Serif"; font-size: clamp(35px,4.8vw,62px); }
.quote-footer { margin-top: 30px; }
.quote-footer .badge { background: var(--mint); color: var(--ink); font-size: 12px; }
.scribble-arrow { color: #fff; }
.money-section .stacked .card { border: 2px solid var(--ink); border-radius: 26px; box-shadow: 6px 7px 0 var(--ink); }
.money-section .card.sky { background: var(--sky); }
.money-section .card.hot { background: var(--coral); color: #fff; }
.money-section .card.hot .icon-badge { color: var(--ink); }

.calculator-party { background: #ffc5dc; }
.calculator-card { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 70px; background: var(--lavender); border: 2px solid var(--ink); border-radius: 38px; padding: 60px; box-shadow: 10px 11px 0 var(--ink); }
.calculator-card .h2 { margin-top: 20px; }
.receipt { width: min(340px,100%); justify-self: center; background: #fffdf4; padding: 36px 28px 28px; box-shadow: 7px 9px 0 rgba(41,19,31,.25); transform: rotate(3deg); position: relative; }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 24px; background: linear-gradient(135deg,transparent 12px,#fffdf4 0) 0 0/24px 24px repeat-x; }
.receipt-tape { position: absolute; width: 100px; height: 28px; background: rgba(255,230,104,.78); top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.receipt-total { font-size: 66px; font-weight: 950; letter-spacing: -.07em; margin: 6px 0 18px; }
.receipt-total small { font-size: 18px; margin-left: 5px; }
.receipt-row { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px dashed var(--ink); }
.receipt-footer { border-top: 2px solid var(--ink); margin-top: 10px; padding-top: 14px; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-align: center; }

.pricing-party { background: #fff9f4; }
.pricing-party .pricing-grid { margin-top: 48px; }
.pricing-party .price-card { border: 2px solid var(--ink); border-radius: 28px; box-shadow: 6px 7px 0 var(--ink); }
.pricing-party .price-card:nth-child(1) { background: #fff; transform: rotate(-1deg); }
.pricing-party .price-card:nth-child(3) { background: var(--mint); transform: rotate(1deg); }
.pricing-party .price-card.featured { background: var(--coral); color: #fff; transform: translateY(-10px); }
.pricing-party .featured .muted, .pricing-party .featured .price small { color: #fff; }
.pricing-party .featured .btn.primary { background: var(--ink); box-shadow: 0 5px 0 #fff; }
.pricing-party .price-badge { background: var(--butter); color: var(--ink); border: 2px solid var(--ink); }

.final-party { padding-top: 20px; background: #fff9f4; }
.final-card { position: relative; overflow: hidden; text-align: center; background: var(--plum); color: #fff; border-radius: 42px; padding: 85px 30px; box-shadow: 10px 11px 0 var(--coral); }
.final-card::before, .final-card::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; }
.final-card::before { background: var(--coral); left: -110px; top: -100px; }
.final-card::after { background: var(--mint); right: -110px; bottom: -120px; }
.final-card h2 { font-family: "Instrument Serif"; font-size: clamp(50px,7vw,88px); line-height: .9; letter-spacing: -.07em; margin: 0; position: relative; z-index: 1; }
.final-card p { font-size: 20px; position: relative; z-index: 1; }
.final-card .btn { position: relative; z-index: 1; margin-top: 12px; }
.sticker-ready { width: 100px; height: 100px; border-radius: 50%; background: var(--butter); color: var(--ink); right: 12%; top: 34px; transform: rotate(10deg); font-size: 24px; border: 2px solid var(--ink); }
.faq-section { background: #fff9f4; }
.faq-section .h2 { margin-top: 18px; }
.faq-section .faq { margin-top: 38px; }
.faq-section .faq-q { font-size: 18px; }

@media (max-width: 1050px) {
  .party-hero .hero-grid { grid-template-columns: 1fr; }
  .party-hero .hero-copy { max-width: 760px; }
  .party-hero .hero-visual { max-width: 690px; }
  body[data-page="home"] .party-grid { grid-template-columns: repeat(2,1fr); }
  .intro-grid { gap: 40px; }
  .calculator-card { padding: 44px; }
}

@media (max-width: 820px) {
  .intro-grid, .calculator-card { grid-template-columns: 1fr; }
  .bridal-story .story-grid { gap: 55px; }
  .sticker-ready { right: 5%; top: 20px; }
  .calculator-card { gap: 46px; }
}

@media (max-width: 600px) {
  .party-hero { padding-top: 45px; }
  .party-hero .display { font-size: 59px; }
  .party-hero .hero-visual { min-height: 485px; margin-top: 28px; }
  .hero-photo-wrap { inset: 0 0 46px; }
  .party-hero .hero-photo { object-position: 55% center; }
  .party-hero .photo-note { right: -2px; top: 20px; max-width: 190px; font-size: 12px; }
  .sticker-bride { width: 86px; height: 86px; left: -7px; top: -26px; font-size: 20px; }
  .party-hero .demo-card { left: 8px; right: 8px; }
  .intro-grid { gap: 22px; }
  body[data-page="home"] .party-grid { grid-template-columns: 1fr; gap: 24px; }
  body[data-page="home"] .party-grid > .card { min-height: 290px; }
  body[data-page="home"] .party-grid > .card:nth-child(even) { transform: rotate(1deg); }
  .sticker-girls { right: -4px; width: 96px; height: 96px; font-size: 21px; }
  .calculator-card { padding: 34px 22px; border-radius: 28px; }
  .receipt { padding-left: 22px; padding-right: 22px; }
  .pricing-party .price-card.featured { transform: none; }
  .final-card { padding: 90px 20px 64px; border-radius: 30px; }
  .final-card h2 { font-size: 51px; }
  .sticker-ready { width: 78px; height: 78px; font-size: 19px; right: 7px; top: 12px; }
}

/* Angular editorial direction — shared by marketing and product */
.wordmark { display:inline-block; color:var(--coral-deep); font-size:1.08em; letter-spacing:-.105em; transform:rotate(-7deg) skewX(-8deg); transform-origin:left center; text-shadow:2px 2px 0 #ffda52; }
.logo:hover .wordmark { transform:rotate(-9deg) skewX(-10deg) translateY(-1px); }
.btn { border-radius:3px; text-transform:uppercase; letter-spacing:.055em; font-size:12px; transform:skewX(-3deg); }
.btn:hover { transform:skewX(-3deg) translate(-2px,-2px); }
.eyebrow { border-radius:2px; transform:rotate(-1.5deg); }
.card, .panel, .price-card, .poll-card, .stat, .next-action, .onboard-card, .guest-card, .modal, .choice, .timeline-card { border-radius:3px; }
.icon-badge { line-height:1; padding:0; align-items:center; justify-items:center; font-variant-numeric:tabular-nums; }

body:not([data-page="home"]):not(.app-body) main > .section:first-child { position:relative; overflow:hidden; background:var(--sky); border-bottom:2px solid var(--ink); }
body:not([data-page="home"]):not(.app-body) main > .section:first-child::after { content:"PLAN IT / BOOK IT / LIVE IT"; position:absolute; right:-45px; top:54px; padding:10px 58px; background:var(--butter); border:2px solid var(--ink); font-size:10px; font-weight:950; letter-spacing:.14em; transform:rotate(7deg); }
body:not([data-page="home"]):not(.app-body) main > .section:first-child .h1 { font-size:clamp(52px,8vw,92px); line-height:.9; max-width:920px; }
body:not([data-page="home"]):not(.app-body) main > .section:nth-child(even) { background:#f0e8ff; }
body:not([data-page="home"]):not(.app-body) main > .section:nth-child(3n) { background:#fff0a8; }
body:not([data-page="home"]):not(.app-body) .card { border:2px solid var(--ink); box-shadow:6px 7px 0 var(--ink); }
body:not([data-page="home"]):not(.app-body) .grid-3 > .card:nth-child(2n) { transform:rotate(1deg); }
body:not([data-page="home"]):not(.app-body) .grid-3 > .card:nth-child(2n+1) { transform:rotate(-1deg); }
body:not([data-page="home"]):not(.app-body) .wide-photo img { border-radius:3px; border:8px solid #fff; box-shadow:9px 10px 0 var(--ink); filter:saturate(1.12) contrast(1.03); transform:rotate(-1deg); }
body:not([data-page="home"]):not(.app-body) .pricing-grid { margin-top:26px; }
body:not([data-page="home"]):not(.app-body) .price-card { border:2px solid var(--ink); box-shadow:6px 7px 0 var(--ink); }
body:not([data-page="home"]):not(.app-body) .price-card.featured { background:var(--coral); color:#fff; }

/* Homepage: fashion-editorial angles */
.party-hero .hero-photo-wrap, .party-hero .hero-photo, .party-hero .demo-card, .party-hero .photo-note, body[data-page="home"] .party-grid > .card, .bridal-story .story-photo, .money-section .quote-card, .money-section .stacked .card, .calculator-card, .pricing-party .price-card, .final-card { border-radius:3px; }
.party-hero .hero-photo-wrap { transform:rotate(2.5deg); box-shadow:12px 13px 0 var(--ink); }
.party-hero .demo-card { transform:rotate(-4deg); }
.party-hero .photo-note { transform:rotate(6deg); }
.sticker { border-radius:0; clip-path:polygon(50% 0%,61% 18%,79% 7%,82% 29%,100% 34%,86% 52%,98% 69%,76% 72%,72% 95%,52% 83%,35% 100%,30% 79%,7% 85%,17% 62%,0 50%,20% 39%,7% 20%,31% 20%); }
body[data-page="home"] .party-grid > .card { border-radius:3px; box-shadow:8px 9px 0 var(--ink); }
body[data-page="home"] .party-grid .icon-badge { display:grid; place-items:center; width:52px; height:52px; min-width:52px; border-radius:50%; line-height:52px; padding:0; text-align:center; }
.card-scribble, .kicker, .scribble-arrow { font-style:italic; }
.bridal-story .story-photo { object-position:center 62%; transform:rotate(-3deg); }
.receipt { transform:rotate(5deg); }

/* Planning app, onboarding and guest flows */
.app-body, .app-shell, .guest-shell, .onboard-wrap { background:#f0e8ff; }
.sidebar { background:var(--ink); border-right:5px solid var(--coral); }
.sidebar .wordmark { color:#ff6f94; text-shadow:2px 2px 0 #ffe668; }
.side-nav a { border-radius:2px; text-transform:uppercase; letter-spacing:.055em; font-size:11px; }
.side-nav a:hover, .side-nav a.active { background:var(--coral); color:#fff; transform:skewX(-3deg); }
.app-topbar { background:rgba(255,249,244,.93); border-bottom:2px solid var(--ink); }
.app-title { letter-spacing:-.045em; }
.app-content .h1 { font-size:clamp(44px,6vw,70px); line-height:.9; }
.app-content .panel, .app-content .stat, .app-content .next-action { border:2px solid var(--ink); box-shadow:4px 5px 0 var(--ink); }
.app-content .stat:nth-child(1) { background:#fff0a8; }
.app-content .stat:nth-child(2) { background:#ffc5dc; }
.app-content .stat:nth-child(3) { background:var(--mint); }
.app-content .stat:nth-child(4) { background:var(--sky); }
.app-content .next-action { background:#ffc5dc; }
.app-content .panel-title, .app-content .stat .value { letter-spacing:-.05em; }
.app-content .task, .app-content .timeline-card { border-radius:2px; }
.progress, .bar > span { background:var(--coral); }
.progress-wrap, .bar { border-radius:0; }
.onboard-top .wordmark, .guest-top .wordmark { font-size:36px; }
.onboard-card, .guest-card { border:2px solid var(--ink); box-shadow:8px 9px 0 var(--ink); }
.onboard-card { position:relative; }
.onboard-card::before { content:"BRIDE BUSINESS"; position:absolute; right:-28px; top:22px; background:var(--butter); border:2px solid var(--ink); padding:7px 16px; font-size:9px; font-weight:950; letter-spacing:.12em; transform:rotate(7deg); }
.step-dot { border-radius:0; background:#d7c3ff; }
.step-dot.active { background:var(--coral); }
.field input, .field select, .field textarea { border:1.5px solid var(--ink); border-radius:2px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--coral-deep); box-shadow:4px 4px 0 #ffc5dc; }
.choice { border:2px solid var(--ink); box-shadow:3px 4px 0 var(--ink); }
.choice:hover, .choice.selected { border-color:var(--ink); background:var(--butter); box-shadow:5px 6px 0 var(--ink); }
.guest-hero { background:var(--sky); border-block:2px solid var(--ink); }
.toast { border-radius:2px; background:var(--coral-deep); }

@media (max-width:820px) {
  body:not([data-page="home"]):not(.app-body) main > .section:first-child::after { right:-72px; top:35px; }
  .site-header.menu-open .site-nav { border:2px solid var(--ink); border-radius:2px; box-shadow:6px 7px 0 var(--ink); }
}

/* How it works: real-life planning scenarios */
.real-life-section { background:#f0edf4 !important; }
.real-life-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(500px,1.2fr); gap:clamp(60px,9vw,140px); align-items:start; }
.real-life-intro { max-width:560px; padding-top:10px; }
.real-life-intro .h2 { margin:24px 0 22px; font-size:clamp(52px,6vw,78px); line-height:.88; }
.real-life-intro > p { max-width:510px; margin:0; color:var(--muted); font-size:17px; line-height:1.65; }
.scenario-list { border-top:1px solid var(--ink); }
.scenario-list article { display:grid; grid-template-columns:52px 1fr; gap:26px; padding:27px 0 28px; border-bottom:1px solid rgba(48,35,41,.35); }
.scenario-list article > span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--plum); color:#fff; font:700 11px "DM Sans"; letter-spacing:.04em; }
.scenario-list h3 { margin:0 0 6px; color:var(--ink); font:400 30px/1 "Instrument Serif"; letter-spacing:-.025em; }
.scenario-list p { margin:0; max-width:620px; color:var(--muted); font-size:14px; line-height:1.55; }
.scenario-list article:nth-child(2) > span { background:var(--coral-deep); }
.scenario-list article:nth-child(3) > span { background:#75806e; }
.scenario-list article:nth-child(4) > span { background:#786c82; }

@media (max-width:900px) {
  .real-life-grid { grid-template-columns:1fr; gap:42px; }
  .real-life-intro { max-width:680px; }
}
@media (max-width:600px) {
  .real-life-intro .h2 { font-size:52px; }
  .scenario-list article { grid-template-columns:44px 1fr; gap:18px; }
}

/* Product operations, richer itinerary and payment controls */
.payment-actions { display:flex; align-items:center; gap:7px; min-width:260px; }
.payment-actions input { width:72px; padding:8px; border:1px solid var(--line); border-radius:7px; background:var(--surface); }
.inline-email { display:flex; gap:6px; min-width:250px; }
.inline-email input { min-width:170px; padding:7px 8px; border:1px solid var(--line); border-radius:7px; background:var(--surface); }
.payment-card { display:flex; align-items:center; justify-content:space-between; gap:24px; background:#f5eed3; }
.payment-due { font:400 42px/1 "Instrument Serif"; margin:7px 0; }
.trip-cover { min-height:260px; display:flex; align-items:flex-end; padding:30px; margin-bottom:18px; border-radius:16px; background-size:cover; background-position:center; color:#fff; box-shadow:var(--shadow-sm); overflow:hidden; }
.trip-cover h2 { font:400 clamp(42px,6vw,72px)/.9 "Instrument Serif"; letter-spacing:-.045em; margin:12px 0 8px; }
.trip-cover p { margin:0; font-weight:700; }
.trip-cover .eyebrow { color:#fff; }
.member-cover { min-height:220px; }
.itinerary-thumb { width:calc(100% + 28px); max-width:none; height:120px; object-fit:cover; margin:-14px -14px 14px; border-radius:9px 9px 0 0; }
.place-name { margin-top:10px; font-size:12px; font-weight:700; color:var(--plum); }
.place-link { display:inline-block; margin-top:5px; color:var(--plum-2); font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.day-item img { width:90px; height:76px; object-fit:cover; border-radius:9px; grid-row:1 / span 2; }

.admin-body { background:#efebef; min-height:100vh; }
.admin-shell { display:grid; grid-template-columns:230px minmax(0,1fr); min-height:100vh; }
.admin-sidebar { position:sticky; top:0; height:100vh; padding:28px 20px; background:var(--plum); color:#fff; display:flex; flex-direction:column; }
.admin-sidebar .wordmark { color:#fff; }
.admin-product { margin:20px 8px 22px; color:#d9c4ce; font-size:11px; text-transform:uppercase; letter-spacing:.15em; font-weight:700; }
.admin-sidebar nav { display:grid; gap:5px; }
.admin-sidebar nav button { appearance:none; border:0; background:transparent; color:#ddcfd5; text-align:left; padding:11px 12px; border-radius:8px; font-size:13px; }
.admin-sidebar nav button:hover,.admin-sidebar nav button.active { background:rgba(255,255,255,.13); color:#fff; }
.admin-side-foot { margin-top:auto; display:grid; grid-template-columns:10px 1fr; gap:10px; align-items:center; color:#d9cbd1; font-size:11px; padding:10px; }
.admin-side-foot a { grid-column:1 / -1; margin-top:9px; color:#fff; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--butter); }
.admin-main { min-width:0; }
.admin-topbar { height:76px; padding:0 32px; display:flex; justify-content:space-between; align-items:center; background:rgba(255,253,250,.9); border-bottom:1px solid var(--line); }
.admin-kicker { color:var(--muted); text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:700; }
.admin-content { padding:34px; max-width:1500px; margin:auto; }
.admin-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:24px; }
.admin-heading .h1 { margin:9px 0 4px; font-size:52px; }
.admin-heading p { margin:0; color:var(--muted); }
.admin-mode { padding:8px 11px; background:#e8dde3; color:var(--plum); border-radius:999px; font-size:11px; font-weight:700; }
.admin-card { background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:22px; box-shadow:var(--shadow-sm); min-width:0; }
.order-status { padding:7px 28px 7px 8px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink); font-size:12px; }
.admin-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.admin-metrics > div { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px; }
.admin-metrics span,.admin-metrics small { display:block; color:var(--muted); font-size:11px; }
.admin-metrics strong { display:block; margin:6px 0 3px; font:400 37px/1 "Instrument Serif"; }
.admin-grid { display:grid; grid-template-columns:1.35fr .8fr; gap:18px; }
.admin-action { display:flex; gap:12px; padding:13px; background:#f5f1ed; border-radius:9px; }
.admin-action > span { color:var(--coral-deep); }
.admin-action small,.table-sub { display:block; color:var(--muted); font-size:11px; }
.admin-status-list > div { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 0; border-bottom:1px solid var(--line); font-size:12px; }
.admin-status-list span { display:flex; align-items:center; gap:8px; }
.admin-status-list i { width:8px; height:8px; border-radius:50%; background:#c99b46; }
.admin-status-list i.live { background:var(--success); }
.email-studio { display:grid; grid-template-columns:220px minmax(320px,1fr) minmax(260px,.8fr); gap:18px; align-items:start; }
.email-list { display:grid; gap:7px; }
.email-list .panel-title { margin-bottom:8px; }
.email-list button { border:1px solid transparent; background:#f5f1ed; border-radius:8px; padding:11px; text-align:left; }
.email-list button.active { border-color:var(--plum-2); background:#eee4e9; }
.email-list button strong,.email-list button small { display:block; }
.email-list button small { color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.email-log { display:grid; gap:9px; max-height:520px; overflow:auto; }
.email-log article { padding:12px; border:1px solid var(--line); border-radius:8px; }
.email-log article p { margin:5px 0; font-size:12px; }
.email-log article span,.email-log article small { color:var(--muted); font-size:10px; }
.admin-template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.template-admin-card h3,.integration-card h3 { margin:20px 0 6px; font-size:20px; }
.template-admin-card p { color:var(--muted); min-height:48px; font-size:13px; }
.template-total { font:400 34px/1 "Instrument Serif"; margin:15px 0; }
.template-total small { font:400 10px "DM Sans"; color:var(--muted); margin-left:4px; }
.template-seeds { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:18px; }
.template-seeds span { padding:5px 7px; background:#f2edf0; border-radius:5px; font-size:10px; }
.funnel { display:grid; gap:18px; margin-top:22px; }
.funnel small { color:var(--muted); }
.insight-number { margin:24px 0; font:400 58px/1 "Instrument Serif"; }
.insight-number span { display:block; font:400 12px "DM Sans"; color:var(--muted); margin-top:6px; }
.insight-split { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.insight-split div { padding:15px; border-radius:9px; background:#f5f1ed; }
.insight-split strong,.insight-split span { display:block; }
.insight-split span { color:var(--muted); font-size:11px; }
.integration-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.integration-card { display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:14px; align-items:start; }
.integration-card h3 { margin:0 0 5px; }
.integration-card p { margin:0 0 12px; color:var(--muted); font-size:13px; }
.integration-icon { width:44px; height:44px; border-radius:10px; display:grid; place-items:center; color:#fff; background:var(--plum); font-weight:800; }
.integration-note { margin-top:18px; }
.admin-access { min-height:100vh; display:grid; place-items:center; padding:30px; }
.auth-card { border-radius:16px; box-shadow:var(--shadow); }
.auth-security { display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:12px; border-radius:9px; background:#e8efe4; color:#33533f; }
.auth-security > span { width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center; border-radius:50%; background:#bdd0b8; font-weight:800; }
.auth-security p { margin:0; font-size:12px; }
.auth-security small { color:#587060; }
.mail-mark { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 18px; border-radius:50%; background:var(--plum); color:#fff; font-size:24px; transform:rotate(-8deg); }
.side-signout { color:#fff; border-color:rgba(255,255,255,.35); background:transparent; }

@media(max-width:1100px){
  .admin-metrics { grid-template-columns:repeat(2,1fr); }
  .email-studio { grid-template-columns:200px 1fr; }
  .email-studio > aside { grid-column:1 / -1; }
  .admin-template-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:760px){
  .admin-shell { display:block; }
  .admin-sidebar { position:static; height:auto; padding:18px; }
  .admin-sidebar nav { display:flex; overflow:auto; }
  .admin-sidebar nav button { white-space:nowrap; }
  .admin-side-foot { display:none; }
  .admin-topbar { padding:0 18px; }
  .admin-content { padding:20px 16px; }
  .admin-heading,.payment-card { display:block; }
  .admin-mode { display:inline-block; margin-top:12px; }
  .admin-grid,.email-studio,.integration-grid,.admin-template-grid { grid-template-columns:1fr; }
  .email-studio > aside { grid-column:auto; }
  .admin-metrics { grid-template-columns:1fr 1fr; }
  .itinerary-grid { grid-template-columns:1fr; }
}

/* Simplified, role-aware planning workspace */
body[data-page="home"] .party-grid .icon-badge {
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  min-width:52px;
  padding:0;
  line-height:1;
  text-indent:0;
}
.role-control { display:flex; align-items:center; gap:10px; }
.role-control label { color:var(--muted); font-size:11px; font-weight:700; }
.role-control select { min-height:38px; padding:0 30px 0 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:700 12px "DM Sans"; }
.dashboard-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:24px; }
.dashboard-heading .h1 { margin:12px 0 6px; font-size:clamp(50px,6vw,76px); }
.demo-notice { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 16px; margin-bottom:18px; background:#f5eed3; border:1px solid #d8cda5; border-radius:10px; font-size:13px; }
.simple-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; align-items:start; }
.dashboard-grid .next-action { min-height:300px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:30px; }
.dashboard-grid .next-action strong { font-family:"Instrument Serif"; font-size:clamp(31px,4vw,46px); font-weight:400; line-height:1; margin-top:12px; }
.compact-checklist { display:grid; gap:0; margin-top:18px; }
.compact-task { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #eee7e2; font-size:13px; }
.compact-task:last-child { border-bottom:0; }
.compact-task span { display:grid; place-items:center; width:22px; height:22px; border:1px solid var(--line); border-radius:50%; }
.compact-task.done span { background:var(--mint); border-color:#aebfa4; }
.compact-plan { display:grid; }
.compact-plan > div { display:grid; grid-template-columns:78px 1fr; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid #eee7e2; }
.compact-plan > div:last-child { border-bottom:0; }
.compact-plan span { color:var(--muted); font-size:10px; font-weight:700; line-height:1.4; text-transform:uppercase; letter-spacing:.06em; }
.compact-plan strong { font-size:14px; }
.quick-panel { grid-column:1/-1; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.quick-grid a { display:flex; justify-content:space-between; gap:10px; padding:14px; background:var(--surface-2); border-radius:8px; font-size:13px; font-weight:700; }
.quick-grid a:hover { background:#eadde2; }
.member-summary { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:18px; background:var(--plum); color:#fff; border-radius:12px; overflow:hidden; }
.member-summary > div { display:grid; gap:6px; padding:20px 22px; border-right:1px solid rgba(255,255,255,.15); }
.member-summary > div:last-child { border:0; }
.member-summary .mini-label { color:#d9cbd1; }
.member-summary strong { font-family:"Instrument Serif"; font-size:25px; font-weight:400; }
.member-grid { grid-template-columns:1fr 1fr; }
.member-poll > strong { display:block; font-family:"Instrument Serif"; font-size:29px; font-weight:400; line-height:1.05; margin-bottom:16px; }
.vote-options { display:grid; gap:8px; }
.vote-option { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); text-align:left; font:700 13px "DM Sans"; cursor:pointer; }
.vote-option span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.vote-option:hover, .vote-option.selected { border-color:var(--plum-2); background:#f5eed3; }
.member-vote-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.member-itinerary { display:grid; gap:34px; max-width:900px; }
.day-heading { font-family:"Instrument Serif"; font-size:42px; border-bottom:1px solid var(--ink); padding-bottom:8px; }
.day-list { display:grid; }
.day-item { display:grid; grid-template-columns:100px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); }
.day-item time { color:var(--coral-deep); font-size:12px; font-weight:700; }
.day-item strong { font-size:17px; }
.day-item p { color:var(--muted); margin:4px 0 0; }
.update-feed { max-width:780px; }
.feed-item { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.feed-item:last-child { border:0; }
.feed-item > span { display:grid; place-items:center; width:32px; height:32px; flex:0 0 auto; background:#eadde2; border-radius:50%; font-weight:700; }
.feed-item div { display:grid; gap:3px; }
.feed-item small { color:var(--muted); }
.access-card { max-width:680px; margin:8vh auto; padding:44px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.access-card .h1 { margin-top:18px; }
.access-card .lede { margin-inline:auto; }
.item-remove { width:26px; height:26px; padding:0; border:0; background:transparent; color:var(--muted); font-size:20px; cursor:pointer; }
.item-remove:hover { color:var(--danger); }

@media (max-width:900px) {
  .quick-grid { grid-template-columns:repeat(2,1fr); }
  .role-control label { display:none; }
}
@media (max-width:700px) {
  .dashboard-heading { align-items:flex-start; flex-direction:column; }
  .simple-stats, .dashboard-grid, .member-grid, .member-vote-list { grid-template-columns:1fr; }
  .quick-panel { grid-column:auto; }
  .member-summary { grid-template-columns:1fr; }
  .member-summary > div { border-right:0; border-bottom:1px solid rgba(255,255,255,.15); }
  .role-control select { max-width:120px; }
}
@media (max-width:460px) {
  .quick-grid { grid-template-columns:1fr; }
  .demo-notice { align-items:flex-start; flex-direction:column; }
  .day-item { grid-template-columns:72px 1fr; gap:14px; }
}

/* How it works: editorial three-step sequence */
.workflow-section { background:var(--paper) !important; }
.workflow-intro { display:grid; grid-template-columns:.7fr 1.3fr; align-items:end; gap:40px; margin-bottom:38px; }
.workflow-intro .eyebrow { justify-self:start; }
.workflow-intro .h2 { margin:0; max-width:700px; }
.process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.process-card { min-height:360px; display:flex; flex-direction:column; padding:28px 30px 25px; border-right:1px solid var(--ink); background:#f6f1e7; }
.process-card:nth-child(2) { background:#e9e4ee; }
.process-card:nth-child(3) { border-right:0; background:#dce5de; }
.process-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:60px; }
.process-number { display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; border:1px solid var(--ink); border-radius:50%; font:700 13px "DM Sans"; line-height:1; }
.process-label { font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.process-card h3 { margin:0 0 14px; font:400 clamp(32px,3vw,43px)/.98 "Instrument Serif"; letter-spacing:-.035em; }
.process-card p { margin:0; color:var(--muted); font-size:15px; line-height:1.6; }
.process-note { display:block; margin-top:auto; padding-top:28px; color:var(--plum); font:400 italic 18px "Instrument Serif"; }

@media (max-width:820px) {
  .workflow-intro { grid-template-columns:1fr; gap:18px; }
  .process-grid { grid-template-columns:1fr; border-bottom:0; }
  .process-card { min-height:0; border-right:0; border-bottom:1px solid var(--ink); }
  .process-top { margin-bottom:38px; }
  .process-note { margin-top:32px; }
}
@media (max-width:600px) {
  .wordmark { transform:rotate(-6deg) skewX(-8deg); }
  .party-hero .hero-photo-wrap { transform:rotate(1.5deg); }
  .onboard-card::before { right:-8px; top:-18px; }
  body:not([data-page="home"]):not(.app-body) main > .section:first-child::after { display:none; }
}

/* Editorial typography and a unified page language */
.display, .h1, .h2, .quote-card p, .final-card h2, .story-copy .lede {
  font-family:"Instrument Serif";
  font-weight:400;
  letter-spacing:-.045em;
}
.display, .h1 { line-height:.91; }
.h2 { line-height:.96; }
.party-hero .display {
  font-family:"Instrument Serif";
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.87;
}
.party-hero .display span {
  font-family:"Instrument Serif";
  font-style:italic;
  font-weight:400;
}
.final-card h2 { font-weight:400; letter-spacing:-.045em; }
.story-copy .lede { font-size:clamp(27px,3vw,39px); line-height:1.08; }
.logo .wordmark { font-family:"Fraunces"; }
.h3, .panel-title, .demo-title, .price, .result-big, .stat .value { font-family:"DM Sans"; }

/* All public pages share the same editorial framing */
body:not(.app-body) main > .section:first-child .eyebrow { margin-bottom:18px; }
body:not(.app-body) main > .section:first-child .lede { font-size:18px; line-height:1.55; }
body:not(.app-body) main > .section:first-child .center { position:relative; z-index:2; }
body:not([data-page="home"]):not(.app-body) main > .section:first-child { padding-top:105px; padding-bottom:95px; }
body:not([data-page="home"]):not(.app-body) main > .section:first-child .h1,
body:not([data-page="home"]):not(.app-body) main > .section:first-child .h2 { margin-top:4px; }
body:not([data-page="home"]):not(.app-body) main > .section:first-child::before {
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  left:-125px;
  bottom:-155px;
  border:1px solid rgba(48,35,41,.24);
  border-radius:50%;
}
body:not([data-page="home"]):not(.app-body) .section .h2 { max-width:820px; }
body:not([data-page="home"]):not(.app-body) .card .h3 { font-size:22px; }
body:not([data-page="home"]):not(.app-body) .card .icon-badge { background:var(--paper); }

/* Give each main journey its own layout rhythm within the same system */
body[data-page="how-it-works"] .wide-photo { width:min(1120px,calc(100% - 40px)); margin-top:48px; position:relative; z-index:1; }
body[data-page="how-it-works"] .wide-photo img { aspect-ratio:16/6; }
body[data-page="how-it-works"] main > .section:first-child .narrow { position:relative; z-index:3; }
body[data-page="how-it-works"] main > .section:first-child .row { position:relative; z-index:4; }
body[data-page="templates"] main .grid-3 { grid-template-columns:1.2fr .8fr 1fr; align-items:start; }
body[data-page="templates"] main .grid-3 > .card:nth-child(2) { margin-top:42px; }
body[data-page="templates"] main .grid-3 > .card:nth-child(3) { margin-top:16px; }
body[data-page="pricing"] main > .section:first-child { background:#ead3dc; }
body[data-page="pricing"] .pricing-grid { align-items:center; }
body[data-page="pricing"] .price-card.featured { padding-top:38px; padding-bottom:38px; }
body[data-page="budget-calculator"] main > .section:first-child { background:#f5eed3; }
body[data-page="budget-calculator"] .calc-grid { gap:38px; }
body[data-page="budget-calculator"] .calc-result { transform:rotate(.5deg); }
body[data-page="signin"] main > .section:first-child { min-height:calc(100vh - 72px); display:grid; align-items:center; background:#e9e3ed; }
body[data-page="signin"] main > .section:first-child .card { max-width:600px; margin:auto; }
body[data-page="privacy"] main > .section:first-child,
body[data-page="terms"] main > .section:first-child { background:var(--paper); }
body[data-page="privacy"] main > .section:first-child::after,
body[data-page="terms"] main > .section:first-child::after { content:"THE SMALL PRINT"; }

/* The organiser app uses the same typography and restrained accents */
.app-content .h1 { font-family:"Instrument Serif"; font-weight:400; letter-spacing:-.045em; }
.app-content .eyebrow { background:transparent; }
.app-title { font-family:"Instrument Serif"; font-size:21px; font-weight:400; }
.panel-title { font-weight:700; }
.app-content .stat .label, .side-label, .mini-label { letter-spacing:.11em; }
.onboard-card .h1, .guest-hero .h1 { font-family:"Instrument Serif"; font-weight:400; }

@media (max-width:820px) {
  body[data-page="templates"] main .grid-3 { grid-template-columns:1fr; }
  body[data-page="templates"] main .grid-3 > .card:nth-child(n) { margin-top:0; }
  body:not([data-page="home"]):not(.app-body) main > .section:first-child { padding-top:80px; padding-bottom:72px; }
}

/* Elevated bridal refinement */
:root {
  --ink:#302329;
  --muted:#756970;
  --paper:#faf7f2;
  --surface:#fffdfa;
  --surface-2:#f1ece7;
  --line:#d9d0ca;
  --coral:#c7657c;
  --coral-deep:#98465c;
  --plum:#553040;
  --plum-2:#805267;
  --butter:#eadca9;
  --mint:#cbd7c3;
  --sky:#ccdce0;
  --lavender:#d9d3e3;
  --shadow:0 20px 55px rgba(48,35,41,.13);
  --shadow-sm:0 8px 22px rgba(48,35,41,.10);
}
body { background:var(--paper); }
.wordmark,
.sidebar .wordmark,
body[data-page="home"] .site-header .wordmark {
  color:var(--plum);
  transform:rotate(-2deg);
  text-shadow:none;
  letter-spacing:-.085em;
}
.logo:hover .wordmark { transform:rotate(-3deg) translateY(-1px); }
.btn,
.btn:hover {
  border-radius:8px;
  transform:none;
  text-transform:none;
  letter-spacing:-.01em;
  font-size:13px;
}
.btn:hover { transform:translateY(-1px); }
.btn.primary { background:var(--plum); box-shadow:0 3px 0 #35202a; }
.btn.primary:hover { box-shadow:0 4px 0 #35202a; }
.btn.coral { background:var(--coral-deep); box-shadow:none; }
.eyebrow { border:1px solid currentColor; border-radius:999px; transform:none; letter-spacing:.12em; }
.site-header { background:rgba(250,247,242,.94); border-bottom:1px solid var(--line); }

body:not([data-page="home"]):not(.app-body) main > .section:first-child { background:#e5edf0; border-bottom:1px solid var(--line); }
body:not([data-page="home"]):not(.app-body) main > .section:first-child::after { background:#eee4bc; border:1px solid var(--ink); transform:rotate(3deg); }
body:not([data-page="home"]):not(.app-body) main > .section:nth-child(even) { background:#f0edf4; }
body:not([data-page="home"]):not(.app-body) main > .section:nth-child(3n) { background:#f5eed3; }
body:not([data-page="home"]):not(.app-body) .card,
body:not([data-page="home"]):not(.app-body) .price-card,
body:not([data-page="home"]):not(.app-body) .wide-photo img {
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  transform:none;
}
body:not([data-page="home"]):not(.app-body) .grid-3 > .card:nth-child(n) { transform:none; }
body:not([data-page="home"]):not(.app-body) .price-card.featured { background:var(--plum); }

.party-hero { background:#ead3dc; }
.party-hero::before { background:#eee1b5; opacity:.75; }
.party-hero::after { background:#cdd8c7; opacity:.8; }
.party-hero .display span { color:var(--plum); }
.party-hero .hero-photo-wrap { transform:rotate(1deg); border-radius:18px; box-shadow:8px 9px 0 var(--plum); }
.party-hero .hero-photo { border-radius:12px; }
.party-hero .demo-card { border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); transform:rotate(-1.2deg); }
.party-hero .photo-note { border:1px solid var(--ink); border-radius:999px; box-shadow:2px 3px 0 var(--ink); transform:rotate(2deg); }
.party-hero .trust-line span { background:rgba(255,253,250,.66); }
.ticker { background:var(--plum); color:#f5eed3; transform:rotate(-.35deg) scale(1.01); }
.feature-party { background:#a95c70; color:#fff; }
.feature-party .eyebrow { color:#fff; }
body[data-page="home"] .party-grid > .card,
body[data-page="home"] .party-grid > .card:nth-child(even) {
  color:var(--ink);
  border:1px solid rgba(48,35,41,.5);
  border-radius:14px;
  box-shadow:5px 6px 0 rgba(48,35,41,.75);
  transform:none;
}
body[data-page="home"] .party-grid > .card.coral { background:#e8c7d0; }
body[data-page="home"] .party-grid > .card.lavender { background:#d9d3e3; }
body[data-page="home"] .party-grid > .card.mint { background:#cbd7c3; }
body[data-page="home"] .party-grid > .card.butter { background:#eadca9; }
body[data-page="home"] .party-grid .icon-badge { border:1px solid var(--ink); box-shadow:none; }
.sticker { clip-path:none; border-radius:50%; border:1px solid var(--ink); box-shadow:2px 3px 0 var(--ink); }
.sticker-bride { background:#eee1b5; transform:rotate(-5deg); }
.sticker-girls { background:#eee1b5; transform:rotate(4deg); }
.sticker-ready { background:#eee1b5; transform:rotate(4deg); }
.bridal-story { background:#f0edf4; }
.bridal-story .story-photo { border-radius:16px; box-shadow:7px 8px 0 #7e657b; transform:rotate(-1deg); }
.money-section { background:#eee4bc; }
.money-section .quote-card { background:var(--plum); border-radius:18px; box-shadow:7px 8px 0 var(--ink); }
.money-section .stacked .card { border:1px solid var(--ink); border-radius:14px; box-shadow:4px 5px 0 var(--ink); }
.money-section .card.sky { background:#ccdce0; }
.money-section .card.hot { background:#b95f76; }
.calculator-party { background:#ead3dc; }
.calculator-card { background:#d9d3e3; border:1px solid var(--ink); border-radius:20px; box-shadow:7px 8px 0 var(--ink); }
.receipt { transform:rotate(2deg); box-shadow:5px 7px 0 rgba(48,35,41,.2); }
.pricing-party .price-card { border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); }
.pricing-party .price-card:nth-child(1),
.pricing-party .price-card:nth-child(3) { transform:none; }
.pricing-party .price-card.featured { background:var(--plum); border-color:var(--plum); transform:translateY(-7px); }
.pricing-party .price-badge { background:#eee4bc; border:1px solid var(--ink); }
.final-card { background:var(--plum); border-radius:22px; box-shadow:7px 8px 0 #b9697c; }
.final-card::before { background:#b9697c; }
.final-card::after { background:#cbd7c3; }

.app-body, .app-shell, .guest-shell, .onboard-wrap { background:#f1edf2; }
.sidebar { background:var(--plum); border-right:2px solid #b9697c; }
.side-nav a { border-radius:7px; text-transform:none; letter-spacing:0; font-size:13px; }
.side-nav a:hover, .side-nav a.active { background:rgba(255,255,255,.13); transform:none; }
.app-topbar { border-bottom:1px solid var(--line); }
.app-content .panel, .app-content .stat, .app-content .next-action {
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.app-content .stat:nth-child(1) { background:#f5eed3; }
.app-content .stat:nth-child(2) { background:#ead3dc; }
.app-content .stat:nth-child(3) { background:#dce5d8; }
.app-content .stat:nth-child(4) { background:#e3ecee; }
.app-content .next-action { background:#eadde2; }
.progress, .bar > span { background:var(--coral-deep); }
.progress-wrap, .bar { border-radius:999px; }
.onboard-card, .guest-card { border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.onboard-card::before { background:#eee4bc; border:1px solid var(--ink); transform:rotate(3deg); }
.step-dot { border-radius:999px; background:#d9d3e3; }
.step-dot.active { background:var(--coral-deep); }
.field input, .field select, .field textarea { border:1px solid #bfb3b8; border-radius:8px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--plum-2); box-shadow:0 0 0 3px rgba(128,82,103,.12); }
.choice { border:1px solid var(--line); border-radius:10px; box-shadow:none; }
.choice:hover, .choice.selected { border-color:var(--plum-2); background:#f5eed3; box-shadow:0 0 0 2px rgba(128,82,103,.1); }
.choice.disabled { opacity:.45; cursor:not-allowed; background:#eeeae7; border-style:dashed; }
.guest-hero { background:#e3ecee; border-block:1px solid var(--line); }

@media (max-width:600px) {
  .wordmark,
  .sidebar .wordmark,
  body[data-page="home"] .site-header .wordmark { transform:rotate(-2deg); }
  .party-hero .hero-photo-wrap { transform:rotate(.5deg); }
}