/* 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;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)}
.s3__intro p{margin:0 0 16px;font-size:17px;line-height:1.5;text-wrap:pretty}
.s3__intro p:last-child{margin:0}

.s3__rail{display:flex;gap:16px;margin:24px -24px 0;padding:0 24px;scroll-padding-inline:24px;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}
}