/*
 * Luxe look of the new home page and site identity (emerald & gold, couture feel). Loaded last, after
 * identity.css and landing.css, only with Features:NewLanding. Visual only: removing this file restores the
 * previous look. Invitations (themes) are not affected.
 */

/* Display serifs, already self-hosted for the themes (OFL). */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/theme-assets/_fonts/cormorant-garamond-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/theme-assets/_fonts/cormorant-garamond-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/theme-assets/_fonts/cormorant-garamond-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("/theme-assets/_fonts/cormorant-garamond-500i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("/theme-assets/_fonts/amiri-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: swap; src: url("/theme-assets/_fonts/amiri-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }

:root {
    accent-color: #0e3b2e;
    --color-bg: #f8f5ee;            /* ivory paper */
    --color-surface: #fffdf8;
    --color-text: #16211c;          /* ink */
    --color-text-muted: #55615a;    /* grey text, weight 400: 5.9:1 on ivory, 5.4:1 on the sand band */
    --color-border: #e7dfcc;        /* hairline */
    --color-accent: #0e3b2e;        /* emerald */
    --color-accent-hover: #082a20;
    --color-accent-contrast: #fffdf8;
    --color-accent-soft: #eef0e8;
    --color-highlight: #b8954a;
    --color-focus: #b8954a;
    --emerald-deep: #082a20;
    --gold: #b8954a;
    --gold-light: #e3cc93;
    --gold-text: #7a5c22;           /* gold for text: 5.7:1 on ivory, 5.3:1 on the sand band (strokes and icons keep --gold) */
    /* Text and surface colours (DES-07): one place for every value used below. */
    --color-text-on-dark: #cfd6cf;          /* 11:1 on the emerald band */
    --color-text-on-dark-strong: #e9e6dc;
    --color-heading-on-dark: #fffdf8;
    --color-text-on-band: #f3eee2;
    --color-on-gold: #1c1608;               /* text on gold buttons and tags */
    --color-band-sand: #f1ecdf;
    --color-field: #fffefb;
    --color-sheet: #fbf8f1;
    --color-gold: linear-gradient(#0e3b2e, #0e3b2e);
    --gold-rim: linear-gradient(135deg, #8f6d27 0%, #f1dfa6 22%, #b8954a 45%, #f6e7bd 62%, #a07a30 82%, #e3cc93 100%);
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-display-ar: "Amiri", "Readex Pro", serif;
    --shadow-soft: 0 1px 2px rgb(8 42 32 / 5%), 0 18px 40px -18px rgb(8 42 32 / 25%);
    --radius: 6px;
}

body {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgb(227 204 147 / 18%), transparent 60%),
        var(--color-bg);
}

::selection {
    background: rgb(184 149 74 / 30%);
}

/* ---------- typography ---------- */
h1, h2, h3,
.land-card__name,
.plan-card__price,
.faq__item summary,
.logotype {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0;
}

:lang(ar) h1, :lang(ar) h2, :lang(ar) h3,
:lang(ar) .land-card__name,
:lang(ar) .faq__item summary {
    font-family: var(--font-display-ar);
    font-weight: 700;
}

.land-eyebrow {
    display: block;
    margin: 0 0 var(--space-2);
    color: var(--gold-text);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

:lang(ar) .land-eyebrow {
    letter-spacing: 0;
    font-size: 0.9rem;
}

.land-ornament {
    display: block;
    inline-size: 7.5rem;
    block-size: 0.75rem;
    margin: var(--space-2) 0 var(--space-4);
    fill: none;
    stroke: var(--gold);
    stroke-width: 1;
}

.land-ornament path:last-child {
    fill: var(--gold);
    stroke: none;
}

/* ---------- buttons ---------- */
.button {
    border-radius: 2px;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font-weight: 500;
    letter-spacing: 0.04em;
    box-shadow: inset 0 0 0 1px rgb(227 204 147 / 55%), 0 1px 2px rgb(8 42 32 / 25%); /* short and crisp (DES-14) */
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
    background: var(--emerald-deep);
    box-shadow: inset 0 0 0 1px var(--gold-light), 0 2px 3px rgb(8 42 32 / 30%);
}

.button--secondary {
    border: 1px solid var(--gold);
    background: transparent;
    color: var(--color-accent);
    box-shadow: none;
}

.button--secondary:hover {
    background: rgb(184 149 74 / 10%);
    color: var(--emerald-deep);
    box-shadow: none;
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ---------- header ---------- */
.site-header--v2 {
    background: rgb(248 245 238 / 88%);
    border-block-end: 1px solid rgb(184 149 74 / 35%);
}

.site-header--v2 .logotype {
    font-size: 1.55rem;
    color: var(--color-accent);
}

.site-header--v2 .logotype [lang="ar"] {
    font-family: var(--font-display-ar);
}

.site-header--v2 .logotype__sep {
    color: var(--gold);
}

.site-nav--v2 a,
.site-nav--v2 .link-button {
    position: relative;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
}

.site-nav--v2 a[aria-current="page"],
.site-nav--v2 a:hover {
    color: var(--color-accent);
}

.site-nav--v2 a[aria-current="page"]::after,
.site-nav--v2 a:hover::after {
    content: "";
    position: absolute;
    inset-inline: var(--space-2);
    inset-block-end: 0.15rem;
    block-size: 1px;
    background: var(--gold);
}

/* ---------- inputs ---------- */
.land-builder input,
.land-builder select {
    border-radius: 2px;
    border-color: var(--color-border);
    background: var(--color-field);
}

.land-builder input:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 3px rgb(184 149 74 / 20%);
}

.land-builder label,
.land-themes legend {
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
}

:lang(ar) .land-builder label,
:lang(ar) .land-themes legend {
    letter-spacing: 0;
    font-size: 0.95rem;
}

/* ---------- tabs: an underlined serif tab bar ---------- */
.land-tabs {
    gap: var(--space-4);
    padding: 0;
    border-radius: 0;
    background: none;
    border-block-end: 1px solid var(--color-border);
}

.land-tab {
    position: relative;
    padding: 0.5rem 0 0.75rem;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

:lang(ar) .land-tab {
    font-family: var(--font-display-ar);
    font-size: 1.1rem;
}

.land-tab[aria-selected="true"] {
    background: none;
    box-shadow: none;
    color: var(--color-accent);
}

.land-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    block-size: 2px;
    background: var(--gold);
}

/* ---------- section rhythm and full-width bands ---------- */
.land-section {
    position: relative;
}

.land-band {
    /* Full-width background without overflow: paints beyond the container, clipped to the page sides. */
    background: var(--band);
    box-shadow: 0 0 0 100vmax var(--band);
    clip-path: inset(0 -100vmax);
    padding-block: clamp(3rem, 8vw, 6rem);
}

.land-rsvp,
.land-final {
    --band: var(--emerald-deep);
    color: var(--color-text-on-band);
}

.land-guests,
.land-pricing {
    --band: var(--color-band-sand);
}

.land-rsvp h2,
.land-final h2 {
    color: var(--color-heading-on-dark);
}

.land-rsvp .land-lead,
.land-rsvp .land-note,
.land-final p {
    color: var(--color-text-on-dark);
}

.land-rsvp .land-eyebrow,
.land-final .land-eyebrow {
    color: var(--gold-light);
}

.land-rsvp .land-icon {
    background: transparent;
    border: 1px solid rgb(227 204 147 / 55%);
    stroke: var(--gold-light);
}

/* ---------- hero ---------- */
.land-hero {
    position: relative;
}

/* Title on two lines at most beside the phone (DES-01): sized for the hero's first column. */
.land-hero h1 {
    font-size: clamp(2.4rem, 4.2vw + 0.4rem, 3.6rem);
    line-height: 1.05;
    font-weight: 500;
    color: var(--color-accent);
}

:lang(ar) .land-hero h1 {
    line-height: 1.35;
    font-size: clamp(2.2rem, 3.8vw + 0.4rem, 3.4rem);
}

.land-hero .land-ornament {
    margin-block: var(--space-2) var(--space-3);
}

.land-hero__lead {
    font-size: clamp(1.05rem, 2.2vw, 1.2rem);
}

.land-builder__form.card {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

/* DES-08: one border around the form card (the inner hairline frame is gone). */

/* Theme choices: equal cards wide enough for a theme's full name on one line ("Porte de Sidi Bou Saïd"); on phones,
   where two cards share the row, a long name breaks cleanly on two balanced lines. */
.land-themes:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
}

.land-theme {
    inline-size: auto;
    padding-inline: 0.5rem;
}

.land-theme span {
    text-wrap: balance;
}

@media (min-width: 40rem) {
    .land-theme span {
        white-space: nowrap;
    }
}

.land-theme {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-field);
    font-family: var(--font-display);
    font-size: 0.95rem;
}

:lang(ar) .land-theme {
    font-family: var(--font-display-ar);
}

.land-theme img {
    border-radius: 2px;
}

.land-theme:has(input:checked) {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 10px 22px -14px rgb(8 42 32 / 45%);
    color: var(--color-accent);
}

.land-builder__free {
    font-style: italic;
}

/* Phones: polished gold rim around an ivory bezel. */
.land-phone,
.land-phone.phone {
    padding: 8px;
    border: 3px solid transparent;
    border-radius: 2.4rem;
    background:
        linear-gradient(160deg, #fffdf8, #efe6d2) padding-box,
        var(--gold-rim) border-box;
    box-shadow: 0 30px 60px -28px rgb(8 42 32 / 45%);
}

.land-phone iframe,
.land-phone__fallback {
    inset: 8px;
    inline-size: calc(100% - 16px);
    block-size: calc(100% - 16px);
    border-radius: 1.9rem;
}

/* ---------- promises ---------- */
.land-promises__list {
    gap: 0;
    border-block: 1px solid var(--color-border);
}

.land-promises__list li {
    padding: var(--space-4);
    text-align: center;
}

.land-promises__list li + li {
    border-inline-start: 1px solid var(--color-border);
}

@media (max-width: 47.99rem) {
    .land-promises__list li + li {
        border-inline-start: 0;
        border-block-start: 1px solid var(--color-border);
    }
}

.land-promises__list .land-icon {
    margin-inline: auto;
}

.land-promises__list h3 {
    font-size: 1.5rem;
    color: var(--color-accent);
}

.land-promises__list p {
    margin-inline: auto;
}

.land-icon {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0.6rem;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgb(184 149 74 / 55%);
    stroke: var(--gold-text);
    stroke-width: 1.2;
}

/* ---------- section headings ---------- */
.land-section > h2,
.land-section__head h2,
.land-split__text h2 {
    font-size: clamp(2rem, 4.6vw, 3rem);
    line-height: 1.1;
    color: var(--color-accent);
    margin-block-end: 0;
}

.land-section__head {
    align-items: end;
}

.land-section__head > a,
.land-pricing__notes a {
    color: var(--gold-text);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-decoration-color: rgb(184 149 74 / 50%);
    text-underline-offset: 5px;
}

/* ---------- RSVP: dashboard on an ivory sheet ---------- */
.land-screen {
    border: 1px solid rgb(227 204 147 / 40%);
    border-radius: var(--radius);
    background: var(--color-sheet);
    color: var(--color-text);
    box-shadow: 0 40px 80px -30px rgb(0 0 0 / 60%);
}

.land-screen__tag {
    border-radius: 2px;
    background: var(--gold);
    color: var(--color-on-gold);
    letter-spacing: 0.02em;
    font-size: 0.8rem;
}

.land-screen .stats .card {
    border-radius: 4px;
    border-color: var(--color-border);
    background: var(--color-field);
}

.land-screen .stats .card b {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-accent);
}

.land-points li span {
    line-height: 1.5;
}

/* ---------- guests ---------- */
/* DES-06: what the demo shows, as a plain list with the gold diamond (not chips: they looked like buttons). The
   "open full screen" button stays the only framed element of the section. */
.land-tags {
    display: grid;
    gap: var(--space-2) var(--space-4);
}

@media (min-width: 40rem) {
    .land-tags {
        grid-template-columns: repeat(2, max-content);
    }
}

.land-tags li {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 1rem;
    font-weight: 400;
}

:lang(ar) .land-tags li {
    letter-spacing: 0;
}

.land-tags li::before {
    flex: none;
    inline-size: 0.4rem;
    block-size: 0.4rem;
    margin: 0;
    border-radius: 0;
    background: var(--gold);
    transform: translateY(-0.15em) rotate(45deg);
}

/* ---------- themes collection ---------- */
.land-card img {
    padding: 6px;
    border: 1px solid rgb(184 149 74 / 45%);
    border-radius: 3px;
    background: var(--color-surface);
    box-shadow: 0 24px 40px -26px rgb(8 42 32 / 45%);
}

.land-card__name {
    font-size: 1.45rem;
    color: var(--color-accent);
}

.land-card__mood {
    font-style: italic;
}

.land-card .badge--new {
    border-radius: 2px;
    background: var(--color-accent);
    color: var(--gold-light);
    letter-spacing: 0.02em;
    font-size: 0.8rem;
}

/* ---------- diaspora ---------- */
.land-pair img {
    padding: 5px;
    border: 1px solid rgb(184 149 74 / 45%);
    border-radius: 3px;
    background: var(--color-surface);
}

.land-pair figcaption {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-accent);
}

.land-points--plain li::marker {
    color: var(--gold);
}

/* ---------- pricing ---------- */
.land-pricing .plan-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.land-pricing .plan-card h3 {
    font-size: 1.6rem;
    color: var(--color-accent);
}

.land-pricing .plan-card__price {
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--color-text);
}

.land-pricing .plan-card--featured {
    /* A 1 px gold outline: the card stands out from the gold buttons around it. */
    border: 1px solid var(--color-action);
    background: var(--emerald-deep);
    color: var(--color-text-on-dark-strong);
    box-shadow: 0 30px 60px -28px rgb(8 42 32 / 70%);
}

.land-pricing .plan-card--featured h3,
.land-pricing .plan-card--featured .plan-card__price {
    color: var(--gold-light);
}

.land-pricing .plan-card--featured .muted,
.land-pricing .plan-card--featured .plan__soon-note,
.land-pricing .plan-card--featured .plan__features {
    color: var(--color-text-on-dark);
}

.land-pricing .plan-card--featured .plan__soon-note {
    border-color: rgb(227 204 147 / 30%);
}

/* ---------- FAQ: hairline list ---------- */
.land-faq .faq {
    border-block-start: 1px solid var(--color-border);
}

.land-faq .faq__item {
    border: 0;
    border-block-end: 1px solid var(--color-border);
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
}

.land-faq .faq__item summary {
    position: relative;
    padding: var(--space-3) 0;
    padding-inline-end: 2rem;
    font-size: 1.3rem;
    color: var(--color-accent);
    list-style: none;
    cursor: pointer;
}

.land-faq .faq__item summary::-webkit-details-marker {
    display: none;
}

.land-faq .faq__item summary::after {
    content: "+";
    position: absolute;
    inset-inline-end: 0.25rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--gold);
}

