/* ===================================================================
   Aurora — Blueprint migration: sections below the hero.
   Loads AFTER style.css + blueprint.css. Flips the old dark / frosted /
   indigo sections to the light Blueprint system. Token-driven color,
   gradient, glow, font and radius already flipped in style.css :root;
   this file handles dark->light backgrounds, hardcoded white text,
   card discipline, and component details. See DESIGN.md.
   =================================================================== */

/* ---------- Reveal safety ----------
   main.js injects opacity:0 on these until an IntersectionObserver adds
   .animate-in. That gates content visibility (blank in headless renderers,
   prefetch, or no-JS). Force a visible default; keep the slide-up as a
   motion-only enhancement. !important beats the runtime-injected rule. */
.crisis-card,
.architecture-part,
.innovation-card,
.use-case-card { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .crisis-card,
  .architecture-part,
  .innovation-card,
  .use-case-card { transform: none !important; transition: none !important; }
}

/* ---------- Shared section + typography ---------- */
.crisis-section,
.solution-section,
.technology-section,
.security-section,
.use-cases-section,
.final-cta {
  background: var(--bp-bg);
}
.solution-section { background: var(--bp-surface-1); }

.section-title {
  font-family: var(--bp-font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;          /* tight headings */
  color: var(--bp-ink);
}
.section-subtitle {
  font-family: var(--bp-font-sans);
  line-height: 1.6;           /* relaxed body */
  color: var(--bp-text-muted);
}
/* gradient-text spans -> solid signal (no gradient text).
   No !important on purpose: lets `.section-title .gradient-text` (style.css)
   win by specificity so section-title highlights read monochrome. Blue accent
   then stays rare — hero headline + final CTA only — per DESIGN.md "keep blue
   rare; CTA/links/secure-path only". */
.gradient-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--bp-signal);
  color: var(--bp-signal);
}

/* Kill remaining decorative orbs (hero + cta) */
.gradient-orb,
.cta-background,
.hero-background { display: none !important; }

/* ---------- Blueprint card discipline (de-round, hairline, no glow) ---------- */
.crisis-card,
.architecture-part,
.tech-panel,
.innovation-card,
.promise-card,
.guarantee-card,
.bedrock-item,
.use-case-card,
.dataflow-step,
.guarantee-card,
.flow-step,
.zk-step {
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-lg);
  box-shadow: none;
}
.crisis-card h3,
.use-case-card h3,
.innovation-card h4,
.architecture-part h3 {
  font-family: var(--bp-font-sans);
  color: var(--bp-ink);
}

/* ---------- Crisis ---------- */
.crisis-icon {
  background: var(--bp-signal);
  border-radius: var(--bp-r);
  box-shadow: none;
}
.crisis-icon.danger { background: var(--bp-stop); }
.crisis-description { color: var(--bp-text); }
.crisis-list li { color: var(--bp-text); }
.crisis-list i { color: var(--bp-stop); }
.walled-garden,
.shadow-ai-flow,
.crisis-example {
  background: var(--bp-surface-2);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r);
  box-shadow: none;
}
/* breathing room inside the panel so the inner cards don't sit flush to its border */
.walled-garden,
.shadow-ai-flow { padding: 18px 22px; }
/* the single-line example strip wants a tighter, label-sized inset */
.crisis-example { padding: 10px 16px; }
/* the "blocked" separator pulses, matching the enterprise panel's danger arrow */
.wall-separator i { display: inline-block; animation: pulse-danger 1s ease-in-out infinite; }
.danger-badge { background: var(--bp-stop); }

/* Crisis grid — subgrid so icon / title / description / visual / list align across both columns.
   Desktop only; below 768px the grid stacks to one column (see style.css media query). */
@media (min-width: 769px) {
  .crisis-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, auto);
    column-gap: 3rem;
    row-gap: 1.5rem;
  }
  .crisis-grid > .crisis-card {
    display: grid;
    grid-template-rows: subgrid;
    align-content: start;
    row-gap: 1.5rem;
  }
  .crisis-grid > .crisis-card:nth-child(1) { grid-column: 1; grid-row: 1 / span 5; }
  .crisis-grid > .crisis-card:nth-child(2) { grid-column: 2; grid-row: 1 / span 5; }
  .crisis-grid .crisis-icon,
  .crisis-grid .crisis-card h3,
  .crisis-grid .crisis-description,
  .crisis-grid .crisis-visual,
  .crisis-grid .crisis-list { margin: 0; }
}

