/* Private Voice pre-launch demo page.
 *
 * Deliberately NOT the Esek design system: consumer product, its own language.
 * Second pass (2026-08-28): young promo-poster energy to match the pixel
 * cutscene. Two brand colors only, violet and orange (Suzy's blazer and the
 * mic tip), thick ink outlines, hard offset shadows, big display type, a
 * scrolling brand marquee. Mobile-first: base styles are the narrow layout.
 * Everything stays direction-agnostic (logical properties) because the Hebrew
 * mirror renders RTL.
 */

:root {
  color-scheme: light;
  --pv-paper: #faf4ea;
  --pv-paper-2: #f1e8d9;
  --pv-card: #ffffff;
  --pv-ink: #241a38;
  --pv-ink-2: #453a63;
  --pv-muted: #7d7791;
  --pv-line: #241a38;
  --pv-violet: #6244f2;
  --pv-violet-deep: #2a1f52;
  --pv-violet-soft: #e9e2ff;
  --pv-orange: #ff6b43;
  --pv-orange-soft: #ffe3d7;
  --pv-mint: #10b981;
  --pv-amber: #f59e0b;
  /* The signature: a hard ink shadow instead of a soft blur. */
  --pv-pop: 4px 4px 0 var(--pv-ink);
  --pv-pop-sm: 3px 3px 0 var(--pv-ink);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, Heebo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(520px 300px at 88% -4%, rgba(98, 68, 242, 0.18) 0%, rgba(98, 68, 242, 0) 62%),
    radial-gradient(420px 260px at 2% 6%, rgba(255, 107, 67, 0.2) 0%, rgba(255, 107, 67, 0) 60%),
    var(--pv-paper);
  color: var(--pv-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.pv-wordmark {
  font-family: Outfit, Inter, Heebo, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.pv-page {
  max-width: 720px;
  margin-inline: auto;
  padding: 1.1rem 1rem 3.5rem;
  overflow-x: clip;
}

/* Header */
.pv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  /* policy-i18n.js floats its language pill top-right; keep clear of it */
  padding-inline-end: 6.5rem;
}

.pv-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
  font-size: 1rem;
  color: var(--pv-ink);
}

.pv-wordmark__dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--pv-orange);
  border: 2px solid var(--pv-ink);
}

/* "Early demo" as a tilted sticker */
.pv-tag {
  background: var(--pv-orange);
  color: #fff;
  border: 2px solid var(--pv-ink);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  box-shadow: var(--pv-pop-sm);
}

/* Hero */
.pv-hero {
  margin-top: 2rem;
  position: relative;
}

/* Confetti sparks, promo-poster style. Decorative only. */
.pv-hero::before,
.pv-hero::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: var(--pv-orange);
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
  animation: pv-twinkle 2.2s ease-in-out infinite;
}

.pv-hero::before {
  inset-inline-end: 4%;
  top: -0.4rem;
}

.pv-hero::after {
  inset-inline-start: 0;
  bottom: -1.4rem;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--pv-violet);
  animation-delay: 1.1s;
}

@keyframes pv-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(0.55) rotate(45deg); opacity: 0.6; }
}

.pv-hero h1 {
  font-size: clamp(2.3rem, 10.5vw, 3.6rem);
  font-weight: 800;
  text-wrap: balance;
}

/* The punchline gets the highlighter treatment. */
.pv-hero h1 em {
  font-style: normal;
  display: inline-block;
  background: var(--pv-violet);
  color: #fff;
  border: 2px solid var(--pv-ink);
  border-radius: 0.5rem;
  padding: 0 0.5rem 0.1rem;
  box-shadow: var(--pv-pop-sm);
  transform: rotate(-1.5deg);
}

.pv-hero p {
  margin-top: 1rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--pv-ink-2);
  max-width: 34rem;
}

/* Brand marquee strip */
.pv-marquee {
  margin-top: 1.6rem;
  margin-inline: calc(50% - 50vw);
  background: var(--pv-ink);
  border-block: 2px solid var(--pv-ink);
  color: var(--pv-paper);
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  transform: rotate(-1.2deg);
  font-family: Outfit, Inter, Heebo, sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pv-marquee span {
  flex: none;
  padding-block: 0.45rem;
  animation: pv-marquee 16s linear infinite;
}

.pv-marquee b {
  color: var(--pv-orange);
  font-weight: inherit;
}

@keyframes pv-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* RTL mirrors the axis so the strip still scrolls "forward". */
[dir="rtl"] .pv-marquee span {
  animation-name: pv-marquee-rtl;
}

@keyframes pv-marquee-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

/* Call widget */
.pv-call {
  margin-top: 1.8rem;
  background: var(--pv-card);
  border: 3px solid var(--pv-ink);
  border-radius: 22px;
  box-shadow: var(--pv-pop);
  padding: 1.5rem 1.2rem;
  text-align: center;
}

.pv-call__who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-align: start;
}

