/*
Theme Name:   GeneratePress Child – Key Calculators
Theme URI:    https://keycalculators.com/
Template:     generatepress
Description:  Key Calculators. All page copy lives in the WordPress editor; this theme owns layout, design and calculator behaviour only.
Author:       Key Calculators
Version:      3.0
Text Domain:  keycalculators-child
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  --navy: #14213D;
  --forest: #1F6F54;
  --forest-bright: #2E9E83;
  --sage: #7FB69E;
  --parchment: #F6F3EC;
  --amber: #C98A2C;
  --charcoal: #23231F;
  --ink: #333029;
  --muted: #6B6A63;
  --faint: #8A8880;
  --hairline: #DAD4C5;
  --white: #FFFFFF;
  --light-green: #D9EDE5;
  --link: #3A6EA5;

  --font-head: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --max-width: 1040px;
  --prose-width: 74ch;
  --gutter: 24px;
  --band-pad: 60px;
  --radius: 10px;
  --radius-sm: 6px;
}

@media (max-width: 700px) {
  :root {
    --gutter: 18px;
    --band-pad: 40px;
  }
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--parchment);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

img, svg, iframe, table { max-width: 100%; }

/* ==========================================================================
   3. LAYOUT
   --------------------------------------------------------------------------
   GeneratePress wraps page output in a max-width container. The kc-layout body
   class (added in inc/setup.php) releases it so full-width bands can reach the
   viewport edge. A server-rendered class is used rather than :has() so the
   result never depends on browser support or markup order.
   ========================================================================== */

.kc-layout .site-content,
.kc-layout .site-content > .grid-container,
.kc-layout .site-content > .content-area,
.kc-layout .site-content .content-area,
.kc-layout #primary.kc-main {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

.kc-layout #primary.kc-main > .inside-article {
  margin-inline: 0;
  padding-inline: 0;
}

/*
  The full-bleed grid. Everything the editor writes lands in .kc-content:
  normal blocks sit in a readable centre column, and anything marked full width
  spans the viewport. No negative margins, no 100vw, so no horizontal overflow
  and no scrollbar-width bug.
*/
.kc-content {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] min(var(--max-width), 100% - (var(--gutter) * 2))
    [content-end] minmax(var(--gutter), 1fr)
    [full-end];
}

.kc-content > * {
  grid-column: content;
  min-width: 0;
}

.kc-content > .alignfull {
  grid-column: full;
  width: 100%;
  max-width: none;
}

.kc-content > .alignwide {
  grid-column: full;
  width: min(1200px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

/* Vertical rhythm for loose blocks; bands supply their own padding. */
.kc-content > *:not(.kc-band) { margin-block: 0 1.15em; }
.kc-content > .kc-band { margin-block: 0; }
.kc-content > *:first-child { margin-block-start: var(--band-pad); }
.kc-content > .kc-band:first-child { margin-block-start: 0; }
.kc-content > *:last-child { margin-block-end: var(--band-pad); }
.kc-content > .kc-band:last-child { margin-block-end: 0; }

/* Loose text blocks read as a centred column (About, legal pages). */
.kc-content > p,
.kc-content > ul,
.kc-content > ol,
.kc-content > h2,
.kc-content > h3,
.kc-content > h4,
.kc-content > .wp-block-table {
  max-width: var(--prose-width);
  margin-inline: auto;
}

/* ---- Bands ------------------------------------------------------------- */

.kc-band {
  display: grid;
  grid-template-columns:
    [band-start] minmax(var(--gutter), 1fr)
    [inner-start] min(var(--max-width), 100% - (var(--gutter) * 2))
    [inner-end] minmax(var(--gutter), 1fr)
    [band-end];
  padding-block: var(--band-pad);
  background: var(--parchment);
}

.kc-band > * {
  grid-column: inner;
  min-width: 0;
  margin-block: 0;
}

.kc-band > * + * { margin-block-start: 1.15em; }

.kc-band--white  { background: var(--white); border-block: 1px solid var(--hairline); }
.kc-band--navy   { background: var(--navy); color: #C7CBD6; }
.kc-band--green  { background: var(--forest); color: var(--light-green); }
.kc-band--tight  { padding-block: 34px; }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.kc-content h1,
.kc-content h2,
.kc-content h3,
.kc-content h4 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin-block: 0 0.5em;
}

.kc-content h1 { font-size: clamp(28px, 4.2vw, 38px); }
.kc-content h2 { font-size: clamp(22px, 3vw, 28px); }
.kc-content h3 { font-size: clamp(17px, 2.2vw, 20px); }
.kc-content h4 { font-size: 16px; }

.kc-content p,
.kc-content li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
}

.kc-content p { margin-block: 0 1.15em; }

.kc-band p,
.kc-band ul,
.kc-band ol { max-width: var(--prose-width); }

.kc-content a:not(.kc-btn) {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kc-content a:not(.kc-btn):hover { color: var(--forest); }

.kc-band--navy :is(h1, h2, h3, h4) { color: var(--white); }
.kc-band--navy p { color: #C7CBD6; }
.kc-band--green :is(h1, h2, h3, h4) { color: var(--white); }
.kc-band--green p { color: var(--light-green); }

/* Utility classes used by the shipped page content. */
.kc-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--forest);
  margin-block: 0 0.6em !important;
}

.kc-band--navy .kc-kicker,
.kc-band--green .kc-kicker { color: var(--sage); }

.kc-lede {
  font-size: 16px !important;
  line-height: 1.7;
  color: var(--muted) !important;
}

.kc-small {
  font-size: 12.5px !important;
  color: var(--faint) !important;
}

.kc-updated {
  font-family: var(--font-mono);
  font-size: 11.5px !important;
  color: var(--faint) !important;
}

/* ==========================================================================
   5. HEADER, BREADCRUMB, FOOTER
   ========================================================================== */

.site-header, .main-navigation {
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}

.main-navigation a,
.main-navigation .menu-item a { color: var(--charcoal); }

.main-navigation .current-menu-item > a,
.main-navigation a:hover { color: var(--forest); }

.site-title, .site-title a {
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 700;
}

.kc-breadcrumb {
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  padding-block: 13px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--faint);
}

.kc-breadcrumb__inner {
  width: min(var(--max-width), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.kc-breadcrumb a { color: var(--link); }
.kc-breadcrumb a:hover { text-decoration: underline; }
.kc-breadcrumb .sep { margin-inline: 8px; color: #C7C2B2; }
.kc-breadcrumb .current { color: var(--navy); }

.site-footer, #footer-widgets { background: var(--navy); color: #B9BEC9; }
#footer-widgets h2, #footer-widgets .widget-title {
  font-family: var(--font-head);
  color: var(--white);
  font-size: 14.5px;
}
#footer-widgets a { color: #9BA0AE; font-size: 12.5px; }
#footer-widgets a:hover { color: var(--white); }

/* Fallback H1 band, printed by page.php only when the content has none. */
.kc-page-head .kc-page-title {
  font-family: var(--font-head);
  font-size: clamp(26px, 4vw, 34px);
  color: var(--navy);
  margin: 0;
}

/* ==========================================================================
   6. HERO
   ========================================================================== */

.kc-hero { padding-block: 64px 76px; }

.kc-hero .wp-block-columns { gap: 40px; align-items: center; }

.kc-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: 2px;
  color: var(--amber) !important;
  background: rgba(201, 138, 44, 0.12);
  border: 1px solid rgba(201, 138, 44, 0.35);
  padding: 6px 12px;
  border-radius: 3px;
  margin-block: 0 1.2em !important;
}

.kc-hero h1 {
  font-size: clamp(30px, 5vw, 44px) !important;
  line-height: 1.18;
  margin-block: 0 0.4em;
}

.kc-hero h1 em { font-style: italic; color: var(--sage); }

.kc-hero .kc-lede { color: #C7CBD6 !important; max-width: 44ch; }

.kc-chips { font-size: 12.5px !important; color: #C7CBD6 !important; }
.kc-chips strong { font-weight: 400; }

/* Search: one row at every width, no wrapping button. */
.kc-hero .wp-block-search { max-width: 440px; margin-block: 0 1.3em; }
.kc-hero .wp-block-search__inside-wrapper { display: flex; gap: 0; min-width: 0; }

.kc-hero .wp-block-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  border: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding-inline: 14px;
  font-family: var(--font-body);
  font-size: 14px;
}

.kc-hero .wp-block-search__button {
  flex: 0 0 auto;
  height: 48px;
  margin: 0;
  padding-inline: 22px;
  border: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--forest);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.kc-hero .wp-block-search__button:hover { background: var(--forest-bright); }

/* ---- Sample result card (kc/hero-ledger) -------------------------------- */

.kc-ledger {
  background: #FBF9F4;
  border-radius: var(--radius);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.28);
  padding: 26px 28px 22px;
  color: var(--ink);
}

.kc-ledger__head {
  font-family: var(--font-mono);
  font-size: 10.5px !important;
  letter-spacing: 1.3px;
  color: var(--faint) !important;
  border-bottom: 1px dashed var(--hairline);
  padding-bottom: 12px;
  margin: 0 0 14px !important;
}

.kc-ledger__title {
  font-family: var(--font-head);
  font-size: 17px !important;
  font-weight: 700;
  color: var(--navy) !important;
  margin: 0 0 16px !important;
}

.kc-ledger__row,
.kc-ledger__total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.kc-ledger__row {
  font-size: 12.5px;
  padding-block: 8px;
  border-bottom: 1px dotted #E4DFD1;
}

.kc-ledger__row .val { color: var(--charcoal); text-align: right; }

.kc-ledger__total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--navy);
}

.kc-ledger__total .lbl { font-size: 13px; font-weight: 700; color: var(--navy); }
.kc-ledger__total .val { font-size: 18px; font-weight: 700; color: var(--forest); text-align: right; }

.kc-ledger__foot {
  margin: 16px 0 0 !important;
  font-size: 11px !important;
  color: var(--faint) !important;
  font-style: italic;
}

.kc-ledger__try {
  margin: 14px 0 0 !important;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px !important;
}

.kc-ledger__try a { color: var(--link); }

/* ==========================================================================
   7. TRUST STRIP
   ========================================================================== */

.kc-trust .wp-block-columns { gap: 24px; }
.kc-trust p { font-size: 12.5px !important; line-height: 1.55; margin: 0 !important; }

.kc-trust-num {
  font-family: var(--font-mono);
  font-size: 11px !important;
  font-weight: 700;
  color: var(--forest) !important;
  margin: 0 0 5px !important;
}

/* ==========================================================================
   8. SECTION HEADS AND CARDS
   ========================================================================== */

.kc-section-head {
  width: 100%;
  max-width: 560px;
  margin-inline: 0;
}

/*
  GeneratePress and WordPress core can apply a narrower block-content width to
  nested groups/columns. These homepage components are deliberately allowed to
  use the complete inner band canvas, while their paragraphs remain readable.
*/
.kc-band > .wp-block-columns,
.kc-band > .kc-cards {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
}

.kc-section-head h2 { margin-block: 0 0.35em; }
.kc-section-head p { font-size: 14px !important; color: var(--muted) !important; margin: 0 !important; }

.kc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 28px;
  margin-block-start: 40px;
}

.kc-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.kc-card__title {
  font-family: var(--font-head);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}

.kc-card__title a { color: inherit; }
.kc-card__title a:hover { color: var(--forest); text-decoration: underline; }

.kc-card__text {
  font-size: 12.5px !important;
  line-height: 1.6;
  color: var(--muted) !important;
  margin: 0 !important;
}

.kc-card--soon {
  background: transparent;
  border-style: dashed;
  border-color: #C7C2B2;
  justify-content: center;
}

.kc-card--soon .kc-card__title { color: #A9A395; }
.kc-card--soon .kc-card__text { color: #A9A395 !important; }

/* ==========================================================================
   9. BUTTONS
   ========================================================================== */

.kc-btn {
  display: inline-block;
  background: var(--forest);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  text-decoration: none !important;
}

.kc-btn:hover { background: var(--forest-bright); color: var(--white); }
.kc-btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.kc-btn--full { display: block; width: 100%; }

.kc-btn--ghost {
  background: transparent;
  color: var(--forest) !important;
  border-color: var(--forest);
  font-size: 12.5px;
  padding: 9px 15px;
  margin-block-start: 4px;
}

.kc-btn--ghost:hover { background: var(--forest); color: var(--white) !important; }

/* The CTA band uses core button blocks; restyle them to match. */
.kc-band--green .wp-block-button__link {
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.kc-band--green .wp-block-button__link:hover { background: var(--light-green); }
.kc-band--green > .wp-block-columns {
  width: 100%;
  max-width: var(--max-width);
  align-items: center;
  gap: clamp(28px, 6vw, 84px);
}

.kc-band--green .wp-block-column:last-child {
  display: flex;
  justify-content: flex-end;
}

.kc-band--green .wp-block-buttons { margin: 0; }

/* ==========================================================================
   10. CALCULATOR
   ========================================================================== */

.kc-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.kc-calc__form {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin: 0;
}

.kc-calc__kicker {
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: 1.3px;
  color: var(--muted) !important;
  margin: 0 0 20px !important;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--hairline);
}

.kc-calc__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.kc-calc__field { min-width: 0; }
.kc-calc__field.is-full { grid-column: 1 / -1; }

.kc-calc__field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #3A3A34;
  margin-bottom: 7px;
}

.kc-input {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-family: var(--font-mono);
  font-size: 16px; /* 16px stops iOS Safari zooming the page on focus. */
  background: var(--parchment);
  color: var(--charcoal);
  min-height: 46px;
}

.kc-input:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(31, 111, 84, 0.18);
}

.kc-calc__hint {
  font-size: 11.5px !important;
  line-height: 1.5;
  color: #9A9486 !important;
  margin: 14px 0 0 !important;
  max-width: none;
}

.kc-calc__form .kc-btn { margin-top: 20px; }

.kc-calc__result {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 28px 30px 24px;
}

.kc-calc__result-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px !important;
  letter-spacing: 1.3px;
  color: #8B93A8 !important;
  margin: 0 0 16px !important;
}

.kc-calc__row,
.kc-calc__total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.kc-calc__row {
  font-size: 13px;
  color: #C7CBD6;
  padding-block: 9px;
  border-bottom: 1px dotted #2A3654;
}

.kc-calc__row .val { color: var(--white); text-align: right; }

.kc-calc__total {
  align-items: baseline;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid var(--forest-bright);
}

.kc-calc__total .lbl { font-size: 14px; font-weight: 700; color: var(--white); }
.kc-calc__total .val { font-size: 22px; font-weight: 700; color: var(--sage); text-align: right; }

