/* MVG v84.9 — Controls page */
.controls-page .hero{padding-bottom: 0;}
.controls-shell,
.controls-panel,
.controls-band{
  padding: 1.3rem;
  border-radius: 30px;
  border: 1px solid rgba(145,170,255,.18);
  background:
    linear-gradient(180deg, rgba(10,20,41,.86), rgba(7,16,31,.9)),
    radial-gradient(120% 100% at 0% 0%, rgba(124,92,255,.14), transparent 50%);
  box-shadow: 0 24px 70px rgba(41,85,220,.10);
}

.controls-shell{padding: 1.34rem 1.34rem 1.42rem;}
.controls-hero-grid{
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(320px,.92fr);
  gap: 1.18rem 1.24rem;
  align-items: start;
  margin-top: .92rem;
}

.controls-copy h1{
  margin: .16rem 0 .76rem;
  font-size: clamp(2.85rem, 5.4vw, 4.8rem);
  line-height: .94;
  letter-spacing: -.058em;
  max-width: 11ch;
}

.controls-copy .hero-lede{
  max-width: 44rem;
  font-size: 1.2rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--text,#edf2ff) 94%, rgba(255,255,255,.84));
  margin: 0;
}

.controls-actions{margin-top: 1rem; gap: .66rem; flex-wrap: wrap;}
.controls-actions .btn{min-height: 46px; font-weight: 650;}

.controls-promise-strip,
.controls-clarity-strip{
  display: flex;
  flex-wrap: wrap;
  gap: .52rem;
  margin-top: 1rem;
}

