/* Naytra — "The difference" (Figma 149:114): left header + right numbered list.
   Light section. Fraunces title + DM Sans, system colour/spacing tokens, frame grid.
   Depends on tokens.css + base.css. Mirrors the shared section-header treatment. */

.diff{
  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:var(--paper);color:var(--ink);
  padding-block:clamp(96px,14vh,180px);
}

/* Two columns × two rows: eyebrow sits alone in row 1 (left); the title (left) and the
   list (right) share row 2, so the list top aligns with the TITLE, not the eyebrow. */
/* Full-bleed like the Problem section — no frame cap, shared 6vw side padding. */
.diff__inner{
  padding:0 clamp(var(--space-40),6vw,var(--space-120));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--space-20) clamp(40px,8vw,120px);align-items:start}

/* Left — shared section-header treatment (eyebrow + Fraunces title + body).
   Title+body wrap shares row 2 with the list, so the list top aligns with the TITLE. */
.diff__eyebrow{grid-column:1;grid-row:1;
  font-family:var(--font-sans);font-weight:600;font-size:12px;line-height:1.2;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-700);margin:0}
.diff__head2{grid-column:1;grid-row:2}
.diff__title{font-family:var(--font-serif);font-weight:340;color:var(--ink);
  font-size:clamp(30px,3.8vw,44px);line-height:1.08;letter-spacing:-.02em;margin:0;
  max-width:16ch;text-wrap:balance}
.diff__body{font-family:var(--font-sans);font-weight:400;font-size:17px;
  line-height:1.5;color:var(--ink-2);margin:var(--space-20) 0 0;max-width:38ch}
.diff__list{grid-column:2;grid-row:2}

/* Right — process list, hairline between rows; number lives in the title (01. …) */
.diff__list{list-style:none;margin:0;padding:0;counter-reset:diff}
.diff__row{padding:var(--space-30) 0;border-top:1px solid var(--line)}
.diff__row:first-child{border-top:0;padding-top:0}

.diff__steptitle{font-family:var(--font-sans);font-weight:400;font-size:24px;
  line-height:1.2;letter-spacing:-.005em;color:var(--ink);margin:0}
.diff__steptitle::before{counter-increment:diff;
  content:counter(diff,decimal-leading-zero) ".";margin-right:.5em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.diff__stepbody{font-family:var(--font-sans);font-weight:400;
  font-size:clamp(14px,1.4vw,16px);line-height:1.5;color:var(--ink-3);
  margin:var(--space-10) 0 0;max-width:46ch}

@media (max-width:860px){
  .diff__inner{grid-template-columns:1fr;gap:var(--space-20)}
  .diff__eyebrow,.diff__head2,.diff__list{grid-column:1;grid-row:auto}
  .diff__list{margin-top:clamp(24px,5vw,44px)}
  .diff__title,.diff__body{max-width:none}
  .diff__row{gap:var(--space-30)}
}