/* ============================================================================
   SMCU — SITE-WIDE MOBILE LAYER
   Saint Mary's Christian University · public marketing site
   ----------------------------------------------------------------------------
   Loaded by templates/marketing/base_smcu.html AFTER {% block extra_css %},
   because most pages ship their own <style> block in that block and would
   otherwise win the cascade at equal specificity.

   Covers all 31 public pages. The homepage additionally loads
   smcu-home-mobile.css via {% block mobile_css %}, which comes after this.

   ----------------------------------------------------------------------------
   MOBILE DESIGN LANGUAGE

   The desktop site leans on a left-accent bar (`border-left: 4px solid gold`)
   to mark out callouts. It is a tired device and it reads as generic. On
   mobile, where these blocks are restyled anyway, it is replaced by three
   accents drawn from the university's own visual vocabulary — engraved plates,
   printed prospectuses, set type:

     1. THE CORNER PLATE  — two gold L-brackets at opposing corners, like the
        engraved corner of a diploma or a printed certificate. Marks callouts,
        highlights and emphasis blocks.

     2. THE SET CAPITAL   — an oversized Playfair numeral or quotation mark,
        low-opacity navy or gold, set behind the content. Marks steps,
        sequences and pull-quotes.

     3. THE RULE-AND-CAPS EYEBROW — letter-spaced small caps over a short gold
        hairline, the way a section is titled in a printed prospectus. Marks
        section openings.

   Structural conventions: single column, one 20px gutter, 44px touch targets,
   15px minimum body copy, safe-area aware, and horizontal scroll-snap shelves
   for content that genuinely cannot compress (wide tables, marquees).
   ============================================================================ */


/* ============================================================================
   0. TOKENS + GLOBAL GUARDS  (all viewports)
   ============================================================================ */

:root {
    --m-gutter: 20px;
    --m-radius: 14px;
    --m-tap: 44px;
    --m-rule: rgba(21, 46, 84, 0.14);
    --m-safe-l: env(safe-area-inset-left, 0px);
    --m-safe-r: env(safe-area-inset-right, 0px);
    --m-safe-t: env(safe-area-inset-top, 0px);
    --m-safe-b: env(safe-area-inset-bottom, 0px);
}

/* `body { overflow-x: hidden }` (design system) does not stop the ROOT element
   from scrolling. Every page on this site reported a scrollWidth of exactly
   2x the viewport because of the drawer below. */
html {
    overflow-x: clip;
}

/* The drawer and its overlay ship as `position: absolute`, which parks a
   340px panel past the right edge of the *document* at every viewport width.
   That was the source of the 2x scrollWidth on all 31 pages. */
.smcu-mobile-drawer,
.smcu-mobile-overlay {
    position: fixed;
    visibility: hidden;
}


/* ============================================================================
   1. SITE CHROME  —  max-width: 1024px
   The desktop nav hides at 1024px, so the drawer must work from here down.
   ============================================================================ */

