/*
 * German-VAT.com – public pages (base_public.html)
 * ================================================
 * One look for every public page: landing page, guides, legal pages,
 * assessment, partner page and the account pages (login, registration).
 * Loaded after bootstrap and style.css. Everything is namespaced hp-*;
 * colours are the platform tokens from style.css. The frame follows
 * docs/Design/Layout-Guideline.pdf: full width, 32 / 24 / 16 px outside,
 * capped at 1856 px — no narrow column in the middle.
 *
 * Page-specific sheets on top: public_home.css (landing page sections),
 * public_guides.css (figures and tables inside guides), questionnaire.css.
 * Behaviour: static/js/public.js (navigation, reveals). Without the
 * script, or with "reduce motion", every element is simply visible.
 */

/* ══════════════════════════════════════════════════
   1. TOKENS / BASE
   ══════════════════════════════════════════════════ */
/* The navigation is sticky: anchors must land below it. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

.hp {
    --hp-navy: var(--gv-primary-dark, #122741);
    --hp-navy-2: var(--gv-primary, #1c3a5e);
    --hp-navy-raise: #172f4d;
    --hp-navy-line: #2c4667;
    --hp-deep: #0e1a28;
    --hp-ink: var(--gv-text, #14203a);
    --hp-mute: var(--gv-secondary, #5b6b7f);
    --hp-line: var(--gv-border, #e4e9f0);
    --hp-line-2: var(--gv-border-strong, #cdd6e1);
    --hp-bg-2: var(--gv-bg-light, #f5f7fa);
    --hp-bg-3: var(--gv-bg-alt, #eceff5);
    --hp-acc: var(--gv-accent, #10b981);
    --hp-acc-d: var(--gv-accent-dark, #059669);
    --hp-acc-l: var(--gv-accent-light, #d1fae5);
    --hp-mint: #6ee7b7;
    --hp-on-navy: #d3dce8;
    --hp-on-navy-2: #9fb3c9;
    --hp-sans: 'Schibsted Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --hp-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    --hp-ease: cubic-bezier(.2, .7, .2, 1);
    --hp-max: 1856px;
    font-family: var(--hp-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--hp-ink);
}

.hp-page {
    background: #fff;
    overflow-x: clip;
}

/* Reset for everything written with hp-* classes. It must not reach the
   older markup that still sits inside the public pages (Bootstrap forms,
   the assessment widget, guide bodies) — hence the explicit scopes; new
   structures opt in with .hp-r. Same weight as the element rules in
   bootstrap/style.css, but later in the cascade: every hp-* class rule
   below still wins over it. */
:where(.hp-page, .hp-nav, .hp-foot, .hp-r) :is(h1, h2, h3, p, ul, ol, dl, dt, dd) {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    letter-spacing: inherit;
}

:where(.hp-page, .hp-nav, .hp-foot, .hp-r) :is(ul, ol) {
    list-style: none;
}

.hp a:focus-visible,
.hp button:focus-visible,
.hp summary:focus-visible,
.hp-swipe:focus-visible {
    outline: 2px solid var(--hp-acc);
    outline-offset: 3px;
}

.hp-mono {
    font-family: var(--hp-mono);
    font-variant-numeric: tabular-nums;
}

.hp-acc {
    color: var(--hp-acc);
}

/* Running number in front of a list entry (cases, services). */
.hp-idx {
    padding-top: 5px;
    font-size: 13px;
    color: var(--hp-mute);
    transition: color .25s ease;
}

/* The frame of docs/Design/Layout-Guideline.pdf: full width, 32 / 24 / 16 px
   outside, capped at 1856 px. A narrower, centred column was tried on
   2026-10-06 and rejected by the owner ("alles wieder so mittig"). */
.hp-wrap {
    width: 100%;
    max-width: var(--hp-max);
    margin-inline: auto;
    padding-inline: 32px;
}

.hp-sec {
    padding-block: clamp(56px, 6vw, 84px);
}

.hp-sec--alt {
    background: var(--hp-bg-2);
}

.hp-sec--navy {
    background: var(--hp-navy);
    color: #fff;
}

.hp-ic {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* — Section heads — */
.hp-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--hp-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hp-mute);
}

.hp-eyebrow::before {
    content: '';
    width: 18px;
    height: 2px;
    background: var(--hp-acc);
}

.hp-sec--navy .hp-eyebrow {
    color: var(--hp-on-navy-2);
}

.hp-title {
    font-size: clamp(29px, 3.3vw, 46px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.028em;
    color: var(--hp-ink);
    text-wrap: balance;
}

.hp-title--sm {
    font-size: clamp(22px, 2.1vw, 28px);
    line-height: 1.2;
    letter-spacing: -.02em;
}

.hp-sec--navy .hp-title {
    color: #fff;
}

.hp-sub {
    max-width: 60ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--hp-mute);
    text-wrap: pretty;
}

.hp-sub strong {
    font-weight: 600;
    color: var(--hp-ink);
}

.hp-sub a,
.hp-sub a:hover {
    color: var(--hp-navy-2);
    text-underline-offset: 4px;
}

