/* The moment a recipient opens what was left for them. Everything here is chosen to
   be quiet: generous space, one thing at a time, nothing competing for attention. */
.mp-reveal {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
    background: #12121a;
    color: #f4f2ee;
}

.mp-reveal-inner {
    width: 100%;
    max-width: 38rem;
}

.mp-reveal-eyebrow {
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8a8698;
    margin-bottom: 1.5rem;
}

.mp-reveal-heading {
    font-size: clamp(1.9rem, 5vw, 2.9rem);
    line-height: 1.25;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.mp-reveal-heading span {
    display: block;
}

.mp-reveal-when {
    color: #b9b4c7;
    margin-bottom: 2rem;
}

.mp-reveal-body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #d6d2e0;
    margin-bottom: 2rem;
}

.mp-reveal-form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 22rem;
}

.mp-reveal-label {
    font-size: .85rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8a8698;
}

.mp-reveal-input {
    padding: .9rem 1rem;
    font-size: 1.25rem;
    letter-spacing: .12em;
    border: 1px solid #3a3548;
    border-radius: .5rem;
    background: #1c1b26;
    color: #f4f2ee;
}

/* Keep the field dark on focus. A global input:focus-within rule forces a white
   background, which put light code text on white -> the pasted code vanished. */
.mp-reveal-input:focus,
.mp-reveal-input:focus-within,
.mp-reveal-input:-webkit-autofill {
    background: #1c1b26 !important;
    color: #f4f2ee !important;
    -webkit-text-fill-color: #f4f2ee !important;
    caret-color: #45c6d8;
    outline: 2px solid #45c6d8;
    outline-offset: 2px;
    box-shadow: none !important;
}

.mp-reveal-button {
    padding: .9rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    border: 0;
    border-radius: .5rem;
    background: #45c6d8;
    color: #10101a;
    cursor: pointer;
}

.mp-reveal-button:hover {
    background: #6ad4e2;
}

.mp-reveal-error {
    min-height: 1.25rem;
    color: #ff8f9a;
    font-size: .9rem;
}

.mp-reveal-media {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
}

.mp-reveal-media img,
.mp-reveal-media video {
    width: 100%;
    border-radius: .5rem;
}

.mp-reveal-media a {
    color: #45c6d8;
    word-break: break-all;
}

.mp-reveal-download { display: inline-block; margin: 4px 0 8px; text-decoration: none; text-align: center; }

/* Greeting-card cover: a sealed envelope opens, the card lifts out into a gilded frame,
   then flips open on tap to reveal the message that was waiting behind it. */
.mp-gcard-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(8,7,12,.74); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); perspective: 1600px; animation: mp-gcard-in .4s ease; padding: 20px; }
/* Envelope and card are stacked in a single centred grid cell, so they sit concentric and
   dead-centre regardless of their differing sizes. */
.mp-gcard-stage { position: relative; width: min(86vw, 330px); height: min(122vw, 470px); display: grid; place-items: center; }

