/* BeePilo design system (@la/brand). One file, loaded before each app's own layout CSS.
   Tokens: colour (light and dark), type, radius, focus. Base: box model, body, links, focus ring, reduced
   motion. Utilities: skip link, visually hidden. Components: buttons, chips, fields, checks, headlines,
   notes, sources, language switch, PEB badges. Text/background pairs are contrast-tested (WCAG 2.2 AA) in
   packages/brand/test/brand.test.ts; change a colour here and the test tells you if it still passes. */
:root {
  --paper: #f3f5f9;
  --sheet: #ffffff;
  --ink: #15203a;
  --ink-soft: #4d5a73;
  --rule: #d4dae5;
  --field: #ffffff;
  --accent: #1f4fd6;
  --accent-ink: #ffffff;
  --band: #15203a;
  --band-ink: #eef2fa;
  --block: #b3261e;
  --block-bg: #fcebea;
  --warn: #8a5300;
  --warn-bg: #fff3d6;
  --ok: #17703d;
  --ok-bg: #e6f4ea;
  --focus: #1f4fd6;
  /* PEB energy scale (same in both themes) and the text colour that reads on each */
  --peb-app: #00703c; --peb-app-ink: #ffffff;
  --peb-ap: #00843d; --peb-ap-ink: #ffffff;
  --peb-a: #2e9e44; --peb-a-ink: #10151f;
  --peb-b: #8dc63f; --peb-b-ink: #10151f;
  --peb-c: #f2d500; --peb-c-ink: #10151f;
  --peb-d: #f7a600; --peb-d-ink: #10151f;
  --peb-e: #ee7d1a; --peb-e-ink: #10151f;
  --peb-f: #d9381a; --peb-f-ink: #ffffff;
  --peb-g: #c1121f; --peb-g-ink: #ffffff;
  /* Same stack as BeeHabi and BeeDivi: no web font is downloaded (Inter where installed, else the system font). */
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --radius: 6px;
  --target: 1.5rem; /* 24px: WCAG 2.2 minimum target size */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0e1421; --sheet: #161f32; --ink: #e6ebf4; --ink-soft: #a2adc1; --rule: #2a3550; --field: #111a2b;
    --accent: #8aa8ff; --accent-ink: #0e1421; --band: #0a0f1a; --band-ink: #e6ebf4;
    --block: #ff9b93; --block-bg: #3a1a19; --warn: #f3c66d; --warn-bg: #33280f; --ok: #74d39f; --ok-bg: #12301f;
    --focus: #8aa8ff;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: #0e1421; --sheet: #161f32; --ink: #e6ebf4; --ink-soft: #a2adc1; --rule: #2a3550; --field: #111a2b;
  --accent: #8aa8ff; --accent-ink: #0e1421; --band: #0a0f1a; --band-ink: #e6ebf4;
  --block: #ff9b93; --block-bg: #3a1a19; --warn: #f3c66d; --warn-bg: #33280f; --ok: #74d39f; --ok-bg: #12301f;
  --focus: #8aa8ff;
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
/* Date fields focus an inner segment: ring the whole field while any part of it has focus */
input[type='date']:focus-within, input[type='time']:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
summary { cursor: pointer; min-height: var(--target); display: list-item; padding-block: 0.15rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Utilities */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 0.75rem; top: -10rem; z-index: 100; background: var(--ink); color: var(--paper); font-weight: 700; padding: 0.6rem 1rem; border-radius: var(--radius); text-decoration: none; }
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 0.75rem); }
[tabindex='-1']:focus { outline: none; }

