/* Bring AI to Business — « Atelier de confiance » (final).
   Mobile-first. Fonts are self-hosted (assets/fonts/, SIL OFL); the site makes no external request.
   Structure comes from spacing and type weight, not hairlines; from 1024 px every section has a
   14 rem margin-note column on the left (eyebrows, trust points, step durations, "about" labels).
   Motion, compact bar and estimator styles are at the end (see "Motion" and "Estimator"). */

/* ---------- Fonts (latin + latin-ext subsets, variable, woff2, roman only) ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/publicsans/publicsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/publicsans/publicsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fallback faces (generated by tools/font-metrics.js): the local face is scaled to the web font's
   rendered width and given its vertical metrics, so the swap does not move the layout. Re-run the tool
   (node tools/font-metrics.js --write, after node build.js) whenever a web font file changes. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 101.35%;
  ascent-override: 96.50%;
  descent-override: 25.16%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Fraunces Fallback Display";
  src: local("Georgia");
  size-adjust: 96.88%;
  ascent-override: 100.95%;
  descent-override: 26.32%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Public Sans Fallback";
  font-weight: 400 500;
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 102.76%;
  ascent-override: 92.45%;
  descent-override: 21.90%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Public Sans Fallback";
  font-weight: 600 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica-Bold");
  size-adjust: 97.00%;
  ascent-override: 97.94%;
  descent-override: 23.20%;
  line-gap-override: 0.00%;
}

/* ---------- Tokens ---------- */
:root {
  --ground: #EEF1EB;        /* pierre: pale cool grey-green */
  --ground-2: #E3E8E0;      /* sauge: alternate section ground */
  --surface: #FAFBF8;       /* os: panels and cards */
  --ink: #0E2A22;           /* encre bouteille */
  --ink-2: #3B534A;
  --muted: #56695F;
  --rule: #C4CFC6;
  --track: #82908A;         /* slider track, unfilled part: 3.2:1 on --surface (WCAG 1.4.11) */
  --accent: #82591C;        /* laiton: CTA, € figures, the H1 turn, check marks */
  --accent-dark: #6B4915;
  --accent-light: #C9A25A;  /* laiton clair: the accent on dark grounds */
  --on-dark: #EEF1EB;
  --on-dark-muted: #B9C6BB;
  --serif: "Fraunces", "Fraunces Fallback", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans: "Public Sans", "Public Sans Fallback", Arial, system-ui, "Segoe UI", Roboto, sans-serif;
  --container: 1120px;
  --gutter: 1rem;
  --margin: 14rem;
  --measure: 62ch;
  --radius: 3px;
  --header-h: 64px;
  --compact-h: 56px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 16px;
  background: var(--ground);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  font-synthesis: none;
}
[hidden] { display: none !important; }
img, svg { max-width: 100%; height: auto; }
svg { display: inline-block; }
.ic { width: 24px; height: 24px; flex: none; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
main:focus, main:focus-visible { outline: none; }
address { font-style: normal; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .75rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 4.1rem); line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 1.35rem + 1.9vw, 2.9rem); line-height: 1.1; letter-spacing: -0.015em; }
h3 { font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.005em; }
h4 { font-size: 1.1rem; }
.lead { font-size: 1.2rem; color: var(--ink-2); line-height: 1.5; max-width: var(--measure); text-wrap: pretty; }
.prose { max-width: var(--measure); }
.prose p:last-child { margin-bottom: 0; }
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.eyebrow, .label {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.label { color: var(--muted); margin-bottom: .75rem; }
h3.label { font-size: .8125rem; line-height: 1.4; letter-spacing: .12em; }
/* Numerals: only where order carries information (guarantee levels, steps). Lining + tabular. */
.num {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
/* € figures: one device page-wide (wrapped by build.js): the serif face, lining tabular numerals,
   brass. Same size as the surrounding text, never underlined, never broken across lines. */
.fig {
  font-family: var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.06em;
  letter-spacing: -.005em;
  color: var(--accent);
  white-space: nowrap;
}
h1 .fig, h2 .fig, h3 .fig, .price .fig, .faq-list summary .fig { font-size: 1em; }
.offer-foot .fig, .final .fig, .offer-price .fig { color: var(--accent-light); }
/* The sans em dash carries wide side bearings (1.09 em advance): tightened so "mot — mot" reads as one
   gap on each side, not two. Serif settings are left as drawn. */
.dash { margin-inline: -.12em; }
h1 .dash, h2 .dash, h3 .dash, h4 .dash, .pullquote .dash, .faq-list summary .dash, .cards blockquote .dash, .step-meta .dash, .price .dash { margin: 0; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Placeholders (to be replaced by the owner) and the cards that hold real content later */
.ph {
  color: var(--muted);
  border-bottom: 1px dashed var(--muted);
}
a .ph { border-bottom: 0; }
a:has(> .ph) { text-decoration-style: dashed; text-decoration-color: var(--muted); }
.card, .card-ph {
  border-radius: 2px;
  padding: 1.25rem;
}
.card { background: var(--surface); }
.card-ph {
  border: 1px dashed var(--muted);
  color: var(--muted);
  background: transparent;
}
.card-ph p, .card-ph li, .card-ph h4, .card-ph figcaption { color: var(--muted); }
.card-ph .fields .ph { white-space: nowrap; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--on-dark);
  padding: .6rem 1rem;
  border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  border: 1px solid transparent;
  border-radius: var(--radius);
  width: 100%;
}
.btn:hover { background: var(--accent-dark); color: #fff; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.cta-block { margin-top: 2rem; }
.cta-block .micro { margin: .85rem 0 0; font-size: .92rem; color: var(--muted); max-width: var(--measure); text-wrap: pretty; }
/* Phones up to ~420 px: at .95rem the French label ("Réserver un diagnostic gratuit de 15 min") stays
   on one line down to 360 px, so the CTAs of one scroll all read alike; the two panel CTAs (offer foot,
   estimator foot) get tighter side padding and may wrap to two balanced lines inside their panel. */
@media (max-width: 419.98px) {
  .btn { font-size: .95rem; }
}
@media (max-width: 599.98px) {
  .offer-foot .btn, .est-cta .btn { padding-left: .5rem; padding-right: .5rem; }
}
@media (min-width: 600px) {
  .btn { width: auto; padding: .8rem 1.6rem; font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color .15s ease; }
}

/* ---------- Top bar + header (no rules: the hero's size does the separating) ---------- */
.topbar {
  font-size: .8rem;
  color: var(--muted);
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 40px;
}
.topbar-markets { min-width: 0; letter-spacing: .02em; line-height: 1.35; padding: .35rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The region list stays on one line or disappears (it is repeated in the footer): the English list is
   longer, so it needs a wider screen. */
@media (max-width: 359.98px) {
  .topbar-markets { display: none; }
}
@media (max-width: 519.98px) {
  .topbar-markets { display: none; }
  .topbar .wrap { justify-content: flex-end; }
}
/* FR · EN · PT: the current language is marked (ink + underline), the others are links. */
.lang-switch { flex: none; margin-left: auto; margin-right: -.5rem; }
.lang-switch ul { display: flex; list-style: none; margin: 0; padding: 0; }
.lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 .5rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--muted);
}
.lang-link:hover { color: var(--ink); text-decoration: underline; }
.lang-link.is-current { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.site-header { background: var(--ground); }
.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding-top: .35rem;
  padding-bottom: .35rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  flex: 0 1 auto;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand svg { width: 30px; height: 30px; flex: none; }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle .ic-close, .nav-open .menu-toggle .ic-menu { display: none; }
.nav-open .menu-toggle .ic-close { display: inline-block; }
.site-nav { display: none; flex: 0 0 100%; order: 2; }
.nav-open .site-nav { display: block; }
/* Without JavaScript there is no toggle: the section list is simply shown under the brand row. */
.no-js .menu-toggle { display: none; }
.no-js .site-nav { display: block; }
.site-nav ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.site-nav a {
  display: block;
  padding: .7rem 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  text-decoration: none;
}
.site-nav a:hover { color: var(--accent-dark); }
@media (min-width: 700px) {
  .header-row { min-height: var(--header-h); padding-top: 0; padding-bottom: 0; gap: 1rem; }
}
@media (min-width: 1024px) {
  .wrap { --gutter: 2rem; }
}
@media (min-width: 1200px) {
  /* Without JavaScript the header stays sticky from here only: the nav is a single 64 px row (below
     1200 px the no-JS nav is a vertical list, which must never stick over the content). With JavaScript
     the compact bar (see Motion) takes over. */
  html.no-js { scroll-padding-top: calc(var(--header-h) + 16px); }
  .no-js .site-header { position: sticky; top: 0; z-index: 20; background: rgba(238, 241, 235, .96); }
  .header-row { flex-wrap: nowrap; }
  .menu-toggle { display: none; }
  .site-nav, .nav-open .site-nav, .no-js .site-nav { display: block; flex: 1 1 auto; order: 0; margin-left: auto; }
  .site-nav ul { display: flex; justify-content: flex-end; gap: 1.5rem; margin: 0; }
  .site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border-bottom: 1px solid transparent;
    font-family: var(--sans);
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink-2);
  }
  .site-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
}

/* ---------- Sections + the margin-note grid ---------- */
.section { padding: 3.5rem 0; }
.section-head { margin-bottom: 2rem; }
.section-head h2 { margin-bottom: .75rem; max-width: 24ch; }
.section-head .lead { margin: 0; }
.section-tint { background: var(--ground-2); }
.closing { margin-top: 2.5rem; }
.closing p { font-size: 1.15rem; line-height: 1.5; max-width: var(--measure); text-wrap: pretty; }
@media (min-width: 900px) {
  .section { padding: 6rem 0; }
  .section-head { margin-bottom: 3rem; }
}
@media (min-width: 1024px) {
  /* Every direct child of a section sits in the content column; the section head is a two-column
     grid whose eyebrow lives in the margin. The two "objects" (offer card, estimator panel) and the
     rows that carry their own margin note (steps, facts, founder) reach back into the margin. */
  .section .wrap > * { margin-left: var(--margin); }
  .section .wrap > .section-head {
    margin-left: 0;
    display: grid;
    grid-template-columns: var(--margin) minmax(0, 1fr);
    column-gap: 0;
  }
  .section-head .eyebrow { grid-column: 1; grid-row: 1; margin: .6rem 2rem 0 0; }
  .section-head h2, .section-head .lead { grid-column: 2; }
  .section .wrap > .offer-card, .section .wrap > .est-panel, .section .wrap > .steps,
  .section .wrap > .facts, .section .wrap > .founder-card { margin-left: 0; }
}

/* ---------- Hero ----------
   The thesis. DOM order = copy order (kicker, H1, sub, CTA, key facts); build.js wraps each clause
   of the H1 in <span class="h1-line"> and the closing clause in .h1-turn, which is set in brass.
   On phones the clauses simply wrap; from 600 px each clause is a line of its own; from 1024 px the
   kicker is the margin note beside the thesis. The three key facts (figure + one line) sit under the
   button as a strip over a top rule, three columns from 600 px. */
.hero { padding: 2rem 0 3rem; }
.hero .wrap { display: flex; flex-direction: column; }
.hero .kicker {
  text-transform: none;
  letter-spacing: 0;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34rem;
  margin-bottom: 1.25rem;
  text-wrap: pretty;
}
.hero h1 { margin-bottom: 1.5rem; max-width: 24ch; }
.h1-line { display: inline; }
.h1-turn { color: var(--accent); }
@media (max-width: 599.98px) {
  /* The clauses wrap as one paragraph: "pretty" forbids a single-word last line ("pas." / "pay."). */
  h1 { text-wrap: pretty; }
}
.hero .lead { margin-bottom: 1.5rem; max-width: 52ch; }
.hero .cta-block { margin-top: .25rem; }
.keyfacts {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 1.25rem;
}
.keyfacts li { margin: 0; }
.keyfacts p { margin: 0; }
.fact-fig {
  font-family: var(--serif);
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.fact-fig .fig { font-size: 1em; color: var(--accent); }
.tax { font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-left: .55em; vertical-align: .15em; color: var(--muted); white-space: nowrap; }
.price .tax { color: var(--on-dark-muted); font-size: .85rem; }
.fact-fig { margin-bottom: .1rem; }
.fact-label { margin-top: .4rem; font-size: .9rem; line-height: 1.4; color: var(--ink-2); max-width: 22ch; text-wrap: pretty; }
.fact-label::first-letter { text-transform: uppercase; }
@media (min-width: 600px) {
  .h1-line { display: block; }
  .keyfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3.25rem; padding-top: 1.75rem; }
}
@media (min-width: 700px) {
  .hero { padding: 3rem 0 4rem; }
  .fact-fig { font-size: 2.1rem; }
}
/* A dash clause glued to the clause before it (build.js .h1-glue) wraps with it like ordinary text: the
   bound dash (NBSP) can never start a line, so only the closing turn is dash-led. */
.h1-glue { display: inline; }
@media (min-width: 1200px) {
  /* At its desktop size the display face is narrower (optical sizing): its own metric-matched fallback. */
  h1 { font-family: "Fraunces", "Fraunces Fallback Display", Georgia, "Iowan Old Style", "Palatino Linotype", serif; }
}
@media (min-width: 1024px) {
  .hero { padding: 3.5rem 0 5rem; }
  .hero .wrap {
    display: grid;
    grid-template-columns: var(--margin) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
  }
  .hero .kicker { grid-column: 1; grid-row: 1; margin: .9rem 2rem 0 0; font-size: .92rem; }
  .hero h1 { grid-column: 2; grid-row: 1; max-width: 26ch; margin-bottom: 1.75rem; }
  .hero .lead { grid-column: 2; grid-row: 2; }
  .hero .cta-block { grid-column: 2; grid-row: 3; }
  /* The strip reaches back into the margin (like the offer card and the estimator). */
  .hero .keyfacts { grid-column: 1 / -1; grid-row: 4; margin-top: 4rem; padding-top: 2rem; gap: 2.5rem; }
  .fact-fig { font-size: 2.3rem; }
}

/* ---------- Problem: three cards (icon, title, one line) ---------- */
.problem-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.problem-grid > li {
  background: var(--surface);
  border-radius: 2px;
  padding: 1.5rem 1.35rem 1.4rem;
  display: grid;
  gap: .6rem;
}
.problem-grid .ic { width: 28px; height: 28px; color: var(--accent); margin-bottom: .35rem; }
.problem-grid h3 { margin: 0; font-size: 1.25rem; }
.problem-grid > li > p { margin: 0; color: var(--ink-2); font-size: .97rem; line-height: 1.5; text-wrap: pretty; }
@media (min-width: 700px) {
  .problem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .problem-grid > li { padding: 1.75rem 1.5rem 1.6rem; }
}
@media (hover: hover) {
  .problem-grid > li:hover { background: #FFFFFF; }
  .motion .problem-grid > li { transition: background-color .2s ease, transform .2s ease; }
  .motion .problem-grid > li:hover { transform: translateY(-2px); }
}

/* ---------- Numbered list (guarantee: the order matters) ---------- */
.num-list { list-style: none; margin: 0; padding: 0; }
.num-list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .75rem;
  align-items: baseline;
  padding: 0 0 2rem;
}
.num-list > li:last-child { padding-bottom: 0; }
.num-list h3 { margin: 0 0 .5rem; }
.num-list > li > p { grid-column: 1 / -1; margin: 0; max-width: var(--measure); text-wrap: pretty; }
@media (min-width: 700px) {
  .num-list > li { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 0; align-items: start; }
  .num-list > li > p { grid-column: 2; }
  .num-list .num { font-size: 2.2rem; line-height: 1; margin-top: .15rem; }
}

/* ---------- Offer card: one strong object. Dark price rail | bone checklist | dark one-liner + CTA ---------- */
.offer-intro { margin-bottom: 2rem; }
.offer-card {
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}
.offer-price { padding: 1.75rem 1.25rem 1.5rem; background: var(--ink); color: var(--on-dark); }
.offer-price .eyebrow { color: var(--on-dark-muted); margin-bottom: .5rem; }
.price {
  font-family: var(--serif);
  font-size: clamp(3.2rem, 2.4rem + 3vw, 5rem);
  line-height: 1;
  margin: 0 0 .75rem;
  color: var(--accent-light);
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.price-note { margin: 0; color: var(--on-dark); max-width: 30ch; text-wrap: pretty; }
.price-note::first-letter { text-transform: uppercase; }
.offer-body { padding: 1.5rem 1.25rem 1rem; }
.offer-body .label { margin-bottom: .5rem; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list > li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: .85rem;
  align-items: start;
  padding: 1rem 0;
}
.check-list .ic-tick { width: 26px; height: 26px; color: var(--accent); margin-top: .1em; }
.check-list h3 { margin: 0 0 .35rem; font-size: 1.2rem; }
.check-list > li > p { grid-column: 2; margin: 0; font-size: .97rem; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }
.offer-foot { padding: 1.5rem 1.25rem 1.75rem; background: var(--ink); color: var(--on-dark); }
.offer-foot p { margin: 0 0 1.5rem; max-width: var(--measure); text-wrap: pretty; }
.offer-foot .btn, .final .btn { background: var(--accent-light); color: var(--ink); }
.offer-foot .btn:hover, .final .btn:hover { background: #D8B56B; color: var(--ink); }
.offer-foot .btn:focus-visible, .final .btn:focus-visible { outline-color: var(--on-dark); }
@media (min-width: 600px) {
  .offer-price, .offer-body, .offer-foot { padding-left: 1.75rem; padding-right: 1.75rem; }
}
@media (min-width: 900px) {
  /* Left rail: price, then summary + CTA; the checklist fills the right column. The rail has a 27 rem
     floor so the French CTA label stays on one line (5/7 proportion unchanged from ~1150 px up). */
  .offer-card { display: grid; grid-template-columns: minmax(27rem, 5fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr); }
  .offer-foot .btn { padding-inline: 1rem; }
  .offer-price { grid-column: 1; grid-row: 1; padding: 2.5rem 2.25rem 2rem; }
  .offer-body { grid-column: 2; grid-row: 1 / span 2; padding: 2.25rem 2.5rem 1.75rem; }
  .offer-foot { grid-column: 1; grid-row: 2; padding: 0 2.25rem 2.5rem; }
  .offer-foot p { padding-top: 2rem; border-top: 1px solid rgba(238, 241, 235, .18); }
  .check-list > li { padding: 1.1rem 0; }
}

/* ---------- Guarantee ---------- */
.guarantee-list { margin-top: 2rem; }
.pullquote {
  margin: 3rem 0 0;
  padding: 0;
  max-width: 34rem;
}
.pullquote p {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0;
  text-wrap: pretty;
}
@media (min-width: 700px) {
  .pullquote { margin: 4rem 0 0; max-width: 38rem; }
  .pullquote p { font-size: 1.85rem; text-indent: -.5em; /* hanging opening quote */ }
}

/* ---------- How it works: a vertical rail, durations as marginalia ---------- */
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; padding: 0 0 2.5rem 3.25rem; }
.step::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: var(--ink);
}
.step:last-child { padding-bottom: 0; }
.step:last-child::before { display: none; }
.step-num {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.step h3 { margin: 0 0 .3rem; padding-top: .3rem; }
.step-meta {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink-2);
  margin: 0 0 .75rem;
  text-wrap: balance;
}
.step-body p:last-child { margin: 0; max-width: var(--measure); text-wrap: pretty; }
@media (min-width: 1024px) {
  .step { padding: 0 0 3rem calc(var(--margin) + 3.25rem); }
  .step::before { left: calc(var(--margin) + 17px); }
  .step-num { left: var(--margin); }
  .step-meta {
    position: absolute;
    left: 0;
    top: .35rem;
    width: calc(var(--margin) - 2rem);
    margin: 0;
  }
}

/* ---------- About: one founder card (photo | name, bio, contact), three principles, sector chips ---------- */
.founder-card {
  background: var(--surface);
  border-radius: 2px;
  padding: 1.5rem 1.25rem;
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.founder-name { margin: 0 0 .2rem; font-size: 1.5rem; }
.founder-role { margin: 0 0 1rem; font-size: .9rem; color: var(--muted); }
.founder-body .prose { color: var(--ink-2); }
.founder-card .contact-lines { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.photo-ph {
  width: 220px;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-size: .9rem;
}
.founder-photo { width: 220px; max-width: 100%; height: auto; border-radius: 2px; display: block; }
.facts { margin: 0 0 3.5rem; display: grid; gap: 2rem; }
.facts h3 {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .6rem;
}
.facts p, .facts ul { margin: 0; max-width: var(--measure); text-wrap: pretty; }
.facts > div > p::first-letter { text-transform: uppercase; }
.principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.principles li { margin: 0; padding-top: .75rem; border-top: 2px solid var(--ink); }
.principles strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; line-height: 1.25; margin-bottom: .3rem; }
.principles span { display: block; font-size: .95rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.contact-lines { display: grid; gap: .5rem; }
.contact-lines > span { display: flex; gap: .6rem; align-items: flex-start; }
.contact-lines .ic { width: 20px; height: 20px; margin-top: .2em; color: var(--muted); }
/* The e-mail row centres its icon on the 44 px link (specificity above ".contact-lines > span"). */
.contact-lines > .contact-mail { align-items: center; }
.contact-lines > .contact-mail .ic { margin-top: 0; }
.contact-lines a, .site-footer address a { display: inline-flex; align-items: center; min-height: 44px; }
/* Sectors as chips (one line each, wrapping): scannable, no prose. */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li {
  margin: 0;
  padding: .35rem .75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  font-size: .9rem;
  line-height: 1.3;
  color: var(--ink-2);
  white-space: nowrap;
}
.about-sub { margin-top: 2.5rem; }
.about-sub h3 { margin-bottom: .5rem; }
.cards { display: grid; gap: 1rem; margin-top: 1.25rem; }
.cards > * { margin: 0; }
.cards h4 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.cards .fields { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.cards .fields li { padding: .4rem 0; }
.cards .fields li + li { border-top: 1px dashed var(--rule); }
.card .fields li + li { border-top-style: solid; }
.cards blockquote { margin: 0; font-family: var(--serif); font-style: normal; font-size: 1.15rem; line-height: 1.4; }
.cards blockquote p { margin: 0; }
.cards figcaption { margin-top: .7rem; font-size: .92rem; color: var(--ink-2); }
.quote-mark { display: block; margin-bottom: .5rem; line-height: 0; }
.quote-mark .ic { width: 26px; height: 26px; color: var(--accent); }
@media (min-width: 700px) {
  .founder-card { grid-template-columns: 180px minmax(0, 1fr); gap: 2rem; padding: 2rem; align-items: start; }
  .founder-card:not(:has(.photo-ph, .founder-photo)) { grid-template-columns: minmax(0, 1fr); }
  .founder-card .photo-ph, .founder-card .founder-photo { width: 180px; }
  .facts > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; }
  .facts h3 { margin: .25rem 0 0; }
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 1024px) {
  /* The card reaches into the margin: photo in the margin column, text aligned with the content column. */
  .founder-card { grid-template-columns: calc(var(--margin) - 2rem) minmax(0, 1fr); gap: 0; padding: 2rem; margin-bottom: 3rem; }
  /* Text-only card: padded so the text still starts at the content column. */
  .founder-card:not(:has(.photo-ph, .founder-photo)) { grid-template-columns: minmax(0, 1fr); padding-left: var(--margin); }
  .founder-card .photo-ph, .founder-card .founder-photo { width: 160px; }
  .facts > div { grid-template-columns: var(--margin) minmax(0, 1fr); gap: 0; }
  .facts h3 { padding-right: 2rem; }
}

/* ---------- FAQ: bone panels, no hairlines ---------- */
.faq-list { max-width: 50rem; display: grid; gap: 6px; }
.faq-list details { background: var(--surface); border-radius: 2px; }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.3;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { text-wrap: balance; }
.faq-list summary .ic { width: 22px; height: 22px; color: var(--accent); }
.faq-list details[open] summary .ic { transform: rotate(45deg); }
.faq-list details > div { padding: 0 1.25rem 1.5rem; max-width: calc(var(--measure) + 2.5rem); color: var(--ink-2); }
.faq-list details > div p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .faq-list summary .ic { transition: transform .2s ease; }
}

/* ---------- Final CTA ---------- */
.final {
  background: var(--ink);
  color: var(--on-dark);
  padding: 4rem 0;
}
.final h2 { color: var(--on-dark); max-width: 22ch; }
.final .lead { color: var(--on-dark-muted); }
.final .cta-block .micro { color: var(--on-dark-muted); }
.final-mail { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.14); max-width: var(--measure); font-size: 1rem; color: var(--on-dark-muted); }
.final-mail a { color: var(--accent-light); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.final-mail a:hover { color: #D8B56B; }
.final-mail a:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }
.reminder {
  margin: 2.5rem 0 0;
  font-size: .9rem;
  color: var(--on-dark-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}
@media (min-width: 900px) {
  .final { padding: 6rem 0; }
}

/* ---------- Legal pages (legal notice, privacy policy) ---------- */
.legal h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin: 0 0 .5rem; }
.legal-back { margin: 0 0 1.5rem; font-size: .95rem; }
.legal-back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }
.legal-updated { margin: 0 0 2.5rem; color: var(--muted); font-size: .9rem; }
.legal-body h2 { font-size: 1.35rem; line-height: 1.25; margin: 2.5rem 0 .75rem; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.legal-body li { margin-bottom: .4rem; }
.legal-body a { overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 2.5rem 0 2rem;
  font-size: .92rem;
  color: var(--ink-2);
}
.footer-grid { display: grid; gap: 1.75rem; }
.footer-brand { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; color: var(--ink); margin: 0 0 .25rem; }
.site-footer p { margin: 0 0 .25rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--accent-dark); }
.footer-bottom {
  margin-top: 2rem;
  font-size: .85rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}
.footer-bottom p { margin: 0; }
@media (max-width: 699.98px) {
  .site-footer nav ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
}
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: var(--margin) 1fr 1fr; }
}

