/* ==========================================================================
   site.css: marketing pages (home, pricing, request, legal, status, errors).
   Owner: site. Tokens only (no raw hex); components come from app.css.
   Contents: 1 Shared  2 Home hero + work order  3 How it works  4 Examples
             5 Why + integration  6 Pricing (cards, ruler, calculator, company needs)
             7 FAQ + closing band  8 Request form  9 Thanks, status, legal, errors
             10 Responsive  12 Buy it once (v3, with its own breakpoints)  13 Generated pages (T23)  11 Motion
   ========================================================================== */

/* ==== 1. Shared ==== */
.band { background: var(--surface); border-block: var(--hairline); }
.page-hero { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.page-hero .eyebrow { margin-bottom: 1.25rem; }
.page-hero .display-2 { max-width: 20ch; }
.page-hero .display-2 .l2 { display: block; text-wrap: pretty; }
/* Two-sentence titles in French: the italic second sentence starts its own line (it wrapped mid-phrase inline). */
.title-2l:lang(fr) em { display: block; text-wrap: balance; }
.page-hero .lead { margin-top: 1.25rem; max-width: 42rem; }
.page-hero-meta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--text-sm); color: var(--text-muted); }
.page-hero-meta > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.page-hero-meta .icon { --icon-size: 1rem; color: var(--text-subtle); }
.section-tight { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.section-head > h2 em, .display-2 em, .display-1 em { color: inherit; }

/* ==== 2. Home hero + the work order (concept visual) ==== */
.hero { padding-block: clamp(2rem, 1rem + 3vw, 3.75rem) clamp(4rem, 2rem + 5vw, 6.5rem); }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.hero-issue { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.hero-title { font-weight: 360; letter-spacing: -0.032em; }
.hero-title em { font-weight: 340; }
.hero-l2 { display: block; padding-left: calc((100% + 2rem) / 12 * 2); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
.hero-copy { grid-column: 1 / span 5; padding-top: 0.25rem; }
.hero-lead { max-width: 30rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: var(--space-6); }
.hero-facts { margin: var(--space-7) 0 0; display: grid; border-top: var(--hairline-ink); max-width: 30rem; }
.hero-facts > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); padding: 0.85rem 0; border-bottom: var(--hairline); font-size: var(--text-sm); }
.hero-facts dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); padding-top: 0.1rem; }
.hero-facts dd { margin: 0; }
.hero-facts .num { font-size: 0.8125rem; }
.hero-visual { grid-column: 6 / span 7; position: relative; min-width: 0; }
.hero-note { margin-top: 1rem; font-size: var(--text-xs); color: var(--text-muted); display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

.wo { position: relative; margin: 0; background: var(--surface); border: var(--hairline); border-radius: var(--radius-3); box-shadow: var(--shadow-3); }
.wo-tab { position: absolute; top: -0.8rem; left: 1.5rem; }
.wo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding: 1.6rem 1.5rem 1.1rem; border-bottom: var(--hairline); }
.wo-title { font-size: 1.625rem; line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; }
.wo-head p { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.35rem; }
.wo-status { display: flex; align-items: center; gap: 0.25rem; flex: none; }
.wo-live { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.wo-live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.wo-live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--success); opacity: 0; animation: wo-ping 2.4s var(--ease-out) infinite; }
.wo.is-paused .wo-live i::after, .wo.is-idle .wo-live i::after { animation: none; }
.wo.is-paused .wo-live i { background: var(--text-subtle); }
@keyframes wo-ping { 0% { transform: scale(0.4); opacity: 0.9; } 80%, 100% { transform: scale(1.4); opacity: 0; } }
.wo-pause { width: 2rem; min-height: 2rem; color: var(--text-muted); }
.wo-pause .icon { --icon-size: 0.875rem; }
.wo-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.wo-queue { list-style: none; margin: 0; padding: 0.4rem 0; border-right: var(--hairline); min-width: 0; }
.wo-queue > li { position: relative; display: grid; grid-template-columns: 1.25rem 1.1rem minmax(0, 1fr) auto; gap: 0 0.7rem; align-items: start; padding: 0.62rem 1.25rem 0.62rem 1.5rem; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.wo-queue > li + li { border-top: 1px dashed var(--border); }
.wo-n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-subtle); padding-top: 0.15rem; }
.wo-st { width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; border-radius: 50%; display: grid; place-items: center; }
.wo-st .icon { --icon-size: 0.7rem; stroke-width: 2.6; }
.is-done > .wo-st { background: var(--success-soft); color: var(--success); }
.is-now > .wo-st { background: var(--accent-soft); }
.is-now > .wo-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-fill); animation: breathe 1.6s var(--ease-in-out) infinite alternate; }
.is-next > .wo-st { box-shadow: inset 0 0 0 1.25px var(--border-strong); }
.wo-t { font-size: 0.875rem; font-weight: 560; line-height: 1.35; letter-spacing: -0.005em; min-width: 0; }
.wo-o { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--text-muted); margin-top: 0.1rem; }
.wo-k { font-family: var(--font-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; text-align: right; padding-top: 0.05rem; white-space: nowrap; }
.wo-k b { font-weight: 400; }
.wo-k small { display: block; font-size: var(--text-2xs); color: var(--text-subtle); letter-spacing: 0.06em; }
.wo-queue > .is-now { background: linear-gradient(to right, var(--accent-soft), transparent 85%); }
.wo-queue > .is-now .wo-o { color: var(--accent); }
.wo-queue > .is-now::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--p, 0.62) * 100%); background: var(--accent-fill); }
.wo-queue > .is-next .wo-t, .wo-queue > .is-next .wo-k { color: var(--text-muted); font-weight: 400; }
.wo-queue > .is-leaving { opacity: 0; transform: translateY(-6px); }
.wo-queue > .is-entering { opacity: 0; transform: translateY(6px); }
.wo-figs { padding: 1.35rem 1.5rem; display: grid; align-content: start; gap: 1.2rem; min-width: 0; }
.wo-fig { display: grid; gap: 0.3rem; min-width: 0; }
.wo-fig + .wo-fig { padding-top: 1.2rem; border-top: var(--hairline); }
.wo-fig .caps { color: var(--text-muted); }
.wo-v { font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1; letter-spacing: -0.04em; font-weight: 400; }
.wo-eq { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.6; overflow-wrap: anywhere; }
.wo-tape { padding: 0.9rem 1.5rem 1.35rem; border-top: var(--hairline); }
.wo .tape-flag { left: clamp(1.75rem, calc(min(var(--value), 1) * 100%), calc(100% - 1.75rem)); }
.wo-no-rate .wo-figs { grid-template-columns: minmax(0, 1fr); }
.wo-foot { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: 0.85rem; font-size: var(--text-xs); color: var(--text-muted); }

/* ==== 3. How it works ==== */
.how { padding-top: 0; }
.how-top-ruler { margin-bottom: clamp(3.5rem, 2rem + 4vw, 6rem); }
.how-ruler { margin-bottom: 2.25rem; }
.how-ruler .ruler { height: 16px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; gap: 0.85rem 2rem; }
.how-step { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.85rem; align-content: start; padding-top: 0.25rem; }
.how-step::before { content: ""; position: absolute; top: calc(-2.25rem - 16px); left: 0; width: 2px; height: calc(2.25rem + 16px + 0.25rem); background: var(--accent-fill); }
.how-step-n { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 4.25rem; line-height: 0.8; letter-spacing: -0.04em; font-variation-settings: "opsz" var(--display-opsz); }
.how-step h3 { font-size: 1.625rem; line-height: 1.12; letter-spacing: -0.02em; font-weight: 420; margin-top: 0.6rem; align-self: end; }
.how-step p { color: var(--text-muted); font-size: 0.975rem; line-height: 1.6; }
.how-step dl { margin: 0.35rem 0 0; padding-top: 0.8rem; border-top: var(--hairline); display: grid; gap: 0.2rem; }
.how-step dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.how-step dd { margin: 0; font-size: var(--text-sm); }