.kc-calc__note {
  margin: 18px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.6;
  color: #8B93A8 !important;
  font-style: italic;
  max-width: none;
}

/* Editor-only notice when a slug has no registry entry. */
.kc-notice {
  border: 1px dashed #b32d2e;
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: 13px;
  color: #b32d2e;
  background: #fff;
}

/* ==========================================================================
   11. CONTENT COMPONENTS
   ========================================================================== */

/* Formula box: a group block with the kc-formula class. */
.kc-formula {
  background: var(--parchment);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 18px 22px;
}

.kc-band--white .kc-formula { background: var(--parchment); }

.kc-formula p {
  font-family: var(--font-mono);
  font-size: 13px !important;
  line-height: 1.9;
  color: var(--navy) !important;
  margin: 0 !important;
  max-width: none;
}

/* Source note: a paragraph with the kc-source class. */
.kc-source {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px !important;
  line-height: 1.7;
  color: var(--faint) !important;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 10px 14px;
}

/* Tables. Scrollable rather than squashed on narrow screens. */
.kc-content .wp-block-table { overflow-x: auto; margin-block: 0 1.4em; }

.kc-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--white);
  min-width: 460px;
}

.kc-content .wp-block-table :is(th, td) {
  border: 1px solid var(--hairline);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
}

.kc-content .wp-block-table th {
  background: var(--parchment);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--navy);
}

/* FAQ: a group block with the kc-faq class. Its headings and paragraphs are
   also what inc/schema.php reads to build FAQPage structured data. */
.kc-faq > h3 {
  font-size: 16px !important;
  margin: 0 0 8px !important;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.kc-faq > h3:first-child { padding-top: 0; border-top: 0; }
.kc-faq > p { font-size: 13.5px !important; margin: 0 0 18px !important; }
.kc-faq > *:last-child { margin-bottom: 0 !important; }

/* Table of contents on legal pages. */
.kc-toc {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 20px 24px;
}

.kc-toc p {
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: 1px;
  color: var(--forest) !important;
  margin: 0 0 10px !important;
}

.kc-toc ul { columns: 2; margin: 0; padding-left: 18px; }
.kc-toc li { font-size: 13px !important; margin-bottom: 8px; }

/* Contact and suggest layouts use a two-column block. */
.kc-form-panel {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 28px;
}

.kc-email {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px !important;
  color: var(--forest) !important;
}

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
  :root { --max-width: 960px; }
  .kc-hero { padding-block: 52px 60px; }
  .kc-hero .wp-block-columns { gap: 32px; }
}

/* Two-across trust strip and cards before the full stack. */
@media (min-width: 601px) and (max-width: 900px) {
  .kc-trust .wp-block-column { flex-basis: calc(50% - 12px) !important; flex-grow: 0; }
}

/* Calculator stacks before the columns do, so the result card stays readable. */
@media (max-width: 900px) {
  .kc-calc { grid-template-columns: 1fr; gap: 22px; }
}

/* WordPress stacks core columns at 781px; match the rest of the design to it. */
@media (max-width: 900px) {
  .kc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
  .kc-hero .wp-block-columns { gap: 34px; }
  .kc-hero .kc-lede { max-width: none; }
  .kc-band--green .wp-block-columns { gap: 24px; }
  .kc-band--green .wp-block-column:last-child { justify-content: flex-start; }
  .kc-band--green .wp-block-buttons { justify-content: flex-start; }
  .kc-band--green .wp-block-button,
  .kc-band--green .wp-block-button__link { width: 100%; }
}

/* Phone */
@media (max-width: 700px) {
  .kc-hero { padding-block: 44px 52px; }
  .kc-content h1 { font-size: clamp(26px, 7vw, 32px); }
  .kc-ledger { padding: 22px 18px 18px; }
  .kc-calc__form { padding: 22px 18px; }
  .kc-calc__result { padding: 22px 20px 20px; }
  .kc-toc ul { columns: 1; }
  .kc-content .wp-block-table table { min-width: 420px; }
}

@media (max-width: 540px) {
  .kc-calc__fields { grid-template-columns: 1fr; }
  .kc-calc__field.is-half { grid-column: 1 / -1; }
  .kc-cards { grid-template-columns: 1fr; gap: 18px; }
}

/* Very narrow phones: keep the headline figure on one line. */
@media (max-width: 400px) {
  .kc-ledger__total .lbl,
  .kc-calc__total .lbl { font-size: 12px; white-space: nowrap; }
  .kc-ledger__total .val { font-size: 15px; white-space: nowrap; }
  .kc-calc__total .val { font-size: 17px; white-space: nowrap; }
}

/* ==========================================================================
   13. QUALITY FLOOR
   ========================================================================== */

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   15. V2 VISUAL COMPATIBILITY FOR GUTENBERG CONTENT
   --------------------------------------------------------------------------
   v2 used a 1040px .kc-wrap, left-aligned readable copy, and deliberate
   parchment/white section bands. This layer applies the same visual geometry
   to v3 editor blocks without moving any copy out of WordPress.
   ========================================================================== */

.kc-layout .site-content,
.kc-layout .site-content > .grid-container,
.kc-layout .site-content > .content-area,
.kc-layout .site-content .content-area,
.kc-layout #primary.kc-main,
.kc-content {
  background: var(--parchment);
}

/* Direct editor copy follows the v2 left edge instead of being auto-centred. */
.kc-content > :is(p, ul, ol, h2, h3, h4, .wp-block-table) {
  max-width: 900px;
  margin-inline: 0;
}

/* Calculator/article bands retain a broad, stable reading column. */
.kc-band:not(.kc-hero) > :is(p, h1, h2, h3, h4, .wp-block-table, .kc-formula, .kc-source) {
  max-width: 900px;
  margin-inline: 0;
}

.kc-band > .kc-section-head {
  width: 100%;
  max-width: 560px;
  margin-inline: 0;
}

.kc-band > .kc-faq {
  width: 100%;
  max-width: 900px;
  margin-inline: 0;
}

.kc-band > .kc-faq p {
  max-width: 900px;
  text-align: justify;
  text-justify: inter-word;
}

/* Keep the green CTA compact like v2 rather than stretching its copy. */
.kc-band--green > .wp-block-columns p {
  max-width: 460px;
  text-align: left;
}

/* The parchment background is the intentional v2 canvas; white bands are
   deliberate separators for the intro/trust/explainer areas. */
.kc-band { background: var(--parchment); }
.kc-band--white { background: var(--white); }
.kc-band--navy { background: var(--navy); }
.kc-band--green { background: var(--forest); }

@media (max-width: 700px) {
  .kc-content > :is(p, ul, ol, h2, h3, h4, .wp-block-table),
  .kc-band:not(.kc-hero) > :is(p, h1, h2, h3, h4, .wp-block-table, .kc-formula, .kc-source),
  .kc-band > .kc-faq,
  .kc-band > .kc-faq p {
    max-width: none;
    width: 100%;
  }

  .kc-content > :is(p, ul, ol),
  .kc-band:not(.kc-hero) > p,
  .kc-band > .kc-faq p {
    text-align: left;
    text-justify: auto;
  }
}

/* ==========================================================================
   16. HOMEPAGE BAND GEOMETRY — LIVE GENERATEPRESS OVERRIDE
   --------------------------------------------------------------------------
   GeneratePress adds 40px padding to every .wp-block-group__inner-container.
   In v3 the Gutenberg group is the direct child of each kc-band, so the
   earlier direct-child width rules could not reach the actual columns/cards.
   This is intentionally scoped to .kc-front; calculator and content pages
   retain their existing v2-style page frame.
   ========================================================================== */

.kc-front #page {
  background: var(--white);
}

.kc-front .site-content,
.kc-front #primary.kc-main,
.kc-front .kc-content {
  background: var(--white);
}

.kc-front .site-content {
  padding-block: 0;
}

/* The homepage content field is white. Navy and green remain the intentional
   accent bands; parchment remains visible only outside the page frame. */
.kc-front .kc-band:not(.kc-band--navy):not(.kc-band--green) {
  background: var(--white);
}

/* The white page frame remains centred; the navy and green bands fill it from
   edge to edge. The grey/parchment remains outside the frame and in the body
   canvas, matching the requested v2 appearance. */
.kc-front .kc-band > .wp-block-group__inner-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.kc-front .kc-band > .wp-block-group__inner-container > :is(.wp-block-columns, .kc-cards) {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
}

.kc-front .kc-band > .wp-block-group__inner-container > .kc-section-head {
  width: 100%;
  max-width: 760px;
  margin-inline: 0;
}

.kc-front .kc-band > .wp-block-group__inner-container > .kc-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.kc-front .kc-band--green > .wp-block-group__inner-container > .wp-block-columns {
  align-items: center;
}

@media (max-width: 781px) {
  .kc-front .kc-band > .wp-block-group__inner-container > :is(.wp-block-columns, .kc-cards),
  .kc-front .kc-band > .wp-block-group__inner-container > .kc-section-head {
    width: 100%;
    max-width: none;
  }
}

@media print {
  .kc-breadcrumb,
  .kc-calc__form .kc-btn,
  .kc-band--green { display: none; }
  .kc-band { padding-block: 12px; background: none; }
}

/* ==========================================================================
   14. BLOCK EDITOR
   ========================================================================== */

.editor-styles-wrapper .kc-band {
  padding-block: 28px;
  border-radius: 6px;
}

.editor-styles-wrapper .kc-editor-preview .kc-calc { pointer-events: none; }


/* ==========================================================================
   17. INTERNAL PAGE GEOMETRY — V2 HEADER/BODY ALIGNMENT
   --------------------------------------------------------------------------
   About, Contact, Privacy, Terms, Disclaimer, and calculator pages share the
   same Gutenberg wrapper. GeneratePress adds padding to each group’s inner
   container, which makes authored title bands shrink to an intrinsic centred
   width and makes two-column sections narrower than the v2 .kc-wrap. Release
   only internal kc-bands from that padding and align their children to the
   same 1040px frame used by the breadcrumb and calculator grid.
   ========================================================================== */
.kc-layout:not(.kc-front) .kc-band > .wp-block-group__inner-container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0;
}

.kc-layout:not(.kc-front) .kc-band > .wp-block-group__inner-container > * {
  min-width: 0;
}

.kc-layout:not(.kc-front) .kc-band > .wp-block-group__inner-container > :is(h1, h2, h3, h4, p, ul, ol, .wp-block-columns, .kc-formula, .kc-source, .kc-faq) {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: 0;
}

/* Authored Gutenberg title bands now share the body/calculator left edge. */
.kc-layout:not(.kc-front) .kc-band > .wp-block-group__inner-container > h1,
.kc-layout:not(.kc-front) .kc-band > .wp-block-group__inner-container > .kc-lede {
  text-align: left;
}

/* The fallback H1 in page.php is outside .kc-content, so give it the same
   1040px width as the breadcrumb and calculator panels. */
.kc-layout:not(.kc-front) .kc-page-head > .kc-page-title {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  text-align: left;
}

/* Legal/content prose and calculator explanations share one stable left edge. */
.kc-layout:not(.kc-front) .kc-content > :is(p, ul, ol, h2, h3, h4, .wp-block-table) {
  width: 100%;
  max-width: 900px;
  margin-inline: 0;
}

/* Contact and other two-column editor sections use the full v2 inner frame. */
.kc-layout:not(.kc-front) .kc-content > .kc-band .wp-block-columns {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: 0;
}

/* GeneratePress also pads non-band group interiors, such as the legal TOC and
   form panel. Their own component rules already provide the intended padding. */
.kc-layout:not(.kc-front) .kc-content > .wp-block-group:not(.kc-band) > .wp-block-group__inner-container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0;
}

@media (max-width: 781px) {
  .kc-layout:not(.kc-front) .kc-band > .wp-block-group__inner-container > :is(h1, h2, h3, h4, p, ul, ol, .wp-block-columns, .kc-formula, .kc-source, .kc-faq),
  .kc-layout:not(.kc-front) .kc-content > :is(p, ul, ol, h2, h3, h4, .wp-block-table) {
    width: 100%;
    max-width: none;
  }

  .kc-layout:not(.kc-front) .kc-page-head > .kc-page-title {
    max-width: none;
  }
}


/* ==========================================================================
   18. WHITE INTERNAL PAGE CANVAS
   --------------------------------------------------------------------------
   The homepage and all internal pages use the same white main canvas. Parchment
   remains available for small component boxes such as formula/source panels,
   while navy and forest remain intentional emphasis surfaces.
   ========================================================================== */
.kc-layout:not(.kc-front) #page,
.kc-layout:not(.kc-front) .site-content,
.kc-layout:not(.kc-front) #primary.kc-main,
.kc-layout:not(.kc-front) .kc-content {
  background: var(--white);
}

.kc-layout:not(.kc-front) .kc-band:not(.kc-band--navy):not(.kc-band--green) {
  background: var(--white);
}

/* Keep the page canvas white around content panels; retain parchment only in
   intentionally inset components rather than as the entire article backdrop. */
.kc-layout:not(.kc-front) .kc-formula,
.kc-layout:not(.kc-front) .kc-source,
.kc-layout:not(.kc-front) .kc-toc,
.kc-layout:not(.kc-front) .kc-form-panel {
  background: var(--white);
}

.kc-layout:not(.kc-front) .kc-calc__form,
.kc-layout:not(.kc-front) .kc-calc__result {
  background: var(--white);
}

.kc-layout:not(.kc-front) .kc-calc__result {
  background: var(--navy);
}


/* ==========================================================================
   19. PROFESSIONAL INTERNAL TITLE PANELS
   --------------------------------------------------------------------------
   Keep internal title bands full-width while compacting their vertical height.
   The title and lede remain in a narrower readable frame inside the band. This
   applies to the authored Gutenberg title band and page.php fallback H1.
   ========================================================================== */
.kc-layout:not(.kc-front) .kc-band.kc-page-head:not(.kc-band--navy):not(.kc-band--green),
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-block: 12px;
  background: #EEF3F8;
  border-block: 1px solid #D6E0EA;
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
}

.kc-layout:not(.kc-front) .kc-page-head > .kc-page-title,
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > .wp-block-group__inner-container > :is(h1, .kc-lede),
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > :is(h1, .kc-lede) {
  width: 100%;
  max-width: 900px;
  margin-inline: 0;
}

.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > .wp-block-group__inner-container {
  width: 100%;
  max-width: none;
  padding: 0;
}

.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child :is(h1, h2, h3, h4) {
  margin-block-start: 0;
  margin-block-end: 10px;
}

.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child .kc-lede {
  max-width: 900px;
  margin-block-end: 0;
  color: #536579;
}

/* A small separation after the title band prevents the first paragraph from
   visually colliding with the header while keeping the page compact. */
