/*
 * Heatuneed — flat editorial design system.
 *
 * Paper, ink and a single accent. No gradients, no shadows, no rounded
 * corners: structure is carried by hairlines and whitespace alone, so the
 * numbers the calculators produce are the loudest thing on the page.
 */

:root {
    /* Type */
    --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Palette */
    --ink: #111110;
    --ink-soft: #494840;
    --muted: #6b6960;
    --surface: #f4f3ef;
    --card-border: #dedcd5;
    --accent: #8d52c0;
    --accent-deep: #6b3a96;
    --amber: #c76a00;
    --night: #111110;
    --night-soft: #1c1c1a;

    /* A flat fill, kept under the old name so every panel that asks for the
       brand surface gets the same solid colour. */
    --heat-gradient: linear-gradient(var(--accent), var(--accent));

    /* Shape & depth: square, and none. */
    --radius-lg: 0px;
    --radius-md: 0px;
    --shadow-sm: none;
    --shadow-lg: none;

    /* Bootstrap hooks */
    --bs-primary-rgb: 141, 82, 192;
    --bs-success-rgb: 22, 116, 90;
    --bs-link-color-rgb: 107, 58, 150;
    --bs-link-hover-color-rgb: 141, 82, 192;
    --bs-body-color: #2e2d29;
    --bs-body-font-family: var(--font-sans);
    --bs-border-color: var(--card-border);
    --bs-border-radius: 0px;
    --bs-border-radius-sm: 0px;
    --bs-border-radius-lg: 0px;
    --bs-border-radius-xl: 0px;
    --bs-border-radius-2xl: 0px;

    /* Legacy variables (referenced inline in pages) */
    --primary-color: #8d52c0;
    --secondary-color: #c76a00;
    --success-color: #16745a;
    --dark-color: #111110;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--bs-body-color);
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--ink);
}

/* Bootstrap's display sizes are set for a hero-per-section site. Here every
   heading is one of a family, so they are pulled back to a plain scale. */
.display-1, .display-2, .display-3, .display-4 {
    font-size: clamp(1.9rem, 3.6vw, 2.65rem);
}

.display-5, .display-6 {
    font-size: clamp(1.7rem, 3vw, 2.2rem);
}

a {
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* Readability: even line lengths in headings, no orphans in running text. */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    text-wrap: balance;
}

p, li, .lead, dd {
    text-wrap: pretty;
}

::selection {
    background: var(--accent);
    color: #fff;
}

section[id] {
    scroll-margin-top: 80px;
}

/* The one recurring ornament: a mono, letter-spaced label. */
.hero-badge,
.split-badge,
.footer-heading,
.scan-stat-label,
.post-meta,
.pricing-period {
    font-family: var(--font-mono);
    font-size: .76rem;
}

/* ---------- Buttons ---------- */

.btn {
    --bs-btn-border-radius: 0px;
    border-radius: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: .55rem 1.25rem;
    transition: background-color .15s linear, color .15s linear, border-color .15s linear;
}

.btn-lg {
    --bs-btn-font-size: 1rem;
    padding: .85rem 1.75rem;
}

.btn-primary {
    --bs-btn-bg: var(--ink);
    --bs-btn-color: #fff;
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: var(--accent-deep);
    --bs-btn-active-border-color: var(--accent-deep);
    --bs-btn-disabled-bg: var(--muted);
    --bs-btn-disabled-border-color: var(--muted);
}

.btn-outline-primary {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: var(--ink);
}

.btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .45);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-border-color: #fff;
}

.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: #fff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: #fff;
}

/* The store link is the page's one solid black block of a button. */
.btn-app-store {
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    padding: .85rem 1.75rem;
    font-size: 1rem;
}

.btn-app-store:hover,
.btn-app-store:focus {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* On the black bands the same button has to invert to stay visible. */
main section.bg-primary .btn-app-store,
.hero-section.is-dark .btn-app-store {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}

main section.bg-primary .btn-app-store:hover,
main section.bg-primary .btn-app-store:focus {
    background: transparent;
    color: #fff;
}

/* ---------- Navbar ---------- */

.site-nav {
    background: #fff;
    border-bottom: 1px solid var(--card-border);
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.site-nav .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-sans);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.site-nav .navbar-brand:hover {
    color: var(--accent);
}

.site-nav .navbar-brand .brand-mark {
    width: 42px;
    height: 42px;
    display: block;
}

.site-nav .nav-link {
    font-family: var(--font-mono);
    font-size: .85rem;
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--ink-soft);
    padding-left: .75rem;
    padding-right: .75rem;
    transition: color .15s linear;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus,
.site-nav .nav-link.show {
    color: var(--accent);
}

.site-nav .navbar-toggler {
    border: 1px solid var(--card-border);
    border-radius: 0;
    padding: .35rem .6rem;
}

.site-nav .navbar-toggler:focus {
    box-shadow: none;
}

.site-nav .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(.2);
}

.site-nav .dropdown-menu {
    margin-top: .5rem;
    padding: .35rem;
    background: #fff;
    border: 1px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
}

.site-nav .dropdown-item {
    font-family: var(--font-mono);
    font-size: .85rem;
    color: var(--ink-soft);
    border-radius: 0;
    padding: .45rem .7rem;
}

.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
    background: var(--ink);
    color: #fff;
}

.btn-nav-cta {
    background: var(--ink);
    color: #fff !important;
    border: 1px solid var(--ink);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: .85rem;
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.btn-nav-cta:hover,
.btn-nav-cta:focus {
    background: var(--accent);
    border-color: var(--accent);
}

@media (max-width: 1199.98px) {
    .site-nav .navbar-collapse {
        padding-bottom: .5rem;
    }

    .site-nav .dropdown-menu {
        border: none;
        border-left: 1px solid var(--card-border);
        margin-left: .75rem;
        padding-left: 0;
    }
}

/* ---------- Hero ---------- */

/* Paper, not a light show: a headline, a paragraph, two links and a rule. */
.hero-section {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    color: var(--ink);
    padding: 88px 0 96px;
    border-bottom: 1px solid var(--card-border);
}

/* Drafting paper: a fine grid with a heavier line every fifth cell, so the
   hero reads as the plan the app produces rather than as empty stock. */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(17, 17, 16, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 16, .018) 1px, transparent 1px),
        linear-gradient(rgba(17, 17, 16, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 16, .04) 1px, transparent 1px);
    background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
    background-position: center;
    pointer-events: none;
}

.hero-section > .container {
    position: relative;
    z-index: 1;
}

.hero-section h1 {
    font-size: clamp(2.4rem, 5.4vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--ink);
    margin-bottom: 1.5rem;
    max-width: 15ch;
}

.hero-section .lead {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--ink);
    max-width: 38rem;
    margin-bottom: 1rem;
}

