.page-home{
  --home-board-pad:clamp(1.15rem,3vw,2.25rem);
  --home-gap:clamp(1.2rem,3vw,2rem);
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
}

.page-home .eyebrow{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
}
.page-home .eyebrow::before{
  content:"";
  width:18px;
  height:2px;
  background:var(--orange);
}

/* ---------- hero frame ---------- */
.page-home .hero{padding-top:clamp(1rem,2.5vw,1.75rem);}
.page-home .hero__frame{
  position:relative;
  padding:clamp(1.1rem,3.5vw,2.5rem);
  border:2px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--grad-panel);
  box-shadow:var(--shadow-panel);
  overflow:hidden;
}
.page-home .hero__frame::after{
  content:"";
  position:absolute;
  right:-18%;
  bottom:-42%;
  width:58%;
  aspect-ratio:1;
  background:radial-gradient(circle,rgba(43,231,196,.18),transparent 68%);
  pointer-events:none;
}
.page-home .hero__tick{
  position:absolute;
  width:16px;
  height:16px;
  border:2px solid var(--orange);
  pointer-events:none;
  z-index:2;
}
.page-home .hero__tick--tl{top:7px;left:7px;border-right:0;border-bottom:0;}
.page-home .hero__tick--tr{top:7px;right:7px;border-left:0;border-bottom:0;}
.page-home .hero__tick--bl{bottom:7px;left:7px;border-right:0;border-top:0;}
.page-home .hero__tick--br{bottom:7px;right:7px;border-left:0;border-top:0;}

.page-home .hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  gap:clamp(1.4rem,4vw,2.4rem);
  grid-template-columns:minmax(0,1fr);
}
.page-home .hero__copy{
  display:flex;
  flex-direction:column;
  gap:.95rem;
}
.page-home h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2rem,7.4vw,3.9rem);
  line-height:1.04;
  letter-spacing:-.03em;
  color:var(--paper);
}
.page-home .hero__mark{
  background:linear-gradient(transparent 64%,rgba(43,231,196,.42) 64%);
  padding-inline:.05em;
}
.page-home .lede{
  margin:0;
  max-width:56ch;
  color:var(--mist);
  font-size:clamp(1rem,2.4vw,1.075rem);
  line-height:1.78;
}
.page-home .hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:.35rem;
}
.page-home .hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem 1.15rem;
  margin:.5rem 0 0;
  padding:.8rem 0 0;
  list-style:none;
  border-top:1px solid var(--line);
  color:var(--gray);
  font-size:.74rem;
  letter-spacing:.08em;
}
.page-home .hero__meta li{
  position:relative;
  padding-left:.95rem;
}
.page-home .hero__meta li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  background:var(--teal);
  transform:translateY(-50%) rotate(45deg);
}

.page-home .hero__device{
  margin:0;
  display:flex;
  flex-direction:column;
  border:2px solid var(--orange);
  border-radius:var(--radius);
  background:var(--ink-900);
  box-shadow:10px 10px 0 rgba(255,122,61,.16);
  overflow:hidden;
}
.page-home .hero__device-img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:9 / 11;
  object-fit:cover;
}
.page-home .hero__device-cap{
  padding:.6rem .8rem;
  border-top:1px solid var(--line);
  color:var(--mist);
  font-size:.72rem;
  letter-spacing:.06em;
}

/* ---------- signal band ---------- */
.page-home .signal-band-wrap{margin-top:clamp(1.2rem,3vw,1.8rem);}
.page-home .signal-band{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  border:2px solid var(--line);
  border-radius:var(--radius);
  background:var(--line);
  overflow:hidden;
}
.page-home .signal-band__cell{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  padding:.9rem 1rem;
  background:var(--ink-800);
}
.page-home .signal-band__value{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(1.35rem,3.6vw,1.9rem);
  letter-spacing:.02em;
  color:var(--teal);
}
.page-home .signal-band__label{
  color:var(--mist);
  font-size:.8rem;
  line-height:1.5;
}

