/* lab.valmetrics.com : mise en forme de la page Valab.
   Charte reprise de lp-pme-valmetrics et lp-cfo-valmetrics : un seul thème clair,
   gris neutres, rouge unique, bandes noires. */
/* Seul ajout de marque : « LAB » en rouge dans le mot-symbole Valab. */
/* Polices hébergées sur le site (Fontsource, licence SIL OFL 1.1), sous-ensemble latin.
   Versions variables : un seul fichier par famille couvre toutes les graisses. */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url("/assets/fonts/inter-latin-wght.woff2") format("woff2-variations"),url("/assets/fonts/inter-latin-wght.woff2") format("woff2")}
@font-face{font-family:"Roboto Mono";font-style:normal;font-display:swap;font-weight:100 700;src:url("/assets/fonts/roboto-mono-latin-wght.woff2") format("woff2-variations"),url("/assets/fonts/roboto-mono-latin-wght.woff2") format("woff2")}

:root{
  --paper:#ffffff;
  --panel:#ffffff;
  --surface:hsl(0 0% 96%);
  --surface-2:hsl(0 0% 93%);
  --ink:hsl(0 0% 10%);
  --ink-2:hsl(0 0% 32%);
  --muted:hsl(0 0% 41%);
  --line:hsl(0 0% 90%);
  --line-strong:hsl(0 0% 78%);
  --black:hsl(0 0% 6%);
  --accent:#a4161a;

  --ff:"Inter","Helvetica Neue",Arial,sans-serif;
  --ff-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shell:76rem;
  --gut:1.5rem;
  --sec:5.5rem;
  color-scheme:light;
}
@media (min-width:768px){:root{--gut:3rem}}
@media (min-width:1024px){:root{--gut:4rem}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{text-wrap:balance;margin:0;color:var(--ink);font-weight:700;letter-spacing:-.03em;line-height:1.12}
p{margin:0}
ul,dl,dd{margin:0;padding:0;list-style:none}

.shell{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding-left:max(var(--gut),env(safe-area-inset-left,0px));
  padding-right:max(var(--gut),env(safe-area-inset-right,0px));
}
.sec{padding-block:var(--sec)}
@media (max-width:640px){.sec{padding-block:3.5rem}}
.sec--tinted{background:var(--surface)}

/* Bande noire : on redéfinit les jetons, jamais les composants. */
.sec--dark{
  background:var(--black);color:#ffffff;
  --panel:rgba(255,255,255,.08);
  --paper:rgba(255,255,255,.08);
  --ink:#ffffff;
  --ink-2:rgba(255,255,255,.80);
  --muted:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.28);
  --surface:rgba(255,255,255,.05);
  --accent:#ff9195;
}

.claim{font-size:clamp(1.55rem,3vw,2.15rem);text-wrap:pretty;margin-block:3.5rem 2rem}
@media (max-width:640px){.claim{margin-block:2.5rem 1.5rem}}

.eyebrow{
  display:flex;align-items:center;gap:.75rem;
  font-family:var(--ff-mono);font-size:.75rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:1.25rem;
}
.eyebrow::before{content:"";display:block;width:1.75rem;height:2px;background:var(--accent);flex:none}
@media (max-width:640px){br.coupe{display:none}}

/* ---------- masthead ---------- */
.hdr{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.5rem}
.brand{display:flex;align-items:center;gap:.875rem;text-decoration:none;padding:.25rem 0}
.mark{display:block;flex:none}
.mark-embossed{overflow:visible}
.mark-embossed .m-face{fill:hsl(0 0% 11%)}
.ftr .mark-embossed .m-face{fill:hsl(0 0% 100%)}

/* Mot-symbole : VA + LAB. Le rouge souligne le jeu de mots, c'est tout. */
.wm{font-family:var(--ff-mono);font-size:.9375rem;font-weight:500;letter-spacing:.24em;color:var(--ink);line-height:1}
.wm b{font-weight:700;color:var(--accent)}
.wm small{display:block;margin-top:.35rem;font-size:.5625rem;font-weight:500;letter-spacing:.2em;color:var(--muted)}
@media (max-width:420px){.wm small{display:none}}

.nav{display:flex;align-items:center;gap:1.75rem}
.nav a{font-size:.875rem;color:var(--ink-2);text-decoration:none;padding-block:.25rem;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
@media (max-width:900px){.nav{display:none}}

.navtoggle{
  display:none;align-items:center;gap:.4rem;
  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:transparent;border:1px solid var(--line-strong);
  border-radius:3px;padding:.55rem .75rem;cursor:pointer;min-height:2.5rem;
}
.navtoggle:hover{color:var(--ink);border-color:var(--ink-2)}
.navtoggle__bars{display:inline-flex;flex-direction:column;gap:3px;width:14px}
.navtoggle__bars i{display:block;height:1.5px;background:currentColor;transition:transform .18s ease,opacity .18s ease}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}
@media (max-width:900px){.navtoggle{display:inline-flex}}

