/**
 * Pages — shared styles for inner marketing & legal pages.
 *
 * Covers: page-hero, contact-channels, security-controls,
 * security-architecture, compliance-certs, compliance-doc-cta, legal-content.
 *
 * @package P26M
 */

/* Шов «герой + сразу следующая секция». Раньше герою обнуляли нижний отступ,
   а следующей секции ставили var(--space-7) — суммарно 48px против ~215px
   между всеми остальными секциями, и пара читалась как слипшаяся. Один
   общий токен на обе стороны шва: он вдвое меньше обычного межсекционного
   отступа, но втрое больше прежних 48px. */
:root {
    --section-seam-y: clamp(32px, 4.5vw, 64px);
}

/* ─────────────────────────────────────────────
   Page Hero (shared across all inner pages)
───────────────────────────────────────────── */

.page-hero {
    padding-block: var(--section-pad-y);
    background-color: var(--color-surface);
    position: relative;
    overflow: hidden;
}

/* Legal pages (Privacy/Terms/Cookies): this hero only carries the eyebrow +
   one-line intro, with the actual H1 living in the immediately-following
   .legal-content section. Stacking two full section-pad-y gaps between them
   left a ~250px dead void above "Privacy Policy" / "Terms of Service" — drop
   this hero's bottom padding so the pair reads as one block (P26M-420). */
.page-hero--legal {
    padding-block-end: var(--section-seam-y);
}

/* Contact page: bring into the same visual family as roi-calculator /
   find-a-provider — centered intro instead of the shared .page-hero__copy's
   default left alignment, and no bottom padding so the gap to the cards
   below matches the tight legal-hero pairing above (P26M-420). Scoped to
   --contact only — Security/Compliance/Sales stay left-aligned as before. */
.page-hero--contact {
    padding-block-end: var(--section-seam-y);
}
.page-hero--contact .page-hero__copy {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

/* Security hero: same centered-intro + tight-seam treatment as
   --contact above, brought into the same visual family as roi-calculator /
   find-a-provider (P26M-425). */
.page-hero--security {
    padding-block-end: var(--section-seam-y);
}
.page-hero--security .page-hero__copy {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}
/* Flex rows inside the centered copy need their own justify-content — a
   centered text block doesn't center flex children (same reason .cta__actions
   / .cta__meta carry it explicitly in sections/cta.css). */
.page-hero--security .page-hero__badges {
    justify-content: center;
}

/* Ambient glow + technical grid, same recipe as .cta::before/::after and
   .ibp-hero::after — brings the inner-page hero into the same visual
   language as the front page instead of the flat brand-glow fill this used
   to carry (P26M-182 left a solid var(--color-brand-glow) wash here, which
   painted the whole hero as one flat green panel rather than a glow). */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 65% at 50% 0%,
            var(--color-brand-glow-soft) 0%, transparent 70%),
        linear-gradient(rgba(34, 38, 46, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 38, 46, 0.4) 1px, transparent 1px);
    background-size: 100% 100%, 56px 56px, 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 0%, transparent 85%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 0%, transparent 85%);
    opacity: 0.7;
    pointer-events: none;
}

.page-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.page-hero__inner--narrow {
    max-width: 768px;
}

.page-hero__copy {
    max-width: 720px;
}

.page-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-5xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--color-text);
    text-wrap: balance;
    margin-block: var(--space-4) var(--space-5);
}

.page-hero__lead {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 60ch;
    margin-block-end: var(--space-6);
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

.page-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-text-tertiary);
    margin-block-start: var(--space-4);
    font-family: var(--font-mono);
}

.page-hero__badge .p26m-icon {
    width: 14px;
    height: 14px;
    color: var(--color-brand);
    flex-shrink: 0;
}

.page-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
}

/* ─────────────────────────────────────────────
   Contact Channels
───────────────────────────────────────────── */

.contact-channels {
    /* Tight gap under .page-hero--contact (see above), full section-pad-y
       stays only at the bottom, before the footer. */
    padding-block-start: var(--section-seam-y);
    padding-block-end: var(--section-pad-y);
    /* Contact is a two-section page (hero + this) — the plain black gap
       between the cards and the footer read as a dead void once the hero
       stopped being a flat green flood (P26M-425). A faint ambient wash
       gives that lower half of the page some depth instead of flat black. */
    position: relative;
    isolation: isolate;
}

