/* =============================================================================
   Capeltio — landing (route `/`)
   Source of truth: the validated HiFi, screens 11a (desktop, 1280) and 1a
   (mobile, 390) — READ-ONLY from this repo (D21).

   Two conventions, so this file stays readable next to tokens.css:
   · Cross-screen values (colours, radii, the type scale) come from tokens.css.
     Per-component sizes the HiFi uses once (13.5px, 12.5px, 9px…) are written
     here in px, with the screen id in a comment. A one-off from one frame does
     not deserve to become vocabulary.
   · Desktop is the baseline (D14). The mobile block at the bottom of each
     section restates only what 1a actually changes.
   ============================================================================= */

/* `hidden` must win over any component `display`. Without this, a class like
   .btn (same specificity as [hidden], declared later) silently un-hides an
   element — which is how a not-yet-wired button ends up on screen. */
[hidden] { display: none !important; }

/* Screen-reader-only. Used by the demo's figcaption: the animation carries real
   product meaning, so it must be readable without seeing it. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Keyboard focus. One rule for the whole page: the ring always lands on the
   paper background, where pétrole reads at 6.9:1 — so it stays visible on the
   terre cuite and pétrole buttons too. `:focus-visible`, so a mouse click
   never draws it. */
:focus-visible {
  outline: 2px solid var(--cap-teal-light);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -200%);
  z-index: 10; padding: 10px 18px; border-radius: var(--r-control);
  background: var(--cap-teal); color: var(--cap-surface);
  font-size: var(--t-md); font-weight: 600;
}
.skip:focus { transform: translate(-50%, 0); color: var(--cap-surface); }

/* The 1280px frame of 11a, with its 40px gutters. The gutter is a variable
   because the plans carousel has to bleed out of it by exactly that much. */
.landing { --shell-pad: 40px; }
.shell {
  max-width: var(--cap-w-window);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.wordmark { font-weight: 800; letter-spacing: 0.15em; }

/* --- Buttons --------------------------------------------------------------
   Four flavours, all from 11a. `--terracotta` is the nav CTA (the graphic
   accent), `--petrol` the hero CTA (the identity accent) — never swapped. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--cap-font-display);
  font-weight: 700;
  font-size: 13.5px;                    /* 11a nav */
  line-height: 1.2;
  padding: 9px 22px;
  border: 0; border-radius: var(--cap-radius-cta);
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--terracotta { background: var(--cap-terra-dark); color: var(--cap-surface); }
.btn--terracotta:hover { background: var(--cap-terra); color: var(--cap-surface); }

.btn--petrol { background: var(--cap-teal); color: var(--cap-surface); box-shadow: var(--cap-glow-teal); }
.btn--petrol:hover { background: var(--cap-teal-light); color: var(--cap-surface); }

.btn--ghost {
  background: var(--cap-surface);
  color: var(--cap-body-strong);
  border: 1px solid var(--cap-rule);
  font-size: 12.5px; font-weight: 600; padding: 9px 16px; border-radius: var(--r-control);
}
.btn--ghost:hover { border-color: var(--cap-teal); color: var(--cap-ink); }

.btn--paper { background: var(--cap-surface); color: var(--cap-teal); }
.btn--paper:hover { background: var(--cap-paper-200); color: var(--cap-teal); }

.btn--lg { font-size: var(--t-lg); padding: 13px 30px; border-radius: var(--r-cta-lg); align-self: flex-start; }
.btn__g { font-weight: 800; color: var(--cap-ink); }

/* --- Nav ------------------------------------------------------------------ */
.nav { border-bottom: 1px solid var(--cap-rule); background: var(--cap-bg); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
.nav__brand { display: flex; align-items: baseline; gap: 10px; color: var(--cap-ink); }
.nav__brand:hover { color: var(--cap-ink); }
.nav__brand .wordmark { font-size: var(--t-xl); }
.nav__tagline {
  font-family: var(--cap-font-label); font-size: 9px;            /* 11a */
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--cap-muted-2);
}
.nav__actions { display: flex; align-items: center; gap: 18px; }

/* FR / EN segmented control. EN is disabled until the i18n layer exists. */
.lang { display: flex; background: var(--cap-paper-200); border-radius: var(--cap-radius-pill); padding: 3px; }
.lang__opt {
  font-family: var(--cap-font-label); font-size: var(--t-xs);
  padding: 4px 12px; border: 0; border-radius: var(--cap-radius-pill);
  background: transparent; color: var(--cap-muted); cursor: pointer;
}
.lang__opt.is-active { background: var(--cap-rule-strong); color: var(--cap-ink); }
.lang__opt[disabled] { cursor: not-allowed; opacity: .55; }

/* --- Hero -----------------------------------------------------------------
   Three grid items — copy, demo, sign-up — placed EXPLICITLY, because the two
   frames order them differently. 11a: copy and sign-up stacked in the left
   column, demo spanning both rows on the right. 1a: copy, then demo, then
   sign-up, in one column. The DOM carries 1a's order; desktop is produced
   here. */
.hero { position: relative; overflow-x: clip; }
.hero__inner {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track has an auto minimum, so any
     unshrinkable child silently widens the whole column. */
  display: grid;
  grid-template-columns: 470px minmax(0, 1fr);   /* 11a */
  grid-template-rows: auto auto;
  column-gap: 48px; row-gap: 22px;               /* 22px = 11a's copy stack gap */
  align-items: center;
  padding-block: 58px 66px;
}
.hero__copy  { grid-column: 1; grid-row: 1; }
.hero__enter { grid-column: 1; grid-row: 2; }
.demo-scene  { grid-column: 2; grid-row: 1 / span 2; }

.hero__copy { display: flex; flex-direction: column; gap: 22px; }
.hero__enter { display: flex; flex-direction: column; gap: 22px; }
/* The hatching is decorative and must never paint over the words. 1a does this
   by giving every content block position:relative; one z-index pair is the same
   thing, stated once. */
.hero__copy, .hero__enter { position: relative; z-index: 1; }

.badge {
  align-self: flex-start; margin: 0;
  font-family: var(--cap-font-label); font-size: var(--t-xs);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--cap-teal-light);
  background: color-mix(in srgb, var(--cap-teal) 12%, transparent);
  padding: 6px 13px; border-radius: var(--cap-radius-pill);
}

