/* ==========================================================================
   Fonts — self-hosted (OFL). The site loads nothing from other origins.
   ========================================================================== */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Tokens — paper and ink, one accent (the app's green).
   ========================================================================== */
:root {
  --paper: #f6f5f2;
  --paper-2: #efede7;
  --paper-alt: #ebe8e0;
  --ink: #0a0a0b;
  --text: #0a0a0b;
  --text-2: #1c1c1f;
  --muted: #65656c;
  --rule: rgb(10 10 11 / 0.12);
  --rule-strong: #0a0a0b;
  --accent: #2f6f5e;
  --accent-ink: #ffffff;
  --accent-soft: #e4eee9;
  --warm-soft: #f3ebe4;
  --warn: #8a5a00;
  --warn-bg: #fbefd6;
  --ok: #1d5a45;

  /* Inverted bands */
  --band: #0a0a0b;
  --band-text: #f6f5f2;
  --band-muted: rgb(246 245 242 / 0.58);
  --band-rule: rgb(246 245 242 / 0.14);
  --band-accent: #6cc3a6;

  --ph-bg: #fff0b3;
  --ph-line: #b8860b;

  --sans: 'Space Grotesk', 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --gutter: 20px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0c0c0d;
    --paper-2: #121214;
    --paper-alt: #141416;
    --ink: #f0efea;
    --text: #f0efea;
    --text-2: #dcdbd6;
    --muted: #9a9aa2;
    --rule: rgb(240 239 234 / 0.12);
    --rule-strong: rgb(240 239 234 / 0.85);
    --accent: #5cb399;
    --accent-ink: #0b1612;
    --accent-soft: #13241e;
    --warm-soft: #1b1714;
    --warn: #f1cf86;
    --warn-bg: #33280e;
    --ok: #8fd6bb;
    --band: #1e1e21;
    --band-text: #f0efea;
    --band-muted: rgb(240 239 234 / 0.6);
    --band-rule: rgb(240 239 234 / 0.12);
    --ph-bg: #4a3d0a;
    --ph-line: #e2b44a;
    color-scheme: dark;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, h5 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
a { color: inherit; }
svg { display: block; }
s { text-decoration-thickness: 1px; opacity: 0.7; }
code { font-family: var(--mono); font-size: 0.92em; padding: 0.05em 0.35em; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main:focus { outline: none; }

.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

.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; }
.mono { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.dim { color: var(--muted); }
.ok { color: var(--ok); display: inline-flex; align-items: center; gap: 6px; }
.warn { color: var(--warn); }
.i { width: 16px; height: 16px; flex: none; }

.skip-link { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--paper); font-weight: 500; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Placeholders: owner decisions still open. Production builds refuse these. */
.ph { background: var(--ph-bg); color: inherit; border-bottom: 1.5px dashed var(--ph-line); padding: 0 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; cursor: help; }
.band .ph, .plan-featured .ph { color: #0a0a0b; }
@media (prefers-color-scheme: dark) { .band .ph, .plan-featured .ph { color: inherit; } }
.draft-pill { position: fixed; left: 12px; bottom: 12px; z-index: 60; padding: 6px 10px; font-size: 0.6875rem; background: var(--ph-bg); color: var(--text); border: 1px solid var(--ph-line); pointer-events: none; }

/* ==========================================================================
   Type
   ========================================================================== */
.display { font-size: clamp(2.75rem, 1rem + 6.4vw, 6.5rem); line-height: 0.96; letter-spacing: -0.035em; }
.display-md { font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5.75rem); line-height: 0.98; letter-spacing: -0.032em; }
.display-sm { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
.h2 { font-size: clamp(2.125rem, 1.3rem + 2.9vw, 4rem); line-height: 1.02; letter-spacing: -0.028em; }
.h3 { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; }
.h4 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.012em; }
.h5 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.008em; }

.accent-u { color: var(--accent); text-decoration: underline; text-decoration-thickness: 0.035em; text-underline-offset: 0.12em; }

.lead { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem); line-height: 1.5; color: var(--text-2); max-width: 36em; }
.fine { color: var(--muted); max-width: 40em; font-size: 0.875rem; }
.body-lg { font-size: 1.125rem; color: var(--text-2); }

/* Label: "— WHY IT MATTERS" */
.label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.label::before { content: ''; width: 18px; height: 1px; background: currentColor; }

.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid currentColor; transition: color 120ms ease; }
@media (hover: hover) and (pointer: fine) { .text-link:hover { color: var(--accent); } }

