:root {
  --page-bg: #ffffff;
  --hero-bg: #f6f9fc;
  --soft-bg: #f8fafc;
  --blue-band: #5b9be8;
  --blue-card: #5f9ff0;
  --blue-card-dark: #356eb5;
  --text: #103c67;
  --muted: #5b7288;
  --line: #e7edf3;
  --button: #78bb2f;
  --button-dark: #67a726;
  --navy: #155b8d;
  --shadow-soft: 0 20px 45px rgba(33, 64, 104, 0.08);
  --shadow-card: 0 14px 28px rgba(27, 74, 132, 0.09);
  --container: 1240px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--text);
  background: var(--page-bg);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.container {
  width: min(calc(100% - 40px), var(--container));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #edf2f7;
}

.header-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 82px;
}

.brand-logo {
  width: 176px;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  color: #4f6276;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-nav a:not(.button-small):hover,
.site-nav a:not(.button-small):focus-visible,
.footer-grid a:hover,
.footer-grid a:focus-visible,
.text-link:hover,
.text-link:focus-visible {
  color: var(--navy);
}

.site-nav .button-small,
.site-nav .button-small:hover,
.site-nav .button-small:focus-visible {
  color: #fff;
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.menu-toggle span {
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 999px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.button,
.button-secondary,
.button-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.button {
  min-height: 42px;
  padding: 0 28px;
  color: #fff;
  background: var(--button);
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(120, 187, 47, 0.24);
}

.button:hover,
.button:focus-visible {
  background: var(--button-dark);
  transform: translateY(-1px);
}

.button-secondary {
  min-height: 42px;
  padding: 0 24px;
  border-radius: 4px;
  border: 1px solid #d7e2ec;
  background: #fff;
  color: var(--text);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: #bfd0df;
  background: #fbfdff;
}

.button-small {
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--button);
  color: #fff;
}

.button-wide {
  width: 100%;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 34px 0 0;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    var(--hero-bg) 18%,
    #f5f8fb 100%
  );
}

.hero-compact {
  padding-bottom: 18px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(560px, 1.12fr);
  gap: 32px;
  align-items: center;
}

.feature-page-hero {
  min-height: 460px;
}

.hero-copy {
  padding: 24px 0 56px;
}

.eyebrow {
  margin: 0 0 14px;
  color: #57738f;
  font-size: 13px;
  font-weight: 700;
}

.hero h1,
.section-heading h2,
.compatibility-panel h2,
.download-panel h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 800;
}

.hero-title-primary,
.hero-title-accent {
  display: block;
}

.hero-title-accent {
  color: #69ad00;
}

.section-heading h2,
.compatibility-panel h2,
.download-panel h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.08;
}

.hero-text,
.section-heading p,
.compatibility-panel > div > p,
.download-panel > div > p,
.feature-item p,
.step-card p,
.testimonial-card p,
.faq-answer p,
.site-footer p,
.spotlight-card p,
.detail-card p,
.compatibility-cards p {
  color: var(--muted);
  line-height: 1.7;
}

.hero-text {
  max-width: 560px;
  margin: 22px 0 0;
  font-size: 15px;
}

.hero-points {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}

.hero-points li {
  position: relative;
  padding-left: 20px;
  color: #46647f;
  font-size: 15px;
  line-height: 1.55;
}

.hero-points li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
}

.hero-actions,
.download-actions,
.center-action {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-actions {
  margin-top: 28px;
}

.hero-note {
  margin: 12px 0 0;
  color: #76899b;
  font-size: 12px;
}

.hero-media {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0 28px;
}

.dashboard-card {
  position: relative;
  width: 100%;
  max-width: 900px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, #f0efeb 0%, #dfddd7 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.dashboard-glow {
  position: absolute;
  inset: auto auto 18px 26px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  filter: blur(26px);
}

.dashboard-card-plain {
  max-width: 430px;
}

.dashboard-window {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
}

.dashboard-shot {
  display: block;
  width: 100%;
  height: auto;
}

.monitoring-demo {
  padding: 14px;
  background: #f6f4f3;
}

.demo-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.demo-toolbar-copy strong {
  display: block;
  color: #111b33;
  font-size: 16px;
  font-weight: 800;
}

.demo-toolbar-copy p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 0;
  color: #617590;
  font-size: 10px;
}

.demo-toolbar-copy b {
  color: #1c2b4a;
}

.demo-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7abc31;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.75);
  flex: 0 0 auto;
}

.demo-toolbar-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.demo-action {
  min-height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.demo-action-muted {
  border: 1px solid #dde6ef;
  background: #ffffff;
  color: #20304c;
}

.demo-action-accent {
  background: #f56a13;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(245, 106, 19, 0.2);
}

.demo-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.demo-stat-card,
.demo-panel {
  border: 1px solid #e6ebf1;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(30, 55, 90, 0.04);
}

.demo-stat-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}

