/*
 * DEV-4580: Homepage v2 foundation brand CSS. Page-scoped: registered only from
 * home_page_v2.php, never added to layouts/main.php's global CSS list, so the
 * control homepage and every other page are completely unaffected.
 *
 * Tokens are prefixed --ph-v2-* and translated from the coded prototype's
 * src/index.css @theme block (see productdesigns/parkhound-homepage). All
 * selectors are scoped under .ph-v2-page / .ph-v2-nav / .ph-v2-footer /
 * .ph-v2-bottombar so nothing here can leak onto the shared chrome used by
 * the rest of the site.
 */

:root {
    --ph-v2-font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ph-v2-font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    --ph-v2-ink: #0a1f1e;
    --ph-v2-cta-ink: #06402c;
    --ph-v2-body: #4b5c59;

    --ph-v2-brand: #1fc98e;
    --ph-v2-brand-hover: #17a874;

    --ph-v2-cta: #ffcc3d;
    --ph-v2-cta-hover: #f0bd28;

    --ph-v2-bg: #f7f7f7;
    --ph-v2-section: #f7f7f7;
    --ph-v2-surface: #ffffff;
    --ph-v2-tint: #e6f7f0;
    --ph-v2-track: #dceae6;
    --ph-v2-review: #e0e0e0;
    --ph-v2-review-pill: #ececec;

    /* House breakpoint scale (sm 480 / md 768 / lg 1024 / xl 1440), literal
       px media queries below since this is hand-written CSS, not Tailwind. */
    --ph-v2-container-max: 1280px;
}

/* ---------- Container ---------- */
.ph-v2-container {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--ph-v2-container-max);
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
@media (min-width: 480px) {
    .ph-v2-container { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 768px) {
    .ph-v2-container { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1024px) {
    .ph-v2-container { padding-left: 64px; padding-right: 64px; }
}
@media (min-width: 1440px) {
    .ph-v2-container { padding-left: 128px; padding-right: 128px; }
}

/* ---------- Base / typography ---------- */
.ph-v2-page,
.ph-v2-nav,
.ph-v2-footer,
.ph-v2-bottombar {
    box-sizing: border-box;
    font-family: var(--ph-v2-font-sans);
    color: var(--ph-v2-body);
}
.ph-v2-page *,
.ph-v2-nav *,
.ph-v2-footer *,
.ph-v2-bottombar * {
    box-sizing: border-box;
}
.ph-v2-page {
    background: var(--ph-v2-bg);
}
.ph-v2-nav h1, .ph-v2-nav h2, .ph-v2-nav h3, .ph-v2-nav h4,
.ph-v2-footer h1, .ph-v2-footer h2, .ph-v2-footer h3, .ph-v2-footer h4,
.ph-v2-page h1, .ph-v2-page h2, .ph-v2-page h3, .ph-v2-page h4 {
    font-family: var(--ph-v2-font-display) !important;
    color: var(--ph-v2-ink);
    margin: 0;
}
/* DEV-4578 UAT (Astrid): the heading reset above (`.ph-v2-page h2`, specificity
   0-1-1) outweighs the section headings' own single-class `margin-bottom`
   (0-1-0), so the "From search to parked in minutes" and "Trusted by 200,000+
   drivers" headings rendered flush against their content (gap 0). Restore the
   intended heading-to-content spacing with matching-specificity selectors
   (0-2-0). Other sections space their heading via a flex-gap parent, so they are
   unaffected. */
.ph-v2-page .ph-v2-how__heading { margin-bottom: 40px; }
.ph-v2-page .ph-v2-testimonials__heading { margin-bottom: 36px; }
@media (min-width: 1024px) {
    .ph-v2-page .ph-v2-testimonials__heading { margin-bottom: 40px; }
}
.ph-v2-nav a, .ph-v2-footer a, .ph-v2-bottombar a, .ph-v2-page a {
    text-decoration: none;
    color: inherit;
}
/* The reset above (color: inherit, to kill the legacy global a{color:#0088cc})
   is more specific than the component colour rules, so without these it clobbers
   them and every nav/pill anchor inherits the body colour. Restore the design
   colours with matching specificity: nav links = ink, the phone row = body
   (intentionally lighter, per the design), pill CTAs = cta-ink. */
.ph-v2-nav a.ph-v2-nav__link,
.ph-v2-nav a.ph-v2-nav__drawer-link { color: var(--ph-v2-ink); }
.ph-v2-nav a.ph-v2-nav__phone,
.ph-v2-nav a.ph-v2-nav__drawer-link--phone { color: var(--ph-v2-body); }
.ph-v2-nav a.ph-v2-nav__drawer-link--logout { color: #b3261e; }
.ph-v2-nav a.ph-v2-pill-cta,
.ph-v2-page a.ph-v2-pill-cta { color: var(--ph-v2-cta-ink); }
.ph-v2-nav :focus-visible,
.ph-v2-footer :focus-visible,
.ph-v2-bottombar :focus-visible,
.ph-v2-page :focus-visible {
    outline: 2px solid var(--ph-v2-brand);
    outline-offset: 2px;
}

/* ---------- Pill CTA (shared by nav / footer / bottombar) ---------- */
.ph-v2-pill-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    border-radius: 999px;
    font-family: var(--ph-v2-font-sans);
    font-weight: 600;
    font-size: 16px;
    color: var(--ph-v2-cta-ink);
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 20px;
    padding-right: 20px;
    transition: transform .2s ease, background-color .2s ease;
}
.ph-v2-pill-cta:hover { transform: scale(1.02); }
.ph-v2-pill-cta:active { transform: scale(0.98); }
.ph-v2-pill-cta--brand { background: var(--ph-v2-brand); }
.ph-v2-pill-cta--brand:hover { background: var(--ph-v2-brand-hover); }
.ph-v2-pill-cta--cta { background: var(--ph-v2-cta); }
.ph-v2-pill-cta--cta:hover { background: var(--ph-v2-cta-hover); }

/* Arrow variant (DEV-4580 body sections): a trailing dark circular button,
   used by the Hero "Find my spot", host-CTA "List my space" and Cities
   "View more cities" pills. The plain nav/footer pill stays untouched. */
.ph-v2-pill-cta--arrow {
    border: 0;
    cursor: pointer;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 20px;
}
.ph-v2-pill-cta__arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--ph-v2-cta-ink);
    color: #ffffff;
    transition: transform .2s ease;
}
.ph-v2-pill-cta--arrow:hover .ph-v2-pill-cta__arrow-icon { transform: translateX(2px); }

