/* Section 3 — How I Coach. Consumes tokens.css.

   ROUND NINE, TWO CHANGES, both at source.

   1. EVERY COMPONENT SELECTOR IS SCOPED TO .s3-host. `.card` collided with section-4.css's own
      `.card` in the assembled page and there was no load order that was correct; the rest were
      audited at the same time rather than waiting for their turn. Bare selectors here today that
      collide with nothing — .art, .inset, .dg, .dt, .metrics, .say, .av, .bub, .ts — are scoped
      too, because "collides with nothing" is a fact about today's files.

   2. TYPE SIZE AND PAGE MARGIN MOVE TO 1088; THE THREE-COLUMN GRID STAYS AT 1200. The arc set the
      breakpoint per section on layout arithmetic, and type size and page margin were carried along
      by it without anyone deciding they should be. Three columns need 1200. Type does not.

   The duplicate :root block was folded out (Build 1). Every custom property this file consumes is
   declared once in tokens.css, which is loaded before this sheet on the home page — the only page
   that uses section 3. The fold is inert: the block's twelve values were byte-identical to
   tokens.css, so nothing renders differently. The paper trail here, in SPEC Section 4 and in
   REPORT Assembly pass described a #6B6669 -> #6B6B6B correction, but that hex was already #6B6B6B
   in this file, so no colour changed. */
.s3-host,.s3-host *,.s3-host *::before,.s3-host *::after{box-sizing:border-box}
.s3{background:var(--ground);border-top:1px solid var(--line);padding:24px var(--margin);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.s3 a{color:var(--purple);text-decoration:none}
.s3 a:hover{color:var(--pink)}
.s3__title{margin:0 0 16px;font-family:var(--cond);font-weight:700;font-size:35px;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
/* Intro caps to --measure (640px, Build 3 Ruling 1). In the tablet band it ran full-bleed to the page
   margin (46em / ~88 chars at 834) — the widest measure on the site. Left on the page margin, matching
   section 3's own title and rail; the cap only narrows the column, it does not move it. Desktop keeps
   max-width:none (its ratified value) via the >=1088 rule below, so this bites only in the band. */
.s3__intro{max-width:var(--measure)}
.s3__intro p{margin:0 0 16px;font-size:17px;line-height:1.5;text-wrap:pretty}
.s3__intro p:last-child{margin:0}

/* Full-bleed scroller: the negative margin cancels the section's left/right padding so cards bleed to
   the screen edge, and the rail's own padding re-insets the first card to the section content. All
   three read --margin so they move together in the band (Build 3, Ruling 3) — as they already do at
   desktop (>=1088 below, at 64). */
.s3__rail{display:flex;gap:16px;margin:24px calc(-1 * var(--margin)) 0;padding:0 var(--margin);scroll-padding-inline:var(--margin);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:stretch}
.s3__rail::-webkit-scrollbar{display:none}
.s3-host .card{flex:0 0 min(calc(100vw - 60px),420px);scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px}
.s3-host .card__label{font-family:var(--cond);font-weight:700;font-size:22px;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:var(--purple)}
.s3-host .card__claim{margin:0;font-size:17px;line-height:1.45;font-weight:600;text-wrap:pretty}
.s3-host .art{padding-top:2px;display:flex;flex-direction:column;gap:10px}
.s3-host .art p{margin:0;text-wrap:pretty}

.s3-host .inset{background:var(--ground);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;grid-template-columns:34px 1fr;gap:0 12px;align-items:center}
.s3-host .dg{font-family:var(--cond);font-weight:700;font-size:15px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.s3-host .dt{font-size:17px;line-height:1.35;font-weight:600}
.s3-host .dt s{color:var(--ink3);text-decoration-thickness:1px;font-weight:400}
.s3-host .metrics{grid-column:2;margin-top:6px;font-family:var(--cond);font-weight:700;font-size:17px;line-height:1.2;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--ink2)}

.s3-host .say{display:flex;gap:10px;align-items:flex-start}
.s3-host .say p{font-size:17px;line-height:1.5}
.s3-host .inset .say{grid-column:1/-1;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.s3-host .av{width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 30%;background:#DDE0DA;box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--pink)}
.s3-host .inset .av{box-shadow:0 0 0 2px var(--ground),0 0 0 3.5px var(--pink)}

.s3-host .bub{align-self:flex-end;max-width:90%;background:var(--purple-tint);border-radius:14px 14px 4px 14px;padding:12px 14px;font-size:17px;line-height:1.45}
.s3-host .ts{align-self:flex-end;margin-top:-4px;font-size:13px;line-height:1.2;color:var(--ink2)}

/* 1088 — type size and page margin, matching sections 1, 2, 4 and the footer. The rail is still a
   rail here: 1,040px wide with 64px margins and a 56px title, which is the ratified sub-1200
   behaviour shown at a wide window. */
@media(min-width:1088px){
.s3{padding:48px 64px}
.s3__title{font-size:56px;margin-bottom:20px}
.s3__intro{max-width:none}
.s3__intro p{font-size:18px;line-height:1.55;margin-bottom:18px}
/* The rail's own negative margins follow the page margin, or the cards sit 40px inside it. */
.s3__rail{margin:36px -64px 0;padding:0 64px;scroll-padding-inline:64px}
}

/* 1200 — layout only: three columns, and the type steps that belong to the wider card. */
@media(min-width:1200px){
.s3__rail{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto;column-gap:24px;row-gap:12px;margin:36px 0 0;padding:0;overflow:visible;scroll-snap-type:none;scroll-padding-inline:0}
.s3-host .card{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:0;padding:24px}
.s3-host .card__label{font-size:24px}
.s3-host .card__claim{font-size:18px;line-height:1.5}
.s3-host .dt,.s3-host .bub,.s3-host .say p,.s3-host .metrics{font-size:18px;line-height:1.5}
}