/* =============================================================================
   Homepage — Stitch design (content only; header/footer unchanged)
   Uses global tokens from tokens.css
   ========================================================================== */

.hp {
    --hp-font-display: var(--font-sans);
    --hp-blue: var(--color-accent);
    --hp-blue-dark: #0051d5;
    --hp-blue-soft: #dbeafe;
    --hp-surface: #f8f9ff;
    --hp-surface-alt: #eff4ff;
    --hp-surface-muted: rgba(229, 238, 255, 0.45);
    background: var(--hp-surface);
}

/* ---- Promo strip -------------------------------------------------------- */

.hp-promo {
    padding: var(--space-4) 0 0;
}

.hp-promo__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    background: #e8f5e9;
    border: 1px solid rgba(5, 150, 105, 0.12);
}

.hp-promo__text {
    margin: 0;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: #14532d;
    line-height: 1.45;
}

.hp-promo__link {
    flex-shrink: 0;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    color: #14532d;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hp-promo__link:hover {
    color: var(--color-success);
}

/* ---- Hero --------------------------------------------------------------- */

.hp-hero {
    padding: var(--space-4) 0 var(--space-10);
    background: var(--hp-surface);
}

.hp-hero__panel {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: var(--color-primary);
    color: #fff;
    padding: clamp(var(--space-10), 7vw, var(--space-16)) clamp(var(--space-6), 4vw, var(--space-12));
    min-height: clamp(420px, 52vw, 520px);
    display: flex;
    align-items: center;
    transition: min-height 0.01s linear;
}

.hp-hero__bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.72) 52%, rgba(15, 23, 42, 0.45) 100%),
        url("https://images.unsplash.com/photo-1521737711862-e3b97375f902?w=1600&q=80") center/cover no-repeat;
    pointer-events: none;
}

.hp-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin-inline: auto;
    text-align: center;
}

.hp-persona {
    margin: 0 0 var(--space-8);
}

