/* ==========================================================================
   Karawia Pack — responsive layer (min-width breakpoints)
   640px small tablets · 768px tablets · 900px wide tablets
   1024px desktop · 1200px large desktop
   ========================================================================== */

@media (min-width: 640px) {
  .facts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact:last-child { grid-column: auto; }

  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ship-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Stacked tables become real tables again */
  .data-table--stack { display: table; }
  .data-table--stack tbody { display: table-row-group; }
  .data-table--stack thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .data-table--stack tr { display: table-row; padding: 0; border: 0; }
  .data-table--stack td {
    display: table-cell;
    padding-block: 12px;
    padding-inline: 0 12px;
    border-bottom: 1px solid var(--line-soft);
  }
  .data-table--stack tr:last-child td { border-bottom: 0; }
  .data-table--stack .unit { display: table-cell; }
  .data-table--stack .val { text-align: start; }
  .data-table--stack .method { font-size: 14px; }
  .data-table--stack .method.is-empty { display: table-cell; }
  .data-table--stack .method::before { content: none; }
  .unit-inline { display: none; }
}

@media (min-width: 768px) {
  .h1 { font-size: 44px; }
  .h2 { font-size: 34px; }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .hero__actions,
  .p-hero .btn-stack { flex-direction: row; flex-wrap: wrap; align-items: center; }

  .teaser { flex-direction: row; align-items: center; justify-content: space-between; padding: 32px 40px; }
  .teaser__main { flex-direction: row; align-items: center; gap: 24px; }

  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .app-bar__user { display: flex; }
  .meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-form { grid-template-columns: 220px minmax(0, 1fr) auto; }
  .activity li { grid-template-columns: 170px 110px minmax(0, 1fr); }

  /* Portal: order items one per line, under one row of column names */
  .item-head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 0.7fr) 44px;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
  }
  .item-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 0.7fr) 44px; align-items: center; padding: 0; border: 0; }
  .item-row .field > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .filter-bar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .filter-bar .check-line { min-height: 48px; align-items: center; }
  .filter-bar .check-line input { margin-top: 0; }
}

@media (min-width: 900px) {
  /* Order progress runs left to right */
  .timeline { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .timeline li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    text-align: center;
  }
  .timeline li::before {
    top: 15px;
    bottom: auto;
    inset-inline-start: 50%;
    width: 100%;
    height: 3px;
  }
  .tl-text { align-items: center; padding-top: 0; }
}

