/* Employee Monitoring Law Planner: a works agreement annex. White bond, violet-black ink, the practice-by-location matrix up
   front, one numbered annex per location with section-numbered provisions and a blank "noted by" line at its foot. Colour
   means one of three things only: blue-violet, a representative step owed (a margin bracket); vermilion, what a location
   does not allow (a hatch); grey dashed, official guidance that is not law. Host Grotesk throughout, Google Sans Code for
   every provision number, date, count and threshold. Hairlines; 4px only on controls and cell marks. */
:root {
  --paper: #fdfdfb; --ink: #1e1c26; --ink-2: #45434e; --ink-3: #5f5d66; --rule: #d6d4dc; --rule-2: #9a97a4; --tint: #f3f2f6;
  --rep: #4a3f9a; --rep-2: #362d7a; --bar: #a83b1c;
  --body: 'Host Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Google Sans Code', 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(--rep); }
code, .n, .d { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font-size: .86em; }
.d { font-size: .9em; font-weight: 500; white-space: nowrap; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.hint, .sub { color: var(--ink-3); font-size: 14px; }
.sub { font-size: 13.5px; }

/* the agreement head: a 2px ink rule, the wordmark and the running line, a hairline under */
.band { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); background: var(--paper); }
header.site { display: flex; align-items: center; gap: 22px; min-height: 60px; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.brand .wm { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.brand .wm em { font-style: normal; font-weight: 500; }
.brand .sg { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
header.site nav { margin-left: auto; display: flex; gap: 18px; align-items: center; font-size: 15px; }
header.site nav a { text-decoration: none; color: var(--ink-2); }
header.site nav a[aria-current="page"], header.site nav a:hover { color: var(--ink); text-decoration: underline; }
#nav-auth { display: flex; gap: 16px; }

h1, h2, h3 { letter-spacing: -.015em; line-height: 1.15; margin: 0; }
h1 { font-size: 44px; font-weight: 700; max-width: 17em; }
h1.ph { font-size: 38px; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 19px; font-weight: 650; }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-bottom: 14px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 44px; padding: 40px 0 28px; }
.lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 18px 0 0; max-width: 36em; }
.lede ul { margin: 8px 0 8px; padding-left: 20px; }
.lede li { margin: 2px 0; }
.cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 22px 0 6px; }
.reads { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--rule); counter-reset: r; }
.reads li { position: relative; padding: 11px 0 11px 34px; border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); counter-increment: r; }
.reads li::before { content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 12px; font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.reads li b { color: var(--ink); font-weight: 650; }
.side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
figure.person { margin: 0; }
figure.person img { width: 100%; height: auto; display: block; }
figure.person figcaption { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin-top: 10px; }

.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 4px; padding: 11px 18px; font: 600 15.5px/1.2 var(--body); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--rep-2); border-color: var(--rep-2); color: var(--paper); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--tint); color: var(--ink); border-color: var(--ink); }
.btn.small { padding: 8px 13px; font-size: 14.5px; }
.btn[aria-busy="true"] { opacity: .7; }
.plan-tag { font: 500 11.5px/1 var(--mono); border: 1px solid currentColor; border-radius: 4px; padding: 3px 5px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#actions { margin: 16px 0 0; }

.explain { padding: 30px 0 8px; }
.explain h2 { margin-bottom: 10px; }
.explain .wide { max-width: 50em; color: var(--ink-2); }
.form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.form > div { padding: 16px 20px 18px 0; border-right: 1px solid var(--rule); margin-right: 20px; }
.form > div:last-child { border-right: 0; margin-right: 0; }
.form .k { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.form h3 { margin: 6px 0 8px; }
.form p { margin: 0; color: var(--ink-2); font-size: 15px; }
.notice { border-left: 3px solid var(--rule-2); padding: 6px 0 6px 14px; font-size: 15px; margin: 12px 0; }
.notice.gate { border-left-color: var(--ink); }
.notice.cols ul { margin: 6px 0; padding-left: 18px; }

/* the paste */
.tool { margin: 26px 0 0; border: 1px solid var(--rule-2); background: #fff; }
.tool .bar { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.tool .bar:last-of-type { border-bottom: 0; border-top: 1px solid var(--rule); }
.tool .bar .hint { font-size: 14px; color: var(--ink-2); flex: 1 1 520px; }
.tool .bar .hint code { background: var(--tint); padding: 0 3px; }
.tool .spacer { flex: 1; }
.paste { display: block; width: 100%; min-height: 190px; border: 0; padding: 14px; font: 13.5px/1.55 var(--mono); color: var(--ink); background: #fff; resize: vertical; }
.paste:focus { outline: 2px solid var(--rep); outline-offset: -2px; }
.ticks { border: 0; border-top: 1px solid var(--rule); margin: 0; padding: 12px 14px 14px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; color: var(--ink-2); }
.ticks legend { font-size: 13.5px; color: var(--ink-3); padding: 0; float: left; width: 100%; margin-bottom: 4px; }
.ticks label { display: inline-flex; gap: 7px; align-items: center; }
.ticks input, .ticks select { font: 14px var(--body); border: 1px solid var(--rule-2); border-radius: 4px; padding: 4px 6px; background: #fff; color: var(--ink); }
.ticks input[type="number"] { width: 86px; font-family: var(--mono); }

/* the first-screen specimen excerpt */
.specimen { border: 1px solid var(--rule-2); background: #fff; }
.specimen .legend { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-3); flex-wrap: wrap; }
.specimen .xrow { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 4px 12px; padding: 11px 14px; border-bottom: 1px solid var(--rule); position: relative; }
.specimen .xrow.owes-rep::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--rep); }
.specimen .xrow .sec { font-family: var(--mono); font-size: 13px; color: var(--ink-3); padding-top: 2px; }
.specimen .xrow .xm b { font-weight: 650; }
.specimen .xrow .xl { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.specimen .xrow .xf { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.specimen .cap { font-size: 17px; font-weight: 650; line-height: 1.4; padding: 12px 14px 4px; margin: 0; }
.specimen .capsub { font-size: 13.5px; color: var(--ink-3); padding: 0 14px 12px; margin: 0; }

/* finding stamps: a number and its name; a question stamp is outlined */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 4px; padding: 4px 7px 4px 5px; white-space: nowrap; }
.st b { font: 600 12px/1 var(--mono); }
.st.sq { background: #fff; color: var(--ink); border-style: solid; }
.st.s-rep { background: var(--rep); border-color: var(--rep); }
.st.s-rep.sq { background: #fff; color: var(--rep); }
.st.s-bar { background: var(--bar); border-color: var(--bar); }
.st.s-bar.sq { background: #fff; color: var(--bar); }
.st .fw { font-weight: 500; }
.gap { color: var(--ink-3); font-style: italic; }
.gd { display: inline-block; font-size: 12.5px; line-height: 1.3; color: var(--ink-3); border: 1px dashed var(--rule-2); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.uv { display: inline-block; font-size: 13px; line-height: 1.35; color: var(--ink-2); text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; }
.nt { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin-top: 4px; }

/* the result */
#result { margin: 30px 0 0; }
.autospec-note { color: var(--ink-3); }
.sheet { border-top: 2px solid var(--ink); }
.ahead { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--ink-3); }
.ahead .ah-k { font-weight: 700; color: var(--ink); font-size: 15px; }
.sheet h2.hl { font-size: 26px; line-height: 1.25; margin: 18px 0 16px; max-width: 34em; }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.strip > div { padding: 12px 16px; border-left: 1px solid var(--rule); }
.strip > div:first-child { border-left: 0; padding-left: 0; }
.strip b.n { display: block; font: 600 30px/1.1 var(--mono); }
.strip b.n small { font-size: 16px; font-weight: 500; color: var(--ink-3); }
.strip span { display: block; font-size: 14px; line-height: 1.35; color: var(--ink-2); margin-top: 4px; }
.strip b.n small { display: inline; }
.strip-note { font-size: 14.5px; color: var(--ink-2); margin: 12px 0; max-width: 60em; }
.sheet .notice { margin: 10px 0; }

/* the matrix: one row per practice, one column per location */
.mx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 26px 0 8px; }
.mx-head h3 { font-size: 18px; }
.mx-wrap { overflow-x: auto; max-width: 100%; margin: 0 0 6px; border: 1px solid var(--rule-2); background: #fff; box-shadow: inset -10px 0 8px -8px rgba(30, 28, 38, .22); }
.mx-list { display: none; }
table.mx { border-collapse: collapse; min-width: 100%; font-size: 13px; }
table.mx th, table.mx td { border: 1px solid var(--rule); vertical-align: top; padding: 6px 7px; text-align: left; }
table.mx thead th { background: var(--tint); font-weight: 600; font-size: 13px; white-space: nowrap; }
table.mx thead th a { text-decoration: none; }
table.mx th.mx-p { min-width: 170px; max-width: 210px; font-weight: 600; background: #fff; position: sticky; left: 0; z-index: 1; }
table.mx thead th.mx-p { background: var(--tint); }
table.mx td { min-width: 150px; position: relative; }
table.mx td.mx-e .sub { color: var(--rule-2); }
table.mx th.mx-p a { font-weight: 600; text-decoration-color: var(--rule-2); }
table.mx td.mx-e { min-width: 60px; }
table.mx td.mx-e { background: var(--paper); }
.mx-cell { display: block; text-decoration: none; color: inherit; }
table.mx td.has-rep { box-shadow: inset 3px 0 0 var(--rep); }
.mx-a { display: flex; flex-direction: column; gap: 2px; }
.mk { display: block; font: 500 13px/1.3 var(--body); color: var(--ink-2); max-width: 180px; }
.mk.m-rep { color: var(--rep); font-weight: 650; }
.mk.m-x { color: var(--bar); font-weight: 650; border-left: 2px solid var(--bar); padding-left: 6px; }
.mk.m-xg { color: var(--ink-3); font-style: italic; }
.mk.m-n { color: var(--ink); }
.mx-f { display: block; margin-top: 5px; font: 500 12px/1.3 var(--mono); color: var(--ink-3); white-space: nowrap; }
.legend-l { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: var(--ink-2); margin: 10px 0 0; align-items: center; }
.legend-l > span { display: inline-flex; gap: 6px; align-items: center; }
.legend-l .mk { display: inline-block; }
.legend-l .st { padding: 3px 6px; font: 600 12px/1 var(--mono); }

/* one annex per location */
.annex { margin: 34px 0 0; border-top: 2px solid var(--ink); }
.an-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; padding: 12px 0 8px; }
.an-head .an-k { font-size: 15px; color: var(--ink-2); }
.an-head .an-k b { font: 600 22px/1 var(--mono); color: var(--ink); margin-left: 4px; }
.an-head h3 { font-size: 22px; }
.an-head h3 a { text-decoration: none; }
.an-head .an-c { font-size: 14.5px; color: var(--ink-2); }
dl.an-facts { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 16px; margin: 0 0 10px; font-size: 14.5px; }
dl.an-facts dt { color: var(--ink-3); font-size: 13.5px; }
dl.an-facts .d { font-weight: 400; }
dl.an-facts dd { margin: 0; color: var(--ink-2); }
dl.an-facts dd.laws .lw { display: block; }
article.ln { position: relative; border-top: 1px solid var(--rule); padding: 12px 0 12px 18px; }
article.ln.owes-rep::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--rep); }
.ln-h { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; }
.ln-h .sec { font-size: 14px; color: var(--ink-3); padding-top: 1px; white-space: nowrap; }
.ln-t b { font-weight: 650; font-size: 16.5px; }
.ln-t > .sub { display: block; }
.ln-m { font-size: 14.5px; color: var(--ink-2); margin-top: 1px; }
.ln-s { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 420px; }
ul.obl { list-style: none; margin: 10px 0 0 78px; padding: 0; border-top: 1px dotted var(--rule-2); }
ul.obl li.ob { display: grid; grid-template-columns: 170px minmax(0, 1fr) 190px; gap: 4px 14px; padding: 7px 0; border-bottom: 1px dotted var(--rule); font-size: 14.5px; line-height: 1.5; }
ul.obl li.ob .sl { font-weight: 600; color: var(--ink); }
ul.obl li.ob.rp .sl { color: var(--rep); }
ul.obl li.ob .nh { display: block; font-weight: 600; font-size: 12.5px; color: var(--bar); }
ul.obl li.ob.barg .nh { color: var(--ink-3); font-weight: 500; font-style: italic; }
ul.obl li.ob .sy { color: var(--ink-2); overflow-wrap: anywhere; }
ul.obl li.ob .rc { font-size: 14px; color: var(--ink); }
.rc .rk { display: block; font-size: 12.5px; color: var(--ink-3); }
.rc .gap::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--ink); margin-right: 6px; vertical-align: 1px; }
.rc .gap { color: var(--ink); font-style: normal; font-weight: 650; }
.refs { display: inline; }
.refs .ref, span.ref { font: 400 12.5px/1.4 var(--mono); color: var(--ink-3); white-space: nowrap; }
.refs .ref { margin-right: 6px; }
.refs .ref:not(:last-child)::after { content: ';'; }
.named { font-size: 13.5px; color: var(--ink-3); }
p.un { margin: 8px 0 0 78px; font-size: 13.5px; color: var(--ink-3); }
.locked { margin: 8px 0 0 78px; font-size: 14.5px; color: var(--ink-2); }
.fbody .locked { margin: 8px 0 0; }
.noted { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 16px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-3); }
.noted span { display: flex; flex-direction: column; gap: 22px; }
.noted i { display: block; border-bottom: 1px solid var(--rule-2); }

/* provisions in full (paid, and the specimen) */
details.cl { border-top: 1px dotted var(--rule); padding: 6px 0; }
details.cl summary { cursor: pointer; list-style: none; font-size: 14.5px; line-height: 1.45; }
details.cl summary::-webkit-details-marker { display: none; }
details.cl summary::before { content: '\25B8'; display: inline-block; width: 16px; color: var(--ink-3); }
details.cl[open] summary::before { content: '\25BE'; }
details.cl summary .ct { color: var(--ink-2); }
.clb { padding: 6px 0 4px 16px; }
p.q, span.q { color: var(--ink-2); }
p.q { font-size: 14.5px; margin: 4px 0; border-left: 2px solid var(--rule); padding-left: 10px; max-width: 75ch; }
.k2 { font-size: 13px; font-weight: 600; color: var(--ink-3); margin: 8px 0 0; }
.src { font-size: 13.5px; color: var(--ink-3); margin: 6px 0 0; }

.finds { margin: 40px 0 0; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 2px solid var(--ink); padding: 10px 0 8px; flex-wrap: wrap; }
.folio { font-size: 14px; color: var(--ink-3); }
.finds > details { border-top: 1px solid var(--rule); }
.finds > details > summary { display: grid; grid-template-columns: 30px auto 1fr; gap: 10px; align-items: baseline; padding: 12px 0; cursor: pointer; list-style: none; }
.fno .st { background: none; color: var(--ink); border: 0; padding: 0; font: 600 15px/1 var(--mono); }
.finds > details > summary::-webkit-details-marker { display: none; }
.fname { font-weight: 650; font-size: 16.5px; }
.fwho { font-size: 14px; color: var(--ink-3); white-space: nowrap; justify-self: start; }
.fbody { padding: 0 0 16px 40px; max-width: calc(75ch + 40px); }
.fbody > p { margin: 6px 0; color: var(--ink-2); font-size: 15px; }
.ask { color: var(--ink) !important; }
.items { margin: 8px 0; padding-left: 18px; font-size: 14.5px; color: var(--ink-2); }
.items li { margin: 3px 0; }
.blocks { margin-top: 8px; }

.shares { margin: 36px 0 0; }
.share-grid { max-width: 560px; }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) 70px 80px; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.srow .c { text-align: right; }
.srow.head { font-size: 13.5px; color: var(--ink-3); }
.srow.rem { color: var(--ink-2); }
.srow.tot { border-top: 2px solid var(--ink); font-weight: 600; }

/* generated pages */
.crumb { font-size: 14px; }
.prose { max-width: 50em; }
.prose p { color: var(--ink-2); }
.idx { columns: 2; column-gap: 34px; padding-left: 18px; }
.idx li { margin: 4px 0; break-inside: avoid; }
.idx li .hint { display: block; font-size: 13.5px; }
.ctrl { border-top: 1px solid var(--rule); padding: 12px 0; }
.ctrl .ch { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ctrl .ch code { font-weight: 600; }
.ctrl .ttl { font-weight: 600; }
.ctrl .ev { font-size: 14.5px; color: var(--ink-2); display: grid; gap: 4px; }
dl.facts { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 6px 18px; margin: 16px 0; font-size: 15px; }
dl.facts dt { color: var(--ink-3); }
dl.facts dd { margin: 0; }
table.plain { border-collapse: collapse; width: 100%; font-size: 14.5px; }
table.plain th, table.plain td { border-bottom: 1px solid var(--rule); padding: 7px 8px; text-align: left; vertical-align: top; }
table.plain th { font-size: 13.5px; color: var(--ink-3); font-weight: 600; }
table.plain .d { font-weight: 400; color: var(--ink-2); }
table.plain th.r, table.plain td.r { text-align: right; }
.tablewrap { overflow-x: auto; max-width: 100%; }
section.pg { margin: 28px 0 0; }
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); margin-top: 22px; }
.pricing > div { padding: 18px 22px 20px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.pricing > div:last-child { border-right: 0; }
.pricing .price { font: 700 40px/1.1 var(--body); font-variant-numeric: tabular-nums; margin: 8px 0 2px; }
.pricing .price small { font-size: 15px; margin-right: 4px; }
.pricing .per { color: var(--ink-3); font-size: 14px; }
.pricing ul { padding-left: 18px; font-size: 15px; color: var(--ink-2); flex: 1; }
.pricing .btn { align-self: flex-start; margin-top: auto; }
.list { border-top: 2px solid var(--ink); }
.list .item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.list .meta { font-size: 14px; color: var(--ink-3); }
.modal { position: fixed; inset: 0; background: rgba(30, 28, 38, .45); display: none; align-items: center; justify-content: center; z-index: 30; padding: 16px; }
.modal.open { display: flex; }
.modal .box { background: var(--paper); border: 1px solid var(--ink); padding: 22px; max-width: 440px; width: 100%; }
.modal .legend { font-weight: 700; font-size: 18px; }
.modal input { width: 100%; font: 16px var(--body); padding: 10px; border: 1px solid var(--rule-2); border-radius: 4px; margin-top: 10px; }
.ok { color: var(--rep); } .err { color: var(--bar); }
footer.site { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 28px 28px 40px; margin-top: 56px; border-top: 2px solid var(--ink); font-size: 14px; color: var(--ink-3); }
footer.site a { color: var(--ink-2); }
footer.site span:first-child { font-weight: 700; color: var(--ink); }
footer.site span:nth-last-child(-n+2) { flex-basis: 100%; font-size: 13.5px; line-height: 1.55; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 26px; }
  .form { grid-template-columns: 1fr; }
  .form > div { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule); }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .strip > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  ul.obl li.ob { grid-template-columns: 150px minmax(0, 1fr); }
  ul.obl li.ob .rc { grid-column: 2; }
  .pricing { grid-template-columns: 1fr; }
  .pricing > div, .pricing > div:first-child { border-right: 0; padding-left: 0; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  footer.site { padding: 24px 16px 34px; }
  header.site { flex-wrap: wrap; gap: 4px 12px; padding: 10px 0; }
  header.site nav { margin-left: 0; gap: 14px; overflow-x: auto; max-width: 100%; font-size: 14.5px; }
  header.site nav { flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; scrollbar-width: none; gap: 16px; padding-bottom: 2px; }
  header.site nav::-webkit-scrollbar { display: none; }
  .ln-m .sub { display: block; }
  .finds > details > summary { grid-template-columns: 26px minmax(0, 1fr); }
  .fbody { padding-left: 0; }
  .eyebrow { font-size: 13px; }
  .mx-wrap { display: none; }
  .mx-list { display: block; border-top: 1px solid var(--rule-2); }
  .mxl { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .mxl > b { display: block; margin-bottom: 4px; }
  .mxl-l { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 2px 10px; padding: 4px 0 4px 10px; font-size: 14px; }
  .mxl-l.has-rep { box-shadow: inset 3px 0 0 var(--rep); }
  .mxl-l .mk { max-width: none; }
  .mxl-l .mx-f { grid-column: 2; }
  h1 { font-size: 32px; }
  .hero { padding-top: 24px; }
  .lede { font-size: 16.5px; }
  .sheet h2.hl { font-size: 21px; }
  .strip b.n { font-size: 24px; }
  .ln-h { grid-template-columns: 52px minmax(0, 1fr); }
  .ln-s { grid-column: 1 / -1; justify-content: flex-start; }
  ul.obl { margin-left: 0; }
  ul.obl li.ob { grid-template-columns: 1fr; gap: 2px; }
  ul.obl li.ob .rc { grid-column: 1; }
  p.un, .locked { margin-left: 0; }
  article.ln { padding-left: 12px; }
  dl.an-facts, dl.facts { grid-template-columns: 1fr; gap: 0 0; }
  dl.an-facts dd, dl.facts dd { margin-bottom: 6px; }
  .noted { grid-template-columns: 1fr; gap: 12px; }
  .finds > details > summary { grid-template-columns: 36px minmax(0, 1fr); }
  .finds > details > summary .fwho { grid-column: 2; }
  .fbody { padding-left: 0; }
  .idx { columns: 1; }
  table.mx th.mx-p { min-width: 128px; max-width: 150px; }
  .srow { grid-template-columns: minmax(0, 1fr) 54px 70px; }
}
@media print { .band nav, .tool, #actions, .no-print, .cta, footer.site a { display: none !important; } }
.specimen .xleg { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 13px; color: var(--ink-2); padding: 9px 14px; margin: 0; border-bottom: 1px solid var(--rule); }
.specimen .xleg > span { display: inline-flex; align-items: center; gap: 6px; }
.specimen .xleg .vb { display: inline-block; width: 3px; height: 15px; background: var(--rep); }
table.plain td.rp { color: var(--rep); font-weight: 600; }
table.plain .mk { display: block; }
@media (max-width: 720px) { .mx-head .scr { display: none; } }
p.notes { font-size: 14.5px; color: var(--ink-2); margin: 10px 0; }
p.notes.gate { color: var(--ink); }