/* FillTables ID, angle A: product-forward SaaS.
   Light is the base, dark only swaps token values.
   Radius rule: controls (buttons, inputs, tags) 8px; panels and bento cells 16px;
   device frames around screenshots 16px with a 1px border and a tinted shadow. Nothing else is rounded. */

@font-face{font-family:"Geist";src:url("fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap;}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap;}

:root{
  --ink:#14181d;
  --green:#1fbf74;
  --green-deep:#16965b;
  --green-bright:#2fd987;

  --bg:#fafbfa;
  --bg-2:#f2f5f3;
  --panel:#ffffff;
  --tint:#e6f6ed;
  --tint-2:#d3efdf;
  --text:#3a434d;
  --heading:#14181d;
  --muted:#5b6673;
  --line:#e1e6e3;
  --line-2:#cfd6d2;
  --shadow:0 1px 2px rgba(20,24,29,.05), 0 24px 60px -20px rgba(22,150,91,.22);
  --shadow-sm:0 1px 2px rgba(20,24,29,.05), 0 10px 30px -14px rgba(22,150,91,.2);
  --nav-bg:rgba(250,251,250,.78);
  --btn-text:#0d1a13;

  --r-sm:8px;
  --r-lg:16px;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --maxw:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1317;
    --bg-2:#12171c;
    --panel:#171d23;
    --tint:#12291d;
    --tint-2:#173826;
    --text:#b8c2cc;
    --heading:#f3f6f8;
    --muted:#97a3b0;
    --line:#252d35;
    --line-2:#313b45;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 24px 60px -20px rgba(31,191,116,.18);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(31,191,116,.16);
    --nav-bg:rgba(15,19,23,.72);
  }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--bg);line-height:1.6;font-size:16px;
     -webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3{color:var(--heading);margin:0;text-wrap:balance;letter-spacing:-.02em;font-weight:600;}
h2{font-size:clamp(26px,3vw,38px);line-height:1.12;letter-spacing:-.025em;max-width:22ch;}
h3{font-size:17px;letter-spacing:-.01em;}
p{margin:0;}
a{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
@media (prefers-color-scheme: dark){a{color:var(--green);}}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}
.lede{color:var(--muted);font-size:17px;max-width:58ch;margin-top:14px;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
         color:var(--green-deep);font-weight:500;margin:0 0 14px;}
@media (prefers-color-scheme: dark){.eyebrow{color:var(--green);}}

/* ---- nav: sticky, blurred, one line, 64px ---- */
header{position:sticky;top:0;z-index:20;background:var(--nav-bg);
       -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
       border-bottom:1px solid var(--line);}
@media (prefers-reduced-transparency: reduce){header{background:var(--bg);}}
.nav{max-width:var(--maxw);margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;gap:24px;}
@media(max-width:640px){.nav{padding:0 20px;}}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.mark{width:28px;height:28px;flex:none;}
.mark svg{width:100%;height:100%;display:block;}
.wm{font-size:16px;font-weight:600;color:var(--heading);letter-spacing:-.02em;}
.wm .g{color:var(--green-deep);}
@media (prefers-color-scheme: dark){.wm .g{color:var(--green);}}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:26px;}
.nav-links a{color:var(--text);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;}
.nav-links a:hover{color:var(--heading);}
.nav-links .btn{margin-left:6px;}

/* ---- mobile menu: checkbox-driven dropdown, no JS required ----
   Same technique as the harga.html payment switch: a sr-only checkbox,
   a <label> as the visible control, CSS sibling selectors for state. */
