/* ============================================================
   Triptik — /offre : styles propres à la landing
   Contient uniquement ce qui n'existe pas ailleurs :
   les 5 « scènes » animées, leur palette d'illustration et
   les quelques règles de mise en page héritées de la page.
   Les couleurs --a*, --s*, --wrap* ci-dessous sont la palette
   INTERNE des illustrations (maquettes d'écran, faux UI) :
   elles ne suivent pas --accent, c'est volontaire.
   ============================================================ */

/* Bandeau défilant (l'inline de la page appelle tkMarquee) */
@keyframes tkMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@keyframes tkflt{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes tks1b1{0%{opacity:0;transform:translateY(12px)}8%{opacity:1;transform:none}86%{opacity:1;transform:none}94%{opacity:0;transform:translateY(-6px)}100%{opacity:0}}
@keyframes tks1b2{0%,14%{opacity:0;transform:translateY(12px)}22%{opacity:1;transform:none}86%{opacity:1;transform:none}94%{opacity:0;transform:translateY(-6px)}100%{opacity:0}}
@keyframes tks1b3{0%,26%{opacity:0;transform:translateY(12px)}34%{opacity:1;transform:none}86%{opacity:1;transform:none}94%{opacity:0;transform:translateY(-6px)}100%{opacity:0}}
@keyframes tks1ph{0%,40%{opacity:0;transform:translateY(14px) scale(.94)}50%{opacity:1;transform:none}88%{opacity:1;transform:none}96%{opacity:0}100%{opacity:0}}
@keyframes fiF1{0%{opacity:0;transform:translateY(9px)}9%{opacity:1;transform:none}88%{opacity:1}95%{opacity:0}100%{opacity:0}}
@keyframes fiF2{0%,9%{opacity:0;transform:translateY(9px)}18%{opacity:1;transform:none}88%{opacity:1}95%{opacity:0}100%{opacity:0}}
@keyframes fiF3{0%,18%{opacity:0;transform:translateY(9px)}27%{opacity:1;transform:none}88%{opacity:1}95%{opacity:0}100%{opacity:0}}
@keyframes fiBtn{0%,30%{transform:scale(1);filter:brightness(1)}35%{transform:scale(.95);filter:brightness(.92)}40%{transform:scale(1);filter:brightness(1)}100%{transform:scale(1)}}
@keyframes fiPing{0%,40%{opacity:0;transform:translateY(9px) scale(.97)}48%{opacity:1;transform:translateY(0) scale(1.02)}54%{transform:scale(1)}90%{opacity:1;transform:scale(1)}96%{opacity:0;transform:scale(.98)}100%{opacity:0}}
@keyframes fiRing{0%,40%{opacity:0;transform:scale(.5)}47%{opacity:.55;transform:scale(1)}62%{opacity:0;transform:scale(2.1)}100%{opacity:0}}
@keyframes fiBell{0%,42%{transform:rotate(0)}47%{transform:rotate(15deg)}51%{transform:rotate(-12deg)}55%{transform:rotate(8deg)}59%{transform:rotate(0)}100%{transform:rotate(0)}}
@keyframes agRow1{0%,4%{opacity:0;transform:translateY(11px)}11%{opacity:1;transform:none}91%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes agRow2{0%,12%{opacity:0;transform:translateY(11px)}19%{opacity:1;transform:none}91%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes agRow3{0%,20%{opacity:0;transform:translateY(11px)}27%{opacity:1;transform:none}91%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes agRow4{0%,28%{opacity:0;transform:translateY(11px)}35%{opacity:1;transform:none}91%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes agChk1{0%,10%{opacity:0;transform:scale(.2)}16%{opacity:1;transform:scale(1.18)}20%{transform:scale(1)}91%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes agChk2{0%,18%{opacity:0;transform:scale(.2)}24%{opacity:1;transform:scale(1.18)}28%{transform:scale(1)}91%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes agChk3{0%,26%{opacity:0;transform:scale(.2)}32%{opacity:1;transform:scale(1.18)}36%{transform:scale(1)}91%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes agChk4{0%,34%{opacity:0;transform:scale(.2)}40%{opacity:1;transform:scale(1.18)}44%{transform:scale(1)}91%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes agRappel{0%,44%{opacity:0;transform:translateY(11px) scale(.96)}52%{opacity:1;transform:translateY(0) scale(1.02)}57%{transform:scale(1)}91%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes agBell{0%,53%{transform:rotate(0)}58%{transform:rotate(16deg)}62%{transform:rotate(-13deg)}66%{transform:rotate(9deg)}70%{transform:rotate(-5deg)}74%{transform:rotate(0)}100%{transform:rotate(0)}}
@keyframes agPulse{0%,54%{box-shadow:0 0 0 0 var(--pulse)}66%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes agDot{0%,54%{opacity:.4;transform:scale(.7)}60%{opacity:1;transform:scale(1)}74%{opacity:1}80%{opacity:.4;transform:scale(.7)}100%{opacity:.4}}
@keyframes deTrk{0%,8%{height:0}20%{height:40px}32%{height:80px}44%{height:120px}90%{height:120px}97%{height:0}100%{height:0}}
@keyframes deRelance{0%,2%{opacity:0;transform:translateY(-8px)}8%{opacity:1;transform:none}28%{opacity:1}36%{opacity:0;transform:translateX(-12px)}100%{opacity:0}}
@keyframes dePayee{0%,36%{opacity:0;transform:translateX(14px)}43%{opacity:1;transform:none}92%{opacity:1}97%{opacity:0;transform:translateY(-8px)}100%{opacity:0}}
@keyframes deN1{0%,6%{opacity:.32;transform:scale(.85)}12%{opacity:1;transform:scale(1)}90%{opacity:1}97%{opacity:.32;transform:scale(.85)}100%{opacity:.32}}
@keyframes deN2{0%,18%{opacity:.32;transform:scale(.85)}24%{opacity:1;transform:scale(1)}90%{opacity:1}97%{opacity:.32;transform:scale(.85)}100%{opacity:.32}}
@keyframes deN3{0%,30%{opacity:.32;transform:scale(.85)}36%{opacity:1;transform:scale(1)}90%{opacity:1}97%{opacity:.32;transform:scale(.85)}100%{opacity:.32}}
@keyframes deN4{0%,42%{opacity:.32;transform:scale(.85)}48%{opacity:1;transform:scale(1.18)}52%{transform:scale(1)}90%{opacity:1}97%{opacity:.32;transform:scale(.85)}100%{opacity:.32}}
@keyframes deLbl1{0%,6%{opacity:.4}12%{opacity:1}90%{opacity:1}97%{opacity:.4}100%{opacity:.4}}
@keyframes deLbl2{0%,18%{opacity:.4}24%{opacity:1}90%{opacity:1}97%{opacity:.4}100%{opacity:.4}}
@keyframes deLbl3{0%,30%{opacity:.4}36%{opacity:1}90%{opacity:1}97%{opacity:.4}100%{opacity:.4}}
@keyframes deLbl4{0%,42%{opacity:.4}48%{opacity:1}90%{opacity:1}97%{opacity:.4}100%{opacity:.4}}
@keyframes deFlash{0%,42%{opacity:0}48%{opacity:.8}57%{opacity:0}100%{opacity:0}}
@keyframes deAmt{0%,42%{opacity:0;transform:translateY(8px) scale(.9)}49%{opacity:1;transform:none}90%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes deReview{0%,48%{opacity:0;transform:scale(.5)}54%{opacity:1;transform:scale(1.06)}59%{transform:scale(.99)}63%{transform:scale(1.01)}67%{transform:scale(1)}90%{opacity:1;transform:scale(1)}97%{opacity:0;transform:scale(.98)}100%{opacity:0}}
@keyframes deReviewRing{0%,48%{opacity:0;transform:scale(.5)}54%{opacity:.5;transform:scale(1)}67%{opacity:0;transform:scale(2)}100%{opacity:0}}
@keyframes tkvid{0%{width:6%}70%{width:100%}80%{width:100%}88%{width:6%}100%{width:6%}}
@keyframes tkplay{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}
@keyframes tkbubA{0%,16%{opacity:0;transform:translateY(8px)}24%{opacity:1;transform:none}88%{opacity:1}95%{opacity:0}100%{opacity:0}}
@keyframes tkbubB{0%,42%{opacity:0;transform:translateY(8px)}50%{opacity:1;transform:none}88%{opacity:1}95%{opacity:0}100%{opacity:0}}
@keyframes tkBar{0%{width:6%}70%,86%{width:100%}100%{width:6%}}
@keyframes tkTrack{0%{height:0}76%,88%{height:100%}100%{height:0}}
@keyframes tkNode{0%{opacity:.26;transform:scale(.82)}6%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:.26;transform:scale(.82)}}
:root, [data-scene-theme="mono"] { --a1:#141310; --a2:#2E2A24; --a3:#453F35; --a4:#3A352D; --a5:#756A58; --s1:#E6E2D9; --s2:#E6E2D9; --s3:#E6E2D9; --s4:#E6E2D9; --s5:#E6E2D9; --d1:#CBC6BC; --d2:#CBC6BC; --d3:#CBC6BC; --t2:#F5F3EF; --b2:#E6E2D9; --g2:#CFC9BE; --t4:#F3F1EC; --b4:#E4E0D8; --k4:#2E2A24; --trk:#E2DED5; --pulse:rgba(13,13,13,.26); --glow:rgba(13,13,13,.13); --star:#3A352D; --wrap1:linear-gradient(160deg,#FCFBF8,#EFEDE8); --wrap2:linear-gradient(160deg,#FCFBF8,#EFEDE8); --wrap3:linear-gradient(160deg,#FCFBF8,#EFEDE8); --wrap4:linear-gradient(160deg,#FCFBF8,#EFEDE8); --wrap5:linear-gradient(160deg,#FCFBF8,#EFEDE8); --wb1:rgba(13,13,13,0.14); --wb2:rgba(13,13,13,0.14); --wb3:rgba(13,13,13,0.14); --wb4:rgba(13,13,13,0.14); --wb5:rgba(13,13,13,0.14); }
[data-scene-theme="color"] { --a1:#2D5BFF; --a2:#F59E0B; --a3:#16A34A; --a4:#7C3AED; --a5:#EC4899; --s1:#E5ECFF; --s2:#FEF6E0; --s3:#E2F7EC; --s4:#EDE6FE; --s5:#FCE7F1; --d1:#FF5F57; --d2:#FEBC2E; --d3:#28C840; --t2:#F7F4ED; --b2:#EFE6D2; --g2:#D8C9A6; --t4:#F4F0FE; --b4:#E4DCFB; --k4:#5B2BB5; --trk:#E4EBE7; --pulse:rgba(124,58,237,.32); --glow:rgba(22,163,74,.16); --star:#F5A623; --wrap1:linear-gradient(160deg,#FBFCFE,#EEF3FB); --wrap2:linear-gradient(160deg,#FEFCF7,#FBF3E4); --wrap3:linear-gradient(160deg,#FAFEFB,#EBF7EF); --wrap4:linear-gradient(160deg,#FCFBFF,#F0EBFD); --wrap5:linear-gradient(160deg,#FFFAFC,#FCE9F2); --wb1:#E4ECF8; --wb2:#F6E6C4; --wb3:#CFEEDB; --wb4:#E4DCFB; --wb5:#F8D7E8; }
@media (prefers-reduced-motion: reduce) { [data-tka] { animation: none !important; opacity: 1 !important; transform: none !important; width: auto !important; height: auto !important; } }
@media (max-width: 860px) {
  .tk-2col { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  .tk-step { grid-template-columns: 40px 1fr !important; gap: 16px !important; }
  .tk-step-tag { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; white-space: normal !important; }
  .tk-step-body { grid-column: 2 !important; grid-row: 2 !important; margin-top: 12px !important; }
}

/* ══════════════════════════════════════════════════════════
   Livrables : alternance gauche / droite
   ----------------------------------------------------------
   L'ORDRE DU DOM NE BOUGE PAS. Chaque bloc reste écrit dans le
   même sens — cellule 1 : sur-titre, titre, animation ;
   cellule 2 : description et points clés. Seul `order` inverse
   le rendu d'un bloc sur deux. La tabulation, l'ordre de
   lecture des lecteurs d'écran et le flux du document suivent
   toujours le HTML.

   Les proportions suivent l'inversion : la colonne qui porte
   l'animation garde sa largeur (0.85fr) qu'elle soit à gauche
   ou à droite. La scène ne change donc jamais de taille.

   Déclenchement des animations : scenes.js positionne chaque
   scène à partir de `top` et `height` de son rectangle, et son
   IntersectionObserver n'a que des marges verticales
   (`rootMargin: '20% 0px'`). Rien dans la chaîne ne lit `left`
   ni `right` : une inversion horizontale est sans effet sur le
   déclenchement comme sur la progression. Les `translateX` des
   keyframes (deRelance, dePayee) se jouent à l'intérieur de la
   boîte carrée de la scène, pas par rapport à la page.
   ══════════════════════════════════════════════════════════ */

.o-deliv {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(32px, 4vw, 64px) 0;
  /* La description et les points clés se calaient en haut de la
     rangée, donc au niveau du sur-titre — au-dessus du titre du
     bloc. Centrés, ils arrivent à hauteur de l'animation. */
  align-items: center;
}

/* Blocs 2 et 4 : description à gauche, animation à droite. */
.o-deliv:nth-of-type(even) { grid-template-columns: 1.15fr 0.85fr; }
.o-deliv:nth-of-type(even) > :first-child { order: 2; }
.o-deliv:nth-of-type(even) > :last-child  { order: 1; }

/* Petit écran : `.tk-2col` passe la grille en une seule colonne.
   L'ordre redevient celui du DOM pour TOUS les blocs — titre,
   animation, description, points clés — sans alternance.
   Même spécificité que la règle ci-dessus, placée après : c'est
   la source qui tranche, pas la média-requête. */
@media (max-width: 860px) {
  .o-deliv { align-items: start; }
  .o-deliv:nth-of-type(even) > :first-child,
  .o-deliv:nth-of-type(even) > :last-child { order: 0; }
}

/* ══════════════════════════════════════════════════════════
   Section « L'offre » : carte Pack recentrée
   ----------------------------------------------------------
   « Cas concret » étant masqué par showSocialProof, la grille
   à deux colonnes laissait sa seconde colonne vide — un
   rectangle gris à droite de la carte. Colonne unique, largeur
   de lecture, marges symétriques.

   Si showSocialProof repasse à `contents`, rétablir ici :
     .o-pack-grid { max-width: none;
                    grid-template-columns: 1.05fr 0.95fr; }
   ══════════════════════════════════════════════════════════ */

.o-pack-grid {
  margin: clamp(44px, 6vw, 90px) auto 0;
  max-width: 700px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}

/* Sous la carte : engagements déjà présents ailleurs sur la page.
   Même échelle que `.note` de l'accueil — 13 px, couleur `faint`. */
.o-pack-note {
  max-width: 700px;
  margin: var(--s-4) auto 0;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--faint);
  text-align: center;
  text-wrap: balance;
}

/* ── CTA hérités de la landing ─────────────────────────── */
.is-cta-solid       { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.is-cta-solid:hover { background: var(--cta-bg-hover) !important; transform: translateY(-2px); }

.is-cta-invert       { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.is-cta-invert:hover { background: var(--cta-bg-hover) !important; color: var(--cta-fg) !important; transform: translateY(-2px); }

.is-cta-ghost-dark       { transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.is-cta-ghost-dark:hover { background: var(--ghost-bg-hover) !important; border-color: var(--ink) !important; }

.is-cta-underline       { transition: color var(--dur) var(--ease); }
.is-cta-underline:hover { color: var(--ink) !important; }

.is-link-accent       { transition: color var(--dur) var(--ease); }
.is-link-accent:hover { color: var(--accent) !important; }

/* La FAQ utilise <details> natifs : on masque le marqueur par défaut. */
#faq summary::-webkit-details-marker { display: none; }
#faq details[open] summary > span:last-child { transform: rotate(45deg); }
#faq summary > span:last-child { display: inline-block; transition: transform var(--dur) var(--ease); }

/* ══════════════════════════════════════════════════════════
   Motifs extraits des styles inline de /offre/.
   La page en portait 414 ; les 56 valeurs répétées au moins
   deux fois sont regroupées ici. Les balises qui cumulaient
   déjà une classe ont été laissées telles quelles : leur style
   inline y servait de dérogation ponctuelle, le déplacer aurait
   changé qui gagne. Les couleurs littérales ci-dessous sont la
   palette interne des illustrations d'interface — la seule
   exception admise à la règle « tout passe par les tokens ».
   ══════════════════════════════════════════════════════════ */
.o-spec { margin:0; font-size:var(--step-0); line-height:1.55; padding-top:12px; border-top:1px solid var(--line-2); }
.o-ink { color:var(--ink); }
.o-q { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:24px; font-size:19px; font-weight:500; letter-spacing:-0.01em; line-height:var(--lh-snug); min-height:44px; }
.o-q-plus { font-size:22px; color:var(--accent); }
.o-a { margin:16px 0 0; font-size:var(--step-2); line-height:var(--lh-body); color:var(--muted); max-width:66ch; }
.o-wrap { max-width:var(--measure); margin:0 auto; padding:var(--pad-section-lg) var(--gutter); }
.o-eyebrow { margin:0 0 clamp(24px,3vw,40px); font-size:var(--step--1); font-weight:500; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--accent); }
.o-serif { font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; }
.o-kicker { margin:0 0 14px; font-size:var(--step--2); font-weight:500; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--accent); }
.o-h3 { margin:0; font-size:var(--step-4); line-height:1.1; letter-spacing:-0.025em; font-weight:700; }
.o-mt { margin-top:clamp(22px,2.5vw,32px); }
.o-lead { margin:0; font-size:var(--step-1); line-height:var(--lh-body); color:var(--muted); max-width:52ch; }
.o-grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px 32px; margin-top:28px; }
.o-li { margin:0; font-size:var(--step-1); padding:14px 0; border-top:1px solid var(--line-2); }
.o-faq-item { border-top:1px solid var(--line-2); padding:clamp(20px,2.4vw,28px) 0; }
.o-18 { font-size:18px; }
.o-spec-ink { margin:0; font-size:var(--step-0); line-height:1.55; color:var(--ink); padding-top:12px; border-top:1px solid var(--line-2); }
.o-ui-label { flex:none; width:42px; font-size:10px; font-weight:700; color:var(--a4); }
.o-ui-field { flex:1; display:flex; align-items:center; height:26px; padding:0 10px; border-radius:8px; background:var(--t4); border:1px solid var(--b4); font-size:11px; font-weight:500; color:var(--k4); }
.o-ui-row { position:relative; display:flex; align-items:center; gap:13px; }
.o-ui-dot { position:relative; flex:none; width:24px; height:24px; }
.o-step-num { position:relative; z-index:1; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line-strong); font-size:13px; font-weight:500; letter-spacing:0.06em; color:var(--muted); transition:background .45s ease,color .45s ease,border-color .45s ease; }
.o-h3-sm { margin:0; font-size:clamp(20px,2.2vw,28px); line-height:var(--lh-snug); letter-spacing:-0.02em; font-weight:700; }
.o-step-txt { margin:10px 0 0; font-size:var(--step-1); line-height:var(--lh-body); color:var(--muted); max-width:58ch; }
.o-kicker-flat { margin:0; font-size:var(--step--2); font-weight:500; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--accent); }
.o-16 { font-size:var(--step-1); }
.o-14-accent { font-size:var(--step-0); color:var(--accent); }
.o-14-track { font-size:var(--step--1); letter-spacing:0.18em; color:var(--accent); }
.o-quote { margin:0; font-size:clamp(20px,2.2vw,28px); line-height:1.3; letter-spacing:-0.02em; }
.o-note { margin:12px 0 0; font-size:var(--step-1); line-height:var(--lh-body); color:var(--muted); }
.o-ui-10 { font-size:10px; font-weight:700; color:#A8AEB8; }
.o-ui-115 { font-size:11.5px; font-weight:700; color:#15171C; }
.o-ui-10-muted { font-size:10px; color:var(--muted); }
.o-card { background:var(--bg); padding:var(--pad-card); display:flex; flex-direction:column; gap:24px; }
.o-quote-sm { margin:0; font-size:clamp(18px,1.8vw,22px); line-height:1.5; letter-spacing:-0.015em; }
.o-card-foot { margin:auto 0 0; font-size:14px; color:var(--muted); }
.o-accent { color:var(--accent); }
.o-eyebrow-lg { margin:0 0 clamp(28px,4vw,44px); font-size:var(--step--1); font-weight:500; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--accent); }
.o-ink-500 { color:var(--ink); font-weight:500; }
.o-row-rule { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--line-2); }
.o-marquee-group { display:flex; gap:64px; padding-right:64px; font-size:clamp(18px,2vw,26px); font-weight:500; letter-spacing:-0.01em; color:var(--ink); }
.o-faint { color:var(--faint); }
.o-ui-panel { flex:1; display:flex; flex-direction:column; gap:6px; border-radius:8px; background:#F4F6FA; padding:9px; }
.o-ui-sq { width:18px; height:18px; border-radius:6px; background:var(--s1); }
.o-ui-bar { height:6px; width:80%; border-radius:3px; background:#DDE2EA; }
.o-ui-blank { flex:1; height:18px; border-radius:5px; background:#F4F6FA; }
.o-ui-card { border-radius:14px; padding:15px; background:#fff; box-shadow:0 14px 32px rgba(28,46,92,.10); }
.o-ui-chip { display:flex; align-items:center; height:26px; padding:0 10px; border-radius:8px; background:var(--t2); border:1px solid var(--b2); }
.o-ui-125-w { font-size:12.5px; font-weight:700; color:#fff; }
.o-ui-12 { font-size:12px; font-weight:700; color:#15171C; }
.o-ui-12-body { font-size:12px; line-height:1.4; color:#3A4049; }
.o-h2 { margin:0; font-size:var(--step-6); line-height:var(--lh-tight); letter-spacing:-0.03em; font-weight:700; }
.o-col { display:flex; flex-direction:column; }
.o-li-13 { margin:0; font-size:var(--step-1); padding:13px 0; border-top:1px solid var(--line-2); }
.o-a-narrow { margin:16px 0 0; font-size:var(--step-2); line-height:var(--lh-body); color:var(--muted); }
.o-underline { border-bottom:1px solid var(--line-strong); }