/* Public homepage only. The workspace keeps its existing presentation. */
#publicView {
  --sp-ink: #f1f2fc;
  --sp-muted: #b3b7ce;
  --sp-accent: #bca9ff;
  --sp-paper: #141827;
  --sp-surface: #171b2e;
  --sp-border: #ffffff1c;
  --sp-tint: #292640;
  --studio-night: #141827;
  --studio-paper: #141827;
  --studio-accent: #bca9ff;
  --lx-ink: #f1f2fc;
  --lx-muted: #b3b7ce;
  color: var(--sp-ink);
  background: var(--sp-paper);
  color-scheme: dark;
}

/* A quiet glass navigation bar over a deep, luminous stage. */
#publicView .public-header {
  background: #1b2032eb;
  border-color: #c8bcff26;
  box-shadow: 0 18px 50px #03051250, inset 0 1px #ffffff0a;
}
#publicView :is(.public-brand, .public-signin) { color: #f1edff; }
#publicView .public-brand-mark { background: #d5c7ff; color: #211737; }
#publicView .public-nav { border-color: #ffffff14; }
#publicView .public-nav a { color: #c3c5d8; }
#publicView .public-nav a:hover { color: #fff; border-color: #bea9ff; }
#publicView .public-reading-progress { background: #baa4ff; }
#publicView .public-button,
#publicView .public-hero .public-button,
#publicView .public-final-cta .public-button {
  color: #201634;
  background: linear-gradient(135deg, #e1d7ff, #bcabf2);
  border-color: #ded1ff;
  box-shadow: inset 0 1px #ffffff70, 0 8px 26px #9f83ee23;
}
#publicView .public-button:hover,
#publicView .public-hero .public-button:hover,
#publicView .public-final-cta .public-button:hover {
  background: #eee8ff;
  border-color: #eee8ff;
  box-shadow: 0 12px 34px #ad8efc38;
}
#publicView .public-hero {
  color: #f1f2fc;
  background: radial-gradient(ellipse at 84% 45%, #65509338, transparent 51%),
    radial-gradient(ellipse at 9% 4%, #213d6029, transparent 46%),
    linear-gradient(120deg, #131827, #1b2135 62%, #28213e);
}
#publicView .public-hero .public-hero-copy h1 { color: #f7f5ff; }
#publicView .public-hero .public-hero-copy h1 em { color: #cbbbff; }
#publicView .public-hero .public-kicker {
  color: #d8cef8;
  border-color: #b49ae640;
  background: #c5b4ff0b;
}
#publicView .public-live-dot { background: #cbbbff; box-shadow: 0 0 14px #b697fa60; }
#publicView.public-site .public-hero .public-hero-copy > p { color: #bdc0d6; }
#publicView .public-hero :is(.public-hero-note, .hero-assurances, .hero-stage-caption, .hero-stage-caption span:last-child) { color: #b8b6d0; }
#publicView .public-hero :is(.public-text-link, .public-text-link span) { color: #e1d7ff; border-bottom-color: #b19ad56b; }
#publicView .public-hero .hero-assurances span::before { color: #cfbeff; }
#publicView .public-note-rule { background: #b59bdc; }
#publicView .public-hero-grid { opacity: .21; }

/* Both ring systems stay visible; the markers make slow rotation legible. */
#publicView .hero-signal-field::before {
  border-color: #bca9ff52;
  background: conic-gradient(from 45deg, transparent 0deg 45deg, #b097ff1c 75deg,
    transparent 135deg 225deg, #9c94ec16 260deg, transparent 310deg);
  box-shadow: inset 0 0 100px #9a81e310, 0 0 90px #9a81e309;
}
#publicView .hero-signal-field::after { border-color: #cfc1ff46; box-shadow: 0 0 0 65px #b49bed05; }
#publicView .hero-signal-point { background: #e0d4ff; box-shadow: 0 0 0 7px #c2b1ff16, 0 0 26px #c2b1ff88; }
#publicView .hero-atmosphere span:first-child { border-color: #bdabf42e; box-shadow: 0 0 0 80px #baadff05, 0 0 0 160px #baadff04; }
#publicView .hero-stage-orbit { border-color: #c9b4ff70; }
#publicView .hero-stage-orbit::after { border-color: #c9b4ff46; }
#publicView .hero-stage-orbit span { background: #e6dbff; box-shadow: 0 0 0 6px #c8acff18, 0 0 23px #c8acff88; }
#publicView .public-visual-glow { background: #a17ade28; }

/* The product stays a crisp, light surface inside the darker presentation. */
#publicView .public-preview-shell {
  color-scheme: light;
  border-color: #dcd2ff7a;
  box-shadow: 0 38px 85px #02041080, 0 0 0 7px #c6a9ff08, 0 0 80px #ad89ee13;
}
#publicView .public-floating-card { box-shadow: 0 20px 50px #03041055; border-color: #e0d5f7; }
#publicView .hero-context-card { background: #242139f5; border-color: #c4abec46; box-shadow: 0 20px 50px #03041050; }
#publicView .public-value-strip { color: #d1c9e7; background: #1c2032; border-color: #a797d03b; }
#publicView .public-strip-separator { color: #b8a0ed; }

