/* ═══════════════════════════════════════════
   SECTIONS — editorial-grid layouts
   All sections sit inside a continuous 4-col
   grid with visible cell borders (grid.css).
   ═══════════════════════════════════════════ */

/* ─── Section shell ─── */
.pl-section {
  position: relative;
}

/* ─────────────────────────────────────────
   NAV
   ───────────────────────────────────────── */
/* NAV — full viewport width container.
   Sits at body level (outside .pl-frame) so its top/bottom 1px borders
   span the entire viewport. Uses a grid with visible cell dividers. */
.pl-nav {
  position: relative;
  background: var(--bg);
  display: grid;
  /* 5 cols: left margin + brand + flex-grow spacer + Start + right margin.
     Page-link cells removed — every section lives on the homepage and the
     Start CTA covers conversion. */
  grid-template-columns:
    /* col 1 (left margin): grows past 128px when viewport > content-max */
    max(var(--page-pad, 128px), calc((100vw - var(--content-max, 1280px)) / 2))
    auto                     /* col 2: brand */
    1fr                      /* col 3: flex spacer between brand + Start */
    auto                     /* col 4: Start button */
    /* col 5 (right margin): mirrors left corner */
    max(var(--page-pad, 128px), calc((100vw - var(--content-max, 1280px)) / 2));
  /* Top & bottom horizontal lines are drawn by ::before and ::after so they
     span the full viewport and line up precisely with every grid row below. */
  min-height: 72px;
}
.pl-nav::before,
.pl-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grid-line);
  pointer-events: none;
}
.pl-nav::before { top: 0; }
.pl-nav::after  { bottom: 0; }

/* Every nav child gets the cell treatment: vertical divider + padding */
.pl-nav__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-24);
  border-right: 1px solid var(--grid-line);
}

.pl-nav__corner {
  padding: 0;
  /* left corner: vertical line on the right (aligns with frame's left border).
     Shifted right by 1px so the corner's border-right (drawn INSIDE the cell
     at the right edge) lands on the same column as the frame's border-left
     (drawn INSIDE .pl-frame__inner at its left edge). Without this, the two
     1px lines sit side-by-side and look like a 2px misalignment. */
  border-right: 1px solid var(--grid-line);
  transform: translateX(1px);
}
/* Right corner: vertical line on the LEFT — continues the frame's right
   border up through the nav, visually passing behind the Start button.
   Shifted left by 1px so the corner's border-left lines up with the frame's
   border-right (mirror of the left-corner fix above). */
.pl-nav__corner--right {
  border-right: none;
  border-left: 1px solid var(--grid-line);
  transform: translateX(-1px);
}

.pl-nav__brand {
  justify-content: flex-start;
  gap: var(--sp-12);
  color: var(--text);
  min-width: 220px;
}
/* Brand link is a no-op visual — never tint on hover. */
.pl-nav__brand:hover,
.pl-nav__brand:hover .pl-nav__word { color: var(--text); }
.pl-nav__mark {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 6px;
  display: block;
  object-fit: contain;
}
.pl-nav__word {
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
}

.pl-nav__link {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--dur-fast);
  white-space: nowrap;
}
.pl-nav__link:hover { color: var(--accent); }

/* Empty spacer cell (between brand and Start) — keeps the grid lines
   continuous without injecting any content. */
.pl-nav__spacer { padding: 0; }

.pl-nav__cta {
  /* Small button inside its grid cell — not stretched to full row height */
  display: inline-flex;
  align-items: center;
  align-self: center;          /* don't stretch vertically */
  justify-self: end;           /* hug the right edge of the cell so the
                                  translate offset is measured against
                                  the right grid line, not the cell centre */
  gap: var(--sp-8);
  background: var(--accent);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background var(--dur-fast);
  padding: 10px 22px;
  border-right: none;
  /* Push 30% of the button's width past the right vertical grid line
     into the page-pad area (must sit above the corner cell so it isn't
     clipped by the surrounding grid lines). */
  transform: translateX(30%);
  position: relative;
  z-index: 2;
}
.pl-nav__cta:hover { background: var(--accent-hover); color: var(--color-white); }
.pl-nav__cta svg { width: 14px; height: 14px; }

