/* Cinematic Pro — shared sticky scroll-story styles.
   Extracted verbatim from experience.html so every feature page can reuse
   the same engine. Page-specific styles belong in the page, not here. */

/* ============================================================
   Scroll-driven pipeline experience.
   Every overlay here (scores, timeline, captions, crop frame,
   waveform) is drawn in the DOM/Canvas and driven by scroll —
   nothing is baked into a video file, so it stays crisp,
   reverses correctly, and remains selectable text.
   ============================================================ */
.xp-intro { padding: 120px 0 40px; text-align: center; }
.xp-h2 { font-size: clamp(30px, 5vw, 54px); line-height: 1.06; letter-spacing: -.02em; margin-bottom: 16px; }
.xp-intro h1 { font-size: clamp(34px, 6vw, 64px); line-height: 1.05; margin-bottom: 18px; letter-spacing: -0.02em; }
.xp-intro p { max-width: 620px; margin: 0 auto; color: var(--text-secondary); font-size: 17px; }
.xp-scrollcue { margin-top: 34px; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.xp-scrollcue span.bar { position: relative; display: block; width: 1px; height: 46px; background: rgba(255,255,255,.14); overflow: hidden; }
/* A travelling mint pulse so the cue actually reads as "keep scrolling". */
.xp-scrollcue span.bar::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 18px;
  background: linear-gradient(var(--accent), transparent);
  animation: cueTravel 1.9s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes cueTravel { 0% { top: -18px; opacity: 0; } 25% { opacity: 1; } 100% { top: 46px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .xp-scrollcue span.bar::after { animation: none; top: 0; height: 100%; opacity: .8; }
}

/* ---- AI Edit showcase (real app output, top of page) ---- */
.ae-hero { padding: 30px 0 10px; }
.ae-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px; max-width: 900px; margin: 0 auto; }
.ae-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.ae-head h2 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; margin: 0; }
.ae-sub { color: var(--text-secondary); font-size: 15px; margin: 0 0 18px; }
.ae-pair { display: flex; gap: 16px; align-items: flex-start; }
.ae-pair > div { flex: 1; min-width: 0; }
.ae-pair video { width: 100%; display: block; border-radius: 12px; background: #05070a; }
.ae-lbl { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-secondary); }
.ae-lbl b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ae-lbl.on, .ae-lbl.on b { color: var(--accent); }
.ae-arrow { align-self: center; flex: 0 0 auto !important; color: var(--accent); font-size: 22px; }
@media (max-width: 680px) { .ae-arrow { transform: rotate(90deg); } .ae-pair { flex-direction: column; } }

/* Track: tall scroll area; the stage sticks inside it. */
.xp-track { position: relative; }
.xp-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.xp-stage-inner { position: relative; width: min(1100px, 92vw); display: flex; align-items: center; justify-content: center; gap: 40px; }

/* ---- The media surface: 16:9 that closes to 9:16 ---- */
.xp-frame-wrap { position: relative; flex: 0 0 auto; }
.xp-frame {
  position: relative; overflow: hidden; border-radius: 18px;
  background: #05070a; border: 1px solid var(--border);
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
  width: var(--fw, 720px); height: var(--fh, 405px);
  transition: none;
}
.xp-media { position: absolute; inset: 0; overflow: hidden; }
/* object-fit:cover + a scroll-driven object-position is the whole reframe
   mechanism: the crop window moves over real footage, no re-encoding. */
.xp-media video { width: 100%; height: 100%; display: block; object-fit: cover; }

