/* ═══════════════════════════════════════════════════════════════════
   Sivooy — marketing pages

   Cream first, the way the brand sheet shows it: the artwork is pink
   and gold, and it sits on a light surface. Midnight carries the type
   and the occasional full-width band; champagne is the only thing
   that asks to be clicked.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* The brand sheet's six, by their own names. */
    --midnight:   #0f2438;   /* primary */
    --blush:      #f4d9d4;   /* secondary */
    --champagne:  #d4a373;   /* accent */
    --cream:      #fbf7f4;   /* background */
    --stone:      #e6e6e6;   /* neutral */
    --sage:       #a7b5b0;   /* optional accent */

    /* Tints mixed from those, for hovers, hairlines and shadows.
       Nothing new is introduced — each is one of the six, lightened
       or darkened. */
    /* A champagne dark enough to read as text. The brand champagne is
       a 2.1:1 label on cream — fine as a fill behind midnight type,
       not as type itself. */
    --accent-ink:    #a06b35;
    --midnight-soft: #17324a;
    --midnight-deep: #0a1a29;
    --blush-deep:    #e8c3bc;
    --champagne-deep:#bd8a58;
    --cream-warm:    #f5efe9;

    /* Surface-aware text. These are overridden inside a dark band, so
       a rule written once works on both: the band says what "on this
       surface" means rather than every rule knowing where it sits. */
    --on-navy:        #0f2438;
    --on-navy-dim:    #4e6072;
    --on-cream:       #0f2438;
    --on-cream-dim:   #4e6072;

    /* Also surface-aware: a hairline and a raised panel. */
    --line:           var(--stone);
    --surface-raised: var(--cream-warm);

    --measure: 34rem;
    --gutter: clamp(1.25rem, 5vw, 3rem);
}

/* A midnight band flips those four, and everything inside follows. */
.band-ink,
.site-foot,
.price {
    --on-navy:      #fbf7f4;
    --on-navy-dim:  #a9b8c6;
    --on-cream:     #fbf7f4;
    --on-cream-dim: #a9b8c6;

    --line:           rgba(251, 247, 244, 0.16);
    --surface-raised: var(--midnight-soft);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* The auth pages are short, so without this the footer floats in the
   middle of the viewport with cream underneath it. */
body {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}
body > main,
body > .hero { flex: 1 0 auto; }
body > .site-foot { margin-top: auto; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--midnight);
    font: 400 1rem/1.7 Montserrat, -apple-system, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: inherit; }

/* ─── Type scale ────────────────────────────────────────────────────
   Playfair Display, per the brand sheet. It carries more weight than
   the face it replaced, so the line height opens up and the tracking
   stops fighting it. */
.display {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.008em;
    margin: 0;
}
/* Capped lower than it wants to be: the envelope is the hero, and a
   headline that fills the screen pushes it below the fold. */
.display-xl { font-size: clamp(2.6rem, 8vw, 4.4rem); }
.display-l  { font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -0.008em; }
.display-m  { font-size: clamp(1.5rem, 4vw, 2rem); }

.lede {
    font-size: clamp(1.02rem, 2.4vw, 1.18rem);
    line-height: 1.6;
    color: var(--on-navy-dim);
    max-width: var(--measure);
    margin: 1rem 0 0;
}

.note { font-size: 0.86rem; line-height: 1.6; color: var(--on-navy-dim); }

