/* ============================================================
   EASTAX — REKONSILIASI
   Three-layer working paper: the page is a reconciliation sheet.
   Ground is ruled ledger paper. Each business line is a COLUMN that
   either balances or doesn't. Total rules are double. Verified
   figures are stamped in oxide. Nothing is a floating card.
   Seed: 74c04c6b (assigned index 6 of the grounded list)
   ============================================================ */

:root{
  /* paper ground and its tonal steps */
  --paper:#E9EFE3; --paper-2:#F4F7EF; --paper-3:#DCE6D3; --paper-4:#CDDCC2;
  /* ink */
  --ink:#14241C; --ink-2:#2C4034; --muted:#5A6B5F;
  /* rules — the structural grammar of the whole sheet */
  --rule:#C3D3B8; --rule-2:#94AC86; --rule-hair:#D5E1CB;
  /* logo family, used as functional state only */
  --lime:#D3DE32; --green:#49B452; --teal:#13AFA1;
  --teal-ink:#0A5F58; --teal-soft:#D8EBE6;
  /* reconciliation outcomes */
  --oxide:#A8452F; --credit:#1E6B3C; --variance:#A8342A;

  --font:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-logo:'Poppins','Archivo',sans-serif;

  --baseline:32px;
  --rail:146px;
  --max:1120px;
  --gut:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;
  font-weight:400;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--teal-ink)}
::selection{background:var(--lime);color:var(--ink)}

/* ---------- type: Archivo, tight and businesslike ---------- */
h1,h2,h3,h4{font-family:var(--font);margin:0 0 .5em;line-height:1.08;
  letter-spacing:-.022em;font-weight:700;font-stretch:104%}
h1{font-size:clamp(2.05rem,4.4vw,3.5rem);font-weight:800;font-stretch:100%}
h2{font-size:clamp(1.45rem,2.6vw,2.15rem);font-weight:700}
h3{font-size:1.16rem;font-weight:700;line-height:1.25}
h4{font-size:1rem;font-weight:700}
p{margin:0 0 1em;color:var(--ink-2)}
strong,b{font-weight:700;color:var(--ink)}
em{font-style:normal;background:var(--lime);padding:0 .18em;border-radius:1px}
.lead{font-size:1.09rem;color:var(--ink-2);max-width:58ch}

/* figures and codes — the sheet's small print */
.num,.fig{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.code{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.label{display:flex;align-items:center;gap:.7em;font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin:0 0 1.1em}
.label::before{content:"";width:20px;height:2px;background:var(--ink);flex:none}
.label .n{color:var(--oxide)}
.tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.35em .6em;border:1px solid var(--rule-2);color:var(--ink-2)}

/* ============================================================
   SHEET LAYOUT — rail of docket tabs + the working area
   ============================================================ */
.wrap{max-width:calc(var(--rail) + var(--max));margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0}
.col{min-width:0;border-left:1px solid var(--rule);padding-left:var(--gut)}
.sec{padding:68px 0;position:relative}
.sec + .sec{border-top:1px solid var(--rule)}
.sec-head{margin-bottom:34px}
.sec-head h2 + .lead{margin-top:.2em}

/* ruled paper: a real baseline grid, drawn only where it earns its keep */
.ruled{position:relative}
.ruled::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--baseline) - 1px),
    var(--rule-hair) calc(var(--baseline) - 1px) var(--baseline));
  background-position:0 6px;opacity:.75}
.ruled > *{position:relative;z-index:1}

/* ---------- docket-tab rail ---------- */
.rail{position:sticky;top:0;align-self:start;height:100vh;padding:104px 0 24px;
  display:flex;flex-direction:column;justify-content:space-between}
.rail nav{display:flex;flex-direction:column;gap:2px}
.rail a{display:flex;gap:10px;align-items:baseline;text-decoration:none;
  padding:7px 12px 7px 0;font-size:.76rem;font-weight:600;letter-spacing:.02em;
  color:var(--muted);border-top:1px solid transparent;transition:color .15s}
.rail a b{font-size:.68rem;font-weight:700;color:var(--rule-2);letter-spacing:.06em;min-width:18px}
.rail a:hover{color:var(--ink)}
.rail a[aria-current="true"]{color:var(--ink);font-weight:700}
.rail a[aria-current="true"] b{color:var(--oxide)}
.rail-foot{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.8}
.rail-foot b{display:block;color:var(--ink)}

/* progress rule shown when the rail is collapsed */
.rail-bar{display:none;position:fixed;left:0;right:0;top:0;height:3px;z-index:60;background:var(--paper-3)}
.rail-bar i{display:block;height:100%;width:0;background:var(--oxide);transition:width .25s ease}

/* ============================================================
   HEADER
   ============================================================ */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper-2);
  padding:10px 16px;border:2px solid var(--ink);font-weight:700}
.site-header{position:sticky;top:0;z-index:50;background:var(--paper-2);
  border-bottom:1px solid var(--rule)}
.site-header.scrolled{border-bottom-color:var(--ink);box-shadow:0 1px 0 rgba(20,36,28,.06),0 12px 24px -20px rgba(20,36,28,.5)}
.header-in{max-width:calc(var(--rail) + var(--max));margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:24px;height:76px}
.brand{--s:.13;display:flex;align-items:flex-end;gap:calc(21px * var(--s));
  text-decoration:none;color:var(--ink);margin-right:auto}
.brand-mark{display:flex;flex-direction:column;gap:calc(21px * var(--s));transform:skewX(-7deg)}
.brand-mark span{display:block;width:calc(233px * var(--s));height:calc(55px * var(--s))}
.brand-mark span:nth-child(1){background:var(--lime);border-radius:calc(30px * var(--s)) calc(30px * var(--s)) calc(3px * var(--s)) calc(3px * var(--s))}
.brand-mark span:nth-child(2){background:var(--green);border-radius:calc(3px * var(--s))}
.brand-mark span:nth-child(3){background:var(--teal);border-radius:calc(3px * var(--s)) calc(3px * var(--s)) calc(30px * var(--s)) calc(30px * var(--s))}
.brand-name{font-family:var(--font-logo);font-weight:800;font-size:calc(210px * var(--s));
  letter-spacing:calc(-4px * var(--s));transform:skewX(-7deg);line-height:.72;
  margin-bottom:calc(-4px * var(--s));color:var(--ink);white-space:nowrap}
/* The footer lockup is an identity mark, not a headline: at .19 the wordmark
   was 40px and broke "Eastax" across two lines ("East" / "ax") below 960px.
   .15 keeps it clearly larger than the header (.13) while staying on one line
   down to 320px. */
.brand-foot{--s:.15}
.nav{display:flex;gap:26px}
.nav a{text-decoration:none;color:var(--ink-2);font-weight:600;font-size:.9rem;
  padding-bottom:3px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--oxide)}
.header-cta{display:flex;align-items:center;gap:14px}
.header-cta .btn{padding:10px 18px;font-size:.86rem}
.wa-inline{font-weight:600;font-size:.84rem;color:var(--ink-2);text-decoration:none;
  white-space:nowrap;border-bottom:1px solid var(--rule-2)}
.wa-inline:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ============================================================
   BUTTONS — squared plates, no pills
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font);font-weight:700;font-size:.9rem;letter-spacing:.01em;
  padding:14px 24px;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper-2);
  transition:background .16s ease,color .16s ease,transform .16s ease}
.btn:hover{background:var(--teal-ink);border-color:var(--teal-ink)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper-2)}
.btn-light{background:var(--paper-2);color:var(--ink);border-color:var(--paper-2)}
.btn-light:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.btn-line{background:transparent;color:var(--paper-2);border-color:var(--rule-2)}
.btn-line:hover{background:var(--paper-2);color:var(--ink);border-color:var(--paper-2)}
.btn-sm{padding:10px 18px;font-size:.84rem}
.btn-block{width:100%}
.btn .arrow{font-weight:700}

/* ============================================================
   HERO — the reconciliation strip. The thesis.
   ============================================================ */
.hero{padding:56px 0 64px;border-bottom:1px solid var(--rule)}
/* HERO OPEN: headline block sits on top, the settling line spans beneath it. */
.hero-open{max-width:52rem}
.hero-open h1{max-width:38ch}
.hero-open .lead{max-width:56ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 0}

/* the three-column reconciliation block (.recon*) and the hero decision ladder
   (.ladder*) were both replaced by the "kurva yang merata" chart plus the
   #tier-tool recommender. Their rules, and the .hero-grid / .hero-note / .bands
   helpers that only they used, were removed with them. */

/* ============================================================
   LEDGER BLOCKS — the replacement for cards
   ============================================================ */
.ledger{border-top:1px solid var(--ink);margin-top:8px}
.ledger-cols{display:grid;gap:0;border-bottom:1px solid var(--rule)}
.ledger-cols.c2{grid-template-columns:1fr 1fr}
.ledger-cols.c3{grid-template-columns:repeat(3,1fr)}
.ledger-cols.c4{grid-template-columns:repeat(4,1fr)}
/* Five solution cards: 3 on the first row, 2 on the second. The last card spans
   two tracks so the rule underneath stays unbroken. */