@media (min-width: 1024px) {
  html { scroll-padding-top: 100px; }

  .h1 { font-size: 52px; line-height: 1.05; letter-spacing: -0.025em; }
  .h2 { font-size: 40px; line-height: 1.12; }
  .lead { font-size: 17px; }
  .eyebrow { font-size: 13px; }

  .section { padding-block: 96px; }
  .section--tight { padding-block: 64px; }
  .section-head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 64px;
    margin-bottom: 48px;
  }
  .section-head--split > :first-child { max-width: 640px; }
  .section-head--split > :last-child { max-width: 420px; }

  /* Header and menu panels. The header is the anchor for the full-width panels. */
  .site-header__inner { position: static; min-height: 84px; }
  .brand { gap: 12px; }
  .brand__logo { height: 46px; }
  .footer-brand .brand__logo { height: 72px; }
  .app-bar__title .brand__logo { height: 30px; }
  .site-nav,
  .site-header.is-open .site-nav {
    display: block;
    position: static;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .site-nav__list { flex-direction: row; align-items: center; gap: 2px; }
  /* White links on the navy header */
  .site-nav__link {
    width: auto;
    min-height: 44px;
    padding: 0 10px;
    border-bottom: 0;
    border-radius: var(--radius-s);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--white);
  }
  .site-nav__link:hover,
  .nav-item.is-open > .nav-trigger { background: rgba(255, 255, 255, 0.14); color: var(--white); }
  .site-nav__link[aria-current="page"],
  .site-nav__link.is-current { font-weight: 600; color: var(--amber); }
  .nav-trigger { gap: 4px; }
  .nav-trigger__icon { width: 16px; height: 16px; }
  .nav-panel { padding: 0; border: 0; }
  .nav-panel .container { padding-inline: var(--gutter); }
  .nav-panel--mega {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--white);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(var(--navy-rgb), 0.12);
  }
  .mega { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-block: 24px 20px; }
  .mega__head { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--navy); }
  .mega__head .icon { width: 22px; height: 22px; color: var(--teal); }
  .mega__head:hover { color: var(--teal); }
  .mega__toggle { display: none; }
  .mega__note { display: block; margin: 4px 0 10px; font-size: 13px; color: var(--slate); }
  .mega__list { display: grid; gap: 2px; padding: 0; }
  .mega__list a { margin-inline: -10px; padding: 4px 10px; border-radius: var(--radius-s); }
  .mega__list a:hover { background: var(--mist); color: var(--navy); }
  .mega__list span { font-size: 15px; font-weight: 500; }
  .mega__cta { display: none; align-self: start; gap: 10px; padding: 20px; border-radius: var(--radius); background: var(--teal-tint); }
  .mega__cta-title { display: block; font-size: 17px; font-weight: 700; color: var(--navy); }
  .mega__cta-text { display: block; font-size: 14px; color: var(--slate); }
  .mega__cta .btn { display: inline-flex; }
  .mega__cta .link-arrow { min-height: 32px; }
  .nav-item--company { position: relative; }
  .nav-panel--drop {
    position: absolute;
    top: calc(100% + 20px);
    inset-inline-start: 0;
    min-width: 320px;
    padding: 8px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(var(--navy-rgb), 0.12);
  }
  .drop-list { padding: 0; }
  .drop-list a { padding: 10px 12px; border-radius: var(--radius-s); }
  .drop-list a:hover { background: var(--mist); }
  .drop-list strong { font-size: 15px; font-weight: 600; color: var(--navy); }
  /* Without JavaScript the panels open on hover and keyboard focus */
  html:not(.js) .nav-item:hover > .nav-panel,
  html:not(.js) .nav-item:focus-within > .nav-panel { display: block; }
  .site-nav__extra { display: none; }
  .header-cta { display: inline-flex; min-height: 48px; padding: 0 22px; font-size: 15px; }
  .menu-toggle { display: none; }

  /* Home */
  .hero { padding-block: 60px; }
  .hero__grid { grid-template-columns: minmax(0, 576px) minmax(0, 1fr); gap: 64px; align-items: center; }
  .hero__copy { gap: 28px; }
  .hero .lead { font-size: 18px; }
  .checklist { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
  .hero__media { min-height: 560px; }

  .facts { padding-block: 56px; }
  .facts__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .fact dd { font-size: 40px; }
  .fact dt { font-size: 14px; }

  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .card__media { height: 180px; }
  .card__body { gap: 16px; padding: 28px; }
  .spec-list li { padding-block: 11px; font-size: 15px; }

  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .tile { padding: 20px; gap: 14px; }
  .tile span { font-size: 15px; }

  .split { grid-template-columns: 470px minmax(0, 1fr); gap: 72px; align-items: center; }
  .split--top { align-items: start; }
  .split__copy { gap: 24px; }
  .sheet { padding: 28px 32px; }
  .export .split { grid-template-columns: 500px minmax(0, 1fr); }

  .rfq { padding-block: 72px; }
  .rfq__grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 64px; align-items: center; }

  .site-footer { padding-block: 72px 36px; }
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }
  .footer-brand { grid-column: auto; }

  /* Product page */
  .breadcrumb { padding-block: 16px; font-size: 14px; }
  .p-hero { padding-block: 72px; }
  .p-hero__grid { grid-template-columns: 600px minmax(0, 1fr); gap: 64px; align-items: center; }
  .p-hero__copy { gap: 20px; }
  .p-hero__media { min-height: 456px; }
  .benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .benefit { padding: 24px; }
  .spec-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
  .ship-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .ship-tile { padding: 20px; }
  .ship-tile dd { font-size: 24px; }
  .related { gap: 24px; }
  .sticky-cta { display: none; }
  body.has-sticky-cta { padding-bottom: 0; }
  body.has-quote { padding-bottom: 88px; }

  /* Quote page */
  .page-intro { padding-block: 48px; }
  .quote-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; padding-block: 64px 96px; }
  .aside { position: sticky; top: 108px; }
  .fieldset__legend { font-size: 22px; }

  /* App screens */
  .app-body { flex-direction: row; }
  .app-nav {
    flex-direction: column;
    flex-shrink: 0;
    width: 240px;
    overflow: visible;
    padding: 24px 16px;
    border-bottom: 0;
    border-inline-end: 1px solid var(--line);
  }
  .app-nav--narrow { width: 220px; }
  .app-nav__help {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--mist);
    font-size: 13px;
    color: var(--slate);
  }
  .app-nav__help strong { font-size: 15px; font-weight: 600; color: var(--navy); }
  .app-main { gap: 20px; padding: 28px 40px 56px; }
  .panel { padding: 24px 28px; }
  .order-head { flex-direction: row; align-items: center; justify-content: space-between; }
  .order-head h1 { font-size: 30px; }
  .app-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; }
  .app-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth { padding-top: 32px; }
}