/* ─── Header ────────────────────────────────────────────────────── */
.site-head {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem var(--gutter);
    background: rgba(251, 247, 244, 0.92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(140%) blur(10px);
}

/* The logo is placed, never redrawn: the icon and the wordmark are
   the approved files, side by side at the proportions the brand sheet
   sets for the horizontal lockup. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    line-height: 0;
}
.brand-mark { height: 42px; width: auto; }
/* Taller than it looks it needs: the wordmark carries "DIGITAL
   INVITATIONS" under it, and at any less the second line closes up. */
.brand-word { height: 34px; width: auto; }
.brand-fallback {
    font-family: 'Playfair Display', serif;
    font-size: 1.45rem;
    letter-spacing: 0.01em;
    color: var(--midnight);
    line-height: 1.2;
}
/* On a narrow screen the lockup and the nav cannot both have the
   room they want, and the nav is what people came to use. The icon
   alone is one of the approved variations, so that is what stays. */
@media (max-width: 560px) {
    .brand-word { display: none; }
    .brand-mark { height: 36px; }
}
.site-head nav {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    font-size: 0.9rem;
}
.site-head nav a { color: var(--on-navy-dim); text-decoration: none; }
.site-head nav a:hover { color: var(--on-navy); }

/* ─── Buttons ───────────────────────────────────────────────────── */
.button {
    display: inline-block;
    padding: 0.82rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: transparent;
    color: var(--on-navy);
    font: 500 0.92rem/1 Montserrat, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.button:hover { border-color: var(--on-navy-dim); }

/* Champagne is the accent, and it is light, so the label on it is
   midnight — cream on champagne fails contrast badly. */
.button-wax {
    background: var(--champagne);
    border-color: var(--champagne);
    color: var(--midnight);
    font-weight: 600;
}
.button-wax:hover { background: var(--champagne-deep); border-color: var(--champagne-deep); }
.band-paper .button-wax,
.band-ink .button-wax { color: var(--midnight); }

/* On midnight the outlined button needs its own border, or it
   disappears into the band. */
.band-ink .button { border-color: rgba(251, 247, 244, 0.35); }
.band-ink .button:hover { border-color: var(--cream); }

.button-sm { padding: 0.55rem 1rem; font-size: 0.85rem; }

/* ─── Hero ──────────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: calc(100svh - 5rem);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: clamp(1.5rem, 4vh, 2.5rem);
    padding: clamp(1rem, 4vh, 2.5rem) var(--gutter) clamp(2rem, 6vh, 3.5rem);
    text-align: center;
}

/* Wide enough for the headline to hold one line on a laptop; the lede
   underneath keeps its own reading measure. */
.hero-words { max-width: 46rem; margin: 0 auto; }
.hero-words .lede { max-width: 32rem; }

/* The seal glow sits behind the envelope, tying the page's one spot
   of colour to the object it belongs to. */
.hero-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.hero-stage::before {
    content: '';
    position: absolute;
    width: min(70vw, 420px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(244, 217, 212, 0.85) 0%,
        rgba(244, 217, 212, 0.35) 42%,
        rgba(244, 217, 212, 0) 70%);
    pointer-events: none;
}

.hero-envelope { position: relative; width: min(62vw, 36vh, 300px); }

/* The real envelope component is absolutely positioned, so it needs a
   sized box to live in. */
.hero-envelope .im-env { position: relative; inset: auto; gap: 1.1rem; }
.hero-envelope .im-env-stage { width: 100%; }
/* The renderer draws this white, for a guest looking at a black
   screen. On the cream hero it needs the page's own ink. */
.hero-envelope .im-env-hint { color: var(--on-cream); font-weight: 500; }
.hero-envelope .im-env-title { color: var(--on-cream); }

.hero-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

/* Shown once the envelope has been opened */
.hero-after {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s ease 0.6s, transform 0.5s ease 0.6s;
    pointer-events: none;
}
.hero-after.shown { opacity: 1; transform: none; pointer-events: auto; }

/* ─── Sections ──────────────────────────────────────────────────── */
.band { padding: clamp(3.5rem, 9vh, 6rem) var(--gutter); }

/* Blush: the alternating surface, so consecutive sections do not run
   into one another. */
.band-paper { background: var(--blush); color: var(--on-cream); }
.band-paper .lede { color: var(--on-cream-dim); }
.band-paper .note { color: var(--on-cream-dim); }

/* Midnight: used sparingly, where a section should feel like the
   invitation itself rather than the page around it. */
.band-ink { background: var(--midnight); color: var(--on-navy); }
.band-ink .lede,
.band-ink .note { color: var(--on-navy-dim); }

.band-inner { max-width: 60rem; margin: 0 auto; }

.rule {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
}
.band-paper .rule { background: var(--blush-deep); }

/* Two columns at width, stacked on a phone. Asymmetric on purpose:
   the text column is wider than the example beside it. */
.split {
    display: grid;
    gap: clamp(1.75rem, 5vw, 3.5rem);
    align-items: start;
}

/* ─── Steps ─────────────────────────────────────────────────────────
   Numbered because they really are a sequence: each one only makes
   sense after the one before it. */
.steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: clamp(1.75rem, 5vh, 2.5rem) 0 0;
    display: grid;
    gap: 1.5rem;
}
.steps li {
    counter-increment: step;
    padding-left: 3rem;
    position: relative;
}
.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -0.1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    color: var(--on-navy-dim);
}
.steps h3 { margin: 0 0 0.3rem; font-size: 1rem; font-weight: 600; }
.steps p  { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--on-navy-dim); }
.band-paper .steps p { color: var(--on-cream-dim); }
.band-paper .steps li::before { border-color: var(--blush-deep); color: var(--on-cream-dim); }