.hp-persona__label {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.hp-persona__toggle {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hp-persona__btn {
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font: inherit;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    padding: 10px 22px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.hp-persona__btn.is-active {
    background: #fff;
    color: var(--color-primary);
    border-color: transparent;
    box-shadow: var(--shadow-1);
}

.hp-persona__btn:not(.is-active):hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.hp-persona__btn-label--short {
    display: none;
}

.hp-hero__title {
    font-family: var(--hp-font-display);
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 var(--space-4);
    max-width: none;
}

.hp-hero__lede {
    font-size: clamp(var(--fs-body-md), 2vw, var(--fs-body-lg));
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, 0.88);
    margin: 0 auto var(--space-8);
    max-width: 62ch;
}

/* Hero copy collapse (Upwork-style search focus).
   Panel height is locked in JS so collapsing copy never shifts the page. */
.hp-hero__copy {
    overflow: hidden;
    max-height: 280px;
    opacity: 1;
    transform: translateY(0);
    transition:
        max-height 0.4s var(--ease),
        opacity 0.28s var(--ease),
        transform 0.36s var(--ease);
}

.hp-hero.is-search-open .hp-hero__copy {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.hp-hero.is-search-open .hp-trust,
.hp-hero.is-search-open [data-hp-quicklinks-seeker],
.hp-hero.is-search-open [data-hp-quicklinks-provider] {
    opacity: 0;
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity 0.22s var(--ease),
        max-height 0.36s var(--ease),
        margin 0.36s var(--ease),
        visibility 0.22s var(--ease);
}

.hp-hero__stage {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

.hp-hero__title [hidden],
.hp-hero__lede [hidden] {
    display: none;
}

[data-hp-seeker-panel],
[data-hp-provider-panel],
[data-hp-quicklinks-seeker],
[data-hp-quicklinks-provider] {
    transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}

.hp.is-persona-switching .hp-hero__stage,
.hp.is-persona-switching .hp-quicklinks:not([hidden]),
.hp.is-persona-switching .hp-hero__copy {
    opacity: 0.28;
    transform: translateY(8px);
    pointer-events: none;
}

/* Search */
.hp-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 760px;
    margin: 0 auto;
    padding: 6px 6px 6px var(--space-4);
    background: #fff;
    border: none;
    border-radius: var(--radius-full);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
    transition: box-shadow var(--dur-base) var(--ease), transform 0.36s var(--ease);
}

.hp-hero.is-search-open .hp-search {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32), 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.hp-search:focus-within {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.hp-search__field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: 0 var(--space-2);
}

.hp-search__field > .bi {
    color: var(--on-surface-muted);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.hp-search:focus-within .hp-search__field > .bi {
    color: var(--hp-blue);
}

.hp-search__input {
    width: 100%;
    height: 52px;
    border: none;
    background: transparent;
    font: inherit;
    font-size: var(--fs-body-md);
    color: var(--on-surface);
    outline: none;
}

.hp-search__input::placeholder {
    color: var(--on-surface-muted);
}

.hp-search__submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 var(--space-6);
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    font: inherit;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}

.hp-search__submit .bi {
    font-size: 1rem;
}

.hp-search__submit:hover {
    background: var(--color-primary-hover);
}

.hp-search__submit:active {
    transform: scale(0.98);
}

/* Popular search suggestions (search focus) */
.hp-search-suggest {
    margin-top: var(--space-5);
    text-align: left;
    opacity: 0;
    transform: translateY(8px);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
        opacity 0.3s var(--ease) 0.06s,
        transform 0.36s var(--ease),
        max-height 0.4s var(--ease);
}

.hp-hero.is-search-open .hp-search-suggest {
    opacity: 1;
    transform: translateY(0);
    max-height: 420px;
    pointer-events: auto;
    overflow: auto;
}

.hp-search-suggest__pane {
    transition:
        opacity 0.28s var(--ease),
        transform 0.32s var(--ease),
        max-height 0.36s var(--ease);
    opacity: 0;
    transform: translateY(8px);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
}

.hp-search-suggest__pane.is-active {
    opacity: 1;
    transform: translateY(0);
    max-height: 400px;
    pointer-events: auto;
    overflow: auto;
}

.hp-search-suggest.is-filtering [data-hp-suggest-popular] {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    pointer-events: none;
    overflow: hidden;
}

.hp-search-suggest__intro {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, 0.82);
}

.hp-search-suggest__group + .hp-search-suggest__group {
    margin-top: var(--space-4);
}

.hp-search-suggest__label {
    margin: 0 0 var(--space-2);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.hp-search-suggest__label .bi {
    font-size: 0.95rem;
    color: #93c5fd;
}

.hp-search-suggest__hint {
    font-size: 11px;
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.55);
}

.hp-search-suggest__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.hp-search-suggest__smart {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.hp-search-suggest__smart-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
    animation: hp-chip-in 0.28s var(--ease) both;
}

.hp-search-suggest__smart-link .bi {
    font-size: 1.15rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.hp-search-suggest__smart-link span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.hp-search-suggest__smart-link strong {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
}

.hp-search-suggest__smart-link small {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.35;
}

.hp-search-suggest__smart-link:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.hp-search-suggest__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
    animation: hp-chip-in 0.28s var(--ease) both;
}

.hp-search-suggest__chip .bi {
    font-size: 0.9rem;
    opacity: 0.9;
    flex-shrink: 0;
}

.hp-search-suggest__chip-text {
    min-width: 0;
}

.hp-search-suggest__chip-tag {
    margin-left: 2px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.22);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.9;
}

.hp-search-suggest__chip--consultants {
    border-color: rgba(147, 197, 253, 0.45);
}

.hp-search-suggest__chip--franchises {
    border-color: rgba(253, 186, 116, 0.5);
}

.hp-search-suggest__chip--businesses {
    border-color: rgba(167, 243, 208, 0.45);
}

.hp-search-suggest__chip--consultants .bi { color: #93c5fd; }
.hp-search-suggest__chip--franchises .bi { color: #fdba74; }
.hp-search-suggest__chip--businesses .bi { color: #6ee7b7; }

.hp-search-suggest__chip:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.hp-search-suggest__empty {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-body-sm);
    color: rgba(255, 255, 255, 0.72);
}

@keyframes hp-chip-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Provider CTAs inside hero (replaces search when provider persona active) */
.hp.hp--provider .hp-hero-provider:not([hidden]) {
    animation: hp-fade-up 0.38s var(--ease) both;
}

.hp-hero-provider__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.hp-hero-provider .hp-provider__btn {
    min-height: 48px;
    padding: 12px 22px;
    font-size: var(--fs-body-sm);
}

.hp.hp--provider [data-hp-seeker-panel],
.hp.hp--provider [data-hp-search-suggest] {
    display: none !important;
}

.hp:not(.hp--provider) [data-hp-provider-panel] {
    display: none !important;
}

.hp.hp--provider [data-hp-provider-strip] {
    display: none;
}

.hp.hp--provider [data-hp-quicklinks-seeker] {
    display: none !important;
}

.hp:not(.hp--provider) [data-hp-quicklinks-provider] {
    display: none !important;
}

.hp.hp--provider [data-hp-quicklinks-provider]:not([hidden]) {
    animation: hp-fade-up 0.38s var(--ease) both;
}

@keyframes hp-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Quick links */
.hp-quicklinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    max-height: 200px;
    opacity: 1;
    transition: opacity 0.28s var(--ease), max-height 0.36s var(--ease), margin 0.36s var(--ease);
}

.hp-quicklink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}

.hp-quicklink .bi {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.hp-quicklink:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.hp-quicklink:hover .bi {
    color: #fff;
}

/* Trust row */
.hp-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6) var(--space-8);
    margin-top: var(--space-8);
    max-height: 120px;
    opacity: 1;
    transition: opacity 0.28s var(--ease), max-height 0.36s var(--ease), margin 0.36s var(--ease);
}