/* ---------- boards ---------- */
.page-home .board{
  margin-top:clamp(1.6rem,4.5vw,3rem);
  padding:var(--home-board-pad);
  border:2px solid var(--line);
  border-radius:var(--radius);
  background:var(--grad-panel);
  box-shadow:var(--shadow-panel);
}
.page-home .board h2{
  margin:.45rem 0 .6rem;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.45rem,4.4vw,2.25rem);
  line-height:1.16;
  letter-spacing:-.02em;
  color:var(--paper);
}
.page-home .board__head{
  max-width:66ch;
  margin-bottom:clamp(1.1rem,3vw,1.75rem);
}
.page-home .board__intro{
  margin:0;
  color:var(--mist);
  line-height:1.75;
}
.page-home .prose p{
  margin:0 0 .85rem;
  color:var(--mist);
  font-size:.98rem;
  line-height:1.78;
}
.page-home .prose p:last-child{margin-bottom:0;}

/* ---------- views ---------- */
.page-home .filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:1.1rem;
}
.page-home .filter-btn{
  padding:.45rem .9rem;
  border:2px solid var(--line-strong);
  border-radius:999px;
  background:transparent;
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  cursor:pointer;
  transition:background .25s,border-color .25s,color .25s;
}
.page-home .filter-btn:hover{background:rgba(43,231,196,.1);color:var(--paper);}
.page-home .filter-btn[aria-pressed="true"]{
  background:var(--brand-green);
  border-color:var(--teal);
  color:var(--paper);
}
.page-home .filter-btn:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}
.page-home .views{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.9rem;
}
.page-home .view-card{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding:1.1rem;
  border:2px solid var(--line);
  border-top:2px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--ink-900);
}
.page-home .view-card__tag{
  margin:0;
  color:var(--orange);
  font-size:.72rem;
  letter-spacing:.12em;
}
.page-home .view-card h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:-.01em;
  color:var(--paper);
}
.page-home .view-card p{
  margin:0;
  color:var(--mist);
  font-size:.92rem;
  line-height:1.7;
}
.page-home .view-card__fit{
  margin-top:auto;
  padding-top:.65rem;
  border-top:1px dashed var(--line-strong);
  color:var(--gray);
  font-size:.84rem;
}
.page-home .view-card__fit .mono{
  margin-right:.4rem;
  color:var(--teal);
  font-size:.7rem;
  letter-spacing:.1em;
}

