/* Homepage design layer. Scoped to .hp-* classes and homepage-only IDs so the
   shared header, footer and travel-perks rail keep their own styling. */
.hp {
    --hp-ink: #0b1220;
    --hp-ink-2: #1f2937;
    --hp-muted: #5b6475;
    --hp-line: #e5e7f0;
    --hp-surface: #ffffff;
    --hp-bg: #f6f7fb;
    --hp-brand: #4f46e5;
    --hp-brand-strong: #4338ca;
    --hp-brand-soft: #eef0ff;
    --hp-violet: #7c3aed;
    --hp-green: #059669;
    --hp-radius: 20px;
    --hp-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -8px rgba(15, 23, 42, .10);
    --hp-shadow-lg: 0 2px 4px rgba(15, 23, 42, .04), 0 24px 48px -16px rgba(49, 46, 129, .28);
    color: var(--hp-ink);
    -webkit-font-smoothing: antialiased;
}
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
.hp-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .hp-wrap { padding: 0 32px; } }

.hp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--hp-brand);
}
.hp-h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 800; color: var(--hp-ink); margin: 10px 0 0; }
.hp-lead { font-size: 1.0625rem; line-height: 1.65; color: var(--hp-muted); margin: 14px 0 0; max-width: 40rem; }
.hp-section { padding: 72px 0; }
@media (min-width: 1024px) { .hp-section { padding: 104px 0; } }
.hp-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 36px; }
.hp-section-head.is-center { flex-direction: column; align-items: center; text-align: center; }
.hp-section-head.is-center .hp-lead { margin-left: auto; margin-right: auto; }

.hp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 24px; border-radius: 14px;
    font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
    border: 0;
}
.hp-btn svg { width: 20px; height: 20px; flex: none; }
.hp-btn-primary { color: #fff; background: linear-gradient(135deg, var(--hp-brand) 0%, var(--hp-violet) 100%); box-shadow: 0 10px 24px -10px rgba(79, 70, 229, .7); }
.hp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -12px rgba(79, 70, 229, .8); color: #fff; }
.hp-btn-primary:active { transform: translateY(0); }
.hp-btn-light { color: var(--hp-ink); background: #fff; }
.hp-btn-light:hover { background: #f1f2ff; color: var(--hp-ink); }
.hp-btn-ghost { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.hp-btn-ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.hp-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--hp-brand); text-decoration: none; }
.hp-link:hover { color: var(--hp-brand-strong); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Hero ---------- */
.hp-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--hp-bg); padding: 28px 0 48px; }
@media (min-width: 640px) { .hp-hero { padding: 40px 0 64px; } }
.hp-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(40% 50% at 82% 30%, rgba(124, 58, 237, .16), transparent 70%),
        radial-gradient(45% 55% at 12% 10%, rgba(79, 70, 229, .14), transparent 70%),
        radial-gradient(30% 40% at 60% 90%, rgba(14, 165, 233, .10), transparent 70%);
}
.hp-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: radial-gradient(rgba(79, 70, 229, .14) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
@media (min-width: 1024px) { .hp-hero { padding: 72px 0 96px; } }
.hp-hero-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "finder" "proof"; }
@media (min-width: 1024px) {
    .hp-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: auto 1fr; grid-template-areas: "copy finder" "proof finder"; column-gap: 64px; row-gap: 32px; align-items: start; }
}
.hp-hero-copy { grid-area: copy; }
.hp-hero-finder { grid-area: finder; }
.hp-hero-proof { grid-area: proof; }
@media (min-width: 1024px) { .hp-hero-copy { padding-top: 24px; } }

.hp-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px var(--hp-line), 0 1px 2px rgba(15, 23, 42, .04);
    font-size: .8125rem; font-weight: 600; color: var(--hp-ink-2);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hp-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .18); }
.hp-hero h1 {
    margin: 18px 0 0; font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; color: var(--hp-ink);
}
.hp-gradient-text { background: linear-gradient(100deg, var(--hp-brand) 0%, var(--hp-violet) 60%, #c026d3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp-hero-lead { margin: 18px 0 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--hp-muted); max-width: 34rem; }

.hp-proof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-proof-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; line-height: 1.4; color: var(--hp-ink-2); font-weight: 500; }
.hp-proof-list svg { width: 20px; height: 20px; flex: none; color: var(--hp-green); margin-top: 1px; }
@media (max-width: 380px) { .hp-proof-list { grid-template-columns: minmax(0, 1fr); } }

.hp-wizard-cta {
    display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 16px; border-radius: 16px; text-decoration: none;
    background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px var(--hp-line); color: var(--hp-ink);
    transition: box-shadow .2s ease, background-color .2s ease;
}
.hp-wizard-cta:hover { background: #fff; box-shadow: inset 0 0 0 1px #c7cbfb, var(--hp-shadow); color: var(--hp-ink); }
.hp-wizard-icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--hp-brand), var(--hp-violet)); }
.hp-wizard-icon svg { width: 22px; height: 22px; }
.hp-wizard-cta strong { display: block; font-size: 1rem; }
.hp-wizard-cta span span { display: block; font-size: .875rem; color: var(--hp-muted); margin-top: 2px; }
.hp-wizard-cta .hp-arrow { margin-left: auto; width: 20px; height: 20px; color: var(--hp-brand); transition: transform .2s ease; }
.hp-wizard-cta:hover .hp-arrow { transform: translateX(3px); }

