/* ============================================================
   BLOCKCORE.IO — Landing page shared design tokens & components
   Warm bone ground · navy ink · royal blue + bronze accents
   Newsreader (serif) · Space Grotesk (sans) · JetBrains Mono
   ============================================================ */

:root {
  --bg:         #F4F1EA;
  --bg-sub:     #EAE5DA;
  --bg-card:    #FFFFFF;
  --bg-card-2:  #FBFAF6;
  --ink:        #16203A;
  --ink-soft:   #4A5470;
  --ink-mute:   #8087A0;
  --line:       rgba(22,32,58,0.12);
  --line-soft:  rgba(22,32,58,0.07);

  --royal:      #2C44B8;
  --royal-soft: #4D63D6;
  --royal-tint: rgba(44,68,184,0.09);

  --bronze:     #8A6A38;
  --bronze-soft:#B08D57;
  --bronze-tint:rgba(138,106,56,0.12);

  --navy-deep:  #0F1A33;
  --navy-2:     #16224A;
  --navy-line:  rgba(238,241,247,0.14);
  --navy-dim:   rgba(238,241,247,0.66);
  --navy-dimmer:rgba(238,241,247,0.42);

  --green:      #2F855A;
  --amber:      #9A6B16;

  --shadow-card: 0 1px 2px rgba(15,26,51,0.04), 0 10px 30px rgba(15,26,51,0.06);
  --shadow-lift: 0 18px 48px rgba(15,26,51,0.14);

  --serif: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1400px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--bronze-tint); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--bronze);
  flex-shrink: 0;
}
.on-dark .eyebrow { color: var(--bronze-soft); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.mono { font-family: var(--mono); }

.display-1 { font-size: clamp(40px, 6vw, 74px); line-height: 1.04; font-weight: 600; text-wrap: pretty; }
.display-2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; font-weight: 600; text-wrap: pretty; }
.display-3 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; font-weight: 600; text-wrap: pretty; }
.lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; font-weight: 400; }
.on-dark .lede { color: var(--navy-dim); }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3 { color: #EEF1F7; }

p { margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--royal); color: #fff; box-shadow: 0 6px 18px rgba(44,68,184,0.28); }
.btn-primary:hover { background: var(--royal-soft); box-shadow: 0 8px 24px rgba(44,68,184,0.36); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink-mute); }
.btn-bronze { background: var(--bronze); color: #fff; }
.btn-bronze:hover { background: var(--bronze-soft); }
.on-dark .btn-outline { color: #EEF1F7; border-color: var(--navy-line); }
.on-dark .btn-outline:hover { border-color: var(--navy-dim); }
.btn-sm { padding: 9px 18px; font-size: 13px; border-radius: 999px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244,241,234,0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.nav-row { display: flex; align-items: center; gap: 20px; padding: 14px 0; flex-wrap: nowrap; }
.nav-links { display: flex; align-items: center; gap: 22px; margin-left: 12px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.lang-toggle {
  display: flex; align-items: center; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px; font-family: var(--mono); font-size: 11px;
}
.lang-toggle button {
  border: none; background: transparent; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  color: var(--ink-mute); font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
}
.lang-toggle button.active { background: var(--ink); color: #fff; }
.nav-burger { display: none; }
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-login { display: none; }
  .nav-row { gap: 12px; }
}
@media (max-width: 420px) { .nav-right .lang-toggle { display: none; } }

/* ---------- Logo mark: 3x3 grid, center cell accented ---------- */
.logo-mark { display: inline-grid; grid-template-columns: repeat(3, 1fr); flex-shrink: 0; }
.logo-mark span { display: block; background: var(--ink); }
.logo-mark span:nth-child(5) { background: var(--bronze); }
.on-dark .logo-mark span { background: var(--navy-dim); }
.on-dark .logo-mark span:nth-child(5) { background: var(--bronze-soft); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-word { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; }
.brand-word .dim { opacity: .62; font-weight: 400; }
.brand-divider { width: 1px; height: 30px; background: var(--line); flex-shrink: 0; opacity: .8; }
.brand-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.brand-tagline { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .brand-divider, .brand-tagline { display: none; } }

/* ---------- Sections ---------- */
section { position: relative; }
.section-pad { padding: 96px 0; }
@media (max-width: 720px) { .section-pad { padding: 64px 0; } }
.section-dark { background: var(--navy-deep); color: #EEF1F7; }
.section-head { max-width: 640px; margin-bottom: 56px; display: grid; gap: 16px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow-card);
}

/* ---------- Pillars ---------- */
.pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; background: transparent; border: none; border-radius: 0; overflow: visible; }
.pillar-cell { background: var(--bg-card); border-radius: 22px; box-shadow: var(--shadow-card); padding: 30px 26px; display: grid; gap: 14px; align-content: start; min-height: 220px; }
.pillar-num { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: .08em; }
.pillar-cell h4 { font-size: 18px; }
.pillar-cell p { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.pillar-icon { width: 30px; height: 30px; display: grid; place-items: center; }
@media (max-width: 1000px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillars-grid { grid-template-columns: 1fr; } }

/* ---------- Loop diagram ---------- */
.loop-row { display: flex; align-items: center; gap: 0; flex-wrap: wrap; justify-content: center; }
.loop-step { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; }
.loop-dot { width: 11px; height: 11px; border-radius: 99px; background: var(--bronze); }
.loop-label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.on-dark .loop-label { color: var(--navy-dim); }
.loop-arrow { color: var(--line); font-size: 15px; padding: 0 2px; align-self: flex-start; margin-top: 2px; }
.on-dark .loop-arrow { color: var(--navy-line); }

/* ---------- Role chips (BIA) ---------- */
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .role-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .role-grid { grid-template-columns: 1fr; } }
.role-chip {
  border: 1px solid var(--navy-line); border-radius: 12px; padding: 16px 18px;
  display: grid; gap: 6px; background: rgba(255,255,255,0.03);
}
.role-chip .name { font-family: var(--serif); font-weight: 600; font-size: 15.5px; }
.role-chip .fn { font-size: 12.5px; color: var(--navy-dim); line-height: 1.45; }

/* ---------- Trust list ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; background: transparent; border: none; border-radius: 0; overflow: visible; }
@media (max-width: 720px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-item { background: var(--navy-2); border-radius: 20px; padding: 22px 24px; display: flex; gap: 14px; align-items: flex-start; }
.trust-mark { width: 8px; height: 8px; border-radius: 99px; background: var(--bronze-soft); margin-top: 7px; flex-shrink: 0; }
.trust-item h5 { font-family: var(--sans); font-weight: 600; font-size: 14.5px; margin: 0 0 4px; color: #EEF1F7; }
.trust-item p { font-size: 13px; line-height: 1.55; color: var(--navy-dim); }

/* ---------- Autonomy scale ---------- */
.autonomy-scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 800px) { .autonomy-scale { grid-template-columns: repeat(3, 1fr); } }
.autonomy-step { border-radius: 10px; padding: 14px 12px; border: 1px solid var(--navy-line); display: grid; gap: 6px; }
.autonomy-step.live { background: rgba(176,141,87,0.14); border-color: rgba(176,141,87,0.4); }
.autonomy-step .lvl { font-family: var(--mono); font-size: 10.5px; color: var(--navy-dim); }
.autonomy-step .nm { font-size: 12.5px; font-weight: 600; color: #EEF1F7; }
.autonomy-step .st { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--bronze-soft); }
.autonomy-step.locked .st { color: var(--navy-dimmer); }

/* ---------- Browser / device frame (lightweight, own) ---------- */
.frame-browser {
  border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
.frame-browser .chrome {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #ECEAE3; border-bottom: 1px solid var(--line);
}
.frame-browser .dot { width: 9px; height: 9px; border-radius: 99px; background: #D8D5CC; }

/* ---------- Waitlist form ---------- */
.waitlist-form { display: flex; gap: 10px; flex-wrap: wrap; }
.waitlist-form input {
  flex: 1; min-width: 220px; padding: 14px 16px; border-radius: 9px; border: 1px solid var(--line);
  font-family: var(--sans); font-size: 15px; background: var(--bg-card); color: var(--ink);
}
.on-dark .waitlist-form input { background: rgba(255,255,255,0.06); border-color: var(--navy-line); color: #EEF1F7; }
.on-dark .waitlist-form input::placeholder { color: var(--navy-dimmer); }
.waitlist-form input:focus { outline: 2px solid var(--royal); outline-offset: 1px; }
.form-note { font-size: 12.5px; color: var(--ink-mute); margin-top: 10px; }
.on-dark .form-note { color: var(--navy-dimmer); }
.form-confirm { display: none; align-items: center; gap: 8px; font-size: 14px; color: var(--green); font-weight: 600; }
.form-confirm.show { display: flex; }
.on-dark .form-confirm { color: #7BD3A6; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-deep); color: #EEF1F7; padding: 64px 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--navy-line); }
@media (max-width: 800px) { .footer-top { grid-template-columns: 1fr 1fr; } }
.footer-col h6 { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-dim); margin: 0 0 14px; }
.footer-col a, .footer-col span.soon { display: block; font-size: 14px; color: var(--navy-dim); margin-bottom: 10px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; flex-wrap: wrap; gap: 12px; }
.footer-bottom .mono { font-size: 12px; color: var(--navy-dimmer); }

/* ---------- Light sections (blueprint alternation) ---------- */
.section-light { background: #F8FAFC; color: #0B1220; }
.section-light .eyebrow { color: #2C44B8; }
.section-light .eyebrow::before { background: #2C44B8; }
.section-light h1, .section-light h2, .section-light h3, .section-light h4, .section-light h5 { color: #0B1220; }
.section-light .lede { color: #475569; }
.section-light .tag { border-color: rgba(11,18,32,0.14); color: #475569; }
.card-lt {
  background: #fff; border: none; border-radius: 22px;
  box-shadow: 0 2px 8px rgba(11,18,32,.05), 0 20px 40px rgba(11,18,32,.07);
  padding: 26px; display: grid; gap: 10px; align-content: start;
}
.card-lt h5 { font-family: var(--sans); font-weight: 600; font-size: 15.5px; margin: 0; color: #0B1220; }
.card-lt p { font-size: 13.5px; line-height: 1.55; color: #475569; margin: 0; }
.card-lt .mk { font-family: var(--mono); font-size: 11px; color: #2F80ED; letter-spacing: .04em; }

.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pain-grid { grid-template-columns: 1fr; } }
.pain-card { background: #fff; border: none; border-radius: 20px; padding: 20px 22px; font-size: 14px; line-height: 1.55; color: #334155; box-shadow: 0 2px 8px rgba(11,18,32,.04), 0 16px 32px rgba(11,18,32,.06); }

.workspace-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1000px) { .workspace-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .workspace-grid { grid-template-columns: 1fr; } }

.fin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .fin-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fin-grid { grid-template-columns: 1fr; } }

.cmd-bar-demo {
  display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--navy-line); border-radius: 10px; padding: 13px 16px; margin-bottom: 18px;
}
.on-dark .cmd-bar-demo { color: var(--navy-dim); }
.cmd-bar-demo .ico { font-family: var(--mono); font-size: 13px; color: var(--bronze-soft); }
.cmd-bar-demo span.txt { font-family: var(--mono); font-size: 13.5px; }
.cmd-examples { display: grid; gap: 8px; margin-top: 14px; }
.cmd-example { font-family: var(--mono); font-size: 12.5px; color: var(--navy-dim); padding: 9px 12px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--navy-line); }

@media (max-width: 900px) { .product-grid { grid-template-columns: 1fr !important; } }

/* ---------- Comparison table -> stacked cards on mobile ---------- */
.comparison-table { display: grid; border: none; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(11,18,32,.05), 0 20px 40px rgba(11,18,32,.07); }
.comparison-row { display: grid; grid-template-columns: 1fr 1fr; }
.comparison-row.head .comparison-cell { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: 14px 20px; }
.comparison-row.head .comparison-cell.old { background: #F1F5F9; color: #64748B; }
.comparison-row.head .comparison-cell.new { background: rgba(47,128,237,0.08); color: #2F80ED; }
.comparison-row:not(.head) .comparison-cell { padding: 16px 20px; font-size: 14px; line-height: 1.5; border-top: 1px solid rgba(11,18,32,0.07); }
.comparison-row:not(.head) .comparison-cell.old { color: #64748B; }
.comparison-row:not(.head) .comparison-cell.new { color: #0B1220; font-weight: 500; background: rgba(47,128,237,0.03); }
@media (max-width: 700px) {
  .comparison-table { display: grid; gap: 12px; border-radius: 0; background: transparent; box-shadow: none; }
  .comparison-row { grid-template-columns: 1fr; background: #fff; border-radius: 18px; box-shadow: 0 2px 8px rgba(11,18,32,.05), 0 16px 32px rgba(11,18,32,.06); overflow: hidden; }
  .comparison-row.head { display: none; }
  .comparison-row:not(.head) .comparison-cell { border-top: none; padding: 14px 18px; }
  .comparison-row:not(.head) .comparison-cell.old::before { content: attr(data-label-old) ": "; font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: #94A3B8; display: block; margin-bottom: 4px; }
  .comparison-row:not(.head) .comparison-cell.new::before { content: attr(data-label-new) ": "; font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: #2F80ED; display: block; margin-bottom: 4px; }
  .comparison-row:not(.head) { border-bottom: none; padding: 0; }
}

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
.faq-item { background: #fff; border: none; border-radius: 18px; padding: 4px 20px; box-shadow: 0 2px 6px rgba(11,18,32,.04), 0 10px 24px rgba(11,18,32,.05); }
.faq-item summary { cursor: pointer; padding: 16px 0; font-family: var(--sans); font-weight: 600; font-size: 15px; color: #0B1220; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 20px; font-weight: 400; color: #2F80ED; flex-shrink: 0; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { font-size: 14px; line-height: 1.6; color: #475569; padding: 0 0 18px; margin: 0; }

/* ---------- Full CTA form ---------- */
.cta-form-full { display: grid; gap: 12px; max-width: 640px; margin: 0 auto; }
.cta-form-full .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .cta-form-full .row2 { grid-template-columns: 1fr; } }
.cta-form-full input, .cta-form-full select, .cta-form-full textarea {
  width: 100%; padding: 14px 16px; border-radius: 9px; border: 1px solid var(--navy-line);
  font-family: var(--sans); font-size: 16px; background: rgba(255,255,255,0.06); color: #EEF1F7;
}
.cta-form-full select { appearance: none; -webkit-appearance: none; }
.cta-form-full textarea { resize: vertical; min-height: 70px; font-family: var(--sans); }
.cta-form-full input::placeholder, .cta-form-full textarea::placeholder { color: var(--navy-dimmer); }
.cta-form-full input:focus, .cta-form-full select:focus, .cta-form-full textarea:focus { outline: 2px solid var(--royal-soft); outline-offset: 1px; }
.cta-form-full label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-dim); margin-bottom: 4px; display: block; }
@media (max-width: 560px) {
  .cmd-form { padding: 22px 18px; border-radius: 20px; }
  .cta-form-full .btn { width: 100%; }
}

/* ---------- Reveal on scroll (progressive enhancement only —
   content is visible by default; JS adds a brief fade-up the
   first time it scrolls into view, but never hides it outright) ---------- */
[data-reveal] { opacity: 1; transform: none; }
[data-reveal].pre-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].pre-reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Utility ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; gap: 32px; } }
.tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px;
}
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 200; background: var(--bg);
  padding: 20px 24px; flex-direction: column; gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 18px; padding: 14px 4px; border-bottom: 1px solid var(--line-soft); font-weight: 500; }
.mobile-menu-close { align-self: flex-end; background: none; border: none; font-size: 26px; cursor: pointer; padding: 8px; }
.mobile-menu-lang { align-self: flex-start; margin: 4px 0 10px; }
.mobile-menu-lang button { font-size: 14px; padding: 8px 16px; }

/* ---------- Status pills (BIA roadmap labels) ---------- */
.status-pill { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.status-pill.available { background: rgba(52,211,153,0.14); color: #34D399; }
.status-pill.beta { background: rgba(91,124,255,0.14); color: var(--electric); }
.status-pill.roadmap { background: rgba(168,175,194,0.12); color: var(--ink-mute); }
.status-pill.controlled { background: rgba(240,185,61,0.14); color: var(--gold); }

/* ---------- Illustrative data disclaimer ---------- */
.illustrative-note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 6px; }
.illustrative-note::before { content: '◆'; font-size: 8px; }

/* ---------- Use-case cards (pain / benefit) ---------- */
.usecase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 760px) { .usecase-grid { grid-template-columns: 1fr; } }
.usecase-card .uc-pain { font-size: 12.5px; color: #94A3B8; margin-bottom: 8px; }
.usecase-card .uc-pain b { color: #64748B; font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .06em; font-family: var(--mono); display: block; margin-bottom: 3px; }
.usecase-card .uc-benefit b { color: #2F80ED; font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .06em; font-family: var(--mono); display: block; margin-bottom: 3px; }

/* ---------- Intent chips + action chips ---------- */
.intent-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.intent-chip { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); }
.action-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.action-chip { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--gold); padding: 6px 13px; border-radius: 999px; background: rgba(240,185,61,0.1); border: 1px solid rgba(240,185,61,0.25); }

/* ---------- AI governance cards ---------- */
.gov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .gov-grid { grid-template-columns: 1fr; } }
.gov-card { padding: 22px 22px; border-radius: 16px; }
.gov-card.can { background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.2); }
.gov-card.helps { background: rgba(91,124,255,0.06); border: 1px solid rgba(91,124,255,0.2); }
.gov-card.cannot { background: rgba(240,101,77,0.06); border: 1px solid rgba(240,101,77,0.22); }
.gov-card p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.gov-card .gc-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; display: block; }
.gov-card.can .gc-label { color: #34D399; }
.gov-card.helps .gc-label { color: var(--electric-soft); }
.gov-card.cannot .gc-label { color: #F0654D; }