/* NatGas Central · ngc-home.css (workstream C; BUILD_SPEC §1.3): Home and Free samples, ported from the approved prototype's
   css/pages/home.css (round 5/6) with class names unchanged. Tokens only; phone ≤ 699 · tablet 700–1099 · desktop ≥ 1100.
   Real-site additions are at the end ("real site"): markup the server prints for every width (§1.15) and the dated sample card. */

.hm { display: block; }
.hm-anchor { display: block; position: relative; top: -24px; height: 0; overflow: hidden; }

/* ================= hero ================= */
.hm-hero { padding-top: 64px; }
.hm-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.hm-hero__copy { grid-column: 1 / span 6; min-width: 0; padding-top: 6px; }
.hm-hero__chart { grid-column: 7 / span 6; min-width: 0; }
.hm-hero__h1 { margin-top: 16px; }
.hm-hero__lede { margin-top: 20px; }
.hm-hero__lede abbr, .hm abbr[title] { text-decoration: none; border-bottom: 1px dotted var(--control); cursor: help; }
.hm-hero__ctas { margin-top: 28px; }
.hm-hero__dd { margin-top: 16px; font-size: 15px; min-height: 32px; }
.hm-hero__price { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--t2); font-variant-numeric: tabular-nums; }
.hm-hero__plan { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; line-height: 1.5; color: var(--t2); }

.hm-proof { margin-top: 30px; border-top: 1px solid var(--hair); }
.hm-proof__row { display: grid; grid-template-columns: 184px minmax(0, 1fr); column-gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.hm-proof__v { font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -0.012em; color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-proof__u { font-size: 28px; }
.hm-proof__k { font-size: 14px; line-height: 1.55; color: var(--t2); text-wrap: pretty; }
.hm-proof__k .n-link { font-size: 14px; }

/* ================= public EIA storage chart ================= */
.hm-eia__head { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 6px; }
.hm-eia__titles { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.hm-eia__title { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--t1); }
.hm-eia__pending { display: flex; align-items: flex-start; gap: 10px; margin: 6px 22px 0; padding: 10px 12px; background: var(--raised); border: 1px solid var(--hair); border-radius: var(--r-sm); font-size: 13px; line-height: 1.5; color: var(--t1); }
.hm-eia__pending svg { color: var(--t2); margin-top: 1px; }
.hm-eia__chart { padding: 10px 18px 14px 12px; }
.hm-eia__foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 22px 14px; border-top: 1px solid var(--hair); }
.hm-eia__src { max-width: 88ch; font-size: 12px; line-height: 1.5; color: var(--t3); }
.hm-eia__footrow { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--t2); font-variant-numeric: tabular-nums; }
.hm-eia__lock { display: inline-flex; align-items: center; gap: 8px; color: var(--t2); }
a.hm-eia__lock { color: var(--accent); min-height: 32px; }
a.hm-eia__lock:hover { color: var(--accent-hover); }
.hm-eia__next strong { color: var(--t1); font-weight: 500; }

/* ================= sample (or latest) report panel ================= */
.hm-sample__wrap { margin-top: 56px; }
.hm-sample__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 18px 22px 16px; border-bottom: 1px solid var(--hair); }
.hm-sample__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hm-sample__title { margin-top: 4px; font-size: 20px; font-weight: 600; line-height: 1.3; }
.hm-sample__meta { font-size: 13px; color: var(--t3); font-variant-numeric: tabular-nums; }
.hm-sample__right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; color: var(--t2); font-variant-numeric: tabular-nums; }
.hm-sample__latest { display: inline-flex; align-items: center; gap: 8px; }
.hm-sample__latest strong { color: var(--t1); font-weight: 600; }
.hm-sample__open { min-height: 32px; }
.hm-sample__notice { padding: 14px 22px 0; }
.hm-sample__notice + .n-kpis, .hm-sample__notice ~ style + .n-kpis { margin-top: 14px; }
.hm-sample .n-kpis { border-bottom: 1px solid var(--hair); }
/* round 4: the legend line for the tile colours sits directly under the tiles, with the daily-estimate note */
.hm-sample__figfoot { display: flex; flex-direction: column; gap: 6px; padding: 10px 22px 11px; border-bottom: 1px solid var(--hair); }
/* the outlook: the chosen widget across the whole panel (it lays itself out by its own width), members' paragraph above it */
.hm-sample__ol { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 18px; border-bottom: 1px solid var(--hair); min-width: 0; }
.hm-sample__ow { min-width: 0; }
.hm-sample__more { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hm-sample__more--one { grid-template-columns: minmax(0, 1fr); }
.hm-sample__chg { padding: 20px 22px 18px; border-right: 1px solid var(--hair); min-width: 0; }
.hm-sample__chg .n-since__item { font-size: 14px; }
.hm-sample__side { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 18px; min-width: 0; }
.hm-sample__groups { font-size: 13px; line-height: 1.75; color: var(--t2); }
.hm-sample__groups a { color: var(--accent); white-space: nowrap; }
.hm-sample__groups a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.hm-sample__held { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--t3); }
.hm-sample__held svg { margin-top: 2px; flex: none; }
.hm-sample__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 12px 22px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--t3); }