/* AI Data Scrubber card — request path rendered horizontally so it balances the wide card.
   Figure sits flat inside .innovation-visual (no nested panel). Stacks vertically on narrow screens. */
.innovation-visual .scrub-path {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.scrub-path .bp-flow { flex-direction: row; align-items: stretch; gap: 4px; }
.scrub-path .bp-node { flex: 1 1 0; min-width: 0; }
.scrub-path .bp-node--secure { flex-grow: 1.3; }
.scrub-path .bp-step { flex: 0 0 auto; min-height: 0; align-self: center; flex-direction: column; gap: 5px; padding: 0 2px; }
.scrub-path .bp-step__chev { transform: rotate(-45deg); }
.scrub-path .bp-step__label { white-space: normal; max-width: 84px; line-height: 1.25; }
.scrub-path .bp-boundary { flex-direction: column; align-self: stretch; margin: 0 2px; gap: 6px; }
.scrub-path .bp-boundary span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.scrub-path .bp-boundary::before,
.scrub-path .bp-boundary::after { border-top: 0; border-left: 1px dashed color-mix(in srgb, var(--bp-stop) 55%, transparent); width: 0; height: auto; flex: 1; }

@media (max-width: 600px) {
  .scrub-path .bp-flow { flex-direction: column; }
  .scrub-path .bp-step { align-self: stretch; }
  .scrub-path .bp-step__chev { transform: rotate(45deg); }
  .scrub-path .bp-boundary { flex-direction: row; align-self: auto; margin: 12px 0; }
  .scrub-path .bp-boundary span { writing-mode: horizontal-tb; transform: none; }
  .scrub-path .bp-boundary::before,
  .scrub-path .bp-boundary::after { border-left: 0; border-top: 1px dashed color-mix(in srgb, var(--bp-stop) 55%, transparent); width: auto; height: 0; }
}

/* Root cause = deliberate signal-blue callout (white text passes AA) */
.root-cause {
  background: var(--bp-signal);
  border-radius: var(--bp-r-lg);
  box-shadow: none;
}
.root-cause h4,
.root-cause p,
.root-cause strong,
.root-cause i { color: #fff; }

/* ---------- Solution ---------- */
.part-number {
  background: none !important;
  -webkit-text-fill-color: var(--bp-signal) !important;
  color: var(--bp-signal) !important;
  font-family: var(--bp-font-mono);
}
.part-icon {
  background: var(--bp-signal);
  border-radius: var(--bp-r);
  box-shadow: none;
}
.part-tagline { color: var(--bp-signal); }
/* muted so the filled part-icon + number lead the accent (accent hierarchy) */
.feature-item i { color: var(--bp-text-muted); }
.feature-item strong { color: var(--bp-ink); }
.feature-item span { color: var(--bp-text-muted); }
.paradigm-shift {
  background: var(--bp-surface-2);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r);
}
.paradigm.new { color: var(--bp-signal); }
.deployment-option {
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r);
}
.deployment-option.featured {
  background: var(--bp-signal-50);
  border-color: color-mix(in srgb, var(--bp-signal) 45%, var(--bp-border));
  box-shadow: var(--bp-shadow-panel); /* featured = elevated, consistently */
}
.featured-badge { background: var(--bp-signal); color: #fff; }

/* Architecture benefits: DARK -> light */
.architecture-benefits {
  background: var(--bp-surface-2);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-lg);
  box-shadow: none;
}
.architecture-benefits h4 { color: var(--bp-ink); }
.architecture-benefits p { color: var(--bp-text); }

