/* =========================================================
   Post-Visit — Patient Lifecycle
   Built to public/reference/brand-guidelines.md. Loaded after /index.css.

   Rhythm the brief asked for, per story:
     THE PROBLEM (a person, a photograph, a question)
       -> TRANSITION (the question travels to the phone)
       -> WISEMELON SOLUTION (the phone, on a lime-soft stage)
   Problems are photographs on white; solutions are product UI on a
   lime-soft stage — so the two read differently at a glance, without
   relying on colour alone (each also carries its own labelled pill).

   Three layouts, deliberately different:
     01  copy left, photograph right, questions floating on the photo
     02  photograph left carrying a report notification, copy right
     03  one immersive charcoal band: question -> AI -> education,
         two phones side by side and a follow-up card

   Every class is prefixed po- . The reset is wrapped in :where() so it
   weighs nothing (guidelines §14).
   ========================================================= */

.po {
  --pad: calc(67 * var(--u));

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

  --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);
}
.po *, .po *::before, .po *::after { box-sizing: border-box; }
:where(.po) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(.po) :where(ul, ol) { padding: 0; list-style: none; }
.po img { display: block; max-width: 100%; }
.po .i { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- type (guidelines §3.3) ---------- */
.po-h1, .po-h2, .po-h3 { font-family: var(--font-head); font-weight: 500; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.po-h1 { font-size: calc(64 * var(--u)); line-height: calc(77 * var(--u)); }
.po-h2 { font-size: calc(48 * var(--u)); line-height: calc(57 * var(--u)); }
.po-h3 { font-size: calc(24 * var(--u)); line-height: calc(28 * var(--u)); }
.po .dim { color: var(--muted); }
.po-sub  { margin-top: calc(18 * var(--u)); max-width: calc(560 * var(--u)); font-size: calc(22 * var(--u)); line-height: calc(31 * var(--u)); letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }
.po-lede { margin-top: calc(16 * var(--u)); max-width: calc(600 * var(--u)); font-size: calc(25 * var(--u)); line-height: calc(33 * var(--u)); letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }

/* the system's pill (guidelines §6.3) */
.po-pill {
  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;
}
.po-pill::before { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: currentColor; opacity: .7; }
.po-pill.problem  { background: var(--amber); color: var(--amber-ink); }
.po-pill.solution { background: var(--lime-tint); color: var(--lime-ink); }
.po-pill.ink      { background: var(--ink); color: var(--lime); }
.po-pill + .po-h1, .po-pill + .po-h2 { margin-top: calc(22 * var(--u)); }

.po-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(44 * var(--u)); }
.po .btn .i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); transition: transform .2s var(--ease); }
.po .btn:hover .i { transform: translateX(calc(3 * var(--u))); }

/* the human state a solution leaves the patient in: before -> after */
.po-state {
  display: inline-flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(32 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: 999px;
  font-size: calc(15 * var(--u)); font-weight: 600; color: var(--muted);
}
.po-state .from { color: var(--amber-ink); }
.po-state .to   { color: var(--faint); transition: color .6s var(--ease); }
.po-state .i    { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: var(--faint); }
.po-state.is-on .to { color: var(--lime-ink); }

/* ---------- sections (guidelines §4.3, §5) ---------- */
.po-sec { position: relative; padding: calc(120 * var(--u)) var(--pad); border-top: 1px solid var(--rule); }
.po-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(96 * var(--u)); align-items: center; }
.po-split.rev > :first-child { order: 2; }

/* ---------- hero ---------- */
.po-hero { padding: calc(120 * var(--u)) var(--pad) calc(120 * var(--u)); }
.po-hero .po-split { grid-template-columns: minmax(0, 1fr) calc(530 * var(--u)); column-gap: calc(80 * var(--u)); }
.po-hero .po-h1 { text-wrap: nowrap; }
.po-hero__img { width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; object-position: center 30%; border-radius: var(--r-card); }
.po-hero__cap { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); font-size: calc(14 * var(--u)); color: var(--muted); }
.po-hero__cap span { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.po-hero__cap .i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: var(--divider); }
.po-hero__cap b { font-weight: 600; color: var(--ink); }

