/*
 * A conversation card beside a colour-coded visual panel, switched between
 * Intallecta's three industries by a segmented control underneath. Selecting
 * one types its prompt, shows the agent reaching for its sources, streams the
 * answer, and crossfades the panel into that industry's own graphic and
 * accent colour.
 *
 * The panel is three absolutely-positioned faces stacked on top of each other,
 * each carrying its own static accent in `--fc`. Crossfading between two
 * differently-coloured elements this way sidesteps a real CSS limitation: a
 * custom property swap does not animate the gradients built from it, so a
 * single face reacting to a shared `--c` would snap colour instead of fading.
 *
 * The glass is real backdrop-filter, so this needs something behind it: either
 * an ancestor with a background, or the component's own `backdrop` layer.
 */

.GJ1vI2UuSwCH5xUIsuAs {
  /* Overridden inline by the props. */
  --c: #ff5b19;
  --c-ink: #a83600;
  --c-soft: rgba(255, 91, 25, 0.28);
  --c-faint: rgba(255, 91, 25, 0.12);
  --maxw: 78rem;
  --radius: 26px;
  --turn: 520ms;
  --font: Figtree, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout switches on the component's own width, not the viewport's — this
     renders in Shadow DOM, where the site's breakpoints mean nothing. */
  container-type: inline-size;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1rem, 2.2cqi, 2rem);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.GJ1vI2UuSwCH5xUIsuAs *,
.GJ1vI2UuSwCH5xUIsuAs *::before,
.GJ1vI2UuSwCH5xUIsuAs *::after {
  box-sizing: border-box;
}

/* --- Glass tokens -------------------------------------------------------- */

.GJ1vI2UuSwCH5xUIsuAs[data-theme='dark'] {
  --ink: #e5e3d2;
  --muted: rgba(229, 227, 210, 0.72);
  --faint: rgba(229, 227, 210, 0.56);
  --glass: rgba(229, 227, 210, 0.055);
  --glass-lift: rgba(229, 227, 210, 0.1);
  --edge: rgba(229, 227, 210, 0.14);
  --edge-lift: rgba(229, 227, 210, 0.3);
  --sheen-top: rgba(229, 227, 210, 0.22);
  --drop: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}

.GJ1vI2UuSwCH5xUIsuAs[data-theme='light'] {
  --ink: #161616;
  --muted: rgba(22, 22, 22, 0.78);
  --faint: rgba(22, 22, 22, 0.62);
  --glass: rgba(250, 249, 243, 0.68);
  --glass-lift: rgba(250, 249, 243, 0.88);
  --edge: rgba(22, 22, 22, 0.16);
  --edge-lift: rgba(22, 22, 22, 0.28);
  --sheen-top: rgba(250, 249, 243, 0.85);
  --drop: 0 30px 70px -34px rgba(22, 22, 22, 0.35);
}

/* Shared glass recipe — see Prompt Wheel: a masked gradient edge reads as a
   bevelled pane, where a flat border reads as a drawn outline. */
.aTA7kW2vnqEQtD35pPZo,
._ocFgtM3OijZGroVGo3w,
.nhkxRHszd1zJ8QKVhUNo,
.iD3aDKhooohQEQX6CJAs {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--sheen-top), var(--drop);
}

.aTA7kW2vnqEQtD35pPZo::before,
._ocFgtM3OijZGroVGo3w::before,
.nhkxRHszd1zJ8QKVhUNo::before,
.iD3aDKhooohQEQX6CJAs::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(150deg, var(--edge-lift), var(--edge) 42%, transparent 78%);
  -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;
}

/* --- Optional backdrop --------------------------------------------------- */

.a2PToMa6c6S0k8Sw7BwY {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius);
  pointer-events: none;
}

.GJ1vI2UuSwCH5xUIsuAs[data-backdrop='aurora'] .a2PToMa6c6S0k8Sw7BwY {
  background:
    radial-gradient(60% 70% at 18% 20%, var(--c-soft), transparent 62%),
    radial-gradient(52% 62% at 82% 78%, rgba(179, 201, 204, 0.2), transparent 64%),
    radial-gradient(70% 80% at 50% 110%, rgba(255, 91, 25, 0.16), transparent 66%);
  filter: blur(6px);
  transition: background var(--turn) var(--ease);
}

