/* Personal injury law firm marketing: the weekend docket. Page-scoped styles (pi-). */
.pi-page {
  --pi-desk: #ece8de;
  --pi-paper: #f7f5ef;
  --pi-sheet: #fffefb;
  --pi-ink: #1a1c21;
  --pi-soft: #4d515a;
  --pi-muted: #6b6f77;
  --pi-rule: #d9d4c6;
  --pi-oxblood: #8c2331;
  --pi-oxblood-deep: #6c1824;
  --pi-oxblood-wash: #f4e1e1;
  --pi-green: #1d5a47;
  --pi-green-deep: #154436;
  --pi-green-wash: #e0ebe4;
  --pi-pad: #fbf3c6;
  --pi-pad-line: #c9d8e6;
  --pi-pen: #24407a;
  --pi-night: #14171d;
  --pi-night-2: #1f242d;
  --pi-hazard: #f2a23a;
  color: var(--pi-ink);
  background: var(--pi-paper);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.65;
  overflow: clip;
}
.pi-page *,
.pi-page *::before,
.pi-page *::after { box-sizing: border-box; }
.pi-page :where(h1, h2, h3, p, ol, ul, figure, dl, dd) { margin: 0; }
.pi-page :where(ol, ul) { padding: 0; list-style: none; }
.pi-page ::selection { background: var(--pi-oxblood); color: #fff; }
.pi-page a:focus-visible,
.pi-page summary:focus-visible,
.pi-page [tabindex]:focus-visible {
  outline: 2px solid var(--pi-oxblood);
  outline-offset: 4px;
}
.pi-page section[id] { scroll-margin-top: 130px; }
.pi-wrap { width: min(100% - 80px, 1280px); margin-inline: auto; }
.pi-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pi-page h1, .pi-page h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.pi-page h2 { font-size: clamp(2.2rem, 3.6vw, 3.7rem); line-height: 1.05; }
.pi-page h1 em, .pi-page h2 em { font-style: italic; }
.pi-page h3 { font-size: 1.08rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; }
.pi-section { padding: clamp(72px, 9vw, 120px) 0; }
.pi-section p { max-width: 68ch; }
.pi-page p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.pi-page p a:hover { color: var(--pi-oxblood); }
.pi-tie { margin-top: 26px; font-weight: 500; }

/* Buttons and quiet links */
.pi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.pi-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--pi-oxblood);
  color: #fff;
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  box-shadow: 0 8px 20px -10px rgba(108, 24, 36, 0.75);
  transition: background-color 160ms ease-out, transform 160ms ease-out;
}
.pi-button:hover { background: var(--pi-oxblood-deep); transform: translateY(-1px); }
.pi-quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--pi-ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: rgba(26, 28, 33, 0.3);
  text-underline-offset: 5px;
}
.pi-quiet-link:hover { text-decoration-color: currentColor; }
.pi-close .pi-quiet-link { color: #eceae4; text-decoration-color: rgba(236, 234, 228, 0.35); }

/* Hero: the Monday-morning desk */
.pi-hero-shell {
  background: linear-gradient(180deg, #e3dfd3 0%, var(--pi-desk) 50%, #efece4 100%);
  padding-top: 101px;
  border-bottom: 1px solid var(--pi-rule);
}
.pi-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 28px; font-size: 12.5px; color: var(--pi-soft); }
.pi-breadcrumb a { color: inherit; text-decoration: none; }
.pi-breadcrumb a:hover { color: var(--pi-ink); }
.pi-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 4.5vw, 72px);
  align-items: start;
  padding: clamp(28px, 3.5vw, 48px) 0 clamp(60px, 7vw, 96px);
}
.pi-hero-copy { position: sticky; top: 104px; padding-top: 8px; }
.pi-hero h1 { font-size: clamp(2.7rem, 4.2vw, 4.2rem); line-height: 1; }
.pi-hero .h1-kicker { color: var(--pi-oxblood); }
.pi-h1-line { display: block; }
.pi-hero h1 em { display: block; color: var(--pi-green); }
.pi-lede { margin-top: 20px; max-width: 54ch; font-size: 1.1rem; line-height: 1.6; color: #2a2d33; }
.pi-price {
  display: grid;
  gap: 4px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 28, 33, 0.16);
  max-width: 540px;
}
.pi-price span { font-size: 1rem; }
.pi-price strong { font-weight: 700; margin-right: 6px; }
.pi-price small { font-size: 13px; color: var(--pi-soft); }
.pi-hero-copy .pi-actions { margin-top: 22px; }