.nav-burger{display:none;}
@media(max-width:760px){
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:32px;height:32px;margin-left:auto;cursor:pointer;flex:none;}
  .nav-burger span{display:block;height:2px;width:100%;background:var(--heading);border-radius:1px;
    transition:transform .2s var(--ease), opacity .2s var(--ease);}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0;}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .nav-links{position:absolute;top:64px;left:0;right:0;margin-left:0;
    background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 16px 32px rgba(20,24,29,.1);
    flex-direction:column;align-items:stretch;gap:0;padding:0 20px;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .25s var(--ease), opacity .2s var(--ease);}
  .nav-links a.hidem{display:block;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;}
  .nav-links .btn{margin:16px 0;width:100%;}
  .nav-toggle:checked ~ .nav-links{max-height:80vh;opacity:1;pointer-events:auto;overflow-y:auto;padding-bottom:4px;}
}
@media (prefers-reduced-motion: reduce){
  .nav-burger span,.nav-links{transition:none;}
}

/* ---- buttons: 8px radius, AA both themes ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
     font-family:inherit;font-weight:600;font-size:15px;text-decoration:none;border-radius:var(--r-sm);
     padding:0 22px;height:46px;border:1px solid transparent;cursor:pointer;line-height:1;
     transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);}
.btn-primary{background:var(--green);color:var(--btn-text);border-color:var(--green);
             box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(20,24,29,.12);}
.btn-primary:hover{background:var(--green-bright);border-color:var(--green-bright);color:var(--btn-text);}
.btn-secondary{background:var(--panel);color:var(--heading);border-color:var(--line-2);}
.btn-secondary:hover{border-color:var(--heading);color:var(--heading);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible,.nav-links a:focus-visible,.link-cell:focus-visible{outline:2px solid var(--green-deep);outline-offset:3px;}
.nav .btn{height:36px;padding:0 14px;font-size:14px;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;}

section{padding:96px 0;}
@media(max-width:760px){section{padding:64px 0;}}

/* ---- device frame for real screenshots ---- */
.frame{border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);
       box-shadow:var(--shadow);}
.frame img{width:100%;}

/* ---- hero: asymmetric split, screenshot bleeds off the right ---- */
.hero{padding:72px 0 80px;overflow:hidden;position:relative;}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:48px;align-items:center;}
.hero h1{font-size:clamp(32px,2.7vw,39px);line-height:1.08;letter-spacing:-.03em;max-width:30ch;}
.hero .sub{font-size:18px;color:var(--muted);margin-top:22px;max-width:42ch;}
.hero-shot{position:relative;}
.hero-shot .frame{width:140%;max-width:none;}
@media(max-width:1024px){
  .hero{padding:56px 0 64px;}
  .hero .wrap{grid-template-columns:1fr;gap:40px;}
  .hero h1{max-width:22ch;}
  .hero-shot .frame{width:100%;}
}

