.page-home{
  --ph-green-deep:#1B7A47;
  --ph-line:2px solid var(--ink-500);
  --ph-num-col:clamp(52px,11vw,104px);
  background:var(--ink-900);
  color:var(--paper);
  overflow-x:clip;
}

.page-home figure{margin:0;}
.page-home img{max-width:100%;height:auto;display:block;}

.page-home .sec-head{max-width:46rem;}
.page-home .sec-head h2{
  margin:.55rem 0 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.7rem,3.6vw,2.9rem);
  line-height:1.16;
  letter-spacing:-.01em;
}
.page-home .sec-lead{
  margin:1rem 0 0;
  font-size:1rem;
  line-height:1.85;
  max-width:38rem;
}
.page-home .eyebrow{color:var(--green-300);}

/* ---------- hero ---------- */
.page-home .hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(4rem,9vw,7rem) 0 clamp(3rem,7vw,5.5rem);
  background:
    radial-gradient(120% 90% at 84% 6%, rgba(47,191,113,.18), transparent 62%),
    linear-gradient(180deg,#14181C 0%,#1B2128 58%,#14181C 100%);
}
.page-home .hero-dots{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(47,191,113,.11) 1px, transparent 1px);
  background-size:16px 16px;
}
.page-home .hero-plate{
  position:absolute;
  z-index:0;
  left:58%;
  right:-14%;
  bottom:6%;
  height:clamp(160px,30vw,380px);
  background:var(--ink-700);
  border:2px solid var(--ink-500);
  box-shadow:var(--hard-green);
  transform:rotate(-3.5deg);
  pointer-events:none;
}
.page-home .hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  gap:clamp(2.25rem,5vw,3.5rem);
  align-items:start;
}
.page-home .hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0;
}
.page-home .hero-tags .tag{
  color:var(--paper);
  border-color:var(--ink-500);
  background:rgba(20,24,28,.55);
}
.page-home .hero-tags .tag--solid{
  background:var(--green-600);
  border-color:var(--green-600);
  color:var(--ink-900);
}
.page-home .hero-title{
  margin:.8rem 0 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.6rem,7.2vw,5.6rem);
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--paper);
}
.page-home .hero-title em{
  display:block;
  font-style:normal;
  color:var(--green-600);
}
.page-home .hero-lead{
  margin:1.4rem 0 0;
  max-width:34rem;
  font-size:clamp(1rem,1.5vw,1.1rem);
  line-height:1.85;
  color:rgba(251,252,250,.78);
}
.page-home .hero-acts{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:clamp(1.75rem,3vw,2.25rem);
}
.page-home .hero-facts{
  list-style:none;
  margin:clamp(2rem,4vw,3rem) 0 0;
  padding:clamp(1.1rem,2vw,1.4rem) 0 0;
  border-top:2px solid var(--ink-500);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1rem;
  font-size:.85rem;
  letter-spacing:.05em;
  color:rgba(251,252,250,.6);
}
.page-home .hero-facts strong{
  display:block;
  font-family:var(--font-num);
  font-weight:900;
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.1;
  color:var(--green-300);
  margin-bottom:.3rem;
}
.page-home .hero-side{
  display:grid;
  gap:clamp(1rem,2.4vw,1.6rem);
}
.page-home .hero-figure figcaption{
  margin-top:.75rem;
  font-size:.82rem;
  line-height:1.7;
  letter-spacing:.04em;
  color:rgba(251,252,250,.55);
}
.page-home .hero-figure .figure-frame{
  border:var(--ph-line);
  box-shadow:var(--hard-green);
  background:var(--ink-700);
}
.page-home .hero-next{
  border:var(--ph-line);
  border-radius:var(--radius-card);
  background:rgba(35,42,49,.85);
  padding:clamp(1.1rem,2.4vw,1.5rem);
  transition:border-color .14s var(--ease);
}
.page-home .hero-next:hover{border-color:var(--green-600);}
.page-home .hero-next .eyebrow{margin:0;color:var(--green-300);}
.page-home .hero-next-text{
  margin:.7rem 0 0;
  font-size:.95rem;
  line-height:1.8;
  color:rgba(251,252,250,.78);
}
.page-home .hero-next-link{
  display:inline-block;
  margin-top:1rem;
  font-size:.9rem;
  font-weight:700;
  color:var(--blue-300);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:border-color .14s var(--ease),color .14s var(--ease);
}
.page-home .hero-next-link:hover{border-bottom-color:var(--blue-300);color:var(--paper);}

