/* A quiet chapter system around the existing public content. */
.story-progress { position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #1257a6, #00a9d6, #a9dc52); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.story-rail { position: fixed; left: max(16px, calc((100vw - 1490px) / 2)); top: 50%; transform: translateY(-40%); z-index: 9; display: grid; gap: 10px; width: 130px; }
.story-rail a { display: flex; align-items: center; gap: 8px; min-height: 44px; color: #64748b; font-size: 11px; line-height: 1.3; }
.story-rail span { flex: 0 0 27px; height: 27px; display: grid; place-items: center; border: 1px solid #cddbea; border-radius: 50%; background: #f8fbff; font-size: 10px; transition: background .25s, color .25s; }
.story-rail b { font-weight: 500; }
.story-rail a[aria-current] { color: var(--navy); }
.story-rail a[aria-current] span { background: var(--navy); color: white; border-color: var(--navy); box-shadow: 0 0 0 4px #e3eefa; }
.story-rail a[aria-current] b { font-weight: 700; }
.story-chapter { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); }
.story-chapter::before { content: ''; width: 38px; height: 2px; background: linear-gradient(90deg, var(--blue), #6cc46c); }
.story-cue { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; min-height: 44px; font-size: 12px; color: #52657d; }
.story-cue span { display: grid; place-items: center; width: 30px; height: 38px; border: 1px solid #bdcfe2; border-radius: 20px; color: var(--blue); font-size: 20px; }
body:not(.workspace-mode) .hero { position: relative; }
body:not(.workspace-mode) .hero-visual { transform: translateY(var(--story-drift, 0px)); background-image: radial-gradient(#afc7df 1px, transparent 1px); background-size: 24px 24px; border-radius: 48px; }
body:not(.workspace-mode) .terminal-card {
  border: 1px solid #41668d;
  box-shadow: 0 28px 65px -22px rgba(8, 43, 87, 0.72), 0 0 35px -12px rgba(0, 169, 214, 0.22);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease, border-color .4s ease;
  position: relative;
}
body:not(.workspace-mode) .terminal-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169, 220, 82, 0.45), rgba(0, 169, 214, 0.55), transparent);
  pointer-events: none;
}
body:not(.workspace-mode) .hero-visual:hover .terminal-card {
  transform: translateY(-4px) rotate(1.2deg);
  box-shadow: 0 34px 75px -18px rgba(8, 43, 87, 0.8), 0 0 45px -8px rgba(0, 169, 214, 0.32);
  border-color: #5587ba;
}
body:not(.workspace-mode) .float-card {
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .35s ease;
  border: 1px solid rgba(205, 219, 234, 0.7);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body:not(.workspace-mode) .float-card:hover {
    box-shadow: 0 18px 36px -10px rgba(8, 43, 87, 0.22);
    border-color: #82b3d9;
  }
}
body:not(.workspace-mode) .hero h1 em {
  background: linear-gradient(115deg, #237b32 0%, #00a9d6 50%, #237b32 100%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: inline-block;
}
body:not(.workspace-mode) .hero-actions .button-primary {
  transition: transform .25s ease, box-shadow .25s ease;
}
body:not(.workspace-mode) .hero-actions .button-primary span,
body:not(.workspace-mode) .hero-actions .text-link span {
  display: inline-block;
  transition: transform .25s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body:not(.workspace-mode) .hero-actions .button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px rgba(8, 43, 87, 0.45), 0 0 20px -4px rgba(0, 169, 214, 0.35);
  }
  body:not(.workspace-mode) .hero-actions .button-primary:hover span,
  body:not(.workspace-mode) .hero-actions .text-link:hover span {
    transform: translate(3px, -3px);
  }
}
body:not(.workspace-mode) .service-card, body:not(.workspace-mode) .capability-card, body:not(.workspace-mode) .example-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
body:not(.workspace-mode) .pricing-card { border-radius: 24px; overflow: hidden; box-shadow: 0 28px 70px -24px #082b5760; }
body:not(.workspace-mode) .example-card { border-radius: 16px; overflow: hidden; }
body:not(.workspace-mode) .example-image img { transition: transform .6s ease; }
body:not(.workspace-mode) .process-grid > div { position: relative; border-top: 2px solid #cddbea; }
body:not(.workspace-mode) .process-grid > div::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--lime)); }
.workspace-mode .story-rail, .workspace-mode .story-progress { display: none; }
body:not(.workspace-mode) .story-entered:focus-within { animation: none; }
@media (max-width: 1510px) { .story-rail { display: none; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body:not(.workspace-mode) .capability-card:hover, body:not(.workspace-mode) .example-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px -18px #082b5750; border-color: #82b3d9; }
  body:not(.workspace-mode) .example-card:hover img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.workspace-mode) .hero-copy .eyebrow { animation: hero-fade-up .6s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .05s; }
  body:not(.workspace-mode) .hero-copy h1 { animation: hero-fade-up .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .12s; }
  body:not(.workspace-mode) .hero-copy h1 em { animation: text-shimmer 7s ease-in-out infinite; }
  body:not(.workspace-mode) .hero-copy .hero-tagline { animation: hero-fade-up .75s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .2s; }
  body:not(.workspace-mode) .hero-copy .hero-lede { animation: hero-fade-up .75s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .28s; }
  body:not(.workspace-mode) .hero-copy .hero-actions { animation: hero-fade-up .75s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .36s; }
  body:not(.workspace-mode) .hero-copy .hero-payment-reassurance { animation: hero-fade-up .8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .44s; }
  body:not(.workspace-mode) .hero-copy .hero-proof { animation: hero-fade-up .8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .52s; }
  body:not(.workspace-mode) .hero-copy .story-cue { animation: hero-fade-up .8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .6s; }

  body:not(.workspace-mode) .orb-one { animation: orb-drift-1 11s ease-in-out infinite; }
  body:not(.workspace-mode) .orb-two { animation: orb-drift-2 13s ease-in-out infinite; }

  body:not(.workspace-mode) .story-entered { animation: story-reveal .7s cubic-bezier(.2,.65,.25,1) both; animation-delay: var(--reveal-delay, 0ms); }
  body:not(.workspace-mode) .hero-visual .terminal-card,
  body:not(.workspace-mode) .hero-visual .sitemill-engine { animation: story-terminal 1.1s cubic-bezier(.2,.65,.25,1) both; }
  body:not(.workspace-mode) .float-card-top { animation: story-reveal .9s .2s both, float-badge-top 5.5s 1.2s ease-in-out infinite; }
  body:not(.workspace-mode) .float-card-bottom { animation: story-reveal .9s .35s both, float-badge-bottom 6.2s 1.4s ease-in-out infinite; }
  body:not(.workspace-mode) .process-grid > .story-entered::before { transform-origin: left; animation: story-line 1s ease both; }

  @keyframes hero-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes text-shimmer { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } }
  @keyframes orb-drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .85; } 50% { transform: translate(14px, -12px) scale(1.08); opacity: 1; } }
  @keyframes orb-drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .75; } 50% { transform: translate(-12px, 10px) scale(1.06); opacity: .95; } }
  @keyframes float-badge-top { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
  @keyframes float-badge-bottom { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
  @keyframes story-reveal { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  @keyframes story-terminal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes story-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (max-width: 650px) {
  .story-chapter { margin-bottom: 22px; font-size: 10px; }
  .story-cue { font-size: 11px; }
  body:not(.workspace-mode) .pricing-card { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .story-entered, .hero-visual, .terminal-card, .float-card, .float-card-top, .float-card-bottom, .service-card, .capability-card, .example-card, .example-image img, .orb, .orb-one, .orb-two, .hero-copy *, .button-primary, .button-primary span, .text-link span { animation: none !important; transition: none !important; }
  .hero-visual, .orb-one, .orb-two { transform: none !important; }
  .float-card-top, .float-card-bottom { translate: none !important; }
}