/* ==========================================================================
   Buttons — square, flat. No motion beyond a colour change.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 48px; padding: 0 20px;
  border: 1px solid var(--ink); border-radius: 2px;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn-sm { height: 40px; padding: 0 14px; font-size: 0.875rem; }
.btn-lg { height: 54px; padding: 0 22px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-invert { background: var(--band-text); border-color: var(--band-text); color: var(--band); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: color-mix(in srgb, var(--ink) 82%, var(--paper)); }
  .btn-ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .btn-accent:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
  .btn-invert:hover { background: color-mix(in srgb, var(--band-text) 85%, var(--band)); }
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }
.works-with { margin-top: 20px; font-size: 12px; letter-spacing: 0.04em; }

.link-btn { background: none; border: 0; padding: 4px 0; cursor: pointer; font-size: 0.875rem; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .link-btn:hover { color: var(--text); } }

/* ==========================================================================
   Top bar + header
   ========================================================================== */
.topbar { border-bottom: 1px solid var(--rule); color: var(--muted); }
.topbar-inner { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar .mono { font-size: 0.6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lang-switch { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; flex: none; }
.lang-switch a { color: var(--muted); text-decoration: none; padding: 4px 0; }
.lang-switch [aria-current] { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.lang-switch .sep { opacity: 0.4; }
@media (hover: hover) and (pointer: fine) { .lang-switch a:hover { color: var(--text); } }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); }
.header-inner { height: 64px; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; min-width: 0; }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Temporary mark until a logo exists (Q1): three ledger lines. */
.brand-mark { width: 26px; height: 26px; flex: none; fill: none; stroke-width: 6; stroke-linecap: butt; }
.brand-mark .m-ink { stroke: var(--ink); }
.brand-mark .m-sign { stroke: var(--accent); }

.nav-primary { display: none; margin-inline: auto; }
.nav-primary ul { list-style: none; display: flex; gap: 28px; }
.nav-primary a { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--text-2); padding: 6px 0; white-space: nowrap; }
.nav-primary a[aria-current='page'] { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .nav-primary a:hover { color: var(--accent); } }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.nav-primary + .header-actions { margin-left: 0; }
.link-quiet { font-size: 0.875rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .link-quiet:hover { text-decoration: underline; text-underline-offset: 4px; } }

