/* ==========================================================================
   ATOM BUYERS CLUB — pages publiques (showroom, projets, fiche projet)
   Identité de la famille Atom, la même qu'Atom Living et que le back-office :
   - Instrument Serif (la didone du mot-type) pour titres, chapeaux et nombres ;
     DM Sans pour le corps et les libellés en petites capitales.
   - Papier, encre, bronze. Aucune ombre, aucun rayon sauf la pilule des
     contrôles. La profondeur vient des filets, la chaleur des photos.
   Chargée APRÈS le <style> de chaque page : les variables historiques
   (--bg, --cream, --gold…) gardent leur nom, seules leurs valeurs changent,
   puis les composants partagés sont redessinés ici.
   ========================================================================== */
:root {
  --paper: #f2ede4;
  --paper-2: #f7f3ec;
  --paper-3: #e9e2d6;
  --ink: #1a1613;
  --ink-2: #4a423a;
  --deep: #100d0b;
  --bronze: #8a6a3f;
  --gray: #6f675e;
  --glow: #ffce8a;
  --hair: rgba(26, 22, 19, 0.14);
  --hair-strong: rgba(26, 22, 19, 0.32);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Jetons historiques revalorisés */
  --bg: var(--paper);
  --bg2: var(--paper-2);
  --bg3: var(--paper-3);
  --cream: var(--ink);
  --cream-dim: var(--ink-2);
  --border: var(--hair);
  --dim: var(--gray);
  --gold: var(--bronze);
  --green: #2d5a3d;
  --red: #8b2635;
  --violet: var(--ink);
  --r: 0px;
  --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
}

html { overflow-x: clip; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.62;
  letter-spacing: -0.006em;
}
::selection { background: var(--ink); color: var(--paper); }
a { color: var(--ink); }
h1, h2, h3, .hero-title, .detail-title, .detail-name, .card-name,
.proj-card-title, .modal-title, .modal-confirm-title, .state-title,
.section-title, .finances-title, .stat-value, .fin-val-big {
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
}

/* Libellé utilitaire : petites capitales, chiffres tabulaires */
.util, .hero-eyebrow, .detail-eyebrow, .card-style, .proj-card-arr,
.stat-label, .sidebar-title, .detail-section-title, .match-tag,
.modal-label, .spec-label, .eq-card-title, .real-card-tag, .header-cta,
.card-stat-label, .proj-fin-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  font-feature-settings: "kern" 1, "tnum" 1;
}
.hero-eyebrow, .detail-eyebrow, .card-style, .proj-card-arr,
.match-tag, .real-card-tag { color: var(--bronze); }
.stat-label, .sidebar-title, .detail-section-title, .modal-label,
.spec-label, .eq-card-title, .header-cta, .card-stat-label,
.proj-fin-label { color: var(--gray); }

/* ---- Le filet signature : s'allume une fois, puis reste neutre ---------- */
.rule-lit {
  position: relative; height: 1px; border: 0; margin: 0;
  background: var(--hair); overflow: hidden;
}
.rule-lit::after {
  content: ""; position: absolute; inset: 0;
  transform-origin: left center; transform: scaleX(0); opacity: 0;
  background: var(--glow); box-shadow: 0 0 10px var(--glow);
  animation: rule-in 1100ms 350ms var(--ease-out-expo) forwards;
}
@keyframes rule-in {
  0%   { transform: scaleX(0); opacity: 1; }
  50%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .rule-lit::after { animation: none; } }

/* ---- La plaque (barre du haut) ------------------------------------------ */
.header {
  background: rgba(242, 237, 228, 0.92) !important;
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--hair) !important;
  padding-top: 16px; padding-bottom: 16px;
  color: var(--ink);
}
.header svg { color: var(--ink); }
.header svg path { fill: currentColor; }

/* Bascule Réalisations / Projets : pilule, état actif = encre */
.page-toggle {
  background: transparent; border: 1px solid var(--hair-strong);
  border-radius: 9999px; padding: 3px; gap: 2px;
}
.toggle-btn {
  border-radius: 9999px; padding: 7px 18px;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray);
}
.toggle-btn.active { background: var(--ink); color: var(--paper); }
.toggle-btn:not(.active):hover { color: var(--ink); }
@media (max-width: 480px) { .toggle-btn { padding: 7px 12px; letter-spacing: 0.12em; } }

