/* Sections — centered monolith hero with stone flanks, module grid, sticky
   criteria split, steps, fit, trust, quote, paper close, watermark footer. */

/* --- Hero: centered type, memo artifact rising from the fold, stones at the edges --- */
.po-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; text-align: center;
  padding: clamp(140px, 20vh, 220px) var(--gutter) 0; overflow: clip;
  background: radial-gradient(120% 70% at 50% 0%, #14130d 0%, var(--ink) 60%); }
.po-hero__tag { color: var(--mid); margin-bottom: 28px; }
.po-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; }
.po-hero__inner h1 { max-width: 15ch; }
.po-hero__sub { margin-top: 24px; max-width: 56ch; color: var(--bone-2); font-size: 17px; line-height: 1.6; }
.po-hero__cta { margin-top: 36px; }

/* Stones: painterly crops anchored to the hero's lower corners, graded into
   the dark field. Decorative — aria-hidden, empty alt. */
.po-stone { position: absolute; bottom: -6%; z-index: 1; width: clamp(220px, 26vw, 420px);
  filter: saturate(0.55) brightness(0.5) contrast(1.05); border-radius: 6px;
  -webkit-mask-image: radial-gradient(140% 140% at 50% 30%, #000 55%, transparent 100%);
  mask-image: radial-gradient(140% 140% at 50% 30%, #000 55%, transparent 100%); }
.po-stone--left { left: calc(-1 * clamp(20px, 3vw, 60px)); transform: rotate(-3deg); }
.po-stone--right { right: calc(-1 * clamp(20px, 3vw, 60px)); transform: rotate(2deg); bottom: -10%;
  filter: saturate(0.4) brightness(0.38) contrast(1.08); }

/* Product-mockup skin lives in mockup.css (paper surface). */
/* --- Statement strip: honest one-liner where the reference ran a logo wall --- */
.po-strip { border-top: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft);
  padding: 26px var(--gutter); display: flex; justify-content: center; text-align: center; }
.po-strip p { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--mid); max-width: 72ch; line-height: 1.7; }

/* --- Modules: section head + two status-badged cards --- */
.po-modules { padding: clamp(96px, 14vh, 180px) 0 clamp(80px, 12vh, 150px); }
.po-modules__head { max-width: 620px; margin-bottom: clamp(48px, 7vh, 88px); }
.po-modules__head .mono--caps { color: var(--mid); display: block; margin-bottom: 18px; }
.po-modules__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5vw, 36px); }

/* --- Criteria: sticky title left, ruled rows right --- */
.po-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 120px); padding-bottom: clamp(100px, 15vh, 220px); }
.po-split__titlewrap { position: relative; }
.po-split__title { position: sticky; top: 22vh; }
.po-split__title .mono--caps { display: block; margin-bottom: 18px; color: var(--mid); }
.po-split__title p { margin-top: 22px; color: var(--bone-2); font-size: 16px; line-height: 1.6; max-width: 38ch; }

/* --- Steps --- */
.po-how { padding-bottom: clamp(100px, 15vh, 220px); }
.po-how__head { margin-bottom: clamp(40px, 6vh, 72px); max-width: 620px; }
.po-how__head .mono--caps { color: var(--mid); display: block; margin-bottom: 18px; }
.po-steps .po-step:last-child { border-bottom: 1px solid var(--edge-soft); }

/* --- Fit + trust + quote --- */
.po-fit-sec { padding-bottom: clamp(100px, 15vh, 200px); }
.po-fit-sec .po-rule { margin-bottom: clamp(48px, 8vh, 90px); }
.po-trust-sec { padding-bottom: clamp(100px, 15vh, 200px); }
.po-trust-sec__head { max-width: 560px; margin-bottom: clamp(40px, 6vh, 72px); }
.po-trust-sec__head .mono--caps { color: var(--mid); display: block; margin-bottom: 18px; }
.po-quote-sec { padding-bottom: clamp(110px, 16vh, 220px); display: flex; justify-content: center; }
.po-quote-sec .po-quote { text-align: center; }
.po-quote-sec .po-quote p { margin-inline: auto; }

/* --- Close: the page's one inverse — warm paper, dark type --- */
.po-close { position: relative; background: var(--paper); color: var(--dark);
  min-height: 72svh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: clamp(90px, 14vh, 160px) var(--gutter); }
.po-close__inner { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.po-close__inner h2 { color: var(--dark); max-width: 17ch; }
.po-close__inner .mono--caps { color: rgba(21, 21, 21, 0.5); }

/* --- Footer: compliance register over a giant clipped watermark --- */
.po-foot { position: relative; overflow: clip; background: var(--ink);
  padding: clamp(64px, 9vh, 110px) var(--gutter) 0; }
.po-foot__row { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; max-width: 1280px; margin-inline: auto; }
.po-foot__note { font-family: var(--mono); font-size: 11.5px; line-height: 1.75;
  color: var(--mid); max-width: 58ch; }
.po-foot__nav { display: flex; gap: 22px; }
.po-foot__nav a, .po-foot__copy { font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--mid); }
.po-foot__nav a { transition: color var(--t-micro) ease-out; }
.po-foot__nav a:hover { color: var(--bone); }
.po-foot__copy { display: block; margin-top: 26px; }
.po-foot__mark { display: block; margin-top: clamp(24px, 5vh, 56px); margin-bottom: -0.24em;
  font-size: clamp(120px, 22vw, 330px); font-weight: 500; letter-spacing: -0.03em;
  line-height: 1; text-align: center; color: rgba(232, 228, 217, 0.05);
  user-select: none; pointer-events: none; }

@media (max-width: 880px) {
  .po-modules__grid { grid-template-columns: 1fr; }
  .po-split { grid-template-columns: 1fr; }
  .po-split__title { position: static; margin-bottom: 44px; }
  .po-stone { width: clamp(150px, 32vw, 240px); opacity: 0.75; }
}