.hp-note {
    font-size: 13.5px;
    color: var(--hp-mute);
}

.hp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    margin-bottom: 48px;
}

.hp-head > div {
    display: grid;
    gap: 16px;
    max-width: 760px;
}

.hp-head--center {
    display: grid;
    gap: 16px;
    justify-items: center;
    margin-bottom: 48px;
    text-align: center;
}

.hp-stack {
    display: grid;
    gap: 18px;
    justify-items: start;
}

.hp-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
}

.hp-split--end {
    align-items: end;
}

/* — Buttons and links — */
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .15s ease;
}

.hp-btn .hp-ic {
    transition: transform .3s var(--hp-ease);
}

.hp-btn:hover .hp-ic {
    transform: translateX(4px);
}

.hp-btn:active {
    transform: translateY(1px);
}

.hp-btn--lg {
    min-height: 54px;
    padding: 0 26px;
    font-size: 16px;
}

.hp-btn--sm {
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
}

/* Navy on emerald: white on #10b981 only reaches 2.5:1. */
.hp-btn--acc,
.hp-btn--acc:hover {
    background: var(--hp-acc);
    color: var(--hp-navy);
}

.hp-btn--acc:hover {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .28);
}

.hp-btn--ghost,
.hp-btn--ghost:hover {
    border-color: #3a5577;
    background: transparent;
    color: #fff;
}

.hp-btn--ghost:hover {
    border-color: var(--hp-on-navy-2);
    background: rgba(255, 255, 255, .05);
}

.hp-btn--line,
.hp-btn--line:hover {
    border-color: var(--hp-line-2);
    background: #fff;
    color: var(--hp-navy-2);
}

.hp-btn--line:hover {
    border-color: var(--hp-navy-2);
}

.hp-link,
.hp-link:hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-navy-2);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color .25s ease;
}

.hp-link:hover {
    text-decoration-color: var(--hp-acc);
}

.hp-link .hp-ic {
    width: 16px;
    height: 16px;
    transition: transform .3s var(--hp-ease);
}

.hp-link:hover .hp-ic {
    transform: translateX(4px);
}

.hp-sec--navy .hp-link,
.hp-sec--navy .hp-link:hover {
    color: #fff;
}

.hp-checks {
    display: grid;
    gap: 10px;
}

.hp-checks li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: 15px;
    line-height: 1.5;
}

.hp-checks .hp-ic {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--hp-acc-d);
    stroke-width: 2.3;
}

.hp-checks--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
}

/* ══════════════════════════════════════════════════
   2. NAV
   ══════════════════════════════════════════════════ */
.hp-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid transparent;
    background: var(--hp-navy);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.hp-nav.is-scrolled {
    border-bottom-color: var(--hp-navy-line);
    box-shadow: 0 10px 30px rgba(8, 18, 32, .28);
}

.hp-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
}

.hp-brand,
.hp-brand:hover {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    text-decoration: none;
}

.hp-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--hp-acc) 0%, var(--hp-acc-d) 100%);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

.hp-nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.hp-nav-links a,
.hp-nav-txt {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hp-on-navy);
    text-decoration: none;
    transition: color .2s ease;
}

.hp-nav-links a::after {
    content: '';
    position: absolute;
    right: 10px;
    bottom: 9px;
    left: 10px;
    height: 1px;
    background: var(--hp-acc);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--hp-ease);
}

.hp-nav-links a:hover,
.hp-nav-txt:hover {
    color: #fff;
}

.hp-nav-links a:hover::after {
    transform: scaleX(1);
}

.hp-nav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hp-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #3a5577;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.hp-menu {
    border-top: 1px solid var(--hp-navy-line);
    background: var(--hp-navy);
}

.hp-menu-in {
    display: grid;
    padding-block: 8px 20px;
}

.hp-menu-in a,
.hp-menu-in a:hover {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid #1c3553;
    font-weight: 500;
    color: var(--hp-on-navy);
    text-decoration: none;
}

/* ══════════════════════════════════════════════════
   3. HERO
   ══════════════════════════════════════════════════ */
.hp-hero {
    position: relative;
    background: var(--hp-navy);
    color: #fff;
    overflow: hidden;
}

/* Ledger grid, fading out around the facts panel. */
.hp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse 62% 78% at 78% 34%, #000 0%, transparent 76%);
    mask-image: radial-gradient(ellipse 62% 78% at 78% 34%, #000 0%, transparent 76%);
    pointer-events: none;
}

.hp-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 64px;
    align-items: center;
    padding-block: 64px 72px;
}

.hp-badge,
.hp-badge:hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 12px;
    border: 1px solid #3a5577;
    border-radius: 999px;
    background: #1c3553;
    font-size: 13.5px;
    font-weight: 500;
    color: #e6edf5;
    text-decoration: none;
    transition: border-color .25s ease;
}

a.hp-badge:hover {
    border-color: var(--hp-mint);
}

.hp-badge .hp-ic {
    width: 16px;
    height: 16px;
    color: var(--hp-acc);
}

.hp-badge .hp-ic--ext {
    width: 13px;
    height: 13px;
    color: var(--hp-on-navy-2);
}