/* ============================================================
   NAV
   ============================================================ */
.ph-v2-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--ph-v2-section);
}
.ph-v2-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.ph-v2-nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.ph-v2-nav__logo img { display: block; height: 32px; width: auto; }

.ph-v2-nav__links {
    display: none;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}
.ph-v2-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 16px;
    color: var(--ph-v2-ink);
    white-space: nowrap;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 4px;
    padding-right: 4px;
}
.ph-v2-nav__link--caret::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
}
.ph-v2-nav__dropdown { position: relative; }
.ph-v2-nav__dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--ph-v2-surface);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(10, 31, 30, 0.12);
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 0;
    padding-right: 0;
    z-index: 40;
}
.ph-v2-nav__dropdown-panel--right { left: auto; right: 0; }
.ph-v2-nav__dropdown-panel a,
.ph-v2-nav__dropdown-panel .ph-v2-nav__dropdown-featured {
    display: block;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ph-v2-ink);
    white-space: nowrap;
}
.ph-v2-nav__dropdown-panel a:hover { background: var(--ph-v2-tint); }
.ph-v2-nav__dropdown:hover > .ph-v2-nav__dropdown-panel,
.ph-v2-nav__dropdown:focus-within > .ph-v2-nav__dropdown-panel {
    display: block;
}

.ph-v2-nav__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
/* The top-bar "List my space" pill is desktop-only: on mobile the prototype
   header shows the logo, person icon, and hamburger, and the pill lives inside the drawer
   instead. Restored at the desktop breakpoint below. The drawer's own pill
   (.ph-v2-nav__drawer-cta) is a different element and is unaffected. */
.ph-v2-nav__actions > .ph-v2-pill-cta { display: none; }
.ph-v2-nav__phone {
    display: none;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 16px;
    color: var(--ph-v2-ink);
    white-space: nowrap;
}
.ph-v2-nav__account-guest {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border-radius: 999px;
    background: var(--ph-v2-ink);
    color: #fff;
}
.ph-v2-nav__account-trigger { display: inline-flex; }
.ph-v2-nav__avatar {
    width: 39px;
    height: 39px;
    border-radius: 999px;
    object-fit: cover;
    display: none;
}
.ph-v2-nav__avatar--lg { width: 56px; height: 56px; display: block; }
.ph-v2-nav__account { display: none; }
.ph-v2-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--ph-v2-cta);
    color: var(--ph-v2-cta-ink);
    font-size: 11px;
    font-weight: 700;
}

.ph-v2-nav__toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}
.ph-v2-nav__toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ph-v2-ink);
    border-radius: 1px;
    transition: transform .25s ease, opacity .2s ease;
}
/* When the drawer is open the hamburger morphs into an X (it doubles as the
   close control, matching the prototype: logo + X in the header). */
