/* Copied from site/assets/css/portal-video.css for business.workaid.io/v2 (16 Oct 2026, user request: "have a
   section for our dashboard video similar to our main website"). The business site deploys on its own, so it
   carries its own copy. Keep it in step with the main site's: re-copy rather than editing here. The block below
   gives the film the main site's :root tokens (styles.css), scoped to .pv. */
.pv {
  /* Brand */
  --navy: #17324D;
  --navy-deep: #10263B;
  --blue: #2F6B8A;
  --teal: #2E7D78;
  --teal-hover: #276E69;
  --teal-soft: #DDEFEC;
  --teal-glow: #7FC9C1;
  --charcoal: #26313A;
  --muted: #63717C;
  --border: #D9E1E6;
  --white: #FFFFFF;

  /* Grounds (Remote uses a light grey page with white cards) */
  --page: #F2F5F7;
  --page-deep: #E8EEF2;
  --card: #FFFFFF;

  /* Semantic */
  --amber: #B7791F;
  --amber-soft: #FBF3E4;
  --red: #B23B3B;
  --red-soft: #F9E8E8;

  --on-dark: #DCE6EE;
  --on-dark-muted: #9FB3C4;
  --on-dark-line: rgba(255,255,255,.14);

  --font-display: "Outfit", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 40px;
  --container: 1232px;
  --gutter: 16px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ==========================================================================
   Client portal film (rebuilt 6 Oct 2026, user request: "a full on motion graphics and video ad ...
   kinda like meta ads"). Replaces the 19 Sep 2026 tilted-device tour.

   A 24-second piece cut like a social ad: a hook ("Offshore shouldn't mean out of sight.") over the
   team's faces out of focus, the portal flying in on the drop, five fast scenes (Overview, a profile,
   a message, leave and cover, the month's report) in which parts of the screen lift out toward the
   camera, and an end card. The portal itself is still a faithful copy of app.workaid.io in its dark
   theme (repo WorkAid-Portal, app/portal.css and its dark tokens): when the real portal changes,
   change this to match.

   portal-film.js draws every frame from one clock, so nothing here transitions or animates on its own:
   this sheet only draws states, and the script sets transforms, opacity and the odd colour by time.
   That is what lets tools/render_portal_film.mjs render the same page frame by frame into the MP4 ad
   cuts. A CSS transition or animation added here would play on the site and be missing from the ads.

   Coordinates. The frame (.pv__fit) is drawn at a fixed width - 1440 on the site, 1080 for the tall
   cuts - and scaled to the stage like a video. Inside it, the world (.pv__world) is a 3D set: the camera
   is a point at the frame's centre and the portal window (1180 x 720) hangs on it, with the lifted
   pieces (.pv-float) beside it in the same space. Type, the end card and the background sit flat in
   the frame, outside the camera, so they read at any angle.

   Page-only sheet, loaded after the three shared ones on index.html alone. Every selector is prefixed
   pv, so nothing here reaches the rest of the site.
   ========================================================================== */

.pv { position: relative; margin: 8px 0; }

/* ---------- The stage ---------- */
.pv__stage {
  position: relative; overflow: hidden;
  aspect-ratio: var(--pv-ratio, 1440 / 860);
  border-radius: 24px;
  background: #0B1A28;
  box-shadow: 0 30px 70px -30px rgba(10,26,40,.55);
  isolation: isolate;
}
.pv[data-layout="tall"] .pv__stage { border-radius: 18px; }

.pv__fit {
  position: absolute; left: 0; top: 0;
  width: var(--pv-w, 1440px); height: var(--pv-h, 860px);
  transform-origin: 0 0;
  transform: scale(var(--pv-scale, .855));
  overflow: hidden;
}

/* Background: brand navy with a slow teal and blue haze, a faint studio floor and drifting dust. Never neon. */
.pv__bg { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(160deg, #0B1A28 0%, #10263B 48%, #12304A 100%); }
.pv__blob { position: absolute; left: 50%; top: 50%; border-radius: 50%; will-change: transform; }
.pv__blob--a { width: 1100px; height: 1100px; margin: -550px 0 0 -550px; background: radial-gradient(circle, rgba(46,125,120,.34) 0%, rgba(46,125,120,0) 62%); }
.pv__blob--b { width: 1000px; height: 1000px; margin: -500px 0 0 -500px; background: radial-gradient(circle, rgba(47,107,138,.38) 0%, rgba(47,107,138,0) 62%); }
.pv__blob--c { width: 760px; height: 760px; margin: -380px 0 0 -380px; background: radial-gradient(circle, rgba(127,201,193,.14) 0%, rgba(127,201,193,0) 60%); }
.pv__grid {
  position: absolute; left: 0; right: 0; top: -48px; bottom: -48px;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 55%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 62% at 50% 55%, #000 25%, transparent 75%);
  will-change: transform;
}
.pv__dust { position: absolute; inset: 0; }
.pv__dust i { position: absolute; left: 0; top: 0; border-radius: 50%; background: rgba(214,234,240,.75); will-change: transform, opacity; }

/* The hook's faces. portal-film.js places, sizes, blurs and flies them. */
.pv__orbs { position: absolute; inset: 0; z-index: 1; }
.pv-orb { position: absolute; left: 0; top: 0; width: 100px; height: 100px; border-radius: 50%; object-fit: cover; opacity: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 24px 50px -12px rgba(0,0,0,.65); will-change: transform, opacity, filter; }
.pv-orb--initials { display: flex; align-items: center; justify-content: center; background: #1a2836; color: #e6edf3; font-family: var(--font-body); font-weight: 600; }

/* ---------- The 3D set ---------- */
.pv__lens { position: absolute; inset: 0; z-index: 2; }
.pv__world {
  position: absolute; inset: 0;
  perspective: 2400px; perspective-origin: 50% 50%;
  /* The portal's dark theme (WorkAid-Portal/app/globals.css, dark tokens). Set here rather than on the app so
     the lifted pieces, which sit beside the window, draw in the same colours. */
  --page: #0f1a24; --page-deep: #14212e; --surface: #1a2836; --border: #2a3b4c;
  --charcoal: #e6edf3; --muted: #94a5b5; --ink: #f2f6f9; --blue: #7fb0d0;
  --accent: #5cc0b8; --teal-soft: #173d3a; --warn: #e3b453; --amber-soft: #3b2f12;
  --on-dark: #dce6ee; --on-dark-muted: #9fb3c4;
  /* The portal's categorical chart scale, dark values (portal.css --chart-1..8, --chart-rest). */
  --c1: #45a49d; --c2: #4f97bd; --c3: #a087cf; --c4: #58b37e; --c5: #d98c5a; --c6: #6cc3e4; --c-rest: #3c4c5c;
  --grad-brand: linear-gradient(135deg, #17324d 0%, #23557a 55%, #2f6b8a 100%);
  --grad-teal: linear-gradient(135deg, #2e7d78 0%, #2f6b8a 100%);
  --grad-sheen: linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%);
  color: var(--charcoal); font-family: var(--font-body); font-size: 13px; line-height: 1.5; text-align: left;
}
.pv__world svg { display: block; }
.pv__world h3, .pv__world h4, .pv__world p, .pv__world ul, .pv__world dl { margin: 0; }
.pv__camera { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }

/* The device: the portal window itself, with a lit rim and a deep shadow. */
.pv__device {
  position: absolute; left: -590px; top: -360px; width: 1180px; height: 720px;
  border-radius: 20px; overflow: hidden;
  background: #0F1A24;
  box-shadow:
    0 0 0 1px rgba(127,201,193,.28),
    0 0 0 8px rgba(255,255,255,.035),
    0 60px 120px -30px rgba(0,0,0,.75),
    0 0 90px -20px rgba(46,125,120,.45);
}
/* A light sweep across the glass on each cut. */
.pv__glare {
  position: absolute; inset: -20% -60%; pointer-events: none; z-index: 5; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.11) 48%, rgba(255,255,255,.02) 55%, transparent 62%);
}

/* ---------- The portal, in its dark theme ---------- */
.pv-app { position: absolute; inset: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); background: var(--page); }

.pv-side { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px 12px; background: var(--page-deep); border-right: 1px solid var(--border); }
.pv-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 12px; }
.pv-brand img { height: 20px; width: auto; }
.pv-brand small { font-size: 11px; color: var(--muted); font-weight: 500; }
.pv-nav { position: relative; display: flex; flex-direction: column; gap: 2px; }
.pv-nav__label { font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 10px 10px 6px; }
.pv-nav__item { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 0 10px; height: 38px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--charcoal); }
.pv-nav__item svg { width: 17px; height: 17px; color: var(--muted); }
.pv-nav__item em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pv-nav__item.is-active, .pv-nav__item.is-active svg, .pv-nav__item.is-active em { color: #fff; }
/* The active highlight is one pill that slides between items. */
.pv-nav__pill { position: absolute; left: 0; right: 0; top: 0; height: 38px; border-radius: 9px; background: var(--grad-teal); box-shadow: 0 4px 12px rgba(46,125,120,.35); transform: translateY(30px); }
.pv-account { margin-top: auto; position: relative; overflow: hidden; border-radius: 12px; padding: 12px; background: var(--grad-brand); color: var(--on-dark); }
.pv-account::after { content: ""; position: absolute; inset: 0; background: var(--grad-sheen); }
.pv-account b { display: block; color: #fff; font-weight: 600; font-size: 13px; }
.pv-account span { display: block; font-size: 11px; color: var(--on-dark-muted); margin-top: 2px; }
.pv-account i { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-style: normal; font-size: 12px; color: var(--on-dark-muted); }
.pv-account i svg { width: 14px; height: 14px; }

.pv-main { display: flex; flex-direction: column; min-width: 0; }
.pv-top { height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 0 22px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 86%, transparent); font-size: 12px; color: var(--muted); }
.pv-top b { color: var(--ink); font-weight: 500; }
.pv-top__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.pv-icon { position: relative; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); }
.pv-icon svg { width: 16px; height: 16px; }
.pv-bell em { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--warn); color: #10263b; font-size: 10px; font-weight: 700; font-style: normal; line-height: 16px; text-align: center; }

.pv-content { position: relative; flex: 1; min-height: 0; }
/* Pages stack; the script cross-fades them. The Overview is the resting state. */
.pv-page { position: absolute; inset: 0; padding: 20px 22px; opacity: 0; overflow: hidden; }
.pv-page[data-page="0"] { opacity: 1; }

.pv-eyebrow { font-family: var(--font-display); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: 6px !important; }
.pv-hero { position: relative; overflow: hidden; border-radius: 16px; padding: 20px 24px; margin-bottom: 14px; background: var(--grad-brand); color: var(--on-dark); display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.pv-hero::after { content: ""; position: absolute; inset: 0; background: var(--grad-sheen); }
.pv-hero > * { position: relative; z-index: 1; }
.pv-hero .pv-eyebrow { color: #7fc9c1; }
.pv-hero h3 { font-family: var(--font-display); font-weight: 500; font-size: 25px; line-height: 1.15; color: #fff; }
.pv-hero p:not(.pv-eyebrow) { color: var(--on-dark-muted); margin-top: 5px; }
.pv-hero__figs { display: flex; gap: 28px; }
.pv-hero__figs b { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 500; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pv-hero__figs span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--on-dark-muted); }

.pv-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 16px; }
.pv-intro h3 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--ink); }
.pv-intro p:not(.pv-eyebrow) { color: var(--muted); margin-top: 5px; }
.pv-btn { font-style: normal; display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 40px; background: var(--grad-teal); color: #fff; font-size: 13px; font-weight: 500; box-shadow: 0 3px 10px rgba(46,125,120,.3); }
.pv-ghost { font-style: normal; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 40px; border: 1px solid var(--border); color: var(--accent); font-size: 11.5px; font-weight: 500; }

.pv-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.pv-stack { display: grid; gap: 12px; align-content: start; }
.pv-panel { position: relative; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.pv-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13.5px; color: var(--ink); }
.pv-panel__head > span { display: flex; align-items: center; gap: 8px; }
.pv-panel__head svg { width: 15px; height: 15px; color: var(--blue); }
.pv-panel__head small { font-weight: 500; color: var(--muted); font-size: 12px; }
.pv-foot { padding: 10px 16px; border-top: 1px solid var(--page-deep); font-size: 12px; color: var(--muted); }

.pv-who small, .pv-timeline small, .pv-person small { display: block; color: var(--muted); font-size: 12px; }
.pv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pv-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 9px 16px; border-bottom: 1px solid var(--border); background: var(--page); white-space: nowrap; }
.pv-table td { padding: 10px 16px; border-bottom: 1px solid var(--page-deep); vertical-align: middle; color: var(--charcoal); }
.pv-table tr:last-child td { border-bottom: 0; }
.pv-muted { color: var(--muted) !important; }
.pv-who { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.pv-who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pv-row-first td { background: transparent; }
.pv-app.is-hover-face .pv-row-first td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pv-app.is-hover-face .pv-face { color: var(--accent); }
.pv-app.is-hover-face .pv-face img { box-shadow: 0 0 0 2px var(--accent); }

.pv-timeline { list-style: none; margin: 0; padding: 8px 16px !important; }
.pv-timeline li { position: relative; padding: 7px 0 9px 22px; color: var(--charcoal); }
.pv-timeline li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pv-timeline li::after { content: ""; position: absolute; left: 7.5px; top: 23px; bottom: -6px; width: 1px; background: var(--border); }
.pv-timeline li:last-child::after { display: none; }

.pv-kv { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; margin: 0; padding: 14px 16px; }
.pv-kv dt { color: var(--muted); }
.pv-kv dd { margin: 0; color: var(--charcoal); font-variant-numeric: tabular-nums; }

.pv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 40px; font-size: 11.5px; font-weight: 500; font-style: normal; white-space: nowrap; }
.pv-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pv-pill--ok { background: var(--teal-soft); color: var(--accent); }
.pv-pill--neutral { background: var(--page-deep); color: var(--muted); }
.pv-pill--info { background: color-mix(in srgb, var(--blue) 16%, var(--surface)); color: var(--blue); }

