/* BlueNexus Design System v2 — Aspekta (Ivo Dolenc, MIT-licensed) */
@font-face {
  font-family: 'Aspekta';
  src: url('/css/fonts/AspektaVF.woff2') format('woff2-variations'),
       url('/css/fonts/AspektaVF.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@400;500&display=swap');

:root {
  --cobalt: #225EEC;
  --cobalt-dark: #1A4BC4;
  --cobalt-light: rgba(34,94,236,0.06);
  --cobalt-bg: rgba(34,94,236,0.03);
  --sky: #598AFF;
  --sky-light: #F0F5FF;
  --white: #FFFFFF;
  --off-white: #F5F5F5;
  --light-gray: #E1E1E1;
  --mid-gray: #7E8699;
  --dark-gray: #293B66;
  --near-black: #0C1939;
  --green: #52B25B;
  --green-light: #E6F4E7;
  --amber: #FFB738;
  --amber-light: #FFF4D9;
  --red: #F1511C;
  --lotion: #FFFCF7;
  --gray-50: #FAFAFA;
  --gray-400: #B3BCC6;
  --max-width: 1180px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(12,25,57,0.04), 0 1px 2px rgba(12,25,57,0.06);
  --shadow-md: 0 4px 16px rgba(34,94,236,0.06), 0 1px 3px rgba(12,25,57,0.04);
  --shadow-lg: 0 8px 30px rgba(34,94,236,0.08), 0 2px 6px rgba(12,25,57,0.04);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Aspekta',-apple-system,system-ui,sans-serif; color:var(--dark-gray); background:var(--gray-50); line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:var(--cobalt); text-decoration:none; transition:color .2s; }
img { max-width:100%; display:block; }

.reveal { opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── NAV ── */
.nav { position:fixed; top:0; width:100%; z-index:100; background:rgba(255,255,255,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(229,232,240,.6); height:68px; }
.nav-inner { max-width:var(--max-width); margin:0 auto; padding:0 40px; height:68px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; }
.nav-logo img, .nav-logo svg { height:30px; width:auto; }
.nav-links { display:flex; align-items:center; gap:32px; list-style:none; }
.nav-links a { font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:14px; color:var(--mid-gray); transition:color .2s; letter-spacing:-.01em; }
.nav-links a:hover, .nav-links a.active { color:var(--cobalt); }
.nav-right { display:flex; align-items:center; gap:14px; }
.nav-login { font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:14px; color:var(--mid-gray); transition:color .2s; }
.nav-login:hover { color:var(--cobalt); }

/* Hamburger button — hidden on desktop */
.nav-hamburger { display:none; background:none; border:none; cursor:pointer; padding:6px; flex-direction:column; gap:5px; }
.nav-hamburger span { display:block; width:22px; height:2px; background:var(--near-black); border-radius:2px; transition:transform .25s, opacity .25s; }
.nav-open .nav-hamburger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-open .nav-hamburger span:nth-child(2) { opacity:0; }
.nav-open .nav-hamburger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer — hidden by default */
.nav-mobile { display:none; }
.nav-mobile ul { list-style:none; display:flex; flex-direction:column; gap:4px; }
.nav-mobile ul a { display:block; padding:12px 20px; font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:15px; color:var(--near-black); border-radius:var(--radius-sm); transition:background .15s; }
.nav-mobile ul a:hover { background:var(--light-gray); }
.nav-mobile-ctas { display:flex; flex-direction:column; gap:10px; padding:8px 20px 20px; }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:6px; font-family:'Aspekta',system-ui,sans-serif; font-weight:500; border:none; cursor:pointer; transition:all .2s; letter-spacing:-.01em; }
.btn-primary { background:var(--cobalt); color:var(--white); padding:11px 24px; border-radius:var(--radius-sm); font-size:14px; box-shadow:0 1px 2px rgba(34,94,236,.15); }
.btn-primary:hover { background:var(--cobalt-dark); transform:translateY(-1px); box-shadow:0 3px 8px rgba(34,94,236,.2); }
.btn-secondary { background:var(--white); color:var(--cobalt); padding:11px 24px; border-radius:var(--radius-sm); font-size:14px; border:1.5px solid var(--light-gray); }
.btn-secondary:hover { border-color:var(--cobalt); background:var(--cobalt-bg); }
.btn-ghost { background:transparent; color:var(--cobalt); font-size:14px; padding:0; }
.btn-ghost:hover { opacity:.8; }
.btn-ghost::after { content:' →'; }
.btn-lg { padding:13px 30px; font-size:15px; }
.btn-white { background:var(--white); color:var(--cobalt); border:none; box-shadow:var(--shadow-sm); }
.btn-white:hover { background:var(--off-white); transform:translateY(-1px); box-shadow:var(--shadow-md); }

/* ── LAYOUT ── */
.section { padding:100px 40px; max-width:var(--max-width); margin:0 auto; }
.section-sm { padding:72px 40px; }
.section-alt { background:var(--off-white); }
.section-full { max-width:none; }
.section-heading { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:38px; line-height:1.15; color:var(--near-black); letter-spacing:-.03em; margin-bottom:14px; }
.section-heading-lg { font-size:46px; }
.section-sub { font-size:17px; color:var(--mid-gray); max-width:600px; line-height:1.7; letter-spacing:-.01em; }
.text-center { text-align:center; }
.mx-auto { margin-left:auto; margin-right:auto; }
.mt-12 { margin-top:12px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; } .mt-32 { margin-top:32px; } .mt-48 { margin-top:48px; } .mt-64 { margin-top:64px; }
.mb-8 { margin-bottom:8px; } .mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; }

/* ── HERO ── */
.page-hero { position:relative; z-index:1; padding-top:148px; padding-bottom:80px; }
.page-hero.hero-tight { padding-bottom:0; }
.page-hero h1 { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:50px; line-height:1.08; color:var(--near-black); letter-spacing:-.035em; margin-bottom:18px; }
/* Hero kicker — now styled as a cobalt-tinted pill to match the
   home + /build pill pattern (`.intent-hero-pill`). Used on the
   for-experts / for-builders / for-products hero areas; the
   `centered` parent class on `.page-hero` centers the inline-block
   pill horizontally. */
.hero-kicker { display:inline-block; font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--cobalt); padding:6px 14px; border:1px solid rgba(34,94,236,.35); background:rgba(34,94,236,.06); border-radius:999px; margin:0 0 18px; }
/* Rotating word inside the kicker (e.g. /for-experts). `inline-block`
   so opacity transitions render reliably across browsers. */
.hero-rotate { display:inline-block; transition:opacity .25s ease; }
.page-hero.centered { text-align:center; }
.page-hero.centered h1, .page-hero.centered .section-sub { margin-left:auto; margin-right:auto; }
.page-hero.centered h1 { max-width:680px; }
.hero-ctas { display:flex; gap:12px; margin-top:32px; position:relative; z-index:2; }
.page-hero.centered .hero-ctas { justify-content:center; }

/* ── HEALTH LOGOS ── */
.health-logos { display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap; }
.health-logos img { height:32px; width:auto; filter:brightness(0) invert(1) opacity(.5); transition:all .3s ease; }
.health-logos img:hover { filter:brightness(0) invert(1) opacity(1); }

/* ── TRUST BAR ── */
.trust-bar { display:flex; align-items:center; gap:12px; justify-content:center; font-size:13px; color:var(--mid-gray); margin-top:44px; flex-wrap:wrap; }
.trust-logos { display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center; }
.trust-logo { padding:8px 18px; border-radius:var(--radius-sm); background:var(--off-white); border:1px solid var(--light-gray); font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:13px; color:var(--mid-gray); transition:all .2s; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:8px; }
.trust-logo svg, .trust-logo img { flex-shrink:0; vertical-align:middle; }
.trust-logo:hover { border-color:var(--cobalt); color:var(--cobalt); background:var(--cobalt-bg); box-shadow:var(--shadow-sm); }

/* ── CARDS ── */
.card { background:var(--white); border:1px solid var(--light-gray); border-radius:var(--radius); padding:28px; transition:all .25s ease; box-shadow:var(--shadow-sm); }
.card:hover { border-color:rgba(34,94,236,.15); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.card h3, .card h4 { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:17px; color:var(--near-black); margin-bottom:10px; letter-spacing:-.02em; }
.card p { font-size:14.5px; color:var(--mid-gray); line-height:1.65; }
.card-cta { display:inline-block; margin-top:14px; font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:14px; color:var(--cobalt); }
a.card { display:flex; flex-direction:column; text-decoration:none; }
a.card:hover .card-cta { text-decoration:underline; }
.card-build-your-own { background:var(--off-white); border-style:dashed; border-color:var(--mid-gray); }
.card-build-your-own:hover { border-style:solid; border-color:var(--cobalt); }

/* ── GRIDS ── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* ── STATS ── */
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--light-gray); border-radius:var(--radius); overflow:hidden; background:var(--white); box-shadow:var(--shadow-sm); }
.stat-item { padding:32px; text-align:center; border-right:1px solid var(--light-gray); }
.stat-item:last-child { border-right:none; }
.stat-number { font-family:'Chivo Mono',monospace; font-weight:500; font-size:40px; color:var(--cobalt); line-height:1; margin-bottom:8px; letter-spacing:-.02em; }
.stat-label { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:12px; color:var(--mid-gray); text-transform:uppercase; letter-spacing:.06em; }