@media (max-width: 880px) {
  .pl-nav {
    grid-template-columns: 1fr auto !important;
    min-height: 60px;
  }
  .pl-nav__corner,
  .pl-nav__corner--right,
  .pl-nav__link { display: none; }
  .pl-nav__brand { min-width: auto; padding: 0 var(--sp-16); }
  .pl-nav__cta { padding: 8px 18px; }
}

/* ─────────────────────────────────────────
   HEADER SPACER — full-viewport-width bordered
   row between the nav and the framed content.
   Border-bottom spans the entire viewport.
   ───────────────────────────────────────── */
.pl-header-spacer {
  background: var(--bg);
  /* Inset the inner grid to match the frame — side padding grows when
     viewport exceeds content-max so the inner stays ≤1280px. */
  padding: 0 max(var(--page-pad, 128px), calc((100vw - var(--content-max, 1280px)) / 2));
  /* Third horizontal line — extends both left AND right to viewport edges */
  border-bottom: 1px solid var(--grid-line);
}
.pl-header-spacer__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 60% of the standard 80px spacer height. */
  min-height: 48px;
  border-left:  1px solid var(--grid-line);
  border-right: 1px solid var(--grid-line);
}
.pl-header-spacer__cell {
  border-right: 1px solid var(--grid-line);
}
.pl-header-spacer__cell:last-child {
  border-right: none;
}

@media (max-width: 1024px) { .pl-header-spacer { padding: 0 40px; } }
@media (max-width: 640px) {
  .pl-header-spacer { padding: 0 16px; }
  .pl-header-spacer__inner {
    grid-template-columns: repeat(2, 1fr);
    min-height: 56px;
  }
}

/* ─────────────────────────────────────────
   HERO
   ───────────────────────────────────────── */
.pl-hero__headline-grid { --cols: 1; }
.pl-hero__headline {
  position: relative;
  font-size: clamp(1.85rem, 4vw, 3.5rem);   /* slightly smaller */
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text);
  padding: var(--sp-64) var(--sp-48);
  max-width: none;          /* let the headline use the full width */
}

/* ─── Hero intro animation ───
   Over 1.2s: the headline text fades (opacity 0 → 1) and slides
   horizontally from the cell's centre to its natural left-justified
   position. The 4 crop-marks travel horizontally from the top-
   / bottom-centre to their corners simultaneously. */
.pl-hero__headline {
  position: relative;
}

/* Block-level row inside the flex cell — takes the full cell width */
.pl-hero__headline-row {
  display: block;
  width: 100%;
}
/* Inline-block text that shrinks to its wrapped content width so we
   can translate it from the cell's centre to its natural left edge.
   No transition in the initial state — otherwise the JS setting the
   --headline-offset variable would animate the text rightward first. */
.pl-hero__headline-text {
  display: inline-block;
  max-width: 100%;
  opacity: 0;
  transform: translateX(var(--headline-offset, 0));
  will-change: opacity, transform;
}
/* Transition is only declared once the --ready class is added, so the
   single animated change is from (opacity 0, translateX(offset))
   to (opacity 1, translateX(0)). */