.GJ1vI2UuSwCH5xUIsuAs[data-backdrop='midnight'] .a2PToMa6c6S0k8Sw7BwY {
  background:
    radial-gradient(70% 80% at 20% 10%, rgba(38, 38, 38, 0.95), transparent 60%),
    radial-gradient(60% 70% at 85% 85%, var(--c-faint), transparent 60%),
    linear-gradient(160deg, #1b1b1b, #0f0f0f);
}

/* The house Platinum, #E5E3D2 — pair with Light glass so the card's ink stays
   dark against it; on Dark glass the ink is bone, which goes pale-on-pale. */
.GJ1vI2UuSwCH5xUIsuAs[data-backdrop='platinum'] .a2PToMa6c6S0k8Sw7BwY {
  background:
    radial-gradient(60% 70% at 18% 20%, var(--c-soft), transparent 62%),
    radial-gradient(70% 80% at 50% 110%, rgba(255, 91, 25, 0.08), transparent 66%),
    radial-gradient(120% 120% at 50% 0%, #ece9db 0%, #e5e3d2 55%, #dcd9c3 100%);
}

.WLi5ODf_EnmgpdPufQ7p {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: stretch;
  gap: clamp(1.25rem, 3cqi, 2.5rem);
}

/* --- Card ------------------------------------------------------------------ */

.ig3FuLX6K3dWt_hPU5Ng {
  display: flex;
  min-width: 0;
}

.aTA7kW2vnqEQtD35pPZo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1rem, 2.2cqi, 1.6rem);
  border-radius: var(--radius);
}

.ZXLVewDINKGqnGzcOVZg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.kRYtaWnZzLqdouib8xDi {
  flex: 1 1 auto;
  min-width: 0;
}

._ocFgtM3OijZGroVGo3w {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

._ocFgtM3OijZGroVGo3w svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--c);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 320ms var(--ease);
}

/* Says out loud that the exchange is scripted — see Prompt Wheel: worth
   keeping, the card is convincing enough to otherwise read as a live session. */
.VM_LbVt1n2vsYUy6e1O5 {
  padding: 0.3em 0.65em;
  border-radius: 999px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nhkxRHszd1zJ8QKVhUNo {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 240ms var(--ease);
}

.nhkxRHszd1zJ8QKVhUNo:hover,
.nhkxRHszd1zJ8QKVhUNo:focus-visible {
  background: var(--glass-lift);
  outline: none;
}

.nhkxRHszd1zJ8QKVhUNo svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.nhkxRHszd1zJ8QKVhUNo svg[data-solid] path {
  fill: var(--ink);
  stroke: none;
}

.eeO5gGrSvyBfbInZZ0xH {
  height: 2px;
  border-radius: 999px;
  background: var(--edge);
  overflow: hidden;
}

/* `--p` is written straight to this node from the animation loop — the one
   value that changes every frame, so routing it through React would re-render
   the whole card fifty times a second. */
.LX1_TL_9bt0PCmnRxpp7 {
  --p: 0;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p));
  will-change: transform;
  background: var(--c);
  box-shadow: 0 0 6px var(--c-soft);
}

.u4zGweDi2VqkMtePfmzn {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.OzI8pYmj713IZY13hHAV {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
}

.b0vsBirpQsdPFpwARgOE {
  position: absolute;
  inset-inline: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}

.tD2hacD09wD8qFjsSPb_ {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 0.35em;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tD2hacD09wD8qFjsSPb_[data-agent] {
  color: var(--c-ink);
}

.qU0uiF5o7Gz0ZtGuWjgf {
  position: relative;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--c);
  opacity: 0.4;
}

.qU0uiF5o7Gz0ZtGuWjgf[data-on] {
  opacity: 1;
}

/* The ring is drawn once at full size and scaled, rather than animating a
   box-shadow spread — that repainted inside the blurred card on every frame
   of a 1.4s loop that runs right through the streaming phases. */
.qU0uiF5o7Gz0ZtGuWjgf[data-on]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--c-soft);
  animation: eToNoOZfRLdNhLgez9Cl 1.4s ease-in-out infinite;
}

@keyframes eToNoOZfRLdNhLgez9Cl {
  0%,
  100% {
    opacity: 0.9;
    transform: scale(0.2);
  }
  50% {
    opacity: 0;
    transform: scale(1);
  }
}

