.copilot-concept {
  position: relative;
  z-index: 1;
  overflow: clip;
}

.copilot-concept section {
  scroll-margin-top: 76px;
}

/* Width comes from the shared .shell rule in product-page.css. */
.copilot-shell {
  position: relative;
  z-index: 2;
}

.copilot-hero {
  position: relative;
  display: flex;
  min-height: max(760px, 100svh);
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(246, 239, 234, 0.09);
  /* homepage system: warm execution wash over the base, neutral seams */
  background:
    radial-gradient(circle at 76% 49%, rgba(var(--execution-rgb), 0.035), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 44%);
}

.copilot-hero::before,
.context-section::before,
.review-section::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 1px),
      rgba(246, 239, 234, 0.055) 50%,
      transparent calc(50% + 1px)
    ),
    linear-gradient(
      0deg,
      transparent calc(50% - 1px),
      rgba(246, 239, 234, 0.035) 50%,
      transparent calc(50% + 1px)
    );
  opacity: 0.5;
  content: '';
  pointer-events: none;
}

.copilot-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(32px, 2.8vw, 48px);
  align-items: center;
  padding: var(--section-pad-y) 0 var(--section-pad-y-tight);
}

.copilot-hero__copy {
  position: relative;
  z-index: 3;
}

.copilot-hero__copy h1,
.context-copy h2,
.signals-copy h2,
.review-copy h2 {
  margin: 0;
  color: #f8f2ee;
  font-weight: 680;
  letter-spacing: -0.075em;
  line-height: 0.9;
}

.copilot-hero__copy h1 {
  max-width: 11ch;
  font-size: clamp(3.4rem, 4.4vw, 5rem);
}

.copilot-hero__copy h1 span,
.context-copy h2 span,
.signals-copy h2 span,
.review-copy h2 span {
  color: var(--mint);
}

.copilot-hero__copy > p {
  max-width: 37rem;
  margin: 28px 0 0;
  color: #aaa09b;
  font-size: clamp(1.03rem, 1.35vw, 1.24rem);
  line-height: 1.52;
}

.copilot-action {
  display: inline-flex;
  min-height: 56px;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
  padding: 8px 10px 8px 22px;
  border: 1px solid rgba(54, 255, 171, 0.55);
  border-radius: 10px;
  background: var(--mint);
  color: #05261d;
  font-size: 0.86rem;
  font-weight: 730;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.copilot-action svg {
  width: 34px;
  height: 34px;
  padding: 9px;
  border-radius: 50%;
  background: #13211d;
  color: var(--mint);
  transition: transform 180ms ease;
}

.copilot-action:hover,
.copilot-action:focus-visible {
  box-shadow: 0 16px 44px rgba(54, 255, 171, 0.12);
  transform: translateY(-2px);
}
.copilot-action:hover svg {
  transform: translateX(2px);
}

.copilot-stage {
  position: relative;
  padding-top: 8px;
}

.hy-composer {
  display: flex;
  width: 90%;
  min-height: 62px;
  gap: 14px;
  align-items: center;
  margin-left: auto;
  padding: 0 12px 0 20px;
  border-radius: 18px;
}

.copilot-spark {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  background: var(--mint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 52.9922 76.457' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M52.9922 65.2041H39.6885V38.0977H26.9961V49.3506H13.3037V76.457H0V11.2539H13.3037V36.9717H25.9961V25.7188H39.6885V0H52.9922V65.2041Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 52.9922 76.457' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M52.9922 65.2041H39.6885V38.0977H26.9961V49.3506H13.3037V76.457H0V11.2539H13.3037V36.9717H25.9961V25.7188H39.6885V0H52.9922V65.2041Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.hy-composer strong {
  flex: 1;
  color: #aca39f;
  font-size: 1rem;
  font-weight: 470;
}
.hy-composer button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mint);
  color: #08251e;
  cursor: pointer;
  place-items: center;
}
.hy-composer button svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.stage-market {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 0.62fr 0.62fr minmax(0, 0.9fr);
  width: 90%;
  min-height: 64px;
  align-items: center;
  margin: 14px 0 0 auto;
  padding: 0 20px;
  border-radius: 16px;
  color: #ebe5e1;
}

.stage-market__asset,
.context-market > div {
  display: flex;
  gap: 11px;
  align-items: center;
}
.hype-mark {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: #0c372d;
  place-items: center;
}
.hype-mark img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}
.stage-market strong {
  font-size: 0.87rem;
  font-weight: 620;
}
.stage-market > span {
  color: #c2b9b5;
  font-family: var(--mono);
  font-size: 0.78rem;
}
.stage-market > b {
  color: var(--mint);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 560;
}
.stage-market > svg {
  width: 100%;
  height: 38px;
}
.stage-market > svg path,
.context-market > svg path {
  fill: none;
  stroke: var(--mint);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.stage-review {
  width: 98%;
  margin: 14px 0 0 auto;
  overflow: hidden;
  border-radius: 20px;
  padding: 18px;
}

.stage-review__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}
.stage-review__head > div > span {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid rgba(255, 77, 94, 0.52);
  border-radius: 5px;
  background: rgba(255, 77, 94, 0.09);
  color: #ff5968;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stage-review__head p {
  margin: 8px 0 0;
  color: #8c8380;
  font-family: var(--mono);
  font-size: 0.7rem;
}
.stage-review__head p i {
  margin: 0 4px;
  font-style: normal;
}
.stage-review__head p b {
  color: var(--mint);
  font-weight: 600;
}
.stage-review__head > small {
  color: #746c69;
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.stage-flags {
  margin-top: 13px;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
}
.stage-flag {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(246, 239, 234, 0.08);
}
.stage-flag:last-child {
  border-bottom: 0;
}
.stage-flag > i,
.stage-flag--risk > i,
.stage-flag--warn > i,
.stage-flag span strong {
  display: block;
  color: #f3ece8;
  font-size: 0.82rem;
  font-weight: 640;
}
.stage-flag span small {
  display: block;
  margin-top: 4px;
  color: #8e8581;
  font-size: 0.64rem;
  line-height: 1.3;
}

.stage-order {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 13px 0 0;
  padding: 12px;
  border: 1px solid rgba(246, 239, 234, 0.1);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.13);
}
.stage-order > div {
  padding: 0 10px;
  border-left: 1px solid rgba(246, 239, 234, 0.09);
}
.stage-order > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.stage-order dt {
  color: #817976;
  font-family: var(--mono);
  font-size: 0.54rem;
  text-transform: uppercase;
}
.stage-order dd {
  margin: 7px 0 0;
  color: var(--mint);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 560;
  white-space: nowrap;
}
.stage-order s {
  color: #6f6764;
}
.stage-order dd span {
  color: #77706d;
}
.stage-review__actions {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 10px;
  margin-top: 13px;
}
.stage-review__actions button,
.stage-review__actions button:last-child,
.stage-review.is-adjusted {
  border-color: rgba(54, 255, 171, 0.38);
  box-shadow:
    0 24px 68px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(54, 255, 171, 0.12);
}