.hp-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: rgba(255, 255, 255, 0.92);
}

.hp-trust__item .bi {
    color: #93c5fd;
    font-size: 1.1rem;
}

/* Provider mode highlight */
.hp.hp--provider .hp-hero__panel {
    box-shadow: inset 0 0 0 2px rgba(33, 150, 243, 0.55);
}

.hp.hp--provider .hp-hero__stage {
    max-width: 820px;
}

/* ---- Provider strip ----------------------------------------------------- */

.hp-provider {
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-5) 0;
}

.hp-provider__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.hp-provider__title {
    margin: 0;
    font-family: var(--hp-font-display);
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.hp-provider__sub {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    opacity: 0.65;
}

.hp-provider__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.hp-provider__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: var(--radius-lg);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}

.hp-provider__btn--outline {
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    background: transparent;
}

.hp-provider__btn--outline:hover {
    background: #fff;
    color: var(--color-primary);
    text-decoration: none;
}

.hp-provider__btn--accent {
    border: none;
    background: var(--hp-blue);
    color: #fff;
}

.hp-provider__btn--accent:hover {
    background: var(--color-accent-hover);
    text-decoration: none;
    transform: scale(1.02);
}

/* ---- Sections ----------------------------------------------------------- */

.hp-section {
    padding: var(--space-12) 0;
}

.hp-section--alt {
    background: var(--hp-surface-alt);
}

.hp-section--muted {
    background: var(--hp-surface-muted);
    border-block: 1px solid var(--outline-variant);
}

.hp-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.hp-section-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: var(--space-10);
}

.hp-section-head h2 {
    font-family: var(--hp-font-display);
    font-size: clamp(1.5rem, 3vw, var(--fs-heading-lg));
    font-weight: var(--fw-bold);
    margin: 0;
    color: var(--color-primary);
}

.hp-section-head p {
    margin: var(--space-2) 0 0;
    color: var(--on-surface-variant);
    font-size: var(--fs-body-md);
}

.hp-section-head--center p {
    margin-top: var(--space-3);
}

.hp-section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hp-blue);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    text-decoration: none;
    white-space: nowrap;
}

.hp-section-link:hover {
    text-decoration: underline;
}

.hp-eyebrow {
    display: block;
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hp-blue);
    margin-bottom: var(--space-2);
}

.hp-split__title {
    font-family: var(--hp-font-display);
    font-size: clamp(1.5rem, 3vw, var(--fs-heading-lg));
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-8);
    color: var(--color-primary);
}

/* ---- Action hub --------------------------------------------------------- */