.contact-channels::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 70% at 50% 0%, var(--color-brand-glow-soft) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.contact-channels__grid {
    /* Capped like .roi-calc__wizard / .finder__shell (1320) instead of
       riding the full 1536 container — same working-area width across the
       three wizard-style utility pages. */
    max-width: 1320px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 768px) {
    .contact-channels__grid {
        /* minmax(0, 1fr), not bare 1fr — the Security & compliance card
           stacks two mailto buttons whose nowrap email text otherwise sets
           an intrinsic min-width wider than a fair 1/3 share, blowing the
           whole row out past the viewport right at this exact breakpoint
           (pre-existing, not caused by the P26M-420 width/centering pass). */
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.contact-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.contact-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    /* Wash stays lime on both surfaces (§2 STYLEGUIDE) — color-mix with the
       token would deepen to --color-brand-deep on .surface--light and read
       muddy on white, unlike the --color-brand text/icon above it. */
    background-color: rgba(115, 196, 75, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-card__icon .p26m-icon {
    width: 22px;
    height: 22px;
    color: var(--color-brand);
}

.contact-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.015em;
}

.contact-card__body {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    flex: 1;
}

.contact-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* The mailto CTAs carry full email addresses — .btn's default nowrap has no
   space to break on, so let these specific buttons wrap onto a second line
   at narrow widths instead of forcing their column wider than its share. */
.contact-card__cta {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

.contact-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
    margin-block-start: var(--space-2);
}

.contact-card__meta .p26m-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Sales is the primary path on this page — pricing-tier CTAs anchor here
   (#sales, P26M-422). Same point-glow recipe as .tier--featured /
   .finder-cta__inner: a brand-tinted radial blob inside the card plus a
   soft halo — not an ambient section wash. */
#sales {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(115, 196, 75, 0.10), transparent 60%),
        var(--color-elevated);
    border-color: rgba(115, 196, 75, 0.35);
    box-shadow:
        0 0 0 1px rgba(115, 196, 75, 0.08) inset,
        0 20px 48px rgba(115, 196, 75, 0.10);
}

/* ─────────────────────────────────────────────
   Sales Value Props

/* ─────────────────────────────────────────────
   Security Controls
───────────────────────────────────────────── */

.security-controls {
    /* Tight gap under .page-hero--security (zeroed bottom padding above) —
       same pairing as .contact-channels under .page-hero--contact. */
    padding-block-start: var(--section-seam-y);
    padding-block-end: var(--section-pad-y);
}

.security-controls__head {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-block-end: var(--space-8);
}

.security-controls__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 640px) {
    .security-controls__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .security-controls__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.security-ctrl {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* Corner glow, same recipe as .feature--quaternary — six identical flat
       cards read as one grey block next to the homepage's cards (P26M-425). */
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse 100% 70% at 100% 0%, rgba(115, 196, 75, 0.07) 0%, transparent 55%),
        var(--color-elevated);
}

/* Tokenization anchors the CDE story — same featured treatment as
   .feature--primary. Encryption gets the accent-blue "secondary moment"
   (§2 STYLEGUIDE) so the grid isn't six identical green cards. */
.security-ctrl:nth-child(1) {
    border-color: rgba(115, 196, 75, 0.30);
    box-shadow: var(--shadow-brand);
}

.security-ctrl:nth-child(3) {
    background:
        radial-gradient(ellipse 100% 70% at 100% 0%, rgba(59, 91, 255, 0.10) 0%, transparent 55%),
        var(--color-elevated);
    border-color: rgba(59, 91, 255, 0.22);
}

.security-ctrl:nth-child(3) .security-ctrl__icon {
    background-color: rgba(59, 91, 255, 0.12);
    border-color: rgba(59, 91, 255, 0.25);
}

.security-ctrl:nth-child(3) .security-ctrl__icon .p26m-icon {
    color: var(--color-accent-strong);
}

.security-ctrl__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    /* Wash stays lime on both surfaces (§2 STYLEGUIDE) — see .contact-card__icon. */
    background-color: rgba(115, 196, 75, 0.10);
    border: 1px solid rgba(115, 196, 75, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
}

.security-ctrl__icon .p26m-icon {
    width: 22px;
    height: 22px;
    color: var(--color-brand);
}

.security-ctrl__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.015em;
}

.security-ctrl__body {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    line-height: 1.65;
}

/* ─────────────────────────────────────────────
   Security Architecture
───────────────────────────────────────────── */

.security-arch {
    padding-block: var(--section-pad-y);
    background-color: var(--color-base);
}

.security-arch__head {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-block-end: var(--space-8);
}

.security-arch__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}

@media (min-width: 1024px) {
    .security-arch__body {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.security-arch__flow-title,
.security-arch__principles-title {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.02em;
    margin-block-end: var(--space-5);
}

.security-arch__flow-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.security-arch__flow-step {
    display: flex;
    gap: var(--space-4);
    padding-block-end: var(--space-5);
    position: relative;
}

.security-arch__flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 22px;
    bottom: 0;
    width: 1px;
    background: var(--color-border);
}

.security-arch__flow-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-brand);
    border: 3px solid var(--color-surface);
    flex-shrink: 0;
    margin-block-start: 2px;
    box-shadow: 0 0 0 1px var(--color-brand);
}

.security-arch__flow-step strong {
    display: block;
    font-size: var(--fs-base);
    color: var(--color-text);
    font-weight: 600;
    margin-block-end: var(--space-1);
}