.hero__title {
  margin: 0;
  font-size: var(--t-hero);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.02em;
  text-wrap: pretty;
}
/* The highlighted word: a filled pétrole block, not a background-image. */
.hero__mark {
  display: inline-block;
  background: var(--cap-teal); color: var(--cap-surface);
  padding-inline: 12px; border-radius: var(--r-control);
}

.hero__sub { margin: 0; font-size: var(--t-xl); line-height: 1.6; color: var(--cap-body); text-wrap: pretty; }

.hero__cta { display: flex; flex-direction: column; gap: 12px; }

/* The hero "input" is a LINK, not a field — there is no anonymous agent use, so
   it must not look like it accepts a question it will answer. It carries the
   composer's shape only. */
.fauxinput {
  display: flex; align-items: center; gap: 10px;
  background: var(--cap-surface); border: 1px solid var(--cap-rule);
  border-radius: var(--r-cta-lg); padding: 12px 14px;
  color: var(--cap-muted);
}
.fauxinput:hover { border-color: var(--cap-teal); color: var(--cap-muted); }
/* min-width: 0 is load-bearing. A flex item defaults to min-width:auto, i.e.
   min-content — and the mobile rule sets white-space:nowrap on this text, whose
   min-content is the WHOLE sentence. Without this the item refuses to shrink,
   text-overflow never engages, and the hero column widens to fit it (measured:
   361px inside a 335px column, 6px of it past the viewport). */
.fauxinput__ph { flex: 1; min-width: 0; font-family: var(--cap-font-label); font-size: 13.5px; }
.fauxinput__send {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  background: var(--cap-teal); color: var(--cap-surface);
  border-radius: var(--r-field); font-size: var(--t-lg); font-weight: 700;
}

.hero__signup { display: flex; align-items: center; justify-content: center; gap: 10px; }
.hero__signup .btn { flex: 0 1 auto; }
.hero__login { margin: 0; font-size: 12.5px; color: var(--cap-muted); text-align: center; }
.hero__login a { font-weight: 600; }

/* --- Blueprint furniture (decorative) -------------------------------------
   11a scopes this to the demo column: `inset:-24px`, clipped at radius 24. It
   is NOT a wash over the whole hero — the hatching belongs behind the card.
   Its containing block is chosen by whether .demo-scene is positioned, so the
   mobile rule can hand it back to .hero without a second element (see 1a).
   The tint is #eddac9 (terre cuite): the landing hatch is the ONLY one in that
   colour — the auth screens use the neutral --cap-hatch instead. */
.blueprint {
  position: absolute; inset: -24px; z-index: 0;
  border-radius: var(--r-decor); overflow: hidden; pointer-events: none;
}
.blueprint__hatch {
  position: absolute; right: -40px; bottom: -40px; width: 340px; height: 300px;
  background: repeating-linear-gradient(45deg, var(--cap-hatch-warm) 0 1px, transparent 1px 11px);
}
.blueprint__rules {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--cap-dim-line);
}
.blueprint__leader { stroke: var(--cap-teal); }
.blueprint__origin { fill: var(--cap-terra); }

