/* vs.css: shared by the three comparison pages (vs-sharepoint, vs-aplikasi-tanda-tangan, vs-tumpukan-aplikasi).
   Page-local only; the kit stays untouched. Two components:
   .vp  "two paths": a grey alternative path above the Obscura path. The Obscura path IS the page line
        (its nodes are line anchors); a static terracotta copy shows only when JS is off.
   .fo  "follow one agreement": 11 stack steps across six lanes (grey tangle) beside 6 Obscura steps. */

/* ============================================================ shared bits */
.vs-sub { margin-top: -24px; margin-bottom: clamp(48px, 5vw, 72px); }
.vs-notes { margin-top: clamp(40px, 4vw, 64px); display: grid; gap: 12px; }
.vs-notes .small { max-width: 62em; }
.vs-notes a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vs-notes a:hover { color: var(--ink); }
.vs-sources { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--hair); }
.vs-sources .label { margin-bottom: 8px; }
.vs-sources li { font: 400 12px/1.6 var(--f-mono); color: var(--muted); letter-spacing: .02em; }
.vs-sources li + li { margin-top: 4px; }
.vs-kicker { margin-top: clamp(48px, 5vw, 72px); font-size: clamp(22px, 2vw, 32px); line-height: 1.25; letter-spacing: -.025em; max-width: 26em; }
.vs-gap { margin-top: clamp(56px, 6vw, 96px); }
.row .row__d .label { display: block; margin-bottom: 4px; }
.row .row__d + .row__d { margin-top: 14px; }
.vs-related { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: clamp(40px, 4vw, 56px); }
.ctable tbody th .num { display: block; margin-bottom: 6px; color: var(--muted); font-weight: 400; }
.ctable .vs-wide { width: 34%; }

