/* Variant 1: the hotspot hero (approved comp premium-a, 1344 x 752). Everything below the hero is shared with index.html. */
body.v1 { --ground: #f3f4f6; --hair: #d6d9dd; background: var(--ground); }
html:has(body.v1) { background: #f3f4f6; }

.hero1 { position: relative; width: var(--frame-w); height: calc(752 * var(--u)); margin-inline: auto; }
.hero1 > * { position: absolute; margin: 0; }
.wordmark1 { left: calc(40 * var(--u)); top: calc(34 * var(--u)); font-size: max(15px, calc(18 * var(--u))); font-weight: 650; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.lang1 { right: calc(48 * var(--u)); top: calc(34 * var(--u)); display: flex; align-items: center; gap: 6px; left: auto; height: auto; }
.lang1 button { font: 600 max(11px, calc(11 * var(--u))) / 1 var(--font); letter-spacing: 0.08em; color: var(--mute); background: none; border: 0; padding: 0; cursor: pointer; }
.lang1 button[aria-pressed="true"] { color: var(--cobalt); }
.intro1 { left: calc(40 * var(--u)); top: calc(166 * var(--u)); width: calc(470 * var(--u)); }
.intro1 h1 { font-size: calc(56 * var(--u)); font-weight: 650; letter-spacing: -0.032em; line-height: 1.04; }
.lead1 { margin-top: calc(26 * var(--u)); font-size: max(15px, calc(17 * var(--u))); line-height: 1.5; color: #4a5158; max-width: min(27em, calc(430 * var(--u))); }
.cta1 { margin-top: calc(34 * var(--u)); display: inline-flex; align-items: center; gap: calc(10 * var(--u)); height: calc(56 * var(--u)); min-height: 48px; padding: 0 calc(28 * var(--u)) 0 calc(24 * var(--u)); border-radius: 999px; background: var(--cobalt); color: #fff; text-decoration: none; font-weight: 500; font-size: max(15px, calc(17 * var(--u))); transition: background 160ms var(--ease), transform 160ms var(--ease); }
.cta1:hover { background: #1526e0; }
.cta1:active { transform: translateY(1px); }
.cta1 svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); min-width: 20px; min-height: 20px; }
.note1 { margin-top: calc(22 * var(--u)); font-size: max(12px, calc(13 * var(--u))); color: #5b6168; }

.stage1 { left: calc(560 * var(--u)); top: calc(56 * var(--u)); width: calc(740 * var(--u)); height: calc(640 * var(--u)); }
.stage1 img, .stage1 canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage1::before { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(13, 19, 23, 0.14), rgba(13, 19, 23, 0)); filter: blur(4px); }
.stage1 canvas { opacity: 0; transition: opacity 500ms var(--ease); cursor: grab; }
.stage1 canvas:active { cursor: grabbing; }
.stage1.live canvas { opacity: 1; }
.stage1.live img { opacity: 0; transition: opacity 300ms linear 500ms; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.leaders polyline { fill: none; stroke: #9aa1a8; stroke-width: 1; transition: stroke 200ms var(--ease); }
.leaders polyline.on { stroke: var(--cobalt); }
.hots { position: absolute; inset: 0; pointer-events: none; }
.hot { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; font: inherit; color: inherit; }
.hot .dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 4px rgba(36, 55, 246, 0.16), 0 1px 3px rgba(13, 19, 23, 0.25); transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.hot[aria-pressed="true"] .dot { box-shadow: 0 0 0 7px rgba(36, 55, 246, 0.2), 0 1px 3px rgba(13, 19, 23, 0.25); }
.hot:hover .dot { transform: scale(1.12); }
.hot .lab { position: absolute; top: 0; white-space: nowrap; font-size: max(12px, calc(13.5 * var(--u))); font-weight: 500; color: #3c434a; transform: translateY(-50%); padding: 6px 4px; transition: color 160ms var(--ease); }
.hot[aria-pressed="true"] .lab { color: var(--cobalt); font-weight: 600; }
.hot:hover .lab { color: var(--ink); }
.hot:focus-visible { outline: none; }
.hot:focus-visible .lab { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 4px; }
/* a generous invisible hit area around each dot */
.hot::before { content: ""; position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; }

.card1 { left: calc(480 * var(--u)); bottom: calc(14 * var(--u)); width: calc(330 * var(--u)); min-width: 280px; background: #fff; border-radius: 16px; padding: 14px 16px 14px; box-shadow: 0 24px 48px -28px rgba(13, 19, 23, 0.35), 0 2px 8px rgba(13, 19, 23, 0.06); font-size: max(13px, calc(13.5 * var(--u))); line-height: 1.45; }
.card-head { display: flex; align-items: center; gap: 8px; font-size: 0.95em; }
.card-head b { font-weight: 600; color: var(--ink); }
.card-mark { width: 18px; height: 18px; border-radius: 50%; background: var(--cobalt); box-shadow: inset 0 0 0 4px #fff, 0 0 0 1.5px var(--cobalt); flex: none; }
.card-tag { margin-inline-start: auto; color: var(--mute); font-size: 0.9em; }
.card-body { margin-top: 10px; transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.card-body.swap { opacity: 0; transform: translateY(4px); }
.card-q { color: var(--ink); font-weight: 600; }
.card-a { margin-top: 6px; color: #4a5158; }
.card-a b { color: var(--ink); font-weight: 650; }
.card-src { margin-top: 10px; display: flex; gap: 10px; align-items: center; font-size: 0.92em; }
.card-src .cmd { padding: 5px 10px; font-size: 0.86rem; flex: none; }
.card-src a { color: var(--cobalt); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-src a:hover { text-decoration: underline; }
.chips1 { display: none; }
.hint1 { right: calc(48 * var(--u)); bottom: calc(21 * var(--u)); max-width: calc(400 * var(--u)); text-align: end; font-size: max(12px, calc(12.5 * var(--u))); color: var(--mute); }
/* the card grows upward from the hero floor; where it can rise past the headline (narrow desktops) or where the intro is right-aligned (RTL), it starts clear of the intro column */
@media (min-width: 981px) and (max-width: 1179px) { .card1 { left: calc(510 * var(--u) + 14px); } }
[dir="rtl"] .card1 { left: calc(510 * var(--u) + 14px); }

/* below 980 px the composition has no room for the card, so the hero stacks: intro, jaw, chips, card */
@media (max-width: 980px) {
  .hero1 { height: auto; width: 100%; display: grid; grid-template-columns: 1fr auto; padding: 18px 16px 40px; }
  .hero1 > * { position: static; }
  .wordmark1 { font-size: 16px; align-self: center; }
  .lang1 { gap: 6px; margin-right: 0; align-self: center; }
  .lang1 button { font-size: 12px; padding: 0; min-width: 44px; min-height: 44px; }
  .intro1 { grid-column: 1 / -1; width: auto; margin-top: 36px; }
  .intro1 h1 { font-size: clamp(2.5rem, 11.5vw, 3.6rem); max-width: none; }
  .lead1 { font-size: 16px; max-width: 32em; }
  .cta1 { width: 100%; justify-content: center; height: 56px; font-size: 16px; margin-top: 26px; }
  .note1 { text-align: center; font-size: 14px; margin-top: 12px; }
  .stage1 { grid-column: 1 / -1; position: relative; left: auto; top: auto; width: calc(100% + 32px); margin: 20px -16px 0; height: auto; aspect-ratio: 740 / 640; }
  /* on a phone the labels move out of the picture into a row of chips; the dots stay tappable on the jaw */
  .leaders { display: none; }
  .hot .lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
  .chips1 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
  .chip { font: 600 13px/1 var(--font); color: #3c434a; background: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: 0 14px; min-height: 44px; cursor: pointer; }
  .chip[aria-pressed="true"] { color: #fff; background: var(--cobalt); border-color: var(--cobalt); }
  .card1, [dir="rtl"] .card1 { grid-column: 1 / -1; position: relative; left: auto; top: auto; bottom: auto; width: auto; min-width: 0; margin-top: 12px; font-size: 14px; }
  .hint1 { grid-column: 1 / -1; position: static; max-width: none; margin-top: 14px; text-align: center; font-size: 13px; }
}
/* tablets: the stacked hero keeps a readable measure instead of spanning the screen */
@media (min-width: 700px) and (max-width: 980px) {
  .intro1 { max-width: 640px; }
  .stage1 { width: 600px; margin: 20px auto 0; }
  .chips1 { justify-content: center; }
  .card1, [dir="rtl"] .card1 { width: 600px; justify-self: center; }
  .cta1 { width: auto; padding: 0 32px; }
  .note1 { text-align: start; }
}