:root {
    --ink: #1a1714;
    --soft-ink: #2a2622;
    --muted: #564f48;
    --faint: #7a726a;
    --paper: #f6f3ee;
    --paper-deep: #efe9e1;
    --surface: #fffcf8;
    --surface-warm: #f1ebe3;
    --surface-rose: #f4ebe8;
    --surface-sky: #eceff2;
    --surface-cream: #f3eee6;
    --accent: #7f2740;
    --accent-soft: #a84d65;
    --line: #c9bdb0;
    --line-strong: #a89888;
    --field-bg: #ffffff;
    --field-bg-focus: #ffffff;
    --danger: #9b2c3c;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --space-section: clamp(64px, 9vw, 112px);
    --font-display: "Cormorant Garamond", "Times New Roman", serif;
    --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(1200px 600px at 12% -10%, rgba(143, 45, 69, 0.06), transparent 55%),
        radial-gradient(900px 500px at 100% 0%, rgba(90, 110, 130, 0.05), transparent 50%),
        var(--paper);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

*:not(input):not(textarea):not(select),
*:not(input):not(textarea):not(select)::before,
*:not(input):not(textarea):not(select)::after {
    box-shadow: none !important;
}

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

main { overflow: hidden; }

/* ── Header ── */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 16px clamp(20px, 4vw, 64px);
    background: rgba(250, 248, 245, 0.88);
    backdrop-filter: blur(20px);
    border-bottom: none;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--ink);
}

.brand-text {
    line-height: 1;
}

.brand-mark {
    flex: 0 0 auto;
    display: block;
}

.brand-text span { color: var(--accent); }

.topbar nav a.is-active {
    color: var(--ink);
}

.topbar nav,
.actions {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 28px);
    flex-wrap: wrap;
}

.topbar nav a,
.footer-col a {
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

.topbar nav a:hover,
.footer-col a:hover,
.section-head a:hover {
    color: var(--accent);
}

/* ── Layout containers ── */

.hero,
.page-hero,
.section-head,
.wall-grid,
.how,
.pricing,
.legal-note,
.filters,
.builder,
.story-layout,
.complaint,
.dashboard-grid,
.metrics,
.certificate,
.legal-doc,
.auth-grid,
.payment-panel,
.gallery-grid,
.timeline-section,
.greetings,
.manage-actions {
    width: min(1120px, calc(100% - 48px));
    margin-inline: auto;
}

/* ── Typography ── */

.eyebrow {
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
    font-family: var(--font-display);
    font-weight: 500;
    max-width: 900px;
    margin-bottom: 24px;
    font-size: clamp(48px, 6.5vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.02em;
}

h2 {
    font-family: var(--font-display);
    font-weight: 500;
    margin-bottom: 16px;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1;
    letter-spacing: -0.01em;
}

h3 {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hero-copy p:not(.eyebrow):not(.hero-brand),
.page-hero p,
.legal-note p {
    max-width: 640px;
    color: var(--muted);
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.65;
}

/* ── Buttons ── */

.button,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    color: var(--ink);
    background: transparent;
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
}

.button:hover,
button:hover { opacity: 0.85; }

.button.primary,
button.primary {
    color: #fff;
    background: var(--accent);
}

.button.primary:hover,
button.primary:hover { opacity: 0.92; }

.button.ghost {
    color: var(--muted);
    padding-left: 0;
    padding-right: 0;
}

.button.ghost:hover { color: var(--accent); opacity: 1; }

/* ── Hero ── */

.hero {
    min-height: min(86vh, 760px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    align-items: end;
    gap: clamp(32px, 5vw, 72px);
    padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 80px);
}

.hero-brand {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: none;
}

.hero-brand span { color: var(--accent); }

.hero-copy h1 {
    max-width: 14ch;
    margin-bottom: 18px;
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.05;
}

.hero-copy > p:not(.hero-brand):not(.eyebrow) {
    max-width: 36ch;
    margin-bottom: 28px;
    color: var(--muted);
    font-size: clamp(17px, 1.7vw, 19px);
}

.hero-panel {
    display: grid;
    gap: 0;
    min-height: min(68vh, 560px);
}

.mini-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(28px, 4vw, 44px);
    color: #fff;
    background: linear-gradient(165deg, #c47a8c 0%, #8f2d45 42%, #4e1624 100%);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: opacity 0.2s;
}

a.mini-card:hover { opacity: 0.94; }

.mini-card h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(34px, 4vw, 48px);
}

.mini-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    line-height: 1.5;
    max-width: 34ch;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-top: 8px;
}

.metrics div { padding: 16px 0; }

.metrics strong {
    display: block;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.metrics span,
.tag {
    color: var(--faint);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Section headers ── */

.section-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
    padding: var(--space-section) 0 40px;
}

.section-head a {
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Story wall grid ── */

.wall-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: var(--space-section);
}

.story-card {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    transition: opacity 0.2s;
    text-decoration: none;
}

.story-card-photo {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--surface-warm), var(--surface-rose));
    background-size: cover;
    background-position: center;
}

.story-card.free .story-card-photo {
    background: linear-gradient(135deg, var(--surface-cream), var(--surface-warm));
}

.story-card.standard .story-card-photo {
    background: linear-gradient(135deg, var(--surface-sky), var(--surface-warm));
}

