:root {
  --paper: #fff;
  --paper-2: #f5f5f3;
  --ink: #050505;
  --muted: #666;
  --line: #d5d5d2;
  --green: #d7ff3f;
  --deep: #050505;
  --white: #fff;
}

body { background: #fff; color: #050505; }

.hero-copy,
.hero-video-stage { min-width: 0; }

.site-header {
  background: rgba(5,5,5,.96);
  color: #fff;
  border-color: #2b2b2b;
  box-shadow: none;
}

.site-header.scrolled { box-shadow: 0 12px 34px rgba(0,0,0,.14); }
.site-header .brand-mark i { border-color: #fff; }
.site-header .brand-mark i:nth-child(3) { border-color: #fff; background: var(--green); }
.site-header .desktop-nav { color: #b8b8b8; }
.site-header .desktop-nav a:hover { color: #fff; }
.site-header .button-dark { color: #050505; background: #fff; box-shadow: inset 0 -4px 0 var(--green); }

.hero h1,
.section-heading h2,
.solution-intro h2,
.video-copy h2,
.integration-copy h2,
.customization-copy h2,
.pricing-card h2,
.final-copy h2,
.problem-card h3,
.outcome-card h3,
.faq summary {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.hero h1 { letter-spacing: -.045em; }
.hero-text { color: #5f5f5f; }
.eyebrow { color: #535353; }

.marker {
  position: relative;
  z-index: 0;
  display: inline;
  white-space: nowrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.marker::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.04em;
  right: -.08em;
  bottom: .05em;
  height: .22em;
  background: var(--green);
  transform: rotate(-1.2deg) skewX(-9deg);
  border-radius: 48% 12% 45% 18%;
  opacity: .92;
}

.marker-dark::after { opacity: 1; }

.button-primary {
  background: #050505;
  color: #fff;
  box-shadow: inset 0 -5px 0 var(--green);
}

.button-primary span { color: var(--green); }
.text-link { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 5px; text-underline-offset: 2px; }

.product-stage-real {
  position: relative;
  background: #050505;
  border: 1px solid #050505;
  border-radius: 2px;
  box-shadow: 18px 18px 0 #e8e8e5;
  transform: rotate(.35deg);
  overflow: visible;
}

.product-stage-real > img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: contain;
  object-position: center;
  background: #111;
  filter: contrast(1.03);
}

.real-stage-footer {
  height: 48px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #050505;
  color: #fff;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-video-stage {
  position: relative;
  background: #050505;
  border: 1px solid #050505;
  border-radius: 2px;
  box-shadow: 18px 18px 0 #e8e8e5;
  overflow: visible;
}

.hero-demo-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #050505;
  object-fit: contain;
}

.hero-video-stage .real-stage-footer {
  border-top: 1px solid #2d2d2d;
}

.audience-strip { background: #050505; color: #fff; border-color: #050505; }
.audience-strip > p { color: #8f8f8f; }
.ticker i { background: var(--green); }

.problem-grid { border-color: #bcbcbc; }
.problem-card { background: #fff; border-color: #bcbcbc; }
.problem-photo { position: relative; height: auto; aspect-ratio: 2 / 1; margin-top: 30px; overflow: hidden; border: 1px solid #c9c9c6; background: #ececea; }
.problem-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .35s ease; }
.visual-caption { position: absolute; left: 10px; bottom: 10px; padding: 6px 8px; background: var(--green); color: #050505; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.problem-card:hover .problem-photo img { transform: scale(1.025); }

.solution-section { background: #050505; }
.solution-intro > p:last-child, .journey-step p { color: #aeaeae; }
.journey, .journey-step { border-color: #333; }
.journey-visual { height: auto; aspect-ratio: 2 / 1; background: #111; }
.journey-shot { padding: 0; border: 1px solid #3b3b3b; border-radius: 2px; }
.journey-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .25s; }
.journey-step:hover .journey-shot img { transform: scale(1.02); }
.journey-pdf { display: block; background: #f1f1ef; }
.journey-pdf img { background: #fff; }
.journey-pdf b { position: absolute; left: 12px; bottom: 10px; padding: 6px 9px; background: var(--green); color: #050505; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }

.video-frame { border-radius: 2px; background: #111; color: #fff; box-shadow: 18px 18px 0 #e8e8e5; }
.video-preview-image { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; display: block; transform: scale(1.015); transition: transform .45s ease; }
.video-frame:hover .video-preview-image { transform: scale(1.045); }
.video-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.25) 48%, rgba(0,0,0,.08) 72%), linear-gradient(180deg, transparent 55%, rgba(0,0,0,.42)); pointer-events: none; }
.video-cover-copy { position: absolute; z-index: 2; left: 38px; top: 42px; width: 42%; text-align: left; }
.video-cover-copy b, .video-cover-copy em { display: block; font-family: Georgia, "Times New Roman", serif; font-style: normal; font-weight: 400; font-size: clamp(30px, 3.1vw, 48px); line-height: .98; letter-spacing: -.04em; }
.video-cover-copy em { color: var(--green); margin-top: 8px; }
.video-frame .play-button, .video-frame small { z-index: 3; }
.video-frame small { color: #050505; font-weight: 700; }
.modal-demo { width: 100%; aspect-ratio: 16 / 9; display: block; margin-top: 28px; border: 1px solid #111; background: #000; object-fit: contain; }
.play-button { background: var(--green); }
.outcome-card { border-radius: 2px; border-color: #bdbdbd; }
.outcome-card.dark { background: #050505; }
.outcome-card.accent { background: #fff; border: 2px solid #050505; box-shadow: inset 0 -12px 0 var(--green); }
.outcome-card.accent > span { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 8px; }
.integration { background: #f5f5f3; }
.check-list span { background: var(--green); color: #050505; }
.code-card { border-radius: 2px; background: #050505; }
.customization-list span { background: #fff; border-color: #a7a7a7; border-radius: 2px; }
.customization-list span:nth-child(2), .customization-list span:nth-child(5) { background: #fff; border-color: #050505; box-shadow: inset 0 -8px 0 var(--green); }
.pricing-card { border-radius: 2px; background: #050505; }
.final-cta { background: #050505; }
.final-cta .button-primary { background: #fff; color: #050505; }
.demo-form { border-radius: 2px; }
.demo-form input, .demo-form select { border-radius: 0; background: #fff; }
.site-footer { background: #fff; }

@media (max-width: 640px) {
  .marker { white-space: normal; }
  .product-stage-real { box-shadow: 8px 8px 0 #e8e8e5; }
  .hero-video-stage { box-shadow: 8px 8px 0 #e8e8e5; }
  .hero-video-stage .real-stage-footer { height: auto; min-height: 48px; gap: 12px; }
  .problem-photo { height: auto; }
  .video-cover-copy { left: 22px; top: 25px; width: 56%; }
  .video-cover-copy b, .video-cover-copy em { font-size: 27px; }
}