.ledger-cols.c3.five{grid-template-columns:repeat(3,1fr)}
.ledger-cols.c3.five .ledger-col:nth-child(3){border-right:0}
.ledger-cols.c3.five .ledger-col:nth-child(4){border-bottom:1px solid var(--rule)}
.ledger-cols.c3.five .ledger-col:nth-child(5){grid-column:span 2;border-right:0}
.ledger-col{padding:26px 24px;border-right:1px solid var(--rule);min-width:0;position:relative}
.ledger-col:last-child{border-right:0}
.ledger-col .cn{font-size:.68rem;font-weight:700;letter-spacing:.16em;color:var(--rule-2);display:block;margin-bottom:12px}
.ledger-col h3{margin-bottom:.45em}
.ledger-col p{margin:0;font-size:.92rem;color:var(--ink-2)}
/* a debit column: the failing option, marked like an unreconciled line */
.ledger-col.debit{background-image:repeating-linear-gradient(135deg,
  transparent 0 6px,rgba(148,172,134,.2) 6px 7px)}
.ledger-col.debit .cn{color:var(--variance)}
/* negative state reads through a clipped bottom edge, not a left stripe */
.ledger-col.debit{border-bottom:3px solid var(--variance)}
.ledger-col.credit{background:var(--paper-3);border-bottom:3px solid var(--credit)}

/* ---------- ruled list of lines ---------- */
.lines{list-style:none;margin:14px 0 0;padding:0}
.lines li{position:relative;padding:9px 0 9px 30px;font-size:.92rem;color:var(--ink-2);
  border-bottom:1px solid var(--rule-hair)}
.lines li:last-child{border-bottom:0}
.lines li::before{position:absolute;left:0;top:9px;font-weight:700;font-size:.9rem}
.lines li::before{content:"—";color:var(--credit)}
.lines li.no::before{content:"×";color:var(--variance)}
.lines li.check::before{content:"✓";color:var(--credit)}
.lines li .fig{float:right;font-weight:700;color:var(--ink);margin-left:12px}

/* ---------- totals block ---------- */
.total{margin-top:22px;border-top:1px solid var(--ink);border-bottom:3px double var(--ink);
  padding:13px 0;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-weight:700;font-size:.95rem}
.total .k{color:var(--ink-2);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.total .v{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.total.risk{border-bottom-color:var(--variance)}
.total.risk .v{color:var(--variance)}

/* ---------- stamp ---------- */
.stamp{display:inline-block;border:2px solid var(--oxide);color:var(--oxide);
  font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  padding:.5em .85em;transform:rotate(-2.2deg);position:relative;background:rgba(233,239,227,.5)}
.stamp::after{content:"";position:absolute;inset:2px;border:1px solid var(--oxide);opacity:.45}
.stamp.sm{font-size:.62rem;letter-spacing:.16em;padding:.4em .65em}
.stamp.teal{border-color:var(--teal-ink);color:var(--teal-ink)}
.stamp.teal::after{border-color:var(--teal-ink)}

/* ============================================================
   PRICING — the schedule of fees, as a real schedule
   ============================================================ */
/* the two-button billing toggle (.toggle) was replaced by the #tier-tool
   two-question recommender — its rules were removed with it. */

.sched{border-top:1px solid var(--ink)}
.sched-row{display:grid;grid-template-columns:1.35fr 1fr 1fr;border-bottom:1px solid var(--rule);
  align-items:stretch}
.sched-row.head{border-bottom:1px solid var(--ink);background:var(--paper-3)}
.sched-row.head div{padding:10px 16px;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);line-height:1.4}
.sched-row.head div small{display:block;margin-top:3px;font-size:.64rem;font-weight:500;
  letter-spacing:.02em;text-transform:none;color:var(--ink-2)}
.sched-row.head div:last-child{color:var(--ink)}
.sched-row > div{padding:18px 16px;border-right:1px solid var(--rule);min-width:0}
.sched-row > div:last-child{border-right:0}
.sched-tier{display:flex;flex-direction:column;gap:3px;justify-content:center}
.sched-tier .t{font-weight:700;font-size:.98rem}
.sched-tier .s{font-size:.78rem;color:var(--muted)}
.sched-fee{display:flex;flex-direction:column;justify-content:center;gap:8px;background:var(--paper-2)}
.sched-row:hover .sched-fee{background:var(--paper-3)}
.sched-fee .amt{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;
  transition:opacity .18s ease;white-space:nowrap}
.sched-fee .per{font-size:.74rem;color:var(--muted);letter-spacing:.02em}
/* the two-service column is the one we want read first */
.sched-fee--two{background:var(--paper-3)}
.sched-row:hover .sched-fee--two{background:var(--paper-4)}
.sched-fee--two .amt{font-size:1.4rem;color:var(--ink)}
.sched-row.featured{background:var(--paper-3)}
.sched-row.featured .sched-fee{background:var(--paper-4)}
.sched-row.featured .sched-tier .t::after{content:" · paling dipilih";font-size:.7rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--oxide)}
/* scope lines that exist only in the complete package re-reconcile away */
/* BUG FIX: this rule carried max-height:3em from the old crossfade animation.
   "Pembukuan dan laporan keuangan bulanan" needs ~58px in the scope column
   (three lines), but 3em capped the box at 40.8px with overflow:hidden — so the
   second line lost its bottom padding and the third was sliced in half at every
   viewport width. The item is NEVER hidden (it stays in the DOM in both modes),
   so no height clamp is needed at all: only opacity and the strike change. */
.only-lengkap{overflow:visible;transition:opacity .22s ease}
.only-lengkap.void{opacity:.28;text-decoration:line-through;text-decoration-color:var(--variance);
  text-decoration-thickness:1px}
.sched-note{margin-top:18px;font-size:.84rem;color:var(--muted);max-width:70ch}

/* ============================================================
   COMPARISON — a three-column reconciliation of the category
   ============================================================ */
.cmp{border:1px solid var(--rule-2);background:var(--paper-2);overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:660px;font-size:.9rem}
caption{text-align:left;padding:12px 16px;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule)}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);background:var(--paper-3);border-bottom:1px solid var(--ink)}
/* BALANCED COMPARISON — every column states a real strength and a real caveat.
   The competitor headers are no longer red; only "Layanan kami" is emphasised.
   Each cell is a two-line pair: <b> the strength, <span> the caveat. */
td b{display:block;font-weight:700;color:var(--ink);font-size:.86rem;margin-bottom:2px}
td span{display:block;font-size:.78rem;line-height:1.35;color:var(--muted)}
tbody tr:last-child td{border-bottom:0}
td:first-child{font-weight:700;color:var(--ink)}
td.us{background:var(--paper-3)}
td.us b{color:var(--credit)}
td.us span{color:var(--ink-2)}

/* ============================================================
   JOURNAL — the process, as dated entries
   ============================================================ */
.journal{border-top:1px solid var(--ink)}
.jrow{display:grid;grid-template-columns:88px minmax(0,1fr);border-bottom:1px solid var(--rule)}
.jrow:last-child{border-bottom:0}
.jdate{padding:20px 16px 20px 0;border-right:1px solid var(--rule);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oxide)}
.jbody{padding:20px 0 20px 22px}
.jbody h3{margin-bottom:.35em}
.jbody p{margin:0;font-size:.92rem}

/* ============================================================
   FAQ — notes to the statement
   ============================================================ */
.notes{border-top:1px solid var(--ink)}
.notes details{border-bottom:1px solid var(--rule)}
.notes details[open]{background:var(--paper-2)}
.notes summary{cursor:pointer;list-style:none;font-weight:700;font-size:.98rem;
  padding:18px 0;display:flex;gap:16px;align-items:baseline}
.notes summary::-webkit-details-marker{display:none}
.notes summary .sn{font-size:.72rem;font-weight:700;color:var(--oxide);letter-spacing:.1em;flex:none}
.notes summary .q{flex:1}
.notes summary::after{content:"+";flex:none;font-size:1.15rem;font-weight:700;color:var(--rule-2);
  transition:transform .22s ease,color .22s ease}
.notes details[open] summary::after{content:"–";color:var(--oxide)}
.notes .a{padding:0 0 20px 34px;font-size:.93rem;color:var(--ink-2);max-width:76ch}
.notes .a a{font-weight:600}

/* ============================================================
   CLOSING — the stamped certificate
   ============================================================ */
.close{margin-top:8px;background:var(--ink);color:var(--paper-2);padding:clamp(32px,5vw,56px);
  position:relative;overflow:hidden}
.close::before{content:"";position:absolute;inset:14px;border:1px solid rgba(233,239,227,.22);pointer-events:none}
.close h2{color:var(--paper-2);position:relative}
.close p{color:#C9D6C6;max-width:56ch;position:relative}
.close .stamp{background:transparent;border-color:var(--lime);color:var(--lime);position:relative}
.close .stamp::after{border-color:var(--lime)}
.close-row{display:flex;gap:12px;flex-wrap:wrap;position:relative;margin-top:26px}
.close-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;position:relative;
  border-top:1px solid rgba(233,239,227,.22)}