/* ── STEP NUMBERS ── */
.step-number { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,rgba(89,138,255,.15),rgba(34,94,236,.1)); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-family:'Chivo Mono',monospace; font-weight:500; font-size:16px; color:var(--cobalt); }

/* ── SECURITY ICONS ── */
.security-icon { width:42px; height:42px; border-radius:11px; background:linear-gradient(135deg,rgba(89,138,255,.12),rgba(34,94,236,.08)); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; }

/* ── GRADIENT BAND ── */
.gradient-band { background:linear-gradient(135deg,#0C1939 0%,#225EEC 45%,#598AFF 100%); padding:100px 40px; text-align:center; position:relative; overflow:hidden; }
.accent-band { background:var(--sky-light); padding:80px 40px; text-align:center; }
.gradient-band::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:radial-gradient(ellipse at 30% 20%,rgba(89,138,255,.12) 0%,transparent 60%); pointer-events:none; }
.gradient-band .section-heading { color:var(--white); }
.gradient-band .section-sub { color:rgba(255,255,255,.65); }
.gradient-band .card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(12px); box-shadow:0 2px 8px rgba(0,0,0,.1); }
.gradient-band .card:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); }
.gradient-band .card h3, .gradient-band .card h4 { color:var(--white); }
.gradient-band .card p { color:rgba(255,255,255,.6); }
.platform-card { display:flex; align-items:center; justify-content:space-between; width:170px; padding:16px 18px; border-radius:14px; color:white; font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:14px; border:none; cursor:pointer; transition:all .2s; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.platform-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.3); filter:brightness(1.05); }

/* ── PRICING ── */
.pricing-card { border:1px solid var(--light-gray); border-radius:var(--radius-lg); padding:32px; background:var(--white); display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:all .25s; }
.pricing-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pricing-card.highlighted { border:2px solid var(--cobalt); box-shadow:var(--shadow-lg); position:relative; }
.pricing-card.highlighted::before { content:'★ Most Popular'; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--cobalt); color:var(--white); padding:4px 16px; border-radius:20px; font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:11px; letter-spacing:.02em; }
.pricing-name { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:22px; color:var(--near-black); letter-spacing:-.02em; }
.pricing-price { font-family:'Chivo Mono',monospace; font-size:34px; font-weight:500; color:var(--cobalt); margin:6px 0; letter-spacing:-.02em; }
.pricing-price span { font-size:15px; color:var(--mid-gray); font-family:'Aspekta',system-ui,sans-serif; }
.pricing-desc { font-size:14px; color:var(--mid-gray); margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--light-gray); }
.pricing-features { list-style:none; flex:1; }
.pricing-features li { font-size:13.5px; color:var(--dark-gray); padding:5px 0; display:flex; align-items:flex-start; gap:8px; line-height:1.5; }
.pricing-features li::before { content:'✓'; color:var(--cobalt); font-weight:700; flex-shrink:0; font-size:13px; }
.pricing-features li.muted { color:var(--mid-gray); }
.pricing-features li.muted::before { content:'—'; color:var(--light-gray); }
.pricing-cta { margin-top:20px; }
.pricing-cta .btn { width:100%; justify-content:center; }