@media (max-width: 1024px) {

    /* --- 1a. Navigation drawer -------------------------------------------
       As shipped, the mobile menu did not work on any page of the site:

         · smcu-components.css opens it via
           `.smcu-mobile-nav.smcu-mobile-active .smcu-mobile-drawer`, but in
           _mobile_nav.html that class sits on the <nav> INSIDE the drawer, so
           the selector can never match.
         · smcu-main.js adds `active` to that inner <nav> and looks for a
           `.smcu-nav-overlay` element that does not exist.
         · `.smcu-mobile-nav { position: fixed; inset: 0; pointer-events: none }`
           lands on the inner <nav>, so every link in the menu was untappable
           regardless.

       Tapping the hamburger therefore only set `body.style.overflow = 'hidden'`
       — the menu stayed shut and the page stopped scrolling.

       Rebuilt here, driven by `html.smcu-nav-open` from smcu-mobile.js.
       ------------------------------------------------------------------- */

    .smcu-mobile-overlay {
        inset: 0;
        z-index: 9998;
        background: rgba(10, 22, 40, 0.55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .smcu-mobile-drawer {
        top: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        height: 100dvh;
        width: min(360px, 88vw);
        max-width: 88vw;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s;
        padding-top: var(--m-safe-t);
        padding-right: var(--m-safe-r);
        padding-bottom: var(--m-safe-b);
        box-shadow: -8px 0 40px rgba(10, 22, 40, 0.28);
    }

    html.smcu-nav-open .smcu-mobile-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    html.smcu-nav-open .smcu-mobile-drawer {
        transform: translateX(0);
        visibility: visible;
    }

    /* Put the inner <nav> back in the drawer's flex flow. */
    .smcu-mobile-drawer .smcu-mobile-nav {
        position: static;
        inset: auto;
        z-index: auto;
        pointer-events: auto;
        flex: 1 1 auto;
        min-height: 0;
    }

    .smcu-mobile-drawer-header {
        padding: 14px 16px 14px 20px;
        position: sticky;
        top: 0;
        background: var(--smcu-white);
        z-index: 2;
    }

    .smcu-mobile-logo {
        height: 46px;
    }

    .smcu-mobile-close {
        width: var(--m-tap);
        height: var(--m-tap);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 22px;
        color: var(--smcu-navy-700);
        flex-shrink: 0;
    }

    .smcu-mobile-close:active {
        background: var(--smcu-gray-100);
    }

    .smcu-mobile-menu {
        padding: 4px 0 8px;
    }

    .smcu-mobile-link {
        min-height: var(--m-tap);
        display: flex;
        align-items: center;
        padding: 12px 20px;
        font-size: 1rem;
    }

    /* The open section is marked with a gold rule on the row, not a filled
       highlight — quieter, and consistent with the rule-and-caps language. */
    .smcu-mobile-item-row {
        position: relative;
    }

    .smcu-mobile-has-sub .smcu-mobile-sub-toggle.active ~ *,
    .smcu-mobile-item-row:has(.smcu-mobile-sub-toggle.active) {
        color: var(--smcu-navy-700);
    }

    .smcu-mobile-item-row:has(.smcu-mobile-sub-toggle.active)::after {
        content: '';
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 0;
        height: 2px;
        background: var(--smcu-gold-500);
    }

    .smcu-mobile-sub-toggle {
        width: 56px;
        min-height: var(--m-tap);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    /* Submenu links are bare <a> with no class, so the component
       stylesheet's `.smcu-mobile-submenu .smcu-mobile-link` rule never
       matched and they rendered as unstyled 20px rows. */
    .smcu-mobile-submenu a {
        display: flex;
        align-items: center;
        min-height: 42px;
        padding: 10px 20px 10px 36px;
        color: var(--smcu-gray-600);
        font-size: 0.92rem;
        font-weight: 400;
        text-decoration: none;
        border-top: 1px solid var(--smcu-gray-200);
    }

    .smcu-mobile-submenu a:active {
        background: var(--smcu-navy-50);
        color: var(--smcu-navy-700);
    }

    .smcu-mobile-drawer-footer {
        position: sticky;
        bottom: 0;
        background: var(--smcu-white);
        padding: 16px 20px calc(16px + var(--m-safe-b));
    }

    .smcu-mobile-drawer-footer .smcu-btn {
        width: 100%;
        min-height: 48px;
    }

    /* The drawer is white, so an "outline white" button would be invisible. */
    .smcu-mobile-drawer-footer .smcu-btn-outline-white {
        color: var(--smcu-navy-700);
        border-color: var(--smcu-navy-700);
        background: transparent;
    }

    /* --- 1b. Header ------------------------------------------------------ */
    .smcu-mobile-toggle {
        width: var(--m-tap);
        height: var(--m-tap);
        padding: 0;
        margin-left: 4px;
        border-radius: 10px;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .smcu-mobile-toggle:active {
        background: var(--smcu-gray-100);
    }

    html.smcu-nav-open .smcu-hamburger span:nth-child(1) {
        top: 8px;
        transform: rotate(45deg);
    }

    html.smcu-nav-open .smcu-hamburger span:nth-child(2) {
        opacity: 0;
    }

    html.smcu-nav-open .smcu-hamburger span:nth-child(3) {
        top: 8px;
        transform: rotate(-45deg);
    }
}


/* ============================================================================
   2. PHONE TIER  —  max-width: 767px
   ============================================================================ */

@media (max-width: 767px) {

    /* ------------------------------------------------------------------
       2.1  Page frame
       ------------------------------------------------------------------ */

    .smcu-container {
        padding-left: calc(var(--m-gutter) + var(--m-safe-l));
        padding-right: calc(var(--m-gutter) + var(--m-safe-r));
    }

    .smcu-container--narrow {
        max-width: none;
    }

    /* Sections: desktop runs 80–100px; phones get a tighter but still airy
       rhythm. */
    .smcu-section {
        padding: 52px 0;
    }

    .smcu-section--no-top {
        padding-top: 0;
    }

    .smcu-section-header {
        margin-bottom: 2rem;
        max-width: none;
    }

    /* Any two-up content layout stacks, sidebar last. */
    .smcu-content-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .smcu-sidebar-sticky,
    .smcu-quick-facts {
        position: static;
    }

    /* ------------------------------------------------------------------
       2.2  Typography
       ------------------------------------------------------------------ */

    h1 { font-size: clamp(1.75rem, 7.4vw, 2.25rem); line-height: 1.18; }
    h2 { font-size: clamp(1.45rem, 6.2vw, 1.9rem);  line-height: 1.24; }
    h3 { font-size: 1.15rem;  line-height: 1.32; }
    h4 { font-size: 1.0625rem; line-height: 1.35; }

    h1, h2, h3, h4 {
        overflow-wrap: break-word;
        text-wrap: pretty;
    }

    p, li {
        font-size: 0.9375rem;
        line-height: 1.68;
    }

    .smcu-lead {
        font-size: 1.0625rem;
        line-height: 1.62;
    }

    /* Long unbroken strings (email addresses, URLs) must not push the page. */
    a[href^="mailto:"],
    a[href^="http"],
    code, pre, td, th {
        overflow-wrap: anywhere;
    }

    /* --- ACCENT 3: the rule-and-caps eyebrow -------------------------------
       Section eyebrows were 12.8px caps floating on their own. On mobile they
       get a hairline of brand gold beneath them, the way a section is titled
       in a printed prospectus. */
    .smcu-eyebrow {
        display: inline-block;
        font-size: 0.8125rem;
        letter-spacing: 1.8px;
        line-height: 1.4;
        padding-bottom: 7px;
        margin-bottom: 0.85rem;
        position: relative;
    }

    .smcu-eyebrow::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 28px;
        height: 2px;
        background: var(--smcu-gold-500);
    }

    /* Centred section headers need the rule centred too. */
    .smcu-section-header .smcu-eyebrow::after,
    [style*="text-align: center"] > .smcu-eyebrow::after,
    [style*="text-align:center"] > .smcu-eyebrow::after {
        left: 50%;
        transform: translateX(-50%);
    }

    /* ------------------------------------------------------------------
       2.3  Buttons and links
       ------------------------------------------------------------------ */

    .smcu-btn {
        min-height: 48px;
        white-space: normal;
        text-align: center;
        padding: 12px 20px;
        line-height: 1.35;
    }

    .smcu-btn-lg {
        width: 100%;
        max-width: 340px;
    }

    /* Button rows stack. */
    .smcu-hero-actions,
    .smcu-hero__actions,
    .smcu-cta-band__actions,
    .smcu-btn-row,
    .smcu-btn-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .smcu-hero-actions .smcu-btn,
    .smcu-hero__actions .smcu-btn,
    .smcu-cta-band__actions .smcu-btn,
    .smcu-btn-row .smcu-btn,
    .smcu-btn-group .smcu-btn {
        width: 100%;
        max-width: none;
    }

    /* ------------------------------------------------------------------
       2.4  Utility bar — folded into the drawer and footer
       ------------------------------------------------------------------
       The bar rendered a 39-character email address and two 20px-tall links
       in a 42px strip. Both contact details appear in full in the footer,
       and Student Login / Apply Now are the drawer's two footer buttons, so
       nothing is lost. */
    .smcu-utility-bar {
        display: none;
    }

    /* ------------------------------------------------------------------
       2.5  Header
       ------------------------------------------------------------------ */
    .smcu-header {
        position: sticky;
        top: 0;
        z-index: 900;
        box-shadow: 0 1px 12px rgba(10, 22, 40, 0.08);
    }

    .smcu-header-inner {
        height: 60px;
        gap: 8px;
    }

    .smcu-logo {
        height: 40px;
    }

    /* Student Login lives in the drawer footer; the header keeps the single
       highest-intent action plus the menu. */
    .smcu-header-right .smcu-btn-secondary {
        display: none;
    }

    .smcu-header-right .smcu-btn-gold {
        display: inline-flex;
        min-height: 40px;
        padding: 8px 16px;
        font-size: 0.85rem;
        border-radius: 999px;
    }

    /* ------------------------------------------------------------------
       2.6  Heroes (all interior pages)
       ------------------------------------------------------------------ */
    .smcu-hero,
    .smcu-hero--small,
    .smcu-hero--short {
        min-height: 0;
        padding: calc(44px + var(--m-safe-t)) 0 44px;
    }

    .smcu-hero-title,
    .smcu-hero__content h1 {
        font-size: clamp(1.8rem, 7.6vw, 2.3rem);
        line-height: 1.16;
        margin-bottom: 0.85rem;
    }

    .smcu-hero-subtitle,
    .smcu-hero__content p {
        font-size: 1.0625rem;
        line-height: 1.6;
        max-width: none;
    }

    /* ------------------------------------------------------------------
       2.7  Breadcrumb — a single scrollable line, never a wrapped stack
       ------------------------------------------------------------------ */
    .smcu-breadcrumb {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .smcu-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .smcu-breadcrumb ol,
    .smcu-breadcrumb ul,
    .smcu-breadcrumb-list {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .smcu-breadcrumb a,
    .smcu-breadcrumb-item a {
        display: inline-flex;
        align-items: center;
        min-height: var(--m-tap);
        padding: 0 2px;
    }

    /* The current page's crumb is often the longest string on the page; it must
       be allowed to run off into the scroller rather than widen it. */
    .smcu-breadcrumb-current {
        max-width: none;
    }

    /* ------------------------------------------------------------------
       2.8  Grids — everything to one column
       ------------------------------------------------------------------ */
    .smcu-grid-2,
    .smcu-grid-3,
    .smcu-grid-4,
    .smcu-outcomes-list,
    .smcu-module-grid,
    .smcu-contact-grid,
    .smcu-prog-card__highlights,
    .smcu-faculty-grid,
    .smcu-pricing-grid,
    .smcu-testimonial-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Stat rows keep two up — numbers read fine side by side. */
    .smcu-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .smcu-stat__value {
        font-size: 1.85rem;
    }

    /* ------------------------------------------------------------------
       2.9  Cards
       ------------------------------------------------------------------ */
    .smcu-card,
    .smcu-prog-card,
    .smcu-feature-card,
    .smcu-pricing-card,
    .smcu-faculty-card,
    .smcu-testimonial-card {
        border-radius: var(--m-radius);
    }

    .smcu-card__body,
    .smcu-prog-card,
    .smcu-feature-card {
        padding: 1.35rem;
    }

    .smcu-card:hover,
    .smcu-prog-card:hover,
    .smcu-pricing-card:hover,
    .smcu-feature-card:hover,
    .smcu-faculty-card:hover {
        transform: none;
    }

    /* Badges and chips ran 11.2–12.8px. Raise them to the legibility floor and
       give them a proper pill so they read as labels, not stray text. The list
       is the exact set of label classes measured below 13px across all 31
       pages at 390px. */
    .smcu-prog-card__badge,
    .smcu-pricing-card__type,
    .smcu-timeline-label,
    .smcu-badge,
    .smcu-chip,
    .smcu-tag,
    .bed-module-card__code,
    .bed-pathway-card__label,
    .cur-module-card__code,
    .cur-module-card__credits,
    .adm-date-card__label,
    .ct-step-label,
    .lm-mode-tag,
    .am-method-card__number,
    .am-gpa-item__range,
    .story-tag,
    .career-tag,
    .smcu-module-grid__item span,
    .tui-progress-bar__labels span,
    .intl-pricing-highlight div {
        font-size: 0.8125rem !important;
        letter-spacing: 0.6px;
        line-height: 1.5;
    }

    .smcu-prog-card__badge,
    .smcu-pricing-card__type,
    .smcu-badge,
    .smcu-chip,
    .smcu-tag,
    .lm-mode-tag,
    .story-tag,
    .career-tag {
        padding: 4px 10px;
        border-radius: 999px;
        display: inline-block;
    }

    /* ------------------------------------------------------------------
       2.10  ACCENT 1 — THE CORNER PLATE
       ------------------------------------------------------------------
       Replaces the left-accent bar on every callout across the site. Two
       gold L-brackets at opposing corners: the engraved corner of a diploma
       or the printed corner of a prospectus plate. Distinct, restrained,
       and drawn from the institution rather than from a component library.

       The selector list is the exact set of accent-bar boxes found by
       auditing all 31 pages at 390px.
       ------------------------------------------------------------------ */
    .bed-transfer-box,
    .cur-transfer-box,
    .tui-info-box,
    .lm-nd-card,
    .nd-intro-highlight,
    .nd-research-card,
    .research-citation,
    .cmp-honest-box,
    .story-card__highlight,
    .smcu-callout,
    .smcu-highlight-box {
        position: relative;
        border-left: none !important;
        border-radius: var(--m-radius);
        padding: 1.6rem 1.35rem !important;
        overflow: hidden;
    }

    .bed-transfer-box::before,
    .cur-transfer-box::before,
    .tui-info-box::before,
    .lm-nd-card::before,
    .nd-intro-highlight::before,
    .nd-research-card::before,
    .research-citation::before,
    .cmp-honest-box::before,
    .story-card__highlight::before,
    .smcu-callout::before,
    .smcu-highlight-box::before,
    .bed-transfer-box::after,
    .cur-transfer-box::after,
    .tui-info-box::after,
    .lm-nd-card::after,
    .nd-intro-highlight::after,
    .nd-research-card::after,
    .research-citation::after,
    .cmp-honest-box::after,
    .story-card__highlight::after,
    .smcu-callout::after,
    .smcu-highlight-box::after {
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        border-style: solid;
        border-color: var(--smcu-gold-500);
        border-width: 0;
        pointer-events: none;
    }

    .bed-transfer-box::before,
    .cur-transfer-box::before,
    .tui-info-box::before,
    .lm-nd-card::before,
    .nd-intro-highlight::before,
    .nd-research-card::before,
    .research-citation::before,
    .cmp-honest-box::before,
    .story-card__highlight::before,
    .smcu-callout::before,
    .smcu-highlight-box::before {
        top: 9px;
        left: 9px;
        border-top-width: 2px;
        border-left-width: 2px;
    }

    .bed-transfer-box::after,
    .cur-transfer-box::after,
    .tui-info-box::after,
    .lm-nd-card::after,
    .nd-intro-highlight::after,
    .nd-research-card::after,
    .research-citation::after,
    .cmp-honest-box::after,
    .story-card__highlight::after,
    .smcu-callout::after,
    .smcu-highlight-box::after {
        bottom: 9px;
        right: 9px;
        border-bottom-width: 2px;
        border-right-width: 2px;
    }

    /* Two of these carry the bar as an inline style attribute, so the
       declaration above needs help winning. */
    [style*="border-left: 4px solid"],
    [style*="border-left:4px solid"],
    [style*="border-left: 5px solid"] {
        border-left: none !important;
        position: relative;
        border-radius: var(--m-radius) !important;
    }

    [style*="border-left: 4px solid"]::before,
    [style*="border-left:4px solid"]::before,
    [style*="border-left: 5px solid"]::before {
        content: '';
        position: absolute;
        top: 9px;
        left: 9px;
        width: 15px;
        height: 15px;
        border-top: 2px solid var(--smcu-gold-500);
        border-left: 2px solid var(--smcu-gold-500);
        pointer-events: none;
    }

    [style*="border-left: 4px solid"]::after,
    [style*="border-left:4px solid"]::after,
    [style*="border-left: 5px solid"]::after {
        content: '';
        position: absolute;
        bottom: 9px;
        right: 9px;
        width: 15px;
        height: 15px;
        border-bottom: 2px solid var(--smcu-gold-500);
        border-right: 2px solid var(--smcu-gold-500);
        pointer-events: none;
    }

    /* ------------------------------------------------------------------
       2.11  ACCENT 2 — THE SET CAPITAL
       ------------------------------------------------------------------
       Pull-quotes lose their left bar and gain an oversized Playfair
       quotation mark, set behind the text at low opacity. Steps and
       sequences get the same treatment with their numeral.
       ------------------------------------------------------------------ */
    blockquote.smcu-quote,
    .smcu-testimonial-card blockquote,
    .smcu-pullquote {
        position: relative;
        border-left: none !important;
        padding-top: 1.9rem !important;
        padding-left: 0 !important;
    }

    blockquote.smcu-quote::before,
    .smcu-testimonial-card blockquote::before,
    .smcu-pullquote::before {
        content: '\201C';
        position: absolute;
        top: -0.55em;
        left: -0.06em;
        font-family: var(--smcu-font-accent);
        font-size: 4.5rem;
        line-height: 1;
        color: var(--smcu-gold-500);
        opacity: 0.28;
        pointer-events: none;
    }

    /* Numbered process steps: the numeral becomes set type, not a filled
       circle floated to one side. */
    .smcu-timeline__item,
    .smcu-step {
        position: relative;
    }

    /* ------------------------------------------------------------------
       2.12  WIDE TABLES — the prospectus ledger
       ------------------------------------------------------------------
       Eight pages carry comparison tables 358–665px wide. A 6-column table
       cannot be read on a 390px screen, and a horizontally scrolling table
       hides half the comparison.

       Each row becomes a block: the first cell is its heading, set in
       Playfair over a gold hairline; every other cell is labelled with its
       column header in small caps and stacked beneath. The result reads like
       a printed prospectus entry, and the whole comparison stays visible
       without any sideways scrolling.

       Labels come from `data-label` attributes injected into every <td> at
       build time by scripts/add_table_labels.py.
       ------------------------------------------------------------------ */
    table.cmp-table,
    table.lm-compare-table,
    table.am-compare-table,
    table.ait-comparison-table,
    table.research-table,
    table.cur-credit-table,
    table.salary-table,
    table.smcu-course-table,
    table.smcu-data-table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
        box-shadow: none;
        background: transparent;
    }

    table.cmp-table thead,
    table.lm-compare-table thead,
    table.am-compare-table thead,
    table.ait-comparison-table thead,
    table.research-table thead,
    table.cur-credit-table thead,
    table.salary-table thead,
    table.smcu-course-table thead,
    table.smcu-data-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* The clipped <thead> still lays its row out at full table width. Harmless
       (it is inside a 1px overflow-hidden box) but tidier collapsed. */
    table.cmp-table thead tr,
    table.lm-compare-table thead tr,
    table.am-compare-table thead tr,
    table.ait-comparison-table thead tr,
    table.research-table thead tr,
    table.cur-credit-table thead tr,
    table.salary-table thead tr,
    table.smcu-course-table thead tr,
    table.smcu-data-table thead tr {
        display: block;
        width: 1px;
        overflow: hidden;
    }

    table.cmp-table tbody,
    table.lm-compare-table tbody,
    table.am-compare-table tbody,
    table.ait-comparison-table tbody,
    table.research-table tbody,
    table.cur-credit-table tbody,
    table.salary-table tbody,
    table.smcu-course-table tbody,
    table.smcu-data-table tbody,
    table.cur-credit-table tfoot {
        display: block;
        width: 100%;
    }

    table.cmp-table tbody tr,
    table.lm-compare-table tbody tr,
    table.am-compare-table tbody tr,
    table.ait-comparison-table tbody tr,
    table.research-table tbody tr,
    table.cur-credit-table tbody tr,
    table.salary-table tbody tr,
    table.smcu-course-table tbody tr,
    table.smcu-data-table tbody tr,
    table.cur-credit-table tfoot tr {
        display: block;
        width: 100%;
        background: var(--smcu-white);
        border: 1px solid var(--m-rule);
        border-radius: var(--m-radius);
        padding: 0.35rem 1.1rem 0.9rem;
        margin-bottom: 12px;
        box-shadow: 0 1px 3px rgba(10, 22, 40, 0.05);
    }

    table.cmp-table tbody td,
    table.lm-compare-table tbody td,
    table.am-compare-table tbody td,
    table.ait-comparison-table tbody td,
    table.research-table tbody td,
    table.cur-credit-table tbody td,
    table.salary-table tbody td,
    table.smcu-course-table tbody td,
    table.smcu-data-table tbody td,
    table.cur-credit-table tfoot td {
        display: block;
        width: auto !important;
        border: none !important;
        border-top: 1px solid var(--smcu-gray-200) !important;
        padding: 0.7rem 0 0 !important;
        margin-top: 0.7rem;
        font-size: 0.9375rem;
        line-height: 1.6;
        text-align: left !important;
        white-space: normal !important;
    }

    /* The row's subject cell becomes its heading. */
    table.cmp-table tbody td:first-child,
    table.lm-compare-table tbody td:first-child,
    table.am-compare-table tbody td:first-child,
    table.ait-comparison-table tbody td:first-child,
    table.research-table tbody td:first-child,
    table.cur-credit-table tbody td:first-child,
    table.salary-table tbody td:first-child,
    table.smcu-course-table tbody td:first-child,
    table.smcu-data-table tbody td:first-child,
    table.cur-credit-table tfoot td:first-child {
        font-family: var(--smcu-font-accent);
        font-size: 1.0625rem;
        font-weight: 700;
        color: var(--smcu-navy-700);
        border-top: none !important;
        margin-top: 0;
        padding: 0.85rem 0 0.6rem !important;
        position: relative;
    }

    table.cmp-table tbody td:first-child::after,
    table.lm-compare-table tbody td:first-child::after,
    table.am-compare-table tbody td:first-child::after,
    table.ait-comparison-table tbody td:first-child::after,
    table.research-table tbody td:first-child::after,
    table.cur-credit-table tbody td:first-child::after,
    table.salary-table tbody td:first-child::after,
    table.smcu-course-table tbody td:first-child::after,
    table.smcu-data-table tbody td:first-child::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 26px;
        height: 2px;
        background: var(--smcu-gold-500);
    }

    /* Column header, set as small caps above its value. */
    table.cmp-table tbody td[data-label]:not(:first-child)::before,
    table.lm-compare-table tbody td[data-label]:not(:first-child)::before,
    table.am-compare-table tbody td[data-label]:not(:first-child)::before,
    table.ait-comparison-table tbody td[data-label]:not(:first-child)::before,
    table.research-table tbody td[data-label]:not(:first-child)::before,
    table.cur-credit-table tbody td[data-label]:not(:first-child)::before,
    table.salary-table tbody td[data-label]:not(:first-child)::before,
    table.smcu-course-table tbody td[data-label]:not(:first-child)::before,
    table.smcu-data-table tbody td[data-label]:not(:first-child)::before,
    table.cur-credit-table tfoot td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        font-family: var(--smcu-font-primary);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--smcu-gray-500);
        margin-bottom: 3px;
    }

    /* The St. Mary's column in every comparison table is the last one.
       Tint it and gold its label so the point of the comparison survives
       the restack. */
    table.cmp-table tbody td:last-child,
    table.ait-comparison-table tbody td:last-child,
    table.research-table tbody td:nth-child(2) {
        background: linear-gradient(90deg, rgba(253, 245, 220, 0.75), rgba(253, 245, 220, 0));
        margin-left: -1.1rem;
        margin-right: -1.1rem;
        padding-left: 1.1rem !important;
        padding-right: 1.1rem !important;
        padding-bottom: 0.7rem !important;
    }

    table.cmp-table tbody td:last-child[data-label]::before,
    table.ait-comparison-table tbody td:last-child[data-label]::before {
        color: var(--smcu-gold-700);
    }

    /* Any remaining table keeps its shape but scrolls inside its own box
       rather than pushing the page sideways. */
    .smcu-table-wrap,
    .cmp-table-wrap,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ------------------------------------------------------------------
       2.13  MARQUEES → swipeable shelves
       ------------------------------------------------------------------
       Three pages run infinite CSS marquees (mission, bachelor,
       accessibility). On a phone the text slides out from under the reader,
       the pause is `:hover` (which a touchscreen cannot express), and a
       3,500–5,500px track animates continuously. Each becomes a
       scroll-snapped shelf the reader controls, with the duplicate half of
       the track hidden — it exists only to make the desktop loop seamless.
       ------------------------------------------------------------------ */
    .mv-ticker-wrapper,
    .bed-assess-ticker-wrapper,
    .ac-customize-track-wrapper,
    .assess-ticker-wrapper {
        width: auto !important;
        max-width: 100% !important;
        overflow: hidden;
        border-radius: var(--m-radius);
    }

    /* Each wrapper paints a 60–80px gradient over both edges to fade the
       marquee out. At desktop width that sits over empty track; at 390px it
       covers a third of the first card and its text became unreadable. */
    .mv-ticker-wrapper::before,
    .mv-ticker-wrapper::after,
    .bed-assess-ticker-wrapper::before,
    .bed-assess-ticker-wrapper::after,
    .ac-customize-track-wrapper::before,
    .ac-customize-track-wrapper::after,
    .assess-ticker-wrapper::before,
    .assess-ticker-wrapper::after {
        width: 18px !important;
    }

    .mv-ticker-track,
    .bed-assess-ticker-track,
    .ac-customize-track,
    .assess-ticker-track {
        animation: none !important;
        width: auto !important;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--m-gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-left: var(--m-gutter);
        padding-right: var(--m-gutter);
    }

    .mv-ticker-track::-webkit-scrollbar,
    .bed-assess-ticker-track::-webkit-scrollbar,
    .ac-customize-track::-webkit-scrollbar,
    .assess-ticker-track::-webkit-scrollbar {
        display: none;
    }

    .mv-ticker-track > *,
    .bed-assess-ticker-track > *,
    .ac-customize-track > * {
        flex: 0 0 auto;
        width: 74vw;
        max-width: 300px;
        scroll-snap-align: start;
    }

    /* smcu-mobile.js flags the duplicated half of each track. */
    [data-ticker-clone] {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       2.14  Forms  (/apply, /contact, credit calculator)
       ------------------------------------------------------------------ */
    .smcu-form-grid,
    .smcu-form-row {
        grid-template-columns: 1fr !important;
        display: grid;
        gap: 1rem;
    }

    .smcu-inline-form {
        flex-direction: column;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        width: 100%;
        min-height: 48px;
        /* 16px exactly — anything smaller makes iOS Safari zoom the page on
           focus, and it never zooms back out. */
        font-size: 16px;
        padding: 12px 14px;
        border-radius: 10px;
    }

    textarea {
        min-height: 120px;
    }

    label {
        font-size: 0.9375rem;
        display: block;
        margin-bottom: 6px;
    }

    /* Checkboxes and radios were 13x13. */
    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    /* Give the whole checkbox row a 44px target. */
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]),
    .smcu-check-row {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: var(--m-tap);
    }

    button[type="submit"],
    input[type="submit"] {
        width: 100%;
        min-height: 50px;
    }

    /* ------------------------------------------------------------------
       2.15  Accordions (FAQ and friends)
       ------------------------------------------------------------------ */
    .smcu-accordion-header,
    .smcu-faq-question {
        min-height: 56px;
        padding: 14px 14px 14px 16px;
        gap: 12px;
        align-items: center;
    }

    .smcu-accordion-header h3,
    .smcu-faq-question h3,
    .smcu-accordion-header h4 {
        font-size: 1rem;
        line-height: 1.4;
    }

    .smcu-accordion-icon {
        flex-shrink: 0;
        width: 28px;
        text-align: center;
    }

    .smcu-accordion-body-inner {
        padding: 0 16px 16px;
    }

    /* ------------------------------------------------------------------
       2.16  Timelines / process rails
       ------------------------------------------------------------------
       Horizontal step rails become a vertical rail with the numeral on it.
       ------------------------------------------------------------------ */
    .smcu-timeline,
    .smcu-process,
    .smcu-steps {
        display: block;
        padding-left: 0;
    }

    .smcu-timeline__item,
    .smcu-process__step,
    .smcu-steps__step {
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 16px;
        align-items: start;
        text-align: left;
        max-width: none;
        padding: 0 0 1.6rem;
        position: relative;
    }

    .smcu-timeline__marker,
    .smcu-process__number,
    .smcu-steps__number {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 40px;
        height: 40px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: static;
        font-size: 0.9375rem;
        z-index: 2;
    }

    /* ------------------------------------------------------------------
       2.16b  Circular icon badges squashed by a column flip
       ------------------------------------------------------------------
       These are sized `flex: 0 0 64px; height: 64px; border-radius: 50%`.
       In a flex ROW the 64px basis is the width, so the badge is a circle.
       Each page's own mobile rule then flips the container to
       `flex-direction: column`, at which point the basis becomes the HEIGHT
       and the width collapses to the glyph's content box — a 64px circle
       renders as a 24x64 oval. Restoring a 1:1 ratio fixes it without
       touching the page's own sizing.
       ------------------------------------------------------------------ */
    .nd-feature-section__icon,
    .intl-info-section__icon {
        width: auto;
        aspect-ratio: 1 / 1;
        align-self: flex-start;
        flex: none;
    }

    /* ------------------------------------------------------------------
       2.17  Media
       ------------------------------------------------------------------ */
    img, picture, video, iframe, svg {
        max-width: 100%;
    }

    /* Embedded video keeps its ratio without a wrapper div. */
    iframe[src*="youtube"],
    iframe[src*="vimeo"] {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* Any decorative image taller than it needs to be gets clipped, not
       shrunk to a stamp. */
    .smcu-hero__bg img {
        object-position: 60% center;
    }

    /* ------------------------------------------------------------------
       2.18  Footer
       ------------------------------------------------------------------ */
    .smcu-footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .smcu-footer-links a,
    .smcu-footer-contact a {
        display: inline-flex;
        align-items: center;
        min-height: var(--m-tap);
        overflow-wrap: anywhere;
    }

    .smcu-footer-contact li {
        overflow-wrap: anywhere;
    }

    .smcu-footer-social {
        gap: 10px;
    }

    .smcu-social-link {
        width: var(--m-tap);
        height: var(--m-tap);
    }

    .smcu-footer-bottom {
        padding-bottom: calc(16px + var(--m-safe-b));
    }

    .smcu-footer-bottom-inner {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .smcu-footer-bottom-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 4px 8px;
    }

    .smcu-footer-bottom-links a {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        padding: 0 4px;
    }

    /* ------------------------------------------------------------------
       2.19  CTA bands
       ------------------------------------------------------------------ */
    .smcu-cta-band {
        padding: 48px 0 calc(48px + var(--m-safe-b));
    }
}


/* ============================================================================
   3. SMALL PHONE  —  max-width: 400px
   ============================================================================ */

@media (max-width: 400px) {

    :root {
        --m-gutter: 16px;
    }

    .smcu-section {
        padding: 44px 0;
    }

    .smcu-stats-grid {
        grid-template-columns: 1fr;
    }

    .smcu-mobile-link {
        font-size: 0.95rem;
    }
}


/* ============================================================================
   4. TABLET  —  768px to 1023px
   The desktop nav is already hidden here, but the page bodies had almost no
   rules in this band and ran at desktop density on a portrait tablet.
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    .smcu-section {
        padding: 68px 0;
    }

    .smcu-grid-3,
    .smcu-grid-4,
    .smcu-outcomes-list,
    .smcu-module-grid,
    .smcu-faculty-grid,
    .smcu-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .smcu-content-layout {
        grid-template-columns: 1fr;
    }

    /* Wide comparison tables scroll inside their own box rather than
       squeezing every column below readability. */
    .smcu-table-wrap,
    .cmp-table-wrap,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.am-compare-table,
    table.research-table {
        min-width: 640px;
    }

    .mv-ticker-track > *,
    .bed-assess-ticker-track > *,
    .ac-customize-track > * {
        width: 300px;
    }
}


