/* ============================================================
   AUSBAU der Social-Media-Seite (social-media-marketing.html, html.smx). Liegt ueber site-1.css.
   Entstanden in der Testkopie (sm-test.html mit sm-test.css), seit 28.10.2026 live; beide Dateien stimmen ueberein.
   Vorgabe (Eigentuemer, 26.10.2026): Farbschema bleibt wie auf der echten Seite,
   geaendert wird der Aufbau der einzelnen Sections; dazu Effekte in den
   vorhandenen Farben (sm-test.js). Die Scroll-Logik aus site-1.js bleibt
   unberuehrt - alles, was sie misst, misst sie hier einfach neu.
   ============================================================ */
@property --smx-a{ syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html.smx{ --x-ease: cubic-bezier(.22,.8,.2,1); }

/* Ueberschriften am Desktop groesser und enger (Handy bleibt bei 20 px: dort zaehlt jede Zeile fuer die Anhalte-Stellen) */
@media (min-width: 761px) and (max-width: 1279px){ html.smx{ --t-h1: 26px; } }
@media (min-width: 1280px){ html.smx{ --t-h1: 40px; } }
@media (min-width: 1800px){ html.smx{ --t-h1: 46px; } }
html.smx .ix-title, html.smx .si-kicker, html.smx .stats-title, html.smx .s2-title,
html.smx .s3-title, html.smx .s4-title{ letter-spacing: -0.035em; }

/* ============================================================ Effekte ============================================================ */
/* Einflug der Section-Ueberschriften (sm-test.js zerlegt sie): Woerter (.smx-w) steigen einzeln auf;
   Akzente (.smx-wu: kursiv, Verlauf) bleiben ganz und blenden an ihrer Stelle in der Reihe ein -
   so bricht jede Zeile genau wie im Original um. */
html.smx .smx-w{ display: inline-block; }
html.smx .smx-split .smx-w{ opacity: 0; transform: translate3d(0, .5em, 0) rotate(3deg); transform-origin: 0 100%;
  filter: blur(8px);
  transition: opacity .7s ease, transform 1s var(--x-ease), filter .8s ease;
  transition-delay: calc(var(--wi, 0) * 38ms); }
html.smx .smx-split .smx-wu{ opacity: 0; filter: blur(8px); transition: opacity .9s ease, filter .9s ease;
  transition-delay: calc(var(--wi, 0) * 38ms); }
html.smx .smx-split.smx-in .smx-w, html.smx .smx-split.smx-in .smx-wu{ opacity: 1; transform: none; filter: blur(0); }
@media (max-width: 760px){ html.smx .smx-split .smx-w, html.smx .smx-split .smx-wu{ filter: none; } }
@media (prefers-reduced-motion: reduce){
  html.smx .smx-split .smx-w, html.smx .smx-split .smx-wu{ opacity: 1; transform: none; filter: none; transition: none; }
}

/* Feine Koernung ueber allem (neutral grau, am Desktop leicht flimmernd) */
.smx-grain{ position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){ .smx-grain{ animation: smx-grain .9s steps(4) infinite; } }
@keyframes smx-grain{
  0%{ background-position: 0 0; } 25%{ background-position: -46px 31px; }
  50%{ background-position: 63px -22px; } 75%{ background-position: -18px -57px; } 100%{ background-position: 0 0; }
}

/* Mauszeiger (Desktop): Punkt + Ring wie auf der Startseite, ueber Links voller Kreis */
.smx-cursor{ display: none; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine){
  .has-smx-cursor, .has-smx-cursor *{ cursor: none !important; }
  .smx-cursor{ display: block; position: fixed; inset: 0; z-index: 9999; pointer-events: none; mix-blend-mode: difference;
    opacity: 0; transition: opacity .3s ease; }
  .smx-cursor.is-on{ opacity: 1; }
  .smx-cursor i{ position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
  .smx-cursor-dot{ width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; transition: width .3s ease, height .3s ease, margin .3s ease; }
  .smx-cursor-ring{ width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid #fff;
    transition: width .45s var(--x-ease), height .45s var(--x-ease), margin .45s var(--x-ease), background .3s ease; }
  .smx-cursor.is-hot .smx-cursor-ring{ width: 76px; height: 76px; margin: -38px 0 0 -38px; background: #fff; }
  .smx-cursor.is-hot .smx-cursor-dot{ width: 0; height: 0; margin: 0; }
  .smx-cursor.is-down .smx-cursor-ring{ width: 26px; height: 26px; margin: -13px 0 0 -13px; }
}

/* Stromstoesse: ein blauer Lichtstreifen laeuft in Abstaenden die rechte Linie hinab und die Kopflinie entlang */
html.smx .grid-frame .gl-vright{ clip-path: inset(0 -3px); }
html.smx .grid-frame .gl-head{ clip-path: inset(-3px 0); }
html.smx .gl-vright::after{ content: ""; position: absolute; left: -1px; top: 0; width: 3px; height: 22vh;
  background: linear-gradient(to bottom, transparent, #2c5cff 80%, transparent);
  transform: translateY(-25vh); animation: smx-volt-y 6.5s cubic-bezier(.55,0,.3,1) infinite; }
html.smx .gl-head::after{ content: ""; position: absolute; top: -1px; left: 0; height: 3px; width: 24vw;
  background: linear-gradient(to right, transparent, #2c5cff 80%, transparent);
  transform: translateX(-26vw); animation: smx-volt-x 8s cubic-bezier(.55,0,.3,1) 2s infinite; }
@keyframes smx-volt-y{ 0%{ transform: translateY(-25vh); } 45%, 100%{ transform: translateY(105vh); } }
@keyframes smx-volt-x{ 0%{ transform: translateX(-26vw); } 40%, 100%{ transform: translateX(104vw); } }

/* Zahlen: ein heller Lichtstreifen umrundet die blaue Leitkarte */
html.smx .stats-card.is-lead::after{ content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; padding: 1.5px;
  background: conic-gradient(from var(--smx-a), transparent 0 64%, #8fb0ff 74%, #fff 78%, transparent 84%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: smx-spin 5s linear infinite; }
@keyframes smx-spin{ to{ --smx-a: 360deg; } }

/* Kundenfall: das Bild deckt sich von oben nach unten auf, mit der Maus zoomt es leicht */
html.smx #sCase .ix-media img{ transition: transform 1.4s var(--x-ease), clip-path 1.4s var(--x-ease); }
html.smx #sCase .ix-media:hover img{ transform: scale(1.04); }
html.smx #sCase .ix-media.smx-clip img{ clip-path: inset(0 0 100% 0); }
html.smx #sCase .ix-media.smx-clip.smx-in img{ clip-path: inset(0 0 0 0); }

/* Fuss: ein blauer Lichtstreifen zieht langsam durch die grosse Wortmarke */
html.smx .ft-mark span{ background: linear-gradient(100deg, var(--ink) 0 42%, #2c5cff 50%, var(--ink) 58% 100%);
  background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; animation: smx-sweep 7s var(--x-ease) infinite; }
html.smx .ft-mark i{ -webkit-text-fill-color: #2c5cff; }
@keyframes smx-sweep{ 0%{ background-position: 100% 0; } 60%, 100%{ background-position: 0% 0; } }

/* Knoepfe: Magnet (sm-test.js, CSS translate) - nur der Uebergang */
html.smx .cta-btn, html.smx .pb-action, html.smx .ix-btn, html.smx .ft-btn{ transition: translate .5s var(--x-ease), transform .25s ease, background .25s ease, box-shadow .25s ease; }

@media (prefers-reduced-motion: reduce){
  html.smx .gl-vright::after, html.smx .gl-head::after{ display: none; }
  html.smx .ft-mark span, html.smx .stats-card.is-lead::after{ animation: none; }
}

/* ---- Flaechen: ueberall dasselbe verblasste Weiss wie Knoepfe, kleine Zahlenkarten, Fragekasten und Bildflaeche
        (#F1F1F0) statt reinem Weiss - Vorgabe des Eigentuemers, 26.10.2026. Die blaue Ergebnis-Tafel bleibt blau. ---- */
html.smx{ --card-light: #F1F1F0; }
html.smx .side-panel, html.smx .ft-top:not(:hover){ background: #F1F1F0; }
/* Kundenfall-Tafeln: Inhaltsflaeche im verblassten Weiss. Am Desktop hebt sich der Streifen mit der hochkant stehenden
   Beschriftung leicht grau davon ab (wie im Original Grau neben Weiss); am Handy sind alle Tafeln einheitlich.
   Der Text steht ausdruecklich linksbuendig (Meldung des Eigentuemers 28.10.2026: Zeilen erschienen zentriert). */
html.smx .case-panel:not(.case-panel--result), html.smx .case-panel:not(.case-panel--result) .cp-body{ background: #F1F1F0; }
@media (min-width: 761px){
  html.smx .case-panel:not(.case-panel--result){ background: #E7E7E5; }
  /* Kein Spalt zwischen Streifen und Inhaltsflaeche: Er hatte die Streifenfarbe, die Beschriftung stand dadurch
     links naeher am Rand als rechts. So ist der Streifen genau so breit wie eine geschlossene Tafel. */
  html.smx .case-panel{ gap: 0; }
  /* Die feste Textbreite (site-1.js, gerundet) kann knapp unter der Tafelbreite liegen: den Rest fuellt die offene
     Inhaltsflaeche, sonst bleibt rechts eine Haarlinie in Streifenfarbe stehen. */
  html.smx .case-panel.is-open .cp-body{ flex-grow: 1; }
}
html.smx .cp-body, html.smx .cp-body p{ text-align: left; }

/* ============================================================ Aufbau ============================================================ */

/* ---- Problem (Desktop): Der Kasten waechst nicht mehr mit der Fensterhoehe - sonst wird die Illustration
        (Breite = Kastenhoehe x Bildverhaeltnis, site-1.js) riesig, der Text schmal und Reiter wie Knoepfe zu
        leeren Flaechen. Die zwei Knoepfe stehen als flache Reihe darunter (wie im Original unter 1400 px).
        Ab 901 px: Reiter fuellen ihre Spalte gleichmaessig, die Textspalte bekommt mehr Anteil. ---- */
@media (min-width: 761px){
  html.smx .ix--problem .pb-layout{ --pb-act-h: clamp(76px, 9vh, 104px);
    grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--pb-act-h);
    max-height: calc(clamp(330px, 42vh, 560px) + var(--pb-act-h) + clamp(16px, 1.6vw, 26px)); }
  html.smx .ix--problem .pb-actions{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
  html.smx .ix--problem .pb-action{ flex-direction: row; align-items: center; justify-content: space-between; gap: 16px;
    font-size: var(--t-h3); padding: 0 clamp(18px, 1.8vw, 28px); }
  html.smx .ix--problem .pb-action-arrow{ margin: 0; align-self: center; }
}
@media (min-width: 901px){
  html.smx .ix--problem .pb{ grid-template-columns: minmax(150px, .6fr) minmax(0, 1.4fr) var(--pb-image-width, 240px); }
  html.smx .ix--problem .pb-tab{ flex: 1 1 0; justify-content: center; }
}

/* ---- Philosophie (Desktop ab 1101 px, darunter sind die Grundsaetze ausgeblendet): die zwei Grundsaetze ohne
        Kaesten - als ruhige Zeile unter dem Text, feine Linie darueber, zwei Spalten mit Trennlinie dazwischen.
        Vorher: zwei graue Kaesten, unter 1400 px schmal untereinander.
        Die Linien haengen an den beiden Grundsaetzen, nicht an der Zeile: site-1.js blendet die Grundsaetze ein
        und aus, eine Linie an der Zeile stuende sonst schon in der Philosophie-Phase im Bild. Abstand ueber und
        unter der Linie gleich (--gs-gap). ---- */
@media (min-width: 1101px){
  /* Block statt Raster: Ein Raster weicht der unsichtbaren Form rechts (site-1.js, Text fliesst um den Baum)
     ganz aus und wird schmal; Zeilen weichen nur dem Baum selbst aus. Die beiden Spalten stehen deshalb als
     Inline-Elemente nebeneinander; Schriftgroesse 0 an der Zeile nimmt den Wortabstand dazwischen weg. */
  html.smx #siPrinciples{ --gs-gap: clamp(20px, 2.6vh, 30px); display: block; max-width: 780px; font-size: 0;
    margin-top: var(--gs-gap); }
  html.smx #siPrinciples .si-principle{ display: inline-flex; vertical-align: top; width: 50%; box-sizing: border-box;
    background: none; gap: 14px; border-top: 1px solid var(--line); padding: var(--gs-gap) clamp(18px, 2vw, 34px) 0 0; }
  html.smx #siPrinciples .si-principle + .si-principle{ border-left: 1px solid var(--line); padding: var(--gs-gap) 0 0 clamp(18px, 2vw, 34px); }
  html.smx #siPrinciples .si-principle-icon{ width: 26px; height: 26px; flex: 0 0 26px; }
  html.smx #siPrinciples .si-principle p{ margin-top: 6px; }
  /* Zu wenig Platz neben dem Baum (sm-test.js): untereinander, jeder Grundsatz mit seiner Linie darueber */
  html.smx #siPrinciples.smx-gs-eng .si-principle{ width: 100%; padding: var(--gs-gap) 0 0; }
  html.smx #siPrinciples.smx-gs-eng .si-principle + .si-principle{ border-left: 0; margin-top: var(--gs-gap); padding: var(--gs-gap) 0 0; }
}

/* ---- Zahlen (ab 1201 px): Bento statt Reihe - die Leitkarte steht hoch links, die beiden anderen rechts uebereinander ---- */
@media (min-width: 1201px){
  html.smx .stats-grid{ grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr));
    align-items: stretch; }
  html.smx .stats-card.is-lead{ grid-row: 1 / span 2; grid-column: 1; min-height: clamp(320px, 31vw, 470px); }
  /* site-1.js setzt die kleinen Karten auf 2/3 der Leitkarte. Hier bestimmen die beiden zusammen die Hoehe der
     Leitkarte - mit der festen Hoehe wuchsen sich beide gegenseitig ins Unendliche. Im Bento teilen sie sich die Hoehe. */
  html.smx .stats-card:nth-child(2), html.smx .stats-card:nth-child(3){ grid-column: 2; min-height: 0; height: auto !important; }
  html.smx .stats-card:not(.is-lead) .stats-num{ font-size: clamp(40px, 4vw, 66px); }
}

/* ---- Leistungen (Desktop ab 1280 px Breite und 760 px Hoehe): Ueberschrift gross links und oben buendig, die vier Leistungen
        als weisse Karten im 2x2-Raster rechts (Nummer, Symbol, Titel, Text). Kleinere Fenster behalten den
        Aufbau des Originals - dort reicht der Platz neben der Ueberschrift nicht. ---- */
@media (min-width: 1280px) and (min-height: 760px){
  html.smx .s2-stage{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: clamp(36px, 4vw, 90px); align-content: center; align-items: start; }
  /* Ueberschrift oben buendig mit den Karten: der Leerraum ueber den Grossbuchstaben wird abgeschnitten */
  html.smx .s2-title{ grid-column: 1; text-box: trim-start cap alphabetic; }
  html.smx .s2-title .br-d{ display: none; }
  html.smx .s2-grid{ grid-column: 2; margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1vw, 16px); counter-reset: smx-s2; }
  html.smx .s2-item{ padding: 0; display: flex; }
  html.smx .s2-content{ flex: 1 1 auto; position: relative; background: var(--card-light); padding: clamp(16px, 1.4vw, 26px); }
  html.smx .s2-content::after{ counter-increment: smx-s2; content: "0" counter(smx-s2); position: absolute;
    top: clamp(16px, 1.4vw, 26px); right: clamp(16px, 1.4vw, 26px);
    font-family: "Unbounded", "Inter", sans-serif; font-size: var(--t-small); letter-spacing: .02em; color: #2c5cff; }
  html.smx .s2-icon, html.smx body .s2-wrapper .s2-icon{ width: 40px; height: 40px; margin: 0 0 14px; transition: transform .5s var(--x-ease); }
  html.smx .s2-item h3, html.smx body .s2-item h3{ margin: 0 0 8px; }
  html.smx .s2-item:hover .s2-icon{ transform: rotate(-8deg) scale(1.08); }
}
/* Bis 1599 px ohne die zwei Stichpunkte je Karte, sonst werden die Karten zu hoch fuer den Platz ueber der Querlinie */
@media (min-width: 1280px) and (max-width: 1599px) and (min-height: 760px){ html.smx .s2-list{ display: none; } }

/* ---- Was wir messen: feine Linien zwischen den drei Stufen, Nummern vor jeder Stufe und je ein Ergebnis
        aus dem Kundenfall HELE Transport (sm-test.html, zaehlt hoch: sm-test.js).
        Desktop: die Section haelt an wie am Handy und blaettert in drei Schritten durch die Stufen -
        site-1.js (pins) liest dafuer nur --pin-steps und die Laufstrecke (::after) aus dem CSS.
        Die aktive Stufe steht voll da, die anderen treten zurueck. ---- */
html.smx #sMeasure .ix-grid{ counter-reset: smx-m; }
html.smx #sMeasure .ix-item h3::before{ counter-increment: smx-m; content: "0" counter(smx-m); margin-right: .6em;
  font-size: .78em; letter-spacing: 0; color: #2c5cff; }
html.smx #sMeasure .ix-item{ position: relative; }
html.smx .smx-fig{ margin: clamp(12px, 1.8vh, 22px) 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px; align-items: baseline; }
html.smx .smx-fig-k{ grid-column: 1 / -1; margin-bottom: 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-soft); }
html.smx .smx-fig-v{ font-size: clamp(30px, 3vw, 52px); line-height: 1; letter-spacing: -.05em; color: var(--ink); white-space: nowrap;
  transition: color .5s ease; }
html.smx .smx-fig-v b{ font-weight: 400; font-variant-numeric: tabular-nums; }
html.smx .smx-fig-u{ font-size: .45em; margin-left: .06em; letter-spacing: -.02em; }
html.smx .smx-fig-l{ font-size: var(--t-small); line-height: 1.4; color: var(--muted); }
/* Handy: ohne Ergebnisse. Die Stufen haben beim Anhalten nur bis zur Querlinie Platz - bei eingeblendeter
   Safari-Leiste (ca. 390x664) bleiben schon im Original nur 44 px, drei Ergebniszeilen brauchen gut 110. */
@media (max-width: 760px){ html.smx .smx-fig{ display: none; } }
@media (min-width: 761px){
  html.smx #sMeasure .ix-grid--3{ column-gap: 0; }
  html.smx #sMeasure .ix-item{ padding: 0 clamp(16px, 2vw, 36px); }
  html.smx #sMeasure .ix-item:first-child{ padding-left: 0; }
  html.smx #sMeasure .ix-item + .ix-item{ border-left: 1px solid var(--line); }
  /* Der Punktstrom wird flacher: Stufen samt Ergebnis muessen ueber der Querlinie stehen, erst dann blendet
     darunter der graue Satz ein (site-1.js, updateIx) */
  html.smx #sMeasure .ms-flow{ height: clamp(110px, 14vh, 200px); min-height: 0; }
  html.smx .smx-fig-v{ font-size: clamp(28px, 2.6vw, 46px); }
  /* Anhalten: drei Schritte zu je einer halben Bildhoehe */
  html.smx #sMeasure{ --pin-step: 50vh; --pin-steps: 3; }
  html.smx #sMeasure::after{ content: ""; display: block; height: calc(var(--pin-steps) * var(--pin-step)); }
  html.smx #sMeasure .ix-stage{ position: sticky; top: var(--pin-top, 0px); }   /* Abstand oben bleibt u * 2 = wie seitlich */
  html.smx #sMeasure.pin-on .ix-item{ transition: opacity .6s ease; }
  html.smx #sMeasure.pin-on .ix-item:not(.is-shown){ opacity: .28; }
  html.smx #sMeasure.pin-on .ix-item.is-shown:has(+ .ix-item.is-shown){ opacity: .5; }   /* schon durchlaufen */
  html.smx #sMeasure.pin-on .ix-item.is-shown:not(:has(+ .ix-item.is-shown)) .smx-fig-v{ color: #2c5cff; }   /* aktuelle Stufe */
}
/* Flachere Fenster: ohne die kleine Zeile ueber dem Ergebnis, Punktstrom noch flacher - sonst reichen die Stufen bis an die Querlinie */
@media (min-width: 761px) and (max-height: 860px){
  html.smx .smx-fig-k{ display: none; }
  html.smx .smx-fig{ margin-top: 10px; }
  html.smx #sMeasure .ms-flow{ height: clamp(50px, 7vh, 200px); }
  html.smx .smx-fig-v{ font-size: clamp(24px, 2.2vw, 36px); }
}
/* Sehr flache Fenster (bis 700 px): wie im Original - ohne Anhalten und ohne Ergebnisse, der Platz ueber der
   Querlinie reicht dort nicht fuer alles (1366x650: 38 px zu wenig) */
@media (min-width: 761px) and (max-height: 700px){
  html.smx #sMeasure{ --pin-steps: 0; }
  html.smx #sMeasure::after{ display: none; }
  html.smx .smx-fig{ display: none; }
}

/* ---- Kundenfall (Desktop): Bild nach rechts, die Tafeln links. Die Section haelt oben an und oeffnet mit
        jedem Scrollschritt die naechste Tafel, wie am Handy - site-1.js (pins, caseOpen) liest dafuer nur
        --pin-steps und die Laufstrecke (::after). Oben derselbe Abstand wie seitlich (unveraendert u * 2). ---- */
@media (min-width: 761px){
  /* Spiegelbild des Originals (dort 1.05fr Bild | 2.4fr Tafeln, beide fest in ihre Spalte gesetzt) */
  html.smx #sCase .ix-case{ grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.05fr); }
  html.smx #sCase .ix-media{ grid-column: 2; }
  html.smx #sCase .case-acc{ grid-column: 1; }
  html.smx #sCase{ --pin-step: 50vh; --pin-steps: 4; }
  html.smx #sCase::after{ content: ""; display: block; height: calc(var(--pin-steps) * var(--pin-step)); }
  html.smx #sCase .ix-stage{ position: sticky; top: var(--pin-top, 0px); }
}

/* ---- Zahlen (Handy): die beiden kleinen Karten nebeneinander unter der blauen - kuerzer als untereinander,
        die Anhalte-Stelle zeigt sie weiter nacheinander (site-1.js misst die letzte Karte neu) ---- */
@media (max-width: 760px){
  html.smx .stats-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  html.smx .stats-card.is-lead{ grid-column: 1 / -1; }
  html.smx .stats-card:not(.is-lead){ min-height: 0; padding: 14px; }
  html.smx .stats-card:not(.is-lead) .stats-num{ font-size: 34px; }
}