@import '_content/Inky.Design/Inky.Design.8pm2h57bz4.bundle.scp.css';

/* /Components/Layout/Footer.razor.rz.scp.css */
/* Styles in wwwroot/css/site.css — global classes included for layout components */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site-wrapper[b-qxmk6fwrlq] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content[b-qxmk6fwrlq] {
    flex: 1;
    padding-top: var(--navbar-height);
}
/* /Components/Layout/NavBar.razor.rz.scp.css */
/* This component's styles live in the global bundle (wwwroot/css/…), shared site-wide.
   NB: Blazor CSS isolation DOES apply to InteractiveServer components — the earlier
   "scoped CSS does not apply" note here was incorrect. Verified by
   InkyCloud.Tests/Components/ScopedCssScopeAttributeTests. Keeping these styles global
   is an organisational choice, not a workaround. */
/* /Components/Pages/About.razor.rz.scp.css */
/* === About Hero === */
/* Base layout provided by .page-hero in base.css */
.about-hero[b-38ucmujned]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.08), transparent 70%);
    pointer-events: none;
}

/* h1 layout provided by .page-hero h1 in base.css */

/* === Story Section === */
.about-story[b-38ucmujned] {
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    max-width: var(--content-width-narrow);
    margin: 0 auto;
}

.story-content h2[b-38ucmujned] {
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: 1.5rem;
}

.story-content p[b-38ucmujned] {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--clr-gray);
    margin-bottom: 1.25rem;
}

/* === Mission Section === */
.about-mission[b-38ucmujned] {
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    text-align: center;
    background: linear-gradient(180deg, var(--clr-primary) 0%, var(--clr-primary-deep) 100%);
    color: var(--clr-white);
    position: relative;
}

.about-mission h2[b-38ucmujned] {
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--clr-white);
}

.mission-statement[b-38ucmujned] {
    font-size: 1.25rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    color: var(--clr-gray);
}

/* === Values Section === */
.about-values[b-38ucmujned] {
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    text-align: center;
}

.about-values h2[b-38ucmujned] {
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: 3rem;
}

.values-grid[b-38ucmujned] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

/* .value-card reuses the shared .feature-card (base.css) for surface, hover and
   typography; the only delta is left-aligned text (the values section is centred). */
.value-card[b-38ucmujned] {
    text-align: left;
}

/* === About CTA === */
.about-cta[b-38ucmujned] {
    text-align: center;
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    background: var(--clr-dark);
    position: relative;
}

.about-cta[b-38ucmujned]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border-light), transparent);
}

.about-cta h2[b-38ucmujned] {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .values-grid[b-38ucmujned] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* This component's styles live in the global bundle (wwwroot/css/…), shared site-wide.
   NB: Blazor CSS isolation DOES apply to InteractiveServer components — the earlier
   "scoped CSS does not apply" note here was incorrect. Verified by
   InkyCloud.Tests/Components/ScopedCssScopeAttributeTests. Keeping these styles global
   is an organisational choice, not a workaround. */
/* /Components/Pages/Features.razor.rz.scp.css */
/* === Features Hero === */
/* Base layout provided by .page-hero in base.css */
.features-hero[b-nykrgj25ok]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.08), transparent 70%);
    pointer-events: none;
}

/* h1 layout provided by .page-hero h1 in base.css */

/* === Features Grid === */
.features-list[b-nykrgj25ok] {
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.features-list__heading[b-nykrgj25ok] {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    text-align: center;
    color: var(--clr-white);
    margin-bottom: 3rem;
}

.feature-grid[b-nykrgj25ok] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.feature-icon[b-nykrgj25ok] {
    font-size: 1.5rem;
}

/* === Positioning strip — the flat-fee promise (MKT-02) === */
.features-positioning[b-nykrgj25ok] {
    padding: clamp(3rem, 6vw, 4.5rem) 2rem;
    text-align: center;
    background: var(--clr-black);
    border-top: 1px solid var(--clr-border);
}

.features-positioning-inner[b-nykrgj25ok] {
    max-width: 720px;
    margin: 0 auto;
}

.features-positioning__lead[b-nykrgj25ok] {
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.6;
    color: var(--clr-gray);
    margin-bottom: 0.75rem;
}

.features-positioning__figure[b-nykrgj25ok] {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    line-height: 1.4;
    color: var(--clr-white);
    margin: 0;
}

.features-positioning__note[b-nykrgj25ok] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--clr-gray);
    margin: 1rem 0 0;
}

