.guide-hero{
  position:relative;
  padding-top:clamp(58px,8vw,104px);
  padding-bottom:clamp(54px,8vw,96px);
  background:radial-gradient(circle at 82% 24%,var(--color-primary-soft),transparent 34%),radial-gradient(circle at 72% 76%,var(--color-success-soft),transparent 30%);
}
.guide-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,var(--color-text),transparent);
  opacity:.7;
}
.guide-hero-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,.82fr);
  align-items:center;
  gap:clamp(42px,7vw,92px);
}
.guide-hero-copy{
  min-width:0;
}
.guide-hero-copy h1{
  margin-top:20px;
  margin-bottom:20px;
}
.guide-lead{
  max-width:650px;
  margin-bottom:26px;
  color:var(--color-muted);
  font-size:clamp(17px,2vw,20px);
  line-height:1.8;
}
.guide-facts{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:24px;
}
.guide-flow-card{
  position:relative;
  min-width:0;
  border-radius:var(--radius-xl);
  background:var(--color-canvas);
  box-shadow:var(--shadow-editor);
  transform:rotate(-.4deg);
}
.flow-chrome{
  display:flex;
  align-items:center;
  gap:7px;
  padding:14px 18px;
  border-bottom:1px solid var(--color-line);
}
.flow-file{
  margin-left:12px;
  padding:5px 12px;
  border-radius:var(--radius-sm);
  background:var(--color-panel);
  color:var(--color-text);
  font-family:var(--font-mono);
  font-size:12px;
}
.flow-lines{
  display:grid;
  gap:10px;
  padding:25px;
  list-style:none;
  counter-reset:flow;
}
.flow-lines li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:13px 15px;
  border-radius:var(--radius-md);
  background:var(--color-panel);
  counter-increment:flow;
  font-family:var(--font-mono);
  font-size:13px;
}
.flow-lines li::before{
  content:counter(flow);
  display:grid;
  width:25px;
  height:25px;
  grid-column:auto;
  place-items:center;
  border-radius:var(--radius-pill);
  background:var(--color-primary-soft);
  color:var(--color-primary);
  font-size:11px;
}
.flow-lines li{
  grid-template-columns:25px minmax(0,1fr) auto;
}
.flow-key{
  min-width:0;
  overflow-wrap:anywhere;
  color:var(--color-muted);
}
.flow-value{
  color:var(--color-primary-deep);
}
.flow-value.is-ready{
  color:var(--color-success);
  font-weight:700;
}
.flow-result{
  position:absolute;
  right:25px;
  bottom:-18px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 16px;
  border-radius:var(--radius-pill);
  background:var(--color-canvas);
  box-shadow:var(--shadow-pill);
  color:var(--color-text);
  font-family:var(--font-mono);
  font-size:12px;
}
.flow-result span{
  width:8px;
  height:8px;
  flex-shrink:0;
  border-radius:var(--radius-pill);
  background:var(--color-success);
}
.guide-frame{
  padding-top:22px;
}
.guide-reading{
  max-width:var(--reading-max);
  margin-inline:auto;
  padding-top:24px;
}
.guide-opening{
  margin-bottom:clamp(58px,8vw,92px);
}
.guide-opening p{
  margin-top:7px;
  margin-bottom:0;
}
.guide-step{
  position:relative;
  padding-top:clamp(34px,6vw,62px);
  padding-bottom:clamp(50px,8vw,88px);
}
.guide-step + .guide-step{
  border-top:1px solid var(--color-line);
}
.step-marker{
  display:inline-flex;
  margin-bottom:15px;
  padding:6px 11px;
  border-radius:var(--radius-pill);
  background:var(--color-primary-soft);
  color:var(--color-primary-deep);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:650;
}
.guide-step h2{
  max-width:760px;
  margin-bottom:22px;
}
.guide-step > p{
  color:var(--color-muted);
  font-size:17px;
  line-height:1.9;
}
.guide-step > p a,
.platform-guide p a{
  font-weight:680;
}
.step-action{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:17px;
  margin-top:28px;
}
.step-action > span{
  color:var(--color-muted);
  font-size:13px;
}
.text-link{
  font-weight:700;
}
.guide-step .callout{
  margin-top:26px;
}
.guide-step .callout p{
  margin-top:6px;
  margin-bottom:0;
}
.platform-instructions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:30px;
}
.platform-guide{
  min-width:0;
  padding:clamp(22px,3vw,30px);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
  box-shadow:var(--shadow-card);
}
.platform-guide:nth-child(even){
  background:var(--color-canvas);
}
.platform-label{
  display:inline-flex;
  margin-bottom:14px;
  padding:6px 11px;
  border-radius:var(--radius-pill);
  background:var(--color-primary-soft);
  color:var(--color-primary-deep);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
}
.platform-guide h3{
  margin-bottom:13px;
  font-size:21px;
}
.platform-guide p{
  margin-bottom:0;
  color:var(--color-muted);
  line-height:1.85;
}
.verify-panel{
  margin-top:28px;
  padding:clamp(22px,4vw,34px);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
  box-shadow:var(--shadow-card);
}
.verify-panel h3{
  margin-bottom:18px;
  font-size:22px;
}
.verify-panel ol{
  display:grid;
  gap:13px;
  margin-left:22px;
  color:var(--color-muted);
}
.verify-panel li{
  padding-left:5px;
}
.verify-panel li::marker{
  color:var(--color-primary);
  font-family:var(--font-mono);
  font-weight:700;
}
.guide-finish{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:30px;
  margin-top:20px;
  padding:clamp(26px,5vw,48px);
  border-radius:var(--radius-xl);
  background:var(--color-panel-strong);
  box-shadow:var(--shadow-card);
}
.guide-finish h2{
  margin-top:13px;
  font-size:clamp(27px,4vw,40px);
}
.guide-finish p{
  max-width:650px;
  margin-top:10px;
  margin-bottom:0;
  color:var(--color-muted);
}
@media (max-width:1000px){
  .guide-hero-layout{
    grid-template-columns:1fr;
  }
  .guide-flow-card{
    width:100%;
    max-width:680px;
    transform:none;
  }
}
@media (max-width:768px){
  .guide-hero{
    padding-top:48px;
    padding-bottom:66px;
  }
  .guide-hero::before{
    background-size:36px 36px;
  }
  .guide-frame{
    padding-top:12px;
  }
  .guide-reading{
    padding-top:14px;
  }
  .platform-instructions{
    grid-template-columns:1fr;
  }
  .guide-finish{
    grid-template-columns:1fr;
  }
  .guide-step > p{
    font-size:16px;
  }
}
@media (max-width:520px){
  .flow-lines{
    padding:16px;
  }
  .flow-lines li{
    grid-template-columns:23px minmax(0,1fr);
    gap:9px;
  }
  .flow-lines li::before{
    width:23px;
    height:23px;
  }
  .flow-value{
    grid-column:2;
  }
  .flow-result{
    right:14px;
  }
  .guide-opening{
    padding-left:52px;
  }
  .step-action{
    align-items:stretch;
    flex-direction:column;
  }
  .step-action .button{
    width:100%;
  }
}
@media (prefers-reduced-motion:reduce){
  .guide-flow-card{
    transform:none;
  }
}