/* 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)}
}

/* ------------------------------------------------------------------
   Nav right-side pair (2026-09-09, matched to /pricing): Sign in stays
   a quiet text link, then the rule, then Pricing as an outline pill
   beside the sand walkthrough pill. On phones the pair and Sign in
   fold into the menu panel through the .pp-m duplicates.
   ------------------------------------------------------------------ */
.pp-nav-right{display:flex;align-items:center;gap:8px}
.pp-nav-right .pp-rule{margin-right:12px}
.pp-nav .pp-signin{margin-right:12px;opacity:.62}
.pp-nav .pp-navpill{
  padding:10px 18px;border-radius:999px;border:1px solid rgba(244,237,228,.45);
  color:var(--page);font-weight:500;font-size:14px;opacity:1 !important;
  transition:border-color .18s var(--ease),color .3s var(--ease);
}
.pp-nav .pp-navpill:hover{border-color:var(--page)}
.pp-chrome.pp-scrolled .pp-nav .pp-navpill{border-color:var(--hair-firm);color:var(--ink)}
.pp-chrome.pp-scrolled .pp-nav .pp-navpill:hover{border-color:var(--ink)}
.pp-m{display:none}
/* Option B (2026-09-09): Pricing and the walkthrough share one capsule.
   The left segment is quiet (cream on dark, ink on the scrolled capsule),
   the right segment is the sand pill; one hairline between them. */
.pp-nav .pp-joined{display:flex;border-radius:999px;overflow:hidden;border:1px solid rgba(244,237,228,.45);transition:border-color .3s var(--ease)}
.pp-chrome.pp-scrolled .pp-nav .pp-joined{border-color:var(--sand)}
.pp-nav .pp-jseg{display:flex;align-items:center;padding:0 18px;color:var(--page);opacity:1 !important;font-weight:500;font-size:14px;border-right:1px solid rgba(244,237,228,.3);transition:color .3s var(--ease),border-color .3s var(--ease),background .18s var(--ease)}
.pp-nav .pp-jseg:hover{background:rgba(244,237,228,.08)}
.pp-chrome.pp-scrolled .pp-nav .pp-jseg{color:var(--ink);border-right-color:var(--sand)}
.pp-chrome.pp-scrolled .pp-nav .pp-jseg:hover{background:var(--sage-tint)}
.pp-nav .pp-joined .pp-pill{border-radius:0}
@media(max-width:760px){
  .pp-nav-right .pp-signin,.pp-nav-right .pp-rule,.pp-nav .pp-navpill,.pp-nav .pp-jseg{display:none}
  .pp-chrome.pp-open .pp-nav-links .pp-m{display:block}
}

/* floor price under the never-per-seat tiers (2026-09-09) */
.pp-bb-price{margin-top:28px;font-size:15px;line-height:1.5;color:var(--cream-72)}
.pp-bb-price b{color:var(--page);font-weight:600}
.pp-bb-price a{color:var(--sage-lift);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(143,161,128,.5)}
.pp-bb-price a:hover{text-decoration-color:var(--sage-lift)}

/* phone chrome (2026-09-10): the bar must hold the wordmark, the sand
   pill, and the menu button inside 375px. Tighter padding, a smaller
   pill that never wraps, the capsule inset from the edges, and the
   "· Platform" tag hidden on the narrowest phones. */
@media(max-width:760px){
  .pp-chrome-inner{padding:12px 14px}
  .pp-chrome.pp-scrolled .pp-chrome-inner{margin:8px 10px 0;padding:8px 14px}
  .pp-nav{gap:12px}
  .pp-nav .pp-pill{padding:9px 13px;font-size:13px;white-space:nowrap}
  .pp-nav .pp-joined{border-color:transparent}
}
@media(max-width:420px){
  .pp-wordmark .pp-tag{display:none}
}