/* pairops.com/platform — page styles, v2 (the slim-down). Served from
   workspace.pairops.com. Source of truth for the Webflow /platform page.
   Fonts load via <link> in the Webflow page head (Fontshare General
   Sans, Google DM Sans). To ship a change: edit, bump the filename to
   -v3, update the Webflow page head reference, push. */

/* ==================================================================
   pairops.com/platform — five sections, one system.
   Hero (product at ~70% of the fold) → integration bar → three
   consequential things the system does → never per-seat → close.
   Sage is the Platform line and leads; clay appears once, as a drift
   warning. General Sans + DM Sans, no serif, no mono.
   ================================================================== */


:root{
  color-scheme:light;

  --page:#FAF8F5;
  --surface:#FFFFFF;
  --ink:#1F1F1F;
  --ink-deep:#141412;
  --ink-mute:#4A4A48;
  --ink-dim:#7A7772;
  --ink-faint:#A9A399;
  --hair:#E8E1D6;
  --hair-firm:#D9CFC0;
  --hair-dark:rgba(244,237,228,.13);
  --cream-72:rgba(244,237,228,.72);
  --cream-52:rgba(244,237,228,.52);
  --sage:#64705C;
  --sage-deep:#4E5847;
  --sage-lift:#8FA180;
  --sage-tint:#EEF0EA;
  --sage-wash:rgba(100,112,92,.06);
  --sand:#E8C061;
  --sand-deep:#C9A349;
  --clay:#8E6353;              /* one use only: drift warning */

  --disp:'General Sans','Avenir Next',system-ui,-apple-system,sans-serif;
  --body:'DM Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
  --max:1240px;
  --pad:clamp(20px,4vw,52px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--page);scroll-behavior:smooth}
body{
  background:var(--page);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--sand);color:var(--ink)}

/* Host-site bleed guard. pairops.com styles bare headings and
   paragraphs (its h2 color resolves gold), and element rules beat
   inheritance. Inside the page, un-classed text takes its section's
   color; explicit class colors above (0,2,0+) still win. */
[class*="pp-"] :is(h1,h2,h3,h4,h5,h6,p){color:inherit}
.pp-wrap{max-width:var(--max);margin:0 auto;width:100%}

.pp-kicker{
  font-family:var(--body);font-weight:500;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sage);
}
.pp-kicker.pp-dim{color:var(--cream-52)}
.pp-tnum{font-variant-numeric:tabular-nums}

/* Hover: a sand bracket that appears at target. Nothing travels. */
.pp-hoverable{position:relative}
.pp-hoverable::after{
  content:"";position:absolute;inset:-4px -8px;
  border:1.5px solid var(--sand);opacity:0;pointer-events:none;
  transition:opacity .12s linear;
}
.pp-hoverable:hover::after,.pp-hoverable:focus-visible::after{opacity:1}
.pp-hoverable:focus-visible{outline:none}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px}

/* ------------------------------ chrome ---------------------------- */
.pp-chrome{
  position:fixed;top:0;left:0;right:0;z-index:60;color:var(--page);
  background:linear-gradient(to bottom,rgba(20,20,18,.62),transparent);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.pp-chrome.pp-scrolled{color:var(--ink)}
.pp-chrome-inner{
  max-width:var(--max);margin:0 auto;padding:20px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border:1px solid transparent;border-radius:999px;
  transition:padding .55s var(--ease),max-width .55s var(--ease),margin .55s var(--ease),
    background .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease);
}
/* scrolled: the chrome condenses into a floating capsule */
.pp-chrome.pp-scrolled .pp-chrome-inner{
  max-width:960px;margin-top:10px;padding:10px 24px;
  background:rgba(250,248,245,.92);backdrop-filter:blur(12px);
  border-color:var(--hair);box-shadow:0 14px 40px -12px rgba(31,31,31,.18);
}
.pp-wordmark{display:flex;align-items:center;gap:13px;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.01em}
.pp-bars{display:flex;gap:5px;height:24px}
.pp-bars span{display:block;width:6.85px;border-radius:2.4px;background:#F4EDE4;transition:background .3s var(--ease)}
.pp-bars span:last-child{background:var(--sage-lift)}
.pp-chrome.pp-scrolled .pp-bars span{background:var(--ink)}
.pp-chrome.pp-scrolled .pp-bars span:last-child{background:var(--sage)}
.pp-wordmark .pp-tag{opacity:.6;font-weight:500}
.pp-wordmark .pp-tag::before{content:"·";opacity:.5;margin:0 4px 0 2px}
.pp-nav{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:500}
.pp-nav-links{display:flex;gap:24px}
.pp-nav a{opacity:.78;transition:opacity .18s var(--ease)}
.pp-nav a:hover{opacity:1}
.pp-chrome.pp-scrolled .pp-nav a{opacity:1;color:var(--ink-mute)}
.pp-chrome.pp-scrolled .pp-nav a:hover{color:var(--ink)}
.pp-nav .pp-rule{width:1px;height:18px;background:currentColor;opacity:.25}
.pp-pill{
  padding:11px 20px;border-radius:999px;background:var(--sand);color:var(--ink);
  font-weight:500;font-size:14px;transition:background .18s var(--ease);opacity:1 !important;
}
.pp-pill:hover{background:var(--sand-deep)}
/* mobile menu: hidden on desktop, a two-line button that opens the
   nav links as a dropdown panel */
.pp-menubtn{display:none;position:relative;width:36px;height:36px;border-radius:9px;flex-shrink:0}
.pp-menubtn i{position:absolute;left:9px;right:9px;height:2px;border-radius:1px;background:currentColor;transition:transform .25s var(--ease),top .25s var(--ease)}
.pp-menubtn i:first-child{top:13px}
.pp-menubtn i:last-child{top:21px}
.pp-chrome.pp-open .pp-menubtn i:first-child{top:17px;transform:rotate(45deg)}
.pp-chrome.pp-open .pp-menubtn i:last-child{top:17px;transform:rotate(-45deg)}

/* ------------------------------- hero ----------------------------- */
/* Headline, then the product at nearly application scale. The shot is
   the elevator pitch and carries ~70% of the section's area. */
.pp-hero{
  background:var(--ink-deep);color:var(--page);
  padding:clamp(96px,13vh,140px) var(--pad) clamp(36px,5vh,56px);
  display:flex;flex-direction:column;gap:clamp(28px,4.5vh,44px);
}
.pp-hero-top{
  display:grid;gap:clamp(22px,3.4vh,32px);
  max-width:var(--max);margin-inline:auto;width:100%;
}
.pp-hero .pp-kicker{color:var(--sage-lift)}
.pp-hero h1{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(56px,10.4vw,164px);line-height:.9;letter-spacing:-.048em;
}
.pp-hero-sub{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(20px,2.4vw,32px);line-height:1.25;letter-spacing:-.02em;
  color:var(--cream-72);max-width:30ch;
}
.pp-hero-sub b{color:var(--page);font-weight:500}

/* Letter-by-letter sage pulse. Each span gets --i (0-21). A pulse
   of sage sweeps left to right: each letter goes page → sage → page.
   Only the period holds sage at the end. Words are wrapped in .pp-w
   so the browser never breaks mid-word. */
.pp-hero h1 .pp-l{display:inline-block}
.pp-w{display:inline;white-space:nowrap}
.pp-hero.pp-lit h1 .pp-l{
  animation:sagepulse .32s ease calc(var(--i) * 38ms) both;
}
.pp-hero.pp-lit h1 .pp-period{
  animation:sagehold .32s ease calc(var(--i) * 38ms) both;
}
@keyframes sagepulse{
  0%{color:var(--page)}
  40%{color:var(--sage-lift)}
  100%{color:var(--page)}
}
@keyframes sagehold{
  0%{color:var(--page)}
  40%{color:var(--sage-lift)}
  100%{color:var(--sage-lift)}
}

/* Product shot in the dark hero */
.pp-hero .pp-shot{max-width:var(--max);margin:0 auto;width:100%}
.pp-hero .pp-app{box-shadow:0 24px 64px rgba(0,0,0,.4)}

.pp-hero-foot{
  max-width:var(--max);margin:0 auto;width:100%;
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
  padding-top:clamp(24px,4vh,36px);border-top:1px solid var(--hair-dark);
}
.pp-hero-foot p{font-size:14px;color:var(--cream-52);max-width:44ch}
.pp-btn-sand{
  padding:15px 28px;border-radius:999px;background:var(--sand);color:var(--ink);
  font-weight:500;font-size:15px;transition:background .2s var(--ease);white-space:nowrap;
}
.pp-btn-sand:hover{background:var(--sand-deep)}

/* Integration bar — the proof strip below the hero. No headline. */
.pp-integrations{
  padding:clamp(18px,2.6vh,28px) var(--pad);
  border-bottom:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,2.6vw,36px);flex-wrap:wrap;
}
.pp-int-lbl{
  font-family:var(--body);font-weight:500;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);
}
.pp-int{display:inline-flex;align-items:center;gap:9px}
.pp-int-logo{width:22px;height:22px;object-fit:contain;border-radius:5px}
.pp-int-name{
  font-family:var(--body);font-weight:500;font-size:13.5px;
  color:var(--ink-mute);letter-spacing:.01em;
}