/* ── BADGES ── */
.badge { display:inline-block; padding:4px 12px; border-radius:20px; font-family:'Aspekta',system-ui,sans-serif; font-size:12px; font-weight:600; margin-bottom:14px; letter-spacing:.01em; }
.badge-green { background:var(--green-light); color:var(--green); }
.badge-blue { background:rgba(34,94,236,.08); color:var(--cobalt); }
.badge-amber { background:var(--amber-light); color:var(--amber); }
.badge-purple { background:rgba(124,77,255,.08); color:#7C4DFF; }
.text-highlight { color:var(--cobalt); }
.ribbon { position:absolute; top:20px; right:-50px; background:var(--amber); color:#fff; font-family:'Aspekta',system-ui,sans-serif; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; width:200px; text-align:center; padding:5px 0; transform:rotate(45deg); box-shadow:0 1px 4px rgba(0,0,0,.15); z-index:1; }

/* ── COMPARISON TABLE ── */
.comparison-table { width:100%; border-collapse:collapse; }
.comparison-table th { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:14px; color:var(--near-black); text-align:left; padding:14px 16px; border-bottom:2px solid var(--light-gray); }
.comparison-table td { font-size:14px; padding:13px 16px; border-bottom:1px solid var(--light-gray); vertical-align:top; }
.comparison-table tr:hover td { background:var(--off-white); }
.comparison-table .label { font-weight:600; color:var(--near-black); }
@media (max-width:768px) {
  .comparison-table { min-width:600px; }
  .comparison-table th, .comparison-table td { padding:10px 12px; font-size:13px; }
}
.comparison-scroll-hint { display:none; font-size:12.5px; color:var(--mid-gray); text-align:center; margin-bottom:12px; }
@media (max-width:768px) { .comparison-scroll-hint { display:block; } }

/* ── CONNECTOR CARDS ── */
.connector-card { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--light-gray); border-radius:var(--radius-sm); background:var(--white); transition:all .2s; box-shadow:var(--shadow-sm); }
.connector-card:hover { border-color:var(--cobalt); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.connector-icon { width:38px; height:38px; border-radius:9px; background:var(--off-white); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.connector-name { font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:14px; color:var(--near-black); letter-spacing:-.01em; }
.connector-cat { font-size:12px; color:var(--mid-gray); }

/* ── FAQ ── */
.faq-item { border-bottom:1px solid var(--light-gray); padding:22px 0; }
.faq-q { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:15px; color:var(--near-black); cursor:pointer; display:flex; justify-content:space-between; align-items:center; letter-spacing:-.01em; }
.faq-q::after { content:'+'; font-size:20px; color:var(--mid-gray); transition:transform .2s; }
.faq-q.open::after { content:'−'; }
.faq-a { font-size:14.5px; color:var(--mid-gray); line-height:1.7; max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; }
.faq-a.open { max-height:250px; padding-top:14px; }

/* ── FORMS ── */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:14px; color:var(--near-black); margin-bottom:6px; }
.form-input, .form-textarea, .form-select { width:100%; padding:11px 16px; border:1px solid var(--light-gray); border-radius:var(--radius-sm); font-family:'Aspekta',system-ui,sans-serif; font-size:14.5px; color:var(--dark-gray); background:var(--white); transition:border-color .2s, box-shadow .2s; }
.form-input:focus, .form-textarea:focus { outline:none; border-color:var(--cobalt); box-shadow:0 0 0 3px rgba(34,94,236,.08); }
.form-textarea { min-height:100px; resize:vertical; }
.form-input::placeholder, .form-textarea::placeholder { color:var(--gray-400); }
.form-checkbox-group { display:flex; flex-wrap:wrap; gap:12px; }
.form-checkbox { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--dark-gray); cursor:pointer; }

/* ── NEWSLETTER BAND ── */
.newsletter-band { background:var(--off-white); padding:56px 40px; border-top:1px solid var(--light-gray); }
.newsletter-inner { max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.newsletter-inner h3 { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:22px; color:var(--near-black); letter-spacing:-.02em; }
.newsletter-inner p { font-size:14px; color:var(--mid-gray); margin-top:4px; }
.newsletter-form { display:flex; gap:10px; align-items:center; }
.newsletter-form input[type="email"] { padding:11px 16px; border-radius:var(--radius-sm); border:1px solid var(--light-gray); background:var(--white); color:var(--dark-gray); font-family:'Aspekta',system-ui,sans-serif; font-size:14px; width:280px; }
.newsletter-form input[type="email"]::placeholder { color:var(--mid-gray); }
.newsletter-form input[type="email"]:focus { outline:none; border-color:var(--cobalt); background:var(--white); box-shadow:0 0 0 3px rgba(34,94,236,.08); }
.newsletter-form input[type="submit"].btn { background:var(--cobalt); color:var(--white); padding:11px 24px; border-radius:var(--radius-sm); font-size:14px; font-family:'Aspekta',system-ui,sans-serif; font-weight:500; box-shadow:0 1px 2px rgba(34,94,236,.15); }
.newsletter-form input[type="submit"].btn:hover { background:var(--cobalt-dark); transform:translateY(-1px); box-shadow:0 3px 8px rgba(34,94,236,.2); }

/* ── FOOTER CTA ── */
.footer-cta { padding:88px 40px; text-align:center; background:var(--off-white); }
.footer-cta-buttons { display:flex; gap:12px; justify-content:center; margin-top:32px; }

/* ── FOOTER ── */
.footer { background:var(--near-black); padding:56px 40px 28px; }
.footer-inner { max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.footer-brand { }
.footer-brand .nav-logo { margin-bottom:12px; }
.footer-brand .nav-logo img, .footer-brand .nav-logo svg { height:24px; filter:brightness(0) invert(1); }
.footer-brand p { font-size:13px; color:#6B7280; max-width:260px; line-height:1.6; }
.footer-social { display:flex; gap:12px; margin-top:16px; }
.footer-social a { width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#6B7280; font-size:14px; transition:all .2s; font-family:'Aspekta',system-ui,sans-serif; font-weight:600; }
.footer-social a:hover { background:rgba(255,255,255,.12); color:var(--white); }
.footer-col h5 { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:13px; color:var(--white); margin-bottom:14px; letter-spacing:.02em; text-transform:uppercase; }
.footer-col a { display:block; font-size:13.5px; color:#6B7280; margin-bottom:9px; transition:color .2s; }
.footer-col a:hover { color:var(--white); }
.footer-bottom { max-width:var(--max-width); margin:0 auto; padding-top:24px; margin-top:40px; border-top:1px solid rgba(255,255,255,.06); display:flex; justify-content:space-between; font-size:12px; color:#4B5563; }

/* ── BLOG ── */
.blog-article { max-width:720px; margin:0 auto; padding:148px 40px 80px; }
.blog-article h1 { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:38px; line-height:1.15; color:var(--near-black); letter-spacing:-.03em; margin-bottom:8px; }
.blog-meta { font-family:'Aspekta',system-ui,sans-serif; font-size:14px; color:var(--mid-gray); margin-bottom:32px; display:flex; align-items:center; gap:8px; }
.blog-meta-sep { color:var(--light-gray); }
.blog-hero-image { width:100%; border-radius:var(--radius); margin-bottom:32px; }
.blog-content { font-size:16px; color:var(--dark-gray); line-height:1.8; }
.blog-content h2 { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:24px; color:var(--near-black); letter-spacing:-.02em; margin:40px 0 16px; }
.blog-content h3 { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:20px; color:var(--near-black); letter-spacing:-.02em; margin:32px 0 12px; }
.blog-content p { margin-bottom:20px; }
.blog-content ul, .blog-content ol { margin-bottom:20px; padding-left:24px; }
.blog-content li { margin-bottom:8px; }
.blog-content a { color:var(--cobalt); text-decoration:underline; text-underline-offset:2px; }
.blog-content a:hover { opacity:.8; }
.blog-content img { border-radius:var(--radius); margin:24px 0; }
.blog-content blockquote { border-left:3px solid var(--cobalt); padding-left:20px; margin:24px 0; color:var(--mid-gray); font-style:italic; }
.blog-content code { font-family:'Chivo Mono',monospace; font-size:14px; background:var(--off-white); padding:2px 6px; border-radius:4px; color:var(--near-black); }
.blog-content pre { background:var(--near-black); color:#a5d6ff; border-radius:var(--radius-sm); padding:20px; font-family:'Chivo Mono',monospace; font-size:13px; line-height:1.6; overflow-x:auto; margin:24px 0; }
.blog-content pre code { background:none; padding:0; color:inherit; font-size:inherit; }
.blog-content hr { border:none; border-top:1px solid var(--light-gray); margin:40px 0; }

/* Blog listing */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card { text-decoration:none; display:flex; flex-direction:column; transition:all .25s ease; }
.blog-card:hover { transform:translateY(-3px); }
.blog-card-image { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius) var(--radius) 0 0; }
.blog-card-body { padding:20px 0 0; }
.blog-card-date { font-family:'Aspekta',system-ui,sans-serif; font-size:13px; color:var(--mid-gray); }
.blog-card-body h3 { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:17px; color:var(--near-black); margin:8px 0; letter-spacing:-.02em; line-height:1.35; }
.blog-card-body p { font-size:14px; color:var(--mid-gray); line-height:1.6; }

/* ── PATH CARDS ── */
.path-card { text-decoration:none; display:block; padding:32px; border-width:2px; border-style:solid; }
.path-card-core { border-color:rgba(34,94,236,.12); background:linear-gradient(135deg,rgba(34,94,236,.02),rgba(89,138,255,.04)); }
.path-card-forge { border-color:rgba(82,178,91,.12); background:linear-gradient(135deg,rgba(82,178,91,.02),rgba(82,178,91,.04)); }
.path-card-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.path-card-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.path-card-icon-core { background:rgba(34,94,236,.08); }
.path-card-icon-forge { background:rgba(82,178,91,.08); }
.path-card-label { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.path-card-label-core { color:var(--cobalt); }
.path-card-label-forge { color:var(--green); }
.path-card h3 { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:22px; color:var(--near-black); margin-bottom:8px; letter-spacing:-.02em; }
.path-card p { font-size:15px; color:var(--mid-gray); line-height:1.6; margin-bottom:16px; }
.path-card-cta { font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:14px; }
.path-card-cta-core { color:var(--cobalt); }
.path-card-cta-forge { color:var(--green); }

/* ── SECTION UTILITIES ── */
.section-flush { padding:0 40px 80px; max-width:var(--max-width); margin:0 auto; }
.section-no-top { padding-top:0; }
.caption { text-align:center; font-size:13px; color:var(--mid-gray); }

/* ── STEP CONTENT (How It Works) ── */
.step-title { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:20px; color:var(--near-black); margin-bottom:12px; }
.step-desc { font-size:15px; color:var(--mid-gray); }

/* ── PROBLEM / SOLUTION CARDS ── */
.card-problem { background:var(--off-white); }
.card-solution { background:rgba(34,94,236,.03); border-color:rgba(34,94,236,.15); }
.card-problem h4 { color:var(--mid-gray); }
.card-solution h4 { color:var(--cobalt); }

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; backdrop-filter:blur(4px); }
.modal-dialog { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:white; border-radius:16px; padding:36px 40px; max-width:600px; width:90%; max-height:85vh; overflow-y:auto; z-index:201; box-shadow:0 24px 48px rgba(0,0,0,.2); }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.modal-title { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:20px; color:var(--near-black); }
.modal-close { background:none; border:none; font-size:24px; color:var(--mid-gray); cursor:pointer; padding:4px; }

/* ── INSTALL STEPS ── */
.install-url { display:flex; align-items:center; gap:8px; background:var(--off-white); border:1px solid var(--light-gray); border-radius:10px; padding:12px 16px; margin:16px 0 24px; font-family:'Chivo Mono',monospace; font-size:14px; color:var(--dark-gray); }
.install-url code { flex:1; }
.install-url button { background:none; border:1px solid var(--light-gray); border-radius:6px; padding:6px 10px; cursor:pointer; font-size:16px; transition:all .15s; }
.install-url button:hover { background:var(--cobalt); color:white; border-color:var(--cobalt); }
.install-step { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--light-gray); }
.install-step:last-child { border-bottom:none; }
.install-step-num { width:32px; height:32px; border-radius:50%; background:rgba(34,94,236,.08); display:flex; align-items:center; justify-content:center; font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:14px; color:var(--cobalt); flex-shrink:0; }
.install-step-content h4 { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:15px; color:var(--near-black); margin-bottom:4px; }
.install-step-content p { font-size:14px; color:var(--mid-gray); line-height:1.5; }
.install-step-content ul { font-size:14px; color:var(--mid-gray); line-height:1.6; margin-top:6px; padding-left:20px; }
.install-step-content ul li { margin-bottom:4px; }
.install-step-content strong { color:var(--near-black); }
.install-code { background:var(--near-black); color:#a5d6ff; border-radius:8px; padding:16px; font-family:'Chivo Mono',monospace; font-size:13px; line-height:1.5; margin:12px 0; overflow-x:auto; white-space:pre; }

/* ── COPY URL BOX ── */
.copy-url { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:10px 16px; font-family:'Chivo Mono',monospace; font-size:14px; color:rgba(255,255,255,.8); }
.copy-btn { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:5px 12px; cursor:pointer; font-size:12px; font-family:'Aspekta',system-ui,sans-serif; font-weight:500; color:rgba(255,255,255,.7); transition:all .15s; }
.copy-btn:hover { background:rgba(255,255,255,.2); color:rgba(255,255,255,.9); }

/* ── USE CASE CARDS ── */
.card-link { text-decoration:none; display:flex; flex-direction:column; }
.card-link p { flex:1; }

/* ── REVEAL STAGGER ── */
.stagger-1 { transition-delay:.05s; }
.stagger-2 { transition-delay:.1s; }
.stagger-3 { transition-delay:.15s; }
.stagger-4 { transition-delay:.2s; }
.stagger-5 { transition-delay:.25s; }
.stagger-6 { transition-delay:.3s; }

/* ── HERO IMAGE + SVG ANIMATION ── */
.hero-img_wrap { position:relative; z-index:0; width:100%; margin:-40px auto 0; text-align:center; padding-bottom:60px; }
.hero-img_wrap .hero-img-inner { position:relative; overflow:hidden; }
.hero-img { width:100%; height:auto; clip-path:inset(0 0 20% 0); margin-bottom:-20%; transform:scale(0.8); }
.hero-svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; display:flex; justify-content:center; align-items:center; }
.hero-svg svg { width:100%; height:auto; overflow:visible; max-height:100%; }
@media (max-width:640px) {
  .hero-svg { display:none; }
  .hero-img { transform:scale(1); clip-path:inset(0 0 30% 0); margin-bottom:-30%; }
  .hero-img_wrap { padding-bottom:30px; }
}

[path-follow] { color:green; opacity:0; }

[left-side-path], [right-side-path] { stroke-dasharray:1; stroke-dashoffset:1; fill:none; stroke-linecap:round; stroke-linejoin:round; }

.hero-svg .logo { filter:grayscale(100) brightness(0.95); transform:scale(.92); transition:filter .4s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1), opacity .3s ease; position:relative; z-index:1; opacity:.85; }
.hero-svg .logo.with-color { filter:grayscale(0) brightness(1); transform:scale(1); opacity:1; }

.hero-svg :is(.logo, [logo-pulse]) { transform-box:fill-box; transform-origin:center; animation:none; }
.hero-svg .logo.to-pulse [logo-pulse] { animation:logoPulseBg 1.2s ease-out; }
.hero-svg .logo.to-pulse { animation:logoPulse .7s ease-out; }

[logo-dot].for-gray { fill:#E1E1E1; }
[random-circle] { opacity:0; }
[final-path] { color:transparent; }
[random-circle].for-blue { fill:#598AFF; opacity:1; }
[random-circle].for-gray { fill:#E1E1E1; opacity:1; }
[random-circle].for-gray.to-hide { opacity:0; }
[random-circle].for-blue.to-hide { opacity:0; }
[final-dot] { opacity:0; }
[final-dot].to-show { opacity:1; }

@keyframes logoPulseBg {
  0% { transform:scale(1); opacity:0; }
  10% { transform:scale(1); opacity:1; }
  90% { transform:scale(1.5); opacity:0; }
  100% { transform:scale(1); opacity:0; }
}
@keyframes logoPulse {
  0% { transform:scale(1); }
  40% { transform:scale(.95); }
  100% { transform:scale(1); }
}

/* ── DEVELOPER SPLIT ── */
.dev-split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; max-width:var(--max-width); margin:0 auto; text-align:left; }
.gradient-band .install-code { background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); }
.dev-cta { background:var(--cobalt); padding:100px 40px; text-align:center; }
.dev-cta h2 { color:var(--white); }
.dev-cta p { color:rgba(255,255,255,.7); }
.dev-cta .btn-primary { background:var(--white); color:var(--cobalt); }
.dev-cta .btn-primary:hover { background:var(--off-white); }
.dev-cta .btn-secondary { border-color:rgba(255,255,255,.3); color:var(--white); }
.dev-cta .btn-secondary:hover { background:rgba(255,255,255,.1); }

/* ────────────────────────────────────────────────────────────── */
/* ── v2 REBUILD COMPONENTS (homepage + downstream pages)       ── */
/* ────────────────────────────────────────────────────────────── */

/* ── Two-lane chooser (homepage hero) ── */
.lane-chooser { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:36px; }
.lane-btn { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:22px 28px; flex:1 1 280px; max-width:380px; background:var(--white); border:1.5px solid var(--light-gray); border-radius:var(--radius); transition:all .2s; text-align:left; cursor:pointer; }
.lane-btn:hover { border-color:var(--cobalt); background:var(--cobalt-bg); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.lane-btn-label { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:20px; color:var(--near-black); letter-spacing:-.02em; }
.lane-btn-label::after { content:' →'; color:var(--cobalt); }
.lane-btn-sub { font-size:13.5px; color:var(--mid-gray); line-height:1.5; }
.side-door { margin-top:24px; font-size:14px; color:var(--mid-gray); }
.side-door a { font-weight:500; color:var(--cobalt); }
.side-door a:hover { text-decoration:underline; }

/* ── Intent input (homepage hero) ── */
.intent-hero-headline { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:52px; line-height:1.05; color:var(--near-black); letter-spacing:-.035em; margin:0 auto 14px; max-width:760px; }
.intent-hero-sub { font-size:18px; color:var(--mid-gray); margin:0 auto 28px; max-width:520px; }
.intent-hero-bridge { margin-top:18px; font-size:14.5px; color:var(--mid-gray); font-weight:500; }
.intent-hero-browse { margin-top:6px; font-size:14px; color:var(--mid-gray); display:flex; gap:6px 12px; align-items:center; justify-content:center; flex-wrap:wrap; }
.intent-hero-browse-sep { color:var(--gray-400); }
.intent-hero-browse a { color:var(--cobalt); font-weight:500; }
.intent-hero-browse a:hover { text-decoration:underline; }

.intent-input { position:relative; display:flex; align-items:stretch; gap:0; max-width:720px; margin:0 auto; background:var(--white); border:1.5px solid var(--light-gray); border-radius:14px; padding:6px; box-shadow:0 1px 3px rgba(0,0,0,.04), 0 8px 24px -8px rgba(34,94,236,.10); transition:border-color .2s, box-shadow .2s; }
.intent-input:focus-within { border-color:var(--cobalt); box-shadow:0 1px 3px rgba(0,0,0,.04), 0 12px 32px -10px rgba(34,94,236,.25); }
.intent-input-field { flex:1; min-height:44px; max-height:200px; padding:11px 18px; border:none; outline:none; resize:none; font-family:'Aspekta',system-ui,sans-serif; font-size:16px; color:var(--near-black); background:transparent; line-height:1.5; overflow-y:auto; }
.intent-input-field::placeholder { color:var(--gray-400); }
.intent-input-submit { display:inline-flex; align-items:center; gap:6px; background:var(--cobalt); color:var(--white); border:none; border-radius:10px; padding:0 22px; font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:15px; letter-spacing:-.01em; cursor:pointer; transition:background .2s, transform .15s; align-self:stretch; min-height:44px; }
.intent-input-submit:hover { background:var(--cobalt-dark); }
.intent-input-submit:active { transform:scale(.98); }
.intent-input-submit:disabled { background:var(--gray-400); cursor:not-allowed; transform:none; }
.intent-input-submit-arrow { font-size:17px; transition:transform .2s; }
.intent-input-submit:hover .intent-input-submit-arrow { transform:translateX(2px); }
.intent-input.is-loading .intent-input-submit-label::after { content:' …'; }
/* Input on cobalt-gradient backgrounds: lift via white glow, flip button to white-on-cobalt */
.gradient-band .intent-input { box-shadow:0 4px 24px rgba(0,0,0,.18); border-color:transparent; }
.gradient-band .intent-input:focus-within { box-shadow:0 8px 32px rgba(0,0,0,.25); border-color:transparent; }
.gradient-band .intent-input-submit { background:var(--white); color:var(--cobalt); }
.gradient-band .intent-input-submit:hover:not(:disabled) { background:rgba(255,255,255,.92); }

.intent-buckets { display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:920px; margin:56px auto 0; padding:0 12px; }
.intent-bucket-heading { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--mid-gray); margin:0 0 14px; }
.intent-bucket-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.intent-bucket-prompt { display:flex; align-items:flex-start; gap:10px; width:100%; padding:12px 14px; background:transparent; border:1px solid transparent; border-radius:10px; text-align:left; font-family:'Aspekta',system-ui,sans-serif; font-size:15.5px; color:var(--near-black); cursor:pointer; transition:all .15s; }
.intent-bucket-prompt:hover { background:var(--white); border-color:rgba(34,94,236,.15); transform:translateY(-1px); }
.intent-bucket-arrow { color:var(--cobalt); flex-shrink:0; font-weight:500; }
.intent-bucket-text { line-height:1.4; }

@media (max-width:760px) {
  .intent-hero-headline { font-size:36px; }
  .intent-hero-sub { font-size:16px; }
  .intent-input { flex-direction:column; padding:6px; }
  .intent-input-submit { min-height:48px; padding:12px 22px; justify-content:center; }
  .intent-buckets { grid-template-columns:1fr; gap:28px; margin-top:40px; }
}

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

/* ── Time-compare strip (/for-builders/) ── */
.time-compare { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.time-compare-col { padding:28px; border-radius:var(--radius); border:1px solid var(--light-gray); }
.time-compare-without { background:var(--off-white); }
.time-compare-with { background:var(--white); border-color:rgba(34,94,236,.3); box-shadow:0 4px 16px -6px rgba(34,94,236,.18); }
.time-compare-label { display:inline-block; font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--mid-gray); margin-bottom:18px; }
.time-compare-with .time-compare-label { color:var(--cobalt); }
.time-compare-col ul { list-style:none; padding:0; margin:0 0 18px; }
.time-compare-col li { padding:10px 0; color:var(--dark-gray); font-size:14.5px; border-top:1px solid var(--light-gray); display:flex; gap:10px; align-items:baseline; }
.time-compare-col li:first-child { border-top:none; padding-top:0; }
.time-compare-col li strong { color:var(--near-black); font-weight:600; flex-shrink:0; min-width:90px; }
.time-compare-summary { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:18px; color:var(--near-black); letter-spacing:-.01em; margin:0; padding-top:14px; border-top:1px solid var(--light-gray); }
.time-compare-with .time-compare-summary { color:var(--cobalt); }
@media (max-width:760px) {
  .time-compare { grid-template-columns:1fr; gap:16px; }
  .time-compare-col { padding:22px; }
  .time-compare-col li strong { min-width:78px; }
}

/* ── Wizard carousel (/build/) ── */
.wizard-carousel { max-width:var(--max-width); margin:0 auto; position:relative; }
.wizard-carousel-track {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:24px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:8px 4px 16px;
  -webkit-overflow-scrolling:touch;
}
.wizard-carousel-track::-webkit-scrollbar { display:none; }
.wizard-card {
  flex-grow:0;
  flex-shrink:0;
  flex-basis:88%;
  max-width:880px;
  scroll-snap-align:center;
  background:var(--white);
  border:1px solid var(--light-gray);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s;
}
.wizard-card:first-child { margin-left:auto; }
.wizard-card:last-child { margin-right:auto; }
.wizard-card:hover { box-shadow:var(--shadow-md); }
/* Header is a flex row with icon/num + heading. `flex-wrap` is
   intentionally OFF so the heading wraps its own TEXT (multi-line)
   instead of dropping the heading element below the icon when the
   row can't fit it inline. `min-width:0` on the heading is the
   load-bearing trick — without it flex items default to
   `min-width:auto` (= content width) which prevents shrinking and
   forces the parent to overflow. */
.wizard-card-header { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.wizard-card-header h3, .wizard-card-header h4 { flex:1 1 auto; min-width:0; }
.wizard-card-num { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:13px; color:var(--cobalt); letter-spacing:.08em; flex-shrink:0; }
/* Lucide-style icon badge — small cobalt-tinted square that gives
   each card a visual hook without overpowering the heading. Used on
   the homepage capability cards (post-2026-05-25 content split). */
.wizard-card-icon { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:rgba(34,94,236,.08); color:var(--cobalt); flex-shrink:0; }
.wizard-card-icon svg { width:22px; height:22px; }
.wizard-card h3, .wizard-card h4 { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:22px; color:var(--near-black); letter-spacing:-.02em; margin:0; line-height:1.2; }
.wizard-card > p { color:var(--dark-gray); font-size:15.5px; line-height:1.55; margin:0 0 22px; max-width:600px; }
.wizard-card-shot { border-radius:10px; overflow:hidden; border:1px solid var(--light-gray); background:var(--off-white); }
.wizard-card-shot img { display:block; width:100%; height:auto; }

.wizard-carousel-controls { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:28px; }
.wizard-carousel-btn { background:var(--white); border:1.5px solid var(--light-gray); border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--near-black); cursor:pointer; transition:all .2s; font-family:'Aspekta',system-ui,sans-serif; }
.wizard-carousel-btn:hover:not(:disabled) { border-color:var(--cobalt); color:var(--cobalt); transform:translateY(-1px); }
.wizard-carousel-btn:disabled { opacity:.35; cursor:not-allowed; }
.wizard-carousel-dots { display:flex; gap:8px; align-items:center; }
.wizard-carousel-dot { width:8px; height:8px; border-radius:50%; background:var(--light-gray); border:none; padding:0; cursor:pointer; transition:all .25s; }
.wizard-carousel-dot:hover { background:rgba(34,94,236,.4); }
.wizard-carousel-dot.is-active { background:var(--cobalt); width:24px; border-radius:4px; }

@media (max-width:760px) {
  .wizard-card { padding:22px; flex-basis:90%; }
  .wizard-card h3, .wizard-card h4 { font-size:19px; }
}

/* ── Wizard grid — drop-in replacement for the carousel layout.
   All cards visible at once; no auto-rotate, no controls. The
   existing `.wizard-card` styling is reused inside the grid; flex
   props that made sense in a horizontal scroller are reset here
   so cards become equal grid cells instead.
   Two variants:
   - `.wizard-grid` (default) — 3-up, used for the homepage's
     6-card differentiation block (renders as 3×2).
   - `.wizard-grid-4` — 2-up, used wherever the previous carousel
     held 4 cards (`/build` wizard steps, `/for-*` ICP feature
     blocks). 2×2 gives each card room for its longer copy. ── */
.wizard-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:var(--max-width); margin:0 auto; }
.wizard-grid-4 { grid-template-columns:repeat(2,1fr); }
.wizard-grid .wizard-card { flex-basis:auto; max-width:none; padding:28px; scroll-snap-align:none; }
.wizard-grid .wizard-card:first-child { margin-left:0; }
.wizard-grid .wizard-card:last-child { margin-right:0; }
.wizard-grid .wizard-card h3, .wizard-grid .wizard-card h4 { font-size:19px; }
.wizard-grid .wizard-card > p { margin:0; max-width:none; font-size:14.5px; line-height:1.6; }
@media (max-width:900px) { .wizard-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .wizard-grid, .wizard-grid-4 { grid-template-columns:1fr; } }

/* ── Ship + Earn section (/build): two parallel columns
   ("Ship it" and "Earn from it"), each containing two cards. The
   "Earn from it" column carries a "Coming soon" chip while the
   marketplace-monetisation surface is still ramping. ── */
.ship-earn-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:40px; max-width:var(--max-width); margin:0 auto; }
.ship-earn-col { display:flex; flex-direction:column; gap:16px; }
.ship-earn-col-header { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.ship-earn-label { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:12px; color:var(--cobalt); letter-spacing:.1em; text-transform:uppercase; }
.ship-earn-coming { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:10px; color:var(--mid-gray); letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border:1px solid var(--light-gray); border-radius:999px; background:var(--white); }
.ship-earn-card { background:var(--white); border:1px solid var(--light-gray); border-radius:var(--radius); padding:24px; transition:border-color .2s, box-shadow .2s, transform .2s; }
.ship-earn-card:hover { border-color:rgba(34,94,236,.25); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
/* Icon sits inline-left of the heading (matches the home capabilities
   pattern); `min-width:0` on the h3 lets the title shrink + wrap text
   instead of overflowing the row. */
.ship-earn-card-header { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.ship-earn-card-header h3 { margin:0; flex:1 1 auto; min-width:0; }
.ship-earn-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; background:rgba(34,94,236,.08); color:var(--cobalt); flex-shrink:0; }
.ship-earn-icon svg { width:20px; height:20px; }
.ship-earn-card h3 { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:17px; color:var(--near-black); margin:0 0 8px; letter-spacing:-.01em; line-height:1.3; }
.ship-earn-card p { font-size:14.5px; color:var(--mid-gray); line-height:1.55; margin:0; }
.ship-earn-card code { font-family:'JetBrains Mono','Roboto Mono',Menlo,monospace; font-size:12.5px; color:var(--near-black); background:var(--off-white); padding:1px 5px; border-radius:4px; border:1px solid var(--light-gray); }
@media (max-width:900px) { .ship-earn-grid { grid-template-columns:1fr; gap:28px; } }

/* ── Persona quick-links (/build): compact pill row replacing the
   ICP grid that was removed in the 2026-05-25 content split.
   Visitors actively considering a build still need a path to their
   persona's deep dive — these pills carry that link without re-
   mounting the full ICP card grid. Quieter than `.icp-card`,
   tighter than `.icp-strip-card`. ── */
.persona-quick-links { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.persona-quick-link { padding:10px 18px; background:var(--white); border:1px solid var(--light-gray); border-radius:999px; color:var(--near-black); font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:14px; text-decoration:none; transition:border-color .15s, color .15s, background .15s, transform .15s; }
.persona-quick-link:hover { border-color:rgba(34,94,236,.45); color:var(--cobalt); background:rgba(34,94,236,.04); transform:translateY(-1px); }

/* ── Demo agent cards (homepage + /use/) ── */
.demo-strip-heading { text-align:center; max-width:680px; margin:0 auto 36px; }
.demo-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.demo-card { display:flex; flex-direction:column; padding:28px; background:var(--white); border:1px solid var(--light-gray); border-radius:var(--radius); transition:all .25s; box-shadow:var(--shadow-sm); position:relative; }
.demo-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(34,94,236,.15); }
.demo-card-name { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:18px; color:var(--near-black); margin-bottom:6px; letter-spacing:-.02em; }
.demo-card-headline { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:15px; color:var(--cobalt); margin-bottom:12px; letter-spacing:-.01em; }
.demo-card-desc { font-size:14px; color:var(--mid-gray); line-height:1.6; flex:1; margin-bottom:20px; }
.demo-card-cta { font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:14px; color:var(--cobalt); }
.demo-card-cta::after { content:' →'; }
.demo-card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.demo-badge { display:inline-block; padding:3px 10px; border-radius:14px; font-family:'Aspekta',system-ui,sans-serif; font-size:11px; font-weight:600; letter-spacing:.02em; }
.demo-badge-wearable { background:var(--green-light); color:var(--green); }
.demo-badge-confidential { background:var(--green-light); color:var(--green); }

/* ── Pillar strip (homepage + hubs) ── */
.pillar-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.pillar-card { display:flex; flex-direction:column; padding:24px; background:var(--white); border:1px solid var(--light-gray); border-radius:var(--radius); transition:all .25s; text-decoration:none; }
.pillar-card:hover { border-color:rgba(34,94,236,.18); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pillar-card h3, .pillar-card h4 { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:15px; color:var(--near-black); margin-bottom:10px; line-height:1.3; letter-spacing:-.02em; }
.pillar-card p { font-size:13.5px; color:var(--mid-gray); line-height:1.55; flex:1; }

/* ── Provider logo grid (service-logo richness) ── */
.logo-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; max-width:var(--max-width); margin:0 auto; }
@media (max-width:900px) { .logo-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px) { .logo-grid { grid-template-columns:repeat(3,1fr); } }
.logo-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:18px 12px; background:var(--white); border:1px solid var(--light-gray); border-radius:var(--radius-sm); transition:all .2s; min-height:84px; }
.logo-tile:hover { border-color:var(--cobalt); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.logo-tile img { width:28px; height:28px; object-fit:contain; }
.logo-tile-name { font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:11.5px; color:var(--mid-gray); text-align:center; letter-spacing:-.01em; }

/* Logo strip — single row for ICP pages */
.logo-strip { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:780px; margin:0 auto; }
.logo-strip .logo-tile { min-width:90px; min-height:60px; padding:12px 14px; flex-direction:row; gap:8px; }
.logo-strip .logo-tile img { width:20px; height:20px; }
/* 4×2 fixed-grid variant for product/builder proof bands */
.logo-strip-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-width:560px; margin:0 auto; }
.logo-strip-grid .logo-tile { min-width:0; min-height:60px; padding:12px 14px; flex-direction:row; gap:8px; }
.logo-strip-grid .logo-tile img { width:20px; height:20px; }
@media (max-width:560px) {
  .logo-strip-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:380px; }
}

/* ── Product UI screenshot (in-product evidence) ── */
.product-shot { max-width:100%; border:1px solid var(--light-gray); border-radius:var(--radius); box-shadow:var(--shadow-md); display:block; }
.product-shot-wrap { padding:4px; background:linear-gradient(135deg,rgba(34,94,236,.04),rgba(89,138,255,.06)); border-radius:calc(var(--radius) + 4px); }
.product-shot-caption { font-family:'Aspekta',system-ui,sans-serif; font-size:12.5px; color:var(--mid-gray); margin-top:12px; text-align:center; letter-spacing:.02em; }

/* ── Vertical-moat stats block (Template 7) ── */
.moat-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px) { .moat-stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .moat-stats { grid-template-columns:1fr; } }
.moat-stat { background:var(--white); border:1px solid var(--light-gray); border-radius:var(--radius); padding:24px; text-align:left; box-shadow:var(--shadow-sm); }
.moat-stat-headline { font-family:'Chivo Mono',monospace; font-weight:500; font-size:32px; color:var(--cobalt); letter-spacing:-.02em; margin-bottom:8px; line-height:1; }
.moat-stat-label { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:14px; color:var(--near-black); margin-bottom:6px; }
.moat-stat-detail { font-size:12.5px; color:var(--mid-gray); line-height:1.5; }

/* ── Agent detail (Template 5) ── */
.agent-hero { padding-top:148px; padding-bottom:48px; max-width:760px; margin:0 auto; text-align:center; padding-left:40px; padding-right:40px; }
.agent-hero .demo-badge { margin-bottom:18px; }
.agent-hero h1 { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:42px; line-height:1.1; color:var(--near-black); letter-spacing:-.03em; margin-bottom:10px; }
.agent-hero-subhead { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:18px; color:var(--cobalt); margin-bottom:14px; letter-spacing:-.01em; }
.agent-hero-desc { font-size:17px; color:var(--mid-gray); line-height:1.6; max-width:620px; margin:0 auto; }
.agent-section { max-width:760px; margin:0 auto; padding:56px 40px; }
.agent-section h2 { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:24px; color:var(--near-black); letter-spacing:-.02em; margin-bottom:18px; }
.agent-section h3 { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:17px; color:var(--near-black); margin:24px 0 10px; letter-spacing:-.01em; }
.agent-list { list-style:none; padding:0; }
.agent-list li { padding:10px 0; font-size:15px; color:var(--dark-gray); line-height:1.55; padding-left:24px; position:relative; }
.agent-list li::before { content:'•'; position:absolute; left:8px; color:var(--cobalt); font-weight:700; }
.agent-list li strong { color:var(--near-black); font-weight:600; }
.prompt-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.prompt-chip { padding:10px 16px; background:var(--white); border:1px solid var(--light-gray); border-radius:20px; font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:13.5px; color:var(--dark-gray); text-decoration:none; transition:all .2s; }
.prompt-chip:hover { border-color:var(--cobalt); color:var(--cobalt); background:var(--cobalt-bg); }
.connector-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.connector-pill { padding:6px 12px; background:var(--off-white); border:1px solid var(--light-gray); border-radius:14px; font-family:'Aspekta',system-ui,sans-serif; font-size:12.5px; color:var(--dark-gray); font-weight:500; }
.trust-disclaimer { background:var(--off-white); border-left:3px solid var(--amber); padding:14px 18px; margin-top:24px; border-radius:8px; font-size:14px; color:var(--mid-gray); line-height:1.55; }
.agent-cta-strip { text-align:center; padding:64px 40px; background:var(--cobalt-bg); border-radius:var(--radius); max-width:760px; margin:24px auto 64px; }
.agent-cta-strip h2 { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:26px; color:var(--near-black); letter-spacing:-.02em; margin-bottom:8px; }
.agent-cta-strip p { font-size:15px; color:var(--mid-gray); margin-bottom:24px; }

/* ── Sub-nav strip (intent hubs: /use/, /build/) ── */
.subnav { position:sticky; top:68px; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(229,232,240,.6); }
.subnav-inner { max-width:var(--max-width); margin:0 auto; padding:0 40px; height:52px; display:flex; align-items:center; gap:28px; overflow-x:auto; }
.subnav-inner a { font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:13.5px; color:var(--mid-gray); white-space:nowrap; padding:6px 0; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }
.subnav-inner a:hover, .subnav-inner a.active { color:var(--cobalt); border-bottom-color:var(--cobalt); }

/* ── ICP cards (build hub 2x2) ── */
.icp-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.icp-card { display:block; padding:32px; background:var(--white); border:1px solid var(--light-gray); border-radius:var(--radius); transition:all .25s; text-decoration:none; }
.icp-card:hover { border-color:rgba(34,94,236,.2); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.icp-card-label { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:12px; color:var(--cobalt); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.icp-card h3 { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:22px; color:var(--near-black); margin-bottom:10px; letter-spacing:-.02em; }
.icp-card p { font-size:14.5px; color:var(--mid-gray); line-height:1.6; margin-bottom:16px; }
.icp-card-cta { font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:14px; color:var(--cobalt); }
.icp-card-cta::after { content:' →'; }
@media (max-width:768px) { .icp-grid { grid-template-columns:1fr; } }

/* ── Hero chip suggestions (homepage — horizontal pill row beneath the
   input). Reuses the .intent-bucket-prompt JS handler so each chip
   still seeds the input + routes to /marketplace with the audience +
   agent slug. Visual treatment is intentionally light so the chips
   don't compete with the input or the secondary marketplace CTA. ── */
/* ── Positioning pill above the H1. ALL-CAPS cobalt label that gives
   cold visitors instant context (what is this product?) before the
   headline. The "not chatbots" contrast carries an implicit pain
   frame — visitors who've felt the limits of chat tools see
   themselves named. Sits inline-block + centered via parent text-
   align. ── */
.intent-hero-pill { display:inline-block; font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cobalt); padding:6px 14px; border:1px solid rgba(34,94,236,.35); background:rgba(34,94,236,.06); border-radius:999px; margin-bottom:18px; }

/* Headline accent — the single coloured word in the H1 that draws
   the eye to the product noun. Inherits weight/size from .intent-hero-
   headline; only color changes. */
.intent-hero-accent { color:var(--cobalt); }

/* ── Hero with background art (homepage `.has-hero-bg` variant). The
   connector-network image sits absolute behind the H1/input/chips so
   the headline reads on a faded version of the art instead of a flat
   gray panel.

   Section is overridden to full-viewport-width (max-width: none) so
   the bg image bleeds edge-to-edge; the content inside re-constrains
   itself to the 1180px column via `.hero-bg-content`. Without this,
   the .section max-width:1180px clips the bg to a centered panel
   that doesn't read as a true background on wide displays. ── */
/* Bg container wraps both the hero section and the ICP strip so the
   image extends across both surfaces and ends at the bottom of the
   ICP cards rather than at the awkward hero/ICP seam. The wrapper
   gets `position:relative` so the absolute bg child positions
   against it; `overflow:hidden` keeps the scaled image from leaking
   into the trust bar below. */
.hero-bg-area { position:relative; overflow:hidden; }
.page-hero.has-hero-bg { max-width:none; padding:148px 0 0; }
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; display:flex; justify-content:center; align-items:flex-start; overflow:hidden; }
/* Soft radial spotlight behind the headline + input + chips area so
   the text reads on a near-white halo instead of fighting the
   person-silhouette portion of the bg image. Sits ABOVE the image
   but BELOW the content (content sections have their own z-index).
   Connector logos at the edges remain visible because the gradient
   fades to transparent past ~70% radius. */
.hero-bg::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 720px 360px at 50% 28%, rgba(248,248,250,.78) 0%, rgba(248,248,250,.55) 32%, transparent 72%); }
/* Image anchored to the top of the wrapper with a ~60px downshift so
   the person's head sits under the nav. The mask-image gradient
   fades the lower ~30% of the image into transparency so the bottom
   dissolves into the page background instead of hard-cutting at the
   ICP boundary. */
/* Image desaturated to grayscale + lightened so the person silhouette
   becomes neutral atmosphere instead of a blue dotted figure that
   visually rhymes (and competes) with the cobalt brand colour. Lower
   opacity stacks with the radial spotlight above to keep the text
   area near-white. */
.hero-bg-img { width:100%; height:auto; min-width:1200px; max-width:1800px; object-fit:cover; opacity:.10; filter:grayscale(1) brightness(1.08); transform:translateY(60px); -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 95%); mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 95%); }
.hero-bg-svg { position:absolute; inset:0; pointer-events:none; opacity:.28; filter:grayscale(1); display:flex; justify-content:center; align-items:flex-start; padding-top:60px; -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 95%); mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 95%); }
.hero-bg-svg svg { width:100%; max-width:1800px; height:auto; overflow:visible; max-height:100%; }
/* Content layers — hero text + ICP strip — sit above the bg via
   relative + z-index. The wrapper sections are static by default
   which wouldn't reliably stack above an absolute z-index:0 child. */
