/* tools.cphhvacstudio.dk — the one stylesheet (ToolsSite/DESIGN.md §4).
   The look of the company's site cphhvacstudio.dk (STANDARD §4; Oleksandr, 13.11.2026): its palette, fonts, sizes,
   header, bands and footer — the numbers are those of its index.html and privatlivspolitik.html. Light theme only,
   system fonts, nothing from other servers. The build appends one rule per product (.p-<code> { --p-accent }) from
   site.json and the rules of the prices with VAT, and names the file by its hash. */

:root {
  --bg: #ffffff;
  --dark: #1e3e49;          /* headings, the current language, dark text */
  --bgdark: #21525f;        /* the dark band */
  --accent: #b05030;        /* links, buttons, the current menu item, focus */
  --text: #3b4a50;
  --muted: #6e7b80;         /* 4.4 : 1 on white: large text and marks only — small text takes --text (DESIGN §4) */
  --line: #dfd8ce;          /* lines and borders */
  --alt: #f7f4ee;           /* the light band */
  --on-dark: #cbd9dc;       /* text on the dark band */
  --ghost: #6d939d;         /* the border of an outline button on the dark band */
  /* States and errors keep their own colours. */
  --err: #c42b1c;
  --err-bg: #fde7e9;
  --warn: #8a5300;
  --warn-bg: #fff4ce;
  --ok: #0f7b0f;
  --ok-bg: #dff6dd;
  --r-sm: 4px;
  --r: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  --gutter: 24px;
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;           /* 17 px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  /* The footer stays at the bottom of short pages. */
  display: flex; flex-direction: column; min-height: 100vh;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: var(--dark); }
a:focus-visible, .btn:focus-visible, main:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 var(--gutter); }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: var(--bg); color: var(--accent);
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.skip:focus { top: 8px; }

/* Draft banner: only in builds that are not releases. */
.draft {
  background: var(--warn-bg); color: var(--warn);
  border-bottom: 1px solid #f0d78a;
  font-size: 0.875rem; font-weight: 600; text-align: center;
  padding: 6px var(--gutter);
}

/* Header — the same on the company's site and here, in every language (REMARKS 22): nothing in it depends on the length
   of a word. The top row, 130 px: the logo 114 px, the name and its line on the left, the language switch in the right
   corner. Under it the menu row, 46 px between two lines, from the left edge. Wider than 900 px the header sticks with
   its top row out of the window: the menu row alone stays in view. */
