/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 26 2026 | 18:13:42 */
/* SmartTrack phone and tablet layer. Loads after site.css and motion.css.
   Phones get a shorter page: tighter rhythm, compact mockups and swipeable rows instead of long stacks. */

/* ---------- tablet and phone ---------- */
@media (max-width:1020px){
  .band{padding-block:clamp(56px,8vw,88px)}
  .sec-head{margin-bottom:clamp(28px,5vw,44px)}
  .split+.split{margin-top:clamp(48px,8vw,80px)}
  .split-vis{padding:12px 0}
  .split-vis .mock,.split-vis .browser{max-width:560px;margin-inline:auto}
  .life{gap:28px}
  /* the mobile menu: a full-height sheet with large tap targets */
  .mnav.open{overscroll-behavior:contain;padding:10px 18px 22px}
  .mnav details{border-bottom:1px solid var(--line)}
  .mnav summary,.mnav>a:not(.btn){min-height:58px;padding:0 6px;font-size:1.08rem}
  .mnav summary svg{transition:transform .3s var(--ease-out)}
  .mnav details[open] summary svg{transform:rotate(180deg)}
  .mnav .sub{grid-template-columns:1fr 1fr;gap:6px;padding:4px 0 16px}
  .mnav .sub a{display:flex;align-items:center;min-height:46px;padding:8px 12px;border-radius:12px;background:var(--fog);font:600 .93rem/1.25 var(--display);color:var(--ink-2)}
  .mnav .sub a:active{background:var(--blue-50)}
  .mnav .sub .mgrp{grid-column:1/-1;margin:10px 4px 2px;font:700 .72rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .mnav .sub .mgrp:first-child{margin-top:2px}
  .mnav .sub a b{color:var(--blue)}
  .mnav>a.btn{min-height:52px}
  .mnav>a.btn-primary{margin-top:18px}
}

/* ---------- phone ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .band{padding-block:52px}
  .band.tight{padding-block:36px}
  h2{font-size:clamp(1.7rem,7.4vw,2.2rem)}
  .lead{font-size:1.02rem}
  .sec-head{gap:12px;margin-bottom:26px}

  /* hero: less height, thumb-sized buttons */
  .hero .hero-in{padding-top:calc(var(--hdr-h) + 40px);gap:28px}
  .hero h1{font-size:clamp(2.1rem,9.6vw,2.75rem);line-height:1.06}
  .phero h1{font-size:clamp(2rem,9vw,2.5rem)!important}
  .hero-copy{gap:16px}
  .hero .btn-row{flex-direction:column;align-items:stretch;width:100%}
  .hero .btn-row .btn{width:100%;height:54px}
  .hero-copy.center .btn-row{max-width:420px}
  .trust{gap:6px 14px;font-size:.84rem;justify-content:center}
  .hero-copy:not(.center) .trust{justify-content:flex-start}
  .pill{font-size:.8rem;padding:6px 12px 6px 6px}
  .rot{font-size:1rem}
  .phero .hero-in{padding-bottom:44px}
  .phero .pv .toast,.split-vis .toast{display:none}
  .phero .pv .phone{width:min(240px,64%)}

  /* home dashboard: just the essentials on a phone */
  .stage{padding-bottom:28px}
  .stage .grid2>:last-child,.stage .rows .row:nth-child(n+4){display:none}
  .stage .phone{width:30%;right:3%;bottom:-3%}

  /* short card rows (up to eight cards) become swipeable; longer directories stay as lists */
  .m-swipe{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-20px;padding:6px 20px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:none}
  .m-swipe::-webkit-scrollbar{display:none}
  .m-swipe>*{flex:0 0 84%;scroll-snap-align:center;min-width:0}
  .plans.m-swipe{padding-top:20px}
  .plans.m-swipe>*{flex-basis:86%}
  .app-card .vis{height:250px}
  .m-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
  .m-dots i{width:7px;height:7px;border-radius:99px;background:var(--line-2);transition:width .3s var(--ease-out),background .3s}
  .m-dots i.on{width:22px;background:var(--orange)}
  .navy .m-dots i{background:rgba(255,255,255,.25)}.navy .m-dots i.on{background:var(--orange)}
  .m-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;font:600 .78rem var(--display);color:var(--muted)}
  .navy .m-hint{color:var(--on-navy-2)}

  /* cards and lists: compact but easy to tap */
  .fcard,.step,.pain,.plan{padding:22px}
  .igrid{gap:10px}
  .icard{padding:12px;gap:10px;font-size:.93rem}
  .icard .ic{width:38px;height:38px;border-radius:11px}
  .link-arrow{padding-block:10px;margin-block:-10px}
  .faq summary{padding:18px 18px;font-size:1rem}
  .faq .a{padding:0 18px 18px}
  .lstep{padding:16px;grid-template-columns:44px 1fr;gap:12px}
  .lstep .n{width:44px;height:44px;border-radius:13px}
  .life-phone{max-width:200px}
  .life-steps.m-swipe{padding-left:20px}
  .life-steps.m-swipe::before,.life-steps.m-swipe::after{display:none}
  .life-steps.m-swipe>*{flex-basis:82%}
  .split-vis .phone{width:min(200px,54%)}
  .split-vis .glow{inset:10% 18%}
  .cta-band{padding:32px 22px;text-align:center}
  .cta-band .btn-row{flex-direction:column;align-items:stretch}
  .cta-band .btn{width:100%}
  .cmp-wrap{position:relative}
  .sizer{padding:20px}
  .included{columns:1}
  .marquee .track{animation-duration:45s}
  .pcard{width:200px;height:140px}

  /* hero background: a still gradient instead of the animated canvas, which drains phone batteries */
  .hero canvas.aurora{display:none}
  .hero{background:radial-gradient(120% 70% at 15% 0%,#14497a 0%,transparent 60%),radial-gradient(90% 60% at 100% 10%,rgba(255,94,24,.28) 0%,transparent 60%),var(--navy)}

  /* footer: tap-to-open groups */
  .ftr{padding-block:48px calc(28px + 76px)}
  .ftr-grid{grid-template-columns:1fr;gap:0}
  .ftr-grid>div:first-child{padding-bottom:20px}
  .ftr-grid>div:not(:first-child){border-top:1px solid rgba(255,255,255,.1)}
  .ftr h4{margin:0;min-height:54px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
  .ftr h4::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease-out)}
  .ftr .open h4::after{transform:rotate(-135deg) translateY(-2px)}
  .ftr-grid>div:not(:first-child) ul{display:none;padding-bottom:12px}
  .ftr-grid>div.open ul{display:grid}
  .ftr ul{gap:0}
  .ftr ul a{display:flex;align-items:center;min-height:44px}
  .ftr .bottom{flex-direction:column;margin-top:24px}

  /* sticky bottom bar: the two actions people want, within thumb reach */
  .m-bar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:55;display:flex;gap:8px;padding:8px;border-radius:20px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);box-shadow:0 18px 40px -16px rgba(3,14,30,.45),0 0 0 1px rgba(10,37,64,.08);transform:translateY(140%);transition:transform .45s var(--ease-out)}
  .m-bar.show{transform:none}
  .m-bar .btn{flex:1;height:48px;padding:0 12px;font-size:.95rem;border-radius:14px}
  .m-bar .btn-ghost{flex:.8}
  body.m-menu .m-bar{transform:translateY(140%)}

  /* forms: 16px text so iPhones don't zoom in */
  input,select,textarea{font-size:16px!important}
}
@media (min-width:761px){.m-bar,.m-dots,.m-hint{display:none}}

/* ---------- tablet ---------- */
@media (min-width:761px) and (max-width:1020px){
  .plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:none}
  .plan{padding:24px}
  .price b{font-size:2.5rem}
  .apps{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .app-card{padding:22px 20px 0}
  .app-card .vis .phone{width:160px}
  .phero .hero-in{grid-template-columns:1fr;text-align:left}
  .phero .pv{max-width:620px;margin:0 auto;width:100%}
  .igrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.m-bar{transition:none}}