.features-positioning__note a[b-nykrgj25ok] {
    color: var(--clr-accent-light);
    text-decoration: underline;
}

/* === Features CTA === */
.features-cta[b-nykrgj25ok] {
    text-align: center;
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    background: linear-gradient(180deg, var(--clr-primary) 0%, var(--clr-primary-deep) 100%);
    color: var(--clr-white);
}

.features-cta h2[b-nykrgj25ok] {
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--clr-white);
}

@media (max-width: 768px) {
    .feature-grid[b-nykrgj25ok] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* === Hero — Cinematic === */
.hero[b-wdjsx905yn] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Subtract the navbar offset (.main-content has padding-top: var(--navbar-height)).
       Using 100vh here made the hero 100vh + 68px tall, forcing a vertical scrollbar
       on first paint and pushing the content slightly low. */
    min-height: calc(100vh - var(--navbar-height));
    text-align: center;
    overflow: hidden;
    padding: 6rem 2rem;
}

.hero-bg[b-wdjsx905yn] {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, var(--clr-primary-deep) 0%, var(--clr-black) 100%);
}

.hero-grain[b-wdjsx905yn] {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    pointer-events: none;
}

.hero-glow[b-wdjsx905yn] {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
    pointer-events: none;
}

.hero-glow--left[b-wdjsx905yn] {
    top: -100px;
    left: -200px;
    background: var(--clr-accent);
}

.hero-glow--right[b-wdjsx905yn] {
    bottom: -150px;
    right: -200px;
    background: var(--clr-gradient-end);
}

.hero-grid-pattern[b-wdjsx905yn] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(124, 58, 237, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 20%, transparent 70%);
    pointer-events: none;
}

.hero-content[b-wdjsx905yn] {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero-eyebrow[b-wdjsx905yn] {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--clr-accent-light);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    padding: 0.4rem 1.2rem;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 100px;
    background: rgba(124, 58, 237, 0.08);
}


.hero-title[b-wdjsx905yn] {
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--clr-white);
    margin-bottom: 1.5rem;
}

.hero-gradient-text[b-wdjsx905yn] {
    background: linear-gradient(135deg, var(--clr-gradient-start), var(--clr-gradient-end), var(--clr-gradient-accent));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift-b-wdjsx905yn 6s ease infinite;
}

@keyframes gradient-shift-b-wdjsx905yn {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero-subtitle[b-wdjsx905yn] {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.7;
    color: var(--clr-gray);
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

/* .hero-ctas consolidated into the global .cta-actions utility (base.css). */

/* .btn-glow moved to global buttons.css so it applies on every page that uses it
   (About, Features, Pricing, LegalAccept, Subscription), not just Home. */

/* === Section Divider === */
.section-divider[b-wdjsx905yn] {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border-light), transparent);
    max-width: 600px;
    margin: 0 auto;
}

/* === Positioning + the six messaging pillars (MKT-02) === */
.positioning[b-wdjsx905yn] {
    padding: clamp(5rem, 10vw, 8rem) 2rem;
    background: var(--clr-black);
}

.positioning-inner[b-wdjsx905yn] {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.positioning-eyebrow[b-wdjsx905yn] {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-accent-light);
    margin-bottom: 1rem;
}

.positioning-inner > h2[b-wdjsx905yn] {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: 1rem;
}

.positioning-lead[b-wdjsx905yn] {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.7;
    color: var(--clr-gray);
    max-width: 680px;
    margin: 0 auto 3.5rem;
}

.pillars[b-wdjsx905yn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.pillar[b-wdjsx905yn] {
    padding: 1.75rem;
    background: linear-gradient(160deg, rgba(124, 58, 237, 0.06), rgba(37, 99, 235, 0.03));
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
}

.pillar__num[b-wdjsx905yn] {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--clr-accent-light), var(--clr-gradient-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
}

.pillar__title[b-wdjsx905yn] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: 0.6rem;
}

.pillar__body[b-wdjsx905yn] {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--clr-gray);
    margin: 0;
}

