/* ===========================================================
   Self-Managed Energy Assistance Study — stylesheet

   Principles:
   - Almost nothing is in a box. Hierarchy comes from type size,
     white space, and hairline rules.
   - Two levels of emphasis only: quiet aside, and caution.
   - One accent colour, used for structure and warning, never
     for decoration.
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-base);
  line-height: 1.65;
}

/* ---------- skip link ---------- */
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
        padding: var(--s3) var(--s4); z-index: 99; font-family: var(--sans); }
.skip:focus { left: 0; }

/* ---------- masthead ---------- */
.masthead { background: var(--paper); }
.masthead__in {
  max-width: var(--shell); margin: 0 auto;
  padding: var(--s5) var(--s5) var(--s5);
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
}

/* IU mark, then the study name, divided by a hairline */
.wordmark {
  display: flex; align-items: center; gap: var(--s4);
  text-decoration: none; color: var(--ink); max-width: 30rem;
}
.wordmark__mark { flex: none; height: 2.75rem; width: auto; display: block; }
.wordmark__t {
  font-family: var(--serif); font-weight: 600; font-size: var(--t-lg);
  line-height: 1.15; letter-spacing: -0.005em;
  padding-left: var(--s4); border-left: 1px solid var(--rule);
}
.wordmark:hover .wordmark__t { color: var(--accent); }

/* Questions block: a label, the number people actually need, then the rest.
   Three sizes of type doing three different jobs, not one grey run-on. */
.helpblock {
  margin-left: auto; font-family: var(--sans); text-align: right; line-height: 1.4;
}
.helpblock__k {
  margin: 0 0 var(--s1); font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3);
}
.helpblock__tel {
  display: block; font-family: var(--serif); font-size: var(--t-lg); font-weight: 600;
  color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.helpblock__tel:hover { color: var(--accent); text-decoration: underline;
                        text-decoration-color: var(--accent); }
.helpblock__mail {
  display: block; font-size: var(--t-sm); color: var(--ink-2);
  text-decoration-color: var(--rule); margin-top: 2px;
}
.helpblock__mail:hover { color: var(--accent); text-decoration-color: var(--accent); }
.helpblock__hrs {
  margin: var(--s1) 0 0; font-size: var(--t-xs); color: var(--ink-3);
}

/* ---------- page tabs ----------
   Four numbered tabs, always visible. This is the whole navigation: no side
   rail on desktop, no separate strip on mobile. One component, one place to
   look, and the numbers tell you how much guide there is. */
.tabs {
  background: var(--paper);
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule);
}
/* overflow-x is a safety net, not the design: the four tabs are meant to fit.
   It only matters if Public Sans fails to load and a wider fallback is used,
   where scrolling beats a broken masthead. */
.tabs__in { max-width: var(--shell); margin: 0 auto; padding: 0 var(--s5);
            overflow-x: auto; scrollbar-width: none; }
.tabs__in::-webkit-scrollbar { display: none; }
.tabs ul {
  display: flex; justify-content: space-between; gap: var(--s4);
  list-style: none; margin: 0; padding: 0;
}
.tabs a {
  display: flex; align-items: baseline; gap: var(--s3);
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  padding: var(--s4) 0; margin-bottom: -1px;
  border-bottom: 3px solid transparent; min-height: 44px;
}
.tabs__n {
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tabs__s { display: none; }
.tabs a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.tabs .is-here a { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tabs .is-here .tabs__n { color: var(--accent); }

/* ---------- shell ---------- */
.shell {
  max-width: var(--shell); margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s8);
}

/* ---------- article ---------- */
.doc > * { max-width: var(--measure); }
.doc > .wide { max-width: none; }

.eyebrow {
  font-family: var(--sans); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .14em; font-weight: 600; color: var(--ink-3); margin: 0 0 var(--s4);
}
h1 {
  font-family: var(--serif); font-weight: 600; font-size: var(--t-3xl);
  line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 var(--s5);
}
h2 {
  font-family: var(--serif); font-weight: 600; font-size: var(--t-xl);
  line-height: 1.2; letter-spacing: -0.01em; margin: var(--s7) 0 var(--s4);
}
h3 {
  font-family: var(--sans); font-weight: 600; font-size: var(--t-base);
  line-height: 1.35; margin: var(--s6) 0 var(--s2);
}
p { margin: 0 0 var(--s5); }
p, li { max-width: var(--measure); }
.lede { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2); margin-bottom: var(--s6); }
strong { font-weight: 600; }

a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 1px;
    text-underline-offset: 3px; }
