/**
 * Yifat Theme - Mobile Refinement Layer
 * ------------------------------------------------------------------
 * ADDITIVE, design-preserving mobile fixes. Loaded LAST (depends on
 * yifat-main) so these rules win without editing the base stylesheet.
 *
 * Rules of engagement:
 *  - No color / font / visual-language changes. Refinement only.
 *  - RTL via logical properties (margin-inline, inset-inline, text-align:start).
 *  - Nothing here changes desktop (>=769px) layout.
 *
 * Grouped by issue. Breakpoints mirror main.css (1024 / 768 / 480)
 * plus 390 / 360 tweaks for the smallest common phones.
 * ================================================================== */


/* ==================================================================
 * 1. HORIZONTAL-OVERFLOW GUARDS
 * body already sets overflow-x:hidden in main.css; this is a
 * belt-and-suspenders layer so a single stray element can never
 * create a horizontal scrollbar on 360-414px screens.
 * ================================================================== */
html {
    /* clip keeps position:sticky working (unlike overflow:hidden) */
    overflow-x: clip;
}

/* Media and embeds never exceed their column */
img,
svg,
video,
iframe,
.timeline-card img,
.cert-gallery-item img {
    max-width: 100%;
    height: auto;
}

/* Decorative blobs are absolutely positioned with negative offsets
 * (e.g. -80px). Their parent .section has overflow:hidden, but guard
 * any blob that sits outside a clipped container as well. */
.decorative-blob {
    max-width: 100vw;
}

