/* ============================================================
   site-product.css - the eight product pages
   (matter-intelligence, vault, draft-studio, assistant, team,
   anonymizer, court-bundles, case-brief .html)
   Loaded after styles/site.css and built only from its tokens:
   frosted glass, brushed metal, graphite for the one primary action,
   a band of light across a card on hover. Light only, grey.
   Small mock-ups of the workspace (a chat, a share sheet, a brief, the
   calendar reading a letter) are drawn here in HTML and CSS; every
   picture and icon in them is a Runway asset.
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────────────────── */
/* the photograph sits above the words on a phone, fading into the grey */
.phero { padding-top: calc(var(--nav-h) + 236px); padding-bottom: 40px; }
/* clip sideways only: site.js drifts the photograph down as the page
   scrolls, and its faded foot must be free to pass the hero's edge */
.phero { overflow-x: clip; overflow-y: visible; }
.phero__bg { opacity: 1; bottom: auto; height: calc(var(--nav-h) + 330px); background-position: 82% 50%; }
/* the photograph and its veil fade out at the foot, so the hero meets the
   studio ground with no edge */
.phero__bg { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.phero__veil { -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 68%, transparent 100%); }
.phero__veil { background: linear-gradient(180deg, rgba(246, 246, 248, 0.5) 0px, rgba(246, 246, 248, 0) 120px); }
.phero h1.pp-h1--long { font-size: clamp(32px, 8.6vw, 40px); line-height: 1.03; background-size: 100% 1.03em; letter-spacing: -0.032em; }
.phero .tile { display: block; }
.phero .tile--lg { margin-bottom: 20px; }
.phero .crumbs { display: none; }
.phero h1 .line { display: inline; }
.phero .lead { margin-top: 20px; }
.phero .btn-row { margin-top: 28px; }
.phero .btn-row .btn { flex: 1 1 auto; }
.phero h1 { max-width: 16em; }
/* The product's name sits inside the heading, as production's pages carry
   it (the heading then names the product for search): a small grey label
   above the headline, untouched by the headline's ink */
.phero h1 .eyebrow { display: flex; width: fit-content; margin-bottom: 22px; font-size: 12px; line-height: 1.2; letter-spacing: 0.16em; color: var(--label-3); -webkit-text-fill-color: var(--label-3); }
.phero h1 .eyebrow .pp-tag { margin-left: 4px; letter-spacing: 0.1em; color: var(--label); -webkit-text-fill-color: var(--label); }
.phero .lead { max-width: 31em; }
.pp-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--label-3); }
.pp-note .g { width: 16px; height: 16px; margin-top: 2px; color: var(--label-2); }
.pp-eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.pp-eyebrow-row .eyebrow { margin-bottom: 0; }
.pp-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  height: 24px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--metal);
  box-shadow: var(--metal-edge);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
}

/* ── The stage: the real UI in a glass frame, tilting up into place ── */
.pp-stage { position: relative; padding-bottom: clamp(24px, 4vw, 48px); }
.pp-fig { margin: 0; }
.pp-stage .pp-mock { max-width: 1180px; margin: 0 auto; }
.pp-tilt.reveal { transform: perspective(1200px) rotateX(10deg) translate3d(0, 32px, 0) scale(0.97); transform-origin: 50% 100%; transition: opacity 1100ms var(--ease), transform 1700ms var(--ease); }
.pp-tilt.reveal.is-in { transform: none; }
/* A scroll story: the workspace's frames (1440 x 900) in a 16:10 frame no
   wider than half their width, so they stay sharp; pinned while they play */
.pp-stage .pp-mock.has-seq, .pp-mock.has-seq { max-width: 720px; }
.pp-mock.has-seq .pp-mock__screen { aspect-ratio: 16 / 10; padding: 0; }
.pp-mock.has-seq .pp-mock__screen > :not(canvas) { display: none; }
.pp-track.has-seq { height: 180vh; }
.pp-track.has-seq .pp-pin { position: sticky; top: var(--nav-h); display: grid; align-content: center;
  height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); }