.pl-hero__headline--ready .pl-hero__headline-text {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity   1200ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 1200ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.pl-crop {
  position: absolute;
  width: 8px; height: 8px;
  background: var(--text);
  display: block;
  transition:
    top    1200ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    bottom 1200ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    left   1200ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    right  1200ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Initial state: top crops at the top-centre, bottom crops at the
   bottom-centre. Dots only traverse horizontally toward their corners. */
.pl-crop--tl { top:    14px; left:  calc(50% - 4px); }
.pl-crop--tr { top:    14px; right: calc(50% - 4px); }
.pl-crop--bl { bottom: 14px; left:  calc(50% - 4px); }
.pl-crop--br { bottom: 14px; right: calc(50% - 4px); }

/* Settled state: 4 crops at the cell's corners */
.pl-hero__headline--ready .pl-crop--tl { top: 14px;    left:  14px; }
.pl-hero__headline--ready .pl-crop--tr { top: 14px;    right: 14px; }
.pl-hero__headline--ready .pl-crop--bl { bottom: 14px; left:  14px; }
.pl-hero__headline--ready .pl-crop--br { bottom: 14px; right: 14px; }

.pl-hero__main {
  --cols: 4;
  position: relative;
}
/* Fourth horizontal line — extends ONLY on the right, from the
   frame's right edge out to the viewport edge so it reaches the
   diagonal arrow in the right margin. */
.pl-hero__main::after {
  content: "";
  position: absolute;
  left: 100%;
  width: var(--page-pad, 128px);
  bottom: -1px;
  height: 1px;
  background: var(--grid-line);
  pointer-events: none;
}
.pl-hero__info {
  justify-content: space-between;
  min-height: 380px;
  padding: var(--sp-32);
}
.pl-hero__stage {
  min-height: 380px;
  position: relative;
}
/* Host for the inline hero SVG (also used as a wrapper around the
   fallback <img> before JS swaps it in). */
.pl-hero__composite-host {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl-hero__composite {
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: block;
  /* Preserve aspect ratio of the 872×585 pattern inside the cell. */
  object-fit: contain;
  object-position: center;
}
/* Figma's light hero drops two orange glow dots that exist only in the
   dark frame. Hide them with this class in light mode. */
.pl-hero__dark-only  { display: inline; }
[data-theme="light"] .pl-hero__dark-only { display: none; }

.pl-hero__chart {
  justify-content: flex-end;      /* bottom-align the chart image */
  align-items: flex-start;
  padding: var(--sp-32);
  min-height: 380px;
}
/* Bars animate width via JS. Each transition picks a random duration
   (set inline) so bars never lock-step; CSS only supplies the easing. */
.pl-hero__bar {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.34, 1.18, 0.44, 1);
}
@media (prefers-reduced-motion: reduce) {
  .pl-hero__bar { transition: none; }
}
.pl-hero__chart-img {
  width: 100%;
  height: auto;
  max-width: 260px;
  margin-top: auto;               /* push chart to the bottom of its cell */
}

.pl-hero__industries { --cols: 4; }
.pl-hero__industry {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  padding: var(--sp-24) var(--sp-32);
  min-height: 56px;
}
/* Diagonal arrow lives OUTSIDE the frame — to the right of the
   rightmost vertical grid line, anchored vertically to the industries
   row via absolute positioning on its last cell. */
.pl-hero__industry:last-child { position: relative; overflow: visible; }
.pl-hero__arrow {
  position: absolute;
  /* Hug the cell's top-right corner — sit flush against the intersection
     of the right vertical grid line and the row top with a 2px sliver. */
  top: 2px;
  left: calc(100% + 2px);
  width: 64px; height: 64px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.pl-hero__arrow:hover { color: var(--accent); transform: translate(2px, -2px); }
.pl-hero__arrow svg { width: 100%; height: 100%; display: block; }

@media (max-width: 880px) {
  .pl-hero__info, .pl-hero__stage, .pl-hero__chart { min-height: 180px; }
}
@media (max-width: 640px) {
  .pl-hero__headline { padding: var(--sp-32) var(--sp-20); }
  .pl-hero__info, .pl-hero__stage, .pl-hero__chart {
    min-height: auto;
    padding: var(--sp-24);
  }
  .pl-hero__chart-img { max-width: 200px; margin-inline: auto; }
  /* Move the arrow inside the cell on mobile (no outer margin) */
  .pl-hero__arrow {
    position: static;
    transform: none;
    width: 24px; height: 24px;
    margin-left: auto;
  }
  .pl-hero__industry:last-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .pl-crop { width: 6px; height: 6px; }
  .pl-crop--tl, .pl-crop--tr { top: 8px; }
  .pl-crop--bl, .pl-crop--br { bottom: 8px; }
  .pl-crop--tl, .pl-crop--bl { left: 8px; }
  .pl-crop--tr, .pl-crop--br { right: 8px; }
}

/* ─────────────────────────────────────────
   PROBLEM
   ───────────────────────────────────────── */
.pl-cell__title--sm {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.pl-problem__cards { --cell-min-h: 420px; }
.pl-problem__card {
  padding: var(--sp-48) var(--sp-32);
  gap: var(--sp-24);
  justify-content: flex-start;
}
.pl-problem__icon {
  width: 140px;
  height: 140px;
  margin-bottom: var(--sp-32);
  object-fit: contain;
  object-position: left center;
}
.pl-problem__icon--wide { width: 230px; }

[data-theme="dark"] .pl-problem__icon { filter: invert(1) brightness(0.9); }

/* ─────────────────────────────────────────
   PLATFORM
   ───────────────────────────────────────── */
.pl-platform__frame {
  padding: var(--sp-32) var(--sp-64);
  /* keep overflow visible so any label that grazes the edge still renders */
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl-platform__diagram {
  /* width/height auto with both max-* lets the browser shrink the SVG
     to fit within both bounds while preserving its viewBox aspect. */
  width: auto;
  height: auto;
  max-width: 78%;          /* leaves room for label text + connector lines */
  /* Cap height to viewport so the bottom row (Data plane label) is
     never clipped by the sticky pin's 100vh box. Subtracts the
     section's title row and frame padding. */
  max-height: calc(100vh - 260px);
  display: block;
  margin: 0 auto;
  /* Allow the SVG to render content slightly past its viewBox so any
     label text whose baseline sits at the edge is not clipped. */
  overflow: visible;
}

@media (max-width: 880px) {
  .pl-platform__frame { padding: var(--sp-32); }
  .pl-platform__diagram { max-width: 100%; max-height: none; }
}
.pl-platform__label {
  font-family: var(--font);
  font-weight: 300;
  font-size: 21.186px;
  letter-spacing: 0.01em;
  dominant-baseline: text-before-edge;
}
.pl-platform__label--muted { fill: var(--text-subtle); }
.pl-platform__label--light { fill: var(--text); }

/* Platform section is theme-locked to dark. The inner content is
   pinned via position: sticky so as the user scrolls through the
   section's ~2-viewport height, JS reveals the 12 labels one-by-one. */
.pl-platform__label {
  opacity: 0;
  transition: opacity 420ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.pl-platform__label.is-visible { opacity: 1; }

/* Connector lines: each path has pathLength="1" so we can animate
   stroke-dashoffset from 1 → 0 for a uniform "draw" feel regardless
   of the path's actual length. Inherits stroke from the original
   asset colour. */
.pl-platform__line path {
  fill: none;
  stroke: var(--stroke-0, #919191);
  stroke-width: 0.916378;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.pl-platform__line.is-visible path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .pl-platform__line path { stroke-dashoffset: 0; transition: none; }
}

@media (min-width: 880px) {
  /* Section height = pin (100vh) + scroll buffer for label narration.
     Tight so the section ends quickly after the labels finish revealing —
     no big trailing dark area before the next fold. */
  .pl-platform { min-height: 140vh; }
  /* Pin shrinks to its content (no forced 100vh) — keeps the diagram
     at its designed size and removes the empty space inside the pin. */
  .pl-platform__pin {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: inherit;
  }
}

/* ─────────────────────────────────────────
   HOW IT WORKS
   ───────────────────────────────────────── */
.pl-how__steps { --cell-min-h: 60px; }
.pl-how__step {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-32);
}
.pl-how__step-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}
.pl-how__step-dot {
  width: 10px; height: 10px;
  background: var(--text);
  border-radius: 1px;
  transition:
    background var(--dur-med) var(--ease-smooth),
    transform  var(--dur-med) var(--ease-smooth),
    box-shadow var(--dur-med) var(--ease-smooth);
}
.pl-how__step-dot--accent {
  background: var(--accent);
  transform: scale(1.25);
  box-shadow: 0 0 16px rgba(255, 92, 70, 0.45);
}

.pl-how__cards { --cell-min-h: 420px; }
.pl-how__card {
  transition: background-color var(--dur-med) var(--ease-smooth);
}
/* Active card highlight — matches the Figma board colour */
.pl-how__card--active {
  background-color: #BEBEBE;
}

/* Scroll-jacking: pin the content while the user scrolls through an
   extra ~0.6 viewport, giving the ember time to cross Step 1 → 2 → 3
   without a large empty gap before the next section.
   Symmetric — scrolling back up reverses 3 → 2 → 1.
   Only engaged on desktop. */
@media (min-width: 880px) {
  /* No sticky scroll-jack. Section is just its content — keeps card
     heights as designed and leaves no trailing empty band before the
     next fold. The ember dot stays on Step 1; reading order does the
     rest. */
  .pl-how__pin {
    display: flex;
    flex-direction: column;
  }
}
.pl-how__card {
  padding: var(--sp-32);
  gap: var(--sp-24);
}
.pl-how__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
}
.pl-how__duration {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.pl-how__card-marker {
  width: 10px; height: 10px;
  background: var(--text);
  border-radius: 1px;
}
.pl-how__icon {
  width: 88px; height: 88px;
  object-fit: contain;
  object-position: left center;
  margin: var(--sp-16) 0;
}
[data-theme="dark"] .pl-how__icon { filter: invert(1) brightness(0.9); }
.pl-how__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────
   PROOF POINT
   ───────────────────────────────────────── */
.pl-proof__body {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 70ch;
}
.pl-proof__stats { --cell-min-h: 220px; }
.pl-proof__stat { padding: var(--sp-40) var(--sp-32); }
.pl-proof__value {
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--sp-24);
  display: block;
}

/* ─────────────────────────────────────────
   SECURITY — 3-col grid with shield centered
   ───────────────────────────────────────── */
.pl-security__items {
  --cell-min-h: 220px;
  grid-auto-flow: dense;
}
.pl-security__shield-cell {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-items: center;
  justify-content: center;
  padding: var(--sp-32);
}
.pl-security__shield-img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
}
@media (max-width: 880px) {
  .pl-security__shield-cell { grid-column: auto; grid-row: auto; }
}
@media (max-width: 640px) {
  .pl-security__items { --cell-min-h: auto; }
  .pl-security__shield-cell { padding: var(--sp-24); }
  .pl-security__shield-img { max-width: 160px; }
  .pl-sec-item { padding: var(--sp-24); }
  .pl-sec-item__num { top: var(--sp-24); right: var(--sp-24); }
}
.pl-sec-item {
  padding: var(--sp-32);
  gap: var(--sp-8);
}
.pl-sec-item__num {
  position: absolute;
  top: var(--sp-32);
  right: var(--sp-32);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.pl-sec-item__check {
  width: 14px; height: 14px;
  border: 1.5px solid var(--accent);
  display: inline-block;
  margin-bottom: var(--sp-8);
}
.pl-sec-item__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  letter-spacing: -0.005em;
}
.pl-sec-item__accent {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text);
  margin-top: var(--sp-8);
}
.pl-sec-item__body {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: var(--sp-4);
}

/* ─────────────────────────────────────────
   A THIRD WAY — 3 numbered offerings
   ───────────────────────────────────────── */
.pl-third__offerings { --cell-min-h: 260px; }
.pl-third__offer {
  padding: var(--sp-40) var(--sp-32);
  gap: var(--sp-16);
  justify-content: flex-start;
}
.pl-third__offer-num {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-32);
}
.pl-third__offer-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-8);
}

