/**
 * Customer-facing utility pages — Design System v3.
 * Covers reading, pricing, authentication, payment waiting and error states.
 */

.about-page,
.legal-page,
.pricing-page,
.auth-page,
.waiting-page,
.error-page {
    background: var(--ds-white);
    color: var(--ds-black);
    font-family: var(--ds-font-text);
}

/* Reading pages: about, privacy and offer. */
.about-page .doc,
.legal-page .doc {
    width: min(100%, 880px);
    margin: 0 auto;
    padding: clamp(32px, 6vw, 88px) var(--ds-page-gutter) 112px;
}

.about-page .back,
.legal-page .back {
    display: inline-block;
    margin: 0 0 48px;
    color: var(--ds-black);
    font: var(--ds-weight-semibold) 13px/1.2 var(--ds-font-text);
    text-decoration-color: var(--ds-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.about-page h1,
.legal-page h1 {
    max-width: 12ch;
    margin: 0 0 36px;
    color: var(--ds-black);
    font: 400 clamp(44px, 7vw, 78px)/1 var(--ds-font-display);
    letter-spacing: -.045em;
}

.about-page h2,
.legal-page h2 {
    margin: 52px 0 16px;
    color: var(--ds-black);
    font: 400 clamp(25px, 3.2vw, 36px)/1.1 var(--ds-font-display);
    letter-spacing: -.025em;
}

.about-page p,
.about-page li,
.legal-page p,
.legal-page li {
    color: var(--ds-ink);
    font: 450 16px/1.72 var(--ds-font-text);
}

.about-page p,
.legal-page p { margin: 0 0 16px; }
.legal-page ul { margin: 0 0 20px; padding-left: 22px; }
.legal-page li { margin-bottom: 9px; }
.about-page a,
.legal-page a { color: inherit; text-decoration-color: var(--ds-blue); text-underline-offset: 4px; }

.about-page .lead {
    margin: 0 0 48px;
    padding: 28px 30px;
    border-left: 5px solid var(--ds-pink);
    background: var(--ds-lilac-soft);
    color: var(--ds-black);
    font-size: clamp(18px, 2.1vw, 22px);
    line-height: 1.55;
}

.about-page .contacts {
    margin-top: 56px;
    padding: 28px 30px;
    border: 1px solid var(--ds-black);
    background: var(--ds-lilac);
}

.about-page .contacts p:last-child { margin-bottom: 0; }
.about-page .cta {
    display: inline-flex;
    min-height: 52px;
    margin-top: 28px;
    padding: 15px 24px;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-control);
    background: var(--ds-blue);
    color: var(--ds-white);
    font: var(--ds-weight-bold) 15px/1 var(--ds-font-text);
    text-decoration: none;
}
.about-page .cta:hover { background: var(--ds-blue-dark); }

.legal-page .subtitle {
    margin: -18px 0 50px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ds-black);
    color: var(--ds-muted);
    font-size: 13px;
}

