/* ============================================================
   Guardexa — /experience (Experience v3, Claude Design)
   Interactive one-minute story. Loaded only by /experience;
   the homepage's landing.css is untouched and not loaded here.
   Mobile is the base layout; the two-column desktop layout
   applies at ≥900 × ≥560 px (the design's own breakpoint).
   Values mirror the approved design file. Sizes that depend on
   the measured stage are written inline by experience.js.
   ============================================================ */

/* Plus Jakarta Sans (variable, latin subset) — self-hosted, OFL-1.1 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Material Symbols Rounded (variable: opsz, wght 400–600, FILL) —
   self-hosted, Apache-2.0. Subset to the 36 icons this page uses
   (Google Fonts icon_names); the full font is ~3 MB. Adding an icon
   means regenerating this file. */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url(/assets/fonts/material-symbols-rounded-experience.woff2) format('woff2');
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #0F1BA8;
  overscroll-behavior-y: none;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: #DCE4FF;
}

a:hover {
  color: #FFFFFF;
}

*:focus-visible {
  outline: 3px solid #FFD95A;
  outline-offset: 3px;
}

button {
  font-family: inherit;
}

/* ── Frame ──────────────────────────────────────────────── */
/* The design's floor was 600 px; 540 px keeps the controls on screen
   down to 320 × 568 (and ~360 × 560 browser viewports) without
   changing anything at heights of 600 px and above. */
.xp {
  --xp-ease: cubic-bezier(.2, .7, .2, 1);
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  /* The screen edge is the only clipping boundary: shadows, glows and the
     wolf run out to it instead of stopping at an inner box. */
  overflow: hidden;
  overflow: clip;
  color: #FFFFFF;
  background: radial-gradient(ellipse 120% 75% at 60% 36%, #3656FF 0%, #1D33D8 50%, #0F1BA8 100%);
  touch-action: pan-y;
  /* App-like: a tap or long-press doesn't select text or open the
     browser's search panel. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.xp [hidden] {
  display: none !important;
}

/* First paint (and deep links like #s4) settle without animating. */
.xp-still,
.xp-still * {
  transition: none !important;
}

/* A Portuguese visit keeps the English copy hidden until experience.js
   has translated it (the background still paints). */
.xp-wait .xp-top,
.xp-wait .xp-main {
  visibility: hidden;
}

.xp-ic {
  font-family: 'Material Symbols Rounded';
  line-height: 1;
}

.xp-glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 760px;
  height: 760px;
  margin: -380px 0 0 -380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 170, 255, 0.42) 0%, rgba(143, 170, 255, 0) 64%);
  pointer-events: none;
  transform: translate(10%, -14%);
  transition: transform 1.4s var(--xp-ease);
}

/* ── Top bar ────────────────────────────────────────────── */
.xp-top {
  position: relative;
  z-index: 30;
  flex: none;
  padding: calc(6px + env(safe-area-inset-top)) max(clamp(16px, 4vw, 56px), env(safe-area-inset-right)) 0 max(clamp(16px, 4vw, 56px), env(safe-area-inset-left));
}

.xp-top-in {
  max-width: 1320px;
  margin: 0 auto;
}

.xp-segs {
  display: flex;
  gap: 4px;
}

.xp-seg {
  flex: 1;
  height: 16px;
  padding: 6px 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.xp-seg-track {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.24);
  overflow: hidden;
}

.xp-seg-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: #FFFFFF;
  transition: width .45s var(--xp-ease);
}

.xp-bar {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.xp-brand {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #FFFFFF;
  border-radius: 10px;
}

.xp-brand img {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: block;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.28);
}

/* The wordmark gives way to the language selector below 400 px. */
.xp-brand span {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow: hidden;
  white-space: nowrap;
  max-width: max(0px, calc((100vw - 400px) * 99));
}

/* EN | PT selector — the design's own values (its glass matches the
   step 6 tab pill), not the homepage's .lp-lang. */
.xp-lang {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(10, 16, 80, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.xp-lang svg {
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0 3px 0 6px;
}

.xp-lang button {
  height: 30px;
  min-width: 38px;
  padding: 0 9px;
  border: 0;
  margin: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  background: transparent;
  color: #DCE4FF;
  transition: background-color .18s ease, color .18s ease;
}

.xp-lang button[aria-pressed="true"] {
  background: #FFFFFF;
  color: #1D33D8;
}

.xp-install {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px 0 11px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0E1330;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(4, 10, 90, 0.35);
}

.xp-install:hover {
  background: #EEF2FF;
  color: #0E1330;
}

/* Step 9: out of the row, so the language selector takes its place. */
.xp-install.is-off {
  display: none;
}

.xp-install svg {
  width: 15px;
  height: 15px;
  display: block;
  color: #1D33D8;
}

/* ── Main: stage + panel ────────────────────────────────── */
.xp-main {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding: 4px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}

/* Not clipped: a clip here cut every shadow, glow and the wolf into
   visible rectangles. Content that can outgrow the stage is fitted to it
   (experience.js) or faded at its edge (.xp-phone-zone). */
.xp-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  container-type: size;
}

/* Stage layers: one per slide; the current one is .is-on, earlier
   ones sit to the left (.is-before), later ones to the right. */
.xp-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(6%) scale(.97);
  transition: opacity .28s ease, transform .4s ease, visibility 0s linear .4s;
}