/* ================= what's inside ================= */
.hm-inside { padding: 96px 0 56px; }
.hm-inside__head { margin-bottom: 36px; }
.hm-mods { display: flex; flex-direction: column; }
.hm-mods__head { display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 4fr) 200px; column-gap: 24px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); }
.hm-mods__group { padding: 28px 0 10px; border-bottom: 1px solid var(--hair); }
.hm-mod { display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 4fr) 200px; grid-template-areas: "num main fig mini" "num extra extra extra";
  column-gap: 24px; row-gap: 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--hair-soft); }
.hm-mod__num { grid-area: num; font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: var(--t2); padding-top: 2px; }
.hm-mod__num--icon { color: var(--t2); padding-top: 3px; }
.hm-mod__main { grid-area: main; min-width: 0; }
.hm-mod .hm-fig { grid-area: fig; }
.hm-mod .hm-mini { grid-area: mini; }
.hm-mod__extra { grid-area: extra; min-width: 0; }
.hm-mod__t { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.hm-mod__t a { color: var(--t1); }
.hm-mod__t a:hover { color: var(--accent); }
.hm-mod__desc { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--t2); max-width: 560px; text-wrap: pretty; }
.hm-fig { min-width: 0; }
.hm-fig__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 20px; font-weight: 500; line-height: 1.25; color: var(--t1); font-variant-numeric: tabular-nums; }
.hm-fig__u { font-size: 13px; font-weight: 400; color: var(--t3); }
.hm-fig__vs { color: var(--t2); }
.hm-fig__text { font-size: 16px; font-weight: 500; }
.hm-fig__quiet { font-size: 14px; font-weight: 400; color: var(--t2); }
.hm-fig__sub { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--t2); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.hm-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding-top: 4px; }
.hm-mini__cap { font-size: 11px; line-height: 1.4; color: var(--t3); font-variant-numeric: tabular-nums; }
.hm-mini svg { max-width: 100%; height: auto; }
.hm-calls3 { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.hm-calls3__i { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; }
.hm-calls3--short { gap: 5px; align-items: center; }
.hm-inside__cap { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 20px; font-size: 13px; line-height: 1.5; color: var(--t3); }

/* international bars and demand split (mini drawings) */
.hm-hbars { display: flex; flex-direction: column; gap: 4px; max-width: 100%; }
.hm-hbars__r { display: grid; grid-template-columns: 62px minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: 11px; line-height: 1.3; color: var(--t3); }
.hm-hbars__track { height: 6px; background: var(--hair-soft); border-radius: 2px; overflow: hidden; }
.hm-hbars__bar { display: block; height: 100%; opacity: 0.85; border-radius: 2px; }
.hm-hbars__v { text-align: right; color: var(--t2); font-variant-numeric: tabular-nums; }
.hm-split { max-width: 100%; }
.hm-split__bar { display: flex; gap: 2px; height: 10px; border-radius: 2px; overflow: hidden; }
.hm-split__bar span { display: block; opacity: 0.85; }
.hm-split__lab { display: flex; justify-content: space-between; gap: 6px; margin-top: 5px; font-size: 11px; color: var(--t3); font-variant-numeric: tabular-nums; }

/* track record (inside section 2) */
.hm-tr { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
.hm-tr > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 16px; }
.hm-tr > summary:hover .hm-tr__t { color: var(--accent); }
.hm-tr__sumline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
.hm-tr__t { font-size: 14px; font-weight: 600; color: var(--t1); }
.hm-tr__d { font-size: 13px; color: var(--t2); }
.hm-tr__chev { color: var(--t2); transition: transform .15s; flex: none; }
.hm-tr[open] > summary .hm-tr__chev { transform: rotate(180deg); }
.hm-tr__body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }
.hm-tr__sum { font-size: 14px; line-height: 1.55; color: var(--t2); max-width: 880px; }
.hm-tr__num { color: var(--t1); font-weight: 600; }
.hm-tr__wide th, .hm-tr__wide td { padding: 0 8px; font-size: 13px; }
.hm-tr__wide thead th { background: transparent; color: var(--t3); }
.hm-tr__big { color: var(--t1); font-weight: 700; }
.hm-tr__note { max-width: 88ch; font-size: 12px; line-height: 1.55; color: var(--t3); }
.hm-tr__note .n-link { font-size: 12px; }

/* ================= samples + commentary band ================= */
.hm-band { padding: 88px 0; }
.hm-band__head { margin-bottom: 32px; }
.hm-band__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.hm-band__dd { grid-column: 1 / span 6; min-width: 0; }
.hm-band__hv { grid-column: 7 / span 6; min-width: 0; }