.hp-h1 {
    margin: 28px 0;
    font-size: clamp(40px, 5.6vw, 96px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.035em;
    color: #fff;
}

/* One mask per headline line; the padding keeps descenders unclipped. */
.hp-hl {
    display: block;
    margin-bottom: -.14em;
    padding-bottom: .14em;
    overflow: hidden;
}

.hp-hl > span {
    display: block;
}

.hp-lead {
    max-width: 54ch;
    font-size: clamp(17px, 1.35vw, 19px);
    line-height: 1.6;
    color: var(--hp-on-navy);
    text-wrap: pretty;
}

.hp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

.hp-dossier {
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 680px;
    border: 1px solid var(--hp-navy-line);
    border-radius: 14px;
    background: var(--hp-navy-raise);
    overflow: hidden;
}

.hp-dossier::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--hp-acc);
    transform-origin: left;
}

.hp-dossier-top {
    padding: 28px 28px 24px;
    border-bottom: 1px solid var(--hp-navy-line);
}

.hp-lbl {
    font-family: var(--hp-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hp-on-navy-2);
}

.hp-vatid {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    font-size: clamp(25px, 2.5vw, 35px);
    font-weight: 500;
    line-height: 1.15;
    color: #fff;
    white-space: nowrap;
}

.hp-type {
    display: inline-block;
}

.hp-vatid .hp-ic {
    width: 22px;
    height: 22px;
    color: var(--hp-acc);
    stroke-width: 2;
}

.hp-cap {
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--hp-on-navy-2);
}

.hp-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--hp-navy-line);
}

.hp-facts--rows {
    grid-template-columns: minmax(0, 1fr);
}

.hp-fact {
    padding: 22px 28px 24px;
    background: var(--hp-navy-raise);
}

.hp-fact dt {
    font-size: 13px;
    font-weight: 400;
    color: var(--hp-on-navy-2);
}

.hp-fact dd {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--hp-on-navy);
}

.hp-fact dd strong {
    display: block;
    margin: 6px 0;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
}

.hp-fact dd strong.hp-acc {
    font-weight: 600;
    color: var(--hp-acc);
}

/* Who operates the site — the trust line right under the hero. */
.hp-op {
    position: relative;
    border-top: 1px solid var(--hp-navy-line);
}

.hp-op-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 40px;
    padding-block: 14px;
    font-size: 13.5px;
    color: var(--hp-on-navy-2);
}

.hp-op-row strong {
    font-weight: 600;
    color: #e6edf5;
}

.hp-op-row a,
.hp-op-row a:hover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: #e6edf5;
    text-decoration: underline;
    text-decoration-color: #3a5577;
    text-underline-offset: 4px;
}

.hp-op-row a:hover {
    text-decoration-color: var(--hp-acc);
}

.hp-op-row .hp-ic {
    width: 13px;
    height: 13px;
}

/* ══════════════════════════════════════════════════
   4. LIST WITH TOP LINE (services, partner benefits)
   ══════════════════════════════════════════════════ */
.hp-svcs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 32px;
}

.hp-svcs--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hp-svc {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 0 36px;
    border-top: 1px solid var(--hp-line-2);
}

.hp-svc::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--hp-acc);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--hp-ease);
}

.hp-svc:hover::before {
    transform: scaleX(1);
}

.hp-svc .hp-idx {
    padding-top: 0;
    font-size: 12px;
}

.hp-svc h3 {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--hp-ink);
}

.hp-svc p {
    font-size: 15px;
    color: var(--hp-mute);
}

/* ══════════════════════════════════════════════════
   5. STEPS
   ══════════════════════════════════════════════════ */
.hp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 40px;
}

.hp-step {
    position: relative;
    display: grid;
    gap: 8px;
    align-content: start;
    padding-top: 56px;
}

.hp-step::before {
    content: '';
    position: absolute;
    top: 15px;
    right: -40px;
    left: 0;
    height: 1px;
    background: var(--hp-line-2);
}

.hp-step-line {
    position: absolute;
    top: 14px;
    right: -40px;
    left: 0;
    height: 2px;
    background: var(--hp-acc);
    transform-origin: left;
}

.hp-step:last-child::before,
.hp-step:last-child .hp-step-line {
    right: 0;
}

.hp-step-node {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hp-navy);
    box-shadow: 0 0 0 6px #fff;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

/* On the grey section ground the ring around the node takes that colour. */
.hp-steps--alt .hp-step-node {
    box-shadow: 0 0 0 6px var(--hp-bg-2);
}

.hp-step-label {
    font-family: var(--hp-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hp-mute);
}

.hp-step h3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.018em;
    color: var(--hp-ink);
}

.hp-step p {
    max-width: 38ch;
    font-size: 15.5px;
    color: var(--hp-mute);
}

/* ══════════════════════════════════════════════════
   6. GUIDES
   ══════════════════════════════════════════════════ */
.hp-guides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 24px;
}

.hp-guide,
.hp-guide:hover {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    border: 1px solid var(--hp-line);
    border-radius: 14px;
    background: #fff;
    color: var(--hp-ink);
    text-decoration: none;
    transition: border-color .3s ease, box-shadow .4s ease, transform .4s var(--hp-ease);
}

