/* Across visual direction: editorial learning experience, not dashboard chrome. */
:root {
  --across-navy: #07345f;
  --across-blue: #087cc1;
  --across-blue-text: #00649a;
  --across-yellow: #ffc33c;
  --across-coral: #b63e2c;
  --across-teal: #258b7f;
  --across-ink: #152b3b;
  --across-muted: #5d7180;
  --across-cloud: #eef4f5;
  --across-mist: #f7faf9;
  --across-line: #d7e2e4;
  --across-white: #ffffff;
  --across-shadow: 0 18px 50px rgba(7, 52, 95, 0.11);

  /* Tokens split by job. A colour that is fine as a fill can fail as text,
     and a hover state can fail where its base passes, so each job gets its
     own token and test/visualContrast.test.js measures every pair.

     --across-blue and --across-teal are MARK colours (fills, swatches, rules).
     As text, blue measures 4.05:1 on cloud and teal 3.72:1, both below AA, so
     neither may be used as a text colour; use --across-blue-text instead.

     --across-coral-press is the pressed and hover fill behind white text. The
     hover used to be a lighter coral, #d9503b, which measured 4.07:1: the
     send button passed at rest and failed the moment a pointer touched it.
     Pressing now darkens, 7.73:1.

     --across-control-edge is the border of a control people click, held at
     3:1 or better (WCAG 1.4.11) on white and on cloud. The survey pills used
     #9db3bf, 2.18:1, so an unselected option barely read as a control. */
  --across-coral-press: #93321f;
  --across-control-edge: #6f8896;

  /* Values that were repeated as raw hex, named for their job. The values are
     unchanged; naming them means a change is made once and gets measured. */
  --across-ink-2: #304959;          /* secondary body text on light surfaces */
  --across-ink-3: #405969;          /* captions and labels on light surfaces */
  --across-on-navy-muted: #d5e5ed;  /* secondary text on navy */
  --across-rule-on-dark: #55798f;   /* hairlines inside dark sections; not text */
  --across-navy-press: #052848;     /* pressed and deep navy fill */
}

body[data-experience="scene"] {
  background: var(--across-cloud);
  color: var(--across-ink);
  font-family: "Public Sans", system-ui, sans-serif;
}

body[data-experience="scene"]::before { display: none; }

/* Landing */
body[data-experience="scene"] #access-screen {
  display: block;
  width: 100%;
  min-height: 100svh;
  padding: 0;
}

body[data-experience="scene"] #access-screen > .landing-view {
  width: 100%;
  max-width: none;
  margin: 0;
}

body[data-experience="scene"] .landing-view {
  position: relative;
  display: block;
  min-height: 100svh;
  overflow: hidden;
  padding: 0;
  color: var(--across-white);
  background-color: var(--across-navy);
  background-image: url("/assets/across-conversation-hero.png");
  background-position: center center;
  background-size: cover;
}

body[data-experience="scene"] .landing-view::before,
body[data-experience="scene"] .landing-view::after {
  position: absolute;
  inset: 0;
  display: block;
  content: "";
  pointer-events: none;
}

body[data-experience="scene"] .landing-view::before {
  z-index: 0;
  background: rgba(2, 28, 51, 0.16);
}

body[data-experience="scene"] .landing-view::after {
  z-index: 1;
  right: auto;
  width: 36%;
  border-right: 1px solid rgba(255, 195, 60, 0.28);
  background: var(--across-navy);
}

body[data-experience="scene"] .landing-copy.ld {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  width: min(1280px, calc(100% - 96px));
  min-height: 100svh;
  margin: 0 auto;
  padding: 24px 0 20px;
  color: var(--across-white);
}

body[data-experience="scene"] .landing-copy .ld-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

body[data-experience="scene"] .ld-brand-lockup {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 78px;
  padding: 10px 24px 10px 0;
}

body[data-experience="scene"] .ld-brand-lockup::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 -100vw;
  border-bottom: 4px solid var(--across-yellow);
  background: rgba(255, 255, 255, 0.97);
  content: "";
}

body[data-experience="scene"] .landing-copy .across-logo {
  width: 190px;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}

body[data-experience="scene"] .ld-brand-descriptor {
  max-width: 13ch;
  padding-left: 17px;
  border-left: 1px solid #b9c8d1;
  color: #36566d;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-experience="scene"] .ld-pilot {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 246px;
  padding: 11px 18px 11px 22px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 2px;
  background: rgba(3, 39, 70, 0.9);
  box-shadow: 0 10px 26px rgba(0, 20, 39, 0.18);
  backdrop-filter: blur(8px);
  color: var(--across-white);
  letter-spacing: 0;
  white-space: nowrap;
}

body[data-experience="scene"] .ld-pilot::before {
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 5px;
  background: var(--across-yellow);
  content: "";
}

body[data-experience="scene"] .ld-pilot span {
  color: var(--across-yellow);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-experience="scene"] .ld-pilot strong {
  color: var(--across-white);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.landing-message {
  grid-column: 1 / -1;
  align-self: center;
  width: min(440px, calc(36vw - 72px));
  margin: 18px 0;
}

body[data-experience="scene"] .landing-copy .eyebrow {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  color: var(--across-yellow);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-experience="scene"] .landing-copy #landing-title {
  max-width: none;
  margin: 0;
  color: var(--across-white);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 38px;
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: wrap;
}

body[data-experience="scene"] .landing-copy #landing-title:focus {
  outline: none;
  box-shadow: none;
}

body[data-experience="scene"] .landing-copy #landing-title span,
body[data-experience="scene"] .landing-copy .landing-lede span {
  background: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

body[data-experience="scene"] .landing-copy #landing-title span {
  padding: 0;
  box-shadow: none;
}

body[data-experience="scene"] .landing-copy .landing-lede {
  max-width: 600px;
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--across-yellow);
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.5;
}

/* Leclerc's three promises, on the landing. They carry the value proposition,
   so they sit close under the lede and read as one block. */
body[data-experience="scene"] .landing-points {
  grid-template-columns: 1fr;
  max-width: 440px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  counter-reset: landing-benefit;
  border-top: 1px solid rgba(255, 255, 255, 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
}

body[data-experience="scene"] .landing-points li {
  position: relative;
  counter-increment: landing-benefit;
  color: rgba(255, 255, 255, 0.86);
  background: transparent;
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 0 8px 34px;
  border-left: 0;
}

body[data-experience="scene"] .landing-points li:first-child {
  padding-left: 34px;
  border-left: 0;
}

body[data-experience="scene"] .landing-points li::before {
  position: absolute;
  top: 9px;
  left: 0;
  content: "0" counter(landing-benefit);
  color: var(--across-yellow);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
}

body[data-experience="scene"] .landing-points li + li { border-top: 1px solid rgba(255, 255, 255, 0.18); }

body[data-experience="scene"] .landing-points strong {
  display: inline;
  margin-right: 0.2em;
  color: var(--across-white);
  font-weight: 700;
}

body[data-experience="scene"] .landing-copy .landing-lede span {
  padding: 0;
  box-shadow: none;
}

body[data-experience="scene"] .landing-copy .landing-actions {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  margin: 0;
}

body[data-experience="scene"] .landing-copy #open-login {
  min-height: 48px;
  border: 0;
  border-radius: 6px;
  background: var(--across-yellow);
  box-shadow: 0 8px 20px rgba(0, 18, 38, 0.18);
  color: #082d50;
  font-size: 15px;
  font-weight: 800;
  padding: 0 22px;
}

body[data-experience="scene"] .landing-copy #open-login:hover {
  background: #ffd262;
  color: #082d50;
  transform: none;
}

body[data-experience="scene"] .landing-copy #open-login:focus-visible {
  outline: 3px solid var(--across-white);
  outline-offset: 3px;
  box-shadow: none;
}

body[data-experience="scene"] .landing-copy .ld-attribution {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  justify-self: end;
  max-width: 390px;
  margin: 0;
  padding: 3px 6px;
  background: var(--across-navy);
  color: #dce8ee;
  font-size: 12px;
  text-align: right;
}

/* Sign in */
body[data-experience="scene"] #access-screen:has(#login-view:not([hidden])) {
  position: relative;
  display: block;
  min-height: 100svh;
  padding: clamp(28px, 5vw, 72px) max(24px, calc((100vw - 1240px) / 2));
  background-color: var(--across-navy-press);
  background-image: url("/assets/across-conversation-hero.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
}

body[data-experience="scene"]:has(#access-screen:not([hidden]) #login-view:not([hidden])) {
  background: var(--across-navy-press);
}

body[data-experience="scene"] #login-view.access-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.72fr);
  gap: clamp(42px, 6vw, 88px);
  align-items: center;
  width: min(1240px, 100%);
  min-height: calc(100svh - clamp(56px, 10vw, 144px));
  max-height: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--across-white);
  overflow: visible;
}

body[data-experience="scene"] #login-view.access-panel::before {
  display: none;
}

body[data-experience="scene"] .onboarding-story {
  max-width: 650px;
  text-shadow: 0 2px 18px rgba(0, 16, 34, 0.34);
}

body[data-experience="scene"] .login-topline {
  margin-bottom: clamp(50px, 8vh, 92px);
}

body[data-experience="scene"] .login-topline .link-button {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-experience="scene"] .login-logo {
  width: 190px;
  height: auto;
  max-height: none;
  padding: 10px 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.96);
  filter: none;
}

body[data-experience="scene"] .login-header {
  max-width: 630px;
  margin-bottom: 34px;
}

body[data-experience="scene"] .login-header h1 {
  max-width: 11ch;
  margin: 8px 0 18px;
  color: var(--across-white);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: clamp(46px, 5.7vw, 76px);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

body[data-experience="scene"] .login-header p:last-child {
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.84);
  font-size: 18px;
  line-height: 1.55;
}

body[data-experience="scene"] .login-header .eyebrow,
body[data-experience="scene"] .onboarding-entry > .eyebrow {
  color: var(--across-yellow);
  font-size: 12px;
  font-weight: 800;
}

body[data-experience="scene"] .onboarding-sequence {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-experience="scene"] .onboarding-sequence li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

body[data-experience="scene"] .sequence-number {
  color: var(--across-yellow);
  font-size: 12px;
  font-weight: 850;
}

body[data-experience="scene"] .onboarding-sequence strong {
  display: block;
  color: var(--across-white);
  font-size: 16px;
}

body[data-experience="scene"] .onboarding-sequence p {
  max-width: 48ch;
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  line-height: 1.5;
}

body[data-experience="scene"] .prototype-note {
  margin: 22px 0 0;
  padding-left: 16px;
  border-left: 4px solid var(--across-teal);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

body[data-experience="scene"] .onboarding-entry {
  padding: clamp(28px, 4vw, 44px);
  border-top: 8px solid var(--across-yellow);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 24px 70px rgba(0, 18, 38, 0.3);
  color: var(--across-ink);
}

body[data-experience="scene"] .onboarding-entry > .eyebrow {
  margin: 0 0 8px;
  color: var(--across-coral);
}

body[data-experience="scene"] .onboarding-entry h2 {
  margin: 0;
  color: var(--across-navy);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 850;
}

body[data-experience="scene"] .entry-intro {
  margin: 10px 0 24px;
  color: var(--across-muted);
  font-size: 14px;
  line-height: 1.5;
}

body[data-experience="scene"] #login-view .access-form {
  gap: 16px;
  padding-top: 0;
  border-top: 0;
}

body[data-experience="scene"] #login-view .login-fields {
  grid-template-columns: 1fr;
  gap: 14px;
}

body[data-experience="scene"] #login-view .field label {
  color: var(--across-navy);
  font-size: 13px;
  font-weight: 750;
}

body[data-experience="scene"] #login-view .field input {
  min-height: 48px;
  border-color: #c8d6da;
  background: var(--across-mist);
}

body[data-experience="scene"] #login-view [data-access-code-field][hidden] {
  display: none !important;
}

body[data-experience="scene"] #login-view .consent-row {
  border: 0;
  border-left: 4px solid var(--across-teal);
  border-radius: 0;
  background: #edf7f4;
  color: var(--across-ink-2);
  padding: 13px 14px;
}

body[data-experience="scene"] #login-view .login-submit {
  min-height: 52px;
  border: 0;
  border-radius: 6px;
  background: var(--across-coral);
  font-weight: 800;
}

body[data-experience="scene"] .staff-access {
  margin-top: 18px;
  border-top: 1px solid var(--across-line);
  color: var(--across-muted);
}

body[data-experience="scene"] .staff-access > summary {
  padding: 16px 0 0;
  color: var(--across-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

body[data-experience="scene"] #login-view .staff-access .role-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

body[data-experience="scene"] #login-view .staff-access .role-card {
  min-height: 56px;
  padding: 9px;
}

body[data-experience="scene"] #login-view .staff-access .role-card strong { font-size: 12px; }
body[data-experience="scene"] #login-view .staff-access .role-card span { font-size: 12px; }

body[data-experience="scene"] .role-card:hover,
body[data-experience="scene"] .role-card.is-active {
  border-color: var(--across-blue);
  background: #edf8fd;
}

/* Compact app shell */
body[data-role="student"] .experience-context { display: none; }

body[data-experience="scene"] .app-shell {
  display: block;
  min-height: 100svh;
}

body[data-experience="scene"] .sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  min-height: 82px;
  padding: 0 max(28px, calc((100vw - 1240px) / 2));
  border: 0;
  border-bottom: 4px solid var(--across-yellow);
  background: var(--across-white);
  box-shadow: 0 8px 24px rgba(7, 52, 95, 0.16);
}

body[data-experience="scene"] .sidebar .brand-row {
  flex: 0 0 auto;
  min-width: 0;
  gap: 14px;
}

body[data-experience="scene"] .shell-wordmark {
  display: block;
  width: 132px;
  height: auto;
  flex: 0 0 auto;
  filter: none;
}

body[data-experience="scene"] #session-role {
  color: var(--across-muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

body[data-experience="scene"] .tabs {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  gap: 22px;
  margin: 0;
}

body[data-experience="scene"] .tab {
  position: relative;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--across-muted);
  font-size: 13px;
  font-weight: 700;
  padding: 0 2px;
}

body[data-experience="scene"] .tab:hover { color: var(--across-navy); background: transparent; }
body[data-experience="scene"] .tab.is-active { color: var(--across-navy); background: transparent; }
body[data-experience="scene"] .tab.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--across-yellow);
}

body[data-experience="scene"] .session-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-experience="scene"] #session-course { display: none; }
body[data-experience="scene"] .session-card strong { color: var(--across-navy); font-size: 13px; }
body[data-experience="scene"] .session-card .secondary {
  min-height: 38px;
  border-color: #9bb1bd;
  border-radius: 6px;
  background: transparent;
  color: var(--across-navy);
  padding: 7px 12px;
}

body[data-experience="scene"] .session-card .secondary:hover {
  border-color: var(--across-navy);
  background: var(--across-navy);
  color: var(--across-white);
}

body[data-experience="scene"] .brand-logo-sidebar,
body[data-experience="scene"] .sidebar-school { display: none; }