/* --- Sealed envelope --- */
.mp-gcard-env { grid-area: 1 / 1; position: relative; width: min(80vw, 296px); height: 204px; transform-style: preserve-3d; animation: mp-env-float 5s ease-in-out infinite; cursor: pointer; z-index: 12; transition: transform .6s ease, opacity .5s ease; }
.mp-gcard-env.gone { transform: translateY(28px) scale(.9); opacity: 0; pointer-events: none; }
@keyframes mp-env-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.mp-gcard-env-body { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg,#2b2740,#211d33); box-shadow: 0 26px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); border: 1px solid rgba(233,201,121,.28); }
.mp-gcard-env-pocket { position: absolute; left: 0; right: 0; bottom: 0; height: 116px; background: linear-gradient(180deg,#312c49,#25213a); clip-path: polygon(0 42%,50% 100%,100% 42%,100% 100%,0 100%); border-top: 1px solid rgba(233,201,121,.18); }
.mp-gcard-flap { position: absolute; left: 0; right: 0; top: 0; height: 116px; transform-origin: top center; background: linear-gradient(180deg,#35304c,#2a2540); clip-path: polygon(0 0,100% 0,50% 92%); border-bottom: 1px solid rgba(233,201,121,.22); transition: transform .7s cubic-bezier(.6,0,.2,1); z-index: 5; backface-visibility: hidden; }
.mp-gcard-flap.open { transform: rotateX(-172deg); z-index: 1; }
.mp-gcard-seal { position: absolute; top: 68px; left: 50%; transform: translateX(-50%); width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; z-index: 7; background: radial-gradient(circle at 35% 30%,#f4d489,#c99a3c 60%,#a97e2c); box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 2px 4px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.3); transition: transform .5s ease, opacity .5s ease; }
.mp-gcard-env-eyebrow { position: absolute; left: 0; right: 0; top: -28px; text-align: center; color: rgba(255,255,255,.72); font-size: 12.5px; letter-spacing: .6px; z-index: 8; }
.mp-gcard-hint { position: absolute; left: 0; right: 0; bottom: -32px; text-align: center; color: rgba(255,255,255,.7); font-size: 13px; animation: mp-hint 2s ease-in-out infinite; transition: opacity .3s; }
@keyframes mp-hint { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* --- The card that lifts out --- */
.mp-gcard { grid-area: 1 / 1; width: min(84vw, 314px); aspect-ratio: 3 / 4; max-height: min(120vw, 440px); border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); color: #fff; position: relative; overflow: hidden; transform-origin: center center; opacity: 0; transform: translateY(40px) scale(.82); z-index: 10; pointer-events: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.mp-gcard.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; cursor: pointer; }
.mp-gcard-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.mp-gcard-texture { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: soft-light; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 4px 4px; }
.mp-gcard-frame { position: absolute; inset: 14px; border: 1px solid rgba(233,201,121,.55); border-radius: 11px; z-index: 3; box-shadow: inset 0 0 30px rgba(0,0,0,.28), inset 0 0 0 3px rgba(233,201,121,.12); pointer-events: none; }
.mp-gcard-corner { position: absolute; width: 38px; height: 38px; z-index: 4; pointer-events: none; }
.mp-gcard-corner svg { width: 100%; height: 100%; display: block; }
.mp-gcard-corner-tl { top: 8px; left: 8px; }
.mp-gcard-corner-tr { top: 8px; right: 8px; transform: scaleX(-1); }
.mp-gcard-corner-bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.mp-gcard-corner-br { bottom: 8px; right: 8px; transform: scale(-1,-1); }
.mp-gcard-sheen { position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: overlay; opacity: .55; background: linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 48%,transparent 62%); background-size: 250% 250%; animation: mp-sheen 4.5s ease-in-out infinite; }
@keyframes mp-sheen { 0% { background-position: 140% 0; } 55%,100% { background-position: -40% 0; } }
.mp-gcard-eyebrow { position: absolute; top: 24px; left: 0; right: 0; z-index: 6; font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.7); text-align: center; }
.mp-gcard-inner { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 24px; }
.mp-gcard-medallion { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; background: radial-gradient(circle at 40% 32%,rgba(255,255,255,.16),rgba(255,255,255,.03)); box-shadow: inset 0 0 0 2px rgba(233,201,121,.5), 0 6px 18px rgba(0,0,0,.35), inset 0 0 22px rgba(0,0,0,.25); }
.mp-gcard-fleuron { font-size: 1rem; letter-spacing: 4px; margin: 14px 0 4px; display: flex; align-items: center; gap: 10px; }
.mp-gcard-rule { width: 42px; height: 1px; background: linear-gradient(90deg,transparent,currentColor); }
.mp-gcard-rule-r { transform: scaleX(-1); }
.mp-gcard-ribbon { position: relative; margin-top: 4px; padding: 8px 26px; }
.mp-gcard-ribbon::before { content: ""; position: absolute; inset: 0; background: var(--rb,#e9c979); opacity: .18; clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.mp-gcard-title { position: relative; z-index: 2; font-family: Georgia, 'Times New Roman', serif; font-size: 1.55rem; line-height: 1.22; text-wrap: balance; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.mp-gcard-verse { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: .98rem; line-height: 1.5; margin-top: 14px; max-width: 86%; color: rgba(255,255,255,.92); text-wrap: balance; }
.mp-gcard-open { margin-top: 24px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 999px; padding: 11px 22px; font-size: .95rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(2px); transition: background .15s; }
.mp-gcard-open:hover { background: rgba(255,255,255,.28); }
.mp-gcard-sign { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font-family: Georgia, serif; font-style: italic; font-size: .88rem; color: rgba(255,255,255,.8); z-index: 6; }
.mp-gcard-overlay.opening { animation: mp-gcard-out .7s forwards; }
.mp-gcard-overlay.opening .mp-gcard { transform-origin: left center; transform: rotateY(-112deg); opacity: 0; }
@keyframes mp-gcard-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mp-gcard-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .mp-gcard-env { animation: none; }
  .mp-gcard, .mp-gcard-flap, .mp-gcard-seal { transition: opacity .3s; }
  .mp-gcard-overlay.opening .mp-gcard { transform: none; }
  .mp-gcard-sheen, .mp-gcard-hint { animation: none; }
}

/* Floating background-music toggle */
.mp-reveal-music {
    position: fixed; right: 16px; bottom: 16px; z-index: 40;
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid #2f6f63;
    background: #14342e; color: #8fe3c6; font-size: 1.25rem; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center;
    animation: mp-music-pulse 2.4s ease-in-out infinite;
}
.mp-reveal-music:hover { filter: brightness(1.15); }
.mp-reveal-music-credit { position: fixed; right: 70px; bottom: 24px; z-index: 40; font-size: .68rem; letter-spacing: .2px; color: rgba(180,200,196,.75); background: rgba(20,34,30,.72); border: 1px solid rgba(75,183,159,.28); padding: 3px 9px; border-radius: 999px; text-decoration: none; backdrop-filter: blur(2px); white-space: nowrap; }
.mp-reveal-music-credit:hover { color: #b6f0d9; border-color: rgba(75,183,159,.5); }
.mp-reveal-music.off { color: #7a7788; background: #1c1b26; border-color: #3a3548; animation: none; opacity: .8; }
.mp-reveal-music.off::after { content: "🔇"; position: absolute; font-size: .7rem; right: 4px; bottom: 4px; }
@keyframes mp-music-pulse { 0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,.4); } 50% { box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 0 6px rgba(75,183,159,.14); } }
@media (prefers-reduced-motion: reduce) { .mp-reveal-music { animation: none; } }

/* Media carousel (3+ items): one at a time with ‹ › arrows, a counter and dots. */
.mp-carousel { position: relative; border: 1px solid #2a2836; border-radius: .8rem; background: #0e0d16; overflow: hidden; outline: none; }
.mp-carousel:focus-visible { box-shadow: 0 0 0 2px #4bb79f; }
/* Fixed-height stage so the ‹ › arrows stay in the same spot no matter the picture's size —
   each image/video is contained (letterboxed) within the same box. */
.mp-carousel-stage { position: relative; height: 60vh; min-height: 300px; max-height: 620px; }
.mp-carousel-slide { display: none; height: 100%; padding: .5rem; }
.mp-carousel-slide.on { display: grid; place-items: center; overflow: auto; }
.mp-carousel-slide img, .mp-carousel-slide video { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: .5rem; display: block; object-fit: contain; background: #000; }
.mp-carousel-slide > * { max-width: 100%; }
.mp-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
    font-size: 1.5rem; line-height: 1; color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.mp-carousel-prev { left: 10px; background: rgba(20,19,28,.82); }
.mp-carousel-next { right: 10px; background: linear-gradient(135deg,#4bb79f,#2e8f7d); }
.mp-carousel-arrow:hover { filter: brightness(1.12); }
.mp-carousel-counter {
    position: absolute; right: 12px; bottom: 12px; z-index: 3;
    background: rgba(0,0,0,.6); color: #fff; border-radius: 999px; padding: 3px 11px;
    font-size: .8rem; font-variant-numeric: tabular-nums;
}
.mp-carousel-dots { display: flex; gap: 7px; justify-content: center; margin: .8rem 0 0; flex-wrap: wrap; }
.mp-carousel-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: #3a3846; cursor: pointer; transition: width .15s, background .15s; }
.mp-carousel-dot.on { width: 22px; background: #4bb79f; }
@media (max-width: 640px) {
    .mp-carousel-arrow { width: 38px; height: 38px; font-size: 1.3rem; }
}

/* Author-attached links: embedded players + link cards */
.mp-reveal-links {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}
.mp-reveal-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    border-radius: .6rem;
    overflow: hidden;
    background: #000;
}
.mp-reveal-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.mp-reveal-linkcard {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.mp-reveal-linkcard:hover { background: rgba(255, 255, 255, .12); }
.mp-reveal-linkcard-ic { font-size: 1.2rem; }
.mp-reveal-linkcard-tx { flex: 1; font-weight: 600; word-break: break-word; }
.mp-reveal-linkcard-go { color: #45c6d8; font-weight: 700; white-space: nowrap; }
.mp-reveal-linkcard-img { width: 72px; height: 72px; object-fit: cover; border-radius: .4rem; flex: 0 0 auto; }
.mp-reveal-linkcard.has-img { align-items: center; }

.mp-reveal-keep {
    font-size: .9rem;
    color: #b9b4c7;
    border-top: 1px solid #2a2735;
    padding-top: 1.25rem;
}

/* Author preview banner */
.mp-preview-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    background: repeating-linear-gradient(-45deg, #e6a23c, #e6a23c 18px, #d3922e 18px, #d3922e 36px);
    color: #fff;
    text-align: center;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 10px 16px;
    font-size: .85rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* The author's 'only you would know' line */
.mp-reveal-hint {
    background: rgba(70, 183, 197, .1);
    border-left: 3px solid #46b7c5;
    border-radius: 0 10px 10px 0;
    padding: 12px 16px;
    margin: 14px 0;
    font-style: italic;
    line-height: 1.6;
}

.mp-reveal-hint-label {
    display: block;
    font-style: normal;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 4px;
}

/* The sealed state: a promise, not an error */
.mp-sealed-card {
    background: rgba(70, 183, 197, .08);
    border: 1px solid rgba(70, 183, 197, .25);
    border-radius: 14px;
    padding: 20px 22px;
    margin-top: 18px;
}

.mp-sealed-when {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.mp-sealed-contents {
    font-style: italic;
    margin-bottom: 10px;
}

.mp-sealed-note {
    font-size: .88rem;
    opacity: .8;
    line-height: 1.6;
    margin: 0;
}

/* Embedded letter */
.mp-reveal-pdf-wrap {
    width: 100%;
}

.mp-reveal-pdf {
    width: 100%;
    height: min(72vh, 850px);
    border: none;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}

.mp-reveal-keep {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
}

/* Inline document preview (Word/spreadsheet) on the reveal page. */
.mp-reveal-doc {
    margin: 18px 0;
}
.mp-reveal-doc-body {
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 12px;
    padding: 28px 32px;
    max-height: 70vh;
    overflow: auto;
    color: #1c2330;
    line-height: 1.6;
    font-size: 1rem;
    box-shadow: 0 8px 28px rgba(16,24,40,.08);
}
.mp-reveal-doc-body p { margin: 0 0 .8em; }
.mp-reveal-doc-body h1, .mp-reveal-doc-body h2, .mp-reveal-doc-body h3 { line-height: 1.3; margin: 1em 0 .5em; }
.mp-reveal-doc-body img { max-width: 100%; height: auto; }
.mp-reveal-doc-body table { border-collapse: collapse; width: 100%; margin: .8em 0; font-size: .92rem; }
.mp-reveal-doc-body td, .mp-reveal-doc-body th { border: 1px solid #d8dce5; padding: 6px 10px; text-align: left; }
.mp-reveal-doc .mp-reveal-keep { display: inline-block; margin-top: 12px; }

/* ---- Mobile-first polish: most recipients open this on a phone ---- */
/* Clear the floating header pill so the greeting never hides behind it. */
.mp-reveal { padding-top: 5.5rem; }

/* Full-width, thumb-sized action button; input already >=16px to stop iOS zoom. */
.mp-reveal-button { width: 100%; min-height: 52px; }
.mp-reveal-input { width: 100%; min-height: 52px; }

/* Wide tables in a previewed document scroll inside the card, never the page. */
.mp-reveal-doc-body { -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
    .mp-reveal {
        padding: 5rem 1.05rem 2.5rem;
        align-items: flex-start;
    }
    .mp-reveal-inner { max-width: 100%; }
    .mp-reveal-form { max-width: 100%; }
    .mp-reveal-heading { font-size: clamp(1.55rem, 7.5vw, 2.1rem); }
    .mp-reveal-body { font-size: 1rem; }
    .mp-reveal-doc-body {
        padding: 16px 14px;
        max-height: 76vh;
        font-size: .96rem;
        border-radius: 10px;
    }
    .mp-reveal-pdf { height: 68vh; }
    .mp-reveal-media img, .mp-reveal-media video { border-radius: .4rem; }
}

/* Very small phones */
@media (max-width: 380px) {
    .mp-reveal { padding-left: .8rem; padding-right: .8rem; }
    .mp-reveal-doc-body { padding: 14px 11px; }
}

/* "Your turn" — a gentle nudge for the recipient to become an author. */
.mp-reveal-cta {
    margin-top: 2.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid #2a2735;
}
.mp-reveal-cta-eyebrow {
    display: inline-block;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8a8698;
    margin-bottom: .6rem;
}
.mp-reveal-cta-text {
    font-size: 1rem;
    line-height: 1.65;
    color: #c9c5d4;
    margin: 0 0 1.1rem;
    max-width: 32rem;
}
.mp-reveal-cta-btn {
    display: inline-block;
    background: #45c6d8;
    color: #10101a !important;
    font-weight: 700;
    text-decoration: none !important;
    padding: .8rem 1.4rem;
    border-radius: .6rem;
    min-height: 48px;
    line-height: 1.6;
    transition: background .15s ease;
}
.mp-reveal-cta-btn:hover { background: #6ad4e2; }
.mp-reveal-cta-link {
    display: inline-block;
    margin-left: 1rem;
    color: #b9b4c7 !important;
    font-size: .92rem;
}
@media (max-width: 640px) {
    .mp-reveal-cta-btn { display: block; text-align: center; }
    .mp-reveal-cta-link { display: block; margin: .9rem 0 0; }
}

/* Branding + warmth so the page doesn't read as a bare form. The logo has dark
   text, so it sits on a light badge to stay legible on the dark backdrop. */
.mp-reveal {
    background:
        radial-gradient(1100px 520px at 18% -10%, rgba(70, 198, 216, .16), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(122, 90, 248, .12), transparent 55%),
        #12121a;
}
.mp-reveal-brand {
    display: inline-block;
    background: #fff;
    padding: 10px 16px;
    border-radius: 14px;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.mp-reveal-brand img {
    display: block;
    height: 40px;
    width: auto;
}
@media (max-width: 640px) {
    .mp-reveal-brand { padding: 8px 13px; margin-bottom: 1.6rem; }
    .mp-reveal-brand img { height: 33px; }
}

/* Write-back: a reply composed right on the reveal page (dark, matches the page). */
.mp-reveal-respond {
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid #2a2735;
}
.mp-reveal-respond-h { font-size: 1.15rem; font-weight: 600; margin: 0 0 .4rem; }
.mp-reveal-respond-sub { color: #b9b4c7; font-size: .95rem; line-height: 1.6; margin: 0 0 1rem; }
.mp-respond-msg {
    width: 100%;
    min-height: 84px;
    background: #1c1b26;
    color: #f4f2ee;
    border: 1px solid #3a3548;
    border-radius: .6rem;
    padding: .8rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
}
.mp-respond-msg:focus { outline: 2px solid #45c6d8; outline-offset: 2px; }
.mp-respond-files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.mp-respond-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #24222f; border: 1px solid #3a3548; border-radius: 999px;
    padding: .3rem .7rem; font-size: .82rem; color: #d6d2e0;
}
.mp-respond-chip .mp-respond-rm { color: #ff9aa4; text-decoration: none; font-weight: 700; }
.mp-respond-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1rem 0; }
.mp-respond-addfile, .mp-respond-locktoggle {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .92rem; color: #d6d2e0; cursor: pointer;
}
.mp-respond-addfile { padding: .5rem .9rem; border: 1px solid #3a3548; border-radius: .5rem; background: #1c1b26; }
.mp-respond-lockdate {
    background: #1c1b26 !important; color: #f4f2ee !important;
    -webkit-text-fill-color: #f4f2ee !important;
    border: 1px solid #3a3548; border-radius: .5rem; padding: .5rem .7rem;
    color-scheme: dark;
}
.mp-respond-status { color: #8fe3c6; font-size: .9rem; margin-top: .7rem; min-height: 1.1rem; }

/* ✨ Help me write (works for account-less recipients) + greyed Send until there's content */
.mp-respond-help {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    font-size: .92rem; font-weight: 600; padding: .5rem .95rem; border-radius: .5rem;
    border: 1px solid #2f6f63; background: #14342e; color: #8fe3c6;
}
.mp-respond-help:hover { background: #1a4038; }
.mp-reveal-button:disabled { opacity: .5; cursor: default; }
.mp-respond-help-panel { margin: .3rem 0 1rem; padding: .85rem; border: 1px solid #3a3548; border-radius: .6rem; background: #171622; }
.mp-respond-help-inp {
    width: 100%; background: #1c1b26 !important; color: #f4f2ee !important;
    -webkit-text-fill-color: #f4f2ee !important; border: 1px solid #3a3548; border-radius: .5rem;
    padding: .55rem .7rem; font-size: .95rem; resize: vertical; outline: none;
}
.mp-respond-help-inp:focus { border-color: #4bb79f; }
.mp-respond-help-row { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; }
.mp-respond-help-go { border: none; border-radius: 999px; padding: .45rem 1.1rem; font-weight: 700; cursor: pointer; background: linear-gradient(135deg,#4bb79f,#2e8f7d); color: #fff; }
.mp-respond-help-go:disabled { opacity: .6; cursor: default; }
.mp-respond-help-cancel { border: 1px solid #3a3548; background: none; color: #b7b2c4; border-radius: 999px; padding: .45rem .9rem; cursor: pointer; }
.mp-respond-help-status { color: #8fe3c6; font-size: .85rem; }

@media (max-width: 640px) {
    .mp-respond-tools { gap: .75rem; }
    .mp-respond-addfile, .mp-respond-locktoggle { width: 100%; }
}

/* A global input rule forces textarea backgrounds white; keep the reply box dark. */
.mp-reveal-respond .mp-respond-msg,
.mp-reveal-respond .mp-respond-msg:focus,
.mp-reveal-respond .mp-respond-msg:focus-within {
    background: #1c1b26 !important;
    color: #f4f2ee !important;
    -webkit-text-fill-color: #f4f2ee !important;
    caret-color: #45c6d8;
}

/* =====================================================================
   REVEAL REDESIGN — a modern, warm first impression.
   Aurora backdrop + frosted glass card + gradient accents + soft motion.
   ===================================================================== */

.mp-reveal {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60rem 40rem at 12% -8%, rgba(69, 198, 216, .22), transparent 60%),
        radial-gradient(52rem 42rem at 108% 4%, rgba(139, 124, 248, .22), transparent 58%),
        radial-gradient(46rem 40rem at 88% 112%, rgba(251, 113, 133, .16), transparent 60%),
        linear-gradient(155deg, #140f22 0%, #0f1320 52%, #0e1a1e 100%);
}
/* Two slow-drifting orbs for depth and life (calm, not busy). */
.mp-reveal::before,
.mp-reveal::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}
.mp-reveal::before {
    width: 30rem; height: 30rem;
    left: -8rem; top: 2rem;
    background: radial-gradient(circle, rgba(69,198,216,.5), transparent 70%);
    animation: mpFloatA 16s ease-in-out infinite;
}
.mp-reveal::after {
    width: 26rem; height: 26rem;
    right: -7rem; bottom: -4rem;
    background: radial-gradient(circle, rgba(139,124,248,.45), transparent 70%);
    animation: mpFloatB 20s ease-in-out infinite;
}
@keyframes mpFloatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(2.5rem, 1.8rem); } }
@keyframes mpFloatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-2.2rem, -1.6rem); } }
@media (prefers-reduced-motion: reduce) {
    .mp-reveal::before, .mp-reveal::after { animation: none; }
}

/* The content becomes a frosted glass card that floats above the aurora. */
.mp-reveal-inner {
    position: relative;
    z-index: 1;
    max-width: 34rem;
    background: rgba(22, 19, 32, .55);
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 26px;
    padding: 2.6rem 2.4rem 2.8rem;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: mpRise .6s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes mpRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Eyebrow as a gradient-bordered pill. */
.mp-reveal-eyebrow {
    display: inline-block;
    margin-bottom: 1.25rem;
    padding: .38rem .85rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(69,198,216,.16), rgba(139,124,248,.16));
    border: 1px solid rgba(255, 255, 255, .12);
    color: #d7e9ee;
    font-size: .72rem;
    letter-spacing: .16em;
}

.mp-reveal-heading {
    letter-spacing: -.01em;
    text-wrap: balance;
}
/* The author-name line gets a soft gradient sheen — the one pop of colour. */
.mp-reveal-heading span:last-child {
    background: linear-gradient(92deg, #7fe3ee 0%, #b7a7ff 55%, #ffb0be 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Gradient divider above the code entry. */
.mp-reveal-form {
    max-width: 100%;
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(69,198,216,.55), rgba(139,124,248,.45), transparent) 1;
}

.mp-reveal-input {
    background: rgba(12, 11, 20, .7);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .8rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mp-reveal-input:focus,
.mp-reveal-input:focus-within {
    border-color: rgba(69, 198, 216, .8);
    box-shadow: 0 0 0 4px rgba(69, 198, 216, .18) !important;
    outline: none;
}

/* Gradient action button with a glow + lift. */
.mp-reveal-button,
.mp-reveal-cta-btn {
    background: linear-gradient(92deg, #45c6d8 0%, #7b7cf8 100%);
    color: #0b0b14 !important;
    border-radius: .8rem;
    box-shadow: 0 10px 26px rgba(69, 198, 216, .28);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.mp-reveal-button:hover,
.mp-reveal-cta-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(123, 124, 248, .34);
    background: linear-gradient(92deg, #45c6d8 0%, #7b7cf8 100%);
}
.mp-reveal-cta-btn { color: #0b0b14 !important; font-weight: 700; }

/* Logo badge: brighter, softer. */
.mp-reveal-brand {
    box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .5);
}

/* "Your turn" CTA sits in a tinted panel so it reads as a distinct invitation. */
.mp-reveal-cta {
    margin-top: 2.25rem;
    padding: 1.5rem 1.4rem;
    border-top: none;
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(69,198,216,.10), rgba(139,124,248,.10));
    border: 1px solid rgba(255, 255, 255, .09);
}

@media (max-width: 640px) {
    .mp-reveal-inner {
        padding: 1.8rem 1.25rem 2rem;
        border-radius: 20px;
    }
    .mp-reveal-cta { padding: 1.25rem 1.1rem; }
}

/* A one-time shower of glowing stars when the page opens (see reveal.js mpCelebrate). */
.mp-stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}
.mp-star {
    position: absolute;
    top: -8vh;
    opacity: 0;
    will-change: transform, opacity;
    animation-name: mpStarFall;
    animation-timing-function: cubic-bezier(.4, 0, .6, 1);
    animation-fill-mode: both;
}
.mp-star-dot {
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}
.mp-star-sparkle {
    line-height: 1;
    text-shadow: 0 0 10px currentColor, 0 0 22px currentColor;
}
@keyframes mpStarFall {
    0%   { transform: translate(0, -8vh) rotate(0deg) scale(.5); opacity: 0; }
    12%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { transform: translate(var(--drift, 0), 112vh) rotate(240deg) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-stars { display: none; }
}

/* =====================================================================
   Desktop split layout + wide logo header.
   Phone: single column, the card carries a full-width logo header.
   Desktop: brand/emotional hero on the left, the card on the right.
   ===================================================================== */

/* Logo is a full-width header banner on the card, not a corner chip. */
.mp-reveal-brand-card {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    margin-bottom: 1.6rem;
}
.mp-reveal-brand-card img { height: 46px; }

/* Hero is desktop-only. */
.mp-reveal-hero { display: none; }

@media (min-width: 992px) {
    /* Grid, not flex: two explicit columns can never overlap the way shrinking
       flex items did. Left = brand hero, right = the card. */
    .mp-reveal {
        display: grid;
        grid-template-columns: minmax(0, 30rem) minmax(0, 34rem);
        align-items: center;
        justify-content: center;
        gap: 3.5rem;
        padding: 5.5rem 3rem 3rem;
    }
    .mp-reveal-hero {
        display: block;
        max-width: 30rem;
        position: relative;
        z-index: 1;
    }
    .mp-reveal-brand-hero {
        display: inline-flex !important;
        justify-content: center;
        padding: 16px 30px;
        margin-bottom: 2.2rem;
    }
    .mp-reveal-brand-hero img { height: 60px; }
    .mp-reveal-hero-title {
        font-size: clamp(2rem, 3vw, 2.95rem);
        line-height: 1.14;
        font-weight: 600;
        letter-spacing: -.01em;
        margin: 0 0 1.15rem;
        color: #f6f4ef;
        text-wrap: balance;
    }
    .mp-reveal-hero-sub {
        color: #c3bed2;
        font-size: 1.06rem;
        line-height: 1.72;
        max-width: 27rem;
        margin: 0;
    }
    .mp-reveal-inner {
        flex: 0 1 33rem;
        margin: 0;
    }
    /* On desktop the hero carries the brand, so the card drops its own logo. */
    .mp-reveal-brand-card { display: none !important; }
}

/* Widescreen: a touch more breathing room and size. */
@media (min-width: 1400px) {
    .mp-reveal { gap: 5rem; }
    .mp-reveal-hero { flex-basis: 34rem; max-width: 34rem; }
    .mp-reveal-inner { flex-basis: 35rem; }
}

/* Explicit grid placement — auto-flow was piling both panels into column 2. */
@media (min-width: 992px) {
    .mp-reveal-hero  { grid-column: 1 !important; align-self: center !important; }
    .mp-reveal-inner { grid-column: 2 !important; align-self: center !important; }
}

/* ---------------------------------------------------------------------
   FINAL LAYOUT (reliable): the two-column split fought the base flex +
   aurora pseudo-elements and overlapped. Ship a single centred card that
   simply grows wider on desktop to use the space, with a wide logo header.
   --------------------------------------------------------------------- */
.mp-reveal-hero { display: none !important; }

@media (min-width: 992px) {
    .mp-reveal {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 6rem 2rem 3.5rem;
    }
    .mp-reveal-inner {
        max-width: 46rem !important;
        width: 100%;
        margin: 0 auto;
        padding: 3rem 3.4rem 3.2rem;
    }
    /* Card keeps its wide logo header (no hero to carry the brand now). */
    .mp-reveal-brand-card { display: flex !important; }
    /* Roomier reading measures on the wider card. */
    .mp-reveal-heading { font-size: clamp(2.1rem, 3.4vw, 3rem); }
    .mp-reveal-cta-text, .mp-reveal-body { max-width: 40rem; }
}

/* Recording controls + live preview on the reply form. */
.mp-respond-preview { width: 100%; max-width: 22rem; border-radius: 12px; margin-top: .8rem; background: #000; display: block; }
.mp-respond-recstop { color: #ffb0be !important; border-color: rgba(255,154,164,.55) !important; }

/* Seal-until date+time input: keep it dark in every state. The global
   input:focus-within white-out has higher specificity than a bare class, so
   qualify with the ancestor + element to win (incl. after a value is picked). */
.mp-reveal-respond input.mp-respond-lockdate,
.mp-reveal-respond input.mp-respond-lockdate:hover,
.mp-reveal-respond input.mp-respond-lockdate:focus,
.mp-reveal-respond input.mp-respond-lockdate:focus-within {
    background: #1c1b26 !important;
    color: #f4f2ee !important;
    -webkit-text-fill-color: #f4f2ee !important;
    border: 1px solid #3a3548 !important;
    color-scheme: dark;
}
.mp-reveal-fullscreen { margin-right: 1.2rem; }

/* Any previewed document can be enlarged: drag the bottom-right corner to grow
   the view window (works for Word, Excel and PDF alike). */
.mp-reveal-doc-body {
    resize: vertical;
    min-height: 280px;
    max-height: 88vh;
}
.mp-reveal-pdf {
    resize: vertical;
    min-height: 320px;
    overflow: auto;
}
.mp-reveal-doc::after {
    content: "↕ drag the bottom edge to resize";
    display: block;
    font-size: .78rem;
    color: #8a8698;
    margin-top: 6px;
}

/* Clearly visible drag-to-resize handle (mpAttachResizer). */
.mp-resizer {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    cursor: ns-resize; user-select: none; touch-action: none;
    margin-top: 8px; padding: 10px;
    background: rgba(69, 198, 216, .12);
    border: 1px dashed rgba(69, 198, 216, .5);
    border-radius: 10px;
    font-size: .8rem; color: #9fe3ee; letter-spacing: .04em;
}
.mp-resizer:hover { background: rgba(69, 198, 216, .2); }
.mp-resizer-grip { width: 44px; height: 6px; border-radius: 4px; background: #45c6d8; position: relative; }
.mp-resizer-grip::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 4px; background: #45c6d8; }
.mp-resizer-label { text-transform: uppercase; }

/* both-direction native resize corner as well */
.mp-reveal-doc-body,.mp-reveal-pdf{resize:both;}

/* Gift cards on the reveal — pulled out of the message so a gift feels like a gift. */
.mp-reveal-gifts { display: flex; flex-direction: column; gap: 14px; margin: 18px 0; }
.mp-reveal-gift { position: relative; border-radius: 16px; padding: 18px; background: linear-gradient(135deg, #fff7ef 0%, #f2faf7 100%); border: 1px solid #ecdcc8; box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.mp-reveal-gift-ribbon { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #b06a2c; }
.mp-reveal-gift-title { font-size: 18px; font-weight: 600; color: #2a2320; margin-top: 4px; }
.mp-reveal-gift-code { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 14px; color: #4a4038; }
.mp-reveal-gift-code code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; background: #fff; border: 1px solid #e3d7c8; border-radius: 8px; padding: 4px 10px; letter-spacing: .06em; }
.mp-reveal-gift-copy { font-size: 12px; border: 1px solid #cbb79f; background: #fff; color: #8a5a2b; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.mp-reveal-gift-btn { display: inline-block; margin-top: 14px; background: #1d7a5f; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 10px; }
.mp-reveal-gift-btn:hover { background: #176a52; }
.mp-reveal-gift-note { margin-top: 12px; font-style: italic; color: #6a5f55; font-size: 14px; }
.mp-reveal-gift-qrtoggle { display: block; margin: 10px auto 0; background: none; border: none; color: #1d7a5f; font-weight: 600; font-size: 13px; cursor: pointer; padding: 4px 6px; }
.mp-reveal-gift-qrtoggle:hover { text-decoration: underline; }
.mp-reveal-gift-qr { margin-top: 8px; }
.mp-reveal-gift-qr-img { display: inline-block; background: #fff; padding: 10px; border: 1px solid #e4d8c6; border-radius: 12px; line-height: 0; }
.mp-reveal-gift-qr-img img, .mp-reveal-gift-qr-img svg { width: 160px; height: 160px; display: block; }
.mp-reveal-gift-qr-hint { margin-top: 8px; font-size: 12px; color: #8a7f73; }