.story-card.premium .story-card-photo {
    background: linear-gradient(135deg, var(--surface-rose), #e8d4d0);
}

.story-card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 10px;
    padding: 18px 0 8px;
}

.story-card:hover { opacity: 0.88; }

.story-card.premium { grid-column: span 2; }

.empty-wall {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 18px;
}

.story-card h3 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
}

.story-card-body p,
.story-card-body > div:last-child {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.story-card-body > div:last-child {
    color: var(--faint);
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* ── How it works ── */

.how,
.pricing,
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding-bottom: var(--space-section);
}

.how div,
.pricing article,
.dashboard-grid article {
    padding: 8px 0 28px;
    border-top: none;
}

.dashboard-grid article > h2 {
    font-size: clamp(24px, 3vw, 32px);
    margin-bottom: 20px;
}

.how span,
.step {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--accent);
    background: var(--surface-warm);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.how p,
.pricing article p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.pricing article strong {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* ── Legal note ── */

.legal-note {
    padding: 48px 0 var(--space-section);
    margin-bottom: 0;
}

/* ── Page hero (inner pages) ── */

.page-hero.compact {
    padding: clamp(56px, 8vw, 88px) 0 40px;
}

.page-hero.compact h1 {
    font-size: clamp(40px, 5.5vw, 68px);
}

/* ── Forms ── */

.filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 16px;
    margin: 32px auto;
    align-items: end;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    width: 100%;
    min-height: 48px;
    padding: 12px 2px 11px;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.32);
    border-radius: 0;
    font: inherit;
    transition: border-color 0.18s ease, background 0.18s ease;
    appearance: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--faint);
    opacity: 0.75;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0;
    border: 1.5px solid rgba(127, 39, 64, 0.35);
    border-radius: 4px;
    background: transparent;
    accent-color: var(--accent);
    appearance: auto;
    cursor: pointer;
    flex-shrink: 0;
}

input[type="radio"] {
    border-radius: 50%;
}

select {
    padding-right: 28px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236f6862' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    cursor: pointer;
}

input:hover:not([type="checkbox"]):not([type="radio"]):not(:disabled),
textarea:hover:not(:disabled),
select:hover:not(:disabled) {
    border-bottom-color: rgba(127, 39, 64, 0.4);
}

input:focus:not([type="checkbox"]):not([type="radio"]),
textarea:focus,
select:focus {
    outline: 0;
    border-bottom-color: var(--accent);
    background: transparent;
    box-shadow: none !important;
}

input:user-invalid:not(:focus):not([type="checkbox"]):not([type="radio"]),
textarea:user-invalid:not(:focus),
select:user-invalid:not(:focus) {
    border-bottom-color: var(--danger);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.55;
    padding-top: 10px;
}

label,
.field {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.field-title {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.field-req {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95em;
    cursor: help;
}

.field-hint {
    color: var(--faint);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.auth-grid form,
.payment-panel,
.builder > section,
.builder .create-step,
.filters {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.filters {
    padding: 0;
}

.builder {
    display: grid;
    gap: 40px;
    padding-bottom: var(--space-section);
}

.builder section,
.builder .create-step {
    padding: 8px 0 0;
}

.builder section + section {
    border-top: none;
}

.wizard-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto 8px;
}

.wizard-step {
    padding: 8px 14px;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.wizard-step:hover {
    background: transparent;
    color: var(--ink);
}

.wizard-step.active {
    color: var(--ink);
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

.wizard-step.done {
    color: var(--accent);
}

.step-actions,
.page-hero .actions,
.certificate .actions,
.payment-panel .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.create-step h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 500;
    margin: 8px 0 24px;
}

.builder section h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 500;
    margin: 0 0 24px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 8px 0 var(--space-section);
}

.grid {
    display: grid;
    gap: 20px 32px;
}

.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tariff-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.tariff-choices label,
.tariff-card {
    position: relative;
    min-height: 160px;
    align-content: start;
    padding: 20px 4px;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.18);
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.18s ease, opacity 0.2s;
}

.tariff-card:hover {
    opacity: 1;
    border-bottom-color: rgba(127, 39, 64, 0.4);
}

.tariff-choices input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.tariff-choices strong,
.tariff-card strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 500;
}

.tariff-card em {
    display: block;
    margin-bottom: 10px;
    color: var(--accent);
    font-style: normal;
    font-size: 22px;
    font-weight: 600;
}

.tariff-pick {
    display: none;
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tariff-choices label:has(input:checked),
.tariff-card:has(input:checked) {
    background: transparent;
    border-bottom-color: var(--accent);
    opacity: 1;
}

.tariff-choices label:has(input:checked) strong,
.tariff-card:has(input:checked) strong {
    color: var(--accent);
}

.tariff-card:has(input:checked) .tariff-pick {
    display: block;
}



.tariff-choices span {
    color: var(--muted);
}

.consent-checklist {
    display: grid;
    gap: 8px;
    margin: 20px 0 8px;
    padding: 8px 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

label.check {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0;
    padding: 8px 0;
    cursor: pointer;
    color: var(--ink);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
}

label.check:has(input:user-invalid) span {
    color: var(--danger);
}

label.check span {
    color: var(--muted);
}

label.check input[type="checkbox"] {
    margin-top: 2px;
}

label.check a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Couple page ── */

.couple-hero {
    width: min(1120px, calc(100% - 48px));
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
    margin: 40px auto;
    padding: clamp(40px, 5vw, 64px) 0;
}

.couple-hero.rose .photo-frame { background: var(--surface-rose); }
.couple-hero.sky .photo-frame { background: var(--surface-sky); }
.couple-hero.cream .photo-frame { background: var(--surface-cream); }
.couple-hero.mono .photo-frame { background: var(--surface-warm); }

.couple-meta {
    margin-top: 18px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}

.lead {
    max-width: 40ch;
    color: var(--soft-ink);
    font-size: 18px;
    line-height: 1.55;
}

.anniversary-line {
    margin-top: 14px;
    color: var(--accent);
    font-size: 15px;
    font-weight: 500;
}

.anniversary-line a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.photo-frame {
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--paper-deep);
    border-radius: var(--radius-lg);
}

.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-frame span {
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 500;
    color: var(--faint);
}

.story-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    padding: 48px 0 var(--space-section);
}

.story-layout article,
.story-layout aside {
    padding: 0;
}

.story-layout article p {
    color: var(--soft-ink);
    font-size: 17px;
    line-height: 1.75;
}

.story-layout aside {
    display: grid;
    gap: 10px;
    align-content: start;
}

.story-layout aside h3 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 4px;
}