/* Your people */
.pv-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.pv-person { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pv-person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pv-person > div { flex: 1; min-width: 0; }
.pv-person b { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }
.pv-person span { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.pv-person.is-lit { border-color: rgba(92,192,184,.55); box-shadow: 0 0 0 3px rgba(92,192,184,.12); }
.pv-days { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; padding: 14px 16px; }
.pv-days span { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px; border-radius: 8px; background: var(--page); color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pv-days small { font-size: 10.5px; margin-top: 2px; }
.pv-days .is-today { box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
.pv-days .is-away { background: var(--teal-soft); color: var(--accent); }
.pv-days .is-away.is-lit { box-shadow: 0 0 0 2px var(--accent), 0 10px 24px -8px rgba(92,192,184,.55); color: #fff; }
.pv-seat { margin-top: 12px; }
.pv-seat .pv-foot { border-top: 0; }
.pv-scrollbar { position: absolute; right: 6px; top: 10px; bottom: 10px; width: 5px; border-radius: 3px; background: rgba(255,255,255,.04); }
.pv-scrollbar i { display: block; width: 100%; height: 62%; border-radius: 3px; background: rgba(148,165,181,.45); }

/* People without a photo yet: the portal's initials avatar. */
.pv-initials { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--page-deep); color: var(--ink); font-size: 11px; font-weight: 600; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--border); }
.pv-person .pv-initials { width: 48px; height: 48px; font-size: 15px; }

/* Insights */
.pv-months { display: inline-flex; padding: 3px; border-radius: 40px; border: 1px solid var(--border); background: var(--surface); }
.pv-months span { padding: 6px 14px; border-radius: 40px; font-size: 12.5px; color: var(--muted); }
.pv-months span.is-on { background: var(--grad-teal); color: #fff; }
.pv-tabs { display: flex; gap: 4px; margin: -4px 0 14px; border-bottom: 1px solid var(--border); }
.pv-tabs span { padding: 8px 12px 10px; font-size: 12.5px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pv-tabs span.is-on { color: var(--ink); border-color: var(--accent); }
.pv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.pv-stat { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.pv-stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-teal); opacity: .85; }
.pv-stat span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.pv-stat b { display: block; font-family: var(--font-display); font-size: 27px; font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-stat small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
.pv-delta { font-style: normal; font-weight: 600; margin-right: 4px; }
.pv-delta--up { color: var(--blue); }
.pv-delta--good { color: var(--accent); }
.pv-summary { padding: 14px 16px; display: grid; gap: 8px; color: var(--charcoal); line-height: 1.6; }
.pv-summary small { color: var(--muted); font-size: 11.5px; }
.pv-trend { display: grid; gap: 9px; padding: 14px 16px; }
.pv-trend > div { display: flex; align-items: center; gap: 10px; }
.pv-trend small { min-width: 26px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pv-trend small:last-child { text-align: right; }
.pv-trend i { flex: 1; height: 7px; border-radius: 4px; background: var(--page-deep); overflow: hidden; }
.pv-trend b { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--grad-teal); transform-origin: 0 50%; }
.pv-trend--times small:first-child { min-width: 96px; }
.pv-trend--times small:last-child { min-width: 56px; }
.pv-donut { position: relative; width: 190px; height: 190px; margin: 16px auto 6px; }
.pv-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pv-donut circle { fill: none; stroke: var(--c); stroke-width: 15; stroke-dasharray: 0 400; stroke-dashoffset: var(--o); }
.pv-donut__mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pv-donut__mid b { font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-donut__mid small { color: var(--muted); font-size: 11.5px; }
.pv-legend { list-style: none; margin: 0; padding: 6px 16px 10px !important; display: grid; gap: 5px; }
.pv-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--charcoal); }
.pv-legend li::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex-shrink: 0; }
.pv-legend li span { flex: 1; min-width: 0; }
.pv-legend li b { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }

/* A face opens a profile: the portal's right-hand detail panel over a dimmed page. */
.pv-overlay { position: absolute; inset: 0; z-index: 3; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; }
.pv-profile { position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; width: 470px; overflow: hidden; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -30px 0 60px -20px rgba(0,0,0,.6); transform: translateX(104%); }
.pv-profile__close { position: absolute; z-index: 2; right: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--page); color: var(--charcoal); display: inline-flex; align-items: center; justify-content: center; }
.pv-profile__close svg { width: 16px; height: 16px; }
.pv-profile__head { position: relative; z-index: 1; display: flex; gap: 16px; padding: 22px 22px 14px; background: var(--surface); }
.pv-profile__head img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px rgba(92,192,184,.5); }
.pv-profile__head h3 { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.15; color: var(--ink); }
.pv-profile__role { color: var(--charcoal); font-size: 14px; }
.pv-profile__since { color: var(--muted); font-size: 12px; margin: 2px 0 8px !important; }
.pv-profile__actions { position: relative; z-index: 1; display: flex; gap: 8px; padding: 0 22px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.pv-profile__actions .pv-btn { gap: 7px; }
.pv-profile__actions .pv-btn svg { width: 15px; height: 15px; }
.pv-profile__actions .pv-ghost { min-height: 38px; padding: 0 16px; font-size: 13px; }
.pv-app.is-hover-message .pv-message { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(46,125,120,.45); }
.pv-profile__body { padding: 4px 22px 22px; }
.pv-profile__body section { padding: 14px 0; border-bottom: 1px solid var(--page-deep); }
.pv-profile__body h4 { margin: 0 0 9px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pv-profile__body h4 span { color: var(--muted); font-weight: 500; margin-left: 6px; }
.pv-profile .pv-kv { padding: 0; }
.pv-link { color: var(--accent) !important; }
.pv-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pv-files li { display: flex; gap: 10px; align-items: flex-start; }
.pv-files svg { width: 16px; height: 16px; color: var(--blue); margin-top: 2px; flex-shrink: 0; }
.pv-files b { display: block; color: var(--ink); font-weight: 600; }
.pv-files small, .pv-hint { display: block; color: var(--muted); font-size: 11.5px; }
.pv-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.pv-facts div { padding: 10px; border-radius: 10px; background: var(--page); }
.pv-facts b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink); line-height: 1.1; }
.pv-facts span { color: var(--muted); font-size: 11px; }
.pv-tick { width: 17px; height: 17px; border-radius: 5px; background: var(--grad-teal); position: relative; flex-shrink: 0; }
.pv-tick::after { content: ""; position: absolute; left: 34%; top: 16%; width: 24%; height: 48%; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Chat: the portal's launcher, bottom right, and its window. */
.pv-chat { position: absolute; z-index: 4; right: 20px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.pv-chat__launch { position: relative; width: 50px; height: 50px; border-radius: 50%; background: var(--grad-teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.pv-chat__launch svg { width: 22px; height: 22px; }
.pv-chat__launch em { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--warn); color: #10263b; font-size: 11px; font-weight: 700; font-style: normal; line-height: 18px; text-align: center; }
.pv-chat__win { width: 380px; height: 470px; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 70px -10px rgba(0,0,0,.7), 0 0 0 3px rgba(92,192,184,.12); transform-origin: 100% 100%; opacity: 0; }
.pv-chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--grad-brand); color: #fff; }
.pv-chat__head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.pv-chat__head span { flex: 1; min-width: 0; }
.pv-chat__head b { display: block; font-weight: 600; font-size: 14px; }
.pv-chat__head small { display: block; color: var(--on-dark-muted); font-size: 11.5px; }
.pv-chat__head svg { width: 17px; height: 17px; color: var(--on-dark-muted); }
.pv-chat__back { transform: rotate(180deg); }
.pv-chat__thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; background: var(--page); }
.pv-chat__day { text-align: center; color: var(--muted); font-size: 11px; }
.pv-msg { max-width: 82%; align-self: flex-start; }
.pv-msg p { padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface); border: 1px solid var(--border); color: var(--charcoal); font-size: 13px; line-height: 1.45; }
.pv-msg small { display: block; margin: 3px 4px 0; color: var(--muted); font-size: 10.5px; }
.pv-msg.is-mine { align-self: flex-end; }
.pv-msg.is-mine p { border-radius: 14px 14px 4px 14px; background: var(--grad-teal); border-color: transparent; color: #fff; }
.pv-msg.is-mine small { text-align: right; }
/* The exchange plays in three steps, set on .pv-chat by the script: s1 sent, s2 typing, s3 replied. */
.pv-msg--1, .pv-msg--2, .pv-typing { display: none; }
.pv-chat.s1 .pv-msg--1, .pv-chat.s3 .pv-msg--2 { display: block; }
.pv-chat.s2 .pv-typing { display: inline-flex; }
.pv-typing { align-self: flex-start; gap: 4px; padding: 11px 13px; border-radius: 14px 14px 14px 4px; background: var(--surface); border: 1px solid var(--border); }
.pv-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.pv-chat__compose { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface); }
.pv-chat__compose span { flex: 1; padding: 9px 12px; border-radius: 40px; background: var(--page); color: var(--muted); font-size: 12.5px; }
.pv-chat__compose i { width: 36px; height: 36px; border-radius: 50%; background: var(--grad-teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pv-chat__compose svg { width: 16px; height: 16px; }

/* The cursor, in the window's own plane. */
.pv__cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 26px; height: 26px; pointer-events: none; opacity: 0; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.pv__cursor svg { width: 26px; height: 26px; fill: #fff; stroke: #10263b; stroke-width: 1.2; transform-origin: 5px 3px; }
.pv__cursor i { position: absolute; left: 2px; top: 2px; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgba(127,201,193,.95); opacity: 0; }

/* ---------- Pieces lifted out of the screen ----------
   Each sits in the camera's space beside the window. The script moves it toward the camera and sets --p, how
   far it is lifted, which fades in the shadow and rim underneath. Clones of portal parts (.pv-float--clone)
   wrap a copy of the original at its exact size, so at --p 0 the copy covers the original exactly. */
.pv-float { position: absolute; left: 0; top: 0; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.pv-float::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: var(--p, 0); box-shadow: 0 50px 90px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(127,201,193,.45), 0 0 70px -12px rgba(46,125,120,.55); }
.pv-float--clone > * { margin: 0 !important; width: 100% !important; height: 100% !important; }
.pv-float--clone .pv-person { border-color: rgba(92,192,184,.6); }
.pv-float--clone .pv-stat { border-color: rgba(92,192,184,.5); }

.pv-checks { width: 400px; padding: 22px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.pv-checks__title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px !important; font-weight: 600; font-size: 17px; color: var(--ink); }
.pv-checks__title svg { width: 20px; height: 20px; color: var(--accent); }
.pv-checks ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.pv-checks li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--charcoal); }
.pv-checks__icon { display: inline-flex; flex-shrink: 0; color: var(--accent); }
.pv-checks__icon svg { width: 22px; height: 22px; }
.pv-checks .pv-tick { width: 22px; height: 22px; border-radius: 7px; }

.pv-bubble::before { display: none; }
.pv-bubble--mine { width: 420px; }
.pv-bubble p { padding: 15px 20px; font-size: 20px; line-height: 1.42; box-shadow: 0 40px 70px -24px rgba(0,0,0,.8); }
.pv-bubble small { display: block; margin: 8px 10px 0; font-size: 14px; color: var(--on-dark-muted); }
.pv-bubble--mine p { background: var(--grad-teal); color: #fff; border-radius: 22px 22px 6px 22px; }
.pv-bubble--mine small { text-align: right; }
.pv-bubble--theirs, .pv-bubble--typing { display: flex; align-items: flex-end; gap: 14px; }
.pv-bubble--theirs { width: 470px; }
.pv-bubble--theirs img, .pv-bubble--typing img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px rgba(92,192,184,.5); }
.pv-bubble--theirs p { background: var(--surface); border: 1px solid var(--border); color: var(--ink); border-radius: 22px 22px 22px 6px; }
.pv-bubble--typing span { display: inline-flex; gap: 7px; padding: 19px 22px; border-radius: 22px 22px 22px 6px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 40px 70px -24px rgba(0,0,0,.8); }
.pv-bubble--typing i { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }

.pv-cover { display: flex; align-items: center; gap: 14px; width: 380px; padding: 16px 20px; border-radius: 18px; background: color-mix(in srgb, var(--blue) 18%, var(--surface)); border: 1px solid rgba(127,176,208,.5); }
.pv-cover img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pv-cover b { display: block; color: var(--ink); font-size: 17px; font-weight: 600; }
.pv-cover small { display: block; margin-top: 2px; color: var(--blue); font-size: 13.5px; }

/* ---------- Type ---------- */
/* A dark wash behind the headline, so it reads over any part of the window. */
.pv__scrim {
  position: absolute; inset: 0; z-index: 11; pointer-events: none; opacity: 0;
  background:
    linear-gradient(180deg, rgba(7,18,29,.95) 0%, rgba(7,18,29,.84) 17%, rgba(7,18,29,.42) 31%, rgba(7,18,29,0) 45%),
    radial-gradient(ellipse 60% 46% at 0% 0%, rgba(7,18,29,.7), rgba(7,18,29,0) 72%);
}
/* On land the headline holds the left column, so the wash fades out before the subject on the right. */
.pv[data-layout="land"] .pv__scrim { -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 72%); mask-image: linear-gradient(90deg, #000 50%, transparent 72%); }
.pv[data-layout="tall"] .pv__scrim { background: linear-gradient(180deg, rgba(7,18,29,.94) 0%, rgba(7,18,29,.7) 22%, rgba(7,18,29,0) 40%); }
.pv[data-format="story"] .pv__scrim { background: linear-gradient(180deg, rgba(7,18,29,.94) 0%, rgba(7,18,29,.8) 28%, rgba(7,18,29,0) 44%); }

.pv-hook, .pv-kt, .pv-end { position: absolute; z-index: 12; margin: 0; color: #fff; font-family: var(--font-display); font-weight: 500; pointer-events: none; visibility: hidden; text-shadow: 0 2px 30px rgba(5,14,22,.45); }
.pv-hook em, .pv-kt em, .pv-end em { font-style: normal; color: var(--teal-glow); }
/* Words are split by the script: each one a clipped slot (.pv-w) with the word inside it rising into view. */
.pv-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .14em; margin: 0 -.04em -.14em; }
.pv-w > span { display: inline-block; }
.pv-w--free { overflow: visible; }

.pv-hook { left: 60px; right: 60px; top: 50%; text-align: center; font-size: 96px; line-height: 1.02; letter-spacing: -.028em; translate: 0 -50%; }
.pv[data-layout="land"] .pv-tall { display: none; }

.pv-kt { left: 72px; top: 58px; width: 820px; }
.pv-kt__tag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 8px 18px 8px 13px; border-radius: 40px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(127,201,193,.38); color: var(--teal-glow); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; text-shadow: none; transform-origin: 0 50%; }
.pv-kt__tag svg { width: 20px; height: 20px; }
.pv-kt__line { margin: 0; font-size: 64px; line-height: 1.04; letter-spacing: -.024em; text-wrap: balance; }

.pv-end { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pv-end__logo { width: 260px; height: auto; margin-bottom: 34px; }
.pv-end__title { margin: 0; font-size: 82px; line-height: 1.02; letter-spacing: -.028em; }
.pv-end__sub { margin: 24px 0 0; font-family: var(--font-body); font-weight: 400; font-size: 25px; line-height: 1.4; color: var(--on-dark); text-shadow: none; }
.pv-end__cta { display: none; flex-direction: column; align-items: center; gap: 14px; margin: 40px 0 0; font-family: var(--font-body); text-shadow: none; }
.pv.is-ad .pv-end__cta { display: flex; }
.pv-end__cta span { display: inline-flex; align-items: center; gap: 12px; min-height: 66px; padding: 0 36px; border-radius: 40px; background: var(--teal); color: #fff; font-size: 23px; font-weight: 600; box-shadow: 0 18px 44px -12px rgba(46,125,120,.75); }
.pv-end__cta svg { width: 24px; height: 24px; }
.pv-end__cta small { font-size: 19px; font-weight: 500; letter-spacing: .04em; color: var(--on-dark-muted); }

/* Tall cuts: the phone on the site (4:5) and the ads' 4:5 and 9:16. Type at the top, the window below it. */
.pv[data-layout="tall"] .pv-hook { left: 64px; right: 64px; font-size: 112px; }
.pv[data-layout="tall"] .pv-kt { left: 66px; right: 66px; top: 78px; width: auto; }
.pv[data-layout="tall"] .pv-kt__tag { font-size: 24px; padding: 10px 22px 10px 16px; gap: 12px; }
.pv[data-layout="tall"] .pv-kt__tag svg { width: 28px; height: 28px; }
.pv[data-layout="tall"] .pv-kt__line { font-size: 80px; }
.pv[data-layout="tall"] .pv-end__logo { width: 330px; }
.pv[data-layout="tall"] .pv-end__title { font-size: 96px; }
.pv[data-layout="tall"] .pv-end__sub { font-size: 36px; max-width: 820px; }
.pv[data-layout="tall"] .pv-end__cta span { font-size: 32px; min-height: 92px; padding: 0 46px; }
.pv[data-layout="tall"] .pv-end__cta svg { width: 32px; height: 32px; }
.pv[data-layout="tall"] .pv-end__cta small { font-size: 26px; }
/* 9:16: Reels and Stories draw their own controls over the top 14% and bottom 35%, so the type keeps clear. */
.pv[data-format="story"] .pv-kt { top: 300px; }
.pv[data-format="story"] .pv-kt__line { font-size: 86px; }
.pv[data-format="story"] .pv-hook { top: 42%; font-size: 120px; }
.pv[data-format="story"] .pv-end { padding-bottom: 300px; }

.pv__flash { position: absolute; inset: 0; z-index: 14; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(ellipse 62% 62% at 50% 50%, rgba(226,243,241,.9) 0%, rgba(127,201,193,.32) 45%, rgba(127,201,193,0) 75%); }

/* ---------- No visible controls ----------
   The user removed the film's controls on 19 Sep 2026: visitors watch. WCAG 2.2.2 still asks that anything
   moving for more than five seconds can be paused, so one button remains, clipped out of sight until a keyboard
   focuses it, when it appears on the stage's corner. Mouse and touch visitors never see it. */
.pv__toggle { position: absolute; left: 16px; top: 16px; z-index: 20; min-height: 44px; padding: 0 18px; border: 0; border-radius: 40px; background: var(--white); color: var(--navy); font: 600 14px var(--font-body); cursor: pointer; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
/* The film fades in on scroll (.reveal); a keyboard can reach the button before that, so focus inside shows it. */
.js .pv.reveal:focus-within { opacity: 1; transform: none; }
.pv__toggle:not(:focus-visible) { width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pv__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Render mode ----------
   tools/render_portal_film.mjs opens index.html?pv-render=<format>. The script lifts the film out of the page
   and this fills the window with it, one frame at a time. */
html.pv-render, html.pv-render body { margin: 0; overflow: hidden; background: #0B1A28; }
html.pv-render body > :not(.pv):not(svg) { display: none !important; }
html.pv-render .pv { position: fixed; inset: 0; margin: 0; opacity: 1 !important; transform: none !important; transition: none !important; }
html.pv-render .pv__stage { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
html.pv-render .pv__toggle, html.pv-render .pv__sr { display: none; }