.close-list li{padding:10px 0;border-bottom:1px solid rgba(233,239,227,.16);font-size:.9rem;color:#C9D6C6}
.close-list li b{color:var(--paper-2)}
.close-contact{margin-top:24px;font-size:.88rem;color:#C9D6C6;position:relative}
.close-contact a{color:var(--paper-2);font-weight:700}
.close-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,48px);align-items:start}

/* ============================================================
   FORMS
   ============================================================ */
.form-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  border:1px solid var(--rule-2);background:var(--paper-2)}
.form-card{padding:clamp(22px,3vw,34px);border-right:1px solid var(--rule)}
.form-side{background:var(--paper-3);padding:clamp(22px,3vw,34px)}
.form-side h3{margin-bottom:.6em}
.form-side p,.form-side li{font-size:.9rem;color:var(--ink-2)}
.form-side ul{margin:14px 0;padding:0;list-style:none;display:grid;gap:0}
.form-side li{padding:9px 0 9px 22px;position:relative;border-bottom:1px solid var(--rule)}
.form-side li::before{content:"✓";position:absolute;left:0;top:9px;color:var(--credit);font-weight:700}
.field{display:grid;gap:6px;margin-bottom:16px}
.field.full{grid-column:1/-1}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
label{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
input,select,textarea{font-family:var(--font);font-size:.95rem;padding:12px 14px;
  border:1px solid var(--rule-2);border-radius:2px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--oxide);outline-offset:-1px;border-color:var(--oxide)}
textarea{min-height:118px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
  linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.form-hint{margin:0;font-size:.82rem;color:var(--muted);grid-column:1/-1}
.form-hint a{font-weight:700}

/* ============================================================
   TEAM — personnel file
   ============================================================ */
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border:1px solid var(--rule-2);background:var(--paper-2)}
.person{border-right:1px solid var(--rule-2);display:flex;flex-direction:column}
.person:last-child{border-right:0}
.person-photo{aspect-ratio:4/5;overflow:hidden;background:var(--paper-3);border-bottom:1px solid var(--rule-2);
  position:relative}
.person-photo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(1.03)}
.person-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(233,239,227,.12),rgba(233,239,227,0) 40%)}
.person-photo .cap{position:absolute;left:0;bottom:0;background:var(--paper-2);
  padding:6px 12px;font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);border-top:1px solid var(--rule-2);border-right:1px solid var(--rule-2)}
.person-body{padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:12px;flex:1}
.person-body h2{margin:0;font-size:1.5rem}
.person-role{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oxide);
  padding-bottom:10px;border-bottom:1px solid var(--rule)}
.person-body p{margin:0;font-size:.92rem}
.cred{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0}
.cred span{border:1px solid var(--rule-2);color:var(--ink-2);font-size:.72rem;font-weight:600;
  padding:4px 9px;letter-spacing:.03em}
.license{font-size:.82rem;color:var(--muted);border-top:1px solid var(--rule);padding-top:10px}
.license strong{color:var(--ink);font-weight:700}
.person-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}

/* personnel detail sheets */
.file{border:1px solid var(--rule-2);background:var(--paper-2);padding:clamp(24px,3.4vw,40px);margin-top:26px}
.file h3{margin-top:26px;padding-bottom:.35em;border-bottom:1px solid var(--rule)}
.file h3:first-of-type{margin-top:0}
.file > p{max-width:74ch}
.file ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:0}
.file ul li{padding:9px 0 9px 24px;position:relative;font-size:.92rem;color:var(--ink-2);
  border-bottom:1px solid var(--rule-hair)}
.file ul li::before{content:"—";position:absolute;left:0;color:var(--credit)}
.file-meta{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);
  border-bottom:3px double var(--ink);margin-bottom:22px}
.file-meta div{padding:12px 14px;border-right:1px solid var(--rule)}
.file-meta div:last-child{border-right:0}
.file-meta .k{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.file-meta .v{font-weight:700;font-size:.95rem;margin-top:3px}

/* ============================================================
   PAGE TOP — breadcrumb + hero for interior pages
   ============================================================ */
.crumb{font-size:.78rem;color:var(--muted);padding:26px 0 14px;display:flex;gap:8px;align-items:center}
.crumb a{color:var(--ink-2);text-decoration:none;font-weight:600;border-bottom:1px solid var(--rule-2)}
.crumb a:hover{border-bottom-color:var(--ink)}
.crumb span{color:var(--rule-2)}
.page-hero{padding:14px 0 52px;border-bottom:1px solid var(--rule)}
.page-hero h1{max-width:22ch}
.page-hero .lead{margin-top:.6em}
.hero-actions{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- service entries (project-based) ---------- */
.svc{border-top:1px solid var(--ink)}
.svc-item{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr);
  border-bottom:1px solid var(--rule);gap:0}
.svc-item:last-child{border-bottom:0}
.svc-main{padding:24px 28px 24px 0}
.svc-main h3{margin-bottom:.4em}
.svc-main p{margin:0;font-size:.93rem;max-width:64ch}
.svc-fee{padding:24px;border-left:1px solid var(--rule);background:var(--paper-2);
  display:flex;flex-direction:column;gap:8px;justify-content:center}
.svc-fee .k{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.svc-fee .v{font-size:.86rem;font-weight:600;color:var(--ink-2);line-height:1.4}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--paper-2);border-top:1px solid var(--ink);margin-top:0}
.foot-wrap{max-width:calc(var(--rail) + var(--max));margin:0 auto;padding:52px 24px 24px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:32px;padding-bottom:32px}
.foot-grid > div{border-top:1px solid var(--rule-2);padding-top:14px}
.foot-grid h3{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
.foot-grid a{display:block;color:var(--ink-2);text-decoration:none;font-size:.88rem;
  padding:6px 0;border-bottom:1px solid var(--rule-hair)}
.foot-grid a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.foot-grid a.brand{display:flex;align-items:flex-end;border-bottom:0;padding:0 0 12px}
.foot-grid p{font-size:.88rem;margin:0;max-width:34ch}
.foot-bottom{border-top:1px solid var(--rule);padding-top:18px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--paper-2);font-weight:700;font-size:.85rem;text-decoration:none;
  padding:13px 18px 13px 13px;border-radius:2px;border:1px solid var(--ink);
  box-shadow:0 14px 28px -14px rgba(20,36,28,.6);transition:background .18s,transform .18s}
.wa-float:hover{background:var(--teal-ink);transform:translateY(-2px)}
.wa-float .n{letter-spacing:.02em}
.wa-float .dot{width:8px;height:8px;background:var(--lime);flex:none;animation:blip 2.6s infinite}
@keyframes blip{0%,72%,100%{opacity:1}80%{opacity:.25}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- layout helpers ---------- */
.wide-note{background:var(--paper-2);border:1px solid var(--rule-2);
  padding:18px 22px;font-size:.93rem;color:var(--ink-2);margin:26px 0 0}
.wide-note b{color:var(--ink)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1180px){
  .wrap,.header-in,.foot-wrap{max-width:var(--max)}
  .wrap{grid-template-columns:minmax(0,1fr)}
  .col{border-left:0;padding-left:0}
  .rail{display:none}
  .rail-bar{display:block}
  html{scroll-padding-top:88px}
}
@media(max-width:960px){
  .ledger-cols.c4{grid-template-columns:1fr 1fr}
  .ledger-cols.c3{grid-template-columns:1fr 1fr}
  /* At two columns the five-card span rules no longer apply. */
  .ledger-cols.c3.five{grid-template-columns:1fr 1fr}
  .ledger-cols.c3.five .ledger-col:nth-child(3){border-right:1px solid var(--rule)}
  .ledger-cols.c3.five .ledger-col:nth-child(5){grid-column:auto;border-right:0}
  .ledger-col{border-bottom:1px solid var(--rule)}
  .ledger-col:nth-child(2n){border-right:0}
  .form-card{border-right:0;border-bottom:1px solid var(--rule)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  .svc-item{grid-template-columns:minmax(0,1fr)}
  .svc-fee{border-left:0;border-top:1px solid var(--rule)}
  .file-meta{grid-template-columns:1fr 1fr}
  .nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper-2);
    flex-direction:column;gap:0;padding:8px 24px 18px;border-bottom:1px solid var(--ink)}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--rule);border-bottom-width:1px}
  .nav a:hover{border-bottom-color:var(--ink)}
}
@media(max-width:720px){
  /* Each price block stacks: bracket, then scope, then fee. The fee cell must
     go full width and the amount must never break mid-figure — "Rp 3,4 juta"
     was wrapping onto three lines because .amt kept its desktop size with no
     nowrap, and the scope list inherited a half-width column. */
  .sched-row{grid-template-columns:minmax(0,1fr);border-bottom:2px solid var(--ink)}
  .sched-row > div{border-right:0;border-bottom:1px solid var(--rule-hair);min-width:0;padding:14px 16px}
  .sched-row > div:last-child{border-bottom:0}
  .sched-row.head{display:none}
  .sched-tier{padding-bottom:8px}
  .sched-scope{font-size:.86rem;gap:8px;min-width:0;width:100%}
  .sched-scope .lines{min-width:0;width:100%}
  .sched-scope .lines li{min-width:0;overflow-wrap:break-word}
  .sched-fee{background:var(--paper-3);gap:10px;align-items:stretch;min-width:0;width:100%}
  .sched-fee .amt{font-size:1.6rem;line-height:1.1;white-space:nowrap;min-width:0}
  /* "per bulan, harga tetap" must be allowed to wrap: it is the longest line in
     the cell and with nowrap it pushed the page 13-33px past the viewport. */
  .sched-fee .per{white-space:normal;min-width:0}
  .sched-fee .btn{width:100%;text-align:center;white-space:normal;min-width:0}
  .jrow{grid-template-columns:64px minmax(0,1fr)}
  .fgrid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:minmax(0,1fr)}
  .person{border-right:0;border-bottom:1px solid var(--rule-2)}
  .file-meta{grid-template-columns:1fr}
  .file-meta div{border-right:0;border-bottom:1px solid var(--rule-hair)}
  .header-cta .wa-inline{display:none}
  .header-in{height:68px;gap:14px}
  .hero{padding:34px 0 44px}
  .sec{padding:48px 0}
  .foot-grid{grid-template-columns:1fr}
  .wa-float .n{display:none}
  .wa-float{padding:13px}
  .ledger-cols.c4,.ledger-cols.c3,.ledger-cols.c2{grid-template-columns:1fr}
  .ledger-col{border-right:0}
  .close{padding:30px 22px}
  .close::before{inset:8px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  /* EXCEPTION — hero "kurva yang merata".
     The Windows "Animation effects" setting is commonly off, which makes every
     browser report prefers-reduced-motion:reduce and would otherwise freeze the
     hero at its still frame. The client asked this one animation to play for
     everyone, so it is deliberately re-enabled here. It is slow (~6s), with a
     single calm easing — no flashing, no parallax. */
  .curve .chaos-line{animation:curveDraw 6.2s cubic-bezier(.5,.05,.2,1) both!important}
  .curve .curve-chaos{animation:chaosCollapse 6.2s cubic-bezier(.5,.05,.2,1) both!important}
  .curve .flat-line{animation:flatDraw 6.2s cubic-bezier(.4,0,.2,1) both!important}
  .curve .flat-dots{animation:flatDots 6.2s ease both!important}
  .curve .curve-tag{animation:tagIn 6.2s ease both!important}
}