.pv-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(140deg, var(--pv-violet), var(--pv-orange));
  border: 2px solid var(--pv-ink);
  flex: none;
}

.pv-call__name {
  font-weight: 800;
  font-size: 1.05rem;
}

.pv-call__sub {
  font-size: 0.85rem;
  color: var(--pv-muted);
}

/* The visitor's part. Without a script the first turn of the demo is "um,
   hello?", so the card hands them one. It stays up while the call runs, which
   is exactly when they need it, and gets out of the way once the note lands. */
.pv-call__role {
  margin-top: 1.1rem;
  padding: 0.7rem 0.85rem;
  border: 2px dashed var(--pv-ink);
  border-radius: 14px;
  background: var(--pv-violet-soft);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--pv-ink-2);
  text-align: start;
}

.pv-call__rolelabel {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pv-violet);
}

.pv-actions {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.pv-btn {
  font: inherit;
  font-weight: 800;
  border: 3px solid var(--pv-ink);
  border-radius: 999px;
  padding: 0.85rem 1.9rem;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  color: var(--pv-ink);
  background: #fff;
  box-shadow: var(--pv-pop);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.pv-btn:hover:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--pv-ink);
}

.pv-btn:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--pv-ink);
}

.pv-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.pv-btn--call {
  background: var(--pv-orange);
  color: #fff;
  font-size: 1.1rem;
}

.pv-btn--hangup {
  background: var(--pv-paper-2);
  color: #b3341a;
}

.pv-btn--ghost {
  background: transparent;
  color: var(--pv-violet);
  border-width: 2px;
  box-shadow: var(--pv-pop-sm);
  padding: 0.6rem 1.3rem;
  font-size: 0.9rem;
}

.pv-status {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--pv-muted);
  min-height: 1.3rem;
}

.pv-status--error {
  color: #b3341a;
}

/* Live meter: countdown plus a bar that drains over the two minutes. */
.pv-live {
  display: none;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.pv-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--pv-ink);
}

.pv-track {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  border: 2px solid var(--pv-ink);
  background: var(--pv-paper-2);
  overflow: hidden;
}

.pv-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--pv-violet), var(--pv-orange));
  transition: width 0.25s linear;
}

.pv-pulse {
  display: none;
  gap: 0.3rem;
  justify-content: center;
  margin-top: 0.9rem;
}

.pv-pulse span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pv-orange);
  border: 1px solid var(--pv-ink);
  animation: pv-bounce 1s infinite ease-in-out;
}

.pv-pulse span:nth-child(2) {
  animation-delay: 0.15s;
}

.pv-pulse span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes pv-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* State switching */
[data-pv-state="idle"] [data-pv-hangup],
[data-pv-state="connecting"] [data-pv-hangup],
[data-pv-state="wrapping"] [data-pv-hangup],
[data-pv-state="done"] [data-pv-hangup] { display: none; }

[data-pv-state="live"] [data-pv-start],
[data-pv-state="wrapping"] [data-pv-start],
[data-pv-state="connecting"] [data-pv-start],
[data-pv-state="done"] [data-pv-start] { display: none; }

[data-pv-state="live"] .pv-live { display: flex; }

[data-pv-state="connecting"] .pv-pulse,
[data-pv-state="wrapping"] .pv-pulse { display: flex; }

[data-pv-state="done"] .pv-call__role { display: none; }

[data-pv-state="done"] [data-pv-again] { display: inline-block; }
[data-pv-again] { display: none; }

.pv-postcall { display: none; margin-top: 1.3rem; text-align: center; }
.pv-postcall > div { margin-top: 0.7rem; }
[data-pv-state="done"] .pv-postcall { display: block; }

/* The brief: the payoff */
.pv-brief {
  margin-top: 1.6rem;
  animation: pv-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes pv-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.pv-brief__lead {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pv-muted);
  margin-bottom: 0.7rem;
}

.pv-card {
  background: var(--pv-card);
  border: 3px solid var(--pv-ink);
  border-radius: 20px;
  box-shadow: var(--pv-pop);
  padding: 1.1rem 1.2rem 1.3rem;
  text-align: start;
}