a:hover { color: var(--accent); }

ul.plain { padding-left: 1.15rem; margin: 0 0 var(--s5); }
ul.plain li { margin-bottom: var(--s3); }

/* ---------- jump menu: hairlines, no box ---------- */
.jump { margin: 0 0 var(--s7); max-width: var(--measure); border-top: 1px solid var(--ink); }
.jump p {
  font-family: var(--sans); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .14em; font-weight: 600; color: var(--ink-3);
  margin: var(--s3) 0 var(--s2);
}
.jump ol { list-style: none; margin: 0; padding: 0; counter-reset: j; }
.jump li { counter-increment: j; border-bottom: 1px solid var(--rule-2); }
.jump li:last-child { border-bottom: 0; }
.jump a {
  display: flex; gap: var(--s4); align-items: baseline; padding: var(--s3) 0;
  text-decoration: none; color: var(--ink); min-height: 44px;
}
.jump a::before {
  content: counter(j); flex: none; width: 1.2rem;
  font-family: var(--sans); font-size: var(--t-sm); color: var(--accent); font-weight: 600;
}
.jump a:hover { color: var(--accent); }

/* ---------- long-page sections ---------- */
.sec { scroll-margin-top: 4rem; padding-top: var(--s6); margin-top: var(--s7);
       border-top: 1px solid var(--rule); }
.sec:first-of-type { margin-top: 0; }
.sec > h2 { margin-top: 0; font-size: var(--t-2xl); }
.backtop { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-3);
           text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
.backtop:hover { color: var(--accent); }

/* ===========================================================
   TWO levels of emphasis. That is all.
   .note / .note--ok / .note--study  ->  quiet aside
   .note--warn / .note--stop         ->  caution
   =========================================================== */
.note {
  margin: var(--s5) 0; padding: var(--s4) 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  max-width: var(--measure);
}
.note > :last-child { margin-bottom: 0; }
.note h3 {
  margin: 0 0 var(--s2); font-family: var(--sans); font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 600;
}
.note p { margin-bottom: var(--s3); }

.note--warn, .note--stop {
  border: 0; border-left: 3px solid var(--accent);
  padding: var(--s2) 0 var(--s2) var(--s5);
}
.note--warn h3, .note--stop h3 { color: var(--accent); }

/* ---------- comparison columns, no boxes ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); margin: var(--s5) 0; }
.panel { border-top: 1px solid var(--ink); padding-top: var(--s3); }
.panel h3 { margin-top: 0; }
/* a panel used as a signpost to another page: the heading is the link, set in
   the serif so it reads as a destination rather than a label */
.panel--go h3 { font-family: var(--serif); font-size: var(--t-lg); line-height: 1.25; }
.panel--go h3 a { text-decoration: none; }
.panel--go h3 a::after { content: " \2192"; color: var(--accent); }
.panel--go:hover { border-top-color: var(--accent); }
.panel--go:hover h3 a { color: var(--accent); }
.panel--go p { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2);
               margin: var(--s2) 0 0; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { padding: var(--s2) 0 var(--s2) 1.4rem; position: relative;
            border-bottom: 1px solid var(--rule-2); font-size: var(--t-sm); }
.panel li:last-child { border-bottom: 0; }
.panel li::before { position: absolute; left: 0; top: var(--s2); font-family: var(--sans); }
.panel--can li::before  { content: "\2713"; color: var(--ink-2); }
.panel--cant li::before { content: "\2715"; color: var(--accent); }
.panel--cant { border-top-color: var(--accent); }

/* ---------- numbered how-to ---------- */
ol.steps { list-style: none; counter-reset: s; margin: var(--s5) 0; padding: 0; }
ol.steps > li {
  counter-increment: s; position: relative; padding: 0 0 var(--s5) 2.5rem;
}
ol.steps > li::before {
  content: counter(s) "."; position: absolute; left: 0; top: 0;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; color: var(--accent);
  line-height: 1.9;
}
ol.steps > li:last-child { padding-bottom: 0; }
ol.steps .hint { display: block; color: var(--ink-2); font-size: var(--t-sm);
                 margin-top: var(--s2); }

/* ---------- what you need to do ---------- */
.need { list-style: none; margin: var(--s5) 0; padding: 0; counter-reset: n; }
.need li {
  counter-increment: n; position: relative; padding: var(--s4) 0 var(--s4) 2.5rem;
  border-bottom: 1px solid var(--rule-2);
}
.need li:first-child { border-top: 1px solid var(--rule); }
.need li::before {
  content: counter(n) "."; position: absolute; left: 0; top: var(--s4);
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; color: var(--accent);
  line-height: 1.7;
}
.need b { display: block; font-weight: 600; }
.need span { color: var(--ink-2); font-size: var(--t-sm); }