/* ============================================================
   SUPPLEMENTS — compact ruled lines + banded call-out
   ============================================================ */
/* compact ruled lines, used inside the fee schedule */
.lines.sm li{font-size:.85rem;padding:7px 0 7px 20px;border-bottom:0}
.lines.sm li::before{top:7px;font-size:.82rem}
/* a line filed outside the standard schedule */
.cta-band{margin-top:34px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  background:var(--paper-2);padding:26px 28px;display:grid;
  grid-template-columns:minmax(0,1.6fr) auto;gap:26px;align-items:center}
.cta-band h3{margin:.5em 0 .4em;max-width:30ch}
.cta-band p{margin:0;font-size:.92rem;max-width:64ch;color:var(--ink-2)}
.cta-band .btn{white-space:nowrap}
@media(max-width:720px){ .cta-band{grid-template-columns:minmax(0,1fr);padding:22px} }

/* ============================================================
   FIXES from the verification round
   ============================================================ */
/* 1. footer links sat at 28px tall — bring every interactive row to >=32px */
.foot-grid a{padding:8px 0;min-height:32px;display:flex;align-items:center}
.rail a{padding:10px 12px 10px 0;min-height:32px;align-items:center}
/* 2. the mobile hamburger is the only menu entry point below 960px — make it a real target */
/* 3. the reconciliation strip scrolls inside its own frame on phones: fade the cut edge
      instead of letting a column disappear with no cue */
@media(max-width:720px){
}

/* ============================================================
   DETECTOR FIXES — mechanical findings from detect.mjs
   1. side-tab: 3px coloured left borders read as the AI-UI tell.
      The reconciliation world already has a stronger, native device —
      hatching (unreconciled) and inversion (settled) — so the stripes go.
   2. layout-transition: value swaps and rule fills animate within each
      element's OWN box, so the boxes are frozen and nothing reflows.
   ============================================================ */
.ledger-col.debit::before,.ledger-col.credit::before{display:none}
.cta-band,.wide-note{border-left:0}
.total.risk{border-left:0}

/* freeze the boxes so value swaps and progress fills can't reflow the row */
.sched-tier .t{display:inline-block}
.sched-fee .amt{min-height:1.4em}

/* footer rows are links, not chips: the min-height goes on the anchor's box only */
.foot-grid .foot-bottom a{min-height:0}
/* every standalone navigation target gets a >=32px box; inline prose links stay inline */
.nav a{min-height:32px;display:inline-flex;align-items:center}
.brand{min-height:44px}
.foot-grid a{min-height:34px;padding:9px 0}
.foot-grid .sku a,.foot-grid a.brand{min-height:0}
.foot-bottom a{display:inline-block;padding:8px 0;min-height:0}
.notes .a a,.wide-note a,.crumb a,.form-hint a{min-height:0;padding:0}
/* phone number and email shortcuts behave as buttons, not as fine print */
.wa-inline{display:inline-flex;align-items:center;min-height:34px;padding:6px 0}
.close-contact a,.form-side a{display:inline-block;padding:6px 0;min-height:0}

/* ============================================================
   UX PSYCHOLOGY PASS
   1. Cost-of-inaction anchor: the decision point is preceded by an
      ESTIMATE of the exposure it is meant to avoid. Illustrative —
      the page says so, and no figure is a client result.
   2. Goal-gradient close: the fee schedule ends with its own row of
      next steps instead of fine print.
   3. Peak-end: the form opens a branded "what happens next" receipt.
   4. Zeigarnik: the intake placeholder becomes a worked example to
      match the grammar used everywhere else in the design.
   ============================================================ */

/* ---- 1. cost-of-inaction anchor ---- */
.anchor{margin-top:30px;border-top:1px solid var(--ink);border-bottom:3px double var(--ink);
  background:var(--paper-2);padding:20px 24px;display:grid;
  grid-template-columns:minmax(0,1.5fr) auto;gap:24px;align-items:center}
