/* ---------- Landing ---------- */
.ppl-boards { padding: 14px 5px 28px; }

/* =========================
   Boards Search
========================= */
.ppl-boards__searchWrap{
  max-width: 760px;
  margin: 0 auto 1.5rem;
}

.ppl-boards__search{
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(18, 22, 28, 0.08);
  border-radius: 18px;
  padding: 0 0.9rem;
  min-height: 60px;
  box-shadow:
    0 10px 30px rgba(18, 22, 28, 0.06),
    0 2px 8px rgba(18, 22, 28, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ppl-boards__search:focus-within{
  border-color: rgba(255, 68, 0, 0.35);
  box-shadow:
    0 14px 34px rgba(18, 22, 28, 0.08),
    0 0 0 4px rgba(255, 68, 0, 0.08);
  transform: translateY(-1px);
}

.ppl-boards__searchIcon{
  flex: 0 0 auto;
  font-size: 1rem;
  color: #6b7280;
  margin-right: 0.75rem;
}

.ppl-boards__searchInput{
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #12161C;
  font-size: 0.98rem;
  line-height: 1.4;
  padding: 1rem 0;
}

.ppl-boards__searchInput::placeholder{
  color: #98a2b3;
}

.ppl-boards__searchClear{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  outline: 0;
  border-radius: 999px;
  background: #f4f6f8;
  color: #495057;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.ppl-boards__searchClear:hover{
  background: #eceff3;
  transform: scale(1.04);
}

/* =========================
   Empty State
========================= */
.ppl-boards__empty{
  max-width: 560px;
  margin: 1.5rem auto 0;
  text-align: center;
  background: #fff;
  border: 1px dashed rgba(18, 22, 28, 0.12);
  border-radius: 22px;
  padding: 2rem 1.25rem;
  box-shadow: 0 10px 30px rgba(18, 22, 28, 0.05);
}

.ppl-boards__emptyIcon{
  width: 58px;
  height: 58px;
  margin: 0 auto 0.9rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 179, 63, 0.16);
  color: #FF4400;
  font-size: 1.05rem;
}

.ppl-boards__emptyTitle{
  font-size: 1.05rem;
  font-weight: 800;
  color: #12161C;
  margin-bottom: 0.4rem;
}

.ppl-boards__emptyText{
  color: #667085;
  line-height: 1.6;
  font-size: 0.96rem;
}

/* =========================
   Hidden cards animation helper
========================= */
.board-card[hidden]{
  display: none !important;
}

@media (max-width: 640px){
  .ppl-boards__search{
    min-height: 56px;
    border-radius: 16px;
    padding: 0 0.8rem;
  }

  .ppl-boards__searchInput{
    font-size: 0.95rem;
  }

  .ppl-boards__empty{
    padding: 1.5rem 1rem;
    border-radius: 18px;
  }
}

.ppl-boards__header {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 6px 0 14px;
  text-align: center;
}

.ppl-boards__heroMeta {
  width: min(980px, 100%);
  margin: 18px auto 0;
}

.ppl-boards__flowSwitch {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* Small full-access route hint */
.ppl-boards__miniSwitch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 35, 42, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 20px rgba(15, 23, 42, 0.045);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.ppl-boards__miniSwitch:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 118, 110, 0.28);
  background: rgba(240, 253, 250, 0.9);
  color: var(--ppl-deep-sea-green);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
}

.ppl-boards__miniSwitchIcon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: var(--ppl-deep-sea-green);
  font-size: 0.7rem;
}

.ppl-boards__miniSwitch strong {
  color: var(--ppl-deep-sea-green);
  font-weight: 950;
}

.ppl-boards__miniSwitchArrow {
  font-size: 0.68rem;
  opacity: 0.75;
  transform: translateY(0.5px);
}

/* for teams */
.ppl-boards__flowSwitch--multi {
  gap: 0.65rem;
  flex-wrap: wrap;
}

.ppl-boards__flowSwitch--multi .ppl-boards__miniSwitch {
  white-space: nowrap;
}

.ppl-boards__miniSwitch--team .ppl-boards__miniSwitchIcon {
  background: rgba(255, 88, 4, 0.1);
  color: var(--ppl-blaze-orange);
}

.ppl-boards__miniSwitch--team strong {
  color: var(--ppl-blaze-orange);
}

.ppl-boards__miniSwitch--team:hover {
  border-color: rgba(255, 88, 4, 0.26);
  background: rgba(255, 247, 237, 0.92);
  color: var(--ppl-blaze-orange);
}

/* Title */
.ppl-boards__title {
  font-weight: 1000;
  letter-spacing: -0.6px;
  color: var(--ppl-mirage);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

/* Orange underline accent */
.ppl-boards__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: var(--ppl-blaze-orange);
}

