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

   The palette is the invitation viewer's own: near-black, because that
   is how a guest actually sees an invitation, full screen on a phone
   at night. The site and the product are deliberately continuous.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Straight from the brand sheet. The navy is the primary, the
       blush is the only accent, and cream is the light surface. */
    --navy:       #0a1b30;
    --navy-deep:  #06142a;
    --navy-soft:  #112741;
    --navy-line:  #1d3550;

    --blush:      #d6a59c;
    --blush-deep: #c08b80;
    --cream:      #fbf6f3;
    --purple:     #451d81;   /* digital accent, used sparingly */

    --on-navy:        #f4f1ef;
    --on-navy-dim:    #9fb0c4;
    --on-cream:       #0a1b30;
    --on-cream-dim:   #5c6b7e;

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

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--navy-deep);
    color: var(--on-navy);
    font: 400 1rem/1.65 Inter, -apple-system, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: inherit; }

/* ─── Type scale ────────────────────────────────────────────────────
   Cormorant is a high-contrast face: it needs size and air to show
   its character, and tightens up as it grows. */
.display {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -0.012em;
    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: 1.4rem var(--gutter);
}
.wordmark {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--on-navy);
}
.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(--navy-line);
    border-radius: 2px;
    background: transparent;
    color: var(--on-navy);
    font: 500 0.92rem/1 Inter, 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); }

/* Blush is a light tint, so the label on it has to be navy — white
   on blush fails contrast badly. */
.button-wax {
    background: var(--blush);
    border-color: var(--blush);
    color: var(--navy);
    font-weight: 600;
}
.button-wax:hover { background: #e2b5ad; border-color: #e2b5ad; }
.band-paper .button-wax { color: var(--navy); }

.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(214,165,156,0.20) 0%, rgba(214,165,156,0) 68%);
    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%; }
.hero-envelope .im-env-hint { color: rgba(247,241,232,0.55); }

.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); }
.band-paper { background: var(--cream); color: var(--on-cream); }
.band-paper .lede { color: var(--on-cream-dim); }
.band-paper .note { color: var(--on-cream-dim); }

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

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

/* 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;
}
@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); }

/* ─── The wizard example ────────────────────────────────────────── */
.asked {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    border-top: 1px solid #e4dcd6;
}
.asked li {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #e4dcd6;
    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(--navy-line);
    border-radius: 3px;
    background: var(--navy-soft);
    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 Inter, 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); }

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

.price {
    background: var(--navy);
    padding: 1.6rem 1.4rem;
}
.price-name {
    font-family: 'Cormorant Garamond', 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;
    gap: 1rem;
    justify-content: space-between;
    padding: 2rem var(--gutter);
    border-top: 1px solid var(--navy-line);
    font-size: 0.82rem;
    color: var(--on-navy-dim);
}
.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(--navy-line);
    border-radius: 2px;
    background: var(--navy-soft);
    color: var(--on-navy);
    font: 400 1rem/1.4 Inter, 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;
    }
}

/* ─── Brand mark ────────────────────────────────────────────────────
   The guidelines say to use the approved files and never recreate the
   logo, so the markup points at them. Until they are uploaded the
   wordmark falls back to type, which is wrong-but-legible rather than
   a broken image. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
}
.brand img { display: block; height: 30px; width: auto; }
.brand-fallback {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.06em;
}

/* 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; }