.hm-dd { background: var(--ground); }
.hm-dd__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--hair); }
.hm-dd__meta { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--t3); font-variant-numeric: tabular-nums; }
.hm-dd .n-kpis, .hm-scard .n-kpis { border-bottom: 1px solid var(--hair); }
.hm-dd .n-kpi, .hm-scard .n-kpi { background: var(--ground); padding: 16px 22px; }
.hm-scard .n-kpi { background: var(--surface); }
.hm-dd .n-kpi__num, .hm-scard .n-kpi__num { font-size: 24px; }
.hm-dd__chart { display: flex; flex-direction: column; gap: 10px; padding: 16px 22px 10px; }
.hm-dd__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 22px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--t3); }
.hm-dd__foot .n-link { min-height: 32px; }

.hm-hv { display: flex; flex-direction: column; gap: 16px; }
.hm-hv__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.hm-hv__date { font-size: 13px; color: var(--t2); font-variant-numeric: tabular-nums; }
.hm-hv__rows { border-top: 1px solid var(--hair); }
.hm-hv__row { display: flex; align-items: center; gap: 16px; min-height: 44px; border-bottom: 1px solid var(--hair-soft); }
.hm-hv__h { width: 96px; flex: none; font-size: 13px; color: var(--t2); }
.hm-hv__row .n-bword { font-size: 15px; }
.hm-hv__was { font-size: 12px; color: var(--t3); }
.hm-hv__keyb { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.hm-hv__key { font-size: 12px; line-height: 1.55; color: var(--t3); }
.hm-hv__plain { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--hair); }
.hm-hv__serif { font-size: 16px; line-height: 1.65; }
.hm-hv__read { font-size: 14px; }
.hm-hv__members { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--t2); }
.hm-hv__members svg { margin-top: 2px; flex: none; color: var(--t3); }
.hm-posts { display: flex; flex-direction: column; padding-top: 8px; }
.hm-posts > .n-overline { padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.hm-post { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-bottom: 1px solid var(--hair-soft); color: var(--t1); min-width: 0; }
.hm-post:hover { color: var(--t1); }
.hm-post:hover .hm-post__t { color: var(--accent); }
.hm-post__meta { font-size: 12px; color: var(--t3); font-variant-numeric: tabular-nums; }
.hm-post__t { font-size: 16px; font-weight: 600; line-height: 1.35; }
.hm-post__x { font-size: 14px; line-height: 1.5; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-hv__all { min-height: 36px; }

/* ================= pricing ================= */
.hm-pricing { padding: 104px 0 48px; }
.hm-pricing__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: end; margin-bottom: 32px; }
.hm-pricing__title { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 12px; }
.hm-pricing__title .n-h2 { font-size: 44px; }
.hm-incl { grid-column: 7 / span 6; }
.hm-checks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 14px; }
.hm-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--t1); }
.hm-checks svg { color: var(--t2); margin-top: 2px; }
.hm-pricing__note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); font-size: 14px; line-height: 1.5; color: var(--t2); }
.hm-pricing__note > svg { color: var(--t2); }
.hm-rate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
.hm-plan { display: flex; flex-direction: column; gap: 6px; padding: 28px 32px 30px; background: var(--surface); min-width: 0; }
.hm-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hm-plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; white-space: nowrap; }
.hm-plan__num { font-size: 44px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--t1); font-variant-numeric: tabular-nums; }
.hm-plan__per { font-size: 15px; color: var(--t3); }
.hm-plan__sub { font-size: 14px; line-height: 1.5; color: var(--t2); font-variant-numeric: tabular-nums; }
.hm-plan__meta { font-size: 13px; line-height: 1.5; color: var(--t3); font-variant-numeric: tabular-nums; }
.hm-plan__act { margin-top: auto; padding-top: 22px; }
.hm-plan--mine { box-shadow: inset 3px 0 0 var(--accent); }
.hm-plan__mine { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; color: var(--t2); }
.hm-plan__fix { margin-top: 12px; }
.hm-plan__minetext { font-variant-numeric: tabular-nums; }
.hm-crypto { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1px; background: var(--surface); }
.hm-crypto__text { display: flex; flex-direction: column; gap: 6px; padding: 22px 32px; min-width: 0; }
/* round 5 (small_screen H1): the plan box and the fix button stack (an ended crypto year shows both), at every width */
.hm-crypto > .hm-plan__act { margin: 0; padding: 22px 32px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 12px; }
.hm-crypto > .hm-plan__act > * { width: 100%; }
.hm-crypto .hm-plan__fix { margin-top: 0; }
.hm-crypto.hm-plan--mine { box-shadow: inset 3px 0 0 var(--accent); }
.hm-terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.hm-terms--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-terms__i dt { margin-bottom: 8px; }
.hm-terms__i dd { font-size: 14px; line-height: 1.55; color: var(--t2); text-wrap: pretty; }
.hm-terms__sum { display: flex; flex-direction: column; gap: 2px; }
.hm-terms__sum .n-t3 { font-size: 12px; font-weight: 400; }
.hm-guarantee { display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; font-size: 14px; line-height: 1.5; color: var(--t1); }
.hm-guarantee svg { color: var(--t2); margin-top: 2px; }

