/* Refinements, batch 1: the story line, three-card pricing, the "What I build" grid,
   the process path and its launch terminal. Class names are new on purpose (a clash
   with an old rule once pushed the hero controls out of place). */

/* ----------------------------------------------------------------------- pricing -- */
.plans--three { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) {
  .plans--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plans--three .plan__pitch { min-height: calc(1.55em * 3); }
}
.plans--three .plan { padding: clamp(1.5rem, 2.2vw, 2.25rem); gap: 1rem; }
.plans--three .plan__amount { font-size: clamp(2.75rem, 1.6rem + 2.4vw, 3.75rem); }
.plans--three .plan__list { gap: 0.5rem; padding-top: 1rem; font-size: 0.9375rem; }
.plans--three .plan__list li { padding-left: 1.4rem; line-height: 1.4; }
.plans--three .plan__cta { margin-top: 0.25rem; max-width: 100%; white-space: normal; text-align: center; }
.plan { position: relative; }
.plan--lead { background: #1b1b1b; box-shadow: inset 0 0 0 1px var(--sc-accent); }
.plan--care { background: var(--surface-2); }
.plan__tag {
  position: absolute; top: 0; right: 0; padding: 0.45rem 0.85rem;
  background: var(--sc-accent); color: #000;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.plan__tag--quiet { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px #3a3a3a; }
.plan__tag ~ .plan__name { padding-right: 7.5rem; }
.plan__fine { margin: 0; color: var(--mute); font-size: 0.875rem; line-height: 1.5; }
.plan--care .care__more { margin-top: 0.25rem; }

/* ------------------------------------------------------------------- what I build -- */
/* Each box drops in as the section scrolls past: row one left to right, then row two. */
.facets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.facet {
  /* --l (0 to 1) is set by refine.js from the box's own place on screen; 1 without it. */
  --l: 1;
  display: grid; gap: 0.75rem; align-content: start;
  padding: clamp(1.5rem, 2.4vw, 2.25rem); background: var(--sc-surface);
  opacity: var(--l); transform: translate3d(0, calc((1 - var(--l)) * -2rem), 0);
}
.facet__icon { color: var(--sc-accent); }
.facet__name {
  margin: 0.5rem 0 0; text-transform: uppercase;
  font: 500 clamp(1.15rem, 0.95rem + 0.6vw, 1.5rem)/1.05 var(--sc-font-display); font-stretch: 110%;
}
.facet__text { margin: 0; color: var(--text); line-height: 1.55; max-width: 34ch; }
@media (max-width: 960px) { .facets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .facets { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .facet { --l: 1; } }

/* A real site on a phone, right of the boxes (above them on narrow screens). The frame is CSS so
   it stays sharp at any size; the clip holds only the screen (780x1688, status bar included).
   Sizes scale from --pw. */
.build__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
.build__body .facets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.showcase { order: 2; margin: 0; display: grid; justify-items: center; gap: 1.5rem; }
.phone {
  --pw: clamp(17rem, 25vw, 22rem);
  position: relative; width: var(--pw); aspect-ratio: 780 / 1688; margin: calc(var(--pw) * 0.035);
  border-radius: calc(var(--pw) * 0.141); background: #000;
  box-shadow: 0 0 0 calc(var(--pw) * 0.0256) #050505, 0 0 0 calc(var(--pw) * 0.0282) #1d1d1f,
              0 0 0 calc(var(--pw) * 0.0333) #3a3a3c, 0 0 0 calc(var(--pw) * 0.0346) #5a5a5e,
              0 2.5rem 5rem 1rem rgba(0, 0, 0, 0.8);
}
.phone::before, .phone::after { content: ""; position: absolute; width: calc(var(--pw) * 0.009); border-radius: 2px; background: #3a3a3c; }
.phone::before { left: calc(var(--pw) * -0.043); top: 22%; height: 7.7%; box-shadow: 0 calc(var(--pw) * 0.205) 0 #3a3a3c; }
.phone::after { right: calc(var(--pw) * -0.043); top: 25%; height: 11.8%; }
/* The poster holds the frame until the scrub clip paints (scrollcraft fades the video in). */
.phone__poster, .phone__screen { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.phone__island, .phone__home { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 999px; }
.phone__island { top: calc(var(--pw) * 0.028); width: calc(var(--pw) * 0.323); height: calc(var(--pw) * 0.095); background: #000; }
.phone__home { bottom: calc(var(--pw) * 0.023); width: calc(var(--pw) * 0.344); height: calc(var(--pw) * 0.0128); background: rgba(255, 255, 255, 0.7); }
.showcase__cap { margin: 0; max-width: 26ch; color: var(--mute); font-size: 0.875rem; line-height: 1.5; text-align: center; }
.showcase__cap a { color: var(--gold-text); }
@media (max-width: 860px) {
  .build__body { grid-template-columns: 1fr; }
  .showcase { order: 0; }
  .phone { --pw: min(19rem, 70vw); }
}
@media (max-width: 600px) { .build__body .facets { grid-template-columns: 1fr; } }
/* Wide screens: the 75rem column left the boxes narrow beside the phone, so this act widens.
   Two columns of boxes stay about as tall as the phone; three across left the phone towering. */
@media (min-width: 1700px) { .build .wrap { --wrap: 112rem; } }

/* ------------------------------------------------------------------- process path -- */
/* Four steps on a staircase. refine.js measures where each step landed, draws a dashed
   line through four dots, and sets --lit on each step from how far the line has run. */
.path { position: relative; container-type: inline-size; margin-top: clamp(2.5rem, 6vh, 4rem); }
.path__svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.path__steps {
  position: relative; list-style: none; margin: 0; padding: 10cqw 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.1cqw;
}
.path__step {
  margin-top: calc(7.1cqw * var(--k, 0));
  opacity: var(--lit, 1); transform: translate3d(0, calc((1 - var(--lit, 1)) * 14px), 0);
}
.path__step:nth-child(2) { --k: 1; }
.path__step:nth-child(3) { --k: 2; }
.path__step:nth-child(4) { --k: 3; }
.path__title {
  margin: 0; text-transform: uppercase;
  font: 500 clamp(1.1rem, 1.9cqw, 1.5rem)/1.1 var(--sc-font-display); font-stretch: 110%;
}
.path__n { color: var(--mute); font-weight: 700; }
.path__text { margin: 0.75rem 0 0; color: var(--text); line-height: 1.55; max-width: 24em; }

/* the launch terminal under step 4 */
.term { margin: 1.5rem 0 0; max-width: 24rem; background: #0a0a0a; box-shadow: inset 0 0 0 1px #262626; }
.term__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid #262626; color: var(--mute); font-size: 0.75rem; }
.term__bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; }
.term__bar b { margin-left: 0.5rem; font-weight: 500; letter-spacing: 0.04em; }
.term__body {
  margin: 0; padding: 0.9rem 1rem 1rem; white-space: pre-wrap;
  font: 0.8125rem/1.7 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; color: var(--text);
}
.term__l { display: block; min-height: 1.7em; color: var(--mute); }
.term__l--cmd { color: #fff; }
.term__l--cmd::first-letter { color: var(--gold-text); }
.term__l--ok { color: var(--gold-text); }

@media (max-width: 760px) {
  .path__steps { grid-template-columns: 1fr; row-gap: 2.25rem; padding: 0 0 0 2.25rem; }
  .path__step { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .path__step { opacity: 1; transform: none; } }