/* Subtitle */
.ppl-boards__subtitle {
  margin-top: 12px;
  font-weight: 800;
  color: rgba(22, 35, 42, 0.68);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.ppl-boards__grid{
  margin-top: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.board-card{
  display: block;
  text-decoration: none;
  color: var(--ppl-mirage);

  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(22,35,42,0.12);
  border-radius: 18px;
  padding: 14px;

  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.board-card:hover{
  transform: translateY(-2px);
  border-color: rgba(7,80,86,0.26);
  background: #ffffff;
}

.board-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.board-card__country{
  font-weight: 1000;
  letter-spacing: -0.3px;
}

.board-card__status{
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.82rem;
  background: rgba(22,35,42,0.06);
  border: 1px solid rgba(22,35,42,0.12);
  color: rgba(22,35,42,0.76);
}

.board-card__status--on{
  background: rgba(7,80,86,0.10);
  border-color: rgba(7,80,86,0.18);
  color: var(--ppl-deep-sea-green);
}

.board-card__name{
  margin-top: 10px;
  font-weight: 1000;
  letter-spacing: -0.5px;
  font-size: 1.05rem;
}

.board-card__meta{
  margin-top: 4px;
  font-weight: 900;
  font-size: 0.86rem;
  color: rgba(22,35,42,0.62);
}

.board-card__desc{
  margin-top: 10px;
  font-weight: 800;
  color: rgba(22,35,42,0.70);
  line-height: 1.35;
}

.board-card__cta{
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-weight: 1000;
  color: var(--ppl-deep-sea-green);
}

.board-card__cta i{ color: var(--ppl-blaze-orange); }

.board-card--disabled{
  opacity: 0.70;
  cursor: not-allowed;
  user-select: none;
}

.board-card--disabled:hover{
  transform: none;
  border-color: rgba(22,35,42,0.12);
  background: rgba(255,255,255,0.90);
}

.board-card__cta--muted{
  color: rgba(22,35,42,0.58);
}

/* quote footer */
.ppl-boards__footer {
  margin-top: 18px;
  text-align: center;
}

.ppl-boards__quote {
  margin: 0 auto;
  max-width: 720px;
  padding: 10px 16px;

  color: rgba(22, 35, 42, 0.72);
}

.ppl-boards__quote p {
  margin: 0;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.02rem, 1.4vw, 1.35rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.2px;

  color: var(--ppl-mirage);
}

.ppl-boards__quote cite {
  display: block;
  margin-top: 6px;

  font-style: normal;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: rgba(7, 80, 86, 0.72);
}

@media (max-width: 640px) {
  .ppl-boards__footer {
    margin-top: 14px;
  }

  .ppl-boards__quote {
    padding: 8px 10px;
  }

  .ppl-boards__quote cite {
    font-size: 0.76rem;
  }
}

/* ---------- Detail layout ---------- */
.ppl-board{ padding: 14px 0 28px; }

.ppl-board__layout{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 12px;
  align-items: start;
}

@media (max-width: 980px){
  .ppl-board__layout{ grid-template-columns: 1fr; }
}

.ppl-sidenav{
  padding: 10px;
  border-radius: 18px;

  /* Glass background */
  background: rgba(255, 255, 255, 0.45);

  /* Frosted blur */
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  /* Glass border */
  border: 1px solid rgba(255,255,255,0.35);

  /* Light reflection edge */
  box-shadow:
    0 8px 30px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

.ppl-sidenav__link{
  display: block;
  padding: 10px 10px;
  border-radius: 14px;
  text-decoration: none;

  font-weight: 900;
  color: rgba(22,35,42,0.74);
  border: 1px solid transparent;
}

.ppl-sidenav__link:hover{
  border-color: rgba(7,80,86,0.18);
  color: var(--ppl-deep-sea-green);
}

.ppl-sidenav__link.is-active{
  background: rgba(7,80,86,0.10);
  border-color: rgba(7,80,86,0.18);
  color: var(--ppl-deep-sea-green);
}

@media (max-width: 820px) {
  .ppl-sidenav {
    display: none !important;
  }
}

.ppl-board__content{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(22,35,42,0.12);
  border-radius: 18px;
  padding: 14px;
}

.ppl-section{ padding: 8px 0 14px; border-bottom: 1px solid rgba(22,35,42,0.10); }
.ppl-section:last-child{ border-bottom: none; }

.ppl-section__title{
  margin: 0;
  font-weight: 1000;
  letter-spacing: -0.5px;
  color: var(--ppl-mirage);
}

.ppl-section__text{
  margin-top: 8px;
  font-weight: 800;
  color: rgba(22,35,42,0.72);
  line-height: 1.45;
}

.ppl-section__grid-2{
  margin-top: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ppl-section__grid-3{
  margin-top: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 820px) {
  .ppl-section__grid-2, .ppl-section__grid-3 {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 12px;
    max-width: 100%;
  }

  .ppl-section__grid-2 > .ppl-info,
  .ppl-section__grid-3 > .ppl-info {
    flex: 0 0 92%;
    width: 80%;
    max-width: 80%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

.ppl-info {
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(22,35,42,0.12);
  border-radius: 18px;
  padding: 12px;

  /* important */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.ppl-info__head {
  font-weight: 1000;
  color: var(--ppl-deep-sea-green);
  letter-spacing: -0.3px;

  /* important */
  min-width: 0;
  overflow-wrap: anywhere;
}

.ppl-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(22,35,42,0.72);
  font-weight: 800;
  line-height: 1.45;

  /* important */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ppl-list b {
  color: var(--ppl-mirage);
}

.ppl-list ul {
  margin-top: 6px;
  padding-left: 16px;
  min-width: 0;
  max-width: 100%;
}

.ppl-list li {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ppl-callout{
  margin-top: 10px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(7,80,86,0.08);
  border: 1px solid rgba(7,80,86,0.16);
}

.ppl-callout__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ppl-blaze-orange);
}

.ppl-callout__text{
  font-weight: 1000;
  color: var(--ppl-mirage);
}

.ppl-section__cta{
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
}

.ppl-linkbtn{
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;

  background: rgba(7,80,86,0.10);
  border: 1px solid rgba(7,80,86,0.18);
  color: var(--ppl-deep-sea-green);
  text-decoration: none;
  font-weight: 1000;
}

.ppl-linkbtn:hover{
  transform: translateY(-2px);
}

.ppl-linkbtn i{ color: var(--ppl-blaze-orange); }

/* Tooltip for disabled cards */
.ppl-tooltip{
  position: fixed;
  z-index: 9999;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(22,35,42,0.92);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  pointer-events: none;
  transform: translate(-50%, -120%);
  opacity: 0;
  transition: opacity 120ms ease;
}
.ppl-tooltip.is-show{ opacity: 1; }

/* for the exam timetable prep */
/* =====================================================
   Personalized Prep Section
   ===================================================== */
.ppl-prep__subtitle{
  margin: 10px auto 0;
  color: rgba(31,42,68,.74);
  font-weight: 750;
  line-height: 1.65;
  font-size: 1.02rem;
}

/* ---------- Grid Layout ---------- */

.ppl-prep__grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 992px){
  .ppl-prep__grid{
    grid-template-columns: 1fr;
  }
}

/* ---------- Cards ---------- */

.ppl-prep__card{
  background: #fff;
  border: 1px solid rgba(31,42,68,.10);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 14px 36px rgba(15,23,42,.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ppl-prep__card--soft{
  background: linear-gradient(
    180deg,
    rgba(2,179,101,.06),
    rgba(42,82,152,.05)
  );
}

/* ---------- Card Titles ---------- */

.ppl-prep__cardTitle{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 1000;
  letter-spacing: -0.4px;
  color: #1F2A44;
  font-size: 1.05rem;
}

.ppl-prep__cardTitle i{
  color: var(--ppl-blaze-orange);
}

/* ---------- Lists ---------- */

.ppl-list--tight{
  display: grid;
  gap: 8px;
}

.ppl-list--tight li{
  line-height: 1.6;
  font-weight: 800;
  color: rgba(31,42,68,.78);
}

/* ---------- Ordered Steps ---------- */

.ppl-steps{
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  font-weight: 800;
  line-height: 1.65;
  color: rgba(31,42,68,.78);
}

.ppl-steps li{
  padding-left: 2px;
}

/* ---------- CTA Bar (Full Width) ---------- */

.ppl-prep__ctaBar{
  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 20px 22px;
  border-radius: 22px;
  border: 1px solid rgba(31,42,68,.10);

  background: linear-gradient(
    180deg,
    rgba(2,179,101,.07),
    rgba(42,82,152,.06)
  );

  box-shadow: 0 18px 42px rgba(15,23,42,.08);
}

/* Left Side (Copy) */

.ppl-prep__ctaLeft{
  flex: 1 1 auto;
  min-width: 0;
}

.ppl-prep__ctaTitle{
  font-weight: 1000;
  letter-spacing: -0.5px;
  font-size: 1.15rem;
  color: #1F2A44;
  margin-bottom: 6px;
}

.ppl-prep__ctaSub{
  color: rgba(31,42,68,.74);
  font-weight: 750;
  line-height: 1.6;
  font-size: 1rem;
}

.ppl-prep__micro{
  display: inline-block;
  margin-left: 8px;
  font-size: .92rem;
  font-weight: 800;
  color: rgba(31,42,68,.62);
}

/* Right Side (Button) */

.ppl-prep__ctaRight{
  flex: 0 0 auto;
}

.ppl-prep__ctaRight .ppl-btn{
  min-width: 220px;
  justify-content: center;
}

/* ---------- Mobile Behavior ---------- */

@media (max-width: 768px){

  .ppl-prep__ctaBar{
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .ppl-prep__ctaRight .ppl-btn{
    width: 100%;
  }

  .ppl-prep__micro{
    display: block;
    margin: 6px 0 0;
  }
}

/* =========================
   Exam Boards Dark Mode
   ========================= */
html[data-theme="dark"] .ppl-boards,
html[data-theme="dark"] .ppl-board{
  background: #111b23;
}

html[data-theme="dark"] .ppl-boards__title,
html[data-theme="dark"] .ppl-boards__kicker,
html[data-theme="dark"] .ppl-boards__subtitle,
html[data-theme="dark"] .ppl-boards__note,
html[data-theme="dark"] .board-card,
html[data-theme="dark"] .board-card__country,
html[data-theme="dark"] .board-card__name,
html[data-theme="dark"] .board-card__status,
html[data-theme="dark"] .board-card__meta,
html[data-theme="dark"] .board-card__desc,
html[data-theme="dark"] .ppl-sidenav__link,
html[data-theme="dark"] .ppl-section__title,
html[data-theme="dark"] .ppl-section__text,
html[data-theme="dark"] .ppl-list,
html[data-theme="dark"] .ppl-list b,
html[data-theme="dark"] .ppl-callout__text,
html[data-theme="dark"] .ppl-prep__subtitle,
html[data-theme="dark"] .ppl-prep__cardTitle,
html[data-theme="dark"] .ppl-list--tight li,
html[data-theme="dark"] .ppl-steps,
html[data-theme="dark"] .ppl-prep__ctaTitle,
html[data-theme="dark"] .ppl-prep__ctaSub,
html[data-theme="dark"] .ppl-prep__micro{
  color: rgba(232,241,245,0.9);
}

html[data-theme="dark"] .board-card,
html[data-theme="dark"] .ppl-sidenav,
html[data-theme="dark"] .ppl-board__content,
html[data-theme="dark"] .ppl-info,
html[data-theme="dark"] .ppl-prep__card{
  background: #1a2a33;
  border-color: rgba(232,241,245,0.18);
}

html[data-theme="dark"] .board-card:hover{
  background: #223641;
  border-color: rgba(232,241,245,0.24);
}

html[data-theme="dark"] .board-card__status{
  background: rgba(232,241,245,0.10);
  border-color: rgba(232,241,245,0.18);
}

html[data-theme="dark"] .board-card__status--on,
html[data-theme="dark"] .ppl-sidenav__link.is-active,
html[data-theme="dark"] .ppl-callout{
  background: rgba(7,80,86,0.28);
  border-color: rgba(7,80,86,0.36);
}

html[data-theme="dark"] .ppl-sidenav__link:hover{
  border-color: rgba(232,241,245,0.24);
}

html[data-theme="dark"] .ppl-section{
  border-bottom-color: rgba(232,241,245,0.14);
}

html[data-theme="dark"] .ppl-prep__card--soft,
html[data-theme="dark"] .ppl-prep__ctaBar{
  background: linear-gradient(180deg, rgba(7,80,86,.24), rgba(19,33,42,.9));
  border-color: rgba(232,241,245,0.18);
}

html[data-theme="dark"] .ppl-linkbtn{
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--ppl-deep-sea-green) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}
html[data-theme="dark"] .ppl-linkbtn i{
  color: var(--ppl-blaze-orange) !important;
}
html[data-theme="dark"] .ppl-linkbtn:hover{
  background: #f3f8fa !important;
  border-color: #f3f8fa !important;
}

/* ============================================================
   Learning access detail
   ============================================================ */
.learning-detail{
  padding-bottom:40px;
}

.learning-detail__hero{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(280px, 380px);
  gap:24px;
  align-items:stretch;
  margin:10px 0 18px;
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(8,37,63,0.10);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,250,252,0.95)),
    linear-gradient(135deg, rgba(7,80,86,0.08), rgba(255,88,4,0.08));
  box-shadow:0 24px 70px rgba(8,37,63,0.08);
}

.learning-detail__copy{
  display:grid;
  align-content:center;
  gap:12px;
}

.learning-detail__copy .ppl-boards__title{
  margin:0;
}

.learning-detail__copy .ppl-boards__subtitle{
  max-width:68ch;
}

.learning-detail__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:4px;
}

.learning-detail__value{
  display:grid;
  align-content:space-between;
  gap:18px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(7,80,86,0.12);
  background:rgba(255,255,255,0.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.70);
}

.learning-detail__valueTop{
  display:grid;
  gap:4px;
}

.learning-detail__valueTop span{
  color:rgba(7,80,86,0.70);
  font-size:0.76rem;
  font-weight:900;
  letter-spacing:0.13em;
  text-transform:uppercase;
}

.learning-detail__valueTop strong{
  color:#0f2740;
  font-size:1.25rem;
  line-height:1.2;
}

.learning-detail__valueGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.learning-detail__valueGrid span{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  padding:10px 11px;
  border-radius:14px;
  background:rgba(7,80,86,0.06);
  color:#173244;
  font-size:0.9rem;
  font-weight:800;
}

.learning-detail__valueGrid i{
  color:var(--ppl-blaze-orange);
}

.learning-detail__plans .pricing-hub__shell{
  padding:18px;
  border-radius:24px;
}

.learning-detail__planHeader{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, 460px);
  gap:18px;
  align-items:start;
  margin-bottom:14px;
}

.learning-detail__planHeader .pricing-hub__title{
  max-width:820px;
  font-size:clamp(1.5rem, 2.4vw, 2.25rem);
}

html[data-theme="dark"] .learning-detail__hero{
  background:
    linear-gradient(135deg, rgba(17,29,42,0.98), rgba(14,21,31,0.96)),
    linear-gradient(135deg, rgba(188,239,227,0.09), rgba(255,176,123,0.08));
  border-color:rgba(255,255,255,0.09);
  box-shadow:0 26px 80px rgba(0,0,0,0.30);
}

html[data-theme="dark"] .learning-detail__value{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.09);
}

html[data-theme="dark"] .learning-detail__valueTop span{
  color:#bcefe3;
}

html[data-theme="dark"] .learning-detail__valueTop strong{
  color:#f6fbff;
}

html[data-theme="dark"] .learning-detail__valueGrid span{
  background:rgba(255,255,255,0.055);
  color:#d8e5ef;
}

@media (max-width: 980px){
  .learning-detail__hero,
  .learning-detail__planHeader{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .learning-detail__hero{
    gap:16px;
    padding:16px;
    border-radius:22px;
  }

  .learning-detail__actions .ppl-linkbtn{
    width:100%;
    justify-content:center;
  }

  .learning-detail__value{
    padding:14px;
  }

  .learning-detail__valueGrid{
    grid-template-columns:1fr;
  }

  .learning-detail__plans .pricing-hub__shell{
    padding:12px;
  }
}

/* ============================================================
   Pricing country selector
   ============================================================ */
.ppl-pricing-country{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-items:start;
  margin:0;
  padding:14px;
  border:1px solid rgba(7,80,86,0.13);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(247,251,250,0.92));
  box-shadow:0 16px 38px rgba(8,37,63,0.07);
}

/* Status/context row */
.ppl-pricing-country__status{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  width:100%;
}

.ppl-pricing-country__icon{
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(7,80,86,0.09);
  border:1px solid rgba(7,80,86,0.12);
  color:var(--ppl-deep-sea-green);
}

.ppl-pricing-country__copy{
  min-width:0;
  width:100%;
}

.ppl-pricing-country__eyebrow{
  margin-bottom:3px;
  color:rgba(7,80,86,0.72);
  font-size:0.72rem;
  font-weight:900;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.ppl-pricing-country__title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  color:var(--ppl-night-blue);
  font-size:1rem;
  line-height:1.2;
}

.ppl-pricing-country__title strong{
  min-width:0;
  overflow-wrap:anywhere;
}

.ppl-pricing-country__currencyPill{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(7,80,86,0.09);
  border:1px solid rgba(7,80,86,0.13);
  color:var(--ppl-deep-sea-green);
  font-size:0.78rem;
  font-weight:900;
}

.ppl-pricing-country__meta{
  margin-top:5px;
  max-width:72ch;
  color:rgba(19,33,42,0.64);
  font-size:0.82rem;
  line-height:1.4;
}

.ppl-pricing-country__boardLine{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:6px;
  color:rgba(19,33,42,0.66);
  font-size:0.82rem;
  font-weight:800;
}

.ppl-pricing-country__boardLine span{
  color:rgba(19,33,42,0.52);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

.ppl-pricing-country__boardLine strong{
  color:var(--ppl-night-blue);
}

.ppl-pricing-country__boardBadge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,88,4,0.10);
  border:1px solid rgba(255,88,4,0.18);
  color:var(--ppl-blaze-orange);
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* Selector area now lives below the text on every screen size */
.ppl-pricing-country__control{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px 10px;
  align-items:end;
  width:100%;
  max-width:620px;
}

.ppl-pricing-country__label{
  grid-column:1 / -1;
  color:rgba(19,33,42,0.62);
  font-size:0.72rem;
  font-weight:900;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

.ppl-pricing-country__selectWrap{
  position:relative;
  min-width:0;
  width:100%;
}

.ppl-pricing-country__selectWrap i{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  color:var(--ppl-deep-sea-green);
  pointer-events:none;
}

.ppl-pricing-country__select{
  width:100%;
  min-height:46px;
  border:1px solid rgba(7,80,86,0.18);
  border-radius:14px;
  padding:9px 38px 9px 36px;
  background:#fff;
  color:var(--ppl-night-blue);
  font-weight:800;
  box-shadow:0 10px 24px rgba(8,37,63,0.05);
}

.ppl-pricing-country__select:focus{
  border-color:rgba(7,80,86,0.38);
  outline:3px solid rgba(7,80,86,0.12);
  outline-offset:2px;
}

.ppl-pricing-country__reset{
  width:max-content;
  min-height:46px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(7,80,86,0.16);
  background:rgba(255,255,255,0.88);
  color:var(--ppl-deep-sea-green);
  font-weight:800;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ppl-pricing-country__reset:hover{
  transform:translateY(-1px);
  border-color:rgba(255,88,4,0.26);
  box-shadow:0 14px 28px rgba(8,37,63,0.08);
}

/* Dark mode */
html[data-theme="dark"] .ppl-pricing-country{
  background:linear-gradient(180deg, rgba(20,32,43,0.96), rgba(16,27,40,0.94));
  border-color:rgba(232,241,245,0.13);
  box-shadow:0 20px 50px rgba(0,0,0,0.24);
}

html[data-theme="dark"] .ppl-pricing-country__icon{
  background:rgba(188,239,227,0.10);
  border-color:rgba(232,241,245,0.12);
  color:#bcefe3;
}

html[data-theme="dark"] .ppl-pricing-country__eyebrow{
  color:rgba(232,241,245,0.72);
}

html[data-theme="dark"] .ppl-pricing-country__title,
html[data-theme="dark"] .ppl-pricing-country__label{
  color:#f3f8fa;
}

html[data-theme="dark"] .ppl-pricing-country__boardLine{
  color:rgba(232,241,245,0.74);
}

html[data-theme="dark"] .ppl-pricing-country__boardLine span{
  color:rgba(232,241,245,0.58);
}

html[data-theme="dark"] .ppl-pricing-country__boardLine strong{
  color:#f3f8fa;
}

html[data-theme="dark"] .ppl-pricing-country__currencyPill{
  background:rgba(232,241,245,0.08);
  border-color:rgba(232,241,245,0.12);
  color:#bcefe3;
}

html[data-theme="dark"] .ppl-pricing-country__meta{
  color:rgba(232,241,245,0.74);
}

html[data-theme="dark"] .ppl-pricing-country__selectWrap i{
  color:#bcefe3;
}

html[data-theme="dark"] .ppl-pricing-country__select{
  background:#13212a;
  border-color:rgba(232,241,245,0.18);
  color:#f3f8fa;
  color-scheme:dark;
  box-shadow:none;
}

html[data-theme="dark"] .ppl-pricing-country__select option,
html[data-theme="dark"] .ppl-pricing-country__select optgroup{
  background:#f6fbff;
  color:#0f2740;
}

html[data-theme="dark"] .ppl-pricing-country__select option:checked{
  background:#dff5ef;
  color:#075056;
  font-weight:800;
}

html[data-theme="dark"] .ppl-pricing-country__select:focus{
  border-color:rgba(188,239,227,0.42);
  outline:3px solid rgba(188,239,227,0.18);
  outline-offset:2px;
}

html[data-theme="dark"] .ppl-pricing-country__reset{
  background:rgba(255,255,255,0.06);
  border-color:rgba(232,241,245,0.16);
  color:#f3f8fa;
  box-shadow:none;
}

html[data-theme="dark"] .ppl-pricing-country__reset:hover{
  border-color:rgba(255,176,123,0.24);
}

/* Mobile refinement */
@media (max-width:640px){
  .ppl-pricing-country{
    padding:12px;
    gap:12px;
  }

  .ppl-pricing-country__status{
    gap:10px;
  }

  .ppl-pricing-country__icon{
    width:38px;
    height:38px;
    border-radius:13px;
  }

  .ppl-pricing-country__control{
    grid-template-columns:1fr;
    max-width:none;
  }

  .ppl-pricing-country__reset{
    width:100%;
  }
}

/* ============================================================
   Shared commerce hub / access tabs
   ============================================================ */
.pricing-hub{
  margin:0 0 2rem;
}

.pricing-hub__shell{
  position:relative;
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(8,37,63,0.10);
  background:
    radial-gradient(circle at top right, rgba(255,88,4,0.08), transparent 28%),
    radial-gradient(circle at bottom left, rgba(7,80,86,0.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,252,0.96));
  box-shadow:0 24px 80px rgba(8,37,63,0.08);
}

.pricing-hub__intro{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(260px, 340px);
  gap:20px;
  align-items:end;
  margin-bottom:18px;
}

.pricing-hub__eyebrow{
  margin-bottom:8px;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(7,80,86,0.70);
}

.pricing-hub__title{
  margin:0 0 8px;
  font-size:clamp(1.8rem, 2.8vw, 2.7rem);
  line-height:1.05;
  letter-spacing:0;
  color:#0f2740;
}

.pricing-hub__text{
  margin:0;
  max-width:64ch;
  color:#4f6172;
  line-height:1.65;
}

.pricing-hub__selector{
  display:grid;
  gap:10px;
}

.pricing-hub__summary{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin:0 0 18px;
}

.pricing-hub__summaryItem{
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(8,37,63,0.08);
  background:rgba(255,255,255,0.74);
  box-shadow:0 12px 30px rgba(8,37,63,0.05);
}

.pricing-hub__summaryLabel{
  display:block;
  margin-bottom:6px;
  font-size:0.76rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#5b7086;
}

.pricing-hub__summaryItem strong{
  color:#0f2740;
  font-size:1rem;
}

.pricing-hub__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 10px;
}

.pricing-hub__tab{
  min-height:46px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(8,37,63,0.10);
  background:rgba(255,255,255,0.84);
  color:#0f2740;
  font-weight:800;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.pricing-hub__tab:hover{
  transform:translateY(-1px);
  border-color:rgba(255,88,4,0.18);
  box-shadow:0 12px 28px rgba(8,37,63,0.07);
}

.pricing-hub__tab.is-active{
  background:linear-gradient(135deg, rgba(7,80,86,0.12), rgba(255,88,4,0.12));
  border-color:rgba(255,88,4,0.24);
  color:var(--ppl-deep-sea-green);
}

.pricing-hub__panes{
  position:relative;
}

.pricing-hub__pane{
  display:none;
}

.pricing-hub__pane.is-active{
  display:block;
}

html[data-theme="dark"] .pricing-hub__shell{
  background:
    radial-gradient(circle at top right, rgba(255,88,4,0.12), transparent 30%),
    radial-gradient(circle at bottom left, rgba(7,80,86,0.12), transparent 34%),
    linear-gradient(180deg, rgba(16,27,40,0.98), rgba(14,21,31,0.96));
  border-color:rgba(255,255,255,0.08);
  box-shadow:0 26px 80px rgba(0,0,0,0.32);
}

html[data-theme="dark"] .pricing-hub__eyebrow{
  color:rgba(232,241,245,0.72);
}

html[data-theme="dark"] .pricing-hub__title,
html[data-theme="dark"] .pricing-hub__summaryItem strong{
  color:#f6fbff;
}

html[data-theme="dark"] .pricing-hub__text,
html[data-theme="dark"] .pricing-hub__summaryLabel{
  color:#b7c7d8;
}

html[data-theme="dark"] .pricing-hub__summaryItem,
html[data-theme="dark"] .pricing-hub__tab{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.08);
  color:#f6fbff;
  box-shadow:none;
}

html[data-theme="dark"] .pricing-hub__tab.is-active{
  background:linear-gradient(135deg, rgba(188,239,227,0.14), rgba(255,176,123,0.10));
  border-color:rgba(255,176,123,0.18);
  color:#bcefe3;
}

@media (max-width: 960px){
  .pricing-hub__intro,
  .pricing-hub__summary{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   Board commerce cards and confirmation
   ============================================================ */
.ppl-board__header{
  margin: 10px 0 24px;
}

.ppl-board__header--confirm{
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 26px;
  border: 1px solid rgba(8, 37, 63, 0.10);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,250,252,0.94)),
    linear-gradient(135deg, rgba(7,80,86,0.08), rgba(255,88,4,0.07));
  box-shadow: 0 24px 70px rgba(8, 37, 63, 0.08);
}

.ppl-board__confirmTop{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
  gap: 18px;
  align-items: end;
}

.ppl-board__confirmCopy{
  display: grid;
  gap: 8px;
}

.ppl-board__kicker{
  color: var(--ppl-deep-sea-green);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ppl-board__title{
  margin: 0;
  color: #0f2740;
  font-size: 2.25rem;
  line-height: 1.05;
}

.ppl-board__subtitle{
  margin: 0;
  max-width: 62ch;
  color: #4f6172;
  line-height: 1.6;
}

.ppl-board__confirmBadge{
  display: grid;
  gap: 4px;
  justify-items: start;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(7, 80, 86, 0.14);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.ppl-board__confirmBadge span,
.ppl-board__confirmBadge small{
  color: #5b7086;
  font-size: 0.82rem;
  line-height: 1.35;
}

.ppl-board__confirmBadge strong{
  color: #0f2740;
  font-size: 1.15rem;
}

.pricing-hub__summary--confirm{
  margin: 0;
}

.pricing-hub__summary--confirm .pricing-hub__summaryItem{
  min-width: 0;
  background: rgba(255,255,255,0.84);
}

.board-card__priceHint{
  margin-top: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ppl-blaze-orange);
}

.ppl-purchase{
  margin: 0 0 28px;
}

.ppl-purchase__head{
  margin-bottom: 14px;
}

.ppl-purchase__head .ppl-pricing-country{
  margin-top: 18px;
}

.ppl-purchase__warning,
.ppl-confirm__warning,
.ppl-confirm__note{
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: rgba(255, 88, 4, 0.08);
  border: 1px solid rgba(255, 88, 4, 0.18);
  color: #4a2a16;
}

.ppl-purchase__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ppl-offer-card{
  border-radius: 24px;
  border: 1px solid rgba(8, 37, 63, 0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,250,255,0.96));
  box-shadow: 0 24px 60px rgba(8, 37, 63, 0.08);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ppl-offer-card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 74px rgba(8,37,63,0.12);
  border-color:rgba(255,88,4,0.18);
}

.ppl-offer-card.is-team{
  border-color: rgba(255, 88, 4, 0.22);
  box-shadow: 0 28px 70px rgba(255, 88, 4, 0.10);
}

.ppl-offer-card.is-popular{
  border-color: rgba(7, 80, 86, 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(244,251,248,0.96)),
    linear-gradient(135deg, rgba(7,80,86,0.08), rgba(255,88,4,0.08));
  box-shadow: 0 30px 76px rgba(7, 80, 86, 0.13), 0 10px 32px rgba(255, 88, 4, 0.10);
}

.ppl-offer-card__popularBadge{
  width: max-content;
  max-width: 100%;
  padding: 7px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(7,80,86,0.14), rgba(255,88,4,0.14));
  color: var(--ppl-deep-sea-green);
  border: 1px solid rgba(7, 80, 86, 0.16);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ppl-offer-card__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ppl-offer-card__typeIcon{
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:15px;
  border:1px solid rgba(7,80,86,0.13);
  background:linear-gradient(135deg, rgba(7,80,86,0.10), rgba(255,88,4,0.08));
  color:var(--ppl-deep-sea-green);
  box-shadow:0 12px 26px rgba(8,37,63,0.06);
}

.ppl-offer-card__typeIcon + div{
  min-width:0;
  flex:1 1 auto;
}

.ppl-offer-card__topMeta{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.ppl-offer-card__eyebrow{
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #5b7086;
  margin-bottom: 6px;
}

.ppl-offer-card__title{
  margin: 0;
  font-size: 1.5rem;
  color: #0f2740;
}

.ppl-offer-card__period{
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f2740;
  background: rgba(15, 39, 64, 0.08);
  border-radius: 999px;
  padding: 8px 12px;
}

.ppl-offer-card__statusPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(7, 80, 86, 0.12);
  color: var(--ppl-deep-sea-green);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ppl-offer-card__price{
  font-size: 2rem;
  font-weight: 800;
  color: #0f2740;
}

.ppl-offer-card__subprice,
.ppl-offer-card__meta,
.ppl-offer-card__notes,
.ppl-offer-card__policy,
.ppl-offer-card__blocked{
  color: #4f6172;
}

.ppl-offer-card__scope{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
}

.ppl-offer-card__scopeTag{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(12, 88, 138, 0.10);
  color: #12547d;
  font-size: 0.82rem;
  font-weight: 700;
}

.ppl-offer-card__highlights{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ppl-offer-card__highlight{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 39, 64, 0.06);
  border: 1px solid rgba(8, 37, 63, 0.10);
  color: #365167;
  font-size: 0.82rem;
  font-weight: 700;
}

.ppl-offer-card__highlight i{
  color: var(--ppl-deep-sea-green);
}

.ppl-offer-card__summary{
  margin: 0;
  color: #4f6172;
  line-height: 1.55;
}

.ppl-offer-card__accessLine{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(12, 88, 138, 0.08);
  border: 1px solid rgba(12, 88, 138, 0.12);
  color: #173754;
  font-size: 0.92rem;
  line-height: 1.5;
}

.ppl-offer-card__accessLine > i{
  margin-top: 0.18em;
  color: var(--ppl-blaze-orange);
}

.ppl-offer-card__accessLine strong{
  color: #0f2740;
}

.ppl-offer-card__facts{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.ppl-offer-card__details{
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.ppl-offer-card__toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ppl-deep-sea-green);
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
}

.ppl-offer-card__toggle::after{
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(7, 80, 86, 0.12);
  color: var(--ppl-deep-sea-green);
  font-size: 0.95rem;
  line-height: 1;
  transition: transform .2s ease, background .2s ease;
}

.ppl-offer-card__toggle[aria-expanded="true"]::after{
  content: "-";
  transform: rotate(180deg);
}

.ppl-offer-card__drawer{
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(15, 39, 64, 0.05);
  border: 1px solid rgba(8, 37, 63, 0.08);
}

.ppl-offer-card__policy{
  font-weight: 700;
}

.ppl-offer-card__blocked{
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(15, 39, 64, 0.06);
}

.ppl-offer-card__actions{
  margin-top: auto;
  display: grid;
  gap: 10px;
}

.ppl-offer-card__activeNote{
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(7, 80, 86, 0.07);
  border: 1px solid rgba(7, 80, 86, 0.12);
  color: #365167;
  font-size: 0.92rem;
  line-height: 1.5;
}

.ppl-offer-card__inlineLink{
  color: var(--ppl-deep-sea-green);
  font-weight: 800;
  text-decoration: none;
}

.ppl-offer-card__inlineActionRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 8px;
}

.ppl-offer-card__inlineForm{
  margin: 0;
}

.ppl-offer-card__inlineButton{
  border: 0;
  background: transparent;
  padding: 0;
  color: #a84319;
  font-weight: 800;
  cursor: pointer;
}

.ppl-offer-card__inlineButton:hover{
  color: #7e3010;
}

.ppl-offer-card__inlineLink:hover{
  text-decoration: underline;
}

.ppl-linkbtn--purchase{
  width: 100%;
  justify-content: center;
}

.ppl-linkbtn--ghost{
  background: transparent;
  border: 1px solid rgba(8, 37, 63, 0.16);
  color: #0f2740;
}

.ppl-linkbtn--submit{
  border: 0;
  cursor: pointer;
}

.ppl-confirm__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 24px;
}

.ppl-confirm__summary,
.ppl-confirm__actions{
  border-radius: 24px;
  border: 1px solid rgba(8, 37, 63, 0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,250,255,0.96));
  box-shadow: 0 24px 60px rgba(8, 37, 63, 0.08);
  padding: 24px;
}

.ppl-confirm__details{
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.ppl-confirm__details dt{
  margin-bottom: 4px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b7086;
}

.ppl-confirm__details dd{
  margin: 0;
  font-weight: 700;
  color: #0f2740;
}

.ppl-confirm__form{
  display: grid;
  gap: 16px;
}

.ppl-confirm__check{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(15, 39, 64, 0.05);
  color: #173754;
}

.ppl-confirm__check input{
  margin-top: 2px;
}

.ppl-checkout{
  min-height: min(680px, calc(100vh - 160px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  gap: 28px;
  align-items: center;
  padding: 34px 0 44px;
}

.ppl-checkout__copy{
  display: grid;
  gap: 16px;
  max-width: 680px;
}

.ppl-checkout__title{
  margin: 0;
  color: #0f2740;
  font-size: 2.7rem;
  line-height: 1.04;
}

.ppl-checkout__subtitle{
  margin: 0;
  max-width: 58ch;
  color: #4f6172;
  font-size: 1.05rem;
  line-height: 1.65;
}

.ppl-checkout__included{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.ppl-checkout__included span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(8, 37, 63, 0.10);
  background: rgba(255,255,255,0.78);
  color: #173754;
  font-weight: 800;
  font-size: 0.9rem;
}

.ppl-checkout__included i{
  color: var(--ppl-deep-sea-green);
}

.ppl-checkout__promise{
  display:grid;
  gap:10px;
  margin-top:2px;
}

.ppl-checkout__promise span{
  display:flex;
  align-items:center;
  gap:9px;
  color:#365167;
  font-weight:800;
}

.ppl-checkout__promise i{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:rgba(255,88,4,0.10);
  color:var(--ppl-blaze-orange);
}

.ppl-checkout__card{
  position:relative;
  display: grid;
  gap: 18px;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid rgba(8, 37, 63, 0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,250,255,0.96)),
    linear-gradient(135deg, rgba(7,80,86,0.08), rgba(255,88,4,0.08));
  box-shadow: 0 28px 76px rgba(8, 37, 63, 0.12);
}

.ppl-checkout__cardIcon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:18px;
  border:1px solid rgba(7,80,86,0.13);
  background:linear-gradient(135deg, rgba(7,80,86,0.12), rgba(255,88,4,0.10));
  color:var(--ppl-deep-sea-green);
  box-shadow:0 16px 34px rgba(8,37,63,0.08);
}

.ppl-checkout__cardTop{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}

.ppl-checkout__cardTop span,
.ppl-checkout__cardTop strong{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(7, 80, 86, 0.10);
  color: var(--ppl-deep-sea-green);
  font-size: 0.82rem;
  font-weight: 900;
}

.ppl-checkout__price{
  color: #0f2740;
  font-size: 2.45rem;
  font-weight: 900;
  line-height: 1;
}

.ppl-checkout__facts{
  display: grid;
  gap: 12px;
  margin: 0;
}

.ppl-checkout__facts div{
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(8, 37, 63, 0.08);
}

.ppl-checkout__facts dt{
  display:flex;
  align-items:center;
  gap:7px;
  color: #5b7086;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ppl-checkout__facts dt i{
  color: var(--ppl-deep-sea-green);
}

.ppl-checkout__facts dd{
  margin: 0;
  color: #0f2740;
  font-weight: 800;
}

.ppl-checkout__form{
  display: grid;
}

.ppl-checkout__fineprint{
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 88, 4, 0.16);
  background: rgba(255, 88, 4, 0.07);
  color: #6b381c;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ppl-checkout__back{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ppl-deep-sea-green);
  font-weight: 900;
  text-decoration: none;
}

.ppl-checkout__back:hover{
  text-decoration: underline;
}

html[data-theme="dark"] .board-card__priceHint{
  color: #ffb07b;
}

html[data-theme="dark"] .ppl-purchase__warning,
html[data-theme="dark"] .ppl-confirm__warning,
html[data-theme="dark"] .ppl-confirm__note{
  background: rgba(255, 122, 59, 0.12);
  border-color: rgba(255, 176, 123, 0.22);
  color: #ffd0b3;
}

html[data-theme="dark"] .ppl-board__header--confirm{
  background:
    linear-gradient(135deg, rgba(16, 27, 40, 0.98), rgba(14, 21, 31, 0.96)),
    linear-gradient(135deg, rgba(188,239,227,0.08), rgba(255,176,123,0.08));
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.30);
}

html[data-theme="dark"] .ppl-board__kicker{
  color: #bcefe3;
}

html[data-theme="dark"] .ppl-board__title,
html[data-theme="dark"] .ppl-board__confirmBadge strong{
  color: #f6fbff;
}

html[data-theme="dark"] .ppl-board__subtitle,
html[data-theme="dark"] .ppl-board__confirmBadge span,
html[data-theme="dark"] .ppl-board__confirmBadge small{
  color: #b7c7d8;
}

html[data-theme="dark"] .ppl-board__confirmBadge{
  background: rgba(255,255,255,0.05);
  border-color: rgba(188,239,227,0.14);
  box-shadow: none;
}

html[data-theme="dark"] .ppl-offer-card,
html[data-theme="dark"] .ppl-confirm__summary,
html[data-theme="dark"] .ppl-confirm__actions{
  background: linear-gradient(180deg, rgba(16, 27, 40, 0.98), rgba(14, 21, 31, 0.96));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.30);
}