.hero-report-link {
    color: var(--accent-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

.hero-report-link:hover,
.hero-report-link:focus {
    color: var(--ink);
}

.hero-description {
    color: var(--ink-soft);
    max-width: 34rem;
    font-size: 1rem;
    line-height: 1.65;
}

.hero-requirement {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.25rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    line-height: 1.5;
}

.hero-requirement i:first-child {
    color: var(--accent);
}

.hero-requirement i:last-child {
    font-size: .7rem;
    color: var(--accent-deep);
}

.hero-requirement a {
    color: var(--accent-deep);
    text-underline-offset: .2em;
}

.hero-requirement a:hover,
.hero-requirement a:focus {
    color: var(--ink);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 2rem;
    padding: 0 0 .6rem;
    border: none;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero-badge i {
    color: var(--accent);
}

/* The hero's secondary link is an outline-light button in the markup; on
   paper it has to read as ink. */
.hero-section .btn-outline-light {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: var(--ink);
}

/* ---------- Phone mockup ---------- */

.phone-mockup {
    position: relative;
    width: min(290px, 78vw);
    padding: 10px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.phone-mockup::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 10px;
    right: 10px;
    height: 1px;
    background: var(--card-border);
    z-index: 2;
}

.phone-screen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    aspect-ratio: 9 / 19;
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    padding: 40px 10px 10px;
}

.scan-view {
    position: relative;
    flex: 1;
    overflow: hidden;
    border-radius: 0;
    background: #fff;
    border: 1px solid var(--card-border);
}

.scan-view::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(17, 17, 16, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 16, .07) 1px, transparent 1px);
    background-size: 24px 24px;
}

.scan-view::after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    top: 26%;
    bottom: 28%;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: transparent;
    transform: perspective(320px) rotateX(52deg);
}

.scan-beam {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--accent);
    animation: scan-sweep 3.4s ease-in-out infinite;
}

@keyframes scan-sweep {
    0%, 100% { top: 0; }
    50% { top: calc(100% - 2px); }
}

.scan-readout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--card-border);
    border: 1px solid var(--card-border);
}

.scan-stat {
    padding: 8px 4px;
    text-align: center;
    border: none;
    border-radius: 0;
    background: #fff;
}

.scan-stat-value {
    display: block;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: .95rem;
    color: var(--ink);
}

.scan-stat-label {
    display: block;
    font-size: .58rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- Page headers & CTA bands (bg-primary sections) ---------- */

/* Solid ink: the only heavy blocks on the site, used to open a page and to
   close it. */
main section.bg-primary {
    position: relative;
    background: var(--ink) !important;
    background-image: none !important;
    color: #fff;
}

main section.bg-primary h1,
main section.bg-primary h2,
main section.bg-primary h3 {
    color: #fff;
    letter-spacing: -0.03em;
}

main section.bg-primary .lead {
    color: rgba(255, 255, 255, .72);
}

/* The eyebrow rule is drawn in ink; on the black bands it has to invert. */
main section.bg-primary .hero-badge {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .4);
}

/* ---------- Sections & surfaces ---------- */

.section-padding {
    padding: 88px 0;
}

.bg-light-custom,
.bg-light {
    background-color: var(--surface) !important;
}

.text-primary-custom {
    color: var(--ink) !important;
}

.lead {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--ink-soft);
}

hr {
    border-top: 1px solid var(--card-border);
    opacity: 1;
}

/* ---------- Cards ---------- */

.card {
    border-radius: 0;
    border-color: var(--card-border);
}

.feature-card,
.pricing-card {
    border: 1px solid var(--card-border);
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    transition: border-color .15s linear;
}

.feature-card:hover,
.pricing-card:hover {
    border-color: var(--ink);
    transform: none;
    box-shadow: none;
}

/* The icon is a glyph, not a badge. */
.feature-icon {
    --fa-display: inline-block;
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 1.1rem;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--accent);
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.feature-title {
    font-size: 1.1rem;
    font-weight: 600;
    padding-bottom: .9rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--card-border);
}

/* ---------- Reports page ---------- */

.report-hero-copy {
    max-width: 70ch;
}

.report-why-section {
    background: var(--surface);
}

.report-why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-why-item {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--card-border);
}

.report-why-item:nth-child(odd) {
    padding-right: 2rem;
    border-right: 1px solid var(--card-border);
}

.report-why-item:nth-child(even) {
    padding-left: 2rem;
}

.report-why-number {
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--accent-deep);
}

.report-why-item h3 {
    margin-bottom: .4rem;
    font-size: 1.12rem;
}

.report-why-item p {
    margin-bottom: 0;
    color: var(--ink-soft);
}

.report-sizing-note {
    margin-top: 1.5rem;
    padding-left: 1rem;
    border-left: 3px solid var(--accent);
    color: var(--ink-soft);
}

.report-disclaimer {
    display: flex;
    gap: .75rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--warning);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: .92rem;
    line-height: 1.55;
}

.report-disclaimer > i {
    margin-top: .25rem;
    color: var(--warning);
}

.report-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--card-border);
}

.report-card-header,
.report-card-body,
.report-card-footer {
    padding: 2rem;
}

.report-card-header {
    border-bottom: 1px solid var(--card-border);
}

.report-card-header h3 {
    margin-bottom: .75rem;
    font-size: clamp(1.65rem, 3vw, 2rem);
}

.report-card-header > p:not(.report-best-for) {
    color: var(--ink-soft);
}

.report-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--ink);
    font-family: var(--font-mono);
    font-size: .76rem;
    line-height: 1.35;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.report-card-meta span:last-child {
    text-align: right;
}

.report-best-for {
    color: var(--ink-soft);
}

.report-best-for strong {
    color: var(--ink);
}

.report-preview-link {
    display: block;
    padding: 2rem 2rem 0;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
}

.report-preview-link img {
    display: block;
    width: min(100%, 420px);
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--card-border);
    background: #fff;
}

.report-preview-link figcaption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 0 1rem;
    font-family: var(--font-mono);
    font-size: .76rem;
    line-height: 1.4;
    color: var(--muted);
}

.report-preview-link figcaption span:last-child {
    color: var(--accent-deep);
    text-align: right;
}

.report-preview-link:hover figcaption span:last-child,
.report-preview-link:focus figcaption span:last-child {
    color: var(--ink);
}

.report-card-body {
    flex: 1;
}

.report-card-body h4 {
    margin-bottom: 1.1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--card-border);
    font-size: 1rem;
    font-family: var(--font-mono);
    letter-spacing: .03em;
    text-transform: uppercase;
}

.report-card-footer {
    padding-top: 0;
}

@media (max-width: 767.98px) {
    .report-why-grid {
        display: block;
    }

    .report-why-item:nth-child(odd),
    .report-why-item:nth-child(even) {
        padding-right: 0;
        padding-left: 0;
        border-right: 0;
    }
}

@media (max-width: 575.98px) {

    .report-card-header,
    .report-card-body,
    .report-card-footer {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .report-preview-link {
        padding: 1.25rem 1.25rem 0;
    }

    .report-preview-link figcaption {
        display: block;
    }

    .report-preview-link figcaption span {
        display: block;
    }

    .report-preview-link figcaption span:last-child {
        margin-top: .25rem;
        text-align: left;
    }
}

/* ---------- LiDAR requirements page ---------- */

.requirements-hero-copy {
    max-width: 72ch;
}

.requirements-check {
    padding: 2rem;
    border: 1px solid var(--card-border);
    background: var(--surface);
}

.requirements-check > h2 {
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--ink);
    font-size: 1.15rem;
    font-family: var(--font-mono);
    letter-spacing: .03em;
    text-transform: uppercase;
}