.menu{border-top:1px solid var(--line-strong);background:#ffffff}
.menu ul{display:flex;flex-direction:column}
.menu a{display:block;padding:.9rem 0;font-size:1rem;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.menu li:last-child a{border-bottom:0}
.menu a:hover{color:var(--ink)}
.menu .btn{margin-block:1.25rem;width:100%;justify-content:center}
@media (min-width:901px){.menu{display:none!important}}

.hdr__cta .lbl-short{display:none}
@media (max-width:560px){
  .hdr .hdr__cta{padding-inline:.75rem;font-size:.8125rem}
  .hdr__cta .lbl-long{display:none}
  .hdr__cta .lbl-short{display:inline}
  .navtoggle{padding:.55rem .6rem;font-size:0;gap:0}
  .navtoggle .navtoggle__bars{width:16px}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  background:var(--ink);color:#ffffff;text-decoration:none;
  font-size:.9375rem;font-weight:500;white-space:nowrap;
  height:48px;padding-inline:1.75rem;border:1px solid var(--ink);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--ink);background:transparent}
.sec--dark .btn{background:#ffffff;color:hsl(0 0% 6%);border-color:#ffffff}
.sec--dark .btn:hover{background:transparent;color:#ffffff}
.hdr .hdr__cta{height:2.5rem;padding-inline:1.125rem;font-size:.875rem}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- hero ---------- */
.hero{padding-block:5rem 4rem;--hero-col:60rem}
@media (max-width:640px){.hero{padding-block:3rem 2.5rem}}
.hero h1{font-size:clamp(2.5rem,5.6vw,4rem);letter-spacing:-.04em;line-height:1.06;max-width:var(--hero-col)}
.hero h1 em{font-style:normal;color:var(--ink);box-shadow:inset 0 -.09em 0 var(--accent)}
.hero__lede{margin-top:clamp(2.25rem,4vw,3rem);font-size:clamp(1.0625rem,1.6vw,1.1875rem);line-height:1.75;color:var(--ink-2);max-width:var(--hero-col)}
.hero__lede strong{color:var(--ink);font-weight:600}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}
@media (max-width:640px){.hero__cta .btn{width:100%}}

.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.badge{
  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line-strong);border-radius:2px;padding:.3rem .6rem;
}
.badge--co{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink)}
.flag{width:.8125rem;height:.8125rem;flex:0 0 auto;border-radius:1px;display:block}

.keyline{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin-top:3.5rem}
.keyline > div{padding:1.5rem;border-right:1px solid var(--line);min-width:0}
.keyline > div:last-child{border-right:0}
.keyline dt{font-family:var(--ff-mono);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:.75rem}
.keyline dd{margin:0;font-size:.9375rem;color:var(--ink-2);line-height:1.55}
@media (max-width:760px){
  .keyline{grid-template-columns:1fr}
  .keyline > div{border-right:0;border-bottom:1px solid var(--line)}
  .keyline > div:last-child{border-bottom:0}
}

/* ---------- section head ---------- */
.head{margin-bottom:3rem;max-width:60rem}
.head h2{font-size:clamp(1.875rem,3.4vw,2.25rem);text-wrap:pretty}
.head p{margin-top:1.25rem;color:var(--muted);font-size:1.0625rem;line-height:1.8}

