/* Figma fidelity pass — frames 47:891, 45:149 and 45:586. */
:root { --figma-link: #2d48b2; --figma-aqua: #00ffee; --figma-gray: #f2f2f2; }

/* Footer component: Figma node 47:1002 (1920 × 451). */
.site-footer {
  height: 451px;
  margin-top: 40px;
  padding: 42px 0;
  background: var(--figma-gray);
}

.site-footer__frame {
  width: min(1240px, calc(100% - 40px));
  height: 367px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.site-footer__top {
  width: 100%;
  min-height: 201px;
  padding: 0;
  display: grid;
  grid-template-columns: 184px 207px 221px 221px;
  justify-content: space-between;
  gap: 0;
}

.site-footer__mark { width: 184px; height: 90px; }
.footer-column { width: auto; padding: 0; }
.footer-column h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 28.272px; }
.footer-links { margin-top: 7px; gap: 5px; }
.footer-column, .footer-links a { font-size: 14px; font-weight: 400; line-height: 28.272px; }

.site-footer__line { width: 100%; height: 1px; background: rgba(0, 0, 0, .25); }

.site-footer__bottom {
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #003d5c;
  font-size: 14px;
  line-height: 24px;
}

.footer-social {
  width: 235px;
  height: 44px;
  display: flex;
  gap: 0;
  align-items: stretch;
  background: url('/assets/images/figma-footer-social.png') center / 235px 44px no-repeat;
}
.footer-social a { flex: 1; font-size: 0; line-height: 0; }

.layout-home .home-section { margin-top: 65px; }
.layout-home .home-section--feature { margin-top: 40px; }
.layout-home .home-section__title { margin-bottom: 24px; font-size: 28px; font-weight: 600; line-height: 28.272px; }
.layout-home .home-highlight__content, .layout-home .home-editorial__content { height: 241px; }
.layout-home .home-label { min-height: auto; padding: 0; color: var(--figma-link); font-size: 20px; line-height: 28.272px; }
.layout-home .home-post-card .home-label { padding: 2px 9px; color: #000; font-size: 14px; line-height: 20px; }
.layout-home .home-highlight h3, .layout-home .home-editorial h3 { margin-top: 12px; font-size: 22px; line-height: 28.272px; }
.layout-home .home-highlight p, .layout-home .home-editorial p { margin-top: 12px; font-size: 18px; line-height: 24px; }
.layout-home .home-text-link { color: var(--figma-link); font-size: 18px; font-weight: 500; line-height: 28.272px; }
.layout-home .home-post-card { display: flex; height: 304px; flex-direction: column; gap: 0; }
.layout-home .home-post-card__media { height: 152px; }
.layout-home .home-post-card__meta { min-height: 24px; margin-top: 12px; }
.layout-home .home-post-card h3 { margin: 12px 0 0; color: #000; font-size: 16px; font-weight: 500; line-height: 24px; }
.layout-home .home-post-card h3 a { color: inherit; }
.layout-home .home-categories__heading { width: min(1238px, calc(100% - 40px)); }
.layout-home .home-carousel { width: 100%; margin: 0; scroll-padding-inline: 0; }
.layout-home .home-carousel__track { padding-inline: 0; margin-inline: auto; }

.layout-category .category-hero { height: 215px; }
.layout-category .category-banner {
  position: relative;
  height: 215px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(.4266615deg, #00161f 113.08%, #005e85 306.15%);
}
.layout-category .category-banner::before,
.layout-category .category-banner::after {
  position: absolute;
  width: 429px;
  height: 429px;
  border-radius: 50%;
  border: 56px solid #007ca6;
  content: "";
}
.layout-category .category-banner::before { left: -429px; top: -107px; }
.layout-category .category-banner::after { right: -171px; top: 23px; width: 171px; height: 171px; border-width: 30px; }
.layout-category .category-banner__title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 7px 11px;
  border-radius: 12.333px;
  background: #00c8ff;
  color: #000;
  font-size: 56px;
  font-weight: 600;
  line-height: 75.784px;
  text-align: center;
}
.layout-category .category-banner--image::before, .layout-category .category-banner--image::after { display: none; }
.layout-category .category-banner--image > img { width: 100%; height: 100%; object-fit: cover; }
.layout-category .category-listing { padding: 40px 0 0; }
.layout-category .archive-grid {
  position: relative;
  display: grid;
  grid-template-columns: 948px 259px;
  grid-template-rows: 53px auto;
  justify-content: space-between;
  gap: 24px 0;
}
.layout-category .category-listing__heading { grid-column: 1 / -1; }
.layout-category .category-listing__heading h2 { margin: 0; font-size: 28px; font-weight: 600; line-height: 28.272px; }
.layout-category .category-listing__heading > div { height: 1px; margin-top: 24px; background: rgba(0, 0, 0, .25); }
.layout-category .archive-grid__cards { grid-column: 1; grid-row: 2; grid-template-columns: repeat(3, 305.333px); column-gap: 16px; row-gap: 40px; }
.layout-category .archive-grid__cards .card { height: 304px; min-height: 304px; padding: 16px; border: 0; background: #fff; }
.layout-category .archive-grid__cards .card__thumb { height: 152px; background: linear-gradient(103.8907deg, #00ffee 3.0244%, #d429b7 204.3%); }
.layout-category .archive-grid__cards .card__label { margin: 12px 0; padding: 2px 9px; background: #00fff2; color: #000; font-size: 14px; font-weight: 400; line-height: 20px; }
.layout-category .archive-grid__cards .card h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 24px; }
.layout-category .archive-grid__offer { grid-column: 2; grid-row: 2; width: 259px; min-height: 606px; padding: 0; border: 0; background: transparent; }
.layout-category .category-ad, .layout-category .category-ad img { display: block; width: 259px; height: 606px; }
.layout-category .category-load-more { display: flex; justify-content: center; margin: 40px 0; }
.layout-category .category-load-more a { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 10px 20px; border: 2px solid #000; border-radius: 35px; color: #000; font-size: 16px; font-weight: 400; line-height: 21.121px; }
.layout-category .category-load-more span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #304ffe; font-size: 24px; line-height: 1; }

.layout-article .article-top { grid-template-columns: 741px 452px; gap: 42px; }
.layout-article .article-hero__media, .layout-article .article-hero__media img { height: 341px; min-height: 341px; max-height: 341px; border-radius: 0; }
.layout-article .article-top > div > .pill-row { margin-top: 24px; }
.layout-article .article-title { margin-top: 14px; font-size: 28px; font-weight: 600; letter-spacing: 0; line-height: 34px; }
.layout-article .article-lead { margin-top: 18px; color: #000; font-size: 16px; line-height: 24px; }
.layout-article .article-sidebar .newsletter-card { height: 335px; min-height: 335px; padding: 24px; background: var(--figma-gray); }
.layout-article .article-sidebar .kicker { color: #000; font-size: 22px; font-weight: 600; letter-spacing: 0; line-height: 27px; text-transform: none; }
.layout-article .article-content-wrap { grid-template-columns: 704px 332px; justify-content: space-between; margin-top: 24px; }
.layout-article .article-body p, .layout-article .article-body li { font-size: 20px; line-height: 30px; }
.layout-article .article-body h2 { font-size: 32px; line-height: 41.6px; }
.layout-article .toc-card { padding: 0 20px; background: #fff; }
.layout-article .toc-card h3 { font-size: 24px; font-weight: 400; line-height: 33.6px; }
.layout-article .toc-list { gap: 24px; }
.layout-article .toc-list a { color: #000; font-size: 16px; line-height: 22.4px; }
.layout-article .author-strip { margin-top: 48px; }

/* Article frame 45:586. */
.layout-article, .layout-article .site-shell { background: #fff; }
.layout-article .article-hero { padding: 0; }
.layout-article .article-hero__frame { width: 1240px; height: 341px; margin: 0 auto; display: grid; grid-template-columns: 741px 452px; gap: 42px; }
.layout-article .article-hero__cover { width: 741px; height: 341px; }
.layout-article .article-hero__media, .layout-article .article-hero__media img { width: 741px; height: 341px; min-height: 341px; max-height: 341px; border-radius: 0; }
.layout-article .article-sidebar { width: 452px; height: 335px; }
.layout-article .article-sidebar .newsletter-card { box-sizing: border-box; width: 452px; height: 335px; min-height: 335px; padding: 24px; border: 0; background: #f2f2f2; }
.layout-article .article-sidebar .newsletter-card .kicker { margin: 0; color: #000; font-size: 18px; font-weight: 600; line-height: 27px; }
.layout-article .article-sidebar .newsletter-card h3, .layout-article .newsletter-form__field--name { display: none; }
.layout-article .article-sidebar .newsletter-card p { height: 50px; margin: 7px 0 11px; color: #000; font-size: 14px; font-weight: 300; line-height: 16.8px; }
.layout-article .article-sidebar .newsletter-form { display: flex; height: 180px; flex-direction: column; justify-content: space-between; }
.layout-article .article-sidebar .newsletter-form__field { gap: 2px; }
.layout-article .article-sidebar .newsletter-form__field label { color: rgba(0, 0, 0, .75); font-family: Rubik, sans-serif; font-size: 12px; font-weight: 500; line-height: 20px; }
.layout-article .article-sidebar .newsletter-form__field input { height: 40px; padding: 10px 12px; border: 0; border-radius: 8px; background: #fff; font-size: 14px; line-height: 20px; }
.layout-article .article-newsletter-consent { display: flex !important; visibility: visible !important; min-height: 45px; align-items: flex-start; gap: 5px; color: rgba(0, 0, 0, .75); font-size: 12px; font-weight: 300; line-height: 15px; opacity: 1 !important; }
.layout-article .article-newsletter-consent input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: #00f6ff; }
.layout-article .article-newsletter-consent span { display: block !important; color: rgba(0, 0, 0, .75) !important; }
.layout-article .article-newsletter-consent a { color: inherit; text-decoration: underline; }
.layout-article .article-sidebar .btn--primary { height: 42px; padding: 10px 20px; border-radius: 7px; background: #00f6ff; color: #000; font-size: 16px; font-weight: 500; line-height: 21.121px; }
.layout-article .article-intro { padding: 40px 0 0; }
.layout-article .article-intro__frame { position: relative; width: 1240px; height: 337px; margin: 0 auto; }
.layout-article .article-intro__copy { width: 833px; }
.layout-article .article-title { max-width: 833px; margin: 0; color: #000; font-size: 32px; font-weight: 700; line-height: 38.4px; letter-spacing: 0; }
.layout-article .article-lead { max-width: 833px; margin: 24px 0 0; color: #000; font-size: 19.5px; font-weight: 400; line-height: 28px; }
.layout-article .article-intro .social-rail { position: absolute; top: 5px; right: 0; left: auto; display: grid; width: 44px; height: 210px; grid-template-rows: repeat(4, 20px); align-content: space-between; padding: 0; background: url('/assets/images/figma-article-share.png') center / 44px 210px no-repeat; }
.layout-article .article-intro .social-rail a { width: 44px; height: 20px; color: transparent; font-size: 0; line-height: 0; }
.layout-article .article-byline { position: absolute; bottom: 26px; left: 0; display: flex; align-items: center; gap: 8px; min-width: 178px; height: 43px; }
.layout-article .article-byline > img, .layout-article .article-byline > span { width: 43px; height: 43px; border-radius: 50%; object-fit: cover; }
.layout-article .article-byline > span { background: linear-gradient(120deg, #00ffee 0%, #5c91cf 100%) !important; }
.layout-article .article-byline > div { display: flex; height: 43px; flex-direction: column; justify-content: space-between; }
.layout-article .article-byline strong { color: #005e85 !important; font-size: 16px; font-weight: 400; line-height: 22.4px; }
.layout-article .article-byline time { color: #000 !important; font-size: 12px; line-height: 18px; }
.layout-article .article-intro__divider { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #000; }
.layout-article .article-reading { min-height: 1067px; padding: 24px 0 0; }
.layout-article .article-content-wrap { display: grid; width: 1240px; min-height: 1027px; grid-template-columns: 704px 332px; justify-content: space-between; gap: 0; margin: 0 auto; }
.layout-article .article-body { grid-column: 1; padding: 0; border: 0; background: transparent; }
.layout-article .article-taxonomy, .layout-article .article-inline-offer { display: none; }
.layout-article .article-body p, .layout-article .article-body li { color: #000; font-family: Inter, Rubik, sans-serif; font-size: 19.4px; line-height: 30px; }
.layout-article .article-body h2 { color: #000; font-size: 28px; font-weight: 500; line-height: 33.6px; }
.layout-article .toc-card { grid-column: 2; grid-row: 1; position: sticky; top: 0; width: 332px; height: auto; min-height: 774px; align-self: start; padding: 0 20px; border: 0; background: #fff; }
.layout-article .toc-card h3 { margin: 0 0 32px; color: #000; font-family: Inter, Rubik, sans-serif; font-size: 24px; font-weight: 400; line-height: 33.6px; }
.layout-article .toc-list { gap: 24px; }
.layout-article .toc-list a { color: #000; font-family: Inter, Rubik, sans-serif; font-size: 16px; font-weight: 400; line-height: 22.4px; }
.layout-article .toc-list a.is-active { border-left: 2px solid #00ffee; padding-left: 8px; }
.layout-article .author-strip { box-sizing: border-box; width: 100%; height: 215px; margin: 40px 0 0; padding: 0 max(32px, calc((100% - 1253px) / 2)); display: grid; grid-template-columns: 126px minmax(0, 1053px); align-items: center; justify-content: space-between; gap: 74px; background: #00ffee; }
.layout-article .author-strip__profile { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.layout-article .author-strip__profile img, .layout-article .author-strip__avatar { width: 43px; height: 43px; border-radius: 50%; object-fit: cover; }
.layout-article .author-strip__avatar { display: block; background: #007c7b; }
.layout-article .author-strip__profile strong { color: #000; font-family: Inter, Rubik, sans-serif; font-size: 16px; font-weight: 400; line-height: 22.4px; }
.layout-article .author-strip__profile span { color: #000; font-size: 12px; line-height: 16px; }
.layout-article .author-strip--full .author-strip__bio { max-width: none; margin: 0; padding: 0; text-align: left; }
.layout-article .author-strip__bio .kicker { color: #000; font-family: 'Red Hat Display', Rubik, sans-serif; font-size: 18px; font-weight: 700; line-height: 21.6px; }
.layout-article .author-strip__bio p { margin: 18px 0 0; color: #000; font-family: Inter, Rubik, sans-serif; font-size: 15.6px; line-height: 22.4px; }
.layout-article .article-related { display: grid; width: 1238px; grid-template-columns: 148px 1060px; align-items: start; gap: 30px; margin-top: 40px; }
.layout-article .article-related > h2 { margin: 0; color: #212429; font-family: 'Red Hat Display', Rubik, sans-serif; font-size: 24px; font-weight: 700; line-height: 41.6px; white-space: nowrap; }
.layout-article .related-grid { grid-template-columns: repeat(3, 342.666px); gap: 16px; }
.layout-article .related-card { height: 304px; padding: 16px; border: 0; background: #f2f2f2; }
.layout-article .related-card__image { width: 310.666px; height: 152px; aspect-ratio: auto; background: linear-gradient(105.69965deg, #00ffee 3.0244%, #d429b7 204.3%); }
.layout-article .related-card__body { padding: 12px 0 0; }
.layout-article .related-card .card__label { margin: 0 0 12px; padding: 2px 9px; background: #00fff2; color: #000; font-size: 14px; font-weight: 400; line-height: 20px; }
.layout-article .related-card h3 { font-size: 16px; font-weight: 500; line-height: 24px; }
.layout-article .related-card .card__cta { display: none; }

@media (max-width: 1279px) {
  .layout-category .archive-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .layout-category .archive-grid__cards, .layout-category .archive-grid__offer { grid-column: 1; grid-row: auto; }
  .layout-category .archive-grid__offer { width: 259px; }
  .layout-article .article-top, .layout-article .article-content-wrap { grid-template-columns: minmax(0, 1fr); }
  .layout-category .archive-grid__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .layout-article .toc-card { grid-column: 1; grid-row: auto; }
  .layout-article .article-hero__frame, .layout-article .article-intro__frame, .layout-article .article-content-wrap, .layout-article .article-related { width: min(100% - 40px, 100%); }
  .layout-article .article-content-wrap { min-height: 0; }
  .layout-article .article-hero__frame { height: auto; grid-template-columns: minmax(0, 1fr); }
  .layout-article .article-hero__cover, .layout-article .article-hero__media, .layout-article .article-hero__media img, .layout-article .article-sidebar, .layout-article .article-sidebar .newsletter-card { width: 100%; }
  .layout-article .article-intro__frame { height: auto; min-height: 337px; }
  .layout-article .article-related { grid-template-columns: 1fr; }
  .layout-article .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .layout-article .related-card__image { width: 100%; }
  .layout-article .author-strip { height: auto; min-height: 215px; grid-template-columns: 126px minmax(0, 1fr); padding: 32px 40px; }
}

@media (max-width: 720px) {
  .site-header__inner { grid-template-columns: 88px 1fr auto; }
  .site-nav.open { top: 70px; }
  .layout-article .article-hero__frame, .layout-article .article-intro__frame, .layout-article .article-content-wrap, .layout-article .article-related { width: min(100% - 32px, 100%); }
  .layout-article .article-hero__frame { gap: 16px; }
  .layout-article .article-hero__cover, .layout-article .article-hero__media, .layout-article .article-hero__media img { height: 220px; min-height: 220px; }
  .layout-article .article-sidebar, .layout-article .article-sidebar .newsletter-card { height: 335px; }
  .layout-article .article-title { font-size: 24px; line-height: 30px; }
  .layout-article .article-lead { font-size: 16px; line-height: 24px; }
  .layout-article .toc-card { width: 100%; min-height: 0; }
  .layout-home .home-section__title, .layout-category .category-listing__heading h2 { font-size: 24px; line-height: 28px; }
  .layout-home .home-carousel { width: 100%; }
  .layout-home .home-label { font-size: 16px; }
  .layout-home .home-highlight__content, .layout-home .home-editorial__content { height: auto; }
  .layout-category .category-hero, .layout-category .category-banner { height: 180px; }
  .layout-category .category-banner__title { padding: 6px 8px; font-size: 34px; line-height: 44px; }
  .layout-category .archive-grid__cards { grid-template-columns: 1fr; }
  .layout-article .article-body p, .layout-article .article-body li { font-size: 16px; line-height: 26px; }
  .layout-article .article-body h2 { font-size: 26px; line-height: 33px; }
  .layout-article .article-intro .social-rail { position: static; width: 44px; height: 210px; margin-top: 24px; }
  .layout-article .article-byline, .layout-article .article-intro__divider { position: static; margin-top: 24px; }
  .layout-article .article-intro__frame { min-height: 0; padding-bottom: 24px; }
  .layout-article .article-reading { min-height: 0; }
  .layout-article .article-related, .layout-article .related-grid { grid-template-columns: 1fr; }
  .layout-article .author-strip { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px; }
  .site-footer { height: auto; padding: 32px 0; }
  .site-footer__frame { width: min(100% - 32px, 100%); height: auto; gap: 28px; }
  .site-footer__line { order: 2; }
  .site-footer__bottom { order: 3; }
  .site-footer__top { grid-template-columns: 1fr; gap: 28px; }
}
