/*
 * Meds To You - custom stylesheet. Colours come ONLY from the tokens in
 * theme-custom-colors.css (loaded first); this file contains no literal colours.
 *
 * Loaded after the Pharmez theme CSS (public/theme/, never edited). Holds
 * the purpose-designed auth, account and assessment screens ("mtu-"
 * prefix) plus a few small alignments for public pages. Reuses the theme's
 * CSS variables (--accent--color etc.) and its Archivo typeface so the
 * screens sit inside the theme's visual language.
 */

:root {
    --mtu-radius: 16px;
    --mtu-radius-sm: 10px;
    --mtu-shadow: 0 10px 40px rgb(var(--shadow-rgb) / 6%);
    /* Rendered height of .mtu-header-wrap (padding + bar + border). Anchors and sticky side columns clear it. */
    --mtu-header-offset: 112px;
}

/* ------------------------------------------------------------------ */
/* Shared form primitives                                               */
/* ------------------------------------------------------------------ */

.mtu-field {
    margin-bottom: 22px;
}

.mtu-field > label,
.mtu-legend {
    display: block;
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 8px;
}

.mtu-field > label .mtu-optional,
.mtu-legend .mtu-optional {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 14px;
}

.mtu-required {
    color: var(--danger);
    margin-left: 2px;
    font-weight: 700;
}

.mtu-help {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-muted);
    margin-top: 6px;
}

.mtu-help--above {
    margin-top: 0;
    margin-bottom: 10px;
}

.mtu-input,
.mtu-field input[type="text"],
.mtu-field input[type="email"],
.mtu-field input[type="password"],
.mtu-field input[type="tel"],
.mtu-field input[type="date"],
.mtu-field input[type="number"],
.mtu-field select,
.mtu-field textarea {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 50px;
    color: var(--text-strong);
    background-color: var(--on-brand);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
    box-shadow: inset 0 1px 2px rgb(var(--shadow-rgb) / 4%);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.mtu-field textarea {
    height: auto;
    min-height: 120px;
    padding: 14px 18px;
    line-height: 24px;
    resize: vertical;
}

.mtu-field input:focus,
.mtu-field select:focus,
.mtu-field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.mtu-field input::placeholder,
.mtu-field textarea::placeholder {
    color: var(--text-faint);
    font-weight: 400;
}

/* Password field with show/hide toggle (components/password-input.blade.php). */
.mtu-password {
    position: relative;
    display: block;
}

.mtu-field .mtu-password input[type="password"],
.mtu-field .mtu-password input[type="text"] {
    padding-right: 54px;
}

.mtu-password__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.mtu-password__toggle:hover {
    color: var(--text-strong);
    background: var(--surface-alt);
}

.mtu-password__toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.mtu-field--invalid input,
.mtu-field--invalid select,
.mtu-field--invalid textarea,
.mtu-field input.mtu-invalid,
.mtu-field textarea.mtu-invalid {
    border-color: var(--danger);
}

.mtu-field--invalid input:focus,
.mtu-field--invalid textarea:focus {
    box-shadow: 0 0 0 4px var(--danger-bg);
}

.mtu-error {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--danger);
}

.mtu-error::before {
    content: "\f071";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    margin-right: 6px;
}

/* Checkbox / radio rows */
.mtu-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 22px;
    color: var(--text);
}

.mtu-check input[type="checkbox"],
.mtu-check input[type="radio"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--brand);
    cursor: pointer;
}

.mtu-check label {
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

.mtu-check label a {
    color: var(--brand);
    text-decoration: underline;
}

/* Choice lists used by questionnaire radios and checkboxes */
.mtu-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mtu-choices--inline {
    flex-direction: row;
    flex-wrap: wrap;
}

.mtu-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
    background: var(--surface);
    font-size: 15px;
    line-height: 22px;
    color: var(--text-strong);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mtu-choices--inline .mtu-choice {
    min-width: 120px;
}

.mtu-choice:hover {
    border-color: var(--border-brand);
}

.mtu-choice input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--brand);
    cursor: pointer;
}

.mtu-choice:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.mtu-choice:has(input:focus-visible) {
    box-shadow: 0 0 0 4px var(--brand-soft);
}

/* Buttons */
.mtu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 28px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: var(--on-brand);
    background-color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mtu-btn:hover,
.mtu-btn:focus {
    color: var(--on-brand);
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    text-decoration: none;
}

.mtu-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.mtu-btn:disabled,
.mtu-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.mtu-btn--secondary {
    color: var(--brand);
    background-color: var(--on-brand);
    border-color: var(--border-brand);
}

.mtu-btn--secondary:hover,
.mtu-btn--secondary:focus {
    color: var(--brand-dark);
    background-color: var(--brand-soft);
    border-color: var(--brand);
}

.mtu-btn--danger {
    color: var(--danger);
    background-color: var(--on-brand);
    border-color: var(--danger-border);
}

.mtu-btn--danger:hover,
.mtu-btn--danger:focus {
    color: var(--on-brand);
    background-color: var(--danger);
    border-color: var(--danger);
}

.mtu-btn--small {
    min-height: 40px;
    padding: 0 18px;
    font-size: 14px;
}

.mtu-btn--block {
    display: flex;
    width: 100%;
}

.mtu-link {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

.mtu-link:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}

.mtu-link-button {
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--brand);
    background: none;
    border: 0;
    cursor: pointer;
}

.mtu-link-button:hover {
    text-decoration: underline;
}

.mtu-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

.mtu-actions--between {
    justify-content: space-between;
}

/* Alerts */
.mtu-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    margin-bottom: 22px;
    font-size: 15px;
    line-height: 22px;
    border: 1px solid transparent;
    border-radius: var(--mtu-radius-sm);
    color: var(--info);
    background: var(--info-bg);
}

.mtu-alert::before {
    content: "\f05a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
    line-height: 22px;
    flex: 0 0 auto;
}

.mtu-alert > div {
    flex: 1 1 auto;
}

.mtu-alert p:last-child {
    margin-bottom: 0;
}

.mtu-alert form {
    display: inline;
}

.mtu-alert--success {
    color: var(--success);
    background: var(--success-bg);
}

.mtu-alert--success::before {
    content: "\f058";
}

.mtu-alert--warning {
    color: var(--warning);
    background: var(--warning-bg);
}

.mtu-alert--warning::before {
    content: "\f071";
}

.mtu-alert--danger {
    color: var(--danger);
    background: var(--danger-bg);
}

.mtu-alert--danger::before {
    content: "\f06a";
}

.mtu-alert .mtu-link-button,
.mtu-alert a {
    color: inherit;
    text-decoration: underline;
}

/* Badges */
.mtu-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 999px;
    color: var(--info);
    background: var(--info-bg);
}

.mtu-badge--success {
    color: var(--success);
    background: var(--success-bg);
}

.mtu-badge--warning {
    color: var(--warning);
    background: var(--warning-bg);
}

.mtu-badge--danger {
    color: var(--danger);
    background: var(--danger-bg);
}

.mtu-badge--neutral {
    color: var(--text-muted);
    background: var(--surface-alt);
}

/* Trust signals */
.mtu-trust {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mtu-trust li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 22px;
    color: var(--text);
}

.mtu-trust li i {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 16px;
    color: var(--brand);
    background: var(--brand-soft);
}

.mtu-trust strong {
    display: block;
    color: var(--text-strong);
}

.mtu-placeholder-note {
    font-size: 13px;
    line-height: 18px;
    color: var(--text-muted);
}

/* A company, prescriber or pharmacy detail or the postal address the client
   has not supplied yet (<x-site.to-be-confirmed />). Its own background, so
   it reads the same on light pages and in the dark footer; the bracketed
   text says it too. */
.mtu-tbc {
    padding: 0 4px;
    border-bottom: 1px dashed var(--warning);
    border-radius: 4px;
    background: var(--warning-bg);
    color: var(--warning);
    font-weight: 600;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ------------------------------------------------------------------ */
/* Auth screens                                                         */
/* ------------------------------------------------------------------ */

.mtu-auth {
    background: var(--surface-alt);
    padding: 60px 0 90px;
}

.mtu-auth__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 60px;
    align-items: start;
    max-width: 1140px;
    margin: 0 auto;
}

.mtu-auth__inner--narrow {
    max-width: 960px;
}

.mtu-auth__aside {
    padding-top: 24px;
}

.mtu-auth__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 999px;
}

.mtu-auth__aside h1 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 16px;
}

.mtu-auth__aside .mtu-lead {
    font-size: 17px;
    line-height: 27px;
    color: var(--text);
    margin-bottom: 30px;
}

.mtu-auth__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
    box-shadow: var(--mtu-shadow);
    padding: 40px;
}

.mtu-auth__card h2 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 6px;
}

.mtu-auth__card .mtu-card-lead {
    font-size: 15px;
    line-height: 22px;
    color: var(--text-muted);
    margin-bottom: 26px;
}

.mtu-auth__card .mtu-btn {
    margin-top: 6px;
}

/* Verification notice (auth/verify-email.blade.php) */
.mtu-verify__address {
    font-size: 17px;
    line-height: 26px;
    color: var(--text-strong);
    margin-bottom: 10px;
}

.mtu-auth__card .mtu-verify__subheading {
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 22px 0 8px;
}

.mtu-verify__steps {
    margin: 0 0 18px;
    padding-left: 22px;
    font-size: 16px;
    line-height: 24px;
    color: var(--text);
}

.mtu-verify__steps li {
    margin-bottom: 6px;
}

.mtu-verify__wrong {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 16px;
    line-height: 24px;
    color: var(--text);
}

.mtu-auth__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 4px 0 22px;
}

.mtu-auth__meta .mtu-check {
    margin: 0;
}

.mtu-auth__below {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    font-size: 15px;
    line-height: 22px;
    color: var(--text);
    text-align: center;
}

.mtu-auth__below p {
    margin-bottom: 8px;
}

.mtu-auth__below p:last-child {
    margin-bottom: 0;
}

.mtu-auth__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.mtu-privacy-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 18px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 19px;
    color: var(--text-muted);
    background: var(--surface-alt);
    border-radius: var(--mtu-radius-sm);
}

.mtu-privacy-note i {
    color: var(--brand);
    margin-top: 2px;
}

/* ------------------------------------------------------------------ */
/* Account layout                                                       */
/* ------------------------------------------------------------------ */

.mtu-account {
    background: var(--surface-alt);
    padding: 50px 0 90px;
}

.mtu-account__inner {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.mtu-account__user {
    padding: 22px 22px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
    margin-bottom: 16px;
}

.mtu-account__user .mtu-avatar {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--on-brand);
    background: var(--brand);
    border-radius: 14px;
    margin-bottom: 12px;
}

.mtu-account__user strong {
    display: block;
    font-size: 16px;
    color: var(--text-strong);
}

.mtu-account__user span {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    word-break: break-word;
}

.mtu-account__nav {
    list-style: none;
    margin: 0;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
}

.mtu-account__nav li {
    margin: 0;
}

.mtu-account__nav a,
.mtu-account__nav button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    background: none;
    border: 0;
    border-radius: var(--mtu-radius-sm);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mtu-account__nav i {
    width: 20px;
    text-align: center;
    color: var(--text-muted);
}

.mtu-account__nav a:hover,
.mtu-account__nav button:hover {
    color: var(--brand-dark);
    background: var(--surface-alt);
    text-decoration: none;
}

.mtu-account__nav a.is-active {
    color: var(--brand-dark);
    background: var(--brand-soft);
}

.mtu-account__nav a.is-active i {
    color: var(--brand);
}

.mtu-account__nav .mtu-nav-divider {
    height: 1px;
    margin: 8px 6px;
    background: var(--border);
}

.mtu-account__nav .mtu-nav-logout {
    color: var(--text-muted);
}

.mtu-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
    box-shadow: var(--mtu-shadow);
    padding: 36px 40px 40px;
}

.mtu-panel__header {
    margin-bottom: 28px;
}

.mtu-panel__header h1 {
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 6px;
}

.mtu-panel__header p {
    font-size: 15px;
    line-height: 22px;
    color: var(--text-muted);
    margin: 0;
}

.mtu-panel__header--split {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.mtu-fieldset {
    padding: 26px 0;
    border-top: 1px solid var(--border);
}

.mtu-fieldset:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.mtu-fieldset > h2 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 4px;
}

.mtu-fieldset > p {
    font-size: 14px;
    line-height: 21px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.mtu-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.mtu-form-grid .mtu-field--full {
    grid-column: 1 / -1;
}

.mtu-form--narrow {
    max-width: 560px;
}

/* Address cards */
.mtu-cards {
    display: grid;
    gap: 14px;
}

.mtu-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
    background: var(--surface);
}

.mtu-card--default {
    border-color: var(--border-brand);
    background: var(--brand-tint);
}

.mtu-card__body strong {
    display: block;
    font-size: 16px;
    color: var(--text-strong);
    margin-bottom: 4px;
}

.mtu-card__body p {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--text);
}

.mtu-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mtu-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-alt);
    border-radius: var(--mtu-radius-sm);
}

.mtu-empty p {
    margin-bottom: 18px;
}

