:root {
    --inv-ink: #12100f;
    --inv-charcoal: #1b1817;
    --inv-ivory: #f4efe7;
    --inv-paper: #fffdf9;
    --inv-gold: #c9a66b;
    --inv-gold-dark: #9d7944;
    --inv-wine: #5d1f2b;
    --inv-line: rgba(35, 28, 24, 0.16);
}

.page-invitations {
    color: var(--inv-ink);
    background: var(--inv-ivory);
}

.page-invitations .site-header:not(.is-scrolled):not(.is-menu-open) {
    color: #fff;
}

.page-invitations .site-header:not(.is-scrolled):not(.is-menu-open) .brand-studio,
.page-invitations .site-header:not(.is-scrolled):not(.is-menu-open) .language-switcher a {
    color: rgba(255, 255, 255, .72);
}

.page-invitations .site-header:not(.is-scrolled):not(.is-menu-open) .menu-toggle {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .25);
}

.invitation-page h1,
.invitation-page h2,
.invitation-page h3 {
    font-family: "Space Grotesk", "Manrope", sans-serif;
}

.inv-kicker {
    margin: 0 0 1.2rem;
    color: var(--inv-gold-dark);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1.5;
    text-transform: uppercase;
}

.inv-hero {
    position: relative;
    display: grid;
    min-height: 100svh;
    padding: calc(var(--header-height) + 3rem) 0 5rem;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 12% 20%, rgba(93, 31, 43, .52), transparent 28rem),
        linear-gradient(118deg, #12100f 0%, #201b19 57%, #0e0d0c 100%);
}

.inv-hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 6%;
    width: 1px;
    height: 100%;
    background: linear-gradient(transparent, rgba(201, 166, 107, .4), transparent);
}

.inv-hero__grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.inv-hero__copy { max-width: 42rem; }
.inv-hero .inv-kicker { color: var(--inv-gold); }

.inv-hero h1 {
    max-width: 42rem;
    margin-bottom: 1.5rem;
    font-size: clamp(3.3rem, 7vw, 5.5rem);
    font-weight: 500;
    line-height: .92;
    letter-spacing: -.065em;
}

.inv-hero__copy > p:not(.inv-kicker) {
    max-width: 36rem;
    color: rgba(255, 255, 255, .68);
    font-size: clamp(1rem, 2vw, 1.18rem);
}

.inv-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.inv-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 3.5rem;
    padding: .9rem 1.35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.inv-button:hover { transform: translateY(-3px); }
.inv-button--gold { color: var(--inv-ink); background: var(--inv-gold); }
.inv-button--gold:hover { background: #e1c28f; }
.inv-button--ghost { color: #fff; border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); }
.inv-button--ghost:hover { background: rgba(255, 255, 255, .13); }

.inv-hero__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 1.4rem;
    box-shadow: 0 2.5rem 7rem rgba(0, 0, 0, .42);
}

.inv-hero__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.inv-hero__media figcaption { position: absolute; right: 1rem; bottom: 1rem; padding: .55rem .8rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(16,14,13,.7); color: rgba(255,255,255,.8); font-size: .68rem; backdrop-filter: blur(12px); }
.inv-scroll { position: absolute; bottom: 1.5rem; left: 50%; color: rgba(255,255,255,.55); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%); }

