/* ── sheet.css ──────────────────────────────────────────────────────────────
   The box/border system. This is the only place the grid rules are drawn.

   How the hairlines work: a .cells container paints itself with --rule and
   sets gap:1px; its children paint themselves with --ground. The gaps are
   the rules. Borders are never doubled and never land on a half pixel, and
   a cell can be added or removed without touching any border declaration.

   Mobile first: .cells is a single column, so the gaps read as horizontal
   rules. Column counts are opt-in at wider viewports.
   ───────────────────────────────────────────────────────────────────────── */

/* The framed column. Its side rules run the full height of the page.
   display:flex + min-height + the footer's margin-top:auto below is a
   standard sticky-footer: on a short page (login, an empty dashboard
   scenario) the footer still gets pushed to the true bottom of the
   viewport instead of sitting right under whatever little content is
   above it — which matters here because the footer's own cropped-wordmark
   treatment (footer.css) is built assuming it crops at the screen's actual
   bottom edge, not wherever the last bit of content happened to end. */
.sheet {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);   /* the page sits in one box */
}
.footer { margin-top: auto; }

/* A run of cells divided by hairlines. */
.cells {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
}
.cells > * {
  background: var(--ground);
  padding: var(--s5) var(--gutter);
}

/* A block that is not subdivided. */
.block {
  border-top: 1px solid var(--rule);
  padding: var(--s7) var(--gutter);
}
@media (min-width: 48em) { .block { padding-block: var(--s8); } }

/* Section label sits top-left of its block, Hermes-style. */
.block-label,
.cells-label {
  border-top: 1px solid var(--rule);
  padding: var(--s5) var(--gutter);
  color: var(--accent);     /* section labels are the page's signposts */
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Set a section apart from the run of the page. */
.is-inset { padding-block: var(--s7); }
.is-inset > .cells { border-bottom: 1px solid var(--rule); }
@media (min-width: 48em) { .is-inset { padding-block: var(--s8); } }

@media (min-width: 40em) {
  .cells-2 { grid-template-columns: repeat(2, 1fr); }
  .cells-3 { grid-template-columns: repeat(3, 1fr); }
  .cells-4 { grid-template-columns: repeat(2, 1fr); }
  /* --gutter, not a hardcoded --s5: the old flat value froze cell padding
     below --gutter's own 1.6rem→3.2rem step at 48em, permanently, since
     nothing here ever revisited it past this 40em breakpoint. */
  .cells > * { padding: var(--s6) var(--gutter); }
}

@media (min-width: 64em) {
  .cells-4 { grid-template-columns: repeat(4, 1fr); }
  .cells-split { grid-template-columns: minmax(20rem, 1fr) 2fr; }
}

/* ══ Section header — index + rule ════════════════════════════════════════
   Plain by default: hairline top and bottom, ground background, serif
   title. The black/white inverted band is scoped to the plugins section
   only (#plugins .section-head, below) — the one place it's confirmed for
   now; every other section-head that used to invert (product page
   sections, bundles, subscribe) is plain until those get chosen too.
   ═════════════════════════════════════════════════════════════════════ */
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s5) var(--gutter);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  color: var(--fg);
}
.section-index {
  font-family: var(--font-data);
  font-size: var(--fs-small);
  letter-spacing: var(--track-data);
  color: var(--accent);
  font-style: normal;
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: var(--track-tight);
  font-weight: 400;
  /* Instrument Serif ships one weight; a stroke thickens it optically rather
     than letting the browser synthesise a bold. */
  -webkit-text-stroke: 0.018em currentColor;
}
.section-meta {
  margin-left: auto;
  color: var(--fg-muted);
  max-width: none;
}

/* ── Banded section-heads: the two-tone inverted treatment ───────────────
   Plugins was the first to get this; now shared by every section-head that
   marks a major waypoint (a plugin subpage's What it does/Pricing/Common
   questions/More plugins, the bundle picker's All-Access CTA, and the
   All-Access page's What's included) rather than copied per selector.
   Compare plans gets its own variant below — its two-tone has to echo the
   two cards underneath it, not this row's generic 66/34 split. Ordinary
   section-heads (FAQ page, product Demo/How it works) stay plain — this is
   reserved for the heavier waypoints. */
:is(#plugins, .p-features, .p-pricing, .p-faq, .p-more, .p-all-access-cta, .p-included) .section-head {
  /* The band is the divider: two thirds inverted, one third left as page
     ground, with a hard stop between. --fg / --ground swap with the theme, so
     the inversion holds in both without a second set of colours. */
  background: linear-gradient(90deg, var(--fg) 0 66.66%, var(--ground) 66.66% 100%);
  color: var(--ground);
}
/* .section-meta's default margin-left:auto sends it to the far right edge,
   which lands it on the light third of this band — off the inverted panel
   its color was never meant to sit on. Pulled back next to the title
   instead (same gap token .section-title already sits on),
   and set to inherit the band's own inverted colour rather than
   --fg-muted, which has no contrast against --fg here. Opacity keeps it
   reading as a quieter aside rather than co-equal with the title. */
:is(#plugins, .p-features, .p-pricing, .p-faq, .p-more, .p-all-access-cta, .p-included) .section-meta {
  margin-left: 0;
  color: inherit;
  opacity: 0.7;
}
/* Extra breathing room between the title and the bracketed meta on desktop,
   now that the section-num circle's gone and there's slack in the dark
   66.66% band to spend on it. Skipped below 48em: .section-meta is hidden
   entirely there (next rule), so there's nothing to space out. */
@media (min-width: 48em) {
  :is(#plugins, .p-features, .p-pricing, .p-faq, .p-more, .p-all-access-cta, .p-included) .section-meta {
    margin-left: var(--s6);
  }
}
/* Below the meta's breakpoint there is no right third to reserve, so the
   band runs inverted edge to edge. Widened from the old 29.99em cutoff to
   47.99em: now that .section-meta sits right after the title instead of
   flush right (see above), it needs room for the title + the bracketed
   text to all fit inside the dark 66.66% zone before the gradient's hard
   colour stop cuts across it and swallows the tail of the text. That room
   only reliably exists from 48em on, where --gutter also steps up. */
@media (max-width: 47.99em) {
  :is(#plugins, .p-features, .p-pricing, .p-faq, .p-more, .p-all-access-cta, .p-included) .section-meta { display: none; }
  :is(#plugins, .p-features, .p-pricing, .p-faq, .p-more, .p-all-access-cta, .p-included) .section-head { background: var(--fg); }
}

/* The section that follows a header already has a rule above it. */
.section-head + * { border-top: 0 !important; }