/**
 * Copyright (c) 2026 DNA Genics, S.L. All rights reserved.
 *
 * Heritage layout shared by the provider upload guides.
 */

.hpg-page {
    --hpg-gutter: clamp(1rem, 4vw, 3rem);
    font: 400 1rem/1.65 var(--hd-sans);
    padding-bottom: clamp(2rem, 6vw, 5rem);
}

.hpg-page .udna-container,
.hpg-page .udna-stats {
    width: min(76rem, calc(100% - 2 * var(--hpg-gutter)));
    margin-inline: auto;
}

.hpg-page :is(h1, h2, h3, h4) {
    font-family: var(--hd-serif);
    font-weight: 500;
    line-height: 1.12;
    color: var(--hd-primary);
}

.hpg-page :is(p, .udna-faq-answer-inner) { color: var(--hd-muted); }
.hpg-page a:not(.hd-btn) { color: var(--hd-primary); }
.hpg-page :is(a, summary):focus-visible {
    outline: 2px solid var(--hd-primary);
    outline-offset: 4px;
}

.udna-skip-link:has(+ .hpg-page) {
    position: fixed;
    z-index: 1050;
    inset: .75rem auto auto .75rem;
    transform: translateY(-200%);
    padding: .75rem 1rem;
    background: #fff;
    color: #213a2f;
}
.udna-skip-link:has(+ .hpg-page):focus { transform: none; }

.hpg-page .hpg-hero-copy {
    padding: clamp(1.25rem, 5vw, 4rem);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius);
    background: var(--hd-sand);
}

.hpg-page .udna-breadcrumb { margin-bottom: clamp(1.25rem, 4vw, 2.5rem); }
.hpg-page .breadcrumb { padding: 0; background: transparent; font-size: .875rem; }
.hpg-page .udna-hero-title {
    max-width: 22ch;
    margin: .6rem 0 1rem;
    font-size: clamp(2.45rem, 6vw, 5.5rem);
    letter-spacing: -.035em;
}
.hpg-page .udna-hero-lead { max-width: 65ch; font-size: clamp(1rem, 2vw, 1.2rem); }
.hpg-page :is(.udna-hero-badge, .udna-section-label, .udna-cta-label, .udna-stat-label) {
    color: var(--hd-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.hpg-page .udna-hero-slogan { margin: .35rem 0 0; }
.hpg-page .udna-hero-convenience { margin-block: 1.2rem; color: var(--hd-primary); }
.hpg-page :is(.udna-hero-trust, .udna-hero-providers-list, .udna-hero-ctas, .udna-cta-actions, .udna-related-links) {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
}
.hpg-page .udna-hero-trust-item { display: flex; gap: .45rem; align-items: baseline; font-size: .9rem; }
.hpg-page .udna-hero-ctas { margin-block: 1.5rem; }
.hpg-page .hd-btn { justify-content: center; text-align: center; }
.hpg-page .udna-hero-providers-label { display: block; margin-bottom: .4rem; font-size: .85rem; }
.hpg-page .udna-provider-badge {
    padding: .25rem .65rem;
    border-radius: .4rem;
    background: var(--hd-surface);
    font-size: .85rem;
}

.hpg-page .udna-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 1rem 0;
    border-bottom: 1px solid var(--hd-border);
}
.hpg-page .udna-stat { padding: .75rem clamp(.5rem, 2vw, 1.5rem); }
.hpg-page .udna-stat-value { font: 500 clamp(1.7rem, 4vw, 2.8rem)/1.2 var(--hd-serif); color: var(--hd-primary); }

.hpg-page .udna-section { padding-block: clamp(2rem, 6vw, 4.5rem); }
.hpg-page .udna-section--alt { background: var(--hd-cream); }
.hpg-page .udna-section-header { margin-bottom: 1.5rem; }
.hpg-page .udna-section-title { margin: .35rem 0 .65rem; font-size: clamp(2rem, 4vw, 3.4rem); }
.hpg-page .udna-section-sub { max-width: 65ch; }

.hpg-page :is(.udna-steps, .udna-tools, .udna-privacy, .udna-providers) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.hpg-page :is(.udna-step, .udna-tool-card, .udna-privacy-item, .udna-faq-item, .udna-provider-card) {
    min-width: 0;
    padding: clamp(1rem, 3vw, 1.65rem);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius);
    background: var(--hd-surface);
}
.hpg-page .udna-step { display: flex; gap: .9rem; align-items: flex-start; }
.hpg-page .udna-step-content { min-width: 0; }
.hpg-page .udna-step-num {
    display: grid;
    flex: 0 0 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--hd-sage);
    color: var(--hd-primary);
    font-weight: 700;
}
.hpg-page :is(.udna-tool-icon, .udna-privacy-icon) { color: var(--hd-primary); margin-bottom: .5rem; }
.hpg-page :is(.udna-step-content, .udna-tool-card, .udna-privacy-item) p:last-child { margin-bottom: 0; }
.hpg-page .udna-tool-link { font-weight: 600; }

.hpg-page .udna-provider-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.hpg-page .udna-provider-card:hover { border-color: var(--hd-gold); }
.hpg-page .udna-provider-arrow { margin-top: auto; font-weight: 600; }

.hpg-page .udna-faq { max-width: 56rem; display: grid; gap: .65rem; }
.hpg-page .udna-faq-item { padding-block: 0; }
.hpg-page .udna-faq-question { cursor: pointer; padding-block: .95rem; color: var(--hd-primary); font-weight: 600; }
.hpg-page .udna-faq-answer-inner { padding-bottom: 1rem; }

.hpg-page .udna-cta-content {
    padding: clamp(1.25rem, 5vw, 3rem);
    border-radius: var(--hd-radius);
    background: var(--hd-sage);
}
.hpg-page .udna-cta-title { font-size: clamp(1.85rem, 4vw, 3.15rem); }
.hpg-page .udna-cta-lead { max-width: 65ch; }
.hpg-page .udna-related { margin-top: 2rem; }
.hpg-page .udna-related-title { font-weight: 700; }

@media (max-width: 640px) {
    .hpg-page :is(.udna-steps, .udna-tools, .udna-privacy, .udna-providers) { grid-template-columns: minmax(0, 1fr); }
    .hpg-page .udna-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hpg-page :is(.udna-hero-ctas, .udna-cta-actions) .hd-btn { width: 100%; }
}