/* ---------- Technology ---------- */
.tech-nav { background: var(--bp-surface-2); border: 1px solid var(--bp-border); border-radius: var(--bp-r-lg); padding: 8px; gap: 6px; }
.tech-tab { color: var(--bp-text-muted); }
.tech-tab.active { background: var(--bp-signal); color: #fff; box-shadow: none; }
.tech-tab.active i,
.tech-tab.active span { color: #fff; }
.tech-panel h3 { color: var(--bp-ink); }
.flow-step,
.builder-block,
.dataflow-step,
.context-flow .flow-step {
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r);
}
.step-icon { background: var(--bp-surface-2); border: 1px solid var(--bp-border); box-shadow: none; }
.step-icon i { color: var(--bp-signal); }
.builder-block .block-label { color: var(--bp-signal); }
/* static value chips standing in for the demo's decorative dropdowns */
.block-content .demo-value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r);
  font-family: var(--bp-font-mono);
  font-size: 0.82rem;
  color: var(--bp-ink);
}
.block-content .demo-value::after {
  content: "\25BE"; /* ▾ — implies the builder's dropdown affordance */
  color: var(--bp-text-subtle);
  font-size: 0.85em;
}
.llm-top { background: var(--bp-signal); color: #fff; border-radius: var(--bp-r); }
.llm-line { background: var(--bp-signal); }
.llm-model { background: var(--bp-surface-1); border: 1px solid var(--bp-border); border-radius: var(--bp-r); }
.llm-model i { color: var(--bp-signal); }
.step-number { background: var(--bp-signal); color: #fff; }
.dataflow-result {
  background: color-mix(in srgb, var(--bp-secure) 10%, var(--bp-surface-1));
  border: 1px solid color-mix(in srgb, var(--bp-secure) 40%, var(--bp-border));
  border-radius: var(--bp-r);
  color: var(--bp-text);
}
.dataflow-result i { color: var(--bp-secure); }

/* ---------- Security (the big dark zone -> light) ---------- */
.security-section { background: var(--bp-bg); color: var(--bp-text); }
.security-section .section-title,
.security-section h3,
.security-section h4 { color: var(--bp-ink); }
.security-section .section-subtitle,
.security-section .bedrock-description,
.innovation-subtitle { color: var(--bp-text-muted); }

.security-badge-large {
  background: var(--bp-signal-50);
  border: 1px solid color-mix(in srgb, var(--bp-signal) 35%, var(--bp-border));
  box-shadow: none;
}
.security-badge-large i { color: var(--bp-signal); }

/* wrappers transparent, inner items are the cards */
.security-bedrock,
.security-innovations,
.security-guarantees,
.total-control { background: none; border: none; box-shadow: none; }

.bedrock-item,
.innovation-card,
.promise-card,
.guarantee-card,
.control-content {
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-lg);
  box-shadow: none;
}
.innovation-card.featured {
  border-color: color-mix(in srgb, var(--bp-signal) 45%, var(--bp-border));
  box-shadow: var(--bp-shadow-panel);
}
.bedrock-item i,
.promise-card i,
.zk-step i,
.control-benefits i { color: var(--bp-signal); }
.bedrock-content strong,
.promise-card strong,
.control-text h3,
.security-guarantees h3,
.guarantee-card h4 { color: var(--bp-ink); }
.bedrock-content span,
.promise-card span,
.guarantee-card p,
.innovation-description,
.innovation-result,
.control-text p,
.control-benefits li { color: var(--bp-text); }

.innovation-number {
  background: none !important;
  -webkit-text-fill-color: var(--bp-signal) !important;
  color: var(--bp-signal) !important;
  font-family: var(--bp-font-mono);
}
.innovation-icon,
.guarantee-icon {
  background: var(--bp-signal);
  border-radius: var(--bp-r);
  box-shadow: none;
}
.innovation-result i { color: var(--bp-secure); }

/* innovation visuals (were dark overlays) */
.innovation-visual { background: var(--bp-surface-2); border: 1px solid var(--bp-border); border-radius: var(--bp-r); }
.data-original,
.data-anonymized,
.scrubber-process,
.context-fence-ui,
.zk-step,
.key-control {
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r);
}
.data-original span,
.data-anonymized span,
.scrubber-process span,
.zk-step strong,
.zk-step span { color: var(--bp-text); }
.data-original code,
.data-anonymized code {
  background: var(--bp-surface-2);
  border: 1px solid var(--bp-border);
  color: var(--bp-ink);
  font-family: var(--bp-font-mono);
}
.data-anonymized code { color: var(--bp-signal); }
.fence-header { background: var(--bp-surface-2); color: var(--bp-text); }
.fence-item { color: var(--bp-text); }
.toggle.on { background: var(--bp-signal); }
.key-control { background: var(--bp-signal-50); }
.key-control i,
.key-control span { color: var(--bp-signal); }