/* The phone's own cotes, mobile only. Sized in em against the demo's base like
   everything else in the card, so they follow it when it scales: the mockup's
   330×452 box at −20/−16 around a 190×412 card is the same ratio in em. */
.demo__cotes {
  display: none;
  position: absolute; left: -2.63em; top: -2.11em;
  width: 43.42em; height: 59.47em;
  color: var(--cap-dim-line); pointer-events: none;
}

/* =============================================================================
   THE DEMO — ported from the HiFi components HeroDemo (11a) and HeroDemoMobile
   (1a). Those are two drawings of the same conversation: a browser window on
   desktop, a phone on mobile. So the thread is written ONCE and only the chrome
   and the card's shape switch at the breakpoint.

   Everything inside is sized in `em` against a single base on `.demo`. The
   HiFi's own mobile values are the desktop ones × ~0.76 (10.5→8, 11→8.5,
   9.5→7.5), measured across the two frames — so one base swap reproduces the
   mobile miniature exactly, instead of two hand-maintained scales.
   ============================================================================= */
.demo-scene {
  /* positioned: it is the blueprint's containing block on desktop (11a) */
  position: relative; margin: 0;
  min-height: 470px;                    /* 11a scene box */
  display: flex; align-items: center; justify-content: flex-start;
}

.demo {
  /* The em base — one number scales the whole card, chrome, thread and markers.
     10px reproduces 11a exactly at 1280. Below that it shrinks so the card AND
     the three markers beside it keep fitting: the card is 56em and the markers
     add ~11em, so the pair needs ~67em of column. Measured, not guessed — at a
     fixed 10px the markers are cut off by 150px around a 1120px window. */
  font-size: clamp(8.6px, calc((100vw - 598px) / 67), 10px);
  position: relative;
  width: 56em; height: 38.9em;          /* 560 × 389 */
  display: flex; flex-direction: column;
  background: var(--cap-surface);
  border: 1px solid var(--cap-rule-window); border-radius: 1.6em;
  box-shadow: var(--cap-shadow-tilt);
  color: var(--cap-ink);
  /* The settled resting tilt. hero-demo.js overrides this inline while it
     animates, and restores nothing else. */
  transform: perspective(1400px) rotateY(-7deg) rotateX(2.5deg);
  will-change: transform;
}

/* --- chrome --------------------------------------------------------------- */
.demo__chrome { flex: none; display: flex; align-items: center; gap: .6em; padding: 1em 1.4em; border-bottom: 1px solid var(--cap-rule); }
.demo__chrome--mobile { display: none; }
.demo__dot { width: .8em; height: .8em; border-radius: 50%; background: var(--cap-rule); }
.demo__url { margin-left: 1em; font-family: var(--cap-font-label); font-size: .95em; color: var(--cap-muted-2); }
.demo__wordmark { font-family: var(--cap-font-display); font-weight: 800; font-size: .9em; letter-spacing: 0.13em; }

.demo__body { flex: 1; min-height: 0; display: flex; }

/* --- mini sidebar (desktop only) ------------------------------------------ */
.demo__sidebar {
  width: 14.2em; flex: none; border-right: 1px solid var(--cap-rule);
  display: flex; flex-direction: column; padding: 1em; gap: .8em;
}
.demo__new {
  background: var(--cap-surface); border: 1px solid var(--cap-rule);
  border-radius: .8em; padding: .5em .8em; font-size: .95em; font-weight: 600; color: var(--cap-body-strong);
}
.demo__hist { display: flex; flex-direction: column; gap: .2em; font-size: .95em; color: var(--cap-muted-3); }
.demo__hist span { padding: .5em .8em; }
.demo__hist .is-current {
  background: var(--cap-paper-150); color: var(--cap-ink);
  border-radius: .8em; border-left: .2em solid var(--cap-teal);
}
.demo__foot { margin-top: auto; display: flex; flex-direction: column; gap: .4em; }
.demo__foot-label { font-family: var(--cap-font-label); font-size: .8em; text-transform: uppercase; color: var(--cap-muted-2); }
.demo__settings { font-size: .95em; color: var(--cap-muted-3); padding-top: .6em; border-top: 1px solid var(--cap-rule); margin-top: .2em; }

/* The quota bar: fills left to right, and carries NO number, anywhere (D19). */
.demo__quota { display: block; height: .6em; background: var(--cap-quota-track); border-radius: var(--cap-radius-pill); overflow: hidden; }
.demo__quota-fill { display: block; width: 38%; height: 100%; background: var(--cap-teal); border-radius: var(--cap-radius-pill); }

/* --- thread --------------------------------------------------------------- */
.demo__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .8em; padding: 1.2em 3em 1.2em 1.4em; }
.demo__thread { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: .8em; }
.demo__thread > * { flex: none; margin: 0; }

