/* /join v2 (design review 2026-10-07). One visual system for the Windows card,
   the setup chooser and the claim block: same width, type, borders and badges. */
main.container:has(#windows-build){min-width:0;width:100%}
.wb2,.wb2-card,.wb2-claim{--wb-ink:#153d41;--wb-text:#203337;--wb-muted:#597075;--wb-line:#e2eaea;--wb-border:#d4dfdf;--wb-accent:#17676a;--wb-link:#12676b;
  max-width:1000px;margin:0 auto 22px;border:1px solid var(--wb-border);border-radius:18px;background:#fff;color:var(--wb-text);box-shadow:0 12px 38px rgba(17,55,59,.07);text-align:left;box-sizing:border-box}
.wb2 *,.wb2-card *,.wb2-claim *{box-sizing:border-box}
.wb2{padding:0;overflow:hidden}
.wb2 h1{font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-.5px;color:var(--wb-ink);margin:10px 0 16px}
.wb2 h2,.wb2-card h2{font-size:26px;line-height:1.2;color:var(--wb-ink);margin:6px 0 12px}
.wb2 h3,.wb2-card h3{font-size:19px;line-height:1.3;color:var(--wb-ink);margin:18px 0 8px}
.wb2 p,.wb2-card p{font-size:15px;line-height:1.65;margin:0 0 12px}
.wb2 a:hover,.wb2-card a:hover{text-decoration:underline}
.wb2 a:focus-visible,.wb2-card a:focus-visible,.wb2-card button:focus-visible{outline:3px solid #cb8c26;outline-offset:3px}
.wb2 figure{margin:0;min-width:0}
.wb2 img{display:block;width:100%;height:auto;border-radius:10px}
.wb2 figcaption{font-size:14px;line-height:1.55;color:var(--wb-muted);margin:10px 0 0}
.wb2 figcaption strong{color:var(--wb-ink)}
.wb2 .wb-small{font-size:14px;line-height:1.6;color:var(--wb-muted);margin:12px 0 0}
.wb2 .wb-link{font-weight:700;font-size:15px;color:var(--wb-link)}
.wb2 code{overflow-wrap:anywhere}

/* Badges: one style everywhere */
.wb-badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#e3f1ee;color:#17676a;font-size:11px;font-weight:800;letter-spacing:.8px;line-height:1.4}
.wb-badge-green{background:#dcfce7;color:#166534}
.wb-badge-soft{background:#f1f4f4;color:#597075}

/* Buttons */
.wb2 .btn-primary,.wb2-card .btn-primary{background:var(--wb-accent);color:#fff;border-radius:8px;padding:12px 18px;font-size:15px;font-weight:700;text-decoration:none;white-space:normal;text-align:center;justify-content:center}
.wb2 .btn-primary:hover,.wb2-card .btn-primary:hover{background:#11585b;text-decoration:none}
.wb2 .wb-big{font-size:18px;padding:16px 26px;gap:10px;box-shadow:0 6px 18px rgba(23,103,106,.28)}
.wb2 .wb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:20px 0 10px}

/* Hero */
.wb2 .wb-hero{padding:36px;display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;background:linear-gradient(120deg,#f2f8f6,#fff 60%)}
.wb2 .wb-hero-copy{min-width:0}
.wb2 .wb-lead{font-size:18px;line-height:1.55}
.wb2 .wb-quick{list-style:none;counter-reset:q;padding:0;margin:18px 0 6px}
.wb2 .wb-quick li{counter-increment:q;position:relative;padding:6px 0 6px 40px;font-size:16px;line-height:1.5}
.wb2 .wb-quick li:before{content:counter(q);position:absolute;left:0;top:5px;width:28px;height:28px;border-radius:50%;background:var(--wb-accent);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center}
.wb2 .wb-shot img{border:1px solid #dce4e5;box-shadow:0 10px 30px rgba(17,55,59,.12)}

/* Sections */
.wb2 .wb-section{padding:32px 36px;border-top:1px solid var(--wb-line);scroll-margin-top:90px}
.wb2 .wb-software{background:#f7fafb}
.wb2 .wb-payoff{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.wb2 .wb-payoff>div{min-width:0}
.wb2 .wb-payoff h3{margin-top:4px}
.wb2 .wb-pics{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 6px;align-items:start}
.wb2 .wb-pics img{border:1px solid #dce4e5;aspect-ratio:4/5;object-fit:cover}

/* Parts with prices */
.wb2 .wb-parts{padding:0;margin:16px 0;list-style:none;counter-reset:parts}
.wb2 .wb-parts>li{counter-increment:parts;display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:6px 16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--wb-line)}
.wb2 .wb-parts>li:before{content:counter(parts);background:#eaf4f1;color:var(--wb-accent);font-size:13px;font-weight:800;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;align-self:start}
.wb2 .wb-parts>li>div{min-width:0}
.wb2 .wb-parts>li>div:only-of-type:last-child{grid-column:2/-1}
.wb2 .wb-parts p{font-size:14px;line-height:1.55;margin:4px 0 0;color:#40575b}
.wb2 .wb-parts a{font-size:14px;color:#165f63;font-weight:700;white-space:nowrap}
.wb2 .wb-price{font-size:14px;font-weight:700;color:var(--wb-ink);white-space:nowrap;text-align:right}
.wb2 .wb-opts{list-style:none;padding:0;margin:10px 0 0}
.wb2 .wb-opts li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 16px;align-items:center;padding:8px 0;border-top:1px dashed var(--wb-line);font-size:14px}
.wb2 .wb-total{margin:16px 0 4px;padding:14px 16px;border-radius:10px;background:#eff6f4;font-size:15px;line-height:1.6}
.wb2 .wb-total strong{font-size:17px;color:var(--wb-ink)}
.wb2 .wb-total span{display:block;font-size:13px;color:var(--wb-muted);margin-top:2px}

/* Preview build notes (content unchanged) */
.wb2 .wb-signing{border:1px solid #e1d4ab;background:#fffcf3;border-radius:8px;padding:15px;margin-top:18px;font-size:14px}
.wb2 summary{cursor:pointer;font-weight:700;color:#725825}
.wb2 .wb-signing p{font-size:14px;margin:12px 0 8px}
.wb2 .wb-hash{display:block;overflow-wrap:anywhere;font-size:12px}

.wb2 .wb-footnote{margin:0;padding:18px 36px 22px;border-top:1px solid var(--wb-line);font-size:13px;line-height:1.6;color:var(--wb-muted);background:#fafcfb}

/* Setup chooser: same card as the Windows build */
.wb2-card{padding:32px 36px;scroll-margin-top:90px}
.wb2-card .wb2-sub{color:var(--wb-muted)}
.wb2-seg{display:flex;gap:4px;padding:4px;margin:18px 0 0;border:1px solid var(--wb-border);border-radius:12px;background:#f3f7f6}
.wb2-seg button{flex:1 1 0;min-width:0;padding:10px 8px;border:0;border-radius:9px;background:transparent;color:#40575b;font:inherit;font-size:15px;font-weight:700;cursor:pointer;line-height:1.25}
.wb2-seg button[aria-selected="true"]{background:#fff;color:var(--wb-ink);box-shadow:0 1px 4px rgba(17,55,59,.15)}
.wb2-panel{position:relative;margin-top:16px;padding:22px 22px 14px;border:1px solid var(--wb-line);border-radius:12px;scroll-margin-top:90px}
.wb2-panel h3{margin-top:10px;padding-right:110px}
.wb2-panel ol{font-size:15px;line-height:1.65;padding-left:22px;margin:0 0 12px}
.wb2-card .wb2-note{font-size:14px;color:var(--wb-muted)}
.wb2-card a:not(.btn){color:var(--wb-link);font-weight:600}
.wb2-card .platform-corner{position:absolute;top:18px;right:18px;display:flex;align-items:center;gap:8px}
.wb2-card .platform-corner img{width:22px;height:22px;object-fit:contain;cursor:help}
.wb2-card .install-cmd{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto;font-size:13px;padding:12px 44px 12px 12px;line-height:1.5}
.wb2-card .install-cmd code{font-size:13px}
.wb2-card p code{background:#eef3f2;padding:1px 5px;border-radius:4px;font-size:13px}

/* Claim block */
.wb2-claim{padding:18px 36px}
.wb2-claim>summary{font-size:18px;font-weight:700;color:var(--wb-ink);cursor:pointer}
.wb2-claim .wb2-claim-impact{margin:10px 0 6px;font-size:14px}
.wb2-claim .wb2-claim-impact a{color:#047857;font-weight:700}
.wb2-claim[open]>summary{margin-bottom:8px}
.wb2-claim .btn-primary{background:#17676a;border-radius:8px;padding:11px 18px;font-size:15px}
.wb2-claim .btn-primary:hover{background:#11585b}

@media(max-width:760px){
  .wb2 .wb-hero,.wb2 .wb-payoff{grid-template-columns:1fr;gap:24px}
  .wb2 .wb-hero,.wb2 .wb-section{padding:24px 18px}
  .wb2 .wb-footnote{padding:16px 18px 20px}
  .wb2-card{padding:24px 18px}
  .wb2-claim{padding:16px 18px}
  .wb2 .wb-actions .btn{width:100%}
  .wb2 .wb-parts>li{grid-template-columns:28px minmax(0,1fr) auto;gap:6px 10px}
  .wb2 .wb-parts>li>div{grid-column:2/-1}
  .wb2 .wb-parts>li>.wb-price{grid-column:2;text-align:left}
  .wb2 .wb-parts>li>a{grid-column:3}
  .wb2 .wb-opts li{grid-template-columns:minmax(0,1fr) auto;}
  .wb2 .wb-opts li>span:first-child{grid-column:1/-1}
  .wb2 .wb-opts li>.wb-price{text-align:left}
  .wb2-panel{padding:18px 14px 10px}
  .wb2-panel h3{padding-right:0;margin-top:12px}
  .wb2-card .platform-corner{position:static;margin:0 0 12px}
  .wb2-seg button{font-size:14px;padding:10px 4px}
}
@media(max-width:480px){
  .wb2 .wb-pics{grid-template-columns:1fr}
  .wb2 .wb-big{font-size:17px}
}