/* ---- Héros -------------------------------------------------------------- */
.hero-title {
  font-size: clamp(2.6rem, 6.4vw, 4.75rem);
  line-height: 0.98; letter-spacing: -0.024em; margin-bottom: 20px;
  text-wrap: balance;
}
.hero-sub {
  font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-2);
  max-width: 34ch;
}
.hero-welcome { font-family: var(--serif); font-style: italic; color: var(--bronze); font-size: 1.15rem; }
.hero-rule { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) { .hero-rule { padding: 0 16px; } }

/* ---- Chiffres clés : séparés par des filets ----------------------------- */
.stats-bar { gap: 0 !important; }
.stat-item { padding: 6px 36px; border-left: 1px solid var(--hair); }
.stat-item:first-child { border-left: 0; }
.stat-value {
  font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1;
  letter-spacing: -0.02em; font-feature-settings: "tnum" 1; color: var(--ink);
}
.stat-label { margin-top: 10px; }
@media (max-width: 600px) { .stat-item { padding: 4px 16px; } }

/* ---- Filtres : petites pilules ------------------------------------------ */
.filter-pill {
  border-radius: 9999px; border: 1px solid var(--hair-strong); background: transparent;
  color: var(--ink-2); font-family: var(--sans);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 15px; transition: background .18s, color .18s, border-color .18s;
}
.filter-pill:hover { border-color: var(--ink); color: var(--ink); }
.filter-pill.active { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 500; }

/* ---- Cartes (réalisations et projets) : photo + texte, sans cadre ------- */
.grid { gap: 48px 28px !important; }
.card, .proj-card {
  background: transparent; border: 0; border-radius: 0; overflow: visible;
  transform: none !important;
}
.card:hover, .proj-card:hover { border-color: transparent; }
.card-img, .card-img-placeholder, .proj-card-img, .proj-card-img-ph {
  border-radius: 0; background: var(--paper-3);
  filter: brightness(0.95); transition: filter 600ms var(--ease-out-expo);
}
.card:hover .card-img, .proj-card:hover .proj-card-img { filter: brightness(1.04); }
.card-body, .proj-card-body { padding: 18px 0 0; }
.card-name, .proj-card-title {
  font-size: clamp(1.6rem, 2.4vw, 1.9rem); line-height: 1.05;
  letter-spacing: -0.016em; color: var(--ink); margin: 6px 0 6px;
}
.card-meta, .proj-card-meta { font-size: 0.8125rem; color: var(--gray); }
.card-stats { border-top: 1px solid var(--hair); padding-top: 12px; }
.card-stat-val { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1; font-feature-settings: "tnum" 1; }
.card-cta { margin-top: 16px; }
.btn-voir {
  display: inline-block; background: none; color: var(--ink); padding: 0 0 3px; border-radius: 0;
  border-bottom: 1px solid currentColor;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  transition: opacity .18s;
}
.card:hover .btn-voir { opacity: 0.6; }

/* Pastilles posées sur la photo */
.proj-card-promesse, .proj-card-vendu {
  border-radius: 9999px; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.16em; padding: 6px 12px;
  top: 12px; left: 12px;
}
.proj-card-promesse { background: var(--paper); color: var(--ink); border: 0; }
.proj-card-vendu { background: var(--deep); color: var(--paper); border: 0; }

/* Chiffres d'une carte projet : trois cellules entre filets */
.proj-card-fins {
  border: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  border-radius: 0; margin-bottom: 18px;
}
.proj-fin-cell { padding: 12px 12px 12px 0; border-right: 1px solid var(--hair); }
.proj-fin-cell + .proj-fin-cell { padding-left: 12px; }
.proj-fin-val {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 400; line-height: 1.05;
  font-feature-settings: "tnum" 1; color: var(--ink);
}
.proj-fin-val.gold { color: var(--bronze); }
.proj-fin-label { margin-top: 6px; font-size: 0.5625rem; }

