/* =========================================================================
   AI17Z static product preview.

   The interior of the frame is deliberately not the landing page's visual
   system. It is the application's: ink/bone/signal, mono eyebrows at 10px with
   0.16em tracking, hairline dividers, no green. Crossing that boundary is the
   point — the website hands you to the product, and you can feel the change.

   Nothing in here loads a font, an image or a network resource.
   ========================================================================= */

.preview-section {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(80px, 11vh, 150px) var(--pad) clamp(70px, 9vh, 120px);
  overflow: clip;
}

/* A quiet lighting change as the section arrives: the page dims around the
   frame so the application reads as the lit object. */
.preview-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 46%, rgba(187, 204, 215, .07), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.preview-section.in-view::before { opacity: 1; }

.preview-heading {
  position: relative;
  z-index: 2;
  max-width: var(--page);
  margin: 0 auto clamp(38px, 5vh, 68px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
.preview-heading p {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
}
.preview-enter {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 26px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--paper);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.preview-enter:hover { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .085); transform: translateY(-1px); }
.preview-enter i { font-style: normal; transition: transform .3s var(--ease); }
.preview-enter:hover i { transform: translateY(3px); }
.preview-enter[hidden] { display: none; }

/* ---------- the frame ---------- */

.preview-frame {
  position: relative;
  z-index: 2;
  max-width: min(1440px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: clamp(16px, 1.6vw, 26px);
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .12),
    0 40px 120px -40px rgba(0, 0, 0, .9);
  padding: clamp(9px, .9vw, 15px);
  /* The frame arrives as an object that expands into an application. */
  transform: scale(.965) translateY(26px);
  opacity: 0;
  transition: transform 1s var(--ease), opacity .8s var(--ease);
}
.preview-frame.revealed { transform: none; opacity: 1; }

/* Repeating microtext along the frame edge. Part of the watermark system, not
   decoration: it is legible at any zoom and survives a screenshot crop. */
.preview-microtext {
  position: absolute;
  inset-inline: clamp(9px, .9vw, 15px);
  top: 2px;
  height: 10px;
  overflow: hidden;
  font-size: 6.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .2);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.preview-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding: 10px 12px 14px;
}
.preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid rgba(227, 200, 123, .38);
  border-radius: 999px;
  background: rgba(227, 200, 123, .07);
  color: #e3c87b;
  font-size: 9.5px;
  letter-spacing: .19em;
  text-transform: uppercase;
  white-space: nowrap;
}
.preview-badge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: pv-breathe 2.6s ease-in-out infinite;
}
@keyframes pv-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.preview-disclaimer {
  margin: 0;
  flex: 1 1 30ch;
  min-width: 0;
  color: rgba(242, 242, 236, .48);
  font-size: 11.5px;
  line-height: 1.5;
}
.preview-disclaimer b { color: rgba(242, 242, 236, .78); font-weight: 500; }

/* ---------- the application window ---------- */

.pv {
  --pv-ink: #0c0c0c;
  --pv-raised: #121212;
  --pv-panel: #161616;
  --pv-line: #232323;
  --pv-bone: #f2f1ee;
  --pv-dim: #a6a49e;
  --pv-faint: #6e6c67;
  --pv-live: #7be3a3;
  --pv-wait: #e3c87b;
  --pv-fail: #e38a7b;
  --pv-calm: #bbccd7;
  --pv-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  position: relative;
  border-radius: clamp(10px, 1.1vw, 18px);
  background: var(--pv-ink);
  color: var(--pv-bone);
  overflow: hidden;
  isolation: isolate;
}

/* The large watermark. Under the interface, over the background: it belongs to
   the window, not to a layer floating above it. */