.land-faq .faq__item[open] summary::after {
    content: "\2212";
}

.land-faq .faq__item p {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
    max-inline-size: 70ch;
}

/* ---------- final call to action ---------- */
.land-final {
    border-radius: 0;
    background: var(--band);
    overflow: hidden;
}

.land-final::after {
    /* Jasmine line art (brand motif, 2 of 2). */
    content: "";
    position: absolute;
    inset-block-end: -2rem;
    inset-inline-start: 50%;
    inline-size: 14rem;
    block-size: 14rem;
    transform: translateX(-50%);
    opacity: 0.12;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23E3CC93' stroke-width='0.8'%3E%3Cpath d='M50 50C44 38 44 22 50 12c6 10 6 26 0 38zM50 50c12-6 28-6 38 0-10 6-26 6-38 0zM50 50c6 12 6 28 0 38-6-10-6-26 0-38zM50 50c-12 6-28 6-38 0 10-6 26-6 38 0z'/%3E%3Ccircle cx='50' cy='50' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.land-final .land-ornament {
    margin-inline: auto;
}

/* ---------- footer ---------- */
.site-footer {
    background: var(--emerald-deep);
    color: var(--color-text-on-dark);
    border-block-start: 1px solid rgb(184 149 74 / 40%);
}

.site-footer a,
.site-footer__links a,
.site-footer__social a,
.site-footer__contact a {
    color: var(--color-text-on-dark-strong);
    text-decoration-color: rgb(227 204 147 / 40%);
}

