/* Hubpile v30.3 - Responsive homepage adjustments.
   This stylesheet intentionally loads AFTER home-premium.css.
   Scope: homepage .hph-home only; no shared global header/footer changes. */
.hph-home main,
.hph-home main section,
.hph-home .hph-container,
.hph-home .hph-hero-grid > *,
.hph-home .hph-head > *,
.hph-home .hph-product-panel > *,
.hph-home .hph-operating > *,
.hph-home .hph-final-grid > * {min-width:0}

/* auto-fit collapses unused tracks when some optional counters are zero. */
.hph-home .hph-proof-grid {grid-template-columns:minmax(245px,1.45fr) repeat(auto-fit,minmax(115px,1fr))}
.hph-home .hph-proof-stat {min-width:0}
.hph-home .hph-proof-stat strong {font-variant-numeric:tabular-nums}
.hph-home .hph-proof-stat span {display:block;line-height:1.45}
.hph-home .hph-head h2,
.hph-home .hph-product-copy h3,
.hph-home .hph-live-body h3,
.hph-home .hph-step h3,
.hph-home .hph-final h2 {overflow-wrap:break-word}
.hph-home .hph-live-card,
.hph-home .hph-plan,
.hph-home .hph-checkout,
.hph-home .hph-product-visual {min-width:0;max-width:100%}
.hph-home .hph-live-image img {max-width:100%}
.hph-home .hph-checkout-head > *,
.hph-home .hph-pay > * {min-width:0;overflow-wrap:anywhere}
.hph-home .hph-promo button {max-width:100%;white-space:normal;overflow-wrap:anywhere}
.hph-home .hph-faq summary {min-height:48px;display:list-item;line-height:1.5}
.hph-home a:focus-visible,
.hph-home button:focus-visible,
.hph-home summary:focus-visible {outline:3px solid #1688f7;outline-offset:3px}

/* Tablet: prevent the desktop proof strip from becoming an unreadable row. */
@media (max-width:1100px) {
  .hph-home .hph-proof-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    padding-block:22px;
    align-items:stretch;
  }
  .hph-home .hph-proof-grid > .hph-proof-intro {
    grid-column:1/-1;
    max-width:48ch;
    font-size:15px;
    line-height:1.45;
    letter-spacing:-.012em;
  }
  .hph-home .hph-proof-grid > .hph-proof-stat {
    padding:16px 18px;
    border:1px solid #e4eaf3;
    border-radius:15px;
    background:#f8faff;
  }
  .hph-home .hph-proof-grid .hph-proof-stat strong {font-size:clamp(23px,3vw,31px);line-height:1.15}
  .hph-home .hph-proof-grid .hph-proof-stat span {font-size:12px;margin-top:5px}
  .hph-home .hph-hero-grid {gap:38px}
  .hph-home .hph-head {gap:25px}
}