/* ================= FAQ ================= */
.hm-faq { padding: 56px 0 104px; }
.hm-faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: start; }
.hm-faq__rail { grid-column: 1 / span 5; align-self: stretch; }
.hm-faq__railin { position: sticky; top: calc(var(--pin-h, 0px) + 24px); display: flex; flex-direction: column; gap: 8px; }
.hm-faq__list { grid-column: 7 / span 6; min-width: 0; }
.hm-faq__list .n-acc__body p + p { margin-top: 10px; }
.hm-faq__facts { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.hm-facts .n-kv__row { justify-content: flex-start; }
.hm-facts .n-kv__k { width: 104px; flex: none; }
.hm-facts .n-kv__v { text-align: left; }
.hm-facts__sum { display: inline-flex; align-items: center; gap: 10px; }
.hm-faq__close { margin-top: 24px; }
.hm-close__l { font-size: 15px; line-height: 1.5; color: var(--t2); font-variant-numeric: tabular-nums; }
.hm-close__l strong { color: var(--t1); }
.hm-close__s { font-size: 13px; color: var(--t3); }
.hm-close__btns { margin-top: 16px; }
.hm-close__g { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--t2); }
.hm-faq__more { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; padding: 10px 0; background: none; border: 0; border-top: 1px solid var(--hair); text-align: left; color: var(--accent); }
.hm-faq__more > svg { color: var(--accent); }
.hm-faq__morelab { display: block; font-size: 15px; font-weight: 500; }
.hm-faq__moresub { display: block; margin-top: 2px; font-size: 12px; color: var(--t3); }

/* ================= phone sticky bar ================= */
.hm-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--ground); border-top: 1px solid var(--line);
  transform: translateY(100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
.hm-bar--on { transform: none; visibility: visible; }
.hm-bar__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 10px; }
.hm-bar__b { width: 100%; }
@media (min-width: 700px) { .hm-bar { display: none; } }