.hp-guide:hover {
    border-color: var(--hp-line-2);
    box-shadow: 0 14px 34px rgba(20, 32, 58, .09);
    transform: translateY(-3px);
}

.hp-guide h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--hp-ink);
}

.hp-guide p {
    font-size: 15px;
    color: var(--hp-mute);
}

.hp-guides-rest {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 24px 0 0;
    font-size: 15px;
    color: var(--hp-mute);
}

.hp-guides-rest a {
    font-weight: 600;
    color: var(--hp-navy-2);
    text-decoration: underline;
    text-decoration-color: var(--hp-line-2);
    text-underline-offset: 4px;
}

.hp-guides-rest a:hover {
    text-decoration-color: var(--hp-acc);
}

.hp-guide-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-navy-2);
}

.hp-guide-more .hp-ic {
    width: 16px;
    height: 16px;
    transition: transform .3s var(--hp-ease);
}

.hp-guide:hover .hp-guide-more .hp-ic {
    transform: translateX(4px);
}

/* ══════════════════════════════════════════════════
   7. FAQ (<details>, one open at a time via name="")
   ══════════════════════════════════════════════════ */
.hp-faq details {
    border-top: 1px solid var(--hp-line-2);
}

.hp-faq details:last-child {
    border-bottom: 1px solid var(--hp-line-2);
}

.hp-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 64px;
    padding: 16px 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--hp-ink);
    list-style: none;
    cursor: pointer;
}

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

.hp-plus {
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    border: 1px solid var(--hp-line-2);
    border-radius: 50%;
    transition: background-color .25s ease, border-color .25s ease;
}

.hp-plus::before,
.hp-plus::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1.5px;
    background: var(--hp-navy-2);
    transform: translate(-50%, -50%);
    transition: transform .35s var(--hp-ease), background-color .25s ease;
}

.hp-plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.hp-faq summary:hover .hp-plus {
    border-color: var(--hp-navy-2);
}

.hp-faq details[open] .hp-plus {
    border-color: var(--hp-navy);
    background: var(--hp-navy);
}

.hp-faq details[open] .hp-plus::before,
.hp-faq details[open] .hp-plus::after {
    background: #fff;
}

.hp-faq details[open] .hp-plus::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.hp-ans {
    max-width: 68ch;
    padding: 0 52px 24px 0;
    font-size: 15.5px;
    color: var(--hp-mute);
}

.hp-ans strong {
    font-weight: 600;
    color: var(--hp-ink);
}

/* ══════════════════════════════════════════════════
   8. FINAL CTA (navy)
   ══════════════════════════════════════════════════ */
.hp-cta {
    position: relative;
    padding-block: clamp(64px, 7vw, 104px);
    background: var(--hp-navy);
    color: #fff;
    overflow: hidden;
}

/* The example VAT ID from the hero again, as an outline in the background. */
.hp-cta-ghost {
    position: absolute;
    right: -2%;
    bottom: -.42em;
    font-size: clamp(72px, 11vw, 168px);
    font-weight: 600;
    line-height: 1;
    color: transparent;
    white-space: nowrap;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .08);
    pointer-events: none;
    user-select: none;
}

.hp-cta-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px 64px;
    align-items: center;
}

.hp-cta h2 {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.032em;
    color: #fff;
    text-wrap: balance;
}

.hp-cta p {
    max-width: 56ch;
    margin-top: 18px;
    font-size: 17px;
    color: var(--hp-on-navy);
}

.hp-cta-side {
    display: grid;
    gap: 12px;
    justify-items: start;
}

.hp-cta-side small {
    font-size: 13.5px;
    color: var(--hp-on-navy-2);
}

.hp-cta-side small a,
.hp-cta-side small a:hover {
    color: #fff;
    text-underline-offset: 4px;
}

/* ══════════════════════════════════════════════════
   9. FOOTER
   ══════════════════════════════════════════════════ */
.hp-foot {
    background: var(--hp-deep);
    font-size: 14.5px;
    color: var(--hp-on-navy-2);
}

.hp-foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr));
    gap: 40px 32px;
    padding-block: 64px 48px;
}

.hp-foot-about {
    display: grid;
    gap: 14px;
    align-content: start;
    justify-items: start;
}

.hp-foot-about p {
    max-width: 40ch;
}

.hp-foot h3 {
    margin-bottom: 12px;
    font-family: var(--hp-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

.hp-foot-link,
.hp-foot-link:hover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    color: var(--hp-on-navy-2);
    text-decoration: none;
    transition: color .2s ease;
}

.hp-foot-link:hover {
    color: #fff;
}

.hp-foot-link .hp-ic {
    width: 13px;
    height: 13px;
}

.hp-foot-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding-block: 20px 28px;
    border-top: 1px solid #1f3147;
    font-size: 13px;
}

/* ══════════════════════════════════════════════════
   10. SUB-PAGES (legal, guides, assessment, account pages)
   The layout guideline applied to the public pages: the frame runs
   over the full width, context sits in a narrow left column, the
   task in the wide right one. Only text blocks are capped (about 80
   characters) — never the page.
   ══════════════════════════════════════════════════ */