.requirements-device-card {
    border: 1px solid var(--card-border);
    background: #fff;
}

.requirements-device-card header {
    min-height: 13.5rem;
    padding: 2rem;
    border-bottom: 1px solid var(--ink);
}

.requirements-device-icon {
    margin-bottom: 1.1rem;
    font-size: 1.35rem;
    color: var(--accent);
}

.requirements-device-card h3 {
    margin-bottom: .65rem;
    font-size: clamp(1.65rem, 3vw, 2rem);
}

.requirements-device-card header p {
    margin-bottom: 0;
    color: var(--ink-soft);
}

.requirements-device-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 2rem;
    border-bottom: 1px solid var(--card-border);
}

.requirements-device-list li:last-child {
    border-bottom: 0;
}

.requirements-device-list li > span:first-child {
    font-weight: 500;
    color: var(--ink);
}

.requirements-device-list li > span:last-child {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--muted);
}

.requirements-steps li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: .75rem;
    padding: 1rem 0;
    border-top: 1px solid var(--card-border);
}

.requirements-steps li:last-child {
    padding-bottom: 0;
}

.requirements-step-number {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--accent-deep);
}

.requirements-steps h3 {
    margin-bottom: .25rem;
    font-size: 1.05rem;
}

.requirements-steps p {
    margin-bottom: 0;
    color: var(--ink-soft);
}

@media (max-width: 991.98px) {
    .requirements-device-card header {
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .requirements-check,
    .requirements-device-card header {
        padding: 1.5rem;
    }

    .requirements-device-list li {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}

/* Checklists: a hanging accent tick, no chip behind it. */
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .7rem;
    color: var(--ink-soft);
}

.check-list li:last-child {
    margin-bottom: 0;
}

.check-list li > i {
    --fa-display: inline-flex;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin-top: .45em;
    border-radius: 0;
    font-size: .6rem;
    line-height: 1;
    color: var(--accent);
    background: none;
}

/* ---------- Blog index ---------- */

.blog-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.blog-card .card-body {
    padding: 2.25rem 0;
}

.blog-list-item + .blog-list-item {
    border-top: 1px solid var(--card-border);
}

.blog-card .card-title {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    margin-bottom: .5rem;
}

/* The row is full width; the reading measure is not. */
.blog-card .card-text {
    max-width: 72ch;
    margin-bottom: 1.25rem;
}

.blog-card .card-title a {
    color: var(--ink);
    text-decoration: none;
    transition: color .15s linear;
}

.blog-card .card-title a:hover {
    color: var(--accent);
}

.post-meta {
    color: var(--muted);
    font-size: .78rem;
    letter-spacing: .02em;
}

/* ---------- Blog post typography ---------- */

.prose {
    max-width: 68ch;
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--ink-soft);
}

.prose p {
    margin-bottom: 1.4rem;
}

.prose h2,
.prose h3,
.prose h4 {
    margin-top: 2.6rem;
    margin-bottom: 1rem;
    line-height: 1.25;
}

.prose h2 {
    font-size: 1.5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--ink);
}

.prose h3 {
    font-size: 1.2rem;
}

.prose h4 {
    font-size: 1.05rem;
}

.prose ul,
.prose ol {
    margin-bottom: 1.4rem;
    padding-left: 1.3rem;
}

.prose li {
    margin-bottom: .5rem;
}

.prose li::marker {
    color: var(--accent);
}

.prose strong {
    color: var(--ink);
    font-weight: 600;
}

.prose a {
    color: var(--ink);
    text-decoration-color: var(--accent);
}

.prose a:hover {
    color: var(--accent);
}

.prose blockquote {
    margin: 2rem 0;
    padding: 0 0 0 1.4rem;
    border-left: 1px solid var(--accent);
    color: var(--ink);
    font-size: 1.15rem;
}

.prose blockquote p:last-child {
    margin-bottom: 0;
}

.prose img {
    max-width: 100%;
    height: auto;
    margin: 2rem 0;
    border: 1px solid var(--card-border);
    border-radius: 0;
    box-shadow: none;
}

.prose figure {
    margin: 2rem 0;
}

.prose figure img {
    margin: 0;
}

.prose figcaption {
    margin-top: .7rem;
    font-size: .9rem;
    color: var(--muted);
}

.prose code {
    padding: .12em .35em;
    border-radius: 0;
    background: var(--surface);
    border: 1px solid var(--card-border);
    color: var(--accent-deep);
    font-family: var(--font-mono);
    font-size: .85em;
}

.prose pre {
    margin: 2rem 0;
    padding: 1.25rem 1.4rem;
    border-radius: 0;
    background: var(--ink);
    color: #f4f3ef;
    font-family: var(--font-mono);
    overflow-x: auto;
    line-height: 1.6;
}

.prose pre code {
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font-size: .85em;
}

.prose hr {
    margin: 2.5rem 0;
    width: 100%;
    border: none;
    border-top: 1px solid var(--card-border);
    opacity: 1;
}

.prose table {
    width: 100%;
    margin: 2rem 0;
    font-size: 1rem;
    border-collapse: collapse;
}

.prose table th,
.prose table td {
    padding: .55rem .8rem;
    border: 1px solid var(--card-border);
}

.prose table th {
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 500;
    text-align: left;
}

.prose > :first-child {
    margin-top: 0;
}

@media (max-width: 768px) {
    .prose {
        font-size: 1rem;
    }
}

/* ---------- Pricing ---------- */

/* The popular plan is marked by an ink border, not by being bigger. */
.pricing-card-popular {
    border: 1px solid var(--ink);
    box-shadow: none;
    transform: none;
}

.pricing-card-popular:hover {
    transform: none;
}

.pricing-card .badge.pricing-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    background: var(--ink) !important;
    border: none;
    border-radius: 0;
    padding: .4em .8em;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff !important;
    box-shadow: none;
}

.pricing-amount {
    font-family: var(--font-sans);
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--ink);
    line-height: 1.1;
}

.pricing-period {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 400;
}

/* A comparison table, not a spreadsheet: the markup keeps Bootstrap's
   `.table-bordered`, but the grid of boxes is stripped back to horizontal
   hairlines on the section's own background. */
.pricing-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink-soft);
    --bs-border-color: var(--card-border);
    width: 100%;
    /* Narrow screens scroll the table rather than crushing its plan columns. */
    min-width: 34rem;
    table-layout: fixed;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* `.table-bordered` borders the rows as well as the cells; the row rules are
   what put a line above the head and below the last row. */
.pricing-table > :not(caption) > * {
    border-width: 0;
}

.pricing-table > :not(caption) > * > * {
    padding: .95rem 1.25rem;
    background: transparent;
    border-width: 0 0 1px;
    border-style: solid;
    border-color: var(--card-border);
    box-shadow: none;
}

.pricing-table thead th {
    padding-top: 0;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--ink);
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
}

