/* ── Remaining pages, reviewed (site_pages_ux.py) ── */
/* Links in running text: 24 px or more to tap, the line unchanged (they underline with text-decoration) */
main p a:not([class]),.ww-legend a{padding-block:3px}
/* No lone last words */
main h3,main summary{text-wrap:balance}
main li,main dd{text-wrap:pretty}
/* The feature lists open (the button sits in an h3, so the panel follows the h3) */
.feat h3:has(> .feat__btn[aria-expanded="true"]) + .feat__panel{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
/* Slideshow: 24 px wide dots, the dots themselves unchanged; it holds under the pointer and while a control has focus */
.dot{padding-inline:8px}
@media (hover:hover){.gallery:hover .dot[aria-current="true"] i{animation-play-state:paused}}
.gallery:focus-within .dot[aria-current="true"] i{animation-play-state:paused}
/* Card rows: a part of the next card shows at every width */
.card{flex:0 0 clamp(264px,25vw,280px)}
/* Buttons: dark ink on the green, as on every other page */
.btn--primary{color:var(--deep)}
/* Default / Larger: both examples fit their card */
.compare__item{width:46%}
.compare__item--sm{width:calc(46% * 256 / 318)}
/* The devices link to their pages: the whole tile is the link */
.rack li{position:relative}
.dev__a{color:inherit;text-decoration:none}
.dev__a::after{content:"";position:absolute;inset:0;z-index:1}
.dev__a:focus-visible{outline:none}
.dev__a:focus-visible::after{outline:2px solid var(--green);outline-offset:3px;border-radius:12px}
.rack li:hover b{color:var(--green)}
.devices__more a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:3px}
/* The pins heading keeps its green words together; captions at about 73 characters a line */
#pins-title .hl{white-space:nowrap}
.slide figcaption{max-width:32em}