/* ==== 4. Examples ==== */
.ex-top { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.ex-idx { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-subtle); letter-spacing: 0.1em; text-transform: uppercase; }
/* The label column fits the longest label of the list ("In" / "Out", "Entrée" / "Sortie"): rows share it (subgrid). */
.ex-io { margin: 0.35rem 0 0; display: grid; grid-template-columns: minmax(2.75rem, max-content) minmax(0, 1fr); column-gap: 0.75rem; border-top: var(--hairline); }
.ex-io > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 0.6rem 0; border-bottom: var(--hairline); font-size: var(--text-sm); }
.ex-io dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); padding-top: 0.1rem; }
.ex-io dd { margin: 0; }
.ex-feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: end; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-3); margin-bottom: 1.25rem; }
.ex-feature-main { display: grid; gap: 1rem; align-content: start; }
.ex-feature h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.06; letter-spacing: -0.028em; font-weight: 360; max-width: 18ch; margin-top: 0.4rem; }
.ex-feature h3 em { color: var(--accent); }
.ex-feature-main > p { color: var(--text-muted); max-width: 34rem; }
.ex-calc { display: grid; gap: 0.75rem; }
.ex-calc .caps { color: var(--text-muted); }
.ex-calc .receipt { font-size: var(--text-sm); }
.ex-calc-note { font-size: var(--text-xs); color: var(--text-muted); }
.ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ex-card { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.6rem 1.6rem 1.4rem; background: var(--bg); border: var(--hairline); border-radius: var(--radius-3); min-width: 0; transition: border-color var(--dur-2) var(--ease-out); }
.ex-card:hover { border-color: var(--border-strong); }
.ex-card h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 420; margin-top: 0.35rem; }
.ex-card > p { color: var(--text-muted); font-size: 0.9375rem; }
.ex-unit { margin-top: auto; padding-top: 0.6rem; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--text-muted); }
.ex-unit b { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap; }
.ex-unit span:last-child { white-space: nowrap; }
.ex-dim { flex: 1; height: 7px; margin-inline: 0.25rem; background: linear-gradient(var(--border-strong), var(--border-strong)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--border-strong), var(--border-strong)) 0 0 / 1px 100% no-repeat, linear-gradient(var(--border-strong), var(--border-strong)) 100% 0 / 1px 100% no-repeat; }
.ex-yours { background: transparent; border: 1px dashed var(--border-strong); }
.ex-yours-link { margin-top: auto; padding-top: 0.6rem; }

/* ==== 5. Why per token + integration ==== */
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.why-item { display: grid; gap: 0.75rem; align-content: start; padding-top: 1.5rem; border-top: var(--hairline-ink); }
.why-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: var(--hairline-strong); border-radius: var(--radius-2); background: var(--surface); margin-bottom: 0.5rem; }
.why-icon .icon { --icon-size: 1.25rem; }
.why-item h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 420; }
.why-item p { color: var(--text-muted); font-size: 0.975rem; line-height: 1.6; }

.integ-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; }
.integ-copy { grid-column: 1 / span 5; display: grid; gap: 1.5rem; align-content: start; }
.integ-copy .section-label { display: grid; gap: 0.9rem; }
.integ-title { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 1.04; letter-spacing: -0.028em; font-weight: 360; }
.integ-list { gap: 0.85rem; font-size: 0.975rem; color: var(--text-muted); }
.integ-list strong { color: var(--text); font-weight: 620; }
.integ-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.integ-code { grid-column: 7 / span 6; min-width: 0; }
.integ-code pre { font-size: 0.78rem; }

/* ==== 6. Pricing: ruler, cards, calculator, comparison ==== */
.rate { margin-bottom: 3rem; }
.rate-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; color: var(--text-muted); }
.rate-dir { display: inline-flex; align-items: center; gap: 0.35rem; }
.rate-tape { position: relative; padding-top: 2.4rem; }
.rate-mark { position: absolute; z-index: 4; top: 0; left: calc(var(--x) * 100%); width: 0; height: calc(2.4rem + 2.25rem + 5px); pointer-events: none; }
.rate-mark::before { content: ""; position: absolute; top: 1.75rem; bottom: 0; left: -1px; width: 2px; background: var(--text); }
.rate-mark.is-highlight::before { background: var(--accent-fill); }
.rate-mark > span { position: absolute; top: 0; left: 0; transform: translateX(-50%); display: flex; gap: 0.4rem; align-items: baseline; white-space: nowrap; font-size: 0.8125rem; font-weight: 620; }
.rate-mark.is-end > span { transform: translateX(calc(-100% + 1px)); }
.rate-mark.is-start > span { transform: translateX(-1px); }
.rate-mark b { font-family: var(--font-mono); font-weight: 500; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.rate-mark.is-highlight b { color: var(--accent); }
.rate-tape .tape-track { height: 2.25rem; }
.rate-ent { position: absolute; top: 0; bottom: 0; left: calc(var(--ent-from, 0.9) * 100%); right: 0; z-index: 1; background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in oklab, var(--text) 16%, transparent) 5px 6px); border-left: 1px dashed var(--text-muted); }
.rate-ent-label { display: block; margin-top: 0.35rem; text-align: right; font-size: var(--text-xs); color: var(--text-muted); }
.rate-list { display: none; list-style: none; margin: 0 0 2rem; padding: 0; border-top: var(--hairline-ink); }
.rate-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: var(--hairline); font-size: 0.9375rem; }
.rate-list b { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.rate-list .is-highlight b { color: var(--accent); }
/* List mode at every width: marks too close to label on one line (server) or labels that collide (site.js). */
.rate.is-list .rate-tape, .rate.is-list .rate-dir { display: none; }
.rate.is-list .rate-list { display: block; }
.rate.is-list .rate-head { margin-bottom: 0.75rem; }
.rate-note { margin: 0.75rem 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.rate.has-note .rate-list { margin-bottom: 0; }

.plan-grid { display: grid; grid-template-columns: repeat(var(--plans, 4), minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.plan-card { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 1.1rem; padding: 1.75rem 1.5rem 1.5rem; background: var(--surface); border: var(--hairline); border-radius: var(--radius-3); box-shadow: var(--shadow-1); min-width: 0; }
.plan-card.is-highlight { border-color: var(--rule); box-shadow: var(--shadow-2); }
.plan-card.is-highlight::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--accent-fill); border-radius: var(--radius-3) var(--radius-3) 0 0; }
.plan-card > * { min-width: 0; }
.plan-name { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.plan-name h2, .plan-name h3 { font-size: 1.75rem; line-height: 1.05; letter-spacing: -0.02em; font-weight: 420; min-width: 0; overflow-wrap: anywhere; }
.plan-tagline { font-size: var(--text-sm); color: var(--text-muted); min-height: 2.8em; overflow-wrap: anywhere; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding-bottom: 1.1rem; border-bottom: var(--hairline); }
.plan-amt { font-family: var(--font-display); font-size: 3.25rem; line-height: 1; letter-spacing: -0.04em; font-weight: 340; font-variation-settings: "opsz" var(--display-opsz); font-variant-numeric: lining-nums; }
.plan-amt-text { font-size: 2.5rem; letter-spacing: -0.03em; }
.plan-per { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.3; }
.plan-vat { display: block; font-size: var(--text-xs); color: var(--text-subtle); }
.plan-detail { display: grid; gap: 0.9rem; align-content: start; }
.plan-specs { margin: 0; display: grid; gap: 0.55rem; }
.plan-specs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; font-size: 0.8125rem; color: var(--text-muted); }
.plan-specs dd { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.plan-specs .is-rate dd { color: var(--accent); font-weight: 500; }
/* The included-tokens value stays on one line ("100 M de tokens"), so every card's rows sit at the same height.
   Only this row: the rate values are longer and must be free to wrap. */
.plan-specs .is-included dd { white-space: nowrap; }
.plan-features { padding-top: 0.9rem; border-top: var(--hairline); font-size: var(--text-sm); }
.plan-features li, .plan-enterprise-list li, .plan-enterprise-title, .plan-enterprise p { overflow-wrap: anywhere; min-width: 0; }
.plan-card .btn { white-space: normal; }
.plan-card.is-compact .plan-tagline { min-height: 2.8em; }
.plan-enterprise { margin-top: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 1.5rem 2rem; align-items: center; padding: 1.5rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-3); }
.plan-enterprise-title { font-size: 1.75rem; line-height: 1; font-weight: 420; letter-spacing: -0.02em; }
.plan-enterprise p { font-size: var(--text-sm); color: var(--text-muted); margin-top: 0.4rem; }
.plan-enterprise-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--text-sm); }
.plan-enterprise-list > li { grid-template-columns: 0.9rem auto; }
.plan-fine { margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 2rem; font-size: 0.8125rem; color: var(--text-muted); }
.plan-fine .link-arrow { color: var(--text); font-size: var(--text-sm); }

/* Pricing page: which plan fits your volume (bands of monthly tokens, the cheapest plan in each), read left to right
   like the tape: a thick rule per band, the recommended plan's band in ember. */