.demo__msg--user {
  align-self: flex-end; max-width: 78%;
  background: var(--cap-paper-150); border-radius: 1.2em 1.2em .4em 1.2em;
  padding: .7em 1em; font-size: 1.05em; line-height: 1.45;
}
.demo__ask { font-size: 1.05em; line-height: 1.45; color: var(--cap-body-strong); }

.demo__opts { display: flex; gap: .5em; flex-wrap: wrap; }
.demo__opts span {
  border: 1px solid var(--cap-rule); border-radius: var(--cap-radius-pill);
  padding: .4em .9em; font-size: .95em; color: var(--cap-muted-3);
}
.demo__opts .is-picked {
  border-color: var(--cap-teal); color: var(--cap-teal-light); font-weight: 600;
  background: color-mix(in srgb, var(--cap-teal) 8%, transparent);
}

/* The answer's locked anatomy: direction → the "›" adjustments → Pourquoi,
   always visible, never collapsed (06-screens: "the why is the product"). */
.demo__answer {
  border-left: .3em solid var(--cap-teal);
  background: var(--cap-paper-50); border-radius: 0 1em 1em 0;
  padding: .8em 1em; display: flex; flex-direction: column; gap: .5em;
}
.demo__answer > * { margin: 0; }
.demo__dir { font-size: 1.1em; font-weight: 700; line-height: 1.35; }
.demo__adj { font-size: 1em; color: var(--cap-body-strong); }
.demo__why { font-size: 1em; line-height: 1.5; color: var(--cap-muted-3); }
.demo__why-label { font-family: var(--cap-font-label); font-size: .85em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cap-terra); }
.demo__fb { display: flex; align-items: center; gap: .6em; font-size: .9em; color: var(--cap-muted-2); }
.demo__fb svg { color: var(--cap-muted-3); }
.demo__fb .is-flipped { transform: rotate(180deg); }

/* --- composer ------------------------------------------------------------- */
.demo__composer {
  flex: none; display: flex; align-items: center; gap: .8em;
  border: 1px solid var(--cap-rule); border-radius: 1em; padding: .7em 1em;
}
.demo__input {
  flex: 1; min-width: 0; display: flex; align-items: center;
  font-family: var(--cap-font-label); font-size: .95em; color: var(--cap-ink);
  white-space: nowrap; overflow: hidden;
}
.demo__input-ph { color: var(--cap-muted-2); }
.demo__count { flex: none; font-family: var(--cap-font-label); font-size: .8em; color: var(--cap-muted-2); }
.demo__send {
  width: 1.8em; height: 1.8em; flex: none; display: grid; place-items: center;
  background: var(--cap-teal); color: var(--cap-surface);
  border-radius: .6em; font-size: 1em; font-weight: 700;
}

/* --- the three markers, overflowing the card edge ------------------------- */
.demo__steps { list-style: none; margin: 0; padding: 0; }
.demo__step {
  position: absolute; left: calc(100% - 1.2em);
  display: flex; align-items: center; gap: .8em; white-space: nowrap;
}
.demo__step:nth-child(1) { top: 8.2em; }
.demo__step:nth-child(2) { top: 50%; transform: translateY(-50%); }
.demo__step:nth-child(3) { bottom: 8.2em; }
.demo__step-n {
  width: 2.6em; height: 2.6em; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--cap-rule-window);
  background: var(--cap-bg); color: var(--cap-muted-3);
  font-family: var(--cap-font-label); font-size: 1em;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.demo__step-l {
  font-family: var(--cap-font-label); font-size: .9em; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cap-muted-2); transition: color .3s ease;
}
/* The active beat. `data-step` is set by hero-demo.js; with no JS the static
   state is step 3 — the conversation is finished. */
.demo[data-step="1"] .demo__step:nth-child(1) .demo__step-n,
.demo[data-step="2"] .demo__step:nth-child(2) .demo__step-n,
.demo[data-step="3"] .demo__step:nth-child(3) .demo__step-n {
  background: var(--cap-terra); border-color: transparent; color: var(--cap-surface);
  font-weight: 600; box-shadow: var(--cap-glow-terra-sm);
}
.demo[data-step="1"] .demo__step:nth-child(1) .demo__step-l,
.demo[data-step="2"] .demo__step:nth-child(2) .demo__step-l,
.demo[data-step="3"] .demo__step:nth-child(3) .demo__step-l { color: var(--cap-ink); }

/* --- play states ----------------------------------------------------------
   The markup ships the FINISHED conversation, so the page is complete with no
   JS, under reduced motion, and for a crawler. Nothing hides until
   hero-demo.js declares `data-mode="play"`, and it only ever does that when
   motion is allowed. Typing indicators and the caret are the two exceptions:
   they belong to the animation alone, so they start hidden. */