/* The row label carries the reading; the plan values answer it. */
.pricing-table tbody td:first-child {
    color: var(--ink);
    font-weight: 500;
}

.pricing-table tbody tr:last-child > * {
    border-bottom: none;
}

/* Flush the outer edges so the table aligns with the text above it. */
.pricing-table > :not(caption) > * > *:first-child {
    width: 34%;
    padding-left: 0;
}

.pricing-table > :not(caption) > * > *:last-child {
    padding-right: 0;
}

@media (max-width: 575.98px) {
    .pricing-table > :not(caption) > * > * {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

/* ---------- Accordion ---------- */

/* The FAQ is a list of rules, not a white slab: it takes the background of
   whatever section it sits in (paper on /pricing, wash on the calculators). */
.accordion {
    --bs-accordion-border-color: var(--card-border);
    --bs-accordion-border-radius: 0px;
    --bs-accordion-inner-border-radius: 0px;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--accent);
    --bs-accordion-btn-color: var(--ink);
    /* Bootstrap's own chevrons are its default dark and its blue primary. */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111110' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23d92e04' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1rem;
}

.accordion-item {
    margin-bottom: 0;
    border-radius: 0 !important;
    border-width: 0 0 1px;
    box-shadow: none;
}

.accordion-item:first-of-type {
    border-top-width: 1px;
}

.accordion-button {
    font-weight: 500;
    padding-left: 0;
    padding-right: 0;
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

.accordion-body {
    max-width: 68ch;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 1.35rem;
    color: var(--ink-soft);
}

/* ---------- Badges ---------- */

.badge {
    border-radius: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: .06em;
}

.badge.bg-primary {
    background: var(--ink) !important;
}

.badge.bg-secondary {
    background: transparent !important;
    border: 1px solid var(--card-border);
    color: var(--ink-soft) !important;
}

/* ---------- Forms ---------- */

.form-control,
.form-select {
    border-color: var(--card-border);
    border-radius: 0;
    padding: .6rem .85rem;
    font-size: 1rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ink);
    box-shadow: none;
}

.form-label {
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink);
}

.input-group > .form-control {
    border-radius: 0;
}

.input-group > .btn {
    border-radius: 0;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

/* ---------- Tech panel (homepage) ---------- */

.tech-orb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    font-size: 3.5rem;
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

/* ---------- Screenshots ---------- */

.screenshots-section {
    position: relative;
    background: var(--ink);
    background-image: none;
    color: #fff;
}

.screenshots-section h2 {
    color: #fff;
}

.screenshots-section .lead {
    color: rgba(255, 255, 255, .65);
}

.screenshot-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.screenshot-item {
    margin: 0;
    text-align: left;
}

.screenshot-frame {
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: border-color .15s linear;
}

.screenshot-item:hover .screenshot-frame {
    border-color: #fff;
    transform: none;
    box-shadow: none;
}

.screenshot-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    background: var(--ink);
}

.screenshot-item figcaption {
    margin-top: .9rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.screenshot-title {
    display: block;
    font-family: var(--font-mono);
    font-size: .85rem;
    font-weight: 400;
    letter-spacing: .04em;
    color: #fff;
}

.screenshot-desc {
    display: block;
    margin-top: .25rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .5);
}

@media (max-width: 991.98px) {
    .screenshot-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        margin: 0 -12px;
        padding: 0 12px 1.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .screenshot-item {
        flex: 0 0 min(240px, 70vw);
        scroll-snap-align: center;
    }
}

/* ---------- Spotlight split cards ---------- */

.split-card {
    overflow: hidden;
    border: 1px solid var(--card-border);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.split-card + .split-card {
    margin-top: -1px;
}

.split-media {
    min-height: 320px;
    background: var(--surface);
}

.split-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.split-body {
    padding: 3rem;
}

.split-badge {
    display: inline-block;
    padding: 0;
    margin-bottom: 1rem;
    border-radius: 0;
    background: none;
    color: var(--accent);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.split-card h2 {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    margin-bottom: 1rem;
}

.split-card p {
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
}

.split-link {
    font-family: var(--font-mono);
    font-size: .9rem;
    font-weight: 400;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    padding-bottom: .2rem;
}

.split-link:hover {
    color: var(--accent);
}

.split-link i {
    margin-left: .4rem;
    font-size: .8em;
    transition: transform .15s linear;
}

.split-link:hover i {
    transform: translateX(3px);
}

@media (max-width: 991.98px) {
    .split-media {
        min-height: 220px;
    }

    .split-body {
        padding: 2rem 1.5rem;
    }
}

/* ---------- Footer ---------- */

.site-footer {
    background: #fff;
    border-top: 1px solid var(--ink);
    color: var(--ink-soft);
    padding: 56px 0 28px;
    margin-top: 0;
    font-size: .95rem;
}

.site-footer .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    margin-bottom: .75rem;
}

.site-footer .footer-brand .brand-mark {
    width: 24px;
    height: 24px;
    display: block;
}

.footer-heading {
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: .45rem;
}

.footer-links a {
    color: var(--ink-soft);
    text-decoration: none;
    transition: color .15s linear;
}

.footer-links a:hover {
    color: var(--accent);
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--card-border);
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .02em;
    color: var(--muted);
}
/* ---------- Calculators ---------- */

.calc-panel {
    padding: 28px;
    border: 1px solid var(--card-border);
    border-radius: 0;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.calc-group + .calc-group {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--card-border);
}

.calc-group-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.1rem;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}

.calc-group-title i {
    color: var(--accent);
}

.calc-panel .form-label {
    margin-bottom: .35rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
}

.calc-panel .form-control,
.calc-panel .form-select {
    border-color: var(--card-border);
    border-radius: 0;
    padding: .55rem .75rem;
    color: var(--ink);
}

.calc-panel .form-control:focus,
.calc-panel .form-select:focus {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--ink);
}

.calc-panel .input-group-text {
    border-color: var(--card-border);
    border-radius: 0;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: .92rem;
}

/* A unit picker inside an input group sizes to its content, not half the row. */
.calc-panel .input-group .form-select {
    flex: 0 0 auto;
    width: auto;
}

.calc-panel .form-text {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.55;
}

/* Currency strip at the top of the panel: it governs every figure below it,
   including the ones in the results column, so it sits above the presets
   rather than beside the price field it happens to be nearest. */
.calc-currency {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--card-border);
}

.calc-currency-label {
    margin: 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
}

.calc-panel .calc-currency-select {
    flex: 0 0 auto;
    width: auto;
    margin-right: auto;
}

.calc-currency-note {
    flex-basis: 100%;
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--muted);
}

.calc-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.75rem;
    font-size: .9rem;
}

.calc-preset {
    padding: .45rem .9rem;
    border: 1px solid var(--card-border);
    border-radius: 0;
    background: #fff;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-soft);
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.calc-preset:hover {
    border-color: var(--accent);
    color: var(--accent-deep);
}

.calc-preset.active {
    border-color: transparent;
    background: var(--heat-gradient);
    color: #fff;
}

/* Repeatable editors used by the radiator and solar calculators. Each item is
   a contained panel so several rooms or roof planes remain easy to scan. */
.radiator-rooms,
.solar-arrays {
    display: grid;
    gap: 1rem;
}

.radiator-room,
.solar-array {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--card-border);
    border-radius: 0;
    background: var(--surface);
}