.hp-hub-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
}

.hp-hub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-8) var(--space-6);
    background: var(--surface-bright);
    border: 1px solid var(--outline-variant);
    border-radius: 16px;
    box-shadow: var(--shadow-1);
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.hp-hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(33, 150, 243, 0.1);
    border-color: rgba(33, 150, 243, 0.25);
    text-decoration: none;
}

.hp-hub-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(33, 150, 243, 0.1);
    color: var(--hp-blue);
    font-size: 1.75rem;
    margin-bottom: var(--space-6);
    transition: background var(--dur-base) var(--ease);
}

.hp-hub-card:hover .hp-hub-card__icon {
    background: rgba(33, 150, 243, 0.18);
}

.hp-hub-card h3 {
    font-family: var(--hp-font-display);
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-3);
    color: var(--color-primary);
}

.hp-hub-card p {
    margin: 0 0 var(--space-6);
    font-size: var(--fs-body-sm);
    color: var(--on-surface-variant);
    line-height: var(--lh-body);
    flex: 1;
}

.hp-hub-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--hp-blue);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    transition: gap var(--dur-base) var(--ease);
}

.hp-hub-card:hover .hp-hub-card__cta {
    gap: 8px;
}

/* ---- Demands ------------------------------------------------------------ */

.hp-demands-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.hp-demand-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    background: var(--surface-bright);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    transition: border-color var(--dur-base) var(--ease);
}

.hp-demand-card:hover {
    border-color: var(--hp-blue);
}

.hp-demand-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.hp-demand-card__tag {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--hp-blue-soft);
    color: var(--hp-blue-dark);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
}

.hp-demand-card__time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-caption);
    color: var(--on-surface-muted);
    white-space: nowrap;
}

.hp-demand-card__title {
    font-family: var(--hp-font-display);
    font-size: var(--fs-body-md);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    margin: 0 0 var(--space-4);
}

.hp-demand-card__title a {
    color: var(--color-primary);
    text-decoration: none;
}

.hp-demand-card__title a:hover {
    color: var(--hp-blue);
}

.hp-demand-card__stats {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    margin-top: auto;
}

.hp-demand-card__stats > div:last-child {
    text-align: right;
}

.hp-demand-card__stat-label {
    margin: 0;
    font-size: var(--fs-caption);
    color: var(--on-surface-muted);
}

.hp-demand-card__stat-value {
    margin: 2px 0 0;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
}

.hp-demand-card__stat-value--budget {
    color: var(--hp-blue);
}

.hp-demand-card__btn {
    display: block;
    margin-top: var(--space-4);
    padding: 12px;
    text-align: center;
    border-radius: var(--radius-lg);
    background: var(--hp-surface-alt);
    color: var(--on-surface);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.hp-demand-card__btn:hover {
    background: var(--hp-blue);
    color: #fff;
    text-decoration: none;
}

/* ---- Popular searches + cities ---------------------------------------- */

.hp-split {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr);
    gap: var(--space-12);
    align-items: start;
}

.hp-search-group {
    margin-bottom: var(--space-6);
}

.hp-search-group:last-child {
    margin-bottom: 0;
}

.hp-search-group__label {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-surface-muted);
}

.hp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.hp-chip {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: var(--hp-surface-alt);
    color: var(--on-surface);
    font-size: var(--fs-body-sm);
    text-decoration: none;
    transition: background var(--dur-base) var(--ease);
}

.hp-chip:hover {
    background: var(--hp-blue-soft);
    text-decoration: none;
}

.hp-city-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.hp-city-tile {
    position: relative;
    display: block;
    height: 96px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-1);
}

.hp-city-tile__bg {
    position: absolute;
    inset: 0;
    transition: transform var(--dur-slow) var(--ease);
}

.hp-city-tile:hover .hp-city-tile__bg {
    transform: scale(1.08);
}

.hp-city-tile__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: var(--space-3);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 70%);
}

.hp-city-tile__name {
    color: #fff;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
}

.hp-city-tile--more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hp-blue);
    color: #fff;
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
}

.hp-city-tile--more:hover {
    background: var(--hp-blue-dark);
    text-decoration: none;
}

