:root{
  --home-feature-panel:var(--color-forest);
  --home-feature-copy:var(--color-dark-text);
  --home-feature-muted:var(--color-dark-muted);
  --home-soft-surface:var(--color-mark);
}

.hero-copy{
  max-width:100%;
}

.hero-copy h1{
  margin-top:14px;
}

.hero-copy strong{
  color:var(--color-ink);
}

.console-zone{
  padding-bottom:0;
}

.ticker{
  position:relative;
  z-index:2;
}

.feature-section{
  color:var(--color-dark-text);
  background-color:var(--color-forest);
  background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);
  background-size:26px 26px;
}

.feature-heading .eyebrow{
  color:var(--color-accent);
}

.feature-heading .lead{
  color:var(--color-dark-muted);
}

.feature-browser{
  display:grid;
  grid-template-columns:minmax(230px,.72fr) minmax(0,1.7fr);
  gap:34px;
  align-items:stretch;
}

.feature-tab-list{
  display:grid;
  align-content:start;
  border-top:1px solid var(--color-dark-line);
}

.feature-tab-list button{
  position:relative;
  min-height:62px;
  padding:14px 18px 14px 24px;
  border:0;
  border-bottom:1px solid var(--color-dark-line);
  background:transparent;
  color:var(--color-dark-muted);
  font-weight:800;
  text-align:left;
  cursor:pointer;
}

.feature-tab-list button::before{
  content:"";
  position:absolute;
  top:12px;
  bottom:12px;
  left:0;
  width:3px;
  border-radius:var(--radius-pill);
  background:transparent;
}

.feature-tab-list button:hover{
  color:var(--color-dark-text);
}

.feature-tab-list button[aria-selected="true"]{
  color:var(--color-dark-text);
}

.feature-tab-list button[aria-selected="true"]::before{
  background:var(--color-accent);
}

.feature-panels{
  min-width:0;
}

.feature-panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:34px;
  min-height:390px;
  padding:42px;
  overflow:hidden;
  border:1px solid var(--color-dark-line);
  border-radius:var(--radius-medium);
  background:var(--home-feature-panel);
}

.feature-panel[hidden]{
  display:none;
}

.feature-copy{
  position:relative;
  z-index:2;
  display:grid;
  align-content:center;
  gap:16px;
  min-width:0;
}

