/* ============================================================
   Responsive safety net
   ============================================================
   Layout-level guards only. Changes no colour, spacing scale, copy
   or DOM structure - the goal is that existing pages survive a
   320-430px viewport without horizontal scrolling.

   Two rules in the first version of this file caused regressions on
   desktop; both are deliberately narrowed here:

   1. `overflow-wrap: break-word` was applied to `a` and `span`. That
      drops an element's min-content width to a single character, so
      flex items are free to shrink below their word width - the navbar
      collapsed into "Platfor / m", "Pricin / g". Word breaking is now
      limited to block text containers, and nav links are explicitly
      protected.

   2. `svg { height: auto }` collapsed inline SVGs that carry explicit
      width/height attributes inside a flex row - which is exactly how
      the header logo is marked up - so the logo icon vanished. Raster
      media still gets height:auto; SVG only gets a max-width bound.
   ============================================================ */

/* 1. Borders and padding count inside declared widths. */
*, *::before, *::after { box-sizing: border-box; }

/* 2. Never let the page scroll sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* 3. Raster media shrinks rather than forcing the page wider. */
img, video, canvas, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* 3b. Inline SVG: bound the width but never touch height - an explicit
       height is load-bearing for icons in flex rows. */
svg { max-width: 100%; }

/* 4. Long unbroken strings (URLs, emails, keys) are a common overflow
      source. Restricted to block text containers: applying this to
      inline elements breaks flex sizing (see note above). */
p, li, dd, dt, td, th, blockquote, pre, code {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 4b. Headings may break only at very small widths, where a long word
       genuinely cannot fit. */
@media (max-width: 480px) {
    h1, h2, h3 { overflow-wrap: break-word; }
}

/* 5. Navigation must never wrap mid-word, at any width. */
.nav-links a,
.nav-cta,
.logo,
.logo-text,
nav a {
    white-space: nowrap;
}

/* 5b. The logo is a flex item competing with a long nav list. Without an
       explicit flex-shrink:0 the browser is free to squeeze the 40x40 icon
       down to nothing once the nav runs out of room - which is exactly what
       happened at 1440px, leaving only the wordmark. */
.logo { flex-shrink: 0; }
.logo svg,
.logo img { flex-shrink: 0; width: 40px; height: 40px; }

/* 5c. Let the nav itself absorb the pressure instead. */
.nav-links { min-width: 0; }

/* 5d. Tablet dead zone.
       styles.css hides .nav-links at max-width:1024px, but mobile.css only
       reveals .mobile-menu-btn at max-width:768px. Between 769px and 1024px
       the page therefore had NO navigation at all - no links and no
       hamburger. Show the existing mobile menu across that whole range. */
@media (max-width: 1024px) {
    .mobile-menu-btn,
    .mobile-nav-actions { display: flex !important; }

    /* Only the OPEN state is enabled here. A blanket `display: block` pins
       the panel permanently on screen, because index.html's own inline
       stylesheet lays this element out as a full-width dropdown with
       `left: 0; right: 0` and toggles it purely via `display`. Enabling
       display without that class left it open on every page load. */
    .mobile-menu.open,
    .mobile-menu.active { display: block; }
}

/* 5e. The desktop nav carries eight links plus Sign In, a language switcher
       and a CTA. With a fixed spacing-xl gap that row is wider than the
       viewport well past 1440px, so flex collapsed the gaps unevenly and
       "For Executive Coaches" ran into "Sign In".

       A fluid gap keeps every item - nothing is dropped or hidden - and
       scales the spacing to whatever room actually exists. */
@media (min-width: 1025px) {
    .nav-links {
        gap: clamp(14px, 1.45vw, 32px);
        flex-wrap: nowrap;
    }
    .nav-links a { font-size: clamp(13px, 0.95vw, 15px); }

    /* Keep a guaranteed gutter between the three nav groups. */
    .nav-content { gap: clamp(16px, 2vw, 40px); }
}

/* 6. Code blocks scroll internally. */
pre { overflow-x: auto; max-width: 100%; }

@media (max-width: 768px) {
    /* 7. Wide tables scroll within themselves; markup untouched. */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 8. Multi-column grids collapse to one column. Scoped to real grid
          containers so it cannot hit unrelated class names. */
    [class*="-grid"]:not(.hero-mockups *):not(.showcase-content *),
    [class*="grid-"]:not(.hero-mockups *):not(.showcase-content *) {
        grid-template-columns: 1fr !important;
    }

    /* 9. Anything that pinned a desktop pixel width becomes fluid. */
    [style*="width:"][style*="px"]:not(.hero-mockups *):not(.showcase-content *) { max-width: 100% !important; }
}

/* 10. Very small phones (iPhone SE and similar). */
@media (max-width: 380px) {
    body { font-size: 15px; }
}


/* The hero is a two-column grid declared inline (grid-template-columns:
   1fr 1fr), so the generic grid rule above cannot reach it. Below the
   desktop nav breakpoint it has to stack, otherwise the copy is squeezed
   into a narrow column and the mockups are pushed off-screen. */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}