.hero-bg-area > .page-hero.has-hero-bg,
.hero-bg-area > .icp-strip-section { position:relative; z-index:1; }
.hero-bg-content { max-width:var(--max-width); margin:0 auto; padding:0 40px; }
@media (max-width:768px) { .hero-bg-svg { display:none; } .hero-bg-img { opacity:.10; min-width:600px; transform:translateY(40px); } }

.intent-hero-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; max-width:840px; margin:18px auto 0; }
.intent-hero-chips-prefix { font-size:13px; color:var(--mid-gray); font-weight:500; }
/* The chip shares `.intent-bucket-prompt` so the existing click handler
   wires up automatically — but that class sets `width:100%` +
   `display:flex` for the vertical bucket layout. Override both so
   chips stay inline pills that flex-wrap within the parent. */
.intent-hero-chip.intent-bucket-prompt { display:inline-flex; width:auto; align-items:center; gap:0; padding:8px 16px; background:var(--white); border:1px solid var(--light-gray); border-radius:999px; font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:13.5px; color:var(--near-black); text-align:center; cursor:pointer; transition:border-color .15s, color .15s, background .15s, transform .15s; }
.intent-hero-chip.intent-bucket-prompt:hover { border-color:rgba(34,94,236,.45); color:var(--cobalt); background:rgba(34,94,236,.04); transform:none; }