body[data-experience="scene"] .main {
  width: 100%;
  min-height: calc(100svh - 82px);
  max-width: none;
  margin: 0;
  padding: 0 0 88px;
  background: var(--across-cloud);
}

body[data-experience="scene"] #view-root {
  width: min(1080px, calc(100% - 64px));
  margin: 0 auto;
  padding: 48px 0 72px;
}

body[data-experience="scene"] #view-root[data-view="results"] {
  width: min(1360px, calc(100% - 64px));
}

body[data-experience="scene"] .page-back {
  color: var(--across-navy);
  font-weight: 750;
}

/* Shared type and actions */
body[data-experience="scene"] h1,
body[data-experience="scene"] h2,
body[data-experience="scene"] h3,
body[data-experience="scene"] .sc-title {
  color: var(--across-ink);
  font-family: "Public Sans", system-ui, sans-serif;
  font-weight: 820;
  letter-spacing: 0;
}

body[data-experience="scene"] .sc-kicker,
body[data-experience="scene"] .eyebrow {
  color: var(--across-coral);
  font-family: "Public Sans", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
}

body[data-experience="scene"] .primary,
body[data-experience="scene"] .sc-cta {
  border-color: var(--across-navy);
  border-radius: 6px;
  background: var(--across-navy);
  color: var(--across-white);
  font-weight: 800;
  box-shadow: none;
}

body[data-experience="scene"] .primary:hover:not(:disabled),
body[data-experience="scene"] .sc-cta:hover:not(:disabled) {
  border-color: var(--across-blue);
  background: var(--across-blue);
}

/* Scenario preparation */
body[data-experience="scene"] #view-root:has(.sc-brief) {
  width: 100%;
  padding-top: 0;
}

body[data-experience="scene"] .sc-brief { width: 100%; max-width: none; }
body[data-experience="scene"] .sc-more {
  width: min(1180px, calc(100% - 64px));
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

body[data-experience="scene"] .brief-hero {
  display: grid;
  grid-template-columns: minmax(430px, 0.88fr) minmax(0, 1.12fr);
  min-height: 520px;
  background: var(--across-navy);
}

body[data-experience="scene"] .brief-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(54px, 6vw, 92px) clamp(40px, 6vw, 96px);
  color: var(--across-white);
}

body[data-experience="scene"] .brief-hero-copy .sc-kicker { margin: 0 0 18px; color: var(--across-yellow); }
body[data-experience="scene"] .brief-hero-copy .sc-title {
  max-width: 11ch;
  margin: 0;
  color: var(--across-white);
  font-size: clamp(42px, 4.4vw, 68px);
  line-height: 1.02;
  text-wrap: balance;
}

body[data-experience="scene"] .brief-hero-copy .sc-sub {
  max-width: 54ch;
  margin: 22px 0 0;
  color: var(--across-on-navy-muted);
  font-size: 17px;
  line-height: 1.6;
}

body[data-experience="scene"] .brief-person {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 34px 0 0;
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid #5c8098;
  background: transparent;
  color: var(--across-white);
}

body[data-experience="scene"] .brief-person .sc-avatar {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background: var(--across-yellow);
  color: var(--across-navy);
  font-size: 14px;
}

body[data-experience="scene"] .brief-person h3 { margin: 0; color: var(--across-white); font-size: 18px; }
body[data-experience="scene"] .brief-person p { margin: 3px 0 0; color: var(--across-on-navy-muted); font-size: 13px; }

body[data-experience="scene"] .brief-hero-media {
  position: relative;
  min-width: 0;
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  background: var(--across-line);
}

body[data-experience="scene"] .brief-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body[data-experience="scene"] .brief-hero-media figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  background: var(--across-navy);
  color: var(--across-white);
  font-size: 12px;
  font-weight: 700;
}

body[data-experience="scene"] .brief-preparation {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(310px, 0.75fr);
  gap: clamp(42px, 6vw, 84px);
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: 76px 0 60px;
}

body[data-experience="scene"] .brief-section-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body[data-experience="scene"] .brief-section-head > span,
body[data-experience="scene"] .brief-objective-number {
  color: var(--across-coral);
  font-size: 14px;
  font-weight: 850;
}

body[data-experience="scene"] .brief-section-head .sc-kicker { margin: 0; }
body[data-experience="scene"] .brief-section-head h3 {
  margin: 6px 0 0;
  color: var(--across-ink);
  font-size: 28px;
  line-height: 1.15;
}

body[data-experience="scene"] .brief-situation {
  max-width: 68ch;
  margin: 24px 0 14px 64px;
  color: var(--across-ink-2);
  font-size: 18px;
  line-height: 1.7;
}

body[data-experience="scene"] .brief-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 32px 0 0 64px;
  border: 0;
}

body[data-experience="scene"] .brief-grid section,
body[data-experience="scene"] .brief-grid section:nth-child(even) {
  min-width: 0;
  padding: 22px 0;
  border: 0;
  border-top: 1px solid var(--across-line);
}

body[data-experience="scene"] .brief-grid .lbl { color: var(--across-coral); }
body[data-experience="scene"] .brief-grid p { color: var(--across-ink-2); }

body[data-experience="scene"] .brief-objective {
  align-self: start;
  padding: 34px;
  border-top: 8px solid var(--across-navy);
  background: var(--across-yellow);
  color: var(--across-navy);
}

/* What the report reads the session for. Leclerc asked that participants know
   this before they start, so it closes the brief as a plain list. */
body[data-experience="scene"] .brief-criteria {
  width: min(1180px, calc(100% - 64px));
  margin: 28px auto 0;
  padding: 26px 30px 30px;
  border: 1px solid var(--across-line, rgba(10, 34, 64, 0.14));
  border-radius: 14px;
  background: var(--across-white, var(--across-white));
}

body[data-experience="scene"] .criteria-list {
  margin: 18px 0 0;
  display: grid;
  gap: 14px;
}

body[data-experience="scene"] .criteria-list > div {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--across-line, rgba(10, 34, 64, 0.1));
}

body[data-experience="scene"] .criteria-list > div:last-child { border-bottom: none; padding-bottom: 0; }
body[data-experience="scene"] .criteria-list dt { font-weight: 700; font-size: 15px; }
body[data-experience="scene"] .criteria-list dd { margin: 0; font-size: 15px; line-height: 1.5; opacity: 0.82; }

body[data-experience="scene"] .criteria-note {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.75;
}

@media (max-width: 720px) {
  body[data-experience="scene"] .criteria-list > div { grid-template-columns: 1fr; gap: 4px; }
}

/* The three things the conversation has to achieve. The panel asked for these
   on screen, so they read as a checklist rather than more prose. */
body[data-experience="scene"] .brief-goals {
  margin: 14px 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: brief-goal;
  display: grid;
  gap: 10px;
}

body[data-experience="scene"] .brief-goals li {
  counter-increment: brief-goal;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.45;
}

body[data-experience="scene"] .brief-goals li::before {
  content: counter(brief-goal);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--across-navy);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
}

body[data-experience="scene"] .brief-objective .brief-objective-number { color: var(--across-navy); }
body[data-experience="scene"] .brief-objective .sc-kicker { margin: 18px 0 0; color: var(--across-navy); }
body[data-experience="scene"] .brief-objective h3 {
  margin: 8px 0 0;
  color: var(--across-navy);
  font-size: 30px;
  line-height: 1.12;
}

body[data-experience="scene"] .brief-objective .brief-objective-lead {
  margin: 18px 0 0;
  color: var(--across-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}

body[data-experience="scene"] .brief-objective > p:last-of-type {
  margin: 20px 0 0;
  color: #173d5d;
  font-size: 16px;
  line-height: 1.65;
}

body[data-experience="scene"] .brief-objective .sc-cta {
  width: 100%;
  min-height: 54px;
  margin-top: 28px;
  border-color: var(--across-navy);
  background: var(--across-navy);
}

body[data-experience="scene"] .brief-objective .sc-cta svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

body[data-experience="scene"] .brief-objective .sc-cta:hover {
  border-color: var(--across-navy-press);
  background: var(--across-navy-press);
}

body[data-experience="scene"] .practice-safety-note,
body[data-experience="scene"] .sc-more .disclosure {
  border-color: var(--across-line);
  border-radius: 8px;
  box-shadow: none;
}

body[data-experience="scene"] .practice-safety-note {
  background: transparent;
  border-left: 4px solid var(--across-teal);
  padding: 14px 18px;
}

@media (max-width: 1040px) {
  body[data-experience="scene"] .brief-hero {
    grid-template-columns: minmax(390px, 0.92fr) minmax(0, 1.08fr);
  }

  body[data-experience="scene"] .brief-hero-copy {
    padding-right: 44px;
    padding-left: 44px;
  }

  body[data-experience="scene"] .brief-hero-copy .sc-title { font-size: 48px; }
  body[data-experience="scene"] .brief-preparation {
    grid-template-columns: minmax(0, 1fr) minmax(290px, 0.72fr);
    gap: 42px;
  }
}

/* Conversation */
body[data-experience="scene"] #view-root:has(.sc-chat) {
  width: min(820px, calc(100% - 48px));
  padding-top: 30px;
}

body[data-experience="scene"] .sc-chat {
  width: 100%;
  max-width: none;
  height: min(78svh, 780px);
  border: 0;
  border-radius: 10px;
  background: var(--across-white);
  box-shadow: var(--across-shadow);
}

body[data-experience="scene"] .sc-chat-head {
  padding: 15px 18px;
  border: 0;
  background: var(--across-navy);
  color: var(--across-white);
}

body[data-experience="scene"] .sc-chat-head .sc-name { color: var(--across-white); font-size: 17px; }
body[data-experience="scene"] .sc-chat-head .sc-pres { color: #a8ddd4; }
body[data-experience="scene"] .sc-chat-head .sc-av {
  border-radius: 6px;
  background: var(--across-yellow);
  color: var(--across-navy);
}
body[data-experience="scene"] .sc-chat-head .sc-text-btn { color: rgba(255, 255, 255, 0.76); }

body[data-experience="scene"] .sc-stream {
  padding: 22px 20px 12px;
  background: var(--across-mist);
}

body[data-experience="scene"] .sc-msg {
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.52;
}

body[data-experience="scene"] .sc-anna {
  border: 1px solid var(--across-line);
  border-left: 4px solid var(--across-teal);
  border-top-left-radius: 2px;
  background: var(--across-white);
}

body[data-experience="scene"] .sc-you {
  border-top-right-radius: 2px;
  background: var(--across-navy);
  color: var(--across-white);
}

body[data-experience="scene"] .sc-nudge {
  border-color: #d7e1e5;
  background: #f7fafb;
  color: var(--across-navy);
}

body[data-experience="scene"] .sc-nudge.is-closed {
  border-color: #f0d58f;
  background: #fff8e7;
}

body[data-experience="scene"] .sc-finish {
  border-color: var(--across-coral);
  border-radius: 6px;
  color: #bb3f2d;
}
body[data-experience="scene"] .sc-finish:hover:not(:disabled) { background: var(--across-coral); color: white; }

body[data-experience="scene"] .sc-composer { padding: 13px 16px 10px; }
body[data-experience="scene"] .sc-inputrow textarea {
  border-color: #bdcdd2;
  border-radius: 8px;
  background: var(--across-white);
}
body[data-experience="scene"] .sc-inputrow .voice-btn { border-radius: 6px; }
body[data-experience="scene"] .sc-send {
  border-radius: 6px;
  background: var(--across-coral);
}
body[data-experience="scene"] .sc-send:hover:not(:disabled) { background: var(--across-coral-press); }

/* Reflection */
body[data-experience="scene"] .reflection-hero {
  margin-bottom: 8px;
  padding: 0 0 0 22px;
  border-left: 7px solid var(--across-yellow);
}

body[data-experience="scene"] .reflection-hero h2 {
  color: var(--across-navy);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: 0;
}

body[data-experience="scene"] .reflection-form-card {
  border: 0;
  border-radius: 8px;
  background: var(--across-white);
  box-shadow: var(--across-shadow);
}

body[data-experience="scene"] .reflection-form-head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--across-line);
}

body[data-experience="scene"] .reflection-form-head h3 { color: var(--across-navy); }
body[data-experience="scene"] .status-pill {
  border-color: #b7dcd4;
  background: #e5f5f1;
  color: #17675e;
}
body[data-experience="scene"] .prompt-index { color: var(--across-coral); }
body[data-experience="scene"] .reflection-question label {
  color: var(--across-ink);
  font-family: "Public Sans", system-ui, sans-serif;
  font-weight: 760;
}
body[data-experience="scene"] .reflection-question textarea { border-color: #c8d6da; }

/* Results */
body[data-experience="scene"] .sc-debrief,
body[data-experience="scene"] .sc-more:has(.assessment-record) {
  width: 100%;
  max-width: none;
}

body[data-experience="scene"] .sc-debrief .sc-title {
  max-width: 800px;
  color: var(--across-navy);
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.03;
}

body[data-experience="scene"] .sc-debrief .sc-lead { max-width: 720px; font-size: 17px; }
body[data-experience="scene"] .sc-debrief .sc-card {
  border: 1px solid var(--across-line);
  border-radius: 8px;
  box-shadow: none;
}
/* The assessment cards each carried a 6px rail in a different colour -- gold,
   teal, blue, coral, navy -- and the colour encoded nothing: it was not
   severity, not sequence, not section. Five rounded cards with five coloured
   bars is decoration standing in for hierarchy, and it is the first thing a
   reader clocks as generated. Hierarchy comes from the type and the score
   itself; the cards keep their hairline border. */
body[data-experience="scene"] .sc-debrief .score-card { border-top: 1px solid var(--across-line); }
body[data-experience="scene"] .sc-dim .track { height: 9px; background: #e7eef0; }
body[data-experience="scene"] .sc-dim .track i { background: var(--across-blue); }
body[data-experience="scene"] .sc-actions .sc-cta:not(.ghost) { background: var(--across-coral); border-color: var(--across-coral); }

/* The experience survey replaces both the reflection step and the one-tap
   pulse: one feedback moment, on the report, where the score is in view. */
body[data-experience="scene"] .experience-survey {
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.3fr);
  gap: 28px;
  align-items: start;
  margin-top: 22px;
  padding: 22px 24px;
  border-top: 1px solid var(--across-line);
  background: var(--across-white);
  box-shadow: 0 8px 22px rgba(7, 52, 95, 0.08);
}
body[data-experience="scene"] .experience-survey .sc-kicker { margin: 0; color: var(--across-coral); }
body[data-experience="scene"] .experience-survey h3 {
  margin: 4px 0 0;
  color: var(--across-navy);
  font-size: 20px;
}
body[data-experience="scene"] .experience-survey-copy { position: sticky; top: 18px; }
body[data-experience="scene"] .experience-survey-copy > p:last-child,
body[data-experience="scene"] .experience-survey.is-saved > p {
  margin: 6px 0 0;
  color: var(--across-ink-3);
  font-size: 13px;
}

body[data-experience="scene"] .experience-survey-form { display: grid; gap: 18px; }
body[data-experience="scene"] .survey-q { margin: 0; padding: 0; border: 0; min-width: 0; }
body[data-experience="scene"] .survey-q legend,
body[data-experience="scene"] .survey-q > label {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  color: var(--across-navy);
  font-size: 13px;
  font-weight: 700;
}
body[data-experience="scene"] .survey-q > label span { color: var(--across-muted); font-weight: 400; }

body[data-experience="scene"] .survey-choices { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-experience="scene"] .survey-choices label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 13px;
  border: 1px solid var(--across-control-edge);
  border-radius: 999px;
  background: var(--across-white);
  color: var(--across-navy);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
body[data-experience="scene"] .survey-choices label:hover { border-color: var(--across-blue); background: #eef6f8; }
body[data-experience="scene"] .survey-choices input { margin: 0; accent-color: var(--across-blue); }
body[data-experience="scene"] .survey-choices label:has(input:checked) {
  border-color: var(--across-blue);
  background: #eef6f8;
  box-shadow: inset 0 0 0 1px var(--across-blue);
}
body[data-experience="scene"] .survey-choices label:has(input:focus-visible) {
  outline: 3px solid var(--across-yellow);
  outline-offset: 2px;
}
body[data-experience="scene"] .survey-q.is-scale .survey-choices label { min-width: 54px; justify-content: center; }

body[data-experience="scene"] .experience-survey-form textarea,
body[data-experience="scene"] .experience-survey-form input[type="text"] {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #b7c9d2;
  border-radius: 4px;
  color: var(--across-navy);
  font: inherit;
  resize: vertical;
}
body[data-experience="scene"] .experience-survey-form textarea:focus-visible,
body[data-experience="scene"] .experience-survey-form input[type="text"]:focus-visible {
  outline: 3px solid var(--across-yellow);
  outline-offset: 2px;
}
body[data-experience="scene"] .experience-survey-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
body[data-experience="scene"] .experience-survey-submit .sc-cta { background: var(--across-coral); border-color: var(--across-coral); }
body[data-experience="scene"] .experience-survey-submit .sc-cta:disabled { cursor: wait; opacity: 0.62; }
body[data-experience="scene"] .experience-survey-status { min-height: 18px; margin: 0; color: var(--across-muted); font-size: 12px; }
body[data-experience="scene"] .experience-survey.is-saved { grid-template-columns: 1fr auto; align-items: center; }

body[data-experience="scene"] .result-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 26px;
}

body[data-experience="scene"] .result-report-grid .sc-card {
  margin: 0;
  padding: 22px;
}

body[data-experience="scene"] .result-supporting {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
}

body[data-experience="scene"] .result-supporting > .anna-outcome-card {
  grid-column: 1 / -1;
}

body[data-experience="scene"] .score-card .score-rows {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

body[data-experience="scene"] .score-card .score-row {
  min-width: 0;
  padding: 0 22px;
  border-left: 1px solid var(--across-line);
}

body[data-experience="scene"] .score-card .score-row:first-child {
  padding-left: 0;
  border-left: 0;
}

body[data-experience="scene"] .score-card .score-row:last-child {
  padding-right: 0;
}

body[data-experience="scene"] .anna-action-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 12px 0 24px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--across-line);
}