/* ---------- Motion ----------
   Progressive enhancement only. <html class="motion"> is set by the inline <head> script when
   JavaScript runs, the visitor has not asked for reduced motion and the browser is not automated.
   Without that class nothing is hidden, moved or delayed. Opacity + transform only: no layout shift.
   Boldness is spent once, on the hero: everything else is a plain, short reveal. */

/* Hero load sequence. Phones: kicker, thesis, lead, CTA, trust points (0 / 60 / 120 / 180 / 240 ms).
   From 600 px the thesis rises clause by clause (70 ms apart, the brass turn last), then lead, CTA
   and trust points (300 / 360 / 420 ms). Short (450 ms) and starting from 30 % opacity, so the thesis
   and the CTA are legible at first paint and fully in place well under a second. CSS animations: they
   start at first paint and always end fully visible. */
@keyframes rise {
  from { opacity: .3; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.motion .hero .kicker, .motion .hero h1, .motion .hero .lead, .motion .hero .cta-block, .motion .hero .keyfacts li {
  animation: rise .45s cubic-bezier(.22, .61, .36, 1) both;
}
.motion .hero h1 { animation-delay: 60ms; }
.motion .hero .lead { animation-delay: 120ms; }
.motion .hero .cta-block { animation-delay: 180ms; }
.motion .hero .keyfacts li { animation-delay: 240ms; }
.motion .hero .keyfacts li:nth-child(2) { animation-delay: 320ms; }
.motion .hero .keyfacts li:nth-child(3) { animation-delay: 400ms; }
@media (min-width: 600px) {
  .motion .hero h1 { animation: none; }
  .motion .hero .h1-line { animation: rise .45s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(60ms + var(--i, 0) * 70ms); }
  .motion .hero .lead { animation-delay: 300ms; }
  .motion .hero .cta-block { animation-delay: 360ms; }
  .motion .hero .keyfacts li { animation-delay: 420ms; }
  .motion .hero .keyfacts li:nth-child(2) { animation-delay: 500ms; }
  .motion .hero .keyfacts li:nth-child(3) { animation-delay: 580ms; }
}

/* Scroll reveals (once). site.js adds .reveal only to elements below the first screen, then .is-in
   when they enter the viewport; --d is the stagger between siblings revealed together. */
.motion .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
}
.motion .reveal.is-in { opacity: 1; transform: none; }

/* Steps rail: the connector draws downwards and the discs pop in sequence once the list is in view
   (0 / .25 / .5 s, done within a second); the step bodies follow their disc (site.js staggers them
   0 / .3 / .55 s when they are revealed together), so the numerals lead and the prose trails. */
.motion .steps.reveal-line .step::before { transform: scaleY(0); transform-origin: top center; }
.motion .steps.reveal-line .step-num { opacity: 0; transform: scale(.6); }
.motion .steps.reveal-line.is-drawn .step::before { transform: scaleY(1); transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.motion .steps.reveal-line.is-drawn .step-num {
  opacity: 1;
  transform: scale(1);
  transition: opacity .45s ease-out, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.motion .steps.reveal-line.is-drawn .step:nth-child(2)::before,
.motion .steps.reveal-line.is-drawn .step:nth-child(2) .step-num { transition-delay: .25s; }
.motion .steps.reveal-line.is-drawn .step:nth-child(3)::before,
.motion .steps.reveal-line.is-drawn .step:nth-child(3) .step-num { transition-delay: .5s; }

/* FAQ: site.js animates the answer's height; the icon turns back while an answer is closing. */
.faq-list details.is-closing summary .ic { transform: none; }

/* Micro-interactions: the button lifts by 1 px with a soft shadow and sits back when pressed; panels
   brighten a touch. Nothing bounces. */
.motion .btn { transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
@media (hover: hover) {
  .motion .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14, 42, 34, .18); }
  .faq-list details:hover, .card:hover { background: #FFFFFF; }
  .motion .faq-list details, .motion .card { transition: background-color .2s ease; }
}
.btn:active { transform: none; box-shadow: none; }

/* Compact bar: fixed at the top, shown by site.js when the visitor scrolls back up after the hero,
   hidden again when scrolling down. Off screen and out of the tab order until then. */
.compact-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: rgba(238, 241, 235, .97);
  box-shadow: 0 1px 0 rgba(14, 42, 34, .1);
  transform: translateY(-100%);
  visibility: hidden;
}
.compact-bar.is-shown { transform: none; visibility: visible; }
.motion .compact-bar { transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .3s; }
.motion .compact-bar.is-shown { transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s; }
.compact-row { display: flex; align-items: center; gap: .75rem; min-height: var(--compact-h); }
.compact-bar .brand { font-size: 1.05rem; min-height: 44px; }
.compact-bar .brand svg { width: 26px; height: 26px; }
.compact-nav { display: none; }
.btn-compact {
  margin-left: auto;
  width: auto;
  min-height: 44px;
  padding: .5rem .8rem;
  font-size: .8125rem;
  line-height: 1.2;
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-compact:hover, .btn-compact:active { background: var(--ink); color: var(--on-dark); }
@media (max-width: 599.98px) {
  .compact-bar .brand-name { display: none; }
}
@media (max-width: 359.98px) {
  .btn-compact { font-size: .75rem; padding-inline: .5rem; }
}
@media (min-width: 1200px) {
  .compact-nav { display: block; margin-left: auto; }
  .compact-nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
  .compact-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: .9rem;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  .compact-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
  .btn-compact { margin-left: 0; font-size: .875rem; }
}
/* Scroll-spy: the section on screen gets an accent underline in both navs (a colour on the phone menu). */
.site-nav a[aria-current="true"] { color: var(--accent-dark); }
@media (min-width: 1200px) {
  .site-nav a[aria-current="true"], .compact-nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }
}
/* Anchor jumps land below the compact bar (it may be showing when the page scrolls up). */
.js .section { scroll-margin-top: var(--compact-h); }

/* ---------- Estimator: a ledger that totals live (JavaScript only) ----------
   Rows "label | slider | value" (label and value on one line, then a full-width slider, on phones), the
   total under a double rule (label left, figure right, footnote across), the CTA in a tinted foot. */
.no-js .estimator { display: none; }
.est-panel {
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--surface);
  overflow: hidden;
}
.est-rows { padding: .25rem 1.25rem 0; }
.est-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label out" "track track";
  column-gap: 1rem;
  row-gap: .35rem;
  align-items: end;
  padding: 1.25rem 0 .6rem;
  border-top: 1px solid var(--rule);
}
.est-field:first-child { border-top: 0; }
.est-field label { grid-area: label; display: block; font-weight: 500; line-height: 1.4; margin: 0; max-width: 40ch; text-wrap: pretty; }
.est-track { grid-area: track; min-width: 0; }
.est-minmax { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-top: -.4rem; font-variant-numeric: tabular-nums; }
.est-out {
  grid-area: out;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  text-align: right;
  padding-bottom: .1rem;
}
.est-unit { font-family: var(--sans); font-size: .8rem; color: var(--muted); margin-left: .35rem; }
@media (max-width: 359.98px) {
  /* Below 360 px the label | value pairing squeezes the label into six lines: stack them instead. */
  .est-field { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "out" "track"; row-gap: .25rem; }
  .est-out { text-align: left; padding-bottom: 0; }
}
/* Range inputs: 2 px track (brass up to the thumb, via --p set by site.js), 44 px thumb hit area
   around a 24 px brass disc. */