/* ── Hero secondary CTA: marketplace browse. Sized up + centered so
   visitors who want to *use* an agent (not build) have a real CTA,
   not an afterthought link. Sits beneath the chip row. ── */
.intent-hero-browse-cta { font-size:15px; color:var(--mid-gray); margin-top:26px; text-align:center; }
.intent-hero-browse-cta a { font-weight:600; color:var(--cobalt); }
.intent-hero-browse-cta a:hover { text-decoration:underline; }

/* ── ICP strip (homepage solo block — 4-up full-width row of personas.
   Quieter than .icp-card on /build so it reads as a discovery
   hand-off, not the page's main chapter. Section padding stays tight
   so the strip hugs the hero visually instead of feeling like its
   own section.) ── */
/* Strip section sits inside `.hero-bg-area` directly under the hero
   content, so we keep top padding tight to avoid a dead-air gap above
   the heading. Bottom padding stays generous so the bg image's fade
   has room to dissolve before the trust strip below. */
.icp-strip-section { padding-top:24px; padding-bottom:64px; }
/* Heading promoted to a proper section header — black, bold, sized
   to read as authoritative, mirroring the confidence of /build's
   "Pick your starting point." treatment without copying it
   verbatim. Margin-bottom tightened so the heading visually owns
   the cards beneath it. */
