/* Sample-project presentation (app/pages/case.php) */
@media (min-width: 1100px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  html:has(.page-case) { scroll-snap-type: y proximity; }
  .cs-slide { scroll-snap-align: start; }
}
/* Slides already reserve the header height in their own padding, so cancel the global scroll-padding-top used for anchors and scroll-snap */
html:has(.page-case) { scroll-padding-top: 0; }
.cs-slide { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--header-h) + 2.5rem) 4rem; }
.cs-count { position: absolute; top: calc(var(--header-h) + 1.25rem); right: var(--gutter); margin: 0; font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--fg-soft, var(--ink-dark-bg-soft)); }

/* Cover */
.cs-cover { align-items: flex-end; padding-bottom: clamp(3rem, 8vh, 6rem); background: var(--g-deep); color: #fff; overflow: hidden; }
.cs-cover__photo { position: absolute; inset: 0; height: 100%; }
.cs-cover__photo::after { background: linear-gradient(90deg, rgba(8, 13, 20, .55) 0%, rgba(8, 13, 20, 0) 65%), linear-gradient(180deg, rgba(8, 13, 20, .45) 0%, rgba(8, 13, 20, .35) 30%, rgba(8, 13, 20, .92) 100%) !important; }
/* Keep the theme's corner brackets clear of the overlay header */
.cs-cover__photo::before { inset: calc(var(--header-h) + 12px) 12px 12px; }
.cs-cover__body { position: relative; z-index: 3; }
.cs-cover .cs-count { z-index: 3; color: rgba(255, 255, 255, .75); }
.cs-cover .crumbs li, .cs-cover .crumbs a { color: rgba(255, 255, 255, .88); }
.cs-cover .crumbs [aria-current] { color: #fff; }
.cs-cover h1 { max-width: 18ch; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem); color: #fff; }
.cs-lede { margin-top: var(--s-5); max-width: 40rem; font-size: var(--step-1); line-height: 1.5; color: rgba(255, 255, 255, .86); }
.cs-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.cs-tags li { padding: .3rem .75rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; font-size: .82rem; color: #fff; background: rgba(8, 13, 20, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cs-tags .cs-tags__sample { border-color: var(--accent); color: var(--accent); background: rgba(8, 13, 20, .6); font-weight: 600; }
.cs-start { margin-top: var(--s-6); }

/* Context & stack */
.cs-context__grid { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .cs-context__grid { grid-template-columns: 1.1fr 1fr; gap: var(--s-9); align-items: start; } }
.cs-text { margin-top: var(--s-5); max-width: 36rem; font-size: var(--step-1); line-height: 1.55; color: var(--fg-soft); }
.cs-notice { display: flex; gap: .7rem; align-items: flex-start; margin-top: var(--s-6); max-width: 36rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--step--1); line-height: 1.55; color: var(--fg-soft); }
.cs-notice .icon { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .1rem; color: var(--accent-text); }
.cs-notice strong { color: var(--fg); font-weight: 650; }
.cs-context__side h3 { font-size: var(--step-1); margin-bottom: var(--s-4); }
.cs-context__side h3 + * + h3 { margin-top: var(--s-7); }
.cs-goals { margin: 0; padding: 0; list-style: none; counter-reset: g; display: grid; gap: 0; }
.cs-goals li { counter-increment: g; display: grid; grid-template-columns: 2.2rem 1fr; padding-block: .9rem; border-top: 1px solid var(--line); font-weight: 550; }
.cs-goals li::before { content: counter(g, decimal-leading-zero); font-family: var(--font-display); font-size: .85rem; color: var(--accent-text); padding-top: .15rem; }
.cs-kpis { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.cs-kpis li { padding: .45rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: .9rem; }
.cs-kpis--stack { margin-top: var(--s-6); display: grid; gap: 0; }
.cs-kpis--stack li { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: .9rem 0; font-size: var(--step-0); }
.cs-gallery { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
.cs-gallery .photo { aspect-ratio: 4 / 5; border-radius: var(--radius); }
.cs-gallery .photo:only-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
/* Light stack slide: drop the dark-ground fade and heavy grade so the photos sit cleanly on the light ground */
.cs-stack .cs-gallery .photo::after { background: linear-gradient(0deg, rgba(101, 199, 247, .08), rgba(101, 199, 247, .08)); }
.cs-stack .cs-gallery .photo img { filter: grayscale(.2) saturate(.95) contrast(1.03); }
.cs-end { display: grid; gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); align-items: end; }
@media (min-width: 900px) { .cs-end { grid-template-columns: 1fr auto; } }
.cs-end h3 { font-size: var(--step-2); }
.cs-end p { margin-top: .5rem; color: var(--fg-soft); }
.cs-end__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }

/* Steps */
.cs-step__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) {
  .cs-step__grid { grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: stretch; }
  .cs-step__grid--flip .cs-step__photo { order: -1; }
  /* Every step clears the right-aligned slide counter; the visual centres on the text beside it */
  .cs-step__grid { padding-top: 1.5rem; }
  .cs-step__visual { align-self: center; }
}
.cs-step h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); }
.cs-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: var(--s-4); font-size: var(--step--1); color: var(--fg-soft); }
.cs-meta span:first-child { color: var(--accent-text); font-weight: 650; }
.cs-sub { margin-top: var(--s-6); font-family: var(--font-body); font-size: var(--step-0); font-weight: 650; letter-spacing: 0; color: var(--fg); }
.cs-outputs { margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.cs-outputs li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .6rem; padding-block: .6rem; border-top: 1px solid var(--line); }
.cs-outputs .icon { width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--accent-text); }
.cs-step__photo { aspect-ratio: 4 / 3; border-radius: var(--radius); }
@media (min-width: 760px) and (max-width: 959px) { .cs-step__photo { aspect-ratio: 16 / 9; } }
/* Two columns: the photo fills the height of the text beside it */
@media (min-width: 960px) { .cs-step__photo { aspect-ratio: auto; height: 100%; min-height: 20rem; } }