/* total control diagram */
.firewall-boundary { background: var(--bp-surface-2); border: 1px dashed color-mix(in srgb, var(--bp-signal) 45%, var(--bp-border)); border-radius: var(--bp-r-lg); }
.firewall-label i { color: var(--bp-signal); }
.platform-box { background: var(--bp-signal); color: #fff; border-radius: var(--bp-r); }
.inside-firewall .data-flow-internal { color: var(--bp-text-muted); }
.employee-devices i { color: var(--bp-text-muted); }

/* ===== Comparison table — "spec sheet, Aurora column featured" =====
   The job of this table is to make Aurora the obvious winner, so the two
   columns are deliberately asymmetric: the competitor is a neutral baseline
   (color only on its X icon); the Aurora column is the featured one — soft
   signal tint, a signal top-cap, a signal divider, and teal check chips. */
.comparison-table {
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-lg);
  overflow: hidden;
  box-shadow: var(--bp-shadow-panel);
}
.comparison-row {
  display: grid;
  grid-template-columns: 1.6fr 2fr 2fr;
  border-bottom: 1px solid var(--bp-border);
}
.comparison-row:last-child { border-bottom: none; }
.comparison-row.header-row { background: var(--bp-surface-1); }

.comparison-cell { padding: 1.15rem 1.5rem; }
.comparison-cell:not(:last-child) { border-right: 1px solid var(--bp-border); }
/* header cells stay centered + stacked */
.comparison-row.header-row .comparison-cell {
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1.6rem 1.5rem;
}

/* label column */
.comparison-cell.label-cell {
  background: var(--bp-surface-2);
  color: var(--bp-ink);
  font-weight: 600;
  font-size: 0.95rem;
  justify-content: center;
}

/* --- competitor column: neutral baseline (color lives on the X only) --- */
.danger-header { background: var(--bp-surface-2); }
.danger-header,
.danger-cell { border-right: none; }
.danger-cell {
  background: var(--bp-surface-1);
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
}
.danger-header i { color: var(--bp-stop); font-size: 1.4rem; }
.danger-header strong { color: var(--bp-ink); font-size: 1.0625rem; font-weight: 600; }
.danger-header span { color: var(--bp-text-muted); font-size: 0.78rem; }
.danger-cell i { color: var(--bp-stop); font-size: 1rem; flex: none; }
.danger-cell span { color: var(--bp-text-muted); }

/* --- Aurora column: the featured winner --- */
.success-header {
  background: var(--bp-signal-50);
  border-top: 3px solid var(--bp-signal);
}
.success-header,
.success-cell { border-left: 1px solid color-mix(in srgb, var(--bp-signal) 38%, var(--bp-border)); }
.success-cell {
  background: var(--bp-signal-50);
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
}
.success-header i { color: var(--bp-secure); font-size: 1.4rem; }
.success-header strong { color: var(--bp-ink); font-size: 1.0625rem; font-weight: 600; }
.success-header span { color: var(--bp-text-muted); font-size: 0.78rem; }
.success-cell i {
  color: var(--bp-secure);
  font-size: 0.72rem;
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bp-secure) 15%, #fff);
  border-radius: 999px;
}
.success-cell span { color: var(--bp-ink); font-weight: 500; }

/* row hover polish */
.comparison-row:not(.header-row):hover .label-cell {
  background: color-mix(in srgb, var(--bp-ink) 5%, var(--bp-surface-2));
}

/* ---------- Use cases ---------- */
.use-cases-section { background: var(--bp-bg); }
/* subgrid: every card row (icon, heading, problem, solution, badge) aligns across all
   three columns; the solution row (track 5) absorbs uneven content so badges line up */
