/* Growth metrics: the Momentum Board on the landing page and the compact
   scoreboard strip on /discover. Shares the Vault palette so the board reads
   as part of the page rather than an embedded widget.

   Every animated element renders in its finished state by default and is only
   animated once JavaScript adds a class. A visitor with JS disabled sees the
   numbers, not an empty frame stuck at zero. */

.gm {
    --gm-ink: #f4f4f5;
    --gm-ink-dim: rgba(244, 244, 245, 0.62);
    --gm-ink-soft: rgba(244, 244, 245, 0.78);
    --gm-accent: #db2f49;
    --gm-line: rgba(255, 255, 255, 0.09);
    --gm-surface: rgba(255, 255, 255, 0.035);
    --gm-up: #35c07d;
}

/* --- Odometer ----------------------------------------------------------- */

.gm-odo {
    --gm-lh: 1.16;
    display: inline-flex;
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.gm-odo__char {
    display: inline-block;
    height: calc(1em * var(--gm-lh));
    line-height: calc(1em * var(--gm-lh));
    overflow: hidden;
    vertical-align: bottom;
}

.gm-odo__reel {
    display: block;
    /* Resting position is the answer. The keyframe below rolls up to it. */
    transform: translateY(calc(var(--gm-digit, 0) * -1em * var(--gm-lh)));
    will-change: transform;
}

.gm-odo__reel span {
    display: block;
    height: calc(1em * var(--gm-lh));
    line-height: calc(1em * var(--gm-lh));
}

.gm-odo.is-rolling .gm-odo__reel {
    animation: gm-roll var(--gm-roll-duration, 1.15s) cubic-bezier(0.16, 0.84, 0.26, 1) var(--gm-delay, 0s) both;
}

@keyframes gm-roll {
    from { transform: translateY(0); }
    to { transform: translateY(calc(var(--gm-digit, 0) * -1em * var(--gm-lh))); }
}

.gm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Delta pill --------------------------------------------------------- */

.gm-delta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(53, 192, 125, 0.12);
    color: var(--gm-up);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.gm-delta--down {
    background: rgba(219, 47, 73, 0.14);
    color: #ff7a8c;
}

/* Drawn with borders rather than a glyph: Roboto has no triangle, and the
   fallback font renders a tofu box inside the pill. */
.gm-delta__arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
}

.gm-delta--down .gm-delta__arrow {
    border-bottom: 0;
    border-top: 5px solid currentColor;
}
.gm-delta__label { color: inherit; opacity: 0.72; font-weight: 500; }

/* --- Board shell -------------------------------------------------------- */

.gm-board {
    position: relative;
    padding: 76px 0 84px;
    background: #0d0d0f;
    color: var(--gm-ink);
    border-bottom: 1px solid #1c1c1c;
    overflow: hidden;
}

/* A faint accent wash so the board separates from the Vault section directly
   above it without a hard rule between two identical blacks. */
.gm-board::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(90% 60% at 50% 0%, rgba(219, 47, 73, 0.11) 0%, rgba(13, 13, 15, 0) 62%);
    pointer-events: none;
}

.gm-board__inner { position: relative; z-index: 1; }

/* Holds the shared sparkline gradient. Kept out of flow so it cannot add a
   stray line box between sections. */
.gm-defs { position: absolute; width: 0; height: 0; }

.gm-board__head {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

.gm-board__eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gm-accent);
}

.gm-board .gm-board__title {
    margin: 0 0 12px;
    color: #fff;
}

.gm-board__asof {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 13px;
    border: 1px solid var(--gm-line);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--gm-ink-dim);
}

.gm-board__foot {
    margin: 34px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--gm-ink-dim);
}

.gm-board__foot a {
    color: var(--gm-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gm-board__foot a:hover { color: var(--gm-accent); }

/* --- Hero row ----------------------------------------------------------- */

.gm-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 18px;
    margin-bottom: 18px;
    text-align: left;
}

.gm-hero__main,
.gm-feed {
    padding: 28px 30px;
    border: 1px solid var(--gm-line);
    border-radius: 20px;
    background: var(--gm-surface);
}

.gm-hero__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gm-hero__label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gm-ink-dim);
}

.gm-hero__value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
}

.gm-hero .gm-odo {
    font-size: clamp(46px, 8.4vw, 94px);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #fff;
}

.gm-hero__caption {
    margin: 8px 0 0;
    font-size: 16px;
    color: var(--gm-ink-soft);
}

/* --- Milestone bar ------------------------------------------------------ */

.gm-milestone { margin-top: 24px; }

.gm-milestone__track {
    position: relative;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.gm-milestone__fill {
    position: relative;
    display: block;
    height: 100%;
    width: var(--gm-percent, 0%);
    border-radius: 999px;
    background: linear-gradient(90deg, #db2f49 0%, #ff7a4d 100%);
}

.gm-milestone.is-filling .gm-milestone__fill {
    animation: gm-fill 1.4s cubic-bezier(0.16, 0.84, 0.26, 1) both;
}

@keyframes gm-fill {
    from { width: 0; }
    to { width: var(--gm-percent, 0%); }
}

/* The sweep only runs while the bar is on screen, so an idle background tab
   is not repainting a gradient forever. */
.gm-milestone.is-live .gm-milestone__fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: gm-shimmer 2.6s ease-in-out 1.2s infinite;
}

@keyframes gm-shimmer {
    0% { transform: translateX(-100%); }
    60%, 100% { transform: translateX(100%); }
}

.gm-milestone__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 14px;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--gm-ink-dim);
}

