/*
 * v4-end.css — the end of the page: questions.md, the closing call to action,
 * and the footer with the big "romka" wordmark.
 */

/* =========================== questions.md =========================== */

.v4-faq {
    padding: 110px 24px 120px;
    background-color: #fdf1cf;
    background-image: radial-gradient(rgba(140, 95, 0, .16) 1px, transparent 1.2px);
    background-size: 22px 22px;
}

.v4-faq-title { max-width: 900px; margin: 0 auto 46px; text-align: center; font-size: clamp(2.3rem, 5.6vw, 4.4rem); font-weight: 600; line-height: 1.02; letter-spacing: -.02em; }

.v4-faq-window { width: min(1180px, 100%); margin: 0 auto; }
.v4-faq-window .v4-window-bar { justify-content: flex-start; }
.v4-faq-window .v4-window-bar span { text-align: center; }
.v4-faq-window .v4-window-bar em { background: #fff; box-shadow: 0 0 0 1px rgba(24, 38, 43, .12) inset; }
.v4-faq-window .v4-window-bar em::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--v4-yellow-lo); }

.v4-faq-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(24, 38, 43, .12) inset;
}
.v4-faq-search:focus-within { box-shadow: 0 0 0 2px var(--v4-yellow) inset; }
.v4-faq-search svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--v4-muted); stroke-width: 2; stroke-linecap: round; }
.v4-faq-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--v4-ink); font: 500 1.02rem var(--v4-font); }
.v4-faq-search input::placeholder { color: #a3adb0; }

.v4-faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--v4-line); }

.v4-faq-card { padding: 24px 24px 26px; border-right: 1px solid var(--v4-line); border-bottom: 1px solid var(--v4-line); }
.v4-faq-card:nth-child(3n) { border-right: 0; }
.v4-faq-card[hidden] { display: none; }

.v4-faq-card h3 { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; font-size: 1.25rem; font-weight: 600; line-height: 1.25; }

.v4-faq-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(24, 38, 43, .12), 0 2px 4px rgba(24, 38, 43, .08);
}
.v4-faq-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--v4-ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the mini diagram on a dotted panel */
.v4-faq-diagram {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 6px;
    min-height: 118px;
    margin-bottom: 18px;
    padding: 18px 14px;
    border-radius: 14px;
    background-color: #f6f3ec;
    background-image: radial-gradient(rgba(24, 38, 43, .12) 1px, transparent 1.2px);
    background-size: 14px 14px;
    box-shadow: 0 0 0 1px rgba(24, 38, 43, .08) inset;
}

.v4-q-node {
    padding: 6px 11px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(24, 38, 43, .14), 0 3px 6px -3px rgba(24, 38, 43, .2);
    color: var(--v4-ink-2);
    font: 500 .8rem var(--v4-mono);
    white-space: nowrap;
}
.v4-q-node--hi { background: var(--v4-yellow-hi); box-shadow: 0 0 0 1px rgba(150, 85, 0, .3); color: var(--v4-ink); }
.v4-q-node--ok { background: #dff6e7; box-shadow: 0 0 0 1px rgba(47, 158, 68, .35); color: #1f6b38; }

/* flows read top to bottom, so no arrow is ever left hanging at the end of a line */
.v4-faq-diagram:not(.v4-faq-diagram--wrap) { flex-direction: column; gap: 4px; }
.v4-q-arrow { position: relative; width: 2px; height: 12px; background: rgba(24, 38, 43, .3); }
.v4-q-arrow::after { content: ''; position: absolute; left: -3px; bottom: -4px; border: 4px solid transparent; border-top: 5px solid rgba(24, 38, 43, .3); border-bottom: 0; }

.v4-faq-card p { margin: 0; color: var(--v4-muted); font-size: 1rem; line-height: 1.6; }
.v4-faq-card strong { color: var(--v4-ink); font-weight: 600; }
.v4-faq-card a,
.v4-faq-empty a { color: var(--v4-ink); text-decoration-color: var(--v4-yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }

.v4-faq-empty { margin: 0; padding: 40px 20px; text-align: center; color: var(--v4-muted); font-size: 1.1rem; }

/* =========================== closing =========================== */

.v4-closing {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 78vh;
    padding: 110px 24px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.v4-closing-bg img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.v4-closing::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 50%, rgba(30, 18, 6, .2), rgba(30, 18, 6, .55)); }

.v4-closing h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.02em;
    text-shadow: 0 2px 2px rgba(40, 20, 0, .3), 0 14px 40px rgba(40, 20, 0, .45);
    text-wrap: balance;
}