html[data-theme="dark"] .ppl-offer-card__title,
html[data-theme="dark"] .ppl-offer-card__period,
html[data-theme="dark"] .ppl-offer-card__price,
html[data-theme="dark"] .ppl-confirm__details dd,
html[data-theme="dark"] .ppl-linkbtn--ghost{
  color: #f6fbff;
}

html[data-theme="dark"] .ppl-offer-card__eyebrow,
html[data-theme="dark"] .ppl-offer-card__subprice,
html[data-theme="dark"] .ppl-offer-card__meta,
html[data-theme="dark"] .ppl-offer-card__summary,
html[data-theme="dark"] .ppl-offer-card__notes,
html[data-theme="dark"] .ppl-offer-card__policy,
html[data-theme="dark"] .ppl-offer-card__blocked,
html[data-theme="dark"] .ppl-confirm__details dt,
html[data-theme="dark"] .ppl-confirm__check{
  color: #b7c7d8;
}

html[data-theme="dark"] .ppl-offer-card__activeNote{
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
  color: #d2deeb;
}

html[data-theme="dark"] .ppl-offer-card__statusPill{
  background: rgba(188, 239, 227, 0.12);
  color: #bcefe3;
}

html[data-theme="dark"] .ppl-offer-card__typeIcon{
  background:linear-gradient(135deg, rgba(188,239,227,0.12), rgba(255,176,123,0.08));
  border-color:rgba(188,239,227,0.16);
  color:#bcefe3;
  box-shadow:none;
}

