/* CCTV Privacy Law Mapper: a camera schedule from a security installation specification. White drawing bond, warm black ink,
   ruled title blocks, hexagonal keynote tags, one magenta for the checker's markup (a question stands here). Saira Semi
   Condensed lettering, Manrope reading text, Victor Mono for every number, clause and date. Hairlines; no fills, no shadows. */
:root {
  --paper: #fdfdfb; --ink: #1c1b19; --ink-2: #4a4843; --ink-3: #5d5a53; --rule: #cfccc4; --rule-2: #9b978c; --tint: #f4f3ef;
  --mark: #b0106f; --mark-2: #8f0c5a;
  --disp: 'Saira Semi Condensed', 'Arial Narrow', sans-serif; --body: 'Manrope', system-ui, sans-serif; --mono: 'Victor Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--body); text-rendering: geometricPrecision; }
button, input, select, textarea { text-rendering: geometricPrecision; font-family: inherit; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mark-2); }
code, .n { font-family: var(--mono); font-size: .86em; letter-spacing: -.02em; }
.d { font-family: var(--disp); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .01em; }
.tb-c .d, .kv .d, .cnt .d, .specimen .d, .pasted .d { font-family: var(--mono); font-weight: 500; font-size: .86em; letter-spacing: -.02em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.hint, .sub { color: var(--ink-3); font-size: 14px; }
.sub { font-size: 13px; }

/* header: the drawing's title strip, ruled, no fill */
.band { border-bottom: 1.5px solid var(--ink); }
header.site { display: flex; align-items: center; gap: 22px; padding: 14px 0; flex-wrap: wrap; }
.brand { font: 700 19px/1 var(--disp); letter-spacing: .01em; text-decoration: none; display: flex; align-items: center; gap: 10px; text-transform: uppercase; }
.brand .wm { white-space: nowrap; }
.brand em { font-style: normal; font-weight: 700; }
.hx { width: 22px; height: 20px; background: var(--ink); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); position: relative; flex: none; }
.hx::after { content: ''; position: absolute; inset: 2px; background: var(--paper); clip-path: inherit; }
header.site nav { display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto; font: 600 14px/1.2 var(--disp); letter-spacing: .04em; text-transform: uppercase; }
header.site nav a { text-decoration: none; color: var(--ink-2); padding: 4px 0; border-bottom: 1.5px solid transparent; }
header.site nav a[aria-current="page"], header.site nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
#nav-auth { display: inline-flex; gap: 16px; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 44px; padding: 40px 0 28px; }
.eyebrow { font: 600 13px/1.3 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
h1, h2, h3 { font-family: var(--disp); font-weight: 700; letter-spacing: -.005em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(32px, 4.6vw, 52px); margin-bottom: 18px; }
h1.ph { font-size: clamp(30px, 4vw, 44px); }
h2 { font-size: 26px; }
h3 { font-size: 19px; }
.lede { font-size: 17px; line-height: 1.62; color: var(--ink-2); margin: 0 0 20px; max-width: 64ch; }
.cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 22px; }
.cta .hint { flex-basis: 100%; }
.reads { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); counter-reset: r; }
.reads li { counter-increment: r; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.reads li::before { content: counter(r, decimal-leading-zero); font: 500 13px/1.7 var(--mono); color: var(--ink-3); grid-row: 1 / span 2; }
.reads li b { color: var(--ink); display: block; }
.side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
figure.person { margin: 0; }
figure.person img { width: 100%; height: auto; display: block; border: 1px solid var(--rule-2); }
figure.person figcaption { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); padding: 10px 0 0; border-top: 1px solid var(--rule); margin-top: 8px; }