.pv-watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
.pv-watermark span {
  font-size: clamp(84px, 17vw, 300px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1;
  color: transparent;
  background: linear-gradient(180deg, rgba(242, 241, 238, .085), rgba(242, 241, 238, .022));
  -webkit-background-clip: text;
  background-clip: text;
  transform: rotate(-13deg);
  white-space: nowrap;
}

.pv-body { position: relative; z-index: 1; }

/* ---------- application top bar ---------- */

.pv-topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--pv-line);
  background: rgba(12, 12, 12, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pv-brand {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.045em;
  color: var(--pv-bone);
}
.pv-nav { display: flex; gap: 20px; }
.pv-nav button,
.pv-tabbar button,
.pv-switch button,
.pv-chip,
.pv-btn {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.pv-nav button {
  font-family: var(--pv-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pv-faint);
  transition: color .25s ease;
}
.pv-nav button:hover { color: var(--pv-dim); }
.pv-nav button[aria-current='true'] { color: var(--pv-bone); }

.pv-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.pv-switch {
  display: flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--pv-line);
  border-radius: 999px;
  background: rgba(22, 22, 22, .7);
}
.pv-switch button {
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--pv-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pv-faint);
  transition: color .2s ease, background .2s ease;
}
.pv-switch button[aria-checked='true'] { background: rgba(242, 241, 238, .12); color: var(--pv-bone); }

.pv-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--pv-line);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--pv-bone);
  transition: border-color .2s ease, background .2s ease;
}
.pv-btn:hover { border-color: var(--pv-faint); background: rgba(255, 255, 255, .03); }
.pv-btn-primary { background: var(--pv-bone); border-color: var(--pv-bone); color: var(--pv-ink); }
.pv-btn-primary:hover { background: #fff; border-color: #fff; }
.pv-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- screen shell ---------- */

.pv-screen {
  min-height: clamp(430px, 52vh, 640px);
  max-height: min(78vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 3vw, 46px) clamp(18px, 2.6vw, 44px) clamp(30px, 4vw, 56px);
  scrollbar-width: thin;
  scrollbar-color: #262626 transparent;
}
.pv-screen::-webkit-scrollbar { width: 8px; }
.pv-screen::-webkit-scrollbar-thumb { background: #262626; border-radius: 99px; }

.pv-eyebrow {
  font-family: var(--pv-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pv-faint);
  margin: 0 0 14px;
}
.pv-monument {
  margin: 0;
  font-size: clamp(38px, 6.2vw, 84px);
  font-weight: 600;
  line-height: .86;
  letter-spacing: -.045em;
  background: linear-gradient(180deg, #646973 0%, #bbccd7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-block-end: .12em;
  margin-block-end: -.12em;
}

.pv-mono { font-family: var(--pv-mono); }
.pv-dim { color: var(--pv-dim); }
.pv-faint { color: var(--pv-faint); }

.pv-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pv-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pv-dim);
}
.pv-dot i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--pv-faint); }
.pv-dot.live i { background: var(--pv-live); }
.pv-dot.wait i { background: var(--pv-wait); }
.pv-dot.fail i { background: var(--pv-fail); }
.pv-dot.live i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--pv-live);
  animation: pv-ping 1.9s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes pv-ping { 0% { transform: scale(1); opacity: .6; } 75%, 100% { transform: scale(2.4); opacity: 0; } }