.ph-v2-nav__toggle[aria-expanded="true"] .ph-v2-nav__toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ph-v2-nav__toggle[aria-expanded="true"] .ph-v2-nav__toggle-bar:nth-child(2) { opacity: 0; }
.ph-v2-nav__toggle[aria-expanded="true"] .ph-v2-nav__toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Unused in the in-flow model: the drawer pushes the page down rather than
   floating over it, so there is no scrim and nothing to dim or catch an
   outside tap. Kept in the DOM (harmless) but never shown; close is via the
   X (the morphed hamburger), Escape, or widening to desktop. */
.ph-v2-nav__backdrop { display: none; }
.ph-v2-nav__backdrop.is-open { display: none; }

/* In-flow dropdown that PUSHES the page content down (matches the prototype),
   not a fixed overlay that covers the hero. It sits inside the sticky header,
   so opening it grows the header and shifts everything below it down, leaving
   the hero heading visible right beneath the panel. Animated via max-height.
   The logo+X lives in the nav bar (the hamburger morphs to an X), so the
   drawer's own header is hidden on mobile and the panel is all that drops. */
.ph-v2-nav__drawer {
    max-height: 0;
    overflow: hidden;
    background: var(--ph-v2-section);
    padding-left: 20px;
    padding-right: 20px;
    transition: max-height .28s ease;
}
.ph-v2-nav__drawer.is-open {
    max-height: 90vh;
    overflow-y: auto;
    padding-bottom: 20px;
}
/* Hidden in the in-flow model: the nav bar already shows the logo, and the
   hamburger morphs into the X close control, so the drawer needs no header. */