.demo-stat-copy span,
.demo-stat-copy small {
  display: block;
}

.demo-stat-copy span {
  color: #58708e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-stat-copy strong {
  display: block;
  margin-top: 8px;
  color: #121b34;
  font-size: 22px;
  line-height: 1.05;
  font-weight: 800;
}

.demo-stat-copy small {
  margin-top: 10px;
  color: #69809b;
  font-size: 10px;
}

.demo-stat-copy .alert-text {
  color: #ef3a2f;
}

.demo-stat-card:nth-child(3) .demo-stat-copy strong {
  font-size: 15px;
}

.demo-stat-icon,
.demo-feed-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex: 0 0 auto;
}

.demo-feed-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.demo-icon-orange {
  background: #fce9df;
}

.demo-icon-green {
  background: #edf4e2;
}

.demo-icon-blue {
  background: #e3eefc;
}

.demo-icon-red {
  background: #fde7e6;
}

.demo-stat-icon::before,
.demo-feed-icon::before,
.demo-stat-icon::after {
  content: "";
  position: absolute;
}

.demo-icon-orange::before {
  left: 11px;
  top: 9px;
  width: 14px;
  height: 18px;
  border-radius: 2px;
  background: #f56a13;
}

.demo-icon-orange::after {
  left: 14px;
  top: 14px;
  width: 8px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 4px 0 rgba(255, 255, 255, 0.9),
    0 8px 0 rgba(255, 255, 255, 0.9);
}

.demo-icon-green::before {
  left: 12px;
  top: 10px;
  width: 12px;
  height: 12px;
  border: 3px solid #75b928;
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 0 0 0 14px;
  transform: rotate(-45deg);
}

.demo-icon-blue::before {
  left: 11px;
  top: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2e6ce0;
}

.demo-icon-blue::after {
  left: 16px;
  top: 12px;
  width: 6px;
  height: 10px;
  background: #ffffff;
  clip-path: polygon(50% 0, 100% 35%, 75% 100%, 25% 100%, 0 35%);
}

.demo-icon-red::before {
  left: 13px;
  top: 8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 16px solid #ea3323;
}

.demo-icon-red::after {
  left: 20px;
  top: 13px;
  width: 2px;
  height: 6px;
  background: #ffffff;
  box-shadow: 0 8px 0 #ffffff;
}

.demo-main-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 12px;
  margin-bottom: 14px;
}

.demo-panel {
  padding: 14px;
}

.demo-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.demo-panel-head strong {
  color: #121b34;
  font-size: 13px;
  font-weight: 800;
}

.demo-panel-head span {
  color: #6a7f99;
  font-size: 10px;
  white-space: nowrap;
}

.demo-map-surface {
  position: relative;
  min-height: 164px;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.78) 0 1px,
      transparent 1px 14px
    ),
    linear-gradient(rgba(255, 255, 255, 0.78) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, #dddedd 0%, #efefef 45%, #d9dbdc 100%);
  background-size:
    14px 14px,
    14px 14px,
    cover;
}

.map-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      115deg,
      transparent 0 32%,
      rgba(255, 255, 255, 0.65) 32% 33%,
      transparent 33% 100%
    ),
    linear-gradient(
      48deg,
      transparent 0 58%,
      rgba(255, 255, 255, 0.85) 58% 59%,
      transparent 59% 100%
    );
}

.map-ping {
  position: absolute;
  border-radius: 50%;
}

.map-ping-main {
  left: 52%;
  top: 48%;
  width: 18px;
  height: 18px;
  background: #f56a13;
  box-shadow: 0 0 0 12px rgba(245, 106, 19, 0.12);
}

.map-ping-alt {
  left: 59%;
  top: 31%;
  width: 14px;
  height: 14px;
  background: #aab3bd;
  box-shadow: 0 0 0 6px rgba(170, 179, 189, 0.2);
}

.map-location-card {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(28, 43, 74, 0.08);
}

.map-location-card strong,
.map-location-card span {
  display: block;
}

.map-location-card strong {
  color: #18233c;
  font-size: 10px;
}

.map-location-card span {
  margin-top: 4px;
  color: #6f8298;
  font-size: 9px;
}

.usage-list {
  display: grid;
  gap: 14px;
}

.usage-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  align-items: center;
}

.usage-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #18233c;
  font-size: 11px;
  font-weight: 600;
}

.usage-row b {
  color: #18233c;
  font-size: 11px;
}

.usage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.usage-dot-orange {
  background: #f56a13;
}

