/* Content blocks: the Pinglr flagship + phone, grids, service rows, the step line (process),
   stats, engagements and the story band. Static styles; scroll effects live in motion.css. */

/* ---------- flagship (Pinglr) ---------- */
.flagship {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s-7); align-items: center;
  padding: var(--s-7); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  overflow: hidden;
}
.status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-caption); font-weight: 500; color: var(--muted); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text); }
.app-name { margin-top: var(--s-4); font-size: var(--t-h1); letter-spacing: -0.035em; line-height: 1; }
.app-claim { margin-top: var(--s-2); font-size: var(--t-title); font-weight: 500; letter-spacing: -0.01em; }
.app-desc { margin-top: var(--s-4); color: var(--muted); max-width: 42ch; }
.features { margin-top: var(--s-5); display: grid; gap: var(--s-2); font-size: var(--t-small); max-width: 46ch; }
.features li { padding-left: 18px; position: relative; }
.features li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--line-strong); }
.app-actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); font-weight: 500; font-size: var(--t-small); }
.app-note { margin-top: var(--s-3); font-size: var(--t-caption); }

/* the phone: abstract screen until real screenshots are approved; bleeds off the panel's bottom */
.phone {
  justify-self: center; width: min(100%, 230px); aspect-ratio: 9 / 18.5; padding: 10px; margin-bottom: calc(-1 * var(--s-7) - 60px);
  border-radius: 38px; background: var(--text);
}
.screen { height: 100%; border-radius: 29px; background: var(--bg); padding: 44px 14px; display: flex; flex-direction: column; gap: 10px; }
.bubble { display: block; height: 30px; border-radius: 15px; background: var(--line); }
.bubble.out { align-self: flex-end; background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.bubble.draft { background: var(--accent); }
.w40 { width: 40%; } .w55 { width: 55%; } .w70 { width: 70%; } .w80 { width: 80%; }
.sched { align-self: flex-end; margin-top: auto; font-size: var(--t-caption); font-weight: 500; color: var(--muted); }

/* ---------- grids ---------- */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-8); }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-8); }
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.pipeline h3 { margin-top: var(--s-3); }
.principles p, .strip p, .services p { margin-top: var(--s-2); font-size: var(--t-small); color: var(--muted); max-width: 40ch; }
.uses p, .pipeline p, .rows p { margin-top: var(--s-2); font-size: var(--t-small); color: var(--muted); max-width: 44ch; }
.sub-head { margin: var(--s-8) 0 var(--s-5); color: var(--muted); font-weight: 500; }
.sub-head + .principles { margin-top: 0; }
.next { margin-top: var(--s-7); color: var(--muted); }
.next .link { font-weight: 500; }
.more { margin-top: var(--s-6); font-weight: 500; font-size: var(--t-small); }

/* service rows */
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: baseline; padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows .tag { font-size: var(--t-caption); color: var(--muted); }

/* ---------- step line (measured process, studio loop) ---------- */
.process { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.beat[data-scroll="steps"] .process { margin-top: 0; }
.process::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--line-strong); }
.process::after { /* fill: follows scroll; ends in the accent. Full (1) without the motion layer */
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px;
  background: linear-gradient(90deg, var(--text) 0 78%, var(--accent));
  transform-origin: left; transform: scaleX(var(--pp, 1));
}
.step { position: relative; padding: var(--s-6) var(--s-4) 0 0; }
.step::before {
  content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 2px var(--line-strong);
  transition: box-shadow 200ms ease, background-color 200ms ease, transform 300ms var(--ease-out);
}
/* lit steps (and every step without the motion layer); the last step's accent outline wins by order */
.step.on::before, html:not(.motion) .step::before { box-shadow: inset 0 0 0 2px var(--text); }
.step:last-child::before { box-shadow: inset 0 0 0 2px var(--accent); }
.step.on:last-child::before, html:not(.motion) .step:last-child::before { background: var(--accent); }
.step > * { transition: opacity 300ms ease, transform 400ms var(--ease-out); }
.step .idx { font-size: var(--t-caption); font-weight: 600; color: var(--muted); }
.step:last-child .idx { color: var(--accent-text); }
.step h3 { margin-top: 4px; }
.step p { margin-top: var(--s-2); font-size: var(--t-small); color: var(--muted); }
.process-foot { margin-top: var(--s-7); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.process-ends { color: var(--muted); font-size: var(--t-small); }
.process-next { display: none; gap: var(--s-4); font-size: var(--t-small); }
.sd-count { font-weight: 600; }
.step-detail { display: none; }   /* the active-step panel; shown by motion.css (pinned, desktop) */
@media (min-width: 900px) {
  .sd-idx { font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.05em; line-height: .85; color: var(--text); }
  .sd-title { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.02em; }
  .sd-text { margin-top: var(--s-2); color: var(--muted); max-width: 44ch; }
  .step-detail.is-last .sd-idx { color: var(--accent-text); }
}

/* ---------- proof ---------- */
.stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s-9); }
.stat .value { font-size: var(--t-h1); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.stat .label { margin-top: var(--s-3); font-size: var(--t-caption); color: var(--muted); max-width: 20ch; }
.engagements { margin-top: var(--s-8); }
.engagements li { display: grid; grid-template-columns: 260px 1fr; gap: var(--s-6); padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.engagements li:last-child { border-bottom: 1px solid var(--line); }
.engagements .who { font-weight: 600; letter-spacing: -0.01em; }
.engagements .what { font-size: var(--t-small); color: var(--muted); max-width: 62ch; }

/* ---------- story band (complexity → proof) ---------- */
.band { margin: var(--s-9) calc(50% - 50vw) 0; overflow: hidden; display: grid; gap: var(--s-2); pointer-events: none; }
.band-row { display: flex; gap: .45em; width: max-content; font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.band-row span { white-space: nowrap; }
.band-row.in { color: var(--faint); }    /* the complexity: quiet */
.band-row.out { color: var(--text); }    /* the proof: ink */

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .flagship { grid-template-columns: 1fr; padding: var(--s-6); }
  .phone { width: 200px; margin-bottom: calc(-1 * var(--s-6) - 70px); }
  .principles, .strip { grid-template-columns: 1fr; gap: var(--s-5); }
  .services { grid-template-columns: 1fr; gap: var(--s-5); }
  .uses { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .pipeline { grid-template-columns: 1fr; gap: var(--s-5); }
  .process { grid-template-columns: 1fr; gap: var(--s-2); }
  .process::before, .process::after { left: 5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .process::after { background: linear-gradient(var(--text) 0 78%, var(--accent)); transform-origin: top; transform: scaleY(var(--pp, 1)); }
  .step { padding: 0 0 var(--s-4) var(--s-6); }
  .stats { grid-template-columns: repeat(2, auto); gap: var(--s-6) var(--s-8); }
  .engagements li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 620px) {
  .phone { width: 150px; border-radius: 28px; padding: 7px; margin-bottom: calc(-1 * var(--s-6) - 120px); }
  .screen { border-radius: 22px; padding: 30px 10px; gap: 8px; }
  .bubble { height: 22px; }
  .uses { grid-template-columns: 1fr; }
  .rows li { grid-template-columns: 1fr; gap: var(--s-2); }
}