/* 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; }
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.92rem; font-weight: 500; color: var(--muted);
  text-decoration: none; padding: 7px 11px; border-radius: 7px;
}
.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. */
@media (max-width: 780px) {
  .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; }
.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; }

/* ---------- 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; } }