/* ==========================================================================
   MEGITS design system
   Theme:  platform/themes/megits  (child of iori)
   Tokens: partials/header-meta.blade.php

   Loaded after every Iori stylesheet (see config.php), so overrides rely on
   source order and specificity rather than "!important".

   LAYERS
     1. Site chrome      - header, menu, language switcher, newsletter. Unscoped.
     2. MEGITS root      - full-bleed shell + editor reset.
     3. Component layer  - reusable anywhere. THIS is what new blocks inherit.
     4. Section layer    - only what is specific to one homepage section.
     5. Responsive.

   THE ROOT CLASS CONTRACT
     Every piece of MEGITS markup must sit inside an element carrying either
     .mg-home  (the homepage sections) or .mg-block (new UI blocks, and the
     restyled Iori templates). The component layer is written against
     :is(.mg-home, .mg-block) for two reasons:

       - it keeps components out of the way of unrelated Iori markup, and
       - the editor's content stylesheet (ckeditor/content-styles.css) is
         queued AFTER this file, so a bare ".mg-card h3" (0,1,1) would lose a
         specificity tie against ".ck-content h3" (0,1,1). Prefixing with the
         root class lifts every element rule to 0,2,1 and settles it.

     Add .mg-block to the outermost element of any new block and every
     component below works with no extra CSS.

   To revert: delete this file and re-run
     php artisan cms:theme:assets:publish megits
   ========================================================================== */

/* ==========================================================================
   1. SITE CHROME - every page
   ========================================================================== */

body {
    background: var(--mg-bg);
    color: var(--mg-text);
}

/* --- 1.1 Header ----------------------------------------------------------- */
/* Dark in both the normal and the sticky state. */
.header.sticky-bar,
.header.sticky-bar.stick {
    background: var(--mg-bg);
    border-bottom: 1px solid var(--mg-divider);
    box-shadow: none;
}

/* Dropdowns must paint over the page content below.

   Centring the menu needs transform: translate() on .header-nav, and a
   transform creates a stacking context - which traps the dropdown's
   z-index:999999 inside .header-nav. The first block after the header is
   position:relative and later in the DOM, so it painted over the trapped
   dropdown and cut it off. Lifting the whole header into its own layer fixes
   it at the source. 500 sits below Bootstrap's modal layer (1050). */
.header.sticky-bar {
    position: relative;
    z-index: 500;
}

/* ...but only in the resting state. Iori sticks the header with
   .sticky-bar.stick{position:fixed;top:0;left:0;width:100%;z-index:1000}, which
   has the same (0,2,0) specificity as the rule above - and this file is queued
   after Iori's style.css, so the tie went to position:relative and the header
   stopped following the scroll. Re-assert the stuck state at (0,3,0); top,
   left, width and the fade-in still come from Iori. */
.header.sticky-bar.stick {
    position: fixed;
    z-index: 1000;
}

.header .main-menu li a,
.header .main-menu li a span {
    color: var(--mg-heading);
}

.header .main-menu li a:hover,
.header .main-menu li a:hover span,
.header .main-menu li:hover > a,
.header .main-menu li:hover > a span {
    color: var(--mg-primary);
}

.header .main-menu li ul {
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-card);
    box-shadow: var(--mg-shadow-pop);
}

/* Mega-menu variant: Iori paints this one white on a div, not a ul. */
.header .main-menu li div.sub-menu {
    background-color: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-bottom-width: 1px;
    border-radius: var(--mg-radius-card);
    box-shadow: var(--mg-shadow-pop);
}

/* Dropdown links.

   Iori declares .header .main-menu li ul li a{color:#071920} at (0,2,4), which
   outranks the generic .header .main-menu li a rule above at (0,2,2). The
   result was near-black links on the dark panel that only appeared on hover,
   because the hover rule carries a pseudo-class and outranks it again.

   These selectors match Iori's specificity exactly and win on source order,
   since this stylesheet is queued last. */
.header .main-menu li ul li a,
.header .main-menu li ul li a span,
.header .main-menu li div.sub-menu .menu-inner li a {
    color: var(--mg-heading);
}

.header .main-menu li ul li a:hover,
.header .main-menu li ul li a:hover span,
.header .main-menu li div.sub-menu .menu-inner li a:hover,
.header .main-menu li div.sub-menu .menu-inner li a:hover * {
    color: var(--mg-primary);
}

/* The item pointing at the page you are on stays highlighted, in MEGITS blue
   rather than Iori's. */
.header-nav .main-menu .active > a,
.header-nav .main-menu li ul li.active > a {
    color: var(--mg-primary);
}

.header .burger-icon > span,
.header .burger-icon > span::before,
.header .burger-icon > span::after {
    background-color: var(--mg-heading);
}

/* --- 1.1a Mobile drawer --------------------------------------------------- */
/* Iori's off-canvas menu is a white panel with #071920 links and
   var(--success-color) - a green - on hover. On a dark site that meant opening
   the menu flashed white, and the hover colour did not match the desktop nav's
   blue. These selectors mirror Iori's own specificity exactly and win on source
   order, the same trick the dropdown rules below use.

   Colours are taken from the desktop contract above, so the two navs agree:
   links --mg-heading, hover and current page --mg-primary. */
.mobile-header-wrapper-style {
    background-color: var(--mg-bg);
    border-left: 1px solid var(--mg-border);
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-logo {
    border-bottom: 1px solid var(--mg-divider);
}

.mobile-menu-wrap nav .mobile-menu li a,
.mobile-menu-wrap nav .mobile-menu li a span,
.mobile-menu-wrap nav .mobile-menu li ul li a,
.mobile-menu-wrap nav .mobile-menu li ul li a span {
    color: var(--mg-heading);
}

.mobile-menu-wrap nav .mobile-menu li a:hover,
.mobile-menu-wrap nav .mobile-menu li a:hover span,
.mobile-menu-wrap nav .mobile-menu li:hover > a,
.mobile-menu-wrap nav .mobile-menu li ul li a:hover,
.mobile-menu-wrap nav .mobile-menu li.active > a,
.mobile-menu-wrap nav .mobile-menu li ul li.active > a {
    color: var(--mg-primary);
}

/* The +/- affordance on a group, and the hairlines between rows. */
.mobile-menu-wrap nav .mobile-menu li.has-children .menu-expand {
    color: var(--mg-muted);
}

.mobile-menu-wrap nav .mobile-menu li {
    border-bottom-color: var(--mg-divider);
}

.mobile-menu-wrap nav .mobile-menu li ul li.hr span {
    background-color: var(--mg-divider);
}

/* Contact block under the menu. */
.mobile-header-info-wrap {
    border-color: var(--mg-border);
}

.mobile-header-info-wrap .single-mobile-header-info a,
.mobile-header-info-wrap .single-mobile-header-info a i {
    color: var(--mg-text);
}

.mobile-header-info-wrap .single-mobile-header-info a:hover {
    color: var(--mg-primary);
}

/* Iori repeats these rules a second time through the full ancestor chain -
   .mobile-header-wrapper-style .mobile-header-wrapper-inner
   .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li a:hover -
   which is (0,5,4) and outranks the short forms above whatever the source
   order. The long form has to be matched exactly to take the green off. */
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li a,
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li ul li a {
    color: var(--mg-heading);
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li a:hover,
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li:hover > a,
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li ul li a:hover,
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li.active > a {
    color: var(--mg-primary);
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li.has-children .menu-expand {
    color: var(--mg-muted);
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li.has-children.active > .menu-expand {
    background: rgba(255, 255, 255, .08);
}
/* Close control uses the same bars as the header burger. */
.mobile-header-wrapper-style .burger-icon > span,
.mobile-header-wrapper-style .burger-icon > span::before,
.mobile-header-wrapper-style .burger-icon > span::after {
    background-color: var(--mg-heading);
}
/* --- 1.1b Header layout --------------------------------------------------- */
/* Target: logo left, main menu centred, then search icon, language switcher and
   the action button on the right.

   Iori nests .header-right INSIDE .header-left, so all three groups are flex
   siblings of one container. The menu is taken out of flow and centred on the
   bar only from 1200px up, which is exactly where Iori shows the desktop nav
   and hides the burger - below that the burger stays in normal flow. */

.header .main-header {
    position: relative;
    min-height: 80px;
}

.header .header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* Logo: horizontal lockup, height-constrained so the bar height controls it. */
.header .header-logo {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

.header .header-logo a {
    display: block;
}

.header .header-logo img {
    display: block;
    height: 46px;
    width: auto;
    max-width: none;
}

/* Right-hand group pinned to the far right. */
.header .header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    width: auto;
    margin-left: auto;
    padding: 0;
    text-align: left;
}

/* Iori spaces these with utility margins; the flex gap handles it now. */
.header .header-right .me-1,
.header .header-right .me-2 {
    margin-right: 0;
}

@media (min-width: 1200px) {
    /* Centred on the bar itself, not on the space left over beside the logo. */
    .header .header-nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        text-align: center;
    }
}

/* Menu items. */
.header .main-menu > li > a {
    padding: 0 16px;
    font-size: 15px;
    font-weight: 600;
}

/* Search trigger: blue, on a 44px touch target. */
.header .box-search-top .search-post {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--mg-primary);
    cursor: pointer;
}

.header .box-search-top .search-post:hover {
    color: var(--mg-link-hover);
}

.header .box-search-top svg {
    width: 20px;
    height: 20px;
}

/* Action button ("Let's Talk"): MEGITS button spec plus the trailing arrow. */
.header .header-right .btn-brand-1 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 22px;
    border-radius: var(--mg-radius);
    background: var(--mg-primary);
    color: var(--mg-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    transition: background var(--mg-transition),
                border-color var(--mg-transition),
                color var(--mg-transition);
}

.header .header-right .btn-brand-1:hover {
    background: var(--mg-primary-hover);
    color: var(--mg-text);
    transform: none;
}

/* Drawn as a mask rather than a background image, so the arrow takes the
   button's current label colour in both the solid and the hover state instead
   of being locked to white. */
.header .header-right .btn-brand-1::after {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- 1.2 Language switcher ------------------------------------------------ */
/* Target: flag + language name + chevron, dark dropdown with a blue border.
   Markup comes from the child partial partials/language-switcher.blade.php,
   which renders flags as <img> and avoids Iori's .color-grey-900.

   .box-dropdown-cart / .dropdown-account / .dropdown-open are Iori JS hooks
   and must keep their names. */

.header .mg-lang {
    position: relative;
}

.header .mg-lang-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;                  /* touch target */
    padding: 0 4px;
    color: var(--mg-heading);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.header .mg-lang-current:hover,
.header .mg-lang-current:hover .mg-lang-name {
    color: var(--mg-primary);
}

.header .mg-lang-name {
    color: inherit;
}

.mg-flag {
    display: inline-block;
    flex-shrink: 0;
    width: 22px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
}

.header .mg-lang-caret {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--mg-transition);
}

.header .mg-lang:has(.dropdown-open) .mg-lang-caret {
    transform: rotate(180deg);
}

/* Dropdown panel. */
.header .mg-lang-menu {
    top: calc(100% + 10px);
    width: auto;
    min-width: 190px;
    padding: 6px;
    background: var(--mg-surface);
    border: 1px solid var(--mg-primary);
    border-radius: var(--mg-radius-card);
    box-shadow: var(--mg-shadow-pop);
}

.header .mg-lang-menu ul {
    margin: 0;
    list-style: none;
}

/* Iori spaces these items and floats their flag; both are undone here. */
.header .mg-lang-menu ul li {
    margin: 0;
}

.header .mg-lang-menu ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--mg-radius);
    color: var(--mg-heading);
    text-decoration: none;
}