.story-layout aside .button {
    justify-content: flex-start;
    padding-left: 0;
    min-height: 40px;
}

blockquote {
    margin: 32px 0;
    padding: 0;
    border: none;
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    font-style: italic;
    line-height: 1.35;
    color: var(--accent);
}

.phrase {
    color: var(--accent-soft);
    font-style: italic;
    font-size: 18px;
}

.qr-image {
    display: block;
    margin: 12px 0;
    border-radius: var(--radius-sm);
    background: var(--surface);
}

/* ── Complaint, dashboard, auth ── */

.complaint {
    margin-top: 48px;
    padding: 0 0 var(--space-section);
}

.complaint form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 32px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.complaint .field:has(textarea),
.complaint button {
    grid-column: 1 / -1;
}

.greeting-form {
    display: grid;
    gap: 16px;
    margin-top: 24px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    margin-bottom: var(--space-section);
}

.auth-grid.one {
    grid-template-columns: minmax(0, 480px);
}

.auth-grid form,
.payment-panel {
    display: grid;
    gap: 18px;
}

.payment-panel h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 500;
    margin: 0 0 4px;
}

.payment-test-note {
    margin: 0 0 8px;
    padding: 10px 14px;
    background: var(--surface-warm);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.payment-form {
    margin-top: 8px;
}

.inline-pay-form,
.payment-banner-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.inline-pay-form button,
.payment-banner-form button {
    margin: 0;
}

.payment-submit {
    min-height: 56px;
    padding-inline: 32px;
    font-size: 16px;
}

.payment-banner,
.dashboard-alert {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto 32px;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: transparent;
    border-top: none;
    border-bottom: none;
    border-radius: 0;
}

.payment-banner h2,
.dashboard-alert h2 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 500;
}

.payment-banner p,
.dashboard-alert p {
    margin: 0;
    color: var(--muted);
}

.dashboard-alert {
    grid-column: 1 / -1;
    background: transparent;
}

.pricing-card {
    display: grid;
    gap: 8px;
    align-content: start;
}

.pricing-card .button {
    margin-top: 12px;
    justify-self: start;
}

.pricing-card {
    padding: 8px 0 24px;
    border-top: none;
}

.pricing-head { padding-bottom: 8px; }

.payment-panel {
    margin-bottom: var(--space-section);
    padding: 40px 0;
}

.row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: none;
}

.row:last-child { border-bottom: none; }

.moderation-row {
    display: grid;
    grid-template-columns: 1fr 180px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: none;
}

.moderation-row span { font-weight: 600; }

.moderation-row input,
.moderation-row select,
.moderation-row button {
    min-height: 40px;
}

.row b {
    color: var(--accent);
    text-align: right;
    font-weight: 600;
}

.metrics {
    grid-template-columns: repeat(6, 1fr);
    margin: 32px auto;
    gap: 0;
}

.certificate {
    max-width: 720px;
    margin: 48px auto var(--space-section);
    padding: 48px 0;
    text-align: center;
    background: transparent;
    border-radius: 0;
    border-top: none;
}

.certificate h1 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 500;
    margin: 12px 0;
}

.certificate strong {
    display: block;
    margin: 24px auto;
    max-width: 420px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.cert-number {
    margin: 24px auto;
    padding: 0;
    width: max-content;
    max-width: 100%;
    background: transparent;
    border-radius: 0;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--accent);
}

.legal-doc {
    margin-bottom: var(--space-section);
    padding: 40px 0;
}

.legal-doc p,
.legal-doc li {
    color: var(--soft-ink);
    line-height: 1.75;
}

/* ── Notices ── */

.notice {
    width: min(1120px, calc(100% - 48px));
    margin: 16px auto 0;
    padding: 12px 0;
    background: transparent;
    border-radius: 0;
    border-bottom: none;
    font-size: 15px;
    font-weight: 500;
    color: #3d5235;
}

.notice.error {
    background: transparent;
    color: var(--accent);
}

.pagination {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto var(--space-section);
}