.radiator-room-head,
.solar-array-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.radiator-room-number,
.solar-array-number {
    float: none;
    width: auto;
    margin: 0;
    font-family: var(--font-mono);
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
}

.radiator-remove-room,
.radiator-add-room,
.solar-remove-array,
.solar-add-array {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px solid var(--card-border);
    background: #fff;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft);
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.radiator-remove-room,
.solar-remove-array {
    padding: .35rem .65rem;
    border-radius: 0;
}

.radiator-remove-room:hover:not(:disabled),
.solar-remove-array:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent-deep);
}

.radiator-remove-room:disabled,
.solar-remove-array:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.radiator-add-room,
.solar-add-array {
    width: 100%;
    margin-top: 1rem;
    padding: .65rem 1rem;
    border-style: dashed;
    border-radius: 0;
}

.radiator-add-room:hover,
.solar-add-array:hover {
    border-color: var(--accent);
    background: rgba(141, 82, 192, .04);
    color: var(--accent-deep);
}

/* French labels wrap at different points in the three-column temperature
   row. Reserve the same two-line label space so every control and help block
   starts on a shared horizontal line. */
@media (min-width: 576px) {
    .radiator-temperature-field .form-label {
        display: flex;
        align-items: flex-end;
        min-height: 3em;
    }
}

/* Results column */

.calc-results {
    position: sticky;
    top: 96px;
}

.calc-results-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.calc-print-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border: 1px solid var(--card-border);
    border-radius: 0;
    background: #fff;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft);
    transition: border-color .2s ease, color .2s ease;
}

.calc-print-btn:hover {
    border-color: var(--accent);
    color: var(--accent-deep);
}

/* The printed sheet's own furniture: no place for it on screen. */
.print-header,
.print-inputs,
.print-footer {
    display: none;
}

/* The print helper temporarily puts results first in the DOM. Preserve the
   familiar inputs-left/results-right order if the print dialog exposes the
   page beneath it before the DOM is restored. */
form[data-print-form] > .calc-print-input-column {
    order: 1;
}

form[data-print-form] > .calc-print-results-column {
    order: 2;
}

.calc-verdict {
    padding: 24px 26px;
    border-radius: 0;
    border: 1px solid transparent;
    background: var(--surface);
}

.calc-verdict-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .5rem;
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
}

.calc-verdict-title::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 0;
    font-size: .95rem;
    color: #fff;
}

.calc-verdict-note {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.calc-verdict-strong,
.calc-verdict-good {
    border-color: rgba(22, 116, 90, .28);
    background: rgba(22, 116, 90, .08);
}

.calc-verdict-strong .calc-verdict-title,
.calc-verdict-good .calc-verdict-title {
    color: #0f5a45;
}

.calc-verdict-strong .calc-verdict-title::before,
.calc-verdict-good .calc-verdict-title::before {
    background: var(--success-color);
}

.calc-verdict-marginal {
    border-color: rgba(199, 106, 0, .35);
    background: rgba(199, 106, 0, .1);
}

.calc-verdict-marginal .calc-verdict-title {
    color: #8a5300;
}

.calc-verdict-marginal .calc-verdict-title::before {
    content: "\f071";
    background: var(--amber);
}

.calc-verdict-poor,
.calc-verdict-none {
    border-color: rgba(87, 86, 79, .2);
    background: rgba(87, 86, 79, .07);
}

.calc-verdict-poor .calc-verdict-title,
.calc-verdict-none .calc-verdict-title {
    color: var(--ink);
}

.calc-verdict-poor .calc-verdict-title::before,
.calc-verdict-none .calc-verdict-title::before {
    content: "\f00d";
    background: var(--ink-soft);
}

.calc-verdict-note {
    color: var(--ink-soft);
}

/* Bootstrap's reboot has no [hidden] rule, and the mode switch relies on one. */
#pipe-calculator [hidden],
#heat-pump-calculator [hidden],
#solar-calculator [hidden],
#radiator-calculator [hidden],
#hot-water-calculator [hidden] {
    display: none !important;
}

/* Not a verdict about the payback: the running cost goes the wrong way, so
   there is no payback to grade. Kept distinct from the grey "no" states,
   which mean the money is merely slow rather than negative. */
.calc-verdict-costup {
    border-color: rgba(107, 58, 150, .3);
    background: rgba(107, 58, 150, .08);
}

.calc-verdict-costup .calc-verdict-title {
    color: var(--accent-deep);
}

.calc-verdict-costup .calc-verdict-title::before {
    content: "\f0d8";
    background: var(--accent-deep);
}

/* Give an undersized cylinder a clear capacity warning. */
.calc-verdict-undersized {
    border-color: rgba(107, 58, 150, .3);
    background: rgba(107, 58, 150, .08);
}

.calc-verdict-undersized .calc-verdict-title {
    color: var(--accent-deep);
}

.calc-verdict-undersized .calc-verdict-title::before {
    content: "\f071";
    background: var(--accent-deep);
}

/* Not a pass/fail verdict: the energy answer is "barely any", and the real
   gain is comfort. Kept visually distinct from the green/amber/grey states. */
.calc-verdict-comfort {
    border-color: rgba(28, 28, 26, .22);
    background: rgba(28, 28, 26, .06);
}

.calc-verdict-comfort .calc-verdict-title {
    color: var(--night-soft);
}

.calc-verdict-comfort .calc-verdict-title::before {
    content: "\f05a";
    background: var(--night-soft);
}

.calc-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.calc-metric {
    padding: 16px 18px;
    border: 1px solid var(--card-border);
    border-radius: 0;
    background: #fff;
}

.calc-metric-label {
    display: block;
    margin-bottom: .3rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted);
}

