/* Hallmark · macrostructure: Catalogue (working starter in the fold) · tone: warm, composed, sure of itself
 * theme: custom "garnet ink on warm paper" · paper oklch(98.3% 0.009 85) · accent oklch(37% 0.115 12) garnet
 * display: Newsreader · body: Figtree · axes: light / serif display + sans body / warm
 * nav: N1b · footer: Ft5 statement + index
 * pre-emit critique: P4 H4 E4 S5 R4 V4
 *
 * The marketing site's ONE stylesheet. It replaces styles.css, home-light.css,
 * home-invitation.css and home-product.css, which had been layered on top of
 * each other until no rule could be changed without checking three files.
 *
 * Everything is laid out with logical properties, so Arabic needs no second
 * sheet: the page simply starts from the other side.
 */

/* ------------------------------------------------------------------ tokens */
:root {
    /* Surfaces */
    --color-paper: oklch(98.3% 0.009 85);
    --color-paper-2: oklch(95.6% 0.017 80);
    --color-card: oklch(99.7% 0.003 85);
    --color-line: oklch(87.5% 0.02 75);
    /* Ink */
    --color-ink: oklch(22% 0.028 20);
    --color-ink-2: oklch(41% 0.03 35);
    /* The brand colour: a garnet, the red of a wax seal, taken to page scale
       in the bands. */
    --color-brand: oklch(37% 0.115 12);
    --color-brand-hover: oklch(31% 0.11 12);
    --color-brand-deep: oklch(25% 0.075 10);
    --color-brand-tint: oklch(93.5% 0.028 30);
    --color-on-brand: oklch(97.5% 0.012 80);
    --color-on-brand-2: oklch(86% 0.035 45);
    /* Candle gold, used only for the action on a garnet field. */
    --color-sun: oklch(85% 0.105 85);
    --color-sun-hover: oklch(80% 0.115 83);
    --color-on-sun: oklch(25% 0.05 50);
    --color-ok: oklch(52% 0.13 155);
    --color-bad: oklch(50% 0.19 27);
    --color-focus: oklch(50% 0.17 15);
    --color-whatsapp: oklch(62% 0.17 150);

    /* The six covers on the hero table wear their designs' own colours. */
    --d-sadaf-bg: oklch(22% 0.03 50);
    --d-sadaf-metal: oklch(73% 0.1 82);
    --d-sadaf-pearl: oklch(87% 0.045 85);
    --d-yasmine-bg: oklch(98.3% 0.008 100);
    --d-yasmine-leaf: oklch(58% 0.05 140);
    --d-yasmine-ink: oklch(35% 0.04 155);
    --d-postale-bg: oklch(95.5% 0.02 90);
    --d-postale-ink: oklch(33% 0.07 258);
    --d-postale-red: oklch(54% 0.17 32);
    --d-arz-bg: oklch(32% 0.04 170);
    --d-arz-snow: oklch(96% 0.006 100);
    --d-arz-copper: oklch(62% 0.1 60);
    --d-layali-bg: oklch(24% 0.06 268);
    --d-layali-moon: oklch(88% 0.06 92);
    --d-ligne-bg: oklch(100% 0 0);
    --d-ligne-ink: oklch(19% 0.01 100);
    --d-ligne-line: oklch(51% 0.07 105);

    /* Type */
    --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
    --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --text-xs: .8125rem;
    --text-sm: .9375rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: clamp(1.45rem, 1.1rem + 1.2vw, 1.85rem);
    --text-2xl: clamp(1.9rem, 1.25rem + 2.6vw, 3rem);
    --text-display: clamp(2.35rem, 1.2rem + 4.9vw, 4.6rem);

    /* Space: a 4pt scale */
    --space-2xs: .25rem;
    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: clamp(4.5rem, 3rem + 6vw, 8rem);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --rule: 1px solid var(--color-line);
    --shadow-card: 0 1px 2px oklch(22% 0.028 20 / .06), 0 14px 32px -14px oklch(22% 0.028 20 / .22);
    --shadow-lift: 0 2px 4px oklch(22% 0.028 20 / .08), 0 26px 48px -18px oklch(22% 0.028 20 / .32);

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in: cubic-bezier(.7, 0, .84, 0);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-fast: 140ms;
    --dur: 240ms;

    --wrap: 76rem;
    --gutter: clamp(1.1rem, .6rem + 2.4vw, 2.5rem);
}

/* The Latin faces have no Arabic or Armenian glyphs; these are the families
   the invitations themselves use (loaded by home/partials/lang-head). */
html[lang="ar"] {
    --font-display: "Noto Naskh Arabic", "Amiri", Tahoma, sans-serif;
    --font-body: "Noto Naskh Arabic", "Amiri", Tahoma, sans-serif;
}
html[lang="hy"] {
    --font-display: "Noto Sans Armenian", "Noto Serif Armenian", sans-serif;
    --font-body: "Noto Sans Armenian", "Noto Serif Armenian", sans-serif;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { letter-spacing: 0; line-height: 1.35; }
html[lang="ar"] body { line-height: 1.8; }
html[lang="hy"] h1, html[lang="hy"] h2 { letter-spacing: -.01em; line-height: 1.15; }

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    overflow-x: clip;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    caret-color: var(--color-brand);
}

::selection { background: var(--color-brand); color: var(--color-on-brand); }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 500;
    font-optical-sizing: auto;
    line-height: 1.08;
    letter-spacing: -.02em;
    text-wrap: balance;
    overflow-wrap: anywhere;
    min-width: 0;
}

