/* Home page (templates/pages/home.html): Main board (desktop) and MHome board (phone, <=640px).
   Everything is scoped under .hp. */

.hp .m-only { display: none !important; }

/* ---------- Hero ---------- */
.hp .hero__popular .chip { font-size: 14px; font-weight: 500; padding: 6px 12px; gap: 7px; }
.hp .hero__popular .chip__dot { width: 8px; height: 8px; }
.hp .faces { padding-right: 0; }
.hp .faces img, .hp .faces__ini { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; margin-right: -10px;
  box-shadow: 0 1px 3px rgba(20, 33, 43, .2); box-sizing: border-box; flex: none; }
.hp .faces__ini { display: flex; align-items: center; justify-content: center; background: var(--tint); color: var(--ink); font: 600 12px var(--font-body); }
.hp .hero__faces > span:last-child { padding-left: 12px; }
.hp .float-card__ini { width: 52px; height: 52px; border-radius: 50%; flex: none; border: 2px solid #19C6D9; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; background: #E0F7F8; color: #0B6E6E; font: 600 16px var(--font-head); }
.hp .float-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp .float-card__live { color: #B0123F; }

/* ---------- Upcoming webinars ---------- */
.hp .section { padding-top: 56px; padding-bottom: 24px; }
.hp .hp-webinars { padding-top: 64px; }
.hp .hp-includes { padding-top: 56px; padding-bottom: 56px; }
.hp .hp-teach { padding-top: 48px; padding-bottom: 48px; }
.hp #testimonials { padding-top: 56px; padding-bottom: 56px; }
.hp .section__head { margin-bottom: 24px; }
.hp .section__head h2 { font-size: 32px; letter-spacing: -.01em; }
.hp .hp-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
.hp #panel-live .hp-grid > .wcard:nth-of-type(n+9) { display: none; }
.hp .hp-grid:not(:has(.wcard)) { display: none; }
.hp .hp-grid:has(.wcard) + .hp-empty { display: none; }
.hp .center { margin-top: 24px; }
.hp .center .btn { font-size: 15px; padding: 12px 22px; }

/* Empty state (Empty board pattern) */
.hp-empty { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 32px 28px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 14px; }
.hp-empty__icon { width: 72px; height: 72px; border-radius: 20px; background: #E0F7F8; color: #0B6E6E; display: flex; align-items: center; justify-content: center; margin-top: 8px; }
.hp-empty__title { font: 600 19px var(--font-head); color: var(--ink); }
.hp-empty__line { font-size: 15px; color: var(--muted); max-width: 320px; }
.hp-empty .btn { margin-top: 6px; font-size: 15px; padding: 11px 18px; }

/* ---------- Industry tiles ---------- */
.hp .hp-tiles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hp .hp-tiles > .ind-tile:nth-child(n+9) { display: none; }
.hp .hp-tiles .ind-tile { color: #14212B !important; }
.hp .ind-tile__icon.ind, .hp .ind .ind-tile__icon { background: var(--tint); color: var(--ink); }
.hp .hp-tiles .ind-tile__text span { color: var(--ink); font-weight: 500; }
.hp .ind-tile__chev { color: #4B5965; flex: none; }

/* ---------- Speakers ---------- */
.hp .hp-link { font-weight: 600; font-size: 15px; text-decoration: none; }
.hp .hp-speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.hp .speaker-card__ini { flex: 1; border-radius: 50%; border: 3px solid #fff; background: #E0F7F8; color: #0B6E6E; display: flex; align-items: center; justify-content: center;
  font: 600 28px var(--font-head); }
.hp .speaker-card__area { display: inline-flex; align-items: center; gap: 5px; font-size: 11px !important; font-weight: 600; color: #4B5965; background: #EEF2F5;
  border-radius: 999px; padding: 2px 9px; }

/* ---------- App band ---------- */
.hp .qr-card__text { max-width: 120px; color: #14212B !important; }
.hp .qr-card__text strong { display: block; color: #14212B; }
.hp .qr-card__text span { color: var(--muted); }
.hp .hp-applink { font-weight: 600; font-size: 15px; text-decoration: none; color: #0B6E6E !important; }

/* ---------- Membership ---------- */
.hp .hp-promo .ring { opacity: .85; background: conic-gradient(from 120deg, #19C6D9, #4CB848, #A6D23A, #FFD21F, #F39A2B, #E0245E, #C13FD6, #19C6D9); }
.hp .hp-promo .btn--yellow { font-weight: 700; padding: 14px 24px; }

/* =================== Phone (MHome) =================== */
@media (max-width: 640px) {
  .hp .d-only { display: none !important; }
  .hp .m-only { display: revert !important; }
  .hp span.m-only, .hp a.m-only { display: inline !important; }

  /* Hero */
  .hp .hero > .ring { display: none; }
  .hp .hero__row { padding: 22px 16px 24px; gap: 16px; }
  .hp .hero__copy { gap: 16px; }
  .hp .hero .pill { font-size: 11.5px; letter-spacing: .05em; padding: 4px 10px; gap: 7px; }
  .hp .hero .pill .chip__dot { width: 7px; height: 7px; }
  .hp .hero h1 { font-size: 32px; line-height: 1.12; }
  .hp .hero__mark { background-size: 100% 7px; }
  .hp .hero__lead { font-size: 15.5px; }
  .hp .hero-search { padding: 5px 5px 5px 12px; gap: 6px; box-shadow: none; }
  .hp .hero-search svg { width: 18px; height: 18px; }
  .hp .hero-search input { font-size: 15px; }
  .hp .hero-search .btn { padding: 10px 14px; }
  .hp .hero__popular { gap: 8px; }
  .hp .hero__popular .chip { font-size: 13px; padding: 6px 11px; gap: 6px; }
  .hp .hero__popular .chip__dot { width: 7px; height: 7px; }
  .hp .hero__art { margin-top: -12px; padding-bottom: 14px; display: flex; flex-direction: row; justify-content: center; align-items: stretch; }
  .hp .hero__art .ring { width: 330px; --ring: 20px; transform: translate(-50%, -55%); }
  .hp .hero__art > img { width: 290px; max-width: 290px; align-self: center; }
  .hp .float-card--next { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; max-width: none; padding: 10px 12px; gap: 10px;
    box-shadow: 0 12px 28px rgba(15, 36, 51, .18); }
  .hp .float-card--next img, .hp .float-card__ini { width: 46px; height: 46px; }
  .hp .float-card__live { font-size: 11px; }
  .hp .float-card__live::before { display: none; }
  .hp .float-card__title { font-size: 14.5px; }
  .hp .float-card__sub { font-size: 12.5px; }

  /* Stats */
  .hp .stats .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px 16px; }
  .hp .stat { gap: 0; }
  .hp .stat i { width: 28px; height: 3px; }
  .hp .stat strong { font-size: 24px; line-height: 1.5; }
  .hp .stat span { font-size: 13px; }

  /* Sections */
  .hp .section { padding: 24px 0 8px; }
  .hp .hp-webinars { padding-top: 28px; }
  .hp .section__head { flex-wrap: nowrap; align-items: baseline; margin-bottom: 14px; }
  .hp .section__head h2 { font-size: 22px; }
  .hp .hp-industries .section__head { margin-bottom: 12px; }
  .hp-seeall { font-size: 14px; font-weight: 600; text-decoration: none; }

  /* Compact webinar rows */
  .hp .hp-rows { display: flex !important; flex-direction: column; gap: 14px; }
  .hp .hp-row { display: flex; gap: 12px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--dot); border-radius: 14px;
    padding: 14px; text-decoration: none; color: #14212B !important; }
  .hp .hp-row__art { position: relative; flex: none; }
  .hp .hp-row__art img { width: 72px; height: 84px; border-radius: 10px; object-fit: cover; object-position: top; display: block; background: var(--tint); }
  .hp .hp-row__date { position: absolute; left: -6px; top: -6px; width: 40px; border-radius: 6px; overflow: hidden; text-align: center; font-family: var(--font-head);
    background: #fff; box-shadow: 0 2px 6px rgba(20, 33, 43, .18); }
  .hp .hp-row__date b { display: block; background: var(--ink); color: #fff; font-size: 8.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .hp .hp-row__date strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; color: #14212B; }
  .hp .hp-row__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .hp .hp-row__ind { align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--ink); background: var(--tint); border-radius: 999px; padding: 1px 8px; }
  .hp .hp-row__title { font: 600 15px/1.3 var(--font-head); }
  .hp .hp-row__meta { font-size: 13px; color: #4B5965; }

  /* Industry tiles: 2 columns, vertical */
  .hp .hp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hp .hp-tiles .ind-tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 12px; }
  .hp .hp-tiles .ind-tile__icon { width: 38px; height: 38px; border-radius: 10px; }
  .hp .hp-tiles .ind-tile__icon svg { width: 20px; height: 20px; }
  .hp .hp-tiles .ind-tile__text { gap: 8px; }
  .hp .hp-tiles .ind-tile__text strong { font-size: 14px; line-height: 1.25; }
  .hp .hp-tiles .ind-tile__text span { font-size: 12px; }
  .hp .ind-tile__chev { display: none; }

  /* App band as an inset card */
  .hp .app-band { margin: 24px 16px; border-radius: 18px; }
  .hp .app-band .ring { display: none; }
  .hp .app-band__row { padding: 20px; gap: 12px; }
  .hp .app-band__copy { gap: 12px; }
  .hp .app-band__copy .pill { font-size: 11.5px; letter-spacing: .06em; padding: 4px 10px; }
  .hp .app-band h2 { font-size: 22px; line-height: 1.2; }
  .hp .hp-app-img { display: block !important; width: 100%; height: auto; }
  .hp .app-get { margin-top: 0; }
  .hp .app-get__badges { flex-direction: row; gap: 10px; }
  .hp .app-get__badges img { height: 42px; }

  /* Membership as an inset card */
  .hp .hp-promo { margin: 0 16px 28px; border-radius: 18px; }
  .hp .hp-promo .ring { display: none; }
  .hp .promo__row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; }
  .hp .promo__copy { flex: none; gap: 10px; }
  .hp .hp-promo .eyebrow { font-size: 12px; letter-spacing: .08em; }
  .hp .hp-promo h2 { font-size: 21px; }
  .hp .hp-promo .btn--yellow { padding: 10px 16px; font-size: 15px; min-height: 0; }

  .hp .hp-empty--phone { display: flex !important; }
}
.hp .speaker-card__area.ind { color: var(--ink); background: var(--tint); }