/* ============================================================
   ghp-article.css — the approved article / guide template (2026-10-26).
   One continuous 760px column, a 200px contents rail, a white sheet with
   two LEFT corners curved at 136px (header field shows through at the top,
   footer ink at the bottom), one lead image plate on the curve line, one
   mid-article agent card. Two themes (skywash / slate, 2026-10-30) live as
   custom properties on the page root; this file carries only what inline
   styles cannot: slot states, hover, the footer stripe under the curve and
   the ≤1100 / ≤860 layout. Linked by every Article, state, county and city
   page after ghp-formline.css.
   ============================================================ */
[data-ghp-article] [data-r="image-plate"] image-slot { opacity: 0; }
[data-ghp-article] [data-r="image-plate"] image-slot[data-filled] { opacity: 1; }
/* Keep reading rows (2026-10-30, user directive): each row leads with the target page's own lead photo at its native 2:1 (no extra crop),
   summary clamped to 2 lines. Hover (pointer devices only): the thumbnail lifts 2px with a soft shadow and brightens, the title deepens to
   navy-900 and the arrow slides 4px and turns orange — 320ms ease-out, no zoom. */
[data-ghp-article] [data-r="read-thumb"] { transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
[data-ghp-article] [data-r="read-thumb"] img { transition: filter 320ms var(--ease-out); }
[data-ghp-article] [data-r="read-title"] { transition: color 320ms var(--ease-out); }
[data-ghp-article] [data-r="read-sum"] { transition: color 320ms var(--ease-out); }
/* Unified hover (2026-10-30): the thumbnail AND the title + summary column rise 2px together on the same 320ms curve. */
[data-ghp-article] [data-r="read-row"] > span:nth-child(2) { transition: transform 320ms var(--ease-out); }
[data-ghp-article] [data-r="read-arrow"] { display: inline-block; transition: transform 320ms var(--ease-out), color 320ms var(--ease-out); }
[data-ghp-article] [data-r="read-sum"] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (hover: hover) {
  [data-ghp-article] [data-r="read-row"]:hover [data-r="read-thumb"] { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  [data-ghp-article] [data-r="read-row"]:hover [data-r="read-thumb"] img { filter: brightness(1.05) saturate(1.04); }
  [data-ghp-article] [data-r="read-row"]:hover [data-r="read-title"] { color: var(--navy-900) !important; }
  [data-ghp-article] [data-r="read-row"]:hover [data-r="read-sum"] { color: var(--ink-800) !important; }
  [data-ghp-article] [data-r="read-row"]:hover > span:nth-child(2) { transform: translateY(-2px); }
  [data-ghp-article] [data-r="read-row"]:hover [data-r="read-arrow"] { transform: translate(4px, -2px); color: var(--orange-500) !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-ghp-article] [data-r="read-row"]:hover [data-r="read-thumb"], [data-ghp-article] [data-r="read-row"]:hover > span:nth-child(2), [data-ghp-article] [data-r="read-row"]:hover [data-r="read-arrow"] { transform: none; }
}
/* No rule under the "Keep reading" heading and none under the last row (2026-10-30, user directive) — hairlines only BETWEEN rows. */
/* Article list markers (2026-10-30, user directive): bullets + 1,2,3 numbers are navy-800, matching the heading ink, on both themes. */
[data-ghp-article] [data-r="tpl-article"] span:is([style*="background:var(--t-num)"], [style*="background: var(--t-num)"]) { background: var(--navy-800) !important; }
[data-ghp-article] [data-r="tpl-article"] span:is([style*="color:var(--t-num)"], [style*="color: var(--t-num)"]) { color: var(--navy-800) !important; }
[data-ghp-article] [data-screen-label="Keep reading"] > a[data-r="read-row"]:first-of-type { border-top: 0 !important; }
[data-ghp-article] [data-screen-label="Keep reading"] > a[data-r="read-row"]:last-of-type { border-bottom: 0 !important; }
[data-ghp-article] [data-r="read-row"]:focus-visible { outline: none; }
[data-ghp-article] [data-r="read-row"]:focus-visible [data-r="read-thumb"] { box-shadow: var(--shadow-focus); }
/* ZIP CTA "See plans" (2026-10-30): navy-800, azure-600 on hover (scoped override of the DS accent palette). */
[data-ghp-article] [data-r="zip-cta-field"] { --color-accent: var(--navy-800); --color-accent-hover: var(--azure-600, #0078C8); --color-accent-active: var(--azure-800, #005FA3); }
[data-ghp-article] ul[role="list"] > li::before, [data-ghp-article] ol[role="list"] > li::before { content: none !important; }
/* The sheet curves straight into the footer ink: the footer's top tri-stripe is suppressed on these pages (its bottom stripe stays). */
[data-ghp-article] footer[data-screen-label="Footer"] > div[aria-hidden="true"]:first-child { display: none !important; }
/* Compare buttons take the page colour (scoped override of the DS primary palette). */
[data-ghp-article] [data-r="tpl-btn"] { --color-primary: var(--t-btn); --color-primary-hover: var(--t-btn-hover); --color-primary-active: var(--t-btn-active); --ring: var(--orange-300); }
/* "See My Rates" (2026-10-30): home-hero orange, one step up from the DS md size (16 → 17px). */
[data-ghp-article] [data-r="tpl-btn"] button { font-size: 1.125rem !important; border-radius: var(--radius-pill) !important; }
/* Hover lift (2026-10-30): 2px rise + a soft orange shadow; press settles back; reduced-motion keeps the shadow only. */
[data-ghp-article] [data-r="tpl-btn"] button { transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out) !important; }
@media (hover: hover) {
  [data-ghp-article] [data-r="tpl-btn"] button:hover:not(:focus-visible) { transform: translateY(-2px) !important; box-shadow: 0 6px 16px -6px rgba(226, 84, 0, 0.45), 0 2px 4px -2px rgba(226, 84, 0, 0.2) !important; }
  [data-ghp-article] [data-r="tpl-btn"] button:hover:active { transform: translateY(0) !important; box-shadow: 0 2px 6px -3px rgba(226, 84, 0, 0.35) !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-ghp-article] [data-r="tpl-btn"] button:hover { transform: none !important; }
}

@media (max-width: 1100px) {
  [data-ghp-article] [data-r="tpl-head"], [data-ghp-article] [data-r="tpl-grid"] { width: auto !important; grid-template-columns: minmax(0, 1fr) !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
  [data-ghp-article] [data-r="toc"] { position: static !important; grid-column: 1 !important; grid-row: 3 !important; padding-top: 44px !important; max-width: 560px; }
  [data-ghp-article] [data-r="tpl-article"] { grid-row: 4 !important; padding-top: 40px !important; }
}

@media (max-width: 860px) {
  html, body { overflow-x: clip; }
  /* 2026-10-30 (user directive): dek → sheet gap 92px → 36px. hero bottom pad = its 36px top pad, and the legacy 48px Article-section top pad from ghp-formline.css (meant for pre-template pages) is cancelled here. */
  [data-ghp-article] [data-r="hero-inner"] { padding-top: 36px !important; padding-bottom: 36px !important; }
  [data-ghp-article] [data-r="tpl-stage"] { padding-top: 0 !important; }
  [data-ghp-article] [data-r="hero-inner"] h1 { font-size: var(--h1-size) !important; }
  [data-ghp-article] [data-r="hero-dek"] { font-size: var(--text-lg) !important; line-height: 1.55 !important; }
  [data-ghp-article] [data-r="sheet"] { border-radius: 72px 0 0 72px !important; padding-bottom: 72px !important; }
  [data-ghp-article] [data-r="tpl-stage"] { background: linear-gradient(to bottom, var(--t-field) 0, var(--t-field) 120px, var(--ink-800) 120px, var(--ink-800) 100%) !important; }
  [data-ghp-article] [data-r="tpl-grid"] { padding-top: 32px !important; }
  /* phones: two-line lockup beside a 44px headshot — name on line 1, "Published … · N min read" on line 2; the first separator hides so no line ever starts with "·" */
  /* byline inset 20px (headshot at 40px, clear of the 72px sheet curve and in line with the lead plate's 40px corner) */
  [data-ghp-article] [data-r="lead-byline"] { padding-left: 20px !important; font-size: clamp(0.8125rem, 3.65vw, 0.9375rem) !important; gap: 0 !important; margin-bottom: 24px !important; display: grid !important; grid-template-columns: 48px max-content max-content minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; min-height: 48px; }
  [data-ghp-article] [data-r="lead-byline"] img { width: 48px !important; height: 48px !important; grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  [data-ghp-article] [data-r="lead-byline"] > span:nth-of-type(1) { grid-column: 2 / -1; grid-row: 1; margin-left: 12px; align-self: end; line-height: 1.35; font-size: 1.0625rem; }
  [data-ghp-article] [data-r="lead-byline"] > span:nth-of-type(2) { display: none; }
  [data-ghp-article] [data-r="lead-byline"] > span:nth-of-type(3) { grid-column: 2; grid-row: 2; margin-left: 12px; align-self: start; line-height: 1.35; white-space: nowrap; }
  [data-ghp-article] [data-r="lead-byline"] > span:nth-of-type(4) { grid-column: 3; grid-row: 2; margin: 0 5px; align-self: start; line-height: 1.35; }
  [data-ghp-article] [data-r="lead-byline"] > span:nth-of-type(5) { grid-column: 4; grid-row: 2; align-self: start; line-height: 1.35; white-space: nowrap; }
  [data-ghp-article] [data-r="image-plate"][data-lead] { border-radius: 40px var(--radius-lg) var(--radius-lg) var(--radius-lg) !important; }
  [data-ghp-article] [data-r="toc"] { padding-top: 36px !important; }
  [data-ghp-article] [data-r="tpl-article"] { padding-top: 32px !important; }
  [data-ghp-article] [data-r="tpl-article"] p, [data-ghp-article] [data-r="tpl-article"] li { font-size: 1.0625rem !important; }
  [data-ghp-article] [data-r="cta-mid"] { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; padding: 22px 22px 24px !important; }
  [data-ghp-article] [data-r="cta-mid"] > div:first-child > div, [data-ghp-article] [data-r="cta-mid"] > div:first-child > p { color: var(--navy-800) !important; }
  [data-ghp-article] [data-r="cta-mid"] > div:last-child { align-items: stretch !important; }
  [data-ghp-article] [data-r="cta-mid"] > div:last-child a { text-align: center; }
  [data-ghp-article] [data-r="read-row"] { grid-template-columns: 112px minmax(0, 1fr) !important; gap: 16px !important; padding: 16px 0 !important; }
  [data-ghp-article] [data-r="read-arrow"] { display: none !important; }
  [data-ghp-article] [data-r="read-thumb"] { border-radius: 10px !important; }
  [data-ghp-article] [data-r="tpl-table"] { overflow-x: auto; }
  [data-ghp-article] [data-r="tpl-table"] table { min-width: 560px; }
  /* Author sign-off on phones (2026-10-30, user directive): headshot left, name + one credential line to its right, no About link. */
  [data-ghp-article] [data-screen-label="Author"] { flex-wrap: nowrap !important; align-items: center !important; gap: 14px !important; }
  [data-ghp-article] [data-screen-label="Author"] > img { width: 52px !important; height: 52px !important; }
  [data-ghp-article] [data-screen-label="Author"] [data-r="author-cred"], [data-ghp-article] [data-screen-label="Author"] [data-r="author-about"] { display: none !important; }
  [data-ghp-article] [data-screen-label="Author"] [data-r="author-cred-m"] { display: block !important; text-wrap: pretty; }
}

/* ---- Inline ZIP CTA (2026-10-29, user-approved mockup "Article ZIP CTA Mockup.dc.html"): DESKTOP ONLY. It replaces the
   "Not sure which plan fits?" card above 860px; at ≤860 the original card shows and the ZIP CTA is hidden (mobile unchanged). ---- */
[data-ghp-article] [data-r="zip-cta"] [data-r="zip-cta-field"] > * { width: 100% !important; max-width: none !important; }
[data-ghp-article] [data-r="zip-cta"] [data-r="zip-cta-field"] form > input { flex: 1 1 0 !important; min-width: 0 !important; }
[data-ghp-article] [data-r="zip-cta"] [data-r="zip-cta-field"] form > button { font-size: 18px !important; font-weight: 700 !important; flex: 0 0 50% !important; width: 50% !important; justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; }
@media (min-width: 861px) {
  [data-ghp-article] [data-r="cta-mid"] { display: none !important; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  [data-ghp-article] [data-r="zip-cta-title"] { white-space: normal !important; text-wrap: balance; }
}
@media (max-width: 860px) {
  [data-ghp-article] [data-r="zip-cta"] { display: none !important; }
}

/* ---- Article themes (2026-10-30, user-approved "Article Color Schemes.dc.html" turn 4): ONLY skywash + slate.
   skywash = --t-glow is a horizontal sky-100 → sky-50 → white wash; the stage behind the sheet's curves repeats the same wash so the
   header and the curve meet seamlessly (desktop 260px band, phones 120px band). slate = flat ink-100 (the inline stage band already uses --t-field).
   Compare plans buttons: azure-600, orange-500 on hover (set per page via --t-btn / --t-btn-hover). ---- */
[data-ghp-article][data-ghp-theme="skywash"] [data-r="tpl-stage"] { background: linear-gradient(to bottom, transparent 0, transparent 260px, var(--ink-800) 260px, var(--ink-800) 100%), var(--t-glow), var(--t-field) !important; }
@media (max-width: 860px) {
  [data-ghp-article][data-ghp-theme="skywash"] [data-r="tpl-stage"] { background: linear-gradient(to bottom, transparent 0, transparent 120px, var(--ink-800) 120px, var(--ink-800) 100%), var(--t-glow), var(--t-field) !important; }
}
/* Editorial hero (tablet + desktop only; phones keep the ≤860 hero above untouched). */
@media (min-width: 861px) {
  /* lead byline one step up (2026-10-30): 15 → 17px, headshot 48 → 52 */
  [data-ghp-article] [data-r="lead-byline"] { font-size: 1.0625rem !important; gap: 14px !important; }
  [data-ghp-article] [data-r="lead-byline"] img { width: 52px !important; height: 52px !important; }
  [data-ghp-article] [data-r="hero-inner"] { padding: 44px 0 40px !important; }
  [data-ghp-article] [data-r="hero-inner"] nav { letter-spacing: 0.01em; }
  [data-ghp-article] [data-r="hero-inner"] h1 { margin: 22px 0 14px !important; line-height: 1.04 !important; }
  [data-ghp-article] [data-r="hero-dek"] { max-width: 56ch !important; font-size: 1.125rem !important; line-height: 1.6 !important; }
  [data-ghp-article] [data-r="tpl-grid"] { padding-top: 48px !important; }
}
/* Desktop: dominant headline — 64px at 1280, 72px from 1440; the hero spans 75% of the content width and lines fill left to right. */
@media (min-width: 1101px) {
  [data-ghp-article] [data-r="hero-inner"] { grid-column: 1 / -1 !important; max-width: 75% !important; padding: 48px 0 40px !important; }
  [data-ghp-article] [data-r="hero-inner"] nav { font-weight: 600; letter-spacing: 0.02em; }
  [data-ghp-article] [data-r="hero-inner"] h1 { font-size: clamp(4rem, 5vw, 4.5rem) !important; font-weight: 700 !important; line-height: 1.02 !important; letter-spacing: -0.032em !important; max-width: none !important; text-wrap: pretty !important; margin: 22px 0 20px !important; }
  [data-ghp-article] [data-r="hero-dek"] { font-size: 1.3125rem !important; line-height: 1.55 !important; color: var(--ink-700) !important; max-width: 58ch !important; }
}

/* Section seams (2026-10-30, user fix): the stage's vertical band gradient used to TILE (background-repeat default), so at fractional
   section heights its dark bottom row wrapped onto the top edge (hairline under the hero) and its light top row wrapped onto the
   bottom edge (hairline above the footer). Never tile it; the image runs 2px past the box so the bottom always ends in ink-800. */
[data-ghp-article][data-ghp-theme] [data-r="tpl-stage"], [data-ghp-article] [data-r="tpl-stage"] { background-repeat: no-repeat !important; background-size: 100% calc(100% + 2px) !important; background-position: 0 0 !important; }

/* Hero share row (2026-10-30, user directive): copy link · LinkedIn · Facebook · X · email, navy (--heading-ink) on both themes, pinned to the
   RIGHT content edge of the hero with its row centred on the dek's LAST line (row height = one dek line, bottom = hero bottom pad).
   861–1100 drops the "Share" label and keeps the dek clear of the row; phones (≤860) hide it so the tuned phone hero is untouched. */
[data-ghp-article] [data-r="tpl-head"] { position: relative; }
[data-ghp-article] [data-r="hero-share"] { position: absolute; right: var(--gutter); bottom: 40px; height: calc(1.125rem * 1.6); }
[data-ghp-article] [data-r="hero-share"] button:focus-visible { outline: 2px solid var(--navy-800); outline-offset: 2px; }
[data-ghp-article] [data-r="hero-share"] button:active { transform: none !important; box-shadow: none !important; }
@media (min-width: 1101px) { [data-ghp-article] [data-r="hero-share"] { height: calc(1.3125rem * 1.55); } }
@media (min-width: 861px) and (max-width: 1100px) {
  [data-ghp-article] [data-r="hero-share-label"] { display: none !important; }
  [data-ghp-article] [data-r="hero-dek"] { max-width: min(56ch, calc(100% - 256px)) !important; }
}
@media (max-width: 860px) { [data-ghp-article] [data-r="hero-share"] { display: none !important; } }
@media (prefers-reduced-motion: reduce) { [data-ghp-article] [data-r="hero-share"] button { transition: none !important; transform: none !important; } }