h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); letter-spacing: -.012em; line-height: 1.2; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="hy"] h1, html[lang="hy"] h2, html[lang="hy"] h3 { font-weight: 700; }
html[lang="ar"] h3, html[lang="hy"] h3 { font-size: var(--text-lg); }

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: 4px;
}

.wrap {
    width: 100%;
    max-width: calc(var(--wrap) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip {
    position: absolute;
    inset-inline-start: var(--space-md);
    top: -4rem;
    z-index: 60;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-ink);
    color: var(--color-paper);
    border-radius: var(--radius-sm);
}
.skip:focus { top: var(--space-md); }

/* ----------------------------------------------------------------- buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 3rem;
    padding: 0 1.4rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-weight: 600;
    font-size: var(--text-md);
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-brand-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn--quiet {
    background: transparent;
    color: var(--color-ink);
    border-color: var(--color-line);
}
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-ink-2); }

.btn--sun { background: var(--color-sun); color: var(--color-on-sun); }
.btn--sun:hover { background: var(--color-sun-hover); }

.btn--small { min-height: 2.5rem; padding: 0 1.05rem; font-size: var(--text-sm); }

.link {
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: underline;
}
.link:hover { color: var(--color-brand-hover); }

/* ------------------------------------------------------------------ header */
.top {
    position: sticky;
    top: var(--space-sm);
    z-index: 40;
    width: min(calc(100% - 2 * var(--gutter)), calc(var(--wrap) + 2 * var(--gutter)));
    margin: var(--space-sm) auto 0;
    background: color-mix(in oklch, var(--color-paper) 76%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border: 1px solid color-mix(in oklch, var(--color-brand) 13%, var(--color-line));
    border-radius: var(--radius-pill);
    box-shadow: 0 .5rem 1.6rem oklch(40% 0.04 35 / .09);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.top.is-stuck {
    border-color: color-mix(in oklch, var(--color-brand) 20%, var(--color-line));
    background: color-mix(in oklch, var(--color-paper) 92%, transparent);
    box-shadow: 0 .65rem 1.8rem oklch(40% 0.04 35 / .12);
}

.top__in {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-height: 5rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: -.01em;
    line-height: 1.1;
    white-space: nowrap;
}
.brand img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.brand small { display: none; }

.nav { display: flex; align-items: center; gap: var(--space-lg); margin-inline-start: auto; }
.nav a { text-decoration: none; font-weight: 500; font-size: var(--text-sm); white-space: nowrap; }
.nav a:hover { color: var(--color-brand); }

.top__acts { display: flex; align-items: center; gap: var(--space-md); }
.top__login { font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
.top__login:hover { color: var(--color-brand); }

.lang-switch { position: relative; font-size: var(--text-sm); }
.lang-switch summary {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 2.5rem;
    padding: 0 .8rem;
    border: var(--rule);
    border-radius: var(--radius-pill);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after {
    content: "";
    width: .4rem;
    height: .4rem;
    border-inline-end: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.lang-switch ul {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + .4rem);
    z-index: 5;
    min-width: 10rem;
    padding: var(--space-xs);
    background: var(--color-card);
    border: var(--rule);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.lang-switch a { display: block; padding: .55rem .75rem; border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; }
.lang-switch a:hover { background: var(--color-paper-2); }
.lang-switch a[aria-current="true"] { background: var(--color-brand-tint); font-weight: 600; }
.lang-switch--nav { display: none; }

/* The menu at phone width: a plain disclosure, no script. */
.menu { display: none; margin-inline-start: auto; }
.menu > summary {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: var(--rule);
    border-radius: var(--radius-pill);
    cursor: pointer;
    list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary span, .menu > summary span::before, .menu > summary span::after {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: var(--color-ink);
    border-radius: 2px;
}
.menu > summary span { position: relative; }
.menu > summary span::before, .menu > summary span::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu > summary span::before { top: -6px; }
.menu > summary span::after { top: 6px; }
.menu__panel {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-md) var(--gutter) var(--space-lg);
    background: var(--color-paper);
    border-bottom: var(--rule);
    box-shadow: var(--shadow-card);
}
.menu__panel a { padding: .8rem 0; font-size: var(--text-lg); font-weight: 600; text-decoration: none; border-bottom: var(--rule); }
.menu__panel .lang-switch { margin-top: var(--space-md); }
.menu__panel .lang-switch ul { position: static; margin-top: var(--space-xs); box-shadow: none; }
.menu__panel .lang-switch a { border-bottom: 0; font-size: var(--text-md); font-weight: 500; }

@media (max-width: 60rem) {
    .nav, .top__login, .top__acts .lang-switch { display: none; }
    .menu { display: block; }
    .top__acts { margin-inline-start: 0; }
    .top__in { gap: var(--space-sm); }
}
@media (max-width: 26rem) {
    .brand span { display: none; }
}

/* -------------------------------------------------------------------- hero */
.hero {
    position: relative;
    padding-block: clamp(1.5rem, .75rem + 1.6vw, 2.5rem) var(--space-3xl);
    isolation: isolate;
    background: var(--color-paper);
}

/* The wedding cover's rose-and-candlelight backdrop brings the homepage back
   to the live site's invitation mood, while the paper wash keeps the copy
   and animated cards easy to read. */
.hero::before {
    position: absolute;
    z-index: -1;
    inset: calc(-5rem - var(--space-sm)) 0 0;
    content: "";
    background:
        linear-gradient(90deg, oklch(98.3% 0.009 85 / .2), oklch(98.3% 0.009 85 / .08) 52%, oklch(98.3% 0.009 85 / .16)),
        url("./home-hero-wedding-1536.jpg") center 48% / cover no-repeat;
}

.hero__grid {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    align-items: center;
}

.hero__say {
    position: relative;
    padding: clamp(1.35rem, .7rem + 2vw, 2.25rem);
    border: 1px solid color-mix(in oklch, var(--color-brand) 18%, var(--color-line));
    background: color-mix(in oklch, var(--color-paper) 86%, transparent);
    box-shadow: 0 1.1rem 3rem oklch(40% 0.04 35 / .09);
    backdrop-filter: blur(4px);
    text-align: center;
}

.hero__say::before {
    position: absolute;
    inset: .55rem;
    border: 1px solid color-mix(in oklch, var(--color-brand) 13%, transparent);
    content: "";
    pointer-events: none;
}

/* A soft scalloped paper edge carries the live hero's stationery detail over. */
.hero__scallop {
    position: absolute;
    z-index: 1;
    inset: .55rem 1.1rem auto;
    height: .65rem;
    background: radial-gradient(circle at 9px 0, color-mix(in oklch, var(--color-paper) 96%, white) 0 8px, transparent 8.6px) 0 0 / 18px 10px repeat-x;
    filter: drop-shadow(0 2px 2px oklch(32% 0.03 35 / .16));
    pointer-events: none;
}

/* Small gilt rosettes echo the four corner ornaments on the former hero card. */
.hero__say::after {
    position: absolute;
    inset: -.45rem;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle, var(--color-brand) 0 2px, color-mix(in oklch, var(--color-sun) 78%, white) 3px 7px, color-mix(in oklch, var(--color-brand) 35%, transparent) 8px 9px, transparent 10px) top left / 22px 22px no-repeat,
        radial-gradient(circle, var(--color-brand) 0 2px, color-mix(in oklch, var(--color-sun) 78%, white) 3px 7px, color-mix(in oklch, var(--color-brand) 35%, transparent) 8px 9px, transparent 10px) top right / 22px 22px no-repeat,
        radial-gradient(circle, var(--color-brand) 0 2px, color-mix(in oklch, var(--color-sun) 78%, white) 3px 7px, color-mix(in oklch, var(--color-brand) 35%, transparent) 8px 9px, transparent 10px) bottom left / 22px 22px no-repeat,
        radial-gradient(circle, var(--color-brand) 0 2px, color-mix(in oklch, var(--color-sun) 78%, white) 3px 7px, color-mix(in oklch, var(--color-brand) 35%, transparent) 8px 9px, transparent 10px) bottom right / 22px 22px no-repeat;
}

/* Large and light rather than heavy: the page's one loud thing is the fan. */
.hero h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.8rem, 1.2rem + 5.6vw, 5.4rem);
    line-height: 1;
    letter-spacing: -.028em;
}

.hero__copy { margin: var(--space-lg) auto 0; max-width: 34rem; font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2); }
.hero__image { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.hero__scroll {
    display: grid;
    justify-items: center;
    gap: .1rem;
    width: max-content;
    margin: calc(var(--space-2xl) - .5rem) auto 0;
    color: var(--color-ink-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
}
.hero__scroll svg { width: 1.25rem; height: 1.25rem; transition: transform var(--dur-fast) var(--ease-out); }
.hero__scroll:hover svg { transform: translateY(.2rem); }

/* The starter: the page's one action, in its working form. One bar. */
.starter { margin: var(--space-xl) auto 0; max-width: 40rem; }
.starter__q { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.starter__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: end;
    margin-top: var(--space-xs);
    padding: var(--space-sm);
    background: var(--color-card);
    border: var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.starter__amp { padding-bottom: .7rem; font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); color: var(--color-ink-2); }
.field { display: grid; gap: .35rem; min-width: 0; }
.field > span { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); text-align: center; }
.field input, .field select, .field textarea {
    width: 100%;
    min-height: 3rem;
    padding: .65rem .9rem;
    background: var(--color-paper);
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    text-align: center;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklch, var(--color-ink-2) 80%, var(--color-paper)); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 1px; border-color: var(--color-brand); }
.starter__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.4rem; margin-top: var(--space-md); padding-inline: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); text-align: center; }
.starter__facts li { display: inline-flex; align-items: baseline; gap: .35rem; }
.starter__facts b { color: var(--color-ink); font-weight: 700; }