.pv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--pv-line);
  border-radius: 999px;
  font-family: var(--pv-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pv-dim);
  cursor: default;
}
button.pv-chip { cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
button.pv-chip:hover { color: var(--pv-dim); border-color: var(--pv-faint); }
button.pv-chip[aria-pressed='true'] { border-color: rgba(187, 204, 215, .6); background: rgba(187, 204, 215, .08); color: var(--pv-bone); }

.pv-card {
  border: 1px solid var(--pv-line);
  border-radius: 14px;
  background: rgba(18, 18, 18, .45);
  padding: clamp(16px, 1.6vw, 22px);
}
button.pv-card { display: block; width: 100%; text-align: left; transition: border-color .3s ease, background .3s ease; }
button.pv-card:hover { border-color: rgba(166, 164, 158, .4); background: rgba(18, 18, 18, .7); }

/* The agent mark. Generated from the name, as the real glyph is. */
.pv-glyph {
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--pv-line);
  background:
    radial-gradient(circle at 32% 28%, rgba(187, 204, 215, .3), transparent 62%),
    linear-gradient(150deg, #1a1a1a, #0e0e0e);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--pv-bone);
  flex: none;
}
.pv-glyph.xl { width: clamp(84px, 9vw, 118px); height: clamp(84px, 9vw, 118px); font-size: clamp(30px, 3.4vw, 44px); }
.pv-glyph.md { width: 42px; height: 42px; font-size: 17px; }

/* ---------- Agents screen ---------- */

.pv-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  border-radius: 22px;
  border: 1px solid var(--pv-line);
  background: rgba(18, 18, 18, .4);
  padding: clamp(24px, 3.4vw, 48px);
  width: 100%;
  transition: border-color .4s ease;
}
.pv-lead:hover { border-color: rgba(166, 164, 158, .4); }
.pv-lead h3 { margin: 0; font-size: clamp(26px, 3.6vw, 48px); font-weight: 300; letter-spacing: -.03em; }
.pv-lead-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.pv-lead p { margin: 0; max-width: 44ch; color: var(--pv-dim); font-size: 14px; font-weight: 300; line-height: 1.6; }

.pv-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  width: min(460px, 100%);
  border: 1px solid var(--pv-line);
  border-radius: 12px;
  background: var(--pv-line);
  overflow: hidden;
}
.pv-stats div { background: var(--pv-ink); padding: 14px 10px; }
.pv-stats dd { margin: 0; font-size: clamp(15px, 1.5vw, 20px); font-weight: 300; }
.pv-stats dt { margin-top: 3px; font-family: var(--pv-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--pv-faint); }

/*
 * Capped, not auto-fit.
 *
 * `auto-fit` kept adding tracks as the frame widened, so at 1390px a mention
 * inbox that is two columns in the real application became four narrow ones.
 * The column count is a composition decision, so it is stated.
 */
.pv-grid-3 { display: grid; gap: 14px; grid-template-columns: 1fr; }
.pv-grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .pv-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mention and panel cards carry sentences, so they get a second column later
   than the small stat cards do — the same place the real application does. */
@media (min-width: 880px) {
  .pv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .pv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pv-agent-card { display: flex; flex-direction: column; gap: 16px; }
.pv-agent-card h4 { margin: 0; font-size: 22px; font-weight: 300; letter-spacing: -.02em; }
.pv-agent-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--pv-line);
  padding-top: 12px;
  font-family: var(--pv-mono);
  font-size: 10.5px;
  color: var(--pv-faint);
}

/* ---------- panels and rows ---------- */

.pv-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pv-panel-head .pv-eyebrow { margin: 0; }

.pv-line { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 12px; padding: 4px 0; }
.pv-line dt { font-family: var(--pv-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pv-faint); }
.pv-line dd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--pv-dim); }

.pv-list { list-style: none; margin: 0; padding: 0; }
.pv-list > li { border-top: 1px solid var(--pv-line); }
.pv-list > li:first-child { border-top: 0; }

.pv-activity-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 11px 0;
  text-align: left;
  font-size: 13px;
  color: var(--pv-dim);
  transition: color .2s ease;
}
.pv-activity-row:hover { color: var(--pv-bone); }
.pv-activity-row span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-activity-row time { flex: none; font-family: var(--pv-mono); font-size: 10px; color: var(--pv-faint); }

/* ---------- mention cards ---------- */

