/* Kira Dulu Visual 2
   Shared presentation layer for the public source pages and calculator showcase. */

:root,
html[data-theme="glass"]{
  color-scheme:light;
  --cream:#f5efe5;
  --paper:#fffaf3;
  --card:#fffdf8;
  --ink:#17201a;
  --ink-soft:#536159;
  --ink-faint:#788078;
  --coral:#f05a2a;
  --coral-deep:#c8451d;
  --blush:#fce4d8;
  --mint:#6f9e83;
  --mint-deep:#0b4938;
  --mint-soft:#dce9df;
  --sky:#789485;
  --sky-soft:#e3ece6;
  --lemon:#d79836;
  --lemon-soft:#f4e8ca;
  --grape:#315e4d;
  --grape-soft:#dfe9e3;
  --line:#e5ddd0;
  --line-strong:#d7cdbd;
  --shadow-sm:0 1px 0 rgba(23,32,26,.04),0 8px 24px rgba(30,45,36,.055);
  --shadow-md:0 1px 0 rgba(23,32,26,.05),0 18px 46px rgba(30,45,36,.09);
  --shadow-lg:0 1px 0 rgba(23,32,26,.05),0 30px 80px rgba(30,45,36,.13);
  --r-sm:10px;
  --r-md:14px;
  --r-lg:22px;
  --r-xl:32px;
}

html{background:var(--cream);scroll-padding-top:96px}
body{
  min-width:320px;
  background-color:var(--cream);
  background-image:none!important;
  color:var(--ink);
}
body::before,body::after{background-image:none!important}
::selection{background:var(--mint-soft);color:var(--mint-deep)}
:where(a,button,input,select,summary):focus-visible{outline:3px solid var(--coral)!important;outline-offset:3px}
.wrap{max-width:1280px;padding-inline:34px}
.tnum,.res-amt,.metric b,.lab-number input{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}

