/* ------------------------------------------------------------------ *
 *  LIVE PORTAL PHONE — the real review screen, on the marketing site.
 *
 *  Not a screenshot and not a mockup: this is the same review flow a
 *  client actually uses, scaled into a phone. The video plays, Approve
 *  works, and approving shows what genuinely happens next — the post
 *  takes the next open slot in their schedule. Then it advances to the
 *  next video and finally to the caught-up state.
 * ------------------------------------------------------------------ */

.pp-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 46px;
  flex-wrap: wrap;
}

/* THE DEVICE — modelled on a real iPhone, not a rounded rectangle.
 *
 * What was wrong before: the frame was #1b2436→#0b1220, the same navy as the
 * section behind it, so the device was invisible against its own background
 * and all anyone saw was a white screen floating in space. And nothing pinned
 * the proportions, so the screen stretched to whatever the content added up to
 * — 2.79:1 against a real phone's 2.17:1, which is what made it read skinny.
 *
 * Real measurements, so this stops being guesswork:
 *   iPhone 15/16 Pro body   146.6 x 70.6 mm  -> 2.08 : 1  (the frame)
 *   iPhone 15/16 Pro screen 393 x 852 pt     -> 2.17 : 1  (the glass)
 * The rail is thin (a phone's edge is a few millimetres, not a bezel), the
 * corner radius is large and continuous, and the shadow sits under the device
 * rather than around it — that ground shadow is most of what sells the depth.
 */
