/* ============================================================================
   SMCU HOMEPAGE — MOBILE LAYER
   Saint Mary's Christian University
   ----------------------------------------------------------------------------
   Loaded ONLY by templates/marketing/home.html, via {% block mobile_css %},
   i.e. after smcu-mobile.css. Last in the cascade.

   Site-wide mobile work — tokens, the overflow guard, the navigation drawer,
   the header, the utility bar, the footer, forms, tables, marquees, touch and
   motion rules — lives in smcu-mobile.css and applies to every public page.
   This file holds only the homepage's own eleven sections.

   Content parity
     Every section, card, statistic, quote, image and link present on the
     desktop homepage is present here. The only things not rendered on a phone
     are the utility bar (its phone number and email both appear in full in the
     footer, and its two actions are the drawer's footer buttons) and the
     marquee's duplicated ticker cards, which exist purely to make the desktop
     animation loop seamlessly.

   Design language
     Single column, one 20px gutter, 44px touch targets, 15px minimum body
     copy, safe-area aware. Content that cannot compress without being dropped
     or squeezed below readability — the screenshot carousel, the lifestyle
     photography, the eight assessment methods — becomes a horizontal
     scroll-snap shelf instead.
   ============================================================================ */


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

@media (max-width: 767px) {

    /* ------------------------------------------------------------------
       2.0  Global rhythm
       ------------------------------------------------------------------ */

    /* One gutter, set once, honoured by every section. The old CSS stacked a
       container gutter on top of per-block padding, which left the problem
       cards only 171px wide inside a 390px screen. */
    .smcu-container {
        padding-left: calc(var(--m-gutter) + var(--m-safe-l));
        padding-right: calc(var(--m-gutter) + var(--m-safe-r));
    }

    /* Section vertical rhythm — tighter than desktop's 100px, still airy. */
    .smcu-hp-problem,
    .smcu-hp-solution,
    .smcu-hp-modes,
    .smcu-hp-assess,
    .smcu-hp-access,
    .smcu-hp-journey,
    .smcu-hp-screens,
    .smcu-hp-stats,
    .smcu-hp-faq {
        padding: 52px 0;
    }

    .smcu-hp-cta {
        padding: 56px 0 calc(56px + var(--m-safe-b));
    }

    /* Section headers */
    .smcu-hp-problem__header,
    .smcu-hp-solution__header,
    .smcu-hp-modes__header,
    .smcu-hp-assess__header,
    .smcu-hp-access__header,
    .smcu-hp-journey__header,
    .smcu-hp-screens__header,
    .smcu-hp-stats__header,
    .smcu-hp-faq__header {
        margin-bottom: 2rem;
        padding-left: 0;
        padding-right: 0;
    }

    .smcu-hp-problem__header h2,
    .smcu-hp-solution__header h2,
    .smcu-hp-modes__header h2,
    .smcu-hp-assess__header h2,
    .smcu-hp-access__header h2,
    .smcu-hp-journey__header h2,
    .smcu-hp-screens__header h2,
    .smcu-hp-stats__header h2,
    .smcu-hp-faq__header h2 {
        font-size: clamp(1.5rem, 6.4vw, 2rem);
        line-height: 1.25;
        margin-bottom: 0.75rem;
    }

    /* Eyebrows: 11.5px was below the legibility floor. */
    .smcu-hp-problem__eyebrow,
    .smcu-hp-solution__eyebrow,
    .smcu-hp-modes__eyebrow,
    .smcu-hp-assess__eyebrow,
    .smcu-hp-access__eyebrow,
    .smcu-hp-journey__eyebrow,
    .smcu-hp-screens__eyebrow,
    .smcu-hp-stats__eyebrow,
    .smcu-hp-faq__eyebrow {
        font-size: 0.8125rem;
        letter-spacing: 1.6px;
        margin-bottom: 0.6rem;
        display: block;
    }

    .smcu-hp-problem__lead,
    .smcu-hp-solution__lead,
    .smcu-hp-modes__lead,
    .smcu-hp-assess__lead,
    .smcu-hp-access__lead,
    .smcu-hp-journey__lead,
    .smcu-hp-screens__lead,
    .smcu-hp-faq__lead {
        font-size: 1rem;
        line-height: 1.65;
        margin-bottom: 0;
    }

    /* Every button on the page becomes a full-width, thumb-sized target. */
    .smcu-hp-problem .smcu-btn,
    .smcu-hp-solution .smcu-btn,
    .smcu-hp-modes .smcu-btn,
    .smcu-hp-assess .smcu-btn,
    .smcu-hp-access .smcu-btn,
    .smcu-hp-journey .smcu-btn,
    .smcu-hp-stats .smcu-btn,
    .smcu-hp-cta .smcu-btn,
    .smcu-home-hero .smcu-btn {
        width: 100%;
        max-width: 340px;
        min-height: 48px;
        white-space: normal;
        text-align: center;
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Standalone text links ("Explore the Research →") get a tappable row. */
    .smcu-hp-problem__cta a,
    .smcu-hp-faq__footer a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: var(--m-tap);
        padding: 8px 4px;
    }

    /* No hover-lift on touch; it only ever fires as a sticky stuck state. */
    .smcu-hp-problem__card:hover,
    .smcu-hp-solution__feature:hover,
    .smcu-hp-access__audience:hover,
    .smcu-hp-stats__card:hover,
    .smcu-hp-screens__device:hover,
    .smcu-btn:hover {
        transform: none;
    }


    /* ------------------------------------------------------------------
       2.3  S1 — Hero
       ------------------------------------------------------------------ */
    .smcu-home-hero {
        min-height: 0;
        padding-top: calc(40px + var(--m-safe-t));
        padding-bottom: 44px;
        /* 88% smaller than the 593 KB desktop JPEG */
        background-image: url('/static/marketing/images/home/pexels/mobile/backup-hero-campus.webp');
        background-position: 62% center;
    }

    .smcu-home-hero__overlay {
        background: linear-gradient(
            160deg,
            rgba(10, 22, 40, 0.93) 0%,
            rgba(21, 46, 84, 0.88) 60%,
            rgba(35, 75, 132, 0.82) 100%
        );
    }

    .smcu-home-hero__content {
        max-width: none;
        padding: 8px 0 0;
    }

    .smcu-home-hero__title {
        font-size: clamp(2rem, 8.8vw, 2.6rem);
        line-height: 1.14;
        letter-spacing: -0.01em;
        margin-bottom: 1rem;
        text-wrap: balance;
    }

    .smcu-home-hero__subtitle {
        font-size: 1.0625rem;
        line-height: 1.62;
        max-width: none;
        margin-bottom: 1.75rem;
    }

    .smcu-home-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .smcu-home-hero__actions .smcu-btn {
        max-width: none;
    }


    /* ------------------------------------------------------------------
       2.4  S2 — The Challenge
       ------------------------------------------------------------------ */

    /* The container is `display: flex`, so the old
       `grid-template-columns: 1fr` mobile rule was inert and three cards
       stayed side by side at 171px each — 579px of content in a 390px
       viewport, two thirds of it clipped. Forcing grid fixes it. */
    .smcu-hp-problem__cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0.5rem 1.25rem;
        margin-bottom: 2rem;
        border-radius: var(--m-radius);
    }

    .smcu-hp-problem__card {
        padding: 1.5rem 0;
        text-align: left;
        border-left: none;
        border-top: 1px solid rgba(26, 35, 126, 0.16);
    }

    .smcu-hp-problem__card:first-child {
        border-top: none;
    }

    .smcu-hp-problem__card h3 {
        font-size: 1.1875rem;
        margin-bottom: 0.5rem;
    }

    .smcu-hp-problem__card p {
        font-size: 0.9375rem;
        line-height: 1.65;
    }

    /* Bloom quote over photography — the 320px desktop crop is too tall
       relative to a phone viewport, and the inline styles need !important
       to beat the element's own style attribute. */
    .smcu-hp-problem .smcu-container > div[style*="border-radius"] {
        margin: 2rem 0 !important;
        border-radius: var(--m-radius) !important;
    }

    .smcu-hp-problem .smcu-container > div[style*="border-radius"] > img {
        height: 260px !important;
    }

    .smcu-hp-problem .smcu-container > div[style*="border-radius"] > div {
        padding: 1.5rem 1.25rem !important;
    }

    .smcu-hp-problem blockquote p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .smcu-hp-problem__cta {
        text-align: center;
    }


    /* ------------------------------------------------------------------
       2.5  S3 — Our Approach
       ------------------------------------------------------------------ */
    .smcu-hp-solution__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 2.25rem;
    }

    .smcu-hp-solution__feature {
        padding: 1.35rem 1.35rem;
        border-radius: var(--m-radius);
    }

    .smcu-hp-solution__feature h4 {
        font-size: 1.0625rem;
        margin-bottom: 0.5rem;
    }

    .smcu-hp-solution__feature p {
        font-size: 0.9375rem;
        line-height: 1.65;
    }

    /* AI tutor block — visual first, then the pitch. */
    .smcu-hp-solution__tutor-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding: 1.5rem 1.25rem;
        border-radius: var(--m-radius);
    }

    .smcu-hp-solution__tutor-visual {
        order: -1;
    }

    .smcu-hp-solution__section-title {
        font-size: 1.35rem;
        line-height: 1.3;
    }

    .smcu-hp-solution__tutor-intro {
        font-size: 1rem;
    }

    .smcu-hp-solution__tutor-highlights li {
        font-size: 0.9375rem;
        line-height: 1.55;
        margin-bottom: 0.75rem;
    }

    /* Chat mockup: 10px type is unreadable; give it real sizes and let the
       bubbles use the full card width. */
    .smcu-mock-tutor {
        max-width: none;
        width: 100%;
    }

    .smcu-mock-tutor__messages {
        max-height: none;
    }

    .smcu-mock-tutor__msg span {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    .smcu-mock-tutor__msg {
        max-width: 92%;
    }

    .smcu-mock-tutor__input-field {
        font-size: 0.8125rem;
    }


    /* ------------------------------------------------------------------
       2.6  S4 — Learning pathways
       ------------------------------------------------------------------ */

    /* Three stacked full-width tabs ate 230px of vertical space and read as
       a list, not a control. A scroll-snapped segmented control is the
       native mobile idiom and keeps all three labels + sublabels. */
    .smcu-hp-modes__tabs {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        /* The desktop rule is `justify-content: center`. Centring a flex row
           that is wider than its scroll container overflows it in BOTH
           directions, and the negative overflow is unreachable by scrolling —
           the first tab sat 124px off the left edge with scrollLeft already
           at 0. */
        justify-content: flex-start;
        max-width: none;
        gap: 8px;
        border-bottom: none;
        overflow-x: auto;
        overflow-y: hidden;
        /* Deliberately NOT scroll-snapped. `x mandatory` makes Chrome re-snap
           to the nearest snap point whenever the strip relayouts — which it
           does when the webfonts swap in — and the control would land on tab 2
           or 3 on a slow connection. A three-pill segmented control does not
           need snapping. */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* bleed to the screen edges so the strip reads as scrollable */
        margin: 0 calc(var(--m-gutter) * -1) 1.25rem;
        padding: 4px var(--m-gutter) 12px;
    }

    .smcu-hp-modes__tabs::-webkit-scrollbar {
        display: none;
    }

    .smcu-hp-modes__tab {
        flex: 0 0 auto;
        min-width: 44%;
        min-height: var(--m-tap);
        text-align: left;
        padding: 10px 16px;
        border: 1px solid var(--smcu-gray-300);
        border-radius: 999px;
        background: var(--smcu-white);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
    }

    .smcu-hp-modes__tab--active {
        border-color: var(--smcu-gold-500);
        background: var(--smcu-gold-100);
        box-shadow: inset 0 0 0 1px var(--smcu-gold-500);
    }

    .smcu-hp-modes__tab::after {
        display: none;
    }

    .smcu-hp-modes__tab-label {
        font-size: 0.9375rem;
        font-weight: 600;
    }

    .smcu-hp-modes__tab-sublabel {
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    .smcu-hp-modes__panel-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* Copy first, screenshot second — the screenshot is illustrative. */
    .smcu-hp-modes__panel-content h4 {
        font-size: 1.1875rem;
        line-height: 1.3;
    }

    .smcu-hp-modes__panel-subtitle {
        font-size: 0.9375rem;
    }

    .smcu-hp-modes__panel-content p {
        font-size: 0.9375rem;
        line-height: 1.7;
    }

    .smcu-hp-modes__panel-visual {
        min-height: 0;
        padding: 0;
    }

    .smcu-hp-modes__panel-visual img {
        border-radius: var(--m-radius) !important;
        box-shadow: 0 6px 20px rgba(10, 22, 40, 0.14) !important;
    }

    .smcu-hp-modes__switch-note {
        flex-direction: column;
        padding: 1.5rem 1.25rem;
        border-radius: var(--m-radius);
        margin-top: 1.75rem;
    }

    .smcu-hp-modes__switch-note h4 {
        font-size: 1.125rem;
    }

    .smcu-hp-modes__switch-note p {
        font-size: 0.9375rem;
        line-height: 1.65;
    }


    /* ------------------------------------------------------------------
       2.7  S5 — Assessment
       ------------------------------------------------------------------ */

    /* Desktop runs an infinite 45s marquee over a 5,480px track. On a phone
       that is unreadable (text slides out from under your eyes), unpausable
       (the pause is `:hover`) and expensive to composite. On mobile the same
       eight cards become a swipeable, scroll-snapped shelf that the reader
       controls. The duplicate half of the track is hidden from both the
       viewport and assistive tech by smcu-home-mobile.js. */
    .assess-ticker-wrapper {
        border-radius: var(--m-radius);
        padding: 1.5rem 0;
        margin-bottom: 1.75rem;
    }

    .assess-ticker-wrapper::before,
    .assess-ticker-wrapper::after {
        width: 24px;
    }

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

    .assess-ticker-track::-webkit-scrollbar {
        display: none;
    }

    .assess-ticker-card {
        width: 74vw;
        max-width: 300px;
        flex: 0 0 auto;
        /* `start` (not `center`) so card 1 rests against the gutter and the
           edge of card 2 stays visible — the affordance that tells the reader
           there are eight of these, not one. */
        scroll-snap-align: start;
        padding: 0.25rem 1.25rem;
        text-align: left;
        border-left: 1px solid var(--smcu-gray-300);
    }

    .assess-ticker-card h3 {
        font-size: 1.0625rem;
        line-height: 1.3;
    }

    .assess-ticker-card p {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    /* Duplicated marquee cards carry no new information on mobile. */
    .assess-ticker-card[data-ticker-clone] {
        display: none;
    }

    .smcu-hp-assess__note {
        text-align: center;
    }

    .smcu-hp-assess__note p {
        font-size: 0.9375rem;
        line-height: 1.65;
        margin-bottom: 1.25rem;
    }


    /* ------------------------------------------------------------------
       2.8  S6 — Built for everyone
       ------------------------------------------------------------------ */
    .smcu-hp-access__audiences {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-left: 0;
        padding-right: 0;
    }

    .smcu-hp-access__audience {
        padding: 1.35rem;
        border-radius: var(--m-radius);
    }

    .smcu-hp-access__audience h3 {
        font-size: 1.0625rem;
        margin-bottom: 0.5rem;
    }

    .smcu-hp-access__audience p {
        font-size: 0.9375rem;
        line-height: 1.65;
    }

    /* Three 87px-wide thumbnails became three swipeable photographs.
       The inline `grid-template-columns: repeat(3, 1fr)` on the element
       needs !important to override. */
    .smcu-hp-access__images {
        display: flex !important;
        gap: 12px !important;
        margin: 2rem 0 2.25rem !important;
        padding: 0 var(--m-gutter) !important;
        margin-left: calc(var(--m-gutter) * -1) !important;
        margin-right: calc(var(--m-gutter) * -1) !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--m-gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .smcu-hp-access__images::-webkit-scrollbar {
        display: none;
    }

    /* Each photograph is wrapped in <picture> so phones get the WebP source,
       which makes <picture> the flex item. */
    .smcu-hp-access__images > picture,
    .smcu-hp-access__images > img {
        flex: 0 0 auto;
        width: 76vw;
        max-width: 300px;
        scroll-snap-align: start;
    }

    .smcu-hp-access__images img {
        width: 100% !important;
        height: 190px !important;
        border-radius: var(--m-radius) !important;
    }

    .smcu-hp-access__images::after {
        /* trailing gutter so the last photo can snap clear of the edge */
        content: '';
        flex: 0 0 4px;
    }

    .smcu-hp-access__udl {
        padding: 1.5rem 1.25rem;
        margin-left: 0;
        margin-right: 0;
        border-radius: var(--m-radius);
    }

    .smcu-hp-access__udl h3 {
        font-size: 1.25rem;
    }

    .smcu-hp-access__udl-quote {
        font-size: 0.9375rem;
        line-height: 1.7;
    }

    /* The two accessibility links stack full width. */
    .smcu-hp-access__udl-content > div[style*="flex"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }


    /* ------------------------------------------------------------------
       2.9  S7 — Your path
       ------------------------------------------------------------------ */

    /* A true vertical timeline: a single rail, numbers on the rail, copy to
       the right. The old rule pushed numbers to `left: -52px` inside a 60px
       padding gutter, which was fragile and left the text column at 260px. */
    .smcu-hp-journey__timeline {
        display: block;
        padding: 0 0 0 4px;
        position: relative;
    }

    .smcu-hp-journey__step {
        position: relative;
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 16px;
        align-items: start;
        text-align: left;
        max-width: none;
        padding: 0 0 1.75rem 0;
        margin: 0;
    }

    .smcu-hp-journey__step:last-child {
        padding-bottom: 0;
    }

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

    /* The rail: drawn per step so it stops cleanly at the last one. */
    .smcu-hp-journey__step-connector {
        display: block;
        position: absolute;
        top: 46px;
        bottom: 6px;
        left: 19px;
        width: 2px;
        height: auto;
        background: rgba(255, 255, 255, 0.22);
        transform: none;
    }

    .smcu-hp-journey__step:last-child .smcu-hp-journey__step-connector {
        display: none;
    }

    .smcu-hp-journey__step h3 {
        grid-column: 2;
        grid-row: 1;
        font-size: 1.0625rem;
        line-height: 1.3;
        margin: 8px 0 0.4rem;
    }

    /* "Begin<br>Learning" / "Complete &<br>Graduate" — the desktop line
       breaks make for ragged two-word columns on a phone. */
    .smcu-hp-journey__step h3 br {
        display: none;
    }

    .smcu-hp-journey__step p {
        grid-column: 2;
        grid-row: 2;
        font-size: 0.9375rem;
        line-height: 1.6;
        margin: 0;
    }

    .smcu-hp-journey__line {
        display: none;
    }

    .smcu-hp-journey__cta {
        margin-top: 2.25rem;
        text-align: center;
    }


    /* ------------------------------------------------------------------
       2.10  S8 — Inside the platform
       ------------------------------------------------------------------ */

    /* One device per screen, swipeable, with the dots and arrows as real
       44px controls rather than 10px decorations. */
    .smcu-hp-screens__gallery {
        padding: 0;
    }

    .smcu-hp-screens__carousel {
        display: flex;
        justify-content: flex-start;
        grid-template-columns: none;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--m-gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px var(--m-gutter) 8px;
        margin: 0 calc(var(--m-gutter) * -1);
    }

    .smcu-hp-screens__carousel::-webkit-scrollbar {
        display: none;
    }

    .smcu-hp-screens__slide {
        flex: 0 0 auto;
        width: 84vw;
        max-width: 420px;
        min-width: 0;
        scroll-snap-align: start;
        /* JS pagination hides slides on desktop; never inherit that here. */
        display: flex !important;
    }

    .smcu-hp-screens__device {
        width: 100%;
        box-shadow: 0 8px 24px rgba(10, 22, 40, 0.16);
    }

    .smcu-hp-screens__caption {
        font-size: 0.875rem;
        line-height: 1.5;
        margin-top: 0.875rem;
        padding: 0 4px;
    }

    /* Arrows are redundant next to a swipe gesture and overlap the frame at
       this width; the dots below remain as the explicit control. */
    .smcu-hp-screens__arrows {
        display: none;
    }

    .smcu-hp-screens__nav {
        gap: 0;
        margin-top: 1rem;
        flex-wrap: wrap;
    }

    .smcu-hp-screens__nav-dot {
        width: var(--m-tap);
        height: 36px;
        min-width: 0;
        border-radius: 0;
        background: transparent;
        border: none;
        position: relative;
        padding: 0;
    }

    .smcu-hp-screens__nav-dot::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--smcu-gray-300);
        transition: background 0.2s ease, width 0.2s ease;
    }

    .smcu-hp-screens__nav-dot--active::after {
        width: 22px;
        border-radius: 4px;
        background: var(--smcu-gold-500);
    }

    /* Lightbox: full-bleed on a phone, with a real close target. */
    #screenshot-lightbox {
        padding: 0 !important;
    }

    #screenshot-lightbox img {
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    #screenshot-lightbox button {
        top: calc(8px + var(--m-safe-t)) !important;
        right: 10px !important;
        width: var(--m-tap);
        height: var(--m-tap);
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.55) !important;
    }


    /* ------------------------------------------------------------------
       2.11  S9 — The numbers
       ------------------------------------------------------------------ */

    /* `1fr` let long labels drag the columns to 144px/165px. minmax(0,1fr)
       keeps them even. */
    .smcu-hp-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 2.25rem;
    }

    .smcu-hp-stats__card {
        padding: 1.15rem 0.9rem;
        border-radius: var(--m-radius);
        min-width: 0;
    }

    .smcu-hp-stats__card-value {
        font-size: 1.9rem;
        line-height: 1.1;
        margin-bottom: 0.5rem;
    }

    .smcu-hp-stats__card-label {
        font-size: 0.8125rem;
        line-height: 1.45;
        overflow-wrap: break-word;
    }

    .smcu-hp-stats__card-cite {
        font-size: 0.75rem;
        line-height: 1.35;
        display: block;
        margin-top: 0.5rem;
        overflow-wrap: break-word;
    }

    .smcu-hp-stats__testimonials {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-left: 0;
        padding-right: 0;
    }

    .smcu-hp-stats__testimonial {
        padding: 1.35rem;
        border-radius: var(--m-radius);
    }

    .smcu-hp-stats__testimonial-quote p {
        font-size: 0.9375rem;
        line-height: 1.65;
    }

    .smcu-hp-stats__testimonials-link {
        margin-bottom: 2.25rem !important;
    }

    .smcu-hp-stats__trust-items {
        justify-content: center;
        gap: 1rem 1.5rem;
        flex-wrap: wrap;
    }

    .smcu-hp-stats__trust-item {
        font-size: 0.875rem;
    }


    /* ------------------------------------------------------------------
       2.12  S10 — FAQ
       ------------------------------------------------------------------ */
    .smcu-hp-faq__list {
        padding-left: 0;
        padding-right: 0;
    }

    .smcu-faq-question {
        min-height: 56px;
        padding: 14px 14px 14px 16px;
        gap: 12px;
        align-items: center;
    }

    .smcu-faq-question h3 {
        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;
    }

    .smcu-accordion-body-inner p {
        font-size: 0.9375rem;
        line-height: 1.7;
    }

    .smcu-hp-faq__footer {
        text-align: center;
        margin-top: 1.5rem;
    }

    .smcu-hp-faq__footer p {
        font-size: 0.9375rem;
        line-height: 1.6;
    }


    /* ------------------------------------------------------------------
       2.13  S11 — Closing CTA
       ------------------------------------------------------------------ */
    .smcu-hp-cta {
        /* Same treatment, mobile-weight photograph. */
        background-image:
            linear-gradient(rgba(13, 27, 62, 0.85), rgba(13, 27, 62, 0.88)),
            url('/static/marketing/images/home/pexels/mobile/graduates-group.webp') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    .smcu-hp-cta__title {
        font-size: clamp(1.5rem, 6.6vw, 2rem);
        line-height: 1.25;
    }

    .smcu-hp-cta__text p {
        font-size: 0.9375rem;
        line-height: 1.7;
    }

    .smcu-hp-cta__assurance {
        font-size: 0.8125rem;
        line-height: 1.55;
    }



}


