/* magic-v2 usability and typography polish; scoped to this template only. */
@font-face {
  font-family: "HAPP Inter";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
html { scroll-padding-top: 100px; }
body {
  font-family: "HAPP Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(#benefits,#plans,#how,#devices,#faq,#reviews,#support) { scroll-margin-top: 105px; }
.top .brand { display:block; flex:0 0 auto; transition: opacity .2s ease; }
.top .brand:hover { opacity:.78; }
.top .links a { transition:color .2s ease; }
.top .links a:hover { color:var(--blue); }
.hero h1 { line-height:1.03; letter-spacing:-.052em; }
.hero .lead { line-height:1.55; }
:where(a,button,summary):focus-visible { outline:3px solid #176fe0; outline-offset:4px; border-radius:5px; }
.review-avatar { object-fit:cover; }
.mobile-section-links { display:none; }
.footlinks a:hover { color:var(--blue); text-decoration:underline; }
@media (max-width:860px) {
  .mobile-section-links {
    display:flex; gap:20px; padding:11px 20px 12px;
    align-items:center; overflow-x:auto; white-space:nowrap;
    scrollbar-width:thin; background:#f5f9ff;
    border-bottom:1px solid #dae6f2;
    color:#294665; font-size:13px; font-weight:700;
    -webkit-overflow-scrolling:touch;
  }
  .mobile-section-links a { flex:0 0 auto; min-height:24px; }
  .mobile-section-links a:hover { color:var(--blue); }
  .hero h1 { letter-spacing:-.035em; }
}
@media (max-width:390px) {
  .top .nav { gap:8px; }
  .top .logo { font-size:22px; }
  .top .login-link { font-size:12px; }
  .top .navbtn { padding:10px 10px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .top .brand, .top .links a { transition:none; }
}


/* magic-v2 devices layout v3 — balanced desktop and mobile composition. */
#devices.devices {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-top:38px;
  padding:34px 28px 30px;
  border:1px solid #e3edf5;
  border-radius:26px;
  background:linear-gradient(180deg,#f2f8fc 0%,#f7fbfe 100%);
  box-shadow:0 10px 32px rgba(18,56,91,.035);
  scroll-margin-top:110px;
}
#devices.devices > :first-child {
  width:100%;
  max-width:650px;
  min-width:0;
  text-align:center;
}
#devices.devices h3 {
  font-size:clamp(22px,2.5vw,29px);
  line-height:1.18;
  letter-spacing:-.025em;
  margin-bottom:9px !important;
}
#devices.devices > :first-child p {
  font-size:15px;
  line-height:1.5;
}
#devices .device-list {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  justify-items:center;
  align-items:start;
  gap:12px;
  width:100%;
  min-width:0;
  max-width:810px;
}
#devices .device {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-width:0;
  gap:10px;
  color:#34495e;
  font-size:14px;
  line-height:1.3;
  text-align:center;
}
#devices .device b {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:66px;
  height:66px;
  margin:0;
  border-radius:19px;
  box-shadow:0 8px 18px rgba(16,50,88,.07);
}
#devices .device b svg {
  width:31px;
  height:31px;
}
@media (max-width:700px) {
  #devices.devices {
    padding:27px 18px 24px;
    gap:22px;
    border-radius:23px;
  }
  #devices .device-list {
    grid-template-columns:repeat(6,minmax(0,1fr));
    max-width:460px;
    gap:20px 5px;
  }
  #devices .device { grid-column:span 2; }
  #devices .device:nth-child(4) { grid-column:2 / span 2; }
  #devices .device:nth-child(5) { grid-column:4 / span 2; }
  #devices .device b { width:60px; height:60px; border-radius:18px; }
  #devices .device b svg { width:29px; height:29px; }
}
@media (max-width:420px) {
  #devices.devices {
    margin-top:30px;
    padding:24px 14px 22px;
    gap:21px;
  }
  #devices.devices h3 { font-size:22px; }
  #devices.devices > :first-child p { font-size:14px; }
  #devices .device-list { gap:18px 3px; }
  #devices .device { font-size:12px; gap:8px; }
  #devices .device b { width:54px; height:54px; border-radius:16px; }
  #devices .device b svg { width:27px; height:27px; }
}