/* =========================================================
   Pre-Visit — Patient Lifecycle story page

   Written against the homepage system, not the source this story
   came from. What that means concretely:

   TYPE      Geist for headings at weight 500, tracking -.03em, in the
             homepage's own steps: 64/77 for a page-level title
             (.hero__title, .scale__title), 48/57 for a titled block
             (.feature__title), 24/28 for a card (.icard__title).
             Body is Manrope: 25/33 for a section sub, 20/30 for copy.
             The system has no monospace face, so there is none here —
             the source's mono eyebrows, labels and captions are gone.
   LABELS    The system's pill: 4x10 padding, 999px radius, 11.5–12.5px
             at weight 600, a tinted ground with its own ink
             (engine.css .tag.lime / .tag.amber). Not grey mono with a
             leading dash.
   SURFACES  1px --rule border, 12–18px radius, and the system's very
             soft --shadow. The source's 40px-blur lifts are gone;
             the homepage lifts almost nothing off the page.
   COLOUR    ink + lime, with amber reserved for the Act I warnings,
             exactly as engine.css uses it. Act I is otherwise
             colourless on purpose: the absence of lime is the problem.
   RHYTHM    Bands of 67u side padding separated by hairlines, the way
             every homepage section is, and one full-bleed black band
             for the turn — the same device .reel uses.

   Every class is prefixed pv- : the source's names (.hero, .scene,
   .device, .panel, .close, .footer) already mean something here.
   ========================================================= */

.pv {
  --pad: calc(67 * var(--u));
  --gut: calc(72 * var(--u));          /* copy indent, clears the journey rail */
  --rail: calc(18 * var(--u));         /* rail offset inside the padding */

  /* the product-UI palette, straight from engine.css */
  --text:  #2a2a2a;
  --faint: #9a9a9a;
  --soft:  #f5f8f1;
  --line:  #eaeaea;
  --lime-tint: #effcb5;
  --lime-ink:  #3f5a00;
  --amber:     #fff1d2;
  --amber-ink: #8a5600;
  --rose:      #ffe8e4;
  --rose-ink:  #b23a2c;

  --r-card: calc(18 * var(--u));
  --r:      calc(12 * var(--u));
  --r-sm:   calc(9 * var(--u));
  --shadow: 0 1px 2px rgba(17, 19, 24, .03), 0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-28 * var(--u)) rgba(17, 19, 24, .14);
  --ease: cubic-bezier(.2, .8, .2, 1);

  --wa-hd: #1f2c33;
  --wa-paper: #ece5dd;
  --wa-out: #dcf6c8;

  display: block;
  color: var(--ink);
  letter-spacing: -.02em;
}
.pv *, .pv *::before, .pv *::after { box-sizing: border-box; }
.pv h1, .pv h2, .pv h3, .pv h4, .pv p, .pv ul, .pv ol, .pv dl, .pv dd, .pv figure, .pv blockquote { margin: 0; }
.pv ul, .pv ol { padding: 0; list-style: none; }
.pv img { display: block; max-width: 100%; }
.pv .i { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- type: the homepage steps ---------- */
.pv-h1, .pv-h2, .pv-h3 {
  font-family: var(--font-head); font-weight: 500; letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}
.pv-h1 { font-size: calc(64 * var(--u)); line-height: calc(77 * var(--u)); }
.pv-h2 { font-size: calc(48 * var(--u)); line-height: calc(57 * var(--u)); }
.pv-h3 { font-size: calc(24 * var(--u)); line-height: calc(28 * var(--u)); }
.pv .dim { color: var(--muted); }
.pv-lede { font-size: calc(25 * var(--u)); line-height: calc(33 * var(--u)); letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }
.pv-note { margin-top: calc(16 * var(--u)); max-width: calc(520 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }

/* the system's pill, used for every eyebrow and status label */
.pv-eyebrow {
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  padding: calc(5 * var(--u)) calc(13 * var(--u)); border-radius: 999px;
  background: var(--soft); color: var(--text);
  font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1.3; letter-spacing: 0;
}
.pv-eyebrow.problem { background: var(--amber); color: var(--amber-ink); }
.pv-eyebrow.solved  { background: var(--lime-tint); color: var(--lime-ink); }
.pv-eyebrow.ink     { background: var(--ink); color: var(--lime); }

/* small caps label, the .icard__tag idiom */
.pv-k { font-size: calc(12.5 * var(--u)); font-weight: 600; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pv-k.lime { color: var(--lime-ink); }

/* ---------- hero ---------- */
.pv-hero { padding: calc(96 * var(--u)) var(--pad) calc(88 * var(--u)); border-bottom: 1px solid var(--rule); }
.pv-hero__in { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: calc(80 * var(--u)); align-items: center; }
.pv-hero .pv-h1 { margin-top: calc(24 * var(--u)); }
.pv-hero__lede { margin-top: calc(20 * var(--u)); max-width: calc(540 * var(--u)); }
.pv-split {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(36 * var(--u)); max-width: calc(540 * var(--u));
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
}
.pv-split div { padding: calc(18 * var(--u)) calc(20 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(24 * var(--u)); color: var(--text); }
.pv-split div + div { border-left: 1px solid var(--rule); background: var(--lime-soft); }
.pv-split b { display: block; margin-bottom: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-ink); }
.pv-split div + div b { color: var(--lime-ink); }
.pv-hero__meta { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)) calc(24 * var(--u)); margin-top: calc(30 * var(--u)); }
.pv-hero__fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 28%; border-radius: var(--r-card); }