/* ---------- big steps with a screenshot each ---------- */
.stepcards { counter-reset: sc; margin: var(--s6) 0; }
.stepcard {
  counter-increment: sc; max-width: var(--measure);
  padding: var(--s6) 0; border-top: 1px solid var(--rule-2);
}
.stepcard:first-child { border-top: 1px solid var(--ink); }
.stepcard__h { display: flex; gap: var(--s5); align-items: baseline; }
.stepcard__h::before {
  content: counter(sc); flex: none; width: 1.6rem;
  font-family: var(--serif); font-size: var(--t-2xl); font-weight: 600;
  color: var(--accent); line-height: 1;
}
.stepcard__t { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600;
               margin: 0; line-height: 1.25; }
.stepcard__b { margin-top: var(--s4); padding-left: calc(1.6rem + var(--s5)); }
.stepcard__b > :last-child { margin-bottom: 0; }
.stepcard__b p { margin-bottom: var(--s3); }
.stepcard .figure { margin: var(--s4) 0 0; max-width: none; }
.stepcard .hint { display: block; color: var(--ink-2); font-size: var(--t-sm); }

/* ---------- stepper: one step at a time ----------
   Added by JS on top of the plain .stepcards list, never in the markup. With
   JS off the list is untouched, and print puts every card back — so nothing
   is hidden from someone who scrolls, searches, or takes it to the kiosk on
   paper, which is what kept this a list in the first place.

   Inactive cards are moved out of flow and hidden with `visibility`, NOT
   `display: none`. display:none elements do not increment CSS counters, and
   the step numbers come from counter(sc) — hide them that way and every step
   renders as "1". */
.stepcards--stepper { position: relative; }
.stepcards--stepper .stepcard { border-top: 0; padding-top: 0; }
.stepcards--stepper .stepcard:not(.is-current) {
  position: absolute; top: 0; left: 0; width: 100%;
  visibility: hidden; pointer-events: none;
}

.stepper__dots {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  list-style: none; margin: var(--s6) 0 var(--s5); padding: 0;
  max-width: var(--wide-el);
}
.stepper__dots li { margin: 0; max-width: none; }
.stepper__dots button {
  width: 2.75rem; height: 2.75rem; padding: 0; line-height: 1;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 50%; cursor: pointer;
}
.stepper__dots button:hover { border-color: var(--ink-3); color: var(--ink); }
.stepper__dots button.is-current {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.stepper__nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--rule); max-width: var(--wide-el);
}
.stepper__btn {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink); background: none; border: 0; cursor: pointer;
  padding: var(--s3) 0; min-height: 44px;
}
.stepper__btn:hover:not(:disabled) { color: var(--accent); }
.stepper__btn:disabled { color: var(--rule); cursor: default; }
.stepper__count {
  margin: 0; font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
}
/* the focus target when a step changes — never show a ring on plain reading */
.stepcard__t:focus { outline: none; }
.stepcard__t:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- stories ---------- */
.story { margin: 0 0 var(--s6); padding-left: var(--s5);
         border-left: 1px solid var(--rule); max-width: var(--measure); }
.story__who { margin-bottom: var(--s2); }
.story__name { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; }
.story__what { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-3);
               text-transform: uppercase; letter-spacing: .1em; display: block;
               margin-top: var(--s1); }
.story blockquote { margin: 0; color: var(--ink-2); }
.story blockquote p:last-child { margin-bottom: 0; }

/* ---------- two payment channels ---------- */
.ways3 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); margin: var(--s5) 0; }
.way { border-top: 1px solid var(--ink); padding-top: var(--s3); }
.way h3 { margin: 0 0 var(--s2); }
.way p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

/* ---------- Q&A ---------- */
.qa { border-top: 1px solid var(--ink); margin-top: var(--s5); max-width: var(--measure); }
.qa details { border-bottom: 1px solid var(--rule-2); }
.qa summary { cursor: pointer; padding: var(--s4) 2rem var(--s4) 0; position: relative;
              font-weight: 600; list-style: none; min-height: 44px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: var(--s2); top: var(--s4);
                     font-family: var(--sans); color: var(--accent); }
.qa details[open] summary::after { content: "\2013"; }
.qa .a { padding: 0 0 var(--s4); color: var(--ink-2); }
.qa .a > :last-child { margin-bottom: 0; }