.use-cases-grid { grid-template-rows: auto auto auto auto 1fr auto; }
.use-cases-grid > .use-case-card {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
}
.business-model { text-align: center; }
.use-case-icon { background: var(--bp-signal); border-radius: var(--bp-r); box-shadow: none; }
.use-case-tagline { color: var(--bp-signal); }
.use-case-card.featured {
  background: var(--bp-signal-50);
  border-color: color-mix(in srgb, var(--bp-signal) 45%, var(--bp-border));
  box-shadow: var(--bp-shadow-panel); /* featured = elevated, consistently */
}
.use-case-problem strong { color: var(--bp-ink); }
.use-case-problem p,
.use-case-solution li { color: var(--bp-text); }
.use-case-solution strong { color: var(--bp-ink); }
.use-case-solution i { color: var(--bp-secure); }
.model-badge { border-radius: var(--bp-r-sm); }
.model-badge.enterprise { background: var(--bp-signal); color: #fff; }
.business-model p { color: var(--bp-text-muted); }

/* Flywheel: DARK -> light */
.flywheel {
  background: var(--bp-surface-2);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-lg);
  box-shadow: none;
}
.flywheel h3 { color: var(--bp-ink); }
.flywheel > p { color: var(--bp-text-muted); }
.flywheel .flow-step {
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
}
.flywheel .flow-step h4 { color: var(--bp-ink); }
.flywheel .flow-step p { color: var(--bp-text-muted); }
.flow-number { background: var(--bp-signal); color: #fff; }
.flow-icon { background: var(--bp-signal-50); border-radius: var(--bp-r); }
.flow-icon i { color: var(--bp-signal); }
.flow-arrow i { color: var(--bp-text-subtle); }
.flow-return-label { color: var(--bp-text-muted); }

/* ---------- Final CTA: DARK -> light ---------- */
.final-cta { background: var(--bp-bg); border-top: 1px solid var(--bp-border); }
.cta-headline { color: var(--bp-ink); font-family: var(--bp-font-sans); }
.cta-subheadline { color: var(--bp-text); }
.waitlist-form {
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-lg);
  box-shadow: var(--bp-shadow-panel);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-align: left;
}
.waitlist-form input,
.waitlist-form select {
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r);
  color: var(--bp-ink);
  font-family: var(--bp-font-sans);
}
/* custom chevron — native arrow sits jammed at the far edge; this insets it
   to a deliberate 1.1rem and matches the demo-chip caret color */
.waitlist-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a929c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
}
.waitlist-form input::placeholder { color: var(--bp-text-subtle); }
.waitlist-form input:focus,
.waitlist-form select:focus {
  outline: none;
  border-color: var(--bp-signal);
  box-shadow: 0 0 0 3px var(--bp-signal-50);
}
.final-cta .btn-primary,
.waitlist-form .btn-primary {
  background: var(--bp-signal);
  border: 1px solid var(--bp-signal);
  color: #fff;
  border-radius: var(--bp-r);
  box-shadow: none;
}
.final-cta .btn-primary:hover,
.waitlist-form .btn-primary:hover { background: var(--bp-signal-700); border-color: var(--bp-signal-700); }
.form-privacy { color: var(--bp-text-muted); }
.form-privacy a { color: var(--bp-signal); }
.removal-link { color: var(--bp-text-muted); }
.removal-link:hover { color: var(--bp-ink); }

/* Removal modal */
.modal-content { background: var(--bp-surface-1); border: 1px solid var(--bp-border); border-radius: var(--bp-r-lg); }
.modal-header h3 { color: var(--bp-ink); }
.removal-description { color: var(--bp-text); }
.removal-form input {
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r);
  color: var(--bp-ink);
}
.btn-danger { background: var(--bp-stop); color: #fff; border-radius: var(--bp-r); border: none; }

/* ---------- Footer: DARK -> light ---------- */
.footer {
  background: var(--bp-surface-2);
  border-top: 1px solid var(--bp-border);
  color: var(--bp-text);
}
.footer .logo span { color: var(--bp-ink); }
.footer-brand p { color: var(--bp-text-muted); }
.footer-tagline i { color: var(--bp-signal); }
.footer-tagline em { color: var(--bp-text); }
.footer-column h4 { color: var(--bp-ink); }
.footer-column a { color: var(--bp-text-muted); }
.footer-column a:hover { color: var(--bp-signal); }
.footer-bottom { border-top: 1px solid var(--bp-border); color: var(--bp-text-muted); }
.footer-bottom p { color: var(--bp-text-muted); }

/* ===================================================================
   Product / Built-for-teams + Cross-Workspace Context (new sections)
   Reuses blueprint tokens; alternates bg (product) / surface-1 (context)
   to keep the section rhythm: solution(surface-1) -> product(bg) ->
   context(surface-1) -> technology(bg).
   =================================================================== */

/* keep new cards visible regardless of the reveal observer */
.layer-card,
.surface-chip,
.tool-chip,
.proof { opacity: 1 !important; }

/* ---------- Product ---------- */
.product-section { background: var(--bp-bg); padding: var(--spacing-xl) 0; }

.product-surfaces { text-align: center; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.surface-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.surface-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r);
  padding: 0.5rem 0.875rem;
  color: var(--bp-text);
  font-size: 0.9rem;
}
/* muted so the filled blue layer-icons below are the dominant accent (accent hierarchy) */
.surface-chip i { color: var(--bp-text-subtle); }