/* The fan: one invitation forward, two behind it, as on a stationer's table. */
.fan { min-width: 0; width: calc(100% + clamp(0rem, 1.5vw, 1.25rem)); margin-inline-end: calc(-1 * clamp(0rem, 2vw, 1.5rem)); justify-self: end; }
.fan__stage { position: relative; display: grid; place-items: center; height: clamp(21rem, 15rem + 18vw, 33rem); perspective: 1100px; }
/* The cards stand in real depth: the stage turns a few degrees towards the
   pointer (site.js sets --rx / --ry), and the cards behind sit further back. */
.fan__tilt {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 500ms var(--ease-out);
}
.fan__bar { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); margin-top: var(--space-lg); }
.fan__name { display: grid; justify-items: center; gap: .1rem; min-width: 11rem; text-align: center; font-size: var(--text-sm); }
.fan__name b { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); letter-spacing: -.012em; line-height: 1.1; }
.fan__arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    background: var(--color-card);
    border: 1.5px solid var(--color-line);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.fan__arrow:hover { border-color: var(--color-ink); }
.fan__arrow:active { background: var(--color-paper-2); }
.fan__arrow svg { width: 1.1rem; height: 1.1rem; }
[dir="rtl"] .fan__arrow svg { scale: -1 1; }

.cover {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .35em;
    grid-area: 1 / 1;
    width: min(56%, 20rem);
    aspect-ratio: 3 / 4;
    padding: 12% 9%;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    text-align: center;
    text-decoration: none;
    font-size: clamp(.78rem, .42rem + 1vw, 1.14rem);
    transition: transform 520ms var(--ease-out), opacity 320ms var(--ease-out), translate var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cover[data-pos="front"] { z-index: 3; box-shadow: var(--shadow-lift); transform: translateZ(56px); }
.cover[data-pos="front"]:hover { translate: 0 -6px; }
/* The cards are never quite still: each drifts a few pixels on its own beat,
   like paper held in the hand. `translate` is used so the drift adds to the
   fan's own transform instead of replacing it. */
.fan:not(.fan--intro) .cover { animation: card-drift 7s ease-in-out infinite; }
.fan:not(.fan--intro) .cover[data-pos="left"] { animation-duration: 8.5s; animation-delay: -2s; }
.fan:not(.fan--intro) .cover[data-pos="right"] { animation-duration: 9.5s; animation-delay: -5s; }
.fan:not(.fan--intro) .cover[data-pos="front"]:hover { animation-play-state: paused; }
@keyframes card-drift {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    50% { translate: 0 -9px; rotate: .6deg; }
}
.cover[data-pos="right"] { z-index: 2; transform: translateX(48%) translateZ(-40px) rotateY(-16deg) rotate(6deg) scale(.86); }
.cover[data-pos="left"] { z-index: 2; transform: translateX(-48%) translateZ(-40px) rotateY(16deg) rotate(-6deg) scale(.86); }
.cover[data-pos="away"] { z-index: 1; opacity: 0; pointer-events: none; transform: translateZ(-160px) scale(.7); }

/* ---- The opening: the page's one orchestrated moment.
   A sealed envelope; the seal lifts, the flap opens, the invitation rises out
   of it, the envelope falls away and the other designs fan out from behind.
   It runs once, in CSS alone, and ends on the fan exactly as it is laid out
   above (the keyframes have no end state of their own). */
.env {
    --env-paper: oklch(93.5% 0.028 82);
    --env-fold: oklch(89.5% 0.034 78);
    grid-area: 1 / 1;
    position: relative;
    width: min(74%, 26rem);
    aspect-ratio: 7 / 5;
    pointer-events: none;
    opacity: 0;
    perspective: 900px;
}
.env--front { z-index: 4; }
.env > span { position: absolute; display: block; }
.env__back { inset: 0; border-radius: 10px; background: var(--color-brand-deep); box-shadow: var(--shadow-lift); }
.env__pocket {
    inset: 0;
    border-radius: 10px;
    background:
        linear-gradient(to top right, transparent calc(50% - .5px), oklch(22% 0.028 20 / .12) 50%, transparent calc(50% + .5px)) bottom left / 50% 48% no-repeat,
        linear-gradient(to top left, transparent calc(50% - .5px), oklch(22% 0.028 20 / .12) 50%, transparent calc(50% + .5px)) bottom right / 50% 48% no-repeat,
        var(--env-paper);
    clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
}
.env__flap, .env__lining {
    inset: 0 0 auto 0;
    height: 56%;
    transform-origin: 50% 0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env__flap { background: linear-gradient(var(--env-paper), var(--env-fold)); backface-visibility: hidden; }
/* The inside of the same flap, seen once it has passed upright. */
.env__lining { background: var(--color-brand); transform: rotateX(180deg); }
.env__seal {
    inset-inline-start: 50%;
    top: 54%;
    display: grid !important;
    place-items: center;
    width: 17%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, oklch(48% 0.13 14), var(--color-brand) 60%, var(--color-brand-hover));
    box-shadow: 0 2px 5px oklch(22% 0.028 20 / .35), inset 0 0 0 3px oklch(31% 0.11 12 / .6);
    color: var(--color-on-brand-2);
    font-family: var(--font-display);
    font-size: clamp(1rem, .6rem + 1.4vw, 1.7rem);
    line-height: 1;
}
[dir="rtl"] .env__seal { translate: 50% -50%; }

.fan--intro .env { animation: env-away 2600ms var(--ease-out) both; }
.fan--intro .env__flap { animation: env-flap 2600ms var(--ease-out) both; }
.fan--intro .env__lining { animation: env-lining 2600ms var(--ease-out) both; }
.fan--intro .env__seal { animation: env-seal 2600ms var(--ease-out) both; }
.fan--intro .cover[data-pos="front"] { animation: card-rise 2600ms var(--ease-out) backwards; }
.fan--intro .cover[data-pos="left"], .fan--intro .cover[data-pos="right"] { animation: card-fan 2600ms var(--ease-out) backwards; }

@keyframes env-away {
    0%, 62% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(70%) rotate(-4deg) scale(.9); }
}
@keyframes env-flap {
    0%, 18% { transform: rotateX(0deg); }
    40%, 100% { transform: rotateX(180deg); }
}
@keyframes env-lining {
    0%, 18% { opacity: 0; transform: rotateX(0deg); }
    28.9% { opacity: 0; }
    29% { opacity: 1; }
    40%, 100% { opacity: 1; transform: rotateX(180deg); }
}
@keyframes env-seal {
    0%, 8% { opacity: 1; scale: 1; }
    14% { opacity: 1; scale: 1.14; }
    22%, 100% { opacity: 0; scale: .6; }
}
@keyframes card-rise {
    0%, 36% { opacity: 0; transform: translateY(4%) scale(.6); box-shadow: none; }
    42% { opacity: 1; transform: translateY(2%) scale(.6); box-shadow: none; }
    62% { opacity: 1; transform: translateY(-34%) scale(.62); }
}
@keyframes card-fan {
    0%, 70% { opacity: 0; transform: translateZ(-40px) scale(.8); }
}
.cover__pre { font-size: .82em; line-height: 1.2; }
.cover__names { display: block; font-size: 2.6em; line-height: 1.02; overflow-wrap: anywhere; min-width: 0; }
.cover__names i { font-style: normal; font-size: .6em; opacity: .8; }
.cover__date { font-size: .82em; line-height: 1.3; }