/* ============================================================================
   5. INPUT MODALITY & MOTION
   ============================================================================ */

@media (hover: none) {

    .smcu-card:hover,
    .smcu-prog-card:hover,
    .smcu-pricing-card:hover,
    .smcu-feature-card:hover,
    .smcu-faculty-card:hover,
    .smcu-btn:hover {
        transform: none;
    }

    /* `:hover` cannot pause a marquee on a touchscreen; smcu-mobile.js
       pauses on touch instead. */
    .mv-ticker-track:hover,
    .bed-assess-ticker-track:hover,
    .ac-customize-track:hover,
    .assess-ticker-track:hover {
        animation-play-state: running;
    }

    [data-paused="true"] {
        animation-play-state: paused !important;
    }

    a, button, summary,
    .smcu-btn,
    .smcu-accordion-header,
    .smcu-faq-question,
    .smcu-mobile-link,
    .smcu-mobile-toggle,
    .smcu-mobile-close,
    .smcu-mobile-sub-toggle {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(21, 46, 84, 0.08);
    }
}

/* Landscape phones: heroes should not demand a full turn of scrolling. */
@media (max-width: 926px) and (orientation: landscape) and (max-height: 500px) {

    .smcu-hero,
    .smcu-hero--small,
    .smcu-hero--short {
        padding: 28px 0;
    }

    .smcu-hero-title,
    .smcu-hero__content h1 {
        font-size: 1.7rem;
    }

    .smcu-section {
        padding: 36px 0;
    }
}

/* The global reduced-motion rule disables animation, but the scroll-reveal
   classes also apply `opacity: 0` — without releasing it the content never
   appears at all. */
@media (prefers-reduced-motion: reduce) {

    .smcu-animate,
    .smcu-animate-on-scroll,
    .journey-reveal,
    [class*="-reveal"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .mv-ticker-track,
    .bed-assess-ticker-track,
    .ac-customize-track,
    .assess-ticker-track {
        animation: none !important;
    }
}