/* ---------- contact block ---------- */
.callout-phone {
  margin: var(--s7) 0 0; padding: var(--s5) 0 0;
  border-top: 3px solid var(--ink); max-width: var(--measure);
}
.callout-phone h3 { margin: 0 0 var(--s2); }
.callout-phone p { color: var(--ink-2); font-size: var(--t-sm); margin-bottom: var(--s2); }
/* A phone number is a thing to read and dial, not a headline. At t-2xl it was
   within a hair of the h1 and read as a second title for the page. It is now
   t-lg — the same size as the masthead number, so a phone number is one size
   everywhere on the site. If the help page ends up under-selling the number,
   this single token is the dial; t-xl is the next step up. */
.callout-phone .tel {
  font-family: var(--serif); font-size: var(--t-lg); font-weight: 600;
  display: inline-block; margin: var(--s2) 0; color: var(--ink);
  text-decoration-color: var(--accent);
}

/* ---------- next page ---------- */
.nextlink { display: block; margin-top: var(--s8); padding-top: var(--s4);
            border-top: 1px solid var(--rule); text-decoration: none; max-width: var(--measure); }
.nextlink .k { display: block; font-family: var(--sans); font-size: var(--t-xs);
               text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3);
               margin-bottom: var(--s2); }
.nextlink .v { font-family: var(--serif); font-size: var(--t-xl); font-weight: 600; color: var(--ink); }
.nextlink:hover .v { color: var(--accent); }
.nextlink .v::after { content: " \2192"; color: var(--accent); }

/* ---------- figures ---------- */
.figure { margin: var(--s5) 0; max-width: var(--measure); }
.figure img, .figure svg { display: block; width: 100%; height: auto; }
.figure img { border: 1px solid var(--rule); }
.figure figcaption { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2);
                     margin-top: var(--s3); line-height: 1.5;
                     padding-top: var(--s2); border-top: 1px solid var(--rule-2); }
.mock { border: 1px solid var(--rule); padding: var(--s4); }

/* screenshot placeholder — editorial only */
.shot { border: 1px dashed var(--rule); padding: var(--s5); font-family: var(--sans);
        background: var(--paper-2); }
.shot__tag { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
             font-weight: 600; color: var(--accent); margin: 0 0 var(--s3); }
.shot p { font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 var(--s2); max-width: none; }
.shot p:last-child { margin-bottom: 0; }
.shot code { font-size: .88em; background: var(--paper); padding: 1px 4px;
             border: 1px solid var(--rule-2); }
body.clean .shot { display: none; }

/* ---------- partners ---------- */
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6);
          margin: var(--s5) 0 var(--s7); max-width: none; }
.pcard { border-top: 1px solid var(--rule); padding-top: var(--s4); }
/* a fixed box with the mark sitting on its floor: three logos of three
   different shapes still land on one line, and the captions below start
   level. max-width is what actually tunes each one's optical weight. */
.pcard img {
  display: block; margin: 0 0 var(--s3);
  height: 4.5rem; width: 100%;
  object-fit: contain; object-position: left bottom;
}
.pcard.p-now img { max-width: 4.5rem; }
.pcard.p-asc img { max-width: 10rem; }
.pcard.p-mid img { max-width: 10rem; }
.pcard p { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2);
           margin: 0; max-width: none; }
.plist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.plist li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule-2);
            font-family: var(--sans); font-size: var(--t-sm); }
.plist b { font-family: var(--serif); font-size: var(--t-base); display: block;
           font-weight: 600; margin-bottom: 2px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); margin-top: var(--s8); }
.foot__in { max-width: var(--shell); margin: 0 auto; padding: var(--s6) var(--s5) var(--s8); }
/* Two marks and nothing else — the one-line roles are gone, so the logos
   carry it. Bottom-aligned in a shared box so two different shapes sit on
   one line. */
.partners { display: flex; flex-wrap: wrap; align-items: flex-end;
            gap: var(--s5) var(--s6); margin: 0 0 var(--s6);
            padding: 0; list-style: none; }
.partners a { display: flex; align-items: flex-end; height: 3rem; }
.partners img { display: block; width: auto; height: auto; }

/* A round badge and a small portrait block never read as equal at the same
   height. Sized by eye instead. iu.jpg is only 52x61 native, so 2.5rem is
   about as large as it goes before it turns soft. */