.cover--sadaf { background: var(--d-sadaf-bg); color: var(--d-sadaf-pearl); font-family: "Marcellus", Georgia, serif; }
.cover--sadaf::before { content: ""; position: absolute; inset: 6%; border: 1px solid var(--d-sadaf-metal); pointer-events: none; }
.cover--sadaf .cover__pre, .cover--sadaf .cover__date { color: var(--d-sadaf-metal); letter-spacing: .2em; text-transform: uppercase; font-size: .68em; }
.cover--sadaf .cover__names { font-family: "Pinyon Script", cursive; font-size: 3em; }

.cover--yasmine { background: var(--d-yasmine-bg); color: var(--d-yasmine-ink); font-family: Georgia, serif; align-content: end; }
.cover--yasmine::before {
    content: "";
    width: 46%;
    aspect-ratio: 3 / 3.6;
    margin-bottom: .6em;
    border-radius: 999px 999px 0 0;
    background: var(--cover-photo, none) center / cover no-repeat, color-mix(in oklch, var(--d-yasmine-leaf) 22%, var(--d-yasmine-bg));
    outline: 1px solid var(--d-yasmine-leaf);
    outline-offset: 4px;
}
.cover--yasmine .cover__pre { font-style: italic; color: var(--d-yasmine-leaf); }
.cover--yasmine .cover__names { font-family: "Sacramento", cursive; font-size: 2.7em; }