/* buttons and fields */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--disp); letter-spacing: .05em; text-transform: uppercase; padding: 13px 18px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 2px; cursor: pointer; text-decoration: none; }
.btn:hover { background: #000; color: var(--paper); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--tint); color: var(--ink); }
.btn.small { font-size: 13px; padding: 9px 12px; }
.btn[aria-busy="true"] { opacity: .7; }
.plan-tag { font: 500 12px/1 var(--mono); border: 1px solid currentColor; padding: 2px 4px; margin-left: 4px; text-transform: none; letter-spacing: 0; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#actions { margin: 16px 0 6px; }

/* explain blocks */
.explain { padding: 30px 0; border-top: 1.5px solid var(--ink); margin-top: 18px; }
.explain h2 { margin-bottom: 12px; }
.explain .wide { max-width: 78ch; color: var(--ink-2); }
.form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--ink); }
.form > div { padding: 18px 20px; border-right: 1px solid var(--rule-2); }
.form > div:last-child { border-right: 0; }
.form .k { font: 500 13px/1 var(--mono); color: var(--ink-3); display: block; margin-bottom: 10px; }
.form h3 { margin-bottom: 8px; }
.form p { margin: 0; font-size: 15px; color: var(--ink-2); }
.notice { border: 1px solid var(--rule-2); border-left: 3px solid var(--ink); padding: 12px 16px; margin: 14px 0; font-size: 15px; background: var(--paper); }
.notice.gate { border-left-color: var(--mark); }