.product-layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
}
.layer-card {
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
/* feature the Team tier — the B2B wedge — matching the blueprint featured pattern */
.layer-card.featured {
  background: var(--bp-signal-50);
  border-color: color-mix(in srgb, var(--bp-signal) 45%, var(--bp-border));
}
.layer-tag {
  font-family: var(--bp-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-signal);
  margin-bottom: 0.75rem;
}
.layer-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bp-signal);
  border-radius: var(--bp-r);
  margin-bottom: 0.85rem;
}
.layer-icon i { color: #fff; font-size: 1.15rem; }
.layer-card h3 { font-family: var(--bp-font-sans); color: var(--bp-ink); margin: 0 0 0.5rem; }
.layer-card p { color: var(--bp-text); margin: 0; }

.product-note {
  display: flex; align-items: center; gap: 0.7rem; justify-content: center;
  text-align: center;
  max-width: 640px;
  margin: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) auto 0;
  padding: 1rem 1.25rem;
  background: var(--bp-signal-50);
  border: 1px solid color-mix(in srgb, var(--bp-signal) 30%, var(--bp-border));
  border-radius: var(--bp-r);
  color: var(--bp-text);
}
.product-note i { color: var(--bp-signal); flex: none; }
.product-note strong { color: var(--bp-ink); }

/* ---------- Cross-Workspace Context ---------- */
.context-section { background: var(--bp-surface-1); padding: var(--spacing-xl) 0; }

.tool-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.tool-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--bp-surface-2);
  border: 1px solid var(--bp-border);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  color: var(--bp-ink);
  font-size: 0.9rem;
  font-weight: 500;
}
.tool-chip i { color: var(--bp-signal); }
.tool-chip.more { color: var(--bp-text-muted); font-family: var(--bp-font-mono); font-size: 0.8rem; }

.proof {
  max-width: 760px; margin: 0 auto;
  background: var(--bp-surface-1);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-lg);
  overflow: hidden;
  box-shadow: var(--bp-shadow-panel); /* elevate the focal artifact (depth) */
}
.proof-question { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-bottom: 1px solid var(--bp-border); }
.proof-who {
  display: block; font-family: var(--bp-font-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bp-text-muted);
  margin-bottom: 0.5rem;
}
.proof-ask { font-family: var(--bp-font-sans); font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem); font-weight: 600; line-height: 1.2; color: var(--bp-ink); margin: 0; }
.proof-pull { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.proof-label { display: block; color: var(--bp-text-muted); font-size: 0.85rem; margin-bottom: 0.85rem; }
.proof-pull ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.proof-pull li { display: flex; align-items: center; gap: 0.6rem; color: var(--bp-text); }
.proof-pull li i { color: var(--bp-signal); font-size: 0.85rem; flex: none; }
.proof-answer {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: color-mix(in srgb, var(--bp-secure) 10%, var(--bp-surface-1));
  border-top: 1px solid color-mix(in srgb, var(--bp-secure) 40%, var(--bp-border));
  color: var(--bp-ink);          /* payoff line reads as the climax (hierarchy) */
  font-weight: 500;
}
.proof-answer i { color: var(--bp-secure); margin-top: 0.2rem; flex: none; }

@media (max-width: 768px) {
  .product-layers { grid-template-columns: 1fr; }
}

/* ===================================================================
   Interaction states — migrate the stale dark-theme hovers.
   style.css still fires translateY(-5px) + heavy --shadow-xl + indigo
   --primary border on hover; loading AFTER it (same specificity), these
   override to one consistent, subtle blueprint lift across every card.
   =================================================================== */
.crisis-card,
.architecture-part,
.innovation-card,
.use-case-card,
.guarantee-card,
.bedrock-item,
.layer-card {
  transition: border-color .18s var(--bp-ease),
              box-shadow .18s var(--bp-ease),
              transform .18s var(--bp-ease);
}
.crisis-card:hover,
.architecture-part:hover,
.innovation-card:hover,
.use-case-card:hover,
.guarantee-card:hover,
.bedrock-item:hover,
.layer-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bp-shadow-panel);
  border-color: color-mix(in srgb, var(--bp-signal) 32%, var(--bp-border));
}