.site-footer a:hover {
    color: var(--gold-light);
}

@media (prefers-reduced-motion: no-preference) {
    .land-card a:hover img {
        transform: translateY(-6px);
        transition: transform 0.35s ease;
    }
}

/* Full-width bands paint outside their box: no paint containment for them. */
.land-section.land-band {
    content-visibility: visible;
}

/* ---------- fixes after review ---------- */
/* Dark band titles stay ivory (the generic heading colour is more specific otherwise). */
.land-rsvp .land-split__text h2,
.land-final h2 {
    color: var(--color-heading-on-dark);
}

/* Lining figures: the serif's old-style numerals read badly in numbers and prices. */
.land-screen .stats .card b,
.plan-card__price,
.land-promises__list h3,
.land-hero h1,
.land-section h2 {
    font-variant-numeric: lining-nums;
}

/* Phone content sits exactly inside the bezel (beats the generic ".phone img" size rule). */
.land-phone .land-phone__fallback,
.land-phone iframe {
    position: absolute;
    inset: 8px;
    inline-size: calc(100% - 16px);
    block-size: calc(100% - 16px);
    border-radius: 1.9rem;
    box-shadow: 0 0 0 1px rgb(184 149 74 / 45%);
}

.land-faq .faq {
    max-inline-size: none;
}