/* ---- Boutons : la pilule, seule forme arrondie -------------------------- */
.btn-card-voir, .btn-match, .btn-voir-realisation, .btn-submit, .sidebar-cta,
.btn-interest, .modal-confirm-close, .sticky-btn-primary, .real-card-btn,
.btn-cancel, .btn-pdf, .btn-wa, .btn-wa-modal, .sticky-btn-wa {
  border-radius: 9999px !important;
  font-family: var(--sans);
  font-size: 0.6875rem !important; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  min-height: 2.9rem; box-shadow: none;
  transition: background .18s, color .18s, border-color .18s, opacity .18s;
}
/* Pleine (action principale) : encre sur papier, s'inverse au survol */
.btn-card-voir, .btn-match, .btn-voir-realisation, .btn-submit, .sidebar-cta,
.btn-interest, .modal-confirm-close, .sticky-btn-primary {
  background: var(--ink) !important; color: var(--paper) !important;
  border: 1px solid var(--ink) !important; opacity: 1;
}
.btn-card-voir:hover, .btn-match:hover, .btn-voir-realisation:hover, .btn-submit:hover,
.sidebar-cta:hover, .btn-interest:hover, .modal-confirm-close:hover, .sticky-btn-primary:hover {
  background: transparent !important; color: var(--ink) !important; opacity: 1;
}
.btn-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.sticky-btn-primary:active { transform: none; }
/* Filaire (action secondaire) */
.btn-cancel, .btn-pdf, .real-card-btn {
  background: transparent !important; color: var(--ink) !important;
  border: 1px solid var(--hair-strong) !important;
}
.btn-cancel:hover, .btn-pdf:hover, .real-card-btn:hover {
  background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important;
}
.btn-pdf { padding: 0 22px; }
/* WhatsApp garde sa couleur, mais en pilule */
.btn-wa, .btn-wa-modal { border: 0; }
.sticky-btn-wa { background: transparent; border: 1px solid rgba(37, 211, 102, 0.55); color: #1f8f4c; }
.sticky-btn-wa:hover { background: rgba(37, 211, 102, 0.1); }

/* ---- Barre d'action collante : papier + filet, sans halo ---------------- */
#detail-sticky-bar, #sticky-cta, #sticky-bar {
  background: rgba(242, 237, 228, 0.94) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--hair) !important;
  box-shadow: none !important;
}
.sticky-cta-wrap { background: none !important; animation: none !important; padding: 0 !important; border-radius: 0; }

/* ---- Fiches détail ------------------------------------------------------ */
.detail-back {
  color: var(--gray); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.detail-back:hover { color: var(--ink); }
.detail-name, .detail-title, .hero .hero-title {
  font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -0.022em;
}
.detail-meta, .hero-meta { color: var(--ink-2); }
.detail-section-title { border-bottom: 1px solid var(--hair); padding-bottom: 10px; }
.detail-desc, .section p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.7; }
.section-title { font-size: clamp(1.6rem, 2.6vw, 2rem); letter-spacing: -0.014em; }

.gallery-main, .gallery-main-img, .gallery-empty, .gallery-empty-ph, .realisation-card-cover,
.real-card-img, #gallery-placeholder { border-radius: 0 !important; }
.gallery-thumbs img { border-radius: 0; opacity: 0.55; outline: 0; border: 0; }
.gallery-thumbs img.active { opacity: 1; outline: 1px solid var(--ink); outline-offset: 2px; border-color: transparent; }

