/* ============================================================================
   Bodane — the layer on top of Averholm's shared sheet.

   assets/site.css is a BYTE-IDENTICAL copy of marketing/assets/site.css. Do not
   edit it here; to resync, overwrite it. Everything Bodane needs that the
   company sheet does not already provide lives in this file.

   Bodane is a product under Averholm, not a second brand, so nothing below
   introduces a new hue, a new radius, a new shadow or a second display face.
   The tokens, the petrol accent, Newsreader / IBM Plex Sans / IBM Plex Mono and
   the hairline document grid are all inherited unchanged.

   What IS specific to Bodane is one typographic rule, and it carries meaning
   rather than decoration:

       legislative text  ->  always the serif, at reading size, never truncated
       our own measures  ->  always the mono

   A reader can therefore tell, without reading a word, which parts of a page
   are the law and which parts are us talking about it. Every French bill title
   on this site is a real, complete title from the corpus, set in full — which
   is also the only honest way to show a product whose central problem is that
   those titles are 196 characters long and say nothing.
   ============================================================================ */

/* --------------------------------------------------------------- masthead ---
   The mark is Averholm's, unchanged, because the company is Averholm. Only the
   wordmark differs. The 13.125% shift is the shared sheet's — it stands the
   wordmark on the mark's waterline — and is inherited from .brand .mk. */
.brand .sub{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  color:var(--muted);align-self:center;padding-left:12px;margin-left:2px;border-left:1px solid var(--line)}
/* The sub-line is a nicety, and the first thing to go when the masthead gets
   tight: below this the nav links, the toggle and the call to action need the
   room more than the reader needs telling twice whose product this is (the mark
   already says it, and so does the footer). */
@media(max-width:900px){ .brand .sub{display:none} }

/* ---------------------------------------------------------------- measure ---
   Serif body copy gets a longer line than the shared sheet's sans default, and
   a little more leading with it. */
.measure{max-width:64ch}
.measure-tight{max-width:54ch}

/* --------------------------------------------------------------- specimen ---
   A real bill title, quoted whole. The left rule marks it as source material,
   the way a block quotation is marked in a printed document; it is not a
   decorative accent bar and it never appears on anything we wrote ourselves.

   Long strings are the whole point here, so nothing truncates and nothing
   ellipsises. The measure is set in em of the specimen's own size so it holds
   at every step of the clamp, and hyphens are off: hyphenating "blanchiment"
   across a line would be a small lie about what the register published. */
.specimen{border-left:2px solid var(--line-strong);background:var(--surface-2);
  padding:20px 24px 18px;border-radius:0 var(--radius) var(--radius) 0}
.specimen q,.specimen .txt{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(17px,1.55vw,20px);line-height:1.5;letter-spacing:-.005em;
  display:block;max-width:42em;hyphens:none;quotes:none;text-wrap:pretty}