/* ---- Featured tabs ------------------------------------------------------ */

.hp-tabs {
    display: inline-flex;
    padding: 4px;
    border-radius: var(--radius-xl);
    background: var(--hp-surface-alt);
    gap: 2px;
}

.hp-tabs__tab {
    border: none;
    background: transparent;
    color: var(--on-surface-variant);
    font: inherit;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.hp-tabs__tab.is-active {
    background: var(--surface-bright);
    color: var(--hp-blue);
    box-shadow: var(--shadow-1);
}

.hp-tabs__tab:not(.is-active):hover {
    color: var(--hp-blue);
}

.hp-tab-pane[hidden] {
    display: none !important;
}

.hp-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
}

.hp-featured-card {
    background: var(--surface-bright);
    border: 1px solid var(--outline-variant);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.hp-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(33, 150, 243, 0.08);
}

.hp-featured-card__media {
    position: relative;
    height: 192px;
    background: var(--hp-surface-alt);
    overflow: hidden;
}

.hp-featured-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-featured-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--hp-font-display);
    font-size: 3rem;
    font-weight: var(--fw-bold);
    color: var(--hp-blue);
    background: linear-gradient(135deg, var(--hp-surface-alt), var(--hp-blue-soft));
}

.hp-featured-card__verified {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--hp-blue);
    color: #fff;
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
}

.hp-featured-card__body {
    padding: var(--space-6);
}

.hp-featured-card__title {
    font-family: var(--hp-font-display);
    font-size: var(--fs-body-md);
    font-weight: var(--fw-semibold);
    margin: 0 0 4px;
    line-height: 1.3;
}

.hp-featured-card__title a {
    color: var(--color-primary);
    text-decoration: none;
}

.hp-featured-card__title a:hover {
    color: var(--hp-blue);
}

.hp-featured-card__cat {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--hp-blue);
}

.hp-featured-card__loc {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-5);
    font-size: var(--fs-caption);
    color: var(--on-surface-muted);
}

.hp-featured-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.hp-featured-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
}

.hp-featured-card__rating .bi-star-fill {
    color: var(--color-rating);
}

.hp-featured-card__rating span {
    font-weight: var(--fw-medium);
    color: var(--on-surface-muted);
}

.hp-featured-card__link {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    color: var(--hp-blue);
    text-decoration: none;
}

.hp-featured-card__link:hover {
    text-decoration: underline;
}

/* ---- Platform services -------------------------------------------------- */

.hp-services-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
}

.hp-service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-height: 160px;
    padding: var(--space-8) var(--space-4);
    border-radius: 16px;
    text-align: center;
    text-decoration: none;
    transition: transform var(--dur-base) var(--ease);
}

.hp-service-card .bi {
    font-size: 2rem;
}

.hp-service-card h4 {
    font-family: var(--hp-font-display);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    margin: 0;
    line-height: 1.35;
}

.hp-service-card--primary {
    background: var(--color-primary);
    color: #fff;
}

.hp-service-card--primary .bi {
    color: var(--hp-blue-soft);
}

.hp-service-card--secondary {
    background: var(--hp-blue);
    color: #fff;
}

.hp-service-card--surface {
    background: var(--hp-surface-alt);
    color: var(--color-primary);
}

.hp-service-card--surface .bi {
    color: var(--hp-blue);
}

.hp-service-card--outline {
    background: var(--surface-bright);
    border: 1px solid var(--outline-variant);
    color: var(--color-primary);
}

.hp-service-card--outline .bi {
    color: var(--hp-blue);
}

.hp-service-card:hover {
    transform: scale(1.03);
    text-decoration: none;
}

/* ---- How it works ------------------------------------------------------- */

.hp-how-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.hp-how-panel {
    padding: var(--space-8);
    border-radius: 24px;
    background: var(--hp-surface-alt);
    border: 1px solid var(--outline-variant);
}

.hp-how-panel__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.hp-how-panel__head .bi {
    font-size: 1.75rem;
    color: var(--hp-blue);
}

.hp-how-panel__head h3 {
    font-family: var(--hp-font-display);
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
    margin: 0;
    color: var(--color-primary);
}