.cover--postale { background: var(--d-postale-bg); color: var(--d-postale-ink); font-family: "Courier New", monospace; }
.cover--postale::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5%;
    background: repeating-linear-gradient(135deg, var(--d-postale-red) 0 9px, var(--d-postale-bg) 9px 16px, var(--d-postale-ink) 16px 25px, var(--d-postale-bg) 25px 32px);
}
.cover--postale::after {
    content: "";
    position: absolute;
    top: 11%;
    inset-inline-end: 8%;
    width: 15%;
    aspect-ratio: 4 / 5;
    background: var(--d-postale-red);
    border: 3px dotted var(--d-postale-bg);
    rotate: 6deg;
}
.cover--postale .cover__pre { color: var(--d-postale-red); letter-spacing: .14em; text-transform: uppercase; font-size: .68em; }
.cover--postale .cover__names { font-family: "Caveat", cursive; font-weight: 700; font-size: 2.9em; }
.cover--postale .cover__date { padding: .3em .7em; border: 1.5px solid var(--d-postale-red); color: var(--d-postale-red); font-weight: 700; font-size: .66em; letter-spacing: .1em; text-transform: uppercase; rotate: -3deg; }

.cover--arz { background: var(--d-arz-bg); color: var(--d-arz-snow); font-family: Georgia, serif; }
.cover--arz .cover__pre { color: var(--d-arz-copper); letter-spacing: .2em; text-transform: uppercase; font-size: .66em; }
.cover--arz .cover__names { font-family: "Bodoni Moda", Georgia, serif; font-style: italic; font-size: 2.3em; }
.cover--arz .cover__date { margin-top: .5em; padding: .55em 0 .45em; width: 100%; border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; letter-spacing: .14em; text-transform: uppercase; font-size: .62em; }

.cover--layali {
    color: var(--d-layali-moon);
    font-family: Georgia, serif;
    background:
        radial-gradient(1.5px 1.5px at 18% 22%, var(--d-layali-moon) 50%, transparent 51%),
        radial-gradient(1px 1px at 72% 14%, var(--d-layali-moon) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 84% 62%, var(--d-layali-moon) 50%, transparent 51%),
        radial-gradient(1px 1px at 30% 78%, var(--d-layali-moon) 50%, transparent 51%),
        radial-gradient(1px 1px at 55% 88%, var(--d-layali-moon) 50%, transparent 51%),
        var(--d-layali-bg);
}
.cover--layali::before { content: ""; width: 1.9em; height: 1.9em; margin-bottom: .7em; border-radius: 50%; box-shadow: -.32em .18em 0 0 var(--d-layali-moon); rotate: -18deg; translate: .18em 0; }
.cover--layali .cover__pre, .cover--layali .cover__date { letter-spacing: .22em; text-transform: uppercase; font-size: .62em; }
.cover--layali .cover__names { font-family: "Great Vibes", cursive; font-size: 3em; }

.cover--ligne { background: var(--d-ligne-bg); color: var(--d-ligne-ink); font-family: var(--font-body); justify-items: start; align-content: end; text-align: start; outline: 1px solid var(--color-line); outline-offset: -1px; }
.cover--ligne .cover__pre { color: var(--d-ligne-line); font-weight: 600; }
.cover--ligne .cover__names { font-family: "Instrument Serif", Georgia, serif; font-size: 3.2em; line-height: .92; letter-spacing: -.02em; }
.cover--ligne .cover__date { margin-top: .6em; padding-top: .5em; border-top: 2px solid var(--d-ligne-line); font-weight: 600; }