/* composed datum markers: pinned to the spine line each section
   already draws — never floating over content */
.section-datum {
  position: absolute;
  top: 30px;
  left: 50%;
  z-index: 2;
  width: 17px;
  height: 17px;
  transform: translateX(-50%);
  pointer-events: none;
}

.section-datum::before,
.section-datum::after {
  position: absolute;
  content: '';
  background: rgba(246, 239, 234, 0.42);
}
.section-datum::before {
  top: 0;
  left: 8px;
  width: 1px;
  height: 17px;
}
.section-datum::after {
  top: 8px;
  left: 0;
  width: 17px;
  height: 1px;
}

/* Height comes from content plus the shared section rhythm; min-height is only a
   floor so short sections still feel substantial. */
.context-section,
.review-section {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(246, 239, 234, 0.09);
}

/* ---- signals: the flagship surface ------------------------- */

.signals-section {
  position: relative;
  display: flex;
  min-height: 0;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(246, 239, 234, 0.09);
}

.signals-section::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 1px),
      rgba(246, 239, 234, 0.055) 50%,
      transparent calc(50% + 1px)
    ),
    linear-gradient(
      0deg,
      transparent calc(50% - 1px),
      rgba(246, 239, 234, 0.035) 50%,
      transparent calc(50% + 1px)
    );
  opacity: 0.5;
  content: '';
  pointer-events: none;
}

.signals-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(42px, 4vw, 60px);
  align-items: center;
  padding: var(--section-pad-y) 0;
}

.signals-copy h2 {
  max-width: 12ch;
  font-size: clamp(3.45rem, 4.5vw, 4.1rem);
}
.signals-copy > p {
  max-width: 30rem;
  margin: 28px 0 0;
  color: #a79d98;
  font-size: 1.15rem;
  line-height: 1.52;
}

.signals-note {
  margin-top: 22px !important;
  color: #746c69 !important;
  font-family: var(--mono);
  font-size: 0.72rem !important;
  letter-spacing: 0.04em;
}

/* ============================================================
   Signals — Asset Library 199:9156. The three cards are the
   design's own layers, exported as SVG so their glass, frost and
   radii survive, and placed at their node coordinates inside the
   990x827 frame. They rise in on scroll, main card first.
   ============================================================ */