.calc-metric-value {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

.calc-metric-hero {
    grid-column: span 2;
    border-color: transparent;
    background: var(--night);
}

.calc-metric-hero .calc-metric-label {
    color: rgba(255, 255, 255, .55);
}

.calc-metric-hero .calc-metric-value {
    font-size: 2rem;
    background: var(--heat-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.calc-bars {
    margin-top: 16px;
    padding: 20px 22px;
    border: 1px solid var(--card-border);
    border-radius: 0;
    background: #fff;
}

.calc-bars-title {
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
}

.calc-bar-row + .calc-bar-row {
    margin-top: .9rem;
}

.calc-bar-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: .35rem;
    font-size: .9rem;
    color: var(--ink-soft);
}

.calc-bar-head strong {
    color: var(--ink);
}

.calc-bar-track {
    height: 12px;
    border-radius: 0;
    background: var(--surface);
    overflow: hidden;
}

.calc-bar-fill {
    display: block;
    height: 100%;
    border-radius: 0;
    background: var(--heat-gradient);
    transition: width .35s ease;
}

.calc-bar-fill-cool {
    background: linear-gradient(120deg, #16745a 0%, #4fae8a 100%);
}

/* The solar model already produces one hourly profile per month. This chart
   exposes those totals without turning the compact results column into a
   twelve-row table; phones can pan the uninterrupted seasonal curve. */
.solar-monthly {
    margin-top: 16px;
    padding: 22px;
    border: 1px solid var(--card-border);
    border-radius: 0;
    background: #fff;
}

.solar-monthly-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.solar-monthly-copy {
    min-width: 0;
}

.solar-monthly-head .calc-bars-title,
.solar-monthly-head .calc-ladder-sub {
    margin-bottom: 0;
}

.solar-monthly-head .calc-ladder-sub {
    margin-top: .3rem;
}

.solar-monthly-legend {
    flex: 0 0 auto;
    display: grid;
    gap: .35rem;
}

.solar-monthly-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .55rem;
    border: 1px solid rgba(87, 86, 79, .1);
    border-radius: 0;
    background: var(--surface);
    font-size: .66rem;
    line-height: 1;
    color: var(--ink-soft);
    white-space: nowrap;
}

.solar-monthly-legend-item strong {
    font-size: .6rem;
    color: var(--ink);
}

.solar-monthly-swatch {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 0;
}

.solar-monthly-swatch-total {
    background: linear-gradient(135deg, #8d52c0 0 34%, #57564f 34% 67%, #16745a 67% 100%);
}

.solar-monthly-swatch-daily {
    background: var(--night-soft);
}

.solar-monthly-swatch-usage {
    width: 14px;
    height: 0;
    border-top: 2px dotted var(--night-soft);
    border-radius: 0;
}

.solar-monthly-scroll {
    overflow-x: auto;
    padding: .15rem 0 .2rem;
    scrollbar-width: thin;
}

.solar-monthly-scroll:focus-visible {
    border-radius: 0;
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.solar-monthly-groups {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: -.2rem 0 .9rem;
    padding: 0;
    list-style: none;
}

.solar-monthly-group {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    padding: .38rem .55rem;
    border: 1px solid rgba(87, 86, 79, .12);
    border-radius: 0;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: .68rem;
    line-height: 1.2;
}

.solar-monthly-group-swatch {
    width: 9px;
    height: 22px;
    border-radius: 0;
}

.solar-monthly-group-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.solar-monthly-group strong {
    color: var(--ink);
    font-size: .64rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.solar-monthly-chart-wrap {
    --monthly-value-height: 2rem;
    --monthly-plot-height: 108px;
    --monthly-row-gap: .35rem;
    position: relative;
    min-width: 520px;
}

.solar-monthly-chart {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.solar-monthly-chart::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: calc(var(--monthly-value-height) + var(--monthly-row-gap));
    right: 0;
    left: 0;
    height: var(--monthly-plot-height);
    background: repeating-linear-gradient(
        to top,
        var(--surface) 0,
        var(--surface) 1px,
        transparent 1px,
        transparent 25%
    );
    pointer-events: none;
}

.solar-monthly-item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: var(--monthly-value-height) var(--monthly-plot-height) auto auto;
    gap: var(--monthly-row-gap);
    min-width: 0;
    text-align: center;
}

.solar-monthly-total,
.solar-monthly-value,
.solar-monthly-label {
    overflow: hidden;
    font-size: .76rem;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--ink-soft);
}

.solar-monthly-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .12rem;
}

.solar-monthly-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
}

.solar-monthly-money {
    font-size: .62rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #16745a;
}

.solar-monthly-daily {
    display: inline-grid;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: .15rem;
    min-width: 2.6rem;
    padding: .28rem .45rem;
    border: 1px solid rgba(87, 86, 79, .14);
    border-radius: 0;
    background: rgba(87, 86, 79, .07);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.solar-monthly-daily-value {
    font-size: .7rem;
    font-weight: 700;
    color: var(--ink);
}

.solar-monthly-daily-money {
    font-size: .64rem;
    font-weight: 700;
    color: #16745a;
}

.solar-monthly-track {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: var(--monthly-plot-height);
}

.solar-monthly-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 72%;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
}

.solar-monthly-bar {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    transition: height .35s ease;
}

.solar-monthly-bar + .solar-monthly-bar {
    border-top: 1px solid rgba(255, 255, 255, .72);
}

.solar-monthly-usage-line {
    position: absolute;
    z-index: 3;
    display: block;
    top: calc(var(--monthly-value-height) + var(--monthly-row-gap));
    right: 0;
    left: 0;
    height: var(--monthly-plot-height);
    pointer-events: none;
}

.solar-monthly-usage-line::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: var(--monthly-usage-position, 0%);
    left: 0;
    border-top: 2px dotted var(--night-soft);
}

@media (max-width: 575.98px) {
    .solar-monthly-head {
        display: block;
    }

    .solar-monthly-legend {
        display: flex;
        flex-wrap: wrap;
        margin-top: .75rem;
    }

    .solar-monthly-legend-item {
        max-width: 100%;
        line-height: 1.25;
        white-space: normal;
    }

    .solar-monthly-group {
        flex: 1 1 100%;
    }
}

.calc-ladder {
    margin-top: 16px;
    padding: 20px 22px;
    border: 1px solid var(--card-border);
    border-radius: 0;
    background: #fff;
}

.calc-ladder-sub {
    margin-bottom: 1rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--muted);
}

/* Narrow panels scroll the table rather than the page. */
.calc-ladder-scroll {
    overflow-x: auto;
}

.calc-ladder-table {
    width: 100%;
    min-width: 340px;
    border-collapse: collapse;
    font-size: .95rem;
}

/* Five columns instead of four: scroll rather than crush the figures. */
.calc-ladder-table.calc-ladder-wide {
    min-width: 460px;
}

.calc-ladder-table.calc-ladder-cooldown-wide {
    min-width: 650px;
}

.calc-ladder-table th {
    padding: 0 .6rem .5rem;
    border-bottom: 1px solid var(--card-border);
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-align: left;
    color: var(--muted);
    white-space: nowrap;
}

.calc-ladder-table td {
    padding: .55rem .6rem;
    border-bottom: 1px solid var(--surface);
    color: var(--ink-soft);
    white-space: nowrap;
}

.calc-cooldown-table .calc-ladder-row {
    cursor: default;
}

.calc-cooldown-table .calc-ladder-row:hover td {
    background: transparent;
}

.calc-cooldown-table .calc-ladder-row.is-current:hover td {
    background: rgba(141, 82, 192, .07);
}

.calc-cooldown-temp {
    font-weight: 600;
    color: var(--ink) !important;
}

.calc-ladder-row {
    cursor: pointer;
    transition: background .2s ease;
}

.calc-ladder-row:hover td {
    background: var(--surface);
}

.calc-ladder-size {
    font-weight: 600;
    color: var(--ink);
}

/* Second line of the head cell: what the flow temperature costs you to reach.
   The cell is the one place in the table allowed to wrap. */
.calc-ladder-note {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    color: var(--muted);
}

#heat-pump-calculator .calc-ladder-size {
    max-width: 12rem;
    white-space: normal;
}

#heat-pump-calculator .calc-ladder-value {
    white-space: nowrap;
}

/* With two lines in the cell, an ::after on the cell itself lands under the
   second one. The star belongs beside the temperature. */