.site-header { position: sticky; top: -130px; z-index: 99; background: var(--bg); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; height: 130px; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.brand img { height: 114px; width: auto; max-width: none; display: block; flex: none; }
.brand-text { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.brand-name { font-weight: 700; color: var(--dark); font-size: 1.375rem; letter-spacing: 0.5px; line-height: 1.2; }
.brand-tag {
  font-size: 0.8125rem; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--accent); font-weight: 600; line-height: 1.2;
}

.header-bar { border-top: 1px solid var(--line); }
.main-nav ul { display: flex; flex-wrap: wrap; gap: 0 26px; list-style: none; margin: 0; padding: 0; }
.main-nav li, .langs li { max-width: none; margin: 0; }
.main-nav a { display: block; color: var(--text); font-size: 0.9375rem; line-height: 46px; text-decoration: none; white-space: nowrap; }
.main-nav a:hover { color: var(--accent); }
.main-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.ext { font-weight: 400; }

/* The switch: in the top row's right corner (the header is its frame; 51 px = (130 − 28) / 2). */
.langs { position: absolute; top: 51px; right: max(var(--gutter), calc((100% - 1140px) / 2 + var(--gutter))); }
.langs ul {
  display: flex; list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.langs a {
  display: block; padding: 5px 11px; background: var(--bg);
  color: var(--text); font-size: 0.8125rem; font-weight: 600; line-height: 15px; text-decoration: none;
}
.langs a:hover { color: var(--accent); }
.langs a[aria-current] { background: var(--dark); color: #ffffff; }
.langs a:focus-visible { outline-offset: -2px; }

/* Main: a page of bands (home, a program, prices) or a page of text (build.py BAND_PAGES). */
main { display: block; flex: 1 0 auto; width: 100%; }
main:focus { outline: none; }
[id] { scroll-margin-top: 64px; }       /* a heading the menu leads to is not under the menu row that stays in view */

.band { padding: 80px 0; }
.band-alt { background: var(--alt); }
.band-dark { background: var(--bgdark); color: #ffffff; padding: 110px 0; }
.band > .wrap > :last-child { margin-bottom: 0; }

h1, h2, h3 { color: var(--dark); line-height: 1.25; font-weight: 600; }
h1 { font-size: 2.75rem; margin: 0 0 16px; }           /* 44 px */
h2 { font-size: 2rem; margin: 0 0 16px; }              /* 32 px */
h3 { font-size: 1.1875rem; margin: 26px 0 8px; }       /* 19 px */
p, ul, ol { margin: 0 0 16px; }
p, li { max-width: 74ch; }
ul, ol { padding-left: 1.4em; }
main li + li { margin-top: 7px; }
strong { font-weight: 600; }
code { font-family: var(--mono); font-size: 0.9em; background: var(--alt); padding: 1px 4px; border-radius: var(--r-sm); }
.band-alt code { background: var(--bg); }

.fine { font-size: 0.9375rem; }
.updated { font-size: 0.9375rem; }

/* Not yet confirmed — visible only in drafts; a release build refuses them. */
mark.todo {
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid #f0d78a; border-radius: var(--r-sm);
  padding: 0 4px; font-weight: 600; font-size: 0.875em;
}

/* Hero: the first screen — the dark band of the company's site. */
.hero h1 { color: #ffffff; max-width: 800px; }
.hero p { color: var(--on-dark); font-size: 1.25rem; max-width: 640px; margin: 20px 0 32px; }
.hero p strong { color: #ffffff; }
.hero a:not(.btn) { color: #ffffff; }
.hero .actions { margin: 32px 0 0; max-width: none; }
.hero > :last-child { margin-bottom: 0; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 10px 12px; max-width: none; margin: 24px 0; }
.btn {
  display: inline-block; padding: 14px 29px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--dark);
  font-weight: 600; font-size: 1rem; line-height: 1.65; text-decoration: none;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.btn-primary:hover { filter: brightness(1.08); color: #ffffff; }
.band-dark .btn:not(.btn-primary) { background: transparent; border-color: var(--ghost); color: #ffffff; }
.band-dark .btn:not(.btn-primary):hover { border-color: #ffffff; }
.band-dark a:focus-visible, .band-dark .btn:focus-visible { outline-color: #ffffff; }
/* «Coming soon» in place of a download (STANDARD §6): its words as text and the state — never a button that does
   nothing. */
.soon { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 40px; font-weight: 600; font-size: 1rem; }
.band-dark .soon { color: #ffffff; }
/* A form of the portal that is not live yet (site.json forms.live): one sentence in place of its button. */
.soon-note, .callout {
  background: var(--alt); border-left: 3px solid var(--accent);
  padding: 18px 22px; margin: 26px 0; max-width: 74ch;
}
.callout p { margin: 0; }
.band-alt .soon-note, .band-alt .callout { background: var(--bg); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin: 0; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 24px; }
.card h2 { font-size: 1.1875rem; margin: 0 0 8px; }
.card p { margin: 0; font-size: 0.9375rem; }

/* Programs */
.programs {
  list-style: none; padding: 0; margin: 40px 0 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px;
}
.programs li + li { margin-top: 0; }
.program {
  display: flex; gap: 16px; align-items: flex-start; max-width: none;
  background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--p-accent, var(--line));
  border-radius: var(--r); padding: 24px 24px 24px 20px;
}
.program-icon { width: 48px; height: 48px; flex: none; }
.tile { display: block; border-radius: 10px; background: var(--alt); border: 1px solid var(--line); }
.program h3 { margin: 0 0 4px; }
.program p { margin: 0; }
.program-desc { font-size: 0.9375rem; }
.program-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px !important; font-size: 0.9375rem; }

/* States: «Available» keeps its own green; «Coming soon» and «Planned» take the site's lines and colours. */
.status {
  display: inline-block; padding: 1px 10px; border-radius: var(--r-sm);
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
}
.status-available { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.status-coming_soon, .status-in_development_free, .status-buy_soon, .status-suite_soon {
  background: var(--alt); color: var(--dark);
}
.status-buy_soon, .status-suite_soon { white-space: normal; }
.band-alt .status-coming_soon, .band-alt .status-in_development_free { background: var(--bg); }

/* Tables */
.table { width: 100%; border-collapse: collapse; background: var(--bg); border: 1px solid var(--line); margin: 0 0 20px; }
.table th, .table td {
  padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
  overflow-wrap: anywhere;
}
/* Narrow cells hyphenate (the page's lang); names such as ASHRAE elsewhere stay whole. */
.table td.c { hyphens: auto; }
.table thead th { background: var(--alt); font-size: 0.9375rem; color: var(--dark); font-weight: 600; }
.table tbody th { font-weight: 600; color: var(--dark); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table .c { text-align: center; }
.table .r { text-align: right; }
.yes { color: var(--ok); font-weight: 700; }
.no { color: var(--muted); }
/* Fixed columns: long words (Danish compounds) wrap instead of widening the table past a phone screen. */
.compare .table { table-layout: fixed; }
.compare .table thead .c { width: 20%; }
.compare .table tbody th { font-weight: 400; color: var(--text); }

/* Prices */
/* Fixed columns: a price that changes moves nothing else (REMARKS 23). */
.prices { margin: 8px 0 14px; table-layout: fixed; }
.prices thead th:first-child { width: 30%; }
.prices thead th.num { width: 18%; }
.prices caption { caption-side: top; text-align: left; font-weight: 600; color: var(--dark); padding: 0 0 10px; }
.prices .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price { font-weight: 600; color: var(--dark); }
.band-dark .price { color: inherit; }
.vat { font-size: 0.875rem; }
.disc { display: block; font-weight: 400; }
.prices tr.suite > * { background: var(--alt); border-top: 1px solid var(--line); }
.suite-desc, .support-until { display: block; font-weight: 400; font-size: 0.875rem; color: var(--text); }
/* A price without VAT and with VAT: the same size, weight and colour (STANDARD §8, D2). In the table each is a line;
   which country's price with VAT shows is chosen above the table (build.py vat_css). */
.price-ex, .price-in { white-space: nowrap; }
.prices .price-ex { display: block; }
/* The choice of country and buyer — as the tabs of the company's ydelser.html: a row on a line, the chosen buyer dark
   with the accent under it. The radio buttons stay in the page for the keyboard and screen readers. */
.vat-choice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px;
  border-bottom: 2px solid var(--line); margin: 24px 0 18px; padding: 0;
}
.vat-choice p { margin: 0; }
.vat-choice-title { font-weight: 600; color: var(--dark); }
.vat-field { padding: 8px 0; }
.vat-field label { margin-right: 6px; }
.vat-field select {
  font: inherit; color: var(--text); background: var(--bg);
  padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); max-width: 100%;
}
.vat-who { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 18px; border: 0; padding: 0; margin: 0 0 -2px; min-width: 0; }
.vat-who legend { float: left; padding: 12px 0; margin-right: 0; }
.vat-who label {
  position: relative; display: inline-flex; align-items: center;
  padding: 12px 4px; border-bottom: 3px solid transparent;
  font-weight: 700; color: var(--text); cursor: pointer;
}
.vat-who input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.vat-who label:has(input:checked) { color: var(--dark); border-bottom-color: var(--accent); }
.vat-who label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.vat-status { margin: 0 0 8px; }
.vat-shown { margin: 0; font-weight: 600; color: var(--dark); }
.vat-note { margin: 0; font-size: 0.9375rem; }

/* Screenshots: one under another, its caption below; not links (REMARKS 24). Each as wide as the content but never
   wider than its own pixels — a narrower one stands at the left edge. Its width is the width attribute of the page
   (the file's own): no width here, or the room it keeps while the picture loads would be lost. */
.shot { margin: 0 0 28px; }
/* The frame is a shadow, not a border: a border would take two pixels from the picture and blur it. */
.shot img { display: block; max-width: 100%; height: auto; background: var(--bg); box-shadow: 0 0 0 1px var(--line); border-radius: var(--r); }
.shot figcaption { font-size: 0.9375rem; margin-top: 8px; }
.shots { margin: 24px 0 8px; }
.shots .shot:last-child { margin-bottom: 0; }
.badge-pro {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--r-sm);
  background: var(--accent); color: #ffffff; font-size: 0.75rem; font-weight: 600; vertical-align: 1px;
}

/* Pages of text — the company's privatlivspolitik.html: one column up to 760 px, h1 36 px, h2 21 px, line 1.7. */
main.text { padding: 56px 0 72px; line-height: 1.7; }
main.text > .wrap { max-width: 760px; }
main.text h1 { font-size: 2.25rem; margin-bottom: 8px; }
main.text h2 { font-size: 1.3125rem; margin: 36px 0 10px; }
main.text h3 { font-size: 1.0625rem; margin: 24px 0 8px; }
main.text p, main.text ul, main.text ol { margin-bottom: 14px; }
main.text h1 + .fine { margin-bottom: 26px; }        /* the date of the edition */
main.text .actions { margin: 20px 0; }
.summary li { max-width: 74ch; }
.legal-text {
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; margin: 0 0 20px;
}
.lines { line-height: 1.7; }

/* Release notes (build.py notes_page): a version, its date, its notes, then «Calculation changes» and «Security». */
.page-release-notes h2 { margin-bottom: 2px; }
.release-date { margin-top: 0; font-size: 0.9375rem; }
.release-list .ref { white-space: nowrap; }

/* Footer — the company's site: white, 14 px, the company on the left, the links on the right. */
.site-footer { background: var(--bg); border-top: 1px solid var(--line); padding: 28px 0; font-size: 0.875rem; color: var(--text); }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px 40px; }
.footer-company { flex: 1 1 380px; }
.site-footer nav { flex: 1 1 380px; }
.site-footer ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; list-style: none; padding: 0; margin: 0; }
.site-footer li { max-width: none; }
.site-footer li + li { margin-top: 0; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a[aria-current] { color: var(--dark); font-weight: 600; }
.site-footer li.cancel a { font-weight: 600; }  /* D5: cancelling as easy as buying, from every page */
.site-footer p { margin: 0 0 4px; max-width: none; }

/* A wide window: the license text (100-character lines) may be wider than the column of text. */
@media (min-width: 901px) {
  .page-eula .legal-text { margin-left: -50px; margin-right: -50px; }
}

@media (max-width: 900px) {
  /* Up to 900 px: the logo 60 px, the top row 80 px; under the line the menu from the left edge, the switch on the
     right of its first row. Nothing sticks. */
  .site-header { position: static; }
  [id] { scroll-margin-top: 0; }
  .header-row { height: 80px; }
  .brand img { height: 60px; }
  .brand-name { font-size: 1.0625rem; }
  .brand-tag { font-size: 0.6875rem; letter-spacing: 1.8px; }
  .header-bar > .wrap { padding-top: 5px; padding-bottom: 5px; }
  .header-bar > .wrap::after { content: ""; display: block; clear: both; }
  .langs { position: static; float: right; margin: 3px 0 0 12px; }
  .main-nav ul { display: block; }
  .main-nav li { display: inline-block; margin-right: 16px; }
  .main-nav a { font-size: 0.875rem; line-height: 32px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.625rem; }
  .band { padding: 52px 0; }
  .band-dark { padding: 64px 0; }
  .site-footer ul { justify-content: flex-start; }
}

/* A phone: the name and its line wrap; the top row has the height of the longest of them (two lines and three), the
   same in every language and on the company's site, so the menu row stands where it stood. */
@media (max-width: 600px) {
  .header-row { height: 108px; }
  .brand-text { white-space: normal; }
  /* A phone: a screenshot from edge to edge of the screen. */
  .shot { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .shot img { border-radius: 0; }
  .shot figcaption { padding: 0 var(--gutter); }
}

@media (max-width: 700px) {
  main.text h1 { font-size: 1.75rem; }
}

@media (max-width: 720px) {
  .compare .table { font-size: 0.875rem; }
  .compare .table th, .compare .table td { padding: 8px 6px; }
  .compare .table thead .c { width: 26%; }
  .programs { grid-template-columns: 1fr; }
  .program { padding: 20px 18px 20px 14px; }
  .btn { padding: 14px 22px; }
  .vat-who { gap: 0 12px; }
}

@media (max-width: 1023px) {
  /* The price table becomes one card per program; the cells say what they are (data-label). */
  .prices, .prices tbody, .prices tr, .prices th, .prices td { display: block; }
  .prices { border: 0; background: transparent; }
  .prices caption { display: block; }
  .prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .prices tr { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; padding: 4px 0; }
  .prices tr.suite { background: var(--alt); }
  .prices tr.suite > * { background: transparent; border-top: 0; }
  .prices tbody th { border-bottom: 1px solid var(--line); }
  .prices td { display: flex; align-items: baseline; gap: 6px; border-bottom: 0; padding: 6px 14px; }
  .prices td::before { content: attr(data-label); flex: 1; font-size: 0.875rem; text-align: left; }
  .prices td.action { min-width: 0; }
  .prices td.action:empty { display: none; }
  /* A price cell: its label on the left, the price without VAT and the one with VAT stacked on the right. */
  .prices td.num { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; white-space: normal; }
  .prices td.num::before { grid-row: span 2; }
  .prices td.num > * { grid-column: 2; text-align: right; }
}

/* Accents of the products (site.json, STANDARD §4). */
.p-apd { --p-accent: #0067c0; }
.p-hyd { --p-accent: #b8411e; }
.p-duct { --p-accent: #5a7a94; }
.p-load { --p-accent: #6b3fb8; }
.p-wad { --p-accent: #0b7f8c; }
.p-schd { --p-accent: #9c2f5c; }
.p-hpd { --p-accent: #5a6f12; }
.p-solar { --p-accent: #b86e00; }
.p-revitlink { --p-accent: #4a4f55; }

/* Prices with VAT of the chosen country (vat.json; build.py vat_choice; DESIGN §13). */
.vat-in, .vat-note { display: none; }
.c-dk { display: block; }
.vat-choice { display: none; }
@supports selector(:has(*)) {
  .vat-choice { display: flex; }
  .vat-status { display: grid; }
  .vat-shown { display: grid; grid-row: 1; }
  .vat-shown .vat-in { display: block; grid-area: 1 / 1; visibility: hidden; }
  .vat-note { display: block; grid-area: 2 / 1; visibility: hidden; }
  main:has(#vat-country option:not([value="dk"]):checked) .prices .c-dk { display: none; }
  main:has(#vat-country [value="at"]:checked) .c-at { display: block; visibility: visible; }
  main:has(#vat-country [value="be"]:checked) .c-be { display: block; visibility: visible; }
  main:has(#vat-country [value="bg"]:checked) .c-bg { display: block; visibility: visible; }
  main:has(#vat-country [value="ch"]:checked) .c-ch { display: block; visibility: visible; }
  main:has(#vat-country [value="cy"]:checked) .c-cy { display: block; visibility: visible; }
  main:has(#vat-country [value="cz"]:checked) .c-cz { display: block; visibility: visible; }
  main:has(#vat-country [value="de"]:checked) .c-de { display: block; visibility: visible; }
  main:has(#vat-country [value="dk"]:checked) .c-dk { display: block; visibility: visible; }
  main:has(#vat-country [value="ee"]:checked) .c-ee { display: block; visibility: visible; }
  main:has(#vat-country [value="es"]:checked) .c-es { display: block; visibility: visible; }
  main:has(#vat-country [value="fi"]:checked) .c-fi { display: block; visibility: visible; }
  main:has(#vat-country [value="fr"]:checked) .c-fr { display: block; visibility: visible; }
  main:has(#vat-country [value="gb"]:checked) .c-gb { display: block; visibility: visible; }
  main:has(#vat-country [value="gr"]:checked) .c-gr { display: block; visibility: visible; }
  main:has(#vat-country [value="hr"]:checked) .c-hr { display: block; visibility: visible; }
  main:has(#vat-country [value="hu"]:checked) .c-hu { display: block; visibility: visible; }
  main:has(#vat-country [value="ie"]:checked) .c-ie { display: block; visibility: visible; }
  main:has(#vat-country [value="is"]:checked) .c-is { display: block; visibility: visible; }
  main:has(#vat-country [value="it"]:checked) .c-it { display: block; visibility: visible; }
  main:has(#vat-country [value="li"]:checked) .c-li { display: block; visibility: visible; }
  main:has(#vat-country [value="lt"]:checked) .c-lt { display: block; visibility: visible; }
  main:has(#vat-country [value="lu"]:checked) .c-lu { display: block; visibility: visible; }
  main:has(#vat-country [value="lv"]:checked) .c-lv { display: block; visibility: visible; }
  main:has(#vat-country [value="mt"]:checked) .c-mt { display: block; visibility: visible; }
  main:has(#vat-country [value="nl"]:checked) .c-nl { display: block; visibility: visible; }
  main:has(#vat-country [value="no"]:checked) .c-no { display: block; visibility: visible; }
  main:has(#vat-country [value="pl"]:checked) .c-pl { display: block; visibility: visible; }
  main:has(#vat-country [value="pt"]:checked) .c-pt { display: block; visibility: visible; }
  main:has(#vat-country [value="ro"]:checked) .c-ro { display: block; visibility: visible; }
  main:has(#vat-country [value="se"]:checked) .c-se { display: block; visibility: visible; }
  main:has(#vat-country [value="si"]:checked) .c-si { display: block; visibility: visible; }
  main:has(#vat-country [value="sk"]:checked) .c-sk { display: block; visibility: visible; }
  main:has(#vat-country [value="ua"]:checked) .c-ua { display: block; visibility: visible; }
  main:has(#vat-country option[value="other"]:checked) .prices .c-dk { display: block; visibility: hidden; }
  main:has(#vat-country [value="other"]:checked) .vat-other { visibility: visible; }
  main:has(#who-person:checked):has(#vat-country option:not([value="other"]):checked) .prices .price-ex { visibility: hidden; }
  main:has(#who-company:checked):has(#vat-country .rev:checked) .vat-in { visibility: hidden; }
  main:has(#who-company:checked):has(#vat-country .rev:checked) .vat-company-rev { visibility: visible; }
  main:has(#who-company:checked):has(#vat-country option:not(.rev):not([value="other"]):checked) .vat-company-charged { visibility: visible; }
}