/* Mobile menu: <details>, works without JavaScript; opens instantly. */
.menu-btn { list-style: none; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 2px; }
.menu-btn::-webkit-details-marker { display: none; }
.menu-icon { width: 16px; height: 8px; position: relative; }
.menu-icon span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; }
.menu-icon span:first-child { top: 0; }
.menu-icon span:last-child { bottom: 0; }
.mobile-menu[open] .menu-icon span:first-child { top: 3.25px; transform: rotate(45deg); }
.mobile-menu[open] .menu-icon span:last-child { bottom: 3.25px; transform: rotate(-45deg); }
.mobile-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100dvh - 100px); overflow-y: auto;
  padding: 0 var(--gutter) 24px; background: var(--paper);
  border-bottom: 1px solid var(--rule-strong);
  display: grid; gap: 24px;
}
.mobile-panel ul { list-style: none; }
.mobile-panel nav a { display: block; padding: 16px 0; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.mobile-panel nav a[aria-current='page'] { color: var(--accent); }
.mobile-actions { display: grid; gap: 10px; }

.hide-sm { display: none; }
@media (max-width: 479px) { .hide-xs { display: none; } }
/* 1280px: the six French nav items plus three header actions need the room. */
@media (min-width: 1280px) {
  .nav-primary { display: block; }
  .hide-sm { display: inline-flex; }
  .mobile-menu { display: none; }
  .brand { flex: none; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: clamp(80px, 10vw, 144px); }
.section-tight { padding-block: clamp(24px, 4vw, 48px) clamp(80px, 10vw, 128px); }
.ruled { border-top: 1px solid var(--rule-strong); }
/* Alternate light sections between two paper tones so section edges read at a glance. */
main > .section:nth-of-type(even):not(.band) { background: var(--paper-alt); }
.band { background: var(--band); color: var(--band-text); --muted: var(--band-muted); --rule: var(--band-rule); --rule-strong: var(--band-rule); --accent: var(--band-accent); --ink: var(--band-text); --paper: var(--band); --text: var(--band-text); --text-2: var(--band-text); --ok: var(--band-accent); }
@media (prefers-color-scheme: dark) { .band { border-block: 1px solid var(--band-rule); } }

.head { display: grid; gap: 24px 64px; margin-bottom: clamp(48px, 6vw, 80px); }
.head-body { font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem); line-height: 1.5; color: var(--text-2); max-width: 34em; }
.head:last-child { margin-bottom: 0; }
.head-side { display: grid; gap: 28px; justify-items: start; }
@media (min-width: 960px) {
  .head { grid-template-columns: 1fr 1fr; align-items: start; }
  .head-body { padding-top: 44px; }
  .head-side { padding-top: 44px; }
  .head-side .head-body { padding-top: 0; }
}

.foot-note { margin-top: 24px; color: var(--muted); font-size: 0.6875rem; line-height: 1.7; max-width: 80em; }
.more { margin-top: 40px; }
.hint { margin-top: 16px; color: var(--muted); font-size: 0.6875rem; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-block: clamp(56px, 9vw, 120px) clamp(72px, 9vw, 128px); }
.hero-grid { display: grid; gap: 56px; }
.hero-grid > * { min-width: 0; }
.hero-copy { display: grid; gap: 28px; justify-items: start; }
.hero-copy .display { max-width: 12ch; }
@media (min-width: 1100px) { .hero-copy .display { font-size: clamp(3.5rem, 0.5rem + 4.4vw, 5.25rem); } }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
@media (min-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 64px; align-items: end; }
}

/* Hero example: one question to Claude and its answer (example data) */
.ask { margin: 0; width: 100%; max-width: 460px; justify-self: end; border: 1px solid var(--rule-strong); background: var(--paper); }
.ask-bar { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--rule); font-size: 0.6875rem; color: var(--muted); }
.ask-q { margin: 0; padding: 22px 22px 0; font-size: 1.0625rem; color: var(--muted); }
.ask-a { margin: 14px 22px 24px; padding-left: 14px; border-left: 2px solid var(--accent); font-size: 1.25rem; line-height: 1.45; color: var(--text); }