/* Data table (My Assessments) */
.mtu-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.mtu-table th,
.mtu-table td {
    padding: 14px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

.mtu-table th {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mtu-table td a:not(.mtu-btn) {
    color: var(--text-strong);
    font-weight: 600;
}

.mtu-table td:last-child {
    text-align: right;
}

/* An unfinished assessment: tinted row, a note under the treatment name. */
.mtu-table tr.is-draft td {
    background: var(--brand-tint);
}

.mtu-table tr.is-draft td:first-child {
    border-left: 3px solid var(--brand);
}

.mtu-table__note {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: var(--brand-dark);
}

/* Definition rows (status page, review summary) */
.mtu-rows {
    margin: 0;
}

.mtu-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 8px 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.mtu-row:last-child {
    border-bottom: 0;
}

.mtu-row dt {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0;
}

.mtu-row dd {
    font-size: 15px;
    line-height: 22px;
    color: var(--text-strong);
    margin: 0;
    overflow-wrap: anywhere;
}

.mtu-row dd .mtu-muted {
    color: var(--text-muted);
    font-style: italic;
}

.mtu-row dd .mtu-missing {
    color: var(--danger);
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Assessment screens                                                   */
/* ------------------------------------------------------------------ */

.mtu-steps {
    list-style: none;
    display: flex;
    gap: 6px;
    margin: 0 0 28px;
    padding: 0;
    counter-reset: mtu-step;
}

.mtu-steps li {
    flex: 1 1 0;
    min-width: 0;
    padding-top: 10px;
    border-top: 4px solid var(--border);
    font-size: 13px;
    line-height: 18px;
    color: var(--text-muted);
}

.mtu-steps li span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtu-steps li.is-done {
    border-top-color: var(--brand);
}

.mtu-steps li.is-current {
    border-top-color: var(--brand);
    color: var(--brand-dark);
    font-weight: 700;
}

.mtu-steps li.is-done span::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--brand);
    margin-right: 5px;
}

.mtu-step-label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand);
}

.mtu-question {
    padding: 22px 0;
    border-top: 1px solid var(--border);
}

.mtu-question:first-of-type {
    border-top: 0;
    padding-top: 6px;
}

.mtu-question[hidden] {
    display: none;
}

.mtu-question .mtu-legend {
    font-size: 16px;
    line-height: 24px;
}

.mtu-question .mtu-prefilled {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 4px 10px;
    font-size: 13px;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-radius: 999px;
}

.mtu-question input[type="text"],
.mtu-question input[type="date"],
.mtu-question input[type="number"] {
    max-width: 360px;
}

.mtu-form-footnote {
    margin: 26px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    line-height: 19px;
    color: var(--text-muted);
}

.mtu-section-block {
    padding: 22px 0;
    border-top: 1px solid var(--border);
}

.mtu-section-block:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.mtu-section-block__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.mtu-section-block__header h2 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0;
}

.mtu-status-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    padding: 20px 24px;
    margin-bottom: 24px;
    border-radius: var(--mtu-radius-sm);
    background: var(--surface-alt);
}

.mtu-status-hero__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--brand);
    background: var(--surface);
    border-radius: 14px;
}

.mtu-status-hero__text {
    flex: 1 1 200px;
}

.mtu-status-hero__text span {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
}

.mtu-status-hero__text strong {
    display: block;
    font-size: 18px;
    color: var(--text-strong);
}

.mtu-message {
    padding: 18px 20px;
    margin: 0 0 22px;
    border-left: 4px solid var(--brand);
    background: var(--brand-soft);
    border-radius: 0 var(--mtu-radius-sm) var(--mtu-radius-sm) 0;
}

.mtu-message strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-strong);
}

.mtu-message p {
    margin: 0;
    color: var(--text);
}

/* ------------------------------------------------------------------ */
/* Public page alignments (theme components, no theme file edited)      */
/* ------------------------------------------------------------------ */

/* Contact form: theme layout with visible labels */
.contact-form-con form ul li {
    text-align: left;
}

.contact-form-con form ul li label {
    display: block;
    margin: 0 0 8px 18px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-strong);
}

.contact-form-con form ul li label .mtu-optional {
    font-weight: 500;
    color: var(--text-muted);
}

.contact-form-con form ul li .mtu-error {
    padding-left: 18px;
}

.contact-form-con form ul li input.mtu-invalid,
.contact-form-con form ul li textarea.mtu-invalid {
    border: 1px solid var(--danger);
}

.contact-form-con .mtu-alert {
    text-align: left;
}

.contact-form-con .mtu-contact-note {
    clear: both;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 26px;
}

/* Blog listing pagination (Bootstrap 4 markup, styled like the shop's) */
.mtu-pagination .pagination {
    justify-content: center;
    gap: 8px;
    margin: 0;
}

.mtu-pagination .page-item .page-link {
    min-width: 46px;
    height: 46px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-strong);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.mtu-pagination .page-item.active .page-link {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--accent);
}

.mtu-pagination .page-item.disabled .page-link {
    color: var(--text-faint);
}

.mtu-pagination .page-link:hover {
    color: var(--on-brand);
    background: var(--brand);
    border-color: var(--brand);
}

/* Home category tiles without images keep the theme's popular-box look */
.popular-categories-con .popular-box .category-content h6 {
    margin-bottom: 0;
}

/* Verified badge next to the email label */
.mtu-inline-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--success);
    background: var(--success-bg);
    border-radius: 999px;
    vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */

@media (max-width: 991px) {
    .mtu-auth {
        padding: 40px 0 70px;
    }

    .mtu-auth__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .mtu-auth__aside {
        padding-top: 0;
    }

    .mtu-auth__aside h1 {
        font-size: 30px;
        line-height: 38px;
    }

    .mtu-auth__aside .mtu-trust {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 20px;
    }

    .mtu-account__inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mtu-account__user {
        display: none;
    }

    .mtu-account__nav {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px;
    }

    .mtu-account__nav li {
        flex: 1 1 auto;
    }

    .mtu-account__nav .mtu-nav-divider {
        display: none;
    }

    .mtu-account__nav a,
    .mtu-account__nav button {
        justify-content: center;
        padding: 10px 12px;
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .mtu-auth__card,
    .mtu-panel {
        padding: 26px 20px 30px;
    }

    .mtu-auth__grid,
    .mtu-form-grid {
        grid-template-columns: 1fr;
    }

    .mtu-auth__aside .mtu-trust {
        grid-template-columns: 1fr;
    }

    .mtu-panel__header h1 {
        font-size: 24px;
        line-height: 30px;
    }

    .mtu-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    /* Bars only; the section heading below names the current step. */
    .mtu-steps li span {
        display: none;
    }

    .mtu-table thead {
        display: none;
    }

    .mtu-table,
    .mtu-table tbody,
    .mtu-table tr,
    .mtu-table td {
        display: block;
        width: 100%;
    }

    .mtu-table tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }

    .mtu-table td {
        padding: 4px 0;
        border: 0;
        text-align: left;
    }

    .mtu-table td:last-child {
        text-align: left;
        padding-top: 10px;
    }

    .mtu-table td[data-label]::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 90px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-muted);
    }

    .mtu-card__actions {
        width: 100%;
    }

    .mtu-btn--mobile-block {
        width: 100%;
    }

    .mtu-actions .mtu-btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 420px) {
    .mtu-auth {
        padding: 28px 0 50px;
    }

    .mtu-auth__card,
    .mtu-panel {
        padding: 22px 16px 26px;
        border-radius: 12px;
    }

    .mtu-choices--inline {
        flex-direction: column;
    }

    .mtu-choices--inline .mtu-choice {
        min-width: 0;
    }

    /* The theme's stacked hero images can poke past the rounded banner on narrow phones. */
    .banner-con {
        overflow: hidden;
    }
}

/* ------------------------------------------------------------------ */
/* Treatment catalogue: filter chips and cards                          */
/* ------------------------------------------------------------------ */

.mtu-catalog {
    padding: 60px 0 100px;
}

.mtu-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.mtu-chip:hover {
    color: var(--brand-dark);
    border-color: var(--border-brand);
    background: var(--brand-soft);
    text-decoration: none;
}

.mtu-catalog__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 20px;
    padding: 0 4px 18px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.mtu-catalog__bar p {
    margin: 0;
    font-size: 15px;
    color: var(--text-muted);
}

.mtu-catalog__summary strong {
    color: var(--text-strong);
}

.mtu-catalog__note i {
    color: var(--brand);
    margin-right: 6px;
}

.mtu-tcard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.mtu-tcard {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mtu-tcard:hover {
    transform: translateY(-3px);
    border-color: var(--border-brand);
    box-shadow: var(--mtu-shadow);
}

.mtu-tcard__media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-alt);
    overflow: hidden;
}

.mtu-tcard__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mtu-tcard__media img[hidden] {
    display: none;
}

.mtu-tcard__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
}

.mtu-tcard__placeholder i {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    border-radius: 20px;
    background: rgb(var(--surface-rgb) / 70%);
    color: var(--tone-ink, var(--brand));
}

.mtu-tcard__placeholder span {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--tone-ink, var(--brand-dark));
}

.mtu-tcard__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px 22px 22px;
}

.mtu-tcard__category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mtu-tcard__category i {
    color: var(--brand);
}

.mtu-tcard__title {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    margin: 0 0 8px;
}

.mtu-tcard__title a {
    color: var(--text-strong);
    text-decoration: none;
}

.mtu-tcard__title a:hover {
    color: var(--brand-dark);
}

.mtu-tcard__text {
    flex: 1 1 auto;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 21px;
    color: var(--text);
}

.mtu-tcard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.mtu-tcard__price {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-strong);
}

/* Soft brand tones per category (placeholder backgrounds) */
.mtu-tone-weight-management { background: linear-gradient(135deg, var(--tone-weight-management-from), var(--tone-weight-management-to)); --tone-ink: var(--tone-weight-management-ink); }
.mtu-tone-hair-loss { background: linear-gradient(135deg, var(--tone-hair-loss-from), var(--tone-hair-loss-to)); --tone-ink: var(--tone-hair-loss-ink); }
.mtu-tone-mens-health { background: linear-gradient(135deg, var(--tone-mens-health-from), var(--tone-mens-health-to)); --tone-ink: var(--tone-mens-health-ink); }
.mtu-tone-womens-health { background: linear-gradient(135deg, var(--tone-womens-health-from), var(--tone-womens-health-to)); --tone-ink: var(--tone-womens-health-ink); }
.mtu-tone-skin { background: linear-gradient(135deg, var(--tone-skin-from), var(--tone-skin-to)); --tone-ink: var(--tone-skin-ink); }
.mtu-tone-travel-health { background: linear-gradient(135deg, var(--tone-travel-health-from), var(--tone-travel-health-to)); --tone-ink: var(--tone-travel-health-ink); }
.mtu-tone-general-health { background: linear-gradient(135deg, var(--tone-general-health-from), var(--tone-general-health-to)); --tone-ink: var(--tone-general-health-ink); }

@media (max-width: 991px) {
    .mtu-tcard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .mtu-catalog {
        padding: 40px 0 70px;
    }
}

@media (max-width: 575px) {
    .mtu-tcard-grid {
        grid-template-columns: 1fr;
    }

    .mtu-chip {
        min-height: 40px;
        font-size: 14px;
        padding: 0 12px;
    }

    .mtu-tcard__footer {
        flex-wrap: wrap;
    }

    .mtu-tcard__footer .mtu-btn {
        flex: 1 1 100%;
    }
}

.mtu-tcard-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199px) {
    .mtu-tcard-grid--four {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .mtu-tcard-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .mtu-tcard-grid--four {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ */
/* Page banner                                                           */
/* ------------------------------------------------------------------ */

.mtu-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 48px 24px;
    border-radius: 30px;
    overflow: hidden;
    background-color: var(--surface-dark);
    background-image: var(--banner-image);
    background-size: cover;
    background-position: center;
    color: var(--on-brand);
    text-align: center;
}

.mtu-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(var(--shadow-rgb) / 55%), rgb(var(--shadow-rgb) / 70%)), linear-gradient(120deg, rgb(92 69 191 / 35%), transparent 60%);
}

.mtu-banner__inner {
    position: relative;
    max-width: 780px;
}

.mtu-banner h1 {
    font-size: 44px;
    line-height: 52px;
    font-weight: 700;
    color: var(--on-brand);
    margin: 0 0 12px;
    text-shadow: 0 2px 12px rgb(var(--shadow-rgb) / 30%);
}

.mtu-banner p {
    font-size: 18px;
    line-height: 28px;
    color: rgb(var(--surface-rgb) / 90%);
    margin: 0;
}

.mtu-crumbs {
    display: inline-block;
    margin-bottom: 18px;
}

.mtu-crumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    margin: 0;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    background: rgb(var(--surface-rgb) / 14%);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.mtu-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgb(var(--surface-rgb) / 92%);
}

.mtu-crumbs li + li::before {
    content: "/";
    color: rgb(var(--surface-rgb) / 55%);
}

.mtu-crumbs a {
    color: var(--on-brand);
    text-decoration: none;
}

