/* Duolingo Redesign — concept case study
   White ground + Duolingo palette. Editorial serif display keeps it in the
   portfolio family; phone wireframes use a rounded sans to feel Duo-native.
   No external dependencies. */

:root {
  color-scheme: light;
  --paper: #ffffff;
  --surface: #ffffff;
  --ink: #2b2b2b;
  --muted: #6f6f6f;
  --faint: #9a9a9a;
  --line: #e5e5e5;
  --line-soft: #efefef;
  --polar: #f7f7f7;

  --green: #58cc02;
  --green-d: #58a700;
  --green-ink: #4b8b1e;
  --green-t: #eaf9dc;
  --blue: #1cb0f6;
  --blue-t: #ddf4ff;
  --red: #ff4b4b;
  --red-t: #ffe9e9;
  --orange: #ff9600;
  --yellow: #ffc800;

  --accent: var(--green);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, ui-serif, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Nunito, var(--sans);
  --max: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-color: color-mix(in srgb, var(--green) 55%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--green-ink); }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }

em { font-style: italic; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -52px; left: 20px; z-index: 100;
  padding: 10px 14px; background: var(--ink); color: #fff;
}
.skip-link:focus { top: 12px; }

/* ---------- shared shell header ---------- */

[data-shell="case-header"] {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.shell-header-inner {
  display: flex; align-items: baseline; gap: 16px;
  width: min(100% - 48px, var(--max)); margin: 0 auto; padding: 18px 0 14px;
}
.shell-brand {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  letter-spacing: .01em; text-decoration: none; white-space: nowrap;
}
.shell-case-title { color: var(--faint); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
[data-shell="section-nav"] { display: flex; gap: 26px; margin-left: auto; }
[data-shell="section-nav"] a { color: var(--muted); font-size: 13px; letter-spacing: .02em; text-decoration: none; }
[data-shell="section-nav"] a:hover, [data-shell="section-nav"] a:focus-visible { color: var(--green-ink); }

/* ---------- shared type ---------- */

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin-top: 0; }

.eyebrow {
  margin: 0 0 14px; color: var(--muted); font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.eyebrow .chapter { color: var(--green-ink); margin-right: 12px; padding-right: 12px; border-right: 1px solid var(--line); }

p { margin-top: 0; }

.section {
  width: min(100% - 48px, var(--max)); margin: 0 auto;
  padding: 104px 0 96px; border-top: 1px solid var(--line);
}
.section-head { max-width: none; margin-bottom: 64px; }

h2 {
  margin-bottom: 20px; font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.18; letter-spacing: -.015em; text-wrap: pretty;
}
.section-intro { max-width: 80ch; color: var(--muted); font-size: 18px; margin-bottom: 0; }

.src-note { margin: 44px 0 0; color: var(--faint); font-size: 12.5px; }

/* ---------- 00 hero ---------- */

.hero {
  display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  gap: clamp(40px, 5vw, 72px); align-items: center;
  width: min(100% - 48px, var(--max)); margin: 0 auto;
  padding: clamp(40px, 6vh, 76px) 0 92px;
}
.product-label { margin: 0 0 20px; font-family: var(--serif); font-size: 15px; color: var(--ink); }
.product-label span { color: var(--muted); }

h1 {
  margin-bottom: 26px; font-size: clamp(2.4rem, 4.4vw, 3.5rem);
  line-height: 1.14; letter-spacing: -.02em; text-wrap: balance;
}
.lede { max-width: 60ch; color: var(--muted); font-size: 18px; }
.hl { color: var(--ink); font-weight: 600; background: linear-gradient(transparent 62%, var(--green-t) 62%); }
.language-note { max-width: 58ch; margin: 14px 0 0; color: var(--faint); font-size: 13.5px; font-style: italic; }

.facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px;
  margin: 40px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line);
}
.facts div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.facts dt { color: var(--faint); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.facts dd { margin: 0; font-size: 14px; line-height: 1.5; }

.hero-visual { display: flex; gap: clamp(12px, 1.6vw, 20px); max-width: 540px; margin: 0 auto; align-items: flex-start; }
.hero-visual .sim { flex: 1 1 0; min-width: 0; }
.hero-visual .sim-support { margin-top: 44px; }
.visual-note { max-width: 460px; margin: 24px auto 0; color: var(--faint); font-size: 13px; text-align: center; }

/* ---------- phone sim (shared) ---------- */

.sim {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 15px 15px 18px; box-shadow: 0 12px 30px rgba(0,0,0,.08);
  font-family: var(--round); overflow: hidden;
}
.sim-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sim-time { font-size: 11px; font-weight: 800; color: var(--ink); }
.sim-icons { width: 30px; height: 12px; border: 1.5px solid var(--ink); border-radius: 3px; position: relative; opacity: .8; }
.sim-icons::after { content: ""; position: absolute; inset: 2px; right: 40%; background: var(--ink); border-radius: 1px; }
.sim-h { font-family: var(--round); font-weight: 800; font-size: 17px; text-align: center; margin: 2px 0 16px; color: var(--ink); }
.sim-sub { font-weight: 800; font-size: 13px; color: var(--ink); margin: 16px 0 8px; }
.sim-sub.small { font-weight: 600; font-size: 11.5px; color: var(--muted); text-align: center; margin: 12px 0 0; line-height: 1.45; }
.sim-link { text-align: center; color: var(--blue); font-weight: 700; font-size: 12.5px; margin: 10px 0 0; text-decoration: underline; }

.sim-btn {
  display: block; width: 100%; margin: 14px 0 0; padding: 11px; border: 0;
  border-radius: 14px; background: var(--green); color: #fff; font-family: var(--round);
  font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 4px 0 var(--green-d); cursor: default;
}

/* gauge */
.gauge { position: relative; width: 200px; max-width: 82%; margin: 6px auto 2px; }
.gauge svg { width: 100%; height: auto; overflow: visible; }
.gauge-track { stroke: var(--swan, #e5e5e5); stroke-width: 12; stroke-linecap: round; }
.gauge-fill { stroke: var(--green); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 100; }
.gauge-val { position: absolute; top: 44%; left: 0; right: 0; text-align: center; }
.gauge-val b { font-size: 38px; font-weight: 800; color: var(--ink); }
.gauge-target { position: absolute; right: -4px; bottom: 4px; font-weight: 800; color: var(--green-ink); font-size: 13px; }

/* difficulty cards */
.diff-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.diff-card {
  padding: 11px 5px; border: 2px solid var(--line); border-radius: 12px; text-align: center;
  font-size: 12px; font-weight: 800; color: var(--muted);
  display: flex; flex-direction: column; gap: 5px; line-height: 1.2;
}
.diff-card.on { border-color: var(--green); color: var(--ink); background: var(--green-t); }
.diff-card em { font-style: normal; font-size: 9px; font-weight: 600; color: var(--faint); }

/* task rows */
.task { display: flex; align-items: center; gap: 10px; padding: 13px 13px; margin-bottom: 9px; background: var(--polar); border-radius: 14px; }
.task:last-child { margin-bottom: 0; }
.task.on { background: var(--green-t); }
.task-dot { width: 17px; height: 17px; border: 2px solid var(--faint); border-radius: 50%; flex: none; }
.task.on .task-dot { border-color: var(--green); }
.task-name { font-weight: 800; font-size: 13px; color: var(--ink); white-space: nowrap; }
.task-tag {
  margin-left: auto; flex: none; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0;
  color: var(--green-ink); background: #fff; padding: 3px 6px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap;
}
.task.on .task-tag { border-color: transparent; }

/* exercise */
.ex-top { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.ex-back { font-size: 22px; color: var(--faint); font-weight: 800; line-height: 1; }
.ex-bar { flex: 1; height: 12px; background: var(--line); border-radius: 999px; overflow: hidden; }
.ex-bar i { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.ex-hearts { color: var(--orange); font-size: 12px; letter-spacing: 1px; }
.ex-q { font-weight: 800; font-size: 15px; color: var(--ink); margin: 0 0 16px; }
.ex-prompt { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 2px solid var(--polar); }
.ex-owl { font-size: 40px; line-height: 1; }
.ex-bubble { border: 2px solid var(--line); border-radius: 12px; padding: 8px 14px; font-size: 15px; font-weight: 700; }
.ex-opts { display: grid; gap: 10px; }
.ex-opt { border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 12px; padding: 11px; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink); }
.ex-opt.sel { border-color: var(--blue); color: var(--blue); background: var(--blue-t); }

/* learning / forgetting curve sim */
.range { display: flex; justify-content: space-between; margin-bottom: 10px; }
.range span { font-size: 12px; font-weight: 800; color: var(--muted); padding: 3px 9px; border-radius: 8px; }
.range .on { background: var(--polar); color: var(--ink); }
.curve-box { position: relative; background: var(--polar); border-radius: 14px; padding: 10px 8px; }
.curve-box svg { width: 100%; height: auto; }
.cv-y { font-size: 10px; fill: var(--faint); font-weight: 700; }
.cv-line { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.cv-line.up { stroke: var(--green); }
.cv-mark { fill: var(--orange); stroke: #fff; stroke-width: 2.5; }
.cv-arrow { stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.cv-note {
  position: absolute; top: 8px; right: 10px; font-size: 9.5px; font-weight: 700;
  color: var(--orange); background: #fff; border-radius: 6px; padding: 2px 6px; border: 1px solid var(--line);
}
.cv-dates { display: block; text-align: center; font-size: 10px; color: var(--faint); font-weight: 600; margin-top: 6px; }

/* level-up sim */
.trophy {
  width: 84px; height: 84px; margin: 6px auto 12px; border-radius: 50%;
  background: var(--yellow); color: var(--ink); display: grid; place-items: center;
  font-family: var(--round); font-weight: 800; font-size: 26px; box-shadow: 0 5px 0 #e0ae00;
}
.lvl-line { text-align: center; font-weight: 800; font-size: 16px; margin: 0; color: var(--ink); }
.lvl-line b { color: var(--green-ink); }
.mini-stats { display: flex; gap: 10px; justify-content: center; margin: 14px 0 2px; }
.mini-stats span { background: var(--polar); border-radius: 10px; padding: 9px 12px; font-size: 10.5px; font-weight: 600; color: var(--muted); text-align: center; display: flex; flex-direction: column; line-height: 1.3; }
.mini-stats b { font-size: 17px; color: var(--green-ink); }

/* ---------- 01/02 columns (problem + competitors) ---------- */

.pain-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 52px); }
.pain { display: flex; flex-direction: column; }
.pain h3 { font-size: 21px; line-height: 1.3; margin: 6px 0 10px; min-height: 2.6em; text-wrap: pretty; }
.pain-lead { font-weight: 600; font-size: 15px; margin-bottom: 10px; color: var(--ink); }
.pain > p:last-child { color: var(--muted); font-size: 15px; margin-bottom: 0; }
.pain-num { margin: 0 0 4px; font-family: var(--serif); font-size: 15px; color: var(--green-ink); }

.quote-card {
  margin: 4px 0 0; padding: 22px 24px; background: var(--polar);
  border-radius: 14px; border-left: 4px solid var(--green);
  display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-height: 150px;
}
.quote-card blockquote { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink); }
.quote-card figcaption { margin-top: 14px; font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }

.comp-columns { margin-bottom: 0; }
.comp-columns .pain-num { font-size: 22px; }

/* comparison matrix */
.matrix-wrap { margin-top: 56px; overflow-x: auto; }
.matrix { width: 100%; border-collapse: collapse; min-width: 560px; }
.matrix th, .matrix td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.matrix thead th { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.matrix tbody th { font-family: var(--serif); font-weight: 600; font-size: 16px; }
.cell { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.cell.ok { background: var(--green-t); color: #3d7a12; }
.cell.mid { background: #fff4d6; color: #8a6a00; }
.cell.warn { background: var(--red-t); color: #b23b3b; }
.matrix-wrap figcaption { margin-top: 14px; font-size: 12px; color: var(--muted); }
.lg { display: inline-block; margin-left: 12px; font-size: 11.5px; }
.lg::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.lg.on::before { background: #8ed94f; }
.lg.mid::before { background: #ffd766; }
.lg.warn::before { background: #ff9e9e; }

/* ---------- 03–05 concepts ---------- */

.concept-row {
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(36px, 5vw, 72px); align-items: center;
  padding: 60px 0; border-top: 1px solid var(--line-soft);
}
.concept-row:first-of-type { border-top: 0; padding-top: 8px; }
.concept-row:last-of-type { padding-bottom: 0; }
.concept-row.flip { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
.concept-row.flip .concept-copy { order: 2; }
.concept-row.flip .concept-visual { order: 1; }
.concept-visual, .concept-copy { min-width: 0; }

.kicker { margin-bottom: 12px; color: var(--green-ink); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.gap-flag {
  display: inline-block; margin: 0 0 18px; padding: 7px 13px;
  background: var(--red-t); border-radius: 8px;
  font-size: 13px; font-weight: 600; line-height: 1.4; color: #b23b3b;
}
.gap-flag b { font-weight: 800; }
.concept-copy h3 { font-size: clamp(22px, 2.3vw, 28px); line-height: 1.25; margin-bottom: 14px; text-wrap: pretty; }
.concept-copy p { max-width: 54ch; color: var(--muted); font-size: 16px; }
.concept-copy .cite { margin: 14px 0 0; font-size: 12.5px; color: var(--faint); font-style: italic; }

.concept-visual { margin: 0; }
.concept-visual figcaption { margin-top: 14px; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.6; }

.chart { width: 100%; height: auto; background: var(--polar); border-radius: 14px; padding: 12px; }
.axis { stroke: var(--line); stroke-width: 1.5; }
.ax-y, .ax-x { font-size: 9px; fill: var(--faint); }
.curve-blocked { stroke: var(--faint); stroke-width: 2.5; stroke-dasharray: 5 5; }
.curve-inter { stroke: var(--green); stroke-width: 3; }
.pt-b { fill: var(--faint); }
.pt-i { fill: var(--green); }

.band-anx { fill: var(--red-t); }
.band-zpd { fill: var(--green-t); }
.band-bore { fill: #efefef; }
.band-t { font-size: 9px; fill: var(--muted); font-weight: 700; }
.band-t.zpd { fill: var(--green-ink); }
.line-ideal { stroke: var(--green); stroke-width: 3; }
.line-duo { stroke: var(--faint); stroke-width: 2.5; }

.lg-line { display: inline-block; width: 16px; height: 3px; border-radius: 2px; margin: 0 5px 3px 10px; vertical-align: middle; }
.lg-line:first-child { margin-left: 0; }
.lg-line.blocked, .lg-line.duo { background: var(--faint); }
.lg-line.inter, .lg-line.ideal { background: var(--green); }

.sdt { display: flex; align-items: center; gap: 14px; padding: 22px; background: var(--polar); border-radius: 16px; }
.sdt-side { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sdt-cap { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--faint); margin: 0 0 2px; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; }
.chip.solid { background: var(--green); color: #fff; border-color: var(--green); font-weight: 700; }
.sdt-arrow { font-size: 24px; color: var(--green); font-weight: 800; flex: none; }
.sdt-needs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sdt-needs span { font-size: 10.5px; font-weight: 700; color: var(--green-ink); background: var(--green-t); border-radius: 6px; padding: 3px 8px; }

/* ---------- 06–08 redesign (journey rows) ---------- */

.journey-row {
  display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: clamp(36px, 4.5vw, 64px); align-items: center;
  padding: 64px 0; border-top: 1px solid var(--line-soft);
}
.journey-row:first-of-type { border-top: 0; padding-top: 8px; }
.journey-row:last-of-type { padding-bottom: 0; }
.journey-row.flip { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
.journey-row.flip .journey-copy { order: 2; }
.journey-row.flip .journey-visual { order: 1; }
.journey-visual, .journey-copy { min-width: 0; }

.journey-copy h3 { font-size: clamp(22px, 2.3vw, 28px); line-height: 1.25; margin-bottom: 14px; text-wrap: pretty; }
.journey-copy p { max-width: 52ch; color: var(--muted); font-size: 16px; }
.journey-copy p:last-child { margin-bottom: 0; }
.micro { font-family: var(--serif); font-style: italic; color: var(--ink) !important; font-size: 17px !important; }

.shots-sim { display: grid; gap: clamp(16px, 2vw, 26px); align-items: start; }
.shots-sim.shots-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sim-fig { margin: 0; }
.sim-fig .sim { max-width: 330px; margin: 0 auto; }
.sim-fig figcaption { margin-top: 12px; color: var(--faint); font-size: 12px; text-align: center; }

/* ---------- 09 user flow ---------- */

.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.flow-node { flex: 1 1 190px; background: var(--polar); border: 2px solid var(--line); border-radius: 16px; padding: 18px; }
.flow-node.start { border-color: var(--green); }
.flow-node.end { border-color: var(--blue); }
.flow-k { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--green-ink); }
.flow-node.end .flow-k { color: var(--blue); }
.flow-node b { display: block; font-family: var(--serif); font-size: 19px; margin: 6px 0; }
.flow-node p { margin: 0; font-size: 13px; color: var(--muted); }
.flow-arrow { align-self: center; font-size: 22px; color: var(--faint); }
.flow-loop { flex: 2 1 340px; background: #fff; border: 2px solid var(--green); border-radius: 16px; padding: 18px 20px; }
.loop-cap { font-weight: 700; font-size: 14px; margin: 0 0 14px; color: var(--ink); }
.loop-cap span { display: block; font-size: 10.5px; font-weight: 700; color: var(--green-ink); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.phases { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.phase { flex: 1 1 auto; background: var(--green-t); border-radius: 10px; padding: 10px 6px; text-align: center; font-weight: 800; font-size: 12.5px; color: var(--ink); }
.ph-n { display: block; font-size: 10px; font-weight: 700; color: var(--green-ink); }
.ph-arrow { color: var(--faint); font-weight: 800; }
.loop-note { margin: 14px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.flow-return { flex-basis: 100%; text-align: center; font-size: 12.5px; color: var(--green-ink); font-weight: 700; margin-top: 4px; }

/* ---------- 10 takeaways / cta ---------- */

.takeaways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(40px, 6vw, 88px); }
.takeaways div { padding: 26px 0; border-top: 1px solid var(--line-soft); }
.takeaways h3 { font-size: 20px; margin-bottom: 8px; }
.takeaways p { margin: 0; max-width: 52ch; color: var(--muted); font-size: 15px; }

.closing-note {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--muted);
  max-width: 60ch;
}

/* ---------- shared shell footer ---------- */

[data-shell="case-footer"] {
  border-top: 1px solid var(--line);
}
.shell-footer-inner {
  width: min(100% - 48px, var(--max)); margin: 0 auto; padding: 32px 0 56px;
}
.shell-cta-heading { font-size: 1.1em; margin: 0 0 8px; }
.shell-connect { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.shell-connect a { color: var(--muted); font-size: 15px; font-weight: 600; }
.shell-connect a:hover { color: var(--green-ink); }
[data-shell="disclosure-note"] { margin: 8px 0 16px; color: var(--muted); font-size: 12.5px; max-width: 72ch; }

/* ---------- tablet ≤ 1080 ---------- */
@media (max-width: 1080px) {
  .facts { gap: 0 26px; }
}

/* ---------- ≤ 900 ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 32px; }
  .hero-visual { max-width: 360px; }

  .pain-columns { grid-template-columns: 1fr; gap: 48px; }
  .quote-card { min-height: 0; }

  .concept-row, .journey-row,
  .concept-row.flip, .journey-row.flip { grid-template-columns: 1fr; gap: 32px; align-items: start; padding: 52px 0; }
  .concept-row.flip .concept-copy, .journey-row.flip .journey-copy { order: 1; }
  .concept-row.flip .concept-visual, .journey-row.flip .journey-visual { order: 2; }
  .concept-visual .chart, .concept-visual .sdt { max-width: 520px; }
  .shots-sim .sim, .sim-fig .sim { }

  .takeaways { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- mobile ≤ 620 ---------- */
@media (max-width: 620px) {
  body { font-size: 16px; }
  .shell-header-inner, .shell-footer-inner { width: min(100% - 32px, var(--max)); }
  [data-shell="section-nav"] { gap: 15px; }
  [data-shell="section-nav"] a { font-size: 12px; }

  .section, .hero { width: min(100% - 32px, var(--max)); }
  .section { padding: 68px 0 60px; }
  .section-head { margin-bottom: 44px; }
  .lede, .section-intro { font-size: 16.5px; }
  .facts { grid-template-columns: 1fr; }

  .journey-copy p, .concept-copy p { font-size: 15px; }
  .shots-sim.shots-2 { grid-template-columns: 1fr; gap: 30px; max-width: 320px; margin: 0 auto; }

  .hero-visual { flex-direction: column; align-items: center; max-width: 300px; }
  .hero-visual .sim { flex: none; width: 100%; }
  .hero-visual .sim-support { margin-top: 22px; }

  .flow-arrow { display: none; }
  .flow-node, .flow-loop { flex-basis: 100%; }
}  /* end ≤620 mobile */

/* ---------- narrow ≤ 420 ---------- */
@media (max-width: 420px) {
  .shell-header-inner { align-items: flex-start; flex-direction: column; gap: 10px; }
  [data-shell="section-nav"] { justify-content: space-between; width: 100%; gap: 6px; margin-left: 0; }
  [data-shell="section-nav"] a { font-size: 11px; }
  .sdt { flex-direction: column; align-items: stretch; }
  .sdt-arrow { transform: rotate(90deg); align-self: center; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}