.usage-dot-green {
  background: #79bb24;
}

.usage-dot-blue {
  background: #3f82f6;
}

.usage-dot-slate {
  background: #93a6be;
}

.usage-bar {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: 999px;
  background: #edf2f8;
  overflow: hidden;
}

.usage-fill {
  display: block;
  height: 100%;
}

.usage-fill-orange {
  background: #f56a13;
}

.usage-fill-green {
  background: #79bb24;
}

.usage-fill-blue {
  background: #3f82f6;
}

.usage-fill-slate {
  background: #93a6be;
}

.demo-feed-list {
  display: grid;
  gap: 8px;
}

.demo-feed-list article {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #edf1f5;
}

.demo-feed-list article:first-child {
  border-top: 0;
}

.demo-feed-copy strong {
  display: block;
  color: #18233c;
  font-size: 11px;
}

.demo-feed-copy p {
  margin: 4px 0 0;
  color: #6f8298;
  font-size: 10px;
  line-height: 1.4;
}

.demo-feed-list time {
  color: #8a99aa;
  font-size: 10px;
  white-space: nowrap;
}

.demo-feed-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #edf1f5;
  color: #f56a13;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.hero-orb-left {
  top: 10px;
  left: -140px;
  width: 240px;
  height: 240px;
  background: rgba(93, 157, 245, 0.16);
}

.hero-orb-right {
  right: -120px;
  top: 30px;
  width: 240px;
  height: 240px;
  background: rgba(128, 192, 54, 0.16);
}

.spotlight-band {
  padding: 0;
  background: var(--blue-band);
}

.three-up {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 38px;
  padding: 54px 0 64px;
}

.spotlight-card {
  padding: 34px 28px 28px;
  min-height: 286px;
  border-radius: 0;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.spotlight-card-featured {
  background: rgba(45, 98, 170, 0.65);
  border-color: transparent;
}

.spotlight-card h2,
.feature-item h3,
.step-card h3,
.testimonial-card h3,
.detail-card h2,
.compatibility-cards h3,
.site-footer h3 {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.spotlight-card p,
.spotlight-card a {
  color: rgba(255, 255, 255, 0.96);
}

.spotlight-card p {
  font-size: 15px;
}

.text-link {
  display: inline-flex;
  margin-top: 20px;
  padding: 11px 28px;
  border: 2px solid #f3f8ff;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.section {
  padding: 72px 0 78px;
}

.section-muted {
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f6f9 100%);
}

.section-heading {
  max-width: 760px;
  margin: 0 auto 48px;
}

.section-heading.center,
.center-action {
  text-align: center;
  justify-content: center;
}

.section-heading .eyebrow {
  margin-bottom: 8px;
}

.section-heading h2 {
  color: var(--text);
}

.section-heading p {
  margin: 10px auto 0;
  max-width: 620px;
  font-size: 13px;
}

.features-page-main {
  background: #ffffff;
}

.how-page-main {
  background: #ffffff;
}

.compat-page-main {
  background: #ffffff;
}

.faq-page-main {
  background: #ffffff;
}

.features-page-banner {
  padding: 52px 0 28px;
}

.how-page-banner {
  padding: 52px 0 28px;
}

.compat-page-hero {
  padding: 52px 0 26px;
  background: #eef8ff;
}

.faq-page-banner {
  padding: 52px 0 28px;
}

.features-page-banner-inner {
  padding: 68px 24px;
  text-align: center;
  background: #acd1f4;
}

.how-page-banner-inner {
  padding: 68px 24px;
  text-align: center;
  background: #acd1f4;
}

.compat-page-hero-inner {
  padding: 54px 24px 62px;
  text-align: center;
}

.faq-page-banner-inner {
  padding: 68px 24px;
  text-align: center;
  background: #acd1f4;
}

.features-page-banner-inner h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  line-height: 1.08;
  font-weight: 800;
}

.how-page-banner-inner h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  line-height: 1.08;
  font-weight: 800;
}

.compat-page-hero-inner h1 {
  max-width: 980px;
  margin: 0 auto;
  color: var(--navy);
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.faq-page-banner-inner h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  line-height: 1.08;
  font-weight: 800;
}

.features-page-banner-inner p {
  max-width: 760px;
  margin: 22px auto 0;
  color: #315c81;
  font-size: 15px;
  line-height: 1.75;
}

.how-page-banner-inner p {
  max-width: 760px;
  margin: 22px auto 0;
  color: #315c81;
  font-size: 15px;
  line-height: 1.75;
}

.compat-page-caption {
  margin: 30px 0 0;
  color: #4f6276;
  font-size: 15px;
  line-height: 1.7;
}