.feature-index{
  color:var(--color-accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
}

.feature-copy h3{
  font-size:clamp(28px,3.5vw,42px);
}

.feature-copy p{
  max-width:720px;
  color:var(--home-feature-muted);
}

.feature-link{
  justify-self:start;
  color:var(--color-accent);
  font-weight:800;
}

.feature-motif{
  position:relative;
  align-self:center;
  justify-self:center;
  width:150px;
  height:150px;
  border:1px solid var(--color-accent-line);
  border-radius:50%;
}

.feature-motif::before,
.feature-motif::after,
.feature-motif span{
  position:absolute;
  content:"";
  display:block;
}

.motif-route::before{
  top:50%;
  left:14px;
  width:120px;
  height:1px;
  background:var(--color-accent-line);
  transform:rotate(-24deg);
}

.motif-route span{
  width:14px;
  height:14px;
  border:3px solid var(--color-accent);
  border-radius:50%;
  background:var(--color-forest);
}

.motif-route span:nth-child(1){
  top:98px;
  left:14px;
}

.motif-route span:nth-child(2){
  top:61px;
  left:68px;
}

.motif-route span:nth-child(3){
  top:28px;
  right:13px;
}

.motif-shield span{
  top:29px;
  left:41px;
  width:66px;
  height:82px;
  border:4px solid var(--color-accent);
  border-radius:42px 42px var(--radius-small) var(--radius-small);
}

.motif-shield span::after{
  content:"";
  position:absolute;
  top:27px;
  left:23px;
  width:14px;
  height:24px;
  border-right:4px solid var(--color-accent);
  border-bottom:4px solid var(--color-accent);
  transform:rotate(42deg);
}

.motif-devices span:first-child{
  top:35px;
  left:25px;
  width:82px;
  height:58px;
  border:4px solid var(--color-accent);
  border-radius:var(--radius-small);
}

.motif-devices span:first-child::after{
  content:"";
  position:absolute;
  right:19px;
  bottom:-16px;
  left:19px;
  height:4px;
  background:var(--color-accent);
}

.motif-devices span:last-child{
  right:20px;
  bottom:29px;
  width:34px;
  height:62px;
  border:4px solid var(--color-dark-text);
  border-radius:var(--radius-small);
  background:var(--color-forest);
}

.motif-ai span{
  border-radius:50%;
  background:var(--color-accent);
}

.motif-ai span:nth-child(1){
  top:29px;
  left:62px;
  width:24px;
  height:24px;
}

.motif-ai span:nth-child(2){
  top:88px;
  left:29px;
  width:18px;
  height:18px;
}

.motif-ai span:nth-child(3){
  top:89px;
  right:27px;
  width:18px;
  height:18px;
}

.motif-ai::before,
.motif-ai::after{
  top:56px;
  width:66px;
  height:1px;
  background:var(--color-accent-line);
}

.motif-ai::before{
  left:23px;
  transform:rotate(53deg);
}

.motif-ai::after{
  right:23px;
  transform:rotate(-53deg);
}

.motif-media span{
  top:39px;
  left:35px;
  width:80px;
  height:70px;
  border:4px solid var(--color-accent);
  border-radius:var(--radius-small);
}

.motif-media span::after{
  content:"";
  position:absolute;
  top:18px;
  left:30px;
  width:0;
  height:0;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  border-left:22px solid var(--color-accent);
}

.motif-refund span:first-child{
  top:31px;
  left:35px;
  width:76px;
  height:76px;
  border:4px solid var(--color-accent);
  border-radius:50%;
  border-left-color:transparent;
  transform:rotate(-28deg);
}

.motif-refund span:last-child{
  top:27px;
  left:26px;
  width:0;
  height:0;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  border-right:20px solid var(--color-accent);
  transform:rotate(25deg);
}

.route-preview{
  background:var(--color-page);
}

.route-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.7fr);
  gap:32px;
  align-items:start;
}

.route-table-block{
  display:grid;
  gap:18px;
  min-width:0;
}

.section-link{
  display:inline-flex;
  align-items:center;
  justify-self:start;
  min-height:32px;
  color:var(--color-accent-deep);
  font-weight:800;
}

.route-notes{
  display:grid;
  gap:18px;
  padding:28px;
  border-top:4px solid var(--color-accent);
  border-radius:0 0 var(--radius-medium) var(--radius-medium);
  background:var(--color-surface);
  box-shadow:var(--shadow-chip);
}

.route-notes h3{
  font-size:24px;
}

.route-notes p{
  color:var(--color-muted);
}

.status-block{
  margin-top:52px;
  padding-top:34px;
  border-top:1px solid var(--color-border);
}

.status-heading{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:28px;
  align-items:end;
  margin-bottom:22px;
}

.status-heading h3{
  margin-top:6px;
  font-size:28px;
}

.status-heading p{
  color:var(--color-muted);
}

.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  min-width:0;
}

.srv-row{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:13px 15px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-small);
  background:var(--color-surface);
}

.srv-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--color-success);
  animation:srv-pulse 1.8s ease-in-out infinite;
  flex-shrink:0;
}

.srv-flag{
  display:grid;
  place-items:center;
  width:26px;
  height:20px;
  overflow:hidden;
  border-radius:4px;
  border:1px solid var(--color-flag-line);
  flex-shrink:0;
}

.srv-flag img,
.srv-flag svg{
  width:100%;
  height:100%;
  object-fit:cover;
}