.pv-mention { display: block; width: 100%; text-align: left; border-radius: 16px; padding: clamp(16px, 1.7vw, 24px); }
.pv-mention-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pv-mention-head > .pv-dot,
.pv-mention-head > time { margin-left: auto; }
.pv-mention-head time { font-family: var(--pv-mono); font-size: 10px; color: var(--pv-faint); }
.pv-handle { font-family: var(--pv-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.pv-mention-text { margin: 14px 0 0; font-size: 16px; font-weight: 300; line-height: 1.35; }
.pv-mention-reply { margin-top: 16px; border-left: 2px solid rgba(187, 204, 215, .4); padding-left: 14px; }
.pv-mention-reply p { margin: 5px 0 0; font-size: 14px; line-height: 1.55; color: var(--pv-dim); }
.pv-mention-note { margin: 14px 0 0; font-size: 13px; color: var(--pv-faint); line-height: 1.5; }
.pv-foundby { margin: 16px 0 0; font-family: var(--pv-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pv-faint); }

/* ---------- job trace ---------- */

.pv-job-head h3 { margin: 14px 0 0; font-size: clamp(22px, 2.9vw, 38px); font-weight: 300; line-height: 1.15; letter-spacing: -.02em; }
.pv-section { margin-top: clamp(28px, 3.4vw, 48px); }

.pv-output {
  margin: 0;
  border: 1px solid var(--pv-line);
  border-radius: 14px;
  background: var(--pv-raised);
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.6;
}
.pv-why { border: 1px solid var(--pv-line); border-radius: 14px; background: rgba(22, 22, 22, .6); padding: 18px; }
.pv-why-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 14px; padding: 6px 0; }
.pv-why-row dt { font-family: var(--pv-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pv-faint); }
.pv-why-row dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--pv-dim); }
.pv-why-row.lead dd { color: var(--pv-bone); }
.pv-factors { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 13px 0 0; border-top: 1px solid var(--pv-line); list-style: none; }
.pv-factors li { font-family: var(--pv-mono); font-size: 10px; color: var(--pv-faint); }
.pv-factors b { font-weight: 400; }
.pv-factors .up { color: rgba(123, 227, 163, .85); }
.pv-factors .down { color: rgba(227, 138, 123, .85); }

.pv-context { border: 1px solid var(--pv-line); border-radius: 14px; overflow: hidden; }
.pv-context > div { border-bottom: 1px solid var(--pv-line); padding: 14px 18px; }
.pv-context > div:last-child { border-bottom: 0; }
.pv-context .target { background: rgba(187, 204, 215, .05); }
.pv-context .target .pv-eyebrow { color: var(--pv-calm); margin-bottom: 8px; }
.pv-context p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--pv-dim); }
.pv-context .target p { color: var(--pv-bone); }
.pv-context .role { font-family: var(--pv-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pv-faint); }

.pv-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid var(--pv-line); }
.pv-timeline li { position: relative; padding-bottom: 16px; }
.pv-timeline li::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pv-line);
}
.pv-timeline li.on::before { background: var(--pv-calm); }
.pv-timeline-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; }
.pv-timeline-head time,
.pv-timeline-head span { font-family: var(--pv-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; }
.pv-timeline-head time { color: var(--pv-faint); letter-spacing: 0; }
.pv-timeline-head span { color: var(--pv-dim); }
.pv-timeline p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--pv-dim); }
.pv-timeline .debug p { color: var(--pv-faint); }

.pv-memories { list-style: none; margin: 0; padding: 0; border-block: 1px solid var(--pv-line); }
.pv-memories li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--pv-line); }
.pv-memories li:first-child { border-top: 0; }
.pv-memories .rank { font-family: var(--pv-mono); font-size: 11px; color: var(--pv-faint); }
.pv-memories .scope { font-family: var(--pv-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--pv-faint); }
.pv-memories p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--pv-dim); }
.pv-memories .why { margin-top: 6px; font-size: 12px; color: rgba(187, 204, 215, .8); }