.ladder { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: 1.5rem; border-top: var(--hairline-ink); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.25rem 2rem; align-items: start; }
.ladder-title { font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.02em; font-weight: 420; }
.ladder-head p { margin-top: 0.6rem; font-size: var(--text-sm); color: var(--text-muted); max-width: 26rem; }
.ladder-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0 0.35rem; }
.ladder-step { display: grid; gap: 0.3rem; align-content: start; min-width: 0; padding: 0.85rem 0.75rem 0.2rem 0; border-top: 3px solid var(--text); }
.ladder-step.is-highlight { border-top-color: var(--accent-fill); }
.ladder-range { font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.ladder-plan { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.1; font-weight: 420; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.ladder-step.is-highlight .ladder-plan { color: var(--accent); }
.ladder-tasks { font-size: var(--text-xs); color: var(--text-muted); }

/* Pricing page: a month on a plan (worked example) */
.bex-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; }
.bex-copy { grid-column: 1 / span 6; display: grid; gap: 1.5rem; align-content: start; }
.bex-copy .section-label { display: grid; gap: 0.9rem; }
.bex-title { font-size: var(--text-3xl); line-height: 1.02; letter-spacing: -0.03em; font-weight: 340; }
.bex-steps { list-style: none; margin: 0; padding: 0; counter-reset: bex; display: grid; border-top: var(--hairline-ink); }
.bex-steps > li { counter-increment: bex; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.75rem; padding: 0.8rem 0; border-bottom: var(--hairline); font-size: 0.975rem; color: var(--text-muted); }
.bex-steps > li::before { content: counter(bex); grid-row: 1 / span 2; font-family: var(--font-display); font-style: italic; font-size: 1.375rem; line-height: 1.1; color: var(--text); }
.bex-steps strong { color: var(--text); font-weight: 620; }
.bex-card { grid-column: 8 / span 5; margin: 0; }
.bex-card .caps { color: var(--text-muted); }
.bex-card .receipt { font-size: var(--text-sm); }

/* Pricing page: calculator */
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem; align-items: start; }
.calc-form .radio-card-text { font-family: var(--font-mono); font-size: var(--text-xs); }
.calc-custom[hidden] { display: none; }
.calc-result { border-color: var(--rule); box-shadow: var(--shadow-2); }
.calc-result .card-body { display: grid; gap: 1rem; padding: 1.5rem 1.6rem 1.6rem; }
.calc-result-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.calc-result-head .caps { font-family: var(--font-mono); font-weight: 500; color: var(--text-muted); }
.calc-tokens { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.6rem; }
.calc-tokens .num { font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); line-height: 1; letter-spacing: -0.05em; }
.calc-tokens-unit { font-family: var(--font-display); font-style: italic; font-size: 1.375rem; color: var(--text-muted); }
.calc-eq { margin-top: -0.5rem; font-size: var(--text-xs); color: var(--text-muted); }
.calc-rows { list-style: none; margin: 0.25rem 0 0; padding: 0; border-top: var(--hairline-ink); }
.calc-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: center; padding: 0.8rem 0 0.95rem; border-bottom: var(--hairline); }
.calc-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; min-width: 0; }
.calc-row-main strong { font-weight: 620; }
.calc-breakdown { flex-basis: 100%; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.calc-cost { font-size: 1.125rem; white-space: nowrap; }
.calc-bar { grid-column: 1 / -1; height: 3px; margin-top: 0.35rem; background: var(--surface-2); border-radius: 2px; overflow: hidden; position: relative; }
.calc-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w, 0) * 100%); background: var(--chart-bar-muted); border-radius: 2px; transition: width var(--dur-3) var(--ease-out); }
.calc-row.is-best .calc-bar::before { background: var(--accent-fill); }
.calc-row.is-best .calc-cost { color: var(--accent); font-weight: 500; }
.calc-best[hidden] { display: none; }
.calc-summary { font-size: var(--text-md); line-height: 1.45; }
.calc-summary .num { font-size: 0.95em; }
.calc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.calc-ent { font-size: var(--text-sm); color: var(--text-muted); }
.calc-note { font-size: var(--text-xs); color: var(--text-muted); padding-top: 0.9rem; border-top: var(--hairline); }

/* Pricing page: comparison table */

/* Pricing page: what is a token */
.tokens-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; }
.tokens-copy { grid-column: 1 / span 6; display: grid; gap: 1.5rem; align-content: start; }
.tokens-copy .section-label { display: grid; gap: 0.9rem; }
.tokens-title { font-size: var(--text-3xl); line-height: 1.02; letter-spacing: -0.03em; font-weight: 340; }
.tokens-prose { font-size: var(--text-base); color: var(--text-muted); }
.tokens-prose strong { color: var(--text); }
.tokens-card { grid-column: 8 / span 5; margin: 0; }
.tokens-card .caps { color: var(--text-muted); }
.token-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; font-family: var(--font-mono); font-size: var(--text-sm); }
.token-chip { white-space: pre; padding: 0.2rem 0.35rem; border-radius: var(--radius-1); background: var(--tape-bg); border: 1px solid var(--tape-edge); box-shadow: inset 0 -2px 0 var(--tape-fill); }
.token-chip:nth-child(3n + 2) { background: var(--surface-2); border-color: var(--border); box-shadow: inset 0 -2px 0 var(--border-strong); }

/* ==== 7. FAQ + closing band ==== */
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
.faq-intro { grid-column: 1 / span 4; display: grid; gap: 1.25rem; align-content: start; align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }
.faq-intro .section-label { display: grid; gap: 0.9rem; }
.faq-intro h2 { font-size: var(--text-3xl); line-height: 1.02; letter-spacing: -0.03em; font-weight: 340; }
.faq-intro p { color: var(--text-muted); }
.faq { grid-column: 6 / span 7; min-width: 0; }

.closing { position: relative; overflow: hidden; background: var(--surface); color: var(--text); }
.closing-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: end; padding-block: clamp(4.5rem, 3rem + 5vw, 8rem); }
.closing-title { grid-column: 1 / span 8; font-size: clamp(2.5rem, 1rem + 5vw, 5.5rem); line-height: 0.98; letter-spacing: -0.035em; font-weight: 320; font-variation-settings: "opsz" var(--display-opsz); }
.closing-title em { color: var(--accent); }
.closing-side { grid-column: 9 / span 4; display: grid; gap: 1.5rem; }
.closing-side p { color: var(--text-muted); }
/* Side column (above 900 px): when the buttons wrap (French at 1440, both languages near 1000 px) each takes the column's
   width, one deliberate stack instead of two ragged widths; on one row they share it. Phones: see 640 px. */
@media (min-width: 901px) {
  .closing-side .cluster .btn { flex: 1 1 auto; justify-content: center; }
}
.closing-ruler { position: absolute; left: 0; right: 0; bottom: 0; border-top: 0; border-bottom: 1px solid var(--rule); background-position: 0 100%; opacity: 0.45; }

/* ==== 8. Request form ==== */
.rq { padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
.rq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: start; }
.rq-main { min-width: 0; }
.rq-error-list { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.rq-error-list a { color: inherit; }
.rq-form { position: relative; padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem); display: grid; gap: 2.5rem; }
.rq-form.is-stepped { gap: 0; }
.rq-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.rq-step { display: grid; gap: 1.5rem; min-width: 0; }
.rq-step + .rq-step { padding-top: 2.5rem; border-top: var(--hairline); }
.rq-form.is-stepped .rq-step + .rq-step { padding-top: 0; border-top: 0; }
.rq-step-head { display: flex; align-items: flex-start; gap: 1rem; }
.rq-step-n { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--rule); font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1; }
.rq-step-title { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem); line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; }
.rq-step-title:focus { outline: none; }
.rq-step-head p { color: var(--text-muted); font-size: var(--text-sm); margin-top: 0.3rem; }
.rq-fields { display: grid; gap: 1.5rem; }
.rq-task { display: grid; gap: 0.35rem; }
.rq-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); text-align: right; min-height: 1.2em; }
.rq-count.is-ok { color: var(--success); }
.rq-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.rq-tool { align-items: center; padding: 0.7rem 0.8rem; border: 1px solid var(--border-input); border-radius: var(--radius-2); background: var(--surface); transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.rq-tool input { margin-top: 0; }
.rq-tool:hover { border-color: var(--text-muted); }
.rq-tool:has(input:checked) { border-color: var(--text); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--text); }
.rq-tool:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rq-privacy { flex-basis: 100%; display: flex; gap: 0.5rem; align-items: flex-start; }
.rq-privacy .icon { --icon-size: 1rem; flex: none; margin-top: 0.15rem; color: var(--text-subtle); }
.rq-review .rq-privacy { margin-top: -0.75rem; justify-content: flex-end; text-align: right; }
.rq-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: var(--hairline); }
.rq-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding-top: 1.5rem; border-top: var(--hairline); }
.rq-review-note { margin-top: -0.5rem; text-align: right; }
.rq-review-groups { display: grid; gap: 1rem; }
.rq-review-group { border: var(--hairline); border-radius: var(--radius-3); background: var(--bg); padding: 0.9rem 1.1rem 0.4rem; }
.rq-review-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 0.4rem; border-bottom: var(--hairline-ink); }
.rq-review-title { font-size: 1.125rem; font-weight: 460; letter-spacing: -0.01em; }
.rq-review-dl { margin: 0; display: grid; }
.rq-review-dl > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 0.65rem 0; border-bottom: var(--hairline); font-size: var(--text-sm); }
.rq-review-dl > div:last-child { border-bottom: 0; }
.rq-review-dl dt { color: var(--text-muted); }
.rq-review-dl dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* Progress (JavaScript only): ui.stepper */
.rq-progress { margin-bottom: 1.25rem; }
.rq-progress[hidden] { display: none; }