@media (max-width: 60rem) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); }
    .starter { max-width: none; }
    .fan { width: 100%; }
    .fan__stage { height: clamp(19rem, 10rem + 46vw, 30rem); }
    .cover { width: min(54%, 17rem); font-size: clamp(.7rem, .3rem + 1.9vw, 1rem); }
}
@media (max-width: 40rem) {
    /* The names side by side, the button under them, full width. */
    .starter__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .starter__row .btn { grid-column: 1 / -1; min-height: 3.25rem; }
}

/* ------------------------------------------------------------------- trust */
.trust { border-block: var(--rule); background: var(--color-card); }
.trust ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-lg) var(--space-xl); padding-block: var(--space-xl); }
.trust li { padding-inline-start: 1.6rem; position: relative; }
.trust li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .4em;
    width: .95rem;
    height: .5rem;
    border-inline-start: 2.5px solid var(--color-brand);
    border-bottom: 2.5px solid var(--color-brand);
    rotate: -45deg;
}
[dir="rtl"] .trust li::before { rotate: 45deg; }
.trust strong { display: block; font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em; }
.trust span { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------------------------------------------------------------- sections */
.sec { padding-block: var(--space-3xl); }
.sec__head { max-width: 44rem; margin-bottom: var(--space-2xl); }
.sec__head p { margin-top: var(--space-md); font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2); }
.sec--tint { background: var(--color-paper-2); }
.sec__head--row { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); max-width: none; }
.sec__head--row > div:first-child { max-width: 44rem; }
.sec--center .sec__head { margin-inline: auto; text-align: center; }
.sec--center .faq { margin-inline: auto; }
.sec--center .nudge { max-width: 50rem; margin-inline: auto; }

/* The blue band: the brand colour at page scale. */
.sec--blue { background: var(--color-brand-deep); color: var(--color-on-brand); }
.sec--blue .sec__head p { color: var(--color-on-brand-2); }
.sec--blue ::selection { background: var(--color-sun); color: var(--color-on-sun); }
.sec--blue :focus-visible { outline-color: var(--color-sun); }

/* ----------------------------------------------------------------- journey */
/* One link, five moments. A real sequence, so it is numbered and it runs
   along one line; each stop shows the actual thing a guest or host sees. */
.trail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-lg); counter-reset: stop; }
.stop { position: relative; counter-increment: stop; min-width: 0; }
.stop__thing {
    display: grid;
    align-content: center;
    gap: .45rem;
    min-height: 11.5rem;
    padding: var(--space-md);
    background: var(--color-on-brand);
    color: var(--color-ink);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    line-height: 1.35;
}
.stop__num {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block: var(--space-lg) var(--space-xs);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-lg);
    font-variant-numeric: lining-nums;
    color: var(--color-sun);
}
.stop__num::before { content: counter(stop); }
.stop__num::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklch, var(--color-on-brand) 28%, transparent); }
.stop:last-child .stop__num::after { display: none; }
.stop h3 { font-size: var(--text-lg); }
.stop p { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-on-brand-2); }

.t-bubble { justify-self: start; max-width: 100%; padding: .5rem .7rem; background: var(--color-brand-tint); border-radius: 12px 12px 12px 3px; }
.t-linkcard { display: grid; gap: .15rem; padding: .55rem .7rem; border: var(--rule); border-radius: var(--radius-sm); }
.t-linkcard b { font-family: var(--font-body); font-size: var(--text-sm); }
.t-linkcard small { color: var(--color-brand); font-weight: 600; overflow-wrap: anywhere; }
.t-h { font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); }
.t-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.t-pair span { padding: .5rem .3rem; text-align: center; border: var(--rule); border-radius: var(--radius-sm); font-weight: 600; }
.t-pair .is-on { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
.t-done { padding: .5rem; text-align: center; border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-paper); font-weight: 600; }
.t-tables { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.t-tables div { display: grid; padding: .45rem .55rem; border: var(--rule); border-radius: var(--radius-sm); }
.t-tables b { font-family: var(--font-body); font-size: var(--text-md); line-height: 1.1; }
.t-tables .is-open { border-color: var(--color-brand); background: var(--color-brand-tint); }
.t-pass { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: center; }
.t-pass svg { width: 4.2rem; height: 4.2rem; }
.t-pass b { display: block; font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.1; }
.t-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.t-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.t-wish b { display: block; font-family: var(--font-body); }

@media (max-width: 68rem) {
    .trail { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); max-width: 30rem; }
    .stop { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); column-gap: var(--space-lg); align-items: start; }
    .stop__thing { grid-row: span 3; min-height: 9rem; }
    .stop__num { margin-top: 0; }
    .stop__num::after { display: none; }
}
@media (max-width: 26rem) {
    .stop { grid-template-columns: minmax(0, 1fr); }
    .stop__thing { grid-row: auto; margin-bottom: var(--space-md); }
}