/* ---- trust strip: hairline row, no cards ---- */
.trust{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.trust-item{padding:24px 28px 24px 0;font-size:14.5px;display:flex;flex-direction:column;gap:2px;}
.trust-item + .trust-item{padding-left:28px;border-left:1px solid var(--line);}
.trust-item b{color:var(--heading);font-weight:600;font-size:15px;}
.trust-item span{color:var(--muted);}
@media(max-width:1024px){
  .trust-grid{grid-template-columns:1fr 1fr;}
  .trust-item:nth-child(odd){padding-left:0;border-left:0;}
  .trust-item:nth-child(n+3){border-top:1px solid var(--line);padding-top:20px;}
}
@media(max-width:760px){
  .trust-grid{grid-template-columns:1fr;}
  .trust-item{padding:18px 0;}
  .trust-item + .trust-item{padding-left:0;border-left:0;border-top:1px solid var(--line);}
}

/* ---- wedge: numbered flow across four columns ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:56px;counter-reset:step;}
.step{border-top:1px solid var(--line-2);padding-top:20px;counter-increment:step;position:relative;}
.step::before{content:counter(step);font-family:var(--mono);font-size:13px;color:var(--green-deep);
              display:block;margin-bottom:14px;}
@media (prefers-color-scheme: dark){.step::before{color:var(--green);}}
.step h3{font-size:18px;}
.step p{font-size:14.5px;color:var(--muted);margin-top:6px;}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr);gap:28px;}}
@media(max-width:520px){.steps{grid-template-columns:1fr;}}

/* ---- kenapa: bento, 4 cells, 2 screenshots + 2 tints ---- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:48px;}
.cell{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:32px;
      display:flex;flex-direction:column;gap:12px;min-height:340px;overflow:hidden;position:relative;}
.cell h3{font-size:21px;letter-spacing:-.02em;max-width:16ch;}
.cell p{font-size:15px;color:var(--muted);max-width:48ch;}
.cell-tint{background:linear-gradient(160deg,var(--tint) 0%,var(--tint-2) 100%);border-color:transparent;}
.cell-ink{background:var(--bg-2);}
.cell-shot{padding-bottom:0;}
.cell-shot .frame{margin-top:auto;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;box-shadow:var(--shadow-sm);
                  transform:translateY(12px);}
.c1{grid-column:span 5;}
.c2{grid-column:span 7;}
.c3{grid-column:span 7;}
.c4{grid-column:span 5;}
.c2 .frame{width:46%;margin-left:auto;margin-right:8%;height:230px;}
.c2 .frame img{height:100%;object-fit:cover;object-position:top;}
.c3 .frame{width:92%;margin-left:auto;}
.more{margin-top:28px;font-size:15px;}
@media(max-width:900px){
  .bento{grid-template-columns:1fr;gap:14px;}
  .c1,.c2,.c3,.c4{grid-column:auto;}
  .cell{min-height:0;padding:26px;}
  .c2 .frame{width:70%;margin-right:0;height:280px;}
  .c3 .frame{width:100%;}
}

/* ---- live proof: full-bleed screenshot band + link row ---- */
.proof{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.proof-shot{margin-top:48px;}
.links{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border-top:1px solid var(--line-2);}
.links-2{grid-template-columns:1fr 1fr;max-width:560px;}
.link-cell{padding:22px 24px 22px 0;text-decoration:none;display:block;border-bottom:1px solid transparent;}
.link-cell + .link-cell{padding-left:24px;border-left:1px solid var(--line-2);}
.link-cell b{display:block;color:var(--heading);font-weight:600;font-size:15px;}
.link-cell span{font-family:var(--mono);color:var(--muted);font-size:13px;word-break:break-all;}
.link-cell:hover b{color:var(--green-deep);}
@media (prefers-color-scheme: dark){.link-cell:hover b{color:var(--green);}}
@media(max-width:760px){
  .links{grid-template-columns:1fr 1fr;}
  .link-cell{padding:18px 16px 18px 0;}
  .link-cell + .link-cell{padding-left:0;border-left:0;}
  .link-cell:nth-child(even){padding-left:16px;border-left:1px solid var(--line-2);}
  .link-cell:nth-child(n+3){border-top:1px solid var(--line-2);}
}
@media(max-width:420px){
  .links{grid-template-columns:1fr;}
  .link-cell:nth-child(even){padding-left:0;border-left:0;}
  .link-cell:nth-child(n+2){border-top:1px solid var(--line-2);}
}

/* ---- pricing: two-column panel, figure on the right ---- */
.price-box{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow-sm);
           display:grid;grid-template-columns:1.2fr 1fr;overflow:hidden;}
.price-copy{padding:48px;}
.price-copy p{color:var(--muted);margin-top:16px;max-width:52ch;}
.price-side{padding:48px;background:linear-gradient(160deg,var(--tint) 0%,var(--tint-2) 100%);
            display:flex;flex-direction:column;justify-content:center;gap:8px;}
.price-figure{font-size:clamp(30px,3.4vw,44px);font-weight:600;color:var(--heading);letter-spacing:-.03em;line-height:1.1;
              display:flex;flex-direction:column;gap:6px;}
.price-from{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0;}
.price-note{font-size:14px;color:var(--muted);}
.price-side .btn{align-self:flex-start;margin-top:20px;}
@media(max-width:860px){
  .price-box{grid-template-columns:1fr;}
  .price-copy,.price-side{padding:32px 26px;}
}

/* ---- demo: copy left, form right ---- */
.demo-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;}
.form-foot{font-size:14px;color:var(--muted);margin-top:24px;}
form{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:32px;box-shadow:var(--shadow-sm);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:13.5px;font-weight:500;color:var(--heading);}
.field input{font:inherit;font-size:15px;padding:0 13px;height:44px;border-radius:var(--r-sm);
             border:1px solid var(--line-2);background:var(--bg);color:var(--heading);width:100%;}