.mtu-crumbs a:hover {
    text-decoration: underline;
}

.mtu-crumbs li[aria-current] {
    color: var(--accent);
}

@media (max-width: 991px) {
    .mtu-banner {
        min-height: 260px;
        border-radius: 22px;
    }

    .mtu-banner h1 {
        font-size: 34px;
        line-height: 42px;
    }
}

@media (max-width: 575px) {
    .mtu-banner {
        min-height: 210px;
        padding: 30px 18px;
        border-radius: 18px;
    }

    .mtu-banner h1 {
        font-size: 26px;
        line-height: 32px;
        overflow-wrap: anywhere;
    }

    .mtu-banner p {
        font-size: 15px;
        line-height: 23px;
    }

    .mtu-crumbs li[aria-current] {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------ */
/* 404 page                                                              */
/* ------------------------------------------------------------------ */

.mtu-404 {
    padding: 60px 0 100px;
}

.mtu-404__hero {
    max-width: 640px;
    margin: 0 auto 48px;
    text-align: center;
}

.mtu-404__code {
    display: inline-block;
    margin-bottom: 14px;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-radius: 999px;
}

.mtu-404__hero h1 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 12px;
}

.mtu-404__hero p {
    font-size: 17px;
    line-height: 27px;
    color: var(--text);
    margin-bottom: 26px;
}

.mtu-404__hero .mtu-actions {
    justify-content: center;
}

.mtu-404__links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.mtu-404__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mtu-404__card:hover {
    transform: translateY(-3px);
    border-color: var(--border-brand);
    box-shadow: var(--mtu-shadow);
    text-decoration: none;
}

.mtu-404__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 18px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 14px;
}

.mtu-404__card strong {
    font-size: 17px;
    color: var(--text-strong);
}

.mtu-404__card span:not(.mtu-404__icon) {
    font-size: 14px;
    line-height: 21px;
    color: var(--text-muted);
}

.mtu-404__account {
    margin: 32px 0 0;
    text-align: center;
    font-size: 15px;
    color: var(--text-muted);
}

@media (max-width: 991px) {
    .mtu-404__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .mtu-404 {
        padding: 40px 0 60px;
    }

    .mtu-404__hero h1 {
        font-size: 30px;
        line-height: 38px;
    }

    .mtu-404__hero .mtu-actions .mtu-btn {
        flex: 1 1 100%;
    }

    .mtu-404__links {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ */
/* Header                                                                */
/* ------------------------------------------------------------------ */

/*
    The theme floats every page section, so without this body collapses to the
    header alone and the sticky header has no containing block to move within
    (document 5900px tall, body 112px). flow-root makes body contain its floats.
*/
body {
    display: flow-root;
}

.mtu-header-wrap {
    position: sticky;
    top: 0;
    z-index: 100;
    display: block;
    width: 100%;
    clear: both;
    padding-top: 16px;
    padding-bottom: 16px;
    background: transparent;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.mtu-header-wrap.is-scrolled {
    background: rgb(var(--surface-rgb) / 92%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 30px rgb(var(--shadow-rgb) / 8%);
}

.mtu-header {
    position: relative;
    z-index: 30;
    margin: 0;
    padding: 0 20px;
    background: var(--surface-alt);
    border: 1px solid transparent;
    border-radius: 25px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mtu-header-wrap.is-scrolled .mtu-header {
    border-color: var(--border);
    box-shadow: 0 4px 16px rgb(var(--shadow-rgb) / 6%);
}

.mtu-header__bar {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 78px;
}

/* Brand: type-set name on the tokens (components/site/brand.blade.php). */
.mtu-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    text-decoration: none;
}

.mtu-brand:hover,
.mtu-brand:focus {
    text-decoration: none;
}

.mtu-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--on-brand);
    background: var(--brand);
    border-radius: 12px;
}

.mtu-brand__name {
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--text-strong);
}

.mtu-brand__name em {
    font-style: normal;
    color: var(--brand);
}

.mtu-brand--dark .mtu-brand__name {
    color: var(--on-brand);
}

.mtu-brand--dark .mtu-brand__name em {
    color: var(--accent);
}

.mtu-brand:hover .mtu-brand__mark {
    background: var(--brand-dark);
}

.mtu-header__nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.mtu-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mtu-nav > li {
    position: relative;
}

.mtu-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
    background: none;
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mtu-nav__link:hover,
.mtu-nav__link:focus-visible {
    color: var(--brand-dark);
    background: var(--brand-soft);
    text-decoration: none;
    outline: none;
}

.mtu-nav__link.is-active {
    color: var(--brand);
}

.mtu-nav__link--menu i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.mtu-nav__link--menu[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Dropdown panels (Treatments, account) */
.mtu-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 240px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
    box-shadow: 0 16px 48px rgb(var(--shadow-rgb) / 14%);
}

.mtu-menu[hidden] {
    display: none;
}

.mtu-menu--right {
    left: auto;
    right: 0;
}

.mtu-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: none;
    border: 0;
    border-radius: var(--mtu-radius-sm);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.mtu-menu__item i {
    width: 18px;
    text-align: center;
    color: var(--brand);
}

.mtu-menu__item:hover,
.mtu-menu__item:focus-visible {
    color: var(--brand-dark);
    background: var(--brand-soft);
    text-decoration: none;
    outline: none;
}

.mtu-menu__item--all {
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm) var(--mtu-radius-sm) 0 0;
}

.mtu-menu__item--logout {
    margin-top: 4px;
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--mtu-radius-sm) var(--mtu-radius-sm);
    color: var(--text-muted);
}

.mtu-menu__head {
    padding: 10px 12px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.mtu-menu__head strong {
    display: block;
    font-size: 14px;
    color: var(--text-strong);
}

.mtu-menu__head span {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* Auth actions */
.mtu-header__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.mtu-header__signin {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
    text-decoration: none;
    padding: 10px 6px;
}

.mtu-header__signin:hover {
    color: var(--brand-dark);
    text-decoration: none;
}

.mtu-header__account {
    position: relative;
}

.mtu-header__user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
}

.mtu-header__user i {
    font-size: 11px;
    color: var(--text-muted);
}

.mtu-header__user:hover,
.mtu-header__user[aria-expanded="true"] {
    border-color: var(--border-brand);
}

.mtu-header__avatar {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--on-brand);
    background: var(--brand);
    border-radius: 999px;
}

/* Hamburger */
.mtu-header__toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
}

.mtu-header__toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--text-strong);
    border-radius: 2px;
}

/* Drawer: rendered as a direct child of <body> (never inside the header,
   whose backdrop-filter would become its containing block). z-index above
   the header wrapper (100) and the theme's back-to-top button (99). */
.mtu-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.mtu-drawer[hidden] {
    display: none;
}

.mtu-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(var(--shadow-rgb) / 45%);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.mtu-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--surface);
    box-shadow: -16px 0 48px rgb(var(--shadow-rgb) / 20%);
    transform: translateX(100%);
    transition: transform 0.22s ease;
}

/* .is-open is added a frame after the element is shown and removed at the
   start of a close, so the panel slides and the backdrop fades both ways;
   theme-custom.js hides the element once the closing transition ends. */
.mtu-drawer.is-open .mtu-drawer__backdrop {
    opacity: 1;
}

.mtu-drawer.is-open .mtu-drawer__panel {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .mtu-drawer__backdrop,
    .mtu-drawer__panel {
        transition: none;
    }
}

.mtu-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.mtu-drawer__close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-strong);
    background: var(--surface-alt);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.mtu-nav--drawer {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
}

.mtu-nav--drawer .mtu-nav__link {
    display: flex;
    padding: 12px 14px;
    border-radius: var(--mtu-radius-sm);
    font-size: 16px;
}

.mtu-nav__sub {
    list-style: none;
    margin: 0 0 6px;
    padding: 4px 0 4px 14px;
    border-left: 2px solid var(--brand-soft);
    margin-left: 14px;
}

.mtu-nav__sub[hidden] {
    display: none;
}

.mtu-nav--drawer .mtu-nav__link--menu {
    width: 100%;
    justify-content: space-between;
}

.mtu-nav--drawer .mtu-nav__link--menu i {
    font-size: 12px;
    color: var(--text-muted);
}

.mtu-nav__sub a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    border-radius: var(--mtu-radius-sm);
    text-decoration: none;
}

.mtu-nav__sub a i {
    width: 18px;
    text-align: center;
    color: var(--brand);
}

.mtu-nav__sub a:hover {
    color: var(--brand-dark);
    background: var(--brand-soft);
    text-decoration: none;
}

.mtu-drawer__auth {
    margin-top: auto;
    padding: 16px 18px 22px;
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
}

.mtu-drawer__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
}

.mtu-drawer__user strong {
    display: block;
    font-size: 15px;
    color: var(--text-strong);
}

.mtu-drawer__user span {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.mtu-drawer__link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.mtu-drawer__link i {
    width: 18px;
    text-align: center;
    color: var(--brand);
}

/* Scroll lock while the drawer is open. theme-custom.js sets top (minus the
   scroll position) and padding-right (the scrollbar width) inline, and
   restores the scroll position on close. */
body.mtu-drawer-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

@media (max-width: 1199px) {
    .mtu-nav__link {
        padding: 10px 10px;
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    :root {
        --mtu-header-offset: 86px;
    }

    /* Theme's fixed back-to-top arrow: off wherever the drawer takes over. */
    #button {
        display: none;
    }

    .mtu-brand__mark {
        width: 36px;
        height: 36px;
        font-size: 20px;
        border-radius: 10px;
    }

    .mtu-brand__name {
        font-size: 20px;
    }

    .mtu-header-wrap {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .mtu-header {
        margin: 0;
        padding: 0 12px;
    }

    .mtu-header__bar {
        min-height: 64px;
        gap: 12px;
    }

    .mtu-header__nav,
    .mtu-header__actions {
        display: none;
    }

    .mtu-header__toggle {
        display: flex;
    }
}

/* ------------------------------------------------------------------ */
/* Document pages (legal, regulatory)                                    */
/* ------------------------------------------------------------------ */

.mtu-doc {
    padding: 60px 0 90px;
}

.mtu-doc__grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.mtu-doc__side {
    position: sticky;
    top: calc(var(--mtu-header-offset) + 24px);
}

.mtu-doc__toc {
    padding: 18px 18px 12px;
    margin-bottom: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
}

.mtu-doc__toc-title {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mtu-doc__toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
}

.mtu-doc__toc li {
    counter-increment: toc;
}

.mtu-doc__toc a {
    display: flex;
    gap: 10px;
    padding: 7px 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--text);
    border-radius: 8px;
    text-decoration: none;
}

.mtu-doc__toc a::before {
    content: counter(toc, decimal-leading-zero);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand);
}

.mtu-doc__toc a:hover {
    color: var(--brand-dark);
    background: var(--brand-soft);
}

.mtu-doc__main {
    max-width: 46rem;
}

.mtu-doc__header {
    padding-bottom: 22px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--border);
}

.mtu-doc__header h1 {
    font-size: 36px;
    line-height: 44px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 8px;
}

.mtu-doc__subtitle {
    font-size: 17px;
    line-height: 27px;
    color: var(--text);
    margin-bottom: 10px;
}

.mtu-doc__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-dark);
    background: var(--surface-alt);
    border-radius: 999px;
}

.mtu-doc__demo {
    font-weight: 500;
    color: var(--text-muted);
}

.mtu-doc__notice .alert {
    margin-bottom: 26px;
}

.mtu-doc__body {
    font-size: 16px;
    line-height: 27px;
    color: var(--text);
}

.mtu-doc__body h2 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 36px 0 12px;
    padding-top: 6px;
    scroll-margin-top: calc(var(--mtu-header-offset) + 24px);
}

.mtu-doc__body h2:first-child {
    margin-top: 0;
}

.mtu-doc__body h3 {
    font-size: 19px;
    line-height: 28px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 26px 0 8px;
}

.mtu-doc__body p {
    margin-bottom: 16px;
}

.mtu-doc__body a {
    color: var(--brand);
    text-decoration: underline;
}

.mtu-doc__body ul,
.mtu-doc__body ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.mtu-doc__body li {
    margin-bottom: 6px;
}

.mtu-doc__body table {
    width: 100%;
    margin: 4px 0 24px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 22px;
}

.mtu-doc__body th,
.mtu-doc__body td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.mtu-doc__body th {
    width: 36%;
    font-weight: 700;
    color: var(--text-strong);
    background: var(--surface-alt);
}

.mtu-doc__body .mtu-placeholder-note {
    font-size: 13px;
}

.mtu-doc__contact {
    margin-top: 40px;
    padding: 26px 28px;
    background: var(--surface-alt);
    border-radius: var(--mtu-radius);
    scroll-margin-top: calc(var(--mtu-header-offset) + 24px);
}

.mtu-doc__contact h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 14px;
}

.mtu-doc__contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 12px;
}

.mtu-doc__contact-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    line-height: 21px;
    color: var(--text);
}

.mtu-doc__contact-grid strong {
    color: var(--text-strong);
}

.mtu-doc__contact-grid a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