@media (max-width: 768px) {
    /* Long unbreakable strings (URLs, the LTR phone number) must wrap
     * instead of forcing the viewport wider. */
    body {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* The LTR phone link inside the RTL hero can otherwise push width. */
    .hero-phone-link {
        max-width: 100%;
    }

    /* Auto-fit grids that request a 350px min column would overflow a
     * ~360px viewport once padding is counted - force single column. */
    .workshops-grid,
    .values-grid,
    .services-grid,
    .satya-grid {
        grid-template-columns: 1fr;
    }
}


/* ==================================================================
 * 2. CTA SECTION HEADLINE
 * main.css ~1492 sets `white-space:nowrap` on `.cta-section h2`.
 * The real Hebrew string ("38 שנות ניסיון, ידע וליווי. הצעד הראשון
 * מתחיל בשיחה.") cannot fit on one line on a phone, so it overflows /
 * gets clamped tiny. Allow normal wrapping on mobile (look unchanged
 * on desktop where it already fits).
 * ================================================================== */
@media (max-width: 768px) {
    .cta-section h2 {
        white-space: normal;
        text-wrap: balance; /* nicer line breaks where supported */
        font-size: clamp(1.25rem, 5vw, 1.6rem);
        line-height: 1.4;
    }
}


/* ==================================================================
 * 3. TAP TARGETS (>= 44px touch height)
 * WCAG 2.5.5 / iOS HIG. Applied only on touch-sized viewports so
 * desktop hover spacing is untouched.
 * ================================================================== */
@media (max-width: 768px) {

    /* Header hamburger */
    .menu-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile drawer: top-level links already pad 16px (>=44px). The
     * services accordion SUB-links padded only 12px - bump them. */
    .mobile-nav-accordion-panel a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Accordion toggle row */
    .mobile-nav-accordion-toggle {
        min-height: 48px;
    }

    /* Drawer close button - enlarge the hit area only, keep its existing
     * position from main.css (do not move it). */
    .mobile-nav-close {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Hero badges read as chips, not tap targets, but the primary CTA
     * and phone link must be comfortably tappable. */
    .hero-cta-primary,
    .hero-phone-link,
    .btn {
        min-height: 48px;
    }

    /* FAQ question rows */
    .faq-question {
        min-height: 48px;
    }

    /* Footer + generic content links get a roomier hit area without
     * changing how they look (padding only on the block-axis). */
    .footer-links a,
    .footer-nav a {
        display: inline-block;
        padding-block: 8px;
    }

    /* Testimonials slider dots - easy to hit */
    .testimonial-dot {
        min-width: 24px;
        min-height: 24px;
    }
}


/* ==================================================================
 * 4. MOBILE DRAWER WIDTH / USABILITY
 * The drawer is a fixed 320px panel. On a 360px phone that leaves a
 * sliver of overlay (hard to tap to close) and on a 320px device it
 * is full-bleed. Cap it so there is always a tappable overlay strip,
 * and make sure it scrolls if the menu is tall. Slide direction
 * (from the inline-end / right in RTL) is preserved.
 * ================================================================== */
@media (max-width: 768px) {
    .mobile-nav {
        width: min(320px, 86vw);
        /* keep closed offset in sync with the capped width */
        right: calc(-1 * min(320px, 86vw));
        max-height: 100%;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain; /* don't scroll the page behind */
    }

    .mobile-nav.open {
        right: 0;
    }
}


/* ==================================================================
 * 5. FORM INPUTS - PREVENT iOS FOCUS ZOOM
 * Inputs at <16px font cause iOS Safari to auto-zoom on focus, which
 * then leaves the page scrolled/zoomed. Bump to 16px on mobile only.
 * (Visual size barely changes; prevents the zoom jump.)
 * ================================================================== */
@media (max-width: 768px) {
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        font-size: 16px;
    }
}


/* ==================================================================
 * 6. LEGIBILITY & SPACING @ 390 / 360px
 * Small, purely responsive nudges. No new design - just stop the
 * hero, section headers and the decorative quote mark from feeling
 * cramped or oversized on the narrowest phones.
 * ================================================================== */
@media (max-width: 480px) {
    /* Tighten the giant decorative quote mark so it doesn't dominate. */
    .key-phrase-mark {
        font-size: 3.25rem;
    }

    /* Section headers: keep them readable, not shrunk by long words. */
    .section-header h2 {
        font-size: clamp(1.35rem, 6vw, 1.7rem);
        overflow-wrap: break-word;
    }

    /* Hero subtitle line length / size on small screens. */
    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Hero tagline (secondary headline) */
    .hero-tagline {
        font-size: 1.15rem;
        line-height: 1.5;
    }
}

@media (max-width: 390px) {
    /* Slightly tighter gutters reclaim a little width on small phones
     * without touching the 16px gutter set at <=480 in main.css... */
    .container,
    .container-wide {
        padding-inline: 16px;
    }

    .hero-split-inner {
        padding-inline: 16px;
    }

    .hero-title {
        font-size: 1.75rem !important;
    }

    .cta-section h2 {
        font-size: 1.25rem;
    }
}

@media (max-width: 360px) {
    .hero-title {
        font-size: 1.6rem !important;
    }

    /* Stack hero badges comfortably and keep them from wrapping awkwardly. */
    .hero-badge {
        font-size: 0.78rem;
        padding: 5px 14px;
    }
}


/* ==================================================================
 * 7. TIMELINE / SLIDER TOUCH SAFETY
 * main.css already converts the horizontal timeline to a vertical
 * layout at <=768. Make sure neither it nor any slider can produce a
 * horizontal scrollbar, and that the (desktop) horizontal scroller is
 * touch-momentum friendly should it ever show on a wide tablet.
 * ================================================================== */
@media (max-width: 768px) {
    .horizontal-timeline,
    .timeline-track {
        max-width: 100%;
        min-width: 0;
    }

    .testimonials-slider,
    .testimonials-masonry {
        max-width: 100%;
    }

    /* Modal / lightbox image never wider than the screen. */
    .cert-modal-img {
        max-width: 92vw;
        max-height: 80vh;
        height: auto;
    }
}


/* ==================================================================
 * 8. MOBILE DRAWER STACKING + VISIBLE CLOSE (X)  [Mobile QA team v2]
 * ------------------------------------------------------------------
 * SEEN (home_menu_open.png): the open drawer has NO usable close button
 * and the hamburger/logo header stays on top of the panel.
 * ROOT CAUSE: .site-header is z-index:1000 (main.css ~280) while
 * .mobile-nav is z-index:999 and .mobile-nav-overlay is 998 - so the
 * sticky header paints OVER the open drawer, burying the close button
 * (which sits at the drawer's top: main.css ~2657) behind the header.
 *
 * Fix, additive + RTL-correct:
 *  - Lift the overlay + drawer above the header while open.
 *  - Turn the close into an obvious, comfortably tappable chip pinned to
 *    the drawer's inline-start top (right side of an RTL panel reads as
 *    inline-end; the close belongs at inline-start = the panel's left).
 *  - Give the drawer clear top padding so the close never collides with
 *    the first menu link.
 * Best practice: a drawer must feel "finished" - one obvious X, plus the
 * already-wired overlay-tap and Escape (main.js) to dismiss.
 * ================================================================== */
@media (max-width: 768px) {
    /* The open drawer + its scrim must sit above the sticky header. */
    .mobile-nav-overlay {
        z-index: 1100;
    }
    .mobile-nav {
        z-index: 1101;
        /* Room for the close chip (44px tall at top:16px => ~60px), without
         * a tall empty band above the first link. [QA item 2] */
        padding-top: 60px;
    }

    /* Visible, tappable close pinned to the panel's inline-END (the LEFT
     * edge of an RTL drawer, mirroring the X's original main.css spot at
     * left:20px). Logical props, no hard-coded side. */
    .mobile-nav-close {
        position: absolute;
        top: 16px;
        inset-inline-end: 16px;
        inset-inline-start: auto;
        left: auto; /* neutralise main.css `left:20px` so logical wins */
        right: auto;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--yifat-bg-secondary, #f3f4f1);
        border: 1px solid var(--yifat-border);
        color: var(--yifat-text-primary);
        z-index: 2; /* above the menu links inside the drawer */
    }
    .mobile-nav-close:active {
        background: var(--yifat-accent-ultralight);
    }
    .mobile-nav-close .yifat-icon {
        width: 22px;
        height: 22px;
    }
}


/* ==================================================================
 * 9. HEADER DECLUTTER ON MOBILE  [Mobile QA team v2]
 * ------------------------------------------------------------------
 * SEEN (home_iphone12_fold.png): the header row is busy - hamburger +
 * the secondary tagline ".site-logo-sub" ("הדרכה - ייעוץ - טיפול") +
 * the script logo, all competing in one narrow row.
 * The logo IMAGE already carries its own tagline lockup, so the text
 * tagline is redundant on a phone.
 * Best practice: on mobile keep the header to logo + hamburger only.
 * CSS-only hide (copy is preserved in header.php for desktop/SEO).
 * ================================================================== */
@media (max-width: 768px) {
    .site-logo-sub {
        display: none;
    }
    /* With the sub-line gone, the remaining logo text shouldn't crowd the
     * image; let it sit tight to the mark. */
    .site-logo-text {
        line-height: 1.2;
    }
}


/* ==================================================================
 * 10. DEAD VERTICAL GAP ON SECONDARY PAGES  [Mobile QA team v2]
 * ------------------------------------------------------------------
 * SEEN (certificates / about / workshops _full.png): content, then a
 * large EMPTY band, then the footer. certificates shows 3 cards then a
 * tall void; about shows the story text then a void before the CTA.
 * ROOT CAUSE: scroll-reveal. animations.css starts .reveal /
 * .reveal-stagger>* at opacity:0 + translateY and only the JS observer
 * (animations.js) adds .visible. Sections BELOW the fold are not
 * intersected during a puppeteer full-page capture (and can blank-flash
 * for fast-scrolling users), so they keep opacity:0 - present in layout
 * (height reserved) but invisible => a tall empty gap.
 *
 * Fix: on mobile, neutralise the hidden START state so content is
 * ALWAYS painted regardless of JS/observer timing. The .visible end
 * state is identical (opacity:1, no transform), so nothing about the
 * design changes - we only remove the dependency on JS to SEE content.
 * Scoped to <=768 so desktop reveal motion is untouched.
 * Mirrors what main.css already does for prefers-reduced-motion.
 * ================================================================== */
@media (max-width: 768px) {
    .reveal,
    .reveal-stagger > *,
    .fade-in,
    .scale-in,
    .slide-in-right,
    .slide-in-left {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ==================================================================
 * 11. TAP TARGETS the report flagged but section 3 missed
 *     [Mobile QA team v2 - from report.json smallTargets]
 * ------------------------------------------------------------------
 * report.json (home) flags 10 sub-44px targets: the 5 "קרא/י עוד"
 * service-card links (h24), footer contact links phone/WhatsApp/email
 * (h26), and the legal "מדיניות פרטיות"/"נגישות" links (h18).
 * Give each a >=44px touch height via block padding only - the visible
 * text/colour is unchanged. Section 3 already covers nav/FAQ/CTA.
 * ================================================================== */
@media (max-width: 768px) {
    /* "קרא/י עוד" card links - pad the block axis, keep inline-flex look. */
    .service-card-link {
        min-height: 44px;
        padding-block: 10px;
    }

    /* Footer contact rows (phone, WhatsApp, email) and social icons:
     * comfortable hit area, same appearance. (Footer wrapper is
     * .site-footer; these item/social classes are the real markup.) */
    .footer-contact-item a,
    .footer-social a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Legal strip links ("מדיניות פרטיות" / "נגישות") were 18px tall. */
    .footer-bottom a {
        display: inline-block;
        min-height: 44px;
        padding-block: 12px;
    }

    /* Contact page info card links (phone / email / "שליחת הודעה") were
     * h24 per report.json (contact_*). Same hit-area treatment. */
    .contact-info-item a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}


/* ==================================================================
 * 12. ALIGNMENT / NUMBER DIRECTION / PLACEHOLDER  [Mobile QA team v2]
 * ------------------------------------------------------------------
 * (a) SEEN (home_full.png trust bar): the "+38" stat. The count-up JS
 *     builds "38+" but inside an RTL block the trailing "+" flips to the
 *     left, reading "+38". Force LTR numeric direction so it reads "38+"
 *     correctly. Numbers are inherently LTR - this is the RTL-correct fix.
 * (b) SEEN (every _full.png): the camera-box photo placeholder is large
 *     and unfinished (no real photo yet). On mobile only, soften it:
 *     cap its height, shrink the camera glyph, lower its visual weight.
 *     No colour/font change; real photo will simply replace it later.
 * (c) Keep hero badges on a tidy row and the trust grid balanced.
 * ================================================================== */
@media (max-width: 768px) {
    /* (a) Stat numbers read left-to-right (so "38+" not "+38"). */
    .trust-item .number {
        direction: ltr;
        unicode-bidi: isolate;
    }

    /* (b) Calmer hero placeholder on phones (until a real photo exists).
     * aspect-ratio 3/4 on a ~360px column is very tall; cap it and reduce
     * the glyph so it doesn't dominate the fold. Conservative - shape,
     * colour and copy are all preserved. */
    .hero-split-image .photo-placeholder.hero-placeholder {
        aspect-ratio: auto;
        min-height: 220px;
        max-height: 300px;
    }
    .hero-split-image .photo-placeholder.hero-placeholder .photo-placeholder-inner .yifat-icon {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    /* (c) Trust bar: 2x2 already (main.css). Tighten padding so the four
     * numbers/labels line up without uneven gaps on the narrowest phones. */
    .trust-item {
        padding: 12px 8px;
    }

    /* Hero badges: keep them as a calm single cluster, not ragged wraps. */
    .hero-badges {
        gap: 6px;
    }
}


/* ==================================================================
 * 13. MOBILE POLISH v2 - alignment & uniformity  [client visual review]
 * ------------------------------------------------------------------
 * From a real-device walkthrough: (a) the vertical timeline zig-zagged
 * (desktop above/below alternation leaked to mobile -> cards of uneven
 * width, not aligned to the spine); (b) the approach check-list looked
 * loose/ugly (big uneven gaps, wrapped line drifting); (c) header felt
 * empty; (d) footer columns needed clean RTL alignment.
 * All scoped <=768px, additive, no color/font/copy change.
 * ================================================================== */
@media (max-width: 768px) {

    /* 13a. TIMELINE - one clean vertical spine, all cards identical width,
     * aligned to the line, content right-aligned. Kills the zig-zag. */
    .timeline-track {
        align-items: stretch;
        padding-inline-end: 34px;
        padding-inline-start: 4px;
    }
    .timeline-milestone,
    .timeline-milestone.above,
    .timeline-milestone.below {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
        margin-inline: 0;
        padding-inline-start: 0;
    }
    .timeline-card,
    .timeline-milestone.above .timeline-card,
    .timeline-milestone.below .timeline-card {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        box-sizing: border-box;
        text-align: start; /* right in RTL - year/title/desc align to the same edge */
    }
    .timeline-card-year { text-align: start; }

    /* 13b. APPROACH CHECK-LIST - tidy rows: icon pinned to the first line,
     * text right-aligned on every wrapped line, even vertical rhythm. */
    .approach-points { margin-top: 20px; }
    .approach-point {
        gap: 10px;
        margin-bottom: 12px;
        align-items: flex-start;
        text-align: start;
    }
    /* Pin the check icon - it must NOT grow (it's a 24px span; flexing it
     * stretched it into an ellipse). */
    .approach-point .approach-point-icon {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
    }
    /* Only the TEXT span (no class) takes the remaining width + right-aligns. */
    .approach-point > span:not(.approach-point-icon) {
        text-align: start;
        flex: 1 1 auto;
    }

    /* 13c. HEADER - the desktop grid is `auto 1fr auto` (logo / nav / cta).
     * On mobile nav + cta are display:none, so the hamburger fell into the
     * empty 1fr middle column and floated mid-row. Switch to flex
     * space-between: logo pinned to the inline-start edge (right in RTL),
     * hamburger pinned to the inline-end edge (left). Plus a bit more logo
     * presence (it was shrunk to 0.7x). */
    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .menu-toggle { margin-inline-start: 0; }
    .site-logo img { height: calc(var(--logo-h, 50px) * 0.82) !important; }

    /* 13d. FOOTER - every column right-aligned (RTL start), contact rows
     * and quick-nav stacked and tidy. */
    .site-footer .footer-col { text-align: start; }
    .footer-contact-item { justify-content: flex-start; }
    .footer-nav { display: flex; flex-direction: column; gap: 2px; }
    .footer-nav a { display: block; }
}


/* ==================================================================
 * 14. MOBILE QA BATCH (audit 2026-06)  [worker_mobile_ui]
 * ------------------------------------------------------------------
 * Additive, design-preserving. No colour/font/copy changes. RTL via
 * logical properties. Scoped <=768 (plus 480/360 nudges). Each block
 * maps to a numbered QA item.
 * ================================================================== */
@media (max-width: 768px) {

    /* 14a. MENU - accordion SUB-links must read as children of "תחומי
     * טיפול". Top-level links sit flush to the inline-start edge
     * (padding-inline:0); indent the children and shrink the type so the
     * hierarchy is obvious. (Block padding handled in section 3.)  [item 1] */
    .mobile-nav-accordion-panel a {
        padding-inline-start: 22px;
        padding-inline-end: 0;
        font-size: 0.9rem;
    }

    /* 14c. SERVICES CTA - the archive uses .not-sure-section (a pale
     * ultralight card) while workshops/certificates use the full-bleed
     * green .cta-section band. Make the services CTA match the standard
     * band on mobile: full-bleed green, centered, white pill button.
     * Colour token is the same --yifat-accent already used by .cta-section;
     * no new colours introduced.  [item 3] */
    .not-sure-section {
        padding-block: 0;
    }
    .not-sure-section .not-sure-card {
        background: var(--yifat-accent);
        max-width: 100%;
        border-radius: 0;
        /* break out of the .container gutter (24px at 481-768px) to a true
         * full-bleed band; <=480 / 360 override to -16px to match those
         * narrower gutters. */
        margin-inline: -24px;
        padding: 56px 24px;
        text-align: center;
    }
    .not-sure-card h3 {
        color: var(--yifat-text-on-accent);
    }
    .not-sure-card p {
        color: var(--yifat-text-on-accent);
        opacity: 0.92;
        max-width: 32ch;
        margin-inline: auto;
    }
    /* Match the standard CTA button: white pill, accent text. */
    .not-sure-card .btn-primary {
        background: var(--yifat-text-on-accent);
        color: var(--yifat-accent);
        font-weight: 700;
    }

    /* 14d. BLOG - a short archive (1-2 posts) left the footer stranded
     * under a tall void. Centre the single column and cap its width so the
     * lone card reads as content, not a fragment, and trim the section's
     * block padding so the footer isn't pushed far below.  [item 4] */
    .blog-archive-grid {
        max-width: 480px;
        margin-inline: auto;
    }
    .blog-archive-grid + .pagination:empty {
        display: none;
    }

    /* 14f. CONTACT FORM  [item 6]
     * (i) Required "*": the asterisk was the trailing char of an RTL label,
     *     so it drifted to the visual far-LEFT, detached from the words.
     *     It is now a <span.req-mark>; lay the label out as an inline-start
     *     flex row and order the marker to sit on the inline-start (the
     *     RIGHT edge in RTL), right beside the label text. */
    .contact-form label {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        gap: 4px;
    }
    .contact-form label .req-mark {
        order: -1; /* marker before the text => inline-start (right in RTL) */
        color: var(--yifat-accent);
    }
    /* (ii) Native <select> renders shorter than the inputs and its chevron
     *     crowds the option text in RTL. Give it a custom chevron pinned to
     *     the inline-start, matching input height + room for the glyph. */
    .contact-form select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        min-height: 52px;            /* = input: 16px font + 14px*2 pad + border */
        /* In RTL the dropdown chevron belongs on the LEFT (inline-end).
         * Reserve room there and draw a custom chevron pinned to the left
         * so it never crowds the "בחרו תחום" option text. */
        padding-inline-end: 44px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left 16px center; /* inline-end in RTL */
        background-size: 16px;
    }

    /* 14g. WORKSHOPS  [item 7]
     * (i) meta rows: stack into a single inline-start column so every
     *     icon shares one edge with a consistent icon-text gap (no more
     *     two-items-per-wrapped-line). */
    .workshop-meta {
        flex-direction: column;
        gap: 8px;
    }
    .workshop-meta span {
        gap: 8px;
        justify-content: flex-start;
    }
    .workshop-meta span .yifat-icon {
        flex: 0 0 16px;
    }
    /* (ii) topic pills: justify rows to the inline-start so a short last
     *     row hugs the start edge instead of drifting/centering. */
    .workshop-topics {
        justify-content: flex-start;
    }

    /* 14i. TESTIMONIALS - even out internal padding (quote mark was tight
     * to the top, author tight to the bottom) and separate name from role.
     * Same card, calmer rhythm.  [item 9] */
    .testimonial-card {
        padding: 36px 28px;
    }
    .testimonial-quote-icon {
        margin-bottom: 18px;
    }
    .testimonial-card blockquote {
        margin-bottom: 20px;
    }
    .testimonial-service {
        margin-top: 6px;
    }

    /* 14j. HERO subtitles on secondary-page heros - avoid 1-word orphan
     * lines by capping line length and letting the browser balance breaks.
     * Vertically the band is short, so this only tightens wrapping.  [item 10] */
    .page-hero p {
        max-width: 34ch;
        text-wrap: balance;
    }
}

/* 14h. TRUST BAR - labels wrap 1 vs 2 lines, making the 4 cells jagged.
 * Give each cell a shared min-height and bottom-align the number+label
 * stack so all four share a baseline regardless of label length.  [item 8]
 * Applies on the 2x2 (<=480) and the 4-up (>480) mobile grids. */
@media (max-width: 768px) {
    .trust-item {
        min-height: 112px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .trust-item .label {
        min-height: 2.4em; /* reserve room for the 2-line labels */
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
}

/* At <=480 the .container gutter drops to 16px (main.css), so keep the
 * full-bleed CTA breakout in sync. */
@media (max-width: 480px) {
    .not-sure-section .not-sure-card {
        margin-inline: -16px;
    }
}

/* 14k. 360px GUTTERS - match the comfortable 16px gutter used at 390px so
 * the smallest phones aren't tighter than mid phones.  [item 11] */
@media (max-width: 360px) {
    .container,
    .container-narrow,
    .container-wide {
        padding-inline: 16px;
    }
    .hero-split-inner {
        padding-inline: 16px;
    }
    /* keep the full-bleed CTA breakout in sync with the 16px gutter */
    .not-sure-section .not-sure-card {
        margin-inline: -16px;
    }
}

/* 14l. BREADCRUMB - even the rhythm: a touch more space below the crumb
 * row before the page hero/heading, so it doesn't clamp to the title.  [item 12] */
@media (max-width: 768px) {
    .breadcrumbs {
        padding-block: 12px 16px;
    }
}