.demo__typing, .demo__caret, .demo__opts[data-demo-el="idle"] { display: none; }
.demo__typing { gap: .3em; padding: .4em .2em; }
.demo__typing i { width: .5em; height: .5em; border-radius: 50%; background: var(--cap-muted-2); animation: demoDot 1.1s infinite; }
.demo__typing i:nth-child(2) { animation-delay: .15s; }
.demo__typing i:nth-child(3) { animation-delay: .3s; }
.demo__caret { width: 1px; height: 1.1em; background: var(--cap-ink); margin-left: 1px; animation: demoBlink 1s steps(1) infinite; }

@keyframes demoDot  { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes demoBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.demo[data-mode="play"] [data-demo-el] { display: none; }
.demo[data-mode="play"].is-uq   [data-demo-el="uq"],
.demo[data-mode="play"].is-uc   [data-demo-el="uc"],
.demo[data-mode="play"].is-opts [data-demo-el="opts"]  { display: block; }
.demo[data-mode="play"].is-ans  [data-demo-el="ans"]   { display: flex; }
.demo[data-mode="play"].is-t1   [data-demo-el="t1"],
.demo[data-mode="play"].is-t2   [data-demo-el="t2"],
.demo[data-mode="play"].is-fb   [data-demo-el="fb"],
.demo[data-mode="play"].is-tap  [data-demo-el="tap"],
.demo[data-mode="play"].is-idle [data-demo-el="idle"],
.demo[data-mode="play"].is-caret [data-demo-el="caret"] { display: flex; }
.demo[data-mode="play"].is-caret [data-demo-el="caret"] { display: inline-block; }

/* =============================================================================
   Sections
   ============================================================================= */
.band { border-top: 1px solid var(--cap-rule); padding-block: 30px 40px; }
.band__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.band__note {
  margin: 0; font-family: var(--cap-font-label); font-size: 9px;   /* 11a */
  letter-spacing: var(--track-label-2); text-transform: uppercase; color: var(--cap-muted-2);
}
.band__note--narrow { display: none; }   /* swapped in below 760 — see 1a */

/* Section head, "moderne" variant of the shared SectionHead component: a
   pétrole number block welded to a paper plate.
   The font is FAMILJEN GROTESK, not Archivo — the component carries it in its
   own <helmet>, which is invisible if you only read its markup. And the plate
   is 16px: the call site writes font-size:17px on the <dc-import> element, but
   that never reaches the rendered title, so 16 is what was validated.
   Both caught by diffing computed styles against the standalone mockup — see
   README § Comparing a screen with the mockup. */
.sechead {
  display: inline-flex; align-items: stretch; margin: 0 0 20px;
  background: var(--cap-surface); border: 1px solid var(--cap-paper-300);
  border-radius: var(--cap-radius-drawer); overflow: hidden;
  box-shadow: var(--cap-shadow-hero-card);
  font-family: var(--cap-font-label);
  font-size: var(--t-xl); line-height: 1.15;
}
.sechead__n {
  display: flex; align-items: center; padding: 0 1.15em 0 .75em;
  background: var(--cap-teal); color: var(--cap-surface);
  font-size: .72em; font-weight: 700; letter-spacing: 0.06em;
}
.sechead__t {
  display: flex; align-items: center; margin-left: -.8em;
  padding: .62em 1.3em .62em 1.1em;
  background: var(--cap-surface); border-radius: var(--cap-radius-drawer) 0 0 var(--cap-radius-drawer);
  font-size: 1em; font-weight: 700; letter-spacing: -0.01em; color: var(--cap-ink);
  /* The mockup passes the title already capitalised ("COMMENT ÇA MARCHE").
     Uppercasing in CSS instead renders identically (ç → Ç included) while the
     heading keeps a readable accessible name in the document outline. */
  text-transform: uppercase;
}

/* --- Comment ça marche ---------------------------------------------------- */
/* Three across at 11a's width, reflowing to two then one on their own — 240px
   is where a step's sentence stops breaking badly. No breakpoint needed. */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.card {
  background: var(--cap-surface);
  border: 1px solid var(--cap-rule); border-top: 3px solid var(--cap-terra);
  border-radius: var(--r-card); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.card > * { margin: 0; }
.card__top { display: flex; align-items: center; justify-content: space-between; color: var(--cap-terra); }
.card__n {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--cap-terra); color: var(--cap-surface);
  font-family: var(--cap-font-label); font-size: 10.5px; font-weight: 600;
}
.card__t { font-size: var(--t-xl); font-weight: 700; }
.card__d { font-size: 13.5px; line-height: 1.55; color: var(--cap-body); text-wrap: pretty; }

/* --- Tarifs --------------------------------------------------------------- */
.period { display: flex; justify-content: center; align-items: center; gap: 12px; padding-block: 2px 4px; }
.period__seg { display: flex; background: var(--cap-paper-200); border-radius: var(--cap-radius-pill); padding: 3px; }
.period__opt {
  font-family: var(--cap-font-label); font-size: 12.5px;
  padding: 8px 20px; border: 0; border-radius: var(--cap-radius-pill);
  background: transparent; color: var(--cap-muted); cursor: pointer;
}
.period__opt:hover { color: var(--cap-ink); }
.period__opt.is-active { background: var(--cap-teal); color: var(--cap-surface); font-weight: 600; }
.period__save {
  margin: 0; font-family: var(--cap-font-label); font-size: var(--t-2xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cap-terra);
  background: color-mix(in srgb, var(--cap-terra) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cap-terra) 35%, transparent);
  padding: 5px 11px; border-radius: var(--cap-radius-pill);
}

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; margin-top: 20px; }
.plan {
  position: relative; overflow: hidden;
  background: var(--cap-surface); border: 1px solid var(--cap-rule);
  border-radius: var(--r-card); padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.plan > * { margin: 0; }
.plan__name { font-family: var(--cap-font-label); font-size: var(--t-2xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cap-muted-2); }
.plan__price { display: flex; align-items: baseline; gap: 6px; }
.plan__amount { font-size: var(--t-4xl); font-weight: 800; }
/* No tracking here on desktop (11a). 1a adds 0.1em — see the mobile block. */
.plan__unit { font-family: var(--cap-font-label); font-size: var(--t-2xs); text-transform: uppercase; color: var(--cap-muted-2); }
.plan__billed { font-family: var(--cap-font-label); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-muted-2); }
.plan__for { font-size: var(--t-md); color: var(--cap-body); }
.plan__feats { list-style: none; margin: 0; padding: 4px 0 6px; display: flex; flex-direction: column; gap: 7px; font-size: var(--t-md); color: var(--cap-body-strong); }
.plan__feats li::before { content: "› "; color: var(--cap-teal-light); }
.plan__cta { margin-top: auto; width: 100%; padding: 10px; font-size: 13.5px; }