.icp-strip-heading { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:32px; color:var(--near-black); letter-spacing:-.02em; text-align:center; margin:0 0 28px; }
/* Two active ICPs (Experts + Product Owners) — two wide cards span the
   full strip width so the section keeps filling the row. See 2026-05-27
   removal of Teams + Builders. */
.icp-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.icp-strip-card { display:flex; flex-direction:column; gap:12px; padding:32px; background:var(--white); border:1px solid var(--light-gray); border-radius:var(--radius); text-decoration:none; transition:border-color .2s, transform .2s, box-shadow .2s; }
.icp-strip-card:hover { border-color:rgba(34,94,236,.35); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.icp-strip-label { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:11px; color:var(--cobalt); letter-spacing:.08em; text-transform:uppercase; }
.icp-strip-headline { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:20px; color:var(--near-black); line-height:1.3; letter-spacing:-.01em; }
.icp-strip-description { font-size:15px; color:var(--mid-gray); line-height:1.6; }
.icp-strip-cta { font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:14px; color:var(--cobalt); margin-top:auto; padding-top:8px; }
@media (max-width:640px) { .icp-strip { grid-template-columns:1fr; } }

/* ── Shelf grid (/use/ — wider grid for 5-7 seed agents) ── */
.shelf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px) { .shelf-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .shelf-grid { grid-template-columns:1fr; } }
.shelf-card { display:flex; flex-direction:column; padding:20px; background:var(--white); border:1px solid var(--light-gray); border-radius:var(--radius-sm); transition:all .2s; text-decoration:none; }
.shelf-card:hover { border-color:var(--cobalt); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.shelf-card-cat { font-family:'Aspekta',system-ui,sans-serif; font-size:11px; color:var(--mid-gray); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px; }
.shelf-card-name { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:15px; color:var(--near-black); margin-bottom:4px; letter-spacing:-.01em; }
.shelf-card-headline { font-size:13.5px; color:var(--mid-gray); line-height:1.5; flex:1; }
.shelf-card-builder { margin-top:12px; font-size:12px; color:var(--mid-gray); }

/* ── Category cards (/use/ category strip) ── */
.category-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:768px) { .category-strip { grid-template-columns:1fr; } }
.category-card { display:flex; flex-direction:column; padding:18px 20px; background:var(--white); border:1px solid var(--light-gray); border-radius:var(--radius-sm); transition:all .2s; text-decoration:none; }
.category-card:hover { border-color:var(--cobalt); background:var(--cobalt-bg); }
.category-card-name { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:14.5px; color:var(--near-black); margin-bottom:4px; }
.category-card-desc { font-size:13px; color:var(--mid-gray); line-height:1.5; }
.category-card-cta { margin-top:10px; font-size:12.5px; color:var(--cobalt); font-weight:500; }
.category-card-cta::after { content:' ↗'; }

