/* ============================================================================
   Tally mobile navigation (Concept C) — active ≤880px, desktop untouched.
   Pairs with /assets/mobile-nav.js which builds the elements.
   Brand styles only: DM Sans / DM Serif Display, coral grad, navy.
   ========================================================================== */

/* ── Hamburger (left of the logo) ── */
.mnav-burger{display:none;background:none;border:none;cursor:pointer;padding:8px 10px 8px 0}
.mnav-burger i{display:block;width:21px;height:2.2px;background:#1A2A3A;border-radius:2px;margin:4.5px 0}
@media(max-width:880px){.mnav-burger{display:block}}

/* ── Full-screen sheet menu ── */
.mnav-sheet{position:fixed;inset:0;z-index:80;background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:70px 26px 30px;transform:translateY(-103%);transition:transform .32s cubic-bezier(.32,.72,.33,1);display:flex;flex-direction:column}
.mnav-sheet.open{transform:translateY(0)}
.mnav-sheet a.mbig{font-family:'DM Serif Display',serif;font-size:26px;color:#1A2A3A;text-decoration:none;padding:14px 0;border-bottom:1px solid #EEF2F6;display:flex;justify-content:space-between;align-items:baseline}
.mnav-sheet a.mbig small{font-size:12px;color:#B6C2CD;font-family:'DM Sans',sans-serif}
.mnav-ind{overflow:hidden;max-height:0;transition:max-height .25s ease}
.mnav-ind.open{max-height:240px}
.mnav-ind a{display:block;font-size:15px;color:#5A6E80;text-decoration:none;padding:11px 0 11px 16px;border-bottom:1px solid #F4F7FA;font-family:'DM Sans',sans-serif}
.mnav-cta{margin-top:auto;text-align:center;background:linear-gradient(135deg,#E8785A,#F4A088);color:#fff;border-radius:13px;padding:15px;font-weight:700;text-decoration:none;font-family:'DM Sans',sans-serif}
.mnav-x{position:absolute;top:14px;right:16px;background:none;border:none;font-size:24px;color:#1A2A3A;cursor:pointer}

/* ── Smart bottom CTA: hidden in hero, hides scrolling down, returns on up ── */
.smartbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;transition:transform .28s ease,opacity .28s ease;display:none}
@media(max-width:880px){.smartbar{display:block}}
.smartbar.hid{transform:translateY(150%);opacity:0}
.smartbar a{display:block;text-align:center;background:#2B4163;color:#fff;border-radius:14px;padding:14px;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 10px 26px rgba(26,42,58,.35);font-family:'DM Sans',sans-serif}
.smartbar a b{background:linear-gradient(135deg,#F4A088,#E8785A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── Mobile section carousels (elements present on the homepage) ── */
@media(max-width:880px){
  /* showcase: three slides = the three desktop columns, hierarchy preserved */
  .showcase-grid{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;align-items:center;padding:4px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .showcase-grid::-webkit-scrollbar{display:none}
  .showcase-cards-l,.showcase-cards-r{flex:0 0 74%;scroll-snap-align:center}
  .showcase-center{flex:0 0 88%;scroll-snap-align:center}
  .showcase-card{animation:none;margin-bottom:14px}
  .mshow-dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
  .mshow-dots i{width:6px;height:6px;border-radius:50%;background:#D7E0EA;transition:background .2s}
  .mshow-dots i.on{background:#E8785A}
}
@media(max-width:700px){
  /* steps + pricing plans swipe instead of stacking */
  .steps{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .steps>*{flex:0 0 78%;scroll-snap-align:center}
  .plans{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;max-width:none !important;padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .plans::-webkit-scrollbar{display:none}
  .plans>*{flex:0 0 82%;scroll-snap-align:center}
}

/* ── Hero: democard collapses to a compact CTA with its trust copy ── */
.mhero-cta{display:none;margin-top:18px}
.mhero-cta a{display:block;text-align:center;background:linear-gradient(135deg,#E8785A,#F4A088);color:#fff;border-radius:13px;padding:14px;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 8px 32px rgba(232,120,90,.25);font-family:'DM Sans',sans-serif}
.mhero-cta p{text-align:center;font-size:12px;color:#5A6E80;margin-top:8px;font-family:'DM Sans',sans-serif}
@media(max-width:880px){
  .democard{display:none !important}
  .mhero-cta{display:block}
}