.anchor .k{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oxide);margin-bottom:8px}
.anchor p{margin:0;font-size:.92rem;color:var(--ink-2);max-width:62ch}
.anchor .swap{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.anchor .was{font-size:.86rem;color:var(--muted);text-decoration:line-through;
  text-decoration-color:var(--variance)}
.anchor .now{font-size:1.05rem;font-weight:700;color:var(--ink)}
.anchor .why{display:block;margin-top:6px;font-size:.74rem;color:var(--muted)}
.anchor .fig{text-align:right}
.anchor .fig .n{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.02em;
  color:var(--variance)}
.anchor .fig .l{display:block;font-size:.72rem;color:var(--muted);margin-top:2px}
@media(max-width:720px){ .anchor{grid-template-columns:minmax(0,1fr);padding:18px}
  .anchor .fig{text-align:left} }

/* ---- 2. goal-gradient close on the fee schedule ---- */
.sched-close{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--paper);border-top:1px solid var(--ink);border-bottom:3px double var(--ink)}
.sched-close div{padding:16px 18px;border-right:1px solid var(--rule)}
.sched-close div:last-child{border-right:0}
.sched-close .k{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.sched-close .v{margin-top:4px;font-size:.88rem;color:var(--ink-2);font-weight:600}
@media(max-width:720px){ .sched-close{grid-template-columns:1fr}
  .sched-close div{border-right:0;border-bottom:1px solid var(--rule)} }

/* ---- 3. peak-end receipt on form submit ---- */
.receipt{margin-top:16px;border:1px solid var(--ink);background:var(--paper-3);
  padding:16px 18px;display:none}
.receipt.on{display:block}
.receipt .stamp{margin-bottom:12px}
.receipt p{margin:0 0 10px;font-size:.88rem;color:var(--ink-2)}
.receipt ol{margin:0 0 12px;padding:0;list-style:none;counter-reset:r}
.receipt li{counter-increment:r;position:relative;padding:6px 0 6px 26px;font-size:.86rem;
  color:var(--ink-2);border-bottom:1px solid var(--rule)}
.receipt li:last-child{border-bottom:0}
.receipt li::before{content:"0" counter(r);position:absolute;left:0;top:6px;
  font-size:.72rem;font-weight:700;color:var(--oxide);letter-spacing:.08em}
.receipt .fallback{font-size:.8rem;color:var(--muted);margin:0}
.receipt .fallback a{font-weight:700}

/* ============================================================
   PSYCHOLOGY PASS II
   Concept-driven additions. Each block names the concept it serves.
   ============================================================ */

/* HERO: "KURVA YANG MERATA" — 100% CSS + inline SVG, tanpa JavaScript.
   Grafik biaya bulanan bergerigi (merah, tak terduga) yang menggambar masuk,
   lalu RATA turun menjadi satu garis tetap (hijau) di bawah label "Satu tarif
   flat". Hover memutar ulang seluruh cerita. Tidak ada satu pun klik.
   Animasinya sengaja dikecualikan dari reduced-motion (lihat blok global),
   karena setelan Windows "Animation effects" pemilik sering nonaktif. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.curve{margin:30px 0 8px}
.curve-card{background:var(--paper-2);border:1px solid var(--rule-2)}

/* --- card head: title + legend --- */
.curve-head{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px 18px;border-bottom:1px solid var(--ink);flex-wrap:wrap}
.curve-title{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.curve-legend{display:flex;align-items:center;gap:16px;font-size:.68rem;font-weight:600;
  color:var(--muted);letter-spacing:.02em}
.curve-legend > span{display:inline-flex;align-items:center;gap:6px}
.curve-legend i{display:inline-block;width:15px;height:3px;border-radius:2px}
.lg-chaos{background:var(--variance)}
.lg-flat{background:var(--credit)}

/* --- the stage --- */
.curve-stage{position:relative;height:210px;padding:18px 20px 30px}
.curve-ghost,.curve-chaos,.curve-flat{position:absolute;left:20px;right:20px;
  top:18px;bottom:30px}

.curve-ghost,.curve-chaos,.curve-flat{overflow:visible}
.curve-ghost path,.curve-chaos path,.curve-flat path{vector-effect:non-scaling-stroke}

/* ghost of the old curve: faint dashed reminder, always present */
.curve-ghost path{fill:none;stroke:var(--variance);stroke-width:1.5;
  stroke-dasharray:5 5;stroke-linecap:round;opacity:.28}

/* the jagged cost line: draws on, then collapses onto the baseline and fades */
.chaos-line{fill:none;stroke:var(--variance);stroke-width:2.5;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:3200;stroke-dashoffset:3200;
  animation:curveDraw 6.2s cubic-bezier(.5,.05,.2,1) both}
@keyframes curveDraw{
  0%{stroke-dashoffset:3200;opacity:1}
  40%{stroke-dashoffset:0;opacity:1}
  58%{stroke-dashoffset:0;opacity:1}
  78%,100%{stroke-dashoffset:0;opacity:0}
}
.curve-chaos{transform-origin:50% 50%;animation:chaosCollapse 6.2s cubic-bezier(.5,.05,.2,1) both}
@keyframes chaosCollapse{
  0%,38%{transform:scaleY(1) translateY(0);opacity:1}
  64%{transform:scaleY(.06) translateY(18px);opacity:.5}
  78%,100%{transform:scaleY(.02) translateY(0);opacity:0}
}

/* the settled flat line + month dots */
.flat-line{fill:none;stroke:var(--credit);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1200;stroke-dashoffset:1200;
  animation:flatDraw 6.2s cubic-bezier(.4,0,.2,1) both}
.flat-dots{opacity:0;animation:flatDots 6.2s ease both}
.flat-dots circle{fill:var(--credit)}
@keyframes flatDraw{
  0%,54%{stroke-dashoffset:1200}
  80%,100%{stroke-dashoffset:0}
}
@keyframes flatDots{
  0%,54%{opacity:0} 80%,100%{opacity:1}
}

/* --- month ticks --- */
.curve-months{position:absolute;left:20px;right:20px;bottom:7px;display:flex;
  justify-content:space-between;font-size:.6rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}

/* --- the settled tag, riding the flat line --- */
.curve-tag{position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-size:.64rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--credit);background:var(--paper-2);padding:.22em .45em;
  opacity:0;animation:tagIn 6.2s ease both}
@keyframes tagIn{
  0%,68%{opacity:0;transform:translateY(calc(-50% + 5px))}
  84%,100%{opacity:1;transform:translateY(-50%)}
}

/* --- caption row --- */
.curve-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:11px 18px 13px;border-top:1px solid var(--ink)}
.cf-l{font-size:.78rem;color:var(--muted);line-height:1.4;max-width:52ch}
.cf-l em{font-style:normal;color:var(--variance);font-weight:700}
.cf-r{font-size:.82rem;font-weight:700;color:var(--credit);line-height:1.4}

/* --- hover: replay the whole story --- */
.curve:hover .chaos-line{animation:curveDraw 5s cubic-bezier(.5,.05,.2,1) both}
.curve:hover .curve-chaos{animation:chaosCollapse 5s cubic-bezier(.5,.05,.2,1) both}
.curve:hover .flat-line{animation:flatDraw 5s cubic-bezier(.4,0,.2,1) both}
.curve:hover .flat-dots{animation:flatDots 5s ease both}
.curve:hover .curve-tag{animation:tagIn 5s ease both}

@media(max-width:720px){
  .curve-stage{height:160px;padding:14px 14px 26px}
  .curve-ghost,.curve-chaos,.curve-flat{left:14px;right:14px;top:14px;bottom:26px}
  .curve-months{left:14px;right:14px;font-size:.5rem;bottom:6px}
  .curve-head{padding:11px 14px}
  .curve-foot{padding:10px 14px 12px}
  .curve-tag{font-size:.56rem;right:16px}
  .curve-legend{font-size:.6rem;gap:10px}
}

/* the hero decision ladder (.ladder*) was replaced by the "kurva yang merata"
   chart + the #tier-tool recommender — its rules were removed with it. */

/* DECISION FATIGUE + DEFAULT EFFECT + FOOT-IN-THE-DOOR + NUDGE + PRIMING
   Two questions, one recommendation, out of five commercial tiers. The tier
   options are generated in JS from the schedule already on the page, so no
   price or boundary is duplicated in the source. */
.tool{background:var(--paper-2);border:1px solid var(--rule-2);padding:22px 24px;margin:0 0 30px}
.tool-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--ink);margin-bottom:18px}
.tool-head h3{margin:0;font-size:1.05rem}
.tool-head .k{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.tool-q{min-width:0}
.tool-q .ql{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:9px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--rule-2);background:var(--paper);color:var(--ink-2);
  font-family:var(--font);font-size:.82rem;font-weight:600;padding:9px 14px;cursor:pointer;
  min-height:36px;transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
/* The chip is a real button, so it inherits the UA focus ring — which is a
   dark default that vanishes against the ink fill of the pressed state.
   Theme it from the palette so the keyboard ring is always visible. */
.chip:focus-visible{outline:2px solid var(--oxide);outline-offset:2px}
.chip[aria-pressed="true"]:focus-visible{outline-color:var(--teal)}
.tool-out{margin-top:20px;border-top:1px solid var(--ink);border-bottom:3px double var(--ink);
  padding:16px 0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.tool-out .rec{min-width:0}
.tool-out .rec .k{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tool-out .rec .tier{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin:4px 0 2px}
.tool-out .rec .amt{font-size:1.05rem;font-weight:700;color:var(--ink-2)}
.tool-out .rec .why{margin:8px 0 0;font-size:.84rem;color:var(--muted);max-width:58ch}
.tool-out .rec .why b{color:var(--ink-2)}
.tool-out .rec .nudge{margin:8px 0 0;font-size:.8rem;color:var(--oxide)}
.tool-out .go{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.tool-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.tool-actions[hidden]{display:none}
.tool-actions .btn{text-decoration:none}
.tool-reset{border:0;background:none;font-family:var(--font);font-size:.78rem;font-weight:600;
  color:var(--muted);cursor:pointer;text-decoration:underline;padding:4px 0;min-height:32px}
.tool-reset:hover{color:var(--ink)}
/* `hidden` must win over any display rule that lands on this button later in the
   file, otherwise "Ulangi pilihan" shows up before a volume is even picked. */
.tool-reset[hidden]{display:none}
.tool-out .rec .tool-reset{display:inline-block}
.tool-out .rec .tool-reset[hidden]{display:none}
.tool.is-empty .tool-out .rec .tier{font-size:.98rem;font-weight:700;color:var(--muted)}
.chip-hint{display:block;margin-top:8px;font-size:.76rem;color:var(--muted);max-width:40ch;
  line-height:1.45;min-height:2.2em}

/* ---------- three payment schemes, side by side ----------
   Same package, three ways to pay. The cards are buttons: picking one also
   sets the table dropdown below, so both views always agree. */
.tool-q--wide{grid-column:1 / -1;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-hair)}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border:1px solid var(--rule-2);background:var(--paper)}
.plan-grid[hidden]{display:none}
.plan{
  position:relative;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  font-family:var(--font);text-align:left;cursor:pointer;
  background:var(--paper);border:0;border-right:1px solid var(--rule-2);
  padding:16px 18px 14px;min-height:100%;transition:background .15s ease;
}
.plan:last-child{border-right:0}
.plan:hover{background:var(--paper-3)}
.plan:focus-visible{outline:2px solid var(--oxide);outline-offset:-3px;z-index:1}
.plan .pk{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2)}
.plan .pv{font-size:1.5rem;font-weight:800;letter-spacing:-.025em;color:var(--ink);
  line-height:1.15;margin-top:4px;white-space:nowrap}
.plan .pp{font-size:.76rem;color:var(--muted)}
.plan .pt{font-size:.74rem;color:var(--ink-2);margin-top:7px;font-variant-numeric:tabular-nums}
.plan .pbadge{
  margin-top:9px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
/* the chosen scheme reads as the answer, not as another option */
.plan[aria-pressed="true"]{background:var(--ink)}
.plan[aria-pressed="true"] .pk,
.plan[aria-pressed="true"] .pp,
.plan[aria-pressed="true"] .pt{color:var(--paper-3)}
.plan[aria-pressed="true"] .pv{color:#fff}
.plan[aria-pressed="true"] .pbadge{color:var(--lime)}
.plan[aria-pressed="true"]:focus-visible{outline-color:var(--teal);outline-offset:-3px}
@media(max-width:760px){
  .tool-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  /* The container's bottom border is dropped and the last card supplies it,
     so every card keeps a border-bottom and all three stay exactly as tall. */
  .plan-grid{grid-template-columns:minmax(0,1fr);border-bottom:0}
  .plan{border-right:0;border-bottom:1px solid var(--rule-2);flex-direction:row;
    flex-wrap:wrap;align-items:baseline;gap:0 10px;padding:14px 16px}
  .plan .pv{font-size:1.3rem;margin-top:0}
  .plan .pt{width:100%;margin-top:4px}
  .plan .pbadge{margin-top:4px}
}

/* ---------- rate card: dropdowns drive every price in the table ----------
   The two selects are the only state. Each row carries its base price in
   data-base, so the JS never holds a price list of its own. */
.rate-card{margin:0 0 26px}
.rate-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;
  border:1px solid var(--rule-2);border-bottom:0;background:var(--paper-2);padding:18px 20px}
.rate-ctl{min-width:0}
.rate-ctl label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.rate-select{position:relative}
.rate-select::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.rate-select select{
  appearance:none;-webkit-appearance:none;width:100%;font-family:var(--font);font-size:.88rem;
  font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--rule-2);
  padding:9px 34px 9px 12px;min-height:40px;cursor:pointer;border-radius:0;
}
.rate-select select:hover{border-color:var(--ink)}
.rate-select select:focus-visible{outline:2px solid var(--oxide);outline-offset:1px}
.rate-note{display:block;margin-top:7px;font-size:.76rem;color:var(--muted);line-height:1.45;
  min-height:2.4em}
.rate-card .sched{border-top:0}
@media(max-width:760px){
  .rate-controls{grid-template-columns:minmax(0,1fr);gap:16px}
  .rate-note{min-height:0}
}

/* marked tier in the schedule — NUDGE + VISUAL ANCHOR driven by the tool */
.sched-row.marked{background:var(--paper-3)}
.sched-row.marked .sched-fee{background:var(--paper-4)}
.sched-row.marked .sched-tier .t::before{content:"→ ";color:var(--oxide)}

/* CONFIRMATION BIAS + EXPECTATION BIAS + PRIMING
   Two priming lines set the time cost and the expectation before the intake
   form, quoting the very team the visitor can verify on tim-kami.html. */
.prime{display:flex;gap:22px;flex-wrap:wrap;margin:0 0 22px;padding-bottom:18px;
  border-bottom:1px solid var(--rule)}
.prime div{font-size:.86rem;color:var(--ink-2);max-width:34ch}
.prime b{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--oxide);margin-bottom:3px}