/* Code block on light sections */
.code { margin: 0; align-self: start; background: #0a0a0b; color: #f0efea; padding: 22px 22px 10px; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; border: 1px solid #0a0a0b; }
@media (prefers-color-scheme: dark) { .code { background: #141416; border-color: rgb(240 239 234 / 0.14); } }
.code p { margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.code .c-note { color: rgb(240 239 234 / 0.5); }
.code .c-cmd::before { content: '$ '; color: #6cc3a6; }
.code .c-you::before { content: '> '; color: #6cc3a6; }
.connect-grid { display: grid; gap: 16px; }
@media (min-width: 960px) { .connect-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.connect-grid .apps { grid-template-columns: 1fr; }

.band .code { background: rgb(240 239 234 / 0.04); border-color: var(--band-rule); }

/* Tool chips */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chips li { font-family: var(--mono); font-size: 0.6875rem; padding: 4px 8px; border: 1px solid var(--rule-strong); color: var(--text-2); }
div.row-body p { color: inherit; }

/* ==========================================================================
   Compare (by hand vs with the service)
   ========================================================================== */
.compare { display: grid; border: 1px solid var(--rule-strong); }
.compare-col { padding: 28px 24px; display: grid; gap: 8px; align-content: start; }
.compare-left { background: var(--warm-soft); }
.compare-right { background: var(--accent-soft); }
.compare-col > .mono { color: var(--text-2); margin-bottom: 8px; }
.compare-sub { color: var(--muted); }
.compare-vs { display: grid; place-items: center; padding: 10px; border-block: 1px dashed var(--rule); color: var(--muted); }
.compare-rows { margin-top: 20px; border-top: 1px solid var(--rule); }
.compare-rows > div { display: grid; grid-template-columns: 120px 1fr 20px; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.compare-rows dt { font-size: 0.6875rem; color: var(--muted); }
.compare-rows dd { font-family: var(--mono); font-size: 0.8125rem; }
.compare-rows .mark { justify-self: end; align-self: center; }
@media (min-width: 900px) {
  .compare { grid-template-columns: 1fr 44px 1fr; }
  .compare-col { padding: 36px 32px; }
  .compare-vs { border-block: 0; border-inline: 1px dashed var(--rule); place-items: start center; padding-top: 40px; }
}

/* ==========================================================================
   Numbered rows: 01 · title · description
   ========================================================================== */
.rows { list-style: none; border-top: 1px solid var(--rule); }
.rows > li { display: grid; gap: 8px 32px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.row-num { color: var(--muted); font-size: 0.6875rem; padding-top: 6px; }
.row-title { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.012em; font-weight: 500; }
.row-body { color: var(--muted); max-width: 38em; }
@media (min-width: 860px) {
  .rows > li { grid-template-columns: 72px minmax(0, 5fr) minmax(0, 6fr); align-items: baseline; }
  .rows-days > li { grid-template-columns: 96px minmax(0, 4fr) minmax(0, 7fr); }
}

/* ==========================================================================
   Tables — black header row
   ========================================================================== */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule-strong); }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table thead th { background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; padding: 16px 18px; }
.table th, .table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody th { font-weight: 400; }
.table td { font-family: var(--mono); font-size: 0.8125rem; }
.table-rates td { white-space: nowrap; }
@media (prefers-color-scheme: dark) { .table thead th { background: #1c1c1f; color: var(--text); } }

/* Spec list: key, value */
.spec { border-top: 1px solid var(--rule-strong); }
.spec > div { display: grid; gap: 6px 32px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.spec dt { font-weight: 500; font-size: 1.0625rem; }
.spec dd { color: var(--muted); max-width: 40em; }
@media (min-width: 760px) { .spec > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }

/* NB box */
.nb { display: flex; gap: 20px; align-items: flex-start; margin-top: 24px; padding: 24px 28px; background: #0a0a0b; color: #f6f5f2; }
.band .nb { background: transparent; border: 1px solid var(--band-rule); }
.nb-tag { flex: none; padding: 4px 6px; border: 1px solid #6cc3a6; color: #6cc3a6; font-size: 0.625rem; line-height: 1; }
.nb p { line-height: 1.6; }
.nb .ph { color: #0a0a0b; }
@media (prefers-color-scheme: dark) { .nb { background: #161618; border: 1px solid var(--band-rule); } .nb .ph { color: inherit; } }

.check-list { list-style: none; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list .i { color: var(--accent); margin-top: 4px; }
.muted-list .i { color: var(--muted); }

.num-list { padding-left: 1.4em; display: grid; gap: 10px; }
.num-list li::marker { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }

.box { border: 1px solid var(--rule-strong); padding: 24px; display: grid; gap: 16px; align-content: start; }
.box > .mono { color: var(--text-2); }

/* ==========================================================================
   Approvals demo
   ========================================================================== */
.approve-grid { display: grid; gap: 48px; }
@media (min-width: 960px) {
  .approve-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
  .approve-grid .rows > li { grid-template-columns: 56px 1fr; }
  .approve-grid .row-body { grid-column: 2; }
}
.draft { border: 1px solid var(--rule-strong); background: var(--paper); padding: 24px; display: grid; gap: 14px; max-width: 520px; }
.draft-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.draft-head .mono { font-size: 0.6875rem; }
.draft-vendor { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.tag { display: inline-flex; align-items: center; padding: 4px 8px; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--rule-strong); white-space: nowrap; }
.tag-ok { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tag-warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.draft-lines { border-top: 1px solid var(--rule); margin-top: 6px; }
.draft-lines > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.draft-lines dt { color: var(--muted); font-size: 0.9375rem; }
.draft-lines dd { font-size: 0.8125rem; text-align: right; }
.draft-total dt { color: var(--text); font-weight: 500; }
.draft-total dd { font-weight: 600; }
.draft-suggest { font-size: 0.6875rem; text-transform: none; letter-spacing: 0.02em; }
.draft-actions { margin-top: 6px; min-height: 48px; }
.action-set { display: flex; gap: 10px; }
.action-set .btn { flex: 1; }
.action-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 48px; font-weight: 500; }

/* Stacked states share one grid cell, so nothing shifts. Swapped instantly. */
.swap { display: inline-grid; }
.draft-actions.swap { display: grid; }
.swap > * { grid-area: 1 / 1; }
.draft-head .swap { justify-items: end; }
[data-demo] [data-show] { visibility: hidden; }
[data-demo][data-state='draft'] [data-show~='draft'],
[data-demo][data-state='approved'] [data-show~='approved'],
[data-demo][data-state='rejected'] [data-show~='rejected'] { visibility: visible; }

/* ==========================================================================
   Claude apps (on band)
   ========================================================================== */
.apps { display: grid; gap: 16px; }
@media (min-width: 860px) { .apps { grid-template-columns: 1fr 1fr; } }
.app-box { border: 1px solid var(--rule); padding: 24px; display: grid; gap: 16px; align-content: start; }
.app-name { color: var(--accent); }
.app-steps { font-size: 0.8125rem; text-transform: none; letter-spacing: 0.01em; line-height: 1.8; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.plans { display: grid; border: 1px solid var(--rule-strong); }
.plan { padding: 32px; display: grid; gap: 18px; align-content: start; }
.plan + .plan { border-top: 1px solid var(--rule-strong); }
.plan-featured { background: #0a0a0b; color: #f6f5f2; --muted: rgb(246 245 242 / 0.58); --rule: rgb(246 245 242 / 0.14); --accent: #6cc3a6; --accent-ink: #0b1612; }
@media (prefers-color-scheme: dark) { .plan-featured { background: #161618; } }
.plan-label { color: var(--muted); }
.plan-price { font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); line-height: 1; letter-spacing: -0.035em; }
.plan-unit { color: var(--muted); margin-top: -8px; }
.plan .check-list { padding-top: 18px; border-top: 1px solid var(--rule); }
.tiers { border-top: 1px solid var(--rule); }
.tiers > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.tiers + .check-list { border-top: 0; padding-top: 4px; }
.tiers dd { font-size: 0.8125rem; text-transform: none; letter-spacing: 0.01em; white-space: nowrap; }
.plan .btn { margin-top: 8px; }
@media (min-width: 860px) { .plan { padding: 40px; } }
/* Three plans (trial, owner, firm) side by side only once each column has room for the tier rows. */
@media (min-width: 1100px) {
  .plans { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .plan + .plan { border-top: 0; border-left: 1px solid var(--rule-strong); }
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final { background: var(--paper-2); border-top: 1px solid var(--rule-strong); padding-block: clamp(80px, 11vw, 160px); }
.final .container { display: grid; gap: 28px; justify-items: start; }
.final h2 { max-width: 12ch; }
.final-body { font-size: 1.25rem; color: var(--text-2); max-width: 36em; }
.final-line { width: 100%; max-width: 900px; padding-top: 28px; margin-top: 24px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.6875rem; letter-spacing: 0.12em; }

/* ==========================================================================
   Inner pages
   ========================================================================== */
.page-hero { padding-block: clamp(56px, 9vw, 112px) clamp(32px, 5vw, 64px); }
.page-hero .head { margin-bottom: 0; }
.page-hero .cta-row { margin-top: 40px; }

.toc { margin-top: 48px; border-top: 1px solid var(--rule-strong); }
.toc ul { list-style: none; display: grid; }
.toc a { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-weight: 500; }
.toc a .mono { font-size: 0.6875rem; }
@media (min-width: 760px) { .toc ul { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
@media (min-width: 1100px) { .toc ul { grid-template-columns: repeat(3, 1fr); } }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--accent); } }

.features { padding-bottom: 96px; }
.feature { display: grid; gap: 20px; padding-block: 56px; border-top: 1px solid var(--rule-strong); }
.feature-title { display: grid; gap: 12px; align-content: start; }
.feature-body { display: grid; gap: 20px; min-width: 0; }
.feature-body > p { color: var(--text-2); max-width: 42em; font-size: 1.0625rem; }
.feature-body .h5 { margin-top: 20px; }
@media (min-width: 960px) {
  .feature { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
  .feature-title { position: sticky; top: 96px; align-self: start; }
}
.split-boxes { display: grid; gap: 16px; }
@media (min-width: 760px) { .split-boxes { grid-template-columns: 1fr 1fr; } }
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li { padding: 8px 12px; border: 1px solid var(--rule-strong); font-size: 0.6875rem; }

.need { margin-bottom: 48px; }

.where { border: 1px solid var(--rule-strong); border-left: 4px solid var(--accent); padding: 28px 32px; display: grid; gap: 12px; margin-bottom: 24px; }
.where .mono { color: var(--muted); }
.where-body { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); line-height: 1.4; letter-spacing: -0.01em; max-width: 40em; }
.cells { display: grid; border-top: 1px solid var(--rule-strong); border-left: 1px solid var(--rule-strong); }
.cell { padding: 28px; display: grid; gap: 12px; align-content: start; border-right: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.cell .mono { font-size: 0.6875rem; }
.cell p { color: var(--muted); }
@media (min-width: 720px) { .cells { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cells { grid-template-columns: repeat(3, 1fr); } }
.inline-links { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 40px; }

/* FAQ — opens instantly; the plus becomes a minus. */
.faq { border-top: 1px solid var(--rule-strong); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 48px 1fr 20px; gap: 16px; align-items: baseline; padding: 24px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .mono { font-size: 0.6875rem; }
.faq-q { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem); font-weight: 500; letter-spacing: -0.01em; }
.faq-item .i-plus { align-self: center; }
.faq-item[open] .i-plus .v { display: none; }
@media (hover: hover) and (pointer: fine) { .faq-item summary:hover .faq-q { color: var(--accent); } }
.faq-answer { padding: 0 36px 28px 64px; color: var(--muted); max-width: 52em; font-size: 1.0625rem; line-height: 1.6; }
@media (max-width: 600px) { .faq-item summary { grid-template-columns: 32px 1fr 20px; gap: 10px; } .faq-answer { padding-left: 42px; padding-right: 0; } }

/* ==========================================================================
   Footer (band)
   ========================================================================== */
.site-footer { padding-block: 64px 32px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; padding-bottom: 32px; border-bottom: 1px solid var(--band-text); }
.footer-nav { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.footer-nav a, .footer-legal a { text-decoration: none; color: var(--band-muted); }
.footer-nav a { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .footer-nav a:hover, .footer-legal a:hover { color: var(--band-text); } }
.footer-mid { display: grid; gap: 24px; padding-block: 40px; }
.footer-tagline { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.2; letter-spacing: -0.015em; max-width: 22em; }
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
@media (min-width: 960px) { .footer-mid { grid-template-columns: 1fr auto; align-items: end; } }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-block: 24px; border-top: 1px solid var(--band-rule); }
.footer-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.6875rem; color: var(--band-muted); }
.site-footer .lang-switch a { color: var(--band-muted); }
.site-footer .lang-switch [aria-current] { color: var(--band-text); }
.footer-fine { display: grid; gap: 8px; padding-top: 16px; font-size: 0.75rem; color: var(--band-muted); max-width: 72em; }

/* Root language chooser */
.root-choice main { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 28px; }
.root-choice ul { list-style: none; display: flex; gap: 12px; }
.root-choice .brand-mark { width: 56px; height: 56px; }
.root-choice .fine { text-align: center; }

/* Legal documents (privacy notice, terms): readable long-form text. */
.legal { max-width: 44em; margin-top: 40px; line-height: 1.6; }
.legal h2 { margin: 48px 0 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 12px; }
.legal ul { padding-left: 1.25em; list-style: disc; }
.legal li + li { margin-top: 8px; }
.legal a { text-decoration-thickness: 1px; }

/* Pricing: file-count selector (radio inputs, CSS only) */
.calc { margin: 0 0 40px; padding: 28px; border: 1px solid var(--rule-strong); min-width: 0; }
.calc > * + * { margin-top: 14px; }
/* Floated so the legend sits inside the box instead of on its border. */
.calc-legend { float: left; width: 100%; padding: 0; font-size: 1.25rem; }
.calc-legend + .calc-hint { clear: both; margin-top: 0; padding-top: 6px; }
.calc-hint { margin: 0; color: var(--muted); }
.calc-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.calc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-opts label { min-width: 56px; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-strong); cursor: pointer; font-size: 0.9375rem; transition: background-color 0.15s, color 0.15s; }
.calc-opts label:hover { background: var(--accent-soft); }
#calc-1:checked ~ .calc-opts label[for=calc-1],
#calc-5:checked ~ .calc-opts label[for=calc-5],
#calc-10:checked ~ .calc-opts label[for=calc-10],
#calc-25:checked ~ .calc-opts label[for=calc-25],
#calc-50:checked ~ .calc-opts label[for=calc-50],
#calc-100:checked ~ .calc-opts label[for=calc-100] { background: var(--ink); color: var(--paper); }
#calc-1:focus-visible ~ .calc-opts label[for=calc-1],
#calc-5:focus-visible ~ .calc-opts label[for=calc-5],
#calc-10:focus-visible ~ .calc-opts label[for=calc-10],
#calc-25:focus-visible ~ .calc-opts label[for=calc-25],
#calc-50:focus-visible ~ .calc-opts label[for=calc-50],
#calc-100:focus-visible ~ .calc-opts label[for=calc-100] { outline: 2px solid var(--accent); outline-offset: 2px; }
.calc-out { border-top: 1px solid var(--rule); padding-top: 18px; }
.calc-r { display: none; }
#calc-1:checked ~ .calc-out .calc-r-1,
#calc-5:checked ~ .calc-out .calc-r-5,
#calc-10:checked ~ .calc-out .calc-r-10,
#calc-25:checked ~ .calc-out .calc-r-25,
#calc-50:checked ~ .calc-out .calc-r-50,
#calc-100:checked ~ .calc-out .calc-r-100 { display: block; }
.calc-plan { margin: 0; font-size: 0.6875rem; color: var(--muted); }
.calc-price { margin: 6px 0 4px; font-size: 2.5rem; line-height: 1.1; }
.calc-price span { font-size: 1rem; color: var(--muted); }
.calc-note { margin: 0; color: var(--text-2); }

/* Contact: "Ask for a demo" form */
.demo { display: grid; gap: 32px 64px; margin-bottom: clamp(48px, 6vw, 80px); }
.demo .head-body { margin-top: 20px; padding-top: 0; }
@media (min-width: 900px) { .demo { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }
.demo-form { display: grid; gap: 22px; border-top: 1px solid var(--rule-strong); padding-top: 28px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 500; padding: 0; }
.field > legend { margin-bottom: 8px; }
.field-note { margin-left: 6px; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.demo-form input[type=text], .demo-form input[type=email], .demo-form input[type=number], .demo-form textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--rule-strong); border-radius: 0;
  background: var(--paper); color: var(--text); font: inherit; font-size: 1rem;
}
.demo-form textarea { resize: vertical; line-height: 1.5; }
.demo-form input:focus-visible, .demo-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid var(--rule-strong); cursor: pointer; }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.choice:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demo-status { padding: 16px 20px; border: 1px solid var(--accent); background: var(--accent-soft); }
.demo-status[data-kind=error] { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.demo-form altcha-widget {
  --altcha-max-width: 100%;
  --altcha-border-radius: 0;
  --altcha-color-base: var(--paper);
  --altcha-color-border: var(--rule-strong);
  --altcha-color-text: var(--text);
  --altcha-color-border-focus: var(--accent);
  --altcha-color-error-text: var(--warn);
  display: block;
}
.final .link-quiet { display: inline-flex; align-items: center; min-height: 44px; }

/* Header with the demo button: tighter spacing until there is room (French labels are long). */
@media (min-width: 1280px) and (max-width: 1439px) {
  .nav-primary ul { gap: 16px; }
  .nav-primary a { letter-spacing: 0.04em; }
  .header-actions { gap: 12px; }
  .header-actions .btn-sm { padding: 0 11px; }
}