/* Product navigation */
.nav-shell{padding:14px 20px 8px;background:rgba(245,239,229,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav{
  max-width:1240px;
  min-height:58px;
  gap:22px;
  padding:7px 8px 7px 15px;
  border:1px solid rgba(118,111,99,.2);
  border-radius:18px;
  background:rgba(255,250,243,.86);
  box-shadow:var(--shadow-sm);
}
.brand{min-height:44px;color:var(--mint-deep);letter-spacing:-.025em}
.brand .blob{width:38px;height:38px;border-radius:10px 10px 10px 3px;background:var(--mint-deep);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transform:none}
.nav-links{gap:2px}
.nav-links a{min-height:44px;display:inline-flex;align-items:center;color:#5e655f;font-size:13.5px;padding:9px 12px}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:var(--mint-soft);color:var(--mint-deep)}
.nav-right .btn{min-height:44px}
.nav-cta-primary{background:var(--mint-deep);color:#fffaf3;box-shadow:none}
.nav-cta-primary:hover{background:#063c2d;box-shadow:none;transform:translateY(-1px)}
button.kd-theme-toggle{display:none!important}

.kd-tool-dock{
  width:min(1180px,calc(100% - 68px));
  margin:6px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,250,243,.72);
}
.kd-tool-dock a{min-width:max-content;min-height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;font-size:11px;font-weight:800;color:var(--ink-soft);white-space:nowrap;transition:background .2s,color .2s}
.kd-tool-dock a:hover,.kd-tool-dock a[aria-current="page"]{background:var(--mint-deep);color:#fffaf3}

/* Small calculator-browser frame: a visual cue, not a fake app shell. */
.kd-window-bar{
  grid-column:1 / -1;
  min-height:52px;
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 22px;
  padding:10px 16px;
  border:1px solid var(--mint-deep);
  border-radius:28px 28px 0 0;
  background:rgba(255,250,243,.88);
  box-shadow:0 8px 22px rgba(30,45,36,.06);
}
.kd-calculator .kd-window-bar{width:calc(100% + min(24vw,300px))}
.kd-money-lab .kd-window-bar{width:calc(100% + 220px)}
.kd-window-dots{display:flex;gap:7px;flex:0 0 auto}
.kd-window-dots i{display:block;width:11px;height:11px;border-radius:50%;background:var(--coral)}
.kd-window-dots i:nth-child(2){background:#d6a13e}
.kd-window-dots i:nth-child(3){background:#8d9c91}
.kd-window-title{display:inline-flex;align-items:center;min-height:28px;padding:5px 12px;border-radius:999px;background:#f0ece3;color:#6a736c;font-size:11px;font-weight:700;letter-spacing:.01em;overflow-wrap:anywhere}
.kd-privacy-signal{position:fixed;z-index:40;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;max-width:min(270px,calc(100vw - 36px));padding:8px 11px;border:1px solid rgba(11,73,56,.18);border-radius:999px;background:rgba(255,250,243,.92);box-shadow:0 8px 22px rgba(30,45,36,.10);backdrop-filter:blur(12px);color:var(--mint-deep);font-size:10px;font-weight:800}
.kd-privacy-signal i{display:block;width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--mint-deep);box-shadow:0 0 0 3px var(--mint-soft)}

/* Shared editorial language */
.hero{padding:42px 0 38px}
.hero-h{max-width:1050px;margin-top:16px;font-size:clamp(44px,5.4vw,74px);letter-spacing:-.055em;text-wrap:balance}
.hero-h .swish{color:var(--mint-deep)}
.hero-h em,.kd-editorial{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic}
.hero-sub{max-width:740px;margin-top:17px;color:var(--ink-soft);font-size:17px;line-height:1.58;text-wrap:pretty}
.eyebrow{border:1px solid #c6d8cb;background:var(--mint-soft);color:var(--mint-deep);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.eyebrow .dot{background:var(--coral)}
.kd-tagline{color:var(--mint-deep);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.kd-tagline em{font-family:Georgia,"Times New Roman",serif;font-size:1.15em;text-transform:none;color:var(--coral-deep)}
.hook span{border:1px solid var(--line);background:rgba(255,250,243,.76);font-size:11px;color:var(--ink-soft)}
.kicker{color:var(--coral-deep);font-size:11px}
.sec{padding:58px 0}
.sec-h{font-size:clamp(32px,3.8vw,48px);letter-spacing:-.045em}
.sec-desc{line-height:1.65}

.panel,.result,.tool-panel,.answer-block,.chart-card,.faq,.lead-box,.browser-frame,.money-lab-shell{
  border:1px solid rgba(116,108,95,.23);
  background:rgba(255,252,247,.88);
  background-image:none!important;
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.panel,.chart-card{border-radius:22px}
.panel{padding:26px}
.panel-h{padding-bottom:14px;border-bottom:1px solid var(--line)}
.panel-h b{color:var(--mint-deep);font-size:17px}
.field{margin-bottom:20px}
.field-top{margin-bottom:6px}
.field-top label,.num-label{color:var(--ink);font-size:12px;letter-spacing:.01em}
.field-top .v{color:var(--mint-deep);font-size:16px}
input[type="range"]{height:48px;padding:20px 0;background:var(--mint-soft) content-box;background-clip:content-box;accent-color:var(--coral)}
input[type="range"]::-webkit-slider-thumb{width:25px;height:25px;margin-top:-8.5px;background:var(--coral);border:5px solid var(--paper);box-shadow:0 2px 8px rgba(105,48,24,.24)}
input[type="range"]::-moz-range-thumb{width:25px;height:25px;background:var(--coral);border:5px solid var(--paper);box-shadow:0 2px 8px rgba(105,48,24,.24)}
.text-input,.select-input{min-height:48px;background:#fffdf8;border:1px solid var(--line-strong);border-radius:12px;font-size:16px}
.text-input:focus,.select-input:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(240,90,42,.14)}
.seg button{min-height:48px;border:1px solid var(--line-strong);border-radius:12px;background:#fffdf8;color:var(--ink-soft)}
.seg button:hover,.seg button.on{border-color:#99b3a3;background:var(--mint-soft);color:var(--mint-deep)}
.live{color:var(--mint-deep)}
.live i{background:var(--coral);animation:none}
.panel-note,.disclaimer{border-top:1px solid var(--line);color:var(--ink-faint)}

.btn{border-radius:999px;box-shadow:none;transition:transform .2s,background .2s,color .2s,border-color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn-coral{background:var(--coral);color:#fff;box-shadow:none}
.btn-coral:hover{background:var(--coral-deep);box-shadow:none}
.btn-soft{background:var(--mint-soft);color:var(--mint-deep);box-shadow:inset 0 0 0 1px #bfd3c4}
.btn-soft:hover{background:#cfe0d4}
.btn-ghost{box-shadow:inset 0 0 0 1px var(--line-strong)}

/* Homepage: asymmetric brand anchor plus live decision panel */
.kd-home .hero{padding:38px 0 26px}
.kd-home .hero-grid{grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);gap:42px;align-items:center}
.kd-home .hero-copy{position:relative;min-height:610px;padding:34px 92px 166px 0}
.kd-home .hero-h{font-size:clamp(58px,6vw,88px);line-height:.92;max-width:710px;margin-top:18px}
.kd-home .hero-h .swish{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;color:var(--coral-deep)}
.kd-home .hero-sub{max-width:560px;font-size:17px}
.hero-harimau{position:absolute;z-index:0;right:-40px;bottom:-16px;width:280px;height:auto;filter:drop-shadow(0 25px 28px rgba(26,55,40,.17));pointer-events:none}
.kd-home .hero-copy > :not(.hero-harimau){position:relative;z-index:1}
.decision-jumps{position:absolute!important;z-index:2!important;left:0;bottom:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:min(360px,75%)}
.decision-jumps a{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;border:1px solid rgba(11,73,56,.18);border-radius:12px;background:rgba(255,250,243,.82);font-size:11px;font-weight:800;color:var(--mint-deep);backdrop-filter:blur(10px)}
.decision-jumps a::after{content:"→";color:var(--coral-deep)}
.decision-jumps a:hover{background:var(--mint-soft)}
.kd-home .browser-frame{overflow:hidden;border-color:rgba(11,73,56,.26);border-radius:28px;background:var(--mint-deep);box-shadow:0 32px 80px rgba(18,54,40,.21);transform:rotate(.35deg)}
.kd-home .browser-bar{background:#fffaf3;border-bottom:1px solid var(--line);padding:12px 16px}
.kd-home .browser-bar i:nth-child(1){background:var(--coral)}
.kd-home .browser-bar i:nth-child(2){background:#dca348}
.kd-home .browser-bar i:nth-child(3){background:var(--mint)}
.kd-home #home-calc{position:relative;top:auto;border:0;border-radius:0;background:var(--mint-deep);color:#fffaf3;box-shadow:none;padding-top:4px}
.kd-home #home-calc .res-top{padding:20px 24px 4px}
.kd-home #home-calc .pill{background:rgba(255,255,255,.12);color:#fffaf3}
.kd-home #home-calc .live{color:#d9eadf}
.kd-home #home-calc .field-top label,.kd-home #home-calc .field-top .v,.kd-home #home-calc .res-hero .lab,.kd-home #home-calc .res-meta,.kd-home #home-calc .source-line{color:#f7f1e7}
.kd-home #home-calc .res-inputs{padding:18px 24px 2px}
.kd-home #home-calc input[type="range"]{background:rgba(255,255,255,.2) content-box;background-clip:content-box}
.kd-home #home-calc .res-hero{padding-top:4px}
.kd-home #home-calc .res-amt{color:#fffaf3;font-size:70px}
.kd-home #home-calc .gate{padding:20px 24px 24px;background:transparent;background-image:none}
.kd-home #home-calc .btn{background:var(--coral)}
.kd-home .answer-block{display:none}
.kd-home .harimau-band>.harimau{display:none}
.kd-home .harimau-band{padding-block:18px;border-block:1px solid var(--line)}
.kd-home .trust-row{gap:26px}
.kd-home .trust-item{align-items:center}
.kd-home .ti-ic{border-radius:50%;background:var(--mint-soft);color:var(--mint-deep)}

/* Editorial tool directories instead of SaaS cards */
.tool-grid,.hub-grid{gap:0;border-top:1px solid var(--line-strong);border-inline:1px solid var(--line-strong)}
.kd-home .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.tool-card{
  position:relative;
  min-height:170px;
  padding:26px 70px 26px 4px;
  border:0;
  border-bottom:1px solid var(--line-strong);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition:background .2s,padding .2s;
}
.tool-card:nth-child(odd){border-right:1px solid var(--line-strong);padding-right:72px}
.tool-card:nth-child(even){padding-left:28px}
.tool-card:hover{background:rgba(255,250,243,.62);box-shadow:none;transform:none;padding-inline-start:18px}
.tool-card h3{font-size:24px;letter-spacing:-.035em;color:var(--mint-deep)}
.tool-card p{max-width:46ch;color:var(--ink-soft);font-size:13px;line-height:1.6}
.tool-card .cic{position:absolute;right:10px;top:24px;width:48px;height:48px;border-radius:50%;background:var(--mint-soft)!important;color:var(--mint-deep)!important;font-size:10px}
.tool-card:nth-child(even) .cic{right:8px}
.tool-card .tag{position:static;display:inline-block;margin-bottom:12px;padding:5px 8px;border:1px solid #bfd2c3;background:var(--mint-soft);color:var(--mint-deep);border-radius:999px;font-size:9px}
.kd-home .tool-card:first-child{grid-column:1/-1;min-height:210px;padding:36px 120px 34px 4px;border-right:0;background:var(--mint-deep);color:#fffaf3}
.kd-home .tool-card:first-child h3{font-size:38px;color:#fffaf3}
.kd-home .tool-card:first-child p{color:#dbe8df;font-size:15px;max-width:64ch}
.kd-home .tool-card:first-child .cic{right:38px;top:38px;width:68px;height:68px;background:var(--coral)!important;color:#fff!important}

/* Calculator hub */
.kd-hub .hero{padding-bottom:20px}
.kd-hub .hero-grid{grid-template-columns:minmax(0,1fr) 285px;gap:44px;align-items:center}
.hub-hero-copy{min-width:0}
.kd-hub .hero-h{font-size:clamp(48px,6vw,78px)}
.hub-context{max-width:720px;margin-top:22px;border-block:1px solid var(--line)}
.hub-context summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;color:var(--mint-deep);font-size:12px;font-weight:800;cursor:pointer;list-style:none}
.hub-context summary::-webkit-details-marker{display:none}
.hub-context summary::after{content:"+";color:var(--coral-deep);font-size:18px}
.hub-context[open] summary::after{content:"−"}
.hub-context .answer-block{margin:0 0 16px;padding:14px 0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.hub-context .answer-block p{font-size:13px;line-height:1.7}
.hub-hero-aside{min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;margin-top:38px;padding:28px;border:1px solid var(--line-strong);border-radius:24px;background:var(--mint-deep);color:#fffaf3;box-shadow:var(--shadow-md)}
.hub-hero-aside img{display:block;width:138px;height:auto;object-fit:contain;margin:-112px auto 20px;filter:drop-shadow(0 15px 20px rgba(0,0,0,.16))}
.hub-hero-aside strong{font-family:"Bricolage Grotesque",sans-serif;font-size:24px}
.hub-hero-aside span{color:#d7e5db;font-size:13px}
.kd-hub .tool-grid,.kd-hub .hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.kd-hub .tool-card{min-height:188px;border-right:1px solid var(--line-strong);padding-left:18px;padding-right:68px}
.kd-hub .tool-card:nth-child(3n){border-right:0}

/* KD-059-J2: keep the directory rows complete and give the BM home the same shell. */
.kd-hub .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.kd-hub .hub-grid .tool-card{min-height:188px}
html[lang="ms"] body.kd-home .harimau-band>.harimau{display:block}
html[lang="ms"] body.kd-home .hero-copy{position:relative}
html[lang="ms"] body.kd-home .hero-harimau{right:-40px;bottom:60px;width:130px}
@media(max-width:1120px){html[lang="ms"] body.kd-home .hero-harimau{display:none}}
@media(max-width:560px){html[lang="ms"] body.kd-home .tool-card{min-height:145px}html[lang="ms"] body.kd-home .tool-card:first-child{min-height:190px}}

/* Calculator workspaces */
.kd-calculator .hero{padding:30px 0 22px}
.kd-calculator .hero>.wrap{position:relative;padding-right:min(24vw,300px)}
.kd-calculator .hero>.wrap::after{content:"";position:absolute;right:54px;bottom:-28px;width:120px;height:148px;background:url('/assets/img/harimau-master.webp') center bottom/contain no-repeat;opacity:.95;filter:drop-shadow(0 15px 18px rgba(26,55,40,.13));pointer-events:none}
.kd-calculator .hero-h{max-width:880px;font-size:clamp(42px,5vw,66px)}
.kd-calculator .hero-sub{max-width:690px}
.kd-calculator .hero .answer-block{display:none}
.kd-calculator .sec-tight{padding-top:10px}
.calc-layout{grid-template-columns:minmax(380px,.82fr) minmax(0,1.18fr);gap:22px}
.calc-layout>.panel{margin-top:0}
.calc-layout>.chart-card,.calc-layout>.result{min-width:0;overflow:hidden}
.chart-card{background:rgba(255,252,247,.92);box-shadow:var(--shadow-lg)}
.chart-card>.res-hero,.result>.res-hero{margin:0;background:var(--mint-deep);color:#fffaf3;padding:28px 28px 24px}
.chart-card .res-hero .lab,.chart-card .res-meta,.result .res-hero .lab,.result .res-meta{color:#dce9df}
.chart-card .res-amt,.result .res-amt{color:#fffaf3;font-size:clamp(44px,5vw,66px);letter-spacing:-.055em}
.kd-eligibility .res-amt .pre{color:#dce9df}
.metric-grid{gap:10px;padding:18px}
.metric{border:1px solid var(--line);border-radius:14px;background:#f7f2e9;padding:14px}
.metric span{color:#747c75;font-size:9.5px}
.metric b{color:var(--mint-deep);font-size:19px}
.chart-wrap{margin:0 18px 18px;border:1px solid var(--line);border-radius:16px;background:#fffdf8;padding:10px}
.source-line{color:var(--ink-faint);line-height:1.55}
.chart-card>.source-line{margin:0 22px 22px}
.gate{background:transparent;background-image:none!important}
.dsr-primer,.card-preset,.lab-workbench,.lab-rail,.lab-spotlight{background-image:none!important}
.dsr-primer{background:rgba(255,250,243,.72)}
.dsr-scale{margin-top:18px;background:var(--mint)}
.dsr-scale span{position:absolute;z-index:0;inset:0 40% 0 45%;background:var(--lemon);pointer-events:none}
.dsr-scale::after{content:"";position:absolute;z-index:0;inset:0 0 0 60%;border-radius:0 999px 999px 0;background:var(--coral);pointer-events:none}
.dsr-scale i{z-index:1}
.dsr-result .metric-grid{padding:22px 24px 24px}
.dsr-result .metric span{color:#646c66;font-size:10.5px}
.dsr-result .metric b{color:var(--ink)}
.dsr-result-footer{background:#f7f2e9}

.kd-method-note{max-width:1280px;margin:18px auto 0;padding:0 34px}
.kd-method-note summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-block:1px solid var(--line);color:var(--mint-deep);font-size:12px;font-weight:800;cursor:pointer;list-style:none}
.kd-method-note summary::-webkit-details-marker{display:none}
.kd-method-note summary::after{content:"+";font-size:20px;color:var(--coral-deep)}
.kd-method-note[open] summary::after{content:"−"}
.kd-method-note .answer-block{display:block!important;margin-top:12px;border:0;border-left:3px solid var(--coral);border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;padding:12px 18px}
.kd-method-note .answer-block p{font-size:13px;line-height:1.7}

.kd-exact-control{display:inline-grid;grid-template-columns:44px minmax(78px,110px) auto 44px;align-items:center;float:right;margin:-4px 0 14px;border:1px solid var(--line-strong);border-radius:13px;overflow:hidden;background:#fffdf8}
.kd-exact-control button{width:44px;height:44px;border:0;background:var(--mint-soft);color:var(--mint-deep);font-size:18px;font-weight:800;cursor:pointer}
.kd-exact-control button:hover{background:#c9ddcf}
.kd-exact-control input{width:100%;height:44px;border:0;background:transparent;text-align:right;padding:8px 4px;font:800 14px "Plus Jakarta Sans",sans-serif;color:var(--ink);outline:0;font-variant-numeric:tabular-nums}
.kd-exact-control span{padding:0 8px;color:var(--coral-deep);font-size:11px;font-weight:800}
.kd-eligibility #gate-box{display:none}

/* Money Lab: focused desktop workspace, compact touch-first mobile grid */
.kd-money-lab .money-lab-hero{padding:28px 0 20px}
.kd-money-lab .money-lab-hero .wrap{position:relative;padding-right:220px}
.kd-money-lab .money-lab-hero .wrap::after{content:"";position:absolute;right:50px;bottom:-50px;width:138px;height:166px;background:url('/assets/img/harimau-master.webp') center bottom/contain no-repeat;filter:drop-shadow(0 16px 18px rgba(26,55,40,.13))}
.kd-money-lab .money-lab-hero .hero-h{max-width:940px;font-size:clamp(48px,5.5vw,76px)}
.lab-proof-strip{border:1px solid var(--line-strong);border-radius:16px;background:rgba(255,250,243,.7);overflow:hidden}
.lab-proof-strip span+span{border-color:var(--line)}
.money-lab-shell{display:grid;grid-template-columns:238px minmax(0,1fr);overflow:hidden;border-radius:28px;background:var(--card);box-shadow:var(--shadow-lg)}
.lab-rail{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:24px 16px;background:var(--mint-deep);color:#fffaf3}
.lab-rail::after{display:none}
.lab-rail-head{padding:0 8px 20px;border:0;border-bottom:1px solid rgba(255,255,255,.17)}
.lab-rail-head strong{font-size:30px;letter-spacing:-.04em}
.lab-tabs{display:grid;grid-template-columns:1fr;gap:5px;padding:15px 0}
.lab-tabs button{grid-template-columns:38px minmax(0,1fr);min-height:58px;border:1px solid transparent;border-radius:13px;background:transparent;color:#e7efe9;padding:8px 10px}
.lab-tabs button:hover{transform:none;background:rgba(255,255,255,.07)}
.lab-tabs button.on{border-color:rgba(255,255,255,.2);background:#fffaf3;color:var(--mint-deep);box-shadow:none}
.lab-tabs button>span{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);font-size:9px}
.lab-tabs button.on>span{background:var(--mint-soft)}
.lab-tabs button b{font-size:11.5px}
.lab-privacy{margin-top:auto;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);backdrop-filter:none}
.lab-workbench{padding:30px;background:var(--cream)}
.lab-title h2{font-size:40px;color:var(--mint-deep)}
.lab-grid{grid-template-columns:minmax(330px,.82fr) minmax(440px,1.18fr);gap:20px}
.lab-form{padding:22px;border-radius:20px;background:#fffdf8}
.lab-field{grid-template-columns:minmax(0,1fr) auto;column-gap:12px;margin-bottom:14px}
.lab-number{border:1px solid var(--line-strong);border-radius:13px;background:#fffdf8;box-shadow:none}
.lab-number input{width:84px;font-size:13px}
.lab-number span{background:transparent;color:var(--coral-deep);border-left:0;padding:0 6px}
.lab-stepper{width:44px;height:44px;border:0;background:var(--mint-soft);color:var(--mint-deep);font-size:18px;font-weight:800;cursor:pointer}
.lab-stepper:first-child{border-right:1px solid var(--line)}
.lab-stepper:last-child{border-left:1px solid var(--line)}
.lab-stepper:hover{background:#c9ddcf}
.lab-output{border-radius:20px;background:#fffdf8}
.lab-spotlight{padding:28px;background:var(--mint-deep);color:#fffaf3}
.lab-spotlight strong{font-size:52px}
.lab-spotlight strong[data-tone="warn"]{color:#f2ca83}
.lab-sources a{background:var(--mint-soft);color:var(--mint-deep)}
.lab-convention{border:1px solid #ded0ab;border-left:4px solid #c48a26;background:var(--lemon-soft)}
.lab-table-title{background:var(--mint-soft);color:var(--mint-deep)}
.lab-saved{background:#f7f2e9}
.kd-money-mobile-nav{display:none}

/* Quiet secondary material: preserved and crawlable, visually out of the way. */
.faq-grid{gap:12px}
.faq{min-height:0;padding:18px;border:1px solid var(--line);border-radius:14px;background:transparent;box-shadow:none;backdrop-filter:none}
.faq h3{font-size:14px;color:var(--mint-deep)}
.faq h3 span{color:var(--coral-deep)}
.faq p{font-size:12px;color:var(--ink-faint);line-height:1.6}
footer{margin-top:20px;background:var(--mint-deep);color:#fffaf3}
footer .foot-brand p,footer .foot-col a,footer .foot-bottom,footer .foot-bottom p{color:#ccdbd1}
footer .foot-col h3{color:#fffaf3}

/* Small reveal only; the product remains usable without it. */
[data-kd-reveal]{opacity:0;transform:translateY(10px);transition:opacity .42s ease,transform .42s ease}
[data-kd-reveal].is-visible{opacity:1;transform:none}

@media(max-width:1120px){
  .kd-tool-dock{width:calc(100% - 48px);overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .kd-tool-dock::-webkit-scrollbar{display:none}
  .kd-tool-dock a{padding-inline:10px}
  .kd-home .hero-grid{grid-template-columns:1fr 1fr;gap:24px}
  .kd-home .hero-copy{padding-right:40px}
  .hero-harimau{right:-20px;width:230px}
  .calc-layout,.lab-grid{grid-template-columns:1fr}
  .result{position:static}
  .lab-output{position:static}
  .kd-hub .tool-grid,.kd-hub .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kd-hub .tool-card:nth-child(3n){border-right:1px solid var(--line-strong)}
  .kd-hub .tool-card:nth-child(even){border-right:0}
}

@media(max-width:880px){
  html{scroll-padding-top:76px}
  .wrap{padding-inline:22px}
  .nav-shell{padding:8px 10px}
  .nav{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;min-height:56px;padding:7px 8px 7px 12px;border-radius:16px}
  .nav-links{grid-column:1/-1;grid-row:2;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin-left:0}
  .nav-links a{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:40px;padding:8px 6px;font-size:11px;white-space:nowrap}
  .nav-right{grid-column:2;grid-row:1;justify-self:end;margin-left:0;display:flex;align-items:center;gap:6px}
  .nav-cta-primary{font-size:11px;min-width:0;max-width:150px;padding:10px 13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kd-tool-dock{position:relative;display:flex;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding-right:28px}
  .kd-tool-dock::-webkit-scrollbar{display:none}
  .kd-tool-dock[data-overflow="true"]:not([data-end="true"])::after{content:"Swipe →";position:absolute;right:4px;top:5px;bottom:5px;display:flex;align-items:center;padding-left:15px;color:var(--mint-deep);font-size:10px;font-weight:800;letter-spacing:.02em;background:linear-gradient(90deg,rgba(255,250,243,0),rgba(255,250,243,.98) 42%);pointer-events:none}
  .hero{padding-top:28px}
  .hero-grid{display:grid;grid-template-columns:1fr}
  .hero-h{font-size:48px}
  .kd-home .hero,.kd-home .hero-grid{overflow:hidden}
  .kd-home .hero-grid{grid-template-columns:1fr}
  .kd-home .hero-copy{min-height:560px;padding:18px 130px 150px 0}
  .kd-home .hero-h{font-size:64px}
  .hero-harimau{right:-8px;bottom:0;width:230px}
  .decision-jumps{width:70%}
  .kd-home .browser-frame{transform:none}
  .kd-home .trust-row{grid-template-columns:repeat(2,1fr)}
  .kd-hub .hero-grid{grid-template-columns:1fr}
  .hub-hero-aside{min-height:0;display:grid;grid-template-columns:82px repeat(3,1fr);align-items:center;gap:8px;margin-top:54px;padding:16px 18px}
  .hub-hero-aside img{width:72px;height:auto;object-fit:contain;margin:-50px 0 -12px}
  .hub-hero-aside strong{font-size:14px}
  .hub-hero-aside span{font-size:10px;text-align:center}
  .kd-calculator .hero>.wrap{padding-right:180px}
  .kd-calculator .kd-window-bar{width:calc(100% + 180px)}
  .kd-calculator .hero>.wrap::after{right:28px}
  .money-lab-shell{grid-template-columns:1fr}
  .lab-rail{display:block;padding:16px;background:var(--mint-deep)}
  .lab-rail-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px 10px;border-right:0;border-bottom:1px solid rgba(255,255,255,.17)}
  .lab-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:12px 0 2px;overflow:visible}
  .lab-tabs button{display:grid;grid-template-columns:1fr;place-items:center;gap:5px;min-width:0;min-height:68px;padding:6px 3px;text-align:center}
  .lab-tabs button>span{width:30px;height:30px}
  .lab-tabs button b{font-size:9px;line-height:1.05;overflow-wrap:anywhere}
  .lab-scroll-hint,.lab-privacy{display:none}
  .lab-workbench{padding:20px}
  .kd-money-lab .money-lab-hero .wrap{padding-right:145px}
  .kd-money-lab .kd-window-bar{width:calc(100% + 145px)}
  .kd-money-lab .money-lab-hero .wrap::after{right:18px;width:104px;height:132px}
  .lab-grid{grid-template-columns:1fr}
}

@media(max-width:560px){
  body{padding-bottom:0}
  .wrap{padding-inline:16px}
  .nav{grid-template-columns:1fr;padding:7px 10px 10px}
  .brand{font-size:16px}
  .brand .blob{width:34px;height:34px;font-size:11px}
  .nav-right{grid-column:1;grid-row:2;justify-self:stretch}
  .nav-cta-primary{max-width:none;flex:1;padding-inline:12px}
  .nav-links{grid-column:1;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero{padding:22px 0 18px}
  .hero-h{font-size:40px;line-height:.98}
  .hero-sub{font-size:14px;line-height:1.55}
  .eyebrow{font-size:9.5px;padding:7px 10px}
  .sec{padding:38px 0}
  .sec-h{font-size:31px}
  .kd-home .hero{padding-top:8px}
  .kd-home .hero-copy{min-height:540px;padding:14px 0 176px}
  .kd-home .hero-h{font-size:52px;max-width:350px}
  .kd-home .hero-sub{max-width:335px}
  .kd-home .hook{max-width:240px}
  .hero-harimau{right:-12px;bottom:8px;width:198px}
  .decision-jumps{left:0;bottom:14px;width:66%;grid-template-columns:1fr;gap:8px}
  .decision-jumps a{min-height:44px;padding:8px 10px;font-size:9.5px}
  .kd-home .browser-frame{border-radius:22px}
  .kd-home #home-calc .res-amt{font-size:54px}
  .kd-home #home-calc .res-inputs,.kd-home #home-calc .res-top,.kd-home #home-calc .res-hero{padding-inline:18px}
  .kd-home .trust-row{grid-template-columns:1fr;gap:15px}
  .kd-home .tool-grid,.kd-hub .tool-grid,.kd-hub .hub-grid{grid-template-columns:1fr}
  .tool-card,.tool-card:nth-child(odd),.tool-card:nth-child(even),.kd-hub .tool-card{min-height:145px;padding:22px 62px 22px 4px;border-right:0}
  .kd-home .tool-card:first-child{min-height:190px;padding:28px 74px 26px 18px}
  .kd-home .tool-card:first-child h3{font-size:30px}
  .kd-home .tool-card:first-child .cic{right:18px;top:26px;width:48px;height:48px}
  .kd-hub .tool-card:nth-child(3n),.kd-hub .tool-card:nth-child(even){border-right:0}
  .kd-calculator .hero>.wrap{padding-right:104px}
  .kd-calculator .kd-window-bar{width:calc(100% + 104px)}
  .kd-calculator .hero>.wrap::after{right:5px;bottom:-18px;width:88px;height:108px}
  .kd-calculator .hero-h{font-size:37px}
  .kd-calculator .hero-sub{font-size:13px}
  .calc-layout{grid-template-columns:1fr;gap:14px}
  .panel{padding:18px}
  .chart-card>.res-hero,.result>.res-hero{padding:22px 18px}
  .chart-card .res-amt,.result .res-amt{font-size:40px}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px}
  .metric{padding:11px}
  .metric b{font-size:16px}
  .dsr-result .metric-grid{padding:18px}
  .dsr-result .dsr-metrics{grid-template-columns:1fr}
  .dsr-result .metric span{font-size:10px}
  .chart-wrap{height:260px;margin:0 12px 14px;padding:4px}
  .chart-wrap.compact{height:220px}
  .kd-method-note{padding-inline:16px;margin-top:8px}
  .kd-exact-control{float:none;margin:-4px 0 12px;width:100%;grid-template-columns:44px minmax(0,1fr) auto 44px}
  .faq-grid{grid-template-columns:1fr}
  footer .foot-grid{grid-template-columns:1fr}
  footer .foot-col:not(:first-of-type){display:none}
  /* Reserve a full safe area for the fixed shortcut bar so the last metric/footer line
     can always be scrolled clear of it. */
  .kd-money-lab{padding-bottom:112px;scroll-padding-bottom:112px}
  .kd-money-lab .money-lab-hero{padding-top:18px}
  .kd-money-lab .money-lab-hero .wrap{padding-right:92px}
  .kd-money-lab .kd-window-bar{width:calc(100% + 92px)}
  .kd-money-lab .money-lab-hero .wrap::after{right:2px;bottom:-22px;width:80px;height:102px}
  .kd-money-lab .money-lab-hero .hero-h{font-size:39px}
  .lab-proof-strip{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
  .lab-proof-strip span{padding:10px 5px;text-align:center;font-size:9px}
  .lab-proof-strip span+span{border-left:1px solid var(--line);border-top:0}
  .lab-proof-strip small{display:none}
  .money-lab-shell{border-radius:18px}
  .kd-money-lab .money-lab-shell{margin-bottom:112px}
  .lab-rail{padding:12px}
  .lab-rail-head strong{font-size:22px}
  .lab-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding-top:9px}
  .lab-tabs button{min-height:62px;border-radius:10px}
  .lab-tabs button b{font-size:10px}
  .lab-workbench{padding:14px}
  .lab-title{display:block;margin-bottom:14px}
  .lab-title .live{margin-top:8px}
  .lab-title h2{font-size:30px}
  .lab-form{padding:14px}
  .lab-field{grid-template-columns:1fr;grid-template-areas:"top" "range" "number";gap:0;margin-bottom:10px}
  .lab-number{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px;margin-bottom:5px}
  .lab-number:not(:has(.lab-stepper)){grid-template-columns:minmax(0,1fr) auto}
  .lab-number input{width:100%;font-size:14px}
  .lab-number span{justify-content:center;min-width:38px}
  .lab-spotlight{padding:22px 18px}
  .lab-spotlight strong{font-size:38px}
  .lab-output .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 14px 0}
  .lab-actions{padding:0 14px;grid-template-columns:1fr}
  .lab-actions.has-three #lab-download{grid-column:auto}
  .lab-saved{margin:12px 14px 14px}
  .kd-money-mobile-nav{position:fixed;z-index:80;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);padding:5px;border:1px solid rgba(255,255,255,.17);border-radius:16px;background:rgba(11,73,56,.94);backdrop-filter:blur(14px);box-shadow:0 14px 38px rgba(9,46,35,.28)}
  .kd-money-mobile-nav a{min-height:46px;display:grid;place-items:center;padding:5px 2px;border-radius:11px;color:#fffaf3;font-size:9px;font-weight:800;text-align:center}
  .kd-money-mobile-nav a:active{background:rgba(255,255,255,.12)}
  .kd-money-mobile-nav{transition:transform .18s ease,opacity .18s ease}
  body.kd-money-nav-hidden .kd-money-mobile-nav{transform:translateY(calc(100% + 18px));opacity:0;pointer-events:none}
  .kd-window-bar{margin-bottom:16px;padding-inline:12px;border-radius:22px 22px 0 0}
  .kd-window-title{max-width:calc(100vw - 118px);font-size:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  .kd-privacy-signal{right:12px;bottom:16px;max-width:220px;font-size:9px}
  .kd-money-lab .kd-privacy-signal{bottom:72px}
}

@media(prefers-reduced-motion:reduce){
  [data-kd-reveal]{opacity:1;transform:none;transition:none}
  .browser-frame{transform:none!important}
}

/* V2 must honour reduced-motion even when it loads after the legacy theme layer. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  body.kd-money-nav-hidden .kd-money-mobile-nav{transform:none;opacity:1}
}