@media (max-width: 991px) {
    .mtu-doc__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mtu-doc__side {
        position: static;
    }

    .mtu-doc__help {
        display: none;
    }

    .mtu-doc__toc ol {
        columns: 2;
        column-gap: 12px;
    }

    .mtu-doc__contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .mtu-doc {
        padding: 40px 0 60px;
    }

    .mtu-doc__header h1 {
        font-size: 28px;
        line-height: 36px;
    }

    .mtu-doc__toc ol {
        columns: 1;
    }

    .mtu-doc__body th,
    .mtu-doc__body td {
        display: block;
        width: 100%;
    }

    .mtu-doc__body th {
        border-bottom: 0;
        padding-bottom: 4px;
    }

    .mtu-doc__contact {
        padding: 20px 18px;
    }
}

/* ------------------------------------------------------------------ */
/* Footer                                                                */
/* ------------------------------------------------------------------ */

.mtu-footer {
    margin-top: 40px;
    padding: 64px 0 28px;
    color: var(--on-dark);
    background: var(--surface-dark);
}

.mtu-footer a {
    color: var(--on-dark-strong);
    text-decoration: none;
}

.mtu-footer a:hover {
    color: var(--on-brand);
    text-decoration: underline;
}

.mtu-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
    gap: 40px 32px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgb(var(--surface-rgb) / 12%);
}

.mtu-footer__logo {
    margin-bottom: 16px;
}

.mtu-footer__brand p {
    font-size: 14px;
    line-height: 22px;
    color: var(--on-dark);
    margin-bottom: 18px;
}

.mtu-footer__badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mtu-footer__badges li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--on-brand);
    background: rgb(var(--surface-rgb) / 8%);
    border-radius: 999px;
}

.mtu-footer__badges i {
    color: var(--accent);
}

.mtu-footer__col h4 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-brand);
    margin-bottom: 16px;
}

.mtu-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtu-footer__col li {
    margin-bottom: 9px;
    font-size: 14px;
    line-height: 21px;
}

.mtu-footer__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-weight: 700;
    color: var(--accent) !important;
}

.mtu-footer__contact li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.mtu-footer__contact li i {
    flex: 0 0 16px;
    margin-top: 3px;
    color: var(--accent);
}

.mtu-footer__contact span {
    overflow-wrap: anywhere;
}

/* Social links (07c): one round icon per link set in the admin panel. */
.mtu-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.mtu-footer__social a {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--on-dark-strong);
    background: rgb(var(--surface-rgb) / 10%);
}

.mtu-footer__social a:hover,
.mtu-footer__social a:focus-visible {
    color: var(--on-accent);
    background: var(--accent);
    text-decoration: none;
}

.mtu-footer__demo {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 17px;
    color: var(--on-dark-muted);
}

.mtu-footer__urgent {
    margin: 14px 0 0;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 18px;
    color: var(--danger-on-dark);
    background: rgb(var(--danger-rgb) / 22%);
    border-radius: var(--mtu-radius-sm);
}

.mtu-footer__urgent i {
    margin-right: 4px;
}

.mtu-footer__reg {
    padding: 22px 0;
    border-bottom: 1px solid rgb(var(--surface-rgb) / 12%);
}

.mtu-footer__reg p {
    margin: 0;
    font-size: 12px;
    line-height: 19px;
    color: var(--on-dark-muted);
}

.mtu-footer__reg a {
    color: var(--on-dark-strong);
    text-decoration: underline;
}

.mtu-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    padding-top: 22px;
}

.mtu-footer__bottom p {
    margin: 0;
    font-size: 13px;
    color: var(--on-dark-muted);
}

.mtu-footer__payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--on-dark-muted);
}

.mtu-footer__payments img {
    height: 22px;
    width: auto;
    opacity: 0.85;
    filter: brightness(1.6);
}

@media (max-width: 1199px) {
    .mtu-footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mtu-footer__brand {
        grid-column: 1 / -1;
    }

    .mtu-footer__contact {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    .mtu-footer {
        padding: 44px 0 22px;
    }

    .mtu-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
    }

    .mtu-footer__brand,
    .mtu-footer__contact {
        grid-column: 1 / -1;
    }

    .mtu-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

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

.mtu-hero {
    padding: 50px 0 60px;
    background: linear-gradient(180deg, var(--surface-alt), var(--surface));
}

.mtu-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 56px;
    align-items: center;
}

.mtu-hero__text h1 {
    font-size: 46px;
    line-height: 54px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 16px 0 18px;
}

.mtu-hero__text .mtu-lead {
    font-size: 18px;
    line-height: 29px;
    color: var(--text);
    margin-bottom: 28px;
}

.mtu-hero__points {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
}

.mtu-hero__points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-strong);
}

.mtu-hero__points i {
    color: var(--brand);
}

.mtu-hero__media {
    position: relative;
}

.mtu-hero__media img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    display: block;
    border-radius: 28px;
    box-shadow: var(--mtu-shadow);
}

.mtu-hero__card {
    position: absolute;
    left: -24px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--surface);
    border-radius: var(--mtu-radius);
    box-shadow: 0 16px 40px rgb(var(--shadow-rgb) / 14%);
}

.mtu-hero__card-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 14px;
}

.mtu-hero__card strong {
    display: block;
    font-size: 15px;
    color: var(--text-strong);
}

.mtu-hero__card span:not(.mtu-hero__card-icon) {
    font-size: 13px;
    color: var(--text-muted);
}

.mtu-strip {
    padding: 40px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.mtu-strip__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.mtu-strip__steps li {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.mtu-strip__num {
    position: absolute;
    top: -10px;
    left: -6px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--on-brand);
    background: var(--brand);
    border-radius: 999px;
}

.mtu-strip__icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 14px;
}

.mtu-strip__steps strong {
    display: block;
    font-size: 15px;
    color: var(--text-strong);
    margin-bottom: 2px;
}

.mtu-strip__steps li > div > span {
    font-size: 13px;
    line-height: 19px;
    color: var(--text-muted);
}

.mtu-strip__link {
    margin: 22px 0 0;
    text-align: right;
    font-size: 14px;
}

.mtu-home-cats,
.mtu-home-featured,
.mtu-home-posts {
    padding: 70px 0 10px;
}

.mtu-cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.mtu-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mtu-cat__media {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--surface-alt);
    overflow: hidden;
}

.mtu-cat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.mtu-cat:hover .mtu-cat__media img {
    transform: scale(1.04);
}

.mtu-cat:hover {
    transform: translateY(-3px);
    border-color: var(--border-brand);
    box-shadow: var(--mtu-shadow);
    text-decoration: none;
}

.mtu-cat__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px 20px;
}

.mtu-cat__body strong {
    font-size: 18px;
    color: var(--text-strong);
}

.mtu-cat__count {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand);
}

.mtu-cat__text {
    font-size: 13px;
    line-height: 19px;
    color: var(--text);
}

.mtu-cat__arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border-radius: 999px;
    color: var(--brand);
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mtu-cat:hover .mtu-cat__arrow {
    opacity: 1;
    transform: translateX(3px);
}

.mtu-trust-band {
    margin-top: 70px;
    padding: 60px 0;
    background: var(--surface-alt);
}

.mtu-trust-band__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 48px;
    align-items: center;
}

.mtu-trust-band__text h2 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 6px 0 12px;
}

.mtu-trust-band__text p {
    font-size: 16px;
    line-height: 26px;
    color: var(--text);
    margin-bottom: 16px;
}

.mtu-trust-band__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.mtu-trust-band__list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    background: var(--surface);
    border-radius: var(--mtu-radius-sm);
}

.mtu-trust-band__list li > i {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 12px;
}

.mtu-trust-band__list strong {
    display: block;
    font-size: 15px;
    color: var(--text-strong);
    margin-bottom: 2px;
}

.mtu-trust-band__list span {
    font-size: 13px;
    line-height: 19px;
    color: var(--text-muted);
}

@media (max-width: 1199px) {
    .mtu-cats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .mtu-hero__grid,
    .mtu-trust-band__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .mtu-hero__text h1 {
        font-size: 34px;
        line-height: 42px;
    }

    .mtu-hero__card {
        left: 12px;
        bottom: 12px;
    }

    .mtu-strip__steps,
    .mtu-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .mtu-hero {
        padding: 30px 0 40px;
    }

    .mtu-hero__text h1 {
        font-size: 28px;
        line-height: 36px;
    }

    .mtu-hero__text .mtu-actions .mtu-btn {
        width: 100%;
    }

    .mtu-hero__media img {
        aspect-ratio: 4 / 3;
        border-radius: 18px;
    }

    .mtu-hero__card {
        position: static;
        margin-top: 12px;
    }

    .mtu-strip__steps,
    .mtu-cats,
    .mtu-trust-band__list {
        grid-template-columns: 1fr;
    }

    .mtu-strip__link {
        text-align: left;
    }

    .mtu-home-cats,
    .mtu-home-featured,
    .mtu-home-posts {
        padding: 44px 0 0;
    }

    .mtu-trust-band {
        margin-top: 44px;
        padding: 40px 0;
    }
}

/* ------------------------------------------------------------------ */
/* Blog: cards, listing and article                                      */
/* ------------------------------------------------------------------ */

.mtu-blog {
    padding: 60px 0 100px;
}

.mtu-chip--mini {
    min-height: 28px;
    padding: 0 12px;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-color: transparent;
}

.mtu-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.mtu-post {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mtu-post:hover {
    transform: translateY(-3px);
    border-color: var(--border-brand);
    box-shadow: var(--mtu-shadow);
}

.mtu-post__media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--brand-soft), var(--brand-tint));
    overflow: hidden;
}

.mtu-post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mtu-post__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mtu-post__placeholder i {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--brand);
    background: rgb(var(--surface-rgb) / 75%);
    border-radius: 20px;
}

.mtu-post__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    padding: 20px 22px 22px;
    align-items: flex-start;
}

.mtu-post__title {
    font-size: 20px;
    line-height: 27px;
    font-weight: 700;
    margin: 2px 0 0;
}

.mtu-post__title a {
    color: var(--text-strong);
    text-decoration: none;
}

.mtu-post__title a:hover {
    color: var(--brand-dark);
}

.mtu-post__excerpt {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mtu-post__footer {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.mtu-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Article page (2026-10-01): the left column beside the blog sidebar,
   left-aligned, no author byline. */
.mtu-article__header {
    margin-bottom: 26px;
}

.mtu-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--text-muted);
}

.mtu-article__standfirst {
    font-size: 19px;
    line-height: 30px;
    color: var(--text);
    margin: 16px 0 0;
}

/* The featured picture: a 16:9 frame never taller than about 420px
   (240px on phones), the picture cropped to fill it rather than
   squashed. */
.mtu-article__hero {
    margin: 0 0 30px;
    border-radius: var(--mtu-radius);
    overflow: hidden;
}

.mtu-article__hero img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 420px;
    object-fit: cover;
}

.mtu-article__body {
    font-size: 17px;
    line-height: 30px;
    color: var(--text);
}

.mtu-article__body p,
.mtu-article__body ul,
.mtu-article__body ol {
    margin-bottom: 22px;
}

.mtu-article__body h2 {
    font-size: 26px;
    line-height: 34px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 38px 0 12px;
}

.mtu-article__body h3 {
    font-size: 21px;
    line-height: 30px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 30px 0 10px;
}

.mtu-article__body a {
    color: var(--brand);
    text-decoration: underline;
}

.mtu-article__body li {
    margin-bottom: 8px;
}

.mtu-article__body blockquote {
    margin: 0 0 22px;
    padding: 12px 20px;
    border-left: 4px solid var(--brand);
    background: var(--surface-alt);
    border-radius: 0 var(--mtu-radius-sm) var(--mtu-radius-sm) 0;
}

.mtu-article__footer {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.mtu-article__footer p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

@media (max-width: 991px) {
    .mtu-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

}

@media (max-width: 575px) {
    .mtu-blog {
        padding: 40px 0 60px;
    }

    .mtu-post-grid {
        grid-template-columns: 1fr;
    }

    .mtu-article__hero img {
        max-height: 240px;
    }

    .mtu-article__standfirst {
        font-size: 17px;
        line-height: 27px;
    }

    .mtu-article__body {
        font-size: 16px;
        line-height: 28px;
    }
}

/* ------------------------------------------------------------------ */
/* Content with a sidebar (2026-10-01): the blog (sidebar on the right,  */
/* below the content on phones) and the treatment list (categories on   */
/* the left, folded above the list on phones). One look for both.       */
/* ------------------------------------------------------------------ */

.mtu-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
}

.mtu-with-sidebar__main {
    min-width: 0;
}

@media (min-width: 992px) {
    .mtu-with-sidebar {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 48px;
        align-items: start;
    }

    .mtu-with-sidebar--left {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 40px;
    }

    /* Two posts a row beside the blog sidebar. */
    .mtu-with-sidebar__main .mtu-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Sidebar widgets */
.mtu-widget {
    padding: 22px 22px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
}

.mtu-widget + .mtu-widget {
    margin-top: 24px;
}

.mtu-widget__title {
    margin: 0 0 8px;
    padding-bottom: 12px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--text-strong);
    border-bottom: 2px solid var(--brand-soft);
}