/* ─── Occasions ─────────────────────────────────────────────────── */
.occasions {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 2px;
    margin-top: clamp(1.75rem, 5vh, 2.5rem);
}
.occasion { background: var(--cream); padding: 1.4rem 1.3rem; }
.band-paper .occasions { background: var(--blush-deep); border-color: var(--blush-deep); }
.occasion h3 { margin: 0 0 0.1rem; font-size: 1rem; font-weight: 600; }
.occasion-es {
    margin: 0 0 0.6rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--accent-ink);
}
.occasion p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--on-cream-dim); }

/* ─── Pricing strip on the landing page ─────────────────────────── */
.plans {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: clamp(1.75rem, 5vh, 2.5rem);
}
.plan { background: var(--cream); padding: 1.5rem 1.3rem; position: relative; }
/* The recommended plan: warmer than its neighbours rather than
   brighter, so it reads as chosen and not as a different card. */
.plan-pick { background: var(--cream-warm); }
.plan-flag {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-ink);
}
.plan-name { margin: 0 0 0.3rem; font-size: 0.95rem; font-weight: 600; }
.plan-price {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.4rem;
    line-height: 1;
}
.plan-price span {
    display: block;
    font-family: Montserrat, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-cream-dim);
    margin-top: 0.3rem;
}
.plan-months { margin: 0.7rem 0 1rem; font-size: 0.82rem; color: var(--on-cream-dim); }
.plan ul { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; line-height: 1.9; }
.plan li { color: var(--on-cream-dim); }

/* ─── FAQ ───────────────────────────────────────────────────────── */
.band-narrow { max-width: 44rem; }
.faq { margin-top: clamp(1.5rem, 4vh, 2rem); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
    cursor: pointer;
    padding: 1.1rem 2rem 1.1rem 0;
    position: relative;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { display: inline; margin: 0; font-size: 1rem; font-weight: 500; }
.faq summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--on-navy-dim);
}
.faq details[open] summary::after { content: '\2013'; }
.faq p {
    margin: 0 0 1.3rem;
    padding-right: 2rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--on-navy-dim);
}

/* Photographs already have their own rules; these only tighten the
   captions now that there are three different bands using them. */
.opened .photos figcaption { color: var(--on-cream-dim); }


/* ─── Hero phone ────────────────────────────────────────────────────
   What the opened envelope becomes. Sized from the same box as the
   envelope so the swap does not jump, and given a device frame so a
   visitor reads it as "on a phone" rather than "on this page". */
.hero-phone {
    position: relative;
    /* Sized from height first. Sizing from width makes a 9:16 frame
       taller than the hero slot and the invitation runs off the fold,
       which is the one thing this section cannot do. */
    height: min(52vh, 460px);
    width: auto;
    aspect-ratio: 9 / 16;
    border-radius: 1.6rem;
    padding: 0.45rem;
    background: linear-gradient(160deg, #2b3b4f, #16222f);
    box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset,
                0 24px 50px -18px rgba(0,0,0,0.65);
}
.hero-screen {
    width: 100%;
    height: 100%;
    border-radius: 1.2rem;
    overflow: hidden;
    background: var(--blush);
}
/* The renderer sizes itself from its container, which needs a real
   height to measure — percentages alone leave it at zero. */
.hero-screen .im-renderer,
.hero-screen .im-stage { width: 100%; height: 100%; }

/* The player's own chrome is for a full-screen invitation, not a
   thumbnail; at this size the arrows cover half the slide. */
.hero-screen .im-controls,
.hero-screen .im-music-toggle,
.hero-screen .im-play-again { display: none !important; }

.replay {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--blush);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.replay:hover { color: var(--on-navy); }

/* The signed-in header has a sign-out form in it */
.head-form { display: inline; margin: 0; }
.link-out {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--on-navy-dim);
    cursor: pointer;
}
.link-out:hover { color: var(--on-navy); }