body[data-experience="scene"] .anna-action-list li {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--across-line);
}

body[data-experience="scene"] .anna-action-list span,
body[data-experience="scene"] .anna-action-list small {
  color: var(--across-muted);
}

body[data-experience="scene"] .anna-report-quotes {
  margin: 22px 0;
}

body[data-experience="scene"] .anna-report-quotes blockquote {
  margin: 10px 0;
  padding-left: 14px;
  border-left: 3px solid var(--across-yellow);
}

body[data-experience="scene"] .anna-report-followups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--across-line);
}

body[data-experience="scene"] .anna-report-followups ul {
  margin-bottom: 0;
}

body[data-experience="scene"] .anna-debrief-label {
  margin-top: 20px;
}

@media (max-width: 900px) {
  body[data-experience="scene"] .result-supporting,
  body[data-experience="scene"] .score-card .score-rows,
  body[data-experience="scene"] .anna-action-list,
  body[data-experience="scene"] .anna-report-followups {
    grid-template-columns: 1fr;
  }

  body[data-experience="scene"] .score-card .score-row {
    padding: 16px 0 0;
    border-top: 1px solid var(--across-line);
    border-left: 0;
  }

  body[data-experience="scene"] .score-card .score-row:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

body[data-experience="scene"] .assessment-record {
  margin: 0;
  padding: 30px 24px;
  border-color: var(--across-line);
}

body[data-experience="scene"] .assessment-disclosure {
  margin-top: 48px;
}

body[data-experience="scene"] .assessment-disclosure > summary {
  min-height: 76px;
}
body[data-experience="scene"] .assessment-record h3 {
  color: var(--across-navy);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 820;
}

body[data-experience="scene"] .sc-more .keyline .label {
  color: var(--across-blue-text);
}

@media (max-width: 1100px) {
  body[data-experience="scene"] .landing-view::after { width: 100%; background: rgba(3, 39, 70, 0.84); }
  .landing-message { width: min(600px, 58%); }
  body[data-experience="scene"] .landing-copy #landing-title { font-size: 46px; }
}

@media (max-width: 820px) {
  body[data-experience="scene"] .landing-view { background-position: 24% center; }
  body[data-experience="scene"] .landing-view::before { background: rgba(2, 28, 51, 0.1); }
  body[data-experience="scene"] .landing-view::after { width: 100%; background: rgba(3, 39, 70, 0.84); }
  body[data-experience="scene"] .landing-copy.ld {
    width: calc(100% - 40px);
    padding: 20px 0 18px;
  }
  body[data-experience="scene"] .ld-brand-lockup { min-height: 68px; }
  body[data-experience="scene"] .landing-copy .across-logo { width: 150px; }
  body[data-experience="scene"] .ld-brand-descriptor { display: none; }
  .landing-message { width: min(620px, 100%); }
  body[data-experience="scene"] .landing-copy #landing-title { font-size: 46px; }

  body[data-experience="scene"] #access-screen:has(#login-view:not([hidden])) {
    padding: 28px 24px 48px;
    background-position: 62% center;
  }

  body[data-experience="scene"] #login-view.access-panel {
    grid-template-columns: 1fr;
    gap: 40px;
    width: min(680px, 100%);
    min-height: 0;
  }

  body[data-experience="scene"] .onboarding-story { max-width: none; }
  body[data-experience="scene"] .login-topline { margin-bottom: 56px; }
  body[data-experience="scene"] .login-header h1 { font-size: clamp(48px, 10vw, 68px); }
  body[data-experience="scene"] .onboarding-sequence { max-width: 600px; }

  body[data-experience="scene"] .sidebar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 0;
    padding: 14px 18px 0;
  }
  body[data-experience="scene"] .sidebar .brand-row { grid-column: 1; grid-row: 1; }
  body[data-experience="scene"] .session-card { grid-column: 2; grid-row: 1; }
  body[data-experience="scene"] .session-card strong { display: none; }
  body[data-experience="scene"] .tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
  }
  body[data-experience="scene"] .tab { min-height: 46px; white-space: nowrap; }
  body[data-experience="scene"] #view-root { width: min(100% - 36px, 1080px); padding-top: 34px; }

  body[data-experience="scene"] .brief-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  body[data-experience="scene"] .brief-hero-media {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  body[data-experience="scene"] .brief-hero-copy { padding: 42px max(24px, calc((100vw - 680px) / 2)); }
  body[data-experience="scene"] .brief-hero-copy .sc-title { max-width: 13ch; font-size: 46px; }
  body[data-experience="scene"] .brief-preparation {
    grid-template-columns: 1fr;
    width: min(680px, calc(100% - 40px));
    padding: 52px 0 44px;
  }
  body[data-experience="scene"] .brief-objective { padding: 30px; }
  body[data-experience="scene"] .sc-more { width: min(680px, calc(100% - 40px)); }
}

@media (max-width: 560px) {
  body[data-experience="scene"] .landing-view { background-position: 18% center; }
  body[data-experience="scene"] .landing-copy.ld {
    grid-template-rows: auto minmax(min-content, 1fr) auto auto;
    min-height: 100svh;
    padding: 16px 0 8px;
  }
  body[data-experience="scene"] .landing-copy .ld-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(132px, 150px);
    gap: 14px;
    padding-bottom: 12px;
  }
  body[data-experience="scene"] .ld-brand-lockup { min-height: 58px; padding: 8px 16px 8px 0; }
  body[data-experience="scene"] .landing-copy .across-logo { width: 138px; padding: 0; }
  body[data-experience="scene"] .ld-pilot {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 9px 10px 9px 15px;
    white-space: normal;
  }
  body[data-experience="scene"] .ld-pilot span { font-size: 12px; }
  body[data-experience="scene"] .ld-pilot strong { font-size: 12px; }
  .landing-message { width: 100%; margin: 8px 0; }
  body[data-experience="scene"] .landing-copy .eyebrow { margin-bottom: 8px; padding: 4px 6px; font-size: 12px; }
  body[data-experience="scene"] .landing-copy #landing-title { max-width: none; font-size: 34px; }
  body[data-experience="scene"] .landing-copy .landing-lede { max-width: none; margin-top: 10px; font-size: 15px; line-height: 1.35; }
  body[data-experience="scene"] .landing-points { grid-template-columns: 1fr; margin-top: 10px; gap: 6px; }
  body[data-experience="scene"] .landing-points li,
  body[data-experience="scene"] .landing-points li:first-child {
    padding: 6px 0 6px 30px;
    border-left: 0;
    font-size: 13px;
    line-height: 1.3;
  }
  body[data-experience="scene"] .landing-points li::before { top: 7px; }
  body[data-experience="scene"] .landing-points li + li { border-top: 1px solid rgba(255, 255, 255, 0.18); }
  body[data-experience="scene"] .landing-points strong { display: inline; margin-right: 0.2em; }
  body[data-experience="scene"] .landing-copy .landing-actions { grid-row: 3; }
  body[data-experience="scene"] .landing-copy .ld-attribution {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: start;
    max-width: 40ch;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.3;
    text-align: left;
  }

  body[data-experience="scene"] #access-screen:has(#login-view:not([hidden])) {
    padding: 20px 18px 38px;
  }

  body[data-experience="scene"] .login-topline {
    margin-bottom: 46px;
  }

  body[data-experience="scene"] .login-logo { width: 154px; }
  body[data-experience="scene"] .login-header { margin-bottom: 24px; }
  body[data-experience="scene"] .login-header h1 {
    max-width: 10ch;
    font-size: 48px;
  }
  body[data-experience="scene"] .login-header p:last-child { font-size: 16px; }
  body[data-experience="scene"] .onboarding-sequence li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 14px 0;
  }
  body[data-experience="scene"] .prototype-note { margin-top: 18px; }
  body[data-experience="scene"] .onboarding-entry { padding: 25px 20px; }
  body[data-experience="scene"] .onboarding-entry h2 { font-size: 29px; }

  body[data-experience="scene"] .sidebar .brand-row { gap: 10px; }
  body[data-experience="scene"] .shell-wordmark { width: 112px; }
  body[data-experience="scene"] #session-role { display: none; }
  body[data-experience="scene"] .session-card .secondary { font-size: 0; width: 38px; padding: 0; }
  body[data-experience="scene"] .session-card .secondary::before { content: "Exit"; font-size: 12px; }
  body[data-experience="scene"] .tabs { gap: 4px; }
  body[data-experience="scene"] .tab { font-size: 12px; }

  body[data-experience="scene"] .brief-hero-media { aspect-ratio: 4 / 3; }
  body[data-experience="scene"] .brief-hero-media img { object-position: 57% center; }
  body[data-experience="scene"] .brief-hero-copy { padding: 34px 20px 38px; }
  body[data-experience="scene"] .brief-hero-copy .sc-title { font-size: 38px; }
  body[data-experience="scene"] .brief-hero-copy .sc-sub { font-size: 16px; }
  body[data-experience="scene"] .brief-person { padding: 20px 0 0; }
  body[data-experience="scene"] .brief-preparation { width: calc(100% - 36px); gap: 34px; padding-top: 42px; }
  body[data-experience="scene"] .brief-stakes { width: calc(100% - 36px); padding-top: 34px; }
  body[data-experience="scene"] .brief-criteria { width: calc(100% - 36px); padding: 22px 20px 24px; }
  body[data-experience="scene"] .stakes-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 44px; }
  body[data-experience="scene"] .stakes-figures li:nth-child(2) { border-right: 0; padding-right: 0; }
  body[data-experience="scene"] .stakes-figures li:nth-child(n+3) { border-top: 1px solid var(--across-line); }
  body[data-experience="scene"] .stakes-context { margin-left: 44px; }
  body[data-experience="scene"] .brief-section-head { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  body[data-experience="scene"] .brief-section-head h3 { font-size: 25px; }
  body[data-experience="scene"] .brief-situation { margin-left: 44px; font-size: 17px; }
  body[data-experience="scene"] .brief-grid { grid-template-columns: 1fr; margin-left: 44px; }
  body[data-experience="scene"] .brief-grid section,
  body[data-experience="scene"] .brief-grid section:nth-child(even),
  body[data-experience="scene"] .brief-grid section:nth-child(3),
  body[data-experience="scene"] .brief-grid section:nth-child(4) { padding: 18px 0; }
  body[data-experience="scene"] .brief-objective { padding: 26px 22px; }
  body[data-experience="scene"] .brief-objective h3 { font-size: 27px; }
  body[data-experience="scene"] .sc-more { width: calc(100% - 36px); }

  body[data-experience="scene"] #view-root:has(.sc-chat) { width: calc(100% - 24px); padding-top: 20px; }
  body[data-experience="scene"] .sc-chat { height: min(76svh, 700px); }
  body[data-experience="scene"] .sc-stream { padding: 18px 13px 10px; }
  body[data-experience="scene"] .sc-msg { max-width: 91%; font-size: 14px; }

  body[data-experience="scene"] .reflection-hero { padding-left: 16px; }
  body[data-experience="scene"] .reflection-hero h2 { font-size: 38px; }
  body[data-experience="scene"] .reflection-form-card { padding: 22px 18px; }
  body[data-experience="scene"] .reflection-question-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body[data-experience="scene"] .sc-debrief .sc-title { font-size: 38px; }
  body[data-experience="scene"] .sc-actions { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  body[data-experience="scene"] .landing-copy.ld { padding: 12px 0 6px; }
  body[data-experience="scene"] .ld-brand-lockup { min-height: 52px; padding-right: 12px; }
  body[data-experience="scene"] .landing-copy .across-logo { width: 128px; padding: 0; }
  body[data-experience="scene"] .landing-copy .eyebrow { margin-bottom: 6px; font-size: 12px; }
  body[data-experience="scene"] .landing-copy #landing-title { font-size: 30px; }
  body[data-experience="scene"] .landing-copy .landing-lede { margin-top: 6px; font-size: 14px; line-height: 1.3; }
  body[data-experience="scene"] .landing-points { margin-top: 6px; gap: 0; }
  body[data-experience="scene"] .landing-points li,
  body[data-experience="scene"] .landing-points li:first-child {
    padding: 4px 0 4px 28px;
    font-size: 12px;
    line-height: 1.25;
  }
  body[data-experience="scene"] .landing-points li::before { top: 5px; }
  body[data-experience="scene"] .landing-copy .ld-attribution { margin-top: 6px; font-size: 12px; }
}

@media (max-width: 340px) {
  body[data-experience="scene"] .landing-copy.ld {
    width: calc(100% - 28px);
    padding: 10px 0 8px;
  }
  body[data-experience="scene"] .landing-copy .ld-top {
    grid-template-columns: minmax(0, 1fr) 134px;
    gap: 10px;
  }
  body[data-experience="scene"] .landing-copy .across-logo { width: 116px; padding: 0; }
  body[data-experience="scene"] .ld-pilot {
    max-width: none;
    padding: 7px 8px 7px 13px;
  }
  body[data-experience="scene"] .ld-pilot strong { font-size: 12px; }
  .landing-message { margin: 4px 0; }
  body[data-experience="scene"] .landing-copy .eyebrow {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.3;
  }
  body[data-experience="scene"] .landing-copy #landing-title { font-size: 28px; }
  body[data-experience="scene"] .landing-copy .landing-lede {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.3;
  }
  body[data-experience="scene"] .landing-points { margin-top: 6px; gap: 4px; }
  body[data-experience="scene"] .landing-points li { padding-left: 28px; font-size: 12px; line-height: 1.3; }
  body[data-experience="scene"] .landing-copy .ld-attribution { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-experience="scene"] .landing-copy #open-login:hover { transform: none; }
}

@media print {
  body[data-experience="scene"] .sidebar { display: none !important; }
  body[data-experience="scene"] #view-root { width: 100%; padding: 0; }
}

/* Leclerc asked that the company and launch context be visible rather than
   folded into an optional disclosure: a participant who has not felt the
   clock writes a different first message. The figures carry the urgency at a
   glance; the prose below them carries the detail. */
body[data-experience="scene"] .brief-stakes {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: 38px 0 6px;
}

body[data-experience="scene"] .stakes-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 26px 0 0 64px;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--across-coral);
}

