/* ChantierLog — landing page.
   Brand colours are lifted from the real app, not invented. */

:root{
  --forest:#1a5c28;
  --forest-deep:#134420;
  --mint:#e8f5ec;
  --mint-deep:#d3ebda;
  --ink:#1c1c1e;
  --slate:#64748b;
  --border:#e2e8f0;
  --surface:#f9fafb;
  --white:#ffffff;
  --danger:#b42318;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:'Archivo', system-ui, -apple-system, sans-serif;
  background:var(--surface);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
a{color:var(--forest);}
a:hover{color:var(--forest-deep);}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
.hidden{display:none !important;}

h1,h2,h3{font-weight:800; letter-spacing:-0.02em; margin:0; color:var(--ink);}
p{margin:0;}

/* Visually hidden but still read by screen readers (honeypot label). */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===================== SCROLL REVEAL =====================
   EVERY rule here is scoped behind `html.js`, which reveal.js only adds if
   JavaScript is actually running. No JS -> none of this applies -> the page
   renders fully visible. The animation is a bonus layer, never a dependency.
   Nothing on this page is allowed to be invisible by default. */
.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  /* Hint the compositor so phones animate on the GPU instead of the main thread. */
  will-change:opacity, transform;
}
.js .reveal.in{ opacity:1; transform:none; }
/* Once it has arrived, stop holding a compositor layer for it. */
.js .reveal.done{ will-change:auto; }

/* Staggered children — a group flows in rather than snapping as one block.
   Delays live in CSS (not JS-set inline styles) to stay clear of the CSP. */
.js .problem-card:nth-child(2){ transition-delay:.08s; }
.js .problem-card:nth-child(3){ transition-delay:.16s; }
.js .benefit:nth-child(2){ transition-delay:.05s; }
.js .benefit:nth-child(3){ transition-delay:.10s; }
.js .benefit:nth-child(4){ transition-delay:.15s; }
.js .benefit:nth-child(5){ transition-delay:.20s; }
.js .benefit:nth-child(6){ transition-delay:.25s; }

/* Motion is a preference, not a decision we get to make for the reader.
   Anyone who has asked their OS for less of it gets the page, instantly, static. */
@media (prefers-reduced-motion: reduce){
  .js .reveal,
  .js .reveal.in{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    transition-delay:0s !important;
  }
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ===================== HOVER =====================
   Gated behind (hover:hover) so a phone never gets stuck in a hover state
   after a tap — which is what makes cheap web pages feel broken on mobile. */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .problem-card{ transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
  .problem-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(20,60,30,0.10);
    border-color:var(--mint-deep);
  }
  .photo-wrap img{ transition:transform .6s cubic-bezier(.16,1,.3,1); }
  .photo-wrap:hover img{ transform:scale(1.045); }

  .benefit .check{ transition:transform .22s cubic-bezier(.34,1.56,.64,1); }
  .benefit:hover .check{ transform:scale(1.12) rotate(-4deg); }

  .step-num{ transition:transform .22s ease, background .22s ease; }
  .step:hover .step-num{ transform:scale(1.06); }

  .proof-box, .form-card{ transition:box-shadow .25s ease; }
  .proof-box:hover{ box-shadow:0 12px 32px rgba(20,60,30,0.08); }

  .lang-toggle button{ transition:background .15s ease, color .15s ease; }
  .lang-toggle button:not(.on):hover{ background:var(--mint); color:var(--forest); }
}

/* The live dot on the proof box actually pulses — it's the one thing on the page
   claiming something is happening right now. */
@media (prefers-reduced-motion: no-preference){
  .proof-box .live-dot{ animation:pulse 2.4s ease-in-out infinite; }
  @keyframes pulse{
    0%, 100%{ box-shadow:0 0 0 4px var(--mint-deep); }
    50%     { box-shadow:0 0 0 7px rgba(211,235,218,0.45); }
  }
}

/* Header gains a shadow once you leave the top — grounds it over the content. */
header.site{ transition:box-shadow .25s ease, border-color .25s ease; }
header.site.scrolled{ box-shadow:0 4px 18px rgba(16,24,40,0.06); }

/* ===================== PHOTO SLOTS =====================
   Each slot is a real <img>. Drop a file at the given path in img/ and it
   appears — no HTML edit needed. Until then, main.js marks the wrapper
   .empty and this renders a labelled placeholder instead of a broken image. */
.photo-wrap{ position:relative; overflow:hidden; background:var(--mint); }
.photo-wrap img{ width:100%; height:100%; object-fit:cover; }
.photo-wrap.empty{
  border:2px dashed var(--mint-deep);
  display:flex; align-items:center; justify-content:center;
}
.photo-wrap.empty::after{
  content:attr(data-placeholder);
  display:block; padding:24px; max-width:280px;
  text-align:center; font-size:13.5px; font-weight:600; line-height:1.5;
  color:var(--forest);
}

