/* GoFuelFree interiors. Photography, readable stories and useful tools share the
   same blue ink and warm paper as the masthead. Load after the legacy sheets. */

:is(.editorial-page,.tool-page) main {
  --interior-surface: var(--warm-white, #fffdf8);
  --interior-soft: #eee9df;
  --interior-blue-soft: #dbe6ec;
}
:is(.editorial-page,.tool-page) main :is(h1,h2,h3) {
  color: var(--brand-blue);
  text-transform: none;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.035em;
}
:is(.editorial-page,.tool-page) main h2 em { font-weight: 400; }
:is(.editorial-page,.tool-page) main .eyebrow {
  color: var(--brand-blue);
  font-family: var(--body);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.65;
}
:is(.editorial-page,.tool-page) .breadcrumbs {
  padding-top: 24px;
  font-size: .73rem;
  gap: 9px;
}
:is(.editorial-page,.tool-page) .page-intro {
  padding-block: 45px 48px;
  background: transparent;
  border-color: var(--line);
}
:is(.editorial-page,.tool-page) .page-intro h1 {
  font-size: clamp(3.2rem, 6.2vw, 6.3rem);
  line-height: 1.01;
  max-width: 1050px;
  text-wrap: balance;
}
:is(.editorial-page,.tool-page) .page-intro .lede {
  color: var(--ink);
  max-width: 720px;
  font-size: 1.05rem;
  line-height: 1.8;
}
:is(.editorial-page,.tool-page) main .section { padding-block: 65px; }
:is(.editorial-page,.tool-page) main .section.compact { padding-top: 38px; }
:is(.editorial-page,.tool-page) main .mag-section { padding-block: 65px; }
:is(.editorial-page,.tool-page) main .department-heading { margin-bottom: 34px; }
:is(.editorial-page,.tool-page) main .department-heading h2 {
  font-size: clamp(2.8rem, 4.6vw, 4.7rem);
  line-height: 1.03;
}
:is(.editorial-page,.tool-page) main .text-link,
:is(.editorial-page,.tool-page) main .story-read {
  color: var(--brand-blue);
  font-size: .83rem;
  font-weight: 700;
}
:is(.editorial-page,.tool-page) main :is(.button.primary,.button.dark) {
  background: var(--brand-blue);
  color: var(--warm-white);
  border-color: var(--brand-blue);
}
:is(.editorial-page,.tool-page) main .button.outline {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
  background: transparent;
}
:is(.editorial-page,.tool-page) main .button {
  border-radius: 999px;
  min-height: 48px;
  padding: 13px 23px;
  font-size: .83rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
:is(.editorial-page,.tool-page) main .button:hover { transform: translateY(-1px); }
:is(.editorial-page,.tool-page) main :is(input,select,button,a,summary):focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 4px;
}
:is(.editorial-page,.tool-page) main :is(.form-note,.source-note,.small-note,.catalog-context) {
  color: var(--muted);
}
:is(.editorial-page,.tool-page) main :is(.form-error,#fuel-error) { color: #8c351e; }

/* Reading pages: a generous opening, a quiet contents rail and a narrow measure. */
.editorial-page .story-opening,
.editorial-page .compact-story .story-opening {
  grid-template-columns: 1.08fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  padding-block: 45px 62px;
  max-width: 1500px;
}
.editorial-page .story-title h1,
.editorial-page .compact-story .story-title h1 {
  font-size: clamp(3.1rem, 4.9vw, 5.4rem);
  line-height: 1.035;
  font-weight: 400;
  text-wrap: balance;
}
.editorial-page .story-title .lede {
  font-size: 1.06rem;
  line-height: 1.85;
  margin-block: 23px 27px;
}
.editorial-page .byline { color: var(--muted); font-size: .75rem; }
.editorial-page .story-lead-image img,
.editorial-page .compact-story .story-lead-image img {
  height: clamp(350px, 34vw, 510px);
  border-radius: 3px 74px 3px 3px;
  background: var(--interior-soft);
}
.editorial-page .story-lead-image figcaption { font-size: .66rem; line-height: 1.6; }
.editorial-page .local-story .story-opening {
  background: transparent;
  margin-top: 0;
  margin-inline: auto;
  max-width: 1500px;
  padding-inline: 4.3%;
}
.editorial-page .reading-page .article-layout {
  grid-template-columns: 210px minmax(0, 720px);
  max-width: 1170px;
  gap: 65px;
  padding-top: 5px;
  padding-bottom: 80px;
}
.editorial-page .article-toc {
  border-left: 0;
  padding-left: 0;
  top: 112px;
}
.editorial-page .article-toc details { border-top: 1px solid var(--brand-blue); padding-top: 19px; }
.editorial-page .article-toc summary {
  color: var(--brand-blue);
  font-size: .67rem;
  font-weight: 700;
}
.editorial-page .article-toc a { color: var(--muted); font-size: .78rem; margin: 6px 0; }
.editorial-page .article-toc a:hover { color: var(--brand-blue); }
.editorial-page .article-toc .toc-tool {
  background: transparent;
  color: var(--brand-blue);
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
  font-size: .79rem;
}
.editorial-page .article-body > section { margin-block: 44px; }
.editorial-page .article-body > section > h2 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 3vw, 2.8rem);
  line-height: 1.12;
  margin-bottom: 22px;
}
.editorial-page .article-body > section > p,
.editorial-page .article-body :is(ul,ol) {
  font-family: var(--display);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1.73;
  font-weight: 400;
  letter-spacing: 0;
}
.editorial-page .article-body a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.editorial-page .article-body .guide-takeaway {
  background: transparent;
  border-top: 1px solid var(--brand-blue);
  border-bottom: 1px solid var(--line);
  padding: 25px 0 28px;
  margin-bottom: 42px;
}
.editorial-page .guide-takeaway p { font-weight: 500; font-size: 1.05rem; line-height: 1.75; }
.editorial-page .article-body blockquote {
  border-left: 2px solid var(--brand-blue);
  background: transparent;
  padding: 5px 0 5px 26px;
  margin-block: 32px;
  color: var(--brand-blue);
}
.editorial-page .article-body blockquote p { font: italic 400 1.5rem/1.5 var(--display); }
.editorial-page .article-body .article-sources h2 { font-size: 2.1rem; }
.editorial-page .article-body .article-sources > p,
.editorial-page .article-body .article-sources :is(ul,ol,li) {
  font-family: var(--body);
  font-size: .84rem;
  line-height: 1.8;
  color: var(--muted);
}
.editorial-page .story-next {
  padding: 32px;
  border-radius: 0 48px 0 0;
  background: var(--interior-surface);
  border: 1px solid var(--line);
}
.editorial-page .story-next h2 { font-size: 2.6rem; line-height: 1.08; }
.editorial-page .story-next > p:not(.eyebrow) { color: var(--ink); font-size: .96rem; }
.editorial-page .related-stories { background: transparent; }

