/* Generated by tools/build.mjs; edit the named source files. */

/* src/app.css */
/* Shared shell and progressive enhancement.
 * Visual primitives, typography, gradients and cards remain in assets/site.css.
 * Page-specific safeguards belong to their own stylesheets.
 */
:root { --kg-nav-height: 5rem; }
html { scroll-padding-top: calc(var(--kg-nav-height) + 1rem); }
body { min-width: 0; }
body.menu-open { overflow: hidden; }
[hidden] { display: none !important; }
button { touch-action: manipulation; }
main:focus { outline: none; }

/* Keep content visible before the shared app adds its ready class, including
 * when JavaScript is unavailable. Legacy motion styles otherwise stay intact.
 */
.reveal:not(.is-visible),
.reveal:focus-within { opacity: 1; transform: none; }

.skip-link {
  position: fixed;
  inset: 0.75rem auto auto 1rem;
  z-index: 10000;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: #fff;
  color: #2563eb;
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* The original glass bar and utility sizing are authored in the template. */
#navbar .site-brand { min-width: 0; text-decoration: none; }
#navbar .site-brand img { flex-shrink: 0; }
#navbar .desktop-nav { align-items: center; }
#navbar .desktop-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
#navbar .nav-link[aria-current] { color: #2563eb; }
#navbar[data-scrolled="true"] {
  padding-block: 0.5rem;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
#mobile-menu-toggle,
#mobile-menu-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  padding: 0.5rem;
  color: #475569;
  border: 0;
  background: transparent;
}
#mobile-menu-toggle:hover,
#mobile-menu-close:hover { color: #2563eb; }
#mobile-menu-toggle svg,
#mobile-menu-close svg { width: 2rem; height: 2rem; }

/* Original fullscreen white/glass overlay, with native dialog semantics. */
dialog#mobile-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 6rem 1.5rem 3rem;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.95);
  color: #1e293b;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog#mobile-menu:not([open]) { display: none; }