@media (min-width: 820px) {
    .split { grid-template-columns: 1.15fr 1fr; }
    .split-flip > :first-child { order: 2; }
}

.step + .step { margin-top: clamp(3rem, 7vh, 4.5rem); }

/* ─── Examples ──────────────────────────────────────────────────────
   Phone frames holding finished invitations. On a phone they scroll
   sideways with snap, which is how people flick through examples
   anyway; at width all three sit side by side and can be compared,
   which is the actual job of this section. */
.shots {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62vw;
    gap: 1rem;
    margin-top: clamp(1.75rem, 5vh, 2.75rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Bleed to the screen edge so the third frame is visibly cut off —
       that is what tells you there is more to scroll. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 0.75rem;
    scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }

.shot { margin: 0; scroll-snap-align: center; }

.shot-screen {
    /* The container is the frame, not the card. An element cannot
       query itself, so a card declaring its own container would see
       the viewport instead and size its padding from that. */
    container-type: inline-size;
    aspect-ratio: 9 / 18;
    border-radius: 1.4rem;
    overflow: hidden;
    background: var(--midnight);
    border: 1px solid rgba(10, 27, 48, 0.12);
    box-shadow: 0 1px 2px rgba(10, 27, 48, 0.10),
                0 14px 34px -14px rgba(10, 27, 48, 0.40);
}
.shot-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A live example: the real renderer inside the same frame a
   screenshot would fill. It positions its own stage absolutely, so the
   holder has to be a positioned box with real height — a bare div
   collapses and the invitation renders into nothing. */
.shot-stage { position: relative; width: 100%; height: 100%; overflow: hidden; }
.shot-stage > * { max-width: 100%; }

/* Reachable by keyboard, but out of the way until it is wanted: the
   frame is already doing the selling. */
.shot-open {
    position: absolute;
    left: 50%;
    bottom: 0.7rem;
    transform: translateX(-50%);
    z-index: 2;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    background: rgba(10, 27, 48, 0.62);
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.shot:hover .shot-open,
.shot-open:focus-visible { opacity: 1; }
@media (hover: none) { .shot-open { opacity: 1; } }

.shot figcaption {
    margin-top: 0.7rem;
    font-size: 0.8rem;
    color: var(--on-cream-dim);
}

.shots-note { margin-top: 1.2rem; }

/* ─── Legal pages ───────────────────────────────────────────────── */
/* The marketing shell's main is sized for a sign-in form. A page of
   prose has to escape that, or it reads as a column down one side. */
.auth-wrap-wide,
.auth-wrap:has(.legal) { max-width: none; margin: 0; padding: 0; }
.legal { max-width: 44rem; margin-inline: auto; }
.legal h2 { margin: 2.4rem 0 0.6rem; }
.legal p { max-width: var(--measure); line-height: 1.75; }
.legal-list {
    max-width: var(--measure);
    margin: 0.6rem 0 0;
    padding-left: 1.1rem;
    line-height: 1.75;
}
.legal-list li { margin-bottom: 0.35rem; }
.legal a { color: var(--accent-ink); }

/* The invitation itself. Sized in cqw so each card scales with its
   frame rather than the viewport — the same trick the real renderer
   uses, so these read at any frame size. */
.card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3cqw;
    padding: 9cqw 7cqw;
    text-align: center;
}

/* — Quinceañera: blush paper, an arch, the name doing all the work — */
.card-quince {
    background:
        radial-gradient(120% 80% at 50% 0%, #f7e2dc 0%, #eccfc6 55%, #e3bcb1 100%);
    color: #5c2f28;
    justify-content: center;
    gap: 0;
}
.card-arch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5cqw;
    width: 100%;
    padding: 12cqw 5cqw 9cqw;
    border: 1px solid rgba(92, 47, 40, 0.30);
    border-radius: 50% 50% 4cqw 4cqw / 28% 28% 2cqw 2cqw;
}
.card-eyebrow {
    font-size: 3.1cqw;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(92, 47, 40, 0.70);
}
.card-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 16cqw;
    line-height: 0.95;
}
.card-rule { width: 18cqw; height: 1px; background: rgba(92, 47, 40, 0.40); }
.card-when { font-size: 3.4cqw; letter-spacing: 0.22em; }
.card-where {
    margin-top: 5cqw;
    font-size: 3cqw;
    letter-spacing: 0.1em;
    color: rgba(92, 47, 40, 0.72);
}