.pv-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pv-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pv-card__app {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--pv-violet);
}

.pv-card__app::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--pv-orange);
}

.pv-card__titlerow {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.pv-card__title {
  font-size: 1.1rem;
  font-weight: 800;
}

.pv-chip {
  border-radius: 999px;
  border: 2px solid var(--pv-ink);
  padding: 0.12rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.pv-chip--low { background: #eef2f7; color: #536178; }
.pv-chip--normal { background: var(--pv-violet-soft); color: var(--pv-violet); }
.pv-chip--high { background: var(--pv-orange-soft); color: #a2430a; }

.pv-card__body {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.55rem;
}

.pv-card__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  font-size: 0.95rem;
}

.pv-card__label {
  color: var(--pv-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.pv-card__value {
  color: var(--pv-ink);
}

.pv-card__quote {
  margin-top: 0.2rem;
  background: var(--pv-orange-soft);
  border: 2px solid var(--pv-ink);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  color: var(--pv-ink);
}

.pv-empty {
  background: var(--pv-card);
  border: 2px dashed var(--pv-ink);
  border-radius: 20px;
  padding: 1.2rem;
  text-align: center;
}

.pv-empty__title {
  font-size: 1.05rem;
  font-weight: 800;
}

.pv-empty__body {
  margin-top: 0.4rem;
  font-size: 0.92rem;
  color: var(--pv-muted);
}

/* CTA and explainer */
.pv-cta {
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
  background: var(--pv-violet-deep);
  color: #fff;
  border: 3px solid var(--pv-ink);
  border-radius: 24px;
  box-shadow: var(--pv-pop);
  padding: 1.8rem 1.4rem;
  text-align: center;
}

/* Orange spark in the CTA corner, echoing the hero confetti. */
.pv-cta::before {
  content: "";
  position: absolute;
  inset-inline-end: -1.2rem;
  top: -1.2rem;
  width: 4.5rem;
  height: 4.5rem;
  background: var(--pv-orange);
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
  opacity: 0.9;
}

.pv-cta::after {
  content: "";
  position: absolute;
  inset-inline-start: -1.6rem;
  bottom: -1.6rem;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--pv-violet);
  opacity: 0.55;
}

.pv-cta h2 {
  position: relative;
  font-size: clamp(1.5rem, 6.5vw, 2rem);
  font-weight: 800;
  text-wrap: balance;
}

.pv-cta p {
  position: relative;
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: #d8d2f2;
}

.pv-cta__btn {
  position: relative;
  display: inline-block;
  margin-top: 1.2rem;
  background: var(--pv-orange);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  border: 3px solid var(--pv-ink);
  border-radius: 999px;
  padding: 0.85rem 1.8rem;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.pv-cta__btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}

.pv-steps {
  margin-top: 2.2rem;
  display: grid;
  gap: 1rem;
  counter-reset: pv-step;
}

.pv-step {
  background: #fff;
  border: 3px solid var(--pv-ink);
  border-radius: 18px;
  box-shadow: var(--pv-pop-sm);
  padding: 1rem 1.1rem;
}

.pv-step:nth-child(2) {
  transform: rotate(0.6deg);
}

.pv-step h3 {
  font-size: 1.05rem;
  font-weight: 800;
}

.pv-step p {
  margin-top: 0.35rem;
  font-size: 0.92rem;
  color: var(--pv-ink-2);
}

.pv-fine {
  margin-top: 1.6rem;
  font-size: 0.82rem;
  color: var(--pv-muted);
}

.pv-foot {
  margin-top: 2.4rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--pv-muted);
}

.pv-foot a {
  color: var(--pv-ink-2);
  text-decoration: none;
}

.pv-foot a:hover {
  text-decoration: underline;
}

/* Wider screens: more air, side-by-side brief rows. */
@media (min-width: 560px) {
  .pv-page {
    padding: 1.6rem 1.25rem 4rem;
  }

  .pv-hero {
    margin-top: 2.6rem;
  }

  .pv-call {
    padding: 1.7rem 1.5rem;
  }

  .pv-card__row {
    grid-template-columns: 7.5rem 1fr;
    gap: 0.6rem;
  }

  .pv-marquee {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv-brief,
  .pv-pulse span,
  .pv-bar,
  .pv-hero::before,
  .pv-hero::after,
  .pv-marquee span {
    animation: none;
    transition: none;
  }
}