.specimen .txt.lead{font-size:clamp(20px,2.5vw,29px);line-height:1.34;max-width:23em}
.specimen .meta{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:5px 20px;align-items:baseline}
.specimen .meta b{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.specimen--plain{background:transparent;border-left-color:var(--line)}

/* Truncation, shown deliberately — the "…" here is evidence, not a layout
   fallback: it is how a title this long is quoted, and the meta line says how
   much was cut. */
.specimen .cut{color:var(--muted)}

/* ----------------------------------------------------------------- ledger ---
   Measured facts. Rows with a rule between them, not cards: these are readings
   off one corpus, and a card each would imply four unrelated features. The
   figure is serif because it is the thing being read; its unit and its source
   are mono because they are ours. */
.ledger{border-top:1px solid var(--line)}
.ledger-row{display:grid;grid-template-columns:minmax(9.5rem,13rem) 1fr;gap:8px 34px;
  align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.ledger-row .fig{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.4vw,40px);
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ledger-row .fig small{display:block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:9px;line-height:1.4}
.ledger-row .say{color:var(--ink-2);font-size:16px;line-height:1.6;max-width:56ch}
.ledger-row .say b{color:var(--ink);font-weight:600}
@media(max-width:640px){
  .ledger-row{grid-template-columns:1fr;gap:12px;padding:20px 0}
  .ledger-row .fig small{display:inline;margin:0 0 0 10px;letter-spacing:.08em}
}

/* ------------------------------------------------------------------ state ---
   Two chips, and only two, used everywhere a capability is named: what runs
   today and what is being built. They reuse the shared sheet's semantic
   colours — ok and warn — rather than inventing a hue, because "in build" is a
   state, not a category. Nothing on this site describes a capability without
   one of these next to it. */
.state{display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:5px;white-space:nowrap;vertical-align:2px}
.state::before{content:"";width:.42em;height:.42em;border-radius:50%;background:currentColor;flex:none}
.state-now{color:var(--ok);background:var(--ok-bg)}
.state-build{color:var(--warn);background:var(--warn-bg)}

/* ------------------------------------------------------------------ stack ---
   A two-part statement: heading with its state chip, then the body. Used for
   capabilities, for document types, for the honesty list. Rules, not boxes. */
.stack{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.stack > li{list-style:none;padding:24px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,20rem) 1fr;gap:10px 40px;align-items:start}
.stack h3{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.stack h3 .fr{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--ink-2);font-style:italic}
.stack p{color:var(--ink-2);font-size:15.5px;line-height:1.62;max-width:60ch}
.stack p + p{margin-top:10px}
@media(max-width:760px){ .stack > li{grid-template-columns:1fr;gap:12px} }

/* ------------------------------------------------------------- stage rail ---
   The legislative course of a bill, in the register's own event vocabulary.
   This one genuinely is a sequence, which is the only reason it gets a
   sequential device — and the device is a rail with markers rather than
   numbers, because the steps are named, not counted.

   The filled markers are the moments Bodane can already tell you about. The
   last marker is hollow: publication in the Journal officiel is where a
   publication-watching tool starts, and it is the moment the bill stops being
   changeable. That contrast is the argument of the whole product, drawn. */
.rail{list-style:none;margin:0;padding:0 0 0 30px;position:relative}
.rail::before{content:"";position:absolute;left:5px;top:9px;bottom:34px;width:1px;background:var(--line-strong)}
.rail li{position:relative;padding:0 0 26px}
.rail li::before{content:"";position:absolute;left:-30px;top:6px;width:11px;height:11px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--paper)}
.rail li.last::before{background:var(--paper);border:2px solid var(--muted)}
.rail .fr{font-family:var(--serif);font-size:19px;color:var(--ink);display:block;line-height:1.3}
.rail .en{font-family:var(--sans);font-size:14.5px;color:var(--ink-2);display:block;margin-top:4px;max-width:52ch}
.rail .where{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:7px}
.rail li.last .fr{color:var(--ink-2)}
.rail-note{margin-top:6px;padding-left:30px;color:var(--ink-2);font-size:15.5px;max-width:52ch;line-height:1.6}

/* ------------------------------------------------------------- screenshot ---
   The product's own matches page. Framed the way the shared sheet frames a
   media block, with a caption that says what the reader is looking at and
   whose account it is. */
.shot{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden}
.shot img{display:block;width:100%;height:auto}
.shot--crop{max-height:min(74vh,720px)}
.shot--crop img{object-fit:cover;object-position:top center}
.shot-cap{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:14px;max-width:66ch}
.shot-cap b{color:var(--ink-2);font-weight:600}

/* ---------------------------------------------------------------- licence ---
   Attribution is a term of the CC BY 4.0 licence the Légilux data is published
   under, not a courtesy. It appears on every page that shows legislative text,
   next to that text, and again in the footer. */
.licence{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--muted);max-width:78ch}
.licence a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.licence a:hover{color:var(--accent)}

/* ----------------------------------------------------------- boundary rows --
   Data handling. Two columns that must be read against each other: what leaves
   this deployment and what never does. The shared sheet's .modes gives the
   frame; these rows give the detail inside it. */
.bound{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.bound li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:15px;
  color:var(--ink-2);line-height:1.5}