.header .mg-lang-menu ul li a img {
    float: none;
    margin: 0;
}

.header .mg-lang-menu ul li a:hover,
.header .mg-lang-menu ul li a:hover .mg-lang-name {
    background: var(--mg-surface-2);
    color: var(--mg-primary);
}

/* Inline variant and the mobile list inside the off-canvas panel. */
.header .mg-lang-inline a,
.mg-lang-mobile a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--mg-heading);
}

.header .mg-lang-inline a:hover,
.mg-lang-mobile a:hover {
    color: var(--mg-primary);
}

/* Iori declares .color-grey-900{color:#071920!important}. On the dark header
   that is near-black on near-black, so the !important has to be matched. This
   is the only place in the theme that uses it. */
.header .color-grey-900 {
    color: var(--mg-heading) !important;
}

/* --- 1.3 Newsletter band -------------------------------------------------- */
/* The one light surface in the system. Iori's form markup is untouched so the
   existing subscribe endpoint keeps working. */
.box-newsletter {
    margin: 0;
    padding: 40px 0;
    border-radius: 0;
    background: var(--mg-light-bg);
    color: var(--mg-light-text);
}

.box-newsletter .row {
    flex-direction: row-reverse;   /* illustration on the right */
    align-items: center;
}

.box-newsletter :is(h1, h2, h3, h4, h5, h6) {
    color: var(--mg-light-text);
}

.box-newsletter input[type="email"],
.box-newsletter input[type="text"] {
    height: var(--mg-control-h);
    background: #fff;
    border: 1px solid var(--mg-light-border);
    border-radius: var(--mg-radius);
    color: var(--mg-light-text);
}

.box-newsletter button,
.box-newsletter .btn,
.box-newsletter input[type="submit"] {
    height: var(--mg-control-h);
    border: 0;
    border-radius: var(--mg-radius);
    background: var(--mg-primary);
    color: #fff;
    font-weight: 700;
}

.box-newsletter button:hover,
.box-newsletter .btn:hover {
    background: var(--mg-primary-hover);
}

/* ==========================================================================
   2. MEGITS ROOT - full-bleed shell and editor reset
   ========================================================================== */

/* Only relevant while sections live inside page content. Harmless once every
   section is a Visual Builder block. */
.ck-content:has(:is(.mg-home, .mg-block)) {
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--mg-bg);
}

.ck-content:has(:is(.mg-home, .mg-block)) > p,
.ck-content:has(:is(.mg-home, .mg-block)) > br {
    display: none;
}

/* Blocks seam together: no gap before the first one, between any two, or after
   the last one.

   Iori wraps page content in .section{display:inline-block}. An inline-block
   sits on a text baseline, so it carries a descender gap underneath it and lets
   the whitespace between elements render as real space - which is the gap above
   and below the blocks. Making it a block box removes both at once. */
.section:has(:is(.mg-home, .mg-block)) {
    display: block;
    margin: 0;
    padding: 0;
}

/* Vertical margins only: .mg-bleed needs its negative left margin intact. */
.ck-content:has(:is(.mg-home, .mg-block)) > :is(.mg-home, .mg-block) {
    margin-top: 0;
    margin-bottom: 0;
}

/* Design scope. Carries the dark surface and typography but NOT the full-bleed
   break-out, so a cloned Iori block can sit inside the normal content column. */
.mg-home,
.mg-block {
    background: var(--mg-bg);
    color: var(--mg-text);
    font-family: var(--primary-font);
    line-height: 1.5;
}

/* Full-bleed modifier: add .mg-bleed to a section that should span the page.

   This deliberately does NOT use width:100vw. 100vw includes the vertical
   scrollbar, so the block ends up a few pixels wider than the content area and
   pushes a horizontal scrollbar. The previous fix for that was
   body{overflow-x:hidden}, but setting one axis to hidden makes the other
   compute to auto, which turns body into a scroll container and clips the
   header dropdowns until you scroll.

   The full-width page template renders content straight into .section with no
   .container, so .ck-content already spans the page and width:100% bleeds
   correctly with no negative margins and no overflow at all. */
.mg-home,
.mg-bleed {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
}

:is(.mg-home, .mg-block) * {
    box-sizing: border-box;
}

:is(.mg-home, .mg-block) a,
:is(.mg-home, .mg-block) a:hover {
    text-decoration: none;
}

:is(.mg-home, .mg-block) img {
    display: block;
    max-width: none;
    margin: 0;
    border-radius: 0;
}

:is(.mg-home, .mg-block) :where(p, h1, h2, h3, h4) {
    margin: 0;
    padding: 0;
}

:is(.mg-home, .mg-block) svg {
    display: inline-block;
    vertical-align: middle;
}

:is(.mg-home, .mg-block) figure {
    display: contents;
    margin: 0;
}

/* ==========================================================================
   3. COMPONENT LAYER - reusable in any block, on any page
   ========================================================================== */

/* --- 3.1 Layout ----------------------------------------------------------- */
.mg-wrap {
    max-width: var(--mg-container);
    margin: 0 auto;
    padding: 0 var(--mg-gutter);
}

/* .mg-sec may sit ON the root element (as the homepage sections do) or on a
   descendant of it (as a block's inner wrapper), so both forms are matched. */
:is(.mg-home, .mg-block).mg-sec,
:is(.mg-home, .mg-block) .mg-sec {
    padding: var(--mg-section-y) 0;
    border-top: 1px solid var(--mg-divider);
}

/* Section header: title block on the left, optional link on the right. */
:is(.mg-home, .mg-block) .mg-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--mg-gutter);
    margin-bottom: 30px;
}

/* --- 3.2 Grids ------------------------------------------------------------ */
/* No fixed heights anywhere: a ~30% longer Spanish string just grows the row. */
:is(.mg-home, .mg-block) .mg-grid6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

:is(.mg-home, .mg-block) .mg-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mg-gutter);
}

/* --- 3.3 Typography ------------------------------------------------------- */
:is(.mg-home, .mg-block) .mg-ey {              /* eyebrow label */
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mg-accent);
}

:is(.mg-home, .mg-block) .mg-h2 {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: #f3f7ff;
}

:is(.mg-home, .mg-block) .mg-lead {
    max-width: 520px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-muted {
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mg-link);
}

:is(.mg-home, .mg-block) .mg-link:hover {
    color: var(--mg-link-hover);
}

/* --- 3.4 Icons ------------------------------------------------------------ */
:is(.mg-home, .mg-block) .mg-ic {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    color: var(--mg-accent);
}

/* Inline arrow used inside buttons and links. */
:is(.mg-home, .mg-block) .mg-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke-width: 2;
}

/* --- 3.5 Buttons ---------------------------------------------------------- */
:is(.mg-home, .mg-block) .mg-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

:is(.mg-home, .mg-block) .mg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--mg-control-h);
    padding: 0 26px;
    border-radius: var(--mg-radius);
    font-size: 15px;
    font-weight: 700;
    transition: background var(--mg-transition),
                border-color var(--mg-transition),
                color var(--mg-transition);
}

:is(.mg-home, .mg-block) .mg-btn-p {
    background: var(--mg-primary);
    /* Exactly the secondary button's label colour, in both states. */
    color: var(--mg-text);
}

:is(.mg-home, .mg-block) .mg-btn-p:hover {
    background: var(--mg-primary-hover);
    color: var(--mg-text);
}

:is(.mg-home, .mg-block) .mg-btn-o {
    border: 1px solid var(--mg-primary);
    color: var(--mg-text);
}

:is(.mg-home, .mg-block) .mg-btn-o:hover {
    background: var(--mg-surface-2);
    color: #fff;
}

/* --- 3.6 Card ------------------------------------------------------------- */
:is(.mg-home, .mg-block) .mg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 22px 20px;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-card);
    color: var(--mg-muted);
    transition: border-color var(--mg-transition), transform var(--mg-transition);
}

:is(.mg-home, .mg-block) .mg-card:hover {
    border-color: var(--mg-primary);
    transform: translateY(-3px);
    color: var(--mg-muted);
}
/* Iori sets a bare h3{font-size:32px;line-height:44px}. Without an explicit
   line-height here a two-line card title ("Software Solutions", "Digital
   Transformation") inherited the 44px line box: a huge gap between the two
   lines, and 44px of dead height added to every card in the row. */

:is(.mg-home, .mg-block) .mg-card h3 {
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-card p {
    flex-grow: 1;
    font-size: 14px;
    line-height: 1.55;
}

:is(.mg-home, .mg-block) .mg-card b {
    align-self: flex-end;
    color: var(--mg-link);
}

/* Whole-card click target when the heading carries the link. */
:is(.mg-home, .mg-block) :is(.mg-card, .mg-post) h3 a {
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) :is(.mg-card, .mg-post) h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

:is(.mg-home, .mg-block) :is(.mg-card, .mg-post):hover h3 a {
    color: var(--mg-link-hover);
}

/* --- 3.7 Icon strip ------------------------------------------------------- */
:is(.mg-home, .mg-block) .mg-strip-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

:is(.mg-home, .mg-block) .mg-strip-grid > :is(div, a) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 6px;
    text-align: center;
    font-size: 15px;
    color: #dbe5f5;
    border-right: 1px solid var(--mg-border);
}

:is(.mg-home, .mg-block) .mg-strip-grid > :is(div, a):last-child {
    border-right: 0;
}