/* ---- Edit decision list: the cut you can actually watch happen ---- */
.xp-edl {
  position: absolute; left: 6%; right: 6%; bottom: 6%; height: 30px; z-index: 6;
  display: flex; align-items: stretch; gap: 3px; opacity: 0;
  background: rgba(7,9,12,.55); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px;
}
.xp-edl-seg { border-radius: 3px; background: #46525f; position: relative; overflow: hidden; }
.xp-edl-seg.keep { background: linear-gradient(180deg,#7d8b98,#5d6a77); }
.xp-edl-seg.dead { background: repeating-linear-gradient(45deg,#3a444f,#3a444f 3px,#2c343d 3px,#2c343d 6px); }
.xp-edl-seg.hero { background: linear-gradient(180deg,var(--accent),#02c48d); box-shadow: 0 0 12px rgba(4,254,182,.55); }
/* Vignette + grain sell the "footage" surface without faking a person. */
.xp-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%); }

.xp-badge {
  position: absolute; top: 14px; left: 14px; z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(7,9,12,.72); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary);
}
.xp-badge b { color: var(--accent); font-weight: 700; letter-spacing: .04em; }
.xp-ratio {
  position: absolute; top: 14px; right: 14px; z-index: 6;
  background: rgba(7,9,12,.72); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-primary);
}

/* ---- Cinematic IQ scene-detection bars ---- */
.xp-scenes { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 3; pointer-events: none; }
.xp-scene { position: absolute; top: 0; bottom: 0; border-left: 1px solid rgba(4,254,182,.5); opacity: 0; }
.xp-scene::after { content: attr(data-label); position: absolute; top: 10px; left: 6px; font-size: 9.5px; letter-spacing: .1em; color: rgba(4,254,182,.85); white-space: nowrap; }

/* ---- Subject-tracking box (reframe chapter) ---- */
.xp-track-box { position: absolute; z-index: 5; border: 1.5px solid var(--accent); border-radius: 6px; opacity: 0; box-shadow: 0 0 0 9999px rgba(0,0,0,0); }
.xp-track-box::before, .xp-track-box::after { content: ""; position: absolute; width: 9px; height: 9px; border: 2px solid var(--accent); }
.xp-track-box::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.xp-track-box::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.xp-track-label { position: absolute; z-index: 5; font-size: 10px; letter-spacing: .1em; color: var(--accent); background: rgba(7,9,12,.8); padding: 2px 6px; border-radius: 4px; opacity: 0; }

/* ---- Captions (code-rendered, real template styling) ---- */
.xp-caption { position: absolute; left: 0; right: 0; z-index: 7; text-align: center; padding: 0 8%; opacity: 0; }
.xp-caption .w {
  display: inline-block; margin: 0 .16em; font-weight: 800; letter-spacing: -.01em;
  font-size: var(--capsize, 30px); line-height: 1.16; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9);
  transform: translateY(6px) scale(.86); opacity: .25;
}
.xp-caption .w.on { color: var(--accent); transform: translateY(0) scale(1.06); opacity: 1; }

/* ---- Waveform (Studio Sound) ---- */
.xp-wave { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 4; opacity: 0; }
.xp-wave canvas { width: 100%; height: 100%; display: block; }

/* ---- Side rail: the narrative copy, one chapter at a time ---- */
.xp-rail { flex: 1 1 320px; max-width: 380px; position: relative; min-height: 260px; }
.xp-chapter { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); pointer-events: none; }
.xp-chapter.is-on { opacity: 1; transform: none; pointer-events: auto; }
.xp-chapter .step { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.xp-chapter .step i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-dim); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.xp-chapter h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.12; margin-bottom: 12px; letter-spacing: -.02em; }
.xp-chapter p { color: var(--text-secondary); font-size: 15.5px; line-height: 1.6; margin-bottom: 14px; }
.xp-metric { display: flex; gap: 22px; margin-top: 16px; }
.xp-metric div { min-width: 0; }
.xp-metric .n { font-size: 22px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.xp-metric .l { font-size: 12px; color: var(--text-secondary); }
/* Qualitative Cinematic IQ labels — no unverified numeric scores on the page. */
.xp-iqchips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.iqchip {
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid rgba(4,254,182,.28);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.xp-chapter.is-on .iqchip { opacity: 1; transform: none; }
.xp-chapter.is-on .iqchip:nth-child(2) { transition-delay: .09s; }
.xp-chapter.is-on .iqchip:nth-child(3) { transition-delay: .18s; }
.xp-chapter.is-on .iqchip:nth-child(4) { transition-delay: .27s; }
.iqchip.muted { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }

/* Progress rail down the left edge */
.xp-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--border); z-index: 8; }
.xp-progress i { position: absolute; top: 0; left: 0; width: 100%; background: var(--accent); box-shadow: 0 0 10px rgba(4,254,182,.7); }

/* Honest labelling — this is a visualization, not a literal app screen. */
.xp-disclaimer { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 9; font-size: 11px; color: var(--text-secondary); opacity: .75; text-align: center; padding: 0 16px; }