.xp-layer.is-before {
  transform: translateX(-6%) scale(.97);
}

.xp-layer.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .55s var(--xp-ease) .12s, transform .65s var(--xp-ease) .06s, visibility 0s linear 0s;
}

.xp-layer--static,
.xp-layer--static.is-before {
  transform: none;
}

.xp-layer--passive,
.xp-layer--passive.is-on {
  pointer-events: none;
}

.xp-l1,
.xp-l3,
.xp-l4,
.xp-l5,
.xp-l6,
.xp-l7 {
  z-index: 3;
}

/* Staggered entrances inside a layer (delay in --d) */
.xp-stag {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
}

.xp-layer.is-on .xp-stag {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--xp-ease) var(--d), transform .6s var(--xp-ease) var(--d);
}

/* ── 0 · Scenario ───────────────────────────────────────── */
/* The frame bleeds --xp-bleed above the image (as on the homepage) so the
   drop shadow isn't cut where the frame starts; the fade stops are offset
   by the same amount, so the image and its fade are unchanged. */
.xp-wolf {
  --xp-bleed: 64px;
  position: absolute;
  top: calc(-1 * var(--xp-bleed));
  bottom: 16%;
  left: -40%;
  right: -40%;
  padding-top: var(--xp-bleed);
  display: flex;
  justify-content: center;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--xp-bleed) + 0.5 * (100% - var(--xp-bleed))), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(var(--xp-bleed) + 0.5 * (100% - var(--xp-bleed))), transparent 100%);
}

.xp-wolf picture {
  display: contents;
}

.xp-wolf img {
  flex: none;
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(0 24px 50px rgba(4, 10, 90, 0.5));
}

/* experience.js scales the list down (from its bottom edge) only when
   the stage is too short to show all three cards. */
.xp-scens {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: min(10px, 2.4cqh);
}

