/* PhaseSign homepage design system: enterprise SaaS first, paper/ink as a subtle layer. */
:root {
  --ps-bg: #f7f5ef;
  --ps-bg-alt: #efede6;
  --ps-paper: #fffdf7;
  --ps-paper-2: #f3f0e8;
  --ps-paper-3: #fbfaf5;
  --ps-cool: #f3f5f2;
  --ps-ink: #101815;
  --ps-ink-2: #1f2a25;
  --ps-muted: #5f6863;
  --ps-muted-2: #78817b;
  --ps-line: rgba(16, 24, 21, 0.14);
  --ps-line-strong: rgba(16, 24, 21, 0.22);
  --ps-green: #0b2d23;
  --ps-green-2: #315d4c;
  --ps-green-soft: #6f8b7d;
  --ps-sage: #dfe8df;
  --ps-radius-card: 22px;
  --ps-radius-panel: 32px;
  --ps-shadow-soft: 0 24px 70px rgba(16, 24, 21, 0.075);
  --ps-shadow-card: 0 12px 36px rgba(16, 24, 21, 0.055);
  --ps-shadow-paper: var(--ps-shadow-soft);
  --ps-container: 1180px;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ps-ink);
  background: var(--ps-paper);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--ps-ink);
}

h1,
.section-heading h2,
.final-cta h2,
.enterprise-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.045em;
}

h3,
p,
a,
button,
li,
small,
strong {
  font-family: var(--font-sans);
}

h1 span,
.section-heading h2 span,
.final-cta h2 span {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: 1;
  font-weight: 620;
}

h3 {
  margin-bottom: 12px;
  font-size: 1.12rem;
  line-height: 1.15;
  font-weight: 720;
}

p {
  color: var(--ps-muted);
  line-height: 1.65;
}

.section-inner {
  width: min(var(--ps-container), calc(100vw - 48px));
  margin: 0 auto;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  width: min(1320px, calc(100vw - 56px));
  margin: 24px auto 0;
  padding: 0;
  color: var(--ps-ink);
  transition: padding 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.site-header.is-scrolled {
  padding: 12px 16px;
  border: 1px solid var(--ps-line);
  border-radius: 20px;
  background: rgba(255, 253, 247, 0.88);
  box-shadow: 0 18px 44px rgba(17, 24, 22, 0.08);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.brand img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.brand-lockup {
  display: grid;
  gap: 2px;
}

.brand-lockup strong {
  color: var(--ps-ink);
  font-size: 2rem;
  line-height: 1;
  font-weight: 650;
  letter-spacing: -0.04em;
}

.brand-lockup small {
  color: var(--ps-green-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-nav,
.nav-actions {
  display: flex;
  align-items: center;
}

.site-nav {
  justify-content: center;
  gap: 36px;
  color: #2f3834;
  font-size: 0.96rem;
}

.nav-actions {
  justify-content: end;
  gap: 22px;
}

.login-link {
  color: #2f3834;
}

.button,
.text-cta,
.text-link {
  font-weight: 740;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 1rem;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover,
.text-cta:hover,
.text-link:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: white;
  background: var(--ps-green);
  border-color: var(--ps-green);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 18px 34px rgba(11, 45, 35, 0.18);
}

.button-secondary {
  color: var(--ps-ink);
  border-color: var(--ps-line);
  background: rgba(255, 255, 255, 0.45);
}

.text-cta,
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ps-ink);
  transition: transform 160ms ease;
}

.text-cta span {
  color: var(--ps-green);
  font-size: 1.35rem;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ps-line);
  border-radius: 10px;
  background: rgba(255, 253, 247, 0.74);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 5px auto;
  background: var(--ps-ink);
}

.chapter,
.hero,
.enterprise-hero,
.enterprise-section,
.final-cta {
  position: relative;
  overflow: hidden;
  border-top: 0;
}

.chapter {
  padding: clamp(110px, 12vw, 168px) 0;
}

.section-paper-smooth {
  background:
    linear-gradient(180deg, rgba(247, 245, 239, 0.96), rgba(247, 245, 239, 0.96)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 920px 920px;
}

.section-paper-fiber {
  background:
    linear-gradient(180deg, rgba(239, 237, 230, 0.88), rgba(239, 237, 230, 0.92)),
    url("/assets/brand/textures/paper-fiber.webp");
  background-size: auto, 840px 840px;
}

.section-paper-macro {
  background:
    linear-gradient(180deg, rgba(239, 237, 230, 0.88), rgba(247, 245, 239, 0.92)),
    url("/assets/brand/textures/paper-macro.webp");
  background-size: auto, 1300px 1300px;
}

.section-cool-proof {
  border-top: 1px solid rgba(16, 24, 21, 0.1);
  border-bottom: 1px solid rgba(16, 24, 21, 0.1);
  background:
    linear-gradient(180deg, rgba(243, 245, 242, 0.96), rgba(243, 245, 242, 0.96)),
    url("/assets/brand/textures/paper-cool.webp");
  background-size: auto, 980px 980px;
}

.section-clean {
  background:
    linear-gradient(180deg, rgba(251, 250, 245, 0.98), rgba(247, 245, 239, 0.96)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 1000px 1000px;
}

.ink-wash {
  position: absolute;
  z-index: 0;
  left: -8%;
  right: -8%;
  bottom: -30%;
  height: 92%;
  pointer-events: none;
  background: url("/assets/brand/textures/ink-wash-soft.webp") center bottom / cover no-repeat;
  opacity: 0.16;
  filter: saturate(0.82);
}

.hero {
  min-height: 900px;
  padding: 168px 0 126px;
  border-top: 0;
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(560px, 0.94fr) minmax(500px, 1.06fr);
  gap: 68px;
  align-items: center;
}

.hero h1 {
  max-width: 780px;
  margin-bottom: 32px;
  color: var(--ps-ink);
  font-family: var(--font-display);
  font-size: clamp(76px, 8.8vw, 132px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.88;
}

.hero-copy {
  min-width: 0;
  max-width: 660px;
  padding-top: 28px;
}

.hero-subhead {
  max-width: 610px;
  margin-bottom: 42px;
  color: var(--ps-muted);
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.65;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 34px;
  align-items: center;
}

.hero .cta-row {
  flex-wrap: nowrap;
}

.cta-row.center {
  justify-content: center;
}

.ink-underline {
  position: relative;
  display: inline-block;
  color: inherit;
  white-space: nowrap;
}

.ink-underline::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.03em;
  bottom: -0.13em;
  height: 0.2em;
  background-color: var(--ps-green-2);
  mask: url("/assets/brand/annotations/underline-long.svg") center / 100% 100% no-repeat;
  -webkit-mask: url("/assets/brand/annotations/underline-long.svg") center / 100% 100% no-repeat;
  opacity: 0.85;
  pointer-events: none;
}

.hero-artifact {
  position: relative;
  min-width: 0;
  min-height: 620px;
}

.artifact-wash {
  position: absolute;
  z-index: 0;
  inset: 6% -8% 4% -14%;
  background: url("/assets/brand/textures/ink-wash-soft.webp") center / cover no-repeat;
  opacity: 0.14;
  filter: saturate(0.8);
  pointer-events: none;
}

.agreement-stack {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 620px;
}

.agreement-page {
  position: absolute;
  top: 30px;
  left: 45%;
  width: min(420px, 72vw);
  min-height: 540px;
  padding: 54px 48px 42px;
  border: 1px solid rgba(17, 24, 22, 0.12);
  background: rgba(255, 253, 247, 0.92);
  box-shadow: var(--ps-shadow-paper);
  transform: translateX(-50%) rotate(-0.4deg);
}

.agreement-page::before,
.agreement-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(17, 24, 22, 0.11);
  background: rgba(255, 253, 247, 0.74);
}

.agreement-page::before {
  inset: 14px -18px -18px 18px;
}

.agreement-page::after {
  inset: 30px -34px -34px 34px;
  opacity: 0.62;
  transform: rotate(2.5deg);
}

.doc-title {
  max-width: 270px;
  margin: 0 auto 40px;
  color: var(--ps-ink);
  font-size: 1.6rem;
  line-height: 1.12;
  text-align: center;
  letter-spacing: -0.03em;
}

.doc-kicker,
.extracted-term span,
.signature-row small,
.excerpt-label,
.layer-grid span {
  display: block;
  color: var(--ps-muted);
  font-size: 0.72rem;
  font-weight: 790;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.doc-party {
  margin: 8px 0 20px;
  color: #2e3632;
  font-size: 1rem;
  text-align: center;
}

.date-label {
  margin-top: 26px;
}

.doc-party.small {
  margin-bottom: 30px;
}

.doc-lines {
  display: grid;
  gap: 9px;
  max-width: 260px;
  margin: 26px auto 40px;
}

.doc-lines span {
  height: 7px;
  background: rgba(17, 24, 22, 0.11);
}

.doc-lines .short {
  width: 70%;
}

.signature-row {
  display: grid;
  gap: 22px;
  max-width: 230px;
  margin-top: 4px;
}

.signature {
  display: inline-block;
  min-width: 160px;
  color: var(--ps-ink);
  border-bottom: 2px solid rgba(17, 24, 22, 0.16);
  font-size: 1.2rem;
  font-weight: 650;
  transform: rotate(-4deg);
}

.verified-stamp {
  position: absolute;
  right: 42px;
  bottom: 82px;
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  border: 3px double rgba(11, 45, 35, 0.62);
  border-radius: 50%;
  color: var(--ps-green);
  background: rgba(255, 253, 247, 0.18);
  font-weight: 820;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-13deg);
}

.verified-stamp img {
  width: 34px;
  height: 34px;
}

.verified-stamp span {
  font-size: 0.62rem;
  line-height: 1.05;
}

.extracted-term {
  position: absolute;
  right: 0;
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 12px;
  align-items: center;
  width: 210px;
  min-height: 82px;
  padding: 14px 16px;
  border: 1px solid var(--ps-line);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.76);
  box-shadow: 0 14px 30px rgba(17, 24, 22, 0.08);
  backdrop-filter: blur(10px);
}

.extracted-term::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 92px;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(88, 119, 104, 0.6) 50%, transparent 0);
  background-size: 8px 1px;
}

.extracted-term strong {
  grid-column: 2;
  margin-top: -4px;
  color: var(--ps-ink);
  font-size: 0.88rem;
  line-height: 1.35;
}

.term-one {
  top: 150px;
}

.term-two {
  top: 292px;
}

.term-three,
.term-four {
  display: none;
}

.term-icon {
  display: block;
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ps-green);
  opacity: 0.74;
}

.term-icon.calendar {
  border-radius: 5px;
  box-shadow: inset 0 7px 0 rgba(88, 119, 104, 0.18);
}

.term-icon.check {
  position: relative;
  border-radius: 50%;
}

.term-icon.check::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--ps-green);
  border-bottom: 2px solid var(--ps-green);
  transform: rotate(-45deg);
}

.section-heading {
  max-width: 820px;
  margin: 0 auto 64px;
  text-align: center;
}

.section-heading.left {
  margin-left: 0;
  text-align: left;
}

.section-heading p {
  font-size: clamp(1.04rem, 1.5vw, 1.22rem);
}

.eyebrow {
  margin-bottom: 16px;
  color: var(--ps-muted);
  font-size: 0.74rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.explainer {
  padding-top: 132px;
}

.explainer .section-heading {
  max-width: 740px;
  margin-bottom: 54px;
}

.flow-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  min-height: 320px;
  padding: 72px 56px 48px;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-panel);
  background: rgba(255, 253, 247, 0.78);
  box-shadow: var(--ps-shadow-paper);
}