.field input:hover{border-color:var(--muted);}
.field input:focus{outline:2px solid var(--green-deep);outline-offset:1px;border-color:var(--green-deep);}
.field .help{font-size:13px;color:var(--muted);}
.field .btn{width:100%;margin-top:6px;}
@media(max-width:900px){.demo-grid{grid-template-columns:1fr;gap:36px;}}
@media(max-width:560px){.form-grid{grid-template-columns:1fr;}form{padding:22px;}}

footer{border-top:1px solid var(--line);padding:32px 0;font-size:13.5px;color:var(--muted);}
footer .wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center;}
footer a{color:var(--muted);text-decoration:none;margin-left:auto;}
footer a:hover{color:var(--heading);}

/* ---- cara kerja: order flow, steps left + kitchen screen right ---- */
.flow-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;margin-top:48px;}
.flow-grid-rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
@media(max-width:900px){.flow-grid-rev{grid-template-columns:1fr;}}
.flow{list-style:none;margin:0;padding:0;counter-reset:flow;}
.flow li{position:relative;padding:0 0 32px 52px;counter-increment:flow;}
.flow li::before{content:counter(flow);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--panel);color:var(--heading);font-family:var(--mono);
  font-size:13px;display:flex;align-items:center;justify-content:center;}
.flow li::after{content:"";position:absolute;left:16px;top:36px;bottom:4px;width:1px;background:var(--line-2);}
.flow li:last-child{padding-bottom:0;}
.flow li:last-child::after{display:none;}
.flow h3{font-size:18px;line-height:1.3;padding-top:4px;}
.flow p{font-size:15px;color:var(--muted);margin-top:6px;max-width:44ch;}
.flow-shot{position:sticky;top:88px;}
@media(max-width:900px){
  .flow-grid{grid-template-columns:1fr;gap:40px;}
  .flow-shot{position:static;}
}

/* ---- needs: 2x2 hairline grid ---- */
.needs{display:grid;grid-template-columns:1fr 1fr;margin-top:48px;border-top:1px solid var(--line-2);}
.need{padding:28px 32px 28px 0;border-bottom:1px solid var(--line-2);}
.need:nth-child(even){padding-left:32px;border-left:1px solid var(--line-2);}
.need h3{font-size:19px;}
.need p{font-size:15px;color:var(--muted);margin-top:8px;max-width:40ch;}
@media(max-width:640px){
  .needs{grid-template-columns:1fr;}
  .need{padding:22px 0;}
  .need:nth-child(even){padding-left:0;border-left:0;}
}

/* ---- comparison table: a real table, FillTables column highlighted ---- */
.cmp-wrap{overflow-x:auto;margin-top:48px;}
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;min-width:640px;}
.cmp th,.cmp td{text-align:left;padding:16px 20px;vertical-align:top;border-bottom:1px solid var(--line);}
.cmp thead th{font-size:14px;font-weight:500;color:var(--muted);padding-bottom:14px;}
.cmp tbody th{font-weight:500;color:var(--heading);width:26%;padding-left:0;}
.cmp td{color:var(--muted);}
.cmp .us{background:var(--tint);color:var(--heading);font-weight:500;border-left:1px solid var(--tint-2);border-right:1px solid var(--tint-2);}
.cmp thead th.us{color:var(--green-deep);font-weight:600;border-top:1px solid var(--tint-2);border-radius:var(--r-lg) var(--r-lg) 0 0;}
.cmp tbody tr:last-child .us{border-radius:0 0 var(--r-lg) var(--r-lg);}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom-color:transparent;}
.cmp tbody tr:last-child .us{border-bottom:1px solid var(--tint-2);}
@media (prefers-color-scheme: dark){.cmp thead th.us{color:var(--green);}}
.after{margin-top:28px;color:var(--muted);max-width:62ch;}

