/* Website meaetgreet.com
   Layout: pine hero yang menyambung ke nav, lalu bagian bergantian di atas latar mint pucat;
   tanda khas: struk kasir (mono) dan grafik "jam sepi jadi ramai". */
@font-face{font-family:'Manrope';src:url(/fonts/manrope.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(/fonts/plexmono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --ground:#F4F7F6; --ground2:#E6ECE9; --surface:#FFFFFF; --line:#DCE5E1;
  --ink:#0D1916; --ink2:#47574F; --ink3:#6A7A75;
  --pine:#0F3D36; --pine2:#18564B; --pine-ink:#E4F2EC; --pine-mute:#9FC2B8;
  --mint:#2ED18A; --mint-bg:#DCF6E9; --mint-ink:#086B45;
  --vio:#6A4BFF; --vio-bg:#ECE8FF; --vio-ink:#4127CC;
  --amber-bg:#FFF1D6; --amber-ink:#875200; --red-ink:#A2261A;
  --paper:#FFFFFF; --paper-ink:#1B2421; --paper-mute:#6E7A76;
  --shadow:0 1px 2px rgba(13,25,22,.06),0 12px 32px -12px rgba(13,25,22,.18);
  --f-sans:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --gut:clamp(16px,4vw,40px); --max:1160px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0A1412; --ground2:#0F1C19; --surface:#12201D; --line:#22332F;
  --ink:#E8F0ED; --ink2:#A9BBB5; --ink3:#83968F;
  --pine:#0F3D36; --pine2:#1E6457;
  --mint-bg:#123A2B; --mint-ink:#5BE3A6;
  --vio:#8B73FF; --vio-bg:#1C1740; --vio-ink:#B9A9FF;
  --amber-bg:#3A2A0B; --amber-ink:#F4C46A; --red-ink:#FF9A8B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 36px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ground:#0A1412; --ground2:#0F1C19; --surface:#12201D; --line:#22332F;
  --ink:#E8F0ED; --ink2:#A9BBB5; --ink3:#83968F;
  --pine:#0F3D36; --pine2:#1E6457;
  --mint-bg:#123A2B; --mint-ink:#5BE3A6;
  --vio:#8B73FF; --vio-bg:#1C1740; --vio-ink:#B9A9FF;
  --amber-bg:#3A2A0B; --amber-ink:#F4C46A; --red-ink:#FF9A8B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 36px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--f-sans);font-size:16px;line-height:1.6;background:var(--ground);color:var(--ink);-webkit-font-smoothing:antialiased;font-feature-settings:'tnum' 1}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.035em;line-height:1.08}
p{margin:0}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:6px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.s{width:16px;height:16px}.ic.l{width:24px;height:24px}
.wrap{width:100%;max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding-inline:var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--mint);color:#062E20;padding:10px 14px;border-radius:10px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--pine);color:var(--pine-ink);border-bottom:1px solid rgba(255,255,255,.07)}
.nav .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{display:inline-flex;align-items:baseline;font-weight:800;font-size:22px;letter-spacing:-.04em;text-decoration:none;color:#fff;white-space:nowrap}
.logo i{font-style:normal;color:var(--mint)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{color:var(--pine-ink);text-decoration:none;font-weight:700;font-size:14.5px;padding:10px 12px;border-radius:10px}
.nav-links a:hover{background:rgba(255,255,255,.07)}
.nav-links a[aria-current="page"]{color:var(--mint)}
.nav-cta{margin-left:6px}
.menu-btn{display:none;margin-left:auto;border:0;background:rgba(255,255,255,.08);color:#fff;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:inline-flex}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;background:var(--pine);padding:8px var(--gut) 18px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:14px 12px;font-size:16px}
  .nav-cta{margin:8px 0 0}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:16px;border:0;font:inherit;font-weight:800;font-size:15.5px;text-decoration:none;cursor:pointer;transition:transform .12s ease,background-color .15s ease;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.mint{background:var(--mint);color:#062E20}
.btn.mint:hover{background:#45DB98}
.btn.pine{background:var(--pine);color:#fff}
.btn.pine:hover{background:var(--pine2)}
.btn.ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.btn.ghost-light:hover{background:rgba(255,255,255,.07)}
.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.sm{min-height:42px;padding:0 16px;border-radius:12px;font-size:14px}

.stores{display:flex;flex-wrap:wrap;gap:10px}
.store{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 16px 0 12px;border-radius:14px;background:var(--ink);color:var(--ground);text-decoration:none;min-width:160px;transition:transform .12s ease}
.store:active{transform:scale(.97)}
.store .ic{width:26px;height:26px}
.store span{display:flex;flex-direction:column;line-height:1.15}
.store small{font-size:11.5px;font-weight:700;opacity:.75}
.store b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.store.light{background:#fff;color:#0D1916}
.store[aria-disabled="true"]{cursor:default}
.socials{display:flex;flex-wrap:wrap;gap:8px}
.social{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border-radius:12px;text-decoration:none;font-weight:700;font-size:14.5px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.social:hover{box-shadow:inset 0 0 0 1.5px var(--ink3)}
.social em{font-style:normal;color:var(--ink3);font-weight:600}

/* ---------- hero ---------- */
.hero{background:var(--pine);color:var(--pine-ink);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-180px;top:-140px;width:620px;height:620px;border-radius:50%;border:90px solid rgba(46,209,138,.07);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(36px,6vw,84px) clamp(44px,6vw,88px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mint)}
.eyebrow.dark{color:var(--mint-ink)}
.eyebrow.vio{color:var(--vio-ink)}
.hero h1{font-size:clamp(40px,6.4vw,78px);font-weight:800;letter-spacing:-.05em;line-height:.98;color:#fff;margin:16px 0 0}
.hero h1 mark{background:none;color:var(--mint)}
.hero .lead{font-size:clamp(16.5px,1.6vw,19px);line-height:1.6;color:var(--pine-ink);max-width:34em;margin-top:20px;opacity:.92}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero .note{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:600;color:var(--pine-mute)}
.hero .note .ic{color:var(--mint)}
@media (max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}

/* phone mockup */
.stage{position:relative;display:flex;justify-content:center;align-items:flex-start;min-height:100%}
.phone{width:clamp(232px,24vw,292px);aspect-ratio:600/1298;max-width:100%;border-radius:44px;padding:9px;background:#08201C;box-shadow:0 30px 60px -20px rgba(0,0,0,.55),inset 0 0 0 1.5px rgba(255,255,255,.08);position:relative;flex:none}
.phone img{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);object-fit:cover;object-position:top;border-radius:36px;background:#F4F7F6}
.phone.crop{aspect-ratio:600/880;border-bottom-left-radius:0;border-bottom-right-radius:0;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.phone.crop img{height:calc(100% - 9px);border-radius:36px 36px 0 0}
.phone.tilt{transform:rotate(3deg)}

/* thermal receipt */
.struk{font-family:var(--f-mono);font-weight:500;font-size:13px;line-height:1.55;background:var(--paper);color:var(--paper-ink);border-radius:6px 6px 0 0;padding:20px 20px 26px;position:relative;box-shadow:var(--shadow);width:min(360px,100%);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x}
.struk .hd{text-align:center;padding-bottom:12px;border-bottom:1.5px dashed #C9D2CE;margin-bottom:10px}
.struk .hd b{display:block;font-family:var(--f-sans);font-weight:800;font-size:17px;letter-spacing:-.02em}
.struk .hd small{color:var(--paper-mute);font-size:11.5px}
.struk .ln{display:flex;justify-content:space-between;gap:12px}
.struk .sub{color:var(--paper-mute);font-size:11.5px;margin-bottom:6px}
.struk .sub i{font-style:normal;color:#087A4F}
.struk .x{color:var(--paper-mute);text-decoration:line-through;text-decoration-thickness:1.5px}
.struk .sep{border-top:1.5px dashed #C9D2CE;margin:10px 0}
.struk .tot{font-weight:500}
.struk .cb{margin-top:14px;background:#DCF6E9;color:#064E33;border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-sans)}
.struk .cb span{font-size:12.5px;font-weight:700}
.struk .cb b{font-size:22px;font-weight:800;letter-spacing:-.03em}
.pop{position:absolute;display:flex;gap:12px;align-items:center;background:var(--surface);color:var(--ink);border-radius:18px;padding:14px 16px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);width:270px;max-width:calc(100% - 8px);animation:pop .6s .35s cubic-bezier(.2,.9,.3,1.2) both}
.pop .ic{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--mint);color:#062E20;stroke-width:2.4}
.pop b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.pop small{display:block;font-size:12.5px;color:var(--ink2);font-weight:600;line-height:1.35}
.pop.a{left:clamp(-90px,-5vw,-20px);bottom:2%}
.pop.b{right:clamp(-70px,-4vw,-10px);top:14%;width:220px}
.pop.b .ic{background:var(--vio-bg);color:var(--vio-ink)}
@keyframes pop{from{transform:translateY(10px) scale(.96)}to{transform:none}}
@media (max-width:1100px){.pop.b{display:none}}
@media (max-width:900px){.pop.a{left:auto;right:calc(50% + 30px)}}
@media (max-width:560px){.pop.a{position:relative;right:auto;left:auto;bottom:auto;margin:-64px auto 0}.hero .stage{flex-direction:column;align-items:center}}

/* ---------- sections ---------- */
.sec{padding-block:clamp(56px,8vw,104px)}
.sec.tight{padding-block:clamp(44px,6vw,72px)}
.sec.white{background:var(--surface)}
.sec.vio{background:var(--vio-bg)}
.sec.mint{background:var(--mint-bg)}
.sec.pine{background:var(--pine);color:var(--pine-ink)}
.sec-head{max-width:720px;display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(28px,4vw,44px)}
.sec-head h2,.h2{font-size:clamp(30px,4.2vw,50px);font-weight:800;letter-spacing:-.045em}
.sec.pine h2{color:#fff}
.sec-head p,.lede{font-size:clamp(16px,1.4vw,18px);color:var(--ink2);max-width:36em}
.sec.pine .sec-head p{color:var(--pine-ink);opacity:.9}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0;counter-reset:st}
.steps li{background:var(--surface);border-radius:22px;padding:22px 20px 24px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(13,25,22,.05)}
.sec.white .steps li{background:var(--ground)}
.steps .n{font-family:var(--f-mono);font-size:12.5px;color:var(--mint-ink);letter-spacing:.04em}
.steps h3{font-size:20px;font-weight:800;letter-spacing:-.03em}
.steps p{font-size:14.5px;color:var(--ink2);line-height:1.55}
.steps .ico{width:44px;height:44px;border-radius:14px;background:var(--mint-bg);color:var(--mint-ink);display:flex;align-items:center;justify-content:center}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.steps{grid-template-columns:minmax(0,1fr)}}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.split.rev>:first-child{order:2}
@media (max-width:900px){.split,.split.rev{grid-template-columns:minmax(0,1fr)}.split.rev>:first-child{order:0}}
.split .media{display:flex;justify-content:center}

.ticks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.ticks li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:15.5px;color:var(--ink2)}
.ticks li b{color:var(--ink);font-weight:800}
.ticks .ic{width:28px;height:28px;padding:5px;border-radius:9px;background:var(--mint-bg);color:var(--mint-ink)}
.sec.vio .ticks .ic{background:var(--surface);color:var(--vio)}

.callout{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:14px 16px;border-radius:16px;background:var(--surface);font-size:14.5px;color:var(--ink2)}
.callout .ic{color:var(--vio);margin-top:2px}
.callout b{color:var(--ink)}

/* rules strip */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:20px;overflow:hidden;margin-top:28px}
.facts div{background:var(--surface);padding:18px 18px 20px;display:flex;flex-direction:column;gap:4px}
.facts b{font-size:22px;font-weight:800;letter-spacing:-.03em}
.facts span{font-size:13.5px;color:var(--ink2);line-height:1.45}
@media (max-width:860px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.facts{grid-template-columns:minmax(0,1fr)}}

/* resto band (home) */
.band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:center}
.band h2{font-size:clamp(34px,5vw,62px);letter-spacing:-.05em;line-height:1}
.band h2 mark{background:none;color:var(--mint)}
.band p{margin-top:16px;font-size:17px;color:var(--pine-ink);opacity:.9;max-width:32em}
.band .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media (max-width:900px){.band{grid-template-columns:minmax(0,1fr)}}

/* chart: jam sepi jadi ramai */
.chart{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:20px 20px 16px;color:var(--pine-ink)}
.chart .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.chart .top b{font-size:15px;font-weight:800;color:#fff}
.chart .top small{display:block;font-size:12.5px;color:var(--pine-mute);font-weight:600}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:var(--pine-mute)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:4px;background:rgba(255,255,255,.22)}
.legend i.m{background:var(--mint)}
.bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:clamp(150px,22vw,200px);gap:6px;margin-top:22px}
.bar{grid-row:1;display:flex;flex-direction:column-reverse;height:100%;justify-content:flex-start;min-width:0}
.bar i{display:block;border-radius:5px;background:rgba(255,255,255,.2)}
.bar i+i{margin-bottom:3px}
.bar i.m{background:var(--mint);transform-origin:bottom;animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
.bar:nth-child(6) i.m{animation-delay:.08s}.bar:nth-child(7) i.m{animation-delay:.16s}.bar:nth-child(8) i.m{animation-delay:.24s}
@keyframes grow{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
.quiet{grid-row:1;grid-column:5/9;align-self:start;height:22px;border-top:1.5px solid var(--mint);border-inline:1.5px solid var(--mint);border-radius:6px 6px 0 0;display:flex;justify-content:center}
.quiet span{font-family:var(--f-mono);font-size:11px;color:var(--mint);transform:translateY(4px);white-space:nowrap}
.hours{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-top:8px;font-family:var(--f-mono);font-size:11px;color:var(--pine-mute);text-align:center}
.chart .cap{margin-top:12px;font-size:12px;color:var(--pine-mute)}

/* benefits */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:980px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid3{grid-template-columns:minmax(0,1fr)}}
.ben{background:var(--surface);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:10px}
.sec.white .ben{background:var(--ground)}
.ben .ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--mint-bg);color:var(--mint-ink)}
.ben .ico.v{background:var(--vio-bg);color:var(--vio-ink)}
.ben .ico.a{background:var(--amber-bg);color:var(--amber-ink)}
.ben h3{font-size:19px;font-weight:800;letter-spacing:-.025em}
.ben p{font-size:14.5px;color:var(--ink2);line-height:1.55}

/* showcase */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,48px)}
.shot{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.shot .phone{width:clamp(220px,22vw,270px)}
.shot h3{font-size:19px;font-weight:800}
.shot p{font-size:14.5px;color:var(--ink2);max-width:28em}
@media (max-width:640px){.shots{grid-template-columns:minmax(0,1fr)}}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:14px;align-items:start}
@media (max-width:900px){.calc{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border-radius:24px;padding:clamp(18px,3vw,28px)}
.rng{display:flex;flex-direction:column;gap:8px;padding-block:14px;border-bottom:1px solid var(--line)}
.rng:first-child{padding-top:0}
.rng:last-of-type{border-bottom:0}
.rng label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700;font-size:14.5px}
.rng output{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(var(--pine2),var(--pine2)) 0/var(--p,50%) 100% no-repeat,var(--ground2)}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--ground2)}
input[type=range]::-moz-range-progress{height:8px;border-radius:99px;background:var(--pine2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--surface);border:3px solid var(--pine2);margin-top:-7px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--pine2)}
.rng .scale{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3);font-weight:600}
.plans-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:var(--ground2);border-radius:14px;padding:4px;margin-top:4px;border:0}
.plans-seg label{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;border-radius:11px;cursor:pointer;font-weight:800;font-size:14px;text-align:center;line-height:1.2}
.plans-seg label small{font-size:11.5px;font-weight:600;color:var(--ink3)}
.plans-seg input{position:absolute;opacity:0;pointer-events:none}
.plans-seg input:checked+label{background:var(--surface);box-shadow:0 1px 3px rgba(13,25,22,.12)}
.plans-seg input:focus-visible+label{outline:3px solid var(--mint);outline-offset:2px}
.result{background:var(--pine);color:var(--pine-ink);border-radius:24px;padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:6px}
.result .big{font-size:clamp(34px,4.4vw,48px);font-weight:800;letter-spacing:-.045em;color:#fff;line-height:1}
.result .lbl{font-size:13px;font-weight:700;color:var(--pine-mute);text-transform:uppercase;letter-spacing:.06em}
.result dl{margin:16px 0 0;display:flex;flex-direction:column}
.result dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.1);font-size:14.5px}
.result dt{color:var(--pine-ink)}
.result dd{margin:0;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.result .per{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.result .per span{background:rgba(46,209,138,.14);color:var(--mint);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:800}
.result .fine{font-size:12.5px;color:var(--pine-mute);margin-top:12px;line-height:1.5}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{background:var(--surface);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:8px;position:relative;box-shadow:inset 0 0 0 1.5px var(--line)}
.plan.pick{box-shadow:inset 0 0 0 2px var(--pine2)}
.plan .tag{position:absolute;top:20px;right:20px;font-size:12px;font-weight:800;padding:4px 10px;border-radius:99px;background:var(--mint-bg);color:var(--mint-ink)}
.plan h3{font-size:22px;font-weight:800}
.plan .price{font-size:30px;font-weight:800;letter-spacing:-.04em}
.plan .price small{font-size:14px;font-weight:700;color:var(--ink3);letter-spacing:0}
.plan .fee{font-family:var(--f-mono);font-size:13.5px;color:var(--mint-ink)}
.plan p{font-size:14.5px;color:var(--ink2)}
.plans-note{margin-top:14px;font-size:14px;color:var(--ink3)}

/* form */
.join{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,64px);align-items:start}
@media (max-width:900px){.join{grid-template-columns:minmax(0,1fr)}.join .photo{display:none}}
.join .pitch h2{font-size:clamp(32px,4.4vw,52px)}
.join .pitch p{margin-top:14px;color:var(--ink2);font-size:17px}
.join .contact{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.join .photo{margin:28px 0 0;border-radius:22px;overflow:hidden;position:relative;max-width:100%}
.join .photo img{width:100%;aspect-ratio:720/440;object-fit:cover}
.join .photo figcaption{position:absolute;left:12px;bottom:12px;background:rgba(15,61,54,.88);color:#fff;font-size:13px;font-weight:700;padding:8px 12px;border-radius:12px;display:flex;align-items:center;gap:8px}
.join .photo figcaption .ic{color:var(--mint)}
.form{background:var(--surface);border-radius:26px;padding:clamp(20px,3vw,32px);box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 14px}
.form .full{grid-column:1/-1}
@media (max-width:560px){.form{grid-template-columns:minmax(0,1fr)}}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f label{font-size:13.5px;font-weight:800}
.f label small{font-weight:600;color:var(--ink3)}
.f input,.f select,.f textarea{width:100%;min-height:50px;border-radius:14px;border:1.5px solid var(--line);background:var(--ground);color:var(--ink);padding:0 14px;font:inherit;font-size:16px;outline:0;transition:border-color .15s}
.f textarea{padding:12px 14px;min-height:96px;resize:vertical;line-height:1.5}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--pine2)}
.f.err input,.f.err select,.f.err textarea{border-color:var(--red-ink)}
.f .msg{font-size:13px;font-weight:700;color:var(--red-ink)}
.check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:14px;color:var(--ink2);cursor:pointer}
.check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--pine2)}
.form .btn{width:100%}
.form .small{font-size:12.5px;color:var(--ink3);text-align:center}
.alert{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--amber-bg);color:var(--amber-ink);font-weight:700;font-size:14px}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:10px;max-width:860px}
.faq details{background:var(--surface);border-radius:18px;padding:0 20px}
.sec.white .faq details{background:var(--ground)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:62px;font-weight:800;font-size:16.5px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:transform .2s;color:var(--ink3)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details p{padding:0 0 18px;color:var(--ink2);font-size:15.5px;max-width:62ch}

/* download band */
.dl{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.dl h2{font-size:clamp(28px,3.6vw,44px)}
.dl p{color:var(--ink2);margin-top:8px}
.dl .side{display:flex;flex-direction:column;gap:12px}

/* footer */
.foot{background:var(--ground);border-top:1px solid var(--line);padding-block:40px 32px;color:var(--ink2);font-size:14.5px}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:28px}
.foot .logo{color:var(--ink);font-weight:800}
.foot h4{margin:0 0 10px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot a{text-decoration:none;font-weight:600}
.foot a:hover{color:var(--ink)}
.foot .copy{grid-column:1/-1;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--ink3);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:760px){.foot .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot .brand{grid-column:1/-1}}

/* prose (privasi, terima kasih) */
.prose{max-width:720px;font-size:16.5px;color:var(--ink2)}
.prose h1{font-size:clamp(34px,5vw,54px);color:var(--ink);letter-spacing:-.045em}
.prose h2{font-size:22px;color:var(--ink);margin:36px 0 10px;letter-spacing:-.02em}
.prose p,.prose ul{margin:0 0 14px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:6px}
.prose b{color:var(--ink)}
.prose .meta{font-family:var(--f-mono);font-size:13px;color:var(--ink3);margin:14px 0 28px}
.done{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:640px}
.done .badge{width:64px;height:64px;border-radius:20px;background:var(--mint);color:#062E20;display:flex;align-items:center;justify-content:center}
.done .badge .ic{width:32px;height:32px;stroke-width:2.4}
.done h1{font-size:clamp(34px,5vw,56px);color:#fff;letter-spacing:-.045em}
.done p{color:var(--pine-ink);font-size:17.5px}
.code{font-family:var(--f-mono);background:rgba(255,255,255,.1);border-radius:8px;padding:2px 8px;color:#fff}