/* ===================== HEADER ===================== */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(249,250,251,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:1140px; margin:0 auto;
}
.wordmark{display:flex; align-items:center; gap:10px;}
.wordmark .mark{
  width:34px; height:34px; border-radius:8px; background:var(--forest);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
/* "Chantier" light + "Log" heavy — the contrast IS the wordmark. */
.wordmark .word{font-size:21px; letter-spacing:-0.02em; font-weight:400; color:var(--ink);}
.wordmark .word b{font-weight:800;}

.header-right{display:flex; align-items:center; gap:14px;}
.lang-toggle{ display:flex; border:1.5px solid var(--border); border-radius:9px; overflow:hidden; }
.lang-toggle button{
  border:none; background:var(--white); color:var(--slate);
  font-size:13px; font-weight:700; letter-spacing:0.03em; padding:8px 12px;
}
.lang-toggle button.on{background:var(--forest); color:#fff;}

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--forest); color:#fff;
  padding:12px 22px; border-radius:10px; border:none;
  font-size:15px; font-weight:700; letter-spacing:-0.01em;
  transition:background .15s, transform .05s;
  white-space:nowrap;
}
.btn-primary:hover{background:var(--forest-deep);}
.btn-primary:active{transform:translateY(1px);}
.btn-primary:disabled{opacity:.65; cursor:not-allowed; transform:none;}
.btn-primary.small{padding:9px 16px; font-size:13.5px;}

