/* ============================================================
   The Human Machine — shared styles
   Loaded by every page, before that page's own <style> block.
   Page-specific components stay in the page that uses them.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple:#5B21B6; --purple-m:#7C3AED; --purple-l:#A78BFA; --purple-xl:#EDE9FE;
  --slate:#0F172A; --slate-m:#1E293B; --slate-l:#334155;
  --gray:#64748B; --gray-l:#94A3B8; --border:#E2E8F0;
  --bg:#FAFAFA; --white:#FFFFFF;
  --green:#059669; --green-l:#D1FAE5;
  --amber:#D97706; --amber-l:#FEF3C7;
  --red:#DC2626; --red-l:#FEE2E2;
}

html { scroll-behavior:smooth; }
body { font-family:'Inter',-apple-system,sans-serif; background:var(--bg); color:var(--slate); line-height:1.6; font-size:16px; }

@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }

/* NAV */
nav { position:fixed;top:0;left:0;right:0;z-index:100; background:rgba(255,255,255,0.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:0 40px; height:64px; display:flex;align-items:center;justify-content:space-between; }
.nav-logo { font-weight:800;font-size:18px;color:var(--purple);letter-spacing:-0.5px;text-decoration:none;display:flex;flex-direction:column;line-height:1;gap:1px; }
.nav-logo-the { font-weight:300;font-size:9px;color:var(--purple);letter-spacing:.35em;text-transform:uppercase; }
.nav-logo-main { display:flex;align-items:baseline;gap:0; }
.nav-logo span { color:var(--slate); }
.nav-links { display:flex;gap:24px;align-items:center; }
.nav-links a { font-size:14px;font-weight:500;color:var(--slate-l);text-decoration:none;transition:color .2s; }
.nav-links a:hover { color:var(--purple); }
.nav-links a.active { color:var(--purple);font-weight:600; }
.nav-cta { background:var(--purple)!important;color:#fff!important;padding:8px 20px;border-radius:8px;font-weight:600!important;transition:background .2s!important; }
.nav-cta:hover { background:var(--purple-m)!important; }
.lang-toggle { display:flex;gap:4px;background:var(--border);border-radius:20px;padding:3px; }
.lang-btn { font-size:12px;font-weight:600;padding:3px 10px;border-radius:16px;cursor:pointer;border:none;background:transparent;color:var(--gray);transition:all .2s; }
.lang-btn.active { background:var(--white);color:var(--purple);box-shadow:0 1px 3px rgba(0,0,0,.1); }

/* HAMBURGER + MOBILE MENU */
.hamburger { display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border:none;background:none;z-index:101; }
.hamburger span { width:22px;height:2px;background:var(--slate);border-radius:2px;transition:transform .25s,opacity .25s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { display:none;position:fixed;top:64px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--border);padding:16px 20px 24px;flex-direction:column;gap:4px;z-index:99;box-shadow:0 8px 32px rgba(0,0,0,.08); }
.mobile-menu.open { display:flex; }
.mobile-menu a { font-size:15px;font-weight:500;color:var(--slate);text-decoration:none;padding:13px 16px;border-radius:10px;transition:background .15s; }
.mobile-menu a:hover { background:var(--bg); }
.mobile-menu a.active { color:var(--purple);font-weight:700; }
.mobile-menu .nav-cta { background:var(--purple)!important;color:#fff!important;text-align:center;margin-top:8px;font-weight:700!important;border-radius:10px; }

/* TYPOGRAPHY & SECTIONS */
section { padding:96px 40px; }
.section-inner { max-width:1180px;margin:0 auto; }
.section-tag { display:inline-block;background:var(--purple-xl);color:var(--purple);font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px; }
h1 { font-size:52px;font-weight:900;line-height:1.08;letter-spacing:-2px;color:var(--slate);margin-bottom:24px; }
h1 em { color:var(--purple);font-style:normal; }
h2 { font-size:40px;font-weight:800;letter-spacing:-1.5px;line-height:1.15;margin-bottom:16px; }
.section-sub { font-size:17px;color:var(--gray);max-width:640px;line-height:1.65; }

/* BUTTONS */
.btn-primary { background:var(--purple);color:#fff;padding:14px 28px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;box-shadow:0 4px 14px rgba(91,33,182,.3); }
.btn-primary:hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(91,33,182,.4);background:var(--purple-m); }
.btn-secondary { background:transparent;color:var(--slate);padding:14px 28px;border-radius:10px;font-weight:600;font-size:15px;text-decoration:none;border:2px solid var(--border);cursor:pointer;transition:border-color .15s,color .15s; }
.btn-secondary:hover { border-color:var(--purple-l);color:var(--purple); }

/* HERO SHELL */
.hero { padding:130px 40px 80px;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr 0.9fr;gap:72px;align-items:center; }
.hero-badge { display:inline-flex;align-items:center;gap:8px;background:var(--purple-xl);color:var(--purple);border:1px solid var(--purple-l);border-radius:20px;padding:4px 14px;font-size:13px;font-weight:600;margin-bottom:24px; }
.hero-badge .dot { width:7px;height:7px;background:var(--purple-m);border-radius:50%;animation:pulse 2s infinite; }
.hero-sub { font-size:17px;color:var(--slate-l);line-height:1.65;margin-bottom:32px; }
.hero-sub strong { color:var(--slate);font-weight:600; }
.hero-actions { display:flex;gap:12px;flex-wrap:wrap; }

/* FORMS */
form { display:flex;flex-direction:column;gap:14px; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
label { font-size:12px;font-weight:600;color:var(--slate);margin-bottom:5px;display:block; }
input,select,textarea { width:100%;padding:11px 15px;border-radius:9px;border:1.5px solid var(--border);background:var(--white);font-family:inherit;font-size:14px;color:var(--slate);transition:border-color .2s,box-shadow .2s;outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--purple);box-shadow:0 0 0 3px rgba(91,33,182,.12); }
textarea { resize:vertical;min-height:90px; }
.form-group { display:flex;flex-direction:column; }
.form-success { display:none;background:var(--green-l);border:1px solid #A7F3D0;border-radius:12px;padding:28px;text-align:center;color:#065F46; }
.form-success .fs-icon { font-size:32px;margin-bottom:10px; }
.form-success .fs-title { font-size:17px;font-weight:700;margin-bottom:6px; }
.form-success .fs-sub { font-size:13px;font-weight:400;color:#065F46;opacity:.8; }
.form-error { display:none;background:var(--red-l);border:1px solid #FECACA;border-radius:10px;padding:14px;text-align:center;color:var(--red);font-size:13px;font-weight:600; }
.checkbox-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px; }
.checkbox-item { display:flex;align-items:center;gap:8px;background:var(--white);border:1.5px solid var(--border);border-radius:8px;padding:9px 12px;cursor:pointer;transition:border-color .2s,background .2s;font-size:13px;font-weight:500;color:var(--slate-l); }
.checkbox-item input[type="checkbox"] { width:15px;height:15px;flex-shrink:0;accent-color:var(--purple);cursor:pointer; }
.checkbox-item:has(input:checked) { border-color:var(--purple-l);background:var(--purple-xl);color:var(--purple); }
.optional-tag { font-size:10px;font-weight:500;color:var(--gray-l);margin-left:4px;font-style:italic; }
.tools-category-label { font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px; }
.form-divider { display:flex;align-items:center;gap:12px;margin:4px 0; }
.form-divider::before,.form-divider::after { content:'';flex:1;height:1px;background:var(--border); }
.form-divider span { font-size:12px;color:var(--gray-l);font-weight:500;white-space:nowrap; }

/* NUMBERED STEP LIST — used by the homepage automation model and the
   Custom Builds engagement phases. */
.workflow-steps { display:flex;flex-direction:column;gap:14px;margin-top:0; }
.workflow-step { display:flex;gap:16px;align-items:flex-start;background:var(--white);border:1px solid var(--border);border-radius:14px;padding:18px 20px;transition:box-shadow .2s; }
.workflow-step:hover { box-shadow:0 4px 16px rgba(0,0,0,.06); }
.workflow-step-num { width:36px;height:36px;background:var(--purple);color:#fff;border-radius:10px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.workflow-step-icon { font-size:18px;flex-shrink:0;margin-top:1px; }
.workflow-step h4 { font-size:15px;font-weight:700;margin-bottom:4px; }
.workflow-step p { font-size:13px;color:var(--gray);line-height:1.55; }

/* FAQ */
.faq-list { margin-top:48px;max-width:780px; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-question { display:flex;justify-content:space-between;align-items:center;padding:20px 0;cursor:pointer;font-size:15px;font-weight:600;color:var(--slate);gap:16px;list-style:none;user-select:none; }
.faq-question:hover { color:var(--purple); }
.faq-chevron { flex-shrink:0;transition:transform .25s;color:var(--gray-l); }
.faq-item.open .faq-chevron { transform:rotate(180deg); }
.faq-item.open .faq-question { color:var(--purple); }
.faq-answer { display:none;padding:0 0 20px;font-size:14px;color:var(--gray);line-height:1.75; }
.faq-item.open .faq-answer { display:block; }

/* FOOTER */
footer { background:var(--slate);padding:48px 40px; }
.footer-inner { max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;align-items:center; }
.footer-logo { font-weight:800;font-size:16px;color:var(--white);letter-spacing:-0.5px; }
.footer-logo span { color:var(--purple-l); }
.footer-tagline { font-size:12px;color:rgba(255,255,255,.4);margin-top:4px; }
.footer-right { text-align:right; }
.footer-right p { font-size:12px;color:rgba(255,255,255,.4); }
.footer-right a { color:var(--purple-l);text-decoration:none; }

/* COOKIE BANNER */
.cookie-banner { position:fixed;bottom:0;left:0;right:0;z-index:300;background:var(--slate);border-top:1px solid rgba(255,255,255,.1);padding:16px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; }
.cookie-banner p { font-size:13px;color:rgba(255,255,255,.7);line-height:1.5; }
.cookie-banner a { color:var(--purple-l);text-decoration:underline; }
.cookie-banner-actions { display:flex;gap:10px;flex-shrink:0; }
.cookie-accept { background:var(--purple);color:white;border:none;padding:8px 20px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s; }
.cookie-accept:hover { background:var(--purple-m); }
.cookie-decline { background:transparent;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.2);padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:color .2s; }
.cookie-decline:hover { color:white; }

/* WHATSAPP */
.wa-btn { position:fixed;bottom:28px;right:28px;z-index:200;display:flex;align-items:center;gap:10px;background:#25D366;color:white;border-radius:50px;padding:13px 20px 13px 14px;box-shadow:0 4px 24px rgba(37,211,102,.4);text-decoration:none;font-size:14px;font-weight:600;transition:transform .2s,box-shadow .2s; }
.wa-btn:hover { transform:translateY(-2px);box-shadow:0 8px 32px rgba(37,211,102,.5); }
.wa-btn span { white-space:nowrap; }

/* RESPONSIVE — shared shell only; page components handle their own */
@media(max-width:1080px) {
  .nav-links { gap:18px; }
  .nav-links a { font-size:13px; }
}
@media(max-width:900px) {
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  section { padding:60px 24px; }
  .hero { grid-template-columns:1fr;gap:36px;padding:120px 24px 60px; }
  h1 { font-size:36px; }
  .form-row { grid-template-columns:1fr; }
  footer { padding:32px 24px; }
}

/* LANG
   Language switching is CSS-only: elements carry data-lang="en" / data-lang="fr"
   and body.fr flips which set is visible.

   Careful: these rules set `display` with !important, so an element carrying
   data-lang loses its own display value. Never put data-lang on a flex/grid
   container, or on something hidden at a breakpoint — put it on inner spans
   instead, and let the container stay language-neutral. */
[data-lang="fr"] { display:none !important; }
body.fr [data-lang="en"] { display:none !important; }
body.fr [data-lang="fr"] { display:block !important; }
body.fr span[data-lang="fr"] { display:inline !important; }
body.fr li[data-lang="fr"] { display:flex !important; }
body.fr a[data-lang="fr"] { display:flex !important; }
body.fr label[data-lang="fr"] { display:block !important; }
span[data-lang="fr"] { display:none !important; }
li[data-lang="fr"] { display:none !important; }
a[data-lang="fr"] { display:none !important; }
label[data-lang="fr"] { display:none !important; }

/* ============================================================
   USE-CASE & METHOD PAGES (generated by tools/build-cases.mjs)
   Shared by /use-cases, the case pages, and /how-we-work.
   ============================================================ */

.uc-main section { padding:64px 40px; }
.page-hero { max-width:1180px;margin:0 auto;padding:140px 40px 8px; }
.crumb { font-size:13px;color:var(--gray);margin-bottom:20px; }
.crumb a { color:var(--gray);text-decoration:none;transition:color .2s; }
.crumb a:hover { color:var(--purple); }
.crumb .sep { margin:0 6px;color:var(--gray-l); }
.page-hero h1 { font-size:40px;letter-spacing:-1.5px;max-width:900px; }
.page-hero .hero-sub { max-width:760px; }
.uc-chips { display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px; }
.uc-chip { background:var(--white);border:1px solid var(--border);border-radius:20px;padding:5px 14px;font-size:13px;font-weight:500;color:var(--slate-l); }
.uc-chip strong { color:var(--purple);font-weight:700;margin-right:4px; }

/* Honesty banner: scoped engagement, not measured results */
.status-note { display:flex;gap:10px;align-items:flex-start;background:var(--amber-l);border:1px solid #FDE68A;border-radius:12px;padding:14px 18px;font-size:13.5px;color:#92400E;line-height:1.6;max-width:820px;margin-top:8px; }
.status-note .sn-icon { flex-shrink:0; }

/* Situation bullets */
.uc-bullets { list-style:none;margin-top:32px;display:flex;flex-direction:column;gap:12px;max-width:860px; }
.uc-bullets li { display:flex;gap:12px;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:14px 18px;font-size:14.5px;color:var(--slate-l);line-height:1.6; }
.uc-bullets li::before { content:'—';color:var(--purple);font-weight:700;flex-shrink:0; }

/* Semantic data tables (scope + agents) */
.table-scroll { overflow-x:auto;background:var(--white);border:1px solid var(--border);border-radius:14px;margin-top:32px; }
.data-table { width:100%;border-collapse:collapse;font-size:14px; }
.data-table th { text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--gray);font-weight:700;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--bg);white-space:nowrap; }
.data-table td { padding:14px 20px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--slate-l);line-height:1.6; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table td:first-child { font-weight:600;color:var(--slate);min-width:180px; }
.agents-table { min-width:720px; }
.agents-table td:nth-child(3) { background:var(--purple-xl);color:var(--slate-m); }
.agents-table th:nth-child(3) { color:var(--purple); }
.mark-yes { color:var(--green);font-weight:700;white-space:nowrap; }
.mark-no { color:var(--gray-l);white-space:nowrap; }
.mark-later { color:var(--amber);font-weight:600;font-size:12.5px;white-space:nowrap; }

/* Guardrails + out-of-scope grids */
.guardrails, .oos-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px; }
.guardrail, .oos-item { display:flex;gap:12px;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px 18px;font-size:14px;color:var(--slate-l);line-height:1.6; }
.guardrail .g-icon { color:var(--green);font-weight:800;flex-shrink:0; }
.oos-item .o-icon { color:var(--gray-l);font-weight:800;flex-shrink:0; }

/* Architecture diagram */
.diagram-wrap { background:var(--white);border:1px solid var(--border);border-radius:14px;padding:20px;margin-top:32px;overflow-x:auto; }
.diagram-wrap svg { display:block;min-width:660px;width:100%;height:auto; }
.diagram-caption { font-size:13px;color:var(--gray);margin-top:14px;line-height:1.6;max-width:820px; }

/* Timeline duration chip (rides on .workflow-step) */
.ws-dur { display:inline-block;font-size:12px;color:var(--purple);font-weight:700;background:var(--purple-xl);border-radius:12px;padding:1px 10px;margin-left:8px;vertical-align:middle;white-space:nowrap; }
.timeline-total { font-size:14px;color:var(--slate-l);margin-top:20px;font-weight:600; }

/* Modelled impact */
.impact-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px; }
.impact-card { background:var(--white);border:1px solid var(--border);border-radius:14px;padding:22px; }
.impact-label { font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--gray);font-weight:700;margin-bottom:10px; }
.impact-value { font-size:25px;font-weight:800;color:var(--purple);letter-spacing:-.5px;line-height:1.2; }
.impact-note { font-size:12.5px;color:var(--gray);margin-top:10px;line-height:1.55; }
.modelled-tag { display:inline-block;background:var(--amber-l);color:var(--amber);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:10px;margin-left:8px;vertical-align:middle; }
.impact-basis { background:var(--white);border:1px solid var(--border);border-left:3px solid var(--purple);border-radius:12px;padding:16px 20px;margin-top:18px;font-size:13.5px;color:var(--slate-l);line-height:1.65; }
.impact-invest { font-size:14px;color:var(--slate-l);margin-top:18px; }

/* Related links + CTA */
.related-links { display:flex;gap:10px;flex-wrap:wrap;margin-top:24px; }
.related-links a { background:var(--white);border:1.5px solid var(--border);border-radius:20px;padding:7px 16px;font-size:13.5px;font-weight:600;color:var(--slate-l);text-decoration:none;transition:border-color .2s,color .2s; }
.related-links a:hover { border-color:var(--purple-l);color:var(--purple); }

/* Hub cards */
.case-grid { display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px; }
.case-card { background:var(--white);border:1px solid var(--border);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s,transform .2s; }
.case-card:hover { box-shadow:0 10px 32px rgba(0,0,0,.08);transform:translateY(-2px); }
.case-icon { font-size:26px; }
.case-kicker { font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--purple);font-weight:700; }
.case-card h2 { font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.3;margin-bottom:0; }
.case-card > p { font-size:14px;color:var(--gray);line-height:1.6; }
.case-facts { list-style:none;display:flex;flex-direction:column;gap:8px;margin:2px 0 6px; }
.case-facts li { display:flex;gap:10px;font-size:13.5px;color:var(--slate-l);line-height:1.5; }
.case-facts li::before { content:'—';color:var(--purple-l);font-weight:700;flex-shrink:0; }
.case-cta { margin-top:auto;font-weight:700;color:var(--purple);text-decoration:none;font-size:14px; }
.case-cta:hover { text-decoration:underline; }

/* Method page principle cards */
.principles { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px; }
.principle { background:var(--white);border:1px solid var(--border);border-radius:16px;padding:26px; }
.principle .p-icon { font-size:22px;margin-bottom:12px; }
.principle h2 { font-size:17px;font-weight:800;letter-spacing:-.3px;margin-bottom:10px; }
.principle p { font-size:14px;color:var(--slate-l);line-height:1.65; }
.principle p + p { margin-top:8px; }

/* Band linking hub <-> method page */
.uc-band { max-width:1180px;margin:0 auto;background:var(--slate);border-radius:18px;padding:32px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; }
.uc-band h2 { color:var(--white);font-size:19px;font-weight:800;letter-spacing:-.3px;margin-bottom:6px; }
.uc-band p { color:rgba(255,255,255,.65);font-size:13.5px;line-height:1.6;max-width:640px; }
.uc-band-cta { background:var(--white);color:var(--slate);padding:11px 22px;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;transition:transform .15s; }
.uc-band-cta:hover { transform:translateY(-1px); }

/* Mobile: scope table stacks; agents table scrolls (min-width above) */
@media(max-width:900px) {
  .uc-main section { padding:48px 24px; }
  .page-hero { padding:120px 24px 8px; }
  .page-hero h1 { font-size:32px; }
  .guardrails, .oos-grid, .impact-grid, .case-grid, .principles { grid-template-columns:1fr; }
  .uc-band { padding:26px 24px; }
}
@media(max-width:640px) {
  .scope-table thead { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
  .scope-table, .scope-table tbody, .scope-table tr, .scope-table td { display:block; }
  .scope-table td { border:none;padding:4px 16px;min-width:0; }
  .scope-table td:first-child { padding-top:14px;font-size:14.5px; }
  .scope-table tr { border-bottom:1px solid var(--border);padding-bottom:12px; }
  .scope-table tbody tr:last-child { border-bottom:none; }
  .scope-table td:not(:first-child) { display:flex;gap:8px;align-items:baseline; }
  .scope-table td:not(:first-child)::before { content:attr(data-label-en);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--gray);font-weight:700;flex-shrink:0; }
  body.fr .scope-table td:not(:first-child)::before { content:attr(data-label-fr); }
}