@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');

/* ===========================================================================
   ampernova.com -- mobile first.
   ---------------------------------------------------------------------------
   Every rule outside a media query describes a phone. Wider screens only ever
   ADD to that, through `min-width` queries, so the narrowest layout is the one
   that is written down rather than the one left over after four rounds of
   overrides.

   Breakpoints, and what each is actually for:

     (base)            small phones, from 320px up
     min-width  480px  large phones: two columns start to fit
     min-width  768px  tablets and up: side-by-side layouts and the larger
                       type scale
     min-width  900px  the navigation comes inline and the menu button goes
                       away; site.js closes the mobile menu at this width too
     min-width 1100px  wide desktop: full gutters and the manual's sidebar
     min-width 1500px  a little more air in the hero

   The print block comes last and is not part of that ladder: paper is neither
   narrow nor wide, it is its own medium.
   =========================================================================== */

:root {
  --paper: #f8f7f3;
  --white: #fffefa;
  --ink: #0a2443;
  --muted: #566570;
  --line: #d9ddd5;
  --orange: #f5793b;
  --orange-dark: #a4431c;
  --peach: #f8e8dc;
  --teal: #2b756c;
  --mint: #e1ece4;
  --radius: 5px;
  /* The side gutter, and the sticky header's height, both of which several
     rules need to agree on. */
  --gutter: 20px;
  --header-height: 74px;
}
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
  /* Landscape on iOS otherwise inflates body text and breaks the layout. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 'DM Sans', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* A single over-wide child must not make the whole page slide sideways.
     `clip` rather than `hidden`, which would kill the sticky header. */
  overflow-x: clip;
}
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
::selection { color: var(--ink); background: #f5c4a4; }
a { color: inherit; text-underline-offset: 5px; }
a:hover { color: var(--orange-dark); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 5px; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 {
  font-family: 'Manrope', Arial, sans-serif; line-height: 1.12; font-weight: 600;
  letter-spacing: -.045em; text-wrap: balance;
  /* A last resort, not a style: a single long compound -- Polish
     "pomieszczenie", German "Installationsanleitung" -- is wider at heading
     size than a 320px screen, and would otherwise widen the page. It only
     takes effect when the word genuinely cannot fit. */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.9rem, 9.9vw, 5.35rem); }
h2 { font-size: clamp(2.05rem, 7vw, 3.65rem); }
h3 { font-size: 1.5rem; }
p { color: var(--muted); }
img, svg { max-width: 100%; }
img { display: block; }
/* Long identifiers -- net names, connector designators -- must not push a
   phone-width table sideways. */
code { overflow-wrap: anywhere; }

.wrap { width: calc(100% - var(--gutter) * 2); margin-inline: auto; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--teal); }
.eyebrow::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.eyebrow.warm { color: var(--orange-dark); }
.section-number { font-size: 9px; font-weight: 600; letter-spacing: .13em; color: var(--muted); }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; background: var(--ink); color: white; padding: 12px 24px; }
.skip-link:focus { top: 12px; color: white; }

/* --- Header ------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 30; background: rgb(248 247 243 / 96%); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.header-inner { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-block: 14px; }
/* The logo is the way back to the homepage on every page, so it gets a real
   touch target rather than the bare height of its image. */
.brand { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; margin-right: auto; }
.brand img { width: 148px; height: auto; }
/* The nav is the third item on a phone, on its own row under the logo and the
   two controls; from 768px up it sits inline and the toggle disappears. */
.site-nav { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 550; text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--orange-dark); }
.site-nav .nav-guide { border: 1px solid var(--ink); border-radius: var(--radius); padding: 8px 14px; min-height: 42px; }
.nav-guide span { margin-left: 14px; }
.nav-guide:hover { background: var(--ink); color: var(--white); }
.menu-toggle { display: block; order: 3; min-height: 42px; border: 1px solid var(--line); background: transparent; border-radius: var(--radius); padding: 8px 13px; color: var(--ink); }
/* Without JavaScript the toggle stays hidden and the nav is simply always
   open, so the links still work. */
.has-menu .site-nav { display: none; }
.has-menu .site-nav.is-open { display: flex; }
html:not(.has-menu) .site-header { position: static; }

/* --- Language switcher -------------------------------------------------- */
/* A <details>, so it opens without script. On a phone it sits between the logo
   and the menu button; from 768px up it is the last item on the header row.
   The FAQ's <details> styling further down would otherwise give it a rule
   underneath and a +/- marker, so both are cleared here. */
.lang-switch { position: relative; order: 2; border: 0; }
.lang-switch > summary::after { content: none; }
/* Below 480px only the flag and caret fit beside the logo and the menu
   button; the language code comes back as soon as there is room. */
