/* ==============================================================
   M-Chat Platform — v3.1 layer
   Responsive · Accessibility · Performance
   Loads AFTER mchat.css. Additive only.
   Delete this file + its <link> to revert completely.
   ============================================================== */

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root{
  --pad-x:clamp(1rem, 0.5rem + 2.2vw, 1.75rem);   /* 16px @360 → 28px @1024+ */
  --sec-y:clamp(3.5rem, 2rem + 5vw, 6rem);        /* 56px @360 → 96px @1440 */
  --tap:44px;
  --focus:var(--blue);
  --sh-focus:0 0 0 4px rgba(28,151,197,.22);
}

/* ---------------------------------------------------------------
   2. FLUID TYPE
   Lower mobile minimums so headlines never overflow at 360px.
   --------------------------------------------------------------- */
h1{font-size:clamp(2rem, 1.35rem + 2.9vw, 3.9rem)}
h2{font-size:clamp(1.6rem, 1.25rem + 1.6vw, 2.7rem)}
h3{font-size:clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem)}
.hero h1{font-size:clamp(2.15rem, 1.4rem + 3.3vw, 4.2rem)}
.lead{font-size:clamp(1.02rem, 0.98rem + 0.22vw, 1.15rem)}

/* Stop single-word orphans that fluid type creates on narrow screens */
h1,h2,h3,h4,.sec-head p{text-wrap:balance}
p,li{text-wrap:pretty}

/* Never let long unbroken strings blow out the layout */
h1,h2,h3,p,li,a,td{overflow-wrap:break-word}

/* Brand name must never break across lines */
.brandname{white-space:nowrap}

/* ---------------------------------------------------------------
   3. LAYOUT
   --------------------------------------------------------------- */
.wrap{padding-left:var(--pad-x);padding-right:var(--pad-x)}
section{padding-block:var(--sec-y)}
.hero{padding:clamp(2rem,1rem + 4vw,4.5rem) 0 clamp(3rem,1.5rem + 5vw,5.5rem)}

/* Use dynamic viewport units — mobile browser chrome makes vh wrong */
.mobile-menu{height:100dvh}

/* ---------------------------------------------------------------
   4. ACCESSIBILITY
   --------------------------------------------------------------- */

/* 4.1 Skip link */
.skip-link{
  position:fixed;left:12px;top:-60px;z-index:200;
  background:var(--blue);color:#fff;font-weight:700;font-size:.9rem;
  padding:.7rem 1.1rem;border-radius:0 0 10px 10px;transition:top .18s var(--ease);
}
.skip-link:focus{top:0}

/* 4.2 Visible focus on EVERYTHING interactive.
       The base build had no focus styles at all. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:6px;
}
.bg-dark a:focus-visible,
.bg-dark button:focus-visible,
.price-band a:focus-visible,
footer.site a:focus-visible{outline-color:var(--blue-sky)}
.fld:focus-visible{outline-offset:1px;box-shadow:var(--sh-focus)}

/* 4.3 Contrast repairs.
       Body copy on dark surfaces was ~3.2:1 — below the 4.5:1 AA floor. */
.bg-dark p,
.price-band p,
.price-band .anchor{color:rgba(255,255,255,.88)}
.ent-item{color:rgba(255,255,255,.95)}
.cohort .capline,.cred{color:rgba(255,255,255,.86)}
footer.site .foot-brand p{color:rgba(255,255,255,.78)}
footer.site .foot-col a{color:rgba(255,255,255,.86);font-weight:600}
footer.site .foot-col h4{color:rgba(255,255,255,.68)}
.foot-bottom{color:rgba(255,255,255,.72)}
.phone .greet small{color:var(--s700)}
.fld::placeholder{color:var(--s600)}

/* 4.4 Form labels (base build used placeholders only) */
.fieldset{border:0;display:grid;gap:12px}
.flabel{display:block;font-size:.82rem;font-weight:700;color:var(--s800);margin-bottom:6px}
.flabel .req{color:var(--error);margin-left:2px}
.fhelp{font-size:.8rem;color:var(--s600);margin-top:6px}

/* 4.5 Respect Windows High Contrast / forced colours */
@media (forced-colors:active){
  .btn,.route,.pcard,.step,.g6{border:1px solid ButtonBorder}
  .skip-link{border:1px solid ButtonBorder}
}

