/* penerapan.html · Deployment (page-local; the kit owns everything else) */

.crumb a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.page-hero__foot .ctas { flex-wrap: wrap; row-gap: 18px; }
.page-hero__foot .ctas .link { white-space: nowrap; }

/* ---------- (01) two editions */
.eds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--ink); }
.ed { padding: 28px 40px 8px 0; }
.ed__g { width: 96px; height: 40px; overflow: visible; margin-bottom: 18px; }
.ed__g path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.ed .label { margin: 12px 0 16px; }
.ed .body { max-width: 30em; }

/* ---------- (02) THE SIGNATURE: the line splits into the editions and crosses the wall */
.grid > .split { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; margin: 0 0 clamp(48px, 5vw, 72px); }
.split__plug { grid-column: 1 / 2; grid-row: 1; position: relative; height: 2px; margin-left: 50%; margin-right: calc(-1 * var(--gap)); }
.split__plug i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transition: transform .8s var(--ease); }
.js:not(.reduce) .split__plug:not(.is-on) i { transform: scaleX(0); }
.split__fig { grid-column: 2 / 12; grid-row: 1; }
.dg { display: block; width: 100%; height: auto; overflow: visible; }
.dg--m, .mports { display: none; }
.dg__ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dg__ln--t { stroke-width: 1.4; }
.dg__wall { stroke: var(--ink); stroke-width: 1; }
.dg__box { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 5; }
.dg__n { fill: var(--paper); stroke: var(--accent); stroke-width: 1.5; }
.dg text { font-family: var(--f-mono); fill: var(--ink); }
.dg__w { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.dg__l { font-family: var(--f-sans) !important; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.dg__s { font-size: 13px; fill: var(--muted) !important; letter-spacing: .02em; }
.dg__s--box { text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; }
.dg__t { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.port__sq { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.sw__bg { fill: var(--hair-2); transition: fill .5s var(--ease); }
.sw__k { fill: var(--paper); transform: translateX(-16px); transition: transform .6s var(--ease); }
.js:not(.reduce) .split:not(.is-off) .sw__bg { fill: var(--accent); }
.js:not(.reduce) .split:not(.is-off) .sw__k { transform: none; }
.split__note { display: none; }

/* the four cells, aligned with the two halves of the wall */
.cells { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 0; }
.cells::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink); }
.cell { padding: 26px 0 34px; border-top: 1px solid var(--hair-2); }
.cell--a, .cell--b { border-top-color: var(--ink); }
.cell__k { display: flex; justify-content: space-between; gap: 16px; color: var(--ink); margin-bottom: 18px; }
.cell__k span:first-child { font-family: var(--f-sans); text-transform: none; letter-spacing: -.02em; font-size: clamp(22px, 1.9vw, 30px); font-weight: 500; line-height: 1.1; }
.cell__host { color: var(--accent); align-self: center; white-space: nowrap; }
.cell dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; padding: 12px 0 13px; border-top: 1px solid var(--hair); }
.cell dt { padding-top: 3px; }
.cell dd { font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.5; color: #2F2D29; }

.same-link { margin-top: 30px; }
.closed-note { margin-top: 36px; color: var(--paper); }

/* ---------- mid widths */
@media (max-width: 1100px) {
  .cells { column-gap: 40px; }
  .cell dl > div { grid-template-columns: 1fr; row-gap: 6px; }
}

/* ---------- phones */
@media (max-width: 760px) {
  .h2, .h2--long { font-size: calc(clamp(30px, 8.2vw, 40px) * var(--ts, 1)); }
  .eds { display: block; }
  .ed { padding: 24px 0 26px; border-bottom: 1px solid var(--hair); }
  .split { display: block; }
  .split__plug { display: none; }
  .dg--d { display: none; }
  .dg--m { display: block; max-width: 320px; }
  .mports { display: block; margin-top: 18px; border-top: 1px solid var(--hair-2); max-width: 320px; }
  .mports li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
  .sw-h { position: relative; flex: none; width: 30px; height: 16px; border-radius: 8px; background: var(--hair-2); transition: background-color .5s var(--ease); }
  .sw-h i { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); transition: transform .6s var(--ease); }
  .js:not(.reduce) .split:not(.is-off) .sw-h { background: var(--accent); }
  .js:not(.reduce) .split:not(.is-off) .sw-h i { transform: translateX(14px); }
  .cells { display: block; }
  .cells::before { display: none; }
  .cell { border-top: 1px solid var(--ink); }
  .cell__k { flex-direction: column; gap: 8px; }
  .cell__host { align-self: flex-start; }
}