/* ── Footer v2 (6 cols: brand + 5) ── */
.footer-inner-v2 { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr; gap:32px; }
@media (max-width:900px) {
  .footer-inner-v2 { grid-template-columns:1fr 1fr 1fr; gap:28px; }
}
@media (max-width:560px) {
  .footer-inner-v2 { grid-template-columns:1fr; gap:24px; }
}

/* ── Proof / numbers band ── */
.proof-band { display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap; padding:32px 0; text-align:center; }
.proof-stat { display:flex; flex-direction:column; align-items:center; min-width:140px; }
.proof-stat-num { font-family:'Chivo Mono',monospace; font-weight:500; font-size:28px; color:var(--cobalt); line-height:1; letter-spacing:-.02em; }
.proof-stat-label { font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:11px; color:var(--mid-gray); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }
.proof-divider { width:1px; height:32px; background:var(--light-gray); }
.compliance-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.compliance-badge { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px; background:var(--off-white); border:1px solid var(--light-gray); font-family:'Aspekta',system-ui,sans-serif; font-weight:500; font-size:12.5px; color:var(--dark-gray); }

/* ── CONFIDENTIAL COMPUTE MARK — reusable across pages ── */
/* Inline variant — sits with other compliance badges */
.cc-badge { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px; background:var(--green-light); border:1px solid rgba(82,178,91,.25); font-family:'Aspekta',system-ui,sans-serif; font-weight:600; font-size:12.5px; color:var(--green); }
.cc-badge svg { width:14px; height:14px; flex-shrink:0; }

