/* Frontage — marketing site. Brand: Evergreen / Clay / Ink / Limestone. */
:root {
  --evergreen: #106e5c;
  --evergreen-2: #0b5648;
  --clay: #dd6a3b;
  --clay-2: #c4552a;
  --ink: #14201b;
  --ink-soft: #33433c;
  --muted: #5e6b63;
  --limestone: #faf7f2;
  --surface: #ffffff;
  --surface-2: #f1ede6;
  --line: #e4e0d8;
  --line-strong: #cdc7bb;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(20, 32, 27, 0.04), 0 10px 30px rgba(20, 32, 27, 0.08);
  --shadow-sm: 0 1px 2px rgba(20, 32, 27, 0.05);
  --display: 'Bricolage Grotesque', Georgia, serif;
  --body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', Menlo, monospace;
  --maxw: 1080px;
}

* { box-sizing: border-box; }
/* A class that sets display (a grid of tiles, say) must not undo the hidden attribute. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--limestone);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
p { max-width: 62ch; }
a { color: var(--evergreen-2); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 4px; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.wordmark {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
}

/* ---------- header ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--limestone) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { max-width: var(--maxw); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 20px; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  font-size: 0.9rem; font-weight: 500; color: var(--muted);
  text-decoration: none; padding: 7px 8px; border-radius: 7px; white-space: nowrap;
}
.nav-links a[aria-current='page'] { color: var(--ink); }
/* The bar's buttons keep their one line; the French labels were being folded. */
.nav .btn, .nav .signin, .nav .lang { white-space: nowrap; flex-shrink: 0; }
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.lang {
  display: flex; gap: 2px; border: 1px solid var(--line-strong);
  border-radius: 100px; padding: 2px; font-size: 0.78rem;
}
.lang a { text-decoration: none; color: var(--muted); padding: 3px 10px; border-radius: 100px; }
.lang a[aria-current='page'] { background: var(--evergreen); color: #fff; font-weight: 600; }
/* .nav-links carries the margin-left:auto that pushes the right-hand group
   over, so hiding it has to hand that job to .lang or everything bunches up
   against the logo. */
/* Seven links, the language switch and two buttons fit in one row down to
   about 1000px; below that the row wrapped and, narrower still, overflowed the
   page. The text links go at 980px and the footer carries them. */
@media (max-width: 1020px) { html[lang='fr'] .nav-links { display: none; } }
@media (max-width: 980px) {
  .nav-links { display: none; }
  /* Scoped to the header: unscoped, this also pinned the footer's language
     toggle to the right edge, alone on its line under a centred footer. */
  .nav .lang { margin-left: auto; }
  .nav { gap: 10px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--clay); color: #fff;
  padding: 12px 22px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.98rem; text-decoration: none;
  border: 1px solid var(--clay);
}
.btn:hover { background: var(--clay-2); border-color: var(--clay-2); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { padding: 8px 15px; font-size: 0.9rem; }

/* ---------- hero ---------- */
.hero { padding: 76px 0 56px; }
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--evergreen-2); margin: 0 0 20px;
}
h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.1rem); line-height: 1.02;
  letter-spacing: -0.035em; margin: 0 0 20px; text-wrap: balance;
}
h1 .accent { color: var(--clay); }
.lede { font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--ink-soft); max-width: 46ch; margin: 0 0 28px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-note { font-size: 0.88rem; color: var(--muted); }

/* ---------- board mock ---------- */
.board-mock {
  margin-top: 44px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px;
  overflow-x: auto;
}
.cols { display: grid; grid-auto-flow: column; grid-auto-columns: 172px; gap: 10px; min-width: min-content; }
.col { background: var(--surface-2); border-radius: var(--radius-sm); padding: 9px; }
.col-h { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 600; margin-bottom: 8px; }
.dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.mini {
  background: var(--surface); border-radius: 6px; padding: 8px 9px;
  margin-bottom: 6px; border-left: 3px solid var(--evergreen); box-shadow: var(--shadow-sm);
}
.mini b { font-size: 0.8rem; display: block; font-weight: 600; }
.mini span { font-family: var(--mono); font-size: 0.68rem; color: var(--evergreen-2); }
.mini.lead { border-left-color: var(--clay); }
.mini.lead span { color: var(--clay-2); }

/* ---------- sections ---------- */
section { padding: 62px 0; border-top: 1px solid var(--line); }
h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.08;
  letter-spacing: -0.025em; margin: 0 0 14px; text-wrap: balance;
}
.sub { font-size: 1.08rem; color: var(--ink-soft); max-width: 60ch; }