.rq-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1rem; }
.rq-aside-title { color: var(--text-muted); }
.rq-contact { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0 0.25rem; }
.rq-contact .icon { --icon-size: 1rem; margin-top: 0.15rem; }

/* ==== 9. Thanks, status, legal, errors ==== */
.thanks-hero { position: relative; }
.thanks-mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1.5rem; border-radius: 50%; background: var(--success-soft); color: var(--success); box-shadow: 0 0 0 6px color-mix(in oklab, var(--success-soft) 45%, transparent); }
.thanks-mark .icon { stroke-width: 2.2; }
.thanks-processing { margin-top: 1.25rem; }
.thanks { padding-top: 0; padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
.thanks-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.thanks-card .card-body { padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem); display: grid; gap: 1.5rem; }
.thanks-steps { list-style: none; margin: 0; padding: 0; }
.thanks-step { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 0 1.1rem; padding-bottom: 1.6rem; }
.thanks-step:last-child { padding-bottom: 0; }
.thanks-step::before { content: ""; position: absolute; left: calc(1.25rem - 0.5px); top: 2.6rem; bottom: 0.3rem; width: 1px; background: var(--border-strong); }
.thanks-step:last-child::before { display: none; }
.thanks-n { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); font-family: var(--font-display); font-style: italic; font-size: 1.2rem; }
.thanks-step.is-now .thanks-n { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--accent-contrast); }
.thanks-body h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 620; letter-spacing: -0.01em; line-height: 1.3; padding-top: 0.45rem; }
.thanks-body p { color: var(--text-muted); font-size: var(--text-sm); margin-top: 0.3rem; max-width: 34rem; }
.thanks-when { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); padding-top: 0.6rem; text-align: right; white-space: nowrap; }
.thanks-step.is-now .thanks-when { color: var(--accent); }
.thanks-aside { display: grid; gap: 0.75rem; }
.thanks-aside-title { color: var(--text-muted); margin-bottom: 0.25rem; }
.thanks-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; }
.thanks-link strong { display: block; font-weight: 620; }
.thanks-link span span { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-top: 0.15rem; }
.thanks-link-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-2); border: var(--hairline); background: var(--bg); }
.thanks-link .thanks-link-arrow { color: var(--text-muted); transition: transform var(--dur-2) var(--ease-out); }
.thanks-link:hover .thanks-link-arrow { transform: translateX(3px); color: var(--accent); }
.thanks-contact { padding: 0.25rem 0.25rem 0; }

/* Status */
.status-page { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.status-wrap { display: grid; gap: 1.5rem; max-width: calc(52rem + 2 * var(--gutter)); }
.status-wrap .eyebrow { margin-bottom: 0; }
.status-banner { --st: var(--success); --st-soft: var(--success-soft); display: flex; align-items: center; gap: 1.5rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); background: var(--surface); border: var(--hairline); border-left: 4px solid var(--st); border-radius: var(--radius-3); box-shadow: var(--shadow-2); }
.status-banner.is-degraded { --st: var(--warning); --st-soft: var(--warning-soft); }
.status-light { position: relative; flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--st-soft); }
.status-light i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--st); }
.status-light i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--st); opacity: 0; animation: wo-ping 2.6s var(--ease-out) infinite; }
.status-title { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.05; letter-spacing: -0.028em; font-weight: 380; }
.status-text p { margin-top: 0.4rem; color: var(--text-muted); }
.status-list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline-ink); }
.status-list > li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: var(--hairline); }
.status-name { display: grid; gap: 0.1rem; flex: 1 1 0; min-width: 0; }
.status-list > li > .badge { flex: none; }
.status-name strong { font-weight: 620; }
.status-name span { font-size: var(--text-sm); color: var(--text-muted); }
.status-meta { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--text-sm); color: var(--text-muted); }
.status-meta .icon { --icon-size: 1rem; margin-top: 0.15rem; }
.status-help { padding-top: 0; padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
.status-help .container { max-width: calc(52rem + 2 * var(--gutter)); }
.status-help-card { display: grid; gap: 1.25rem; }
.status-how p { margin-top: 0.4rem; max-width: 46rem; }
.status-codes { display: grid; gap: 0.5rem; }
.status-codes-list { margin: 0.5rem 0 0; display: grid; border-top: var(--hairline); }
.status-codes-list > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: 0.75rem 0; border-bottom: var(--hairline); }
.status-codes-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.status-codes-list dt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); padding-top: 0.05rem; }
.status-codes-list dd { margin: 0; display: grid; gap: 0.15rem; font-size: var(--text-sm); color: var(--text-muted); }
.status-codes-list strong { color: var(--text); font-weight: 620; }
.status-help-card p { margin-top: 0.4rem; }
/* Labels may wrap on the narrowest phones; the docs link then stays a left-aligned text link (arrow after the text),
   like "Email support" above it, not a centred full-width block. */
.status-help-card .btn { white-space: normal; max-width: 100%; }
.status-help-card .btn-ghost { justify-content: flex-start; text-align: start; }

/* Legal */
.legal-head { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0; display: grid; gap: 1.25rem; }
.legal-head .eyebrow { margin-bottom: 0; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; font-size: var(--text-sm); color: var(--text-muted); }
.legal-meta > span + span::before { content: "\00B7"; margin-right: 0.75rem; color: var(--text-subtle); }
.legal-tabs { margin-top: 0.75rem; flex-wrap: wrap; }
.legal-body { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.legal-prose { max-width: 44rem; }
.legal-prose section > * + * { margin-top: 1em; }
.legal-prose section > h2 + *, .legal-prose section > h3 + * { margin-top: 0.6em; }
.legal-prose h2 { font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem); margin-top: 1.6em; }
.legal-prose section:first-of-type h2 { margin-top: 1.6em; }
.legal-prose h3 { font-size: 1.1875rem; font-family: var(--font-sans); font-weight: 620; letter-spacing: -0.01em; margin-top: 1.5em; }
.legal-lead { font-size: var(--text-lg); line-height: 1.55; color: var(--text); padding: 1.25rem 1.4rem; background: var(--surface); border: var(--hairline); border-left: 3px solid var(--accent-fill); border-radius: var(--radius-2); }
.legal-prose table { margin-top: 1rem; }
.legal-dl { display: grid; margin: 0; border-top: var(--hairline-ink); font-size: var(--text-base); }
.legal-dl > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-bottom: var(--hairline); }
.legal-dl dt { color: var(--text-muted); }
.legal-dl dd { margin: 0; overflow-wrap: anywhere; }
.legal-dl .legal-missing { display: inline-block; padding: 0.1rem 0.5rem; }
.legal-missing { padding: 0.7rem 1rem; border-radius: var(--radius-2); background: var(--warning-soft); color: var(--warning); font-size: var(--text-sm); }
span.legal-missing, .legal-dl span.legal-missing { padding: 0.1rem 0.4rem; }  /* the inline placeholder of _legal.html */

/* Errors */
.err-page { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.err-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: center; }
.err-copy { display: grid; gap: 1.25rem; align-content: start; }
.err-copy .eyebrow, .err-copy .lead { margin: 0; }
.err-actions { margin-top: 0.5rem; }
.err-measure { display: grid; gap: 0.5rem; justify-items: end; color: var(--text); }
.err-code { padding-right: 0.08em; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(6rem, 3rem + 12vw, 13rem); line-height: 0.85; letter-spacing: -0.05em; color: var(--border-strong); font-variation-settings: "opsz" var(--display-opsz); }
.err-measure .ruler { width: 100%; }
.err-links { padding-top: 0; padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
.err-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.err-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 1rem 1.1rem; height: 100%; }
.err-link strong { display: block; font-weight: 620; }
.err-link span span { display: block; font-size: var(--text-sm); color: var(--text-muted); }
.err-link-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-2); border: var(--hairline); background: var(--bg); }
.err-link .err-arrow { color: var(--text-muted); transition: transform var(--dur-2) var(--ease-out); }
.err-link:hover .err-arrow { transform: translateX(3px); color: var(--accent); }