/* Avant / Après : pilule segmentée */
.ba-toggle, .gallery-toggle {
  display: inline-flex; border: 1px solid var(--hair-strong); border-radius: 9999px;
  padding: 3px; gap: 2px; overflow: visible;
}
.ba-btn, .gallery-btn {
  border: 0 !important; border-radius: 9999px !important; background: transparent;
  color: var(--gray); padding: 7px 16px;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.ba-btn.active, .gallery-btn.active { background: var(--ink); color: var(--paper); }

.equip-item, .ameublement-tag {
  background: transparent; border: 0; border-bottom: 1px solid var(--hair);
  border-radius: 0; padding: 9px 0; color: var(--ink-2); font-size: 0.875rem;
}
.equip-grid { gap: 0 24px; }
.eq-card { background: transparent; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: 18px 0 0; }
.eq-item svg { color: var(--bronze); }
.spec { border-bottom: 1px solid var(--hair); }
.spec-value { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; font-feature-settings: "tnum" 1; }

/* Colonne chiffrée : filets, pas de boîte */
.sidebar-card, .match-card, .finances, .real-card {
  background: transparent !important; border: 0 !important;
  border-top: 1px solid var(--ink) !important; border-radius: 0 !important;
  padding: 18px 0 8px !important;
}
.fin-row { border-bottom: 1px solid var(--hair); }
.fin-label, .fin-key { color: var(--gray); font-size: 0.8125rem; }
.fin-val { color: var(--ink); font-feature-settings: "tnum" 1; }
.fin-val.gold, .fin-val-big { color: var(--bronze); }
.fin-val-big { font-size: 1.6rem; }
.fin-row.fin-total { border-top: 1px solid var(--ink); }
.finances-title { font-size: 1.6rem; }
.statut-badge {
  border-radius: 9999px; background: transparent; color: var(--green);
  border: 1px solid rgba(45, 90, 61, 0.4);
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 11px;
}
.hero-statut-pill { border-radius: 9999px; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.hero-statut-pill.promesse { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hero-statut-pill.vendu { background: transparent; color: var(--ink-2); border: 1px solid var(--hair-strong); }
.match-title, .real-card-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; color: var(--ink); line-height: 1.1; }
.match-proj-item { border-bottom-color: var(--hair) !important; }

.plan-item, .plan-item-link, .plan-img-wrap {
  background: transparent; border-radius: 0; border: 1px solid var(--hair);
}
.plan-item:hover, .plan-item-link:hover, .plan-img-wrap:hover { border-color: var(--ink); }
.plan-item-name { color: var(--ink); }
.dpe-badge { border-radius: 2px; }

/* ---- Fenêtre modale ----------------------------------------------------- */
.modal-overlay { background: rgba(16, 13, 11, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-box {
  background: var(--paper); border: 1px solid var(--hair);
  border-radius: 0 !important; box-shadow: none;
}
.modal-title { font-size: 2rem; line-height: 1.05; letter-spacing: -0.016em; }
.modal-input {
  background: transparent; border: 0; border-bottom: 1px solid var(--hair-strong);
  border-radius: 0; padding: 11px 0; color: var(--ink); font-size: 1rem;
}
.modal-input:focus { outline: none; border-bottom-color: var(--ink); }
.modal-input::placeholder { color: rgba(26, 22, 19, 0.38); }
.modal-close { color: var(--gray); }
.modal-wa-post { background: transparent; border-top: 1px solid var(--hair); border-radius: 0; }

/* Pied de page */
footer { border-top: 1px solid var(--hair); color: var(--gray); }

/* Mot-type en pied de page et écrans d'état */
.state-sub { color: var(--gray); }

/* Vignettes de galerie : défilement sans barre */
.gallery-thumbs { scrollbar-width: none; }
.gallery-thumbs::-webkit-scrollbar { display: none; }
.hero-rule { margin-bottom: 44px; }

/* ==========================================================================
   Formulaire d'inscription (index.html) — panneau sombre + formulaire papier
   ========================================================================== */
:root {
  --bg-card: var(--paper-2);
  --bg-input: transparent;
  --border-focus: var(--ink);
  --gold-dim: var(--bronze);
  --danger: var(--red);
  --r-lg: 0px;
}
/* Panneau de gauche : la plaque sombre, texte papier */
.panel-left {
  --cream: var(--paper);
  --cream-dim: rgba(242, 237, 228, 0.62);
  --border: rgba(255, 255, 255, 0.16);
  --gold: rgba(242, 237, 228, 0.55);
  background: var(--deep) !important; color: var(--paper);
  border-right: 0 !important;
}
.panel-left::after { display: none; }
.logo { color: var(--paper); }
.logo svg path { fill: currentColor; }
.left-eyebrow { font-size: 0.6875rem; letter-spacing: 0.16em; }
.left-headline {
  font-family: var(--serif); font-weight: 400; font-synthesis: none;
  font-size: clamp(2.1rem, 3vw, 2.9rem); line-height: 1.02; letter-spacing: -0.02em;
}
.left-headline em { color: var(--paper); font-style: italic; }
.left-desc { font-family: var(--serif); font-size: 1.15rem; line-height: 1.42; color: rgba(242, 237, 228, 0.72); }
.trust-dot, .mobile-strip-dot { border-radius: 0; width: 14px; height: 1px; background: rgba(242, 237, 228, 0.5); }
.left-footer { opacity: 0.5; }

/* Formulaire */
.form-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.02; letter-spacing: -0.02em; }
.form-sub { font-family: var(--serif); font-size: 1.12rem; line-height: 1.4; color: var(--ink-2); }
.progress-bar span { border-radius: 0; height: 1px; background: var(--hair-strong); }
.progress-bar span.done { background: var(--ink); height: 2px; }
.progress-label { font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--gray); }
.progress-label b { color: var(--ink); }
.step-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -0.014em; }
.q legend, label, .arr-label { font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--gray); }
.choice { color: inherit; font-size: inherit; letter-spacing: normal; }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--hair-strong);
  border-radius: 0; padding: 12px 0; color: var(--ink);
}
input::placeholder, textarea::placeholder { color: rgba(26, 22, 19, 0.36); }
input:focus, select:focus, textarea:focus { border-bottom-color: var(--ink); box-shadow: none; }
input.err, select.err { border-bottom-color: var(--red); }
select option { background: var(--paper); color: var(--ink); }
.sel-wrap::after { right: 2px; border-top-color: var(--gray); }

