/* ==========================================================================
   Backlinko-style long-form guide layout + components, scoped to .hgs-guide.
   Uses the site's own colour tokens (gold accent, dark panels, cream) so it
   matches the rest of huntergalloway.com.au. Loaded only on
   /home-guarantee-scheme/.
   ========================================================================== */

.hgs-guide {
  --g-ink: var(--color-text-primary, #262626);
  --g-soft: var(--color-text-muted, #666);
  /* Gold-family TEXT on light surfaces must use accent-ink (7.4:1+). The
     brighter accent-deep (#e99202) is only 2.4:1 on white and fails AA at
     every size — keep it for fills and dark-panel text, never light-bg text. */
  --g-accent: var(--color-accent-ink, #6f4b00);
  --g-accent-fill: var(--color-accent, #fdb948);
  --g-hl: rgba(253, 185, 72, 0.45); /* highlighter */
  --g-rule: var(--color-border-muted, #e0e0e0);
  --g-cream: var(--color-surface-cream, #fff9f0);
  --g-warm: var(--color-surface-warm, #fff8e9);
  --g-info: var(--color-surface-info, #e8f4f8);
  --g-info-ink: var(--color-info-ink, #1f5a75);
  --g-panel: var(--color-panel-dark, #2c2c2c);
  --g-warn-bg: var(--color-status-error-bg, #fdeeee);
  --g-warn-line: var(--color-status-error-border, #e9a2a2);
  --g-warn-ink: var(--color-status-error-text, #8c2525);
  color: var(--g-ink);
}

/* ---- Reading column typography (bigger + airier, Backlinko-scale) ---- */
.hgs-guide .hgs-main {
  font-size: 21px;
  line-height: 1.75;
  max-width: 748px; /* keep the measure tight and readable on wide screens */
}
/* Body paragraphs live inside a dangerouslySetInnerHTML wrapper, so they are
   NOT direct children of .hgs-main. Use a descendant selector so every body
   paragraph gets the full Backlinko-scale size + spacing (box paragraphs have
   their own more-specific rules below and keep their sizes). */
/* `:not(.hgs-embedcalc *)` keeps this off the embedded CSS-module calculator. Module
   selectors are one class (0,1,0) and lose to this rule (0,2,1), which would render the
   card's 12-15px hints and disclaimers at 21px body measure. Excluding costs nothing
   elsewhere: .hgs-embedcalc wraps only that widget. */
.hgs-guide .hgs-main p:not(.hgs-embedcalc *) {
  font-size: 21px;
  line-height: 1.75;
  margin: 22px 0;
}
.hgs-guide .lede p {
  font-size: 23px;
  line-height: 1.6;
  margin: 0 0 20px;
}
/* Skimmable coloured links (Backlinko-style) — same size as body text */
.hgs-guide .hgs-main a:not(.hgs-embedcalc *) {
  color: var(--g-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(111, 75, 0, 0.35);
  text-underline-offset: 2px;
}
.hgs-guide .hgs-main a:hover {
  text-decoration-color: var(--g-accent);
}
/* Full-coverage highlighter that hugs every wrapped line (clone repeats the
   padding/box on each fragment, so multi-line marks read as one clean sweep) */
.hgs-guide mark {
  background: var(--g-hl);
  color: inherit;
  padding: 2px 5px;
  margin: 0 -1px;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Chapter break: hairline rule + gold "Chapter N" kicker, Backlinko-style. */
.hgs-guide .chapno {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g-accent);
  margin: 56px 0 4px;
  padding-top: 30px;
  border-top: 1px solid var(--g-rule);
}
.hgs-guide .chapno::before {
  content: '';
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--g-accent-fill);
}
.hgs-guide h2:not(.hgs-embedcalc *) {
  font-size: clamp(26px, 3.8vw, 34px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 4px 0 10px;
  text-align: left;
  scroll-margin-top: 90px;
  text-wrap: balance;
}
.hgs-guide h3:not(.hgs-embedcalc *) {
  font-size: 21px;
  font-weight: 800;
  margin: 30px 0 4px;
  text-wrap: balance;
}
.hgs-guide .hgs-main p:not(.hgs-embedcalc *) {
  text-wrap: pretty;
}

/* ---- Soft tool cue: a plain one-line invitation right above an interactive
   tool. Reads as prose (body size), just a touch of weight so it clearly
   belongs to the widget below it. Chapter bridges are woven into the prose
   itself, so they need no class. Needs .hgs-main to beat the body-p rule. ---- */
.hgs-guide .hgs-main .hgs-cue {
  margin: 24px 0 0;
  font-weight: 700;
}

/* Keyboard focus: the custom sliders/selects strip native affordances, so
   give every interactive element an explicit high-contrast ring.

   The ring used to be --color-accent-deep (#e99202), which measures 2.45:1 on white —
   below the 3:1 WCAG 1.4.11 requires of a non-text UI indicator, and flatly contradicted
   by this file's own note at the top that #e99202 must not be used against light
   surfaces. It looked deliberate and was almost invisible.

   --color-accent-ink (#6f4b00) is 7.83:1 on white and still reads as brand gold rather
   than a browser default. The white outer ring keeps it visible if a focused control
   ever sits on a dark panel, so one rule covers every surface in the guide. */
.hgs-guide input[type='range']:focus-visible,
.hgs-guide select:focus-visible,
.hgs-guide summary:focus-visible,
.hgs-guide a:focus-visible,
.hgs-guide button:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #291742);
  outline-offset: var(--focus-ring-offset, 2px);
  border-radius: 4px;
  box-shadow: 0 0 0 5px var(--color-surface-base, #ffffff);
}

/* Scoped to the whole document, not `.hgs-guide *`. The eligibility popup and the FAQ
   accordion render as SIBLINGS of .hgs-guide, so the old descendant selector missed
   eight transitions — the modal fade/slide, its inputs, the submit button and the
   accordion's grid-template-rows animation. A reduced-motion preference that stops at
   the article boundary is not a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---- What you'll learn (collapsible jump links) ---- */
.hgs-learn {
  background: var(--g-cream);
  border: 1px solid var(--color-border-warm, #e8dfc8);
  border-radius: var(--radius-2xl, 18px);
  padding: 8px 26px;
  margin: 26px 0 8px;
}
.hgs-learn > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-soft);
}
.hgs-learn > summary::-webkit-details-marker {
  display: none;
}
.hgs-learn > summary::after {
  content: '⌄';
  font-size: 22px;
  line-height: 1;
  color: var(--g-accent);
  transition: transform 0.2s ease;
}
.hgs-learn[open] > summary::after {
  transform: rotate(180deg);
}
.hgs-learn ol {
  padding-bottom: 14px;
}
.hgs-learn ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: t;
}
.hgs-learn li {
  counter-increment: t;
  position: relative;
  padding: 0;
  border-top: 1px solid var(--color-border-warm, #e8dfc8);
}
.hgs-learn li:first-child {
  border-top: none;
}
.hgs-learn a {
  display: block;
  padding: 11px 8px 11px 42px;
  font-weight: 700;
  color: var(--g-ink);
  text-decoration: none;
  border-radius: 8px;
}
.hgs-learn a:hover {
  background: var(--g-warm);
  color: var(--g-accent);
}
.hgs-learn li::before {
  content: counter(t);
  position: absolute;
  left: 8px;
  top: 11px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--g-accent-fill);
  color: #3a2a05;
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* ---- Callout boxes ----
   One warm family (cream + gold) so the page reads cohesive rather than
   rainbow. Only genuine warnings break out into red. ---- */
.hgs-guide .call {
  border-radius: var(--radius-lg, 12px);
  padding: 20px 18px;
  margin: 24px 0;
  border: 1px solid var(--color-border-warm, #e8dfc8);
  background: var(--g-cream);
}
.hgs-guide .call .tag {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: #291742;
}
.hgs-guide .call p {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.55;
}
.hgs-guide .call .tag + p {
  margin-top: 0;
}
.hgs-guide .call.tip {
  background: var(--g-warm);
}
@media (max-width: 720px) {
  .hgs-guide .call {
    padding: 18px 16px;
  }
  .hgs-guide .call p {
    font-size: 16px;
    line-height: 1.55;
  }
}
.hgs-guide .call.tip .tag {
  color: #291742;
}
.hgs-guide .call.warn {
  border: 1px solid var(--g-warn-line);
  background: var(--g-warn-bg);
}
.hgs-guide .call.warn .tag {
  color: var(--g-warn-ink);
}

/* ---- Definition box ---- */
.hgs-guide .define {
  background: var(--color-surface-subtle, #f7f5f1);
  border: 1px solid var(--g-rule);
  border-radius: var(--radius-lg, 12px);
  padding: 18px 22px;
  margin: 20px 0;
}
.hgs-guide .define .word {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g-accent);
  margin: 0 0 4px;
}
.hgs-guide .define p {
  margin: 4px 0 0;
  font-size: 19px;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .hgs-guide .define p {
    margin: 10px 0 0;
    font-size: 17px;
    line-height: 1.55;
  }
  .hgs-guide .define .word + p {
    margin-top: 8px;
  }
}

/* ---- Stat tiles ---- */
.hgs-guide .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.hgs-guide .stat {
  background: var(--color-surface-subtle, #f5f5f5);
  border: 1px solid var(--g-rule);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 14px;
  text-align: center;
}
.hgs-guide .stat .n {
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--g-accent);
  line-height: 1;
}
.hgs-guide .stat .l {
  font-size: 13px;
  color: var(--g-soft);
  margin-top: 8px;
  font-weight: 600;
}
@media (max-width: 560px) {
  .hgs-guide .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- SVG figures ---- */
.hgs-guide figure {
  margin: 28px 0;
}
.hgs-guide figure svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg, 12px);
}
.hgs-guide figcaption {
  font-size: 14px;
  color: var(--g-soft);
  margin-top: 10px;
  text-align: center;
  font-style: italic;
}

/* ---- Trap cards ---- */
.hgs-guide .traps {
  display: grid;
  gap: 12px;
  margin: 22px 0;
}
.hgs-guide .trap {
  border: 1px solid var(--g-rule);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 18px;
  background: var(--color-surface-base, #fff);
}
/* Card headings are h3 under an h2 chapter, and h4 only where the card grid
   itself sits under an h3 (the Help to Buy comparison). Both are styled
   identically so promoting a card to the correct outline level never changes
   the look. font-weight/color are pinned because the generic h3 rules above
   (and in blog-content.css) would otherwise bump them. */
.hgs-guide .trap h3,
.hgs-guide .trap h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: inherit;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.hgs-guide .trap h3 .em,
.hgs-guide .trap h4 .em {
  font-size: 20px;
}
.hgs-guide .trap p {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--g-soft);
}
.hgs-guide .trap-points {
  margin: 8px 0 0;
  padding: 0 0 0 1.15em;
  list-style: disc;
}
.hgs-guide .trap-points > li {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--g-soft);
}
.hgs-guide .trap-points > li:last-child {
  margin-bottom: 0;
}

/* ---- Case study ---- */
.hgs-guide .case {
  background: linear-gradient(135deg, var(--g-cream), var(--g-warm));
  border: 1px solid var(--color-border-warm, #e8dfc8);
  border-radius: var(--radius-2xl, 18px);
  padding: 24px 26px;
  margin: 28px 0;
}
.hgs-guide .case .who {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g-accent);
}
.hgs-guide .case blockquote {
  margin: 10px 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.hgs-guide .case p {
  font-size: 17px;
}

/* ---- Layout: hero top-left, sticky tools top-right, body below ---- */
.hgs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
  grid-template-areas:
    'hero  tools'
    'intro tools'
    'body  tools';
  column-gap: 44px;
  align-items: start;
  margin-top: 4px;
}
/* Reddit/content landers: single column, no sticky aside */
.hgs-layout:has(> .hgs-body-solo) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'hero'
    'body';
  max-width: 760px;
  /* Without this the 760px measure sits hard-left inside the 1240px container and
     leaves a 480px dead gutter on desktop — the aside layout above fills that space,
     the solo layout has nothing to fill it with, so it has to centre instead. */
  margin-inline: auto;
}
.hgs-hero {
  grid-area: hero;
}
.hgs-intro {
  grid-area: intro;
}
.hgs-body {
  grid-area: body;
}
.hgs-aside {
  grid-area: tools;
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  padding-right: 2px;
}
.hgs-inline-tool {
  margin: 28px 0;
  max-width: 420px;
}
.hgs-aside::-webkit-scrollbar {
  width: 6px;
}
.hgs-aside::-webkit-scrollbar-thumb {
  background: var(--g-rule);
  border-radius: 3px;
}
.hgs-tools {
  background: var(--color-surface-subtle, #f5f5f5);
  border: 1px solid var(--g-rule);
  border-radius: var(--radius-xl, 16px);
  padding: 18px 18px;
}
.hgs-tools h3 {
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-soft);
}
.hgs-tools ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hgs-tools a {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--g-ink);
  text-decoration: none;
}
.hgs-tools a:hover {
  background: var(--g-warm);
  color: var(--g-accent);
}
.hgs-tools a .ic {
  font-size: 17px;
}
.hgs-asidecta {
  background: var(--g-panel);
  color: #fff;
  border-radius: var(--radius-xl, 16px);
  padding: 20px 20px;
  text-align: center;
}
.hgs-asidecta p {
  margin: 0 0 12px;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.85);
}
.hgs-asidecta .btn {
  display: inline-block;
  background: var(--g-accent-fill);
  color: #3a2a05;
  font-weight: 800;
  font-size: 15.5px;
  font-family: inherit;
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.hgs-asidecta .btn:hover {
  background: var(--color-accent-hover, #fca72a);
}

/* Sidebar social-proof review card wrapper. Hidden on mobile so it doesn't push
   the guide down the page (the checker is the priority on a phone). */
@media (max-width: 960px) {
  .hgs-proof-card {
    display: none;
  }
}

/* ---- Mobile: the .hg-table 2-3 column tables (base-styled by the global
   blog-content.css) squeeze columns to nothing and stack words vertically on a
   phone. Below 600px each row becomes a labelled card: header row visually
   hidden (kept for screen readers), each row a bordered card, first cell the
   title, and any cell with a data-label prints "Label: " before its value.
   Scoped to .hgs-guide with `table.hg-table` so it beats the global rules and
   never touches other blog/article tables. Desktop is untouched. ---- */
@media (max-width: 600px) {
  .hgs-guide table.hg-table {
    border: none;
    border-radius: 0;
  }
  .hgs-guide table.hg-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .hgs-guide table.hg-table tbody,
  .hgs-guide table.hg-table tbody tr,
  .hgs-guide table.hg-table tbody td {
    display: block;
    width: 100%;
  }
  .hgs-guide table.hg-table tbody tr {
    border: 1px solid var(--g-rule);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-surface-base, #fff);
    margin: 0 0 12px;
    overflow: hidden;
  }
  .hgs-guide table.hg-table tbody td,
  .hgs-guide table.hg-table tbody tr:nth-child(even) td {
    border: none;
    background: transparent;
    padding: 7px 16px;
  }
  .hgs-guide table.hg-table tbody td:first-child {
    padding-top: 13px;
    font-size: 16px;
    font-weight: 800;
  }
  .hgs-guide table.hg-table tbody td:last-child {
    padding-bottom: 13px;
  }
  .hgs-guide table.hg-table tbody td[data-label]::before {
    content: attr(data-label) ': ';
    font-weight: 700;
    color: var(--g-soft);
  }
}

@media (max-width: 960px) {
  /* Mobile safety net: clip any stray horizontal overflow so the page can never
     scroll sideways. Safe here because the sidebar is set to static below, so
     clip on an ancestor can't break position:sticky. */
  .hgs-guide {
    overflow-x: clip;
  }
  .hgs-layout {
    /* minmax(0, 1fr): a wide-min-content child (the checker card) must never
       stretch the track past the viewport (hard-won: it forced 481px on a
       390px phone and the whole page scrolled sideways) */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'hero'
      'intro'
      'tools'
      'body'; /* title → story → checker → guide on mobile */
    row-gap: 16px;
  }
  .hgs-aside {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .hgs-inline-tool {
    max-width: none;
  }
  /* The site-wide floating mobile CTA already covers this job; a dark CTA
     card as the first thing on a phone is pushy before any value */
  .hgs-asidecta {
    display: none;
  }
}

/* ---- "Our take" — editorial opinion box (Backlinko-style verdict) ---- */
.hgs-guide .take {
  border: 1.5px solid var(--g-accent-fill);
  background: var(--g-warm);
  border-radius: var(--radius-2xl, 18px);
  padding: 20px 22px 20px 22px;
  margin: 28px 0;
  position: relative;
}
.hgs-guide .take .takehead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.hgs-guide .take .avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--g-accent-fill);
  color: #3a2a05;
  font-weight: 800;
  font-size: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  object-fit: cover; /* when it's an <img> headshot */
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.hgs-guide .take .takelabel {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-accent);
  line-height: 1.2;
}
.hgs-guide .take .takelabel small {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--g-soft);
}
.hgs-guide .take .takelabel small a {
  color: var(--g-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hgs-guide .take p {
  margin: 10px 0 0;
  font-size: 19px;
  line-height: 1.6;
}
.hgs-guide .take p:first-of-type {
  margin-top: 0;
}

/* ---- Client-story cutaway (avatar left, quote right) — shares the warm
   identity of the "Our take" box so the page reads as one voice ---- */
.hgs-guide .hgs-quote {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: linear-gradient(135deg, var(--g-cream), var(--g-warm));
  border: 1px solid var(--color-border-warm, #e8dfc8);
  border-radius: var(--radius-xl, 16px);
  padding: 24px 26px;
  margin: 28px 0;
}
.hgs-guide .hgs-quote .qav {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--color-border-warm, #e8dfc8);
  display: grid;
  place-items: center;
  font-size: 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.hgs-guide .hgs-quote blockquote {
  margin: 0;
  position: relative;
  font-size: 21px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--g-ink);
}
.hgs-guide .hgs-quote .qbody > p {
  margin: 12px 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--g-ink);
}
.hgs-guide .hgs-quote .qattr {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--g-soft);
}
@media (max-width: 560px) {
  .hgs-guide .hgs-quote {
    flex-direction: column;
    gap: 12px;
  }
}

/* ---- Interactive deposit-vs-loan bars (drag the price) ---- */
.hgs-guide .hgs-bars {
  margin: 28px 0;
}
.hgs-guide .hgs-bars .hgs-bars-controls {
  padding-bottom: 8px;
}
.hgs-guide .hgs-bars .hgs-bars-region {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--g-soft);
}
.hgs-guide .hgs-bars .hgs-bars-region .hgs-inlinestate {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  white-space: normal;
  text-overflow: unset;
  overflow: visible;
  font-size: 15px;
  padding: 12px 14px;
}
.hgs-guide .hgs-bars .hgs-bars-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 2px;
}
.hgs-guide .hgs-bars .hgs-bars-top label {
  font-size: 14px;
  font-weight: 700;
  color: var(--g-soft);
}
.hgs-guide .hgs-bars .hgs-bars-price {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--g-ink);
}
.hgs-guide .hgs-bars .hgs-bars-scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--g-soft);
  margin-bottom: 8px;
}
.hgs-guide .hgs-bars .hgs-bars-chart {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 560px) {
  .hgs-guide .hgs-bars .hgs-bars-chart {
    display: none;
  }
}
.hgs-guide .hgs-bars .hgs-bars-cap {
  margin: 6px 2px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--g-soft);
  text-align: center;
}
/* Time-to-save mini tool inside the bars card */
.hgs-guide .hgs-bars .hgs-bars-time {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-warm, #e8dfc8);
}
.hgs-guide .hgs-bars .hgs-bars-sooner {
  margin-top: 6px;
  text-align: center;
  background: var(--g-warm);
  border: 1px solid var(--color-border-warm, #e8dfc8);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 14px;
}
.hgs-guide .hgs-bars .hgs-bars-sooner .soonerlead {
  margin: 0;
  padding: 0 2px;
}
.hgs-guide .hgs-bars .hgs-db {
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--color-border-warm, #e8dfc8);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hgs-guide .hgs-bars .hgs-db-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0;
}
.hgs-guide .hgs-bars .hgs-db-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--g-soft);
}
.hgs-guide .hgs-bars .hgs-db-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.hgs-guide .hgs-bars .hgs-db-legend-dep {
  background: var(--g-accent-fill);
}
.hgs-guide .hgs-bars .hgs-db-legend-loan {
  background: var(--g-panel);
}
.hgs-guide .hgs-bars .hgs-db-row {
  min-width: 0;
}
.hgs-guide .hgs-bars .hgs-db-label {
  margin: 0 0 10px !important;
  font-size: 16px !important;
  font-weight: 800;
  line-height: 1.25 !important;
  color: var(--g-ink);
}
.hgs-guide .hgs-bars .hgs-db-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: 48px;
  border-radius: 8px;
  overflow: hidden;
}
.hgs-guide .hgs-bars .hgs-db-dep,
.hgs-guide .hgs-bars .hgs-db-loan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  padding: 10px 6px;
  text-align: center;
}
.hgs-guide .hgs-bars .hgs-db-dep {
  background: var(--g-accent-fill);
  color: #3a2a05;
}
.hgs-guide .hgs-bars .hgs-db-dep-slim {
  padding: 6px 0;
  overflow: hidden;
}
.hgs-guide .hgs-bars .hgs-db-amt-vert {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.hgs-guide .hgs-bars .hgs-db-loan {
  background: var(--g-panel);
  color: #fff;
}
.hgs-guide .hgs-bars .hgs-db-amt {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* Cap warning: shows when the price slider is pinned at the region's cap */
.hgs-guide .hgs-bars .hgs-bars-capwarn {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--g-warn-bg, #fdf3e7);
  border: 1px solid var(--g-warn-line, #f0d9b8);
  color: var(--g-warn-ink, #8a5a00);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
}
/* Savings bar: sits under the 5% row, spans the 15% gap between deposits */
.hgs-guide .hgs-bars .hgs-db-track-save {
  overflow: visible;
  min-height: 40px;
}
.hgs-guide .hgs-bars .hgs-db-ghost {
  flex: 0 0 auto;
  background: #ececec;
  border-radius: 8px;
  margin-right: 2px;
}
.hgs-guide .hgs-bars .hgs-db-ghost:last-child {
  margin-right: 0;
  margin-left: 2px;
}
.hgs-guide .hgs-bars .hgs-db-save {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  padding: 8px 6px;
  text-align: center;
  background: #e7f4ec;
  border: 1.5px dashed #1f8a4c;
  border-radius: 8px;
  color: #14663a;
  transition: width 0.2s ease;
}
.hgs-guide .hgs-bars .hgs-db-save .hgs-db-amt {
  white-space: nowrap;
  font-size: 13px;
}
@media (max-width: 420px) {
  .hgs-guide .hgs-bars .hgs-db-amt {
    font-size: 14px;
  }
}
.hgs-guide .hgs-bars .hgs-bars-cap {
  margin: 20px 0 0;
  padding: 14px 10px 4px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--g-soft);
  text-align: center;
}
/* Standalone time-to-save card (split out from deposit bars) */
.hgs-guide .hgs-bars .hgs-bars-heading {
  margin: 0 0 16px !important;
  font-size: 20px !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25 !important;
  color: var(--g-ink);
}
.hgs-guide .hgs-bars-sooner-only .hgs-bars-time {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Time-to-save mini tool inside the bars card */
.hgs-guide .hgs-bars .hgs-bars-time {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border-warm, #e8dfc8);
}
/* A plain block box, so the form-system result region it hosts gets no gap for
   free. That region deliberately carries no margin of its own (its usual hosts
   are gapped flex/grid boxes that own the rhythm), so this host declares it. */
.hgs-guide .hgs-bars .hgs-bars-time > [role='status'] {
  margin-top: var(--space-5, 20px);
}
.hgs-guide .hgs-bars .hgs-bars-sooner {
  margin-top: 14px;
  text-align: center;
  background: #291742;
  border: none;
  border-radius: var(--radius-lg, 12px);
  padding: 22px 16px;
}
.hgs-guide .hgs-bars .hgs-bars-sooner .soonerlead {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
}
.hgs-guide .hgs-bars .hgs-bars-for {
  margin: 0 0 10px !important;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.3 !important;
  color: var(--g-soft);
  text-align: center;
}
.hgs-guide .hgs-bars .hgs-bars-sooner .soonerbig {
  margin: 6px 0 10px;
  font-size: clamp(36px, 9vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.hgs-guide .hgs-bars .hgs-bars-sooner .soonersub {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
.hgs-guide .hgs-bars .hgs-bars-timenote {
  margin: 14px 2px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--g-soft);
  text-align: center;
}

/* Inline region select in calculator headers. On mobile it goes full-width
   (see .hgs-calc-region) so long labels aren't truncated mid-word. */
.hgs-guide .hgs-lblrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.hgs-guide .hgs-inlinestate {
  max-width: min(300px, 48vw);
}
.hgs-guide .hgs-inlinestate select {
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Eligibility checklist inside .call */
.hgs-guide .hgs-checklist,
.hgs-guide .article-blog .hgs-checklist,
.hgs-guide ul.hgs-checklist {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hgs-guide .hgs-checklist > li,
.hgs-guide .article-blog .hgs-checklist > li {
  position: relative;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 0 0 32px !important;
  font-size: 15.5px !important;
  line-height: 1.45 !important;
  color: var(--g-ink);
}
.hgs-guide .hgs-checklist > li::marker {
  content: none;
}
.hgs-guide .hgs-checklist > li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1f8a4c;
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(31, 138, 76, 0.25);
}
/* The 2% single-parent pathway and its conditions. Sits below the checklist rather than
   inside it: the list is headed "you need a yes on all of these", so a conditional pathway
   nested in it reads as another box to tick. Body-sized, not note-sized — these conditions
   decide eligibility, they are not fine print. */
.hgs-guide .hgs-checklist-sub {
  font-size: 15px;
  line-height: 1.55;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-warm, #e8dfc8);
}

.hgs-guide .hgs-checklist-note {
  font-size: 13.5px;
  color: var(--g-soft);
  margin: 14px 0 0;
}

/* ---- Schemes map: cards with bullet points + read more ---- */
.hgs-guide .hgs-schemes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 18px 0 10px;
}
@media (min-width: 720px) {
  .hgs-guide .hgs-schemes {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
.hgs-guide .hgs-scheme-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(165deg, var(--g-cream, #fff9f0) 0%, #fff 72%);
  border: 1.5px solid var(--color-border-warm, #e8dfc8);
  border-radius: 14px;
  /* Top border thickens into the accent rule that replaced the emoji tile. */
  border-top: 3px solid var(--color-accent, #fdb948);
  padding: 14px 15px 12px;
  box-shadow: 0 2px 8px rgba(111, 75, 0, 0.06);
}
/* The 5% Deposit Scheme is what the guide is about; the other four are context. It gets
   the full row and a warmer fill so scanning the grid surfaces it first, instead of five
   equal boxes asking the reader to work out which one matters. */
.hgs-guide .hgs-scheme-card--primary {
  grid-column: 1 / -1;
  background: var(--g-warm, #fff8e9);
}
/* Scheme card headers.

   These used to lead with a 38px gold rounded tile containing a system emoji — 🏠 💵 🧾
   🐷 🤝 — repeated across fourteen otherwise-identical cards. Colour emoji beside 34px
   Open Sans is a register collision: the prose is a person explaining something, the
   cartoon pig is a brand doing a bit. It also flattened the hierarchy, since the 5%
   Deposit Scheme (the one this guide is actually about) got the same treatment as the
   First Home Super Saver (a footnote for most readers).

   Typography carries it now: the name is the affordance, and the accent rule at the top
   of the card supplies the brand colour the tile used to. */
.hgs-guide .hgs-scheme-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hgs-guide .hgs-scheme-card .hgs-scheme-name {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font-size: 15.5px !important;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.3 !important;
  color: var(--g-ink, #262626);
}
.hgs-guide .hgs-scheme-title {
  min-width: 0;
}
.hgs-guide .hgs-scheme-who {
  flex: 0 0 auto;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(138, 106, 43, 0.3);
  color: #8a6a2b;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
}
.hgs-guide .hgs-scheme-points {
  list-style: disc !important;
  margin: 0 !important;
  padding: 0 0 0 18px !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hgs-guide .hgs-scheme-points > li {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #444;
}
.hgs-guide .hgs-scheme-more {
  margin: 2px 0 0 !important;
  align-self: flex-start;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--g-accent, #c47d0a) !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid rgba(196, 125, 10, 0.35);
  padding-bottom: 1px;
  line-height: 1.2;
}
.hgs-guide .hgs-scheme-more:hover {
  border-bottom-color: var(--g-accent-fill, #fdb948);
}

/* State tables (FHOG / duty): your-state card + list on mobile */
.hgs-guide .hgs-statetable {
  margin: 16px 0 8px;
}
.hgs-guide .hgs-statetable-you {
  background: var(--g-warm);
  border: 2px solid var(--g-accent-fill);
  border-radius: 14px;
  padding: 12px 14px 10px;
  margin: 0 0 12px;
}
.hgs-guide .hgs-statetable-kicker {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #291742;
}
.hgs-guide .hgs-statetable-region {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 8px;
}
.hgs-guide .hgs-statetable-region .hgs-inlinestate {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0;
}
.hgs-guide .hgs-statetable-region .hgs-inlinestate select {
  font-size: 17px;
  font-weight: 800;
  padding: 8px 10px;
}
.hgs-guide .hgs-statetable-other-kicker {
  margin: 4px 0 10px !important;
  font-size: 11.5px !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3 !important;
  color: #291742;
}
.hgs-guide .hgs-statetable-hero {
  margin: 0 0 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(233, 146, 2, 0.25);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--g-ink);
  line-height: 1.1;
}
.hgs-guide .hgs-statetable-meta {
  margin: 0;
  padding: 6px 0 0;
  border-top: 1px solid rgba(233, 146, 2, 0.25);
  font-size: 14px;
  line-height: 1.35;
  color: var(--g-ink);
}
.hgs-guide .hgs-statetable-meta > span {
  display: block;
  margin-bottom: 1px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-soft);
}
.hgs-guide .hgs-statetable-list {
  list-style: none !important;
  margin: 0;
  padding: 0 !important;
  border: 1px solid var(--g-rule);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.hgs-guide .hgs-statetable-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-top: 1px solid var(--g-rule);
  margin: 0 !important;
  font-size: inherit;
  line-height: inherit;
}
.hgs-guide .hgs-statetable-list li:first-child {
  border-top: 0;
}
.hgs-guide .hgs-statetable-list-state {
  font-size: 15px;
  font-weight: 800;
  color: var(--g-ink);
}
.hgs-guide .hgs-statetable-list strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--g-ink);
}
.hgs-guide .hgs-statetable-list-detail {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--g-soft);
}
.hgs-guide .hgs-statetable-list-detail em {
  font-style: normal;
  font-weight: 700;
  color: var(--g-ink);
  margin-right: 4px;
}
.hgs-guide .hgs-statetable-desktop {
  display: none;
}
@media (min-width: 721px) {
  .hgs-guide .hgs-statetable-you,
  .hgs-guide .hgs-statetable-other-kicker,
  .hgs-guide .hgs-statetable-list {
    display: none;
  }
  .hgs-guide .hgs-statetable-desktop {
    display: block;
  }
}
/* Source attribution under each state table. Sits with the table, not with the
   page's legal disclaimer, because it answers "where did this number come
   from" at the point the reader is looking at the number. Deliberately quieter
   than the surrounding body copy; the !important matches .hgs-disclaimer,
   which needs it to beat the guide's generous body-copy sizing. */
.hgs-guide .hgs-statetable-source,
.hgs-guide .hgs-main p.hgs-statetable-source,
.hgs-guide .article-blog p.hgs-statetable-source {
  font-size: 12.5px !important;
  line-height: 1.45;
  color: var(--g-soft, #666);
  margin: 10px 0 0;
}

/* Price caps: mobile list + your-area card; desktop comparison table */
.hgs-guide .hgs-caps {
  margin: 16px 0 8px;
}
.hgs-guide .hgs-caps-you {
  background: var(--g-warm);
  border: 2px solid var(--g-accent-fill);
  border-radius: 14px;
  padding: 16px 16px 14px;
  margin: 0 0 12px;
}
.hgs-guide .hgs-caps-region {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
}
.hgs-guide .hgs-caps-you-kicker {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #291742;
}
.hgs-guide .hgs-caps-region .hgs-inlinestate {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 18px;
  font-weight: 800;
  padding: 10px 12px;
}
.hgs-guide .hgs-caps-you-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hgs-guide .hgs-caps-you-grid-one {
  grid-template-columns: 1fr;
}
.hgs-guide .hgs-caps-you-grid > div {
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hgs-guide .hgs-caps-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--g-soft);
}
.hgs-guide .hgs-caps-you-grid strong {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--g-ink);
}
.hgs-guide .hgs-caps-other-kicker {
  margin: 4px 0 10px !important;
  font-size: 11.5px !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3 !important;
  color: #291742;
}
.hgs-guide .hgs-caps-list {
  list-style: none !important;
  margin: 0;
  padding: 0 !important;
  border: 1px solid var(--g-rule);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.hgs-guide .hgs-caps-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-top: 1px solid var(--g-rule);
  margin: 0 !important;
  font-size: inherit;
  line-height: inherit;
}
.hgs-guide .hgs-caps-list li:first-child {
  border-top: 0;
}
.hgs-guide .hgs-caps-list-state {
  font-size: 15px;
  font-weight: 800;
  color: var(--g-ink);
}
.hgs-guide .hgs-caps-list-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--g-ink);
}
.hgs-guide .hgs-caps-list-nums em {
  font-style: normal;
  font-weight: 600;
  color: var(--g-soft);
  margin-right: 4px;
}
/* Desktop: hide the mobile cards/list, show the comparison table */
.hgs-guide .hgs-caps-desktop {
  display: none;
}
@media (min-width: 721px) {
  .hgs-guide .hgs-caps-you,
  .hgs-guide .hgs-caps-other-kicker,
  .hgs-guide .hgs-caps-list {
    display: none;
  }
  .hgs-guide .hgs-caps-desktop {
    display: block;
  }
}

.hgs-guide .hgs-table-wrap {
  margin: 16px 0;
}
/* Row-header cells (state names) are body cells, not header cells: undo the
   dark hg-table th treatment so they read like the rest of the row */
.hgs-guide table.hgs-captable tbody th {
  background: transparent;
  color: var(--g-ink, #262626);
  font-weight: 700;
}
.hgs-guide table.hgs-captable tbody tr:nth-child(even) th {
  background: #f5f3ef;
}
.hgs-guide table.hgs-captable tr.is-you td,
.hgs-guide table.hgs-captable tr.is-you th {
  background: var(--g-warm);
  color: var(--g-ink, #262626);
  font-weight: 800;
}
.hgs-guide table.hgs-captable tr.is-other td,
.hgs-guide table.hgs-captable tr.is-other th {
  /* De-emphasise other rows with a muted ink instead of opacity, so text
     stays comfortably above 4.5:1 on both white and zebra backgrounds */
  color: #4a4a4a;
  font-weight: 400;
}
.hgs-guide table.hgs-captable tr.is-other strong {
  color: #3a3a3a;
}

/* ---- LMI vs 5% Scheme calculator ----
   Selectors are scoped under .hgs-calc with enough specificity to beat the
   generic .hgs-main p body rule. ---- */
.hgs-guide .hgs-calc {
  margin: 30px 0;
}
.hgs-guide .hgs-calc .hgs-calc-slider {
  margin: 0 0 20px;
}
.hgs-guide .hgs-calc .hgs-calc-region {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--g-soft);
}
.hgs-guide .hgs-calc .hgs-calc-region .hgs-inlinestate {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  white-space: normal;
  text-overflow: unset;
  overflow: visible;
  font-size: 15px;
  padding: 12px 14px;
}
.hgs-guide .hgs-calc .hgs-calc-sliderhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.hgs-guide .hgs-calc .hgs-calc-sliderhead label {
  font-size: 15px;
  font-weight: 700;
  color: var(--g-soft);
}
.hgs-guide .hgs-calc .hgs-calc-price {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--g-ink);
}
.hgs-guide .hgs-calc .hgs-calc-scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--g-soft);
}
.hgs-guide .hgs-calc .hgs-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 4px 0 18px;
}
.hgs-guide .hgs-calc .hgs-calc-col {
  background: #fff;
  border: 1px solid var(--g-rule);
  border-radius: var(--radius-lg, 12px);
  padding: 4px 16px 16px;
}
.hgs-guide .hgs-calc .hgs-calc-col.win {
  border: 2px solid var(--g-accent-fill);
  background: var(--g-warm);
}
.hgs-guide .hgs-calc .hgs-calc-colhead {
  font-size: 15px;
  font-weight: 800;
  padding: 14px 0 10px;
  color: var(--g-ink);
}
.hgs-guide .hgs-calc dl {
  margin: 0;
}
.hgs-guide .hgs-calc dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--g-rule);
}
.hgs-guide .hgs-calc .hgs-calc-col.win dl > div {
  border-top-color: rgba(233, 146, 2, 0.22);
}
.hgs-guide .hgs-calc dt {
  font-size: 14px;
  color: var(--g-soft);
}
.hgs-guide .hgs-calc dd {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--g-ink);
  white-space: nowrap;
}
.hgs-guide .hgs-calc dd.good {
  color: #157a40; /* 5.1:1 on the warm win-column background */
}
.hgs-guide .hgs-calc dd.bad {
  color: var(--g-warn-ink);
}
.hgs-guide .hgs-calc .hgs-calc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--g-rule);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g-soft);
}
.hgs-guide .hgs-calc .hgs-calc-col.win .hgs-calc-total {
  border-top-color: var(--g-accent-fill);
}
.hgs-guide .hgs-calc .hgs-calc-total strong {
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--g-ink);
}
/* Extra-cost delta under the LMI column total */
.hgs-guide .hgs-calc .hgs-calc-delta {
  margin-top: 8px;
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  color: var(--g-warn-ink);
}