/* --------------------------- section frame ------------------------ */
.pp-sec{padding:clamp(84px,14vh,160px) var(--pad)}
.pp-sec.pp-line{border-top:1px solid var(--hair)}

/* ------------- product cards: three consequential things ----------- */
/* One section, one system. Each card: a title, one sentence, a shot
   that plays one state change when it enters view, then stops. */
.pp-prod{padding:clamp(64px,10vh,120px) var(--pad)}
/* the cards section spans two embeds; tighten the seam between them */
.pp-prod-a{padding-bottom:clamp(7px,.9vw,12px)}
.pp-prod-b{padding-top:clamp(7px,.9vw,12px)}
.pp-cardgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px)}
.pp-pcard{
  min-width:0; /* the fixed-width shell inside must not set the track's min-content */
  background:var(--surface);border:1px solid var(--hair);border-radius:14px;
  padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:12px;
}
.pp-pcard h3{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(20px,2.2vw,27px);letter-spacing:-.022em;line-height:1.15;
}
.pp-pcard .pp-psub{font-size:15px;line-height:1.55;color:var(--ink-mute);max-width:52ch}
.pp-pcard .pp-shot{margin-top:auto;padding-top:12px}
.pp-pcard .pp-app{box-shadow:0 12px 32px rgba(31,31,31,.10)}
.pp-pcard-wide{grid-column:1 / -1}
.pp-pcard-duo{
  display:grid;grid-template-columns:1fr minmax(300px,400px);
  gap:clamp(28px,4.5vw,64px);align-items:center;
}
.pp-pcard-duo .pp-btn-sand{display:inline-block;margin-top:20px}

/* ------------------- product shots (the real shell) ---------------- */
/* Rebuilt from the shipped Platform shell: values from
   platform/src/CompanyShell.jsx via the film kit (_film.css) - 1200px
   frame (760px for the card-sized variant, data-w="760"), surface
   chrome over cream, sage pill on the active nav item. Same rule as
   the film: every screen corresponds to something the product does.
   Rebuilt, never invented. */
