/* Module-catalog rules from design-modules.html. */
.spec{padding:40px 0 0}
.spec-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.spec-head .num{font-family:var(--font-display);font-size:15px;color:var(--accent)}
.spec-head h2{font-family:var(--font-body);font-weight:700;font-size:16px;letter-spacing:.01em;color:var(--fg)}
.spec-head code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:2px 8px}
.spec-note{color:var(--muted);font-size:13px;margin:12px 0 0;max-width:72ch}
.spec-demo{margin-top:14px;padding:24px;background:var(--bg);border:1px dashed var(--border);border-radius:10px}
.spec-demo--white{background:var(--surface)}
.state-line{font-size:12px;color:var(--muted);margin-top:10px;border-top:1px dashed var(--border);padding-top:10px}
.state-line a{color:var(--fg)}
.grp{margin-top:64px}
.grp-head{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--fg);padding-bottom:12px;border-bottom:2px solid var(--fg);position:relative;letter-spacing:-.01em}
.grp-head::after{content:"";position:absolute;left:0;bottom:-2px;width:56px;height:2px;background:var(--accent)}
.grp-note{color:var(--muted);font-size:13px;margin-top:10px;max-width:72ch}
.demo-mobile{width:390px;max-width:100%;border:1px solid var(--border);border-radius:10px;padding:16px;background:var(--bg);overflow:hidden}
.demo-row{display:grid;grid-template-columns:1fr 390px;gap:16px;align-items:start}
.demo-row .dl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.demo-col{min-width:0}
details.sample{margin-top:10px}
details.sample summary{font-size:12px;font-weight:700;color:var(--fg);cursor:pointer}
details.sample pre{margin-top:8px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11px;line-height:1.5;background:var(--fg);color:#e8e8e8;border-radius:6px;padding:12px;overflow-x:auto}
.hotel-list{margin:0}
.wrap--hero{padding-top:40px}
.wrap--hero .note{max-width:64ch;color:var(--muted);font-size:15px;margin-top:12px}
@media (max-width:900px){.demo-row{grid-template-columns:1fr}}