/* Choix : filet, l'option retenue passe à l'encre */
.choice-body, .zone-btn, .arr-btn {
  background: transparent; border: 1px solid var(--hair-strong); border-radius: 0;
}
.choice-body:hover, .zone-btn:hover, .arr-btn:hover { border-color: var(--ink); color: var(--ink); }
.choice input:checked + .choice-body, .zone-btn.on {
  background: var(--ink); border-color: var(--ink);
}
.choice input:checked + .choice-body .choice-name,
.choice input:checked + .choice-body .choice-ico,
.zone-btn.on .zone-btn-name { color: var(--paper); }
.choice input:checked + .choice-body .choice-desc,
.zone-btn.on .zone-btn-sub { color: rgba(242, 237, 228, 0.7); }
.choice-ico { color: var(--bronze); }
.choice-tick { border-color: var(--hair-strong); }
.choice input:checked + .choice-body .choice-tick { background: var(--paper); border-color: var(--paper); }
.choice-tick::after { background: var(--ink); }
.zone-btn-tick { border-radius: 0; border-color: var(--hair-strong); }
.zone-btn.on .zone-btn-tick { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.arr-btn { color: var(--ink-2); }
.arr-btn.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.seg { border-color: var(--hair-strong); }
.seg button { color: var(--gray); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.arr-btn:focus-visible, .zone-btn:focus-visible, .seg button:focus-visible, .btn-back:focus-visible,
.btn-submit:focus-visible, .choice input:focus-visible + .choice-body { outline: 2px solid var(--ink); outline-offset: 2px; }

.reassure { background: transparent; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: 14px 0 0; color: var(--ink-2); }
.reassure svg { color: var(--bronze); }
.field-hint button { color: var(--ink); }
.btn-back {
  border-radius: 9999px; border: 1px solid var(--hair-strong); color: var(--ink);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.btn-back:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn-submit:active:not(:disabled) { transform: none; }

/* Confirmation */
.success-icon { border: 1px solid var(--ink); color: var(--ink); }
.success-title { font-family: var(--serif); font-weight: 400; font-size: 2.4rem; letter-spacing: -0.02em; }
.success-link {
  border-radius: 9999px; border: 1px solid var(--hair-strong); color: var(--ink);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.success-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.success-link.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.success-link.primary:hover { background: transparent; color: var(--ink); }

@media (max-width: 860px) {
  .panel-left { border-bottom: 0 !important; }
}

/* Chiffres clés sur mobile : trois colonnes égales, toujours alignées */
@media (max-width: 600px) {
  .stats-bar { display: grid !important; grid-template-columns: repeat(3, 1fr); padding: 0 16px !important; }
  .stat-item { padding: 2px 6px; }
  .stat-value { font-size: 1.45rem; white-space: nowrap; }
  .stat-label { font-size: 0.5625rem; letter-spacing: 0.1em; }
}