/* The weekend docket */
.pi-docket {
  position: relative;
  min-width: 0;
  padding: 26px 26px 20px;
  background: var(--pi-sheet);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(26, 28, 33, 0.05), 0 26px 50px -30px rgba(40, 34, 20, 0.5);
}
.pi-docket-head {
  position: relative;
  padding-bottom: 14px;
  border-bottom: 3px double var(--pi-ink);
}
.pi-docket-title { font-family: var(--font-serif); font-size: 1.55rem; line-height: 1.1; letter-spacing: -0.01em; }
.pi-docket-range { margin-top: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pi-muted); }
.pi-stamp {
  position: absolute;
  right: 4px;
  top: -6px;
  padding: 6px 12px;
  border: 2px solid var(--pi-oxblood);
  border-radius: 4px;
  color: var(--pi-oxblood);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-6deg);
  opacity: 0.85;
}
.pi-docket-scroll { overflow-x: auto; }
.pi-docket-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.pi-docket-table thead th {
  padding: 12px 10px 8px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--pi-muted);
  border-bottom: 1px solid var(--pi-ink);
}
.pi-docket-table thead th:last-child { color: var(--pi-green); }
.pi-docket-table td, .pi-docket-table tbody th {
  padding: 11px 12px 11px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--pi-rule);
  font-weight: 400;
}
.pi-no { width: 34px; font-family: var(--font-serif); font-size: 1.05rem; color: var(--pi-muted); font-variant-numeric: tabular-nums; }
.pi-call { width: 32%; }
.pi-when, .pi-matter, .pi-detail { display: block; }
.pi-when { font-size: 12px; font-weight: 700; color: var(--pi-oxblood); font-variant-numeric: tabular-nums; }
.pi-matter { font-weight: 700; }
.pi-detail { color: var(--pi-soft); }
.pi-out { width: 29%; color: var(--pi-muted); }
.pi-in { color: var(--pi-ink); }
.pi-route {
  display: inline-block;
  margin-bottom: 3px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.pi-route-consult { background: var(--pi-green-wash); color: var(--pi-green-deep); }
.pi-route-attorney { background: var(--pi-oxblood-wash); color: var(--pi-oxblood-deep); }
.pi-route-message { background: #e5e8ef; color: #2e3d5c; }
.pi-route-declined { background: #ecebe6; color: #4d4d48; }
.pi-in .pi-route { display: table; }
.pi-docket-foot { display: grid; gap: 4px; margin-top: 14px; font-size: 13.5px; }
.pi-docket-foot p:first-child { color: var(--pi-muted); }
.pi-docket-foot p:last-child strong { color: var(--pi-green); }
.pi-docket figcaption { margin-top: 10px; font-size: 12.5px; color: var(--pi-muted); }

/* Jump nav */
.pi-jump {
  position: sticky;
  top: 72px;
  z-index: 5;
  background: rgba(247, 245, 239, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--pi-rule);
}
.pi-jump .pi-wrap { display: flex; gap: 26px; overflow-x: auto; padding: 14px 0; scrollbar-width: none; }
.pi-jump a { flex: none; font-size: 13.5px; font-weight: 600; color: var(--pi-soft); text-decoration: none; }
.pi-jump a:hover { color: var(--pi-oxblood); }

/* The 168-hour week: a night band */
.pi-week { background: var(--pi-night); color: #dcdad3; }
.pi-week-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.pi-week h2 { color: #f6f4ee; }
.pi-week h2 em { color: var(--pi-hazard); }
.pi-week-copy p { margin-top: 18px; color: #c4c3bd; }
.pi-week-copy .pi-tie { color: #f0eee7; }
.pi-week-copy .pi-tie a:hover { color: var(--pi-hazard); }
.pi-week-figure { display: grid; gap: 0; border-radius: 12px; overflow: hidden; background: var(--pi-night-2); }
.pi-week-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pi-week-chart { padding: 20px 22px 18px; }
.pi-week-svg { display: block; width: 100%; height: auto; }
.pi-week-day { font: 600 12px var(--font-sans); fill: #a9a8a2; }
.pi-week-tick { font: 500 11px var(--font-sans); fill: #8d8c86; }
.pi-week-off { fill: #2b313b; }
.pi-week-on { fill: #d9d3c1; }
.pi-week-call { fill: var(--pi-hazard); stroke: var(--pi-night-2); stroke-width: 2; }
.pi-week-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 10px; font-size: 12.5px; color: #b5b4ae; }
.pi-key { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
.pi-key-on { background: #d9d3c1; }
.pi-week-key > span { display: inline-flex; align-items: center; gap: 8px; }
.pi-key-call { width: 11px; height: 11px; border-radius: 50%; background: var(--pi-hazard); }

/* Message vs memo */
.pi-line-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: end; }
.pi-line-head p { color: var(--pi-soft); }
.pi-handover { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.pi-slip { padding: 22px 22px 18px; border-radius: 10px; background: #e7e5de; }
.pi-slip-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pi-muted); }
.pi-slip-text {
  margin-top: 14px;
  padding: 16px;
  border-radius: 6px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  word-break: break-word;
}
.pi-slip figcaption { margin-top: 14px; font-size: 14.5px; color: var(--pi-soft); }
.pi-memo {
  padding: clamp(24px, 3vw, 36px);
  background: var(--pi-sheet);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(26, 28, 33, 0.05), 0 22px 44px -30px rgba(40, 34, 20, 0.45);
}
.pi-memo-kind { font-family: var(--font-serif); font-size: 1.9rem; letter-spacing: 0.12em; text-transform: uppercase; }
.pi-memo-head dl { display: grid; gap: 3px; margin-top: 14px; padding-bottom: 14px; border-bottom: 3px double var(--pi-ink); font-size: 14.5px; }
.pi-memo-head dl > div, .pi-memo-body > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.pi-memo-head dt { font-weight: 700; }
.pi-memo-body { display: grid; margin-top: 8px; font-size: 15px; }
.pi-memo-body > div { padding: 9px 0; border-bottom: 1px solid var(--pi-rule); }
.pi-memo-body dt { font-weight: 700; color: var(--pi-soft); font-size: 13.5px; padding-top: 1px; }
.pi-memo-first { background: var(--pi-pad); margin: 0 -12px; padding-left: 12px !important; padding-right: 12px !important; border-radius: 4px; }
.pi-memo-first dt { color: var(--pi-oxblood-deep); }
.pi-memo figcaption { margin-top: 12px; font-size: 13px; color: var(--pi-muted); }

.pi-three { margin-top: clamp(64px, 8vw, 104px); }
.pi-page .pi-three-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.1; letter-spacing: -0.02em; }
.pi-three-lede { margin-top: 14px; color: var(--pi-soft); }
.pi-table-scroll { margin-top: clamp(28px, 4vw, 44px); overflow-x: auto; }
.pi-three-table, .pi-source-table, .pi-ethics-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; }
.pi-three-table th, .pi-three-table td,
.pi-source-table th, .pi-source-table td,
.pi-ethics-table th, .pi-ethics-table td { padding: 15px 18px 15px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pi-rule); }
.pi-three-table thead th, .pi-source-table thead th, .pi-ethics-table thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pi-soft);
  border-bottom: 2px solid var(--pi-ink);
}
.pi-three-table tbody th { width: 20%; font-weight: 700; }
.pi-three-table .pi-ours { padding-left: 16px; background: var(--pi-green-wash); color: var(--pi-green-deep); font-weight: 500; }
.pi-three-table thead .pi-ours { color: var(--pi-green-deep); }
.pi-models { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 22px; font-size: 14px; }
.pi-models > p { font-weight: 700; }
.pi-models ul { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.pi-models li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pi-models li span { font-weight: 400; color: var(--pi-soft); }
.pi-model-openai { border-radius: 4px; }

/* The intake script on a legal pad */
.pi-script-section { background: var(--pi-desk); }
.pi-script-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.pi-script-intro { position: sticky; top: 140px; }
.pi-script-intro > p { margin-top: 18px; color: #33363c; }
.pi-never { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(26, 28, 33, 0.2); }
.pi-never ul { display: grid; gap: 12px; margin-top: 12px; }
.pi-never li { display: grid; gap: 1px; font-size: 15px; }
.pi-never s { color: var(--pi-oxblood); text-decoration-thickness: 1.5px; font-family: var(--font-serif); font-size: 1.12rem; }
.pi-never span { color: #33363c; }
.pi-script {
  position: relative;
  padding: 44px clamp(20px, 3vw, 36px) 28px clamp(64px, 7vw, 88px);
  border-radius: 4px;
  background-color: var(--pi-pad);
  background-image:
    linear-gradient(90deg, transparent calc(clamp(52px, 6vw, 72px) - 1px), rgba(196, 72, 72, 0.55) calc(clamp(52px, 6vw, 72px) - 1px), rgba(196, 72, 72, 0.55) clamp(52px, 6vw, 72px), transparent clamp(52px, 6vw, 72px)),
    repeating-linear-gradient(180deg, transparent 0, transparent 31px, var(--pi-pad-line) 31px, var(--pi-pad-line) 32px);
  box-shadow: 0 1px 0 rgba(26, 28, 33, 0.05), 0 24px 44px -30px rgba(60, 50, 10, 0.5);
}
.pi-script::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 22px;
  border-radius: 4px 4px 0 0;
  background: #7d2a2a;
}
.pi-script li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: 6px 22px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(36, 64, 122, 0.18);
}
.pi-script li:last-child { border-bottom: 0; }
.pi-para {
  position: absolute;
  left: calc(-1 * clamp(56px, 6.5vw, 80px));
  top: 15px;
  width: clamp(40px, 4.8vw, 56px);
  text-align: right;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--pi-oxblood);
  font-variant-numeric: tabular-nums;
}
.pi-ask { font-family: var(--font-serif); font-size: 1.22rem; line-height: 1.3; }
.pi-then { margin-top: 4px; font-size: 15px; color: #2c2f35; }
.pi-why { font-size: 13.5px; line-height: 1.5; color: var(--pi-pen); font-style: italic; padding-top: 4px; }
.pi-why a { color: inherit; }

/* Case criteria flow */
.pi-criteria-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: end; }
.pi-criteria-head p { color: var(--pi-soft); }
.pi-flow { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 0; margin-top: clamp(40px, 5vw, 64px); align-items: center; }
.pi-flow-in {
  position: relative;
  padding: 22px 24px;
  border-radius: 12px;
  background: var(--pi-ink);
  color: #eceae4;
  margin-right: 44px;
}
.pi-flow-in::after { content: ""; position: absolute; right: -44px; top: 50%; width: 44px; height: 1.5px; background: var(--pi-ink); }
.pi-flow-label { font-family: var(--font-serif); font-size: 1.45rem; color: #fff; }
.pi-flow-in p:last-child { margin-top: 6px; font-size: 14.5px; color: #c9c7c0; }
.pi-flow-out { position: relative; display: grid; gap: 12px; padding-left: 36px; }
.pi-flow-out::before { content: ""; position: absolute; left: 0; top: 36px; bottom: 36px; width: 1.5px; background: var(--pi-ink); }
.pi-dest {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 22px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--pi-sheet);
  box-shadow: 0 1px 0 rgba(26, 28, 33, 0.06), 0 12px 28px -24px rgba(40, 34, 20, 0.5);
}
.pi-dest::before { content: ""; position: absolute; left: -36px; top: 50%; width: 36px; height: 1.5px; background: var(--pi-ink); }
.pi-dest::after { content: ""; position: absolute; left: -5px; top: calc(50% - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--pi-ink); }
.pi-dest h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.28rem; letter-spacing: -0.01em; }
.pi-dest-consult h3 { color: var(--pi-green); }
.pi-dest-attorney h3 { color: var(--pi-oxblood); }
.pi-dest-message h3 { color: #2e3d5c; }
.pi-dest-referred h3 { color: #6b4e16; }
.pi-dest-declined h3 { color: #4d4d48; }
.pi-dest-when { font-size: 14.5px; color: var(--pi-soft); }
.pi-dest-does { font-size: 14.5px; font-weight: 500; }

/* Ethics sheet */
.pi-ethics { background: var(--pi-sheet); border-top: 1px solid var(--pi-rule); border-bottom: 1px solid var(--pi-rule); }
.pi-ethics-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: end; }
.pi-ethics-head p { color: var(--pi-soft); }
.pi-ethics-table { min-width: 900px; }
.pi-ethics-table tbody th { width: 19%; font-family: var(--font-serif); font-weight: 500; font-size: 1.1rem; line-height: 1.25; }
.pi-ethics-table tbody th a { color: var(--pi-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(140, 35, 49, 0.5); }
.pi-ethics-table tbody th a:hover { color: var(--pi-oxblood); }
.pi-ethics-table td:last-child { color: var(--pi-green-deep); font-weight: 500; }
.pi-ethics-note { margin-top: 22px; font-size: 14.5px; color: var(--pi-soft); }

/* Follow-up */
.pi-follow-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.pi-follow-grid > div > p { margin-top: 18px; color: #33363c; }
.pi-timeline { margin-top: 30px; display: grid; }
.pi-timeline li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--pi-rule); }
.pi-timeline li:last-child { border-bottom: 1px solid var(--pi-rule); }
.pi-timeline h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem; color: var(--pi-oxblood); }
.pi-timeline p { font-size: 15.5px; }
.pi-text { position: sticky; top: 140px; }
.pi-phone {
  display: grid;
  gap: 10px;
  padding: 20px 18px 24px;
  border-radius: 28px;
  background: #fff;
  border: 8px solid var(--pi-ink);
  max-width: 380px;
  margin-inline: auto;
}
.pi-phone-top { font-size: 12px; font-weight: 600; text-align: center; color: var(--pi-muted); }
.pi-bubble { max-width: 88%; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: #eceae4; font-size: 14.5px; line-height: 1.45; }
.pi-bubble-in { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--pi-green); color: #fff; }
.pi-text figcaption { margin: 16px auto 0; max-width: 380px; font-size: 13px; color: var(--pi-muted); }
.pi-text figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Sources, worksheet, found */
.pi-sources { background: var(--pi-desk); }
.pi-sources-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: end; }
.pi-sources-head p { color: #33363c; }
.pi-source-table tbody th { width: 26%; font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem; line-height: 1.25; }
.pi-source-table td:last-child { color: var(--pi-green-deep); font-weight: 500; }
.pi-work-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); margin-top: clamp(56px, 7vw, 88px); align-items: start; }
.pi-page .pi-work-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.1; letter-spacing: -0.02em; }
.pi-work-grid > div > p { margin-top: 14px; color: #33363c; }
.pi-worksheet { padding: 24px 26px 18px; border-radius: 6px; background: var(--pi-sheet); box-shadow: 0 1px 0 rgba(26, 28, 33, 0.05), 0 20px 40px -30px rgba(40, 34, 20, 0.45); }
.pi-worksheet-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 3px double var(--pi-ink); font-family: var(--font-serif); font-size: 1.35rem; }
.pi-worksheet-head span { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pi-muted); }
.pi-worksheet li { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 16px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--pi-rule); }
.pi-worksheet li:last-child { border-bottom: 0; font-weight: 700; }
.pi-ws-line small { display: block; font-size: 12.5px; font-weight: 400; color: var(--pi-muted); }
.pi-ws-blank { height: 22px; border-bottom: 1.5px solid var(--pi-ink); }
.pi-worksheet li:last-child .pi-ws-blank { border-bottom: 3px double var(--pi-oxblood); }
.pi-found-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(26, 28, 33, 0.18); }
.pi-found-grid p { margin-top: 10px; color: #33363c; }

/* How */
.pi-how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.pi-steps { margin-top: 28px; counter-reset: pi-step; }
.pi-steps li { counter-increment: pi-step; position: relative; padding: 0 0 26px 52px; }
.pi-steps li::before {
  content: counter(pi-step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--pi-ink);
  font-weight: 700;
  font-size: 14px;
}
.pi-steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 36px; bottom: 4px; width: 1px; background: rgba(26, 28, 33, 0.25); }
.pi-steps p { margin-top: 4px; color: #33363c; font-size: 15.5px; }
.pi-how-side { display: grid; gap: 22px; }
.pi-testsheet, .pi-stays { padding: 24px 26px; border-radius: 12px; background: var(--pi-sheet); box-shadow: 0 1px 0 rgba(26, 28, 33, 0.06); }
.pi-testsheet > p:first-of-type { margin-top: 6px; font-size: 14.5px; color: var(--pi-soft); }
.pi-testsheet ul { margin-top: 14px; display: grid; gap: 8px; }
.pi-testsheet li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.pi-check { flex: none; width: 17px; height: 17px; margin-top: 3px; border: 1.5px solid var(--pi-green); border-radius: 4px; }
.pi-testsheet-foot { margin-top: 16px; font-size: 14px; color: var(--pi-soft); }
.pi-stays ul { margin-top: 12px; display: grid; gap: 6px; }
.pi-stays li { padding-left: 16px; position: relative; font-size: 15px; }
.pi-stays li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 7px; height: 1.5px; background: var(--pi-oxblood); }
.pi-stays > p { margin-top: 12px; font-size: 14px; color: var(--pi-soft); }

/* FAQ */
.pi-faq { background: var(--pi-sheet); border-top: 1px solid var(--pi-rule); }
.pi-faq-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.pi-faq-grid > div > p { margin-top: 14px; color: var(--pi-soft); }
.pi-faq-list details { border-bottom: 1px solid var(--pi-rule); }
.pi-faq-list details:first-child { border-top: 1px solid var(--pi-rule); }
.pi-faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-weight: 700;
  font-size: 1.04rem;
  cursor: pointer;
  list-style: none;
}
.pi-faq-list summary::-webkit-details-marker { display: none; }
.pi-faq-list summary span { color: var(--pi-oxblood); font-size: 1.3rem; line-height: 1; transition: transform 200ms ease-out; }
.pi-faq-list details[open] summary span { transform: rotate(45deg); }
.pi-faq-list details p { padding: 0 0 20px; color: #33363c; }

/* Close */
.pi-close { padding: clamp(72px, 9vw, 120px) 0; background: var(--pi-night); color: #dcdad3; }
.pi-close-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: clamp(36px, 6vw, 96px); align-items: end; }
.pi-close h2 { color: #f6f4ee; }
.pi-close h2 em { color: var(--pi-hazard); }
.pi-close p { margin-top: 20px; max-width: 60ch; color: #c4c3bd; }
.pi-close .pi-button { background: #b22e3f; }
.pi-close .pi-button:hover { background: var(--pi-oxblood); }
.pi-close aside { display: grid; gap: 12px; }
.pi-close aside strong { font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #a3a29c; }
.pi-close aside a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(236, 234, 228, 0.2); color: #eceae4; text-decoration: none; font-weight: 600; }
.pi-close aside a:hover { color: var(--pi-hazard); }

@media (max-width: 1100px) {
  .pi-hero { grid-template-columns: 1fr; }
  .pi-hero-copy { position: static; }
  .pi-docket { max-width: 820px; }
  .pi-dest { grid-template-columns: 1fr; }
  .pi-flow { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}

@media (max-width: 900px) {
  .pi-wrap { width: min(100% - 40px, 1280px); }
  .pi-week-grid, .pi-line-head, .pi-handover, .pi-script-grid, .pi-criteria-head, .pi-ethics-head,
  .pi-follow-grid, .pi-sources-head, .pi-work-grid, .pi-found-grid, .pi-how-grid, .pi-faq-grid,
  .pi-close-grid { grid-template-columns: 1fr; }
  .pi-script-intro, .pi-text { position: static; }
  .pi-flow { grid-template-columns: 1fr; }
  .pi-flow-in { margin: 0 0 28px; }
  .pi-flow-in::after { right: auto; left: 14px; top: 100%; width: 1.5px; height: 28px; }
  .pi-flow-out { padding-left: 34px; }
  .pi-flow-out::before { display: none; }
  .pi-dest::before { left: -20px; top: -12px; width: 20px; height: 46px; background: none; border-left: 1.5px solid var(--pi-ink); border-bottom: 1.5px solid var(--pi-ink); }
  .pi-dest:first-child::before { top: -28px; height: 62px; }
  .pi-dest::after { left: -20px; top: 34px; bottom: -12px; width: 1.5px; height: auto; border-radius: 0; background: var(--pi-ink); }
  .pi-dest:last-child::after { display: none; }
}

@media (max-width: 720px) {
  .pi-page { font-size: 16px; }
  .pi-hero h1 { font-size: clamp(2.4rem, 10.5vw, 3.1rem); }
  .pi-lede { font-size: 1.02rem; margin-top: 16px; }
  .pi-hero h1 .h1-kicker { margin-bottom: 0.6rem; }
  .pi-hero-shell { padding-top: 76px; }
  .pi-breadcrumb { padding-top: 18px; }
  .pi-hero { padding-top: 22px; }
  .pi-actions { margin-top: 20px; }
  .pi-docket { padding: 20px 16px 16px; margin-inline: -4px; }
  .pi-stamp { top: -4px; right: 0; font-size: 10px; padding: 4px 8px; }
  .pi-docket-title { font-size: 1.3rem; padding-right: 112px; }
  .pi-docket-table thead { display: none; }
  .pi-docket-table, .pi-docket-table tbody, .pi-docket-table tr { display: block; }
  .pi-docket-table tr { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--pi-rule); }
  .pi-docket-table td, .pi-docket-table tbody th { display: block; width: auto; padding: 0; border: 0; }
  .pi-no { position: absolute; left: 0; top: 12px; width: auto; }
  .pi-out, .pi-in { margin-top: 8px; font-size: 13.5px; }
  .pi-out::before, .pi-in::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pi-muted);
  }
  .pi-in::before { color: var(--pi-green); }
  .pi-memo-head dl > div, .pi-memo-body > div { grid-template-columns: 1fr; gap: 1px; }
  .pi-script { padding: 38px 16px 18px 50px; background-image:
    linear-gradient(90deg, transparent 39px, rgba(196, 72, 72, 0.55) 39px, rgba(196, 72, 72, 0.55) 40px, transparent 40px),
    repeating-linear-gradient(180deg, transparent 0, transparent 31px, var(--pi-pad-line) 31px, var(--pi-pad-line) 32px); }
  .pi-script li { grid-template-columns: 1fr; }
  .pi-para { left: -48px; width: 32px; font-size: 0.95rem; }
  .pi-timeline li { grid-template-columns: 1fr; }
  .pi-worksheet li { grid-template-columns: minmax(0, 1fr) 90px; }
  .pi-dest { padding: 14px 16px; }
  .pi-week-day { font-size: 21px; }
  .pi-week-tick { font-size: 19px; }
  .pi-week-chart { padding: 16px 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pi-page *, .pi-page *::before, .pi-page *::after { transition: none !important; }
}