.hgs-guide .hgs-calc .hgs-calc-verdict {
  background: var(--g-panel);
  color: #fff;
  border-radius: var(--radius-xl, 16px);
  padding: 22px 22px 20px;
  text-align: center;
}
.hgs-guide .hgs-calc .hgs-calc-verdict-lead {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
}
.hgs-guide .hgs-calc .hgs-calc-extra {
  margin: 4px 0 6px;
  font-size: clamp(40px, 8vw, 58px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--g-accent-fill);
}
.hgs-guide .hgs-calc .hgs-calc-verdict-sub {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
/* Relatable "put another way" tiles */
.hgs-guide .hgs-calc .hgs-calc-rel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.hgs-guide .hgs-calc .hgs-calc-rel-lead {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
/* auto-fit, not a fixed count: the equivalence list is data-driven (`relatables()`), so
   the old `repeat(4, 1fr)` stranded the cards against the left with an empty fourth
   column the moment that list went from four entries to three. Tracks now follow the
   item count and the row stays balanced whatever it becomes. */
.hgs-guide .hgs-calc .hgs-calc-rel-grid {
  display: grid;
  /* 84px floor is set by the narrowest real case: a 277px grid at 375px viewport, less
     two 8px gaps, is 87px per track for three cards. Anything larger drops one onto a
     row of its own. */
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 10px;
  /* Centres labels that wrap to a second line; `align-items` only centres the boxes. */
  text-align: center;
}
.hgs-guide .hgs-calc .hgs-calc-rel-grid > div {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hgs-guide .hgs-calc .hgs-calc-rel-grid .e {
  font-size: 24px;
  line-height: 1.1;
}
.hgs-guide .hgs-calc .hgs-calc-rel-grid strong {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
.hgs-guide .hgs-calc .hgs-calc-rel-grid .l {
  font-size: 11.5px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 560px) {
  .hgs-guide .hgs-calc {
    padding: 16px 14px 14px;
    margin: 22px 0;
  }
  .hgs-guide .hgs-calc .hgs-calc-title {
    font-size: 20px;
    margin-bottom: 12px;
  }
  .hgs-guide .hgs-calc .hgs-calc-price {
    font-size: 22px;
  }
  .hgs-guide .hgs-calc .hgs-calc-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }
  .hgs-guide .hgs-calc .hgs-calc-col {
    padding: 2px 12px 12px;
  }
  .hgs-guide .hgs-calc .hgs-calc-colhead {
    padding: 10px 0 6px;
    font-size: 14px;
  }
  .hgs-guide .hgs-calc dl > div {
    padding: 7px 0;
  }
  .hgs-guide .hgs-calc .hgs-calc-verdict {
    padding: 16px 14px 14px;
  }
  .hgs-guide .hgs-calc .hgs-calc-extra {
    font-size: clamp(32px, 10vw, 44px);
  }
  .hgs-guide .hgs-calc .hgs-calc-rel {
    margin-top: 12px;
    padding-top: 12px;
  }
  .hgs-guide .hgs-calc .hgs-calc-rel-grid {
    /* No column override: auto-fit above already fits three short cards across a
       375px column. A hard `repeat(2, 1fr)` left the third one stranded on its own row. */
    gap: 8px;
  }
  .hgs-guide .hgs-calc .hgs-calc-rel-grid > div {
    padding: 8px 4px;
  }
  .hgs-guide .hgs-calc .hgs-calc-rel-grid .e {
    font-size: 18px;
  }
  .hgs-guide .hgs-calc .hgs-calc-rel-grid strong {
    font-size: 16px;
  }
}
.hgs-guide .hgs-calc .hgs-calc-fine {
  margin: 12px 2px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--g-soft);
}

/* LMI reasons list (live first bullet from slider price) */
.hgs-guide .hgs-lmi-reasons {
  list-style: disc !important;
  margin: 12px 0 18px !important;
  padding: 0 0 0 1.25em !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hgs-guide .hgs-lmi-reasons > li {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit;
  line-height: 1.55;
  color: var(--g-ink);
}

/* ---- Legal disclaimer (below FAQ) ---- */
.hgs-guide .hgs-disclaimer,
.hgs-guide .hgs-main p.hgs-disclaimer,
.hgs-guide .article-blog p.hgs-disclaimer {
  font-size: 12.5px !important;
  line-height: 1.45;
  color: var(--g-soft, #666);
  font-style: italic;
  margin: 28px 0 8px;
}

/* ── Sticky chapter strip ───────────────────────────────────────────────────
   Wayfinding for a ~20,000px guide (~31,500px on mobile). Navigational only —
   no CTA, no phone number, no booking link: the content lander's spec bans
   persistent conversion chrome, and this stops being wayfinding the moment a
   button lands in it.

   Sits below the site header's layer (--z-header: 100) because on routes that
   keep a sticky header the strip must not cover it; on the content landers the
   header is static, so nothing competes. */
.hgs-chapterbar {
  position: sticky;
  top: 0;
  z-index: var(--z-floating-cta, 50);
  /* Sits after the hero in the document, so it is off-screen until scrolled to. No
     opacity/transform reveal: a JS- or transition-gated one never fires on a backgrounded
     tab or in a headless renderer, and the strip would ship invisible. */
  margin: 0 0 18px;
}

.hgs-chapterbar-inner {
  position: relative;
  background: var(--g-warm, #fff8e9);
  border: 1.5px solid var(--color-border-warm, #e8dfc8);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 2px 10px rgba(111, 75, 0, 0.08);
}
.hgs-chapterbar-toggle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  /* 44px min target */
  min-height: 44px;
  padding: 8px 14px;
  background: none;
  border: 0;
  border-radius: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--g-ink, #262626);
}
.hgs-chapterbar-eyebrow {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* 7.83:1 on the warm fill */
  color: var(--color-accent-ink, #6f4b00);
}
.hgs-chapterbar-label {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hgs-chapterbar-chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-accent-ink, #6f4b00);
  border-bottom: 2px solid var(--color-accent-ink, #6f4b00);
  transform: rotate(45deg) translateY(-2px);
}
.hgs-chapterbar-toggle[aria-expanded='true'] .hgs-chapterbar-chevron {
  transform: rotate(-135deg) translateY(-2px);
}
.hgs-chapterbar-list {
  list-style: none;
  margin: 0;
  padding: 4px 6px 8px;
  max-height: 60vh;
  overflow-y: auto;
  border-top: 1px solid var(--color-border-warm, #e8dfc8);
}
.hgs-chapterbar-list li {
  margin: 0;
}
.hgs-chapterbar-list a {
  display: block;
  min-height: 44px;
  padding: 11px 10px;
  border-radius: var(--radius-md, 8px);
  font-size: 15px;
  line-height: 1.35;
  color: var(--g-ink, #262626);
  text-decoration: none;
}
.hgs-chapterbar-list a span {
  color: var(--color-accent-ink, #6f4b00);
  font-weight: 800;
}
.hgs-chapterbar-list a:hover {
  background: var(--color-surface-base, #fff);
}
.hgs-chapterbar-list a[aria-current='true'] {
  background: var(--color-surface-base, #fff);
  font-weight: 700;
}

@media (max-width: 560px) {
  .hgs-guide .hgs-calc .hgs-calc-grid {
    grid-template-columns: 1fr;
  }
}