/* the tool */
.tool { border: 1.5px solid var(--ink); margin: 26px 0 0; background: var(--paper); }
.tool .bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.tool .bar:last-of-type { border-bottom: 0; }
.tool .bar .hint { font-size: 14px; line-height: 1.55; color: var(--ink-2); flex: 1 1 520px; }
.tool .bar .hint code { font-size: 12.5px; color: var(--ink); }
.tool .spacer { flex: 1; }
.paste { display: block; width: 100%; min-height: 190px; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 14px 16px; font: 13.5px/1.6 var(--mono); color: var(--ink); background: var(--paper); resize: vertical; }
.paste:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.ticks { border: 0; border-top: 1px solid var(--rule); margin: 0; padding: 12px 16px 16px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--ink-2); }
.ticks legend { font: 600 12px/1.3 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 12px 0 4px; float: left; width: 100%; }
.ticks label { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ticks input[type="number"] { width: 84px; }
.ticks input, .ticks select { font: 14px var(--mono); border: 1px solid var(--rule-2); border-radius: 2px; padding: 5px 6px; background: var(--paper); color: var(--ink); }

/* the first-screen excerpt */
.specimen { border: 1.5px solid var(--ink); }
.specimen .legend { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 600 12px/1.3 var(--disp); letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border-bottom: 1px solid var(--rule-2); color: var(--ink-2); }
.specimen .xrow { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.specimen .xrow .xm { font-size: 14px; line-height: 1.45; }
.specimen .xrow .xm b { font-family: var(--mono); font-weight: 500; font-size: 13px; }
.specimen .xrow .xl { font-size: 13px; color: var(--ink-3); }
.specimen .xrow .xf { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.specimen .cap { margin: 0; padding: 12px 12px 4px; font: 600 17px/1.35 var(--disp); }
.specimen .capsub { margin: 0; padding: 0 12px 12px; font-size: 13.5px; color: var(--ink-3); }

/* hexagonal keynote tag and the checker's revision delta */
.tag { width: 36px; height: 30px; background: var(--ink); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); display: inline-grid; place-items: center; position: relative; flex: none; }
.tag > span { position: absolute; inset: 1.5px; background: var(--paper); clip-path: inherit; display: grid; place-items: center; font: 500 12px/1 var(--mono); letter-spacing: -.03em; color: var(--ink); }
.delta { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; line-height: 1; }
.delta i { width: 14px; height: 12px; flex: none; background: var(--mark); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.delta.dq i { clip-path: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M7 1.3 13 11.2H1Z' fill='none' stroke='%23b0106f' stroke-width='1.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.delta b { font: 600 13px/1 var(--mono); color: var(--mark-2); min-width: 1.4em; }
.delta .fw { font: 600 13px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; color: var(--mark-2); }
.rqf { font: 600 12px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px dashed var(--ink-3); }
.sc { font: 600 12px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule-2); padding: 2px 4px; }
.gap { color: var(--ink-3); font-style: italic; }

/* the result: sheet, title blocks, schedule */
#result { margin-top: 26px; }
.autospec-note { color: var(--ink-3); }
.sheet { border: 1.5px solid var(--ink); margin-bottom: 26px; }
.tb { display: grid; grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule-2); }
.tb > div { padding: 10px 14px; border-right: 1px solid var(--rule-2); min-width: 0; }
.tb > div:last-child { border-right: 0; }
.tb-k { display: block; font: 600 12px/1.3 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.tb-t { display: block; font: 700 21px/1.25 var(--disp); }
.tb-c { font-size: 14px; }
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.strip .x { box-shadow: inset 0 -3px 0 var(--ink); }
.notice.cov { border: 2px solid var(--ink); border-left-width: 6px; margin: 0; font-size: 15px; }
.site-state { margin: 0; padding: 9px 14px; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.site-state b { font: 700 13px/1.4 var(--disp); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); margin-right: 6px; }
.site-state.s-named, .site-state.s-none { border-left: 6px solid var(--ink); }
.rqf.nm { color: var(--ink); border-bottom: 2px solid var(--ink); }
.strip > div { padding: 12px 14px; border-right: 1px solid var(--rule); }
.strip > div:last-child { border-right: 0; }
.strip b.n { display: block; font: 500 26px/1.1 var(--mono); }
.strip span { font-size: 13px; color: var(--ink-3); line-height: 1.35; display: block; }
.sheet .notice { margin: 12px 14px; }
.strip-note { margin: 0; padding: 7px 14px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--rule); }
details.pl summary { cursor: pointer; font-size: 13px; color: var(--ink-3); }
.priv { border-top: 2px solid var(--ink); margin: 0; padding: 12px 14px; }
.priv h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.priv ul { list-style: none; margin: 0; padding: 0; }
.priv li { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 15px; flex-wrap: wrap; }
.priv .tag { flex: none; width: 36px; min-width: 36px; }
.id { font-family: var(--mono); font-weight: 500; font-size: 13.5px; }

.sitesheet { border: 1.5px solid var(--ink); margin: 0 0 22px; }
.site-tb { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .7fr); }
.site-tb .tb-t { font-size: 19px; }
.site-sum { margin: 0; padding: 10px 14px; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--rule-2); }
.sch-head, ol.sch li.rec { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 2fr) 18px; gap: 0 12px; align-items: start; }
.sch-head { padding: 7px 14px; font: 600 12px/1.2 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule-2); }
.sch-head span:first-child { text-align: center; }
ol.sch { list-style: none; margin: 0; padding: 0; }
ol.sch li.rec { padding: 10px 14px; border-bottom: 1px solid var(--rule); cursor: pointer; font-size: 14.5px; }
ol.sch li.rec:last-child { border-bottom: 0; }
@media (hover: hover) { ol.sch li.rec:hover { background: var(--tint); } }
ol.sch li.priv-row { border-top: 2px solid var(--ink); }
ol.sch li.rec .tag { justify-self: center; }
.cam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cam .id { overflow-wrap: anywhere; }
.cnt { font-size: 12.5px; color: var(--ink-3); }
.fls { display: flex; flex-wrap: wrap; gap: 7px 14px; padding-right: 8px; }
.idx .delta i { background: var(--ink); }
.idx .delta b { color: var(--ink); }
.id, code { word-spacing: -.35ch; }
.why dl.ls { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 14px; margin: 0; }
.why dl.ls dt { color: var(--ink-3); }
.why dl.ls dd { margin: 0; }
.toggle::before { content: '+'; font: 500 16px/1 var(--mono); color: var(--ink-3); }
li.rec.open .toggle::before { content: '\2212'; }
.why { display: none; grid-column: 1 / -1; margin-top: 10px; border-top: 1px dashed var(--rule-2); padding-top: 8px; cursor: auto; }
li.rec.open .why { display: block; }
.why > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 5px 0; font-size: 14px; line-height: 1.55; border-bottom: 1px solid var(--tint); }
.why .k { font: 600 12px/1.7 var(--disp); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.pasted { font: 12.5px/1.6 var(--mono); overflow-wrap: anywhere; color: var(--ink-2); }
.refs { display: flex; flex-direction: column; gap: 4px; }
details.cl { border-left: 1.5px solid var(--rule-2); padding: 2px 0 2px 10px; }
details.cl summary { cursor: pointer; font-size: 14px; list-style: none; }
details.cl summary::-webkit-details-marker { display: none; }
details.cl summary::before { content: '+'; font: 500 14px/1 var(--mono); color: var(--ink-3); display: inline-block; width: 16px; }
details.cl[open] summary::before { content: '\2212'; }
details.cl summary .ref { font: 500 12.5px var(--mono); display: inline-block; min-width: 176px; white-space: nowrap; margin-right: 6px; }
.clb { padding: 6px 0 4px; }
p.q { margin: 4px 0 8px; padding: 8px 10px; background: var(--tint); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.k2 { font: 600 12px/1.3 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 8px 0 2px; }
.src { font-size: 13px; color: var(--ink-3); margin: 4px 0; }
.locked { color: var(--ink-2); }
.named { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 0; }

/* findings */
.finds { margin: 34px 0 10px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1.5px solid var(--ink); padding-bottom: 8px; margin-bottom: 10px; }
.folio { font: 500 13px/1.4 var(--mono); color: var(--ink-3); }
.legend-l { font-size: 13.5px; color: var(--ink-2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin: 0; padding: 9px 14px; border-top: 1px solid var(--rule); }
.legend-l > span { display: flex; gap: 8px; align-items: baseline; }
.legend-l .delta { transform: translateY(1px); }
.finds > details { border-bottom: 1px solid var(--rule); }
.finds > details > summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; cursor: pointer; list-style: none; }
.finds > details > summary::-webkit-details-marker { display: none; }
.fno { display: inline-flex; }
.fname { font: 700 17px/1.3 var(--disp); }
.fwho { font: 500 13px var(--mono); color: var(--ink-3); }
.fbody { padding: 0 0 16px 52px; font-size: 15px; color: var(--ink-2); }
.fbody > p, .fbody > .items, .fbody > .blocks { max-width: 80ch; }
.bygrp { font-size: 14px; color: var(--ink-3); }
.items { padding-left: 18px; margin: 8px 0; }
.items li { margin: 6px 0; font-size: 14.5px; }
.iq { color: var(--ink-3); font-size: 13.5px; }
.ask { border-bottom: 1px solid var(--rule); padding: 0 0 10px; margin: 0 0 10px; color: var(--ink); max-width: 80ch; }
.blocks { margin: 10px 0; display: flex; flex-direction: column; gap: 4px; }

/* shares */
.shares { margin: 30px 0; }
.twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.share-grid { border-top: 1.5px solid var(--ink); }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) 70px 70px; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.srow .c { text-align: right; font-family: var(--mono); font-size: 13.5px; }
.srow.head { font: 600 12px/1.3 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.srow.head .c { font-family: var(--disp); font-size: 12px; }
.srow.rem { color: var(--ink-3); }
.srow.tot { border-top: 1px solid var(--ink); border-bottom: 1.5px double var(--ink); font-weight: 600; }

/* generated pages */
.crumb { min-height: 18px; }
.prose { max-width: 76ch; padding-bottom: 30px; }
.prose p { color: var(--ink-2); }
.idx { columns: 2; column-gap: 34px; padding: 0; list-style: none; margin: 10px 0 24px; }
.idx li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.idx li .hint { display: block; font-size: 13px; }
.ctrl { border-top: 1px solid var(--rule-2); padding: 12px 0; }
.ctrl .ch { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.ctrl .ch code { font-weight: 500; }
.ctrl .ttl { font: 700 16px/1.3 var(--disp); }
.ctrl .ev { font-size: 14px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
span.q { background: var(--tint); }
.facts { display: grid; grid-template-columns: 180px minmax(0, 1fr); border-top: 1.5px solid var(--ink); margin: 10px 0 24px; }
.facts > * { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.facts dt { font: 600 12px/1.6 var(--disp); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink-2); }
table.plain { border-collapse: collapse; width: 100%; font-size: 14px; margin: 10px 0 20px; }
table.plain th, table.plain td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.plain th { font: 600 12px/1.3 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--ink); }
.tablewrap { overflow-x: auto; }
section.pg { margin: 24px 0; }
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--ink); }
.pricing > div { padding: 22px; border-right: 1px solid var(--rule-2); display: flex; flex-direction: column; gap: 8px; }
.pricing > div:last-child { border-right: 0; }
.pricing .price { font: 500 40px/1 var(--mono); }
.pricing .price small { font-size: 14px; margin-right: 4px; }
.pricing .per { font-size: 14px; color: var(--ink-3); }
.pricing ul { padding-left: 18px; margin: 6px 0 12px; flex: 1; font-size: 14.5px; color: var(--ink-2); }
.pricing .btn { align-self: flex-start; }
.list { border-top: 1.5px solid var(--ink); }
.list .item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; flex-wrap: wrap; }
.list .meta { font: 13px var(--mono); color: var(--ink-3); }