.faq-page-banner-inner p:last-child {
  max-width: 760px;
  margin: 22px auto 0;
  color: #315c81;
  font-size: 15px;
  line-height: 1.75;
}

.features-page-section {
  padding: 8px 0 74px;
}

.how-page-section {
  padding: 8px 0 32px;
}

.compat-page-section {
  padding: 72px 0 82px;
}

.faq-page-section {
  padding: 8px 0 82px;
}

.how-page-section-soft {
  padding: 10px 0 74px;
  background: #f8fbff;
}

.compat-page-band {
  background:
    linear-gradient(180deg, rgba(91, 155, 232, 0.96), rgba(63, 134, 224, 0.96)),
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.08) 0 8%,
      transparent 8% 100%
    );
}

.compat-page-band-inner {
  padding: 46px 24px 50px;
  text-align: center;
}

.compat-page-band-inner h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  font-weight: 800;
}

.compat-page-band-inner p {
  max-width: 900px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.8;
}

.features-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.how-page-steps,
.how-page-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.compat-page-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px;
}

.faq-page-shell {
  max-width: 920px;
}

.features-page-card {
  padding: 32px 26px 28px;
  border: 4px solid #b7daf8;
  background: #ffffff;
  text-align: center;
}

.how-page-step-card,
.how-page-detail-card {
  padding: 32px 28px 28px;
  border: 4px solid #b7daf8;
  background: #ffffff;
  text-align: center;
}

.compat-info-card {
  padding: 10px 0 0;
}