.kc-layout:not(.kc-front) .kc-band.kc-page-head:not(.kc-band--navy):not(.kc-band--green),
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child {
  margin-bottom: 18px;
}

/* Warm off-white breadcrumb band: distinct from the white page canvas without
   competing with the title band. */
.kc-layout:not(.kc-front) .kc-breadcrumb {
  background: #F7F5EF;
  border-block: 1px solid #E7E1D4;
  color: #647080;
}

.kc-layout:not(.kc-front) .kc-breadcrumb .current {
  color: var(--navy);
}

/* Professional reading typography. Inter is used for prose; Lora remains the
   display face for headings. */
.kc-layout:not(.kc-front) .kc-content > :is(p, ul, ol),
.kc-layout:not(.kc-front) .kc-content > .wp-block-group p,
.kc-layout:not(.kc-front) .kc-content > .kc-band:not(.kc-page-head) p {
  font-size: 16px;
  line-height: 1.7;
  text-align: justify;
}

.kc-layout:not(.kc-front) .kc-content > :is(h2, h3, h4) {
  letter-spacing: -0.01em;
}


.kc-layout:not(.kc-front) .kc-page-head .kc-page-title,
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child :is(h1, h2, h3, h4) {
  color: var(--navy);
}

.kc-layout:not(.kc-front) .kc-page-head .kc-page-title,
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child h1 {
  letter-spacing: -0.015em;
}

.kc-layout:not(.kc-front) .kc-page-head .kc-lede,
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child .kc-lede {
  max-width: 860px;
  color: #59677A;
}

@media (max-width: 700px) {
  .kc-layout:not(.kc-front) .kc-band.kc-page-head:not(.kc-band--navy):not(.kc-band--green),
  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child {
    padding-block: 20px;
  }

  .kc-layout:not(.kc-front) .kc-band.kc-page-head:not(.kc-band--navy):not(.kc-band--green) > .kc-page-title,
  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > .wp-block-group__inner-container > :is(h1, .kc-lede),
  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > :is(h1, .kc-lede) {
    max-width: none;
    margin-inline: 0;
  }

  .kc-layout:not(.kc-front) .kc-content > :is(p, ul, ol),
  .kc-layout:not(.kc-front) .kc-content > .wp-block-group p,
  .kc-layout:not(.kc-front) .kc-content > .kc-band:not(.kc-page-head) p {
    text-align: left;
  }
}


/* ==========================================================================
   17. HOMEPAGE LIBRARY + CTA REFINEMENT
   --------------------------------------------------------------------------
   The library and CTA are intentionally compact. These rules are scoped to
   .kc-front so internal calculator and legal pages keep their own geometry.
   ========================================================================== */

/* Use a broad but readable library heading and description. */
.kc-front .kc-band > .wp-block-group__inner-container > .kc-section-head {
  max-width: 900px;
  margin-inline: auto;
}

.kc-front .kc-band > .wp-block-group__inner-container > .kc-section-head p {
  max-width: 900px;
  margin-block-end: 0 !important;
  color: #536579 !important;
  text-align: justify;
  text-justify: inter-word;
}

/* Reduce the gap above the cards and keep both cards at a controlled height. */
.kc-front .kc-band > .wp-block-group__inner-container > .kc-cards {
  margin-block-start: 24px;
  gap: 22px;
  align-items: stretch;
}

.kc-front .kc-cards .kc-card {
  min-height: 0;
  padding: 18px 20px;
  gap: 6px;
  border-radius: 7px;
}

.kc-front .kc-cards .kc-card__title {
  font-size: 17px;
  line-height: 1.3;
}

.kc-front .kc-cards .kc-card__text {
  color: #536579 !important;
  font-size: 13px !important;
  line-height: 1.55;
  text-align: justify;
  text-justify: inter-word;
}

/* The suggestion card must remain visibly actionable, not washed out. */
.kc-front .kc-cards .kc-card--soon {
  background: #F8FBF9;
  border-color: #B8D4C5;
  justify-content: flex-start;
}

.kc-front .kc-cards .kc-card--soon .kc-card__title {
  color: #14213D;
}

.kc-front .kc-cards .kc-card--soon .kc-card__text {
  color: #536579 !important;
}

.kc-front .kc-cards .kc-card--soon .kc-btn {
  display: inline-block;
  align-self: flex-start;
  margin-block-start: 6px;
  background: #1F6F54;
  color: #FFFFFF !important;
  border-color: #1F6F54;
  font-weight: 700;
}

.kc-front .kc-cards .kc-card--soon .kc-btn:hover,
.kc-front .kc-cards .kc-card--soon .kc-btn:focus-visible {
  background: #15553F;
  color: #FFFFFF !important;
}

/* Shorter green CTA band with a clearly visible amber action button. */
.kc-front .kc-band--green {
  padding-block: 30px;
}

.kc-front .kc-band--green > .wp-block-group__inner-container > .wp-block-columns {
  min-height: 0;
  gap: 36px;
}

.kc-front .kc-band--green > .wp-block-group__inner-container > .wp-block-columns h2 {
  margin-block: 0 6px;
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.2;
}

.kc-front .kc-band--green > .wp-block-group__inner-container > .wp-block-columns p {
  max-width: 620px;
  margin-block: 0;
  color: #E5F0EA;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}

.kc-front .kc-band--green .wp-block-button__link {
  background: #F6C65B;
  color: #14213D !important;
  border: 1px solid #D9A936;
  box-shadow: 0 2px 0 rgba(20, 33, 61, 0.16);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  white-space: nowrap;
}

.kc-front .kc-band--green .wp-block-button__link:hover,
.kc-front .kc-band--green .wp-block-button__link:focus-visible {
  background: #FFD979;
  color: #14213D !important;
}

@media (max-width: 781px) {
  .kc-front .kc-band > .wp-block-group__inner-container > .kc-section-head {
    max-width: none;
  }

  .kc-front .kc-band > .wp-block-group__inner-container > .kc-section-head p,
  .kc-front .kc-cards .kc-card__text {
    text-align: left;
    text-justify: auto;
  }

  .kc-front .kc-band--green {
    padding-block: 26px;
  }

  .kc-front .kc-band--green > .wp-block-group__inner-container > .wp-block-columns p {
    max-width: none;
  }
}


/* Final homepage compactness and contrast overrides. */
.kc-front .kc-section-head > .wp-block-group__inner-container {
  padding: 0;
}

.kc-front .kc-band > .wp-block-group__inner-container > .kc-section-head p {
  width: 100%;
  max-width: 900px;
}

.kc-front .kc-cards .kc-card {
  padding: 16px 18px;
  height: 170px;
  overflow: hidden;
}

.kc-front .kc-cards .kc-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.kc-front .kc-band--green {
  padding-block: 18px;
}

.kc-front .kc-band--green .wp-block-button__link {
  background: #F6C65B !important;
  color: #14213D !important;
  border-color: #D9A936 !important;
}

.kc-front .kc-band--green .wp-block-button__link:hover,
.kc-front .kc-band--green .wp-block-button__link:focus-visible {
  background: #FFD979 !important;
  color: #14213D !important;
}

@media (max-width: 781px) {
  .kc-front .kc-cards .kc-card {
    height: auto;
    min-height: 0;
  }
}


/* ========================================================================== 
   20. NEUTRAL, CONSISTENT INTERNAL TITLE STRIPS
   --------------------------------------------------------------------------
   The internal header is a structural alignment area, not a colored card. Keep
   its background indistinguishable from the white page, standardize authored
   and fallback header heights, and use the same readable heading frame.
   ========================================================================== */
.kc-layout:not(.kc-front) .kc-band.kc-page-head:not(.kc-band--navy):not(.kc-band--green),
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child {
  width: 100%;
  max-width: none;
  min-height: 99px;
  margin: 0 0 18px;
  padding-block: 10px;
  box-sizing: border-box;
  background: var(--white) !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
}

/* Both authored and fallback titles use the same 900px readable frame. */
.kc-layout:not(.kc-front) .kc-page-head > .kc-page-title,
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > .wp-block-group__inner-container > :is(h1, .kc-lede),
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > :is(h1, .kc-lede) {
  width: 100%;
  max-width: 900px;
  margin-inline: 0;
}

.kc-layout:not(.kc-front) .kc-page-head > .kc-page-title,
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child :is(h1, h2, h3, h4) {
  color: var(--navy) !important;
}

/* Keep the authored title and fallback calculator title visually equivalent. */
.kc-layout:not(.kc-front) .kc-page-head .kc-page-title {
  margin-block: 0;
  line-height: 1.18;
}

.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child :is(h1, h2, h3, h4) {
  margin-block: 0 6px;
  line-height: 1.18;
}

.kc-layout:not(.kc-front) .kc-page-head .kc-lede,
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child .kc-lede {
  margin-block: 4px 0;
  color: #59677A;
}

/* Neutral internal bands should disappear into the white page canvas. */
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child::before,
.kc-layout:not(.kc-front) .kc-page-head::before,
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child::after,
.kc-layout:not(.kc-front) .kc-page-head::after {
  display: none;
}

@media (max-width: 700px) {
  .kc-layout:not(.kc-front) .kc-band.kc-page-head:not(.kc-band--navy):not(.kc-band--green),
  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child {
    min-height: 0;
    padding-block: 14px;
    margin-bottom: 14px;
  }

  .kc-layout:not(.kc-front) .kc-page-head > .kc-page-title,
  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > .wp-block-group__inner-container > :is(h1, .kc-lede),
  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > :is(h1, .kc-lede) {
    max-width: none;
  }
}


/* ========================================================================== 
   21. NEXT VISUAL POLISH — CONTACT, CALCULATOR STACK, AND PROSE BALANCE
   --------------------------------------------------------------------------
   This final override layer keeps all copy in Gutenberg and all calculator
   behavior in the existing dynamic block. It changes presentation only.
   ========================================================================== */

/* Compact neutral title strips and a controlled gap before the next section. */
.kc-layout:not(.kc-front) .kc-band.kc-page-head:not(.kc-band--navy):not(.kc-band--green),
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child {
  min-height: 99px;
  margin-bottom: 12px;
  padding: 10px 0 16px;
  background: var(--white) !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
}

.kc-layout:not(.kc-front) .kc-page-head > .kc-page-title,
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > .wp-block-group__inner-container > :is(h1, .kc-lede),
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > :is(h1, .kc-lede) {
  width: 100%;
  max-width: 900px;
  margin-inline: 0;
}

.kc-layout:not(.kc-front) .kc-page-head > .kc-page-title,
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child :is(h1, h2, h3, h4) {
  color: var(--navy) !important;
}

.kc-layout:not(.kc-front) .kc-page-head .kc-page-title {
  margin-block: 0;
  line-height: 1.18;
}

.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child :is(h1, h2, h3, h4) {
  margin-block: 0 6px;
  line-height: 1.18;
}

.kc-layout:not(.kc-front) .kc-page-head .kc-lede,
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child .kc-lede {
  margin-block: 4px 0;
  color: #59677A;
}

/* Reduce the extra vertical air at the start of the first content band. */
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child + .kc-band,
.kc-layout:not(.kc-front) .kc-page-head + .kc-band {
  padding-block-start: 38px;
}

.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child + :not(.kc-band),
.kc-layout:not(.kc-front) .kc-page-head + :not(.kc-band) {
  margin-block-start: 12px;
}

/* Contact: retain the existing form shortcode but give it a light panel surface. */
.kc-layout:not(.kc-front) .kc-content > .kc-band > .wp-block-group__inner-container > .wp-block-columns {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  align-items: flex-start;
}

.kc-layout:not(.kc-front) .kc-content > .kc-band > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:first-child {
  flex-basis: 44% !important;
}

.kc-layout:not(.kc-front) .kc-content > .kc-band > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:last-child {
  flex-basis: 56% !important;
}

.kc-layout:not(.kc-front) .kc-form-panel {
  background: #F7FAF8 !important;
  border: 1px solid #C8DED3;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(20, 33, 61, 0.07);
}

.kc-layout:not(.kc-front) .kc-content > .kc-band > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column > :is(p, ul, ol) {
  width: 100%;
  max-width: none;
  text-align: justify;
  text-justify: inter-word;
}

/* Calculator: the result window follows the form in a centered, wider stack. */
.kc-layout:not(.kc-front) .kc-calc {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  justify-content: center;
  gap: 24px;
  align-items: stretch;
}

.kc-layout:not(.kc-front) .kc-calc__form,
.kc-layout:not(.kc-front) .kc-calc__result {
  width: 100%;
  max-width: none;
}

.kc-layout:not(.kc-front) .kc-calc__form {
  background: var(--white);
}

.kc-layout:not(.kc-front) .kc-calc__result {
  background: var(--navy);
}

/* Internal prose uses the complete 1040px frame, balancing the outer margins. */
.kc-layout:not(.kc-front) .kc-content > :is(p, ul, ol, h2, h3, h4, .wp-block-table),
.kc-layout:not(.kc-front) .kc-content > .kc-band:not(.kc-page-head) > .wp-block-group__inner-container > :is(p:not(.kc-source), ul, ol, h2, h3, h4, .wp-block-table),
.kc-layout:not(.kc-front) .kc-content > .kc-band:not(.kc-page-head) > .kc-faq {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: 0;
}

.kc-layout:not(.kc-front) .kc-content > :is(p, ul, ol),
.kc-layout:not(.kc-front) .kc-content > .kc-band:not(.kc-page-head) > .wp-block-group__inner-container > :is(p:not(.kc-source), ul, ol),
.kc-layout:not(.kc-front) .kc-content > .kc-band:not(.kc-page-head) > .kc-faq > p {
  text-align: justify;
  text-justify: inter-word;
}

.kc-layout:not(.kc-front) .kc-content > .kc-band:not(.kc-page-head) > .wp-block-group__inner-container > .kc-faq > p {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: 0;
}

@media (max-width: 781px) {
  .kc-layout:not(.kc-front) .kc-content > .kc-band > .wp-block-group__inner-container > .wp-block-columns {
    display: flex;
    flex-direction: column;
  }

  .kc-layout:not(.kc-front) .kc-content > .kc-band > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }

  .kc-layout:not(.kc-front) .kc-calc {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 20px;
  }
}