/* ==== 10. Responsive ==== */
@media (max-width: 1100px) {
  .hero-copy { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 3rem; align-items: start; }
  .hero-lead, .hero-cta { grid-column: 1; }
  .hero-facts { grid-column: 2; grid-row: 1 / span 2; margin-top: 0.4rem; }
  .hero-visual { grid-column: 1 / -1; margin-top: 1.5rem; }
  .plan-grid { grid-template-columns: repeat(min(var(--plans, 4), 2), minmax(0, 1fr)); }
  .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integ-grid, .tokens-grid { grid-template-columns: minmax(0, 1fr); }
  .integ-copy, .integ-code { grid-column: 1 / -1; }
  .plan-enterprise { grid-template-columns: minmax(0, 1fr) auto; }
  .plan-enterprise-list { grid-column: 1 / -1; grid-row: 2; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .rq-grid, .thanks-grid { grid-template-columns: minmax(0, 1fr); }
  .err-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rq-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
  .tokens-copy, .tokens-card { grid-column: 1 / -1; }
  .bex-grid { grid-template-columns: minmax(0, 1fr); }
  .bex-copy, .bex-card { grid-column: 1 / -1; }
  .ladder { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hero-issue { display: none; }
  .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; }
  .how-ruler { display: none; }
  .how-step { padding-top: 1.25rem; }
  .how-step::before { top: 0; height: 2px; width: 2.5rem; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-intro, .faq { grid-column: 1; position: static; }
  .closing-inner { grid-template-columns: minmax(0, 1fr); }
  .closing-title, .closing-side { grid-column: 1; }
  .ex-feature { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hero-issue { display: none; }
  .hero-l2 { padding-left: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero-copy, .hero-visual { grid-column: 1; }
  .hero-copy { display: block; }
  .hero-visual { margin-top: 0.5rem; }
  .hero-facts { margin-top: var(--space-7); }
  .hero-facts > div { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .hero-cta .btn { flex: 1 1 100%; }
  .wo-head { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding-inline: 1.1rem; }
  .wo-status { align-self: stretch; justify-content: space-between; }
  .wo-body { grid-template-columns: minmax(0, 1fr); }
  .wo-queue { border-right: 0; border-bottom: var(--hairline); }
  .wo-queue > li { padding-inline: 1.1rem; grid-template-columns: 1.1rem minmax(0, 1fr) auto; }
  .wo-n { display: none; }
  .wo-figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding-inline: 1.1rem; }
  .wo-fig + .wo-fig { padding-top: 0; border-top: 0; padding-left: 1rem; border-left: var(--hairline); }
  .wo-eq { display: none; }
  .wo-tape { padding-inline: 1.1rem; }
  .wo-foot { flex-direction: column; gap: 0.25rem; }
  .how-steps { grid-template-columns: minmax(0, 1fr); }
  .ex-grid { grid-template-columns: minmax(0, 1fr); }
  .why-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .rate-tape, .rate-dir { display: none; }
  .rate-head { margin-bottom: 0.75rem; }
  .rate-list { display: block; }
  .rate { margin-bottom: 2rem; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-tagline, .plan-card.is-compact .plan-tagline { min-height: 0; }
  .plan-enterprise { grid-template-columns: minmax(0, 1fr); }
  .plan-enterprise-list { grid-row: auto; flex-direction: column; }
  .ladder-steps { grid-template-columns: minmax(0, 1fr); }
  .ladder-step { border-top-width: 0; border-left: 3px solid var(--text); padding: 0.55rem 0 0.55rem 0.9rem; }
  .ladder-step.is-highlight { border-left-color: var(--accent-fill); }
  .ladder-step + .ladder-step { margin-top: 0.5rem; }
  .status-codes-list > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .closing .cluster .btn { flex: 1 1 100%; }
  .rq-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .err-grid { grid-template-columns: minmax(0, 1fr); }
  .err-measure { display: none; }
  .err-list { grid-template-columns: minmax(0, 1fr); }
  .status-banner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .legal-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .legal-meta { flex-direction: column; }
  .legal-meta > span + span::before { display: none; }
  .thanks-step { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .thanks-when { grid-column: 2; grid-row: 1; text-align: left; padding-top: 0; order: -1; white-space: normal; }
  .thanks-body { grid-column: 2; }
  /* A long label (FR "Continuer vers le volume et le paiement", 344 px on one line) wraps inside the button instead of
     pushing the form card past a 320 to 375 px screen (RF-6). */
  .rq-nav .btn-primary { flex: 1 1 auto; min-width: 0; max-width: 100%; white-space: normal; padding-block: 0.55rem; }
  .rq-review-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .rq-review-note { text-align: left; }
  .rq-review .rq-privacy { justify-content: flex-start; text-align: left; }
}

/* ==== 12. Buy it once (v3): /own, the #own card on /pricing, the home strip, the request form switch ==== */
/* The "Buy it once" card: a plan card (same name, price, specs and features blocks) with a starting price. */
.plan-own { grid-template-rows: auto 1fr auto; }
.plan-own-main { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.plan-from { align-self: baseline; font-size: 0.8125rem; color: var(--text-muted); }
/* "From <price> excl. VAT" on one line (« À partir de <prix> HT »: HT right after the amount), "one payment" below. */
.plan-own .plan-vat { display: inline; align-self: baseline; font-size: 0.8125rem; color: var(--text-muted); }
.plan-own .plan-once { flex-basis: 100%; }
.plan-own-note { font-size: var(--text-sm); color: var(--text-muted); }
.plan-own .plan-detail { align-content: start; }
.plan-own.is-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "main detail" "cta detail"; gap: 1.25rem 2.5rem; padding: 2rem 2rem 1.75rem; }
.plan-own.is-wide .plan-own-main { grid-area: main; }
.plan-own.is-wide .plan-detail { grid-area: detail; padding-left: 2.5rem; border-left: var(--hairline); }
.plan-own.is-wide > .btn { grid-area: cta; align-self: end; }
.plan-own.is-wide .plan-features { border-top: 0; padding-top: 0.25rem; }

/* /pricing: the row under the plans (anchor #own) */
.own-row { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: 1.5rem; border-top: var(--hairline-ink); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem 2rem; align-items: start; }
.own-row-head { display: grid; gap: 0.9rem; align-content: start; }
.own-row-kicker { margin: 0; }
.own-row-title { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem); line-height: 1.06; letter-spacing: -0.025em; font-weight: 360; text-wrap: balance; }
.own-row-title em { display: block; }
.own-row-head p:not(.eyebrow) { color: var(--text-muted); font-size: var(--text-sm); max-width: 30rem; }
.page-hero-own { margin-top: 1rem; display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--text-sm); color: var(--text-muted); }
.page-hero-own .icon { --icon-size: 1rem; flex: none; margin-top: 0.15rem; color: var(--accent); }

/* /own hero: copy beside the card */
.own-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; }
.own-hero-copy { grid-column: 1 / span 7; min-width: 0; }
.own-hero-copy .display-2 { max-width: 14ch; }
.own-hero-card { grid-column: 8 / span 5; min-width: 0; }
.own-hero .hero-cta .btn { white-space: normal; text-align: center; }  /* French labels wrap at 320 px */
.own-hero-card .plan-own { box-shadow: var(--shadow-3); }
.own-notice { margin-bottom: 1.5rem; max-width: 36rem; }  /* back from Stripe Checkout without paying (?payment=canceled) */

/* /own: the two ways side by side (a table; stacked rows with labels on phones) */
.ways-wrap { margin-top: 0.5rem; }
.ways { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ways th, .ways td { text-align: left; vertical-align: top; padding: 1rem 1.4rem; border-bottom: var(--hairline); font-size: 0.975rem; line-height: 1.5; }
.ways .ways-corner { width: 22%; border-bottom: var(--hairline-ink); }
.ways tbody th { padding-left: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); padding-top: 1.2rem; }
.ways tbody td { color: var(--text-muted); }
.ways .is-own { background: var(--surface-raised); border-left: var(--hairline); border-right: var(--hairline); color: var(--text); }
.ways .way-head { padding: 1.4rem 1.4rem 1.25rem; border-bottom: var(--hairline-ink); font-weight: 400; }
.way-head > * { display: block; }
.way-head .caps { color: var(--text-muted); }
.way-title { margin-top: 0.45rem; font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 0.9vw, 2.25rem); line-height: 1.05; font-weight: 380; letter-spacing: -0.025em; font-variation-settings: "opsz" var(--display-opsz); }
.way-price { margin-top: 0.55rem; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); }
.ways .way-head.is-own { position: relative; border-top: var(--hairline); border-radius: var(--radius-3) var(--radius-3) 0 0; }
.way-head.is-own::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--accent-fill); border-radius: var(--radius-3) var(--radius-3) 0 0; }
.way-head.is-own .caps, .way-head.is-own .way-price { color: var(--accent); }
.ways tfoot td { border-bottom: 0; padding-top: 1.25rem; padding-bottom: 1.4rem; }
.ways tfoot .ways-corner { border-bottom: 0; }
.ways tfoot td.is-own { border-bottom: var(--hairline); border-radius: 0 0 var(--radius-3) var(--radius-3); }
.ways tfoot .btn { white-space: normal; }