.flow-line {
  position: absolute;
  top: 123px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: rgba(17, 24, 22, 0.18);
}

.flow-step {
  position: relative;
  z-index: 1;
  padding: 104px 20px 0;
  text-align: center;
}

.flow-step::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 92px;
  height: 92px;
  border: 1px solid var(--ps-line);
  border-radius: 50%;
  background: rgba(247, 245, 239, 0.92);
  transform: translateX(-50%);
}

.flow-icon {
  position: absolute;
  top: 38px;
  left: 50%;
  z-index: 2;
  width: 32px;
  height: 32px;
  transform: translateX(-50%);
}

.flow-icon::before,
.flow-icon::after {
  content: "";
  position: absolute;
  border-color: var(--ps-green);
}

.flow-icon.pdf::before,
.flow-icon.timeline::before {
  inset: 1px;
  border: 2px solid var(--ps-green);
  border-radius: 4px;
}

.flow-icon.pdf::after {
  content: "PDF";
  left: 4px;
  bottom: 5px;
  color: var(--ps-green);
  border: 0;
  font-size: 0.54rem;
  font-weight: 900;
}

.flow-icon.ingest::before {
  width: 28px;
  height: 16px;
  left: 2px;
  top: 9px;
  border: 2px solid var(--ps-green);
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

.flow-icon.ingest::after {
  width: 10px;
  height: 10px;
  left: 11px;
  top: 0;
  border-left: 2px solid var(--ps-green);
  border-bottom: 2px solid var(--ps-green);
  transform: rotate(-45deg);
}

.flow-icon.stack::before,
.flow-icon.stack::after {
  width: 24px;
  height: 14px;
  left: 4px;
  border: 2px solid var(--ps-green);
  transform: rotate(30deg) skewX(-28deg);
}

.flow-icon.stack::before {
  top: 2px;
}

.flow-icon.stack::after {
  top: 14px;
}

.flow-icon.timeline::after {
  right: -3px;
  bottom: -3px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ps-green);
  border-radius: 50%;
  background: var(--ps-paper);
}

.flow-icon.sparkle::before {
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 5%, var(--ps-green) 0 3px, transparent 4px),
    radial-gradient(circle at 95% 50%, var(--ps-green) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 95%, var(--ps-green) 0 3px, transparent 4px),
    radial-gradient(circle at 5% 50%, var(--ps-green) 0 3px, transparent 4px);
}

.flow-step p {
  max-width: 160px;
  margin: 0 auto;
  font-size: 0.94rem;
}

.final-line,
.closing-line,
.supporting-line {
  max-width: 760px;
  margin: 44px auto 0;
  color: var(--ps-ink);
  font-size: 1.2rem;
  font-weight: 720;
  text-align: center;
}

.problem-grid,
.trust-grid,
.useful-grid,
.enterprise-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
  gap: clamp(56px, 8vw, 112px);
  align-items: start;
}

.question-board {
  display: grid;
  gap: 0;
  padding: 28px 0;
  border-top: 1px solid var(--ps-line);
  border-bottom: 1px solid var(--ps-line);
}

.question-board span {
  padding: 18px 4px;
  color: var(--ps-ink);
  border-bottom: 1px solid var(--ps-line);
  font-size: 1.08rem;
  font-weight: 650;
}

.question-board span:last-child {
  border-bottom: 0;
}

.insight-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(42px, 6vw, 76px);
  align-items: stretch;
}

.document-excerpt {
  min-height: 520px;
  padding: 46px;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-panel);
  background: rgba(255, 253, 247, 0.8);
  box-shadow: var(--ps-shadow-paper);
}

.document-excerpt h3 {
  max-width: 300px;
  margin: 24px 0 30px;
  font-size: clamp(2rem, 3vw, 3rem);
}

.document-excerpt p:not(.excerpt-label) {
  color: #343c38;
  font-size: 1.14rem;
}

.source-pin {
  display: inline-flex;
  margin-top: 30px;
  padding: 10px 14px;
  color: var(--ps-green);
  border: 1px solid rgba(11, 45, 35, 0.24);
  border-radius: 999px;
  background: rgba(223, 232, 223, 0.58);
  font-weight: 820;
}

.insight-grid,
.trust-cards,
.enterprise-grid,
.use-case-grid,
.topic-grid,
.split-topics {
  display: grid;
  gap: 20px;
}

.insight-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
}

.insight-grid article:nth-child(n + 5) {
  display: none;
}

.insight-grid article,
.layer-grid article,
.enterprise-grid article,
.use-case-grid article,
.topic-grid article,
.split-topics article,
.trust-cards article {
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-card);
  background: rgba(255, 253, 247, 0.68);
}

.insight-grid article {
  min-height: 180px;
  padding: 30px;
}

.insight-grid article.wide {
  grid-column: auto;
}

.trust .section-heading,
.trust-grid .section-heading {
  margin-bottom: 0;
}

.trust-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trust-cards article {
  min-height: 180px;
  padding: 30px;
  background: rgba(255, 253, 247, 0.7);
}

.trust h2,
.trust h3 {
  color: var(--ps-ink);
}

.trust p {
  color: var(--ps-muted);
}

.layer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.layer-grid article {
  min-height: 300px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(255, 253, 247, 0.74);
  box-shadow: 0 18px 42px rgba(17, 24, 22, 0.05);
}

.layer-grid h3 {
  font-size: clamp(2rem, 3vw, 3rem);
}

.workflow-note {
  padding: 36px 0 0;
  border-top: 1px solid var(--ps-line);
}

.workflow-note p {
  max-width: 660px;
  font-size: 1.12rem;
}

.workflow-note p + p {
  margin-top: 24px;
  font-size: 1rem;
}

.enterprise-teaser {
  padding: 112px 0;
}

.enterprise-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 24px;
}

.enterprise-grid article {
  padding: 30px;
}

.enterprise-note {
  max-width: 760px;
  margin-bottom: 24px;
  font-size: 0.98rem;
}

.use-cases {
  padding: 104px 0;
}

.use-case-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.use-case-grid article {
  min-height: 150px;
  padding: 24px;
}

.use-case-grid p,
.enterprise-grid p,
.layer-grid p,
.insight-grid p,
.trust-cards p,
.topic-grid p,
.split-topics p {
  margin-bottom: 0;
}

.final-cta {
  padding: clamp(118px, 13vw, 176px) 0;
  text-align: center;
}

.final-cta .section-inner {
  position: relative;
  z-index: 1;
}

.final-cta h2 {
  max-width: 880px;
  margin: 0 auto 24px;
}

.final-cta p {
  max-width: 640px;
  margin: 0 auto 38px;
  font-size: 1.18rem;
}

.site-footer {
  padding: 72px 0;
  color: #d8e0d8;
  background: #111816;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(240px, 1.3fr) repeat(4, 1fr);
  gap: 42px;
  width: min(var(--ps-container), calc(100vw - 48px));
  margin: 0 auto;
}

.site-footer .brand img {
  width: 38px;
  height: 38px;
}

.site-footer .brand-lockup strong {
  color: white;
  font-size: 1.2rem;
}

.site-footer .brand-lockup small {
  font-size: 0.54rem;
}

.site-footer p {
  max-width: 310px;
  margin: 18px 0 0;
  color: rgba(216, 224, 216, 0.68);
}

.site-footer h3 {
  margin: 0 0 16px;
  color: white;
  font-size: 0.95rem;
}

.site-footer nav a {
  display: block;
  margin: 9px 0;
  color: rgba(216, 224, 216, 0.68);
  font-size: 0.93rem;
}

.enterprise-hero {
  padding: 184px 0 124px;
  text-align: center;
  background: rgba(247, 245, 239, 0.94) url("/assets/brand/textures/paper-smooth.webp") repeat;
  background-size: 900px 900px;
}

.enterprise-hero h1 {
  margin-right: auto;
  margin-left: auto;
}

.enterprise-hero p {
  max-width: 840px;
  margin: 0 auto;
  font-size: 1.18rem;
}

.enterprise-section {
  padding: clamp(104px, 11vw, 152px) 0;
  background: rgba(255, 253, 247, 0.82);
}

.enterprise-section:nth-of-type(even) {
  background: rgba(243, 240, 232, 0.9) url("/assets/brand/textures/paper-fiber.webp") repeat;
  background-size: 820px 820px;
}

.enterprise-row h2 {
  font-size: clamp(2.2rem, 4vw, 4rem);
}

.topic-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.topic-grid article,
.split-topics article {
  padding: 28px;
}

.topic-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-list li {
  padding: 15px 18px;
  border: 1px solid var(--ps-line);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.62);
  color: var(--ps-ink);
  font-weight: 650;
}