body[data-experience="scene"] .stakes-figures li {
  min-width: 0;
  padding: 18px 26px 18px 0;
  border-right: 1px solid var(--across-line);
}

body[data-experience="scene"] .stakes-figures li:last-child {
  padding-right: 0;
  border-right: 0;
}

body[data-experience="scene"] .stakes-figures strong {
  display: block;
  color: var(--across-navy);
  font-size: clamp(26px, 2.3vw, 34px);
  font-weight: 850;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

body[data-experience="scene"] .stakes-figures span {
  display: block;
  margin-top: 8px;
  color: #56707f;
  font-size: 13px;
  line-height: 1.45;
}

body[data-experience="scene"] .stakes-context {
  max-width: 76ch;
  margin: 26px 0 0 64px;
}

body[data-experience="scene"] .stakes-context p {
  margin: 0 0 14px;
  color: var(--across-ink-2);
  font-size: 16px;
  line-height: 1.7;
}

body[data-experience="scene"] .stakes-context p:last-child { margin-bottom: 0; }

/* Anna's launch brief is a decision-support view: the first screen carries
   the clock, exposure, and validation status; narrative detail stays nearby. */
body[data-experience="scene"] .launch-dashboard {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  padding: 48px 0 0;
}

body[data-experience="scene"] .launch-glance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
  padding: 0 0 36px;
}

body[data-experience="scene"] .launch-glance-copy .sc-kicker {
  margin: 0 0 10px;
  color: var(--across-coral);
}

body[data-experience="scene"] .launch-glance-copy .sc-title {
  max-width: 15ch;
  margin: 0;
  color: var(--across-ink);
  font-size: clamp(38px, 4.2vw, 54px);
  font-weight: 780;
  line-height: 1.04;
}

body[data-experience="scene"] .launch-glance-copy .sc-sub {
  max-width: 58ch;
  margin: 18px 0 0;
  color: #3e5969;
  font-size: 18px;
  line-height: 1.6;
}

body[data-experience="scene"] .launch-person {
  min-width: 0;
  padding: 4px 0 4px 24px;
  border-left: 4px solid var(--across-yellow);
}

body[data-experience="scene"] .launch-person span,
body[data-experience="scene"] .launch-person small {
  display: block;
  color: var(--across-muted);
  font-size: 12px;
  line-height: 1.35;
}

body[data-experience="scene"] .launch-person strong {
  display: block;
  margin: 5px 0 4px;
  color: var(--across-navy);
  font-size: 19px;
  line-height: 1.25;
}

body[data-experience="scene"] .launch-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--across-line);
  border-bottom: 1px solid var(--across-line);
}

body[data-experience="scene"] .launch-metric {
  min-width: 0;
  padding: 23px clamp(18px, 2.4vw, 30px);
  border-left: 1px solid var(--across-line);
}

body[data-experience="scene"] .launch-metric:first-child { padding-left: 0; border-left: 0; }
body[data-experience="scene"] .launch-metric:last-child { padding-right: 0; }

body[data-experience="scene"] .launch-metric strong {
  display: block;
  color: var(--across-navy);
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 780;
  line-height: 1.1;
}

body[data-experience="scene"] .launch-metric.is-urgent strong { color: var(--across-coral); }

body[data-experience="scene"] .launch-metric > span {
  display: block;
  max-width: 20ch;
  margin-top: 8px;
  color: #4f6878;
  font-size: 13px;
  line-height: 1.4;
}

body[data-experience="scene"] .launch-timeline {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  margin: 0;
  padding: 34px 0 38px;
  border-bottom: 1px solid var(--across-line);
}

body[data-experience="scene"] .launch-section-label > span {
  display: block;
  color: var(--across-coral);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-experience="scene"] .launch-section-label h3 {
  margin: 5px 0 0;
  color: var(--across-ink);
  font-size: 23px;
  font-weight: 750;
  line-height: 1.2;
}

body[data-experience="scene"] .launch-timeline ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

body[data-experience="scene"] .launch-timeline ol::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 11%;
  left: 1%;
  height: 2px;
  background: #b8cbd1;
}

body[data-experience="scene"] .launch-timeline li {
  position: relative;
  min-width: 0;
  padding: 22px 22px 0 0;
}

body[data-experience="scene"] .timeline-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border: 3px solid var(--across-cloud);
  border-radius: 50%;
  background: var(--across-blue);
  box-shadow: 0 0 0 1px var(--across-blue);
}

body[data-experience="scene"] .launch-timeline .is-delayed .timeline-marker {
  background: var(--across-coral);
  box-shadow: 0 0 0 1px var(--across-coral);
}

body[data-experience="scene"] .launch-timeline li strong,
body[data-experience="scene"] .launch-timeline li > span:not(.timeline-marker) {
  display: block;
}

body[data-experience="scene"] .launch-timeline li strong {
  color: var(--across-navy);
  font-size: 14px;
}

body[data-experience="scene"] .launch-timeline li > span:not(.timeline-marker) {
  margin-top: 4px;
  color: var(--across-muted);
  font-size: 13px;
  line-height: 1.4;
}

body[data-experience="scene"] .launch-decision-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(380px, 1.15fr);
  gap: 42px 72px;
  margin: 50px 0 0;
}

body[data-experience="scene"] .launch-decision-grid > section {
  min-width: 0;
  padding: 24px 0 0;
  border-top: 3px solid var(--across-navy);
}

body[data-experience="scene"] .launch-decision-grid > section:first-child {
  grid-column: 1;
  grid-row: 1;
}

body[data-experience="scene"] .launch-decision-grid > .launch-risk {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 24px 30px 30px;
  border-top-color: var(--across-coral);
  background: var(--across-white);
}

body[data-experience="scene"] .launch-decision-grid > .launch-opportunity {
  grid-column: 1;
  grid-row: 2;
}

body[data-experience="scene"] .launch-decision-grid ul {
  display: grid;
  gap: 0;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

body[data-experience="scene"] .committed-list {
  grid-template-columns: 1fr;
}

body[data-experience="scene"] .committed-list li {
  position: relative;
  padding: 7px 0 7px 22px;
  color: #354f5e;
  font-size: 14px;
  line-height: 1.5;
}

body[data-experience="scene"] .committed-list li::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  width: 8px;
  height: 5px;
  border-bottom: 2px solid var(--across-teal);
  border-left: 2px solid var(--across-teal);
  transform: rotate(-45deg);
}

body[data-experience="scene"] .launch-risk li {
  display: grid;
  grid-template-columns: minmax(115px, 0.75fr) minmax(0, 1.5fr);
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--across-line);
  color: #4b6473;
  font-size: 14px;
  line-height: 1.45;
}

body[data-experience="scene"] .launch-risk li:last-child { border-bottom: 0; }
body[data-experience="scene"] .launch-risk li strong { color: var(--across-ink); }

body[data-experience="scene"] .opportunity-list {
  margin: 18px 0 0;
}

body[data-experience="scene"] .opportunity-list > div {
  display: grid;
  grid-template-columns: minmax(115px, auto) 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--across-line);
}

body[data-experience="scene"] .opportunity-list > div:last-child { border-bottom: 0; }
body[data-experience="scene"] .opportunity-list dt {
  color: var(--across-navy);
  font-size: 25px;
  font-weight: 850;
  line-height: 1.15;
}

body[data-experience="scene"] .opportunity-list dd {
  margin: 0;
  color: var(--across-muted);
  font-size: 13px;
}

body[data-experience="scene"] .full-background {
  margin: 34px 0 0;
  border-top: 1px solid var(--across-line);
  border-bottom: 1px solid var(--across-line);
}

body[data-experience="scene"] .full-background summary {
  min-height: 64px;
  padding: 13px 4px;
  color: var(--across-navy);
  cursor: pointer;
}

body[data-experience="scene"] .full-background summary > span,
body[data-experience="scene"] .full-background summary strong,
body[data-experience="scene"] .full-background summary small {
  display: block;
}

body[data-experience="scene"] .full-background summary strong { font-size: 15px; }
body[data-experience="scene"] .full-background summary small {
  margin-top: 3px;
  color: var(--across-muted);
  font-size: 12px;
  font-weight: 400;
}

body[data-experience="scene"] .full-background summary:focus-visible {
  outline: 3px solid var(--across-yellow);
  outline-offset: 3px;
}

body[data-experience="scene"] .full-background-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding: 8px 4px 28px;
}

body[data-experience="scene"] .full-background-body h3 {
  margin: 0 0 8px;
  color: var(--across-ink);
  font-size: 15px;
}

body[data-experience="scene"] .full-background-body p {
  margin: 0;
  color: #425c6b;
  font-size: 13px;
  line-height: 1.6;
}

body[data-experience="scene"] .launch-dashboard + .brief-preparation { padding-top: 54px; }
body[data-experience="scene"] .brief-criteria { border-radius: 8px; }

@media (max-width: 900px) {
  body[data-experience="scene"] .launch-dashboard { width: min(680px, calc(100% - 40px)); }
  body[data-experience="scene"] .launch-glance { grid-template-columns: 1fr; gap: 22px; }
  body[data-experience="scene"] .launch-person { max-width: 420px; }
  body[data-experience="scene"] .launch-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-experience="scene"] .launch-decision-grid { grid-template-columns: 1fr; gap: 28px; }
  body[data-experience="scene"] .launch-decision-grid > section,
  body[data-experience="scene"] .launch-decision-grid > section:first-child,
  body[data-experience="scene"] .launch-decision-grid > .launch-risk,
  body[data-experience="scene"] .launch-decision-grid > .launch-opportunity {
    grid-column: 1;
    grid-row: auto;
    padding: 22px 0 28px;
    border: 0;
    border-top: 3px solid var(--across-navy);
    background: transparent;
  }
  body[data-experience="scene"] .launch-decision-grid > .launch-risk { border-top-color: var(--across-coral); }
  body[data-experience="scene"] .full-background-body { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 560px) {
  body[data-experience="scene"] .launch-dashboard { width: calc(100% - 36px); padding-top: 30px; }
  body[data-experience="scene"] .launch-glance-copy .sc-title { font-size: 34px; }
  body[data-experience="scene"] .launch-glance-copy .sc-sub { font-size: 16px; }
  body[data-experience="scene"] .launch-person { padding-left: 14px; }
  body[data-experience="scene"] .launch-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-experience="scene"] .launch-metric,
  body[data-experience="scene"] .launch-metric:first-child,
  body[data-experience="scene"] .launch-metric:last-child {
    padding: 18px 12px;
    border-left: 0;
  }
  body[data-experience="scene"] .launch-metric:nth-child(even) { border-left: 1px solid var(--across-line); }
  body[data-experience="scene"] .launch-metric:nth-child(n+3) { border-top: 1px solid var(--across-line); }
  body[data-experience="scene"] .launch-metric strong { font-size: 25px; }
  body[data-experience="scene"] .launch-timeline { grid-template-columns: 1fr; gap: 10px; }
  body[data-experience="scene"] .launch-timeline ol { grid-template-columns: 1fr; gap: 0; margin-top: 18px; }
  body[data-experience="scene"] .launch-timeline ol::before {
    top: 7px;
    right: auto;
    bottom: 18px;
    left: 7px;
    width: 2px;
    height: auto;
  }
  body[data-experience="scene"] .launch-timeline li { padding: 0 0 24px 34px; }
  body[data-experience="scene"] .launch-risk li { grid-template-columns: 1fr; gap: 2px; }
  body[data-experience="scene"] .opportunity-list > div { grid-template-columns: minmax(110px, auto) 1fr; gap: 12px; }
  body[data-experience="scene"] .full-background summary { min-height: 72px; }
}

/* Launch story: urgency comes from a causal sequence, not a collection of
   dashboard tiles. The image establishes the room; the sections below explain
   what changed, how little runway remains, and where the business impact lands. */
body[data-experience="scene"] .launch-brief {
  width: 100%;
  color: var(--across-ink);
}

body[data-experience="scene"] .launch-hero {
  position: relative;
  min-height: 640px;
  margin: 0;
  overflow: hidden;
  background: var(--across-navy);
  color: var(--across-white);
}

body[data-experience="scene"] .launch-hero > img,
body[data-experience="scene"] .launch-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body[data-experience="scene"] .launch-hero > img {
  object-fit: cover;
  object-position: center;
}

body[data-experience="scene"] .launch-hero-shade {
  background: rgba(2, 28, 50, 0.78);
}

body[data-experience="scene"] .launch-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(1180px, calc(100% - 64px));
  min-height: 640px;
  margin: 0 auto;
  padding: 56px 0 48px;
}

body[data-experience="scene"] .launch-hero-inner .sc-kicker {
  margin: 0 0 15px;
  color: var(--across-yellow);
  font-size: 13px;
}

body[data-experience="scene"] .launch-hero-inner .sc-title {
  max-width: 14ch;
  margin: 0;
  color: var(--across-white);
  font-size: 62px;
  font-weight: 840;
  line-height: 1.02;
  text-wrap: balance;
}

body[data-experience="scene"] .launch-hero-inner .sc-sub {
  max-width: 67ch;
  margin: 22px 0 0;
  color: #f2f7f8;
  font-size: 18px;
  line-height: 1.62;
}