/* INTENTIONAL FRICTION — case sensitivity. The visitor states their own
   standing; nothing is submitted without it. */
.ack{margin:4px 0 18px;padding:14px 16px;border:1px solid var(--rule-2);background:var(--paper)}
.ack legend{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);padding:0 6px}
.ack label{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink-2);padding:7px 0;cursor:pointer;min-height:36px}
.ack input{width:17px;height:17px;flex:none;margin-top:3px;accent-color:var(--teal-ink)}
.ack .req{font-size:.74rem;color:var(--muted);margin:6px 0 0;padding-left:27px}

/* ZEIGARNIK + GOAL GRADIENT — three cues, a progress rule, and a resolution.
   Three is permanent: the rule fills completely at 3, never earlier. */
.cues{display:grid;gap:0;margin:16px 0 0;padding:0;list-style:none;
  border-top:1px solid var(--ink);border-bottom:3px double var(--ink)}
.cue{display:flex;gap:11px;align-items:center;padding:9px 0;font-size:.86rem;color:var(--muted);
  border-bottom:1px solid var(--rule-hair);cursor:pointer;background:none;border-left:0;
  border-right:0;border-top:0;font-family:var(--font);text-align:left;width:100%;min-height:36px}
.cue:last-child{border-bottom:0}
.cue .box{width:18px;height:18px;border:1.5px solid var(--rule-2);flex:none;position:relative}
.cue[data-done="1"]{color:var(--ink)}
.cue[data-done="1"] .box{border-color:var(--credit)}
.cue[data-done="1"] .box::after{content:"✓";position:absolute;inset:-2px 0 0 2px;color:var(--credit);
  font-size:.8rem;font-weight:700}
.cue:hover{color:var(--ink)}
.cue-status{margin:12px 0 0}
.cue-status .bar{height:5px;background:var(--paper-4);overflow:hidden}
.cue-status .bar i{display:block;height:100%;width:0;background:var(--oxide);
  transition:width .3s cubic-bezier(.2,.7,.2,1)}
.cue-status p{margin:9px 0 0;font-size:.82rem;color:var(--muted)}
.cue-status p b{color:var(--ink)}

/* REACTIVE ONBOARDING — a contextual hint at the moment of use, no tour */
.ctx{display:none;margin:10px 0 0;padding:10px 13px;font-size:.8rem;color:var(--ink-2);
  background:var(--paper-3);border:1px solid var(--rule-2)}
.ctx.on{display:block}

/* ============================================================
   PROPORTION + ALIGNMENT FIXES (measured, not eyeballed)
   Audit at 1440x1000 found:
     .foot-grid   103.5 -> 1321.5   (left edge 175px OUT OF LINE)
     .hero/.sec   278.5 -> 1321.5   (every other container)
     close-grid   529.797 / 353.203 (sub-pixel drift)
     foot-grid    350.609 / 233.75  (sub-pixel drift)
   ============================================================ */

/* 1. One shared edge for the whole page. The footer used a padded wrapper while
   header and rail used a grid whose first track carried no padding, so the two
   resolved to different left edges. Both now derive from the same expression.
   On narrow screens the expression collapses to the minimum gutter, so there is
   no media query to maintain. */
:root{ --edge: max(24px, (100vw - var(--rail) - var(--max)) / 2); }
.wrap,.header-in,.foot-wrap{padding-left:var(--edge);padding-right:var(--edge)}
.foot-grid{padding-left:0;padding-right:0}

/* 2. Kill the fractional-track drift. Odd viewport widths made the centering
   land on a half pixel, so grid tracks resolved to 529.797px / 350.609px and
   neighbouring columns lost a sub-pixel of alignment with each other.
   Scoped to wide screens only: below --max the normal gutter applies. */
@media(min-width:1281px){
  .wrap,.header-in,.foot-wrap{max-width:none}
}
.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sched-row,.sched-row.head{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr)}
.sched-close{grid-template-columns:repeat(3,minmax(0,1fr))}
.close-grid{grid-template-columns:minmax(0,1fr) minmax(0,0.66fr)}
.foot-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr)}
.ledger-cols.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ledger-cols.c2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* 3. PROPORTION: the h1 ran 363px tall against a 202px decision panel — nearly
   twice the height of the whole ladder, which is what made the hero read as a
   wall of text. Capped, and the ladder now leads the eye instead of trailing it. */
h1{font-size:clamp(1.95rem,3.35vw,2.85rem);line-height:1.06;letter-spacing:-.028em}
@media(max-width:960px){ h1{font-size:clamp(1.8rem,5.4vw,2.4rem)} }

/* 4. The footer still started at the page edge (87px) while every content
   container starts at the rail line (262px). The footer has no rail of its own,
   so it must borrow the same offset explicitly: one --rail of empty track, then
   the working area. This is what actually puts the footer back in line. */
.foot-wrap{padding-left:0;padding-right:0}
.foot-wrap{
  padding-left:calc(var(--edge) + var(--rail) + var(--gut));
  padding-right:var(--edge)}
/* and the brand block sits on the content's left edge, not the footer's padding */
.foot-grid > div:first-child{padding-left:0}

/* 5. PROPORTION: the ladder was 496px wide against a 533px text column, and its
   header/footer rows carried less weight than the steps between them. Equal
   tracks plus a heavier head give the panel the same hierarchy as the text. */

/* 6. REGRESSION FIX. The footer rail offset added in (4) applied at EVERY width,
   but the rail is removed below 1180px — so on a phone the footer was pushed
   174px past its container and caused horizontal overflow (434 > 390).
   The rail offset only exists where the rail does. */
@media(max-width:1180px){
  .foot-wrap{padding-left:var(--edge);padding-right:var(--edge)}
}

/* 7. MOBILE OVERFLOW. The comparison table carries min-width:660px, and its
   <caption> sat outside the scroll box, so the caption dragged the whole page
   to 418px inside a 390px viewport. The scroll container now owns its own
   overflow in both axes, and the caption wraps rather than forcing width. */