/* ----------------------------------------------------------------- designs */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.pill {
    min-height: 2.75rem;
    padding: 0 1.1rem;
    background: transparent;
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--text-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pill:hover { border-color: var(--color-ink-2); }
.pill.is-active, .pill[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }

.designs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
.design { min-width: 0; }
.design__img { display: block; overflow: hidden; border-radius: var(--radius-md); background: var(--color-paper-2); box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.design__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.design__img:hover, .design__img:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.design h3 { margin-top: var(--space-md); }
.design h3 a { text-decoration: none; }
.design h3 a:hover { color: var(--color-brand); }
.design p { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.design__tags { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.design__acts { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin-top: var(--space-2xs); font-size: var(--text-sm); }
.design__acts a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.designs__empty { margin-top: var(--space-lg); color: var(--color-ink-2); }

@media (max-width: 68rem) { .designs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .designs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); } .design p { display: none; } }

/* A closing line and its actions, after a section that asked for a decision. */
.nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule); }
.nudge p { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); letter-spacing: -.012em; line-height: 1.15; max-width: 30rem; }
.nudge div { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ----------------------------------------------------------------- pricing */
.plans {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16.5rem, 19rem);
    gap: var(--space-md);
    overflow-x: auto;
    padding: var(--space-xs) max(var(--gutter), calc((100vw - var(--wrap)) / 2)) var(--space-lg);
    scroll-snap-type: x proximity;
    scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
    scrollbar-width: thin;
    scrollbar-color: var(--color-line) transparent;
}
.plans:focus-visible { outline-offset: -3px; }
.plan {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-xs);
    padding: var(--space-lg);
    background: var(--color-card);
    border: var(--rule);
    border-radius: var(--radius-lg);
    scroll-snap-align: start;
}
.plan h3 { font-size: var(--text-xl); }
.plan__price { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.plan__price small { margin-inline-start: .4rem; font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); letter-spacing: 0; color: var(--color-ink-2); }
.plan__blurb { margin-block: var(--space-xs) var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.plan .btn { width: 100%; }
.plan--extra { background: transparent; border-style: dashed; }
.plans__arrows { display: flex; gap: var(--space-xs); }
@media (max-width: 44rem) { .plans__arrows { display: none; } .plans { grid-auto-columns: 78%; } }

.rows { border-top: 2px solid var(--color-ink); }
.row {
    display: grid;
    /* Fixed tracks, so every row's description and price start on the same line. */
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 6.5rem 9rem;
    gap: var(--space-md) var(--space-xl);
    align-items: center;
    padding-block: var(--space-lg);
    border-bottom: var(--rule);
}
.row h3 { font-size: var(--text-xl); }
.row p { font-size: var(--text-sm); color: var(--color-ink-2); }
.row .btn { justify-self: end; }
.row__price { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); letter-spacing: -.012em; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.row__price small { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0; color: var(--color-ink-2); }
.rows__sub { margin: var(--space-2xl) 0 var(--space-md); font-size: var(--text-xl); }
.rows--light { border-top-width: 1px; border-top-color: var(--color-line); }
.row--three { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 6.5rem 9rem; }
.row--three h3 { font-size: var(--text-lg); }
.included { margin-top: var(--space-lg); margin-bottom: 0; font-size: var(--text-sm); color: var(--color-ink-2); max-width: 56rem; }
.included b { color: var(--color-ink); }
.sec__note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }

@media (max-width: 52rem) {
    .row, .row--three { grid-template-columns: minmax(0, 1fr) auto; }
    .row .btn { justify-self: stretch; }
    .row p { grid-column: 1 / -1; grid-row: 2; }
    .row .btn { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- features */
.spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-xl); border-top: 2px solid var(--color-ink); }
.spec > div { padding-block: var(--space-lg); border-bottom: var(--rule); }
.spec dt { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); letter-spacing: -.015em; }
.spec dd { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }
@media (max-width: 60rem) { .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .spec { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ how it works */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-xl); counter-reset: step; }
.steps li { counter-increment: step; padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.steps li::before { content: counter(step); display: block; margin-bottom: var(--space-sm); font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1; font-variant-numeric: lining-nums; color: var(--color-brand); }
.steps p { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ----------------------------------------------------------------- reviews */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-xl); }
.quotes figure { margin: 0; padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.quotes__stars { display: block; margin-bottom: var(--space-xs); color: var(--color-sun-hover); letter-spacing: .1em; }
.quotes blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.25; letter-spacing: -.015em; }
.quotes figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.quotes figcaption b { display: block; color: var(--color-ink); }

/* ------------------------------------------------------------------- about */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(2rem, 1rem + 5vw, 5.5rem); align-items: center; }
.about__say { max-width: 36rem; }
.about__say p { margin-top: var(--space-md); color: var(--color-ink-2); }
.about__say h2 + p { margin-top: var(--space-lg); font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink); }
/* Two prints, one laid over the corner of the other. */
.about__see { position: relative; padding-block-end: 3.5rem; padding-inline-start: 2.5rem; }
.about__large { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.about__small { position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 52%; aspect-ratio: 3 / 2; object-fit: cover; border: 6px solid var(--color-paper-2); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); }
@media (max-width: 56rem) {
    .about { grid-template-columns: minmax(0, 1fr); }
    .about__see { max-width: 30rem; }
}

/* --------------------------------------------------------------------- faq */
.faq { max-width: 50rem; border-top: 2px solid var(--color-ink); }
.faq details { border-bottom: var(--rule); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding-block: var(--space-lg);
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 600; letter-spacing: -.005em; }
.faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: .65rem;
    height: .65rem;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -3px;
    transition: rotate var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
}
.faq details[open] summary::after { rotate: 225deg; translate: 0 3px; }
.faq summary:hover h3 { color: var(--color-brand); }
.faq details p { padding-bottom: var(--space-lg); max-width: 42rem; color: var(--color-ink-2); }
.faq__more { display: flex; justify-content: center; margin-top: var(--space-xl); }

