/* selfhost-fonts:start */
/* Self-hosted Google Fonts (SIL OFL / Apache 2.0). Files live in /fonts/. Regenerate with scripts/selfhost_fonts.py. */
/* source: css2?family=Red+Hat+Display:ital,wght@0,400..900;1,400..900&family=Red+Hat+Mono:wght@400..600&display=swap */
/* latin-ext */
@font-face {
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/red-hat-display-italic-400-900-latin-ext.f919354c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/red-hat-display-italic-400-900-latin.2d08a73f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/red-hat-display-normal-400-900-latin-ext.340d9ecb.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/red-hat-display-normal-400-900-latin.5941b797.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/red-hat-mono-normal-400-600-latin-ext.9516334a.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/red-hat-mono-normal-400-600-latin.d3b3ec81.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* selfhost-fonts:end */

/* naturalgas.land. Concept: the round gas meter chart and the decline curve.
   Chart paper off-white, recorder-case steel, and one flame-blue pen.
   Red Hat Display for reading and headlines, Red Hat Mono for labels, codes and figures. */

:root {
  --paper: #f4f3ee;
  --paper-2: #eae9e2;
  --chart: #fbfaf6;
  --steel-9: #14191f;
  --steel-8: #232a32;
  --steel-7: #333c46;
  --steel-6: #4a5560;
  --steel-4: #8a949e;
  --steel-3: #b9c0c6;
  --steel-2: #d7dbde;
  --on-steel: #dfe3e7;
  --on-steel-2: #b3bcc5;
  --on-steel-3: #9aa5b0;
  --steel-line: #36404a;
  --flame: #1f6feb;
  --flame-ink: #1552c4;
  --flame-2: #7fb2ff;
  --flame-wash: #dde8fb;
  --display: 'Red Hat Display', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Red Hat Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--steel-8);
  font: 400 1.0625rem/1.6 var(--display);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--flame-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--steel-9); text-decoration-color: var(--flame); }
:focus-visible { outline: 3px solid var(--flame); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); color: var(--steel-9); margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.75rem); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; }
h3 { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
@media (min-width: 700px) { .wrap { padding: 0 28px; } }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .75rem 1rem; background: var(--steel-9); color: #fff; font: 600 .95rem var(--display); }
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Header */
.top { background: rgba(244, 243, 238, .96); border-bottom: 1px solid var(--steel-3); }
.top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--steel-9); }
.brand:hover { color: var(--steel-9); }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-word { font: 800 1.4rem/1 var(--display); letter-spacing: -.02em; }
.brand-word span { font: 500 1.02rem/1 var(--mono); letter-spacing: 0; color: var(--flame-ink); margin-left: 1px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; font: 500 .9rem var(--mono); }
.nav a { color: var(--steel-6); text-decoration: none; padding: 12px 0; }
.nav a:hover { color: var(--steel-9); text-decoration: underline; text-decoration-color: var(--flame); }
.nav .nav-cta { color: #fff; background: var(--flame-ink); padding: 9px 14px; border-radius: 3px; font: 700 .95rem var(--display); }
.nav .nav-cta:hover { color: #fff; background: var(--steel-9); text-decoration: none; }
@media (max-width: 759px) {
  .nav { gap: 2px 16px; font-size: .86rem; }
  .nav-wide { display: none; }
}
@media (min-width: 960px) {
  .top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); }
}