dialog#mobile-menu[open] { display: flex; flex-direction: column; }
dialog#mobile-menu::backdrop { background: transparent; }
#mobile-menu-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#mobile-menu-close { position: absolute; top: 1.5rem; right: 1.5rem; }
.mobile-nav-links {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-block: auto;
}
.mobile-nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  color: #1e293b;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
  text-align: center;
  text-decoration: none;
  transition: color 150ms;
}
.mobile-nav-links a:hover,
.mobile-nav-links a[aria-current] { color: #2563eb; }

/* Browsers without modal-dialog support retain ordinary document navigation. */
dialog#mobile-menu.mobile-menu-fallback {
  position: static;
  height: auto;
  margin-top: calc(var(--kg-nav-height) + 1rem);
  padding: 1.5rem;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
dialog#mobile-menu.mobile-menu-fallback[open] { display: block; }
.mobile-menu-fallback #mobile-menu-close { position: static; margin-inline-start: auto; }
.mobile-menu-fallback .mobile-nav-links { gap: 1rem; margin-block: 1rem; }

.no-script-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: var(--kg-nav-height);
  padding: 1rem 1.5rem;
  background: #fff;
}
.no-script-nav a { color: #2563eb; text-decoration: underline; }

/* The original dark footer uses its original utility grid and text sizing. */
.site-footer .site-brand { text-decoration: none; }
.site-footer .footer-links { list-style: none; padding: 0; }
.site-footer a { overflow-wrap: anywhere; }
.site-footer [data-consent-settings] {
  min-height: 2.75rem;
  padding-block: 0.5rem;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
}
.site-footer [data-consent-settings]:hover:not(:disabled) { color: #60a5fa; }
.site-footer [data-consent-settings]:disabled { opacity: 0.6; cursor: default; }
.site-footer :focus-visible { outline-color: #93c5fd; }

@media (min-width: 1024px) {
  :root { --kg-nav-height: 4.75rem; }
  #navbar .desktop-nav { display: flex; }
  #navbar #mobile-menu-toggle { display: none; }
}
@media (max-width: 1023px) {
  #navbar .desktop-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  .site-brand .gradient-text { background: none; -webkit-text-fill-color: LinkText; color: LinkText; }
  dialog#mobile-menu { background: Canvas; color: CanvasText; }
  .mobile-nav-links a { color: LinkText; }
}

/* src/home.css */
/* Original homepage presentation comes from assets/site.css.
   These narrow additions retain access, truthful supporting notes and safe overflow. */
.home-page { min-width: 0; padding: 0; }
.home-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.original-home-hero > div { min-width: 0; max-width: 100%; }
.original-home-hero .section-title { text-wrap: wrap; }
.original-store-link { align-self: flex-start; }

/* Preserve the ten original phone frames while keeping both ends reachable. */
.original-gallery-rail {
  justify-content: flex-start;
  padding-top: 0.5rem;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  scrollbar-color: #526176 #eef2f7;
}
.original-screen-link {
  display: block;
  flex: 0 0 auto;
  width: 16rem;
  max-width: calc(100vw - 3rem);
  border-radius: 2rem;
  scroll-snap-align: start;
}
.original-screen-link img { width: 100%; }
.original-home-note { margin-top: 1rem; color: #475569; font-size: 0.875rem; line-height: 1.65; }
.original-home-note a, .original-faq-card a {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
.original-home-note a:hover, .original-faq-card a:hover { color: #1e40af; }
.original-resource-card { display: block; min-width: 0; color: inherit; }
.original-resource-card h3 { color: #1d4ed8; }
.original-resource-card:hover h3 { text-decoration: underline; text-underline-offset: 0.18em; }
.original-feature-card, .original-faq-card { min-width: 0; }
.original-feature-card h3 { overflow-wrap: break-word; hyphens: auto; }
.original-faq-card p + p { margin-top: 0.75rem; }

/* Original decorative motion remains in the baseline, with reduced-motion
   preferences respected below. */
@media (max-width: 639px) {
  .original-resource-card, .original-feature-card { padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page *, .home-page *::before, .home-page *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .original-gallery-rail { scrollbar-color: auto; }
  .home-page .gradient-text { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; }
}

/* src/articles.css */
/* The article and legal templates retain the original site.css utilities.
 * Keep amounts together and let long German terms fit narrow viewports.
 */
.article-table td[data-amount] { white-space: nowrap; }
.legal-page h1,
.legal-content code { overflow-wrap: anywhere; }
.legal-page .btn-primary {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Fit the original article cards on small phones without clipping their tables.
 * Keep the desktop spacing and keep each monetary amount on one line.
 */
@media (max-width: 479px) {
  .article-table th,
  .article-table td { padding: 0.5rem 0.375rem; }
  .article-table th { overflow-wrap: anywhere; hyphens: auto; }
}

/* src/consent.css */
/* First-party consent controls. Every first-layer choice uses the same style. */
:root {
  --kg-consent-height: 0px;
  scroll-padding-bottom: calc(var(--kg-consent-height) + 1rem);
}

.kg-consent-visible body {
  padding-bottom: calc(var(--kg-consent-height) + 1rem);
}

.kg-consent-modal-open,
.kg-consent-modal-open body {
  overflow: hidden;
}

.kg-consent-snackbar,
.kg-consent-dialog {
  box-sizing: border-box;
  color: #15263d;
  background: #ffffff;
  border: 1px solid #aebdce;
  border-radius: 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.55;
  text-align: left;
  overflow-wrap: anywhere;
  color-scheme: light;
}

.kg-consent-snackbar *,
.kg-consent-dialog * {
  box-sizing: border-box;
}

.kg-consent-snackbar[hidden],
.kg-consent-dialog[hidden],
.kg-consent-dialog:not([open]),
.kg-consent-backdrop[hidden],
.kg-consent-snackbar [hidden],
.kg-consent-dialog [hidden] {
  display: none !important;
}

.kg-consent-snackbar {
  position: fixed;
  z-index: 10000;
  inset: auto 1rem max(1rem, env(safe-area-inset-bottom)) 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  width: auto;
  max-width: 76rem;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: 0 auto;
  padding: 1.25rem;
  overflow-y: auto;
  box-shadow: 0 8px 36px rgb(15 32 55 / 20%);
}

.kg-consent-snackbar h2,
.kg-consent-dialog h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 750;
  line-height: 1.35;
  color: #15263d;
}

.kg-consent-snackbar p,
.kg-consent-dialog p {
  margin: 0.5rem 0;
}

.kg-consent-note {
  font-size: 0.875rem;
  color: #42546b;
}

.kg-consent-link {
  display: inline;
  color: #174da5;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  font-weight: 650;
}

.kg-consent-link:hover {
  color: #11396f;
}

.kg-consent-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
  width: 31.5rem;
}

.kg-consent-button,
.kg-consent-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  border: 1px solid #174b87;
  border-radius: 0.625rem;
  padding: 0.6875rem 0.875rem;
  background: #eaf2fb;
  color: #123a69;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
}

.kg-consent-button:hover,
.kg-consent-close:hover {
  background: #d9e9f9;
  border-color: #123a69;
}

.kg-consent-button:disabled {
  color: #52647a;
  background: #e7ecf2;
  border-color: #8091a6;
  cursor: not-allowed;
}

.kg-consent-snackbar :focus-visible,
.kg-consent-dialog :focus-visible {
  outline: 3px solid #155eb4;
  outline-offset: 3px;
}

.kg-consent-dialog {
  width: min(42rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  margin: auto;
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 24px 90px rgb(9 24 44 / 30%);
}

.kg-consent-dialog::backdrop {
  background: rgb(9 24 44 / 58%);
}

.kg-consent-dialog-inner {
  padding: 1.5rem;
}

.kg-consent-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.kg-consent-dialog-heading h2 {
  padding-top: 0.375rem;
  font-size: 1.375rem;
}

.kg-consent-close {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  background: #ffffff;
}

.kg-consent-form {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.kg-consent-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.75rem;
  align-items: center;
  gap: 1rem;
  margin: 0;
  border: 1px solid #bdcbd9;
  border-radius: 0.75rem;
  padding: 1rem;
  background: #f6f9fc;
  cursor: pointer;
}

.kg-consent-option strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: #15263d;
}

.kg-consent-option span span {
  display: block;
  font-size: 0.875rem;
  color: #42546b;
}

.kg-consent-option input[type="checkbox"] {
  appearance: auto;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  accent-color: #1758a2;
  cursor: pointer;
}

.kg-consent-option input:disabled,
.kg-consent-option--essential {
  cursor: default;
}

.kg-consent-notice {
  border-left: 3px solid #98670b;
  padding: 0.625rem 0.75rem;
  background: #fff7df;
  color: #5b410c;
  font-size: 0.875rem;
}

.kg-consent-dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.25rem;
}

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

.kg-consent-backdrop {
  position: fixed;
  z-index: 10001;
  inset: 0;
  background: rgb(9 24 44 / 58%);
}

.kg-consent-dialog--fallback {
  position: fixed;
  z-index: 10002;
  inset: 0;
}

@media (max-width: 68rem) {
  .kg-consent-snackbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .kg-consent-actions {
    width: 100%;
  }
}

@media (max-width: 30rem) {
  .kg-consent-snackbar {
    inset-inline: 0.625rem;
    bottom: max(0.625rem, env(safe-area-inset-bottom));
    padding: 1rem;
    gap: 0.75rem;
  }

  .kg-consent-actions,
  .kg-consent-dialog-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .kg-consent-dialog-inner {
    padding: 1rem;
  }

  .kg-consent-dialog-heading {
    gap: 0.5rem;
  }

  .kg-consent-dialog-heading h2 {
    font-size: 1.125rem;
  }

  .kg-consent-option {
    padding: 0.875rem;
    gap: 0.75rem;
  }
}

@media (forced-colors: active) {
  .kg-consent-snackbar,
  .kg-consent-dialog,
  .kg-consent-button,
  .kg-consent-close,
  .kg-consent-option {
    border: 1px solid CanvasText;
  }
}

/* src/calculator.css */
/* Original calculator appearance, with the corrected form's semantic hooks.
 * Values follow the original max-w-4xl / rounded-[2rem] / slate / blue utilities.
 * This file owns calculator layout; it needs no shared redesign variables. */
.kiz-page {
    box-sizing: border-box;
    max-width: 56rem;
    margin: 0 auto;
    padding: 8rem 1.5rem 5rem;
    color: #0f172a;
}
.kiz-calculator {
    min-width: 0;
    padding: 2rem;
    border: 0;
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}
.kiz-calculator *, .kiz-calculator *::before, .kiz-calculator *::after { box-sizing: border-box; }
.kiz-calculator [hidden] { display: none !important; }
.kiz-calculator [id] { scroll-margin-top: 6.5rem; }
.kiz-calculator h1 {
    margin: 0 0 1rem;
    color: #0f172a;
    background: none;
    -webkit-text-fill-color: currentColor;
    font-size: 1.875rem;
    line-height: 1.25;
    font-weight: 800;
    text-align: center;
    overflow-wrap: break-word;
    hyphens: auto;
}
.kiz-calculator h2 { margin: 0 0 1rem; color: #0f172a; font-size: 1.5rem; line-height: 1.35; font-weight: 700; }
.kiz-calculator p, .kiz-calculator li { line-height: 1.625; overflow-wrap: break-word; }
.kiz-calculator p { margin-top: 0; margin-bottom: 1rem; }
.kiz-calculator ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1rem; }
.kiz-calculator li + li { margin-top: .5rem; }
.kiz-calculator a:not(.kiz-button):not(.kiz-app-link) { color: #2563eb; text-decoration: underline; text-underline-offset: .18em; }
.kiz-calculator a:not(.kiz-button):not(.kiz-app-link):hover { color: #1d4ed8; }
.kiz-calculator :is(a, button, input, select, summary):focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.kiz-errors:focus, .kiz-result:focus { outline: 3px solid #1d4ed8; outline-offset: 4px; }
.kiz-intro { text-align: center; }
.kiz-eyebrow { color: #475569; font-size: .875rem; font-weight: 600; }
.kiz-calculator .kiz-lead { margin-bottom: 3rem; color: #475569; font-size: 1.25rem; }
.kiz-scope-notice { padding: 1rem; border: 1px solid #dbeafe; border-radius: .75rem; background: #eff6ff; text-align: left; }
.kiz-scope { margin: 2rem 0; font-size: 1rem; }
.kiz-help { color: #475569; font-size: .875rem; }
.kiz-calculator .kiz-help:last-child { margin-bottom: 0; }
#kiz-form { max-width: 42rem; margin-inline: auto; }
.kiz-controls { min-width: 0; border: 0; padding: 0; margin: 0; }
.kiz-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #f1f5f9; }
.kiz-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.kiz-field { min-width: 0; margin-bottom: .75rem; }
.kiz-field label { display: block; margin-bottom: .5rem; color: #334155; font-weight: 700; line-height: 1.5; }
.kiz-field :is(input:not([type="checkbox"]), select) {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 3.5rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color .2s, box-shadow .2s;
}
.kiz-field :is(input, select):hover { border-color: #94a3b8; }
.kiz-field :is(input, select):focus-visible { border-color: #3b82f6; box-shadow: 0 0 0 2px #3b82f6; }
.kiz-field input::placeholder { color: #475569; opacity: 1; }
.kiz-field :is(input, select)[aria-invalid="true"] { border: 2px solid #b91c1c; background: #fef2f2; }
.kiz-field .kiz-help { margin-top: .5rem; }
.kiz-check { display: flex; align-items: flex-start; gap: .75rem; margin: 1rem 0; }
.kiz-check input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: #2563eb; }
.kiz-check label { color: #334155; line-height: 1.5; }
.kiz-period { margin-top: 1rem !important; padding: 1rem; border: 1px solid #e2e8f0; border-radius: .75rem; background: #f8fafc; font-weight: 600; }
.kiz-child, .kiz-parent { min-width: 0; margin: 2rem 0; padding: 0; border: 0; }
.kiz-child legend, .kiz-parent legend { margin-bottom: 1rem; padding: 0; color: #334155; font-size: 1.125rem; font-weight: 700; }
.kiz-calculator details { margin-top: 1rem; border: 1px solid #e2e8f0; border-radius: .75rem; background: #f8fafc; }
.kiz-calculator summary { padding: 1rem; color: #334155; font-weight: 700; line-height: 1.5; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.kiz-calculator summary::marker { color: #2563eb; }
.kiz-calculator details[open] > summary { border-bottom: 1px solid #e2e8f0; }
.kiz-details-body { min-width: 0; padding: 1rem; }
.kiz-details-body > :last-child { margin-bottom: 0; }
.kiz-month-fields { margin-top: 1rem; }
.kiz-month-fields summary { font-size: 1rem; }
.kiz-month-fields > details { background: #fff; }
.kiz-submit-row { margin-top: 2rem; padding-top: 1rem; text-align: center; }
.kiz-submit-row .kiz-help { margin-top: 1.25rem; }
.kiz-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 3.5rem;
    padding: 1rem 3rem;
    border: 0;
    border-radius: 1rem;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgb(37 99 235 / .3), 0 4px 6px -4px rgb(37 99 235 / .3);
    transition: background-color .2s, transform .2s;
}
.kiz-button:hover { background: #1d4ed8; }
.kiz-button:disabled { background: #64748b; cursor: default; box-shadow: none; }
.kiz-button-secondary { padding: .875rem 1.5rem; border: 1px solid #bfdbfe; background: #fff; color: #2563eb; box-shadow: none; }
.kiz-button-secondary:hover { background: #dbeafe; color: #1d4ed8; }
.kiz-errors { margin: 1.5rem 0; padding: 1rem; border: 2px solid #b91c1c; border-radius: .75rem; background: #fef2f2; }
.kiz-errors h2 { color: #991b1b; font-size: 1.125rem; }
.kiz-errors a { color: #991b1b !important; }
.kiz-field-error { display: block; margin-top: .5rem; color: #991b1b; font-weight: 600; font-size: .875rem; line-height: 1.5; }
.kiz-result { margin-top: 4rem; padding: 2rem; border: 1px solid #dbeafe; border-radius: 1.5rem; background: #eff6ff; text-align: center; }
.kiz-result[data-state="stale"] { background: #fffbeb; border-color: #fcd34d; }
.kiz-result-value { margin: 1rem 0 .5rem !important; color: #2563eb; font-size: 3.75rem; line-height: 1 !important; font-weight: 900; overflow-wrap: normal !important; }
.kiz-result-caption { color: #475569; font-weight: 600; }
.kiz-result-limit { margin-top: 2rem !important; padding-top: 2rem; border-top: 1px solid #bfdbfe; color: #475569; font-size: .875rem; }
.kiz-breakdown { margin: 0; text-align: left; }
.kiz-breakdown > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, auto); align-items: start; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #e2e8f0; }
.kiz-breakdown dt { line-height: 1.5; overflow-wrap: anywhere; }
.kiz-breakdown dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kiz-model-notes { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #f1f5f9; }
.kiz-model-notes > p:last-child { margin-top: 1.5rem; }
.kiz-app-banner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 5rem; padding: 2rem; border-radius: 2rem; background: #0f172a; color: #fff; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); }
.kiz-app-content { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; min-width: 0; text-align: center; }
.kiz-app-icon { flex: 0 0 auto; width: 5rem; height: 5rem; border: 2px solid #334155; border-radius: 1rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); }
.kiz-app-banner h2 { margin-bottom: .5rem; color: #fff; font-size: 1.5rem; }
.kiz-app-banner p { max-width: 24rem; margin: 0; color: #94a3b8; }
.kiz-app-link { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; max-width: 100%; min-height: 3.5rem; padding: .5rem 2rem; border-radius: 9999px; background: #fff; box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1); }
.kiz-app-link img { display: block; width: auto; max-width: 100%; height: 2.5rem; object-fit: contain; }
.kiz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px !important; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (min-width: 640px) {
    .kiz-calculator h1 { font-size: 2.25rem; }
}
@media (min-width: 768px) {
    .kiz-page { padding-inline: 3rem; }
    .kiz-calculator { padding: 3rem; }
    .kiz-calculator h1 { font-size: 3rem; }
    .kiz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kiz-app-banner, .kiz-app-content { flex-direction: row; }
    .kiz-app-content { text-align: left; }
}
@media (max-width: 600px) {
    /* Retain the original white card. Only nested details/results need tighter
       padding to accommodate the verified fields in a narrow viewport. */
    .kiz-details-body { padding: .75rem; }
    .kiz-details-body .kiz-details-body { padding: .5rem; }
    .kiz-details-body .kiz-field :is(input:not([type="checkbox"]), select) { padding-inline: .75rem; }
    .kiz-button { padding-inline: 1.5rem; }
    .kiz-result { padding: 1.25rem; }
    .kiz-result-value { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.15 !important; }
    .kiz-breakdown > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; font-size: .875rem; }
    .kiz-breakdown dd { text-align: left; white-space: normal; }
    .kiz-app-banner { padding: 1rem; }
    .kiz-app-link { padding-inline: 1rem; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    #kiz-calculate:not(:disabled):hover { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .kiz-page, .kiz-page * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
    .kiz-calculator, .kiz-result, .kiz-errors, .kiz-button, .kiz-app-banner { border: 1px solid CanvasText; }
    .kiz-calculator :is(a, button, input, select, summary):focus-visible { outline-color: Highlight; }
}