/* ── Section heads ─────────────────────────────────────────────────── */
.pp-section { position: relative; padding: 72px 0; }
/* A full-bleed Runway photograph behind a section (.pp-photo__bg carries it) */
.pp-photo { isolation: isolate; overflow: hidden; }
.pp-photo__bg { position: absolute; inset: 0; z-index: -2; background-color: #DADDE1; background-position: 50% 55%; background-size: cover; background-repeat: no-repeat; }
.pp-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #E9EAED 0%, rgba(233, 234, 237, 0.5) 18%, rgba(233, 234, 237, 0.28) 50%, rgba(233, 234, 237, 0.5) 82%, #E6E7EA 100%),
    linear-gradient(90deg, rgba(240, 241, 244, 0.72) 0%, rgba(240, 241, 244, 0.2) 55%, rgba(240, 241, 244, 0.06) 100%);
}
.pp-section .head { margin-bottom: clamp(36px, 4.4vw, 64px); }
.pp-section .head .body { margin-top: 18px; max-width: 34em; }
.pp-foot-link { margin-top: 30px; }

/* A band of light across a card on hover */
.pp-shine { overflow: hidden; }
.pp-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.78) 50%, rgba(255, 255, 255, 0) 60%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
}
.pp-shine:hover::after { animation: pp-band 480ms var(--ease-soft) 1 both; }
@keyframes pp-band { 0% { background-position: 130% 0; opacity: 1; } 100% { background-position: -30% 0; opacity: 1; } }

/* The round brushed-metal badge that holds a Runway line glyph */
.pp-badge { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--metal); box-shadow: var(--metal-edge); color: #2E3035; }
.pp-badge .g { width: 21px; height: 21px; }

/* ── Cards ─────────────────────────────────────────────────────────── */
.pp-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pp-card { display: grid; grid-template-columns: 46px 1fr; gap: 0 16px; padding: 22px 20px 24px; border-radius: var(--r-xl); transition: transform 420ms var(--ease), box-shadow 420ms ease; }
.pp-card:hover { transform: translateY(-2px); }
.pp-card .pp-badge { grid-row: span 2; }
.pp-card h3 { margin-top: 0; font-size: 17.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.016em; color: var(--label); }
.pp-card p { margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--label-2); }
.pp-card[id] { scroll-margin-top: calc(var(--nav-h) + 40px); }

/* ── Steps (Matter intelligence: intake to briefing) ────────────────── */
.pp-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pp-step { display: grid; grid-template-columns: 50px 1fr; gap: 0 10px; padding: 18px 18px 20px; border-radius: var(--r-xl); }
.pp-step__n { grid-row: span 2; align-self: start; padding-top: 4px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--label-3); font-variant-numeric: tabular-nums; }
.pp-step__n::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--graphite); box-shadow: var(--graphite-edge); }
.pp-step h3 { margin-top: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--label); }
.pp-step p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--label-2); }

/* ── Flow (How the intelligence works) ─────────────────────────────── */
.pp-flow-panel { padding: 24px 16px; border-radius: var(--r-2xl); }
.pp-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.pp-node { position: relative; padding: 0; }
.pp-node__pill {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--metal);
  box-shadow: var(--metal-edge);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--label);
  text-align: center;
}
.pp-node__pill .g { width: 18px; height: 18px; }
.pp-node--you .pp-node__pill { background: linear-gradient(180deg, #FFFFFF, #F6F7F9); box-shadow: var(--metal-edge), 0 0 0 4px rgba(255, 255, 255, 0.7), 0 0 22px rgba(255, 255, 255, 0.9); }
.pp-node p { margin-top: 12px; padding: 0 4px; font-size: 15px; line-height: 1.55; text-align: center; color: var(--label-2); }
/* the wire between two nodes: down the page on a phone, across it on a wide
   screen, with a slow band of light running along it there */
.pp-node + .pp-node::before {
  content: "";
  position: absolute;
  top: -26px;
  left: 50%;
  width: 2px;
  height: 26px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(90, 93, 99, 0.5), rgba(34, 35, 39, 0.8));
}
.pp-node + .pp-node::after {
  content: "";
  display: none;
  position: absolute;
  top: 29px;
  left: -14px;
  width: 28px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 100%) -28px 0 / 14px 100% no-repeat;
  animation: pp-wire 2600ms var(--ease-soft) infinite;
}
.pp-node:nth-child(3)::after { animation-delay: 650ms; }
.pp-node:nth-child(4)::after { animation-delay: 1300ms; }
@keyframes pp-wire { 0% { background-position: -14px 0; } 60%, 100% { background-position: 28px 0; } }
.pp-engines { display: inline-flex; gap: 4px; margin-left: 2px; }
.pp-engines i { width: 7px; height: 7px; border-radius: 50%; background: var(--graphite); box-shadow: var(--graphite-edge); }