/* Hero: headline beside the chart */
.hero { padding: 36px 0 56px; }
.hero-grid { display: grid; gap: 36px; }
@media (min-width: 960px) {
  .hero { padding: 56px 0 80px; }
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
}
h1 { font-size: clamp(2.5rem, 7.4vw, 4.7rem); font-weight: 900; line-height: .98; letter-spacing: -.03em; margin: 0 0 22px; max-width: 11em; }
.trace-under {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M2 6 L14 8 L22 5 L31 9 L40 6 L52 8 L61 5 L72 9 L83 6 L95 7 L104 4 L116 8 L127 6 L139 8 L148 5 L160 9 L171 6 L183 8 L192 5 L204 8 L215 6 L226 8 L238 6' fill='none' stroke='%231f6feb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 96% / 100% .2em;
  padding-bottom: .06em;
}
.lead { font-size: 1.2rem; line-height: 1.55; color: var(--steel-6); max-width: 34em; }
.paths { display: grid; gap: 12px; margin-top: 28px; max-width: 36em; }
@media (min-width: 560px) { .paths { grid-template-columns: 1fr 1fr; } }
.path { display: block; padding: 15px 18px 17px; background: var(--flame-ink); color: #fff; border: 2px solid var(--flame-ink); border-radius: 3px; text-decoration: none; }
.path:hover { background: var(--steel-9); border-color: var(--steel-9); color: #fff; }
.path-label { display: block; font: 800 1.2rem/1.2 var(--display); }
.path-sub { display: block; font: 400 .92rem/1.4 var(--mono); margin-top: 5px; color: #e4ecfb; }
.path-alt { background: transparent; color: var(--steel-9); border-color: var(--steel-9); }
.path-alt .path-sub { color: var(--steel-6); }
.path-alt:hover .path-sub { color: var(--on-steel); }
.hero-line a { display: inline-block; padding: 10px 0; }
.hero-line { margin: 10px 0 0; font: 500 .92rem/1.5 var(--mono); color: var(--steel-6); }

.chart-fig { margin: 0; width: 100%; max-width: 520px; justify-self: center; }
.disc { display: block; width: 100%; height: auto; color: var(--steel-8); }
.chart-fig figcaption { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--steel-3); font: 400 .88rem/1.5 var(--mono); color: var(--steel-6); }
.d-bezel { fill: none; stroke: var(--steel-8); stroke-width: 10; }
.d-paper { fill: var(--chart); }
.d-band { fill: none; stroke: var(--steel-6); stroke-width: 1.2; }
.d-edge { fill: none; stroke: var(--steel-4); stroke-width: .8; }
.d-ring { fill: none; stroke: var(--steel-3); stroke-width: .7; }
.d-ring-m { fill: none; stroke: var(--steel-4); stroke-width: 1; }
.d-arc { fill: none; stroke: var(--steel-3); stroke-width: .6; }
.d-arc-m { fill: none; stroke: var(--steel-4); stroke-width: 1.1; }
.d-mo text { font: 500 12px var(--mono); fill: var(--steel-6); text-anchor: middle; dominant-baseline: central; }
.d-cap { font: 600 8px var(--mono); fill: var(--steel-6); text-anchor: middle; letter-spacing: .14em; }
.d-scale text { font: 500 9px var(--mono); fill: var(--steel-6); text-anchor: end; }
.d-trace { fill: none; stroke: var(--flame); stroke-width: 2.3; stroke-linejoin: round; stroke-linecap: round; }
.d-arm { stroke: var(--steel-6); stroke-width: 2.4; stroke-linecap: round; opacity: .4; }
.d-tip { fill: var(--flame); stroke: var(--chart); stroke-width: 1.5; }
.d-hub { fill: var(--chart); stroke: var(--steel-4); stroke-width: 1; }
.d-tag { font: 700 8.5px var(--mono); fill: var(--steel-8); text-anchor: middle; letter-spacing: .1em; }
.d-tag2 { font: 500 10px var(--mono); fill: var(--steel-6); text-anchor: middle; }
.d-pin { fill: var(--steel-8); }

/* Sections: each opens on a chart scale */
.section { position: relative; padding: 64px 0 72px; scroll-margin-top: 72px; }
.section::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; pointer-events: none;
  background:
    linear-gradient(var(--steel-3), var(--steel-3)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--steel-3) 0 1px, transparent 1px 10px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--steel-4) 0 1px, transparent 1px 50px) 0 0 / 100% 11px no-repeat;
}
@media (min-width: 900px) { .section { padding: 88px 0 96px; } }
.alt { background: var(--paper-2); }
.head { display: grid; gap: 12px 56px; margin-bottom: 36px; }
.head h2 { margin: 0; max-width: 14em; }
.head p { margin: 0; color: var(--steel-6); font-size: 1.1rem; max-width: 36em; }
@media (min-width: 900px) {
  .head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; margin-bottom: 44px; }
  .head p { padding-top: 8px; }
}

/* Whose side: review and offer, row by row */
.sides { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sides col.c-label { width: 22%; }
.sides thead th { text-align: left; vertical-align: bottom; padding: 0 24px 14px 0; font: 800 1.6rem/1.1 var(--display); color: var(--steel-9); border-bottom: 3px solid var(--steel-9); }
.sides thead th span { display: block; margin-top: 6px; font: 500 .85rem/1.3 var(--mono); color: var(--flame-ink); }
.sides thead .side-offer span { color: var(--steel-6); }
.sides thead td { border-bottom: 3px solid var(--steel-9); }
.sides tbody th { width: 22%; text-align: left; vertical-align: top; padding: 16px 20px 16px 0; font: 600 .85rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--steel-6); border-bottom: 1px solid var(--steel-3); }
.sides tbody td { vertical-align: top; padding: 16px 28px 16px 0; border-bottom: 1px solid var(--steel-3); font-size: 1.05rem; color: var(--steel-8); }
.sides tbody td:nth-child(2) { box-shadow: inset 3px 0 0 var(--flame); padding-left: 16px; }
.sides thead .side-review { padding-left: 16px; }
@media (max-width: 759px) {
  .sides, .sides tbody, .sides tr, .sides th, .sides td, .sides tbody th { display: block; width: auto; }
  .sides thead { display: none; }
  .sides tbody { border-top: 3px solid var(--steel-9); }
  .sides tbody tr { padding: 16px 0 10px; border-bottom: 1px solid var(--steel-3); }
  .sides tbody th { padding: 0 0 8px; border: 0; }
  .sides tbody td { border: 0; padding: 2px 0 12px 14px; box-shadow: inset 3px 0 0 var(--steel-4); }
  .sides tbody td:nth-child(2) { box-shadow: inset 3px 0 0 var(--flame); padding-left: 14px; }
  .sides td::before { content: attr(data-side); display: block; font: 800 .98rem/1.4 var(--display); color: var(--steel-9); }
}