/* ================= free samples page ================= */
.hm-s__note { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.hm-s__note .n-noticerow { flex: 1 1 420px; }
.hm-s__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.hm-scard { height: 100%; }
.hm-scard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--hair); }
.hm-scard__t { margin-top: 6px; font-size: 20px; font-weight: 600; line-height: 1.3; }
.hm-scard__m { margin-top: 2px; font-size: 13px; color: var(--t3); font-variant-numeric: tabular-nums; }
.hm-scard__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px; }
.hm-scard__foot { margin-top: auto; padding: 14px 22px; border-top: 1px solid var(--hair); }
.hm-spost { margin-top: 24px; }
.hm-spost__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; }
.hm-spost__meta { margin-top: 10px; font-size: 13px; color: var(--t3); font-variant-numeric: tabular-nums; }
.hm-spost__t { margin-top: 6px; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.008em; }
.hm-spost__t a { color: var(--t1); }
.hm-spost__t a:hover { color: var(--accent); }
.hm-spost__bias { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.hm-spost__b { display: inline-flex; align-items: center; }
.hm-spost__b .n-bword { font-size: 15px; }
.hm-spost__h { width: 88px; flex: none; font-size: 13px; font-weight: 400; color: var(--t2); }
.hm-spost__plain { margin: 8px 0 16px; font-size: 16px; }
.hm-s__cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding: 22px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
.hm-s__cta .n-small { margin-top: 4px; }


/* ================= round-1 QA fixes ================= */
.hm-sample__serif { max-width: 780px; font-size: 16px; line-height: 1.65; }
.hm-mrow__u { font-size: 11px; font-weight: 400; color: var(--t3); }
.hm-mod:has(+ .hm-mods__group), .hm-mrow:has(+ .hm-mods__group) { border-bottom: 0; }
.hm-mods__head + .hm-mods__group { padding-top: 16px; }
.hm-faq__grid > .hm-faq__close { grid-column: 1 / -1; margin-top: 0; }
.hm-faq__rail .hm-faq__close { grid-column: auto; margin-top: 24px; }

/* ================= round-3 QA fixes ================= */
/* "?" explainers are core's ui.q (one definition bubble); only their placement is set here */
.hm-proof__v .n-q { vertical-align: 6px; margin-left: 6px; }
.hm-eia__chip { display: inline-flex; align-items: center; gap: 2px; }

/* section 2 mini: our estimate vs the EIA print, with a legend and the first and last week */
.hm-pair { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.hm-pair .n-legend { column-gap: 12px; row-gap: 4px; }
.hm-pair .n-legend__i { font-size: 11px; gap: 6px; color: var(--t2); }
.hm-pair__ticks { display: flex; justify-content: space-between; font-size: 11px; line-height: 1.2; color: var(--t3); font-variant-numeric: tabular-nums; }

/* daily estimate vs EIA official, said once under the KPI band */
.hm-sample__est { display: flex; align-items: flex-start; gap: 8px; max-width: 88ch; font-size: 12px; line-height: 1.5; color: var(--t3); }
.hm-sample__est svg { flex: none; margin-top: 2px; color: var(--t3); }
.hm-sample__est strong { color: var(--t2); font-weight: 500; }

/* region table: caption outside the scroll box; phones carry the HDD/CDD split under the region name */
.hm-regions__cap { font-size: 12px; line-height: 1.5; color: var(--t3); text-wrap: pretty; }
.hm-regions__r { display: flex; flex-direction: column; gap: 1px; }
.hm-regions__sub { font-size: 11px; font-weight: 400; color: var(--t3); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 699px) {
  .hm-regions__t th, .hm-regions__t td { padding: 0 4px; }
  .hm-regions__t th:first-child, .hm-regions__t td:first-child { padding-left: 0; }
  .hm-regions__t th:last-child, .hm-regions__t td:last-child { padding-right: 0; }
  .hm-regions__t tbody th, .hm-regions__t tbody td { height: 44px; padding-top: 4px; padding-bottom: 4px; }
}

/* track record: wide table on desktop, newest-first tall table below 1100 px */
.hm-tr__n { display: none; }
.hm-tr__pend { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--t2); }
.hm-tr__pend svg { flex: none; margin-top: 2px; color: var(--t3); }
@media (max-width: 1099px) {
  .hm-tr__w { display: none; }
  .hm-tr__n { display: block; max-width: 640px; }
}
@media (max-width: 699px) {
  .hm-tr__n { max-width: none; }
  .hm-sample__figfoot { padding: 10px 16px 11px; }
  /* 44 px touch targets for the inline text links */
  .hm-proof__k .n-link, .hm-hero__plan .n-link, .hm-plan__mine .n-link, .hm-tr__note .n-link { min-height: 44px; display: inline-flex; align-items: center; }
  .hm-sample__groups a { min-height: 44px; }
}

/* ================= tablet ================= */
@media (max-width: 1099px) {
  .hm-hero__copy, .hm-hero__chart { grid-column: 1 / -1; }
  .hm-hero__copy { max-width: 720px; }
  .hm-sample__more { grid-template-columns: minmax(0, 1fr); }
  .hm-sample__chg { border-right: 0; border-bottom: 1px solid var(--hair); }
  .hm-mods__head { grid-template-columns: 44px minmax(0, 1fr) 200px; }
  .hm-mods__head > span:nth-child(3) { display: none; }
  .hm-mod { grid-template-columns: 44px minmax(0, 1fr) 200px; grid-template-areas: "num main mini" "num fig mini" "num extra extra"; row-gap: 10px; }
  .hm-band__dd, .hm-band__hv { grid-column: 1 / -1; }
  .hm-pricing__title, .hm-incl { grid-column: 1 / -1; }
  .hm-terms, .hm-terms--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-faq__rail, .hm-faq__list { grid-column: 1 / -1; }
  .hm-faq__railin { position: static; }
  .hm-plan { padding: 24px; }
  .hm-crypto__text, .hm-crypto > .hm-plan__act { padding: 20px 24px; }
}

/* ================= phone ================= */
@media (max-width: 699px) {
  .hm-hero { padding-top: 28px; }
  .hm-hero__grid { row-gap: 32px; }
  .hm-hero__h1 { margin-top: 12px; }
  .hm-hero__lede { margin-top: 14px; }
  .hm-hero__ctas { margin-top: 22px; }
  .hm-hero__dd { margin-top: 10px; min-height: 44px; }
  .hm-proof { margin-top: 22px; }
  .hm-proof__row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 12px 0; }
  .hm-proof__v, .hm-proof__u { font-size: 20px; }
  .hm-proof__k { font-size: 13px; }
  .hm-proof__k .n-link { font-size: 13px; }

  .hm-eia__head { padding: 14px 16px 4px; }
  .hm-eia__pending { margin: 6px 16px 0; }
  .hm-eia__chart { padding: 8px 10px 10px 4px; }
  .hm-eia__foot { padding: 12px 16px; }
  .hm-eia__footrow { flex-direction: column; align-items: flex-start; gap: 6px; }
  a.hm-eia__lock { min-height: 44px; }

  .hm-sample__wrap { margin-top: 32px; }
  .hm-sample__head { padding: 14px 16px; align-items: flex-start; }
  .hm-sample__right { align-items: flex-start; }
  .hm-sample__open { min-height: 44px; }
  .hm-sample__notice { padding: 12px 16px 0; }
  .hm-sample__ol { padding: 18px 16px 14px; }
  .hm-sample__chg, .hm-sample__side { padding: 16px; }
  .hm-sample__groups a { display: inline-flex; align-items: center; }
  .hm-sample__foot { padding: 12px 16px; }

  .hm-inside { padding: 56px 0 40px; }
  .hm-inside__head { margin-bottom: 20px; }
  .hm-mods__group { padding: 22px 0 8px; }
  .hm-mrow { border-bottom: 1px solid var(--hair-soft); }
  .hm-mrow > summary { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 16px; column-gap: 10px; align-items: center; min-height: 58px; padding: 8px 0; }
  .hm-mrow__num { font-family: var(--mono); font-size: 13px; color: var(--t3); }
  .hm-mrow__num--icon { color: var(--t2); display: flex; }
  .hm-mrow__t { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--t1); }
  .hm-mrow__f { font-size: 14px; font-weight: 500; color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .hm-mrow__chev { color: var(--t2); transition: transform .15s; }
  .hm-mrow[open] > summary .hm-mrow__chev { transform: rotate(180deg); }
  .hm-mrow__body { display: flex; flex-direction: column; gap: 12px; padding: 0 0 18px 36px; min-width: 0; }
  .hm-mrow__body .hm-mod__desc { margin-top: 0; }
  .hm-mrow__link { min-height: 44px; }
  .hm-mrow__body .hm-tr { margin-left: -36px; }
  .hm-fig__big { font-size: 18px; }
  .hm-tr > summary { padding: 10px 14px; min-height: 52px; }
  .hm-tr__body { padding: 0 14px 14px; }
  .hm-inside__cap .n-link { min-height: 44px; }

  .hm-band { padding: 56px 0; }
  .hm-band__head { margin-bottom: 24px; }
  .hm-dd__head, .hm-scard__head { padding: 14px 16px; }
  .hm-dd .n-kpi, .hm-scard .n-kpi { padding: 12px 16px; }
  .hm-dd .n-kpi__num, .hm-scard .n-kpi__num { font-size: 20px; }
  .hm-dd__chart { padding: 14px 16px 8px; }
  .hm-scard__body { padding: 16px; }
  .hm-dd__foot, .hm-scard__foot { padding: 8px 16px; }
  .hm-dd__foot .n-link { min-height: 44px; }
  .hm-hv__h { width: 84px; }
  .hm-hv__read, .hm-hv__all { min-height: 44px; }
  .hm-post { padding: 12px 0; }
  .hm-post__x { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  .hm-pricing { padding: 64px 0 32px; }
  .hm-pricing__title .n-h2 { font-size: 32px; }
  .hm-pricing__head { row-gap: 20px; margin-bottom: 20px; }
  .hm-checks { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hm-rate { grid-template-columns: minmax(0, 1fr); }
  .hm-plan { padding: 20px 16px 22px; }
  .hm-plan__num { font-size: 36px; }
  .hm-crypto { grid-template-columns: minmax(0, 1fr); }
  .hm-crypto__text { padding: 20px 16px 0; }
  .hm-crypto > .hm-plan__act { padding: 16px 16px 22px; }
  .hm-terms, .hm-terms--3 { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 4px; }
  .hm-terms__acc { margin-top: 16px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
  .hm-terms__acc > summary { min-height: 56px; }

  .hm-faq { padding: 40px 0 72px; }
  .hm-faq__facts { margin-top: 12px; }
  .hm-facts__acc { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); padding: 0 14px; }
  .hm-facts__acc .n-acc__body { padding-bottom: 8px; }
  .hm-facts .n-kv__k { width: 84px; }
  .hm-faq--folded details[data-fold] { display: none; }
  .hm-faq__close { margin-top: 16px; }
  .hm-close .n-btnrow .n-btn { flex: 1 1 140px; }

  .hm-s__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-spost__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hm-spost__t { font-size: 19px; }
  .hm-s__cta { padding: 18px 16px; }
}

/* ================= round 4: dotted normals, readout, colour legends ================= */
/* what's-inside minis: the one-line key for the dotted normal under each drawing */
.hm-mini__key { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.4; color: var(--t3); white-space: nowrap; }
.hm-mini__dots { width: 16px; height: 6px; flex: none; overflow: visible; }
.hm-mini__dots line { stroke: var(--ref); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0.01 3.2; }
.hm-mini__dots--s1 line { stroke: var(--s1); }

/* the EIA chart's readout: the degree-day pattern (coloured word · signed number), plain figures under it */
.hm-eia__ro { gap: 3px; }
.hm-eia__ro .n-ro__l { font-size: 14px; }
.hm-eia__ro .n-ro__t { white-space: normal; }
.hm-eia__range { white-space: nowrap; }
.hm-eia__basis .hm-eia__lvl { font-size: 13px; font-weight: 600; color: var(--t1); }
.hm-eia__legend { margin-top: 2px; }
.hm-eia__why { margin: 1px 0 0; font-size: 12px; line-height: 1.5; color: var(--t3); text-wrap: pretty; }
.hm-eia__why .n-clegend__help { font-size: 12px; }

/* degree-day card: the date the gutter's normal value belongs to */
.hm-dd__on { color: var(--t3); font-weight: 400; }
.hm-dd__keyb { padding: 10px 22px 11px; border-bottom: 1px solid var(--hair); }
.hm-dd__key { max-width: 88ch; font-size: 12.5px; line-height: 1.5; color: var(--t3); text-wrap: pretty; }
@media (max-width: 699px) { .hm-dd__keyb { padding: 10px 16px; } .hm-eia__why .n-clegend__help { min-height: 32px; } }

/* Samples page card: legend line under the tiles; the small outlook widget */
.hm-scard__legend { padding: 10px 22px 11px; border-bottom: 1px solid var(--hair); }
.hm-scard__ow { min-width: 0; }
/* the small Curve is drawn for a ~300 px rail; in the wider desktop card keep its drawing at that scale (the list beside it stays full width) */
.hm-scard__ow .n-ow--curve .n-owc__plot { max-width: 360px; }
/* final r4: at 1440 a 360 px drawing left the list ~194 px, so "Next 1–3 months" wrapped under its call; 316 px keeps each row on one line */
/* when the widget box is 560 px or wider (the ~600 px card at 1440), the call list sits beside the 360 px drawing instead of
   leaving the card's right half empty (like the dashboard's 700-940 px rule); narrower, it stays stacked below */
@container n-ow (min-width: 560px) {
  .hm-scard__ow .n-ow--curve .n-owc__wrap { grid-template-columns: 316px minmax(0, 1fr); column-gap: 24px; }
  .hm-scard__ow .n-ow--curve .n-owc__list { margin-top: 0; }
}
@media (max-width: 699px) {
  .hm-scard__legend { padding: 10px 16px; }
}

/* ================= round 5 (work5/SPEC5.md §4.4): rounding out ================= */
/* hero: "Track record →" on its own line under its sentence (small_screen L4) */
.hm-proof__k .hm-proof__tr { display: flex; width: fit-content; margin-top: 4px; }

/* front-month tile: what the price is ("Fri 18 Sep settle (markets shut)"), quiet like a basis */
.hm-tile__sess { color: var(--t2); }

/* section 06 mini (round_out A8): projected demand dashed in its colour, the average projected supply as the thin grey comparison line */
.hm-mini__proj path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hm-mini__dash { stroke: var(--s3); stroke-width: 1.75; stroke-dasharray: 4 3; }
.hm-mini__cmp { stroke: var(--cmp2); stroke-width: 1.25; }
.hm-mini__sw { width: 16px; height: 6px; flex: none; overflow: visible; }
.hm-mini__sw line { stroke-width: 1.5; stroke-linecap: round; }
.hm-mini__sw--cmp line { stroke: var(--cmp2); stroke-width: 1.25; }

/* the Samples commentary card carries the house-view key (round_out T14) */
.hm-spost__key { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair-soft); }

/* the Discord question lands a little below the pinned bar when the footer jumps to it */
#faq-discord { scroll-margin-top: 16px; }

/* Samples: the two cards stack below 900 px, so the degree-day chart and the region table get the full width (wide.md item 7) */
@media (max-width: 899px) {
  .hm-s__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Home hero at 700-1099 (wide.md item 8): the proof figures as one row of three, the chart a little shorter and higher */
@media (min-width: 700px) and (max-width: 1099px) {
  .hm-hero__copy { max-width: none; }
  .hm-hero__h1, .hm-hero__lede { max-width: 720px; }
  .hm-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; border-bottom: 1px solid var(--hair); }
  .hm-proof__row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; border-bottom: 0; align-content: start; align-items: start; }
  .hm-hero__chart .n-chart { height: 320px; }
}

