/* Energy Register. Direction from the design seed (sha256 in design-brief.md): a meter reading sheet. One sheet of pale
   stock, graphite ink, a faint blue graph-paper grid behind every bar and every meter window, Atkinson Hyperlegible Next
   for the headline, the body and the big figures with Reddit Mono for every kWh figure, reading, code and flag, every kWh
   figure inside a bordered meter window, every share drawn as a bar on the grid, and one mark colour, a meter-reader's
   green, on exactly three words: a tariff that pays, a line that can take part, and the interval meter. Two-pixel
   graphite rules frame the sheet and its sections, hairlines separate the lines; radius only on meter windows and
   buttons; no shadows, no gradients as decoration, no hatching, no chips. */
:root {
  --stock: #fafaf7; --card: #ffffff; --wash: #f1f2ee;
  --ink: #1f2225; --ink-2: #474b50; --ink-3: #6a6f75;
  --rule: #d8dadf; --rule-2: #e6e8ec;
  --grid: #dfe3ea; --grid-2: #cbd1dc;
  --ok: #2f7a3e; --ok-wash: #e9f2ea;
  --display: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Reddit Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --max: 1180px;
  --paper: repeating-linear-gradient(0deg, transparent 0 7px, var(--grid) 7px 8px), repeating-linear-gradient(90deg, transparent 0 7px, var(--grid) 7px 8px);
}
* { 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; background: var(--stock); font-kerning: normal; text-rendering: geometricPrecision; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--ink-3); }
a:hover { text-decoration-color: var(--ink); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0 0 12px; letter-spacing: -0.01em; }
h1 { font-size: clamp(32px, 4.2vw, 50px); letter-spacing: -0.02em; }
h2 { font-size: clamp(22px, 2.4vw, 27px); }
h3 { font-size: 18px; font-weight: 500; }
p { margin: 0 0 14px; }
code, .mono { font-family: var(--mono); font-size: 0.9em; }
.num, .tab { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
/* Header: a 2px graphite rule under it, nothing else */
.band { border-bottom: 2px solid var(--ink); }
header.site { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 12px; }
header.site .brand { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
header.site .brand em { font-style: normal; font-weight: 400; }
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(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* Section heads: a 2px rule above, the head, the folio at the right */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; border-top: 2px solid var(--ink); padding-top: 10px; margin-bottom: 10px; }
.sec-head h2 { margin: 0; }
.sec-head .folio { font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); margin-left: auto; }
/* The meter window: every kWh figure, bordered, on the grid */
.kwh { display: inline-block; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.55; white-space: nowrap; }
.summary .kwh { font-family: var(--display); font-size: clamp(22px, 1.9vw, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
/* The bar: a share drawn on the graph paper */
.bar { display: block; height: 8px; margin-top: 4px; border: 1px solid var(--rule); background: transparent; }
.bar > span { display: block; height: 100%; background: var(--ink); }
.bar.hot > span { background: var(--ok); }
/* Small caps for the category and the meter type; the flag word in graphite mono with a leading filled square */
.caps { display: inline-block; font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-right: 8px; white-space: nowrap; }
.caps.ok { color: var(--ok); }
.ok { color: var(--ok); font-weight: 700; }
.flag { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); margin: 3px 12px 0 0; white-space: nowrap; }
.flag::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--ink); margin-right: 6px; vertical-align: 1px; }
.flags { margin-top: 2px; }
.mark { color: var(--ink); font-weight: 700; }
.standing { display: none; } .standing.unreg { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); margin-left: 8px; }
/* Hero */
.hero { padding: 40px 0 16px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.hero .lede { font-size: 18px; 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-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .eyebrow a { color: var(--ink-3); }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 20px; } }
figure.person { margin: 0; } figure.person img { display: block; width: 100%; height: auto; background: var(--wash); }
figure.person figcaption { font-size: 13px; color: var(--ink-2); margin-top: 10px; line-height: 1.45; }
/* Specimen sheet under the photograph */
.specimen { border-top: 2px solid var(--ink); margin-top: 16px; padding-top: 8px; font-size: 13px; }
.specimen .legend { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; gap: 10px; }
.specimen table { width: 100%; border-collapse: collapse; margin-top: 8px; table-layout: fixed; }
.specimen th { font-family: var(--sans); font-size: 12px; font-weight: 500; text-align: left; padding: 6px 8px 5px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.specimen th.num, .specimen td.num { text-align: right; }
.specimen td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.specimen tr.total td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 700; }
.specimen .kwh { font-size: 12px; } .specimen .caps { font-size: 9.5px; margin-right: 6px; } .specimen .flag { font-size: 9.5px; margin: 2px 8px 0 0; }
.specimen .ln { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-right: 6px; }
.specimen .na { color: var(--ink-3); font-style: italic; }
.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); margin-top: 22px; }
.tool .bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 14px 16px 10px; height: auto; margin: 0; border: 0; background: var(--card); background-image: none; }
.tool .bar > span { display: inline; height: auto; background: transparent; } .tool .bar .hint { font-size: 14px; color: var(--ink-2); line-height: 1.5; } .tool .bar .hint code { font-size: 0.9em; } .tool .bar .spacer { flex: 1; }
.tool .bar label { font: 14px var(--sans); color: var(--ink-2); white-space: nowrap; }
.tool .bar label input { margin-right: 5px; vertical-align: -1px; accent-color: var(--ink); }
.tool .bar .ticks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
textarea.paste { width: 100%; min-height: 230px; border: 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); padding: 14px 16px; font: 13px/1.5 var(--mono); color: var(--ink); resize: vertical; background: var(--card); background-image: var(--paper); background-size: 8px 8px; display: block; }
textarea.paste:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.btn { display: inline-block; border: 1.5px solid var(--ink); background: var(--ink); color: var(--stock); padding: 10px 18px; font: 700 14.5px var(--sans); cursor: pointer; text-decoration: none; border-radius: 2px; }
.btn:hover { background: #000; border-color: #000; color: #fff; }
.btn.text { border: 0; background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding: 10px 6px; font-weight: 500; } .btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--wash); color: var(--ink); }
.btn.small { padding: 7px 12px; font-size: 13px; }
.hint { font-size: 13px; color: var(--ink-3); }
.na { color: var(--ink-3); font-size: 12.5px; }
.sub { display: block; font-family: var(--sans); font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.regime-line { margin: -22px 0 26px; }
/* Summary strip: six cells, big figures, 2px rules above and below */
.summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 18px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); margin-bottom: 34px; padding: 4px 0; }
.summary > div { padding: 12px 0 10px; } .summary > div + div { border-left: 1px solid var(--rule); padding-left: 16px; }
.summary .n { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.summary .l { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.3; }
.summary .l .sub { color: var(--ink-3); margin-top: 3px; }
@media (max-width: 860px) { .summary { grid-template-columns: repeat(3, 1fr); gap: 0 12px; } .summary > div + div { border-left: 0; padding-left: 0; } }
@media (max-width: 480px) { .summary { grid-template-columns: repeat(2, 1fr); } }
/* Where the kWh sit */
section.conc { padding: 0 0 8px; margin-bottom: 8px; }
.conc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.conc-grid h3 { font-size: 15px; margin: 6px 0 8px; }
.crow { display: grid; grid-template-columns: minmax(0, 2fr) 36px 84px 52px; gap: 8px; align-items: center; font-size: 13px; min-height: 30px; padding: 4px 0; border-bottom: 1px solid var(--rule-2); }
.crow.tot { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 700; } .crow.head { border-bottom: 1px solid var(--ink); padding-bottom: 4px; } .crow.head span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.crow .cl { overflow-wrap: anywhere; line-height: 1.2; } .crow .cv, .crow .cs, .crow .ck { font-family: var(--mono); font-size: 12px; text-align: right; } .crow.head .cl { text-align: left; }
.dot { color: var(--ink-3); padding: 0 5px; }
@media (max-width: 860px) { .conc-grid { grid-template-columns: 1fr; } }
/* Family sections and the reading sheet */
section.fam { padding: 22px 0 0; margin-top: 18px; }
.sheet-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--card); }
table.sheet { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; } table.sheet td { overflow-wrap: anywhere; }
table.sheet col.c1 { width: 19%; } table.sheet col.c2 { width: 12%; } table.sheet col.c3 { width: 13%; } table.sheet col.c4 { width: 9%; } table.sheet col.c5 { width: 16%; } table.sheet col.c6 { width: 10%; } table.sheet col.c7 { width: 11%; } table.sheet col.c8 { width: 5%; } table.sheet col.c9 { width: 5%; }
table.sheet th { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink-2); text-align: left; padding: 9px 10px 7px; border-bottom: 1px solid var(--ink); }
table.sheet th.num { text-align: right; }
table.sheet td { padding: 10px 10px 8px; vertical-align: top; border-bottom: 0; }
table.sheet td.num { text-align: right; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.sheet tr.f td { border-top: 1px solid var(--rule-2); }
table.sheet td.code { font-weight: 700; color: var(--ink); min-width: 130px; }
table.sheet td.code .ln { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--ink-3); margin-right: 8px; }
table.sheet td.code .sname { display: inline-block; max-width: calc(100% - 34px); vertical-align: top; }
table.sheet td.code .sub { font-weight: 400; }
table.sheet td.small a.cat { color: var(--ink); text-decoration: none; font-weight: 500; } table.sheet td.small a.cat:hover { text-decoration: underline; }
table.sheet td.small a.cat:hover { border-color: var(--ink); }
table.sheet td.small { font-size: 13px; color: var(--ink-2); }
table.sheet td.small .sub { font-size: 12px; }
table.sheet tfoot tr.total td { border-top: 2px solid var(--ink); font-weight: 700; padding: 8px 10px; background: var(--card); font-size: 13px; }
table.sheet tfoot tr.total td.code { font-family: var(--sans); font-weight: 700; }
table.sheet tr.why:not(.open) { display: none; }
table.sheet tr.why td { padding: 0 12px 10px 12px; font-size: 13px; color: var(--ink-2); line-height: 1.45; background: var(--stock); }
table.sheet td.more { text-align: right; white-space: nowrap; } table.sheet tr.f { cursor: pointer; } table.sheet tr.f .toggle { font: 400 11.5px var(--mono); color: var(--ink-2); } table.sheet tr.f .toggle::after { content: 'open'; } table.sheet tr.f.open .toggle::after { content: 'close'; }
table.sheet tr.why td > div { display: flex; gap: 8px; margin-top: 5px; } table.sheet tr.why td > div > .k { flex: 0 0 150px; } table.sheet tr.why td > div > span:not(.k) { flex: 1; min-width: 0; }
table.sheet tr.why .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
table.sheet tr.why a.cref { font-family: var(--mono); font-size: 12px; text-decoration: none; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.sheet tr.why .clauses-head { border-top: 1px solid var(--rule-2); padding-top: 8px; margin-top: 10px; } table.sheet tr.why .pasted i { font-style: normal; color: var(--ink-3); font-size: 11px; }
.phone-only { display: none; }
.plan-tag { font-family: var(--mono); font-size: 10px; border: 1px solid currentColor; padding: 0 4px; margin-left: 6px; vertical-align: 1px; opacity: 0.8; }
/* Findings */
section.ctrls { margin-top: 34px; padding-top: 0; }
section.ctrls details, .ctrls-inline details { border-top: 1px solid var(--rule); padding: 0 2px; } section.ctrls details:last-of-type, .ctrls-inline details:last-of-type { border-bottom: 1px solid var(--rule); }
section.ctrls details:not([open]) .codes { display: none; }
section.ctrls summary::marker, .ctrls-inline summary::marker { font-size: 12px; color: var(--ink-2); } section.ctrls summary, .ctrls-inline summary { cursor: pointer; padding: 11px 0; font-family: var(--sans); font-weight: 700; font-size: 15.5px; }
section.ctrls summary .who { display: block; font-family: var(--sans); font-size: 13px; color: var(--ink-2); margin-top: 2px; font-weight: 400; }
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: 2px 0 12px; }
section.ctrls .ch, .ctrls-inline .ch { font-weight: 700; margin-bottom: 4px; } section.ctrls .ch code, .ctrls-inline .ch code { color: var(--ink-3); margin-right: 6px; }
section.ctrls .ctrl p, .ctrls-inline .ctrl p { font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
section.ctrls .ctrl p.g, .ctrls-inline .ctrl p.g { font-size: 13px; padding-left: 12px; border-left: 2px solid var(--rule); }
ul.items { margin: 0 0 12px; padding-left: 18px; font-size: 14px; } ul.items li { margin-bottom: 5px; }
.locked { color: var(--ink-3); font-style: italic; }
body.has-result section.explain { display: none; }
/* Explanation rows and notices */
.form { border-top: 2px solid var(--ink); }
.form > div { display: grid; grid-template-columns: 56px 240px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule-2); align-items: baseline; }
.form .k { font-family: var(--mono); color: var(--ink-3); font-size: 13px; letter-spacing: 0.08em; }
.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); padding: 12px 16px; margin: 14px 0; font-size: 14.5px; }
.notice.gate { background: var(--wash); border-color: var(--rule); }
p.plain-note { font-size: 14.5px; color: var(--ink-2); max-width: 720px; }
/* Pricing */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border: 1px solid var(--rule); background: var(--card); }
.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(--mono); font-weight: 500; font-size: 40px; line-height: 1; margin: 8px 0 2px; display: flex; align-items: baseline; gap: 8px; letter-spacing: -0.02em; }
.pricing .price small { font-size: 13px; color: var(--ink-3); font-family: var(--mono); font-weight: 400; letter-spacing: 0; align-self: baseline; }
.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: "+  "; color: var(--ink-3); font-family: var(--mono); }
.pricing .btn { margin-top: auto; align-self: flex-start; }
footer.site { border-top: 2px solid var(--ink); 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(31,34,37,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); padding: 26px; max-width: 440px; width: 100%; }
.modal .box .legend { font-family: var(--display); font-weight: 700; font-size: 22px; 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: 2px; }
input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.row { display: flex; gap: 10px; align-items: center; }
.err { color: var(--ink); font-weight: 700; }
.list { border: 1px solid var(--rule); background: var(--card); }
.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(--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: 6px 0; border-bottom: 1px solid var(--rule-2); break-inside: avoid; }
.index a .chips { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
/* Class, supply, tariff, country, regime and standards pages */
a.cref { font-family: var(--mono); font-size: 12.5px; text-decoration: none; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.mtable { width: 100%; border-collapse: collapse; font-size: 14px; }
table.mtable th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 9px 16px 8px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; width: 230px; line-height: 1.35; }
table.mtable td { padding: 8px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
ul.doclist { padding-left: 18px; max-width: 760px; } ul.doclist li { margin-bottom: 8px; font-size: 14.5px; }
ol.clauses { padding-left: 20px; max-width: 760px; } ol.clauses li { margin-bottom: 6px; font-size: 14.5px; }
/* Phone: the sheet becomes stacked cards */
@media (max-width: 700px) { table.sheet, table.sheet tbody, table.sheet tfoot, 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 4px; } table.sheet tr.f td { border: 0; padding: 3px 0; white-space: normal; min-width: 0; max-width: none; text-align: left; } 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 .sname { max-width: calc(100% - 40px); } table.sheet tr.f td.code .flags { display: block; order: 3; flex-basis: 100%; } table.sheet tr.f td[data-l]:not(.code) { position: relative; padding-left: 104px; font-size: 13px; } table.sheet tr.f td.num { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 14px; text-align: left; } table.mtable th, table.mtable td { display: block; width: auto; padding: 6px 0 0; border: 0; } table.mtable td { padding-bottom: 8px; border-bottom: 1px solid var(--rule-2); } table.sheet tr.f td[data-l]:not(.code)::before { content: attr(data-l); position: absolute; left: 0; top: 4px; font-family: var(--sans); font-size: 12px; color: var(--ink-3); } table.sheet tr.f td .sub { display: inline; margin-left: 6px; } table.sheet tr.f td .caps { margin-left: 6px; } table.sheet tr.f td .caps:first-child { margin-left: 0; } table.sheet tr.f td[data-l="Tariff"] .sub { white-space: nowrap; } table.sheet tr.f td.code .flag { font-size: 9.5px; } table.sheet tr.why td { padding: 6px 12px 12px; } table.sheet tr.f td.more { display: block; text-align: right; padding: 6px 0 4px; border-top: 1px solid var(--rule-2); margin-top: 6px; } table.sheet tr.f .toggle { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; } section.ctrls summary .who { display: block; margin: 2px 0 0; } .index { columns: 1; } table.sheet tfoot tr.total { display: block; padding: 8px 12px 6px; border-top: 2px solid var(--ink); font-size: 13px; } table.sheet tfoot tr.total td { border: 0; padding: 3px 0; display: block; font-weight: 400; text-align: left; } table.sheet tfoot tr.total td.code { font-weight: 700; margin-bottom: 2px; } table.sheet tfoot tr.total td[data-l] { position: relative; padding-left: 104px; } table.sheet tfoot tr.total td[data-l]::before { content: attr(data-l); position: absolute; left: 0; top: 4px; font-family: var(--sans); font-size: 12px; color: var(--ink-3); } table.sheet tfoot tr.total td:empty { display: none; } table.sheet tr.why td > div { display: block; margin-top: 8px; } table.sheet tr.why td > div > .k { display: block; margin-bottom: 2px; } .sheet-wrap { overflow: visible; } .summary .n { font-size: 24px; } .summary > div { padding: 8px 0; } .pricing .price { font-size: 36px; } section.ctrls summary .codes { white-space: normal; } 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; } .sec-head .folio { margin-left: 0; flex-basis: 100%; white-space: normal; } .regime-line { margin-top: -26px; } .crow { grid-template-columns: minmax(0, 1.2fr) 30px 74px 46px; } .caps { white-space: normal; } }
@media (max-width: 480px) { .hero .cta .btn { display: block; width: 100%; text-align: center; box-sizing: border-box; } h1 { font-size: 2rem; } .wrap { padding: 0 16px; } header.site { flex-wrap: wrap; gap: 4px 10px; padding-block: 10px; } header.site .brand { white-space: nowrap; font-size: 19px; } header.site nav { flex-basis: 100%; white-space: normal; } header.site nav a { margin: 0 8px 0 0; font-size: 11.5px; white-space: nowrap; display: inline-block; } header.site nav { display: flex; flex-wrap: nowrap; gap: 0; overflow: hidden; align-items: baseline; } header.site nav #nav-auth { margin-left: auto; } header.site nav #nav-auth a { margin-right: 0; } h1.ph { font-size: clamp(24px, 3vw, 36px); } .hero { padding-top: 18px; } .hero .lede { font-size: 1rem; line-height: 1.45; } .tool .bar .btn { width: 100%; text-align: center; } .tool .bar .spacer { display: none; } .specimen col.i { display: none; } }
@media print { header.site nav, .tool, .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; } }