#heat-pump-calculator .calc-ladder-row.is-best .calc-ladder-size::after {
    content: none;
}

#heat-pump-calculator .calc-ladder-row.is-best .calc-ladder-value::after {
    content: "\f005";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: .45rem;
    font-size: .7rem;
    color: var(--amber);
}

/* The do-nothing baseline: readable, but clearly not one of the choices. */
.calc-ladder-row.is-baseline {
    cursor: default;
}

.calc-ladder-row.is-baseline td {
    border-bottom: 1px solid var(--card-border);
    color: var(--muted);
}

.calc-ladder-row.is-baseline:hover td {
    background: transparent;
}

.calc-ladder-row.is-baseline .calc-ladder-size {
    color: var(--ink-soft);
}

.calc-ladder-row.is-current td {
    background: rgba(141, 82, 192, .07);
}

.calc-ladder-row.is-current .calc-ladder-size {
    position: relative;
    color: var(--accent-deep);
    box-shadow: inset 3px 0 0 var(--accent);
}

.calc-ladder-row.is-best .calc-ladder-size::after {
    content: "\f005";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: .45rem;
    font-size: .7rem;
    color: var(--amber);
}

/* The bar sits behind the figure so the row stays one line. */
.calc-ladder-saving {
    position: relative;
    min-width: 108px;
}

.calc-ladder-bar {
    position: absolute;
    left: .6rem;
    top: 50%;
    height: 18px;
    transform: translateY(-50%);
    border-radius: 0;
    background: rgba(141, 82, 192, .14);
}

.calc-ladder-amount {
    position: relative;
    font-weight: 600;
    color: var(--ink);
}

/* The radiator audit is a diagnostic table rather than a set of choices. */
.radiator-room-table {
    min-width: 760px !important;
}

.radiator-room-table .radiator-action {
    min-width: 190px;
    white-space: normal;
    line-height: 1.4;
}

.radiator-status {
    display: inline-flex;
    min-width: 58px;
    justify-content: center;
    padding: .2rem .5rem;
    border-radius: 0;
    background: rgba(107, 58, 150, .09);
    font-size: .78rem;
    font-weight: 700;
    color: var(--accent-deep);
}

.radiator-result-row.is-ready .radiator-status {
    background: rgba(22, 116, 90, .1);
    color: #0f5a45;
}

.radiator-result-row.is-close .radiator-status {
    background: rgba(199, 106, 0, .14);
    color: #7a4900;
}

.radiator-result-row.is-ready .radiator-action {
    font-weight: 600;
    color: #0f5a45;
}

/* Compact pass/shortfall labels in the hot-water first-hour table. */
.hotwater-fit {
    font-size: .82rem;
    font-weight: 700;
}

.hotwater-fit.is-fit {
    color: #0f5a45;
}

.hotwater-fit.is-short {
    color: var(--accent-deep);
}

#radiator-calculator .calc-ladder-row.is-best .calc-ladder-size {
    color: #0f5a45;
}

.radiator-flow-choice {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: inherit;
    color: inherit;
}

.radiator-flow-choice:focus-visible {
    border-radius: 0;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.calc-note {
    margin-top: 14px;
    padding: 12px 16px;
    border-left: 3px solid var(--amber);
    border-radius: 0;
    background: rgba(199, 106, 0, .09);
    font-size: .88rem;
    color: var(--ink-soft);
}

.calc-disclaimer {
    margin: 14px 0 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--muted);
}

/* Method steps */

.method-step {
    display: flex;
    gap: 1rem;
    height: 100%;
    padding: 24px;
    border: 1px solid var(--card-border);
    border-radius: 0;
    background: #fff;
}

.method-step-number {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 0;
    background: var(--heat-gradient);
    font-family: var(--font-mono);
    font-weight: 700;
    color: #fff;
}

.method-step h3 {
    margin-bottom: .5rem;
    font-size: 1.1rem;
}

.method-step p {
    margin-bottom: 0;
    font-size: 1rem;
    color: var(--ink-soft);
}

@media (max-width: 991.98px) {
    .calc-results {
        position: static;
        margin-top: 2rem;
    }
}

@media (max-width: 575.98px) {
    .calc-panel {
        padding: 20px;
    }

    .calc-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .calc-metric-hero {
        grid-column: span 1;
    }
}

/* ---------- Responsive & motion ---------- */