/* Coordinated surfaces through the rest of the homepage. */
#publicView .public-section { color: #f1f2fc; }
#publicView .public-section h2,
#publicView :is(.public-feature-card, .coverage-card, .vision-card, .pricing-card) h3 { color: #f1f2fc; }
#publicView .public-section h2 em { color: #bca9ff; }
#publicView :is(.public-section-label, .public-workflow .public-section-label, .public-feature-number, .coverage-region, .pricing-eyebrow, .vision-state) { color: #b7a3e4; }
#publicView :is(.public-section-intro p, .flow-story-copy p, .public-workflow-copy p, .public-steps p, .public-vision p, .public-pricing-heading p) { color: #b3b7ce; }
#publicView :is(.public-platform, .public-vision) { background: #0e111f; }
#publicView .public-flow-story { background: linear-gradient(125deg, #111422, #19172c); border-color: #ffffff13; }
#publicView .flow-story-stage { background: linear-gradient(145deg, #212238, #181b2e); border-color: #c4afe833; box-shadow: 0 26px 64px #03051045, inset 0 1px #ffffff06; }
#publicView .flow-story-caption { color: #b5afcd; }
#publicView .flow-story-controls button { color: #bab7ce; }
#publicView .flow-story-controls button span { background: #333249; color: #d6ccef; }
#publicView .flow-story-controls button[aria-pressed="true"] { color: #e3d7ff; }
#publicView .flow-story-controls button[aria-pressed="true"] span { background: #c7b2fc; color: #251a3b; box-shadow: 0 0 0 5px #b39ae618; }
#publicView .flow-story-rail { background: #ffffff13; }
#publicView .flow-story-rail span { background: #c2a8ff; }
#publicView .flow-story-panel { background: radial-gradient(ellipse at 100% 0, #47336055, transparent 75%), #111523; border-color: #c4afe82c; box-shadow: 0 12px 32px #03051030; }
#publicView .flow-story-link { color: #cebcff; }
#publicView :is(.public-feature-card, .coverage-card, .vision-card, .pricing-card) {
  background: linear-gradient(145deg, #1b2032, #141827);
  border-color: #b6b2d628;
  box-shadow: inset 0 1px #ffffff04, 0 14px 34px #02051025;
}
#publicView .public-feature-card p { color: #b3b7ce; }
#publicView .public-feature-symbol { background: #b79cdf18; color: #d0bbff; border-color: #c4abe334; box-shadow: inset 0 1px #ffffff08; }
#publicView .public-feature-card::after { border-color: #b7a1e024; box-shadow: 0 0 0 18px #b7a1e008, 0 0 0 37px #b7a1e005; }
#publicView .public-coverage { background: #1b2032; border-color: #ffffff14; }
#publicView .coverage-intro > p { background: #25293d; border-color: #c4afe829; color: #c9cadc; }
#publicView .coverage-state { color: #bde5ce; background: #25433380; border-color: #8bc99e30; }
#publicView .coverage-card[data-state="partial"] .coverage-state,
#publicView .coverage-card[data-state="integration"] .coverage-state { color: #edcf97; background: #57422566; border-color: #d4b47735; }
#publicView .coverage-card[data-state="local"] .coverage-state { color: #d3bff6; background: #6b488e36; border-color: #b78bd73a; }
#publicView .public-workflow { background: radial-gradient(ellipse at 5% 8%, #6d497e2b, transparent 57%), #181d2d; border-color: #ffffff14; }
#publicView .public-steps h3 { color: #f1f2fc; }
#publicView .public-steps li > span { background: #252039; border-color: #c1a6ef42; color: #dbcbff; }
#publicView .public-vision .vision-card p { color: #b3b7ce; }
#publicView .vision-card-planned { background: linear-gradient(145deg, #282137, #1b1a2c); }
#publicView .vision-controls button { background: #1f2236; color: #d4c1ff; border-color: #b5a1de3a; }
#publicView .vision-controls button:hover { background: #302841; }
#publicView .vision-controls span { color: #b1abc6; }
#publicView .public-pricing { background: linear-gradient(#161525, #0f1220); border-color: #ffffff14; }
#publicView .pricing-card :is(p, li, .pricing-amount span, .plan-details) { color: #b9bdd2; }
#publicView .pricing-amount strong { color: #f2f1fc; }
#publicView .pricing-card li::before { color: #c8b2f6; }
#publicView .pricing-card li em { color: #c0a6de; }
#publicView .pricing-divider, #publicView .plan-details { border-color: #ffffff18; }
#publicView .pricing-divider { background: #ffffff18; }
#publicView .pricing-card-premium { background: radial-gradient(ellipse at 100% 0, #73518b40, transparent 75%), linear-gradient(145deg, #30273f, #1c1a2e); border-color: #bea0ec69; box-shadow: 0 20px 50px #02051035, inset 0 1px #d5b9f01a; }
#publicView .pricing-card-premium :is(.pricing-eyebrow, .plan-details summary, .plan-details p) { color: #e2cef8; }
#publicView .pricing-disclaimer { color: #aaaec8; }
#publicView .currency-switch { background: #171c2b; border-color: #c0acdf32; }
#publicView .currency-option { color: #b6b6ce; }
#publicView .currency-option.active { background: #c7b3f0; color: #291b40; box-shadow: 0 3px 12px #02051030; }
#publicView .public-final-cta { background: radial-gradient(ellipse at 50% 100%, #62497d45, transparent 67%), #1b2030; }
#publicView .public-footer { background: #202437; border-color: #ffffff1f; }
#publicView .public-footer p { color: #c3c7da; font-size: 12px; line-height: 1.7; }
#publicView .public-footer .public-footer-owner { color: #c3c7da; font-size: 12px; line-height: 1.7; }
#publicView .public-footer-owner a { color: #e1d2f5; }
#publicView .public-footer-owner strong { color: #e1d2f5; }
#publicView :is(button, a, summary):focus-visible { outline-color: #d0b5ff; }

