.scriptstream-story-page { background: var(--color-surface); }

.ss-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 9vw, 8rem);
}
.ss-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 82% 20%, rgba(35,131,197,.28), transparent 34%),
    radial-gradient(circle at 14% 84%, rgba(15,122,128,.18), transparent 30%);
  pointer-events: none;
}
.ss-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,.86fr) minmax(20rem,1.14fr);
  gap: clamp(2rem, 5vw, 4.2rem);
  align-items: center;
}
.ss-hero__copy { max-width: 44rem; }
.ss-hero__copy p:not(.eyebrow) { color: rgba(255,255,255,.78); }
.ss-hero__actions { margin-top: 2rem; }
.ss-hero__visual {
  margin: 0;
  padding: .82rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-2xl);
  background: rgba(255,255,255,.08);
  box-shadow: var(--shadow-xl);
  transform: translate3d(var(--parallax-x,0), var(--parallax-y,0), 0) rotateX(var(--parallax-rx,0)) rotateY(var(--parallax-ry,0));
  transition: transform 180ms var(--ease-standard);
}
.ss-hero__visual img { border-radius: calc(var(--radius-2xl) - .4rem); box-shadow: 0 22px 60px rgba(0,0,0,.22); }
.ss-hero__visual .caption { margin: .8rem .4rem 0; color: rgba(255,255,255,.62); }


.ss-hero__status {
  max-width: 42rem;
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--color-brand-teal);
  color: rgba(255,255,255,.9) !important;
  font-weight: var(--font-weight-semibold);
}

.ss-status-card h3 { margin-top: 0; }
.ss-status-card--primary h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }

.ss-milestones { position: relative; overflow: hidden; }
.ss-milestones::before {
  position: absolute;
  inset: 0 0 auto auto;
  width: min(36rem, 62vw);
  aspect-ratio: 1;
  content: "";
  background: radial-gradient(circle, rgba(35,131,197,.12), transparent 68%);
  transform: translate(30%,-42%);
  pointer-events: none;
}
.ss-milestones .container-wide { position: relative; z-index: 1; }
.ss-milestones__heading { max-width: 55rem; }
.ss-milestones__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1rem;
  margin-top: clamp(1.8rem, 4vw, 3rem);
}
.ss-milestone-card {
  position: relative;
  min-height: 13rem;
  padding: clamp(1.2rem, 2.6vw, 1.65rem);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}