.pv-capstrip { padding: calc(26 * var(--u)) var(--pad); border-bottom: 1px solid var(--rule); }
.pv-capstrip ul { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)) calc(48 * var(--u)); }
.pv-capstrip li { font-size: calc(12.5 * var(--u)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* ---------- the journey rail ---------- */
.pv-track { position: relative; }
.pv-rail {
  position: absolute; top: 0; bottom: 0; left: calc(var(--pad) + var(--rail)); width: 1px; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--rule) 0 calc(8 * var(--u)), transparent calc(8 * var(--u)) calc(16 * var(--u)));
}
.pv-rail__fill {
  position: absolute; top: 0; left: 0; width: 1px; height: 0;
  background-image: linear-gradient(to bottom, var(--divider) 0 var(--turn, 55%), var(--lime) var(--turn, 55%) 100%);
  background-size: 100% var(--trackH, 4000px); background-repeat: no-repeat;
}

/* ---------- act markers ---------- */
.pv-actbar { padding: calc(64 * var(--u)) var(--pad) 0; }
.pv-actbar__in { display: flex; align-items: center; flex-wrap: wrap; gap: calc(16 * var(--u)); padding-left: var(--gut); }
.pv-actbar__name { font-family: var(--font-head); font-size: calc(24 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.pv-actbar__desc { margin-left: auto; font-size: calc(18 * var(--u)); letter-spacing: -.01em; color: var(--muted); }

/* ---------- scenes ---------- */
.pv-scene { position: relative; padding: calc(96 * var(--u)) var(--pad); }
.pv-scene + .pv-scene { border-top: 1px solid var(--rule); }
.pv-scene__dot {
  position: absolute; z-index: 2; top: calc(104 * var(--u)); left: calc(var(--pad) + var(--rail) - 5px);
  width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--divider);
  transition: border-color .5s ease, background .5s ease, transform .5s var(--ease);
}
.pv-scene.is-live .pv-scene__dot { transform: scale(1.22); border-color: var(--ink); }
.pv-scene.solved .pv-scene__dot { border-color: var(--lime-ico); }
.pv-scene.solved.is-live .pv-scene__dot { background: var(--lime); border-color: var(--lime); }

.pv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(76 * var(--u)); align-items: center; padding-left: var(--gut); }
.pv-scene.rev .pv-stage { order: 2; }
.pv-scene.rev .pv-copy  { order: 1; }
.pv-copy .pv-h2 { margin-top: calc(20 * var(--u)); }

/* ---------- the shot: photograph with a phone overlapping it ---------- */
.pv-shot { position: relative; width: 100%; max-width: calc(560 * var(--u)); margin-inline: auto; padding-right: calc(140 * var(--u)); padding-bottom: calc(30 * var(--u)); }
.pv-shot img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 22%; border-radius: var(--r-card); background: var(--soft); }
.pv-shot.wide img { aspect-ratio: 4 / 3; }
.pv-shot.wide { min-height: calc(590 * var(--u)); }
.pv-shot.free { padding: 0; }
/* Act I and the turn are graded down; colour returns after the turn */
.pv-act--problem .pv-shot img { filter: saturate(.84) contrast(1.03); }
.pv-shot .pv-device { position: absolute; right: 0; bottom: 0; }
.pv-badge {
  position: absolute; left: calc(18 * var(--u)); top: calc(18 * var(--u)); z-index: 3;
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: 999px;
  background: rgba(36, 36, 36, .74); backdrop-filter: blur(calc(8 * var(--u))); color: #fff;
  font-size: calc(12.5 * var(--u)); font-weight: 600; line-height: 1.3;
}
.pv-badge i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--lime); }

/* a device shown on its own, on a soft stage — the .ps-card ground */
.pv-panel { display: flex; justify-content: center; padding: calc(44 * var(--u)) calc(28 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--soft); }
.pv-panel.dark { background: var(--ink); border-color: var(--ink); }

