/* Paper panels.

   The light editorial sections do not butt up against the dark chapters —
   they rest on them. The navy ground runs unbroken down the whole page and
   each light section is a rounded paper sheet lying on it, inset from the
   page edge with a hairline and a lift.

   This replaced a gradient seam treatment. Fading saturated navy to pure
   white routes the midpoint through dead desaturated grey, so the ramp read
   as fog rather than as a transition. Two surfaces that never touch need
   nothing to blend — see the design spec, §A2. */

.landing {
  --lp-panel-radius: 20px;
  --lp-panel-inset: 12px;
  --lp-panel-lead: 48px;
}

@media (width >= 48rem) {
  .landing {
    --lp-panel-radius: 28px;
    --lp-panel-inset: var(--lp-gutter);
    --lp-panel-lead: 88px;
  }
}

/* The paper sheet. `--lp-section-y` still sets the vertical rhythm inside
   it; the inset only pulls the sheet in from the page edge.

   No `padding-inline` here, and the sheet's own box is exactly
   `--lp-container` wide — the same box `.landing__container` computes for
   the dark chapters. `.landing__container` nested inside the panel then
   reapplies `--lp-gutter` against that *same* box, so its text lands at the
   identical x-coordinate as the dark chapters' text, for free, instead of
   being re-derived. The sheet extends one gutter further out than its own
   text on each side — that's the sheet's margin — while the text itself
   never moves. (A narrower sheet box here previously made the sheet's edge
   coincide with the dark chapters' TEXT column instead of sitting outside
   it, which read as an inverted, 49px misalignment rather than a margin.) */
.landing__section--light {
  width: auto;
  max-width: var(--lp-container);
  margin-inline: auto;
  margin-block: var(--lp-panel-inset);
  border: 1px solid color-mix(in srgb, var(--lp-hull) 10%, transparent);
  border-radius: var(--lp-panel-radius);
  background: var(--lp-paper);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 6%),
    0 24px 60px -24px rgb(0 0 0 / 45%);

  /* `clip`, not `hidden`: both trim the grain to the rounded corner, but
     `hidden` makes the sheet a scroll container, and a scroll container
     captures every `position: sticky` descendant. That silently disabled
     the Teams heading — it sat 8rem lower than its grid row and then
     scrolled away with the page instead of staying beside its stories.
     `overflow: clip` clips without becoming a scrollport. */
  overflow: clip;
  isolation: isolate;
}

/* Inset the sheet from the viewport when the container cap is not reached. */
@media (width < 84rem) {
  .landing__section--light {
    margin-inline: var(--lp-panel-inset);
  }
}

/* Two consecutive sheets read as one document rather than two: the seam
   between them collapses to a hairline and the outer corners stay round. */
.landing__section--light + .landing__section--light {
  margin-block-start: 0;
  border-block-start: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

.landing__section--light:has(+ .landing__section--light) {
  margin-block-end: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* Separate topics keep their own sheets: Security after onboarding and FAQ
   after Security. The modifier restores the new sheet's top edge and, via :has(),
   the preceding sheet's bottom corners, with navy visible between them. */
.landing__section--light.landing__section--fresh-sheet {
  margin-block-start: var(--lp-panel-inset);
  border-block-start: 1px solid color-mix(in srgb, var(--lp-hull) 10%, transparent);
  border-start-start-radius: var(--lp-panel-radius);
  border-start-end-radius: var(--lp-panel-radius);
}

.landing__section--light:has(+ .landing__section--light.landing__section--fresh-sheet) {
  margin-block-end: var(--lp-panel-inset);
  border-end-start-radius: var(--lp-panel-radius);
  border-end-end-radius: var(--lp-panel-radius);
}

/* Platform, "how it works" and FAQ open straight into their first line of
   copy. On a white sheet the full `--lp-section-y` above that first line
   reads as an oversized blank strip, so these three get a tighter,
   panel-only opening measure. Only the *start* padding is tightened — the
   section's normal padding-block-end still sets the rhythm into whatever
   follows.

   Trust keeps the full opening measure because its lead column parks at
   `top: 8rem`. Teams now has an open, unpinned heading above three columns
   and uses the snug opening along with Platform, onboarding and FAQ. */
.landing__section--snug-top {
  padding-block-start: var(--lp-panel-lead);
}

/* Paper typography: the section title, supporting copy and factual labels
   have distinct roles. Keep the existing Plex family and navy brand ink. */
.landing__section--light .landing__headline--section {
  max-width: 18ch;
  font-size: clamp(2.125rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.landing__section--light .landing__eyebrow {
  margin-bottom: 1.5rem;
  color: var(--lp-accent);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: none;
}

.landing__section--light .landing__sub {
  max-width: 42ch;
  margin-top: 1.75rem;
  color: var(--lp-mute);

  /* Same floor, same reason: 1.4vw is 5px on a phone, so a 1rem floor was the
     only size a phone ever saw and the paper sections read a step smaller than
     the navy ones. A chapter lead is one size on this page. */
  font-size: clamp(1.125rem, 1.4vw, 1.1875rem);
  line-height: 1.65;
}

/* Grain — moved here from the deleted seams.css. On a large navy ground it
   keeps the bloom gradients from banding. Decorative: never announced,
   never clickable. */
.landing__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .028;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}