/* BetterWedding: pearl-white surfaces, subtle glass, deep burgundy hero. */
:root {
    color-scheme: light;
    --paper: #fdfbfc;
    --white: #ffffff;
    --ink: #252933;
    --muted: #59616f;
    --primary: #412630;
    --primary-soft: #f4eef0;
    --primary-accent: #785565;
    --primary-dark: #321d25;
    --hero: var(--primary);
    --rose: #f4e9ec;
    --line: #e8e1e7;
    --green: #476449;
    --radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
::selection { background: #e8dce1; color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--primary); outline-offset: 5px; }
button { cursor: pointer; }
img, svg { display: block; }
p, h1, h2, h3 { margin-top: 0; }
h1, h2, h3 { font-weight: 600; line-height: 1.12; letter-spacing: -.045em; text-wrap: balance; }
p { margin-bottom: 0; }
.container { width: min(1120px, calc(100% - 80px)); margin-inline: auto; }
.icon { flex: 0 0 auto; width: 22px; height: 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--white); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.button { min-height: 52px; padding: 14px 23px; display: inline-flex; gap: 20px; justify-content: center; align-items: center; border: 1px solid transparent; border-radius: 12px; background: var(--primary); color: var(--white); font-size: 14px; font-weight: 600; line-height: 1.5; transition: background .18s, box-shadow .18s; }
.button:hover { background: var(--primary-dark); box-shadow: 0 4px 12px #41263014; }
.button .icon { width: 18px; height: 18px; }
.button-small { min-height: 42px; padding: 10px 16px; font-size: 12px; border-radius: 10px; }
.button-secondary { color: var(--ink); background: var(--white); border-color: var(--line); }
.button-secondary:hover { background: #f9f4f8; box-shadow: none; }
.text-link { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; }
.text-link:hover { color: var(--primary); }
.text-link .icon { width: 19px; height: 19px; }
.section-space { padding-block: 112px; }
.section-intro { margin-bottom: 64px; }
.section-intro h2, .faq-intro h2 { margin-bottom: 22px; font-size: clamp(34px, 4.1vw, 51px); }
.section-intro > p:last-child { max-width: 580px; color: var(--muted); font-size: 16px; }

/* Navigation */
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: var(--white); }
.header-inner { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.logo { display: inline-flex; flex: 0 0 auto; align-items: center; }
.logo img { width: 180px; height: auto; }
.main-nav { display: flex; gap: 25px; align-items: center; }
.main-nav a, .login { padding-block: 10px; font-size: 12px; font-weight: 500; color: #57544f; }
.main-nav a:hover, .login:hover { color: var(--primary); }
.header-actions { display: flex; gap: 22px; align-items: center; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; }
.menu-toggle span { display: block; height: 1.5px; width: 18px; background: var(--ink); transition: transform .18s; }
.menu-toggle span + span { margin-top: 6px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* Opening */
.hero { padding-top: 88px; padding-bottom: 72px; background: var(--hero); color: var(--white); text-align: center; }
.hero h1 { margin-bottom: 27px; font-size: clamp(42px, 5.7vw, 72px); letter-spacing: -.06em; line-height: 1.08; }
.hero h1 span { color: var(--white); }
.hero-lead { max-width: 650px; margin-inline: auto; color: var(--white); font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 30px; }
.hero-note { margin-top: 19px; font-size: 12px; color: var(--white); }
.hero .button { background: var(--white); color: var(--primary); }
.hero .button:hover { background: #f9f4f8; box-shadow: none; }
.hero a:focus-visible { outline-color: var(--white); }
.hero .text-link { min-height: 44px; color: var(--white); }

/* A small, illustrative product window. */
.showcase { position: relative; isolation: isolate; padding-top: 52px; }
.showcase::before, .showcase::after { content: ""; position: absolute; z-index: -1; top: 170px; width: min(34%, 330px); height: 300px; border-radius: 50%; filter: blur(70px); opacity: .45; pointer-events: none; }
.showcase::before { left: 3%; background: #e8dce1; }
.showcase::after { right: 3%; top: 310px; background: #eee5e9; }
.showcase > h2 { margin-bottom: 28px; font-size: clamp(26px, 3vw, 36px); text-align: center; }
.app-window { border: 1px solid var(--white); border-radius: 18px; overflow: hidden; background: var(--white); box-shadow: inset 0 1px 0 #ffffff, 0 24px 64px #3b1b3312, 0 0 0 1px #53344912; }
.window-bar { position: relative; display: flex; justify-content: center; align-items: center; min-height: 45px; background: var(--white); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.window-dots { position: absolute; left: 19px; display: flex; gap: 6px; }
.window-dots i { width: 8px; height: 8px; border: 1px solid #bdb8ae; border-radius: 50%; background: #cdbbc8; }
.window-label { position: absolute; right: 20px; font-size: 10px; }
.app-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 480px; }
.app-sidebar { display: flex; flex-direction: column; padding: 28px 16px 24px; background: var(--white); border-right: 1px solid var(--line); }
.demo-couple { display: flex; gap: 10px; align-items: center; margin-bottom: 38px; padding-inline: 5px; }
.couple-mark { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border: 1px solid #e6d8d2; border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-family: Georgia, serif; font-size: 16px; letter-spacing: -.1em; }
.couple-mark > span { margin-inline: 1px; font-size: 10px; }
.demo-couple strong { display: block; font-size: 12px; font-weight: 600; }
.demo-couple div > span { display: block; font-size: 10px; color: var(--muted); }
.demo-tabs { display: flex; flex-direction: column; gap: 4px; }
.demo-tabs button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 43px; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: #69635c; font-size: 11px; text-align: left; white-space: nowrap; }
.demo-tabs button .icon { width: 17px; height: 17px; }
.demo-tabs button[aria-selected="true"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.demo-tabs button:hover { background: #f9f4f8; }
.demo-tabs button[aria-selected="true"]:hover { background: var(--primary-soft); }
.tab-count { margin-left: auto; padding: 1px 6px; border-radius: 4px; background: #ffffff9e; font-size: 10px; }
.sidebar-bottom { margin-top: auto; padding: 24px 10px 0; display: flex; gap: 10px; align-items: center; color: #82756a; font-size: 10px; line-height: 1.5; }
.sidebar-bottom .icon { width: 19px; height: 19px; }
.app-content { padding: 30px 32px 20px; min-width: 0; }
.demo-panel { min-height: 432px; }
.demo-panel[role="region"] + .demo-panel[role="region"] { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.demo-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.demo-heading h3 { margin-bottom: 5px; font-size: 26px; letter-spacing: -.04em; }
.demo-heading p { color: var(--muted); font-size: 11px; }
.demo-add { padding: 7px 11px; border: 1px solid #e1dbd4; border-radius: 7px; background: var(--white); font-size: 10px; white-space: nowrap; }
.demo-stats { margin-top: 25px; display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 15px; border: 1px solid #e9e6df; border-radius: 11px; }
.demo-stats > div { padding-inline: 20px; }
.demo-stats > div + div { border-left: 1px solid var(--line); }
.demo-stats > div > span { display: block; color: var(--muted); font-size: 10px; }
.demo-stats strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 3px; font-size: 27px; font-weight: 600; letter-spacing: -.04em; }
.demo-stats small { color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: 0; }
.demo-stats .positive { color: var(--green); background: #edf3e9; padding: 2px 6px; border-radius: 4px; }
.demo-list-label { margin: 23px 0 10px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.demo-list-label > span { color: #827d73; font-size: 10px; }
.guest-table-wrap { overflow-x: auto; scrollbar-width: thin; }
.guest-table { width: 100%; border-collapse: collapse; font-size: 10px; text-align: left; white-space: nowrap; }
.guest-table thead { background: #faf6fa; color: #827d73; font-size: 10px; }
.guest-table th { padding: 9px 10px; font-weight: 400; }
.guest-table td { padding: 11px 10px; border-bottom: 1px solid #eeece7; }
.guest-table td:first-child { display: flex; align-items: center; gap: 10px; }
.guest-table small { display: block; margin-top: 2px; color: #827d73; font-size: 10px; }
.avatar { width: 31px; height: 31px; border-radius: 50%; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; }
.avatar-rose { background: #f2e5e2; color: #83524b; }
.avatar-sand { background: #eee9dd; color: #7c6b4b; }
.avatar-blue { background: #f7e2e7; color: #4b6b76; }
.avatar-sage { background: #e8ece3; color: #586c4b; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 5px; font-size: 10px; line-height: 1.5; white-space: nowrap; }
.badge-green { background: #edf2e9; color: #49623d; }
.badge-amber { background: #f7efdf; color: #876930; }
.badge .icon { width: 12px; height: 12px; }
.demo-footnote { display: flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--muted); font-size: 10px; }
.demo-footnote .icon { width: 13px; height: 13px; color: var(--green); }
.showcase-caption { margin-top: 19px; text-align: center; font-size: 12px; color: var(--muted); }
.sample-caption { margin-top: 20px; text-align: center; font-size: 12px; color: var(--muted); }
.floor-plan { display: flex; flex-direction: column; align-items: center; margin-top: 20px; padding: 17px 25px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.newlyweds-table { padding: 6px 24px; border: 1px solid #d3b8b0; border-radius: 7px 7px 20px 20px; color: var(--primary); background: #efe3eb; font-family: Georgia, serif; font-size: 12px; }
.floor-tables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 65px; padding: 28px 16px; }
.round-table { position: relative; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border: 1px solid #cfbeb0; border-radius: 50%; background: #f4edf3; text-align: center; }
.round-table > span { color: #83715f; font-size: 10px; letter-spacing: .1em; }
.round-table strong { display: block; color: #6b5547; font-size: 18px; font-weight: 500; letter-spacing: 0; }
.round-table i { position: absolute; width: 12px; height: 12px; border: 1px solid #d6ccc0; border-radius: 4px; background: #fff; }
.round-table i:nth-of-type(1) { top: -15px; left: 19px; }
.round-table i:nth-of-type(2) { top: -15px; right: 7px; }
.round-table i:nth-of-type(3) { top: 17px; right: -16px; }
.round-table i:nth-of-type(4) { bottom: 9px; right: -16px; }
.round-table i:nth-of-type(5) { bottom: -15px; right: 15px; }
.round-table i:nth-of-type(6) { bottom: -15px; left: 10px; }
.round-table i:nth-of-type(7) { bottom: 14px; left: -16px; }
.round-table i:nth-of-type(8) { top: 12px; left: -16px; }
.dance-floor { color: #83786c; font-size: 10px; letter-spacing: .06em; }
.budget-summary { margin-top: 25px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.budget-summary > span { font-size: 10px; color: var(--muted); }
.budget-summary > strong { display: block; font-size: 34px; font-weight: 600; letter-spacing: -.04em; }
.budget-summary small { font-size: 14px; color: var(--muted); font-weight: 400; }
.budget-bar { height: 9px; margin: 16px 0 12px; border-radius: 5px; background: var(--primary-soft); overflow: hidden; }
.budget-bar > span { display: block; height: 100%; width: 70.8333%; border-radius: inherit; background: var(--primary-accent); }
.budget-legend { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 10px; }
.budget-legend b { margin-left: 5px; color: var(--ink); font-weight: 500; }
.expense-list { margin-top: 14px; font-size: 11px; }
.expense-list > div { display: flex; justify-content: space-between; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.expense-list > div > span { display: flex; align-items: center; gap: 10px; }
.expense-list strong { font-weight: 500; }
.expense-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.rose { background: var(--primary-accent); }.sand { background: #c2b698; }.sage { background: #89927a; }

/* Planner: open rows, with a different small product detail in each. */
.feature-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(280px, 365px); align-items: center; gap: 28px; padding-block: 43px; border-top: 1px solid var(--line); }
.feature-number { align-self: start; padding-top: 6px; color: #948b7f; font-size: 12px; }
.feature-copy h3 { margin-bottom: 14px; font-size: 25px; letter-spacing: -.035em; }
.feature-copy > p { max-width: 475px; color: var(--muted); font-size: 14px; }
.inline-features { display: flex; flex-wrap: wrap; gap: 5px 17px; margin: 18px 0 0; padding: 0; list-style: none; color: #6c514b; font-size: 12px; }
.inline-features li { display: flex; align-items: center; gap: 6px; }
.inline-features li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: #a18478; }
.invitation-preview, .task-preview, .shared-preview { padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: inset 0 1px 0 #ffffff, 0 8px 28px #3b1b3307; }
.invitation-people { display: flex; align-items: center; }
.invitation-people .avatar { width: 34px; height: 34px; border: 2px solid var(--white); font-size: 10px; }
.invitation-people .avatar + .avatar { margin-left: -11px; }
.invitation-people > div { margin-left: 12px; }
.invitation-people strong, .invitation-people div > span { display: block; }
.invitation-people strong { font-size: 11px; font-weight: 600; }
.invitation-people div > span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.invitation-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.invitation-status > span:last-child { color: var(--muted); font-size: 10px; }
.task-preview { padding-block: 22px; }
.sample-task { display: flex; align-items: center; gap: 11px; padding-block: 11px; font-size: 11px; }
.sample-task + .sample-task { border-top: 1px solid #eeebe5; }
.sample-task > span:first-child { display: flex; justify-content: center; align-items: center; width: 17px; height: 17px; flex: 0 0 auto; border: 1px solid #ccc4b9; border-radius: 50%; }
.sample-task .icon { width: 11px; height: 11px; }
.sample-task.complete > span:first-child { background: #87917d; color: #fff; border-color: #87917d; }
.sample-task.complete > span:last-child { color: #827d73; text-decoration: line-through; text-decoration-color: #bab4a9; }
.sample-task small { display: block; margin-top: 2px; color: var(--primary); font-size: 10px; }
.shared-preview { text-align: center; }
.shared-avatars { display: flex; justify-content: center; margin-bottom: 12px; }
.shared-avatars span { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 3px solid var(--white); border-radius: 50%; background: #e2d1c8; color: #785347; font-family: Georgia, serif; font-size: 20px; }
.shared-avatars span + span { margin-left: -10px; background: #dadfce; color: #5f6b54; }
.shared-preview > strong { font-size: 12px; font-weight: 600; }
.shared-preview > p { margin-top: 5px; color: var(--muted); font-size: 10px; }
.shared-export { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 17px; font-size: 10px; color: #6c675c; }
.shared-export .icon { width: 13px; height: 13px; }
.planner-note { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; color: var(--muted); font-size: 12px; }
.planner-note .icon { color: var(--green); width: 16px; height: 16px; }

/* Optional wedding site. */
.website-section { padding-block: 98px; background: #faf7fb; }
.website-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }
.website-copy h2 { margin-bottom: 25px; font-size: clamp(34px, 3.8vw, 48px); line-height: 1.16; }
.website-copy h2 > span { color: var(--primary); }
.website-copy > p:not(.website-note) { max-width: 425px; color: var(--muted); font-size: 15px; }
.website-benefits { margin: 30px 0; }
.website-benefits > div { margin-top: 21px; }
.website-benefits dt { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.website-benefits dt .icon { width: 19px; height: 19px; color: var(--primary); }
.website-benefits dd { margin: 5px 0 0 29px; max-width: 350px; color: var(--muted); font-size: 12px; }
.website-copy > .text-link { color: var(--primary); }
.website-note { margin-top: 12px; font-size: 12px; color: var(--muted); }
.phone-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
.phone-side-note { position: absolute; top: 55px; right: -20px; z-index: 1; padding: 12px 14px; transform: rotate(7deg); border: 1px solid #d9d5c9; border-radius: 9px; background: var(--white); font-family: Georgia, serif; font-size: 12px; color: #756d5e; box-shadow: 0 4px 8px #55452708; }
.phone-frame { position: relative; width: 288px; height: 586px; padding: 7px; border: 1px solid #b7b3aa; border-radius: 46px; background: #e8dce5; box-shadow: 0 22px 40px -20px #4a40334a, inset 0 0 0 3px #ffffff; }
.phone-status { position: absolute; z-index: 2; top: 17px; left: 27px; right: 27px; height: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 600; }
.dynamic-island { width: 77px; height: 20px; position: absolute; left: 50%; transform: translateX(-50%); background: #282622; border-radius: 20px; }
.wedding-preview { height: 100%; padding: 47px 22px 18px; overflow: hidden; border-radius: 39px; background: var(--white); text-align: center; color: var(--ink); }
.wedding-preview-header { display: flex; align-items: center; justify-content: space-between; color: var(--primary); font-family: Georgia, serif; font-size: 10px; }
.wedding-monogram { display: flex; align-items: center; justify-content: center; width: 102px; height: 123px; margin: 25px auto 21px; border: 1px solid #d9cbd1; border-radius: 60px 60px 4px 4px; font-family: Georgia, serif; font-size: 43px; color: var(--primary); letter-spacing: -.06em; }
.wedding-monogram > span:last-child { margin-top: 25px; }
.wedding-monogram i { margin: 15px -2px 0; font-size: 25px; font-weight: 400; }
.wedding-preview h3 { margin: 10px 0 9px; font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 400; letter-spacing: -.045em; }
.wedding-date { font-size: 10px; letter-spacing: .09em; }
.wedding-divider { width: 30px; height: 1px; margin: 21px auto 17px; background: #d9cbd1; }
.wedding-welcome { font-family: Georgia, serif; font-size: 14px; font-style: italic; line-height: 1.5; }
.wedding-schedule { margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--line); text-align: left; }
.wedding-schedule > div { display: flex; gap: 14px; margin-bottom: 12px; font-size: 10px; }
.wedding-schedule time { color: var(--muted); font-size: 10px; }
.wedding-schedule small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.phone-home { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: 95px; height: 4px; border-radius: 4px; background: #37352c; }
.phone-caption { margin-top: 24px; font-size: 10px; color: var(--muted); }

/* Two choices, one paid package. */
.pricing-section .section-intro { text-align: center; }
.pricing-section .section-intro > p:last-child { margin-inline: auto; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 970px; margin-inline: auto; }
.price-card { display: flex; flex-direction: column; padding: 36px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.website-price { border-color: var(--primary); }
.price-card h3 { margin-bottom: 12px; font-size: 27px; }
.price-card > p { font-size: 14px; color: var(--muted); }
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 27px; }
.price strong { font-size: 68px; line-height: 1.15; font-weight: 500; letter-spacing: -.065em; }
.price > span { font-size: 13px; color: var(--muted); }
.price .price-from { font-size: 14px; margin-right: 3px; }
.price-period { display: block; min-height: 28px; margin-top: 5px; font-size: 12px; color: var(--muted); }
.price-card .button { display: flex; margin-top: 22px; font-size: 13px; }
.check-list { display: flex; flex-direction: column; gap: 14px; flex: 1; margin: 29px 0 27px; padding: 0; list-style: none; font-size: 14px; line-height: 1.55; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--primary); }
.price-card .price-bottom-note { margin-top: auto; padding-top: 18px; border-top: 1px solid #dfd8ce; font-size: 12px; }
.pricing-terms { display: grid; grid-template-columns: .95fr 1.05fr; gap: 55px; max-width: 970px; margin: 46px auto 0; padding-top: 38px; border-top: 1px solid var(--line); }
.terms-intro h3 { margin: 0 0 14px; font-size: 23px; letter-spacing: -.035em; }
.terms-intro p { color: var(--muted); font-size: 14px; }
.price-examples table { width: 100%; border-collapse: collapse; font-size: 11px; text-align: left; }
.price-examples caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.price-examples thead { font-size: 10px; color: var(--muted); }
.price-examples th, .price-examples td { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.price-examples td { color: var(--primary); font-size: 15px; font-weight: 600; white-space: nowrap; }
.price-examples th:last-child, .price-examples td:last-child { text-align: right; padding-left: 15px; }
.pricing-details { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; max-width: 970px; margin: 30px auto 0; color: var(--muted); font-size: 14px; }
.pricing-details strong { color: #514a41; font-weight: 600; }

/* Questions use native disclosure elements, including without JavaScript. */
.faq-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; border-top: 1px solid var(--line); }
.faq-intro h2 { font-size: clamp(30px, 3.5vw, 43px); }
.faq-intro > p:last-child { margin-top: 26px; font-size: 13px; color: var(--muted); }
.faq-intro a { display: inline-flex; align-items: center; gap: 9px; margin-top: 7px; color: var(--primary); }
.faq-intro .icon { width: 16px; height: 16px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 77px; padding-block: 22px; list-style: none; font-size: 14px; line-height: 1.5; font-weight: 500; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--primary); }
.faq-list summary > span { color: #8d8074; font-weight: 300; font-size: 22px; transition: transform .18s; }
.faq-list details[open] summary > span { transform: rotate(45deg); }
.faq-answer { padding: 0 30px 24px 0; font-size: 14px; color: var(--muted); }
.faq-answer p + p { margin-top: 13px; }
.closing { padding-top: 18px; padding-bottom: 115px; text-align: center; }
.closing-symbol { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 22px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.closing-symbol .icon { width: 23px; height: 23px; }
.closing h2 { margin-bottom: 19px; font-size: clamp(30px, 3.8vw, 45px); }
.closing p { color: var(--muted); font-size: 15px; }
.closing .button { margin-top: 28px; }
.caption { display: block; margin-top: 18px; font-size: 12px; color: var(--muted); }
.site-footer { border-top: 1px solid var(--line); background: var(--white); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 37px; }
.footer-top .logo img { width: 165px; }
.footer-top > span { margin-right: auto; color: var(--muted); font-size: 12px; }
.footer-top > a:last-child { display: flex; align-items: center; gap: 12px; color: var(--primary); font-size: 12px; }
.footer-top > a:last-child .icon { width: 16px; height: 16px; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-block: 22px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-bottom a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Solid white is the fallback when backdrop blur is unavailable. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header { background: #ffffffdb; -webkit-backdrop-filter: blur(24px) saturate(130%); backdrop-filter: blur(24px) saturate(130%); border-bottom-color: #ffffffb3; box-shadow: 0 1px 0 #5334490a; }
    .app-window { background: var(--white); -webkit-backdrop-filter: blur(24px) saturate(125%); backdrop-filter: blur(24px) saturate(125%); }
    .window-bar { background: var(--white); }
    .app-sidebar { background: var(--white); }
    .app-content { background: var(--white); }
}

@media (prefers-reduced-transparency: reduce) {
    .site-header, .app-window, .window-bar, .app-sidebar, .app-content { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .showcase::before, .showcase::after { display: none; }
}

@media (min-width: 1450px) { .hero { padding-top: 105px; padding-bottom: 64px; } }
@media (max-width: 1100px) {
    .container { width: calc(100% - 64px); }
    .header-inner { gap: 18px; }
    .logo img { width: 140px; }
    .main-nav { gap: 18px; }
    .header-actions { gap: 15px; }
    .header-actions .button { padding-inline: 12px; }
    .app-layout { grid-template-columns: 184px minmax(0, 1fr); }
    .app-content { padding-inline: 24px; }
    .demo-stats > div { padding-inline: 13px; }
    .feature-row { grid-template-columns: 28px minmax(0, 1fr) 320px; gap: 20px; }
    .feature-copy h3 { font-size: 23px; }
    .website-grid { gap: 45px; }
    .phone-side-note { right: -8px; font-size: 10px; }
    .faq-section { gap: 55px; }
}
@media (max-width: 900px) {
    .header-inner { min-height: 76px; }
    .header-actions { gap: 18px; }
    .main-nav { gap: 15px; }
    .main-nav a { font-size: 11px; }
    .login { display: none; }
    .hero { padding-top: 70px; }
    .hero h1 { font-size: 56px; }
    .hero-lead { font-size: 15px; }
    .app-layout { grid-template-columns: 165px minmax(0, 1fr); }
    .app-sidebar { padding-inline: 11px; }
    .demo-couple { gap: 8px; }
    .demo-couple strong { font-size: 10px; }
    .couple-mark { width: 34px; height: 37px; font-size: 13px; }
    .demo-couple div > span { font-size: 10px; }
    .app-content { padding: 24px 20px 18px; }
    .demo-add { display: none; }
    .demo-stats { margin-top: 22px; }
    .demo-stats > div { padding-inline: 10px; }
    .demo-stats > div > span { font-size: 10px; }
    .demo-stats strong { font-size: 24px; }
    .guest-table td, .guest-table th { padding-inline: 5px; }
    .guest-table { font-size: 10px; }
    .guest-table td:first-child { gap: 7px; }
    .guest-table .avatar { width: 25px; height: 25px; font-size: 10px; }
    .guest-table small { font-size: 10px; }
    .floor-tables { gap: 30px 46px; }
    .section-space { padding-block: 85px; }
    .section-intro { margin-bottom: 45px; }
    .feature-row { grid-template-columns: 20px minmax(0, 1fr) 275px; gap: 17px; }
    .feature-copy h3 { font-size: 21px; }
    .feature-copy > p { font-size: 14px; }
    .inline-features { font-size: 12px; }
    .invitation-preview, .task-preview, .shared-preview { padding: 20px; }
    .invitation-people strong { font-size: 10px; }
    .invitation-status { align-items: flex-start; flex-direction: column; gap: 7px; }
    .website-grid { gap: 40px; }
    .website-section { padding-block: 80px; }
    .phone-side-note { display: none; }
    .phone-frame { width: 270px; height: 570px; }
    .wedding-preview { padding-inline: 18px; }
    .website-copy h2 { font-size: 35px; }
    .website-copy > p:not(.website-note) { font-size: 14px; }
    .website-benefits dd { font-size: 11px; }
    .price-card { padding: 28px; }
    .price-card h3 { font-size: 24px; }
    .check-list { font-size: 14px; }
    .pricing-terms, .pricing-details { gap: 35px; }
    .faq-section { grid-template-columns: .8fr 1.2fr; gap: 35px; }
    .faq-list summary { font-size: 14px; }
    .footer-top > span { font-size: 10px; }
}
@media (max-width: 700px) {
    html { scroll-padding-top: 155px; }
    .container { width: calc(100% - 40px); }
    .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding-block: 12px; }
    .logo img { width: 156px; }
    .header-actions { display: contents; }
    .header-actions .button { grid-column: 1 / -1; grid-row: 2; justify-self: end; min-height: 44px; padding: 10px 15px; font-size: 12px; }
    .menu-toggle:not([hidden]) { display: block; grid-column: 2; grid-row: 1; }
    .main-nav { grid-column: 1 / -1; grid-row: 3; width: 100%; flex-wrap: wrap; justify-content: space-between; padding-block: 0; }
    .main-nav a { padding-block: 8px; font-size: 12px; }
    .js .main-nav { display: none; }
    .js .main-nav.is-open { display: flex; }
    .hero { padding-top: 55px; padding-bottom: 48px; }
    .hero h1 { font-size: clamp(34px, 7.4vw, 49px); line-height: 1.12; margin-bottom: 22px; letter-spacing: -.055em; }
    .hero-lead { max-width: 460px; font-size: 14px; line-height: 1.8; }
    .desktop-break { display: none; }
    .hero-actions { margin-top: 25px; gap: 16px 21px; flex-wrap: wrap; }
    .hero-actions .button { padding: 13px 17px; font-size: 12px; gap: 12px; }
    .hero-actions .text-link { font-size: 11px; gap: 8px; }
    .hero-note { font-size: 12px; margin-top: 19px; }
    .showcase { padding-top: 36px; }
    .app-window { border-radius: 14px; }
    .window-bar { min-height: 35px; font-size: 10px; }
    .window-dots { left: 13px; gap: 4px; }
    .window-dots i { width: 6px; height: 6px; }
    .window-label { display: none; }
    .app-layout { display: block; min-height: 0; }
    .app-sidebar { padding: 15px 14px 11px; border-right: 0; border-bottom: 1px solid var(--line); }
    .demo-couple { margin-bottom: 12px; }
    .demo-couple strong { font-size: 11px; }
    .demo-couple div > span { font-size: 10px; }
    .couple-mark { width: 33px; height: 33px; border-radius: 9px; }
    .sidebar-bottom { display: none; }
    .demo-tabs { flex-direction: row; gap: 4px; background: #ffffff99; padding: 3px; border-radius: 9px; }
    .demo-tabs button { flex: 1; justify-content: center; gap: 6px; min-height: 35px; padding: 7px 5px; font-size: 10px; border-radius: 6px; }
    .demo-tabs button[aria-selected="true"] { background: var(--white); box-shadow: 0 1px 4px #443a2b12; }
    .demo-tabs button[aria-selected="true"]:hover { background: var(--white); }
    .demo-tabs .icon { width: 15px; height: 15px; }
    .tab-count { display: none; }
    .app-content { padding: 21px 15px 18px; }
    .demo-panel { min-height: 405px; }
    .demo-heading h3 { font-size: 23px; }
    .demo-heading p { font-size: 10px; }
    .demo-stats { margin-top: 18px; padding-block: 12px; }
    .demo-stats > div { padding-inline: 10px; }
    .demo-stats > div > span { font-size: 10px; }
    .demo-stats strong { font-size: 23px; gap: 5px; }
    .demo-stats strong small { font-size: 10px; }
    .demo-list-label { margin-top: 18px; font-size: 10px; }
    .demo-list-label > span { font-size: 10px; }
    .guest-table td, .guest-table th { padding: 10px 5px; }
    .guest-table { font-size: 10px; }
    .guest-table small { font-size: 10px; }
    .guest-table .badge { font-size: 10px; padding: 3px 5px; }
    .demo-footnote { font-size: 10px; align-items: flex-start; margin-top: 15px; }
    .showcase-caption { margin-top: 15px; font-size: 12px; }
    .floor-plan { padding: 15px 10px; }
    .floor-tables { gap: 32px 47px; padding-block: 27px; }
    .round-table { width: 56px; height: 56px; }
    .round-table i { width: 10px; height: 10px; }
    .round-table i:nth-of-type(1), .round-table i:nth-of-type(2) { top: -13px; }
    .round-table i:nth-of-type(3), .round-table i:nth-of-type(4) { right: -13px; }
    .round-table i:nth-of-type(5), .round-table i:nth-of-type(6) { bottom: -13px; }
    .round-table i:nth-of-type(7), .round-table i:nth-of-type(8) { left: -13px; }
    .round-table strong { font-size: 15px; }
    .budget-summary { margin-top: 21px; padding: 17px; }
    .budget-summary > strong { font-size: 31px; }
    .budget-legend { font-size: 10px; }
    .budget-legend b { display: block; margin-left: 0; margin-top: 2px; }
    .budget-legend > span:last-child { text-align: right; }
    .section-space { padding-block: 72px; }
    .section-intro { margin-bottom: 34px; }
    .section-intro h2 { font-size: 36px; }
    .section-intro > p:last-child { font-size: 14px; }
    .feature-row { grid-template-columns: 22px minmax(0, 1fr); gap: 0 14px; padding-block: 29px; }
    .feature-copy h3 { font-size: 23px; }
    .feature-copy > p { max-width: none; font-size: 14px; }
    .inline-features { font-size: 12px; gap: 5px 12px; margin-top: 15px; }
    .feature-row > div:last-child { grid-column: 2; margin-top: 24px; width: 100%; max-width: 390px; }
    .invitation-preview, .task-preview, .shared-preview { padding: 22px; }
    .invitation-people strong { font-size: 12px; }
    .invitation-status { flex-direction: row; align-items: center; }
    .invitation-status > span:last-child { font-size: 10px; }
    .planner-note { margin-top: 14px; font-size: 10px; align-items: flex-start; text-align: center; }
    .website-section { padding-block: 65px; }
    .website-grid { grid-template-columns: 1fr; gap: 45px; }
    .website-copy h2 { font-size: 39px; }
    .website-copy > p:not(.website-note) { max-width: 480px; font-size: 14px; }
    .website-benefits { margin-block: 26px; }
    .website-benefits dd { max-width: 360px; font-size: 12px; }
    .website-benefits dt { font-size: 14px; }
    .phone-frame { width: 280px; height: 580px; }
    .phone-stage { padding-top: 0; }
    .phone-side-note { display: block; right: calc(50% - 177px); top: 70px; font-size: 10px; }
    .pricing-section .section-intro { text-align: left; }
    .pricing-section .section-intro > p:last-child { margin-inline: 0; }
    .pricing-grid { grid-template-columns: 1fr; gap: 18px; }
    .price-card { padding: 30px; }
    .price-card h3 { font-size: 28px; }
    .price-card > p { font-size: 14px; }
    .price strong { font-size: 65px; }
    .price-period { min-height: 0; }
    .check-list { font-size: 14px; gap: 12px; }
    .price-card .price-bottom-note { font-size: 12px; }
    .pricing-terms { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; padding-top: 29px; }
    .terms-intro h3 { font-size: 26px; }
    .terms-intro p { font-size: 14px; }
    .price-examples table { font-size: 10px; }
    .price-examples td { font-size: 14px; }
    .pricing-details { grid-template-columns: 1fr; gap: 17px; margin-top: 26px; font-size: 14px; }
    .faq-section { grid-template-columns: 1fr; gap: 30px; }
    .faq-intro h2 { font-size: 36px; }
    .faq-intro > p:last-child { font-size: 13px; margin-top: 17px; }
    .faq-list summary { min-height: 72px; font-size: 14px; padding-block: 20px; }
    .faq-answer { font-size: 14px; padding-right: 15px; }
    .closing { padding-top: 0; padding-bottom: 75px; }
    .closing h2 { font-size: 34px; }
    .closing p { font-size: 13px; }
    .closing .button { font-size: 12px; }
    .caption { font-size: 12px; }
    .footer-top { flex-wrap: wrap; padding-block: 28px; gap: 16px; }
    .footer-top .logo img { width: 155px; }
    .footer-top > span { font-size: 10px; }
    .footer-top > a:last-child { width: 100%; margin-top: 2px; font-size: 12px; }
    .footer-bottom { align-items: flex-start; flex-direction: column; gap: 15px; padding-block: 22px 30px; font-size: 11px; }
    .footer-links { gap: 22px; }
}
@media (max-width: 380px) {
    .container { width: calc(100% - 32px); }
    .hero-actions { flex-direction: column; gap: 19px; }
    .hero h1 { font-size: 33px; }
    .hero-note { max-width: 240px; margin-inline: auto; }
    .demo-tabs button { font-size: 10px; gap: 5px; }
    .demo-stats > div { padding-inline: 7px; }
    .demo-stats > div > span { font-size: 10px; }
    .demo-stats strong { font-size: 21px; }
    .guest-table { font-size: 10px; }
    .guest-table small { font-size: 10px; }
    .guest-table .avatar { width: 22px; height: 22px; font-size: 10px; }
    .guest-table td:first-child { gap: 5px; }
    .guest-table td, .guest-table th { padding-inline: 3px; }
    .guest-table .badge { font-size: 10px; padding-inline: 4px; }
    .floor-tables { gap: 30px 37px; padding-inline: 0; }
    .round-table { width: 50px; height: 50px; }
    .round-table i:nth-of-type(1) { left: 7px; }
    .round-table i:nth-of-type(2) { right: 7px; }
    .round-table i:nth-of-type(5) { right: 7px; }
    .round-table i:nth-of-type(6) { left: 7px; }
    .feature-row { grid-template-columns: 17px minmax(0, 1fr); gap: 0 9px; }
    .feature-copy h3 { font-size: 21px; }
    .invitation-preview, .task-preview, .shared-preview { padding: 18px; }
    .invitation-people strong { font-size: 10px; }
    .invitation-status { flex-direction: column; align-items: flex-start; }
    .phone-side-note { right: -4px; }
    .price-card { padding: 25px; }
    .price-card h3 { font-size: 25px; }
    .footer-top { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

.website-purchase-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.website-purchase-actions .button { margin-top: 0; }
.price-card .website-purchase-actions { display: grid; }
@media (max-width: 560px) { .website-purchase-actions .button { width: 100%; } }