/* Components */
.btn { display: inline-flex; align-items: center; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--radius); padding: 0.7rem 1.15rem; min-height: 2.75rem; }
.btn:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.small { padding: 0.35rem 0.75rem; min-height: 2.1rem; font-size: 0.875rem; }
.text-btn { font: inherit; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; min-height: var(--target); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.chip { display: inline-flex; font-size: 0.8125rem; font-weight: 700; border-radius: 999px; padding: 0.05rem 0.55rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.late { background: var(--block-bg); color: var(--block); }
.field { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.9rem; min-width: 0; }
.field input, .field select, .field textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--field); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.55rem 0.65rem; min-height: 2.6rem; width: 100%; font-variant-numeric: tabular-nums; }
.check, .radio { display: flex; gap: 0.6rem; align-items: flex-start; min-height: var(--target); font-weight: 500; cursor: pointer; }
.check input, .radio input { width: 1.1rem; height: 1.1rem; margin: 0.2rem 0 0; accent-color: var(--accent); flex: none; }
.headline { border-radius: var(--radius); padding: 0.75rem 0.9rem; display: grid; gap: 0.4rem; }
.headline p { margin: 0; font-weight: 600; }
.headline.ok { background: var(--ok-bg); color: var(--ok); }
.headline.warn { background: var(--warn-bg); color: var(--warn); }
.notes, .issues { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.35rem; font-size: 0.9375rem; }
.notes { color: var(--ink-soft); }
.issues { color: var(--block); font-weight: 600; }
.sources summary { font-weight: 600; font-size: 0.875rem; color: var(--ink-soft); }
.sources ul { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.8125rem; display: grid; gap: 0.25rem; }
.sources a { overflow-wrap: anywhere; }
.langs { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; }
.lang { font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); background: transparent; border: 0; border-radius: 999px; padding: 0.25rem 0.65rem; min-height: var(--target); cursor: pointer; }
.lang[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.form-error { margin: 0; color: var(--block); font-weight: 600; min-height: 1.2em; }
/* PEB badges: put the class on any element, it gets the scale colour and readable text */
.peb-app { --c: var(--peb-app); color: var(--peb-app-ink); }
.peb-ap { --c: var(--peb-ap); color: var(--peb-ap-ink); }
.peb-a { --c: var(--peb-a); color: var(--peb-a-ink); }
.peb-b { --c: var(--peb-b); color: var(--peb-b-ink); }
.peb-c { --c: var(--peb-c); color: var(--peb-c-ink); }
.peb-d { --c: var(--peb-d); color: var(--peb-d-ink); }
.peb-e { --c: var(--peb-e); color: var(--peb-e-ink); }
.peb-f { --c: var(--peb-f); color: var(--peb-f-ink); }
.peb-g { --c: var(--peb-g); color: var(--peb-g-ink); }

/* Layout: a marketing front door whose hero is the product itself (live approval slips computed by the
   rules engine), then plain sections; tools open as two-column workbenches (form left, live result right).
   Same tokens as the calculator and the app preview; the PEB scale and priority stripes are the only colour. */
:root {
  --step-hero: clamp(2.6rem, 1.6rem + 4.2vw, 4.6rem);
  --step-3: clamp(1.7rem, 1.25rem + 1.8vw, 2.5rem);
}

body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--sheet); }
.inner { max-width: 74rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.02em; }
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 40rem; margin: 0; }
.hint { color: var(--ink-soft); font-size: 0.875rem; margin: 0; }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--sheet); border-bottom: 1px solid var(--rule); }
.topbar { display: flex; align-items: center; gap: 0.75rem 1.5rem; padding-block: 0.75rem; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; margin-right: auto; }
.nav { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem; display: inline-flex; align-items: center; min-height: 2rem; }
.nav a:hover { color: var(--accent); }
.nav .nav-cta { color: var(--accent-ink); background: var(--accent); padding: 0.4rem 0.85rem; border-radius: var(--radius); }
@media (max-width: 760px) {
  .nav { order: 3; width: 100%; gap: 0.5rem 1rem; }
  .nav a { white-space: nowrap; }
}

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-weight: 600; }

