/**
 * homepage.css — sections unique to the landing page: stats strip, problem
 * grid, token system, geo/market fit, case study, go-live steps, dual CTA.
 *
 * Kept in its own file (loaded by index.php via $pageStyles) so these styles
 * cannot be lost when site.css is replaced, and so other pages don't download
 * rules they never use.
 */

/* Ordered lists need their own reset — the base reset only covered <ul>,
   which left the token steps rendering "1. 1" with both the native marker
   and our styled number badge. */
ol { margin: 0; padding: 0; list-style: none; }

/* ══════════════════════════════════════════════════════════
   Homepage sections: stats, problem, token, geo, case, steps
   ══════════════════════════════════════════════════════════ */

.stats-strip { background: var(--gradient); color: #fff; }
.stats-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 1.5rem 1.25rem; }
.stats-strip__grid div { text-align: center; padding: .5rem; border-right: 1px solid rgba(255,255,255,.2); }
.stats-strip__grid div:last-child { border-right: none; }
.stats-strip strong { display: block; font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; }
.stats-strip span { font-size: .78rem; opacity: .82; }

.card--problem { background: #fffafa; border-color: #fee2e2; }
.card__icon--problem { background: var(--red-soft); color: var(--red); }
.problem-turn {
    text-align: center; margin: 2.5rem auto 0; max-width: 34rem;
    background: linear-gradient(135deg, var(--brand-soft), var(--accent-soft));
    border-radius: 999px; padding: 1rem 1.5rem; font-weight: 700; color: var(--ink);
}

/* Token section (dark) */
.token-section {
    padding: clamp(3rem, 7vw, 6rem) 0;
    background: linear-gradient(150deg, #16102b 0%, #241542 55%, #2e1a12 100%);
}
.on-dark { color: #fff; }
.on-dark-soft { color: rgba(255,255,255,.68) !important; }
.section__eyebrow--dark { background: rgba(124,58,237,.25); color: #c4b5fd; }
.token-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.token-steps { display: flex; flex-direction: column; gap: 1.35rem; counter-reset: s; }
.token-steps li { display: flex; gap: 1rem; align-items: flex-start; }
.token-step__n {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
    background: var(--gradient); color: #fff; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.token-steps strong { display: block; color: #fff; font-size: 1rem; }
.token-steps em { display: block; font-style: normal; color: rgba(255,255,255,.55); font-size: .87rem; margin-top: .15rem; }

.token-flow {
    background: rgba(255,255,255,.05); border: 1px solid rgba(124,58,237,.28);
    border-radius: 20px; padding: 1.75rem; text-align: center;
}
.token-node { background: rgba(255,255,255,.08); border-radius: 14px; padding: 1rem 1.25rem; display: inline-block; min-width: 15rem; }
.token-node__label { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .4rem; }
.token-node code {
    display: block; font-family: ui-monospace, monospace; font-size: .82rem;
    background: rgba(255,255,255,.1); color: #fff; border-radius: 6px; padding: .3rem .6rem; margin-top: .25rem;
}
.token-node code.alt { background: rgba(124,58,237,.35); color: #ddd6fe; }
.token-node--brand { background: var(--brand); }
.token-node--brand strong { color: #fff; font-size: 1.05rem; }
.token-node--green { background: var(--green); }
.token-node--green strong { display: block; color: #fff; font-size: 1.05rem; }
.token-node--green em { font-style: normal; color: rgba(255,255,255,.75); font-size: .8rem; }
.token-arrow { color: #a78bfa; font-size: 1.35rem; margin: .75rem 0; }
.token-guests { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.token-guests div { background: rgba(255,255,255,.08); border-radius: 12px; padding: .7rem .3rem; font-size: .72rem; color: rgba(255,255,255,.55); }
.token-guests span { display: block; font-size: 1.15rem; }
.token-guests em { display: block; font-style: normal; color: #c4b5fd; font-weight: 600; }
.token-tags { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 2.5rem; }
.token-tags span {
    background: rgba(124,58,237,.2); border: 1px solid rgba(124,58,237,.35);
    color: #ddd6fe; border-radius: 999px; padding: .5rem 1.1rem; font-size: .85rem;
}

/* Geo */
.section--geo { background: var(--canvas-alt); }
.geo-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.geo-link {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    padding: 1.25rem 1.4rem; transition: all .18s ease; display: block;
}
.geo-link:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.geo-link strong { display: block; font-size: 1rem; margin-bottom: .25rem; }
.geo-link span { font-size: .84rem; color: var(--ink-faint); }

/* Case study */
.case { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.case__cols { display: grid; grid-template-columns: 1fr 1fr; }
.case__col { padding: 2rem; }
.case__col--before { background: #fffafa; border-right: 1px solid var(--line-soft); }
.case__col--after { background: #fafffc; }
.case__tag { display: inline-block; border-radius: 999px; padding: .3rem .9rem; font-size: .72rem; font-weight: 700; margin-bottom: 1rem; }
.case__tag--before { background: var(--red-soft); color: var(--red); }
.case__tag--after { background: var(--green-soft); color: var(--green); }
.case__figure { margin-top: 1.5rem; background: var(--green-soft); border-radius: 12px; padding: 1.15rem; text-align: center; }
.case__figure strong { display: block; font-size: 1.9rem; font-weight: 800; color: var(--green); letter-spacing: -.03em; }
.case__figure span { font-size: .82rem; color: var(--ink-soft); }
.case__quote { margin: 0; padding: 2rem; background: var(--canvas-alt); border-top: 1px solid var(--line-soft); text-align: center; }
.case__quote p { font-size: 1.02rem; color: var(--ink-soft); font-style: italic; max-width: 46rem; margin: 0 auto 1rem; }
.case__quote footer { font-weight: 600; font-size: .9rem; }
.stars { color: #f59e0b; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.step { text-align: center; }
.step__n {
    width: 56px; height: 56px; border-radius: 50%; background: var(--gradient);
    color: #fff; font-size: 1.3rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
}
.step h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.step p { font-size: .88rem; color: var(--ink-soft); }

/* Dual CTA */
.dual-cta {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center;
    margin-top: 3rem; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r); padding: 2rem; box-shadow: var(--shadow); text-align: center;
}
.dual-cta h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.dual-cta p { font-size: .88rem; color: var(--ink-faint); margin-bottom: 1.15rem; }
.dual-cta__divider { position: relative; color: var(--ink-faint); font-size: .8rem; }
.dual-cta__divider::before, .dual-cta__divider::after {
    content: ''; position: absolute; left: 50%; width: 1px; background: var(--line); height: 2.5rem;
}
.dual-cta__divider::before { bottom: 1.8rem; }
.dual-cta__divider::after { top: 1.8rem; }

@media (max-width: 900px) {
    .token-grid { grid-template-columns: 1fr; }
    .geo-links { grid-template-columns: 1fr; }
    .case__cols { grid-template-columns: 1fr; }
    .case__col--before { border-right: none; border-bottom: 1px solid var(--line-soft); }
    .steps { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
    .dual-cta { grid-template-columns: 1fr; }
    .dual-cta__divider::before, .dual-cta__divider::after { display: none; }
}
@media (max-width: 640px) {
    .stats-strip__grid { grid-template-columns: repeat(2, 1fr); }
    .stats-strip__grid div:nth-child(2) { border-right: none; }
    .steps { grid-template-columns: 1fr; }
    .token-guests { grid-template-columns: repeat(2, 1fr); }
}

/* ── Fixes from live review ── */

/* "$3,262Total annual value created" ran together without these. */
.case__figure strong { line-height: 1.1; margin-bottom: .25rem; }
.case__figure span { display: block; }

/* Token nodes: force the label, code and value onto their own lines. */
.token-node { display: block; margin: 0 auto; }
.token-node strong, .token-node em { display: block; }
.token-node em { margin-top: .2rem; }

/* Token step text was colliding with its heading. */
.token-steps li > div { display: flex; flex-direction: column; }

/* Case-study lists inherit the tick/cross markers from site.css; make sure
   they keep their spacing inside the narrower column. */
.case__col .ticks, .case__col .crosses { margin-top: .75rem; }
.case__col h3 { font-size: 1.1rem; margin-bottom: .25rem; }

/* Dual CTA buttons shouldn't stretch full width on desktop. */
.dual-cta .btn { display: inline-flex; }


/* ── Included in every plan (replaces the old competitor comparison) ── */
.included {
    margin-top: 2.5rem; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r); padding: 2rem; box-shadow: var(--shadow);
}
.included h3 { text-align: center; font-size: 1.35rem; margin-bottom: .3rem; }
.included__lead { text-align: center; color: var(--ink-faint); font-size: .92rem; margin-bottom: 1.75rem; }
.included__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.included__grid > div {
    background: var(--canvas-alt); border: 1px solid var(--line-soft);
    border-radius: 12px; padding: 1.1rem; text-align: center;
}
.included__grid span { font-size: 1.5rem; display: block; margin-bottom: .5rem; }
.included__grid strong { display: block; font-size: .88rem; margin-bottom: .2rem; }
.included__grid em { display: block; font-style: normal; font-size: .78rem; color: var(--ink-faint); line-height: 1.45; }
.included__note {
    text-align: center; margin: 1.75rem auto 0; max-width: 44rem;
    background: var(--green-soft); border-radius: 12px; padding: 1rem 1.25rem;
    font-size: .9rem; color: #065f46;
}
.included__note strong { color: #047857; }

@media (max-width: 900px) { .included__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
    .included { padding: 1.5rem 1.25rem; }
    .included__grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .included__grid > div { padding: .9rem .6rem; }
}

/* Industry matrix availability marks */
.compare-table .yes { color: var(--green); font-size: 1rem; }