/* The featured plan inverts: pétrole ground, terre cuite flag. */
.plan--featured { background: var(--cap-teal); border: 1.5px solid var(--cap-terra); }
.plan--featured .plan__name { color: color-mix(in srgb, var(--cap-surface) 60%, transparent); }
.plan--featured .plan__amount { color: var(--cap-surface); }
.plan--featured .plan__unit,
.plan--featured .plan__billed { color: color-mix(in srgb, var(--cap-surface) 58%, transparent); }
.plan--featured .plan__for { color: color-mix(in srgb, var(--cap-surface) 80%, transparent); }
.plan--featured .plan__feats { color: color-mix(in srgb, var(--cap-surface) 88%, transparent); }
.plan--featured .plan__feats li::before { color: var(--cap-terra-pale); }
.plan__flag {
  position: absolute; top: 0; right: 0;
  background: var(--cap-terra); color: var(--cap-surface);
  font-family: var(--cap-font-label); font-size: 8.5px; letter-spacing: var(--track-label-2);
  text-transform: uppercase; padding: 4px 12px; border-radius: 0 0 0 var(--r-control);
}

/* "Facturé une fois par an" belongs to the annual period only. The toggle
   flips `data-period` on .plans and nothing else moves. */
.plans[data-period="monthly"] .plan__billed { visibility: hidden; }

.plans__dots { display: none; }

/* --- FAQ ------------------------------------------------------------------
   <details>/<summary>: opens with no JS, keyboard-operable for free, and the
   answers stay in the DOM — which is what schema.org FAQPage requires. */
.faq { max-width: 760px; }
.faq__item { border-bottom: 1px solid var(--cap-rule); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 4px; cursor: pointer;
  font-size: var(--t-lg); font-weight: 600; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
/* The chevron, drawn in CSS so no icon file is fetched for six of them. */
.faq__q::after {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--cap-muted-2); border-bottom: 2px solid var(--cap-muted-2);
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease, border-color .2s ease;
}
.faq__item[open] > .faq__q::after { transform: translateY(2px) rotate(-135deg); border-color: var(--cap-teal-light); }
.faq__a { margin: 0; padding: 0 4px 16px; max-width: 640px; font-size: 13.5px; line-height: 1.6; color: var(--cap-body); text-wrap: pretty; }