.pagination nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--soft-ink);
    text-decoration: none;
}

.pagination a:hover {
    background: var(--surface-warm);
}

.pagination span[aria-current="page"] {
    background: var(--ink);
    color: #fff;
}

/* ── Status badges ── */

.status-badge {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--muted);
}

.status-published,
.status-paid { color: #3d5235; }
.status-awaiting_moderation,
.status-pending,
.status-awaiting_partner { color: #6b5a3e; }
.status-awaiting_payment { color: #3d4f5c; }
.status-draft { color: var(--muted); }
.status-rejected,
.status-failed { color: var(--accent); }
.status-not_required { color: var(--faint); }

.share-panel .qr-image {
    margin-top: 8px;
    border-radius: var(--radius-sm);
}

/* ── Footer ── */

.footer {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr));
    gap: 32px 40px;
    padding: 48px clamp(20px, 4vw, 64px) 56px;
    margin-top: var(--space-section);
    border-top: none;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.footer-brand img {
    display: block;
}

.footer strong {
    font-size: 15px;
    font-weight: 700;
}

.footer p {
    max-width: 480px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.footer-col h3 {
    margin: 0 0 4px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}

.footer-pay .payment-logos {
    margin: 0;
}

.payment-logos-compact {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.story-card.is-placeholder {
    position: relative;
}

.story-card-photo-placeholder {
    background:
        linear-gradient(145deg, rgba(255,255,255,.35), transparent 55%),
        linear-gradient(165deg, #d9c4b8, #c9a090 45%, #8f2d45);
}

.story-card.theme-sky .story-card-photo-placeholder,
.mini-card.sky.is-placeholder {
    background:
        linear-gradient(145deg, rgba(255,255,255,.4), transparent 50%),
        linear-gradient(165deg, #c9d8e8, #7aa0c4 55%, #3d5f7a);
}

.story-card.theme-cream .story-card-photo-placeholder,
.mini-card.cream.is-placeholder {
    background:
        linear-gradient(145deg, rgba(255,255,255,.45), transparent 50%),
        linear-gradient(165deg, #f0e6d4, #d4b896 55%, #9a7b55);
}

.story-card.theme-mono .story-card-photo-placeholder,
.mini-card.mono.is-placeholder {
    background:
        linear-gradient(145deg, rgba(255,255,255,.25), transparent 50%),
        linear-gradient(165deg, #d8d4ce, #8a8680 55%, #3a3835);
}

.story-card.theme-rose .story-card-photo-placeholder,
.mini-card.rose.is-placeholder {
    background:
        linear-gradient(145deg, rgba(255,255,255,.35), transparent 55%),
        linear-gradient(165deg, #d9c4b8, #c9a090 45%, #8f2d45);
}

.mini-card.is-placeholder {
    background-image: linear-gradient(145deg, rgba(255,255,255,.35), transparent 55%), linear-gradient(165deg, #d9c4b8, #c9a090 45%, #8f2d45);
}

/* ── Gallery ── */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 auto 40px;
}

.gallery-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0;
}

/* ── Misc components ── */

.hidden { display: none !important; }

.row-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.row-actions a,
.row-actions button {
    min-height: 32px;
    padding: 0 10px;
    color: var(--muted);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
}

.row-actions a:hover,
.row-actions button:hover {
    color: var(--accent);
    opacity: 1;
}

.row-actions form { display: inline; }

.preview-card {
    background: var(--surface-warm);
    border-radius: var(--radius-md);
    padding: 28px;
    margin-bottom: 16px;
}

.muted {
    color: var(--muted);
    font-size: 14px;
}

/* ── Photo uploader ── */

.photo-uploader { margin: 20px 0 28px; }

.upload-zone {
    border: none;
    border-bottom: 1.5px dashed rgba(127, 39, 64, 0.28);
    border-radius: 0;
    padding: 28px 4px;
    text-align: left;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.upload-zone p { margin: 0 0 4px; }

.upload-zone span { color: var(--accent); }

.upload-zone.dragover,
.upload-zone:hover { background: var(--surface-rose); }

.upload-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.upload-preview-item {
    margin: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-warm);
}

.upload-preview-item img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}

.upload-preview-item .button.small {
    width: 100%;
    border-radius: 0;
    font-size: 12px;
    min-height: 36px;
    background: var(--surface);
}

.upload-progress {
    margin-top: 12px;
    background: var(--surface-warm);
    border-radius: 999px;
    height: 4px;
    overflow: hidden;
}

.upload-progress-bar {
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 0.2s;
}

.upload-progress [data-progress-label] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--faint);
}

.upload-error {
    margin-top: 12px;
    color: var(--accent);
    background: var(--surface-rose);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 14px;
}

/* ── Timeline & greetings ── */

.timeline-section {
    padding: 48px 0;
}

.timeline {
    display: grid;
    gap: 28px;
    padding-left: 0;
    border: none;
}

.timeline-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 24px;
    align-items: start;
}

.timeline-item time {
    color: var(--faint);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding-top: 4px;
}

.timeline-item h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
}

.timeline-item h3 a:hover { color: var(--accent); }

.timeline-item p {
    color: var(--muted);
    font-size: 14px;
    margin: 4px 0 0;
}

.greetings {
    padding: 48px 0 var(--space-section);
}

.greeting-item {
    background: var(--surface-warm);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 12px;
}

.greeting-item strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

.greeting-item p {
    margin: 0;
    color: var(--soft-ink);
    font-size: 15px;
    line-height: 1.55;
}

.manage-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 24px 0;
}

/* ── Legal & payments (T-Bank compliance) ── */

.legal-doc h2 {
    font-size: clamp(24px, 3vw, 34px);
    margin: 40px 0 16px;
}

.legal-doc h2:first-of-type {
    margin-top: 0;
}

.legal-doc p,
.legal-doc li {
    color: var(--soft-ink);
    font-size: 16px;
    line-height: 1.7;
}

.legal-doc ul {
    margin: 12px 0 20px;
    padding-left: 20px;
}

.legal-doc a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-callout {
    margin-bottom: 32px;
    padding: 20px 24px;
    background: var(--surface-warm);
    border-radius: var(--radius-md);
}

.legal-callout p {
    margin: 0;
    color: var(--soft-ink);
    font-size: 15px;
    line-height: 1.6;
}

.legal-divider {
    margin: 40px 0 20px;
    border: none;
    border-top: none;
}

.legal-updated {
    font-size: 14px;
}

.company-requisites p {
    margin: 6px 0;
    color: var(--soft-ink);
    font-size: 15px;
    line-height: 1.55;
}

.company-requisites.compact p {
    font-size: 14px;
}

.payment-logos {
    margin: 24px 0;
}

.payment-logos-label {
    display: block;
    margin-bottom: 10px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.payment-logos-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.pay-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--soft-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.pay-badge.mir { color: #0a6b4a; }
.pay-badge.visa { color: #1a1f71; }
.pay-badge.mc { color: #eb001b; }
.pay-badge.sbp { color: #5c2d91; }
.pay-badge.tbank,
.pay-badge.tpay { color: var(--ink); }

.payment-logos-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.payment-logos-note a {
    color: var(--accent);
}

.footer-contacts {
    margin: 8px 0 0;
    font-size: 14px;
}

.footer-contacts a {
    color: var(--muted);
}

.footer .payment-logos {
    margin-top: 20px;
}

.pricing-lead {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto 8px;
    text-align: left;
}

.create-hint {
    max-width: 42ch;
    margin: 0 0 24px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.create-step > .step {
    display: none;
}

.wizard-step.active {
    color: var(--ink);
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

.selected-tariff-bar {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto 16px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: transparent;
    border-radius: 0;
    border-bottom: none;
    font-size: 14px;
}

.selected-tariff-bar span {
    color: var(--muted);
}

.selected-tariff-bar strong {
    color: var(--ink);
    font-weight: 600;
}

.selected-tariff-bar .button {
    margin-left: auto;
    min-height: 36px;
    padding-inline: 14px;
    font-size: 13px;
}



/* ── Responsive ── */

@media (max-width: 920px) {
    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hero,
    .couple-hero,
    .story-layout {
        grid-template-columns: 1fr;
    }

    .wall-grid,
    .how,
    .pricing,
    .dashboard-grid,
    .auth-grid,
    .metrics,
    .filters,
    .tariff-choices,
    .grid.two,
    .grid.three {
        grid-template-columns: 1fr;
    }

    .wizard-nav {
        gap: 6px;
    }

    .wizard-step {
        padding: 6px 12px;
        font-size: 12px;
    }

    .hero-stats,
    .metrics {
        grid-template-columns: repeat(3, 1fr);
    }

    .moderation-row {
        grid-template-columns: 1fr;
    }

    .story-card.premium {
        grid-column: span 1;
    }

    .hero {
        min-height: auto;
        align-items: start;
    }

    .hero-panel {
        min-height: 320px;
    }

    .complaint form {
        grid-template-columns: 1fr;
    }

    .timeline-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (max-width: 520px) {
    .hero,
    .page-hero,
    .section-head,
    .wall-grid,
    .how,
    .pricing,
    .legal-note,
    .filters,
    .builder,
    .story-layout,
    .complaint,
    .dashboard-grid,
    .metrics,
    .certificate,
    .legal-doc,
    .auth-grid,
    .payment-panel,
    .couple-hero,
    .gallery-grid,
    .timeline-section,
    .greetings,
    .manage-actions {
        width: min(100% - 32px, 1120px);
    }

    .selected-tariff-bar,
    .create-hint {
        width: min(100% - 32px, 1120px);
    }

    h1 { font-size: 42px; }

    .hero-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .payment-banner,
    .dashboard-alert {
        width: min(100% - 32px, 1120px);
        flex-direction: column;
        align-items: flex-start;
    }

    .metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Features: map, share, gift ── */

.stories-map {
    width: min(100% - 48px, 1120px);
    margin: 0 auto 40px;
}

.stories-map .section-head {
    padding-top: 24px;
    padding-bottom: 16px;
}

.stories-map-svg {
    width: 100%;
    height: auto;
    display: block;
}

.stories-map-svg circle {
    transition: fill .2s ease;
}

.stories-map-svg a:hover circle {
    fill: var(--accent-soft);
}

.share-pack {
    display: grid;
    gap: 4px;
    margin: 8px 0 12px;
}

.gift-code-box {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    margin: 24px 0;
    padding: 0;
    background: transparent;
}

.gift-code-box strong {
    font-size: 32px;
    letter-spacing: 0.08em;
    font-family: var(--font-display);
    color: var(--accent);
}

.partner-confirm-block {
    display: grid;
    gap: 12px;
    margin: 18px 0;
    padding: 8px 0;
    background: transparent;
    border: none;
}

.pricing-gift {
    grid-column: 1 / -1;
    margin: 8px 0 0;
}

.pricing-gift a {
    color: var(--accent);
    font-weight: 600;
}

.payment-test-note {
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.preview-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 8px 0 16px;
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.18);
}

.upload-zone {
    border-radius: 0;
}

.selected-tariff-bar {
    background: transparent;
    border: none;
}

/* ── Искра ── */

.spark-hero .actions {
    margin-top: 16px;
}

.spark-arena {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto var(--space-section);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(16px, 3vw, 28px);
    align-items: stretch;
}

.spark-duel-panel {
    display: grid;
    gap: 16px;
    align-content: start;
}

.spark-duel-media {
    display: grid;
    align-content: end;
    min-height: min(52vh, 480px);
    padding: 28px 8px 24px;
    color: #fff;
    background:
        linear-gradient(165deg, rgba(20, 18, 16, 0.55) 12%, rgba(20, 18, 16, 0.18) 72%),
        var(--surface-warm);
    background-size: cover;
    background-position: center;
    text-decoration: none;
    transition: opacity 0.2s;
}

.spark-duel-media:hover {
    opacity: 0.94;
}

.spark-duel-city {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

.spark-duel-media h2 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.1;
}

.spark-duel-media p {
    margin: 0;
    max-width: 36ch;
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    line-height: 1.5;
}

.spark-vs {
    align-self: center;
    margin: 0;
    color: var(--faint);
    font-family: var(--font-display);
    font-size: 28px;
    font-style: italic;
}

.spark-vote-form {
    margin: 0;
}

.spark-pick {
    width: 100%;
    animation: sparkPulse 2.4s ease-in-out infinite;
}

@keyframes sparkPulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.spark-empty {
    width: min(640px, calc(100% - 48px));
    margin: 0 auto var(--space-section);
}

.spark-mini-top,
.spark-wall-block {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto 48px;
}

.spark-rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.spark-rank-list li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.14);
}

.spark-rank-place {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 500;
    color: var(--accent);
}

.spark-rank-list a {
    display: grid;
    gap: 2px;
    text-decoration: none;
}

.spark-rank-list strong {
    font-weight: 600;
}

.spark-rank-list em {
    color: var(--muted);
    font-style: normal;
    font-size: 14px;
}

.spark-rank-score {
    color: var(--faint);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.spark-rank-list-full .spark-rank-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.spark-rank-photo {
    width: 56px;
    height: 56px;
    background: var(--surface-warm) center/cover no-repeat;
}

.spark-badge {
    margin: 14px 0 0;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
}

.spark-badge a {
    color: var(--muted);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── SEO guide / FAQ ── */

.seo-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 13px;
}

.seo-breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
}

.seo-breadcrumbs a:hover {
    color: var(--accent);
}

.couple-hero .seo-breadcrumbs {
    grid-column: 1 / -1;
}

.seo-section,
.seo-faq,
.wall-seo,
.home-faq {
    width: min(760px, calc(100% - 48px));
    margin: 0 auto var(--space-section);
}

.seo-section h2,
.seo-faq h2,
.wall-seo h2,
.home-faq h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 4vw, 40px);
    margin: 0 0 14px;
}

.seo-section p,
.wall-seo p {
    margin: 0 0 12px;
    color: var(--text);
    line-height: 1.65;
}

.seo-faq-list {
    display: grid;
    gap: 10px;
}

.seo-faq-list details {
    padding: 14px 0;
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.12);
}

.seo-faq-list summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.seo-faq-list summary::-webkit-details-marker {
    display: none;
}

.seo-faq-list details p {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.seo-links {
    margin-top: 20px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.seo-links a {
    color: var(--accent);
}

@media (max-width: 820px) {
    .spark-arena {
        grid-template-columns: 1fr;
    }

    .spark-vs {
        text-align: center;
    }

    .spark-duel-media {
        min-height: 320px;
    }
}


/* ── Blog ── */

.blog-cats {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.blog-cats a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.blog-grid {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto var(--space-section);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}

.blog-card h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 28px;
    margin: 6px 0 10px;
    line-height: 1.15;
}

.blog-card h2 a { color: inherit; text-decoration: none; }
.blog-card p { color: var(--muted); margin: 0; line-height: 1.55; }

.blog-card-meta {
    margin-top: 14px;
    display: flex;
    gap: 14px;
    color: var(--faint);
    font-size: 13px;
}

.blog-article {
    width: min(760px, calc(100% - 48px));
    margin: 0 auto var(--space-section);
}

.blog-toc {
    margin: 0 0 32px;
    padding: 18px 0;
    border-top: 1.5px solid rgba(127, 39, 64, 0.12);
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.12);
}

.blog-toc ol { margin: 10px 0 0; padding-left: 20px; }
.blog-toc a { color: var(--accent); }

.blog-body-content {
    font-size: 18px;
    line-height: 1.7;
    color: var(--soft-ink);
}

.blog-body-content h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(26px, 3.5vw, 34px);
    margin: 36px 0 12px;
    scroll-margin-top: 24px;
}

.blog-body-content p { margin: 0 0 14px; }
.blog-body-content ul { margin: 0 0 16px; padding-left: 22px; }
.blog-body-content a { color: var(--accent); }

.blog-resonance,
.blog-letter,
.blog-comments {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1.5px solid rgba(127, 39, 64, 0.12);
}

.resonance-options {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.resonance-btn {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    text-align: left;
    padding: 14px 0;
    border: none;
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.14);
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.resonance-btn:disabled { opacity: 0.85; cursor: default; }
.resonance-btn em { color: var(--accent); font-style: normal; font-weight: 600; }

.blog-form {
    display: grid;
    gap: 14px;
    margin: 16px 0 24px;
}

.blog-form label {
    display: grid;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

.blog-form input,
.blog-form textarea {
    font: inherit;
    border: none;
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.22);
    background: transparent;
    padding: 8px 0;
    color: var(--ink);
}

.blog-comment,
.blog-letter-list li {
    padding: 14px 0;
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.1);
}

.blog-letter-list { list-style: none; padding: 0; }
.blog-related { padding-left: 18px; }
.blog-related a { color: var(--accent); }


/* ── Conversion home + fast create ── */

.hero-bleed {
    position: relative;
    width: 100%;
    min-height: min(88vh, 760px);
    display: grid;
    place-items: stretch;
    overflow: visible;
    margin: 0;
    color: #fff7f2;
    background: #3a1a24;
}

.hero-bleed-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        linear-gradient(152deg, #5c1f32 0%, #7a2a40 32%, #3d2a34 64%, #1e2836 100%);
    pointer-events: none;
}

.hero-bleed-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.55;
    animation: hero-orb 14s ease-in-out infinite alternate;
}

.hero-bleed-orb-a {
    width: min(54vw, 520px);
    height: min(54vw, 520px);
    top: -12%;
    right: -8%;
    background: radial-gradient(circle, rgba(255, 196, 176, 0.42), transparent 68%);
}

.hero-bleed-orb-b {
    width: min(46vw, 420px);
    height: min(46vw, 420px);
    bottom: -18%;
    left: -10%;
    background: radial-gradient(circle, rgba(120, 150, 180, 0.35), transparent 70%);
    animation-delay: -4s;
}

.hero-bleed-wash {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 520px at 18% 20%, rgba(255, 248, 242, 0.14), transparent 55%),
        linear-gradient(180deg, rgba(20, 14, 18, 0.15) 0%, transparent 35%, rgba(14, 12, 16, 0.45) 100%);
}

.hero-bleed-watermark {
    position: absolute;
    left: 50%;
    bottom: -4%;
    margin: 0;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: clamp(7rem, 22vw, 16rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.8;
    color: rgba(255, 247, 242, 0.07);
    white-space: nowrap;
    user-select: none;
    animation: hero-watermark 18s ease-in-out infinite alternate;
}

.hero-bleed-frame {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 7vw, 88px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(36px, 6vw, 80px);
    align-items: end;
}

.hero-bleed-copy {
    display: grid;
    align-content: end;
    gap: 0;
    max-width: 34rem;
}

.hero-bleed .hero-brand {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: clamp(64px, 10vw, 118px);
    font-weight: 500;
    line-height: 0.88;
    letter-spacing: -0.035em;
    color: #fff8f3;
}

.hero-bleed .hero-brand span {
    color: #f0b4c0;
}

.hero-bleed-copy h1 {
    max-width: 13ch;
    margin: 0 0 16px;
    font-size: clamp(28px, 3.8vw, 44px);
    line-height: 1.08;
    font-weight: 500;
    color: #fff8f3;
}

.hero-bleed .hero-lead {
    max-width: 32ch;
    margin: 0 0 30px;
    color: rgba(255, 247, 242, 0.92);
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.55;
}

.hero-bleed .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
}

.hero-bleed .button.hero-cta {
    background: #fff8f3;
    color: var(--accent);
    border: 1.5px solid #fff8f3;
}

.hero-bleed .button.hero-cta:hover {
    opacity: 0.94;
}

.hero-bleed .button.hero-cta-ghost {
    color: #fff8f3;
    border-bottom: 1px solid rgba(255, 248, 243, 0.45);
    border-radius: 0;
    padding-bottom: 2px;
}

.hero-bleed .button.hero-cta-ghost:hover {
    color: #fff;
    border-bottom-color: #fff;
    opacity: 1;
}

.hero-bleed-sample {
    justify-self: end;
    width: min(100%, 28rem);
    padding: 0 0 8px;
    color: #fff8f3;
    border-bottom: 1px solid rgba(255, 247, 242, 0.22);
}

.hero-bleed-sample-brand {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: clamp(16px, 1.6vw, 20px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 247, 242, 0.72);
}

.hero-bleed-names {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: clamp(42px, 5.6vw, 72px);
    font-weight: 500;
    line-height: 0.94;
    letter-spacing: -0.02em;
}

.hero-bleed-line {
    margin: 0 0 18px;
    color: rgba(255, 247, 242, 0.72);
    font-size: 15px;
}

@keyframes hero-orb {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-3%, 4%, 0) scale(1.08); }
}

@keyframes hero-watermark {
    from { transform: translateX(-52%); }
    to { transform: translateX(-48%); }
}

.brand-bar {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto var(--space-section);
    padding: 26px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 28px;
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.12);
    color: var(--muted);
    font-size: 15px;
}