/* — Wedding: navy, almost nothing on it, the two names centred — */
.card-wedding {
    background: linear-gradient(170deg, #0d2039 0%, #06142a 100%);
    color: #ece4dc;
    gap: 4cqw;
}
.card-pair {
    font-family: Cinzel, 'Playfair Display', Georgia, serif;
    font-size: 8.5cqw;
    letter-spacing: 0.12em;
    line-height: 1.3;
}
.card-pair em {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 11cqw;
    color: var(--blush);
    margin: 1cqw 0;
}
.card-hair { width: 26cqw; height: 1px; background: rgba(236, 228, 220, 0.35); }
.card-small {
    font-size: 3.2cqw;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(236, 228, 220, 0.62);
}
.card-stamp {
    margin-top: 2cqw;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 4.4cqw;
    line-height: 1.5;
    color: rgba(236, 228, 220, 0.9);
}

/* — Birthday: no ceremony about it. The numeral is the whole design,
     punched out of a disc that runs past the edges of the frame. This
     one has to look nothing like the other two or the section's claim
     is doing the work the pictures should. — */
.card-birthday {
    background: #fdf8f4;
    color: #2a2320;
    gap: 2cqw;
    position: relative;
    isolation: isolate;
}
.card-birthday::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    /* Centred on the text block, not on the card. A disc centred on
       the card leaves the last line sitting on the curve, where the
       disc has narrowed away and cream text lands on cream. */
    top: 38cqw;
    width: 128cqw;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    /* Deeper than the brand blush on purpose: at #d6a59c, cream text
       sits near 2.8:1 and the detail line stops being readable. */
    background: radial-gradient(circle at 38% 30%, #b87366 0%, #9c5a50 78%);
}
.card-numeral {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 58cqw;
    line-height: 0.82;
    color: #fdf8f4;
    margin-top: 4cqw;
}
.card-shout {
    font-weight: 600;
    font-size: 6cqw;
    line-height: 1.2;
    max-width: 14ch;
    margin-top: 4cqw;
    color: #fdf8f4;
}
.card-birthday .card-small {
    color: #fdf8f4;
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 4cqw;
}

@media (min-width: 760px) {
    .shots {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(1rem, 3vw, 2rem);
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
    }
    /* A slight stagger, so it reads as three invitations on a table
       rather than three slots in a grid. */
    .shot:nth-child(2) { transform: translateY(1.75rem); }
}

/* ─── The wizard example ────────────────────────────────────────── */
.asked {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    border-top: 1px solid var(--line);
}
.asked li {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.92rem;
}
.asked .q { color: var(--on-cream-dim); }
.asked .a { font-weight: 500; text-align: right; }

/* ─── The guest-link example ────────────────────────────────────── */
.guest-demo {
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface-raised);
    padding: 1.1rem 1.2rem;
    font-size: 0.88rem;
}
.guest-list { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; color: var(--on-navy-dim); }
.guest-list div { padding: 0.18rem 0; }
.guest-arrow { color: var(--on-navy-dim); margin: 0.9rem 0 0.55rem; font-size: 0.78rem; }

.reply {
    border-left: 2px solid var(--blush);
    padding: 0.55rem 0 0.55rem 0.9rem;
    color: var(--on-navy);
    font-size: 0.92rem;
}

/* ─── Feature list ──────────────────────────────────────────────── */
.features {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.6rem 2.5rem;
}
@media (min-width: 680px) { .features { grid-template-columns: 1fr 1fr; } }