/* Strip icons are near-white, unlike the blue pillar icons in the hero.
   Sampled #ACC8F1-#CBE3F9 from ztemp/block2.png. */
:is(.mg-home, .mg-block) .mg-strip-grid .mg-ic {
    width: 34px;
    height: 34px;
    color: var(--mg-text);
}

:is(.mg-home, .mg-block) .mg-strip-grid > :is(div, a):hover .mg-ic {
    color: var(--mg-primary);
}

:is(.mg-home, .mg-block) .mg-strip-grid > div span {
    display: block;
}

/* --- 3.8 Photo tile with caption ------------------------------------------ */
:is(.mg-home, .mg-block) .mg-ind {
    position: relative;
    display: block;
    height: 250px;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-card);
    overflow: hidden;
}

:is(.mg-home, .mg-block) .mg-ind img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

:is(.mg-home, .mg-block) .mg-ind:hover img {
    transform: scale(1.05);
}
/* The tile IS the <a> (or a <div> when the item has no URL) and the caption is
   its <span>; a rule on ".mg-ind a" matched a nested anchor that never exists,
   so the label fell out of the gradient overlay and was clipped by the tile's
   fixed height. */

:is(.mg-home, .mg-block) .mg-ind > span {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    padding: 16px;
    background: linear-gradient(transparent 45%, rgba(6, 16, 29, .92));
    font-size: 15px;
    font-weight: 600;
    color: var(--mg-heading);
}

/* --- 3.9 Feature row (icon + heading + text, divided) --------------------- */
:is(.mg-home, .mg-block) .mg-why {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

:is(.mg-home, .mg-block) .mg-why > div {
    display: flex;
    gap: 18px;
    padding: 0 24px;
    border-right: 1px solid var(--mg-border);
}

:is(.mg-home, .mg-block) .mg-why > div:first-child {
    padding-left: 0;
}

:is(.mg-home, .mg-block) .mg-why > div:last-child {
    border-right: 0;
}

:is(.mg-home, .mg-block) .mg-why .mg-ic {
    width: 46px;
    height: 46px;
}

:is(.mg-home, .mg-block) .mg-why h3 {
    margin-bottom: 6px;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-why p {
    font-size: 14px;
    line-height: 1.55;
}

/* --- 3.10 Horizontal post card -------------------------------------------- */
:is(.mg-home, .mg-block) .mg-post {
    position: relative;
    display: flex;
    min-height: 160px;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-card);
    overflow: hidden;
    transition: border-color var(--mg-transition);
}

:is(.mg-home, .mg-block) .mg-post:hover {
    border-color: var(--mg-primary);
}

:is(.mg-home, .mg-block) .mg-post img {
    flex: 0 0 44%;
    width: 44%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
}

:is(.mg-home, .mg-block) .mg-post div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
}