/* — Bootstrap pieces inside public pages take the public look — */
.hp-site .btn {
    --bs-btn-border-radius: 8px;
    --bs-btn-font-weight: 600;
}

.hp-site .btn-lg {
    --bs-btn-border-radius: 8px;
    --bs-btn-font-size: 16px;
    --bs-btn-padding-y: 13px;
}

.hp-site .btn-accent,
.hp-site .btn-accent:hover,
.hp-site .btn-accent:focus,
.hp-site .btn-accent:active {
    border-color: var(--hp-acc);
    background: var(--hp-acc);
    color: var(--hp-navy);
}

.hp-site .btn-accent:hover,
.hp-site .btn-accent:focus-visible {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .28);
}

.hp-site .form-label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hp-ink);
}

.hp-site .form-control,
.hp-site .form-select {
    padding: 11px 14px;
    border: 1px solid var(--hp-line-2);
    border-radius: 8px;
    font-size: 15px;
    color: var(--hp-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hp-site .form-control:focus,
.hp-site .form-select:focus {
    border-color: var(--hp-acc-d);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

.hp-site .form-text {
    font-size: 13px;
    color: var(--hp-mute);
}

.hp-site .alert {
    border-radius: 10px;
}

/* base_public.html keeps Bootstrap's spacing classes on the flash container
   for the flows with a fixed navbar; under the sticky one they are too much. */
.hp-site .hp-flash {
    max-width: var(--hp-max);
    margin-top: 0 !important;
    padding: 20px 32px 0 !important;
}

/* — Page head: navy band under the navigation — */
.hp-phead {
    position: relative;
    background: var(--hp-navy);
    color: #fff;
    overflow: hidden;
}

.hp-phead::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse 46% 130% at 90% 40%, #000 0%, transparent 74%);
    mask-image: radial-gradient(ellipse 46% 130% at 90% 40%, #000 0%, transparent 74%);
    pointer-events: none;
}

.hp-phead-in {
    position: relative;
    display: grid;
    gap: 16px;
    justify-items: start;
    padding-block: 44px 52px;
}

.hp-phead .hp-eyebrow {
    color: var(--hp-on-navy-2);
}

.hp-ptitle {
    max-width: 24ch;
    font-size: clamp(30px, 3.2vw, 50px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: #fff;
    text-wrap: balance;
}

.hp-ptitle span {
    font-weight: 500;
    color: var(--hp-on-navy-2);
}

/* Guide titles run to a hundred characters. */
.hp-ptitle--long {
    max-width: 36ch;
    font-size: clamp(26px, 2.5vw, 38px);
    line-height: 1.12;
    letter-spacing: -.024em;
}

.hp-plead {
    max-width: 72ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--hp-on-navy);
    text-wrap: pretty;
}

.hp-pmeta {
    font-size: 13.5px;
    color: var(--hp-on-navy-2);
}

.hp-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-family: var(--hp-mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hp-on-navy-2);
}

.hp-crumbs li + li::before {
    content: '/';
    margin-right: 10px;
    color: #3a5577;
}

.hp-crumbs a,
.hp-crumbs a:hover {
    color: var(--hp-on-navy);
    text-decoration: none;
}

.hp-crumbs a:hover {
    color: #fff;
}

/* — Work area: context column left, task right — */
.hp-work {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-areas:
        "lead main"
        "more main";
    grid-template-rows: auto 1fr;
    column-gap: 48px;
    align-items: start;
    padding-block: 48px 84px;
}

.hp-work-lead {
    grid-area: lead;
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.hp-work-more {
    grid-area: more;
    position: sticky;
    top: 96px;
    display: grid;
    gap: 20px;
    align-content: start;
}

.hp-main {
    grid-area: main;
    min-width: 0;
}

.hp-main > * + * {
    margin-top: 40px;
}

/* A hidden first block (assessment: the role gate) must not push the next one down. */
.hp-main > .d-none + * {
    margin-top: 0;
}

/* — Cards: 1 px border, 10 px radius, no shadow — */
.hp-card {
    padding: 20px 22px;
    border: 1px solid var(--hp-line);
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    line-height: 1.55;
    color: var(--hp-mute);
}

.hp-card--soft {
    background: var(--hp-bg-2);
}

.hp-card--navy {
    border-color: var(--hp-navy);
    background: var(--hp-navy);
    color: var(--hp-on-navy);
}

.hp-card-label {
    margin-bottom: 10px;
    font-family: var(--hp-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hp-mute);
}

.hp-card--navy .hp-card-label {
    color: var(--hp-mint);
}

.hp-card-title {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--hp-ink);
}

.hp-card--navy .hp-card-title {
    color: #fff;
}

.hp-card .hp-btn {
    margin-top: 16px;
}

.hp-card a:not(.hp-btn),
.hp-card a:not(.hp-btn):hover {
    color: var(--hp-navy-2);
    text-underline-offset: 3px;
}

.hp-sidenav a,
.hp-sidenav a:hover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 8px 0;
    border-top: 1px solid var(--hp-line);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--hp-ink);
    text-decoration: none;
}