/* --- Footer --------------------------------------------------------------- */
.foot { border-top: 1px solid var(--cap-rule); }
.foot__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; }
.foot__brand { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.foot__brand .wordmark { font-size: var(--t-sm); }
.foot__year { font-family: var(--cap-font-label); font-size: 8.5px; letter-spacing: var(--track-label); color: var(--cap-muted-2); }
.foot__links { display: flex; gap: 20px; font-family: var(--cap-font-label); font-size: var(--t-2xs); letter-spacing: 0.08em; }
.foot__links a { color: var(--cap-muted-3); }
.foot__links a:hover { color: var(--cap-ink); }

/* =============================================================================
   Responsive — HiFi 1a (390 × 844, 1:1).
   Desktop is the baseline (D14); what follows is only what 1a actually changes.
   ============================================================================= */

/* Between the two: the hero stacks before the copy column gets cramped.
   1180 rather than a round 1024 — below it, a 470px copy column leaves the demo
   less room than its markers need, and they start being clipped. */
@media (max-width: 1180px) {
  /* One column, and the demo takes the middle row: copy → demo → sign-up,
     which is 1a's order and also the DOM's. */
  .hero__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 32px; }
  .hero__copy  { grid-row: 1; }
  .demo-scene  { grid-column: 1; grid-row: 2; }
  .hero__enter { grid-column: 1; grid-row: 3; }
  /* Centre the card AND its markers as one group: the padding is the gutter the
     markers live in, so the pair reads centred instead of pushed left. */
  .demo-scene { justify-content: center; padding-right: 130px; min-height: 0; }
  /* The cotes stay: now that the blueprint is scoped to the demo box, they
     frame the card at any width instead of washing across the section. */
}

/* Plans: three pricing cards stop being readable well before the page turns
   "mobile", so the carousel of 1a starts here rather than at the phone
   breakpoint — 302px per card is the width the HiFi validated. */
@media (max-width: 900px) {
  .plans {
    display: flex; gap: 12px;
    margin-inline: calc(-1 * var(--shell-pad));
    padding: 4px calc(var(--shell-pad) + 24px) 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plan { flex: none; width: 302px; scroll-snap-align: center; padding: 18px; box-shadow: var(--cap-shadow-xs); }
  /* The featured card lifts on its own colour, not on a neutral elevation: a
     tinted glow carries the button's hue by design rule, and 1a gives it the
     same one as the pétrole CTA. Desktop keeps all three flat — a pricing card
     is a content surface, it sits on its 1px rule. */
  .plan--featured { box-shadow: var(--cap-glow-teal); }
  .plans__dots { display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 4px; }
  .plans__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--cap-rule-window); }
  .plans__dots i.is-active { width: 20px; border-radius: var(--cap-radius-pill); background: var(--cap-terra); }
}

