:root{
  --ink:#101012;
  --text:#1d1d1f;
  --muted:#6e6e73;
  --line:#dfe4ea;
  --soft:#f5f6f8;
  --soft-2:#eef3f8;
  --blue:#0866d8;
  --blue-dark:#082a52;
  --blue-soft:#eaf3ff;
  --yellow:#ffd84a;
  --green:#188038;
  --green-soft:#edf8f0;
  --amber:#9a6100;
  --amber-soft:#fff5dc;
  --red:#c9342f;
  --red-soft:#fff0ef;
  --white:#fff;
  --nav-h:58px;
  --max:1180px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Arial,sans-serif;
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 18px);
}

body{
  margin:0;
  min-height:100vh;
  padding-top:var(--nav-h);
  overflow-x:hidden;
  background:#fff;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}

/* ================= HEADER ================= */
.mobile-nav-checkbox{
  position:fixed;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.site-nav{
  position:fixed;
  z-index:1500;
  top:0;
  right:0;
  left:0;
  min-height:var(--nav-h);
  border-bottom:1px solid rgba(0,0,0,.065);
  background:rgba(255,255,255,.97);
}

.nav-inner{
  width:min(var(--max),calc(100% - 36px));
  min-height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin:0 auto;
}

.nav-brand{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
  color:#111;
  font-size:13px;
  font-weight:760;
  white-space:nowrap;
}
.brand-logo{width:auto;height:20px;object-fit:contain}

.desktop-menu{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:center;
  gap:27px;
}
.desktop-menu a{
  position:relative;
  min-height:var(--nav-h);
  display:inline-flex;
  align-items:center;
  color:#515154;
  font-size:12px;
  font-weight:560;
  white-space:nowrap;
}
.desktop-menu a::after{
  position:absolute;
  right:0;
  bottom:10px;
  left:0;
  height:1.5px;
  background:#111;
  content:"";
  opacity:0;
  transform:scaleX(.35);
  transition:opacity .2s ease,transform .2s ease;
}
.desktop-menu a:hover,
.desktop-menu a[aria-current="page"]{color:#000}
.desktop-menu a:hover::after,
.desktop-menu a[aria-current="page"]::after{
  opacity:1;
  transform:scaleX(1);
}

.nav-hotnews{
  display:inline-flex!important;
  align-items:center;
  gap:7px!important;
}
.nav-hotnews-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#ff3b30;
  box-shadow:0 0 0 0 rgba(255,59,48,.34);
  animation:refundHotPulse 2.1s ease-out infinite;
}
@keyframes refundHotPulse{
  0%{box-shadow:0 0 0 0 rgba(255,59,48,.34)}
  60%,100%{box-shadow:0 0 0 7px rgba(255,59,48,0)}
}

.nav-actions{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
}
.nav-cta{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 15px;
  border-radius:999px;
  background:var(--blue-dark);
  color:#fff;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.nav-cta:hover{background:#061f3d}

.menu-toggle{
  width:38px;
  height:38px;
  display:none;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#111;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.menu-icon-close{display:none}

.mobile-menu{
  position:fixed;
  z-index:1450;
  top:var(--nav-h);
  right:0;
  bottom:0;
  left:0;
  height:calc(100vh - var(--nav-h));
  height:calc(100dvh - var(--nav-h));
  overflow-y:auto;
  padding:26px 24px 44px;
  background:#fff;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
#mobileNavToggle:checked ~ .mobile-menu{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:none;
}
#mobileNavToggle:checked ~ .site-nav .menu-icon-open{display:none}
#mobileNavToggle:checked ~ .site-nav .menu-icon-close{display:block}

.mobile-menu a{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:15px 0;
  border-bottom:1px solid #ededf0;
  color:#1d1d1f;
  font-size:clamp(24px,7vw,34px);
  font-weight:720;
  letter-spacing:-.045em;
  line-height:1.05;
}
.mobile-menu a[aria-current="page"]{color:var(--blue)}
.mobile-menu-index{
  color:#a1a1a6;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}
.mobile-hot-dot{
  width:8px;
  height:8px;
  justify-self:end;
  border-radius:50%;
  background:#ff3b30;
}
.mobile-menu .mobile-menu-cta{
  grid-template-columns:minmax(0,1fr) auto;
  margin-top:22px;
  padding:17px 19px;
  border:0;
  border-radius:18px;
  background:var(--blue-dark);
  color:#fff;
  font-size:18px;
  letter-spacing:-.025em;
}

/* ================= HERO ================= */
.page-root{padding-top:0}

.hero{
  position:relative;
  overflow:hidden;
  padding:58px 24px 62px;
  border-bottom:1px solid #dce3eb;
  background:
    radial-gradient(circle at 82% 18%,rgba(255,216,74,.24),transparent 22%),
    linear-gradient(135deg,#fff 0%,#f8fbff 56%,#eaf3ff 100%);
}
.hero::before{
  position:absolute;
  top:-80px;
  right:-110px;
  width:690px;
  height:580px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.22)),
    url("assets/img/mega-mendung-cirebon.webp") center/cover no-repeat;
  content:"";
  opacity:.12;
  pointer-events:none;
}

.hero-grid{
  position:relative;
  z-index:1;
  width:min(var(--max),100%);
  min-height:500px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  align-items:center;
  gap:clamp(46px,6vw,88px);
  margin:0 auto;
}

.hero-copy{min-width:0}

.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 22px;
  color:var(--blue);
  font-size:11px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.eyebrow::before{
  width:34px;
  height:2px;
  background:currentColor;
  content:"";
}

.hero h1{
  max-width:820px;
  margin:0;
  color:#111;
  font-size:clamp(54px,6.6vw,88px);
  font-weight:770;
  letter-spacing:-.067em;
  line-height:.92;
}
.gradient-text{
  display:block;
  color:var(--blue);
}

.hero-description{
  max-width:720px;
  margin:25px 0 0;
  color:#424950;
  font-size:clamp(18px,2vw,22px);
  line-height:1.5;
  letter-spacing:-.025em;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}
.hero-cta{
  min-height:43px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 17px;
  border:1px solid #c7cdd5;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}
.hero-cta-primary{
  border-color:var(--blue-dark);
  background:var(--blue-dark);
  color:#fff;
}
.hero-cta-primary:hover{background:#061f3d}
.hero-cta-secondary{
  background:#fff;
  color:#25272b;
}

.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 11px;
  border:1px solid #d5dfe9;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#4a545f;
  font-size:11px;
  font-weight:670;
}
.hero-pill::before{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--blue);
  content:"";
}

.hero-visual{
  position:relative;
  min-height:390px;
  display:grid;
  place-items:center;
}
.hero-kabayan{
  width:min(430px,100%);
  border-radius:28px;
  box-shadow:0 28px 60px rgba(8,42,82,.14);
}

/* ================= APP ================= */
.app-section{
  padding:76px 20px 96px;
  background:var(--soft);
}

.app-shell{
  width:min(var(--max),100%);
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(300px,.68fr);
  gap:24px;
  margin:0 auto;
  padding:0;
}

.wizard{
  overflow:hidden;
  border:1px solid #dce2e8;
  border-radius:27px;
  background:#fff;
  box-shadow:0 20px 54px rgba(8,42,82,.07);
}

.progress-wrap{
  padding:23px 30px 21px;
  border-bottom:1px solid #e4e7eb;
  background:#fbfcfd;
}
.progress-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:11px;
  color:#777d84;
  font-size:11px;
  font-weight:700;
}
.progress-meta span:last-child{color:var(--blue)}
.progress-track{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#e1e6ec;
}
.progress-bar{
  height:100%;
  width:20%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--yellow),#ffcf22 28%,var(--blue) 100%);
  transition:width .25s ease;
}

/* Tahapan */
.step{
  display:none;
  padding:34px 32px 28px;
}
.step.active{
  display:block;
  animation:refundFade .18s ease;
}
@keyframes refundFade{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

.step-head{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:start;
  gap:16px;
  margin-bottom:29px;
}
.step-number{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:var(--yellow);
  color:#332900;
  font-size:14px;
  font-weight:850;
}
.step h2{
  margin:0;
  color:#111;
  font-size:clamp(29px,4vw,42px);
  font-weight:750;
  letter-spacing:-.045em;
  line-height:1.05;
}
.step-head p{
  max-width:720px;
  margin:9px 0 0;
  color:#6d747b;
  font-size:14px;
  line-height:1.52;
}

.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:19px;
}
.grid.one{grid-template-columns:1fr}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.field.full{grid-column:1/-1}
.label{
  display:block;
  margin-bottom:8px;
  color:#30343a;
  font-size:13px;
  font-weight:720;
}
.hint{
  display:block;
  margin-top:7px;
  color:#727981;
  font-size:11px;
  line-height:1.45;
}

input[type="date"],
input[type="number"],
input[type="text"],
select{
  width:100%;
  min-height:52px;
  padding:11px 14px;
  border:1px solid #d3dae3;
  border-radius:14px;
  outline:none;
  background:#fff;
  color:#1d1d1f;
  font-size:15px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
input:focus,
select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(8,102,216,.10);
}

.currency-control{
  display:flex;
  align-items:center;
  min-height:52px;
  overflow:hidden;
  border:1px solid #d3dae3;
  border-radius:14px;
  background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.currency-control:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(8,102,216,.10);
}
.currency-prefix{
  align-self:stretch;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-right:1px solid #e1e5ea;
  background:#f5f7f9;
  color:#4d5965;
  font-size:13px;
  font-weight:750;
}
.currency-control .rupiah-input{
  min-height:50px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Pilihan utama */
.selection-help{
  display:block;
  margin:2px 0 13px;
  color:#717880;
  font-size:11px;
  line-height:1.45;
}
.option-fieldset{
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.option-legend{
  width:100%;
  margin-bottom:0;
  padding:0;
}
.option-grid{
  display:grid;
  gap:11px;
}
.option-grid-three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.option-card{
  position:relative;
  min-height:142px;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  align-items:start;
  gap:12px;
  padding:17px;
  border:1px solid #dce2e8;
  border-radius:18px;
  background:#fff;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.option-card:hover{
  border-color:#9fbddd;
  transform:translateY(-1px);
}
.option-card:has(.option-card__input:checked){
  border-color:var(--blue);
  background:#eef6ff;
  box-shadow:0 0 0 3px rgba(8,102,216,.07);
}
.option-card__input{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
.option-card__marker{
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  margin-top:1px;
  border:1.5px solid #b7bec7;
  border-radius:50%;
  background:#fff;
}
.option-card__dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:transparent;
  transform:scale(0);
}
.option-card__input:checked~.option-card__marker{
  border-color:var(--blue);
}
.option-card__input:checked~.option-card__marker .option-card__dot{
  background:var(--blue);
  transform:scale(1);
}
.option-card__eyebrow{
  display:block;
  margin-bottom:7px;
  color:var(--blue);
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.option-card__title{
  display:block;
  color:#171719;
  font-size:14px;
  font-weight:730;
  line-height:1.32;
}
.option-card__desc{
  display:block;
  margin-top:7px;
  color:#6e747b;
  font-size:11px;
  line-height:1.45;
}

/* Pilihan Ya/Tidak */
.segmented{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.segmented label{
  min-height:39px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border:1px solid #d4dbe3;
  border-radius:999px;
  background:#fff;
  color:#444c55;
  font-size:12px;
  font-weight:680;
  cursor:pointer;
}
.segmented input[type="radio"]{
  position:static;
  width:16px;
  height:16px;
  margin:0;
  opacity:1;
  pointer-events:auto;
  accent-color:var(--blue);
}
.segmented label:has(input:checked){
  border-color:var(--blue);
  background:var(--blue-soft);
  color:#0756ac;
}

.section-card,
.activity-group{
  margin-top:19px;
  padding:20px;
  border:1px solid #e0e4e9;
  border-radius:18px;
  background:#fafbfc;
}
.section-card h3,
.activity-group-title h4{
  margin:0;
  color:#22262b;
}
.section-card h3{
  margin-bottom:15px;
  font-size:17px;
  letter-spacing:-.025em;
}
.activity-group-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}
.activity-group-title h4{font-size:14px}
.activity-group-title span{
  padding:5px 9px;
  border-radius:999px;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:9px;
  font-weight:780;
  white-space:nowrap;
}
.activity-group.excluded .activity-group-title span{
  background:#ededf0;
  color:#666d74;
}
.activity-inputs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.activity-inputs .field{
  padding:12px;
  border:1px solid #e3e7eb;
  border-radius:14px;
  background:#fff;
}

.conditional{display:none}
.conditional.show{
  display:block;
  animation:refundFade .16s ease;
}
#calculationReadyBlock:not(.show){display:none}

.question-list{
  display:grid;
  gap:10px;
}
.yn-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(245px,auto);
  gap:16px;
  align-items:center;
  padding:15px 16px;
  border:1px solid #e1e5ea;
  border-radius:16px;
  background:#fff;
}
.yn-row strong{
  display:block;
  color:#30343a;
  font-size:13px;
  line-height:1.44;
}
.yn-row small{
  display:block;
  margin-top:4px;
  color:#727981;
  font-size:11px;
  line-height:1.42;
}

/* Notices */
.notice{
  margin:17px 0;
  padding:13px 14px;
  border-radius:14px;
  font-size:12px;
  line-height:1.52;
}
.notice.info{
  border:1px solid #cfe2f8;
  background:#eef6ff;
  color:#36516f;
}
.notice.warn{
  border:1px solid #f0d48f;
  background:var(--amber-soft);
  color:#714700;
}
.notice.danger{
  border:1px solid #efc3c0;
  background:var(--red-soft);
  color:#8b2a27;
}
.notice.success{
  border:1px solid #cce4d2;
  background:var(--green-soft);
  color:#226536;
}

.formula-panel{
  margin-top:16px;
  overflow:hidden;
  border:1px solid #cfe0f2;
  border-radius:17px;
  background:#f8fbff;
}
.formula-line{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:13px 15px;
  border-bottom:1px solid #dce8f6;
  font-size:12px;
  line-height:1.45;
}
.formula-line strong{
  white-space:nowrap;
  color:#315b89;
}
.formula-line.excluded{
  background:#f7f7f8;
  color:#6e6e73;
}
.formula-result{
  padding:17px 15px;
  background:var(--blue-soft);
}
.formula-result-label{
  color:#41658f;
  font-size:10px;
  font-weight:780;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.formula-result-value{
  margin-top:3px;
  color:var(--blue-dark);
  font-size:34px;
  font-weight:780;
  letter-spacing:-.045em;
}
.formula-result-note{
  margin-top:4px;
  color:#52657e;
  font-size:12px;
  line-height:1.5;
}

/* Actions */
.wizard-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:20px 32px 28px;
  border-top:1px solid #e3e7eb;
  background:#fbfcfd;
}
.btn{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:13px;
  font-weight:720;
}
.btn-primary{
  border-color:var(--blue-dark);
  background:var(--blue-dark);
  color:#fff;
}
.btn-primary:hover{background:#061f3d}
.btn-secondary{
  border-color:#cdd4dc;
  background:#fff;
  color:#404851;
}
.btn-ghost{
  border-color:var(--blue);
  background:transparent;
  color:var(--blue);
}
.btn-danger{
  border-color:var(--red);
  background:var(--red);
  color:#fff;
}
.hidden{display:none!important}

.error-box{
  display:none;
  margin:0 32px 4px;
  padding:13px 15px;
  border:1px solid #efc3c0;
  border-radius:14px;
  background:var(--red-soft);
  color:#8b2a27;
  font-size:12px;
  line-height:1.5;
}
.error-box.show{display:block}

/* ================= SIDE RAIL ================= */
.info-column{
  display:grid;
  align-content:start;
  gap:14px;
}
.info-card{
  padding:22px;
  border:1px solid #dde3e9;
  border-radius:21px;
  background:#fff;
}
.info-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  margin-bottom:15px;
  border-radius:13px;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:16px;
  font-weight:800;
}
.info-card h3{
  margin:0;
  color:#171719;
  font-size:17px;
  letter-spacing:-.025em;
}
.info-card p{
  margin:9px 0 0;
  color:#6f767e;
  font-size:12px;
  line-height:1.55;
}
.rule-date{
  margin:10px 0 2px;
  color:var(--blue);
  font-size:34px;
  font-weight:790;
  letter-spacing:-.045em;
}
.rule-list{
  display:grid;
  gap:9px;
  margin-top:15px;
}
.rule-item{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:8px;
  color:#555e68;
  font-size:11px;
  line-height:1.42;
}
.rule-number{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#f1f3f6;
  color:#2b333b;
  font-size:9px;
  font-weight:790;
}
.side-action{width:100%;margin-top:16px}

/* ================= RESULTS ================= */
.result-hero{
  position:relative;
  overflow:hidden;
  margin-bottom:20px;
  padding:28px;
  border-radius:22px;
  color:#fff;
}
.result-hero::after{
  position:absolute;
  right:-45px;
  bottom:-80px;
  width:200px;
  height:200px;
  border:44px solid rgba(255,255,255,.10);
  border-radius:50%;
  content:"";
}
.result-hero.success{background:linear-gradient(135deg,#176c3b,#248a3d 58%,#63b579)}
.result-hero.warn{background:linear-gradient(135deg,#7c4a00,#a96900 58%,#d68b24)}
.result-hero.danger{background:linear-gradient(135deg,#8f2825,#c9342f 58%,#e0716d)}
.result-kicker{
  position:relative;
  z-index:1;
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.result-title{
  position:relative;
  z-index:1;
  max-width:800px;
  margin:11px 0 8px;
  font-size:clamp(30px,4.5vw,46px);
  font-weight:760;
  letter-spacing:-.05em;
  line-height:1.02;
}
.result-subtitle{
  position:relative;
  z-index:1;
  max-width:780px;
  color:rgba(255,255,255,.86);
  font-size:14px;
  line-height:1.5;
}
.route-list{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.route-card{
  padding:19px;
  border:1px solid #dfe4ea;
  border-radius:18px;
  background:#fff;
}
.route-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.route-name{
  color:#171719;
  font-size:17px;
  font-weight:740;
  letter-spacing:-.025em;
}
.route-time{
  padding:6px 9px;
  border-radius:999px;
  background:#fff4bd;
  color:#554300;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}
.route-card p{
  margin:8px 0 0;
  color:#6d747b;
  font-size:12px;
  line-height:1.55;
}
.route-card ul,
.result-list{
  margin:11px 0 0;
  padding-left:19px;
  color:#4b545d;
  font-size:12px;
  line-height:1.6;
}
.result-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.result-box{
  padding:19px;
  border:1px solid #dfe4ea;
  border-radius:18px;
  background:#fff;
}
.result-box h3{
  margin:0 0 11px;
  color:#171719;
  font-size:16px;
  letter-spacing:-.02em;
}
.ratio-display{
  color:var(--blue-dark);
  font-size:34px;
  font-weight:780;
  letter-spacing:-.045em;
}

.component-table{
  width:100%;
  margin-top:10px;
  border-collapse:collapse;
  font-size:11px;
}
.component-table th,
.component-table td{
  padding:9px 7px;
  border-bottom:1px solid #e5e8ec;
  text-align:left;
  vertical-align:top;
}
.component-table th{
  color:#737a82;
  font-size:9px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.component-table th:last-child,
.component-table td:last-child{
  text-align:right;
  white-space:nowrap;
}
.component-table tr.total td{
  border-top:2px solid #cfe1f3;
  color:#315b89;
  font-weight:780;
}

/* ================= LEGAL ================= */
.legal-section{
  padding:0 20px 84px;
  background:var(--soft);
}
.legal-panel{
  width:min(var(--max),100%);
  margin:0 auto;
  padding:28px;
  border:1px solid #dce2e8;
  border-radius:26px;
  background:#fff;
}
.legal-panel summary{
  cursor:pointer;
  color:#111;
  font-size:clamp(26px,3vw,38px);
  font-weight:750;
  letter-spacing:-.04em;
}
.legal-panel summary::before{
  display:block;
  margin-bottom:9px;
  color:var(--blue);
  content:"05 / REFERENSI";
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
}
.legal-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
  margin-top:20px;
}
.legal-card{
  padding:17px;
  border:1px solid #e1e5e9;
  border-radius:16px;
  background:#fff;
}
.legal-card h3{
  margin:0 0 8px;
  color:#22262b;
  font-size:14px;
}
.legal-card p,
.legal-card li{
  color:#717880;
  font-size:11px;
  line-height:1.55;
}
.legal-card ul{margin:0;padding-left:18px}
.legal-card a{color:var(--blue)}
.legal-card a:hover{text-decoration:underline}

/* ================= FOOTER ================= */
.site-footer{
  padding:28px 20px 34px;
  border-top:1px solid #e2e5e9;
  background:#f5f5f7;
}
.footer-inner{
  width:min(var(--max),100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0 auto;
  color:#707077;
  font-size:11px;
  line-height:1.55;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:8px;
  color:#1d1d1f;
  font-weight:730;
}
.footer-logo{width:auto;height:20px}
.footer-links{display:flex;flex-wrap:wrap;gap:14px}
.footer-links a{color:#4b4b50}
.footer-links a:hover{text-decoration:underline}

/* Print summary retained */
.print-only{display:none}
.print-summary{margin-bottom:28px}
.print-summary-title{
  margin:0 0 6px;
  color:#1d1d1f;
  font-size:30px;
  font-weight:800;
  letter-spacing:-.03em;
}
.print-summary-subtitle{
  margin:0 0 22px;
  color:#6e6e73;
  font-size:13px;
}
.print-stage{
  margin:0 0 20px;
  padding:18px;
  border:1px solid #d2d2d7;
  border-radius:16px;
  background:#fff;
  break-inside:avoid;
}
.print-stage h3{margin:0 0 12px;font-size:17px;color:#1d1d1f}
.print-table{width:100%;border-collapse:collapse;font-size:12px}
.print-table th,.print-table td{
  padding:8px 7px;
  border-bottom:1px solid #e8e8ed;
  text-align:left;
  vertical-align:top;
}
.print-table th{width:48%;font-weight:700;color:#3a3a3c}
.print-table td{color:#1d1d1f}
.print-table tr:last-child th,
.print-table tr:last-child td{border-bottom:0}
.print-divider{height:1px;background:#d2d2d7;margin:24px 0}

/* ================= RESPONSIVE ================= */
@media(max-width:1040px){
  .app-shell{grid-template-columns:1fr}
  .info-column{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:960px){
  .desktop-menu,
  .nav-cta{display:none}
  .menu-toggle{display:grid}
  .nav-inner{width:calc(100% - 28px)}

  .hero-grid{
    min-height:0;
    grid-template-columns:1fr;
    gap:27px;
  }
  .hero-visual{
    width:min(520px,100%);
    min-height:0;
    justify-self:start;
  }
}

@media(max-width:820px){
  .option-grid-three,
  .info-column{
    grid-template-columns:1fr;
  }
  .option-card{min-height:auto}
  .result-columns{grid-template-columns:1fr}
}

@media(max-width:700px){
  :root{--nav-h:54px}

  .hero{padding:38px 18px 44px}
  .hero h1{font-size:clamp(46px,13vw,62px)}
  .hero-description{margin-top:19px;font-size:17px}
  .hero-visual{width:min(400px,100%)}
  .hero-kabayan{border-radius:20px}

  .app-section{padding:50px 12px 68px}
  .wizard{border-radius:21px}
  .progress-wrap{padding:18px}
  .step{padding:27px 18px 22px}
  .step-head{
    grid-template-columns:42px minmax(0,1fr);
    gap:13px;
  }
  .step-number{
    width:40px;
    height:40px;
    border-radius:13px;
  }
  .wizard-actions{
    padding:17px 18px 22px;
  }
  .error-box{margin:0 18px 4px}

  .grid,
  .grid.three,
  .activity-inputs,
  .legal-grid{
    grid-template-columns:1fr;
  }
  .field.full{grid-column:auto}
  .yn-row{grid-template-columns:1fr}
  .segmented{align-items:stretch}
  .segmented label{
    flex:1 1 auto;
    justify-content:center;
  }
  .legal-section{padding:0 12px 64px}
  .legal-panel{
    padding:22px 18px;
    border-radius:21px;
  }
  .route-top{flex-direction:column}
  .footer-inner{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(max-width:440px){
  .hero-pills{
    align-items:stretch;
    flex-direction:column;
  }
  .hero-pill{justify-content:center}
  .hero-actions,
  .wizard-actions{
    align-items:stretch;
    flex-direction:column;
  }
  .btn,.hero-cta{width:100%}
  .wizard-actions>div{display:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

@media print{
  body{padding-top:0;background:#fff}
  .site-nav,
  .mobile-menu,
  .mobile-nav-checkbox,
  .hero,
  .info-column,
  .progress-wrap,
  .wizard-actions,
  .legal-section,
  .site-footer,
  .error-box{
    display:none!important;
  }
  .app-section{padding:0}
  .app-shell{display:block;width:100%}
  .wizard{border:0;box-shadow:none}
  .step{display:none!important;padding:0}
  #step-5{display:block!important}
  .print-only{display:block!important}
  .step-head{display:none!important}
  .result-hero,.route-card,.result-box,.notice{box-shadow:none!important}
  .route-card,.result-box,.result-hero,.print-stage{break-inside:avoid}
  .result-columns{display:block}
  .result-box{margin-bottom:14px}
  .component-table{font-size:10.5px}
  .component-table th,.component-table td{padding:6px}
  @page{size:A4;margin:14mm}
}