.page-head{padding-block:var(--space-24) var(--space-16);gap:20px;max-width:1000px}.page-head .lede{max-width:720px}.page-title{font-size:clamp(40px,5vw,64px)}.feature{padding-block:var(--space-16);gap:var(--space-16);flex-wrap:wrap;align-items:center;display:flex}.feature-copy{gap:var(--space-4);flex:380px}.feature-copy .lede{font-size:17px;line-height:26px}.feature-visual{flex:420px;justify-content:center;display:flex}.feature-kicker{font-family:var(--font-mono);letter-spacing:.06em;color:var(--brand);text-transform:uppercase;font-size:12px}.xep{gap:var(--space-2);flex-wrap:wrap;display:inline-flex}.xep a{font-family:var(--font-mono);padding:6px var(--space-2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink-muted);font-size:12px;line-height:1;text-decoration:none}.xep a:hover{color:var(--ink);border-color:var(--ink-muted)}.vis{background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg);width:100%;max-width:440px;padding:var(--space-4);gap:var(--space-2);flex-direction:column;font-size:14px;line-height:20px;display:flex}.vis-row{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);display:flex}.vis-row.is-active{background:var(--surface-300)}.vis-row .grow{flex-grow:1;min-width:0}.vis-sub{color:var(--ink-muted);font-size:12px}.vis-label{letter-spacing:.06em;color:var(--ink-muted);padding:var(--space-1) var(--space-3) 0;font-size:11px;font-weight:500}.vis-circle{background:var(--surface-300);width:36px;height:36px;color:var(--ink-muted);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;font-size:13px;font-weight:600;display:flex}.vis-circle.is-active{background:var(--surface-100);border:2px solid var(--ink);color:var(--ink)}.vis-badge{background:var(--brand);min-width:20px;height:20px;color:var(--on-brand);border-radius:10px;justify-content:center;align-items:center;padding:0 6px;font-size:11px;font-weight:600;display:inline-flex}.pres{border-radius:50%;flex-shrink:0;width:10px;height:10px}.pres-online{background:var(--online)}.pres-away{background:linear-gradient(90deg, var(--brand) 50%, transparent 50%);box-shadow:inset 0 0 0 2px var(--brand)}.pres-dnd{background:var(--danger);border-radius:2px;height:4px}.pres-offline{box-shadow:inset 0 0 0 2px var(--ink-muted)}.vis-avatar{background:var(--surface-300);border-radius:50%;flex-shrink:0;width:32px;height:32px}.vis-avatar.is-accent{background:var(--accent)}.vis-avatar.is-brand{background:var(--brand)}.vis-avatar.is-ink{background:var(--ink)}.vis-server{font-family:var(--font-mono);color:var(--accent);font-size:11px}.vis-file{gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-100);align-items:center;display:flex}.vis-file-icon{border-radius:var(--radius-md);background:var(--surface-300);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.vis-file-icon svg{fill:none;width:20px;height:20px;stroke:var(--accent);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.vis-image{border-radius:var(--radius-md);background:var(--surface-300);height:140px;color:var(--ink-muted);font-family:var(--font-mono);justify-content:center;align-items:center;font-size:12px;display:flex}.vis-devices{gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.vis-device{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-100);padding:var(--space-3);gap:var(--space-2);color:var(--ink-muted);flex-direction:column;font-size:12px;display:flex}.vis-device strong{color:var(--ink);font-size:13px;font-weight:600}.vis-line{background:var(--surface-300);border-radius:3px;height:6px}.vis-line.is-brand{background:var(--brand);width:60%}.compare{border-collapse:collapse;width:100%;font-size:15px}.compare th,.compare td{text-align:left;padding:14px var(--space-4);border-bottom:1px solid var(--line);vertical-align:top}.compare thead th{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);font-size:12px;font-weight:500}.compare tbody th{width:28%;font-weight:600}.compare td{color:var(--ink-muted)}.compare td.is-chord{color:var(--ink)}.compare-wrap{overflow-x:auto}.cta{margin-top:var(--space-16);padding:56px var(--space-16);border-radius:var(--radius-lg);background:var(--brand);color:var(--on-brand);gap:var(--space-8);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.cta h2{color:var(--on-brand)}.cta .btn{border-color:var(--on-brand);color:var(--on-brand)}.cta .btn:hover{color:var(--on-brand);background:#00000014}.cta .btn-dark{background:var(--on-brand);color:var(--brand)}.cta .btn-dark:hover{background:var(--on-brand);color:var(--brand);filter:brightness(1.2)}@media (width<=720px){.cta{padding:var(--space-8) var(--space-6)}}.familiar{padding-block:var(--space-16);gap:var(--space-8);flex-direction:column;display:flex}.familiar-head{gap:var(--space-4);max-width:720px}.familiar-body{gap:var(--space-16);flex-wrap:wrap;align-items:center;display:flex}.layout-legend{gap:var(--space-6);counter-reset:pane;flex-direction:column;flex:300px;margin:0;padding:0;list-style:none;display:flex}.layout-legend li{gap:var(--space-4);counter-increment:pane;align-items:flex-start;display:flex}.layout-legend li:before{content:counter(pane);background:var(--brand);width:28px;height:28px;color:var(--on-brand);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;font-weight:600;display:flex}.layout-legend strong{font-weight:600;display:block}.layout-legend span{color:var(--ink-muted)}.aside-line{font-family:var(--font-mono);color:var(--ink-muted);font-size:13px}.photo-msg{max-width:480px;padding:var(--space-4) 0}.photo-msg .msg-body{flex-direction:column;gap:2px;min-width:0;display:flex}.photo-msg-img{max-width:100%;height:auto;margin-top:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-lg);display:block}@media (width<=720px){.page-head{padding-block:var(--space-8)}.feature,.familiar{padding-block:var(--space-8);gap:var(--space-6)}.feature-copy,.feature-visual{flex-basis:100%;min-width:0}.familiar-body{gap:var(--space-6)}.cta{margin-top:var(--space-8)}}