/* ---------------------------------------------------------------
   5. NAVIGATION
   --------------------------------------------------------------- */
.menu-btn{
  width:var(--tap);height:var(--tap);
  align-items:center;justify-content:center;border-radius:10px;
}
.menu-btn:hover{background:var(--s100)}
.mobile-menu{overflow-y:auto;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.mm-close{width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:10px}
.mm-links a{
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.7rem);
  min-height:56px;display:flex;align-items:center;
}
.mm-cta .btn{min-height:52px}
body.menu-open{overflow:hidden}

/* Move the mobile-nav breakpoint up — at 900–1020px the desktop nav is cramped */
@media (max-width:1023px){
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .menu-btn{display:flex}
  .nav{height:60px}
}
@media (min-width:1024px){
  .menu-btn{display:none}
  .mobile-menu{display:none!important}
}

/* ---------------------------------------------------------------
   6. TOUCH TARGETS
   Every tappable thing clears 44px below 1024px.
   --------------------------------------------------------------- */
@media (max-width:1023px){
  .foot-col a{min-height:var(--tap);display:flex;align-items:center;margin-bottom:2px}
  .foot-social a{width:var(--tap);height:var(--tap)}
  .textlink{min-height:var(--tap);align-items:center}
  .faq summary{min-height:56px;padding-block:16px}
  .btn{min-height:46px}
  .btn-lg{min-height:52px}
}
/* Real press feedback instead of the default tap flash */
a,button,summary,.route,.pcard,.jcell{-webkit-tap-highlight-color:transparent}
@media (hover:none){
  .btn:active{transform:scale(.98)}
  .route:active,.pcard:active,.rcard:active{transform:scale(.995)}
  /* Kill hover-lift on touch devices — it fires on tap and looks broken */
  .pcard:hover,.route:hover,.rcard:hover,.jcell:hover,.foot-social a:hover{transform:none}
}

/* ---------------------------------------------------------------
   7. HERO — mobile treatment
   Below 768px: one phone, static, no rotation. Badges stack beneath.
   --------------------------------------------------------------- */
@media (max-width:767px){
  .hero-grid{gap:8px}
  .hero .cta-row{margin-top:24px;gap:12px;flex-direction:column;align-items:stretch}
  .hero .cta-row .btn{justify-content:center;width:100%}
  .hero .cta-row .textlink{justify-content:center}
  .proof{margin-top:24px;gap:10px;flex-direction:column;align-items:flex-start}

  .shuffle{
    height:auto;min-height:0;padding:16px 0 0;
    display:flex;flex-direction:column;align-items:center;gap:12px;
  }
  .shuffle::before{inset:2% -2% 22% ;border-radius:28px}
  .phone{
    position:relative;left:auto;top:auto;
    transform:none!important;
    width:min(230px,62vw);
    order:1;cursor:default;
  }
  .phone[data-pos]:not([data-pos="0"]){display:none}
  .phone[data-pos="0"]{opacity:1;filter:none}
  .hbadge{
    position:static;transform:none!important;
    order:2;width:100%;max-width:320px;justify-content:flex-start;
  }
  .hbadge.bot{order:3}
}

/* ---------------------------------------------------------------
   8. GRIDS — full ladder, 360 → 1440
   --------------------------------------------------------------- */

/* 8.1 Six-up capability grid */
@media (max-width:1023px){ .grid6{grid-template-columns:repeat(3,1fr)} }
@media (max-width:767px){  .grid6{grid-template-columns:repeat(2,1fr);gap:10px} }
@media (max-width:479px){
  /* Six tiny squares are unusable at 360px — become horizontal rows instead */
  .grid6{grid-template-columns:1fr;gap:8px}
  .g6{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px}
  .g6 .gi{margin:0;flex:none}
  .g6 .gn{font-size:.9rem}
}