/* The category list: a plain vertical list, a count each, the current one marked. */
.mtu-catlist__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtu-catlist__items li + li {
    border-top: 1px solid var(--border);
}

.mtu-catlist__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    margin: 0 -10px;
    padding: 8px 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-strong);
    border-radius: var(--mtu-radius-sm);
    text-decoration: none;
}

.mtu-catlist__link:hover,
.mtu-catlist__link:focus-visible {
    color: var(--brand-dark);
    background: var(--brand-soft);
    text-decoration: none;
}

.mtu-catlist__link:focus-visible,
.mtu-recent a:focus-visible,
.mtu-share__link:focus-visible,
.mtu-postnav__link:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.mtu-catlist__link.is-current {
    color: var(--brand-dark);
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
}

.mtu-catlist__count {
    flex: none;
    min-width: 28px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-alt);
    border-radius: 999px;
}

.mtu-catlist__link.is-current .mtu-catlist__count {
    color: var(--on-brand);
    background: var(--brand);
}

/* Treatment list (2026-10-01): two cards a row on desktop and tablet, one
   on phones; the cards use the width (bigger picture, larger text) and
   every card is the same height. */
.mtu-tcard-grid--catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 28px;
}

.mtu-tcard-grid--catalog .mtu-tcard__media {
    aspect-ratio: 3 / 2;
}

.mtu-tcard-grid--catalog .mtu-tcard__body {
    padding: 24px 26px 26px;
}

.mtu-tcard-grid--catalog .mtu-tcard__category {
    font-size: 13px;
}

.mtu-tcard-grid--catalog .mtu-tcard__title {
    font-size: 23px;
    line-height: 30px;
}

.mtu-tcard-grid--catalog .mtu-tcard__text {
    font-size: 16px;
    line-height: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mtu-tcard-grid--catalog .mtu-tcard__price {
    font-size: 22px;
}

@media (max-width: 991px) {
    .mtu-tcard-grid--catalog {
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .mtu-tcard-grid--catalog {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .mtu-tcard-grid--catalog .mtu-tcard__body {
        padding: 20px 20px 22px;
    }

    .mtu-tcard-grid--catalog .mtu-tcard__title {
        font-size: 21px;
        line-height: 28px;
    }
}

/* "Browse by category" (2026-10-01): a card in the treatment list's left
   column, sticky on desktop; on phones the "Category" select instead. */
.mtu-browse {
    padding: 20px 14px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
}

.mtu-browse__title {
    margin: 0 8px 10px;
    padding-bottom: 12px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--text-strong);
    border-bottom: 2px solid var(--brand-soft);
}

.mtu-browse__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtu-browse__list li + li {
    margin-top: 2px;
}

.mtu-browse__row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 6px 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    color: var(--text-strong);
    border-radius: var(--mtu-radius-sm);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mtu-browse__row:hover {
    color: var(--brand-dark);
    background: var(--surface-alt);
    text-decoration: none;
}

.mtu-browse__row:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 1px;
}

.mtu-browse__row.is-current {
    color: var(--brand-dark);
    background: var(--brand-soft);
    box-shadow: inset 4px 0 0 var(--brand);
}

.mtu-browse__thumb {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--surface-alt);
}

.mtu-browse__thumb--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--brand);
    background: var(--brand-soft);
}

.mtu-browse__row.is-current .mtu-browse__thumb--icon {
    color: var(--on-brand);
    background: var(--brand);
}

.mtu-browse__name {
    flex: 1 1 auto;
    min-width: 0;
}

.mtu-browse__count {
    flex: none;
    min-width: 30px;
    padding: 2px 9px;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-alt);
    border-radius: 999px;
}

.mtu-browse__row.is-current .mtu-browse__count {
    color: var(--on-brand);
    background: var(--brand);
}

.mtu-browse-select {
    display: none;
}

.mtu-browse-select label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-strong);
}

.mtu-browse-select__row {
    display: flex;
    gap: 10px;
}

.mtu-browse-select select {
    flex: 1 1 auto;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-strong);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
}

.mtu-browse-select select:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 1px;
}

@media (min-width: 992px) {
    /* The column runs the height of the list, so the card can stay in view. */
    .mtu-with-sidebar--left > .mtu-with-sidebar__aside {
        align-self: stretch;
    }

    .mtu-browse {
        position: sticky;
        top: calc(var(--mtu-header-offset) + 24px);
    }
}

@media (max-width: 991px) {
    .mtu-browse {
        display: none;
    }

    .mtu-browse-select {
        display: block;
    }
}

/* Recent posts */
.mtu-recent {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtu-recent li {
    padding: 12px 0;
}

.mtu-recent li + li {
    border-top: 1px solid var(--border);
}

.mtu-recent a {
    display: block;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--text-strong);
    text-decoration: none;
}

.mtu-recent a:hover,
.mtu-recent a[aria-current] {
    color: var(--brand-dark);
}

.mtu-recent a:hover {
    text-decoration: underline;
}

.mtu-recent time {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Share links: plain links, no third-party script. */
.mtu-share {
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.mtu-share__title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-strong);
}

.mtu-share__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtu-share__list [hidden] {
    display: none;
}

.mtu-share__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
}

.mtu-share__link i {
    color: var(--brand);
}

.mtu-share__link:hover,
.mtu-share__link:focus-visible {
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-color: var(--border-brand);
    text-decoration: none;
}

.mtu-share__status {
    min-height: 22px;
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--success);
}

/* Previous and next article */
.mtu-postnav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.mtu-postnav__link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
    text-decoration: none;
}

.mtu-postnav__link--next {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
}

.mtu-postnav__link:hover,
.mtu-postnav__link:focus-visible {
    border-color: var(--border-brand);
    background: var(--brand-soft);
    text-decoration: none;
}

.mtu-postnav__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mtu-postnav__title {
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: var(--text-strong);
}

.mtu-postnav__link:hover .mtu-postnav__title {
    color: var(--brand-dark);
}

/* More from the same category, under the article */
.mtu-article__related {
    margin-top: 44px;
}

.mtu-article__related-title {
    margin: 0 0 20px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--text-strong);
}

@media (max-width: 575px) {
    .mtu-postnav {
        grid-template-columns: 1fr;
    }

    .mtu-postnav__link--next {
        grid-column: auto;
    }
}

/* ------------------------------------------------------------------ */
/* Contact, FAQ and About pages                                          */
/* ------------------------------------------------------------------ */

.mtu-contact {
    padding: 60px 0 100px;
    background: var(--surface-alt);
}

.mtu-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 32px;
    align-items: start;
}

.mtu-contact__form .mtu-panel__header h1 {
    font-size: 28px;
}

.mtu-contact__urgent {
    margin-bottom: 20px;
}

.mtu-contact__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtu-contact__list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.mtu-contact__list li:last-child {
    border-bottom: 0;
}

.mtu-contact__list li > i {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 10px;
}

.mtu-contact__list strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.mtu-contact__list a,
.mtu-contact__list span {
    font-size: 15px;
    line-height: 22px;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.mtu-contact__list a {
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}

/* The address marker keeps its own colour against the span rule above. */
.mtu-contact__list .mtu-tbc {
    color: var(--warning);
}

.mtu-hours {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtu-hours li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

.mtu-hours li:last-child {
    border-bottom: 0;
}

.mtu-hours span {
    color: var(--text);
}

.mtu-hours strong {
    color: var(--text-strong);
    white-space: nowrap;
}

.mtu-side-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtu-side-links li {
    padding: 6px 0;
}

.mtu-side-links i {
    width: 20px;
    margin-right: 6px;
    text-align: center;
}

.mtu-faq-page {
    padding: 60px 0 100px;
}

.mtu-faq-page__grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.mtu-faq-page__nav {
    position: sticky;
    top: calc(var(--mtu-header-offset) + 24px);
}

.mtu-faq-page__nav-title {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mtu-faq-page__nav ul {
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
}

.mtu-faq-page__nav ul a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    border-radius: var(--mtu-radius-sm);
    text-decoration: none;
}

.mtu-faq-page__nav ul a i {
    width: 18px;
    text-align: center;
    color: var(--brand);
}

.mtu-faq-page__nav ul a:hover {
    color: var(--brand-dark);
    background: var(--brand-soft);
}

.mtu-faq-group {
    padding-bottom: 36px;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--border);
    scroll-margin-top: calc(var(--mtu-header-offset) + 24px);
}

.mtu-faq-group:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.mtu-faq-group h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 16px;
}

.mtu-faq-group__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 12px;
}

.mtu-about {
    padding: 70px 0 30px;
}

.mtu-about__story {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: center;
}

.mtu-about__story h2 {
    font-size: 34px;
    line-height: 42px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 16px;
}

.mtu-about__story p {
    font-size: 16px;
    line-height: 26px;
    color: var(--text);
}

.mtu-about__points {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.mtu-about__points li {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
}

.mtu-about__points i {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--on-brand);
    background: var(--brand);
    border-radius: 999px;
}

.mtu-about__figure {
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--mtu-radius);
    overflow: hidden;
    box-shadow: var(--mtu-shadow);
}

.mtu-about__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mtu-about-partners {
    padding: 60px 0;
}

.mtu-roles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.mtu-role {
    padding: 28px 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
}

.mtu-role__icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 22px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 16px;
}

.mtu-role h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 10px;
}

.mtu-role p {
    font-size: 15px;
    line-height: 24px;
    color: var(--text);
    margin-bottom: 10px;
}

.mtu-about-reg {
    padding: 20px 0 100px;
}

.mtu-about-reg__box {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 40px;
    align-items: center;
    padding: 40px 44px;
    background: var(--surface-alt);
    border-radius: var(--mtu-radius);
}

.mtu-about-reg__text h2 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 12px;
}

.mtu-about-reg__text p {
    font-size: 15px;
    line-height: 24px;
    color: var(--text);
    margin-bottom: 20px;
}

.mtu-about-reg__facts {
    margin: 0;
    background: var(--surface);
    border-radius: var(--mtu-radius-sm);
    padding: 8px 22px;
}

.mtu-about-reg__facts > div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    line-height: 21px;
}

.mtu-about-reg__facts > div:last-child {
    border-bottom: 0;
}

.mtu-about-reg__facts dt {
    font-weight: 700;
    color: var(--text-muted);
}

.mtu-about-reg__facts dd {
    margin: 0;
    color: var(--text-strong);
}

@media (max-width: 991px) {
    .mtu-contact__grid,
    .mtu-about__story,
    .mtu-about-reg__box {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mtu-faq-page__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mtu-faq-page__nav {
        position: static;
    }

    .mtu-faq-page__nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .mtu-faq-page__nav .mtu-side-card {
        display: none;
    }

    .mtu-about__figure {
        aspect-ratio: 16 / 10;
    }

    .mtu-roles {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .mtu-contact,
    .mtu-faq-page,
    .mtu-about {
        padding: 40px 0 60px;
    }

    .mtu-about__story h2 {
        font-size: 26px;
        line-height: 32px;
    }

    .mtu-about-reg__box {
        padding: 24px 20px;
    }

    .mtu-about-reg__facts > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .mtu-about-reg__text h2 {
        font-size: 24px;
        line-height: 30px;
    }
}

/* ------------------------------------------------------------------ */
/* How It Works: customer journey                                       */
/* ------------------------------------------------------------------ */

.mtu-journey {
    padding: 70px 0 30px;
}

.mtu-journey__intro {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.mtu-journey__intro h2 {
    font-size: 34px;
    line-height: 42px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 12px;
}

.mtu-journey__intro p {
    font-size: 17px;
    line-height: 27px;
    color: var(--text);
    margin: 0;
}

.mtu-journey__steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtu-journey__step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 24px;
}

.mtu-journey__marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mtu-journey__number {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--on-brand);
    background: var(--brand);
    border-radius: 999px;
    box-shadow: 0 0 0 8px var(--brand-soft);
}

.mtu-journey__line {
    flex: 1 1 auto;
    width: 3px;
    margin: 12px 0;
    background: linear-gradient(var(--brand-soft), var(--border));
    border-radius: 3px;
}

.mtu-journey__step:last-child .mtu-journey__line {
    display: none;
}

.mtu-journey__card {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
    align-items: center;
    padding: 30px 34px;
    margin-bottom: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
    box-shadow: var(--mtu-shadow);
}

.mtu-journey__step:nth-child(even) .mtu-journey__card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.mtu-journey__step:nth-child(even) .mtu-journey__content {
    order: 2;
}

.mtu-journey__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 20px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 14px;
}

.mtu-journey__content h3 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 8px;
}

.mtu-journey__timing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--surface-alt);
    border-radius: 999px;
}

.mtu-journey__content p:last-child {
    font-size: 16px;
    line-height: 26px;
    color: var(--text);
    margin: 0;
}

.mtu-journey__figure {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--mtu-radius-sm);
    overflow: hidden;
    background: var(--surface-alt);
}