:is(.mg-home, .mg-block) .mg-post h3 {
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-post small {
    font-size: 13px;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-post .mg-link {
    margin-top: auto;
    font-size: 14px;
}

/* ==========================================================================
   4. SECTION LAYER - specific to individual homepage sections
   ========================================================================== */

/* --- 4.1 Hero ------------------------------------------------------------- */
:is(.mg-home, .mg-block).mg-hero {
    position: relative;
    /* Measured from ztemp/homepage.png: 24px from the header rule to the top of
       the eyebrow in a 792px-wide mockup of a 1280px container, so ~45px real. */
    padding: 44px 0 48px;

    /* Flat fill, no gradient. The blue wash on the right comes from the globe
       photograph's own atmospheric glow, which is what the reference shows; a
       CSS gradient underneath it only muddied the left half of the section. */
    background: var(--mg-bg);
}

/* The globe sits behind the hero content and bleeds off the right edge.
   Two variants: a photograph chosen in the block, or the built-in SVG used when
   no image is set. */
:is(.mg-home, .mg-block) .mg-globe {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
}

/* Photographic globe. The source is a rectangular photo, so its left edge is
   faded out to blend into the section background instead of showing a seam. */
:is(.mg-home, .mg-block) img.mg-globe {
    right: 0;
    width: min(62%, 920px);
    height: auto;
    max-height: 125%;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%);
    mask-image: linear-gradient(to right, transparent 0, #000 24%);
}

/* Built-in SVG fallback: already circular and transparent, so no mask. */
:is(.mg-home, .mg-block) svg.mg-globe {
    right: -60px;
    width: 720px;
    height: 720px;
}

:is(.mg-home, .mg-block).mg-hero .mg-wrap {
    position: relative;
    z-index: 1;                 /* above the globe */
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

:is(.mg-home, .mg-block) .mg-hero-main {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

:is(.mg-home, .mg-block).mg-hero h1 {
    font-size: 66px;
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block).mg-hero h1 span {
    display: block;
    color: var(--mg-primary);
}

:is(.mg-home, .mg-block) .mg-sub {
    font-size: 38px;
    font-weight: 500;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-pillars {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    margin-top: 12px;
}

:is(.mg-home, .mg-block) .mg-pillar {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-pillar small {
    display: block;
    font-size: 14px;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-side {
    width: 220px;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #dbe5f5;
}

:is(.mg-home, .mg-block) .mg-side p:first-child {
    letter-spacing: .12em;
    text-transform: uppercase;
}

:is(.mg-home, .mg-block) .mg-side i {
    display: block;
    width: 36px;
    height: 3px;
    background: var(--mg-primary);
}

/* Hero search field. Iori's autocomplete script binds to .autocomplete-search
   and renders into .search-results, so those hooks are kept and only retinted. */
:is(.mg-home, .mg-block) .mg-search {
    position: relative;
    width: 100%;
    max-width: 620px;
}

:is(.mg-home, .mg-block) .mg-search-form {
    display: flex;
    gap: 12px;
}

:is(.mg-home, .mg-block) .mg-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--mg-control-h);
    padding: 0 16px;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    color: var(--mg-text);
    font-size: 15px;
}

:is(.mg-home, .mg-block) .mg-search-input:focus {
    border-color: var(--mg-primary);
    outline: none;
}

:is(.mg-home, .mg-block) .mg-search-input::placeholder {
    color: var(--mg-muted);
    opacity: 1;
}

:is(.mg-home, .mg-block) .mg-search-btn {
    flex: 0 0 auto;
}

/* Autocomplete dropdown. */
:is(.mg-home, .mg-block) .mg-search .search-results:not(:empty) {
    position: absolute;
    top: calc(var(--mg-control-h) + 8px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
    background: var(--mg-surface);
    border: 1px solid var(--mg-primary);
    border-radius: var(--mg-radius-card);
    box-shadow: var(--mg-shadow-pop);
}

:is(.mg-home, .mg-block) .mg-search .search-results a {
    display: block;
    padding: 10px 12px;
    min-height: 44px;              /* touch target */
    border-radius: var(--mg-radius);
    color: var(--mg-text);
}

:is(.mg-home, .mg-block) .mg-search .search-results a:hover {
    background: var(--mg-surface-2);
    color: var(--mg-heading);
}

/* --- 4.2 Icon strip section ----------------------------------------------- */
/* No top padding: the space above the strip comes from the bottom padding of
   whichever block precedes it, so the seam is not doubled. */
:is(.mg-home, .mg-block).mg-strip {
    padding: 0 0 36px;
    border-top: 1px solid var(--mg-divider);
}

/* --- 4.3 Split panels ----------------------------------------------------- */
/* Centred on the page, not edge-to-edge. Full bleed let the panels grow with
   the viewport while panel 1's copy kept its container alignment
   (padding-left: calc(50vw - 616px)), so on a wide screen that text sat far to
   the right and covered most of its photo while panel 2's stayed at 56px -
   the two photos ended up very different sizes. Capping the block at the
   container and giving both panels the same 48px inset keeps them identical at
   every width. */
:is(.mg-home, .mg-block).mg-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: var(--mg-container);
    margin-inline: auto;
    border-top: 1px solid var(--mg-divider);
}

:is(.mg-home, .mg-block) .mg-panel {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

:is(.mg-home, .mg-block) .mg-panel + .mg-panel {
    border-left: 1px solid var(--mg-divider);
}

:is(.mg-home, .mg-block) .mg-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
}

:is(.mg-home, .mg-block) .mg-panel-in {
    position: relative;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px 24px 48px 48px;
}

:is(.mg-home, .mg-block) .mg-panel + .mg-panel .mg-panel-in {
    padding-left: 48px;
}

:is(.mg-home, .mg-block) .mg-panel h2 {
    font-size: 32px;
}

/* --- 4.4 CTA banner ------------------------------------------------------- */
:is(.mg-home, .mg-block).mg-cta {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

:is(.mg-home, .mg-block).mg-cta > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:is(.mg-home, .mg-block).mg-cta .mg-wrap {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
}

:is(.mg-home, .mg-block) .mg-cta-in {
    max-width: 620px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

:is(.mg-home, .mg-block).mg-cta h2 {
    font-size: 42px;
}
/* :not(.mg-ey) because the CTA eyebrow is a <p> inside .mg-cta: this rule is
   (0,2,1) and the shared ".mg-ey" rule is only (0,2,0), so without the exclusion
   it overrode the eyebrow's accent colour with #dbe5f5 and its 12px size with
   18px. mg-cta is the only block whose eyebrow sits inside a bare-p rule. */

:is(.mg-home, .mg-block).mg-cta p:not(.mg-ey) {
    font-size: 18px;
    line-height: 1.6;
    color: #dbe5f5;
}

:is(.mg-home, .mg-block) .mg-motto {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: right;
    color: #cfe2ff;
}

/* ==========================================================================
   5. TABLET  (<= 1199px)
   3-column grids, hero side text hidden.
   ========================================================================== */
@media (max-width: 1199px) {
    :is(.mg-home, .mg-block).mg-hero h1 { font-size: 54px; }
    :is(.mg-home, .mg-block) .mg-side { display: none; }

    :is(.mg-home, .mg-block) .mg-grid6 { grid-template-columns: repeat(3, 1fr); }

    :is(.mg-home, .mg-block) .mg-strip-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 18px;
    }
    :is(.mg-home, .mg-block) .mg-strip-grid > :is(div, a):nth-child(3n) { border-right: 0; }

    :is(.mg-home, .mg-block) .mg-why {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px;
    }
    :is(.mg-home, .mg-block) .mg-why > div:nth-child(2n) { border-right: 0; }
    :is(.mg-home, .mg-block) .mg-why > div:nth-child(3) { padding-left: 0; }

    :is(.mg-home, .mg-block) .mg-grid3 { grid-template-columns: 1fr; }

    :is(.mg-home, .mg-block) .mg-panel-in,
    :is(.mg-home, .mg-block) .mg-panel + .mg-panel .mg-panel-in { padding: 40px 24px; }
}

/* ==========================================================================
   6. MOBILE  (<= 767px)
   2-column cards, single-column panels with text over a dark gradient,
   full-width buttons.
   ========================================================================== */
@media (max-width: 767px) {
    :is(.mg-home, .mg-block).mg-sec,
    :is(.mg-home, .mg-block) .mg-sec { padding: var(--mg-section-y-sm) 0; }

    :is(.mg-home, .mg-block) .mg-h2,
    :is(.mg-home, .mg-block) .mg-panel h2 { font-size: 26px; }

    :is(.mg-home, .mg-block) .mg-head {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    :is(.mg-home, .mg-block).mg-hero {
        padding: 0 0 var(--mg-section-y-sm);
        background: var(--mg-bg);
    }

    :is(.mg-home, .mg-block) .mg-globe {
        top: 0;
        transform: none;
        opacity: .45;
    }

    :is(.mg-home, .mg-block) img.mg-globe {
        right: -28%;
        width: 105%;
        max-height: none;
    }

    :is(.mg-home, .mg-block) svg.mg-globe {
        width: 320px;
        height: 320px;
        right: -120px;
    }

    :is(.mg-home, .mg-block).mg-hero h1 { font-size: 42px; }
    :is(.mg-home, .mg-block) .mg-sub { font-size: 24px; }
    :is(.mg-home, .mg-block) .mg-lead { font-size: 16px; }
    :is(.mg-home, .mg-block) .mg-btns .mg-btn { width: 100%; }

    :is(.mg-home, .mg-block) .mg-search-form { flex-direction: column; }
    :is(.mg-home, .mg-block) .mg-search-btn { width: 100%; }

    :is(.mg-home, .mg-block) .mg-pillars {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        text-align: center;
    }
    :is(.mg-home, .mg-block) .mg-pillar { flex-direction: column; font-size: 12px; }
    :is(.mg-home, .mg-block) .mg-pillar small { font-size: 12px; }

    :is(.mg-home, .mg-block) .mg-strip-grid { gap: 10px; }
    :is(.mg-home, .mg-block) .mg-strip-grid > :is(div, a) {
        padding: 14px 4px;
        font-size: 12px;
        border: 1px solid var(--mg-border);
        border-radius: var(--mg-radius-card);
    }
    :is(.mg-home, .mg-block) .mg-strip-grid > :is(div, a):nth-child(3n) {
        border-right: 1px solid var(--mg-border);
    }

    :is(.mg-home, .mg-block) .mg-grid6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    :is(.mg-home, .mg-block) .mg-card { padding: 18px; gap: 10px; }
    :is(.mg-home, .mg-block) .mg-card h3 { font-size: 15px; }
    :is(.mg-home, .mg-block) .mg-card p { font-size: 13px; }
    :is(.mg-home, .mg-block) .mg-card b { display: none; }
    :is(.mg-home, .mg-block) .mg-ic { width: 30px; height: 30px; }

    :is(.mg-home, .mg-block).mg-split { grid-template-columns: 1fr; }
    :is(.mg-home, .mg-block) .mg-panel { min-height: 420px; align-items: flex-end; }
    :is(.mg-home, .mg-block) .mg-panel + .mg-panel { border-left: 0; }
    :is(.mg-home, .mg-block) .mg-panel::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(6, 16, 29, .1) 20%, rgba(6, 16, 29, .95) 70%);
    }
    :is(.mg-home, .mg-block) .mg-panel-in,
    :is(.mg-home, .mg-block) .mg-panel + .mg-panel .mg-panel-in {
        z-index: 1;
        padding: 32px 24px;
    }

    :is(.mg-home, .mg-block) .mg-ind { height: 150px; }
    :is(.mg-home, .mg-block) .mg-ind > span { padding: 12px; font-size: 13px; }

    :is(.mg-home, .mg-block) .mg-why { grid-template-columns: 1fr; row-gap: 20px; }
    :is(.mg-home, .mg-block) .mg-why > div,
    :is(.mg-home, .mg-block) .mg-why > div:first-child,
    :is(.mg-home, .mg-block) .mg-why > div:nth-child(3) { padding: 0; border: 0; }
    :is(.mg-home, .mg-block) .mg-why .mg-ic { width: 32px; height: 32px; }

    :is(.mg-home, .mg-block) .mg-post { min-height: 112px; }
    :is(.mg-home, .mg-block) .mg-post img { flex-basis: 120px; width: 120px; }
    :is(.mg-home, .mg-block) .mg-post div { padding: 14px; }
    :is(.mg-home, .mg-block) .mg-post .mg-link { display: none; }

    :is(.mg-home, .mg-block).mg-cta { min-height: 480px; align-items: flex-start; }
    :is(.mg-home, .mg-block).mg-cta::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(6, 16, 29, .85) 0, rgba(6, 16, 29, .2) 60%);
    }
    :is(.mg-home, .mg-block).mg-cta .mg-wrap {
        z-index: 1;
        padding-top: 36px;
        padding-bottom: 36px;
    }
    :is(.mg-home, .mg-block).mg-cta h2 { font-size: 30px; }
    :is(.mg-home, .mg-block).mg-cta p:not(.mg-ey) { font-size: 16px; }
    :is(.mg-home, .mg-block) .mg-cta-in .mg-btn { width: 100%; }
    :is(.mg-home, .mg-block) .mg-motto { display: none; }

    .box-newsletter .box-image-newsletter { min-height: 140px; margin-top: 20px; }
}

/* ==========================================================================
   7. CLONED BLOCK COMPATIBILITY
   Applies only inside .mg-cloned - the wrapper the block cloner puts around a
   twinned Iori block. It retints Iori's own markup onto the MEGITS palette:
   dark surfaces, Manrope, token colours, MEGITS button and input shapes.

   This is a translation layer, not a rebuild. A cloned block inherits the
   design system but keeps Iori's structure and spacing. When a particular
   block earns a place on the site, promote it to a native MEGITS block with
   reference-accurate markup and it stops using these rules entirely.
   ========================================================================== */

.mg-cloned {
    padding: var(--mg-section-y) 0;
}

/* --- 7.1 Surfaces --------------------------------------------------------- */
/* Iori paints section backgrounds on semantic classes; flatten them onto the
   page ground so the dark canvas shows through. */
.mg-cloned [class*="bg-"],
.mg-cloned section,
.mg-cloned .section {
    background-color: transparent;
    background-image: none;
}

/* Panels, cards and boxes become MEGITS surfaces. The newsletter band is the
   documented exception - it stays light. */
.mg-cloned :is([class*="box-"], [class*="card"], .accordion, .accordion-item):not([class*="box-newsletter"]) {
    background-color: var(--mg-surface);
    border-color: var(--mg-border);
    border-radius: var(--mg-radius-card);
    color: var(--mg-muted);
}

/* --- 7.2 Text ------------------------------------------------------------- */
.mg-cloned :is(h1, h2, h3, h4, h5, h6),
.mg-cloned :is(h1, h2, h3, h4, h5, h6) a {
    color: var(--mg-heading);
}

.mg-cloned :is(p, li, td, th, dd, dt, label, figcaption) {
    color: var(--mg-text);
}

/* Iori's grey scale: the dark end of it means "prominent" on white, which
   inverts on a dark ground. */
.mg-cloned :is(.color-grey-900, .color-grey-800, .color-grey-700) {
    color: var(--mg-heading);
}

.mg-cloned :is(.color-grey-600, .color-grey-500, .color-grey-400, .color-grey-300, .text-showing) {
    color: var(--mg-muted);
}

.mg-cloned .color-brand-1 {
    color: var(--mg-accent);
}

.mg-cloned a:not(.btn) {
    color: var(--mg-link);
}

.mg-cloned a:not(.btn):hover {
    color: var(--mg-link-hover);
}

/* --- 7.3 Buttons ---------------------------------------------------------- */
.mg-cloned :is(.btn-brand-1, .btn-brand-1-full, .btn-primary, input[type="submit"]) {
    min-height: var(--mg-control-h);
    border: 0;
    border-radius: var(--mg-radius);
    background-color: var(--mg-primary);
    color: #fff;
    font-weight: 700;
}

.mg-cloned :is(.btn-brand-1, .btn-brand-1-full, .btn-primary, input[type="submit"]):hover {
    background-color: var(--mg-primary-hover);
    color: #fff;
}

/* Outline / secondary variants. */
.mg-cloned :is(.btn-border, .btn-secondary, .btn-outline) {
    min-height: var(--mg-control-h);
    border: 1px solid var(--mg-primary);
    border-radius: var(--mg-radius);
    background-color: transparent;
    color: var(--mg-text);
}

.mg-cloned :is(.btn-border, .btn-secondary, .btn-outline):hover {
    background-color: var(--mg-surface-2);
    color: #fff;
}

/* --- 7.4 Form controls ---------------------------------------------------- */
.mg-cloned :is(input, select, textarea):not([type="submit"]):not([type="button"]) {
    min-height: var(--mg-control-h);
    background-color: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    color: var(--mg-text);
}

.mg-cloned :is(input, select, textarea):not([type="submit"]):not([type="button"]):focus {
    border-color: var(--mg-primary);
    outline: none;
}

.mg-cloned ::placeholder {
    color: var(--mg-muted);
    opacity: 1;
}

/* --- 7.5 Rules and dividers ----------------------------------------------- */
.mg-cloned hr,
.mg-cloned [class*="border"] {
    border-color: var(--mg-border);
}

/* --- 7.6 Images ----------------------------------------------------------- */
.mg-cloned img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mg-radius-card);
}

@media (max-width: 767px) {
    .mg-cloned {
        padding: var(--mg-section-y-sm) 0;
    }
}

/* ==========================================================================
   9. NEWSLETTER BLOCK
   The single light surface in the design. The form inside is Botble's own
   NewsletterForm markup, so these rules retint it rather than replace it.
   ========================================================================== */

.mg-newsletter {
    position: relative;
    --mg-news-art: clamp(200px, 20vw, 320px);
    padding: 44px 0;
    background: var(--mg-light-bg);
    color: var(--mg-light-text);
}

.mg-newsletter .mg-newsletter-inner {
    display: flex;
    align-items: center;
    gap: 32px;
}

.mg-newsletter .mg-newsletter-copy {
    flex: 1 1 320px;
}

.mg-newsletter .mg-newsletter-copy h2 {
    margin-bottom: 10px;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--mg-light-text);
}

