/* Meridian on www.mid-trans.com - stage 1 (the owner, 2026-09-17: start applying the design to the website). Same rule as the app: colour, type, size only. No element moves, nothing is added or removed, and nothing applies unless is set. Every selector starts :root[data-skin="meridian"] (+0,2,0), so it meets the site's own rules at a higher weight without !important, and deleting this one restores the current look. */ @font-face { font-family: "Meridian Cairo"; src: url("cairo-sub-75e917af5115.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: optional; } /* 1. Tokens: the site's own variables take Meridian's values. */ :root[data-skin="meridian"] { --color-navy: #0a2440; --color-blue: #0074b7; --color-blue-dark: #0069a8; --surface-wash: #f2f5f8; --surface-night: #0a2440; --ink-marine: #0a2440; --ink-slate: #52657a; --ink-steel: #1f3448; --ink-deep: #0a2440; --color-teal: #007dc5; --color-ink: #0a2440; --color-muted: #52657a; --color-line: #dde4ea; --color-soft: #f2f5f8; --color-faint: #eef6fb; --shadow-soft: none; --radius: 8px; --font-latin: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif; --font-arabic: "Meridian Cairo", Cairo, Arial, sans-serif; } /* 2. Light sections are flat grounds, not white-to-wash gradients. */ :root[data-skin="meridian"] .section--app-downloads, :root[data-skin="meridian"] .section--about-brief--arabic, :root[data-skin="meridian"] .section--about-brief--english, :root[data-skin="meridian"] .trade-lane-hub, :root[data-skin="meridian"] .blog-hub, :root[data-skin="meridian"] .public-site .section--soft { background: #f2f5f8; } /* The icon tile and the tool shell both carry text - the link-card arrow sits inside the tile, the tool shell holds running copy - and brand blue measured 4.40:1 and 4.41:1 on #e6f2f9 at 16px, against a 4.5 threshold. One step lighter reads 4.59. */ :root[data-skin="meridian"] .public-site .ui-icon, :root[data-skin="meridian"] .tool-embed-shell { background: #eef6fb; } /* 3. Cards sit on a border, not a floating shadow. Menus and panels that open over the page keep one quiet shadow so they still read as on top. */ :root[data-skin="meridian"] .action-card, :root[data-skin="meridian"] .about-brief--english, :root[data-skin="meridian"] .about-brief--arabic, :root[data-skin="meridian"] .tool-embed-shell, :root[data-skin="meridian"] .faq-item[open], :root[data-skin="meridian"] .public-site .hs-lookup-shell, :root[data-skin="meridian"] .public-site .action-card, :root[data-skin="meridian"] .public-site .hero-operations-card { box-shadow: none; } :root[data-skin="meridian"] .trade-lane-card[data-network-external-routes]:hover, :root[data-skin="meridian"] .trade-lane-card[data-network-external-routes]:focus-visible, :root[data-skin="meridian"] .public-site .action-card:hover, :root[data-skin="meridian"] .public-site .action-card:focus-visible, :root[data-skin="meridian"] .public-site .hero-operations-card:hover, :root[data-skin="meridian"] .public-site .hero-operations-signal:hover, :root[data-skin="meridian"] .public-site .hero-operations-board__modes a:hover, :root[data-skin="meridian"] .public-site .hero-operations-board__modes a:focus-visible { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .mega-panel, :root[data-skin="meridian"] .public-site .mega-panel, :root[data-skin="meridian"] .public-site .language-switcher-dropdown__menu, :root[data-skin="meridian"] .shipping-copilot__panel { box-shadow: 0 12px 32px rgba(10, 36, 64, 0.14); } /* 4. Labels in sentence case with no tracking. The logo lettering stays as it is. */ :root[data-skin="meridian"] .mega-panel__eyebrow, :root[data-skin="meridian"] .mega-panel__title, :root[data-skin="meridian"] .mobile-menu__languages > span, :root[data-skin="meridian"] .eyebrow, :root[data-skin="meridian"] .kicker, :root[data-skin="meridian"] .action-card span, :root[data-skin="meridian"] .route-card > span, :root[data-skin="meridian"] .route-card__services strong, :root[data-skin="meridian"] .public-site .hero .eyebrow, :root[data-skin="meridian"] .public-site .hero-operations-board__eyebrow, :root[data-skin="meridian"] .public-site .action-card span, :root[data-skin="meridian"] .public-site .solution-card--service span, :root[data-skin="meridian"] .public-site .smart-network-panel__kicker, :root[data-skin="meridian"] .public-site .smart-network-card span, :root[data-skin="meridian"] .public-site .hs-table-form__field span { text-transform: none; letter-spacing: 0; } /* 5. Arabic: Cairo, never letter-spaced. */ :root[data-skin="meridian"][lang="ar"] body, :root[data-skin="meridian"][lang="ar"] body * { letter-spacing: 0; } :root[data-skin="meridian"][dir="rtl"] body, :root[data-skin="meridian"][dir="rtl"] .template-home.public-site .hero h1 { font-family: var(--font-arabic); } /* 6. The owner, 2026-09-17: a little more room between the lines of the hero heading (1.04 -> 1.12). Arabic already sits at 1.18 and keeps it. */ :root[data-skin="meridian"][dir="ltr"] .public-site .hero h1 { line-height: 1.12; } /* 7. Corners on Meridian's scale (stage 2): 8px for controls, inner cards and icon tiles; 12px for panels, forms and hero frames; pills stay pills, except buttons, which are 8px everywhere. Generated from the site's own radius rules (gen-radius.py), each selector kept exactly as the site writes it. */ :root[data-skin="meridian"] .public-site .hs-lookup-shell { border-radius: 12px !important; } :root[data-skin="meridian"] .public-site .hs-results-table tr { border-radius: 8px !important; } :root[data-skin="meridian"] .tool-embed-shell { border-radius: 12px; } :root[data-skin="meridian"] .tool-embed-frame { border-radius: 12px; } :root[data-skin="meridian"] .hs-source-notice { border-radius: 8px; } :root[data-skin="meridian"] .public-site .hs-table-form { border-radius: 12px !important; } :root[data-skin="meridian"] .public-site .hs-table-form__field input, :root[data-skin="meridian"] .public-site .hs-table-form__field select { border-radius: 8px; } :root[data-skin="meridian"] .public-site .hs-table-status { border-radius: 8px !important; } :root[data-skin="meridian"] .public-site .hs-table-wrap { border-radius: 12px !important; } :root[data-skin="meridian"] .public-site .language-switcher__button { border-radius: 8px; } :root[data-skin="meridian"] .public-site .language-switcher-dropdown__menu { border-radius: 12px; } :root[data-skin="meridian"] .public-site .button { border-radius: 8px; } :root[data-skin="meridian"] .public-site .hero__grid { border-radius: 12px; } :root[data-skin="meridian"] .public-site .hero-stat-card { border-radius: 8px; } :root[data-skin="meridian"] .public-site .hero-visual, :root[data-skin="meridian"] .public-site .hero-visual--photo { border-radius: 12px; } :root[data-skin="meridian"] .public-site .hero-operations-board::before { border-radius: 12px; } :root[data-skin="meridian"] .public-site .hero-operations-card, :root[data-skin="meridian"] .public-site .hero-operations-card:visited { border-radius: 12px; } :root[data-skin="meridian"] .public-site .hero-operations-card__icon, :root[data-skin="meridian"] .public-site .hero-operations-signal__icon { border-radius: 12px; } :root[data-skin="meridian"][dir="rtl"] .public-site .hero-operations-board--arabic-about .hero-operations-board__modes a { border-radius: 8px; } :root[data-skin="meridian"][dir="rtl"] .public-site .hero-operations-board--arabic-about .hero-operations-card { border-radius: 8px; } :root[data-skin="meridian"][dir="rtl"] .public-site .hero-operations-board--arabic-about .hero-operations-signal { border-radius: 8px; } :root[data-skin="meridian"] .public-site .hero-operations-signal, :root[data-skin="meridian"] .public-site .hero-operations-signal:visited { border-radius: 12px; } :root[data-skin="meridian"] .public-site .action-card { border-radius: 12px; } :root[data-skin="meridian"] .public-site .ui-icon { border-radius: 8px; } :root[data-skin="meridian"] .public-site .solution-card--service { border-radius: 12px; } :root[data-skin="meridian"] .public-site input, :root[data-skin="meridian"] .public-site select, :root[data-skin="meridian"] .public-site textarea { border-radius: 8px; } :root[data-skin="meridian"] .public-site .route-card, :root[data-skin="meridian"] .public-site .news-card, :root[data-skin="meridian"] .public-site .topic-card, :root[data-skin="meridian"] .public-site .blog-mini-card, :root[data-skin="meridian"] .public-site .content-band, :root[data-skin="meridian"] .public-site .feature-card, :root[data-skin="meridian"] .public-site .link-card, :root[data-skin="meridian"] .public-site .conversion-block, :root[data-skin="meridian"] .public-site .form-panel { border-radius: 12px; } :root[data-skin="meridian"] .public-site .blog-featured { border-radius: 12px; } :root[data-skin="meridian"] .public-site .content-band .check-list li { border-radius: 8px; } :root[data-skin="meridian"] .public-site .content-band--why-midtrans p:not(.kicker) { border-radius: 8px; } :root[data-skin="meridian"] .public-site .content-band--why-midtrans .check-list li { border-radius: 8px; } :root[data-skin="meridian"] .public-site .structured-group { border-radius: 12px; } :root[data-skin="meridian"] .public-site .structured-accordion details { border-radius: 8px; } :root[data-skin="meridian"] .public-site .structured-card-grid article { border-radius: 8px; } :root[data-skin="meridian"] .public-site .related-links-panel { border-radius: 12px; } :root[data-skin="meridian"] .public-site .conversion-steps article { border-radius: 8px; } :root[data-skin="meridian"] .public-site .form-panel--quote { border-radius: 12px; } :root[data-skin="meridian"] .public-site .form-panel--quote .form-panel__intro { border-radius: 12px; } :root[data-skin="meridian"] .public-site .form-panel--contact .form-panel__intro { border-radius: 12px; } :root[data-skin="meridian"] .public-site .sample-form--contact { border-radius: 12px; } :root[data-skin="meridian"] .public-site .quote-channel-button { border-radius: 8px; } :root[data-skin="meridian"] .public-site .quote-stepper li { border-radius: 8px; } :root[data-skin="meridian"] .public-site .sample-form--quote { border-radius: 12px; } :root[data-skin="meridian"] .public-site .quote-channel-strip { border-radius: 8px; } :root[data-skin="meridian"] .public-site .sample-form--quote input, :root[data-skin="meridian"] .public-site .sample-form--quote select, :root[data-skin="meridian"] .public-site .sample-form--quote textarea { border-radius: 8px; } :root[data-skin="meridian"] .public-site .banner { border-radius: 12px; } :root[data-skin="meridian"] .public-site .section--services-hub .solution-card--service-detail .solution-card__cta { border-radius: 8px; } :root[data-skin="meridian"] .public-site .faq-intro { border-radius: 12px; } :root[data-skin="meridian"] .public-site .faq-list--designed .faq-grid { border-radius: 12px; } :root[data-skin="meridian"] .public-site .faq-list--designed .faq-item { border-radius: 8px; } :root[data-skin="meridian"] .public-site .hero-operations-card { border-radius: 12px; } :root[data-skin="meridian"] .public-site .action-card, :root[data-skin="meridian"] .public-site .action-card:first-child, :root[data-skin="meridian"] .public-site .action-card:last-child { border-radius: 12px; } :root[data-skin="meridian"] .public-site .hero .eyebrow { border-radius: 8px; } :root[data-skin="meridian"] .public-site .content-band, :root[data-skin="meridian"] .public-site .banner, :root[data-skin="meridian"] .public-site .smart-network-finder { border-radius: 12px; } :root[data-skin="meridian"] .template-home.public-site .hero-visual, :root[data-skin="meridian"] .template-home.public-site .hero-visual--photo { border-radius: 12px; } :root[data-skin="meridian"] .template-home.public-site .hero-stat-card { border-radius: 8px; } :root[data-skin="meridian"] .public-site .hero--home-pattern .hero-visual, :root[data-skin="meridian"] .public-site .hero--home-pattern .hero-visual--photo { border-radius: 12px; } :root[data-skin="meridian"] .public-site .hero--home-pattern .hero-operations-card__icon { border-radius: 8px; } :root[data-skin="meridian"] .public-site .footer-reference-store-badge { border-radius: 8px; } :root[data-skin="meridian"] .public-site .footer-reference-fiata { border-radius: 8px; } :root[data-skin="meridian"] .public-site .link-card { border-radius: 8px !important; } :root[data-skin="meridian"] .public-site .content-band .check-list li, :root[data-skin="meridian"] .public-site .check-list li { border-radius: 8px !important; } :root[data-skin="meridian"] .public-site .related-links-panel, :root[data-skin="meridian"] .public-site .page-cta, :root[data-skin="meridian"] .public-site .conversion-block, :root[data-skin="meridian"] .public-site .section--soft .form-panel { border-radius: 12px !important; } :root[data-skin="meridian"] .public-site .section--soft .sample-form--quote { border-radius: 8px !important; } :root[data-skin="meridian"] .section--conversion .conversion-block { border-radius: 12px; } :root[data-skin="meridian"] .template-home .hero--home .button { border-radius: 8px; } :root[data-skin="meridian"] .template-home .section--conversion .conversion-block { border-radius: 12px; } :root[data-skin="meridian"] .floating-actions a { border-radius: 8px; } :root[data-skin="meridian"] .sample-form__actions .button { border-radius: 12px; } :root[data-skin="meridian"] .public-site .service-selector .button { border-radius: 8px !important; } :root[data-skin="meridian"] .public-site .hs-lookup-heading { border-radius: 12px !important; } :root[data-skin="meridian"] .public-site .hs-table-form__field input, :root[data-skin="meridian"] .public-site .hs-table-form__field select { border-radius: 8px !important; } :root[data-skin="meridian"] .public-site .hs-table-form__actions .button { border-radius: 8px !important; } :root[data-skin="meridian"] .public-site[data-page-template="syria-logistics-services"] .section--soft:has(.link-grid > article.link-card[id]) .section-heading { border-radius: 12px !important; } :root[data-skin="meridian"] .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] { border-radius: 12px !important; } :root[data-skin="meridian"] .public-site[data-page-template="syria-logistics-services"] main>.section:not(.section--soft):has(.service-selector) .service-selector { border-radius: 12px !important; } :root[data-skin="meridian"] .public-site[data-page-template="syria-logistics-services"] main>.section:not(.section--soft):has(.service-selector) .service-selector .button { border-radius: 8px !important; } :root[data-skin="meridian"] .public-site[data-page-template="syria-logistics-services"] .trust-panel { border-radius: 12px !important; } :root[data-skin="meridian"] body:has(#rate-table-title) .hs-results-table tr { border-radius: 8px; } :root[data-skin="meridian"] body:has(#rate-table-title) .rates-filter__button { border-radius: 8px; } :root[data-skin="meridian"] .section--hs-lookup:has(.hs-table-form) .hs-results-table tr { border-radius: 8px; } :root[data-skin="meridian"] .public-site .structured-group--cards:has(> .structured-card-grid > article:only-child):not(:has(> :nth-child(3))) > .structured-card-grid > article { border-radius: 8px; } :root[data-skin="meridian"] .public-site .structured-group--cards:has(> .structured-card-grid > article:only-child):not(:has(> :nth-child(3))) > .structured-card-grid > article > a:last-child { border-radius: 8px; } :root[data-skin="meridian"] .floating-locations { border-radius: 8px; } :root[data-skin="meridian"] .floating-locations__list a { border-radius: 8px; } :root[data-skin="meridian"] .floating-locations__pin { border-radius: 8px; } /* 8. Hero bands (stage 2): one flat navy ground instead of glows, light rays and dotted stars. The homepage keeps its port photograph; only the tint over it takes Meridian's navy, and the drawn rays over the photo go. */ :root[data-skin="meridian"] .public-site .hero, :root[data-skin="meridian"] .template-home.public-site .hero { background: #0a2440; } :root[data-skin="meridian"] .template-home.public-site.home-background-blue-hour .hero { background: #0a2440; } :root[data-skin="meridian"] .template-home.public-site .hero::before, :root[data-skin="meridian"] .template-home.public-site .hero::after, :root[data-skin="meridian"] .template-home.public-site.home-background-blue-hour .hero::before, :root[data-skin="meridian"] .template-home.public-site.home-background-blue-hour .hero::after { background: none; } /* 9. The operations board: no drawn grid, flat tiles on a hairline. */ :root[data-skin="meridian"] .public-site .hero-operations-board::before { background: none; border-color: rgba(255, 255, 255, 0.12); } :root[data-skin="meridian"] .public-site .hero-operations-card, :root[data-skin="meridian"] .public-site .hero-operations-card:visited { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); } :root[data-skin="meridian"] .public-site .hero-operations-card:hover { background: rgba(255, 255, 255, 0.11); } :root[data-skin="meridian"] .public-site .hero-operations-signal, :root[data-skin="meridian"] .public-site .hero-operations-signal:visited { background: rgba(255, 255, 255, 0.05); box-shadow: none; } :root[data-skin="meridian"] .public-site .hero-operations-card:hover .hero-operations-card__icon, :root[data-skin="meridian"] .public-site .hero-operations-signal:hover .hero-operations-signal__icon { box-shadow: none; transform: none; } /* 10. Buttons: Meridian's weight (600), no lift and no drop shadow. */ :root[data-skin="meridian"] .public-site .button { font-weight: 600; } :root[data-skin="meridian"] .sample-form__actions .button { box-shadow: none; } /* 11. The board's frame: a flat navy panel on a hairline, no glow, no drop shadow. */ :root[data-skin="meridian"] .public-site .hero-visual, :root[data-skin="meridian"] .public-site .hero-visual--photo { background: #0e2a48; border-color: rgba(255, 255, 255, 0.14); box-shadow: none; } :root[data-skin="meridian"] .public-site .hero-operations-board--home { background: rgba(10, 36, 64, 0.82); } /* 12. Board cards that carry a lot of text (owner, 2026-09-17: «اعادة تصميم المحتويات الكثيرة كي تظهر بشكل مقبول»). In a two-column board the text column was ~160px wide, so titles ran to three lines and paragraphs were cut mid-line. Now the icon shrinks to a 32px tile beside the title, the paragraph takes the card's full width under both, the title stops at two lines and the paragraph at three - always ending on a whole line. */ :root[data-skin="meridian"] .public-site .hero-operations-board .hero-operations-card { align-items: center; column-gap: 8px; grid-template-columns: 32px minmax(0, 1fr); height: auto; min-height: 0; overflow: hidden; padding: 12px; row-gap: 8px; } :root[data-skin="meridian"] .public-site .hero-operations-board .hero-operations-card__icon { border-radius: 8px; height: 32px; width: 32px; } :root[data-skin="meridian"] .public-site .hero-operations-board .hero-operations-card__icon img { height: 20px; width: 20px; } :root[data-skin="meridian"] .public-site .hero-operations-board .hero-operations-card__body { display: contents; } :root[data-skin="meridian"] .public-site .hero-operations-board .hero-operations-card__body strong { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; font-size: 0.9375rem; line-height: 1.25; overflow: hidden; } :root[data-skin="meridian"] .public-site .hero-operations-board .hero-operations-card__body p { -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: start; display: -webkit-box; font-size: 0.8125rem; grid-column: 1 / -1; line-height: 1.45; overflow: hidden; } :root[data-skin="meridian"] .public-site .hero-operations-board .hero-operations-board__cards { align-content: start; grid-auto-rows: auto; overflow: visible; } /* The frame no longer holds the board at a fixed 504px: the board sits in the flow, so four cards with longer text make the frame taller instead of being cut off at the bottom. The frame keeps 504px as its least height. */ :root[data-skin="meridian"] .public-site .hero--home-pattern .hero-visual, :root[data-skin="meridian"] .public-site .hero--home-pattern .hero-visual--photo { height: auto; } :root[data-skin="meridian"] .public-site .hero--home-pattern .hero-visual .hero-operations-board { block-size: auto; height: auto; inset: auto; min-height: 504px; position: relative; } /* 13. The owner, 2026-09-17: a little more room between the lines of the Arabic hero heading too (1.18 -> 1.38, in two steps at his request). */ :root[data-skin="meridian"][dir="rtl"] .public-site .hero h1, :root[data-skin="meridian"][dir="rtl"] .template-home.public-site .hero h1 { line-height: 1.38; } /* 14. Stage 3 - light surfaces. Every panel, card, form and table on a light ground loses its drop shadow and reads on its own hairline; the ones that answer the pointer keep Meridian's one small shadow. Generated from the site's own box-shadow rules (gen-stage3.py); dark panels, the hero, the chat dock, the floating actions and the footer are untouched. */ :root[data-skin="meridian"] .site-header { box-shadow: none; } :root[data-skin="meridian"] .header-actions .button { box-shadow: none; } :root[data-skin="meridian"] .header-actions .button:active { box-shadow: none; } :root[data-skin="meridian"] .mobile-menu nav { box-shadow: none; } :root[data-skin="meridian"] .action-card { box-shadow: none; } :root[data-skin="meridian"] .about-brief--english { box-shadow: none; } :root[data-skin="meridian"] .about-brief--arabic { box-shadow: none; } :root[data-skin="meridian"] .app-download-card { box-shadow: none; } :root[data-skin="meridian"] .public-site .hs-results-table tr { box-shadow: none; } :root[data-skin="meridian"] .tool-embed-shell { box-shadow: none; } :root[data-skin="meridian"] .feature-card, :root[data-skin="meridian"] .link-card { box-shadow: none; } :root[data-skin="meridian"] .anchor-strip a { box-shadow: none; } :root[data-skin="meridian"] .route-card, :root[data-skin="meridian"] .news-card, :root[data-skin="meridian"] .topic-card, :root[data-skin="meridian"] .blog-mini-card { box-shadow: none; } :root[data-skin="meridian"] .faq-item { box-shadow: none; } :root[data-skin="meridian"] .faq-item[open] { box-shadow: none; } :root[data-skin="meridian"] .public-site .hs-lookup-shell { box-shadow: none; } :root[data-skin="meridian"] .public-site .site-header { box-shadow: none; } :root[data-skin="meridian"] .public-site .action-card { box-shadow: none; } :root[data-skin="meridian"] .public-site .solution-card--service { box-shadow: none; } :root[data-skin="meridian"] .public-site .blog-mini-card { box-shadow: none; } :root[data-skin="meridian"] .public-site .content-band .check-list li { box-shadow: none; } :root[data-skin="meridian"] .public-site .structured-group { box-shadow: none; } :root[data-skin="meridian"] .public-site .sample-form--quote { box-shadow: none; } :root[data-skin="meridian"] .public-site .smart-network-finder { box-shadow: none; } :root[data-skin="meridian"] .public-site .smart-network-map__stage { box-shadow: none; } :root[data-skin="meridian"] .public-site .smart-network-card { box-shadow: none; } :root[data-skin="meridian"] .public-site .smart-network-card--more-routes { box-shadow: none; } :root[data-skin="meridian"] .public-site .insight-card { box-shadow: none; } :root[data-skin="meridian"] .public-site .faq-list--designed .faq-grid { box-shadow: none; } :root[data-skin="meridian"] .public-site .faq-list--designed .faq-item { box-shadow: none; } :root[data-skin="meridian"] .sample-form__actions .button { box-shadow: none; } :root[data-skin="meridian"] .sample-form__actions .button:active { box-shadow: none; } :root[data-skin="meridian"] .public-site .hs-lookup-shell { box-shadow: none !important; } :root[data-skin="meridian"] .public-site .hs-lookup-heading { box-shadow: none !important; } :root[data-skin="meridian"] .public-site .hs-table-form { box-shadow: none !important; } :root[data-skin="meridian"] .public-site .hs-table-wrap { box-shadow: none !important; } :root[data-skin="meridian"] .public-site[data-page-template="syria-logistics-services"] .section--soft:has(.link-grid > article.link-card[id]) .section-heading { box-shadow: none !important; } :root[data-skin="meridian"] .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] { box-shadow: none !important; } :root[data-skin="meridian"] .public-site[data-page-template="syria-logistics-services"] main>.section:not(.section--soft):has(.service-selector) .service-selector { box-shadow: none !important; } :root[data-skin="meridian"] body:has(#rate-table-title) .hs-results-table tr { box-shadow: none; } :root[data-skin="meridian"] .section--hs-lookup:has(.hs-table-form) .hs-results-table tr { box-shadow: none; } :root[data-skin="meridian"] .public-site .section--app-downloads .app-downloads--compact { box-shadow: none; } :root[data-skin="meridian"] .home-duo__card { box-shadow: none; } :root[data-skin="meridian"] .header-actions .button:hover, :root[data-skin="meridian"] .header-actions .button:focus-visible { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .trade-lane-card[data-network-external-routes]:hover, :root[data-skin="meridian"] .trade-lane-card[data-network-external-routes]:focus-visible, :root[data-skin="meridian"] .trade-lane-card[data-network-external-routes].is-map-active { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .public-site .language-switcher-dropdown:hover summary, :root[data-skin="meridian"] .public-site .language-switcher-dropdown:focus-within summary, :root[data-skin="meridian"] .public-site .language-switcher-dropdown[open] summary { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .public-site .action-card:hover, :root[data-skin="meridian"] .public-site .action-card:focus-visible { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .public-site .solution-card--service:hover, :root[data-skin="meridian"] .public-site .solution-card--service:focus-visible { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .public-site .content-band .check-list li:hover, :root[data-skin="meridian"] .public-site .content-band .check-list li:focus-within { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .public-site .link-card:hover, :root[data-skin="meridian"] .public-site .link-card:focus-visible { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .public-site .conversion-steps article:hover { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .public-site .smart-network-filter:hover, :root[data-skin="meridian"] .public-site .smart-network-filter:focus-visible, :root[data-skin="meridian"] .public-site .smart-network-filter.is-active { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .public-site .smart-network-card:hover, :root[data-skin="meridian"] .public-site .smart-network-card:focus-visible, :root[data-skin="meridian"] .public-site .smart-network-card.is-active { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .public-site .smart-network-card--more-routes:hover, :root[data-skin="meridian"] .public-site .smart-network-card--more-routes:focus-visible { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .public-site .insight-card:hover, :root[data-skin="meridian"] .public-site .insight-card:focus-visible { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .public-site .faq-list--designed .faq-item:hover, :root[data-skin="meridian"] .public-site .faq-list--designed .faq-item:focus-within { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .sample-form__actions .button:hover, :root[data-skin="meridian"] .sample-form__actions .button:focus-visible { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .public-site .stages-in .structured-card-grid > article:hover { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } :root[data-skin="meridian"] .public-site .stages-in .motion-card:hover { box-shadow: 0 2px 8px rgba(10, 36, 64, 0.10); transform: none; } /* 15. Stage 3 - type. Meridian's weights and spacing: headings at 700, body text at 1.6, and the header on a hairline instead of a shadow. Sizes and structure are the site's own. */ :root[data-skin="meridian"] .public-site .site-header { border-bottom: 1px solid #dde4ea; } :root[data-skin="meridian"] .public-site h1, :root[data-skin="meridian"] .public-site h2, :root[data-skin="meridian"] .public-site h3, :root[data-skin="meridian"] .public-site .section-heading h2, :root[data-skin="meridian"] .public-site .content-band h2, :root[data-skin="meridian"] .public-site .smart-network-map__head h2, :root[data-skin="meridian"] .public-site .footer-reference-column h3 { font-weight: 700; letter-spacing: 0; } :root[data-skin="meridian"] .public-site .hero h1, :root[data-skin="meridian"] .template-home.public-site .hero h1 { font-weight: 700; letter-spacing: 0; } :root[data-skin="meridian"][dir="rtl"] .public-site .hero h1 { font-weight: 800; } :root[data-skin="meridian"] .public-site p, :root[data-skin="meridian"] .public-site li { line-height: 1.6; } :root[data-skin="meridian"] .public-site .lede { color: #52657a; font-size: 1.0625rem; line-height: 1.6; } :root[data-skin="meridian"] .public-site .hero .lede { color: rgba(255, 255, 255, 0.86); } /* 16. Cards and fields on a light ground: one hairline, one focus ring. */ :root[data-skin="meridian"] .public-site :is(.feature-card, .link-card, .route-card, .news-card, .topic-card, .blog-mini-card, .insight-card, .tool-card, .structured-group, .smart-network-card, .smart-network-panel, .smart-network-finder, .faq-item, .app-download-card, .home-duo__card, .conversion-steps article, .hs-lookup-result__card) { border: 1px solid #dde4ea; } :root[data-skin="meridian"] .public-site :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) { border: 1px solid #dde4ea; } :root[data-skin="meridian"] .public-site :is(input, select, textarea):focus-visible, :root[data-skin="meridian"] .public-site :is(input, select, textarea):focus { border-color: #007dc5; box-shadow: 0 0 0 3px rgba(0, 125, 197, 0.28); outline: none; } /* 17. The owner, 2026-09-17: in a band with a photograph, the text gets 3mm more room (12px, rounded to the system's 4px step) above, below and on its outer side - the side away from the photograph. The side that faces the photograph keeps the site's own spacing. The outer side is the inline end when the photograph sits first, and the inline start when the band is reversed, so it follows Arabic as well. */ :root[data-skin="meridian"] .public-site .content-band--visual > :is(.section-visual__copy, div:not(.section-visual__media)) { padding-block: 52px; padding-inline: 40px 52px; } :root[data-skin="meridian"] .public-site :is(.content-band--visual-reverse, .content-band--integrated-services) > :is(.section-visual__copy, div:not(.section-visual__media)) { padding-inline: 52px 40px; } :root[data-skin="meridian"] .template-home.public-site .content-band--visual > :is(.section-visual__copy, div:not(.section-visual__media)) { padding-block: calc(clamp(32px, 4vw, 52px) + 12px); padding-inline: clamp(32px, 4vw, 52px) calc(clamp(32px, 4vw, 52px) + 12px); } :root[data-skin="meridian"] .template-home.public-site :is(.content-band--visual-reverse, .content-band--integrated-services) > :is(.section-visual__copy, div:not(.section-visual__media)) { padding-inline: calc(clamp(32px, 4vw, 52px) + 12px) clamp(32px, 4vw, 52px); } @media (max-width: 767px) { :root[data-skin="meridian"] .public-site .content-band--visual > :is(.section-visual__copy, div:not(.section-visual__media)), :root[data-skin="meridian"] .template-home.public-site .content-band--visual > :is(.section-visual__copy, div:not(.section-visual__media)) { padding-block: 36px 40px; padding-inline: 20px 32px; } :root[data-skin="meridian"] .public-site :is(.content-band--visual-reverse, .content-band--integrated-services) > :is(.section-visual__copy, div:not(.section-visual__media)), :root[data-skin="meridian"] .template-home.public-site :is(.content-band--visual-reverse, .content-band--integrated-services) > :is(.section-visual__copy, div:not(.section-visual__media)) { padding-inline: 32px 20px; } } /* ------------------------------------------------------------------ stage 4 What the 2026-09-17 measurement of the live site found, and nothing else. Same rule as stages 1-3: colour, type and size only, every selector under :root[data-skin="meridian"], no !important, nothing applies with the attribute off. */ /* 18. The brand mark on the dark grounds. Measured on the live site: #0074b7 on #0a2440 = 3.12:1, on #0e2a48 = 2.90:1, and on the card tile (white 7% over navy = #1f3955) = 2.36:1. The threshold is 4.5:1 for text under 24px, and these run 12.8px-17px. On dark grounds the mark now takes the design system's own dark-mode brand link, #67c0f2: 7.76 / 7.20 / 5.86. The mark keeps its hue; only the step changes, the way the system's dark theme changes it. Light grounds are untouched (5.02 and 4.59 both pass). */ :root[data-skin="meridian"] .public-site .hero .brand-name, :root[data-skin="meridian"] .public-site .hero-visual .brand-name, :root[data-skin="meridian"] .public-site .hero-operations-board .brand-name { color: #67c0f2; } /* A button carries its own ground inside those dark bands - white on the secondary, brand blue on the primary - so inside a button the mark takes the button's own text colour. Measured: on the white secondary 5.02:1, on the blue primary 5.02:1. Without this the light step landed on white at 2.02:1, and the site's own rule had the mark in brand blue on the brand-blue primary, which measured 1.00:1. */ :root[data-skin="meridian"] .public-site .button .brand-name, :root[data-skin="meridian"] .public-site .btn .brand-name { color: inherit; } /* 19. Arabic inside form controls. A browser does not inherit font-family into button, input, select or textarea - Chrome's own stylesheet puts Arial there - so four measured Arabic elements were rendered in Arial while the page around them was Cairo: the buttons on /ar/track-shipment/, /ar/contact-us/ and /ar/get-quote/, and the operations-desk launcher label on every Arabic page. Controls now take the font of the text they sit in, which is how the design system's own controls are set. */ :root[data-skin="meridian"] .public-site :is(button, input, select, textarea, optgroup) { font-family: inherit; } :root[data-skin="meridian"] .mira-floating-launcher, :root[data-skin="meridian"] .mira-floating-launcher__label { font-family: inherit; } /* The language menu names each language in its own script. The Arabic entry sits on an English page, so it inherits the Latin stack and its Arabic glyphs came from Arial. It is the one control that takes Cairo directly. */ :root[data-skin="meridian"] [data-site-language="ar"] { font-family: var(--font-arabic); } /* 20. Radii the stage-2 generator did not reach, measured live at 6px: the language menu entries, the about-brief highlight chips and their links, the port list and the two footer badges. The system's small step is 4px. */ :root[data-skin="meridian"] .language-switcher__button, :root[data-skin="meridian"] .about-brief__highlights li, :root[data-skin="meridian"] .about-brief--arabic .about-brief__copy--rtl > a, :root[data-skin="meridian"] .about-brief--english .about-brief__copy--latin > a, :root[data-skin="meridian"] .public-site .content-band__port-list li { border-radius: 4px; } /* and the ones measured at 14px and 10px: the carrier directory (cards, their links and the filter bar) and the cookie notice. 14 -> 12, 10 -> 8. */ :root[data-skin="meridian"] .carrier-card, :root[data-skin="meridian"] .carrier-directory__toolbar, :root[data-skin="meridian"] .mtcb { border-radius: 12px; } :root[data-skin="meridian"] .carrier-card__link, :root[data-skin="meridian"] .hs-share-toast { border-radius: 8px; } /* 21. The font token the design system is built on. The site had no --font-sans at all, so the system's Arabic mechanism - rebind --font-sans under [lang="ar"] rather than ship a second Arabic stylesheet - had nothing to rebind. The token now exists, it rebinds, and the site's own Latin variable reads from it, so one name carries the type for both scripts. --font-arabic stays a literal stack: it is applied to Arabic blocks that sit inside English pages, where --font-sans is correctly the Latin stack. */ :root[data-skin="meridian"] { --font-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif; /* stage 7 adds the Arabic range to this stack */ --font-latin: var(--font-sans); } :root[data-skin="meridian"][lang="ar"], :root[data-skin="meridian"] [lang="ar"] { --font-sans: "Meridian Cairo", Cairo, Arial, sans-serif; } /* ------------------------------------------------------------------ stage 5 Two things the owner pointed at on the tracking page, 2026-09-17. */ /* 22. The three labels under the form heading. One rule serves both the hero pills and this row, and it is written for a dark ground: transparent background, a white 18% border and text in --color-faint. On the tracking page the row sits on the white form panel, so the text measured 1.09:1 and the border was invisible - the labels were effectively not there. On a light panel they now take the light ground's own colours: ink on the subtle surface, with the site's hairline. Measured 14.33:1. The dark contact panel keeps its own colours, which already read 11.27:1. */ :root[data-skin="meridian"] .public-site .form-panel:not(.form-panel--contact) .support-pill-row span { background: #f2f5f8; border-color: #dde4ea; color: #0a2440; } /* 23. The form's answer line. It is painted - tinted ground, blue hairline, 11px of padding - before it has anything to say, so every one of these pages shows an empty box under the buttons. Empty, it now paints nothing; as soon as the form writes an answer it comes back. The element itself stays in place and keeps its aria-live, so the answer is still announced. */ :root[data-skin="meridian"] .public-site .sample-form__result:empty { background: none; border-color: transparent; padding-block: 0; } /* 24. The heading of that same panel. `.banner h2, .conversion-block h2, .form-panel h2 { color: white }` was written when every one of those panels had a dark ground. The quote and contact panels still do - their intro carries a navy gradient, and their white heading is right. The tracking panel's intro has no ground at all, so its heading has been white on white, 1.00:1, on all seven language copies: the owner's screenshot shows the gap where «Shipment support request» should be. On a panel without a dark intro the heading takes the page's ink, 15.68:1. */ :root[data-skin="meridian"] .public-site .form-panel:not(.form-panel--quote):not(.form-panel--contact) .form-panel__intro h2 { color: #0a2440; } /* 25. The arrow on a link card. Its own ground is a 10% brand tint over white (#e6f2f9 composited), and brand blue on it measured 4.40:1 at 16px - just under. It now takes the system's light brand link, #0069a8: 5.14:1. */ :root[data-skin="meridian"] .public-site .link-card__arrow { color: #0069a8; } /* 26. The same arrow on the WhatsApp card. There the card is the WhatsApp green #147d3c, which carries white text at 5.21:1, but the arrow sits in a white 16% tile: composited that is #3a925b, and the white arrow on it measured 3.87:1. The tile goes to 6% - still a tile, now 4.66:1. The card's own rule carries !important, so this one has to as well; it is the only weight that reaches it, and the green itself is untouched. */ :root[data-skin="meridian"] .public-site .link-card[href*="wa.me"] .link-card__arrow, :root[data-skin="meridian"] .public-site .link-card[href*="api.whatsapp.com"] .link-card__arrow { background: rgba(255, 255, 255, 0.06) !important; } /* 27. The owner, 2026-09-17: the head of the operations desk panel should sit on the hero's navy. It was #061b36, one of the site's older darks; the hero and every dark band on the site are #0a2440. The panel's own files are not touched - this is one declaration in the bridge, and it goes away with the attribute. The brand mark in the subtitle follows the same rule as the rest of the site: on this ground #007dc5 measured 3.19:1, so it takes the system's dark brand link. */ :root[data-skin="meridian"] .mtc-header { background: #0a2440; } :root[data-skin="meridian"] .mtc-header .mtc-brand-name { color: #67c0f2; } /* 28. Two components are drawn by their own scripts, so they are in no stylesheet and the grid pass cannot see them. Measured and put on the grid here: the cookie notice (padding 14px -> 12px) and the share toast on the HS-code pages (10px 18px -> 8px 16px). */ :root[data-skin="meridian"] .mtcb { padding-block: 12px; } :root[data-skin="meridian"] .hs-share-toast { padding: 8px 16px; } /* ------------------------------------------------------------------ stage 7 What a sweep of every page template turned up, 2026-09-18. Measured on the live site, one page of each of the 19 templates that carry the skin, at 1440 and 390. */ /* 29. Arabic glyphs inside the Latin stack. Arabic words appear on English pages too - the Arabic company name, an Arabic commodity description in an HS table, «ميدترانس» in a fact sheet - and the Latin stack reaches Arial before it reaches anything of ours, so those words were set in Arial while the page around them was Helvetica. Cairo now sits in the same stack behind a unicode-range that only covers Arabic, so Latin letters never touch it and Arabic never falls to Arial. Same file as the Arabic pages load, so it costs no extra download. */ @font-face { font-family: "Meridian Cairo Arabic"; src: url("cairo-sub-75e917af5115.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: optional; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+061C, U+200F; } :root[data-skin="meridian"] { --font-sans: "Helvetica Neue", Helvetica, "Meridian Cairo Arabic", Arial, "Liberation Sans", sans-serif; } /* 30. The arrow on the "more routes" card of the network map. The card's own ground is brand blue and the arrow was brand blue on it: 1.00:1, an arrow nobody can see. It takes the card's own text colour, which is white: 5.02:1. The card, its wording and its size are untouched. */ :root[data-skin="meridian"] .public-site .smart-network-card--more-routes .smart-network-card__action span { color: inherit; } /* 31. The source line under an HS-code result sits on the table's blue row. Measured 3.87:1 at 11.5px; the system's muted ink reads 4.99:1 there. */ :root[data-skin="meridian"] .public-site .hs-results-table__source { color: #52657a; } /* 32. Two cells in the HS-code result table. Both are written with !important in the site's own stylesheet, so the correction has to carry it too - the same rule the earlier stages followed: !important only where the site already used it, and only on the property being corrected. Measured on the table's blue row (#dbedf7): the source line was 3.87:1 and takes the system's muted ink, 4.99:1; the duty figure was 4.18:1 and takes the light brand link, 4.87:1. */ :root[data-skin="meridian"] .public-site .hs-results-table__source { color: #52657a !important; } :root[data-skin="meridian"] .public-site .hs-results-table__duty { color: #0069a8 !important; } /* 33. A lede paragraph that no rule gives a margin to falls back to the browser's own `1em`, which at the lede's 1.0625rem is 17px. This sets the step under it at :where() weight - no weight at all - so every place the site does set that margin keeps its own value, and only the paragraphs that were left to the browser move onto the grid. */ :where(:root[data-skin="meridian"]) .lede { margin-block-end: 16px; } /* 34. The owner, 2026-09-18: the membership line above the FIATA mark reads on two lines, «FIATA member» then «since 2000». The span is written white-space: nowrap, which is why it stayed on one; it now wraps, and the width is held to the point where it breaks after the word «member». text-wrap: balance keeps the two lines even in the six other languages, where the wording is longer or shorter. The words themselves are unchanged. */ :root[data-skin="meridian"] .public-site .footer-reference-fiata span { display: block; max-inline-size: 15ch; margin-inline: auto; text-align: center; text-wrap: balance; white-space: normal; } /* ------------------------------------------------------------------ stage 8 The phone pass, 2026-09-18, measured at 390x844 on a touch profile. */ /* 34. The operations-desk button, and the cross the owner asked for. Measured on the home page: the pill is 230x70 at the bottom left and the floating action bar is 390x73 - and they overlap, the pill sitting from 760 to 830 over a bar that starts at 771. On a phone the two together took a third of the screen. The pill now sits clear above the bar, and the cross beside it closes it. The owner, after seeing the first version: «انا اريد فقط ميزة الاغلاق لكن اخفيت انت العنوان» - so the cross closes the pill and nothing else; while the pill is open it keeps its name. Closing lasts for the browsing session, so the desk is never lost for good. desk-dock.js adds the control beside the pill; the desk's own code is untouched. */ :root[data-skin="meridian"] .mt-desk-park { position: fixed; z-index: 39; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 999px; background: #0a2440; color: #ffffff; cursor: pointer; } :root[data-skin="meridian"] .mt-desk-park svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } :root[data-skin="meridian"] .mt-desk-park:focus-visible { outline: 3px solid #007dc5; outline-offset: 2px; } /* closed: the pill and its cross step away for the rest of the session */ :root[data-skin="meridian"] .mira-floating-launcher--closed, :root[data-skin="meridian"] .mt-desk-park--closed { display: none !important; } @media (max-width: 767px) { /* clear of the floating action bar, which measures 73px tall */ :root[data-skin="meridian"] .mira-floating-launcher { inset-block-end: 92px; } /* 35. The buttons under a form. The row is a column on a phone, and each button is flex: 1 1 100% - a basis of 100% along a vertical main axis - so with wrapping on they wrapped into columns instead of rows: two of the three buttons on /get-quote/ stood at x 336 and 638 on a 390px screen, outside it, and each box came out 174px tall. One column of full-width buttons ends the whole class of problem. */ :root[data-skin="meridian"] .public-site .sample-form__actions { display: grid; grid-template-columns: 1fr; align-items: stretch; } :root[data-skin="meridian"] .public-site .sample-form__actions > * { width: 100%; height: auto; min-height: 48px; flex: none; } /* 36. Touch targets. The mobile menu's links measured 314x38 and its language buttons 91x38; a finger wants 44. Nothing moves on a desktop. */ :root[data-skin="meridian"] .mobile-menu__child, :root[data-skin="meridian"] .mobile-menu__overview, :root[data-skin="meridian"] .mobile-menu__language, :root[data-skin="meridian"] .footer-reference-store-badge { display: flex; align-items: center; min-height: 44px; } /* 37. The smallest text on the site is 0.72rem - 11.5px - which is under the 12px floor on a phone. These are the elements measured at that size, each named rather than swept up with a wildcard, so nothing that is already big enough is shrunk by the same rule. A desktop keeps 11.5px, where the reading distance is different. */ :root[data-skin="meridian"] .public-site .footer-reference-links, :root[data-skin="meridian"] .public-site .footer-reference-links a, :root[data-skin="meridian"] .public-site .footer-reference-links span, :root[data-skin="meridian"] .public-site .hero-operations-board__modes, :root[data-skin="meridian"] .public-site .hero-operations-board__modes a, :root[data-skin="meridian"] .public-site .hero-operations-signal__body, :root[data-skin="meridian"] .public-site .hero-operations-signal__body span, :root[data-skin="meridian"] .public-site .conversion-steps, :root[data-skin="meridian"] .public-site .conversion-steps article span, :root[data-skin="meridian"] .public-site .action-card span, :root[data-skin="meridian"] .public-site .action-card p, :root[data-skin="meridian"] .public-site .quote-stepper li span, :root[data-skin="meridian"] .public-site .sample-form__field small, :root[data-skin="meridian"] .public-site .smart-network-card > span, :root[data-skin="meridian"] .public-site .smart-network-card__action, :root[data-skin="meridian"] .public-site .smart-network-card__action span, :root[data-skin="meridian"] .public-site .smart-network-panel__kicker, :root[data-skin="meridian"] .public-site .network-map-badge, :root[data-skin="meridian"] .public-site .eyebrow, :root[data-skin="meridian"] .public-site .kicker, /* the hero eyebrow is written at 0.72rem under 560px by a rule with five classes in it, so this one has to be at least as specific to reach it */ :root[data-skin="meridian"] .public-site:not(.template-khouli) .hero--home-pattern .eyebrow, :root[data-skin="meridian"] .public-site:not(.template-khouli) .hero--home-pattern .eyebrow *, :root[data-skin="meridian"] .floating-actions__label { font-size: 0.75rem; } /* the brand mark inside a card title was written at 0.72rem, so it came out smaller than the title it sits in; it takes the size of that title. */ :root[data-skin="meridian"] .public-site .smart-network-card strong .brand-name { font-size: inherit; } /* 38. While the menu is open it is the whole screen's business: the floating bar and the desk button sat over it and covered the entries behind them - measured, the bar over «Clearance in Egypt» and the desk button over «الشحن الجوي». They step aside until the menu is closed again. */ :root[data-skin="meridian"] body:has(.mobile-menu[open]) .mira-floating-launcher, :root[data-skin="meridian"] body:has(.mobile-menu[open]) .mt-desk-park { display: none; } /* the bar's own display is written !important under 1200px, so this is the one weight that reaches it */ :root[data-skin="meridian"] body:has(.mobile-menu[open]) .floating-actions { display: none !important; } } /* ----------------------------------------------------------------- stage 6 Spacing on the 4px grid and corners on 4/8/12/999. Every padding, margin and gap the site sets in px or rem, put on the nearest step of 4. Ties go down (10->8, 14->12, 18->16, 22->20) so nothing grows into the space beside it; 1-3px goes up to 4 rather than down to nothing. em, %, vw and vh are left alone - they are not a fixed number of pixels - and so are the admin screens and the desk widget. Generated by gen-spacing.py from the site's own rules, each selector and each media query kept exactly as the site writes them. */ :where(:root[data-skin="meridian"]) body { margin: 0; } :where(:root[data-skin="meridian"]) .container { margin: 0 auto; padding: 0 24px; } :where(:root[data-skin="meridian"]) .skip-link { padding: 8px 12px; } :where(:root[data-skin="meridian"]) .top-bar__inner { gap: 20px; } :where(:root[data-skin="meridian"]) .site-header__inner { gap: 12px; } :where(:root[data-skin="meridian"]) .brand { gap: 12px; } :where(:root[data-skin="meridian"]) .brand__text { gap: 0; } :where(:root[data-skin="meridian"]) .main-nav, :where(:root[data-skin="meridian"]) .header-actions { gap: 8px; } :where(:root[data-skin="meridian"]) .main-nav { gap: 4px; } :where(:root[data-skin="meridian"]) .header-actions { gap: 8px; } :where(:root[data-skin="meridian"]) .nav-trigger { gap: 8px; padding: 0 8px; } :where(:root[data-skin="meridian"]) .nav-item--has-panel .nav-trigger::after { margin-top: -4px; } :where(:root[data-skin="meridian"]) .mega-panel { gap: 0; padding: 0; } :where(:root[data-skin="meridian"]) .mega-panel__intro { gap: 12px; padding: 20px; } :where(:root[data-skin="meridian"]) .mega-panel__intro p { margin: 0; } :where(:root[data-skin="meridian"]) .mega-panel__overview { padding: 0 12px; } :where(:root[data-skin="meridian"]) .mega-panel__content { gap: 12px; padding: 16px; } :where(:root[data-skin="meridian"]) .mega-panel__section { gap: 8px; } :where(:root[data-skin="meridian"]) .mega-panel__title { margin: 0 0 4px; } :where(:root[data-skin="meridian"]) .mega-panel__links { gap: 4px; } :where(:root[data-skin="meridian"]) .mega-panel a { padding: 8px 8px; } :where(:root[data-skin="meridian"]) .mega-panel .mega-panel__overview { padding: 0 12px; } :where(:root[data-skin="meridian"]) .button { border-radius: var(--radius); padding: 0 16px; } :where(:root[data-skin="meridian"]) .header-actions .button { padding: 0 12px; } :where(:root[data-skin="meridian"]) .language-switcher__button { border-radius: 4px; padding: 0 8px; } :where(:root[data-skin="meridian"]) .button--contact-cta::after { margin-left: 8px; } :where(:root[data-skin="meridian"]) .mobile-menu summary { padding: 8px 12px; } :where(:root[data-skin="meridian"]) .mobile-menu nav { gap: 8px; margin-top: 8px; padding: 12px; } :where(:root[data-skin="meridian"]) .mobile-menu__languages { gap: 8px; padding: 12px; } :where(:root[data-skin="meridian"]) .mobile-menu__language-options { gap: 8px; } :where(:root[data-skin="meridian"]) .mobile-menu__language { padding: 0 8px; } :where(:root[data-skin="meridian"]) .mobile-menu__actions { gap: 8px; } :where(:root[data-skin="meridian"]) .mobile-menu__group { gap: 4px; padding-top: 8px; } :where(:root[data-skin="meridian"]) .mobile-menu__group summary { padding: 8px 8px; } :where(:root[data-skin="meridian"]) .mobile-menu__links { gap: 4px; padding-bottom: 4px; } :where(:root[data-skin="meridian"]) .mobile-menu__child { padding: 8px 8px 8px 16px; } :where(:root[data-skin="meridian"]) .breadcrumbs { gap: 8px; padding-bottom: 16px; padding-top: 20px; } :where(:root[data-skin="meridian"]) .hero { padding: 28px 0 56px; } :where(:root[data-skin="meridian"]) .hero__grid { gap: 40px; } :where(:root[data-skin="meridian"]) .eyebrow { margin: 0 0 8px; } :where(:root[data-skin="meridian"]) .kicker { margin: 0 0 8px; } :where(:root[data-skin="meridian"]) h1, :where(:root[data-skin="meridian"]) h2, :where(:root[data-skin="meridian"]) h3, :where(:root[data-skin="meridian"]) p { margin-top: 0; } :where(:root[data-skin="meridian"]) h1 { margin-bottom: 24px; } :where(:root[data-skin="meridian"]) h2 { margin-bottom: 12px; } :where(:root[data-skin="meridian"]) .hero__actions, :where(:root[data-skin="meridian"]) .conversion-actions { gap: 12px; margin-top: 28px; } :where(:root[data-skin="meridian"]) .conversion-actions { padding-right: 16px; } :where(:root[data-skin="meridian"]) .hero-visual { border-radius: var(--radius); margin: 0; } :where(:root[data-skin="meridian"]) .hero-visual-stack { gap: 24px; } :where(:root[data-skin="meridian"]) .section { padding: 64px 0; } :where(:root[data-skin="meridian"]) .action-hub { margin-top: -28px; } :where(:root[data-skin="meridian"]) .action-hub__grid { gap: 0; } :where(:root[data-skin="meridian"]) .action-card { padding: 24px; } :where(:root[data-skin="meridian"]) .action-card:first-child { border-bottom-left-radius: var(--radius); border-top-left-radius: var(--radius); } :where(:root[data-skin="meridian"]) .action-card:last-child { border-bottom-right-radius: var(--radius); border-top-right-radius: var(--radius); } :where(:root[data-skin="meridian"]) .action-card span { margin-bottom: 12px; } :where(:root[data-skin="meridian"]) .action-card strong { margin-bottom: 8px; } :where(:root[data-skin="meridian"]) .action-card p { margin: 0; } :where(:root[data-skin="meridian"]) .network-band { margin-top: 40px; } :where(:root[data-skin="meridian"]) .network-band__grid { gap: 0; } :where(:root[data-skin="meridian"]) .network-stat { padding: 28px 20px; } :where(:root[data-skin="meridian"]) .network-stat strong { margin-bottom: 8px; } :where(:root[data-skin="meridian"]) .home-network-map-link__inner { gap: 28px; } :where(:root[data-skin="meridian"]) .home-network-map-link h2 { margin: 0 0 12px; } :where(:root[data-skin="meridian"]) .home-network-map-link p:not(.kicker) { margin: 0; } :where(:root[data-skin="meridian"]) .section--about-brief { padding-bottom: 36px; } :where(:root[data-skin="meridian"]) .section--about-brief--arabic { padding-block: clamp(48px,6vw,76px); } :where(:root[data-skin="meridian"]) .section--about-brief--english { padding-block: 64px 52px; } :where(:root[data-skin="meridian"]) .about-brief { gap: 32px; padding-top: 40px; } :where(:root[data-skin="meridian"]) .about-brief--english { border-radius: 4px; gap: 0; padding: 0; } :where(:root[data-skin="meridian"]) .about-brief--arabic { border-radius: 4px; gap: 0; padding: 0; } :where(:root[data-skin="meridian"]) .about-brief--arabic .about-brief__visual--arabic-full { border-radius: 0; } :where(:root[data-skin="meridian"]) .about-brief--arabic .about-brief__copy--rtl { padding: clamp(32px,4.5vw,64px); } :where(:root[data-skin="meridian"]) .about-brief--arabic .about-brief__copy--rtl .kicker { margin-bottom: 8px; } :where(:root[data-skin="meridian"]) .about-brief--arabic .about-brief__copy--rtl h2 { margin-bottom: 20px; } :where(:root[data-skin="meridian"]) .about-brief--arabic .about-brief__copy--rtl p:not(.kicker) { margin-bottom: 12px; } :where(:root[data-skin="meridian"]) .about-brief__highlights { gap: 8px 12px; margin: 20px 0 0; padding: 0; } :where(:root[data-skin="meridian"]) .about-brief__highlights li { border-radius: 4px; gap: 8px; padding: 8px 12px; } :where(:root[data-skin="meridian"]) .about-brief__highlights li::before { border-radius: 50%; } :where(:root[data-skin="meridian"]) .about-brief--arabic .about-brief__copy--rtl>a { border-radius: 4px; margin-top: 20px; padding: 12px 16px; } :where(:root[data-skin="meridian"]) .public-site .about-brief--arabic .about-brief__copy--rtl>a .brand-name { margin-inline: 0; } :where(:root[data-skin="meridian"]) .public-site .about-brief--english .about-brief__copy--latin>a .brand-name { margin-inline: 0; } :where(:root[data-skin="meridian"]) .about-brief--english .about-brief__copy { padding: clamp(32px,4.5vw,64px); } :where(:root[data-skin="meridian"]) .about-brief--english .about-brief__copy h2 { margin-bottom: 20px; } :where(:root[data-skin="meridian"]) .about-brief--english .about-brief__copy p:not(.kicker) { margin-bottom: 12px; } :where(:root[data-skin="meridian"]) .about-brief--english .about-brief__visual { border-radius: 0; } :where(:root[data-skin="meridian"]) .about-brief--english .about-brief__copy--latin>a { border-radius: 4px; margin-top: 20px; padding: 12px 16px; } :where(:root[data-skin="meridian"]) .about-brief__visual { border-radius: 4px; margin: 0; } :where(:root[data-skin="meridian"]) .about-brief__copy { padding-inline-start: 16px; } :where(:root[data-skin="meridian"]) .about-brief__copy h2, :where(:root[data-skin="meridian"]) .about-brief__copy h3 { margin: 0 0 12px; } :where(:root[data-skin="meridian"]) .about-brief__copy p:not(.kicker) { margin: 0 0 12px; } :where(:root[data-skin="meridian"]) .about-brief__copy p:not(.kicker):last-of-type { margin-bottom: 0; } :where(:root[data-skin="meridian"]) .about-brief__copy a { margin-top: 12px; } :where(:root[data-skin="meridian"]) .about-brief__copy--rtl { padding-inline-end: 16px; padding-inline-start: 0; } :where(:root[data-skin="meridian"]) .app-downloads { gap: 28px; } :where(:root[data-skin="meridian"]) .app-downloads__copy p { margin-bottom: 0; } :where(:root[data-skin="meridian"]) .app-downloads__instruction { margin-top: 16px; } :where(:root[data-skin="meridian"]) .app-download-grid { gap: 12px; } :where(:root[data-skin="meridian"]) .app-download-card { border-radius: var(--radius); gap: 12px; padding: 16px; } :where(:root[data-skin="meridian"]) .app-download-card__badge { border-radius: var(--radius); } :where(:root[data-skin="meridian"]) .app-download-card__text { gap: 4px; } :where(:root[data-skin="meridian"]) .app-download-card__meta { gap: 4px; } :where(:root[data-skin="meridian"]) .tool-embed-shell { border-radius: 12px; gap: 24px; padding: 28px; } :where(:root[data-skin="meridian"]) .tool-embed-shell__header { gap: 16px; } :where(:root[data-skin="meridian"]) .tool-embed-shell__header h2 { margin: 0 0 8px; } :where(:root[data-skin="meridian"]) .tool-embed-shell__header p:not(.kicker) { margin: 0; } :where(:root[data-skin="meridian"]) .tool-embed-shell__actions { gap: 12px; } :where(:root[data-skin="meridian"]) .tool-embed-frame { border-radius: 12px; } :where(:root[data-skin="meridian"]) .solution-grid { gap: 16px; } :where(:root[data-skin="meridian"]) .solution-card { border-radius: var(--radius); padding: 24px; } :where(:root[data-skin="meridian"]) .solution-card h3 { margin-bottom: 12px; } :where(:root[data-skin="meridian"]) .insight-card { border-radius: var(--radius); padding: 24px; } :where(:root[data-skin="meridian"]) .insight-card h3 { margin-bottom: 12px; } :where(:root[data-skin="meridian"]) .section--compact { padding: 16px 0; } :where(:root[data-skin="meridian"]) .section--banner { padding: 32px 0; } :where(:root[data-skin="meridian"]) .feature-grid, :where(:root[data-skin="meridian"]) .link-grid { gap: 16px; } :where(:root[data-skin="meridian"]) .feature-card, :where(:root[data-skin="meridian"]) .link-card { border-radius: var(--radius); padding: 20px; } :where(:root[data-skin="meridian"]) .feature-card p { margin: 0; } :where(:root[data-skin="meridian"]) .content-stack { gap: 24px; } :where(:root[data-skin="meridian"]) .content-band { gap: 32px; padding-bottom: 28px; } :where(:root[data-skin="meridian"]) .anchor-strip { gap: 8px; margin: 0 0 20px; } :where(:root[data-skin="meridian"]) .anchor-strip a, :where(:root[data-skin="meridian"]) .mode-strip span, :where(:root[data-skin="meridian"]) .trade-lane-meta span { border-radius: var(--radius); padding: 8px 12px; } :where(:root[data-skin="meridian"]) .mode-strip, :where(:root[data-skin="meridian"]) .trade-lane-meta { gap: 8px; } :where(:root[data-skin="meridian"]) .mode-strip { margin-bottom: 32px; } :where(:root[data-skin="meridian"]) .mode-strip span, :where(:root[data-skin="meridian"]) .trade-lane-meta span { padding: 4px 8px; } :where(:root[data-skin="meridian"]) .route-featured-block { margin-bottom: 8px; } :where(:root[data-skin="meridian"]) .route-grid, :where(:root[data-skin="meridian"]) .news-grid, :where(:root[data-skin="meridian"]) .topic-grid, :where(:root[data-skin="meridian"]) .blog-featured__cards { gap: 16px; } :where(:root[data-skin="meridian"]) .route-group-stack { gap: 36px; margin-top: 40px; } :where(:root[data-skin="meridian"]) .route-group, :where(:root[data-skin="meridian"]) .news-section { padding-top: 28px; } :where(:root[data-skin="meridian"]) .route-group__header { gap: 20px; margin-bottom: 16px; } :where(:root[data-skin="meridian"]) .route-group__header p { margin-bottom: 0; } :where(:root[data-skin="meridian"]) .route-card, :where(:root[data-skin="meridian"]) .news-card, :where(:root[data-skin="meridian"]) .topic-card, :where(:root[data-skin="meridian"]) .blog-mini-card { border-radius: var(--radius); padding: 20px; } :where(:root[data-skin="meridian"]) .route-card { gap: 12px; } :where(:root[data-skin="meridian"]) .route-card h3, :where(:root[data-skin="meridian"]) .news-card h3, :where(:root[data-skin="meridian"]) .topic-card h3, :where(:root[data-skin="meridian"]) .blog-mini-card h3 { margin: 0; } :where(:root[data-skin="meridian"]) .route-card p, :where(:root[data-skin="meridian"]) .news-card p, :where(:root[data-skin="meridian"]) .topic-card p, :where(:root[data-skin="meridian"]) .blog-mini-card p { margin-bottom: 0; } :where(:root[data-skin="meridian"]) .route-card__services { padding-top: 12px; } :where(:root[data-skin="meridian"]) .route-card__services strong { margin-bottom: 8px; } :where(:root[data-skin="meridian"]) .route-card__services ul { gap: 4px; margin: 0; padding-left: 16px; } :where(:root[data-skin="meridian"]) .trade-card-actions { gap: 8px; margin-top: auto; } :where(:root[data-skin="meridian"]) .trade-card-actions a { border-radius: var(--radius); padding: 8px 8px; } :where(:root[data-skin="meridian"]) .blog-featured { gap: 28px; margin-top: 16px; padding-top: 28px; } :where(:root[data-skin="meridian"]) .news-section { margin-top: 36px; } :where(:root[data-skin="meridian"]) .news-card { gap: 12px; } :where(:root[data-skin="meridian"]) .news-card__meta { gap: 12px; padding-top: 12px; } :where(:root[data-skin="meridian"]) .topic-card { gap: 8px; } :where(:root[data-skin="meridian"]) .check-list { gap: 8px; margin: 0; padding: 0; } :where(:root[data-skin="meridian"]) .check-list li { border-radius: var(--radius); padding: 12px 12px; } :where(:root[data-skin="meridian"]) .banner, :where(:root[data-skin="meridian"]) .conversion-block, :where(:root[data-skin="meridian"]) .form-panel { border-radius: var(--radius); gap: 28px; padding: 32px; } :where(:root[data-skin="meridian"]) .banner p, :where(:root[data-skin="meridian"]) .conversion-block p, :where(:root[data-skin="meridian"]) .form-panel p { margin-bottom: 0; } :where(:root[data-skin="meridian"]) .section-heading { margin-bottom: 20px; } :where(:root[data-skin="meridian"]) .faq-grid { gap: 12px; } :where(:root[data-skin="meridian"]) .faq-item { border-radius: var(--radius); } :where(:root[data-skin="meridian"]) .faq-item summary { gap: 16px; padding: 16px 20px; } :where(:root[data-skin="meridian"]) .faq-item__icon { border-radius: 50%; } :where(:root[data-skin="meridian"]) .faq-item p { margin: 0; padding: 0 20px 20px; } :where(:root[data-skin="meridian"]) .article-meta { border-radius: var(--radius); gap: 12px; padding-bottom: 16px; padding-top: 16px; } :where(:root[data-skin="meridian"]) .sample-form { border-radius: var(--radius); gap: 12px; padding: 20px; } :where(:root[data-skin="meridian"]) .sample-form label { gap: 4px; } :where(:root[data-skin="meridian"]) .sample-form__consent { gap: 8px; } :where(:root[data-skin="meridian"]) .sample-form__consent input { margin-top: 4px; } :where(:root[data-skin="meridian"]) .sample-form input, :where(:root[data-skin="meridian"]) .sample-form select, :where(:root[data-skin="meridian"]) .sample-form textarea { border-radius: var(--radius); padding: 8px 12px; } :where(:root[data-skin="meridian"]) .sample-form__result { border-radius: var(--radius); padding: 12px 12px; } :where(:root[data-skin="meridian"]) .hs-source-notice { border-radius: 8px; padding: 12px 12px; } :where(:root[data-skin="meridian"]) .public-site .section--hs-lookup { padding-bottom: clamp(32px,4vw,56px); padding-top: clamp(32px,4vw,56px); } :where(:root[data-skin="meridian"]) .public-site .hs-lookup-shell { border-radius: 12px; gap: 20px; padding: clamp(16px,2.8vw,32px); } :where(:root[data-skin="meridian"]) .public-site .hs-lookup-heading { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hs-lookup-heading h1 { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .hs-lookup-heading>p:not(.kicker) { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .hs-lookup-heading .hs-source-notice { margin-top: 4px; } :where(:root[data-skin="meridian"]) .public-site .hs-table-form { border-radius: 12px; gap: 16px; padding: 16px; } :where(:root[data-skin="meridian"]) .public-site .hs-table-form__grid { gap: 16px; } :where(:root[data-skin="meridian"]) .public-site .hs-table-form__field { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hs-table-form__field input, :where(:root[data-skin="meridian"]) .public-site .hs-table-form__field select { border-radius: 8px; padding: 8px 12px; } :where(:root[data-skin="meridian"]) .public-site .hs-table-form__actions { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .hs-table-status { border-radius: 8px; padding: 12px 12px; } :where(:root[data-skin="meridian"]) .public-site .hs-table-wrap { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .hs-results-table th, :where(:root[data-skin="meridian"]) .public-site .hs-results-table td { padding: 12px 12px; } :where(:root[data-skin="meridian"]) .public-site .hs-results-table__share { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hs-share-action { border-radius: 8px; } :where(:root[data-skin="meridian"]) .public-site .section--hs-operational { padding-bottom: clamp(28px,3.5vw,52px); padding-top: clamp(28px,3.5vw,52px); } :where(:root[data-skin="meridian"]) .public-site .section--hs-operational .content-stack { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .section--hs-operational .content-band { gap: 20px; padding: 20px 24px; } :where(:root[data-skin="meridian"]) .public-site .section--hs-operational .content-band h2 { margin-bottom: 8px; } :where(:root[data-skin="meridian"]) .public-site .section--hs-operational .content-band .check-list { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .section--hs-operational .content-band .check-list li { padding: 0 12px; } :where(:root[data-skin="meridian"]) .site-footer { padding: 48px 0 24px; } :where(:root[data-skin="meridian"]) .footer-brand { gap: 16px; } :where(:root[data-skin="meridian"]) .footer-brand span { gap: 8px; } :where(:root[data-skin="meridian"]) .footer-directory { --footer-directory-safe-space: 4px; gap: 28px; margin-block: var(--footer-directory-safe-space); padding-bottom: var(--footer-directory-safe-space); padding-top: var(--footer-directory-safe-space); } :where(:root[data-skin="meridian"]) .footer-directory nav { gap: 8px; } :where(:root[data-skin="meridian"]) .footer-directory h2 { margin: 0 0 4px; } :where(:root[data-skin="meridian"]) .footer-bottom { gap: 16px; padding-block: 4px; } :where(:root[data-skin="meridian"]) .footer-bottom__copy { gap: 8px; } :where(:root[data-skin="meridian"]) .sr-only { margin: -4px; } :where(:root[data-skin="meridian"]) .public-site .site-header__inner { gap: 20px; } :where(:root[data-skin="meridian"]) .public-site .brand { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .nav-trigger { padding: 0 12px; } :where(:root[data-skin="meridian"]) .public-site .mega-panel { gap: 12px; padding: 12px; } :where(:root[data-skin="meridian"]) .public-site .mega-panel__intro { padding: 16px; } :where(:root[data-skin="meridian"]) .public-site .mega-panel__content { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .mega-panel__section { padding: 12px; } :where(:root[data-skin="meridian"]) .public-site .mega-panel h2 { margin-bottom: 8px; } :where(:root[data-skin="meridian"]) .public-site .mega-panel__links { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .mega-panel a:not(.mega-panel__overview) { padding: 8px 8px; } :where(:root[data-skin="meridian"]) .public-site .language-switcher__button { border-radius: 8px; } :where(:root[data-skin="meridian"]) .public-site .language-switcher-dropdown summary { border-radius: 999px; gap: 8px; padding: 0 16px; } :where(:root[data-skin="meridian"]) .public-site .language-switcher-dropdown__menu { border-radius: 12px; gap: 4px; padding: 8px; } :where(:root[data-skin="meridian"]) .public-site .language-switcher-dropdown .language-switcher__button { padding: 0 12px; } :where(:root[data-skin="meridian"]) .public-site .button { border-radius: 8px; padding: 0 16px; } :where(:root[data-skin="meridian"]) .public-site .breadcrumbs { padding-top: 24px; } :where(:root[data-skin="meridian"]) .public-site .hero { padding: 20px 0 0; } :where(:root[data-skin="meridian"]) .public-site .hero__grid { border-radius: 12px; gap: 36px; padding: 16px 0 0; } :where(:root[data-skin="meridian"]) .public-site .hero__copy { padding: 24px 0 72px; } :where(:root[data-skin="meridian"]) .public-site .hero .eyebrow { border-radius: 999px; margin: 0 0 20px; padding: 0 12px; } :where(:root[data-skin="meridian"]) .public-site .hero h1 { margin: 0 0 16px; } :where(:root[data-skin="meridian"]) .public-site .hero .hero-title { margin: 0 0 16px; } :where(:root[data-skin="meridian"]) .public-site .hero .lede { margin: 0 0 20px; } :where(:root[data-skin="meridian"]) .public-site .hero-feature-pills, :where(:root[data-skin="meridian"]) .public-site .support-pill-row { gap: 8px; margin-bottom: 20px; } :where(:root[data-skin="meridian"]) .public-site .hero-feature-pills span, :where(:root[data-skin="meridian"]) .public-site .hero-feature-pills button, :where(:root[data-skin="meridian"]) .public-site .support-pill-row span { border-radius: 999px; padding: 0 12px; } :where(:root[data-skin="meridian"]) .public-site .hero__actions { gap: 12px; margin-bottom: 24px; } :where(:root[data-skin="meridian"]) .public-site .hero-stat-strip { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hero-stat-card { border-radius: 12px; gap: 4px; padding: 16px 16px; } :where(:root[data-skin="meridian"]) .public-site .hero-visual, :where(:root[data-skin="meridian"]) .public-site .hero-visual--photo { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board { gap: 16px; padding: 32px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board::before { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board__header { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board__header p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board__modes { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board__modes a, :where(:root[data-skin="meridian"]) .public-site .hero-operations-board__modes a:visited { border-radius: 999px; padding: 8px 12px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board__cards { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-card, :where(:root[data-skin="meridian"]) .public-site .hero-operations-card:visited { border-radius: 12px; gap: 12px; padding: 16px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-card__icon, :where(:root[data-skin="meridian"]) .public-site .hero-operations-signal__icon { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-card__body { gap: 4px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-card__body p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board__signals { gap: 12px; } html:where([data-skin="meridian"])[dir="rtl"] .public-site .hero-operations-board--arabic-about { gap: 16px; padding: 28px; } html:where([data-skin="meridian"])[dir="rtl"] .public-site .hero-operations-board--arabic-about .hero-operations-board__header { padding-inline-start: 16px; } html:where([data-skin="meridian"])[dir="rtl"] .public-site .hero-operations-board--arabic-about .hero-operations-board__modes a { border-radius: 8px; } html:where([data-skin="meridian"])[dir="rtl"] .public-site .hero-operations-board--arabic-about .hero-operations-card { border-radius: 12px; padding: 16px; } html:where([data-skin="meridian"])[dir="rtl"] .public-site .hero-operations-board--arabic-about .hero-operations-signal { border-radius: 8px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-signal, :where(:root[data-skin="meridian"]) .public-site .hero-operations-signal:visited { border-radius: 12px; gap: 8px; padding: 12px 12px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-signal__body { gap: 4px; } :where(:root[data-skin="meridian"]) .public-site .action-hub { margin-top: -28px; } :where(:root[data-skin="meridian"]) .public-site .action-hub__grid { gap: 16px; } :where(:root[data-skin="meridian"]) .public-site .action-card { border-radius: 12px; gap: 12px; padding: 20px; } :where(:root[data-skin="meridian"]) .public-site .ui-icon { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .action-card:first-child { border-bottom-left-radius: 12px; border-top-left-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .action-card:last-child { border-bottom-right-radius: 12px; border-top-right-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .action-card p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .section--app-downloads { padding-top: 40px; } :where(:root[data-skin="meridian"]) .public-site .section { padding: 64px 0; } :where(:root[data-skin="meridian"]) .public-site .section-heading { gap: 12px; margin-bottom: 28px; } :where(:root[data-skin="meridian"]) .public-site .services-hub { gap: 28px; } :where(:root[data-skin="meridian"]) .public-site .services-hub__intro { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .solution-grid--services { gap: 16px; } :where(:root[data-skin="meridian"]) .public-site .solution-card--service { border-radius: 12px; padding: 20px; } :where(:root[data-skin="meridian"]) .public-site input, :where(:root[data-skin="meridian"]) .public-site select, :where(:root[data-skin="meridian"]) .public-site textarea { border-radius: 12px; padding: 0 16px; } :where(:root[data-skin="meridian"]) .public-site textarea { padding: 16px; } :where(:root[data-skin="meridian"]) .public-site .route-card, :where(:root[data-skin="meridian"]) .public-site .news-card, :where(:root[data-skin="meridian"]) .public-site .topic-card, :where(:root[data-skin="meridian"]) .public-site .blog-mini-card, :where(:root[data-skin="meridian"]) .public-site .content-band, :where(:root[data-skin="meridian"]) .public-site .feature-card, :where(:root[data-skin="meridian"]) .public-site .link-card, :where(:root[data-skin="meridian"]) .public-site .conversion-block, :where(:root[data-skin="meridian"]) .public-site .form-panel { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .route-card, :where(:root[data-skin="meridian"]) .public-site .news-card, :where(:root[data-skin="meridian"]) .public-site .topic-card, :where(:root[data-skin="meridian"]) .public-site .blog-mini-card, :where(:root[data-skin="meridian"]) .public-site .feature-card, :where(:root[data-skin="meridian"]) .public-site .link-card { padding: 20px; } :where(:root[data-skin="meridian"]) .public-site .blog-featured { border-radius: 12px; gap: 20px; padding: 28px; } :where(:root[data-skin="meridian"]) .public-site .blog-featured__cards { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .content-stack { gap: 20px; } :where(:root[data-skin="meridian"]) .public-site .content-band { gap: 24px; padding: 28px; } :where(:root[data-skin="meridian"]) .public-site .check-list { gap: 12px; margin: 0; padding: 0; } :where(:root[data-skin="meridian"]) .public-site .content-band .check-list li { border-radius: 8px; padding: 0 16px; } :where(:root[data-skin="meridian"]) .public-site .content-band__body { gap: 12px; margin-top: 16px; } :where(:root[data-skin="meridian"]) .public-site .content-band__body p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .content-band__subsections { gap: 0 28px; margin-top: 24px; } :where(:root[data-skin="meridian"]) .public-site .content-band__subsection { padding: 20px 0 20px; } :where(:root[data-skin="meridian"]) .public-site .content-band__subsection h3 { margin: 0 0 12px; } :where(:root[data-skin="meridian"]) .public-site .content-band__subsection p { margin: 12px 0 0; } :where(:root[data-skin="meridian"]) .public-site .content-band__port-list { gap: 8px; margin: 0; padding: 0; } :where(:root[data-skin="meridian"]) .public-site .content-band__port-list li { border-radius: 4px; padding: 8px 8px; } :where(:root[data-skin="meridian"]) .public-site .content-band--why-midtrans { gap: 28px; padding: 40px; } :where(:root[data-skin="meridian"]) .public-site .content-band--why-midtrans p:not(.kicker) { border-radius: 12px; margin-top: 16px; padding: 16px 20px; } :where(:root[data-skin="meridian"]) .public-site .content-band--why-midtrans .check-list { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .content-band--why-midtrans .check-list li { border-radius: 12px; padding: 12px 16px 12px 56px; } :where(:root[data-skin="meridian"]) .public-site .content-band--why-midtrans .check-list li::before { border-radius: 50%; } html:where([data-skin="meridian"])[dir="rtl"] .public-site .content-band--why-midtrans .check-list li { padding: 12px 56px 12px 16px; } :where(:root[data-skin="meridian"]) .public-site .content-band--visual { padding: 0; } :where(:root[data-skin="meridian"]) .public-site .section-visual__media { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .section-visual__copy { padding: 40px; } :where(:root[data-skin="meridian"]) .public-site .section-visual__copy::before, :where(:root[data-skin="meridian"]) .public-site .content-band:not(.content-band--visual)::before, :where(:root[data-skin="meridian"]) .public-site .conversion-block::before, :where(:root[data-skin="meridian"]) .public-site .form-panel::before, :where(:root[data-skin="meridian"]) .public-site .banner::before, :where(:root[data-skin="meridian"]) .public-site .link-card::before { border-radius: 999px; } :where(:root[data-skin="meridian"]) .public-site .content-expand { margin-top: 16px; } :where(:root[data-skin="meridian"]) .public-site .content-expand__toggle { border-radius: 999px; gap: 8px; padding: 0 12px; } :where(:root[data-skin="meridian"]) .public-site .content-expand p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .content-expand:not(.is-expanded) .content-expand__toggle { margin-top: 16px; } :where(:root[data-skin="meridian"]) .public-site .structured-content-stack { gap: 32px; } :where(:root[data-skin="meridian"]) .public-site .structured-group { border-radius: 12px; gap: 24px; padding: clamp(24px,4vw,40px); } :where(:root[data-skin="meridian"]) .public-site .structured-group__head { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .structured-group__head h2, :where(:root[data-skin="meridian"]) .public-site .structured-group__head p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .structured-tabs { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .structured-tabs button { border-radius: 4px; padding: 8px 16px; } :where(:root[data-skin="meridian"]) .public-site .structured-tab-panels article { padding: 24px; } :where(:root[data-skin="meridian"]) .public-site .structured-tab-panels h3, :where(:root[data-skin="meridian"]) .public-site .structured-tab-panels p { margin-top: 0; } :where(:root[data-skin="meridian"]) .public-site .structured-tab-panels ul, :where(:root[data-skin="meridian"]) .public-site .structured-accordion ul { gap: 8px; margin-bottom: 0; } :where(:root[data-skin="meridian"]) .public-site .structured-accordion { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .structured-accordion details { border-radius: 8px; } :where(:root[data-skin="meridian"]) .public-site .structured-accordion summary { padding: 16px 20px; } :where(:root[data-skin="meridian"]) .public-site .structured-accordion details>div { padding: 0 20px 20px; } :where(:root[data-skin="meridian"]) .public-site .structured-process { gap: 12px; margin: 0; padding: 0; } :where(:root[data-skin="meridian"]) .public-site .structured-process li { gap: 16px; padding: 16px 0; } :where(:root[data-skin="meridian"]) .public-site .structured-process li>span { border-radius: 50%; } :where(:root[data-skin="meridian"]) .public-site .structured-process h3, :where(:root[data-skin="meridian"]) .public-site .structured-process p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .structured-process p { margin-top: 4px; } :where(:root[data-skin="meridian"]) .public-site .structured-card-grid { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .structured-card-grid article { border-radius: 8px; padding: 20px; } :where(:root[data-skin="meridian"]) .public-site .structured-card-grid h3 { margin-top: 0; } :where(:root[data-skin="meridian"]) .public-site .feature-grid, :where(:root[data-skin="meridian"]) .public-site .link-grid { gap: 16px; } :where(:root[data-skin="meridian"]) .public-site .section--related-links { padding-top: 32px; } :where(:root[data-skin="meridian"]) .public-site .related-links-panel { border-radius: 12px; gap: 28px; padding: 28px; } :where(:root[data-skin="meridian"]) .public-site .related-links-panel .section-heading { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .link-card__icon { margin-inline-end: 12px; } :where(:root[data-skin="meridian"]) .public-site .link-card__arrow { border-radius: 50%; margin-inline-start: 16px; } :where(:root[data-skin="meridian"]) .public-site .conversion-block, :where(:root[data-skin="meridian"]) .public-site .form-panel { gap: 24px; padding: 28px; } :where(:root[data-skin="meridian"]) .public-site .conversion-steps { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .conversion-steps article { border-radius: 12px; gap: 8px; padding: 16px; } :where(:root[data-skin="meridian"]) .public-site .conversion-steps p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .conversion-block .conversion-actions { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .form-panel__intro { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .form-panel--quote { border-radius: 12px; gap: clamp(24px,3vw,40px); padding: clamp(24px,3vw,36px); } :where(:root[data-skin="meridian"]) .public-site .form-panel--quote .form-panel__intro { border-radius: 12px; gap: 16px; padding: 24px; } :where(:root[data-skin="meridian"]) .public-site .form-panel--quote .form-panel__intro .kicker { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .form-panel--quote .form-panel__intro h2 { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .form-panel--quote .form-panel__intro p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .form-panel--contact { gap: clamp(20px,3vw,36px); padding: clamp(24px,3vw,36px); } :where(:root[data-skin="meridian"]) .public-site .form-panel--contact .form-panel__intro { border-radius: 12px; padding: 20px; } :where(:root[data-skin="meridian"]) .public-site .form-panel--contact .form-panel__intro .kicker { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .form-panel--contact .form-panel__intro h2 { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .form-panel--contact .form-panel__intro p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .sample-form--contact { border-radius: 12px; padding: clamp(16px,2vw,24px); } :where(:root[data-skin="meridian"]) .public-site .sample-form--contact .sample-form__actions { padding-top: 16px; } :where(:root[data-skin="meridian"]) .public-site .quote-contact-strip { gap: 8px; padding: 16px 0; } :where(:root[data-skin="meridian"]) .public-site .quote-channel-button { border-radius: 8px; padding: 0 12px; } :where(:root[data-skin="meridian"]) .public-site .quote-stepper { gap: 12px; margin: 8px 0 0; padding: 0; } :where(:root[data-skin="meridian"]) .public-site .quote-stepper li { border-radius: 12px; gap: 12px; padding: 8px 12px; } :where(:root[data-skin="meridian"]) .public-site .quote-stepper span { border-radius: 999px; } :where(:root[data-skin="meridian"]) .public-site .sample-form { gap: 16px; } :where(:root[data-skin="meridian"]) .public-site .sample-form--quote { border-radius: 12px; padding: clamp(20px,2.7vw,28px); } :where(:root[data-skin="meridian"]) .public-site .quote-channel-strip { border-radius: 12px; gap: 4px; padding: 12px 16px; } :where(:root[data-skin="meridian"]) .public-site .sample-form__grid { gap: 16px 16px; } :where(:root[data-skin="meridian"]) .public-site .sample-form select { padding-inline-end: 40px; } :where(:root[data-skin="meridian"]) .public-site .sample-form--quote input, :where(:root[data-skin="meridian"]) .public-site .sample-form--quote select, :where(:root[data-skin="meridian"]) .public-site .sample-form--quote textarea { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .sample-form__consent { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .sample-form__actions, :where(:root[data-skin="meridian"]) .public-site .conversion-actions { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .sample-form--quote .sample-form__actions { padding-top: 16px; } :where(:root[data-skin="meridian"]) .public-site .sample-form__result { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .banner { border-radius: 12px; padding: 24px 28px; } :where(:root[data-skin="meridian"]) .public-site .site-footer { padding: 56px 0 20px; } :where(:root[data-skin="meridian"]) .public-site .footer-directory, :where(:root[data-skin="meridian"]) .public-site .footer-bottom { gap: 24px; } :where(:root[data-skin="meridian"]) .public-site .footer-brand { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .footer-directory nav { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .section--services-hub .services-hub { gap: 28px; } :where(:root[data-skin="meridian"]) .public-site .section--services-hub .services-hub__intro { padding-inline-start: 20px; } :where(:root[data-skin="meridian"]) .public-site .section--services-hub .solution-grid--services { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .section--services-hub .solution-grid--service-details { gap: 16px; } :where(:root[data-skin="meridian"]) .public-site .section--services-hub .solution-card--service-detail { gap: 12px; padding: 24px 20px 20px; } :where(:root[data-skin="meridian"]) .public-site .section--services-hub .solution-card--service-detail h2 { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .section--services-hub .solution-card--service-detail p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .section--services-hub .solution-card--service-detail .solution-card__cta { border-radius: 999px; gap: 8px; margin-top: auto; padding: 12px 16px; } :where(:root[data-skin="meridian"]) .public-site .solution-card--service { padding: 16px 12px; } :where(:root[data-skin="meridian"]) .public-site .trade-lane-hub .smart-network-map--embedded { margin: 0 0 36px; padding: 0; } :where(:root[data-skin="meridian"]) .public-site .smart-network-map__head { gap: 12px; margin: 0 0 20px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-map__head h2 { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .smart-network-map__head p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .smart-network-map__filters { gap: 8px; margin: 0 0 16px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-filter { border-radius: 999px; padding: 0 16px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-finder { border-radius: 4px; gap: 12px; margin: 0 auto 20px; padding: 16px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-finder label { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-finder select { border-radius: 4px; padding: 0 40px 0 12px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-map__layout { gap: 16px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-map__stage { border-radius: 4px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-map__controls { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-map__controls button { border-radius: 4px; padding: 0; } :where(:root[data-skin="meridian"]) .public-site .smart-network-map__credit { border-radius: 4px; gap: 8px; margin: 0; padding: 8px 8px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-map__credit-icons { gap: 4px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-map__country-tooltip { border-radius: 4px; padding: 4px 4px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-corridors__head h3 { margin: 8px 0 8px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-panel__badges { gap: 8px; margin: 12px 0; } :where(:root[data-skin="meridian"]) .public-site .network-map-badge { border-radius: 999px; padding: 4px 8px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-panel__note { margin-top: auto; padding: 12px 12px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-panel__quote { margin-top: 12px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-corridors { margin-top: 28px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-corridors__head { margin-bottom: 12px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-corridors__grid { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-card { border-radius: 4px; gap: 8px; padding: 16px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-card p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .smart-network-card__action { gap: 8px; margin-top: auto; } :where(:root[data-skin="meridian"]) .public-site .insight-card { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .faq-list--designed { gap: 16px; } :where(:root[data-skin="meridian"]) .public-site .faq-intro { border-radius: 12px; gap: 12px; padding: 28px; } :where(:root[data-skin="meridian"]) .public-site .faq-intro h2 { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .faq-intro h2::after { border-radius: 999px; margin-top: 16px; } :where(:root[data-skin="meridian"]) .public-site .faq-intro p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .faq-list--designed .faq-grid { border-radius: 12px; gap: 12px; padding: 16px; } :where(:root[data-skin="meridian"]) .public-site .faq-list--designed .faq-item { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .faq-list--designed .faq-item::before { border-radius: 999px; } :where(:root[data-skin="meridian"]) .public-site .faq-list--designed .faq-item summary { padding: 16px; } :where(:root[data-skin="meridian"]) .public-site .faq-list--designed .faq-item p { padding: 0 16px 16px; } :where(:root[data-skin="meridian"]) .template-home.public-site .section { padding-block: var(--home-section-space); } :where(:root[data-skin="meridian"]) .template-home.public-site .section-heading, :where(:root[data-skin="meridian"]) .template-home.public-site .smart-network-map__head { margin-bottom: clamp(24px,3vw,36px); } :where(:root[data-skin="meridian"]) .template-home.public-site .content-stack { gap: clamp(24px,3vw,40px); } :where(:root[data-skin="meridian"]) .template-home.public-site .content-band, :where(:root[data-skin="meridian"]) .template-home.public-site .conversion-block, :where(:root[data-skin="meridian"]) .template-home.public-site .faq-list--designed .faq-grid, :where(:root[data-skin="meridian"]) .template-home.public-site .smart-network-finder { border-radius: var(--home-panel-radius); } :where(:root[data-skin="meridian"]) .template-home.public-site .section-visual__copy { padding: clamp(32px,4vw,52px); } :where(:root[data-skin="meridian"]) .template-home.public-site .section--operational-content .kicker { margin-bottom: 8px; } :where(:root[data-skin="meridian"]) .template-home.public-site .section--operational-content h2 { margin-bottom: 16px; } :where(:root[data-skin="meridian"]) .template-home.public-site .section--operational-content .content-band--why-midtrans { border-radius: var(--home-panel-radius); } :where(:root[data-skin="meridian"]) .public-site .brand-name { margin-inline-end: 0.22em; } :where(:root[data-skin="meridian"]) .public-site .footer-directory a .brand-name, :where(:root[data-skin="meridian"]) .public-site .mega-panel a .brand-name { margin-inline-start: 0.28em; } :where(:root[data-skin="meridian"]) .public-site .site-footer { padding-block: 64px 28px; } :where(:root[data-skin="meridian"]) .public-site .footer-brand { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .footer-directory { gap: 40px 36px; margin: 0; padding: 0; } :where(:root[data-skin="meridian"]) .public-site .footer-bottom { gap: 20px; padding-block: 4px 0; } :where(:root[data-skin="meridian"]) .public-site .site-footer a:focus-visible, :where(:root[data-skin="meridian"]) .public-site .site-footer summary:focus-visible { border-radius: 4px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero { padding-block: 0; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero__grid { gap: clamp(40px,4.4vw,64px); padding-block: 80px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero__copy { padding: 0; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero .eyebrow { border-radius: 0; margin-bottom: 16px; padding: 0 0 0 16px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero h1 { margin-bottom: 24px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero .lede { margin-bottom: 28px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero-feature-pills { gap: 8px; margin-bottom: 28px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero-feature-pills span { padding-inline: 12px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero__actions { gap: 12px; margin-bottom: 36px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero-visual, :where(:root[data-skin="meridian"]) .template-home.public-site .hero-visual--photo { border-radius: 12px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero-stat-strip { gap: 12px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero-stat-card { border-radius: 8px; gap: 4px; padding: 12px 16px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern { padding-block: 0; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero__grid { gap: clamp(40px,4.4vw,64px); padding-block: 80px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero__copy { padding: 0; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .eyebrow { border-radius: 0; margin-bottom: 16px; padding: 0 0 0 16px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern h1 { margin-bottom: 24px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .lede { margin-bottom: 28px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-feature-pills { gap: 8px; margin-bottom: 28px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-feature-pills span, :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-feature-pills button { padding-inline: 12px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero__actions { gap: 12px; margin-bottom: 36px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-visual, :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-visual--photo { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-operations-board { gap: 12px; padding: 24px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-operations-board__header { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-operations-board__modes { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-operations-board__modes a { padding: 4px 8px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-operations-board__cards { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-operations-card { gap: 8px; padding: 12px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-operations-card__icon { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-operations-card__body { gap: 4px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-operations-board__signals { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-operations-signal { padding: 8px; } :where(:root[data-skin="meridian"]) .public-site .site-footer { padding: 56px 0 20px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference { gap: 32px 32px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-column h3 { margin: 0 0 8px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-column__rule { border-radius: 999px; margin-bottom: 20px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference .footer-brand { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference .footer-brand small { margin-top: 4px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-column--brand p { margin: 12px 0 0; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-links { gap: 8px 8px; margin-top: 16px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-stores { margin-top: 16px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-stores__title { margin-bottom: 12px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-stores__grid { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-store-badge { border-radius: 8px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-office-list { gap: 28px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-office h4 { margin: 0 0 12px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-office p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-office a { margin-top: 8px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-fiata { border-radius: 12px; gap: 8px; padding: 16px 20px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-socials { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-socials a { border-radius: 999px; } :where(:root[data-skin="meridian"]) .public-site .footer-bottom { margin-top: 28px; padding-top: 16px; } :where(:root[data-skin="meridian"]) .mira-fullscreen-overlay { padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); } :where(:root[data-skin="meridian"]) .public-site .hero--error .hero__actions { margin-top: 24px; } :where(:root[data-skin="meridian"]) .section--photo-gallery { padding-block: 32px 8px; } :where(:root[data-skin="meridian"]) .photo-gallery__intro { margin: 0 0 24px; } :where(:root[data-skin="meridian"]) .photo-gallery { gap: 20px; margin: 0; padding: 0; } :where(:root[data-skin="meridian"]) .photo-gallery__item { margin: 0; } :where(:root[data-skin="meridian"]) .photo-gallery__figure { border-radius: var(--radius); margin: 0; } :where(:root[data-skin="meridian"]) .photo-gallery__caption { padding: 12px 16px 16px; } :where(:root[data-skin="meridian"]) .hero__actions .button, :where(:root[data-skin="meridian"]) .public-site .hero__actions .button { padding-block: 8px; } :where(:root[data-skin="meridian"]) .template-home .hero--home { padding-block: clamp(4.5rem, 8vw, 8rem); } :where(:root[data-skin="meridian"]) .template-home .hero--home .hero__grid { gap: clamp(2rem, 5vw, 5rem); } :where(:root[data-skin="meridian"]) .template-home .hero--home .hero-feature-pills { gap: 0.75rem; } :where(:root[data-skin="meridian"]) .template-home .hero--home .hero__actions { gap: 0.75rem; margin-top: 1.5rem; } :where(:root[data-skin="meridian"]) .template-home .hero--home .button { padding-inline: 1.25rem; border-radius: 999px; } :where(:root[data-skin="meridian"]) .template-home .hero-stat-strip { margin-top: clamp(1.75rem, 3vw, 2.5rem); } :where(:root[data-skin="meridian"]) .template-home .section--conversion .conversion-block { border-radius: 12px; } :where(:root[data-skin="meridian"]) .floating-actions { gap: 8px; } :where(:root[data-skin="meridian"]) .floating-actions a { border-radius: 12px; } :where(:root[data-skin="meridian"]) .floating-actions__label { padding-inline-end: 0; } :where(:root[data-skin="meridian"]) .floating-actions a:hover .floating-actions__label, :where(:root[data-skin="meridian"]) .floating-actions a:focus-visible .floating-actions__label { padding-inline-end: 16px; } :where(:root[data-skin="meridian"]) .site-header, :where(:root[data-skin="meridian"]) .site-header__inner, :where(:root[data-skin="meridian"]) .top-bar, :where(:root[data-skin="meridian"]) .top-bar__inner, :where(:root[data-skin="meridian"]) .main-nav, :where(:root[data-skin="meridian"]) .nav-item, :where(:root[data-skin="meridian"]) .nav-trigger, :where(:root[data-skin="meridian"]) .mega-panel, :where(:root[data-skin="meridian"]) .mega-panel__intro, :where(:root[data-skin="meridian"]) .mega-panel__overview, :where(:root[data-skin="meridian"]) .mega-panel__section, :where(:root[data-skin="meridian"]) .mega-panel a, :where(:root[data-skin="meridian"]) .mobile-menu, :where(:root[data-skin="meridian"]) .mobile-menu nav, :where(:root[data-skin="meridian"]) .mobile-menu summary, :where(:root[data-skin="meridian"]) .mobile-menu__languages, :where(:root[data-skin="meridian"]) .mobile-menu__language, :where(:root[data-skin="meridian"]) .mobile-menu__group summary, :where(:root[data-skin="meridian"]) .mobile-menu__child { border-radius: 0; } :where(:root[data-skin="meridian"]) p.eyebrow:has(time) { gap: .35em; } :where(:root[data-skin="meridian"]) .app-download-card__badge:has(img) { padding: 8px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .breadcrumbs { padding-bottom: 12px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero__grid { gap: clamp(28px, 3.6vw, 48px); padding-block: clamp(52px, 6vw, 72px); } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero-feature-pills { gap: 8px; margin-bottom: 24px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero-stat-strip { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero-stat-card { padding: 12px 16px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero-visual-stack { gap: 16px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero-visual, :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero-visual--photo { border-radius: 12px; } :where(:root[data-skin="meridian"]) .sample-form__actions .button { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .hs-lookup-shell { border-radius: 12px !important; } :where(:root[data-skin="meridian"]) .public-site .hs-lookup-heading { border-radius: 12px !important; padding: clamp(20px, 3vw, 32px) !important; } :where(:root[data-skin="meridian"]) .public-site .hs-lookup-heading .hs-source-notice { margin-top: 8px !important; } :where(:root[data-skin="meridian"]) .public-site .hs-table-form { border-radius: 12px !important; padding: clamp(16px, 2.4vw, 24px) !important; } :where(:root[data-skin="meridian"]) .public-site .hs-table-form__field input, :where(:root[data-skin="meridian"]) .public-site .hs-table-form__field select { border-radius: 12px !important; } :where(:root[data-skin="meridian"]) .public-site .hs-table-form__actions .button { border-radius: 12px !important; } :where(:root[data-skin="meridian"]) .public-site .hs-table-status { border-radius: 12px !important; } :where(:root[data-skin="meridian"]) .public-site .hs-table-wrap { border-radius: 12px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft:has(.link-grid > article.link-card[id]) { padding-block: clamp(40px,5vw,72px) !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft:has(.link-grid > article.link-card[id]) .section-heading { border-radius: 12px !important; margin-bottom: 20px !important; padding: clamp(20px,3vw,32px) !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid:has(article.link-card[id]) { gap: 16px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] { border-radius: 12px !important; padding: 20px 20px 20px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id]::before { border-radius: 999px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] .link-card__label { margin: 0 0 8px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] p { margin: 0 !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] main>.section:not(.section--soft):has(.service-selector) .service-selector { border-radius: 12px !important; gap: 8px !important; margin-top: 20px !important; padding: 8px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] main>.section:not(.section--soft):has(.service-selector) .service-selector .button { border-radius: 12px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] main>.section:not(.section--soft):has(.trust-panel) { padding-block: clamp(36px,4.4vw,56px) !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .trust-panel { border-radius: 12px !important; padding: clamp(20px,3vw,36px) !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft:has(.link-grid > article.link-card[id]) { padding-block: clamp(40px,5vw,72px) !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft:has(.link-grid > article.link-card[id]) .section-heading { border-radius: 12px !important; margin-bottom: 20px !important; padding: clamp(20px,3vw,32px) !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid:has(article.link-card[id]) { gap: 16px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] { border-radius: 12px !important; padding: 20px 20px 20px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id]::before { border-radius: 999px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] .link-card__label { margin: 0 0 8px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] p { margin: 0 !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] main>.section:not(.section--soft):has(.service-selector) .service-selector { border-radius: 12px !important; gap: 8px !important; margin-top: 20px !important; padding: 8px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] main>.section:not(.section--soft):has(.service-selector) .service-selector .button { border-radius: 12px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] main>.section:not(.section--soft):has(.trust-panel) { padding-block: clamp(36px,4.4vw,56px) !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .trust-panel { border-radius: 12px !important; padding: clamp(20px,3vw,36px) !important; } :where(:root[data-skin="meridian"]) .public-site .sample-form__actions { gap: 12px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--related-links .section-heading { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] { gap: 16px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] .link-card__label { border-radius: 12px; padding: 12px 12px; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] p { margin: 0 !important; } :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-service,.template-trade-lane).public-site .section--related-links { padding-block: 40px !important; } :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-service,.template-trade-lane).public-site .section--related-links .related-links-panel { gap: 24px; } :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-service,.template-trade-lane).public-site .section--related-links .section-heading { gap: 8px; } :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-service,.template-trade-lane).public-site .section--related-links .section-heading h2 { margin-bottom: 0; } :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-service,.template-trade-lane).public-site .section--related-links .section-heading p:not(.kicker) { margin: 0; } :where(:root[data-skin="meridian"]) .template-services-landing.public-site .section--related-links .link-grid { gap: 12px; } :where(:root[data-skin="meridian"]) .template-service.public-site .section--related-links .link-grid { gap: 12px; } :where(:root[data-skin="meridian"]) .template-trade-lane.public-site .section--related-links .link-grid { gap: 12px; } :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-service,.template-trade-lane).public-site .section--related-links .link-card { padding: 16px 20px; } :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-service,.template-trade-lane).public-site .section--related-links .link-card .link-card__label { margin-bottom: 0; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .service-selector { border-radius: 12px !important; gap: 8px !important; margin-top: 20px !important; padding: 8px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .service-selector .button { border-radius: 12px !important; padding-inline: 16px !important; } :where(:root[data-skin="meridian"]) .public-site .hero--contact .hero-promise { gap: 8px; margin: 4px 0 16px; } :where(:root[data-skin="meridian"]) .public-site .hero--contact .hero-promise::before { border-radius: 50%; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .hs-lookup-shell { gap: 20px; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .hs-lookup-shell > h3 { margin: 8px 0 0; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .section--operational-content .content-band { gap: 16px; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .section--operational-content .content-band .check-list { gap: 8px; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .section--operational-content .content-band .check-list { gap: 8px; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .section--operational-content .content-band .check-list { gap: 8px; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .section--operational-content .content-band .check-list > li, :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .section--operational-content .content-band .check-list:has(> li:nth-child(10)) > li { padding: 8px 12px; border-radius: 999px; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .section--operational-content .content-band:nth-of-type(2) .check-list { gap: 0 32px; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .section--operational-content .content-band:nth-of-type(2) .check-list > li { border-radius: 0; padding: 8px 4px; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .section--hs-lookup .content-band { gap: 16px; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .section--hs-lookup .content-band .check-list { gap: 8px; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .section--hs-lookup .content-band .check-list > li { padding: 8px 12px; border-radius: 999px; } :where(:root[data-skin="meridian"]) .public-site .content-band .check-list li:has(> bdi) { padding-block: 12px; } :where(:root[data-skin="meridian"]) .public-site .hero-feature-pills span:has(> bdi) { column-gap: .3em; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .rates-filter { gap: 8px; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .rates-filter__button { margin: 0; padding: 8px 12px; border-radius: 999px; } :where(:root[data-skin="meridian"]) .public-site .content-band:not(.content-band--why-midtrans):not(.content-band--visual):has(> .check-list) { gap: 16px; } :where(:root[data-skin="meridian"]) .public-site .content-band:not(.content-band--why-midtrans):not(.content-band--visual) > .check-list { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .content-band:not(.content-band--why-midtrans):not(.content-band--visual) > .check-list > li { padding: 8px 12px; border-radius: 999px; } :where(:root[data-skin="meridian"]) .public-site .content-stack:has(> .hs-table-wrap) { gap: 20px; } :where(:root[data-skin="meridian"]) .public-site .content-stack:has(> .hs-table-wrap) > .section-heading { margin-bottom: 0; } :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-lookup-shell { gap: 16px; } :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-table-form { gap: 12px; } :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-table-form__grid { gap: 12px; } :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-table-form__actions { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .structured-group--cards:has(> .structured-card-grid > article:only-child):not(:has(> :nth-child(3))) > .structured-card-grid > article { padding: 24px; border-radius: 12px; gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .structured-group--cards:has(> .structured-card-grid > article:only-child):not(:has(> :nth-child(3))) > .structured-card-grid > article > h3, :where(:root[data-skin="meridian"]) .public-site .structured-group--cards:has(> .structured-card-grid > article:only-child):not(:has(> :nth-child(3))) > .structured-card-grid > article > p { margin: 0; } :where(:root[data-skin="meridian"]) .public-site .structured-group--cards:has(> .structured-card-grid > article:only-child):not(:has(> :nth-child(3))) > .structured-card-grid > article > a:last-child { gap: 8px; margin-top: 8px; padding: 0 20px; border-radius: 8px; } :where(:root[data-skin="meridian"]) .floating-locations { padding: 12px; border-radius: 12px; } :where(:root[data-skin="meridian"]) .floating-locations__head { gap: 12px; padding: 0 4px 8px; } :where(:root[data-skin="meridian"]) .floating-locations__close { padding: 0; border-radius: 8px; } :where(:root[data-skin="meridian"]) .floating-locations__list { gap: 8px; margin: 0; padding: 0; } :where(:root[data-skin="meridian"]) .floating-locations__list li { margin: 0; padding: 0; } :where(:root[data-skin="meridian"]) .floating-locations__list a { gap: 12px; padding: 8px 12px; border-radius: 8px; } :where(:root[data-skin="meridian"]) .floating-locations__pin { border-radius: 8px; } :where(:root[data-skin="meridian"]) .floating-locations__text { gap: 4px; } :where(:root[data-skin="meridian"]) .template-home.public-site .section--app-downloads:has(.app-downloads--compact) { padding-bottom: 24px; } :where(:root[data-skin="meridian"]) .template-home.public-site .section.home-duo { padding-top: 0; } :where(:root[data-skin="meridian"]) .home-duo__grid { gap: 24px; } :where(:root[data-skin="meridian"]) .home-duo__card { border-radius: var(--radius); gap: 20px; padding: 28px 32px; } :where(:root[data-skin="meridian"]) .home-duo__card h2 { margin: 0 0 8px; } :where(:root[data-skin="meridian"]) .home-duo__card p:not(.kicker) { margin: 0; } :where(:root[data-skin="meridian"]) .home-duo__actions { gap: 12px; } @media (min-width: 1200px) { :where(:root[data-skin="meridian"]) .public-site .site-header__inner { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .main-nav { gap: 0; } :where(:root[data-skin="meridian"]) .public-site .nav-trigger { padding-inline: 8px; } :where(:root[data-skin="meridian"]) .public-site .header-actions { gap: 4px; } :where(:root[data-skin="meridian"]) .public-site .header-actions .button { padding-inline: 8px; } } @media (max-width: 760px) { :where(:root[data-skin="meridian"]) .public-site .hs-lookup-shell { border-radius: 12px; padding: 16px; } :where(:root[data-skin="meridian"]) .public-site .hs-results-table tr { border-radius: 12px; margin-bottom: 12px; padding: 8px 12px; } :where(:root[data-skin="meridian"]) .public-site .hs-results-table td { gap: 8px; padding: 8px 0; } :where(:root[data-skin="meridian"]) .public-site .section--hs-operational { padding-bottom: 28px; padding-top: 28px; } :where(:root[data-skin="meridian"]) .public-site .section--hs-operational .content-band { gap: 12px; padding: 16px; } :where(:root[data-skin="meridian"]) .template-home.public-site .smart-network-map__head { margin-inline: 0; } :where(:root[data-skin="meridian"]) .template-home.public-site .related-links-panel { gap: 20px; padding: 24px 20px; } :where(:root[data-skin="meridian"]) .template-home.public-site .banner { gap: 20px; padding: 24px 20px; } :where(:root[data-skin="meridian"]) .template-home.public-site .conversion-block { gap: 16px; margin-inline: 0; padding: 24px 20px; } :where(:root[data-skin="meridian"]) .template-home.public-site .site-footer { padding: 44px 0 32px; } :where(:root[data-skin="meridian"]) .template-home.public-site .footer-directory { gap: 24px 16px; padding-block: 24px; } :where(:root[data-skin="meridian"]) .template-home.public-site .footer-directory nav { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hs-results-table tr { padding: 4px 12px; margin-bottom: 8px; } :where(:root[data-skin="meridian"]) .public-site .hs-results-table td { padding: 8px 0; padding-inline-start: calc(40% + 8px); } } @media (max-width: 860px) { :where(:root[data-skin="meridian"]) .tool-embed-shell { border-radius: 12px; padding: 20px; } } @media (max-width: 980px) { :where(:root[data-skin="meridian"]) .about-brief--english .about-brief__copy--latin { padding: clamp(28px,6vw,44px); } :where(:root[data-skin="meridian"]) .about-brief--arabic .about-brief__copy--rtl { padding: clamp(28px,6vw,44px); } :where(:root[data-skin="meridian"]) .action-card, :where(:root[data-skin="meridian"]) .action-card:first-child, :where(:root[data-skin="meridian"]) .action-card:last-child { border-radius: var(--radius); } :where(:root[data-skin="meridian"]) .footer-directory { margin-block: 4px; padding-bottom: 4px; padding-top: 4px; } :where(:root[data-skin="meridian"]) .public-site .hero { padding-top: 8px; } :where(:root[data-skin="meridian"]) .public-site .hero__grid { gap: 20px; } :where(:root[data-skin="meridian"]) .public-site .hero__copy { padding: 20px 0 4px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board { gap: 16px; padding: 28px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-card { gap: 12px; padding: 16px; } :where(:root[data-skin="meridian"]) .public-site .action-hub { margin-top: 0; padding-top: 24px; } :where(:root[data-skin="meridian"]) .public-site .footer-directory { gap: 32px 28px; } } @media (max-width: 560px) { :where(:root[data-skin="meridian"]) .section--about-brief--arabic { padding-block: 36px; } :where(:root[data-skin="meridian"]) .section--conversion .conversion-block { padding: 1.25rem; border-radius: 12px; } :where(:root[data-skin="meridian"]) .section--conversion .conversion-steps { gap: 0.75rem; } :where(:root[data-skin="meridian"]) .section--conversion .conversion-steps article { padding: 1rem; } :where(:root[data-skin="meridian"]) .template-home .hero-operations-board--home { padding: 1rem; } :where(:root[data-skin="meridian"]) .template-home .section--conversion .conversion-block { border-radius: 12px; } :where(:root[data-skin="meridian"]) .template-home .section--conversion .conversion-block { padding: 1.25rem; } :where(:root[data-skin="meridian"]) .template-home .section--conversion .conversion-steps { gap: 0.75rem; } :where(:root[data-skin="meridian"]) .template-home .section--conversion .conversion-steps article { padding: 1rem; } :where(:root[data-skin="meridian"]) .template-home .section--conversion .conversion-actions { gap: 0.75rem; } :where(:root[data-skin="meridian"]) .template-home .section--conversion .conversion-actions .button, :where(:root[data-skin="meridian"]) .template-home .section--conversion .conversion-actions a.button { padding-inline: 0.75rem; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .breadcrumbs { padding-bottom: 8px; padding-top: 12px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero__grid { gap: 24px; padding-block: 28px 28px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .eyebrow { margin-bottom: 12px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern h1 { margin-bottom: 16px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .lede { margin-bottom: 20px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero-feature-pills { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero-stat-strip { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero-stat-card { border-radius: 12px; padding: 12px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero-visual, :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero-visual--photo { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .section { padding-block: 48px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero__grid { gap: 16px !important; padding-block: 24px 24px !important; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern h1 { margin-bottom: 12px !important; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .lede { margin-bottom: 16px !important; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero-feature-pills { gap: 8px !important; margin-bottom: 16px !important; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero-feature-pills span, :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero-feature-pills button { padding-block: 8px !important; } } @media (max-width: 1200px) { :where(:root[data-skin="meridian"]) .site-header__inner { gap: 12px; } :where(:root[data-skin="meridian"]) .mobile-menu summary { padding: 8px 16px; } } @media (min-width: 981px) and (max-width: 1120px) { :where(:root[data-skin="meridian"]) .site-header__inner { gap: 8px; } :where(:root[data-skin="meridian"]) .main-nav { gap: 8px; } :where(:root[data-skin="meridian"]) .header-actions { gap: 8px; } :where(:root[data-skin="meridian"]) .header-actions .button { padding: 0 12px; } } @media (max-width: 680px) { :where(:root[data-skin="meridian"]) .container { padding: 0 16px; } :where(:root[data-skin="meridian"]) .home-network-map-link__inner { gap: 20px; } :where(:root[data-skin="meridian"]) .top-bar__inner { gap: 4px; padding-bottom: 8px; padding-top: 8px; } :where(:root[data-skin="meridian"]) .hero { padding-bottom: 48px; } :where(:root[data-skin="meridian"]) .banner, :where(:root[data-skin="meridian"]) .conversion-block, :where(:root[data-skin="meridian"]) .form-panel { padding: 24px; } :where(:root[data-skin="meridian"]) .app-downloads { gap: 20px; } :where(:root[data-skin="meridian"]) .app-download-card { padding: 12px; } :where(:root[data-skin="meridian"]) .footer-directory { margin-block: 4px; padding-bottom: 4px; padding-top: 4px; } :where(:root[data-skin="meridian"]) .site-footer { padding-bottom: 96px; } :where(:root[data-skin="meridian"]) .footer-brand { gap: 12px; } :where(:root[data-skin="meridian"]) .footer-bottom { gap: 8px; padding-block: 4px; } :where(:root[data-skin="meridian"]) .footer-bottom__copy { gap: 4px; } :where(:root[data-skin="meridian"]) .faq-item summary { padding: 16px; } :where(:root[data-skin="meridian"]) .faq-item p { padding: 0 16px 16px; } :where(:root[data-skin="meridian"]) .home-duo__card { padding: 20px 20px; } } @media (max-width: 420px) { :where(:root[data-skin="meridian"]) .site-header__inner { gap: 8px; } :where(:root[data-skin="meridian"]) .mobile-menu summary { padding: 8px 12px; } :where(:root[data-skin="meridian"]) .app-download-card { gap: 8px; } :where(:root[data-skin="meridian"]) .template-home.public-site .container { padding-inline: 12px; } } @media (max-width: 700px) { html:where([data-skin="meridian"])[dir="rtl"] .public-site .hero-operations-board--arabic-about { padding: 20px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero__grid { gap: 32px; padding-block: 56px 48px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .eyebrow { margin-bottom: 16px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern h1 { margin-bottom: 20px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .lede { margin-bottom: 24px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero-feature-pills { gap: 8px; margin-bottom: 24px; } :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero__actions { gap: 12px; margin-bottom: 28px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero__grid { gap: 32px; padding-block: 56px 48px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero .eyebrow { margin-bottom: 16px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero h1 { margin-bottom: 20px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero .lede { margin-bottom: 24px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero-feature-pills { gap: 8px; margin-bottom: 24px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero-feature-pills span { padding-inline: 12px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero__actions { gap: 12px; margin-bottom: 28px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero__support-link { padding: 4px 0 0; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero-stat-strip { gap: 8px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero-stat-card { column-gap: 12px; padding: 12px 16px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero-operations-board--home { gap: 12px; padding: 20px 16px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero-operations-board--home .hero-operations-board__cards { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board { gap: 12px; padding: 20px 16px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board__cards { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board__signals { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .section-visual__copy, :where(:root[data-skin="meridian"]) .template-home.public-site .section-visual__copy { padding: 24px 20px 28px; } :where(:root[data-skin="meridian"]) .public-site .section--related-links { padding-top: 24px; } :where(:root[data-skin="meridian"]) .public-site .related-links-panel, :where(:root[data-skin="meridian"]) .template-home.public-site .related-links-panel { gap: 16px; margin-inline: 0; padding: 20px 16px; } :where(:root[data-skin="meridian"]) .public-site .section--related-links .link-grid, :where(:root[data-skin="meridian"]) .template-home.public-site .related-links-panel .link-grid { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .link-card { padding: 16px 16px; } :where(:root[data-skin="meridian"]) .public-site .conversion-block, :where(:root[data-skin="meridian"]) .template-home.public-site .conversion-block { gap: 16px; margin-inline: 0; padding: 24px 16px; } :where(:root[data-skin="meridian"]) .public-site .page-cta { gap: 16px !important; margin-inline: 0 !important; padding: 24px 16px !important; } :where(:root[data-skin="meridian"]) .public-site .page-cta .hero__actions { gap: 12px !important; } :where(:root[data-skin="meridian"]) .public-site .related-links-panel { gap: 16px !important; margin-inline: 0 !important; padding: 20px 16px !important; } :where(:root[data-skin="meridian"]) .public-site .related-links-panel .section-heading { gap: 8px !important; } :where(:root[data-skin="meridian"]) .public-site .section--related-links .link-grid, :where(:root[data-skin="meridian"]) .public-site .related-links-panel .link-grid { gap: 12px !important; } :where(:root[data-skin="meridian"]) .public-site .link-card { border-radius: 12px !important; gap: 12px !important; padding: 16px 16px !important; } :where(:root[data-skin="meridian"]) .public-site .link-card__arrow { margin-inline-start: 8px !important; } :where(:root[data-skin="meridian"]) .public-site .conversion-block { gap: 16px !important; margin-inline: 0 !important; padding: 24px 16px !important; } :where(:root[data-skin="meridian"]) .public-site .conversion-steps article { padding: 16px !important; } :where(:root[data-skin="meridian"]) .public-site .content-band .check-list, :where(:root[data-skin="meridian"]) .public-site .check-list { gap: 8px !important; padding: 0 !important; } :where(:root[data-skin="meridian"]) .public-site .content-band .check-list li, :where(:root[data-skin="meridian"]) .public-site .check-list li { border-radius: 12px !important; padding: 12px 16px !important; } :where(:root[data-skin="meridian"]) .public-site .content-band__after-list { margin-top: 32px !important; } :where(:root[data-skin="meridian"]) .public-site .section--soft .form-panel, :where(:root[data-skin="meridian"]) .public-site .section--soft .sample-form, :where(:root[data-skin="meridian"]) .public-site .section--soft .content-band { margin-inline: 0 !important; padding: 24px 16px !important; } :where(:root[data-skin="meridian"]) .public-site .section--soft .form-panel--quote { gap: 16px !important; padding: 16px !important; } :where(:root[data-skin="meridian"]) .public-site .form-panel--quote .form-panel__intro { border-radius: 12px; padding: 20px; } :where(:root[data-skin="meridian"]) .public-site .quote-contact-strip { gap: 8px; padding: 12px 0; } :where(:root[data-skin="meridian"]) .public-site .quote-stepper { gap: 8px; margin-top: 4px; } :where(:root[data-skin="meridian"]) .public-site .quote-stepper li { border-radius: 8px; } :where(:root[data-skin="meridian"]) .public-site .section--soft .sample-form--quote { border-radius: 12px !important; padding: 16px !important; } :where(:root[data-skin="meridian"]) .public-site .quote-channel-strip { border-radius: 8px; padding: 12px; } :where(:root[data-skin="meridian"]) .public-site .hs-table-form__grid, :where(:root[data-skin="meridian"]) .public-site .hs-table-form__actions { gap: 12px !important; } :where(:root[data-skin="meridian"]) .public-site .hs-lookup-shell { border-radius: 12px !important; padding: 16px !important; } :where(:root[data-skin="meridian"]) .public-site .hs-lookup-heading { border-radius: 12px !important; padding: 20px 16px !important; } :where(:root[data-skin="meridian"]) .public-site .hs-results-table tr { border-radius: 12px !important; padding: 8px 12px !important; } } @media (max-width: 720px) { :where(:root[data-skin="meridian"]) .public-site .structured-tabs { padding-bottom: 4px; padding-inline-end: 12px; } :where(:root[data-skin="meridian"]) .public-site .container { padding: 0 16px; } :where(:root[data-skin="meridian"]) .public-site .content-band, :where(:root[data-skin="meridian"]) .public-site .banner { padding: 24px; } :where(:root[data-skin="meridian"]) .public-site .section-visual__copy { padding: 28px 24px; } :where(:root[data-skin="meridian"]) .public-site .faq-list--designed .faq-grid { padding: 12px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board { gap: 12px; padding: 24px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board__cards { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-map__layout { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-card { border-radius: 12px; padding: 12px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-card__icon, :where(:root[data-skin="meridian"]) .public-site .hero-operations-signal__icon { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .action-hub { margin-top: 0; } :where(:root[data-skin="meridian"]) .public-site .action-card, :where(:root[data-skin="meridian"]) .public-site .action-card:first-child, :where(:root[data-skin="meridian"]) .public-site .action-card:last-child { border-radius: 12px; } } @media (max-width: 840px) { :where(:root[data-skin="meridian"]) .public-site .related-links-panel { padding: 24px; } } @media (max-width: 520px) { :where(:root[data-skin="meridian"]) .public-site .section--services-hub .solution-card--service-detail { padding: 20px 16px 16px; } :where(:root[data-skin="meridian"]) .template-home.public-site .content-stack { gap: 20px; } :where(:root[data-skin="meridian"]) .template-home.public-site .section-visual__copy { padding: 24px 20px 28px; } :where(:root[data-skin="meridian"]) .template-home.public-site .section--operational-content h2 { margin-bottom: 12px; } :where(:root[data-skin="meridian"]) .public-site .section { padding: 44px 0; } :where(:root[data-skin="meridian"]) .public-site .hero { padding-top: 0; } :where(:root[data-skin="meridian"]) .public-site .hero__grid { gap: 16px; padding-top: 0; } :where(:root[data-skin="meridian"]) .public-site .hero__copy { padding: 28px 0 8px; } :where(:root[data-skin="meridian"]) .public-site .hero .eyebrow { border-radius: 12px; padding: 8px 12px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board { gap: 12px; padding: 20px 16px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board__modes { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board__modes a { padding: 8px 8px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-card { padding: 12px; } :where(:root[data-skin="meridian"]) .public-site .hero-operations-board__signals { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .content-band, :where(:root[data-skin="meridian"]) .public-site .banner, :where(:root[data-skin="meridian"]) .public-site .smart-network-finder { border-radius: 12px; } :where(:root[data-skin="meridian"]) .public-site .content-band, :where(:root[data-skin="meridian"]) .public-site .banner { padding: 20px 16px; } :where(:root[data-skin="meridian"]) .public-site .content-band--visual { padding: 0; } :where(:root[data-skin="meridian"]) .public-site .section-visual__copy { padding: 28px 24px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-map__filters { padding-bottom: 4px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-finder { padding: 16px; } :where(:root[data-skin="meridian"]) .public-site .smart-network-panel__badges { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .network-map-badge { padding: 4px 8px; } :where(:root[data-skin="meridian"]) .public-site .conversion-block { gap: 16px; margin-inline: 16px; padding: 20px 16px; } } @media (max-width: 1180px) { :where(:root[data-skin="meridian"]) .public-site .hero--home-pattern .hero__grid { gap: 48px; padding-block: 80px 64px; } :where(:root[data-skin="meridian"]) .template-home.public-site .hero__grid { gap: 48px; padding-block: 80px 64px; } } @media (max-width: 767px) { :where(:root[data-skin="meridian"]) .public-site .site-footer { padding-block: 40px 24px; } :where(:root[data-skin="meridian"]) .public-site .footer-directory { margin-top: 4px; padding: 0; } :where(:root[data-skin="meridian"]) .public-site .footer-bottom { gap: 16px; padding-top: 8px; } :where(:root[data-skin="meridian"]) .public-site .site-footer { padding-top: 40px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference { gap: 28px; } } @media (max-width: 389px) { :where(:root[data-skin="meridian"]) .public-site .site-footer .container { padding-inline: 16px; } :where(:root[data-skin="meridian"]) .public-site .site-footer { padding-top: 36px; } :where(:root[data-skin="meridian"]) .public-site .footer-brand { gap: 8px; } } @media (max-width: 620px) { :where(:root[data-skin="meridian"]) .template-home.public-site .hero__copy { padding-block: 24px 12px; } :where(:root[data-skin="meridian"]) .template-home.public-site .action-hub { margin-top: 0; padding-top: 20px; } :where(:root[data-skin="meridian"]) .template-home.public-site .action-hub__grid { gap: 12px; } :where(:root[data-skin="meridian"]) .template-home.public-site .action-card { column-gap: 12px; padding: 16px; } :where(:root[data-skin="meridian"]) .template-home.public-site .section--services-hub .services-hub { gap: 24px; } :where(:root[data-skin="meridian"]) .template-home.public-site .section--services-hub .services-hub__intro { padding-inline-start: 16px; } :where(:root[data-skin="meridian"]) .template-home.public-site .section--services-hub .solution-grid--services { gap: 12px; } :where(:root[data-skin="meridian"]) .template-home.public-site .solution-card--service { padding: 16px 8px; } } @media (min-width: 901px) { :where(:root[data-skin="meridian"]) .mira-fullscreen-overlay { border-radius: 12px; padding: 0; } :where(:root[data-skin="meridian"]) .public-site .hs-lookup-shell { gap: 24px !important; } } @media (max-width: 430px) { :where(:root[data-skin="meridian"]) .public-site .footer-reference-links { gap: 4px 8px; } } @media (max-width: 900px) { :where(:root[data-skin="meridian"]) body.public-site { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } :where(:root[data-skin="meridian"]) .section--conversion .conversion-block { margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); } :where(:root[data-skin="meridian"]) .section--conversion .conversion-actions { margin-inline: 0; } :where(:root[data-skin="meridian"]) .section--conversion .conversion-actions .button, :where(:root[data-skin="meridian"]) .section--conversion .conversion-actions a.button { padding-inline: 1rem; } :where(:root[data-skin="meridian"]) .template-home .hero--home { padding-block: 3.25rem 2.5rem; } :where(:root[data-skin="meridian"]) .template-home .hero-stat-strip { gap: 0; } :where(:root[data-skin="meridian"]) .template-home .hero-visual-stack--home { margin-top: 1.25rem; } :where(:root[data-skin="meridian"]) .template-home .section--conversion { padding-inline: 0; } :where(:root[data-skin="meridian"]) .template-home .section--conversion .conversion-block { margin-inline: auto; padding: 1.5rem; } :where(:root[data-skin="meridian"]) .template-home .section--conversion .conversion-actions .button { padding-inline: 1rem; } :where(:root[data-skin="meridian"]) .template-home .hero-operations-board--home { margin-inline: auto; } :where(:root[data-skin="meridian"]) .template-home .section--conversion .conversion-actions { margin-inline: 0; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero__grid { padding-block: 40px 32px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero-feature-pills { margin-bottom: 20px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero__actions { gap: 12px; margin-bottom: 20px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero__grid { gap: 20px !important; padding-block: 32px 28px !important; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero__copy { padding: 0 !important; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero__actions { gap: 12px !important; margin: 20px 0 20px !important; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero-stat-strip { gap: 8px !important; margin-top: 16px !important; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero--home-pattern .hero-stat-card { padding: 12px 12px !important; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .hero-visual-stack { gap: 12px !important; } } @media (max-width: 480px) { :where(:root[data-skin="meridian"]) .public-site .container, :where(:root[data-skin="meridian"]) .template-home.public-site .container { padding-inline: 16px; } :where(:root[data-skin="meridian"]) .public-site .footer-reference-stores__grid { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .related-links-panel, :where(:root[data-skin="meridian"]) .public-site .page-cta, :where(:root[data-skin="meridian"]) .public-site .conversion-block, :where(:root[data-skin="meridian"]) .public-site .section--soft .form-panel { border-radius: 12px !important; } :where(:root[data-skin="meridian"]) .public-site .section { padding-inline: 0; } :where(:root[data-skin="meridian"]) .public-site .section--related-links .container, :where(:root[data-skin="meridian"]) .public-site .section--page-cta .container, :where(:root[data-skin="meridian"]) .public-site .section--conversion .container { margin-inline: auto !important; } :where(:root[data-skin="meridian"]) .public-site .section--soft .container { margin-inline: auto; } } @media (max-width:900px) { :where(:root[data-skin="meridian"]) .floating-actions { gap: 8px; padding: 8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); } :where(:root[data-skin="meridian"]) .floating-actions a { gap: 4px; padding: 4px 4px; border-radius: 8px; } :where(:root[data-skin="meridian"]) .floating-actions__label { padding-inline-end: 0; } :where(:root[data-skin="meridian"]) .floating-actions a:hover .floating-actions__label { padding-inline-end: 0; } :where(:root[data-skin="meridian"]) .template-home .floating-actions { border-radius: 999px; padding: 0.5rem; gap: 0.5rem; } :where(:root[data-skin="meridian"]) .template-home .floating-actions a { padding-inline: 0.75rem; } :where(:root[data-skin="meridian"]) body.public-site { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions { gap: 4px !important; padding: 8px max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right)) !important; } :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions a, :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions a:hover, :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions a:focus-visible, :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions a:active { border-radius: 8px !important; } :where(:root[data-skin="meridian"]) body.public-site { padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; } :where(:root[data-skin="meridian"]) .public-site .site-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; } :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions { gap: 4px !important; padding: 4px max(8px,env(safe-area-inset-left)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right)) !important; } :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions a, :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions a:hover, :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions a:focus-visible, :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions a:active { padding: 4px 4px !important; } html:where([data-skin="meridian"]) :is(.public-site,.template-mira-app,body) .floating-actions a.floating-actions__chat .floating-actions__label { padding-inline: 0; } } @media (max-width:560px) { :where(:root[data-skin="meridian"]) .template-home .floating-actions { padding: 0.5rem; gap: 0.5rem; } } @media (max-width:768px) { :where(:root[data-skin="meridian"]) .template-home .floating-actions { border-radius: 0; padding: 8px 8px; } :where(:root[data-skin="meridian"]) .floating-actions { padding-block-end: calc(8px + env(safe-area-inset-bottom)); } :where(:root[data-skin="meridian"]) .floating-actions a { border-radius: 0; } } @media (max-width:700px) { :where(:root[data-skin="meridian"]) .public-site .app-download-card { gap: 16px !important; padding: 16px !important; } :where(:root[data-skin="meridian"]) .public-site .service-selector { gap: 8px !important; } :where(:root[data-skin="meridian"]) .public-site .service-selector .button { border-radius: 12px !important; padding-inline: 16px !important; } :where(:root[data-skin="meridian"]) .template-trade-lane .section--soft .container>.link-grid>article.link-card[id] { padding: 16px 16px 20px !important; } :where(:root[data-skin="meridian"]) .template-trade-lane .section--soft .container>.link-grid>article.link-card[id] .link-card__label { margin: 0 0 8px !important; } :where(:root[data-skin="meridian"]) .template-trade-lane .section--soft .container>.link-grid>article.link-card[id] p { margin: 0 !important; } :where(:root[data-skin="meridian"]) .template-trade-lane .section--related-links { padding-block: 32px !important; } :where(:root[data-skin="meridian"]) .template-trade-lane .section--soft { padding-block: 40px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] .link-card__label { padding: 12px 12px; } :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-service,.template-trade-lane).public-site .section--related-links { padding-block: 32px !important; } :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-service,.template-trade-lane).public-site .section--related-links .related-links-panel { gap: 16px; padding: 20px !important; } :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-service,.template-trade-lane).public-site .section--related-links .link-card { padding: 16px 16px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .service-selector { margin-top: 16px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .hero { padding-bottom: 32px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .hero .hero-feature-pill { padding: 8px 12px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .hero .hero__actions { gap: 8px !important; margin-top: 20px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .hero .service-selector { gap: 8px !important; padding: 8px !important; } } @media (min-width:701px) { :where(:root[data-skin="meridian"]) .template-trade-lane .section--soft .container>.link-grid>article.link-card[id] { padding: 20px; } :where(:root[data-skin="meridian"]) .template-trade-lane .section--soft .container>.link-grid>article.link-card[id] .link-card__label { margin-bottom: 8px; } :where(:root[data-skin="meridian"]) .template-trade-lane .section--related-links { padding-block: 44px; } :where(:root[data-skin="meridian"]) .template-trade-lane .section--related-links .related-links-panel { gap: 28px; } :where(:root[data-skin="meridian"]) .template-trade-lane .section--related-links .link-grid { gap: 12px; } } @media (min-width: 701px) { :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .section--related-links { padding-block: 40px !important; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .section--related-links .related-links-panel { gap: 28px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .section--related-links .related-links-panel .link-grid { gap: 12px; } :where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .section--related-links .related-links-panel .link-card { padding: 16px 16px; } :where(:root[data-skin="meridian"]) .public-site .section--app-downloads .app-downloads--compact { border-radius: var(--radius); gap: 24px 32px; padding: 28px 32px; } :where(:root[data-skin="meridian"]) .public-site .app-downloads--compact .app-downloads__copy h2 { margin: 0 0 8px; } :where(:root[data-skin="meridian"]) .public-site .app-downloads--compact .app-download-grid { gap: 8px; } :where(:root[data-skin="meridian"]) .public-site .app-downloads--compact .app-download-card { column-gap: 8px; padding: 8px 16px 8px 8px; } :where(:root[data-skin="meridian"]) .public-site .app-downloads--compact .app-download-card__badge, :where(:root[data-skin="meridian"]) .public-site .app-downloads--compact .app-download-card__badge:has(img) { padding: 4px; } } @media (max-width:760px) { :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft:has(.link-grid > article.link-card[id]) { padding-block: 32px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft:has(.link-grid > article.link-card[id]) .section-heading { border-radius: 12px !important; margin-bottom: 16px !important; padding: 20px 16px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid:has(article.link-card[id]) { gap: 12px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] { border-radius: 12px !important; padding: 16px 16px 16px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] main>.section:not(.section--soft):has(.service-selector) .service-selector { margin-top: 16px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .trust-panel { border-radius: 12px !important; padding: 20px 16px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft:has(.link-grid > article.link-card[id]) { padding-block: 32px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft:has(.link-grid > article.link-card[id]) .section-heading { border-radius: 12px !important; margin-bottom: 16px !important; padding: 20px 16px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid:has(article.link-card[id]) { gap: 12px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft .container>.link-grid>article.link-card[id] { border-radius: 12px !important; padding: 16px 16px 16px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] main>.section:not(.section--soft):has(.service-selector) .service-selector { margin-top: 16px !important; } :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .trust-panel { border-radius: 12px !important; padding: 20px 16px !important; } } @media (max-width:1200px) { :where(:root[data-skin="meridian"]) body.public-site { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions { border-radius: 0 !important; gap: 8px !important; padding: 8px max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right)) !important; } :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions a, :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions a:hover, :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions a:focus-visible, :where(:root[data-skin="meridian"]) :is(.public-site,.template-mira-app) .floating-actions a:active { border-radius: 0 !important; gap: 4px !important; padding: 4px 4px !important; } :where(:root[data-skin="meridian"]) body.public-site { padding-bottom: 0 !important; } :where(:root[data-skin="meridian"]) .public-site .site-footer { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; } } @media (min-width:901px) { :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-trade-lane).public-site .hero__grid { gap: 32px !important; } :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-trade-lane).public-site .hero-card, :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-trade-lane).public-site .syria-mini-board { margin-inline-start: auto !important; } } @media (min-width: 721px) { :where(:root[data-skin="meridian"]) .public-site .container, :where(:root[data-skin="meridian"]) .public-site .hero__grid { padding-inline: calc(24px + clamp(0px, (1228px - 100vw) / 2, 24px)); } } @media (min-width: 520px) and (max-width: 760px) { :where(:root[data-skin="meridian"]) .public-site .hs-results-table tr { column-gap: 20px; } } @media (min-width: 1000px) { :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .hs-lookup-heading { column-gap: 44px; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .hs-lookup-heading > h2 { margin: 28px 0 0; } :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-lookup-heading { column-gap: 44px; } :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-lookup-heading > h1, :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-lookup-heading > h2 { margin: 28px 0 0; } } @media (max-width: 1099px) { :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .hs-table-wrap { border-radius: 0; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .hs-results-table tr { column-gap: 20px; border-radius: 12px; margin-bottom: 8px; padding: 4px 16px; } :where(:root[data-skin="meridian"]) body:has(#rate-table-title) .hs-results-table td { padding: 8px 0; padding-inline-start: calc(40% + 8px); } :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-table-wrap { border-radius: 0; } :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-results-table tr { column-gap: 16px; row-gap: 4px; border-radius: 12px; margin-bottom: 8px; padding: 8px 16px; } :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-results-table td { padding: 4px 0; } :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-results-table td::before { margin-bottom: 4px; } :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-results-table td:nth-child(1) { padding-bottom: 8px; margin-bottom: 4px; } } @media (min-width: 1100px) { :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-results-table td { padding: 8px 12px; } :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-col-resize::after { border-radius: 2px; } } @media (min-width: 700px) and (max-width: 1099px) { :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-results-table td:nth-child(1) { margin-bottom: 0; padding-bottom: 4px; } } @media (min-width: 900px) { :where(:root[data-skin="meridian"]) .public-site .structured-group--cards:has(> .structured-card-grid > article:only-child):not(:has(> :nth-child(3))) { column-gap: clamp(28px,4vw,56px); } } @media (min-width:1100px) { :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-table-form:has([data-hs-table-pdf]) { column-gap: 8px; } :where(:root[data-skin="meridian"]) .section--hs-lookup:has(.hs-table-form) .hs-table-form:has([data-hs-table-pdf]) .hs-table-form__grid { margin-inline-end: 4px; } } /* /assets/css/hs-results-mobile.css is loaded after this file on its own pages, so these copies carry the skin attribute as a real selector - one class more - which is the only way they win the tie. Nothing else is lifted with them. */ @media (max-width: 760px) { :root[data-skin="meridian"] .public-site .section--hs-lookup:has(.hs-table-form) .hs-results-table td::before { margin-bottom: 4px; } :root[data-skin="meridian"] .public-site .section--hs-lookup:has(.hs-table-form) .hs-results-table__share { gap: 8px; } :root[data-skin="meridian"] .public-site .section--hs-lookup:has(.hs-table-form) .hs-share-action { border-radius: 8px; } } /* /assets/css/syria-logistics-services.css is loaded after this file on its own pages, so these copies carry the skin attribute as a real selector - one class more - which is the only way they win the tie. Nothing else is lifted with them. */ :root[data-skin="meridian"] .template-syria-logistics .syria-mini-grid { gap: 0.75rem; margin-top: 1rem; } :root[data-skin="meridian"] .template-syria-logistics .syria-mini-grid article { padding: 1rem; border-radius: 0.75rem; } :root[data-skin="meridian"] .template-syria-logistics .syria-mini-grid span { margin-bottom: 0.25rem; } :root[data-skin="meridian"] .template-syria-logistics .syria-mini-grid p { margin: 0.25rem 0 0; } :root[data-skin="meridian"] .template-syria-logistics .link-grid .link-card p { margin: 0.75rem 0 0; } :root[data-skin="meridian"] .template-syria-logistics .link-grid .link-card { padding: clamp(1rem, 2vw, 1.25rem); } :root[data-skin="meridian"] .template-syria-logistics .link-grid .link-card__arrow { margin-top: 0.75rem; } :root[data-skin="meridian"] .template-syria-logistics main > .section--related-links { padding-block: clamp(2.5rem, 4.5vw, 3.75rem); } :root[data-skin="meridian"] .template-syria-logistics .section--related-links .related-links-panel { padding: clamp(1.5rem, 2.4vw, 2rem); } :root[data-skin="meridian"] .template-syria-logistics .section--related-links .section-heading { margin-bottom: clamp(1rem, 2vw, 1.5rem); } :root[data-skin="meridian"] .template-syria-logistics .section--related-links .link-grid { gap: 1rem; } :root[data-skin="meridian"] .template-syria-logistics .section--related-links .link-card { padding: 1rem; } :root[data-skin="meridian"] .template-syria-logistics main > .section--soft:has(.trust-panel) { padding-block: clamp(1.75rem, 3.4vw, 2.75rem); } :root[data-skin="meridian"] .template-syria-logistics .trust-panel { padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: 0.75rem; } :root[data-skin="meridian"] .template-syria-logistics .trust-panel .section-heading { margin: 0; } :root[data-skin="meridian"] .template-syria-logistics .trust-panel .section-heading p { margin-bottom: 0; } @media (max-width: 640px) { :root[data-skin="meridian"] .template-syria-logistics .hero--trade-lane { padding-block: 1.5rem 1.75rem; } :root[data-skin="meridian"] .template-syria-logistics .hero__actions { gap: 0.5rem; margin-top: 1.25rem; } :root[data-skin="meridian"] .template-syria-logistics .syria-mini-board { padding: 1.25rem; border-radius: 0.75rem; } :root[data-skin="meridian"] .template-syria-logistics .syria-mini-grid { gap: 0.5rem; } :root[data-skin="meridian"] .template-syria-logistics .syria-mini-grid article { padding: 0.75rem; border-radius: 0.75rem; } :root[data-skin="meridian"] .template-syria-logistics .link-grid { gap: 0.75rem; } :root[data-skin="meridian"] .template-syria-logistics .link-grid .link-card { padding: 1rem; border-radius: 0.75rem; } :root[data-skin="meridian"] .template-syria-logistics main > .section--related-links, :root[data-skin="meridian"] .template-syria-logistics main > .section--soft:has(.trust-panel) { padding-block: 1.5rem; } :root[data-skin="meridian"] .template-syria-logistics .section--related-links .related-links-panel, :root[data-skin="meridian"] .template-syria-logistics .trust-panel { padding: 1rem; border-radius: 0.75rem; } } @media (max-width:900px) { :root[data-skin="meridian"] body.public-site { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } :root[data-skin="meridian"] :is(.public-site,.template-mira-app) .floating-actions { gap: 4px !important; padding: 8px max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right)) !important; } :root[data-skin="meridian"] :is(.public-site,.template-mira-app) .floating-actions a, :root[data-skin="meridian"] :is(.public-site,.template-mira-app) .floating-actions a:hover, :root[data-skin="meridian"] :is(.public-site,.template-mira-app) .floating-actions a:focus-visible, :root[data-skin="meridian"] :is(.public-site,.template-mira-app) .floating-actions a:active { border-radius: 8px !important; } } @media (max-width:700px) { :root[data-skin="meridian"] .public-site .app-download-card { gap: 16px !important; padding: 16px !important; } :root[data-skin="meridian"] .public-site .service-selector { gap: 8px !important; } :root[data-skin="meridian"] .public-site .service-selector .button { border-radius: 12px !important; padding-inline: 16px !important; } :root[data-skin="meridian"] .template-trade-lane .section--soft .container>.link-grid>article.link-card[id] { padding: 16px 16px 20px !important; } :root[data-skin="meridian"] .template-trade-lane .section--soft .container>.link-grid>article.link-card[id] .link-card__label { margin: 0 0 8px !important; } :root[data-skin="meridian"] .template-trade-lane .section--soft .container>.link-grid>article.link-card[id] p { margin: 0 !important; } :root[data-skin="meridian"] .template-trade-lane .section--related-links { padding-block: 32px !important; } :root[data-skin="meridian"] .template-trade-lane .section--soft { padding-block: 40px !important; } } @media (min-width:701px) { :root[data-skin="meridian"] .template-trade-lane .section--soft .container>.link-grid>article.link-card[id] { padding: 20px; } :root[data-skin="meridian"] .template-trade-lane .section--soft .container>.link-grid>article.link-card[id] .link-card__label { margin-bottom: 8px; } :root[data-skin="meridian"] .template-trade-lane .section--related-links { padding-block: 44px; } :root[data-skin="meridian"] .template-trade-lane .section--related-links .related-links-panel { gap: 28px; padding: 32px; } :root[data-skin="meridian"] .template-trade-lane .section--related-links .link-grid { gap: 12px; } } @media (min-width: 701px) { :root[data-skin="meridian"] .public-site:not(.template-home):not(.template-khouli) .section--related-links { padding-block: 40px !important; } :root[data-skin="meridian"] .public-site:not(.template-home):not(.template-khouli) .section--related-links .related-links-panel { gap: 28px !important; padding: 32px !important; } :root[data-skin="meridian"] .public-site:not(.template-home):not(.template-khouli) .section--related-links .related-links-panel .link-grid { gap: 12px !important; } :root[data-skin="meridian"] .public-site:not(.template-home):not(.template-khouli) .section--related-links .related-links-panel .link-card { padding: 16px 16px !important; } } /* from the \3c style> block inside inline-74aa0f37bf.css, scoped to .template-hs-code */ :root[data-skin="meridian"] .template-hs-code .hs-deep { margin: 0 auto; padding: 32px 20px 48px; } :root[data-skin="meridian"] .template-hs-code .hs-deep h1 { margin: .2em 0 .6em; } :root[data-skin="meridian"] .template-hs-code .hs-deep dl { gap: 8px 16px; margin: 0 0 20px; } :root[data-skin="meridian"] .template-hs-code .hs-deep dd { margin: 0; } :root[data-skin="meridian"] .template-hs-code .hs-deep .hs-source-notice { margin: 0 0 20px; } @media (max-width:560px) { :root[data-skin="meridian"] .template-hs-code .hs-deep dl { gap: 4px; } :root[data-skin="meridian"] .template-hs-code .hs-deep dd { margin-bottom: 8px; } } /* from the \3c style> block inside inline-cccab8907b.css, scoped to .template-track */ :root[data-skin="meridian"] .template-track .carrier-directory__intro { margin: 0; } :root[data-skin="meridian"] .template-track .carrier-directory__toolbar { gap: 16px; margin: 24px 0 20px; padding: 20px; border-radius: 12px; } :root[data-skin="meridian"] .template-track .carrier-field { gap: 8px; } :root[data-skin="meridian"] .template-track .carrier-field input, :root[data-skin="meridian"] .template-track .carrier-field select { padding: 8px 12px; border-radius: 8px; } :root[data-skin="meridian"] .template-track .carrier-field select { padding-inline-end: 40px; } :root[data-skin="meridian"] .template-track .carrier-directory__actions { gap: 12px; } :root[data-skin="meridian"] .template-track .carrier-directory__actions .button { padding-block: 8px; } :root[data-skin="meridian"] .template-track .carrier-directory .carrier-directory__intro .brand-name, :root[data-skin="meridian"] .template-track .carrier-directory .carrier-empty .brand-name { margin-inline-end: 0; } :root[data-skin="meridian"] .template-track .carrier-directory .carrier-directory__actions .button--primary .brand-name { margin-inline-end: 0; } :root[data-skin="meridian"] .template-track .carrier-directory__note { margin: 0; } :root[data-skin="meridian"] .template-track .carrier-grid { gap: 16px; } :root[data-skin="meridian"] .template-track .carrier-card { gap: 8px; padding: 20px; border-radius: 12px; } :root[data-skin="meridian"] .template-track .carrier-card .carrier-card__group { margin: 0; } :root[data-skin="meridian"] .template-track .carrier-card .carrier-card__name { margin: 0; } :root[data-skin="meridian"] .template-track .carrier-card .carrier-card__desc { margin: 0; } :root[data-skin="meridian"] .template-track .carrier-card .carrier-card__types { margin: 0; } :root[data-skin="meridian"] .template-track .carrier-card__foot { gap: 4px; margin-top: auto; padding-top: 8px; } :root[data-skin="meridian"] .template-track .carrier-card .carrier-card__link { padding: 0 12px; border-radius: 8px; } :root[data-skin="meridian"] .template-track .carrier-empty { margin: 16px 0 0; padding: 12px 16px; border-radius: 8px; } /* from the \3c style> block inside inline-811eaca184.css, scoped to :is(.template-blog-index, .template-blog) */ :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .share-button { gap: 8px; padding: 0 12px; border-radius: 4px; } :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .news-card__actions { gap: 12px; } :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .share-dialog { margin: auto; padding: 20px; border-radius: 12px; } :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .share-dialog__head { gap: 12px; } :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .share-dialog .share-dialog__head h2 { margin: 0; } :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .share-dialog__close { padding: 0; border-radius: 4px; } :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .share-dialog .share-dialog__title { margin: 4px 0 16px; } :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .share-dialog__grid { gap: 8px; } :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .share-dialog__tile { gap: 8px; padding: 8px 4px; border-radius: 8px; } :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .share-dialog .share-dialog__status { margin: 0; } @media (max-width:560px) { :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .share-dialog { margin: auto 0 0; border-radius: 12px 12px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); } } /* from the \3c style> block inside inline-19c0625837.css, scoped to :is(.template-blog-index, .template-blog) */ :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .services-grid--blog { gap: 20px; margin-top: 32px; } :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .services-grid--blog .service-card { gap: 12px; padding: 24px 24px; border-radius: 8px; } :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .services-grid--blog .service-card strong { margin: 0; } :root[data-skin="meridian"] :is(.template-blog-index, .template-blog) .services-grid--blog .service-card > span[aria-hidden] { margin-top: auto; } /* ── Stage 9 · the four side actions sit two icons higher ───────────────── The owner: «اريد رفع الاربعة ايقونات الجانبية بقدر قياس ايقونتان». The bar is a fixed column of four 54px buttons with an 8px gap, and only above 1200px - below that it is the full-width bottom bar, which must not move. Two icons is 108px, already a step on the site's 4px grid. The site writes the offset as max(20px, safe-area) with no !important, so the raise keeps that guard rather than replacing it. */ @media (min-width: 1201px) { :root[data-skin="meridian"] .floating-actions { inset-block-end: calc(108px + max(20px, env(safe-area-inset-bottom))); } } /* ── Stage 10 · the mega menu opens instead of appearing ────────────────── The panel goes from display:none to display:grid, and display cannot be eased, so until now it simply popped. Three passes, 450ms end to end: the panel fades, the card's four lines rise one after the other, and a single band of light crosses the dark card. The panel carries translateX(-430px) of its own positioning - it is set against its trigger - so only its opacity may be touched here. A transform would slide it off the menu item it belongs to. All of it sits inside prefers-reduced-motion: no-preference. Motion is not decoration for everyone; for some people it is a reason to leave. */ @media (prefers-reduced-motion: no-preference) { @keyframes mt-mega-panel-in { from { opacity: 0 } to { opacity: 1 } } @keyframes mt-mega-line-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } } @keyframes mt-mega-sheen { from { transform: translateX(-140%) skewX(-14deg) } to { transform: translateX(260%) skewX(-14deg) } } @keyframes mt-mega-sheen-rtl { from { transform: translateX(140%) skewX(14deg) } to { transform: translateX(-260%) skewX(14deg) } } :root[data-skin="meridian"] .mega-panel { animation: mt-mega-panel-in 160ms ease-out both; } :root[data-skin="meridian"] .mega-panel__intro { position: relative; overflow: hidden; } :root[data-skin="meridian"] .mega-panel__intro > * { position: relative; z-index: 1; animation: mt-mega-line-in 300ms cubic-bezier(.2, .7, .3, 1) both; } :root[data-skin="meridian"] .mega-panel__intro > :nth-child(1) { animation-delay: 60ms } :root[data-skin="meridian"] .mega-panel__intro > :nth-child(2) { animation-delay: 100ms } :root[data-skin="meridian"] .mega-panel__intro > :nth-child(3) { animation-delay: 140ms } :root[data-skin="meridian"] .mega-panel__intro > :nth-child(4) { animation-delay: 180ms } /* one band of light per opening, behind the words, never over them */ :root[data-skin="meridian"] .mega-panel__intro::after { content: ""; position: absolute; inset-block: -20%; inset-inline-start: 0; inline-size: 45%; z-index: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .10) 45%, rgba(255, 255, 255, .17) 55%, rgba(255, 255, 255, 0) 100%); animation: mt-mega-sheen 900ms 140ms cubic-bezier(.3, .6, .2, 1) both; } :root[data-skin="meridian"] [dir="rtl"] .mega-panel__intro::after, :root[data-skin="meridian"][dir="rtl"] .mega-panel__intro::after { animation-name: mt-mega-sheen-rtl; } } @media (max-width:767px){.mira-floating-launcher,.mt-desk-park{display:none!important}} @keyframes mt-fa-chat-pulse{0%{box-shadow:0 0 0 0 rgba(0,125,197,.55)}70%{box-shadow:0 0 0 14px rgba(0,125,197,0)}100%{box-shadow:0 0 0 0 rgba(0,125,197,0)}}.floating-actions__chat{animation:mt-fa-chat-pulse 2.2s ease-out infinite}@media (prefers-reduced-motion:reduce){.floating-actions__chat{animation:none}} /*mt-op2col*/@media(min-width:1024px){.section--operational-content .content-stack{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px 30px!important;align-items:start!important}} /*mt-owner-tidy-20260923*/.public-site .section--soft,.public-site .section--page-cta{padding-block:34px}@media(min-width:760px){.public-site .section--soft .check-list,.public-site .section--related-links .check-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 26px}}@media(min-width:1180px){.public-site .section--soft .check-list,.public-site .section--related-links .check-list{grid-template-columns:repeat(3,minmax(0,1fr))}}.public-site:not(.template-home):not(.template-khouli) .hero-visual-stack:has(> .hero-operations-card){grid-template-rows:repeat(auto-fit,max-content)!important;align-content:center!important}.public-site .section--soft:has(> .container > p.lede:only-child > small){display:none!important} /*mt-rates-hide-all-20260923*/.public-site p.lede:has(> small:only-child){display:none!important} /* brand-name-contrast-20260923 */ /* The owner, 2026-09-23, on the Related links panel: when a card is pressed and its ground turns blue, the MIDTRANS word must turn white with the rest of the card's text, and the same must hold everywhere on the site. Measured on the live site before this block: in the Related links cards the word stayed brand blue #0074b7 on the blue hover ground #0074b7 (1.00:1) on hover, keyboard focus and press, in all 7 languages. On the dark grounds it sat blue on navy at rest: footer 1.2-1.6:1, FAQ intro 2.6:1, form intros 2.3-2.6:1, "why MIDTRANS" band 2.0-2.3:1, menu intro 2.6:1, blog promo 2.6:1, photo caption 2.9:1. The rule of this block: the word takes the text colour of the component it sits in (color: inherit), in exactly the states in which that component's own rule turns its ground blue, green or dark. Wherever the ground stays light the word keeps brand blue. A press is always a hover too, with a mouse and with a finger, so :active gets no selector of its own: no component here turns blue on :active alone. Colour only. Every selector starts :root[data-skin="meridian"] .public-site (+0,3,0), so it outranks the site's ".public-site .brand-name" (0,2,0) and the template rules that set the word's colour, without !important. The one !important answers the WhatsApp green, which sets its own white with !important. No property here has a direction, so right-to-left pages read the same. Selectors that need :has() stand in rules of their own, so a browser without :has() drops only those lines. */ /* 1. Grounds that turn blue on hover, keyboard focus or selection: the word takes the white the component's text takes (the Related links case). The footer's links, office links included, are covered with the whole footer in 2. */ :root[data-skin="meridian"] .public-site .link-card:is(:hover, :focus-visible) .brand-name, :root[data-skin="meridian"] .public-site .conversion-steps article:hover .brand-name, :root[data-skin="meridian"] .public-site .content-expand__toggle:is(:hover, :focus-visible) .brand-name, :root[data-skin="meridian"] .public-site .smart-network-filter:is(:hover, :focus-visible, .is-active) .brand-name, :root[data-skin="meridian"] .public-site .smart-network-map__controls button:is(:hover, :focus-visible) .brand-name, :root[data-skin="meridian"] .public-site .network-map-badge--button:is(:hover, :focus-visible, .is-active) .brand-name, :root[data-skin="meridian"] .public-site .structured-tabs button[aria-selected="true"] .brand-name, :root[data-skin="meridian"] .public-site .quote-stepper li.is-active span .brand-name, :root[data-skin="meridian"] .public-site .language-switcher__button:is(:hover, :focus-visible, [data-active-language]) .brand-name, :root[data-skin="meridian"] .public-site .mobile-menu__language[data-active-language] .brand-name, :root[data-skin="meridian"] .public-site .shipping-copilot__quick-actions button:is(:hover, :focus-visible) .brand-name, :root[data-skin="meridian"] .public-site :is(.header-actions, .mobile-menu__actions) .button--primary .brand-name, :root[data-skin="meridian"] .public-site .sample-form__actions .button--secondary:is(:hover, :focus-visible) .brand-name, :root[data-skin="meridian"] .public-site .sample-form--contact .button--secondary:is(:hover, :focus-visible) .brand-name, :root[data-skin="meridian"] .public-site .footer-reference-office a:is(:hover, :focus-visible) .brand-name, :root[data-skin="meridian"] .public-site .article-share .share-button:hover .brand-name, :root[data-skin="meridian"] .public-site .carrier-card .carrier-card__link:is(:hover, :focus-visible) .brand-name, :root[data-skin="meridian"] .public-site .mega-panel a:not(.mega-panel__overview):is(:hover, :focus-visible) .brand-name { color: inherit; } :root[data-skin="meridian"] .public-site:has(#rate-table-title) .rates-filter__button[aria-pressed="true"] .brand-name { color: inherit; } /* 2. Grounds that are dark or blue at rest: the word takes the light text around it, in every state. Inside a light button in these bands it takes that button's own text colour, as the Meridian .button rule already does. The content-band list rows are blue at rest by default; where a page turns them into pale pills their text is brand blue, so the word stays brand blue there too. */ :root[data-skin="meridian"] .public-site .site-footer .brand-name, :root[data-skin="meridian"] .public-site .mega-panel__intro .brand-name, :root[data-skin="meridian"] .public-site .faq-intro .brand-name, :root[data-skin="meridian"] .public-site .form-panel--quote .form-panel__intro .brand-name, :root[data-skin="meridian"] .public-site .form-panel--contact .brand-name, :root[data-skin="meridian"] .public-site .quote-channel-button .brand-name, :root[data-skin="meridian"] .public-site .content-band--why-midtrans .brand-name, :root[data-skin="meridian"] .public-site[data-page-template="syria-logistics-services"] .trust-panel .brand-name, :root[data-skin="meridian"] .public-site .aboutx__cap .brand-name, :root[data-skin="meridian"] .public-site .article-promo__inner .brand-name, :root[data-skin="meridian"] .public-site .blog-featured .brand-name, :root[data-skin="meridian"] .public-site .action-card .brand-name, :root[data-skin="meridian"] .public-site .content-band .check-list li .brand-name { color: inherit; } /* 3. The WhatsApp green grounds, at rest and in every state. Their own rules set the text white with !important, so the word follows with !important. */ :root[data-skin="meridian"] .public-site :is(.button--whatsapp, .button--whatsapp-action, .quote-channel-button--whatsapp, .floating-actions__whatsapp) .brand-name, :root[data-skin="meridian"] .public-site .link-card:is([href*="wa.me"], [href*="api.whatsapp.com"]) .brand-name, :root[data-skin="meridian"] .public-site .sample-form__actions .button[href*="wa.me"] .brand-name { color: #fff !important; } /* 4. Light grounds that a white-text rule still reaches: the word stays blue. - The Syria logistics city cards: the template turns them blue on hover, but a later !important keeps their ground white, and the template's own white brand rule then put the word white on white (1.01:1). - The menu's "Open overview" button sits inside the dark intro but is white at rest and pale blue on hover. - The freight-rates page's second list is plain rows on white. */ :root[data-skin="meridian"] .public-site[data-page-template="syria-logistics-services"] .section--soft .container > .link-grid > article.link-card[id]:is(:hover, :focus-visible) .brand-name, :root[data-skin="meridian"] .public-site .mega-panel .mega-panel__overview .brand-name { color: var(--color-blue); } :root[data-skin="meridian"] .public-site:has(#rate-table-title) .section--operational-content .content-band:nth-of-type(2) .check-list > li .brand-name { color: var(--color-blue); } /* - The service tiles: their hover ground ends light (the later surface-wash rule wins), but the tile's "span turns white" rule still reaches the word; it keeps the ink it has at rest. */ :root[data-skin="meridian"] .public-site .solution-card--service:is(:hover, :focus-visible) .brand-name { color: var(--color-ink); } /* end brand-name-contrast-20260923 */ /* section-spacing-half-20260923 */ /* Owner request 2026-09-23: halve the vertical space above and below every page section, site-wide. Every section-level padding/margin rule of the meridian bundle is re-declared below with the SAME selector and media query at half value, in the SAME order, so the cascade keeps picking the same rule as before and only the number changes. Rules that were 0 stay 0. Tinted bands keep a floor of 20px (desktop) / 16px (phone, <=760px): .section--soft and .faq-section 34 -> 20 (not 17), the syria-logistics trust-panel band, the compact app band. Not touched: hero internals, card padding, inner gaps between cards, the action-hub -28px hero overlap, the footer, and [id]{scroll-margin-top} (anchor offset under the header). Colour-only blocks (brand-name-contrast-20260923) may sit before or after this one. Must stay AFTER every original section rule of the bundle: equal specificity + later source order wins. */ :where(:root[data-skin="meridian"]) .section{padding-top:32px;padding-bottom:32px} :where(:root[data-skin="meridian"]) .network-band{margin-top:20px} :where(:root[data-skin="meridian"]) .section--about-brief{padding-bottom:18px} :where(:root[data-skin="meridian"]) .section--compact{padding-top:8px;padding-bottom:8px} :where(:root[data-skin="meridian"]) .section--banner{padding-top:16px;padding-bottom:16px} :where(:root[data-skin="meridian"]) .route-featured-block{margin-bottom:4px} :where(:root[data-skin="meridian"]) .news-section{padding-top:14px} :where(:root[data-skin="meridian"]) .news-section{margin-top:18px} :where(:root[data-skin="meridian"]) .public-site .section--hs-lookup{padding-top:clamp(16px,2vw,28px);padding-bottom:clamp(16px,2vw,28px)} :where(:root[data-skin="meridian"]) .public-site .section--hs-operational{padding-top:clamp(14px,1.75vw,26px);padding-bottom:clamp(14px,1.75vw,26px)} :where(:root[data-skin="meridian"]) .public-site .section--app-downloads{padding-top:20px} :where(:root[data-skin="meridian"]) .public-site .section{padding-top:32px;padding-bottom:32px} :where(:root[data-skin="meridian"]) .public-site .section--related-links{padding-top:16px} :where(:root[data-skin="meridian"]) .section--photo-gallery{padding-block:16px 4px} :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft:has(.link-grid > article.link-card[id]){padding-block:clamp(20px,2.5vw,36px) !important} :where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] main>.section:not(.section--soft):has(.trust-panel){padding-block:clamp(18px,2.2vw,28px) !important} :where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-service,.template-trade-lane).public-site .section--related-links{padding-block:20px !important} :where(:root[data-skin="meridian"]) .template-home.public-site .section--app-downloads:has(.app-downloads--compact){padding-bottom:20px} :where(:root[data-skin="meridian"]) .template-home.public-site .section.home-duo{padding-top:0} @media (max-width:760px){:where(:root[data-skin="meridian"]) .public-site .section--hs-operational{padding-top:14px;padding-bottom:14px}} @media (max-width:980px){:where(:root[data-skin="meridian"]) .public-site .action-hub{padding-top:12px}} @media (max-width:560px){:where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .section{padding-block:24px}} @media (max-width:700px){:where(:root[data-skin="meridian"]) .public-site .section--related-links{padding-top:12px}} @media (max-width:520px){:where(:root[data-skin="meridian"]) .public-site .section{padding-top:22px;padding-bottom:22px}} @media (max-width:620px){:where(:root[data-skin="meridian"]) .template-home.public-site .action-hub{padding-top:10px}} @media (max-width:700px){:where(:root[data-skin="meridian"]) .template-trade-lane .section--related-links{padding-block:16px !important}} @media (max-width:700px){:where(:root[data-skin="meridian"]) .template-trade-lane .section--soft{padding-block:20px !important}} @media (max-width:700px){:where(:root[data-skin="meridian"]) :is(.template-services-landing,.template-service,.template-trade-lane).public-site .section--related-links{padding-block:16px !important}} @media (min-width:701px){:where(:root[data-skin="meridian"]) .template-trade-lane .section--related-links{padding-block:22px}} @media (min-width:701px){:where(:root[data-skin="meridian"]) .public-site:not(.template-home):not(.template-khouli) .section--related-links{padding-block:20px !important}} @media (max-width:760px){:where(:root[data-skin="meridian"]) .public-site[data-page-template="syria-logistics-services"] .section--soft:has(.link-grid > article.link-card[id]){padding-block:16px !important}} @media (max-width:760px){:where(:root[data-skin="meridian"]) .template-home.public-site .section--app-downloads:has(.app-downloads--compact){padding-bottom:16px}} :root[data-skin="meridian"] .template-syria-logistics main > .section--related-links{padding-block:clamp(1.25rem,2.25vw,1.875rem)} :root[data-skin="meridian"] .template-syria-logistics main > .section--soft:has(.trust-panel){padding-block:clamp(20px,1.7vw,22px)} @media (max-width:640px){:root[data-skin="meridian"] .template-syria-logistics main > .section--related-links{padding-block:.75rem}:root[data-skin="meridian"] .template-syria-logistics main > .section--soft:has(.trust-panel){padding-block:16px}} @media (max-width:700px){:root[data-skin="meridian"] .template-trade-lane .section--related-links{padding-block:16px !important}} @media (max-width:700px){:root[data-skin="meridian"] .template-trade-lane .section--soft{padding-block:20px !important}} @media (min-width:701px){:root[data-skin="meridian"] .template-trade-lane .section--related-links{padding-block:22px}} @media (min-width:701px){:root[data-skin="meridian"] .public-site:not(.template-home):not(.template-khouli) .section--related-links{padding-block:20px !important}} .public-site .section--page-cta{padding-block:17px} .public-site .section--soft{padding-block:20px} /* homepages (7 langs): the rhythm is var-driven; the variable is defined in /styles.124878a64648.css (loads before this bundle) */ .template-home.public-site{--home-section-space:clamp(27px,2.6vw,41px)} @media (max-width:980px){.template-home.public-site{--home-section-space:clamp(24px,3.5vw,32px)}} @media (max-width:520px){.template-home.public-site{--home-section-space:22px}} /* inline