/* ---------- steps ---------- */
.page-home .steps{
  background:var(--green-050);
  color:var(--black);
  padding:clamp(3rem,7vw,5.5rem) 0;
}
.page-home .steps .eyebrow,
.page-home .scenes .eyebrow,
.page-home .next .eyebrow{color:var(--ph-green-deep);}
.page-home .steps .sec-lead{color:#39424B;}
.page-home .steps-body{
  display:grid;
  gap:clamp(2rem,4vw,3rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.page-home .steps-figure .figure-frame{
  border:var(--ph-line);
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--ink-700);
}
.page-home .step-rail{
  position:relative;
  display:grid;
  grid-template-columns:var(--ph-num-col) minmax(0,1fr);
  column-gap:clamp(.9rem,2.6vw,2rem);
  row-gap:clamp(1.75rem,4vw,3rem);
}
.page-home .step-rail::before{
  content:"";
  position:absolute;
  top:2.5rem;
  bottom:2.5rem;
  left:calc(var(--ph-num-col) / 2);
  width:2px;
  transform:translateX(-50%);
  background-image:linear-gradient(180deg,var(--green-600) 0 6px,transparent 6px 14px);
  background-size:2px 14px;
  opacity:.5;
  z-index:0;
}
.page-home .step-dot{
  grid-column:1;
  position:relative;
  z-index:1;
  width:var(--ph-num-col);
  height:var(--ph-num-col);
  padding:0;
  display:grid;
  place-items:center;
  border:2px solid var(--ink-500);
  border-radius:50%;
  background:var(--paper);
  cursor:pointer;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease),background-color .14s var(--ease);
}
.page-home .step-dot .num{
  font-family:var(--font-num);
  font-weight:900;
  font-size:clamp(1.5rem,4.4vw,3rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--green-600);
  transition:color .14s var(--ease);
}
.page-home .step-dot:hover,
.page-home .step-dot:focus-visible{
  border-color:var(--green-600);
  box-shadow:var(--hard-green);
}
.page-home .step-dot.is-active{
  background:var(--green-600);
  border-color:var(--green-600);
}
.page-home .step-dot.is-active .num{color:var(--paper);}
.page-home .step-card{
  grid-column:2;
  background:var(--paper);
  border:var(--ph-line);
  border-radius:var(--radius-card);
  padding:clamp(1.25rem,2.6vw,1.9rem);
  box-shadow:var(--hard);
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
.page-home .step-card h3{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.15rem,2vw,1.5rem);
  font-weight:700;
  letter-spacing:-.01em;
}
.page-home .step-card p{
  margin:.75rem 0 0;
  font-size:.98rem;
  line-height:1.8;
  color:#39424B;
}
.page-home .step-card.is-active{
  border-color:var(--green-600);
  box-shadow:var(--hard-green);
}
.page-home .step-link{
  display:inline-block;
  margin-top:1rem;
  font-size:.9rem;
  font-weight:600;
  color:var(--blue-500);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:border-color .14s var(--ease);
}
.page-home .step-link:hover{border-bottom-color:var(--blue-500);}

/* ---------- panels band ---------- */
.page-home .panels{
  background:var(--ink-900);
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,5vw,4rem);
}
.page-home .panels-lead{
  margin-top:1rem;
  max-width:40rem;
  font-size:1rem;
  line-height:1.85;
  color:rgba(251,252,250,.72);
}
.page-home .panels-figure{margin:clamp(2rem,4vw,3rem) 0 0;}
.page-home .panels-figure .figure-frame{
  border:var(--ph-line);
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--ink-700);
}
.page-home .band{
  margin-top:clamp(2rem,4vw,3rem);
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--ink-500) transparent;
}
.page-home .band-track{
  display:flex;
  gap:clamp(.9rem,2vw,1.4rem);
  list-style:none;
  margin:0;
  padding:0 max(var(--gutter),calc((100vw - var(--shell)) / 2)) clamp(1.25rem,2.5vw,2rem);
  scroll-snap-type:x mandatory;
}
.page-home .band-item{
  flex:0 0 auto;
  width:min(78vw,320px);
  scroll-snap-align:start;
  background:var(--ink-700);
  border:var(--ph-line);
  border-radius:var(--radius-card);
  padding:clamp(1.1rem,2.2vw,1.6rem);
  transition:border-color .14s var(--ease),transform .14s var(--ease),box-shadow .14s var(--ease);
}
.page-home .band-item:hover,
.page-home .band-item:focus-within{
  border-color:var(--green-600);
  box-shadow:var(--hard-green);
  transform:translateY(-4px);
}
.page-home .band-item h3{
  margin:.9rem 0 0;
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:700;
  color:var(--paper);
}
.page-home .band-item p{
  margin:.7rem 0 0;
  font-size:.92rem;
  line-height:1.8;
  color:rgba(251,252,250,.7);
}
.page-home .band::-webkit-scrollbar{height:6px;}
.page-home .band::-webkit-scrollbar-track{background:transparent;}
.page-home .band::-webkit-scrollbar-thumb{
  background:var(--ink-500);
  border-radius:999px;
}
.page-home .band::-webkit-scrollbar-thumb:hover{background:var(--green-600);}
.page-home .panels-foot{margin-top:clamp(1.5rem,3vw,2.5rem);}