.hp-how-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.hp-how-steps li {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.hp-how-steps__num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--hp-blue);
    color: #fff;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
}

.hp-how-steps p {
    margin: 0;
    font-size: var(--fs-body-sm);
    color: var(--on-surface-variant);
    line-height: var(--lh-body);
}

.hp-how-steps strong {
    color: var(--on-surface);
}

/* ---- Discover banners --------------------------------------------------- */

.hp-discover-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.hp-discover-banner {
    position: relative;
    display: block;
    min-height: 320px;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-2);
}

.hp-discover-banner__bg {
    position: absolute;
    inset: 0;
    transition: transform var(--dur-slow) var(--ease);
}

.hp-discover-banner:hover .hp-discover-banner__bg {
    transform: scale(1.05);
}

.hp-discover-banner__overlay {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 320px;
    padding: var(--space-10);
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.45) 100%);
    color: #fff;
}

.hp-discover-banner--resources .hp-discover-banner__overlay {
    background: linear-gradient(90deg, rgba(0, 81, 213, 0.9) 0%, rgba(49, 107, 243, 0.5) 100%);
}

.hp-discover-banner h3 {
    font-family: var(--hp-font-display);
    font-size: clamp(1.35rem, 2.5vw, var(--fs-heading-md));
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-4);
    color: #fff;
}

.hp-discover-banner p {
    margin: 0 0 var(--space-6);
    max-width: 36ch;
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
    opacity: 0.88;
}

.hp-discover-banner__btn {
    display: inline-flex;
    align-self: flex-start;
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    background: var(--hp-blue);
    color: #fff;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
}

.hp-discover-banner--resources .hp-discover-banner__btn {
    background: var(--color-primary);
}

.hp-discover-banner:hover {
    text-decoration: none;
}

/* ---- Final CTA ---------------------------------------------------------- */

.hp-cta {
    padding: var(--space-12) 0 var(--space-20);
}

.hp-cta__box {
    position: relative;
    overflow: hidden;
    padding: var(--space-16) var(--space-8);
    border-radius: 40px;
    background: linear-gradient(135deg, var(--hp-blue-dark) 0%, var(--hp-blue) 55%, #42a5f5 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--shadow-3);
}

.hp-cta__box::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: radial-gradient(circle at 2px 2px, #fff 1px, transparent 0);
    background-size: 40px 40px;
    pointer-events: none;
}

.hp-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.hp-cta__inner h2 {
    font-family: var(--hp-font-display);
    font-size: clamp(1.75rem, 4vw, var(--fs-display-xl));
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
    color: #fff;
    margin: 0 0 var(--space-4);
}

.hp-cta__inner p {
    margin: 0 0 var(--space-8);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, 0.92);
}

.hp-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

.hp-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--radius-xl);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    text-decoration: none;
    transition: transform var(--dur-base) var(--ease);
}

.hp-cta__btn:hover {
    transform: scale(1.03);
    text-decoration: none;
}

.hp-cta__btn--dark {
    background: var(--color-primary);
    color: #fff;
}

.hp-cta__btn--light {
    background: #fff;
    color: var(--hp-blue);
}