@media (min-width: 1200px) {
  .hero .h1 { font-size: 58px; }
  .quote-layout { grid-template-columns: 760px minmax(0, 1fr); gap: 80px; }
  .meta { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .meta.meta--ship { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Content pages ---------- */

@media (min-width: 640px) {
  .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-grid--big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

@media (min-width: 768px) {
  .ind-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history li { grid-template-columns: 96px minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  .page-intro .lead { font-size: 18px; }
  .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .p-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-tile { padding: 24px; }
  .benefits--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .benefits--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .ind { padding: 24px; }
  .process { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .process .process__step { flex-direction: column; padding: 20px; }
  .process--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .ds-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .values { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .facility-img { min-height: 260px; }
  .prose h2 { font-size: 22px; }
}

@media (min-width: 1024px) {
  .page-intro__grid { grid-template-columns: minmax(0, 1fr) 480px; gap: 64px; align-items: center; }
  .page-intro__media { min-height: 320px; }
}

@media (min-width: 1024px) {
  .gm-note { padding-inline-start: 32px; }
  .gm-note blockquote p { font-size: 19px; }
}

/* ---------- Products catalog ---------- */

@media (min-width: 640px) {
  .catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view-toggle span { display: inline; }
  .quote-bar__suffix { display: inline; }
  .quote-bar__names { display: block; }
}

@media (min-width: 768px) {
  .catalog-table { display: table; }
  .catalog-table thead { display: table-header-group; }
  .catalog-table tbody { display: table-row-group; }
  .catalog-table tr { display: table-row; padding: 0; border: 0; }
  .catalog-table th,
  .catalog-table td,
  .catalog-table td.catalog-table__name,
  .catalog-table td.catalog-table__add { display: table-cell; padding: 12px 14px; }
  .catalog-table th { border-bottom: 1px solid var(--line); background: var(--mist); }
  .catalog-table td { border-bottom: 1px solid var(--line-soft); font-size: 15px; vertical-align: middle; }
  .catalog-table tr:last-child td { border-bottom: 0; }
  .catalog-table__spec { display: none; }
}

@media (min-width: 1024px) {
  .catalog { padding-block: 40px 72px; }
  .catalog__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
  .catalog__filters {
    position: sticky;
    top: 104px;
    z-index: auto;
    display: block;
    max-height: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .catalog__filters-head { padding: 12px 16px; }
  .catalog__filters-body { overflow: visible; }
  .catalog__close,
  .catalog__filters-foot,
  .catalog__filter-btn,
  .catalog-scrim { display: none; }
  .catalog__toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; }
  .catalog__row { gap: 16px; }
  .catalog__active { grid-column: 1 / -1; }
  .catalog__grid { gap: 20px; }
}

@media (min-width: 1200px) {
  .catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Contact page ---------- */

@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}

/* ---------- Header: menu, language and login grouped on the right (large screens) ---------- */

@media (min-width: 1024px) {
  /* The logo stays left; the menu, the globe, the login icon and the quote button sit together
     on the right, with no gap between the menu and the icons */
  .site-header__inner { justify-content: flex-start; gap: 4px; }
  .site-header__inner > .brand { margin-inline-end: auto; }
  /* "Customer portal" with its lock icon, set like a menu item; a thin line divides it and the
     globe from the main menu */
  .header-login { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: var(--radius-s); font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--white); }
  .header-login .icon { width: 20px; height: 20px; }
  .header-divider { display: block; width: 1px; height: 24px; margin-inline: 6px; background: rgba(255, 255, 255, 0.25); }
  .header-login:hover { background: rgba(255, 255, 255, 0.14); color: var(--white); }
  .header-actions { gap: 8px; }
}

/* ---------- Home page ---------- */

@media (min-width: 768px) {
  .hero--full { min-height: 720px; }
  .hero--full .h1 { font-size: 52px; }
  .page-home .h2 { font-size: 44px; }
  .home-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
  .home-head .link-arrow { flex-shrink: 0; }
  .fam-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fam-card__media { height: 200px; }
  .home-cta__title { font-size: 56px; }
}

@media (min-width: 1024px) {
  /* Text centred on the left; the photo shown from its left edge keeps the tower right of the headline */
  .hero--full { align-items: center; min-height: min(100vh, 880px); margin-top: -85px; padding: 150px 0 96px; }
  .hero--full .hero__bg .media img { object-position: 0 40%; }
  .hero--full .hero__grid { grid-template-columns: minmax(0, 780px); }
  .hero--full .h1 { font-size: 64px; }
  .hero--full .lead { max-width: 36em; font-size: 24px; }
  /* Deepest on the left behind the text, lighter to the right so the building still shows,
     plus a little along the top for the menu */
  .hero--full .hero__bg::after { background: linear-gradient(180deg, rgba(var(--navy-rgb), 0.45) 0, rgba(var(--navy-rgb), 0.35) 85px, rgba(var(--navy-rgb), 0) 220px), linear-gradient(90deg, rgba(var(--navy-rgb), 0.8) 0%, rgba(var(--navy-rgb), 0.72) 42%, rgba(var(--navy-rgb), 0.42) 72%, rgba(var(--navy-rgb), 0.32) 100%); }
  .page-home .h2 { font-size: 56px; line-height: 1.04; }
  .page-home .eyebrow { font-size: 16px; }
  .home-head { margin-bottom: 48px; }
  .fam-cards { gap: 24px; }
  .fam-card__media { height: 280px; }
  .fam-card__body { padding: 24px 28px 28px; }
  .home-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
  .home-split__media { min-height: 480px; }
  .home-split--flip .home-split__copy { order: 2; }
  .home-cta { padding-block: 120px; }
  .home-cta__title { font-size: 80px; }
  .home-cta__text { font-size: 19px; }
}

@media (min-width: 1200px) {
  .hero--full .h1 { font-size: 80px; }
}

/* Small laptops and landscape tablets: the header row is tight, so the menu links sit closer up to
   1279px, and "Customer portal" waits for 1200px (it is in the phone menu and on the home page) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .site-nav__link { padding: 0 8px; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .header-login { display: none; }
}

/* ---------- Export map ---------- */

@media (min-width: 1024px) {
  .map-split { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: center; }
}

/* Product structure diagram: text and diagram side by side on large screens */
@media (min-width: 1024px) {
  .structure { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
}

/* Products and Industries menus: the "See all" line at the top, and the word (goes to the page)
   with an arrow beside it (opens the menu) */
@media (min-width: 1024px) {
  /* The menu line (help, quote, see all) closes the panel at the bottom, so the products come first */
  .mega__top { grid-column: 1 / -1; grid-row: 4; display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin-top: 8px; padding: 16px 0 0; border-top: 1px solid var(--line); }
  .mega__top-title { display: none; }
  .mega__top-link { min-height: 44px; padding: 0 18px; border: 1.5px solid var(--teal); border-radius: var(--radius-s); font-size: 15px; }
  .mega__top-link:hover { background: var(--teal); color: var(--white); }
  .mega__help { display: flex; align-items: center; gap: 16px; margin: 0 auto 0 0; font-size: 15px; color: var(--slate); }
  .mega__help a { font-weight: 600; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
  .mega__help a:first-child { padding: 8px 16px; border-radius: var(--radius-s); background: var(--amber); color: var(--navy); text-decoration: none; }
  .mega__help a:first-child:hover { background: var(--amber-dark); }
  .nav-item--split { flex-wrap: nowrap; border-radius: var(--radius-s); }
  .nav-item--split > .site-nav__link { flex: none; padding: 0 2px 0 10px; }
  .nav-item--split > .site-nav__link:hover { background: none; }
  .nav-trigger--arrow { place-items: center; width: 30px; min-height: 44px; padding: 0; border: 0; border-radius: var(--radius-s); color: var(--white); }
  .nav-item--split:hover,
  .nav-item--split.is-open { background: rgba(255, 255, 255, 0.14); }
  .nav-item--split.is-open > .nav-trigger { background: none; }
}

@media (min-width: 1024px) {
  /* Products menu: family title, then its line in plain text above a rule, then the subsections */
  .mega__head { font-size: 18px; }
  /* The family title is the link to its page (the "All …" link stays on phones only) */
  .mega__head .mega__head-arrow { width: 18px; height: 18px; opacity: 0; transform: translateX(-4px); transition: opacity 0.15s, transform 0.15s; }
  a.mega__head:hover .mega__head-arrow,
  a.mega__head:focus-visible .mega__head-arrow,
  .mega__group a:hover .mega__head-arrow,
  .mega__group a:focus-visible .mega__head-arrow { opacity: 1; transform: none; }
  .mega__group .mega__head-arrow { display: inline-block; width: 14px; height: 14px; margin-inline-start: 6px; vertical-align: -2px; opacity: 0; transition: opacity 0.15s; }
  .mega__all { display: none; }
  .mega__note { margin: 4px 0 4px; padding-bottom: 12px; border-bottom: 2px solid var(--teal-tint); font-size: 14px; }
  .mega__group { margin: 14px 0 3px; padding: 1px 0 1px 10px; font-size: 14px; }
  .mega__group:first-child { margin-top: 12px; }
  .mega__list { gap: 0; align-content: start; }
  .mega__list li:not([class]) a { margin-inline: -10px; padding: 3px 10px 3px 23px; }
  .mega__list li:not([class]) span { font-size: 15px; font-weight: 400; color: var(--text); }
  .mega__all { margin-top: 14px; }
  /* Title, line and list rows line up across the families, however the titles wrap */
  .mega__col { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}