.features-page-card h2 {
  margin: 0 0 16px;
  color: #17253f;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}

.how-page-step-card h2,
.how-page-detail-card h2 {
  margin: 0 0 16px;
  color: #17253f;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}

.compat-info-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.compat-info-title h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.features-page-card p {
  margin: 0 0 12px;
  color: #5a6f83;
  font-size: 14px;
  line-height: 1.85;
}

.how-page-step-card p,
.how-page-detail-card p {
  margin: 0;
  color: #5a6f83;
  font-size: 14px;
  line-height: 1.85;
}

.compat-info-card > p {
  margin: 24px 0 0;
  color: #5a6f83;
  font-size: 14px;
  line-height: 1.85;
}

.features-page-card p:last-child {
  margin-bottom: 0;
}

.compat-device-lineup {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
  margin-top: 44px;
}

.compat-device {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(180deg, #5ea1ec 0%, #a9cff6 100%);
  box-shadow:
    0 16px 28px rgba(25, 73, 130, 0.12),
    inset 0 0 0 8px rgba(255, 255, 255, 0.38);
}

.compat-device::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.52);
}

.compat-device-tablet {
  width: 220px;
  height: 320px;
}

.compat-device-phone {
  width: 108px;
  height: 224px;
}

.compat-device-apple {
  opacity: 0.95;
}

.compat-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.compat-glyph-android {
  width: 54px;
  height: 54px;
  border-radius: 16px 16px 12px 12px;
  background: #ffffff;
}

.compat-glyph-android::before,
.compat-glyph-android::after {
  content: "";
  position: absolute;
}

.compat-glyph-android::before {
  left: 12px;
  top: -10px;
  width: 30px;
  height: 16px;
  border: 4px solid #ffffff;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
}

.compat-glyph-android::after {
  left: -10px;
  top: 16px;
  width: 74px;
  height: 24px;
  background:
    linear-gradient(#ffffff, #ffffff) left 0 top 0 / 8px 24px no-repeat,
    linear-gradient(#ffffff, #ffffff) right 0 top 0 / 8px 24px no-repeat,
    linear-gradient(#ffffff, #ffffff) left 18px bottom -20px / 8px 24px
      no-repeat,
    linear-gradient(#ffffff, #ffffff) right 18px bottom -20px / 8px 24px
      no-repeat;
}

.compat-glyph-apple {
  width: 68px;
  height: 76px;
  background: #ffffff;
  clip-path: path(
    "M45 8c4-3 7-8 7-8 0 0 1 6-3 11-4 4-10 3-10 3s-1-4 6-6zm8 36c0 15 13 20 13 20s-4 12-10 24c-5 10-11 20-20 20s-11-6-22-6-14 6-22 6-14-9-20-19C-7 77-14 49-2 30c8-14 22-18 31-18 9 0 17 6 22 6 5 0 15-7 27-6 5 0 20 2 29 16-1 1-17 10-17 34z"
  );
}

.compat-visual {
  position: relative;
  height: 320px;
  margin-top: 8px;
}

.compat-stack {
  position: absolute;
  bottom: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #141b25 0%, #2b3a50 100%);
  box-shadow: 0 18px 30px rgba(17, 37, 61, 0.15);
}

.compat-stack::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #4c8dd7 0%, #8bc0ff 100%);
}

.compat-stack-large {
  left: 38px;
  width: 178px;
  height: 242px;
}

.compat-stack-mid {
  left: 0;
  width: 124px;
  height: 178px;
}

.compat-stack-mid-alt {
  left: 182px;
  width: 126px;
  height: 184px;
}

.compat-stack-small {
  left: 104px;
  width: 82px;
  height: 146px;
}

.compat-stack-phone {
  left: 250px;
  width: 88px;
  height: 166px;
}

.compat-visual-apple .compat-stack::before {
  background: linear-gradient(180deg, #7fb6f6 0%, #d0e2ff 100%);
}

.compat-stack-tablet {
  left: 110px;
  width: 208px;
  height: 270px;
}

.compat-stack-tablet-front {
  left: 206px;
  width: 150px;
  height: 220px;
}

.compat-stack-iphone {
  left: 34px;
  width: 74px;
  height: 136px;
}

.compat-stack-iphone-small {
  left: 88px;
  width: 62px;
  height: 122px;
}

.compat-stack-watch {
  left: 0;
  width: 50px;
  height: 80px;
}

.compat-feature-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.compat-feature-list li {
  position: relative;
  padding-left: 18px;
  color: #4f6276;
  font-size: 14px;
  line-height: 1.7;
}

.compat-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #78bb2f;
}

.how-page-step-number {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 50%;
  background: #82bd39;
  color: #ffffff;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.features-page-icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: #82bd39;
}

.features-page-icon svg {
  width: 46px;
  height: 46px;
  fill: currentColor;
}

.feature-simple-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.feature-card {
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.feature-card h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.feature-summary {
  margin-top: 28px;
  text-align: center;
}

.download-stat {
  margin: 0 0 12px;
  color: var(--button-dark);
  font-size: 15px;
  font-weight: 700;
}

.logo-strip {
  padding: 18px 0 26px;
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f3 100%);
  border-top: 1px solid #ecefed;
  border-bottom: 1px solid #ecefed;
}

.logo-strip-label {
  margin: 0 0 16px;
  color: #9ca9b5;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.logo-strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
}

.logo-mark {
  width: 13px;
  height: 13px;
  display: inline-block;
  border-radius: 2px;
  opacity: 0.9;
}

.logo-word {
  color: #96a3ae;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.logo-mark-cyan {
  background: #8fd8e7;
}

.logo-mark-sand {
  background: #e8d4b2;
}

.logo-mark-slate {
  background: #6f7e8f;
}

.logo-mark-sky {
  background: #92d4f4;
}

.logo-mark-olive {
  background: #8fa86f;
}

.steps-grid,
.testimonial-grid,
.compatibility-cards,
.detail-grid,
.footer-grid {
  display: grid;
  gap: 18px;
}

.steps-grid,
.testimonial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.step-card,
.testimonial-card,
.detail-card {
  padding: 26px 22px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.step-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #e9f2ff;
  color: #4d89e8;
  font-size: 18px;
  font-weight: 800;
}

.step-card h3,
.testimonial-card h3 {
  margin-bottom: 10px;
  font-size: 16px;
}

.step-card p,
.testimonial-card p {
  margin: 0;
  font-size: 13px;
}

.center-action {
  margin-top: 28px;
}

.compatibility-panel,
.download-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 30px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fafcfe;
}

.compatibility-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compatibility-cards article {
  position: relative;
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

.compatibility-cards h3 {
  margin-bottom: 8px;
  font-size: 16px;
}

.compatibility-cards p {
  margin: 0;
  font-size: 12px;
}

.compatibility-icon {
  position: relative;
  width: 46px;
  height: 46px;
  display: inline-block;
  margin-bottom: 14px;
  border-radius: 14px;
}

.compatibility-icon::before,
.compatibility-icon::after {
  content: "";
  position: absolute;
}

.compatibility-icon-android {
  background: #edf7e3;
}

.compatibility-icon-android::before {
  left: 13px;
  top: 12px;
  width: 20px;
  height: 16px;
  border-radius: 8px 8px 6px 6px;
  background: #78bb2f;
}

.compatibility-icon-android::after {
  left: 17px;
  top: 8px;
  width: 12px;
  height: 8px;
  border: 2px solid #78bb2f;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.compatibility-icon-iphone {
  background: #eaf1ff;
}

.compatibility-icon-iphone::before {
  left: 15px;
  top: 9px;
  width: 16px;
  height: 28px;
  border-radius: 5px;
  border: 2px solid #3f82f6;
  background: #ffffff;
}

.compatibility-icon-iphone::after {
  left: 21px;
  bottom: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #3f82f6;
}

.compatibility-icon-dashboard {
  background: #fff1e7;
}

.compatibility-icon-dashboard::before {
  left: 10px;
  top: 12px;
  width: 26px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid #f56a13;
  background: #ffffff;
}

.compatibility-icon-dashboard::after {
  left: 16px;
  top: 19px;
  width: 14px;
  height: 2px;
  background: #f56a13;
  box-shadow:
    0 5px 0 #f56a13,
    -4px -5px 0 #f56a13;
}

.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.testimonial-meta img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-meta strong,
.testimonial-meta span {
  display: block;
}

.testimonial-meta strong {
  font-size: 13px;
}

.testimonial-meta span {
  color: #99a5af;
  font-size: 11px;
  text-transform: uppercase;
}

.faq-wrap {
  max-width: 860px;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid #e6edf3;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(22, 53, 92, 0.05);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.faq-question::after {
  content: "+";
  color: #7bb52f;
  font-size: 20px;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.faq-item.is-open .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 22px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
  transition:
    max-height 0.28s ease,
    opacity 0.2s ease,
    padding-bottom 0.2s ease;
}

.faq-item.is-open .faq-answer {
  max-height: 720px;
  opacity: 1;
  padding-bottom: 18px;
}

.faq-answer p {
  margin: 0;
  padding: 0;
}

.faq-page-action {
  margin-top: 30px;
}

.policy-page-main {
  background: #ffffff;
}

.policy-page-banner {
  padding: 52px 0 28px;
}

.policy-page-banner-inner {
  padding: 68px 24px;
  text-align: center;
  background: #acd1f4;
}

.policy-page-banner-inner h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  line-height: 1.08;
  font-weight: 800;
}

.policy-page-banner-inner p {
  max-width: 760px;
  margin: 22px auto 0;
  color: #315c81;
  font-size: 15px;
  line-height: 1.75;
}

.policy-page-section {
  padding: 8px 0 82px;
}

.policy-source {
  margin-bottom: 22px;
  padding: 18px 20px;
  border: 1px solid #dfeaf4;
  border-radius: 12px;
  background: #f8fbff;
}

.policy-source p {
  margin: 0;
  color: #5a6f83;
  font-size: 13px;
  line-height: 1.8;
}

.policy-source a {
  color: var(--navy);
  font-weight: 700;
}

.policy-grid {
  display: grid;
  gap: 18px;
}

.policy-card {
  padding: 28px 24px 24px;
  border: 1px solid #e3edf6;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(22, 53, 92, 0.05);
}

.policy-card h2 {
  margin: 0 0 14px;
  color: #17253f;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
}

.policy-card p,
.policy-card li {
  color: #5a6f83;
  font-size: 14px;
  line-height: 1.85;
}

.policy-card p {
  margin: 0 0 12px;
}

.policy-card p:last-child {
  margin-bottom: 0;
}

.policy-card ul {
  margin: 0;
  padding-left: 18px;
}

.policy-card li + li {
  margin-top: 8px;
}

.policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.policy-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #d7e2ec;
  border-radius: 999px;
  background: #ffffff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.policy-links a:hover,
.policy-links a:focus-visible {
  border-color: #bdd1e4;
  color: var(--button-dark);
}

.download-actions {
  justify-content: flex-end;
}

.detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-card h2 {
  margin-bottom: 10px;
  font-size: 18px;
}

.detail-card p {
  margin: 0;
  font-size: 13px;
}

.site-footer {
  border-top: 1px solid #edf1f5;
  background: #fff;
}

.footer-grid {
  grid-template-columns: 1.15fr 0.9fr 1fr;
  padding: 48px 0 30px;
}

.footer-logo {
  width: 150px;
  margin-bottom: 18px;
}

.footer-grid h3 {
  margin-bottom: 14px;
  color: var(--text);
  font-size: 15px;
}

.footer-grid a,
.footer-grid p {
  display: block;
  margin: 0 0 10px;
  font-size: 13px;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 0 34px;
  border-top: 1px solid #edf1f5;
  text-align: center;
}

.footer-bottom-simple {
  align-items: center;
  text-align: center;
}

.footer-bottom p {
  margin: 0;
  font-size: 12px;
}

.footer-bottom p:first-child {
  max-width: 1120px;
}

.site-nav a[aria-current="page"] {
  color: var(--navy);
}

.download-page-main {
  background:
    radial-gradient(circle at top left, rgba(91, 155, 232, 0.1), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #eef6fb 20%, #f7fafc 100%);
}

.download-page-hero {
  padding: 42px 0 24px;
}

.download-page-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.download-page-hero-inner h1 {
  margin: 0;
  font-size: clamp(2.35rem, 5.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.download-page-hero-inner p:last-child {
  max-width: 760px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.download-page-section {
  padding: 12px 0 72px;
}

.download-flow-card {
  padding: 32px;
  border: 1px solid rgba(16, 60, 103, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 28px 56px rgba(16, 60, 103, 0.08);
  backdrop-filter: blur(14px);
}

.download-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.download-progress-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #d8e7f3;
  background: #f8fbfe;
  color: #6f8497;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.download-progress-step strong,
.download-progress-step span {
  display: block;
}

.download-progress-step strong {
  font-size: 12px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.download-progress-step span {
  font-size: 13px;
  line-height: 1.3;
}

.download-progress-step::before {
  content: attr(data-progress-step);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e6eef6;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.download-progress-step.is-active {
  border-color: rgba(120, 187, 47, 0.35);
  background: rgba(120, 187, 47, 0.1);
  color: var(--text);
}

.download-progress-step.is-active::before {
  background: var(--button);
  color: #fff;
}

.download-progress-step.is-complete {
  border-color: rgba(120, 187, 47, 0.28);
  background: rgba(120, 187, 47, 0.08);
  color: var(--text);
}

.download-progress-step.is-complete::before {
  background: var(--button);
  color: #fff;
}

.download-flow-layout {
  max-width: 760px;
  margin: 0 auto;
}

.download-step {
  display: none;
}

.download-step.is-active {
  display: block;
}

.download-step-label {
  display: block;
  margin-bottom: 10px;
  color: #1ebfbf;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.download-step h2 {
  max-width: 540px;
  margin: 0 auto 28px;
  font-size: clamp(1.85rem, 3vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-align: center;
}

.download-step-intro {
  max-width: 640px;
  margin: -12px auto 28px;
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
}

.download-choice-grid,
.download-mode-grid {
  display: grid;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
}

.trial-choice-button,
.download-option,
.download-info-box {
  border: 1px solid #dce7f0;
  background: #fff;
}

.trial-choice-button,
.download-step-action {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 10px;
  background: var(--button);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.trial-choice-button:hover,
.trial-choice-button:focus-visible,
.download-step-action:hover,
.download-step-action:focus-visible {
  background: var(--button-dark);
  transform: translateY(-1px);
  box-shadow: 0 16px 24px rgba(120, 187, 47, 0.22);
}

.trial-choice-button.is-selected,
.download-step-action.is-selected {
  box-shadow: 0 0 0 3px rgba(120, 187, 47, 0.2);
}

.download-options {
  display: grid;
  gap: 12px;
}

.download-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 12px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.download-option:hover {
  border-color: #c5d7e5;
  transform: translateY(-1px);
}

.download-option input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 2px solid #9fb4c8;
  border-radius: 6px;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.download-option input:checked {
  border-color: #103c67;
  background: linear-gradient(135deg, #103c67 0%, #2f77b6 100%);
  box-shadow: inset 0 0 0 4px #fff;
}

.download-option span {
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

.download-step-note {
  margin: 14px 0 0;
  color: #1ebfbf;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.download-step-actions,
.download-mode-grid {
  margin-top: 22px;
}

.download-step-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.download-step-actions .button-secondary {
  min-width: 150px;
}

.download-step-actions .download-step-action {
  width: auto;
  min-width: 180px;
  padding: 0 26px;
}

.download-info-box {
  max-width: 620px;
  margin: 0 auto;
  padding: 18px 20px;
  border-left: 4px solid #2f77b6;
  border-radius: 12px;
  color: #38546f;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .hero-grid,
  .compatibility-panel,
  .download-panel {
    grid-template-columns: 1fr;
  }

  .hero-copy,
  .hero-media {
    padding-bottom: 24px;
  }

  .dashboard-card {
    max-width: 860px;
    margin-inline: auto;
  }

  .compatibility-cards,
  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .download-actions {
    justify-content: flex-start;
  }

  .feature-simple-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .features-page-grid,
  .how-page-steps,
  .how-page-detail-grid,
  .compat-page-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .menu-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    padding: 10px;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-nav a:not(.button-small) {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    border-radius: 12px;
  }

  .site-nav .button-small {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
    margin-top: 2px;
  }

  .site-nav .button-small:last-child {
    border-bottom: 0;
  }

  .three-up,
  .steps-grid,
  .testimonial-grid,
  .feature-simple-grid,
  .compatibility-cards,
  .features-page-grid,
  .how-page-steps,
  .how-page-detail-grid,
  .compat-page-columns,
  .detail-grid,
  .footer-grid,
  .download-progress {
    grid-template-columns: 1fr;
  }

  .spotlight-card {
    min-height: 0;
  }

  .compat-device-lineup {
    flex-wrap: wrap;
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(calc(100% - 24px), var(--container));
  }

  .header-row {
    min-height: 72px;
  }

  .brand-logo {
    width: 148px;
  }

  .hero {
    padding-top: 18px;
  }

  .hero-copy {
    padding-top: 8px;
  }

  .hero-text,
  .hero-points li {
    font-size: 14px;
  }

  .dashboard-card,
  .step-card,
  .testimonial-card,
  .detail-card,
  .compatibility-panel,
  .download-panel {
    padding: 20px 18px;
  }

  .download-page-hero {
    padding: 28px 0 18px;
  }

  .download-page-hero-inner p:last-child {
    font-size: 15px;
  }

  .download-flow-card {
    padding: 20px 16px;
    border-radius: 14px;
  }

  .download-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 18px;
    padding: 0 10px;
  }

  .download-progress-step {
    position: relative;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    min-height: 34px;
  }

  .download-progress-step > div {
    display: none;
  }

  .download-progress-step::before {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .download-progress-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(50% + 15px);
    right: calc(-50% + 15px);
    height: 2px;
    background: #d7e2ec;
    transform: translateY(-50%);
  }

  .download-progress-step.is-active,
  .download-progress-step.is-complete {
    background: transparent;
  }

  .download-progress-step.is-complete::after {
    background: rgba(120, 187, 47, 0.45);
  }

  .download-step h2 {
    margin-bottom: 22px;
    font-size: 1.9rem;
  }

  .download-step-intro {
    margin-bottom: 22px;
    font-size: 14px;
  }

  .download-step-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .download-step-actions .button-secondary,
  .download-step-actions .download-step-action {
    width: 100%;
    min-width: 0;
  }

  .spotlight-card {
    padding: 24px 18px;
  }

  .dashboard-card {
    padding: 8px;
  }

  .hero-actions,
  .download-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .button,
  .button-secondary,
  .button-small {
    width: 100%;
  }

  .section {
    padding: 56px 0 60px;
  }

  .features-page-banner {
    padding-top: 34px;
  }

  .features-page-banner-inner,
  .how-page-banner-inner,
  .faq-page-banner-inner,
  .policy-page-banner-inner {
    padding: 44px 18px;
  }

  .compat-page-hero-inner {
    padding: 40px 10px 44px;
  }

  .features-page-card,
  .how-page-step-card,
  .how-page-detail-card {
    padding: 26px 20px 22px;
  }

  .compat-page-band-inner {
    padding: 34px 18px 38px;
  }

  .compat-page-band-inner p,
  .compat-page-caption,
  .compat-info-card > p,
  .compat-feature-list li,
  .policy-page-banner-inner p,
  .policy-card p,
  .policy-card li {
    font-size: 14px;
  }

  .compat-device-tablet {
    width: 170px;
    height: 246px;
  }

  .compat-device-phone {
    width: 88px;
    height: 182px;
  }

  .compat-glyph-apple {
    width: 54px;
    height: 62px;
  }

  .compat-visual {
    height: 270px;
  }

  .compat-stack-large {
    left: 24px;
    width: 148px;
    height: 202px;
  }

  .compat-stack-mid {
    left: 0;
    width: 98px;
    height: 146px;
  }

  .compat-stack-mid-alt {
    left: 150px;
    width: 100px;
    height: 150px;
  }

  .compat-stack-small {
    left: 80px;
    width: 66px;
    height: 118px;
  }

  .compat-stack-phone {
    left: 204px;
    width: 72px;
    height: 132px;
  }

  .compat-stack-tablet {
    left: 88px;
    width: 170px;
    height: 228px;
  }

  .compat-stack-tablet-front {
    left: 166px;
    width: 120px;
    height: 186px;
  }

  .compat-stack-iphone {
    left: 28px;
    width: 62px;
    height: 116px;
  }

  .compat-stack-iphone-small {
    left: 74px;
    width: 52px;
    height: 104px;
  }

  .compat-stack-watch {
    left: 0;
    width: 44px;
    height: 68px;
  }

  .demo-toolbar {
    flex-direction: column;
  }

  .demo-toolbar-actions {
    width: 100%;
  }

  .demo-action {
    flex: 1;
  }

  .demo-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-main-grid {
    grid-template-columns: 1fr;
  }

  .demo-feed-list article {
    grid-template-columns: 28px 1fr;
  }

  .demo-feed-list time {
    display: none;
  }

  .three-up {
    padding: 40px 0 46px;
    gap: 18px;
  }

  .logo-strip-row {
    gap: 10px 12px;
  }

  .footer-bottom {
    flex-direction: column;
  }
}