/* Light chapters balance the dark hero, coverage and detailed workflow. */
#publicView :is(.public-flow-story, .public-platform, .public-vision, .public-pricing) {
  --sp-ink: #24243d;
  --sp-muted: #606780;
  --sp-accent: #7256ad;
  --sp-paper: #f6f5fa;
  --sp-border: #ddd9e9;
  color: #24243d;
}
#publicView .public-flow-story { background: linear-gradient(120deg, #f8f7fc, #efedf7); border-color: #ded9eb; }
#publicView .public-platform { background: #faf9fd; }
#publicView .public-vision { background: #f7f6fb; }
#publicView .public-pricing { background: linear-gradient(#eeeaf5, #f7f6fb); border-color: #ddd7e9; }
#publicView :is(.public-flow-story, .public-platform, .public-vision, .public-pricing) h2 { color: #24243d; }
#publicView :is(.public-flow-story, .public-platform, .public-vision, .public-pricing) h2 em { color: #7256ad; }
#publicView :is(.public-flow-story, .public-platform, .public-vision, .public-pricing) .public-section-label { color: #74598d; }
#publicView :is(.public-platform .public-section-intro p, .flow-story-copy p, .public-vision-intro p, .public-pricing-heading p) { color: #606780; }
#publicView .flow-story-stage { background: linear-gradient(145deg, #ffffff, #f1edf9); border-color: #ded6eb; box-shadow: 0 24px 55px #3527510d, inset 0 1px #fff; }
#publicView .flow-story-caption { color: #6f617f; }
#publicView .flow-story-controls button { color: #68617a; }
#publicView .flow-story-controls button span { background: #e9e4f2; color: #695583; }
#publicView .flow-story-controls button[aria-pressed="true"] { color: #654a94; }
#publicView .flow-story-controls button[aria-pressed="true"] span { background: #795aad; color: #fff; box-shadow: 0 0 0 5px #e9e1f5; }
#publicView .flow-story-rail { background: #dfd8e9; }
#publicView .flow-story-rail span { background: #8e6cbb; }
#publicView .flow-story-link { color: #684c96; }
#publicView .public-platform .public-feature-card,
#publicView .public-vision .vision-card,
#publicView .public-pricing .pricing-card:not(.pricing-card-premium) {
  background: linear-gradient(145deg, #fff, #fbfaff);
  border-color: #e0daeb;
  box-shadow: inset 0 1px #fff, 0 8px 20px #36254f04, 0 20px 40px #36254f05;
}
#publicView .public-platform .public-feature-card h3,
#publicView .public-vision .vision-card h3,
#publicView .public-pricing .pricing-card:not(.pricing-card-premium) h3 { color: #292740; }
#publicView .public-platform .public-feature-card p,
#publicView .public-vision .vision-card p,
#publicView .public-pricing .pricing-card:not(.pricing-card-premium) :is(p, li, .pricing-amount span, .plan-details) { color: #606780; }
#publicView .public-platform .public-feature-number, #publicView .public-vision .vision-state,
#publicView .pricing-card:not(.pricing-card-premium) .pricing-eyebrow { color: #795a92; }
#publicView .public-feature-symbol { background: #f0eafa; color: #745496; border-color: #e0d4ee; box-shadow: inset 0 1px #fff; }
#publicView .public-feature-card::after { border-color: #a788c523; box-shadow: 0 0 0 18px #a788c509, 0 0 0 37px #a788c505; }
#publicView .public-vision .vision-card-planned { background: linear-gradient(145deg, #f0eaf6, #f7f4fc); border-color: #ded1e9; }
#publicView .vision-controls button { background: #fff; color: #70518e; border-color: #d7cbe4; }
#publicView .vision-controls button:hover { background: #eae1f4; }
#publicView .vision-controls span { color: #70677f; }
#publicView .pricing-card:not(.pricing-card-premium) .pricing-amount strong { color: #292740; }
#publicView .pricing-card:not(.pricing-card-premium) li::before { color: #7955a4; }
#publicView .pricing-card:not(.pricing-card-premium) li em { color: #735587; }
#publicView .pricing-card:not(.pricing-card-premium) .pricing-divider { background: #e2dae9; }
#publicView .pricing-card:not(.pricing-card-premium) .plan-details { border-color: #e2dae9; }
#publicView .pricing-disclaimer { color: #686b81; }
#publicView .currency-switch { background: #faf8fd; border-color: #d9cfe4; }
#publicView .currency-option { color: #715f85; }
#publicView .currency-option.active { background: #392d4e; color: #fff; }
#publicView :is(.public-flow-story, .public-platform, .public-vision, .public-pricing) :is(button, a, summary):focus-visible { outline-color: #7955a4; }