.pv-table-wrap { overflow-x: auto; scrollbar-width: thin; }
.pv-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 13px; }
.pv-table th,
.pv-table td { text-align: left; padding: 11px 16px 11px 0; }
.pv-table th { font-family: var(--pv-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--pv-faint); font-weight: 400; }
.pv-table thead tr { border-block: 1px solid var(--pv-line); }
.pv-table tbody tr { border-bottom: 1px solid var(--pv-line); color: var(--pv-dim); }
.pv-table td.mono { font-family: var(--pv-mono); font-size: 11.5px; }

/* ---------- radar ---------- */

.pv-radar-list { list-style: none; margin: 0; padding: 0; border-block: 1px solid var(--pv-line); }
.pv-radar-list li { border-top: 1px solid var(--pv-line); padding: 13px 0; }
.pv-radar-list li:first-child { border-top: 0; }
.pv-radar-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pv-radar-head .name { font-size: 13.5px; }
.pv-radar-head .target { font-family: var(--pv-mono); font-size: 11px; color: var(--pv-dim); }
.pv-radar-head .status { margin-left: auto; font-family: var(--pv-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pv-faint); }
.pv-radar-list .meta { margin: 5px 0 0; font-family: var(--pv-mono); font-size: 9.5px; color: var(--pv-faint); line-height: 1.5; }
.pv-radar-list .note { margin: 4px 0 0; font-size: 11.5px; color: var(--pv-faint); }

/* Four surfaces converging on one event. */
.pv-converge { position: relative; margin-top: 20px; padding: 20px; border: 1px solid var(--pv-line); border-radius: 14px; background: rgba(22, 22, 22, .5); }
.pv-converge-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr); gap: 16px; align-items: center; }
.pv-converge-sources { display: grid; gap: 7px; }
.pv-converge-sources span {
  font-family: var(--pv-mono);
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pv-faint);
  padding: 7px 11px;
  border: 1px solid var(--pv-line);
  border-radius: 8px;
  transition: color .4s ease, border-color .4s ease, background .4s ease;
}
.pv-converge.run .pv-converge-sources span { animation: pv-found .5s var(--ease) forwards; }
.pv-converge.run .pv-converge-sources span:nth-child(1) { animation-delay: .05s; }
.pv-converge.run .pv-converge-sources span:nth-child(2) { animation-delay: .3s; }
.pv-converge.run .pv-converge-sources span:nth-child(3) { animation-delay: .18s; }
.pv-converge.run .pv-converge-sources span:nth-child(4) { animation-delay: .5s; }
@keyframes pv-found {
  to { color: var(--pv-calm); border-color: rgba(187, 204, 215, .5); background: rgba(187, 204, 215, .07); }
}
.pv-converge-arrow { font-family: var(--pv-mono); font-size: 11px; color: var(--pv-faint); }
.pv-converge-event { text-align: center; border: 1px solid rgba(187, 204, 215, .35); border-radius: 12px; padding: 16px 12px; background: rgba(187, 204, 215, .05); opacity: .35; transition: opacity .5s var(--ease) .75s; }
.pv-converge.run .pv-converge-event { opacity: 1; }
.pv-converge-event strong { display: block; font-size: 22px; font-weight: 300; letter-spacing: -.02em; }
.pv-converge-event span { font-family: var(--pv-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--pv-faint); }

/* ---------- connect X ---------- */

.pv-signin { border: 1px solid var(--pv-line); border-radius: 12px; background: var(--pv-panel); padding: 16px 18px; }
.pv-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pv-steps li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--pv-faint); transition: color .3s ease; }
.pv-steps li i { width: 6px; height: 6px; border-radius: 50%; background: var(--pv-line); flex: none; transition: background .3s ease; }
.pv-steps li.done { color: var(--pv-dim); }
.pv-steps li.done i { background: var(--pv-calm); }
.pv-steps li.now { color: var(--pv-bone); }
.pv-steps li.now i { background: var(--pv-bone); animation: pv-breathe 1.1s ease-in-out infinite; }