/* ============================================================================
   3. SMALL PHONE TIER  —  max-width: 400px   (iPhone SE / mini, Galaxy S)
   ============================================================================ */

@media (max-width: 400px) {

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

    .smcu-hp-problem,
    .smcu-hp-solution,
    .smcu-hp-modes,
    .smcu-hp-assess,
    .smcu-hp-access,
    .smcu-hp-journey,
    .smcu-hp-screens,
    .smcu-hp-stats,
    .smcu-hp-faq {
        padding: 44px 0;
    }

    .smcu-home-hero__title {
        font-size: 1.95rem;
    }

    .smcu-home-hero__subtitle {
        font-size: 1rem;
    }

    /* Two 143px stat cards with a 4-6x value and a two-line citation is too
       tight below 400px; one per row stays legible. */
    .smcu-hp-stats__grid {
        grid-template-columns: 1fr;
    }

    .smcu-hp-stats__card {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 1rem;
        align-items: center;
        text-align: left;
        padding: 1rem 1.15rem;
    }

    .smcu-hp-stats__card-value {
        grid-row: 1 / span 2;
        margin-bottom: 0;
        min-width: 68px;
    }

    .smcu-hp-stats__card-label {
        font-size: 0.875rem;
    }

    .smcu-hp-modes__tab {
        min-width: 58%;
    }

    .smcu-hp-screens__slide,
    .assess-ticker-card {
        width: 86vw;
    }

    .smcu-hp-access__images img {
        width: 82vw !important;
        height: 170px !important;
    }
}