.mg-newsletter .mg-newsletter-copy p {
    font-size: 15px;
    line-height: 1.6;
    color: #3d5170;
}

.mg-newsletter .mg-newsletter-form {
    flex: 1 1 360px;
}

/* Botble renders the field and submit as a form; lay them out as one row. */
.mg-newsletter .newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.mg-newsletter .newsletter-form :is(input[type="email"], input[type="text"]) {
    flex: 1 1 220px;
    min-width: 0;
    height: var(--mg-control-h);
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--mg-light-border);
    border-radius: var(--mg-radius);
    color: var(--mg-light-text);
    font-size: 15px;
}

.mg-newsletter .newsletter-form :is(input[type="email"], input[type="text"])::placeholder {
    color: #8095b3;
    opacity: 1;
}

.mg-newsletter .newsletter-form :is(button, input[type="submit"], .btn) {
    flex: 0 0 auto;
    height: var(--mg-control-h);
    padding: 0 26px;
    border: 0;
    border-radius: var(--mg-radius);
    background: var(--mg-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--mg-transition);
}

.mg-newsletter .newsletter-form :is(button, input[type="submit"], .btn):hover {
    background: var(--mg-primary-hover);
}

.mg-newsletter .mg-newsletter-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: #5a708f;
}

.mg-newsletter .mg-note-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: #5a708f;
}

/* homepage.png runs the envelope art to the right edge of the band over its
   full height, not as an inline thumbnail. Positioning it against the section
   rather than .mg-wrap (which is capped at --mg-container) is what lets it
   reach the page edge; .mg-bleed already clips the overflow. */
.mg-newsletter .mg-newsletter-art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--mg-news-art);
    pointer-events: none;
}

.mg-newsletter .mg-newsletter-art img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Validation and success messages sit under the field, full width. */
.mg-newsletter .newsletter-form :is(.help-block, .text-danger, .alert, .invalid-feedback) {
    flex: 1 1 100%;
    margin: 0;
    font-size: 13px;
}

/* Keep the copy and form clear of the art. The art starts var(--mg-news-art)
   in from the page's right edge, while .mg-wrap stops a gutter short of it -
   plus half the leftover viewport once the page is wider than --mg-container. */
@media (min-width: 992px) {
    .mg-newsletter .mg-newsletter-inner {
        padding-right: max(0px, calc(var(--mg-news-art) - var(--mg-gutter) - max(0px, (100vw - var(--mg-container)) / 2)));
    }
}

@media (max-width: 991px) {
    .mg-newsletter .mg-newsletter-art {
        display: none;
    }
}

@media (max-width: 767px) {
    .mg-newsletter {
        padding: var(--mg-section-y-sm) 0;
    }

    .mg-newsletter .mg-newsletter-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .mg-newsletter .mg-newsletter-copy h2 {
        font-size: 24px;
    }

    .mg-newsletter .newsletter-form :is(button, input[type="submit"], .btn) {
        width: 100%;
    }
}

/* ==========================================================================
   10. INNER PAGE BLOCKS
   Blocks that never appear on the homepage: the page hero that opens a
   solution, service or industry page, and the numbered process steps. Kept
   in their own section so section 4 stays a description of the homepage.
   ========================================================================== */

/* --- 10.1 Page hero ------------------------------------------------------- */
/* Shorter than the homepage hero on purpose: the first real section of an
   inner page should be reachable without scrolling on a laptop. */
:is(.mg-home, .mg-block).mg-page-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 340px;
    padding: 64px 0;
    border-bottom: 1px solid var(--mg-divider);
}

:is(.mg-home, .mg-block).mg-page-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
}

/* Laid over the photo so the copy keeps its contrast whatever the image is.
   Sits between the image and .mg-wrap, which is position:relative below. */
:is(.mg-home, .mg-block).mg-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--mg-bg) 18%, rgba(6, 16, 29, .72) 60%, rgba(6, 16, 29, .45));
}

:is(.mg-home, .mg-block).mg-page-hero .mg-wrap {
    position: relative;
    z-index: 1;
}

:is(.mg-home, .mg-block) .mg-page-hero-in {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

:is(.mg-home, .mg-block) .mg-h1 {
    margin: 0;
    font-size: 48px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--mg-heading);
}

/* --- 10.2 Process steps --------------------------------------------------- */
:is(.mg-home, .mg-block) .mg-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

:is(.mg-home, .mg-block) .mg-steps > li {
    position: relative;
    padding-top: 22px;
    border-top: 2px solid var(--mg-border);
}

/* The accent rule above the active-looking step edge, drawn on the border so
   it lines up with the rule rather than sitting on top of the text. */
:is(.mg-home, .mg-block) .mg-steps > li::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 36px;
    height: 2px;
    background: var(--mg-accent);
}

:is(.mg-home, .mg-block) .mg-step-n {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--mg-accent);
}

:is(.mg-home, .mg-block) .mg-steps h3 {
    margin-bottom: 8px;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-steps p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--mg-muted);
}

@media (max-width: 1199px) {
    :is(.mg-home, .mg-block) .mg-steps { grid-template-columns: repeat(2, 1fr); }
    :is(.mg-home, .mg-block) .mg-h1 { font-size: 40px; }
}

@media (max-width: 767px) {
    :is(.mg-home, .mg-block).mg-page-hero { min-height: 260px; padding: 44px 0; }
    :is(.mg-home, .mg-block).mg-page-hero::after {
        background: linear-gradient(180deg, rgba(6, 16, 29, .6), rgba(6, 16, 29, .88));
    }
    :is(.mg-home, .mg-block) .mg-h1 { font-size: 30px; }
    :is(.mg-home, .mg-block) .mg-page-hero-in .mg-btn { width: 100%; }
    :is(.mg-home, .mg-block) .mg-steps { grid-template-columns: 1fr; gap: 18px; }
}

/* ==========================================================================
   11. SMALL PHONE  (<= 479px)
   The 767px layer assumes roughly 390px of width. Below that the two-column
   card grid leaves about 94px of text per card, which turns a title like
   "Integrations and APIs" into four lines. One column reads better than two
   narrow ones, and the icon strip drops to two.
   ========================================================================== */
@media (max-width: 479px) {
    :is(.mg-home, .mg-block) .mg-grid6 {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    :is(.mg-home, .mg-block) .mg-card { padding: 16px; }
    :is(.mg-home, .mg-block) .mg-card h3 { font-size: 16px; }

    /* Back to a photo tile that is wide rather than letterboxed. */
    :is(.mg-home, .mg-block) .mg-ind { height: 170px; }

    :is(.mg-home, .mg-block) .mg-strip-grid { grid-template-columns: repeat(2, 1fr); }
    :is(.mg-home, .mg-block) .mg-strip-grid > :is(div, a):nth-child(3n) { border-right: 1px solid var(--mg-border); }

    :is(.mg-home, .mg-block).mg-hero h1 { font-size: 34px; }
    :is(.mg-home, .mg-block) .mg-sub { font-size: 20px; }
    :is(.mg-home, .mg-block) .mg-h1 { font-size: 26px; }
    :is(.mg-home, .mg-block) .mg-h2,
    :is(.mg-home, .mg-block) .mg-panel h2 { font-size: 22px; }
    :is(.mg-home, .mg-block).mg-cta h2 { font-size: 26px; }

    /* Three pillars across 320px leaves ~90px each; two rows is legible. */
    :is(.mg-home, .mg-block) .mg-pillars { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ==========================================================================
   12. KEYBOARD FOCUS
   Iori's reset kills focus visibility site-wide - "outline:0" twice and one
   "outline:none!important" - so tabbing through the menu, the cards or the
   newsletter field showed nothing at all. These rules put it back on the
   accent colour, which carries roughly 6:1 against both the dark surfaces
   and the light newsletter band.

   :focus-visible rather than :focus, so a mouse click never draws the ring.
   !important is needed once, to outrank Iori's own !important.
   ========================================================================== */
:is(.mg-home, .mg-block) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.header :is(a, button, input, [tabindex]):focus-visible,
.mobile-header-wrapper-style :is(a, button, input, [tabindex]):focus-visible,
.mg-lang-mobile a:focus-visible,
footer :is(a, button, input):focus-visible {
    outline: 2px solid var(--mg-accent) !important;
    outline-offset: 2px;
    border-radius: 3px;
}

/* On the one light surface the accent is the wrong weight against white, so
   the ring switches to the dark text colour there. */
.mg-newsletter :is(a, button, input, [tabindex]):focus-visible {
    outline: 2px solid var(--mg-light-text) !important;
    outline-offset: 2px;
}

/* A card is its own link target: ring the whole card, not the heading inside
   it, since the heading's ::after already spans the card. */
:is(.mg-home, .mg-block) :is(.mg-card, .mg-ind, .mg-post):focus-within {
    outline: 2px solid var(--mg-accent);
    outline-offset: 2px;
}

/* --- 10.3 FAQ ------------------------------------------------------------- */
/* A single column capped at a comfortable measure: an answer running the full
   1232px would be unreadable. */
:is(.mg-home, .mg-block) .mg-faq {
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

:is(.mg-home, .mg-block) .mg-faq details {
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-card);
    transition: border-color var(--mg-transition);
}

:is(.mg-home, .mg-block) .mg-faq details[open],
:is(.mg-home, .mg-block) .mg-faq details:hover {
    border-color: var(--mg-primary);
}

:is(.mg-home, .mg-block) .mg-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mg-heading);
    list-style: none;           /* Firefox */
}

/* Chrome and Safari draw their own triangle through this pseudo-element. */
:is(.mg-home, .mg-block) .mg-faq summary::-webkit-details-marker {
    display: none;
}

/* Our own marker: a plus that becomes a minus. Two bars, the vertical one
   rotated away when the panel is open, so the change is animated rather than
   a character swap. */
:is(.mg-home, .mg-block) .mg-faq-mark {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

:is(.mg-home, .mg-block) .mg-faq-mark::before,
:is(.mg-home, .mg-block) .mg-faq-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: var(--mg-accent);
    transition: transform var(--mg-transition);
}

:is(.mg-home, .mg-block) .mg-faq-mark::after {
    transform: rotate(90deg);
}

:is(.mg-home, .mg-block) .mg-faq details[open] .mg-faq-mark::after {
    transform: rotate(0deg);
}

:is(.mg-home, .mg-block) .mg-faq details > p {
    padding: 0 20px 20px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--mg-muted);
}