/* ---------- the device ---------- */
.pv-device { position: relative; width: calc(272 * var(--u)); max-width: 100%; padding: calc(7 * var(--u)); border-radius: calc(38 * var(--u)); background: var(--ink); box-shadow: var(--shadow); }
.pv-device.stage { margin-inline: auto; }
.pv-device__island { position: absolute; top: calc(15 * var(--u)); left: 50%; transform: translateX(-50%); z-index: 6; width: calc(64 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--ink); }
.pv-screen { position: relative; display: flex; flex-direction: column; min-height: calc(470 * var(--u)); border-radius: calc(31 * var(--u)); overflow: hidden; background: #fff; }
.pv-status { position: relative; z-index: 5; flex: none; display: flex; justify-content: space-between; align-items: center; gap: calc(66 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)) calc(5 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-status svg { width: calc(46 * var(--u)); height: calc(11 * var(--u)); fill: currentColor; }
.pv-home { position: absolute; bottom: calc(7 * var(--u)); left: 50%; transform: translateX(-50%); z-index: 7; width: calc(96 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: currentColor; opacity: .25; }
.pv-pad { flex: none; height: calc(19 * var(--u)); background: #fff; }
.pv-pad.wa { background: var(--wa-paper); }
.pv-pad.dark { background: #0e1211; }
.pv-cap { margin-top: calc(20 * var(--u)); max-width: calc(380 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); }

/* ---------- WhatsApp ---------- */
.pv-wa { display: flex; flex-direction: column; flex: 1; }
.pv-wa__hd { flex: none; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(9 * var(--u)) calc(13 * var(--u)) calc(11 * var(--u)); background: var(--wa-hd); color: #e9edea; }
.pv-wa__av { flex: none; display: grid; place-items: center; width: calc(29 * var(--u)); height: calc(29 * var(--u)); border-radius: 50%; background: #3e5760; font-size: calc(11 * var(--u)); font-weight: 600; }
.pv-wa__who b { display: block; font-size: calc(13.5 * var(--u)); font-weight: 600; line-height: 1.2; }
.pv-wa__who span { font-size: calc(10.5 * var(--u)); opacity: .62; }
.pv-wa__body { flex: 1; display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u)); background: var(--wa-paper); }
.pv-wa__day { align-self: center; margin-bottom: calc(2 * var(--u)); padding: calc(4 * var(--u)) calc(11 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .78); font-size: calc(10 * var(--u)); font-weight: 600; color: #5e6863; }
.pv-msg { max-width: 84%; padding: calc(8 * var(--u)) calc(11 * var(--u)) calc(6 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.42; letter-spacing: -.01em; color: #10191c; }
.pv-msg.in  { align-self: flex-start; background: #fff; border-top-left-radius: calc(3 * var(--u)); }
.pv-msg.out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: calc(3 * var(--u)); }
.pv-msg .t { float: right; display: inline-flex; align-items: center; gap: calc(3 * var(--u)); margin: calc(5 * var(--u)) 0 0 calc(9 * var(--u)); font-size: calc(10 * var(--u)); font-variant-numeric: tabular-nums; color: #667a6e; }
.pv-msg .t svg { width: calc(12 * var(--u)); height: calc(8 * var(--u)); }
.pv-wamenu { display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin-top: calc(8 * var(--u)); }
.pv-wamenu span { display: flex; gap: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); color: #2c3835; }
.pv-wamenu b { font-weight: 600; color: #7d8a85; }
.pv-wamenu .picked, .pv-wamenu .picked b { color: var(--amber-ink); font-weight: 600; }
.pv-wa__in { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(11 * var(--u)) calc(13 * var(--u)); background: var(--wa-paper); }
.pv-wa__in span { flex: 1; padding: calc(8 * var(--u)) calc(13 * var(--u)); border-radius: 999px; background: #fff; font-size: calc(12 * var(--u)); color: #98a29c; }
.pv-wa__in i { flex: none; display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: #0a7a29; }
.pv-wa__in i svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
/* the loop warning is the system's amber tag */
.pv-loop {
  align-self: center; display: flex; align-items: center; gap: calc(7 * var(--u)); margin-top: calc(4 * var(--u));
  padding: calc(5 * var(--u)) calc(11 * var(--u)); border-radius: 999px;
  background: var(--amber); color: var(--amber-ink);
  font-size: calc(11 * var(--u)); font-weight: 600; line-height: 1.3;
}
.pv-loop svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); animation: pvSpinback 2.8s ease-in-out infinite; }
@keyframes pvSpinback { 0%, 72%, 100% { transform: rotate(0); } 88% { transform: rotate(-360deg); } }
.pv-typing { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(3 * var(--u)) 1px; }
.pv-typing i { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: #9aa6a0; animation: pvBlip 1.3s infinite ease-in-out; }
.pv-typing i:nth-child(2) { animation-delay: .17s; }
.pv-typing i:nth-child(3) { animation-delay: .34s; }
@keyframes pvBlip { 0%, 62%, 100% { opacity: .28; transform: translateY(0); } 31% { opacity: 1; transform: translateY(calc(-2.5 * var(--u))); } }

/* ---------- the call ---------- */
.pv-call { flex: 1; display: flex; flex-direction: column; align-items: center; padding: calc(28 * var(--u)) calc(18 * var(--u)) calc(32 * var(--u)); text-align: center; color: #eaf0ec; background: var(--ink); }
.pv-call__av { display: grid; place-items: center; width: calc(66 * var(--u)); height: calc(66 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: calc(18 * var(--u)); font-weight: 600; }
.pv-call__who { margin-top: calc(15 * var(--u)); font-family: var(--font-head); font-size: calc(18 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.pv-call__sub { margin-top: calc(3 * var(--u)); font-size: calc(12.5 * var(--u)); opacity: .6; }
.pv-call__timer { margin-top: calc(24 * var(--u)); font-family: var(--font-head); font-size: calc(34 * var(--u)); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #ffb320; }
.pv-call__state { margin-top: calc(7 * var(--u)); font-size: calc(12 * var(--u)); opacity: .62; }
.pv-call__bars { display: flex; align-items: flex-end; gap: calc(3 * var(--u)); height: calc(19 * var(--u)); margin-top: calc(17 * var(--u)); }
.pv-call__bars i { width: calc(3 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: rgba(234, 240, 236, .42); animation: pvHold 2s infinite ease-in-out; }
@keyframes pvHold { 0%, 100% { height: calc(4 * var(--u)); } 50% { height: calc(18 * var(--u)); } }
.pv-call__keys { display: grid; grid-template-columns: repeat(3, calc(44 * var(--u))); gap: calc(13 * var(--u)); margin-top: auto; }
.pv-call__keys span { display: grid; place-items: center; height: calc(44 * var(--u)); border-radius: 50%; background: rgba(234, 240, 236, .12); font-size: calc(9.5 * var(--u)); font-weight: 600; letter-spacing: .06em; opacity: .8; }
.pv-call__end { display: grid; place-items: center; width: calc(52 * var(--u)); height: calc(52 * var(--u)); margin-top: calc(18 * var(--u)); border-radius: 50%; background: #e5483f; }
.pv-call__end svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

/* ---------- the browser ---------- */
.pv-browser { width: calc(420 * var(--u)); max-width: 100%; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: #fff; }
.pv-browser__chrome { padding: calc(9 * var(--u)) calc(11 * var(--u)) 0; background: #efefec; }
.pv-browser__dots { display: flex; gap: calc(5 * var(--u)); padding-bottom: calc(7 * var(--u)); }
.pv-browser__dots i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #d3d3ce; }
.pv-browser__tab { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); max-width: calc(230 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)) calc(8 * var(--u)) 0 0; background: #fff; font-size: calc(11.5 * var(--u)); color: var(--text); }
.pv-browser__tab i { flex: none; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(3 * var(--u)); background: #5a7c8c; }
.pv-browser__url { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(11 * var(--u)); border-bottom: 1px solid var(--rule); font-size: calc(11.5 * var(--u)); color: var(--muted); }
.pv-browser__url svg { width: calc(10 * var(--u)); height: calc(12 * var(--u)); }
.pv-browser__url .pill { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: calc(5 * var(--u)) calc(11 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: var(--soft); }
.pv-browser__page { padding: calc(14 * var(--u)); }
.pv-site__hd { display: flex; align-items: center; gap: calc(9 * var(--u)); padding-bottom: calc(11 * var(--u)); border-bottom: 1px solid var(--rule); }
.pv-site__hd i { flex: none; width: calc(17 * var(--u)); height: calc(17 * var(--u)); border-radius: calc(4 * var(--u)); background: #5a7c8c; }
.pv-site__hd b { font-size: calc(12.5 * var(--u)); font-weight: 700; }
.pv-site__nav { display: flex; flex-wrap: wrap; gap: calc(2 * var(--u)); margin-left: auto; }
.pv-site__nav span { padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: 999px; font-size: calc(11.5 * var(--u)); color: var(--muted); white-space: nowrap; transition: background .3s ease, color .3s ease; }
.pv-site__nav span.on { background: var(--amber); color: var(--amber-ink); font-weight: 600; }
.pv-site__h1 { margin-top: calc(14 * var(--u)); font-family: var(--font-head); font-size: calc(15 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.pv-site__sub { margin-top: calc(3 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--faint); }
.pv-depts { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5 * var(--u)); margin-top: calc(11 * var(--u)); }
.pv-depts i { padding: calc(9 * var(--u)); border: 1px solid var(--rule); border-radius: calc(10 * var(--u)); background: #fff; font-style: normal; font-size: calc(11.5 * var(--u)); color: var(--text); }
.pv-trail { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(13 * var(--u)); padding-top: calc(11 * var(--u)); border-top: 1px solid var(--rule); font-size: calc(11 * var(--u)); color: var(--muted); }
.pv-trail b { font-weight: 600; color: var(--text); }
.pv-trail .back { color: var(--rose-ink); }

/* ---------- thoughts: the patient's own voice ---------- */
.pv-thoughts { display: flex; flex-direction: column; gap: calc(14 * var(--u)); margin-top: calc(32 * var(--u)); max-width: calc(500 * var(--u)); }
.pv-thought { align-self: flex-start; padding: calc(12 * var(--u)) calc(22 * var(--u)); border-left: calc(3 * var(--u)) solid var(--rule); font-family: var(--font-head); font-size: calc(24 * var(--u)); line-height: calc(32 * var(--u)); font-weight: 500; letter-spacing: -.03em; color: var(--muted); }
.pv-thought:nth-child(2n) { margin-left: calc(46 * var(--u)); }
.pv-thought:nth-child(3n) { margin-left: calc(22 * var(--u)); }
.pv-thought.open { border-left-color: var(--ink); color: var(--ink); }
.pv-thoughts.tight { margin-top: calc(28 * var(--u)); }
.pv-thoughts.tight .pv-thought { font-size: calc(20 * var(--u)); line-height: calc(27 * var(--u)); }

/* ---------- the turn: the full-bleed black band, as .reel does it ---------- */
.pv-turn { position: relative; padding: calc(121 * var(--u)) var(--pad); color: #fff; }
.pv-turn::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #000; }
.pv-turn__in { position: relative; padding-left: var(--gut); }
.pv-turn .pv-h2 { color: #fff; margin-top: calc(20 * var(--u)); }
.pv-turn .dim { color: #8f8f8f; }
.pv-turn .pv-note { color: #8f8f8f; }
.pv-turn .pv-scene__dot { background: #000; border-color: #4a4a4a; }
.pv-turn__grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: calc(72 * var(--u)); align-items: center; }
.pv-fig img { width: 100%; height: auto; max-width: calc(450 * var(--u)); margin-inline: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; border-radius: var(--r-card); filter: saturate(.84) contrast(1.03); }
.pv-frags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12 * var(--u)); max-width: calc(560 * var(--u)); margin-top: calc(30 * var(--u)); }
.pv-frag { padding: calc(15 * var(--u)) calc(16 * var(--u)); border: 1px solid #2a2a2a; border-radius: var(--r); background: #141414; }
.pv-frag b { display: block; margin-bottom: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #d0a25a; }
.pv-frag span { display: block; font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); letter-spacing: -.01em; color: #b4b4b4; }
.pv-quote { max-width: calc(1000 * var(--u)); margin-top: calc(64 * var(--u)); font-family: var(--font-head); font-size: calc(48 * var(--u)); line-height: calc(57 * var(--u)); font-weight: 500; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.pv-attr { margin-top: calc(20 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8f8f8f; }

/* ---------- the bridge ---------- */
.pv-bridge { position: relative; padding: calc(112 * var(--u)) var(--pad); border-bottom: 1px solid var(--rule); }
.pv-bridge__in { padding-left: var(--gut); }
.pv-bridge .pv-h2 { max-width: calc(880 * var(--u)); margin-top: calc(20 * var(--u)); }
.pv-bridge__lede { margin-top: calc(16 * var(--u)); max-width: calc(620 * var(--u)); font-size: calc(25 * var(--u)); line-height: calc(33 * var(--u)); letter-spacing: -.01em; color: var(--muted); }
.pv-chain { position: relative; margin-top: calc(64 * var(--u)); }
.pv-chain ol { display: grid; grid-template-columns: repeat(5, 1fr); }
.pv-chain li { position: relative; padding-top: calc(38 * var(--u)); text-align: center; }
.pv-chain li::before {
  content: ""; position: absolute; top: 0; left: 50%; z-index: 2; transform: translateX(-50%) scale(.7);
  width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: #fff; border: calc(2 * var(--u)) solid var(--rule);
  transition: border-color .45s ease, transform .45s var(--ease);
}
.pv-chain li b { display: block; font-family: var(--font-head); font-size: calc(24 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 500; letter-spacing: -.03em; color: var(--divider); transition: color .5s ease; }
.pv-chain li span { display: block; margin-top: calc(6 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); letter-spacing: -.01em; color: var(--muted); opacity: .45; transition: opacity .5s ease; }
.pv-chain li.lit::before { border-color: var(--lime); transform: translateX(-50%) scale(1); }
.pv-chain li.lit b { color: var(--ink); }
.pv-chain li.lit span { opacity: 1; }
.pv-chain__track, .pv-chain__fill { position: absolute; top: calc(6 * var(--u)); left: 10%; right: 10%; height: calc(2 * var(--u)); border-radius: calc(2 * var(--u)); }
.pv-chain__track { background: var(--rule); }
.pv-chain__fill { background: var(--lime); transform: scaleX(0); transform-origin: left center; }
.pv-chain.is-in .pv-chain__fill { transform: scaleX(1); transition: transform 1.8s var(--ease) .15s; }

/* ---------- the Wisemelon app screens ---------- */
.pv-app { flex: 1; display: flex; flex-direction: column; background: #fff; }
.pv-app__hd { flex: none; display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid var(--rule); }
.pv-app__hd b { font-size: calc(13.5 * var(--u)); font-weight: 600; }
.pv-app__hd .tag { margin-left: auto; padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: var(--lime-tint); font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: .06em; color: var(--lime-ink); }
.pv-app__av { flex: none; display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--ink); color: var(--lime); }
.pv-app__av svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); fill: currentColor; stroke: none; }
.pv-app__body { flex: 1; display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)); }
.pv-doc { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.pv-doc img { flex: none; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: calc(12 * var(--u)); object-fit: cover; }
.pv-doc h3 { font-family: var(--font-head); font-size: calc(16 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.pv-doc p { margin-top: calc(3 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--muted); }
.pv-docmeta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--rule); border-radius: calc(10 * var(--u)); overflow: hidden; background: var(--rule); }
.pv-docmeta div { padding: calc(9 * var(--u)) calc(11 * var(--u)); background: #fff; }
.pv-docmeta dt { font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pv-docmeta dd { margin-top: calc(3 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--text); }
.pv-slots__label { font-size: calc(10.5 * var(--u)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pv-slots__row { display: flex; gap: calc(7 * var(--u)); margin-top: calc(9 * var(--u)); }
.pv-slot { flex: 1; padding: calc(10 * var(--u)) calc(4 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-sm); text-align: center; font-size: calc(12.5 * var(--u)); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); transition: background .45s var(--ease), border-color .45s ease, transform .45s var(--ease); }
.pv-slot.picked { background: var(--lime); border-color: var(--lime-ico); font-weight: 600; transform: translateY(calc(-2 * var(--u))); }
.pv-book { margin-top: auto; padding: calc(14 * var(--u)); border-radius: calc(11 * var(--u)); background: var(--ink); color: var(--lime); text-align: center; font-size: calc(14 * var(--u)); font-weight: 500; }

.pv-ok__hero { padding: calc(26 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u)); border-bottom: 1px solid var(--rule); background: var(--lime-soft); text-align: center; }
.pv-tick { display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin: 0 auto calc(12 * var(--u)); border-radius: 50%; background: var(--lime); }
.pv-tick svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.pv-tick path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.pv-tick.is-in path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease) .2s; }
.pv-ok__hero h3 { font-family: var(--font-head); font-size: calc(17 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.pv-ok__hero p { margin-top: calc(5 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--muted); }
.pv-ok__body { padding: calc(16 * var(--u)) calc(17 * var(--u)); }
.pv-ok__body .who { font-family: var(--font-head); font-size: calc(16 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.pv-ok__body .spec { margin-top: calc(2 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--muted); }
.pv-ok__when { display: flex; flex-direction: column; gap: calc(5 * var(--u)); margin-top: calc(13 * var(--u)); padding-top: calc(13 * var(--u)); border-top: 1px solid var(--rule); font-size: calc(13.5 * var(--u)); }
.pv-ok__when b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-ok__when span { font-size: calc(12.5 * var(--u)); color: var(--muted); }
.pv-ok__acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: auto; border-top: 1px solid var(--rule); background: var(--rule); }
.pv-ok__acts span { padding: calc(13 * var(--u)) calc(3 * var(--u)); background: #fff; text-align: center; font-size: calc(11 * var(--u)); font-weight: 600; color: var(--lime-ink); }

.pv-ai { max-width: 88%; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.45; letter-spacing: -.01em; }
.pv-ai.out { align-self: flex-end; background: var(--lime-tint); border-bottom-right-radius: calc(4 * var(--u)); }
.pv-ai.in  { align-self: flex-start; background: var(--soft); border-bottom-left-radius: calc(4 * var(--u)); }
.pv-ai time { display: block; margin-top: calc(6 * var(--u)); font-size: calc(10 * var(--u)); font-variant-numeric: tabular-nums; color: var(--faint); }
.pv-ainote { padding-left: calc(12 * var(--u)); border-left: calc(2 * var(--u)) solid var(--lime); font-size: calc(12.5 * var(--u)); line-height: calc(18 * var(--u)); color: var(--text); }
.pv-urgent { display: flex; gap: calc(9 * var(--u)); padding: calc(11 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--rose); font-size: calc(12.5 * var(--u)); line-height: calc(18 * var(--u)); color: var(--rose-ink); }
.pv-urgent svg { flex: none; width: calc(15 * var(--u)); height: calc(15 * var(--u)); margin-top: calc(1 * var(--u)); }
.pv-urgent b { font-weight: 600; }

.pv-prep__hd { font-family: var(--font-head); font-size: calc(15 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.pv-prep { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin-top: calc(4 * var(--u)); }
.pv-prep li { display: flex; gap: calc(10 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(19 * var(--u)); color: var(--text); }
.pv-prep li svg { flex: none; width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-top: calc(2 * var(--u)); }
.pv-prep li path { stroke-dasharray: 14; stroke-dashoffset: 14; }
.pv-prep li.is-in path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease); }
.pv-prep__when { margin-top: auto; padding-top: calc(12 * var(--u)); border-top: 1px solid var(--rule); font-size: calc(13 * var(--u)); font-weight: 600; }
.pv-prep__where { display: flex; flex-wrap: wrap; gap: calc(16 * var(--u)); margin-top: calc(11 * var(--u)); }
.pv-prep__where dt { font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pv-prep__where dd { margin-top: calc(3 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--text); }

/* ---------- lock screen ---------- */
.pv-lock { flex: 1; display: flex; flex-direction: column; padding: calc(32 * var(--u)) calc(12 * var(--u)) calc(28 * var(--u)); color: #fff; background: #0e1211; }
.pv-lock__time { text-align: center; font-family: var(--font-head); font-size: calc(46 * var(--u)); font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.pv-lock__date { margin-top: calc(8 * var(--u)); text-align: center; font-size: calc(12 * var(--u)); opacity: .55; }
.pv-notifs { position: relative; margin-top: calc(26 * var(--u)); }
.pv-notifs::before, .pv-notifs::after { content: ""; position: absolute; left: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(-6 * var(--u)); z-index: 2; height: calc(20 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(243, 247, 244, .42); }
.pv-notifs::after { left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(-12 * var(--u)); z-index: 1; background: rgba(243, 247, 244, .22); }
.pv-notif { position: relative; z-index: 3; padding: calc(12 * var(--u)) calc(13 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(250, 250, 248, .96); color: var(--ink); }
.pv-notif__hd { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pv-notif__hd i { flex: none; display: block; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--lime); }
.pv-notif__hd time { margin-left: auto; }
.pv-notif h4 { margin-top: calc(9 * var(--u)); font-family: var(--font-head); font-size: calc(14.5 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.pv-notif p { margin-top: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: calc(18 * var(--u)); color: var(--text); }
.pv-notif b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- close ---------- */
.pv-close { padding: calc(145 * var(--u)) var(--pad); text-align: center; }
.pv-close .pv-h1 { max-width: calc(1100 * var(--u)); margin-inline: auto; }
.pv-close p { max-width: calc(760 * var(--u)); margin: calc(24 * var(--u)) auto 0; font-size: calc(25 * var(--u)); line-height: calc(33 * var(--u)); letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }
.pv-close__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(16 * var(--u)); margin-top: calc(44 * var(--u)); }
.pv-close .btn .i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); transition: transform .25s var(--ease); }
.pv-close .btn:hover .i { transform: translateX(calc(3 * var(--u))); }

/* ---------- motion ---------- */
.pv-js .pv-rev { opacity: 0; transform: translateY(calc(12 * var(--u))); }
.pv-js .pv-rev.is-in { opacity: 1; transform: none; transition: opacity .75s ease var(--d, 0ms), transform .75s var(--ease) var(--d, 0ms); }
.pv-js .pv-step { opacity: 0; transform: translateY(calc(8 * var(--u))) scale(.985); }
.pv-js .pv-step.is-in { opacity: 1; transform: none; transition: opacity .42s ease, transform .42s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .pv *, .pv *::before, .pv *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =========================================================
   Below 1180 the site switches --u to 1px, so everything here
   is written in real pixels: the story stacks, the phone leaves
   the photograph, and the rail moves to the left margin.
   ========================================================= */
@media (max-width: 1179px) {
  .pv { --pad: 22px; --gut: 30px; --rail: 5px; }
  .pv-h1 { font-size: clamp(32px, 7.2vw, 48px); line-height: 1.08; }
  .pv-h2 { font-size: clamp(26px, 5.4vw, 36px); line-height: 1.16; }
  .pv-h3 { font-size: clamp(19px, 4.2vw, 22px); line-height: 1.25; }
  .pv-lede { font-size: 17px; line-height: 25px; }
  .pv-note { font-size: 16px; line-height: 24px; max-width: none; }
  .pv-eyebrow { font-size: 12px; padding: 5px 11px; }

  .pv-hero { padding: 44px 22px 48px; }
  .pv-hero__in { grid-template-columns: 1fr; gap: 28px; }
  .pv-hero__fig { order: -1; }
  .pv-split { max-width: none; margin-top: 24px; }
  .pv-split div { padding: 14px 15px; font-size: 14px; line-height: 20px; }
  .pv-split b { font-size: 11px; }

  .pv-capstrip { padding: 18px 22px; }
  .pv-capstrip ul { gap: 8px 22px; }
  .pv-capstrip li { font-size: 10.5px; }

  .pv-scene { padding: 56px 22px; }
  .pv-scene__dot { top: 60px; width: 10px; height: 10px; }
  .pv-grid { grid-template-columns: 1fr; gap: 30px; }
  .pv-stage, .pv-scene.rev .pv-stage { order: 1; }
  .pv-copy,  .pv-scene.rev .pv-copy  { order: 2; }

  .pv-actbar { padding: 40px 22px 0; }
  .pv-actbar__in { gap: 10px 14px; }
  .pv-actbar__name { font-size: 20px; }
  .pv-actbar__desc { margin-left: 0; flex-basis: 100%; font-size: 14px; }

  .pv-shot { max-width: 420px; padding: 0; }
  .pv-shot.wide { min-height: 0; }
  .pv-shot .pv-device { position: static; width: 268px; margin: -60px auto 0; }
  .pv-badge { left: 14px; top: 14px; padding: 5px 11px; font-size: 11.5px; }
  .pv-badge i { width: 5px; height: 5px; }

  .pv-panel { padding: 26px 16px; border-radius: 18px; }
  .pv-device { width: 268px; padding: 7px; border-radius: 38px; }
  .pv-device__island { top: 15px; width: 62px; height: 17px; border-radius: 10px; }
  .pv-screen { min-height: 452px; border-radius: 31px; }
  .pv-status { gap: 66px; padding: 9px 17px 5px; font-size: 10.5px; }
  .pv-status svg { width: 45px; height: 11px; }
  .pv-home { width: 94px; height: 4px; bottom: 7px; }
  .pv-pad { height: 18px; }
  .pv-cap { max-width: none; font-size: 14px; line-height: 21px; }

  .pv-thoughts { max-width: none; margin-top: 24px; gap: 11px; }
  .pv-thought { font-size: 19px; line-height: 26px; padding: 9px 16px; border-left-width: 3px; }
  .pv-thought:nth-child(2n), .pv-thought:nth-child(3n) { margin-left: 0; }
  .pv-thoughts.tight .pv-thought { font-size: 17px; line-height: 23px; }

  .pv-turn { padding: 64px 22px; }
  .pv-turn__in, .pv-bridge__in { padding-left: 30px; }
  .pv-turn__grid { grid-template-columns: 1fr; gap: 30px; }
  .pv-fig { order: -1; }
  .pv-fig img { max-width: 380px; }
  .pv-frags { grid-template-columns: 1fr; gap: 10px; max-width: none; margin-top: 22px; }
  .pv-frag span { font-size: 14px; line-height: 20px; }
  .pv-quote { font-size: clamp(22px, 5vw, 32px); line-height: 1.2; margin-top: 40px; }
  .pv-attr { font-size: 11px; margin-top: 16px; }

  .pv-bridge { padding: 58px 22px; }
  .pv-bridge__lede { font-size: 16px; line-height: 24px; max-width: none; }
  .pv-chain { margin-top: 34px; }
  .pv-chain ol { grid-template-columns: 1fr; gap: 20px; }
  .pv-chain li { padding: 0 0 0 32px; text-align: left; }
  .pv-chain li::before { top: 4px; left: 0; width: 13px; height: 13px; border-width: 2px; transform: scale(.7); }
  .pv-chain li.lit::before { transform: scale(1); }
  .pv-chain li b { font-size: 20px; line-height: 1.2; }
  .pv-chain li span { font-size: 14px; line-height: 20px; margin-top: 3px; }
  .pv-chain__track, .pv-chain__fill { top: 10px; bottom: 10px; left: 6px; right: auto; width: 2px; height: auto; }
  .pv-chain__fill { transform: scaleY(0); transform-origin: top center; }
  .pv-chain.is-in .pv-chain__fill { transform: scaleY(1); }

  .pv-browser { width: 100%; }
  .pv-depts i { font-size: 10.5px; padding: 8px 6px; }

  .pv-close { padding: 78px 22px; }
  .pv-close p { font-size: 17px; line-height: 26px; margin-top: 18px; }
  .pv-close__ctas { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 30px; }
}

@media (max-width: 460px) {
  .pv-split { grid-template-columns: 1fr; }
  .pv-split div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .pv-shot .pv-device, .pv-device { width: 100%; max-width: 268px; }
}