.security-arch__flow-step p {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.security-arch__principles-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.security-arch__principles-list li {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.security-arch__principles-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-brand) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.security-arch__principles-icon .p26m-icon {
    width: 18px;
    height: 18px;
    color: var(--color-brand);
}

.security-arch__principles-list strong {
    display: block;
    font-size: var(--fs-base);
    color: var(--color-text);
    font-weight: 600;
    margin-block-end: var(--space-1);
}

.security-arch__principles-list p {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.security-arch__cta {
    margin-block-start: var(--space-8);
    padding-block-start: var(--section-seam-y);
    border-block-start: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
}

.security-arch__cta p {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    margin: 0;
    flex: 1;
    min-width: 240px;
}

/* ─────────────────────────────────────────────
   Compliance Certifications
───────────────────────────────────────────── */

.compliance-certs {
    padding-block: var(--section-pad-y);
}

.compliance-certs__head {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-block-end: var(--space-8);
}

.compliance-certs__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 640px) {
    .compliance-certs__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.compliance-cert {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.compliance-cert__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.compliance-cert__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, var(--color-brand) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.compliance-cert--progress .compliance-cert__icon {
    background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.compliance-cert--planned .compliance-cert__icon {
    background-color: color-mix(in srgb, var(--color-text-tertiary) 12%, transparent);
}

.compliance-cert__icon .p26m-icon {
    width: 22px;
    height: 22px;
    color: var(--color-brand);
}

.compliance-cert--progress .compliance-cert__icon .p26m-icon {
    color: var(--color-accent);
}

.compliance-cert--planned .compliance-cert__icon .p26m-icon {
    color: var(--color-text-tertiary);
}

.compliance-cert__name {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.015em;
    margin-block-end: var(--space-2);
}

.compliance-cert__status--active {
    background-color: color-mix(in srgb, var(--color-brand) 15%, transparent);
    color: var(--color-brand);
}

.compliance-cert__status--progress {
    background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
    color: var(--color-accent);
}

.compliance-cert__status--planned {
    background-color: color-mix(in srgb, var(--color-text-tertiary) 15%, transparent);
    color: var(--color-text-tertiary);
}

.compliance-cert__scope {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* ─────────────────────────────────────────────
   Compliance Document CTA
───────────────────────────────────────────── */

.compliance-doc-cta {
    padding-block: var(--section-pad-y);
    background-color: var(--color-base);
}

.compliance-doc-cta__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-7);
    align-items: flex-start;
}

@media (min-width: 768px) {
    .compliance-doc-cta__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--space-6);
    }
}

.compliance-doc-cta__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, var(--color-brand) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.compliance-doc-cta__icon .p26m-icon {
    width: 28px;
    height: 28px;
    color: var(--color-brand);
}

.compliance-doc-cta__copy {
    flex: 1;
}

.compliance-doc-cta__title {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.02em;
    margin-block-end: var(--space-3);
}

.compliance-doc-cta__body {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 55ch;
    margin: 0;
}

.compliance-doc-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
    flex-shrink: 0;
}

.compliance-doc-cta__email {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-text-tertiary);
}

/* ─────────────────────────────────────────────
   Legal Content (Privacy, Terms, Cookies)
───────────────────────────────────────────── */

.legal-content {
    /* Tight gap under .page-hero--legal (see above) — full section-pad-y
       stays only at the bottom, before the footer. */
    padding-block-start: var(--section-seam-y);
    padding-block-end: var(--section-pad-y);
}

.legal-content__container {
    max-width: 768px;
}

.legal-content__header {
    margin-block-end: var(--space-7);
    padding-block-end: var(--space-6);
    border-block-end: 1px solid var(--color-border);
}

.legal-content__header h1 {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-block-end: var(--space-3);
    text-wrap: balance;
}

.legal-content__meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-text-tertiary);
    margin: 0;
}

.legal-content__intro {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-block-end: var(--space-6);
}

/* Prose — scoped to .legal-content__body */

.legal-content__body.prose section {
    margin-block-end: var(--space-7);
}

.legal-content__body.prose h2 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-block: var(--space-6) var(--space-4);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border);
}

.legal-content__body.prose section:first-of-type h2 {
    border-block-start: none;
    padding-block-start: 0;
    margin-block-start: 0;
}

.legal-content__body.prose h3 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.015em;
    margin-block: var(--space-5) var(--space-3);
}

.legal-content__body.prose p {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 65ch;
    margin-block-end: var(--space-4);
}

.legal-content__body.prose ul,
.legal-content__body.prose ol {
    padding-inline-start: var(--space-5);
    margin-block-end: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.legal-content__body.prose li {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    line-height: 1.65;
}

.legal-content__body.prose a {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-content__body.prose a:hover {
    color: var(--color-brand-strong);
}

/* Cookie table */

.legal-content__table-wrap {
    overflow-x: auto;
    margin-block: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.legal-content__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.legal-content__table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-text-tertiary);
    background-color: var(--color-elevated);
    border-block-end: 1px solid var(--color-border);
    white-space: nowrap;
}

.legal-content__table td {
    padding: var(--space-4);
    color: var(--color-text-secondary);
    border-block-end: 1px solid var(--color-border);
    line-height: 1.55;
    vertical-align: top;
}

.legal-content__table tbody tr:last-child td {
    border-block-end: none;
}

.legal-content__table strong {
    color: var(--color-text);
    font-weight: 600;
}