.v4-closing .v4-cta { margin-top: 40px; }
.v4-closing .v4-btn--glass svg { width: 18px; height: 18px; }
.v4-closing .v4-btn--glass.is-copied { background: #dff6e7; }

.v4-closing-sub { margin: 26px 0 0; color: rgba(255, 255, 255, .92); font-size: 1.05rem; text-shadow: 0 1px 6px rgba(40, 20, 0, .6); }
.v4-closing-sub a { color: #fff; text-decoration-color: var(--v4-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.v4-copy-handle {
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    text-decoration: underline;
    text-decoration-color: var(--v4-yellow);
    text-decoration-thickness: 2px;
    text-shadow: inherit;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* =========================== footer =========================== */

.v4-footer {
    position: relative;
    padding: 80px 24px 34px;
    background: radial-gradient(90% 60% at 50% 100%, rgba(255, 194, 71, .16), transparent 70%), #12161d;
    color: #e9edf2;
    overflow: hidden;
}

.v4-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; max-width: 1240px; margin: 0 auto; }
.v4-footer-brand { max-width: 330px; }
.v4-footer-brand .v4-app { font-size: 1.2rem; }
.v4-footer-brand p { margin: 14px 0 0; color: #9aa5b4; line-height: 1.6; }

.v4-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 30px 40px; }
.v4-footer-cols h3 { margin: 0 0 14px; color: var(--v4-yellow); font: 600 .9rem var(--v4-font); }
.v4-footer-cols a { display: block; margin: 0 0 10px; color: #e9edf2; text-decoration: none; font-size: 1.02rem; }
.v4-footer-cols a:hover { color: var(--v4-yellow-hi); }

/* the big wordmark: white letters with a stepped golden extrusion */
.v4-wordmark {
    margin: clamp(80px, 9vw, 130px) 0 10px;
    color: #fff;
    font-size: clamp(6rem, 26vw, 22rem);
    font-weight: 600;
    line-height: .9;
    letter-spacing: -.04em;
    text-align: center;
    user-select: none;
    text-shadow:
        1px 1px 0 #ffe7a6, 2px 2px 0 #ffde8e, 3px 3px 0 #ffd477, 4px 4px 0 #fdca62,
        5px 5px 0 #f7bf50, 6px 6px 0 #f0b33f, 7px 7px 0 #e6a531, 8px 8px 0 #d99626,
        9px 9px 0 #c9861d, 10px 10px 0 #b67616,
        14px 18px 30px rgba(0, 0, 0, .55);
}

.v4-wordmark-perch { position: relative; display: inline-block; }
.v4-wordmark-perch img {
    position: absolute;
    left: 50%;
    bottom: 82%;
    width: .36em;
    height: .36em;
    transform: translateX(-38%) rotate(-8deg);
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
}

@media (prefers-reduced-motion: no-preference) {
    .v4-wordmark-perch img { animation: v4-perch 5s ease-in-out infinite; transform-origin: 50% 100%; }
}
@keyframes v4-perch {
    0%, 70%, 100% { transform: translateX(-38%) rotate(-8deg); }
    78% { transform: translateX(-38%) translateY(-10%) rotate(4deg); }
    86% { transform: translateX(-38%) rotate(-12deg); }
}

.v4-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 20px;
    max-width: 1240px;
    margin: 0 auto;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #8a95a5;
    font-size: .92rem;
}
.v4-footer-bottom a { color: #c9d1dc; }

/* =========================== small screens =========================== */

@media (max-width: 980px) {
    .v4-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v4-faq-card:nth-child(3n) { border-right: 1px solid var(--v4-line); }
    .v4-faq-card:nth-child(2n) { border-right: 0; }
    .v4-footer-cols { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

@media (max-width: 640px) {
    .v4-faq { padding: 80px 14px 90px; }
    .v4-faq-grid { grid-template-columns: 1fr; }
    .v4-faq-card { border-right: 0 !important; padding: 20px 16px 22px; }
    .v4-faq-search { margin: 10px; }
    .v4-closing { min-height: 0; padding: 90px 18px; }
    .v4-closing .v4-btn--glass { font-size: 1rem; }
    .v4-footer { padding-top: 60px; }
    .v4-wordmark { margin-top: 60px; }
}