.pillar__body a[b-wdjsx905yn] {
    color: var(--clr-accent-light);
    text-decoration: underline;
}

.positioning-price[b-wdjsx905yn] {
    margin: 3.5rem auto 0;
    max-width: 700px;
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    line-height: 1.6;
    color: var(--clr-gray);
}

.positioning-price__lead[b-wdjsx905yn] {
    display: block;
    margin-bottom: 0.4rem;
}

.positioning-price__figure[b-wdjsx905yn] {
    color: var(--clr-white);
    font-weight: 700;
}

/* === Stats Bar === */
.stats-bar[b-wdjsx905yn] {
    padding: 3rem 2rem;
    background: var(--clr-dark);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

.stats-bar-inner[b-wdjsx905yn] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(3rem, 8vw, 6rem);
    max-width: 800px;
    margin: 0 auto;
}

.stat-item[b-wdjsx905yn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.stat-number[b-wdjsx905yn] {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--clr-accent-light), var(--clr-gradient-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-wdjsx905yn] {
    font-size: 0.9rem;
    color: var(--clr-gray);
    text-align: center;
}

/* === Pricing Preview ===
 *
 * Plan-card / price / feature styling lives in css/pages/pricing.css —
 * shared with the dedicated /pricing page so both surfaces stay in sync.
 * This file keeps only the section-level layout for the home page's
 * preview block (background, padding, heading sizing).
 */
.pricing-preview[b-wdjsx905yn] {
    padding: clamp(5rem, 10vw, 8rem) 2rem;
    background: var(--clr-dark);
}

/* === Referral Banner === */
.referral-banner[b-wdjsx905yn] {
    margin-top: 2.5rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(37, 99, 235, 0.08));
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: var(--radius-lg);
    text-align: center;
}

.referral-banner strong[b-wdjsx905yn] {
    font-size: 1.15rem;
    color: var(--clr-white);
    display: block;
    margin-bottom: 0.35rem;
}

.referral-banner p[b-wdjsx905yn] {
    font-size: 0.95rem;
    color: var(--clr-gray);
    margin: 0;
}

.referral-banner + .btn[b-wdjsx905yn] {
    margin-top: 1.5rem;
}

/* === CTA Section === */
.cta-section[b-wdjsx905yn] {
    padding: clamp(5rem, 10vw, 8rem) 2rem;
    text-align: center;
    background: linear-gradient(180deg, var(--clr-primary) 0%, var(--clr-primary-deep) 100%);
    color: var(--clr-white);
    position: relative;
}

.cta-section-inner[b-wdjsx905yn] {
    max-width: 600px;
    margin: 0 auto;
}

.cta-section h2[b-wdjsx905yn] {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--clr-white);
}

.cta-section p[b-wdjsx905yn] {
    font-size: 1.15rem;
    color: var(--clr-gray);
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

/* === Responsive === */
@media (max-width: 768px) {
    .hero[b-wdjsx905yn] {
        min-height: 90vh;
        padding: 5rem 1.5rem;
    }

    .hero-glow[b-wdjsx905yn] {
        width: 350px;
        height: 350px;
        filter: blur(80px);
    }

    .hero-grid-pattern[b-wdjsx905yn] {
        background-size: 50px 50px;
    }

    .pillars[b-wdjsx905yn] {
        grid-template-columns: 1fr;
    }

    .stats-bar-inner[b-wdjsx905yn] {
        gap: 1.5rem 2rem;
    }

    .plan-cards[b-wdjsx905yn] {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .plan-card--featured[b-wdjsx905yn] {
        transform: none;
    }

    .plan-card--featured:hover[b-wdjsx905yn] {
        transform: translateY(-6px);
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found-section[b-7kxm15w0ro] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--clr-dark);
    position: relative;
    overflow: hidden;
}

.not-found-section[b-7kxm15w0ro]::before {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.06), transparent 70%);
    pointer-events: none;
}

.not-found-content[b-7kxm15w0ro] {
    max-width: 500px;
    position: relative;
}

.not-found-code[b-7kxm15w0ro] {
    font-family: var(--font-display);
    font-size: 7rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--clr-accent), var(--clr-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.35;
    line-height: 1;
    margin-bottom: 1rem;
}

.not-found-content h1[b-7kxm15w0ro] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: 1rem;
}