/* ── A mock-up panel ───────────────────────────────────────────────── */
.pp-mock { padding: 6px; border-radius: 20px; }
.split .pp-mock, .split .pp-paper { order: 2; }
.pp-mock__screen { position: relative; border-radius: 15px; overflow: hidden; background: linear-gradient(180deg, #F7F8FA 0%, #EEF0F3 100%); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
.pp-mock__screen > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pp-mock__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.pp-mock__title { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--label); }
.pp-mock__title img { width: 28px; height: 28px; }
.pp-mock__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-mock__body { padding: 16px 14px 18px; }
.pp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--metal);
  box-shadow: var(--metal-edge);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--label);
  white-space: nowrap;
}
.pp-pill .g { width: 13px; height: 13px; }
.pp-pill--dark { background: var(--graphite); box-shadow: var(--graphite-edge); color: #FFFFFF; }
.pp-pill--quiet { background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1); color: var(--label-2); }
.pp-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label-3); }

/* ── A close-up of the workspace, drawn in HTML so it stays sharp ───── */
.pp-ws { padding: clamp(16px, 2.2vw, 26px); }
.pp-ws__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px; margin-bottom: 18px; }
.pp-ws__crumb { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--label-3); }
.pp-ws__crumb .g { width: 12px; height: 12px; }
.pp-ws__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.022em; color: var(--label); }
.pp-ws__meta { margin-top: 4px; font-size: 12.5px; color: var(--label-3); }
.pp-ws__acts { display: none; flex-wrap: wrap; gap: 6px; }
.pp-ws__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.pp-ws__grid > .pp-panel + .pp-panel { display: none; }
.pp-stagetag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(201, 138, 43, 0.12); color: #8A5A12; font-size: 11.5px; font-weight: 600; letter-spacing: 0; }
.pp-stagetag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #D4952F; }
.pp-panel { padding: 16px 18px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.82); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 8px 22px -14px rgba(16, 24, 32, 0.32); }
.pp-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.pp-panel__name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--label); }
.pp-panel__name img { width: 22px; height: 22px; }
.pp-panel__name small { display: none; font-size: 12px; font-weight: 400; color: var(--label-3); }
.pp-panel__acts { display: flex; gap: 6px; }
.pp-panel .pp-pill { height: 26px; padding: 0 11px; font-size: 12px; }
.pp-ana__sum { padding-left: 14px; border-left: 2px solid #D4952F; font-size: 14.5px; line-height: 1.6; color: var(--label); }
.pp-box { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(246, 247, 249, 0.9); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.07); }
.pp-box .pp-label { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.08em; }
.pp-box .pp-label .g { width: 11px; height: 11px; }
.pp-box b { display: block; font-size: 14px; font-weight: 600; color: var(--label); }
.pp-box p { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--label-2); }
.pp-issue { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13.5px; color: var(--label); }
.pp-weight.pp-weight--weak { background: rgba(208, 59, 59, 0.08); color: #9E2B2B; }
.pp-panel__foot { margin-top: 14px; font-size: 12.5px; color: var(--label-3); }
.pp-notes__field { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--field); box-shadow: var(--field-edge); font-size: 13px; color: var(--label-4); }
.pp-notes__field .g { width: 13px; height: 13px; }
.pp-notes li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 0 2px; }
.pp-notes li + li { border-top: 1px solid var(--hair); }
.pp-notes .pp-av { width: 28px; height: 28px; }
.pp-notes .pp-av b { font-size: 10.5px; }
.pp-notes small { display: block; font-size: 11.5px; color: var(--label-3); }
.pp-notes p { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--label); }

/* The Vault, as a list */
.pp-ws__search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--field); box-shadow: var(--field-edge); font-size: 14px; color: var(--label-4); }
.pp-ws__search .g { width: 15px; height: 15px; color: var(--label-3); }
.pp-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 8px; }
.pp-tabs span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; color: var(--label-2); }
.pp-tabs span.is-on { background: var(--metal); box-shadow: var(--metal-edge); color: var(--label); font-weight: 500; }
.pp-vtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pp-vtable th { padding: 10px 10px 8px 0; text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--label-3); }
.pp-vtable td { padding: 10px 10px 10px 0; border-top: 1px solid var(--hair); color: var(--label-2); white-space: nowrap; }
.pp-vtable th:nth-child(n+2):not(:last-child), .pp-vtable td:nth-child(n+2):not(:last-child) { display: none; }
.pp-vtable td:first-child { color: var(--label); font-weight: 500; white-space: normal; }
.pp-vtable td:first-child span { display: flex; align-items: center; gap: 10px; }
.pp-vtable img { width: 24px; height: 24px; flex-shrink: 0; }
.pp-vtable .pp-num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.pp-vtable small { display: block; margin: 2px 0 0; font-size: 11.5px; font-weight: 400; color: var(--label-3); }