@media (max-width: 767px) {
    :is(.mg-home, .mg-block) .mg-faq summary { padding: 15px 16px; font-size: 15px; }
    :is(.mg-home, .mg-block) .mg-faq details > p { padding: 0 16px 16px; font-size: 14px; }
}

/* --- 10.4 Timeline -------------------------------------------------------- */
/* The rail is the <ol>'s left border; each dot is an ::before on the <li>,
   pulled onto the rail with a negative offset. Nothing decorative is in the
   markup, so a screen reader hears an ordered list and nothing else.

   Colours are tokens throughout: accent for the period and the dot, heading
   for the milestone, muted for the detail - the same three-tier contrast the
   cards and the process steps use. */
:is(.mg-home, .mg-block) .mg-timeline {
    max-width: 780px;
    margin: 0;
    padding: 0 0 0 30px;
    list-style: none;
    border-left: 2px solid var(--mg-border);
}

:is(.mg-home, .mg-block) .mg-timeline > li {
    position: relative;
    padding-bottom: 34px;
}

:is(.mg-home, .mg-block) .mg-timeline > li:last-child {
    padding-bottom: 0;
}

/* The dot. Ringed in the page background so the rail appears to pass behind
   it rather than through it. */
:is(.mg-home, .mg-block) .mg-timeline > li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: -39px;
    width: 14px;
    height: 14px;
    border: 3px solid var(--mg-bg);
    border-radius: 50%;
    background: var(--mg-accent);
}

:is(.mg-home, .mg-block) .mg-tl-period {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mg-accent);
}

:is(.mg-home, .mg-block) .mg-timeline h3 {
    margin-bottom: 8px;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-timeline p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--mg-muted);
}

@media (max-width: 767px) {
    :is(.mg-home, .mg-block) .mg-timeline { padding-left: 22px; }
    :is(.mg-home, .mg-block) .mg-timeline > li { padding-bottom: 26px; }
    :is(.mg-home, .mg-block) .mg-timeline > li::before { left: -31px; width: 12px; height: 12px; }
    :is(.mg-home, .mg-block) .mg-timeline h3 { font-size: 17px; }
    :is(.mg-home, .mg-block) .mg-timeline p { font-size: 14px; }
}

/* ==========================================================================
   13. IN-PAGE ANCHORS
   The header is position:fixed once it sticks, so a browser jumping to #id
   scrolls the target to y=0 and the sticky bar covers its heading. Every
   MEGITS section that carries an id reserves the bar's height plus a little
   breathing room above itself.

   .main-header is min-height:80px, so 100px leaves 20px of air.
   ========================================================================== */
:is(.mg-home, .mg-block)[id],
:is(.mg-home, .mg-block) [id] {
    scroll-margin-top: 100px;
}

/* Smooth only for people who have not asked the system to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* --- 10.5 Shift ----------------------------------------------------------- */
/* Two columns of equal width. The left is the reader's current situation and
   is styled down - muted text, plain border, no icons - so the eye settles on
   the right. Same trick a good proposal uses: state the problem plainly, then
   let the solution carry the colour. */
:is(.mg-home, .mg-block) .mg-shift {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

:is(.mg-home, .mg-block) .mg-shift-col {
    padding: 28px;
    border-radius: var(--mg-radius-card);
}

:is(.mg-home, .mg-block) .mg-shift-col h3 {
    margin-bottom: 18px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
}

:is(.mg-home, .mg-block) .mg-shift-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

:is(.mg-home, .mg-block) .mg-shift-col li {
    font-size: 15px;
    line-height: 1.6;
}

/* Left: quieter. A dash rather than a tick, because nothing here is a win. */
:is(.mg-home, .mg-block) .mg-shift-now {
    border: 1px solid var(--mg-border);
}

:is(.mg-home, .mg-block) .mg-shift-now h3 {
    color: var(--mg-text);
}

:is(.mg-home, .mg-block) .mg-shift-now li {
    position: relative;
    padding-left: 20px;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-shift-now li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 10px;
    height: 1px;
    background: var(--mg-muted);
    opacity: .7;
}

/* Right: the outcome. Surface, accent border and ticks. */
:is(.mg-home, .mg-block) .mg-shift-next {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--mg-surface);
    border: 1px solid var(--mg-primary);
}

:is(.mg-home, .mg-block) .mg-shift-next h3 {
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-shift-next li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--mg-text);
}

:is(.mg-home, .mg-block) .mg-shift-tick {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--mg-accent);
}

:is(.mg-home, .mg-block) .mg-shift-next .mg-btn {
    margin-top: 22px;
}

@media (max-width: 767px) {
    :is(.mg-home, .mg-block) .mg-shift { grid-template-columns: 1fr; gap: 14px; }
    :is(.mg-home, .mg-block) .mg-shift-col { padding: 20px; }
    :is(.mg-home, .mg-block) .mg-shift-col h3 { font-size: 16px; margin-bottom: 14px; }
    :is(.mg-home, .mg-block) .mg-shift-col li { font-size: 14px; }
    :is(.mg-home, .mg-block) .mg-shift-next .mg-btn { width: 100%; }
}

/* --- 10.6 Let's talk ------------------------------------------------------ */
/* The plugin's own markup is Bootstrap-shaped: .contact-form-row.row wrapping
   .col-md-6 groups, each with .form-label and .contact-form-input.form-control.
   We restyle those in place rather than rewriting the form, so the plugin
   keeps control of fields, validation and captcha. */
:is(.mg-home, .mg-block) .mg-lt-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 28px;
    align-items: start;
}

:is(.mg-home, .mg-block) .mg-lt-aside {
    padding: 28px;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-card);
}

:is(.mg-home, .mg-block) .mg-lt-aside h3 {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--mg-heading);
}

/* Numbered with a counter so the markup stays a plain <ol>. */
:is(.mg-home, .mg-block) .mg-lt-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mg-lt;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

:is(.mg-home, .mg-block) .mg-lt-steps > li {
    counter-increment: mg-lt;
    position: relative;
    padding-left: 38px;
}

:is(.mg-home, .mg-block) .mg-lt-steps > li::before {
    content: counter(mg-lt);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--mg-primary);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: var(--mg-accent);
}

:is(.mg-home, .mg-block) .mg-lt-steps strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-lt-steps span {
    font-size: 14px;
    line-height: 1.6;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-lt-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--mg-divider);
    font-size: 13px;
    line-height: 1.55;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-lt-note-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--mg-accent);
}

/* --- the plugin's fields -------------------------------------------------- */
:is(.mg-home, .mg-block) .mg-lt-form {
    padding: 28px;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-card);
}

:is(.mg-home, .mg-block) .mg-lt-fields .form-label {
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--mg-text);
}

/* Bootstrap marks required fields with a red asterisk; ours is the accent. */
:is(.mg-home, .mg-block) .mg-lt-fields .form-label.required::after {
    content: " *";
    color: var(--mg-accent);
}

/* Target by element, not by class: the plugin gives the phone input
   .form-control but gives name and email only .contact-form-input, so a
   selector keyed on .form-control styled exactly one field and left the
   rest on the plugin's white default. */
:is(.mg-home, .mg-block) .mg-lt-fields :is(
    input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
) {
    width: 100%;
    min-height: var(--mg-control-h);
    padding: 12px 14px;
    background: var(--mg-bg);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    color: var(--mg-heading);
    font-size: 15px;
    line-height: 1.5;
    transition: border-color var(--mg-transition);
}

:is(.mg-home, .mg-block) .mg-lt-fields :is(input, textarea)::placeholder {
    color: var(--mg-muted);
    opacity: .75;
}

:is(.mg-home, .mg-block) .mg-lt-fields :is(input, textarea, select):focus {
    border-color: var(--mg-primary);
}

:is(.mg-home, .mg-block) .mg-lt-fields textarea {
    min-height: 130px;
    resize: vertical;
}

:is(.mg-home, .mg-block) .mg-lt-fields .contact-form-group {
    margin-bottom: 16px;
}

/* Iori relabels the submit with its own brand classes; retint rather than
   fight it, and match the height of every other MEGITS button. */
:is(.mg-home, .mg-block) .mg-lt-fields :is(button[type="submit"], input[type="submit"], .btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    min-height: var(--mg-control-h);
    padding: 0 28px;
    background: var(--mg-primary);
    border: 0;
    border-radius: var(--mg-radius);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    transition: background var(--mg-transition);
}

:is(.mg-home, .mg-block) .mg-lt-fields :is(button[type="submit"], input[type="submit"], .btn):hover {
    background: var(--mg-primary-hover);
    color: #fff;
}

/* Validation and success messages. */
:is(.mg-home, .mg-block) .mg-lt-fields :is(.help-block, .text-danger, .invalid-feedback) {
    margin-top: 6px;
    font-size: 13px;
    color: #ff9aa9;
}

:is(.mg-home, .mg-block) .mg-lt-fields .alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: var(--mg-radius);
    font-size: 14px;
}

