/* type-r11 (2026-10-31). Type scale, rhythm and small-text pass for niagaraseo.com.
   Load AFTER cartographer.css, site-r10.css (and gbp-lander-1.css where present).
   CSS is cached as immutable: ship any edit under a new filename (type-r12.css, ...).
   No colours, fonts or layout concepts change. The map SVG's internal text sizes are untouched.
   Every rule names the issue it fixes (numbers match review-visual2.md). Widths not named in a
   rule's media query render exactly as before. */

/* ---------- 2. Small text: floor of 12px for tracked caps, 13-14px for running text ---------- */

/* Header tagline "FORT ERIE, ONTARIO": 11px -> 12px (all widths). */
.site-header .brand small { font-size: 0.75rem; }

/* Hero kicker "FIXED-PRICE LOCAL SEO.": 12px -> 13px, tracking eased so the line length is about the same. */
[data-vertical="cartographer"] .kicker { font-size: 0.8125rem; letter-spacing: 0.14em; }

/* Dark tier label (GOOD / BETTER / BEST) in the ledger: 12px -> 13px. */
[data-vertical="cartographer"] .ledger .price-callout .tier-label { font-size: 0.8125rem; }

/* Illustration tag and figure captions: 12.8px / 13px -> 13px / 14px. */
.illustration-tag { font-size: 0.8125rem; }
[data-vertical="cartographer"] .carto-fig figcaption { font-size: 0.875rem; }

/* Table header cells: 13.6px -> 14px. */
[data-vertical="cartographer"] .table-wrap thead th { font-size: 0.875rem; }

/* Hero map caption once it drops under the map (phone and tablet): 11-12px -> 13px. */
@media (max-width: 860px) {
  .hero-map-cap { font-size: 0.8125rem; line-height: 1.4; }
}

/* ---------- 1 + 7. Hero H1: one scale for plain pages, and room for Cormorant's descenders ---------- */

/* Plain-page H1 (guides, pricing, contact, about, areas): the 5.5rem ceiling set 80-character titles in 4 to 5 lines.
   One smooth scale: 36px phone, about 44px at 768, 52px at 1024, 67px at 1440. Map heroes and the offer hero keep theirs. */
[data-vertical="cartographer"] .hero:not(.has-map):not(.offer-hero) h1 {
  font-size: clamp(2.25rem, 1.1rem + 3.4vw, 4.5rem);
}

/* H1 leading 0.98 let a descender (g, p, y) touch the ascender on the next line (home "Niagara SEO:" / "local SEO for"). */
[data-vertical="cartographer"] .hero:not(.offer-hero) h1 { line-height: 1.05; }

/* Plain heroes at 768px and up: 130px of empty air under the dek (hero padding-bottom plus dek margin). Tighten. */
@media (min-width: 48rem) {
  [data-vertical="cartographer"] .hero:not(.has-map):not(.offer-hero) {
    padding-top: clamp(32px, 5vw, 72px);
    padding-bottom: clamp(40px, 5vw, 64px);
  }
  [data-vertical="cartographer"] .hero:not(.has-map):not(.offer-hero) .dek:last-child { margin-bottom: 0; }
}

/* ---------- 3. H2: one smooth scale, heavier presence in the rail ---------- */

/* Rail headings were 33px at 768, 27px at 1024, 30px at 1440 against 18px body: non-monotonic, and Cormorant's low x-height
   made them read like 22px Inter. Now 28px at 960, 30px at 1024, 36px at 1440. */
@media (min-width: 60rem) {
  html:root[data-vertical="cartographer"] :where(main, main > article, main > .offer-lander) > h2,
  [data-vertical="cartographer"] .at-a-glance > h2,
  [data-vertical="cartographer"] .at-a-glance--trust > h2,
  [data-vertical="cartographer"] .ledger > h2 {
    font-size: clamp(1.75rem, 0.95rem + 1.44vw, 2.25rem);
    overflow-wrap: break-word;
  }
}

/* ---------- 5. Phone and tablet: section rhythm ---------- */

@media (max-width: 59.99rem) {
  /* Gap above a section heading was 82px (64px margin + paragraph margin) plus a 25px ornament. 48px margin gives about 66px. */
  html:root[data-vertical="cartographer"] :where(main, main > article) > h2 { margin-top: 48px; text-wrap: balance; }
  /* "Three ways to do / this" widow in the dark tier band at 768. */
  [data-vertical="cartographer"] .ledger > h2 { text-wrap: balance; }
}