.srv-name{
  min-width:0;
  overflow:hidden;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.srv-type{
  max-width:100%;
  overflow:hidden;
  padding:2px 8px;
  border-radius:var(--radius-pill);
  background:var(--color-mark);
  color:var(--color-accent-deep);
  font-size:11px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.srv-ms,
.srv-bw{
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:12px;
  white-space:nowrap;
}

@keyframes srv-pulse{
  0%,100%{opacity:.42;transform:scale(.82)}
  50%{opacity:1;transform:scale(1)}
}

.client-section{
  border-top:1px solid var(--color-border);
  background:var(--color-surface);
}

.client-explain{
  display:grid;
  grid-template-columns:minmax(220px,.55fr) minmax(0,1fr);
  gap:34px;
  margin-top:34px;
  padding:28px 0 0;
  border-top:1px solid var(--color-border);
}

.client-explain h3{
  font-size:25px;
}

.client-explain p{
  color:var(--color-muted);
}

.pricing-preview{
  background:var(--color-page);
}

.plan-summary{
  color:var(--color-muted);
}

.pack-note{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:30px;
  margin-top:22px;
  padding:30px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-medium);
  background:var(--color-surface);
}

.pack-note h3{
  margin-top:7px;
  font-size:25px;
}

.pack-note p{
  margin-top:10px;
  color:var(--color-muted);
}

.faq-section{
  border-top:1px solid var(--color-border);
  background:var(--color-surface);
}

.faq-layout{
  display:grid;
  grid-template-columns:minmax(280px,.68fr) minmax(0,1.32fr);
  gap:70px;
  align-items:start;
}

.faq-layout .section-head{
  position:sticky;
  top:28px;
  margin-bottom:0;
}

.blog-preview{
  background:var(--color-page);
}

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

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

.editorial-note{
  display:grid;
  grid-template-columns:minmax(220px,.55fr) minmax(0,1fr);
  gap:34px;
  margin-top:34px;
  padding:30px;
  border-left:4px solid var(--color-accent);
  border-radius:0 var(--radius-small) var(--radius-small) 0;
  background:var(--color-mark);
}

.editorial-note h3{
  font-size:24px;
}

.editorial-note p{
  color:var(--color-muted);
}

@media (max-width:1000px){
  .feature-browser{
    grid-template-columns:1fr;
  }

  .feature-tab-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    border:1px solid var(--color-dark-line);
    border-radius:var(--radius-small);
    overflow:hidden;
  }

  .feature-tab-list button{
    padding-left:18px;
    border-right:1px solid var(--color-dark-line);
  }

  .feature-tab-list button::before{
    top:auto;
    right:12px;
    bottom:0;
    left:12px;
    width:auto;
    height:3px;
  }

  .route-layout,
  .faq-layout{
    grid-template-columns:1fr;
  }

  .faq-layout{
    gap:28px;
  }

  .faq-layout .section-head{
    position:static;
  }

  .status-heading{
    grid-template-columns:1fr;
  }
}

@media (max-width:768px){
  .feature-tab-list{
    grid-template-columns:1fr 1fr;
  }

  .feature-tab-list button{
    min-height:54px;
  }

  .feature-panel{
    grid-template-columns:1fr;
    min-height:0;
    padding:28px;
  }

  .feature-motif{
    display:none;
  }

  .server-status{
    grid-template-columns:1fr;
  }

  .client-explain,
  .editorial-note{
    grid-template-columns:1fr;
    gap:14px;
  }

  .pack-note{
    grid-template-columns:1fr;
  }

  .blog-heading{
    display:grid;
    align-items:start;
  }
}

@media (max-width:560px){
  .feature-tab-list{
    grid-template-columns:1fr;
  }

  .feature-tab-list button{
    border-right:0;
  }

  .feature-panel{
    padding:22px;
  }

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

  .srv-type{
    display:none;
  }

  .srv-bw{
    display:none;
  }

  .pack-note{
    padding:22px;
  }
}