.oqXkAiXJ1wf2maU9ROvQ {
  padding-left: 0.9rem;
  border-left: 2px solid var(--c-soft);
}

.co_dwwxGNLvsipVTEb3c,
.aanZ7H3HhjhTsrUzJIii {
  margin: 0;
  /* Streaming text dirties this box on most frames; containment stops that
     invalidation walking back up through the blurred card. */
  contain: layout;
  min-height: 1.5em;
  color: var(--ink);
  font-size: clamp(0.95rem, 1.5cqi, 1.15rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.co_dwwxGNLvsipVTEb3c {
  font-weight: 500;
}

.aanZ7H3HhjhTsrUzJIii {
  color: var(--muted);
  font-size: clamp(0.9rem, 1.35cqi, 1.05rem);
}

/* The caret sits between the typed head and the hidden remainder, so any
   width of its own would push the wrap by a character near a line end and
   undo the pinning. Zero-width in flow; the bar is drawn outside it. */
.OujMHjwoDCVjW4GC5xDw {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: text-bottom;
}

.OujMHjwoDCVjW4GC5xDw::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1px;
  width: 2px;
  background: var(--c);
  animation: zVG0GplrUdR8TjO37k0D 1s steps(2, start) infinite;
}

/* Everything not yet typed: laid out, never painted. */
.gCVAgWPx7Wk867CpLfBX {
  visibility: hidden;
}

@keyframes zVG0GplrUdR8TjO37k0D {
  50% {
    opacity: 0;
  }
}

.ZjirW9eoqDXS6X2Zl7I8 {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 0.7rem;
  padding: 0;
  list-style: none;
}

.MSOOdC7gJmSYbQctPQ3p {
  display: flex;
  align-items: center;
  gap: 0.55em;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.72rem;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 320ms var(--ease),
    transform 320ms var(--ease),
    color 320ms var(--ease);
}

.MSOOdC7gJmSYbQctPQ3p[data-on] {
  opacity: 1;
  transform: none;
}

.K8ZNWk9z6XSWl_JCZ2FE {
  position: relative;
  flex: none;
  width: 0.85em;
  height: 0.85em;
  border: 1px solid var(--c-soft);
  border-radius: 50%;
}

.MSOOdC7gJmSYbQctPQ3p[data-on] .K8ZNWk9z6XSWl_JCZ2FE {
  border-top-color: var(--c);
  animation: J_ZXNoWNORvzkH2agQAA 900ms linear infinite;
}

.MSOOdC7gJmSYbQctPQ3p[data-done] .K8ZNWk9z6XSWl_JCZ2FE {
  border-color: var(--c-ink);
  background: var(--c-faint);
  animation: none;
}

.MSOOdC7gJmSYbQctPQ3p[data-done] .K8ZNWk9z6XSWl_JCZ2FE::after {
  content: '';
  position: absolute;
  top: 46%;
  left: 50%;
  width: 0.2em;
  height: 0.4em;
  border: solid var(--c-ink);
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -50%) rotate(42deg);
}

@keyframes J_ZXNoWNORvzkH2agQAA {
  to {
    transform: rotate(360deg);
  }
}

.kMkAN9fyK9i8ct7QrBaC {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  height: 1em;
  vertical-align: text-bottom;
}

.kMkAN9fyK9i8ct7QrBaC i {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--c);
  animation: RgyhP9q2mBjiMFxoXq3n 1.1s ease-in-out infinite;
}

.kMkAN9fyK9i8ct7QrBaC i:nth-child(2) {
  animation-delay: 0.16s;
}
.kMkAN9fyK9i8ct7QrBaC i:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes RgyhP9q2mBjiMFxoXq3n {
  0%,
  70%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.eUtabAU8b8dReC0eeECX {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--edge);
}

.MWjozpHgi2_ls8y0Wbnc {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.iyp7BrgSQjONJqlHXXEU {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.iyp7BrgSQjONJqlHXXEU svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--c);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 240ms var(--ease);
}

.iyp7BrgSQjONJqlHXXEU:hover svg {
  transform: translateX(3px);
}