.ph-v2-nav__drawer-header { display: none; }
.ph-v2-nav__drawer-logo { display: flex; align-items: center; flex-shrink: 0; }
.ph-v2-nav__drawer-logo img { display: block; height: 28px; width: auto; }
.ph-v2-nav__drawer-close {
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: var(--ph-v2-ink);
    cursor: pointer;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
}
.ph-v2-nav__drawer-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 24px;
    background: var(--ph-v2-surface);
    box-shadow: 0 12px 24px rgba(10, 31, 30, 0.08);
    padding-top: 8px;
    padding-bottom: 16px;
    padding-left: 20px;
    padding-right: 20px;
}
.ph-v2-nav__drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    margin-bottom: 8px;
}
.ph-v2-nav__drawer-user-name { font-weight: 700; color: var(--ph-v2-ink); }
.ph-v2-nav__drawer-user-email { font-size: 13px; color: var(--ph-v2-body); }
.ph-v2-nav__drawer-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ph-v2-tint);
}
.ph-v2-nav__drawer-links a {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 4px;
    padding-right: 4px;
    font-weight: 600;
    color: var(--ph-v2-ink);
}
.ph-v2-nav__drawer-link {
    display: block;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 4px;
    padding-right: 4px;
    font-weight: 600;
    color: var(--ph-v2-ink);
}
.ph-v2-nav__drawer-link--phone {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 0;
}
.ph-v2-nav__drawer-link--logout { color: #b3261e; border-bottom: 0; padding-top: 12px; }
.ph-v2-nav__drawer-cta { align-self: flex-start; margin-top: 8px; }

@media (min-width: 1024px) {
    .ph-v2-nav__bar { gap: 16px; }
    .ph-v2-nav__links { display: flex; gap: 14px; }
    .ph-v2-nav__link { font-size: 15px; }
    .ph-v2-nav__account { display: block; }
    .ph-v2-nav__account-guest { display: flex; }
    .ph-v2-nav__actions { gap: 16px; }
    .ph-v2-nav__avatar { display: block; }
    .ph-v2-nav__actions > .ph-v2-pill-cta { display: inline-flex; }
    .ph-v2-nav__toggle { display: none; }
    .ph-v2-nav__backdrop,
    .ph-v2-nav__drawer { display: none !important; }
}

/* The phone number is the first thing dropped when the desktop nav gets
   tight (DEV-4580: keeps the 1024-1279 tablet-landscape range from
   overflowing before the container's own gutter widens at 1440). */
@media (min-width: 1280px) {
    .ph-v2-nav__bar { gap: 24px; }
    .ph-v2-nav__links { gap: 20px; }
    .ph-v2-nav__link { font-size: 16px; }
    .ph-v2-nav__phone { display: flex; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.ph-v2-footer {
    background: var(--ph-v2-ink);
    color: #ffffff;
}
.ph-v2-footer__top { padding-top: 40px; padding-bottom: 40px; }
.ph-v2-footer a { color: rgba(255, 255, 255, 0.7); }
.ph-v2-footer a:hover { color: #ffffff; }

.ph-v2-footer__columns {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 40px;
}
.ph-v2-footer__col-group {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.ph-v2-footer__col { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ph-v2-footer__col-heading { font-size: 16px; }
.ph-v2-footer__col-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-family: var(--ph-v2-font-display) !important;
    font-weight: 600;
    font-size: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 0;
    padding-right: 0;
    cursor: pointer;
    text-align: left;
}
.ph-v2-footer__col-chevron {
    width: 9px;
    height: 9px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex-shrink: 0;
}
.ph-v2-footer__col[data-open="true"] .ph-v2-footer__col-chevron { transform: rotate(-135deg); }
.ph-v2-footer__col-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 16px;
    padding-left: 0;
}
.ph-v2-footer__col[data-open="true"] .ph-v2-footer__col-panel { display: flex; }
.ph-v2-footer__col-panel a { font-size: 14px; }

.ph-v2-footer__newsletter { display: none; flex-direction: column; gap: 12px; }
.ph-v2-footer__newsletter-heading {
    margin: 0;
    font-family: var(--ph-v2-font-display) !important;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}
.ph-v2-footer__newsletter-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 48px;
    border-radius: 20px;
    background: var(--ph-v2-surface);
    padding: 12px;
}
.ph-v2-footer__newsletter-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.ph-v2-footer__newsletter-field .ph-v2-icon { color: var(--ph-v2-body); }
.ph-v2-footer__newsletter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ph-v2-footer__newsletter-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 16px;
    color: var(--ph-v2-ink);
}
.ph-v2-footer .ph-v2-footer__newsletter-input,
.ph-v2-footer .ph-v2-footer__newsletter-input:focus {
    /* !important + :focus so the control's Bootstrap input[type=email]:focus
       glow/border can never reappear when the field is focused (e.g. while the
       browser's email autofill is open). */
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
    /* Kill Bootstrap's global input { margin-bottom:10px; padding:4px 6px }
       which shifts the field off vertical-center inside the pill. */
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px;
}
.ph-v2-footer__newsletter-input::placeholder { color: var(--ph-v2-body); }
.ph-v2-footer__newsletter-input:focus { outline: none; }
.ph-v2-footer__newsletter-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ph-v2-brand);
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
}
.ph-v2-footer__newsletter-submit:hover { background: var(--ph-v2-brand-hover); }
.ph-v2-footer__newsletter-status {
    margin: 0;
    font-size: 13px;
    color: var(--ph-v2-brand);
}
.ph-v2-footer__newsletter-status:empty { display: none; }
.ph-v2-footer__newsletter-status--error { color: #ff8a80; }

.ph-v2-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.ph-v2-footer__meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ph-v2-footer__social { display: flex; align-items: center; gap: 8px; }
.ph-v2-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    color: var(--ph-v2-brand);
}
.ph-v2-footer__social-link:hover { color: #ffffff; }
.ph-v2-footer__siblings { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.ph-v2-footer__siblings img { display: block; height: 22px; width: auto; }
.ph-v2-footer__spacer { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ph-v2-footer__regions { display: flex; align-items: center; gap: 4px; padding-top: 3px; font-size: 12px; line-height: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.7); letter-spacing: normal; font-feature-settings: normal; -webkit-font-smoothing: antialiased; }
.ph-v2-footer__regions a { transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.ph-v2-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.ph-v2-footer__brand-logo { display: inline-flex; }
.ph-v2-footer__brand-logo img { height: 54px; width: auto; }
.ph-v2-footer__brand-text { margin: 0; font-size: 11.583px; color: rgba(255, 255, 255, 0.7); }

@media (min-width: 1024px) {
    .ph-v2-footer__columns { flex-direction: row; justify-content: space-between; gap: 40px; margin-bottom: 60px; }
    .ph-v2-footer__col { border-bottom: 0; flex: 0 1 auto; }
    .ph-v2-footer__col-group { flex: 1 1 0%; max-width: 389px; }
    .ph-v2-footer__col-trigger { cursor: default; padding-top: 0; padding-right: 0; padding-bottom: 12px; padding-left: 0; }
    .ph-v2-footer__col-chevron { display: none; }
    .ph-v2-footer__col-panel { display: flex !important; padding: 0; }
    .ph-v2-footer__newsletter { display: flex; }
    .ph-v2-footer__bottom { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .ph-v2-footer__meta { align-items: flex-end; gap: 12px; }
    .ph-v2-footer__siblings { justify-content: flex-end; }
}

/* ============================================================
   BOTTOM BAR
   ============================================================ */
.ph-v2-bottombar { background: var(--ph-v2-surface); }
.ph-v2-bottombar__row {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.ph-v2-bottombar__badges { display: flex; gap: 40px; }
.ph-v2-bottombar__badge { display: flex; flex-direction: column; gap: 4px; }
.ph-v2-bottombar__badge p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ph-v2-ink);
}
.ph-v2-bottombar__badge img { height: 24px; width: auto; display: block; }
.ph-v2-bottombar__legal { font-size: 12px; line-height: 1.45; color: var(--ph-v2-body); }
.ph-v2-bottombar__legal p { margin: 0; }

@media (min-width: 1024px) {
    .ph-v2-bottombar__row { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ============================================================
   BODY: shared section helpers
   ============================================================ */
.ph-v2-section { background: var(--ph-v2-section); }
.ph-v2-section-pad { padding-top: 48px; padding-bottom: 48px; }
@media (min-width: 1024px) {
    .ph-v2-section-pad { padding-top: 80px; padding-bottom: 80px; }
}

.ph-v2-icon { display: block; flex-shrink: 0; }

/* Segmented pill control shared by the Hero Monthly/Daily toggle, the Cities
   City/Airport toggle and the PopularSearches state tabs. */
.ph-v2-segment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    background: var(--ph-v2-track);
    padding: 2px;
}
.ph-v2-segment__btn {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
    font-family: var(--ph-v2-font-sans);
    font-weight: 600;
    font-size: 14px;
    color: var(--ph-v2-body);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}
.ph-v2-segment__btn.is-active {
    background: var(--ph-v2-ink);
    color: var(--ph-v2-track);
}

/* ============================================================
   HERO
   ============================================================ */
.ph-v2-hero { padding-top: 48px; padding-bottom: 48px; }
@media (min-width: 1024px) {
    .ph-v2-hero { padding-top: 80px; padding-bottom: 80px; }
}
.ph-v2-hero__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
}
@media (min-width: 1024px) {
    .ph-v2-hero__row { flex-direction: row; align-items: center; justify-content: space-between; }
}
.ph-v2-hero__text {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}
@media (min-width: 1024px) {
    .ph-v2-hero__text { width: 439px; flex-shrink: 0; }
}
.ph-v2-hero__heading-group { display: flex; flex-direction: column; gap: 16px; }
.ph-v2-hero__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
}
@media (min-width: 1024px) {
    .ph-v2-hero__title { font-size: 48px; }
}
.ph-v2-hero__rating { display: flex; align-items: center; gap: 8px; }
.ph-v2-hero__rating-score {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-radius: 999px;
    background: var(--ph-v2-body);
    color: var(--ph-v2-track);
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 14px;
    font-weight: 500;
}
.ph-v2-hero__rating img { height: 24px; width: auto; }
.ph-v2-hero__subcopy {
    max-width: 320px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ph-v2-body);
}
@media (min-width: 1024px) {
    .ph-v2-hero__subcopy { font-size: 18px; }
}

.ph-v2-hero__search { display: flex; flex-direction: column; gap: 16px; }
.ph-v2-hero__search-fields { display: flex; flex-direction: column; gap: 8px; }
.ph-v2-hero__tabs { align-self: flex-start; }
.ph-v2-hero__search-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    width: 100%;
    border-radius: 20px;
    background: var(--ph-v2-surface);
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.04);
}
.ph-v2-hero__search-box input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 16px;
    color: var(--ph-v2-ink);
    font-family: var(--ph-v2-font-sans);
}
.ph-v2-hero__search-box input::placeholder { color: var(--ph-v2-body); }
.ph-v2-hero__search-box input:focus { outline: none; }
.ph-v2-hero__cta { align-self: flex-start; }