@media (max-width: 760px) {
  .landing { --shell-pad: 20px; }

  /* Every size below was read off 1a's own computed styles, not scaled down
     from 11a. 1a is a 1:1 390px frame with its own type sizes; assuming the
     desktop values carried over left 38 elements adrift. */
  .nav__inner { padding-block: 14px; }
  .nav__brand .wordmark { font-size: var(--t-sm); }
  .nav__tagline { display: none; }
  .nav__actions { gap: 8px; }
  .btn { font-size: var(--t-sm); padding: 7px 14px; border-radius: var(--r-field); }
  .lang__opt { font-size: 9.5px; padding: 3px 9px; }

  .hero__inner { padding-block: 30px 32px; row-gap: 16px; }
  .hero__copy { gap: 16px; }
  .hero__enter { gap: 16px; }
  .badge { font-size: var(--t-2xs); padding: 5px 11px; }
  /* 1a carries NO sub-headline: it goes badge → title → CTA → field → demo.
     The sentence is not lost for search — it is the page's meta description
     almost verbatim, so the topical signal survives being hidden here. */
  .hero__sub { display: none; }
  /* On 1a the primary CTA is full width and thumb-sized. */
  .btn--lg { align-self: stretch; padding: 13px; font-size: 14.5px; }
  .hero__signup { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero__signup .btn { padding: 10px; font-size: var(--t-md); }
  .fauxinput { padding: 11px 13px; }
  .fauxinput__ph { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fauxinput__send { width: 28px; height: 28px; font-size: 14px; }   /* 1a */
  .hero__login, .hero__login a { font-size: var(--t-sm); }

  /* The demo becomes the phone of 1a: 190×412, the one true miniature in the
     whole design (it draws a phone inside the phone). The base font-size does
     all the scaling — see the note at the top of the demo block. */
  /* 1a keeps the phone to the left and lets the markers use the space beside
     it, so no reserved gutter here. Un-positioned on purpose: the blueprint
     then resolves against .hero, which is where 1a puts the hatching — top
     right of the whole hero block, behind the headline. */
  .demo-scene { padding: 16px 0 24px 20px; justify-content: flex-start; position: static; }
  .blueprint { inset: 0; border-radius: 0; }
  /* 1a swaps which cotes are drawn: the hero's frame goes, the phone's appear.
     They are NOT the same drawing — porting one and hiding the other left the
     mobile hero with no dimension lines at all. */
  .blueprint__rules { display: none; }
  .demo__cotes { display: block; }
  /* 7.6px reproduces 1a's 190px card at a 375px viewport. It stays fluid below
     that: on a 320px phone a fixed base pushes the markers 31px off-screen. */
  .demo {
    font-size: clamp(6.4px, 2vw, 7.6px); width: 25em; height: 54.2em; border-radius: 2.4em;
    /* The phone uses the negative-offset variant of the tilt shadow (1a). */
    box-shadow: var(--cap-shadow-tilt-neg);
  }
  .demo__chrome--desktop { display: none; }
  .demo__chrome--mobile { display: flex; gap: .9em; padding: 1.05em 1.3em; }
  .demo__chrome--mobile .demo__quota { width: 3.4em; margin-left: auto; height: .5em; }
  .demo__chrome--mobile svg { width: 1.45em; height: 1.45em; color: var(--cap-body-strong); }
  .demo__sidebar { display: none; }
  .demo__main { padding: 1.3em 1.3em; gap: .8em; }
  .demo__msg--user { max-width: 86%; }
  /* Stacked chips: three pills do not fit side by side at this width (1a). */
  .demo__opts { flex-direction: column; align-items: flex-start; gap: .5em; }
  .demo__count { display: none; }         /* 1a's composer carries no counter */
  .demo__step:nth-child(1) { top: 12.6%; }
  .demo__step:nth-child(2) { top: 43.7%; transform: none; }
  .demo__step:nth-child(3) { top: 75.2%; bottom: auto; }
  /* The markers sit OUTSIDE the card, so they do not follow its miniature
     scale: 1a draws them at 9px, where the em base would give 7.6. */
  .demo__step-n { width: 2.9em; height: 2.9em; font-size: 9px; }
  .demo__step-l { font-size: 1.05em; }
  /* 1a: smaller patch, top right of the hero, and a 10px step instead of 11. */
  .blueprint__hatch {
    width: 180px; height: 160px; right: -30px; top: -20px; bottom: auto;
    background: repeating-linear-gradient(45deg, var(--cap-hatch-warm) 0 1px, transparent 1px 10px);
  }

  .band { padding-block: 26px; }
  /* 1a keeps the head on ONE row, note on the right — it does not stack. */
  .band__head { gap: 10px; }
  .band__note--wide { display: none; }
  .band__note--narrow { display: block; font-size: 8px; letter-spacing: .1em; text-align: right; }
  /* .sechead keeps its 16px: the section head is the SAME size on both frames.
     The mockup writes font-size on the <dc-import> element (17px on 11a, 13px
     on 1a) and it reaches neither — verified against the authoring runtime with
     all 43 screens mounted, not just the standalone export. */
  .cards { gap: 10px; }
  .card { padding: 14px 16px; }
  .card__top .card__n { width: 24px; height: 24px; font-size: var(--t-2xs); }
  .card__t { font-size: var(--t-base); }
  .card__d { font-size: 12.5px; }

  .period__opt { font-size: 11.5px; padding: 6px 15px; }
  .period__save { font-size: 9px; padding: 4px 9px; }
  .plan__name { font-size: 9.5px; }
  .plan__amount { letter-spacing: -0.01em; }
  .plan__unit { font-size: 9px; letter-spacing: .1em; }   /* tracking is 1a-only */
  .plan__billed { font-size: 7.5px; }
  .plan__for { font-size: 12.5px; }
  .plan__feats { font-size: var(--t-sm); gap: 6px; }
  .plan__flag { font-size: 8px; }
  /* Wins over the mobile .btn size — a plan CTA stays 13.5px on 1a. */
  .plan__cta { font-size: 13.5px; padding: 11px; }

  .faq__q { font-size: 13.5px; padding: 13px 2px; }
  .faq__a { font-size: 12.5px; padding-bottom: 13px; }

  .foot__inner { flex-direction: column; gap: 8px; padding-block: 18px; }
  .foot__brand .wordmark { font-size: var(--t-xs); }
  .foot__links { gap: 14px; font-size: 9.5px; letter-spacing: normal; }
  .foot__year { letter-spacing: normal; }
}

/* Reduced motion: the blueprint and the demo go flat and silent. tokens.css
   already neutralises durations globally; this kills the resting tilt too, so
   nothing is left skewed for someone who asked for no motion. */
@media (prefers-reduced-motion: reduce) {
  .demo { transform: none; }
  .demo__typing i, .demo__caret { animation: none; }
}