@media (max-width: 991px) {
    :is(.mg-home, .mg-block) .mg-lt-grid { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 767px) {
    :is(.mg-home, .mg-block) .mg-lt-aside,
    :is(.mg-home, .mg-block) .mg-lt-form { padding: 20px; }
    :is(.mg-home, .mg-block) .mg-lt-fields :is(button[type="submit"], input[type="submit"], .btn) { width: 100%; }
}

/* --- 10.7 Phone field and select ------------------------------------------ */
/* intl-tel-input wraps the phone input at runtime and paints its own flag
   button with background-color:rgba(0,0,0,.05). Over a field that is already
   --mg-bg that reads as a black block beside the number, which is what made
   the phone field look different from every other field on the form.

   Its country dropdown is background-color:#fff with dark text, so it also
   has to come onto the palette or it flashes white on a dark page. */
:is(.mg-home, .mg-block) .mg-lt-fields .iti {
    width: 100%;
    display: block;
}

:is(.mg-home, .mg-block) .mg-lt-fields .iti__selected-flag,
:is(.mg-home, .mg-block) .mg-lt-fields .iti__flag-container:hover .iti__selected-flag {
    background-color: transparent;
    border-radius: var(--mg-radius) 0 0 var(--mg-radius);
}

:is(.mg-home, .mg-block) .mg-lt-fields .iti__flag-container:hover .iti__selected-flag {
    background-color: rgba(255, 255, 255, .05);
}

:is(.mg-home, .mg-block) .mg-lt-fields .iti__arrow {
    border-top-color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-lt-fields .iti__arrow--up {
    border-bottom-color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-lt-fields .iti__country-list {
    background-color: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    box-shadow: var(--mg-shadow-pop);
    color: var(--mg-text);
}

:is(.mg-home, .mg-block) .mg-lt-fields .iti__country {
    padding: 8px 10px;
    color: var(--mg-text);
}

:is(.mg-home, .mg-block) .mg-lt-fields .iti__country.iti__highlight,
:is(.mg-home, .mg-block) .mg-lt-fields .iti__country:hover {
    background-color: rgba(255, 255, 255, .07);
}

:is(.mg-home, .mg-block) .mg-lt-fields .iti__dial-code {
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-lt-fields .iti__divider {
    border-bottom-color: var(--mg-border);
}

/* A native <select> keeps the OS arrow, which is dark-on-dark on some
   platforms. Draw our own chevron and leave room for it. */
:is(.mg-home, .mg-block) .mg-lt-fields select {
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3b3c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}

/* The options list is drawn by the OS, so give it explicit colours rather
   than inheriting white-on-white. */
:is(.mg-home, .mg-block) .mg-lt-fields select option {
    background: var(--mg-surface);
    color: var(--mg-heading);
}

/* --- 10.8 Typed text and autofill ----------------------------------------- */
/* The plugin sets .contact-form-input{color:#555}, which on a near-black field
   is barely readable. Stated again here at higher specificity so what someone
   types is white, in every field type including the phone input that carries
   its own classes. */
:is(.mg-home, .mg-block) .mg-lt-fields :is(input, textarea, select),
:is(.mg-home, .mg-block) .mg-lt-fields input.contact-form-input,
:is(.mg-home, .mg-block) .mg-lt-fields input.js-phone-number-mask {
    color: var(--mg-heading);
    caret-color: var(--mg-accent);
}

/* Chrome paints autofilled fields with its own near-white background and
   black text, and ignores background-color. The only reliable override is a
   large inset shadow plus -webkit-text-fill-color, which it does honour. */
:is(.mg-home, .mg-block) .mg-lt-fields :is(input, textarea, select):-webkit-autofill,
:is(.mg-home, .mg-block) .mg-lt-fields :is(input, textarea, select):-webkit-autofill:hover,
:is(.mg-home, .mg-block) .mg-lt-fields :is(input, textarea, select):-webkit-autofill:focus {
    -webkit-text-fill-color: var(--mg-heading);
    -webkit-box-shadow: 0 0 0 1000px var(--mg-bg) inset;
    box-shadow: 0 0 0 1000px var(--mg-bg) inset;
    caret-color: var(--mg-heading);
    transition: background-color 9999s ease-in-out 0s;
}

/* The terms row: make the link obviously a link. */
:is(.mg-home, .mg-block) .mg-lt-fields .form-check-label,
:is(.mg-home, .mg-block) .mg-lt-fields label:has(input[type="checkbox"]) {
    font-size: 14px;
    line-height: 1.55;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-lt-fields a {
    color: var(--mg-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

:is(.mg-home, .mg-block) .mg-lt-fields a:hover {
    color: var(--mg-link-hover);
}

/* --- 10.10 Contact info cards --------------------------------------------- */
:is(.mg-home, .mg-block) .mg-cinfo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

:is(.mg-home, .mg-block) .mg-cinfo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 22px;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-card);
    transition: border-color var(--mg-transition), transform var(--mg-transition);
}

:is(.mg-home, .mg-block) a.mg-cinfo-card:hover {
    border-color: var(--mg-primary);
    transform: translateY(-3px);
}

:is(.mg-home, .mg-block) .mg-cinfo-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mg-accent);
}

:is(.mg-home, .mg-block) .mg-cinfo-card strong {
    font-size: 17px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--mg-heading);
    word-break: break-word;
}

:is(.mg-home, .mg-block) .mg-cinfo-note {
    font-size: 13px;
    line-height: 1.55;
    color: var(--mg-muted);
}

/* --- 10.11 Map ------------------------------------------------------------ */
/* The map is the background and the panel sits over it, so the section is a
   positioning context and .mg-wrap is lifted above the iframe. */
:is(.mg-home, .mg-block).mg-map {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 520px;
    padding: 56px 0;
    border-top: 1px solid var(--mg-divider);
    border-bottom: 1px solid var(--mg-divider);
}

:is(.mg-home, .mg-block) .mg-map-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

:is(.mg-home, .mg-block) .mg-map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* Google's default map is bright white against a dark site. Damping it
       and dropping the saturation puts it on the same palette without a
       paid styled-map key. */
    filter: invert(92%) hue-rotate(180deg) saturate(.55) contrast(.92);
}

:is(.mg-home, .mg-block).mg-map .mg-wrap {
    position: relative;
    z-index: 1;
}

:is(.mg-home, .mg-block) .mg-map-panel {
    max-width: 420px;
    padding: 30px;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-card);
    box-shadow: var(--mg-shadow-pop);
}

:is(.mg-home, .mg-block) .mg-map-panel .mg-h2 {
    margin-bottom: 16px;
    font-size: 28px;
}

:is(.mg-home, .mg-block) .mg-map-address {
    font-size: 16px;
    line-height: 1.6;
    color: var(--mg-text);
}

:is(.mg-home, .mg-block) .mg-map-hours {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--mg-text);
}

:is(.mg-home, .mg-block) .mg-map-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--mg-accent);
}