.mtu-journey__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mtu-journey__after {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.mtu-journey__after-item {
    display: flex;
    gap: 14px;
    padding: 22px;
    background: var(--surface-alt);
    border-radius: var(--mtu-radius);
}

.mtu-journey__after-item > i {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    background: var(--surface);
    border-radius: 12px;
}

.mtu-journey__after-item strong {
    display: block;
    font-size: 16px;
    color: var(--text-strong);
    margin-bottom: 4px;
}

.mtu-journey__after-item p {
    font-size: 14px;
    line-height: 21px;
    color: var(--text);
    margin: 0;
}

.mtu-journey-cta {
    padding: 40px 0 100px;
}

.mtu-journey-cta__box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px 32px;
    padding: 40px 44px;
    color: var(--on-brand);
    background: linear-gradient(120deg, var(--brand), var(--brand-dark));
    border-radius: var(--mtu-radius);
}

.mtu-journey-cta__box h2 {
    font-size: 30px;
    font-weight: 700;
    color: var(--on-brand);
    margin-bottom: 6px;
}

.mtu-journey-cta__box p {
    font-size: 16px;
    color: rgb(var(--surface-rgb) / 85%);
    margin: 0;
}

.mtu-journey-cta__box .mtu-btn {
    color: var(--text-strong);
    background: var(--accent);
    border-color: var(--accent);
}

.mtu-journey-cta__box .mtu-btn:hover {
    background: var(--surface);
    border-color: var(--on-brand);
}

@media (max-width: 991px) {
    .mtu-journey__card,
    .mtu-journey__step:nth-child(even) .mtu-journey__card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px;
    }

    .mtu-journey__step:nth-child(even) .mtu-journey__content {
        order: 0;
    }

    .mtu-journey__figure {
        aspect-ratio: 16 / 9;
    }

    .mtu-journey__after {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .mtu-journey {
        padding: 44px 0 20px;
    }

    .mtu-journey__intro h2 {
        font-size: 26px;
        line-height: 32px;
    }

    .mtu-journey__step {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
    }

    .mtu-journey__number {
        width: 40px;
        height: 40px;
        font-size: 16px;
        box-shadow: 0 0 0 6px var(--brand-soft);
    }

    .mtu-journey__card {
        padding: 20px 18px;
    }

    .mtu-journey__content h3 {
        font-size: 20px;
        line-height: 26px;
    }

    .mtu-journey-cta__box {
        padding: 28px 22px;
    }

    .mtu-journey-cta__box .mtu-btn {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ */
/* Treatment detail page                                                */
/* ------------------------------------------------------------------ */

.mtu-product {
    padding: 60px 0 40px;
}

.mtu-product__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
    align-items: start;
}

.mtu-product__media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--mtu-radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

.mtu-product__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mtu-product__media img[hidden] {
    display: none;
}

.mtu-product__media .mtu-tcard__placeholder i {
    width: 96px;
    height: 96px;
    font-size: 40px;
    border-radius: 28px;
}

.mtu-product__media .mtu-tcard__placeholder span {
    font-size: 26px;
}

.mtu-product__flag {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-strong);
    background: rgb(var(--surface-rgb) / 85%);
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.mtu-product__flag i {
    color: var(--brand);
}

.mtu-product__category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand);
    text-decoration: none;
}

.mtu-product__category:hover {
    color: var(--brand-dark);
    text-decoration: none;
}

.mtu-product__title {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 12px;
}

.mtu-product__lead {
    font-size: 17px;
    line-height: 27px;
    color: var(--text);
    margin-bottom: 24px;
}

.mtu-product__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    padding: 18px 0;
    margin-bottom: 22px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.mtu-product__amount {
    font-size: 34px;
    line-height: 40px;
    font-weight: 700;
    color: var(--text-strong);
}

.mtu-product__price-note {
    font-size: 14px;
    color: var(--text-muted);
}

.mtu-product__cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 26px;
}

.mtu-btn--large {
    min-height: 60px;
    padding: 0 36px;
    font-size: 17px;
}

.mtu-product__cta-note {
    font-size: 13px;
    color: var(--text-muted);
}

.mtu-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.mtu-facts li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    background: var(--surface-alt);
    border-radius: var(--mtu-radius-sm);
}

.mtu-facts li i {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--brand);
    background: var(--surface);
    border-radius: 12px;
}

.mtu-facts strong {
    display: block;
    font-size: 15px;
    color: var(--text-strong);
}

.mtu-facts span {
    font-size: 13px;
    line-height: 19px;
    color: var(--text-muted);
}

/* Trust strip (2026-09-30): each item a card with an icon, a short bold
   title and one line; four across, two on tablets, one on phones. */
.mtu-trust-strip {
    padding: 32px 0;
    background: var(--brand-soft);
}

.mtu-trust-strip ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.mtu-trust-strip li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
}

.mtu-trust-strip__icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: var(--mtu-radius-sm);
}

.mtu-trust-strip__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mtu-trust-strip__text strong {
    font-size: 16px;
    line-height: 22px;
    color: var(--text-strong);
}

.mtu-trust-strip__text span {
    font-size: 14px;
    line-height: 21px;
    color: var(--text-muted);
}

.mtu-product-details {
    padding: 60px 0 40px;
}

.mtu-product-details__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 40px;
    align-items: start;
}

.mtu-block {
    padding: 0 0 36px;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--border);
}

.mtu-block:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.mtu-block h2 {
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 14px;
}

.mtu-block p {
    font-size: 16px;
    line-height: 26px;
    color: var(--text);
}

.mtu-block__lead {
    color: var(--text-muted) !important;
    margin-bottom: 18px;
}

.mtu-disclosures,
.mtu-faq {
    display: grid;
    gap: 10px;
}

.mtu-disclosure {
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
    background: var(--surface);
}

.mtu-disclosure[open] {
    border-color: var(--border-brand);
}

.mtu-disclosure summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-strong);
    cursor: pointer;
    list-style: none;
}

.mtu-disclosure summary::-webkit-details-marker {
    display: none;
}

.mtu-disclosure summary i {
    margin-left: auto;
    color: var(--brand);
    transition: transform 0.2s ease;
}

.mtu-disclosure[open] summary i {
    transform: rotate(180deg);
}

.mtu-disclosure__num {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--on-brand);
    background: var(--brand);
    border-radius: 999px;
}

.mtu-disclosure__body {
    padding: 0 18px 16px;
}

.mtu-disclosure__body p {
    font-size: 15px;
    line-height: 24px;
    margin: 0;
}

.mtu-side-card {
    padding: 26px 26px 28px;
    margin-bottom: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
}

.mtu-side-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 14px;
}

.mtu-side-card h3 i {
    color: var(--brand);
}

.mtu-side-card p {
    font-size: 15px;
    line-height: 23px;
    color: var(--text);
    margin-bottom: 18px;
}

.mtu-side-card--accent {
    background: var(--surface-alt);
    border-color: transparent;
}

.mtu-side-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.mtu-side-list li {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    line-height: 21px;
}

.mtu-side-list li:last-child {
    border-bottom: 0;
}

.mtu-side-list strong {
    color: var(--text-strong);
}

.mtu-side-list span {
    color: var(--text);
}

.mtu-related {
    padding: 50px 0 100px;
}

.mtu-related__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 26px;
}

.mtu-related__header h2 {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0;
}

/* The product picture stays in view beside the details from the tablet
   breakpoint up (2026-09-30); on phones it is in the normal flow. */
@media (min-width: 768px) {
    .mtu-product__media {
        position: sticky;
        top: calc(var(--mtu-header-offset) + 24px);
    }
}

@media (max-width: 991px) {
    .mtu-product__grid {
        gap: 28px;
    }

    .mtu-product-details__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 767px) {
    .mtu-product__grid {
        grid-template-columns: 1fr;
    }

    .mtu-product__media {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 991px) {
    .mtu-product__title {
        font-size: 32px;
        line-height: 40px;
    }

    .mtu-trust-strip ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .mtu-product {
        padding: 36px 0 24px;
    }

    .mtu-product__title {
        font-size: 28px;
        line-height: 34px;
    }

    .mtu-product__amount {
        font-size: 28px;
    }

    .mtu-product__cta .mtu-btn {
        width: 100%;
    }

    .mtu-trust-strip ul {
        grid-template-columns: 1fr;
    }

    .mtu-product-details {
        padding: 40px 0 20px;
    }

    .mtu-side-list li {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

.mtu-privacy-note a {
    color: var(--brand);
    text-decoration: underline;
}

/* Validation messages after checkbox rows and choice lists sit below the whole row. */
.mtu-check + .mtu-error,
.mtu-choices + .mtu-error {
    margin-top: -4px;
    margin-bottom: 12px;
}

/* ------------------------------------------------------------------ */
/* Theme back-to-top pulse                                              */
/* ------------------------------------------------------------------ */

/* The theme animates #button's ring with literal purples (style.css
   @keyframes spineer). Redeclaring the keyframes here, loaded later, makes
   the ring follow the brand token. */
@keyframes spineer {
    from {
        box-shadow: 0 0 0 0 rgb(var(--brand-rgb) / 40%);
    }

    to {
        box-shadow: 0 0 0 35px rgb(var(--brand-rgb) / 1%);
    }
}

/* ------------------------------------------------------------------ */
/* Unmistakable feedback                                                */
/* ------------------------------------------------------------------ */

/* Written for an audience of 46 to 80. Three things every control owes
   the customer: it looks pressed while the finger or mouse is down, it
   says so when it is working, and it is big enough to hit. Hover alone
   is not feedback - it does not exist on a touch screen. */

/* Pressed. A shade darker and pushed down one pixel, so the press reads
   even to someone who cannot pick out the colour change. */
.mtu-btn:active,
.mtu-btn.is-busy {
    transform: translateY(1px);
    filter: brightness(0.92);
}

.mtu-btn:active {
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 18%);
}

/* Text links, navigation, cards and pagination: same idea, no transform
   on the big surfaces (a card jumping under the finger reads as a fault
   rather than as feedback). */
.mtu-link:active,
.mtu-nav__link:active,
.mtu-menu__item:active,
.mtu-drawer__link:active,
.mtu-pagination .page-link:active,
.mtu-table td a:not(.mtu-btn):active,
.mtu-password__toggle:active {
    filter: brightness(0.9);
}

/* .mtu-pagination .page-link:active,
.mtu-password__toggle:active {
    transform: translateY(1px);
} */

/* Choice rows are the most-pressed control in an assessment. */
.mtu-choice:active {
    border-color: var(--brand);
    background: var(--brand-soft);
}

/* Busy submit button (theme-custom.js): label swapped for a spinner and
   short wording, then disabled. Keep it looking pressed rather than
   greyed out, so it does not read as "broken". */
.mtu-btn.is-busy,
.mtu-btn.is-busy:disabled,
.mtu-btn.is-busy[disabled] {
    opacity: 1;
    cursor: progress;
}

.mtu-spinner {
    width: 18px;
    height: 18px;
    flex: none;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mtu-spin 0.7s linear infinite;
}

@keyframes mtu-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mtu-btn:active,
    .mtu-btn.is-busy,
    .mtu-pagination .page-link:active,
    .mtu-password__toggle:active {
        transform: none;
    }

    /* Still needs to show it is working: pulse instead of spin. */
    .mtu-spinner {
        animation: mtu-pulse 1.2s ease-in-out infinite;
    }
}

@keyframes mtu-pulse {
    50% {
        opacity: 0.35;
    }
}

/* Focus. Strong enough to find at arm's length, and never removed: the
   ring is drawn outside the control so it survives a coloured background. */
.mtu-btn:focus-visible,
.mtu-link:focus-visible,
.mtu-nav__link:focus-visible,
.mtu-menu__item:focus-visible,
.mtu-pagination .page-link:focus-visible,
.mtu-choice:has(input:focus-visible),
.mtu-password__toggle:focus-visible,
.mtu-table td a:not(.mtu-btn):focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--brand-soft);
}

/* Inputs already carry a brand border on focus; add the same halo so a
   keyboard user sees the same signal everywhere. */
.mtu-field input:focus-visible,
.mtu-field select:focus-visible,
.mtu-field textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* Touch targets. On a touch screen every control is at least 44px in both
   directions (WCAG 2.5.5 target size). Checkbox and radio rows get there
   through the row, not the box, so the whole row is tappable. */
@media (hover: none) and (pointer: coarse) {
    .mtu-btn,
    .mtu-btn--small {
        min-height: 48px;
    }

    .mtu-choice {
        min-height: 52px;
        padding: 14px 16px;
    }

    .mtu-choice input {
        width: 24px;
        height: 24px;
    }

    .mtu-pagination .page-item .page-link {
        min-width: 48px;
        height: 48px;
    }

    .mtu-link,
    .mtu-table td a:not(.mtu-btn) {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }

    .mtu-password__toggle,
    .mtu-drawer__close {
        min-width: 44px;
        min-height: 44px;
    }

    /* Links sitting in a run of prose are not tap targets in their own
       right; leave them in the flow of the sentence. */
    .mtu-doc .mtu-link,
    p .mtu-link {
        display: inline;
        min-height: 0;
        line-height: inherit;
    }
}