.xp-scen {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: min(72px, 18cqh);
  padding: 9px 16px 9px 9px;
  box-sizing: border-box;
  border: 0;
  border-radius: 20px;
  text-align: left;
  cursor: pointer;
  background: rgba(10, 16, 80, 0.58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 26px rgba(4, 10, 90, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
  transition: opacity .2s ease, transform .2s ease, background-color .25s ease, box-shadow .25s ease, color .25s ease;
}

.xp-layer.is-on .xp-scen {
  transition: opacity .5s var(--xp-ease) var(--d), transform .6s var(--xp-ease) var(--d), background-color .25s ease, box-shadow .25s ease, color .25s ease;
}

.xp-scen.is-sel {
  background: #FFFFFF;
  box-shadow: 0 14px 34px rgba(4, 10, 90, 0.4);
  color: #0E1330;
}

.xp-scen-tile {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  color: #FFFFFF;
  transition: background-color .25s ease;
}

.xp-scen.is-sel .xp-scen-tile {
  background: #E6EBFF;
  color: #1D33D8;
}

.xp-scen-text {
  flex: 1;
  min-width: 0;
}

.xp-scen-title {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.xp-scen-body {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: #DCE4FF;
}

.xp-scen.is-sel .xp-scen-body {
  color: #5D667D;
}

.xp-scen-mark {
  flex: none;
  font-size: 24px;
  font-variation-settings: 'FILL' 1;
  color: rgba(255, 255, 255, 0.6);
}

.xp-scen.is-sel .xp-scen-mark {
  color: #1D33D8;
}

/* ── 1 · What they'll try ───────────────────────────────── */
.xp-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 8px;
  border-radius: 16px;
  background: rgba(10, 16, 80, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 26px rgba(4, 10, 90, 0.4);
}

.xp-float--a {
  left: max(0%, calc(50% - 290px));
  top: 16%;
}

.xp-float--b {
  right: max(0%, calc(50% - 290px));
  top: 43%;
}

.xp-float--c {
  left: max(2%, calc(50% - 270px));
  top: 70%;
}

.xp-float .xp-ic {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}

.xp-float span:last-child {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Phone (slides 2–6) ─────────────────────────────────── */
/* Stage-sized area (plus room for the phone's shadow) that holds the
   phone. On short screens the design lets the phone run past the stage
   (top on slide 3, bottom on slide 6); experience.js then adds
   .is-crop-top / .is-crop-bottom, which fade it out at the stage edge
   instead of slicing it. */
.xp-phone-zone {
  --xp-zone: 160px;
  position: absolute;
  inset: calc(-1 * var(--xp-zone));
  z-index: 2;
  pointer-events: none;
}

.xp-phone-zone.is-crop-top {
  -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--xp-zone) - 4px), #000 calc(var(--xp-zone) + 32px));
  mask-image: linear-gradient(180deg, transparent calc(var(--xp-zone) - 4px), #000 calc(var(--xp-zone) + 32px));
}

.xp-phone-zone.is-crop-bottom {
  -webkit-mask-image: linear-gradient(0deg, transparent calc(var(--xp-zone) - 4px), #000 calc(var(--xp-zone) + 32px));
  mask-image: linear-gradient(0deg, transparent calc(var(--xp-zone) - 4px), #000 calc(var(--xp-zone) + 32px));
}

.xp-phone-zone.is-crop-top.is-crop-bottom {
  -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--xp-zone) - 4px), #000 calc(var(--xp-zone) + 32px), #000 calc(100% - var(--xp-zone) - 32px), transparent calc(100% - var(--xp-zone) + 4px));
  mask-image: linear-gradient(180deg, transparent calc(var(--xp-zone) - 4px), #000 calc(var(--xp-zone) + 32px), #000 calc(100% - var(--xp-zone) - 32px), transparent calc(100% - var(--xp-zone) + 4px));
}

.xp-phone {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 168px;
  aspect-ratio: 9 / 19.5;
  container-type: inline-size;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.85);
  transition: transform .8s var(--xp-ease), opacity .55s ease;
}

.xp-phone-body {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 17cqw;
  background: #0B0F1A;
  padding: 3.2cqw;
  box-sizing: border-box;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.22), 0 30px 70px rgba(4, 10, 90, 0.6), 0 0 90px rgba(143, 170, 255, 0.25);
}

.xp-sidekey {
  position: absolute;
  right: -1.6cqw;
  top: 22%;
  width: 2.4cqw;
  height: 20cqw;
  padding: 0;
  border: 0;
  border-radius: 0 1.2cqw 1.2cqw 0;
  cursor: pointer;
  background: #2A3146;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Larger, invisible hit area for fingers; extends outward only. */
.xp-sidekey::before {
  content: '';
  position: absolute;
  top: -3cqw;
  bottom: -3cqw;
  left: 0;
  right: -7cqw;
}

.xp-sidekey.is-held {
  background: #3A62FF;
}

.xp-volkey {
  position: absolute;
  right: -1.6cqw;
  top: 36%;
  width: 2.4cqw;
  height: 13cqw;
  border-radius: 0 1.2cqw 1.2cqw 0;
  background: #2A3146;
}

.xp-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14cqw;
  overflow: hidden;
  transition: opacity .17s ease;
  background: radial-gradient(130% 60% at 50% 0%, #3A62FF 0%, #1D33D8 40%, #0A1050 100%);
}

.xp-screen.is-dim {
  opacity: .35;
}

/* Quick Settings demo: let a downward drag on the screen reach the
   page instead of starting a browser pan. */
.xp-screen.is-drag {
  touch-action: none;
}

.xp-punch {
  position: absolute;
  z-index: 6;
  top: 3.9cqw;
  left: 50%;
  width: 3.6cqw;
  height: 3.6cqw;
  margin-left: -1.8cqw;
  border-radius: 50%;
  background: #000000;
}

.xp-status {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  padding: 3.4cqw 7.5cqw 0;
  font-size: 3.9cqw;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

.xp-status-r {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
}

.xp-batt {
  display: inline-block;
  width: 6.4cqw;
  height: 3.2cqw;
  border-radius: 0.8cqw;
  box-shadow: inset 0 0 0 0.45cqw currentColor;
  position: relative;
}

.xp-batt span {
  position: absolute;
  left: 0.8cqw;
  top: 0.8cqw;
  bottom: 0.8cqw;
  width: 3.2cqw;
  border-radius: 0.4cqw;
  background: currentColor;
}

.xp-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 15cqw;
}

.xp-lock-time {
  font-size: 21cqw;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
}

.xp-lock-date {
  margin-top: 2.8cqw;
  font-size: 4.6cqw;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.xp-lock-foot {
  margin-top: auto;
  margin-bottom: 13cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.8cqw;
  color: rgba(255, 255, 255, 0.84);
}

.xp-lock-foot .xp-ic {
  font-size: 7.8cqw;
  font-variation-settings: 'FILL' 1;
}

.xp-lock-hint {
  font-size: 4.1cqw;
  font-weight: 600;
}

.xp-pad {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 8cqw;
}

.xp-pad-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.xp-pad-head > .xp-ic {
  font-size: 8cqw;
  font-variation-settings: 'FILL' 1;
  color: #DCE4FF;
}

.xp-pad-label {
  margin-top: 2.5cqw;
  height: 6cqw;
  font-size: 4.8cqw;
  font-weight: 600;
  color: #DCE4FF;
}

.xp-pad-label.is-wrong {
  color: #FFB3B6;
}

.xp-dots {
  margin-top: 3cqw;
  display: flex;
  gap: 5.5cqw;
}

.xp-dots span {
  width: 4.2cqw;
  height: 4.2cqw;
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;
  border: 0.55cqw solid rgba(255, 255, 255, 0.55);
  transition: background-color .14s ease, border-color .14s ease;
}

.xp-dots span.is-filled {
  background: #FFFFFF;
  border-color: #FFFFFF;
}

.xp-pad.is-wrong .xp-dots span.is-filled {
  background: #FFB3B6;
  border-color: #FFB3B6;
}

.xp-keys {
  margin-top: 5cqw;
  display: grid;
  grid-template-columns: repeat(3, 23cqw);
  gap: 2.4cqw 5cqw;
}

.xp-key {
  width: 23cqw;
  height: 23cqw;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  transition: background-color .18s ease, transform .14s ease;
  touch-action: manipulation;
}

.xp-key.is-hot {
  background: rgba(143, 170, 255, 0.45);
  transform: scale(0.93);
}

.xp-key span {
  font-size: 9cqw;
  font-weight: 500;
  line-height: 1;
}

.xp-key--del,
.xp-key--blank {
  background: transparent;
}

.xp-key--blank {
  visibility: hidden;
}

.xp-key--del span {
  font-family: 'Material Symbols Rounded';
  font-size: 8cqw;
}

.xp-pwr {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(10, 16, 80, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 3.4cqw;
  padding: 30cqw 5cqw 0;
}

.xp-pwr-item {
  display: flex;
  align-items: center;
  gap: 4cqw;
  width: 58cqw;
  padding: 4.8cqw 5.4cqw;
  box-sizing: border-box;
  border-radius: 8cqw;
  background: #E8EBF5;
  color: #0E1330;
  font-size: 4.8cqw;
  font-weight: 700;
}

.xp-pwr-item--sos {
  background: #FFDAD6;
  color: #410002;
}

.xp-pwr-item .xp-ic {
  font-size: 7.4cqw;
}

.xp-qs {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  padding: 13cqw 4.6cqw 5cqw;
  border-radius: 0 0 10cqw 10cqw;
  background: rgba(10, 16, 80, 0.96);
  box-shadow: 0 6cqw 14cqw rgba(4, 10, 90, 0.5);
}

.xp-qs-bright {
  height: 12cqw;
  border-radius: 6cqw;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  padding: 0 4.3cqw;
}

.xp-qs-bright .xp-ic {
  font-size: 6.4cqw;
  color: #FFFFFF;
}

.xp-qs-level {
  margin-left: 3.6cqw;
  height: 2.1cqw;
  flex: 0 0 55%;
  border-radius: 1cqw;
  background: #8FAAFF;
}

.xp-qs-grid {
  margin-top: 3.6cqw;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.8cqw;
}

.xp-qs-tile {
  display: flex;
  align-items: center;
  gap: 3.2cqw;
  height: 18.5cqw;
  padding: 0 4.3cqw;
  border-radius: 6.4cqw;
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-size: 4.5cqw;
  font-weight: 700;
}

.xp-qs-tile.is-active {
  background: #DCE4FF;
  color: #0E1330;
}

.xp-qs-tile .xp-ic {
  font-size: 7cqw;
}

.xp-qs-handle {
  margin: 4.3cqw auto 0;
  width: 13cqw;
  height: 1.4cqw;
  border-radius: 1cqw;
  background: rgba(255, 255, 255, 0.4);
}

/* ── Capture annotation (website level, beside the phone) ── */
.xp-ann {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.xp-ann.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s var(--xp-ease) .15s, visibility 0s linear 0s;
}

.xp-they {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(10, 16, 80, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #DCE4FF;
  white-space: nowrap;
}

.xp-they .xp-ic {
  font-size: 14px;
}

.xp-ann-card {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  transform: translateY(-50%) translateX(-14px);
  transition: transform .6s var(--xp-ease) .15s;
  box-sizing: border-box;
  padding: 10px 11px 11px;
  border-radius: 16px;
  background: #FFFFFF;
  color: #0E1330;
  box-shadow: 0 24px 60px rgba(4, 10, 90, 0.45);
}

.xp-ann.is-on .xp-ann-card {
  transform: translateY(-50%);
}

.xp-ann-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1D33D8;
}

.xp-ann-kicker .xp-ic {
  font-size: 15px;
}

.xp-ann-title {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.xp-ann-ok {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #DDF4E6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  color: #13804A;
}

.xp-ann-rows {
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.xp-ann-row {
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .15s ease, transform .15s ease;
}

.xp-ann.is-on .xp-ann-row {
  opacity: 1;
  transform: none;
  transition: opacity .45s var(--xp-ease) var(--d), transform .5s var(--xp-ease) var(--d);
}

.xp-ann-row-ic {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #E6EBFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  color: #1D33D8;
}

.xp-ann-row-ic.is-ok {
  border-radius: 50%;
  background: #DDF4E6;
  color: #13804A;
}

.xp-ann-row-text {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}

/* ── Shared card parts ──────────────────────────────────── */
.xp-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 4px 0;
}

.xp-card-head img {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: block;
}

.xp-card-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.xp-card-badge {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  color: #5D667D;
}

.xp-ev-tag {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(14, 19, 48, 0.72);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 700;
}

.xp-ev-tag--r {
  left: auto;
  right: 9px;
  padding: 5px 9px;
  font-size: 10.5px;
}

.xp-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.xp-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 8px;
  border-radius: 14px;
  background: #FFFFFF;
}

.xp-row-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #E6EBFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #1D33D8;
}

.xp-row-ic--ok {
  background: #DDF4E6;
  color: #13804A;
}

.xp-row-t {
  display: block;
  font-size: 14px;
  font-weight: 800;
}

.xp-row-s {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #5D667D;
}

.xp-row-s--flow {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  font-weight: 700;
}

.xp-row-s--flow .xp-ic {
  font-size: 14px;
  color: #1D33D8;
}

/* ── 3 · Evidence card ──────────────────────────────────── */
.xp-ev-fit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(320px, 92cqw);
  transform: translate(-50%, -50%);
}

.xp-ev {
  box-sizing: border-box;
  background: #F3F5FA;
  border-radius: 22px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #0E1330;
  box-shadow: 0 30px 70px rgba(4, 10, 90, 0.5);
}

.xp-ev.is-compact {
  padding: 8px;
  gap: 6px;
}

.xp-ev-media {
  position: relative;
  flex: none;
  height: 190px;
  border-radius: 14px;
  overflow: hidden;
  background: #0A1050;
  box-shadow: 0 6px 16px rgba(14, 19, 48, 0.14);
}

.xp-ev-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .45s ease, transform .2s linear;
}

.xp-ev-media img.is-sel {
  opacity: 1;
}

.xp-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.xp-thumb {
  position: relative;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(14, 19, 48, 0.06);
  transition: box-shadow .2s ease;
}

.xp-thumb.is-sel {
  box-shadow: 0 0 0 2.5px #1D33D8;
}

.xp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xp-thumb span {
  position: absolute;
  left: 6px;
  bottom: 4px;
  font-size: 10.5px;
  font-weight: 800;
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

.xp-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.xp-tile {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.xp-ev.is-compact .xp-tile {
  padding: 6px 8px;
}

.xp-tile-k {
  font-size: 10.5px;
  font-weight: 700;
  color: #5D667D;
}

.xp-tile-v {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xp-tile-n {
  font-size: 10.5px;
  font-weight: 600;
  color: #5D667D;
  display: block;
}

.xp-ev.is-short .xp-tile-n {
  display: none;
}

.xp-vid {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 4px 12px 4px 4px;
  box-sizing: border-box;
  border-radius: 14px;
  background: #FFFFFF;
  color: #0E1330;
}

.xp-ev.is-compact .xp-vid {
  min-height: 48px;
}

.xp-vid-thumb {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
}

.xp-vid-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xp-vid-thumb .xp-ic {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 19, 48, 0.35);
  font-size: 20px;
  font-variation-settings: 'FILL' 1;
  color: #FFFFFF;
}

.xp-vid-text {
  flex: 1;
  min-width: 0;
}

.xp-vid-title {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.xp-vid-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 600;
  color: #5D667D;
}

.xp-vid-sub .xp-ic {
  font-size: 14px;
}

/* ── 4 · Email alert ────────────────────────────────────── */
.xp-mail {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(330px, 90cqw);
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  box-sizing: border-box;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 22px;
  padding: 14px;
  color: #0E1330;
  box-shadow: 0 30px 70px rgba(4, 10, 90, 0.5);
}

.xp-mail-from {
  display: flex;
  align-items: center;
  gap: 10px;
}

.xp-mail-from img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: block;
  flex: none;
}

.xp-mail-who {
  flex: 1;
  min-width: 0;
}

.xp-mail-name {
  font-size: 14px;
  font-weight: 800;
}

.xp-mail-to {
  font-size: 12px;
  font-weight: 600;
  color: #5D667D;
}

.xp-mail-time {
  font-size: 12px;
  font-weight: 800;
  color: #1D33D8;
}

.xp-mail-subj {
  margin-top: 10px;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.xp-mail-body {
  margin-top: 10px;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 0 0 1px #E6E9F0;
}

.xp-mail-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.xp-mail-brand span:first-child {
  font-size: 13px;
  font-weight: 800;
  color: #1D33D8;
}

.xp-mail-brand span:last-child {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #5D667D;
}

.xp-mail-text {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #5D667D;
}

.xp-mail-photos {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
  height: 104px;
}

.xp-mail-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}

.xp-mail-meta {
  margin-top: 8px;
  font-size: 11.5px;
}

.xp-mail-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 2px;
}

.xp-mail-meta > div + div {
  border-top: 1px solid #EEF0F4;
}

.xp-mail-k {
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #5D667D;
}

.xp-mail-v {
  font-weight: 800;
}

.xp-mail-dot {
  color: #E0393E;
}

/* ── 5 · Beyond Failed Unlocks ──────────────────────────── */
.xp-tabs {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(10, 16, 80, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  pointer-events: none;
}

.xp-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
  background: transparent;
  color: #DCE4FF;
  transition: background-color .18s ease, color .18s ease;
}

.xp-tab[aria-selected="true"] {
  background: #FFFFFF;
  color: #1D33D8;
}

.xp-acts {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  pointer-events: none;
}

.xp-layer.is-on .xp-tabs,
.xp-layer.is-on .xp-acts {
  pointer-events: auto;
}

.xp-act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0E1330;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(4, 10, 90, 0.45);
}

.xp-act .xp-ic {
  font-size: 20px;
  color: #1D33D8;
}

.xp-act--hold {
  position: relative;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.xp-act--hold .xp-ic,
.xp-act-label {
  position: relative;
}

.xp-act-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #DCE4FF;
}

/* ── 6 · Owner Recognition (data-own: 0 idle, 1 scanning, 2 matched) ── */
.xp-l6 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.xp-own {
  width: min(320px, 88cqw);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 22px;
  background: #F3F5FA;
  color: #0E1330;
  box-shadow: 0 30px 70px rgba(4, 10, 90, 0.5);
}

.xp-own-photo {
  position: relative;
  flex: none;
  height: max(96px, min(220px, calc(100cqh - 178px)));
  border-radius: 14px;
  overflow: hidden;
  container-type: size;
  background: radial-gradient(120% 90% at 50% 20%, #3A62FF 0%, #1D33D8 45%, #0A1050 100%);
  box-shadow: 0 6px 16px rgba(14, 19, 48, 0.14);
}

.xp-own-person {
  position: absolute;
  left: 50%;
  bottom: -24cqh;
  transform: translateX(-50%);
  font-size: 112cqh;
  font-variation-settings: 'FILL' 1;
  color: rgba(143, 170, 255, 0.5);
}

.xp-own-frame {
  position: absolute;
  left: 50%;
  top: 24cqh;
  width: 50cqh;
  height: 50cqh;
  transform: translateX(-50%) scale(1.08);
  transition: transform .5s var(--xp-ease);
}

.xp-own[data-own="2"] .xp-own-frame {
  transform: translateX(-50%) scale(1);
}

.xp-own-c {
  position: absolute;
  width: 24%;
  height: 24%;
  border: 0 solid rgba(255, 255, 255, 0.45);
  transition: border-color .35s ease;
}

.xp-own[data-own="1"] .xp-own-c {
  border-color: #FFFFFF;
}

.xp-own[data-own="2"] .xp-own-c {
  border-color: #7BE3A8;
}

.xp-own-c--tl {
  left: 0;
  top: 0;
  border-top-width: 3px;
  border-left-width: 3px;
  border-radius: 9px 0 0 0;
}

.xp-own-c--tr {
  right: 0;
  top: 0;
  border-top-width: 3px;
  border-right-width: 3px;
  border-radius: 0 9px 0 0;
}

.xp-own-c--bl {
  left: 0;
  bottom: 0;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-radius: 0 0 0 9px;
}

.xp-own-c--br {
  right: 0;
  bottom: 0;
  border-bottom-width: 3px;
  border-right-width: 3px;
  border-radius: 0 0 9px 0;
}

.xp-own-scan {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 2%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(220, 228, 255, 0) 0%, #DCE4FF 50%, rgba(220, 228, 255, 0) 100%);
  box-shadow: 0 0 12px 2px rgba(143, 170, 255, 0.7);
  opacity: 0;
  transition: none;
}

.xp-own[data-own="1"] .xp-own-scan {
  top: 96%;
  opacity: 1;
  transition: top 1.4s cubic-bezier(.45, 0, .55, 1), opacity .2s ease;
}

.xp-own[data-own="2"] .xp-own-scan {
  top: 96%;
  opacity: 0;
  transition: opacity .25s ease;
}

.xp-own-pill {
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0E1330;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(4, 10, 90, 0.35);
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition: opacity .15s ease, transform .15s ease;
}

.xp-own[data-own="2"] .xp-own-pill {
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity .45s var(--xp-ease) 0s, transform .5s var(--xp-ease) 0s;
}

.xp-own-pill .xp-ic {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #DDF4E6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #13804A;
}

.xp-own-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .15s ease, transform .15s ease;
}

.xp-own[data-own="2"] .xp-own-row {
  opacity: 1;
  transform: none;
  transition: opacity .45s var(--xp-ease) var(--d), transform .5s var(--xp-ease) var(--d);
}

/* ── 7 · Privacy ────────────────────────────────────────── */
.xp-l7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.xp-priv-fit {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform-origin: 50% 50%;
}

.xp-priv {
  width: min(360px, 100%);
  min-height: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #F3F5FA;
  border-radius: 22px;
  padding: 10px;
  color: #0E1330;
  box-shadow: 0 30px 70px rgba(4, 10, 90, 0.5);
  overflow: hidden;
}

.xp-priv-k {
  padding: 2px 6px 7px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1D33D8;
}

/* ── 8 · Be prepared ────────────────────────────────────── */
.xp-wolf--end {
  bottom: 90px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--xp-bleed) + 0.66 * (100% - var(--xp-bleed))), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(var(--xp-bleed) + 0.66 * (100% - var(--xp-bleed))), transparent 100%);
}