body[data-experience="scene"] .launch-hero-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(700px, 100%);
  margin: 28px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

body[data-experience="scene"] .launch-hero-facts > div {
  padding: 18px 24px 19px 0;
}

body[data-experience="scene"] .launch-hero-facts > div + div {
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}

body[data-experience="scene"] .launch-hero-facts dt {
  color: var(--across-yellow);
  font-size: 31px;
  font-weight: 850;
  line-height: 1.05;
}

body[data-experience="scene"] .launch-hero-facts dd {
  margin: 6px 0 0;
  color: var(--across-white);
  font-size: 13px;
  line-height: 1.4;
}

body[data-experience="scene"] .launch-hero .launch-person {
  display: grid;
  grid-template-columns: minmax(138px, auto) minmax(0, 1fr);
  gap: 5px 18px;
  align-items: baseline;
  width: min(700px, 100%);
  margin: 24px 0 0;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 4px solid var(--across-yellow);
  color: var(--across-white);
}

body[data-experience="scene"] .launch-hero .launch-person span {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--across-on-navy-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-experience="scene"] .launch-hero .launch-person strong {
  margin: 0;
  color: var(--across-white);
  font-size: 18px;
}

body[data-experience="scene"] .launch-hero .launch-person small {
  color: var(--across-on-navy-muted);
  font-size: 12px;
}

body[data-experience="scene"] .launch-hero figcaption {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 14px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 700;
}

body[data-experience="scene"] .launch-incident,
body[data-experience="scene"] .launch-business {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
}

body[data-experience="scene"] .launch-incident {
  padding: 68px 0 76px;
}

body[data-experience="scene"] .launch-story-head {
  max-width: 790px;
}

body[data-experience="scene"] .launch-story-head .sc-kicker {
  margin: 0 0 10px;
  color: var(--across-coral);
}

body[data-experience="scene"] .launch-story-head h3 {
  margin: 0;
  color: var(--across-ink);
  font-size: 38px;
  font-weight: 820;
  line-height: 1.12;
  text-wrap: balance;
}

body[data-experience="scene"] .launch-story-head > p:last-child {
  max-width: 68ch;
  margin: 15px 0 0;
  color: #3f5968;
  font-size: 16px;
  line-height: 1.65;
}

body[data-experience="scene"] .incident-chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

body[data-experience="scene"] .incident-chain::before {
  content: "";
  position: absolute;
  top: 23px;
  right: 11%;
  left: 2%;
  height: 2px;
  background: #afc4cc;
}

body[data-experience="scene"] .incident-chain li {
  position: relative;
  min-width: 0;
  padding-top: 66px;
}

body[data-experience="scene"] .incident-chain li > span {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 5px solid var(--across-cloud);
  border-radius: 50%;
  background: var(--across-navy);
  color: var(--across-white);
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 0 0 2px var(--across-navy);
}

body[data-experience="scene"] .incident-chain li:nth-child(2) > span {
  background: var(--across-coral);
  box-shadow: 0 0 0 2px var(--across-coral);
}

body[data-experience="scene"] .incident-chain strong {
  display: block;
  color: var(--across-navy);
  font-size: 16px;
}

body[data-experience="scene"] .incident-chain p {
  margin: 8px 0 0;
  color: #4a6371;
  font-size: 13px;
  line-height: 1.55;
}

body[data-experience="scene"] .launch-pressure {
  background: var(--across-navy);
  color: var(--across-white);
}

body[data-experience="scene"] .launch-pressure-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: 76px;
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: 68px 0 72px;
}

body[data-experience="scene"] .launch-story-head.is-inverse h3,
body[data-experience="scene"] .launch-impact h3 {
  color: var(--across-white);
}

body[data-experience="scene"] .launch-story-head.is-inverse > p:last-child {
  color: #c9dce5;
}

body[data-experience="scene"] .launch-story-head.is-inverse .sc-kicker,
body[data-experience="scene"] .launch-impact .sc-kicker {
  color: var(--across-yellow);
}

body[data-experience="scene"] .runway-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

body[data-experience="scene"] .runway-line::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 8%;
  left: 1%;
  height: 2px;
  background: #7091a4;
}

body[data-experience="scene"] .runway-line li {
  position: relative;
  min-width: 0;
  padding: 28px 12px 0 0;
}

body[data-experience="scene"] .runway-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 3px solid var(--across-navy);
  border-radius: 50%;
  background: var(--across-blue);
  box-shadow: 0 0 0 2px #8bcfe6;
}

body[data-experience="scene"] .runway-line li:first-child .runway-marker {
  background: var(--across-coral);
  box-shadow: 0 0 0 2px #ff8c7a;
}

body[data-experience="scene"] .runway-line strong,
body[data-experience="scene"] .runway-line small {
  display: block;
}

body[data-experience="scene"] .runway-line strong {
  color: var(--across-white);
  font-size: 15px;
}

body[data-experience="scene"] .runway-line small {
  margin-top: 5px;
  color: #b9d0dc;
  font-size: 12px;
  line-height: 1.4;
}

body[data-experience="scene"] .runway-line em {
  display: block;
  max-width: 22ch;
  margin-top: 15px;
  padding-left: 10px;
  border-left: 3px solid var(--across-coral);
  color: #ffd6cf;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
}

body[data-experience="scene"] .launch-impact {
  min-width: 0;
  padding-left: 36px;
  border-left: 1px solid var(--across-rule-on-dark);
}

body[data-experience="scene"] .launch-impact > .sc-kicker {
  margin: 0 0 11px;
}

body[data-experience="scene"] .launch-impact h3 {
  margin: 0;
}

body[data-experience="scene"] .launch-impact h3 strong,
body[data-experience="scene"] .launch-impact h3 span {
  display: block;
}

body[data-experience="scene"] .launch-impact h3 strong {
  color: var(--across-yellow);
  font-size: 52px;
  font-weight: 860;
  line-height: 1;
}

body[data-experience="scene"] .launch-impact h3 span {
  margin-top: 7px;
  color: var(--across-white);
  font-size: 15px;
  font-weight: 700;
}

body[data-experience="scene"] .impact-bar {
  display: flex;
  width: 100%;
  height: 18px;
  margin-top: 28px;
  overflow: hidden;
  background: #d8e4e8;
}

body[data-experience="scene"] .impact-segment { display: block; height: 100%; }
body[data-experience="scene"] .impact-segment-1,
body[data-experience="scene"] .impact-key-1 { background: var(--across-coral); }
body[data-experience="scene"] .impact-segment-2,
body[data-experience="scene"] .impact-key-2 { background: var(--across-yellow); }
body[data-experience="scene"] .impact-segment-3,
body[data-experience="scene"] .impact-key-3 { background: var(--across-teal); }

body[data-experience="scene"] .impact-legend {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

body[data-experience="scene"] .impact-legend li {
  display: grid;
  grid-template-columns: 10px 62px minmax(0, 1fr);
  gap: 9px;
  align-items: baseline;
}

body[data-experience="scene"] .impact-key {
  width: 9px;
  height: 9px;
}

body[data-experience="scene"] .impact-legend strong {
  color: var(--across-white);
  font-size: 13px;
}

body[data-experience="scene"] .impact-legend small {
  color: #b9d0dc;
  font-size: 12px;
  line-height: 1.4;
}

body[data-experience="scene"] .impact-consequence {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--across-rule-on-dark);
  color: var(--across-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

body[data-experience="scene"] .launch-business {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 68px 86px;
  padding: 76px 0 20px;
}

body[data-experience="scene"] .launch-business .launch-story-head h3 {
  font-size: 30px;
}

body[data-experience="scene"] .launch-momentum ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--across-line);
}

body[data-experience="scene"] .launch-momentum li {
  position: relative;
  padding: 15px 0 15px 20px;
  border-bottom: 1px solid var(--across-line);
  color: #354f5e;
  font-size: 13px;
  line-height: 1.45;
}

body[data-experience="scene"] .launch-momentum li::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 1px;
  width: 8px;
  height: 5px;
  border-bottom: 2px solid var(--across-teal);
  border-left: 2px solid var(--across-teal);
  transform: rotate(-45deg);
}

body[data-experience="scene"] .launch-growth ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--across-navy);
}

body[data-experience="scene"] .launch-growth li {
  position: relative;
  min-width: 0;
  padding: 20px 15px 16px 0;
}

body[data-experience="scene"] .launch-growth li + li {
  padding-left: 17px;
  border-left: 1px solid var(--across-line);
}

body[data-experience="scene"] .launch-growth strong,
body[data-experience="scene"] .launch-growth span {
  display: block;
}

body[data-experience="scene"] .launch-growth strong {
  color: var(--across-navy);
  font-size: 28px;
  font-weight: 850;
  line-height: 1.1;
}

body[data-experience="scene"] .launch-growth span {
  margin-top: 6px;
  color: var(--across-muted);
  font-size: 12px;
  line-height: 1.35;
}

body[data-experience="scene"] .launch-growth > p {
  margin: 18px 0 0;
  color: #425c6b;
  font-size: 13px;
  line-height: 1.6;
}

body[data-experience="scene"] .launch-business .full-background {
  grid-column: 1 / -1;
  margin-top: 0;
}

body[data-experience="scene"] .launch-brief + .brief-preparation {
  padding-top: 58px;
}

@media (max-width: 900px) {
  body[data-experience="scene"] .launch-hero-inner .sc-title { max-width: 13ch; font-size: 50px; }
  body[data-experience="scene"] .incident-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 28px; }
  body[data-experience="scene"] .incident-chain::before { display: none; }
  body[data-experience="scene"] .launch-pressure-inner,
  body[data-experience="scene"] .launch-business { grid-template-columns: 1fr; }
  body[data-experience="scene"] .launch-impact { padding: 36px 0 0; border-top: 1px solid var(--across-rule-on-dark); border-left: 0; }
  body[data-experience="scene"] .launch-business .full-background { grid-column: 1; }
}

@media (max-width: 560px) {
  body[data-experience="scene"] .launch-hero { min-height: 700px; }
  body[data-experience="scene"] .launch-hero > img { object-position: 66% center; }
  body[data-experience="scene"] .launch-hero-shade { background: rgba(2, 28, 50, 0.82); }
  body[data-experience="scene"] .launch-hero-inner {
    width: calc(100% - 36px);
    min-height: 700px;
    padding: 42px 0 36px;
  }
  body[data-experience="scene"] .launch-hero-inner .sc-title { max-width: none; font-size: 38px; }
  body[data-experience="scene"] .launch-hero-inner .sc-sub { font-size: 16px; line-height: 1.55; }
  body[data-experience="scene"] .launch-hero-facts { grid-template-columns: 1fr; }
  body[data-experience="scene"] .launch-hero-facts > div { padding: 14px 0; }
  body[data-experience="scene"] .launch-hero-facts > div + div { padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.5); border-left: 0; }
  body[data-experience="scene"] .launch-hero-facts dt { font-size: 27px; }
  body[data-experience="scene"] .launch-hero .launch-person { grid-template-columns: 1fr; gap: 3px; }
  body[data-experience="scene"] .launch-hero .launch-person span { grid-row: auto; }
  body[data-experience="scene"] .launch-hero figcaption { display: none; }
  body[data-experience="scene"] .launch-incident,
  body[data-experience="scene"] .launch-business,
  body[data-experience="scene"] .launch-pressure-inner { width: calc(100% - 36px); }
  body[data-experience="scene"] .launch-incident { padding: 48px 0 54px; }
  body[data-experience="scene"] .launch-story-head h3 { font-size: 30px; }
  body[data-experience="scene"] .incident-chain { grid-template-columns: 1fr; gap: 0; margin-top: 34px; }
  body[data-experience="scene"] .incident-chain::before {
    display: block;
    top: 23px;
    right: auto;
    bottom: 24px;
    left: 23px;
    width: 2px;
    height: auto;
  }
  body[data-experience="scene"] .incident-chain li { min-height: 104px; padding: 4px 0 28px 68px; }
  body[data-experience="scene"] .incident-chain li > span { border-color: var(--across-cloud); }
  body[data-experience="scene"] .launch-pressure-inner { gap: 46px; padding: 50px 0 54px; }
  body[data-experience="scene"] .runway-line { grid-template-columns: 1fr; gap: 0; }
  body[data-experience="scene"] .runway-line::before {
    top: 7px;
    right: auto;
    bottom: 22px;
    left: 7px;
    width: 2px;
    height: auto;
  }
  body[data-experience="scene"] .runway-line li { min-height: 92px; padding: 0 0 26px 34px; }
  body[data-experience="scene"] .launch-impact h3 strong { font-size: 46px; }
  body[data-experience="scene"] .impact-legend li { grid-template-columns: 10px 56px minmax(0, 1fr); }
  body[data-experience="scene"] .launch-business { gap: 54px; padding-top: 54px; }
  body[data-experience="scene"] .launch-momentum ul { grid-template-columns: 1fr; }
  body[data-experience="scene"] .launch-growth strong { font-size: 23px; }
  body[data-experience="scene"] .full-background-body { grid-template-columns: 1fr; }
}

/* Anna launch brief: a cause-and-consequence story, not a metric dashboard. */
body[data-experience="scene"] .launch-hero,
body[data-experience="scene"] .launch-hero-inner {
  min-height: 720px;
}

body[data-experience="scene"] .launch-hero-inner {
  justify-content: center;
  padding: 48px 0;
}

body[data-experience="scene"] .launch-timecode {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  width: min(520px, 100%);
  margin: 0 0 26px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

body[data-experience="scene"] .launch-timecode span {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--across-yellow);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-experience="scene"] .launch-timecode strong {
  color: var(--across-white);
  font-size: 36px;
  font-weight: 850;
  line-height: 1;
}

body[data-experience="scene"] .launch-timecode small {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 700;
}

body[data-experience="scene"] .launch-hero-inner .sc-title {
  max-width: 13ch;
  font-size: 56px;
}

body[data-experience="scene"] .launch-hero-inner .sc-sub {
  max-width: 62ch;
  font-size: 16px;
}

body[data-experience="scene"] .launch-central-conflict {
  width: min(700px, 100%);
  margin-top: 24px;
  padding: 2px 0 2px 18px;
  border-left: 4px solid var(--across-yellow);
}

body[data-experience="scene"] .launch-central-conflict strong {
  display: block;
  color: var(--across-yellow);
  font-size: 13px;
  font-weight: 850;
}

body[data-experience="scene"] .launch-central-conflict p {
  margin: 5px 0 0;
  color: var(--across-white);
  font-size: 14px;
  line-height: 1.55;
}

body[data-experience="scene"] .launch-hero .launch-person {
  margin-top: 22px;
}

body[data-experience="scene"] .incident-chain li > small {
  display: block;
  margin-bottom: 7px;
  color: var(--across-coral);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
  text-transform: uppercase;
}

body[data-experience="scene"] .launch-pressure-inner {
  display: block;
}

body[data-experience="scene"] .launch-clocks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}

body[data-experience="scene"] .launch-clock {
  padding: 18px 0 0;
  border-top: 3px solid var(--across-blue);
}