.ss-milestone-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: .28rem;
  content: "";
  background: linear-gradient(180deg, var(--color-brand-blue), var(--color-brand-teal));
}
.ss-milestone-card--progress::before {
  background: linear-gradient(180deg, var(--color-brown-500, #9b6b43), var(--color-brand-blue));
}
.ss-milestone-card span {
  display: inline-flex;
  color: var(--color-brand-teal);
  font-size: .73rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.ss-milestone-card h3 { margin-top: .7rem; }
.ss-milestone-card p { margin-top: .7rem; color: var(--color-muted); }

.ss-ownership__visual figcaption {
  padding: .9rem 1rem 1rem;
  color: var(--color-muted);
  font-size: .86rem;
  line-height: 1.55;
}

.ss-status { margin-top: -2.4rem; position: relative; z-index: 2; }
.ss-status__grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) repeat(2,minmax(0,.72fr));
  gap: 1rem;
}
.ss-status-card {
  padding: clamp(1.25rem, 2.6vw, 1.8rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: white;
  box-shadow: var(--shadow-md);
}
.ss-status-card--primary { border-left: 5px solid var(--color-success); }
.ss-status-card span {
  display: inline-flex;
  margin-bottom: .75rem;
  color: var(--color-brand-teal);
  font-size: .73rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.ss-status-card p { margin-top: .65rem; color: var(--color-muted); }

.ss-context__grid,
.ss-integration__grid,
.ss-production__grid,
.ss-ownership__grid {
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(20rem,1.02fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.ss-context__visual,
.ss-integration__visual,
.ss-production__visual,
.ss-ownership__visual,
.ss-workflow__visual,
.ss-evidence__visual,
.ss-final__visual {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: white;
  box-shadow: var(--shadow-md);
}
.ss-context__visual img,
.ss-integration__visual img,
.ss-production__visual img,
.ss-ownership__visual img,
.ss-workflow__visual img,
.ss-evidence__visual img,
.ss-final__visual img { width: 100%; height: 100%; object-fit: cover; }
.ss-list {
  display: grid;
  gap: .9rem;
  padding: 0;
  margin: 1.5rem 0 0;
  list-style: none;
}
.ss-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--color-muted);
}
.ss-list li::before {
  position: absolute;
  top: .48rem;
  left: 0;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  content: "";
  background: linear-gradient(145deg, var(--color-brand-blue), var(--color-brand-teal));
  box-shadow: 0 0 0 .35rem rgba(35,131,197,.12);
}

.ss-workflow { overflow: hidden; }
.ss-workflow__layout {
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.no-js .ss-stepper__buttons { display: none; }
.no-js .ss-stepper__panel[hidden] { display: block !important; }
.no-js .ss-stepper__panel + .ss-stepper__panel { margin-top: 1rem; }

.ss-stepper {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, white, var(--color-surface-soft));
  box-shadow: var(--shadow-md);
}
.ss-stepper__buttons {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .65rem;
}
.ss-stepper__button {
  display: grid;
  min-height: 4.3rem;
  padding: .8rem .65rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-navy-950);
  background: white;
  font-weight: var(--font-weight-bold);
  text-align: left;
  transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-standard), box-shadow var(--duration-standard);
}
.ss-stepper__button small {
  margin-top: .25rem;
  color: var(--color-muted);
  font-size: .72rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
}
.ss-stepper__button:hover { border-color: var(--color-brand-blue); transform: translateY(-2px); }
.ss-stepper__button[aria-selected="true"] {
  color: white;
  border-color: var(--color-navy-950);
  background: linear-gradient(145deg, var(--color-navy-950), var(--color-brand-blue-800));
  box-shadow: 0 14px 28px rgba(13,42,62,.2);
}
.ss-stepper__button[aria-selected="true"] small { color: rgba(255,255,255,.78); }
.ss-stepper__panel {
  min-height: 18rem;
  padding: clamp(1.25rem, 2.5vw, 1.8rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: white;
}
.ss-stepper__panel span {
  display: inline-flex;
  color: var(--color-brand-teal);
  font-size: .74rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.ss-stepper__panel h3 { margin-top: .65rem; }
.ss-stepper__panel p { margin-top: .8rem; color: var(--color-muted); }
.ss-stepper__panel ul { display: grid; gap: .55rem; margin: 1rem 0 0; padding-left: 1.15rem; color: var(--color-muted); }

.ss-callout {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(35,131,197,.25);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, var(--color-surface-blue), white);
  box-shadow: var(--shadow-sm);
}
.ss-callout p { color: var(--color-muted); }
.ss-callout strong { color: var(--color-navy-950); }

.ss-production__grid { grid-template-columns: minmax(20rem,1.02fr) minmax(0,.88fr); }
.ss-production__visual { order: -1; }

.ss-evidence { overflow: hidden; }
.ss-evidence__grid {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(20rem,1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.ss-evidence__cards {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.ss-evidence-card {
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.08);
}
.ss-evidence-card h3 { color: white; }
.ss-evidence-card p { margin-top: .55rem; color: rgba(255,255,255,.72); }
.ss-evidence__visual { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); box-shadow: var(--shadow-xl); }

.ss-final { overflow: hidden; }
.ss-final__grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(18rem,.78fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.ss-final__copy p:not(.eyebrow) { color: rgba(255,255,255,.76); }
.ss-final__visual { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); box-shadow: var(--shadow-xl); }
.ss-final__visual img { border-radius: calc(var(--radius-xl) - .3rem); }

@media (max-width: 72rem) {
  .ss-milestones__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ss-hero__grid,
  .ss-context__grid,
  .ss-integration__grid,
  .ss-production__grid,
  .ss-ownership__grid,
  .ss-workflow__layout,
  .ss-evidence__grid,
  .ss-final__grid { grid-template-columns: 1fr; }
  .ss-production__visual { order: 0; }
  .ss-status__grid { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  .ss-milestones__grid { grid-template-columns: 1fr; }
  .ss-milestone-card { min-height: 0; }
  .ss-stepper__buttons,
  .ss-evidence__cards { grid-template-columns: 1fr; }
  .ss-hero { padding-block: 4rem 5rem; }
  .ss-status { margin-top: -1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-hero__visual,
  .ss-stepper__button { transition: none !important; transform: none !important; }
}

/* 2026-08-07 evidence-led ScriptStream rebuild */
.ss-product-mark {
  display: block;
  width: clamp(9.5rem, 18vw, 13rem);
  height: auto;
  margin: 0 0 1.2rem;
  padding: .58rem .72rem;
  border-radius: .65rem;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.ss-product-frame figcaption,
.ss-stepper__panel figcaption,
.ss-evidence__visual figcaption {
  padding: .8rem 1rem 1rem;
  color: var(--color-muted);
  font-size: .84rem;
  line-height: 1.5;
}
.ss-hero__visual img,
.ss-product-frame img,
.ss-stepper__panel figure img,
.ss-evidence__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #eefcff;
}
.ss-hero__visual { background: rgba(255,255,255,.96); }
.ss-hero__visual .caption { color: rgba(255,255,255,.72); }
.ss-section-heading { max-width: 58rem; margin-bottom: clamp(1.6rem, 4vw, 2.7rem); }
.ss-stepper { padding: clamp(1rem, 2vw, 1.35rem); }
.ss-stepper__panel { min-height: 0; padding: 0; overflow: hidden; }
.ss-stepper__panel-grid {
  display: grid;
  grid-template-columns: minmax(0,.72fr) minmax(22rem,1.28fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.ss-stepper__panel-grid figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: white;
  box-shadow: var(--shadow-sm);
}
.ss-integration-proof {
  padding: clamp(1.5rem, 3.5vw, 2.3rem);
  border: 1px solid rgba(35,131,197,.22);
  border-radius: var(--radius-2xl);
  background: linear-gradient(145deg, rgba(35,131,197,.08), rgba(15,122,128,.06), white);
  box-shadow: var(--shadow-md);
}
.ss-integration-proof h3 { margin-top: .45rem; font-size: clamp(1.55rem, 2.6vw, 2.2rem); }
.ss-integration-proof p { color: var(--color-muted); }
.ss-production__grid { grid-template-columns: minmax(0,1fr) minmax(18rem,.7fr); }
.ss-production__proof {
  display: grid;
  gap: .45rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, white, var(--color-surface-soft));
  box-shadow: var(--shadow-md);
}
.ss-production__proof span {
  margin-top: .7rem;
  color: var(--color-brand-teal);
  font-size: .73rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.ss-production__proof span:first-child { margin-top: 0; }
.ss-production__proof strong { color: var(--color-navy-950); font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.ss-production__proof p { margin: 0 0 .65rem; color: var(--color-muted); }
.ss-final__grid { grid-template-columns: minmax(0,1fr) minmax(18rem,.7fr); }
.ss-final__brand {
  display: grid;
  align-content: center;
  gap: 1rem;
  min-height: 15rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-2xl);
  background: rgba(255,255,255,.08);
}
.ss-final__brand img {
  width: min(13rem, 70%);
  height: auto;
  padding: .62rem .75rem;
  border-radius: .6rem;
  background: rgba(255,255,255,.96);
}
.ss-final__brand p { margin: 0; color: rgba(255,255,255,.74); }

@media (max-width: 72rem) {
  .ss-stepper__panel-grid,
  .ss-production__grid { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  .ss-stepper__panel-grid { padding: 1rem; }
  .ss-stepper__buttons { grid-template-columns: 1fr 1fr; }
  .ss-product-mark { width: 9.5rem; }
}
@media (max-width: 34rem) {
  .ss-stepper__buttons { grid-template-columns: 1fr; }
}
.ss-hero__visual .caption { color: var(--color-muted) !important; padding: .75rem .2rem 0; }