/* ---------- a problem photograph with floating questions ---------- */
.po-photo { position: relative; }
.po-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; border-radius: var(--r-card); filter: saturate(.9); }
.po-q {
  position: absolute; z-index: 2; max-width: calc(270 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u));
  background: #fff; box-shadow: var(--shadow); border: 1px solid var(--rule);
  font-family: var(--font-head); font-size: calc(18 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 500; letter-spacing: -.02em; color: var(--ink);
}
.po-q.a { left: calc(-40 * var(--u)); top: 16%; }
.po-q.b { right: calc(-32 * var(--u)); top: 46%; border-radius: calc(16 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)) calc(16 * var(--u)); }

/* the report notification that lands on the problem-02 photograph */
.po-notif {
  position: absolute; z-index: 2; left: calc(28 * var(--u)); right: calc(28 * var(--u)); bottom: calc(28 * var(--u));
  display: flex; align-items: center; gap: calc(14 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u));
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(calc(10 * var(--u))); box-shadow: var(--shadow);
}
.po-notif__ic { display: grid; place-items: center; flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--ink); color: var(--lime); }
.po-notif__ic .i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.po-notif__t { flex: 1; min-width: 0; }
.po-notif__t small { display: block; font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.po-notif__t b { display: block; margin-top: calc(3 * var(--u)); font-family: var(--font-head); font-size: calc(17 * var(--u)); font-weight: 500; letter-spacing: -.02em; }
.po-notif__t span { display: block; font-size: calc(14 * var(--u)); color: var(--muted); }
.po-notif time { align-self: flex-start; font-size: calc(12 * var(--u)); color: var(--faint); }

/* ---------- transitions ---------- */
.po-trans { position: relative; padding: calc(104 * var(--u)) var(--pad); border-top: 1px solid var(--rule); text-align: center; }
.po-trans .po-h2 { max-width: calc(880 * var(--u)); margin: calc(56 * var(--u)) auto 0; }
.po-flow { display: flex; align-items: center; justify-content: center; gap: 0; }
.po-chip {
  display: inline-flex; align-items: center; gap: calc(9 * var(--u)); flex: none;
  padding: calc(11 * var(--u)) calc(17 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff;
  font-size: calc(16 * var(--u)); font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: border-color .5s var(--ease), background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.po-chip .i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.po-chip.q { border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)) calc(4 * var(--u)); font-family: var(--font-head); font-weight: 500; letter-spacing: -.02em; }
.po-chip.wm .dot { display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--ink); color: var(--lime); }
.po-chip.wm .dot .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
/* the connecting line draws left to right, then the far chip lights up */
.po-link { position: relative; flex: 0 1 calc(120 * var(--u)); height: 1px; margin: 0 calc(10 * var(--u)); background: repeating-linear-gradient(90deg, var(--divider) 0 calc(5 * var(--u)), transparent calc(5 * var(--u)) calc(10 * var(--u))); }
.po-link::after { content: ""; position: absolute; inset: 0; background: var(--lime-ico); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease) var(--d, 0ms); }
.po-flow.is-on .po-link::after { transform: scaleX(1); }
.po-flow.is-on .po-chip.lit { border-color: var(--lime-ico); background: var(--lime-soft); box-shadow: 0 0 0 calc(4 * var(--u)) rgba(199, 243, 104, .25); transition-delay: var(--d, 0ms); }

/* ---------- solution stage: product UI on lime-soft ---------- */
.po-stage { position: relative; display: flex; justify-content: center; padding: calc(48 * var(--u)) calc(28 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--lime-soft); }