/* ---------- scenes ---------- */
.page-home .scenes{
  background:var(--paper);
  color:var(--black);
  padding:clamp(3rem,7vw,5.5rem) 0;
}
.page-home .scene-wrap{
  margin-top:clamp(2rem,4vw,3rem);
  overflow-x:auto;
  border:var(--ph-line);
  border-radius:var(--radius-card);
  background:var(--paper);
}
.page-home .scene-table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
}
.page-home .scene-table th,
.page-home .scene-table td{
  border-bottom:var(--ph-line);
  padding:clamp(.9rem,2vw,1.15rem) clamp(1rem,2.2vw,1.4rem);
  text-align:left;
  font-size:.95rem;
  line-height:1.75;
  vertical-align:top;
}
.page-home .scene-table thead th{
  background:var(--ink-900);
  color:var(--green-300);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.08em;
  border-bottom-color:var(--ink-900);
}
.page-home .scene-table tbody tr{transition:background-color .14s var(--ease);}
.page-home .scene-table tbody tr:hover{background:var(--green-050);}
.page-home .scene-table tbody tr:last-child td{border-bottom:0;}
.page-home .scene-table td:first-child{font-weight:600;}
.page-home .scene-table td:nth-child(2){
  color:var(--ph-green-deep);
  font-weight:700;
  white-space:nowrap;
}
.page-home .scene-note{
  margin-top:clamp(1.25rem,2.5vw,1.75rem);
  font-size:.92rem;
  line-height:1.85;
  color:#39424B;
}
.page-home .scene-note a{
  color:var(--blue-500);
  text-decoration:none;
  border-bottom:2px solid var(--blue-300);
  transition:border-color .14s var(--ease);
}
.page-home .scene-note a:hover{border-bottom-color:var(--blue-500);}