/* ---- Real-proof section ---- */
.proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.proof-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px; }
.proof-card h3 { font-size: 17px; margin-bottom: 6px; }
.proof-card p.sub { color: var(--text-secondary); font-size: 13.5px; margin-bottom: 14px; }
.proof-real { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--accent-dim); padding: 3px 9px; border-radius: 999px; margin-bottom: 10px; }
.ba { position: relative; border-radius: 12px; overflow: hidden; cursor: ew-resize; background: #05070a; }
.ba img { display: block; width: 100%; height: auto; }
.ba-before-wrap { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.ba-before-wrap img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--accent); transform: translateX(-1px); pointer-events: none; }
.ba-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); transform: translate(-50%,-50%); box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.ba-tag { position: absolute; bottom: 8px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; background: rgba(7,9,12,.75); padding: 3px 8px; border-radius: 5px; color: var(--text-secondary); }
.ba-tag.l { left: 8px; } .ba-tag.r { right: 8px; color: var(--accent); }

.ss-player { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.ss-play { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; border: none; background: var(--accent); color: #04211a; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ss-bars { flex: 1; height: 46px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.ss-bars span { flex: 1; background: #2c3540; border-radius: 2px; min-height: 3px; }
.ss-bars span.played { background: var(--accent); }
.ss-ab { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-top: 12px; }
.ss-ab button { background: none; border: none; color: var(--text-secondary); padding: 7px 16px; font-size: 13px; cursor: pointer; }
.ss-ab button.is-active { background: var(--accent); color: #04211a; font-weight: 700; }

/* Side-by-side vertical proof clips (real app output). */
.vs-pair { display: flex; gap: 12px; }
.vs-pair > div { flex: 1; min-width: 0; }
.vs-pair video { width: 100%; display: block; border-radius: 10px; background: #05070a; }
.vs-tag { display: inline-block; margin-top: 8px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.vs-tag.on { color: var(--accent); }

/* Below this width the copy rail stacks under the frame. Keep in sync with
   STACK_AT in experience.js. Sticky choreography runs at >=900px. */
@media (max-width: 899px) {
  /* Sticky choreography runs here too. The frame sits on top and the copy
     stacks under it, so both have to fit inside one sticky viewport. */
  .xp-stage-inner { flex-direction: column; gap: 14px; }
  .xp-rail { max-width: 560px; width: 100%; min-height: 190px; }
  .xp-chapter h2 { font-size: 20px; line-height: 1.25; }
  .xp-chapter p { font-size: 14px; }
  .xp-metric { margin-top: 10px; }
  .xp-progress { display: none; }        /* no room for the rail on a phone */
}
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } }

/* Reduced motion: no scroll choreography — every chapter is simply shown. */
@media (prefers-reduced-motion: reduce) {
  .xp-track { height: auto !important; }
  .xp-stage { position: static; height: auto; padding: 40px 0; }
  .xp-stage-inner { flex-direction: column; }
  .xp-chapter { position: static; opacity: 1; transform: none; margin-bottom: 28px; }
  .xp-rail { min-height: 0; }
  .xp-caption, .xp-wave, .xp-scene, .xp-track-box, .xp-track-label { opacity: 1 !important; }
}

/* ---------- before/after wipe (Photo Studio, Ultra HD) ----------
   Two stacked layers inside the frame. The "before" layer is clipped from the
   right by JS (width %), so scrolling reveals the real result underneath. Both
   layers are sized to the frame, so mixed source aspects letterbox rather than
   crop — these are real customer results and must not be silently re-framed. */
.xp-wipe { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.xp-wipe-after,
.xp-wipe-before { position: absolute; inset: 0; overflow: hidden; }
.xp-wipe-before { width: 100%; will-change: width; }
.xp-wipe-after img, .xp-wipe-after video,
.xp-wipe-before img, .xp-wipe-before video {
  position: absolute; inset: 0;
  width: var(--fw); height: var(--fh);
  object-fit: contain; background: #05070a;
}
.xp-wipe-handle {
  position: absolute; top: 0; bottom: 0; width: 2px; left: 100%;
  background: var(--accent); box-shadow: 0 0 14px rgba(4,254,182,.7);
  will-change: left; pointer-events: none;
}
.xp-wipe-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 2px solid var(--accent); background: rgba(5,7,10,.75);
}
.xp-wipe-tag {
  position: absolute; bottom: 12px; z-index: 3;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px;
  background: rgba(5,7,10,.78); border: 1px solid var(--border); color: var(--text-dim);
}
.xp-wipe-tag.l { left: 12px; }
.xp-wipe-tag.r { right: 12px; color: var(--accent); border-color: rgba(4,254,182,.4); }
.xp-wipe-label {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  background: rgba(5,7,10,.8); border: 1px solid var(--border); color: var(--text);
}

/* ---------- sound toggle ----------
   Sits UNDER the frame rather than floating over it: the badge owns the top
   left, the ratio chip the top right, and the edit-list strip the bottom, so
   an overlay control would collide on one page or another. The row is given
   the frame's own width so the button lines up with its right edge. */
.xp-sound-row { width: var(--fw, 100%); display: flex; justify-content: flex-end; margin-top: 12px; }
.xp-sound {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .01em; transition: color .18s, border-color .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
}
.xp-sound:hover { color: var(--text-primary); border-color: rgba(4,254,182,.45); }
.xp-sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.xp-sound.is-on { color: var(--accent); border-color: rgba(4,254,182,.6); background: rgba(4,254,182,.08); }
.xp-sound svg { width: 15px; height: 15px; flex: 0 0 auto; }
.xp-sound .ic-on { display: none; }
.xp-sound.is-on .ic-on { display: block; }
.xp-sound.is-on .ic-off { display: none; }
@media (max-width: 899px) {
  /* Stacked layout: the frame is centred, so centre the control with it. */
  .xp-sound-row { width: 100%; justify-content: center; }
  .xp-sound { padding: 10px 16px; }        /* keeps the tap target >=44px */
}

/* ---------- gi: the Growth Intelligence app flow, drawn as markup ----------
 * "Liquid glass": translucent panels with hairline light edges, floating over
 * a static colour field. Sized in em off one root that the frame's own live
 * width drives, so the whole screen scales as a unit rather than needing a
 * breakpoint per rule.
 *
 * PERFORMANCE, and why there is almost no backdrop-filter here: every panel in
 * this story has its opacity rewritten on each scroll frame. Blurring a layer
 * that is re-compositing every frame is exactly where glass UIs get expensive.
 * So the colour field is a STATIC layer that never animates, and the panels
 * above it are plain translucent fills - which over a coloured ground reads as
 * glass anyway. The single real backdrop-filter is on the consent dialog: it
 * genuinely floats over content, and it fades in once.
 *
 * Colour still carries meaning, same as the app: amber for the score of what
 * already exists, green for what is being offered, white for the one action
 * that changes the channel. */
.xp-gi {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  /* One knob. --fw is the frame's live pixel width, set by the engine every
     frame, so the whole screen scales with the frame. */
  font-size: calc(var(--fw, 320px) * 0.037);
  background: #0B0A18;
  overflow: hidden;
  text-align: left;
  isolation: isolate;
}
/* The colour field. Static: never animated, never re-rasterised mid-scroll. */
.xp-gi::before {
  content: ''; position: absolute; inset: -22%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 38% at 22% 6%,  #5B4BFF 0%, transparent 62%),
    radial-gradient(44% 36% at 90% 24%, #C64BFF 0%, transparent 60%),
    radial-gradient(52% 42% at 60% 98%, #1FA2FF 0%, transparent 62%);
  filter: blur(16px);
  opacity: .8;
}
/* A dark wash over the field so text keeps its contrast wherever it lands. */
.xp-gi::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,6,20,.42) 0%, rgba(8,6,20,.62) 100%);
}
.xp-gi * { box-sizing: border-box; }
/* Every scroll step rises into place off one custom property, so a step that
   also needs its own transform can compose the two instead of losing one. */
.xp-gi [data-gi] { transform: translateY(var(--gi-rise, 0px)); }
.xp-gi-scr {
  position: absolute; inset: 0; z-index: 1;
  padding: 1.15em 1em; display: flex; flex-direction: column; gap: .72em;
}

.xp-gi-title {
  font-weight: 600; font-size: 1.2em; color: #fff; text-align: center;
  letter-spacing: -.012em; padding-bottom: .1em;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}

/* Segmented control - the single most "system native" component here. */
.xp-gi-tabs {
  display: flex; gap: .18em; padding: .2em; border-radius: .66em;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16);
}
.xp-gi-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .38em;
  padding: .42em .2em; border-radius: .52em; font-size: .9em; font-weight: 590;
  color: rgba(255,255,255,.66); white-space: nowrap; letter-spacing: -.005em;
}
.xp-gi-tab b { font-weight: 700; font-variant-numeric: tabular-nums; }
.xp-gi-tab.on {
  background: rgba(255,255,255,.92); color: #1F1650;
  box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 .5px rgba(255,255,255,.5);
}