/* Hero */
.hero { max-width: 74rem; margin: 0 auto; padding: 3.5rem max(16px, env(safe-area-inset-right, 0px)) 3.5rem max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 980px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; padding-block: 5rem; } }
.hero-copy { display: grid; gap: 1.4rem; }
.hero h1 { font-size: var(--step-hero); line-height: 0.98; font-weight: 800; letter-spacing: -0.045em; margin: 0; }
.demo { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 1.25rem; display: grid; gap: 0.75rem; min-width: 0; }
.demo-label { margin: 0; font-weight: 700; }
.slips { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.slip {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.4rem 0.9rem; align-items: center;
  border: 1px solid var(--rule); border-left: 5px solid var(--stripe, var(--rule)); border-radius: var(--radius); padding: 0.7rem 0.8rem; background: var(--sheet);
  animation: slip-in 420ms cubic-bezier(.2,.7,.2,1) both;
}
.slip:nth-child(2) { animation-delay: 90ms; } .slip:nth-child(3) { animation-delay: 180ms; }
@keyframes slip-in { from { opacity: 0.001; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.slip.p-high { --stripe: var(--block); } .slip.p-medium { --stripe: var(--warn); } .slip.p-low { --stripe: var(--ink-soft); }
.slip.done { --stripe: var(--ok); background: var(--ok-bg); }
.slip-main { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; min-width: 0; }
.slip-where { width: 100%; color: var(--ink-soft); font-size: 0.8125rem; }
.tick { color: var(--ok); font-weight: 800; font-size: 1.2rem; width: 2rem; text-align: center; }
.demo-foot { margin: 0; font-weight: 600; color: var(--ink-soft); }
.demo-note { margin: 0; font-size: 0.75rem; color: var(--ink-soft); }
@media (max-width: 520px) { .slip { grid-template-columns: minmax(0, 1fr) auto; } .slip .due { grid-column: 1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .slip { animation: none; } }

.due { font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.due.late { color: var(--block); }

/* Sections */
.section-title { font-size: var(--step-3); line-height: 1.1; margin: 0 0 1.25rem; max-width: 40rem; }
.band-light { background: var(--sheet); border-block: 1px solid var(--rule); padding-block: 3.5rem; }
.problems { display: grid; gap: 1.75rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.problem { border-top: 2px solid var(--ink); padding-top: 0.75rem; }
.problem h3 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.problem p { margin: 0; color: var(--ink-soft); }
.how { padding-block: 3.5rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 0.35rem; }
.steps li::before { content: counter(step); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.steps h3 { margin: 0; font-size: 1.15rem; } .steps p { margin: 0; color: var(--ink-soft); }
#tools-section, #pricing-section { padding-block: 3rem; display: grid; gap: 1rem; }
.toolcards { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.toolcard a { display: grid; gap: 0.3rem; height: 100%; padding: 1rem 1.1rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; text-decoration: none; color: var(--ink); }
.toolcard a:hover { border-color: var(--accent); }
.toolcard strong { font-size: 1.05rem; } .toolcard span { color: var(--ink-soft); font-size: 0.9375rem; }
.toolcard em { font-style: normal; font-weight: 700; color: var(--accent); margin-top: 0.35rem; }
.toolcard.featured a { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.toolcard.featured span { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.toolcard.featured em { color: var(--paper); }
.plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.plan { border: 1px solid var(--rule); border-radius: 10px; padding: 1.1rem; background: var(--sheet); display: grid; gap: 0.35rem; align-content: start; }
.plan h3 { margin: 0; font-size: 1.05rem; } .plan p { margin: 0; color: var(--ink-soft); }
.plan .price { color: var(--ink); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.plan.hi { border: 2px solid var(--accent); }
.band-ink { background: var(--band); color: var(--band-ink); padding-block: 3.5rem; }
.band-ink .lede { color: color-mix(in srgb, var(--band-ink) 82%, transparent); }
.beta { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .beta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.beta-form { display: grid; gap: 0.85rem; background: var(--sheet); color: var(--ink); border-radius: 12px; padding: 1.25rem; }
.beta-form textarea, .letter { font: inherit; font-size: 0.875rem; width: 100%; border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.6rem; background: var(--paper); color: var(--ink); resize: vertical; }
.contact { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.copy-note { font-size: 0.8125rem; color: var(--ink-soft); }
.faq { padding-block: 3rem; display: grid; gap: 0.5rem; max-width: 52rem; margin-left: auto; margin-right: auto; }
.faq details { border-top: 1px solid var(--rule); padding: 0.85rem 0; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin: 0.5rem 0 0; color: var(--ink-soft); max-width: 60ch; }

/* Tools */
.tool { max-width: 74rem; margin: 0 auto; padding: 2rem max(16px, env(safe-area-inset-right, 0px)) 4rem max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 1.5rem; }
.crumb { font-weight: 600; text-decoration: none; font-size: 0.9375rem; justify-self: start; display: inline-flex; align-items: center; min-height: 2rem; }
.tool-head { display: grid; gap: 0.6rem; }
.tool-head h1, .guides h1, .guide h1 { font-size: var(--step-3); line-height: 1.08; margin: 0; }
.tool-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 940px) { .tool-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem; } .tool-result { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 5rem); } }
.tool-form { display: grid; gap: 0.9rem; min-width: 0; }
.tool-form h2, .tool-form h3 { margin: 0.75rem 0 0; font-size: 1rem; }
.row { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.stages { border: 0; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.stages legend { font-weight: 700; margin-bottom: 0.4rem; padding: 0; }
.tool-result { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 1.25rem; display: grid; gap: 0.9rem; min-width: 0; }
.tool-result h2 { margin: 0.4rem 0 0; font-size: 1.05rem; }
.tool-result p { margin: 0; }
.big { font-size: 1.15rem; font-weight: 700; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: start; border: 1px solid var(--rule); border-left: 5px solid var(--stripe, var(--rule)); border-radius: var(--radius); padding: 0.6rem 0.75rem; }
.item.p-high { --stripe: var(--block); } .item.p-medium { --stripe: var(--warn); } .item.p-low { --stripe: var(--ink-soft); }
.item-main { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; min-width: 0; }
.item .sub { width: 100%; margin: 0.2rem 0 0; padding-left: 1.1rem; color: var(--block); font-size: 0.875rem; }
.status { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.status li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-bottom: 1px solid var(--rule); padding-bottom: 0.45rem; font-weight: 600; flex-wrap: wrap; }
.two { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.yes, .no { margin: 0.4rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; }
.yes li::marker { content: '✓  '; color: var(--ok); } .no li::marker { content: '✗  '; color: var(--block); }
.later { margin: 0.4rem 0 0.9rem; padding-left: 1.1rem; display: grid; gap: 0.25rem; color: var(--ink-soft); }
.later li::marker { content: '…  '; color: var(--warn); }
.jump { display: none; justify-self: start; font: inherit; font-weight: 700; color: var(--accent); background: none; border: 1px solid var(--accent); border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer; }
@media (max-width: 939px) { .jump { display: inline-flex; } }
.pebstrip { display: flex; gap: 3px; flex-wrap: wrap; }
.peb { display: inline-grid; place-items: center; min-width: 2.3rem; height: 1.8rem; padding: 0 0.35rem; font-weight: 800; font-size: 0.8125rem; background: var(--c); border-radius: 3px; opacity: 0.35; }
.peb.on { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; }
.cta { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); background: var(--ink); color: var(--paper); border-radius: 10px; padding: 1rem 1.1rem; }
.cta h2 { margin: 0 0 0.2rem; font-size: 1rem; } .cta p { margin: 0; color: color-mix(in srgb, var(--paper) 82%, transparent); font-size: 0.9375rem; }
.cta .btn { justify-self: start; background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Guides */
.guides, .guide { padding-block: 2rem 4rem; display: grid; gap: 1.1rem; max-width: 52rem; }
.guidelist { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.guidelist a { display: grid; gap: 0.25rem; padding: 1rem 1.1rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; text-decoration: none; color: var(--ink); }
.guidelist a:hover { border-color: var(--accent); }
.guidelist span { color: var(--ink-soft); } .guidelist em { font-style: normal; font-weight: 700; color: var(--accent); }
.guide-points { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.7rem; font-size: 1.05rem; line-height: 1.6; max-width: 62ch; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); background: var(--sheet); }
.foot { padding-block: 1.5rem 2rem; display: grid; gap: 0.5rem; font-size: 0.875rem; color: var(--ink-soft); }
.foot p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.foot-links a { display: inline-flex; align-items: center; min-height: 2rem; }

/* Crawlable text in static pages, shown until the app takes over */
.seo { padding-block: 2.5rem; display: grid; gap: 0.75rem; max-width: 52rem; }
.seo nav ul { padding-left: 1.1rem; display: grid; gap: 0.25rem; }

/* Day-5 tools: facts list, calculation steps, tables, cost lines, printable checklist */
.facts { margin: 0; display: grid; gap: 0.45rem; }
.facts div { display: grid; grid-template-columns: minmax(7rem, 0.4fr) minmax(0, 1fr); gap: 0.75rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.45rem; }
.facts dt { font-weight: 600; color: var(--ink-soft); }
.facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .facts div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } }
.calc { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.35rem; font-size: 0.9375rem; }
.notes .strong { color: var(--ink); font-weight: 600; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grid { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.grid th, .grid td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.grid thead th { font-size: 0.8125rem; color: var(--ink-soft); font-weight: 700; }
.grid .num { text-align: right; white-space: nowrap; }
.grid tfoot th { font-weight: 600; }
.grid tfoot .total th, .grid tfoot .total td { font-weight: 800; border-bottom: 0; }
.seg { grid-auto-flow: column; justify-content: start; gap: 1.25rem; }
.seg legend { grid-column: 1 / -1; }
.lines { border: 1px solid var(--rule); border-radius: var(--radius); margin: 0; padding: 0.75rem; display: grid; gap: 0.75rem; min-width: 0; }
.lines legend { font-weight: 700; padding: 0 0.3rem; }
.lines > .btn { justify-self: start; }
.cline { display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.8fr) auto; align-items: end; }
.cline .text-btn { padding-bottom: 0.7rem; font-size: 0.875rem; }
@media (max-width: 560px) { .cline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px dashed var(--rule); padding-bottom: 0.6rem; } .cline .field:first-child { grid-column: 1 / -1; } }
.parties summary { cursor: pointer; font-weight: 600; }
.parties[open] { display: grid; gap: 0.75rem; }
.checklist { display: grid; gap: 0.9rem; }
.cl-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cl caption { text-align: left; font-weight: 800; padding: 0.4rem 0; }
.cl .st { color: var(--ink-soft); font-size: 0.8125rem; white-space: nowrap; }
.cl td.blank { min-width: 6rem; }
@media (max-width: 560px) { .cl .st { white-space: normal; } .cl td.blank { min-width: 4rem; } .cl th, .cl td { padding: 0.4rem 0.3rem; overflow-wrap: anywhere; } }
.print-only { display: none; }
@media print {
  .site-header, .site-footer, .crumb, .tool-head, .tool-form, .jump, .no-print, .cta, .sources { display: none !important; }
  body { background: #ffffff; color: #000000; }
  .tool { padding: 0; }
  .tool-grid { display: block; }
  .tool-result { border: 0; padding: 0; position: static; background: #ffffff; }
  .print-only { display: block; }
  .cl { break-inside: avoid; page-break-inside: avoid; margin-bottom: 0.6rem; }
  .cl td.blank { width: 45%; }
  .grid th, .grid td { border-bottom: 1px solid #999999; }
  .sign { margin-top: 1.5rem; }
}

/* Indexation tool: the amount is the hero of the result */
.amount-big { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; margin: 0; }
.amount-big.muted { color: var(--ink-soft); }
.field small.hint { font-weight: 400; }

/* Content pages and site footer */
.content { padding-block: 2rem 4rem; display: grid; gap: 1.5rem; max-width: 56rem; }
.content-head { display: grid; gap: 0.6rem; }
.content-head h1 { font-size: var(--step-3); line-height: 1.08; margin: 0; }
.content section { display: grid; gap: 0.75rem; }
.content section h2 { margin: 0.75rem 0 0; font-size: 1.3rem; }
.content p { margin: 0; max-width: 68ch; }
.content-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; max-width: 68ch; }
.content-table { background: var(--sheet); }
.content-table th[scope='row'] { font-weight: 600; }
.qa details { border-top: 1px solid var(--rule); padding: 0.6rem 0; }
.qa summary { font-weight: 700; }
.qa p { margin-top: 0.4rem; color: var(--ink-soft); }
.foot-cols { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); padding-bottom: 0.5rem; }
.foot-cols h2 { font-size: 0.875rem; margin: 0 0 0.35rem; color: var(--ink); }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.foot-cols a { display: inline-flex; align-items: center; min-height: 1.75rem; }
code { font-size: 0.875em; }
.content-table a { display: inline-block; min-height: var(--target); padding-block: 0.1rem; }
.beta-form .rentals { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.beta-form .rentals legend { font-weight: 600; padding: 0; margin-bottom: 0.25rem; }
.beta-form .ok { font-weight: 600; }