/* Calculadora autorizada integrada dentro de TerraNova Roof. */
.roof-calculator {
  display: block;
  margin-top: 34px;
  color: #0d1914;
  background: #f4f7f2;
  border: 1px solid rgba(18,42,28,.14);
  border-radius: 24px;
  overflow: hidden;
}
.roof-calculator-loading,
.roof-calculator-error {
  margin: 0;
  padding: 34px;
  color: #5c6c62;
  background: #fff;
  text-align: center;
}
.roof-calculator-error { color: #a53a34; }
.roof-calculator .calculator-integration-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px;
  border-bottom: 1px solid rgba(18,42,28,.14);
  background: #fff;
}
.roof-calculator .calculator-integration-toolbar .actions {
  display: flex;
  min-width: 0;
  grid-template-columns: none;
}
@scope (.roof-calculator) {

    :scope {
      --navy: #0d1914;
      --navy-deep: #0d1914;
      --green: #96c93d;
      --green-dark: #1d6b39;
      --green-soft: #edf6df;
      --orange: #96c93d;
      --orange-soft: #edf6df;
      --blue-soft: #f7faf4;
      --ink: #0d1914;
      --muted: #5c6c62;
      --line: rgba(18,42,28,.14);
      --paper: #fff;
      --canvas: #f4f7f2;
      --danger: #a53a34;
      --shadow: 0 14px 42px rgba(13,35,21,.08);
      --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    * { box-sizing: border-box; }
    :scope { scroll-behavior: smooth; }
    :scope {
      margin: 0;
      color: var(--ink);
      background: var(--canvas);
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-variant-numeric: tabular-nums lining-nums;
      font-feature-settings: "tnum" 1, "lnum" 1;
    }
    button, input { font: inherit; }
    button { cursor: pointer; }
    a { color: var(--green-dark); }
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 17px clamp(20px, 5vw, 70px);
      background: white;
      border-bottom: 1px solid var(--line);
    }
    .brand { display: flex; align-items: center; color: inherit; text-decoration: none; }
    .brand-logo { display: block; width: clamp(215px,22vw,285px); height: auto; }
    .site-navigation {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(12px,1.45vw,24px);
      margin-left: auto;
      overflow: visible;
    }
    .nav-link {
      position: relative;
      display: inline-flex;
      min-height: 36px;
      align-items: center;
      padding: 10px 0;
      border: 0;
      background: transparent;
      color: #34463b;
      font-size: clamp(12px,.9vw,14px);
      font-weight: 750;
      text-decoration: none;
      white-space: nowrap;
    }
    .nav-link::after {
      position: absolute;
      right: 0;
      bottom: 4px;
      left: 0;
      height: 2px;
      border-radius: 999px;
      background: var(--green);
      content: "";
      opacity: 0;
      transform: scaleX(.35);
      transition: opacity 150ms ease, transform 150ms ease;
    }
    .nav-link:hover::after,
    .nav-link.active::after { opacity: 1; transform: scaleX(1); }
    .nav-menu { position: relative; display: flex; align-items: center; }
    .nav-trigger { gap: 6px; cursor: pointer; }
    .nav-trigger > span { font-size: 10px; transition: transform 150ms ease; }
    .nav-dropdown {
      position: absolute;
      top: calc(100% - 2px);
      left: 50%;
      z-index: 30;
      display: grid;
      min-width: 220px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 16px 36px rgba(13,35,21,.16);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%,-6px);
      transition: opacity 150ms ease, transform 150ms ease;
    }
    .nav-dropdown-small { min-width: 180px; }
    .nav-dropdown a {
      padding: 10px 12px;
      border-radius: 5px;
      color: #183126;
      font-size: 12px;
      font-weight: 750;
      text-decoration: none;
      white-space: nowrap;
    }
    .nav-dropdown a:hover,
    .nav-dropdown a.active-item { color: var(--green-dark); background: rgba(150,201,61,.18); }
    .nav-menu:hover .nav-dropdown,
    .nav-menu:focus-within .nav-dropdown {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%,0);
    }
    .nav-menu:hover .nav-trigger > span,
    .nav-menu:focus-within .nav-trigger > span { transform: rotate(180deg); }
    .language-switch { display: flex; align-items: center; gap: 4px; }
    .language-switch button {
      min-width: 30px;
      padding: 6px 4px;
      border: 0;
      border-radius: 5px;
      background: transparent;
      font-size: 16px;
    }
    .language-switch button.active {
      background: rgba(150,201,61,.2);
      box-shadow: inset 0 0 0 1px rgba(80,137,24,.4);
    }
    .badge, .pill {
      width: fit-content;
      padding: 8px 12px;
      border: 1px solid rgba(29,107,57,.22);
      border-radius: 999px;
      color: var(--green-dark);
      background: var(--green-soft);
      font-size: 11px;
      font-weight: 800;
    }
    .hero {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 34px;
      padding: 44px clamp(20px, 5vw, 70px);
      color: white;
      background:
        radial-gradient(circle at 88% 20%, rgba(150,201,61,.24), transparent 25%),
        linear-gradient(122deg, var(--navy-deep), var(--navy));
    }
    .hero::after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg,var(--green),rgba(150,201,61,.62) 52%,transparent 92%);
      content: "";
    }
    .hero-copy { max-width: 780px; }
    .eyebrow {
      display: block;
      margin-bottom: 10px;
      color: var(--green);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .13em;
    }
    h1, h2, h3 { color: var(--navy); font-family: Georgia, serif; }
    .hero h1 {
      margin: 0;
      color: white;
      font-size: clamp(34px, 5vw, 60px);
      font-weight: 600;
      letter-spacing: -.035em;
      line-height: 1.02;
    }
    .hero p { max-width: 720px; margin: 18px 0 0; color: #dfe8e1; line-height: 1.6; }
    .actions { display: grid; min-width: 210px; gap: 9px; }
    .button {
      min-height: 43px;
      padding: 10px 15px;
      border: 1px solid transparent;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 850;
    }
    .button.light { color: var(--navy); background: white; }
    .button.green { color: var(--navy); background: var(--green); }
    .button.outline { color: white; background: transparent; border-color: rgba(255,255,255,.5); }
    .button.dark { color: white; background: var(--navy); }
    .workspace {
      display: block;
      max-width: 1080px;
      margin: 0 auto;
      padding: 28px;
    }
    .panel, .proposal, .saved {
      overflow: hidden;
      border: 1px solid var(--line);
      border-top-color: rgba(150,201,61,.78);
      border-radius: 12px;
      background: var(--paper);
      box-shadow: var(--shadow);
    }
    .panel { overflow: visible; margin-bottom: 24px; padding: 22px; background: linear-gradient(180deg,#fff 0%,#fbfcfb 100%); }
    .section-title {
      display: flex;
      gap: 11px;
      margin: 8px 0 17px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }
    .section-title:first-child { padding-top: 0; border-top: 0; }
    .section-number {
      display: grid;
      width: 31px;
      height: 31px;
      flex: 0 0 31px;
      place-items: center;
      border-radius: 50%;
      color: white;
      background: var(--navy);
      box-shadow: 0 0 0 2px white, 0 0 0 3px rgba(150,201,61,.58);
      font-size: 11px;
      font-weight: 900;
    }
    .section-title h2 { margin: 0; font-size: 20px; }
    .section-title p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
    .field-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .field { display: grid; align-content: start; gap: 5px; }
    .field label { color: #34463b; font-size: 11px; font-weight: 800; }
    .input-shell {
      display: flex;
      align-items: center;
      border: 1px solid rgba(20,45,28,.16);
      border-radius: 7px;
      background: #f8faf7;
    }
    .input-shell:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(150,201,61,.16); }
    .input-shell input {
      width: 100%;
      min-width: 0;
      height: 39px;
      padding: 0 9px;
      border: 0;
      outline: 0;
      color: var(--ink);
      background: transparent;
      font-size: 13px;
    }
    .unit { flex: 0 0 auto; padding-right: 8px; color: var(--muted); font-size: 9px; font-weight: 700; }
    .help { color: var(--muted); font-size: 9px; line-height: 1.35; }
    .field-featured {
      padding: 16px;
      border: 1px solid rgba(29,107,57,.18);
      border-left: 3px solid var(--green);
      border-radius: 10px;
      background: var(--green-soft);
      box-shadow: none;
    }
    .field-featured label { color: var(--navy); font-size: 13px; letter-spacing: .01em; }
    .field-featured .input-shell { border-color: rgba(29,107,57,.26); border-radius: 9px; }
    .field-featured .input-shell input {
      height: 54px;
      padding: 0 14px;
      color: var(--navy);
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
    }
    .field-featured .unit { padding-right: 14px; color: var(--green); font-size: 12px; font-weight: 850; }
    .slider-field { display: grid; gap: 12px; padding: 16px; border: 1px solid rgba(20,45,28,.16); border-radius: 8px; background: #f8faf7; }
    .slider-heading, .slider-scale { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
    .slider-heading span { color: #34463b; font-size: 12px; font-weight: 850; }
    .slider-heading strong { color: var(--navy); font-family: Georgia,serif; font-size: 27px; }
    .slider-field input[type="range"] { width: 100%; accent-color: var(--green); cursor: ew-resize; }
    .slider-scale { color: var(--muted); font-size: 9px; }
    .trm-card {
      display: grid;
      gap: 9px;
      margin: 12px 0;
      padding: 13px;
      border-left: 4px solid var(--green);
      border-radius: 7px;
      background: linear-gradient(135deg,#f7faf8 0%,var(--green-soft) 100%);
    }
    .link-button {
      width: fit-content;
      padding: 0;
      border: 0;
      color: var(--green-dark);
      background: none;
      font-size: 11px;
      font-weight: 850;
      text-decoration: underline;
    }
    .status { color: var(--muted); font-size: 10px; line-height: 1.4; }
    .quick-results {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 13px;
    }
    .quick-results div {
      display: grid;
      gap: 5px;
      padding: 14px;
      border: 1px solid rgba(29,107,57,.18);
      border-left: 3px solid var(--green);
      border-radius: 8px;
      background: linear-gradient(145deg,#f7faf8 0%,var(--green-soft) 100%);
    }
    .quick-results span { color: var(--green-dark); font-size: 9px; font-weight: 850; text-transform: uppercase; }
    .quick-results strong { color: var(--navy); font-family: Georgia,serif; font-size: 20px; }
    .quick-results strong + strong { margin-top: 1px; }
    .quick-results.tax-summary { grid-template-columns: 1fr; }
    .sheet-two-results {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 14px;
      margin-top: 13px;
    }
    .result-column { display: grid; align-content: start; gap: 10px; }
    .quick-card {
      display: grid;
      gap: 5px;
      min-height: 82px;
      padding: 14px;
      border: 1px solid rgba(29,107,57,.18);
      border-left: 3px solid var(--green);
      border-radius: 8px;
      background: linear-gradient(145deg,#f7faf8 0%,var(--green-soft) 100%);
    }
    .quick-card.day { border-color: rgba(29,107,57,.18); border-left-color: var(--green); background: var(--green-soft); }
    .quick-card.night { border-color: var(--line); border-left-color: var(--navy); background: #f8faf7; }
    .quick-card span { color: var(--green-dark); font-size: 9px; font-weight: 850; text-transform: uppercase; }
    .quick-card strong { color: var(--navy); font-family: var(--font-display); font-size: 20px; }
    .tax-basic-note { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
    .profile-check { margin-top: 10px; padding: 10px 12px; border-radius: 7px; color: #8a5b15; background: #fff4dc; font-size: 11px; }
    .profile-check.ok { color: #326c37; background: var(--green-soft); }
    .advanced-settings { margin: 18px 0; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; }
    .advanced-settings > summary { padding: 13px 14px; color: var(--navy); font-size: 12px; font-weight: 850; cursor: pointer; }
    .advanced-settings > .section-title,
    .advanced-settings > .field-grid { margin-left: 14px; margin-right: 14px; }
    .proposal-head {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 25px 27px 20px;
      border-bottom: 1px solid var(--line);
    }
    .proposal-head small, .block-heading small, .contact-block small {
      color: var(--green-dark);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .11em;
    }
    .proposal-head h2 { margin: 6px 0 3px; font-size: 30px; }
    .proposal-head p { margin: 0; color: var(--muted); font-size: 12px; }
    .meta { display: grid; grid-template-columns: auto auto; gap: 4px 12px; text-align: right; font-size: 11px; }
    .meta span { color: var(--muted); }
    .meta strong { color: var(--navy); }
    .scope {
      padding: 13px 27px;
      color: #3e5a42;
      background: var(--green-soft);
      border-bottom: 1px solid var(--line);
      font-size: 12px;
      line-height: 1.5;
    }
    .final-result {
      border-top: 3px solid var(--green);
      padding: 34px 27px;
      color: white;
      background:
        radial-gradient(circle at 88% 10%,rgba(150,201,61,.18),transparent 28%),
        var(--navy);
      text-align: center;
    }
    .final-result > span { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
    .final-result h2 { max-width: 780px; margin: 10px auto 6px; color: white; font-size: clamp(30px,5vw,52px); line-height: 1.04; }
    .final-result > p { margin: 0 auto; color: #dfe8e1; font-size: 13px; }
    .final-result-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 22px; }
    .final-result-grid[hidden] { display: none; }
    .final-result-grid div { display: grid; gap: 6px; padding: 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(255,255,255,.08); }
    .final-result-grid span { color: #d4dfd6; font-size: 9px; font-weight: 800; text-transform: uppercase; }
    .final-result-grid strong { color: white; font-family: Georgia,serif; font-size: 20px; }
    .final-result-grid strong + strong { margin-top: 1px; }
    .metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
    .metric { display: grid; min-height: 125px; align-content: center; gap: 7px; padding: 17px; border: 0; background: white; }
    .metric span { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
    .metric strong { color: var(--navy); font-family: Georgia, serif; font-size: clamp(18px,2.2vw,26px); line-height: 1.08; }
    .metric em { color: var(--muted); font-size: 9px; font-style: normal; line-height: 1.35; }
    .metric.accent { background: var(--green-soft); }
    .metric.accent span, .metric.accent em { color: var(--green-dark); }
    .metric.accent strong { color: var(--navy); }
    .metric.accent em { font-size: 11px; font-weight: 750; }
    .block { padding: 26px 27px; border-top: 1px solid var(--line); }
    .block.blue { background: #f7faf4; }
    .block-heading { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 17px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
    .block-heading h3 { margin: 4px 0 0; font-size: 22px; }
    .pill { background: var(--green-soft); border: 0; white-space: nowrap; }
    .summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
    .summary-grid div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 53px;
      padding: 11px 13px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .summary-grid span { color: var(--muted); font-size: 10px; }
    .summary-grid strong { color: var(--navy); font-size: 11px; text-align: right; }
    .finance-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
    .finance-grid div { display: grid; gap: 5px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: white; }
    .finance-grid span { color: var(--muted); font-size: 9px; font-weight: 800; }
    .finance-grid strong { color: var(--navy); font-family: Georgia, serif; font-size: 19px; }
    .finance-grid em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.45; }
    .note {
      margin: 14px 0 0;
      padding: 10px 12px;
      border-left: 3px solid var(--green);
      color: var(--muted);
      background: rgba(255,255,255,.7);
      font-size: 10px;
      line-height: 1.5;
    }
    .tax-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; margin-bottom: 17px; background: var(--line); border: 1px solid var(--line); }
    .tax-metrics .metric { min-height: 116px; padding: 12px; }
    .tax-metrics .metric strong { font-size: 17px; }
    .table-wrap { overflow-x: auto; border: 1px solid var(--line); }
    table { width: 100%; min-width: 940px; border-collapse: collapse; font-size: 9px; }
    th, td { padding: 8px 9px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
    th:first-child, td:first-child { text-align: center; }
    th { color: white; background: var(--navy); }
    tbody tr:nth-child(even) { background: #f4f7f2; }
    .contact { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; background: #f8faf7; }
    .contact-block { display: grid; gap: 5px; }
    .contact-block strong { color: var(--navy); font-family: Georgia, serif; font-size: 17px; }
    .contact-block p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
    .sources { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 15px 27px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
    .saved {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 17px;
      max-width: 1024px;
      margin: 0 auto 40px;
      padding: 26px;
    }
    .saved h2 { margin: 0; }
    .saved p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
    .saved-list { display: grid; grid-column: 1/-1; gap: 8px; }
    .saved-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; }
    .saved-row div { display: grid; gap: 3px; }
    .saved-row span { color: var(--muted); font-size: 10px; }
    .saved-row .row-actions { display: flex; grid-auto-flow: column; gap: 12px; }
    .site-footer {
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      gap: 28px;
      margin-top: 42px;
      padding: 30px clamp(20px,5vw,70px);
      border-top: 1px solid rgba(150,201,61,.18);
      background: #09130f;
      color: rgba(255,255,255,.68);
      font-size: 12px;
    }
    .site-footer-legal { display: grid; justify-items: center; gap: 4px; text-align: center; }
    .site-footer-legal p { max-width: 720px; margin: 0; }
    .site-footer-brand { color: white !important; font-size: 16px; font-weight: 900 !important; }
    .site-footer a { color: var(--green); font-weight: 750; text-decoration: none; }
    .danger { color: var(--danger); }
    .empty { padding: 15px; border: 1px dashed #cbd7dc; border-radius: 8px; color: var(--muted); text-align: center; font-size: 11px; }
    .mark,
    .brand-text strong,
    h1,
    h2,
    h3,
    .slider-heading strong,
    .quick-results strong,
    .quick-card strong,
    .final-result-grid strong,
    .metric strong,
    .finance-grid strong,
    .contact-block strong {
      font-family: var(--font-display);
    }
    input,
    strong,
    table {
      font-variant-numeric: tabular-nums lining-nums;
      font-feature-settings: "tnum" 1, "lnum" 1;
    }
    /* Composición visual idéntica a la calculadora TerraNova Roof. */
    .badge {
      border: 0;
      border-radius: 10px;
      color: var(--ink);
      background: var(--green);
      font-weight: 850;
    }
    .hero {
      align-items: center;
      padding-top: 70px;
      padding-bottom: 54px;
      color: var(--ink);
      background: transparent;
    }
    .hero::after { display: none; }
    .hero .eyebrow { color: var(--green-dark); text-transform: uppercase; }
    .hero h1 {
      color: var(--ink);
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing: -.05em;
    }
    .hero p { color: var(--muted); font-size: 17px; }
    .button.light { color: white; background: var(--ink); }
    .button.outline { color: var(--ink); border-color: var(--line); }
    .panel, .proposal, .saved {
      border: 1px solid var(--line);
      border-radius: 22px;
      background: white;
      box-shadow: var(--shadow);
    }
    .panel { padding: 30px; background: white; }
    .section-number { color: var(--ink); background: var(--green); box-shadow: none; }
    h1, h2, h3 {
      font-family: var(--font-display);
      font-weight: 750;
      letter-spacing: -.035em;
    }
    .input-shell { border-radius: 10px; background: #f8faf7; }
    .field-featured, .slider-field, .trm-card, .quick-results div, .quick-card, .finance-grid div { border-radius: 12px; }
    .final-result {
      border-top: 0;
      padding: 30px;
      background: var(--ink);
      text-align: left;
    }
    .final-result > span { color: var(--green); }
    .final-result h2 {
      margin-right: 0;
      margin-left: 0;
      font-family: var(--font-display);
      font-size: clamp(27px,3.4vw,38px);
      font-weight: 750;
      letter-spacing: -.04em;
    }
    .final-result > p { margin-left: 0; color: rgba(255,255,255,.68); }
    .final-result-grid {
      gap: 0;
      margin: 26px -30px -30px;
      background: white;
    }
    .final-result-grid div {
      min-height: 122px;
      align-content: center;
      padding: 23px;
      border: 0;
      border-right: 1px solid var(--line);
      border-radius: 0;
      background: white;
    }
    .final-result-grid div:first-child { background: var(--green-soft); }
    .final-result-grid div:last-child { border-right: 0; }
    .final-result-grid span { color: var(--muted); }
    .final-result-grid strong { color: var(--ink); font-family: var(--font-display); }
    .final-result-grid div:first-child strong { color: var(--green-dark); }
    .metrics, .tax-metrics {
      gap: 0;
      border: 0;
      background: white;
    }
    .metric {
      min-height: 130px;
      padding: 23px;
      border: 0;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: transparent;
    }
    .metrics .metric:last-child { border-right: 0; }
    .metric.accent { background: var(--green-soft); }
    .metric.accent span, .metric.accent em { color: var(--muted); }
    .metric.accent strong { color: var(--green-dark); }
    .proposal-head small, .block-heading small, .contact-block small { color: var(--green-dark); }
    .block.blue, .contact { background: #f7faf4; }
    th { background: var(--ink); }
    @media (max-width: 1160px) {
      .topbar { flex-wrap: wrap; }
      .site-navigation { order: 3; width: 100%; justify-content: flex-start; }
      .workspace { grid-template-columns: 1fr; }
      .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .tax-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .finance-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    }
    @media (max-width: 720px) {
      .topbar, .hero, .proposal-head, .block-heading, .saved-row { align-items: stretch; flex-direction: column; }
      .site-navigation { justify-content: flex-start; gap: 20px; overflow-x: auto; padding-bottom: 2px; }
      .nav-dropdown { left: 0; transform: translate(0,-6px); }
      .nav-menu:hover .nav-dropdown,
      .nav-menu:focus-within .nav-dropdown { transform: translate(0,0); }
      .hero { padding-top: 32px; }
      .actions { width: 100%; }
      .workspace { padding: 12px; }
      .field-grid, .sheet-two-results, .summary-grid, .finance-grid, .contact, .saved, .quick-results, .final-result-grid { grid-template-columns: 1fr; }
      .metrics, .tax-metrics { grid-template-columns: 1fr; }
      .meta { text-align: left; }
      .saved-list { grid-column: 1; }
      .site-footer { grid-template-columns: 1fr; gap: 16px; }
      .site-footer-legal { justify-items: start; text-align: left; }
    }
    @media print {
      :scope { background: white; }
      .no-print, .saved, .site-footer { display: none !important; }
      .topbar { padding: 0 0 10px; }
      .hero { padding: 20px; background: var(--navy); print-color-adjust: exact; }
      .hero h1 { font-size: 30px; }
      .hero p { font-size: 10px; }
      .workspace { display: block; max-width: none; padding: 0; }
      .proposal { border: 0; border-radius: 0; box-shadow: none; }
      .scope, .final-result, .metrics, .tax-metrics, .blue, th { print-color-adjust: exact; }
      .block { break-inside: avoid; }
      .table-wrap { overflow: visible; }
      table { min-width: 0; font-size: 6.5px; }
      th, td { padding: 4px; }
    }

}
@media (max-width: 720px) {
  .roof-calculator {
    margin-right: -4px;
    margin-left: -4px;
    border-radius: 18px;
  }
  .roof-calculator .calculator-integration-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: 18px;
  }
  .roof-calculator .calculator-integration-toolbar .actions {
    display: grid;
    width: 100%;
  }
}
@media print {
  @page { size: letter; margin: .45in; }
  body.roof-calculator-print > header,
  body.roof-calculator-print > footer,
  body.roof-calculator-print main > section:not(#calculadora),
  body.roof-calculator-print #calculadora > .wrap > .section-heading {
    display: none !important;
  }
  body.roof-calculator-print #calculadora {
    padding: 0 !important;
  }
  body.roof-calculator-print #calculadora > .wrap {
    max-width: none !important;
    width: 100% !important;
  }
  body.roof-calculator-print .roof-calculator {
    margin: 0;
    border: 0;
    border-radius: 0;
  }
}