.grid { display: grid; gap: 18px; margin-top: 32px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .g3, .g2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
}
.card h3 { font-family: var(--display); font-weight: 600; font-size: 1.12rem; margin: 0 0 8px; letter-spacing: -0.01em; }
.card p { font-size: 0.98rem; color: var(--ink-soft); margin: 0; }
.card .ico { font-size: 1.3rem; display: block; margin-bottom: 10px; }

/* two on-ramps */
.ramps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
@media (max-width: 820px) { .ramps { grid-template-columns: 1fr; } }
.ramp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.ramp.new { border-top: 3px solid var(--evergreen); }
.ramp.pro { border-top: 3px solid var(--clay); }
.ramp .who { font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.ramp h3 { font-family: var(--display); font-size: 1.3rem; font-weight: 700; margin: 8px 0 8px; letter-spacing: -0.02em; }
ul.ticks { list-style: none; padding: 0; margin: 14px 0 0; }
ul.ticks li { font-size: 0.97rem; color: var(--ink-soft); padding: 6px 0 6px 24px; position: relative; }
ul.ticks li::before { content: '→'; position: absolute; left: 0; color: var(--evergreen); font-weight: 700; }

/* canada band */
.canada { background: var(--evergreen); color: #fff; border: none; }
.canada h2, .canada p { color: #fff; }
.canada .sub { color: rgba(255, 255, 255, 0.88); }
.canada .card { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
.canada .card h3 { color: #fff; }
.canada .card p { color: rgba(255, 255, 255, 0.85); }

/* pricing */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; align-items: start; }
@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; } }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); position: relative; }
.tier.featured { border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay), var(--shadow); }
.badge {
  position: absolute; top: -11px; left: 26px; background: var(--clay); color: #fff;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 100px;
}
.tier .tname { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.tier .ttag { font-size: 0.9rem; color: var(--muted); margin: 2px 0 16px; }
.price { font-family: var(--display); font-weight: 700; font-size: 2.3rem; letter-spacing: -0.03em; line-height: 1; }
.price small { font-family: var(--body); font-size: 0.85rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.credits {
  font-family: var(--mono); font-size: 11.5px; color: var(--evergreen-2);
  background: #e2efea; padding: 8px 11px; border-radius: 6px; margin: 14px 0 0;
}
.tier ul { list-style: none; padding: 0; margin: 16px 0 0; }
.tier li { font-size: 0.94rem; color: var(--ink-soft); padding: 7px 0; border-top: 1px solid var(--line); }
.tier li:first-child { border-top: none; }
.fineprint { font-size: 0.86rem; color: var(--muted); margin-top: 18px; }

/* final cta */
.final { text-align: center; padding: 74px 0; }
.final h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.final p { margin-left: auto; margin-right: auto; }

footer { border-top: 1px solid var(--line); padding: 34px 0 56px; }
/* Centred, like the call to action just above it. It used to hug the left
   edge with the copyright pushed to the far right, which read as two stray
   lines once the links wrapped. */
.foot { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; justify-content: center; text-align: center; }
.foot-links { justify-content: center; }
.foot .fine { font-size: 0.85rem; color: var(--muted); flex-basis: 100%; }

/* ---------- getting into the product ---------- */
/* The page previously had no link to the app at all: every call to action
   pointed back at the pricing table, and the pricing table had no buttons. */
.signin {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 8px 12px;
  border-radius: 8px;
}
.signin:hover {
  background: var(--surface-2);
}
.btn.full {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.plan-note {
  max-width: 660px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--muted);
}
.btn:focus-visible,
.signin:focus-visible,
.lang a:focus-visible,
.nav-links a:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
/* ---------- proof: real screens, not mock-ups ---------- */
.proof { margin: 36px 0 0; }
.proof img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface);
}
.proof figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 10px; max-width: 70ch; }
.proof figcaption b { color: var(--ink); }
.g2 .proof { margin-top: 0; }