.hp-sidenav li:first-child a {
    border-top: 0;
}

.hp-sidenav a:hover {
    color: var(--hp-navy-2);
}

.hp-sidenav a[aria-current] {
    font-weight: 600;
    color: var(--hp-navy-2);
}

.hp-sidenav a[aria-current]::after {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hp-acc);
}

/* Vertical progress list (assessment): what happens after this step. */
.hp-path {
    display: grid;
    gap: 14px;
}

.hp-path li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    font-size: 14.5px;
    line-height: 1.5;
}

.hp-path li > span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--hp-line-2);
    border-radius: 50%;
    font-family: var(--hp-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--hp-mute);
}

.hp-path li.is-now > span {
    border-color: var(--hp-navy);
    background: var(--hp-navy);
    color: #fff;
}

.hp-path strong {
    display: block;
    font-weight: 600;
    color: var(--hp-ink);
}

/* — Prose: long text; the blocks are capped, not the column — */
.hp-prose {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--hp-ink);
    overflow-wrap: anywhere;
}

.hp-prose > * {
    max-width: 960px;
}

.hp-prose > :is(p, ul, ol, h2, h3, h4, blockquote) {
    max-width: 720px;
}

.hp-prose p,
.hp-prose ul,
.hp-prose ol {
    margin: 0 0 16px;
}

.hp-prose ul,
.hp-prose ol {
    padding-left: 22px;
}

.hp-prose li {
    margin-bottom: 6px;
}

.hp-prose h2 {
    margin: 40px 0 12px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--hp-ink);
}

.hp-prose h3 {
    margin: 28px 0 8px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--hp-ink);
}

.hp-prose > :first-child {
    margin-top: 0;
}

.hp-prose a:not(.hp-btn),
.hp-prose a:not(.hp-btn):hover {
    color: var(--hp-navy-2);
    text-decoration: underline;
    text-decoration-color: var(--hp-line-2);
    text-underline-offset: 3px;
}

.hp-prose a:not(.hp-btn):hover {
    text-decoration-color: var(--hp-acc);
}

.hp-prose-sep {
    padding-top: 32px;
    border-top: 1px solid var(--hp-line-2);
}

/* — Blocks: short sections side by side (legal pages) — */
.hp-blocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
}

.hp-block {
    padding: 22px 0 30px;
    border-top: 1px solid var(--hp-line-2);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--hp-mute);
}

.hp-block h2 {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--hp-ink);
}

.hp-block h3 {
    margin: 14px 0 4px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--hp-ink);
}

.hp-block p {
    max-width: 68ch;
}

.hp-block p + p {
    margin-top: 10px;
}

.hp-block ul {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    padding-left: 20px;
    list-style: disc;
}

.hp-block ul + p {
    margin-top: 10px;
}

.hp-block a,
.hp-block a:hover {
    color: var(--hp-navy-2);
    text-underline-offset: 3px;
}

.hp-block small {
    font-size: 13px;
}

/* — /guides: one column per topic, its guides stacked below — */
.hp-clusters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 48px 32px;
    align-items: start;
}

.hp-cluster-head {
    display: grid;
    gap: 8px;
    margin-bottom: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--hp-line-2);
}

.hp-cluster-head h2 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--hp-ink);
}

.hp-cluster-head p {
    font-size: 16px;
    color: var(--hp-mute);
}

.hp-guides--stack {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

/* — Account pages: brand context left, the form right — */
.hp-auth {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    min-height: calc(100vh - 73px);
    min-height: calc(100svh - 73px);
    background: var(--hp-bg-2);
}

.hp-auth-side {
    position: relative;
    display: flex;
    align-items: center;
    padding: 64px 56px 64px max(32px, calc((100vw - var(--hp-max)) / 2 + 32px));
    background: var(--hp-navy);
    color: #fff;
    overflow: hidden;
}

.hp-auth-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 30% 100%, #000 0%, transparent 74%);
    mask-image: radial-gradient(ellipse 90% 60% at 30% 100%, #000 0%, transparent 74%);
    pointer-events: none;
}

.hp-auth-side-in {
    position: relative;
    display: grid;
    gap: 20px;
    justify-items: start;
    max-width: 520px;
}

.hp-auth-side .hp-eyebrow {
    color: var(--hp-on-navy-2);
}

.hp-auth-claim {
    font-size: clamp(28px, 2.6vw, 42px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: #fff;
    text-wrap: balance;
}

.hp-auth-side .hp-checks {
    color: var(--hp-on-navy);
}

.hp-auth-side .hp-checks .hp-ic {
    color: var(--hp-acc);
}

.hp-auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 56px 32px;
}

.hp-auth-main > * {
    width: 100%;
    max-width: 520px;
}

.hp-auth-card {
    padding: 32px;
    border: 1px solid var(--hp-line);
    border-radius: 10px;
    background: #fff;
}

.hp-auth-card h2 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--hp-ink);
}

/* — Parts of the account forms (registration, new password, code
   confirmation). They sat in <style> blocks of the templates until
   2026-10-09. — */