@media (max-width: 768px) {
    .hero-title { font-size: clamp(2rem, 8.5vw, 2.75rem) !important; }
    .hero-description { max-width: 100% !important; }
}

/* Inline-declared grids. Several sections set grid-template-columns in a
   style attribute, so the class-based rule above cannot reach them. The
   hero's feature list is repeat(3, auto) with items like "White-label
   client apps (Web, iOS, Android, Watch)", which is far wider than a
   phone and was dragging the whole hero past the viewport edge. */
@media (max-width: 768px) {
    [style*="grid-template-columns: repeat(3"]:not(.hero-mockups *):not(.showcase-content *),
    [style*="grid-template-columns: repeat(4"]:not(.hero-mockups *):not(.showcase-content *),
    [style*="grid-template-columns: 1fr 1fr"]:not(.hero-mockups *):not(.showcase-content *) {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    }
}
@media (max-width: 480px) {
    [style*="grid-template-columns: repeat(3"]:not(.hero-mockups *):not(.showcase-content *),
    [style*="grid-template-columns: repeat(4"]:not(.hero-mockups *):not(.showcase-content *),
    [style*="grid-template-columns: 1fr 1fr"]:not(.hero-mockups *):not(.showcase-content *) {
        grid-template-columns: 1fr !important;
    }
}

/* Grid children must be allowed to shrink, or any wide descendant (a
   scroller, a long unbroken row) pushes the whole grid past the viewport. */
@media (max-width: 1024px) {
    .hero-grid > * { min-width: 0; }
}

/* The feature-showcase tab row is wider than a phone. Let it scroll
   horizontally instead of stretching the page. */
@media (max-width: 768px) {
    .showcase-tabs,
    [class*="showcase-tab"]:not(button) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .showcase-tabs::-webkit-scrollbar { display: none; }
}


/* ============================================================
   Hero mockups
   ============================================================
   The three mockups used to carry their positioning in inline style
   attributes, which meant every mobile override had to fight them with
   !important and still lost in places. Positioning now lives here, so each
   breakpoint owns its own layout outright.

   Desktop keeps the original overlapping stack. Below 768px it becomes a
   snap-scrolling carousel led by the phone and watch - what a client
   actually uses - with the coach's desktop dashboard following on scroll.
   Nothing is hidden; only the layout mode changes.
   ============================================================ */
@media (min-width: 769px) {
    .hero-mockups      { position: relative; height: 750px; }
    .hero-mock-desktop { position: absolute; top: 0; right: -80px; width: 680px; }
    .hero-mock-phone   { position: absolute; bottom: 20px; left: 20px; width: 240px; }
    .hero-mock-watch   { position: absolute; bottom: 80px; left: 235px; }
}

@media (max-width: 768px) {
    .hero-mockups {
        position: relative;
        height: auto;
        display: flex;
        align-items: center;
        gap: 16px;
        /* A grid item will not shrink below its content unless min-width is
           reset, so without this the row widens the page instead of
           scrolling inside itself. */
        min-width: 0;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 12px 16px 24px;
        scrollbar-width: none;
    }
    .hero-mockups::-webkit-scrollbar { display: none; }

    /* relative, not static: each mockup is the containing block for its own
       absolutely-positioned details (the phone's Dynamic Island and status
       bar, the watch's crown). */
    .hero-mock {
        position: relative;
        flex: 0 0 auto;
        scroll-snap-align: center;
    }
    .hero-mock-phone   { order: 1; width: 240px; }
    .hero-mock-watch   { order: 2; }

    /* Built at a fixed 680px with fixed inner columns, so it cannot reflow.
       zoom scales the layout box too, which transform would not. */
    /* Scaled for legibility rather than to fit: the row already pans
       horizontally, so the whole composition stays readable at true
       proportions instead of being shrunk to a thumbnail. */
    .hero-mock-desktop { order: 3; width: 680px; zoom: 0.85; }
}

@media (max-width: 400px) {
    .hero-mock-desktop { zoom: 0.75; }
}

/* The mockups are fixed-design illustrations, not fluid layouts. Nothing
   inside them may be reflowed by the generic mobile rules above: the coach
   dashboard is built from fixed pixel columns and loses its entire layout if
   its grids are stacked. They are scaled with zoom instead, so the mobile
   carousel shows exactly the desktop composition, just smaller. */
@media (max-width: 768px) {
    .hero-mockups * {
        max-width: none;
        overflow-wrap: normal;
        word-wrap: normal;
    }
}

/* ============================================================
   Feature showcase previews
   ============================================================
   Each preview is a fixed desktop composition - .dashboard-layout is a
   `220px 1fr` grid inside a browser frame - so it cannot reflow into a
   phone. The existing mobile rule used transform: scale(0.85), which
   shrinks the painted result but not the layout box, so the frame still
   claimed desktop width and its right-hand side was cut off.

   Scaled with zoom instead, which shrinks the box too, so the whole
   dashboard is visible exactly as it appears on desktop. The wrapper can
   still pan horizontally as a fallback on very narrow screens.
   ============================================================ */