.estimator input[type="range"] {
  --p: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.estimator input[type="range"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.estimator input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(to right, var(--accent) var(--p), var(--track) var(--p));
}
.estimator input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin-top: -21px;
  border: 10px solid transparent;
  border-radius: 50%;
  background: var(--accent);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 2px var(--surface);
}
.estimator input[type="range"]::-moz-range-track { height: 2px; border-radius: 1px; background: var(--track); }
.estimator input[type="range"]::-moz-range-progress { height: 2px; border-radius: 1px; background: var(--accent); }
.estimator input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 10px solid transparent;
  border-radius: 50%;
  background: var(--accent);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 2px var(--surface);
}
.motion .estimator input[type="range"]::-webkit-slider-thumb { transition: transform .15s ease; }
.motion .estimator input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.08); }
/* The total: a double rule (ledger total), label left, figure right, footnote under both. */
.est-result {
  margin: 0 1.25rem;
  padding: 1.25rem 0 1.5rem;
  border-top: 3px double var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "label" "value" "note";
}
.est-result-label {
  grid-area: label;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .5rem;
  max-width: 30ch;
}
.est-result-value {
  grid-area: value;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.6rem);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.02em;
  overflow-wrap: normal;
  text-align: right;
}
.est-number { white-space: nowrap; }
.est-suffix { font-family: var(--sans); font-size: 1rem; font-weight: 500; color: var(--ink-2); margin-left: .4rem; letter-spacing: 0; }
.est-footnote { grid-area: note; margin: 1rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--muted); max-width: var(--measure); text-wrap: pretty; }
.est-cta { padding: 1.25rem 1.25rem 1.5rem; background: var(--ground-2); border-top: 1px solid var(--rule); }
.est-cta .cta-block { margin-top: 0; }
.est-cta .micro { margin-top: .75rem; }
@media (min-width: 600px) {
  .est-result { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "note note"; column-gap: 2rem; align-items: baseline; }
  .est-result-label { margin: 0; }
}
@media (min-width: 700px) {
  .est-rows { padding: .25rem 1.75rem 0; }
  .est-field {
    grid-template-columns: minmax(0, 1.1fr) minmax(13rem, 1fr) minmax(8.5rem, auto);
    grid-template-areas: "label track out";
    column-gap: 1.75rem;
    align-items: center;
    padding: 1.1rem 0;
  }
  .est-track { align-self: center; }
  .est-out { font-size: 1.65rem; padding-bottom: 0; }
  .est-result { margin: 0 1.75rem; padding: 1.5rem 0 1.75rem; }
  .est-cta { padding: 1.5rem 1.75rem 1.75rem; }
}
@media (min-width: 1024px) {
  .est-rows { padding: .5rem 2.25rem 0; }
  .est-field { column-gap: 2.5rem; padding: 1.35rem 0; }
  .est-result { margin: 0 2.25rem; }
  .est-cta { padding: 1.75rem 2.25rem 2rem; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .topbar, .skip-link, .menu-toggle, .compact-bar, .estimator { display: none; }
  .motion .reveal, .motion .step-num { opacity: 1; transform: none; }
  .motion .steps.reveal-line .step::before { transform: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section-tint, .offer-card, .offer-price, .offer-foot, .faq-list details, .card, .problem-grid > li, .chips li, .founder-card { background: #fff; color: #000; }
  .price, .h1-turn, .fig { color: #000; }
  .final { background: none; color: #000; border-top: 1px solid #000; }
  .final h2, .final .lead, .reminder { color: #000; }
  .btn { background: none; color: #000; border: 1px solid #000; }
  .step-num { background: none; color: #000; border: 1px solid #000; }
  details { break-inside: avoid; }
}