/* 8.2 Everything else */
@media (max-width:1023px){
  .process,.pos-grid,.why-grid,.impl{grid-template-columns:1fr 1fr}
  .ent-grid{gap:36px}
  .prod-grid,.road-grid,.route-grid,.case-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid>*:last-child:nth-child(odd),
  .road-grid>*:last-child:nth-child(odd),
  .case-grid>*:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:767px){
  .prod-grid,.road-grid,.route-grid,.case-grid,.cap3,
  .ent-grid,.price-band,.prod-block,.contact-grid{grid-template-columns:1fr!important;gap:22px}
  .prod-grid>*:last-child:nth-child(odd),
  .road-grid>*:last-child:nth-child(odd),
  .case-grid>*:last-child:nth-child(odd){grid-column:auto}
  .jgrid{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-brand{grid-column:1/-1}
  .sec-head{margin-bottom:32px}
  .sec-head.split-head{gap:20px}
  .cta-band{padding:26px 20px;flex-direction:column;align-items:flex-start}
  .cta-band .cb-r{width:100%}
  .cta-band .cb-r .btn{flex:1;justify-content:center}
}
@media (max-width:559px){
  .process,.process.two,.pos-grid,.why-grid,.impl,.ent-list,.fgrid{grid-template-columns:1fr}
  .jgrid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .slayer{padding:18px 34px 18px 18px}
  .slayer.l2,.slayer.l3,.slayer.l4{margin-left:0}
  .snum{right:8px;top:12px;transform:none}
  .pcard,.route,.rcard{padding:22px}
  .form-card{padding:22px}
  .price-band{padding:26px 20px;gap:26px}
  .cohort{padding:22px}
  .why{padding:18px 0 18px 18px}
}

/* 8.3 Card internals scale down but never below the legibility floor */
.pcard p,.route p,.rcard p,.step p{font-size:max(.9rem,14px)}
.g6 .gn,.jcell .jn{font-size:max(.8rem,13px)}

/* ---------------------------------------------------------------
   9. PRICING BAND
   --------------------------------------------------------------- */
.price-band .amt-lg{
  font-family:var(--display);font-weight:900;
  font-size:clamp(3rem,2rem + 6vw,5rem);
  line-height:.88;letter-spacing:-.01em;margin-top:6px;
}
.price-band .amt-lg small{
  font-family:var(--font);font-size:clamp(.9rem,.85rem + .2vw,1.05rem);
  font-weight:600;color:rgba(255,255,255,.8);letter-spacing:0;
}
.price-band .billing{font-size:.9rem;color:rgba(255,255,255,.82);margin-top:10px}

/* ---------------------------------------------------------------
   10. STICKY MOBILE CTA
   Highest-leverage mobile pattern for a WhatsApp-native business.
   --------------------------------------------------------------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:none;align-items:center;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--s200);
  transform:translateY(110%);
  transition:transform .32s var(--ease);
}
.sticky-cta.show{transform:none}
.sticky-cta .btn{flex:1;justify-content:center;min-height:48px}
.sticky-cta .sc-dismiss{
  width:40px;height:40px;flex:none;border:none;background:none;cursor:pointer;
  color:var(--s600);display:grid;place-items:center;border-radius:10px;
}
.sticky-cta .sc-dismiss:hover{background:var(--s100);color:var(--s900)}
@media (max-width:767px){
  .sticky-cta{display:flex}
  body.has-sticky-cta footer.site{padding-bottom:88px}
}

/* ---------------------------------------------------------------
   11. FORMS
   --------------------------------------------------------------- */
.fld{font-size:16px}          /* below 16px iOS zooms the whole page on focus */
select.fld{
  min-height:50px;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23617184' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
  padding-right:42px;
}
input.fld,textarea.fld{min-height:50px}

/* ---------------------------------------------------------------
   12. PERFORMANCE
   --------------------------------------------------------------- */

/* Reserve space so late-loading images cause zero layout shift */
img{height:auto}
.nav .logo{height:30px;width:auto;aspect-ratio:auto}

/* Skip rendering work for offscreen content */
footer.site{content-visibility:auto;contain-intrinsic-size:auto 640px}

/* The hero glow is a large paint area — contain it */
.shuffle::before{will-change:auto}

/* ---------------------------------------------------------------
   13. MOTION
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important}
  .sticky-cta{transition:none}
}

/* ---------------------------------------------------------------
   14. PRINT
   --------------------------------------------------------------- */
@media print{
  header.site,.mobile-menu,.sticky-cta,.shuffle,.skip-link,footer.site .foot-social{display:none!important}
  section{padding:18px 0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75rem;color:#555}
  .bg-dark,.price-band{background:#fff!important;color:#000!important}
  .bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark p,
  .price-band h2,.price-band p{color:#000!important}
}