.topic-list.dark li {
  background: rgba(255, 253, 247, 0.62);
  color: var(--ps-ink);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero is above the fold, so it can't rely on the scroll observer to reveal
   reliably — it uses an auto-playing entrance like the process section.
   Each line animates on its own delay so they stagger in. */
.hero-enter h1,
.hero-enter .hero-subhead,
.hero-enter .hero-kicker,
.hero-enter .hero-actions {
  animation: heroFadeUp 2.7s ease both;
}

.hero-enter .hero-subhead {
  animation-delay: 0.28s;
}

.hero-enter .hero-kicker {
  animation-delay: 0.5s;
}

.hero-enter .hero-actions {
  animation-delay: 0.72s;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1100px) {
  .site-header {
    grid-template-columns: auto auto;
  }

  .nav-toggle {
    display: block;
    justify-self: end;
  }

  .site-nav,
  .nav-actions {
    display: none;
  }

  body.nav-open .site-header {
    grid-template-columns: 1fr auto;
    padding: 14px;
    border: 1px solid var(--ps-line);
    border-radius: 20px;
    background: rgba(255, 253, 247, 0.94);
  }

  body.nav-open .site-nav,
  body.nav-open .nav-actions {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .hero-grid,
  .problem-grid,
  .trust-grid,
  .useful-grid,
  .enterprise-row,
  .insight-layout {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 152px;
  }

  .hero-artifact,
  .agreement-stack {
    min-height: 660px;
  }

  .agreement-page {
    left: 46%;
  }

  .flow-stage {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .flow-line {
    top: 64px;
    bottom: 64px;
    left: 76px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .flow-step {
    min-height: 118px;
    padding: 12px 20px 12px 120px;
    text-align: left;
  }

  .flow-step::before {
    top: 0;
    left: 46px;
    transform: none;
  }

  .flow-icon {
    top: 30px;
    left: 92px;
  }

  .flow-step p {
    max-width: none;
    margin: 0;
  }

  .enterprise-grid,
  .layer-grid,
  .use-case-grid,
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .section-inner,
  .footer-inner {
    width: min(100vw - 28px, var(--ps-container));
  }

  .site-header {
    width: min(100vw - 20px, 1320px);
    margin-top: 10px;
  }

  .brand {
    gap: 9px;
  }

  .brand img {
    width: 40px;
    height: 40px;
  }

  .brand-lockup strong {
    font-size: 1.25rem;
  }

  .brand-lockup small {
    font-size: 0.5rem;
  }

  .chapter,
  .enterprise-section {
    padding: 88px 0;
  }

  .hero {
    min-height: auto;
    padding: 128px 0 86px;
  }

  h1 {
    max-width: 9.8ch;
    font-size: clamp(3.35rem, 16vw, 4.75rem);
  }

  h2 {
    font-size: clamp(2.2rem, 10vw, 3.35rem);
  }

  .hero-grid {
    gap: 44px;
  }

  .cta-row,
  .cta-row.center {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .text-cta {
    justify-content: center;
  }

  .hero-artifact,
  .agreement-stack {
    min-height: 560px;
  }

  .agreement-page {
    left: 43%;
    width: min(292px, 78vw);
    min-height: 462px;
    padding: 34px 24px;
  }

  .doc-title {
    margin-bottom: 28px;
    font-size: 1.26rem;
  }

  .verified-stamp {
    right: 18px;
    bottom: 66px;
    width: 88px;
    height: 88px;
    letter-spacing: 0.08em;
  }

  .verified-stamp img {
    width: 30px;
    height: 30px;
  }

  .verified-stamp span {
    font-size: 0.55rem;
  }

  .extracted-term {
    right: 0;
    width: 142px;
    min-height: 72px;
    grid-template-columns: 22px 1fr;
    gap: 8px;
    padding: 10px;
  }

  .extracted-term::before {
    width: 24px;
  }

  .extracted-term span {
    font-size: 0.58rem;
    letter-spacing: 0.07em;
  }

  .extracted-term strong {
    font-size: 0.72rem;
  }

  .term-icon {
    width: 22px;
    height: 22px;
  }

  .term-one {
    top: 98px;
  }

  .term-two {
    top: 210px;
  }

  .flow-stage {
    padding: 34px 24px;
    border-radius: 24px;
  }

  .flow-line {
    left: 56px;
  }

  .flow-step {
    padding-left: 92px;
  }

  .flow-step::before {
    left: 18px;
    width: 72px;
    height: 72px;
  }

  .flow-icon {
    top: 21px;
    left: 54px;
  }

  .insight-grid,
  .trust-cards,
  .enterprise-grid,
  .layer-grid,
  .use-case-grid,
  .topic-grid,
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .document-excerpt,
  .insight-grid article,
  .trust-cards article,
  .enterprise-grid article,
  .layer-grid article,
  .use-case-grid article {
    border-radius: 18px;
  }
}

/* Final PhaseSign visual correction: editorial headlines, visible annotations, softer chapters. */
.hero h1 {
  max-width: 780px;
  font-family: var(--font-display);
  font-size: clamp(76px, 8.8vw, 132px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.88;
}

.section-heading h2,
.final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(52px, 5.8vw, 92px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.enterprise-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.055em;
}

.ink-underline,
.circle-word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.ink-underline::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.13em;
  height: 0.2em;
  background-color: var(--ps-green-2);
  mask: url("/assets/brand/annotations/underline-long.svg") center / 100% 100% no-repeat;
  -webkit-mask: url("/assets/brand/annotations/underline-long.svg") center / 100% 100% no-repeat;
  opacity: 0.85;
  pointer-events: none;
}

.circle-word::after {
  content: "";
  position: absolute;
  left: -0.22em;
  top: -0.08em;
  width: calc(100% + 0.44em);
  height: calc(100% + 0.24em);
  background-color: var(--ps-green-2);
  mask: url("/assets/brand/annotations/circle-wide.svg") center / 100% 100% no-repeat;
  -webkit-mask: url("/assets/brand/annotations/circle-wide.svg") center / 100% 100% no-repeat;
  opacity: 0.72;
  pointer-events: none;
}

.chapter {
  padding: clamp(110px, 12vw, 168px) 0;
  position: relative;
  border-top: 0;
}

.section-paper-smooth {
  background:
    linear-gradient(180deg, rgba(247, 245, 239, 0.96), rgba(247, 245, 239, 0.96)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 920px 920px;
}

.section-paper-fiber {
  background:
    linear-gradient(180deg, rgba(239, 237, 230, 0.88), rgba(239, 237, 230, 0.92)),
    url("/assets/brand/textures/paper-fiber.webp");
  background-size: auto, 840px 840px;
}

.section-clean {
  background:
    linear-gradient(180deg, rgba(251, 250, 245, 0.98), rgba(247, 245, 239, 0.96)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 1000px 1000px;
}

.section-cool-proof {
  border-top: 1px solid rgba(16, 24, 21, 0.1);
  border-bottom: 1px solid rgba(16, 24, 21, 0.1);
  background:
    linear-gradient(180deg, rgba(243, 245, 242, 0.96), rgba(243, 245, 242, 0.96)),
    url("/assets/brand/textures/paper-cool.webp");
  background-size: auto, 980px 980px;
}

.section-paper-macro {
  background:
    linear-gradient(180deg, rgba(239, 237, 230, 0.88), rgba(247, 245, 239, 0.92)),
    url("/assets/brand/textures/paper-macro.webp");
  background-size: auto, 1300px 1300px;
}

.hero-artifact {
  position: relative;
}

.artifact-wash {
  position: absolute;
  z-index: 0;
  inset: 6% -8% 4% -14%;
  background: url("/assets/brand/textures/ink-wash-soft.webp") center / cover no-repeat;
  opacity: 0.14;
  filter: saturate(0.8);
  pointer-events: none;
}

.agreement-stack {
  position: relative;
  z-index: 1;
}

.final-cta {
  position: relative;
  overflow: hidden;
}

.final-cta .ink-wash {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -30%;
  height: 92%;
  background: url("/assets/brand/textures/ink-wash-soft.webp") center bottom / cover no-repeat;
  opacity: 0.16;
  filter: saturate(0.82);
  pointer-events: none;
}

.final-cta .section-inner {
  position: relative;
  z-index: 1;
}

.explainer {
  padding-top: clamp(118px, 12vw, 168px);
}

.explainer .section-heading {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.explainer .section-heading h2 {
  font-size: clamp(48px, 5.5vw, 84px);
  line-height: 0.96;
}

.flow-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  width: min(1080px, 100%);
  min-height: auto;
  margin: 0 auto;
  padding: clamp(44px, 5vw, 70px);
  border: 1px solid var(--ps-line);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.42)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 820px 820px;
  box-shadow: var(--ps-shadow-soft);
}

.flow-line {
  position: absolute;
  z-index: 0;
  left: 10%;
  right: 10%;
  top: 49%;
  height: 1px;
  background: rgba(16, 24, 21, 0.18);
}

.flow-step {
  position: relative;
  z-index: 1;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.flow-step::before {
  content: "";
  position: relative;
  top: auto;
  left: auto;
  display: block;
  width: 92px;
  height: 92px;
  margin: 0 auto;
  border: 1px solid var(--ps-line);
  border-radius: 50%;
  background: rgba(247, 245, 239, 0.92);
  transform: none;
}

.flow-icon {
  top: 30px;
}

.flow-step h3 {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ps-ink);
}

.flow-step p {
  max-width: 150px;
  margin: 8px auto 0;
  color: var(--ps-muted);
  font-size: 13px;
  line-height: 1.45;
}

.problem-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(60px, 8vw, 104px);
  align-items: start;
}

.problem .section-heading.left {
  max-width: 600px;
}

.problem .section-heading.left h2 {
  font-family: var(--font-display);
  font-size: clamp(52px, 5.8vw, 86px);
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.problem .section-heading.left p:not(.eyebrow) {
  max-width: 570px;
  font-size: 20px;
  line-height: 1.65;
}

.question-board {
  counter-reset: question;
  display: grid;
  gap: 0;
  padding: 34px 38px;
  border: 1px solid var(--ps-line);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.42)),
    url("/assets/brand/textures/paper-fiber.webp");
  background-size: auto, 760px 760px;
  box-shadow: var(--ps-shadow-soft);
}

.question-board::before {
  content: "Questions teams still ask after signing";
  display: block;
  margin-bottom: 22px;
  color: var(--ps-muted);
  font-family: var(--font-sans);
  font-size: 14px;
}

.question-board span {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid rgba(16, 24, 21, 0.1);
  border-bottom: 0;
  background: transparent;
  color: var(--ps-ink);
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.35;
}

.question-board span:first-of-type {
  border-top: 0;
}

.question-board span::before {
  counter-increment: question;
  content: "0" counter(question);
  color: var(--ps-green-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.closing-line {
  max-width: 760px;
  margin: 72px auto 0;
  color: var(--ps-ink);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.45;
  text-align: center;
}

.insight-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(48px, 6vw, 84px);
  align-items: stretch;
}

.document-excerpt {
  padding: 40px;
  border: 1px solid var(--ps-line);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.44)),
    url("/assets/brand/textures/paper-fiber.webp");
  background-size: auto, 780px 780px;
  box-shadow: var(--ps-shadow-card);
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.insight-grid article {
  border: 1px solid var(--ps-line);
  border-radius: 22px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.46);
}

.trust-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(56px, 8vw, 104px);
  align-items: start;
}

.trust-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.trust-cards article {
  border: 1px solid var(--ps-line);
  border-radius: 22px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}

.term-three,
.term-four {
  display: none;
}

.enterprise-hero {
  background:
    linear-gradient(180deg, rgba(247, 245, 239, 0.96), rgba(247, 245, 239, 0.96)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 920px 920px;
}

.enterprise-section:nth-of-type(even) {
  background:
    linear-gradient(180deg, rgba(239, 237, 230, 0.88), rgba(239, 237, 230, 0.92)),
    url("/assets/brand/textures/paper-fiber.webp");
  background-size: auto, 840px 840px;
}

@media (max-width: 1100px) {
  .flow-stage,
  .problem-grid,
  .trust-grid,
  .insight-layout {
    grid-template-columns: 1fr;
  }

  .flow-line {
    top: 64px;
    bottom: 64px;
    left: 56px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .flow-step {
    min-height: 104px;
    padding-left: 96px;
    text-align: left;
  }

  .flow-step::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 72px;
    height: 72px;
  }

  .flow-icon {
    top: 20px;
    left: 36px;
  }

  .flow-step p {
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 700px) {
  .hero h1 {
    font-size: clamp(54px, 14.5vw, 64px);
  }

  .hero .cta-row {
    flex-wrap: wrap;
  }

  .artifact-wash {
    inset: 8% 0 8% 0;
  }

  .question-board {
    padding: 26px 24px;
  }

  .question-board span {
    grid-template-columns: 32px 1fr;
    font-size: 17px;
  }
}

/* Deterministic final layout pass per PhaseSign direction. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  width: auto;
  margin: 0;
  padding: 0 clamp(24px, 5vw, 64px);
  border: 0;
  border-bottom: 1px solid rgba(16, 24, 21, 0.08);
  border-radius: 0;
  background: rgba(247, 245, 239, 0.86);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.site-header.is-scrolled {
  padding: 0 clamp(24px, 5vw, 64px);
  border: 0;
  border-bottom: 1px solid rgba(16, 24, 21, 0.08);
  border-radius: 0;
  background: rgba(247, 245, 239, 0.9);
  box-shadow: none;
}

.brand img {
  width: 42px;
  height: auto;
}

.brand strong,
.brand-lockup strong {
  color: var(--ps-ink);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.035em;
}

.brand small,
.brand-lockup small {
  color: var(--ps-green-2);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: 34px;
}

.site-nav a,
.login-link {
  color: var(--ps-ink);
  font-size: 14px;
  text-decoration: none;
}

.button-primary {
  padding: 13px 20px;
  min-height: auto;
  border: 1px solid var(--ps-green);
  border-radius: 8px;
  background: var(--ps-green);
  color: #fff;
  box-shadow: 0 14px 32px rgba(11, 45, 35, 0.18);
  font-size: 14px;
  font-weight: 650;
}

.text-cta {
  color: var(--ps-ink);
  font-size: 14px;
  font-weight: 600;
}

.hero {
  min-height: auto;
  padding: 112px 0 132px;
}

.hero-grid {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: clamp(56px, 8vw, 112px);
  align-items: center;
}

.hero h1 {
  max-width: 680px;
  margin: 0;
  color: var(--ps-ink);
  font-family: var(--font-display);
  font-size: clamp(58px, 6.1vw, 84px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.hero-copy {
  width: min(680px, calc(100vw - 48px));
  max-width: none;
}

.hero h1 span {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.hero-subhead {
  max-width: 560px;
  margin-top: 30px;
  color: var(--ps-muted);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
}

.ink-underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

.ink-underline::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.11em;
  height: 0.16em;
  background: url("/assets/brand/annotations/underline-long.svg") center / 100% 100% no-repeat;
  opacity: 0.85;
  pointer-events: none;
}

.hero-artifact {
  position: relative;
}

.artifact-wash {
  position: absolute;
  z-index: 0;
  left: -20%;
  right: -12%;
  top: 8%;
  bottom: 4%;
  inset: 8% -12% 4% -20%;
  background: url("/assets/brand/textures/ink-wash-soft.webp") center / cover no-repeat;
  opacity: 0.18;
  filter: saturate(0.85);
  pointer-events: none;
}

.agreement-stack {
  position: relative;
  z-index: 1;
  max-width: 540px;
  min-height: auto;
  margin-left: auto;
}

.agreement-page {
  position: relative;
  top: auto;
  left: auto;
  width: 420px;
  min-height: 520px;
  margin: 0 auto;
  padding: 54px 48px;
  border: 1px solid rgba(16, 24, 21, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 760px 760px;
  box-shadow: 0 34px 80px rgba(16, 24, 21, 0.12);
  transform: none;
}

.extracted-term {
  border: 1px solid rgba(16, 24, 21, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 28px rgba(16, 24, 21, 0.08);
  backdrop-filter: blur(8px);
}

.term-three,
.term-four {
  display: none !important;
}

.chapter {
  padding: clamp(112px, 11vw, 156px) 0;
}

.section-inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.section-paper-smooth {
  background:
    linear-gradient(180deg, rgba(247, 245, 239, 0.96), rgba(247, 245, 239, 0.96)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 920px 920px;
}

.section-paper-fiber {
  background:
    linear-gradient(180deg, rgba(239, 237, 230, 0.88), rgba(239, 237, 230, 0.92)),
    url("/assets/brand/textures/paper-fiber.webp");
  background-size: auto, 840px 840px;
}

.section-clean {
  background:
    linear-gradient(180deg, rgba(251, 250, 245, 0.98), rgba(247, 245, 239, 0.96)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 1000px 1000px;
}

.section-cool-proof {
  background:
    linear-gradient(180deg, rgba(243, 245, 242, 0.96), rgba(243, 245, 242, 0.96)),
    url("/assets/brand/textures/paper-cool.webp");
  background-size: auto, 980px 980px;
}

.explainer .section-heading {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.explainer .section-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(46px, 5vw, 76px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.circle-word {
  position: relative;
  display: inline-block;
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

.circle-word::after {
  content: "";
  position: absolute;
  left: -0.16em;
  top: -0.03em;
  width: calc(100% + 0.32em);
  height: calc(100% + 0.1em);
  background: url("/assets/brand/annotations/circle-wide.svg") center / 100% 100% no-repeat;
  opacity: 0.58;
  pointer-events: none;
}

.flow-stage {
  position: relative;
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 54px 58px;
  border: 1px solid rgba(16, 24, 21, 0.13);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.42)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 820px 820px;
  box-shadow: 0 22px 60px rgba(16, 24, 21, 0.075);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
}

.flow-line {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 40%;
  height: 1px;
  background: rgba(16, 24, 21, 0.16);
  z-index: 0;
}

.flow-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.flow-step::before {
  display: none;
}

.flow-icon {
  position: relative;
  left: auto;
  top: auto;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  margin: 0 auto;
  border: 1px solid rgba(16, 24, 21, 0.13);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.82), rgba(247, 245, 239, 0.56)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 520px 520px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 22px rgba(16, 24, 21, 0.035);
  transform: none;
}

.flow-icon::before,
.flow-icon::after {
  content: none !important;
}

.flow-icon svg {
  display: block;
  width: 58px;
  height: 58px;
  overflow: visible;
  fill: none;
  stroke: var(--ps-green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow-step h3 {
  margin: 26px 0 0;
  color: var(--ps-ink);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.flow-step p {
  max-width: 145px;
  margin: 8px auto 0;
  color: var(--ps-muted);
  font-size: 13px;
  line-height: 1.45;
}

.problem-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(64px, 8vw, 112px);
  align-items: center;
}

.problem .section-heading.left h2 {
  font-family: var(--font-display);
  font-size: clamp(50px, 5.5vw, 82px);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.question-board {
  padding: 36px 40px;
  border-radius: 24px;
  box-shadow: var(--ps-shadow-soft);
}

.insights .section-heading {
  max-width: 820px;
  margin-bottom: 64px;
}

.insight-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: stretch;
}

.insight-grid article.wide {
  grid-column: 1 / -1;
  background: rgba(11, 45, 35, 0.04);
}

.final-cta {
  position: relative;
  overflow: hidden;
}

.final-cta .ink-wash {
  position: absolute;
  z-index: 0;
  left: -10%;
  right: -10%;
  bottom: -35%;
  height: 100%;
  background: url("/assets/brand/textures/ink-wash-soft.webp") center bottom / cover no-repeat;
  opacity: 0.18;
  filter: saturate(0.85);
  pointer-events: none;
}

.final-cta .section-inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 1100px) {
  .hero-grid,
  .problem-grid,
  .insight-layout {
    grid-template-columns: 1fr;
  }

  .agreement-stack {
    margin-right: auto;
  }

  .flow-stage {
    grid-template-columns: 1fr;
  }

  .flow-line {
    display: none;
  }
}

@media (max-width: 700px) {
  .site-header {
    height: auto;
    min-height: 68px;
    grid-template-columns: auto auto;
  }

  .hero {
    padding: 82px 0 96px;
  }

  .hero h1 {
    font-size: clamp(52px, 14vw, 64px);
  }

  .hero-grid {
    width: min(1180px, calc(100% - 28px));
  }

  .agreement-page {
    width: min(330px, 86vw);
  }

  .extracted-term {
    display: none;
  }
}

/* Asset-based hero implementation. */
.hero {
  min-height: auto;
  padding: 84px 0 64px;
  display: block;
}

.hero-grid {
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 44px;
  align-items: start;
}

.hero-copy {
  width: auto;
  max-width: 680px;
}

.hero h1 {
  max-width: 700px;
  margin: 0;
  color: var(--ps-ink);
  font-family: var(--font-display);
  font-size: clamp(60px, 5.1vw, 72px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.hero h1 .line {
  display: block;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.underline-asset {
  position: relative;
  display: inline-block;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.underline-asset img {
  position: absolute;
  left: -2%;
  bottom: -0.28em;
  width: 104%;
  height: auto;
  opacity: 0.92;
  pointer-events: none;
}

.hero-subhead {
  max-width: 560px;
  margin-top: 30px;
  color: var(--ps-muted);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
}

.hero-art {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.hero-cloud {
  position: absolute;
  z-index: 0;
  width: 88%;
  max-width: 760px;
  right: 2%;
  top: 42%;
  transform: translateY(-50%);
  opacity: 0.2;
  filter: saturate(0.88);
  pointer-events: none;
}

.hero-agreement {
  position: relative;
  z-index: 1;
  display: block;
  width: min(120%, 720px);
  max-width: none;
  height: auto;
  margin-top: -126px;
  filter: drop-shadow(0 28px 60px rgba(16, 24, 21, 0.1));
}

.hero-artifact,
.artifact-wash,
.agreement-stack,
.agreement-page,
.extracted-term,
.verified-stamp {
  display: none !important;
}

.ink-underline::after {
  display: none;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    width: min(1200px, calc(100% - 40px));
    gap: 44px;
  }

  .hero-copy {
    max-width: 680px;
    transform: none;
  }

  .hero-art {
    min-height: auto;
    justify-self: center;
    transform: none;
  }

  .hero-agreement {
    width: min(100%, 680px);
  }
}

@media (max-width: 700px) {
  .hero {
    padding: 64px 0 78px;
  }

  .hero h1 {
    font-size: clamp(38px, 10vw, 42px);
  }
}

/* Hero-only final composition using supplied PhaseSign assets. */
.site-header {
  height: 68px;
  padding: 0 28px;
}

.site-header.is-scrolled {
  padding: 0 28px;
}

.hero {
  min-height: auto;
  padding: 64px 0 72px;
  background:
    linear-gradient(180deg, rgba(247, 245, 239, 0.96), rgba(247, 245, 239, 0.96)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 920px 920px;
}

.section-inner {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(560px, 650px) minmax(460px, 1fr);
  gap: 32px;
  align-items: center;
}

.hero-copy {
  width: auto;
  max-width: 650px;
}

.hero h1 {
  max-width: 650px;
  margin: 0;
  color: var(--ps-ink);
  font-family: var(--font-display);
  font-size: clamp(58px, 5.5vw, 84px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.94;
}

.hero h1 .line {
  display: block;
}

.hero h1 span {
  font-family: inherit;
}

.hero-subhead {
  max-width: 520px;
  margin: 24px 0 0;
  color: var(--ps-muted);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
}

.hero-proof {
  max-width: 520px;
  margin: 16px 0 0;
  color: var(--ps-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hero .button-primary {
  padding: 14px 22px;
  border: 1px solid var(--ps-green);
  border-radius: 8px;
  background: var(--ps-green);
  color: #fff;
  box-shadow: 0 10px 24px rgba(11, 45, 35, 0.16);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.hero .text-cta {
  color: var(--ps-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.underline-asset {
  position: relative;
  display: inline-block;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.underline-asset img {
  position: absolute;
  left: -3%;
  bottom: -0.14em;
  width: 106%;
  height: auto;
  opacity: 0.92;
  pointer-events: none;
}

.hero-art {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-cloud {
  position: absolute;
  z-index: 1;
  width: 92%;
  max-width: 660px;
  right: 1%;
  top: 52%;
  transform: translateY(-50%);
  opacity: 0.16;
  filter: saturate(0.88);
  mix-blend-mode: normal;
  pointer-events: none;
}

.hero-agreement {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 650px);
  height: auto;
  margin-top: 0;
  opacity: 1;
  mix-blend-mode: normal;
  filter: drop-shadow(0 24px 48px rgba(16, 24, 21, 0.1));
}

.hero-artifact,
.artifact-wash,
.agreement-stack,
.agreement-page,
.extracted-term,
.verified-stamp {
  display: none !important;
}

@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: 1fr;
    width: min(1180px, calc(100% - 48px));
    gap: 40px;
  }

  .hero-copy {
    max-width: 680px;
  }

  .hero h1 {
    max-width: 680px;
  }

  .hero-art {
    min-height: auto;
  }
}

@media (max-width: 700px) {
  .site-header {
    height: auto;
    min-height: 68px;
  }

  .hero {
    padding: 48px 0 64px;
  }

  .section-inner {
    width: min(1180px, calc(100% - 32px));
  }

  .hero h1 {
    font-size: clamp(44px, 12vw, 56px);
  }

  .hero-actions {
    align-items: flex-start;
    gap: 18px;
  }
}

/* Hero-only two-layer artwork pass. */
.site-header {
  height: 68px;
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(680px, 76vh, 820px);
  padding: clamp(76px, 8vh, 112px) 0 clamp(86px, 9vh, 122px);
  background: #f5f0e6;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(245, 240, 230, 0.98) 0%, rgba(245, 240, 230, 0.94) 25%, rgba(245, 240, 230, 0.54) 48%, rgba(245, 240, 230, 0.04) 70%),
    linear-gradient(180deg, rgba(245, 240, 230, 0.10), rgba(245, 240, 230, 0.28));
}

.hero-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/brand/hero_05.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  filter: saturate(0.82) brightness(1.04);
}

.hero-inner {
  position: relative;
  z-index: 3;
}

.hero-copy {
  position: relative;
  z-index: 4;
}

.hero-copy > *:not(.hero-copy-texture) {
  position: relative;
  z-index: 1;
}

.hero-visual {
  position: relative;
  z-index: 3;
}

.section-inner {
  width: min(1320px, calc(100% - 80px));
  margin: 0 auto;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(520px, 660px);
  gap: 0;
  align-items: center;
}

.hero-copy {
  max-width: 640px;
  justify-self: start;
  transform: none;
}

.hero-copy-texture {
  position: absolute;
  left: -34px;
  bottom: 92px;
  z-index: 0;
  display: grid;
  gap: 9px;
  font-family: "Courier Prime", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.2;
  color: rgba(16, 24, 21, 0.10);
  transform: rotate(-2deg);
  pointer-events: none;
  user-select: none;
}

.hero-copy-texture span {
  display: block;
  width: fit-content;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(16, 24, 21, 0.06);
}

.hero h1 {
  margin: 0;
  max-width: 720px;
  color: var(--ps-ink);
  font-family: var(--font-display);
  font-size: clamp(60px, 5.2vw, 86px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.94;
}

.hero h1 .line {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
  clip-path: none;
  animation: none;
}

.hero h1 span {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.hero-subhead {
  margin: 30px 0 0;
  max-width: 620px;
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.25vw, 20px);
  line-height: 1.62;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: rgba(16, 24, 21, 0.68);
}

.hero-kicker {
  display: block;
  margin: 20px 0 0;
  padding: 0;
  max-width: 520px;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: rgba(16, 24, 21, 0.78);
}

.cta-row,
.hero-actions {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.hero-actions {
  align-items: stretch;
  gap: 28px;
  margin-top: 38px;
}

.hero-actions .button-primary {
  align-self: center;
}

.hero-action-divider {
  align-self: stretch;
  width: 1px;
  min-height: 76px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(16, 24, 21, 0.16) 18%,
    rgba(16, 24, 21, 0.16) 82%,
    transparent 100%
  );
}

.hero .button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(7, 31, 25, 0.45);
  border-radius: 8px;
  background: linear-gradient(180deg, #134c3c 0%, #0e3f32 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(11, 45, 35, 0.12);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.sample-link {
  display: grid;
  gap: 4px;
  max-width: 360px;
  color: inherit;
  text-decoration: none;
}

.sample-link-label {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(16, 24, 21, 0.42);
  font-weight: 700;
}

.sample-link-title {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ps-ink);
}

.sample-link small {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(16, 24, 21, 0.54);
}

.sample-link:hover .sample-link-title {
  color: var(--ps-green);
}

.sample-link:hover small {
  color: rgba(16, 24, 21, 0.66);
}

.highlight-phrase {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.highlight-phrase::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.055em;
  right: -0.055em;
  top: 0.08em;
  bottom: 0.06em;
  border-radius: 0.045em;
  background: rgba(239, 218, 123, 0.5);
  opacity: 1;
  transform: none;
  pointer-events: none;
}

.hero-base {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  mix-blend-mode: normal;
  filter: drop-shadow(0 24px 52px rgba(16, 24, 21, 0.08));
}

.hero-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.connector {
  fill: none;
  stroke: rgba(11, 45, 35, 0.28);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  opacity: 0;
  animation: lineDraw 1.38s ease forwards,
    lineScan 11s ease-in-out calc(var(--line-delay, 0.42s) + 3.8s) infinite;
}

.source-dot {
  fill: var(--ps-green);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: dotPing 0.98s ease forwards,
    dotScan 11s ease-in-out calc(var(--dot-delay, 0.3s) + 3.75s) infinite;
}

.c1 {
  --line-delay: 0.42s;
  animation-delay: 0.42s, 4.22s;
}

.c2 {
  --line-delay: 1.58s;
  animation-delay: 1.58s, 5.38s;
}

.c3 {
  --line-delay: 2.74s;
  animation-delay: 2.74s, 6.54s;
}

.c4 {
  --line-delay: 3.9s;
  animation-delay: 3.9s, 7.7s;
}

.d1 {
  --dot-delay: 0.24s;
  animation-delay: 0.24s, 3.99s;
}

.d2 {
  --dot-delay: 1.4s;
  animation-delay: 1.4s, 5.15s;
}

.d3 {
  --dot-delay: 2.56s;
  animation-delay: 2.56s, 6.31s;
}

.d4 {
  --dot-delay: 3.72s;
  animation-delay: 3.72s, 7.47s;
}

@keyframes lineDraw {
  from {
    opacity: 0;
    stroke-dashoffset: 24;
  }

  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes dotPing {
  0% {
    opacity: 0;
    transform: scale(0.45);
  }

  70% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    opacity: 0.85;
    transform: scale(1);
  }
}

.hero-note {
  position: absolute;
  min-width: 156px;
  padding: 14px 16px;
  border: 1px solid rgba(16, 24, 21, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 245, 239, 0.86)),
    url("/assets/brand/textures/paper-fiber.webp");
  background-size: auto, 620px 620px;
  box-shadow: 0 12px 24px rgba(16, 24, 21, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(8px);
  animation: noteIn 0.94s ease var(--note-delay, 0.6s) forwards,
    noteScan 11s ease-in-out calc(var(--note-delay, 0.6s) + 3.75s) infinite;
}

.hero-note strong {
  display: block;
  color: var(--ps-ink);
  font-size: 13px;
  line-height: 1.2;
}

.hero-note span,
.hero-note small {
  display: block;
  margin-top: 4px;
  color: var(--ps-muted);
  font-size: 12px;
  line-height: 1.4;
}

.note-effective {
  top: 15%;
  right: -4%;
  --note-delay: 0.6s;
}

.note-term {
  top: 30%;
  right: -5%;
  --note-delay: 1.76s;
}

.note-law {
  top: 49%;
  right: -4%;
  --note-delay: 2.92s;
}

.note-counterparty {
  top: 66%;
  right: -3%;
  --note-delay: 4.08s;
}

@keyframes noteIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lineScan {
  0%,
  12%,
  100% {
    opacity: 0.36;
  }

  6% {
    opacity: 0.95;
  }
}

@keyframes dotScan {
  0%,
  12%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }

  6% {
    opacity: 1;
    transform: scale(1.38);
  }
}

@keyframes noteScan {
  0%,
  12%,
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(16, 24, 21, 0.12);
    box-shadow: 0 12px 24px rgba(16, 24, 21, 0.06);
  }

  6% {
    opacity: 1;
    transform: translateY(-2px) scale(1.025);
    border-color: rgba(49, 93, 76, 0.36);
    box-shadow: 0 18px 36px rgba(16, 24, 21, 0.11);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .line,
  .connector,
  .source-dot,
  .hero-note {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .highlight-phrase::before {
    animation: none;
    opacity: 1;
  }
}

.hero-cloud,
.hero-agreement,
.hero-artwork,
.artifact-wash,
.agreement-stack,
.agreement-page,
.extracted-term,
.term-one,
.term-two,
.term-three,
.term-four,
.verified-stamp {
  display: none !important;
}

/* Subtle watercolour splash filling the empty left/centre of the hero. */
.hero-watercolor {
  position: absolute;
  z-index: 2;
  left: clamp(-180px, -6vw, -40px);
  top: 50%;
  width: min(1000px, 70%);
  height: 128%;
  transform: translateY(-50%);
  background: url("/assets/brand/textures/hero-watercolor-cloud.png") left center / contain no-repeat;
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero {
    padding: 39px 0 50px;
  }

  .hero-watercolor {
    width: min(620px, 96%);
    opacity: 0.42;
  }

  .hero-copy-texture {
    display: none;
  }

  .hero h1 {
    font-size: clamp(54px, 14vw, 72px);
  }

  .hero-subhead {
    font-size: 17px;
  }

  .hero-actions {
    align-items: flex-start;
    gap: 18px;
  }

  .hero-action-divider {
    display: none;
  }

  .sample-link {
    max-width: 100%;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-copy {
    max-width: 680px;
  }
}

@media (max-width: 760px) {
  .hero {
    min-height: auto;
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(245, 240, 230, 0.99) 0%, rgba(245, 240, 230, 0.96) 68%, rgba(245, 240, 230, 0.70) 100%);
  }

  .hero-bg-image {
    background-position: 68% 112%;
    background-size: auto 30%;
    opacity: 0.28;
  }

  .hero-copy,
  .hero-subhead,
  .hero-kicker {
    max-width: 100%;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(40px, 11vw, 48px);
  }

  .hero h1 .line {
    width: auto;
    white-space: normal;
  }

  .hero .button-primary {
    width: 100%;
    max-width: 100%;
  }

  .sample-link {
    max-width: 100%;
  }
}

/* Problem source-citation demo */
.problem-source-demo {
  padding: clamp(88px, 9vw, 126px) 0 clamp(96px, 10vw, 140px);
  background:
    linear-gradient(180deg, rgba(247, 245, 239, 0.88), rgba(243, 245, 242, 0.82)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 900px 900px;
}

.source-demo-inner {
  width: min(1280px, calc(100vw - 48px));
}

.problem-copy {
  max-width: 940px;
  margin: 0 auto clamp(42px, 5vw, 68px);
  text-align: center;
}

.problem-copy h2 {
  margin: 0;
  color: var(--ps-ink);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.35vw, 64px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.problem-copy p:not(.eyebrow) {
  max-width: 860px;
  margin: 24px auto 0;
  color: var(--ps-muted);
  font-size: 19px;
  line-height: 1.65;
}

/* Shared workspace surface: the PDF (source) and the source-linked findings sit
   inside one paper panel so they read as a single product demo. */
.source-intelligence-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(28px, 3vw, 44px);
  align-items: start;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(250, 248, 241, 0.72), rgba(245, 241, 229, 0.52)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 900px 900px;
  border: 1px solid rgba(80, 67, 45, 0.08);
  box-shadow: 0 24px 70px rgba(16, 24, 21, 0.06);
}

.agreement-demo {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pdf-page-frame {
  position: relative;
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pdf-page-stage {
  position: relative;
  width: min(90%, 774px);
  margin: 0 auto;
  aspect-ratio: 768 / 994;
  border-radius: 3px;
  box-shadow:
    0 24px 70px rgba(16, 24, 21, 0.12),
    0 2px 8px rgba(16, 24, 21, 0.06);
}

.pdf-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: #fbfaf5;
  object-fit: contain;
  transform: none !important;
  transition: opacity 1000ms ease;
}

.pdf-page-next {
  z-index: 1;
  opacity: 1;
}

.pdf-page-current {
  z-index: 3;
  opacity: 1;
}

.pdf-page-frame.is-fading .pdf-page-current {
  opacity: 0;
}

.pdf-page-frame.is-resetting .pdf-page-current {
  transition: none;
}

.source-highlight-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 1;
  pointer-events: none;
}

.pdf-page-frame.is-fading .source-highlight-layer {
  z-index: 2;
  opacity: 1;
}

.source-highlight,
.clause-highlight {
  position: absolute;
  border: 1px solid rgba(49, 93, 76, 0.28);
  border-radius: 8px;
  background: rgba(111, 139, 125, 0.18);
  box-shadow: inset 3px 0 0 var(--ps-green-2);
  opacity: 0;
  animation: highlightFadeIn 180ms ease forwards;
}

.pdf-citation-dot,
.pdf-citation {
  position: absolute;
  z-index: 6;
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #2f6b58;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  box-shadow:
    0 0 0 3px rgba(49, 93, 76, 0.1),
    0 8px 16px rgba(16, 24, 21, 0.1);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: citationFadeIn 180ms ease forwards;
  animation-delay: 60ms;
}

@keyframes highlightFadeIn {
  to {
    opacity: 1;
  }
}

@keyframes citationFadeIn {
  to {
    opacity: 1;
  }
}

/* Source-linked findings — a simple stack of full-width paper strips. No
   protruding tabs or lips: index, title, page and preview all live inside the
   strip. The active strip slides up slightly and the next strip laps over its
   lower edge, so it reads as a strip pulled from a connected stack, not a card. */
.source-tabs {
  position: relative;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  overflow: visible;
}

.source-tabs::before {
  content: "SOURCE-LINKED FINDINGS";
  display: block;
  margin: 0 0 12px;
  color: var(--ps-green-2);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.source-strip {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ps-ink);
  text-align: left;
  cursor: pointer;
  overflow: visible;
  transition: transform 0.2s ease;
}

/* connected stack — overlap the 1px borders so the strips read as one pile */
.source-strip + .source-strip {
  margin-top: -1px;
}

.source-strip-inner {
  position: relative;
  display: block;
  min-height: 72px;
  padding: 16px 18px;
  border: 1px solid rgba(84, 72, 50, 0.14);
  /* Square corners on the body so the stack's right edge is one continuous line
     top-to-bottom — only the outer corners of the whole stack are rounded (see
     :first-of-type / :last-of-type). */
  border-radius: 0;
  background: #f4efdf;
  /* paper-stack depth: each strip lifts against the one above it (a soft contact
     shadow cast upward) plus a faint top-edge highlight — reads as layered
     sheets, not isolated cards */
  box-shadow:
    0 -2px 5px rgba(45, 38, 24, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* the top sheet rounds the stack's top-right corner; top-left stays square */
.source-strip:first-of-type .source-strip-inner {
  border-radius: 0 8px 0 0;
}

/* the bottom sheet rounds the stack's lower corners (top stays square so the
   right edge stays continuous with the row above) */
.source-strip:last-of-type .source-strip-inner {
  border-radius: 0 0 8px 8px;
}

.source-strip-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.source-strip-index {
  padding-top: 2px;
  color: var(--ps-green-2);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.source-strip-copy {
  min-width: 0;
}

.source-strip-title {
  display: block;
  color: var(--ps-ink);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
}

.source-strip-preview {
  display: block;
  margin-top: 4px;
  color: rgba(16, 24, 21, 0.48);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-strip-page {
  padding-top: 2px;
  color: rgba(16, 24, 21, 0.56);
  font-size: 12px;
  line-height: 1.2;
}

.source-strip-detail {
  display: none;
  padding: 10px 56px 4px 58px;
}

.source-strip.is-active .source-strip-preview {
  display: none;
}

.source-strip.is-active .source-strip-detail {
  display: block;
}

.source-strip-detail .finding-line {
  display: block;
  margin: 7px 0;
  color: var(--ps-ink);
  font-size: 14px;
  line-height: 1.45;
}

.source-strip-detail .finding-line:first-child {
  margin-top: 0;
}

.citation-badge {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-left: 5px;
  vertical-align: text-bottom;
  border-radius: 999px;
  background: #2f6b58;
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.platform-evidence {
  display: block;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(84, 72, 50, 0.12);
  border-radius: 4px;
  background: #fbf7ec;
  color: var(--ps-muted);
  font-size: 12px;
  line-height: 1.4;
}

.platform-evidence strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ps-green-2);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

/* hover (inactive) — slightly lighter solid paper */
.source-strip:not(.is-active):hover .source-strip-inner {
  background: #f7f2e4;
}

.source-strip:focus-visible {
  z-index: 30;
  outline: 3px solid rgba(49, 93, 76, 0.24);
  outline-offset: 2px;
}

/* active — same width, slides UP only (no sideways move). Soft paper shadow. The
   next strip laps over its lower edge so its bottom corner is hidden and it reads
   as embedded in the stack, not a standalone card. */
.source-strip.is-active {
  z-index: 2;
  transform: translateY(-6px);
}

.source-strip.is-active .source-strip-inner {
  padding-bottom: 26px;
  border-color: rgba(84, 72, 50, 0.17);
  background: #fbf7ea;
  /* stronger than the other strips but still a soft paper shadow (its lower drop
     is tucked under the next strip, so it never reads as a floating card) */
  box-shadow:
    0 -3px 8px rgba(45, 38, 24, 0.08),
    0 8px 18px rgba(45, 38, 24, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* the next strip sits above the active one and laps over its bottom edge */
.source-strip.is-active + .source-strip {
  position: relative;
  z-index: 3;
  margin-top: -14px;
}

.problem-transition {
  max-width: 820px;
  margin: 48px auto 0;
  color: var(--ps-ink);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.2vw, 38px);
  line-height: 1.2;
  text-align: center;
}

.problem-transition span {
  color: var(--ps-green);
}

.output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.output-grid article {
  min-height: 260px;
  padding: clamp(30px, 4vw, 46px);
  border: 1px solid var(--ps-line);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(247, 245, 239, 0.48)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 760px 760px;
  box-shadow: 0 16px 44px rgba(16, 24, 21, 0.045);
}

.output-grid span {
  display: inline-flex;
  margin-bottom: 36px;
  color: var(--ps-green-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.output-grid h3 {
  margin: 0;
  color: var(--ps-ink);
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.output-grid p {
  margin: 18px 0 0;
  color: var(--ps-muted);
  font-size: 17px;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .source-intelligence-layout {
    grid-template-columns: 1fr;
  }

  .problem-copy {
    max-width: 860px;
  }

  .source-tabs {
    order: 2;
    max-height: none;
  }

  .agreement-demo {
    order: 1;
  }
}

@media (max-width: 700px) {
  .output-grid {
    grid-template-columns: 1fr;
  }

  .source-intelligence-layout {
    padding: 16px;
    border-radius: 18px;
  }

  .source-strip.is-active {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdf-page {
    transition: opacity 160ms ease;
  }
}

/* How it works process section */
.process-section {
  position: relative;
  overflow: hidden;
  padding: clamp(68px, 6.5vw, 96px) 0 clamp(105px, 10.2vw, 145px);
  background:
    linear-gradient(180deg, rgba(247, 245, 239, 0.9), rgba(239, 237, 230, 0.84)),
    url("/assets/brand/textures/paper-smooth.webp");
  background-size: auto, 900px 900px;
}

.process-section .section-inner {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.process-section .section-heading {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
}

.process-section .eyebrow {
  margin: 0 0 18px;
  color: rgba(16, 24, 21, 0.52);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.process-section .section-heading h2 {
  margin: 0;
  color: var(--ps-ink);
  font-family: var(--font-display);
  font-size: clamp(50px, 5vw, 76px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.process-section .section-heading h2 span {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.process-section .section-heading h2 mark {
  display: inline-block;
  padding: 0 0.065em 0.045em;
  border-radius: 0.035em;
  color: var(--ps-green-2);
  background: rgba(111, 139, 125, 0.32);
  font: inherit;
  letter-spacing: inherit;
}

.process-section .section-heading > p:not(.eyebrow) {
  max-width: 740px;
  margin: 28px auto 0;
  color: var(--ps-muted);
  font-size: 19px;
  line-height: 1.65;
}

.process-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  pointer-events: none;
}

.process-bg-left,
.process-bg-right {
  position: absolute;
  width: min(44vw, 620px);
  height: auto;
  opacity: 0.66;
  filter: saturate(0.9) contrast(1.04);
  mix-blend-mode: multiply;
}

.process-bg-left {
  left: max(-24px, calc((100vw - 1440px) / 2 + 10px));
  top: 22%;
}

.process-bg-right {
  width: min(48vw, 680px);
  right: max(-84px, calc((100vw - 1440px) / 2 - 46px));
  top: 16%;
}

.process-card {
  position: relative;
  z-index: 3;
  width: min(1040px, calc(100% - 120px));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 72px auto 0;
  padding: 56px 44px 48px;
  border: 1px solid rgba(16, 24, 21, 0.12);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 24px 70px rgba(16, 24, 21, 0.08);
  backdrop-filter: blur(8px);
  animation: processFadeUp 0.65s ease both;
}

.process-line {
  position: absolute;
  z-index: 0;
  top: 96px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: rgba(16, 24, 21, 0.12);
  transform: scaleX(0);
  transform-origin: left center;
  animation: processLineDraw 0.7s ease 0.18s forwards;
}

.process-step {
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  animation: stepIn 0.5s ease forwards;
}

.process-step:nth-of-type(1) {
  animation-delay: 0.1s;
}

.process-step:nth-of-type(2) {
  animation-delay: 0.18s;
}

.process-step:nth-of-type(3) {
  animation-delay: 0.26s;
}

.process-step:nth-of-type(4) {
  animation-delay: 0.34s;
}

.process-step:nth-of-type(5) {
  animation-delay: 0.42s;
}

.process-icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
  border: 1px solid rgba(16, 24, 21, 0.12);
  border-radius: 999px;
  background: rgba(247, 245, 239, 0.78);
}

.process-icon img {
  display: block;
  width: 48px;
  height: 48px;
}

.process-step h3 {
  margin: 0;
  color: var(--ps-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.process-step p {
  max-width: 160px;
  margin: 12px auto 0;
  color: var(--ps-muted);
  font-size: 15px;
  line-height: 1.5;
}

.source-truth-note {
  max-width: 980px;
  margin: 53px auto 0;
  color: var(--ps-ink);
  font-family: var(--font-display);
  font-size: clamp(27px, 2.6vw, 42px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-align: center;
}

@keyframes processFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes processLineDraw {
  to {
    transform: scaleX(1);
  }
}

@keyframes stepIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .process-section {
    padding: 84px 0 96px;
  }

  .process-bg-left,
  .process-bg-right {
    display: none;
  }

  .process-section .section-heading h2 {
    font-size: clamp(42px, 12vw, 58px);
  }

  .process-section .section-heading h2 span {
    white-space: normal;
  }

  .process-section .section-heading > p:not(.eyebrow) {
    font-size: 17px;
  }

  .process-card {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 42px;
    padding: 36px 24px;
  }

  .process-line {
    display: none;
  }

  .process-icon {
    width: 76px;
    height: 76px;
    margin-bottom: 18px;
  }

  .process-icon img {
    width: 42px;
    height: 42px;
  }

  .process-step p {
    max-width: 280px;
  }
}

/* =========================================================
   Insights feature demo — tabbed product UI mockup
   ========================================================= */
.feature-demo {
  --fd-line: rgba(16, 24, 21, 0.1);
  --fd-line-soft: rgba(16, 24, 21, 0.07);
  --fd-card: #ffffff;
  margin-top: clamp(40px, 5vw, 60px);
}

/* Tab bar */
/* Folder-tab system: tabs are the top lip, panel is the folder body.
   No stacking context on the row, so individual tabs can sit above the
   panel (active) or tuck behind it (inactive) via z-index. */
.fd-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: clamp(10px, 1.6vw, 24px);
  padding-inline: clamp(16px, 3.4vw, 44px);
  margin-bottom: -16px;
}

.fd-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px 20px 20px;
  border: 1px solid rgba(28, 45, 38, 0.09);
  border-bottom: 0;
  /* Flat bottom so the lip merges into the body with no rounded notch. */
  border-radius: 18px 18px 0 0;
  background: #efebe1;
  opacity: 0.7;
  transform: translateY(16px);
  text-align: left;
  cursor: pointer;
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background 240ms ease, opacity 240ms ease;
}

.fd-tab:hover:not(.is-active) {
  opacity: 0.88;
  transform: translateY(9px);
}

.fd-tab.is-active {
  z-index: 5;
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(28, 45, 38, 0.09);
  /* Exact same paper as the folder body — no shadow, so nothing separates them. */
  background: #fffdf7;
  box-shadow: none;
}

/* Bridge: paints the paper tone down over the body's top border so the active
   tab and body read as one continuous sheet (no seam, no gap). */
.fd-tab.is-active::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -18px;
  height: 20px;
  background: #fffdf7;
  z-index: 1;
}

/* Count badges on inactive tabs; hidden once a tab is selected. */
.fd-tab-badge {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  min-width: 23px;
  height: 21px;
  padding: 0 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(28, 45, 38, 0.14);
  background: rgba(249, 246, 238, 0.9);
  color: #5d6356;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fd-tab.is-active .fd-tab-badge {
  display: none;
}

.fd-tab-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: rgba(11, 45, 35, 0.06);
  color: var(--ps-green-2);
}

.fd-tab.is-active .fd-tab-icon {
  background: rgba(11, 45, 35, 0.1);
  color: var(--ps-green);
}

.fd-tab-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fd-tab-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.fd-tab-text strong {
  color: rgba(16, 24, 21, 0.6);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.fd-tab.is-active .fd-tab-text strong {
  color: var(--ps-ink);
}

.fd-tab-text small {
  color: rgba(16, 24, 21, 0.42);
  font-size: 12.5px;
  line-height: 1.25;
}

/* Folder body — the paper sheet the active tab merges into. The tabs row
   pulls it up (margin-bottom:-16px) so the active lip overlaps the sheet. */
.fd-body {
  position: relative;
  z-index: 2;
  padding: clamp(30px, 3.6vw, 54px);
  border: 1px solid rgba(28, 45, 38, 0.09);
  /* Small top radius (folder shoulders), generous bottom — not a full card. */
  border-radius: 6px 6px 28px 28px;
  /* Top tone is exactly the active tab's #fffdf7 so the merge is seamless. */
  background: linear-gradient(180deg, #fffdf7 0%, #fcf9f2 50%, #f8f4ec 100%);
  /* Soft, grounded shadow — paper resting on the page, not a floating card. */
  box-shadow: 0 14px 34px rgba(35, 30, 22, 0.06), 0 2px 5px rgba(35, 30, 22, 0.04);
}

/* Tiny protruding paper-layer hints — stacked sheets behind the folder. */
.fd-body::before,
.fd-body::after {
  content: "";
  position: absolute;
  bottom: -7px;
  width: 34%;
  height: 15px;
  border: 1px solid rgba(28, 45, 38, 0.07);
  border-radius: 0 0 18px 18px;
  background: rgba(247, 244, 236, 0.9);
  z-index: -1;
}

.fd-body::before { left: 5%; transform: rotate(-0.5deg); }
.fd-body::after { right: 5%; transform: rotate(0.5deg); }

/* Framed product screenshot inside the folder body. */
.fd-frame {
  position: relative;
  width: 100%;
  border: 1px solid rgba(28, 45, 38, 0.1);
  border-radius: 20px;
  background: #fffefa;
  box-shadow: 0 18px 50px rgba(35, 30, 22, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  overflow: hidden;
}

.fd-panels {
  position: relative;
}

.fd-panel {
  padding: clamp(18px, 2.2vw, 30px);
}

.fd-kicker {
  margin: 0;
  color: var(--ps-muted);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.fd-panel[hidden] {
  display: none;
}

.fd-h {
  margin: 0;
  color: var(--ps-ink);
  font-family: var(--font-sans);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fd-sub {
  margin: 7px 0 0;
  color: var(--ps-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

/* Timeline two-column */
.fd-tl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 38px);
  align-items: start;
}

.fd-tl-col {
  min-width: 0;
}

.fd-tl-main {
  min-width: 0;
}

/* Pane explanatory labels — part of the product-showcase composition. */
.fd-pane-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fd-line-soft);
}

.fd-pane-label {
  display: block;
  color: var(--ps-green-2);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.fd-pane-help {
  margin: 6px 0 0;
  color: var(--ps-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Stat cards */
.fd-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

.fd-stats--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.fd-stat {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid var(--fd-line-soft);
  border-radius: 12px;
  background: rgba(247, 245, 239, 0.5);
}

.fd-chip {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  border-radius: 8px;
}

.fd-chip svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fd-chip--green { background: rgba(47, 93, 76, 0.12); color: #2f5d4c; }
.fd-chip--amber { background: rgba(193, 142, 38, 0.16); color: #9a6b12; }
.fd-chip--blue  { background: rgba(70, 100, 150, 0.13); color: #3f5f8c; }
.fd-chip--red   { background: rgba(178, 76, 60, 0.13);  color: #a8432f; }

.fd-stat-body {
  display: grid;
  min-width: 0;
}

.fd-stat-body strong {
  color: var(--ps-ink);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.fd-stat-body span {
  margin-top: 2px;
  color: var(--ps-ink);
  font-size: 12px;
  font-weight: 600;
}

.fd-stat-body small {
  color: rgba(16, 24, 21, 0.46);
  font-size: 10.5px;
  line-height: 1.3;
}

/* Tables */
.fd-table {
  margin-top: 16px;
  border: 1px solid var(--fd-line-soft);
  border-radius: 14px;
  overflow: hidden;
}

.fd-tr {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 0.95fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid var(--fd-line-soft);
  font-size: 12px;
}

.fd-table--obl .fd-tr {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr) minmax(0, 0.95fr) auto;
}

.fd-tr:first-child {
  border-top: 0;
}

.fd-tr--head {
  padding: 11px 18px;
  background: rgba(247, 245, 239, 0.7);
  color: rgba(16, 24, 21, 0.42);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fd-tr:not(.fd-tr--head):hover {
  background: rgba(247, 245, 239, 0.45);
}

.fd-tr > span {
  min-width: 0;
  color: var(--ps-muted);
}

.fd-cell-main {
  display: grid;
  gap: 2px;
}

.fd-cell-main b {
  color: var(--ps-ink);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.fd-cell-main i,
.fd-cell-date i {
  color: rgba(16, 24, 21, 0.44);
  font-style: normal;
  font-size: 11px;
}

.fd-cell-date {
  display: grid;
  gap: 2px;
}

.fd-cell-date b {
  color: var(--ps-ink);
  font-size: 12px;
  font-weight: 600;
}

/* Status pills */
.fd-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  font-style: normal;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.fd-pill--due    { background: rgba(193, 142, 38, 0.16); color: #8a5e0e; }
.fd-pill--ok     { background: rgba(47, 93, 76, 0.13);   color: #2c5a49; }
.fd-pill--review { background: rgba(178, 76, 60, 0.12);  color: #a8432f; }
.fd-pill--fin    { background: rgba(70, 100, 150, 0.13); color: #3f5f8c; }
.fd-pill--risk   { background: rgba(178, 76, 60, 0.14);  color: #a3392a; }

.fd-more {
  display: inline-block;
  margin-top: 18px;
  color: var(--ps-green);
  font-size: 13.5px;
  font-weight: 650;
}

.fd-more:hover { text-decoration: underline; }

/* Document viewer */
.fd-doc {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fd-line-soft);
  border-radius: 18px;
  background: rgba(247, 245, 239, 0.4);
  overflow: hidden;
}

.fd-doc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
}

.fd-doc-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: rgba(11, 45, 35, 0.07);
  color: var(--ps-green-2);
}

.fd-doc-ico svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.fd-doc-meta { display: grid; gap: 2px; min-width: 0; }

.fd-doc-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ps-ink);
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.fd-doc-meta small { color: rgba(16, 24, 21, 0.46); font-size: 12px; }

.fd-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 650;
  font-style: normal;
}

.fd-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.fd-dot--ok { color: #2f7d5e; }

.fd-doc-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 18px;
  border-top: 1px solid var(--fd-line-soft);
  border-bottom: 1px solid var(--fd-line-soft);
  background: rgba(255, 255, 255, 0.6);
  color: rgba(16, 24, 21, 0.5);
  font-size: 12px;
}

.fd-doc-search svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.fd-doc-zoom { display: inline-flex; align-items: center; gap: 8px; }
.fd-doc-zoom b { color: var(--ps-ink); font-weight: 600; }
.fd-doc-page { margin-left: auto; color: rgba(16, 24, 21, 0.55); }
.fd-doc-dots { font-size: 15px; letter-spacing: 1px; }

.fd-doc-body {
  flex: 1;
  padding: 16px 18px;
  font-family: Georgia, "Times New Roman", serif;
  color: #2a322e;
}

.fd-clause {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 7px;
  margin: 0 0 12px;
  padding: 2px 28px 2px 0;
  font-size: 12px;
  line-height: 1.55;
}

.fd-clause:last-child { margin-bottom: 0; }
.fd-cnum { color: rgba(16, 24, 21, 0.5); }
.fd-clause u { text-decoration: underline; }

.fd-clause--hl {
  padding: 10px 30px 10px 10px;
  margin-left: -10px;
  border-radius: 8px;
  background: rgba(47, 125, 94, 0.13);
}

.fd-cite {
  position: absolute;
  top: 8px;
  right: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ps-green);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.fd-doc-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--fd-line-soft);
  background: rgba(255, 255, 255, 0.6);
  color: rgba(16, 24, 21, 0.5);
  font-size: 11.5px;
  letter-spacing: 0.01em;
}

.fd-doc-foot b {
  color: var(--ps-green-2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Agreement summary */
.fd-sum-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.fd-sum-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.fd-sum-actions span {
  padding: 8px 13px;
  border: 1px solid var(--fd-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ps-ink);
  font-size: 12.5px;
  font-weight: 600;
}

.fd-sum-label {
  margin: 0 0 12px;
  color: var(--ps-green-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fd-sum-text {
  max-width: 880px;
  margin: 0 0 16px;
  color: #2c3530;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
}

.fd-sum-text mark {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(47, 125, 94, 0.15);
  color: #173f31;
  font-weight: 600;
}

.fd-sum-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 22px 0 0;
  color: rgba(16, 24, 21, 0.5);
  font-size: 13.5px;
}

.fd-sum-eff b { color: var(--ps-ink); font-weight: 650; }

.fd-sum-rows {
  display: grid;
  gap: 1px;
  margin-top: 18px;
  border-top: 1px solid var(--fd-line-soft);
}

.fd-sum-row {
  padding: 14px 2px;
  border-bottom: 1px solid var(--fd-line-soft);
  color: rgba(16, 24, 21, 0.62);
  font-size: 13.5px;
  font-weight: 550;
}

.fd-signal {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid rgba(193, 142, 38, 0.3);
  border-radius: 14px;
  background: rgba(193, 142, 38, 0.06);
}

.fd-signal-top { color: #8a5e0e; font-size: 12.5px; font-weight: 700; }
.fd-signal b { color: var(--ps-ink); font-size: 14.5px; font-weight: 650; }
.fd-signal small { color: var(--ps-muted); font-size: 13px; }

/* Ask AI */
.fd-ask-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
}

.fd-ask-meta {
  margin: 0 0 10px;
  color: rgba(16, 24, 21, 0.4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fd-ask-q {
  margin: 0;
  color: var(--ps-ink);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.fd-ask-based {
  margin: 14px 0 0;
  color: #2f7d5e;
  font-size: 13px;
  font-weight: 600;
}

.fd-mini-label {
  margin: 24px 0 8px;
  color: rgba(16, 24, 21, 0.4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fd-ask-answer {
  margin: 0;
  color: var(--ps-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
}

.fd-ask-points {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.fd-ask-points li {
  position: relative;
  padding-left: 18px;
  color: var(--ps-muted);
  font-size: 14px;
  line-height: 1.55;
}

.fd-ask-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ps-green-soft);
}

.fd-cite--sm {
  position: static;
  display: inline-grid;
  width: 17px; height: 17px;
  vertical-align: middle;
  margin-left: 3px;
  font-size: 10px;
}

.fd-ask-note {
  margin-top: 20px;
  padding: 12px 15px;
  border: 1px solid rgba(193, 142, 38, 0.3);
  border-radius: 11px;
  background: rgba(193, 142, 38, 0.07);
  color: #8a5e0e;
  font-size: 12.5px;
  line-height: 1.45;
}

.fd-ask-chips { display: flex; flex-wrap: wrap; gap: 9px; }

.fd-ask-chips span {
  padding: 9px 14px;
  border: 1px solid var(--fd-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ps-ink);
  font-size: 12.5px;
  font-weight: 550;
}

.fd-ask-side {
  padding: 20px;
  border: 1px solid var(--fd-line-soft);
  border-radius: 16px;
  background: rgba(247, 245, 239, 0.5);
}

.fd-ask-side .fd-mini-label { margin-top: 0; }

.fd-src {
  margin-bottom: 10px;
  padding: 14px 15px;
  border: 1px solid var(--fd-line-soft);
  border-radius: 12px;
  background: var(--fd-card);
}

.fd-src.is-active {
  border-color: rgba(47, 93, 76, 0.4);
  box-shadow: 0 0 0 2px rgba(47, 93, 76, 0.1);
}

.fd-src-name { display: block; color: var(--ps-ink); font-size: 13px; font-weight: 650; }
.fd-src-name i { color: rgba(16, 24, 21, 0.45); font-style: normal; font-weight: 400; }

.fd-src-hit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(47, 93, 76, 0.1);
  color: #2c5a49;
  font-size: 12px;
  font-weight: 550;
}

.fd-src.is-active .fd-src-hit { background: var(--ps-green); color: #fff; }

.fd-src-hit b {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 10px;
}

.fd-src.is-active .fd-src-hit b { background: rgba(255, 255, 255, 0.25); }
.fd-src:not(.is-active) .fd-src-hit b { background: rgba(47, 93, 76, 0.2); }

.fd-src-note {
  margin-top: 14px;
  color: rgba(16, 24, 21, 0.42);
  font-size: 11.5px;
  line-height: 1.45;
}

/* Responsive */
@media (max-width: 1040px) {
  .fd-tl-grid,
  .fd-ask-grid {
    grid-template-columns: 1fr;
  }
  .fd-stats--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  /* Folder tabs become a horizontal scroller — never stack vertically. */
  .fd-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .fd-tabs::-webkit-scrollbar { display: none; }
  .fd-tab {
    flex: 0 0 auto;
    width: min(64vw, 240px);
  }
  .fd-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .fd-tab-text small { display: none; }
  .fd-tr,
  .fd-table--obl .fd-tr {
    grid-template-columns: minmax(0, 1.4fr) auto;
    gap: 6px 12px;
  }
  .fd-tr--head { display: none; }
  .fd-tr > span:nth-child(2) { display: none; }
  .fd-cell-date { text-align: right; }
  .fd-stats,
  .fd-stats--5 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   Insights showcase — image folder shell + HTML overlay (POC)
   The folder shape/texture/shadow come from the shell image; all
   text and screenshot cards are real HTML layered on top.
   ============================================================ */
/* Fixed aspect-ratio stage: every shell maps to the exact same box, so
   switching tabs never shifts position or changes the section height. */
.insights-stage {
  position: relative;
  width: min(1560px, 100%);
  margin: clamp(36px, 4.5vw, 60px) auto 0;
  aspect-ratio: 1586 / 992;
}

/* Chroma-keyed transparent folder shell — sits directly on the paper section.
   drop-shadow follows the folder silhouette (not a rectangle); the asset
   already carries depth, so keep this light. */
.folderShell {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 38px rgba(35, 30, 22, 0.08));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Tab lips — transparent buttons positioned over the shell's printed tabs. */
.tabHitAreas {
  position: absolute;
  inset: 0;
}

.tabHit {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 1.4%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  /* Recessed lip spans ~9.4%-15.4% of the shell; centre the label within that
     box (justify-content:center) so it doesn't hug the top edge of the lip. */
  top: 9.4%;
  height: 6%;
  transition: top 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    height 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Per-tab horizontal positions, measured from the shell's printed lips:
   raised tab x13-30%, then tabs at 32-52 / 52-70 / 70-88%. */
.tabHit[data-tab="timeline"]    { left: 14%;   width: 16%; }
.tabHit[data-tab="obligations"] { left: 33%;   width: 18%; }
.tabHit[data-tab="summary"]     { left: 53%;   width: 17%; }
.tabHit[data-tab="askAi"]       { left: 71.5%; width: 17%; }

/* Active tab is raised + taller (top 5.9%, ~8.6% tall): centre a LARGER label
   within it — it grows and stays centred rather than jumping to the top. */
.tabHit.is-active {
  top: 5.9%;
  height: 8.6%;
}

.tabHit.is-active .tabHit-label { font-size: clamp(13px, 1.15vw, 18px); }
.tabHit.is-active .tabHit-sub { font-size: clamp(9px, 0.8vw, 12.5px); }

.tabHit-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(16, 24, 21, 0.5);
  font-family: var(--font-sans);
  font-size: clamp(11px, 0.95vw, 15px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  transition: font-size 240ms cubic-bezier(0.22, 0.61, 0.36, 1), color 200ms ease;
}

.tabHit.is-active .tabHit-label { color: var(--ps-ink); }

.tabHit-sub {
  color: rgba(16, 24, 21, 0.4);
  font-family: var(--font-sans);
  font-size: clamp(8px, 0.72vw, 11px);
  line-height: 1.1;
  transition: font-size 240ms cubic-bezier(0.22, 0.61, 0.36, 1), color 200ms ease;
}

.tabHit.is-active .tabHit-sub { color: rgba(16, 24, 21, 0.55); }

/* Per-active-state tuning. Each shell raises a different (wider) tab and seats
   the recessed lips at a slightly different height — values measured per shell.
   The active tab's box is centred on its raised lip; recessed lips get the
   shell's recessed top. (Base block above = the Timeline-active default.) */

/* Obligations active (folder2): recessed lips sit higher; centre the raised one. */
[data-active="obligations"] .tabHit { top: 7.9%; }
[data-active="obligations"] .tabHit.is-active { top: 5.2%; }
[data-active="obligations"] .tabHit[data-tab="obligations"] { left: 31%; width: 18%; }

/* Agreement summary active (folder3): recessed lips a touch lower. */
[data-active="summary"] .tabHit { top: 9.9%; }
[data-active="summary"] .tabHit.is-active { top: 6.5%; }
[data-active="summary"] .tabHit[data-tab="summary"] { left: 51%; width: 18%; }

/* Ask AI active (folder4): recessed lips a touch higher; nudge summary left. */
[data-active="askAi"] .tabHit { top: 9.2%; }
[data-active="askAi"] .tabHit.is-active { top: 5.8%; }
[data-active="askAi"] .tabHit[data-tab="askAi"] { left: 69%; width: 18%; }
[data-active="askAi"] .tabHit[data-tab="summary"] { left: 51.5%; }

/* The folder PAGE occupies ~8.2%-91.7% of the stage (measured from the shell
   alpha), so inset the content well inside that — at 5.8% it spilled past the
   paper edges. ~11.5% keeps it clearly within the page with padding. */
.folderContent {
  position: absolute;
  left: 11.5%;
  right: 11.5%;
  top: 17.5%;
  bottom: 13%;
  overflow: hidden;
  display: grid;
}

.fc-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.fc-panel[hidden] { display: none; }

/* Editorial intro — matches the serif headings of the sections around it. */
.fc-kicker {
  margin: 0;
  color: var(--ps-green-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fc-h {
  margin: 0;
  max-width: 900px;
  color: var(--ps-ink);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.3vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.fc-lead {
  margin: 10px 0 0;
  max-width: 900px;
  color: var(--ps-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Timeline content: intro / justified switch / one large preview.
   No eyebrow — content starts at the heading so the screenshot gets the height. */
.timelineContent {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}

.tl-intro { min-width: 0; }

/* Justified 3-part segmented control — even widths, editorial, not CTAs. */
.viewSelector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 760px;
}

.viewOpt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border: 1px solid rgba(28, 45, 38, 0.12);
  border-radius: 10px;
  background: rgba(255, 254, 249, 0.72);
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.viewOpt-title {
  color: rgba(16, 24, 21, 0.66);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.viewOpt-desc {
  color: rgba(16, 24, 21, 0.46);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.25;
}

.viewOpt:hover:not(.is-active) {
  border-color: rgba(28, 45, 38, 0.22);
}

.viewOpt.is-active {
  background: var(--ps-green);
  border-color: var(--ps-green);
}

.viewOpt.is-active .viewOpt-title { color: #fff; }
.viewOpt.is-active .viewOpt-desc { color: rgba(255, 255, 255, 0.78); }

/* One large framed screenshot preview — reads as a product preview. */
.screenshotPreview {
  min-height: 0;
  border-radius: 18px;
  border: 1px solid rgba(35, 45, 38, 0.1);
  background: rgba(255, 254, 249, 0.72);
  box-shadow: 0 12px 30px rgba(35, 30, 22, 0.06);
  overflow: hidden;
}

.screenshotPreview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Per-view crop — skip the redundant page-title area, focus on useful UI. */
  object-position: center 30%;
  transition: object-position 200ms ease;
}

.screenshotPreview[data-view="timeline"] img { object-position: center 37%; }
.screenshotPreview[data-view="table"] img { object-position: center 37%; }
.screenshotPreview[data-view="calendar"] img { object-position: center 42%; }

/* Obligations tab — same editorial style + folder safe area as Timeline,
   but no view switch (one large screenshot). */
.obligationsContent {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.obligationsIntro {
  min-width: 0;
  max-width: 980px;
}

.obligationsNote {
  margin: 10px 0 0;
  color: var(--ps-green-2);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Crop high so the KPI cards, views/category filters and High band lead — the
   prioritisation context matters more than the lower Low-priority rows. */
.obligationsPreview img { object-position: center 3%; }

.fc-empty {
  margin: auto;
  text-align: center;
}

.fc-empty span {
  display: block;
  color: var(--ps-ink);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.fc-empty p {
  margin: 6px 0 0;
  color: var(--ps-muted);
  font-size: 13px;
}

/* Mobile: drop the fixed-ratio shell, show tabs as a scroller, stack cards. */
@media (max-width: 768px) {
  .folderShell { display: none; }

  .tabHitAreas {
    position: static;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .tabHitAreas::-webkit-scrollbar { display: none; }

  .tabHit {
    position: static;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    padding: 11px 15px;
    border: 1px solid var(--ps-line);
    border-radius: 12px;
    background: rgba(255, 253, 247, 0.7);
  }

  .tabHit.is-active {
    border-color: rgba(28, 45, 38, 0.22);
    background: #fffdf7;
  }

  .folderContent {
    position: static;
    margin-top: 22px;
  }

  .fc-panel { height: auto; }

  .timelineGrid {
    grid-template-columns: 1fr;
  }

  .sideStack { grid-template-rows: auto; }

  .ssCard-shot {
    flex: none;
    aspect-ratio: 1586 / 992;
  }
}