/* --- Visual panel ----------------------------------------------------------
 * Where Mode Switcher drew six placeholder blocks, this draws the system the
 * agent is consulting. The vocabulary is the whole point: rounded rects
 * holding loose pill bars are the visual language of a loading skeleton, so
 * they read as content that has not arrived. A track against a marked limit,
 * a board of discrete cells, bars against a baseline — the same simple shapes
 * in a grammar that cannot be mistaken for a placeholder.
 *
 * Nothing here renders a figure. Quantity is carried by position, emphasis by
 * structure, so a designer can rewrite any answer in the Designer and the
 * panel is still telling the truth.
 *
 * As in Mode Switcher, the panel is three absolutely-positioned faces stacked
 * on top of each other, each carrying its own static accent in `--fc` — see
 * that component for why a single face reacting to a shared `--c` would snap
 * colour instead of fading.
 * ------------------------------------------------------------------------ */

.jwp3a3l2xwrLfkSQXmaC {
  display: flex;
  min-width: 0;
}

.KVULj8L5bPbk64HxNKOQ {
  position: relative;
  flex: 1 1 auto;
  /*
   * Every face sits in the one cell, so the row takes the height of the
   * tallest of the three and the panel fits its own prose at any width. The
   * faces used to be absolute, which left the box with no intrinsic height
   * at all — fine when they held marks that could compress, wrong now they
   * hold sentences that have to wrap somewhere. Same trick as .ghost does
   * for the card: measure them all, stand as tall as the worst case.
   */
  display: grid;
  min-height: 21rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--drop);
  /* Instruments size against the panel, not the whole component — the root's
     container would scale them to the card beside them instead. */
  container-type: inline-size;
}

.BfN0qgmT4m_bZXKzPvTo {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  overflow: hidden;
  padding: clamp(0.85rem, 3cqi, 1.5rem);
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(155deg, var(--fc) 0%, color-mix(in srgb, var(--fc) 65%, black) 100%);
  opacity: 0;
  transform: scale(1.05) translateY(10px);
  filter: blur(6px);
  transition:
    opacity var(--turn) var(--ease),
    transform var(--turn) var(--ease),
    filter var(--turn) var(--ease);
  pointer-events: none;
}