.controls-token,
.controls-clarity-chip,
.controls-fit-chip{
  display: inline-flex;
  align-items: center;
  gap: .46rem;
  min-height: 2.55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(145,170,255,.18);
  background: rgba(255,255,255,.04);
  color: var(--text,#edf2ff);
  font-weight: 560;
}

.controls-clarity-strip{margin-top: .86rem;}
.controls-clarity-chip{border-radius: 18px; min-height: auto; font-weight: 520;}

.controls-diagram{
  padding: 1rem;
  border-radius: 24px;
  border: 1px solid rgba(145,170,255,.18);
  background: linear-gradient(180deg, rgba(14,26,54,.88), rgba(8,16,31,.94));
}

.controls-diagram-head{display:flex; align-items:flex-start; justify-content:space-between; gap: .8rem; flex-wrap:wrap; margin-bottom: .9rem;}
.controls-diagram-head h2{margin:.2rem 0 .2rem; font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing:-.045em;}
.controls-rule-card{
  max-width: 24rem;
  padding: .78rem .9rem;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(145,170,255,.18);
}
.controls-rule-card p{margin:.34rem 0 0; color:var(--muted,#b8c4ee); line-height:1.55;}
.controls-path{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .75rem;
  align-items: stretch;
}
.controls-step{
  position: relative;
  padding: .92rem .94rem .98rem;
  border-radius: 22px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(145,170,255,.16);
}
.controls-step:not(:last-child)::after{
  content: '→';
  position: absolute;
  top: calc(50% - .7rem);
  right: -1rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(120,161,255,.72);
}
.controls-step small,
.controls-section-kicker,
.controls-route-card small{
  display:block;
  margin-bottom:.46rem;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9fb4ff;
  font-weight:700;
}
.controls-step h3,
.controls-command-card h3,
.controls-check-card h3,
.controls-route-card h3{
  margin:0 0 .34rem;
  font-size:1.38rem;
  letter-spacing:-.038em;
}
.controls-step p,
.controls-check-card li,
.controls-command-card p,
.controls-route-card p,
.controls-fit-note,
.controls-band p{
  margin:0;
  color:var(--muted,#b8c4ee);
  line-height:1.56;
}

.controls-section{padding-top: 1rem;}
.controls-section-head{margin-bottom: .9rem;}
.controls-section-head h2{margin:.3rem 0 .35rem; font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing:-.05em;}
.controls-section-head p{max-width: 58rem; color:var(--muted,#b8c4ee); line-height:1.58; margin:0;}

.controls-check-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: .76rem;
}
.controls-check-card,
.controls-command-card,
.controls-checklist-card,
.controls-route-card,
.controls-fit-panel{
  padding: 1rem;
  border-radius: 24px;
  border: 1px solid rgba(145,170,255,.18);
  background: rgba(255,255,255,.04);
}
.controls-check-card h3{font-size: 1.2rem; line-height:1.08;}
.controls-check-card p{margin:0; color:var(--muted,#b8c4ee); line-height:1.54;}

.controls-verify-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(280px,.98fr);
  gap: .88rem 1rem;
}
.controls-command-card code{
  display:block;
  margin:.84rem 0 .92rem;
  padding:.92rem .96rem;
  border-radius: 18px;
  border:1px solid rgba(145,170,255,.18);
  background: rgba(4,10,24,.55);
  color:#f5f8ff;
  font-size:.96rem;
  line-height:1.55;
  word-break: break-word;
}
.controls-command-actions{display:flex; flex-wrap:wrap; gap:.62rem; margin-top:.92rem;}
.controls-check-card ul{margin:.78rem 0 0; padding-left:1.1rem; display:grid; gap:.66rem;}
.controls-check-card li::marker{color:#9fb4ff;}

.controls-route-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .82rem;
}
.controls-route-card a{display:inline-flex; margin-top:.84rem; font-weight:650;}
.controls-route-card a span{margin-left:.3rem;}

.controls-fit-panel{
  display:grid;
  gap:.92rem;
}
.controls-fit-row{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:.68rem;
}
.controls-fit-chip{
  min-height: 4rem;
  align-items:flex-start;
  flex-direction:column;
  justify-content:center;
  border-radius: 22px;
}
.controls-fit-chip strong{font-size:1rem; letter-spacing:-.02em; color:var(--text,#edf2ff);}
.controls-fit-chip span{font-size:.93rem; line-height:1.42; color:var(--muted,#b8c4ee);}

.controls-band{display:grid; gap:.72rem; align-items:center;}
.controls-band h2{margin:.1rem 0 .1rem; font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing:-.05em;}
.controls-band-actions{display:flex; flex-wrap:wrap; gap:.62rem;}

:root[data-theme="light"] .controls-shell,
:root[data-theme="light"] .controls-panel,
:root[data-theme="light"] .controls-band,
:root[data-theme="light"] .controls-diagram,
:root[data-theme="light"] .controls-check-card,
:root[data-theme="light"] .controls-command-card,
:root[data-theme="light"] .controls-checklist-card,
:root[data-theme="light"] .controls-route-card,
:root[data-theme="light"] .controls-fit-panel,
:root[data-theme="light"] .controls-step,
:root[data-theme="light"] .controls-rule-card,
:root[data-theme="light"] .controls-fit-chip{
  border-color: rgba(96,116,168,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,247,255,.96)),
    radial-gradient(120% 160% at 0% 0%, rgba(124,92,255,.08), transparent 56%);
  box-shadow: 0 20px 50px rgba(16,30,66,.08), inset 0 1px 0 rgba(255,255,255,.8);
}

:root[data-theme="light"] .controls-token,
:root[data-theme="light"] .controls-clarity-chip,
:root[data-theme="light"] .controls-fit-chip{
  border-color: rgba(96,116,168,.14);
  background: rgba(88,104,255,.05);
  color: #172042;
}

:root[data-theme="light"] .controls-copy .hero-lede,
:root[data-theme="light"] .controls-step p,
:root[data-theme="light"] .controls-command-card p,
:root[data-theme="light"] .controls-check-card li,
:root[data-theme="light"] .controls-route-card p,
:root[data-theme="light"] .controls-section-head p,
:root[data-theme="light"] .controls-fit-chip span,
:root[data-theme="light"] .controls-rule-card p,
:root[data-theme="light"] .controls-fit-note,
:root[data-theme="light"] .controls-band p{
  color: rgba(18,26,48,.74);
}

:root[data-theme="light"] .controls-command-card code{
  background: rgba(245,248,255,.96);
  color: #172042;
  border-color: rgba(96,116,168,.14);
}

@media (max-width: 1180px){
  .controls-check-grid{grid-template-columns: repeat(3, minmax(0,1fr));}
  .controls-fit-row{grid-template-columns: repeat(3, minmax(0,1fr));}
}

@media (max-width: 980px){
  .controls-hero-grid,
  .controls-verify-grid,
  .controls-route-grid,
  .controls-path{grid-template-columns: 1fr;}
  .controls-step::after{display:none;}
}

@media (max-width: 780px){
  .controls-shell,
  .controls-panel,
  .controls-band{padding: 1rem; border-radius: 24px;}
  .controls-copy h1{font-size: clamp(2.36rem, 11.8vw, 3.5rem); max-width: none;}
  .controls-copy .hero-lede{font-size: 1.05rem;}
  .controls-actions,
  .controls-command-actions,
  .controls-band-actions{display:grid; grid-template-columns: 1fr;}
  .controls-actions .btn,
  .controls-command-actions .btn,
  .controls-band-actions .btn{width:100%; justify-content:center;}
  .controls-check-grid,
  .controls-fit-row{grid-template-columns: 1fr;}
}