.we-example { color:var(--ink); background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--radius-large); padding:clamp(1rem,3vw,2rem); margin:1.5rem 0; font-size:1rem; line-height:1.55; }
.we-heading,.we-footer { display:flex; gap:1.5rem; justify-content:space-between; align-items:flex-start; }
.we-heading h2 { font-size:clamp(1.75rem,3vw,2.4rem); line-height:1.12; margin:.5rem 0; letter-spacing:-.04em; }
.we-heading .eyebrow { font-size:.75rem; letter-spacing:.1em; margin:0; }
.we-scope { border:1px solid var(--rule-soft); border-radius:.5rem; color:var(--ink-muted); padding:.4rem .6rem; font-size:.78rem; flex-shrink:0; }
.we-intro { color:var(--ink-muted); max-width:48rem; margin:.75rem 0 1.5rem; }
.we-layout { display:grid; grid-template-columns:minmax(14rem,.8fr) minmax(0,1.2fr); gap:clamp(1rem,3vw,2rem); }
.we-record { background:var(--surface-quiet); border:1px solid var(--rule-soft); border-radius:.75rem; overflow:hidden; align-self:start; }
.we-record-head { padding:1.25rem; border-bottom:1px solid var(--rule-soft); }
.we-record-head>span,.we-record-head>p { color:var(--ink-muted); font-size:.85rem; margin:0; }
.we-record-head>strong { display:block; font-size:2.75rem; letter-spacing:-.05em; line-height:1.3; }
.we-record-head small { font-size:.9rem; letter-spacing:0; }
.we-record-head code { display:block; margin-top:.8rem; font-family:var(--font-mono); font-size:.75rem; overflow-wrap:anywhere; }
.we-facts { padding:0 1.25rem; margin:0; }
.we-facts>div { display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--rule-soft); }
.we-facts dt { color:var(--ink-muted); font-size:.85rem; }
.we-facts dd { margin:0; text-align:right; font-size:.85rem; max-width:58%; font-weight:600; }
.we-hold { color:var(--hold-ink); background:var(--hold-bg); border:1px solid var(--hold-border); border-radius:.25rem; padding:.05rem .45rem; }
.we-record-note { padding:1rem 1.25rem; margin:0; color:var(--ink-muted); font-size:.8rem; }
.we-example .we-steps { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0 0 1rem; }
.we-example .we-steps li { display:block; list-style:none; padding:0; margin:0; }
.we-steps button { width:2.75rem; height:2.75rem; border:1px solid var(--rule-soft); border-radius:50%; color:var(--ink-muted); background:var(--surface); cursor:pointer; font:inherit; }
.we-steps [aria-current] { background:var(--institutional); color:var(--primary-ink); border-color:var(--institutional); }
.we-position { font-size:.8rem; color:var(--ink-muted); margin:0 0 .5rem; }
.we-mobile-summary { display:none; }
.we-story h3 { font-size:1.45rem; line-height:1.25; letter-spacing:-.025em; margin:.5rem 0 .8rem; }
.we-story>p { margin:.5rem 0 1rem; }
.we-why { border-left:3px solid var(--institutional); padding:.75rem 1rem; margin:1rem 0; background:var(--surface-quiet); }
.we-why strong { font-size:.9rem; }
.we-why p { margin:.4rem 0 0; color:var(--ink-muted); font-size:.9rem; }
.we-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.25rem; }
.we-button { display:inline-flex; justify-content:center; align-items:center; min-height:2.75rem; padding:.65rem 1rem; background:var(--institutional); color:var(--primary-ink); border:1px solid var(--institutional); border-radius:.5rem; font:inherit; font-weight:600; font-size:.9rem; text-decoration:none; cursor:pointer; text-align:center; }
.we-button:hover { background:var(--institutional-hover); color:var(--primary-ink); }
.we-button--quiet { background:var(--surface); border-color:var(--rule-strong); color:var(--ink); }
.we-button--quiet:hover { background:var(--surface-raised); color:var(--ink); }
.we-button:disabled { opacity:.55; cursor:default; }
.we-example :is(button,a):focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.we-recovery { margin-top:1.5rem; border-top:1px solid var(--rule-soft); padding-top:1rem; }
.we-recovery ol { padding-left:1.2rem; }
.we-recovery li { margin:.8rem 0; }
.we-recovery li strong,.we-recovery li span { display:block; font-size:.85rem; }
.we-recovery li span,.we-recovery>p { color:var(--ink-muted); font-size:.8rem; }
.we-understanding { border:1px solid var(--rule-soft); border-radius:.5rem; padding:1rem; margin:1rem 0 0; min-width:0; }
.we-understanding legend { font-weight:600; font-size:.9rem; padding:0 .25rem; }
.we-choice { display:block; width:100%; text-align:left; padding:.65rem .75rem; margin:.5rem 0; background:var(--surface); color:var(--ink); border:1px solid var(--rule-strong); border-radius:.4rem; cursor:pointer; font:inherit; font-size:.85rem; min-height:2.75rem; }
.we-choice[aria-pressed=true] { border-color:var(--institutional); background:var(--surface-raised); }
.we-understanding p { font-size:.85rem; margin:.5rem 0 0; }
.we-announcement { color:var(--ink-muted); font-size:.85rem; margin:1rem 0; }
.we-footer { border-top:1px solid var(--rule-soft); padding-top:1.5rem; margin-top:1.5rem; }
.we-footer>div { flex:1; min-width:0; }
.we-footer p { color:var(--ink-muted); font-size:.85rem; margin:.4rem 0 1rem; }
.we-evidence { display:block; color:var(--link); margin-top:1rem; font-size:.85rem; }
.we-progress { max-width:19rem; }
.we-reset { border:0; padding:.5rem 0; font:inherit; font-size:.85rem; color:var(--link); background:transparent; cursor:pointer; text-decoration:underline; min-height:2.75rem; }
.we-disclosure { grid-column:1/-1; min-width:0; }
.we-disclosure>summary { cursor:pointer; color:var(--link); padding:.75rem 0; font-weight:600; }
.we-example [hidden] { display:none!important; }
@media(max-width:45rem) { .we-heading,.we-footer { flex-direction:column; gap:.75rem; } .we-scope { flex-shrink:1; } .we-layout { grid-template-columns:minmax(0,1fr); } .we-story { grid-row:1; } .we-record { grid-row:2; } .we-mobile-summary { display:block; padding:.65rem .75rem; border:1px solid var(--rule-soft); border-radius:.4rem; font-size:.8rem; } .we-record-head>strong { font-size:2.2rem; } .we-facts>div { padding:.6rem 0; } .we-example .we-steps { gap:.35rem; } .we-steps button { width:2.75rem; height:2.75rem; } .we-progress { max-width:none; } .we-button { max-width:100%; } }