body[data-experience="scene"] .launch-clock-1 { border-color: var(--across-coral); }
body[data-experience="scene"] .launch-clock-2 { border-color: var(--across-yellow); }
body[data-experience="scene"] .launch-clock-3 { border-color: #2db7a3; }

body[data-experience="scene"] .launch-clock span,
body[data-experience="scene"] .launch-clock strong,
body[data-experience="scene"] .launch-clock small {
  display: block;
}

body[data-experience="scene"] .launch-clock span {
  color: #adc7d6;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

body[data-experience="scene"] .launch-clock strong {
  margin-top: 10px;
  color: var(--across-white);
  font-size: 30px;
  font-weight: 850;
  line-height: 1.05;
}

body[data-experience="scene"] .launch-clock small {
  margin-top: 7px;
  color: #c5d7e1;
  font-size: 12px;
  line-height: 1.45;
}

body[data-experience="scene"] .launch-impact {
  margin-top: 54px;
  padding: 38px 0 0;
  border-top: 1px solid var(--across-rule-on-dark);
  border-left: 0;
}

body[data-experience="scene"] .launch-impact header {
  max-width: 760px;
}

body[data-experience="scene"] .launch-impact h3 {
  margin: 6px 0 0;
  color: var(--across-white);
  font-size: 28px;
  line-height: 1.2;
}

body[data-experience="scene"] .impact-equation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
  border-top: 1px solid var(--across-rule-on-dark);
  border-bottom: 1px solid var(--across-rule-on-dark);
}

body[data-experience="scene"] .impact-equation[data-summary-only="true"] {
  grid-template-columns: 1fr;
}

body[data-experience="scene"] .impact-term,
body[data-experience="scene"] .impact-total {
  position: relative;
  min-width: 0;
  min-height: 112px;
  padding: 20px 18px 18px 30px;
  border-left: 1px solid var(--across-rule-on-dark);
}

body[data-experience="scene"] .impact-term:first-child {
  border-left: 0;
}

body[data-experience="scene"] .impact-term > span {
  position: absolute;
  top: 21px;
  left: 10px;
  color: var(--across-yellow);
  font-size: 18px;
  font-weight: 850;
}

body[data-experience="scene"] .impact-total > span {
  position: static;
  display: block;
  margin-bottom: 8px;
  color: #c5d7e1;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-experience="scene"] .impact-equation[data-summary-only="true"] .impact-total {
  min-height: 0;
  padding: 20px 0 22px;
  border-left: 0;
}

body[data-experience="scene"] .impact-term strong,
body[data-experience="scene"] .impact-total strong,
body[data-experience="scene"] .impact-term small,
body[data-experience="scene"] .impact-total small {
  display: block;
}

body[data-experience="scene"] .impact-term strong {
  color: var(--across-white);
  font-size: 25px;
  line-height: 1;
}

body[data-experience="scene"] .impact-total strong {
  color: var(--across-yellow);
  font-size: 34px;
  line-height: 1;
}

body[data-experience="scene"] .impact-term small,
body[data-experience="scene"] .impact-total small {
  margin-top: 9px;
  color: #c5d7e1;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

body[data-experience="scene"] .impact-consequence {
  margin: 20px 0 0;
  color: var(--across-white);
  font-size: 15px;
  font-weight: 750;
}

body[data-experience="scene"] .launch-business {
  gap: 46px 86px;
}

body[data-experience="scene"] .launch-business-head {
  grid-column: 1 / -1;
  max-width: 860px;
  padding-bottom: 8px;
}

body[data-experience="scene"] .launch-orientation {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: 64px 0 10px;
}

body[data-experience="scene"] .launch-orientation-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  margin-top: 38px;
  border-top: 1px solid var(--across-line);
  border-bottom: 1px solid var(--across-line);
}

body[data-experience="scene"] .launch-orientation-grid article {
  min-width: 0;
  padding: 24px 28px 26px 0;
}

body[data-experience="scene"] .launch-orientation-grid article + article {
  padding-left: 28px;
  border-left: 1px solid var(--across-line);
}

body[data-experience="scene"] .launch-orientation-grid span {
  display: block;
  color: var(--across-coral);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

body[data-experience="scene"] .launch-orientation-grid h4 {
  margin: 8px 0 0;
  color: var(--across-navy);
  font-size: 21px;
  font-weight: 820;
  line-height: 1.2;
}

body[data-experience="scene"] .launch-orientation-grid p {
  margin: 11px 0 0;
  color: #425c6b;
  font-size: 13px;
  line-height: 1.62;
}

body[data-experience="scene"] .launch-peer-line {
  margin: 26px 0 0;
  padding: 17px 20px;
  border-left: 4px solid var(--across-yellow);
  background: #e4eef1;
  color: #294654;
  font-size: 14px;
  line-height: 1.6;
}

body[data-experience="scene"] .launch-peer-line strong {
  color: var(--across-navy);
}

@media (max-width: 900px) {
  body[data-experience="scene"] .launch-hero-inner .sc-title { font-size: 48px; }
  body[data-experience="scene"] .launch-orientation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-experience="scene"] .launch-orientation-company { grid-column: 1 / -1; border-bottom: 1px solid var(--across-line); }
  body[data-experience="scene"] .launch-orientation-grid .launch-orientation-participant { padding-left: 0; border-left: 0; }
  body[data-experience="scene"] .impact-equation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-experience="scene"] .impact-term:nth-child(3) { border-left: 0; }
  body[data-experience="scene"] .impact-term:nth-child(n + 3),
  body[data-experience="scene"] .impact-total { border-top: 1px solid var(--across-rule-on-dark); }
  body[data-experience="scene"] .launch-business-head { grid-column: 1; }
}

@media (max-width: 560px) {
  body[data-experience="scene"] .launch-hero,
  body[data-experience="scene"] .launch-hero-inner { min-height: 760px; }
  body[data-experience="scene"] .launch-timecode { grid-template-columns: 1fr; }
  body[data-experience="scene"] .launch-timecode span { grid-row: auto; margin-bottom: 8px; }
  body[data-experience="scene"] .launch-timecode strong { font-size: 32px; }
  body[data-experience="scene"] .launch-hero-inner .sc-title { font-size: 38px; }
  body[data-experience="scene"] .launch-central-conflict { padding-left: 14px; }
  body[data-experience="scene"] .launch-orientation { width: calc(100% - 36px); padding-top: 48px; }
  body[data-experience="scene"] .launch-orientation-grid { grid-template-columns: 1fr; margin-top: 30px; }
  body[data-experience="scene"] .launch-orientation-company { grid-column: auto; }
  body[data-experience="scene"] .launch-orientation-grid article,
  body[data-experience="scene"] .launch-orientation-grid article + article,
  body[data-experience="scene"] .launch-orientation-grid .launch-orientation-participant {
    padding: 20px 0 22px;
    border-top: 1px solid var(--across-line);
    border-left: 0;
  }
  body[data-experience="scene"] .launch-orientation-grid article:first-child { border-top: 0; }
  body[data-experience="scene"] .launch-peer-line { padding: 15px 16px; }
  body[data-experience="scene"] .launch-clocks { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
  body[data-experience="scene"] .launch-clock { min-height: 92px; padding-top: 14px; }
  body[data-experience="scene"] .launch-clock strong { font-size: 25px; }
  body[data-experience="scene"] .launch-growth ol { grid-template-columns: 1fr; }
  body[data-experience="scene"] .launch-growth li,
  body[data-experience="scene"] .launch-growth li + li {
    padding: 14px 0;
    border-left: 0;
    border-bottom: 1px solid var(--across-line);
  }
  body[data-experience="scene"] .impact-equation { grid-template-columns: 1fr; }
  body[data-experience="scene"] .impact-term,
  body[data-experience="scene"] .impact-total { min-height: 96px; border-top: 1px solid var(--across-rule-on-dark); border-left: 0; }
  body[data-experience="scene"] .impact-term:first-child { border-top: 0; }
  body[data-experience="scene"] .impact-term strong { font-size: 23px; }
  body[data-experience="scene"] .impact-total strong { font-size: 30px; }
}

/* Participant-tested clarity pass -----------------------------------------
   The Anna brief is intentionally one coherent case summary. Details remain
   available, but they no longer compete with the role, event, task, or start
   action a first-time participant needs. */
body[data-experience="scene"] .login-topline { margin-bottom: clamp(28px, 5vh, 52px); }
body[data-experience="scene"] .login-header h1 {
  max-width: 16ch;
  font-size: clamp(40px, 4.5vw, 58px);
  line-height: 1.04;
}

body[data-experience="scene"] #view-root:has(.case-brief-simple) {
  width: min(1160px, calc(100% - 48px));
  padding: 28px 0 64px;
}

body[data-experience="scene"] .case-brief-simple {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  overflow: hidden;
  border: 1px solid var(--across-line);
  border-radius: 8px;
  background: var(--across-white);
  box-shadow: 0 14px 38px rgba(7, 52, 95, 0.08);
}

body[data-experience="scene"] .case-brief-intro { order: 1; }
body[data-experience="scene"] .case-context { order: 2; }
body[data-experience="scene"] .case-stakes { order: 3; }
body[data-experience="scene"] .case-task { order: 4; }

body[data-experience="scene"] .case-brief-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: clamp(32px, 4.5vw, 62px);
  align-items: center;
  padding: clamp(30px, 4vw, 50px);
  background: var(--across-navy);
}

body[data-experience="scene"] .case-brief-copy .sc-kicker {
  margin: 0 0 10px;
  color: var(--across-yellow);
}

body[data-experience="scene"] .case-brief-copy h2 {
  max-width: 26ch;
  margin: 0;
  color: var(--across-white);
  font-size: clamp(30px, 2.7vw, 38px);
  line-height: 1.08;
}

body[data-experience="scene"] .case-brief-copy p {
  max-width: 66ch;
  margin: 14px 0 0;
  color: #e3edf1;
  font-size: 15px;
  line-height: 1.55;
}

body[data-experience="scene"] .case-brief-copy .case-opening {
  display: inline-block;
  margin-top: 18px;
  padding: 7px 10px;
  border-left: 3px solid var(--across-yellow);
  background: rgba(255, 255, 255, 0.08);
  color: var(--across-white);
  font-weight: 700;
}

body[data-experience="scene"] .case-brief-image {
  align-self: center;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #092c4c;
}

body[data-experience="scene"] .case-brief-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

body[data-experience="scene"] .case-brief-image figcaption {
  padding: 8px 10px;
  background: var(--across-navy-press);
  color: #dce8ee;
  font-size: 12px;
}

body[data-experience="scene"] .case-context {
  padding: 28px clamp(28px, 4.5vw, 52px) 30px;
  background: var(--across-white);
}

body[data-experience="scene"] .case-context-heading .sc-kicker { margin: 0; color: var(--across-coral); }
body[data-experience="scene"] .case-context-heading h3 {
  margin: 5px 0 0;
  color: var(--across-navy);
  font-size: 25px;
  line-height: 1.25;
}
body[data-experience="scene"] .case-context-heading > p:last-child {
  margin: 6px 0 0;
  color: var(--across-ink-3);
  font-size: 14px;
}
body[data-experience="scene"] .case-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 42px;
  margin-top: 25px;
}
body[data-experience="scene"] .case-context-grid section {
  padding-top: 15px;
  border-top: 2px solid var(--across-navy);
}
body[data-experience="scene"] .case-context h4 {
  margin: 0;
  color: var(--across-navy);
  font-size: 17px;
  line-height: 1.3;
}
body[data-experience="scene"] .case-context-grid p {
  margin: 8px 0 0;
  color: var(--across-ink-3);
  font-size: 14px;
  line-height: 1.6;
}
body[data-experience="scene"] .case-assessment-visible {
  margin-top: 28px;
  padding: 20px 22px;
  border-left: 4px solid var(--across-yellow);
  background: #f6f9f9;
}
body[data-experience="scene"] .case-assessment-visible ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 32px;
  margin: 13px 0 0;
  padding-left: 20px;
}
body[data-experience="scene"] .case-assessment-visible li {
  color: var(--across-ink-3);
  font-size: 13px;
  line-height: 1.5;
}

body[data-experience="scene"] .case-stakes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 4px solid var(--across-yellow);
  border-bottom: 1px solid var(--across-line);
  background: var(--across-white);
}

body[data-experience="scene"] .case-stakes > div {
  padding: 18px clamp(18px, 3vw, 30px);
}

body[data-experience="scene"] .case-stakes > div + div { border-left: 1px solid var(--across-line); }
body[data-experience="scene"] .case-stakes dt {
  color: #526b7a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
body[data-experience="scene"] .case-stakes dd {
  margin: 4px 0 0;
  color: var(--across-navy);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
}

body[data-experience="scene"] .case-stakes > div:first-child dd { color: var(--across-coral); }

body[data-experience="scene"] .case-roles { padding: 32px clamp(28px, 4.5vw, 52px) 28px; }
body[data-experience="scene"] .case-section-heading .sc-kicker { margin: 0; }
body[data-experience="scene"] .case-section-heading h3 {
  margin: 5px 0 0;
  font-size: 23px;
  line-height: 1.2;
}

body[data-experience="scene"] .case-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 20px;
  border-top: 1px solid var(--across-navy);
}

body[data-experience="scene"] .case-role-grid article {
  padding: 18px 22px 10px 0;
}

body[data-experience="scene"] .case-role-grid article + article {
  padding-left: 22px;
  border-left: 1px solid var(--across-line);
}

body[data-experience="scene"] .case-role-grid span {
  color: var(--across-coral);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
body[data-experience="scene"] .case-role-grid h4 {
  margin: 7px 0 0;
  color: var(--across-navy);
  font-size: 16px;
  line-height: 1.3;
}
body[data-experience="scene"] .case-role-grid p {
  margin: 7px 0 0;
  color: var(--across-ink-3);
  font-size: 13px;
  line-height: 1.48;
}

body[data-experience="scene"] .case-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, 0.34fr);
  gap: 42px;
  align-items: center;
  padding: 28px clamp(28px, 4.5vw, 52px) 30px;
  border-top: 1px solid var(--across-line);
  background: #f6f9f9;
  color: var(--across-navy);
}

body[data-experience="scene"] .case-task .sc-kicker { margin: 0; color: var(--across-coral); }
body[data-experience="scene"] .case-task h3 {
  margin: 4px 0 6px;
  color: var(--across-navy);
  font-size: 24px;
}
body[data-experience="scene"] .case-task-copy > p:last-of-type {
  max-width: 72ch;
  margin: 0;
  color: var(--across-ink-3);
  font-size: 14px;
  line-height: 1.5;
}
body[data-experience="scene"] .case-actions {
  display: grid;
  gap: 0;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}