/* The worksheet: a recorder case holding a strip of chart paper */
.panel { background: var(--steel-9); color: var(--on-steel); }
.panel::before {
  background:
    linear-gradient(var(--steel-line), var(--steel-line)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--steel-line) 0 1px, transparent 1px 10px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--steel-6) 0 1px, transparent 1px 50px) 0 0 / 100% 11px no-repeat;
}
.panel h2 { color: #fff; }
.panel .head p { color: var(--on-steel-2); }
.worksheet { display: grid; gap: 28px; }
@media (min-width: 1000px) { .worksheet { grid-template-columns: 330px minmax(0, 1fr); gap: 36px; align-items: start; } }
.ws-inputs fieldset { border: 0; border-top: 1px solid var(--steel-line); margin: 0 0 8px; padding: 10px 0 8px; min-width: 0; }
.ws-inputs legend { padding: 0 10px 0 0; font: 600 .85rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--flame-2); }
.ws-inputs label { display: block; margin: 12px 0 6px; font: 500 1rem/1.3 var(--display); color: var(--on-steel); }
input, select, textarea { width: 100%; min-height: 44px; padding: 9px 11px; font: 500 1rem/1.4 var(--mono); color: var(--steel-9); background: var(--chart); border: 1px solid var(--steel-4); border-radius: 2px; }
textarea { font-family: var(--display); resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--flame); outline-offset: 1px; border-color: var(--flame); }
.unit-field { display: flex; }
.unit-field input { flex: 1; min-width: 0; border-radius: 2px 0 0 2px; }
.unit-field span { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--steel-4); border-left: 0; border-radius: 0 2px 2px 0; background: var(--steel-2); font: 500 .8rem var(--mono); color: var(--steel-8); white-space: nowrap; }
.hint { margin: 8px 0 0; font: 400 .88rem/1.5 var(--mono); color: var(--on-steel-3); }
.ws-note:empty { display: none; }
.ws-note { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--flame-2); background: #1d242c; font: 500 .9rem/1.45 var(--display); color: #fff; }

