/* BijakDana — result page, couture system. Prefixed cx-* to avoid collisions. */
.cx{
  --ground:#F6F4F9; --surface:#FFFFFF; --ink:#1A1020;
  --muted:#6E6878; --faint:#9A95A6; --line:#ECE8F1;
  --purple:#4A2D82; --purple-tint:#F1ECF8; --gold:#B8934E; --green:#2E7D55;
  --shadow:0 1px 2px rgba(26,16,32,.03), 0 18px 40px -16px rgba(74,45,130,.16);
  --t-micro:11px; --t-small:13px; --t-body:15px; --t-lg:18px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:56px;
  --r-card:20px; --r-chip:14px;
}
.cx{background:var(--ground);color:var(--ink);min-height:100vh;}
.cx ::selection{background:rgba(74,45,130,.14);}
.cx-num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum';}
.cx-wrap{max-width:600px;margin:0 auto;padding:var(--s4) var(--s3) var(--s6);}

.cx-top{display:flex;justify-content:space-between;align-items:center;padding:var(--s1) 2px var(--s5);}
.cx-mark{font-weight:700;letter-spacing:-.02em;font-size:17px;color:var(--ink);text-decoration:none;}
.cx-lang{font-size:var(--t-small);color:var(--muted);font-weight:500;cursor:pointer;background:none;border:0;}
.cx-eyebrow{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;}

.cx-reveal{opacity:0;transform:translateY(12px);animation:cxUp .7s cubic-bezier(.16,1,.3,1) forwards;}
.cx-d1{animation-delay:.06s}.cx-d2{animation-delay:.12s}.cx-d3{animation-delay:.18s}.cx-d4{animation-delay:.24s}.cx-d5{animation-delay:.30s}
@keyframes cxUp{to{opacity:1;transform:none;}}

.cx-hero{padding:2px 2px var(--s4);}
.cx-bizname{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:7px;}
.cx-hero .cx-label{margin-bottom:var(--s2);}
.cx-value{font-size:clamp(40px,12vw,62px);font-weight:600;letter-spacing:-.04em;color:var(--purple);line-height:1.0;}
.cx-ctx{margin-top:var(--s2);font-size:var(--t-body);color:var(--muted);}
.cx-ctx b{color:var(--ink);font-weight:550;}
.cx-readiness{margin-top:var(--s3);display:inline-flex;align-items:center;gap:10px;padding:9px 14px;background:var(--surface);border:1px solid var(--line);border-radius:999px;font-size:var(--t-small);color:var(--muted);box-shadow:var(--shadow);}
.cx-readiness b{color:var(--ink);font-weight:600;}
.cx-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto;}

.cx-card-surface{margin:0 0 var(--s5);padding:var(--s3);background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);}
.cx-k{display:flex;align-items:center;gap:8px;margin-bottom:var(--s3);}
.cx-k .cx-eyebrow{color:var(--purple);}

/* the gap */
.cx-gap-ends{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:11px;}
.cx-gap-end .cx-lbl{display:block;font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--faint);margin-bottom:3px;}
.cx-gap-end .cx-v{font-weight:600;font-size:var(--t-body);color:var(--muted);}
.cx-gap-end.def{text-align:right;}
.cx-gap-end.def .cx-v{color:var(--ink);}
.cx-gap-track{position:relative;height:12px;border-radius:999px;background:#EFECF4;overflow:hidden;}
.cx-gap-base{position:absolute;left:0;top:0;bottom:0;background:#D6CFE3;border-radius:999px;}
.cx-gap-fill{position:absolute;top:0;bottom:0;width:0;background:var(--purple);border-radius:999px;transition:width 1.05s cubic-bezier(.16,1,.3,1);}
.cx-gap-foot{margin-top:var(--s3);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.cx-gap-amount{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--gold);}
.cx-gap-cap{font-size:var(--t-small);color:var(--muted);line-height:1.45;flex:1;min-width:160px;}

/* the read */
.cx-read p{font-size:16px;line-height:1.62;letter-spacing:-.005em;color:var(--ink);}

.cx-section-h{margin:var(--s1) 2px 4px;font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.cx-section-sub{margin:0 2px var(--s3);font-size:var(--t-body);color:var(--muted);}
.cx-cards{display:flex;flex-direction:column;gap:12px;}
.cx-card{display:flex;align-items:center;gap:16px;background:var(--surface);border-radius:var(--r-card);padding:18px;box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);}
.cx-card:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(26,16,32,.03), 0 26px 50px -18px rgba(74,45,130,.26);}
.cx-card:focus-visible{outline:2px solid var(--purple);outline-offset:3px;}
.cx-card.cx-lead{box-shadow:0 1px 2px rgba(26,16,32,.03), 0 22px 46px -16px rgba(74,45,130,.22);}
.cx-card.cx-lead .cx-chip{background:var(--purple);}
.cx-card.cx-lead .cx-chip .material-symbols-rounded{color:#fff;}
.cx-chip{flex:0 0 auto;width:46px;height:46px;border-radius:var(--r-chip);background:var(--purple-tint);display:flex;align-items:center;justify-content:center;transition:background .3s;}
.cx-chip .material-symbols-rounded{color:var(--purple);font-size:24px;}
.cx-card .cx-t{flex:1;}
.cx-card .cx-t .cx-h{font-size:15.5px;font-weight:560;letter-spacing:-.01em;}
.cx-card .cx-t .cx-s{font-size:var(--t-small);color:var(--muted);margin-top:2px;}
.cx-card .cx-go{color:var(--faint);font-size:20px;transition:color .3s, transform .3s;}
.cx-card:hover .cx-go{color:var(--purple);transform:translateX(3px);}

/* secondary: full breakdown email */
.cx-more{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);}
.cx-more .cx-h{font-size:var(--t-body);font-weight:600;}
.cx-more .cx-s{font-size:var(--t-small);color:var(--muted);margin:4px 0 14px;}
.cx-field{display:flex;gap:8px;}
.cx-field input{flex:1;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:var(--t-body);color:var(--ink);outline:none;transition:border-color .2s, box-shadow .2s;}
.cx-field input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-tint);}
.cx-field input::placeholder{color:var(--faint);}
.cx-field button{border:0;background:var(--purple);color:#fff;border-radius:12px;padding:0 18px;font-family:inherit;font-size:var(--t-body);font-weight:550;cursor:pointer;transition:transform .15s, opacity .2s;}
.cx-field button:active{transform:scale(.97);}
.cx-field button[disabled]{opacity:.4;cursor:not-allowed;}
.cx-err{font-size:var(--t-small);color:#B42318;margin-top:10px;}

.cx-disclaimer{margin-top:var(--s5);font-size:11.5px;color:var(--faint);line-height:1.6;}

@media (prefers-reduced-motion: reduce){
  .cx-reveal{animation:none;opacity:1;transform:none;}
  .cx-gap-fill{transition:none;}
}