/* Open shelves of stories. A photo and a headline do most of the work. */
.editorial-page .magazine-index .guide-search { border-top-width: 1px; padding-top: 28px; }
.editorial-page :is(.magazine-desks,.situation-nav) { gap: 8px 14px; }
.editorial-page :is(.magazine-desks,.situation-nav) a {
  border-color: var(--line);
  border-radius: 999px;
  font-size: .79rem;
  padding: 10px 17px;
  color: var(--brand-blue);
  font-weight: 600;
}
.editorial-page :is(.magazine-desks,.situation-nav) a:hover {
  background: var(--brand-blue);
  color: var(--warm-white);
  border-color: var(--brand-blue);
}
.editorial-page .story-grid { gap: 42px 30px; }
.editorial-page .story-card,
.editorial-page .story-card:nth-child(n) { background: transparent; }
.editorial-page .story-picture { background: var(--interior-soft); border-radius: 2px; }
.editorial-page .story-copy { padding-top: 20px; }
.editorial-page .story-copy h2 { font-size: 2.15rem; line-height: 1.1; }
.editorial-page .story-copy > p { color: var(--ink); font-size: .94rem; line-height: 1.75; }
.editorial-page .story-copy .guide-meta { font-size: .65rem; color: var(--muted); }
.editorial-page .story-read { padding-top: 16px; }
.editorial-page .story-photo-label {
  background: var(--warm-white);
  color: var(--brand-blue);
  font-size: .7rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 7px 13px;
  box-shadow: none;
}
.editorial-page .card-photo-credit { font-size: .62rem; }
.editorial-page .guide-search :is(input,select) {
  border-color: #929b9e;
  background: var(--warm-white);
  border-radius: 5px;
  min-height: 52px;
  padding: 12px 14px;
}
.editorial-page .guide-search label { font-size: .78rem; color: var(--ink); }
.editorial-page .guide-results-line { margin-block: 22px 34px; }
.editorial-page .catalog-empty { background: var(--warm-white); }