@media (max-width: 699px) {
  /* a 12 px floor for the small captions (small_screen L1) */
  .hm-mini__cap, .hm-mini__key, .hm-mrow__u, .hm-pair .n-legend__i, .hm-pair__ticks, .hm-hbars__r, .hm-split__lab { font-size: 12px; }
  .hm-hbars__r { grid-template-columns: 68px minmax(0, 1fr) 48px; }
  .hm-proof__k .hm-proof__tr { margin-top: 0; }
  /* "The full report for Sat 26 Sep:" then its six links as a two-column grid, no dots (small_screen L3) */
  .hm-sample__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; line-height: 1.4; }
  .hm-sample__groups > .n-t3 { grid-column: 1 / -1; margin-bottom: 2px; }
  .hm-sample__groups .hm-sample__dot { display: none; }
  .hm-sample__groups a { display: flex; align-items: center; min-height: 44px; white-space: normal; }
  .hm-spost__key { margin-top: 14px; }
}
.hm-mini__sw--dash line { stroke: var(--s3); stroke-width: 1.75; stroke-dasharray: 4 3; stroke-linecap: butt; }
.hm-close__s { text-wrap: balance; }
@media (max-width: 699px) {
  /* degree-day tiles: the HDD / CDD split on its own line, no dot (small_screen M5) */
  .hm-dd__sep { display: none; }
  .hm-dd__split { display: block; }
}
/* the sample panel's head: once "Latest report … / Open the full sample" wraps under the title (tablet), it reads from the left */
@media (max-width: 899px) { .hm-sample__right { align-items: flex-start; } }
.hm-eia__basis .hm-eia__lvl { white-space: nowrap; }