/* ---------- 4. Tablet (48rem-59.99rem): dark tier band uses the same label/price + list split as desktop ---------- */

/* Tier lists ran the full 720px (80+ characters per line) under a stacked label and price. Two columns brings the list to about 50 characters. */
@media (min-width: 48rem) and (max-width: 59.99rem) {
  [data-vertical="cartographer"] .ledger .price-callout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "label list" "price list";
    grid-template-rows: auto 1fr;
    column-gap: 32px;
    align-content: start;
  }
  [data-vertical="cartographer"] .ledger .price-callout .tier-price { font-size: 3rem; line-height: 0.95; align-self: start; }
}

/* ---------- 6. Phone: side padding and card padding ---------- */

/* 16px gutter put the hero text 16px off the glass. 20px; the map width formula uses the same variable and shrinks by 8px. */
@media (max-width: 480px) {
  :root[data-vertical="cartographer"] { --gutter: 20px; }
}

/* Tier cards: 33px inside padding left 260px of text (28 characters) in a 343px card. 20px gives about 36 characters. */
@media (max-width: 600px) {
  [data-vertical="cartographer"] main > .price-callout { padding: 1.5rem 1.25rem 1.75rem; }
  /* Navy callout box (.own-band): 32px/36px inner padding is the same problem at 343px. */
  .own-band { padding: 1.5rem 1.25rem; }
}

/* ---------- 8. FAQ questions: below the H2 in the hierarchy ---------- */

/* 22px bold Inter was louder than the 30px light rail heading beside it. 19-21px at weight 600, one margin at every width. */
[data-vertical="cartographer"] .faq .faq-q {
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 28px;
}
[data-vertical="cartographer"] .faq > .faq-q:first-child { margin-top: 0; }

/* ---------- 9. Phone header: 121px -> about 111px ---------- */

/* The header is static (not sticky), so it only costs the first screen. Trim the padding; nav targets stay 37px tall (24px minimum met).
   Skipped at 360px and under, where site-r10.css already sets its own padding. */
@media (min-width: 22.5625rem) and (max-width: 480px) {
  [data-vertical="cartographer"] header.site-header .wrap { padding-top: 12px; padding-bottom: 2px; }
}

/* ---------- 10. Facts table ---------- */

/* "Price range" wrapped to two lines at 375 and 768 because the label column was 98px. */
@media (max-width: 59.99rem) {
  [data-vertical="cartographer"] .at-a-glance:not(.at-a-glance--trust) th[scope="row"] { white-space: nowrap; width: 8.5rem; }
  /* Facts table cells: 15.2px -> 16px (two columns, there is room). */
  [data-vertical="cartographer"] .at-a-glance .table-wrap table { font-size: 1rem; }
}

/* ---------- 11. Radio and checkbox rows: hit area ---------- */

/* Inputs are 24px (WCAG 2.2 AA met); the row is 29px tall. Pad the label so a thumb has about 48px. Input margin keeps it on the first text line. */
@media (max-width: 860px) {
  .ld-opt { margin-bottom: 0; }
  .ld-opt label { padding-block: 10px; }
  .ld-opt input[type=radio], .ld-opt input[type=checkbox] { margin-top: 12px; }
}

/* ---------- 12. Numbered lists (checks, steps in prose) ---------- */

/* Items ran together at 375 with no space, and the 40px indent cost 12% of the line. */
[data-vertical="cartographer"] :where(main, main > article) > ol:not(.steps) > li { margin-bottom: 0.6em; }
@media (max-width: 600px) {
  [data-vertical="cartographer"] :where(main, main > article) > ol:not(.steps) { padding-inline-start: 1.5rem; }
}

/* ---------- 13. Boxed callout: doubled bottom space ---------- */

/* Box padding-bottom 2.25rem plus the last paragraph's own 0.5rem margin read as dead space under the text. */
.own-band > :last-child { margin-bottom: 0; }

/* ---------- 14. Closing band ---------- */

/* 96px band margin plus the last paragraph margin gave 128px before the closing band; 72px keeps it a deliberate break. */
[data-vertical="cartographer"] .cta-band { margin-top: clamp(48px, 6vw, 72px); }

/* ---------- 15. Footer links on phones ---------- */

/* Run-on link line at 24px leading made links touch vertically. 1.9 leading is about 28px, still compact. */
@media (max-width: 600px) {
  [data-vertical="cartographer"] footer.site-footer .wrap { line-height: 1.9; }
}