.pp-shot{position:relative;width:100%}
.pp-shot .pp-fitbox{width:100%;overflow:hidden}
.pp-app{
  width:1200px;background:var(--page);border-radius:12px;overflow:hidden;
  border:1px solid #E0D7CC;box-shadow:0 20px 56px rgba(31,31,31,.13);
  transform-origin:top left;
  color:var(--ink);
}
.pp-app.pp-app-sm{width:760px}
/* z-index: the scene's transformed body would otherwise paint over it */
.pp-appchrome{background:var(--surface);border-bottom:1px solid #E0D7CC;position:relative;z-index:2}
.pp-approw{display:flex;align-items:center;gap:16px;padding:16px 24px 0}
.pp-lk{display:flex;gap:4px;flex-shrink:0}
.pp-lk i{display:block;width:7px;height:24px;border-radius:2.45px}
.pp-lk .pp-b1{background:var(--ink)}.pp-lk .pp-b2{background:var(--sage)}
.pp-lkw{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.28em;
     color:var(--ink);display:flex;flex-direction:column;line-height:1.15}
.pp-lkw em{font-style:normal;font-weight:600;font-size:9px;letter-spacing:.18em;
        text-transform:uppercase;color:#999;margin-top:3px}
.pp-appvr{width:1px;height:26px;background:#E0D7CC}
.pp-appco{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:-.01em;flex:1}
.pp-gear{width:30px;height:30px;border-radius:7px;background:var(--sage-tint);color:var(--sage);
      font-family:var(--disp);font-weight:600;font-size:11.5px;
      display:flex;align-items:center;justify-content:center}
.pp-appnav{display:flex;gap:5px;padding:10px 24px 0}
.pp-nv{font-family:var(--body);font-size:13.5px;font-weight:500;color:#666;
    padding:7px 13px;border-radius:6px;margin-bottom:8px;white-space:nowrap}
.pp-nv.pp-on{font-weight:600;color:var(--sage);background:var(--sage-tint)}
.pp-appbody{padding:32px 24px 38px}
.pp-app-sm .pp-appbody{padding:24px 20px 28px}
.pp-sh{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.pp-sh .pp-shbars{display:flex;gap:2px;flex-shrink:0}
.pp-sh .pp-shbars i{display:block;width:3px;height:11px;border-radius:1px;background:var(--ink)}
.pp-sh .pp-shbars i:last-child{background:var(--sage)}
.pp-sh .pp-shlbl{font-family:var(--body);font-weight:600;font-size:10px;letter-spacing:.1em;
           text-transform:uppercase;color:#666;white-space:nowrap}
.pp-sh .pp-shrule{flex:1;height:1px;background:#E0D7CC}
.pp-appcard{background:var(--surface);border:1px solid #E0D7CC;border-radius:10px;
         box-shadow:0 1px 2px rgba(31,31,31,.045);overflow:hidden}
.pp-appcard .pp-chead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
                padding:18px 24px;border-bottom:1px solid var(--hair)}
.pp-appcard .pp-chead h3{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.012em}
.pp-appcard .pp-chead .pp-note{font-size:12px;color:#666}
.pp-approws .pp-r{display:grid;grid-template-columns:96px 1fr auto auto;gap:18px;align-items:center;
            padding:13px 24px;border-top:1px solid var(--hair)}
.pp-approws .pp-r:first-child{border-top:none}
.pp-appchip{display:inline-flex;align-items:center;justify-content:center;
         font-size:10px;font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:999px}
.pp-appchip.pp-deadline{background:rgba(232,192,97,.18);color:#8A6E3A}
.pp-appchip.pp-routine{background:#F3E8E2;color:var(--clay)}
.pp-appchip.pp-meeting{background:var(--sage-tint);color:var(--sage)}
.pp-appchip.pp-money{background:#F1EDE6;color:var(--ink)}
.pp-approws .pp-t{font-size:14px;color:var(--ink)}
.pp-approws .pp-o{font-size:12.5px;color:#666;white-space:nowrap}
.pp-approws .pp-d{font-size:12.5px;color:#666;white-space:nowrap;font-variant-numeric:tabular-nums}
.pp-approws .pp-d.pp-due{color:#8A6E3A;font-weight:600}
.pp-apptiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:20px 24px 24px}
.pp-app-sm .pp-apptiles{gap:10px;padding:16px 20px 20px}
.pp-apptile{border:1px solid var(--hair);border-radius:8px;padding:16px 16px 14px;display:grid;gap:8px}
.pp-app-sm .pp-apptile{padding:12px 12px 11px}
.pp-app-sm .pp-apptile .pp-fflag{font-size:9.5px;letter-spacing:.08em}
.pp-apptile .pp-fname{font-family:var(--disp);font-weight:600;font-size:13px}
.pp-apptile .pp-fv{font-family:var(--disp);font-weight:500;font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pp-apptile .pp-fk{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#999}
.pp-apptile.pp-drift{background:#FCF6F3;border-color:#E7D3C8}
.pp-apptile.pp-drift .pp-fv{color:var(--clay)}
.pp-apptile .pp-fflag{font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#999}
.pp-apptile.pp-drift .pp-fflag{color:var(--clay)}


/* ---------------- sparklines (used inside the shots) --------------- */
.pp-spark{height:34px;width:100%;overflow:visible}
.pp-spark path{fill:none;stroke:var(--sage);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pp-spark .pp-dot{fill:var(--sage)}
.pp-spark.pp-drift path{stroke:var(--clay)}
.pp-spark.pp-drift .pp-dot{fill:var(--clay)}

/* ------------------ motion inside the product shots ----------------
   The shots play once when scrolled into view, in the product's own
   motion language: rows strike in and stop dead (the shipped row
   entrance, 340ms rise), sparklines draw left to right, counts settle
   with a cubic ease-out. One state change per scene, then nothing.
   Nothing loops, nothing overshoots. */
.pp-shot .pp-approws .pp-r{opacity:0;transform:translateY(9px)}
.pp-shot.pp-play .pp-approws .pp-r{animation:rowin .34s cubic-bezier(.19,1,.22,1) forwards}
@keyframes rowin{to{opacity:1;transform:none}}

.pp-shot .pp-spark path{stroke-dasharray:100;stroke-dashoffset:100}
.pp-shot.pp-play .pp-spark path{animation:sparkdraw .9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes sparkdraw{to{stroke-dashoffset:0}}
.pp-shot .pp-spark .pp-dot{opacity:0}
.pp-shot.pp-play .pp-spark .pp-dot{animation:dotin .28s ease forwards}
@keyframes dotin{to{opacity:1}}

.pp-shot .pp-apptile{opacity:0;transform:translateY(8px)}
.pp-shot.pp-play .pp-apptile{animation:rowin .34s cubic-bezier(.19,1,.22,1) forwards}

/* the drift flag stamps AFTER the figure settles (the variance moment) */
.pp-shot .pp-apptile.pp-drift .pp-fflag{opacity:0}
.pp-shot.pp-play .pp-apptile.pp-drift .pp-fflag{animation:dotin .3s ease 2s forwards}

/* a row that arrives late lands with a sage wash that fades (work arriving) */
@keyframes rowflash{0%{background:var(--sage-tint)}100%{background:transparent}}
.pp-shot.pp-play .pp-approws .pp-r[data-late]{animation:rowin .34s cubic-bezier(.19,1,.22,1) forwards,rowflash 1.6s ease}

/* the binder builds: category rows land one at a time (playShot) */
.pp-shot .pp-b2row{opacity:0;transform:translateY(8px)}
.pp-shot.pp-play .pp-b2row{animation:rowin .34s cubic-bezier(.19,1,.22,1) forwards}

/* ---- the hero scene: the real Control Tower overview, scrolled ----
   Daily brief, financial position, KPIs, the open-tasks strip, then
   Add from a meeting: paste pressed, the recap read (amber sweep),
   commitments found, checks tick, tasks added. Fixed-height window,
   chrome stays put, the body scrolls like the product. States
   pp-s2..pp-s5 run on a timer for [data-scene] shots and LOOP while
   the shot stays in view. */
.pp-app.pp-scene{height:660px}
.pp-scene .pp-appbody{position:relative;transition:transform 1.6s var(--ease)}
/* --scn is computed at play time from the Open tasks header position so
   the scroll always lands on a clean section boundary */
.pp-shot.pp-s2 .pp-scene .pp-appbody{transform:translateY(var(--scn,-838px))}
/* overview elements rise in on play */
.pp-shot .pp-el{opacity:0;transform:translateY(9px)}
.pp-shot.pp-play .pp-el{animation:rowin .34s cubic-bezier(.19,1,.22,1) forwards}
/* daily brief */
.pp-briefcard{padding:20px 24px 22px}
.pp-beyebrow{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8A6E3A}
.pp-beyebrow i{width:7px;height:7px;border-radius:50%;background:var(--sand);display:inline-block}
.pp-bdate{margin-left:auto;color:#999;text-transform:none;letter-spacing:.02em;font-size:12px;font-weight:500}
.pp-bgreet{font-family:var(--disp);font-weight:600;font-size:25px;letter-spacing:-.02em;margin-top:12px}
.pp-btext{font-size:13.5px;line-height:1.6;color:var(--ink-mute);margin-top:8px;max-width:76ch}
/* tabs */
.pp-tabs{display:flex;gap:24px;margin:20px 2px 18px;border-bottom:1px solid var(--hair)}
.pp-tab{font-size:13px;font-weight:500;color:#888;padding-bottom:9px}
.pp-tab-on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
/* financial position cards */
.pp-fingrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.pp-fincard{background:var(--surface);border:1px solid #E0D7CC;border-radius:10px;padding:16px 18px 0;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.pp-finv{font-family:var(--disp);font-weight:500;font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pp-finv.pp-fingood{color:#567C3B}
.pp-finv em{font-style:normal;font-size:14px;font-weight:500;color:#888}
.pp-finsub{font-size:12px;color:#777}
.pp-finbar{height:6px;border-radius:3px;background:var(--sage-tint);margin:8px 0 2px;overflow:hidden;display:block}
.pp-finbar i{display:block;height:100%;border-radius:3px;background:var(--sage)}
.pp-finspark{height:38px;margin:2px 0}
.pp-arrow{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:center;font-size:9px;font-weight:600;letter-spacing:.08em;color:#999}
.pp-arrow i{display:block;height:7px;border-radius:3px;background:var(--sage)}
.pp-arrow i.pp-apb{background:#D9C6BC}
/* foot bands pin to the card bottom so the three cards read equal;
   the band carries the state color (neutral sage-grey, clay warning) */
.pp-finfoot{margin:auto -18px 0;padding:9px 18px 11px;background:#EFF1EC;display:grid;gap:6px;justify-items:start}
.pp-finfoot span{font-size:11px;color:#777}
.pp-finfoot.pp-warn{background:#F6E9E4}
.pp-finfoot.pp-warn span:first-child{color:var(--clay)}
.pp-provchip{font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8A6E3A;background:rgba(232,192,97,.2);border-radius:4px;padding:3px 8px}
/* KPI tiles */
.pp-kpihead{font-size:12px;color:var(--clay);margin:-6px 0 12px}
.pp-kpigrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.pp-kpi{background:var(--surface);border:1px solid #E0D7CC;border-radius:10px;padding:13px 14px;display:grid;gap:6px;align-content:start}
.pp-kv{font-family:var(--disp);font-weight:500;font-size:21px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pp-kt{font-size:10.5px;color:#999}
.pp-kchip{justify-self:start;font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:4px}
.pp-kchip.pp-ok{background:var(--sage-tint);color:var(--sage-deep)}
.pp-kchip.pp-tol{background:rgba(232,192,97,.2);color:#8A6E3A}
/* open tasks numeric strip */
.pp-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:18px 24px 16px}
.pp-stat{display:grid;gap:4px}
.pp-sv{font-family:var(--disp);font-weight:500;font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pp-sv.pp-over{color:var(--clay)}
.pp-stripfoot{padding:10px 24px;background:#F6EEE9;font-size:12px;color:var(--clay);border-top:1px solid var(--hair)}
.pp-stripcard{margin-bottom:24px}
/* Add from a meeting: three stages in one fixed region.
   m1 the resting card (press Paste a recap) · m2 the recap read by the
   amber scan band, committed lines lighting as it passes (the film's
   own motion, 02-meeting) · m3 the items with checked boxes, Add
   pressed, the stamp lands. */
.pp-mwrap{position:relative;height:296px;overflow:hidden}
.pp-mstage{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease)}
.pp-mstage.pp-m1{opacity:1}
.pp-shot.pp-s4 .pp-mstage.pp-m1{opacity:0}
.pp-shot.pp-s4:not(.pp-s5) .pp-mstage.pp-m2{opacity:1}
.pp-shot.pp-s5 .pp-mstage.pp-m3{opacity:1}
.pp-mhead{display:flex;gap:16px;align-items:flex-start;padding:22px 24px 16px}
.pp-mhead .pp-lk i{height:30px;width:8.75px}
.pp-mhead h3{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.014em}
.pp-mhead p{font-size:12.5px;color:#777;margin-top:5px;max-width:54ch}
.pp-mbtn{position:relative;margin-left:auto;flex-shrink:0;display:inline-flex;padding:11px 18px;border-radius:8px;background:var(--sand);color:var(--ink);font-size:13px;font-weight:600}
.pp-shot.pp-s4 .pp-m1 .pp-mbtn{background:var(--sand-deep)}
.pp-mpriv{position:absolute;left:0;right:0;bottom:0;padding:12px 24px;border-top:1px solid var(--hair);font-size:11.5px;color:#888}
.pp-cur{position:absolute;right:-10px;bottom:-10px;width:22px;height:22px;border-radius:50%;background:rgba(31,31,31,.85);border:2px solid #FFF;box-shadow:0 4px 12px rgba(0,0,0,.28);opacity:0;transform:scale(.5);transition:opacity .25s ease,transform .2s ease;pointer-events:none}
.pp-shot.pp-s3 .pp-m1 .pp-cur{opacity:1;transform:scale(1)}
.pp-shot.pp-s4 .pp-m1 .pp-cur{transform:scale(.8);opacity:0;transition-delay:0s,.3s}
/* the recap read: dim lines, the scan band passes, commitments light */
.pp-m2{padding:16px 24px}
.pp-mworkh{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.pp-mworkh h3{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.012em}
.pp-mworkh span{font-size:11.5px;color:#999}
.pp-recap{background:var(--page);border:1px solid var(--hair);border-radius:6px;padding:12px 16px;font-size:12.5px;line-height:1.7;color:var(--ink-mute);position:relative;overflow:hidden}
.pp-ln{opacity:.34;position:relative;padding:2px 112px 2px 0}
@keyframes linehit{to{opacity:1;color:var(--ink)}}
.pp-shot.pp-s4 .pp-ln[data-hit]{animation:linehit .25s ease forwards}
.pp-shot.pp-s4 .pp-ln[data-hit="1"]{animation-delay:.75s}
.pp-shot.pp-s4 .pp-ln[data-hit="2"]{animation-delay:1.65s}
.pp-shot.pp-s4 .pp-ln[data-hit="3"]{animation-delay:2.2s}
/* the read, made visible: the committed phrase highlights in sage and
   a chip stamps at the line's edge as the scan passes it */
.pp-ln b{font-weight:inherit;color:inherit;border-radius:3px;padding:1px 3px;margin:-1px -3px}
@keyframes phrasein{to{background:var(--sage-tint);color:var(--sage-deep)}}
.pp-shot.pp-s4 .pp-ln[data-hit] b{animation:phrasein .35s ease forwards}
.pp-shot.pp-s4 .pp-ln[data-hit="1"] b{animation-delay:.8s}
.pp-shot.pp-s4 .pp-ln[data-hit="2"] b{animation-delay:1.7s}
.pp-shot.pp-s4 .pp-ln[data-hit="3"] b{animation-delay:2.25s}
.pp-lnchip{position:absolute;right:0;top:50%;transform:translateY(-50%) scale(.8);opacity:0;font-family:var(--body);font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--sage-tint);color:var(--sage-deep);padding:3px 8px;border-radius:999px;white-space:nowrap}
@keyframes chipin{to{opacity:1;transform:translateY(-50%) scale(1)}}
.pp-shot.pp-s4 .pp-ln[data-hit="1"] .pp-lnchip{animation:chipin .28s ease .9s forwards}
.pp-shot.pp-s4 .pp-ln[data-hit="2"] .pp-lnchip{animation:chipin .28s ease 1.8s forwards}
.pp-shot.pp-s4 .pp-ln[data-hit="3"] .pp-lnchip{animation:chipin .28s ease 2.35s forwards}
.pp-scan{position:absolute;left:0;right:0;height:56px;top:-56px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(232,192,97,.24),transparent)}
@keyframes scandown{to{transform:translateY(300px)}}
.pp-shot.pp-s4 .pp-scan{animation:scandown 2.4s linear .3s forwards}
/* the items: checked boxes, owner, date, department, then Add */
.pp-mrow{display:grid;grid-template-columns:20px 1fr auto auto auto;gap:14px;align-items:center;padding:10px 24px;border-top:1px solid var(--hair)}
.pp-mrow:first-of-type{border-top:none}
.pp-mrow .pp-t{font-size:14px;color:var(--ink)}
.pp-mrow .pp-o{font-size:12.5px;color:#666;white-space:nowrap}
.pp-mrow .pp-d{font-size:12.5px;color:#666;white-space:nowrap;font-variant-numeric:tabular-nums}
.pp-mbox{width:16px;height:16px;border-radius:3px;background:var(--sage-tint);border:1px solid rgba(100,112,92,.35);display:grid;place-items:center;color:var(--sage);font-size:10px;font-weight:700}
.pp-appchip.pp-dept{background:#F1EDE6;color:#666}
.pp-shot .pp-m3 .pp-mrow{opacity:0;transform:translateY(10px)}
.pp-shot.pp-s5 .pp-m3 .pp-mrow{animation:rowin .3s cubic-bezier(.19,1,.22,1) .1s forwards}
.pp-shot.pp-s5 .pp-m3 .pp-mrow:nth-of-type(2){animation-delay:.28s}
.pp-shot.pp-s5 .pp-m3 .pp-mrow:nth-of-type(3){animation-delay:.46s}
.pp-mact{display:flex;justify-content:flex-end;padding:12px 24px 0}
.pp-shot .pp-mact{opacity:0}
.pp-shot.pp-s5 .pp-mact{animation:dotin .3s ease .7s forwards}
/* once Add is pressed the action row leaves before the stamp covers it */
@keyframes fadeout{to{opacity:0}}
.pp-shot.pp-s7 .pp-mact{animation:fadeout .22s ease .28s forwards}
.pp-shot.pp-s6 .pp-m3 .pp-cur{opacity:1;transform:scale(1)}
.pp-shot.pp-s7 .pp-m3 .pp-cur{transform:scale(.8);opacity:0;transition-delay:0s,.3s}
.pp-shot.pp-s7 .pp-m3 .pp-mbtn{background:var(--sand-deep)}
.pp-mfoot{position:absolute;left:0;right:0;bottom:0;padding:11px 24px;background:var(--sage-tint);font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep)}
.pp-shot .pp-mfoot{opacity:0}
.pp-shot.pp-s7 .pp-mfoot{animation:dotin .35s ease .3s forwards}

@media(prefers-reduced-motion:reduce){
  .pp-shot .pp-approws .pp-r,.pp-shot .pp-apptile,.pp-shot .pp-b2row{opacity:1;transform:none;animation:none !important}
  .pp-ln{opacity:1}
  .pp-shot .pp-apptile.pp-drift .pp-fflag{opacity:1;animation:none !important}
  .pp-shot .pp-spark path{stroke-dashoffset:0;animation:none !important}
  .pp-shot .pp-spark .pp-dot{opacity:1;animation:none !important}
  .pp-shot .pp-el{opacity:1;transform:none;animation:none !important}
  .pp-app.pp-scene{height:auto}
  .pp-scene .pp-appbody{transform:none;transition:none}
  .pp-cur{display:none}
  .pp-time-old{display:none}
  .pp-time-new2{position:static;opacity:1;transform:none}
  .pp-lbl-old{display:none}
  .pp-lbl-new{position:static;opacity:1;transform:none}
  .pp-fly{display:none}
  .pp-gather-bind{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .pp-gb-line{transform:scaleX(1)}
  .pp-gb-foot{opacity:1}
  .pp-strike-res{opacity:1;transform:none}
  .pp-genrow{opacity:1;transform:none}
  .pp-crawl{display:none}
  .pp-strike .pp-cur{display:none}
}

/* --------------- the Audit Binder surface (card three) ------------- */
/* The real Prove screen in miniature: the readiness count, the
   inspector line, and the seven categories with their status pills. */
.pp-binder2{background:var(--surface);color:var(--ink);border:1px solid var(--hair);border-radius:10px;overflow:hidden;box-shadow:0 22px 54px -24px rgba(31,31,31,.28)}
.pp-b2head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--hair)}
.pp-b2head .pp-shbars{display:flex;gap:2px}
.pp-b2head .pp-shbars i{display:block;width:3px;height:11px;border-radius:1px;background:var(--ink)}
.pp-b2head .pp-shbars i:last-child{background:var(--sage)}
.pp-b2head .pp-b2lbl{font-family:var(--body);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#666}
.pp-b2btn{margin-left:auto;background:var(--sand);color:var(--ink);font-size:11px;font-weight:600;padding:7px 12px;border-radius:6px}
.pp-b2sum{padding:15px 18px 13px;border-bottom:1px solid var(--hair)}
.pp-b2sum h4{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.02em;color:var(--sage-deep)}
.pp-b2sum p{font-size:12px;color:var(--ink-dim);margin-top:4px}
.pp-b2row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:9px 18px;border-top:1px solid var(--hair)}
.pp-b2sum + .pp-b2row{border-top:none}
.pp-b2row .pp-b2n{font-size:13px;font-weight:500;color:var(--ink)}
.pp-b2row em{font-style:normal;font-size:10.5px;color:var(--ink-dim)}
.pp-b2pill{grid-row:span 2;justify-self:end;font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.pp-b2pill.pp-ready{background:var(--sage-tint);color:var(--sage-deep)}
.pp-b2pill.pp-attn{background:rgba(232,192,97,.2);color:#8A6E3A}
.pp-b2pill.pp-not{background:#F6E9E4;color:var(--clay)}

/* ------- the prep field: two acts, looping (pp-go via JS) ---------- */
/* Act 1, the old way: the scraps drift and get checked off one at a
   time, One week holding until the last box; the week is struck and
   everything vanishes for a beat. Act 2, the Platform: the tasks
   return already checked in sage, One click takes One week's slot,
   the label becomes the generated-binder line, the Audit Binder
   stands at center; Generate Report is pressed and the tasks fall in
   behind it. Then the loop resets. */
.pp-race{padding:clamp(8px,1.2vh,16px) var(--pad) clamp(56px,9vh,100px)}
.pp-strike{border:1px solid var(--hair);border-radius:14px;background:var(--surface);overflow:hidden}
.pp-lane-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:20px 26px 2px}
.pp-lblwrap{position:relative;flex:1;min-width:0}
.pp-lane-lbl{font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.pp-lbl-old{display:inline-block}
.pp-lbl-new{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(12px);color:var(--sage-deep)}
.pp-timewrap{position:relative}
.pp-lane-time{position:relative;font-family:var(--disp);font-weight:500;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.025em;white-space:nowrap}
.pp-time-old{color:var(--clay);display:inline-block}
.pp-time-old::after{content:"";position:absolute;left:-2%;top:54%;height:2.5px;width:104%;background:var(--clay);opacity:.85;transform:scaleX(0);transform-origin:left}
.pp-time-new2{position:absolute;right:0;top:0;color:var(--sage);opacity:0;transform:translateY(12px)}
@keyframes strikex{to{transform:scaleX(1)}}
@keyframes fadeup{to{opacity:0;transform:translateY(-10px)}}
@keyframes risein{to{opacity:1;transform:translateY(0)}}
@keyframes vanishreturn{0%{opacity:1}30%{opacity:0}75%{opacity:0}100%{opacity:1}}
.pp-strike.pp-go .pp-time-old::after{animation:strikex .35s var(--ease) 7.55s forwards}
.pp-strike.pp-go .pp-time-old{animation:fadeup .35s ease 8.4s forwards}
.pp-strike.pp-go .pp-time-new2{animation:risein .45s var(--ease) 9.35s forwards}
.pp-strike.pp-go .pp-lbl-old{animation:fadeup .3s ease 9.2s forwards}
.pp-strike.pp-go .pp-lbl-new{animation:risein .45s var(--ease) 9.4s forwards}
/* the field: chore scraps drift endlessly, each on its own direction,
   some bleeding past the frame (the week is bigger than the card) */
.pp-gather{position:relative;height:300px;margin:8px 14px 14px;border-radius:10px;background:var(--page);overflow:hidden}
.pp-fly{position:absolute;white-space:nowrap;animation:fl1 7s ease-in-out infinite alternate}
.pp-fly:nth-child(4n+2){animation-name:fl2;animation-duration:8.5s}
.pp-fly:nth-child(4n+3){animation-name:fl3;animation-duration:6.2s}
.pp-fly:nth-child(4n){animation-name:fl4;animation-duration:9.3s}
@keyframes fl1{to{transform:translate(12px,-9px)}}
@keyframes fl2{to{transform:translate(-10px,10px)}}
@keyframes fl3{to{transform:translate(8px,12px)}}
@keyframes fl4{to{transform:translate(-13px,-7px)}}
.pp-fly{z-index:1;opacity:0;transition:opacity .35s ease}
/* scatter positions assume the loaded webfont's metrics; the scraps
   stay held until fonts are in so they never flash at fallback widths */
.pp-fontsin .pp-fly{opacity:1}
.pp-fly i{position:relative;font-style:normal;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-mute);background:var(--surface);border:1px solid var(--hair);border-radius:7px;padding:6px 12px;box-shadow:0 2px 8px rgba(31,31,31,.05);transform:rotate(var(--r,0deg))}
.pp-fly i::before{content:"";width:12px;height:12px;border:1.5px solid var(--hair-firm);border-radius:3px;flex:none}
.pp-fly i::after{content:"\2713";position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:var(--ink-mute);opacity:0}
/* Act 1: checked off one at a time (--c per scrap); Act 2: the boxes
   and checks turn sage, already kept */
@keyframes checkon{to{opacity:1}}
@keyframes tosage{to{color:var(--sage-deep)}}
@keyframes boxsage{to{border-color:var(--sage);background:var(--sage-tint)}}
.pp-strike.pp-go .pp-fly i::after{animation:checkon .18s ease var(--c,1.2s) forwards,tosage .25s ease 9.3s forwards}
.pp-strike.pp-go .pp-fly i::before{animation:boxsage .25s ease 9.3s forwards}
/* the beat (vanish and return) rides the same rule as the pull below */
/* the pull, after the press: slow, from every direction, falling in
   BEHIND the binder (!important beats the inline scatter positions) */
.pp-strike.pp-go .pp-fly{transition:left 1.6s var(--ease) var(--d,11.5s),top 1.6s var(--ease) var(--d,11.5s);left:47% !important;top:46% !important}
.pp-strike.pp-go .pp-fly i{transition:transform 1.6s var(--ease) var(--d,11.5s),opacity .5s ease calc(var(--d,11.5s) + 1.15s);transform:rotate(0deg) scale(.25);opacity:0;animation:vanishreturn 1.35s ease 8.2s}
/* the Audit Binder, first shown as Act 2 opens */
@keyframes binderin{from{opacity:0;transform:translate(-50%,-50%) scale(.55)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes lineon{to{transform:scaleX(1)}}
.pp-gather-bind{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%) scale(.55);opacity:0;display:grid;gap:7px;width:196px;background:var(--surface);border:1px solid var(--hair);border-radius:9px;padding:14px 16px;box-shadow:0 18px 44px -14px rgba(31,31,31,.25)}
.pp-strike.pp-go .pp-gather-bind{animation:binderin .5s var(--ease) 9.35s forwards}
.pp-gb-head{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:600;font-size:13px;color:var(--ink)}
.pp-gb-lk{display:flex;gap:3.4px}
.pp-gb-lk i{display:block;width:4.6px;height:16px;border-radius:1.6px;background:var(--ink)}
.pp-gb-lk i:last-child{background:var(--sage)}
.pp-gb-line{display:block;height:7px;border-radius:3px;background:var(--hair);transform:scaleX(0);transform-origin:left}
.pp-strike.pp-go .pp-gb-line:nth-child(2){animation:lineon .35s var(--ease) 9.65s forwards}
.pp-strike.pp-go .pp-gb-line:nth-child(3){animation:lineon .35s var(--ease) 9.85s forwards}
.pp-strike.pp-go .pp-gb-line:nth-child(4){animation:lineon .35s var(--ease) 10.05s forwards}
.pp-gb-foot{justify-self:start;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--sage-tint);color:var(--sage-deep);padding:3px 9px;border-radius:999px;opacity:0}
.pp-strike.pp-go .pp-gb-foot{animation:checkon .3s ease 10.35s forwards}
@media(max-width:700px){
  .pp-gather{height:auto;display:grid;gap:6px;padding:10px 12px 14px}
  .pp-fly{position:static !important;animation:none}
  /* the binder lands mid-list (faded tasks keep the space, so no dead
     block below) and the tasks fold into it from the ends inward:
     first and last together, then pair by pair toward the center */
  .pp-strike.pp-go .pp-fly i{transition-duration:.6s,.45s}
  .pp-strike.pp-go .pp-fly:nth-child(1) i,.pp-strike.pp-go .pp-fly:nth-child(12) i{transition-delay:11.5s,11.5s}
  .pp-strike.pp-go .pp-fly:nth-child(2) i,.pp-strike.pp-go .pp-fly:nth-child(11) i{transition-delay:11.65s,11.65s}
  .pp-strike.pp-go .pp-fly:nth-child(3) i,.pp-strike.pp-go .pp-fly:nth-child(10) i{transition-delay:11.8s,11.8s}
  .pp-strike.pp-go .pp-fly:nth-child(4) i,.pp-strike.pp-go .pp-fly:nth-child(9) i{transition-delay:11.95s,11.95s}
  .pp-strike.pp-go .pp-fly:nth-child(5) i,.pp-strike.pp-go .pp-fly:nth-child(8) i{transition-delay:12.1s,12.1s}
  .pp-strike.pp-go .pp-fly:nth-child(6) i,.pp-strike.pp-go .pp-fly:nth-child(7) i{transition-delay:12.25s,12.25s}
  /* the foot stacks its two hidden rows on mobile, so the crawl pins
     to the first line - the same spot the result sentence lands in */
  .pp-strike-foot .pp-crawl{top:37px}
}
.pp-strike-foot{position:relative;border-top:1px solid var(--hair);padding:15px 26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pp-strike-res{display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(10px)}
.pp-strike.pp-go .pp-strike-res{animation:risein .45s var(--ease) 9.45s forwards}
.pp-strike-res .pp-dbars{display:flex;gap:3px;flex-shrink:0}
.pp-strike-res .pp-dbars i{display:block;width:5px;height:17px;border-radius:1.8px;background:var(--ink)}
.pp-strike-res .pp-dbars i:last-child{background:var(--sage)}
.pp-strike-res p{font-size:14.5px;color:var(--ink-mute)}
.pp-strike-res b{font-weight:500;color:var(--ink)}
.pp-genrow{display:flex;margin-left:auto;opacity:0;transform:translateY(10px)}
.pp-strike.pp-go .pp-genrow{animation:risein .45s var(--ease) 9.45s forwards}
/* Act 1 foot: the original endless crawl runs here at full strength
   until the result line and the button take over (its text lives here
   as pseudo-content to spare the embed's 10k budget) */
.pp-crawl{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pp-crawl-track{display:inline-block;white-space:nowrap;font-size:14px;color:var(--ink-mute);animation:crawl 52s linear infinite}
.pp-crawl-track::before,.pp-crawl-track::after{content:"Pull license copies from the filing drawer · Find last year's training sign-in sheets · Chase four missing SOP signatures · Rebuild the deadline spreadsheet from email · Search three inboxes for the lab reports · Print new copies for the wall binder · Ask payroll for the applicator cards · Retype the incident log · Reconcile the calendar against the state portal · "}
@keyframes crawl{to{transform:translateX(-50%)}}
.pp-strike.pp-go .pp-crawl{animation:fadeout .35s ease 9.4s forwards}
.pp-genbtn{position:relative;display:inline-flex;padding:11px 18px;border-radius:8px;background:var(--sand);color:var(--ink);font-size:13px;font-weight:600}
@keyframes curshow{to{opacity:1;transform:scale(1)}}
@keyframes curpress{50%{transform:scale(.78);opacity:1}100%{transform:scale(1);opacity:0}}
.pp-strike.pp-go .pp-cur{animation:curshow .25s ease 10.9s forwards,curpress .55s ease 11.4s forwards}
@keyframes btndark{to{background:var(--sand-deep)}}
.pp-strike.pp-go .pp-genbtn{animation:btndark .2s ease 11.45s forwards}

/* ------------------------- never per-seat ------------------------- */
/* An inset rounded slab: the dark block floats on the cream ground,
   the tier cards sit light inside it. */
.pp-bb{
  position:relative;overflow:hidden;
  margin:clamp(12px,2vw,28px);border-radius:clamp(20px,2.6vw,32px);
  padding:clamp(64px,10vh,120px) clamp(20px,4vw,60px);
  background:var(--ink-deep);color:var(--page);
}
.pp-bb .pp-rain{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none}
.pp-bb-inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto}
.pp-bb h2{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(44px,9.4vw,132px);line-height:.95;letter-spacing:-.042em;
  max-width:15ch;
}
.pp-bb h2 .pp-hl{color:var(--sage-lift)}
.pp-bb .pp-lede{
  margin-top:clamp(22px,3.4vh,34px);font-size:clamp(17px,1.5vw,19.5px);
  line-height:1.58;color:var(--cream-72);max-width:56ch;
}
.pp-bb .pp-lede b{color:var(--page);font-weight:500}
.pp-tiers{margin-top:clamp(38px,6vh,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-dark);border:1px solid var(--hair-dark);border-radius:10px;overflow:hidden}
.pp-tier{background:var(--page);color:var(--ink);padding:24px 22px 28px;display:grid;gap:12px;align-content:start}
.pp-tier .pp-bldg{display:flex;gap:4px;align-items:flex-end;height:30px}
.pp-tier .pp-bldg i{width:12px;background:var(--sage);border-radius:1px;display:block}
.pp-tier .pp-ppl{display:flex;flex-wrap:wrap;gap:3px;max-width:210px}
.pp-tier .pp-ppl i{width:6px;height:6px;border-radius:50%;background:var(--sage);opacity:.34;display:block}
.pp-tier h5{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.012em}
.pp-tier p{font-size:13.5px;line-height:1.5;color:var(--ink-mute)}

/* ---------------------------- close ------------------------------- */
.pp-close{padding:clamp(80px,13vh,150px) var(--pad);background:var(--ink-deep);color:var(--page)}
.pp-close-inner{max-width:var(--max);margin:0 auto;display:grid;gap:clamp(30px,5vh,52px)}
.pp-close h2{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(34px,6vw,86px);line-height:1.0;letter-spacing:-.04em;max-width:17ch;
}
.pp-close h2 .pp-hl{color:var(--sage-lift)}
.pp-close-row{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;padding-top:clamp(26px,4vh,42px);border-top:1px solid var(--hair-dark)}
.pp-close-row p{font-size:15.5px;color:var(--cream-72);max-width:44ch}

.pp-foot{padding:28px var(--pad);background:var(--ink-deep);color:var(--cream-52);border-top:1px solid var(--hair-dark)}
.pp-foot-inner{
  max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--body);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
}
.pp-foot .pp-credit{max-width:58ch;text-transform:none;letter-spacing:.02em;font-weight:400;font-size:12px;color:rgba(244,237,228,.4)}
.pp-foot .pp-flinks{display:flex;gap:18px}
.pp-foot .pp-flink{color:var(--cream-52);transition:color .18s var(--ease)}
.pp-foot .pp-flink:hover{color:var(--page)}

/* ---------------------------- reveals ----------------------------- */
.pp-rv{opacity:0;transform:translateY(16px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.pp-rv.pp-in{opacity:1;transform:none}
.pp-rv.pp-d1{transition-delay:.08s}
.pp-rv.pp-d2{transition-delay:.18s}
.pp-rv.pp-d3{transition-delay:.28s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pp-rv{opacity:1;transform:none;transition:none}
  .pp-hero h1 .pp-l{animation:none !important}
  .pp-hero.pp-lit h1 .pp-l{color:var(--page);animation:none !important}
  .pp-hero.pp-lit h1 .pp-period{color:var(--sage-lift);animation:none !important}
  .pp-rain{display:none}
  .pp-play,.pp-pill,.pp-btn-sand,.pp-bars span,.pp-chrome,.pp-chrome-inner,.pp-nav a{transition:none}
}

/* -------------------------- responsive ---------------------------- */
@media(max-width:1000px){
  .pp-tiers{grid-template-columns:1fr}
}
@media(max-width:900px){
  .pp-cardgrid{grid-template-columns:1fr}
  .pp-pcard-duo{grid-template-columns:1fr;gap:26px}
}
/* phones: the bands keep their full-bleed grounds but sit on a tighter
   vertical rhythm, in step with the Home and Direct pages (2026-09-03) */
@media(max-width:700px){
  .pp-hero{padding-bottom:32px}
  .pp-integrations{padding-top:16px;padding-bottom:16px}
  .pp-sec{padding-top:56px;padding-bottom:56px}
  .pp-prod{padding-top:40px;padding-bottom:40px}
  .pp-prod-a{padding-bottom:7px}
  .pp-prod-b{padding-top:7px}
  .pp-race{padding-bottom:60px}
  .pp-bb{padding-top:56px;padding-bottom:56px}
  .pp-close{padding-top:64px;padding-bottom:64px}
}
@media(max-width:760px){
  .pp-nav{position:relative}
  .pp-nav-links,.pp-nav .pp-rule{display:none}
  .pp-menubtn{display:block}
  /* open: the links (Sign in included) drop as a panel under the chrome */
  .pp-chrome.pp-open .pp-nav-links{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;top:calc(100% + 12px);right:0;min-width:200px;
    background:rgba(250,248,245,.98);backdrop-filter:blur(10px);
    border:1px solid var(--hair);border-radius:14px;padding:8px;
    box-shadow:0 18px 44px -12px rgba(31,31,31,.28);
  }
  .pp-chrome.pp-open .pp-nav-links a{color:var(--ink);opacity:1;font-size:15px;padding:11px 14px;border-radius:8px}
  .pp-chrome.pp-open .pp-nav-links a:hover{background:var(--sage-tint)}
  .pp-pill{padding:8px 14px;font-size:13px}
  .pp-hero-foot{flex-direction:column;align-items:flex-start;gap:18px}
  .pp-close-row{flex-direction:column;align-items:flex-start}
}

/* ----------- the cascade (the Home page's Platform beat, 2026-09-07) -----------
   A regulatory event lands, four procedures flag for review one per
   beat with their notes opening, then Assign gives the first flag an
   owner and a date. Three scenes in the 1200px shell on a 16 s loop
   while the block is in view (platform-v2.js, .pp-casblock). Ported
   from the Home page's hm-cas rules; sits where the prep card was. */
.pp-casblock .pp-caskick{display:block;margin-bottom:18px}
.pp-app.pp-cas{position:relative;height:620px;line-height:1.4;text-align:left;--cas-ease:cubic-bezier(.3,.7,.3,1)}
.pp-casbody{position:relative;height:500px}
.pp-casscene{position:absolute;inset:0;padding:36px 24px 0;opacity:0;transform:translateY(14px);transition:opacity .36s var(--cas-ease),transform .52s var(--cas-ease);pointer-events:none}
.pp-casscene.pp-casin{opacity:1;transform:none}
.pp-cascard{background:var(--surface);border:1px solid #E0D7CC;border-radius:10px;box-shadow:0 1px 2px rgba(31,31,31,.045);padding:22px 24px}
.pp-cascard-list{padding:8px 24px 16px}
.pp-caschips{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pp-caschip{display:inline-block;font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 10px;white-space:nowrap}
.pp-caschip.pp-casdim{color:#666;background:#F1EDE6}
.pp-caschip.pp-cassand{color:var(--sand-deep);background:rgba(232,192,97,.18)}
.pp-caschip.pp-casred{color:#C44538;background:rgba(196,69,56,.08)}
.pp-castitle{font-family:var(--disp);font-weight:600;font-size:22px;color:var(--ink);letter-spacing:-.015em;line-height:1.3}
.pp-castitle-sm{font-size:20px}
.pp-casmeta{display:flex;gap:26px;margin-top:16px;font-size:13px;color:#666;flex-wrap:wrap}
.pp-casmeta b{color:#333;font-weight:500}
.pp-cassop{background:var(--surface);border:1px solid #E0D7CC;border-left:3px solid var(--sand);border-radius:6px;padding:14px 16px;margin-top:10px;opacity:0;transform:translateY(14px);transition:opacity .34s var(--cas-ease),transform .34s var(--cas-ease);box-shadow:0 1px 2px rgba(31,31,31,.045)}
.pp-cassop.pp-casin{opacity:1;transform:none}
.pp-cassop .pp-cast{font-size:14px;color:var(--ink);font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:14px}
.pp-cassop .pp-casn{font-size:12px;color:#666;line-height:1.5;margin-top:7px;max-height:0;overflow:hidden;transition:max-height .42s var(--cas-ease)}
.pp-cassop.pp-casopen .pp-casn{max-height:60px}
.pp-casnote{font-size:13px;color:#666;line-height:1.6;margin-top:10px;max-width:640px}
.pp-cashr{height:1px;background:#E0D7CC;margin:20px 0}
.pp-casunowned{display:flex;align-items:center;gap:14px;transition:opacity .2s ease}
.pp-casbtn{font-size:13px;font-weight:600;color:var(--sand-deep);background:rgba(232,192,97,.18);border:1px solid rgba(232,192,97,.3);border-radius:4px;padding:8px 14px;transition:transform .16s ease,background .16s ease}
.pp-casbtn.pp-caspress{transform:scale(.94);background:rgba(232,192,97,.32)}
.pp-casowner{display:flex;align-items:center;gap:12px;margin-top:-32px;opacity:0;transform:translateY(10px);transition:opacity .34s var(--cas-ease),transform .34s var(--cas-ease)}
.pp-casowner.pp-casin{opacity:1;transform:none}
.pp-casava{width:28px;height:28px;border-radius:999px;background:var(--sage-tint);color:var(--sage);display:grid;place-items:center;font-size:12px;font-weight:600}
.pp-casowner b{display:block;font-size:14px;font-weight:500;color:var(--ink)}
.pp-casowner small{display:block;font-size:12px;color:#999}
.pp-casdue{margin-left:auto;font-size:13px;color:#666;font-variant-numeric:tabular-nums}
.pp-casbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#E0D7CC;z-index:3}
.pp-casbar i{position:absolute;inset:0;background:var(--sage);transform:scaleX(0);transform-origin:left}
.pp-casbar i.pp-casrun{animation:ppcasbar var(--cas-len,16s) linear forwards}
@keyframes ppcasbar{to{transform:scaleX(1)}}
.pp-cascap{position:relative;height:34px;margin-top:18px;font-family:var(--disp);font-weight:500;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.pp-cascap span{position:absolute;left:0;top:0;opacity:0;transform:translateY(6px);transition:opacity .42s var(--cas-ease),transform .42s var(--cas-ease)}
.pp-cascap span.pp-casin{opacity:1;transform:none}
.pp-cascap em{font-style:normal;color:var(--sage)}
@media(max-width:700px){.pp-cascap{font-size:17px;height:50px}}
@media(prefers-reduced-motion:reduce){
  .pp-casscene,.pp-cassop,.pp-casowner,.pp-cascap span{transition-duration:1ms !important}
  .pp-casbar i.pp-casrun{animation:none;transform:scaleX(1)}
}