.ref-key-input {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ref-key-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: var(--gv-secondary);
}

.ref-key-hint i {
    color: var(--gv-accent);
    flex-shrink: 0;
}

.partner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: var(--gv-primary);
    font-weight: 600;
}

.partner-badge i {
    color: var(--gv-primary);
    flex-shrink: 0;
}

.divider-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--gv-secondary);
    font-size: 0.85rem;
    margin: 1.5rem 0;
}

.divider-text::before,
.divider-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gv-border);
}

.newpw-icon {
    width: 64px;
    height: 64px;
    background: #f0fdf4;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.newpw-icon i {
    font-size: 28px;
    color: var(--gv-accent);
}

.pw-strength {
    height: 4px;
    border-radius: 2px;
    background: var(--gv-border);
    margin-top: 0.5rem;
    overflow: hidden;
    transition: all 0.3s;
}

.pw-strength-bar {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width 0.3s, background 0.3s;
}

.pw-strength-text {
    font-size: 0.78rem;
    margin-top: 0.25rem;
    font-weight: 600;
}

.token-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.token-error i {
    font-size: 24px;
    color: #ef4444;
}

/* — Code confirmation after registration and at login (six boxes).
   Registration is green, the login code blue: .verify-card--login. — */
.verify-card {
    text-align: center;
}

.verify-icon {
    width: 64px;
    height: 64px;
    background: #f0fdf4;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.verify-icon i {
    font-size: 28px;
    color: var(--gv-accent);
}

.email-highlight {
    font-weight: 700;
    color: var(--gv-primary);
}

.code-inputs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 1.5rem 0;
}

.code-inputs input {
    width: 52px;
    height: 60px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    border: 2px solid var(--gv-border);
    border-radius: 10px;
    transition: border-color 0.2s;
    outline: none;
}

.code-inputs input:focus {
    border-color: var(--gv-accent);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.code-inputs input.filled {
    border-color: var(--gv-accent);
    background: #f0fdf4;
}

/* Hidden real input for form submit */
.code-hidden {
    position: absolute;
    left: -9999px;
}

.resend-link {
    font-size: 0.85rem;
}

.resend-link .countdown {
    font-weight: 600;
    color: var(--gv-secondary);
}

.verify-card--login .verify-icon {
    background: #eff6ff;
}

.verify-card--login .verify-icon i {
    color: var(--gv-primary);
}

.verify-card--login .code-inputs input:focus {
    border-color: var(--gv-primary);
    box-shadow: 0 0 0 3px rgba(26, 35, 50, 0.1);
}

.verify-card--login .code-inputs input.filled {
    border-color: var(--gv-primary);
    background: #eff6ff;
}

/* — Short confirmation pages: the one allowed centred block, in the
   middle of the window (Layout guideline §3); the footer follows below — */
.hp-center {
    display: grid;
    place-items: center;
    min-height: 70vh;
    padding-block: 64px;
}

.hp-center > * {
    width: 100%;
    max-width: 640px;
}

/* — State pages: error pages (errors/_layout.html), the moment after
   sign-up, login and logout (auth/transition.html), suspended account.
   One card for all of them. — */
.hp-state {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 40px 32px;
    border: 1px solid var(--hp-line);
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.hp-state-mark {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--hp-acc-l);
    font-size: 28px;
    line-height: 1;
    color: var(--hp-acc-d);
}

.hp-state-mark--mute {
    background: var(--hp-bg-3);
    color: var(--hp-mute);
}

.hp-state-mark--warn {
    background: #fef3c7;
    color: #b45309;
}

.hp-state-code {
    font-family: var(--hp-mono);
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hp-mute);
}

.hp-state h1 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--hp-ink);
}

.hp-state p {
    max-width: 46ch;
    color: var(--hp-mute);
}

.hp-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.hp-state-dots {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}

.hp-state-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hp-line-2);
}

/* — Assessment — */
.hp-main .q-container {
    max-width: 880px;
    margin: 0;
    padding: 0;
}

.hp-gate {
    display: grid;
    gap: 20px;
    max-width: 880px;
}

.hp-gate h2 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--hp-ink);
}

.hp-gate > p {
    margin-top: -12px;
    font-size: 16px;
    color: var(--hp-mute);
}

.hp-gate-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* ══════════════════════════════════════════════════
   11. RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (min-width: 1600px) {
    .hp-work {
        grid-template-columns: 360px minmax(0, 1fr);
        column-gap: 64px;
    }
}

@media (min-width: 961px) {
    .hp-sticky {
        position: sticky;
        top: 112px;
    }
}