.signal-composition {
  position: relative;
  width: min(100%, 640px);
  margin-inline: auto;
  aspect-ratio: 990 / 827;
}

.sig-layer {
  position: absolute;
  margin: 0;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sig-layer img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* The cards are real glass (white at 4%). SVG cannot carry Figma's
   background blur, so without this the overlapping cards read as
   see-through and the main card's rows bleed through them. The frost
   sits behind the artwork; radii are each card's own, as a percentage
   so they stay circular at any scale. */
.sig-layer::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: '';
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

.sig-layer--main::before {
  border-radius: 5.995% / 3.113%;
}
.sig-layer--sol::before {
  border-radius: 5.995% / 11.905%;
}
.sig-layer--hype::before {
  border-radius: 5.995% / 16.026%;
}

/* node coordinates within the 990x827 frame */
.sig-layer--main {
  left: 27.677%;
  top: 1.451%;
  width: 42.121%;
  z-index: 2;
}
.sig-layer--sol {
  left: 2.02%;
  top: 28.416%;
  width: 42.121%;
  z-index: 3;
}
.sig-layer--hype {
  left: 55.859%;
  top: 69.286%;
  width: 42.121%;
  z-index: 3;
}

.copilot-reveal.is-visible .sig-layer,
.signal-composition.is-visible .sig-layer,
.sig-layer.in {
  opacity: 1;
  transform: none;
}

/* when JS choreographs the entrance it stages each layer itself */
.signal-composition.play .sig-layer {
  opacity: 0;
  transform: translateY(20px);
}
.signal-composition.play .sig-layer.in {
  opacity: 1;
  transform: none;
}

.copilot-reveal.is-visible .sig-layer--sol {
  transition-delay: 150ms;
}
.copilot-reveal.is-visible .sig-layer--hype {
  transition-delay: 290ms;
}

@media (prefers-reduced-motion: reduce) {
  .sig-layer {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.context-section {
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(var(--paper-rgb), 0.014), transparent 60%), #1c1717;
}
.context-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(42px, 4vw, 54px);
  align-items: center;
  padding: var(--section-pad-y) 0;
}
.context-copy h2 {
  max-width: 13ch;
  font-size: clamp(3.45rem, 4.5vw, 4.1rem);
}
.context-copy {
  --context-measure: 31rem;
}
.context-copy > p {
  max-width: var(--context-measure);
  margin: 28px 0 0;
  color: #a79d98;
  font-size: 1.15rem;
  line-height: 1.52;
}

/* the buttons share the paragraph's measure so the copy and the question
   list read as one column */
.context-tabs {
  display: grid;
  width: 100%;
  max-width: var(--context-measure);
  gap: 9px;
  margin-top: 52px;
}
.context-tabs button {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 46px;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 20px;
  border: 1px solid rgba(246, 239, 234, 0.12);
  border-radius: 10px;
  background: rgba(246, 239, 234, 0.018);
  color: #8e8581;
  cursor: pointer;
  text-align: left;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}
.context-tabs button::before {
  position: absolute;
  inset: 7px auto 7px 7px;
  width: 3px;
  border-radius: 999px;
  background: var(--mint);
  opacity: 0;
  content: '';
}
.context-tabs button[aria-selected='true'] {
  border-color: rgba(246, 239, 234, 0.22);
  background: rgba(246, 239, 234, 0.035);
  color: #f4ede9;
}
.context-tabs button[aria-selected='true']::before {
  opacity: 1;
}
.context-tabs button span {
  font-size: 0.94rem;
  font-weight: 570;
}
.context-tabs button i {
  display: grid;
  width: 26px;
  height: 26px;
  flex: none;
  font-size: 0.8rem;
  border: 1px solid rgba(246, 239, 234, 0.16);
  border-radius: 50%;
  font-style: normal;
  place-items: center;
}
.context-tabs button[aria-selected='true'] i {
  border-color: var(--mint);
  background: var(--mint);
  color: #09261e;
}

.context-answer {
  overflow: hidden;
  border-radius: 18px;
}
.context-market {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 0.65fr 0.65fr 1fr auto;
  gap: 18px;
  min-height: 82px;
  align-items: center;
  padding: 0 22px;
  border-bottom: 1px solid rgba(246, 239, 234, 0.11);
}
.context-market strong {
  font-size: 0.96rem;
  font-weight: 640;
}
.context-market > b,
.context-market > em {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 560;
}
.context-market > b {
  color: #e7e1dd;
}
.context-market > em {
  color: var(--mint);
}
.context-market > svg {
  width: 100%;
  height: 40px;
}
.context-market > small {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid rgba(246, 239, 234, 0.13);
  border-radius: 9px;
  color: #b6ada8;
  white-space: nowrap;
}
.context-market > small i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
}

