/* Approach (/approach). Steps, cards and the ribbon come from site.css and the design system. */

/* ---------- The four layers on the ribbon ---------- */
.approach-layers .sf-ribbon__step { padding-bottom: 16px; }
.approach-layers .sf-ribbon__step:last-child { padding-bottom: 0; }
.approach-layers { --sf-ribbon-dot-top: 30px; }
.layer-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; }
@media (min-width: 900px) { .layer-row { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr); align-items: start; } .layer-row__more { grid-column: 1; } }
/* The paragraph takes the grid cell and the link stays inline inside it, so the link (its click area and focus ring) is only as
   wide as its text even when it wraps, and the arrow follows the last word. On touch, vertical padding on the inline link
   grows its tap area to 44px per line without moving the text. */
.layer-row__more { margin: 0; }
.layer-row__link { display: inline; }
@media (pointer: coarse) { .layer-row__link { padding-block: 10px; } }
/* An inline (not inline-block) arrow can't be split from the last word. Its content is a word joiner rather than empty,
   because Chrome lets an empty inline hang past the edge instead of wrapping the last word with it. */
.layer-row__link::after { content: "\2060"; display: inline; margin-left: 6px; padding-left: 16px; }
.layer-row__title { margin-top: 10px; font-size: var(--sf-fs-h3); line-height: var(--sf-lh-h3); font-weight: var(--sf-fw-bold); letter-spacing: -0.01em; }
.layer-row__label { font-size: var(--sf-fs-label); font-weight: var(--sf-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-fg-muted); }
.layer-row__list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.layer-row__list li { display: flex; align-items: flex-start; gap: 10px; }
.layer-row__list .sf-icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--sf-fg-accent); }
@media (max-width: 559px) {
  .approach-layers { padding-left: 36px; --sf-ribbon-dot-left: -36px; --sf-ribbon-dot-size: 20px; }
  .approach-layers .sf-ribbon__line { left: -10px; }
}

/* ---------- Process and timeline ---------- */
/* A thin bar above the steps: each quarter lights up in turn when the bar scrolls into view. */
.timeline-bar { display: none; }
@media (min-width: 1024px) {
  .timeline-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
  .timeline-bar span { height: 3px; border-radius: 2px; background: var(--sf-gradient-brand); }
  .sf-js .timeline-bar span { opacity: 0.2; transition: opacity 700ms var(--sf-ease-out); }
  .sf-js .timeline-bar span:nth-child(2) { transition-delay: 300ms; }
  .sf-js .timeline-bar span:nth-child(3) { transition-delay: 600ms; }
  .sf-js .timeline-bar span:nth-child(4) { transition-delay: 900ms; }
  .sf-js .timeline-bar.is-revealed span { opacity: 1; }
  .process { margin-top: 18px; }
}
.process-step { display: flex; flex-direction: column; }
.process-step .step__text { flex: 1; }
.process-step__when { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sf-border); font-size: var(--sf-fs-small); font-weight: var(--sf-fw-semibold); }
.process-step__when .sf-icon { width: 16px; height: 16px; color: var(--sf-fg-accent); }
.process__note { margin-top: 18px; font-size: var(--sf-fs-small); color: var(--sf-fg-muted); }

/* ---------- Engagement models ---------- */
.models { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 1024px) { .models { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.model { position: relative; display: flex; flex-direction: column; }
.model .sf-icon-tile { color: var(--sf-fg-accent); }
.model__tag { position: absolute; top: 20px; right: 20px; }
.model__title { margin-top: 18px; font-size: var(--sf-fs-h3); line-height: var(--sf-lh-h3); font-weight: var(--sf-fw-bold); letter-spacing: -0.01em; }
.model__text { margin-top: 8px; color: var(--sf-fg-body); }
.model__list { flex: 1; align-content: start; margin-top: 20px; font-size: 1rem; }
.model__best { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--sf-border); font-size: var(--sf-fs-small); font-weight: var(--sf-fw-semibold); }

/* ---------- Reporting rhythm ---------- */
.rhythm { margin: 0; padding: 0; list-style: none; }
.rhythm__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 24px; padding: 22px 0; border-top: 1px solid var(--sf-border-strong); }
.rhythm__row:last-child { border-bottom: 1px solid var(--sf-border-strong); }
@media (min-width: 768px) { .rhythm__row { grid-template-columns: 130px minmax(0, 1fr) 170px; align-items: baseline; } }
.rhythm__when { font-size: var(--sf-fs-label); font-weight: var(--sf-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-fg-accent); }
.rhythm__what h3 { font-size: 1.25rem; font-weight: var(--sf-fw-bold); }
.rhythm__what p { margin-top: 6px; color: var(--sf-fg-body); }
.rhythm__how { font-size: var(--sf-fs-small); color: var(--sf-fg-muted); }

/* ---------- Ownership promise ---------- */
.own-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .own-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .own-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.own-item .sf-icon-tile { color: var(--sf-fg-accent); }
.own-item__title { margin-top: 18px; font-size: 1.125rem; font-weight: var(--sf-fw-bold); }
.own-item__text { margin-top: 6px; color: var(--sf-fg-body); }