.lang-switch .lang-code { display: none; }
.lang-switch > summary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  list-style: none;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover { border-color: var(--ink); }
.lang-switch .flag { display: block; width: 22px; height: auto; flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgb(10 36 67 / 14%); }
.lang-caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 3px; }
.lang-switch[open] .lang-caret { transform: rotate(180deg); margin-top: -3px; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 195px; padding: 14px 8px 8px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 7px; box-shadow: 0 14px 34px rgb(10 36 67 / 15%);
}
.lang-menu-title { margin: 0 10px 8px; font-size: 9px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.lang-menu ul { list-style: none; margin: 0; padding: 0; }
.lang-menu a { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 8px 10px; border-radius: 4px; font-size: 13px; text-decoration: none; white-space: nowrap; }
.lang-menu a:hover { background: var(--mint); color: var(--ink); }
.lang-menu a[aria-current] { font-weight: 650; background: #eef1e9; }

/* --- Buttons and links -------------------------------------------------- */
.button { max-width: 100%; min-height: 50px; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; padding: 13px 19px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--white); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; transition: background .2s, transform .2s; }
.button:hover { background: #234260; color: white; transform: translateY(-2px); }
.button-light { background: transparent; color: var(--ink); border-color: var(--line); }
.button-light:hover { background: var(--mint); color: var(--ink); }
.button-orange { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.button-orange:hover { background: #ff9a65; color: var(--ink); }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 12px; font-weight: 650; text-decoration: none; }
.text-link span { font-size: 20px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-top: 32px; }

/* --- Hero --------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1fr; gap: 38px; align-items: center; padding-top: 43px; padding-bottom: 35px; }
.hero h1 { margin-top: 24px; }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero-copy > p { margin-top: 25px; max-width: 43ch; font-size: 16px; line-height: 1.75; }
.hero-note { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--muted); margin-top: 23px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.room-visual { position: relative; overflow: hidden; max-width: 540px; width: 100%; margin-inline: auto; border: 1px solid #d5ded3; border-radius: 8px; background: #e8ede3; }
.visual-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 16px 0; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.visual-heading > span { color: var(--teal); display: flex; align-items: center; gap: 7px; }
.season-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 22px 10px 18px; }
.season-card { min-width: 0; overflow: hidden; border: 1px solid #d6dcd1; border-radius: 6px; background: #f8f7ef; }
.season-summer { background: #eef4f2; }
.season-card h2 { margin: 0; padding: 18px 12px 0; color: #92603b; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.season-summer h2 { color: #367b9f; }
.season-card h2 span { display: block; margin-top: 8px; color: var(--ink); font-size: clamp(15px, 4vw, 21px); letter-spacing: -.03em; text-transform: none; }
.season-card img { display: block; width: 100%; height: auto; }
.season-card p { margin: 0; padding: 0 12px 20px; font-size: 11px; line-height: 1.6; }
.visual-caption { border-top: 1px solid #d2dcd0; padding: 14px 17px; font-size: 11px; line-height: 1.6; }
.visual-caption strong { display: block; font-size: 9px; letter-spacing: .12em; font-weight: 600; text-transform: uppercase; margin-bottom: 4px; color: var(--teal); }

/* --- Quick facts -------------------------------------------------------- */
.quick-facts { display: grid; grid-template-columns: 1fr 1fr; row-gap: 21px; padding: 25px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quick-facts > div { padding-right: 12px; border-right: 1px solid var(--line); }
.quick-facts > div:nth-child(even) { padding-left: 20px; border: 0; }
.quick-facts strong { display: block; font-size: 14px; font-weight: 550; }
.quick-facts span { font-size: 10px; color: var(--muted); }

/* --- Sections ----------------------------------------------------------- */
.section { padding-block: 65px; }
.section-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.section-heading { display: grid; grid-template-columns: 1fr; align-items: end; gap: 26px; }
.section-heading > p { max-width: 55ch; font-size: 15px; }
.benefits { margin-top: 30px; display: grid; grid-template-columns: 1fr; gap: 13px; }
.benefit { border: 1px solid var(--line); padding: 27px; border-radius: var(--radius); }
.benefit:nth-child(2) { background: var(--peach); border-color: var(--peach); }
.benefit:nth-child(3) { background: var(--mint); border-color: var(--mint); }
.benefit h3 { margin-block: 15px 13px; font-size: 22px; }
.benefit p { font-size: 14px; }
.feature-icon { width: 37px; height: 37px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* --- The system --------------------------------------------------------- */
.system-section { background: #eeefe8; border-block: 1px solid var(--line); }
.system-grid { display: grid; grid-template-columns: 1fr; margin-top: 30px; gap: 20px; }
.system-item { position: relative; }
.system-art { height: 185px; border: 1px solid #d6dbd0; display: flex; justify-content: center; align-items: center; background: #f8f9f4; border-radius: var(--radius); position: relative; }
.system-item .section-number { display: block; margin-top: 20px; color: var(--teal); }
.system-item h3 { margin-block: 10px; font-size: 23px; }
.system-item p { font-size: 14px; }
.thermostat { width: 142px; padding: 14px; border: 1px solid #d2d6ca; background: #fbfaf6; border-radius: 7px; box-shadow: 5px 7px 0 #dfe3d8; transform: rotate(-5deg); }
.thermostat-screen { background: #e5e8dc; border: 1px solid #b8c1b1; padding: 10px; font-family: monospace; color: #303d35; }
.thermostat-screen .screen-top { font-size: 9px; display: flex; justify-content: space-between; align-items: center; height: 14px; }
.thermostat-screen .heat-glyph { width: 14px; height: 24px; }
.thermostat-screen .temperature { display: block; font-size: 35px; line-height: 1.7; text-align: center; letter-spacing: -3px; }
.thermostat-screen .screen-bottom { display: flex; justify-content: space-between; font-size: 9px; }
.controller { width: 155px; background: var(--ink); color: white; border-radius: 4px; padding: 15px; box-shadow: 5px 7px 0 #dfe3d8; }
.controller-top { display: flex; align-items: center; gap: 9px; font-size: 10px; }
.controller-top .status-dot { background: #a1d5b1; }
.relay-bank { display: flex; justify-content: space-between; gap: 4px; margin-top: 21px; }
.relay-bank i { background: #3e665d; border: 1px solid #6d978b; border-radius: 2px; width: 14px; height: 18px; position: relative; }
.relay-bank i::after { content: ''; position: absolute; width: 4px; height: 4px; border: 1px solid #bbc8a9; border-radius: 50%; top: 5px; left: 4px; }
.relay-labels { font: 8px monospace; color: #c1d0d5; margin-top: 7px; display: flex; justify-content: space-between; }
.connection-art { width: 150px; }
.connection-row { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding-block: 10px; font-size: 12px; border-bottom: 1px solid var(--line); }
.connection-row strong { font-size: 14px; font-weight: 500; }
.connection-title { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 5px; color: var(--teal); }
.art-note { margin-top: 24px; font-size: 11px; color: var(--muted); }

/* --- Local by design ---------------------------------------------------- */
.independent { padding-block: 60px; background: var(--ink); color: var(--white); }
.independent .wrap { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
.independent .eyebrow { color: #a0c6b3; margin-bottom: 26px; }
.independent p { color: #bbc8d2; font-size: 15px; margin-bottom: 28px; }
.independent .text-link { color: var(--white); }
.independent :focus-visible, .site-footer :focus-visible { outline-color: #a0c6b3; }
.offline-line { display: flex; align-items: center; gap: 10px; color: #c4d3da; font-size: 11px; margin-top: 22px; }
.offline-line .status-dot { background: #a0c6b3; }

/* --- For installers ----------------------------------------------------- */
.installer-layout { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
.installer-copy h2 { margin-block: 25px 22px; }
.installer-copy > p { max-width: 42ch; font-size: 15px; }
.installer-steps { list-style: none; margin: 20px 0 0; padding: 0; }
.installer-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 20px; border-bottom: 1px solid var(--line); padding-block: 24px; }
.installer-steps li:first-child { padding-top: 0; }
.step-badge { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; }
.installer-steps h3 { font-size: 20px; margin-bottom: 9px; }
.installer-steps p { font-size: 14px; }
.guide-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; background: var(--peach); padding: 27px; margin-top: 35px; border-radius: var(--radius); }
.guide-banner h3 { font-size: 24px; margin-bottom: 7px; }
.guide-banner p { font-size: 13px; }
.guide-banner .button { flex-shrink: 0; }

/* --- FAQ ---------------------------------------------------------------- */
.faq-section { padding-top: 0; }
.faq-layout { display: grid; grid-template-columns: 1fr; gap: 26px; border-top: 1px solid var(--line); padding-top: 45px; }
.faq-layout h2 { margin-top: 22px; }
details { border-bottom: 1px solid var(--line); }
details:first-child { border-top: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; padding: 20px 0; min-height: 44px; font-size: 16px; font-weight: 550; line-height: 1.5; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 22px; color: var(--teal); font-weight: 400; }
details[open] summary::after { content: '−'; }
details > p { font-size: 14px; padding: 0 4px 24px 0; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #fffefa; padding-block: 48px 25px; }
.footer-top { display: flex; flex-direction: column; align-items: start; gap: 26px; padding-bottom: 30px; }
.footer-brand { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 500; letter-spacing: -.04em; }
.footer-brand a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); }
.footer-brand img { width: 28px; filter: brightness(0) invert(1); }
.footer-top p { color: #bbc8d2; font-size: 12px; margin-top: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 26px; font-size: 13px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-footer a:hover { color: #f6ae83; }
.footer-bottom { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #36506a; padding-top: 22px; font-size: 10px; color: #bbc8d2; }

/* --- Installation manual ------------------------------------------------ */
.manual-hero { padding-block: 25px 35px; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 11px; color: var(--muted); margin-bottom: 27px; }
.breadcrumb a { text-decoration: none; }
.manual-title-row { display: flex; flex-direction: column; align-items: start; gap: 23px; }
.manual-hero h1 { font-size: clamp(2.5rem, 9vw, 4.5rem); margin-top: 18px; }
.manual-hero p { max-width: 62ch; margin-top: 21px; font-size: 15px; }
.manual-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 25px; font-size: 11px; color: var(--muted); }
.manual-meta span { display: inline-flex; gap: 8px; align-items: center; }
.manual-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 38px; padding-block: 30px 100px; }
.manual-content { min-width: 0; }
.manual-sidebar { align-self: start; position: static; }
.contents-title { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 650; margin-bottom: 18px; }
.contents { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--line); }
.contents a { display: flex; align-items: center; min-height: 44px; padding: 9px 11px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; font-size: 11px; color: var(--muted); }
.contents a span { font-size: 10px; margin-right: 10px; color: var(--teal); }
.contents a[aria-current], .contents a:hover { background: #e8ece4; color: var(--ink); border-left-color: var(--teal); }
.sidebar-note { display: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-top: 28px; }
.sidebar-note strong { font-size: 12px; font-weight: 550; }
.sidebar-note p { font-size: 11px; margin-top: 8px; }
.manual-section { padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--line); scroll-margin-top: 8px; }
.manual-section:first-child { border: 0; margin: 0; padding: 0; }
.manual-section .eyebrow { margin-bottom: 15px; }
.manual-section h2 { font-size: clamp(1.7rem, 6.4vw, 2rem); margin-bottom: 23px; }
.manual-section h3 { font-size: 20px; letter-spacing: -.025em; margin-block: 27px 13px; }
.manual-section p { font-size: 14px; margin-block: 13px; }
.manual-section li { font-size: 14px; color: var(--muted); padding-left: 4px; margin-bottom: 12px; }
.manual-section li strong { color: var(--ink); font-weight: 600; }
.manual-section ol, .manual-section ul { padding-left: 22px; margin-block: 18px; }
.notice { padding: 18px 20px; border-left: 3px solid var(--orange); background: var(--peach); border-radius: 0 var(--radius) var(--radius) 0; margin-block: 25px; }
.notice strong { font-size: 13px; font-weight: 650; }
.notice p { margin: 7px 0 0; font-size: 13px; }
.notice.info { border-left-color: var(--teal); background: var(--mint); }
.parts-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
.part { padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); }
.part h3 { margin: 0; font-size: 16px; }
.part p { margin-bottom: 0; font-size: 13px; }
.bus-map { padding: 12px; background: #eeefe8; border: 1px solid var(--line); border-radius: var(--radius); margin-block: 25px; }
.bus-map img { width: 100%; }
figcaption { font-size: 11px; color: var(--muted); margin-top: 12px; }
.table-scroll { overflow-x: auto; margin-block: 23px; border: 1px solid var(--line); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
caption { text-align: left; padding: 14px 15px; font-weight: 600; background: #eef0e8; }
th { font-size: 11px; font-weight: 600; background: #eef0e8; color: var(--ink); }
td, th { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
td { color: var(--muted); }
tr:last-child td { border-bottom: 0; }
code { background: #e9ece4; color: var(--ink); border-radius: 3px; padding: 2px 5px; font-size: .92em; }
.menu-path { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 18px; font-size: 12px; }
.menu-path span { background: #e9ece4; padding: 5px 10px; border: 1px solid var(--line); border-radius: 3px; }
.menu-path i { color: var(--muted); font-style: normal; }
.manual-section details > p { margin: 0; }
.checklist-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11px; color: var(--teal); margin-block: 24px; }
progress { height: 5px; width: 110px; border: 0; border-radius: 3px; background: var(--line); accent-color: var(--teal); }
progress::-webkit-progress-bar { background: var(--line); border-radius: 3px; }
progress::-webkit-progress-value { background: var(--teal); border-radius: 3px; }
progress::-moz-progress-bar { background: var(--teal); border-radius: 3px; }
.handover-list { display: grid; gap: 9px; }
.handover-list label { display: flex; align-items: start; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; cursor: pointer; }
.handover-list label:has(input:checked) { background: var(--mint); border-color: #b7cebb; }
.handover-list input { width: 20px; height: 20px; flex-shrink: 0; margin: 2px 0 0; accent-color: var(--teal); }
.manual-end { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 35px; padding-top: 25px; border-top: 1px solid var(--line); }
.manual-end a { max-width: 100%; }

/* --- 404 ---------------------------------------------------------------- */
.error-main { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 60px; }
/* `place-items: center` sizes the centred block to its max-content, which a
   long translated heading pushes past the gutter. */
.error-main > * { max-width: 100%; min-width: 0; }
.error-main .eyebrow { justify-content: center; margin-bottom: 25px; }
.error-main p { max-width: 42ch; margin: 25px auto; }
.error-main .actions { justify-content: center; }

/* ===========================================================================
   480px and up -- large phones.
   =========================================================================== */
@media (min-width: 480px) {
  :root { --gutter: 24px; }
  .section-number { font-size: 11px; }
  .brand img { width: 171px; }
  .lang-switch .lang-code { display: inline; }
  .lang-switch > summary { padding-inline: 11px; }
  .visual-heading { padding: 24px 25px 0; font-size: 10px; }
  .season-pair { gap: 12px; padding-inline: 16px; }
  .season-card h2 { padding-inline: 16px; }
  .season-card p { padding-inline: 16px; font-size: 12px; line-height: 1.65; }
  .visual-caption { padding: 16px 25px 20px; min-height: 84px; }
  .system-item { display: grid; grid-template-columns: 185px 1fr; gap: 22px; align-items: center; }
  .system-item .section-number { margin-top: 0; }
  .system-item h3 { font-size: 21px; }
  .system-art { height: 180px; }
  .parts-grid { grid-template-columns: 1fr 1fr; }
  .manual-end { flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: center; }
  .guide-banner { padding: 30px 32px; }
  .bus-map { padding: 25px; }
  .hero .text-link { font-size: 13px; gap: 22px; }
}

/* ===========================================================================
   768px and up -- side-by-side layouts and the larger type scale. The header
   is still the phone one here; it changes at 900px.
   =========================================================================== */
@media (min-width: 768px) {
  :root { --gutter: 32px; --header-height: 88px; }
  .actions { gap: 18px; }
  .text-link { font-size: 13px; gap: 22px; }
  .hero { grid-template-columns: 1fr 1.05fr; gap: 32px; padding-top: 65px; padding-bottom: 58px; }
  .hero-copy > p { font-size: 15px; max-width: 38ch; }
  .hero-note { margin-top: 36px; }
  .hero .button { padding-inline: 16px; gap: 15px; }
  .room-visual { max-width: none; }

  .quick-facts { grid-template-columns: repeat(4, 1fr); row-gap: 0; }
  .quick-facts > div { padding-inline: 28px; border-right: 1px solid var(--line); }
  .quick-facts > div:nth-child(even) { padding-left: 28px; border-right: 1px solid var(--line); }
  .quick-facts > div:first-child { padding-left: 0; }
  .quick-facts > div:last-child { border-right: 0; }
  .quick-facts strong { font-size: 15px; }
  .quick-facts span { font-size: 11px; }

  .section { padding-block: 100px; }
  .section-top { margin-bottom: 30px; }
  .section-heading, .installer-layout, .independent .wrap, .faq-layout { grid-template-columns: 1fr 1fr; gap: 40px; }
  .section-heading > p { max-width: 48ch; }
  .benefits { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 45px; }
  .benefit { padding: 25px; }
  .benefit h3 { margin-top: 23px; }

  .system-grid { grid-template-columns: 1fr 1fr 1fr; gap: 36px; margin-top: 50px; }
  .system-item { display: block; }
  .system-item .section-number { margin-top: 25px; }
  .system-item h3 { font-size: 23px; }
  .system-art { height: 205px; }
  .system-item:not(:last-child) .system-art::after { content: '↔'; position: absolute; right: -29px; font-size: 19px; color: var(--teal); }
  .thermostat { width: 166px; }
  .controller { width: 185px; padding: 20px; }
  .connection-art { width: 190px; }

  .independent { padding-block: 85px; }
  .independent p { font-size: 16px; }
  .offline-line { margin-top: 30px; }
  .installer-steps { margin-top: 0; }
  .guide-banner { flex-direction: row; align-items: center; justify-content: space-between; gap: 30px; padding: 35px 40px; margin-top: 55px; }
  .faq-layout { grid-template-columns: .8fr 1.2fr; padding-top: 65px; }
  details > p { padding-right: 28px; }
  summary { padding-block: 22px; }

  .footer-top { flex-direction: row; align-items: start; justify-content: space-between; gap: 40px; padding-bottom: 42px; }
  .footer-links { gap: 26px; font-size: 12px; }
  .footer-links a { min-height: 0; }
  .footer-bottom { flex-direction: row; justify-content: space-between; gap: 20px; }

  .manual-hero { padding-block: 42px 52px; }
  .breadcrumb { margin-bottom: 37px; }
  .manual-title-row { flex-direction: row; justify-content: space-between; align-items: end; gap: 30px; }
  .manual-hero h1 { font-size: clamp(3rem, 5vw, 4.5rem); }
  .manual-hero p { font-size: 16px; }
  .manual-layout { grid-template-columns: 185px minmax(0, 1fr); gap: 42px; padding-top: 54px; }
  .manual-sidebar { position: sticky; top: calc(var(--header-height) + 34px); }
  .contents { display: flex; flex-direction: column; }
  .contents a { padding: 9px 15px; font-size: 12px; min-height: 0; }
  .sidebar-note { display: block; }
  .manual-section { margin-top: 42px; padding-top: 42px; }
  .manual-section h2 { font-size: 32px; }
  .notice { padding: 20px 24px; }
  .part { padding: 20px; }
  .parts-grid { gap: 12px; }
  .caption, caption { padding: 14px 17px; }
  td, th { padding: 13px 17px; }
  code { white-space: nowrap; }
  progress { width: 130px; }
  .error-main { min-height: 65vh; padding-block: 90px; }
}

/* ===========================================================================
   900px and up -- the navigation comes inline and the menu button goes away.

   This is deliberately NOT the 768px breakpoint. At 768 the English labels fit
   on one row and the German ones overflow it by a few pixels, and every
   language is longer than English somewhere. site.js closes the mobile menu at
   this same width, so the two files have to agree.
   =========================================================================== */
@media (min-width: 900px) {
  .header-inner { flex-wrap: nowrap; gap: 20px; padding-block: 0; }
  .site-nav { order: 0; flex-basis: auto; flex-wrap: nowrap; gap: 18px; margin-left: auto; }
  .site-nav a { font-size: 13px; min-height: 0; }
  .site-nav .nav-guide { padding: 10px 16px; }
  .menu-toggle, .has-menu .menu-toggle { display: none; }
  .has-menu .site-nav { display: flex; }
  html:not(.has-menu) .site-header { position: sticky; }
  .brand { margin-right: 0; }
  .lang-switch { order: 0; }
}

/* ===========================================================================
   1100px and up -- full gutters and the wide manual sidebar.
   =========================================================================== */
@media (min-width: 1100px) {
  :root { --gutter: 48px; }
  .wrap { width: min(1240px, calc(100% - var(--gutter) * 2)); }
  .site-nav { gap: 30px; }
  .hero { gap: 54px; }
  .hero-copy > p { font-size: 17px; }
  .hero .actions { gap: 25px; }
  .hero .button { padding-inline: 21px; gap: 24px; }
  .section-heading { gap: 70px; }
  .installer-layout, .independent .wrap, .faq-layout { gap: 80px; }
  .benefit { padding: 32px; }
  .manual-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 72px; }
}

@media (min-width: 1500px) { .hero { padding-block: 85px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  @page { margin: 17mm; }
  :root { --paper: white; --muted: #333; --line: #bbb; }
  body { background: white; color: #111; font-size: 11pt; }
  .site-header, .site-footer, .manual-sidebar, .breadcrumb, [data-print], .manual-end, .skip-link, .lang-switch { display: none !important; }
  .wrap { width: 100%; }
  .manual-hero { padding: 0 0 18px; }
  .manual-hero h1 { font-size: 32pt; }
  .manual-layout { display: block; padding: 25px 0 0; }
  .manual-section { margin-top: 25px; padding-top: 25px; }
  .manual-section h2 { font-size: 22pt; }
  h2, h3, summary { break-after: avoid; }
  .notice, .part, tr, .handover-list label, .bus-map { break-inside: avoid; }
  .table-scroll { overflow: visible; }
  .notice, .part, .handover-list label { print-color-adjust: exact; }
  a { text-decoration: none; }
  details > * { display: block; }
  details::details-content { display: block; content-visibility: visible; }
  summary { padding-block: 12px; }
  summary::after { display: none; }
  .handover-list { gap: 6px; }
  .handover-list label { padding: 10px; }
  .parts-grid { grid-template-columns: 1fr 1fr; }
  .section-heading, .installer-layout, .faq-layout { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
   Board-specific installation reference.
   Same rule: the phone layout is the base, wider screens add to it.
   =========================================================================== */
.system-overview.manual-section { margin-top: 0; padding-block: 34px; border-top: 0; }
.system-overview h2 { margin: 0; font-size: clamp(1.8rem, 6.6vw, 3.2rem); }
.system-figure { margin: 30px 0 0; }
.system-alternative { margin: 30px 0 0; scroll-margin-top: calc(var(--header-height) + 27px); }
.system-alternative figcaption { margin-top: 11px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.multicore-link { font-size: 12px; padding-bottom: 10px; }
.system-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 18px; margin-top: 25px; }
.system-controls label { display: grid; gap: 7px; font-size: 12px; }
.system-controls select { min-height: 44px; font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 5px; padding: 10px 32px 10px 12px; }
.system-controls > span { font-size: 12px; color: var(--muted); padding-bottom: 10px; }
.system-print { display: none; }
/* Diagram frames. The drawing always fits the column and the reader zooms in
   on the detail; it is never a horizontal scroller. A nested sideways scroll
   inside a vertically scrolling page is miserable on a phone, and the page's
   own viewport allows pinch-zoom, which is the better tool for a schematic. */
.system-scroll, .wiring-scroll { border: 1px solid #d4ddd0; border-radius: 7px; background: #f4f5ee; }
.system-scroll svg, .wiring-scroll svg { display: block; width: 100%; height: auto; }
.wiring-figure { margin: 24px 0; }
.wiring-figure figcaption, .system-figure figcaption { margin-top: 11px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.wire-key { display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 22px 0 12px; }
.wire-key > span { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; }
.wire-swatch { display: inline-block; width: 24px; height: 5px; border-radius: 2px; background: var(--wire-color); flex-shrink: 0; }
.wire-swatch.red { --wire-color: #c84444; } .wire-swatch.black { --wire-color: #263038; }
.wire-swatch.yellow { --wire-color: #b58a0a; } .wire-swatch.orange { --wire-color: #d36b28; }
.wire-swatch.violet { --wire-color: #8560ab; background: repeating-linear-gradient(90deg, var(--wire-color) 0 6px, transparent 6px 9px); }
.wire-swatch.blue { --wire-color: #2674be; } .wire-swatch.brown { --wire-color: #805235; }
.wire-swatch.pe { background: repeating-linear-gradient(110deg, #34816b 0 5px, #e4c940 5px 10px); }
.diagram-note { font-size: 12px !important; color: var(--muted); line-height: 1.7; }
.zone-banks { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
.zone-bank { background: #edf1e8; border: 1px solid #c9d5c2; border-radius: 6px; padding: 16px; }
.zone-bank h4 { font-size: 14px; margin: 0 0 17px; }
.zone-pins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.zone-pin { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px; background: #fffefa; border: 1px solid #d5d8c8; border-radius: 4px; }
.zone-pin > span { font-size: 11px; color: var(--muted); }
.zone-pin strong { font-size: 13px; white-space: nowrap; }
.zone-pin small { font-size: 9px; text-align: center; line-height: 1.4; }
.zone-pin .wire-swatch { width: 5px; height: 22px; }
.neutral-callout { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 25px 0; }
.neutral-callout > span { padding: 20px 12px; background: #f1f2e9; text-align: center; font-size: 12px; border: 1px solid #c7d0c3; border-radius: 6px; }
.neutral-callout strong { display: block; margin-top: 8px; font-size: 15px; }
.neutral-callout small { display: block; margin-top: 6px; }
.neutral-callout .common-neutral { background: #e9f2fb; border-color: #88b0d9; color: #2163a1; }
.service-callouts { display: grid; grid-template-columns: 1fr; gap: 18px; }
.service-callouts > div { padding: 18px; background: #f4f5ee; border-radius: 5px; }
.service-callouts h4 { margin: 0; }
.pcb-reference-link { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 28px; font-size: 12px !important; }
.pcb-reference-link a { display: inline-flex; align-items: center; min-height: 44px; }
.pcb-reference-link span { color: var(--muted); }
.debug-page { padding-block: 40px 60px; }
.debug-page h1 { font-size: clamp(2.1rem, 8vw, 4.5rem); margin-block: 18px; }
.debug-page h2 { margin-top: 40px; }
.debug-page > p { max-width: 90ch; line-height: 1.8; }

@media (min-width: 768px) {
  .system-overview.manual-section { padding-block: 50px 40px; }
  .system-overview h2 { font-size: clamp(2.1rem, 3.6vw, 3.2rem); }
  .wire-key { gap: 12px 24px; }
  .wire-key > span { font-size: 12px; }
  .zone-banks, .service-callouts { grid-template-columns: 1fr 1fr; }
  .zone-bank { padding: 18px; }
  .zone-pins { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .neutral-callout { grid-template-columns: 1fr 1.4fr 1fr; }
  .debug-page { padding-block: 48px 70px; }
}

@media print {
  .system-controls, .system-figure { display: none !important; }
  .system-print { display: block; }
  .system-alternative, .system-alternative[hidden] { display: block !important; break-inside: avoid; }
  .system-print figure { break-inside: avoid; margin-block: 18px; }
  .system-print img { width: 100%; }
  .system-print figcaption { font-size: 10px; }
  .system-figure, .wiring-figure, .zone-bank, .neutral-callout { break-inside: avoid; print-color-adjust: exact; }
  .wire-swatch, .common-neutral { print-color-adjust: exact; }
  .pcb-reference-link { display: none; }
  .zone-banks, .service-callouts { grid-template-columns: 1fr 1fr; }
  .neutral-callout { grid-template-columns: 1fr 1.4fr 1fr; }
  .zone-pins { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pcb-overview.manual-section { margin-top: 0; padding-block: 34px; border-top: 0; border-bottom: 1px solid var(--line); }
.pcb-overview h2 { font-size: clamp(1.8rem, 6.6vw, 3.2rem); margin: 0; }
.pcb-overview .section-heading p { margin: 0; font-size: 15px; }
.pcb-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 24px 0 18px; }
.pcb-controls label { display: grid; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); }
.pcb-controls label:first-child { flex: 1 1 190px; }
.pcb-controls label:first-child select { width: 100%; }
.pcb-controls select { min-height: 44px; background: var(--white); color: var(--ink); font: 13px 'DM Sans', Arial, sans-serif; padding: 10px 36px 10px 12px; border: 1px solid #bdc9bb; border-radius: var(--radius); }
.pcb-controls p { flex: 1 1 100%; min-width: 170px; margin: 0; font-size: 12px; }
.pcb-controls .pcb-detail-link { font-size: 12px; margin-bottom: 9px; }
.pcb-figure { margin-top: 24px; }
.pcb-controls:not([hidden]) + .pcb-figure { margin-top: 0; }
.pcb-scroll { background: #eef1e9; border: 1px solid #d4ddd0; border-radius: 7px; }
.pcb-scroll .pcb-svg { display: block; width: 100%; height: auto; }
.pcb-figure figcaption { line-height: 1.65; max-width: 110ch; }
.pcb-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 18px; }
.pcb-legend a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-size: 11px; text-decoration: none; padding: 3px 7px; border: 1px solid transparent; border-radius: 4px; }
.pcb-legend a[aria-current] { background: #e7ece2; border-color: #c0d0bb; }
.pcb-legend a span, .pcb-group-dot { flex-shrink: 0; width: 10px; height: 10px; border: 1px solid #48654955; border-radius: 3px; background: var(--group-color); }
.pcb-discrepancy { font-size: 12px; color: #74482d; background: var(--peach); padding: 16px 20px; margin-top: 18px; border-left: 3px solid #d28b56; border-radius: 0 4px 4px 0; }
.pcb-panel { margin-top: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 21px 17px; scroll-margin-top: 15px; }
.pcb-panel-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pcb-panel-heading h3 { font-size: 21px; margin: 0; }
.pcb-panel .pcb-back { flex-basis: 100%; margin-left: 0; font-size: 12px; white-space: nowrap; }
.pcb-panel p { max-width: 100ch; font-size: 14px; }
.pcb-panel .table-scroll { margin-block: 17px; }
.pcb-panel .table-scroll td { font-size: 12px; }
.pcb-panel td, .pcb-panel th { padding: 11px 12px; }
.pcb-panel .pcb-caution { font-size: 13px; margin-block: 18px 0; padding: 13px 16px; background: #f8f2e8; color: #705336; border-radius: 4px; }
.pcb-panel .pcb-caution strong { display: block; color: #704321; margin-bottom: 4px; }
.pcb-sources { margin-top: 16px; }
.pcb-sources summary { font-size: 12px; padding-block: 16px; }
.pcb-sources p { font-size: 12px; max-width: 110ch; padding-bottom: 12px; }
.contents .contents-board { font-weight: 650; color: var(--teal); padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }

@media (min-width: 768px) {
  .pcb-overview.manual-section { padding-block: 56px 45px; }
  .pcb-overview h2 { font-size: clamp(2.1rem, 3.6vw, 3.2rem); }
  .pcb-controls { gap: 20px; }
  .pcb-controls label:first-child { flex: 0 1 auto; }
  .pcb-controls label:first-child select { width: auto; }
  .pcb-controls p { flex: 1; margin-bottom: 8px; }
  .pcb-legend { gap: 7px 20px; }
  .pcb-legend a { font-size: 11px; min-height: 35px; }
  .pcb-panel { padding: 28px 32px; }
  .pcb-panel-heading { flex-wrap: nowrap; gap: 12px; }
  .pcb-panel-heading h3 { font-size: 24px; }
  .pcb-panel .pcb-back { flex-basis: auto; margin-left: auto; }
  .pcb-panel td, .pcb-panel th { padding: 13px 17px; }
  .pcb-panel .table-scroll td { font-size: 13px; }
}

@media print {
  .pcb-overview.manual-section { padding-top: 22px; margin-bottom: 24px; break-before: page; }
  .pcb-overview .section-heading { display: block; }
  .pcb-overview .section-heading p { margin-top: 15px; }
  .pcb-controls, .pcb-legend, .pcb-back { display: none !important; }
  .pcb-figure { break-inside: avoid; }
  .pcb-panel[hidden] { display: block !important; }
  .pcb-panel { padding: 16px; background: white; border-color: #aaa; }
  .pcb-panel-heading { break-after: avoid; }
  .pcb-panel .table-scroll { overflow: visible; }
  .pcb-discrepancy, .pcb-caution { break-inside: avoid; }
  #system-all, #system-all[hidden] { display: none !important; }
}

.pcb-reference-anchor { display: block; scroll-margin-top: calc(var(--header-height) + 27px); }