/* ============================================================ .vp: two paths */
.vp { --n: 6; --us-y: 44px; --lab-y: 86px; --alt-y: 160px; --h: 272px; position: relative; margin-top: clamp(24px, 3vw, 40px); }
.vp__body { position: relative; height: var(--h); }
.vp__stages { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.vp__st { position: relative; }
.vp__lab { position: absolute; left: 0; right: 0; top: var(--lab-y); text-align: center; font-size: clamp(17px, 1.35vw, 22px); letter-spacing: -.015em; line-height: 1.2; }
.vp__st.is-ext .vp__lab { color: var(--muted); }
.vp__dot { position: absolute; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; box-sizing: border-box; }
.vp__dot--alt { top: var(--alt-y); border: 2px solid var(--grey-line); background: var(--paper); z-index: 2; }
.vp__dot--alt.is-lit { background: var(--grey-line); }
.vp__dot--alt.is-off { border: 1.5px dashed var(--hair-2); }
.vp__dot--us { top: var(--us-y); }
.vp__note { position: absolute; left: 4px; right: 4px; top: calc(var(--alt-y) + 18px); text-align: center; font: 400 12px/1.35 var(--f-mono); letter-spacing: .02em; color: var(--muted); }
.vp__note.is-m { display: none; }

/* the grey path: segments and forks in percentages of the stage width */
.vp__alt { position: absolute; inset: 0; pointer-events: none; }
.vp__seg { position: absolute; top: calc(var(--alt-y) - 1px); height: 2px; left: calc((var(--a) + .5) / var(--n) * 100%); width: calc((var(--b) - var(--a)) / var(--n) * 100%); background: var(--grey-line); transform-origin: 0 50%; }
.vp__seg--dot { height: 3px; top: calc(var(--alt-y) - 1.5px); background: repeating-linear-gradient(90deg, var(--grey-line) 0 3px, transparent 3px 10px); opacity: .7; }
.vp__fork { position: absolute; top: var(--alt-y); height: 58px; left: calc((var(--a) + .5) / var(--n) * 100%); width: calc((var(--b) - var(--a)) / var(--n) * 100%); border: 2px solid var(--grey-line); border-top: 0; border-radius: 0 0 20px 20px; transform-origin: 50% 0; }
.vp__fork b { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); width: max-content; max-width: 17ch; text-align: center; font: 400 12px/1.35 var(--f-mono); letter-spacing: .02em; color: var(--muted); }
.vp__end { position: absolute; top: calc(var(--alt-y) - 8px); left: calc((var(--a) + .5) / var(--n) * 100% + 16px); font: 400 12px/1.35 var(--f-mono); letter-spacing: .02em; color: var(--muted); }
.vp__end::before { content: ""; position: absolute; left: -22px; top: 2px; width: 2px; height: 14px; background: var(--grey-line); }
.vp__name { position: absolute; left: 0; font: 400 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vp__name--alt { top: calc(var(--alt-y) + 22px); }
.vp__name--us { top: calc(var(--us-y) - 36px); color: var(--accent); }
.vp__name i { display: inline-block; width: 18px; height: 2px; background: var(--grey-line); vertical-align: middle; margin-right: 10px; }
.vp__name--us i { background: var(--accent); }
.vp__in, .vp__out { position: absolute; top: var(--us-y); width: 1px; height: 1px; left: 0; }
.vp__out { left: auto; right: 0; }
/* static terracotta path for when the kit is not running */
.vp__fb { display: none; position: absolute; top: calc(var(--us-y) - 1px); height: 2px; left: calc(.5 / var(--n) * 100%); right: calc(.5 / var(--n) * 100%); background: var(--accent); }
html:not(.js) .vp__fb { display: block; }
html:not(.js) .vp__dot--us { background: var(--accent); }
/* the spotlight ring on the stage where the paths differ */
.vp__spot { position: absolute; left: calc((var(--i) + .5) / var(--n) * 100%); top: calc((var(--alt-y) + var(--us-y)) / 2); --spot: 200px; margin: calc(var(--spot) / -2) 0 0 calc(var(--spot) / -2); pointer-events: none; z-index: 0; }
.vp__foot { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 8px; }

@media (max-width: 1100px) {
  .vp { --us-y: 44px; --lab-y: 84px; --alt-y: 156px; --h: 280px; }
  .vp__lab { font-size: 16px; }
  .vp__note { font-size: 11px; }
  .vp__fork b { font-size: 11px; max-width: 13ch; }
}

/* phones: the paths run vertically. The page line is the spine at x=20; the grey path runs at x=12 inside the content */
@media (max-width: 760px) {
  .vp { --row: 74px; --gx: 12px; margin-top: 8px; }
  .vp__body { height: calc(var(--n) * var(--row) + 48px); padding-top: 48px; }
  .vp__stages { top: 48px; grid-template-columns: 1fr; grid-template-rows: repeat(var(--n), var(--row)); }
  .vp__lab { left: 40px; right: 0; top: 50%; transform: translateY(-50%); margin-top: -9px; text-align: left; font-size: 19px; }
  .vp__note, .vp__note.is-m { display: block; left: 40px; right: 0; top: 50%; margin-top: 10px; text-align: left; font-size: 11px; }
  .vp__note.is-d { display: none; }
  .vp__dot { top: 50%; }
  .vp__dot--alt { left: var(--gx); }
  .vp__dot--us { left: -32px; }   /* sits on the spine (page x = 20) */
  .vp__alt { top: 48px; }
  .vp__seg { top: calc((var(--a) + .5) / var(--n) * 100%); height: calc((var(--b) - var(--a)) / var(--n) * 100%); left: calc(var(--gx) - 1px); width: 2px; transform-origin: 50% 0; }
  .vp__seg--dot { width: 3px; left: calc(var(--gx) - 1.5px); background: repeating-linear-gradient(180deg, var(--grey-line) 0 3px, transparent 3px 10px); }
  .vp__fork { bottom: auto; top: calc((var(--a) + .5) / var(--n) * 100%); height: calc((var(--b) - var(--a)) / var(--n) * 100%); left: var(--gx); width: 20px; border: 2px solid var(--grey-line); border-left: 0; border-radius: 0 14px 14px 0; transform-origin: 0 50%; }
  .vp__fork b, .vp__end { display: none; }
  .vp__name { top: 0; }
  .vp__name--alt { left: 0; }
  .vp__name--us { left: auto; right: 0; top: 0; }
  .vp__in { top: 20px; left: -32px; }
  .vp__out { top: auto; bottom: 0; right: auto; left: -32px; }
  .vp__fb { top: 48px; bottom: 0; left: -33px; right: auto; width: 2px; height: auto; }
  .vp__spot { display: none; }
}

/* ============================================================ .fo: follow one agreement */
.fo { --lane: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(40px, 4vw, 64px); }
.fo__stack { grid-column: 2 / 8; position: relative; }
.fo__us { grid-column: 8 / 12; position: relative; }
.fo__us > .fo__title, .fo__us > .fo__count { padding-left: 36px; }
.fo__us .fo__list li { padding-left: 36px; }
.fo__title { display: flex; justify-content: space-between; align-items: end; gap: 16px; height: 96px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.fo__title .label { color: var(--ink); }
.fo__us .fo__title .label { color: var(--accent); }
.fo__lanes { display: grid; grid-template-columns: repeat(6, var(--lane)); flex: none; align-self: end; }
.fo__lanes span { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 11px/1 var(--f-mono); letter-spacing: .04em; color: var(--muted); justify-self: center; white-space: nowrap; }
.fo__list { position: relative; }
.fo__list li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) calc(var(--lane) * 6); align-items: start; gap: 0 16px; min-height: 76px; padding: 16px 0 14px; border-bottom: 1px solid var(--hair); }
.fo__us .fo__list li { grid-template-columns: 40px minmax(0, 1fr); }
.fo__list .num { padding-top: 4px; }
.fo__list p { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.4; letter-spacing: -.008em; }
.fo__list p small { display: block; margin-top: 4px; font: 400 11px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fo__cell { position: relative; align-self: stretch; }
.fo__dot { position: absolute; top: 50%; left: calc(var(--l) * var(--lane) + var(--lane) / 2); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--paper); border: 2px solid var(--grey-line); z-index: 1; box-sizing: border-box; }
.fo__dot--all { left: 6px; right: 6px; width: auto; border-radius: 6px; margin-left: 0; }
/* faint lane guides behind the dots */
.fo__stack .fo__list::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: calc(var(--lane) * 6); pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(var(--lane) / 2 - .5px), var(--hair) calc(var(--lane) / 2 - .5px) calc(var(--lane) / 2 + .5px), transparent calc(var(--lane) / 2 + .5px) var(--lane)); }
.fo__tangle { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fo__tangle path { fill: none; stroke: var(--grey-line); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fo__count { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 22px; }
.fo__count li { font: 400 12px/1.4 var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.fo__count b { font: 500 clamp(28px, 2.6vw, 40px)/1 var(--f-sans); letter-spacing: -.04em; color: var(--ink); display: block; margin-bottom: 6px; }
.fo__us .fo__count b { color: var(--accent); }
.fo__us .fo__list li.is-on .num { color: var(--accent); }

@media (max-width: 1100px) {
  .fo { display: block; }
  .fo__us { margin-top: 72px; }
  .fo__title { height: 88px; }
}
@media (max-width: 1280px) { .fo { --lane: 40px; } }
@media (max-width: 760px) {
  .fo { --lane: 17px; }
  .fo__us { margin-top: 56px; }
  .fo__us > .fo__title, .fo__us > .fo__count, .fo__us .fo__list li { padding-left: 0; }
  .fo__title { height: 80px; }
  .fo__list li { grid-template-columns: 26px minmax(0, 1fr) calc(var(--lane) * 6); gap: 0 10px; padding: 14px 0 12px; min-height: 64px; }
  .fo__us .fo__list li { grid-template-columns: 26px minmax(0, 1fr); }
  .fo__lanes span { font-size: 9.5px; }
  .fo__list p { font-size: 15.5px; }
  .fo__count { gap: 14px 22px; }
  .fo__dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
  .fo__dot--all { left: 3px; right: 3px; margin-left: 0; width: auto; }
}

/* ============================================================ evidence strips (stack page, section 04) */
.ev__strip + .ev__strip { margin-top: clamp(64px, 6vw, 96px); }
.ev__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-bottom: 34px; }
.ev__head .label { color: var(--ink); }
.ev__strip--us .ev__head .label { color: var(--accent); }
.ev__row { position: relative; display: flex; align-items: flex-start; }
.ev__row::before { content: ""; position: absolute; left: 6px; right: 0; top: -1px; height: 2px; background: var(--grey-line); }
.ev__strip--us .ev__row::before { display: none; }
html:not(.js) .ev__strip--us .ev__row::before { display: block; background: var(--accent); }
.ev__n { position: relative; flex: 1 1 0; padding: 28px 16px 0 0; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.35; letter-spacing: -.008em; }
.ev__n::before { content: ""; position: absolute; left: 0; top: -6px; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--grey-line); background: var(--paper); z-index: 1; }
.ev__strip--us .ev__n::before { display: none; }
.ev__a { position: absolute; left: 6px; top: 0; width: 1px; height: 1px; }
.ev__end { position: absolute; right: 0; top: 0; width: 1px; height: 1px; }
.ev__b { position: relative; flex: 0 0 clamp(96px, 9vw, 140px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.ev__b i { position: relative; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--paper); border: 1px solid var(--grey-line); z-index: 1; }
.ev__b i::before, .ev__b i::after { content: ""; position: absolute; left: 4px; right: 4px; top: 8.5px; height: 1.5px; background: var(--muted); transform: rotate(45deg); }
.ev__b i::after { transform: rotate(-45deg); }
.ev__b span { margin-top: 14px; font: 400 11px/1.35 var(--f-mono); letter-spacing: .02em; color: var(--muted); max-width: 14ch; }
.ev__note { margin-top: 40px; max-width: 52em; }
.ev .frame { margin-top: clamp(56px, 6vw, 88px); }

@media (max-width: 1100px) {
  .ev__n { font-size: 15px; }
  .ev__b { flex-basis: 84px; }
  .ev__b span { max-width: 11ch; }
}
@media (max-width: 760px) {
  .ev__row { flex-direction: column; padding-left: 0; }
  .ev__row::before { left: 11px; right: auto; top: 6px; bottom: 8px; width: 2px; height: auto; }
  .ev__n { flex: none; padding: 0 0 22px 36px; }
  .ev__n::before { left: 6px; top: 5px; }
  .ev__strip--us .ev__n { padding-left: 0; }
  .ev__a { left: 0; top: 10px; }
  .ev__end { right: auto; left: 0; top: auto; bottom: 0; }
  .ev__b { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 0 0 22px 2px; }
  .ev__b i { margin-top: 0; flex: none; }
  .ev__b span { margin-top: 0; max-width: none; }
  html:not(.js) .ev__strip--us .ev__row::before { left: -33px; }
}

/* hero CTAs need a little more room than the kit's 8/12 */
.page-hero__foot .ctas { grid-column: 7 / 12; justify-self: end; }
.page-hero__foot .ctas .link { white-space: nowrap; }
@media (max-width: 1100px) { .page-hero__foot .lede { grid-column: 1 / 8; } .page-hero__foot .ctas { grid-column: 8 / 12; justify-self: start; } .page-hero__foot .ctas .link { white-space: normal; } }

/* ============================================================ breadcrumb */
.vs-crumb { margin-bottom: 22px; }
.vs-crumb ol { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.vs-crumb li { font: 400 12px/1.4 var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.vs-crumb li + li::before { content: "/"; margin-right: 10px; color: var(--faint); }
.vs-crumb a:hover { color: var(--ink); }

/* a one-column table: on phones the cell label is redundant, so the text takes the full width */
@media (max-width: 760px) {
  .ctable--single td { display: block; }
  .ctable--single td::before { display: none; }
}

/* row numbers that carry a short category under them ("01" + "Outcome") */
.row__n small { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .row__n small { display: inline; margin: 0 0 0 10px; } }

/* e-signature page: the grey path is dim and dotted except at Sign, where it is as bright as Obscura's */
.vp__seg--lit { height: 3px; top: calc(var(--alt-y) - 1.5px); background: var(--ink); }
.vp--es .vp__dot--alt.is-lit { background: var(--ink); border-color: var(--ink); }
.vp--es .vp__note { color: var(--muted); }
.vp--es .vp__st:nth-child(3) .vp__note { color: var(--ink); }
@media (max-width: 760px) {
  .vp__seg--lit { width: 3px; top: calc((var(--a) + .5) / var(--n) * 100%); height: calc((var(--b) - var(--a)) / var(--n) * 100%); left: calc(var(--gx) - 1.5px); }
}
.vp--es { --h: 250px; }
.vp--es .vp__name--alt { top: calc(var(--alt-y) + 56px); }
@media (max-width: 1100px) { .vp--es { --h: 252px; } }
@media (max-width: 760px) { .vp--es .vp__name--alt { top: 0; } }
.nw { white-space: nowrap; }

/* ============================================================ stack page extras */
.vs-tag { margin-top: -32px; }
.fo__out { display: block; height: 1px; margin-top: 88px; }
html:not(.js) .fo__us::before { content: ""; position: absolute; left: 0; top: 96px; bottom: 0; width: 2px; background: var(--accent); }
.ctable--matrix th, .ctable--matrix td { padding-right: 14px; }
.ctable--matrix tbody th { width: 20%; }
.ctable--matrix td:last-child { width: 20%; }
.ctable--matrix .mark { white-space: nowrap; }
.vs-role { display: block; margin-top: 4px; font: 400 11px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ctable--matrix tr:last-child th { color: var(--accent); }
.vs-legend { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; }
.vs-legend__i { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.vs-legend-note { margin-top: 20px; }
.vs-legend .mark { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.vs-legend .mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.vs-legend .mark--yes { color: var(--accent); } .vs-legend .mark--yes::before { background: currentColor; }
.vs-legend .mark--part { color: var(--ink); } .vs-legend .mark--part::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.vs-legend .mark--no { color: var(--muted); }
@media (max-width: 1100px) { .fo__out { margin-top: 64px; } }
@media (max-width: 760px) {
  .vs-tag { margin-top: -16px; }
  .ctable--matrix td { grid-template-columns: 132px 1fr; padding: 4px 0; }
  .ctable--matrix tbody th, .ctable--matrix td:last-child { width: auto; }
  html:not(.js) .fo__us::before { left: -33px; }
  .vs-legend { flex-direction: column; gap: 12px; }
  .vs-legend__i { white-space: normal; }
  .vs-legend .mark { flex: none; }
}
div.row__d > p + p { margin-top: 14px; }
div.row__d .label { display: block; margin-bottom: 4px; }