.platforms-head, .platform-hero { background: #fff; color: #111a20; }
.platforms-head { padding: 64px 0 40px; }
.platforms-head__layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px 8%; align-items: end; }
.platforms-eyebrow { display: block; color: #087dac; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.platforms-head__title { margin-top: 20px; font-family: var(--font-heading); font-size: clamp(56px, 6.7vw, 96px); font-weight: 550; line-height: 1.05; letter-spacing: -.055em; }
.platforms-head__subtitle { margin-top: 24px; font-size: 20px; line-height: 1.6; color: #52606a; }
.platforms-head__index { display: grid; border-top: 1px solid #d5dde2; }
.platforms-head__index > a { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 54px; padding-block: 12px; border-bottom: 1px solid #d5dde2; font-size: 16px; font-weight: 550; }
.platforms-head__index > a:hover { color: #087dac; }
main > .platforms-catalogue { padding-block: 32px 88px; background: #fff; }
.platforms-catalogue__intro { max-width: none; margin: 0 0 48px; font-size: clamp(20px, 2vw, 26px); line-height: 1.55; color: #45515b; }
.platform-feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 40px 6%; padding-block: 64px; border-bottom: 1px solid #d5dde2; scroll-margin-top: 96px; }
.platform-feature:first-child { padding-top: 0; }
.platform-feature:last-child { padding-bottom: 0; border-bottom: 0; }
.platform-feature--text { grid-template-columns: minmax(0, 1fr); }
.platform-feature__media { display: block; align-self: stretch; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: #edf1f3; }
.platform-feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.platform-feature__body { min-width: 0; }
.platform-feature__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #087dac; }
.platform-feature__heading { padding: 20px 0; }
.platform-feature__title { margin: 0; font-family: var(--font-heading); font-size: clamp(34px, 4vw, 56px); font-weight: 550; line-height: 1.1; letter-spacing: -.04em; overflow-wrap: break-word; }
.platform-feature__title a:hover { color: #087dac; }
.platform-feature__subtitle { margin-top: 16px; font-size: 20px; line-height: 1.5; color: #087dac; }
.platform-feature__description { margin: 0; font-size: 18px; line-height: 1.7; color: #52606a; }
.platform-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 26px 0 0; padding: 24px 0; border-top: 1px solid #dce2e6; list-style: none; }
.platform-capabilities li { position: relative; min-width: 0; padding-left: 13px; font-size: 14px; line-height: 1.5; color: #334b59; }
.platform-capabilities li::before { content: ""; position: absolute; top: .65em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #087dac; }
.platform-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 12px; }
.platform-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border: 1px solid #111a20; border-radius: 7px; background: #111a20; color: #fff; font-size: 14px; font-weight: 600; }
.platform-button:hover { border-color: #087dac; background: #087dac; color: #fff; }
.platform-text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 550; color: #405663; text-decoration: underline; text-underline-offset: 5px; }
.platform-text-link:hover { color: #087dac; }
.platform-year { font-size: 12px; color: #526573; }

.platform-hero { padding: 36px 0 64px; }
.platform-breadcrumb { display: flex; align-items: center; gap: 12px; margin-bottom: 44px; color: #6b7983; font-size: 13px; }
.platform-breadcrumb a { color: #087dac; }
.platform-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.platform-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 7%; align-items: center; }
.platform-hero__layout--text { grid-template-columns: minmax(0, 1fr); }
.platform-hero__body { min-width: 0; }
.platform-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.platform-hero__title { margin-top: 24px; font-family: var(--font-heading); font-size: clamp(42px, 5.4vw, 78px); font-weight: 550; line-height: 1.08; letter-spacing: -.05em; overflow-wrap: break-word; }
.platform-hero__subtitle { margin-top: 20px; font-size: 22px; line-height: 1.45; color: #087dac; }
.platform-hero__summary { margin-top: 24px; font-size: 20px; line-height: 1.65; color: #52606a; }
.platform-hero .platform-actions { margin-top: 32px; }
.platform-hero__media { aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: 14px; background: #edf1f3; }
.platform-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.platform-section-nav { border-block: 1px solid #d5dde2; background: #f6f8f9; }
.platform-section-nav__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 36px; padding-block: 10px; }
.platform-section-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #52606a; }
.platform-section-nav a:hover { color: #087dac; }
.platform-copy { display: grid; gap: 40px; }
.platform-copy__section h2 { margin: 0 0 16px; font-family: var(--font-heading); font-size: clamp(26px, 2.6vw, 36px); font-weight: 550; line-height: 1.2; letter-spacing: -.025em; }
.platform-copy__section p { margin: 0; font-size: 18px; line-height: 1.8; color: #52606a; }
.platform-aside-title { margin: 0 0 20px; font-size: 13px; font-weight: 600; line-height: 1.5; color: #334b59; }
.platform-capabilities--aside { grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; border: 0; }
#capabilities { scroll-margin-top: 96px; }

.platform { display: grid; gap: 48px; }
.platform__body, .platform__side { min-width: 0; }
.platform__body .policy { font-size: 18px; line-height: 1.8; }
.platform__body .policy > :first-child { margin-top: 0; }
.platform__video { margin-top: 36px; overflow: hidden; border-radius: 16px; }
.platform__side { display: flex; flex-direction: column; gap: 36px; }
.platform__block { padding: 24px 0 0; border: 0; border-top: 1px solid #cbd2d7; background: transparent; }
.platform__block .kicker { display: block; margin-bottom: 20px; }
.platform__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.platform__tags li { padding: 6px 0; border: 0; background: transparent; font-size: 15px; color: #455864; }
.platform__tags li:not(:last-child)::after { content: "/"; margin-left: 8px; color: #9aa8b1; }
.platform__links { margin: 0; padding: 0; list-style: none; }
.platform__links li + li { margin-top: 10px; }
.platform__links a { display: inline-block; padding-block: 8px; font-weight: 550; color: #087dac; text-decoration: underline; text-underline-offset: 5px; overflow-wrap: anywhere; }
.platform__links a:hover { color: #11171c; }
@media (min-width: 992px) { .platform { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; column-gap: 8%; } }

.platformcard { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid #d5d8da; border-radius: 16px; background: #fff; transition: border-color .2s ease; }
.platformcard:hover { border-color: #087dac; }
.platformcard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f1f3f5; }
.platformcard__media img { width: 100%; height: 100%; object-fit: cover; }
.platformcard__body { display: flex; flex: 1; flex-direction: column; padding: 32px; }
.platformcard__label { margin-bottom: 14px; font-size: 10px; font-weight: 550; letter-spacing: .12em; text-transform: uppercase; color: #5c666d; }
.platformcard__title { margin: 0 0 12px; font-family: var(--font-heading); font-size: 26px; font-weight: 550; line-height: 1.15; letter-spacing: -.035em; }
.platformcard__title a { color: #11171c; }
.platformcard__title a:hover { color: #087dac; }
.platformcard__text { margin-bottom: 22px; font-size: 15px; line-height: 1.75; color: #555960; }
.platformcard__link { align-self: flex-start; margin-top: auto; padding: 12px 0; border-bottom: 1px solid #6d777d; font-size: 13px; font-weight: 550; color: #19232a; }
.platformcard__link:hover { color: #087dac; border-color: #087dac; }

.platformphoto { margin: 0; }
.platformphoto { overflow: hidden; }
.platformphoto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; }
.platformphoto figcaption { margin-top: 10px; font-size: 13px; color: #555960; }
#related.section { background: #f1f3f5; }
#related .section__title, #gallery .section__title { font-size: clamp(30px, 3.2vw, 44px); }
.platform-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; margin: 0; }
.platform-related > div { width: auto; padding: 0; margin: 0; }
@media (min-width: 768px) {
    .platform-related > div:only-child .platformcard--image { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
    .platform-related > div:only-child .platformcard__media { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 767.98px) {
    .platforms-head { padding: 40px 0 32px; }
    .platforms-head__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .platforms-head__title { font-size: clamp(48px, 10vw, 72px); }
    .platform-feature { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 40px; }
    .platform-feature__media { aspect-ratio: 16 / 10; }
    .platform-feature__title { font-size: clamp(36px, 7.5vw, 54px); }
    .platform-feature__description { font-size: 17px; }
    .platform-capabilities { gap: 12px 20px; }
    .platform-actions { gap: 12px 20px; }
    .platform-hero { padding-block: 28px 40px; }
    .platform-hero__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .platform-hero__title { font-size: clamp(38px, 8vw, 60px); }
    .platform-hero__summary { font-size: 18px; }
    .platform-hero__media { aspect-ratio: 16 / 10; }
    .platform-breadcrumb { margin-bottom: 32px; }
    .platform-section-nav__inner { gap: 4px 24px; }
}