.features h3 {
    margin: 0 0 0.25rem;
    font: 600 0.95rem/1.4 Montserrat, sans-serif;
}
.features p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--on-navy-dim); }
.band-paper .features p { color: var(--on-cream-dim); }

/* ─── Photographs ───────────────────────────────────────────────── */
.photos {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    margin-top: clamp(1.75rem, 5vh, 2.5rem);
}
.photos figure { margin: 0; }
.photos img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
}
.photos figcaption {
    margin-top: 0.65rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--on-navy-dim);
}
@media (min-width: 720px) {
    .photos { grid-template-columns: repeat(3, 1fr); }
    /* Letterbox them once there are three abreast — at that width a
       4:3 crop cuts into the edges of the frame. */
    .photos img { aspect-ratio: 3 / 4; }
}

/* ─── Pricing strip ─────────────────────────────────────────────── */
.prices {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 2rem;
}
@media (min-width: 680px) { .prices { grid-template-columns: repeat(3, 1fr); } }

.price {
    background: var(--midnight);
    padding: 1.6rem 1.4rem;
}
.price-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin: 0 0 0.3rem;
}
.price-what { font-size: 0.85rem; color: var(--on-navy-dim); line-height: 1.6; margin: 0; }

/* ─── Close ─────────────────────────────────────────────────────── */
.close-band { text-align: center; }
.close-band .display-l { max-width: 20ch; margin: 0 auto; }

.site-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    padding: 2.4rem var(--gutter);
    background: var(--midnight);
    font-size: 0.82rem;
    color: var(--on-navy-dim);
}
.foot-mark { height: 30px; width: auto; opacity: 0.95; }
.site-foot a { color: var(--on-navy-dim); text-decoration: none; }
.site-foot a:hover { color: var(--on-navy); }

/* ─── Forms (sign in, register) ─────────────────────────────────── */
.auth-wrap {
    max-width: 24rem;
    margin: clamp(2rem, 8vh, 5rem) auto;
    padding: 0 var(--gutter) 4rem;
}
.auth-wrap h1 { margin: 0 0 0.4rem; }

.field { display: block; margin-top: 1.1rem; }
.field > span {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
    color: var(--on-navy-dim);
}
.field input {
    width: 100%;
    padding: 0.78rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--surface-raised);
    color: var(--on-navy);
    font: 400 1rem/1.4 Montserrat, sans-serif;
}
.field input:focus { outline: none; border-color: var(--on-navy-dim); }
.field .hint { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--on-navy-dim); }

.auth-wrap .button { width: 100%; margin-top: 1.5rem; text-align: center; }
.auth-alt { margin-top: 1.5rem; font-size: 0.86rem; color: var(--on-navy-dim); }
.auth-alt a { color: var(--on-navy-dim); }

.message {
    margin-top: 1.25rem;
    padding: 0.75rem 0.9rem;
    border-left: 2px solid var(--blush);
    background: rgba(214,165,156,0.10);
    font-size: 0.88rem;
}
.message-ok { border-left-color: var(--blush); background: rgba(214,165,156,0.10); }

/* ─── Accessibility floor ───────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--blush);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* The brand rules live further up, with the header they belong to.
   A second `.brand img` block used to sit here from the old SVG logo:
   being more specific than `.brand-word`, it quietly won every time
   and the mobile header kept showing the full lockup. */

/* The tagline is set the way the brand sheet sets it */
.tagline {
    font-size: 0.62rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--on-navy-dim);
}

/* The hero lockup: mark above the wordmark, rule and tagline beneath,
   matching the primary logo arrangement. */
.hero-lockup { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.hero-lockup img { height: 56px; width: auto; }

@media (min-width: 680px) {
    .steps { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
    .occasions { grid-template-columns: 1fr 1fr; }
    .plans { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
    .occasions { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
    /* The in-page anchors earn their place on a laptop and crowd the
       header on a phone, where people scroll anyway. Sign in and the
       start button are the two that have to survive. */
    .site-head nav a[href^="#"] { display: none; }
    .site-head nav { gap: 1rem; }
}