@media (max-width: 768px) {
    .showcase-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .showcase-content::-webkit-scrollbar { display: none; }

    .showcase-content .browser-frame {
        width: 1000px;
        max-width: none !important;
        /* Overrides the transform: scale(0.85) further up the cascade, which
           would otherwise compound with this. */
        transform: none !important;
        zoom: 0.80;
    }

    /* Keep the desktop composition intact rather than stripping it back. */
    .showcase-content .dashboard-layout { grid-template-columns: 220px 1fr !important; }
    .showcase-content .dashboard-sidebar { display: block !important; }
    .showcase-content * { max-width: none; }
}

@media (max-width: 560px) { .showcase-content .browser-frame { zoom: 0.72; } }
@media (max-width: 400px) { .showcase-content .browser-frame { zoom: 0.62; } }

/* ============================================================
   Mockup interiors keep their desktop proportions
   ============================================================
   index.html's own mobile block rewrites layouts with generic
   attribute selectors such as

       div[style*="grid-template-columns: repeat(4, 1fr)"] { ... 2 columns }
       div[style*="grid-template-columns"]                 { ... flex column }

   Those match inside the hero mockups and the feature previews too, so the
   dashboards were being re-laid-out on mobile: a four-across stat row became
   two-by-two, side-by-side panels stacked, and the composition no longer
   matched the product. The mockups are meant to be scaled, not reflowed.

   Each inline grid value that actually occurs inside a mockup is restored
   below, at higher specificity than the generic rules and from a stylesheet
   that loads last.
   ============================================================ */
@media (max-width: 1024px) {
    .hero-mockups [style*="grid-template-columns: 1.5fr 1fr"],
    .showcase-content [style*="grid-template-columns: 1.5fr 1fr"] {
        grid-template-columns: 1.5fr 1fr !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: 1.6fr 1fr"],
    .showcase-content [style*="grid-template-columns: 1.6fr 1fr"] {
        grid-template-columns: 1.6fr 1fr !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: 100px 200px 1fr 220px"],
    .showcase-content [style*="grid-template-columns: 100px 200px 1fr 220px"] {
        grid-template-columns: 100px 200px 1fr 220px !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: 160px 1fr"],
    .showcase-content [style*="grid-template-columns: 160px 1fr"] {
        grid-template-columns: 160px 1fr !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: 180px 1fr"],
    .showcase-content [style*="grid-template-columns: 180px 1fr"] {
        grid-template-columns: 180px 1fr !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: 1fr 0.6fr 1.2fr"],
    .showcase-content [style*="grid-template-columns: 1fr 0.6fr 1.2fr"] {
        grid-template-columns: 1fr 0.6fr 1.2fr !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: 1fr 1fr"],
    .showcase-content [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: 1fr 200px"],
    .showcase-content [style*="grid-template-columns: 1fr 200px"] {
        grid-template-columns: 1fr 200px !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: 1fr 320px"],
    .showcase-content [style*="grid-template-columns: 1fr 320px"] {
        grid-template-columns: 1fr 320px !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: 1fr 400px"],
    .showcase-content [style*="grid-template-columns: 1fr 400px"] {
        grid-template-columns: 1fr 400px !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: 280px 1fr"],
    .showcase-content [style*="grid-template-columns: 280px 1fr"] {
        grid-template-columns: 280px 1fr !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"],
    .showcase-content [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: 300px 1fr"],
    .showcase-content [style*="grid-template-columns: 300px 1fr"] {
        grid-template-columns: 300px 1fr !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: 380px 1fr"],
    .showcase-content [style*="grid-template-columns: 380px 1fr"] {
        grid-template-columns: 380px 1fr !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: repeat(2, 1fr)"],
    .showcase-content [style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: repeat(3, 1fr)"],
    .showcase-content [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: repeat(4, 1fr)"],
    .showcase-content [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(4, 1fr) !important;
        display: grid !important;
    }
    .hero-mockups [style*="grid-template-columns: repeat(7, 1fr)"],
    .showcase-content [style*="grid-template-columns: repeat(7, 1fr)"] {
        grid-template-columns: repeat(7, 1fr) !important;
        display: grid !important;
    }

    /* The same generic rules also hide pieces of the mockups outright. */
    .hero-mockups [style*="border-top: 1px dashed"],
    .showcase-content [style*="border-top: 1px dashed"],
    .hero-mockups [style*="display: flex"][style*="gap: 32px"],
    .showcase-content [style*="display: flex"][style*="gap: 32px"],
    .hero-mockups [style*="display: flex"][style*="justify-content: center"],
    .showcase-content [style*="display: flex"][style*="justify-content: center"] {
        display: flex !important;
    }

    /* Restore icon sizing and the small labels inside preview toolbars. */
    .hero-mockups svg,
    .showcase-content svg { width: revert-layer; height: revert-layer; }
    .hero-mockups span,
    .showcase-content span { display: revert-layer; }
}

/* The "What this means for you" benefit lists repeat the point already made
   by the heading and body copy above them, and on a phone they push the
   product preview a long way down the page. Hidden below the tablet
   breakpoint; untouched on desktop. */
@media (max-width: 768px) {
    .benefits-block { display: none !important; }
}