.ex-hero{padding-block:var(--space-7) var(--space-6);background:var(--color-sand)}.ex-hero h1{font-size:var(--text-hero);letter-spacing:-.02em;margin-bottom:var(--space-3);line-height:1.02}.ex-intro{gap:var(--space-3) var(--space-7);margin-top:var(--space-4);display:grid}.ex-intro p:last-child{margin-bottom:0}@media (width>=56rem){.ex-intro{grid-template-columns:1.1fr 1fr}}.example-label{margin:0 0 var(--space-3);background:var(--color-warn-bg);border:2px solid var(--color-warn-line);border-radius:var(--radius-s);padding:.25rem .875rem;font-weight:700;display:inline-block}.ex-body{counter-reset:ex;padding-bottom:var(--space-8)}.example{counter-increment:ex;margin-top:var(--space-8)}.example>h2{font-size:var(--text-h1);margin-top:0}.example>h2:before{content:counter(ex, decimal-leading-zero);margin-bottom:var(--space-2);font-family:var(--font-body);letter-spacing:.06em;color:var(--color-accent);font-size:1.25rem;font-weight:700;display:block}.example>p{max-width:var(--measure)}.hint{color:var(--color-ink-soft)}.pair{gap:var(--space-5);margin:var(--space-5) 0;grid-template-columns:1fr;display:grid}.pair figure{margin:0}.pair figcaption{font-family:var(--font-display);font-size:var(--text-h3);margin-bottom:var(--space-2)}.side-now figcaption{color:var(--color-accent)}.frame-bar{height:2.25rem;padding:0 var(--space-3);background:var(--color-sand-deep);border:1px solid var(--color-line-strong);border-radius:var(--radius-m) var(--radius-m) 0 0;border-bottom:0;align-items:center;gap:6px;display:flex}.frame-bar span{background:var(--color-paper);border-radius:50%;width:10px;height:10px}.pair iframe{border:1px solid var(--color-line-strong);border-radius:0 0 var(--radius-m) var(--radius-m);width:100%;height:32rem;box-shadow:var(--shadow-2);background:#fff;display:block}.side-now iframe{box-shadow:var(--shadow-3)}.pair .open{margin-top:var(--space-2);padding:.5rem 0;font-weight:700;display:inline-block}.compare{border-collapse:separate;border-spacing:0;width:100%;margin:var(--space-4) 0 0;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-l);box-shadow:var(--shadow-1)}.compare thead th:first-child{border-top-left-radius:var(--radius-l)}.compare thead th:last-child{border-top-right-radius:var(--radius-l)}.compare caption{text-align:left;font-family:var(--font-display);font-size:var(--text-h3);margin-bottom:var(--space-2)}.compare th,.compare td{text-align:left;vertical-align:top;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-line)}.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}.compare thead th{background:var(--color-sand)}.compare tbody th{font-weight:700}.compare td[data-side=after]{background:#fdfaf4}.compare td p{margin:0 0 var(--space-1)}.compare .measured{color:var(--color-ink-soft);font-weight:600}.compare tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-l)}.measured-box{margin-top:var(--space-4);padding:var(--space-4);background:var(--color-sand);border-radius:var(--radius-l)}.measured-box h3{margin-top:0}.measured-box p{margin:0 0 var(--space-1)}.measured-side{font-weight:700}.measured-pair{gap:var(--space-3);grid-template-columns:1fr;display:grid}@media (width>=48rem){.measured-pair{grid-template-columns:1fr 1fr}}.how,.next{margin-top:var(--space-8);max-width:var(--measure)}.how h2,.next h2{margin-top:0}.next{padding:var(--space-5);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-l);max-width:48rem;box-shadow:var(--shadow-2)}@media (width<=47.99rem){.compare{box-shadow:none;background:0 0;border:0;overflow:visible}.compare caption{width:100%;display:block}.compare thead{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.compare,.compare tbody,.compare tr,.compare th,.compare td{width:100%;display:block}.compare tr{margin-bottom:var(--space-3);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-m);overflow:hidden}.compare th,.compare td{border:0}.compare tbody th{background:var(--color-sand);font-size:var(--text-h3)}.compare td:before{content:attr(data-label);color:var(--color-accent);font-weight:700;display:block}}@media (width>=48rem){.pair{grid-template-columns:1fr 1fr}.compare tbody th{width:11rem}}@media print{.ex-hero{background:0 0;padding:0}.pair iframe,.frame-bar,.pair .open span{display:none}.pair .open:after{content:" (" attr(href) ")"}.example{break-inside:auto;margin-top:18pt}.compare{box-shadow:none;border:1pt solid #000}.compare tr{break-inside:avoid}.next{box-shadow:none;border:1pt solid #000}}