.xp-gi-lbl { font-size: .82em; color: rgba(255,255,255,.62); letter-spacing: .005em; }
.xp-gi-cur { display: flex; gap: .55em; align-items: flex-start; }
.xp-gi-cur p {
  margin: 0; color: #fff; font-weight: 600; line-height: 1.34;
  font-size: .97em; letter-spacing: -.006em;
}

/* One score chip, two meanings - the colour is the verdict. */
.xp-gi-sc {
  flex: 0 0 auto; min-width: 2.15em; text-align: center;
  padding: .2em .38em; border-radius: .44em;
  font-weight: 700; font-size: 1em; font-variant-numeric: tabular-nums;
}
.xp-gi-sc.mid {
  color: #FFD479; background: rgba(255,196,88,.2);
  box-shadow: inset 0 0 0 .5px rgba(255,196,88,.4);
}
.xp-gi-sc.hi {
  color: #7BFFB0; background: rgba(80,255,170,.18);
  box-shadow: inset 0 0 0 .5px rgba(80,255,170,.36);
}

.xp-gi-sugh { display: flex; align-items: baseline; justify-content: space-between; }
.xp-gi-sugh span { font-weight: 650; color: #fff; font-size: 1.02em; letter-spacing: -.01em; }
.xp-gi-sugh em { font-style: normal; color: #B9C4FF; font-size: .85em; font-weight: 590; }

.xp-gi-rows { display: flex; flex-direction: column; gap: .4em; }
.xp-gi-row {
  display: flex; align-items: center; gap: .55em;
  padding: .58em .62em; border-radius: .64em;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.15);
  transition: background .28s ease, box-shadow .28s ease;
}
.xp-gi-row.is-sel {
  background: rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 5px 18px rgba(90,70,255,.4);
}
/* Selection reads as a tick, not a dot - the app is asking you to confirm a
   choice, and a filled checkmark says "chosen" more plainly than a radio. */
.xp-gi-radio {
  flex: 0 0 auto; width: 1.05em; height: 1.05em; border-radius: 50%; position: relative;
  box-shadow: inset 0 0 0 1.4px rgba(255,255,255,.42);
  transition: background .2s ease, box-shadow .2s ease;
}
.xp-gi-row.is-sel .xp-gi-radio { background: #fff; box-shadow: none; }
.xp-gi-row.is-sel .xp-gi-radio::after {
  content: ''; position: absolute; left: .36em; top: .2em;
  width: .26em; height: .48em;
  border: solid #2A1D6B; border-width: 0 .13em .13em 0;
  transform: rotate(42deg);
}
.xp-gi-row p { margin: 0; flex: 1; color: rgba(255,255,255,.86); line-height: 1.3; font-size: .89em; }
.xp-gi-row.is-sel p { color: #fff; }

.xp-gi-sel {
  border-radius: .64em; padding: .58em .66em;
  background: rgba(255,255,255,.11);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18);
}
.xp-gi-sel .xp-gi-lbl { color: #C9D2FF; font-size: .78em; font-weight: 650; }
.xp-gi-sel p { margin: .22em 0 0; color: #fff; font-weight: 600; line-height: 1.3; font-size: .94em; letter-spacing: -.006em; }
.xp-gi-count {
  display: flex; justify-content: space-between; margin-top: .42em;
  font-size: .79em; color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums;
}
.xp-gi-count .over { color: #FFD479; }

/* The one action that changes the channel, so it is the one solid object on
   screen - everything else is translucent. */
.xp-gi-apply {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  padding: .66em; border-radius: .64em; font-weight: 650; font-size: .97em;
  letter-spacing: -.006em;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(226,231,255,.9));
  color: #2A1D6B;
  box-shadow: 0 5px 16px rgba(0,0,0,.3), inset 0 .5px 0 rgba(255,255,255,.9);
}
.xp-gi-note { font-size: .77em; line-height: 1.45; color: rgba(255,255,255,.64); }

.xp-gi-why { border-top: .5px solid rgba(255,255,255,.16); padding-top: .55em; }
.xp-gi-why > div { display: flex; justify-content: space-between; color: rgba(255,255,255,.8); font-size: .9em; font-weight: 590; }
.xp-gi-why p { margin: .42em 0 0; font-size: .79em; line-height: 1.5; color: rgba(255,255,255,.66); }

/* ---- the consent gate ----
   The only real backdrop-filter in the file. It floats over the sheet and
   fades in once, so the blur cost is paid a single time, not per frame. */
.xp-gi-scrim { position: absolute; inset: 0; z-index: 2; background: rgba(6,4,16,.55); }
.xp-gi-dlg {
  position: absolute; inset: 0; margin: auto; z-index: 3;
  width: 84%; height: max-content; padding: 1.15em;
  border-radius: 1.3em;
  background: rgba(38,30,78,.62);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.24), 0 24px 60px rgba(0,0,0,.6);
}
.xp-gi [data-gi].xp-gi-dlg { transform: translateY(var(--gi-rise, 0px)); }
.xp-gi-dlg h4 { margin: 0 0 .5em; font-size: 1.16em; color: #fff; line-height: 1.24; letter-spacing: -.014em; }
.xp-gi-dlg p { margin: 0; font-size: .81em; line-height: 1.5; color: rgba(255,255,255,.68); }
.xp-gi-dlg .keep { display: block; text-align: center; margin: 1em 0 .6em; color: #C9D2FF; font-weight: 600; font-size: .95em; }
.xp-gi-dlg .go {
  display: block; text-align: center; padding: .62em; border-radius: 2em;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(226,231,255,.9));
  color: #2A1D6B; font-weight: 700; font-size: .95em;
  box-shadow: 0 4px 14px rgba(0,0,0,.3), inset 0 .5px 0 rgba(255,255,255,.9);
}

/* Confirmed. Shows the scope, not just a tick. */
.xp-gi-done {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7em; padding: 1.5em; text-align: center;
  background: linear-gradient(180deg, rgba(8,6,20,.35), rgba(8,6,20,.7));
}
.xp-gi-done .tick {
  width: 3.3em; height: 3.3em; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #7BFFB0, #34D98A);
  box-shadow: 0 0 0 .5em rgba(123,255,176,.14), 0 10px 30px rgba(52,217,138,.4);
}
.xp-gi-done .tick svg { width: 1.9em; height: 1.9em; stroke: #10331F; }
.xp-gi-done h4 { margin: 0; color: #fff; font-size: 1.32em; letter-spacing: -.016em; }
.xp-gi-done p { margin: 0; font-size: .87em; line-height: 1.5; color: rgba(255,255,255,.66); }
.xp-gi-done .scope { color: #7BFFB0; font-weight: 650; }

/* The evidence card the flow starts from. */
.xp-gi-ev { gap: .58em; justify-content: center; }
.xp-gi-evtop { display: flex; align-items: center; justify-content: space-between; }
.xp-gi-pill { padding: .24em .62em; border-radius: 2em; font-size: .75em; font-weight: 650; letter-spacing: .015em; }
.xp-gi-pill.rev { color: #C9D2FF; background: rgba(120,140,255,.22); box-shadow: inset 0 0 0 .5px rgba(180,195,255,.4); }
.xp-gi-pill.arc { color: rgba(255,255,255,.6); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16); }
.xp-gi-ev h4 { margin: 0; color: #fff; font-size: 1.08em; line-height: 1.32; letter-spacing: -.012em; }
.xp-gi-meta { display: flex; flex-direction: column; gap: .26em; font-size: .82em; color: rgba(255,255,255,.6); }
.xp-gi-meta b { color: #fff; font-weight: 650; }

/* Where blur is unavailable the panels are already opaque enough to read;
   just firm up the dialog so it never sits on unblurred text. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .xp-gi-dlg { background: rgba(32,25,68,.96); }
}