/* sign-in */
.modal { position: fixed; inset: 0; background: rgba(28, 27, 25, .45); display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal.open { display: flex; }
.modal .box { background: var(--paper); border: 1.5px solid var(--ink); padding: 22px; width: min(440px, 100%); }
.modal .legend { font: 700 18px var(--disp); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.modal input { width: 100%; font: 15px var(--body); padding: 10px; border: 1px solid var(--rule-2); border-radius: 2px; }
.ok { color: var(--ink); } .err { color: var(--mark-2); }

footer.site { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 26px 24px 40px; margin-top: 30px; background: linear-gradient(var(--ink), var(--ink)) 24px 0 / calc(100% - 48px) 1.5px no-repeat; font-size: 13.5px; color: var(--ink-3); }
footer.site a { color: var(--ink-2); }
footer.site span:first-child { font: 700 13.5px var(--disp); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
footer.site span:nth-last-child(-n+2) { flex-basis: 100%; line-height: 1.55; }

@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .form > div { border-right: 0; border-bottom: 1px solid var(--rule-2); }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip > div { border-bottom: 1px solid var(--rule); }
  .tb, .site-tb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tb > div { border-bottom: 1px solid var(--rule); }
  .tb-w { grid-column: 1 / -1; }
  .twin { grid-template-columns: minmax(0, 1fr); }
  .pricing { grid-template-columns: minmax(0, 1fr); }
  .pricing > div { border-right: 0; border-bottom: 1px solid var(--rule-2); }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  footer.site { padding: 22px 16px 34px; background-position: 16px 0; background-size: calc(100% - 32px) 1.5px; }
  header.site { gap: 10px; }
  header.site nav { margin-left: 0; gap: 16px; font-size: 13px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; max-width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  header.site nav::-webkit-scrollbar { display: none; }
  #nav-auth { gap: 16px; }
  .hero.home { display: flex; flex-direction: column; gap: 0; }
  .hero.home .hl, .hero.home .side { display: contents; }
  .hero.home .eyebrow { order: 1; } .hero.home h1 { order: 2; } .hero.home .specimen { order: 3; margin-bottom: 22px; } .hero.home .lede { order: 4; } .hero.home .cta { order: 5; } .hero.home .reads { order: 6; } .hero.home figure.person { order: 7; margin-top: 24px; }
  .sch-head { display: none; }
  ol.sch li.rec { grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 4px 10px; }
  ol.sch li.rec > .cam { grid-column: 2; }
  ol.sch li.rec > .cv, ol.sch li.rec > .av, ol.sch li.rec > .kv, ol.sch li.rec > .fls { grid-column: 2 / 4; font-size: 14px; }
  ol.sch li.rec > .cv::before, ol.sch li.rec > .av::before, ol.sch li.rec > .kv::before { content: attr(data-label) ' '; font: 600 12px/1.5 var(--disp); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
  ol.sch li.rec > .toggle { grid-column: 3; grid-row: 1; }
  .why > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fbody { padding-left: 0; }
  .finds > details > summary { grid-template-columns: 30px minmax(0, 1fr); }
  .finds > details > summary .fwho { grid-column: 2; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip b.n { font-size: 22px; }
  header.site nav a[href="/#tool"] { order: -3; } header.site nav a[href="/pricing"] { order: -2; } #nav-auth { order: -1; }
  .fbody .ask { padding-left: 0; }
  details.cl summary .ref { display: block; min-width: 0; }
  .tb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-tb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legend-l { grid-template-columns: minmax(0, 1fr); }
  .lede { font-size: 16px; }
  .idx { columns: 1; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { border-bottom: 0; padding-bottom: 0; }
  .srow { grid-template-columns: minmax(0, 1fr) 54px 60px; }
}
@media print { .band nav, .tool, #actions, .no-print, .cta, footer.site a { display: none !important; } li.rec .why { display: block; } }