/* ---------- the phone line ---------- */
.phone-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; margin-top: 32px; align-items: start; }
@media (max-width: 820px) { .phone-grid { grid-template-columns: 1fr; } }
.transcript {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px;
}
.t-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.transcript audio { width: 100%; height: 40px; margin: 0 0 6px; border-radius: 20px; }
.t { font-size: 0.95rem; line-height: 1.5; padding: 10px 14px; border-radius: 10px; max-width: 92%; }
.t span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; opacity: 0.75; }
.t.assistant { background: #e2efea; color: var(--ink); align-self: flex-start; border-bottom-left-radius: 3px; }
.t.caller { background: var(--surface-2); color: var(--ink-soft); align-self: flex-end; border-bottom-right-radius: 3px; }
.t-after { font-size: 0.86rem; color: var(--muted); margin: 6px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
.cost { margin-top: 18px; font-size: 0.98rem; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
#phone ul.ticks { margin-top: 0; }

/* ---------- questions ---------- */
.faq { margin-top: 24px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 32px 16px 0; position: relative;
  font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 12px; color: var(--evergreen); font-size: 1.4rem; font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 18px; color: var(--ink-soft); font-size: 0.98rem; max-width: 70ch; }

/* ---------- footer links ---------- */
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.88rem; }
/* Below the width that fits logo, links and the language toggle on one line,
   the links take the full line so the toggle drops to its own centred row.
   Sharing a line, the links ate the free space and pinned it to the edge. */
@media (max-width: 820px) {
  .foot-links { flex-basis: 100%; }
}
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.canada a { color: #fff; }
#canada-band { text-align: center; }
#canada-band .sub { margin-left: auto; margin-right: auto; }

/* Kept visible on a phone. The section links already drop out below 780px, so
   there is room — and hiding the only "I already have an account" affordance
   would send returning brokers hunting. */
@media (max-width: 480px) {
  .signin {
    padding: 8px 8px;
    font-size: 0.88rem;
  }
}
/* "Commencer gratuitement" in the header pushed a phone page sideways; the hero
   has the same button a thumb's reach below, so the header keeps only Sign in. */
@media (max-width: 520px) {
  .nav .btn.sm { display: none; }
}

/* ---------- a link-looking button: "Cookie settings" ---------- */
/* A button, not a link: it opens a choice on this page rather than going
   anywhere, and a keyboard or screen reader should know that. */
.linkish {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--evergreen); text-decoration: underline; cursor: pointer;
}
.linkish:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.foot-links .linkish { color: var(--muted); text-decoration: none; }
.foot-links .linkish:hover { color: var(--ink); text-decoration: underline; }

/* ---------- the privacy notice ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 0 72px; }
.legal h1 { font-size: clamp(2rem, 4.2vw, 2.7rem); margin: 0 0 6px; }
.legal-updated { color: var(--muted); font-size: 0.92rem; margin: 0 0 28px; }
.legal h2 { font-size: 1.45rem; margin: 42px 0 10px; }
.legal h3 { font-family: var(--display); font-size: 1.06rem; font-weight: 600; margin: 22px 0 4px; }
.legal p, .legal li { color: var(--ink-soft); line-height: 1.65; max-width: 70ch; }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--evergreen); }
.legal code { font-family: var(--mono); font-size: 0.86em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
/* A block a reader is meant to copy: an instruction for an assistant, a header
   row, a formula. It wraps rather than scrolling sideways, because these are
   read on a phone as often as not and a prompt is mostly long prose lines. */
.legal pre {
  font-family: var(--mono); font-size: 0.84rem; line-height: 1.55; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; margin: 14px 0; max-width: 70ch;
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto;
}
.legal pre code { background: none; padding: 0; font-size: 1em; }
.legal-table {
  overflow-x: auto; margin: 14px 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.legal-table table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-table th { font-weight: 600; color: var(--ink); background: var(--surface-2); }
.legal-table tr:last-child td { border-bottom: 0; }

/* ---------- free tools ---------- */
.tool { padding: 40px 0 72px; }
.tool h1 { font-size: clamp(2rem, 4.2vw, 2.7rem); margin: 0 0 10px; letter-spacing: -0.02em; }
.tool .lede { margin-bottom: 10px; }
.tool-note { font-size: 0.9rem; color: var(--muted); margin: 0 0 26px; }
.tool-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; }
@media (max-width: 880px) { .tool-grid { grid-template-columns: 1fr; } }
.tool fieldset { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 18px 18px; margin: 0 0 16px; min-width: 0; }
.tool legend { font-family: var(--display); font-weight: 600; font-size: 1.02rem; padding: 0 6px; }
.tool .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 520px) { .tool .row { grid-template-columns: 1fr; } }
.tool label { display: flex; flex-direction: column; gap: 5px; font-size: 0.88rem; font-weight: 500; color: var(--ink-soft); min-width: 0; }
.tool input, .tool select {
  font: inherit; font-size: 1rem; color: var(--ink); padding: 8px 10px; width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff;
  font-variant-numeric: tabular-nums;
}
.tool input:disabled { background: var(--surface-2); color: var(--muted); }
.tool .hint { font-size: 0.78rem; font-weight: 400; color: var(--muted); line-height: 1.4; }
.steps-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 8px; font-size: 0.88rem; font-weight: 500; color: var(--ink-soft); }
.steps .step { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px 12px; align-items: end; margin-bottom: 8px; }
@media (max-width: 520px) { .steps .step { grid-template-columns: 1fr 1fr; } .steps .step .btn { grid-column: 1 / -1; } }
.results-col { position: sticky; top: 84px; }
@media (max-width: 880px) { .results-col { position: static; } }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
@media (max-width: 420px) { .kpis { grid-template-columns: 1fr; } }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.kpi.head { grid-column: 1 / -1; border-color: var(--evergreen); background: color-mix(in srgb, var(--evergreen) 6%, #fff); }
.kpi .k { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.kpi .v { font-family: var(--display); font-weight: 700; font-size: 1.55rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 2px 0; overflow-wrap: anywhere; }
.kpi.head .v { font-size: 2.2rem; color: var(--evergreen-2); }
.kpi .n { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.maths { background: var(--surface-2); border-radius: var(--radius); padding: 12px 16px 14px; margin-top: 4px; }
.maths-head { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.maths ol { margin: 0; padding-left: 1.2rem; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.maths li + li { margin-top: 4px; }
.keep { font-size: 0.9rem; color: var(--muted); margin: 16px 0 0; line-height: 1.55; }
.keep a { color: var(--evergreen); font-weight: 600; }
.tool-about { max-width: 760px; margin-top: 56px; }
.tool-about h2 { font-size: 1.45rem; margin: 0 0 10px; }
.tool-about p, .tool-about li { color: var(--ink-soft); line-height: 1.65; max-width: 70ch; }
.tool-about ul { padding-left: 1.2rem; }
.tool-about li + li { margin-top: 8px; }
.tool-about .formula { font-family: var(--mono); font-size: 0.9rem; background: var(--surface-2); padding: 10px 14px; border-radius: var(--radius-sm); max-width: none; }
.crumbs { font-size: 0.85rem; color: var(--muted); margin: 0 0 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.tool-about ol { padding-left: 1.3rem; }
.tool-about ol li + li { margin-top: 8px; }
.tool-about .legal-table { margin: 16px 0 8px; }
.tool-about .faq { margin-top: 8px; }
.tool-note .linkish { color: var(--evergreen); font-weight: 600; }
.card-link { text-decoration: none; color: inherit; display: block; }
/* Blog */
.post { max-width: 720px; padding-top: 32px; }
.post .crumbs { margin-bottom: 22px; }
.post h1 { font-size: clamp(1.9rem, 3.8vw, 2.5rem); line-height: 1.15; text-wrap: balance; }
.post-meta { color: var(--muted); font-size: 0.9rem; margin: 0 0 22px; }
.post-lede { font-size: 1.15rem; color: var(--ink); line-height: 1.55; max-width: 62ch; }
.post h2 { font-size: 1.35rem; margin: 36px 0 8px; }
.post .legal-table { margin: 14px 0 10px; }
.post-cta { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--evergreen); border-radius: var(--radius); padding: 18px 20px; margin: 36px 0 12px; }
.post-cta p { margin: 0 0 12px; font-size: 0.96rem; }
.post-cta-links { display: flex; flex-wrap: wrap; gap: 8px; }
.post-cta .post-cta-links { margin: 0; }
.post-foot { font-size: 0.85rem; color: var(--muted); }
.post-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
@media (max-width: 820px) { .post-list { grid-template-columns: 1fr; } }
.post-card .post-meta { font-size: 0.8rem; margin: 0 0 8px; }
.post-card h3 { font-size: 1.15rem; line-height: 1.3; }
/* Lease expiry check */
.tool textarea { font: inherit; font-family: var(--mono); font-size: 0.86rem; color: var(--ink); padding: 10px 12px; width: 100%; min-height: 140px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; resize: vertical; white-space: pre; overflow: auto; }
.tool input[type='file'] { padding: 6px; font-size: 0.9rem; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.milestones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; }
.milestones .check { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; }
.milestones .check input { width: auto; }
.tool-note.bad { color: var(--clay-2); }
.kpis.five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 880px) { .kpis.five { grid-template-columns: repeat(2, 1fr); } }
.sweep-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.sweep-table table { font-size: 0.9rem; }
.sweep-table td.mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sweep-table tr.month-head td { background: var(--surface-2); font-family: var(--display); font-weight: 600; color: var(--ink); padding: 8px 12px; }
.sweep-table tr.month-head.warn td { background: color-mix(in srgb, var(--clay) 12%, #fff); color: var(--clay-2); }
.sweep-table tr.month-head.muted-head td { color: var(--muted); }
.sweep-table .est { font-size: 0.72rem; color: var(--clay-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.unreadable { margin-top: 10px; white-space: pre-wrap; }
@media print {
  header, footer, .tool-form, .crumbs, .eyebrow, .lede, .tool-note, .sweep-actions, .keep, .tool-about, .consent { display: none !important; }
  .kpis { grid-template-columns: repeat(5, 1fr); }
  .legal-table { overflow: visible; }
}
.card-link:hover { border-color: var(--evergreen); }

/* ---------- the cookie choice ---------- */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  max-width: 720px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow);
}
.consent p { margin: 0; flex: 1 1 320px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }
.consent a { color: var(--evergreen); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media print { .consent { display: none; } }