@media (max-width: 700px) {
  .kc-layout:not(.kc-front) .kc-band.kc-page-head:not(.kc-band--navy):not(.kc-band--green),
  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child {
    min-height: 0;
    padding-block: 14px;
    margin-bottom: 12px;
  }

  .kc-layout:not(.kc-front) .kc-page-head > .kc-page-title,
  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > .wp-block-group__inner-container > :is(h1, .kc-lede),
  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > :is(h1, .kc-lede) {
    max-width: none;
  }

  .kc-layout:not(.kc-front) .kc-content > :is(p, ul, ol),
  .kc-layout:not(.kc-front) .kc-content > .kc-band:not(.kc-page-head) > .wp-block-group__inner-container > :is(p:not(.kc-source), ul, ol),
  .kc-layout:not(.kc-front) .kc-content > .kc-band:not(.kc-page-head) > .kc-faq > p,
  .kc-layout:not(.kc-front) .kc-content > .kc-band > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column > :is(p, ul, ol) {
    text-align: left;
    text-justify: auto;
  }

  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child + .kc-band,
  .kc-layout:not(.kc-front) .kc-page-head + .kc-band {
    padding-block-start: 28px;
  }
}


/* ========================================================================== 
   22. INTERNAL PAGE SPACING CORRECTION — HEADER, BREADCRUMB, AND TITLES
   --------------------------------------------------------------------------
   This layer corrects vertical rhythm and restores one shared heading frame
   across fallback calculator headers and authored Gutenberg title bands.
   ========================================================================== */

/* The blank strip below the site header becomes a deliberate 8px breathing gap. */
.kc-layout:not(.kc-front) .site-content {
  padding-top: 8px !important;
}

/* Keep the breadcrumb for navigation/SEO, but make its surrounding gap compact. */
.kc-layout:not(.kc-front) .kc-breadcrumb {
  margin: 0 0 8px !important;
  padding-block: 8px;
}

/* Restore the heading to the same centered 1040px frame used by page content. */
.kc-layout:not(.kc-front) .kc-page-head > .kc-page-title,
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > .wp-block-group__inner-container > :is(h1, .kc-lede),
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > :is(h1, .kc-lede) {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
}

/* Compact, neutral strips with a small controlled separation below the H1. */
.kc-layout:not(.kc-front) .kc-band.kc-page-head:not(.kc-band--navy):not(.kc-band--green),
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child {
  min-height: 99px;
  margin-bottom: 8px;
  padding: 8px 0 12px;
  background: var(--white) !important;
  border: 0 !important;
  box-shadow: none;
}

.kc-layout:not(.kc-front) .kc-page-head > .kc-page-title,
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child :is(h1, h2, h3, h4) {
  color: var(--navy) !important;
}

/* Remove the inherited 60px first-child margin that creates the red-marked gap. */
.kc-layout:not(.kc-front) .kc-content > .kc-band:not(.kc-page-head) > .wp-block-group__inner-container > :first-child,
.kc-layout:not(.kc-front) .kc-content > :is(p, ul, ol):first-of-type {
  margin-block-start: 0 !important;
}

/* Keep only a small, intentional gap between a title band and its first section. */
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child + .kc-band,
.kc-layout:not(.kc-front) .kc-page-head + .kc-band {
  padding-block-start: 18px;
}

@media (max-width: 781px) {
  .kc-layout:not(.kc-front) .kc-page-head > .kc-page-title,
  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > .wp-block-group__inner-container > :is(h1, .kc-lede),
  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child > :is(h1, .kc-lede) {
    width: calc(100% - (2 * var(--gutter)));
    max-width: none;
    margin-inline: auto;
  }

  .kc-layout:not(.kc-front) .kc-band.kc-page-head:not(.kc-band--navy):not(.kc-band--green),
  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child {
    min-height: 0;
    padding-block: 12px;
    margin-bottom: 8px;
  }

  .kc-layout:not(.kc-front) .kc-content > .kc-band:not(.kc-page-head) > .wp-block-group__inner-container > :first-child,
  .kc-layout:not(.kc-front) .kc-content > :is(p, ul, ol):first-of-type {
    margin-block-start: 0 !important;
  }
}

@media (max-width: 700px) {
  .kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child + .kc-band,
  .kc-layout:not(.kc-front) .kc-page-head + .kc-band {
    padding-block-start: 14px;
  }
}


/* ========================================================================== 
   23. PROFESSIONAL TYPOGRAPHY — COMPACT 1.5 BODY RHYTHM
   --------------------------------------------------------------------------
   Body copy uses the user-approved 1.5 line-height. Headings retain a tighter
   display rhythm, while paragraph and section gaps remain deliberate rather
   than browser-default. No copy, calculator logic, or Gutenberg markup changes.
   ========================================================================== */

/* Compact but readable body copy: 15px type with 22.5px line boxes. */
.kc-layout .kc-content p,
.kc-layout .kc-content li {
  line-height: 1.5;
}

.kc-layout .kc-content p {
  margin-block-end: 16px;
}

/* A professional heading rhythm without excessive air before the next paragraph. */
.kc-layout .kc-content h1 {
  line-height: 1.18;
}

.kc-layout .kc-content h2 {
  line-height: 1.2;
  margin-block-end: 14px;
}

.kc-layout .kc-content h3,
.kc-layout .kc-content h4 {
  line-height: 1.25;
  margin-block-end: 14px;
}

/* Preserve the compact title-band relationship between H1 and its lede. */
.kc-layout:not(.kc-front) .kc-content > .kc-band.kc-band--white:first-child :is(h1, h2, h3, h4) {
  line-height: 1.18;
  margin-block-end: 10px;
}

/* Keep the first explanatory paragraph close to the title/calculator section. */
.kc-layout:not(.kc-front) .kc-content > .kc-band:not(.kc-page-head) > .wp-block-group__inner-container > :first-child,
.kc-layout:not(.kc-front) .kc-content > :is(p, ul, ol):first-of-type {
  margin-block-start: 0 !important;
}

@media (max-width: 781px) {
  .kc-layout .kc-content h2,
  .kc-layout .kc-content h3,
  .kc-layout .kc-content h4 {
    margin-block-end: 12px;
  }
}


/* ========================================================================== 
   23. MOBILE LIST-MARKER INDENT — BULLET-ONLY POLISH
   --------------------------------------------------------------------------
   Gutenberg lists on narrow internal pages inherit zero inline padding, which
   places their markers against the phone edge. Add only the marker gutter;
   navigation, desktop layouts, text, headings, and calculator panels remain
   unchanged.
   ========================================================================== */
@media (max-width: 700px) {
  .kc-layout:not(.kc-front) .kc-content ul.wp-block-list,
  .kc-layout:not(.kc-front) .kc-content ol.wp-block-list {
    margin-inline-start: 0 !important;
    padding-inline-start: 1.35rem !important;
    list-style-position: outside;
  }

  .kc-layout:not(.kc-front) .kc-content ul.wp-block-list li,
  .kc-layout:not(.kc-front) .kc-content ol.wp-block-list li {
    padding-inline-start: 0.15rem !important;
  }
}

/* ===========================================================================
   24. ROOF SQUARE FOOTAGE CALCULATOR — SURVEYOR'S FIELD WORKSHEET
   ---------------------------------------------------------------------------
   Design contract: a transparent high-contrast worksheet that extends the
   active Key Calculators system. Every rule is scoped to .kc-roof-calc so the
   existing .kc-calc and house-repiping calculator remain untouched.
   =========================================================================== */
.kc-roof-calc { width: 100%; color: var(--ink); font-family: var(--font-body); }
.kc-roof-calc *, .kc-roof-calc *::before, .kc-roof-calc *::after { box-sizing: border-box; }
.kc-roof-calc__shell { width: 100%; }
.kc-roof-calc :is(h2, h3, h4) { color: var(--navy) !important; font-family: var(--font-head); font-weight: 700; }
.kc-roof-calc p { max-width: none !important; margin: 0 !important; color: var(--muted) !important; line-height: 1.55 !important; text-align: left !important; }
.kc-roof-calc__intro { max-width: 800px; margin: 0 0 26px; }
.kc-roof-calc__intro h2 { margin: 0 0 8px !important; font-size: clamp(23px, 3.1vw, 30px) !important; line-height: 1.2 !important; }
.kc-roof-calc__eyebrow, .kc-roof-calc__index { display: block; color: var(--forest) !important; font-family: var(--font-mono); font-size: 10.5px !important; font-weight: 700; letter-spacing: 1.35px; line-height: 1.35 !important; text-transform: uppercase; }
.kc-roof-calc__intro .kc-roof-calc__eyebrow { margin-bottom: 8px !important; }

.kc-roof-calc__layout { display: grid; grid-template-columns: minmax(240px, .65fr) minmax(0, 1.7fr); gap: 26px; align-items: start; }
.kc-roof-calc__rail { display: grid; gap: 16px; position: sticky; top: 24px; }
.kc-roof-calc__rail-intro { padding: 20px 4px 4px; }
.kc-roof-calc__rail-intro .kc-roof-calc__eyebrow { margin-bottom: 7px !important; }
.kc-roof-calc__rail-intro h2 { margin: 0 0 8px !important; font-size: 19px !important; line-height: 1.28 !important; }
.kc-roof-calc__safety, .kc-roof-calc__quote-callout { display: grid; gap: 4px; padding: 14px 15px; border: 1px solid #B8D4C5; border-radius: var(--radius-sm); background: #F3F9F6; color: #315747; font-size: 12px; line-height: 1.5; }
.kc-roof-calc__safety strong, .kc-roof-calc__quote-callout strong { color: var(--forest); }
.kc-roof-calc__allowance, .kc-roof-calc__workspace, .kc-roof-calc__ledger { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--white); }
.kc-roof-calc__allowance { padding: 18px; }
.kc-roof-calc__allowance h3 { margin: 0 0 15px !important; font-size: 16px !important; }
.kc-roof-calc__allowance > p { margin-top: 13px !important; color: var(--faint) !important; font-size: 11.5px !important; }
.kc-roof-calc__main { min-width: 0; }
.kc-roof-calc__workspace { padding: clamp(18px, 3vw, 30px); }
.kc-roof-calc__workspace-head, .kc-roof-calc__mode-head, .kc-roof-calc__ledger-head, .kc-roof-calc__section-head, .kc-roof-calc__preset-row, .kc-roof-calc__quote-total { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.kc-roof-calc__workspace-head { margin-bottom: 18px; }
.kc-roof-calc__workspace-head .kc-roof-calc__eyebrow, .kc-roof-calc__ledger-head .kc-roof-calc__eyebrow, .kc-roof-calc__mode-head .kc-roof-calc__eyebrow { margin-bottom: 5px !important; }
.kc-roof-calc__workspace-head h2 { margin: 0 !important; font-size: 22px !important; line-height: 1.24 !important; }
.kc-roof-calc__live, .kc-roof-calc__tag, .kc-roof-calc__precision { flex: 0 0 auto; border: 1px solid #B8D4C5; border-radius: 999px; background: #F3F9F6; color: var(--forest); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .3px; line-height: 1; padding: 7px 9px; white-space: nowrap; }

.kc-roof-calc__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0 0 22px; padding: 3px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--parchment); }
.kc-roof-calc__tab { min-height: 43px; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1.2; transition: background-color 160ms cubic-bezier(.23,1,.32,1), color 160ms cubic-bezier(.23,1,.32,1), transform 160ms cubic-bezier(.23,1,.32,1); }
.kc-roof-calc__tab span { display: block; margin-bottom: 3px; color: var(--faint); font-family: var(--font-mono); font-size: 9px; letter-spacing: .8px; }
.kc-roof-calc__tab:hover { background: rgba(255,255,255,.7); color: var(--navy); }
.kc-roof-calc__tab.is-active { background: var(--navy); color: var(--white); box-shadow: 0 2px 5px rgba(20,33,61,.14); }
.kc-roof-calc__tab.is-active span { color: var(--sage); }
.kc-roof-calc__tab:active, .kc-roof-calc__secondary-button:active, .kc-roof-calc__ledger-toggle:active { transform: scale(.97); }
.kc-roof-calc__mode-head { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--hairline); }
.kc-roof-calc__mode-head h3 { margin: 0 0 4px !important; font-size: 20px !important; line-height: 1.25 !important; }
.kc-roof-calc__mode-head p:not(.kc-roof-calc__eyebrow) { font-size: 13px !important; }