.answer-body {
  padding: 26px;
}
.answer-body h3 {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0;
  color: #f5eeea;
  font-family: var(--mono);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 520;
  letter-spacing: 0.01em;
}
.answer-body h3 span {
  color: var(--mint);
}
.answer-body h3 b {
  font-weight: inherit;
}
.answer-body > p {
  margin: 22px 0 0;
  color: #a69d98;
  font-size: 1rem;
}
.evidence-list {
  display: grid;
  gap: 10px;
  margin-top: 25px;
}
.evidence-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 84px;
  padding: 12px 17px;
  border: 1px solid rgba(246, 239, 234, 0.12);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.13);
}
.evidence-icon {
  display: grid;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(246, 239, 234, 0.1);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.16);
  color: var(--mint);
  place-items: center;
}
.evidence-icon svg {
  width: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.evidence-row div strong {
  display: block;
  color: #f4ede9;
  font-size: 0.95rem;
  font-weight: 620;
}
.evidence-row div small {
  display: block;
  margin-top: 6px;
  color: #918884;
  font-size: 0.76rem;
}
.evidence-row > b {
  color: var(--mint);
  font-family: var(--mono);
  font-size: 0.83rem;
  font-weight: 560;
}
.context-answer > footer {
  display: flex;
  min-height: 58px;
  gap: 12px;
  align-items: center;
  padding: 0 28px;
  border-top: 1px solid rgba(246, 239, 234, 0.1);
  color: #9a918d;
  font-size: 0.8rem;
}
.context-answer > footer svg {
  width: 22px;
  fill: none;
  stroke: var(--mint);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.context-answer.is-changing .answer-body {
  opacity: 0.45;
  transform: translateY(5px);
}
.answer-body {
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.review-section {
  padding: var(--section-pad-y) 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.008), transparent 45%);
}
/* The review session reuses the home page's check scene component, so
   it inherits .stage-review, .stage-flag and .stage-order styling. It
   only needs its own width and rhythm inside this section. */
/* The review session is the hero's card, unchanged. It uses the same
   .copilot-stage wrapper so every size, colour, border and radius is
   inherited; only its placement in the section is set here. */
.review-session {
  width: min(100%, 420px);
  margin: 0;
}

/* copy and CTA on the left, the review card on the right */
.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.review-copy h2 {
  max-width: 16ch;
  font-size: clamp(3.7rem, 4.9vw, 4.35rem);
}
.review-copy > p {
  max-width: 34rem;
  margin: 26px 0 0;
  color: #a69d98;
  font-size: 1.1rem;
  line-height: 1.52;
}
.review-copy .review-assure {
  margin-top: 22px;
  color: #9d9490;
  font-size: 0.92rem;
}
.review-copy .copilot-action {
  margin-top: 20px;
}

.copilot-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms ease,
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.copilot-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1120px) {
  .copilot-hero__inner,
  .context-layout {
    grid-template-columns: 1fr;
  }
  .copilot-hero__inner {
    gap: 68px;
    padding-top: 138px;
  }
  .copilot-hero__copy h1 {
    max-width: 9.6ch;
  }

  .signals-layout {
    grid-template-columns: 1fr;
    gap: 54px;
  }
  .signals-copy {
    order: -1;
  }
  .signal-stack {
    max-width: 640px;
  }
  .context-layout {
    gap: 66px;
  }
  .context-copy h2 {
    max-width: 13ch;
  }
  .context-copy {
    --context-measure: 40rem;
  }
  .context-tabs {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .context-tabs button::before {
    inset: auto 12px 7px;
    width: auto;
    height: 3px;
  }
}

@media (max-width: 820px) {
  .copilot-hero {
    min-height: auto;
  }
  .copilot-hero__inner {
    padding: 132px 0 82px;
  }
  .context-section {
    min-height: auto;
  }
  .context-layout {
    padding: 104px 0 90px;
  }
  .context-tabs {
    margin-top: 40px;
  }
  .context-tabs button::before {
    inset: 8px auto 8px 8px;
    width: 3px;
    height: auto;
  }
  .context-market {
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 78px;
  }
  .context-market > svg,
  .context-market > small {
    display: none;
  }
  .review-section {
    padding: 102px 0 90px;
  }
  .review-layout {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .review-session {
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .copilot-hero__inner {
    gap: 54px;
    padding-top: 126px;
  }
  .copilot-hero__copy h1 {
    max-width: 8.5ch;
    font-size: clamp(3.6rem, 16vw, 4.85rem);
    line-height: 0.92;
  }
  .copilot-hero__copy > p {
    margin-top: 25px;
    font-size: 0.98rem;
  }
  .copilot-action {
    min-height: 52px;
    margin-top: 24px;
    padding-left: 18px;
  }
  .hy-composer,
  .stage-market,
  .stage-review {
    width: 100%;
  }
  .hy-composer {
    padding-left: 15px;
  }
  .hy-composer strong {
    font-size: 0.85rem;
  }
  .stage-market {
    grid-template-columns: minmax(0, 1.25fr) 0.65fr 0.65fr;
    padding: 0 12px;
  }
  .stage-market > svg {
    display: none;
  }
  .stage-market strong {
    font-size: 0.73rem;
  }
  .stage-market > span,
  .stage-market > b {
    font-size: 0.65rem;
  }
  .stage-review {
    padding: 14px;
  }
  .stage-review__head > small {
    display: none;
  }
  .stage-flag {
    min-height: 68px;
    padding: 10px;
  }
  .stage-flag span small {
    max-width: 31ch;
    font-size: 0.58rem;
  }
  .stage-order {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }
  .stage-order > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .context-copy h2,
  .signals-copy h2,
  .review-copy h2 {
    font-size: clamp(3.3rem, 14.5vw, 4.5rem);
  }
  .signals-layout {
    padding: 92px 0 80px;
  }
  .signal-fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .signal-fields > div {
    padding: 0;
    border-left: 0;
  }
  .sig-conf small {
    display: none;
  }
  .context-copy > p,
  .review-copy > p {
    font-size: 0.98rem;
  }
  .context-answer {
    border-radius: 14px;
  }
  .context-market {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 0 14px;
  }
  .context-market > em {
    display: none;
  }
  .answer-body {
    padding: 18px 14px;
  }
  .answer-body h3 {
    gap: 9px;
    font-size: 1rem;
  }
  .answer-body > p {
    margin-top: 16px;
    font-size: 0.84rem;
  }
  .evidence-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    min-height: 82px;
    padding: 10px;
  }
  .evidence-icon {
    width: 40px;
    height: 40px;
  }
  .evidence-row > b {
    display: none;
  }
  .evidence-row div strong {
    font-size: 0.8rem;
  }
  .evidence-row div small {
    font-size: 0.66rem;
  }
  .context-answer > footer {
    padding: 0 15px;
    font-size: 0.66rem;
  }
}

/* ============================================================
   Choreography — the hero stage plays a live Copilot session,
   the context card thinks before it answers, the review board
   assembles on scroll. Every hidden state is gated behind a JS
   `.play` class, so no-JS and reduced-motion get the full page.
   ============================================================ */

/* ============================================================
   Figma Glass parity — Light -45deg @ 30%, Frost ~107.
   CSS approximation: neutral film with a top-left light
   gradient, heavy frost blur, inset edge highlights. Overlap
   becomes an asset: stack panels and the blur does the depth.
   ============================================================ */

:root {
  --glass-film:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 62%),
    rgba(255, 255, 255, 0.035);
  --glass-frost: blur(32px) saturate(150%);
  --glass-line: rgba(255, 255, 255, 0.08);
  --glass-light: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 1px 0 0 rgba(255, 255, 255, 0.05);
}

/* ---- hero stage session ------------------------------------ */

.stage-think {
  display: flex;
  justify-content: flex-start;
  width: 90%;
  min-height: 24px;
  margin: 12px 0 0 auto;
  padding-left: 22px;
}

.copilot-stage .stage-market,
.copilot-stage .stage-review {
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.copilot-stage.play .stage-market,
.copilot-stage.play .stage-review {
  opacity: 0;
  transform: translateY(16px);
}

.copilot-stage.play .stage-market.in,
.copilot-stage.play .stage-review.in {
  opacity: 1;
  transform: none;
}

.stage-flag,
.stage-order,
.stage-review__actions {
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.copilot-stage.play .stage-flag,
.copilot-stage.play .stage-order,
.copilot-stage.play .stage-review__actions {
  opacity: 0;
  transform: translateY(10px);
}

.copilot-stage.play .stage-flag.in,
.copilot-stage.play .stage-order.in,
.copilot-stage.play .stage-review__actions.in {
  opacity: 1;
  transform: none;
}

/* order adjustments land after the row: old value stays, then the
   arrow + corrected value slide in and the old value dims */
.stage-order dd s,
.stage-order dd span,
.stage-order dd s + span + * {
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.copilot-stage.play .stage-order dd s {
  color: #a89f9b;
  text-decoration: none;
}
.copilot-stage.play .stage-order dd span {
  opacity: 0;
  transform: translateX(-5px);
}

.copilot-stage.play .stage-order.adjusted dd s {
  color: #6f6764;
  text-decoration: line-through;
}
.copilot-stage.play .stage-order.adjusted dd span {
  opacity: 1;
  transform: none;
}

.stage-order dd {
  position: relative;
}

.copilot-stage.play .stage-order dd .adj {
  opacity: 0;
  transform: translateX(-6px);
  display: inline-block;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
.copilot-stage.play .stage-order.adjusted dd .adj {
  opacity: 1;
  transform: none;
}

/* send button acknowledgement */
@media (prefers-reduced-motion: no-preference) {
  .hy-composer button.sent {
    animation: send-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@keyframes send-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.84);
  }
  100% {
    transform: scale(1);
  }
}

/* ---- context: think before answering ----------------------- */

.answer-think {
  display: flex;
  min-height: 20px;
  margin: 18px 0 0;
}

.context-answer .evidence-row {
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.context-answer.assemble .evidence-row {
  opacity: 0;
  transform: translateY(9px);
}
.context-answer.assemble .evidence-row.in {
  opacity: 1;
  transform: none;
}

/* ---- review board assembly --------------------------------- */

/* adjusted values flash when changes are applied */
@media (prefers-reduced-motion: no-preference) {
  [data-adjusted-value].flash {
    animation: value-flash 0.7s ease;
  }
}

@keyframes value-flash {
  0% {
    color: #f6efea;
    text-shadow: 0 0 14px rgba(54, 255, 171, 0.8);
  }
  100% {
    color: var(--mint);
    text-shadow: none;
  }
}

@media (max-width: 560px) {
  .stage-think {
    width: 100%;
    padding-left: 16px;
  }
}

/* ============================================================
   Fluid sizing — the stage is a size container and its internals
   scale as equations of the container width (cqi), clamped so the
   composition reads like a dense product widget at every size
   instead of stretching to fill big screens.
   ============================================================ */

/* The stage is the design's 401px chat column. Beside the copy it holds that
   exact canvas size; once the hero stacks it grows with the column instead of
   stranding 160-330px of dead space to its right. One equation, no per-size
   overrides: 401px is the floor, 46vw the growth term, 620px the ceiling. */
.copilot-stage {
  width: min(100%, clamp(401px, 46vw, 620px));
  min-height: 0;
  margin-inline: auto;
}

@media (min-width: 1121px) {
  /* two-column hero: pin to the design width and sit against the right edge */
  .copilot-stage {
    width: min(401px, 100%);
    margin-inline: auto 0;
  }
  .copilot-hero__inner {
    grid-template-columns: minmax(0, 1fr) 401px;
  }
}

/* ---- context card: same container equations ---------------- */

.context-answer {
  container-type: inline-size;
  width: 100%;
  max-width: 780px;
}

@container (min-width: 200px) {
  .context-market {
    min-height: clamp(56px, 9.6cqi, 75px);
    padding: 0 clamp(14px, 2.6cqi, 20px);
    gap: clamp(10px, 2.2cqi, 17px);
  }

  .context-market strong {
    font-size: clamp(0.78rem, 1.85cqi, 0.9rem);
  }
  .context-market > b,
  .context-market > em {
    font-size: clamp(0.68rem, 1.55cqi, 0.78rem);
  }
  .context-market > svg {
    height: clamp(26px, 4.6cqi, 36px);
  }
  .context-market > small {
    padding: clamp(6px, 1.1cqi, 9px) clamp(8px, 1.5cqi, 12px);
    font-size: clamp(0.62rem, 1.35cqi, 0.72rem);
  }

  .answer-body {
    padding: clamp(16px, 3.3cqi, 26px);
  }
  .answer-body h3 {
    gap: clamp(10px, 2cqi, 16px);
    font-size: clamp(1.05rem, 2.8cqi, 1.55rem);
  }
  .answer-body > p {
    margin-top: clamp(14px, 2.8cqi, 22px);
    font-size: clamp(0.84rem, 1.9cqi, 0.95rem);
  }
  .answer-think {
    margin-top: clamp(12px, 2.3cqi, 18px);
  }

  .evidence-list {
    gap: clamp(7px, 1.3cqi, 10px);
    margin-top: clamp(16px, 3.2cqi, 25px);
  }

  .evidence-row {
    grid-template-columns: clamp(40px, 7.4cqi, 58px) minmax(0, 1fr) auto;
    gap: clamp(10px, 2cqi, 16px);
    min-height: clamp(60px, 10cqi, 78px);
    padding: clamp(9px, 1.6cqi, 12px) clamp(11px, 2.2cqi, 17px);
  }

  .evidence-icon {
    width: clamp(36px, 6.4cqi, 50px);
    height: clamp(36px, 6.4cqi, 50px);
  }
  .evidence-icon svg {
    width: clamp(19px, 3.3cqi, 26px);
  }
  .evidence-row div strong {
    font-size: clamp(0.8rem, 1.75cqi, 0.92rem);
  }
  .evidence-row div small {
    margin-top: 4px;
    font-size: clamp(0.64rem, 1.4cqi, 0.74rem);
  }
  .evidence-row > b {
    font-size: clamp(0.7rem, 1.5cqi, 0.81rem);
  }

  .context-answer > footer {
    min-height: clamp(44px, 7.4cqi, 56px);
    padding: 0 clamp(16px, 3.5cqi, 28px);
    font-size: clamp(0.68rem, 1.5cqi, 0.78rem);
  }

  .context-answer > footer svg {
    width: clamp(17px, 2.8cqi, 22px);
  }
}

/* ---- review board: same container equations ---------------- */

@container (min-width: 200px) {
}

/* ---- context tabs + benefits: viewport equations ----------- */

.context-tabs {
  margin-top: clamp(32px, 3.6vw, 48px);
  gap: clamp(7px, 0.65vw, 9px);
}

.context-tabs button {
  min-height: clamp(42px, 3.2vw, 48px);
  padding: 0 clamp(9px, 0.8vw, 11px) 0 clamp(16px, 1.5vw, 21px);
}

.context-tabs button span {
  font-size: clamp(0.86rem, 1.05vw, 0.95rem);
}
.context-tabs button i {
  width: clamp(24px, 1.9vw, 27px);
  height: clamp(24px, 1.9vw, 27px);
  font-size: 0.8rem;
}

/* ============================================================
   Asset Library design pass — surfaces, chips, values and the
   chat language taken from the Figma components
   ============================================================ */

/* the hero stage is the design's chat column (53:2752): an outer
   white/4 panel at 401px wrapping input, market and the review
   message card at its exact 53:3396 dimensions */

.copilot-stage {
  padding: 16.8px;
  border: 1px solid var(--glass-line);
  border-radius: 24px;
  background: var(--glass-film);
  box-shadow: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-frost);
  backdrop-filter: var(--glass-frost);
}

.hy-composer,
.stage-market {
  width: 100%;
  margin-left: 0;
  border: 0;
  background: var(--glass-film);
  box-shadow: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-frost);
  backdrop-filter: var(--glass-frost);
}

.hy-composer {
  min-height: 50px;
  padding: 0 8px 0 14px;
  border-radius: 24px;
}
.hy-composer strong {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
}
.hy-composer .copilot-spark {
  width: 15px;
  height: 15px;
}
.hy-composer button {
  width: 30px;
  height: 30px;
}
.hy-composer button svg {
  width: 16px;
}
.model-tag {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  white-space: nowrap;
}

.stage-market {
  min-height: 48px;
  margin-top: 12px;
  padding: 0 12px;
  border-radius: 12px;
}
.stage-market strong {
  font-size: 12px;
}
.stage-market > span,
.stage-market > b {
  font-size: 11px;
}
.stage-market > svg {
  height: 28px;
}
.hype-mark {
  width: 24px;
  height: 24px;
}
.hype-mark img {
  width: 18px;
  height: 18px;
}

.stage-think {
  width: 100%;
  min-height: 20px;
  margin: 10px 0 0;
  padding-left: 10px;
}

/* review message card — node 53:3396 exact */
.stage-review {
  width: 100%;
  margin: 12px 0 0;
  padding: 6px 8px 8px;
  border: 0;
  border-radius: 12px;
  background: var(--glass-film);
  box-shadow: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-frost);
  backdrop-filter: var(--glass-frost);
}

.stage-review__head {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.stage-review__head > small {
  display: none;
}

.stage-review__head > div > span {
  padding: 2px 6px;
  border: 1px solid rgba(255, 58, 84, 0.3);
  border-radius: 3px;
  background: rgba(255, 58, 84, 0.12);
  color: #ff3a54;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.stage-review__head p {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
}

.stage-review__head p i {
  margin: 0 4px;
  color: rgba(255, 255, 255, 0.35);
}
.stage-review__head p b {
  color: var(--mint);
}

/* flags: black overlay list, glowing dots, design chips */
.stage-flags {
  margin-top: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.stage-flag {
  grid-template-columns: 6px minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
  padding: 8px 12px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}

.stage-flag span strong {
  font-size: 13px;
}
.stage-flag span small {
  margin-top: 2px;
  font-size: 11px;
}

.stage-flag > b,
.stage-flag--risk > b,
.stage-flag--warn > b,

/* order values: label/value rows inside the amber working glow */
.stage-order {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 153, 0, 0.38);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.14);
}

.stage-order > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
  padding: 0;
  border-left: 0;
}

@property --oga {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.stage-order::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  padding: 1px;
  background: conic-gradient(
    from var(--oga),
    rgba(255, 153, 0, 0) 0turn 0.72turn,
    rgba(255, 153, 0, 0.9) 0.85turn,
    rgba(255, 153, 0, 0) 0.98turn
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .stage-order::before {
    animation: order-glow 3.4s linear infinite;
  }
}

@keyframes order-glow {
  to {
    --oga: 360deg;
  }
}

.stage-order dt {
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}
.stage-order dd {
  margin: 0;
  color: var(--mint);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
}
.stage-order s {
  color: rgba(255, 255, 255, 0.4);
}
.stage-order dd span {
  color: rgba(255, 255, 255, 0.4);
}
.copilot-stage.play .stage-order dd s {
  color: rgba(255, 255, 255, 0.75);
}
.copilot-stage.play .stage-order.adjusted dd s {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
}

/* actions: design buttons — py 8, radius 8, 12px semibold */
.stage-review__actions {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.stage-review__actions button {
  min-height: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.stage-review__actions button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.stage-review__actions button:last-child {
  background: var(--mint);
  color: #01231e;
}
.stage-review__actions button:last-child:hover {
  background: var(--mint);
  filter: brightness(1.06);
}

.stage-stamp {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding-left: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  opacity: 0.6;
}

.ai-note {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  margin: 12px 0 0;
  padding: 0 4px;
}
.ai-note .copilot-spark {
  width: 13px;
  height: 13px;
  flex: none;
  margin-right: 6px;
  opacity: 0.4;
}
.ai-note p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

/* context: the chat component (53:2752) — bubble, table, input */
.context-answer {
  width: min(401px, 100%);
  max-width: none;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

@media (min-width: 1121px) {
  .context-layout {
    grid-template-columns: minmax(0, 1fr) 401px;
  }
}

.context-market {
  grid-template-columns: minmax(0, 1.2fr) auto auto;
  gap: 10px;
  min-height: 56px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.context-market strong {
  font-size: 12px;
}
.context-market > b,
.context-market > em {
  font-size: 11px;
}
.context-market > svg,
.context-market > small {
  display: none;
}

.answer-body {
  padding: 16px 12px 8px;
}

.chat-q {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-left: 32px;
}

.chat-bubble {
  display: inline-block;
  padding: 9px;
  border: 1px solid rgba(54, 255, 171, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(54, 255, 171, 0.13), rgba(54, 255, 171, 0.13)),
    rgba(255, 255, 255, 0.04);
  text-align: right;
}

.chat-bubble b {
  color: var(--mint);
  font-size: 11px;
  font-weight: 400;
  line-height: 15.6px;
}
.chat-stamp {
  color: #5e5e5e;
  font-size: 10px;
  line-height: 16px;
}

.answer-body > p {
  padding-right: 32px;
  margin-top: 12px;
  color: #fff;
  font-size: 11px;
  line-height: 15.6px;
}

.answer-think {
  margin-top: 10px;
}

.evidence-list {
  gap: 4px;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.evidence-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
  padding: 5px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 0;
  background: none;
}
.evidence-row:first-child {
  border-top: 0;
}
.evidence-icon {
  display: none;
}
.evidence-row div strong {
  color: #fff;
  font-size: 10.5px;
  font-weight: 400;
}
.evidence-row div small {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
}
.evidence-row > b {
  color: #e8edef;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
}
.evidence-row:first-child > b {
  color: #3cf2a0;
}

.ci-caret {
  width: 2px;
  height: 16px;
  border-radius: 12px;
  background: var(--mint);
}

@media (prefers-reduced-motion: no-preference) {
  .ci-caret {
    animation: m-caret-blink 1s steps(1) infinite;
  }
}

/* composer text states: blinking caret + placeholder tone */
.hy-composer strong .ci-caret {
  display: inline-block;
  margin-right: 7px;
  vertical-align: -3px;
}
.hy-composer strong.hyc-ph {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}
.context-answer .hy-composer {
  margin: 12px 8px 8px;
}

.context-answer > footer {
  gap: 2px;
  min-height: 0;
  padding: 8px 12px 10px;
  border-top: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}
.context-answer > footer svg {
  width: 16px;
  margin-right: 6px;
  opacity: 0.4;
}

/* signals layout: fixed-width cards + copy column */
.signals-layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
}

@media (max-width: 1120px) {
  .signals-layout {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .copilot-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}