/* ================= round 6: polish (QA after round 5) ================= */
/* the six sample tiles at 1100+: the front month gets the wider column so its two lines ("Fri 25 Sep settle (markets shut)",
   "↑ 3.1% vs Thu 24 Sep settle ?") stay one line each and the row keeps round 4's two-line tiles. #hm-sample outranks the
   grid rule ui.kpis injects by #id. Production drops "'s first reading" as on phones: its sub-label "Dry gas · first reading"
   already says the basis. */
@media (min-width: 1100px) {
  #hm-sample .n-kpis { grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)); }
  .hm-sample .n-kpi__lines .n-delta__basis .n-hide-phone { display: none; }
}
/* 1.45 from 1200 px (measured: at 1100 it squeezes the other five into extra wraps; 1.3 there keeps the row's height and
   still gives "$2.912 /MMBtu" room, which clipped in equal columns) */
@media (min-width: 1200px) {
  #hm-sample .n-kpis { grid-template-columns: minmax(0, 1.45fr) repeat(5, minmax(0, 1fr)); }
}
/* track record, phone table under 400 px: 6 px cell padding and flush outer edges, so the "5-yr avg" column fits the
   298 px box beside "Miss ?" (round 5 added the "?") instead of hiding behind the scroll hint */
@media (max-width: 399px) {
  .hm-tr__tall th, .hm-tr__tall td { padding-left: 6px; padding-right: 6px; }
  .hm-tr__tall th:first-child, .hm-tr__tall td:first-child { padding-left: 0; }
  .hm-tr__tall th:last-child, .hm-tr__tall td:last-child { padding-right: 0; }
}
/* the Samples page's degree-day card is narrow up to 1279 px (its tiles are about 226 px at 1024), so the HDD / CDD split
   goes on its own line there too, as on phones (small_screen M5): never a line ending in "/" */
