/* CoreBuild process page — v2 (2026-10-19). Loads LAST, after style.css and v2.css.
   Every class here is pc- prefixed; the shared v- classes come from v2.css untouched.
   One idea carries the page: a single hairline the six stages hang from. Each stage settles in
   with the shared entrance (blur + rise + opacity) and, as it does, draws its own stretch of
   the line in the warm light. Jade appears only on "what stays with you". */

/* the section rail belongs to the old site; the v2 home hides it too */
.page-process .rail-x { display: none !important; }

/* ── 1. opening: the whole road beside the question ─────────────────────── */
.pc-map { margin: 0; }
.pc-map-l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--v-hair-2); }
.pc-map-l li { border-bottom: 1px solid var(--v-hair); }
.pc-map-l a {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; gap: 14px;
  min-height: 56px; padding: 8px 2px; text-decoration: none;
  color: var(--sub); font-weight: 700; font-size: 15.5px; line-height: 1.5;
  transition: color 200ms ease;
}
.pc-map-n { font-family: var(--mincho); font-weight: 600; font-size: 24px; line-height: 1; color: var(--amber); }
.pc-map-t { display: block; min-width: 0; }
@media (hover: hover) and (pointer: fine) {
  .pc-map-l a:hover { color: var(--ink); }
}

/* ── shared: the statement at display scale, sized so the longest JP line fits a phone ── */
.pc-big { font-size: clamp(30px, 3.8vw, 54px); line-height: 1.22; letter-spacing: -.02em; }

/* ── 2. the relief ──────────────────────────────────────────────────────── */
.pc-stop { min-height: 86svh; text-align: center; }
.pc-stop .v-wrap { display: flex; flex-direction: column; align-items: center; }
.pc-stop .v-lede { margin-inline: auto; }

/* ── 3. the timeline ────────────────────────────────────────────────────── */
.pc-tl {
  --nf: clamp(64px, 8vw, 128px);          /* numeral size; the node sits at its middle */
  --gap: clamp(32px, 5vw, 80px);
  position: relative; list-style: none; max-width: 1080px;
  margin: clamp(64px, 11vh, 130px) 0 0; padding: 0;
}
.pc-tl::before {                          /* the one line, quiet until a stage lights it */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--v-hair-2);
  -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent);
          mask-image: linear-gradient(180deg, #000 85%, transparent);
}
.pc-st {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); column-gap: var(--gap);
  padding: 0 0 clamp(80px, 15vh, 170px) var(--gap);
}
.pc-st:last-child { padding-bottom: clamp(24px, 4vh, 48px); }
.pc-st::before {                          /* this stage's stretch of the line, drawn in the light */
  content: ""; position: absolute; left: 0; top: calc(var(--nf) * .5); bottom: 0; width: 1px;
  background: linear-gradient(180deg, var(--amber), rgba(255,90,31,.15));
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.8s var(--v-out) .25s;
}
.pc-st::after {                           /* the node the stage hangs from */
  content: ""; position: absolute; left: -4px; top: calc(var(--nf) * .5 - 4px);
  width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box;
  background: var(--v-night); border: 1px solid var(--v-hair-2);
  transition: background-color .7s ease .15s, border-color .7s ease .15s;
}
.pc-st.on::before, html:not(.js) .pc-st::before { transform: scaleY(1); }
.pc-st.on::after, html:not(.js) .pc-st::after {
  background: var(--amber); border-color: var(--amber);
}
.pc-num {
  margin: 0; font-family: var(--mincho); font-weight: 600; font-size: var(--nf);
  line-height: 1; letter-spacing: -.04em; color: var(--faint);
  transition: color .9s ease .2s;
}
.pc-st.on .pc-num, html:not(.js) .pc-num { color: var(--amber); }
.pc-body { min-width: 0; max-width: 46rem; padding-top: calc(var(--nf) * .14); }
.pc-st h3 {
  margin: 0; font-family: var(--mincho); font-weight: 600; color: var(--ink);
  font-size: clamp(28px, 3vw, 44px); line-height: 1.25; letter-spacing: -.02em;
}
.pc-when {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  font-size: 13.5px; font-weight: 700; line-height: 1.7; letter-spacing: .03em; color: var(--sub);
}
/* no separator glyphs: a dot would hang at the start of a wrapped line on a phone */
.pc-what {
  margin: clamp(18px, 2.8vh, 28px) 0 0; max-width: 34em;
  font-size: clamp(15px, 1.25vw, 17.5px); line-height: 2; color: var(--sub); text-wrap: pretty;
}
/* what you do / what stays: two ruled lines read top to bottom, label beside the fact */
.pc-io { margin: clamp(26px, 4vh, 42px) 0 0; max-width: 40rem; }
.pc-io-r {
  display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 6px 24px; align-items: baseline;
  padding: 16px 0; border-top: 1px solid var(--v-hair-2);
}
.pc-io-r dt { font-size: 12px; font-weight: 900; letter-spacing: .1em; line-height: 1.9; color: var(--faint); }
.pc-io-r dd {
  margin: 0; font-size: clamp(14.5px, 1.15vw, 16px); line-height: 1.9;
  font-weight: 500; color: var(--ink);
}
.pc-io-r--get { border-top-color: rgba(15,203,136,.5); }
.pc-io-r--get dt { color: var(--jade); }
.pc-cond {
  margin: 22px 0 0; max-width: 40em; padding-top: 16px; border-top: 1px solid var(--v-hair);
  font-size: 14px; line-height: 1.9; color: var(--sub);
}

