/* Conformity Sheet. Direction from the design seed (sha256 in design-brief.md): a typeset technical standard. White stock,
   petrol ink, Spectral serif headings in sentence case, Work Sans body, Roboto Mono for product names and control codes,
   an index tab hanging off the left rule of every section, regimes as chips (filled when the text is licensed, outlined
   when the regime is only named), one rust mark for what is unrecognised or missing. Hairlines, 4px radii, no band,
   no shadows, no gradients. */
:root {
  --stock: #f5f5f4; --stock-2: #ebecea; --card: #ffffff;
  --ink: #16262c; --ink-2: #40525a; --ink-3: #6d7c83;
  --rule: #cfd6d9; --rule-2: #e4e9eb;
  --petrol: #0f4d63; --petrol-2: #0a3a4b; --petrol-wash: #e3eef2;
  --rust: #9a3f1c; --rust-wash: #f6e6de;
  --ref: #4f5f66; --ref-wash: #eaeef0;
  --good: #0f4d63;
  --serif: "Spectral", "Georgia", "Times New Roman", serif;
  --sans: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Roboto Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --max: 1120px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--stock); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
body { margin: 0; }
a { color: var(--petrol); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--petrol-2); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0 0 12px; letter-spacing: -0.01em; }
h1 { font-size: clamp(32px, 4.4vw, 48px); font-weight: 700; }
h2 { font-size: clamp(22px, 2.6vw, 27px); }
h3 { font-size: 19px; }
p { margin: 0 0 14px; }
code, .mono { font-family: var(--mono); font-size: 0.9em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
/* Header: on the stock, one petrol hairline under it */
.band { background: var(--card); border-bottom: 1px solid var(--petrol); }
header.site { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; }
header.site .brand { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
header.site .brand em { font-style: normal; color: var(--petrol); font-weight: 600; }
header.site nav a { margin-left: 20px; text-decoration: none; color: var(--ink-2); font-size: 15px; font-weight: 500; }
header.site nav a:hover { color: var(--petrol); text-decoration: underline; text-underline-offset: 4px; }
/* Index tabs: the structural device. A mono tab hangs off the left rule of a section. */
.tabbed { position: relative; border-left: 2px solid var(--petrol); padding-left: 18px; }
.tab { position: absolute; left: -2px; top: -12px; background: var(--petrol); color: #fff; font: 600 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 8px 4px; border-radius: 0 3px 3px 0; }
/* Hero */
.hero { padding: 40px 0 18px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.hero .lede { font-size: 18.5px; color: var(--ink-2); max-width: 600px; margin-bottom: 18px; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero .cta .hint { flex-basis: 100%; }
.eyebrow { font-size: 13.5px; color: var(--ink-3); margin-bottom: 12px; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 20px; } .hero .specimen { display: none; } }
figure.person { margin: 0 0 12px; } figure.person img { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--stock-2); }
/* Specimen: the product's own output, under the photograph */
.specimen { border: 1px solid var(--rule); background: var(--card); border-radius: 4px; padding: 12px 14px 10px; font-size: 13px; position: relative; }
.specimen .legend { font-size: 12.5px; color: var(--ink-3); }
.specimen table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.specimen th { font-family: var(--sans); font-size: 12px; font-weight: 600; text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.specimen td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.specimen tr:last-child td { border-bottom: 0; }
.specimen td.code { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.specimen .cap { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
section { padding: 30px 0; }
/* The tool */
.tool { border: 1px solid var(--rule); background: var(--card); border-radius: 4px; margin-top: 22px; position: relative; }
.tool .bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px 10px; }
.tool .bar .spacer { flex: 1; }
textarea.paste { width: 100%; min-height: 220px; border: 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); padding: 14px 16px; font: 13.5px/1.5 var(--mono); color: var(--ink); resize: vertical; background: var(--card); display: block; }
textarea.paste:focus { outline: 2px solid var(--petrol); outline-offset: -2px; }
.btn { display: inline-block; border: 1px solid var(--ink); background: var(--ink); color: #fff; padding: 10px 18px; font: 600 14.5px var(--sans); cursor: pointer; text-decoration: none; border-radius: 4px; }
.btn:hover { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--petrol-wash); color: var(--petrol-2); border-color: var(--petrol); }
.btn.small { padding: 7px 12px; font-size: 13px; }
.hint { font-size: 13px; color: var(--ink-3); }
.hint.warn { color: var(--rust); }
.muted { color: var(--ink-3); font-size: 13px; }
/* Summary strip */
.summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 30px; }
.summary > div { padding: 12px 14px 12px 0; }
.summary > div + div { padding-left: 14px; border-left: 1px solid var(--rule-2); }
.summary .n { font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1; color: var(--ink); }
.summary .n.mapped { color: var(--petrol); } .summary .n.reference { color: var(--ref); } .summary .n.unreg { color: var(--rust); } .summary .n.nc { color: var(--rust); }
.summary .l { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.3; }
@media (max-width: 860px) { .summary { grid-template-columns: repeat(3, 1fr); } .summary > div:nth-child(4) { border-left: 0; padding-left: 0; } .summary > div:nth-child(-n+3) { border-bottom: 1px solid var(--rule-2); } }
@media (max-width: 480px) { .summary { grid-template-columns: repeat(2, 1fr); } .summary > div:nth-child(4) { border-left: 1px solid var(--rule-2); padding-left: 10px; } .summary > div:nth-child(2n+1) { border-left: 0; padding-left: 0; } .summary > div:nth-child(-n+4) { border-bottom: 1px solid var(--rule-2); } }
/* Pills: the standing vocabulary (mapped / reference / unrecognised), the same everywhere */
.pill { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 12px; padding: 2px 9px; border-radius: 3px; white-space: nowrap; margin-right: 6px; line-height: 1.5; border: 1px solid transparent; }
.pill.mapped { color: var(--petrol-2); background: var(--petrol-wash); border-color: var(--petrol-wash); }
.pill.reference { color: var(--ref); background: var(--ref-wash); border-color: var(--ref-wash); }
.pill.unreg { color: #fff; background: var(--rust); border-color: var(--rust); }
/* Chips: the regimes in a market cell. Filled = licensed text behind it, outlined = named only. */
.chip { display: inline-block; font-family: var(--mono); font-size: 11px; line-height: 1.4; padding: 1px 6px; border-radius: 3px; margin: 0 4px 4px 0; text-decoration: none; white-space: nowrap; border: 1px solid var(--petrol); }
.chip.mapped { background: var(--petrol); color: #fff; }
.chip.named { background: var(--card); color: var(--ink-2); border-color: var(--rule); }
.chip:hover { border-color: var(--petrol-2); color: var(--petrol-2); } .chip.mapped:hover { color: #fff; background: var(--petrol-2); }
.v { font-weight: 600; font-size: 13.5px; }
.v.bad { color: var(--rust); } .v.plain { color: var(--ink-2); font-weight: 500; } .v.unknown { color: var(--rust); font-style: italic; font-weight: 500; } .v.good { color: var(--petrol); }
/* Family sections */
section.fam { padding: 20px 0 0; margin-top: 30px; }
section.ctrls.tabbed { padding-top: 22px; }
.fam-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.fam-head h2 { margin: 0; font-size: 21px; }
.fam-head .counts { font-size: 13px; color: var(--ink-3); }
.sheet-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--card); border-radius: 4px; }
table.sheet { width: 100%; border-collapse: collapse; font-size: 14px; }
table.sheet col.c1 { width: 15%; } table.sheet col.c2 { width: 17%; } table.sheet col.c3 { width: 17%; } table.sheet col.c4 { width: 17%; } table.sheet col.c5 { width: 13%; } table.sheet col.c6 { width: 11%; } table.sheet col.c7 { width: 10%; }
table.sheet th { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); background: var(--stock); }
table.sheet td { padding: 10px 12px 6px; vertical-align: top; border-bottom: 0; }
table.sheet tr.f td { border-top: 1px solid var(--rule-2); }
table.sheet tr.f.unreg td:first-child { box-shadow: inset 3px 0 0 var(--rust); }
table.sheet tr.f.nc td:first-child { box-shadow: inset 3px 0 0 var(--rule); }
table.sheet td.code { font-family: var(--mono); font-size: 13px; color: var(--ink); min-width: 130px; }
table.sheet td.code .hint { font-family: var(--sans); font-weight: 400; }
table.sheet td.small { font-size: 13px; color: var(--ink-2); }
table.sheet td.mk { font-size: 12px; }
table.sheet tr.why:not(.open) { display: none; }
table.sheet tr.why td { padding: 0 12px 10px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
table.sheet tr.f td.code .toggle { display: block; font: 600 11.5px var(--sans); color: var(--petrol); margin-top: 3px; cursor: pointer; }
table.sheet tr.f td.code .toggle::after { content: 'why \25B8'; } table.sheet tr.f.open td.code .toggle::after { content: 'close \25BE'; }
.fam-head .open-all { font-size: 13px; margin-left: 6px; }
table.sheet tr.why td > div { display: flex; gap: 8px; margin-top: 4px; } table.sheet tr.why td > div > .k { flex: 0 0 92px; }
table.sheet tr.why .k { font-family: var(--mono); font-size: 11.5px; color: var(--petrol); padding-top: 2px; }
table.sheet tr.why a { font-family: var(--mono); font-size: 12px; text-decoration: none; border-bottom: 1px solid var(--rule); }
table.sheet a.cat { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
table.sheet a.cat:hover { color: var(--petrol); border-color: var(--petrol); }
.checklist .ck { display: inline-block; margin: 0 10px 3px 0; white-space: nowrap; }
.checklist .ck.held { color: var(--petrol); } .checklist .ck.missing { color: var(--rust); } .checklist .ck.unstated { color: var(--ink-3); }
.phone-only { display: none; }
.plan-tag { font-family: var(--mono); font-size: 10px; border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 6px; vertical-align: 1px; opacity: 0.8; }
.gaps { border: 1px solid var(--rule); border-top: 0; background: var(--stock); padding: 12px 16px 6px; border-radius: 0 0 4px 4px; }
.gaps .gl { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.gaps ul { margin: 0; padding-left: 18px; } .gaps li { margin-bottom: 6px; font-size: 14px; }
/* Controls */
section.ctrls { margin-top: 34px; padding-top: 0; }
section.ctrls details, .ctrls-inline details { border: 1px solid var(--rule); background: var(--card); padding: 0 16px; margin-bottom: -1px; }
section.ctrls details:first-of-type { border-radius: 4px 4px 0 0; } section.ctrls details:last-of-type { border-radius: 0 0 4px 4px; }
section.ctrls summary, .ctrls-inline summary { cursor: pointer; padding: 11px 0; font-family: var(--serif); font-weight: 600; font-size: 16.5px; }
section.ctrls summary .codes { font-family: var(--mono); font-weight: 400; font-size: 12px; display: block; margin-top: 2px; color: var(--ink-3); }
section.ctrls .ctrl, .ctrls-inline .ctrl { padding: 6px 0 12px; border-top: 1px solid var(--rule-2); }
section.ctrls .ch, .ctrls-inline .ch { font-weight: 600; margin-bottom: 4px; } section.ctrls .ch code, .ctrls-inline .ch code { color: var(--petrol); margin-right: 6px; }
section.ctrls .ctrl p, .ctrls-inline .ctrl p { font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
/* Explanation rows and notices */
.form { border: 1px solid var(--rule); background: var(--card); border-radius: 4px; }
.form > div { display: grid; grid-template-columns: 56px 220px 1fr; gap: 20px; padding: 16px; border-bottom: 1px solid var(--rule-2); align-items: baseline; }
.form > div:last-child { border-bottom: 0; }
.form .k { font-family: var(--mono); color: var(--petrol); font-size: 14px; }
.form h3 { margin: 0; }
.form p { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) { .form > div { grid-template-columns: 40px 1fr; } .form p { grid-column: 2; } }
.notice { border: 1px solid var(--rule); background: var(--card); border-radius: 4px; padding: 12px 16px; margin: 14px 0; font-size: 14.5px; }
.notice.gate { background: var(--rust-wash); border-color: var(--rust-wash); }
/* Pricing */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border: 1px solid var(--rule); background: var(--card); border-radius: 4px; overflow: hidden; }
.pricing > div { padding: 22px 20px 24px; border-right: 1px solid var(--rule-2); display: flex; flex-direction: column; }
.pricing > div:last-child { border-right: 0; }
@media (max-width: 860px) { .pricing > div { border-right: 0; border-bottom: 1px solid var(--rule-2); } .pricing > div:last-child { border-bottom: 0; } }
.pricing .price { font-family: var(--serif); font-weight: 700; font-size: 44px; line-height: 1; margin: 8px 0 2px; }
.pricing .price small { font-size: 12px; color: var(--ink-3); margin-right: 6px; vertical-align: 16px; font-family: var(--mono); font-weight: 400; }
.pricing .per { color: var(--ink-3); font-size: 13px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-2); }
.pricing ul { list-style: none; padding: 0; margin: 0 0 18px; font-size: 14.5px; }
.pricing li { margin-bottom: 7px; padding-left: 1.1em; text-indent: -1.1em; }
.pricing li::before { content: "\2013  "; color: var(--petrol); }
.pricing .btn { margin-top: auto; align-self: flex-start; }
footer.site { border-top: 1px solid var(--rule); margin-top: 30px; padding-block: 22px 40px; font-size: 13.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer.site a { color: var(--ink-3); }
/* Forms and modal */
.modal { position: fixed; inset: 0; background: rgba(22,38,44,0.55); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 10; }
.modal.open { display: flex; }
.modal .box { background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 26px; max-width: 440px; width: 100%; }
.modal .box .legend { font-family: var(--serif); font-weight: 600; font-size: 18px; margin-bottom: 6px; }
input[type=email], input[type=text] { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); font: 15px var(--sans); background: var(--card); color: var(--ink); border-radius: 4px; }
input:focus { outline: 2px solid var(--petrol); outline-offset: -1px; }
.row { display: flex; gap: 10px; align-items: center; }
.ok { color: var(--good); } .err { color: var(--rust); }
.list { border: 1px solid var(--rule); background: var(--card); border-radius: 4px; }
.list a.item { display: flex; justify-content: space-between; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--rule-2); text-decoration: none; color: var(--ink); }
.list a.item:last-child { border-bottom: 0; }
.list a.item:hover { background: var(--petrol-wash); }
.list .meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.index { columns: 2; column-gap: 40px; font-size: 14px; }
.index a { display: block; text-decoration: none; color: var(--ink); padding: 5px 0; border-bottom: 1px solid var(--rule-2); break-inside: avoid; }
.index a .chips { float: right; margin: 0; }
.strip4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .strip4 { grid-template-columns: 1fr 1fr; } .strip4 > div:nth-child(2) { border-right: 0; } .strip4 > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-2); } }
/* Phone: the sheet becomes stacked cards; the standing pill moves up beside the name */
@media (max-width: 700px) { table.sheet, table.sheet tbody, table.sheet tr, table.sheet td { display: block; } table.sheet thead { display: none; } table.sheet tr.f { border-top: 1px solid var(--rule); padding: 10px 12px 2px; } table.sheet tr.f td { border: 0; padding: 4px 0; white-space: normal; min-width: 0; max-width: none; } table.sheet tr.f td.code { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 8px; font-size: 15px; } table.sheet tr.f td.code .hint { display: block; order: 3; flex-basis: 100%; } table.sheet tr.f td.code .phone-only { display: inline-block; margin: 0 0 0 auto; } table.sheet td.desk-only { display: none; } table.sheet tr.f td[data-l]:not(.code) { position: relative; padding-left: 88px; } table.sheet tr.f td[data-l]:not(.code)::before { content: attr(data-l); position: absolute; left: 0; top: 5px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); } table.sheet tr.f td[data-l]:not(.code) > * { display: inline; } table.sheet tr.f td.mk .chip { display: inline-block; } table.sheet tr.why td { padding: 6px 12px 12px; } table.sheet tr.f:not(.open) td[data-l="Category"] { display: none; } table.sheet tr.f td.code .toggle { display: block; order: 4; flex-basis: 100%; margin-top: 0; } table.sheet tr.f { cursor: pointer; } table.sheet tr.f.unreg { box-shadow: inset 3px 0 0 var(--rust); } table.sheet tr.f.nc { box-shadow: inset 3px 0 0 var(--rule); } table.sheet tr.f td:first-child { box-shadow: none !important; } table.sheet tr.f td.mk { padding: 3px 0 0 40px; } table.sheet tr.f td.mk .chip { margin-bottom: 3px; } table.sheet tr.why td > div > .k { flex: 0 0 78px; } .sheet-wrap { overflow: visible; } .summary .n { font-size: 24px; } .summary > div { padding: 8px 10px; } .pricing .price { font-size: 34px; } section.ctrls summary .codes { white-space: normal; } .index { columns: 1; } header.site { gap: 10px; } header.site nav { white-space: nowrap; } header.site nav a { margin-left: 10px; font-size: 13.5px; } table.sheet { font-size: 13px; } .hero { padding-top: 24px; } .tabbed { padding-left: 14px; } .checklist .ck { white-space: normal; } }
@media (max-width: 480px) { h1 { font-size: 1.9rem; } header.site nav a { margin-left: 8px; font-size: 12.5px; } .hero { padding-top: 18px; } .hero .lede { font-size: 1.05rem; line-height: 1.45; } .tool .bar .btn { width: 100%; text-align: center; } .tool .bar .spacer { display: none; } header.site .brand { font-size: 16px; } }
@media print { header.site nav, .tool .bar, .btn, footer.site, .no-print, .specimen, figure.person { display: none !important; } html { background: #fff; } details { display: block; } details > * { display: block; } table.sheet tr.why { display: table-row; } }