/* Small tablets / large phones: stack all two-column composition sections. */
@media (max-width:760px) {
  .hph-home .hph-container {width:calc(100% - 36px);max-width:1220px}
  .hph-home .hph-hero {padding:48px 0 43px}
  .hph-home .hph-hero-grid {grid-template-columns:minmax(0,1fr);gap:27px}
  .hph-home .hph-hero h1 {font-size:clamp(37px,8.4vw,54px);line-height:1.04;letter-spacing:-.045em}
  .hph-home .hph-hero-copy {font-size:15px;line-height:1.62;margin-top:17px}
  .hph-home .hph-actions {gap:10px;margin-top:23px}
  .hph-home .hph-trust {gap:9px 16px;line-height:1.4;margin-top:18px}
  .hph-home .hph-photo-stage {width:100%;min-height:400px}
  .hph-home .hph-hero-photo {inset:0 11px 0 11px}
  .hph-home .hph-photo-tile {max-width:155px;min-width:0}

  .hph-home .hph-proof-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-block:18px}
  .hph-home .hph-proof-grid > .hph-proof-intro {grid-column:1/-1;font-size:14px;margin-bottom:2px}
  .hph-home .hph-proof-grid > .hph-proof-stat {padding:15px 16px;border-radius:14px;min-height:83px}
  .hph-home .hph-proof-grid .hph-proof-stat strong {font-size:25px}
  .hph-home .hph-proof-grid .hph-proof-stat span {font-size:12px;line-height:1.35}

  .hph-home .hph-section {padding:55px 0}
  .hph-home .hph-head {flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:24px}
  .hph-home .hph-head h2 {font-size:clamp(31px,7vw,45px);line-height:1.08;letter-spacing:-.04em}
  .hph-home .hph-head > p {max-width:65ch;font-size:14px;line-height:1.65}

  /* Product categories become a swipeable, keyboard-accessible row. */
  .hph-home .hph-tabs {
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    gap:8px;margin:0 -18px 16px;padding:4px 18px 12px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:#aec5e6 transparent;
  }
  .hph-home .hph-tab {flex:0 0 auto;width:auto;min-height:44px;padding-inline:17px;scroll-snap-align:start;white-space:nowrap;font-size:12px}
  .hph-home .hph-product-panel.active {grid-template-columns:minmax(0,1fr);gap:13px}
  .hph-home .hph-product-copy {padding:26px;min-height:0}
  .hph-home .hph-product-copy h3 {font-size:clamp(27px,6vw,36px)}
  .hph-home .hph-product-photo img {height:clamp(215px,54vw,315px)}

  .hph-home .hph-live-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hph-home .hph-live-body {padding:15px}
  .hph-home .hph-live-body h3 {font-size:15px;min-height:0;max-height:none}
  .hph-home .hph-live-meta {flex-wrap:wrap;align-items:flex-start}
  .hph-home .hph-suite {grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .hph-home .hph-suite article {min-height:0;padding:19px;border-radius:16px}

  .hph-home .hph-operating {grid-template-columns:minmax(0,1fr);gap:28px}
  .hph-home .hph-checkout {padding:22px}
  .hph-home .hph-pricing-five {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hph-home .hph-pricing-five .hph-plan {padding:22px 18px}
  .hph-home .hph-pricing-five .hph-price {font-size:clamp(25px,4.5vw,34px);white-space:normal;overflow-wrap:anywhere}
  .hph-home .hph-pricing-five .hph-plan > p,
  .hph-home .hph-pricing-five .hph-plan ul {min-height:0}
  .hph-home .hph-promo {gap:18px;padding:23px}
  .hph-home .hph-market {grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .hph-home .hph-market article {padding:21px;border-radius:17px}
  .hph-home .hph-final-grid {flex-direction:column;align-items:flex-start;gap:23px}
  .hph-home .hph-final h2 {font-size:clamp(32px,7vw,46px);line-height:1.04}
}

/* Phones: readable single-column content and two-column proof cards. */
@media (max-width:560px) {
  .hph-home .hph-container {width:calc(100% - 30px)}
  .hph-home .hph-hero {padding:37px 0 36px}
  .hph-home .hph-hero h1 {font-size:clamp(36px,9.6vw,46px)}
  .hph-home .hph-hero-copy {font-size:15px}
  .hph-home .hph-actions .hph-button {flex:1 1 100%;width:100%;font-size:14px}
  .hph-home .hph-trust {font-size:11px}
  .hph-home .hph-photo-stage {min-height:370px}
  .hph-home .hph-photo-tile-a {left:0;top:16px}
  .hph-home .hph-photo-tile-b {right:0;top:49%}
  .hph-home .hph-photo-tile-c {left:0;bottom:13px}
  .hph-home .hph-proof-grid {gap:9px}
  .hph-home .hph-proof-grid > .hph-proof-stat {padding:14px 13px;min-height:82px}
  .hph-home .hph-proof-grid .hph-proof-stat strong {font-size:24px}
  .hph-home .hph-proof-grid .hph-proof-stat span {font-size:11px}
  .hph-home .hph-section {padding:47px 0}
  .hph-home .hph-head h2 {font-size:clamp(30px,8vw,39px)}
  .hph-home .hph-tabs {margin-inline:-15px;padding-inline:15px}
  .hph-home .hph-product-copy {padding:23px}
  .hph-home .hph-product-copy p {line-height:1.65}
  .hph-home .hph-product-photo img {height:260px}
  .hph-home .hph-live-grid {grid-template-columns:minmax(0,1fr);gap:15px}
  .hph-home .hph-live-body {padding:19px}
  .hph-home .hph-live-body h3 {font-size:17px}
  .hph-home .hph-suite {grid-template-columns:minmax(0,1fr)}
  .hph-home .hph-suite article {padding:21px}
  .hph-home .hph-checkout {padding:18px}
  .hph-home .hph-checkout-head {flex-wrap:wrap;gap:10px}
  .hph-home .hph-pay {flex-wrap:wrap;align-items:flex-start}
  .hph-home .hph-pricing-five {grid-template-columns:minmax(0,1fr);gap:14px}
  .hph-home .hph-pricing-five .hph-plan {padding:24px}
  .hph-home .hph-pricing-five .hph-price {font-size:35px}
  .hph-home .hph-pricing-controls {width:100%;max-width:100%;display:flex;gap:2px}
  .hph-home .hph-pricing-controls button {flex:1;min-width:0;padding:12px 8px;white-space:normal;font-size:12px}
  .hph-home .hph-pricing-controls button span {display:block;font-size:9px;margin:3px 0 0}
  .hph-home .hph-market {grid-template-columns:minmax(0,1fr)}
  .hph-home .hph-promo {align-items:stretch}
  .hph-home .hph-promo button {width:100%;padding:14px}
  .hph-home .hph-final {padding:43px 0}
  .hph-home .hph-final .hph-button {width:100%}
}

@media (max-width:360px) {
  .hph-home .hph-container {width:calc(100% - 24px)}
  .hph-home .hph-tabs {margin-inline:-12px;padding-inline:12px}
  .hph-home .hph-hero h1 {font-size:35px}
  .hph-home .hph-photo-stage {min-height:340px}
  .hph-home .hph-photo-tile-b {display:none}
  .hph-home .hph-proof-grid > .hph-proof-stat {padding:12px 11px}
  .hph-home .hph-proof-grid .hph-proof-stat strong {font-size:23px}
  .hph-home .hph-proof-grid .hph-proof-stat span {font-size:10.5px}
}

@media (prefers-reduced-motion:reduce) {
  .hph-home .hph-button,
  .hph-home .hph-live-card,
  .hph-home .hph-product-photo img,
  .hph-home .hph-suite article {transition:none!important;transform:none!important}
  .hph-home .hph-tabs {scroll-behavior:auto}
}