/* /own: five steps (the home "how" styles, five columns) */
.how-steps.how-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem 1.5rem; }
.how-steps-5 .how-step h3 { font-size: 1.375rem; }
.how-steps-5 .how-step p { font-size: 0.9375rem; }

/* /own: deliverables (the handover checklist) */
.deliv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; }
.deliv-copy { grid-column: 1 / span 5; display: grid; gap: 1.5rem; align-content: start; }
.deliv-copy .section-label, .price-copy .section-label { display: grid; gap: 0.9rem; }
.deliv-title, .price-title { font-size: var(--text-3xl); line-height: 1.02; letter-spacing: -0.03em; font-weight: 340; text-wrap: balance; }
.deliv-lead, .price-lead { color: var(--text-muted); max-width: 34rem; }
.deliv-rights { display: grid; gap: 0.6rem; justify-items: start; padding: 1.1rem 1.25rem; background: var(--bg); border: var(--hairline); border-left: 3px solid var(--accent-fill); border-radius: var(--radius-2); font-size: var(--text-sm); }
.deliv-rights p { color: var(--text-muted); }
.deliv-rights strong { color: var(--text); font-weight: 620; }
.deliv-card { grid-column: 7 / span 6; margin: 0; box-shadow: var(--shadow-2); }
.deliv-card .card-body { padding: 1.4rem 1.6rem 0.6rem; }
.deliv-card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 0.9rem; border-bottom: var(--hairline-ink); }
.deliv-card-head .caps { color: var(--text-muted); }
.deliv-list { list-style: none; margin: 0; padding: 0; }
.deliv-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1rem 0; }
.deliv-item + .deliv-item { border-top: 1px dashed var(--border); }
.deliv-icon, .price-option-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: var(--hairline); border-radius: var(--radius-2); background: var(--bg); }
.deliv-item strong { display: block; font-weight: 620; line-height: 1.35; padding-top: 0.1rem; }
.deliv-item p { margin-top: 0.15rem; font-size: var(--text-sm); color: var(--text-muted); }
.deliv-check { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-top: 0.55rem; border-radius: 50%; background: var(--success-soft); color: var(--success); }
.deliv-check .icon { --icon-size: 0.75rem; stroke-width: 2.6; }

/* /own: price and options */
.price-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: start; }
.price-copy { grid-column: 1 / span 6; display: grid; gap: 1.5rem; align-content: start; }
.price-factors { display: grid; gap: 0.75rem; padding-top: 1.25rem; border-top: var(--hairline-ink); }
.price-factors .caps { color: var(--text-muted); }
.price-factors .dim-list { font-size: 0.975rem; }
.price-options { grid-column: 8 / span 5; display: grid; gap: 1rem; }
.price-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.4rem 1.5rem; background: var(--surface); border: var(--hairline); border-radius: var(--radius-3); }
.price-option .caps { color: var(--text-muted); }
.price-option h3 { margin-top: 0.3rem; font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.015em; font-weight: 420; }
.price-option p:not(.caps) { margin-top: 0.4rem; font-size: var(--text-sm); color: var(--text-muted); }
.price-option .link-arrow { margin-top: 0.75rem; font-size: var(--text-sm); }

/* Home: two ways to buy (end of "How it works") */
.ways-strip { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: 1.5rem; border-top: var(--hairline-ink); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: 1.25rem 2rem; align-items: stretch; }
.ways-strip-title { font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.02em; font-weight: 420; }
.ways-strip-head p { margin-top: 0.6rem; font-size: var(--text-sm); color: var(--text-muted); max-width: 22rem; }
.ways-strip-item { position: relative; display: grid; gap: 0.4rem; align-content: start; padding: 1.15rem 3rem 1.25rem 1.3rem; background: var(--surface); border: var(--hairline); border-radius: var(--radius-3); color: inherit; text-decoration: none; transition: border-color var(--dur-2) var(--ease-out); }
.ways-strip-item:hover { border-color: var(--border-strong); }
.ways-strip-item.is-own::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--accent-fill); border-radius: var(--radius-3) var(--radius-3) 0 0; }
.ways-strip-item .caps { color: var(--text-muted); }
.ways-strip-item strong { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.15; font-weight: 420; letter-spacing: -0.015em; text-wrap: balance; }
.ways-strip-meta { font-family: var(--font-mono); font-size: var(--text-sm); }
.ways-strip-item.is-own .ways-strip-meta, .ways-strip-item.is-own .caps { color: var(--accent); }
.ways-strip-arrow { position: absolute; right: 1.15rem; top: 1.2rem; color: var(--text-muted); transition: transform var(--dur-2) var(--ease-out); }
.ways-strip-item:hover .ways-strip-arrow { transform: translateX(3px); color: var(--accent); }

/* Request form: the way to buy. The server marks the choice on load (.rq-grid[data-mode]); :has() follows the radio
   live without JavaScript (site.js updates data-mode for browsers without :has()). The plan question and the usage
   "next steps" hide for "Buy it once"; its note and next steps show instead. */
.rq-once-note { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.1rem; background: var(--surface-raised); border: var(--hairline); border-left: 3px solid var(--accent-fill); border-radius: var(--radius-2); font-size: var(--text-sm); color: var(--text-muted); }
.rq-once-note strong { color: var(--text); font-weight: 620; }
.rq-once-note > .icon { --icon-size: 1.1rem; flex: none; margin-top: 0.1rem; color: var(--accent); }
.rq-grid[data-mode="one_time"] .rq-if-usage, .rq-grid:not([data-mode="one_time"]) .rq-if-once { display: none; }
/* "What happens next" beside the form: pay per token (.rq-when-usage) only once "usage" is chosen; neutral steps
   (.rq-when-open) while the choice is open ("Not sure yet" or nothing chosen); "Buy it once" uses .rq-if-once. */
.rq-grid:not([data-mode="usage"]) .rq-when-usage { display: none; }
.rq-grid[data-mode="usage"] .rq-when-open, .rq-grid[data-mode="one_time"] .rq-when-open { display: none; }
.rq-grid:has(input[name="purchase_mode"][value="usage"]:checked) .rq-when-usage { display: block; }
.rq-grid:has(input[name="purchase_mode"][value="usage"]:checked) .rq-when-open { display: none; }
.rq-grid:has(input[name="purchase_mode"]:not([value="usage"]):checked) .rq-when-usage { display: none; }
.rq-grid:has(input[name="purchase_mode"][value="unsure"]:checked) .rq-when-open { display: block; }
.rq-grid:has(input[name="purchase_mode"][value="one_time"]:checked) .rq-when-open { display: none; }
.rq-grid:has(input[name="purchase_mode"][value="one_time"]:checked) .rq-if-usage { display: none; }
.rq-grid:has(input[name="purchase_mode"][value="one_time"]:checked) .rq-if-once { display: block; }
.rq-grid:has(input[name="purchase_mode"][value="one_time"]:checked) .rq-once-note { display: flex; }
.rq-grid:has(input[name="purchase_mode"]:not([value="one_time"]):checked) .rq-if-once { display: none; }
.rq-grid:has(input[name="purchase_mode"]:not([value="one_time"]):checked) .rq-if-usage { display: block; }
/* The ways to buy carry longer prices than the plan cards ("From €12.00 per 1M tokens"): let them wrap. */
.rq-mode .radio-card { min-width: 0; }
.rq-mode .radio-card-meta { white-space: normal; }
.rq-mode .legend .req { color: var(--accent); font-weight: 600; margin-left: 0.1rem; }  /* same mark as .label .req */
.rq-aside-mode { margin-left: 0.4rem; color: var(--accent); }
.rq-next .link-arrow { justify-self: start; }