.pp-phone {
  /* Built at REAL device width (393pt) and scaled down for display, rather
     than built small. The UI inside is set in rem, so it does not shrink with
     a smaller --ppw — at 300px the reel plus its chrome came to ~605px inside
     a 509px screen and pushed the Approve buttons off the bottom. At true
     size the same content lands at ~850 in an 852 screen, exactly as it does
     on a real phone, and the transform shrinks the finished article. */
  --ppw: 393px;   /* inherited by .ig-card below */
  --ppscale: .62;
  width: var(--ppw);
  flex: none;
  position: relative;
  transform: scale(var(--ppscale));
  transform-origin: center center;
  /* transforms don't affect layout: give back the height the scale removes,
     or the phone reserves a 843px-tall hole in the section. */
  margin: calc((1 - var(--ppscale)) * -421px) 0;
  /* 70.6mm wide, 55px radius on a 300px phone ≈ the real 18% corner */
  border-radius: 18%/8.6%;
  padding: 4px;                       /* the metal rail: thin, like the real one */
  background: linear-gradient(140deg, #6f6a78 0%, #37333d 22%, #211f26 50%, #37333d 74%, #7b7684 100%);
  box-shadow:
    0 1px 1px rgba(255, 255, 255, .22) inset,   /* rail highlight */
    0 34px 46px -18px rgba(0, 0, 0, .62),       /* the ground shadow */
    0 10px 22px -8px rgba(0, 0, 0, .45);
}

/* the black glass surround inside the rail */
.pp-screen {
  border-radius: 16.5%/7.9%;
  overflow: hidden;
  background: #f6f8fb;
  position: relative;
  aspect-ratio: 393 / 852;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 7px #0a090c;
}

/* Dynamic island, with the camera lens off to one side as on the real thing. */
.pp-island {
  position: absolute;
  top: 2.1%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  aspect-ratio: 100 / 27;
  border-radius: 99px;
  background: #08070a;
  z-index: 6;
  pointer-events: none;
}
.pp-island::after {
  content: "";
  position: absolute;
  right: 13%;
  top: 50%;
  width: 20%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2b3a56, #0d1220 70%);
}

/* Side rails: action button and volume pair on the left, wake on the right.
 * Percentages so they hold position when the phone is scaled. */
.pp-key {
  position: absolute;
  width: 2.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6f6a78, #2b2830 45%, #43404a);
}
.pp-key.left  { left: -2px; }
.pp-key.right { right: -2px; }
.pp-key.action { top: 16.5%; height: 4.4%; }
.pp-key.vol-up { top: 24.5%; height: 7.6%; }
.pp-key.vol-dn { top: 33.6%; height: 7.6%; }
.pp-key.wake   { top: 27.5%; height: 11.4%; }

/* portal header, same lockup as the real thing */
.pp-bar {
  background: linear-gradient(90deg, #0a1628, #0f1f3d);
  flex: none;
  padding: 52px 18px 14px;   /* clears the dynamic island (bottom edge ~48px) */
  display: flex;
  align-items: center;
  gap: 9px;
}
.pp-logo {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  display: grid; align-content: center; gap: 2.5px; padding: 6px 5px;
}
.pp-logo i { display: block; height: 3px; border-radius: 2px; background: #fff; }
.pp-logo i:nth-child(1) { width: 100%; }
.pp-logo i:nth-child(2) { width: 78%; }
.pp-logo i:nth-child(3) { width: 54%; }
.pp-name { font-size: .74rem; font-weight: 800; color: #fff; line-height: 1.15; }
.pp-sub  { font-size: .5rem; font-weight: 700; letter-spacing: .12em; color: rgba(191,219,254,.5); }

/* fills the screen under the header rather than ending wherever the content
   stops — that leftover white below the buttons was most of why it read as a
   card instead of a phone */
.pp-body {
  padding: 13px 13px 15px;
  flex: 1 1 auto;
  min-height: 0;
  /* No inner scrolling. The real portal fills a phone screen, so this has to
     as well — a mock you can scroll inside reads as a web page in a picture of
     a phone. Everything fits because the reel shrinks (below) rather than
     overflowing. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pp-count {
  display: flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 800; color: #0f172a; margin-bottom: 10px;
}
.pp-pill {
  background: #2563eb; color: #fff; border-radius: 999px;
  padding: 2px 8px; font-size: .64rem; font-weight: 800;
}

/* The reel reuses the shared Instagram card. --igw MUST stay a length: every
 * icon and count inside is calc(var(--igw) * n), and a percentage there resolves
 * against font-size, which collapses the whole action row to slivers.
 * 300 phone - 20 bezel - 26 body padding = 254. */
.pp-body .ig-card {
  --igw: calc(var(--ppw, 300px) - 46px);
  width: 100%;
  flex: 1 1 auto;
  box-shadow: none;
  border-radius: 14px;
}
.pp-body .ig-card .ig-cap { display: none; }
/* The reel is slightly shorter than 9:16 INSIDE THE PHONE, and only here.
   A true 9:16 reel plus the portal's own chrome — status area, header, the
   "2 videos waiting" row, Instagram's like bar, and the two approve buttons —
   comes to ~244px more than a real 393x852 screen holds. Something has to give,
   and it can't be the buttons: "try it" is the whole point of the section.
   Dropping the aspect ratio entirely was worse — the <video> is absolutely
   positioned, so with no ratio the media collapses to zero height. This is the
   ratio that fits; it still reads as a vertical reel.

   Final shape: the reel keeps 9:16 as its FLEX BASIS and is allowed to shrink
   from there to whatever the screen leaves it. Keeping the ratio is what stops
   it collapsing — with aspect-ratio removed the media has no intrinsic height
   at all, because the <video> inside is absolutely positioned, and it went to
   zero. Shrinking from a 9:16 basis crops a few percent off a cover-fitted
   video and nothing else. Nothing scrolls; the screen fills. */
/* The whole chain has to be shrinkable or none of it shrinks: the card sits
   inside a .pp-slot wrapper, and a single link left at min-height:auto pins the
   entire column at its natural height. */
.pp-slot { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pp-body .ig-card { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.pp-body .ig-media { flex: 1 1 auto; min-height: 0; }
/* Filling the screen means the 9:16 source gets cropped top and bottom. Bias
   the crop upward so the burned-in hook — the first thing anyone reads —
   survives; the lower third of a reel is usually just background. */
.pp-body .ig-media video,
.pp-body .ig-media img { object-position: 50% 32%; }

.pp-actions { display: flex; gap: 8px; margin-top: 11px; flex: none; }
.pp-btn {
  flex: 1; border: 0; cursor: pointer; font: inherit;
  border-radius: 12px; padding: 11px 8px;
  font-size: .74rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: filter .15s ease, transform .08s ease;
}
.pp-btn:active { transform: translateY(1px); }
.pp-approve { background: linear-gradient(90deg, #15803d, #22c55e); color: #fff; }
.pp-approve:hover { filter: brightness(1.08); }
.pp-revise { background: #fff; color: #475569; border: 1px solid #e2e8f0; }
.pp-revise:hover { border-color: #cbd5e1; }
.pp-btn svg { width: 13px; height: 13px; stroke-width: 2.4; fill: none; stroke: currentColor; }

/* what approving actually does */
/* collapsed until it fires: an invisible toast still reserved ~34px, and on a
   screen that must fit exactly, that came straight out of the reel */
.pp-toast {
  margin-top: 0; height: 0; padding: 0; overflow: hidden; flex: none;
  border-radius: 12px;
  background: #ecfdf5; border: 1px solid #a7f3d0;
  font-size: .68rem; font-weight: 700; color: #047857;
  display: flex; align-items: center; gap: 7px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.pp-toast.on { opacity: 1; transform: none; height: auto; margin-top: 10px; padding: 9px 11px; }
.pp-toast svg { width: 14px; height: 14px; flex: none; stroke: #059669; fill: none; stroke-width: 2.6; }

.pp-done { text-align: center; padding: 44px 18px; }
.pp-done .tick {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%;
  background: #dcfce7; display: grid; place-items: center;
}
.pp-done .tick svg { width: 22px; height: 22px; stroke: #16a34a; fill: none; stroke-width: 3; }
.pp-done h4 { margin: 0; font-size: .92rem; font-weight: 900; color: #0f172a; }
.pp-done p  { margin: 5px 0 0; font-size: .74rem; color: #64748b; line-height: 1.45; }
.pp-replay {
  margin-top: 14px; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: .7rem; font-weight: 800; color: #2563eb; text-decoration: underline;
  text-underline-offset: 3px;
}

/* callouts either side on desktop, hidden on small screens */
.pp-notes { display: flex; flex-direction: column; gap: 18px; max-width: 260px; text-align: left; }
.pp-note h5 { margin: 0 0 3px; font-size: .86rem; font-weight: 900; color: var(--ink, #0f172a); }
.pp-note p  { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-3, #64748b); }
/* Its siblings above already read the page tokens with a light-mode fallback;
   this one kept a hardcoded blue and so stayed #2563eb on the dark section
   background — 3.45:1 at 12.8px, under the AA floor. The callouts sit outside
   the phone, on the page, so they follow the page. (.pp-replay below keeps its
   literal blue on purpose: that one is inside the white phone screen.) */
.pp-note b  { color: var(--blue-600, #2563eb); }

/* Desktop: this is a real phone screen at real size — 300x812 — which swallows
   an entire laptop viewport and dwarfs the copy beside it (it ran 2.9x taller
   than its own text). Scale the whole unit rather than shrinking --ppw, because
   the type inside is set in rem and would not shrink with it; then pull the
   layout box back by the height the scale removed, since transforms do not
   affect layout. Aligning the row to the top stops the callouts floating in a
   void beside an 800px phone. */
@media (min-width: 821px) {
  /* Two problems, neither of them the phone's size. The stage spanned the full
     1000px wrap while its contents only filled ~560, leaving ~390px of nothing
     beside the copy; and the callouts were top-aligned against a phone twice
     their height, so most of the phone had empty space next to it. Cap the
     stage to what it actually holds and centre the two columns against each
     other — the composition reads as deliberate instead of stranded. */
  .pp-stage {
    align-items: center;
    gap: 60px;
    /* the phone's LAYOUT width is still 300px — transform only changes what you
       see — so the cap has to clear 300 + 60 gap + 300, or the callouts wrap
       underneath and the section grows instead of shrinking */
    max-width: 760px;
    margin: 0 auto;
    flex-wrap: nowrap;
  }
  .pp-notes { max-width: 300px; }
}

@media (max-width: 820px) {
  .pp-stage { gap: 26px; }
  .pp-notes { max-width: 320px; text-align: center; }
  .pp-note { text-align: center; }
}
@media (max-width: 820px) { .pp-phone { --ppscale: .58; } }
@media (max-width: 420px) { .pp-phone { --ppscale: .46; } }