:root{
        --bg:#FBF7EF;
        --header:#F5F0E6;
        --header-line:#E7DFD1;
        --card:#FFFFFF;
        --line:#EAE3D6;
        --input-line:#E3DCCF;
        --modal:#FFFCF5;
        --ink:#221E19;
        --body:#4A443C;
        --muted:#6B6257;
        --terra:#BB5A32;
        --terra-dark:#A85A32;
        --terra-shadow:0 6px 16px rgba(187,90,50,.25);
        --sage:#7A9A82;
        --sage-dark:#44654F;
        --sage-soft:#EAF2EC;
        --pill:#F1E8D8;
        --danger:#C0392B;
        --danger-soft:#F9E9E5;
        --ok:#44654F;
        --ok-soft:#EAF2EC;
        --warn:#9A6A12;
        --warn-soft:#FAF0D7;
        --shadow:0 2px 10px rgba(34,30,25,.05);
      }
      *{box-sizing:border-box}
      html{scroll-behavior:smooth}
      body{
        margin:0;background:var(--bg);color:var(--body);
        font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
        font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
      }
      h1,h2,h3{font-family:"Fraunces",Georgia,serif;color:var(--ink);margin:0}
      p{margin:0}
      .wrap{max-width:680px;margin:0 auto;padding:0 20px}
      section{padding:30px 0}
      .eyebrow{
        display:block;font-size:12px;font-weight:800;text-transform:uppercase;
        letter-spacing:.14em;color:var(--terra-dark);margin-bottom:10px;
      }
      /* ---------- HEADER ---------- */
      .site-header{
        position:sticky;top:0;z-index:50;background:var(--header);
        border-bottom:1px solid var(--header-line);
      }
      .header-in{display:flex;align-items:center;justify-content:space-between;height:60px}
      .logo{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:20px;color:var(--ink)}
      /* ---------- BUTTONS ---------- */
      .btn{
        display:inline-flex;align-items:center;justify-content:center;gap:8px;
        background:var(--terra);color:#fff;border:none;cursor:pointer;
        font-family:inherit;font-size:16px;font-weight:700;
        padding:13px 26px;border-radius:999px;text-decoration:none;
        box-shadow:var(--terra-shadow);
        transition:background .15s ease;
      }
      .btn:hover{background:var(--terra-dark)}
      .btn.small{padding:9px 18px;font-size:14.5px}
      .btn.block{width:100%}
      .btn.ghost{
        background:transparent;color:var(--ink);border:1.5px solid var(--sage);
        box-shadow:none;
      }
      .btn.ghost:hover{background:var(--sage-soft)}
      .btn:disabled{opacity:.55;cursor:not-allowed}
      .nanti{
        display:block;text-align:center;margin-top:12px;font-size:14.5px;
        color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:none;font-family:inherit;width:100%;
      }
      /* ---------- HERO ---------- */
      .hero{padding:44px 0 26px}
      .hero-img{
        display:block;width:100%;max-width:100%;height:auto;
        border-radius:18px;border:1px solid var(--line);
        box-shadow:var(--shadow);margin-bottom:26px;
      }
      .hero h1{font-size:34px;font-weight:900;line-height:1.12;margin:0 0 14px;letter-spacing:-.01em}
      .hero h1 .hl{color:var(--terra);font-style:italic}
      .hero .lead{font-size:17px;line-height:1.6;color:var(--body)}
      .hero-cta{margin-top:22px}
      .micro{font-size:13.5px;color:var(--muted);margin-top:12px}
      .safety-note{
        margin-top:24px;background:var(--card);border:1px solid var(--line);
        border-radius:16px;padding:18px 20px;font-size:14.5px;color:var(--body);
        box-shadow:var(--shadow);
      }
      .safety-note strong{color:var(--ink)}
      /* ---------- SECTION HEAD / CARDS ---------- */
      .sec-head{margin-bottom:22px}
      .sec-head h2{font-size:28px;font-weight:800;line-height:1.2;margin-bottom:8px}
      .sec-head p{color:var(--body);font-size:16px}
      .card{
        background:var(--card);border:1px solid var(--line);border-radius:18px;
        box-shadow:var(--shadow);padding:22px;margin-bottom:14px;
      }
      .card-label{
        display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;
        letter-spacing:.13em;color:var(--sage-dark);margin-bottom:6px;
      }
      .meta{font-size:13.5px;color:var(--terra-dark);font-weight:600;margin-bottom:8px}
      .free-card{border:1.5px solid var(--sage)}
      .free-title{font-size:25px;font-weight:800;line-height:1.25;margin-bottom:10px}
      .mini-label{
        font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
        color:var(--muted);margin:16px 0 4px;
      }
      /* ---------- LISTS ---------- */
      .check-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
      .check-list li{
        display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:15.5px;align-items:flex-start;color:var(--body);
      }
      .check-list li:last-child{border-bottom:none}
      .check-box{
        flex:0 0 auto;width:21px;height:21px;border:2px solid var(--sage);border-radius:6px;margin-top:2px;
      }
      .check-list li b{font-weight:700;color:var(--ink)}
      .check-list li .why{display:block;font-size:13.5px;color:var(--muted)}
      .mark-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
      .mark-list li{display:flex;gap:10px;font-size:15.5px;align-items:flex-start}
      .mark-list .mk{flex:0 0 auto;font-weight:800;width:20px;text-align:center}
      .mark-list .mk.x{color:var(--danger)}
      .mark-list .mk.v{color:var(--sage-dark)}
      .card h3.card-t{font-size:20px;font-weight:800;margin-bottom:2px}
      /* ---------- MODULES / ASPECTS / STEPS ---------- */
      .module-row{
        display:flex;gap:14px;background:var(--card);border:1px solid var(--line);
        border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:12px;align-items:flex-start;
      }
      .module-num{
        flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--sage-soft);
        color:var(--sage-dark);font-weight:800;font-size:14.5px;
        display:flex;align-items:center;justify-content:center;margin-top:1px;
      }
      .module-row h3{font-family:"Plus Jakarta Sans",sans-serif;font-size:16.5px;font-weight:800;margin-bottom:2px}
      .module-row p{font-size:14.5px;color:var(--muted)}
      .aspect-card{
        display:flex;gap:14px;background:var(--card);border:1px solid var(--line);
        border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:12px;align-items:flex-start;
      }
      .aspect-ico{font-size:24px;line-height:1.3}
      .aspect-card h3{font-family:"Plus Jakarta Sans",sans-serif;font-size:16.5px;font-weight:800;margin-bottom:2px}
      .aspect-card p{font-size:14.5px;color:var(--muted)}
      .step-card{
        background:var(--card);border:1px solid var(--line);border-radius:18px;
        box-shadow:var(--shadow);padding:20px 22px;margin-bottom:14px;
      }
      .step-num{
        width:34px;height:34px;border-radius:50%;background:var(--sage);color:#fff;
        font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:15px;
      }
      .step-card h3{font-size:19px;font-weight:800;margin-bottom:4px}
      .step-card p{font-size:15px;color:var(--body)}
      /* ---------- FAQ ---------- */
      .faq-card{
        background:var(--card);border:1px solid var(--line);border-radius:16px;
        box-shadow:var(--shadow);padding:18px 20px;margin-bottom:12px;
      }
      .faq-card h3{font-family:"Plus Jakarta Sans",sans-serif;font-size:16.5px;font-weight:800;margin-bottom:6px}
      .faq-card h3 .tri{color:var(--terra);margin-right:6px}
      .faq-card p{font-size:15px;color:var(--body)}
      /* ---------- CTA AKHIR ---------- */
      .cta-final{text-align:center}
      .cta-final h2{font-size:28px;font-weight:800;line-height:1.2;margin-bottom:10px;text-align:center}
      .cta-final p{max-width:52ch;margin:0 auto 20px}
      .cta-final .micro{margin-top:12px}
      /* ---------- QUIZ MODAL ---------- */
      .modal-backdrop{
        position:fixed;inset:0;background:rgba(20,16,12,.5);display:none;
        align-items:center;justify-content:center;z-index:60;padding:16px;
      }
      .modal-backdrop.open{display:flex}
      .quiz-card{
        background:var(--modal);width:100%;max-width:560px;max-height:88vh;
        border-radius:22px;display:flex;flex-direction:column;overflow:hidden;
        box-shadow:0 18px 50px rgba(20,16,12,.3);
      }
      .quiz-top{
        display:flex;align-items:center;justify-content:space-between;
        padding:14px 18px 0;min-height:34px;flex:0 0 auto;
      }
      .back-btn{
        background:none;border:none;font-family:inherit;font-size:15px;font-weight:700;
        color:var(--body);cursor:pointer;padding:6px 4px;min-height:44px;
      }
      .close-btn{
        background:none;border:none;font-size:20px;line-height:1;color:var(--muted);
        cursor:pointer;padding:6px;min-width:44px;min-height:44px;margin-left:auto;
      }
      .q-progress{
        height:6px;border-radius:99px;background:var(--line);overflow:hidden;
        margin:8px 20px 0;flex:0 0 auto;
      }
      .q-progress i{display:block;height:100%;background:var(--sage);border-radius:99px;transition:width .3s ease}
      .quiz-body{overflow-y:auto;padding:18px 20px 22px}
      .q-title{font-family:"Fraunces",Georgia,serif;font-size:23px;font-weight:800;color:var(--ink);line-height:1.25;margin-bottom:6px}
      .q-hint{font-size:14.5px;color:var(--muted);margin-bottom:18px}
      .q-opts{display:grid;gap:10px}
      .q-opt{
        display:flex;align-items:center;justify-content:center;text-align:center;width:100%;
        background:var(--card);border:1.5px solid var(--input-line);border-radius:13px;
        min-height:54px;padding:12px 16px;cursor:pointer;font-family:inherit;
        font-size:15.5px;font-weight:600;color:var(--ink);
        transition:border-color .15s ease, background .15s ease;
      }
      .q-opt:hover{border-color:var(--sage)}
      .q-opt.sel{border-color:var(--sage);background:var(--sage-soft)}
      .q-opt small{display:block;color:var(--muted);font-size:13.5px;font-weight:400;margin-top:2px}
      .q-nav{margin-top:22px}
      .q-nav .btn{min-height:52px}
      .field{margin-bottom:14px}
      .field label{display:block;font-weight:700;font-size:14.5px;margin-bottom:6px;color:var(--ink)}
      .field input,.field select{
        width:100%;height:50px;padding:0 14px;border:1.5px solid var(--input-line);border-radius:12px;
        background:var(--card);color:var(--ink);font-family:inherit;font-size:16px;
      }
      .field input:focus,.field select:focus{outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage)}
      .field .opt-note{font-size:13px;color:var(--muted);margin-top:4px}
      /* ---------- REPORT ---------- */
      #hasil{display:none}
      .done-chip{
        display:inline-flex;align-items:center;gap:7px;background:var(--sage-soft);color:var(--sage-dark);
        font-size:13px;font-weight:800;border-radius:999px;padding:5px 13px;margin-bottom:14px;
      }
      .report-card{
        background:var(--card);border:1px solid var(--line);border-radius:18px;
        box-shadow:var(--shadow);padding:22px;margin-bottom:18px;position:relative;overflow:hidden;
      }
      .report-card.free{border:1.5px solid var(--sage)}
      .report-card h3{font-size:22px;font-weight:800;margin-bottom:4px;line-height:1.3}
      .report-card .rsub{color:var(--body);font-size:14.5px;margin-bottom:16px}
      .score-row{display:grid;gap:12px;margin:16px 0 18px}
      .score-box{
        background:var(--bg);border:1px solid var(--line);
        border-radius:14px;padding:14px 16px;
      }
      .score-box .num{font-family:"Fraunces",serif;font-size:30px;font-weight:800;color:var(--ink)}
      .score-box .lbl{font-size:13px;color:var(--muted);font-weight:600}
      .gap-list{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
      .gap-list li{
        display:flex;gap:10px;font-size:14.5px;background:var(--warn-soft);color:var(--body);
        border-radius:10px;padding:10px 12px;align-items:flex-start;
      }
      .rep-sec{margin-top:24px}
      .rep-sec:first-of-type{margin-top:8px}
      .rep-sec h4{
        font-size:16.5px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;color:var(--ink);
        display:flex;align-items:center;gap:9px;margin:0 0 4px;
      }
      .rep-sec h4 .n{
        width:26px;height:26px;border-radius:8px;background:var(--sage);color:#fff;font-size:13.5px;
        display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
      }
      .rep-sec .sec-note{font-size:14px;color:var(--body);margin-bottom:8px}
      .danger-callout{
        background:var(--danger-soft);border:1px solid rgba(192,57,43,.45);border-radius:12px;
        padding:12px 14px;font-size:14px;margin:12px 0 4px;color:var(--body);
      }
      .danger-callout strong{color:var(--danger)}
      table.rep-table{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:6px;color:var(--body)}
      table.rep-table th,table.rep-table td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
      table.rep-table th{background:var(--bg);font-weight:700;color:var(--ink)}
      /* lock */
      .lock-wrap{position:relative}
      .locked-blur{filter:blur(7px);pointer-events:none;user-select:none}
      .lock-overlay{
        position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
        padding:20px;background:rgba(251,247,239,.45);
      }
      .lock-card{
        background:var(--card);border:1px solid var(--line);border-radius:16px;
        box-shadow:0 8px 28px rgba(34,30,25,.14);padding:22px 20px;text-align:center;max-width:340px;
      }
      .lock-card .lock-ico{font-size:26px;margin-bottom:6px}
      .lock-card h4{font-family:"Fraunces",serif;font-size:19px;font-weight:800;color:var(--ink);margin:0 0 6px}
      .lock-card p{font-size:14.5px;color:var(--body);margin-bottom:16px}
      /* kontak card */
      .wallet-card{
        border:2px dashed var(--sage);border-radius:16px;padding:18px;background:var(--bg);
      }
      .wallet-card h5{margin:0 0 10px;font-size:15px;font-weight:800;color:var(--ink)}
      .wallet-grid{display:grid;grid-template-columns:1fr;gap:8px 18px;font-size:14px}
      .wallet-grid .k{color:var(--muted);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
      .wallet-grid .v{border-bottom:1px dotted var(--sage);min-height:22px;font-weight:600;color:var(--ink)}
      /* ---------- PRICING ---------- */
      .price-card{
        background:var(--card);border:1.5px solid var(--line);border-radius:18px;
        box-shadow:var(--shadow);padding:22px;position:relative;margin-bottom:16px;
      }
      .price-card.featured{border-color:var(--sage)}
      .price-flag{
        position:absolute;top:-13px;right:18px;background:var(--pill);color:var(--terra-dark);
        font-size:12px;font-weight:800;padding:4px 12px;border-radius:999px;letter-spacing:.03em;
      }
      .price-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
      .price-top h3{font-size:19px;font-weight:800}
      .price-top .p-sub{color:var(--muted);font-size:13.5px;margin-top:2px}
      .price-amt{font-family:"Fraunces",serif;font-size:28px;font-weight:800;color:var(--ink);text-align:right;line-height:1.15;white-space:nowrap}
      .price-amt s{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:13.5px;color:var(--muted);font-weight:500}
      .price-card ul{list-style:none;margin:16px 0 18px;padding:0;display:grid;gap:9px;font-size:15px;color:var(--body)}
      .price-card ul li{display:flex;gap:9px}
      .price-card ul li::before{content:"✓";color:var(--sage-dark);font-weight:800}
      .price-note{font-size:13px;color:var(--muted);text-align:center;margin-top:10px}
      .unlocked-tag{
        display:none;background:var(--ok-soft);color:var(--ok);font-weight:800;font-size:14px;
        border-radius:10px;padding:11px;text-align:center;
      }
      /* ---------- OWNER ---------- */
      .owner-card{
        background:var(--card);border:1px solid var(--line);border-radius:18px;
        box-shadow:var(--shadow);padding:22px;margin-bottom:14px;
      }
      .owner-card h3{font-size:19px;font-weight:800;margin-bottom:6px}
      .owner-card p{font-size:14.5px;color:var(--body)}
      .link-state{font-size:13.5px;font-weight:700;margin-top:6px}
      .link-state.off{color:var(--warn)}
      .link-state.on{color:var(--ok)}
      .honest-note{
        background:var(--warn-soft);border:1px solid #D9A441;border-radius:12px;
        padding:13px 15px;font-size:14px;margin-top:14px;color:var(--body);
      }
      .script-box{
        background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:10px;
      }
      .script-box h4{margin:0 0 4px;font-size:15px;color:var(--ink)}
      .script-box p{font-size:14.5px}
      .script-box .line{font-style:italic;color:var(--ink)}
      /* ---------- FOOTER ---------- */
      footer{padding:30px 0 44px;border-top:1px solid var(--header-line)}
      .foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin-bottom:16px}
      .foot-links a{font-size:14px;font-weight:600;color:var(--terra-dark);text-decoration:none}
      .disclaimer{font-size:13px;color:var(--muted);line-height:1.6}
      .disclaimer strong{color:var(--body)}
      .foot-line{text-align:center;color:var(--muted);font-size:13px;margin-top:16px}
      /* ---------- PAY MODAL ---------- */
      .pay-card{
        background:var(--modal);color:var(--body);width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
        border-radius:22px;padding:24px;position:relative;
        box-shadow:0 18px 50px rgba(20,16,12,.3);
      }
      .pay-card h3{font-size:21px;font-weight:800;margin-bottom:4px;padding-right:40px}
      .pay-card .sub{font-size:14px;color:var(--body);margin-bottom:16px}
      .pay-row{display:flex;justify-content:space-between;gap:14px;font-size:15px;padding:8px 0;border-bottom:1px dashed var(--line)}
      .pay-row.total{font-weight:800;border-bottom:none;font-size:16.5px;color:var(--ink)}
      .method-list{display:grid;gap:8px;margin:16px 0}
      .method{
        display:flex;justify-content:space-between;align-items:center;gap:10px;border:1.5px solid var(--input-line);
        border-radius:12px;padding:12px 14px;font-size:14.5px;font-weight:600;cursor:pointer;background:var(--card);color:var(--ink);min-height:48px;
      }
      .method.sel{border-color:var(--sage);background:var(--sage-soft)}
      .method span{color:var(--muted);font-weight:500;font-size:13px;text-align:right}
      .sim-note{background:var(--warn-soft);border-radius:10px;padding:11px 13px;font-size:13.5px;margin-bottom:16px;color:var(--body)}
      .modal-x{
        position:absolute;top:14px;right:14px;background:none;border:none;font-size:22px;cursor:pointer;
        color:var(--muted);line-height:1;min-width:44px;min-height:44px;
      }
      .toast{
        position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(80px);
        background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;font-size:14.5px;font-weight:600;
        z-index:80;transition:transform .3s ease;box-shadow:0 10px 30px rgba(34,30,25,.25);max-width:92vw;text-align:center;
      }
      .toast.show{transform:translateX(-50%) translateY(0)}
      #printSheet{display:none}
      @media (min-width:640px){
        .hero h1{font-size:40px}
        .sec-head h2,.cta-final h2{font-size:30px}
        .score-row{grid-template-columns:1fr 1fr}
        .wallet-grid{grid-template-columns:1fr 1fr}
      }
      @media (max-width:560px){
        table.rep-table thead{display:none}
        table.rep-table,table.rep-table tbody,table.rep-table tr,table.rep-table td{display:block;width:100%}
        table.rep-table tr{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:6px 4px}
        table.rep-table td{border:none;padding:5px 10px}
      }
      @media (prefers-reduced-motion: reduce){
        html{scroll-behavior:auto}
        *{transition:none !important}
      }