/* fitur-persuratan: page-local styles (correspondence) */

/* hero: stations sitting on the line (same pattern as the approvals page) */
.stations-wrap { position: relative; }
.stations { position: absolute; left: 0; right: calc(100% / 12 + 40px); top: 50%; z-index: 4; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.stations .pill { background: var(--paper); }
.stations .pill:first-child { margin-left: 22%; }
.stations .pill--ink { background: var(--ink); }

/* (01) the tracker spreadsheet */
.sheet { grid-column: 9 / 12; align-self: center; margin: 0; }
.sheet__file { font: 400 12px/1 var(--f-mono); color: var(--muted); letter-spacing: .02em; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.sheet__file::before { content: ""; width: 10px; height: 12px; border: 1px solid currentColor; border-radius: 1px; }
.sheet__t { width: 100%; border-collapse: collapse; font: 400 13px/1.3 var(--f-mono); color: var(--muted); }
.sheet__t th { text-align: left; font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 0 12px 10px 0; border-bottom: 1px solid var(--ink); }
.sheet__t td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.sheet__t tr.is-dup td { color: var(--ink); }
.sheet__t tr.is-dup td:first-child { text-decoration: underline wavy var(--accent); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.sheet__q { color: var(--accent); }
.sheet .tag { margin-top: 18px; }

/* (02) path */
.path-sub { margin-top: calc(-1 * clamp(24px, 4vw, 64px)); margin-bottom: clamp(56px, 6vw, 88px); color: var(--muted); }
.row--in { border-top: 1px dashed var(--hair-2); }
.path-note { margin-top: 24px; }

/* (03) the register: signature moment */
.reg-sub { margin-top: calc(-1 * clamp(24px, 4vw, 64px)); color: var(--dark-muted); }
.issue { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); column-gap: var(--gap); margin: clamp(88px, 9vw, 140px) 0 0; align-items: start; }
.reg { grid-column: 1 / 6; }
.reg__h { margin-bottom: 18px; }
.reg__rows { border-top: 1px solid var(--paper); }
.reg__r { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 26px 0; border-bottom: 1px solid var(--dark-hair); }
.reg__no { font: 500 clamp(18px, 1.5vw, 24px)/1 var(--f-mono); letter-spacing: -.01em; min-width: 9.2em; }
.reg__why { flex-basis: 100%; font: 400 12px/1.3 var(--f-mono); color: var(--dark-muted); padding-left: 2px; }
.reg__r--void .reg__no { color: var(--dark-muted); text-decoration: line-through; text-decoration-color: var(--accent-dk); text-decoration-thickness: 1px; }
.sec--dark .issue .pill { color: var(--paper); border-color: #4A4741; }
.sec--dark .issue .pill--accent { border-color: var(--accent-dk); background: var(--accent-dk); color: var(--ink); }
.sec--dark .issue .pill--dash { border-color: var(--accent-dk); color: #F1C7B9; }
.sec--dark .issue .pill--dash::before { background: var(--accent-dk); }
.reg__st { display: grid; }
.reg__st > * { grid-area: 1 / 1; justify-self: start; }
.reg__r--new .reg__no { color: var(--paper); }
/* the letter preview */
.letter { grid-column: 7 / 12; background: var(--paper-2); color: var(--ink); padding: 26px 28px 32px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.letter__head { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); font: 500 11px/1 var(--f-mono); letter-spacing: .14em; }
.letter__f { margin: 22px 0 26px; display: grid; gap: 12px; }
.letter__f > div { display: grid; grid-template-columns: 5.5em 1fr; align-items: center; gap: 12px; }
.letter__f dt { font: 400 11px/1.2 var(--f-mono); color: var(--muted); letter-spacing: .04em; }
.letter__f dd { font-size: 15px; letter-spacing: -.01em; }
.slot { display: inline-grid; }
.slot > * { grid-area: 1 / 1; white-space: nowrap; }
.slot__k { font: 400 13px/1.5 var(--f-mono); color: var(--accent); padding: 0 6px; outline: 1px dashed var(--accent); outline-offset: 1px; opacity: 0; }
.slot__v { font-weight: 500; }
.letter__body { display: grid; gap: 10px; }
.letter__body i { display: block; height: 7px; background: #E6E2D9; border-radius: 1px; }
.letter__body i.s { width: 58%; }
.issue__tag { grid-column: 1 / 12; margin-top: 40px; }
.reg-body { margin-top: 36px; color: var(--dark-muted); }
/* the moment (JS only; without JS or with reduced motion the issued state shows) */
.js:not(.reduce) .reg__ok { opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease) .25s, transform .7s var(--ease) .25s; }
.js:not(.reduce) .reg__res { transition: opacity .4s var(--ease); }
.js:not(.reduce) .reg__r--new.is-on .reg__ok { opacity: 1; transform: none; }
.js:not(.reduce) .reg__r--new.is-on .reg__res { opacity: 0; }
.js:not(.reduce) .reg__r--new .reg__no { opacity: .45; transition: opacity .6s var(--ease); }
.js:not(.reduce) .reg__r--new.is-on .reg__no { opacity: 1; }
.js:not(.reduce) .slot__k { opacity: 1; transition: opacity .5s var(--ease), color .7s var(--ease), text-shadow .7s var(--ease); }
.js:not(.reduce) .slot__v { opacity: 0; color: transparent; text-shadow: 0 0 14px var(--ink); transition: opacity .8s var(--ease), color 1s var(--ease), text-shadow 1s var(--ease); }
.js:not(.reduce) .issue:has(.reg__r--new.is-on) .slot__k { opacity: 0; color: transparent; text-shadow: 0 0 10px var(--accent); }
.js:not(.reduce) .issue:has(.reg__r--new.is-on) .slot__v { opacity: 1; color: var(--ink); text-shadow: 0 0 0 rgba(20, 20, 19, 0); }
.js:not(.reduce) .issue:has(.reg__r--new.is-on) .letter__f > div:nth-child(1) .slot__v { transition-delay: .5s; }
.js:not(.reduce) .issue:has(.reg__r--new.is-on) .letter__f > div:nth-child(2) .slot__v { transition-delay: .8s; }
.js:not(.reduce) .issue:has(.reg__r--new.is-on) .letter__f > div:nth-child(3) .slot__v { transition-delay: 1.1s; }
.js:not(.reduce) .issue:has(.reg__r--new.is-on) .letter__f > div:nth-child(1) .slot__k { transition-delay: .4s; }
.js:not(.reduce) .issue:has(.reg__r--new.is-on) .letter__f > div:nth-child(2) .slot__k { transition-delay: .7s; }
.js:not(.reduce) .issue:has(.reg__r--new.is-on) .letter__f > div:nth-child(3) .slot__k { transition-delay: 1s; }

/* (03, continued) comparison table */
.reg-cmp { padding: clamp(110px, 12vw, 170px) 0 0; }
.ctable td:not(.is-us) { color: var(--muted); }

/* (04) */
.one-frame { margin-top: clamp(56px, 6vw, 88px); }

/* (05) modules */
.needs { border-top: 1px solid var(--ink); }
.needs li { display: grid; grid-template-columns: 3fr 8fr; gap: var(--gap); align-items: baseline; padding: 22px 0 24px; border-bottom: 1px solid var(--hair); }
.needs .pill { justify-self: start; }
.needs p { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; max-width: 38em; }

/* (06) two links beside the button */
.cta-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

@media (max-width: 1100px) {
  .reg { grid-column: 1 / 7; }
  .letter { grid-column: 7 / 12; }
}
@media (max-width: 760px) {
  .stations { position: static; transform: none; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin: -6px 0 30px 32px; }
  .stations .pill { font-size: 11px; padding: 5px 8px; }
  .stations .pill:first-child { margin-left: 0; }
  .sheet { margin-top: 48px; }
  .sheet__t td, .sheet__t th { padding-left: 0; }
  .sheet__t tr[data-line-anchor] td:first-child { padding-left: 0; }
  .path-sub, .reg-sub { margin-top: -16px; }
  .issue { display: block; margin-top: 56px; }
  .reg__r { padding-left: 0; }
  .letter { margin-top: 40px; padding: 20px 18px 24px; }
  .letter__f > div { grid-template-columns: 4.6em 1fr; }
  .letter__f dd { font-size: 14px; }
  .issue__tag { margin-top: 28px; }
  .reg-cmp { padding-top: 72px; }
  .needs li { grid-template-columns: 1fr; gap: 10px; }
  .cta-links { align-self: flex-start; }
  #h-cta { font-size: clamp(34px, 9.4vw, 44px); }
}