/* ------------------------------------------------------------------ */
/* Treatment variations (strength and pack size)                        */
/* ------------------------------------------------------------------ */

/* Deliberately the same control as an assessment answer: a full-width
   row that is entirely clickable, with the price on the right. No
   dropdown, no swatches, nothing that has to be learned. */

.mtu-product__unit {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
}

.mtu-variations {
    margin-bottom: 24px;
}

.mtu-variations fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.mtu-variations .mtu-legend {
    display: block;
    margin-bottom: 10px;
}

.mtu-variations .mtu-choices {
    margin-bottom: 14px;
}

.mtu-choice--variation {
    /* Roomier than an answer row: this one carries two lines of content. */
    padding: 14px 18px;
}

.mtu-choice__text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    width: 100%;
}

.mtu-choice__text strong {
    font-size: 16px;
    color: var(--text-strong);
}

.mtu-choice__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-strong);
}

.mtu-choice__unit {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

/* The chosen row has to be obvious at a glance, not just a tinted
   border: the whole row deepens and the price goes brand-coloured. */
.mtu-choice--variation:has(input:checked) .mtu-choice__price {
    color: var(--brand-dark);
}

@media (max-width: 575px) {
    .mtu-choice__text {
        flex-direction: column;
    }

    .mtu-choice__price {
        gap: 8px;
    }
}

/* ------------------------------------------------------------------ */
/* Guest consultation (milestone 03b)                                   */
/* ------------------------------------------------------------------ */

/* Where the customer is in the whole journey: answers, account, order.
   Big numbered steps rather than a thin progress bar, because the
   audience needs to read it, not decode it. */
.mtu-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    counter-reset: none;
}

.mtu-flow li {
    flex: 1 1 180px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 600;
}

.mtu-flow__num {
    flex: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 700;
}

.mtu-flow li.is-current {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--text-strong);
}

.mtu-flow li.is-current .mtu-flow__num {
    background: var(--brand);
    color: var(--on-brand);
}

.mtu-flow li.is-done {
    border-color: var(--border-brand);
    color: var(--text);
}

.mtu-flow li.is-done .mtu-flow__num {
    background: var(--success);
    color: var(--on-brand);
}

/* Questions on the left, the chosen treatment beside them. */
.mtu-consultation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.mtu-consultation__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 96px;
}

.mtu-chosen {
    display: flex;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
    background: var(--surface);
}

.mtu-chosen__media {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: var(--mtu-radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mtu-chosen__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mtu-chosen__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mtu-chosen__eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mtu-chosen__name {
    font-size: 17px;
    color: var(--text-strong);
}

.mtu-chosen__variation {
    font-size: 15px;
    color: var(--text);
}

.mtu-chosen__price {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-strong);
}

.mtu-chosen__note {
    margin-top: 6px;
    font-size: 13px;
    line-height: 19px;
    color: var(--text-muted);
}

.mtu-consultation__restart {
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: var(--mtu-radius);
}

.mtu-consultation__restart p {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--text-muted);
}

/* Summary of the answers on the account step. */
.mtu-summary {
    padding: 16px 0;
    border-top: 1px solid var(--border);
}

.mtu-summary__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.mtu-summary__head h3 {
    margin: 0;
}

.mtu-summary__list {
    margin: 0;
}

.mtu-summary__list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 16px;
    padding: 6px 0;
}

.mtu-summary__list dt {
    font-weight: 600;
    color: var(--text);
}

.mtu-summary__list dd {
    margin: 0;
    color: var(--text-strong);
}

.mtu-actions--stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 991px) {
    .mtu-consultation {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Product first on a phone: it answers "what am I filling in?" */
    .mtu-consultation__side {
        order: -1;
        position: static;
    }

    .mtu-summary__list > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}

@media (max-width: 575px) {
    .mtu-flow li {
        flex-basis: 100%;
    }
}

/* A value the account owns, shown inside a consultation but changed only
   in My Details (sex, date of birth). Reads as an answer, not as a broken
   input. */
.mtu-locked {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
    background: var(--surface-alt);
}

.mtu-locked__value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-strong);
}

.mtu-locked__note {
    font-size: 14px;
    color: var(--text-muted);
}

.mtu-locked__note i {
    margin-right: 4px;
}

.mtu-actions--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 6px;
}

/* The held-consultation notice standing in for, or above, the treatment
   page's start button: the CTA block's own gap spaces it. */
.mtu-product__cta .mtu-alert {
    margin-bottom: 0;
}

/* A visitor's Continue in that notice is a link styled as a button; the
   alert's own link rule (inherit colour, underline) must not undo that. */
.mtu-alert a.mtu-btn {
    color: var(--on-brand);
    text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Orders (milestone 04)                                                */
/* ------------------------------------------------------------------ */

.mtu-muted {
    color: var(--text-muted);
}

/* Delivery address choice on the checkout page: label above, one-line
   address below, inside the shared radio-card style. */
.mtu-choice--address .mtu-choice__text {
    display: grid;
    gap: 2px;
}

.mtu-choice--address .mtu-choice__text > span {
    font-size: 14px;
    color: var(--text-muted);
}

.mtu-choice--address .mtu-badge {
    margin-left: 8px;
    vertical-align: middle;
}

/* The payment gap on the checkout page: said out loud, not hidden. */
.mtu-gap {
    padding: 18px 20px;
    margin: 0 0 22px;
    border: 1px dashed var(--border);
    border-radius: var(--mtu-radius-sm);
    background: var(--surface-alt);
}

.mtu-gap strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text-strong);
}

.mtu-gap p {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 22px;
}

/* The order timeline: one row per status the order has had. */
.mtu-timeline {
    list-style: none;
    margin: 0 0 8px;
    padding: 0 0 0 22px;
    position: relative;
}

.mtu-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 6px;
    width: 2px;
    background: var(--border);
}

.mtu-timeline li {
    position: relative;
    padding: 6px 0 6px 8px;
}

.mtu-timeline li::before {
    content: "";
    position: absolute;
    top: 13px;
    left: -21px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--brand);
}

.mtu-timeline li.is-current::before {
    background: var(--brand);
}

.mtu-timeline__status {
    display: block;
    font-weight: 600;
    color: var(--text-strong);
}

.mtu-timeline__time {
    display: block;
    font-size: 14px;
    color: var(--text-muted);
}

/* "I would like to cancel this order": tucked behind a disclosure so it
   is never the most prominent thing on the page. */
.mtu-cancel summary {
    cursor: pointer;
    list-style: none;
}

.mtu-cancel summary::-webkit-details-marker {
    display: none;
}

.mtu-textarea {
    display: block;
    width: 100%;
    min-height: 96px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font: inherit;
    font-size: 16px;
    color: var(--text-strong);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
}

.mtu-textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* The invoice: its own page, readable on screen, plain when printed. */
.mtu-invoice-page {
    margin: 0;
    padding: 24px 16px;
    font-family: inherit;
    color: var(--text-strong);
    background: var(--surface-alt);
}

.mtu-invoice {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px;
    background: var(--surface);
    border-radius: var(--mtu-radius-sm);
}

.mtu-invoice__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.mtu-invoice__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 32px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
}

.mtu-invoice__brand {
    display: block;
    font-weight: 700;
    color: var(--brand);
}

.mtu-invoice__header h1 {
    margin: 4px 0 0;
    font-size: 28px;
}

.mtu-invoice__meta {
    margin: 0;
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 16px;
    font-size: 14px;
}

.mtu-invoice__meta div {
    display: contents;
}

.mtu-invoice__meta dt {
    color: var(--text-muted);
}

.mtu-invoice__meta dd {
    margin: 0;
    font-weight: 600;
}

.mtu-invoice__parties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.mtu-invoice__parties h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 6px;
}

.mtu-invoice__parties p {
    margin: 0 0 4px;
    line-height: 22px;
}

.mtu-invoice__lines {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 15px;
}

.mtu-invoice__lines th,
.mtu-invoice__lines td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.mtu-invoice__lines .num {
    text-align: right;
    white-space: nowrap;
}

.mtu-invoice__lines tfoot th {
    text-align: right;
    font-weight: 600;
}

.mtu-invoice__lines tfoot .total th,
.mtu-invoice__lines tfoot .total td {
    font-size: 17px;
    font-weight: 700;
    border-bottom: 0;
}

.mtu-invoice__note {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .mtu-invoice {
        padding: 20px 16px;
    }

    .mtu-invoice__lines {
        font-size: 13px;
    }

    .mtu-invoice__lines th,
    .mtu-invoice__lines td {
        padding: 8px 4px;
    }
}

@media print {
    .mtu-invoice-page {
        padding: 0;
        background: #fff;
    }

    .mtu-invoice {
        max-width: none;
        padding: 0;
        border-radius: 0;
    }

    [data-no-print] {
        display: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* Customer portal (milestone 06)                                       */
/* ------------------------------------------------------------------ */
/*
 * The signed-in area's own shell (layouts/portal.blade.php): a slim bar
 * saying who is signed in, a persistent navigation, no marketing banner,
 * a light footer and a tinted page. Written for customers aged 46 to 80
 * on phones first: 17px text, 48px minimum tap targets, visible pressed
 * and focus states, state in words as well as colour.
 */

.mtu-portal-body {
    background: var(--portal-bg);
    color: var(--text);
}

.mtu-skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 2000;
    padding: 12px 18px;
    font-weight: 700;
    color: var(--on-brand);
    background: var(--brand);
    border-radius: var(--mtu-radius-sm);
}

.mtu-skip-link:focus {
    top: 12px;
    color: var(--on-brand);
}

/* Portal bar */
.mtu-portal-bar {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--surface);
    border-top: 4px solid var(--brand);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 18px rgb(var(--shadow-rgb) / 5%);
}

.mtu-portal-bar__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.mtu-portal-bar__area {
    padding-left: 18px;
    border-left: 2px solid var(--border);
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-dark);
    text-decoration: none;
    white-space: nowrap;
}

.mtu-portal-bar__area:hover,
.mtu-portal-bar__area:focus {
    color: var(--brand);
    text-decoration: none;
}

.mtu-portal-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--on-brand);
    background: var(--brand);
    border-radius: 50%;
}

/* The one account button and its menu (2026-09-30) */
.mtu-portal-account {
    position: relative;
    margin-left: auto;
}

.mtu-portal-account__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 6px 14px 6px 6px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-strong);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
}

.mtu-portal-account__button:hover,
.mtu-portal-account__button[aria-expanded="true"] {
    border-color: var(--border-brand);
    background: var(--brand-soft);
}

.mtu-portal-account__button:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.mtu-portal-account__button i {
    font-size: 12px;
    color: var(--brand);
}

.mtu-portal-account__name {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtu-portal-account .mtu-menu {
    z-index: 950;
}

.mtu-portal-account .mtu-menu__item {
    min-height: 48px;
    font-size: 16px;
}

.mtu-portal-account form {
    margin: 0;
}

/* Page frame: sidebar and content */
.mtu-portal {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px 72px;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.mtu-portal__side {
    position: sticky;
    top: 104px;
}

.mtu-portal__main {
    min-width: 0;
    font-size: 17px;
    line-height: 1.6;
}

.mtu-portal__main:focus {
    outline: none;
}

.mtu-portal-nav {
    list-style: none;
    margin: 0;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
    box-shadow: var(--mtu-shadow);
}

.mtu-portal-nav li {
    margin: 0;
}

.mtu-portal-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 12px 16px;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-strong);
    border-radius: var(--mtu-radius-sm);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

.mtu-portal-nav a i {
    width: 22px;
    text-align: center;
    font-size: 18px;
    color: var(--brand);
}

.mtu-portal-nav a:hover,
.mtu-portal-nav a:focus-visible {
    color: var(--brand-dark);
    background: var(--brand-tint);
    text-decoration: none;
}

.mtu-portal-nav a:active {
    transform: scale(0.98);
    background: var(--brand-soft);
}

.mtu-portal-nav a[aria-current="page"] {
    color: var(--brand-dark);
    background: var(--brand-soft);
}

.mtu-portal-nav a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 5px;
    border-radius: 0 5px 5px 0;
    background: var(--brand);
}

.mtu-portal-nav--drawer {
    padding: 12px;
    border: 0;
    box-shadow: none;
}

/* Page heading, on the tinted page rather than in a card */
.mtu-portal__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 22px;
}

.mtu-portal__head h1 {
    margin: 0 0 4px;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-strong);
}

.mtu-portal__head p {
    margin: 0;
    font-size: 17px;
    color: var(--text);
}

.mtu-portal__main .mtu-panel {
    padding: 28px 32px 32px;
}

/* Portal buttons: taller than on the public site. */
.mtu-portal__main .mtu-btn {
    min-height: 48px;
    font-size: 16px;
}

.mtu-portal__main .mtu-btn--small {
    min-height: 44px;
}

.mtu-portal__main .mtu-btn:active {
    transform: translateY(1px);
}

/* Cards */
.mtu-portal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius);
    box-shadow: var(--mtu-shadow);
    padding: 24px 26px;
}

.mtu-portal-card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--text-strong);
}

.mtu-portal-card h2 i {
    color: var(--brand);
}