.brand-bar strong {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 1.2em;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.proof-line {
    width: min(1120px, calc(100% - 48px));
    margin: -24px auto var(--space-section);
    color: var(--faint);
    font-size: 14px;
}

.story-card-photo-placeholder {
    position: relative;
    display: grid;
    place-items: end start;
    padding: 18px;
    background:
        linear-gradient(160deg, rgba(127,39,64,0.16), rgba(90,110,130,0.12)),
        var(--surface-warm);
}

.placeholder-mark {
    font-family: var(--font-display);
    font-size: 22px;
    color: rgba(127, 39, 64, 0.45);
    letter-spacing: 0.04em;
}

.story-card.is-placeholder.theme-sky .story-card-photo-placeholder {
    background: linear-gradient(160deg, rgba(90,110,130,0.2), rgba(127,39,64,0.08)), var(--surface-sky);
}
.story-card.is-placeholder.theme-cream .story-card-photo-placeholder {
    background: linear-gradient(160deg, rgba(180,140,90,0.18), rgba(127,39,64,0.08)), var(--surface-cream);
}
.story-card.is-placeholder.theme-mono .story-card-photo-placeholder {
    background: linear-gradient(160deg, rgba(40,36,32,0.14), rgba(127,39,64,0.08)), var(--surface-warm);
}

.create-brand {
    margin: 0 0 14px !important;
    font-size: clamp(48px, 8vw, 76px) !important;
    letter-spacing: -0.03em !important;
}

.create-hero {
    width: min(760px, calc(100% - 48px));
    margin: 36px auto 24px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.12);
}