.gm-milestone__legend strong { color: #fff; font-weight: 600; }

/* --- Live activity feed ------------------------------------------------- */

.gm-feed { display: flex; flex-direction: column; }

.gm-feed__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gm-ink-dim);
}

.gm-feed__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gm-up);
    box-shadow: 0 0 0 0 rgba(53, 192, 125, 0.55);
    animation: gm-pulse 2.4s ease-out infinite;
}

@keyframes gm-pulse {
    70% { box-shadow: 0 0 0 9px rgba(53, 192, 125, 0); }
    100% { box-shadow: 0 0 0 0 rgba(53, 192, 125, 0); }
}

.gm-feed__list {
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
}

/* JS rotates by moving the first item to the end, so "the visible window" is
   always the first three children and needs no per-item bookkeeping. */
.gm-feed__item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 0;
    border-bottom: 1px solid var(--gm-line);
    font-size: 13.5px;
    color: var(--gm-ink-soft);
    transition: opacity 0.32s ease, transform 0.32s ease;
}

.gm-feed__item:nth-child(n + 4) { display: none; }
.gm-feed__item:nth-child(3) { border-bottom: 0; padding-bottom: 0; }
.gm-feed__item:first-child { padding-top: 0; }

.gm-feed__item.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
}

.gm-feed__ago { font-size: 11.5px; color: rgba(244, 244, 245, 0.42); }

/* --- Stat cards --------------------------------------------------------- */

.gm-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    text-align: left;
}

.gm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 20px;
    border: 1px solid var(--gm-line);
    border-radius: 20px;
    background: var(--gm-surface);
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.gm-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.055);
}

.gm-card__spark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 74px;
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.gm-card:hover .gm-card__spark { opacity: 0.95; }

.gm-card__spark-line {
    fill: none;
    stroke: var(--gm-accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.gm-card__spark-area { fill: url(#gm-spark-gradient); stroke: none; }

.gm-card.is-drawing .gm-card__spark-line {
    animation: gm-draw 1.5s cubic-bezier(0.32, 0.72, 0.3, 1) both;
}

.gm-card.is-drawing .gm-card__spark-area {
    animation: gm-fade 1.1s ease 0.5s both;
}

@keyframes gm-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes gm-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gm-card__body { position: relative; z-index: 1; }

.gm-card__eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gm-accent);
}

.gm-card__title {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.gm-card__lead { margin-bottom: 18px; }

/* Stacked rather than inline: whether the pill fits beside the number depends
   on the length of its own label, so an inline row leaves the four cards
   disagreeing about where the supporting text starts. */
.gm-card__lead-value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.gm-card .gm-card__lead-value .gm-odo {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.gm-card__lead-label {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--gm-ink-dim);
}

.gm-card__metrics {
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid var(--gm-line);
}

.gm-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
}

.gm-metric + .gm-metric { border-top: 1px solid rgba(255, 255, 255, 0.05); }

.gm-metric__label {
    margin: 0;
    font-size: 12.5px;
    color: var(--gm-ink-dim);
}

.gm-metric__value {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.gm-metric__value--highlight { color: #ffb27a; }

.gm-metric__split { display: inline-flex; align-items: baseline; gap: 5px; }
.gm-metric__split-unit { font-size: 11.5px; font-weight: 500; color: var(--gm-ink-dim); }
.gm-metric__split-sep { color: rgba(255, 255, 255, 0.28); }

/* Countries read as a row of flags rather than a bare integer, so the grid
   does not collapse into five identical number rows. */
.gm-metric__flags {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 15px;
    line-height: 1;
}

.gm-metric__flags-more {
    margin-left: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gm-ink-dim);
}

/* --- Discover strip ----------------------------------------------------- */

.gm-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 26px;
    border: 1px solid var(--gm-line);
    border-radius: 16px;
    background: var(--gm-line);
    overflow: hidden;
}

.gm-strip__item {
    padding: 16px 20px;
    background: #101013;
}

.gm-strip .gm-odo {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.gm-strip__label {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--gm-ink-dim);
}

.gm-strip__delta { margin-top: 8px; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
    .gm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .gm-hero { grid-template-columns: minmax(0, 1fr); }
    .gm-feed__item:nth-child(n + 3) { display: none; }
    .gm-feed__item:nth-child(2) { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 760px) {
    .gm-board { padding: 56px 0 60px; }
    .gm-hero__main, .gm-feed { padding: 22px 20px; }
    .gm-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .gm-grid { grid-template-columns: minmax(0, 1fr); }
    .gm-card { padding: 20px 20px 18px; }

    /* Below this width four numbers stacked vertically push the actual content
       off the first screen, so the strip becomes a swipeable rail. */
    .gm-strip {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gm-strip::-webkit-scrollbar { display: none; }

    .gm-strip__item {
        flex: 0 0 auto;
        min-width: 46%;
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gm-odo.is-rolling .gm-odo__reel,
    .gm-milestone.is-filling .gm-milestone__fill,
    .gm-milestone.is-live .gm-milestone__fill::after,
    .gm-card.is-drawing .gm-card__spark-line,
    .gm-card.is-drawing .gm-card__spark-area,
    .gm-feed__pulse {
        animation: none;
    }

    .gm-card, .gm-feed__item { transition: none; }
}