/* DEV-4579 UAT (Astrid): the hero + sticky-cta search fields are bare
   input[type=text], so the control's Bootstrap input:focus glow/border leaks
   through as a blue halo. Kill it with !important on default + :focus so the
   inputs blend seamlessly into their white pill, matching the newsletter
   "Enter your email" field. Scoped to the v2 search boxes only; the control
   homepage inputs are untouched. */
.ph-v2-hero__search-box input,
.ph-v2-hero__search-box input:focus,
.ph-v2-sticky-cta__field input,
.ph-v2-sticky-cta__field input:focus {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   SEARCH SUGGESTIONS (DEV-4580: autocomplete dropdown shared by
   the Hero and StickyCta search boxes; ported from widget_banner.php's
   #autocomplete-suggestions pattern, wired in homepage_v2.js)
   ============================================================ */
.ph-v2-search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 240px;
    overflow-y: auto;
    border-radius: 16px;
    background: var(--ph-v2-surface);
    box-shadow: 0 12px 24px rgba(10, 31, 30, 0.12);
}
.ph-v2-search-suggestions[hidden] { display: none; }
/* The sticky CTA is pinned to the viewport bottom, so its suggestions must
   open UPWARD (above the field) instead of downward off-screen. */
.ph-v2-sticky-cta__field .ph-v2-search-suggestions {
    top: auto;
    bottom: calc(100% + 8px);
}
.ph-v2-search-suggestions__item {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ph-v2-ink);
    cursor: pointer;
}
.ph-v2-search-suggestions__item:hover,
.ph-v2-search-suggestions__item:focus {
    background: var(--ph-v2-tint);
}