/* ---- closing panel ---- */
.close-box{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);padding:48px;
           display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;}
.close-box .cta-row{margin-top:0;}
@media(max-width:760px){.close-box{grid-template-columns:1fr;padding:32px 26px;}}

/* ---- motion: hero entrance (hierarchy) and one-time scroll reveal (sequence) ---- */
@media (prefers-reduced-motion: no-preference){
  .js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .js .rv.in{opacity:1;transform:none;}
  .rv-2{transition-delay:.08s;}
  .rv-3{transition-delay:.16s;}
  .rv-4{transition-delay:.24s;}
  .hero-copy>*{animation:rise .8s var(--ease) both;}
  .hero-copy>*:nth-child(2){animation-delay:.06s;}
  .hero-copy>*:nth-child(3){animation-delay:.12s;}
  .hero-copy>*:nth-child(4){animation-delay:.18s;}
  .hero-shot{animation:slide 1s var(--ease) .1s both;}
  .btn-primary:hover{transform:translateY(-1px);}
  .cell .frame{transition:transform .6s var(--ease);}
  .cell:hover .frame{transform:translateY(4px);}
}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes slide{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:none;}}

.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;}

/* ---- harga: tiga tingkat ------------------------------------------------
   Ditambahkan 25 Agu 2026 bersama model Sewa / Sewa sampai jadi milik / Lunas. */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px;align-items:stretch;}
@media(max-width:860px){.tiers{grid-template-columns:1fr;}}
.tier{border:2px solid var(--line);border-radius:14px;padding:24px 22px;background:var(--bg);display:flex;flex-direction:column;}
.tier-hero{border-color:var(--green);border-width:3px;background:rgba(31,191,116,.06);position:relative;}
.tier-badge{
  position:absolute;top:-13px;left:20px;background:var(--green-deep);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
}
.tier-tag{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0;}
.tier-hero .tier-tag{color:var(--green-deep);margin-top:6px;}
.tier h3{font-size:21px;margin:6px 0 0;letter-spacing:-.3px;}
.tier-price{
  font-size:27px;font-weight:800;color:var(--heading);margin:10px 0 0;
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;
}
.tier-hero .tier-price{color:var(--green-deep);}
.tier-price span{font-size:14px;font-weight:600;color:var(--muted);margin-left:4px;}
.tier p{font-size:14.5px;line-height:1.5;color:var(--text);margin:10px 0 0;max-width:none;}
.tier-up{color:var(--green-deep);font-weight:700;margin-top:auto;padding-top:10px;}
.tier-foot{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:20px;max-width:70ch;}

/* ================= harga.html =================
   Namespaced under .plan- so it never collides with the .tier- rules above,
   which style the pricing cards on the homepage. Same radius rule: controls
   8px, panels 16px. The payment switch is two screen-reader-only radios plus
   sibling selectors, so it works without JavaScript and stays keyboard usable. */

.hero-plain{padding:72px 0 24px;}
.hero-plain .wrap{display:block;}
.hero-plain h1{max-width:20ch;}

.plans-sec{padding-top:32px;}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;}
@media(max-width:980px){.plans{grid-template-columns:1fr;gap:14px;}}
.plan{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:32px 28px;
      display:flex;flex-direction:column;}
.plan h2{font-size:23px;margin:0 0 8px;max-width:none;}
.plan-who{font-size:14px;color:var(--muted);min-height:66px;}
.plan-lead{border-color:var(--green);box-shadow:var(--shadow-sm);position:relative;}
.plan-flag{position:absolute;top:-11px;left:28px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
           text-transform:uppercase;color:var(--btn-text);background:var(--green);
           padding:4px 10px;border-radius:var(--r-sm);}
