/*
 * The page frame: container, sections, and the 10-column grid every row is built on.
 */

/* ------------------------------------------------------------- Layout ------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--surface { background: var(--bg-raised); }
.section--well { background: var(--bg); }
.section--bordered { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.grid { display: grid; gap: 24px; }
@media (min-width: 860px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--hero { grid-template-columns: 1.12fr 0.88fr; align-items: center; gap: 48px; }
}


/* ------------------------------------------------------------ 10-col grid --- */
/* One grid vocabulary for the whole product. `.container` owns the measure and gutters;
   `.grid10` owns the columns; `.col-N` says how many a child spans. The four canonical rows:
   
     <div class="container grid10">                    hero
       <div class="col-7">…</div><div class="col-3">…</div>
   
     <div class="container grid10">                    feature row
       <div class="col-5">…</div><div class="col-5">…</div>
   
     <div class="container grid10 grid10--ruled">      section row: mono label + body
       <div class="col-2"><p class="label">01 / What's inside</p></div>
       <div class="col-8">…</div>
   
     <div class="container grid10">                    pricing
       <div class="col-3">…</div><div class="col-3">…</div><div class="col-4">…</div>
   
   Spans rather than a named class per row shape, so an unforeseen combination needs no new CSS. */
.grid10 {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: start;
}
/* Without this a <pre> or a long unbroken token blows its track out past the page. */
.grid10 > * { min-width: 0; }

/* The END line, not the shorthand: `grid-column: span N` would set the START, and then a
   .col-start-N beside it leaves the end at auto and the item spans one column. */
.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }

/* Optional vertical hairlines between columns. */
.grid10--ruled > * + * {
  border-left: 1px solid var(--rule-soft);
  padding-left: var(--col-gap);
}

@media (max-width: 899px) {
  /* A flex container ignores grid-column, so the .col-N spans need no reset here.

     align-items: stretch is NOT redundant. The grid sets `start`, which in a column flex box
     means the CROSS axis -- so every column would shrink to its content width and rules that
     should run the full width of the screen would stop after a few words. */
  .grid10 { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .grid10--ruled > * + * { border-left: 0; padding-left: 0; }
}

/* Explicit start columns, for the few rows the design deliberately offsets rather than packs:
   the mobile caveat at 7, the creator note at 4, the closing CTA at 8. The gap is the point --
   it is what makes those blocks read as asides rather than as the other half of a two-up. */
.col-start-4 { grid-column-start: 4; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }

@media (max-width: 899px) {
  /* The row is a flex stack at this width, so a start column would be meaningless. */
  .col-start-4, .col-start-7, .col-start-8 { grid-column-start: auto; }
}