.ph-v2-hero__photo { position: relative; width: 100%; }
@media (min-width: 1024px) {
    .ph-v2-hero__photo { width: 552px; flex-shrink: 0; }
}
.ph-v2-hero__photo img {
    display: block;
    width: 100%;
    border-radius: 24px;
}
@media (min-width: 1024px) {
    .ph-v2-hero__photo img { border-radius: 40px; }
}
.ph-v2-hero__badge {
    position: absolute;
    top: -12px;
    right: 16px;
    cursor: pointer;
}
.ph-v2-hero__badge:focus-visible {
    outline: 2px solid var(--ph-v2-brand);
    outline-offset: 4px;
    border-radius: 24px;
}
@media (min-width: 1024px) {
    .ph-v2-hero__badge { top: -34px; right: 44px; }
}
.ph-v2-hero__badge-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 24px;
    background: var(--ph-v2-ink);
    padding: 16px;
}
.ph-v2-hero__badge-pct {
    font-family: var(--ph-v2-font-display) !important;
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -3px;
    color: #ffffff;
}
@media (min-width: 1024px) {
    .ph-v2-hero__badge-pct { font-size: 54px; letter-spacing: -4.5px; }
}
.ph-v2-hero__badge-copy { display: flex; flex-direction: column; }
.ph-v2-hero__badge-off {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
}
.ph-v2-hero__badge-sub {
    max-width: 80px;
    font-size: 10px;
    line-height: 1.2;
    color: var(--ph-v2-tint);
}
.ph-v2-hero__badge-icon {
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--ph-v2-brand);
    color: var(--ph-v2-cta-ink);
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.ph-v2-how__heading { margin-bottom: 40px; font-size: 24px; font-weight: 600; }
.ph-v2-how__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 1024px) {
    .ph-v2-how__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.ph-v2-how__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 40px;
    background: var(--ph-v2-surface);
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.07);
}
.ph-v2-how__card img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
}
.ph-v2-how__card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
}
.ph-v2-how__card-title { font-size: 18px; font-weight: 600; }
.ph-v2-how__card-body { margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--ph-v2-body); }
.ph-v2-how__card-number {
    flex-shrink: 0;
    font-family: var(--ph-v2-font-display) !important;
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: var(--ph-v2-body);
}

/* ============================================================
   BENEFITS
   ============================================================ */
.ph-v2-benefits { padding-top: 80px; padding-bottom: 80px; }
.ph-v2-benefits__inner { display: flex; flex-direction: column; gap: 40px; }
.ph-v2-benefits__heading {
    max-width: 321px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}