/* Rail */
.cs-rail { position: fixed; right: clamp(.6rem, 1.4vw, 1.5rem); top: 50%; z-index: 40; transform: translateY(-50%); display: none; }
@media (min-width: 1280px) { .js .cs-rail { display: block; } }
.cs-rail ol { list-style: none; margin: 0; padding: .7rem .5rem; display: grid; gap: .5rem; border-radius: 999px; background: rgba(8, 13, 20, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cs-rail a { position: relative; display: block; width: 14px; height: 14px; }
.cs-rail a::before { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: rgba(243, 246, 248, .45); transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast); }
.cs-rail a:hover::before, .cs-rail a.is-current::before { background: var(--accent); transform: scale(1.5); }
.cs-rail span { position: absolute; right: calc(100% + .75rem); top: 50%; transform: translate(6px, -50%); padding: .2rem .55rem; border-radius: 3px; background: var(--accent); color: var(--accent-ink); font-size: .74rem; font-weight: 650; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t-fast), transform var(--t-med) var(--ease-out); }
.cs-rail a:hover span, .cs-rail a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
@media (min-width: 1800px) { .cs-rail a.is-current span { opacity: 1; transform: translate(0, -50%); } }
/* Keep slide content clear of the rail where the two are close */
@media (min-width: 1280px) and (max-width: 1599px) { .cs .wrap { padding-inline: var(--gutter) calc(var(--gutter) + 2rem); } }

@media (max-width: 759px) {
  .cs-slide { min-height: 0; padding-block: 4.5rem; }
  .cs-cover { min-height: 92svh; padding-top: calc(var(--header-h) + 3.5rem); }
  .cs-count { top: 1.25rem; }
  .cs-cover .cs-count { top: calc(var(--header-h) + 22px); right: 26px; }
  .cs-cover__photo::after { background: linear-gradient(180deg, rgba(8, 13, 20, .6) 0%, rgba(8, 13, 20, .6) 30%, rgba(8, 13, 20, .92) 100%) !important; }
  .cs-gallery .photo { aspect-ratio: 1; }
}