/* Legacy two-card comparison styles (kept for potential reuse) */
.pl-third__cards { --cell-min-h: auto; }

.pl-third__card {
  padding: var(--sp-40);
  gap: var(--sp-32);
}

.pl-third__card--accent {
  border: 2px solid var(--accent);
  /* Pull -1px on sides only so card overlaps side grid borders,
     NOT top/bottom (which caused a visible gap above CTA). */
  margin: 0 -1px;
  position: relative;
  z-index: 1;
}

.pl-third__card-title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-16);
}
.pl-third__card-title--accent { color: var(--accent); }

.pl-third__block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.pl-third__block-label {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Status-quo: 2 sub-cells per row */
.pl-third__subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
}
.pl-third__subcell {
  padding: var(--sp-16);
  border: 1px solid var(--border);
  background: var(--overlay-soft);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 84px;
}
.pl-third__tag {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.pl-third__val {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.4;
}

/* Parallel Loop: single rich cell per row */
.pl-third__fullcell {
  padding: var(--sp-20) var(--sp-24);
  border: 1px solid var(--border);
  background: var(--overlay-soft);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 84px;
}
.pl-third__fulltitle {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: -0.01em;
}
.pl-third__fullbody {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-muted);
}

@media (max-width: 880px) {
  .pl-third__cards { --cols: 1; }
  .pl-third__subgrid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   CTA
   ───────────────────────────────────────── */
.pl-cta { padding: 0; }
.pl-cta__block {
  background: var(--accent);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
}
.pl-cta__inner {
  padding: var(--sp-128) var(--sp-64) var(--sp-80);
  max-width: 1400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
.pl-cta__headline {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 18ch;
  color: var(--color-white);
}
.pl-cta__body {
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--color-white);
  max-width: 54ch;
}
.pl-cta__actions {
  margin-top: var(--sp-48);
}
.pl-cta__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-48) var(--sp-64);
  gap: var(--sp-24);
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.pl-cta__brand {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  letter-spacing: 0.02em;
}
.pl-cta__links {
  display: inline-flex;
  gap: var(--sp-64);
}
.pl-cta__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  transition: opacity var(--dur-fast);
  letter-spacing: 0.02em;
}
.pl-cta__link:hover { opacity: 0.7; color: var(--color-white); }