.pv-connected { display: flex; align-items: center; gap: 14px; border: 1px solid rgba(123, 227, 163, .4); border-radius: 12px; background: rgba(123, 227, 163, .06); padding: 16px 18px; }
.pv-connected p { margin: 0; font-size: 13.5px; }
.pv-connected small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--pv-faint); }

/* ---------- provider ---------- */

.pv-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--pv-line);
  border-radius: 10px;
  padding: 13px 15px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.pv-option:hover { border-color: var(--pv-faint); }
.pv-option[aria-pressed='true'] { border-color: rgba(187, 204, 215, .6); background: rgba(187, 204, 215, .07); }
.pv-option .label { display: block; font-size: 13.5px; }
.pv-option[aria-pressed='true'] .label { color: var(--pv-bone); }
.pv-option .hint { display: block; margin-top: 3px; font-size: 11.5px; color: var(--pv-faint); }

.pv-field { display: block; margin-top: 16px; }
.pv-field > span { display: block; font-family: var(--pv-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--pv-faint); margin-bottom: 7px; }
.pv-field input {
  width: 100%;
  border: 1px solid var(--pv-line);
  border-radius: 9px;
  background: var(--pv-panel);
  padding: 10px 13px;
  font-family: var(--pv-mono);
  font-size: 13px;
  color: var(--pv-faint);
  cursor: not-allowed;
}
.pv-field small { display: block; margin-top: 7px; font-size: 11.5px; color: var(--pv-faint); line-height: 1.5; }

/* The identity layers that do not change when the model does. */
.pv-layers { display: grid; gap: 8px; margin-top: 16px; }
.pv-layer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--pv-line);
  border-radius: 10px;
  padding: 11px 14px;
}
.pv-layer dt { font-family: var(--pv-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--pv-faint); }
.pv-layer dd { margin: 0; font-size: 13px; color: var(--pv-dim); text-align: right; }
.pv-layer.model { border-color: rgba(187, 204, 215, .4); background: rgba(187, 204, 215, .05); }
.pv-layer.model dd { color: var(--pv-bone); }
.pv-layer.held { transition: border-color .5s ease; }
.pv-layer.held.flash { border-color: rgba(123, 227, 163, .5); }
.pv-unchanged { font-family: var(--pv-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(123, 227, 163, .85); opacity: 0; transition: opacity .35s ease; }
.pv-unchanged.show { opacity: 1; }

/* ---------- advanced section rail ---------- */

.pv-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 11px 0;
  margin-bottom: 26px;
  border-block: 1px solid var(--pv-line);
  scrollbar-width: none;
}
.pv-rail::-webkit-scrollbar { display: none; }
.pv-rail span {
  white-space: nowrap;
  font-family: var(--pv-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pv-faint);
}
.pv-rail span.on { color: var(--pv-bone); }

/* ---------- guided story ---------- */