.cmp{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.cmp > table{min-width:660px;margin:0}
caption{white-space:normal;overflow-wrap:anywhere}
@media(max-width:720px){
  .sched,.sched-row,.curve,.curve-card,.curve-stage,.tool,.prime,.notes,.journal,.close,.anchor,.sched-close{max-width:100%}
}

/* 8. COMPARISON TABLE ON MOBILE. The four-column table cannot fit a phone: at
   390px it is 660px wide inside a 340px box, so 320px — the entire "Layanan
   kami" column that does the selling — sat off-screen behind a scroll. Below
   720px each row becomes a stacked card instead, with each value carrying its
   own column name from data-label. Nothing is hidden and the page never
   scrolls sideways.

   ORDER MATTERS: this must sit after `.cmp > table{min-width:660px}` above, or
   that rule wins the cascade and the table keeps its desktop width. */
@media(max-width:720px){
  .cmp{border:1px solid var(--rule-2);background:var(--paper-2);overflow-x:visible;max-width:100%}
  .cmp > table{min-width:0;width:100%;display:block}
  .cmp caption{display:block;width:100%;max-width:100%;padding:11px 16px;white-space:normal;overflow-wrap:break-word}
  .cmp thead{display:none}
  .cmp tbody,.cmp tfoot{display:block}
  .cmp tbody tr{display:block;border-bottom:2px solid var(--ink);padding:0}
  .cmp tbody tr:last-child{border-bottom:0}
  .cmp tbody td:first-child{display:block;background:var(--paper-3);
    font-weight:700;font-size:.9rem;padding:12px 16px;border-bottom:1px solid var(--ink)}
  .cmp tbody td:not(:first-child){
    display:grid;grid-template-columns:104px minmax(0,1fr);gap:4px 12px;
    align-items:baseline;padding:11px 16px;border-bottom:1px solid var(--rule-hair);
    font-size:.86rem;background-image:none;color:var(--ink-2);font-weight:400}
  .cmp tbody td:not(:first-child):last-child{border-bottom:0}
  .cmp tbody td[data-label]::before{
    content:attr(data-label);font-size:.66rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere;grid-row:1}
  .cmp tbody td b,.cmp tbody td span{grid-column:2}
  .cmp tbody td b{font-size:.84rem}
  .cmp tbody td span{font-size:.76rem}
  .cmp tbody td.us{background:var(--paper-3)}
  .cmp tbody td.us::before{color:var(--credit)}
}

/* 9. MOBILE OVERFLOW, root cause. Two long unbreakable strings escaped their
   grid tracks: .ladder-head > b reached x=395 and .sched-close .v reached x=410
   inside a 390px viewport. minmax(0,1fr) alone does not stop a single long word
   from setting the track's min-content width, so the tracks need explicit
   min-width:0 and the strings need permission to break. */
.curve-head span,.curve-title,.curve-legend,.cf-l,.cf-r,.curve-tag{min-width:0;overflow-wrap:anywhere}
/* The month row is 12 flex items; at 390px its min-content width exceeded the
   card and pushed the whole page sideways. Let it shrink and wrap. */
.curve-months{flex-wrap:wrap;row-gap:2px}
.curve-months span{min-width:0;flex:0 1 auto}
.sched-close > div{min-width:0}
.sched-close .k,.sched-close .v{display:block;min-width:0;overflow-wrap:anywhere}
.tool-out > div{min-width:0}
.tool-out .rec .tier,.tool-out .rec .amt,.tool-out .rec .why,.tool-out .rec .nudge{overflow-wrap:anywhere}
.sched-tier,.sched-fee,.sched-scope{min-width:0}
.sched-tier .t,.sched-fee .amt,.sched-fee .per{overflow-wrap:anywhere}
.foot-grid > div{min-width:0}
.foot-grid a,.foot-grid p{overflow-wrap:anywhere}
.close-grid > div,.close-list li{min-width:0;overflow-wrap:anywhere}
.prime div,.anchor p,.anchor .was,.anchor .now{overflow-wrap:anywhere}
.hero-open,.hero-open h1,.hero-open .lead{min-width:0;overflow-wrap:anywhere}
/* the CTA label on a narrow phone: allow it to wrap instead of pushing width */
.btn{max-width:100%;text-align:center}

/* 9. CASCADE ORDER FIX. The minmax(0,1fr) hardening above was appended AFTER
   the responsive rules, so it won the cascade at every width and the 4-column
   solution ledger never collapsed on a phone: section#solusi measured
   scrollWidth 394 inside clientWidth 342, pushing the document to 418.
   Responsive collapse is re-asserted here, after the hardening, so it wins. */
@media(max-width:1180px){
  .ledger-cols.c4,.ledger-cols.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .ledger-cols.c4,.ledger-cols.c3,.ledger-cols.c2{grid-template-columns:minmax(0,1fr)}
  .ledger-col{border-right:0;border-bottom:1px solid var(--rule)}
}
@media(max-width:960px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   HERO LICENCE STRIP
   The text column ended at 674px while the ladder beside it ran to 860px:
   a 186px gap that left the hero visibly lopsided. This strip closes it with
   the two real licence numbers, which are the strongest verifiable trust
   signal the business owns (PRODUCT.md has no testimonials or client logos).
   It is framed with the same rule grammar as the ladder rows, so the added
   length reads as structure, not as filler.
   ============================================================ */
.hero-licence{margin-top:20px;border-top:1px solid var(--ink);padding-top:0}
.hero-licence .hl-h{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding:13px 0 4px}
.hero-licence ul{list-style:none;margin:0;padding:0}
.hero-licence li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  padding:9px 0;border-bottom:1px solid var(--rule-hair);min-width:0}
.hero-licence li:last-child{border-bottom:1px solid var(--rule-2)}
.hero-licence .who{font-size:.86rem;font-weight:700;color:var(--ink);white-space:nowrap}
.hero-licence .role{font-size:.76rem;color:var(--muted);min-width:0}
.hero-licence .no{margin-left:auto;font-size:.84rem;font-weight:700;color:var(--oxide);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-licence .foot{display:block;padding-top:11px;font-size:.76rem;color:var(--muted)}
.hero-licence .foot a{font-weight:700}
@media(max-width:520px){
  .hero-licence .no{margin-left:0;width:100%}
}

/* Tuned so the text column lands LEVEL with the ladder instead of overshooting
   it: at 211px the strip ran the column 44px past the ladder at 1440. Two
   lines instead of three, tighter rows, and the attribution folds into the
   second row so the block costs ~150px rather than 211px. */
.hero-licence{margin-top:16px}
.hero-licence .hl-h{padding:11px 0 2px}
.hero-licence li{padding:7px 0}
.hero-licence .foot{padding-top:9px}
.hero-licence li:nth-child(2){border-bottom:0}
.hero-licence ul{border-bottom:1px solid var(--rule-2)}
@media(max-width:520px){ .hero-licence .role{display:none} }

/* Narrow-desktop band (1100-1180px): the rail is gone and the text column is at
   its tightest, so the strip ran 63-82px shorter than the ladder. A little more
   breathing room in the rows closes the gap without touching the wide layout. */
@media(min-width:1100px) and (max-width:1180px){
  .hero-licence .hl-h{padding:16px 0 4px}
  .hero-licence li{padding:11px 0}
  .hero-licence .foot{padding-top:13px}
}
@media(min-width:1100px) and (max-width:1180px){
  .hero-licence .hl-h{padding:24px 0 5px}
  .hero-licence li{padding:15px 0}
  .hero-licence .foot{padding-top:17px}
}

/* ============================================================
   HEADER + HERO REFINEMENTS
   ============================================================ */

/* 1. Logo centred on the header's own height. The lockup used
   `align-items:flex-end` and the wordmark a negative margin-bottom
   (a legacy of the old taller brand block), so it sat low in a 76px bar.
   It is now optically centred, and the two-line brand is levelled by centre. */
.header-in{align-items:center}
.brand{align-items:center}
.brand-name{margin-bottom:0}
.brand-mark{gap:calc(21px * var(--s))}
/* the footer lockup keeps its own baseline alignment, which reads correctly there */
.foot-grid a.brand{align-items:center}
.foot-grid .brand-name{margin-bottom:0}

/* 2. The header no longer carries a boxed CTA, so the phone number is the only
   action in the bar. It becomes a real button so the header keeps a clear action. */
.header-cta .wa-inline{border:1px solid var(--ink);padding:9px 15px;min-height:38px;
  display:inline-flex;align-items:center;gap:8px}
.header-cta .wa-inline:hover{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}

/* 3. .prime sat flush against the rule above it. The block needed top padding
   inside its own border rather than a bare bottom-border with no breathing room. */
.prime{padding:18px 0 20px;margin:0 0 24px;border-top:1px solid var(--ink);
  border-bottom:1px solid var(--rule-2)}
.prime div{line-height:1.5}
.prime b{margin-bottom:5px}

/* 4. Anchor figure: the red stripe above the number is gone, so the figure is
   now a single line and no longer needs to be right-aligned against it. */
.anchor .fig{text-align:right}
.anchor .fig .n{font-size:1.25rem;white-space:nowrap}
.anchor .fig .l{display:none}

/* 5. The tool's recommendation block no longer carries a kicker, a why line or a
   boxed CTA; the tier and price alone carry it.
   BUG FIX: this rule used to be `.tool-out .go{display:none}`. The only thing in
   `.go` was the "Ulangi pilihan" reset button, so `display:none` killed the one
   control that undoes a wrong volume pick — main.js kept setting `.hidden`
   correctly while CSS overrode it. The button now lives inside `.rec`, and the
   empty wrapper is removed from the markup entirely. */
.tool-out{grid-template-columns:minmax(0,1fr)}
.tool-head{padding-bottom:10px}

/* Mobile header. Removing the boxed CTA left the phone link as the bar's only
   action on the interior pages, but the old <=640px rule hid the left-side
   .header-cta .wa-inline — so the bar kept its full width and pushed
   scrollW to 500 inside a 390px viewport. On a phone the header now carries
   just the logo and the menu button; every page already has a floating
   WhatsApp action and an inline one in the content. */
@media(max-width:720px){
  .header-cta .wa-inline{display:none}
  .header-cta .btn{display:none}
  .header-cta{gap:8px}
}

/* ============================================================
   HERO LICENCE — number beside the name
   The number used to be flushed right by margin-left:auto, which read as a
   separate right-hand column. It now sits on the name's own line, with the
   specialisation beneath, so each person reads as one block:
       Hilmi Khuluqy   KEP-1110/SK/SK.5/2026
       Spesialis corp tax, dispute, dd corp action, legal opinion
   ============================================================ */
.hero-licence li{display:block;padding:9px 0}
.hero-licence .who,.hero-licence .no{white-space:nowrap}
.hero-licence .hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.hero-licence .hd .who{font-size:.88rem;font-weight:700;color:var(--ink)}
.hero-licence .hd .no{margin-left:0;font-size:.8rem;font-weight:700;color:var(--oxide);
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* the specialisation reads as the sub-line of the same entry, indented to the
   name so the two names form a clean left edge */
.hero-licence .role{display:block;font-size:.74rem;color:var(--muted);margin-top:3px}
.hero-licence .no{width:auto}
.hero-licence ul{border-bottom:0}
/* keep the role visible on phones now that it is a real sub-line */
@media(max-width:520px){
  .hero-licence .role{display:block}
  .hero-licence .hd{gap:6px}
}

/* Re-tune after the restructure. Two changes shifted the balance:
   1. each licence entry grew from 2 lines to 3 (name+number, then role)
   2. the ladder lost its two "Selisih / Belum tertutup" rows (136px)
   The text column was then 86-152px taller than the ladder. The specialisation
   is the least load-bearing line here, so on desktop it is set smaller and the
   rows tighten; the balance returns without touching the numbers or the names. */
.hero-licence{margin-top:12px}
.hero-licence .hl-h{padding:9px 0 1px}
.hero-licence li{padding:6px 0}
.hero-licence .hd .who{font-size:.86rem}
.hero-licence .hd .no{font-size:.76rem}
.hero-licence .role{font-size:.7rem;margin-top:2px;line-height:1.35}
.hero-licence .foot{padding-top:7px;font-size:.72rem}
.hero-licence ul{border-bottom:0}
.hero-licence li:last-child{border-bottom:1px solid var(--rule-2)}
/* the old narrow-band spacer rules assumed the taller block; drop them */
@media(min-width:1100px) and (max-width:1180px){
  .hero-licence .hl-h{padding:9px 0 1px}
  .hero-licence li{padding:6px 0}
  .hero-licence .foot{padding-top:7px}
}
/* still 104-120px tall at wide widths: the gap is in the ladder, not the text.
   Give the ladder's steps the breathing room its rows lost when the two
   resolution rows were removed, so both columns finish together. */
/* final trim: 32px over at the widest, 58px short at 1100 */
@media(min-width:1100px) and (max-width:1180px){
}

/* ============================================================
   TRIMMED: role lines, the audit disclaimer and the "Selisih" pair
   The ladder-foot block is gone entirely (its only content was the removed
   disclaimer plus the stamp, and the stamp moved up into .ladder-resolve).
   ============================================================ */
/* the resolve row now carries one stamp and the three logo bands */
/* the hero licence entries are now two lines each (name + number), so the
   block is shorter: tighten it and let the ladder take the freed space back */
.hero-licence{margin-top:10px}
.hero-licence li{padding:7px 0}
.hero-licence .hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
/* close the last 34-50px by giving the ladder steps their space back */
/* narrow band only: the ladder is the taller column there, so ease its steps */
@media(min-width:1100px) and (max-width:1180px){
}

/* ============================================================
   MENU BUTTON REMOVED
   The button was visible at EVERY width, while .nav is display:none above
   960px — so on desktop it was a control with nothing to operate, which is
   exactly why clicking it appeared to do nothing. It is now gone entirely.
   Desktop reaches every section through the header nav, the docket-tab rail
   and the footer. Below 960px the header nav is hidden, so a plain "Menu"
   text toggle takes its place: no box, but still a real, tappable control.
   ============================================================ */
.menu-text{display:none}         /* only shown where the nav collapses */

@media(max-width:960px){
  /* the header nav collapses; this is its replacement */
  .menu-text{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 6px;
    font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink);background:none;border:0;cursor:pointer;font-family:var(--font)}
  .menu-text::after{content:"+";font-size:1rem;font-weight:700;color:var(--oxide);line-height:1}
  .menu-text[aria-expanded="true"]::after{content:"\2013"}
  .menu-text:hover{color:var(--oxide)}
  /* the collapsed panel; anchored under the bar and closed by default */
  .nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper-2);
    flex-direction:column;gap:0;padding:8px 24px 18px;border-bottom:1px solid var(--ink)}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--rule);min-height:44px;display:flex;
    align-items:center;font-size:.95rem}
}
@media(max-width:720px){
  .nav{top:68px}
}