@media (max-width: 1279px) {
  .hm-scard .hm-dd__sep { display: none; }
  .hm-scard .hm-dd__split { display: block; }
}
/* Samples card heads on phones: when the title block and the Free sample chip can't share a line, the chip drops under the
   title, so the overline, title and meta line get the card's full width and no line ends in "·" (seen at 360, and on the
   degree-day card's meta line up to 430). Where they fit side by side, flex-wrap leaves them as they were. */
@media (max-width: 699px) {
  .hm-scard__head { flex-wrap: wrap; row-gap: 10px; }
}
/* track record, wide table at 1100-1159 px: 16 columns were 853 px in an 826 px box at 1100, so the last week scrolled behind
   the hint; 6 px cell padding there fits it (from 1140 it fits at 8 px) */
@media (min-width: 1100px) and (max-width: 1159px) {
  .hm-tr__wide th, .hm-tr__wide td { padding-left: 6px; padding-right: 6px; }
}

/* ================= real site (BUILD_SPEC §1.15, §3.1) ================= */
/* What's inside: the desktop rows (≥ 700) and the phone rows (<details>) are both printed; n-hide-phone / n-only-phone choose.
   The phone copy's ids end in -m; core's NGC.target() resolves #track-record to #track-record-m on phones. */
.hm-mods.n-only-phone { display: flex; flex-direction: column; }
@media (min-width: 700px) { .hm-mods.n-only-phone { display: none; } }
/* the dated sample card (no valid sample file yet: the pinned sample, its date and links only) */
.hm-sample--card .hm-sample__side { padding-top: 18px; }
/* "Billing terms" and "Quick facts": accordion on phones, the list elsewhere (both printed) */
.hm-faq__facts > .n-hide-phone { display: flex; flex-direction: column; gap: 8px; }
/* the readout's colour comes from data-ci / data-cd on .n-ro (both modes printed, §1.14) */
.hm-eia__ro[data-ci="none"][data-cd="none"] .n-ro__w { color: var(--t1); }
/* the "N more questions" button is a phone control; the fold itself is phone-only CSS above */
@media (min-width: 700px) { .hm-faq__more { display: none; } }
/* the dated card's two tiles (front month, storage vs 5-yr) keep two columns at 1100+ (the six-tile template is the full panel's) */
#hm-sample.hm-sample--card .n-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }