/* ─────────────────────────────────────────────────────────────────────────────
   GOGULAT — gogulat.photobox.co.ua

   One idea: a sticker album. Bright candy pink, white cards that sit slightly
   crooked with a hard offset shadow, fat rounded buttons, and emoji doing the
   work illustrations would otherwise do. Nothing is subtle, on purpose — this
   is a thing you screenshot and send to somebody.

   No external asset besides the two web fonts. Everything else is generated.
   ────────────────────────────────────────────────────────────────────────────── */

:root {
    --pink: #ff2e88;
    --pink-lift: #ff5fa2;
    --pink-deep: #d4106a;
    --pink-soft: #ffd6e8;
    --pink-wash: #fff1f7;

    --lime: #b8ff4f;
    --sky: #63e2ff;
    --sun: #ffd83d;
    --grape: #9b5cff;

    --paper: #ffffff;
    --ink: #2b1420;
    --ink-soft: #7a5568;
    --ink-mute: #ab8b9b;

    --line: #ffd6e8;
    --line-strong: #ff9ac9;

    --radius: 20px;
    --radius-lg: 30px;
    --pill: 999px;

    --shell: 1120px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --bounce: cubic-bezier(.34, 1.56, .64, 1);

    /* The signature: a hard shadow rather than a blur, so cards read as stickers. */
    --pop: 6px 6px 0 var(--pink);
    --pop-sm: 4px 4px 0 var(--pink);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Declared on html ONLY. Putting it on html+body together makes two elements paint the same
       surface, and the copy then stops following the background. */
    background: var(--pink-wash);
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--ink);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

/* ── The backdrop ──────────────────────────────────────────────────────────── */

/* Three slow blobs. Fixed, so the page scrolls across them. */
.blobs {
    position: fixed;
    inset: -18vmax;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(32vmax 32vmax at 14% 10%, rgba(255, 46, 136, .22), transparent 62%),
        radial-gradient(28vmax 28vmax at 86% 22%, rgba(155, 92, 255, .16), transparent 60%),
        radial-gradient(38vmax 38vmax at 62% 96%, rgba(99, 226, 255, .18), transparent 64%);
    animation: blobdrift 26s var(--ease) infinite alternate;
}

@keyframes blobdrift {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(2%, 2%, 0) scale(1.1); }
}

/* Confetti dots scattered behind everything. */
.sprinkles {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    background-image:
        radial-gradient(5px 5px at 12% 22%, var(--pink-soft), transparent),
        radial-gradient(4px 4px at 47% 8%, var(--sun), transparent),
        radial-gradient(5px 5px at 78% 34%, var(--sky), transparent),
        radial-gradient(4px 4px at 26% 66%, var(--lime), transparent),
        radial-gradient(6px 6px at 63% 78%, var(--pink-soft), transparent),
        radial-gradient(4px 4px at 89% 61%, var(--grape), transparent);
    background-size: 640px 640px, 520px 520px, 780px 780px, 590px 590px, 700px 700px, 480px 480px;
}

@media (prefers-reduced-motion: reduce) {
    .blobs, .wobble, .float, .marquee-track { animation: none !important; }
    html { scroll-behavior: auto; }
}

/* ── Shell ─────────────────────────────────────────────────────────────────── */

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 22px; }
.shell-narrow { max-width: 760px; }

a { color: inherit; text-decoration: none; }

.display {
    font-family: 'Unbounded', 'Manrope', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.02;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pink);
    background: #fff;
    border: 2px solid var(--pink-soft);
    border-radius: var(--pill);
    padding: 6px 14px;
}

.hl {
    /* Highlighter behind a word, drawn low so it reads as marker pen. */
    background: linear-gradient(180deg, transparent 58%, var(--sun) 58%, var(--sun) 92%, transparent 92%);
    padding: 0 .06em;
}