/* ---------- constats ---------- */
.constats{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
@media (max-width:820px){.constats{grid-template-columns:1fr;gap:2rem}}
.constat h3{font-size:1.0625rem;font-weight:600;margin-bottom:.625rem}
.constat p{color:var(--ink-2);font-size:.9375rem;line-height:1.62}
.constat__rule{width:2rem;height:2px;background:var(--accent);margin-bottom:1rem}

/* ---------- principe (piliers) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
@supports (grid-template-rows:subgrid){
  @media (min-width:901px){
    .pillars{grid-template-rows:auto 1fr}
    .pillar{display:grid;grid-template-rows:subgrid;grid-row:span 2}
  }
}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}
.pillar{padding:2.25rem 1.75rem 2.25rem 0;border-bottom:1px solid var(--line);min-width:0}
.pillar + .pillar{padding-left:1.75rem;border-left:1px solid var(--line)}
@media (max-width:900px){
  .pillar{padding:2rem 0}
  .pillar + .pillar{padding-left:0;border-left:0}
}
.pillar h3{font-size:clamp(1.3125rem,1.9vw,1.5rem);margin-bottom:1.25rem}
.pillar h3::before{content:"";display:block;width:1.75rem;height:2px;background:var(--accent);margin-bottom:1rem}
.pillar li{font-size:.9375rem;line-height:1.5;color:var(--ink-2);padding-block:.5rem;border-top:1px solid var(--line)}
.pillar li:first-child{border-top:0;padding-top:0}
.pillar li b{font-weight:500;color:var(--ink)}

/* ---------- protocole ---------- */
/* Cinq étapes réellement ordonnées : la numérotation porte l'information. */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
@media (max-width:1060px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:.75rem;min-width:0}
.step__n{font-family:var(--ff-mono);font-size:.75rem;font-weight:500;letter-spacing:.14em;color:var(--accent)}
.step h3{font-size:1.1875rem}
.step p{font-size:.9375rem;color:var(--ink-2);line-height:1.6}
.step__out{margin-top:auto;padding-top:.875rem;border-top:1px solid var(--line)}
.step__out dt{font-family:var(--ff-mono);font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.step__out dd{font-size:.875rem;font-weight:500;color:var(--ink);margin-top:.2rem}
@media (max-width:1060px){
  .step{display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:1rem;row-gap:.5rem}
  .step > *{grid-column:2}
  .step__n{grid-column:1;grid-row:1 / span 2;padding-top:.3rem}
  .step__out{margin-top:.5rem}
}
.steps__note{margin-top:1.25rem;font-size:.875rem;color:var(--muted)}

/* ---------- défis ---------- */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:760px){.cases{grid-template-columns:1fr}}
.case{background:var(--panel);color:var(--ink);padding:2rem;min-width:0}
.case__who{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.875rem}
.case h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.75rem}
.case p{font-size:.9375rem;color:var(--muted);line-height:1.65}
.chips{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.375rem}
.chips li{font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);padding:.2rem .45rem;border-radius:2px}