/* Two compact, opposing source rows. Every source has one accessible original. */
#publicView .coverage-rows { display: grid; gap: 22px; min-width: 0; }
#publicView .coverage-motion-row { min-width: 0; }
#publicView .coverage-row-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#publicView .coverage-row-toolbar > span { color: #c3b7de; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
#publicView .coverage-row-controls { display: flex; gap: 8px; }
#publicView .coverage-row-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #c4afe840; border-radius: 50%; background: #ffffff07; color: #ded1fa; font-size: 20px; cursor: pointer; transition: background .2s, border-color .2s; }
#publicView .coverage-row-controls button:hover { background: #c4afe81b; border-color: #c4afe878; }
#publicView .coverage-row-viewport { --coverage-columns: 3; overflow-x: auto; overflow-y: hidden; direction: ltr; scroll-behavior: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: 7px 16px; border-radius: 20px; }
#publicView .coverage-row-viewport::-webkit-scrollbar { display: none; }
#publicView .coverage-row-viewport:focus-visible { outline: 2px solid #d0b5ff; outline-offset: 4px; }
#publicView :is(.coverage-row-belt, .coverage-row-group) { display: flex; width: max-content; gap: 16px; }
#publicView .coverage-row-group { flex: none; }
#publicView .coverage-row-group[hidden] { display: none; }
#publicView .coverage-row-group .coverage-card { flex: 0 0 var(--coverage-card-width, 320px); width: var(--coverage-card-width, 320px); padding: 22px; background: linear-gradient(145deg, #2b3048, #23283c); border-color: #b6b2d636; box-sizing: border-box; }
#publicView .coverage-card h3 { font-size: 18px; min-height: 50px; margin: 10px 0 12px; }
#publicView .coverage-card p { color: #c2c5d8; line-height: 1.7; margin-top: 14px; }
#publicView .public-coverage .coverage-note { margin: 16px 0 20px; }
#publicView .coverage-rows + .coverage-note { margin-bottom: 0; }