/* ── 4. no surprises, and 5. what we ask: ruled facts, never cards ─────── */
/* a typographic list, one rule per line: the statement on the left, the fact after it */
.pc-terms, .pc-need {
  list-style: none; margin: clamp(48px, 8vh, 90px) 0 0; padding: 0; max-width: 1080px;
  border-bottom: 1px solid var(--v-hair);
}
.pc-terms li, .pc-need li {
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 10px clamp(24px, 5vw, 80px);
  align-items: baseline; padding: clamp(24px, 4vh, 36px) 0; border-top: 1px solid var(--v-hair);
}
.pc-terms li:first-child, .pc-need li:first-child { border-top-color: var(--v-hair-2); }
.pc-terms h3, .pc-need h3 {
  margin: 0; font-size: clamp(17px, 1.5vw, 21px); font-weight: 900; line-height: 1.6; color: var(--ink);
}
.pc-terms p, .pc-need p {
  margin: 0; max-width: 36em;
  font-size: clamp(14.5px, 1.15vw, 16px); line-height: 1.95; color: var(--sub);
}
.pc-terms .v-ghost { grid-column: 2; justify-self: start; margin-top: -4px; }
.pc-cond-l { margin-top: 4px; }

/* ── 6. onward: three rows, the whole row is the link ───────────────────── */
.pc-next { list-style: none; margin: clamp(44px, 7vh, 80px) 0 0; padding: 0; max-width: 1080px; border-top: 1px solid var(--v-hair-2); }
.pc-next li { border-bottom: 1px solid var(--v-hair); }
.pc-next a {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; align-items: center;
  gap: 10px clamp(20px, 4vw, 60px);
  min-height: 84px; padding: 22px 2px; text-decoration: none; color: var(--ink);
}
.pc-next-t {
  display: block; font-family: var(--mincho); font-weight: 600;
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; letter-spacing: -.02em;
  transition: color 200ms ease;
}
.pc-next-d { display: block; min-width: 0; font-size: clamp(14px, 1.1vw, 15.5px); line-height: 1.85; color: var(--sub); }
.pc-next-a { color: var(--amber); transition: transform 260ms var(--v-out); }
@media (hover: hover) and (pointer: fine) {
  .pc-next a:hover .pc-next-t { color: var(--amber); }
  .pc-next a:hover .pc-next-a { transform: translateX(4px); }
}

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .pc-map { width: 100%; }
  .pc-big { font-size: clamp(26px, 7.4vw, 32px); }
  .pc-stop { min-height: 70svh; }
  .pc-tl { --nf: 56px; --gap: 26px; margin-top: 56px; }
  .pc-st { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding-bottom: 76px; }
  .pc-body { padding-top: 0; }
  .pc-st h3 { font-size: clamp(26px, 7.4vw, 32px); }
  .pc-io-r { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pc-terms li, .pc-need li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pc-terms .v-ghost { grid-column: 1; margin-top: 0; }
  .pc-next a { grid-template-columns: minmax(0, 1fr) auto; min-height: 72px; padding: 20px 2px; }
  .pc-next-t { grid-column: 1; }
  .pc-next-d { grid-column: 1; grid-row: 2; }
  .pc-next-a { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 380px) {
  .v-h1 { font-size: 30px; }
  .pc-big { font-size: 25px; }
  .page-process .v-h2 { font-size: 25px; }
  .pc-tl { --nf: 48px; --gap: 20px; }
  .pc-st h3 { font-size: 21px; }
  .pc-when { gap: 4px 20px; font-size: 13px; }
}

/* ── reduced motion: the line is simply there; colour still marks arrival ── */
@media (prefers-reduced-motion: reduce) {
  .pc-st::before { transform: scaleY(1); transition: none; }
  .pc-st::after, .pc-num { transition: none; }
}