html[data-theme="dark"] .ppl-offer-card.is-popular{
  background:
    linear-gradient(180deg, rgba(20,32,43,0.98), rgba(13,23,32,0.97)),
    linear-gradient(135deg, rgba(188,239,227,0.10), rgba(255,176,123,0.10));
  border-color: rgba(255, 176, 123, 0.58);
  box-shadow: 0 0 0 1px rgba(255,176,123,0.16), 0 30px 76px rgba(0, 0, 0, 0.40);
}

html[data-theme="dark"] .ppl-offer-card__popularBadge{
  background: linear-gradient(135deg, rgba(188,239,227,0.14), rgba(255,176,123,0.12));
  border-color: rgba(188,239,227,0.18);
  color: #bcefe3;
}

html[data-theme="dark"] .ppl-offer-card__inlineLink{
  color: #bcefe3;
}

html[data-theme="dark"] .ppl-offer-card__inlineButton{
  color: #ffb199;
}

html[data-theme="dark"] .ppl-offer-card__scopeTag{
  background: rgba(92, 191, 255, 0.14);
  color: #9ad8ff;
}

html[data-theme="dark"] .ppl-offer-card__accessLine{
  background: rgba(92, 191, 255, 0.10);
  border-color: rgba(92, 191, 255, 0.16);
  color: #d7e7f1;
}