/* ---- Responsive --------------------------------------------------------- */

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

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

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

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

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

    .hp-split {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .hp-demands-grid {
        grid-template-columns: 1fr;
    }

    .hp-how-grid,
    .hp-discover-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Hero — native Android app layout (≤900px) ------------------------- */

@media (max-width: 900px) {
    .hp-promo {
        padding: var(--space-3) 0 0;
    }

    .hp-promo__inner {
        border-radius: 16px;
        padding: var(--space-3) var(--space-4);
    }

    .hp-promo__text {
        font-size: var(--fs-caption);
        line-height: 1.4;
    }

    .hp-hero {
        padding: var(--space-3) 0 var(--space-6);
    }

    .hp-hero > .container {
        padding-inline: var(--space-4);
    }

    body.has-mobile-shell .hp-hero > .container {
        padding-inline: 0;
    }

    .hp-hero__panel {
        min-height: 480px;
        border-radius: 24px;
        padding:
            var(--space-6)
            max(var(--space-4), env(safe-area-inset-right, 0px))
            var(--space-8)
            max(var(--space-4), env(safe-area-inset-left, 0px));
        box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18);
    }

    body.has-mobile-shell .hp-hero__panel {
        border-radius: 0 0 28px 28px;
    }

    .hp-hero__bg {
        background:
            linear-gradient(180deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.94) 100%),
            url("https://images.unsplash.com/photo-1521737711862-e3b97375f902?w=1200&q=75") center/cover no-repeat;
    }

    .hp-hero__inner {
        max-width: none;
        margin-inline: 0;
        text-align: left;
    }

    .hp-persona {
        margin: 0 0 var(--space-5);
    }

    .hp-persona__label {
        font-size: 11px;
        letter-spacing: 0.1em;
        margin-bottom: var(--space-3);
        text-align: left;
    }

    .hp-persona__toggle {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 4px;
        padding: 4px;
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.28);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .hp-persona__btn {
        width: 100%;
        min-height: 48px;
        padding: 10px 8px;
        border-radius: 11px;
        font-size: 12px;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
    }

    .hp-persona__btn-label--full {
        display: none;
    }

    .hp-persona__btn-label--short {
        display: inline;
    }

    .hp-persona__btn.is-active {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    }

    .hp-hero__title {
        font-size: clamp(1.35rem, 5.8vw, 1.75rem);
        line-height: 1.22;
        letter-spacing: -0.02em;
        margin-bottom: var(--space-3);
        text-align: left;
    }

    .hp-hero__lede {
        margin: 0 0 var(--space-5);
        max-width: none;
        font-size: var(--fs-body-sm);
        line-height: 1.55;
        text-align: left;
        color: rgba(255, 255, 255, 0.82);
    }

    .hp-hero__copy {
        max-height: 320px;
    }

    .hp-hero__stage {
        max-width: none;
        margin: 0;
    }

    .hp-search-suggest {
        text-align: left;
    }

    .hp-search-suggest__chips {
        gap: 8px;
    }

    .hp-search-suggest__chip {
        padding: 9px 12px;
        font-size: var(--fs-caption);
    }

    .hp-search-suggest__smart {
        grid-template-columns: 1fr;
    }

    .hp-search-suggest__chip-tag {
        display: none;
    }

    .hp-hero-provider__actions {
        justify-content: stretch;
        flex-direction: column;
    }

    .hp-hero-provider .hp-provider__btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Material filled search bar — single row */
    .hp-search {
        flex-direction: row;
        align-items: center;
        max-width: none;
        margin: 0;
        min-height: 56px;
        padding: 4px 4px 4px var(--space-4);
        border-radius: 28px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    }

    .hp-search__field {
        padding: 0;
    }

    .hp-search__field > .bi {
        font-size: 1.1rem;
    }

    .hp-search__input {
        height: 48px;
        font-size: var(--fs-body-sm);
    }

    .hp-search__submit {
        width: auto;
        min-width: 48px;
        height: 48px;
        min-height: 48px;
        padding: 0 var(--space-5);
        border-radius: 24px;
        font-size: var(--fs-caption);
        font-weight: var(--fw-bold);
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .hp-search__submit .bi {
        display: none;
    }

    /* Android shortcut grid — 2 per row */
    .hp-quicklinks {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
        margin-top: var(--space-5);
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
    }

    .hp-quicklink {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--space-2);
        min-height: 84px;
        padding: var(--space-4);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        white-space: normal;
        font-size: 13px;
        line-height: 1.3;
        -webkit-tap-highlight-color: transparent;
    }

    .hp-quicklink:active {
        transform: scale(0.98);
        background: rgba(255, 255, 255, 0.14);
    }

    .hp-quicklink .bi {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        font-size: 1.15rem;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    .hp-quicklink:hover {
        transform: none;
        background: rgba(255, 255, 255, 0.12);
    }

    /* Trust — 3 compact stat chips */
    .hp-trust {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-2);
        justify-content: stretch;
        margin-top: var(--space-5);
    }

    .hp-trust__item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 64px;
        padding: var(--space-2) var(--space-1);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 10px;
        line-height: 1.25;
        text-align: center;
        font-weight: var(--fw-semibold);
    }

    .hp-trust__item .bi {
        font-size: 1rem;
        color: #93c5fd;
    }
}