@media (min-width: 1024px) {
    .ph-v2-benefits__heading { max-width: 398px; }
}
.ph-v2-benefits__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 1024px) {
    .ph-v2-benefits__list { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
.ph-v2-benefits__item { display: flex; align-items: center; gap: 12px; }
@media (min-width: 1024px) {
    .ph-v2-benefits__item { align-items: flex-start; }
}
.ph-v2-benefits__item img { width: 84px; height: 84px; flex-shrink: 0; object-fit: contain; }
.ph-v2-benefits__item-body { display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 1024px) {
    .ph-v2-benefits__item-body { max-width: 210px; }
}
.ph-v2-benefits__item-title { font-size: 18px; font-weight: 600; color: var(--ph-v2-ink); }
.ph-v2-benefits__item-copy { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ph-v2-body); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.ph-v2-testimonials { padding-top: 80px; padding-bottom: 40px; }
@media (min-width: 1024px) {
    .ph-v2-testimonials { padding-bottom: 80px; }
}
.ph-v2-testimonials__heading { margin-bottom: 36px; font-size: 24px; font-weight: 600; line-height: 1.2; }
@media (min-width: 1024px) {
    .ph-v2-testimonials__heading { margin-bottom: 40px; }
}
.ph-v2-testimonials__marquee-wrap { width: 100%; overflow: hidden; }
.ph-v2-testimonials__track {
    display: flex;
    width: max-content;
    animation: ph-v2-marquee-scroll 55s linear infinite;
}
.ph-v2-testimonials__track:hover,
.ph-v2-testimonials__track:focus-within { animation-play-state: paused; }
@keyframes ph-v2-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ph-v2-testimonials__track { animation: none; }
}
.ph-v2-testimonials__card {
    display: flex;
    flex-direction: column;
    width: 300px;
    flex-shrink: 0;
    margin-right: 20px;
    border-radius: 16px;
    background: var(--ph-v2-review);
    padding: 24px;
    transition: background-color .2s ease;
}
@media (min-width: 480px) {
    .ph-v2-testimonials__card { width: 317px; margin-right: 24px; }
}
.ph-v2-testimonials__card:hover,
.ph-v2-testimonials__card:focus-within { background: var(--ph-v2-surface); }
.ph-v2-testimonials__quote { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ph-v2-body); }
.ph-v2-testimonials__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 24px;
}
.ph-v2-testimonials__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 53px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--ph-v2-tint);
    color: var(--ph-v2-cta-ink);
    font-family: var(--ph-v2-font-display) !important;
    font-weight: 700;
    font-size: 16px;
}
.ph-v2-testimonials__author-meta { min-width: 0; }
.ph-v2-testimonials__author-name {
    font-family: var(--ph-v2-font-display) !important;
    font-size: 18px;
    font-weight: 600;
    color: var(--ph-v2-ink);
}
.ph-v2-testimonials__author-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.ph-v2-testimonials__rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-radius: 999px;
    background: var(--ph-v2-review-pill);
    color: var(--ph-v2-body);
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 16px;
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease;
}
.ph-v2-testimonials__card:hover .ph-v2-testimonials__rating-pill,
.ph-v2-testimonials__card:focus-within .ph-v2-testimonials__rating-pill {
    background: var(--ph-v2-tint);
    color: var(--ph-v2-brand);
}
.ph-v2-testimonials__source { font-size: 14px; color: var(--ph-v2-body); }
.ph-v2-testimonials__source strong { font-weight: 600; color: var(--ph-v2-ink); }

/* ============================================================
   HOST CTA (CtaBanner: "Have an empty space?")
   ============================================================ */
.ph-v2-host-cta { padding-top: 80px; padding-bottom: 80px; }
.ph-v2-host-cta__row {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
@media (min-width: 1024px) {
    .ph-v2-host-cta__row { flex-direction: row; align-items: center; justify-content: center; gap: 60px; }
}
.ph-v2-host-cta__photo {
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 16px;
    background: var(--ph-v2-surface);
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.07);
}
@media (min-width: 1024px) {
    .ph-v2-host-cta__photo { width: 687px; border-radius: 40px; }
}
.ph-v2-host-cta__photo img { display: block; width: 100%; object-fit: contain; }
.ph-v2-host-cta__copy { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 1024px) {
    .ph-v2-host-cta__copy { width: 275px; }
}
.ph-v2-host-cta__copy-inner { display: flex; flex-direction: column; gap: 20px; }
.ph-v2-host-cta__heading { font-size: 24px; font-weight: 600; line-height: 1.2; }
.ph-v2-host-cta__body { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ph-v2-body); }
.ph-v2-host-cta__body a { font-weight: 600; color: var(--ph-v2-brand); }
.ph-v2-host-cta__body a:hover { color: var(--ph-v2-brand-hover); text-decoration: underline; }
.ph-v2-host-cta__cta { align-self: flex-start; }

/* ============================================================
   CITIES
   ============================================================ */
.ph-v2-cities { padding-top: 40px; padding-bottom: 40px; }
@media (min-width: 1024px) {
    .ph-v2-cities { padding-top: 80px; padding-bottom: 80px; }
}
.ph-v2-cities__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border-radius: 40px;
    background: var(--ph-v2-surface);
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.04);
    padding: 24px;
}
@media (min-width: 1024px) {
    .ph-v2-cities__card { border-radius: 60px; padding: 40px; }
}
.ph-v2-cities__heading {
    max-width: 259px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}
.ph-v2-cities__body { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 20px; }
.ph-v2-cities__grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 1024px) {
    .ph-v2-cities__grid { grid-template-columns: repeat(4, 1fr); }
}
.ph-v2-cities__grid[hidden] { display: none; }
.ph-v2-cities__tile { display: flex; flex-direction: column; align-items: center; }
.ph-v2-cities__tile img {
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: var(--ph-v2-surface);
    object-fit: cover;
}
.ph-v2-cities__tile p { margin-top: 8px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ph-v2-ink); }

/* ============================================================
   POPULAR SEARCHES
   ============================================================ */
