/* The home page. Every section's width belongs to a column on this page, so
   nothing inside these sections carries a measure of its own. */

.h-hero .a-h1,.h-hero .a-lede,
.h-sec .a-h2,.h-sec .a-lede,.h-sec .a-body,.h-sec .a-small,.h-sec .a-note,
.h-sec .a-why,.h-sec .a-runs li,.h-sec .a-stage__caption{max-width:none}

/* Hero: the claim on the left, the hardware on the right. */
.h-hero{padding-block:var(--s6) var(--s7)}
.h-hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);align-items:center}
.h-hero .a-h1{font-size:clamp(38px,4.3vw,56px)}
.h-hero .a-lede{margin-top:var(--s4)}
.h-hero .a-actions{margin-top:var(--s5);gap:var(--s4)}
.h-textlink{font-weight:600;font-size:17px;color:var(--knect);text-underline-offset:4px;
  display:inline-flex;align-items:center;min-height:44px}
.h-trust{margin:var(--s4) 0 0;font-size:15px;color:var(--text-3)}
.h-hero__photo{margin:0;background:var(--consult);border-radius:16px;
  display:flex;align-items:center;justify-content:center;padding:var(--s5) var(--s4)}
.h-hero__photo img{width:100%;height:auto;display:block}

/* Section head: heading and lede share one row, so the row owns its width. */
.h-headrow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);
  align-items:first baseline;margin-bottom:var(--s6)}
.h-headrow .a-lede{margin:0}

/* The router. */
.h-topo--phone{display:none}
.h-more{margin-top:var(--s7)}
.h-nopanel{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;gap:var(--s4);
  align-items:center;padding:var(--s4) 0;border-top:2px solid var(--hairline-deep);
  border-bottom:1px solid var(--hairline-deep);text-decoration:none;color:inherit}
.h-nopanel__q{font-family:var(--display);font-weight:700;font-size:21px;color:var(--on-deep)}
.h-nopanel__a{font-size:16.5px;line-height:1.5;color:var(--on-deep-2)}
.h-nopanel__go{font-size:22px;color:var(--signal-soft)}
.h-nopanel:hover .h-nopanel__q,.h-nopanel:focus-visible .h-nopanel__q{text-decoration:underline;
  text-decoration-color:var(--signal-soft);text-underline-offset:5px}

.h-props{margin-top:var(--s5)}
.h-props__lead{font-family:var(--display);font-weight:600;font-size:18px;color:var(--on-deep);margin:0 0 var(--s3)}
.h-props ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.h-prop{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s3);align-items:center;
  text-decoration:none;color:inherit;padding:var(--s2);margin:calc(var(--s2) * -1);border-radius:12px}
.h-prop img{width:112px;height:84px;object-fit:cover;border-radius:8px;display:block}
.h-prop__name{display:block;font-family:var(--display);font-weight:700;font-size:17px;color:var(--on-deep)}
.h-prop__note{display:block;font-size:14.5px;line-height:1.45;color:var(--on-deep-2);margin-top:2px}
.h-prop:hover,.h-prop:focus-visible{background:rgba(255,255,255,.07)}
.h-prop:hover .h-prop__name,.h-prop:focus-visible .h-prop__name{text-decoration:underline;
  text-decoration-color:var(--signal-soft);text-underline-offset:4px}

/* What's different: each claim sits under the hardware that proves it. */
.h-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.h-well{margin:0 0 var(--s4);background:var(--consult);border-radius:16px;aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;padding:var(--s4);overflow:hidden}
.h-well img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
/* The hand is cut at the wrist, so it enters from the well's own edge. */
.h-well--edge{justify-content:flex-end;align-items:flex-end;padding:var(--s4) 0 0 var(--s4)}
.h-proof__item .a-h3{font-size:21px}
.h-proof__item p{font-size:17px;line-height:1.55;color:var(--text-2);margin:var(--s3) 0 var(--s3)}
.h-more-link{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;
  color:var(--knect);text-underline-offset:4px}
.g-argue .h-more-link{color:var(--signal-soft)}

/* Wiring: the words beside the face they describe. */
.h-device{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);align-items:center}
.h-device .a-runs{margin:var(--s5) 0 var(--s3)}
.h-device .a-runs li{font-size:17.5px}
.h-device .a-board{max-width:none}

/* Install guides. */
.h-guides{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:start}
.h-guides__head .a-lede{margin-top:var(--s4)}
.h-support{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hairline)}
.h-support p{margin:0 0 var(--s3);font-size:16.5px;line-height:1.5;color:var(--text-2)}
.h-guides__list{list-style:none;margin:0;padding:0;border-top:2px solid var(--text)}
.h-guides__list a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s4);
  padding:var(--s4) var(--s2) var(--s4) 0;text-decoration:none;color:inherit}
.h-guide__name{font-family:var(--display);font-weight:700;font-size:19px;color:var(--text)}
.h-guide__note{grid-column:1;font-size:16px;color:var(--text-2);margin-top:2px}
.h-guide__go{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:20px;color:var(--knect)}
.h-guides__list a:hover .h-guide__name,.h-guides__list a:focus-visible .h-guide__name{
  text-decoration:underline;text-decoration-color:var(--knect);text-underline-offset:5px}
.h-guides__list a:hover,.h-guides__list a:focus-visible{background:var(--frame-link-wash)}

/* Where to buy. */
.h-buy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:start}
.h-buy .a-ways{margin-bottom:var(--s3)}
.h-way--soon .a-way__go{color:var(--on-deep-3)}
.h-help{margin:var(--s4) 0 0;font-size:16px;line-height:1.5;color:var(--on-deep-2)}

/* For distributors: an aside, set as one line. */
.h-aside{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) auto;gap:var(--s5);align-items:center}
.h-aside p{margin:0;font-size:17px;line-height:1.5;color:var(--text-2);text-wrap:pretty}

@media (max-width:980px){
  .h-hero__grid,.h-device,.h-guides,.h-buy{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .h-hero__photo{aspect-ratio:auto;max-width:560px}
  .h-proof{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .h-props ul{grid-template-columns:minmax(0,1fr)}
  .h-aside{grid-template-columns:minmax(0,1fr);gap:var(--s3);justify-items:start}
  .h-nopanel{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s2)}
  .h-nopanel__a{grid-column:1}
  .h-nopanel__go{grid-row:1 / span 2;grid-column:2}
}
@media (max-width:760px){
  .h-headrow{grid-template-columns:minmax(0,1fr);gap:var(--s3);margin-bottom:var(--s5)}
  .h-proof{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .h-topo--wide{display:none}
  .h-topo--phone{display:block}
  .h-topo--phone .a-topo{min-width:0;max-width:420px;margin-inline:auto}
  .h-topo--phone .a-topo .lbl{font-size:15px}
  .h-topo--phone .a-topo .lbl3p{font-size:12px}
  .h-topo--phone .a-topo .role{font-size:12px}
  .h-topo--m .wireless{stroke-width:4;stroke-dasharray:14 11}
  .h-topo--m .lbl{font-size:13.5px}
  .h-topo--m .lbl3p{font-size:11px}
}

/* On the deep ground the head row's lede sits over the brightest part of the
   gradient, so it takes full white rather than the softer tone. */
.h-sec.g-argue .h-headrow .a-lede,.h-sec.g-argue .a-stage__sub{color:var(--on-deep)}