/* ---------- pitfalls ---------- */
.page-home .pitfalls{
  padding:clamp(3rem,7vw,5.5rem) 0;
  background:
    radial-gradient(90% 60% at 10% 0%, rgba(47,191,113,.13), transparent 65%),
    var(--ink-700);
  color:var(--paper);
}
.page-home .pitfalls-grid{
  display:grid;
  gap:clamp(2rem,4vw,3rem);
  align-items:start;
}
.page-home .pitfall-list{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  display:grid;
  gap:1rem;
}
.page-home .pitfall{
  border:var(--ph-line);
  border-radius:var(--radius-card);
  background:rgba(20,24,28,.55);
  transition:border-color .14s var(--ease);
}
.page-home .pitfall[open]{border-color:var(--green-600);}
.page-home .pitfall summary{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:clamp(1rem,2vw,1.25rem) clamp(1.1rem,2.2vw,1.4rem);
  cursor:pointer;
  list-style:none;
  font-size:1rem;
  font-weight:600;
  color:var(--paper);
}
.page-home .pitfall summary::-webkit-details-marker{display:none;}
.page-home .pnum{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:2.1rem;
  height:2.1rem;
  border:2px solid var(--green-600);
  border-radius:50%;
  color:var(--green-600);
  font-family:var(--font-num);
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.02em;
  transition:background-color .14s var(--ease),color .14s var(--ease);
}
.page-home .pitfall[open] .pnum{
  background:var(--green-600);
  color:var(--ink-900);
}
.page-home .pitfall p{
  margin:0;
  padding:0 clamp(1.1rem,2.2vw,1.4rem) clamp(1rem,2vw,1.25rem);
  font-size:.95rem;
  line-height:1.85;
  color:rgba(251,252,250,.74);
}
.page-home .pitfall p a{
  color:var(--blue-300);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:border-color .14s var(--ease);
}
.page-home .pitfall p a:hover{border-bottom-color:var(--blue-300);}
.page-home .pitfalls-side{
  display:grid;
  gap:clamp(1.25rem,2.5vw,1.75rem);
}
.page-home .pitfalls-side .figure-frame{
  border:var(--ph-line);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--hard-green);
  background:var(--ink-900);
}
.page-home .pitfalls-side figcaption{
  margin-top:.75rem;
  font-size:.82rem;
  line-height:1.7;
  color:rgba(251,252,250,.55);
}

/* ---------- next ---------- */
.page-home .next{
  background:var(--green-050);
  color:var(--black);
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(3.5rem,8vw,6rem);
}
.page-home .next-grid{
  margin-top:clamp(2rem,4vw,3rem);
  display:grid;
  gap:clamp(1rem,2.4vw,1.5rem);
}
.page-home .next-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  background:var(--paper);
  border:var(--ph-line);
  border-radius:var(--radius-card);
  padding:clamp(1.25rem,2.6vw,1.9rem);
  box-shadow:var(--hard);
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease),transform .14s var(--ease);
}
.page-home .next-card:hover,
.page-home .next-card:focus-visible{
  border-color:var(--green-600);
  box-shadow:var(--hard-green);
  transform:translateY(-4px);
}
.page-home .next-num{
  font-family:var(--font-num);
  font-weight:900;
  font-size:clamp(2.2rem,5vw,3.2rem);
  line-height:1;
  color:var(--green-300);
}
.page-home .next-card h3{
  margin:1rem 0 0;
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:700;
}
.page-home .next-card p{
  margin:.7rem 0 0;
  font-size:.94rem;
  line-height:1.8;
  color:#39424B;
}
.page-home .next-more{
  margin-top:auto;
  padding-top:1.1rem;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--blue-500);
  border-top:var(--ph-line);
}

/* ---------- responsive ---------- */
@media (min-width:760px){
  .page-home .next-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-home .hero-side{align-items:start;}
}
@media (min-width:900px){
  .page-home .step-card:nth-of-type(2){margin-left:clamp(.5rem,4vw,3rem);}
  .page-home .step-card:nth-of-type(3){
    margin-left:clamp(.25rem,2vw,1.5rem);
    padding-top:clamp(1.5rem,3vw,2.2rem);
  }
}
@media (min-width:960px){
  .page-home .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
  .page-home .steps-body{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start;}
  .page-home .steps-figure{position:sticky;top:6.5rem;}
  .page-home .pitfalls-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
}
@media (max-width:640px){
  .page-home .hero-plate{left:32%;right:-24%;opacity:.75;}
  .page-home .hero-facts{grid-template-columns:1fr 1fr;}
  .page-home .band-item{width:min(84vw,300px);}
  .page-home .pitfall summary{font-size:.95rem;}
}
@media (prefers-reduced-motion:reduce){
  .page-home *{transition-duration:.01ms !important;}
}
<<<END>>>