/* ── Files (Vault) ─────────────────────────────────────────────────── */
.pp-files { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 18px 8px; border-radius: var(--r-2xl); }
.pp-file { display: grid; justify-items: center; gap: 8px; padding: 4px 0; text-align: center; }
.pp-file img { width: 40px; height: 40px; filter: drop-shadow(0 6px 10px rgba(16, 24, 32, 0.16)); transition: transform 420ms var(--ease); }
.pp-file:hover img { transform: translateY(-3px); }
.pp-file span { font-size: 11.5px; font-weight: 500; color: var(--label-2); }

/* A document read (Document intelligence) */
.pp-doc__meta { margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--label-3); }
.pp-find { display: grid; gap: 10px; margin-top: 16px; }
.pp-find li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 4px 14px -10px rgba(16, 24, 32, 0.3); }
.pp-find .pp-badge { width: 34px; height: 34px; }
.pp-find .pp-badge .g { width: 16px; height: 16px; }
.pp-find b { display: block; font-size: 14px; font-weight: 600; color: var(--label); }
.pp-find b + span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--label-2); }
.pp-mock .chips { margin-top: 0; }
.pp-mock .chip { height: 30px; padding: 0 13px; font-size: 13px; }

/* ── Paper (Draft Studio letterhead, the Case brief) ───────────────── */
.pp-paper {
  position: relative;
  margin: 0 auto;
  padding: 22px 18px;
  border-radius: 6px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFD 100%);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(16, 24, 32, 0.05), 0 30px 60px -24px rgba(16, 24, 32, 0.32);
  color: var(--label);
}
.pp-lh { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--hair-strong); }
.pp-lh__mark { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label); }
.pp-lh__mark i { width: 26px; height: 26px; border-radius: 7px; background: var(--graphite); box-shadow: var(--graphite-edge); }
.pp-lh__addr { display: grid; gap: 6px; justify-items: end; }
.pp-bar { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #E3E5E9, #ECEEF1); }
.pp-lines { display: grid; gap: 11px; margin-top: 18px; }
.pp-paper__text { margin-top: 26px; font-size: 15px; line-height: 1.6; }
.pp-paper__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--hair); }

/* A letter on the firm's letterhead, on the grey desk of Draft Studio */
.pp-ds { padding: clamp(22px, 4vw, 56px) clamp(14px, 5vw, 80px) 0; overflow: hidden; }
.pp-ds__page { max-width: 640px; border-radius: 6px 6px 0 0; }
.pp-ds__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; font-size: 13px; color: var(--label-3); }
.pp-ds__to { margin-top: 18px; font-size: 14.5px; line-height: 1.5; color: var(--label); }
.pp-ds__re { margin-top: 18px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--label); }
.pp-ds .pp-paper__text { margin-top: 12px; }

/* Answers that name where each point came from */
.pp-chatbox { max-width: 860px !important; }
.pp-cites { display: grid; gap: 10px; margin-top: 4px; }
.pp-cites li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 15px; }
.pp-cites li:first-child { padding-top: 2px; border-top: 0; }

/* The Case brief, as a printed page */
.pp-brief__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.pp-brief__conf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--label-3); }
.pp-brief__conf .g { width: 12px; height: 12px; }
.pp-brief h3 { margin-top: 12px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.028em; line-height: 1.1; }
.pp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; border-radius: 12px; background: #F3F4F6; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.07); }
.pp-facts div { padding: 12px 14px; }
.pp-facts div + div { box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.07); }
.pp-facts div:nth-child(3) { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.07); }
.pp-facts div:nth-child(4) { box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(0, 0, 0, 0.07); }
.pp-facts b { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.pp-facts small { display: block; font-size: 12.5px; color: var(--label-3); }
.pp-bsec { display: grid; grid-template-columns: 26px 1fr; gap: 6px 10px; margin-top: 26px; }
.pp-bsec__n { padding-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--label-3); font-variant-numeric: tabular-nums; }
.pp-bsec h4 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.pp-bsec p, .pp-bsec table { grid-column: 2; font-size: 14px; line-height: 1.6; color: var(--label-2); }
.pp-bsec table { width: 100%; border-collapse: collapse; }
.pp-bsec td { padding: 8px 10px 8px 0; border-top: 1px solid var(--hair); vertical-align: top; }
.pp-bsec td:first-child { white-space: normal; color: var(--label); font-weight: 500; }
.pp-bsec td:last-child { display: none; padding-right: 0; text-align: right; white-space: nowrap; color: var(--label-3); }
.pp-weight { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(12, 163, 12, 0.1); color: #157A15; font-size: 11.5px; font-weight: 600; }
.pp-weight--no { background: rgba(208, 59, 59, 0.08); color: #9E2B2B; }
.pp-contents { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; counter-reset: c; }
.pp-contents li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--hair-strong); font-size: 16.5px; color: var(--label); counter-increment: c; }
.pp-contents li::before { content: counter(c, decimal-leading-zero); min-width: 24px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--label-3); font-variant-numeric: tabular-nums; }