:is(.mg-home, .mg-block) .mg-map-note {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-map-panel .mg-btn {
    margin-top: 22px;
}

@media (max-width: 1199px) {
    :is(.mg-home, .mg-block) .mg-cinfo { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    :is(.mg-home, .mg-block) .mg-cinfo { grid-template-columns: 1fr; gap: 12px; }
    :is(.mg-home, .mg-block) .mg-cinfo-card { padding: 20px; }

    /* Stacked rather than overlaid: a panel over a map on a phone leaves
       neither readable. */
    :is(.mg-home, .mg-block).mg-map {
        display: block;
        min-height: 0;
        padding: 0;
    }
    :is(.mg-home, .mg-block) .mg-map-frame { position: relative; height: 260px; }
    :is(.mg-home, .mg-block) .mg-map-panel {
        max-width: none;
        padding: 24px;
        border-radius: 0;
        border-width: 1px 0 0;
        box-shadow: none;
    }
    :is(.mg-home, .mg-block).mg-map .mg-wrap { padding: 0; }
    :is(.mg-home, .mg-block) .mg-map-panel .mg-btn { width: 100%; }
}

/* --- 10.12 Prose ---------------------------------------------------------- */
/* Capped at 760px: policy text running the full 1232px container is
   genuinely hard to read, and legal copy is the text people are least
   willing to fight through. */
:is(.mg-home, .mg-block) .mg-prose-head {
    max-width: 760px;
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--mg-divider);
}

:is(.mg-home, .mg-block) .mg-prose-updated {
    margin-top: 14px;
    font-size: 14px;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-prose {
    max-width: 760px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--mg-text);
}

:is(.mg-home, .mg-block) .mg-prose > * + * {
    margin-top: 18px;
}

:is(.mg-home, .mg-block) .mg-prose h2 {
    margin-top: 44px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-prose h3 {
    margin-top: 32px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-prose :is(ul, ol) {
    margin-left: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

:is(.mg-home, .mg-block) .mg-prose ul { list-style: disc; }
:is(.mg-home, .mg-block) .mg-prose ol { list-style: decimal; }

:is(.mg-home, .mg-block) .mg-prose li { color: var(--mg-text); }

:is(.mg-home, .mg-block) .mg-prose strong { color: var(--mg-heading); }

:is(.mg-home, .mg-block) .mg-prose a {
    color: var(--mg-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

:is(.mg-home, .mg-block) .mg-prose a:hover { color: var(--mg-link-hover); }

/* Definition-style rows used for the cookie tables. */
:is(.mg-home, .mg-block) .mg-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

:is(.mg-home, .mg-block) .mg-prose :is(th, td) {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--mg-divider);
}

:is(.mg-home, .mg-block) .mg-prose th {
    font-weight: 700;
    color: var(--mg-heading);
}

@media (max-width: 767px) {
    :is(.mg-home, .mg-block) .mg-prose { font-size: 15px; }
    :is(.mg-home, .mg-block) .mg-prose h2 { font-size: 21px; margin-top: 34px; }
    :is(.mg-home, .mg-block) .mg-prose-head { margin-bottom: 26px; padding-bottom: 20px; }

    /* Narrow tables scroll rather than squeeze. */
    :is(.mg-home, .mg-block) .mg-prose table { display: block; overflow-x: auto; }
}

/* --- 10.13 Newsletter art framing ----------------------------------------- */
/* The envelope photo has its subject at roughly 70% across with an empty
   white third on the left, so at the band's narrow aspect most of what shows
   is blank. homepage.png frames the envelope much tighter.

   Scaling from an origin near the subject crops the empty side away without
   touching the file, so the same asset still serves anywhere else it is used.
   overflow is needed on the wrapper because the scaled image would otherwise
   spill past the band. */
.mg-newsletter .mg-newsletter-art {
    overflow: hidden;
}

.mg-newsletter .mg-newsletter-art img {
    transform: scale(1.28);
    transform-origin: 72% 50%;
}

@media (max-width: 991px) {
    /* The art is hidden below 992px, so nothing to frame. */
    .mg-newsletter .mg-newsletter-art img { transform: none; }
}

/* --- 10.14 Spotlight ------------------------------------------------------ */
:is(.mg-home, .mg-block) .mg-spot {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

:is(.mg-home, .mg-block) .mg-spot-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

/* Every second row swaps sides. The media keeps its source order in the DOM,
   so a screen reader always hears the heading before the picture. */
:is(.mg-home, .mg-block) .mg-spot-row:nth-child(even) .mg-spot-media {
    order: 2;
}

:is(.mg-home, .mg-block) .mg-spot-media {
    position: relative;
    border-radius: var(--mg-radius-card);
    overflow: hidden;
    border: 1px solid var(--mg-border);
}

:is(.mg-home, .mg-block) .mg-spot-media img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

/* Used until a real screenshot exists: a tinted panel with the row's icon,
   so the layout still reads as designed instead of collapsing. */
:is(.mg-home, .mg-block) .mg-spot-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    background:
        radial-gradient(120% 120% at 70% 20%, rgba(47, 128, 255, .18), transparent 60%),
        var(--mg-surface);
}

:is(.mg-home, .mg-block) .mg-spot-placeholder .mg-ic {
    width: 92px;
    height: 92px;
    opacity: .85;
}

/* The stat sits on the image, bottom left, like a caption on a product shot. */
:is(.mg-home, .mg-block) .mg-spot-stat {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    background: rgba(6, 16, 29, .88);
    border: 1px solid var(--mg-primary);
    border-radius: var(--mg-radius);
    backdrop-filter: blur(4px);
}

:is(.mg-home, .mg-block) .mg-spot-stat strong {
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-spot-stat span {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mg-accent);
}

:is(.mg-home, .mg-block) .mg-spot-body h3 {
    margin-bottom: 14px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-spot-lead {
    font-size: 17px;
    line-height: 1.65;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-spot-points {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

:is(.mg-home, .mg-block) .mg-spot-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--mg-text);
}

:is(.mg-home, .mg-block) .mg-spot-tick {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--mg-accent);
}

:is(.mg-home, .mg-block) .mg-spot-body .mg-link {
    margin-top: 22px;
}

/* --- 10.15 Stack ---------------------------------------------------------- */
/* Each layer is indented further than the one above, so the block reads as
   something wrapped around a core. --mg-stack-i is set per row in the markup,
   which is what lets a new layer added in the admin inherit the pattern with
   no new CSS. */
:is(.mg-home, .mg-block) .mg-stack {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

:is(.mg-home, .mg-block) .mg-stack > li {
    padding-inline: calc((var(--mg-stack-i) - 1) * 26px);
}

:is(.mg-home, .mg-block) .mg-stack-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border-radius: var(--mg-radius-card);
    border: 1px solid var(--mg-border);
    /* Deeper layers sit on a slightly stronger surface, so depth reads as
       density rather than only as indentation. */
    background:
        linear-gradient(90deg,
            rgba(47, 128, 255, calc(.04 + var(--mg-stack-i) * .025)),
            transparent 65%),
        var(--mg-surface);
}

:is(.mg-home, .mg-block) .mg-stack-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: var(--mg-accent);
}

:is(.mg-home, .mg-block) .mg-stack-bar h3 {
    margin-bottom: 4px;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-stack-bar p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-stack-tag {
    margin-left: auto;
    flex-shrink: 0;
    padding: 5px 11px;
    border: 1px solid var(--mg-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mg-accent);
}

/* The thing being protected. */
:is(.mg-home, .mg-block) .mg-stack-core .mg-stack-bar {
    border-color: var(--mg-primary);
    background:
        linear-gradient(90deg, rgba(47, 128, 255, .22), rgba(47, 128, 255, .06) 70%),
        var(--mg-surface);
}

@media (max-width: 991px) {
    :is(.mg-home, .mg-block) .mg-spot-row { grid-template-columns: 1fr; gap: 26px; }
    :is(.mg-home, .mg-block) .mg-spot-row:nth-child(even) .mg-spot-media { order: 0; }
    :is(.mg-home, .mg-block) .mg-spot { gap: 48px; }
    :is(.mg-home, .mg-block) .mg-spot-body h3 { font-size: 24px; }

    /* Indentation eats the text on a narrow screen; the order alone carries
       the meaning there. */
    :is(.mg-home, .mg-block) .mg-stack > li { padding-inline: 0; }
    :is(.mg-home, .mg-block) .mg-stack-bar { padding: 16px 18px; gap: 14px; }
    :is(.mg-home, .mg-block) .mg-stack-tag { display: none; }
}

/* --- 10.16 People --------------------------------------------------------- */
:is(.mg-home, .mg-block) .mg-people {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

:is(.mg-home, .mg-block) .mg-person {
    display: flex;
    flex-direction: column;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-card);
    overflow: hidden;
    transition: border-color var(--mg-transition);
}

:is(.mg-home, .mg-block) .mg-person:hover {
    border-color: var(--mg-primary);
}

:is(.mg-home, .mg-block) .mg-person-portrait {
    position: relative;
    aspect-ratio: 5 / 6;
    background:
        radial-gradient(120% 120% at 60% 15%, rgba(47, 128, 255, .22), transparent 62%),
        var(--mg-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

:is(.mg-home, .mg-block) .mg-person-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Initials rather than a silhouette: it needs no asset and does not look
   like a missing image. */
:is(.mg-home, .mg-block) .mg-person-initials {
    font-size: 54px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--mg-accent);
    opacity: .9;
}

:is(.mg-home, .mg-block) .mg-person-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px;
}

:is(.mg-home, .mg-block) .mg-person-body h3 {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-person-role {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mg-accent);
}

:is(.mg-home, .mg-block) .mg-person-bio {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-person-body .mg-link {
    margin-top: 10px;
    font-size: 14px;
}

@media (max-width: 991px) {
    :is(.mg-home, .mg-block) .mg-people { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    :is(.mg-home, .mg-block) .mg-people { grid-template-columns: 1fr; }
}

/* --- 1.4 Footer social marks ---------------------------------------------- */
/* Outside the .mg-home / .mg-block scope on purpose: the footer is site
   chrome and appears on every page, block or not. */
.mg-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mg-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    color: #fff;
    transition: color var(--mg-transition),
                border-color var(--mg-transition),
                background var(--mg-transition);
}

.mg-social:hover,
.mg-social:focus-visible {
    color: var(--mg-primary);
    border-color: var(--mg-primary);
    background: rgba(47, 128, 255, .1);
}

.mg-social-icon {
    width: 20px;
    height: 20px;
    /* The brand glyphs carry their own fill="currentColor"; clearing the
       shared stroke stops them rendering as outlined logos. */
    stroke: none;
    color: inherit;
}

/* An unusual network still configured as an uploaded image. */
.mg-social img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* --- 10.17 Hub cards ------------------------------------------------------ */
:is(.mg-home, .mg-block) .mg-hub {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

:is(.mg-home, .mg-block) .mg-hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px 26px;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-card);
    transition: border-color var(--mg-transition), transform var(--mg-transition);
}

:is(.mg-home, .mg-block) a.mg-hub-card:hover {
    border-color: var(--mg-primary);
    transform: translateY(-3px);
}

/* The icon sits in a tinted tile rather than bare, which gives the card a
   focal point at this larger size. */
:is(.mg-home, .mg-block) .mg-hub-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--mg-radius);
    background: rgba(47, 128, 255, .12);
    border: 1px solid var(--mg-border);
}

:is(.mg-home, .mg-block) .mg-hub-icon .mg-ic {
    width: 26px;
    height: 26px;
}

:is(.mg-home, .mg-block) .mg-hub-card h3 {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-hub-card p {
    flex-grow: 1;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-hub-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    color: var(--mg-link);
}

:is(.mg-home, .mg-block) .mg-hub-meta {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mg-accent);
}

/* --- 10.18 Knowledge base ------------------------------------------------- */
:is(.mg-home, .mg-block) .mg-kb {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

:is(.mg-home, .mg-block) .mg-kb-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mg-divider);
}

:is(.mg-home, .mg-block) .mg-kb-head h3 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--mg-heading);
}

:is(.mg-home, .mg-block) .mg-kb-head span {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mg-muted);
}

/* The answers come from a rich-text editor, so they can hold paragraphs and
   lists rather than the single <p> the FAQ block assumes. */
:is(.mg-home, .mg-block) .mg-kb-answer {
    padding: 0 20px 20px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--mg-muted);
}

:is(.mg-home, .mg-block) .mg-kb-answer > * + * { margin-top: 12px; }
:is(.mg-home, .mg-block) .mg-kb-answer :is(ul, ol) { padding-left: 20px; }
:is(.mg-home, .mg-block) .mg-kb-answer ul { list-style: disc; }
:is(.mg-home, .mg-block) .mg-kb-answer ol { list-style: decimal; }
:is(.mg-home, .mg-block) .mg-kb-answer strong { color: var(--mg-heading); }

:is(.mg-home, .mg-block) .mg-kb-answer a {
    color: var(--mg-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 1199px) {
    :is(.mg-home, .mg-block) .mg-hub { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    :is(.mg-home, .mg-block) .mg-hub { grid-template-columns: 1fr; }
    :is(.mg-home, .mg-block) .mg-hub-card { padding: 22px 20px; }
    :is(.mg-home, .mg-block) .mg-kb { gap: 30px; }
    :is(.mg-home, .mg-block) .mg-kb-answer { padding: 0 16px 16px; font-size: 14px; }
}

/* ==========================================================================
   14. BLOG INDEX PAGINATION
   Iori owns .box-pagination and paints it for a light page. On the MEGITS
   dark shell the links vanish, so the surfaces and the active state are
   restated here. The wrapper only exists to give the row room.
   ========================================================================== */
:is(.mg-home, .mg-block) .mg-pager {
    margin-top: 44px;
}

:is(.mg-home, .mg-block) .mg-pager .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.mg-home, .mg-block) .mg-pager .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--mg-border);
    border-radius: 10px;
    background: var(--mg-surface);
    color: var(--mg-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

:is(.mg-home, .mg-block) .mg-pager .page-link:hover {
    border-color: var(--mg-primary);
    color: #fff;
}

:is(.mg-home, .mg-block) .mg-pager .page-link.active {
    border-color: var(--mg-primary);
    background: var(--mg-primary);
    color: #fff;
}

:is(.mg-home, .mg-block) .mg-pager .page-link.disabled {
    opacity: .4;
    pointer-events: none;
}

/* The prev/next links carry no text, so they need a glyph of their own. */
:is(.mg-home, .mg-block) .mg-pager .page-prev::before { content: '\2039'; font-size: 22px; }
:is(.mg-home, .mg-block) .mg-pager .page-next::before { content: '\203A'; font-size: 22px; }

/* ==========================================================================
   15. NEWSLETTER CAPTCHA
   The widget used to be injected inside the input-group, between the email
   field and the Subscribe button, which broke that row apart. It now follows
   the group, so these rules give it a line of its own underneath and reserve
   the height of Google's standard widget (304 x 78) to stop the band jumping
   as the iframe loads.
   ========================================================================== */
.mg-newsletter .newsletter-form > .input-group {
    flex: 1 1 100%;
    margin-bottom: 0;
}

.mg-newsletter .newsletter-form > .position-relative {
    flex: 1 1 100%;
    margin-bottom: 0;
}

/* Separate rule: an unsupported :has() would invalidate a whole selector
   list, and this one only sharpens the rule above. */
.mg-newsletter .newsletter-form > :has(> .g-recaptcha) {
    flex: 1 1 100%;
    margin-bottom: 0;
}

.mg-newsletter .newsletter-form .g-recaptcha {
    min-height: 78px;
}