/* ---------- Infographics (app/templates/partials/infographic.php) ---------- */
.cs-step__visual { min-width: 0; }
.ig { margin: 0; padding: clamp(1.1rem, 2.4vw, 1.75rem); border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--fg) 3%, transparent); font-size: .92rem; line-height: 1.4; }
.ig__title { margin-bottom: 1.1rem; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.ig__note { margin-top: 1rem; font-size: .84rem; color: var(--fg-soft); }
.ig ul, .ig ol { list-style: none; margin: 0; padding: 0; }
.ig-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .9rem !important; font-size: .8rem; color: var(--fg-soft); }
.ig-legend li { display: inline-flex; align-items: center; gap: .45rem; }

/* flow */
.ig-flow { display: grid; gap: .55rem; counter-reset: f; }
.ig-node { position: relative; display: grid; gap: .1rem; padding: .7rem .9rem .7rem 2.6rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); counter-increment: f; }
.ig-node::before { content: counter(f); position: absolute; left: .8rem; top: .72rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .72rem; font-weight: 700; }
.ig-node + .ig-node::after { content: ""; position: absolute; left: 1.42rem; top: -.6rem; height: .6rem; border-left: 1.5px solid var(--accent); }
.ig-node strong { font-weight: 650; color: var(--fg); }
.ig-node span { font-size: .84rem; color: var(--fg-soft); }
.ig-node.is-manual { border-style: dashed; }
.ig-node.is-manual::before { background: transparent; color: var(--fg); border: 1.5px dashed var(--fg-soft); }
.ig-node.is-lost { border-style: dashed; border-color: var(--error, #FF8A7A); }
.ig-node.is-lost::before { background: var(--error, #FF8A7A); color: #061019; }
.ig-loopback { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .8rem; color: var(--accent-text); }
.ig-loopback svg { width: 1rem; height: 1rem; }
@media (min-width: 1200px) {
  .ig-flow { grid-template-columns: repeat(var(--n, 4), 1fr); grid-auto-flow: column; gap: 1.1rem; }
  .ig-flow:has(> :nth-child(4):last-child) { --n: 4; }
  .ig-flow:has(> :nth-child(5):last-child) { --n: 5; }
  .ig-flow:has(> :nth-child(3):last-child) { --n: 3; }
  .ig-node { padding: 2.3rem .8rem .8rem; }
  .ig-node::before { top: .7rem; left: .8rem; }
  .ig-node + .ig-node::after { left: -1.1rem; top: 1.32rem; width: 1.1rem; height: 0; border-left: 0; border-top: 1.5px solid var(--accent); }
}

/* tree */
.ig-tree__root { display: inline-block; padding: .45rem .9rem; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.ig-tree__branches { display: grid; gap: .7rem; margin-top: .9rem; padding-top: .9rem; border-top: 1.5px solid var(--accent); }
@media (min-width: 560px) { .ig-tree__branches { grid-template-columns: repeat(3, 1fr); } }
.ig-tree__branch { padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.ig-tree__branch strong { display: block; margin-bottom: .4rem; font-weight: 650; }
.ig-tree__branch li { padding: .22rem 0 .22rem .9rem; position: relative; color: var(--fg-soft); font-size: .86rem; }
.ig-tree__branch li::before { content: ""; position: absolute; left: 0; top: .75em; width: .5rem; border-top: 1px solid var(--accent); }

/* screens */
.ig-screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.ig-phone { position: relative; display: grid; gap: .35rem; align-content: start; min-width: 0; padding: 1.6rem .55rem .7rem; border: 1.5px solid var(--fg-soft); border-radius: 14px; background: var(--bg); }
.ig-phone::before { content: ""; position: absolute; top: .55rem; left: 50%; width: 28%; height: 4px; border-radius: 4px; background: var(--line); transform: translateX(-50%); }
.ig-phone__step { position: absolute; top: -.7rem; left: -.5rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .72rem; font-weight: 700; }
.ig-phone__title { margin-bottom: .2rem; font-weight: 650; font-size: .82rem; line-height: 1.2; }
.ig-phone__row { padding: .35rem .45rem; border: 1px solid var(--line); border-radius: 4px; font-size: .74rem; color: var(--fg-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-phone__row.is-active { border-color: var(--accent); color: var(--fg); }
.ig-phone__cta { margin-top: .3rem; padding: .4rem .45rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .72rem; font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* stack */
.ig-stack { display: grid; gap: .6rem; align-items: center; }
@media (min-width: 640px) { .ig-stack { grid-template-columns: 1fr auto 1.1fr auto 1fr; gap: .7rem; } }
.ig-stack__col { display: grid; gap: .45rem; }
.ig-stack__col li { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); font-size: .85rem; }
.ig-stack__col--out li { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.ig-stack__hub { padding: .9rem .9rem; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-align: center; line-height: 1.3; }
.ig-stack__arrow { justify-self: center; width: 0; height: 1.2rem; border-left: 1.5px solid var(--accent); position: relative; }
.ig-stack__arrow::after { content: ""; position: absolute; left: -5px; bottom: -2px; border: 4.5px solid transparent; border-top-color: var(--accent); border-bottom: 0; }
@media (min-width: 640px) {
  .ig-stack__arrow { width: 1.4rem; height: 0; border-left: 0; border-top: 1.5px solid var(--accent); }
  .ig-stack__arrow::after { left: auto; right: -2px; bottom: auto; top: -5.5px; border: 4.5px solid transparent; border-left-color: var(--accent); border-right: 0; }
}

/* matrix */
.ig-matrix { display: grid; gap: .35rem; }
.ig-matrix__row { display: grid; grid-template-columns: minmax(6.5rem, 1.4fr) repeat(3, 1fr); gap: .35rem; align-items: center; }
.ig-matrix__row--head span { font-size: .78rem; color: var(--fg-soft); text-align: center; }
.ig-matrix__row [role="rowheader"] { font-weight: 600; font-size: .86rem; }
.ig-cell { display: block; height: 1.9rem; border-radius: 4px; border: 1px solid var(--line); }
.ig-cell.is-on { background: color-mix(in srgb, var(--accent) 80%, transparent); border-color: var(--accent); }
.ig-cell.is-off { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--line) 5px 6px); }
.ig-legend .ig-cell { width: 1.1rem; height: .8rem; }

/* funnel */
.ig-funnel { display: grid; gap: .35rem; justify-items: center; }
.ig-funnel li { width: var(--w); min-width: 11rem; padding: .62rem .8rem; border-radius: 4px; text-align: center; font-weight: 600; font-size: .86rem; }
.ig-funnel li.is-seen { background: color-mix(in srgb, var(--accent) 85%, transparent); color: var(--accent-ink); }
.ig-funnel li.is-gap { border: 1.5px dashed var(--fg-soft); color: var(--fg); }
.ig-swatch { display: inline-block; width: 1.1rem; height: .8rem; border-radius: 2px; }
.ig-swatch.is-seen { background: var(--accent); }
.ig-swatch.is-gap { border: 1.5px dashed var(--fg-soft); }

/* quadrants */
.ig-quads { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.ig-quad { display: grid; gap: .3rem; align-content: start; padding: .85rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.ig-quad strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.ig-quad span { font-size: .84rem; color: var(--fg-soft); }
.ig-quad em { font-style: normal; font-size: .78rem; font-weight: 650; color: var(--accent-text); }
.ig-quad:nth-child(1) { border-color: var(--accent); }

/* pairs */
.ig-pairs { display: grid; gap: .55rem; }
.ig-pairs li { display: grid; grid-template-columns: minmax(0, .9fr) 1.8rem minmax(0, 1.4fr); align-items: center; gap: .4rem; }
.ig-pairs__a { padding: .55rem .7rem; border-radius: 999px; border: 1px solid var(--accent); color: var(--fg); font-weight: 600; font-size: .84rem; text-align: center; }
.ig-pairs__b { padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); font-size: .85rem; }
.ig-pairs__arrow { height: 0; border-top: 1.5px solid var(--accent); position: relative; }
.ig-pairs__arrow::after { content: ""; position: absolute; right: -2px; top: -5.5px; border: 4.5px solid transparent; border-left-color: var(--accent); border-right: 0; }

/* compare */
.ig-compare { display: grid; gap: .8rem; }
@media (min-width: 560px) { .ig-compare { grid-template-columns: 1fr 1fr; } }
.ig-compare__col strong { display: block; margin-bottom: .5rem; font-weight: 650; }
.ig-compare__col ol { display: grid; gap: .35rem; }
.ig-compare__col li { padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 4px; font-size: .85rem; background: var(--bg); }
.ig-compare__col li.is-manual { border-style: dashed; color: var(--fg-soft); }
.ig-compare__col li.is-lost { border-style: dashed; border-color: var(--error, #FF8A7A); }
.ig-compare__col.is-target li { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.ig-compare__col.is-target strong { color: var(--accent-text); }

/* checklist */
.ig-check { display: grid; gap: .1rem; }
@media (min-width: 640px) { .ig-check { grid-template-columns: 1fr 1fr; column-gap: 1rem; } }
.ig-check li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--line); font-size: .88rem; }
.ig-ico { width: 1.1rem; height: 1.1rem; padding: 2px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); margin-top: .1rem; }

/* phases */
.ig-phases { display: grid; gap: .6rem; }
@media (min-width: 640px) { .ig-phases { grid-template-columns: repeat(3, 1fr); } }
.ig-phases li { position: relative; display: grid; gap: .35rem; align-content: start; padding: .85rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.ig-phases li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 4px 4px 0 0; background: var(--accent); opacity: calc(.45 + var(--i, 0) * .25); }
.ig-phases li:nth-child(2) { --i: 1; } .ig-phases li:nth-child(3) { --i: 2; }
.ig-phases strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.ig-phases__goal { font-size: .84rem; color: var(--fg-soft); }
.ig-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.ig-chips i { padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 999px; font-style: normal; font-size: .75rem; }

/* cadence */
.ig-cadence { display: grid; gap: 0; }
.ig-cadence li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .8rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.ig-cadence li:first-child { border-top: 0; }
.ig-cadence strong { position: relative; padding-left: 1.1rem; font-weight: 650; color: var(--accent-text); }
.ig-cadence strong::before { content: ""; position: absolute; left: 0; top: .4em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); }
.ig-cadence span { color: var(--fg-soft); font-size: .88rem; }

/* gantt */
.cs-plan__grid { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 1100px) { .cs-plan__grid { grid-template-columns: 1.35fr 1fr; align-items: stretch; } }
.ig-gantt { display: grid; gap: .3rem; }
.ig-gantt__scale, .ig-gantt__row { display: grid; grid-template-columns: minmax(7.5rem, 11rem) 1fr; gap: .6rem; align-items: center; }
.ig-gantt__scale { display: grid; grid-template-columns: minmax(7.5rem, 11rem) repeat(calc(var(--weeks) + 1), 1fr); font-size: .72rem; color: var(--fg-soft); text-align: center; }
.ig-gantt__label { font-size: .84rem; font-weight: 550; line-height: 1.25; }
.ig-gantt__track { position: relative; height: 1.15rem; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / (var(--weeks) + 1))); }
.ig-gantt__bar { position: absolute; top: 2px; bottom: 2px; left: calc((var(--from) - 1) / (var(--weeks) + 1) * 100%); width: calc((var(--to) - var(--from) + 1) / (var(--weeks) + 1) * 100%); border-radius: 3px; background: var(--accent); }
.ig-gantt__bar.is-ongoing { background: repeating-linear-gradient(135deg, var(--accent) 0 6px, color-mix(in srgb, var(--accent) 45%, transparent) 6px 12px); }

/* roles */
.ig-roles { display: grid; gap: .25rem; overflow-x: auto; }
.ig-roles__row { display: grid; grid-template-columns: minmax(7.5rem, 1.6fr) repeat(4, minmax(3.2rem, 1fr)); gap: .3rem; align-items: center; }
.ig-roles__row--head span { font-size: .7rem; color: var(--fg-soft); text-align: center; line-height: 1.2; }
.ig-roles__row--head span:first-child { text-align: left; }
.ig-roles__row [role="rowheader"] { font-size: .84rem; font-weight: 550; line-height: 1.25; padding-block: .25rem; }
.ig-dot { justify-self: center; display: block; width: .9rem; height: .9rem; border-radius: 50%; }
.ig-dot.is-lead { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.ig-dot.is-with { border: 1.5px solid var(--accent); }
.ig-dot.is-none { width: .3rem; height: .3rem; background: var(--line); }
.ig-legend .ig-dot { justify-self: auto; }

@media (max-width: 559px) {
  .ig-screens { grid-template-columns: 1fr 1fr; }
  .ig-screens .ig-phone:last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; width: 100%; }
  .ig-quads { grid-template-columns: 1fr; }
  .ig-pairs li { grid-template-columns: 1fr; }
  .ig-pairs__arrow { display: none; }
  .ig-cadence li { grid-template-columns: 1fr; gap: .2rem; }
  .ig-gantt__scale, .ig-gantt__row { grid-template-columns: 6.5rem 1fr; }
  .ig-gantt__scale { grid-template-columns: 6.5rem repeat(calc(var(--weeks) + 1), 1fr); }
}
.cs-plan__grid > * { min-width: 0; }
.ig-abbr { display: none; }
@media (max-width: 559px) {
  .ig-roles__row--head .ig-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ig-roles__row--head .ig-abbr { display: inline; }
  .ig-roles__row { grid-template-columns: minmax(6.5rem, 1.6fr) repeat(4, minmax(2.6rem, 1fr)); }
}
.ig-gantt__scale { column-gap: 0; }
.ig-gantt__scale > span:first-child { margin-right: .6rem; }
.ig-gantt__scale > span { min-width: 0; }
@media (max-width: 400px) {
  .ig-gantt__scale { font-size: .7rem; }
  .ig-gantt__scale > span:nth-child(odd):not(:first-child):not(:last-child) { visibility: hidden; }
  .ig-phone__cta { white-space: normal; text-overflow: clip; line-height: 1.2; }
}

/* ---------- Polish pass ---------- */
/* Counter sits on the content's right edge, not the viewport's */
.cs-count { right: calc(max(0px, (100% - var(--wrap) - var(--gutter) * 2) / 2) + var(--gutter)); }
@media (min-width: 1280px) and (max-width: 1599px) { .cs-count { right: calc(var(--gutter) + 2rem); } }
@media (min-width: 760px) { .cs-cover .cs-count { top: calc(var(--header-h) + 2.4rem); right: max(calc(var(--gutter) + 1.5rem), calc((100% - var(--wrap) - var(--gutter) * 2) / 2 + var(--gutter))); } }
/* One title size for every inner slide; the cover stays the largest */
.cs-context h2, .cs-plan h2, .cs-stack h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); }
.cs-plan__grid > .ig { height: 100%; }
/* Short laptop screens (1366×768, 1280×800): tighter slide padding and titles so each slide fits one screen */
@media (min-width: 960px) and (max-height: 820px) {
  .cs-slide { padding-block: calc(var(--header-h) + 1.75rem) 2rem; }
  .cs-step h2, .cs-context h2, .cs-plan h2, .cs-stack h2 { font-size: clamp(2rem, 1rem + 4.5vh, 3.2rem); }
  .cs-step .cs-text { font-size: var(--step-0); }
}
/* Portrait tablets: slides take their content height instead of a mostly empty screen */
@media (min-width: 760px) and (max-width: 1199px) and (max-aspect-ratio: 1/1) {
  .cs-slide:not(.cs-cover) { min-height: 0; padding-block: calc(var(--header-h) + 3.5rem) 5.5rem; }
  .cs-cover { min-height: min(100svh, 62rem); }
}
/* Narrow phones: the roles chart keeps all four columns inside the card */
@media (max-width: 389px) {
  .ig-roles__row { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(2.25rem, 1fr)); gap: .25rem; }
  .ig-roles__row [role="rowheader"] { font-size: .8rem; }
}
/* Rail: round focus that matches hover */
.cs-rail a { border-radius: 50%; }
.cs-rail a:focus-visible::before { background: var(--accent); transform: scale(1.5); }
/* Side by side, the timeline's rows share the panel height with the roles table beside it */
@media (min-width: 1100px) {
  .cs-plan__grid > .ig--gantt { display: flex; flex-direction: column; }
  .ig--gantt .ig-gantt { flex: 1; grid-template-rows: auto; grid-auto-rows: 1fr; }
}