@media (max-width: 880px) {
  .pl-cta__inner  { padding: var(--sp-64) var(--sp-32); }
  .pl-cta__footer { padding: var(--sp-32); }
  .pl-cta__links  { gap: var(--sp-24); }
}
@media (max-width: 640px) {
  .pl-cta__inner  { padding: var(--sp-48) var(--sp-20); }
  .pl-cta__footer { padding: var(--sp-20); flex-direction: column; align-items: flex-start; gap: var(--sp-16); }
  .pl-cta__links  { gap: var(--sp-24); flex-wrap: wrap; }
}

/* ─────────────────────────────────────────
   LEGAL — privacy policy / terms of use
   Long-form prose pages. Uses the standard editorial grid frame so
   nav + footer match the rest of the site. Theme-aware via the
   normal --text / --bg / --grid-line tokens — works in light + dark.
   ───────────────────────────────────────── */
.pl-legal__head {
  padding: var(--sp-64) var(--sp-48);
  gap: var(--sp-16);
}
.pl-legal__back {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  transition: color var(--dur-fast);
}
.pl-legal__back:hover { color: var(--text); }
.pl-legal__title {
  font-size: clamp(2.25rem, 3.5vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  text-transform: lowercase;
}
.pl-legal__meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}

.pl-legal__body {
  padding: var(--sp-48);
  gap: var(--sp-40);
  /* Limit prose width for readability while staying in the cell. */
  max-width: 820px;
}
.pl-legal__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.pl-legal__section h2 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  text-transform: lowercase;
}
.pl-legal__section p {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text-soft);
  margin: 0;
}
.pl-legal__section ul {
  margin: 0;
  padding-left: var(--sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.pl-legal__section li {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-soft);
}
.pl-legal__section li strong { color: var(--text); font-weight: var(--fw-semibold); }
.pl-legal__section a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pl-legal__section a:hover { opacity: 0.85; }

@media (max-width: 880px) {
  .pl-legal__head { padding: var(--sp-48) var(--sp-32); }
  .pl-legal__body { padding: var(--sp-32); }
}
@media (max-width: 640px) {
  .pl-legal__head { padding: var(--sp-32) var(--sp-20); }
  .pl-legal__body { padding: var(--sp-24) var(--sp-20); }
}