.land-faq .faq {
    gap: 0;
}

/* The final band meets the footer: no ivory strip between them. */
.land-final {
    margin-block-end: 0;
}

main:has(> .land-final:last-child),
main:has(.land-final) {
    padding-block-end: 0;
    margin-block-end: 0;
}

.land-final::after {
    inset-block-end: -7rem;
}

/* =====================================================================================================
   Typography system (French and Arabic)
   Latin:  Cormorant Garamond (display, real weights 500/600 + real italic) + Jost (text and interface).
   Arabic: Amiri (display) + Readex Pro (text). Jost has no Arabic glyphs, so Arabic text and the Arabic
           digits-free runs fall through to Readex Pro by themselves.
   Only weights that exist as font files are requested: no synthesized bold or oblique.
   ===================================================================================================== */
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("/fonts/jost-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("/fonts/jost-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --font-latin: "Jost", "Readex Pro", system-ui, sans-serif;
    --font-arabic: "Readex Pro", "Segoe UI", Tahoma, sans-serif;

    /* One scale, used everywhere (rem). */
    --fs-micro: 0.78rem;    /* eyebrows, tags */
    --fs-small: 0.9rem;     /* tables, notes, footer */
    --fs-body: 1.0625rem;   /* running text */
    --fs-lead: 1.2rem;      /* lead paragraphs */
    --fs-h3: 1.5rem;        /* card and promise titles */
}

