/* Approved platform concept, 2026-10-14. Scoped to the homepage products section. */
@font-face {
  font-family: 'GB Platform Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/assets/site/platform-icons.ttf?v=20261014-3') format('truetype');
}
.gb-platform {
  --gb-ink: #173829;
  --gb-green: #1f663d;
  color: var(--gb-ink);
  background: #dcf2c9;
  padding: clamp(64px, 5.6vw, 80px) clamp(16px, 5.6vw, 80px);
}
.gb-platform *, .gb-platform *::before, .gb-platform *::after { box-sizing: border-box; }
.gb-platform__inner { max-width: 1280px; margin-inline: auto; }
.gb-platform__eyebrow { margin: 0 0 16px; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--gb-green); }
.gb-platform__title { margin: 0; font-size: clamp(34px, 5.2vw, 62px); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; }
.gb-platform__intro { max-width: 940px; margin: 18px 0 10px; font-size: clamp(17px, 2.05vw, 24px); line-height: 1.42; color: #46584e; }
.gb-platform__caption { margin: 0 0 12px; font-size: 16px; color: #53685b; }
.gb-platform__map { position: relative; aspect-ratio: 1.55; margin: 0 -16px 78px; }
.gb-platform__links { position: absolute; inset: 0; pointer-events: none; }
/* Unmodified Material remove icon: a plain stroke, positioned behind the cards. */
.gb-platform__link { position: absolute; display: block; width: 18px; height: 18px; opacity: .5; transform-origin: center; }
.gb-platform__link--travelers { left: 25%; top: 25%; transform: rotate(28deg) scaleX(9); }
.gb-platform__link--students { right: 25%; top: 23%; transform: rotate(-34deg) scaleX(12); }
.gb-platform__link--partners { left: 25%; top: 57%; transform: rotate(-32deg) scaleX(10); }
.gb-platform__link--coaches { right: 25%; top: 57%; transform: rotate(32deg) scaleX(10); }
.gb-platform__link--organizations { left: calc(50% - 9px); top: 76%; transform: rotate(90deg) scaleX(7); }
.gb-platform__art { position: absolute; top: 0; left: 26%; width: 48%; margin: 0; }
.gb-platform__visual { position: relative; }
.gb-platform__diagram { display: block; width: 100%; height: auto; }
.gb-platform__layer-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gb-audience { position: absolute; width: 27.5%; border: 1px solid var(--gb-card-border); border-radius: 15px; padding: clamp(15px, 1.7vw, 24px); background: #fff; }
.gb-audience__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.gb-audience h3 { margin: 0; font-size: clamp(20px, 2.15vw, 28px); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; color: #141b17; }
.gb-audience__label { display: inline-block; flex: 0 0 auto; padding: 6px 11px; border-radius: 999px; font-size: clamp(10px, .92vw, 12px); font-weight: 700; line-height: 1.2; white-space: nowrap; color: #fff; background: var(--gb-audience-color); }
.gb-audience p { margin: 12px 0 0; color: #4c5b68; font-size: clamp(16px, 1.65vw, 20px); line-height: 1.35; letter-spacing: -.025em; }
.gb-audience p.gb-audience__product { margin: 12px 0 0; color: var(--gb-ink); font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: 0; overflow-wrap: anywhere; }
/* 2026-10-20 layout: Bloomy's audiences on the left, Anesh's on the right, organizations (both) at the bottom centre. */
.gb-audience--travelers { --gb-audience-color: #172d55; --gb-card-border: #91a0bd; top: 5%; left: 0; min-height: clamp(126px, 11.55vw, 148px); }
.gb-audience--travelers p { font-size: clamp(16px, 1.52vw, 20px); }
.gb-audience--students { --gb-audience-color: #478021; --gb-card-border: #8fb878; top: 5%; right: 0; }
.gb-audience--partners { --gb-audience-color: #f36631; --gb-card-border: #efb694; top: 61%; left: 0; width: 32%; }
.gb-audience--partners .gb-audience__label { color: #173829; }
.gb-audience--coaches { --gb-audience-color: #9b6039; --gb-card-border: #c7987a; top: 61%; right: 0; width: 28.5%; }
/* Hang lower than before so the taller card (product name and guide figures) stays clear of the core circle. */
.gb-audience--organizations { --gb-audience-color: #5c388c; --gb-card-border: #b093d2; bottom: -48px; left: 34%; width: 34%; }
.gb-audience--organizations h3 { font-size: clamp(19px, 1.98vw, 26px); }
.gb-audience__recruitment { display: block; margin-top: 4px; font-weight: 700; color: #29454b; }
/* 2026-10-20: Bloomy and Anesh stand beside the product name of the audiences they serve, not in the core. */
.gb-audience { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-content: start; }
.gb-audience > * { grid-column: 1 / -1; }
.gb-audience > .gb-audience__product { grid-column: 1; align-self: end; }
.gb-audience > .gb-audience__guides { grid-column: 2; align-self: end; display: flex; align-items: flex-end; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.gb-audience__guide { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gb-audience__guide img { display: block; width: auto; height: 52px; }
.gb-audience__guide span { font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--gb-ink); }
.gb-platform__connections { margin-top: 38px; }
.gb-platform__divider { display: flex; align-items: center; gap: 18px; margin: 0 0 24px; font-size: 14px; font-weight: 800; letter-spacing: .18em; text-align: center; }
.gb-platform__divider::before, .gb-platform__divider::after { content: ''; flex: 1; border-top: 1px solid #49714e; }
.gb-platform__roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; }
.gb-platform__role-pair { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.2vw, 28px); }
.gb-platform__person { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: clamp(20px, 2.2vw, 28px); }
.gb-platform__person--student { color: #246328; }
.gb-platform__person--traveler { color: #172d55; }
.gb-platform__same-person { margin: 10px 0 0; text-align: center; font-size: 18px; }
.gb-platform__guide { display: flex; align-items: center; gap: 18px; min-height: 88px; padding-left: 32px; border-left: 1px dashed #49714e; }
.gb-platform__guide p { margin: 0; font-size: 18px; line-height: 1.35; }
.gb-platform__guide small { display: block; margin-bottom: 3px; font-size: inherit; color: #596d5f; }
.gb-platform__guide strong { font-weight: 700; }
.gb-platform-icon { font-family: 'GB Platform Icons'; font-style: normal; font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; flex: 0 0 auto; white-space: nowrap; overflow-wrap: normal; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
.gb-platform-icon--arrow { font-size: 36px; }
.gb-platform__guide-arrow { font-size: 34px; color: #49714e; }
.gb-platform__note { max-width: 1060px; margin: 32px auto 0; text-align: center; font-size: 13px; line-height: 1.65; color: #52694e; }
.gb-platform__cta-row { display: flex; justify-content: center; margin-top: 28px; }
.gb-platform__cta { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 52px; padding: 13px 34px; border-radius: 999px; background: var(--gb-green); color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; text-align: center; }
.gb-platform__cta .gb-platform-icon { font-size: 24px; }
.gb-platform__cta:hover { background: #173829; }
.gb-platform__cta:focus-visible { outline: 3px solid #173829; outline-offset: 5px; }
/* The approved reference is desktop. Smaller screens preserve content without shrinking card text. */
@media (max-width: 999px) {
  .gb-platform__links { display: none; }
  .gb-platform__map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; aspect-ratio: auto; margin: 20px 0 0; }
  .gb-platform__art { position: static; grid-column: 1 / -1; grid-row: 1; width: min(100%, 530px); margin: 0 auto 8px; }
  .gb-audience { position: static; width: auto; padding: 20px; min-height: 0; }
  .gb-audience__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .gb-audience--organizations { grid-column: 1 / -1; justify-self: center; width: min(100%, 400px); }
  .gb-audience h3, .gb-audience--organizations h3 { font-size: 24px; }
  .gb-audience__label { font-size: 11px; }
  .gb-audience p, .gb-audience--travelers p { font-size: 18px; }
  .gb-platform__roles { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gb-platform__guide { border-left: 0; border-top: 1px dashed #49714e; padding: 22px 0 0; min-height: 0; }
}
@media (max-width: 599px) {
  .gb-platform__title { font-size: clamp(32px, 8.5vw, 46px); letter-spacing: -.03em; }
  .gb-platform__caption { font-size: 14px; }
  .gb-platform__map { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gb-platform__art { width: 100%; }
  .gb-audience { padding: 18px; }
  .gb-audience--organizations { width: 100%; }
  .gb-platform__connections { margin-top: 30px; }
  .gb-platform__divider { gap: 10px; font-size: 11px; letter-spacing: .12em; }
  .gb-platform__roles { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gb-platform__person { font-size: clamp(18px, 5vw, 24px); gap: 4px; }
  .gb-platform__role-pair { gap: 9px; }
  .gb-platform-icon { font-size: 34px; }
  .gb-platform-icon--arrow { font-size: 30px; }
  .gb-platform__same-person { font-size: 16px; }
  .gb-platform__guide { border-left: 0; border-top: 1px dashed #49714e; padding: 22px 0 0; min-height: 0; gap: 16px; }
  .gb-platform__guide p { font-size: 16px; }
  .gb-platform__note { font-size: 13px; margin-top: 24px; }
}