/* /purchase/thanks: a tip card beside the links */
.hero-facts dd a { white-space: nowrap; }  /* the "It's yours" link of the Buy it once fact stays whole */
.thanks-tip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; }
.thanks-tip strong { display: block; font-weight: 620; }
.thanks-tip span span { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-top: 0.15rem; }

@media (max-width: 1100px) {
  .own-row { grid-template-columns: minmax(0, 1fr); }
  .own-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .own-hero-copy, .own-hero-card { grid-column: 1 / -1; }
  .own-hero-card { max-width: 34rem; }
  .how-steps.how-steps-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; }
  .how-ruler:has(+ .how-steps-5) { display: none; }
  .how-steps-5 .how-step { padding-top: 1.25rem; }
  .how-steps-5 .how-step::before { top: 0; height: 2px; width: 2.5rem; }
  .deliv-grid, .price-grid { grid-template-columns: minmax(0, 1fr); }
  .deliv-copy, .deliv-card, .price-copy, .price-options { grid-column: 1 / -1; }
  .ways-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ways-strip-head { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .plan-own.is-wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "main" "detail" "cta"; padding: 1.75rem 1.5rem 1.5rem; }
  .plan-own.is-wide .plan-detail { padding-left: 0; border-left: 0; }
  .plan-own.is-wide .plan-features { border-top: var(--hairline); padding-top: 0.9rem; }
  .how-steps.how-steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .how-steps.how-steps-5 { grid-template-columns: minmax(0, 1fr); }
  .ways-strip { grid-template-columns: minmax(0, 1fr); }
  /* The comparison: the two offers side by side as a legend, then each row with both answers labelled. */
  .ways, .ways tbody, .ways tfoot, .ways tr, .ways th, .ways td { display: block; width: auto; }
  .ways thead { display: block; }
  .ways thead tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }
  .ways .ways-corner { display: none; }
  .ways .way-head, .ways .way-head.is-own { padding: 1rem; border: var(--hairline); border-radius: var(--radius-3); background: var(--surface-raised); }
  .way-title { font-size: 1.5rem; }
  .way-price { font-size: var(--text-xs); }
  .ways tbody tr { padding: 1rem 0; border-bottom: var(--hairline); }
  .ways tbody th { padding: 0 0 0.5rem; border: 0; }
  .ways tbody td, .ways tbody td.is-own { display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: 0.75rem; padding: 0.3rem 0; border: 0; background: none; font-size: var(--text-sm); }
  .ways tbody td::before { content: attr(data-label); font-weight: 620; color: var(--text); }
  .ways tbody td.is-own::before { color: var(--accent); }
  .ways tfoot tr { display: grid; gap: 0.6rem; padding-top: 1.25rem; }
  .ways tfoot td, .ways tfoot td.is-own { padding: 0; border: 0; background: none; }
  .ways tfoot td.is-own { order: -1; }
  .deliv-card .card-body { padding-inline: 1.1rem; }
  .deliv-item { gap: 0.8rem; }
  .price-option { padding: 1.2rem; }
}

/* ==== 13. Generated pages (T23: templates/site/sector.html, data in sector-kits/pages) ==== */
.pg-hero { padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.pg-hero-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem var(--space-4); margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.pg-updated { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.pg-updated .icon { color: var(--text-subtle); }
.pg-title { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem); line-height: 1.02; font-weight: 360; letter-spacing: -0.03em; max-width: 21ch; }
.pg-title em { font-weight: 340; }
.pg-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 4rem; margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem); align-items: start; }
.pg-hero-grid.has-points { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.pg-lead { max-width: 40rem; }
.pg-cta-detail { margin-top: 0.85rem; font-size: var(--text-sm); color: var(--text-muted); max-width: 34rem; }
.pg-points { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--hairline-ink); }
.pg-points > li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.95rem 0; border-bottom: var(--hairline); font-size: var(--text-base); line-height: 1.45; }
.pg-points-icon { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: -0.05rem; border-radius: 50%; background: var(--success-soft); color: var(--success); }
.pg-points-icon .icon { stroke-width: 2.6; }
.pg-notice { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); padding: 0.9rem 1.1rem; max-width: 52rem; border: var(--hairline); border-left: 2px solid var(--accent-fill); border-radius: var(--radius-2); background: var(--surface); font-size: var(--text-sm); color: var(--text-muted); }
.pg-notice .icon, .pg-closing-note .icon { flex: none; margin-top: 0.15rem; color: var(--accent); }

/* Sections: text statements and lists sit in the section-head columns, with less air than a full section. */
.pg-texte, .pg-liste { padding-block: clamp(3rem, 2rem + 3.5vw, 5.5rem); }
.pg-statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.pg-statement > .section-label { grid-column: 1 / span 4; padding-top: 0.6rem; }
.pg-statement-body { grid-column: 5 / span 8; display: grid; gap: 1.1rem; align-content: start; }
.pg-statement-body > h2 { font-size: var(--text-2xl); line-height: 1.08; letter-spacing: -0.025em; font-weight: 380; }
.pg-statement-text { font-size: var(--text-lg); line-height: 1.55; color: var(--text-muted); max-width: 44rem; }
.pg-note { font-size: var(--text-sm); color: var(--text-muted); }
.pg-more { margin-top: 1.5rem; }
.pg-statement-body .pg-more { margin-top: 0.25rem; }
.pg-list { max-width: 44rem; }
.pg-kv { margin: 0.25rem 0 0; display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); column-gap: 1.5rem; border-top: var(--hairline-ink); max-width: 50rem; }
.pg-kv > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 0.85rem 0; border-bottom: var(--hairline); }
.pg-kv dt { font-weight: 600; font-size: var(--text-sm); padding-top: 0.1rem; }
.pg-kv dd { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.pg-kv > .is-plain dd { grid-column: 1 / -1; color: var(--text); }

.pg-cards, .pg-prices, .pg-tiles { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 1.25rem; }
.pg-card { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.6rem 1.6rem 1.5rem; background: var(--bg); border: var(--hairline); border-radius: var(--radius-3); min-width: 0; }
.band .pg-card, .band .pg-price, .band .pg-tile, .band .pg-mail, .band .pg-qa, .band .pg-ex-table, .band .pg-fact { background: var(--bg); }
.pg-card-n { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--accent); }
.pg-card h3, .pg-tile h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 420; }
.pg-card p, .pg-tile p { color: var(--text-muted); font-size: 0.9625rem; line-height: 1.6; }
.pg-card-link { margin-top: auto; padding-top: 0.4rem; }

.pg-how { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); }
.pg-steps { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--hairline-ink); }
.pg-step { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) 0; border-bottom: var(--hairline); }
.pg-step-n { grid-column: 1 / span 4; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 0.8; letter-spacing: -0.04em; color: var(--accent); font-variation-settings: "opsz" var(--display-opsz); }
.pg-step-body { grid-column: 5 / span 8; display: grid; gap: 0.7rem; }
.pg-step-body h3 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 420; }
.pg-step-body p { color: var(--text-muted); line-height: 1.65; max-width: 44rem; }