.plan-price{margin-top:22px;}
.plan-amount{font-size:30px;font-weight:600;color:var(--heading);letter-spacing:-.03em;line-height:1.1;}
.plan-amount span{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0;}
.plan-price-sub{font-size:13px;color:var(--muted);margin-top:8px;min-height:52px;}
.plan-cta{margin-top:20px;width:100%;}
.plan-feat-head{font-size:13px;font-weight:600;color:var(--heading);margin-top:26px;}
.plan-feat{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.plan-feat li{font-size:14px;color:var(--muted);padding-left:24px;position:relative;line-height:1.5;}
.plan-feat li::before{content:"";position:absolute;left:2px;top:7px;width:9px;height:5px;
  border-left:1.5px solid var(--green-deep);border-bottom:1.5px solid var(--green-deep);transform:rotate(-45deg);}
@media (prefers-color-scheme: dark){.plan-feat li::before{border-color:var(--green);}}
.plans-note{font-size:13.5px;color:var(--muted);margin-top:32px;max-width:74ch;}
@media(max-width:980px){.plan-who,.plan-price-sub{min-height:0;}}

/* always-included grid */
.incl-sec{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.incl{display:grid;grid-template-columns:1fr 1fr;margin-top:44px;border-top:1px solid var(--line-2);}
.incl-item{padding:24px 32px 24px 0;border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:4px;}
.incl-item:nth-child(even){padding-left:32px;border-left:1px solid var(--line-2);}
.incl-item b{font-size:16px;font-weight:600;color:var(--heading);}
.incl-item span{font-size:14px;color:var(--muted);max-width:44ch;}
@media(max-width:760px){
  .incl{grid-template-columns:1fr;}
  .incl-item{padding:20px 0;}
  .incl-item:nth-child(even){padding-left:0;border-left:0;}
}

/* the two payment options explained */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px;}
.pay-grid-3{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:960px){.pay-grid-3{grid-template-columns:1fr;}}
@media(max-width:860px){.pay-grid{grid-template-columns:1fr;}}
.pay-col{border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;background:var(--panel);}
.pay-col-lead{background:linear-gradient(160deg,var(--tint) 0%,var(--tint-2) 100%);border-color:transparent;}
.pay-col h3{font-size:20px;margin-bottom:12px;}
.pay-col p{font-size:15px;color:var(--muted);max-width:46ch;}
.pay-note{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2);font-size:13.5px;}
.pay-col-lead .pay-note{border-top-color:rgba(22,150,91,.28);}

/* ================= tanya-jawab.html =================
   Native <details>/<summary> disclosure: no JS needed, works with the reveal
   script disabled, keyboard and screen-reader accessible out of the box. */
.faq{display:flex;flex-direction:column;}
.faq-item{border-bottom:1px solid var(--line);padding:22px 0;}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary h2{font-size:17px;font-weight:600;letter-spacing:-.01em;max-width:none;flex:1;}
.faq-item summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--muted);
  flex:none;width:22px;text-align:center;transition:transform .18s var(--ease);}
.faq-item[open] summary::after{content:"\2212";}
.faq-item p{color:var(--muted);font-size:15px;max-width:70ch;margin-top:14px;}

/* ---- visual flow: 4 real screenshots in sequence, arrows between ---- */
.visual-flow{display:flex;align-items:flex-start;gap:10px;margin-top:48px;}
.vf-step{flex:1;min-width:0;}
.vf-step .frame{height:150px;}
.vf-step .frame img{width:100%;height:100%;object-fit:cover;object-position:top;}
.vf-num{font-family:var(--mono);font-size:12px;color:var(--green-deep);margin:14px 0 2px;}
@media (prefers-color-scheme: dark){.vf-num{color:var(--green);}}
.vf-step h3{font-size:15px;}
.vf-step p{font-size:13px;color:var(--muted);margin-top:4px;}
.vf-arrow{flex:none;color:var(--line-2);font-size:22px;align-self:center;margin-top:64px;}
@media(max-width:860px){
  .visual-flow{flex-direction:column;gap:20px;}
  .vf-arrow{display:none;}
  .vf-step .frame{height:180px;}
}