.kc-roof-calc__field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kc-roof-calc__field-grid--pitch { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.kc-roof-calc__field-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kc-roof-calc__field { min-width: 0; }
.kc-roof-calc__field label { display: block; margin: 0 0 6px; color: #3A3A34; font-size: 12px; font-weight: 700; }
.kc-roof-calc__field :is(input, select), .kc-roof-calc__quote-row > input, .kc-roof-calc__rate-wrap input { width: 100%; min-height: 43px; margin: 0; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--parchment); color: var(--charcoal); font-family: var(--font-mono); font-size: 14px; padding: 9px 11px; }
.kc-roof-calc__field select { appearance: auto; }
.kc-roof-calc__field :is(input, select):focus, .kc-roof-calc__quote-row > input:focus, .kc-roof-calc__rate-wrap input:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(31,111,84,.16); }
.kc-roof-calc__field input:disabled { cursor: not-allowed; background: #EDEAE2; color: #8A8880; }
.kc-roof-calc__input-wrap { position: relative; }
.kc-roof-calc__input-wrap input { padding-right: 54px; }
.kc-roof-calc__unit { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: var(--faint); font-family: var(--font-mono); font-size: 10.5px; pointer-events: none; }
.kc-roof-calc__field-hint { margin-top: 5px !important; color: var(--faint) !important; font-size: 10.5px !important; line-height: 1.35 !important; }

.kc-roof-calc__section-card { padding: 18px; border: 1px solid var(--hairline); border-radius: 8px; background: #FCFBF8; }
.kc-roof-calc__sections-stack { display: grid; gap: 14px; margin-bottom: 14px; }
.kc-roof-calc__section-head { align-items: flex-start; margin-bottom: 16px; }
.kc-roof-calc__section-head .kc-roof-calc__field { margin-top: 4px; }
.kc-roof-calc__section-head .kc-roof-calc__field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kc-roof-calc__section-name input { min-height: 34px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: transparent; color: var(--navy); font-family: var(--font-head); font-size: 17px; font-weight: 700; }
.kc-roof-calc__section-name input:focus { border-bottom-color: var(--forest); box-shadow: none; }
.kc-roof-calc__text-button { border: 0; background: transparent; color: #8B4B40; cursor: pointer; font-family: var(--font-mono); font-size: 11px; padding: 5px; text-decoration: underline; text-underline-offset: 2px; }
.kc-roof-calc__secondary-button, .kc-roof-calc__ledger-toggle { display: inline-block; border: 1px solid var(--forest); border-radius: var(--radius-sm); background: transparent; color: var(--forest); cursor: pointer; font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1.2; padding: 10px 13px; transition: background-color 160ms cubic-bezier(.23,1,.32,1), color 160ms cubic-bezier(.23,1,.32,1), transform 160ms cubic-bezier(.23,1,.32,1); }
.kc-roof-calc__secondary-button:hover, .kc-roof-calc__ledger-toggle:hover { background: var(--forest); color: var(--white); }
.kc-roof-calc__secondary-button:disabled { border-color: var(--hairline); color: var(--faint); cursor: not-allowed; }

.kc-roof-calc__preset-row { align-items: center; margin-top: 14px; }
.kc-roof-calc__preset-row > span { color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; }
.kc-roof-calc__preset-row > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.kc-roof-calc__preset { border: 1px solid var(--hairline); border-radius: 4px; background: var(--white); color: var(--muted); cursor: pointer; font-family: var(--font-mono); font-size: 10px; padding: 5px 6px; }
.kc-roof-calc__preset small { color: var(--faint); font-size: 9px; }
.kc-roof-calc__preset.is-active { border-color: var(--forest); background: var(--forest); color: var(--white); }
.kc-roof-calc__preset.is-active small { color: var(--light-green); }

.kc-roof-calc__section-divider { height: 1px; margin: 22px 0; background: var(--hairline); }
.kc-roof-calc__subhead { margin: 0 0 13px; }
.kc-roof-calc__subhead h4 { margin: 0 0 3px !important; font-size: 15px !important; }
.kc-roof-calc__subhead p { color: var(--faint) !important; font-size: 11.5px !important; }
.kc-roof-calc__material-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 0 0 18px; border: 1px solid #CBD8D0; border-radius: 7px; background: #CBD8D0; }
.kc-roof-calc__material-hero > div { padding: 14px; background: #F3F9F6; }
.kc-roof-calc__material-hero span, .kc-roof-calc__result-grid span { display: block; color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2px; }
.kc-roof-calc__material-hero strong { display: block; margin-top: 3px; color: var(--forest); font-family: var(--font-head); font-size: 23px; line-height: 1.2; }
.kc-roof-calc__material-hero strong small { color: inherit; font-family: var(--font-mono); font-size: 11px; }
.kc-roof-calc__material-hero small { color: var(--faint); font-size: 10.5px; }
.kc-roof-calc__inline-error { margin: 12px 0 !important; color: #9A4032 !important; font-size: 12px !important; }
.kc-roof-calc__takeoff-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: 20px; border: 1px solid var(--hairline); border-radius: 7px; background: var(--hairline); }
.kc-roof-calc__takeoff-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 57px; padding: 10px 12px; background: var(--white); }
.kc-roof-calc__takeoff-list span { color: var(--ink); font-size: 12px; font-weight: 700; }
.kc-roof-calc__takeoff-list small { display: block; margin-top: 2px; color: var(--faint); font-family: var(--font-mono); font-size: 9.5px; font-weight: 400; line-height: 1.3; }
.kc-roof-calc__takeoff-list strong { color: var(--forest); font-family: var(--font-mono); font-size: 16px; }

.kc-roof-calc__quote-callout { margin: 0 0 18px; }
.kc-roof-calc__quote-table { display: grid; gap: 7px; margin-bottom: 14px; }
.kc-roof-calc__quote-row { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(80px, .55fr) minmax(90px, .72fr) minmax(86px, .72fr); gap: 8px; align-items: center; }
.kc-roof-calc__quote-head { color: var(--faint); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.kc-roof-calc__quote-row > input, .kc-roof-calc__rate-wrap input { min-height: 39px; padding: 8px; font-size: 12px; }
.kc-roof-calc__rate-wrap { position: relative; display: block; }
.kc-roof-calc__rate-wrap b { position: absolute; z-index: 1; top: 50%; left: 8px; transform: translateY(-50%); color: var(--faint); font-family: var(--font-mono); font-size: 12px; pointer-events: none; }
.kc-roof-calc__rate-wrap input { padding-left: 20px; }
.kc-roof-calc__quote-row > strong { color: var(--forest); font-family: var(--font-mono); font-size: 12px; text-align: right; }
.kc-roof-calc__quote-total { align-items: baseline; margin-top: 20px; padding: 15px 0 0; border-top: 2px solid var(--navy); color: var(--navy); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.kc-roof-calc__quote-total strong { color: var(--forest); font-size: 23px; }

.kc-roof-calc__ledger { margin-top: 22px; overflow: hidden; }
.kc-roof-calc__ledger-head { padding: 20px 22px; border-bottom: 1px solid var(--hairline); }
.kc-roof-calc__ledger-head h2 { margin: 0 !important; font-size: 20px !important; }
.kc-roof-calc__result-hero { padding: 22px; background: var(--navy); }
.kc-roof-calc__result-hero > span { color: #B9C1D0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; }
.kc-roof-calc__result-hero strong { display: block; margin: 5px 0; color: var(--white); font-family: var(--font-head); font-size: clamp(29px, 4vw, 39px); line-height: 1.1; }
.kc-roof-calc__result-hero strong small { color: var(--sage); font-family: var(--font-mono); font-size: 13px; }
.kc-roof-calc__result-hero p { color: #B9C1D0 !important; font-size: 12px !important; }
.kc-roof-calc__error { margin: 18px 22px 0; padding: 11px 12px; border-left: 3px solid #AF4C3E; background: #FFF3F1; color: #853829; font-size: 12px; line-height: 1.45; }
.kc-roof-calc__result-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--hairline); }
.kc-roof-calc__result-grid > div { min-height: 122px; padding: 16px; border-right: 1px solid var(--hairline); }
.kc-roof-calc__result-grid > div:last-child { border-right: 0; }
.kc-roof-calc__result-grid strong { display: block; margin: 7px 0 4px; color: var(--navy); font-family: var(--font-head); font-size: 18px; line-height: 1.1; }
.kc-roof-calc__result-grid small { display: block; color: var(--faint); font-size: 10.5px; line-height: 1.35; }
.kc-roof-calc__result-grid .kc-roof-calc__result-accent { background: #F3F9F6; }
.kc-roof-calc__result-grid .kc-roof-calc__result-accent strong { color: var(--forest); }
.kc-roof-calc__ledger-toggle { margin: 16px 22px; }
.kc-roof-calc__breakdown { margin: 0 22px 22px; padding: 16px; border: 1px solid var(--hairline); border-radius: 7px; background: #FCFBF8; }
.kc-roof-calc__breakdown-title { margin-bottom: 8px; color: var(--navy); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.kc-roof-calc__breakdown-row { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 2fr); gap: 12px; padding: 9px 0; border-top: 1px dotted var(--hairline); font-size: 12px; }
.kc-roof-calc__breakdown-row span { color: var(--ink); font-weight: 700; }
.kc-roof-calc__breakdown-row code { color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; overflow-wrap: anywhere; }
.kc-roof-calc__breakdown-row.is-total { border-top-style: solid; color: var(--navy); }
.kc-roof-calc__breakdown p { margin-top: 12px !important; color: var(--faint) !important; font-size: 10.5px !important; }

@media (max-width: 1040px) {
  .kc-roof-calc__layout { grid-template-columns: 1fr; }
  .kc-roof-calc__rail { grid-template-columns: 1.1fr .9fr; position: static; }
  .kc-roof-calc__rail-intro { grid-row: span 2; padding: 8px 4px; }
  .kc-roof-calc__allowance { grid-column: 2; }
}
@media (max-width: 760px) {
  .kc-roof-calc__intro { margin-bottom: 18px; }
  .kc-roof-calc__rail { grid-template-columns: 1fr; }
  .kc-roof-calc__rail-intro { grid-row: auto; }
  .kc-roof-calc__allowance { grid-column: auto; }
  .kc-roof-calc__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-roof-calc__field-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-roof-calc__result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-roof-calc__result-grid > div:nth-child(2) { border-right: 0; }
  .kc-roof-calc__result-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 560px) {
  .kc-roof-calc__workspace { padding: 17px; }
  .kc-roof-calc__workspace-head, .kc-roof-calc__mode-head, .kc-roof-calc__ledger-head { display: block; }
  .kc-roof-calc__live, .kc-roof-calc__tag, .kc-roof-calc__precision { display: inline-block; margin-top: 10px; }
  .kc-roof-calc__field-grid, .kc-roof-calc__field-grid--pitch, .kc-roof-calc__field-grid--three, .kc-roof-calc__takeoff-list, .kc-roof-calc__material-hero { grid-template-columns: 1fr; }
  .kc-roof-calc__section-card { padding: 14px; }
  .kc-roof-calc__quote-head { display: none; }
  .kc-roof-calc__quote-row { grid-template-columns: 1fr .8fr .9fr; padding: 10px; border: 1px solid var(--hairline); border-radius: 6px; background: #FCFBF8; }
  .kc-roof-calc__quote-row > input:first-child { grid-column: 1 / -1; }
  .kc-roof-calc__quote-row > strong { text-align: left; }
  .kc-roof-calc__result-grid > div { min-height: 108px; }
  .kc-roof-calc__breakdown { margin: 0 14px 14px; padding: 13px; }
  .kc-roof-calc__breakdown-row { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .kc-roof-calc *, .kc-roof-calc *::before, .kc-roof-calc *::after { transition-duration: .01ms !important; } }

/* ===========================================================================
   CALCULATOR PAGE SHARED FRAME — SAFE GENERIC ALIGNMENT
   Scope: registered native calculator pages only.
   This block deliberately avoids grouped pseudo-class selectors and CSS multiplication so it remains
   compatible with the Hostinger editor and standard browser CSS parsers.
   =========================================================================== */
.kc-layout.kc-calculator-page .kc-page-head,
.kc-layout.kc-calculator-page .kc-content > .kc-band.kc-band--white:first-child {
  min-height: 0;
  margin-bottom: 0;
}

.kc-layout.kc-calculator-page .kc-page-head {
  padding-top: 20px;
  padding-bottom: 10px;
}

.kc-layout.kc-calculator-page .kc-content > .kc-band.kc-band--white:first-child {
  padding-top: 10px;
  padding-bottom: 24px;
}

.kc-layout.kc-calculator-page .kc-page-head > .kc-page-title,
.kc-layout.kc-calculator-page .kc-content > .kc-band.kc-band--white:first-child > .wp-block-group__inner-container > h1,
.kc-layout.kc-calculator-page .kc-content > .kc-band.kc-band--white:first-child > .wp-block-group__inner-container > .kc-lede,
.kc-layout.kc-calculator-page .kc-content > .kc-band.kc-band--white:first-child > h1,
.kc-layout.kc-calculator-page .kc-content > .kc-band.kc-band--white:first-child > .kc-lede,
.kc-layout.kc-calculator-page .kc-content > .kc-band:not(.kc-page-head) > .wp-block-group__inner-container > .kc-calc,
.kc-layout.kc-calculator-page .kc-content > .kc-band:not(.kc-page-head) > .wp-block-group__inner-container > .kc-advanced-calc {
  width: calc(100% - var(--gutter) - var(--gutter));
  max-width: var(--max-width);
  margin-left: auto !important;
  margin-right: auto !important;
}

.kc-layout.kc-calculator-page .kc-content > .kc-band:first-child:not(.kc-band--white) {
  padding-top: 24px;
}

@media (max-width: 781px) {
  .kc-layout.kc-calculator-page .kc-page-head {
    padding-top: 16px;
    padding-bottom: 8px;
  }

  .kc-layout.kc-calculator-page .kc-content > .kc-band.kc-band--white:first-child {
    padding-top: 8px;
    padding-bottom: 20px;
  }

  .kc-layout.kc-calculator-page .kc-content > .kc-band:first-child:not(.kc-band--white) {
    padding-top: 20px;
  }
}

/* Key Calculators design system — Hardie siding worksheet only: clear, homeowner-facing, transparent cost planning. */
.kc-hardie-calc { --hc-navy: #122438; --hc-forest: #1E5A47; --hc-sage: #DDEBDF; --hc-ink: #1C2A35; --hc-muted: #63717B; --hc-line: #D9E0DF; --hc-paper: #FCFCF9; --hc-warm: #F5F1E8; --hc-alert: #8D3D33; color: var(--hc-ink); font-family: var(--font-body); }
.kc-hardie-calc *, .kc-hardie-calc *::before, .kc-hardie-calc *::after { box-sizing: border-box; }
.kc-hardie-calc__shell { padding: clamp(19px, 3vw, 38px); border: 1px solid var(--hc-line); border-radius: 9px; background: var(--hc-paper); box-shadow: 0 12px 28px rgba(18, 36, 56, .06); }
.kc-hardie-calc__intro { max-width: 760px; margin: 0 0 26px; }
.kc-hardie-calc__intro > span, .kc-hardie-calc__mode-head > span, .kc-hardie-calc__ledger-head > span { color: var(--hc-forest); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.05px; text-transform: uppercase; }
.kc-hardie-calc__intro h2 { margin: 7px 0 8px !important; color: var(--hc-navy); font-family: var(--font-head); font-size: clamp(29px, 4vw, 43px) !important; line-height: 1.05 !important; }
.kc-hardie-calc__intro p { max-width: 665px; margin: 0 !important; color: var(--hc-muted) !important; font-size: 15px !important; line-height: 1.6 !important; }
.kc-hardie-calc__layout { display: grid; grid-template-columns: minmax(0, 1.53fr) minmax(285px, .83fr); gap: 22px; align-items: start; }
.kc-hardie-calc__workspace, .kc-hardie-calc__ledger { overflow: hidden; border: 1px solid var(--hc-line); border-radius: 7px; background: #fff; }
.kc-hardie-calc__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--hc-line); background: #F8F9F7; }
.kc-hardie-calc__tab { min-height: 68px; padding: 10px 8px; border: 0; border-right: 1px solid var(--hc-line); border-radius: 0; background: transparent; color: var(--hc-muted); font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1.2; text-align: left; cursor: pointer; transition: color 150ms ease-out, background 150ms ease-out; }
.kc-hardie-calc__tab:last-child { border-right: 0; }
.kc-hardie-calc__tab span { display: block; width: 20px; height: 20px; margin-bottom: 6px; border: 1px solid #B4C4BA; border-radius: 50%; color: var(--hc-forest); font-family: var(--font-mono); font-size: 10px; line-height: 18px; text-align: center; }
.kc-hardie-calc__tab:hover { background: #EEF4F0; color: var(--hc-navy); }
.kc-hardie-calc__tab.is-active { background: #fff; color: var(--hc-navy); box-shadow: inset 0 3px 0 var(--hc-forest); }
.kc-hardie-calc__tab.is-active span { border-color: var(--hc-forest); background: var(--hc-forest); color: #fff; }
.kc-hardie-calc__view { padding: clamp(18px, 3vw, 29px); }
.kc-hardie-calc__mode-head { margin-bottom: 20px; }
.kc-hardie-calc__mode-head h3 { margin: 5px 0 7px !important; color: var(--hc-navy); font-family: var(--font-head); font-size: 25px !important; line-height: 1.15 !important; }
.kc-hardie-calc__mode-head p { margin: 0 !important; color: var(--hc-muted) !important; font-size: 13px !important; line-height: 1.55 !important; }
.kc-hardie-calc__group { margin-top: 19px; padding: 18px; border: 1px solid var(--hc-line); border-radius: 6px; background: #FDFDFC; }
.kc-hardie-calc__group > h4 { margin: 0 0 15px !important; color: var(--hc-navy); font-family: var(--font-head); font-size: 18px !important; }
.kc-hardie-calc__section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.kc-hardie-calc__section-head h4 { margin: 0 0 4px !important; color: var(--hc-navy); font-family: var(--font-head); font-size: 18px !important; }
.kc-hardie-calc__section-head p, .kc-hardie-calc__empty { margin: 0 !important; color: var(--hc-muted) !important; font-size: 12px !important; line-height: 1.5 !important; }
.kc-hardie-calc button[data-action="add"] { flex: 0 0 auto; padding: 9px 11px; border: 1px solid var(--hc-forest); border-radius: 4px; background: #fff; color: var(--hc-forest); font-family: var(--font-body); font-size: 12px; font-weight: 800; cursor: pointer; }
.kc-hardie-calc button[data-action="add"]:hover { background: var(--hc-forest); color: #fff; }
.kc-hardie-calc button:disabled { cursor: not-allowed; opacity: .45; }
.kc-hardie-calc__stack { display: grid; gap: 10px; }
.kc-hardie-calc__row { padding: 14px; border: 1px solid var(--hc-line); border-radius: 5px; background: #fff; }
.kc-hardie-calc__row header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kc-hardie-calc__row header > span { color: var(--hc-navy); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .65px; text-transform: uppercase; }
.kc-hardie-calc__row header strong { margin-left: auto; color: var(--hc-forest); font-family: var(--font-mono); font-size: 11px; }
.kc-hardie-calc__row header button { padding: 3px 0; border: 0; background: transparent; color: var(--hc-alert); font-family: var(--font-body); font-size: 11px; font-weight: 700; cursor: pointer; }
.kc-hardie-calc__field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kc-hardie-calc__field-grid--one { grid-template-columns: minmax(0, 280px); }
.kc-hardie-calc__field { min-width: 0; }
.kc-hardie-calc__field > label { display: block; margin: 0 0 5px; color: var(--hc-ink); font-size: 11px; font-weight: 800; }
.kc-hardie-calc__field small { display: block; margin-top: 5px; color: var(--hc-muted); font-size: 10.5px; line-height: 1.35; }
.kc-hardie-calc__input { display: flex; overflow: hidden; border: 1px solid #BCC9C1; border-radius: 4px; background: #fff; }
.kc-hardie-calc input, .kc-hardie-calc select { width: 100%; min-height: 39px; border: 1px solid #BCC9C1; border-radius: 4px; background: #fff; color: var(--hc-ink); font-family: var(--font-body); font-size: 13px; }
.kc-hardie-calc input { min-width: 0; padding: 8px 9px; border: 0; outline: none; }
.kc-hardie-calc select { padding: 7px 8px; }
.kc-hardie-calc input:focus, .kc-hardie-calc select:focus { outline: 2px solid rgba(30, 90, 71, .25); outline-offset: 1px; }
.kc-hardie-calc__input:focus-within { border-color: var(--hc-forest); }
.kc-hardie-calc__input span { display: flex; align-items: center; padding: 0 8px; border-left: 1px solid #D8E0DA; background: #F5F8F5; color: var(--hc-muted); font-family: var(--font-mono); font-size: 10px; white-space: nowrap; }
.kc-hardie-calc__toggle { display: flex !important; align-items: center; gap: 7px; margin-top: 6px !important; color: var(--hc-muted) !important; font-size: 11px !important; font-weight: 700 !important; }
.kc-hardie-calc__toggle input { width: 14px; min-height: 14px; accent-color: var(--hc-forest); }
.kc-hardie-calc__muted-field { padding: 8px 9px; border: 1px dashed #C7D1CA; border-radius: 4px; background: #F8FAF8; }
.kc-hardie-calc__muted-field p { margin: 0 !important; color: var(--hc-muted) !important; font-size: 11px !important; line-height: 1.45 !important; }
.kc-hardie-calc__error { margin: 16px 0 0 !important; padding: 11px 12px; border-left: 3px solid var(--hc-alert); background: #FFF3F1; color: var(--hc-alert) !important; font-size: 12px !important; line-height: 1.45 !important; }
.kc-hardie-calc__notice { margin-top: 18px; padding: 12px; border-left: 3px solid #B07A22; background: #FFF8E8; color: #6B501D; font-size: 12px; line-height: 1.45; }
.kc-hardie-calc__coverage-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 15px; border: 1px solid var(--hc-line); border-radius: 5px; overflow: hidden; }
.kc-hardie-calc__coverage-cards > div { min-height: 90px; padding: 13px; border-right: 1px solid var(--hc-line); }
.kc-hardie-calc__coverage-cards > div:last-child { border-right: 0; background: #EEF6F0; }
.kc-hardie-calc__coverage-cards span, .kc-hardie-calc__ledger-grid span, .kc-hardie-calc__hero-result span, .kc-hardie-calc__cost-list span, .kc-hardie-calc__quote span { display: block; color: var(--hc-muted); font-size: 10.5px; line-height: 1.25; }
.kc-hardie-calc__coverage-cards strong { display: block; margin-top: 8px; color: var(--hc-navy); font-family: var(--font-head); font-size: 20px; line-height: 1.1; }
.kc-hardie-calc__coverage-cards small, .kc-hardie-calc__ledger-grid small, .kc-hardie-calc__hero-result small { font-family: var(--font-mono); font-size: 10px; }
.kc-hardie-calc__side { position: sticky; top: 24px; display: grid; gap: 14px; }
.kc-hardie-calc__ledger-head { padding: 18px 18px 15px; border-bottom: 1px solid var(--hc-line); }
.kc-hardie-calc__ledger-head h3 { margin: 5px 0 0 !important; color: var(--hc-navy); font-family: var(--font-head); font-size: 21px !important; line-height: 1.1 !important; }
.kc-hardie-calc__ledger > p { padding: 18px; margin: 0 !important; color: var(--hc-muted) !important; font-size: 13px !important; line-height: 1.55 !important; }
.kc-hardie-calc__ledger-error { color: var(--hc-alert) !important; }
.kc-hardie-calc__ledger-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--hc-line); }
.kc-hardie-calc__ledger-grid > div { padding: 13px; border-right: 1px solid var(--hc-line); border-bottom: 1px solid var(--hc-line); }
.kc-hardie-calc__ledger-grid > div:nth-child(2n) { border-right: 0; }
.kc-hardie-calc__ledger-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.kc-hardie-calc__ledger-grid strong { display: block; margin-top: 6px; color: var(--hc-navy); font-family: var(--font-head); font-size: 18px; line-height: 1.1; }
.kc-hardie-calc__hero-result { padding: 19px; background: var(--hc-navy); }
.kc-hardie-calc__hero-result span, .kc-hardie-calc__hero-result p { color: #C9D4D9 !important; }
.kc-hardie-calc__hero-result strong { display: block; margin: 5px 0; color: #fff; font-family: var(--font-head); font-size: 33px; line-height: 1.05; }
.kc-hardie-calc__hero-result strong small { color: #B6D9C1; }
.kc-hardie-calc__hero-result p { margin: 0 !important; font-size: 11px !important; line-height: 1.45 !important; }
.kc-hardie-calc__cost-list { padding: 6px 18px 0; }
.kc-hardie-calc__cost-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dotted var(--hc-line); font-size: 12px; }
.kc-hardie-calc__cost-list strong { color: var(--hc-navy); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.kc-hardie-calc__cost-list .kc-hardie-calc__total { margin: 8px -18px 0; padding: 15px 18px; border-bottom: 0; background: #EEF6F0; }
.kc-hardie-calc__cost-list .kc-hardie-calc__total span { color: var(--hc-forest); font-family: var(--font-mono); font-weight: 800; letter-spacing: .45px; text-transform: uppercase; }
.kc-hardie-calc__cost-list .kc-hardie-calc__total strong { color: var(--hc-forest); font-family: var(--font-head); font-size: 25px; }
.kc-hardie-calc__quote { margin: 16px 18px 0; padding: 13px; border: 1px solid #BFD3C4; border-radius: 5px; background: #F3F8F4; }
.kc-hardie-calc__quote strong { display: block; margin: 4px 0; color: var(--hc-forest); font-family: var(--font-head); font-size: 22px; }
.kc-hardie-calc__quote p, .kc-hardie-calc__ledger-note { margin: 0 !important; color: var(--hc-muted) !important; font-size: 10.5px !important; line-height: 1.45 !important; }
.kc-hardie-calc__ledger-note { padding: 16px 18px !important; }
.kc-hardie-calc__disclosure { padding: 14px 15px; border-left: 3px solid #B07A22; background: #FFF9EA; color: #635021; font-size: 11px; line-height: 1.5; }
.kc-hardie-calc__disclosure strong { color: #624713; }
@media (max-width: 1040px) { .kc-hardie-calc__layout { grid-template-columns: 1fr; } .kc-hardie-calc__side { position: static; grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr); align-items: start; } }
@media (max-width: 720px) { .kc-hardie-calc__shell { padding: 16px; } .kc-hardie-calc__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kc-hardie-calc__tab:nth-child(2) { border-right: 0; } .kc-hardie-calc__tab:nth-child(-n+2) { border-bottom: 1px solid var(--hc-line); } .kc-hardie-calc__field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kc-hardie-calc__side { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .kc-hardie-calc__section-head { display: block; } .kc-hardie-calc button[data-action="add"] { margin-top: 11px; } .kc-hardie-calc__field-grid, .kc-hardie-calc__field-grid--one, .kc-hardie-calc__coverage-cards { grid-template-columns: 1fr; } .kc-hardie-calc__coverage-cards > div { border-right: 0; border-bottom: 1px solid var(--hc-line); } .kc-hardie-calc__coverage-cards > div:last-child { border-bottom: 0; } .kc-hardie-calc__view { padding: 16px; } .kc-hardie-calc__group { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .kc-hardie-calc *, .kc-hardie-calc *::before, .kc-hardie-calc *::after { transition-duration: .01ms !important; } }

/* ===========================================================================
   25. LAND CLEARING COST CALCULATOR — SITE PLANNING WORKSHEET
   Added 2026-09-01. Appended only; nothing above this line was changed.

   Scope: every rule below is prefixed with .kc-land-clearing-calc, which is
   emitted by kc_render_calculator_block() for the registered mount key
   'land-clearing'. No rule here can reach the homepage, About, Contact,
   posts, or any other calculator.

   Uses the shared tokens from section 1 rather than a private palette, so the
   worksheet inherits the site's colours and type automatically if a token is
   ever retuned. Follows the .kc-roof-calc / .kc-hardie-calc conventions.

   No page-level width, max-width, or left margin is set here. Framing belongs
   to the CALCULATOR PAGE SHARED FRAME block above.
   =========================================================================== */

.kc-land-clearing-calc { width: 100%; color: var(--ink); font-family: var(--font-body); }
.kc-land-clearing-calc *, .kc-land-clearing-calc *::before, .kc-land-clearing-calc *::after { box-sizing: border-box; }

/* --- shell and two-column grid ------------------------------------------ */

.kc-land-clearing-calc .kc-lc {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
  gap: 26px;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
}

.kc-land-clearing-calc h2,
.kc-land-clearing-calc h3 {
  color: var(--navy) !important;
  font-family: var(--font-head);
  font-weight: 700;
}

.kc-land-clearing-calc p {
  max-width: none !important;
  margin: 0 !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

/* --- form ---------------------------------------------------------------- */

.kc-land-clearing-calc .kc-lc-form { display: block; min-width: 0; }

.kc-land-clearing-calc .kc-lc-section {
  margin: 0 0 20px;
  padding: 14px 0 0;
  border: 0;
  border-top: 2px solid var(--forest);
}

.kc-land-clearing-calc .kc-lc-section legend {
  padding: 0 8px 0 0;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.kc-land-clearing-calc .kc-lc-field { display: block; margin: 0 0 13px; }

.kc-land-clearing-calc .kc-lc-field label {
  display: block;
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.kc-land-clearing-calc .kc-lc-field input,
.kc-land-clearing-calc .kc-lc-field select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3;
}

.kc-land-clearing-calc .kc-lc-field input:focus,
.kc-land-clearing-calc .kc-lc-field select:focus,
.kc-land-clearing-calc .kc-lc-check input:focus {
  outline: 3px solid var(--forest-bright);
  outline-offset: 1px;
}

.kc-land-clearing-calc .kc-lc-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
}

.kc-land-clearing-calc .kc-lc-check input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--forest);
}

.kc-land-clearing-calc .kc-lc-check label {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.kc-land-clearing-calc .kc-lc-help {
  display: block;
  margin: -5px 0 11px;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.45;
}

/* --- result panel -------------------------------------------------------- */

.kc-land-clearing-calc .kc-lc-result {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--parchment);
}

.kc-land-clearing-calc .kc-lc-output { min-width: 0; }

.kc-land-clearing-calc .kc-lc-h3 {
  margin: 22px 0 9px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.kc-land-clearing-calc .kc-lc-total { padding: 19px; background: var(--navy); }

.kc-land-clearing-calc .kc-lc-total span {
  display: block;
  color: #C9D4D9;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.kc-land-clearing-calc .kc-lc-total strong {
  display: block;
  margin: 6px 0;
  color: var(--white);
  font-family: var(--font-head);
  font-size: clamp(24px, 3.4vw, 33px);
  line-height: 1.05;
}

.kc-land-clearing-calc .kc-lc-total small { color: #B6D9C1; font-size: 11.5px; line-height: 1.45; }

.kc-land-clearing-calc .kc-lc-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 15px 0 4px;
  border: 1px solid var(--hairline);
  background: var(--white);
}

.kc-land-clearing-calc .kc-lc-kpis > span {
  padding: 12px 13px;
  border-right: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.kc-land-clearing-calc .kc-lc-kpis > span:last-child { border-right: 0; }

.kc-land-clearing-calc .kc-lc-kpis strong {
  display: block;
  margin-top: 5px;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.15;
}

.kc-land-clearing-calc .kc-lc-kpis small {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 400;
}

.kc-land-clearing-calc .kc-lc-lines { border-top: 1px solid var(--hairline); }

.kc-land-clearing-calc .kc-lc-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--hairline);
  font-size: 12.5px;
}

.kc-land-clearing-calc .kc-lc-line span { min-width: 0; color: var(--ink); }

.kc-land-clearing-calc .kc-lc-line small {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.kc-land-clearing-calc .kc-lc-line strong {
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: nowrap;
}

.kc-land-clearing-calc .kc-lc-line--context strong { color: var(--muted); font-weight: 600; }

/* --- notices ------------------------------------------------------------- */

.kc-land-clearing-calc .kc-lc-error,
.kc-land-clearing-calc .kc-lc-warning,
.kc-land-clearing-calc .kc-lc-review,
.kc-land-clearing-calc .kc-lc-disclosure {
  margin: 15px 0;
  padding: 13px 15px;
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #FFF9EA;
  color: #635021;
  font-size: 11.5px;
  line-height: 1.5;
}

.kc-land-clearing-calc .kc-lc-error { border-left-color: #A6392A; background: #FCEDE9; color: #6B2A20; }
.kc-land-clearing-calc .kc-lc-review { border-left-color: var(--forest); background: #F1F7F3; color: #29453A; }

.kc-land-clearing-calc .kc-lc-error b,
.kc-land-clearing-calc .kc-lc-warning b,
.kc-land-clearing-calc .kc-lc-review b,
.kc-land-clearing-calc .kc-lc-disclosure b { color: var(--navy); }

.kc-land-clearing-calc .kc-lc-error p,
.kc-land-clearing-calc .kc-lc-warning p,
.kc-land-clearing-calc .kc-lc-review p {
  margin: 5px 0 0 !important;
  color: inherit !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}

.kc-land-clearing-calc .kc-lc-muted { color: var(--faint) !important; font-size: 12px !important; }

/* --- quote check --------------------------------------------------------- */

.kc-land-clearing-calc .kc-lc-quote-output {
  margin-top: 20px;
  padding-top: 6px;
  border-top: 2px solid var(--forest);
}

.kc-land-clearing-calc .kc-lc-quote-result {
  padding: 14px;
  border: 1px solid #BFD3C4;
  border-radius: var(--radius-sm);
  background: #F3F8F4;
}

.kc-land-clearing-calc .kc-lc-quote-result strong {
  display: block;
  margin: 0 0 5px;
  color: var(--forest);
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.1;
}

.kc-land-clearing-calc .kc-lc-quote-result p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}

.kc-land-clearing-calc .kc-lc-quote-result.is-warning { border-left: 3px solid var(--amber); }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1040px) {
  .kc-land-clearing-calc .kc-lc { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 720px) {
  .kc-land-clearing-calc .kc-lc { padding: 16px; }
  .kc-land-clearing-calc .kc-lc-result { padding: 15px; }
  .kc-land-clearing-calc .kc-lc-kpis { grid-template-columns: 1fr; }
  .kc-land-clearing-calc .kc-lc-kpis > span { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .kc-land-clearing-calc .kc-lc-kpis > span:last-child { border-bottom: 0; }
  .kc-land-clearing-calc .kc-lc-line { flex-direction: column; gap: 4px; }
  .kc-land-clearing-calc .kc-lc-line strong { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-land-clearing-calc *, .kc-land-clearing-calc *::before, .kc-land-clearing-calc *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media print {
  .kc-land-clearing-calc .kc-lc { grid-template-columns: 1fr; border: 0; padding: 0; }
  .kc-land-clearing-calc .kc-lc-form { display: none; }
}

/* ===========================================================================
   26. STUMP GRINDING COST CALCULATOR
   Added 2026-09-03. Appended only; nothing above this line was changed.

   Scope: every rule is prefixed with .kc-stump-calc, which kc_render_calculator_block()
   emits for the registered mount key 'stump'. No rule here can reach the
   homepage, About, Contact, posts, or any other calculator.

   Uses the shared tokens from section 1 rather than a private palette.
   No page-level width, max-width, or margin. No grouped :is() selectors.
   =========================================================================== */

.kc-stump-calc { width: 100%; color: var(--ink); font-family: var(--font-body); }
.kc-stump-calc *, .kc-stump-calc *::before, .kc-stump-calc *::after { box-sizing: border-box; }

/* --- shell --- */

.kc-stump-calc .kc-sg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: 26px;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
}

.kc-stump-calc h2, .kc-stump-calc h3 {
  color: var(--navy) !important;
  font-family: var(--font-head);
  font-weight: 700;
}

.kc-stump-calc p {
  max-width: none !important;
  margin: 0 !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

/* --- form --- */

.kc-stump-calc .kc-sg-form { display: block; min-width: 0; }

.kc-stump-calc .kc-sg-section {
  margin: 0 0 20px;
  padding: 14px 0 0;
  border: 0;
  border-top: 2px solid var(--forest);
}

.kc-stump-calc .kc-sg-section legend {
  padding: 0 8px 0 0;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.kc-stump-calc .kc-sg-field { display: block; margin: 0 0 13px; }

.kc-stump-calc .kc-sg-field label {
  display: block;
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.kc-stump-calc .kc-sg-field input,
.kc-stump-calc .kc-sg-field select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3;
}

.kc-stump-calc .kc-sg-field input:focus,
.kc-stump-calc .kc-sg-field select:focus,
.kc-stump-calc .kc-sg-check input:focus,
.kc-stump-calc .kc-sg-add:focus,
.kc-stump-calc .kc-sg-remove button:focus {
  outline: 3px solid var(--forest-bright);
  outline-offset: 1px;
}

.kc-stump-calc .kc-sg-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 13px;
}

.kc-stump-calc .kc-sg-check input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--forest);
}

.kc-stump-calc .kc-sg-check label { color: var(--ink); font-size: 13px; line-height: 1.4; }

.kc-stump-calc .kc-sg-help {
  display: block;
  margin: -5px 0 11px;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.45;
}

/* --- stump rows --- */

.kc-stump-calc .kc-sg-rows { display: block; }

.kc-stump-calc .kc-sg-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  margin: 0 0 12px;
  padding: 13px 13px 2px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--forest);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--parchment);
}

.kc-stump-calc .kc-sg-row .kc-sg-f-label { grid-column: 1 / -1; }

/* Diameter is the field that matters most, so give it its own line on narrow
   grids and keep it visually separated from the selects below. */
.kc-stump-calc .kc-sg-row .kc-sg-f-dia { grid-column: 1 / -1; }
.kc-stump-calc .kc-sg-row .kc-sg-f-dia input { font-weight: 600; }

.kc-stump-calc .kc-sg-remove {
  grid-column: 1 / -1;
  margin: 0 0 11px;
  text-align: right;
}

.kc-stump-calc .kc-sg-remove button,
.kc-stump-calc .kc-sg-add {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.kc-stump-calc .kc-sg-add { border-color: var(--forest); color: var(--forest); }

.kc-stump-calc .kc-sg-remove button:disabled,
.kc-stump-calc .kc-sg-add:disabled {
  color: var(--faint);
  border-color: var(--hairline);
  cursor: not-allowed;
}

.kc-stump-calc .kc-sg-rowactions {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px !important;
}

.kc-stump-calc .kc-sg-count { color: var(--faint); font-size: 11.5px; }

/* --- result panel --- */

.kc-stump-calc .kc-sg-result {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--parchment);
}

.kc-stump-calc .kc-sg-output { min-width: 0; }

.kc-stump-calc .kc-sg-h3 {
  margin: 22px 0 9px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.kc-stump-calc .kc-sg-total { padding: 19px; background: var(--navy); }
.kc-stump-calc .kc-sg-total.is-provisional { border-left: 5px solid var(--amber); }

.kc-stump-calc .kc-sg-total span {
  display: block;
  color: #C9D4D9;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.kc-stump-calc .kc-sg-total strong {
  display: block;
  margin: 6px 0;
  color: var(--white);
  font-family: var(--font-head);
  font-size: clamp(23px, 3.2vw, 31px);
  line-height: 1.05;
}

.kc-stump-calc .kc-sg-total small { color: #B6D9C1; font-size: 11.5px; line-height: 1.45; }

.kc-stump-calc .kc-sg-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 15px 0 4px;
  border: 1px solid var(--hairline);
  background: var(--white);
}

.kc-stump-calc .kc-sg-kpis > span {
  padding: 12px 13px;
  border-right: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.kc-stump-calc .kc-sg-kpis > span:last-child { border-right: 0; }

.kc-stump-calc .kc-sg-kpis strong {
  display: block;
  margin-top: 5px;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.15;
}

.kc-stump-calc .kc-sg-kpis small {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 400;
}

.kc-stump-calc .kc-sg-kpis--vol strong { color: var(--forest); }

.kc-stump-calc .kc-sg-lines { border-top: 1px solid var(--hairline); }

.kc-stump-calc .kc-sg-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--hairline);
  font-size: 12.5px;
}

.kc-stump-calc .kc-sg-line span { min-width: 0; color: var(--ink); }

.kc-stump-calc .kc-sg-line small {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.kc-stump-calc .kc-sg-line strong {
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: nowrap;
}

.kc-stump-calc .kc-sg-line--context strong { color: var(--muted); font-weight: 600; }

/* --- checklist --- */

.kc-stump-calc .kc-sg-checklist {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.6;
}

.kc-stump-calc .kc-sg-checklist li { margin: 0 0 4px; }

/* --- notices --- */

.kc-stump-calc .kc-sg-error,
.kc-stump-calc .kc-sg-warning,
.kc-stump-calc .kc-sg-review,
.kc-stump-calc .kc-sg-disclosure {
  margin: 15px 0;
  padding: 13px 15px;
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #FFF9EA;
  color: #635021;
  font-size: 11.5px;
  line-height: 1.5;
}

.kc-stump-calc .kc-sg-error { border-left-color: #A6392A; background: #FCEDE9; color: #6B2A20; }
.kc-stump-calc .kc-sg-review { border-left-color: var(--forest); background: #F1F7F3; color: #29453A; }

.kc-stump-calc .kc-sg-error b,
.kc-stump-calc .kc-sg-warning b,
.kc-stump-calc .kc-sg-review b,
.kc-stump-calc .kc-sg-disclosure b { color: var(--navy); }

.kc-stump-calc .kc-sg-error p,
.kc-stump-calc .kc-sg-warning p,
.kc-stump-calc .kc-sg-review p {
  margin: 5px 0 0 !important;
  color: inherit !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}

.kc-stump-calc .kc-sg-muted { color: var(--faint) !important; font-size: 12px !important; }

/* --- quote check --- */

.kc-stump-calc .kc-sg-quote-output {
  margin-top: 20px;
  padding-top: 6px;
  border-top: 2px solid var(--forest);
}

.kc-stump-calc .kc-sg-quote-result {
  padding: 14px;
  border: 1px solid #BFD3C4;
  border-radius: var(--radius-sm);
  background: #F3F8F4;
}

.kc-stump-calc .kc-sg-quote-result strong {
  display: block;
  margin: 0 0 5px;
  color: var(--forest);
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.1;
}

.kc-stump-calc .kc-sg-quote-result p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}

.kc-stump-calc .kc-sg-quote-result.is-warning { border-left: 3px solid var(--amber); }

/* --- responsive --- */

@media (max-width: 1040px) {
  .kc-stump-calc .kc-sg { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 720px) {
  .kc-stump-calc .kc-sg { padding: 16px; }
  .kc-stump-calc .kc-sg-result { padding: 15px; }
  .kc-stump-calc .kc-sg-row { grid-template-columns: 1fr; }
  .kc-stump-calc .kc-sg-kpis { grid-template-columns: 1fr; }
  .kc-stump-calc .kc-sg-kpis > span { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .kc-stump-calc .kc-sg-kpis > span:last-child { border-bottom: 0; }
  .kc-stump-calc .kc-sg-line { flex-direction: column; gap: 4px; }
  .kc-stump-calc .kc-sg-line strong { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-stump-calc *, .kc-stump-calc *::before, .kc-stump-calc *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media print {
  .kc-stump-calc .kc-sg { grid-template-columns: 1fr; border: 0; padding: 0; }
  .kc-stump-calc .kc-sg-form { display: none; }
}

/* ===========================================================================
   27. FURNACE AND AC REPLACEMENT COST CALCULATOR
   Added 2026-09-07. Appended only; nothing above this line was changed.

   Scope: every rule is prefixed with .kc-hvac-calc, which kc_render_calculator_block()
   emits for the registered mount key 'hvac'. No rule here can reach the
   homepage, About, Contact, posts, or any other calculator.

   Uses the shared tokens from section 1 rather than a private palette.
   No page-level width, max-width, or margin. No grouped :is() selectors.
   =========================================================================== */

.kc-hvac-calc { width: 100%; color: var(--ink); font-family: var(--font-body); }
.kc-hvac-calc *, .kc-hvac-calc *::before, .kc-hvac-calc *::after { box-sizing: border-box; }

/* --- shell --- */

.kc-hvac-calc .kc-hv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: 26px;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
}

.kc-hvac-calc h2, .kc-hvac-calc h3 {
  color: var(--navy) !important;
  font-family: var(--font-head);
  font-weight: 700;
}

.kc-hvac-calc p {
  max-width: none !important;
  margin: 0 !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

/* --- form --- */

.kc-hvac-calc .kc-hv-form { display: block; min-width: 0; }

.kc-hvac-calc .kc-hv-section {
  margin: 0 0 20px;
  padding: 14px 0 0;
  border: 0;
  border-top: 2px solid var(--forest);
}

.kc-hvac-calc .kc-hv-section legend {
  padding: 0 8px 0 0;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.kc-hvac-calc .kc-hv-field { display: block; margin: 0 0 13px; }

.kc-hvac-calc .kc-hv-field label {
  display: block;
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.kc-hvac-calc .kc-hv-field input,
.kc-hvac-calc .kc-hv-field select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3;
}

.kc-hvac-calc .kc-hv-field input:focus,
.kc-hvac-calc .kc-hv-field select:focus,
.kc-hvac-calc .kc-hv-check input:focus,
.kc-hvac-calc .kc-hv-add:focus,
.kc-hvac-calc .kc-hv-remove button:focus {
  outline: 3px solid var(--forest-bright);
  outline-offset: 1px;
}

.kc-hvac-calc .kc-hv-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 13px;
}

.kc-hvac-calc .kc-hv-check input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--forest);
}

.kc-hvac-calc .kc-hv-check label { color: var(--ink); font-size: 13px; line-height: 1.4; }

.kc-hvac-calc .kc-hv-help {
  display: block;
  margin: -5px 0 11px;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.45;
}

/* --- sizing verdict block --- */

.kc-hvac-calc .kc-hv-manuals {
  margin: 4px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--forest);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #F1F7F3;
}
.kc-hvac-calc .kc-hv-manuals.is-borderline { border-left-color: var(--amber); background: #FFF9EA; }
.kc-hvac-calc .kc-hv-manuals.is-fail { border-left-color: #A6392A; background: #FCEDE9; }
.kc-hvac-calc .kc-hv-manuals b {
  display: block;
  margin: 0 0 5px;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 16px;
}
.kc-hvac-calc .kc-hv-manuals p { margin: 0 !important; color: var(--muted) !important; font-size: 12.5px !important; }
.kc-hvac-calc .kc-hv-manuals strong { color: var(--navy); }

.kc-hvac-calc .kc-hv-line--credit strong { color: var(--forest); }

/* --- result panel --- */

.kc-hvac-calc .kc-hv-result {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--parchment);
}

.kc-hvac-calc .kc-hv-output { min-width: 0; }

.kc-hvac-calc .kc-hv-h3 {
  margin: 22px 0 9px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.kc-hvac-calc .kc-hv-total { padding: 19px; background: var(--navy); }
.kc-hvac-calc .kc-hv-total.is-provisional { border-left: 5px solid var(--amber); }

.kc-hvac-calc .kc-hv-total span {
  display: block;
  color: #C9D4D9;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.kc-hvac-calc .kc-hv-total strong {
  display: block;
  margin: 6px 0;
  color: var(--white);
  font-family: var(--font-head);
  font-size: clamp(23px, 3.2vw, 31px);
  line-height: 1.05;
}

.kc-hvac-calc .kc-hv-total small { color: #B6D9C1; font-size: 11.5px; line-height: 1.45; }

.kc-hvac-calc .kc-hv-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 15px 0 4px;
  border: 1px solid var(--hairline);
  background: var(--white);
}

.kc-hvac-calc .kc-hv-kpis > span {
  padding: 12px 13px;
  border-right: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.kc-hvac-calc .kc-hv-kpis > span:last-child { border-right: 0; }

.kc-hvac-calc .kc-hv-kpis strong {
  display: block;
  margin-top: 5px;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.15;
}

.kc-hvac-calc .kc-hv-kpis small {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 400;
}

.kc-hvac-calc .kc-hv-kpis--vol strong { color: var(--forest); }

.kc-hvac-calc .kc-hv-lines { border-top: 1px solid var(--hairline); }

.kc-hvac-calc .kc-hv-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--hairline);
  font-size: 12.5px;
}

.kc-hvac-calc .kc-hv-line span { min-width: 0; color: var(--ink); }

.kc-hvac-calc .kc-hv-line small {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.kc-hvac-calc .kc-hv-line strong {
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: nowrap;
}

.kc-hvac-calc .kc-hv-line--context strong { color: var(--muted); font-weight: 600; }

/* --- checklist --- */

.kc-hvac-calc .kc-hv-checklist {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.6;
}

.kc-hvac-calc .kc-hv-checklist li { margin: 0 0 4px; }

/* --- notices --- */

.kc-hvac-calc .kc-hv-error,
.kc-hvac-calc .kc-hv-warning,
.kc-hvac-calc .kc-hv-review,
.kc-hvac-calc .kc-hv-disclosure {
  margin: 15px 0;
  padding: 13px 15px;
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #FFF9EA;
  color: #635021;
  font-size: 11.5px;
  line-height: 1.5;
}

.kc-hvac-calc .kc-hv-error { border-left-color: #A6392A; background: #FCEDE9; color: #6B2A20; }
.kc-hvac-calc .kc-hv-review { border-left-color: var(--forest); background: #F1F7F3; color: #29453A; }

.kc-hvac-calc .kc-hv-error b,
.kc-hvac-calc .kc-hv-warning b,
.kc-hvac-calc .kc-hv-review b,
.kc-hvac-calc .kc-hv-disclosure b { color: var(--navy); }

.kc-hvac-calc .kc-hv-error p,
.kc-hvac-calc .kc-hv-warning p,
.kc-hvac-calc .kc-hv-review p {
  margin: 5px 0 0 !important;
  color: inherit !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}

.kc-hvac-calc .kc-hv-muted { color: var(--faint) !important; font-size: 12px !important; }

/* --- quote check --- */

.kc-hvac-calc .kc-hv-quote-output {
  margin-top: 20px;
  padding-top: 6px;
  border-top: 2px solid var(--forest);
}

.kc-hvac-calc .kc-hv-quote-result {
  padding: 14px;
  border: 1px solid #BFD3C4;
  border-radius: var(--radius-sm);
  background: #F3F8F4;
}

.kc-hvac-calc .kc-hv-quote-result strong {
  display: block;
  margin: 0 0 5px;
  color: var(--forest);
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.1;
}

.kc-hvac-calc .kc-hv-quote-result p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}

.kc-hvac-calc .kc-hv-quote-result.is-warning { border-left: 3px solid var(--amber); }

/* --- responsive --- */

@media (max-width: 1040px) {
  .kc-hvac-calc .kc-hv { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 720px) {
  .kc-hvac-calc .kc-hv { padding: 16px; }
  .kc-hvac-calc .kc-hv-result { padding: 15px; }
  .kc-hvac-calc .kc-hv-row { grid-template-columns: 1fr; }
  .kc-hvac-calc .kc-hv-kpis { grid-template-columns: 1fr; }
  .kc-hvac-calc .kc-hv-kpis > span { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .kc-hvac-calc .kc-hv-kpis > span:last-child { border-bottom: 0; }
  .kc-hvac-calc .kc-hv-line { flex-direction: column; gap: 4px; }
  .kc-hvac-calc .kc-hv-line strong { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-hvac-calc *, .kc-hvac-calc *::before, .kc-hvac-calc *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media print {
  .kc-hvac-calc .kc-hv { grid-template-columns: 1fr; border: 0; padding: 0; }
  .kc-hvac-calc .kc-hv-form { display: none; }
}

/* ===========================================================================
   28. COPART FEE CALCULATOR
   Added 2026-09-08. Appended only; nothing above this line was changed.

   Scope: every rule is prefixed with .kc-copart-calc, which kc_render_calculator_block()
   emits for the registered mount key 'copart'. No rule here can reach the
   homepage, About, Contact, posts, or any other calculator.

   Uses the shared tokens from section 1 rather than a private palette.
   No page-level width, max-width, or margin. No grouped :is() selectors.
   =========================================================================== */

.kc-copart-calc { width: 100%; color: var(--ink); font-family: var(--font-body); }
.kc-copart-calc *, .kc-copart-calc *::before, .kc-copart-calc *::after { box-sizing: border-box; }

/* --- shell --- */

.kc-copart-calc .kc-cp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: 26px;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
}

.kc-copart-calc h2, .kc-copart-calc h3 {
  color: var(--navy) !important;
  font-family: var(--font-head);
  font-weight: 700;
}

.kc-copart-calc p {
  max-width: none !important;
  margin: 0 !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

/* --- form --- */

.kc-copart-calc .kc-cp-form { display: block; min-width: 0; }

.kc-copart-calc .kc-cp-section {
  margin: 0 0 20px;
  padding: 14px 0 0;
  border: 0;
  border-top: 2px solid var(--forest);
}

.kc-copart-calc .kc-cp-section legend {
  padding: 0 8px 0 0;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.kc-copart-calc .kc-cp-field { display: block; margin: 0 0 13px; }

.kc-copart-calc .kc-cp-field label {
  display: block;
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.kc-copart-calc .kc-cp-field input,
.kc-copart-calc .kc-cp-field select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3;
}

.kc-copart-calc .kc-cp-field input:focus,
.kc-copart-calc .kc-cp-field select:focus,
.kc-copart-calc .kc-cp-check input:focus,
.kc-copart-calc .kc-cp-add:focus,
.kc-copart-calc .kc-cp-remove button:focus {
  outline: 3px solid var(--forest-bright);
  outline-offset: 1px;
}

.kc-copart-calc .kc-cp-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 13px;
}

.kc-copart-calc .kc-cp-check input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--forest);
}

.kc-copart-calc .kc-cp-check label { color: var(--ink); font-size: 13px; line-height: 1.4; }

.kc-copart-calc .kc-cp-help {
  display: block;
  margin: -5px 0 11px;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.45;
}

/* --- sizing verdict block --- */

.kc-copart-calc .kc-cp-pct {
  margin: 10px 0 0;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: #F1F7F3;
  border-left: 5px solid var(--forest);
}
.kc-copart-calc .kc-cp-pct.is-mid { background: #FFF9EA; border-left-color: var(--amber); }
.kc-copart-calc .kc-cp-pct.is-high { background: #FCEDE9; border-left-color: #A6392A; }
.kc-copart-calc .kc-cp-pct span {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.kc-copart-calc .kc-cp-pct strong {
  display: block;
  margin-top: 2px;
  font-family: var(--font-head);
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.05;
  color: var(--forest);
}
.kc-copart-calc .kc-cp-pct.is-mid strong { color: #8A5E14; }
.kc-copart-calc .kc-cp-pct.is-high strong { color: #A6392A; }

.kc-copart-calc .kc-cp-calibration,
.kc-copart-calc .kc-cp-budget {
  margin: 4px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--forest);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #F1F7F3;
}
.kc-copart-calc .kc-cp-calibration.is-off,
.kc-copart-calc .kc-cp-budget.is-off { border-left-color: var(--amber); background: #FFF9EA; }
.kc-copart-calc .kc-cp-calibration b,
.kc-copart-calc .kc-cp-budget b {
  display: block;
  margin: 0 0 5px;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 16px;
}
.kc-copart-calc .kc-cp-calibration p,
.kc-copart-calc .kc-cp-budget p { margin: 0 !important; color: var(--muted) !important; font-size: 12.5px !important; }

.kc-copart-calc .kc-cp-line--context strong { color: var(--muted); font-weight: 600; }

/* --- result panel --- */

.kc-copart-calc .kc-cp-result {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--parchment);
}

.kc-copart-calc .kc-cp-output { min-width: 0; }

.kc-copart-calc .kc-cp-h3 {
  margin: 22px 0 9px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.kc-copart-calc .kc-cp-total { padding: 19px; background: var(--navy); }
.kc-copart-calc .kc-cp-total.is-provisional { border-left: 5px solid var(--amber); }

.kc-copart-calc .kc-cp-total span {
  display: block;
  color: #C9D4D9;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.kc-copart-calc .kc-cp-total strong {
  display: block;
  margin: 6px 0;
  color: var(--white);
  font-family: var(--font-head);
  font-size: clamp(23px, 3.2vw, 31px);
  line-height: 1.05;
}

.kc-copart-calc .kc-cp-total small { color: #B6D9C1; font-size: 11.5px; line-height: 1.45; }

.kc-copart-calc .kc-cp-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 15px 0 4px;
  border: 1px solid var(--hairline);
  background: var(--white);
}

.kc-copart-calc .kc-cp-kpis > span {
  padding: 12px 13px;
  border-right: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.kc-copart-calc .kc-cp-kpis > span:last-child { border-right: 0; }

.kc-copart-calc .kc-cp-kpis strong {
  display: block;
  margin-top: 5px;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.15;
}

.kc-copart-calc .kc-cp-kpis small {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 400;
}

.kc-copart-calc .kc-cp-kpis--vol strong { color: var(--forest); }

.kc-copart-calc .kc-cp-lines { border-top: 1px solid var(--hairline); }

.kc-copart-calc .kc-cp-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--hairline);
  font-size: 12.5px;
}

.kc-copart-calc .kc-cp-line span { min-width: 0; color: var(--ink); }

.kc-copart-calc .kc-cp-line small {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.kc-copart-calc .kc-cp-line strong {
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: nowrap;
}

.kc-copart-calc .kc-cp-line--context strong { color: var(--muted); font-weight: 600; }

/* --- checklist --- */

.kc-copart-calc .kc-cp-checklist {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.6;
}

.kc-copart-calc .kc-cp-checklist li { margin: 0 0 4px; }

/* --- notices --- */

.kc-copart-calc .kc-cp-error,
.kc-copart-calc .kc-cp-warning,
.kc-copart-calc .kc-cp-review,
.kc-copart-calc .kc-cp-disclosure {
  margin: 15px 0;
  padding: 13px 15px;
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #FFF9EA;
  color: #635021;
  font-size: 11.5px;
  line-height: 1.5;
}

.kc-copart-calc .kc-cp-error { border-left-color: #A6392A; background: #FCEDE9; color: #6B2A20; }
.kc-copart-calc .kc-cp-review { border-left-color: var(--forest); background: #F1F7F3; color: #29453A; }

.kc-copart-calc .kc-cp-error b,
.kc-copart-calc .kc-cp-warning b,
.kc-copart-calc .kc-cp-review b,
.kc-copart-calc .kc-cp-disclosure b { color: var(--navy); }

.kc-copart-calc .kc-cp-error p,
.kc-copart-calc .kc-cp-warning p,
.kc-copart-calc .kc-cp-review p {
  margin: 5px 0 0 !important;
  color: inherit !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}

.kc-copart-calc .kc-cp-muted { color: var(--faint) !important; font-size: 12px !important; }

/* --- quote check --- */

.kc-copart-calc .kc-cp-quote-output {
  margin-top: 20px;
  padding-top: 6px;
  border-top: 2px solid var(--forest);
}

.kc-copart-calc .kc-cp-quote-result {
  padding: 14px;
  border: 1px solid #BFD3C4;
  border-radius: var(--radius-sm);
  background: #F3F8F4;
}

.kc-copart-calc .kc-cp-quote-result strong {
  display: block;
  margin: 0 0 5px;
  color: var(--forest);
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.1;
}

.kc-copart-calc .kc-cp-quote-result p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}

.kc-copart-calc .kc-cp-quote-result.is-warning { border-left: 3px solid var(--amber); }

/* --- responsive --- */

@media (max-width: 1040px) {
  .kc-copart-calc .kc-cp { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 720px) {
  .kc-copart-calc .kc-cp { padding: 16px; }
  .kc-copart-calc .kc-cp-result { padding: 15px; }
  .kc-copart-calc .kc-cp-row { grid-template-columns: 1fr; }
  .kc-copart-calc .kc-cp-kpis { grid-template-columns: 1fr; }
  .kc-copart-calc .kc-cp-kpis > span { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .kc-copart-calc .kc-cp-kpis > span:last-child { border-bottom: 0; }
  .kc-copart-calc .kc-cp-line { flex-direction: column; gap: 4px; }
  .kc-copart-calc .kc-cp-line strong { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-copart-calc *, .kc-copart-calc *::before, .kc-copart-calc *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media print {
  .kc-copart-calc .kc-cp { grid-template-columns: 1fr; border: 0; padding: 0; }
  .kc-copart-calc .kc-cp-form { display: none; }
}