/* ── Chat (Assistant) ──────────────────────────────────────────────── */
.pp-chat { display: grid; gap: 16px; padding: clamp(18px, 2.4vw, 28px); }
.pp-chat__q { justify-self: end; max-width: 90%; padding: 12px 18px; border-radius: 20px 20px 6px 20px; background: var(--graphite); box-shadow: var(--graphite-edge); color: #FFFFFF; font-size: 15px; line-height: 1.45; }
.pp-chat__a { max-width: 100%; padding: 16px 18px 18px; border-radius: 6px 20px 20px 20px; background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 6px 18px -12px rgba(16, 24, 32, 0.3); font-size: 15px; line-height: 1.6; color: var(--label); }
.pp-chat__who { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--label-3); }
.pp-chat__who img { width: 22px; height: 22px; }
.pp-chat__src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pp-chat__in { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 50px; margin-top: 6px; padding: 0 7px 0 18px; border-radius: 999px; background: var(--field); box-shadow: var(--field-edge); font-size: 15px; color: var(--label-4); }
.pp-chat__send { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--graphite); box-shadow: var(--graphite-edge); color: #FFFFFF; }
.pp-chat__send .g { width: 16px; height: 16px; }

/* ── Share sheet (Team & sharing) ──────────────────────────────────── */
.pp-stage .pp-share, .pp-share { max-width: 640px; margin: 0 auto; }
.pp-share .pp-mock__body { display: grid; gap: 14px; }
.pp-share__add { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 12px; background: var(--field); box-shadow: var(--field-edge); font-size: 14.5px; color: var(--label-4); }
.pp-share__add .g { width: 16px; height: 16px; color: var(--label-3); }
.pp-people li { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--hair); }
.pp-people li:first-child { border-top: 0; }
.pp-av { position: relative; flex-shrink: 0; width: 36px; height: 36px; }
.pp-av img { width: 100%; height: 100%; }
.pp-av b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: #FFFFFF; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); }
.pp-people__who { flex: 1; min-width: 0; }
.pp-people__who b { display: block; font-size: 14.5px; font-weight: 600; color: var(--label); }
.pp-people__who small { display: block; font-size: 12.5px; color: var(--label-3); }
.pp-share__foot { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--label-3); }
.pp-share__foot .g { width: 14px; height: 14px; }

/* ── Original and protected copy (Anonymiser) ──────────────────────── */
.pp-redact .pp-mock__bar { flex-wrap: wrap; }
.pp-redact .pp-mock__body { padding: clamp(22px, 3.4vw, 40px); }
.pp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 2px rgba(16, 24, 32, 0.1); }
.pp-seg button { white-space: nowrap; height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--label-2); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background 400ms ease, box-shadow 400ms ease, color 400ms ease; }
.pp-seg button[aria-pressed="true"] { background: var(--metal); box-shadow: var(--metal-edge); color: var(--label); }
.pp-redact__text { font-size: 18px; line-height: 1.7; letter-spacing: -0.012em; color: var(--label); }
.pp-x__o { display: none; padding: 0 3px; border-radius: 5px; background: rgba(10, 37, 54, 0.07); }
.pp-x__p { display: inline-block; }
.pp-x.is-o .pp-x__o { display: inline; animation: pp-swap 520ms var(--ease) both; }
.pp-x.is-o .pp-x__p { display: none; }
.pp-x:not(.is-o) .pp-x__p { animation: pp-swap 520ms var(--ease) both; }
@keyframes pp-swap { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.pp-redact__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--label-3); }