.partners .p-iu  img { max-height: 2.5rem; max-width: 3rem; }
.partners .p-now img { max-height: 3rem;   max-width: 3rem; }
/* Kept for if Ascentra and MidAmerican come back to the footer. Note the
   midamerican rule: that SVG carries a viewBox but no width/height attributes,
   so it has a ratio and no intrinsic size — as a flex item that resolves to
   zero and the logo silently disappears. An explicit width pins it. */
.partners .p-asc img { max-height: 2.1rem; max-width: 8.5rem; }
.partners .p-mid img { width: 8.5rem; height: auto; }
.foot p { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2); max-width: 42rem; }
.foot .fine { font-size: var(--t-xs); color: var(--ink-3); }

/* ---------- editorial placeholders ---------- */
.todo { background: #FBF0B2; color: #4A3A00; padding: 0 3px;
        box-shadow: inset 0 -2px 0 #C9A400; }
body.clean .todo { background: none; box-shadow: none; color: inherit; }

/* ---------- accessibility floor ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- responsive ---------- */
@media (max-width: 52rem) {
  .shell { padding: var(--s5) var(--s4) var(--s7); }
  .masthead__in { padding: var(--s4); gap: var(--s4); }
  .wordmark { max-width: none; }
  .wordmark__mark { height: 2.25rem; }
  .wordmark__t { font-size: var(--t-base); }
  .helpblock { margin-left: 0; width: 100%; text-align: left;
               padding-top: var(--s3); border-top: 1px solid var(--rule-2); }

  /* four tabs still fit across a phone once the labels shorten and the
     number moves above the word */
  .tabs__in { padding: 0 var(--s2); }
  .tabs ul { gap: 0; }
  .tabs li { flex: 1 1 0; min-width: 0; }
  .tabs a {
    flex-direction: column; align-items: center; gap: 1px; text-align: center;
    padding: var(--s3) var(--s1); white-space: normal; font-size: var(--t-xs);
    line-height: 1.25;
  }
  .tabs__t { display: none; }
  .tabs__s { display: block; }

  h1 { font-size: var(--t-2xl); }
  .grid2, .ways3, .pcards { grid-template-columns: 1fr; gap: var(--s5); }
  .stepcard__b { padding-left: 0; }

  /* two marks fit a phone at close to full size; only trim a little */
  .partners { gap: var(--s5); }
  .partners a { height: 2.75rem; }
  .partners .p-iu  img { max-height: 2.25rem; max-width: 2.75rem; }
  .partners .p-now img { max-height: 2.75rem; max-width: 2.75rem; }
  .partners .p-asc img { max-height: 1.7rem;  max-width: 6.5rem; }
  .partners .p-mid img { width: 6.5rem; }
}

/* ---------- print ---------- */
@media print {
  .tabs, .nextlink, .skip, .jump, .shot, .backtop { display: none; }
  /* paper gets every step, not whichever one was on screen */
  .stepper__dots, .stepper__nav { display: none; }
  .stepcards--stepper .stepcard:not(.is-current) { position: static; visibility: visible; }
  .stepcards--stepper .stepcard { border-top: 1px solid #ccc; padding-top: 1rem; }
  body { background: #fff; font-size: 11pt; }
  .shell { display: block; max-width: none; padding: 0; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .stepcard, .story, .note { break-inside: avoid; }
}

/* ---------- refinements ---------- */

/* the routing number is data, not prose — set it like data */
.note strong[data-fill] {
  display: inline-block; font-family: var(--sans); font-weight: 600;
  font-size: var(--t-lg); font-variant-numeric: tabular-nums;
  letter-spacing: .04em; margin-top: var(--s1);
}

/* a lede should read as a different voice, not just smaller ink */
.lede { max-width: 30rem; }

/* ===========================================================
   v0.6 — the contents rail becomes a numbered tab bar
   The right-margin rail was quiet by design, and quiet was the problem:
   it indexed the site so discreetly that a reader could finish page one
   without registering that pages two to four existed. Four numbered tabs
   under the masthead say it once, plainly, on every screen size — and
   they replace the separate mobile strip, so there is one navigation
   instead of two.
   =========================================================== */

/* the article no longer shares the row with a rail, so it takes the
   full shell; the shell narrows to keep the same column width */
:root { --measure: 38rem; --wide-el: 46rem; --shell: 52rem; }

.shell--solo { max-width: 42rem; }

.lede { max-width: 34rem; }

.jump, .note, .figure, .stepcard, .qa, .callout-phone, .nextlink,
.grid2, .ways3, .need, .plist, ol.steps, .story {
  max-width: var(--wide-el);
}
.figure figcaption, .note p, .story blockquote { max-width: 38rem; }