.BfN0qgmT4m_bZXKzPvTo[data-active] {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* --- Instrument chrome ----------------------------------------------------- */

.bK09yNnHAaB3vcPrFIgy {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: clamp(0.5rem, 2cqi, 0.85rem);
}

.Q0gL6H8ALmcLQFQb4PP6 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.Q0gL6H8ALmcLQFQb4PP6 svg {
  flex: none;
  width: clamp(15px, 4.4cqi, 20px);
  height: clamp(15px, 4.4cqi, 20px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.yG1NjyOOLvmfF4e5pKuA {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--mono);
  font-size: clamp(0.66rem, 2.2cqi, 0.82rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.L6BuHHzptUONqLfgB0Q9 {
  flex: 1 1 auto;
  min-width: 0.5rem;
  height: 1px;
  background: color-mix(in srgb, currentColor 26%, transparent);
}

/* --- The trace: what the agent did, a step at a time -----------------------
 *
 * A dark scrim, not a light one. Everything on a face is white, and a
 * lightening wash leaves it at nearly the same value as the powder blue
 * behind it — legible on Casino's orange, a pale smear on the other two,
 * which are two thirds of the panel. Text carries far more of this panel
 * than the instruments it replaced, so the scrim runs deeper than theirs and
 * every line gets a shadow to sit on.
 */

.nX8gat6pSO9aj8PUGjMw {
  display: flex;
  flex: 1 1 auto;
  /* Never below its own text. .inst clears its min-height so the face can
     shrink, which would otherwise let the longest step wrap into a line the
     grid never reserved room for — six pixels of clipped descender on the
     one face whose copy runs longest. */
  min-height: min-content;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.6rem, 2.2cqi, 1rem);
  margin: 0;
  padding: clamp(0.75rem, 2.6cqi, 1.15rem);
  list-style: none;
  border-radius: clamp(9px, 2cqi, 14px);
  background: rgba(0, 0, 0, var(--scrim, 0.2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.vlCJqicXNVLux8uyNjrb {
  /* One number drives the mark and the rail that lines up under it. */
  --mark: clamp(15px, 3.6cqi, 19px);
  position: relative;
  display: flex;
  gap: clamp(0.5rem, 1.8cqi, 0.75rem);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--turn) var(--ease),
    transform var(--turn) var(--ease);
}

.vlCJqicXNVLux8uyNjrb[data-lit] {
  opacity: 1;
  transform: none;
}

/* The rail joining one step to the next, drawn from the mark down. Only
   between steps — the last one ends the trace rather than trailing off it. */
.vlCJqicXNVLux8uyNjrb:not([data-last])::before {
  content: '';
  position: absolute;
  left: calc(var(--mark) / 2 - 0.5px);
  top: var(--mark);
  bottom: calc(clamp(0.6rem, 2.2cqi, 1rem) * -1);
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.hCLKfMgJsVjEVWGns7VG {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--mark);
  height: var(--mark);
  margin-top: 0.05rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  transition:
    background var(--turn) var(--ease),
    box-shadow var(--turn) var(--ease);
}

.hCLKfMgJsVjEVWGns7VG svg {
  width: 66%;
  height: 66%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity var(--turn) var(--ease),
    transform var(--turn) var(--ease);
}

.vlCJqicXNVLux8uyNjrb[data-lit] .hCLKfMgJsVjEVWGns7VG {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.vlCJqicXNVLux8uyNjrb[data-lit] .hCLKfMgJsVjEVWGns7VG svg {
  opacity: 1;
  transform: none;
}

.hP25phIKkAUK5iqog1iQ {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
}

.lmD9JjIB477iknvOECr3 {
  /* Near-white, not a dimmed grey: it is 0.6rem uppercase mono, which WCAG
     counts as normal text, so it needs the full 4.5:1 like the line under it.
     The hierarchy comes off size and case instead. */
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--mono);
  font-size: clamp(0.62rem, 2.1cqi, 0.78rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ibfVmMt3Y764AZEIjyY3 {
  color: rgba(255, 255, 255, 0.97);
  font-size: clamp(0.9rem, 3.1cqi, 1.15rem);
  line-height: 1.4;
  text-wrap: pretty;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* --- The payoff: what that is worth to the buyer --------------------------- */

.rLyNkDUr97ZS0NHKEC7o {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: clamp(0.7rem, 2.4cqi, 1.05rem);
  border-radius: clamp(9px, 2cqi, 14px);
  /* Deeper than the trace above it, so the panel closes on this rather than
     reading as one more step in the list. */
  background: rgba(0, 0, 0, var(--scrim-deep, 0.32));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--turn) var(--ease),
    transform var(--turn) var(--ease);
}

.rLyNkDUr97ZS0NHKEC7o[data-lit] {
  opacity: 1;
  transform: none;
}

.Da7oTwxDhVLBIILEgslv {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--mono);
  font-size: clamp(0.62rem, 2.1cqi, 0.78rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.SypHzaAT_MvJRo1j6Iym {
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 3.5cqi, 1.3rem);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: pretty;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* --- Switcher ---------------------------------------------------------------- */

.HsVLllMJS9HcfeAFYCUA {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  margin-bottom: clamp(1.25rem, 3cqi, 2rem);
}

.kjr7A4KwIKGxqhIqFR0C {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.iD3aDKhooohQEQX6CJAs {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 240ms var(--ease),
    background 240ms var(--ease),
    box-shadow 240ms var(--ease);
}

.iD3aDKhooohQEQX6CJAs svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iD3aDKhooohQEQX6CJAs:hover,
.iD3aDKhooohQEQX6CJAs:focus-visible {
  color: var(--ink);
  background: var(--glass-lift);
  outline: none;
}

.iD3aDKhooohQEQX6CJAs[data-active] {
  color: var(--c-ink);
  background: var(--glass-lift);
  box-shadow: inset 0 1px 0 var(--sheen-top), 0 0 0 1px var(--pc, var(--c));
}

.iD3aDKhooohQEQX6CJAs[data-active] svg {
  stroke: var(--pc, var(--c));
}

.tmKk514Y0JBVq2Tn6vHg {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Narrow -------------------------------------------------------------- */

@container (max-width: 46rem) {
  .WLi5ODf_EnmgpdPufQ7p {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked for tablet and mobile widths — the conversation leads and the
     panel settles underneath it, keeping the desktop's reading order. */
  .KVULj8L5bPbk64HxNKOQ {
    min-height: 17rem;
  }
}

@container (max-width: 26rem) {
  .iD3aDKhooohQEQX6CJAs span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .GJ1vI2UuSwCH5xUIsuAs *,
  .GJ1vI2UuSwCH5xUIsuAs *::before,
  .GJ1vI2UuSwCH5xUIsuAs *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}