/* ---------- règles ---------- */
.rules{border-bottom:1px solid var(--line-strong)}
.rule{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:2rem;padding-block:1.75rem;border-top:1px solid var(--line-strong)}
.rule dt{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.rule dd{font-size:.9375rem;color:var(--ink-2);line-height:1.65;max-width:44rem}
@media (max-width:768px){.rule{grid-template-columns:1fr;gap:.5rem}}

/* ---------- offre ---------- */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
@media (max-width:900px){.offers{grid-template-columns:1fr}}
.offer{border:1px solid var(--line);padding:2rem;display:flex;flex-direction:column;gap:1rem;background:var(--panel);min-width:0}
.offer__body{display:flex;flex-direction:column;gap:1rem}
@supports (grid-template-rows:subgrid){
  @media (min-width:901px){
    .offers{grid-template-rows:auto auto 1fr auto}
    .offer{display:grid;grid-template-rows:subgrid;grid-row:span 4}
    .offer .price{margin-top:0}
  }
}
.offer--lead{background:var(--surface-2);border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.offer__kind{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.offer h3{font-size:1.1875rem}
.offer p{font-size:.9375rem;color:var(--ink-2);line-height:1.6}
.offer .ticks li{position:relative;padding-left:1rem;font-size:.875rem;color:var(--ink-2);line-height:1.55;padding-block:.2rem}
.offer .ticks li::before{content:"";position:absolute;left:0;top:.95em;width:.5rem;height:1px;background:var(--ink-2)}

.price{margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--line-strong)}
.price__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:.45rem}
.price__lbl{font-size:.8125rem;line-height:1.4;color:var(--ink-2)}
.price__v{font-family:var(--ff-mono);font-size:.9375rem;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;flex:0 0 auto}
.price__note{font-size:.75rem;color:var(--muted);line-height:1.5;margin-top:.875rem}

/* ---------- profil ---------- */
.profile{display:grid;grid-template-columns:17rem 1fr;gap:3rem;align-items:start}
@media (max-width:820px){.profile{grid-template-columns:1fr;gap:2rem}}
.portrait{aspect-ratio:4/5;max-width:100%;padding:.5rem;background:var(--panel);border:1px solid var(--line-strong);display:flex}
@media (max-width:820px){.portrait{max-width:15rem}}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
.profile h2{font-size:clamp(1.55rem,3vw,2.15rem);margin-bottom:.375rem}
.profile__role{font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1.5rem}
.profile p{color:var(--ink-2);font-size:1rem;line-height:1.66;margin-bottom:1rem;max-width:58ch}

.cvs{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
@media (max-width:760px){.cvs{grid-template-columns:1fr;gap:2rem}}
.cv__grp{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:.75rem;border-bottom:1px solid var(--line-strong)}
.cv__row{display:flex;justify-content:space-between;gap:1.5rem;padding-block:.75rem;border-bottom:1px solid var(--line);font-size:.9375rem}
.cv__row b{font-weight:500}
.cv__row span{color:var(--muted);text-align:right}
@media (max-width:560px){
  .cv__row{flex-direction:column;gap:.15rem}
  .cv__row span{text-align:left}
}

/* ---------- rendez-vous ---------- */
.cta > .shell{max-width:80rem}
.cta__head{margin-bottom:2.5rem;max-width:56rem}
.cta h2{font-size:clamp(1.5rem,2.8vw,2rem);text-wrap:pretty}
.cta__head p{margin-top:1rem;color:var(--ink-2)}
.cal{position:relative;min-height:22rem}
.cal__fallback{
  position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;text-align:center;padding:2rem;
}
.cal__fallback p{font-size:.9375rem;color:var(--muted);max-width:42ch;line-height:1.6}
/* Le widget occupe toute la largeur de la section ; data-resize ajuste sa hauteur
   à chaque étape (date, heure, formulaire), sans barre de défilement interne. */
.calendly-inline-widget{position:relative;z-index:1;min-width:0!important;width:100%}
.calendly-inline-widget iframe{display:block;width:100%!important}
/* Tant que Calendly n'a rien injecté, le cadre vide ne doit pas masquer le bouton de repli. */
.calendly-inline-widget:empty{pointer-events:none;height:22rem!important}
/* E-mail affiché au clic, comme sur cfo.valmetrics.com. */
.email{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:2rem}
.email-link{font-family:var(--ff-mono);font-size:.9375rem;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px;user-select:all}

/* ---------- pied de page ---------- */
.ftr{background:var(--black);color:rgba(255,255,255,.62);padding-block:2.5rem 3rem;font-size:.875rem}
.ftr__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem}
.ftr a{color:rgba(255,255,255,.80);text-decoration:none}
.ftr a:hover{color:#ffffff}

/* ---------- lien d'évitement ---------- */
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:#ffffff;padding:.75rem 1rem;font-size:.875rem;text-decoration:none}
.skip:focus{top:1rem}

/* ---------- corrections responsive ---------- */
/* Le bouton du menu mobile garde l'aspect d'un bouton : la règle .menu a
   (bloc, texte gris) ne doit pas s'y appliquer. */
.menu a.btn{display:flex;align-items:center;justify-content:center;color:#ffffff;padding:0 1.75rem;border:1px solid var(--ink)}
.menu a.btn:hover{color:var(--ink);background:transparent}
/* Bouton secondaire sur fond noir : transparent, bordure claire. */
.sec--dark .btn--ghost{background:transparent;color:#ffffff;border-color:var(--line-strong)}
.sec--dark .btn--ghost:hover{border-color:#ffffff;background:transparent;color:#ffffff}

/* ---------- confidentialité ---------- */
.moments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
@media (max-width:760px){.moments{grid-template-columns:1fr}}
.moment{background:var(--panel);padding:2rem;display:flex;flex-direction:column;gap:.75rem;min-width:0}
.moment__when{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.moment h3{font-size:1.1875rem}
.moment p{font-size:.9375rem;color:var(--ink-2);line-height:1.65}

.subhead{font-size:clamp(1.25rem,2.2vw,1.5rem);margin-block:4rem 1.5rem}
@media (max-width:640px){.subhead{margin-block:3rem 1.25rem}}
.subhead__intro{margin:-.75rem 0 1.5rem;color:var(--muted);font-size:.9375rem;max-width:44rem}

/* Trois étapes : même composant que le protocole, sur trois colonnes. */
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){
  .steps--3{grid-template-columns:1fr}
  .steps--3 .step{display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:1rem;row-gap:.5rem}
  .steps--3 .step > *{grid-column:2}
  .steps--3 .step__n{grid-column:1;grid-row:1 / span 2;padding-top:.3rem}
}
@media (min-width:861px) and (max-width:1060px){
  .steps--3 .step{display:flex}
  .steps--3 .step > *{grid-column:auto}
}

/* Cinq niveaux : la jauge indique le degré de protection, de 1 à 5. */
.levels{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-strong)}
.level{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:2rem;padding-block:1.5rem;border-bottom:1px solid var(--line-strong)}
@media (max-width:768px){.level{grid-template-columns:1fr;gap:.625rem}}
.level__head{display:flex;flex-direction:column;gap:.625rem}
.level h4{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.level p{font-size:.9375rem;color:var(--ink-2);line-height:1.65;max-width:44rem}
.level p b{font-weight:600;color:var(--ink)}
.level__gauge{display:inline-flex;gap:3px}
.level__gauge i{display:block;width:1.25rem;height:4px;background:var(--line-strong)}
.level__gauge i.on{background:var(--ink)}