/* Ride introductions and the buying shortlist. */
.editorial-page :is(.bike,.board,.scooter,.euc,.skate) { background: transparent; }
.editorial-page .magazine-categories { gap: 45px 30px; }
.editorial-page .magazine-categories .category-tile {
  padding: 0;
  border: 0;
  background: transparent;
}
.editorial-page .magazine-categories .category-tile:hover { transform: none; }
.editorial-page .category-tile > img { border-radius: 2px 44px 2px 2px; background: var(--interior-soft); }
.editorial-page .category-tile:nth-child(even) > img { border-radius: 2px 2px 44px 2px; }
.editorial-page .category-tile.euc > img,
.editorial-page .category-tile.skate > img { background: var(--interior-soft); }
.editorial-page .category-tile h2 { font-size: 3rem; margin-bottom: 14px; }
.editorial-page .category-tile p { color: var(--ink); font-size: .95rem; line-height: 1.8; }
.editorial-page .ride-hero { background: transparent; gap: 60px; }
.editorial-page .ride-hero h1 { font-size: clamp(3.7rem, 6.2vw, 6.5rem); }
.editorial-page .ride-hero figure { max-width: none; }
.editorial-page .ride-hero figure img,
.editorial-page .ride-hero.euc figure img,
.editorial-page .ride-hero.skate figure img {
  height: 430px;
  max-height: none;
  object-fit: cover;
  mix-blend-mode: normal;
  border-radius: 2px 70px 2px 2px;
  background: var(--interior-soft);
}
.editorial-page .ride-hero figcaption { font-size: .66rem; text-align: left; }
.editorial-page .ride-jumps { background: var(--sand); padding-block: 18px; gap: 20px 32px; }
.editorial-page .ride-jumps a { font-size: .78rem; color: var(--brand-blue); }
.editorial-page .ride-facts { gap: 28px; padding-bottom: 29px; margin-bottom: 46px; }
.editorial-page .ride-facts dt { font-size: .65rem; }
.editorial-page .ride-facts dd { font-size: .95rem; font-weight: 500; line-height: 1.6; }
.editorial-page .ride-editorial { gap: 70px; }
.editorial-page .ride-editorial h2 { font-size: 3.4rem; }
.editorial-page .benefit { padding-block: 24px; gap: 23px; }
.editorial-page .benefit > span { font: italic 400 1.7rem/1.2 var(--display); color: var(--brand-blue); }
.editorial-page .benefit h3 { font-size: 1.85rem; line-height: 1.2; }
.editorial-page .benefit p { color: var(--ink); font-size: .97rem; line-height: 1.8; }
.editorial-page .tradeoff-panel {
  background: var(--interior-surface);
  padding: 29px;
  border-radius: 0 45px 0 0;
  border: 1px solid var(--line);
}
.editorial-page .tradeoff-panel h3 { font-size: 2.65rem; line-height: 1.05; }
.editorial-page .tradeoff-panel li { font-size: .93rem; line-height: 1.8; }
.editorial-page .product-card { border-color: var(--line); background: var(--warm-white); }
.editorial-page .product-heading h3 { font-size: 1.8rem; line-height: 1.15; }
.editorial-page .product-heading strong { color: var(--brand-blue); font-size: 1.1rem; }
.editorial-page .product-specs span { background: var(--interior-soft); }
.editorial-page .product-copy > p,
.editorial-page .product-copy .tradeoff { color: var(--ink); }
.editorial-page .product-image > span { background: var(--brand-blue); color: var(--warm-white); }
.editorial-page .product-cert { background: #f4ebda; border-color: #947149; color: #674e31; }

/* Tables remain tables: useful contrast, clear row rules, contained scrolling. */
:is(.editorial-page,.tool-page) main :is(.table-wrap,.editorial-table,.compare-table-wrap) {
  background: var(--warm-white);
  border-color: var(--line);
  overscroll-behavior-x: contain;
}
:is(.editorial-page,.tool-page) main thead,
.editorial-page .editorial-table thead th {
  background: var(--brand-blue);
  color: var(--warm-white);
}
:is(.editorial-page,.tool-page) main :is(th,td) { border-color: #d6d3c9; }
.editorial-page .editorial-table caption { background: var(--interior-soft); }
.editorial-page .editorial-table tbody th,
.tool-page .compare-table-wrap tbody th { background: #eee9df; }
.editorial-page .editorial-table tbody tr:nth-child(even) td { background: #f8f5ef; }
.editorial-page .editorial-table { margin-block: 29px; }
.editorial-page .editorial-table :is(ul,ol,li) { font: inherit; }

/* Places and laws: dates and status remain distinct from the headlines. */
.editorial-page .discovery-spread { background: var(--interior-surface); padding-block: 50px; }
.editorial-page .discovery-spread h2 { font-size: clamp(3rem, 5vw, 4.8rem); }
.editorial-page .discovery-links strong { font: 400 2rem/1.2 var(--display); color: var(--brand-blue); }
.editorial-page .discovery-links :is(span,small) { color: var(--muted); }
.editorial-page .situation-shortcuts { column-gap: 26px; }
.editorial-page .situation-shortcuts a {
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  padding: 24px 0;
  min-height: 88px;
  font: 400 1.75rem/1.2 var(--display);
  color: var(--brand-blue);
}
.editorial-page .situation-shortcuts a:hover { background: transparent; text-decoration: underline; text-underline-offset: 5px; }
.editorial-page .situation-start h2 { font-size: 3rem; }
.editorial-page .law-opening { padding-block: 44px 54px; border-bottom-width: 1px; }
.editorial-page .law-opening h1 { font-size: clamp(3.6rem, 6vw, 6.2rem); line-height: 1.02; }
.editorial-page .law-opening-copy > p { font: 400 1.3rem/1.65 var(--display); }
.editorial-page .law-opening-copy .law-desk-date { font-family: var(--body); font-size: .75rem; }
.editorial-page .law-front { background: var(--brand-blue); color: var(--warm-white); }
.editorial-page .law-front :is(h2,h3,.eyebrow),
.editorial-page .law-front-links b { color: var(--warm-white); }
.editorial-page .law-front-heading > p:not(.eyebrow),
.editorial-page .law-front-links small { color: #e0e8eb; }
.editorial-page .law-front-links > a { border-color: #7695ab; }
.editorial-page .law-front .button { background: var(--warm-white); color: var(--brand-blue); border-color: var(--warm-white); }
.editorial-page .law-front :is(a,button):focus-visible { outline-color: var(--warm-white); }
.editorial-page .law-status-grid { gap: 28px 34px; }
.editorial-page .law-status-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--brand-blue);
  padding: 27px 0 23px;
}
.editorial-page .law-status-card h3 { font-size: 2.2rem; line-height: 1.14; }
.editorial-page .law-status-card > p:not(.law-event-date) { font-size: .96rem; line-height: 1.8; }
.editorial-page .law-badge { border-radius: 999px; padding: 5px 11px; font-size: .65rem; font-weight: 700; }
.editorial-page .law-badge.current { background: #e7eee6; color: #395345; }
.editorial-page .law-badge.future { background: #f3e8cf; color: #73551c; }
.editorial-page .law-badge.vetoed { background: #eee1da; color: #793f2b; }
.editorial-page .law-badge.proposed { background: #e9e5f0; color: #575073; }
.editorial-page .law-question-section { background: var(--interior-surface); }
.editorial-page .law-questions h3 { font-size: 2.3rem; }
.editorial-page .law-card-art,
.editorial-page .place-card-art { background: var(--interior-blue-soft); color: var(--brand-blue); border-color: var(--brand-blue); }
.editorial-page .place-card-art > span { color: var(--brand-blue); }
.editorial-page .place-card-art::after { display: none; }
.editorial-page .law-proposal { background: var(--interior-surface); border-color: #8a8199; }
.editorial-page :is(.law-checked,.article-law-status,.local-law-update) {
  background: var(--interior-surface);
  border-left: 2px solid var(--brand-blue);
}
.editorial-page .law-checked { font-family: var(--body); }
.editorial-page .law-place-links > a { border-top-width: 1px; color: var(--brand-blue); }

/* The gas-bill hub uses the same calculation styling as the main tool. */
.editorial-page .fuel-hub-opening h1 { font-size: clamp(3.5rem, 6.2vw, 6.5rem); line-height: 1.02; }
.editorial-page .fuel-hub-lede > p { font-family: var(--display); font-size: 1.35rem; line-height: 1.7; }
.editorial-page :is(.fuel-check-intro,.fuel-hub-section) h2 { font-size: clamp(2.8rem, 4.2vw, 4.5rem); line-height: 1.05; }
.editorial-page .fuel-fields input { border-color: #929b9e; border-radius: 5px; background: var(--warm-white); }
.editorial-page .fuel-check-result {
  background: var(--brand-blue);
  color: var(--warm-white);
  border: 0;
  border-radius: 0 45px 0 0;
  padding: 29px;
}
.editorial-page .fuel-monthly output { font-weight: 400; letter-spacing: -.05em; font-size: clamp(4rem, 5vw, 5.3rem); }
.editorial-page .fuel-yearly { border-color: #7695ab; }
.editorial-page .fuel-yearly strong { font-family: var(--display); font-size: 2rem; font-weight: 400; }
.editorial-page .fuel-trip-table tbody tr:nth-child(even),
.editorial-page .fuel-money-section { background: var(--interior-soft); }
.editorial-page .fuel-next-links { border-top-width: 1px; }
.editorial-page .fuel-next-links strong { font-size: 2.1rem; font-weight: 400; color: var(--brand-blue); }
.editorial-page .fuel-no-buy { background: var(--interior-surface); border-color: var(--line); }
.editorial-page .fuel-no-buy h2 { line-height: 1.05; }

/* Tools: calm form controls, honest comparisons and a clear result. */
.tool-page .page-intro { padding-block: 36px; column-gap: 60px; }
.tool-page .page-intro h1 { font-size: clamp(3rem, 4.5vw, 4.8rem); }
.tool-page .shop-intro { background: transparent; padding-block: 36px; }
.tool-page .shop-intro h1 { font-size: clamp(3.4rem, 5.3vw, 5.6rem); line-height: 1.03; }
.tool-page .shop-dateline { font-size: .79rem; }
.tool-page .shop-body { padding-top: 29px; }
.tool-page .catalog-filters { gap: 19px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.tool-page .catalog-filters > label { font-size: .75rem; }
.tool-page :is(.catalog-filters select,.catalog-filters input[type=search],.input-wrap input,.field select) {
  background: var(--warm-white);
  border: 1px solid #929b9e;
  border-radius: 5px;
  color: var(--ink);
  min-width: 0;
  max-width: 100%;
  min-height: 51px;
  font-size: 1rem;
}
.tool-page .input-wrap > span { color: var(--muted); }
.tool-page .check-control input { accent-color: var(--brand-blue); }
.tool-page .catalog-count-row { font-size: .83rem; margin-top: 22px; }
.tool-page .catalog-context { font-size: .83rem; margin-bottom: 31px; }
:is(.editorial-page,.tool-page) .buy-grid { gap: 32px; }
:is(.editorial-page,.tool-page) .buy-card { border: 1px solid var(--line); background: var(--warm-white); }
:is(.editorial-page,.tool-page) .buy-image { background: #f3f0e9; border-bottom: 1px solid #dedbd3; }
:is(.editorial-page,.tool-page) .buy-image > span { background: var(--warm-white); border: 0; font-size: .66rem; color: var(--brand-blue); }
:is(.editorial-page,.tool-page) .buy-copy { padding: 25px; }
:is(.editorial-page,.tool-page) .buy-copy h3 { font-size: 2rem; line-height: 1.12; }
:is(.editorial-page,.tool-page) .buy-role { color: var(--muted); font-size: .65rem; line-height: 1.6; }
:is(.editorial-page,.tool-page) .buy-config { font-size: .77rem; }
:is(.editorial-page,.tool-page) .buy-price strong { font: 400 2.15rem/1 var(--display); color: var(--brand-blue); }
:is(.editorial-page,.tool-page) .buy-price > span { font-size: .76rem; }
:is(.editorial-page,.tool-page) .buy-facts dt { font-size: .69rem; }
:is(.editorial-page,.tool-page) .buy-facts dd { font-size: .86rem; font-weight: 600; }
:is(.editorial-page,.tool-page) .buy-verdict,
:is(.editorial-page,.tool-page) .buy-tradeoff { color: var(--ink); font-size: .92rem; line-height: 1.75; }
:is(.editorial-page,.tool-page) .buy-verdict b,
:is(.editorial-page,.tool-page) .buy-tradeoff b { color: var(--brand-blue); font-size: .69rem; letter-spacing: .045em; }
:is(.editorial-page,.tool-page) .buy-details dd { color: var(--ink); font-size: .87rem; }
:is(.editorial-page,.tool-page) .cert-tag { background: #e8eee9; color: #3e5949; border-color: #718772; font-size: .76rem; }
:is(.editorial-page,.tool-page) .cert-unknown { background: #f4ecdc; color: #765831; border-color: #a38455; }
:is(.editorial-page,.tool-page) .buy-actions .button { padding-inline: 18px; font-size: .8rem; }
:is(.editorial-page,.tool-page) .buy-actions > .text-link,
:is(.editorial-page,.tool-page) .buy-math { font-size: .78rem; }
:is(.editorial-page,.tool-page) .compare-toggle { color: var(--brand-blue); border-color: #8499a7; border-radius: 999px; font-size: .79rem; }
:is(.editorial-page,.tool-page) .compare-toggle[aria-pressed=true] { background: var(--interior-blue-soft); border-color: var(--brand-blue); }
:is(.editorial-page,.tool-page) .catalog-empty { background: var(--warm-white); }
.tool-page .compare-tray { background: var(--brand-blue); color: var(--warm-white); border-top: 1px solid #7c9aaf; box-shadow: 0 -4px 18px #193b5512; }
.tool-page .selected-models button { border-color: #95adbd; border-radius: 4px; color: var(--warm-white); }
.tool-page .compare-tray .button { background: var(--warm-white); color: var(--brand-blue); border-color: var(--warm-white); }
.tool-page .compare-tray #selection-message { color: var(--warm-white); }
.tool-page .compare-tray :is(button,a):focus-visible,
.tool-page .compare-table-wrap thead :is(button,a):focus-visible { outline-color: var(--warm-white); }
.tool-page .side-heading h2 { font-size: 3.3rem; }
.tool-page .compare-table-wrap thead th > small { color: #dce7ed; }
.tool-page .compare-table-wrap thead th > strong { font-weight: 400; }
.tool-page .compare-table-wrap thead img { background: var(--warm-white); }
.tool-page .compare-table-wrap thead .button { background: var(--warm-white); color: var(--brand-blue); border-color: var(--warm-white); }
.tool-page .table-remove { color: var(--warm-white); }
.tool-page .compare-method-grid h3 { font: 400 1.9rem/1.2 var(--display); }
.tool-page .compare-method-grid p { font-size: .94rem; line-height: 1.8; }
.tool-page :is(.calculator,.finder-layout) { gap: 55px; }
.tool-page .form-heading h2 { font-size: 2.7rem; }
.tool-page .fields { gap: 23px 20px; }
.tool-page .field { font-size: .78rem; font-weight: 600; }
.tool-page .calc-result {
  background: var(--brand-blue);
  color: var(--warm-white);
  border-radius: 0 50px 0 0;
  padding: 34px;
}
.tool-page .calc-result :is(.eyebrow,.annual-result strong) { color: var(--warm-white); }
.tool-page .calc-result :is(.result-period,.big-result small,.annual-result span),
.tool-page .calc-result > p { color: #e0e8ed; }
.tool-page .big-result { flex-wrap: wrap; gap: 6px 15px; }
.tool-page .big-result > span { font-weight: 400; font-size: clamp(4.8rem, 6.2vw, 6.7rem); letter-spacing: -.06em; overflow-wrap: anywhere; }
.tool-page .annual-result strong { font: 400 2rem/1.1 var(--display); }
.tool-page .annual-result { flex-wrap: wrap; border-color: #7896ac; }
.tool-page .bar-track { background: #7594a9; border-radius: 999px; }
.tool-page .bar-track span { background: #cfdfeb; border-radius: 999px; }
.tool-page .bar-track:last-child span { background: var(--warm-white); }
.tool-page :is(.result-details div,.cost-breakdown) { border-color: #7896ac; }
.tool-page .calc-result .button { background: var(--warm-white); color: var(--brand-blue); }
.tool-page .calc-result :is(button,a,summary):focus-visible { outline-color: var(--warm-white); }
.tool-page .methodology { padding-top: 35px; }
.tool-page .method-grid h3 { font: 400 1.75rem/1.2 var(--display); }
.tool-page .method-grid p { font-size: .88rem; line-height: 1.8; }
.tool-page .gas-sensitivity { border-top-width: 1px; }
.tool-page .sensitivity-options { background: var(--line); border-color: var(--line); }
.tool-page .sensitivity-options > div { background: var(--warm-white); }
.tool-page .sensitivity-options > div:nth-child(2) { background: var(--interior-blue-soft); }
.tool-page .sensitivity-options strong { font: 400 1.75rem/1.15 var(--display); color: var(--brand-blue); }
.tool-page .preset-note { background: var(--warm-white); border-color: var(--brand-blue); border-left-width: 2px; }
.tool-page .finder-results {
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: 0 50px 0 0;
  padding: 33px;
  top: 112px;
}
.tool-page .finder-results h2 { font-size: 3.6rem; line-height: 1.05; }
.tool-page .finder-results .fit-label { color: var(--brand-blue); font-size: .64rem; }
.tool-page .finder-results .fit-check { background: #eee9df; border: 0; padding: 20px; }
.tool-page .finder-results .choice-note { border-left: 2px solid var(--brand-blue); }
.tool-page .match-model { background: transparent; border: 0; border-block: 1px solid var(--line); padding: 24px 0; }
.tool-page .match-model h3 { font-size: 1.85rem; }
.tool-page .fit-alternatives { border-color: var(--line); }

/* Service pages and the commute kit use the same clear, unhurried typography. */
.editorial-page .prose { max-width: 1040px; }
.editorial-page .prose h2 { font-size: 2.6rem; }
.editorial-page .prose p { font-family: var(--display); font-size: 1.25rem; line-height: 1.75; }
.editorial-page .prose li { line-height: 1.8; }
.editorial-page .prose .small-note { font: 400 .8rem/1.8 var(--body); }
.editorial-page .photo-credit-entry > img { background: var(--interior-soft); border-radius: 2px; }
.editorial-page .photo-credit-entry figcaption { font-size: .79rem; line-height: 1.8; }
.editorial-page .kit-grid { gap: 35px; }
.editorial-page .kit-grid article > span { font: italic 400 3.3rem/1 var(--display); color: var(--brand-blue); }
.editorial-page .kit-grid h2 { font-size: 2.45rem; line-height: 1.12; }
.editorial-page .kit-grid p { font-size: .95rem; line-height: 1.8; }
:is(.editorial-page,.tool-page) .important { background: var(--warm-white); border: 1px solid var(--line); padding: 30px; }
:is(.editorial-page,.tool-page) .important h3 { font-size: 2rem; }
:is(.editorial-page,.tool-page) .sealant-note,
:is(.editorial-page,.tool-page) .sealant-feature { background: var(--brand-blue); color: var(--warm-white); }
:is(.editorial-page,.tool-page) .sealant-note { border-left: 0; border-radius: 0 48px 0 0; }
:is(.editorial-page,.tool-page) :is(.sealant-note,.sealant-feature) :is(h2,h3,.eyebrow,.text-link) { color: var(--warm-white); }
:is(.editorial-page,.tool-page) :is(.sealant-note,.sealant-feature) p { color: #e0e8ed; }
:is(.editorial-page,.tool-page) :is(.sealant-note,.sealant-feature) a:focus-visible { outline-color: var(--warm-white); }
:is(.editorial-page,.tool-page) .sealant-note h3 { font-size: 2.7rem; line-height: 1.05; }
:is(.editorial-page,.tool-page) .sealant-feature h2 { font-size: clamp(3rem, 4.5vw, 4.5rem); line-height: 1.04; }
.editorial-page .formula-list > a { border-color: #7695ab; }
.editorial-page .formula-list h3 { font-size: 2rem; }
.editorial-page .formula-list p { color: #e0e8ed; }
.editorial-page .formula-color { border-radius: 999px; width: 6px; }
.editorial-page .checklist input { accent-color: var(--brand-blue); }
.editorial-page .checklist input:checked + span { color: var(--muted); }

@media (min-width:1600px) {
  .editorial-page .story-opening,
  .editorial-page .compact-story .story-opening,
  .editorial-page .local-story .story-opening { padding-inline: 65px; }
}
@media (max-width:1100px) {
  .editorial-page .story-opening,
  .editorial-page .compact-story .story-opening { gap: 35px; }
  .editorial-page .reading-page .article-layout { grid-template-columns: 175px minmax(0,1fr); gap: 38px; }
  .editorial-page .story-title h1,
  .editorial-page .compact-story .story-title h1 { font-size: clamp(2.8rem, 5vw, 4rem); }
  .editorial-page .ride-hero { gap: 35px; }
  .editorial-page .ride-editorial { gap: 40px; }
  .tool-page :is(.calculator,.finder-layout) { gap: 30px; }
  .tool-page .calc-result,
  .tool-page .finder-results { padding: 27px; }
  :is(.editorial-page,.tool-page) .buy-grid { gap: 24px; }
}
@media (max-width:900px) {
  .tool-page :is(.calculator,.finder-layout) { grid-template-columns: 1fr; }
  .tool-page .finder-results { position: static; }
  .tool-page .calc-result { max-width: none; }
}
@media (max-width:720px) {
  :is(.editorial-page,.tool-page) .breadcrumbs { padding-top: 18px; font-size: .69rem; }
  :is(.editorial-page,.tool-page) .page-intro { padding-block: 30px 34px; }
  :is(.editorial-page,.tool-page) .page-intro h1 { font-size: clamp(2.9rem, 10vw, 4.2rem); }
  :is(.editorial-page,.tool-page) .page-intro .lede { font-size: .98rem; line-height: 1.8; }
  :is(.editorial-page,.tool-page) main .section,
  :is(.editorial-page,.tool-page) main .mag-section { padding-block: 44px; }
  :is(.editorial-page,.tool-page) main .section.compact { padding-top: 29px; }
  :is(.editorial-page,.tool-page) main .department-heading h2 { font-size: 2.8rem; }
  .editorial-page .story-opening,
  .editorial-page .compact-story .story-opening,
  .editorial-page .local-story .story-opening {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 29px;
    margin: 0;
    padding: 30px 5% 39px;
  }
  .editorial-page .story-title h1,
  .editorial-page .compact-story .story-title h1 { font-size: clamp(2.8rem, 9.3vw, 4rem); }
  .editorial-page .story-title .eyebrow { margin-bottom: 18px; }
  .editorial-page .story-title .lede { font-size: 1rem; line-height: 1.8; margin-block: 19px 22px; }
  .editorial-page .story-lead-image img,
  .editorial-page .compact-story .story-lead-image img { height: auto; aspect-ratio: 1.35; border-radius: 2px 48px 2px 2px; }
  .editorial-page .reading-page .article-layout { display: block; padding: 0 5% 45px; }
  .editorial-page .article-toc { position: static; padding: 0; margin-bottom: 34px; border: 0; }
  .editorial-page .article-toc details { border-bottom: 1px solid var(--line); padding: 18px 0; }
  .editorial-page .article-toc details:not([open]) { padding: 17px 0; }
  .editorial-page .article-toc summary { margin: 0; }
  .editorial-page .article-toc a { font-size: .84rem; padding-block: 8px; }
  .editorial-page .article-body > section { margin-block: 34px; }
  .editorial-page .article-body > section > h2 { font-size: 2.2rem; }
  .editorial-page .article-body > section > p,
  .editorial-page .article-body :is(ul,ol) { font-size: 1.22rem; line-height: 1.7; }
  .editorial-page .article-body .guide-takeaway { margin-bottom: 34px; padding-block: 22px; }
  .editorial-page .story-next { padding: 26px 23px; border-radius: 0 35px 0 0; }
  .editorial-page .story-next h2 { font-size: 2.35rem; }
  .editorial-page .story-grid { gap: 35px; }
  .editorial-page .story-copy h2 { font-size: 2.25rem; }
  .editorial-page .magazine-categories { gap: 38px; }
  .editorial-page .category-tile > img { height: auto; aspect-ratio: 1.35; }
  .editorial-page .ride-hero { gap: 26px; }
  .editorial-page .ride-hero figure img,
  .editorial-page .ride-hero.euc figure img,
  .editorial-page .ride-hero.skate figure img { height: auto; aspect-ratio: 1.35; border-radius: 2px 48px 2px 2px; }
  .editorial-page .ride-hero h1 { font-size: clamp(3.3rem, 12vw, 4.5rem); }
  .editorial-page .ride-jumps { gap: 13px 23px; }
  .editorial-page .ride-facts { gap: 24px; }
  .editorial-page .ride-facts dd { font-size: .88rem; }
  .editorial-page .ride-editorial h2 { font-size: 3rem; }
  .editorial-page .benefit { gap: 18px; }
  .editorial-page .benefit h3 { font-size: 1.85rem; }
  .editorial-page .tradeoff-panel { padding: 25px; }
  .editorial-page .discovery-spread h2 { font-size: 3rem; }
  .editorial-page .situation-shortcuts a { min-height: 0; padding-block: 20px; }
  .editorial-page .law-opening { padding-block: 32px; }
  .editorial-page .law-opening h1 { font-size: clamp(3.2rem, 11vw, 4.5rem); }
  .editorial-page .law-opening-copy > p { font-size: 1.2rem; }
  .editorial-page .law-status-card { padding-block: 23px 14px; }
  .editorial-page .law-status-card h3 { font-size: 2.25rem; }
  .editorial-page .law-questions h3 { font-size: 2.15rem; }
  .editorial-page .fuel-hub-opening h1 { font-size: clamp(3.3rem, 11vw, 4.7rem); }
  .editorial-page .fuel-hub-lede > p { font-size: 1.22rem; }
  .editorial-page :is(.fuel-check-intro,.fuel-hub-section) h2 { font-size: 3rem; }
  .editorial-page .fuel-check-result { padding: 25px; border-radius: 0 35px 0 0; }
  .editorial-page .fuel-monthly output { font-size: 4.7rem; }
  .editorial-page .fuel-yearly strong { font-size: 1.85rem; }
  .tool-page .page-intro h1 { font-size: 3.2rem; }
  .tool-page .shop-intro h1 { font-size: clamp(3.1rem, 11vw, 4.5rem); }
  .tool-page .shop-body { padding-top: 24px; }
  .tool-page .catalog-filters { gap: 16px; }
  .tool-page .catalog-filters > label { font-size: .72rem; }
  :is(.editorial-page,.tool-page) .buy-grid { gap: 27px; }
  :is(.editorial-page,.tool-page) .buy-copy { padding: 24px; }
  .tool-page .fields { gap: 22px 16px; }
  .tool-page .form-heading h2 { font-size: 2.5rem; }
  .tool-page .calc-result,
  .tool-page .finder-results { padding: 27px 24px; border-radius: 0 40px 0 0; }
  .tool-page .big-result > span { font-size: 5.6rem; }
  .tool-page .finder-results h2 { font-size: 3.2rem; }
  .tool-page .sensitivity-options strong { font-size: 1.6rem; }
  .tool-page .compare-tray .button { font-size: .76rem; padding: 11px 16px; }
  .editorial-page .prose p { font-size: 1.2rem; }
  .editorial-page .prose h2 { font-size: 2.35rem; }
  :is(.editorial-page,.tool-page) .sealant-note { padding: 28px 24px; border-radius: 0 40px 0 0; }
}
@media (max-width:380px) {
  .editorial-page .guide-search { grid-template-columns: 1fr; }
  .editorial-page .guide-search > label:first-child { grid-column: auto; }
  .tool-page .fields { grid-template-columns: 1fr; }
  .editorial-page .fuel-check-result { padding: 23px; }
  .editorial-page .fuel-yearly { border-top-color: #7695ab; }
  .tool-page .big-result > span { font-size: 4.8rem; }
  .tool-page .finder-results h2 { font-size: 2.9rem; }
  .editorial-page .story-title h1,
  .editorial-page .compact-story .story-title h1 { font-size: 2.75rem; }
}