.inv-section { padding: clamp(5rem, 9vw, 8.5rem) 0; }
.inv-heading { max-width: 52rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.inv-heading h2, .inv-intro h2 { margin: 0; font-size: clamp(2.5rem, 6vw, 5.2rem); font-weight: 500; letter-spacing: -.055em; }
.inv-heading > p:last-child { max-width: 35rem; margin: 1rem 0 0; color: #6f6761; }
.inv-heading--light h2 { color: #fff; }
.inv-heading--light > p:last-child { color: rgba(255,255,255,.55); }
.inv-heading--split { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; max-width: none; }

.inv-process { background: var(--inv-paper); }
.inv-process__grid { display: grid; gap: 1px; padding: 0; margin: 0; list-style: none; background: var(--inv-line); border: 1px solid var(--inv-line); }
.inv-process__grid li { min-height: 21rem; padding: 2rem; background: var(--inv-paper); }
.inv-process__grid li > span { color: var(--inv-gold-dark); font-size: .72rem; font-weight: 700; letter-spacing: .14em; }
.inv-process__grid h3 { max-width: 18rem; margin: 7rem 0 1rem; font-size: 1.45rem; text-transform: uppercase; }
.inv-process__grid p { max-width: 22rem; margin: 0; color: #6f6761; }

.inv-intro { background: var(--inv-ivory); }
.inv-intro__grid { display: grid; gap: 3rem; align-items: center; }
.inv-intro__copy > p:not(.inv-kicker) { max-width: 35rem; color: #6f6761; font-size: 1.05rem; }
.inv-intro__media { margin: 0; overflow: hidden; border-radius: 1.2rem; box-shadow: 0 2rem 5rem rgba(44, 36, 30, .13); }
.inv-intro__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.inv-benefits { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; margin-top: 3.5rem; }
.inv-benefits span { display: flex; align-items: center; gap: .65rem; min-height: 4.2rem; padding: .8rem 1rem; border-top: 1px solid var(--inv-line); font-size: .86rem; font-weight: 600; }
.inv-benefits i { color: var(--inv-gold-dark); font-style: normal; }

.inv-formats { background: var(--inv-paper); }
.inv-formats__grid { display: grid; gap: 1rem; }
.inv-format { position: relative; min-height: 23rem; padding: 2rem; overflow: hidden; border: 1px solid var(--inv-line); background: #f8f4ee; }
.inv-format:nth-child(2) { color: #fff; background: var(--inv-wine); }
.inv-format:nth-child(2) p { color: rgba(255,255,255,.65); }
.inv-format__number { position: absolute; top: 1.5rem; right: 1.5rem; color: var(--inv-gold); font-size: .7rem; }
.inv-format__icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; color: var(--inv-gold-dark); border: 1px solid currentColor; border-radius: 50%; }
.inv-format:nth-child(2) .inv-format__icon { color: var(--inv-gold); }
.inv-format svg { width: 2rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.inv-format h3 { margin: 7rem 0 .7rem; font-size: 1.8rem; }
.inv-format p { margin: 0; color: #6f6761; }

.inv-plans { color: #fff; background: var(--inv-charcoal); }
.inv-plans .inv-kicker { color: var(--inv-gold); }
.inv-plans__grid { display: grid; gap: 1rem; align-items: stretch; }
.inv-plan { position: relative; display: flex; flex-direction: column; padding: clamp(1.45rem,3vw,2rem); border: 1px solid rgba(255,255,255,.14); border-radius: .55rem; background: rgba(255,255,255,.035); }
.inv-plan--featured { border-color: var(--inv-gold); background: linear-gradient(145deg, rgba(201,166,107,.19), rgba(255,255,255,.045)); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.25); }
.inv-plan--editorial { border-color: rgba(125,64,78,.8); background: linear-gradient(155deg, rgba(93,31,43,.38), rgba(255,255,255,.025) 60%); }
.inv-plan--editorial h3 { font-family: Georgia, "Times New Roman", serif; font-style: italic; letter-spacing: -.04em; }
.inv-plan__badge { display: inline-flex; align-self: flex-start; padding: .42rem .72rem; margin-bottom: 1.35rem; color: var(--inv-ink); background: var(--inv-gold); border-radius: 999px; font-size: .65rem; font-weight: 800; letter-spacing: .04em; }
.inv-plan__eyebrow { margin: 0 0 .3rem; color: var(--inv-gold); font-size: .65rem; letter-spacing: .18em; }
.inv-plan h3 { margin: 0; font-size: 2.25rem; font-weight: 500; }
.inv-plan__subtitle { margin: .45rem 0 1rem; color: var(--inv-gold); font-size: .78rem; font-weight: 700; letter-spacing: .07em; }
.inv-plan__description { min-height: 7.4rem; margin: 0; color: rgba(255,255,255,.68); font-size: .84rem; line-height: 1.65; }
.inv-plan ul { display: grid; gap: .55rem; padding: 1.35rem 0; margin: 1.2rem 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.12); }
.inv-plan li { display: flex; gap: .6rem; color: rgba(255,255,255,.8); font-size: .78rem; line-height: 1.45; }
.inv-plan li span { color: var(--inv-gold); }
.inv-plan__actions { display: grid; gap: .55rem; margin-top: auto; padding-top: 1rem; }
.inv-plan__details, .inv-plan__cta { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; padding: .72rem .9rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #fff; background: transparent; font-size: .76rem; font-weight: 700; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.inv-plan__details:hover, .inv-plan__details:focus-visible { color: var(--inv-ink); border-color: var(--inv-gold); background: var(--inv-gold); }
.inv-plan__cta { border-color: transparent; background: rgba(255,255,255,.1); }
.inv-plan__cta:hover, .inv-plan__cta:focus-visible { background: rgba(255,255,255,.18); }

.inv-examples-dialog { width: min(62rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; overflow: auto; color: var(--inv-ink); border: 1px solid rgba(201,166,107,.45); border-radius: .8rem; background: var(--inv-paper); box-shadow: 0 2.5rem 8rem rgba(0,0,0,.55); }
.inv-examples-dialog::backdrop, .inv-example-lightbox::backdrop { background: rgba(12,10,9,.86); backdrop-filter: blur(10px); }
.inv-examples-dialog__shell { position: relative; padding: clamp(1.35rem,4vw,3rem); }
.inv-examples-dialog__close { position: sticky; top: .5rem; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0 0 -2.75rem auto; color: var(--inv-ink); border: 1px solid var(--inv-line); border-radius: 50%; background: rgba(255,253,249,.92); font-size: 1.45rem; cursor: pointer; backdrop-filter: blur(8px); }
.inv-examples-dialog__header { display: grid; gap: 1.5rem; align-items: end; padding: .5rem 4rem 1.5rem 0; border-bottom: 1px solid var(--inv-line); }
.inv-examples-dialog__header h2 { margin: 0; font-size: clamp(2.8rem,7vw,5rem); font-weight: 500; letter-spacing: -.06em; }
.inv-examples-dialog--editorial .inv-examples-dialog__header h2 { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.inv-examples-dialog__header p { max-width: 28rem; margin: .3rem 0 0; color: #736a64; }
.inv-examples-grid { display: grid; gap: 1rem; padding: 1.5rem 0; }
.inv-example-card { margin: 0; overflow: hidden; border: 1px solid var(--inv-line); background: #fff; }
.inv-example-card button { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: #ded8d0; cursor: zoom-in; }
.inv-example-card button > span { position: absolute; right: .8rem; bottom: .8rem; padding: .45rem .7rem; color: #fff; background: rgba(20,16,15,.72); border-radius: 999px; font-size: .68rem; opacity: 0; transition: opacity .2s ease; }
.inv-example-card button:hover > span, .inv-example-card button:focus-visible > span { opacity: 1; }
.inv-example-card img, .inv-example-card video { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.inv-example-card--portrait img { aspect-ratio: 4 / 5; object-position: center 55%; }
.inv-example-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; }
.inv-example-card strong, .inv-example-card small { display: block; }
.inv-example-card small { margin-top: .15rem; color: #776f69; font-size: .7rem; }
.inv-example-card em { color: var(--inv-gold-dark); font-size: .7rem; font-style: normal; font-weight: 700; text-align: right; }
.inv-example-card__file { display: grid; place-items: center; min-height: 16rem; color: var(--inv-gold-dark); background: #eee8df; font-weight: 700; }
.inv-example-card__demo { display: inline-flex; margin: 0 1rem 1rem; color: var(--inv-gold-dark); font-size: .75rem; font-weight: 700; }
.inv-examples-dialog__cta { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; padding: .8rem 1rem; color: #fff; background: var(--inv-charcoal); border-radius: 999px; font-size: .78rem; font-weight: 700; }

.inv-example-lightbox { width: min(76rem, calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; overflow: visible; border: 0; background: transparent; }
.inv-example-lightbox > button { position: absolute; top: .5rem; right: .5rem; z-index: 2; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(10,9,8,.72); font-size: 1.4rem; cursor: pointer; }
.inv-example-lightbox figure { display: grid; gap: .65rem; place-items: center; margin: 0; }
.inv-example-lightbox img { width: auto; max-width: 100%; max-height: calc(100dvh - 5rem); border-radius: .55rem; box-shadow: 0 2rem 6rem rgba(0,0,0,.5); }
.inv-example-lightbox figcaption { color: rgba(255,255,255,.78); font-size: .75rem; text-align: center; }

.inv-compare { background: var(--inv-ivory); }
.inv-comparison-table-wrap { display: none; overflow-x: auto; border: 1px solid var(--inv-line); border-radius: .75rem; background: rgba(255,255,255,.6); }
.inv-comparison-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.inv-comparison-table th, .inv-comparison-table td { padding: 1rem; border-right: 1px solid var(--inv-line); border-bottom: 1px solid var(--inv-line); text-align: center; vertical-align: middle; }
.inv-comparison-table tr:last-child th, .inv-comparison-table tr:last-child td { border-bottom: 0; }
.inv-comparison-table th:last-child, .inv-comparison-table td:last-child { border-right: 0; }
.inv-comparison-table thead th { height: 7rem; background: var(--inv-charcoal); color: #fff; }
.inv-comparison-table thead th:first-child { color: rgba(255,255,255,.58); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.inv-comparison-table thead strong { display: block; font-family: "Space Grotesk",sans-serif; font-size: 1.3rem; }
.inv-comparison-table thead span { display: inline-block; margin-bottom: .45rem; color: var(--inv-gold); font-size: .6rem; letter-spacing: .06em; }
.inv-comparison-table tbody th { color: #5f5751; background: rgba(255,255,255,.52); font-size: .76rem; text-align: left; }
.inv-comparison-table tbody td { font-size: .78rem; font-weight: 700; }
.inv-comparison-table .is-signature { background: rgba(201,166,107,.14); }
.inv-comparison-table thead .is-signature { background: linear-gradient(145deg,#302721,#4d3c2e); }
.inv-compare-mobile { display: grid; gap: 1rem; }
.inv-compare-card { padding: 1.5rem; border: 1px solid var(--inv-line); background: rgba(255,255,255,.48); }
.inv-compare-card.is-signature { border-color: rgba(157,121,68,.55); background: rgba(201,166,107,.12); }
.inv-compare-card__badge { display: inline-flex; margin-bottom: .75rem; color: var(--inv-gold-dark); font-size: .65rem; font-weight: 800; letter-spacing: .06em; }
.inv-compare-card h3 { padding-bottom: 1rem; margin: 0; border-bottom: 2px solid var(--inv-gold); font-size: 1.65rem; }
.inv-compare-card dl { margin: 0; }
.inv-compare-card dl div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: .72rem 0; border-bottom: 1px solid var(--inv-line); }
.inv-compare-card dt { color: #766d67; font-size: .72rem; }
.inv-compare-card dd { margin: 0; font-size: .78rem; font-weight: 700; text-align: right; }

.inv-faq { background: var(--inv-ivory); }
.inv-faq__grid { display: grid; gap: 2.5rem; }
.inv-faq__list details { border-top: 1px solid var(--inv-line); }
.inv-faq__list details:last-child { border-bottom: 1px solid var(--inv-line); }
.inv-faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 0; font-weight: 700; cursor: pointer; list-style: none; }
.inv-faq__list summary::-webkit-details-marker { display: none; }
.inv-faq__list summary span { font-size: 1.5rem; font-weight: 400; transition: transform .25s ease; }
.inv-faq__list details[open] summary span { transform: rotate(45deg); }
.inv-faq__list details p { max-width: 42rem; padding: 0 2.5rem 1.4rem 0; margin: 0; color: #6f6761; }

.inv-final { padding: clamp(5rem, 10vw, 9rem) 0; color: #fff; background: var(--inv-wine); }
.inv-final .inv-kicker { color: var(--inv-gold); }
.inv-final__card { position: relative; text-align: center; }
.inv-final h2 { max-width: 58rem; margin: 0 auto; font-size: clamp(2.8rem, 7vw, 6rem); font-weight: 500; letter-spacing: -.06em; }
.inv-final .inv-actions { justify-content: center; }

@media (min-width: 48rem) {
    .inv-benefits { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .inv-process__grid, .inv-formats__grid, .inv-plans__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .inv-comparison-table-wrap { display: block; }
    .inv-compare-mobile { display: none; }
    .inv-examples-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .inv-example-card:not(.inv-example-card--portrait):first-child { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
    .inv-hero__grid { grid-template-columns: minmax(25rem,.78fr) minmax(0,1.22fr); gap: 5rem; }
    .inv-intro__grid { grid-template-columns: minmax(20rem,.72fr) minmax(0,1.28fr); gap: 6rem; }
    .inv-faq__grid { grid-template-columns: minmax(18rem,.65fr) minmax(0,1.35fr); gap: 7rem; }
    .inv-faq .inv-heading { position: sticky; top: calc(var(--header-height) + 2rem); align-self: start; }
    .inv-examples-dialog__header { grid-template-columns: minmax(14rem,.7fr) minmax(0,1.3fr); }
}

@media (max-width: 63.99rem) {
    .page-invitations .site-header:not(.is-scrolled):not(.is-menu-open) .language-switcher a.is-active { color: #fff; }
    .inv-scroll { display: none; }
}

@media (max-width: 39.99rem) {
    .inv-hero { min-height: auto; }
    .inv-hero__media figcaption { display: none; }
    .inv-actions { flex-direction: column; }
    .inv-button { width: 100%; }
    .inv-benefits { grid-template-columns: 1fr; }
    .inv-process__grid h3 { margin-top: 4rem; }
    .inv-process__grid li { min-height: 17rem; }
    .inv-plan__description { min-height: 0; }
    .inv-example-card figcaption { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .inv-example-card img, .inv-faq__list summary span { transition: none; }
}