/* ============================================================
   CLLCTD — pages.css
   Page-specific components: /footage brief builder, /samples
   request form, Commercial Ops console, design-system doc.
   Loaded after app.css on the relevant pages only.
   ============================================================ */

/* generic page hero */
.page-hero { max-width: var(--maxw); margin: 0 auto; padding: 80px var(--gutter) 40px; }
.page-hero h1 { font-family: var(--font-serif); font-weight: 800; font-size: 72px; line-height: .96; letter-spacing: -.015em; color: var(--cream); }
.page-hero .cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: end; }
.page-hero .cols p { font-size: 18px; line-height: var(--lh-body); color: var(--cream-dim); margin-bottom: 8px; }
@media (max-width: 980px){ .page-hero h1{ font-size: 52px; } .page-hero .cols{ grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 640px){ .page-hero h1{ font-size: 40px; } }

/* ---------- /footage — brief builder ---------- */
.builder-grid { max-width: var(--maxw); margin: 0 auto; padding: 48px var(--gutter) 40px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; }
.builder { border: 1px solid var(--line); border-radius: var(--r-panel); background: linear-gradient(165deg,#14100a,#0d0a06); padding: 34px 34px 30px; }
.builder .head { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .16em; color: var(--mute); margin-bottom: 26px; }
.builder .group { margin-bottom: 26px; }
.builder .group .glabel { font-size: 13px; font-weight: 600; color: var(--cream); margin-bottom: 12px; letter-spacing: -.01em; }
.builder .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; padding: 8px 13px; border-radius: 3px; border: 1px solid rgba(242,235,221,.14); background: transparent; color: var(--cream-dim); transition: border-color .18s, background .18s, color .18s; }
.opt:hover { border-color: rgba(234,166,58,.35); }
.opt.active { border-color: rgba(234,166,58,.55); background: rgba(234,166,58,.12); color: var(--amber); }
.match { position: sticky; top: 96px; border: 1px solid rgba(234,166,58,.28); border-radius: var(--r-panel); background: var(--panel-2); overflow: hidden; }
.match .m-head { padding: 20px 26px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.match .m-head .l { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .16em; color: var(--amber); }
.match .m-head .r { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--mute); }
.match .m-body { padding: 26px; }
.match .m-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.match .m-row .k { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; color: var(--mute); }
.match .m-row .v { font-size: 14px; color: var(--cream); text-align: right; max-width: 220px; }
.match .m-status { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 4px; background: rgba(11,8,5,.5); }
.match .m-status .line { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.match .m-status .line .d { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.match .m-status .line span { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; color: var(--cream); }
.match .m-status .meter { height: 3px; border-radius: 2px; background: rgba(242,235,221,.08); overflow: hidden; }
.match .m-status .meter i { display: block; height: 100%; background: var(--amber); transform-origin: left; }
.match .m-status p { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--mute); }
.match .m-cta { display: block; text-align: center; margin: 18px 0 0; }
.families { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.fam { position: relative; border: 1px solid var(--line); border-radius: 5px; padding: 26px 24px; background: var(--panel-2); min-height: 196px; display: flex; flex-direction: column; transition: border-color .22s, transform .22s; }
.fam:hover { border-color: rgba(234,166,58,.4); transform: translateY(-3px); }
.fam .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--amber); }
.fam h3 { margin: 12px 0; font-size: 20px; font-weight: 600; color: var(--cream); letter-spacing: -.01em; }
.fam p { font-size: 14px; line-height: 1.55; color: var(--cream-dim); margin-bottom: 18px; }
.fam .seq { margin-top: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--mute); }
.boundary { border-left: 2px solid var(--amber); background: linear-gradient(90deg,rgba(234,166,58,.07),transparent); padding: 22px 26px; border-radius: 0 4px 4px 0; }
.boundary p { font-size: 14px; line-height: var(--lh-body); color: var(--cream-dim); max-width: 900px; }
@media (max-width: 980px){ .builder-grid{ grid-template-columns: 1fr; } .match{ position: static; } .families{ grid-template-columns: 1fr; } }

/* ---------- /samples — request form ---------- */
.form-wrap { max-width: 1080px; margin: 0 auto; padding: 72px var(--gutter) 96px; }
.form-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.form-card { border: 1px solid var(--line); border-radius: var(--r-panel); background: linear-gradient(170deg,#14100a,#0d0a06); overflow: hidden; }
.stepper { display: flex; border-bottom: 1px solid var(--line); }
.stepper .step { flex: 1; padding: 20px 26px; position: relative; }
.stepper .step + .step { border-left: 1px solid var(--line); }
.stepper .step .bar { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.stepper .step.on .bar, .stepper .step.done .bar { transform: scaleX(1); }
.stepper .step .n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--mute); }
.stepper .step.on .n, .stepper .step.done .n { color: var(--amber); }
.stepper .step .t { font-size: 15px; font-weight: 600; color: var(--mute); margin-top: 5px; }
.stepper .step.on .t, .stepper .step.done .t { color: var(--cream); }
.form-body { padding: 32px 30px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--mute); }
.field input, .field select, .field textarea { background: var(--ink); border: 1px solid rgba(242,235,221,.14); border-radius: 3px; padding: 12px 14px; color: var(--cream); font-size: 15px; outline: none; font-family: var(--font-sans); transition: border-color .18s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(234,166,58,.55); }
.field.err input, .field.err select { border-color: rgba(224,115,59,.7); }
.field textarea { resize: vertical; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-stage { display: flex; flex-direction: column; gap: 20px; }
.checkbox { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.checkbox input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.checkbox:focus-within .box { outline: 2px solid var(--amber-hi); outline-offset: 3px; }
.checkbox .box { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 3px; border: 1px solid rgba(242,235,221,.14); display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 13px; font-weight: 700; margin-top: 1px; transition: background .16s; }
.checkbox.on .box { background: var(--amber); }
.checkbox.err .box { border-color: rgba(224,115,59,.7); }
.checkbox span.txt { font-size: 14px; line-height: 1.5; color: var(--cream-dim); }
.form-err { font-family: var(--font-mono); font-size: 12px; color: var(--warn); }
.form-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; }
.form-actions.end { justify-content: flex-end; }
.btn-back { background: transparent; color: var(--cream-dim); border: 1px solid rgba(242,235,221,.16); padding: 14px 22px; border-radius: 3px; font-size: 15px; cursor: pointer; }
.btn-submit { background: var(--amber); color: var(--ink); border: none; padding: 14px 26px; border-radius: 3px; font-weight: 600; font-size: 15px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.spinner { width: 14px; height: 14px; border: 2px solid rgba(11,8,5,.35); border-top-color: var(--ink); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
.result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 24px 0; animation: fadeUp .4s ease; }
.result .ring { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.result.ok .ring { border: 1px solid rgba(234,166,58,.5); background: rgba(234,166,58,.1); color: var(--amber); }
.result.bad .ring { border: 1px solid rgba(224,115,59,.5); background: rgba(224,115,59,.1); color: var(--warn); }
.result h2 { font-family: var(--font-serif); font-weight: 800; font-size: 34px; color: var(--cream); }
.result p { font-size: 15px; line-height: var(--lh-body); color: var(--cream-dim); max-width: 440px; }
.result .ref { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; color: var(--mute); }
.next-steps { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--panel-2); padding: 26px 24px; }
.next-steps .h { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; color: var(--amber); margin-bottom: 22px; }
.next-steps .ns { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.next-steps .ns .num { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--amber); flex: 0 0 auto; }
.next-steps .ns .t { font-size: 14px; font-weight: 600; color: var(--cream); }
.next-steps .ns .d { font-size: 12px; line-height: 1.45; color: var(--mute); }
.next-steps > p { margin-top: 18px; font-size: 12px; line-height: 1.5; color: var(--faint); }
.hidden { display: none !important; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
@media (max-width: 980px){ .form-grid{ grid-template-columns: 1fr; } .next-steps{ position: static; } }
@media (max-width: 640px){ .f-row{ grid-template-columns: 1fr; } }

/* ---------- Commercial Ops console ---------- */
.console { display: flex; min-height: 100vh; background: var(--ink-2); }
.side { width: 220px; flex: 0 0 220px; border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side .brand { padding: 24px 24px 22px; border-bottom: 1px solid var(--line-soft); }
.side .brand .sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; color: var(--faint); margin-top: 4px; }
.side nav { padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.side .nav-item { cursor: pointer; padding: 9px 14px; border-radius: 4px; font-size: 14px; color: var(--cream-dim); display: flex; align-items: center; justify-content: space-between; transition: background .16s, color .16s; }
.side .nav-item:hover { background: rgba(242,235,221,.04); }
.side .nav-item.active { color: var(--amber); background: rgba(234,166,58,.1); }
.side .nav-item .c { font-family: var(--font-mono); font-size: 10px; color: var(--mute); }
.side .foot { padding: 18px 22px; border-top: 1px solid var(--line-soft); }
.side .foot .who { font-family: var(--font-mono); font-size: 11px; color: var(--cream-dim); }
.side .foot .out { font-size: 12px; color: var(--faint); margin-top: 4px; cursor: pointer; }
.ops-main { flex: 1; min-width: 0; padding: 34px 44px 80px; position: relative; }
.ops-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.ops-top .eyebrow { margin-bottom: 10px; }
.ops-top h1 { font-family: var(--font-serif); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.01em; color: var(--cream); }
.ops-top .sub { font-size: 14px; color: var(--mute); margin-top: 8px; }
.ops-badge { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(234,166,58,.3); background: rgba(234,166,58,.07); border-radius: 4px; padding: 8px 14px; flex: 0 0 auto; }
.ops-badge .d { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.ops-badge span { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .06em; color: var(--amber); }
.ops-view { animation: fadeUp .3s ease; }
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 20px; }
.stat { border: 1px solid var(--line); border-radius: 5px; padding: 22px 24px; background: var(--panel); }
.stat .n { font-family: var(--font-serif); font-weight: 800; font-size: 38px; color: var(--cream); line-height: 1; }
.stat .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--mute); margin-top: 10px; }
.ops-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-bottom: 20px; }
.ops-panel { border: 1px solid var(--line); border-radius: 5px; padding: 26px; background: var(--panel); }
.ops-panel h3 { font-size: 18px; font-weight: 600; color: var(--cream); margin-bottom: 8px; }
.ops-panel .pdesc { font-size: 13px; color: var(--mute); margin-bottom: 22px; }
.pipe { display: flex; gap: 8px; }
.pipe .col { flex: 1; border: 1px solid var(--line); border-radius: 4px; padding: 14px 10px; text-align: center; }
.pipe .col.hot { border-color: rgba(234,166,58,.3); background: rgba(234,166,58,.05); }
.pipe .col .n { font-family: var(--font-serif); font-weight: 800; font-size: 24px; color: #4a4539; }
.pipe .col.hot .n { color: var(--cream); }
.pipe .col .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--mute); margin-top: 6px; }
.bstat { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 10px; }
.bstat.hot { border-color: rgba(234,166,58,.25); background: rgba(234,166,58,.05); }
.bstat .l { font-size: 13px; color: var(--cream-dim); }
.bstat.hot .l { color: var(--cream); }
.bstat .v { font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
.bstat.hot .v { color: var(--amber); }
.qitem { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.qitem .qtag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--ink); padding: 4px 8px; border-radius: 3px; flex: 0 0 auto; }
.qitem .qtext { font-size: 14px; color: var(--cream); flex: 1; }
.qitem .qwhen { font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
.act { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.act .time { font-family: var(--font-mono); font-size: 10px; color: var(--faint); flex: 0 0 66px; }
.act .t { font-size: 13px; color: var(--cream); }
.act .d { font-size: 12px; color: var(--mute); }
.tablewrap { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.trow { display: grid; padding: 15px 20px; border-bottom: 1px solid var(--line-soft); align-items: center; }
.trow.head { background: var(--panel); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--mute); padding: 12px 20px; }
.trow.body { cursor: pointer; transition: background .15s; }
.trow.body:hover { background: rgba(242,235,221,.03); }
.trow .claim { font-size: 14px; color: var(--cream); padding-right: 16px; }
.trow .m { font-family: var(--font-mono); font-size: 11px; color: var(--cream-dim); }
.trow .s { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; }
.ops-note { margin-top: 16px; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .04em; color: var(--faint); }
.ops-search { display: flex; gap: 12px; margin-bottom: 20px; }
.ops-search input, .ops-search select { background: var(--ink); border: 1px solid rgba(242,235,221,.14); border-radius: 4px; padding: 12px 16px; color: var(--cream); font-size: 14px; outline: none; font-family: var(--font-sans); }
.ops-search input { flex: 1; }
/* drawer */
.scrim { position: fixed; inset: 0; background: rgba(6,4,3,.6); z-index: 60; animation: fadeUp .2s ease; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw; background: var(--panel); border-left: 1px solid rgba(242,235,221,.12); z-index: 61; overflow-y: auto; animation: drawerIn .28s var(--ease-out); box-shadow: -30px 0 60px -20px rgba(0,0,0,.7); }
@keyframes drawerIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer .d-head { padding: 26px 28px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.drawer .d-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--amber); margin-bottom: 8px; }
.drawer .d-title { font-size: 20px; font-weight: 600; color: var(--cream); letter-spacing: -.01em; }
.drawer .d-close { cursor: pointer; font-size: 22px; color: var(--mute); line-height: 1; flex: 0 0 auto; background: none; border: none; }
.drawer .d-warn { margin: 20px 28px 0; border: 1px solid rgba(224,115,59,.4); background: rgba(224,115,59,.08); border-radius: 4px; padding: 13px 16px; display: flex; gap: 10px; align-items: flex-start; }
.drawer .d-warn span { color: #e6a884; font-size: 13px; line-height: 1.5; }
.drawer .d-rows { padding: 22px 28px; }
.drawer .d-r { display: flex; flex-direction: column; gap: 5px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.drawer .d-r .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--mute); }
.drawer .d-r .v { font-size: 14px; line-height: 1.5; color: var(--cream); }
.drawer .d-actions { padding: 8px 28px 30px; display: flex; gap: 12px; }
.toast { position: fixed; bottom: 28px; right: 28px; z-index: 70; background: #171009; border: 1px solid rgba(234,166,58,.4); border-radius: 5px; padding: 14px 20px; display: flex; align-items: center; gap: 12px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); animation: fadeUp .28s var(--ease-out); }
.toast .d { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.toast span { font-size: 14px; color: var(--cream); }
@media (max-width: 860px){ .side{ display: none; } .ops-main{ padding: 24px; } .stat-row{ grid-template-columns: repeat(2,1fr); } .ops-cols{ grid-template-columns: 1fr; } }

/* ---------- design system doc ---------- */
.ds { display: flex; min-height: 100vh; }
.ds .toc { width: 230px; flex: 0 0 230px; border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; padding: 34px 26px; display: flex; flex-direction: column; gap: 26px; }
.ds .toc nav { display: flex; flex-direction: column; gap: 3px; }
.ds .toc nav a { font-size: 13px; color: var(--cream-dim); padding: 5px 0; }
.ds .toc .links { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 11px; }
.ds main { flex: 1; min-width: 0; max-width: 1000px; padding: 48px 56px 100px; }
.ds h2 { font-family: var(--font-serif); font-weight: 800; font-size: 32px; color: var(--cream); margin-bottom: 8px; }
.ds section { margin-bottom: 64px; }
.ds .sw-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.ds .sw { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.ds .sw .chip { height: 76px; border-bottom: 1px solid var(--line-soft); }
.ds .sw .meta { padding: 12px 14px; }
.ds .sw .meta .n { font-size: 13px; font-weight: 600; color: var(--cream); }
.ds .sw .meta .hex { font-family: var(--font-mono); font-size: 11px; color: var(--mute); margin-top: 4px; }
.ds .sw .meta .u { font-family: var(--font-mono); font-size: 10px; color: var(--faint); margin-top: 2px; }
.ds .row-list { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ds .row-list .r { padding: 26px 28px; border-bottom: 1px solid var(--line-soft); }
.ds .row-list .r .lab { font-family: var(--font-mono); font-size: 11px; color: var(--mute); margin-top: 12px; }
.ds .mt-tbl { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ds .mt-tbl .h, .ds .mt-tbl .r { display: grid; grid-template-columns: 1fr 1.4fr 1fr; padding: 12px 20px; }
.ds .mt-tbl .h { background: var(--panel); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--mute); }
.ds .mt-tbl .r { border-bottom: 1px solid var(--line-soft); align-items: center; }
.ds .mt-tbl .r .tok { font-family: var(--font-mono); font-size: 12px; color: var(--amber); }
.ds .mt-tbl .r .val { font-family: var(--font-mono); font-size: 12px; color: var(--cream); }
.ds .mt-tbl .r .use { font-size: 13px; color: var(--mute); }
.ds .spec-card { border: 1px solid var(--line); border-radius: 6px; padding: 22px 24px; background: var(--panel-2); margin-bottom: 14px; }
.ds .spec-card .sc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ds .spec-card h3 { font-size: 17px; font-weight: 600; color: var(--cream); }
.ds .spec-card .cx { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--ink); padding: 4px 9px; border-radius: 3px; }
.ds .spec-card .rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.ds .spec-card .rows .rr { display: flex; gap: 10px; }
.ds .spec-card .rows .rr .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--mute); flex: 0 0 96px; }
.ds .spec-card .rows .rr .v { font-size: 13px; line-height: 1.45; color: var(--cream-dim); }
.ds .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ds .a11y { border: 1px solid var(--line); border-radius: 5px; padding: 20px 22px; background: var(--panel-2); }
.ds .a11y .t { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ds .a11y .t .d { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.ds .a11y .t span { font-size: 14px; font-weight: 600; color: var(--cream); }
.ds .a11y p { font-size: 13px; line-height: 1.55; color: var(--mute); }
@media (max-width: 860px){ .ds .toc{ display: none; } .ds main{ padding: 32px 24px; } .ds .sw-grid{ grid-template-columns: repeat(2,1fr); } .ds .a11y-grid{ grid-template-columns: 1fr; } .ds .spec-card .rows{ grid-template-columns: 1fr; } .ds .mt-tbl .h, .ds .mt-tbl .r{ grid-template-columns: 1fr 1fr; } }