/* The four decisions read as a compact journey, with detail on demand. */
#publicView .public-workflow { grid-template-columns: minmax(0, 1fr); gap: 38px; }
#publicView .public-workflow-copy { display: grid; grid-template-columns: 1.15fr 1fr; align-items: end; gap: 40px; }
#publicView .public-workflow-copy h2 { margin-bottom: 0; }
#publicView .public-workflow-copy p { margin: 0 0 24px; max-width: 490px; }
#publicView .public-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border: 0; }
#publicView .public-steps::before { display: none; }
#publicView .public-steps li { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 22px; padding: 24px; border: 1px solid #c4afe82e; border-radius: 20px; background: linear-gradient(150deg, #2a2c43, #22273b); box-shadow: inset 0 1px #ffffff07; }
#publicView .public-steps li > span { width: 46px; height: 46px; border-radius: 50%; background: #c5afff12; }
#publicView .public-steps h3 { font-size: 19px; line-height: 1.35; padding: 0; margin-bottom: 12px; }
#publicView .public-steps p { font-size: 13px; line-height: 1.7; color: #c2c5d8; }
#publicView .workflow-step-details { margin-top: 18px; border-top: 1px solid #c4afe82e; }
#publicView .workflow-step-details summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding-block: 12px; color: #dbcafa; font-size: 11px; font-weight: 600; cursor: pointer; list-style: none; }
#publicView .workflow-step-details summary::-webkit-details-marker { display: none; }
#publicView .workflow-step-details summary::after { content: '+'; font-size: 18px; }
#publicView .workflow-step-details[open] summary::after { content: '−'; }
#publicView .workflow-step-details p { padding-bottom: 6px; }

/* Restore the principles marquee and stop it when it is outside the viewport. */
#publicView .public-value-strip { display: block; padding-inline: 0; }
#publicView .public-value-group { min-width: 100vw; justify-content: space-around; box-sizing: border-box; padding-left: 24px; }
#publicView .public-value-strip:not(.is-in-view) .public-value-track { animation-play-state: paused; }

@media (max-width: 1100px) {
  #publicView .public-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #publicView .coverage-row-viewport { --coverage-columns: 2; }
  #publicView .public-workflow-copy { grid-template-columns: 1fr; gap: 22px; }
  #publicView .public-footer { flex-wrap: wrap; gap: 18px; }
  #publicView .public-footer p { width: 100%; margin: 0; order: 3; }
  #publicView .public-footer .public-footer-owner { margin-left: auto; }
}
@media (max-width: 600px) {
  #publicView .coverage-row-viewport { --coverage-columns: 1.08; }
  #publicView .public-steps { grid-template-columns: 1fr; }
  #publicView .public-steps li { grid-template-columns: 46px minmax(0, 1fr); padding: 22px; gap: 16px; }
  #publicView .coverage-intro { margin-bottom: 22px; }
  #publicView .public-value-group { min-width: max-content; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #publicView .public-value-group:first-child { min-width: 0; padding: 16px; }
  #publicView .coverage-row-group[data-coverage-copy] { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  #publicView.motion-enhanced .hero-stage-orbit { animation: homepage-orbit 42s linear infinite; }
  @keyframes homepage-orbit { from { transform: rotate(-15deg); } to { transform: rotate(345deg); } }
  #publicView :is(.public-feature-card, .coverage-card, .pricing-card):hover { border-color: #b39bdb73; box-shadow: 0 22px 45px #02051045, 0 0 28px #b18cdd0b; }
  #publicView .public-platform .public-feature-card:hover,
  #publicView .public-pricing .pricing-card:not(.pricing-card-premium):hover { border-color: #b59bcc; box-shadow: 0 20px 40px #5c3f8712; }
}
/* Include pseudo-element rings in the existing automatic idle/offscreen policy. */
#publicView.document-idle .hero-signal-field::before,
#publicView.document-idle .hero-signal-field::after,
#publicView .public-hero.in-background .hero-signal-field::before,
#publicView .public-hero.in-background .hero-signal-field::after,
#publicView .public-hero.in-background .hero-signal-point { animation-play-state: paused; }

@media (max-width: 700px) {
  #publicView .hero-stage-orbit { width: 126%; border-color: #c9b4ff66; }
  #publicView .hero-stage-orbit::after { inset: 24px; }
  #publicView .hero-signal-field::before { border-color: #bca9ff38; }
  #publicView .hero-signal-field::after { border-color: #cfc1ff38; }
}