/* ── The calendar reading a letter (Court bundles page) ────────────── */
.pp-drop__zone { position: relative; display: grid; place-items: center; min-height: 120px; padding: 18px; border-radius: 16px; border: 1.5px dashed rgba(0, 0, 0, 0.16); background: rgba(255, 255, 255, 0.5); text-align: center; transition: border-color 400ms ease, background 400ms ease; }
.pp-drop__zone small { display: block; margin-top: 6px; font-size: 13px; color: var(--label-3); }
.pp-drop__hint { font-size: 14.5px; font-weight: 500; color: var(--label-2); transition: opacity 300ms ease; }
.pp-drop__file { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 14px 30px -12px rgba(16, 24, 32, 0.4); font-size: 14px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translate(-50%, -150%) rotate(-4deg); transition: opacity 500ms ease, transform 900ms var(--ease); }
.pp-drop__file img { width: 30px; height: 30px; }
.pp-drop__file small { display: block; margin: 0; font-size: 12px; font-weight: 400; color: var(--label-3); }
.pp-drop.is-dropped .pp-drop__zone { border-color: rgba(10, 37, 54, 0.3); background: rgba(255, 255, 255, 0.78); }
.pp-drop.is-dropped .pp-drop__hint { opacity: 0; }
.pp-drop.is-dropped .pp-drop__file { opacity: 1; transform: translate(-50%, -50%); }
.pp-drop__found { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 18px 0 8px; }
.pp-dates li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 2px; border-top: 1px solid var(--hair); opacity: 0; transform: translateY(8px); transition: opacity 500ms ease, transform 600ms var(--ease); }
.pp-dates li.is-in { opacity: 1; transform: none; }
.pp-dates li .pp-pill { grid-column: 2; justify-self: start; height: 24px; font-size: 12px; }
.pp-dates b { display: block; font-size: 14.5px; font-weight: 600; color: var(--label); }
.pp-dates small { display: block; font-size: 12.5px; color: var(--label-3); }
.pp-check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--field); box-shadow: var(--field-edge); color: transparent; transition: background 400ms ease, color 400ms ease, box-shadow 400ms ease; }
.pp-check .g { width: 13px; height: 13px; }
.pp-dates li.is-ticked .pp-check { background: var(--graphite); box-shadow: var(--graphite-edge); color: #FFFFFF; }
.pp-dates li.is-dashed .pp-pill { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); background: transparent; border: 0; outline: 1px dashed rgba(0, 0, 0, 0.25); outline-offset: -1px; }
.pp-drop__acts { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.pp-drop__acts .btn { height: 38px; padding: 0 16px; font-size: 13.5px; }
.pp-drop.is-static .pp-dates li { opacity: 1; transform: none; }

/* The bundle being put together */
.pp-bundle li { display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) auto 16px; gap: 10px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--hair); font-size: 14px; }
.pp-bundle li:first-child { border-top: 0; }
.pp-bundle li > .g { width: 16px; height: 16px; color: var(--label-4); }
.pp-bundle img { width: 26px; height: 26px; }
.pp-bundle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--label); }
.pp-bundle em { font-style: normal; font-size: 12.5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.pp-bundle li > .pp-bundle__ok { width: 15px; height: 15px; color: #157A15; }

/* The bundle builder: the papers in order, and the one PDF they become */
.pp-bb { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; }
.pp-bb__opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pp-bb__art { order: -1; display: grid; justify-items: center; gap: 14px; text-align: center; }
.pp-bb__art img { width: 180px; height: auto; filter: drop-shadow(0 22px 30px rgba(16, 24, 32, 0.28)); }
.pp-bb__art b { display: block; font-size: 15px; font-weight: 600; color: var(--label); }
.pp-bb__art small { display: block; margin-top: 2px; font-size: 13px; color: var(--label-3); }
.phero .tile--art { filter: drop-shadow(0 10px 16px rgba(16, 24, 32, 0.25)); }
.phero .tile--art img { object-fit: contain; }

/* The brief, fading out below the fold of the page */
.pp-paper--fade { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.pp-briefbox { padding: clamp(18px, 3.4vw, 48px) clamp(12px, 4vw, 64px) 0; }
.pp-briefbox .pp-paper { max-width: 760px; }

/* ── The other products, and the close ─────────────────────────────── */
.pp-more .head { margin-bottom: 28px; }
.next a { padding: 12px 14px; }
.next .tile { width: 38px; height: 38px; border-radius: 10px; }
.pp-close-note { margin-top: 18px; font-size: 14.5px; color: var(--label-3); }
/* each page sets its own photograph here, object on the right: no mirror */
.close__bg { transform: none; background-position: 72% 55%; }

/* ── Scroll motion (html.pp-anim, set by site-product.js) ──────────────
   Transform and opacity only. Without the class (reduced motion, no
   script) nothing here applies and every page is still. */
@keyframes pp-rise-in { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes pp-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* The hero: the photograph fades up while site-product.js settles its
   scale; then each part rises in turn */
.pp-anim .phero__bg { animation: pp-fade-in 1600ms ease both; will-change: transform; }
.pp-anim .phero .crumbs, .pp-anim .phero .tile,
.pp-anim .phero .lead, .pp-anim .phero .pp-note, .pp-anim .phero .btn-row { animation: pp-rise-in 1100ms var(--ease) both; animation-delay: var(--hd, 0ms); }
/* the headline itself rises word by word (scripts/site.js splits every .display heading) */
.phero .crumbs { --hd: 80ms; }
.phero .tile { --hd: 160ms; }
.phero .lead { --hd: 660ms; }
.phero .pp-note { --hd: 740ms; }
.phero .btn-row { --hd: 820ms; }

/* The close-ups: tilted and lower as they come in, flat in the middle of
   the window (the transform is written by site-product.js). The glass is
   near opaque here, so the blur is dropped to keep the motion at 60fps. */
.pp-anim .pp-depth { opacity: 0; transform-origin: 50% 100%; will-change: transform, opacity; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pp-anim .pp-late { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.94); transition: opacity 500ms ease, transform 650ms var(--ease); transition-delay: calc(160ms + var(--i, 0) * 70ms); }
.pp-anim .pp-depth.is-live .pp-late { opacity: 1; transform: none; }

/* Tiles, steps and lists: each rises in turn */
.pp-anim .pp-rise { opacity: 0; transform: translate3d(0, 30px, 0); }
.pp-anim .pp-rise.is-in { opacity: 1; transform: none; transition: opacity 900ms var(--ease), transform 1100ms var(--ease); transition-delay: var(--d, 0ms); }

/* The bundle builder: each row ticks and takes its pages, then the PDF settles */
.pp-anim .pp-bundle li { opacity: 0.45; transition: opacity 500ms ease; }
.pp-anim .pp-bundle li em, .pp-anim .pp-bundle li > .pp-bundle__ok { opacity: 0; transform: translate3d(5px, 0, 0); transition: opacity 450ms ease, transform 550ms var(--ease); }
.pp-anim .pp-bundle li.is-done { opacity: 1; }
.pp-anim .pp-bundle li.is-done em, .pp-anim .pp-bundle li.is-done > .pp-bundle__ok { opacity: 1; transform: none; }
.pp-anim .pp-bb__art img { opacity: 0; transform: translate3d(0, -30px, 0) rotate(-7deg) scale(1.06); transition: opacity 700ms ease, transform 1100ms cubic-bezier(0.2, 0.9, 0.25, 1.12); }
.pp-anim .pp-bb__art > span { opacity: 0; transition: opacity 600ms ease 350ms; }
.pp-anim .pp-bb.is-built .pp-bb__art img, .pp-anim .pp-bb.is-built .pp-bb__art > span { opacity: 1; transform: none; }

/* The closing photograph: a slow zoom, running only while it is in view */
@keyframes pp-kb { from { scale: 1; translate: 0 0; } to { scale: 1.1; translate: -2% -1.5%; } }
.pp-anim .close__bg { animation: pp-kb 26s ease-in-out infinite alternate; animation-play-state: paused; will-change: scale, translate; }
.pp-anim .close.is-live .close__bg { animation-play-state: running; }

/* ── Responsive ────────────────────────────────────────────────────── */
/* Mobile first (api/tests/test_css_mobile_first.py): every rule above is the
   phone's; a tablet and a desktop add to it here, at 600, 900 and 1200 px.
   Values that site.css owns (the hero's padding, .next a) are restated
   where the phone changed them. */
@media (min-width: 600px) {
  .phero { padding-top: calc(var(--nav-h) + 110px); padding-bottom: clamp(48px, 6vw, 88px); }
  .phero__bg { bottom: 0; height: auto; background-position: 70% 50%; -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 68%, transparent 100%); }
  .phero__veil { background: linear-gradient(90deg, rgba(238, 239, 242, 0.96) 0%, rgba(238, 239, 242, 0.84) 36%, rgba(238, 239, 242, 0.3) 62%, rgba(238, 239, 242, 0) 80%), linear-gradient(180deg, rgba(246, 246, 248, 0.55) 0%, rgba(246, 246, 248, 0) 22%); }
  .phero h1.pp-h1--long { font-size: clamp(34px, 3.3vw, 56px); }
  .phero .tile--lg { margin-bottom: 26px; }
  .phero .crumbs { display: flex; }
  .phero h1 .line { display: block; }
  .phero .lead { margin-top: 28px; }
  .phero .btn-row { margin-top: 38px; }
  .phero .btn-row .btn { flex: 0 1 auto; }
  .pp-note { align-items: center; font-size: 14.5px; }
  .pp-note .g { margin-top: 0; }
  .pp-tilt.reveal { transform: perspective(2000px) rotateX(13deg) translate3d(0, 56px, 0) scale(0.95); }

  .pp-section { padding: clamp(64px, 8vw, 120px) 0; }
  .pp-section--tight { padding: clamp(48px, 6vw, 80px) 0; }
  .pp-photo--tall { padding: clamp(110px, 14vw, 220px) 0; }
  .pp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pp-card { display: block; padding: 28px 28px 30px; }
  .pp-card h3 { margin-top: 22px; font-size: 19px; }
  .pp-card p { margin-top: 8px; font-size: 15px; }
  .pp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .pp-step { display: block; padding: 24px 22px 28px; }
  .pp-step__n { padding-top: 0; }
  .pp-step h3 { margin-top: 44px; font-size: 22px; }
  .pp-step p { margin-top: 8px; font-size: 15px; }
  .pp-flow-panel { padding: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 40px); }
  .pp-node__pill { height: 62px; font-size: 15.5px; }

  .pp-mock { padding: 9px; border-radius: 26px; }
  .pp-mock__screen { border-radius: 18px; }
  .pp-mock__bar { padding: 14px 18px; }
  .pp-mock__body { padding: 20px 18px 22px; }
  .pp-ws__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .pp-ws__grid > .pp-panel + .pp-panel { display: block; }
  .pp-ws__acts { display: flex; }
  .pp-panel__name small { display: inline; }
  .pp-vtable th:nth-child(n+2):not(:last-child), .pp-vtable td:nth-child(n+2):not(:last-child) { display: table-cell; }
  .pp-vtable td:first-child { white-space: nowrap; }
  .pp-vtable small { display: inline; margin: 0 0 0 8px; }
  .pp-files { gap: 10px; padding: clamp(22px, 3vw, 36px); }
  .pp-file { gap: 12px; padding: 8px 4px; }
  .pp-file img { width: 48px; height: 48px; }
  .pp-file span { font-size: 14px; }

  .pp-paper { padding: clamp(24px, 3.6vw, 48px); }
  .pp-ds__page { padding-bottom: clamp(36px, 5vw, 64px); }
  .pp-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp-facts div:nth-child(3), .pp-facts div:nth-child(4) { box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.07); }
  .pp-bsec { grid-template-columns: 34px 1fr; }
  .pp-bsec td:first-child { white-space: nowrap; }
  .pp-bsec td:last-child { display: table-cell; }
  .pp-chat__q { max-width: 82%; font-size: 15.5px; }
  .pp-chat__a { max-width: 94%; font-size: 15.5px; }
  .pp-redact__text { font-size: clamp(19px, 1.9vw, 26px); line-height: 1.75; }
  .pp-seg button { font-size: 13px; }
  .pp-bb { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
  .pp-bb__art { order: 0; }
  .pp-bb__art img { width: min(100%, 300px); }
  .pp-dates li { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .pp-dates li .pp-pill { grid-column: auto; justify-self: auto; height: 28px; font-size: 12.5px; }
  .next a { padding: 16px; }
  .next .tile { width: 44px; height: 44px; border-radius: 12px; }
}
@media (min-width: 900px) {
  .pp-track.has-seq { height: 220vh; }
  .pp-seg button { height: 34px; }
  .pp-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .pp-node { padding: 0 12px; }
  .pp-node p { margin-top: 18px; }
  .pp-node + .pp-node::before { top: 30px; left: -14px; width: 28px; height: 2px; background: linear-gradient(90deg, rgba(90, 93, 99, 0.5), rgba(34, 35, 39, 0.8)) 0 0 / 100% 100% no-repeat; }
  .pp-node + .pp-node::after { display: block; }
  .pp-contents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split .pp-mock, .split .pp-paper { order: 0; }
}
@media (min-width: 1200px) {
  .pp-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pp-cards:not(.pp-cards--2) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .pp-tilt.reveal { transform: none; }
  .pp-node + .pp-node::after { display: none; }
  .pp-dates li { opacity: 1; transform: none; }
}