/* Pricing: one editorial table, not three floating premium cards. */
.pricing-page .nav {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 20px var(--ds-page-gutter);
    border-bottom: 1px solid var(--ds-line);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
}
.pricing-page .nav-inner { width: min(100%, var(--ds-page-max)); margin: 0 auto; }
.pricing-page .nav-logo {
    color: var(--ds-black);
    font: 400 25px/1 var(--ds-font-display);
    letter-spacing: -.04em;
    text-decoration: none;
    text-transform: none;
}
.pricing-page .page {
    width: min(100%, var(--ds-page-max));
    margin: 0 auto;
    padding: clamp(56px, 8vw, 104px) var(--ds-page-gutter) 112px;
}
.pricing-page .page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
    gap: 48px;
    align-items: end;
    margin-bottom: 52px;
    text-align: left;
}
.pricing-page .page-tag {
    grid-column: 1 / -1;
    margin-bottom: -26px;
    color: var(--ds-blue);
    font: var(--ds-weight-bold) 12px/1.2 var(--ds-font-text);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.pricing-page .page-title {
    margin: 0;
    color: var(--ds-black);
    font: 400 clamp(48px, 7vw, 92px)/.98 var(--ds-font-display);
    letter-spacing: -.055em;
}
.pricing-page .page-sub {
    max-width: 38ch;
    margin: 0;
    color: var(--ds-ink);
    font: 500 17px/1.55 var(--ds-font-text);
}
.pricing-page .tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 48px;
    border: 1px solid var(--ds-black);
}
.pricing-page .tier-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 570px;
    padding: 30px 28px;
    flex-direction: column;
    border: 0;
    border-left: 1px solid var(--ds-black);
    border-radius: 0;
    background: var(--ds-white);
    color: var(--ds-black);
    transform: none;
}
.pricing-page .tier-card:first-child { border-left: 0; }
.pricing-page .tier-card.featured {
    padding: 30px 28px;
    border: 0;
    border-left: 1px solid var(--ds-black);
    background: var(--ds-blue);
    color: var(--ds-white);
    transform: none;
}
.pricing-page .tier-badge {
    position: static;
    align-self: flex-start;
    margin: 0 0 18px;
    padding: 0;
    transform: none;
    border-radius: 0;
    background: transparent;
    color: var(--ds-pink);
    font: var(--ds-weight-bold) 11px/1.2 var(--ds-font-text);
    letter-spacing: .12em;
}
.pricing-page .tier-anchor {
    min-height: 13px;
    margin: 0 0 18px;
    color: var(--ds-blue);
    font: var(--ds-weight-bold) 11px/1.2 var(--ds-font-text);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.pricing-page .tier-card.featured .tier-anchor,
.pricing-page .tier-card.featured .tier-name,
.pricing-page .tier-card.featured .tier-desc,
.pricing-page .tier-card.featured .tier-price,
.pricing-page .tier-card.featured .tier-price span,
.pricing-page .tier-card.featured .tier-once,
.pricing-page .tier-card.featured .tier-features li { color: var(--ds-white); }
.pricing-page .tier-name {
    margin: 0 0 10px;
    color: var(--ds-black);
    font: 400 29px/1.08 var(--ds-font-display);
}
.pricing-page .tier-desc { min-height: 84px; margin: 0 0 22px; color: var(--ds-muted); font: 450 14px/1.5 var(--ds-font-text); }
.pricing-page .tier-price { margin: 0; color: var(--ds-blue); font: 400 52px/1 var(--ds-font-display); }
.pricing-page .tier-price span { color: var(--ds-black); font: 500 16px/1 var(--ds-font-text); }
.pricing-page .tier-once { margin: 8px 0 24px; color: var(--ds-muted); font-size: 12px; }
.pricing-page .tier-features { flex: 1; margin: 0 0 28px; padding: 20px 0 0; border-top: 1px solid currentColor; list-style: none; }
.pricing-page .tier-features li { position: relative; padding: 6px 0 6px 18px; color: var(--ds-ink); font: 450 13px/1.45 var(--ds-font-text); }
.pricing-page .tier-features li::before { content: '→'; position: absolute; left: 0; color: var(--ds-pink); }
.pricing-page .tier-features li.disabled { opacity: .45; }
.pricing-page .tier-features li.disabled::before { content: '—'; }
.pricing-page .tier-btn {
    width: 100%;
    min-height: 50px;
    padding: 14px 18px;
    border: 1px solid var(--ds-blue);
    border-radius: var(--ds-radius-control);
    background: var(--ds-blue);
    color: var(--ds-white);
    font: var(--ds-weight-bold) 14px/1 var(--ds-font-text);
    cursor: pointer;
}
.pricing-page .tier-card.featured .tier-btn { border-color: var(--ds-pink); background: var(--ds-pink); color: var(--ds-black); }
.pricing-page .guarantees {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0;
    border: 1px solid var(--ds-black);
}
.pricing-page .guarantee { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 22px 24px; text-align: left; border-left: 1px solid var(--ds-black); }
.pricing-page .guarantee:first-child { border-left: 0; }
.pricing-page .guarantee-icon { margin: 0; font-size: 22px; }
.pricing-page .guarantee-text { color: var(--ds-muted); font: 450 12px/1.4 var(--ds-font-text); }
.pricing-page .guarantee-text strong { display: block; color: var(--ds-black); font-size: 13px; }

/* Authentication. */
.auth-page .wrap {
    width: min(100%, 520px);
    margin: 0 auto;
    padding: clamp(44px, 8vw, 92px) var(--ds-page-gutter) 80px;
}
.auth-page .brand {
    margin: 0 0 68px;
    color: var(--ds-black);
    font: 400 25px/1 var(--ds-font-display);
    letter-spacing: -.04em;
    text-align: left;
    text-transform: none;
}
.auth-page h1 {
    margin: 0 0 14px;
    color: var(--ds-black);
    font: 400 clamp(42px, 8vw, 64px)/1 var(--ds-font-display);
    letter-spacing: -.045em;
}
.auth-page .lead { margin: 0 0 40px; color: var(--ds-muted); font: 450 16px/1.55 var(--ds-font-text); }
.auth-page label { display: block; margin: 0 0 8px; color: var(--ds-black); font: var(--ds-weight-semibold) 13px/1.2 var(--ds-font-text); }
.auth-page input {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border: 1px solid var(--ds-black);
    border-radius: var(--ds-radius-control);
    background: var(--ds-white);
    color: var(--ds-black);
    font-size: 16px;
}
.auth-page input:focus { outline: 3px solid var(--ds-pink); outline-offset: 2px; border-color: var(--ds-blue); }
.auth-page .btn {
    width: 100%;
    min-height: 52px;
    margin-top: 12px;
    padding: 14px 20px;
    border: 1px solid var(--ds-blue);
    border-radius: var(--ds-radius-control);
    background: var(--ds-blue);
    color: var(--ds-white);
    font: var(--ds-weight-bold) 15px/1 var(--ds-font-text);
}
.auth-page .btn:hover { background: var(--ds-blue-dark); }
.auth-page .btn-ghost { background: var(--ds-white); color: var(--ds-black); }
.auth-page .sep { color: var(--ds-muted); }
.auth-page .sep::before,
.auth-page .sep::after { background: var(--ds-line); }
.auth-page .msg { border: 1px solid var(--ds-black); border-radius: 0; background: var(--ds-lilac-soft); }
.auth-page .msg-error { border-left: 5px solid var(--ds-pink); color: var(--ds-black); }
.auth-page .hint { color: var(--ds-muted); }
.auth-page .hint a { color: var(--ds-black); text-decoration-color: var(--ds-blue); text-underline-offset: 4px; }

/* Payment waiting. */
.waiting-page { display: grid; min-height: 100svh; place-items: center; }
.waiting-page .waiting-wrap { width: min(100%, 620px); max-width: none; padding: 56px var(--ds-page-gutter); text-align: left; }
.waiting-page .waiting-logo { margin: 0 0 72px; color: var(--ds-black); font: 400 25px/1 var(--ds-font-display); letter-spacing: -.04em; text-transform: none; }
.waiting-page .waiting-dots { justify-content: flex-start; margin: 0 0 30px; }
.waiting-page .waiting-dot { width: 11px; height: 11px; background: var(--ds-pink); }
.waiting-page .waiting-dot:nth-child(2) { background: var(--ds-blue); }
.waiting-page .waiting-dot:nth-child(3) { background: var(--ds-lilac); }
.waiting-page .waiting-title { margin: 0 0 14px; color: var(--ds-black); font: 400 clamp(40px, 7vw, 66px)/1 var(--ds-font-display); letter-spacing: -.04em; }
.waiting-page .waiting-sub { color: var(--ds-muted); font: 450 16px/1.55 var(--ds-font-text); }
.waiting-page .waiting-progress-wrap { width: 100%; height: 4px; margin: 34px 0 0; border-radius: 0; background: var(--ds-lilac-soft); }
.waiting-page .waiting-progress-bar { border-radius: 0; background: var(--ds-blue); }
.waiting-page .waiting-timeout { border: 1px solid var(--ds-black); border-left: 5px solid var(--ds-pink); border-radius: 0; background: var(--ds-lilac-soft); color: var(--ds-black); }
.waiting-page .waiting-timeout a { color: var(--ds-blue); }

/* Error states: expressive, recognizable and still useful. */
.error-page { display: grid; min-height: 100svh; padding: var(--ds-page-gutter); place-items: center; }
.error-page .wrap {
    position: relative;
    width: min(100%, 720px);
    max-width: none;
    padding: clamp(42px, 7vw, 76px);
    border: 1px solid var(--ds-black);
    background: var(--ds-lilac-soft);
    text-align: left;
}
.error-page .wrap::before {
    display: block;
    margin-bottom: 36px;
    color: var(--ds-pink);
    font: 400 clamp(72px, 16vw, 150px)/.75 var(--ds-font-display);
    letter-spacing: -.07em;
}
.error-page.status-404 .wrap::before { content: '404'; }
.error-page.status-429 .wrap::before { content: '429'; }
.error-page.status-500 .wrap::before { content: '500'; }
.error-page h1 { margin: 0 0 14px; color: var(--ds-black); font: 400 clamp(34px, 6vw, 58px)/1.05 var(--ds-font-display); letter-spacing: -.04em; }
.error-page .sub { margin: 0 0 24px; color: var(--ds-ink); font: 450 16px/1.55 var(--ds-font-text); }
.error-page .hint { margin: 24px 0 0; padding: 18px 20px; border: 1px solid var(--ds-black); border-radius: 0; background: var(--ds-white); color: var(--ds-ink); font-size: 14px; }
.error-page .back { display: inline-flex; min-height: 50px; margin: 10px 0 0; padding: 14px 24px; align-items: center; border-radius: var(--ds-radius-control); background: var(--ds-blue); color: var(--ds-white); font: var(--ds-weight-bold) 14px/1 var(--ds-font-text); text-decoration: none; }
.error-page .back:hover { background: var(--ds-blue-dark); }
.error-page .support { margin-top: 24px; color: var(--ds-muted); font-size: 12px; }
.error-page .support a { color: var(--ds-black); text-decoration-color: var(--ds-blue); }

@media (max-width: 820px) {
    .pricing-page .page-header { grid-template-columns: 1fr; gap: 24px; }
    .pricing-page .page-tag { margin-bottom: 0; }
    .pricing-page .tiers { grid-template-columns: 1fr; }
    .pricing-page .tier-card,
    .pricing-page .tier-card.featured { min-height: 0; border-left: 0; border-top: 1px solid var(--ds-black); }
    .pricing-page .tier-card:first-child { border-top: 0; }
    .pricing-page .tier-card.featured { order: -1; }
    .pricing-page .tier-desc { min-height: 0; }
    .pricing-page .guarantees { grid-template-columns: 1fr; }
    .pricing-page .guarantee { border-left: 0; border-top: 1px solid var(--ds-black); }
    .pricing-page .guarantee:first-child { border-top: 0; }
}

@media (max-width: 560px) {
    .about-page .doc,
    .legal-page .doc { padding-top: 28px; }
    .about-page .back,
    .legal-page .back { margin-bottom: 36px; }
    .about-page .lead,
    .about-page .contacts { padding: 22px 20px; }
    .pricing-page .page { padding-top: 48px; }
    .pricing-page .tier-card,
    .pricing-page .tier-card.featured { padding: 26px 20px; }
    .auth-page .brand { margin-bottom: 52px; }
    .error-page { padding: 18px; }
    .error-page .wrap { padding: 32px 24px; }
}