/* ---------- the device: iPhone proportions, fixed size, like Pre-Visit ---------- */
.po-device { position: relative; display: flex; flex-direction: column; flex: none; width: calc(272 * var(--u)); max-width: 100%; aspect-ratio: 393 / 852; padding: calc(7 * var(--u)); border-radius: calc(38 * var(--u)); background: var(--ink); box-shadow: var(--shadow); }
.po-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); }
.po-screen { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: calc(31 * var(--u)); overflow: hidden; background: #fff; }
.po-status { position: relative; z-index: 5; flex: none; display: flex; justify-content: space-between; align-items: center; 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; }
.po-status svg { width: calc(46 * var(--u)); height: calc(11 * var(--u)); fill: currentColor; }
.po-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; }
.po-pad { flex: none; height: calc(19 * var(--u)); background: #fff; }
.po-pad.wa { background: var(--wa-paper); }

/* WhatsApp conversation */
.po-wa { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.po-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; }
.po-wa__av { display: grid; place-items: center; flex: none; width: calc(29 * var(--u)); height: calc(29 * var(--u)); border-radius: 50%; background: var(--ink); color: var(--lime); }
.po-wa__av .i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.po-wa__who b { display: block; font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1.2; }
.po-wa__who span { font-size: calc(10 * var(--u)); opacity: .62; }
.po-wa__body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(6 * var(--u)); padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u)); background: var(--wa-paper); }
.po-day { align-self: center; 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; }
.po-msg { max-width: 86%; padding: calc(8 * var(--u)) calc(11 * var(--u)) calc(6 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: 1.42; letter-spacing: -.01em; color: #10191c; }
.po-msg.in  { align-self: flex-start; background: #fff; border-top-left-radius: calc(3 * var(--u)); }
.po-msg.out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: calc(3 * var(--u)); }
.po-msg time { display: block; margin-top: calc(3 * var(--u)); text-align: right; font-size: calc(9.5 * var(--u)); color: #667a6e; }
.po-plan { width: 100%; }
.po-plan h4 { font-family: var(--font-head); font-size: calc(14 * var(--u)); font-weight: 500; letter-spacing: -.02em; }
.po-plan ul { display: grid; gap: calc(6 * var(--u)); margin-top: calc(9 * var(--u)); }
.po-plan li { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(7 * var(--u)) calc(9 * var(--u)); border: 1px solid var(--line); border-radius: calc(9 * var(--u)); }
.po-plan li .ic { display: grid; place-items: center; flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--soft); color: var(--ink); }
.po-plan li .ic .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.po-plan li b { display: block; font-size: calc(11.5 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.po-plan li span { display: block; font-size: calc(11 * var(--u)); color: var(--muted); }
.po-plan li.now { border-color: var(--lime-ico); background: var(--lime-soft); }
.po-plan li.now .ic { background: var(--lime); }
.po-help { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: var(--ink); color: var(--lime); font-size: calc(11.5 * var(--u)); font-weight: 600; }
.po-help .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.po-typing { display: inline-flex; gap: calc(4 * var(--u)); padding: calc(3 * var(--u)) 1px; }
.po-typing i { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: #9aa6a0; animation: poBlip 1.3s infinite ease-in-out; }
.po-typing i:nth-child(2) { animation-delay: .17s; }
.po-typing i:nth-child(3) { animation-delay: .34s; }
@keyframes poBlip { 0%, 62%, 100% { opacity: .28; transform: none; } 31% { opacity: 1; transform: translateY(calc(-2.5 * var(--u))); } }

/* Wisemelon app screens */
.po-app { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.po-app__hd { flex: none; display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid var(--rule); }
.po-app__hd b { font-size: calc(13.5 * var(--u)); font-weight: 600; }
.po-app__hd .tag { margin-left: auto; padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: var(--lime-tint); color: var(--lime-ink); font-size: calc(10 * var(--u)); font-weight: 600; }
.po-app__av { display: grid; place-items: center; flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--ink); color: var(--lime); }
.po-app__av .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.po-app__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)); overflow: hidden; }
.po-app__body[data-chat] { justify-content: flex-end; }

.po-report { padding: calc(14 * var(--u)); border: 1px solid var(--line); border-radius: calc(14 * var(--u)); }
.po-report__top { display: flex; align-items: center; gap: calc(11 * var(--u)); }
.po-report__ic { display: grid; place-items: center; flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--soft); }
.po-report__ic .i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.po-report h3 { font-family: var(--font-head); font-size: calc(15.5 * var(--u)); font-weight: 500; letter-spacing: -.02em; }
.po-report p { margin-top: calc(2 * var(--u)); font-size: calc(12 * var(--u)); color: var(--lime-ink); font-weight: 600; }
.po-report .po-btn { margin-top: calc(13 * var(--u)); }
.po-btn { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(11 * var(--u)); background: var(--ink); color: var(--lime); font-size: calc(13 * var(--u)); font-weight: 600; }
.po-btn .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.po-k { font-size: calc(10.5 * var(--u)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.po-next { display: grid; gap: calc(7 * var(--u)); }
.po-next li { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(11 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--line); border-radius: calc(11 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 500; transition: border-color .45s var(--ease), background .45s var(--ease); }
.po-next li .i { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: var(--muted); }
.po-next li .go { margin-left: auto; color: var(--faint); }
.po-next li.lit { border-color: var(--lime-ico); background: var(--lime-soft); }
.po-next li.lit .go { color: var(--lime-ink); }
.po-small { margin-top: auto; padding-top: calc(10 * var(--u)); border-top: 1px solid var(--rule); font-size: calc(11 * var(--u)); line-height: 1.45; color: var(--muted); }

/* care guide */
.po-lang { display: flex; gap: calc(3 * var(--u)); padding: calc(3 * var(--u)); border-radius: 999px; background: var(--soft); }
.po-lang span { flex: 1; padding: calc(5 * var(--u)) 0; border-radius: 999px; text-align: center; font-size: calc(11.5 * var(--u)); font-weight: 600; color: var(--muted); }
.po-lang span.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(17, 19, 24, .08); }
.po-topics { display: grid; gap: calc(6 * var(--u)); }
.po-topics li { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(11 * var(--u)); border: 1px solid var(--line); border-radius: calc(11 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 500; }
.po-topics li .ic { display: grid; place-items: center; flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--soft); }
.po-topics li .ic .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.po-topics li .go { margin-left: auto; width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--faint); }
.po-topics li.on { border-color: var(--lime-ico); background: var(--lime-soft); }
.po-topics li.on .ic { background: var(--lime); }
.po-ai { max-width: 90%; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: 1.45; letter-spacing: -.01em; }
.po-ai.out { align-self: flex-end; background: var(--lime-tint); border-bottom-right-radius: calc(4 * var(--u)); }
.po-ai.in  { align-self: flex-start; background: var(--soft); border-bottom-left-radius: calc(4 * var(--u)); }
.po-ai small { display: block; margin-bottom: calc(5 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lime-ink); }

/* ---------- 03: the immersive charcoal band (the footer's --ink) ---------- */
.po-band { position: relative; padding: calc(128 * var(--u)) var(--pad) calc(136 * var(--u)); color: #fff; }
.po-band::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--ink); z-index: -1; }
.po-band { isolation: isolate; }
.po-band .po-h2 { color: #fff; }
.po-band .dim, .po-band .po-sub { color: #8f8f8f; }
.po-band__head { display: grid; grid-template-columns: minmax(0, 1fr) calc(420 * var(--u)); column-gap: calc(96 * var(--u)); align-items: end; }
.po-voices { display: grid; gap: calc(12 * var(--u)); justify-items: end; }
.po-voice { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.po-voice img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; object-fit: cover; object-position: center 22%; }
.po-voice p { padding: calc(11 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)) calc(16 * var(--u)); background: #2e2e2e; border: 1px solid #3a3a3a; font-family: var(--font-head); font-size: calc(17 * var(--u)); line-height: calc(23 * var(--u)); font-weight: 500; letter-spacing: -.02em; color: #e8e8e8; }
.po-band .po-flow { margin-top: calc(88 * var(--u)); }
.po-band .po-chip { background: #2e2e2e; border-color: #3a3a3a; color: #e8e8e8; }
.po-band .po-link { background: repeating-linear-gradient(90deg, #555 0 calc(5 * var(--u)), transparent calc(5 * var(--u)) calc(10 * var(--u))); }
.po-band .po-flow.is-on .po-chip.lit { background: var(--lime); border-color: var(--lime); color: var(--ink); box-shadow: none; }
.po-band .po-flow.is-on .po-chip.lit .dot { background: var(--ink); }
.po-band__stage { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: calc(40 * var(--u)); align-items: center; margin-top: calc(72 * var(--u)); }
.po-band .po-device { box-shadow: 0 0 0 1px #3a3a3a; }
.po-band__copy { padding-left: calc(32 * var(--u)); }
.po-band__copy .po-h2 { margin-top: calc(22 * var(--u)); }
.po-band .po-state { border-color: #3a3a3a; color: #8f8f8f; }
.po-band .po-state .from { color: #d0a25a; }
.po-band .po-state.is-on .to { color: var(--lime); }

/* the supporting follow-up moment — a small card, not a section */
.po-followup { display: flex; align-items: center; gap: calc(14 * var(--u)); max-width: calc(380 * var(--u)); margin-top: calc(36 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: var(--r); background: #fff; color: var(--ink); }
.po-followup__ic { display: grid; place-items: center; flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--lime); }
.po-followup__ic .i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.po-followup small { display: block; font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.po-followup b { display: block; margin-top: calc(3 * var(--u)); font-family: var(--font-head); font-size: calc(16 * var(--u)); font-weight: 500; letter-spacing: -.02em; }
.po-followup .po-btn { margin-left: auto; height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)); }

/* ---------- final CTA ---------- */
.po-cta { padding: calc(145 * var(--u)) var(--pad); text-align: center; }
.po-cta .po-h1 { max-width: calc(1000 * var(--u)); margin-left: auto; margin-right: auto; }
.po-cta .po-lede { margin-left: auto; margin-right: auto; max-width: calc(720 * var(--u)); }
.po-cta .po-ctas { justify-content: center; }

/* ---------- next in the lifecycle ---------- */
.po-nextch { padding: calc(96 * var(--u)) var(--pad) calc(120 * var(--u)); border-top: 1px solid var(--rule); }
.po-nextch .po-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.po-nextch .po-h2 { max-width: calc(620 * var(--u)); }
.po-arrowlink { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(32 * var(--u)); padding-bottom: calc(4 * var(--u)); border-bottom: 1px solid currentColor; font-size: calc(20 * var(--u)); font-weight: 500; color: var(--ink); }
.po-arrowlink .i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); transition: transform .2s var(--ease); }
.po-arrowlink:hover .i { transform: translateX(calc(3 * var(--u))); }
.po-journey { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.po-journey a, .po-journey span { display: block; padding: calc(18 * var(--u)) calc(16 * var(--u)); color: var(--muted); font-size: calc(15 * var(--u)); font-weight: 600; }
.po-journey > * + * { border-left: 1px solid var(--rule); }
.po-journey small { display: block; margin-bottom: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.po-journey .here { background: var(--lime-soft); color: var(--ink); }
.po-journey .here small { color: var(--lime-ink); }
.po-journey a:hover { color: var(--ink); }

/* ---------- motion (guidelines §9) ---------- */
.po-js .po-rev { opacity: 0; transform: translateY(calc(12 * var(--u))); }
.po-js .po-rev.is-in { opacity: 1; transform: none; transition: opacity .75s ease var(--d, 0ms), transform .75s var(--ease) var(--d, 0ms); }
.po-js .po-step { opacity: 0; transform: translateY(calc(8 * var(--u))) scale(.985); }
.po-js .po-step.is-in { opacity: 1; transform: none; transition: opacity .42s ease, transform .42s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .po *, .po *::before, .po *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
}

/* =========================================================
   Below 1180 --u is 1px: every size here is real px.
   Stack, don't shrink (guidelines §10).
   ========================================================= */
@media (max-width: 1179px) {
  .po { --pad: 22px; }
  .po .i { width: 16px; height: 16px; }
  .po-h1 { font-size: clamp(32px, 7.2vw, 48px); line-height: 1.08; }
  .po-h2 { font-size: clamp(26px, 5.4vw, 36px); line-height: 1.16; }
  .po-lede { font-size: 17px; line-height: 25px; margin-top: 14px; }
  .po-sub  { font-size: 16px; line-height: 24px; margin-top: 14px; max-width: none; }
  .po-pill { font-size: 12px; padding: 5px 11px; }
  .po-pill + .po-h1, .po-pill + .po-h2 { margin-top: 16px; }
  .po-ctas { margin-top: 28px; }
  .po-state { font-size: 13px; margin-top: 22px; }

  .po-hero { padding: 40px 22px 56px; }
  .po-hero .po-split, .po-split { grid-template-columns: 1fr; row-gap: 32px; }
  .po-hero .po-h1 { text-wrap: balance; }
  .po-hero .po-h1 br { display: none; }
  .po-split.rev > :first-child { order: 0; }
  .po-hero__cap { font-size: 12.5px; flex-wrap: wrap; }

  .po-sec { padding: 56px 22px; }
  .po-photo { max-width: 460px; }
  .po-q { max-width: 230px; font-size: 15px; line-height: 20px; padding: 10px 13px; }
  .po-q.a { left: 10px; top: 12px; }
  .po-q.b { right: 10px; top: auto; bottom: 18px; }
  .po-notif { left: 12px; right: 12px; bottom: 12px; }

  .po-trans { padding: 56px 22px; }
  .po-trans .po-h2 { margin-top: 32px; }
  .po-flow { flex-direction: column; gap: 0; }
  .po-link { flex: none; width: 1px; height: 26px; margin: 6px 0; background: repeating-linear-gradient(180deg, var(--divider) 0 4px, transparent 4px 8px); }
  .po-link::after { transform: scaleY(0); transform-origin: top; }
  .po-flow.is-on .po-link::after { transform: scaleY(1); }
  .po-chip { font-size: 14.5px; white-space: normal; text-align: left; }

  .po-stage { padding: 28px 16px; border-radius: 18px; }
  .po-device { width: 268px; padding: 7px; border-radius: 38px; }
  .po-island { top: 15px; width: 62px; height: 17px; }
  .po-screen { border-radius: 31px; }

  .po-band { padding: 64px 22px 72px; }
  .po-band__head { grid-template-columns: 1fr; row-gap: 26px; }
  .po-voices { justify-items: start; }
  .po-voice p { font-size: 15px; line-height: 20px; }
  .po-band .po-flow { margin-top: 44px; }
  .po-band .po-link { background: repeating-linear-gradient(180deg, #555 0 4px, transparent 4px 8px); }
  .po-band__stage { grid-template-columns: 1fr; row-gap: 24px; justify-items: center; margin-top: 40px; }
  .po-band__copy { padding-left: 0; justify-self: stretch; }
  .po-followup { max-width: none; }

  .po-cta { padding: 72px 22px; }
  .po-cta .po-ctas { flex-direction: column; align-items: stretch; }
  .po-nextch { padding: 56px 22px 64px; }
  .po-nextch .po-split { row-gap: 28px; }
  .po-journey { grid-template-columns: 1fr 1fr; }
  .po-journey > :nth-child(3) { border-left: 0; }
  .po-journey > :nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .po-arrowlink { font-size: 17px; }
}
@media (max-width: 460px) {
  .po-device { width: 100%; max-width: 268px; }
}