/* ---------- path ---------- */
.page-home .path-figure{
  margin:0 0 clamp(1.1rem,3vw,1.6rem);
  border:2px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--ink-900);
  overflow:hidden;
}
.page-home .path-figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
}
.page-home .path-figure figcaption{
  padding:.6rem .85rem;
  border-top:1px solid var(--line);
  color:var(--gray);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
}
.page-home .steps{
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
}
.page-home .step{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding:1.1rem;
  border:2px dashed var(--line-strong);
  border-radius:var(--radius);
  background:var(--panel);
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.page-home .step:hover,
.page-home .step:focus-within{
  border-style:solid;
  border-color:var(--teal);
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,0,0,.35);
}
.page-home .step__num{
  font-family:var(--font-mono);
  font-size:1.5rem;
  line-height:1;
  letter-spacing:.06em;
  color:var(--orange);
}
.page-home .step h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--paper);
}
.page-home .step p{
  margin:0;
  color:var(--mist);
  font-size:.92rem;
  line-height:1.7;
}
.page-home .step__figure{
  margin:.2rem 0 0;
  border:2px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.page-home .step__figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-home .step__time{
  margin-top:auto;
  color:var(--teal);
  font-size:.74rem;
  letter-spacing:.1em;
}

/* ---------- collect ---------- */
.page-home .collect__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--home-gap);
}
.page-home .collect__links{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1.4rem;
  margin-top:1rem;
}
.page-home .collect__aside{
  padding:1rem 1.1rem;
  border:2px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--ink-900);
}
.page-home .collect__aside-label{
  margin:0 0 .75rem;
  color:var(--orange);
  font-size:.72rem;
  letter-spacing:.1em;
}
.page-home .mini-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.6rem;
  counter-reset:mini;
}
.page-home .mini-steps li{
  position:relative;
  padding-left:2rem;
  color:var(--mist);
  font-size:.9rem;
  line-height:1.6;
}
.page-home .mini-steps li::before{
  counter-increment:mini;
  content:counter(mini,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.05rem;
  color:var(--teal);
  font-family:var(--font-mono);
  font-size:.78rem;
}

/* ---------- updates ---------- */
.page-home .updates-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--home-gap);
}
.page-home .updates{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1px;
  border:2px solid var(--line);
  border-radius:var(--radius);
  background:var(--line);
  overflow:hidden;
}
.page-home .updates__row{
  display:grid;
  gap:.3rem;
  padding:.9rem 1rem;
  background:var(--ink-800);
}
.page-home .updates__batch{
  color:var(--orange);
  font-size:.78rem;
  letter-spacing:.08em;
}
.page-home .updates__text{
  margin:0;
  color:var(--paper);
  font-size:.94rem;
  line-height:1.6;
}
.page-home .version-card{
  display:flex;
  flex-direction:column;
  border:2px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--ink-900);
  overflow:hidden;
}
.page-home .version-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 1;
  object-fit:cover;
}
.page-home .version-card__body{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:1rem 1.1rem;
}
.page-home .version-card__body strong{
  font-family:var(--font-mono);
  font-size:1.1rem;
  letter-spacing:.06em;
  color:var(--teal);
}
.page-home .version-card__body p{
  margin:0;
  color:var(--mist);
  font-size:.86rem;
  line-height:1.65;
}

/* ---------- help ---------- */
.page-home .help__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--home-gap);
}
.page-home .help__list{
  list-style:none;
  margin:1rem 0 0;
  padding:0;
  display:grid;
  gap:.55rem;
}
.page-home .help__list li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.4rem 1rem;
  padding:.65rem .85rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--ink-900);
  color:var(--paper);
  font-size:.92rem;
  word-break:break-word;
}
.page-home .help__list .mono{
  min-width:3rem;
  color:var(--gray);
  font-size:.72rem;
  letter-spacing:.1em;
}
.page-home .help__side{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.9rem;
  padding:1.15rem;
  border:2px solid var(--line-strong);
  border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(15,91,63,.38),rgba(12,31,26,.92));
}
.page-home .help__side p{
  margin:0;
  color:var(--mist);
  font-size:.9rem;
  line-height:1.72;
}

/* ---------- responsive ---------- */
@media (min-width:700px){
  .page-home .updates__row{
    grid-template-columns:96px minmax(0,1fr) auto;
    align-items:center;
    gap:1rem;
  }
}

@media (min-width:760px){
  .page-home .signal-band{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (min-width:820px){
  .page-home .views{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:860px){
  .page-home .steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-home .steps::before{
    content:"";
    position:absolute;
    left:6%;
    right:6%;
    top:2.4rem;
    border-top:2px dashed rgba(43,231,196,.25);
    z-index:0;
  }
}

@media (min-width:880px){
  .page-home .collect__grid{
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    align-items:start;
  }
  .page-home .help__grid{
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    align-items:start;
  }
}

@media (min-width:900px){
  .page-home .hero__grid{
    grid-template-columns:minmax(0,6fr) minmax(0,4fr);
    align-items:end;
  }
  .page-home .hero__device-img{
    max-height:480px;
  }
  .page-home .updates-layout{
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    align-items:start;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-home .step,
  .page-home .filter-btn{
    transition:none;
  }
  .page-home .step:hover,
  .page-home .step:focus-within{
    transform:none;
  }
}