/* ===================== HERO ===================== */
.hero{ padding:64px 0 76px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.hero h1{ font-size:46px; line-height:1.12; letter-spacing:-0.025em; }
.hero-sub{ font-size:18px; color:#3b4754; line-height:1.65; margin-top:22px; max-width:560px; }
.hero-cta-row{ margin-top:32px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.hero-cta-row .btn-primary{ font-size:17px; padding:16px 28px; }
.hero-note{ font-size:13.5px; color:var(--slate); }
.hero-photo-wrap{
  aspect-ratio:4/5; border-radius:22px;
  box-shadow:0 24px 60px rgba(20,60,30,0.16);
}

/* ===================== SECTION shell ===================== */
section{ padding:76px 0; }
section.tint{ background:var(--mint); }
.section-title{ font-size:32px; text-align:center; letter-spacing:-0.02em; }
.section-lead{ font-size:16.5px; color:#3b4754; text-align:center; max-width:640px; margin:16px auto 0; line-height:1.6; }

/* ===================== PROBLEM ===================== */
.problem-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:44px; }
.problem-card{
  background:var(--white); border:1px solid var(--border); border-radius:16px; padding:28px 26px;
}
.problem-num{
  width:38px; height:38px; border-radius:10px; background:var(--mint); color:var(--forest);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; margin-bottom:18px;
}
.problem-card h3{ font-size:19px; letter-spacing:-0.01em; line-height:1.3; }
.problem-card p{ font-size:15px; color:#3b4754; margin-top:10px; line-height:1.6; }

/* ===================== HOW IT WORKS ===================== */
.steps{ margin-top:52px; display:flex; flex-direction:column; }
.step{
  display:grid; grid-template-columns:64px 1fr; gap:26px;
  padding:32px 0; border-top:1px solid var(--border);
}
.step:first-child{ border-top:none; }
.step-num{
  width:52px; height:52px; border-radius:50%;
  background:var(--white); border:2px solid var(--forest); color:var(--forest);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800;
}
.step-body h3{ font-size:22px; letter-spacing:-0.01em; }
.step-body p{ font-size:16px; color:#3b4754; margin-top:8px; line-height:1.6; max-width:640px; }
.step-tag{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px; padding:8px 14px; border-radius:9px;
  background:var(--mint); color:var(--forest-deep);
  font-size:14px; font-weight:600; line-height:1.5;
}

/* Step 3 carries the pitch — it gets the visual weight. */
.step.emphasis{
  background:var(--forest); color:#fff; border-radius:20px; border-top:none;
  margin-top:14px; padding:40px 36px; grid-template-columns:1fr;
}
.step.emphasis .step-num{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.5); color:#fff; margin-bottom:6px; }
.step.emphasis h3{ color:#fff; font-size:25px; }
.step.emphasis p{ color:rgba(255,255,255,0.88); }
.step.emphasis .step-tag{ background:rgba(255,255,255,0.16); color:#fff; }
.step-emphasis-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; margin-top:8px; }
.email-shot-wrap{
  border-radius:14px; aspect-ratio:5/4;
  box-shadow:0 20px 50px rgba(0,0,0,0.28);
}

/* ===================== DEMO VIDEO =====================
   Dark forest section so the video — composited on its own deep-green backdrop
   (#1a3a1f) — reads as one piece with the page instead of a pasted-in box. */
.demo{ background:#12331a; }
.demo .section-title{ color:#fff; }
.demo .section-lead{ color:rgba(255,255,255,0.80); }
.demo-frame{
  max-width:900px; margin:40px auto 0;
  border-radius:16px; overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,0.40);
  background:#1a3a1f;                 /* matches the video's own backdrop; fills any letterbox invisibly */
  aspect-ratio:16 / 9;
}
.demo-frame video{ width:100%; height:100%; display:block; object-fit:contain; }

/* ===================== BENEFITS ===================== */
.benefits-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 32px; margin-top:44px; }
.benefit{ display:flex; gap:16px; align-items:flex-start; }
.benefit .check{
  width:30px; height:30px; border-radius:8px; background:var(--forest); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.benefit p{ font-size:16px; color:#26303a; line-height:1.55; }

/* ===================== WHO ===================== */
.who-block{ max-width:760px; margin:0 auto; text-align:center; }
.who-block p{ font-size:19px; color:#243027; line-height:1.65; }
/* Not an inline style= attribute: the CSP forbids those. */
.who-block .section-title + p{ margin-top:26px; }
.who-block p + p{ margin-top:18px; }

/* ===================== FOUNDER ===================== */
.founder-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:center; }
.founder-photo-wrap{
  aspect-ratio:4/5; border-radius:18px;
  box-shadow:0 18px 44px rgba(20,20,20,0.12);
}
.founder-text h2{ font-size:30px; line-height:1.2; }
.founder-text p{ font-size:17px; color:#2b3540; line-height:1.68; margin-top:18px; }
.founder-sig{ margin-top:26px; display:flex; align-items:center; gap:12px; }
.founder-sig .sig-line{ width:1px; height:38px; background:var(--border); }
.founder-sig .name{ font-size:15.5px; font-weight:800; }
.founder-sig .role{ font-size:13.5px; color:var(--slate); margin-top:2px; }

/* ===================== PROOF ===================== */
.proof-box{
  max-width:720px; margin:0 auto; text-align:center;
  background:var(--white); border:1.5px solid var(--mint-deep); border-radius:18px;
  padding:40px;
}
.proof-box .dot-row{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:18px; }
.proof-box .live-dot{ width:9px; height:9px; border-radius:50%; background:var(--forest); box-shadow:0 0 0 4px var(--mint-deep); }
.proof-box .live-label{ font-size:12.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--forest); }
.proof-box h3{ font-size:23px; letter-spacing:-0.01em; line-height:1.35; }
.proof-box p{ font-size:16px; color:#3b4754; margin-top:14px; line-height:1.6; }

/* ===================== LEAD FORM ===================== */
.lead-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:52px; }
.lead-copy h2{ font-size:32px; line-height:1.2; }
.lead-copy p{ font-size:16.5px; color:#2b3540; line-height:1.65; margin-top:16px; }

.form-card{
  background:var(--white); border:1px solid var(--border); border-radius:18px;
  padding:34px 32px; box-shadow:0 2px 10px rgba(16,24,40,0.04);
}
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:700; color:#334155; margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; border:1.5px solid var(--border); border-radius:10px;
  padding:13px 14px; font-size:16px; font-family:inherit; color:var(--ink);
  background:var(--white); outline:none; transition:border-color .12s, box-shadow .12s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--forest); box-shadow:0 0 0 3px rgba(26,92,40,0.12);
}
.field textarea{ min-height:90px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field select{
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.form-submit{ width:100%; padding:15px 20px; font-size:16px; margin-top:6px; }
.form-note{ font-size:13px; color:var(--slate); text-align:center; margin-top:14px; }

/* A failed submit must SAY so. A lead that vanishes silently is the whole
   failure mode this page exists to avoid. */
.form-error{
  margin-top:16px; padding:12px 14px; border-radius:10px;
  background:#fef3f2; border:1px solid #fecdca; color:var(--danger);
  font-size:14px; line-height:1.5;
}

.confirm{ text-align:center; padding:20px 8px; }
.confirm .ok-icon{
  width:56px; height:56px; border-radius:50%; background:var(--mint); color:var(--forest);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.confirm h3{ font-size:21px; letter-spacing:-0.01em; line-height:1.35; }
.confirm p{ font-size:15px; color:var(--slate); margin-top:10px; }
.confirm a{ font-weight:700; }

/* ===================== FOOTER ===================== */
footer.site{ border-top:1px solid var(--border); padding:34px 0; }
.footer-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-row .wordmark .word{ font-size:16px; }
.footer-row .wordmark .mark{ width:26px; height:26px; border-radius:6px; }
.footer-tag{ font-size:13px; color:var(--slate); }

/* ===================== RESPONSIVE ===================== */
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero h1{ font-size:34px; }
  .hero-sub{ font-size:16.5px; }
  .hero-photo-wrap{ order:-1; aspect-ratio:16/10; }
  .problem-grid{ grid-template-columns:1fr; }
  .benefits-grid{ grid-template-columns:1fr; }
  .founder-grid{ grid-template-columns:1fr; }
  .founder-photo-wrap{ aspect-ratio:16/10; }
  .lead-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:14px; }
  .step.emphasis{ padding:32px 24px; }
  .step-emphasis-grid{ grid-template-columns:1fr; }
  .section-title{ font-size:26px; }
  section{ padding:56px 0; }
}