@media (max-width: 768px) {
    .hp-promo__inner {
        border-radius: var(--radius-xl);
        padding: var(--space-4) var(--space-5);
    }

    body.has-mobile-shell .hp-promo > .container {
        padding-inline: var(--space-4);
    }

    /* Android-style 2-column app tiles inside hp-section */
    .hp-section {
        padding: var(--space-8) 0;
    }

    .hp-hub-grid,
    .hp-services-grid,
    .hp-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--space-3);
    }

    .hp-hub-card {
        align-items: flex-start;
        text-align: left;
        padding: var(--space-5) var(--space-4);
        border-radius: 20px;
        border: none;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.06),
            0 4px 16px rgba(15, 23, 42, 0.08);
        min-height: 128px;
    }

    .hp-hub-card:hover {
        transform: none;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.06),
            0 6px 18px rgba(15, 23, 42, 0.1);
    }

    .hp-hub-card__icon {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
        margin-bottom: var(--space-3);
        border-radius: 14px;
    }

    .hp-hub-card h3 {
        font-size: 13px;
        line-height: 1.35;
        margin-bottom: 0;
    }

    .hp-hub-card p,
    .hp-hub-card__cta {
        display: none;
    }

    .hp-service-card {
        min-height: 108px;
        padding: var(--space-5) var(--space-3);
        border-radius: 20px;
        border: none;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.06),
            0 4px 16px rgba(15, 23, 42, 0.08);
        gap: var(--space-3);
    }

    .hp-service-card .bi {
        font-size: 1.5rem;
    }

    .hp-service-card h4 {
        font-size: 12px;
        line-height: 1.35;
    }

    .hp-service-card:hover {
        transform: none;
    }

    .hp-featured-card {
        border-radius: 16px;
    }

    .hp-featured-card__media {
        height: 112px;
    }

    .hp-featured-card__body {
        padding: var(--space-4);
    }

    .hp-featured-card__title {
        font-size: 13px;
        line-height: 1.35;
    }

    .hp-featured-card__cat,
    .hp-featured-card__loc,
    .hp-featured-card__foot .hp-featured-card__rating span {
        display: none;
    }

    .hp-featured-card__foot {
        margin-top: var(--space-2);
    }

    .hp-featured-card__link {
        font-size: var(--fs-caption);
    }

    .hp-provider__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .hp-provider__actions {
        width: 100%;
        flex-direction: column;
    }

    .hp-provider__btn {
        width: 100%;
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .hp-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .hp-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .hp-cta__box {
        padding: var(--space-10) var(--space-5);
        border-radius: 24px;
    }

    .hp-cta__actions {
        flex-direction: column;
        width: 100%;
        gap: var(--space-3);
    }

    .hp-cta__btn {
        width: 100%;
        min-height: 48px;
    }

    .hp-demand-card__btn,
    .hp-discover-banner__btn {
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .hp-persona__btn {
        font-size: 11px;
        padding: 8px 6px;
    }

    .hp-hero__title {
        font-size: 1.3rem;
    }

    .hp-hero__lede {
        font-size: 13px;
    }

    .hp-search__submit {
        padding: 0 var(--space-4);
        font-size: 11px;
    }

    .hp-quicklink {
        min-height: 76px;
        padding: var(--space-3);
        font-size: 12px;
    }

    .hp-trust__item {
        min-height: 58px;
        font-size: 9px;
    }

    .hp-hub-card h3,
    .hp-service-card h4 {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-hero__copy,
    .hp-hero__stage,
    .hp-search,
    .hp-search-suggest,
    .hp-search-suggest__pane,
    .hp-search-suggest__chip,
    .hp-quicklinks,
    .hp-trust,
    .hp.hp--provider .hp-hero-provider:not([hidden]),
    .hp.hp--provider [data-hp-quicklinks-provider]:not([hidden]),
    .hp.is-persona-switching .hp-hero__stage,
    .hp.is-persona-switching .hp-quicklinks:not([hidden]),
    .hp.is-persona-switching .hp-hero__copy {
        transition: none !important;
        animation: none !important;
    }
}