.preview-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 12px 8px;
}
.preview-guide-step {
  flex: 1 1 150px;
  min-width: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 11px;
  text-align: left;
  color: rgba(242, 242, 236, .42);
  transition: color .35s var(--ease), border-color .35s var(--ease);
  cursor: pointer;
  background: none;
  border-inline: 0;
  border-bottom: 0;
  font: inherit;
}
.preview-guide-step:hover { color: rgba(242, 242, 236, .75); }
.preview-guide-step[aria-current='true'] { color: var(--paper); border-top-color: var(--green); }
.preview-guide-step b { display: block; font-size: 9.5px; letter-spacing: .2em; font-weight: 400; opacity: .6; }
.preview-guide-step span { display: block; margin-top: 5px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- annotation ---------- */

.preview-annotation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px 14px 6px;
  min-height: 74px;
}
.preview-annotation b {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--green);
  padding-top: 2px;
}
.preview-annotation p { margin: 0; max-width: 68ch; font-size: 13.5px; line-height: 1.6; color: rgba(242, 242, 236, .6); }
.preview-annotation.swap { animation: pv-annotate .45s var(--ease); }
@keyframes pv-annotate { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---------- preview CTA ---------- */

.preview-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 18px 14px 10px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 6px;
}
.preview-cta p { margin: 0; font-size: clamp(15px, 1.5vw, 21px); letter-spacing: -.02em; }
.preview-cta a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.preview-cta a:hover { transform: translateY(-2px); background: #fff; }
.preview-cta a i { font-style: normal; transition: transform .3s var(--ease); }
.preview-cta a:hover i { transform: translateX(4px); }

/* ---------- mobile: a different composition, not a smaller one ---------- */

.pv-tabbar { display: none; }

@media (max-width: 900px) {
  .preview-heading { grid-template-columns: 1fr; align-items: start; gap: 20px; }
}

@media (max-width: 720px) {
  .preview-section { padding-inline: 16px; }
  .preview-frame { padding: 7px; border-radius: 16px; }

  /* The desktop bar carried a wordmark, three links, a mode switch and a
     button. On a phone the bar keeps the wordmark and the switch, and the
     navigation moves to a bottom tab row — which is where a thumb is. */
  .pv-topbar { gap: 12px; padding: 11px 13px; }
  .pv-nav { display: none; }
  .pv-topbar .pv-btn { display: none; }
  /* The mode switch is the one control that stays in the bar, so it has to be
     tappable there rather than merely visible. 34px kept the simulated app bar
     compact and was still a mouse target; the bar grows instead. */
  .pv-switch button { min-height: 44px; padding: 12px 15px; }

  .pv-tabbar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--pv-line);
    background: rgba(12, 12, 12, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .pv-tabbar button {
    /* A thumb target, not a desktop link scaled down. */
    min-height: 46px;
    padding: 14px 4px calc(14px + env(safe-area-inset-bottom, 0px));
    font-family: var(--pv-mono);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pv-faint);
    border-top: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
  }
  .pv-tabbar button[aria-current='true'] { color: var(--pv-bone); border-top-color: var(--pv-calm); }

  .pv-screen { min-height: 62svh; max-height: 68svh; padding: 20px 16px 28px; }
  .pv-watermark span { font-size: clamp(64px, 26vw, 150px); }

  .pv-line { grid-template-columns: 1fr; gap: 2px; }
  .pv-why-row { grid-template-columns: 1fr; gap: 3px; }
  .pv-converge-grid { grid-template-columns: 1fr; gap: 12px; }
  .pv-converge-arrow { display: none; }
  .pv-stats { width: 100%; }
  .pv-layer { flex-direction: column; gap: 4px; align-items: flex-start; }
  .pv-layer dd { text-align: left; }

  .preview-guide { gap: 8px; }
  .preview-guide-step { flex-basis: calc(50% - 4px); }
  .preview-annotation { grid-template-columns: 1fr; gap: 7px; padding: 14px 10px 4px; }
  .preview-cta { flex-direction: column; align-items: stretch; text-align: left; }
  .preview-cta a { justify-content: center; }
}

@media (max-width: 400px) {
  .preview-guide-step { flex-basis: 100%; }
}

/* Very short landscape viewports: the window must not eat the whole screen. */
@media (max-height: 560px) and (orientation: landscape) {
  .pv-screen { min-height: 300px; max-height: 62svh; }
}

/* Coarse pointers get fewer simultaneous blurred surfaces. */
@media (pointer: coarse) {
  .preview-frame { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .05); }
}

@media (prefers-reduced-motion: reduce) {
  .preview-frame { transform: none; opacity: 1; transition: none; }
  .pv-dot.live i::after,
  .pv-steps li.now i,
  .preview-badge i { animation: none; }
  .pv-converge.run .pv-converge-sources span { animation: none; color: var(--pv-calm); border-color: rgba(187, 204, 215, .5); }
  .preview-annotation.swap { animation: none; }
  .pv-converge-event { transition: none; }
}