.ws-paper { position: relative; background: var(--chart); color: var(--steel-8); border-radius: 3px; padding: 26px 18px 20px; }
.ws-paper::before { content: ""; position: absolute; left: 12px; right: 12px; top: 8px; height: 8px; background: radial-gradient(circle, var(--steel-9) 2.4px, transparent 2.9px) 0 0 / 22px 8px repeat-x; opacity: .85; }
@media (min-width: 700px) { .ws-paper { padding: 30px 26px 24px; } }
.decline-fig { margin: 0; }
.decline { display: block; width: 100%; height: auto; }
.decline-fig figcaption { margin-top: 8px; font: 400 .88rem/1.5 var(--mono); color: var(--steel-6); }
.dc-grid { stroke: #dfe3e7; stroke-width: 1; }
.dc-grid-m { stroke: var(--steel-2); stroke-width: 1; }
.dc-axis { fill: none; stroke: var(--steel-6); stroke-width: 1.2; }
.dc-area { fill: var(--flame-wash); }
.dc-line { fill: none; stroke: var(--flame); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.dc-mark { stroke: var(--steel-6); stroke-width: 1; stroke-dasharray: 3 4; }
.dc-dot { fill: var(--flame); stroke: var(--chart); stroke-width: 2; }
.dc-lab { font: 500 12px var(--mono); fill: var(--steel-6); }
.dc-lab-r { text-anchor: end; }
.dc-lab-c { text-anchor: middle; }
.dc-note { font: 600 12.5px var(--mono); fill: var(--steel-9); }
.dc-ttl { font: 600 11px var(--mono); fill: var(--steel-6); letter-spacing: .08em; }

.ws-results { display: grid; gap: 10px 32px; margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--steel-9); }
@media (min-width: 720px) {
  .ws-results { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .ws-offer, .link-btn { grid-column: 1 / -1; }
}
.ws-total span { display: block; font: 600 .84rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--steel-6); }
.ws-total strong { display: block; margin: 6px 0 4px; font: 900 clamp(2.2rem, 5vw, 3rem)/1.02 var(--display); letter-spacing: -.02em; color: var(--steel-9); }
.ws-total em { display: block; font: 400 .9rem/1.5 var(--mono); font-style: normal; color: var(--steel-6); }
.ws-results table { width: 100%; border-collapse: collapse; font: 400 .96rem/1.35 var(--display); }
.ws-results th, .ws-results td { padding: 8px 0; border-bottom: 1px dotted var(--steel-4); vertical-align: top; }
.ws-results th { text-align: left; font-weight: 400; color: var(--steel-6); padding-right: 12px; }
.ws-results td { text-align: right; font: 600 .95rem/1.35 var(--mono); color: var(--steel-9); white-space: nowrap; }
.ws-offer { margin: 4px 0 0; padding: 10px 12px; background: var(--flame-wash); border-left: 3px solid var(--flame); font-size: .96rem; color: var(--steel-9); }
.link-btn { justify-self: start; margin-top: 0; padding: 12px 0; background: none; border: 0; font: 700 .96rem/1.4 var(--display); color: var(--flame-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.link-btn:hover { color: var(--steel-9); }

.math { display: grid; gap: 0 44px; margin: 44px 0 0; border-top: 1px solid var(--steel-line); }
@media (min-width: 800px) { .math { grid-template-columns: 1fr 1fr; } }
.math div { padding: 16px 0 18px; border-bottom: 1px solid #262e36; }
.math dt { margin-bottom: 4px; font: 700 1.02rem var(--display); color: #fff; }
.math dd { margin: 0; color: var(--on-steel-2); font-size: 1rem; }
.math code { display: block; margin-bottom: 6px; font: 500 .92rem/1.5 var(--mono); color: var(--flame-2); }
.panel a { color: var(--flame-2); }
.panel :focus-visible { outline-color: var(--flame-2); }

/* Deductions: the gas line from well to sale */
.gaspath { margin: 0 0 44px; }
.gp-bracket { margin: 0 0 16px; font: 500 .85rem/1.45 var(--mono); color: var(--steel-6); }
.gasline { list-style: none; margin: 0; padding: 0; position: relative; }
.gasline::before { content: ""; position: absolute; left: 10px; top: 12px; bottom: 16px; width: 6px; background: linear-gradient(90deg, var(--steel-3) 0 2px, var(--flame) 2px 4px, var(--steel-3) 4px); }
.gasline li { position: relative; padding: 0 0 22px 40px; }
.gasline li::before { content: ""; position: absolute; left: 6px; top: 5px; width: 14px; height: 14px; background: var(--chart); border: 3px solid var(--steel-8); border-radius: 2px; transform: rotate(45deg); }
.gasline .gl-end::before { left: 2px; top: 1px; width: 22px; height: 22px; border-radius: 50%; transform: none; background: var(--flame); border-color: var(--steel-9); }
.gasline b { display: block; font: 800 1.08rem/1.25 var(--display); color: var(--steel-9); }
.gl-at { display: block; font: 600 .74rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--flame-ink); }
.gl-code { display: block; margin-top: 2px; font: 500 .82rem var(--mono); color: var(--steel-6); }
.gl-say { display: block; margin-top: 4px; font-size: 1rem; line-height: 1.45; color: var(--steel-6); }
@media (min-width: 1000px) {
  .gp-bracket { position: relative; margin: 0 calc((100% - 84px) / 7 + 14px) 18px; padding-bottom: 10px; text-align: center; border-bottom: 2px solid var(--steel-4); }
  .gp-bracket::before, .gp-bracket::after { content: ""; position: absolute; bottom: -8px; width: 2px; height: 8px; background: var(--steel-4); }
  .gp-bracket::before { left: 0; }
  .gp-bracket::after { right: 0; }
  .gasline { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 14px; padding-top: 44px; }
  .gasline::before { top: 11px; bottom: auto; height: 6px; width: auto; left: calc((100% - 84px) / 14); right: calc((100% - 84px) / 14); background: linear-gradient(var(--steel-3) 0 2px, var(--flame) 2px 4px, var(--steel-3) 4px); }
  .gasline li { padding: 0; text-align: center; }
  .gasline li::before { top: -39px; left: calc(50% - 10px); width: 20px; height: 20px; }
  .gasline .gl-end::before { top: -42px; left: calc(50% - 13px); width: 26px; height: 26px; }
}

.law { display: grid; gap: 28px 40px; }
@media (min-width: 900px) { .law { grid-template-columns: 1fr 1fr .9fr; } }
.law > div { border-top: 3px solid var(--steel-9); padding-top: 14px; }
.law p { color: var(--steel-7); }
.law > div:last-child { background: var(--chart); border: 1px solid var(--steel-3); border-top: 3px solid var(--flame); padding: 14px 18px 8px; }
.ticks { list-style: none; margin: 0 0 12px; padding: 0; }
.ticks li { position: relative; padding: 6px 0 6px 26px; border-bottom: 1px dotted var(--steel-3); color: var(--steel-7); }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 12px; height: 12px; border: 2px solid var(--flame-ink); border-radius: 50%; }

/* The three plays */
.plays { border-top: 3px solid var(--steel-9); }
.play { display: grid; gap: 10px 40px; padding: 24px 0 26px; border-bottom: 1px solid var(--steel-3); }
@media (min-width: 900px) { .play { grid-template-columns: 260px minmax(0, 1fr); } }
.play h3 { margin: 0; font-size: 1.55rem; font-weight: 900; line-height: 1.1; letter-spacing: -.01em; }
.play dl { margin: 0; display: grid; gap: 12px; }
.play dl div { display: grid; gap: 2px 20px; }
@media (min-width: 640px) { .play dl div { grid-template-columns: 110px minmax(0, 1fr); } }
.play dt { font: 600 .85rem/1.9 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--flame-ink); }
.play dd { margin: 0; color: var(--steel-7); }
.term { text-decoration-style: dotted; }

/* Glossary */
.glossary { margin: 0; column-gap: 48px; }
@media (min-width: 760px) { .glossary { columns: 2; } }
.glossary div { break-inside: avoid; padding: 12px 0 14px; border-top: 1px solid var(--steel-3); scroll-margin-top: 110px; }
.glossary dt { margin-bottom: 3px; font: 600 1rem/1.4 var(--mono); color: var(--steel-9); }
.glossary dd { margin: 0; color: var(--steel-6); }
.glossary div:target { background: var(--flame-wash); box-shadow: -10px 0 0 var(--flame-wash), 10px 0 0 var(--flame-wash); }

/* Questions */
.faq-grid { display: grid; gap: 8px 56px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); } }
.head-stack { display: block; }
.head-stack p { margin-top: 12px; padding-top: 0; }
.faq details { border-bottom: 1px solid var(--steel-3); }
.faq details:first-child { border-top: 3px solid var(--steel-9); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 16px 44px 16px 0; font: 700 1.12rem/1.35 var(--display); color: var(--steel-9); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 18px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--steel-8);
  background: linear-gradient(var(--steel-8), var(--steel-8)) center / 8px 2px no-repeat, linear-gradient(var(--steel-8), var(--steel-8)) center / 2px 8px no-repeat, var(--chart);
}
.faq details[open] summary::after { border-color: var(--flame-ink); background: linear-gradient(#fff, #fff) center / 8px 2px no-repeat, var(--flame-ink); }
.faq summary:hover { color: var(--flame-ink); }
.faq details p { margin: 0 0 18px; max-width: 42em; color: var(--steel-6); }

/* Ask */
.intake { background: var(--paper-2); }
.intake-grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .intake-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; } }
.intake-copy p { color: var(--steel-7); }
.fine { font: 400 .92rem/1.55 var(--mono); color: var(--steel-6) !important; border-left: 3px solid var(--steel-3); padding-left: 12px; }
.call { display: flex; gap: 14px; align-items: center; margin-top: 28px; padding: 16px 18px; background: var(--chart); border: 1px solid var(--steel-3); border-radius: 3px; }
.call .brand-mark { width: 44px; height: 44px; color: var(--steel-8); }
.call p { margin: 0; font: 400 .95rem/1.55 var(--display); color: var(--steel-7); }
.call b { display: block; color: var(--steel-9); }
.call a { font-family: var(--mono); font-size: .95rem; overflow-wrap: anywhere; display: inline-block; padding: 8px 0; }
.intake-form { display: grid; gap: 4px; background: var(--chart); border: 2px solid var(--steel-9); border-radius: 3px; padding: 22px 18px 24px; min-width: 0; }
@media (min-width: 700px) { .intake-form { padding: 26px 28px 28px; } }
.intake-form > label, .intake-form .row label, .want legend { display: block; margin: 14px 0 6px; font: 600 .84rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--steel-6); }
.intake-form .row { display: grid; gap: 0 16px; align-items: end; }
@media (min-width: 640px) { .intake-form .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.want { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.want legend { margin-top: 0; padding: 0; }
.want label { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; background: #fff; border: 1px solid var(--steel-4); border-radius: 2px; cursor: pointer; }
.want input { width: auto; min-height: 0; margin: 4px 0 0; accent-color: var(--flame-ink); }
.want span { font: 400 .92rem/1.45 var(--mono); color: var(--steel-6); }
.want b { display: block; font: 700 1rem/1.35 var(--display); color: var(--steel-9); }
.want label:has(input:checked) { border-color: var(--flame-ink); box-shadow: inset 0 0 0 1px var(--flame-ink); background: #f1f5fd; }
.side-note { margin: 8px 0 2px; padding: 10px 12px; border-left: 3px solid var(--flame); background: var(--flame-wash); font: 500 .94rem/1.45 var(--display); color: var(--steel-9); }
.btn { justify-self: start; display: inline-block; margin-top: 18px; padding: 13px 30px; background: var(--flame-ink); color: #fff; border: 2px solid var(--flame-ink); border-radius: 3px; font: 800 1.05rem var(--display); cursor: pointer; }
.btn:hover { background: var(--steel-9); border-color: var(--steel-9); }
.btn:disabled { opacity: .7; cursor: wait; }
.form-feedback:empty { display: none; }
.form-feedback { margin-top: 14px; padding: 12px 14px; font-size: .98rem; line-height: 1.5; color: var(--steel-9); }
.form-feedback.success { background: var(--flame-wash); border-left: 4px solid var(--flame); }
.form-feedback.error { background: #ecebe5; border-left: 4px solid var(--steel-9); }
[data-intake-status] { margin: 14px 0 0; padding: 12px 14px; background: #ecebe5; border-left: 4px solid var(--steel-9); color: var(--steel-9); }

/* Form and worksheet helpers */
.field-hint { display: block; margin: 6px 0 0; font: 400 .88rem/1.45 var(--mono); color: var(--steel-6); }
.field-hint a { padding: 4px 0; }
.form-legal { margin-top: 12px; }
.noscript-note { padding: 16px 18px; background: var(--chart); border: 2px solid var(--steel-9); border-radius: 3px; }
.noscript-note p { margin: 0; color: var(--steel-9); }
.ws-results td, .ws-total strong { overflow-wrap: anywhere; }
.ws-results td { white-space: normal; }
.ws-live, .ws-print { display: none; }
@media (max-width: 999px) {
  .ws-live { display: block; position: sticky; bottom: 0; z-index: 5; margin: 12px 0 0; padding: 10px 12px; background: var(--flame-ink); color: #fff; border-radius: 2px; font: 700 .95rem/1.35 var(--display); box-shadow: 0 -6px 14px rgba(0, 0, 0, .35); }
}

/* Footer */
.foot { background: var(--steel-9); color: var(--on-steel-2); padding: 52px 0 28px; font-size: .98rem; }
.foot a { color: #fff; text-decoration-color: var(--flame-2); }
.foot a:hover { color: var(--flame-2); }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot p { margin: 0 0 8px; }
.foot a:not(.brand) { display: inline-block; padding: 9px 0; }
.foot-base a { padding: 9px 2px; }
.brand-foot { color: var(--paper); margin-bottom: 12px; text-decoration: none; }
.brand-foot:hover { color: var(--paper); }
.brand-foot .brand-word span { color: var(--flame-2); }
.foot-h { margin: 4px 0 8px; font: 600 .85rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--flame-2); }
.foot address { font-style: normal; }
.foot-base { margin-top: 34px; padding-top: 18px; border-top: 1px solid #2c343d; font: 400 .9rem/1.6 var(--mono); color: var(--on-steel-3); }
.foot-base p { margin: 0 0 6px; }

/* Privacy and terms */
.legal { max-width: 780px; padding-top: 48px; padding-bottom: 80px; }
.legal h1 { font-size: clamp(2.2rem, 5.5vw, 3.2rem); max-width: none; }
.legal h2 { font-size: 1.4rem; margin: 2em 0 .5em; letter-spacing: -.01em; }
.legal p, .legal li { color: var(--steel-7); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .5em; }
.legal-meta { font: 400 .92rem/1.5 var(--mono); color: var(--steel-6); padding-bottom: 14px; border-bottom: 1px solid var(--steel-3); margin-bottom: 24px; }
.legal-sum { padding: 14px 16px; background: var(--chart); border-left: 3px solid var(--flame); color: var(--steel-8) !important; }

/* 404 */
#main > div > h1 { margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .top, .paths, .intake, .ws-inputs, .ws-live, .link-btn { display: none; }
  .ws-print { display: block; margin: 8px 0 0; font: 400 10pt/1.4 var(--display); color: #000; }
  .foot { background: #fff; color: #000; padding: 12px 0 0; }
  .foot a, .foot-h, .foot-base { color: #000; }
  .foot .brand { display: none; }
  h2, h3 { break-after: avoid; }
  body, .panel { background: #fff; color: #000; }
  .panel h2, .math dt, .math dd, .math code, .panel .head p, .panel a, .ws-note { color: #000; }
  .panel::before, .panel::after { display: none; }
  .math div { border-bottom-color: #999; }
  .ws-note { background: #fff; border-left-color: #000; }
  .worksheet { display: block; }
  .ws-paper { background: #fff; border: 1px solid #000; }
}

/* phone numbers never wrap */
a[href^="tel:"] { white-space: nowrap; }

/* Guides: sourced explainer pages */
.g-head { background: var(--steel-9); color: var(--on-steel); padding: 26px 0 38px; border-bottom: 3px solid var(--flame); }
.crumbs { margin: 0 0 18px; font: 500 .88rem/1.5 var(--mono); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; margin: 0 9px; color: var(--on-steel-3); }
.crumbs a { display: inline-block; padding: 9px 0; color: var(--on-steel-2); }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: #fff; }
.g-head h1 { max-width: 19em; margin: 0 0 16px; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; color: #fff; }
.g-head .dek { max-width: 38em; margin: 0 0 16px; font-size: 1.15rem; line-height: 1.55; color: var(--on-steel); }
.g-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0 0 14px; padding: 0; font: 500 .88rem/1.5 var(--mono); color: var(--flame-2); }
.g-legal { max-width: 46em; margin: 0; padding-left: 12px; border-left: 3px solid var(--flame-2); font: 400 .92rem/1.55 var(--mono); color: var(--on-steel-2); }
.g-head a { color: var(--flame-2); }
.g-head :focus-visible { outline-color: var(--flame-2); }
.guide .section { padding: 52px 0 56px; }
.guide h2 { display: flex; gap: 14px; align-items: baseline; max-width: 22em; margin: 0 0 18px; font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.12; letter-spacing: -.01em; }
.guide h2 .sn { flex: none; min-width: 1.9em; padding: 0 6px; background: var(--steel-9); color: var(--flame-2); font: 600 .62em/1.7 var(--mono); text-align: center; letter-spacing: 0; }
.guide h3 { margin: 1.4em 0 .4em; font-size: 1.12rem; }
.g-body > p, .g-body > ul, .g-body > ol, .g-body > h3, .g-body > .leasebox, .g-body > .limit, .g-body > .illus-tag, .g-body > .cta-row { max-width: 46em; }
.g-body p, .g-body li { color: var(--steel-7); }
.g-body ul, .g-body ol { padding-left: 1.3rem; }
.g-body li { margin-bottom: .5em; }
.g-body cite { font-style: italic; }
.answer { max-width: 46em; margin: 0 0 26px; padding: 18px 22px 8px; background: var(--chart); border: 1px solid var(--steel-4); border-left: 6px solid var(--flame); border-radius: 2px; }
.answer p { font-size: 1.08rem; color: var(--steel-8); }
.tag { display: block; margin: 0 0 6px; font: 600 .8rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--flame-ink); }
.limit { max-width: 46em; margin: 24px 0 0; padding: 14px 18px 6px; background: var(--chart); border: 1px solid var(--steel-3); border-top: 4px solid var(--steel-8); border-radius: 2px; }
.limit p, .limit li { font-size: 1rem; color: var(--steel-7); }
.limit ul { padding-left: 1.2rem; margin: 0 0 1em; }
.toc { max-width: 46em; }
.toc h2 { display: block; max-width: none; margin: 0 0 8px; font: 600 .8rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel-6); }
.toc ol { margin: 0; padding-left: 1.5rem; columns: 2 260px; column-gap: 32px; }
.toc li { margin: 0 0 4px; padding: 2px 0; break-inside: avoid; }
.leasebox { max-width: 46em; margin: 0 0 1.2em; padding: 12px 16px; background: var(--chart); border-left: 4px solid var(--steel-4); font: 400 .95rem/1.55 var(--mono); color: var(--steel-8); overflow-wrap: anywhere; }
.leasebox b { display: block; margin-bottom: 4px; font: 600 .8rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel-6); }
.illus-tag { margin: 0 0 8px; font: 600 .8rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--flame-ink); }
.tbl { width: 100%; max-width: 62em; margin: 0 0 12px; border-collapse: collapse; background: var(--chart); border-top: 3px solid var(--steel-9); font-size: .98rem; }
.tbl caption { padding: 0 0 10px; text-align: left; caption-side: top; font: 600 .95rem/1.4 var(--mono); color: var(--steel-8); }
.tbl th, .tbl td { padding: 11px 14px 11px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--steel-3); overflow-wrap: anywhere; }
.tbl thead th { padding-bottom: 8px; font: 600 .8rem/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--steel-6); border-bottom: 2px solid var(--steel-8); }
.tbl tbody th { font-weight: 700; color: var(--steel-9); width: 24%; }
.tbl td { color: var(--steel-7); }
.tbl td.r, .tbl thead th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td.res { font-weight: 700; color: var(--steel-9); }
.tbl tr.total th, .tbl tr.total td { border-top: 2px solid var(--steel-8); font-weight: 700; color: var(--steel-9); background: var(--flame-wash); }
.tbl.num tbody th { width: 4.4em; white-space: nowrap; font: 600 .95rem/1.5 var(--mono); color: var(--flame-ink); }
@media (max-width: 759px) {
  .tbl.stack thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .tbl.stack, .tbl.stack tbody, .tbl.stack tr, .tbl.stack th, .tbl.stack td { display: block; width: auto; }
  .tbl.stack tr { padding: 10px 0; border-bottom: 1px solid var(--steel-4); }
  .tbl.stack th, .tbl.stack td { padding: 3px 12px; border: 0; }
  .tbl.stack tbody th, .tbl.num.stack tbody th { width: auto; white-space: normal; }
  .tbl.stack caption { display: block; width: 100%; padding: 0 12px 10px; }
  .tbl.stack td.r { text-align: left; white-space: normal; }
  .tbl.stack td[data-th]::before { content: attr(data-th) ": "; font-weight: 700; color: var(--steel-6); }
  .tbl.stack tr.total { background: var(--flame-wash); }
}
.src { max-width: 62em; margin: 0; padding: 0; list-style: none; counter-reset: src; border-top: 3px solid var(--steel-9); }
.src li { position: relative; margin: 0; padding: 14px 0 14px 40px; counter-increment: src; border-bottom: 1px solid var(--steel-3); color: var(--steel-7); overflow-wrap: anywhere; }
.src li::before { content: counter(src); position: absolute; left: 0; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--steel-9); color: #fff; font: 600 .8rem/26px var(--mono); text-align: center; }
.src b { display: block; color: var(--steel-9); }
.src .sec, .src .u, .src .op { display: block; }
.src .u { font-size: .95rem; }
.src .op { font: 400 .88rem/1.5 var(--mono); color: var(--steel-6); }
.checked { max-width: 46em; color: var(--steel-6); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
.cta-row .btn { margin-top: 0; text-decoration: none; }
.btn-line { background: transparent; color: var(--steel-9); border-color: var(--steel-9); }
.btn-line:hover { color: #fff; }
a.btn { display: inline-block; color: #fff; }
a.btn:hover { color: #fff; }
a.btn-line { color: var(--steel-9); }
a.btn-line:hover { color: #fff; }

/* Guide cards on the home page and the footer list */
.gcards { display: grid; gap: 16px; }
@media (min-width: 760px) { .gcards { grid-template-columns: 1fr 1fr; gap: 24px; } }
.gcard { display: block; padding: 18px 20px 20px; background: var(--chart); border: 1px solid var(--steel-3); border-top: 3px solid var(--flame); border-radius: 2px; color: var(--steel-8); text-decoration: none; }
.gcard:hover { border-top-color: var(--steel-9); color: var(--steel-8); }
.gcard:hover b { text-decoration: underline; text-decoration-color: var(--flame); }
.gcard .tag { margin-bottom: 8px; }
.gcard b { display: block; margin-bottom: 6px; font: 800 1.2rem/1.25 var(--display); color: var(--steel-9); }
.gcard span:last-child { display: block; color: var(--steel-6); font-size: 1rem; line-height: 1.5; }
.foot-guides a { display: inline-block; padding: 8px 0; }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; } }
@media print {
  .g-head { background: #fff; color: #000; padding: 0 0 8px; border-bottom: 1px solid #000; }
  .g-head h1, .g-head .dek, .g-meta, .g-legal, .crumbs a, .crumbs [aria-current] { color: #000; }
  .crumbs, .toc, .cta-row { display: none; }
  .guide .section::before { display: none; }
  .answer, .limit, .tbl, .src li, .leasebox { break-inside: avoid; }
}
.more-read { max-width: 46em; margin: 28px 0 0; padding: 12px 16px; background: var(--chart); border-left: 4px solid var(--flame); color: var(--steel-7); }
@media (max-width: 1099px) { .nav .nav-guides { display: none; } }