.not-found-content p[b-7kxm15w0ro] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--clr-gray);
    margin-bottom: 2rem;
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* === Pricing page (component-scoped) ===
 *
 * Tier-card / price / feature-list styling has been centralised in
 * css/pages/pricing.css. This scoped file now holds only the pricing-page
 * decorative bits that don't fit the shared visual language —
 * specifically, the hero glow.
 *
 * If you find yourself adding tier-card rules here, add them to the
 * shared pricing.css instead. Scoped rules outweigh shared on specificity
 * and the divergence becomes a maintenance trap (we lost half a session
 * to that on 2026-05-01 — see project memory).
 */

.pricing-hero[b-217yiip7l6]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.08), transparent 70%);
    pointer-events: none;
}

.pricing-faq[b-217yiip7l6]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border-light), transparent);
}

.pricing-faq p a[b-217yiip7l6] {
    color: var(--clr-accent-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pricing-faq p a:hover[b-217yiip7l6] {
    color: var(--clr-white);
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* Legal page styles are shared with Terms — see wwwroot/css/pages/legal.css (global). */
/* /Components/Pages/Terms.razor.rz.scp.css */
/* Legal page styles are shared with Privacy — see wwwroot/css/pages/legal.css (global). */
/* /Components/Pages/Trust.razor.rz.scp.css */
/* === /trust — the four promises ===
   Prose-first page: the words are the product here, so the styling's only job is
   to make four separate promises read as four separate promises, and to keep the
   one sentence that is a commitment about the future visibly apart from the
   three that describe today. Layout comes from Inky.Design (.page-hero, .lead,
   .btn, .cta-actions); everything below is page-local.

   ⚠️ Sober, not salesy. Nothing on this page hovers, lifts or glows on its own —
   a non-interactive card that animates under the cursor reads as a sales panel,
   and this page is asking to be believed. The only motion is the shared
   .animate-on-scroll entrance, which carries its own prefers-reduced-motion
   guard in Inky.Design's base.css.

   ⚠️ Section rhythm (3rem / 5rem) and type sizes are literals because
   Inky.Design's token set stops at --space-12 and ships no type scale. The
   values below are taken from the site's existing prose surfaces (legal.css,
   About.razor.css) rather than invented, so this page moves with them. Adding
   --space-16 / --text-* to the package is a shared-surface change, not a
   page-local one. */

/* Hero glow matched to its siblings (about-hero, legal-hero) — --clr-primary-muted
   is the same 0.08 alpha those use. The previous --clr-glow (0.15) made the page
   about restraint carry the brightest hero on the site. Sized with min() so it
   cannot become a horizontal-overflow source on a 360px phone. */
.trust-hero[b-fbzjbqnlmp]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(600px, 90vw);
    height: clamp(200px, 45vw, 320px);
    background: radial-gradient(ellipse, var(--clr-primary-muted), transparent 70%);
    pointer-events: none;
}

/* No .lead override: the shared primitive's 600px measure and position already
   match every other hero on the site. */

.trust-promises[b-fbzjbqnlmp] {
    padding: clamp(3rem, 6vw, 5rem) var(--spacing-page);
}

/* Ordered so the promises are numbered semantically; the markers are replaced
   by the .promise__label eyebrow, which reads better to a screen reader than
   "1." alone. (list-style:none strips list semantics in Safari/VoiceOver, which
   is why the markup carries role="list".)

   The gap is deliberately wider than a card grid's: four promises should read as
   four separate beats, not as one component. */
.promise-list[b-fbzjbqnlmp] {
    max-width: var(--content-width-narrow);
    margin-inline: auto;
    padding: 0;
    list-style: none;
    display: grid;
    gap: clamp(var(--space-6), 4vw, var(--space-10));
}

.promise[b-fbzjbqnlmp] {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-card);
    box-shadow: var(--shadow-card);
    /* Floor at --space-5 rather than --space-6: at 360px the gutters plus card
       padding are what decide whether the prose gets a readable measure. */
    padding: clamp(var(--space-5), 5vw, var(--space-10));
}

.promise__label[b-fbzjbqnlmp] {
    margin: 0 0 var(--space-3);
    font-family: var(--font-mono);
    /* 0.8rem / 0.12em is the site's established eyebrow (Home's hero badge). */
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* #A855F7 on #0D0B21 = 4.88:1 — clears AA (4.5:1) for text of any size. */
    color: var(--clr-accent-light);
}

/* The statement is the thing an artist is asked to believe, so it carries the
   site's section-heading weight (700) and step rather than sitting a size below
   it. Letter-spacing comes from the shared h1/h2/h3 rule in base.css. */
.promise__statement[b-fbzjbqnlmp] {
    margin: 0 0 var(--space-6);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--clr-white);
}