html[data-theme="dark"] .ppl-offer-card__accessLine strong{
  color: #f6fbff;
}

html[data-theme="dark"] .ppl-offer-card__highlight,
html[data-theme="dark"] .ppl-offer-card__drawer{
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: #d7e7f1;
}

html[data-theme="dark"] .ppl-offer-card__highlight i{
  color:#bcefe3;
}

html[data-theme="dark"] .ppl-offer-card__accessLine > i{
  color:#ffb07b;
}

html[data-theme="dark"] .ppl-offer-card__toggle{
  color: #bcefe3;
}

html[data-theme="dark"] .ppl-offer-card__toggle::after{
  background: rgba(188, 239, 227, 0.12);
  color: #bcefe3;
}

html[data-theme="dark"] .ppl-offer-card__period,
html[data-theme="dark"] .ppl-confirm__check,
html[data-theme="dark"] .ppl-offer-card__blocked{
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .ppl-checkout__title,
html[data-theme="dark"] .ppl-checkout__price,
html[data-theme="dark"] .ppl-checkout__facts dd{
  color: #f6fbff;
}

html[data-theme="dark"] .ppl-checkout__subtitle,
html[data-theme="dark"] .ppl-checkout__facts dt,
html[data-theme="dark"] .ppl-checkout__promise span{
  color: #b7c7d8;
}

html[data-theme="dark"] .ppl-checkout__included span,
html[data-theme="dark"] .ppl-checkout__card{
  background: linear-gradient(180deg, rgba(16, 27, 40, 0.98), rgba(14, 21, 31, 0.96));
  border-color: rgba(255, 255, 255, 0.08);
  color: #d7e7f1;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.30);
}

html[data-theme="dark"] .ppl-checkout__promise i,
html[data-theme="dark"] .ppl-checkout__cardIcon{
  background:rgba(188,239,227,0.10);
  border-color:rgba(188,239,227,0.14);
  color:#bcefe3;
  box-shadow:none;
}

html[data-theme="dark"] .ppl-checkout__cardTop span,
html[data-theme="dark"] .ppl-checkout__cardTop strong{
  background: rgba(188, 239, 227, 0.12);
  color: #bcefe3;
}

html[data-theme="dark"] .ppl-checkout__facts div{
  border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .ppl-checkout__facts dt i{
  color:#bcefe3;
}

html[data-theme="dark"] .ppl-checkout__fineprint{
  background: rgba(255, 122, 59, 0.12);
  border-color: rgba(255, 176, 123, 0.20);
  color: #ffd0b3;
}

html[data-theme="dark"] .ppl-checkout__back{
  color: #bcefe3;
}

@media (max-width: 1024px){
  .ppl-board__confirmTop,
  .pricing-hub__summary--confirm{
    grid-template-columns: 1fr;
  }

  .ppl-board__confirmBadge{
    justify-items: start;
  }

  .ppl-purchase__grid{
    grid-template-columns: 1fr;
  }

  .ppl-offer-card__topMeta{
    align-items: flex-start;
  }

  .ppl-confirm__grid{
    grid-template-columns: 1fr;
  }

  .ppl-checkout{
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

@media (max-width: 720px){
  .ppl-board__header--confirm{
    padding: 18px;
    border-radius: 20px;
  }

  .ppl-board__title{
    font-size: 1.85rem;
  }

  .ppl-confirm__details{
    grid-template-columns: 1fr;
  }

  .ppl-checkout{
    padding: 18px 0 30px;
  }

  .ppl-checkout__title{
    font-size: 2rem;
  }

  .ppl-checkout__card{
    padding: 18px;
    border-radius: 20px;
  }

  .ppl-checkout__facts div{
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ============================================================
   Team dashboard and invite management
   ============================================================ */
.ppl-team-dashboard{
  padding-bottom: 34px;
}

.ppl-team-dashboard__header{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin: 12px 0 22px;
  padding: 22px 0 6px;
}

.ppl-team-dashboard__newPlan{
  width: auto;
  min-width: 210px;
}

.ppl-team-dashboard__metrics{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.ppl-team-dashboard__metric{
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(8, 37, 63, 0.10);
  background: rgba(255,255,255,0.80);
  box-shadow: 0 16px 40px rgba(8,37,63,0.06);
}

.ppl-team-dashboard__metric span{
  display: block;
  color: #5b7086;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ppl-team-dashboard__metric strong{
  display: block;
  margin-top: 6px;
  color: #0f2740;
  font-size: 1.85rem;
  line-height: 1;
}

.ppl-team-dashboard__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ppl-team-card,
.ppl-team-dashboard__empty{
  display: grid;
  gap: 18px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(8, 37, 63, 0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,250,255,0.96));
  box-shadow: 0 24px 60px rgba(8, 37, 63, 0.08);
}

.ppl-team-card__head{
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.ppl-team-card__eyebrow{
  color: var(--ppl-deep-sea-green);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ppl-team-card__title,
.ppl-team-dashboard__empty h2{
  margin: 4px 0 0;
  color: #0f2740;
  font-size: 1.45rem;
}

.ppl-team-card__head p,
.ppl-team-dashboard__empty p{
  margin: 8px 0 0;
  color: #4f6172;
  line-height: 1.55;
}

.ppl-team-card__status{
  height: max-content;
  white-space: nowrap;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(7, 80, 86, 0.10);
  color: var(--ppl-deep-sea-green);
  font-size: 0.8rem;
  font-weight: 900;
}

.ppl-team-card__capacity{
  display: grid;
  gap: 10px;
}

.ppl-team-card__capacityText{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #4f6172;
  font-size: 0.9rem;
}

.ppl-team-card__capacityText strong{
  color: #0f2740;
}

.ppl-team-card__bar{
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 39, 64, 0.08);
}

.ppl-team-card__bar span{
  display: block;
  height: 100%;
  min-width: 10px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ppl-deep-sea-green), var(--ppl-blaze-orange));
}

.ppl-team-card__stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ppl-team-card__stats div{
  padding: 12px;
  border-radius: 16px;
  background: rgba(15, 39, 64, 0.05);
}

.ppl-team-card__stats span{
  display: block;
  color: #5b7086;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ppl-team-card__stats strong{
  display: block;
  margin-top: 4px;
  color: #0f2740;
  font-size: 1.2rem;
}

.ppl-team-dashboard__empty{
  max-width: 560px;
  margin: 20px auto 0;
  justify-items: center;
  text-align: center;
}

.ppl-team-dashboard__emptyIcon{
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(7, 80, 86, 0.10);
  color: var(--ppl-deep-sea-green);
}

.ppl-team-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(320px, 0.85fr);
  gap:1.5rem;
  align-items:start;
}

.ppl-team-sections{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.5rem;
}

.ppl-team-form{
  display:grid;
  gap:0.85rem;
}

.ppl-team-form__label{
  font-weight:700;
  color:var(--ppl-text);
}

.ppl-team-form__input{
  width:100%;
  border:1px solid rgba(18, 48, 79, 0.12);
  border-radius:16px;
  padding:0.9rem 1rem;
  background:#fff;
  color:var(--ppl-text);
}

.ppl-team-list{
  display:grid;
  gap:1rem;
}

.ppl-team-list__item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  padding:1rem 0;
  border-top:1px solid rgba(18, 48, 79, 0.08);
}

.ppl-team-list__item:first-child{
  border-top:none;
  padding-top:0;
}

.ppl-team-list__main{
  min-width:0;
  flex:1;
}

.ppl-team-list__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:0.65rem;
}

.ppl-team-linkbox{
  margin-top:0.75rem;
  padding:0.8rem 0.95rem;
  border-radius:14px;
  background:rgba(18, 48, 79, 0.06);
  color:var(--ppl-muted);
  font-size:0.9rem;
  word-break:break-all;
}

html[data-theme="dark"] .ppl-team-form__label{
  color:#edf0f4;
}

html[data-theme="dark"] .ppl-team-form__input{
  border-color:rgba(237, 240, 244, 0.12);
  background:rgba(255,255,255,0.04);
  color:#edf0f4;
}

html[data-theme="dark"] .ppl-team-list__item{
  border-top-color:rgba(237, 240, 244, 0.08);
}

html[data-theme="dark"] .ppl-team-linkbox{
  background:rgba(255,255,255,0.06);
  color:rgba(237, 240, 244, 0.82);
}

html[data-theme="dark"] .ppl-team-dashboard__metric,
html[data-theme="dark"] .ppl-team-card,
html[data-theme="dark"] .ppl-team-dashboard__empty{
  background: linear-gradient(180deg, rgba(16, 27, 40, 0.98), rgba(14, 21, 31, 0.96));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.30);
}

html[data-theme="dark"] .ppl-team-dashboard__metric strong,
html[data-theme="dark"] .ppl-team-card__title,
html[data-theme="dark"] .ppl-team-dashboard__empty h2,
html[data-theme="dark"] .ppl-team-card__capacityText strong,
html[data-theme="dark"] .ppl-team-card__stats strong{
  color: #f6fbff;
}

html[data-theme="dark"] .ppl-team-dashboard__metric span,
html[data-theme="dark"] .ppl-team-card__head p,
html[data-theme="dark"] .ppl-team-dashboard__empty p,
html[data-theme="dark"] .ppl-team-card__capacityText,
html[data-theme="dark"] .ppl-team-card__stats span{
  color: #b7c7d8;
}

html[data-theme="dark"] .ppl-team-card__status,
html[data-theme="dark"] .ppl-team-dashboard__emptyIcon{
  background: rgba(188, 239, 227, 0.12);
  color: #bcefe3;
}

html[data-theme="dark"] .ppl-team-card__bar,
html[data-theme="dark"] .ppl-team-card__stats div{
  background: rgba(255,255,255,0.06);
}

@media (max-width: 980px){
  .ppl-team-dashboard__header,
  .ppl-team-dashboard__grid,
  .ppl-team-dashboard__metrics{
    grid-template-columns:1fr;
  }

  .ppl-team-dashboard__newPlan{
    width:100%;
  }

  .ppl-team-grid,
  .ppl-team-sections{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .ppl-team-card__head,
  .ppl-team-card__capacityText{
    display:grid;
  }

  .ppl-team-card__stats{
    grid-template-columns:1fr;
  }
}