.mtu-portal-card__empty {
    margin: 0 0 16px;
    color: var(--text);
}

/* Dashboard */
.mtu-dash {
    display: grid;
    gap: 22px;
}

.mtu-dash__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

.mtu-dash__order {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 14px;
}

.mtu-dash__order strong {
    font-size: 19px;
    color: var(--text-strong);
}

.mtu-dash__start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--brand-soft);
    border-color: var(--border-brand);
}

.mtu-dash__start h2 {
    margin-bottom: 4px;
}

.mtu-dash__start p {
    margin: 0;
}

.mtu-todo {
    border-left: 6px solid var(--warning);
}

.mtu-todo h2 i {
    color: var(--warning);
}

.mtu-todo__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.mtu-todo__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    padding: 16px 18px;
    background: var(--warning-bg);
    border-radius: var(--mtu-radius-sm);
}

.mtu-todo__item strong {
    display: block;
    font-size: 18px;
    color: var(--text-strong);
}

.mtu-todo__item span {
    display: block;
    color: var(--text-strong);
}

.mtu-todo__item form {
    margin: 0;
}

/* A list of rows, each one large link */
.mtu-rowlist {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}

.mtu-rowlist li {
    border-bottom: 1px solid var(--border);
}

.mtu-rowlist__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 64px;
    padding: 12px 6px;
    color: var(--text-strong);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.mtu-rowlist__link:hover,
.mtu-rowlist__link:focus-visible {
    background: var(--brand-tint);
    text-decoration: none;
    color: var(--text-strong);
}

.mtu-rowlist__link:active {
    background: var(--brand-soft);
}

.mtu-rowlist__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.mtu-rowlist__main strong {
    font-size: 18px;
}

.mtu-rowlist__link > i {
    color: var(--brand);
}

/* Order tracker (App\Orders\OrderTracker) */
.mtu-tracker-wrap {
    margin: 0 0 26px;
}

.mtu-tracker {
    list-style: none;
    margin: 0;
    padding: 6px 0 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mtu-tracker__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 6px;
    text-align: center;
}

/* The connector from this step to the next, filled once the next step is reached. */
.mtu-tracker__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 19px;
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
    height: 5px;
    border-radius: 3px;
    background: var(--border);
}

.mtu-tracker__step.is-line-filled::after {
    background: var(--success);
}

.mtu-tracker__marker {
    position: relative;
    z-index: 1;
    flex: none;
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-muted);
    background: var(--surface);
    border: 3px solid var(--border);
    border-radius: 50%;
}

.mtu-tracker__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--on-brand);
}

.mtu-tracker__step.is-done .mtu-tracker__marker {
    color: var(--on-brand);
    background: var(--success);
    border-color: var(--success);
}

.mtu-tracker__step.is-current .mtu-tracker__marker {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 0 0 7px rgb(var(--brand-rgb) / 18%);
}

.mtu-tracker__step.is-current.is-attention .mtu-tracker__marker {
    background: var(--warning);
    border-color: var(--warning);
    box-shadow: 0 0 0 7px var(--warning-bg);
}

.mtu-tracker__step.is-stopped .mtu-tracker__marker {
    color: var(--on-brand);
    background: var(--danger);
    border-color: var(--danger);
}

.mtu-tracker__step.is-not-reached .mtu-tracker__marker {
    border-style: dashed;
}

.mtu-tracker__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.mtu-tracker__name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-strong);
}

.mtu-tracker__step.is-upcoming .mtu-tracker__name,
.mtu-tracker__step.is-not-reached .mtu-tracker__name {
    font-weight: 600;
    color: var(--text-muted);
}

.mtu-tracker__state {
    font-size: 14px;
    color: var(--text-muted);
}

.mtu-tracker__status {
    margin-top: 4px;
    padding: 3px 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-radius: 999px;
}

.mtu-tracker__step.is-attention .mtu-tracker__status {
    color: var(--warning);
    background: var(--warning-bg);
}

.mtu-tracker__step.is-success .mtu-tracker__status {
    color: var(--success);
    background: var(--success-bg);
}

.mtu-tracker__step.is-stopped .mtu-tracker__status {
    color: var(--danger);
    background: var(--danger-bg);
}

.mtu-tracker__badge {
    margin-top: 4px;
}

.mtu-tracker__time {
    margin-top: 4px;
    font-size: 14px;
    color: var(--text);
}

.mtu-tracker-state {
    margin-top: 22px;
    padding: 18px 20px;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: var(--mtu-radius-sm);
}

.mtu-tracker-state__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 19px;
    color: var(--danger);
}

.mtu-tracker-state .mtu-message {
    background: var(--surface);
}

.mtu-tracker-state p:last-child {
    margin-bottom: 0;
}

/* Compact tracker (My Orders list, dashboard) */
.mtu-minitrack {
    display: grid;
    gap: 8px;
}

.mtu-minitrack__bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.mtu-minitrack__bar span {
    height: 8px;
    border-radius: 4px;
    background: var(--border);
}

.mtu-minitrack__bar span.is-reached {
    background: var(--success);
}

.mtu-minitrack__bar span.is-stop {
    background: var(--danger);
}

.mtu-minitrack__text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.mtu-minitrack__step {
    font-weight: 700;
    color: var(--text-strong);
}

.mtu-minitrack__status {
    font-weight: 600;
    color: var(--brand-dark);
}

.mtu-minitrack.is-attention .mtu-minitrack__status {
    color: var(--warning);
}

.mtu-minitrack.is-success .mtu-minitrack__status {
    color: var(--success);
}

.mtu-minitrack.is-stopped .mtu-minitrack__status {
    color: var(--danger);
}

.mtu-minitrack__refund {
    color: var(--text-muted);
}

/* Portal footer */
.mtu-portal-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.mtu-portal-footer__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 24px 28px;
    display: grid;
    gap: 12px;
    font-size: 16px;
}

.mtu-portal-footer__help strong {
    margin-right: 6px;
    color: var(--text-strong);
}

.mtu-portal-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.mtu-portal-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text);
}

.mtu-portal-footer__urgent {
    margin: 0;
    font-size: 15px;
    color: var(--text-muted);
}

/* Bottom tab bar and menu (phones) */
.mtu-tabbar {
    display: none;
}

.mtu-drawer--portal .mtu-drawer__user {
    padding: 16px 18px 6px;
}

.mtu-drawer--portal .mtu-drawer__user strong {
    font-size: 17px;
}

.mtu-drawer--portal .mtu-portal-nav a {
    min-height: 56px;
    font-size: 18px;
}

.mtu-drawer--portal .mtu-drawer__link {
    min-height: 52px;
    font-size: 17px;
}

@media (max-width: 1099px) {
    .mtu-portal {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 24px;
    }

    .mtu-dash__row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991px) {
    .mtu-portal-bar__inner {
        padding: 10px 16px;
        gap: 12px;
    }

    .mtu-portal-bar .mtu-brand__name {
        display: none;
    }

    .mtu-portal-bar__area {
        padding-left: 12px;
    }

    .mtu-portal {
        display: block;
        padding: 20px 16px 110px;
    }

    .mtu-portal__side {
        display: none;
    }

    .mtu-portal__head h1 {
        font-size: 27px;
    }

    .mtu-portal__main .mtu-panel,
    .mtu-portal-card {
        padding: 20px 18px;
    }

    .mtu-portal__main .mtu-btn {
        min-height: 52px;
    }

    .mtu-portal-footer__inner {
        padding-bottom: 104px;
    }

    .mtu-tabbar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 20px rgb(var(--shadow-rgb) / 8%);
    }

    .mtu-tabbar ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .mtu-tabbar li {
        margin: 0;
    }

    .mtu-tabbar a,
    .mtu-tabbar button {
        width: 100%;
        min-height: 64px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-strong);
        background: none;
        border: 0;
        text-decoration: none;
        cursor: pointer;
    }

    .mtu-tabbar i {
        font-size: 20px;
        color: var(--text-muted);
    }

    .mtu-tabbar a[aria-current="page"] {
        color: var(--brand-dark);
        box-shadow: inset 0 4px 0 var(--brand);
    }

    .mtu-tabbar a[aria-current="page"] i {
        color: var(--brand);
    }

    .mtu-tabbar a:active,
    .mtu-tabbar button:active {
        background: var(--brand-soft);
    }
}

/* The tracker turns vertical on phones: marker on the left, words beside it. */
@media (max-width: 767px) {
    .mtu-tracker {
        grid-template-columns: minmax(0, 1fr);
    }

    .mtu-tracker__step {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding: 0 0 24px;
        text-align: left;
    }

    .mtu-tracker__step:not(:last-child)::after {
        top: 44px;
        bottom: 2px;
        left: 19px;
        right: auto;
        width: 5px;
        height: auto;
    }

    .mtu-tracker__marker {
        margin-bottom: 0;
    }

    .mtu-tracker__body {
        align-items: flex-start;
        padding-top: 8px;
    }
}


/* Portal lists of cards (My Orders, My Assessments, My Treatments) */
.mtu-cardlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.mtu-cardlist__item {
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
    background: var(--surface);
}

.mtu-cardlist__item.is-draft {
    border-color: var(--border-brand);
    background: var(--brand-tint);
}

.mtu-cardlist__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 18px;
    margin-bottom: 12px;
}

.mtu-cardlist__head:last-child {
    margin-bottom: 0;
}

.mtu-cardlist__head > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.mtu-cardlist__title {
    font-size: 19px;
    color: var(--text-strong);
}

/* Discard an unfinished assessment: open, then confirm */
.mtu-discard {
    margin-top: 12px;
}

.mtu-discard summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    color: var(--danger);
}

.mtu-discard form {
    margin-top: 8px;
    padding: 14px 16px;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: var(--mtu-radius-sm);
}

.mtu-discard form p {
    margin: 0 0 12px;
    color: var(--text-strong);
}

.mtu-todo__item .mtu-discard {
    flex-basis: 100%;
    margin-top: 0;
}

/* My Details tabs */
.mtu-subtabs {
    margin: -6px 0 24px;
    border-bottom: 2px solid var(--border);
}

.mtu-subtabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mtu-subtabs a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 16px;
    margin-bottom: -2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    border-bottom: 3px solid transparent;
    text-decoration: none;
}

.mtu-subtabs a:hover,
.mtu-subtabs a:focus-visible {
    color: var(--brand-dark);
    text-decoration: none;
}

.mtu-subtabs a[aria-current="page"] {
    color: var(--brand-dark);
    border-bottom-color: var(--brand);
}

/* The submitted answers on the assessment page */
.mtu-answers {
    margin: 26px 0 8px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
    background: var(--surface);
}

.mtu-answers summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-strong);
    cursor: pointer;
}

.mtu-answers summary i {
    color: var(--brand);
}

.mtu-answers__section {
    margin: 18px 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-strong);
}

/* Add a medication */
.mtu-numbered {
    margin: 0;
    padding-left: 24px;
    display: grid;
    gap: 8px;
}

.mtu-tiles {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.mtu-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 96px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--mtu-radius-sm);
    color: var(--text-strong);
    background: var(--surface);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mtu-tile:hover,
.mtu-tile:focus-visible {
    border-color: var(--border-brand);
    background: var(--brand-tint);
    color: var(--text-strong);
    text-decoration: none;
}

.mtu-tile:active {
    background: var(--brand-soft);
}

.mtu-tile i,
.mtu-tile svg {
    color: var(--brand);
    font-size: 22px;
}

.mtu-tile__name {
    font-size: 18px;
    font-weight: 700;
}

.mtu-linklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtu-linklist a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* The public header's "Signed in" chip, where the account menu is folded
   into the drawer (milestone 06). */
.mtu-header__chip {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px 12px 4px 4px;
    margin-left: auto;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
    background: var(--brand-soft);
    border-radius: 999px;
    text-decoration: none;
}

.mtu-header__chip:hover,
.mtu-header__chip:focus-visible {
    color: var(--brand-dark);
    text-decoration: none;
}

.mtu-header__chip-label {
    color: var(--text-muted);
    font-weight: 500;
}

@media (max-width: 991px) {
    .mtu-header__chip {
        display: inline-flex;
    }

    .mtu-header__chip + .mtu-header__toggle {
        margin-left: 10px;
    }
}

@media (max-width: 575px) {
    .mtu-cardlist__head .mtu-btn,
    .mtu-cardlist__head .mtu-actions,
    .mtu-cardlist__head .mtu-actions .mtu-btn {
        width: 100%;
    }

    .mtu-header__chip-label {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Follow-ups (milestone 05)                                            */
/* ------------------------------------------------------------------ */

/* A follow-up row on the treatment cards: one line, never a guess. */
.mtu-cardlist__head [data-next-follow-up] {
    display: block;
    margin-top: 4px;
}

/* "Order again" inside a note sits on its own line on phones. */
.mtu-alert [data-order-again] {
    margin-top: 10px;
}

@media (min-width: 768px) {
    .mtu-alert [data-order-again] {
        margin-top: 0;
        margin-left: 12px;
    }
}

/* The follow-up page's action block breathes like the order page's. */
[data-follow-up-action] form {
    margin-top: 14px;
}