body[data-experience="scene"] .case-actions li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 9px 0;
  border-top: 1px solid #d5e0e4;
}
body[data-experience="scene"] .case-actions li > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--across-navy);
  color: var(--across-yellow);
  font-size: 12px;
  font-weight: 900;
}
body[data-experience="scene"] .case-actions strong {
  display: block;
  color: var(--across-navy);
  font-size: 14px;
  line-height: 1.35;
}
body[data-experience="scene"] .case-actions p {
  margin: 2px 0 0;
  color: var(--across-ink-3);
  font-size: 13px;
  line-height: 1.4;
}
body[data-experience="scene"] .case-start {
  padding: 22px;
  border-left: 4px solid var(--across-yellow);
  background: var(--across-white);
  box-shadow: 0 8px 24px rgba(7, 52, 95, 0.08);
}
body[data-experience="scene"] .case-start .case-start-prompt {
  margin: 0 0 10px;
  color: var(--across-navy);
  font-size: 18px;
  font-weight: 800;
  text-align: left;
}
body[data-experience="scene"] .case-start .sc-cta {
  width: 100%;
  min-height: 58px;
  font-size: 16px;
}
body[data-experience="scene"] .case-start .sc-cta svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
body[data-experience="scene"] .case-start p {
  margin: 9px 0 0;
  color: #526b7a;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}

body[data-experience="scene"] .case-details {
  border-top: 1px solid var(--across-line);
  background: var(--across-white);
}
body[data-experience="scene"] .case-details > summary {
  padding: 18px clamp(28px, 4.5vw, 52px);
  cursor: pointer;
  color: var(--across-navy);
}
body[data-experience="scene"] .case-details > summary span { display: grid; gap: 2px; }
body[data-experience="scene"] .case-details > summary small { color: var(--across-muted); font-weight: 400; }
body[data-experience="scene"] .case-details-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 36px;
  padding: 8px clamp(28px, 4.5vw, 52px) 34px;
}
body[data-experience="scene"] .case-details-body h3 { margin: 0; font-size: 16px; }
body[data-experience="scene"] .case-details-body p,
body[data-experience="scene"] .case-details-body li {
  color: var(--across-ink-3);
  font-size: 13px;
  line-height: 1.55;
}
body[data-experience="scene"] .case-details-body p { margin: 7px 0 0; }
body[data-experience="scene"] .case-assessment { grid-column: 1 / -1; }
body[data-experience="scene"] .case-assessment ul { columns: 2; padding-left: 20px; }
body[data-experience="scene"] .case-more { width: 100%; }

@media (max-width: 860px) {
  body[data-experience="scene"] #view-root:has(.case-brief-simple) { width: calc(100% - 32px); padding-top: 24px; }
  body[data-experience="scene"] .case-brief-intro { grid-template-columns: 1fr; }
  body[data-experience="scene"] .case-brief-image { width: 100%; }
  body[data-experience="scene"] .case-context-grid { grid-template-columns: 1fr; }
  body[data-experience="scene"] .case-assessment-visible ul { grid-template-columns: 1fr; }
  body[data-experience="scene"] .case-role-grid { grid-template-columns: 1fr; }
  body[data-experience="scene"] .case-task { grid-template-columns: 1fr; gap: 22px; }
  body[data-experience="scene"] .case-role-grid article + article { padding-left: 0; border-top: 1px solid var(--across-line); border-left: 0; }
  body[data-experience="scene"] .experience-survey { grid-template-columns: 1fr; gap: 16px; }
  body[data-experience="scene"] .experience-survey-copy { position: static; }
}

@media (max-width: 560px) {
  body[data-experience="scene"] .landing-view::after {
    right: 0;
    width: 100%;
    border-right: 0;
    background: rgba(3, 39, 70, 0.9);
  }
  body[data-experience="scene"] #view-root:has(.case-brief-simple) { width: calc(100% - 20px); padding: 14px 0 38px; }
  body[data-experience="scene"] .case-brief-intro { padding: 26px 20px; }
  body[data-experience="scene"] .case-brief-copy h2 { font-size: 29px; }
  body[data-experience="scene"] .case-context { padding: 24px 20px; }
  body[data-experience="scene"] .case-stakes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-experience="scene"] .case-stakes > div { padding: 13px 10px; }
  body[data-experience="scene"] .case-stakes > div + div { border-left: 1px solid var(--across-line); }
  body[data-experience="scene"] .case-stakes dt { font-size: 12px; line-height: 1.25; }
  body[data-experience="scene"] .case-stakes dd { font-size: 15px; }
  body[data-experience="scene"] .case-roles { padding: 26px 20px 24px; }
  body[data-experience="scene"] .case-task { padding: 26px 20px; }
  body[data-experience="scene"] .case-start { padding: 18px; }
  body[data-experience="scene"] .case-details > summary { padding: 17px 20px; }
  body[data-experience="scene"] .case-details-body { grid-template-columns: 1fr; padding: 6px 20px 28px; }
  body[data-experience="scene"] .case-assessment { grid-column: auto; }
  body[data-experience="scene"] .case-assessment ul { columns: 1; }
  body[data-experience="scene"] .experience-survey { padding: 20px 16px; }
  body[data-experience="scene"] .survey-choices label { width: 100%; }
  body[data-experience="scene"] .survey-q.is-scale .survey-choices label { width: auto; flex: 1 1 54px; }
  body[data-experience="scene"] .experience-survey-submit .sc-cta { width: 100%; }
  body[data-experience="scene"] .experience-survey.is-saved { grid-template-columns: 1fr; }
}

/* ============================================================================
   Landing and sign-in, second pass.

   The hero photograph stays: without it the opening page reads as plain.
   What is fixed here is the two things around it that were not working.

   The wordmark sat on a white plate that bled -100vw to the left and then
   stopped in mid-air beside it, so the logo read as hanging in the page
   rather than placed on it. And the sign-in screen answered a navy-and-
   yellow brand with a terracotta submit, which made the most important
   control the one element belonging to no palette.
   ========================================================================== */

/* Placed, not floating: the plate ends where the wordmark does. */
body[data-experience="scene"] .ld-brand-lockup {
  min-height: 0;
  padding: 0;
}

body[data-experience="scene"] .ld-brand-lockup::before {
  display: none;
}

body[data-experience="scene"] .landing-copy .across-logo {
  width: 168px;
  padding: 10px 16px;
  border-bottom: 3px solid var(--across-yellow);
  background: rgba(255, 255, 255, 0.97);
}

/* The primary action now belongs to the brand it sits inside. */
body[data-experience="scene"] #login-view .login-submit {
  background: var(--across-yellow);
  border: 0;
  color: #082d50;
  font-weight: 800;
}

body[data-experience="scene"] #login-view .login-submit:hover:not(:disabled) {
  background: #ffd262;
  color: #082d50;
}

/* ============================================================================
   Narrow widths: let the photograph do its job, and stop stranding the copy.

   Below 820px the hero was covered by a flat 84%-opaque navy panel, so the
   image was paid for and then hidden -- the page read as an empty navy field.
   At the same time the copy sat centred in a full-height row, which left a
   void above it and a second void between it and Start.

   Both are one composition problem. The image now holds the top of the
   screen and falls into solid navy, and the copy drops to meet the action
   instead of floating in the middle.
   ========================================================================== */

@media (max-width: 820px) {
  body[data-experience="scene"] .landing-view {
    background-position: 50% 18%;
  }

  /* Clear at the top so the photograph reads, solid by the time it reaches
     the headline so the white type keeps its contrast. */
  body[data-experience="scene"] .landing-view::after {
    width: 100%;
    background: linear-gradient(
      180deg,
      rgba(3, 39, 70, 0.10) 0%,
      rgba(3, 39, 70, 0.42) 26%,
      rgba(5, 45, 82, 0.88) 44%,
      var(--across-navy) 58%
    );
  }

  body[data-experience="scene"] .landing-view::before {
    background: rgba(2, 28, 51, 0.06);
  }

  /* The headline meets the image rather than hovering between two gaps. */
  body[data-experience="scene"] .landing-message {
    align-self: end;
    margin: 0 0 20px;
  }

  body[data-experience="scene"] .landing-copy .landing-actions {
    margin-top: 4px;
  }
}

@media (max-width: 560px) {
  body[data-experience="scene"] .landing-view {
    background-position: 50% 14%;
  }

  body[data-experience="scene"] .landing-view::after {
    background: linear-gradient(
      180deg,
      rgba(3, 39, 70, 0.10) 0%,
      rgba(3, 39, 70, 0.40) 22%,
      rgba(5, 45, 82, 0.88) 38%,
      var(--across-navy) 52%
    );
  }

  body[data-experience="scene"] .landing-message {
    margin: 0 0 16px;
  }
}

/* ============================================================================
   Case brief, after the supervisor review.

   The panels read left to right and top to bottom, which was not obvious to a
   first-time reader, so each one is numbered. The key figures gained a heading
   so the strip reads as a summary rather than three loose facts. What the
   report assesses moved below the task: Leclerc asked that participants be
   told up front what their session is read for, but sitting inside the case
   it read as a hint about how to behave.
   ========================================================================== */

body[data-experience="scene"] .case-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 9px;
  border-radius: 999px;
  background: var(--across-navy);
  color: var(--across-white);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}

body[data-experience="scene"] .case-figures {
  margin: 0 0 20px;
}

body[data-experience="scene"] .case-figures h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--across-navy);
}

/* The lede sat behind a yellow rule that made it read as a pull quote boxed
   off from the headline rather than a continuation of it. */
body[data-experience="scene"] .landing-copy .landing-lede {
  padding-left: 0;
  border-left: 0;
}

/* The task block is a two-column grid: the actions on the left, the start
   card on the right. Centring the rows left the short card floating in the
   middle of a tall column, and putting the assessment inside the left column
   stretched that column further and opened a hole beside it. The card now
   sits at the top of its column and the assessment spans the full width
   underneath both, which is what its grid-column rule always intended. */
body[data-experience="scene"] .case-task {
  align-items: start;
}

body[data-experience="scene"] .case-task .case-assessment-visible {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 18px 0 0;
  border-left: 0;
  border-top: 1px solid var(--across-line);
  background: transparent;
}

body[data-experience="scene"] .case-task .case-assessment-visible h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--across-navy);
}

body[data-experience="scene"] .case-task .case-assessment-visible ul {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 40px;
}

@media (max-width: 900px) {
  body[data-experience="scene"] .case-task .case-assessment-visible ul {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Printed report, after the supervisor review.

   The report ran to seven pages because the screen layout was printed as-is:
   a wide one-column flow with screen-sized type, screen-sized spacing, and
   the controls still in it. The review's target is the assessment on a single
   page that can be read in five minutes -- what I did, what I could have done
   better, what to try next -- with the transcript following it, because
   Leclerc asked that the transcript be kept.

   So this is a layout, not a cut: nothing is removed from the report, it is
   set for paper instead of a screen.
   ========================================================================== */

@media print {
  body[data-experience="scene"] .sc-debrief {
    max-width: none;
    font-size: 9.5pt;
    line-height: 1.34;
  }

  body[data-experience="scene"] .sc-debrief .sc-title {
    margin: 0 0 2mm;
    font-size: 15pt;
  }

  body[data-experience="scene"] .sc-debrief .sc-lead,
  body[data-experience="scene"] .sc-debrief .sc-note {
    font-size: 8.5pt;
    line-height: 1.3;
  }

  body[data-experience="scene"] .sc-debrief h4 {
    margin: 0 0 1.5mm;
    font-size: 9.5pt;
  }

  /* The score and its supporting cards share the page instead of stacking
     down it. */
  body[data-experience="scene"] .result-report-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4mm 6mm;
    align-items: start;
  }

  body[data-experience="scene"] .result-supporting {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3mm;
  }

  body[data-experience="scene"] .sc-debrief .sc-card {
    padding: 3mm 3.5mm;
    border-radius: 2mm;
    box-shadow: none;
    break-inside: avoid;
  }

  body[data-experience="scene"] .sc-debrief .sc-card p,
  body[data-experience="scene"] .sc-debrief .sc-card li {
    margin: 0 0 1.2mm;
  }

  body[data-experience="scene"] .sc-dim .track,
  body[data-experience="scene"] .score-track {
    height: 1.6mm;
  }

  /* Controls and the platform-feedback prompt are not part of the record a
     participant submits. */
  body[data-experience="scene"] .sc-actions,
  body[data-experience="scene"] .experience-survey,
  body[data-experience="scene"] .sc-debrief .link-button,
  body[data-experience="scene"] .back-to-week {
    display: none !important;
  }

  /* The assessment ends here. The transcript and the reflection are the
     evidence behind it, and start their own page. */
  body[data-experience="scene"] .assessment-disclosure {
    break-before: page;
  }

  body[data-experience="scene"] .assessment-disclosure summary {
    font-size: 11pt;
  }

  body[data-experience="scene"] .assessment-transcript li {
    margin: 0 0 1.5mm;
    font-size: 9pt;
    line-height: 1.3;
  }

  @page {
    margin: 12mm 12mm 14mm;
  }
}

@media print {
  /* across.css is the last sheet loaded, so the screen sizes for the report
     live here and beat anything with equal specificity in scene.css. That is
     why the first attempt at a print layout changed nothing: it was written
     in scene.css and silently overridden. These re-state the overrides at the
     end of the winning sheet. */
  body[data-experience="scene"] .sc-debrief .sc-lead {
    max-width: none;
    font-size: 8.5pt;
    line-height: 1.3;
  }

  body[data-experience="scene"] .sc-debrief .sc-title {
    font-size: 15pt;
  }

  body[data-experience="scene"] .sc-debrief .sc-card {
    padding: 3mm 3.5mm;
    border-top-width: 2pt;
  }

  /* A footer line is not worth a page of its own. */
  body[data-experience="scene"] .result-footer,
  body[data-experience="scene"] .sc-debrief .sc-note:last-child {
    break-before: avoid;
  }
}

@media print {
  /* Measured pass: each rule below was kept only if it removed a page.
     The assessment is meant to be one page, and the transcript follows. */
  body[data-experience="scene"] .sc-debrief .sc-kicker { margin: 0; font-size: 8pt; }
  body[data-experience="scene"] .sc-debrief .sc-title { font-size: 13pt; margin: 0 0 1mm; }
  body[data-experience="scene"] .sc-debrief .sc-lead { margin: 0 0 3mm; }
  body[data-experience="scene"] .result-report-grid { gap: 3mm; }
  body[data-experience="scene"] .result-supporting { gap: 2.5mm; }
  body[data-experience="scene"] .sc-debrief .sc-card { padding: 2.5mm 3mm; margin: 0; }
  body[data-experience="scene"] .sc-debrief .score-row { padding: 1.5mm 0; }
  body[data-experience="scene"] .sc-debrief .sc-spark { height: 12mm; }
  body[data-experience="scene"] .sc-debrief blockquote { margin: 1mm 0; }

  /* The figures are supporting evidence, not the assessment, and each was
     taking a page of its own. */
  body[data-experience="scene"] .sc-more figure,
  body[data-experience="scene"] .sc-more .panel { padding: 3mm; margin: 0 0 3mm; }
  body[data-experience="scene"] .sc-more svg { max-height: 40mm; }
}

@media print {
  /* The three criteria stacked down the page and filled it on their own, so
     the assessment could not begin and end on one sheet. Side by side they
     keep every word -- question, score and evidence -- in a third of the
     height. */
  body[data-experience="scene"] .sc-debrief .score-rows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 4mm;
    align-items: start;
  }

  body[data-experience="scene"] .sc-debrief .score-row {
    border-top: 0;
    border-left: 1px solid var(--across-line);
    padding: 0 0 0 3mm;
  }

  body[data-experience="scene"] .sc-debrief .score-row:first-child {
    border-left: 0;
    padding-left: 0;
  }

  body[data-experience="scene"] .sc-debrief .score-question,
  body[data-experience="scene"] .sc-debrief .score-evidence {
    font-size: 8pt;
    line-height: 1.28;
    margin: 0.8mm 0 0;
  }
}

