/* Motion system — tokens + reduced-motion, for pages that do not extend a
   layout (auth, landing). @import must precede all rules. Component presets
   defer to this file's own rules by load order, but the tokens and the
   reduced-motion guards (which use !important) still apply. */
@import url('motion.css');

/* ZamSkools landing — Ontech/ICTM design language (dark slate + emerald accent,
   Inter). Loaded via url_for; no CSP nonce needed. */

:root {
    --ink: #0f172a;           /* primary dark (ICTM --primary) */
    --ink-2: #1e293b;
    --ink-3: #334155;
    --accent: #10b981;        /* emerald (ICTM --accent) */
    --accent-2: #34d399;
    --accent-dark: #059669;
    --accent-light: #d1fae5;
    --text: #1e293b;
    --text-2: #475569;
    --muted: #94a3b8;
    --line: #e2e8f0;
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --amber: #d97706;
    --danger: #dc2626;
    --radius: 16px;
    --shadow: 0 12px 40px -14px rgb(2 6 23 / 0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text); background: var(--bg); line-height: 1.6; overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Navbar ── */
.nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(15,23,42,0.85); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-logo { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.25rem; color: #fff; }
.nav-logo-text { white-space: nowrap; }
.nav-logo span { background: linear-gradient(135deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-logo img { height: 34px; }
.nav-links { display: flex; align-items: center; gap: 1.75rem; }
.nav-link { color: rgba(255,255,255,0.7); font-weight: 500; font-size: 0.9rem; transition: color .2s; }
.nav-link:hover { color: #fff; }
.nav-cta { display: flex; align-items: center; gap: 0.75rem; }
.nav-agent { padding-right: 0.75rem; border-right: 1px solid rgba(255,255,255,0.14); }
.nav-toggle { display: none; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #fff; width: 44px; height: 44px; border-radius: 10px; font-size: 1.15rem; cursor: pointer; align-items: center; justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; border-radius: 10px; padding: 10px 18px; font-size: 0.9rem; border: none; cursor: pointer; transition: all .25s; white-space: nowrap; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; }
.btn-primary:hover { box-shadow: 0 10px 28px rgba(16,185,129,0.4); transform: translateY(-1px); color: #fff; }
.btn-ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.14); }
.btn-ghost:hover { background: rgba(255,255,255,0.14); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
/* .btn-ghost is white-on-transparent and only legible on the dark hero/CTA. On a
   light section it renders white-on-white — invisible. Use .btn-outline there. */
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-outline:hover { background: var(--bg-soft); border-color: var(--ink); color: var(--ink); }
.btn-light:hover { transform: translateY(-1px); box-shadow: var(--shadow); color: var(--ink); }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.nav-toggle { display: none; background: none; color: #fff; font-size: 1.3rem; border: none; }

/* ── Hero ── */
/* Centred hero, matching the house pattern used by ictm/ermaml: badge, big
   headline with the payoff in emerald, supporting line, three CTAs, chip row.
   Depth there comes from a dimmed photograph; we carry it with layered glows
   until a real hero image exists. Drop one in as .hero background-image and
   turn the glows down. */
/* Full-viewport hero, matching ictm/ermaml where the whole hero sits in one screen.
   The nav is sticky and takes 68px, so one screen = 100vh - 68px, not 100vh, or the
   two together overflow. svh (small viewport height) keeps mobile browser chrome from
   forcing a scroll; the vh line is the fallback for browsers without svh. Content is
   flex-centred vertically; the padding is now just a floor so a very short window
   (a landscape phone) doesn't crush the text against the edges. */
.hero { position: relative; background: linear-gradient(160deg, #0f172a 0%, #071a12 55%, #0d2818 100%); color: #fff; overflow: hidden; padding: 4rem 0; display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 68px); min-height: calc(100svh - 68px); }
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.3; animation: floatOrb 22s ease-in-out infinite; pointer-events: none; }
.hero::before { width: 620px; height: 620px; background: var(--accent-2); top: -260px; right: -140px; }
.hero::after { width: 520px; height: 520px; background: #8b5cf6; bottom: -220px; left: -160px; opacity: 0.22; animation-delay: -11s; animation-direction: reverse; }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%); }
.hero-inner { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; text-align: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border-radius: 999px; background: rgba(16,185,129,0.14); border: 1px solid rgba(16,185,129,0.3); color: var(--accent-2); font-size: 0.82rem; font-weight: 600; margin-bottom: 1.5rem; }
.hero h1 { font-size: 3.6rem; font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 1.35rem; }
.hero h1 span { background: linear-gradient(135deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero p.lead { font-size: 1.2rem; color: rgba(255,255,255,0.74); max-width: 680px; margin: 0 auto 2.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; justify-content: center; }
.hero-note { margin-top: 1.25rem; font-size: 0.85rem; color: rgba(255,255,255,0.5); }
.hero-note i { color: var(--accent-2); }

/* Chip row — the house's trust strip. Real facts only; each one is checkable. */
.hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 2.5rem; position: relative; z-index: 2; }
.hchip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.78rem; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(8px); font-size: 0.78rem; color: rgba(255,255,255,0.8); white-space: nowrap; }
.hchip i { color: var(--accent-2); font-size: 0.8rem; }
.hchip b { color: #fff; font-weight: 700; }

/* (The hero's side stat cards were replaced by .hero-chips above — the centred
   house composition puts the same facts in the trust strip under the CTAs.) */

/* ── SMS/trust band ── */
.trust-band { background: var(--ink); color: #fff; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,0.06); }
.trust-inner { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; font-size: 0.92rem; color: rgba(255,255,255,0.75); }
.trust-inner b { color: var(--accent-2); }
.trust-inner .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.3); }

/* ── Section scaffold ── */
section.block { padding: 5.5rem 0; }
section.block.soft { background: var(--bg-soft); }
section.block.dark { background: var(--ink); color: #fff; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 3rem; }
.section-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--accent-light); color: var(--accent-dark); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
.dark .section-badge { background: rgba(16,185,129,0.15); color: var(--accent-2); }
.section-head h2 { font-size: 2.35rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.section-head p { font-size: 1.05rem; color: var(--text-2); }
.dark .section-head p { color: rgba(255,255,255,0.6); }

/* ── Feature/module cards ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.feature-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; transition: all .3s; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.feature-ic { width: 50px; height: 50px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1.1rem; }
.ic-green { background: var(--accent-light); color: var(--accent-dark); }
.ic-blue { background: #dbeafe; color: #2563eb; }
.ic-amber { background: #fef3c7; color: var(--amber); }
.ic-cyan { background: #cffafe; color: #0891b2; }
.ic-violet { background: #ede9fe; color: #7c3aed; }
.ic-rose { background: #ffe4e6; color: #e11d48; }
.feature-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.4rem; }
.feature-card p { font-size: 0.9rem; color: var(--text-2); margin: 0; }

/* ── Workflow (3 phases) ── */
.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.workflow-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.75rem; }
.workflow-num { position: absolute; top: -18px; left: 1.75rem; width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 6px 16px rgba(16,185,129,0.4); }
.workflow-card h3 { margin: 1.25rem 0 0.5rem; font-size: 1.15rem; font-weight: 700; }
.workflow-card p { font-size: 0.92rem; color: var(--text-2); margin: 0; }

/* ── Comparison ── */
.compare { max-width: 860px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.compare-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; }
.compare-row + .compare-row { border-top: 1px solid var(--line); }
.compare-row > div { padding: 1rem 1.25rem; font-size: 0.92rem; display: flex; align-items: center; gap: 0.5rem; }
.compare-row.head > div { font-weight: 700; background: var(--bg-soft); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.compare-row .col-old { color: var(--text-2); }
.compare-row .col-new { color: var(--accent-dark); font-weight: 600; background: var(--accent-light); }
.compare-row.head .col-new { background: var(--accent); color: #fff; }
.compare .feat { font-weight: 600; }

/* ── Portals ── */
.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.portal-card { display: block; text-align: center; padding: 1.75rem 1.25rem; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); transition: all .25s; }
.portal-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-4px); border-color: rgba(16,185,129,0.4); }
.portal-ic { width: 54px; height: 54px; border-radius: 14px; background: rgba(16,185,129,0.16); color: var(--accent-2); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 0.9rem; }
.portal-card h4 { color: #fff; font-size: 1.02rem; font-weight: 700; margin-bottom: 0.25rem; }
.portal-card p { color: rgba(255,255,255,0.55); font-size: 0.82rem; margin: 0; }

/* ── USSD band ── */
.ussd-band { background: linear-gradient(135deg, var(--accent-dark), #065f46); color: #fff; border-radius: 22px; padding: 3rem; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; }
.ussd-band h2 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; }
.ussd-band p { color: rgba(255,255,255,0.82); }
.ussd-chip { justify-self: center; background: rgba(0,0,0,0.25); border: 1px dashed rgba(255,255,255,0.4); border-radius: 16px; padding: 1.5rem 2rem; text-align: center; }
.ussd-chip .code { font-size: 2rem; font-weight: 800; letter-spacing: 0.02em; }
.ussd-chip .sub { font-size: 0.8rem; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Testimonials ── */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.testi-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.testi-stars { color: #f59e0b; margin-bottom: 0.75rem; }
.testi-text { font-size: 0.95rem; color: var(--text); margin-bottom: 1.25rem; }
.testi-foot { display: flex; align-items: center; gap: 0.75rem; }
.testi-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.testi-author b { display: block; font-size: 0.9rem; }
.testi-author span { font-size: 0.8rem; color: var(--muted); }

/* ── Live stats strip ── */
.stats-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; text-align: center; }
.stat-item .stat-number { font-size: 2.4rem; font-weight: 800; color: #fff; }
.stat-item .stat-number span { color: var(--accent-2); }
.stat-item .stat-label { font-size: 0.82rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Final CTA ── */
.cta-final { text-align: center; background: linear-gradient(160deg, #0f172a, #0d2818); color: #fff; border-radius: 24px; padding: 4rem 2rem; position: relative; overflow: hidden; }
.cta-final h2 { font-size: 2.4rem; font-weight: 800; margin-bottom: 0.75rem; }
.cta-final p { color: rgba(255,255,255,0.7); margin-bottom: 2rem; font-size: 1.1rem; }

/* ── Footer ── */
.footer { background: var(--ink); color: rgba(255,255,255,0.6); padding: 3rem 0 2rem; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem; }
.footer a { color: rgba(255,255,255,0.6); }
.footer a:hover { color: var(--accent-2); }
.footer-links { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 1.5rem; font-size: 0.85rem; text-align: center; }

/* ── Reveal on scroll ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Staggered list-item reveal — each bullet rises in a beat after the previous,
   once its parent section has revealed (the observer adds .in to the .reveal parent).
   Uses the motion.css tokens. Guarded for reduced motion below so items are
   never left hidden when the transition is suppressed. */
.rc-points li,
.price-col li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--mo-4, .32s) var(--ease-out, ease),
                transform var(--mo-4, .32s) var(--ease-out, ease);
}
.reveal.in .rc-points li,
.reveal.in .price-col li { opacity: 1; transform: none; }
.rc-points li:nth-child(1), .price-col li:nth-child(1) { transition-delay: .06s; }
.rc-points li:nth-child(2), .price-col li:nth-child(2) { transition-delay: .14s; }
.rc-points li:nth-child(3), .price-col li:nth-child(3) { transition-delay: .22s; }
.rc-points li:nth-child(4), .price-col li:nth-child(4) { transition-delay: .30s; }
.rc-points li:nth-child(5), .price-col li:nth-child(5) { transition-delay: .38s; }
.rc-points li:nth-child(6), .price-col li:nth-child(6) { transition-delay: .46s; }

@media (prefers-reduced-motion: reduce) {
    .rc-points li,
    .price-col li { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Emphasis inside the benefit lists — keep <b> crisp at the list's smaller size. */
.rc-points b,
.price-col li b { font-weight: 700; color: var(--text); }

@keyframes floatOrb { 0%,100% { transform: translate(0,0) scale(1);} 33% { transform: translate(30px,-30px) scale(1.05);} 66% { transform: translate(-20px,20px) scale(0.95);} }

/* ── Responsive ── */
@media (max-width: 900px) {
    .hero { padding: 3rem 0; }
    .hero h1 { font-size: 2.4rem; }
    .hero p.lead { font-size: 1.05rem; }
    .workflow-grid { grid-template-columns: 1fr; }
    .ussd-band { grid-template-columns: 1fr; text-align: center; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    /* Collapse the nav into a hamburger menu on mobile. */
    .nav-toggle { display: inline-flex; }
    .nav-inner { flex-wrap: wrap; }
    /* When open, the bar must grow to contain the dropdown and stay opaque
       (its default height:68px would let the menu spill over the hero). */
    .nav.open { background: #0f172a; }
    .nav.open .nav-inner { height: auto; align-items: stretch; padding-bottom: 0.6rem; }
    .nav-links, .nav-cta { display: none; }
    .nav.open .nav-links, .nav.open .nav-cta {
        display: flex; flex-direction: column; align-items: stretch;
        width: 100%; gap: 0.5rem; padding: 0.5rem 0 0.25rem;
    }
    .nav.open .nav-links { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 0.4rem; padding-top: 0.75rem; }
    .nav.open .nav-link { padding: 0.55rem 0.25rem; font-size: 0.98rem; }
    .nav.open .nav-cta .btn { width: 100%; justify-content: center; padding: 11px 16px; font-size: 0.92rem; }
    .nav.open .nav-agent { padding: 0.55rem 0.25rem; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: center; }
    .compare-row { grid-template-columns: 1.2fr 1fr 1fr; }
    .section-head h2 { font-size: 1.9rem; }
}
@media (max-width: 480px) {
    .hero h1 { font-size: 2.05rem; }
    .hchip { font-size: 0.76rem; padding: 0.42rem 0.7rem; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .stats-strip { grid-template-columns: 1fr; }
}

/* ── Report-card showcase ──────────────────────────────────────────────
   Real ReportLab output, rasterised by scripts/capture_report_shots.sh.
   Regenerate after changing report_cards.py — these are the actual PDFs,
   not mock-ups, and they must not drift from what schools receive. */
.rc-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 2.75rem; align-items: center; margin-bottom: 3rem; }
.rc-hero { position: relative; }
.rc-hero img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.rc-tag { position: absolute; top: 0.9rem; right: 0.9rem; background: rgba(15,23,42,0.82); color: #fff; font-size: 0.74rem; font-weight: 600; padding: 0.35rem 0.7rem; border-radius: 999px; backdrop-filter: blur(4px); }
.rc-copy h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 0.75rem; }
.rc-copy p { color: var(--muted); margin-bottom: 1rem; }
.rc-points { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.rc-points li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.93rem; }
.rc-points i { color: var(--accent-2); margin-top: 0.25rem; flex-shrink: 0; }
.rc-styles-head { text-align: center; margin-bottom: 1.4rem; }
.rc-styles-head h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.3rem; }
.rc-styles-head p { color: var(--muted); font-size: 0.92rem; }
.rc-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
.rc-thumbs figure { margin: 0; text-align: center; }
.rc-thumbs img { width: 100%; height: auto; display: block; border-radius: 9px; border: 1px solid var(--line); background: #fff; transition: transform .25s, box-shadow .25s, border-color .25s; }
.rc-thumbs figure:hover img { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--accent); }
.rc-thumbs figcaption { font-size: 0.83rem; font-weight: 600; margin-top: 0.55rem; color: var(--text-2); }
@media (max-width: 900px) {
    .rc-showcase { grid-template-columns: 1fr; gap: 1.75rem; }
    .rc-thumbs { grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
    /* Narrow card = the tag lands on the school's name. Move it clear of the
       header band rather than obscure the very thing the shot is showing. */
    .rc-tag { top: auto; bottom: 0.9rem; right: 0.9rem; font-size: 0.7rem; }
}
@media (max-width: 480px) {
    .rc-thumbs { grid-template-columns: repeat(2, 1fr); }
    .rc-thumbs figcaption { font-size: 0.76rem; }
}

/* ── "Coming soon" strip ───────────────────────────────────────────────
   Deliberately quieter than shipped features: dashed, unsaturated, badged.
   A visitor must be able to tell at a glance what they get today from what
   we intend to build. See docs/plans/2026-07-16-pathway-analysis.md */
.soon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.soon-card { position: relative; background: transparent; border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 1.75rem; }
.soon-card h3 { font-size: 1.1rem; font-weight: 700; margin: 1.1rem 0 0.5rem; color: var(--text-2); }
.soon-card p { color: var(--muted); font-size: 0.92rem; }
.soon-card .feature-ic { opacity: 0.55; }
.soon-badge { position: absolute; top: 1.1rem; right: 1.1rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.65rem; border-radius: 999px; background: rgba(217,119,6,0.12); border: 1px solid rgba(217,119,6,0.28); color: var(--amber); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Transparent pricing ───────────────────────────────────────────────
   Two columns, side by side, same weight: what is free and what is not.
   Numbers come from backend/app/services/feature_gating.py — if they change
   there, change them here. A price on a landing page is a promise. */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 900px; margin: 0 auto; text-align: left; }
.price-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.price-col.paid { background: var(--bg-soft); }
.price-col h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.3rem; }
.price-col .cap { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.15rem; }
.price-col ul { list-style: none; padding: 0; margin: 0; }
.price-col li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.5rem 0; font-size: 0.92rem; }
.price-col li i { color: var(--accent); margin-top: 0.25rem; flex-shrink: 0; }
.price-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.price-line:last-child { border-bottom: none; }
.price-line b { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.price-line .what { color: var(--text-2); }
.price-line .note { display: block; font-size: 0.78rem; color: var(--muted); }
.price-foot { max-width: 900px; margin: 1.5rem auto 0; font-size: 0.88rem; color: var(--text-2); text-align: center; }
@media (max-width: 780px) { .price-grid { grid-template-columns: 1fr; } }