/* Syntonyl — an editorial, monochrome identity. Loaded after page styles.
   Layout, content, and interaction state remain owned by the existing pages. */
:root {
  --bg: #fff;
  --bg-elev: #f6f6f6;
  --panel: #fff;
  --text: #111;
  --muted: #555;
  --primary: #111;
  --accent: #111;
  --success: #333;
  --border: #d9d9d9;
  --shadow: none;
  --shadow-soft: none;
  --shadow-deep: 0 16px 36px rgba(0,0,0,.08);
  --radius: 3px;
}
body { background: #fff; color: var(--text); }
::selection { background: #111; color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
.section { padding-block: 108px; }
.section-title, .int-headline, .page-hero h1 { font-weight: 600; letter-spacing: -.05em; }
.section-title.fx-sheen::after { display: none; }
.section-subtitle, .lede { color: var(--muted); }
.eyebrow, .page-kicker, .section-label { color: #444; font-weight: 600; letter-spacing: .16em; }
.eyebrow::before { background: #111; }
.ops-eyebrow, .team-eyebrow { display: flex; justify-content: center; }
.accent { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: #111; }

/* Exact supplied wordmark, with room to breathe. */
.site-header { background: #fff; border-bottom: 1px solid var(--border); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav { height: 88px; }
.brand-name { display: inline-flex; padding: 0; }
.brand-name::after { display: none; }
.brand-lockup { display: block; width: 206px; height: auto; flex: none; }
.menu { gap: 7px; }
.menu a:not(.btn) { color: #222; font-size: .83rem; font-weight: 600; border-radius: 0; opacity: 1; }
.menu a:not(.btn):hover { background: #f2f2f2; color: #000; }
.menu a.btn { color: #fff; }
.nav-toggle { border-color: #111; border-radius: 2px; color: #111; background: #fff; }
.btn { border: 1px solid #111; border-radius: 2px; background: #111; color: #fff; padding: 14px 22px; font-weight: 600; box-shadow: none; transition: background .18s ease, color .18s ease, transform .18s ease; }
.btn::after { display: none; }
.btn:hover { background: #333; color: #fff; box-shadow: none; filter: none; transform: translateY(-1px); }
.btn-ghost { background: #fff; color: #111; border-color: #b8b8b8; box-shadow: none; }
.btn-ghost:hover { background: #f2f2f2; color: #111; border-color: #111; }
.btn-small { padding: 10px 15px; font-size: .8rem; }
.hero { min-height: min(820px, calc(100svh - 88px)); padding: 112px 0 86px; background: #fff; }
.hero h1 { max-width: 1050px; font-size: clamp(3rem, 2rem + 4.5vw, 5.8rem); line-height: 1.02; font-weight: 600; letter-spacing: -.065em; }
.hero .lede { max-width: 730px; font-size: clamp(1rem, .9rem + .35vw, 1.15rem); }
.hero-badge, .int-badge, .badge { border-radius: 2px; background: #fff; border-color: var(--border); color: #444; box-shadow: none; backdrop-filter: none; }
.hero-badge { padding: 8px 12px; font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.hero-bg .orb, .hero-bg .grid { display: none; }
.hero-bg::after { content: ""; position: absolute; right: -70px; bottom: -65px; width: 320px; height: 410px; background: url("assets/syntonyl-mark.svg") center / contain no-repeat; opacity: .025; }
.capability-strip { border-radius: 0; background: #fff; box-shadow: none; backdrop-filter: none; margin-top: 46px; }
.capability-strip a { padding: 20px; font-weight: 600; }
.capability-strip a:hover { background: #f6f6f6; }
.capability-strip span { color: #666; font-weight: 600; }

/* Fine rules, restrained surfaces, and no decorative glow. */
.card, .int-card, .rev-card, .metrics-card, .faq-wrap, .faq-item,
.mvp-card, .preview-card, .device-mock, .neon-panel, .host-card,
.workflows .wf-card, .note-card, .contact, .feature-card, .value-card,
.founder-model, .guide-card, .solution-path, .gate-card, .package-card,
.pricing-highlight, .pricing-highlights > div, .rate-table, .int-card.sol-card,
.int-card.prod-card, .int-card.proc-card { border-radius: 3px; border-color: var(--border); background: #fff; box-shadow: none; backdrop-filter: none; }
.card:hover, .int-card:hover, .rev-card:hover, .host-card:hover,
.note-card:hover, .guide-card:hover { transform: translateY(-2px); border-color: #999; box-shadow: none; }
.note-card::before, .sol-card::after, .prod-card::after, .guide-card::after,
.solution-path::after, .faq-item::before, .neon-panel::before,
.neon-panel::after, .engineering-reactor::after, .site-builder-canvas::before,
.journey-shell::before, .team-builder::before, .ops-console::before,
.signal-shell::after, .page-hero::after { display: none; }
.int-icon, .rev-icon, .host-icon, .note-icon, .faq-icon { filter: grayscale(1); background: #f6f6f6; border-color: var(--border); border-radius: 2px; box-shadow: none; }
.chip, .template-tags span, .signal-result-context span { border-radius: 2px; color: #444; background: #f5f5f5; border-color: var(--border); }
.checklist li::before { color: #111; background: #111; box-shadow: none; }
.checklist li { color: #444; }
.cta-band { background: #f6f6f6; border-radius: 3px; box-shadow: none; }
.engineering-lab, .growth-journey { background: #f7f7f7; border-block: 1px solid #e5e5e5; }

/* The showroom keeps its free-moving, cursor-led rail. */
.template-showroom { background: #f7f7f7; border-color: var(--border); }
.template-rail-wrap::before, .template-rail-wrap::after { display: none; }
.template-card { --template-accent: #333; border-radius: 3px; border-color: #d1d1d1; box-shadow: none; opacity: .7; }
.template-card[data-style] { --template-accent: #333; }
.template-card.is-active, .template-card:hover, .template-card:focus-visible,
.template-card:focus-within { border-color: #111; box-shadow: 0 14px 30px rgba(0,0,0,.09); }
.template-card:focus-visible, .signal-choice:focus-visible { outline: 2px solid #111; }
.template-canvas { background: #eee; }
.template-meta, .template-meta small, .template-link { color: #444; }
.template-link:hover { color: #111; text-decoration: underline; text-underline-offset: 4px; }
.template-info h3 { font-weight: 600; }
.mock-image, .mock-image::before, .mock-wellness-row span { border-radius: 2px; }
.mock-image i { display: none; }
.mock-product-grid > span:nth-child(1) { background: #aaa; }
.mock-product-grid > span:nth-child(2) { background: #777; }
.mock-product-grid > span:nth-child(3) { background: #ccc; }
.mock-image { background: #bbb; box-shadow: none; }
.mock-image::before { background: #ddd; }
.mock-local-hero, .mock-editorial-image, .mock-property-hero { background: #333; }
.mock-rating { color: #444; }
.showroom-progress span { background: #111; }

/* Interior pages are open editorial layouts, not dark hero cards. */
main > .section:first-child:not(.hero) { padding-top: 66px; }
.page-hero { padding: 34px 0 64px; border: 0; border-bottom: 1px solid #111; border-radius: 0; background: #fff; color: #111; box-shadow: none; }
.page-hero h1 { font-size: clamp(2.6rem, 1.6rem + 3.8vw, 5.1rem); line-height: 1.04; }
.page-hero .page-lede { color: #555; }
.page-hero .page-kicker { color: #444; }
.page-hero .btn-ghost { color: #111; background: #fff; border-color: #aaa; }
.hero-proof-grid { border-radius: 0; background: var(--border); border-color: var(--border); }
.proof-item { background: #f7f7f7; backdrop-filter: none; }
.proof-item strong { color: #111; font-weight: 600; }
.proof-item span { color: #555; }
.section-intro-row h2, .feature-card h3, .value-card h3, .package-title { font-weight: 600; }
.feature-card .feature-index, .value-card > span, .founder-model .page-kicker,
.guide-card .page-kicker { color: #444; }
.dark-cta, .pricing-cta, .proc-cta, .partner-card { background: #f6f6f6; color: #111; border: 1px solid var(--border); border-radius: 3px; box-shadow: none; }
.dark-cta p, .dark-cta .page-kicker, .pricing-cta p, .proc-cta p,
.partner-card p, .partner-card .eyebrow, .partner-card .partner-note { color: #555; }
.partner-fit { border: 1px solid var(--border); border-radius: 2px; background: #fff; }
.partner-fit span { color: #444; }
.partner-fit .badge { color: #444; background: #f4f4f4; border-color: #ccc; }
.partner-fit .checklist li { color: #444; }
.pricing-cta .eyebrow { color: #444; }
.pricing-hero h1 { font-size: clamp(2.3rem, 1.7rem + 3.5vw, 4.8rem); line-height: 1.04; }
.pricing-highlights { border-radius: 2px; box-shadow: none; }
.package-card::before { height: 2px; background: #111; }
.package-card.featured { background: #fafafa; border-color: #111; }
.investment-bands { border-radius: 2px; background: #f5f5f5; }
.rate-head, .rate-row.ai-rate { background: #f4f4f4; }
.rate-row.ai-rate .rate-price { color: #111; }
.hex-wrap { width: min(100%, 320px); height: 320px; margin: 0 auto 24px; clip-path: none; border: 0; background: #f4f4f4; box-shadow: none; }
.hex-photo { width: 100%; height: 100%; clip-path: none; object-fit: cover; object-position: 50% 42%; border-radius: 0; box-shadow: none; filter: grayscale(1); }
.founder-panel { padding: 28px; }
.founder-meta { border-top-style: solid; color: #444; }
.founder-bars .bar { height: 3px; border-radius: 0; background: #ddd; }
.founder-bars .bar > span { background: #111; box-shadow: none; }
.note-card { padding: 24px; }
.field input, .field select, .field textarea { border-radius: 2px; background: #fff; border-color: #bbb; box-shadow: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #111; box-shadow: 0 0 0 2px #ddd; }

/* Interactive workspaces: black ink on a white drafting surface. */
.journey-shell, .team-builder, .ops-console, .signal-shell,
.engineering-reactor, .assurance-console, .growth-timeline-shell,
.growth-capacity, .site-builder-card, .team-blueprint {
  background: #fff; color: #111; border: 1px solid var(--border);
  border-radius: 3px; box-shadow: none; backdrop-filter: none;
}
.journey-stage, .ops-monitor, .ops-detail, .signal-result, .journey-orbit,
.reactor-canvas, .assurance-feed, .site-builder-canvas { background: #f7f7f7; border: 1px solid var(--border); border-radius: 2px; box-shadow: none; }
.journey-tab, .team-profile, .ops-mode, .signal-choice,
.engineering-choice, .assurance-control { border-radius: 2px; background: #fff; border-color: var(--border); color: #444; box-shadow: none; }
.journey-tab:hover, .team-profile:hover, .ops-mode:hover,
.signal-choice:hover, .engineering-choice:hover, .assurance-control:hover { color: #111; background: #f4f4f4; border-color: #999; box-shadow: none; }
.journey-tab.is-active, .team-profile.is-active, .ops-mode.is-active,
.signal-choice.is-selected, .engineering-choice.is-active { color: #fff; background: #111; border-color: #111; box-shadow: none; }
.journey-tab > span, .team-profile > span, .ops-mode > span { background: #f4f4f4; color: #111; border-color: #ccc; border-radius: 2px; }
.journey-tab.is-active > span, .team-profile.is-active > span,
.ops-mode.is-active > span { background: #333; color: #fff; border-color: #555; }
.team-profile small, .team-profile strong { color: inherit; }
.engineering-choice.is-active small { color: #ccc; }
.engineering-choice-icon { background: #f4f4f4; color: #333; border-color: #ccc; border-radius: 2px; }
.engineering-choice.is-active .engineering-choice-icon { background: #333; color: #fff; border-color: #555; }
.engineering-choice.is-active .engineering-add { color: #fff; }
.assurance-control.is-active { background: #f4f4f4; border-color: #888; }
.assurance-control.is-active .assurance-toggle { background: #111; border-color: #111; }
.assurance-toggle { background: #ccc; border-color: #aaa; }
.journey-kicker, .ops-detail-label { background: #eee; color: #444; border-radius: 2px; }
.journey-kicker { background: none; }
.journey-kicker span { color: #444; background: #eee; border-color: #ddd; border-radius: 2px; }
.journey-core small { color: #ccc; }
.journey-copy h3, .journey-copy p, .journey-copy .method-list li,
.signal-head .section-title, .signal-head .section-subtitle,
.signal-head .eyebrow, .signal-step legend, .signal-step legend span,
.ops-monitor h3, .ops-monitor > p, .ops-monitor .ops-disclaimer,
.reactor-copy h3, .reactor-copy p, .reactor-formula,
.assurance-score-wrap h3, .assurance-score-wrap p, .assurance-label { color: #111; }
.journey-copy p, .signal-head .section-subtitle, .ops-monitor > p,
.ops-monitor .ops-disclaimer, .reactor-copy p, .assurance-score-wrap p { color: #555; }
.journey-progress-copy { color: #555; }
.signal-step { border-color: var(--border); }
.signal-result { background: #f5f5f5; }
.signal-result-label, .signal-result li { color: #444; }
.signal-result li::before { background: #111; box-shadow: none; }
.journey-actions .btn-ghost, .engineering-reactor .btn-ghost { color: #111; background: #fff; border-color: #aaa; }
.journey-orbit::before, .journey-orbit::after { border-color: #ccc; animation: none; }
.journey-core { background: #111; color: #fff; box-shadow: none; }
.journey-node, .journey-deliverable { background: #fff; color: #111; border: 1px solid #ccc; border-radius: 2px; box-shadow: none; }
.journey-node :is(span, strong, small), .journey-deliverable :is(span, strong, small) { color: #444; }
.journey-progress { background: #ddd; }
.journey-progress span { background: #111; box-shadow: none; }
.team-blueprint { background: #f7f7f7; }
.blueprint-head :is(span, strong, small), .blueprint-flow :is(span, strong, small),
.blueprint-specs :is(span, strong, small), .blueprint-note { color: #444; }
.blueprint-flow > div, .blueprint-specs > div { background: #fff; border-color: #ccc; border-radius: 2px; }
.blueprint-flow b { background: #111; color: #fff; box-shadow: none; border-radius: 2px; }
.blueprint-flow div span { background: #111; color: #fff; border-radius: 2px; }
.blueprint-flow div strong { color: #444; }
.blueprint-flow i { background: #bbb; }
.team-priority-list li { background: #f7f7f7; border-color: #ddd; border-radius: 2px; }
.team-priority-list li::before { color: #111; background: none; box-shadow: none; }
.ops-glyph { color: #111; background: #fff; border: 1px solid #bbb; border-radius: 2px; box-shadow: none; }
.ops-monitor-head, .ops-status, .ops-meta-grid span, .ops-meta-grid strong,
.ops-coverage b, .ops-coverage em { color: #444; }
.ops-meta-grid { background: #ccc; border-color: #ccc; border-radius: 2px; }
.ops-meta-grid div { background: #fff; }
.ops-status i, .reactor-topline i { background: #111; box-shadow: none; }
.ops-coverage > div > i { background: #ddd; }
.ops-coverage > div > i > b { background: #111; }
.ops-capabilities div { background: #fff; border-radius: 2px; }
.ops-capabilities span { color: #555; }
.reactor-topline, .reactor-topline > span:last-child { color: #555; }
.reactor-grid, .growth-chart-grid { background-image: linear-gradient(#ddd 1px, transparent 1px), linear-gradient(90deg, #ddd 1px, transparent 1px); opacity: .45; mask-image: none; }
.reactor-core { background: #fff; color: #111; border-color: #aaa; box-shadow: 0 0 0 16px #eee; }
.reactor-core img { width: 27px; height: 36px; }
.reactor-core small { color: #555; }
.reactor-core::before { border-color: #aaa; animation: none; }
.reactor-nodes span { background: #fff; border-color: #999; color: #111; border-radius: 2px; box-shadow: none; }
.engineering-reactor .chip { color: #444; background: #eee; border-color: #ccc; }
.assurance-console-bar { background: #f4f4f4; border-color: #ddd; color: #555; }
.assurance-console-bar strong { color: #444; }
.assurance-console-bar i:nth-child(n) { background: #777; }
.assurance-ring { background: conic-gradient(#111 var(--coverage), #ddd 0); box-shadow: none; }
.assurance-ring::before { background: #fff; box-shadow: none; }
.assurance-ring small { color: #555; }
.assurance-feed { background: #ddd; }
.assurance-feed > div { background: #f7f7f7; }
.assurance-feed span, .assurance-feed strong, .assurance-feed small,
.assurance-console-footer, .assurance-console-footer a { color: #444; }
.site-builder-card:hover { border-color: #111; box-shadow: none; }
.site-builder-bar { border-color: #ddd; background: #f4f4f4; }
.site-builder-dots i, .site-builder-dots i:first-child, .site-builder-live i { background: #777; box-shadow: none; }
.site-builder-url { color: #555; border-color: #ccc; background: #fff; border-radius: 2px; }
.site-builder-live, .site-builder-action { color: #111; }
.site-builder-action > i { background: #111; color: #fff; border-color: #111; }
.site-builder-card[data-build-step="4"] .site-builder-action > i { background: #111; color: #fff; }
.site-build-hero, .site-build-services > span, .site-build-proof { border-radius: 2px; }
.site-build-hero { background: #111; }
.site-build-hero small { color: #ccc; }
.site-build-hero > i { border-radius: 0; background: url("assets/syntonyl-mark.svg") center / contain no-repeat; filter: invert(1); box-shadow: none; }
.site-builder-empty i { background: #eee; border-color: #bbb; border-radius: 2px; animation: none; }
.site-builder-modules span { border-radius: 2px; }
.site-build-steps i.is-active { background: #111; }
.growth-timeline { background: #fff; }
.growth-timeline-line { background: #ddd; }
.growth-timeline-line i { background: #111; box-shadow: none; }
.growth-milestone.is-reached .growth-milestone-node { background: #eee; color: #111; border-color: #aaa; box-shadow: none; }
.growth-milestone.is-active .growth-milestone-node { background: #111; color: #fff; border-color: #111; box-shadow: 0 0 0 6px #eee; }
.growth-milestone.is-active strong { color: #111; }
.growth-milestone small, .growth-stage-topline, .growth-stage-topline span:last-child { color: #555; }
.growth-stage-list li::before { border-color: #111; box-shadow: none; }
.growth-capacity { background: #f7f7f7; }
.growth-capacity-bar, .growth-capacity-bar small, .growth-capacity-footer,
.growth-capacity-footer > span { color: #555; border-color: #ddd; }
.growth-capacity-bar i, .growth-capacity-footer i { background: #111; box-shadow: none; }
.growth-curve-column i { background: #e5e5e5; border-color: #ccc; border-radius: 2px 2px 0 0; box-shadow: none; }
.growth-curve-column.is-reached i { background: #aaa; border-color: #999; box-shadow: none; }
.growth-curve-column.is-active i { background: #111; border-color: #111; box-shadow: none; }
.growth-curve-column i::before, .growth-curve-column.is-reached i::before { background: #fff; border-color: #777; box-shadow: none; }
.growth-curve-column b, .growth-curve-column.is-reached b { color: #555; }
.growth-signals { background: #ddd; border-color: #ddd; }
.growth-signals > div { background: #fff; }
.growth-signals span { color: #555; }
.growth-signals strong { color: #111; }

.site-footer { background: #fff; color: #555; border-top: 1px solid var(--border); padding-block: 34px; }
.back-to-top { background: #111; color: #fff; border-color: #111; border-radius: 2px; box-shadow: none; }

@media (max-width: 950px) {
  body.nav-open .menu { inset: 88px 0 auto; background: #fff; border-bottom: 1px solid #bbb; box-shadow: 0 12px 24px rgba(0,0,0,.06); }
}
@media (max-width: 760px) {
  .section { padding-block: 76px; }
  .hero { min-height: auto; padding: 86px 0 66px; }
  .hero h1 { font-size: clamp(2.65rem, 2rem + 6vw, 4.2rem); }
  .hero-bg::after { width: 210px; height: 270px; right: -70px; bottom: -40px; }
  .page-hero { padding: 12px 0 40px; }
  .page-hero h1 { font-size: clamp(2.5rem, 7.5vw, 4rem); }
  .template-card, .template-card.is-active, .template-card:hover,
  .template-card:focus-visible, .template-card:focus-within { opacity: 1; transform: none; }
  .signal-shell, .engineering-reactor { border-radius: 3px; }
}
@media (max-width: 480px) {
  .nav { height: 76px; }
  .brand-lockup { width: 180px; }
  body.nav-open .menu { top: 76px; }
  .hero { padding-top: 68px; }
  .hero h1 { font-size: clamp(2.2rem, 11.5vw, 3.35rem); }
  .hero-badge { font-size: .58rem; letter-spacing: .04em; }
  main > .section:first-child:not(.hero) { padding-top: 40px; }
  .page-hero h1 { font-size: clamp(2.15rem, 10vw, 2.8rem); }
  .hex-wrap { height: 280px; }
  .founder-meta { flex-direction: column; align-items: flex-start; }
  .signal-shell { padding: 28px 20px; }
  .dark-cta .hero-ctas { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .int-card, .template-card { transition: none; }
  .btn:hover, .card:hover, .int-card:hover { transform: none; }
}