/* MarbleTech base design system (served from 'self'; CSP style-src 'self').
   Every value comes from the theme's custom properties (/theme.css, generated from validated tokens) with a
   fallback, so a page renders without it too. Selectors stay at single-class specificity: a node's compiled style
   ([data-mt-style], loaded later) always wins over these defaults. Brand-specific flourishes belong to an Edition
   stylesheet, never here. */

/* ---------- Foundations ---------- */
:root {
    --u: var(--mt-space, 8px);
    --step-1: calc(var(--mt-font-size, 16px) * var(--mt-scale, 1.25));
    --step-2: calc(var(--step-1) * var(--mt-scale, 1.25));
    --step-3: calc(var(--step-2) * var(--mt-scale, 1.25));
    --step-4: calc(var(--step-3) * var(--mt-scale, 1.25));
    --step-5: calc(var(--step-4) * var(--mt-scale, 1.25));
    --content: 72rem;
    --measure: 42rem;
    --gutter: clamp(16px, 4vw, 40px);
    --ring: 0 0 0 3px color-mix(in srgb, var(--mt-color-primary, #3a3aff) 45%, transparent);
    --shadow-1: 0 1px 2px rgb(0 0 0 / .08), 0 1px 1px rgb(0 0 0 / .04);
    --shadow-2: 0 12px 32px -12px rgb(0 0 0 / .28), 0 2px 6px rgb(0 0 0 / .08);
    --ease: cubic-bezier(.2, .7, .2, 1);
    color-scheme: light dark;
    font-family: var(--mt-font, system-ui, sans-serif);
    font-size: var(--mt-font-size, 16px);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--mt-color-background, Canvas); color: var(--mt-color-text, CanvasText); }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--mt-color-primary, LinkText); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--mt-radius-small, 4px); }