body {
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.65;
    font-optical-sizing: auto;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Interface text: legible weights, never the hairline 300 at small sizes. */
:lang(fr) .land-lead,
:lang(fr) .land-hero__lead {
    font-weight: 400;              /* DES-07: regular weight for grey text (300 read too pale) */
    font-size: var(--fs-lead);
}

.muted,
.land-note,
.land-pricing__notes p,
.land-promises__list p,
.land-points li,
.land-faq .faq__item p {
    font-weight: 400;
}

.table,
.land-screen .table,
.site-footer,
.plan__features,
.land-pricing__notes {
    font-size: var(--fs-small);
}

.table td,
.table th {
    font-weight: 400;
}

.table th {
    font-weight: 500;
}

.land-eyebrow,
.land-screen__tag,
.badge {
    font-family: var(--font-latin);
    font-weight: 500;
}

:lang(ar) .land-eyebrow,
:lang(ar) .land-tags li,
:lang(ar) .land-screen__tag,
:lang(ar) .badge {
    font-family: var(--font-arabic);
}

.land-eyebrow {
    font-size: var(--fs-micro);
}

/* Display serif: real weights only (500 body of titles, 600 for emphasis), lining figures, optical sizes. */
h1, h2, h3,
.land-tab,
.land-card__name,
.land-theme,
.faq__item summary,
.land-pair figcaption,
.plan-card__price,
.land-screen .stats .card b,
.logotype,
.land-promises__list h3 {
    font-variant-numeric: lining-nums;
    font-kerning: normal;
    font-feature-settings: "kern", "liga", "lnum";
}

.logotype,
.site-header--v2 .logotype {
    font-weight: 600;          /* was 700: no such file, the browser faked a bold */
    letter-spacing: 0.01em;
}

.logotype__sep {
    font-weight: 500;          /* was 400: same problem */
}

:lang(ar) .logotype [lang="fr"] {
    font-weight: 600;
}

/* Titles: tighter and finer at large size, a little firmer at card size. */
.land-hero h1 {
    font-weight: 500;
    letter-spacing: -0.012em;
}

.land-section h2,
.land-section__head h2,
.land-split__text h2 {
    font-weight: 500;
    letter-spacing: -0.008em;
}

h3,
.land-promises__list h3,
.land-card__name,
.land-pricing .plan-card h3 {
    font-weight: 600;
    font-size: var(--fs-h3);
    letter-spacing: 0.005em;
}

/* Theme names set in the sans, where a thin serif would blur; sentence case (DES-05). */
.land-theme {
    font-family: var(--font-latin);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
}

:lang(ar) .land-theme {
    font-family: var(--font-arabic);
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
}

/* Real italics from the serif's own italic file (was a slanted sans: faux italic). Never in Arabic. */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("/theme-assets/_fonts/cormorant-garamond-500i-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}

.land-card__mood,
.land-builder__free,
.plan__soon-note,
.land-screen__note {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.08rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

:lang(ar) .land-card__mood,
:lang(ar) .land-builder__free,
:lang(ar) .plan__soon-note {
    font-family: var(--font-arabic);
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-small);
}

.land-pricing .plan-card--featured .plan__soon-note {
    color: var(--color-text-on-dark);
}

/* Prices and statistics: large, lining, set in the serif. */
.land-pricing .plan-card__price {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Buttons in the sans for the interface feel, sentence case ("Créer mon invitation", DES-05). */
.button {
    font-family: var(--font-latin);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

:lang(ar) .button {
    font-family: var(--font-arabic);
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
}

/* Client area and back-office (GEST-06): sentence-case labels ("Partager sur WhatsApp"), never spaced capitals. */
.private-area .button {
    letter-spacing: 0;
    text-transform: none;
}

.button--large {
    font-size: 1rem;
}

.site-nav--v2 a,
.site-nav--v2 .link-button {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.land-builder label,
.land-themes legend {
    font-size: 0.92rem;
    font-weight: 500;
}

.land-builder input,
.land-builder select {
    font-size: 1.0625rem;
    font-weight: 400;
}

/* Amiri exists in 400 and 700 only: every Arabic display text uses the 700 already loaded (no faux weights). */
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3,
:lang(ar) .land-section h2,
:lang(ar) .land-section__head h2,
:lang(ar) .land-split__text h2,
:lang(ar) .land-hero h1,
:lang(ar) .land-promises__list h3,
:lang(ar) .land-card__name,
:lang(ar) .land-pricing .plan-card h3,
:lang(ar) .land-tab,
:lang(ar) .faq__item summary,
:lang(ar) .land-pair figcaption,
:lang(ar) .plan-card__price,
:lang(ar) .land-screen .stats .card b,
.logotype [lang="ar"],
.site-header--v2 .logotype [lang="ar"] {
    font-weight: 700;
}

:lang(ar) .land-hero h1,
:lang(ar) .land-section h2 {
    letter-spacing: 0;
}

/* Latin figures and words inside Arabic pages are set in Cormorant, which stops at 600; Arabic letters in the
   same element still resolve to Amiri's bold. */
:lang(ar) .land-screen .stats .card b,
:lang(ar) .plan-card__price,
:lang(ar) .land-pair figcaption {
    font-weight: 600;
}

.land-phone .scaled-frame {
    inset: 8px;
    border-radius: 1.9rem;
    box-shadow: 0 0 0 1px rgb(184 149 74 / 45%);
}

/*
   DES-04: phones have a real phone's screen (390 x 844). The bezel takes its height from the screen, and the invitation
   inside renders at 390 x 844 before being scaled down (site.js), so its first screen shows whole: nothing cut at the
   top nor at the bottom.
*/
.land-phone,
.land-phone.phone {
    aspect-ratio: auto;
    block-size: auto;
}

.land-phone .scaled-frame {
    position: relative;
    inset: auto;
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 390 / 844;
}

.land-phone .land-phone__fallback {
    position: absolute;
    inset: 8px;
    inline-size: calc(100% - 16px);
    block-size: calc(100% - 16px);
    object-fit: cover;
}

.land-hero .land-phone {
    inline-size: min(100%, 18.5rem);
}

.land-guests .land-phone {
    inline-size: min(100%, 20rem);
}

/* ---------- DES-09: pricing ---------- */
/* Each card is as tall as its content: list at the top, button right after it, no empty band in the shorter card. */
.land-pricing .plan-cards {
    align-items: start;
}

.land-pricing .plan-card .plan__features {
    flex: none;
}

.land-pricing .plan-card > .button {
    margin-block-start: var(--space-3);
}

/* Feature lists use the site's gold diamond, not the default circles. */
.plan__features {
    list-style: none;
    padding-inline-start: 0;
}

.plan__features li {
    position: relative;
    padding-inline-start: 1.15rem;
    margin-block: 0.3rem;
}

.plan__features li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.1rem;
    inset-block-start: 0.6em;
    inline-size: 0.38rem;
    block-size: 0.38rem;
    background: var(--gold);
    transform: rotate(45deg);
}

.plan-card--featured .plan__features li::before {
    background: var(--gold-light);
}

/* "Le plus complet" on Premium. */
.plan-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.plan-card__badge {
    padding: 0.2rem 0.65rem;
    border-radius: 2px;
    background: var(--gold-light);
    color: var(--color-on-gold);
    font-family: var(--font-latin);
    font-size: 0.8rem;
    font-weight: 500;
}

:lang(ar) .plan-card__badge {
    font-family: var(--font-arabic);
}

/* Section titles break where it reads well ("Un prix clair, / payé à la publication"), never leaving one word. */
.land-section h2 {
    text-wrap: balance;
}

.land-pricing .land-section__head h2 {
    max-inline-size: 32ch;
}

/* ---------- DES-11: here and abroad, the inside of the same invitation in Arabic and in French ---------- */
.land-pair {
    grid-template-columns: repeat(2, minmax(0, 14rem));
    align-items: start;
}

.land-pair figure:last-child {
    margin-block-start: 0;
}

.land-pair .land-phone,
.land-pair .land-phone.phone {
    inline-size: 100%;
    padding: 6px;
    border-width: 2px;
    border-radius: 1.8rem;
}

.land-pair .land-phone .scaled-frame {
    inset: auto;
    border-radius: 1.4rem;
}

/* A picture of the invitation, not a second place to use it. */
.land-pair iframe {
    pointer-events: none;
}