:root {
  --ink: #11192b;
  --ink-soft: #293650;
  --paper: #f8f5ef;
  --cream: #eee7dc;
  --coral: #e76750;
  --lilac: #d4c8ff;
  --sky: #bfe2e8;
  --line: rgba(17, 25, 43, 0.14);
  --mono: "DM Mono", monospace;
  --sans: "DM Sans", sans-serif;
  --serif: "Playfair Display", serif;
  --container: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; background: #fff; padding: 12px; }
.skip-link:focus { left: 0; }

/* Header */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; color: #fff; }
.nav-wrap { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.05rem; letter-spacing: -0.04em; }
.brand img { display: block; }
.brand strong { font-weight: 700; }
.site-header nav { display: flex; align-items: center; gap: 28px; font-size: 0.88rem; }
.site-header nav a { opacity: 0.85; transition: opacity .2s ease; }
.site-header nav a:hover { opacity: 1; }
.nav-cta { border: 1px solid rgba(255,255,255,.52); border-radius: 999px; padding: 9px 15px; font-size: .83rem; font-weight: 600; transition: color .2s ease, background .2s ease; }
.nav-cta:hover { color: var(--ink); background: #fff; }

/* Hero */
.hero { position: relative; overflow: hidden; min-height: 720px; padding: 160px 0 90px; color: #fff; background: var(--ink); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.hero-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.orb-a { width: 620px; height: 620px; top: -250px; right: -170px; background: var(--coral); opacity: .75; }
.orb-b { width: 420px; height: 420px; bottom: -290px; left: 25%; border: 1px solid rgba(212, 200, 255, .7); }
.eyebrow, .section-label { margin: 0; font: 500 .71rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { color: var(--sky); }
.eyebrow span { display: inline-block; width: 8px; height: 8px; margin-right: 9px; vertical-align: 1px; border-radius: 50%; background: var(--coral); }
.hero h1 { max-width: 670px; margin: 20px 0; font: 600 clamp(3rem, 6vw, 5.8rem)/.98 var(--serif); letter-spacing: -.06em; }
.hero h1 em, .section-heading em, .demo-copy em { font-weight: 600; color: var(--lilac); }
.hero-lead { max-width: 570px; margin: 0; color: rgba(255,255,255,.75); font-size: 1.1rem; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 19px; border: 1px solid transparent; border-radius: 8px; font-weight: 700; font-size: .9rem; transition: transform .2s ease, background .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover { background: #f17a63; }
.btn-secondary { color: #fff; border-color: rgba(255,255,255,.36); }
.btn-secondary:hover { background: rgba(255,255,255,.1); }
.hero-points { display: flex; gap: 18px; flex-wrap: wrap; padding: 0; margin: 34px 0 0; list-style: none; color: rgba(255,255,255,.68); font-size: .78rem; }
.hero-points li::before { content: "•"; margin-right: 7px; color: var(--sky); }

.hero-art { position: relative; min-height: 420px; display: grid; place-items: center; }
.invite-card { position: relative; width: min(100%, 354px); padding: 55px 32px 36px; text-align: center; color: #273032; background: #fcf5ec; box-shadow: 18px 20px 0 rgba(212,200,255,.65), 0 24px 65px rgba(0,0,0,.3); transform: rotate(4deg); }
.invite-card::before, .invite-card::after { content: ""; position: absolute; width: 42px; height: 42px; border: 1px solid #87a483; border-radius: 42px 0 42px 0; opacity: .8; }
.invite-card::before { top: 15px; left: 15px; }
.invite-card::after { right: 15px; bottom: 15px; transform: rotate(180deg); }
.invite-kicker { display: block; color: #778a70; font: .63rem var(--mono); text-transform: uppercase; letter-spacing: .18em; }
.floral-mark { margin: 14px 0 4px; color: #c88979; font-size: 1.4rem; }
.invite-card h2 { margin: 0; font: 600 2.45rem/1 var(--serif); letter-spacing: -.06em; }
.invite-card h2 i { font-weight: 400; color: #ba8073; }
.invite-date { margin: 26px 0 6px; font-size: .86rem; font-weight: 700; }
.invite-place { margin: 0; color: #607266; font-size: .82rem; line-height: 1.6; }
.invite-line { display: block; width: 50px; height: 1px; margin: 25px auto 12px; background: #c1a792; }
.invite-rsvp { margin: 0; font: .64rem var(--mono); letter-spacing: .13em; text-transform: uppercase; color: #5c7362; }
.hero-caption { position: absolute; right: 8px; bottom: 6px; color: rgba(255,255,255,.6); font: .62rem var(--mono); letter-spacing: .12em; transform: rotate(-90deg); transform-origin: right bottom; }
.spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 7px rgba(191,226,232,.12); }
.spark-one { top: 20%; right: 10%; }.spark-two { bottom: 13%; left: 3%; background: var(--coral); }.spark-three { right: 20%; bottom: 6%; width: 6px; height: 6px; background: var(--lilac); }

/* Shared */
.section-label { color: #63708a; }
.intro-section { padding: 100px 0; background: var(--cream); }
.intro-grid { display: grid; grid-template-columns: .75fr 1.4fr; gap: 60px; }
.intro-grid h2, .section-heading h2, .how-copy h2, .demo-copy h2, .future-box h2 { margin: 0; font: 600 clamp(2.3rem, 4vw, 4.1rem)/1.05 var(--serif); letter-spacing: -.05em; }
.intro-grid p:not(.section-label) { max-width: 620px; margin: 25px 0 0; color: var(--ink-soft); font-size: 1.08rem; }
.benefits-section, .templates-section { padding: 112px 0; }
.section-heading h2 { margin-top: 14px; }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 54px; border: 1px solid var(--line); background: var(--line); }
.benefit-card { min-height: 258px; padding: 26px; background: var(--paper); }
.benefit-number { display: block; color: var(--coral); font: .72rem var(--mono); }
.benefit-card h3 { margin: 62px 0 10px; font-size: 1.03rem; }
.benefit-card p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

/* Process */
.how-section { padding: 110px 0; color: #fff; background: #203653; }
.how-grid { display: grid; grid-template-columns: .84fr 1.16fr; gap: 88px; align-items: start; }
.how-copy .section-label { color: var(--sky); }
.how-copy h2 { margin-top: 14px; }
.how-copy p { max-width: 390px; color: rgba(255,255,255,.7); font-size: 1.03rem; }
.steps-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.24); }
.steps-list li { display: grid; grid-template-columns: 60px 1fr; gap: 22px; padding: 23px 0; border-bottom: 1px solid rgba(255,255,255,.24); }
.steps-list span { color: var(--lilac); font: .79rem var(--mono); }
.steps-list h3 { margin: 0 0 6px; font-size: 1rem; }.steps-list p { margin: 0; color: rgba(255,255,255,.65); font-size: .9rem; }

/* Templates */
.templates-section { background: #f4efe7; }
.section-heading-row { display: flex; justify-content: space-between; gap: 40px; align-items: end; }
.section-aside { max-width: 330px; margin: 0; color: var(--ink-soft); font-size: .92rem; }
.template-accordion { margin-top: 52px; border-top: 1px solid var(--line); }
.template-item { border-bottom: 1px solid var(--line); }
.template-item summary { display: grid; grid-template-columns: 75px 1fr 32px; align-items: center; min-height: 95px; cursor: pointer; list-style: none; }
.template-item summary::-webkit-details-marker { display: none; }
.template-index { color: var(--coral); font: .77rem var(--mono); }
.template-item strong { display: block; font: 600 1.45rem var(--serif); letter-spacing: -.03em; }.template-item small { display: block; margin-top: 3px; color: #65708a; font-size: .78rem; }
.summary-icon { font-size: 1.8rem; font-weight: 300; text-align: center; transition: transform .2s ease; }.template-item[open] .summary-icon { transform: rotate(45deg); }
.template-detail { display: grid; grid-template-columns: 260px 1fr; gap: 56px; padding: 0 55px 40px 75px; align-items: center; }
.template-detail > div:last-child { max-width: 430px; }.template-detail h3 { margin: 0 0 10px; font: 600 1.5rem/1.2 var(--serif); }.template-detail p { color: var(--ink-soft); font-size: .94rem; }
.template-preview { min-height: 185px; padding: 28px 20px; text-align: center; display: flex; flex-direction: column; justify-content: center; }.template-preview span { font: .6rem var(--mono); letter-spacing: .12em; }.template-preview h3 { margin: 11px 0; font-size: 1.65rem; }.template-preview h3 i { font-weight: 400; }.template-preview p { margin: 0; font-size: .72rem; }
.romantic { color: #2f3d36; background: #fbf4e9; border: 1px solid #c3ab8e; }.romantic span, .romantic p { color: #6f8674; }
.vibrant { color: #fff; background: #e45d55; background-image: radial-gradient(#ffc82e 1px, transparent 1px); background-size: 15px 15px; }.vibrant span, .vibrant p { color: rgba(255,255,255,.83); }
.corporate { color: #fff; background: #1d3154; }.corporate span, .corporate p { color: var(--sky); }
.template-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 14px; }.template-select { margin: 0; padding: 10px 0; color: var(--ink); border: 0; border-bottom: 1px solid var(--ink); background: transparent; font-weight: 700; font-size: .82rem; cursor: pointer; }.template-view { padding: 10px 0; color: var(--coral-dark); border-bottom: 1px solid currentColor; text-decoration: none; font-size: .82rem; font-weight: 800; }

/* Journey */
.journey-section { padding: 120px 0; overflow: hidden; background: #f0e9dc; }
.journey-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: center; }
.journey-copy h2 { max-width: 510px; margin: 14px 0; font: 600 clamp(2.3rem, 4vw, 4rem)/1.04 var(--serif); letter-spacing: -.05em; }
.journey-copy > p:not(.section-label) { max-width: 440px; color: var(--ink-soft); font-size: 1rem; }
.journey-note { margin-top: 23px; padding: 14px 16px; border-left: 2px solid var(--coral); background: rgba(255,255,255,.5); color: #60708a !important; font-size: .78rem !important; }
.journey-orbit { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; }
.orbit-ring { position: absolute; inset: 11%; border: 1px dashed rgba(17,25,43,.24); border-radius: 50%; animation: orbit-turn 24s linear infinite; }
.orbit-ring-b { inset: 25%; border-color: rgba(231,103,80,.5); animation-direction: reverse; animation-duration: 18s; }
.orbit-center { position: absolute; inset: 35%; display: grid; place-content: center; width: 30%; aspect-ratio: 1; margin: auto; border-radius: 50%; color: #fff; text-align: center; background: var(--ink); box-shadow: 0 0 0 14px rgba(17,25,43,.06); }
.orbit-center span { color: var(--lilac); font: .69rem var(--mono); letter-spacing: .12em; }.orbit-center strong { margin-top: 4px; font: 600 1.35rem/.9 var(--serif); }
.orbit-step { position: absolute; width: 152px; padding: 13px 15px; border: 1px solid rgba(17,25,43,.13); border-radius: 10px; background: #fffdf9; box-shadow: 0 10px 24px rgba(29,33,45,.08); }
.orbit-step span { display: block; color: var(--coral); font: .61rem var(--mono); }.orbit-step strong { display: block; margin: 3px 0 1px; font-size: .88rem; }.orbit-step small { color: #74809a; font-size: .69rem; }
.orbit-step-a { top: 4%; left: 12%; }.orbit-step-b { top: 26%; right: -1%; }.orbit-step-c { right: 8%; bottom: 7%; }.orbit-step-d { left: 1%; bottom: 22%; }
@keyframes orbit-turn { to { transform: rotate(360deg); } }

/* Full invitation / mobile mockup */
.full-invite-section { padding: 120px 0; overflow: hidden; background: #fbf8f2; }
.full-invite-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 75px; align-items: center; }
.full-invite-copy h2 { max-width: 510px; margin: 14px 0; font: 600 clamp(2.3rem, 4vw, 4rem)/1.03 var(--serif); letter-spacing: -.05em; }.full-invite-copy h2 em { color: #7d8974; }.full-invite-copy > p:not(.section-label) { max-width: 440px; color: var(--ink-soft); font-size: 1rem; }
.included-list { display: grid; gap: 12px; margin: 30px 0; padding: 0; list-style: none; font-size: .9rem; }.included-list li { display: flex; align-items: center; gap: 9px; }.included-list span { display: grid; place-items: center; width: 19px; height: 19px; color: #fff; border-radius: 50%; background: #78876e; font-size: .66rem; }
.text-link { display: inline-flex; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: .82rem; font-weight: 700; }
.phone-stage { position: relative; display: grid; place-items: center; min-height: 760px; }.phone-stage::before { content: ""; position: absolute; width: 510px; height: 510px; border-radius: 50%; background: #e5dfd1; }.stage-label, .scroll-cue { position: absolute; z-index: 2; color: #7b8474; font: .62rem var(--mono); letter-spacing: .13em; }.stage-label { top: 6%; left: 8%; }.scroll-cue { right: 0; bottom: 8%; transform: rotate(-90deg); transform-origin: right bottom; }
.phone-frame { position: relative; z-index: 1; width: 330px; height: 680px; padding: 9px; border-radius: 39px; background: #182031; box-shadow: 20px 30px 0 rgba(125,137,116,.22), 0 30px 60px rgba(15,25,38,.25); }.phone-island { position: absolute; z-index: 3; top: 18px; left: 50%; width: 104px; height: 21px; border-radius: 16px; background: #182031; transform: translateX(-50%); }.phone-screen { height: 100%; overflow-y: auto; scrollbar-width: none; border-radius: 31px; background: #f7f0e5; }.phone-screen::-webkit-scrollbar { display: none; }
.wedding-full-demo { color: #51483c; text-align: center; }.wedding-full-demo section { position: relative; padding: 27px 18px; }.wedding-cover { min-height: 430px; padding-top: 51px !important; overflow: hidden; background: #f7f0e5; }.wedding-cover > p { position: relative; z-index: 1; margin: 0; color: #847a6b; font: .55rem var(--mono); letter-spacing: .22em; }.wedding-cover h3 { position: relative; z-index: 1; margin: 11px 0 17px; font: 600 2.34rem/.95 var(--serif); letter-spacing: -.07em; }.wedding-cover h3 i { font-weight: 400; color: #bd8175; }.wedding-cover img { position: relative; z-index: 1; display: block; width: 172px; height: 236px; margin: auto; object-fit: cover; border: 5px solid #fffaf2; border-radius: 90px 90px 0 0; box-shadow: 0 8px 18px rgba(72,53,29,.18); }.wedding-cover > strong { position: relative; z-index: 1; display: block; margin-top: 15px; font: 600 1.55rem var(--serif); }.petal { position: absolute; z-index: 1; width: 9px; height: 15px; border-radius: 80% 0 80% 0; background: #c5676b; transform: rotate(-25deg); }.petal-one { top: 95px; left: 30px; }.petal-two { top: 180px; right: 33px; }.petal-three { bottom: 30px; right: 65px; }
.wedding-countdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 29px 12px !important; border-top: 1px solid #e5d8c8; border-bottom: 1px solid #e5d8c8; background: #fffaf0; }.wedding-countdown b { display: block; font: 600 1.45rem var(--serif); }.wedding-countdown small { color: #877d6d; font: .5rem var(--mono); letter-spacing: .12em; }
.wedding-date-card, .wedding-detail-card, .wedding-rsvp, .wedding-gift { margin: 22px 14px; border: 1px solid #decebc; border-radius: 15px; background: rgba(255,253,248,.65); }.wedding-date-card > span, .wedding-detail-card > span, .wedding-rsvp > span, .wedding-gift > span { color: #7b8a72; }.wedding-date-card h4, .wedding-detail-card h4, .wedding-rsvp h4, .wedding-gift h4 { margin: 8px 0; font: 600 1.55rem/1 var(--serif); }.wedding-date-card p, .wedding-detail-card p, .wedding-rsvp p, .wedding-gift p { margin: 0 auto 13px; color: #81766a; font-size: .67rem; line-height: 1.45; }.wedding-date-card > strong, .wedding-detail-card > strong { font: 600 .82rem var(--serif); }.mini-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-top: 19px; color: #8a8175; font-size: .52rem; }.mini-calendar span { color: #9a9188; font-size: .46rem; }.mini-calendar b { font-weight: 500; }.mini-calendar .selected-day { display: grid; place-items: center; width: 18px; height: 18px; margin: -4px auto 0; border-radius: 50%; color: #fff; background: #c69682; }.wedding-detail-card { padding-top: 31px !important; }.wedding-detail-card .detail-icon { font-size: 1.3rem; }.wedding-gallery { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 7px; padding: 20px 17px !important; }.gallery-photo { min-height: 90px; border: 4px solid #fffaf4; box-shadow: 0 3px 8px rgba(73,55,35,.16); background: linear-gradient(145deg, #c0b09b, #f1d7b7 53%, #93735e); }.gallery-photo:nth-child(2) { background: linear-gradient(155deg, #f0c9a5, #786448 58%, #3d4a3d); }.gallery-photo:nth-child(3) { background: linear-gradient(135deg, #e3bd8a, #f7ead5 45%, #9b8f76); }.main-photo { min-height: 116px; }
.wedding-rsvp { padding: 27px 14px !important; }.wedding-rsvp button { display: block; width: 100%; margin-top: 8px; padding: 9px; border: 1px solid #d9cbb9; border-radius: 7px; color: #65594d; background: transparent; font-size: .65rem; font-weight: 700; }.wedding-rsvp button:first-of-type { color: #fff; background: #78876e; border-color: #78876e; }.wedding-gift { padding: 27px 14px !important; }.wedding-gift > div { display: grid; gap: 4px; padding: 13px; text-align: left; border: 1px solid #dfd0bf; border-radius: 8px; background: rgba(247,240,229,.7); }.wedding-gift small { margin-top: 7px; color: #928477; font: .47rem var(--mono); letter-spacing: .12em; }.wedding-gift b { font-size: .66rem; font-weight: 600; }.wedding-end { min-height: 215px; display: grid; align-content: center; }.wedding-end h4 { margin: 0; font: 600 1.85rem/1.12 var(--serif); }.wedding-end p { margin: 20px 0 0; color: #82766b; font: .58rem var(--mono); letter-spacing: .15em; }

/* Extras */
.extras-section { padding: 110px 0; background: #e8e1d5; }.extras-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 48px; border: 1px solid rgba(17,25,43,.13); background: rgba(17,25,43,.13); }.extras-grid article { min-height: 190px; padding: 23px; background: #f5f0e7; }.extras-grid span { color: var(--coral); font: .67rem var(--mono); }.extras-grid h3 { margin: 43px 0 8px; font: 600 1.15rem/1.1 var(--serif); }.extras-grid p { margin: 0; color: #65708a; font-size: .82rem; }

/* Demo */
.demo-section { padding: 116px 0; background: #d9e9e9; }
.demo-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: 88px; align-items: center; }
.demo-copy h2 { margin: 14px 0; }.demo-copy em { color: var(--coral); }.demo-copy > p:not(.section-label) { max-width: 430px; color: var(--ink-soft); }
.demo-form { display: grid; gap: 14px; max-width: 430px; margin-top: 30px; }.demo-form label { color: #40536d; font-size: .77rem; font-weight: 700; }.demo-form input, .demo-form select { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid rgba(17,25,43,.22); border-radius: 4px; outline: 0; color: var(--ink); background: rgba(255,255,255,.56); }.demo-form input:focus, .demo-form select:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(231,103,80,.14); }.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.demo-open-link { display: inline-flex; justify-content: center; margin-top: 4px; padding: 13px 16px; color: #fff; background: var(--ink); text-decoration: none; font-size: .82rem; font-weight: 800; }.demo-open-link:hover { background: var(--coral-dark); }.demo-storage-note { margin: -5px 0 0; color: #506573; font-size: .71rem; line-height: 1.5; }
.demo-preview-wrap { display: grid; place-items: center; min-height: 520px; padding: 42px; background: rgba(255,255,255,.38); }.preview-label { align-self: start; justify-self: start; margin: 0; color: #4c6b77; font: .66rem var(--mono); letter-spacing: .12em; }.preview-label span { color: var(--coral); }.live-invite { width: min(100%, 380px); min-height: 365px; padding: 62px 32px 36px; text-align: center; box-shadow: 13px 15px 0 rgba(17,25,43,.12); transition: background .35s ease, color .35s ease; }.live-kicker, .live-rsvp { display: block; font: .63rem var(--mono); letter-spacing: .15em; text-transform: uppercase; }.live-symbol { display: block; margin: 20px 0 7px; font-size: 1.5rem; }.live-invite h3 { margin: 0; font: 600 2.7rem/.96 var(--serif); letter-spacing: -.06em; }.live-invite h3 i { font-weight: 400; }.live-date { margin: 29px 0 0; font-size: .88rem; font-weight: 700; }.live-rule { display: block; width: 50px; height: 1px; margin: 23px auto 14px; background: currentColor; opacity: .5; }.live-place { margin: 0; font-size: .82rem; }.live-rsvp { margin-top: 31px; }.preview-note { margin: 18px 0 0; color: #506573; font-size: .72rem; text-align: center; }

/* Future and footer */
.future-section { padding: 84px 0; background: var(--paper); }.future-box { display: flex; gap: 55px; justify-content: space-between; align-items: end; padding: 52px; color: #fff; background: var(--ink); }.future-box .section-label { color: var(--lilac); }.future-box h2 { max-width: 560px; margin-top: 14px; font-size: clamp(2rem, 3.5vw, 3.3rem); }.future-box ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 0; padding: 0; list-style: none; color: rgba(255,255,255,.75); font-size: .88rem; }.future-box li::before { content: "↗"; margin-right: 8px; color: var(--sky); }
.closing-section { padding: 125px 0; color: #fff; text-align: center; background: var(--coral); }.closing-content { display: grid; place-items: center; }.closing-content .section-label { color: rgba(255,255,255,.72); }.closing-content h2 { margin: 17px 0 31px; font: 600 clamp(3rem, 6vw, 5.4rem)/.95 var(--serif); letter-spacing: -.06em; }.btn-light { color: var(--coral); background: #fff; }.btn-light:hover { background: var(--ink); color: #fff; }
.site-footer { padding: 36px 0; color: rgba(255,255,255,.66); background: #0c1423; }.footer-wrap { display: flex; align-items: center; justify-content: space-between; gap: 22px; font-size: .78rem; }.footer-wrap p { margin: 0; }.footer-wrap > a:last-child { color: var(--sky); font-weight: 700; }
.whatsapp-float { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #072612; background: #25d366; box-shadow: 0 12px 28px rgba(0,0,0,.25); transition: transform .2s ease; }.whatsapp-float:hover { transform: translateY(-3px); }.whatsapp-float svg { width: 27px; height: 27px; }

@media (max-width: 900px) { .hero-grid, .how-grid, .demo-layout, .journey-layout, .full-invite-layout { grid-template-columns: 1fr; gap: 48px; }.hero { padding-top: 130px; }.hero-art { min-height: 350px; }.benefit-grid { grid-template-columns: 1fr 1fr; }.intro-grid { grid-template-columns: 1fr; gap: 22px; }.section-heading-row, .future-box { align-items: start; flex-direction: column; }.section-aside { max-width: 500px; }.demo-preview-wrap { min-height: 470px; }.future-box { display: flex; }.future-box ul { width: 100%; }.site-header nav { display: none; }.journey-orbit { max-width: 500px; }.full-invite-copy { max-width: 600px; }.phone-stage { min-height: 720px; }.extras-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .container { width: min(100% - 34px, var(--container)); }.nav-wrap { height: 70px; }.nav-cta { padding: 8px 11px; }.hero { min-height: auto; padding-bottom: 68px; }.hero h1 { font-size: 3.2rem; }.hero-lead { font-size: 1rem; }.hero-art { min-height: 310px; }.invite-card { width: 270px; padding: 42px 19px 28px; }.invite-card h2 { font-size: 2rem; }.intro-section, .benefits-section, .templates-section, .demo-section, .journey-section, .full-invite-section, .extras-section { padding: 78px 0; }.benefit-grid { grid-template-columns: 1fr; }.benefit-card { min-height: 205px; }.benefit-card h3 { margin-top: 37px; }.how-section { padding: 78px 0; }.template-item summary { grid-template-columns: 48px 1fr 26px; min-height: 84px; }.template-item strong { font-size: 1.22rem; }.template-detail { grid-template-columns: 1fr; gap: 23px; padding: 0 0 31px 48px; }.template-preview { max-width: 250px; }.journey-layout { gap: 28px; }.journey-orbit { width: 350px; max-width: 100%; }.orbit-step { width: 118px; padding: 9px 10px; }.orbit-step strong { font-size: .75rem; }.orbit-step small { font-size: .59rem; }.orbit-step-a { left: 1%; }.orbit-step-b { right: -4%; }.orbit-step-c { right: 1%; }.orbit-step-d { left: -4%; }.full-invite-layout { gap: 25px; }.phone-stage { min-height: 680px; }.phone-stage::before { width: 350px; height: 350px; }.phone-frame { width: 292px; height: 600px; border-radius: 34px; }.phone-screen { border-radius: 26px; }.phone-island { top: 16px; width: 88px; height: 18px; }.stage-label { top: 3%; left: 0; }.scroll-cue { right: -7px; bottom: 7%; font-size: .53rem; }.wedding-cover { min-height: 380px; }.wedding-cover img { width: 148px; height: 203px; }.wedding-cover h3 { font-size: 2rem; }.wedding-full-demo section { padding-left: 12px; padding-right: 12px; }.extras-grid { grid-template-columns: 1fr; }.extras-grid article { min-height: 150px; }.extras-grid h3 { margin-top: 25px; }.form-split { grid-template-columns: 1fr; }.demo-preview-wrap { min-height: 420px; padding: 24px 15px; }.live-invite { min-height: 320px; padding: 50px 18px 28px; }.live-invite h3 { font-size: 2.25rem; }.future-box { padding: 34px 24px; }.future-box ul { grid-template-columns: 1fr; }.closing-section { padding: 90px 0; }.footer-wrap { flex-direction: column; text-align: center; }.whatsapp-float { right: 17px; bottom: 17px; } }