/* Finder card */
.hp-finder {
    position: relative; background: var(--hp-surface); border-radius: 24px; padding: 22px;
    box-shadow: var(--hp-shadow-lg), inset 0 0 0 1px rgba(229, 231, 240, .9);
}
.hp-finder::before {
    content: ""; position: absolute; inset: -1px; border-radius: 25px; padding: 1px; z-index: -1;
    background: linear-gradient(140deg, rgba(79, 70, 229, .5), rgba(124, 58, 237, .15) 40%, rgba(229, 231, 240, 0) 70%);
}
@media (min-width: 640px) { .hp-finder { padding: 30px; } }
.hp-finder-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.hp-finder-head h2 { margin: 0; font-size: 1.375rem; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--hp-ink); }
.hp-finder-badge { flex: none; font-size: .75rem; font-weight: 700; color: var(--hp-brand); background: var(--hp-brand-soft); padding: 5px 10px; border-radius: 999px; }
.hp-field + .hp-field { margin-top: 18px; }
.hp-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .9375rem; font-weight: 700; color: var(--hp-ink-2); }
.hp-step { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: var(--hp-brand); background: var(--hp-brand-soft); }
.hp-input-wrap { position: relative; }
.hp-input-wrap > svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: #8a92a6; pointer-events: none; }
.hp .hp-input, .hp .hp-select {
    width: 100%; min-height: 54px; border-radius: 14px; border: 1.5px solid var(--hp-line); background-color: #fbfbfe;
    font-size: 1rem; color: var(--hp-ink); padding: 0 16px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    -webkit-appearance: none; appearance: none;
}
.hp .hp-input { padding-left: 44px; }
.hp .hp-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hp .hp-select {
    padding-right: 44px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
}
.hp .hp-input:hover, .hp .hp-select:hover { border-color: #c9cde0; }
.hp .hp-input:focus, .hp .hp-select:focus { outline: none; border-color: var(--hp-brand); background-color: #fff; box-shadow: 0 0 0 4px rgba(79, 70, 229, .14); }
.hp-field.has-error .hp-input, .hp-field.has-error .hp-select, .hp-field.has-error .data-option { border-color: #ef4444; }

.hp-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.hp-quick-label { font-size: .8125rem; color: var(--hp-muted); margin-right: 2px; }
.hp-quick button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px 0 8px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--hp-line); background: #fff; font-size: .8125rem; font-weight: 600; color: var(--hp-ink-2);
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.hp-quick button:hover { border-color: #c7cbfb; background: var(--hp-brand-soft); color: var(--hp-brand-strong); }
.hp-quick button[disabled] { opacity: .45; cursor: default; }
.hp-quick img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
#selected-countries:empty { display: none; }
#selected-countries { margin-top: 10px; }
#selected-countries > div { min-height: 32px; padding: 0 6px 0 8px !important; font-size: .8125rem !important; gap: 4px; }
#selected-countries > div button { width: 22px !important; height: 22px !important; }

.hp-data-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hp .data-option {
    min-height: 74px; padding: 10px 6px; border-radius: 14px; border: 1.5px solid var(--hp-line); background: #fbfbfe; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hp .data-option:hover { border-color: #b4b9f5; background: #fff; }
.hp .data-option:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(79, 70, 229, .18); border-color: var(--hp-brand); }
.hp .data-option .hp-data-amount { font-size: 1.0625rem; font-weight: 800; color: var(--hp-ink); letter-spacing: -.01em; }
.hp .data-option .hp-data-note { font-size: .75rem; font-weight: 500; color: var(--hp-muted); }
.hp .data-option.selected { border-color: var(--hp-brand); background: var(--hp-brand-soft); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.hp .data-option.selected .hp-data-amount { color: var(--hp-brand-strong); }
.hp .data-option.selected .hp-data-note { color: var(--hp-brand); }
.hp-estimate { display: flex; justify-content: center; margin-top: 10px; }
.hp-estimate button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px; background: none; border: 0; cursor: pointer; font-size: .875rem; font-weight: 700; color: var(--hp-brand); }
.hp-estimate button:hover { color: var(--hp-brand-strong); text-decoration: underline; text-underline-offset: 3px; }
.hp-estimate svg { width: 16px; height: 16px; }

.hp-find { width: 100%; margin-top: 20px; min-height: 58px; font-size: 1.0625rem; border-radius: 16px; }
.hp-error { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #fef2f2; color: #b91c1c; font-size: .875rem; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.hp-error[hidden] { display: none; }
.hp-error svg { width: 18px; height: 18px; flex: none; }
.hp-finder-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 14px; font-size: .8125rem; color: var(--hp-muted); }
.hp-finder-foot span { display: inline-flex; align-items: center; gap: 6px; }
.hp-finder-foot svg { width: 14px; height: 14px; color: var(--hp-green); }

/* ---------- Trust strip ---------- */
.hp-trust { background: #fff; border-top: 1px solid var(--hp-line); border-bottom: 1px solid var(--hp-line); }
.hp-trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .hp-trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hp-trust-item { display: flex; align-items: center; gap: 12px; padding: 20px 8px; }
.hp-trust-item + .hp-trust-item { border-left: 1px solid var(--hp-line); padding-left: 16px; }
@media (max-width: 899px) {
    .hp-trust-item:nth-child(3) { border-left: 0; padding-left: 8px; }
    .hp-trust-item:nth-child(n+3) { border-top: 1px solid var(--hp-line); }
}
.hp-trust-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--hp-brand-soft); color: var(--hp-brand); }
.hp-trust-icon svg { width: 20px; height: 20px; }
.hp-trust-item strong { display: block; font-size: .9375rem; line-height: 1.25; color: var(--hp-ink); }
.hp-trust-item span span { display: block; font-size: .8125rem; line-height: 1.35; color: var(--hp-muted); margin-top: 2px; }
@media (max-width: 639px) {
    .hp-trust-item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 4px 18px 0; }
    .hp-trust-item + .hp-trust-item { padding-left: 16px; }
    .hp-trust-item:nth-child(3) { padding-left: 0; }
    .hp-trust-icon { width: 36px; height: 36px; border-radius: 10px; }
}

/* ---------- Popular destinations (cards rendered by server, then main.js) ---------- */
.hp-destinations { background: #fff; }
#popular-countries {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    /* Reserve the nine-card footprint so the client swap never shifts layout. */
    min-height: calc(5 * 84px + 4 * 12px); align-content: start;
}
@media (max-width: 767px) { #popular-countries > :nth-child(9):last-child { grid-column: 1 / -1; } }
@media (min-width: 768px) { #popular-countries { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; min-height: calc(3 * 96px + 2 * 16px); } }
#popular-countries > a, #popular-countries > article, #popular-countries > .hp-skel {
    position: relative; display: block; margin: 0; min-height: 84px; padding: 14px !important; border-radius: 18px !important;
    background: #fff !important; box-shadow: inset 0 0 0 1px var(--hp-line) !important; text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease;
}
@media (min-width: 768px) { #popular-countries > a, #popular-countries > article, #popular-countries > .hp-skel { min-height: 96px; padding: 20px !important; } }
#popular-countries > a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #c7cbfb, var(--hp-shadow) !important; }
#popular-countries > a .flex-shrink-0 { margin-right: 12px !important; }
#popular-countries > a img, #popular-countries > a .flex-shrink-0 > div { width: 40px !important; height: 40px !important; border-width: 0 !important; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08); }
@media (min-width: 768px) { #popular-countries > a img, #popular-countries > a .flex-shrink-0 > div { width: 48px !important; height: 48px !important; } }
#popular-countries > a h3 { font-size: 1rem !important; line-height: 1.25; font-weight: 800 !important; color: var(--hp-ink) !important; letter-spacing: -.01em; overflow-wrap: anywhere; }
@media (max-width: 420px) { #popular-countries > a h3 { font-size: .9375rem !important; } #popular-countries > a .flex-shrink-0 { margin-right: 10px !important; } #popular-countries > a img, #popular-countries > a .flex-shrink-0 > div { width: 34px !important; height: 34px !important; } }
@media (min-width: 768px) { #popular-countries > a h3 { font-size: 1.125rem !important; } }
#popular-countries > a .mt-3 { margin-top: 4px !important; }
#popular-countries > a .price-display { font-size: .875rem !important; font-weight: 600 !important; color: var(--hp-muted) !important; }
#popular-countries > a .currency-label { display: none; }
#popular-countries > a svg { width: 18px; height: 18px; flex: none; }
#popular-countries > a .flex-1 { min-width: 0; }
@media (max-width: 420px) { #popular-countries > a svg { display: none; } }
#popular-countries > article h3 { margin: 0; font-size: 1rem; font-weight: 800; }
#popular-countries > article h3 a { color: var(--hp-ink); text-decoration: none; }
#popular-countries > article h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
#popular-countries > article p { margin: 6px 0 0 !important; font-size: .8125rem; line-height: 1.45; color: var(--hp-muted); }
.hp-skel { overflow: hidden; }
.hp-skel::before, .hp-skel::after { content: ""; position: absolute; border-radius: 8px; background: #eef0f5; }
.hp-skel::before { left: 14px; top: 50%; width: 40px; height: 40px; border-radius: 50%; transform: translateY(-50%); }
.hp-skel::after { left: 66px; right: 24px; top: calc(50% - 14px); height: 28px; background: linear-gradient(90deg, #eef0f5 0%, #f6f7fb 50%, #eef0f5 100%); background-size: 200% 100%; animation: hp-shimmer 1.4s ease-in-out infinite; }
@keyframes hp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.hp-dest-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hp-dest-links a {
    display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px; text-decoration: none;
    font-size: .9375rem; font-weight: 700; color: var(--hp-ink-2); background: var(--hp-bg); box-shadow: inset 0 0 0 1px var(--hp-line);
}
.hp-dest-links a:hover { color: var(--hp-brand-strong); background: var(--hp-brand-soft); box-shadow: inset 0 0 0 1px #c7cbfb; }

/* Server-rendered one-week trip examples */
#home-trip-examples { margin-top: 56px !important; padding: 28px 20px; border-radius: var(--hp-radius); background: linear-gradient(160deg, #f5f3ff 0%, #eef2ff 55%, #f8fafc 100%); box-shadow: inset 0 0 0 1px #e4e2fb; }
@media (min-width: 768px) { #home-trip-examples { padding: 36px; } }
#home-trip-examples > h2 { font-size: 1.5rem !important; letter-spacing: -.02em; font-weight: 800 !important; color: var(--hp-ink) !important; margin: 0; }
#home-trip-examples > p { margin-top: 8px !important; font-size: .875rem; line-height: 1.6; color: var(--hp-muted) !important; max-width: 52rem; }
#home-trip-examples > div { gap: 14px !important; margin-top: 20px !important; }
#home-trip-examples article { position: relative; padding: 20px !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), inset 0 0 0 1px var(--hp-line) !important; transition: box-shadow .2s ease, transform .2s ease; }
#home-trip-examples article:hover { transform: translateY(-2px); box-shadow: var(--hp-shadow), inset 0 0 0 1px #c7cbfb !important; }
#home-trip-examples article h3 { font-size: 1.0625rem !important; font-weight: 800 !important; color: var(--hp-ink); margin: 0; }
#home-trip-examples article p { margin-top: 8px !important; font-size: .9375rem; color: var(--hp-ink-2); }
#home-trip-examples article a { display: inline-flex; font-weight: 700; color: var(--hp-brand) !important; text-decoration: none !important; }
#home-trip-examples article a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
#home-trip-examples article a:hover { text-decoration: underline !important; }

/* ---------- How it works ---------- */
.hp-how { background: var(--hp-bg); }
.hp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: hp-step; }
@media (min-width: 900px) { .hp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.hp-steps li { position: relative; padding: 26px; border-radius: var(--hp-radius); background: #fff; box-shadow: inset 0 0 0 1px var(--hp-line); }
.hp-steps li::before {
    counter-increment: hp-step; content: counter(hp-step);
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 18px;
    font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--hp-brand), var(--hp-violet));
    box-shadow: 0 8px 18px -8px rgba(79, 70, 229, .8);
}
.hp-steps h3 { margin: 0; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; color: var(--hp-ink); }
.hp-steps p { margin: 8px 0 0; font-size: .9375rem; line-height: 1.6; color: var(--hp-muted); }
.hp-steps a { color: var(--hp-brand); font-weight: 700; text-decoration: none; }
.hp-steps a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Benefits ---------- */
.hp-benefits { background: #fff; }
.hp-benefit-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .hp-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hp-benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.hp-benefit { padding: 24px; border-radius: var(--hp-radius); background: var(--hp-bg); box-shadow: inset 0 0 0 1px var(--hp-line); }
.hp-benefit-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--hp-brand); box-shadow: inset 0 0 0 1px var(--hp-line), 0 2px 6px -2px rgba(15, 23, 42, .08); }
.hp-benefit-icon svg { width: 22px; height: 22px; }
.hp-benefit h3 { margin: 16px 0 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; color: var(--hp-ink); }
.hp-benefit p { margin: 6px 0 0; font-size: .9375rem; line-height: 1.6; color: var(--hp-muted); }

/* ---------- Device check + setup help ---------- */
.hp-ready { background: #fff; padding-top: 0; }
.hp-ready-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .hp-ready-grid { grid-template-columns: 1.2fr 1fr; gap: 20px; } }
.hp-ready-card { position: relative; overflow: hidden; padding: 28px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--hp-line); }
@media (min-width: 640px) { .hp-ready-card { padding: 36px; } }
.hp-ready-card.is-accent { color: #fff; background: radial-gradient(120% 140% at 100% 0%, #7c3aed 0%, #4f46e5 45%, #312e81 100%); box-shadow: none; }
.hp-ready-card.is-accent .hp-eyebrow { color: #c7d2fe; }
.hp-ready-card.is-accent h2 { color: #fff; }
.hp-ready-card.is-accent p { color: #e0e7ff; }
.hp-ready-card h2 { margin: 10px 0 0; font-size: 1.625rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 800; color: var(--hp-ink); }
.hp-ready-card p { margin: 10px 0 0; font-size: 1rem; line-height: 1.6; color: var(--hp-muted); max-width: 32rem; }
.hp-ready-card .hp-btn { margin-top: 22px; }
.hp-ready-card.is-accent::after {
    content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%;
    border: 28px solid rgba(255, 255, 255, .08);
}
.hp-help-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.hp-help-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: 14px;
    text-decoration: none; font-weight: 700; color: var(--hp-ink-2); background: var(--hp-bg); box-shadow: inset 0 0 0 1px var(--hp-line);
}
.hp-help-list a:hover { color: var(--hp-brand-strong); background: var(--hp-brand-soft); box-shadow: inset 0 0 0 1px #c7cbfb; }
.hp-help-list svg { width: 18px; height: 18px; color: var(--hp-brand); flex: none; }

/* ---------- FAQ ---------- */
.hp-faq { background: #fff; }
.hp-faq-grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .hp-faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; } }
.hp-faq-list { border-top: 1px solid var(--hp-line); }
.hp-faq details { border-bottom: 1px solid var(--hp-line); }
.hp-faq summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 2px; font-size: 1.0625rem; font-weight: 700; color: var(--hp-ink);
}
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after {
    content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background-color: var(--hp-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234f46e5'%3E%3Cpath d='M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 16px; transition: transform .2s ease;
}
.hp-faq details[open] summary::after { transform: rotate(45deg); }
.hp-faq summary:hover { color: var(--hp-brand-strong); }
.hp-faq details p { margin: 0 0 20px; padding-right: 40px; font-size: .9875rem; line-height: 1.7; color: var(--hp-muted); }
.hp-faq details a { color: var(--hp-brand); font-weight: 600; }

/* ---------- Final CTA ---------- */
.hp-final { background: #fff; padding: 0 0 80px; }
.hp-final-card {
    position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; padding: 44px 24px; text-align: center; color: #fff;
    background: #0b1220;
}
@media (min-width: 640px) { .hp-final-card { padding: 72px 48px; } }
.hp-final-card::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(50% 80% at 85% 10%, rgba(124, 58, 237, .55), transparent 70%),
        radial-gradient(45% 70% at 10% 100%, rgba(79, 70, 229, .55), transparent 70%);
}
.hp-final-card::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
    background-image: radial-gradient(rgba(255, 255, 255, .25) 1px, transparent 1px); background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent);
}
.hp-final-card h2 { margin: 0 auto; max-width: 40rem; font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; color: #fff; }
.hp-final-card p { margin: 16px auto 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.6; color: #c7d2fe; }
.hp-final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
@media (max-width: 479px) { .hp-final-actions .hp-btn { width: 100%; } }

/* Sticky mobile CTA: appears once the finder has scrolled away. */
.hp-sticky {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    transform: translateY(140%); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease;
}
.hp-sticky.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.hp-sticky .hp-btn { width: 100%; min-height: 54px; box-shadow: 0 16px 32px -12px rgba(49, 46, 129, .65); }
@media (min-width: 640px) { .hp-sticky { left: 50%; right: auto; width: 440px; margin-left: -220px; } }
@media (min-width: 1024px) { .hp-sticky { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .hp *, .hp *::before, .hp *::after { transition: none !important; animation: none !important; }
}