.create-hero h1 {
    font-size: clamp(32px, 5vw, 44px);
    max-width: 14ch;
    margin-bottom: 10px;
}

.create-hero > p:last-child {
    margin: 0;
    color: var(--muted);
    max-width: 40ch;
}

.create-fast {
    width: min(760px, calc(100% - 48px));
    margin: 0 auto 80px;
    display: grid;
    gap: 36px;
}

.create-panel {
    padding-top: 8px;
    border-top: 1.5px solid rgba(127, 39, 64, 0.12);
}

.create-panel h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 3.5vw, 36px);
    margin: 0 0 18px;
}

.create-more {
    margin-top: 12px;
    color: var(--muted);
}

.create-more summary { cursor: pointer; font-weight: 600; }

.tariff-pills {
    display: grid;
    gap: 0;
}

.tariff-pill {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    padding: 16px 0;
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.14);
    cursor: pointer;
    transition: color 0.2s;
}

.tariff-pill input { position: absolute; opacity: 0; pointer-events: none; }
.tariff-pill strong { font-size: 17px; }
.tariff-pill em { font-style: normal; color: var(--accent); font-weight: 700; }
.tariff-pill span { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.tariff-pill.is-selected strong,
.tariff-pill:has(input:checked) strong { color: var(--accent); }

.create-submit {
    margin-top: 18px;
    width: 100%;
}

.create-foot { margin-top: 10px; }

.preview-card {
    min-height: 88px;
    margin-bottom: 18px;
    padding: 20px 0;
    border-top: 1.5px solid rgba(127, 39, 64, 0.12);
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.12);
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
}

