:root{
  --color-flag-red:#C8323C;
  --color-flag-blue:#2B4A8B;
  --color-flag-white:#FFFFFF;
  --color-feature-rule:rgba(183,202,219,.82);
  --color-success-soft:rgba(47,163,138,.12);
}

.flag-red{fill:var(--color-flag-red)}
.flag-blue{fill:var(--color-flag-blue)}
.flag-white{fill:var(--color-flag-white)}
.flag-ring{fill:none;stroke:var(--color-ink-14);stroke-width:1}

.hero-device{
  pointer-events:none;
}

.route-panel{
  pointer-events:auto;
}

.route-check{
  display:inline-grid;
  width:17px;
  height:17px;
  flex:0 0 17px;
  place-items:center;
  border-radius:var(--radius-pill);
  background:var(--color-success);
  color:var(--color-white);
  font-size:11px;
  font-weight:700;
  line-height:1;
}

.traffic-scale{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:10px;
}

.traffic-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:5px;
}

.traffic-track::before{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  left:0;
  height:2px;
  background:var(--color-slot);
  transform:translateY(-50%);
}

.traffic-track i{
  position:relative;
  z-index:1;
  width:10px;
  height:10px;
  justify-self:center;
  border:2px solid var(--color-white);
  border-radius:var(--radius-pill);
  background:var(--color-accent);
  box-shadow:0 0 0 1px var(--color-accent-30);
}

.mini-platforms{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}

.mini-platforms span{
  padding:3px 6px;
  border-radius:var(--radius-xs);
  background:var(--color-lilac);
  color:var(--color-accent);
  font-family:var(--font-mono);
  font-size:9px;
  line-height:1.3;
}

.feature-intro{
  align-self:start;
  position:sticky;
  top:calc(var(--header-height) + 28px);
}

.feature-intro h2{
  margin:10px 0 18px;
}

.feature-intro p:not(.kicker){
  margin-bottom:24px;
}

.feature-cards{
  align-items:stretch;
}

.feature-card{
  border:1px solid var(--color-border-soft);
  transition:transform .2s ease,box-shadow .2s ease;
}

.feature-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-panel-hover);
}

.feature-card h3{
  margin-bottom:12px;
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:20px;
  font-weight:700;
}

.feature-card p{
  margin-bottom:0;
}

.feature-card--large .feature-scene{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
}

.feature-card--large .feature-scene strong{
  font-size:13px;
}

.feature-icon{
  display:grid;
  width:42px;
  height:42px;
  margin-bottom:18px;
  place-items:center;
  border-radius:var(--radius-sm);
  background:var(--color-lilac);
  color:var(--color-accent);
}

.feature-icon svg{
  width:22px;
  height:22px;
}

.feature-card--small:nth-of-type(4),
.feature-card--small:nth-of-type(6){
  border-left-color:var(--color-success);
}

.method-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr 1fr;
  gap:20px;
  margin-top:48px;
}

.method-grid h3{
  margin:8px 0 12px;
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:20px;
  font-weight:700;
}

.method-grid p:last-child{
  margin-bottom:0;
}

.route-section{
  background:var(--color-slot);
}

.route-guidance{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:28px;
}

.route-guidance article{
  min-width:0;
  padding:24px;
  border:1px solid var(--color-border-soft);
  border-radius:var(--radius-md);
  background:var(--color-panel);
  box-shadow:var(--shadow-small);
}

.route-guidance h3{
  margin-bottom:10px;
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:19px;
  font-weight:700;
}

.route-guidance p{
  margin-bottom:0;
}

.section-link{
  display:flex;
  justify-content:flex-end;
  margin-top:28px;
}

.section-link a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--color-accent);
  font-weight:700;
}

.section-link a:hover{
  color:var(--color-accent-dark);
}

.plan-card>p{
  margin-bottom:20px;
}

.traffic-pack-note{
  margin-top:32px;
}

.traffic-pack-note h3{
  margin-bottom:8px;
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:20px;
  font-weight:700;
}

.plan-explain{
  margin-top:24px;
}

.plan-explain h3{
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:20px;
  font-weight:700;
}

.plan-explain p:last-child{
  margin-bottom:0;
}

.blog-section{
  border-top:1px solid var(--color-border-soft);
}

.blog-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:38px;
}

.blog-heading .section-head{
  margin-bottom:0;
}

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

.home-article-grid .article-card{
  min-height:280px;
}

.final-section{
  padding-top:32px;
}

.promo-block .btn{
  border-color:var(--color-panel);
}

@media (max-width:1100px){
  .feature-intro{
    position:static;
  }

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

  .route-guidance{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width:900px){
  .home-article-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width:768px){
  .blog-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .feature-card--large{
    min-height:0;
  }
}

@media (max-width:640px){
  .traffic-scale{
    font-size:9px;
  }

  .route-guidance article{
    padding:20px;
  }

  .section-link{
    justify-content:flex-start;
  }

  .promo-block{
    padding:28px 22px;
  }
}

@media (prefers-reduced-motion:reduce){
  .feature-card{
    transition:none;
  }
}