@media (max-width: 991.98px) {
    .phone-mockup {
        margin-top: 3rem;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 72px 0 80px;
    }

    .hero-section .lead {
        font-size: 1.15rem;
    }

    .section-padding {
        padding: 64px 0;
    }

    .pricing-card-popular {
        transform: none;
    }

    .pricing-card-popular:hover {
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .scan-beam {
        animation: none;
    }

    .btn,
    .feature-card,
    .blog-card,
    .pricing-card,
    .screenshot-frame,
    .calc-preset,
    .calc-print-btn,
    .calc-bar-fill,
    .solar-monthly-bar,
    .calc-ladder-row,
    .radiator-remove-room,
    .radiator-add-room {
        transition: none;
    }
}

/* ---------- Print / PDF sheet ---------- */

/*
 * The calculators print as a one-page report: a masthead, the verdict and
 * the figures, then a plain summary of the answers that produced them. The
 * site chrome, the form controls and everything below the results are for
 * the screen only. Colour is kept to thin accents and small fills so the
 * sheet still reads when it comes out of a black and white printer.
 */
@media print {
    @page {
        size: A4 portrait;
        margin: 14mm 12mm 12mm;
    }

    html,
    body {
        width: 100%;
        min-width: 0;
        margin: 0;
        background: #fff !important;
        color: #111110;
        font-size: 10pt;
        line-height: 1.45;
    }

    /* Keep the report inside the physical page even when a print engine
       rounds CSS pixels and millimetres in opposite directions. Bootstrap
       normally supplies border-box globally, but the printable sheet should
       not depend on that reset for its critical width. */
    #calculator,
    #calculator *,
    #calculator *::before,
    #calculator *::after {
        box-sizing: border-box;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .site-nav,
    .site-footer,
    main > section:not(#calculator),
    /* The intro row only: the form is a .row too, and it is the report. */
    #calculator > .container > div.row,
    .calc-panel,
    .calc-print-btn,
    .calc-ladder-sub,
    noscript {
        display: none !important;
    }

    #calculator {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 0 !important;
        background: #fff !important;
    }

    #calculator > .container {
        width: calc(100% - 4mm);
        min-width: 0;
        max-width: calc(100% - 4mm);
        padding: 0;
        margin: 0 2mm;
    }

    /* The print helper has already put results before inputs in the DOM.
       Normal block flow is intentional: Safari ignores forced page breaks
       while these columns participate in a flex formatting context. */
    #calculator form {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

    #calculator form > [class*="col-"] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 0;
    }

    #calculator form > .calc-print-input-column {
        break-before: page;
        page-break-before: always;
    }

    /* Masthead */

    .print-header {
        display: block;
        margin-bottom: 6mm;
        padding-bottom: 3mm;
        border-bottom: 2px solid #8d52c0;
    }

    .print-brand {
        margin: 0 0 1mm;
        font-family: var(--font-mono);
        font-size: 8.5pt;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #8d52c0;
    }

    .print-title {
        margin: 0 0 1.5mm;
        font-family: var(--font-sans);
        font-size: 16pt;
        font-weight: 700;
        line-height: 1.2;
        color: #111110;
    }

    .print-meta {
        margin: 0;
        font-size: 8.5pt;
        color: #5a584f;
    }

    /* Results */

    .calc-results {
        position: static;
        top: auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
    }

    .calc-metrics,
    .solar-monthly,
    .solar-monthly-scroll,
    .solar-monthly-chart-wrap,
    .solar-monthly-chart,
    .calc-verdict,
    .calc-metric,
    .calc-ladder,
    .calc-ladder-scroll,
    .calc-note,
    .calc-disclaimer,
    .print-inputs,
    .print-inputs-body {
        min-width: 0;
        max-width: 100%;
    }

    .calc-results-head {
        display: block;
        margin-bottom: 3mm;
    }

    .calc-results-head h2 {
        font-size: 11pt;
        margin-bottom: 0;
    }

    .calc-results-head .form-text {
        display: none;
    }

    .calc-verdict,
    .calc-bars,
    .solar-monthly,
    .calc-ladder,
    .calc-metric,
    .print-inputs-group {
        break-inside: avoid;
    }

    .calc-verdict {
        padding: 4mm 5mm;
        border-radius: 0;
        border-width: 1px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .calc-verdict-title {
        font-size: 12.5pt;
        margin-bottom: 1.5mm;
    }

    .calc-verdict-title::before {
        width: 7mm;
        height: 7mm;
        font-size: 8pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .calc-verdict-note {
        font-size: 9pt;
    }

    .calc-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2mm;
        margin-top: 4mm;
    }

    .calc-metric {
        padding: 2.5mm 3mm;
        border-color: #dedcd5;
        border-radius: 0;
    }

    .calc-metric-label {
        font-size: 6.8pt;
        margin-bottom: .5mm;
    }

    .calc-metric-value {
        font-size: 12pt;
    }

    /* The dark hero tile turns into a bordered one: a solid block of navy
       is a waste of toner and unreadable if backgrounds are switched off. */
    .calc-metric-hero {
        grid-column: span 3;
        border: 1px solid #8d52c0;
        background: #fff;
    }

    .calc-metric-hero .calc-metric-label {
        color: #5a584f;
    }

    .calc-metric-hero .calc-metric-value {
        font-size: 16pt;
        background: none;
        -webkit-text-fill-color: #6b3a96;
        color: #6b3a96;
    }

    .calc-bars,
    .solar-monthly,
    .calc-ladder {
        margin-top: 4mm;
        padding: 3mm 4mm;
        border-color: #dedcd5;
        border-radius: 0;
    }

    .calc-bars-title {
        font-size: 9pt;
        margin-bottom: 2.5mm;
    }

    .calc-bar-track {
        height: 2.5mm;
        background: #f4f3ef;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .calc-bar-fill {
        background: #8d52c0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .calc-bar-fill-cool {
        background: #16745a;
    }

    .solar-monthly-scroll {
        overflow: visible;
        padding: 0;
    }

    .solar-monthly-chart-wrap {
        --monthly-value-height: 16pt;
        --monthly-plot-height: 20mm;
        min-width: 0;
    }

    .solar-monthly-chart {
        gap: 1.2mm;
    }

    .solar-monthly-head {
        margin-bottom: 2mm;
    }

    .solar-monthly-bar {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .solar-monthly-groups {
        gap: 1mm;
        margin-bottom: 2mm;
    }

    .solar-monthly-group {
        padding: .8mm 1.2mm;
        font-size: 5.5pt;
    }

    .solar-monthly-group-swatch {
        width: 2mm;
        height: 5mm;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .solar-monthly-group strong {
        font-size: 5.5pt;
    }

    .solar-monthly-usage-line::before {
        border-color: #57564f;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .solar-monthly-total,
    .solar-monthly-value,
    .solar-monthly-label {
        font-size: 6.5pt;
    }

    .solar-monthly-money,
    .solar-monthly-daily-value,
    .solar-monthly-daily-money {
        font-size: 6pt;
    }

    .solar-monthly-daily {
        min-width: 0;
        padding: .7mm 1mm;
    }

    /* Two bar blocks in a row on the solar sheet: side by side rather than
       stacked, or the report runs onto a second page. */
    #solar-calculator .calc-bars + .calc-bars {
        margin-top: 3mm;
    }

    .calc-ladder-scroll {
        overflow: visible;
    }

    .calc-ladder-table,
    .calc-ladder-table.calc-ladder-wide {
        min-width: 0;
        font-size: 8.5pt;
    }

    .calc-ladder-table td {
        padding: 1.2mm .6rem;
    }

    #radiator-calculator .radiator-room-table {
        min-width: 0 !important;
        font-size: 7.5pt;
    }

    #radiator-calculator .radiator-room-table th,
    #radiator-calculator .radiator-room-table td {
        padding-right: .35rem;
        padding-left: .35rem;
    }

    #radiator-calculator .radiator-room-table .radiator-action {
        min-width: 0;
    }

    #radiator-calculator .radiator-status {
        min-width: 0;
        padding: 0;
        background: transparent;
        color: #111110;
    }

    .calc-ladder-bar {
        background: #e5d6f4;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .calc-note,
    .calc-disclaimer {
        font-size: 8pt;
    }

    .calc-note {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* The answers, in place of the form that collected them */

    .print-inputs {
        display: block;
        margin-top: 0;
        break-inside: auto;
    }

    .print-section-title {
        margin: 0 0 3mm;
        padding-bottom: 1.5mm;
        border-bottom: 1px solid #111110;
        break-after: avoid;
        page-break-after: avoid;
        font-family: var(--font-sans);
        font-size: 10pt;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: #111110;
    }

    /* Two columns keeps the summary to a few centimetres; the groups are
       kept whole so a heading never ends up alone at the foot of a column. */
    .print-inputs-body {
        column-count: 2;
        column-gap: 8mm;
    }

    .print-inputs-group {
        margin-bottom: 4mm;
    }

    .print-inputs-title {
        margin: 0 0 1.5mm;
        padding-bottom: 1mm;
        border-bottom: 1px solid #dedcd5;
        break-after: avoid;
        page-break-after: avoid;
        font-family: var(--font-sans);
        font-size: 8pt;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #5a584f;
    }

    .print-inputs-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 4mm;
        padding: .8mm 0;
        border-bottom: 1px dotted #e6e4dd;
        font-size: 8.5pt;
    }

    .print-inputs-label {
        color: #57564f;
    }

    .print-inputs-value {
        flex-shrink: 0;
        max-width: 55%;
        font-weight: 600;
        text-align: right;
        color: #111110;
    }

    .print-footer {
        display: block;
        margin: 6mm 0 0;
        padding-top: 2mm;
        border-top: 1px solid #dedcd5;
        font-size: 7.5pt;
        color: #5a584f;
    }

    a[href]::after {
        content: none;    /* no bracketed URLs after every link */
    }
}