/* Block variant — standalone callout for /build/, /security/, ICP pages */
.cc-block { display:flex; align-items:flex-start; gap:16px; max-width:640px; margin:0 auto 28px; padding:20px 24px; background:var(--green-light); border:1px solid rgba(82,178,91,.25); border-radius:var(--radius); }
.cc-block-icon { flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--green); border-radius:10px; }
.cc-block-icon svg { width:20px; height:20px; }
.cc-block-icon svg path { fill:var(--white); }
.cc-block-body { flex:1; }
.cc-block-title { font-family:'Aspekta',system-ui,sans-serif; font-weight:700; font-size:15px; color:var(--green); margin-bottom:4px; letter-spacing:-.01em; }
.cc-block-desc { font-size:13.5px; color:var(--dark-gray); line-height:1.55; }
.cc-block-desc a { color:var(--green); font-weight:600; }
@media (max-width:520px) {
  .cc-block { flex-direction:column; align-items:center; text-align:center; gap:12px; }
}

/* ── SUB-PROCESSORS PAGE ── */
.subproc-section { margin:32px 0 48px; }
.subproc-category-heading { font-family:'Inter',sans-serif; font-weight:700; font-size:18px; color:var(--cobalt); letter-spacing:.04em; text-transform:uppercase; margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--light-gray); }
.subproc-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.subproc-card { background:var(--white); border:1px solid var(--light-gray); border-radius:var(--radius); padding:24px; transition:border-color .2s ease, box-shadow .2s ease; }
.subproc-card:hover { border-color:rgba(34,94,236,.2); box-shadow:var(--shadow-sm); }
.subproc-card-header { margin-bottom:12px; }
.subproc-card-name { font-family:'Inter',sans-serif; font-weight:600; font-size:18px; color:var(--near-black); margin:0 0 4px; letter-spacing:-.01em; }
.subproc-card-name a { color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s ease; }
.subproc-card-name a:hover { border-bottom-color:var(--cobalt); color:var(--cobalt); }
.subproc-card-name a::after { content:" ↗"; font-size:13px; color:var(--mid-gray); }
.subproc-card-entity { font-size:13px; color:var(--mid-gray); margin:0; line-height:1.5; }
.subproc-card-purpose { font-size:14.5px; color:var(--dark-gray); line-height:1.65; margin:0 0 16px; }
.subproc-card-meta { margin:0; display:flex; flex-direction:column; gap:10px; }
.subproc-meta-row { margin:0; display:flex; flex-direction:column; gap:6px; }
.subproc-meta-label { font-family:'Inter',sans-serif; font-size:11px; font-weight:600; color:var(--mid-gray); text-transform:uppercase; letter-spacing:.06em; margin:0; }
.subproc-meta-value { margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.subproc-chip { display:inline-block; padding:3px 10px; border-radius:20px; font-family:'Inter',sans-serif; font-size:12px; font-weight:500; background:rgba(34,94,236,.06); color:var(--cobalt); line-height:1.5; }
.subproc-chip-region { background:rgba(82,178,91,.1); color:var(--green); }
.subproc-chip-muted { background:var(--off-white); color:var(--dark-gray); }
@media (min-width:720px) {
  .subproc-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
}

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .lane-chooser { flex-direction:column; align-items:stretch; }
  .lane-btn { max-width:none; flex:0 1 auto; }
  .demo-cards, .pillar-strip { grid-template-columns:1fr; }
}

/* ────────────────────────────────────────────────────────────── */

/* ── RESPONSIVE (original) ── */
@media (max-width:768px) {
  .nav-links { display:none; }
  .nav-right .btn { display:none; }
  .nav-hamburger { display:flex; }
  .nav-inner { padding:0 20px; }
  .nav-open { height:auto; background:rgba(255,255,255,1); }
  .nav-open .nav-inner { height:68px; }
  .nav-open .nav-mobile { display:block; border-top:1px solid var(--light-gray); padding-top:8px; }
  .section, .section-sm { padding:48px 20px; }
  .page-hero { padding-top:148px; }
  .page-hero h1 { font-size:32px; }
  .section-heading { font-size:26px; }
  .section-heading-lg { font-size:30px; }
  .grid-2, .grid-3, .grid-4, .stats-row { grid-template-columns:1fr; }
  .stats-row { border:none; gap:1px; background:var(--light-gray); border-radius:var(--radius); }
  .stat-item { border-right:none; background:var(--white); }
  .gradient-band .stats-row { background:rgba(255,255,255,.1); border:none; gap:1px; }
  .gradient-band .stat-item { background:rgba(255,255,255,.07); }
  .hero-ctas { flex-direction:column; align-items:center; }
  .trust-logos { flex-wrap:wrap; }
  .footer-inner { grid-template-columns:1fr; gap:28px; }
  .section-flush { padding:0 20px 48px; }
  .dev-split { grid-template-columns:1fr; gap:32px; }
  .dev-cta { padding:56px 20px; }
  .gradient-band { padding:56px 20px; }
  .footer-cta { padding:56px 20px; }
  .footer-bottom { flex-direction:column; gap:6px; }
  .footer-cta-buttons { flex-direction:column; align-items:center; }
  .newsletter-inner { flex-direction:column; text-align:center; }
  .newsletter-form { flex-direction:column; }
  .newsletter-form input { width:100%; }
  .hero-img_wrap { margin-top:0; }
  .blog-article { padding:108px 20px 48px; }
  .blog-article h1 { font-size:28px; }
  .blog-grid { grid-template-columns:1fr; }
}