.preview-card p {
    margin: 8px 0 0;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--muted);
    font-weight: 400;
}

.how-tight { grid-template-columns: repeat(3, 1fr); }

.home-blog-grid {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto var(--space-section);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.home-blog-card {
    display: grid;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    padding-bottom: 14px;
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.14);
}

.home-blog-card strong {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
}

.home-blog-card span {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}

.convert-band {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto var(--space-section);
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    border-top: 1.5px solid rgba(127, 39, 64, 0.12);
    border-bottom: 1.5px solid rgba(127, 39, 64, 0.12);
}

.convert-band .eyebrow {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 8px;
}

.convert-band h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(32px, 4.2vw, 46px);
    margin: 0 0 8px;
}

.convert-band p { margin: 0; color: var(--muted); max-width: 46ch; }

@keyframes rise-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.reveal-up {
    animation: rise-in 0.75s ease both;
}

.reveal-up.delay-1 { animation-delay: 0.08s; }
.reveal-up.delay-2 { animation-delay: 0.16s; }
.reveal-up.delay-3 { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
    .reveal-up,
    .hero-bleed-orb,
    .hero-bleed-watermark {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 1080px) {
    .hero-bleed {
        min-height: auto;
    }
    .hero-bleed-frame {
        width: min(1180px, calc(100% - 40px));
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 40px 0 44px;
        align-items: start;
    }
    .hero-bleed-sample {
        justify-self: stretch;
        width: 100%;
    }
    .hero-bleed .hero-brand {
        font-size: clamp(56px, 16vw, 92px);
    }
    .hero-bleed-names {
        font-size: clamp(36px, 10vw, 56px);
    }
    .hero-bleed-watermark {
        font-size: clamp(5.5rem, 28vw, 10rem);
        bottom: -2%;
    }
    .how-tight,
    .home-blog-grid {
        grid-template-columns: 1fr;
    }
    .convert-band {
        flex-direction: column;
        align-items: flex-start;
    }
    .brand-bar { flex-direction: column; }
}