/* ---------- Reduced motion: pulse/float/shake + hover lift off ---------- */
@media (prefers-reduced-motion: reduce) {
  .gradient-orb,
  .connection-arrow,
  .arrow-danger,
  .danger-badge,
  .wall-separator i,
  .aurora-icon { animation: none !important; }
  .crisis-card:hover,
  .architecture-part:hover,
  .innovation-card:hover,
  .use-case-card:hover,
  .guarantee-card:hover,
  .bedrock-item:hover,
  .layer-card:hover { transform: none; }
}

/* ===================================================================
   Polish pass: a11y utility + responsive corrections.
   =================================================================== */

/* Screen-reader-only labels — visible affordance stays the placeholder,
   but inputs get a programmatic label for assistive tech. */
.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;
}

/* Comparison table — keep the Aurora (winner) column visible at every
   width. The legacy fallback (style.css) forced a min-width + horizontal
   scroll that pushed the entire Aurora column off-screen on phones, hiding
   the table's whole point. Drop the forced scroll, then stack to a
   label-over-two-columns layout on narrow screens. */
@media (max-width: 1024px) {
  .security-comparison { overflow-x: visible; }
  .comparison-table { min-width: 0; }
}
@media (max-width: 640px) {
  .comparison-row { grid-template-columns: 1fr 1fr; }
  /* drop the empty header cell; the two headers become the column legend */
  .comparison-row.header-row .comparison-cell:first-child { display: none; }
  /* label heads its own full-width band, options sit under their headers */
  .comparison-row:not(.header-row) .label-cell {
    grid-column: 1 / -1;
    text-align: left;
    border-right: none;
    border-bottom: 1px solid var(--bp-border);
  }
  .comparison-row.header-row .comparison-cell { padding: 1rem 0.85rem; }
  .comparison-cell { padding: 0.85rem; }
  .comparison-row.header-row .danger-header strong,
  .comparison-row.header-row .success-header strong { font-size: 0.95rem; }
  .danger-cell,
  .success-cell { align-items: flex-start; gap: 0.5rem; }
  .danger-cell i,
  .success-cell i { margin-top: 0.1rem; }
  .danger-cell span,
  .success-cell span { font-size: 0.82rem; line-height: 1.35; }
}

/* ============================================================
   Audit fix: unified icon primitive (blueprint-faithful)
   Was: filled signal-blue squares (crisis/solution/product/
   security/use-cases) — signal-blue as decoration. DESIGN.md
   role rule: blue = CTA/links/secure-path only; iconography is
   "thin-line and monochrome ink/muted — never filled glyphs".
   One neutral chip + monochrome ink glyph, applied everywhere,
   collapses ~8 divergent icon treatments into a single look.
   Loaded last → wins over the per-class fills above by source order.
   ============================================================ */
.crisis-icon,
.part-icon,
.innovation-icon,
.guarantee-icon,
.use-case-icon,
.layer-icon,
.flow-icon,
.step-icon {
  background: var(--bp-surface-2);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r);
  box-shadow: none;
}
.crisis-icon i,
.part-icon i,
.innovation-icon i,
.guarantee-icon i,
.use-case-icon i,
.layer-icon i,
.flow-icon i,
.step-icon i {
  color: var(--bp-ink);
}
/* Crisis "danger" keeps the stop-red glyph: semantic (the Shadow-AI
   threat), not decoration — consistent with the red ✗ list in-section. */
.crisis-icon.danger { background: var(--bp-surface-2); }
.crisis-icon.danger i { color: var(--bp-stop); }