.promise p[b-fbzjbqnlmp] {
    /* 1.05rem / 1.8 — the About story prose, this site's "read this properly"
       setting. 60ch caps the measure on the ~800-896px window where the card is
       at full width but the label rail has not yet kicked in; `ch` overestimates
       a proportional face, so this lands near 72 real characters.
       overflow-wrap keeps a long email address inside the card at 360px rather
       than pushing the document sideways (guard: MobilePublicLayoutSmokeTests). */
    margin: 0 0 var(--space-4);
    max-width: 60ch;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--clr-gray);
    overflow-wrap: break-word;
}

.promise p:last-child[b-fbzjbqnlmp] {
    margin-bottom: 0;
}

.promise strong[b-fbzjbqnlmp] {
    color: var(--clr-off-white);
}

/* The export commitment is set apart because it is the one sentence on the page
   that is a promise about the future rather than a description of today — the
   distinction is load-bearing and must survive a skim.
   Four signals, so no single one has to carry it: a solid accent edge, a raised
   panel, its own breathing room away from the prose flow, and a size above the
   body text. Child-combinator selectors because `.promise p` would otherwise
   out-specify a bare `.promise__commitment` on the shared properties. */
.promise > .promise__commitment[b-fbzjbqnlmp] {
    margin-block: var(--space-8);
    border-inline-start: 3px solid var(--clr-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    /* Inline padding gives ground on a phone: the card is already at its own
       floor there, and this block sits inside it. */
    padding: var(--space-5) clamp(var(--space-4), 4vw, var(--space-6));
    background: var(--clr-accent-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

.promise a[b-fbzjbqnlmp],
.trust-close a[b-fbzjbqnlmp] {
    color: var(--clr-accent-light);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color var(--transition-fast);
}

.promise a:hover[b-fbzjbqnlmp],
.promise a:focus-visible[b-fbzjbqnlmp],
.trust-close a:hover[b-fbzjbqnlmp],
.trust-close a:focus-visible[b-fbzjbqnlmp] {
    color: var(--clr-white);
}

/* Wide viewports: the promise number moves into a left rail, so each promise
   reads as a numbered clause — and the prose lands on a ~65ch measure instead of
   running the full 720px of the card. Below this it stacks, which is the same
   layout the label already had. */
@media (min-width: 56rem) {
    .promise[b-fbzjbqnlmp] {
        display: grid;
        grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
        column-gap: var(--space-8);
    }

    .promise > *[b-fbzjbqnlmp] {
        grid-column: 2;
    }

    .promise > .promise__label[b-fbzjbqnlmp] {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        /* Optical alignment with the cap height of the statement's first line. */
        margin: var(--space-2) 0 0;
    }
}

/* Hairline divider so the closing block reads as its own beat rather than a
   fifth promise. Inset to the page gutter instead of a fixed width, so it holds
   its proportion from 360px up. */
.trust-close[b-fbzjbqnlmp] {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) var(--spacing-page) clamp(var(--space-10), 8vw, var(--space-12));
}

.trust-close[b-fbzjbqnlmp]::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: var(--spacing-page);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border-light), transparent);
}

.trust-close-inner[b-fbzjbqnlmp] {
    max-width: var(--content-width-narrow);
    margin-inline: auto;
    text-align: center;
}

/* Matches the closing-CTA heading step used on /about — this block does the
   same job. It was a size below every other h2 on the site. */
.trust-close h2[b-fbzjbqnlmp] {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: var(--space-4);
}

/* Centred text wants a shorter measure than a left-aligned column — an 800px
   line with a ragged centre is hard to track back to the next line's start. */
.trust-close p[b-fbzjbqnlmp] {
    max-width: 54ch;
    margin: 0 auto var(--space-8);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--clr-gray);
    overflow-wrap: break-word;
}