/* ══════════════════════════════════════════════════════════════════════
   Blinki — mobile pass  (24 Aug 2026)

   Single source of truth for small-screen behaviour. Linked AFTER site.css
   on every page, and on index.html (which carries its own stylesheet and
   does not link site.css at all).

   Rule: nothing in here may change the desktop rendering. Everything is
   inside a max-width media query, except the drawer chrome — which is
   display:none until the ≤980px query turns it on.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- mobile nav drawer (site.css has these too; index.html does not) */
.nav-burger{display:none;background:transparent;border:0;padding:8px;cursor:pointer;color:var(--ink)}
.nav-burger svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-drawer{display:none;position:fixed;inset:0;z-index:1000;background:var(--paper,var(--bg,#F7F7F6));overflow-y:auto;padding:76px 22px 40px}
.nav-drawer.show{display:block}
.nav-drawer .close{position:absolute;top:14px;right:16px;background:transparent;border:0;padding:8px;cursor:pointer;color:var(--ink)}
.nav-drawer .close svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-drawer .section{border-bottom:1px solid var(--line,rgba(128,128,128,.22));padding:12px 0}
.nav-drawer .section summary{font-weight:700;font-size:18px;letter-spacing:-.02em;cursor:pointer;list-style:none;padding:10px 0;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.nav-drawer .section summary::-webkit-details-marker{display:none}
.nav-drawer .section summary::after{content:"+";font-size:24px;font-weight:400;color:var(--coral,var(--clay,#E0653C))}
.nav-drawer .section[open] summary::after{content:"−"}
.nav-drawer .section .links a{display:block;padding:11px 0;color:var(--ink-2);font-size:15.5px;text-decoration:none}
.nav-drawer .section .links h6{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:12px 0 6px}
.nav-drawer .drawer-flat{display:block;font-weight:700;font-size:18px;letter-spacing:-.02em;padding:14px 0;color:var(--ink);text-decoration:none}
.nav-drawer .drawer-call{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;padding:13px 16px;border:1.5px solid var(--ink);border-radius:999px;font-weight:700;font-size:15px;color:var(--ink);text-decoration:none}
.nav-drawer .cta-row{display:flex;gap:10px;margin-top:22px}
.nav-drawer .cta-row .btn{flex:1;justify-content:center}
@media (max-width:980px){
  .nav-links{display:none}
  .nav-burger{display:inline-flex;margin-left:auto}
}

@media (max-width:700px){
  /* ---------- page-wide guards ---------- */
  html,body{overflow-x:hidden;max-width:100%}
  img{max-width:100%;height:auto}

  /* ---------- grids that were still multi-column on a phone ---------- */
  .aigrid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
  .nm-list,.ba,.mggrid,.dp-grid,.plgrid,.pz-grid,
  .incl-grid,.steps4,.f-row,.pz-list{grid-template-columns:1fr!important}
  .plgrid,.pz-grid{max-width:100%!important}
  .bfyband{grid-template-columns:1fr!important;padding:30px 22px!important}

  /* ---------- type ---------- */
  h1,h2,h3{overflow-wrap:break-word;word-break:normal}
  .hl{white-space:normal;display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}

  /* ---------- buttons: side-by-side pairs never fit ---------- */
  .ctas{flex-direction:column;align-items:stretch}
  .ctas .btn{width:100%;justify-content:center}

  /* ---------- tap targets ---------- */
  details summary{padding-top:13px;padding-bottom:13px}

  /* ---------- footer ---------- */
  .foot .wrap{padding:0 20px}
  .foot-grid,.foot-cols{grid-template-columns:1fr!important;gap:0!important;margin-bottom:26px}
  .foot-grid>div+div,.foot-cols>div+div{border-top:1px solid rgba(128,128,128,.22);margin-top:16px;padding-top:16px}
  .foot h6{margin:0 0 4px}
  .foot a{margin:0;padding:11px 0;font-size:15.5px}
  .foot-tag{max-width:none}
  .foot-trust{display:flex!important;width:100%;border-radius:14px;padding:11px 13px;line-height:1.35;align-items:center}
  .foot-bot{flex-direction:column;align-items:flex-start;gap:8px}

  /* ---------- pricing: built-for-you figure rows ----------
     The labels carry desktop <br>s and were wrapping to four lines inside a
     squeezed flex column. Stack label over figure instead. */
  .bfynum{flex-wrap:wrap;padding:14px 16px;gap:2px}
  .bfynum span{flex:1 0 100%}
  .bfynum span br{display:none}

  /* ---------- migration: platform tiles are small logos, 2-up reads better
     than one giant tile per platform ---------- */
  .mggrid{grid-template-columns:repeat(2,1fr)!important}
  .mgmore{grid-column:1/-1}

  /* ---------- contact: a QR code is useless on the device you'd scan with.
     Hide it and let the button do the work. ---------- */
  .ctqr,.ctcap,.rqr,.rcap{display:none!important}
  .ctgo .btn,.ctgo a{width:100%;justify-content:center}
  .ctval,.rval{display:inline-block;padding:6px 0!important}
  .note a,.fine a,.micro a{display:inline-block;padding:6px 0}

  /* ---------- step headers: the hint sat on margin-left:auto and got
     crushed against the heading ---------- */
  .em-step-head{flex-wrap:wrap;align-items:center;gap:10px}
  .em-step-head .sub{margin-left:0;flex:1 0 100%;order:3}

  /* ---------- tap targets (44px is the floor on a phone) ---------- */
  .em-chip,.ph-chip{padding:9px 14px;font-size:13px}
  .nav .btn,.nav-right .btn{padding-top:10px;padding-bottom:10px}
  .em-card a,.em-need a,#em-need-domain{display:inline-block;padding:6px 0}

  /* ---------- homepage "everything else" tab switcher ----------
     width:fit-content + wrap left one pill on its own row and two below.
     Stack them instead so the three read as one control. */
  .tsd-tabs{width:100%;flex-direction:column;border-radius:18px;margin-bottom:28px;gap:4px}
  .tsd-tabs>*{width:100%;justify-content:center;text-align:center}
  .mk-stage{height:320px}
}