/* ============================================================
   10. MOBILE PRICE TABLE — final override
   ============================================================
   The price schedule is a 3-column grid on desktop (bracket / scope / fee).
   Two earlier blocks put it back to 3 columns at every width:
   the max-width:720px block far above, and the "sub-pixel drift" block at
   line ~864 which sets `minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)` with no
   media guard. On a 390px phone that left the scope and fee cells 98px wide,
   so "Pajak bulanan: PPh 21, 23, dan 4(2)" broke over six lines, "Rp 3,4 juta"
   broke over three, and the longest string in the fee cell ("per bulan, harga
   tetap") pushed the document 13-39px past the viewport.

   This block sits last in the file so it wins the cascade at phone widths.
   ============================================================ */
@media(max-width:720px){
  .sched-row,
  .sched-row.head{grid-template-columns:minmax(0,1fr)}
  .sched-row > div,
  .sched-row > div:last-child{
    width:100%;min-width:0;border-right:0;
    border-bottom:1px solid var(--rule-hair);padding:14px 16px}
  .sched-row > div:last-child{border-bottom:0}
  .sched-scope,
  .sched-scope .lines,
  .sched-scope .lines li{min-width:0;width:100%;overflow-wrap:break-word}
  .sched-scope{font-size:.86rem;gap:8px}
  .sched-tier{width:100%;min-width:0;padding-bottom:8px}
  /* The figure must never break mid-number and never exceed its cell. */
  .sched-fee{width:100%;min-width:0;background:var(--paper-3);gap:10px;align-items:stretch}
  .sched-fee .amt{font-size:1.55rem;line-height:1.15;white-space:nowrap;
    overflow-wrap:normal;word-break:keep-all;min-width:0}
  .sched-fee .per{white-space:normal;overflow-wrap:break-word;min-width:0;color:var(--ink-2)}
  .sched-fee .btn{width:100%;min-width:0;text-align:center;white-space:normal}
  /* The two fee cells stack; label each one, because the column header is
     display:none at this width and a bare figure would be unattributed.
     `data-price` lives on the inner .amt, not on .sched-fee — select the cell
     that CONTAINS it, or these labels never render. */
  .sched-fee::before{
    display:block;font-size:.62rem;font-weight:700;letter-spacing:.13em;
    text-transform:uppercase;color:var(--muted);margin-bottom:-4px}
  .sched-fee:has([data-price="satu"])::before{content:"Satu layanan"}
  .sched-fee--two::before{content:"Pajak + akuntansi";color:var(--ink-2)}
}
/* Below 360px the fee figure has to step down or it outstrips the cell. */
@media(max-width:360px){
  .sched-fee .amt{font-size:1.35rem}
}

/* ============================================================
   11. MOBILE OVERFLOW — hero headline + month row (final override)
   ============================================================
   At 390px the document ran ~40px past the viewport, so the h1, the lead, the
   header and the whole chart were clipped on the right — which matters most,
   because PRODUCT.md says owners open this on a phone.

   Two causes, both fixed by giving the offending boxes permission to shrink:
     a) `.curve-months` is 12 flex items; its min-content width (12 labels plus
        letter-spacing) exceeded the card and pushed the page wide.
     b) the hero `h1` and `.lead` are long unbroken display strings whose
        min-content width set the grid track wider than the screen.

   This block sits last in the file so it wins the cascade at phone widths. */
@media(max-width:720px){
  .hero-open,.hero-open h1,.hero-open .lead{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .curve-months{flex-wrap:wrap;row-gap:3px;justify-content:space-between}
  .curve-months span{min-width:0;flex:0 1 auto;overflow-wrap:anywhere}
  .curve-legend{flex-wrap:wrap;row-gap:4px}
  .curve-head,.curve-foot{flex-wrap:wrap}
  .curve-head > *,.curve-foot > *{min-width:0;max-width:100%}
}