.grad-text {
    background: linear-gradient(100deg, var(--pink) 0%, var(--grape) 60%, var(--sky) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Top bar ───────────────────────────────────────────────────────────────── */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(255, 241, 247, .82);
    border-bottom: 2px solid var(--line);
}

.topbar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 68px;
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 13px;
    display: grid; place-items: center;
    font-size: 20px;
    background: linear-gradient(135deg, var(--pink) 0%, var(--pink-lift) 100%);
    box-shadow: 3px 3px 0 var(--ink);
    transform: rotate(-6deg);
}
.brand-name {
    font-family: 'Unbounded', sans-serif;
    font-weight: 800;
    font-size: 1.06rem;
    letter-spacing: -.02em;
}
.brand-sub { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }

.topnav { display: flex; align-items: center; gap: 6px; }
.topnav a.quiet {
    color: var(--ink-soft); font-size: .9rem; font-weight: 700;
    padding: 9px 13px; border-radius: 12px;
    transition: color .18s, background .18s;
}
.topnav a.quiet:hover { color: var(--pink); background: #fff; }

@media (max-width: 620px) {
    .topnav a.quiet:not(.keep) { display: none; }
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font: inherit;
    font-weight: 800;
    font-size: .96rem;
    padding: 13px 26px;
    border-radius: var(--pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .14s var(--bounce), box-shadow .18s, background .2s, border-color .2s, opacity .2s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.btn:active { transform: translate(2px, 2px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

.btn-primary {
    color: #fff;
    background: linear-gradient(120deg, var(--pink) 0%, var(--pink-lift) 100%);
    border-color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
}
.btn-primary:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.btn-primary:active:not(:disabled) { box-shadow: 2px 2px 0 var(--ink); }

.btn-ghost {
    color: var(--ink);
    background: #fff;
    border-color: var(--line-strong);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--pink); color: var(--pink); }

.btn-lg { padding: 17px 34px; font-size: 1.06rem; }
.btn-sm { padding: 9px 16px; font-size: .84rem; }
.btn-block { width: 100%; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */

.card {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: var(--pop);
    padding: 28px;
}
.card-tight { padding: 20px; border-radius: var(--radius); box-shadow: var(--pop-sm); }
.card-soft { border-color: var(--line-strong); box-shadow: 5px 5px 0 var(--pink-soft); }

/* A gentle crookedness — enough to look hand-placed, not enough to look broken. */
.tilt-l { transform: rotate(-1.4deg); }
.tilt-r { transform: rotate(1.4deg); }

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.hero { padding: 72px 0 52px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }

.hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.5rem); margin: 20px 0 20px; }
.hero p.lede { font-size: clamp(1.02rem, 1.6vw, 1.16rem); color: var(--ink-soft); max-width: 32em; font-weight: 600; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }

.price-chip {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 11px 18px; border-radius: var(--pill);
    background: #fff; border: 2px dashed var(--line-strong);
    font-size: .88rem; font-weight: 700; color: var(--ink-soft);
}
.price-chip b { font-size: 1.06rem; color: var(--pink); font-weight: 800; }

.trust {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    margin-top: 26px; font-size: .86rem; font-weight: 700; color: var(--ink-soft);
}
.trust span { display: inline-flex; align-items: center; gap: 7px; }

/* ── The phone ─────────────────────────────────────────────────────────────── */

/* A phone-shaped frame. Used twice: beside the headline, and as the live preview
   in the builder. Both hold the real invitation markup, at real size. */
.phone-wrap { display: grid; place-items: center; position: relative; }

.phone {
    position: relative;
    width: 300px;
    max-width: 100%;
    aspect-ratio: 300 / 620;
    border-radius: 42px;
    border: 3px solid var(--ink);
    background: #fff;
    box-shadow: 10px 12px 0 var(--pink), 0 30px 60px -30px rgba(43, 20, 32, .55);
    overflow: hidden;
    animation: float 7s ease-in-out infinite alternate;
}
@keyframes float { from { transform: translateY(-9px) rotate(-1deg); } to { transform: translateY(9px) rotate(1deg); } }

/* The notch. Cosmetic, but the frame does not read as a phone without it. */
.phone::before {
    content: '';
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 92px; height: 20px; border-radius: var(--pill);
    background: var(--ink);
    z-index: 6;
}

.phone-screen { position: absolute; inset: 0; overflow: hidden; }

/* The notch is painted over the top of the screen, so the invitation's content
   has to start below it. Scoped to the frame — the real full-page invitation has
   no notch and must not carry the offset. */
.phone-screen .scr { padding-top: 46px; }

/* Stickers pinned around the phone. */
.sticker {
    position: absolute;
    display: grid; place-items: center;
    width: 62px; height: 62px;
    font-size: 30px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 20px;
    box-shadow: 3px 3px 0 var(--ink);
    z-index: 3;
}
.sticker.s1 { top: 6%; left: -6%; transform: rotate(-12deg); animation: wobble 4s ease-in-out infinite; }
.sticker.s2 { bottom: 16%; right: -7%; transform: rotate(10deg); animation: wobble 5.4s ease-in-out infinite .6s; }
.sticker.s3 { bottom: 3%; left: 2%; transform: rotate(6deg); animation: wobble 4.8s ease-in-out infinite 1.2s; }

@keyframes wobble {
    0%, 100% { transform: rotate(-10deg) translateY(0); }
    50%      { transform: rotate(6deg) translateY(-8px); }
}

.wobble { animation: wobble 4s ease-in-out infinite; }

/* ── Marquee ───────────────────────────────────────────────────────────────── */

.marquee {
    overflow: hidden;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    background: var(--pink);
    color: #fff;
    padding: 13px 0;
    /* Wider than the viewport, because rotating a full-width strip lifts its ends
       and leaves a triangle of background showing at each corner. */
    width: 106%;
    margin: 26px 0 26px -3%;
    transform: rotate(-1.2deg);
}
.marquee-track {
    display: flex;
    gap: 34px;
    width: max-content;
    animation: slide 26s linear infinite;
    font-family: 'Unbounded', sans-serif;
    font-weight: 700;
    font-size: .96rem;
    letter-spacing: .01em;
    white-space: nowrap;
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Sections ──────────────────────────────────────────────────────────────── */

.section { padding: 56px 0; }
.section-head { max-width: 660px; margin-bottom: 34px; }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 14px 0 12px; }
.section-head p { color: var(--ink-soft); font-size: 1rem; font-weight: 600; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.feature h3 { font-family: 'Unbounded', sans-serif; font-size: 1.02rem; margin: 14px 0 8px; font-weight: 700; letter-spacing: -.02em; }
.feature p { color: var(--ink-soft); font-size: .92rem; font-weight: 600; }
.feature-ico {
    width: 54px; height: 54px; border-radius: 18px;
    display: grid; place-items: center;
    font-size: 27px;
    background: var(--pink-wash);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--pink);
}

/* Numbered steps. */
.step-num {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    font-weight: 800;
    font-size: .92rem;
    margin-bottom: 14px;
}

/* Reveal-on-scroll. Progressive enhancement — the fallback adds .in immediately. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ── FAQ ───────────────────────────────────────────────────────────────────── */

.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details {
    background: #fff;
    border: 2px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 16px 20px;
    transition: border-color .18s;
}
.faq details[open] { border-color: var(--pink); box-shadow: var(--pop-sm); }
.faq summary {
    cursor: pointer;
    font-weight: 800;
    font-size: .98rem;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--pink); line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: 11px; color: var(--ink-soft); font-size: .92rem; font-weight: 600; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */

.field { margin-bottom: 20px; }
.field > label, .field-label {
    display: block;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .01em;
    margin-bottom: 8px;
}
.field .hint { font-size: .78rem; color: var(--ink-mute); margin-top: 7px; line-height: 1.5; font-weight: 600; }

input[type=text], input[type=email], input[type=password], textarea, select {
    width: 100%;
    font: inherit;
    font-weight: 600;
    font-size: .96rem;
    color: var(--ink);
    background: #fff;
    border: 2px solid var(--line-strong);
    border-radius: 16px;
    padding: 13px 16px;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}
input::placeholder, textarea::placeholder { color: var(--ink-mute); font-weight: 500; }
input:focus, textarea:focus, select:focus {
    border-color: var(--pink);
    box-shadow: 3px 3px 0 var(--pink-soft);
}
textarea { resize: vertical; min-height: 88px; line-height: 1.6; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Switches. A real checkbox underneath, so the label and keyboard both work. */
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
    position: relative; flex-shrink: 0;
    width: 50px; height: 30px; border-radius: var(--pill);
    background: #fff;
    border: 2px solid var(--ink);
    transition: background .2s;
}
.switch-track::after {
    content: '';
    position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--ink);
    transition: transform .22s var(--bounce), background .2s;
}
.switch input:checked + .switch-track { background: var(--pink); }
.switch input:checked + .switch-track::after { transform: translateX(20px); background: #fff; }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 4px var(--pink-soft); }
.switch-text b { display: block; font-size: .94rem; font-weight: 800; }
.switch-text span { display: block; font-size: .78rem; color: var(--ink-mute); font-weight: 600; }

/* ── Chips ─────────────────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 9px; }

.chip {
    display: inline-flex; align-items: center; gap: 7px;
    font: inherit; font-size: .88rem; font-weight: 700;
    padding: 9px 15px;
    border-radius: var(--pill);
    border: 2px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    transition: transform .14s var(--bounce), border-color .16s, background .16s, box-shadow .16s;
    -webkit-tap-highlight-color: transparent;
}
.chip:hover { border-color: var(--pink); transform: translateY(-2px); }
.chip.on {
    background: var(--pink);
    border-color: var(--ink);
    color: #fff;
    box-shadow: 3px 3px 0 var(--ink);
}
.chip .x { font-weight: 800; opacity: .6; }
.chip.add { border-style: dashed; color: var(--pink); }

/* Mascot picker. */
.mascots { display: flex; flex-wrap: wrap; gap: 8px; }
.mascot {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    font-size: 25px;
    border-radius: 15px;
    border: 2px solid var(--line-strong);
    background: #fff;
    cursor: pointer;
    transition: transform .14s var(--bounce), border-color .16s, box-shadow .16s;
}
.mascot:hover { transform: translateY(-3px) rotate(-6deg); }
.mascot.on { border-color: var(--ink); box-shadow: 3px 3px 0 var(--pink); background: var(--pink-wash); }

/* Theme swatches. */
.themes { display: flex; flex-wrap: wrap; gap: 10px; }
.theme-dot {
    width: 46px; height: 46px;
    border-radius: 15px;
    border: 2px solid var(--line-strong);
    cursor: pointer;
    transition: transform .14s var(--bounce), border-color .16s, box-shadow .16s;
}
.theme-dot:hover { transform: translateY(-3px); }
.theme-dot.on { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* ── Builder ───────────────────────────────────────────────────────────────── */

.compose-wrap { padding: 36px 0 80px; }
.compose-grid { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; }

/* The preview follows you down the form — watching your own edits land is the
   thing that makes somebody finish this page. */
.preview-rail { position: sticky; top: 88px; }

.block {
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: var(--pop);
    padding: 24px;
    margin-bottom: 20px;
}
.block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.block-head h2 { font-family: 'Unbounded', sans-serif; font-size: 1.06rem; font-weight: 700; letter-spacing: -.02em; }
.block-head .n {
    width: 30px; height: 30px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--pink);
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    font-size: .82rem;
    font-weight: 800;
}

.pay-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 26px;
    padding: 16px 20px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: var(--pop);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.pay-bar .sum b { font-family: 'Unbounded', sans-serif; font-size: 1.5rem; font-weight: 800; }
.pay-bar .sum span { display: block; font-size: .78rem; color: var(--ink-mute); font-weight: 700; }

.alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    border: 2px solid var(--pink);
    background: var(--pink-wash);
    font-size: .92rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Cover photo dropzone. */
.dropzone {
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    padding: 22px;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink-soft);
}
.dropzone:hover { border-color: var(--pink); background: var(--pink-wash); }
.cover-preview { position: relative; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--ink); }
.cover-preview img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.cover-preview button {
    position: absolute; top: 10px; right: 10px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid var(--ink); background: #fff; cursor: pointer;
    font-size: 15px; font-weight: 800; line-height: 1;
}

/* ── Sender's page ─────────────────────────────────────────────────────────── */

.mine-wrap { padding: 40px 0 80px; }

.link-box {
    display: flex; gap: 10px; align-items: center;
    background: var(--pink-wash);
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--pink-deep);
    word-break: break-all;
}
.link-box input {
    border: none; background: transparent; padding: 0; font-size: .9rem;
    font-weight: 700; color: var(--pink-deep); flex: 1; min-width: 0;
}
.link-box input:focus { box-shadow: none; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.stat {
    background: #fff; border: 2px solid var(--line-strong); border-radius: var(--radius);
    padding: 16px; text-align: center;
}
.stat b { display: block; font-family: 'Unbounded', sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.stat span { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); font-weight: 800; margin-top: 8px; }

.answer-card {
    background: linear-gradient(135deg, var(--pink) 0%, var(--pink-lift) 100%);
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: var(--pop);
    color: #fff;
    padding: 30px;
    text-align: center;
}
.answer-card h2 { font-family: 'Unbounded', sans-serif; font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; }
.answer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.answer-grid div {
    background: rgba(255, 255, 255, .18);
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: var(--radius);
    padding: 14px 10px;
}
.answer-grid small { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .82; font-weight: 800; }
.answer-grid b { display: block; font-size: 1.02rem; font-weight: 800; margin-top: 5px; }

.waiting { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink-soft); }
.dots { display: inline-flex; gap: 4px; }
.dots i {
    width: 8px; height: 8px; border-radius: 50%; background: var(--pink);
    animation: blink 1.4s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ── Small pages ───────────────────────────────────────────────────────────── */

.center-page {
    min-height: 72vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 60px 0;
}
.center-page .big { font-size: 76px; line-height: 1; margin-bottom: 18px; }
.center-page h1 { font-family: 'Unbounded', sans-serif; font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 12px; }
.center-page p { color: var(--ink-soft); font-weight: 600; max-width: 32em; margin: 0 auto 24px; }

/* ── Footer ────────────────────────────────────────────────────────────────── */

footer {
    border-top: 2px solid var(--line);
    background: #fff;
    padding: 28px 0;
    margin-top: 40px;
}
.foot-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    font-size: .84rem; font-weight: 700; color: var(--ink-mute);
}
.foot-in a:hover { color: var(--pink); }

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
    /* Decorative only, and they hang outside the phone by design — once the layout
       stacks there is no gutter left for them to hang into, and they push the page
       wider than the viewport. */
    .sticker { display: none; }
}

@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .compose-grid { grid-template-columns: 1fr; }
    .preview-rail { position: static; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .hero { padding: 46px 0 36px; }
}

@media (max-width: 560px) {
    .shell { padding: 0 16px; }
    .card { padding: 22px; }
    .block { padding: 18px; }
    .row-2 { grid-template-columns: 1fr; }
    .stat-row, .answer-grid { grid-template-columns: 1fr; }
    .btn-lg { padding: 15px 26px; font-size: 1rem; }
}