::selection { background: color-mix(in srgb, var(--mt-color-primary, #3a3aff) 30%, transparent); }
h1, h2, h3, h4, h5, h6 { font-family: var(--mt-heading-font, var(--mt-font, inherit)); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 calc(var(--u) * 2); text-wrap: balance; }
h1 { font-size: clamp(var(--step-3), 5vw, var(--step-5)); font-weight: 700; }
h2 { font-size: clamp(var(--step-2), 3.6vw, var(--step-4)); font-weight: 700; }
h3 { font-size: var(--step-2); font-weight: 600; }
h4 { font-size: var(--step-1); font-weight: 600; }
h5, h6 { font-size: var(--mt-font-size, 16px); font-weight: 600; }
p { margin: 0 0 calc(var(--u) * 2); text-wrap: pretty; }
hr { border: 0; border-top: 1px solid var(--mt-color-border, #8884); }
.skip-link { position: absolute; left: var(--gutter); top: -100px; padding: var(--u) calc(var(--u) * 2); background: var(--mt-color-primary, #3a3aff); color: var(--mt-color-primary-contrast, #fff); z-index: 100; border-radius: var(--mt-radius-small, 4px); }
.skip-link:focus { top: var(--u); }

/* ---------- Forms (sign-in, password, installer) ---------- */
label { display: block; margin: 0 0 calc(var(--u) * 2); font-weight: 600; font-size: .95em; }
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
    display: block; width: 100%; margin-top: calc(var(--u) * .75); padding: calc(var(--u) * 1.25) calc(var(--u) * 1.5);
    background: var(--mt-color-surface, transparent); color: var(--mt-color-text, inherit);
    border: 1px solid var(--mt-color-border, #8886); border-radius: var(--mt-radius-medium, 8px); font-weight: 400;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--mt-color-primary, #3a3aff); box-shadow: var(--ring); }
button, .button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--u); cursor: pointer;
    padding: calc(var(--u) * 1.25) calc(var(--u) * 2.5); border: 0; border-radius: var(--mt-radius-medium, 8px);
    background: var(--mt-color-primary, #3a3aff); color: var(--mt-color-primary-contrast, #fff); font-weight: 600;
    transition: transform .15s var(--ease), filter .15s var(--ease), box-shadow .15s var(--ease);
}
button:hover, .button:hover { filter: brightness(1.08); }
button:active, .button:active { transform: translateY(1px); }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--mt-color-border, #8884); padding: calc(var(--u) * .75) var(--u); text-align: left; }
.flash { padding: calc(var(--u) * 1.25) calc(var(--u) * 2); border-radius: var(--mt-radius-medium, 8px); border: 1px solid transparent; background: var(--mt-color-surface, #8881); }
.flash-error { border-color: var(--mt-color-danger, #d64545); background: color-mix(in srgb, var(--mt-color-danger, #d64545) 12%, transparent); }
.flash-ok { border-color: var(--mt-color-success, #1f9d55); background: color-mix(in srgb, var(--mt-color-success, #1f9d55) 12%, transparent); }
.flash-info { border-color: var(--mt-color-primary, #3a3aff); background: color-mix(in srgb, var(--mt-color-primary, #3a3aff) 10%, transparent); }
.flash-warning { border-color: var(--mt-color-warning, #c98a00); background: color-mix(in srgb, var(--mt-color-warning, #c98a00) 12%, transparent); }

/* The sign-in and password pages (layouts/base): one centred card. */
.auth { min-height: 100vh; display: grid; place-items: center; padding: calc(var(--u) * 4) var(--gutter);
    background: radial-gradient(60rem 30rem at 50% -10%, color-mix(in srgb, var(--mt-color-primary, #3a3aff) 18%, transparent), transparent 70%), var(--mt-color-background, Canvas); }
.auth__card { width: 100%; max-width: 26rem; padding: calc(var(--u) * 5) calc(var(--u) * 4); background: var(--mt-color-surface-raised, var(--mt-color-surface, Canvas));
    border: 1px solid var(--mt-color-border, #8884); border-radius: var(--mt-radius-large, 16px); box-shadow: var(--shadow-2); }
.auth__brand { display: block; margin-bottom: calc(var(--u) * 3); font-family: var(--mt-label-font, inherit); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mt-color-muted, GrayText); }
.auth__card h1 { font-size: var(--step-3); margin-bottom: calc(var(--u) * 3); }
.auth__card button { width: 100%; margin-top: var(--u); }
.auth__card--wide { max-width: 40rem; }
.install__cron { overflow-x: auto; padding: calc(var(--u) * 1.5); border-radius: var(--mt-radius-small, 4px); background: var(--mt-color-surface, #8881); font-size: .85em; }
/* Install demo: the optional checkbox on the first-administrator form. */
.install__option { display: flex; gap: var(--u); align-items: flex-start; font-weight: 400; }
.install__option input { flex: none; margin-top: .25em; }
.auth__card h2 { font-size: var(--step-1); margin-top: calc(var(--u) * 3); }
.auth__card--wide button { width: auto; }
.install__lede { color: var(--mt-color-muted, GrayText); }
.install__steps { list-style: none; display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1); padding: 0; margin: calc(var(--u) * 2) 0 calc(var(--u) * 3); }
.install__steps li { display: inline-flex; align-items: center; gap: var(--u); padding: calc(var(--u) * .75) calc(var(--u) * 1.5); border-radius: 999px; font-size: .9em; color: var(--mt-color-muted, GrayText); border: 1px solid var(--mt-color-border, #8884); }
.install__steps li span { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; font-size: .8em; font-weight: 700; background: var(--mt-color-surface, #8882); }
.install__steps li.is-current { color: var(--mt-color-text, inherit); border-color: var(--mt-color-primary, #3a3aff); }
.install__steps li.is-current span { background: var(--mt-color-primary, #3a3aff); color: var(--mt-color-primary-contrast, #fff); }
.install__steps li.is-done span { background: var(--mt-color-success, #1f9d55); color: #fff; }
.install__details { margin: calc(var(--u) * 2) 0; padding: calc(var(--u) * 1.5) calc(var(--u) * 2); border: 1px solid var(--mt-color-border, #8884); border-radius: var(--mt-radius-medium, 8px); font-size: .9em; }
.install__details summary { cursor: pointer; font-weight: 600; color: var(--mt-color-muted, GrayText); }
.install__details dl { display: grid; grid-template-columns: max-content 1fr; gap: calc(var(--u) * .5) calc(var(--u) * 2); }
.install__details dd { margin: 0; font-family: var(--mt-label-font, ui-monospace, monospace); }
.auth__card fieldset { border: 1px solid var(--mt-color-border, #8884); border-radius: var(--mt-radius-medium, 8px); padding: calc(var(--u) * 2); margin: 0 0 calc(var(--u) * 2); }
.auth__card legend { padding: 0 var(--u); font-weight: 600; }
.auth__card fieldset p { color: var(--mt-color-muted, GrayText); font-size: .9em; }
.auth__card p:last-child { margin: calc(var(--u) * 3) 0 0; text-align: center; font-size: .95em; }

/* ---------- Public layout ---------- */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--mt-color-border, #8884);
    background: color-mix(in srgb, var(--mt-color-background, Canvas) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); }
.site-header__inner, .site-footer__inner { max-width: var(--content); margin: 0 auto; padding: calc(var(--u) * 2) var(--gutter); display: flex; align-items: center; gap: calc(var(--u) * 3); }
.site-header__name { font-family: var(--mt-heading-font, inherit); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; text-decoration: none; color: var(--mt-color-text, inherit); margin-right: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * .5); }
.site-nav li { position: relative; }
.site-nav a, .site-nav span { display: block; padding: var(--u) calc(var(--u) * 1.5); border-radius: var(--mt-radius-small, 4px); text-decoration: none;
    font-family: var(--mt-label-font, inherit); font-weight: 600; font-size: .95rem; color: var(--mt-color-text, inherit); }
.site-nav--primary a:hover { background: var(--mt-color-surface, #8881); color: var(--mt-color-primary, inherit); }
.site-nav--primary li ul { display: none; position: absolute; top: 100%; left: 0; min-width: 14rem; flex-direction: column; align-items: stretch; padding: var(--u);
    background: var(--mt-color-surface-raised, Canvas); border: 1px solid var(--mt-color-border, #8884); border-radius: var(--mt-radius-medium, 8px); box-shadow: var(--shadow-2); }
.site-nav--primary li:hover > ul, .site-nav--primary li:focus-within > ul { display: flex; }
.site-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.site-nav-toggle__button { display: none; }
@media (max-width: 760px) {
    .site-header__inner { flex-wrap: wrap; }
    .site-nav-toggle__button { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; cursor: pointer; border-radius: var(--mt-radius-small, 4px); }
    .site-nav-toggle__button span, .site-nav-toggle__button span::before, .site-nav-toggle__button span::after { display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: transform .2s var(--ease); }
    .site-nav-toggle__button span::before, .site-nav-toggle__button span::after { content: ""; position: absolute; left: 0; }
    .site-nav-toggle__button span::before { top: -7px; }
    .site-nav-toggle__button span::after { top: 7px; }
    .site-nav-toggle:focus-visible + .site-nav-toggle__button { box-shadow: var(--ring); }
    .site-nav-toggle:checked + .site-nav-toggle__button span { background: transparent; }
    .site-nav-toggle:checked + .site-nav-toggle__button span::before { transform: translateY(7px) rotate(45deg); }
    .site-nav-toggle:checked + .site-nav-toggle__button span::after { transform: translateY(-7px) rotate(-45deg); }
    .site-nav--primary { display: none; flex-basis: 100%; }
    .site-nav-toggle:checked ~ .site-nav--primary { display: block; }
    .site-nav--primary ul { flex-direction: column; align-items: stretch; padding-bottom: var(--u); }
    .site-nav--primary li ul { display: flex; position: static; box-shadow: none; border: 0; padding: 0 0 0 calc(var(--u) * 2); background: transparent; }
}
.page { flex: 1; width: 100%; }
.page__title { max-width: var(--content); margin: calc(var(--u) * 8) auto calc(var(--u) * 4); padding: 0 var(--gutter); }
/* Content that is not a full-bleed section (S1 components, loose elements) sits in the content column. */
.page > :not(.mt-section):not(.page__title) { max-width: var(--content); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.site-footer { margin-top: calc(var(--u) * 10); border-top: 1px solid var(--mt-color-border, #8884); background: var(--mt-color-surface, transparent); }
.site-footer__inner { flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding-top: calc(var(--u) * 6); padding-bottom: calc(var(--u) * 6); }
.site-footer__name { font-family: var(--mt-heading-font, inherit); font-weight: 700; font-size: 1.1rem; color: var(--mt-color-text, inherit); text-decoration: none; }
.site-footer__tagline { margin: var(--u) 0 0; max-width: 26rem; color: var(--mt-color-muted, GrayText); font-size: .95em; }
.site-nav--footer ul { gap: calc(var(--u) * 4); align-items: flex-start; }
.site-nav--footer > ul > li > a, .site-nav--footer > ul > li > span { padding: 0 0 var(--u); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mt-color-muted, GrayText); }
.site-nav--footer li ul { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.site-nav--footer li ul a { padding: calc(var(--u) * .5) 0; font-weight: 400; }
.site-nav--footer a:hover { color: var(--mt-color-primary, inherit); }

/* ---------- Builder primitives ---------- */
/* A section is a full-bleed band; its inner column holds the content at the site's width. */
.mt-section { position: relative; padding: calc(var(--u) * 10) 0; }
.mt-section__inner { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.mt-container { display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; }
.mt-container > * { min-width: 0; }
.mt-heading { margin: 0; }
.mt-text { max-width: var(--measure); font-size: 1.05em; }
.mt-text > :first-child { margin-top: 0; }
.mt-text > :last-child { margin-bottom: 0; }
.mt-text ul, .mt-text ol { padding-left: 1.25em; margin: 0 0 calc(var(--u) * 2); }
.mt-text li + li { margin-top: calc(var(--u) * .5); }
.mt-text blockquote { margin: 0 0 calc(var(--u) * 2); padding-left: calc(var(--u) * 2); border-left: 3px solid var(--mt-color-primary, #3a3aff); color: var(--mt-color-muted, inherit); }

.mt-button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--u);
    /* Phase R2: a fixed width, not align-self, keeps a button from stretching; a container set to centre or end its
       content (align) still places it, which align-self: flex-start used to override. */
    width: fit-content; max-width: 100%;
    padding: calc(var(--u) * 1.5) calc(var(--u) * 3); border-radius: var(--mt-radius-medium, 8px);
    background: var(--mt-color-primary, #3a3aff); color: var(--mt-color-primary-contrast, #fff);
    font-family: var(--mt-label-font, inherit); font-weight: 600; letter-spacing: .02em; text-decoration: none; line-height: 1.2;
    box-shadow: var(--shadow-1); transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
a.mt-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); filter: brightness(1.06); text-decoration: none; }
.mt-button--secondary { background: transparent; color: var(--mt-color-text, inherit); box-shadow: inset 0 0 0 1px var(--mt-color-border, currentColor); }
a.mt-button--secondary:hover { box-shadow: inset 0 0 0 1px var(--mt-color-primary, currentColor); color: var(--mt-color-primary, inherit); filter: none; }
.mt-button--link { padding: 0; background: none; box-shadow: none; color: var(--mt-color-primary, inherit); border-radius: 0; }
.mt-button--link::after { content: "\2192"; transition: transform .2s var(--ease); }
a.mt-button--link:hover { transform: none; box-shadow: none; filter: none; text-decoration: underline; }
a.mt-button--link:hover::after { transform: translateX(3px); }
.mt-button--inactive, .mt-button--unlinked { cursor: default; opacity: .7; }
.mt-divider { width: 100%; border: 0; border-top: 1px solid var(--mt-color-border, #8884); margin: calc(var(--u) * 2) 0; }
.mt-spacer { width: 100%; }
.mt-spacer--space-1 { height: calc(var(--u) * 1); }
.mt-spacer--space-2 { height: calc(var(--u) * 2); }
.mt-spacer--space-3 { height: calc(var(--u) * 3); }
.mt-spacer--space-4 { height: calc(var(--u) * 4); }
.mt-spacer--space-5 { height: calc(var(--u) * 5); }
.mt-spacer--space-6 { height: calc(var(--u) * 6); }
.mt-spacer--space-7 { height: calc(var(--u) * 7); }
.mt-spacer--space-8 { height: calc(var(--u) * 8); }
.mt-spacer--space-9 { height: calc(var(--u) * 9); }
.mt-spacer--space-10 { height: calc(var(--u) * 10); }
.mt-spacer--space-11 { height: calc(var(--u) * 11); }
.mt-spacer--space-12 { height: calc(var(--u) * 12); }

.mt-image { margin: 0; }
.mt-image img { display: block; width: 100%; border-radius: var(--mt-radius-large, 16px); }
.mt-image figcaption { margin-top: var(--u); color: var(--mt-color-muted, GrayText); font-size: .9em; }

/* Eyebrow: a small label above a heading. */
.mt-eyebrow { margin: 0; font-family: var(--mt-label-font, inherit); font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mt-color-primary, inherit); }

/* Grid: equal columns that wrap to one column on narrow screens. */
.mt-grid { display: grid; gap: calc(var(--u) * 3); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.mt-grid--2 { --cols: 2; }
.mt-grid--3 { --cols: 3; }
.mt-grid--4 { --cols: 4; }
/* Columns divide evenly as the screen narrows: four become two, three become one (never a stranded third card). */
@media (max-width: 1024px) { .mt-grid--4 { --cols: 2; } }
@media (max-width: 900px) { .mt-grid--3 { --cols: 1; } }
@media (max-width: 640px) { .mt-grid { --cols: 1; } }

/* Card: a raised surface holding a short title, text and an optional link. */
.mt-card { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 3.5);
    background: var(--mt-color-surface-raised, var(--mt-color-surface, transparent)); border: 1px solid var(--mt-color-border, #8884);
    border-radius: var(--mt-radius-large, 16px); box-shadow: var(--shadow-1); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.mt-card--linked:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--mt-color-primary, #8888); }
.mt-card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--mt-radius-medium, 8px);
    color: var(--mt-color-primary, inherit); background: color-mix(in srgb, var(--mt-color-primary, #3a3aff) 14%, transparent); }
.mt-card__icon svg { width: 22px; height: 22px; }
.mt-card__title { margin: 0; font-size: var(--step-1); }
.mt-card__text { margin: 0; color: var(--mt-color-muted, inherit); }
.mt-card__link { margin-top: auto; font-family: var(--mt-label-font, inherit); font-weight: 600; text-decoration: none; }
.mt-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mt-card__link span { transition: transform .2s var(--ease); display: inline-block; }
.mt-card--linked:hover .mt-card__link span { transform: translateX(3px); }

/* Stat: a large figure with a label. */
.mt-stat { display: flex; flex-direction: column; gap: calc(var(--u) * .5); }
.mt-stat__value { font-family: var(--mt-heading-font, inherit); font-size: var(--step-4); font-weight: 700; line-height: 1; color: var(--mt-color-text, inherit); }
.mt-stat__label { font-family: var(--mt-label-font, inherit); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mt-color-muted, inherit); }

/* Contact panel (on a page) and the contact form page (/message). */
.mt-contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 2); padding: calc(var(--u) * 4);
    background: var(--mt-color-surface-raised, var(--mt-color-surface, transparent)); border: 1px solid var(--mt-color-border, #8884); border-radius: var(--mt-radius-large, 16px); }
.mt-contact-card__title { margin: 0; font-size: var(--step-2); }
.mt-contact-card__text { margin: 0; color: var(--mt-color-muted, inherit); max-width: var(--measure); }
.mt-contact__panel { max-width: 44rem; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.mt-contact__lede { color: var(--mt-color-muted, inherit); font-size: 1.1em; }
.mt-contact__form { display: grid; gap: calc(var(--u) * 2); margin-top: var(--u); }
.mt-contact__row { display: grid; gap: calc(var(--u) * 2); grid-template-columns: 1fr 1fr; }
.mt-contact__form textarea { min-height: 10rem; resize: vertical; }
.mt-contact__form [aria-invalid=true] { border-color: var(--mt-color-danger, #d64545); }
.mt-contact__error { margin: calc(var(--u) * -1) 0 0; color: var(--mt-color-danger, #d64545); font-size: .9em; }
.mt-contact__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mt-contact__form .mt-button { justify-self: start; border: 0; cursor: pointer; }
@media (max-width: 640px) { .mt-contact__row { grid-template-columns: 1fr; } }

/* ---------- S1 components (kept, restyled) ---------- */
.mt-hero { display: grid; gap: calc(var(--u) * 4); align-items: center; padding-top: calc(var(--u) * 10); padding-bottom: calc(var(--u) * 6); }
.mt-hero:has(.mt-hero__image) { grid-template-columns: 1.1fr 1fr; }
.mt-hero__image { order: 2; border-radius: var(--mt-radius-large, 16px); box-shadow: var(--shadow-2); }
.mt-hero__heading { font-size: clamp(var(--step-3), 5vw, var(--step-5)); }
.mt-hero__subheading { color: var(--mt-color-muted, GrayText); font-size: var(--step-1); max-width: var(--measure); }
.mt-image-text { display: grid; gap: calc(var(--u) * 6); grid-template-columns: 1fr 1fr; align-items: center; margin-top: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 8); }
.mt-image-text--right .mt-image-text__image { order: 2; }
.mt-image-text__image { border-radius: var(--mt-radius-large, 16px); box-shadow: var(--shadow-2); }
.mt-cta { margin-top: calc(var(--u) * 4); margin-bottom: calc(var(--u) * 4); }
.mt-columns { display: grid; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 6); }
.mt-columns--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt-columns--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
    .mt-hero:has(.mt-hero__image), .mt-image-text, .mt-columns--2, .mt-columns--3 { grid-template-columns: 1fr; }
    .mt-image-text--right .mt-image-text__image, .mt-hero__image { order: 0; }
    .mt-section { padding: calc(var(--u) * 7) 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
/* Error pages (Platform\Http\ErrorPage): the headline, what to do next, a way out, and the log reference. */
.error-page__links a { font-weight: 600; }
.auth__card p.error-page__ref { margin-top: calc(var(--u) * 4); font-size: .8em; color: var(--mt-color-muted, GrayText); }
.install__hint { margin: calc(var(--u) * -1) 0 calc(var(--u) * 2); font-size: .85em; color: var(--mt-color-muted, GrayText); }