.bound li svg{width:17px;height:17px;margin-top:3px;flex:none}
.bound--out li svg{color:var(--warn)}
.bound--in li svg{color:var(--ok)}

/* -------------------------------------------------------------- pull-fr --
   A quoted fragment of French legal text, set in the serif so it reads as the
   source speaking rather than as us paraphrasing it. Used where a claim about a
   bill has to be checkable against the bill. */
.pull-fr{font-family:var(--serif);font-size:1.05em;line-height:1.6;color:var(--ink);
  border-left:3px solid var(--accent);padding-left:16px;margin:16px 0}

/* ------------------------------------------------------------------- misc --- */
.lede-serif{font-family:var(--serif);font-size:clamp(19px,2.1vw,23px);line-height:1.5;
  color:var(--ink-2);max-width:44ch}
.hero-bodane{padding:64px 0 68px;border-bottom:1px solid var(--line)}
.hero-bodane h1{font-size:clamp(29px,3.7vw,42px);line-height:1.1;margin:0}
.kicker{font-size:16.5px;color:var(--ink-2);max-width:52ch;margin:0 0 22px}
.pair{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
@media(max-width:900px){ .pair{grid-template-columns:1fr;gap:36px} }
.tail{margin-top:30px}
.note{color:var(--muted);font-size:13.5px;line-height:1.6;max-width:62ch}
.section-tight{padding:56px 0}
.hr{border:0;border-top:1px solid var(--line);margin:0}

/* The shared sheet's .cta-final is a full-bleed accent band. Bodane's closing
   ask is a conversation, not a signup, so it keeps the band but drops the
   second button: one route, no decoy. */
.cta-final .why{border-top-color:rgba(255,255,255,.28)}
.cta-final .licence{color:#CFE3E9}
.cta-final .licence a{color:#EAF3F5}

/* ------------------------------------------------------------- small screens
   The shared sheet hides the nav links below 860px and stops there, which is
   right for a two-word call to action ("Book a demo") and wrong for this one.
   "Become a design partner" is the name of the thing that happens when you press
   it, and shortening it to fit a phone would leave the primary action of the
   site saying something different depending on the device — so instead the bar
   is allowed to grow, and the button to wrap.

   Below 400px the masthead itself gives ground: a smaller mark, a smaller
   wordmark, tighter gutters. Verified free of horizontal overflow from 320px
   up on every page. */
@media(max-width:560px){
  .topbar{height:auto;min-height:60px;padding:10px 0;gap:14px;flex-wrap:nowrap}
  nav.main{gap:10px}
  .nav-cta .btn{font-size:13.5px;padding:.55em .85em;white-space:normal;line-height:1.25;text-align:center}
  .cta-final .wrap{gap:24px}
}
@media(max-width:400px){
  .wrap,.wrap-narrow{padding:0 18px}
  .brand{font-size:19px;gap:8px}
  .brand .mk{width:22px;height:22px}
  .topbar{gap:10px}
  .btn-lg{font-size:15px;padding:.8em 1.15em}
  .specimen{padding:16px 16px 14px}
  .rail{padding-left:26px}
  .rail li::before{left:-26px}
  .rail-note{padding-left:26px}
}

/* ------------------------------------------------------ contrast tightening
   Two AA failures inherited from the company sheet's LIGHT palette, measured
   rather than eyeballed:

     --muted  #6B7789 on --paper #F6F7F9  =  4.24 : 1   (AA wants 4.5)
     --warn   #B26B00 on --warn-bg        =  3.72 : 1

   The dark palette is clear on both counts (5.0–5.4 and 7.3), so only the light
   values are touched. #636F80 is the same hue at the same chroma, one step
   darker: 4.76 on paper, 5.10 on surface, 4.97 on surface-2.

   These are declared at :root, which is LOWER specificity than the sheet's
   :root:not([data-theme="light"]) and :root[data-theme="dark"] blocks — so they
   apply in light mode and the dark palette is left exactly as it was, whichever
   order the stylesheets happen to load in.

   The fix belongs here rather than in site.css because that file is a verbatim
   copy of the company sheet and has to stay diffable against it. The same two
   values are worth fixing upstream. */
:root{--muted:#636F80}
.state-build{color:#8F5600}
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .state-build{color:var(--warn)} }
:root[data-theme="dark"] .state-build{color:var(--warn)}

/* ------------------------------------------------- dark-mode accent on white
   The company sheet paints the primary button and the closing band with
   --accent and sets the text on them to white. That is correct in light, where
   the accent is a deep petrol (#0F5E7A, 7.24 : 1 against white). In dark the
   accent inverts to a bright cyan (#3EA7C6) and the white text goes with it —
   2.8 : 1 on the button, 2.3 : 1 on the band's body copy. The most important
   control on the site was the least legible half of the time.

   The fix is the ordinary one for a bright accent on a dark ground: keep the
   accent as the fill and put the dark ink on top of it, which reads as more
   deliberate than the white version did.

     button text  #0E141C on #3EA7C6   6.65 : 1   (8.42 on the hover shade)
     band heading #0E141C on #3EA7C6   6.65 : 1
     band body    #0C2E39 on #3EA7C6   5.15 : 1
     band button  #E8EDF4 on #0E141C  15.72 : 1, and 6.65 : 1 against the band

   Written twice, once for prefers-color-scheme and once for the explicit
   toggle, because the sheet's palette is three-state and a fix that only
   covered one of them would be worse than none. Worth fixing upstream too. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn-primary{color:#0E141C}
  :root:not([data-theme="light"]) .cta-final h2{color:#0E141C}
  :root:not([data-theme="light"]) .cta-final p,
  :root:not([data-theme="light"]) .cta-final .licence{color:#0C2E39}
  :root:not([data-theme="light"]) .cta-final .licence a{color:#0E141C}
  :root:not([data-theme="light"]) .cta-final .btn-primary{background:#0E141C;color:#E8EDF4}
  :root:not([data-theme="light"]) .cta-final .btn-primary:hover{background:#16202E;color:#fff}
}
:root[data-theme="dark"] .btn-primary{color:#0E141C}
:root[data-theme="dark"] .cta-final h2{color:#0E141C}
:root[data-theme="dark"] .cta-final p,
:root[data-theme="dark"] .cta-final .licence{color:#0C2E39}
:root[data-theme="dark"] .cta-final .licence a{color:#0E141C}
:root[data-theme="dark"] .cta-final .btn-primary{background:#0E141C;color:#E8EDF4}
:root[data-theme="dark"] .cta-final .btn-primary:hover{background:#16202E;color:#fff}

/* ------------------------------------------------------------ focus & motion
   The shared sheet's focus ring is the accent, which is right everywhere except
   inside the closing band — where the band IS the accent and the ring would be
   invisible against it. Inside the band the ring takes the colour the band's
   own text takes, so it is legible in both themes. */
.cta-final :focus-visible{outline-color:#fff}
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cta-final :focus-visible{outline-color:#0E141C} }
:root[data-theme="dark"] .cta-final :focus-visible{outline-color:#0E141C}

/* Skip link. The nav is short, but a keyboard user still has to walk the
   masthead on every page, and this is three lines. Off-canvas until focused. */
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--accent);color:#fff;
  font-family:var(--sans);font-weight:600;font-size:15px;padding:12px 18px;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .skip{color:#0E141C} }
:root[data-theme="dark"] .skip{color:#0E141C}

/* The site has no animation of its own; this covers the sheet's inherited
   transitions and the details marker for anyone who has asked for stillness. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* The shared sheet sizes the closing band's heading but leaves it on the body's
   1.6 line-height, which is a paragraph's leading on a 36px display line. */
.cta-final h2{line-height:1.14}

/* The hero quotation is sized to its own text rather than to the column: a
   pulled quotation that runs the full page width reads as a banner, and the
   empty half of the box is more conspicuous than the rule down its left edge. */
.hero-bodane .specimen{max-width:42rem}