@media print {
  /* A figure that was never drawn is an instruction, not evidence. On screen
     it invites the participant to take the CCFOAI snapshot; printed into a
     report they are submitting, it is a blank panel asking them to go back.
     Measured at roughly two thirds of a page. */
  body[data-experience="scene"] .figure-empty,
  body[data-experience="scene"] .panel:has(.figure-empty),
  body[data-experience="scene"] figure:has(.figure-empty) {
    display: none !important;
  }

  /* The remaining figures are supporting evidence for the debrief, so they
     print compactly rather than one to a page. */
  body[data-experience="scene"] .sc-more .disclosure {
    break-inside: auto;
  }

  body[data-experience="scene"] .sc-more figure {
    break-inside: avoid;
    margin: 0 0 3mm;
    padding: 3mm;
  }

  body[data-experience="scene"] .sc-more figcaption,
  body[data-experience="scene"] .sc-more .figcap {
    font-size: 8pt;
    line-height: 1.3;
  }
}

@media print {
  /* Measured, not assumed. The content of this report needs 3.4 pages; the
     break rules above were turning that into 6. Forcing the transcript onto a
     fresh page abandoned whatever was left of the previous one, and refusing
     to split a card pushed any card that did not fit whole onto the next
     page. Relaxing both took it to 5, and nothing is lost: the transcript
     still has its own heading, and a card that splits is still readable.
     Small blocks keep their protection below. */
  body[data-experience="scene"] .assessment-disclosure { break-before: auto; }
  body[data-experience="scene"] .sc-debrief .sc-card,
  body[data-experience="scene"] .sc-more .disclosure,
  body[data-experience="scene"] .sc-more figure { break-inside: auto; }

  /* A score row, a transcript line and a figure caption are small enough that
     splitting one is just untidy. */
  body[data-experience="scene"] .sc-debrief .score-row,
  body[data-experience="scene"] .assessment-transcript li,
  body[data-experience="scene"] .sc-more figcaption { break-inside: avoid; }
}

/* ============================================================
   Interaction layer
   What responds when a participant acts. Each rule here answers a question
   the pilot left them asking: is this clickable, did it register, what do I
   do now. Kept together so the next pass can see the whole set at once.
   ============================================================ */

/* Every icon inside a CTA gets a size. Only the brief and case-start CTAs
   sized theirs, so "View my report" rendered its arrow at the full width of
   the button: a red block with a black triangle filling it, on the screen
   that closes the conversation. */
body[data-experience="scene"] .sc-cta svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The task strip: three goals the participant ticks off for themselves. */
body[data-experience="scene"] .sc-task-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 8px 16px;
  background: var(--across-mist);
  border-bottom: 1px solid var(--across-line);
}
body[data-experience="scene"] .sc-task-strip > #sc-task-label {
  margin-right: 4px;
  color: var(--across-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body[data-experience="scene"] .sc-task {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 4px 12px 4px 8px;
  border: 1px solid var(--across-control-edge);
  border-radius: 999px;
  background: var(--across-white);
  color: var(--across-navy);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body[data-experience="scene"] .sc-task i {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.5px solid var(--across-control-edge);
  border-radius: 4px;
  background: var(--across-white);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
body[data-experience="scene"] .sc-task:hover:not(:disabled) {
  border-color: var(--across-navy);
  background: var(--across-cloud);
}
body[data-experience="scene"] .sc-task[aria-pressed="true"],
body[data-experience="scene"] .sc-task[aria-pressed="true"]:hover:not(:disabled) {
  border-color: var(--across-navy);
  background: var(--across-navy);
  color: var(--across-white);
}
/* Hovering a ticked task darkens it rather than lightening it: the light
   hover of an unticked task left white text on cloud, unreadable. */
body[data-experience="scene"] .sc-task[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--across-navy-press);
}
body[data-experience="scene"] .sc-task[aria-pressed="true"] i {
  border-color: var(--across-yellow);
  background: var(--across-yellow);
}
body[data-experience="scene"] .sc-task[aria-pressed="true"] i::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 9px;
  border: solid var(--across-navy);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
body[data-experience="scene"] .sc-task:disabled {
  cursor: default;
  opacity: 0.7;
}
body[data-experience="scene"] .sc-task:focus-visible {
  outline: 3px solid var(--across-yellow);
  outline-offset: 2px;
}
body[data-experience="scene"] .sc-task-strip > .sc-task-hint {
  margin-left: auto;
  color: var(--across-muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
body[data-experience="scene"] .sc-task-hint:empty { display: none; }
/* On a phone the chat window is short, so the strip gives back rows: the
   label goes to screen readers only and the chips tighten. */
@media (max-width: 560px) {
  body[data-experience="scene"] .sc-task-strip { gap: 6px; padding: 8px 12px; }
  body[data-experience="scene"] .sc-task-strip > #sc-task-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  body[data-experience="scene"] .sc-task { min-height: 30px; padding: 3px 10px 3px 6px; font-size: 12px; gap: 5px; }
  body[data-experience="scene"] .sc-task i { width: 14px; height: 14px; }
  body[data-experience="scene"] .sc-task[aria-pressed="true"] i::after { left: 3px; width: 4px; height: 8px; }
  body[data-experience="scene"] .sc-task-strip > .sc-task-hint { font-size: 12px; }
}


/* The opening cue says who speaks first, so the empty conversation reads as
   waiting for you rather than as still loading. */
/* Standalone cues ("Dr. Keller is online.", "You start.") are the system
   speaking, not Dr. Keller, so they sit centred in the interface face with no
   bubble. Cues inside her messages keep the serif italic: that is her manner,
   before her words. */
body[data-experience="scene"] .sc-stream > .sc-cue-only {
  align-self: center;
  max-width: none;
  margin: 2px 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
body[data-experience="scene"] .sc-stream > .sc-cue-only .cue {
  margin: 0;
  color: var(--across-muted);
  font-family: inherit;
  font-size: 13px;
  font-style: normal;
}
body[data-experience="scene"] .sc-stream > .sc-first-cue .cue {
  color: var(--across-navy);
  font-size: 14px;
  font-weight: 700;
}

/* The send arrow is dim until there is something to send, then lights up. */
body[data-experience="scene"] .sc-send:not(:disabled):not(.is-ready) {
  background: var(--across-muted);
}
body[data-experience="scene"] .sc-send.is-ready { background: var(--across-coral); }
body[data-experience="scene"] .sc-send.is-ready:hover { background: var(--across-coral-press); }

/* In-page confirmation, replacing window.confirm. */
.across-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--across-white);
  color: var(--across-ink);
  box-shadow: 0 24px 60px rgba(7, 52, 95, 0.28);
}
.across-dialog::backdrop { background: rgba(7, 32, 56, 0.55); }
.across-dialog-panel { padding: 22px 22px 18px; }
.across-dialog h2 {
  margin: 0 0 8px;
  color: var(--across-navy);
  font-size: 20px;
  line-height: 1.25;
}
.across-dialog p {
  margin: 0;
  color: var(--across-ink);
  font-size: 15px;
  line-height: 1.5;
}
.across-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.across-dialog-actions button { width: auto; }
@media (max-width: 480px) {
  .across-dialog-actions { flex-direction: column-reverse; }
  .across-dialog-actions button { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .across-dialog[open] { animation: across-dialog-in 0.16s ease-out; }
}
@keyframes across-dialog-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   The conversation flows in the page
   It used to be a fixed-height card with its own scrollbar, so every row of
   chrome came out of the transcript. At a 1290x720 window, zoomed, two long
   replies filled it and the participant's own messages scrolled out of
   sight. Now the transcript is part of the page and uses the page's
   scrollbar. Dr. Keller's name and the tasks are pinned to the top of the
   window, and the message box is pinned to the bottom, so the whole window
   between them is conversation.
   ============================================================ */

/* Less air above the card. */
body[data-experience="scene"] #view-root:has(.sc-chat) { padding-top: 14px; padding-bottom: 0; }
/* At the latest message the pinned message box settles at the card's end, so
   the page's 88px bottom padding sat under it as dead space. */
body[data-experience="scene"] #main-content:has(.sc-chat) { padding-bottom: 0; }
body[data-experience="scene"] #view-root:has(.sc-chat) .page-back { margin: 0 0 10px; }

/* The site header scrolls away on this screen instead of pinning 86px over
   the conversation. */
body[data-experience="scene"]:has(.sc-chat) .sidebar { position: relative; }

/* No fixed height and no clipping: sticky children need the page to be their
   scroll container. The card is at least a window tall, so the message box
   starts at the bottom even before anything is said. */
body[data-experience="scene"] .sc-chat {
  height: auto;
  min-height: calc(100svh - 150px);
  max-height: none;
  overflow: visible;
}
body[data-experience="scene"] .sc-chat .sc-stream {
  flex: 1 0 auto;
  min-height: 0;
  overflow: visible;
  scroll-behavior: auto;
}

body[data-experience="scene"] .sc-chat-top {
  position: sticky;
  top: 0;
  z-index: 5;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 6px 14px -10px rgba(7, 52, 95, 0.35);
}
body[data-experience="scene"] .sc-chat-top .sc-chat-head { border-radius: 10px 10px 0 0; }

body[data-experience="scene"] .sc-chat-bottom {
  position: sticky;
  bottom: 0;
  z-index: 4;
  border-top: 1px solid var(--across-line);
  border-radius: 0 0 10px 10px;
  background: var(--across-white);
  box-shadow: 0 -8px 18px -12px rgba(7, 52, 95, 0.3);
}

/* A slimmer header: the name and presence do not need 74px. */
body[data-experience="scene"] .sc-chat-head { padding: 9px 16px; }
body[data-experience="scene"] .sc-chat-head .sc-av { width: 34px; height: 34px; font-size: 13px; }
body[data-experience="scene"] .sc-chat-head .sc-name { font-size: 16px; }

/* "The case in full" lives at the end of the task row. The row is the
   positioned box, so the case sheet still spans the full card width. */
body[data-experience="scene"] .sc-task-strip {
  position: relative;
  z-index: 3;
  flex: none;
  padding: 6px 8px 6px 16px;
}
body[data-experience="scene"] .sc-task-strip > .sc-task-hint { margin-left: 4px; }
/* "The case in full" is a plain text button at the end of the task row. */
body[data-experience="scene"] .sc-case-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin-left: auto;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--across-blue-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
body[data-experience="scene"] .sc-case-toggle::before {
  content: '';
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
body[data-experience="scene"] .sc-case-toggle[aria-expanded="true"]::before { transform: rotate(135deg); }
body[data-experience="scene"] .sc-case-toggle:hover { background: var(--across-cloud); }
body[data-experience="scene"] .sc-case-toggle:focus-visible {
  outline: 3px solid var(--across-yellow);
  outline-offset: 2px;
}

/* The end-of-conversation bar is one slim line, not a band. */
body[data-experience="scene"] .sc-nudge {
  gap: 6px 12px;
  padding: 6px 12px 6px 16px;
  font-size: 13px;
  line-height: 1.35;
}
body[data-experience="scene"] .sc-nudge .sc-finish {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

/* A phone keeps the same budget, with smaller margins. */
@media (max-width: 560px) {
  body[data-experience="scene"] #view-root:has(.sc-chat) { padding-top: 8px; }
  body[data-experience="scene"] .sc-chat { min-height: calc(100svh - 150px); }
  body[data-experience="scene"] .sc-task-strip { padding: 6px 8px 6px 12px; }
  body[data-experience="scene"] .sc-case-toggle { padding: 0 4px; }
  /* The ordinary "end when you are ready" line is said again in the dialog
     the button opens, so on a phone the button stands alone. When Dr. Keller
     closes the conversation herself (.is-closed), her line stays. */
  body[data-experience="scene"] .sc-nudge.is-choice { justify-content: flex-end; padding: 5px 12px; }
  body[data-experience="scene"] .sc-nudge.is-choice > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}


/* ============================================================
   The case panel
   Two overlay versions of "The case in full" both covered something the
   participant needed: first the transcript, then the message box. The case
   now opens beside the conversation. On a window wide enough for both, it is
   a column next to the chat and nothing is covered. Below that there is no
   room beside it, so it becomes a full-screen sheet with a Close button: it
   covers the conversation completely and on purpose, never partly by accident.
   ============================================================ */
body[data-experience="scene"] .sc-case-panel[hidden] { display: none; }
body[data-experience="scene"] .sc-case-panel {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: var(--across-white);
  box-shadow: var(--across-shadow);
  color: var(--across-ink);
}
body[data-experience="scene"] .sc-case-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 12px 20px;
  border-bottom: 1px solid var(--across-line);
}
body[data-experience="scene"] .sc-case-panel-head h2 {
  margin: 0;
  color: var(--across-navy);
  font-size: 18px;
}
body[data-experience="scene"] .sc-case-panel-head h2:focus { outline: none; }
body[data-experience="scene"] .sc-case-panel-head .secondary { min-height: 36px; padding: 0 14px; font-size: 14px; }
body[data-experience="scene"] .sc-case-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px 6px;
  font-size: 15px;
  line-height: 1.55;
}
body[data-experience="scene"] .sc-case-panel-body p { margin: 0 0 12px; }
body[data-experience="scene"] .sc-case-panel-body strong { color: var(--across-navy); }
body[data-experience="scene"] .sc-case-panel-foot {
  padding: 8px 20px 14px;
  border-top: 1px solid var(--across-line);
}
body[data-experience="scene"] .sc-case-panel-foot .link-button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0;
  color: var(--across-blue-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Wide enough for both: the page widens and the case is a column beside the
   chat, pinned in view while the conversation scrolls. */
@media (min-width: 960px) {
  body[data-experience="scene"] #view-root:has(.sc-practice.is-case-open) { width: min(1240px, calc(100% - 48px)); }
  body[data-experience="scene"] .sc-practice.is-case-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 20px;
    align-items: start;
  }
  body[data-experience="scene"] .sc-practice.is-case-open .sc-case-panel {
    position: sticky;
    top: 12px;
    max-height: calc(100svh - 24px);
  }
}

/* Too narrow for both: a full-screen sheet. */
@media (max-width: 959px) {
  body[data-experience="scene"] .sc-case-panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    border-radius: 0;
  }
}

@media print {
  body[data-print="case"] .sidebar,
  body[data-print="case"] .page-back,
  body[data-print="case"] .sc-chat,
  body[data-print="case"] .sc-case-panel-head .secondary,
  body[data-print="case"] .sc-case-panel-foot { display: none !important; }
  body[data-print="case"] .sc-practice { display: block !important; }
  body[data-print="case"] .sc-case-panel {
    position: static !important;
    max-height: none !important;
    box-shadow: none !important;
  }
  body[data-print="case"] .sc-case-panel-body { overflow: visible !important; }
}