/* ----------------------------------------------------------------- contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-2xl); align-items: start; }
.contact__side p { margin-top: var(--space-md); color: var(--color-on-brand-2); }
.contact__side h3 { margin-top: var(--space-2xl); font-size: var(--text-xl); }
.contact__side .acts { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.contact__side .btn--quiet { color: var(--color-on-brand); border-color: color-mix(in oklch, var(--color-on-brand) 40%, transparent); }
.contact__side .btn--quiet:hover { background: color-mix(in oklch, var(--color-on-brand) 12%, transparent); border-color: var(--color-on-brand); }
.form { display: grid; gap: var(--space-md); padding: clamp(1.25rem, .8rem + 2vw, 2.25rem); background: var(--color-card); color: var(--color-ink); border-radius: var(--radius-lg); }
.form :focus-visible { outline-color: var(--color-focus); }
.form h3 { font-size: var(--text-xl); }
.form__lead { font-size: var(--text-sm); color: var(--color-ink-2); }
.form__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form__note { font-size: var(--text-xs); color: var(--color-ink-2); }
.form__hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__msg { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; }
.form__msg--ok { background: color-mix(in oklch, var(--color-ok) 14%, var(--color-card)); color: var(--color-ok); }
.form__msg--bad { background: color-mix(in oklch, var(--color-bad) 10%, var(--color-card)); color: var(--color-bad); }
.form__msg--bad li { list-style: disc; margin-inline-start: 1.1rem; }
@media (max-width: 56rem) { .contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 30rem) { .form__two { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ footer */
.foot { background: var(--color-ink); color: var(--color-on-brand); padding-block: var(--space-2xl) var(--space-xl); }
.foot ::selection { background: var(--color-sun); color: var(--color-on-sun); }
.foot :focus-visible { outline-color: var(--color-sun); }
.foot__say { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); padding-bottom: var(--space-2xl); border-bottom: 1px solid color-mix(in oklch, var(--color-on-brand) 20%, transparent); }
.foot__say p { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -.02em; max-width: 34rem; }
.foot__cols { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: var(--space-xl); padding-block: var(--space-2xl); }
.foot__brand { display: flex; align-items: flex-start; gap: var(--space-sm); text-decoration: none; }
.foot__brand img { width: 2.75rem; height: 2.75rem; object-fit: contain; }
.foot__brand span { display: grid; gap: .2rem; font-size: var(--text-sm); color: var(--color-on-brand-2); }
.foot h4 { margin-bottom: var(--space-sm); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; color: var(--color-on-brand-2); }
.foot__col { display: grid; align-content: start; gap: .45rem; font-size: var(--text-sm); min-width: 0; }
.foot__col a { text-decoration: none; overflow-wrap: anywhere; }
.foot__col a:hover { text-decoration: underline; }
.foot__col p { color: var(--color-on-brand-2); }
.foot__social { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.foot__social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid color-mix(in oklch, var(--color-on-brand) 28%, transparent); border-radius: 50%; }
.foot__social a:hover { background: color-mix(in oklch, var(--color-on-brand) 12%, transparent); }
.foot__social svg { width: 1.15rem; height: 1.15rem; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid color-mix(in oklch, var(--color-on-brand) 20%, transparent); font-size: var(--text-xs); color: var(--color-on-brand-2); }
.foot__base a { color: inherit; }
.foot__legal { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.foot__more { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; padding-block: 0 var(--space-lg); font-size: var(--text-sm); color: var(--color-on-brand-2); }
.foot__more a { color: inherit; text-decoration: none; }
.foot__more a:hover { color: var(--color-on-brand); text-decoration: underline; }
@media (max-width: 60rem) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__cols > :first-child { grid-column: 1 / -1; } }

/* --------------------------------------------------------------- not found */
.lost { max-width: 40rem; margin-inline: auto; padding: var(--space-3xl) var(--gutter); text-align: start; }
.lost p { margin-top: var(--space-md); font-size: var(--text-lg); color: var(--color-ink-2); }
.lost div { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

/* ------------------------------------------------------------ floating bits */
.wa {
    position: fixed;
    inset-inline-end: 1rem;
    bottom: 1rem;
    z-index: 30;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--color-whatsapp);
    color: var(--color-card);
    box-shadow: var(--shadow-card);
    transition: transform var(--dur-fast) var(--ease-out);
}
.wa:hover { transform: scale(1.06); }
.wa svg { width: 1.6rem; height: 1.6rem; }

/* Phone width only, once the starter has scrolled away. */
.bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 35;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) var(--gutter) calc(var(--space-sm) + env(safe-area-inset-bottom));
    background: var(--color-card);
    border-top: var(--rule);
    font-size: var(--text-xs);
    color: var(--color-ink-2);
    translate: 0 110%;
    transition: translate var(--dur) var(--ease-out);
}
.bar.is-on { translate: 0 0; }
@media (max-width: 44rem) {
    .bar { display: flex; }
    body.has-bar .wa { bottom: 5rem; }
    /* The bar must never sit on the last thing on the page (the legal links),
       and one "Create invitation" on screen is enough. */
    body.has-bar .foot { padding-bottom: 6.5rem; }
    body.has-bar .top__acts .btn { display: none; }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
    .cover:hover, .design__img:hover, .wa:hover { transform: none; }
    .fan__tilt { transform: none; }
    .fan--intro .env, .fan--intro .env > span, .fan--intro .cover, .fan .cover { animation: none !important; }
}