/* ============================================================================
   4. TABLET TIER  —  768px to 1023px
   The desktop nav is already hidden at 1024px but the homepage sections had
   almost no rules in this band, so several ran at desktop density on a
   portrait iPad.
   ============================================================================ */

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

    .smcu-hp-problem,
    .smcu-hp-solution,
    .smcu-hp-modes,
    .smcu-hp-assess,
    .smcu-hp-access,
    .smcu-hp-journey,
    .smcu-hp-screens,
    .smcu-hp-stats,
    .smcu-hp-faq {
        padding: 72px 0;
    }

    /* Three narrow columns of body copy at 768px is a squeeze; two up top,
       one centred underneath. */
    .smcu-hp-problem__cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 2rem;
        padding: 2rem 1.75rem;
    }

    .smcu-hp-problem__card {
        border-left: none;
        padding: 1.25rem 0;
    }

    .smcu-hp-problem__card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 60%;
        margin: 0 auto;
        border-top: 1px solid rgba(26, 35, 126, 0.16);
    }

    .smcu-hp-solution__grid,
    .smcu-hp-access__audiences,
    .smcu-hp-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .smcu-hp-stats__testimonials {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Journey: 5 steps at 137px each is unreadably narrow. */
    .smcu-hp-journey__timeline {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 2.5rem;
        padding: 0 8px;
    }

    .smcu-hp-journey__step {
        max-width: none;
    }

    /* Step 5 would otherwise sit alone in the left column. */
    .smcu-hp-journey__step:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }

    .smcu-hp-journey__step-connector,
    .smcu-hp-journey__line {
        display: none;
    }

    /* Assessment marquee reads fine at this width but must be pausable. */
    .assess-ticker-card {
        width: 300px;
    }

    /* Screenshots: 2-up at 316px is too small to read a UI screenshot. */
    .smcu-hp-screens__carousel {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        scrollbar-width: none;
        padding: 4px 24px 8px;
        margin: 0 -24px;
    }

    .smcu-hp-screens__carousel::-webkit-scrollbar {
        display: none;
    }

    .smcu-hp-screens__slide {
        flex: 0 0 auto;
        width: 62%;
        max-width: 520px;
        scroll-snap-align: center;
        display: flex !important;
    }

    .smcu-hp-screens__arrow {
        width: var(--m-tap);
        height: var(--m-tap);
    }
}


/* Respect the OS-level motion preference. The global reduced-motion rule in
   smcu-responsive.css disables animation, but the scroll-reveal classes on
   this page also apply an opacity of 0 that must be released, or the content
   never appears. */
@media (prefers-reduced-motion: reduce) {

    .smcu-animate-on-scroll,
    .journey-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .assess-ticker-track {
        animation: none !important;
    }

    .smcu-hp-screens__carousel,
    .assess-ticker-track,
    .smcu-hp-modes__tabs,
    .smcu-hp-access__images {
        scroll-behavior: auto;
    }
}