/* Kondaro marketing site — mobile corrections.
 *
 * Loaded LAST on all four pages so it wins without !important where possible.
 * EVERYTHING here lives inside a media query: desktop must be byte-identical.
 *
 * Why a shared file rather than per-page edits: Home inlines its own CSS and
 * does NOT load site.css, so the mobile rules site.css already carried (.cform,
 * .grid-2, .stats…) never reached the home page. That is why the contact form
 * bled there specifically. One file every page loads removes that whole class
 * of divergence.
 */

/* ──────────────────────────────────────────────────────────────────────────
 * 1. HORIZONTAL OVERFLOW — the root cause behind three reported symptoms.
 *
 * A grid/flex child defaults to min-width:auto, so it refuses to shrink below
 * its content and pushes the page wider than the viewport. Once that happens:
 *   - pinch-zoom reveals a page wider than the screen ("looks weird")
 *   - section backgrounds are painted to viewport width while content runs
 *     past them, so a tinted band appears to stop halfway ("two-toned")
 *   - the contact form's inputs run off the right edge ("bleeds")
 * All three are the same bug. min-width:0 is the actual fix; overflow-x:hidden
 * is the belt to its braces, not a substitute.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .wrap, section, .nav-inner, .contact-card, .product-panel { min-width: 0; }
  /* Let every grid/flex child shrink instead of forcing the page wider. */
  .wrap > *, .hero-grid > *, .connect-grid > *, .cards > *, .dash-wide > *,
  .cform > *, .kgrid > *, .contrast > *, .wk > *, .bhkpi-grid > *,
  .daro-wrap > *, .herotiles > *, .subhero-grid > *, .frow > *,
  .grid-2 > *, .grid-3 > * { min-width: 0; }
  /* Nothing may be wider than the screen. */
  img, svg, video, canvas, table, pre { max-width: 100%; height: auto; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 1b. TWO-TONE DARK PANELS.
 * The dark blocks carry an OFF-CENTRE glow tuned for a wide (landscape) panel:
 *   - .product-panel::before is a teal glow pinned to the right (right:-10%,
 *     width:60%),
 *   - .hero / .brief-dark use radial gradients centred near the top-right
 *     (at 82% 6% / 88% -20%).
 * On a narrow, tall phone panel that off-centre falloff reads as a hard seam
 * down the middle — the reported "two-toned" background. Re-centring the glow
 * makes the falloff symmetric, so there is no vertical edge. Position only; the
 * colours are untouched.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* .product-panel::before is no longer handled here — it turned out to be a
     hard CLIP, not a mobile-only framing problem, and is fixed globally in the
     injected override (see build_site.py). Leaving a mobile-only copy would
     fight that fix at narrow widths. */
  .hero {
    background: radial-gradient(120% 80% at 50% -10%, #13243d 0%, #0e192a 48%, #0a1220 100%);
  }
  .brief-dark {
    background: radial-gradient(150% 130% at 50% -20%, #16283f 0%, #0e192a 52%, #0a1220 100%);
  }
  /* The green closing CTA band ("See it running on your own numbers…" on Home;
     each page words it differently). Solid green with a white glow
     child (.cta::before). It is centred horizontally already, but the glow is a
     `circle` sized to the box's short side and pulled up (top:-40%, height:170%)
     — on a tall phone band that puts a bright disc high-centre with a hard lower
     falloff, which reads as a lighter top / darker bottom split. Widen it into a
     broad, faint, centred wash so there is no visible edge. Same colour, just no
     seam. (This band is green, not navy, so #1578 did not touch it.) */
  .cta::before {
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 140%;
    background: radial-gradient(60% 55% at 50% 30%, rgba(255,255,255,.10), transparent 70%);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 2. TWO-COLUMN LAYOUTS -> ONE.
 * Collapsed together so a column never has to hold two of anything on a phone.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-grid, .connect-grid, .cards, .dash-wide, .product-grid,
  .kgrid, .contrast, .wk, .bhkpi-grid,
  .daro-wrap, .herotiles, .subhero-grid, .frow, .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Stat strips stay two-up rather than one — a single column of four tiles is a
 * lot of scrolling for very little information each. */
@media (max-width: 900px) {
  .mock-kpis, .dash-stats, .fc-stats, .stats, .wc-stats, .viz-chips {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 400px) {
  .dash-stats, .fc-stats, .stats { grid-template-columns: 1fr; }
}

/* ── KPI TILE GRIDS (.ktiles) — REMOVED ───────────────────────────────────────
 * This file is shared (home, platform, why-kondaro, crm and demo load it;
 * early-access and onboarding do not), and .ktiles now has no consumer in the
 * served set. There were two grids: the P&L one, replaced by .fin-wrap when the
 * Financials handoff landed on /platform, and the marketing one on
 * /why-kondaro, cut with the benchmarked-KPI tiles. The rules that lived here
 * (one column on phones, two-up on the tablet band, .ktile--optional hidden)
 * went with them.
 *
 * Note for whoever removes a component next: check_pages.py's class-resolution
 * check finds used-but-undefined, never defined-but-unused, so a shared-file
 * leftover like this one is invisible to it.
 * ──────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
 * 3. CONTACT FORM — the reported "bleed".
 * One column, and inputs sized border-box so padding cannot push them past
 * their container (the usual cause of a field overflowing its card).
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cform { grid-template-columns: 1fr; }
  .cform input, .cform textarea, .cform button, .cform select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .cfield, .cfield.full { grid-column: 1 / -1; min-width: 0; }
  .contact-card { padding-left: 20px; padding-right: 20px; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 4. NAV — the menu items were hidden with nothing in their place.
 * site.css sets .nav-links{display:none} on mobile and offers no replacement,
 * so Platform / Why Kondaro / Product were simply unreachable from a phone.
 * Rather than introduce a hamburger (new interaction, not in the design), the
 * bar wraps to a second row: logo + CTA on top, the three links centred below.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-inner { flex-wrap: wrap; row-gap: 2px; }
  .nav-links {
    display: flex;
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 26px;
    padding: 2px 0 4px;
  }
  .nav-links a { font-size: 14.5px; }
  /* The bar is taller now, so the hero must start lower or it hides under it. */
  .hero { padding-top: 150px; }
}
@media (max-width: 380px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 13.5px; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 5. THE ORBIT — "crowded".
 * Nodes are absolutely positioned on the ring and set white-space:nowrap, so
 * at phone widths a label like "Call tracking" is wide enough to reach the hub
 * and sit on top of the ring. Shrinking the nodes and the hub gives the ring
 * its clearance back without moving anything.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .orbit { max-width: 316px; }
  .orbit-node {
    padding: 6px 9px;
    gap: 6px;
    border-radius: 10px;
    font-size: 11.5px;
  }
  .orbit-node b { font-size: 11.5px; }
  .orbit-node .ni { width: 18px; height: 18px; }
  .orbit-hub-core { width: 84px; height: 84px; }
  .orbit-hub-core img { width: 36px; }
}
@media (max-width: 380px) {
  .orbit { max-width: 286px; }
  .orbit-node { padding: 5px 7px; font-size: 10.5px; }
  .orbit-node b { font-size: 10.5px; }
  .orbit-hub-core { width: 74px; height: 74px; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 6. FIXED-COLUMN ROWS.
 * These declare pixel columns (92px 1fr 44px 52px 50px) that sum past a narrow
 * screen. Let the row scroll inside its own container instead of widening the
 * page — a horizontally scrolling table is fine; a horizontally scrolling PAGE
 * is the bug in section 1.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .ptable, .daro-res, .fc-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .thead, .prow { grid-template-columns: 78px 1fr 40px 46px 44px; font-size: 12px; }
  .rh, .rr { grid-template-columns: 1fr 56px 56px; font-size: 12.5px; }
  .loc { grid-template-columns: 68px 42px 40px 1fr; font-size: 12px; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 7. ANCHOR LINKS LANDING UNDER THE FIXED NAV.
 * .nav is position:fixed and nothing sets scroll-margin anywhere, so jumping to
 * #contact or #platform scrolls the target to the very top of the viewport —
 * i.e. underneath the bar. Pre-existing on desktop too, but the two-row mobile
 * nav above makes it worse, so it is corrected here for the widths this file
 * owns. Left alone on desktop deliberately: that is a separate fix and not
 * something to change silently inside a mobile pass.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  html { scroll-padding-top: 112px; }
  [id] { scroll-margin-top: 112px; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 8. TAP TARGETS. Apple and Google both put the comfortable minimum around
 * 44px; .viz-chip lands near 40 and .dfore-chip near 32, which is a miss-prone
 * target on a phone even though it looks fine on a trackpad.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .viz-chip, .dfore-chip, .daro-chip, .nav-links a, .foot-actions a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Keep the chips visually compact — the touch area grows, not the pill. */
  .viz-chip, .dfore-chip { padding-top: 0; padding-bottom: 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 9. TYPE AND SPACING — headings sized for a 1400px canvas are shouty at 390px,
 * and the generous section padding turns into a lot of empty scrolling.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .why, .connect, .product, .bhkpi, .wkwrap { padding: 72px 0; }
  .sec-head { margin-bottom: 36px; padding: 0 20px; }
  .sec-head h2 { font-size: clamp(1.55rem, 7.2vw, 2.1rem); }
  /* "Get in touch" pill crammed into the "Talk to us…" heading. On a centred
     section head the pill sits directly above the h2; the outline pill is a bit
     shorter than the old filled chip and the big mobile heading tightened the
     gap. Give the pill clear space below and let the heading breathe. */
  /* CORRECTION: the previous pass set this to 16px, which is TIGHTER than the
     22px the base .sec-pill already had — so the "fix" for the cramming made it
     worse. The pill needs MORE room below it, not less. */
  .sec-head--center .sec-pill,
  .sec-head--center .sec-eyebrow { margin-bottom: 28px; }
  .sec-head--center h2 { margin-top: 0; line-height: 1.1; }
  /* The contact section's own top room, since the green CTA band butts right
     up against it. */
  #contact .sec-head, .contact .sec-head { padding-top: 8px; }
  .contact { padding-left: 0; padding-right: 0; }
  .foot-grid { gap: 26px; }
  .foot-actions { flex-wrap: wrap; gap: 12px; }
}