.xp-wolf--end img {
  filter: drop-shadow(0 40px 80px rgba(4, 10, 90, 0.5));
}

.xp-end {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.xp-end-fit {
  position: relative;
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform-origin: 50% 100%;
}

.xp-dev {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 16px 15px;
  border-radius: 22px;
  background: rgba(10, 16, 80, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 18px 40px rgba(4, 10, 90, 0.45);
  color: #FFFFFF;
}

.xp-dev.is-m {
  padding: 12px 14px;
}

.xp-dev.is-s {
  padding: 10px 12px;
}

.xp-dev img {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2px #FFFFFF, 0 8px 20px rgba(4, 10, 90, 0.4);
}

.xp-dev.is-m img,
.xp-dev.is-s img {
  width: 44px;
  height: 44px;
}

.xp-dev-text {
  flex: 1;
  min-width: 0;
}

.xp-dev-h {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.xp-dev-p {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #DCE4FF;
  text-wrap: pretty;
}

.xp-dev-sig {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #B7C6FF;
}

.xp-story {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 14px 6px 16px;
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(10, 16, 80, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  text-decoration: none;
  color: #FFFFFF;
}

.xp-story:hover {
  background: rgba(10, 16, 80, 0.6);
  color: #FFFFFF;
}

.xp-story-t {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #DCE4FF;
}

.xp-story-t strong {
  font-weight: 800;
  color: #FFFFFF;
  white-space: nowrap;
}

.xp-story .xp-ic {
  flex: none;
  font-size: 18px;
  color: #FFFFFF;
}

/* ── Panel: copy + controls ─────────────────────────────── */
.xp-panel {
  flex: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 0 0;
}

.xp-copy {
  display: grid;
}

/* All slides' copy shares one grid cell, so the panel keeps one
   height across the story (no layout shift between slides). */
.xp-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(28px);
  transition: opacity .28s ease, transform .4s ease, visibility 0s linear .4s;
}

.xp-slide.is-before {
  transform: translateX(-28px);
}

.xp-slide.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .55s var(--xp-ease) .12s, transform .65s var(--xp-ease) .06s, visibility 0s linear 0s;
}

/* Hidden when the viewport is shorter than 680 px. */
.xp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  max-height: max(0px, calc((100vh - 680px) * 99));
  max-height: max(0px, calc((100svh - 680px) * 99));
  overflow: hidden;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #DCE4FF;
}

.xp-chip .xp-ic {
  font-size: 15px;
  font-variation-settings: 'FILL' 1;
}

.xp-h {
  margin: 12px 0 0;
  font-size: clamp(21px, max(min(3.3vw, 5.4vh), 3.2vh), 50px);
  font-size: clamp(21px, max(min(3.3vw, 5.4svh), 3.2svh), 50px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  text-wrap: balance;
}

.xp-h--lead {
  font-size: clamp(22px, max(min(3.4vw, 5.6vh), 3.4vh), 54px);
  font-size: clamp(22px, max(min(3.4vw, 5.6svh), 3.4svh), 54px);
  letter-spacing: -0.036em;
}

.xp-h--end {
  margin: 0;
  font-size: clamp(26px, max(min(4.4vw, 6.6vh), 4vh), 66px);
  font-size: clamp(26px, max(min(4.4vw, 6.6svh), 4svh), 66px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.xp-mark {
  background: #3A62FF;
  box-shadow: inset 0 0 0 2px #8FAAFF;
  border-radius: 0.24em;
  padding: 0 0.16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.xp-mark--nowrap {
  white-space: nowrap;
}

.xp-p {
  margin: 10px 0 0;
  max-width: 460px;
  font-size: clamp(14px, max(min(1.3vw, 2.4vh), 1.9vh), 19px);
  font-size: clamp(14px, max(min(1.3vw, 2.4svh), 1.9svh), 19px);
  font-weight: 500;
  line-height: 1.5;
  color: #DCE4FF;
  text-wrap: pretty;
}

.xp-p--lead {
  max-width: 440px;
}

/* Slide 6 heading + text cross-fade when the tab changes */
.xp-swap {
  transition: opacity .17s ease, transform .3s var(--xp-ease);
}

.xp-swap.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}

.xp-unlock {
  margin: 12px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 460px;
  font-size: clamp(13.5px, max(min(1.1vw, 2.1vh), 1.7vh), 16px);
  font-size: clamp(13.5px, max(min(1.1vw, 2.1svh), 1.7svh), 16px);
  font-weight: 700;
  line-height: 1.35;
  color: #FFFFFF;
  text-align: left;
}

.xp-unlock .xp-ic {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-variation-settings: 'FILL' 1;
  color: #FFFFFF;
}

/* Final slide. Its copy sets the shared panel height at several sizes, so
   24 px above and below keeps that height (and every other slide) exactly
   as before; the copy sits centred between the developer card and the
   Google Play button. */
.xp-slide--end {
  justify-content: center;
  padding: 24px 0;
}

/* Controls stay above Android's gesture bar / iOS home indicator. */
.xp-ctrl {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.xp-back {
  flex: none;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 16, 80, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
}

.xp-back:hover {
  background: rgba(10, 16, 80, 0.42);
}

.xp-back .xp-ic {
  font-size: 24px;
}

.xp-next {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  padding: 6px clamp(14px, 4vw, 26px);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #FFFFFF;
  color: #0E1330;
  font-size: clamp(15px, 4.2vw, 17px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 14px 34px rgba(4, 10, 90, 0.45);
  transition: box-shadow .35s ease;
}

.xp-next.is-emph {
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.24), 0 14px 34px rgba(4, 10, 90, 0.45);
}

.xp-next:hover {
  background: #EEF2FF;
}

.xp-next:active {
  transform: scale(0.98);
}

.xp-next-label {
  min-width: 0;
  text-align: center;
  text-wrap: balance;
}

/* The arrow always matches the label, in every state. */
.xp-next .xp-ic {
  flex: none;
  font-size: 22px;
  color: currentColor;
}

.xp-final {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 60px;
  padding: 0 28px;
  box-sizing: border-box;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #FFFFFF;
  color: #0E1330;
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2), 0 18px 44px rgba(4, 10, 90, 0.45);
}

.xp-final:hover {
  background: #EEF2FF;
  color: #0E1330;
}

.xp-final:active {
  transform: scale(0.98);
}

.xp-final svg {
  width: 22px;
  height: 22px;
  display: block;
  flex: none;
  color: #1D33D8;
}

.xp-final span {
  white-space: nowrap;
}

/* Below 360 px the full label no longer fits beside the Back button. */
@media (max-width: 359px) {
  .xp-final {
    padding: 0 16px;
    gap: 8px;
    font-size: 16px;
  }
}

.xp-chapters {
  display: none;
}

.xp-chapter {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: #B7C6FF;
  font-size: 14px;
  font-weight: 600;
}

.xp-chapter.is-past {
  color: #DCE4FF;
}

.xp-chapter[aria-current="step"] {
  color: #FFFFFF;
  font-weight: 800;
}

.xp-chapter:hover {
  color: #FFFFFF;
}

.xp-chapter-n {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

.xp-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Phones: the question first ─────────────────────────── */
/* The first screen reads top to bottom: wolf, question, cards, Next. The
   cards move down into the copy area's free space just above Next, and
   the question sits above them. experience.js measures --xp-under (stage
   bottom → copy area bottom) and --xp-scens-h (the cards' fitted height);
   until it has, .xp-placing (set in the page's <head>) hides both. */
@media not all and (min-width: 900px) and (min-height: 560px) {
  .xp-scens {
    bottom: calc(4px - var(--xp-under, 0px));
  }

  .xp-slide[data-slide="0"] {
    position: relative;
    top: calc(-20px - var(--xp-scens-h, 0px));
    justify-content: flex-end;
  }

  .xp-placing .xp-scens,
  .xp-placing .xp-slide[data-slide="0"] {
    visibility: hidden;
  }
}

/* ── Desktop: two columns, copy on the left ─────────────── */
@media (min-width: 900px) and (min-height: 560px) {
  .xp-main {
    flex-direction: row-reverse;
    gap: clamp(24px, 4vw, 64px);
    padding: 8px clamp(24px, 4vw, 56px) 28px;
  }

  .xp-panel {
    flex: 0 0 min(460px, max(40%, 400px));
    justify-content: center;
    padding: 0 0 24px;
  }

  .xp-slide {
    align-items: flex-start;
    text-align: left;
  }

  .xp-ctrl {
    margin-top: 30px;
    padding-bottom: 0px;
  }

  .xp-next,
  .xp-final {
    flex: 0 1 auto;
  }

  .xp-chapters {
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 20px;
  }
}

/* ── Reduced motion: states change without movement ─────── */
@media (prefers-reduced-motion: reduce) {
  .xp *,
  .xp *::before,
  .xp *::after {
    transition: none !important;
  }

  .xp-layer.is-before,
  .xp-layer,
  .xp-slide.is-before,
  .xp-slide,
  .xp-stag,
  .xp-ann-row,
  .xp-own-row,
  .xp-swap.is-swapping {
    transform: none;
  }

  .xp-ann-card {
    transform: translateY(-50%);
  }

  .xp-own-pill {
    transform: translateX(-50%);
  }
}