.pg-price { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.75rem 1.6rem 1.6rem; border: var(--hairline); border-radius: var(--radius-3); background: var(--surface); min-width: 0; }
.pg-price.is-first { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.pg-price-name { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.pg-price-amt { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 380; text-wrap: balance; }
.pg-price-amt b { font-weight: 480; white-space: nowrap; }
.pg-price-text { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.pg-price-link { margin-top: auto; padding-top: 0.3rem; }
.pg-fine { margin-top: 1.25rem; font-size: var(--text-xs); color: var(--text-muted); }

/* The worked example: a missing-documents tracker in, drafts and a flagged case out (fictional data). */
.pg-ex-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-bottom: 1.5rem; font-size: var(--text-sm); color: var(--text-muted); }
.pg-ex { display: grid; gap: 1.25rem; }
.pg-ex-table { margin: 0; padding: 1.25rem 1.25rem 0.5rem; border: var(--hairline); border-radius: var(--radius-3); background: var(--surface); min-width: 0; }
.pg-ex-table figcaption { color: var(--text-muted); margin-bottom: 0.75rem; }
.pg-table-wrap { overflow-x: auto; }
.pg-table-wrap:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pg-ex-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.pg-ex-table th, .pg-ex-table td { text-align: left; vertical-align: top; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: var(--hairline); }
.pg-ex-table thead th { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); border-bottom: var(--hairline-ink); white-space: nowrap; }
.pg-ex-table tbody th { font-weight: 600; }
.pg-ex-table tbody tr:last-child > * { border-bottom: 0; }
.pg-ex-table tr.is-flagged > * { background: var(--warning-soft); }
.pg-ex-table th:first-child, .pg-ex-table td:first-child { padding-left: 0.7rem; }
.pg-ex-table tr.is-flagged > :first-child { box-shadow: inset 2px 0 0 var(--warning); }
.pg-ex-table td:last-child, .pg-ex-table th:last-child { padding-right: 0; white-space: nowrap; }
/* An inverse band (.inverse re-scopes the tokens: ink on a light page, dimmed paper on a dark one), so its label takes
   the accent of the opposite theme: 6.2:1 light, 4.8:1 dark (PS-05; accent-fill of the page theme gave 3.5 and 2.6). */
.pg-ex-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 1rem; align-items: baseline; padding: 1rem 1.2rem; border-radius: var(--radius-3); }
.pg-ex-result .caps { color: var(--accent); }
.pg-ex-cards { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.pg-mail, .pg-qa { display: grid; gap: 0.85rem; padding: 1.4rem 1.5rem 1.5rem; border: var(--hairline); border-radius: var(--radius-3); background: var(--surface); min-width: 0; }
.pg-mail-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding-bottom: 0.8rem; border-bottom: var(--hairline); color: var(--text-muted); }
.pg-mail-subject { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: baseline; font-weight: 600; }
.pg-mail-subject .caps { color: var(--text-muted); font-weight: 500; }
.pg-mail-body { font-size: 0.9375rem; line-height: 1.65; padding: 1rem 1.1rem; border-radius: var(--radius-2); background: var(--bg); border: 1px dashed var(--border-strong); overflow-wrap: anywhere; }
.band .pg-mail-body { background: var(--surface); }
.pg-qa-q { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.35; letter-spacing: -0.01em; }
.pg-qa-label { color: var(--text-muted); margin-top: 0.25rem; }
.pg-qa-a { font-size: 0.9375rem; line-height: 1.65; }
.pg-qa-abstain { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; margin-top: 0.25rem; padding: 0.85rem 1rem; border-radius: var(--radius-2); background: var(--warning-soft); font-size: var(--text-sm); line-height: 1.55; }
.pg-qa-abstain .icon { color: var(--warning); margin-top: 0.1rem; }
.pg-ex-note { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--text-muted); }

.pg-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.pg-fact { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.5rem 1.25rem; border-top: 2px solid var(--accent-fill); background: var(--surface); border-radius: 0 0 var(--radius-3) var(--radius-3); min-width: 0; }
.pg-fact-text { font-size: 1.0625rem; line-height: 1.55; }
.pg-fact-src { margin-top: auto; display: grid; gap: 0.25rem; font-size: var(--text-xs); color: var(--text-muted); }
.pg-fact-src .caps { color: var(--text-subtle); }
.pg-fact-src .link { overflow-wrap: anywhere; }
.pg-conclusion { margin-top: 1.75rem; max-width: 50rem; font-size: var(--text-md); line-height: 1.6; padding-left: 1.1rem; border-left: 2px solid var(--rule); }

.pg-tile { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.6rem 3.5rem 1.6rem 1.6rem; border: var(--hairline); border-radius: var(--radius-3); background: var(--surface); color: inherit; text-decoration: none; min-width: 0; transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.pg-tile:hover { border-color: var(--border-strong); }
.pg-tile:hover .pg-tile-go { color: var(--accent); transform: translateX(3px); }
.pg-tile-go { position: absolute; top: 1.7rem; right: 1.5rem; transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }

.pg-meta { border-top: var(--hairline); }
.pg-meta-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem var(--space-6); padding-block: 1.75rem 2.25rem; font-size: var(--text-sm); color: var(--text-muted); }
.pg-meta-date { grid-column: 1 / span 4; display: inline-flex; align-items: center; gap: 0.5rem; align-self: start; }
.pg-sources { grid-column: 5 / span 8; display: grid; gap: 0.6rem; }
.pg-sources h2 { font-size: var(--text-xs); color: var(--text-subtle); }
.pg-sources ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.pg-sources .link { overflow-wrap: anywhere; }
.pg-closing-note { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--text-sm); }

@media (max-width: 1100px) {
  .pg-cards, .pg-tiles, .pg-prices { grid-template-columns: repeat(min(var(--n, 3), 2), minmax(0, 1fr)); }
  .pg-facts { grid-template-columns: minmax(0, 1fr); }
  .pg-how { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; }
  .how-ruler:has(+ .pg-how) { display: none; }
  .pg-how .how-step { padding-top: 1.25rem; }
  .pg-how .how-step::before { top: 0; height: 2px; width: 2.5rem; }
  .pg-ex-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pg-hero-grid.has-points { grid-template-columns: minmax(0, 1fr); }
  .pg-statement, .pg-step, .pg-meta-inner { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .pg-statement > .section-label, .pg-statement-body, .pg-step-n, .pg-step-body, .pg-meta-date, .pg-sources { grid-column: 1; }
  .pg-step { gap: 0.75rem; }
}
@media (max-width: 640px) {
  .pg-cards, .pg-tiles, .pg-prices, .pg-how { grid-template-columns: minmax(0, 1fr); }
  .pg-hero .hero-cta .btn { flex: 1 1 100%; }
  .pg-kv { grid-template-columns: minmax(0, 1fr); }
  .pg-kv > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .pg-ex-table { padding-inline: 1rem; }
  /* The tracker reads as one block per client: the labels come from the column heads (data-label). */
  .pg-ex-table table, .pg-ex-table tbody, .pg-ex-table tr, .pg-ex-table th, .pg-ex-table td { display: block; }
  .pg-ex-table thead { display: none; }
  .pg-ex-table tbody tr { padding: 0.8rem 0.7rem; border-bottom: var(--hairline); }
  .pg-ex-table tbody tr:last-child { border-bottom: 0; }
  .pg-ex-table tbody tr > * { border: 0; padding: 0.15rem 0; }
  .pg-ex-table th:first-child, .pg-ex-table td:first-child { padding-left: 0; }
  .pg-ex-table tr.is-flagged { background: var(--warning-soft); box-shadow: inset 2px 0 0 var(--warning); }
  .pg-ex-table tr.is-flagged > *, .pg-ex-table tr.is-flagged > :first-child { background: none; box-shadow: none; }
  .pg-ex-table tbody td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; white-space: normal; }
  .pg-ex-table tbody td::before { content: attr(data-label); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); padding-top: 0.2rem; }
  .pg-ex-table tbody td:empty { display: none; }
  .pg-ex-table tbody td .badge { justify-self: start; }
  .pg-ex-result { grid-template-columns: minmax(0, 1fr); }
  .pg-mail, .pg-qa { padding-inline: 1.1rem; }
  .pg-tile { padding-right: 3rem; }
}

/* ==== 11. Motion ==== */
@media (prefers-reduced-motion: reduce) {
  .wo-live i::after, .is-now > .wo-st::before, .status-light i::after { animation: none; }
}

/* Resources (A08): /fr/ressources/ index and articles. */
.blog-head { max-width: 50rem; }
.blog-head .lead { color: var(--text-muted); }
.blog-list { list-style: none; padding: 0; margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 4rem; display: grid; gap: 0; max-width: 50rem; border-top: var(--hairline-ink); }
.blog-item { padding-block: 1.5rem; border-bottom: var(--hairline); }
.blog-item-title { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; margin: 0.35rem 0 0.5rem; }
.blog-item-title a { color: inherit; text-decoration: none; }
.blog-item-title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.blog-item-text { color: var(--text-muted); max-width: 42rem; margin-bottom: 0.5rem; }
.blog-crumbs { color: var(--text-muted); }
.blog-prose ul, .blog-prose ol { padding-left: 1.25rem; }
.blog-prose li + li { margin-top: 0.4em; }
.blog-cta { margin-top: 3rem; max-width: 44rem; }
.blog-others { margin-top: 2rem; margin-bottom: 4rem; max-width: 44rem; }

/* Owner request of 30 Sept, kept on the restored home: the 24/7 line under the hero lead. */
.hero-247 { margin-top: 0.85rem; font-weight: 600; color: var(--text); max-width: 38rem; }

/* Examples of company needs with their monthly cost (pricing, in place of the volume table; home cards B to F). */
.needs { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: 1.5rem; border-top: var(--hairline-ink); }
.needs > .muted { margin-top: 0.4rem; }
.needs-grid { margin-top: 1.25rem; }
.need-title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 420; margin-top: 0.35rem; }
.needs .receipt { font-size: var(--text-sm); }
.need-link { margin-top: auto; padding-top: 0.6rem; }
.ex-cost { margin-top: 0; padding-top: 0.15rem; color: var(--text); }