@media (max-width: 1279.98px) {
    .hp-work {
        grid-template-columns: 280px minmax(0, 1fr);
        column-gap: 32px;
    }

    .hp-blocks {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1100px) {
    .hp-svcs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .hp-nav-links,
    .hp-nav-txt {
        display: none;
    }

    .hp-burger {
        display: inline-flex;
    }
}

@media (min-width: 1181px) {
    .hp-menu {
        display: none;
    }
}

@media (max-width: 1023.98px) {
    .hp-wrap {
        padding-inline: 24px;
    }

    /* One column: the task first, the rest of the context after it. */
    .hp-work {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "lead"
            "main"
            "more";
        grid-template-rows: none;
        padding-block: 32px 56px;
    }

    .hp-work-more {
        position: static;
        margin-top: 32px;
    }

    .hp-auth {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .hp-auth-side {
        display: none;
    }

    .hp-auth-main {
        padding: 40px 24px 56px;
    }
}

@media (max-width: 1020px) {
    .hp-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
        padding-block: 40px 56px;
    }

    .hp-dossier {
        max-width: none;
    }

    .hp-cta-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 960px) {
    .hp-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

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

    .hp-foot-about {
        grid-column: 1 / -1;
    }

    .hp-foot-link {
        min-height: 44px;
    }

    .hp-step::before,
    .hp-step .hp-step-line {
        right: 0;
    }
}

@media (max-width: 767.98px) {
    .hp-wrap {
        padding-inline: 16px;
    }

    .hp-phead-in {
        padding-block: 32px 36px;
    }

    .hp-auth-main {
        padding: 24px 16px 40px;
    }

    .hp-auth-card {
        padding: 24px 20px;
    }

    .hp-gate-options {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .hp-facts,
    .hp-svcs,
    .hp-checks--two {
        grid-template-columns: minmax(0, 1fr);
    }

    .hp-btn--lg {
        width: 100%;
        min-height: 54px;
        padding-block: 12px;
        text-align: center;
        white-space: normal;
    }

    .hp-ans {
        padding-right: 0;
    }
}

/* ══════════════════════════════════════════════════
   12. MOTION
   Base state = final state. Animations only describe where an element
   comes from, so nothing depends on them to become visible.
   ══════════════════════════════════════════════════ */
@keyframes hp-rise {
    from { opacity: 0; translate: 0 22px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes hp-lineup {
    from { translate: 0 112%; }
    to { translate: 0 0; }
}

@keyframes hp-typing {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes hp-pop {
    from { opacity: 0; scale: .5; }
    to { opacity: 1; scale: 1; }
}

@keyframes hp-draw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes hp-drift {
    from { translate: 5% 0; }
    to { translate: -5% 0; }
}

@keyframes hp-dot {
    0%, 100% { opacity: .4; scale: 1; }
    50% { opacity: 1; scale: 1.3; }
}

.hp-d1 { --hp-d: .08s; }
.hp-d2 { --hp-d: .16s; }
.hp-d3 { --hp-d: .24s; }

@media (prefers-reduced-motion: no-preference) {
    /* Hero: plays once on load, pure CSS. */
    .hp-in {
        animation: hp-rise .8s var(--hp-ease) both;
    }

    .hp-in--3 { animation-delay: .3s; }
    .hp-in--4 { animation-delay: .4s; }
    .hp-in--5 { animation-delay: .5s; }
    .hp-in--8 { animation-delay: .8s; }

    .hp-hl > span {
        animation: hp-lineup .8s var(--hp-ease) both;
    }

    .hp-hl:nth-child(2) > span { animation-delay: .08s; }
    .hp-hl:nth-child(3) > span { animation-delay: .16s; }

    .hp-type {
        animation: hp-typing 1.3s steps(14, end) 1s both;
    }

    .hp-vatid .hp-ic {
        animation: hp-pop .5s var(--hp-ease) 2.4s both;
    }

    .hp-dossier::before {
        animation: hp-draw 1.1s var(--hp-ease) .6s both;
    }

    .hp-faq details[open] .hp-ans {
        animation: hp-rise .45s var(--hp-ease) both;
    }

    /* Redirect page: the mark pops in, the dots show that it moves on. */
    .hp-state--go .hp-state-mark {
        animation: hp-pop .5s var(--hp-ease) both;
    }

    .hp-state-dots span {
        animation: hp-dot 1.2s ease-in-out infinite;
    }

    .hp-state-dots span:nth-child(2) { animation-delay: .2s; }
    .hp-state-dots span:nth-child(3) { animation-delay: .4s; }

    /* Scroll reveals: public.js sets .hp-js on <html> and arms only what
       is below the fold; .is-in arrives from an IntersectionObserver. */
    .hp-js .hp-rv {
        opacity: 0;
    }

    .hp-js .hp-rv.is-still {
        opacity: 1;
    }

    .hp-js .hp-rv.is-in {
        animation: hp-rise .7s var(--hp-ease) var(--hp-d, 0s) both;
    }

    .hp-js .hp-seq:not(.is-in) .hp-step-line {
        transform: scaleX(0);
    }

    .hp-js .hp-seq.is-in .hp-step-line {
        animation: hp-draw .9s var(--hp-ease) .15s both;
    }

    .hp-js .hp-seq.is-in .hp-step:nth-child(2) .hp-step-line { animation-delay: .5s; }
    .hp-js .hp-seq.is-in .hp-step:nth-child(3) .hp-step-line { animation-delay: .85s; }
}

/* Decorative only, where the browser can tie it to the scroll position. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .hp-cta-ghost {
            animation: hp-drift linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }
    }
}