.ph-v2-searches { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 1024px) {
    .ph-v2-searches { padding-top: 80px; padding-bottom: 80px; }
}
.ph-v2-searches__row { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 1024px) {
    .ph-v2-searches__row { flex-direction: row; align-items: flex-start; gap: 64px; }
}
.ph-v2-searches__intro { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) {
    .ph-v2-searches__intro { width: 289px; flex-shrink: 0; gap: 8px; }
}
.ph-v2-searches__heading { font-size: 24px; font-weight: 600; line-height: 1.2; }
.ph-v2-searches__intro-copy { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ph-v2-body); }
.ph-v2-searches__main { display: flex; flex: 1; flex-direction: column; gap: 20px; min-width: 0; }
.ph-v2-searches__tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ph-v2-searches__tabs::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
    .ph-v2-searches__tabs { width: auto; justify-content: flex-start; }
}
.ph-v2-searches__tabs .ph-v2-segment__btn { padding-top: 10px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px; }
@media (min-width: 1024px) {
    .ph-v2-searches__tabs .ph-v2-segment__btn { padding-top: 12px; padding-bottom: 12px; padding-left: 16px; padding-right: 16px; }
}
.ph-v2-searches__list {
    columns: 2;
    column-gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 1024px) {
    .ph-v2-searches__list { columns: 3; }
}
.ph-v2-searches__list[hidden] { display: none; }
.ph-v2-searches__list li { margin-bottom: 18px; break-inside: avoid; }
.ph-v2-searches__list a {
    font-size: 14px;
    font-weight: 600;
    color: var(--ph-v2-brand);
}
.ph-v2-searches__list a:hover { color: var(--ph-v2-brand-hover); text-decoration: underline; }

/* ============================================================
   ABOUT (HelpCta: "Australia's #1 parking marketplace")
   ============================================================ */
.ph-v2-about { padding-top: 80px; padding-bottom: 80px; }
.ph-v2-about__grid { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 1024px) {
    .ph-v2-about__grid {
        display: grid;
        grid-template-columns: 3fr 2fr;
        align-items: start;
        column-gap: 40px;
        row-gap: 20px;
    }
}
.ph-v2-about__heading-group { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) {
    .ph-v2-about__heading-group { grid-column: 2; grid-row: 1; margin-bottom: 20px; gap: 12px; }
}
.ph-v2-about__heading { font-size: 32px; font-weight: 600; line-height: 1.2; }
.ph-v2-about__lede {
    margin: 0;
    font-family: var(--ph-v2-font-display) !important;
    font-size: 18px;
    font-weight: 600;
    color: var(--ph-v2-ink);
}
.ph-v2-about__copy { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ph-v2-body); }
@media (min-width: 1024px) {
    .ph-v2-about__copy--1 { grid-column: 2; grid-row: 2; }
    .ph-v2-about__copy--2 { grid-column: 2; grid-row: 3; }
}
.ph-v2-about__photo {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border-radius: 18px;
}
@media (min-width: 1024px) {
    .ph-v2-about__photo { grid-column: 1; grid-row: 1 / span 3; border-radius: 34px; align-self: stretch; }
}
.ph-v2-about__photo img { display: block; width: 100%; aspect-ratio: 608 / 386; object-fit: cover; }
@media (min-width: 1024px) {
    .ph-v2-about__photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}

/* ============================================================
   STICKY CTA
   ============================================================ */
.ph-v2-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 40;
    display: flex;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    transition: transform .3s ease, opacity .3s ease;
    transform: translateY(24px);
    opacity: 0;
    pointer-events: none;
}
.ph-v2-sticky-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.ph-v2-sticky-cta__card {
    display: flex;
    width: 100%;
    max-width: 400px;
    flex-direction: column;
    gap: 12px;
    border-radius: 36px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 16px;
    box-shadow: 0 12px 32px rgba(10, 31, 30, 0.16);
}
.ph-v2-sticky-cta__title { margin: 0; text-align: center; font-size: 18px; font-weight: 600; color: var(--ph-v2-ink); }
.ph-v2-sticky-cta__field {
    position: relative;
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 20px;
    background: var(--ph-v2-surface);
    padding-top: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
}
.ph-v2-sticky-cta__field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    color: var(--ph-v2-ink);
    font-family: var(--ph-v2-font-sans);
}
@media (min-width: 1024px) {
    .ph-v2-sticky-cta__field input { font-size: 16px; }
}
.ph-v2-sticky-cta__field input::placeholder { color: var(--ph-v2-body); }
.ph-v2-sticky-cta__field input:focus { outline: none; }
.ph-v2-sticky-cta__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ph-v2-brand);
    color: #ffffff;
    cursor: pointer;
}
.ph-v2-sticky-cta__submit:hover { background: var(--ph-v2-brand-hover); }