*, *::before, *::after { box-sizing: border-box; }
    :root {
      --ink: #1d1d1f;
      --muted: #6e6e73;
      --faint: #86868b;
      --line: #d2d2d7;
      --soft: #f5f5f7;
      --care-bg: #eaf5ff;
      --care-bg-2: #dff0ff;
      --teal: #83cff5;
      --teal-deep: #83cff5;
      --aqua: #83cff5;
      --blue: #83cff5;
      --page-w: 210mm;
      --page-h: 297mm;
      --pad-top: 12mm;
      --pad-bottom: 9mm;
      --pad-x: 15mm;
      --header-h: 12mm;
      --footer-h: 7mm;
    }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
      color: var(--ink);
      background: #fff;
      -webkit-font-smoothing: antialiased;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      font-size: 10.2pt;
      line-height: 1.34;
    }
    .page {
      width: var(--page-w);
      height: var(--page-h);
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      background: #fff;
    }
    .page::after {
      content: "";
      position: absolute;
      top: 1.8mm;
      right: 1.8mm;
      bottom: 1.8mm;
      left: 1.8mm;
      border: 1.35px solid var(--blue);
      border-radius: 8mm;
      pointer-events: none;
      z-index: 20;
    }
    .mockup-label {
      position: absolute;
      top: 4.2mm;
      left: 50%;
      transform: translateX(-50%);
      z-index: 30;
      color: #d70015;
      font-size: 8pt;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      pointer-events: none;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    @media screen {
      #quote-root { padding: 16px 0 40px; }
      #quote-root .page { margin-bottom: 16px; box-shadow: 0 6px 24px rgba(0,0,0,0.18); }
    }
    @media print {
      @page { size: 210mm 297mm; margin: 0; }
      html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
      .page { width: 210mm !important; height: 297mm !important; margin: 0 !important; box-shadow: none !important; page-break-after: always; }
      .page:last-child { page-break-after: auto; }
      .render {
        background: #fff !important;
      }
      .render img {
        transform: scale(1.3) !important;
        max-height: 68mm;
      }
      .render-img-screen { display: none !important; }
      .render-img-print { display: block !important; }
    }

    /* Chrome */
    .nav {
      position: absolute;
      top: var(--pad-top);
      left: var(--pad-x);
      right: var(--pad-x);
      height: var(--header-h);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      border-bottom: 1px solid var(--line);
      padding-bottom: 2mm;
    }
    .nav .lockhart { justify-self: start; display: flex; align-items: center; }
    .nav .lockhart img { display: block; width: 33.6mm; height: auto; }
    .nav .brand { justify-self: center; }
    .nav .brand img { display: block; height: 8.2mm; width: auto; }
    /* Block layout, not flex: html2canvas drops text inside flex boxes. */
    .nav .meta {
      justify-self: end;
      text-align: right;
      color: var(--muted);
      font-size: 8pt;
      line-height: 1.3;
      max-width: 70mm;
    }
    .nav .meta .meta-title {
      display: block;
      white-space: nowrap;
      font-size: 7.6pt;
      font-weight: 600;
      color: var(--ink);
    }
    .nav .meta .meta-date {
      display: block;
      white-space: nowrap;
      font-size: 7.6pt;
      color: var(--muted);
    }
    .footer {
      position: absolute;
      left: var(--pad-x);
      right: var(--pad-x);
      bottom: var(--pad-bottom);
      height: var(--footer-h);
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
      color: var(--faint);
      font-size: 7.6pt;
      border-top: 1px solid var(--line);
      padding-top: 2mm;
    }
    .footer div:nth-child(2) { text-align: center; }
    .footer div:nth-child(3) { text-align: right; }
    .content {
      position: absolute;
      top: calc(var(--pad-top) + var(--header-h) + 5mm);
      left: var(--pad-x);
      right: var(--pad-x);
      bottom: calc(var(--pad-bottom) + var(--footer-h) + 4mm);
      overflow: visible;
    }

    /* Shared type */
    .eyebrow {
      margin: 0 0 2mm;
      color: var(--blue);
      font-size: 11pt;
      font-weight: 600;
      letter-spacing: -0.1px;
    }
    .center { text-align: center; }
    .nowrap { white-space: nowrap; }

    /* ---------- PAGE 1 ---------- */
    .hero-copy { margin-bottom: 4mm; }
    .hero-copy h1 {
      margin: 0 auto 3mm;
      max-width: 180mm;
      font-size: 30pt;
      /* Tall enough for descenders (y / g) — do not clip with overflow:hidden. */
      line-height: 1.12;
      letter-spacing: -1.2px;
      font-weight: 700;
      /* One line only: wrapping pushes the hero and prices down off the page. */
      white-space: nowrap;
      overflow: visible;
    }
    .hero-copy h1.is-compact {
      font-size: 24pt;
      letter-spacing: -1px;
    }
    .hero-copy h1.is-tight {
      font-size: 19pt;
      letter-spacing: -0.7px;
    }
    .hero-copy h1.is-micro {
      font-size: 15pt;
      letter-spacing: -0.4px;
    }
    .package-banner {
      /* inline-block, not inline-flex: html2canvas drops text inside
         inline-flex boxes, which blanked the banner in the PDF. */
      display: inline-block;
      max-width: 132mm;
      margin: 0 auto 3.5mm;
      line-height: 7.2mm;
      padding: 1.9mm 5.6mm;
      border: 0;
      border-radius: 999px;
      color: #3b3b3f;
      background: #faf7f2;
      font-size: 11pt;
      font-weight: 700;
      letter-spacing: -0.25px;
      text-transform: none;
    }
    .package-banner-wrap {
      text-align: center;
      margin-top: 30px;
    }
    .package-banner .package-main {
      color: var(--ink);
      white-space: nowrap;
    }
    .package-banner .package-divider {
      color: var(--line);
      font-weight: 400;
      padding: 0 1.2mm;
    }
    .package-banner .package-capacity {
      color: var(--faint);
      font-weight: 600;
      white-space: nowrap;
    }
    .hero-image {
      width: 100%;
      height: 104.4mm;
      border-radius: 9mm;
      overflow: hidden;
      background: var(--soft);
      margin-bottom: 2.6mm;
      box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    }
    .hero-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 72%;
      display: block;
    }
    .quote {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 5mm;
      margin-bottom: 3.2mm;
    }
    .quote-total {
      position: relative;
      border-radius: 6mm;
      padding: 6mm 5.6mm 5.4mm;
      color: var(--ink);
      background: #fff;
      border: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 45mm;
      overflow: hidden;
    }
    .quote-total::before {
      content: "";
      position: absolute;
      left: 5.6mm;
      top: 6mm;
      width: 13mm;
      height: 1.1mm;
      border-radius: 999px;
      background: var(--blue);
    }
    .quote-total .label {
      font-size: 8.4pt;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: var(--muted);
      position: relative;
      z-index: 1;
      margin-top: 4mm;
    }
    .quote-total .figure {
      margin: 1.4mm 0 1mm;
      font-size: 34pt;
      line-height: 1;
      letter-spacing: -1.2px;
      font-weight: 700;
      position: relative;
      z-index: 1;
      white-space: nowrap;
      max-width: 100%;
    }
    /* Shrink for £100k+ (and bigger) so the total box never overflows. */
    .quote-total .figure.is-compact {
      font-size: 26pt;
      letter-spacing: -1px;
    }
    .quote-total .figure.is-tight {
      font-size: 20pt;
      letter-spacing: -0.7px;
    }
    .quote-total .figure.is-micro {
      font-size: 16pt;
      letter-spacing: -0.5px;
    }
    .quote-total .vat {
      font-size: 9pt;
      color: var(--faint);
      position: relative;
      z-index: 1;
    }
    .quote-lines {
      border: 1px solid var(--line);
      border-radius: 6mm;
      padding: 2.2mm 4.4mm;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 48mm;
    }
    .qsection {
      padding: 2.1mm 0;
      border-bottom: 1px solid var(--line);
    }
    .qsection:last-child { border-bottom: 0; }
    .qsection-label {
      color: var(--blue);
      font-size: 7.4pt;
      font-weight: 700;
      letter-spacing: 0.35px;
      text-transform: uppercase;
      margin-bottom: 1mm;
    }
    .qrate {
      color: var(--ink);
      font-size: 8.9pt;
      line-height: 1.32;
      font-weight: 600;
      margin-bottom: 0.5mm;
    }
    .qrate:last-child { margin-bottom: 0; }
    .qrow {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 4mm;
      align-items: baseline;
      margin-bottom: 0.9mm;
    }
    .qrow:last-child { margin-bottom: 0; }
    .qrow .name {
      color: var(--ink);
      font-weight: 600;
      font-size: 9.4pt;
      line-height: 1.28;
      min-width: 0;
    }
    .qrow .val {
      color: var(--ink);
      font-size: 10.2pt;
      font-weight: 700;
      white-space: nowrap;
    }
    .qdetail {
      color: var(--faint);
      font-size: 7.8pt;
      font-weight: 500;
      line-height: 1.3;
      margin: -0.35mm 0 1mm;
    }
    .qrenewal {
      padding-top: 1.5mm;
    }
    .qrenewal .qrow {
      margin-bottom: 0.35mm;
    }
    .qrenewal .name {
      font-size: 9pt;
    }
    .qrenewal .val {
      font-size: 9.8pt;
    }
    .qrenewal-note {
      color: var(--faint);
      font-size: 7.2pt;
      line-height: 1.25;
      font-weight: 500;
    }
    .terms {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding-top: 1.8mm;
      border-top: 0;
      color: var(--faint);
      font-size: 4.2pt; /* 30% smaller than 6pt body small print */
      line-height: 1.3;
    }
    .terms p {
      margin: 0 0 0.9mm;
    }
    .terms p:last-child {
      margin-bottom: 0;
    }
    .terms .validity {
      margin-top: 1.2mm;
      font-size: 6pt; /* keep the 30-day line at the original size */
      font-weight: 700;
      letter-spacing: 0.25px;
      color: var(--muted);
      text-transform: uppercase;
    }

    /* ---------- PAGE 2 ---------- */
    .page-2-content {
      display: flex;
      flex-direction: column;
      bottom: calc(var(--pad-bottom) + var(--footer-h) + 1.5mm);
    }
    .product {
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      gap: 6mm;
      align-items: center;
      margin-bottom: 4.5mm;
      flex-shrink: 0;
    }
    .render {
      position: relative;
      height: 76mm;
      border-radius: 0;
      background-color: #fff;
      background-image: radial-gradient(ellipse at 50% 58%, #f0f6fc 0%, #f7fbff 42%, #ffffff 72%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0 5mm;
      overflow: visible;
    }
    .render-figure {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      overflow: hidden;
    }
    .render img {
      max-width: 100%;
      max-height: 68mm;
      object-fit: contain;
      display: block;
      transform: scale(1.3);
      transform-origin: center center;
      background: #fff;
    }
    .render .render-img-print { display: none !important; }
    .render .render-img-screen { display: block; }
    .render-dims {
      position: absolute;
      left: 50%;
      bottom: 1.4mm;
      transform: translate(-50%, 10px);
      z-index: 5;
      margin: 0;
      padding: 1mm 2.6mm;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(210, 210, 215, 0.75);
      color: var(--muted);
      font-size: 6pt;
      line-height: 1.2;
      font-weight: 500;
      letter-spacing: 0.05px;
      white-space: nowrap;
    }
    .product-copy h2 {
      margin: 0 0 2.4mm;
      font-size: 23pt;
      line-height: 1.04;
      letter-spacing: -0.85px;
      font-weight: 700;
    }
    .product-copy .intro {
      margin: 0 0 4mm;
      color: var(--muted);
      font-size: 10pt;
      line-height: 1.36;
      font-weight: 500;
    }
    .usps { margin: 0; padding: 0; list-style: none; display: grid; gap: 2.6mm; }
    .usps li { position: relative; padding-left: 9mm; }
    .usps .tick {
      position: absolute;
      left: 0;
      top: 0.35mm;
      width: 4.8mm;
      height: 4.8mm;
      border: 1px solid var(--blue);
      border-radius: 50%;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    .usps .tick svg {
      display: block;
      width: 2.6mm;
      height: 2.6mm;
    }
    .usps strong { display: block; font-size: 9.8pt; font-weight: 600; margin-bottom: 0.3mm; }
    .usps li > div > span { color: var(--muted); font-size: 8.6pt; line-height: 1.28; }

    .care-shell {
      margin: 30px -7mm 16px;
      padding: 3.8mm 3.8mm 4mm;
      border-radius: 8mm;
      background: #faf7f2;
      color: var(--ink);
      border: 0;
      overflow: hidden;
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .care-head { text-align: center; margin-bottom: 2.4mm; }
    .care-pill {
      display: inline-block;
      width: auto;
      min-width: 0;
      white-space: nowrap;
      padding: 1.5mm 4mm;
      border-radius: 999px;
      background: #1d1d1f;
      border: 1.4px solid var(--aqua);
      color: #fff;
      font-size: 8.4pt;
      font-weight: 600;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      margin-bottom: 2.2mm;
    }
    .care-head h2 {
      margin: 0 auto 1.4mm;
      max-width: 150mm;
      font-size: 19pt;
      line-height: 1.05;
      letter-spacing: -0.8px;
      font-weight: 700;
    }
    .care-shell .care-pill {
      background: #fff;
      color: var(--ink);
      border-color: var(--blue);
    }
    .care-head .sub {
      margin: 0 auto;
      max-width: 142mm;
      color: var(--muted);
      font-size: 9.6pt;
      line-height: 1.34;
      font-weight: 500;
    }
    .impactos-band {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 4mm;
      align-items: center;
      margin: 6px auto 2.6mm;
      padding: 0;
      background: transparent;
      border: 0;
    }
    .impactos-logo-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42mm;
      min-height: 17mm;
      padding: 2.1mm 4mm;
      border-radius: 999px;
      background: transparent;
      border: 1.2px solid var(--blue);
    }
    .impactos-logo-pill img {
      display: block;
      width: 27.2mm;
      height: auto;
    }
    .impactos-band p {
      margin: 0;
      color: var(--muted);
      font-size: 8.2pt;
      line-height: 1.28;
      font-weight: 500;
    }
    .impactos-band strong {
      color: var(--ink);
      font-weight: 600;
    }
    .care-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 3mm;
      row-gap: 3.6mm;
      margin-top: 2px;
      margin-bottom: 0;
      flex: 1;
      align-content: start;
    }
    .care-card {
      background: var(--care-bg);
      border-radius: 5mm;
      padding: 2.8mm 3mm 3mm;
      min-height: 32mm;
    }
    .care-shell .care-card {
      background: #fff;
      border: 1px solid rgba(131, 207, 245, 0.28);
    }
    .care-icon {
      width: 8.4mm;
      height: 8.4mm;
      border-radius: 999px;
      background: #fff;
      border: 1px solid rgba(131, 207, 245, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.8mm;
      box-shadow: none;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    .care-shell .care-icon {
      background: #fff;
      border-color: rgba(131, 207, 245, 0.35);
    }
    .care-icon svg {
      width: 4.8mm;
      height: 4.8mm;
      display: block;
    }
    .care-card strong {
      display: block;
      font-size: 9.4pt;
      font-weight: 600;
      letter-spacing: -0.1px;
      margin-bottom: 0.8mm;
    }
    .care-card span {
      color: #4c6578;
      font-size: 7.8pt;
      line-height: 1.26;
    }

    .quote-pull {
      text-align: center;
      padding: 4mm 6mm 0;
      margin-top: auto;
    }
    .quote-pull p {
      margin: 0 auto;
      max-width: 150mm;
      font-size: 11.6pt;
      line-height: 1.28;
      letter-spacing: -0.4px;
      font-weight: 600;
      color: var(--ink);
    }
    .quote-pull .by {
      margin: 0;
      color: var(--faint);
      font-size: 8pt;
      letter-spacing: 0.3px;
    }